/* @karmo-co/drift-kit 25.11.0 — 243 layers, one bundle */

/* ══════════════════════════════════════════ drift-kit:layer tokens/brand/fonts.css ══════════════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · brand/font/face ═══ */
/* Self-hosted font files — replaces Google Fonts CDN @import.
   Consuming apps should preload these via ThemeProvider for FOUT prevention. */

/* Inter — Normal — Latin Extended */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("./fonts/inter-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
		U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
		U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter — Normal — Latin */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("./fonts/inter-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
		U+FEFF, U+FFFD;
}

/* Inter — Italic — Latin Extended */
@font-face {
	font-family: "Inter";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("./fonts/inter-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
		U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
		U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter — Italic — Latin */
@font-face {
	font-family: "Inter";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("./fonts/inter-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
		U+FEFF, U+FFFD;
}

/* Syne — Normal — Latin Extended */
@font-face {
	font-family: "Syne";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("./fonts/syne-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
		U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
		U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Syne — Normal — Latin */
@font-face {
	font-family: "Syne";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("./fonts/syne-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
		U+FEFF, U+FFFD;
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ════════════════════════════════════ drift-kit:layer tokens/brand/font-family.css ════════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · brand/font/family ═══ */
:root {
	--dk-primitive-font-family-inter: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--dk-primitive-font-family-syne: Syne, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ════════════════════════════════════ drift-kit:layer tokens/brand/font-weight.css ════════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · brand/font/weight ═══ */
:root {
	--dk-primitive-font-weight-thin: 100;
	--dk-primitive-font-weight-extra-light: 200;
	--dk-primitive-font-weight-light: 300;
	--dk-primitive-font-weight-regular: 400;
	--dk-primitive-font-weight-medium: 500;
	--dk-primitive-font-weight-semi-bold: 600;
	--dk-primitive-font-weight-bold: 700;
	--dk-primitive-font-weight-extra-bold: 800;
	--dk-primitive-font-weight-black: 900;
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ═══════════════════════════════ drift-kit:layer tokens/brand/color/foundation.css ═══════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · brand/color/foundation ═══ */
:root {
	--dk-primitive-color-foundation-black: #000000;
	--dk-primitive-color-foundation-black-0: #00000000;
	--dk-primitive-color-foundation-black-60: #00000099;
	--dk-primitive-color-foundation-white: #ffffff;
	--dk-primitive-color-foundation-white-0: #ffffff00;
	--dk-primitive-color-foundation-white-60: #ffffff99;
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ═════════════════════════════════════ drift-kit:layer tokens/brand/color/blue.css ═════════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · brand/color/blue ═══ */
:root {
	/* color */
	--dk-primitive-color-blue-50: #ebf5ff;
	--dk-primitive-color-blue-100: #e1effe;
	--dk-primitive-color-blue-200: #c3ddfd;
	--dk-primitive-color-blue-300: #a4cafe;
	--dk-primitive-color-blue-400: #76a9fa;
	--dk-primitive-color-blue-500: #3f83f8;
	--dk-primitive-color-blue-600: #1c64f2;
	--dk-primitive-color-blue-700: #1a56db;
	--dk-primitive-color-blue-800: #1e429f;
	--dk-primitive-color-blue-900: #233876;
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ═════════════════════════════════════ drift-kit:layer tokens/brand/color/gold.css ═════════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · brand/color/gold ═══ */
:root {
    --dk-primitive-color-gold-50: #fff9e5;
    --dk-primitive-color-gold-100: #fff2cc;
    --dk-primitive-color-gold-200: #ffe599;
    --dk-primitive-color-gold-300: #ffd966;
    --dk-primitive-color-gold-400: #ffcc33;
    --dk-primitive-color-gold-500: #ffbf00;
    --dk-primitive-color-gold-600: #cc9900;
    --dk-primitive-color-gold-700: #997300;
    --dk-primitive-color-gold-800: #664c00;
    --dk-primitive-color-gold-900: #332600;
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ═════════════════════════════════════ drift-kit:layer tokens/brand/color/gray.css ═════════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · brand/color/gray ═══ */
:root {
	--dk-primitive-color-gray-25: #f4f5f5;
	--dk-primitive-color-gray-50: #e9ebeb;
	--dk-primitive-color-gray-100: #d3d7d7;
	--dk-primitive-color-gray-200: #bcc2c3;
	--dk-primitive-color-gray-300: #a6aeaf;
	--dk-primitive-color-gray-400: #909a9b;
	--dk-primitive-color-gray-500: #7a8688;
	--dk-primitive-color-gray-600: #647274;
	--dk-primitive-color-gray-700: #4d5d60;
	--dk-primitive-color-gray-800: #37494c;
	--dk-primitive-color-gray-900: #213538;
	--dk-primitive-color-gray-1000: #1f2b2d;
	--dk-primitive-color-gray-1000-0: #1f2b2d00;
	--dk-primitive-color-gray-1100: #1e2223;
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ════════════════════════════════════ drift-kit:layer tokens/brand/color/green.css ════════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · brand/color/green ═══ */
:root {	
	--dk-primitive-color-green-50: #dcfce7;
	--dk-primitive-color-green-100: #cbf9db;
	--dk-primitive-color-green-200: #aef3cf;
	--dk-primitive-color-green-300: #7dd8a9;
	--dk-primitive-color-green-400: #5ebe8b;
	--dk-primitive-color-green-500: #48b47c;
	--dk-primitive-color-green-600: #31a76a;
	--dk-primitive-color-green-700: #2e9856;
	--dk-primitive-color-green-800: #218246;
	--dk-primitive-color-green-900: #166534;
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ═════════════════════════════════════ drift-kit:layer tokens/brand/color/jade.css ═════════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · brand/color/jade ═══ */
:root {
    --dk-primitive-color-jade-50: #e5f7f4;
    --dk-primitive-color-jade-100: #c9eee7;
    --dk-primitive-color-jade-200: #99dfd2;
    --dk-primitive-color-jade-300: #66cebb;
    --dk-primitive-color-jade-400: #33bea5;
    --dk-primitive-color-jade-500: #00ae8e;
    --dk-primitive-color-jade-600: #008b72;
    --dk-primitive-color-jade-700: #006855;
    --dk-primitive-color-jade-800: #004639;
    --dk-primitive-color-jade-850: #00342b;
    --dk-primitive-color-jade-900: #00231c;
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ════════════════════════════════════ drift-kit:layer tokens/brand/color/ocean.css ════════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · brand/color/ocean ═══ */
:root {
    --dk-primitive-color-ocean-50: #f3f6fc;
    --dk-primitive-color-ocean-100: #e7eef7;
    --dk-primitive-color-ocean-200: #c9d9ee;
    --dk-primitive-color-ocean-300: #9abadf;
    --dk-primitive-color-ocean-400: #6496cc;
    --dk-primitive-color-ocean-500: #4079b7;
    --dk-primitive-color-ocean-600: #2f5f9a;
    --dk-primitive-color-ocean-700: #284e80;
    --dk-primitive-color-ocean-800: #244168;
    --dk-primitive-color-ocean-850: #1f3a5d;
    --dk-primitive-color-ocean-900: #223858;
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ═══════════════════════════════════ drift-kit:layer tokens/brand/color/orange.css ═══════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · brand/color/orange ═══ */
:root {
	--dk-primitive-color-orange-50: #fff8f1;
	--dk-primitive-color-orange-100: #feecdc;
	--dk-primitive-color-orange-200: #fcd9bd;
	--dk-primitive-color-orange-300: #fdba8c;
	--dk-primitive-color-orange-400: #ff8a4c;
	--dk-primitive-color-orange-500: #ff5a1f;
	--dk-primitive-color-orange-600: #d03801;
	--dk-primitive-color-orange-700: #b43403;
	--dk-primitive-color-orange-800: #8a2c0d;
	--dk-primitive-color-orange-900: #771d1d;
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */

/* ── STOPGAP: new brand orange scale (moved here from primitives/transform.css 2026-09-09) (Figma Brand vars updated 2026-07-28) ──
   The Figma "Brand" collection orange primitives were re-valued to this
   scale, but the published drift-ui.css (drift.karmo.co) is a separate build
   that hasn't been regenerated yet, so it still serves the old orange. These
   overrides sit on :root (same scope drift-ui.css defines the primitives on)
   and win by source order — this file loads after drift-ui.css. Everything
   downstream flows automatically: the Drift "warning" semantic aliases to
   --color-orange-*, so warning surfaces/text pick these up too.
   DELETE this block once drift-ui.css is republished from the updated Figma. */
:root {
  --dk-primitive-color-orange-50:  #fff3e5;
  --dk-primitive-color-orange-100: #ffe7c9;
  --dk-primitive-color-orange-200: #ffd199;
  --dk-primitive-color-orange-300: #ffba66;
  --dk-primitive-color-orange-400: #ffa333;
  --dk-primitive-color-orange-500: #ff8c00;
  --dk-primitive-color-orange-600: #cc7000;
  --dk-primitive-color-orange-700: #995400;
  --dk-primitive-color-orange-800: #663800;
  --dk-primitive-color-orange-900: #331c00;
}

/* ═══════════════════════════════════ drift-kit:layer tokens/brand/color/purple.css ═══════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · brand/color/purple ═══ */
:root {
	--dk-primitive-color-purple-50: #f6f5ff;
	--dk-primitive-color-purple-100: #edebfe;
	--dk-primitive-color-purple-200: #dcd7fe;
	--dk-primitive-color-purple-300: #cabffd;
	--dk-primitive-color-purple-400: #ac94fa;
	--dk-primitive-color-purple-500: #9061f9;
	--dk-primitive-color-purple-600: #7e3af2;
	--dk-primitive-color-purple-700: #6c2bd9;
	--dk-primitive-color-purple-800: #5521b5;
	--dk-primitive-color-purple-900: #4a1d96;
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ══════════════════════════════════════ drift-kit:layer tokens/brand/color/red.css ══════════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · brand/color/red ═══ */
:root {
	--dk-primitive-color-red-50: #fdf2f2;
	--dk-primitive-color-red-100: #fde8e8;
	--dk-primitive-color-red-200: #fbd5d5;
	--dk-primitive-color-red-300: #f8b4b4;
	--dk-primitive-color-red-400: #f98080;
	--dk-primitive-color-red-500: #f05252;
	--dk-primitive-color-red-600: #e02424;
	--dk-primitive-color-red-700: #c81e1e;
	--dk-primitive-color-red-800: #9b1c1c;
	--dk-primitive-color-red-900: #771d1d;
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ════════════════════════════════════ drift-kit:layer tokens/brand/color/stale.css ════════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · brand/color/stale ═══ */
:root {
    --dk-primitive-color-stale-25: #f5f6f6;
    --dk-primitive-color-stale-50: #edeeee;
    --dk-primitive-color-stale-100: #e6e7e7;
    --dk-primitive-color-stale-200: #cfd0d2;
    --dk-primitive-color-stale-300: #aeb0b2;
    --dk-primitive-color-stale-400: #888b8d;
    --dk-primitive-color-stale-500: #6a6d70;
    --dk-primitive-color-stale-600: #5b5d5f;
    --dk-primitive-color-stale-700: #4d4f51;
    --dk-primitive-color-stale-800: #444546;
    --dk-primitive-color-stale-900: #3c3d3d;
    --dk-primitive-color-stale-1000: #252527;
    --dk-primitive-color-stale-1000-0: #25252700;
    --dk-primitive-color-stale-1100: #1f2021;
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ═══════════════════════════════════ drift-kit:layer tokens/brand/color/yellow.css ═══════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · brand/color/yellow ═══ */
:root {
	--dk-primitive-color-yellow-50: #fdfdea;
	--dk-primitive-color-yellow-100: #fdf6b2;
	--dk-primitive-color-yellow-200: #fce96a;
	--dk-primitive-color-yellow-300: #faca15;
	--dk-primitive-color-yellow-400: #e3a008;
	--dk-primitive-color-yellow-500: #c27803;
	--dk-primitive-color-yellow-600: #9f580a;
	--dk-primitive-color-yellow-700: #8e4b10;
	--dk-primitive-color-yellow-800: #723b13;
	--dk-primitive-color-yellow-900: #633112;
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ══════════════════════════════════════════ drift-kit:layer tokens/brand/scale.css ══════════════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · brand/scale ═══ */
:root {
	--dk-primitive-scale-0: 0rem;
	--dk-primitive-scale-0-25: 0.0625rem;
	--dk-primitive-scale-0-5: 0.125rem;
	--dk-primitive-scale-0-75: 0.1875rem;
	--dk-primitive-scale-1: 0.25rem;
	--dk-primitive-scale-1-5: 0.375rem;
	--dk-primitive-scale-2: 0.5rem;
	--dk-primitive-scale-2-5: 0.625rem;
	--dk-primitive-scale-3: 0.75rem;
	--dk-primitive-scale-3-5: 0.875rem;
	--dk-primitive-scale-4: 1rem;
	--dk-primitive-scale-4-5: 1.125rem;
	--dk-primitive-scale-5: 1.25rem;
	--dk-primitive-scale-5-5: 1.375rem;
	--dk-primitive-scale-6: 1.5rem;
	--dk-primitive-scale-7: 1.75rem;
	--dk-primitive-scale-8: 2rem;
	--dk-primitive-scale-9: 2.25rem;
	--dk-primitive-scale-10: 2.5rem;
	--dk-primitive-scale-11: 2.75rem;
	--dk-primitive-scale-12: 3rem;
	--dk-primitive-scale-13: 3.25rem;
	--dk-primitive-scale-14: 3.5rem;
	--dk-primitive-scale-16: 4rem;
	--dk-primitive-scale-18: 4.5rem;
	--dk-primitive-scale-20: 5rem;
	--dk-primitive-scale-22: 5.25rem;
	--dk-primitive-scale-24: 5.5rem;
	--dk-primitive-scale-26: 5.75rem;
	--dk-primitive-scale-28: 6rem;
	--dk-primitive-scale-30: 6.5rem;
	--dk-primitive-scale-32: 7rem;
	--dk-primitive-scale-34: 7.5rem;
	--dk-primitive-scale-36: 8rem;
	--dk-primitive-scale-40: 9rem;
	--dk-primitive-scale-44: 10rem;
	--dk-primitive-scale-48: 11rem;
	--dk-primitive-scale-52: 11.75rem;
	--dk-primitive-scale-56: 12.75rem;
	--dk-primitive-scale-60: 13.75rem;
	--dk-primitive-scale-64: 16rem;
	--dk-primitive-scale-72: 18.25rem;
	--dk-primitive-scale-80: 20.5rem;
	--dk-primitive-scale-96: 22.75rem;
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ════════════════════════════════════ drift-kit:layer tokens/responsive/layout.css ════════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · responsive/layout ═══ */
/* mobile */
@media (max-width: 768px) {
	:root {
		/* Legacy naming - delete once this has been updated on customer portal */
		--dk-responsive-frame-width: 48rem;
		--dk-responsive-max-width: 48rem;

		/* New layout variables naming convention */
		--dk-responsive-layout-frame-width: 48rem;
		--dk-responsive-layout-max-width: 48rem;
	}
}

/* tablet */
@media (min-width: 769px) and (max-width: 1024px) {
	:root {
		/* Legacy naming - delete once this has been updated on customer portal */
		--dk-responsive-frame-width: 64rem;
		--dk-responsive-max-width: 64rem;

		/* New layout variables naming convention */
		--dk-responsive-layout-frame-width: 64rem;
		--dk-responsive-layout-max-width: 64rem;
	}
}

/* desktop */
@media (min-width: 1025px) {
	:root {
		/* Legacy naming - delete once this has been updated on customer portal */
		--dk-responsive-frame-width: 90rem;
		--dk-responsive-max-width: 80rem;

		/* New layout variables naming convention */
		--dk-responsive-layout-frame-width: 90rem;
		--dk-responsive-layout-max-width: 80rem;		
	}
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ═════════════════════════════════ drift-kit:layer tokens/responsive/font/body.css ═════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · responsive/font/body ═══ */
/* mobile */
@media (max-width: 768px) {
	:root {
		--dk-responsive-font-body-lg-text-size: 1.125rem;
		--dk-responsive-font-body-lg-line-height: 1.625rem;
		--dk-responsive-font-body-lg-paragraph-spacing: 1.625rem;
		--dk-responsive-font-body-md-text-size: 0.875rem;
		--dk-responsive-font-body-md-line-height: 1.375rem;
		--dk-responsive-font-body-md-paragraph-spacing: 1.375rem;
		--dk-responsive-font-body-sm-text-size: 0.75rem;
		--dk-responsive-font-body-sm-line-height: 1.125rem;
		--dk-responsive-font-body-sm-paragraph-spacing: 1.125rem;
		--dk-responsive-font-body-xsm-text-size: 0.625rem;
		--dk-responsive-font-body-xsm-line-height: 1rem;
		--dk-responsive-font-body-xsm-paragraph-spacing: 1rem;
	}
}

/* tablet */
@media (min-width: 769px) and (max-width: 1024px) {
	:root {
		--dk-responsive-font-body-lg-text-size: 1.1875rem;
		--dk-responsive-font-body-lg-line-height: 1.6875rem;
		--dk-responsive-font-body-lg-paragraph-spacing: 1.6875rem;
		--dk-responsive-font-body-md-text-size: 0.9375rem;
		--dk-responsive-font-body-md-line-height: 1.4375rem;
		--dk-responsive-font-body-md-paragraph-spacing: 1.4375rem;
		--dk-responsive-font-body-sm-text-size: 0.8125rem;
		--dk-responsive-font-body-sm-line-height: 1.1875rem;
		--dk-responsive-font-body-sm-paragraph-spacing: 1.1875rem;
		--dk-responsive-font-body-xsm-text-size: 0.6875rem;
		--dk-responsive-font-body-xsm-line-height: 1.0625rem;
		--dk-responsive-font-body-xsm-paragraph-spacing: 1.0625rem;
	}
}
/* desktop */
@media (min-width: 1025px) {
	:root {
		--dk-responsive-font-body-lg-text-size: 1.25rem;
		--dk-responsive-font-body-lg-line-height: 1.75rem;
		--dk-responsive-font-body-lg-paragraph-spacing: 1.75rem;
		--dk-responsive-font-body-md-text-size: 1rem;
		--dk-responsive-font-body-md-line-height: 1.5rem;
		--dk-responsive-font-body-md-paragraph-spacing: 1.5rem;
		--dk-responsive-font-body-sm-text-size: 0.875rem;
		--dk-responsive-font-body-sm-line-height: 1.25rem;
		--dk-responsive-font-body-sm-paragraph-spacing: 1.25rem;
		--dk-responsive-font-body-xsm-text-size: 0.75rem;
		--dk-responsive-font-body-xsm-line-height: 1.125rem;
		--dk-responsive-font-body-xsm-paragraph-spacing: 1.125rem;
	}
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ═════════════════════════════ drift-kit:layer tokens/responsive/font/headings.css ═════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · responsive/font/headings ═══ */
/* mobile */
@media (max-width: 768px) {
	:root {
		--dk-responsive-font-headings-h1-text-size: 2.5rem;
		--dk-responsive-font-headings-h1-line-height: 3rem;
		--dk-responsive-font-headings-h1-paragraph-spacing: 3rem;
		--dk-responsive-font-headings-h2-text-size: 1.875rem;
		--dk-responsive-font-headings-h2-line-height: 2.375rem;
		--dk-responsive-font-headings-h2-paragraph-spacing: 2.375rem;
		--dk-responsive-font-headings-h3-text-size: 1.5rem;
		--dk-responsive-font-headings-h3-line-height: 2rem;
		--dk-responsive-font-headings-h3-paragraph-spacing: 2rem;
		--dk-responsive-font-headings-h4-text-size: 1.375rem;
		--dk-responsive-font-headings-h4-line-height: 1.75rem;
		--dk-responsive-font-headings-h4-paragraph-spacing: 1.75rem;
		--dk-responsive-font-headings-h5-text-size: 1.25rem;
		--dk-responsive-font-headings-h5-line-height: 1.5rem;
		--dk-responsive-font-headings-h5-paragraph-spacing: 1.5rem;
		--dk-responsive-font-headings-h6-text-size: 1.125rem;
		--dk-responsive-font-headings-h6-line-height: 1.5rem;
		--dk-responsive-font-headings-h6-paragraph-spacing: 1.5rem;
	}
}

/* tablet */
@media (min-width: 769px) and (max-width: 1024px) {
	:root {
		--dk-responsive-font-headings-h1-text-size: 2.75rem;
		--dk-responsive-font-headings-h1-line-height: 3.25rem;
		--dk-responsive-font-headings-h1-paragraph-spacing: 3.25rem;
		--dk-responsive-font-headings-h2-text-size: 2.125rem;
		--dk-responsive-font-headings-h2-line-height: 2.625rem;
		--dk-responsive-font-headings-h2-paragraph-spacing: 2.625rem;
		--dk-responsive-font-headings-h3-text-size: 1.625rem;
		--dk-responsive-font-headings-h3-line-height: 2.125rem;
		--dk-responsive-font-headings-h3-paragraph-spacing: 2.125rem;
		--dk-responsive-font-headings-h4-text-size: 1.5rem;
		--dk-responsive-font-headings-h4-line-height: 1.875rem;
		--dk-responsive-font-headings-h4-paragraph-spacing: 1.875rem;
		--dk-responsive-font-headings-h5-text-size: 1.375rem;
		--dk-responsive-font-headings-h5-line-height: 1.625rem;
		--dk-responsive-font-headings-h5-paragraph-spacing: 1.625rem;
		--dk-responsive-font-headings-h6-text-size: 1.1875rem;
		--dk-responsive-font-headings-h6-line-height: 1.5rem;
		--dk-responsive-font-headings-h6-paragraph-spacing: 1.5rem;
	}
}
/* desktop */
@media (min-width: 1025px) {
	:root {
		--dk-responsive-font-headings-h1-text-size: 3rem;
		--dk-responsive-font-headings-h1-line-height: 3.5rem;
		--dk-responsive-font-headings-h1-paragraph-spacing: 3.5rem;
		--dk-responsive-font-headings-h2-text-size: 2.375rem;
		--dk-responsive-font-headings-h2-line-height: 2.875rem;
		--dk-responsive-font-headings-h2-paragraph-spacing: 2.875rem;
		--dk-responsive-font-headings-h3-text-size: 1.75rem;
		--dk-responsive-font-headings-h3-line-height: 2.25rem;
		--dk-responsive-font-headings-h3-paragraph-spacing: 2.25rem;
		--dk-responsive-font-headings-h4-text-size: 1.625rem;
		--dk-responsive-font-headings-h4-line-height: 2rem;
		--dk-responsive-font-headings-h4-paragraph-spacing: 2rem;
		--dk-responsive-font-headings-h5-text-size: 1.5rem;
		--dk-responsive-font-headings-h5-line-height: 1.75rem;
		--dk-responsive-font-headings-h5-paragraph-spacing: 1.75rem;
		--dk-responsive-font-headings-h6-text-size: 1.25rem;
		--dk-responsive-font-headings-h6-line-height: 1.5rem;
		--dk-responsive-font-headings-h6-paragraph-spacing: 1.5rem;
	}
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ════════════════════════════════ drift-kit:layer tokens/responsive/font/input.css ════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · responsive/font/input ═══ */
/* mobile */
@media (max-width: 768px) {
	:root {
        --dk-responsive-font-input-lg-text-size: 1.125rem;
        --dk-responsive-font-input-lg-line-height: 1.625rem;
        --dk-responsive-font-input-lg-paragraph-spacing: 1.625rem;
        --dk-responsive-font-input-md-text-size: 1rem;
        --dk-responsive-font-input-md-line-height: 1.375rem;
        --dk-responsive-font-input-md-paragraph-spacing: 1.375rem;
        --dk-responsive-font-input-sm-line-height: 0rem;
        --dk-responsive-font-input-sm-text-size: 1rem;
        --dk-responsive-font-input-sm-paragraph-spacing: 1.25rem;
	}
}

/* tablet */
@media (min-width: 769px) and (max-width: 1024px) {
	:root {
        --dk-responsive-font-input-lg-text-size: 1.1875rem;
        --dk-responsive-font-input-lg-line-height: 1.6875rem;
        --dk-responsive-font-input-lg-paragraph-spacing: 1.6875rem;
        --dk-responsive-font-input-md-text-size: 1.0625rem;
        --dk-responsive-font-input-md-line-height: 1.4375rem;
        --dk-responsive-font-input-md-paragraph-spacing: 1.4375rem;
        --dk-responsive-font-input-sm-text-size: 1rem;
        --dk-responsive-font-input-sm-line-height: 1.3125rem;
        --dk-responsive-font-input-sm-paragraph-spacing: 1.3125rem;
	}
}

/* desktop */
@media (min-width: 1025px) {
	:root {
        --dk-responsive-font-input-lg-text-size: 1.25rem;
        --dk-responsive-font-input-lg-line-height: 1.75rem;
        --dk-responsive-font-input-lg-paragraph-spacing: 1.75rem;
        --dk-responsive-font-input-md-text-size: 1.125rem;
        --dk-responsive-font-input-md-line-height: 1.5rem;
        --dk-responsive-font-input-md-paragraph-spacing: 1.5rem;
        --dk-responsive-font-input-sm-text-size: 1rem;
        --dk-responsive-font-input-sm-line-height: 1.375rem;
        --dk-responsive-font-input-sm-paragraph-spacing: 1.375rem;
	}
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */

/* ── FIX: broken core token (moved here from primitives/transform.css 2026-09-09) (mobile input-sm line-height) ─────────────
   drift-ui.css defines --dk-responsive-font-input-sm-line-height: 0rem in its
   ≤768px block — a token-export bug (tablet is 1.3125rem, desktop 1.375rem;
   the mobile text-size token is a normal 1rem). Anything set in input-sm —
   e.g. the select trigger's value label — collapses to zero height on
   mobile and vanishes. Mirror the tablet value until Drift ships the fix;
   delete this block once drift-ui.css is corrected upstream. */
@media (max-width: 768px) {
  :root { --dk-responsive-font-input-sm-line-height: 1.3125rem; }
}

/* ═════════════════════════════ drift-kit:layer tokens/responsive/font/overline.css ═════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · responsive/font/overline ═══ */
/* mobile */
@media (max-width: 768px) {
	:root {
		--dk-responsive-font-overline-lg-text-size: 0.6875rem;
		--dk-responsive-font-overline-lg-line-height: 0.875rem;
		--dk-responsive-font-overline-lg-paragraph-spacing: 0.875rem;
		--dk-responsive-font-overline-md-text-size: 0.5625rem;
		--dk-responsive-font-overline-md-line-height: 0.75rem;
		--dk-responsive-font-overline-md-paragraph-spacing: 0.75rem;
		--dk-responsive-font-overline-sm-text-size: 0.5rem;
		--dk-responsive-font-overline-sm-line-height: 0.75rem;
		--dk-responsive-font-overline-sm-paragraph-spacing: 0.75rem;
	}
}

/* tablet */
@media (min-width: 769px) and (max-width: 1024px) {
	:root {
		--dk-responsive-font-overline-lg-text-size: 0.75rem;
		--dk-responsive-font-overline-lg-line-height: 1rem;
		--dk-responsive-font-overline-lg-paragraph-spacing: 1rem;
		--dk-responsive-font-overline-md-text-size: 0.625rem;
		--dk-responsive-font-overline-md-line-height: 0.875rem;
		--dk-responsive-font-overline-md-paragraph-spacing: 0.875rem;
		--dk-responsive-font-overline-sm-text-size: 0.5rem;
		--dk-responsive-font-overline-sm-line-height: 0.75rem;
		--dk-responsive-font-overline-sm-paragraph-spacing: 0.75rem;
	}
}
/* desktop */
@media (min-width: 1025px) {
	:root {
		--dk-responsive-font-overline-lg-text-size: 0.75rem;
		--dk-responsive-font-overline-lg-line-height: 1rem;
		--dk-responsive-font-overline-lg-paragraph-spacing: 1rem;
		--dk-responsive-font-overline-md-text-size: 0.625rem;
		--dk-responsive-font-overline-md-line-height: 0.875rem;
		--dk-responsive-font-overline-md-paragraph-spacing: 0.875rem;
		--dk-responsive-font-overline-sm-text-size: 0.5rem;
		--dk-responsive-font-overline-sm-line-height: 0.75rem;
		--dk-responsive-font-overline-sm-paragraph-spacing: 0.75rem;
	}
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ═══════════════════════════════ drift-kit:layer tokens/responsive/icon/stroke.css ═══════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · responsive/icon/stroke ═══ */
/* mobile */
@media (max-width: 768px) {
	:root {
		--dk-responsive-icon-stroke-1: 0.0625rem;
		--dk-responsive-icon-stroke-1-25: 0.0625rem;
		--dk-responsive-icon-stroke-1-5: 0.0781rem;
		--dk-responsive-icon-stroke-1-75: 0.0781rem;
		--dk-responsive-icon-stroke-2: 0.0938rem;
		--dk-responsive-icon-stroke-2-25: 0.0938rem;
		--dk-responsive-icon-stroke-2-5: 0.1094rem;
		--dk-responsive-icon-stroke-2-75: 0.125rem;
		--dk-responsive-icon-stroke-3: 0.1406rem;
		--dk-responsive-icon-stroke-3-25: 0.1563rem;
		--dk-responsive-icon-stroke-3-5: 0.1719rem;
		--dk-responsive-icon-stroke-4: 0.1875rem;
	}
}

/* tablet */
@media (min-width: 769px) and (max-width: 1024px) {
	:root {
		--dk-responsive-icon-stroke-1: 0.0625rem;
		--dk-responsive-icon-stroke-1-25: 0.0781rem;
		--dk-responsive-icon-stroke-1-5: 0.0938rem;
		--dk-responsive-icon-stroke-1-75: 0.0938rem;
		--dk-responsive-icon-stroke-2: 0.1094rem;
		--dk-responsive-icon-stroke-2-25: 0.1094rem;
		--dk-responsive-icon-stroke-2-5: 0.125rem;
		--dk-responsive-icon-stroke-2-75: 0.1406rem;
		--dk-responsive-icon-stroke-3: 0.1563rem;
		--dk-responsive-icon-stroke-3-25: 0.1719rem;
		--dk-responsive-icon-stroke-3-5: 0.1875rem;
		--dk-responsive-icon-stroke-4: 0.2031rem;
	}
}
/* desktop */
@media (min-width: 1025px) {
	:root {
		--dk-responsive-icon-stroke-1: 0.0625rem;
		--dk-responsive-icon-stroke-1-25: 0.0781rem;
		--dk-responsive-icon-stroke-1-5: 0.0938rem;
		--dk-responsive-icon-stroke-1-75: 0.0938rem;
		--dk-responsive-icon-stroke-2: 0.1094rem;
		--dk-responsive-icon-stroke-2-25: 0.1094rem;
		--dk-responsive-icon-stroke-2-5: 0.125rem;
		--dk-responsive-icon-stroke-2-75: 0.1406rem;
		--dk-responsive-icon-stroke-3: 0.1563rem;
		--dk-responsive-icon-stroke-3-25: 0.1719rem;
		--dk-responsive-icon-stroke-3-5: 0.1875rem;
		--dk-responsive-icon-stroke-4: 0.2188rem;
	}
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ═══════════════════════════════════ drift-kit:layer tokens/responsive/spacing.css ═══════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · responsive/spacing ═══ */
/* mobile */
@media (max-width: 768px) {
	:root {
		--dk-responsive-spacing-0-25: var(--dk-primitive-scale-0-25);
		--dk-responsive-spacing-0-5: var(--dk-primitive-scale-0-25);
		--dk-responsive-spacing-1: var(--dk-primitive-scale-0-5);
		--dk-responsive-spacing-1-5: var(--dk-primitive-scale-1);
		--dk-responsive-spacing-2-5: var(--dk-primitive-scale-1-5);
		--dk-responsive-spacing-2: var(--dk-primitive-scale-1-5);
		--dk-responsive-spacing-3: var(--dk-primitive-scale-2);
		--dk-responsive-spacing-3-5: var(--dk-primitive-scale-2-5);
		--dk-responsive-spacing-4: var(--dk-primitive-scale-3);
		--dk-responsive-spacing-4-5: var(--dk-primitive-scale-3-5);
		--dk-responsive-spacing-5: var(--dk-primitive-scale-4);
		--dk-responsive-spacing-5-5: var(--dk-primitive-scale-4-5);
		--dk-responsive-spacing-6: var(--dk-primitive-scale-5);
		--dk-responsive-spacing-7: var(--dk-primitive-scale-5-5);
		--dk-responsive-spacing-8: var(--dk-primitive-scale-6);
		--dk-responsive-spacing-9: var(--dk-primitive-scale-7);
		--dk-responsive-spacing-10: var(--dk-primitive-scale-8);
		--dk-responsive-spacing-11: var(--dk-primitive-scale-9);
		--dk-responsive-spacing-12: var(--dk-primitive-scale-10);
		--dk-responsive-spacing-14: var(--dk-primitive-scale-12);
		--dk-responsive-spacing-16: var(--dk-primitive-scale-13);
		--dk-responsive-spacing-18: var(--dk-primitive-scale-14);
		--dk-responsive-spacing-20: var(--dk-primitive-scale-16);
		--dk-responsive-spacing-22: var(--dk-primitive-scale-18);
		--dk-responsive-spacing-24: var(--dk-primitive-scale-20);
		--dk-responsive-spacing-26: var(--dk-primitive-scale-22);
		--dk-responsive-spacing-28: var(--dk-primitive-scale-24);
		--dk-responsive-spacing-30: var(--dk-primitive-scale-26);
		--dk-responsive-spacing-32: var(--dk-primitive-scale-28);
		--dk-responsive-spacing-34: var(--dk-primitive-scale-30);
		--dk-responsive-spacing-40: var(--dk-primitive-scale-32);
		--dk-responsive-spacing-48: var(--dk-primitive-scale-40);
		--dk-responsive-spacing-56: var(--dk-primitive-scale-48);
		--dk-responsive-spacing-64: var(--dk-primitive-scale-56);
		--dk-responsive-spacing-72: var(--dk-primitive-scale-60);
	}
}

/* tablet */
@media (min-width: 769px) and (max-width: 1024px) {
	:root {
		--dk-responsive-spacing-0-25: var(--dk-primitive-scale-0-25);
		--dk-responsive-spacing-0-5: var(--dk-primitive-scale-0-25);
		--dk-responsive-spacing-1: var(--dk-primitive-scale-0-5);
		--dk-responsive-spacing-1-5: var(--dk-primitive-scale-1);
		--dk-responsive-spacing-2: var(--dk-primitive-scale-1-5);
		--dk-responsive-spacing-2-5: var(--dk-primitive-scale-2);
		--dk-responsive-spacing-3: var(--dk-primitive-scale-2-5);
		--dk-responsive-spacing-3-5: var(--dk-primitive-scale-3);
		--dk-responsive-spacing-4: var(--dk-primitive-scale-3-5);
		--dk-responsive-spacing-4-5: var(--dk-primitive-scale-4);
		--dk-responsive-spacing-5: var(--dk-primitive-scale-4-5);
		--dk-responsive-spacing-5-5: var(--dk-primitive-scale-5);
		--dk-responsive-spacing-6: var(--dk-primitive-scale-5-5);
		--dk-responsive-spacing-7: var(--dk-primitive-scale-6);
		--dk-responsive-spacing-8: var(--dk-primitive-scale-7);
		--dk-responsive-spacing-9: var(--dk-primitive-scale-8);
		--dk-responsive-spacing-10: var(--dk-primitive-scale-9);
		--dk-responsive-spacing-11: var(--dk-primitive-scale-10);
		--dk-responsive-spacing-12: var(--dk-primitive-scale-11);
		--dk-responsive-spacing-14: var(--dk-primitive-scale-13);
		--dk-responsive-spacing-16: var(--dk-primitive-scale-14);
		--dk-responsive-spacing-18: var(--dk-primitive-scale-16);
		--dk-responsive-spacing-20: var(--dk-primitive-scale-18);
		--dk-responsive-spacing-22: var(--dk-primitive-scale-20);
		--dk-responsive-spacing-24: var(--dk-primitive-scale-22);
		--dk-responsive-spacing-26: var(--dk-primitive-scale-24);
		--dk-responsive-spacing-28: var(--dk-primitive-scale-26);
		--dk-responsive-spacing-30: var(--dk-primitive-scale-28);
		--dk-responsive-spacing-32: var(--dk-primitive-scale-30);
		--dk-responsive-spacing-34: var(--dk-primitive-scale-32);
		--dk-responsive-spacing-40: var(--dk-primitive-scale-36);
		--dk-responsive-spacing-48: var(--dk-primitive-scale-44);
		--dk-responsive-spacing-56: var(--dk-primitive-scale-52);
		--dk-responsive-spacing-64: var(--dk-primitive-scale-60);
		--dk-responsive-spacing-72: var(--dk-primitive-scale-64);
	}
}

/* desktop */
@media (min-width: 1025px) {
	:root {
		--dk-responsive-spacing-0-25: var(--dk-primitive-scale-0-25);
		--dk-responsive-spacing-0-5: var(--dk-primitive-scale-0-5);
		--dk-responsive-spacing-1: var(--dk-primitive-scale-1);
		--dk-responsive-spacing-1-5: var(--dk-primitive-scale-1-5);
		--dk-responsive-spacing-2: var(--dk-primitive-scale-2);
		--dk-responsive-spacing-2-5: var(--dk-primitive-scale-2-5);
		--dk-responsive-spacing-3: var(--dk-primitive-scale-3);
		--dk-responsive-spacing-3-5: var(--dk-primitive-scale-3-5);
		--dk-responsive-spacing-4: var(--dk-primitive-scale-4);
		--dk-responsive-spacing-4-5: var(--dk-primitive-scale-4-5);
		--dk-responsive-spacing-5: var(--dk-primitive-scale-5);
		--dk-responsive-spacing-5-5: var(--dk-primitive-scale-5-5);
		--dk-responsive-spacing-6: var(--dk-primitive-scale-6);
		--dk-responsive-spacing-7: var(--dk-primitive-scale-7);
		--dk-responsive-spacing-8: var(--dk-primitive-scale-8);
		--dk-responsive-spacing-9: var(--dk-primitive-scale-9);
		--dk-responsive-spacing-10: var(--dk-primitive-scale-10);
		--dk-responsive-spacing-11: var(--dk-primitive-scale-11);
		--dk-responsive-spacing-12: var(--dk-primitive-scale-12);
		--dk-responsive-spacing-14: var(--dk-primitive-scale-14);
		--dk-responsive-spacing-16: var(--dk-primitive-scale-16);
		--dk-responsive-spacing-18: var(--dk-primitive-scale-18);
		--dk-responsive-spacing-20: var(--dk-primitive-scale-20);
		--dk-responsive-spacing-22: var(--dk-primitive-scale-22);
		--dk-responsive-spacing-24: var(--dk-primitive-scale-24);
		--dk-responsive-spacing-26: var(--dk-primitive-scale-26);
		--dk-responsive-spacing-28: var(--dk-primitive-scale-28);
		--dk-responsive-spacing-30: var(--dk-primitive-scale-30);
		--dk-responsive-spacing-32: var(--dk-primitive-scale-32);
		--dk-responsive-spacing-34: var(--dk-primitive-scale-34);
		--dk-responsive-spacing-40: var(--dk-primitive-scale-40);
		--dk-responsive-spacing-48: var(--dk-primitive-scale-48);
		--dk-responsive-spacing-56: var(--dk-primitive-scale-56);
		--dk-responsive-spacing-64: var(--dk-primitive-scale-64);
		--dk-responsive-spacing-72: var(--dk-primitive-scale-72);
		--dk-responsive-spacing-1: var(--dk-primitive-scale-1);
		--dk-responsive-spacing-1-5: var(--dk-primitive-scale-1-5);
		--dk-responsive-spacing-2: var(--dk-primitive-scale-2);
		--dk-responsive-spacing-2-5: var(--dk-primitive-scale-2-5);
		--dk-responsive-spacing-3: var(--dk-primitive-scale-3);
		--dk-responsive-spacing-3-5: var(--dk-primitive-scale-3-5);
		--dk-responsive-spacing-4: var(--dk-primitive-scale-4);
		--dk-responsive-spacing-4-5: var(--dk-primitive-scale-4-5);
		--dk-responsive-spacing-5: var(--dk-primitive-scale-5);
		--dk-responsive-spacing-5-5: var(--dk-primitive-scale-5-5);
		--dk-responsive-spacing-6: var(--dk-primitive-scale-6);
		--dk-responsive-spacing-7: var(--dk-primitive-scale-7);
		--dk-responsive-spacing-8: var(--dk-primitive-scale-8);
		--dk-responsive-spacing-9: var(--dk-primitive-scale-9);
		--dk-responsive-spacing-10: var(--dk-primitive-scale-10);
		--dk-responsive-spacing-11: var(--dk-primitive-scale-11);
		--dk-responsive-spacing-12: var(--dk-primitive-scale-12);
		--dk-responsive-spacing-16: var(--dk-primitive-scale-16);
		--dk-responsive-spacing-20: var(--dk-primitive-scale-20);
		--dk-responsive-spacing-24: var(--dk-primitive-scale-24);
		--dk-responsive-spacing-28: var(--dk-primitive-scale-28);
		--dk-responsive-spacing-32: var(--dk-primitive-scale-32);
		--dk-responsive-spacing-40: var(--dk-primitive-scale-40);
		--dk-responsive-spacing-48: var(--dk-primitive-scale-48);
		--dk-responsive-spacing-56: var(--dk-primitive-scale-56);
		--dk-responsive-spacing-64: var(--dk-primitive-scale-64);
		--dk-responsive-spacing-72: var(--dk-primitive-scale-72);
	}
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ═════════════════════════════ drift-kit:layer tokens/responsive/border/radius.css ═════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · responsive/border/radius ═══ */
/* mobile */
@media (max-width: 768px) {
	:root {
        --dk-responsive-border-radius-border-radius-0: 0rem;
        --dk-responsive-border-radius-border-radius-25: 0.0625rem;
        --dk-responsive-border-radius-border-radius-50: 0.0625rem;
        --dk-responsive-border-radius-border-radius-75: 0.125rem;
        --dk-responsive-border-radius-border-radius-100: 0.1875rem;
        --dk-responsive-border-radius-border-radius-125: 0.25rem;
        --dk-responsive-border-radius-border-radius-150: 0.3125rem;
        --dk-responsive-border-radius-border-radius-200: 0.375rem;
        --dk-responsive-border-radius-border-radius-300: 0.5rem;
        --dk-responsive-border-radius-border-radius-400: 0.75rem;
        --dk-responsive-border-radius-border-radius-500: 1rem;
        --dk-responsive-border-radius-border-radius-600: 1.25rem;
        --dk-responsive-border-radius-border-radius-700: 1.375rem;
        --dk-responsive-border-radius-border-radius-800: 1.5rem;
        --dk-responsive-border-radius-border-radius-round: 62.4375rem;
	}
}

/* tablet */
@media (min-width: 769px) and (max-width: 1024px) {
	:root {
        --dk-responsive-border-radius-border-radius-0: 0rem;
        --dk-responsive-border-radius-border-radius-25: 0.0625rem;
        --dk-responsive-border-radius-border-radius-50: 0.125rem;
        --dk-responsive-border-radius-border-radius-75: 0.1875rem;
        --dk-responsive-border-radius-border-radius-100: 0.25rem;
        --dk-responsive-border-radius-border-radius-125: 0.3125rem;
        --dk-responsive-border-radius-border-radius-150: 0.375rem;
        --dk-responsive-border-radius-border-radius-200: 0.4375rem;
        --dk-responsive-border-radius-border-radius-300: 0.625rem;
        --dk-responsive-border-radius-border-radius-400: 0.875rem;
        --dk-responsive-border-radius-border-radius-500: 1.125rem;
        --dk-responsive-border-radius-border-radius-600: 1.375rem;
        --dk-responsive-border-radius-border-radius-700: 1.5rem;
        --dk-responsive-border-radius-border-radius-800: 1.75rem;
        --dk-responsive-border-radius-border-radius-round: 62.4375rem;        
	}
}
/* desktop */
@media (min-width: 1025px) {
	:root {
        --dk-responsive-border-radius-border-radius-0: 0rem;
        --dk-responsive-border-radius-border-radius-25: 0.0625rem;
        --dk-responsive-border-radius-border-radius-50: 0.125rem;
        --dk-responsive-border-radius-border-radius-75: 0.1875rem;
        --dk-responsive-border-radius-border-radius-100: 0.25rem;
        --dk-responsive-border-radius-border-radius-125: 0.3125rem;
        --dk-responsive-border-radius-border-radius-150: 0.375rem;
        --dk-responsive-border-radius-border-radius-200: 0.5rem;
        --dk-responsive-border-radius-border-radius-300: 0.75rem;
        --dk-responsive-border-radius-border-radius-400: 1rem;
        --dk-responsive-border-radius-border-radius-500: 1.25rem;
        --dk-responsive-border-radius-border-radius-600: 1.5rem;
        --dk-responsive-border-radius-border-radius-700: 1.75rem;
        --dk-responsive-border-radius-border-radius-800: 2rem;
        --dk-responsive-border-radius-border-radius-round: 62.4375rem;        
	}
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ══════════════════════════════════════ drift-kit:layer tokens/dynamic/spacing.css ══════════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · dynamic/spacing ═══ */
/*
 * Dynamic Spacing System
 * Use data-density attribute to control spacing density across your application
 *
 * Usage:
 *   <div data-density="tight">    - Tighter spacing
 *   <div data-density="normal">     - Default spacing (also default without attribute)
 *   <div data-density="spacious"> - More spacious
 */

/* Default spacing (Normal) */
:root,
[data-density="normal"] {
	--dk-dynamic-spacing-0-25: var(--dk-responsive-spacing-0-25);
	--dk-dynamic-spacing-0-5: var(--dk-responsive-spacing-0-5);
	--dk-dynamic-spacing-1: var(--dk-responsive-spacing-1);
	--dk-dynamic-spacing-1-5: var(--dk-responsive-spacing-1-5);
	--dk-dynamic-spacing-2: var(--dk-responsive-spacing-2);
	--dk-dynamic-spacing-2-5: var(--dk-responsive-spacing-2-5);
	--dk-dynamic-spacing-3: var(--dk-responsive-spacing-3);
	--dk-dynamic-spacing-3-5: var(--dk-responsive-spacing-3-5);
	--dk-dynamic-spacing-4: var(--dk-responsive-spacing-4);
	--dk-dynamic-spacing-4-5: var(--dk-responsive-spacing-4-5);
	--dk-dynamic-spacing-5: var(--dk-responsive-spacing-5);
	--dk-dynamic-spacing-5-5: var(--dk-responsive-spacing-5-5);
	--dk-dynamic-spacing-6: var(--dk-responsive-spacing-6);
	--dk-dynamic-spacing-7: var(--dk-responsive-spacing-7);
	--dk-dynamic-spacing-8: var(--dk-responsive-spacing-8);
	--dk-dynamic-spacing-9: var(--dk-responsive-spacing-9);
	--dk-dynamic-spacing-10: var(--dk-responsive-spacing-10);
	--dk-dynamic-spacing-11: var(--dk-responsive-spacing-11);
	--dk-dynamic-spacing-12: var(--dk-responsive-spacing-12);
	--dk-dynamic-spacing-14: var(--dk-responsive-spacing-14);
	--dk-dynamic-spacing-16: var(--dk-responsive-spacing-16);
	--dk-dynamic-spacing-18: var(--dk-responsive-spacing-18);
	--dk-dynamic-spacing-20: var(--dk-responsive-spacing-20);
	--dk-dynamic-spacing-22: var(--dk-responsive-spacing-22);
	--dk-dynamic-spacing-24: var(--dk-responsive-spacing-24);
	--dk-dynamic-spacing-26: var(--dk-responsive-spacing-26);
	--dk-dynamic-spacing-28: var(--dk-responsive-spacing-28);
	--dk-dynamic-spacing-30: var(--dk-responsive-spacing-30);
	--dk-dynamic-spacing-32: var(--dk-responsive-spacing-32);
	--dk-dynamic-spacing-40: var(--dk-responsive-spacing-40);
	--dk-dynamic-spacing-48: var(--dk-responsive-spacing-48);
	--dk-dynamic-spacing-56: var(--dk-responsive-spacing-56);
	--dk-dynamic-spacing-64: var(--dk-responsive-spacing-64);
}

/* Tight spacing - ~one step down from normal */
[data-density="tight"] {
	--dk-dynamic-spacing-0-25: var(--dk-responsive-spacing-0-25);
	--dk-dynamic-spacing-0-5: var(--dk-responsive-spacing-0-25);
	--dk-dynamic-spacing-1: var(--dk-responsive-spacing-0-5);
	--dk-dynamic-spacing-1-5: var(--dk-responsive-spacing-1);
	--dk-dynamic-spacing-2: var(--dk-responsive-spacing-1-5);
	--dk-dynamic-spacing-2-5: var(--dk-responsive-spacing-2);
	--dk-dynamic-spacing-3: var(--dk-responsive-spacing-2-5);
	--dk-dynamic-spacing-3-5: var(--dk-responsive-spacing-3);
	--dk-dynamic-spacing-4: var(--dk-responsive-spacing-3-5);
	--dk-dynamic-spacing-4-5: var(--dk-responsive-spacing-4);
	--dk-dynamic-spacing-5: var(--dk-responsive-spacing-4-5);
	--dk-dynamic-spacing-5-5: var(--dk-responsive-spacing-5);
	--dk-dynamic-spacing-6: var(--dk-responsive-spacing-5-5);
	--dk-dynamic-spacing-7: var(--dk-responsive-spacing-6);
	--dk-dynamic-spacing-8: var(--dk-responsive-spacing-7);
	--dk-dynamic-spacing-9: var(--dk-responsive-spacing-8);
	--dk-dynamic-spacing-10: var(--dk-responsive-spacing-9);
	--dk-dynamic-spacing-11: var(--dk-responsive-spacing-10);
	--dk-dynamic-spacing-12: var(--dk-responsive-spacing-11);
	--dk-dynamic-spacing-14: var(--dk-responsive-spacing-12);
	--dk-dynamic-spacing-16: var(--dk-responsive-spacing-14);
	--dk-dynamic-spacing-18: var(--dk-responsive-spacing-16);
	--dk-dynamic-spacing-20: var(--dk-responsive-spacing-18);
	--dk-dynamic-spacing-22: var(--dk-responsive-spacing-20);
	--dk-dynamic-spacing-24: var(--dk-responsive-spacing-22);
	--dk-dynamic-spacing-26: var(--dk-responsive-spacing-24);
	--dk-dynamic-spacing-28: var(--dk-responsive-spacing-26);
	--dk-dynamic-spacing-30: var(--dk-responsive-spacing-28);
	--dk-dynamic-spacing-32: var(--dk-responsive-spacing-30);
	--dk-dynamic-spacing-40: var(--dk-responsive-spacing-32);
	--dk-dynamic-spacing-48: var(--dk-responsive-spacing-40);
	--dk-dynamic-spacing-56: var(--dk-responsive-spacing-48);
	--dk-dynamic-spacing-64: var(--dk-responsive-spacing-56);
}

/* Spacious - ~one step up from normal */
[data-density="spacious"] {
	--dk-dynamic-spacing-0-25: var(--dk-responsive-spacing-0-5);
	--dk-dynamic-spacing-0-5: var(--dk-responsive-spacing-1);
	--dk-dynamic-spacing-1: var(--dk-responsive-spacing-1-5);
	--dk-dynamic-spacing-1-5: var(--dk-responsive-spacing-2);
	--dk-dynamic-spacing-2: var(--dk-responsive-spacing-2-5);
	--dk-dynamic-spacing-2-5: var(--dk-responsive-spacing-3);
	--dk-dynamic-spacing-3: var(--dk-responsive-spacing-3-5);
	--dk-dynamic-spacing-3-5: var(--dk-responsive-spacing-4);
	--dk-dynamic-spacing-4: var(--dk-responsive-spacing-4-5);
	--dk-dynamic-spacing-4-5: var(--dk-responsive-spacing-5);
	--dk-dynamic-spacing-5: var(--dk-responsive-spacing-5-5);
	--dk-dynamic-spacing-5-5: var(--dk-responsive-spacing-6);
	--dk-dynamic-spacing-6: var(--dk-responsive-spacing-7);
	--dk-dynamic-spacing-7: var(--dk-responsive-spacing-8);
	--dk-dynamic-spacing-8: var(--dk-responsive-spacing-9);
	--dk-dynamic-spacing-9: var(--dk-responsive-spacing-10);
	--dk-dynamic-spacing-10: var(--dk-responsive-spacing-11);
	--dk-dynamic-spacing-11: var(--dk-responsive-spacing-12);
	--dk-dynamic-spacing-12: var(--dk-responsive-spacing-14);
	--dk-dynamic-spacing-14: var(--dk-responsive-spacing-16);
	--dk-dynamic-spacing-16: var(--dk-responsive-spacing-18);
	--dk-dynamic-spacing-18: var(--dk-responsive-spacing-20);
	--dk-dynamic-spacing-20: var(--dk-responsive-spacing-22);
	--dk-dynamic-spacing-22: var(--dk-responsive-spacing-24);
	--dk-dynamic-spacing-24: var(--dk-responsive-spacing-28);
	--dk-dynamic-spacing-26: var(--dk-responsive-spacing-30);
	--dk-dynamic-spacing-28: var(--dk-responsive-spacing-32);
	--dk-dynamic-spacing-30: var(--dk-responsive-spacing-34);
	--dk-dynamic-spacing-32: var(--dk-responsive-spacing-40);
	--dk-dynamic-spacing-40: var(--dk-responsive-spacing-48);
	--dk-dynamic-spacing-48: var(--dk-responsive-spacing-56);
	--dk-dynamic-spacing-56: var(--dk-responsive-spacing-64);
	--dk-dynamic-spacing-64: var(--dk-responsive-spacing-72);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */

/* Compact and airy (2 Nov): one rung past tight and spacious on every step,
   clamped to the responsive scale (never under 0-25, never past 72). The
   five settings, least to most: compact, tight, normal, spacious, airy. */
[data-density="compact"] {
	--dk-dynamic-spacing-0-25: var(--dk-responsive-spacing-0-25);
	--dk-dynamic-spacing-0-5: var(--dk-responsive-spacing-0-25);
	--dk-dynamic-spacing-1: var(--dk-responsive-spacing-0-25);
	--dk-dynamic-spacing-1-5: var(--dk-responsive-spacing-0-5);
	--dk-dynamic-spacing-2: var(--dk-responsive-spacing-1);
	--dk-dynamic-spacing-2-5: var(--dk-responsive-spacing-1-5);
	--dk-dynamic-spacing-3: var(--dk-responsive-spacing-2);
	--dk-dynamic-spacing-3-5: var(--dk-responsive-spacing-2-5);
	--dk-dynamic-spacing-4: var(--dk-responsive-spacing-3);
	--dk-dynamic-spacing-4-5: var(--dk-responsive-spacing-3-5);
	--dk-dynamic-spacing-5: var(--dk-responsive-spacing-4);
	--dk-dynamic-spacing-5-5: var(--dk-responsive-spacing-4-5);
	--dk-dynamic-spacing-6: var(--dk-responsive-spacing-5);
	--dk-dynamic-spacing-7: var(--dk-responsive-spacing-5-5);
	--dk-dynamic-spacing-8: var(--dk-responsive-spacing-6);
	--dk-dynamic-spacing-9: var(--dk-responsive-spacing-7);
	--dk-dynamic-spacing-10: var(--dk-responsive-spacing-8);
	--dk-dynamic-spacing-11: var(--dk-responsive-spacing-9);
	--dk-dynamic-spacing-12: var(--dk-responsive-spacing-10);
	--dk-dynamic-spacing-14: var(--dk-responsive-spacing-11);
	--dk-dynamic-spacing-16: var(--dk-responsive-spacing-12);
	--dk-dynamic-spacing-18: var(--dk-responsive-spacing-14);
	--dk-dynamic-spacing-20: var(--dk-responsive-spacing-16);
	--dk-dynamic-spacing-22: var(--dk-responsive-spacing-18);
	--dk-dynamic-spacing-24: var(--dk-responsive-spacing-20);
	--dk-dynamic-spacing-26: var(--dk-responsive-spacing-22);
	--dk-dynamic-spacing-28: var(--dk-responsive-spacing-24);
	--dk-dynamic-spacing-30: var(--dk-responsive-spacing-26);
	--dk-dynamic-spacing-32: var(--dk-responsive-spacing-28);
	--dk-dynamic-spacing-40: var(--dk-responsive-spacing-30);
	--dk-dynamic-spacing-48: var(--dk-responsive-spacing-34);
	--dk-dynamic-spacing-56: var(--dk-responsive-spacing-40);
	--dk-dynamic-spacing-64: var(--dk-responsive-spacing-48);
}

[data-density="airy"] {
	--dk-dynamic-spacing-0-25: var(--dk-responsive-spacing-1);
	--dk-dynamic-spacing-0-5: var(--dk-responsive-spacing-1-5);
	--dk-dynamic-spacing-1: var(--dk-responsive-spacing-2);
	--dk-dynamic-spacing-1-5: var(--dk-responsive-spacing-2-5);
	--dk-dynamic-spacing-2: var(--dk-responsive-spacing-3);
	--dk-dynamic-spacing-2-5: var(--dk-responsive-spacing-3-5);
	--dk-dynamic-spacing-3: var(--dk-responsive-spacing-4);
	--dk-dynamic-spacing-3-5: var(--dk-responsive-spacing-4-5);
	--dk-dynamic-spacing-4: var(--dk-responsive-spacing-5);
	--dk-dynamic-spacing-4-5: var(--dk-responsive-spacing-5-5);
	--dk-dynamic-spacing-5: var(--dk-responsive-spacing-6);
	--dk-dynamic-spacing-5-5: var(--dk-responsive-spacing-7);
	--dk-dynamic-spacing-6: var(--dk-responsive-spacing-8);
	--dk-dynamic-spacing-7: var(--dk-responsive-spacing-9);
	--dk-dynamic-spacing-8: var(--dk-responsive-spacing-10);
	--dk-dynamic-spacing-9: var(--dk-responsive-spacing-11);
	--dk-dynamic-spacing-10: var(--dk-responsive-spacing-12);
	--dk-dynamic-spacing-11: var(--dk-responsive-spacing-14);
	--dk-dynamic-spacing-12: var(--dk-responsive-spacing-16);
	--dk-dynamic-spacing-14: var(--dk-responsive-spacing-18);
	--dk-dynamic-spacing-16: var(--dk-responsive-spacing-20);
	--dk-dynamic-spacing-18: var(--dk-responsive-spacing-22);
	--dk-dynamic-spacing-20: var(--dk-responsive-spacing-24);
	--dk-dynamic-spacing-22: var(--dk-responsive-spacing-26);
	--dk-dynamic-spacing-24: var(--dk-responsive-spacing-30);
	--dk-dynamic-spacing-26: var(--dk-responsive-spacing-32);
	--dk-dynamic-spacing-28: var(--dk-responsive-spacing-34);
	--dk-dynamic-spacing-30: var(--dk-responsive-spacing-40);
	--dk-dynamic-spacing-32: var(--dk-responsive-spacing-48);
	--dk-dynamic-spacing-40: var(--dk-responsive-spacing-56);
	--dk-dynamic-spacing-48: var(--dk-responsive-spacing-64);
	--dk-dynamic-spacing-56: var(--dk-responsive-spacing-72);
	--dk-dynamic-spacing-64: var(--dk-responsive-spacing-72);
}

/* ════════════════════════════════ drift-kit:layer tokens/dynamic/border/radius.css ════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · dynamic/border/radius ═══ */
/* radius */
:root,
[data-border-radius="normal"] {
	--dk-dynamic-border-radius-0: var(--dk-responsive-border-radius-border-radius-0);
	--dk-dynamic-border-radius-25: var(--dk-responsive-border-radius-border-radius-25);
	--dk-dynamic-border-radius-50: var(--dk-responsive-border-radius-border-radius-50);
	--dk-dynamic-border-radius-75: var(--dk-responsive-border-radius-border-radius-75);
	--dk-dynamic-border-radius-100: var(--dk-responsive-border-radius-border-radius-100);
	--dk-dynamic-border-radius-125: var(--dk-responsive-border-radius-border-radius-125);
	--dk-dynamic-border-radius-150: var(--dk-responsive-border-radius-border-radius-150);
	--dk-dynamic-border-radius-200: var(--dk-responsive-border-radius-border-radius-200);
	--dk-dynamic-border-radius-300: var(--dk-responsive-border-radius-border-radius-300);
	--dk-dynamic-border-radius-400: var(--dk-responsive-border-radius-border-radius-400);
	--dk-dynamic-border-radius-500: var(--dk-responsive-border-radius-border-radius-500);
	--dk-dynamic-border-radius-600: var(--dk-responsive-border-radius-border-radius-600);
	--dk-dynamic-border-radius-round: var(--dk-responsive-border-radius-border-radius-round);
}

[data-border-radius="sharp"] {
	--dk-dynamic-border-radius-0: var(--dk-responsive-border-radius-border-radius-0);
	--dk-dynamic-border-radius-100: var(--dk-responsive-border-radius-border-radius-0);
	--dk-dynamic-border-radius-125: var(--dk-responsive-border-radius-border-radius-0);
	--dk-dynamic-border-radius-150: var(--dk-responsive-border-radius-border-radius-0);
	--dk-dynamic-border-radius-200: var(--dk-responsive-border-radius-border-radius-0);
	--dk-dynamic-border-radius-25: var(--dk-responsive-border-radius-border-radius-0);
	--dk-dynamic-border-radius-300: var(--dk-responsive-border-radius-border-radius-0);
	--dk-dynamic-border-radius-400: var(--dk-responsive-border-radius-border-radius-0);
	--dk-dynamic-border-radius-50: var(--dk-responsive-border-radius-border-radius-0);
	--dk-dynamic-border-radius-500: var(--dk-responsive-border-radius-border-radius-0);
	--dk-dynamic-border-radius-600: var(--dk-responsive-border-radius-border-radius-0);
	--dk-dynamic-border-radius-75: var(--dk-responsive-border-radius-border-radius-0);
	--dk-dynamic-border-radius-round: var(--dk-responsive-border-radius-border-radius-round);
}

[data-border-radius="bubbly"] {
	--dk-dynamic-border-radius-0: var(--dk-responsive-border-radius-border-radius-0);
	--dk-dynamic-border-radius-25: var(--dk-responsive-border-radius-border-radius-50);
	--dk-dynamic-border-radius-50: var(--dk-responsive-border-radius-border-radius-75);
	--dk-dynamic-border-radius-75: var(--dk-responsive-border-radius-border-radius-100);
	--dk-dynamic-border-radius-100: var(--dk-responsive-border-radius-border-radius-125);
	--dk-dynamic-border-radius-125: var(--dk-responsive-border-radius-border-radius-150);
	--dk-dynamic-border-radius-150: var(--dk-responsive-border-radius-border-radius-200);
	--dk-dynamic-border-radius-200: var(--dk-responsive-border-radius-border-radius-300);
	--dk-dynamic-border-radius-300: var(--dk-responsive-border-radius-border-radius-400);
	--dk-dynamic-border-radius-400: var(--dk-responsive-border-radius-border-radius-500);
	--dk-dynamic-border-radius-500: var(--dk-responsive-border-radius-border-radius-600);
	--dk-dynamic-border-radius-600: var(--dk-responsive-border-radius-border-radius-700);
	--dk-dynamic-border-radius-round: var(--dk-responsive-border-radius-border-radius-round);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */

/* Plush (2 Nov): one step rounder than bubbly on every rung, the way bubbly
   is one step rounder than normal. */
[data-border-radius="plush"] {
	--dk-dynamic-border-radius-0: var(--dk-responsive-border-radius-border-radius-0);
	--dk-dynamic-border-radius-25: var(--dk-responsive-border-radius-border-radius-75);
	--dk-dynamic-border-radius-50: var(--dk-responsive-border-radius-border-radius-100);
	--dk-dynamic-border-radius-75: var(--dk-responsive-border-radius-border-radius-125);
	--dk-dynamic-border-radius-100: var(--dk-responsive-border-radius-border-radius-150);
	--dk-dynamic-border-radius-125: var(--dk-responsive-border-radius-border-radius-200);
	--dk-dynamic-border-radius-150: var(--dk-responsive-border-radius-border-radius-300);
	--dk-dynamic-border-radius-200: var(--dk-responsive-border-radius-border-radius-400);
	--dk-dynamic-border-radius-300: var(--dk-responsive-border-radius-border-radius-500);
	--dk-dynamic-border-radius-400: var(--dk-responsive-border-radius-border-radius-600);
	--dk-dynamic-border-radius-500: var(--dk-responsive-border-radius-border-radius-700);
	--dk-dynamic-border-radius-600: var(--dk-responsive-border-radius-border-radius-800);
	--dk-dynamic-border-radius-round: var(--dk-responsive-border-radius-border-radius-round);
}

/* Round: containers keep plush's corners, so a card is never a stadium.
   Single-line controls read the control family below, which is the pill
   radius here and the shared rung in every other tier. */
[data-border-radius="round"] {
	--dk-dynamic-border-radius-0: var(--dk-responsive-border-radius-border-radius-0);
	--dk-dynamic-border-radius-25: var(--dk-responsive-border-radius-border-radius-75);
	--dk-dynamic-border-radius-50: var(--dk-responsive-border-radius-border-radius-100);
	--dk-dynamic-border-radius-75: var(--dk-responsive-border-radius-border-radius-125);
	--dk-dynamic-border-radius-100: var(--dk-responsive-border-radius-border-radius-150);
	--dk-dynamic-border-radius-125: var(--dk-responsive-border-radius-border-radius-200);
	--dk-dynamic-border-radius-150: var(--dk-responsive-border-radius-border-radius-300);
	--dk-dynamic-border-radius-200: var(--dk-responsive-border-radius-border-radius-400);
	--dk-dynamic-border-radius-300: var(--dk-responsive-border-radius-border-radius-500);
	--dk-dynamic-border-radius-400: var(--dk-responsive-border-radius-border-radius-600);
	--dk-dynamic-border-radius-500: var(--dk-responsive-border-radius-border-radius-700);
	--dk-dynamic-border-radius-600: var(--dk-responsive-border-radius-border-radius-800);
	--dk-dynamic-border-radius-round: var(--dk-responsive-border-radius-border-radius-round);
}

/* Control radius (2 Nov): what single-line controls read (Button, Icon
   button, Input and the fields that share it, Select's trigger and chips,
   Tag, Pagination, Glider, Breadcrumb, Switch). It is the shared rung in every
   tier but round, where it is the pill. Containers keep reading the shared
   rungs, so under round they stay at plush. A new single-line control reads
   this family; test/shape-tiers.test.js holds the list. */
:root,
[data-border-radius="sharp"],
[data-border-radius="normal"],
[data-border-radius="bubbly"],
[data-border-radius="plush"] {
	--dk-dynamic-border-radius-control-50: var(--dk-dynamic-border-radius-50);
	--dk-dynamic-border-radius-control-100: var(--dk-dynamic-border-radius-100);
	--dk-dynamic-border-radius-control-125: var(--dk-dynamic-border-radius-125);
	--dk-dynamic-border-radius-control-150: var(--dk-dynamic-border-radius-150);
	--dk-dynamic-border-radius-control-200: var(--dk-dynamic-border-radius-200);
	--dk-dynamic-border-radius-control-300: var(--dk-dynamic-border-radius-300);
	--dk-dynamic-border-radius-control-400: var(--dk-dynamic-border-radius-400);
}

[data-border-radius="round"] {
	--dk-dynamic-border-radius-control-50: var(--dk-responsive-border-radius-border-radius-round);
	--dk-dynamic-border-radius-control-100: var(--dk-responsive-border-radius-border-radius-round);
	--dk-dynamic-border-radius-control-125: var(--dk-responsive-border-radius-border-radius-round);
	--dk-dynamic-border-radius-control-150: var(--dk-responsive-border-radius-border-radius-round);
	--dk-dynamic-border-radius-control-200: var(--dk-responsive-border-radius-border-radius-round);
	--dk-dynamic-border-radius-control-300: var(--dk-responsive-border-radius-border-radius-round);
	--dk-dynamic-border-radius-control-400: var(--dk-responsive-border-radius-border-radius-round);
}

/* ═════════════════════════════════ drift-kit:layer tokens/dynamic/border/width.css ═════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · dynamic/border/width ═══ */
/* width */
:root,
[data-border-width="thin"] {
	--dk-dynamic-border-width-0: var(--dk-primitive-scale-0);
	--dk-dynamic-border-width-25: var(--dk-primitive-scale-0-25);
	--dk-dynamic-border-width-50: var(--dk-primitive-scale-0-5);
	--dk-dynamic-border-width-100: var(--dk-primitive-scale-1);
	--dk-dynamic-border-width-150: var(--dk-primitive-scale-1-5);
	--dk-dynamic-border-width-200: var(--dk-primitive-scale-2);
}

[data-border-width="medium"] {
	--dk-dynamic-border-width-0: var(--dk-primitive-scale-0);
	--dk-dynamic-border-width-25: var(--dk-primitive-scale-0-5);
	--dk-dynamic-border-width-50: var(--dk-primitive-scale-1);
	--dk-dynamic-border-width-100: var(--dk-primitive-scale-1-5);
	--dk-dynamic-border-width-150: var(--dk-primitive-scale-2);
	--dk-dynamic-border-width-200: var(--dk-primitive-scale-2-5);
}

[data-border-width="thick"] {
	--dk-dynamic-border-width-0: var(--dk-primitive-scale-0);
	--dk-dynamic-border-width-25: var(--dk-primitive-scale-1);
	--dk-dynamic-border-width-50: var(--dk-primitive-scale-1-5);
	--dk-dynamic-border-width-100: var(--dk-primitive-scale-2);
	--dk-dynamic-border-width-150: var(--dk-primitive-scale-2-5);
	--dk-dynamic-border-width-200: var(--dk-primitive-scale-3);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */

/* Heavy and bold (2 Nov): two steps past thick for edges and outlines. */
[data-border-width="heavy"] {
	--dk-dynamic-border-width-0: var(--dk-primitive-scale-0);
	--dk-dynamic-border-width-25: var(--dk-primitive-scale-1-5);
	--dk-dynamic-border-width-50: var(--dk-primitive-scale-2);
	--dk-dynamic-border-width-100: var(--dk-primitive-scale-2-5);
	--dk-dynamic-border-width-150: var(--dk-primitive-scale-3);
	--dk-dynamic-border-width-200: var(--dk-primitive-scale-3-5);
}

[data-border-width="bold"] {
	--dk-dynamic-border-width-0: var(--dk-primitive-scale-0);
	--dk-dynamic-border-width-25: var(--dk-primitive-scale-2);
	--dk-dynamic-border-width-50: var(--dk-primitive-scale-2-5);
	--dk-dynamic-border-width-100: var(--dk-primitive-scale-3);
	--dk-dynamic-border-width-150: var(--dk-primitive-scale-3-5);
	--dk-dynamic-border-width-200: var(--dk-primitive-scale-4);
}

/* Separator width (2 Nov): what lines that divide content read (Divider,
   Detail list, Price summary, Dropdown's separator, Box's lines, Accordion's
   rows, Table's rules, Input's leading-control divider, Link's underline,
   Tabs' hairline). It is the edge width through thick and holds at thick's
   after, so a heavy or bold page gets heavier edges, not a heavier grid. */
:root,
[data-border-width="thin"],
[data-border-width="medium"],
[data-border-width="thick"] {
	--dk-dynamic-border-width-separator-25: var(--dk-dynamic-border-width-25);
	--dk-dynamic-border-width-separator-50: var(--dk-dynamic-border-width-50);
}

[data-border-width="heavy"],
[data-border-width="bold"] {
	--dk-dynamic-border-width-separator-25: var(--dk-primitive-scale-1);
	--dk-dynamic-border-width-separator-50: var(--dk-primitive-scale-1-5);
}

/* ═══════════════════════════════ drift-kit:layer tokens/alias/karmo/color/base.css ═══════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · alias/karmo/color/base ═══ */
:root [data-brand="karmo"] {
	--dk-color-base-black: var(--dk-primitive-color-foundation-black);
	--dk-color-base-black-60: var(--dk-primitive-color-foundation-black-60);
	--dk-color-base-white: var(--dk-primitive-color-foundation-white);
	--dk-color-base-white-60: var(--dk-primitive-color-foundation-white-60);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ══════════════════════════════ drift-kit:layer tokens/alias/karmo/color/error.css ══════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · alias/karmo/color/error ═══ */
:root [data-brand="karmo"] {
	--dk-color-error-100: var(--dk-primitive-color-red-100);
	--dk-color-error-200: var(--dk-primitive-color-red-200);
	--dk-color-error-300: var(--dk-primitive-color-red-300);
	--dk-color-error-400: var(--dk-primitive-color-red-400);
	--dk-color-error-50: var(--dk-primitive-color-red-50);
	--dk-color-error-500: var(--dk-primitive-color-red-500);
	--dk-color-error-600: var(--dk-primitive-color-red-600);
	--dk-color-error-700: var(--dk-primitive-color-red-700);
	--dk-color-error-800: var(--dk-primitive-color-red-800);
	--dk-color-error-900: var(--dk-primitive-color-red-900);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */

/* ── 650, Karmo's own rung ─────────────────────────────────────────────────
   THE UPSTREAM RAMP HAS NO STEP BETWEEN 600 AND 700, and a solid status fill
   sits at 700. That leaves a control on a solid panel exactly one usable rung:
   600 for its resting fill, and nothing quieter to rest on or nearer to step to.
   Every attempt to give it a hover state either pushed the fill to 500, where
   the lightest glyph the ramp offers reads 2.13 against it on warning and 2.54
   on primary, or left hover doing nothing at all. Both were reported.

   Derived rather than picked, so it stays in step if upstream retunes either
   neighbour, and declared BELOW the fence because the ramp itself is upstream's
   and a refresh would take an edit there away. srgb rather than oklab because
   the gates' colour parsing reads color(srgb ...) and nothing further.
   ────────────────────────────────────────────────────────────────────────── */
:root [data-brand="karmo"] {
  --dk-color-error-650: color-mix(in srgb, var(--dk-primitive-color-red-600) 50%, var(--dk-primitive-color-red-700));
}

/* ── 750 (3 Nov 2026, 23.18.1) ─────────────────────────────────────────────
   Dark level 1's controls on a subtle tone rest between their panel (800) and
   level 0's hover (700). With nothing between them, 23.18.0 started level 1 at
   700 and pressed at 600, where the best label the ramp offers read 4.04 on
   primary. Derived from its neighbours, as 650 is.
   ────────────────────────────────────────────────────────────────────────── */
:root [data-brand="karmo"] {
  --dk-color-error-750: color-mix(in srgb, var(--dk-primitive-color-red-700) 50%, var(--dk-primitive-color-red-800));
}

/* ── 550, the second of Karmo's own rungs ──────────────────────────────────
   ADDED FOR THE SAME REASON AS 650 ABOVE, one step further. With the resting
   fill at 650 and hover at 600, a press on a solid panel had nowhere left to
   go: 500 is light enough that the ramp's own lightest glyph reads 2.13 on
   warning, so active was pinned to hover's fill and the press did nothing
   visible. 550 is the step that lets active move and still carry a legible
   glyph. Derived from its neighbours for the same reason 650 is.
   ────────────────────────────────────────────────────────────────────────── */
:root [data-brand="karmo"] {
  --dk-color-error-550: color-mix(in srgb, var(--dk-primitive-color-red-500) 50%, var(--dk-primitive-color-red-600));
}

/* -- 25, the third of Karmo's own rungs ------------------------------------
   A PRESS ON A SOLID FILL LIGHTENS, and the glyph lightens with it. Hover
   already held rung 50, the lightest the upstream ramp has, so the pressed
   glyph had nowhere lighter to go and the press was made to darken instead.
   That was wrong and was reported: on a solid panel the press should lift, not
   sink.

   Derived the way the NEUTRAL ramp already derives its own 25, which is the
   midpoint of white and rung 50: neutral-25 is #f4f5f5, neutral-50 is #e9ebeb,
   and (255+233)/2 = 244 = 0xf4 exactly. The status ramps simply never had the
   rung the neutral one does, so this adds it rather than inventing a step.
   Below the fence, in srgb, for the same reasons 650 and 550 are.
   ------------------------------------------------------------------------ */
:root [data-brand="karmo"] {
  --dk-color-error-25: color-mix(in srgb, #fff 50%, var(--dk-primitive-color-red-50));
}

/* ════════════════════════ drift-kit:layer tokens/alias/karmo/color/information.css ════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · alias/karmo/color/information ═══ */
:root [data-brand="karmo"] {  
	--dk-color-information-100: var(--dk-primitive-color-blue-100);
	--dk-color-information-200: var(--dk-primitive-color-blue-200);
	--dk-color-information-300: var(--dk-primitive-color-blue-300);
	--dk-color-information-400: var(--dk-primitive-color-blue-400);
	--dk-color-information-50: var(--dk-primitive-color-blue-50);      
	--dk-color-information-500: var(--dk-primitive-color-blue-500);
	--dk-color-information-600: var(--dk-primitive-color-blue-600);
	--dk-color-information-700: var(--dk-primitive-color-blue-700);
	--dk-color-information-800: var(--dk-primitive-color-blue-800);
	--dk-color-information-900: var(--dk-primitive-color-blue-900);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */

/* ── 650, Karmo's own rung ─────────────────────────────────────────────────
   THE UPSTREAM RAMP HAS NO STEP BETWEEN 600 AND 700, and a solid status fill
   sits at 700. That leaves a control on a solid panel exactly one usable rung:
   600 for its resting fill, and nothing quieter to rest on or nearer to step to.
   Every attempt to give it a hover state either pushed the fill to 500, where
   the lightest glyph the ramp offers reads 2.13 against it on warning and 2.54
   on primary, or left hover doing nothing at all. Both were reported.

   Derived rather than picked, so it stays in step if upstream retunes either
   neighbour, and declared BELOW the fence because the ramp itself is upstream's
   and a refresh would take an edit there away. srgb rather than oklab because
   the gates' colour parsing reads color(srgb ...) and nothing further.
   ────────────────────────────────────────────────────────────────────────── */
:root [data-brand="karmo"] {
  --dk-color-information-650: color-mix(in srgb, var(--dk-primitive-color-blue-600) 50%, var(--dk-primitive-color-blue-700));
}

/* ── 750 (3 Nov 2026, 23.18.1) ─────────────────────────────────────────────
   Dark level 1's controls on a subtle tone rest between their panel (800) and
   level 0's hover (700). With nothing between them, 23.18.0 started level 1 at
   700 and pressed at 600, where the best label the ramp offers read 4.04 on
   primary. Derived from its neighbours, as 650 is.
   ────────────────────────────────────────────────────────────────────────── */
:root [data-brand="karmo"] {
  --dk-color-information-750: color-mix(in srgb, var(--dk-primitive-color-blue-700) 50%, var(--dk-primitive-color-blue-800));
}

/* ── 550, the second of Karmo's own rungs ──────────────────────────────────
   ADDED FOR THE SAME REASON AS 650 ABOVE, one step further. With the resting
   fill at 650 and hover at 600, a press on a solid panel had nowhere left to
   go: 500 is light enough that the ramp's own lightest glyph reads 2.13 on
   warning, so active was pinned to hover's fill and the press did nothing
   visible. 550 is the step that lets active move and still carry a legible
   glyph. Derived from its neighbours for the same reason 650 is.
   ────────────────────────────────────────────────────────────────────────── */
:root [data-brand="karmo"] {
  --dk-color-information-550: color-mix(in srgb, var(--dk-primitive-color-blue-500) 50%, var(--dk-primitive-color-blue-600));
}

/* -- 25, the third of Karmo's own rungs ------------------------------------
   A PRESS ON A SOLID FILL LIGHTENS, and the glyph lightens with it. Hover
   already held rung 50, the lightest the upstream ramp has, so the pressed
   glyph had nowhere lighter to go and the press was made to darken instead.
   That was wrong and was reported: on a solid panel the press should lift, not
   sink.

   Derived the way the NEUTRAL ramp already derives its own 25, which is the
   midpoint of white and rung 50: neutral-25 is #f4f5f5, neutral-50 is #e9ebeb,
   and (255+233)/2 = 244 = 0xf4 exactly. The status ramps simply never had the
   rung the neutral one does, so this adds it rather than inventing a step.
   Below the fence, in srgb, for the same reasons 650 and 550 are.
   ------------------------------------------------------------------------ */
:root [data-brand="karmo"] {
  --dk-color-information-25: color-mix(in srgb, #fff 50%, var(--dk-primitive-color-blue-50));
}

/* ════════════════════════════ drift-kit:layer tokens/alias/karmo/color/neutral.css ════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · alias/karmo/color/neutral ═══ */
:root [data-brand="karmo"] {
	--dk-color-neutral-100: var(--dk-primitive-color-gray-100);
	--dk-color-neutral-1000: var(--dk-primitive-color-gray-1000);
	--dk-color-neutral-1100: var(--dk-primitive-color-gray-1100);
	--dk-color-neutral-200: var(--dk-primitive-color-gray-200);
	--dk-color-neutral-25: var(--dk-primitive-color-gray-25);
	--dk-color-neutral-300: var(--dk-primitive-color-gray-300);
	--dk-color-neutral-400: var(--dk-primitive-color-gray-400);
	--dk-color-neutral-50: var(--dk-primitive-color-gray-50);
	--dk-color-neutral-500: var(--dk-primitive-color-gray-500);
	--dk-color-neutral-600: var(--dk-primitive-color-gray-600);
	--dk-color-neutral-700: var(--dk-primitive-color-gray-700);
	--dk-color-neutral-800: var(--dk-primitive-color-gray-800);
	--dk-color-neutral-900: var(--dk-primitive-color-gray-900);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */

/* ── Half rungs, 850 to 450 (29 Oct) ──────────────────────────────────────
   THE RAISED VARIANTS' BORDERS STEP HALF A RUNG IN DARK. Julio asked for them
   a tone more subtle; light has the rung to step to, dark does not: 900 is the
   level-2 surface itself and nearly level 1's, so a border there vanishes.
   Derived from the neighbours, as error-650 is, and declared below the fence
   so a refresh keeps them.
   ────────────────────────────────────────────────────────────────────────── */
:root [data-brand="karmo"] {
  --dk-color-neutral-850: color-mix(in srgb, var(--dk-primitive-color-gray-800) 50%, var(--dk-primitive-color-gray-900));
  --dk-color-neutral-750: color-mix(in srgb, var(--dk-primitive-color-gray-700) 50%, var(--dk-primitive-color-gray-800));
  --dk-color-neutral-650: color-mix(in srgb, var(--dk-primitive-color-gray-600) 50%, var(--dk-primitive-color-gray-700));
  --dk-color-neutral-550: color-mix(in srgb, var(--dk-primitive-color-gray-500) 50%, var(--dk-primitive-color-gray-600));
  --dk-color-neutral-450: color-mix(in srgb, var(--dk-primitive-color-gray-400) 50%, var(--dk-primitive-color-gray-500));
}

/* ════════════════════════════ drift-kit:layer tokens/alias/karmo/color/primary.css ════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · alias/karmo/color/primary ═══ */
:root [data-brand="karmo"] {
	--dk-color-primary-100: var(--dk-primitive-color-jade-100);
	--dk-color-primary-200: var(--dk-primitive-color-jade-200);
	--dk-color-primary-300: var(--dk-primitive-color-jade-300);
	--dk-color-primary-400: var(--dk-primitive-color-jade-400);
	--dk-color-primary-50: var(--dk-primitive-color-jade-50);
	--dk-color-primary-500: var(--dk-primitive-color-jade-500);
	--dk-color-primary-600: var(--dk-primitive-color-jade-600);
	--dk-color-primary-700: var(--dk-primitive-color-jade-700);
	--dk-color-primary-800: var(--dk-primitive-color-jade-800);
	--dk-color-primary-850: var(--dk-primitive-color-jade-850);
	--dk-color-primary-900: var(--dk-primitive-color-jade-900);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */

/* ── 650, Karmo's own rung ─────────────────────────────────────────────────
   THE UPSTREAM RAMP HAS NO STEP BETWEEN 600 AND 700, and a solid status fill
   sits at 700. That leaves a control on a solid panel exactly one usable rung:
   600 for its resting fill, and nothing quieter to rest on or nearer to step to.
   Every attempt to give it a hover state either pushed the fill to 500, where
   the lightest glyph the ramp offers reads 2.13 against it on warning and 2.54
   on primary, or left hover doing nothing at all. Both were reported.

   Derived rather than picked, so it stays in step if upstream retunes either
   neighbour, and declared BELOW the fence because the ramp itself is upstream's
   and a refresh would take an edit there away. srgb rather than oklab because
   the gates' colour parsing reads color(srgb ...) and nothing further.
   ────────────────────────────────────────────────────────────────────────── */
:root [data-brand="karmo"] {
  --dk-color-primary-650: color-mix(in srgb, var(--dk-primitive-color-jade-600) 50%, var(--dk-primitive-color-jade-700));
}

/* ── 750 (3 Nov 2026, 23.18.1) ─────────────────────────────────────────────
   Dark level 1's controls on a subtle tone rest between their panel (800) and
   level 0's hover (700). With nothing between them, 23.18.0 started level 1 at
   700 and pressed at 600, where the best label the ramp offers read 4.04 on
   primary. Derived from its neighbours, as 650 is.
   ────────────────────────────────────────────────────────────────────────── */
:root [data-brand="karmo"] {
  --dk-color-primary-750: color-mix(in srgb, var(--dk-primitive-color-jade-700) 50%, var(--dk-primitive-color-jade-800));
}

/* ── 550, the second of Karmo's own rungs ──────────────────────────────────
   ADDED FOR THE SAME REASON AS 650 ABOVE, one step further. With the resting
   fill at 650 and hover at 600, a press on a solid panel had nowhere left to
   go: 500 is light enough that the ramp's own lightest glyph reads 2.13 on
   warning, so active was pinned to hover's fill and the press did nothing
   visible. 550 is the step that lets active move and still carry a legible
   glyph. Derived from its neighbours for the same reason 650 is.
   ────────────────────────────────────────────────────────────────────────── */
:root [data-brand="karmo"] {
  --dk-color-primary-550: color-mix(in srgb, var(--dk-primitive-color-jade-500) 50%, var(--dk-primitive-color-jade-600));
}

/* -- 25, the third of Karmo's own rungs ------------------------------------
   A PRESS ON A SOLID FILL LIGHTENS, and the glyph lightens with it. Hover
   already held rung 50, the lightest the upstream ramp has, so the pressed
   glyph had nowhere lighter to go and the press was made to darken instead.
   That was wrong and was reported: on a solid panel the press should lift, not
   sink.

   Derived the way the NEUTRAL ramp already derives its own 25, which is the
   midpoint of white and rung 50: neutral-25 is #f4f5f5, neutral-50 is #e9ebeb,
   and (255+233)/2 = 244 = 0xf4 exactly. The status ramps simply never had the
   rung the neutral one does, so this adds it rather than inventing a step.
   Below the fence, in srgb, for the same reasons 650 and 550 are.
   ------------------------------------------------------------------------ */
:root [data-brand="karmo"] {
  --dk-color-primary-25: color-mix(in srgb, #fff 50%, var(--dk-primitive-color-jade-50));
}

/* ══════════════════════════ drift-kit:layer tokens/alias/karmo/color/secondary.css ══════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · alias/karmo/color/secondary ═══ */
:root [data-brand="karmo"] {
	--dk-color-secondary-100: var(--dk-primitive-color-gold-100);
	--dk-color-secondary-200: var(--dk-primitive-color-gold-200);
	--dk-color-secondary-300: var(--dk-primitive-color-gold-300);
	--dk-color-secondary-400: var(--dk-primitive-color-gold-400);
	--dk-color-secondary-50: var(--dk-primitive-color-gold-50);
	--dk-color-secondary-500: var(--dk-primitive-color-gold-500);
	--dk-color-secondary-600: var(--dk-primitive-color-gold-600);
	--dk-color-secondary-700: var(--dk-primitive-color-gold-700);
	--dk-color-secondary-800: var(--dk-primitive-color-gold-800);
	--dk-color-secondary-900: var(--dk-primitive-color-gold-900);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ════════════════════════════ drift-kit:layer tokens/alias/karmo/color/success.css ════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · alias/karmo/color/success ═══ */
:root [data-brand="karmo"] {
	--dk-color-success-100: var(--dk-primitive-color-green-100);
	--dk-color-success-200: var(--dk-primitive-color-green-200);
	--dk-color-success-300: var(--dk-primitive-color-green-300);
	--dk-color-success-400: var(--dk-primitive-color-green-400);
	--dk-color-success-50: var(--dk-primitive-color-green-50);
	--dk-color-success-500: var(--dk-primitive-color-green-500);
	--dk-color-success-600: var(--dk-primitive-color-green-600);
	--dk-color-success-700: var(--dk-primitive-color-green-700);
	--dk-color-success-800: var(--dk-primitive-color-green-800);
	--dk-color-success-900: var(--dk-primitive-color-green-900);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ════════════════════════════ drift-kit:layer tokens/alias/karmo/color/warning.css ════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · alias/karmo/color/warning ═══ */
:root [data-brand="karmo"] {
	--dk-color-warning-100: var(--dk-primitive-color-orange-100);
	--dk-color-warning-200: var(--dk-primitive-color-orange-200);
	--dk-color-warning-300: var(--dk-primitive-color-orange-300);
	--dk-color-warning-400: var(--dk-primitive-color-orange-400);
	--dk-color-warning-50: var(--dk-primitive-color-orange-50);
	--dk-color-warning-500: var(--dk-primitive-color-orange-500);
	--dk-color-warning-600: var(--dk-primitive-color-orange-600);
	--dk-color-warning-700: var(--dk-primitive-color-orange-700);
	--dk-color-warning-800: var(--dk-primitive-color-orange-800);
	--dk-color-warning-900: var(--dk-primitive-color-orange-900);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */

/* ── 650, Karmo's own rung ─────────────────────────────────────────────────
   THE UPSTREAM RAMP HAS NO STEP BETWEEN 600 AND 700, and a solid status fill
   sits at 700. That leaves a control on a solid panel exactly one usable rung:
   600 for its resting fill, and nothing quieter to rest on or nearer to step to.
   Every attempt to give it a hover state either pushed the fill to 500, where
   the lightest glyph the ramp offers reads 2.13 against it on warning and 2.54
   on primary, or left hover doing nothing at all. Both were reported.

   Derived rather than picked, so it stays in step if upstream retunes either
   neighbour, and declared BELOW the fence because the ramp itself is upstream's
   and a refresh would take an edit there away. srgb rather than oklab because
   the gates' colour parsing reads color(srgb ...) and nothing further.
   ────────────────────────────────────────────────────────────────────────── */
:root [data-brand="karmo"] {
  --dk-color-warning-650: color-mix(in srgb, var(--dk-primitive-color-orange-600) 50%, var(--dk-primitive-color-orange-700));
}

/* ── 750 (3 Nov 2026, 23.18.1) ─────────────────────────────────────────────
   Dark level 1's controls on a subtle tone rest between their panel (800) and
   level 0's hover (700). With nothing between them, 23.18.0 started level 1 at
   700 and pressed at 600, where the best label the ramp offers read 4.04 on
   primary. Derived from its neighbours, as 650 is.
   ────────────────────────────────────────────────────────────────────────── */
:root [data-brand="karmo"] {
  --dk-color-warning-750: color-mix(in srgb, var(--dk-primitive-color-orange-700) 50%, var(--dk-primitive-color-orange-800));
}

/* ── 550, the second of Karmo's own rungs ──────────────────────────────────
   ADDED FOR THE SAME REASON AS 650 ABOVE, one step further. With the resting
   fill at 650 and hover at 600, a press on a solid panel had nowhere left to
   go: 500 is light enough that the ramp's own lightest glyph reads 2.13 on
   warning, so active was pinned to hover's fill and the press did nothing
   visible. 550 is the step that lets active move and still carry a legible
   glyph. Derived from its neighbours for the same reason 650 is.
   ────────────────────────────────────────────────────────────────────────── */
:root [data-brand="karmo"] {
  --dk-color-warning-550: color-mix(in srgb, var(--dk-primitive-color-orange-500) 50%, var(--dk-primitive-color-orange-600));
}

/* -- 25, the third of Karmo's own rungs ------------------------------------
   A PRESS ON A SOLID FILL LIGHTENS, and the glyph lightens with it. Hover
   already held rung 50, the lightest the upstream ramp has, so the pressed
   glyph had nowhere lighter to go and the press was made to darken instead.
   That was wrong and was reported: on a solid panel the press should lift, not
   sink.

   Derived the way the NEUTRAL ramp already derives its own 25, which is the
   midpoint of white and rung 50: neutral-25 is #f4f5f5, neutral-50 is #e9ebeb,
   and (255+233)/2 = 244 = 0xf4 exactly. The status ramps simply never had the
   rung the neutral one does, so this adds it rather than inventing a step.
   Below the fence, in srgb, for the same reasons 650 and 550 are.
   ------------------------------------------------------------------------ */
:root [data-brand="karmo"] {
  --dk-color-warning-25: color-mix(in srgb, #fff 50%, var(--dk-primitive-color-orange-50));
}

/* ════════════════════════════════ drift-kit:layer tokens/alias/karmo/font/body.css ════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · alias/karmo/font/body ═══ */
:root [data-brand="karmo"] {
	--dk-font-body-lg-text-size: var(--dk-responsive-font-body-lg-text-size);
	--dk-font-body-lg-line-height: var(--dk-responsive-font-body-lg-line-height);
	--dk-font-body-lg-paragraph-spacing: var(--dk-responsive-font-body-lg-paragraph-spacing);
	--dk-font-body-md-text-size: var(--dk-responsive-font-body-md-text-size);
	--dk-font-body-md-line-height: var(--dk-responsive-font-body-md-line-height);
	--dk-font-body-md-paragraph-spacing: var(--dk-responsive-font-body-md-paragraph-spacing);
	--dk-font-body-sm-text-size: var(--dk-responsive-font-body-sm-text-size);
	--dk-font-body-sm-line-height: var(--dk-responsive-font-body-sm-line-height);
	--dk-font-body-sm-paragraph-spacing: var(--dk-responsive-font-body-sm-paragraph-spacing);
	--dk-font-body-xsm-text-size: var(--dk-responsive-font-body-xsm-text-size);
	--dk-font-body-xsm-line-height: var(--dk-responsive-font-body-xsm-line-height);
	--dk-font-body-xsm-paragraph-spacing: var(--dk-responsive-font-body-xsm-paragraph-spacing);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ══════════════════════════════ drift-kit:layer tokens/alias/karmo/font/family.css ══════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · alias/karmo/font/family ═══ */
:root [data-brand="karmo"] {
	--dk-font-family-primary: var(--dk-primitive-font-family-inter);
	--dk-font-family-secondary: var(--dk-primitive-font-family-syne);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ═════════════════════════════ drift-kit:layer tokens/alias/karmo/font/heading.css ═════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · alias/karmo/font/heading ═══ */
:root [data-brand="karmo"] {
	--dk-font-heading-h1-text-size: var(--dk-responsive-font-headings-h1-text-size);
	--dk-font-heading-h1-line-height: var(--dk-responsive-font-headings-h1-line-height);
	--dk-font-heading-h1-paragraph-spacing: var(--dk-responsive-font-headings-h1-paragraph-spacing);
	--dk-font-heading-h2-text-size: var(--dk-responsive-font-headings-h2-text-size);
	--dk-font-heading-h2-line-height: var(--dk-responsive-font-headings-h2-line-height);
	--dk-font-heading-h2-paragraph-spacing: var(--dk-responsive-font-headings-h2-paragraph-spacing);
	--dk-font-heading-h3-text-size: var(--dk-responsive-font-headings-h3-text-size);
	--dk-font-heading-h3-line-height: var(--dk-responsive-font-headings-h3-line-height);
	--dk-font-heading-h3-paragraph-spacing: var(--dk-responsive-font-headings-h3-paragraph-spacing);
	--dk-font-heading-h4-text-size: var(--dk-responsive-font-headings-h4-text-size);
	--dk-font-heading-h4-line-height: var(--dk-responsive-font-headings-h4-line-height);
	--dk-font-heading-h4-paragraph-spacing: var(--dk-responsive-font-headings-h4-paragraph-spacing);
	--dk-font-heading-h5-text-size: var(--dk-responsive-font-headings-h5-text-size);
	--dk-font-heading-h5-line-height: var(--dk-responsive-font-headings-h5-line-height);
	--dk-font-heading-h5-paragraph-spacing: var(--dk-responsive-font-headings-h5-paragraph-spacing);
	--dk-font-heading-h6-text-size: var(--dk-responsive-font-headings-h6-text-size);
	--dk-font-heading-h6-line-height: var(--dk-responsive-font-headings-h6-line-height);
	--dk-font-heading-h6-paragraph-spacing: var(--dk-responsive-font-headings-h6-paragraph-spacing);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ════════════════════════════ drift-kit:layer tokens/alias/karmo/font/overline.css ════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · alias/karmo/font/overline ═══ */
:root [data-brand="karmo"] {
	--dk-font-overline-lg-text-size: var(--dk-responsive-font-overline-lg-text-size);
	--dk-font-overline-lg-line-height: var(--dk-responsive-font-overline-lg-line-height);
	--dk-font-overline-lg-paragraph-spacing: var(--dk-responsive-font-overline-lg-paragraph-spacing);
	--dk-font-overline-md-text-size: var(--dk-responsive-font-overline-md-text-size);
	--dk-font-overline-md-line-height: var(--dk-responsive-font-overline-md-line-height);
	--dk-font-overline-md-paragraph-spacing: var(--dk-responsive-font-overline-md-paragraph-spacing);
	--dk-font-overline-sm-text-size: var(--dk-responsive-font-overline-sm-text-size);
	--dk-font-overline-sm-line-height: var(--dk-responsive-font-overline-sm-line-height);
	--dk-font-overline-sm-paragraph-spacing: var(--dk-responsive-font-overline-sm-paragraph-spacing);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ═══════════════════════════════ drift-kit:layer tokens/alias/karmo/font/input.css ═══════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · alias/karmo/font/input ═══ */
:root [data-brand="karmo"] {
    --dk-font-input-lg-text-size: var(--dk-responsive-font-input-lg-text-size);
    --dk-font-input-lg-line-height: var(--dk-responsive-font-input-lg-line-height);
    --dk-font-input-lg-paragraph-spacing: var(--dk-responsive-font-input-lg-paragraph-spacing);
    --dk-font-input-md-text-size: var(--dk-responsive-font-input-md-text-size);
    --dk-font-input-md-line-height: var(--dk-responsive-font-input-md-line-height);
    --dk-font-input-md-paragraph-spacing: var(--dk-responsive-font-input-md-paragraph-spacing);
    --dk-font-input-sm-text-size: var(--dk-responsive-font-input-sm-text-size);
    --dk-font-input-sm-line-height: var(--dk-responsive-font-input-sm-line-height);
    --dk-font-input-sm-paragraph-spacing: var(--dk-responsive-font-input-sm-paragraph-spacing);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ════════════════════════════ drift-kit:layer tokens/alias/karmo/border/radius.css ════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · alias/karmo/border/radius ═══ */
:root [data-brand="karmo"] {
	--dk-border-radius-0: var(--dk-dynamic-border-radius-0);
	--dk-border-radius-25: var(--dk-dynamic-border-radius-25);
	--dk-border-radius-50: var(--dk-dynamic-border-radius-50);
	--dk-border-radius-75: var(--dk-dynamic-border-radius-75);	
	--dk-border-radius-100: var(--dk-dynamic-border-radius-100);
	--dk-border-radius-125: var(--dk-dynamic-border-radius-125);
	--dk-border-radius-150: var(--dk-dynamic-border-radius-150);
	--dk-border-radius-200: var(--dk-dynamic-border-radius-200);
	--dk-border-radius-300: var(--dk-dynamic-border-radius-300);
	--dk-border-radius-400: var(--dk-dynamic-border-radius-400);
	--dk-border-radius-500: var(--dk-dynamic-border-radius-500);
	--dk-border-radius-600: var(--dk-dynamic-border-radius-600);
	--dk-border-radius-round: var(--dk-dynamic-border-radius-round);
	--dk-border-radius-round-fixed: 624.9375rem;
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */

/* The control radius (2 Nov), read by single-line controls; see
   tokens/dynamic/border/radius.css. */
:root [data-brand="karmo"] {
	--dk-border-radius-control-50: var(--dk-dynamic-border-radius-control-50);
	--dk-border-radius-control-100: var(--dk-dynamic-border-radius-control-100);
	--dk-border-radius-control-125: var(--dk-dynamic-border-radius-control-125);
	--dk-border-radius-control-150: var(--dk-dynamic-border-radius-control-150);
	--dk-border-radius-control-200: var(--dk-dynamic-border-radius-control-200);
	--dk-border-radius-control-300: var(--dk-dynamic-border-radius-control-300);
	--dk-border-radius-control-400: var(--dk-dynamic-border-radius-control-400);
}

/* Nested tiers (2 Nov): the same names again on any element inside the brand
   that sets its own corners, so they resolve against that element's
   rungs instead of the brand element's. Without this a tier set below the
   brand element reached nothing. test/shape-tiers.test.js keeps the list
   equal to the brand block's. */
:root [data-brand="karmo"] [data-border-radius] {
	--dk-border-radius-0: var(--dk-dynamic-border-radius-0);
	--dk-border-radius-25: var(--dk-dynamic-border-radius-25);
	--dk-border-radius-50: var(--dk-dynamic-border-radius-50);
	--dk-border-radius-75: var(--dk-dynamic-border-radius-75);
	--dk-border-radius-100: var(--dk-dynamic-border-radius-100);
	--dk-border-radius-125: var(--dk-dynamic-border-radius-125);
	--dk-border-radius-150: var(--dk-dynamic-border-radius-150);
	--dk-border-radius-200: var(--dk-dynamic-border-radius-200);
	--dk-border-radius-300: var(--dk-dynamic-border-radius-300);
	--dk-border-radius-400: var(--dk-dynamic-border-radius-400);
	--dk-border-radius-500: var(--dk-dynamic-border-radius-500);
	--dk-border-radius-600: var(--dk-dynamic-border-radius-600);
	--dk-border-radius-round: var(--dk-dynamic-border-radius-round);
	--dk-border-radius-round-fixed: 624.9375rem;
	--dk-border-radius-control-50: var(--dk-dynamic-border-radius-control-50);
	--dk-border-radius-control-100: var(--dk-dynamic-border-radius-control-100);
	--dk-border-radius-control-125: var(--dk-dynamic-border-radius-control-125);
	--dk-border-radius-control-150: var(--dk-dynamic-border-radius-control-150);
	--dk-border-radius-control-200: var(--dk-dynamic-border-radius-control-200);
	--dk-border-radius-control-300: var(--dk-dynamic-border-radius-control-300);
	--dk-border-radius-control-400: var(--dk-dynamic-border-radius-control-400);
}

/* ═════════════════════════════ drift-kit:layer tokens/alias/karmo/border/width.css ═════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · alias/karmo/border/width ═══ */
:root [data-brand="karmo"] {
	--dk-border-width-0: var(--dk-dynamic-border-width-0);
	--dk-border-width-25: var(--dk-dynamic-border-width-25);
	--dk-border-width-50: var(--dk-dynamic-border-width-50);
	--dk-border-width-100: var(--dk-dynamic-border-width-100);
	--dk-border-width-150: var(--dk-dynamic-border-width-150);
	--dk-border-width-200: var(--dk-dynamic-border-width-200);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */

/* The separator width (2 Nov); see tokens/dynamic/border/width.css. */
:root [data-brand="karmo"] {
	--dk-border-width-separator-25: var(--dk-dynamic-border-width-separator-25);
	--dk-border-width-separator-50: var(--dk-dynamic-border-width-separator-50);
}

/* Nested tiers (2 Nov): the same names again on any element inside the brand
   that sets its own border width, so they resolve against that element's
   rungs instead of the brand element's. Without this a tier set below the
   brand element reached nothing. test/shape-tiers.test.js keeps the list
   equal to the brand block's. */
:root [data-brand="karmo"] [data-border-width] {
	--dk-border-width-0: var(--dk-dynamic-border-width-0);
	--dk-border-width-25: var(--dk-dynamic-border-width-25);
	--dk-border-width-50: var(--dk-dynamic-border-width-50);
	--dk-border-width-100: var(--dk-dynamic-border-width-100);
	--dk-border-width-150: var(--dk-dynamic-border-width-150);
	--dk-border-width-200: var(--dk-dynamic-border-width-200);
	--dk-border-width-separator-25: var(--dk-dynamic-border-width-separator-25);
	--dk-border-width-separator-50: var(--dk-dynamic-border-width-separator-50);
}

/* ══════════════════════════════════ drift-kit:layer tokens/alias/karmo/spacing.css ══════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · alias/karmo/spacing ═══ */
:root [data-brand="karmo"] {
	--dk-spacing-0-25: var(--dk-dynamic-spacing-0-25);
	--dk-spacing-0-5: var(--dk-dynamic-spacing-0-5);
	--dk-spacing-1: var(--dk-dynamic-spacing-1);
	--dk-spacing-1-5: var(--dk-dynamic-spacing-1-5);
	--dk-spacing-2: var(--dk-dynamic-spacing-2);
	--dk-spacing-2-5: var(--dk-dynamic-spacing-2-5);
	--dk-spacing-3: var(--dk-dynamic-spacing-3);
	--dk-spacing-3-5: var(--dk-dynamic-spacing-3-5);
	--dk-spacing-4: var(--dk-dynamic-spacing-4);
	--dk-spacing-4-5: var(--dk-dynamic-spacing-4-5);
	--dk-spacing-5: var(--dk-dynamic-spacing-5);
	--dk-spacing-5-5: var(--dk-dynamic-spacing-5-5);
	--dk-spacing-6: var(--dk-dynamic-spacing-6);
	--dk-spacing-7: var(--dk-dynamic-spacing-7);
	--dk-spacing-8: var(--dk-dynamic-spacing-8);
	--dk-spacing-9: var(--dk-dynamic-spacing-9);
	--dk-spacing-10: var(--dk-dynamic-spacing-10);
	--dk-spacing-11: var(--dk-dynamic-spacing-11);
	--dk-spacing-12: var(--dk-dynamic-spacing-12);
	--dk-spacing-14: var(--dk-dynamic-spacing-14);
	--dk-spacing-16: var(--dk-dynamic-spacing-16);
	--dk-spacing-20: var(--dk-dynamic-spacing-20);
	--dk-spacing-24: var(--dk-dynamic-spacing-24);
	--dk-spacing-28: var(--dk-dynamic-spacing-28);
	--dk-spacing-32: var(--dk-dynamic-spacing-32);
	--dk-spacing-40: var(--dk-dynamic-spacing-40);
	--dk-spacing-48: var(--dk-dynamic-spacing-48);
	--dk-spacing-56: var(--dk-dynamic-spacing-56);
	--dk-spacing-64: var(--dk-dynamic-spacing-64);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* Nested tiers (2 Nov): the same names again on any element inside the brand
   that sets its own density, so they resolve against that element's
   rungs instead of the brand element's. Without this a tier set below the
   brand element reached nothing. test/shape-tiers.test.js keeps the list
   equal to the brand block's. */
:root [data-brand="karmo"] [data-density] {
	--dk-spacing-0-25: var(--dk-dynamic-spacing-0-25);
	--dk-spacing-0-5: var(--dk-dynamic-spacing-0-5);
	--dk-spacing-1: var(--dk-dynamic-spacing-1);
	--dk-spacing-1-5: var(--dk-dynamic-spacing-1-5);
	--dk-spacing-2: var(--dk-dynamic-spacing-2);
	--dk-spacing-2-5: var(--dk-dynamic-spacing-2-5);
	--dk-spacing-3: var(--dk-dynamic-spacing-3);
	--dk-spacing-3-5: var(--dk-dynamic-spacing-3-5);
	--dk-spacing-4: var(--dk-dynamic-spacing-4);
	--dk-spacing-4-5: var(--dk-dynamic-spacing-4-5);
	--dk-spacing-5: var(--dk-dynamic-spacing-5);
	--dk-spacing-5-5: var(--dk-dynamic-spacing-5-5);
	--dk-spacing-6: var(--dk-dynamic-spacing-6);
	--dk-spacing-7: var(--dk-dynamic-spacing-7);
	--dk-spacing-8: var(--dk-dynamic-spacing-8);
	--dk-spacing-9: var(--dk-dynamic-spacing-9);
	--dk-spacing-10: var(--dk-dynamic-spacing-10);
	--dk-spacing-11: var(--dk-dynamic-spacing-11);
	--dk-spacing-12: var(--dk-dynamic-spacing-12);
	--dk-spacing-14: var(--dk-dynamic-spacing-14);
	--dk-spacing-16: var(--dk-dynamic-spacing-16);
	--dk-spacing-20: var(--dk-dynamic-spacing-20);
	--dk-spacing-24: var(--dk-dynamic-spacing-24);
	--dk-spacing-28: var(--dk-dynamic-spacing-28);
	--dk-spacing-32: var(--dk-dynamic-spacing-32);
	--dk-spacing-40: var(--dk-dynamic-spacing-40);
	--dk-spacing-48: var(--dk-dynamic-spacing-48);
	--dk-spacing-56: var(--dk-dynamic-spacing-56);
	--dk-spacing-64: var(--dk-dynamic-spacing-64);
}

/* ═══════════════════════════════ drift-kit:layer tokens/alias/volvo/color/base.css ═══════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · alias/volvo/color/base ═══ */
:root [data-brand="volvo"] {
	--dk-color-base-black: var(--dk-primitive-color-foundation-black);
	--dk-color-base-black-60: var(--dk-primitive-color-foundation-black-60);
	--dk-color-base-white: var(--dk-primitive-color-foundation-white);
	--dk-color-base-white-60: var(--dk-primitive-color-foundation-white-60);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ══════════════════════════════ drift-kit:layer tokens/alias/volvo/color/error.css ══════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · alias/volvo/color/error ═══ */
:root [data-brand="volvo"] {
	--dk-color-error-100: var(--dk-primitive-color-red-100);
	--dk-color-error-200: var(--dk-primitive-color-red-200);
	--dk-color-error-300: var(--dk-primitive-color-red-300);
	--dk-color-error-400: var(--dk-primitive-color-red-400);
	--dk-color-error-50: var(--dk-primitive-color-red-50);
	--dk-color-error-500: var(--dk-primitive-color-red-500);
	--dk-color-error-600: var(--dk-primitive-color-red-600);
	--dk-color-error-700: var(--dk-primitive-color-red-700);
	--dk-color-error-800: var(--dk-primitive-color-red-800);
	--dk-color-error-900: var(--dk-primitive-color-red-900);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */

/* ── 650, Karmo's own rung ─────────────────────────────────────────────────
   THE UPSTREAM RAMP HAS NO STEP BETWEEN 600 AND 700, and a solid status fill
   sits at 700. That leaves a control on a solid panel exactly one usable rung:
   600 for its resting fill, and nothing quieter to rest on or nearer to step to.
   Every attempt to give it a hover state either pushed the fill to 500, where
   the lightest glyph the ramp offers reads 2.13 against it on warning and 2.54
   on primary, or left hover doing nothing at all. Both were reported.

   Derived rather than picked, so it stays in step if upstream retunes either
   neighbour, and declared BELOW the fence because the ramp itself is upstream's
   and a refresh would take an edit there away. srgb rather than oklab because
   the gates' colour parsing reads color(srgb ...) and nothing further.
   ────────────────────────────────────────────────────────────────────────── */
:root [data-brand="volvo"] {
  --dk-color-error-650: color-mix(in srgb, var(--dk-primitive-color-red-600) 50%, var(--dk-primitive-color-red-700));
}

/* ── 750 (3 Nov 2026, 23.18.1) ─────────────────────────────────────────────
   Dark level 1's controls on a subtle tone rest between their panel (800) and
   level 0's hover (700). With nothing between them, 23.18.0 started level 1 at
   700 and pressed at 600, where the best label the ramp offers read 4.04 on
   primary. Derived from its neighbours, as 650 is.
   ────────────────────────────────────────────────────────────────────────── */
:root [data-brand="volvo"] {
  --dk-color-error-750: color-mix(in srgb, var(--dk-primitive-color-red-700) 50%, var(--dk-primitive-color-red-800));
}

/* ── 550, the second of Karmo's own rungs ──────────────────────────────────
   ADDED FOR THE SAME REASON AS 650 ABOVE, one step further. With the resting
   fill at 650 and hover at 600, a press on a solid panel had nowhere left to
   go: 500 is light enough that the ramp's own lightest glyph reads 2.13 on
   warning, so active was pinned to hover's fill and the press did nothing
   visible. 550 is the step that lets active move and still carry a legible
   glyph. Derived from its neighbours for the same reason 650 is.
   ────────────────────────────────────────────────────────────────────────── */
:root [data-brand="volvo"] {
  --dk-color-error-550: color-mix(in srgb, var(--dk-primitive-color-red-500) 50%, var(--dk-primitive-color-red-600));
}

/* -- 25, the third of Karmo's own rungs ------------------------------------
   A PRESS ON A SOLID FILL LIGHTENS, and the glyph lightens with it. Hover
   already held rung 50, the lightest the upstream ramp has, so the pressed
   glyph had nowhere lighter to go and the press was made to darken instead.
   That was wrong and was reported: on a solid panel the press should lift, not
   sink.

   Derived the way the NEUTRAL ramp already derives its own 25, which is the
   midpoint of white and rung 50: neutral-25 is #f4f5f5, neutral-50 is #e9ebeb,
   and (255+233)/2 = 244 = 0xf4 exactly. The status ramps simply never had the
   rung the neutral one does, so this adds it rather than inventing a step.
   Below the fence, in srgb, for the same reasons 650 and 550 are.
   ------------------------------------------------------------------------ */
:root [data-brand="volvo"] {
  --dk-color-error-25: color-mix(in srgb, #fff 50%, var(--dk-primitive-color-red-50));
}

/* ════════════════════════ drift-kit:layer tokens/alias/volvo/color/information.css ════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · alias/volvo/color/information ═══ */
:root [data-brand="volvo"] {  
	--dk-color-information-100: var(--dk-primitive-color-blue-100);
	--dk-color-information-200: var(--dk-primitive-color-blue-200);
	--dk-color-information-300: var(--dk-primitive-color-blue-300);
	--dk-color-information-400: var(--dk-primitive-color-blue-400);
	--dk-color-information-50: var(--dk-primitive-color-blue-50);      
	--dk-color-information-500: var(--dk-primitive-color-blue-500);
	--dk-color-information-600: var(--dk-primitive-color-blue-600);
	--dk-color-information-700: var(--dk-primitive-color-blue-700);
	--dk-color-information-800: var(--dk-primitive-color-blue-800);
	--dk-color-information-900: var(--dk-primitive-color-blue-900);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */

/* ── 650, Karmo's own rung ─────────────────────────────────────────────────
   THE UPSTREAM RAMP HAS NO STEP BETWEEN 600 AND 700, and a solid status fill
   sits at 700. That leaves a control on a solid panel exactly one usable rung:
   600 for its resting fill, and nothing quieter to rest on or nearer to step to.
   Every attempt to give it a hover state either pushed the fill to 500, where
   the lightest glyph the ramp offers reads 2.13 against it on warning and 2.54
   on primary, or left hover doing nothing at all. Both were reported.

   Derived rather than picked, so it stays in step if upstream retunes either
   neighbour, and declared BELOW the fence because the ramp itself is upstream's
   and a refresh would take an edit there away. srgb rather than oklab because
   the gates' colour parsing reads color(srgb ...) and nothing further.
   ────────────────────────────────────────────────────────────────────────── */
:root [data-brand="volvo"] {
  --dk-color-information-650: color-mix(in srgb, var(--dk-primitive-color-blue-600) 50%, var(--dk-primitive-color-blue-700));
}

/* ── 750 (3 Nov 2026, 23.18.1) ─────────────────────────────────────────────
   Dark level 1's controls on a subtle tone rest between their panel (800) and
   level 0's hover (700). With nothing between them, 23.18.0 started level 1 at
   700 and pressed at 600, where the best label the ramp offers read 4.04 on
   primary. Derived from its neighbours, as 650 is.
   ────────────────────────────────────────────────────────────────────────── */
:root [data-brand="volvo"] {
  --dk-color-information-750: color-mix(in srgb, var(--dk-primitive-color-blue-700) 50%, var(--dk-primitive-color-blue-800));
}

/* ── 550, the second of Karmo's own rungs ──────────────────────────────────
   ADDED FOR THE SAME REASON AS 650 ABOVE, one step further. With the resting
   fill at 650 and hover at 600, a press on a solid panel had nowhere left to
   go: 500 is light enough that the ramp's own lightest glyph reads 2.13 on
   warning, so active was pinned to hover's fill and the press did nothing
   visible. 550 is the step that lets active move and still carry a legible
   glyph. Derived from its neighbours for the same reason 650 is.
   ────────────────────────────────────────────────────────────────────────── */
:root [data-brand="volvo"] {
  --dk-color-information-550: color-mix(in srgb, var(--dk-primitive-color-blue-500) 50%, var(--dk-primitive-color-blue-600));
}

/* -- 25, the third of Karmo's own rungs ------------------------------------
   A PRESS ON A SOLID FILL LIGHTENS, and the glyph lightens with it. Hover
   already held rung 50, the lightest the upstream ramp has, so the pressed
   glyph had nowhere lighter to go and the press was made to darken instead.
   That was wrong and was reported: on a solid panel the press should lift, not
   sink.

   Derived the way the NEUTRAL ramp already derives its own 25, which is the
   midpoint of white and rung 50: neutral-25 is #f4f5f5, neutral-50 is #e9ebeb,
   and (255+233)/2 = 244 = 0xf4 exactly. The status ramps simply never had the
   rung the neutral one does, so this adds it rather than inventing a step.
   Below the fence, in srgb, for the same reasons 650 and 550 are.
   ------------------------------------------------------------------------ */
:root [data-brand="volvo"] {
  --dk-color-information-25: color-mix(in srgb, #fff 50%, var(--dk-primitive-color-blue-50));
}

/* ════════════════════════════ drift-kit:layer tokens/alias/volvo/color/neutral.css ════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · alias/volvo/color/neutral ═══ */
:root [data-brand="volvo"] {
	--dk-color-neutral-100: var(--dk-primitive-color-stale-100);
	--dk-color-neutral-1000: var(--dk-primitive-color-stale-1000);
	--dk-color-neutral-1100: var(--dk-primitive-color-stale-1100);
	--dk-color-neutral-200: var(--dk-primitive-color-stale-200);
	--dk-color-neutral-25: var(--dk-primitive-color-stale-25);
	--dk-color-neutral-300: var(--dk-primitive-color-stale-300);
	--dk-color-neutral-400: var(--dk-primitive-color-stale-400);
	--dk-color-neutral-50: var(--dk-primitive-color-stale-50);
	--dk-color-neutral-500: var(--dk-primitive-color-stale-500);
	--dk-color-neutral-600: var(--dk-primitive-color-stale-600);
	--dk-color-neutral-700: var(--dk-primitive-color-stale-700);
	--dk-color-neutral-800: var(--dk-primitive-color-stale-800);
	--dk-color-neutral-900: var(--dk-primitive-color-stale-900);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */

/* ── Half rungs, 850 to 450 (29 Oct) ──────────────────────────────────────
   THE RAISED VARIANTS' BORDERS STEP HALF A RUNG IN DARK. Julio asked for them
   a tone more subtle; light has the rung to step to, dark does not: 900 is the
   level-2 surface itself and nearly level 1's, so a border there vanishes.
   Derived from the neighbours, as error-650 is, and declared below the fence
   so a refresh keeps them.
   ────────────────────────────────────────────────────────────────────────── */
:root [data-brand="volvo"] {
  --dk-color-neutral-850: color-mix(in srgb, var(--dk-primitive-color-stale-800) 50%, var(--dk-primitive-color-stale-900));
  --dk-color-neutral-750: color-mix(in srgb, var(--dk-primitive-color-stale-700) 50%, var(--dk-primitive-color-stale-800));
  --dk-color-neutral-650: color-mix(in srgb, var(--dk-primitive-color-stale-600) 50%, var(--dk-primitive-color-stale-700));
  --dk-color-neutral-550: color-mix(in srgb, var(--dk-primitive-color-stale-500) 50%, var(--dk-primitive-color-stale-600));
  --dk-color-neutral-450: color-mix(in srgb, var(--dk-primitive-color-stale-400) 50%, var(--dk-primitive-color-stale-500));
}

/* ════════════════════════════ drift-kit:layer tokens/alias/volvo/color/primary.css ════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · alias/volvo/color/primary ═══ */
:root [data-brand="volvo"] {
	--dk-color-primary-100: var(--dk-primitive-color-ocean-100);
	--dk-color-primary-200: var(--dk-primitive-color-ocean-200);
	--dk-color-primary-300: var(--dk-primitive-color-ocean-300);
	--dk-color-primary-400: var(--dk-primitive-color-ocean-400);
	--dk-color-primary-50: var(--dk-primitive-color-ocean-50);
	--dk-color-primary-500: var(--dk-primitive-color-ocean-500);
	--dk-color-primary-600: var(--dk-primitive-color-ocean-600);
	--dk-color-primary-700: var(--dk-primitive-color-ocean-700);
	--dk-color-primary-800: var(--dk-primitive-color-ocean-800);
	--dk-color-primary-850: var(--dk-primitive-color-ocean-850);
	--dk-color-primary-900: var(--dk-primitive-color-ocean-900);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */

/* ── 650, Karmo's own rung ─────────────────────────────────────────────────
   THE UPSTREAM RAMP HAS NO STEP BETWEEN 600 AND 700, and a solid status fill
   sits at 700. That leaves a control on a solid panel exactly one usable rung:
   600 for its resting fill, and nothing quieter to rest on or nearer to step to.
   Every attempt to give it a hover state either pushed the fill to 500, where
   the lightest glyph the ramp offers reads 2.13 against it on warning and 2.54
   on primary, or left hover doing nothing at all. Both were reported.

   Derived rather than picked, so it stays in step if upstream retunes either
   neighbour, and declared BELOW the fence because the ramp itself is upstream's
   and a refresh would take an edit there away. srgb rather than oklab because
   the gates' colour parsing reads color(srgb ...) and nothing further.
   ────────────────────────────────────────────────────────────────────────── */
:root [data-brand="volvo"] {
  --dk-color-primary-650: color-mix(in srgb, var(--dk-primitive-color-ocean-600) 50%, var(--dk-primitive-color-ocean-700));
}

/* ── 750 (3 Nov 2026, 23.18.1) ─────────────────────────────────────────────
   Dark level 1's controls on a subtle tone rest between their panel (800) and
   level 0's hover (700). With nothing between them, 23.18.0 started level 1 at
   700 and pressed at 600, where the best label the ramp offers read 4.04 on
   primary. Derived from its neighbours, as 650 is.
   ────────────────────────────────────────────────────────────────────────── */
:root [data-brand="volvo"] {
  --dk-color-primary-750: color-mix(in srgb, var(--dk-primitive-color-ocean-700) 50%, var(--dk-primitive-color-ocean-800));
}

/* ── 550, the second of Karmo's own rungs ──────────────────────────────────
   ADDED FOR THE SAME REASON AS 650 ABOVE, one step further. With the resting
   fill at 650 and hover at 600, a press on a solid panel had nowhere left to
   go: 500 is light enough that the ramp's own lightest glyph reads 2.13 on
   warning, so active was pinned to hover's fill and the press did nothing
   visible. 550 is the step that lets active move and still carry a legible
   glyph. Derived from its neighbours for the same reason 650 is.
   ────────────────────────────────────────────────────────────────────────── */
:root [data-brand="volvo"] {
  --dk-color-primary-550: color-mix(in srgb, var(--dk-primitive-color-jade-500) 50%, var(--dk-primitive-color-jade-600));
}

/* -- 25, the third of Karmo's own rungs ------------------------------------
   A PRESS ON A SOLID FILL LIGHTENS, and the glyph lightens with it. Hover
   already held rung 50, the lightest the upstream ramp has, so the pressed
   glyph had nowhere lighter to go and the press was made to darken instead.
   That was wrong and was reported: on a solid panel the press should lift, not
   sink.

   Derived the way the NEUTRAL ramp already derives its own 25, which is the
   midpoint of white and rung 50: neutral-25 is #f4f5f5, neutral-50 is #e9ebeb,
   and (255+233)/2 = 244 = 0xf4 exactly. The status ramps simply never had the
   rung the neutral one does, so this adds it rather than inventing a step.
   Below the fence, in srgb, for the same reasons 650 and 550 are.
   ------------------------------------------------------------------------ */
:root [data-brand="volvo"] {
  --dk-color-primary-25: color-mix(in srgb, #fff 50%, var(--dk-primitive-color-jade-50));
}

/* ══════════════════════════ drift-kit:layer tokens/alias/volvo/color/secondary.css ══════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · alias/volvo/color/secondary ═══ */
:root [data-brand="volvo"] {
	--dk-color-secondary-100: var(--dk-primitive-color-ocean-100);
	--dk-color-secondary-200: var(--dk-primitive-color-ocean-200);
	--dk-color-secondary-300: var(--dk-primitive-color-ocean-300);
	--dk-color-secondary-400: var(--dk-primitive-color-ocean-400);
	--dk-color-secondary-50: var(--dk-primitive-color-ocean-50);
	--dk-color-secondary-500: var(--dk-primitive-color-ocean-500);
	--dk-color-secondary-600: var(--dk-primitive-color-ocean-600);
	--dk-color-secondary-700: var(--dk-primitive-color-ocean-700);
	--dk-color-secondary-800: var(--dk-primitive-color-ocean-800);
	--dk-color-secondary-850: var(--dk-primitive-color-ocean-850);
	--dk-color-secondary-900: var(--dk-primitive-color-ocean-900);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ════════════════════════════ drift-kit:layer tokens/alias/volvo/color/success.css ════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · alias/volvo/color/success ═══ */
:root [data-brand="volvo"] {
	--dk-color-success-100: var(--dk-primitive-color-green-100);
	--dk-color-success-200: var(--dk-primitive-color-green-200);
	--dk-color-success-300: var(--dk-primitive-color-green-300);
	--dk-color-success-400: var(--dk-primitive-color-green-400);
	--dk-color-success-50: var(--dk-primitive-color-green-50);
	--dk-color-success-500: var(--dk-primitive-color-green-500);
	--dk-color-success-600: var(--dk-primitive-color-green-600);
	--dk-color-success-700: var(--dk-primitive-color-green-700);
	--dk-color-success-800: var(--dk-primitive-color-green-800);
	--dk-color-success-900: var(--dk-primitive-color-green-900);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ════════════════════════════ drift-kit:layer tokens/alias/volvo/color/warning.css ════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · alias/volvo/color/warning ═══ */
:root [data-brand="volvo"] {
	--dk-color-warning-100: var(--dk-primitive-color-orange-100);
	--dk-color-warning-200: var(--dk-primitive-color-orange-200);
	--dk-color-warning-300: var(--dk-primitive-color-orange-300);
	--dk-color-warning-400: var(--dk-primitive-color-orange-400);
	--dk-color-warning-50: var(--dk-primitive-color-orange-50);
	--dk-color-warning-500: var(--dk-primitive-color-orange-500);
	--dk-color-warning-600: var(--dk-primitive-color-orange-600);
	--dk-color-warning-700: var(--dk-primitive-color-orange-700);
	--dk-color-warning-800: var(--dk-primitive-color-orange-800);
	--dk-color-warning-900: var(--dk-primitive-color-orange-900);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */

/* ── 650, Karmo's own rung ─────────────────────────────────────────────────
   THE UPSTREAM RAMP HAS NO STEP BETWEEN 600 AND 700, and a solid status fill
   sits at 700. That leaves a control on a solid panel exactly one usable rung:
   600 for its resting fill, and nothing quieter to rest on or nearer to step to.
   Every attempt to give it a hover state either pushed the fill to 500, where
   the lightest glyph the ramp offers reads 2.13 against it on warning and 2.54
   on primary, or left hover doing nothing at all. Both were reported.

   Derived rather than picked, so it stays in step if upstream retunes either
   neighbour, and declared BELOW the fence because the ramp itself is upstream's
   and a refresh would take an edit there away. srgb rather than oklab because
   the gates' colour parsing reads color(srgb ...) and nothing further.
   ────────────────────────────────────────────────────────────────────────── */
:root [data-brand="volvo"] {
  --dk-color-warning-650: color-mix(in srgb, var(--dk-primitive-color-orange-600) 50%, var(--dk-primitive-color-orange-700));
}

/* ── 750 (3 Nov 2026, 23.18.1) ─────────────────────────────────────────────
   Dark level 1's controls on a subtle tone rest between their panel (800) and
   level 0's hover (700). With nothing between them, 23.18.0 started level 1 at
   700 and pressed at 600, where the best label the ramp offers read 4.04 on
   primary. Derived from its neighbours, as 650 is.
   ────────────────────────────────────────────────────────────────────────── */
:root [data-brand="volvo"] {
  --dk-color-warning-750: color-mix(in srgb, var(--dk-primitive-color-orange-700) 50%, var(--dk-primitive-color-orange-800));
}

/* ── 550, the second of Karmo's own rungs ──────────────────────────────────
   ADDED FOR THE SAME REASON AS 650 ABOVE, one step further. With the resting
   fill at 650 and hover at 600, a press on a solid panel had nowhere left to
   go: 500 is light enough that the ramp's own lightest glyph reads 2.13 on
   warning, so active was pinned to hover's fill and the press did nothing
   visible. 550 is the step that lets active move and still carry a legible
   glyph. Derived from its neighbours for the same reason 650 is.
   ────────────────────────────────────────────────────────────────────────── */
:root [data-brand="volvo"] {
  --dk-color-warning-550: color-mix(in srgb, var(--dk-primitive-color-orange-500) 50%, var(--dk-primitive-color-orange-600));
}

/* -- 25, the third of Karmo's own rungs ------------------------------------
   A PRESS ON A SOLID FILL LIGHTENS, and the glyph lightens with it. Hover
   already held rung 50, the lightest the upstream ramp has, so the pressed
   glyph had nowhere lighter to go and the press was made to darken instead.
   That was wrong and was reported: on a solid panel the press should lift, not
   sink.

   Derived the way the NEUTRAL ramp already derives its own 25, which is the
   midpoint of white and rung 50: neutral-25 is #f4f5f5, neutral-50 is #e9ebeb,
   and (255+233)/2 = 244 = 0xf4 exactly. The status ramps simply never had the
   rung the neutral one does, so this adds it rather than inventing a step.
   Below the fence, in srgb, for the same reasons 650 and 550 are.
   ------------------------------------------------------------------------ */
:root [data-brand="volvo"] {
  --dk-color-warning-25: color-mix(in srgb, #fff 50%, var(--dk-primitive-color-orange-50));
}

/* ════════════════════════════════ drift-kit:layer tokens/alias/volvo/font/body.css ════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · alias/volvo/font/body ═══ */
:root [data-brand="volvo"] {
	--dk-font-body-lg-text-size: var(--dk-responsive-font-body-lg-text-size);
	--dk-font-body-lg-line-height: var(--dk-responsive-font-body-lg-line-height);
	--dk-font-body-lg-paragraph-spacing: var(--dk-responsive-font-body-lg-paragraph-spacing);
	--dk-font-body-md-text-size: var(--dk-responsive-font-body-md-text-size);
	--dk-font-body-md-line-height: var(--dk-responsive-font-body-md-line-height);
	--dk-font-body-md-paragraph-spacing: var(--dk-responsive-font-body-md-paragraph-spacing);
	--dk-font-body-sm-text-size: var(--dk-responsive-font-body-sm-text-size);
	--dk-font-body-sm-line-height: var(--dk-responsive-font-body-sm-line-height);
	--dk-font-body-sm-paragraph-spacing: var(--dk-responsive-font-body-sm-paragraph-spacing);
	--dk-font-body-xsm-text-size: var(--dk-responsive-font-body-xsm-text-size);
	--dk-font-body-xsm-line-height: var(--dk-responsive-font-body-xsm-line-height);
	--dk-font-body-xsm-paragraph-spacing: var(--dk-responsive-font-body-xsm-paragraph-spacing);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ══════════════════════════════ drift-kit:layer tokens/alias/volvo/font/family.css ══════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · alias/volvo/font/family ═══ */
:root [data-brand="volvo"] {
	--dk-font-family-primary: var(--dk-primitive-font-family-inter);
	--dk-font-family-secondary: var(--dk-primitive-font-family-syne);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ═════════════════════════════ drift-kit:layer tokens/alias/volvo/font/heading.css ═════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · alias/volvo/font/heading ═══ */
:root [data-brand="volvo"] {
	--dk-font-heading-h1-text-size: var(--dk-responsive-font-headings-h1-text-size);
	--dk-font-heading-h1-line-height: var(--dk-responsive-font-headings-h1-line-height);
	--dk-font-heading-h1-paragraph-spacing: var(--dk-responsive-font-headings-h1-paragraph-spacing);
	--dk-font-heading-h2-text-size: var(--dk-responsive-font-headings-h2-text-size);
	--dk-font-heading-h2-line-height: var(--dk-responsive-font-headings-h2-line-height);
	--dk-font-heading-h2-paragraph-spacing: var(--dk-responsive-font-headings-h2-paragraph-spacing);
	--dk-font-heading-h3-text-size: var(--dk-responsive-font-headings-h3-text-size);
	--dk-font-heading-h3-line-height: var(--dk-responsive-font-headings-h3-line-height);
	--dk-font-heading-h3-paragraph-spacing: var(--dk-responsive-font-headings-h3-paragraph-spacing);
	--dk-font-heading-h4-text-size: var(--dk-responsive-font-headings-h4-text-size);
	--dk-font-heading-h4-line-height: var(--dk-responsive-font-headings-h4-line-height);
	--dk-font-heading-h4-paragraph-spacing: var(--dk-responsive-font-headings-h4-paragraph-spacing);
	--dk-font-heading-h5-text-size: var(--dk-responsive-font-headings-h5-text-size);
	--dk-font-heading-h5-line-height: var(--dk-responsive-font-headings-h5-line-height);
	--dk-font-heading-h5-paragraph-spacing: var(--dk-responsive-font-headings-h5-paragraph-spacing);
	--dk-font-heading-h6-text-size: var(--dk-responsive-font-headings-h6-text-size);
	--dk-font-heading-h6-line-height: var(--dk-responsive-font-headings-h6-line-height);
	--dk-font-heading-h6-paragraph-spacing: var(--dk-responsive-font-headings-h6-paragraph-spacing);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ════════════════════════════ drift-kit:layer tokens/alias/volvo/font/overline.css ════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · alias/volvo/font/overline ═══ */
:root [data-brand="volvo"] {
	--dk-font-overline-lg-text-size: var(--dk-responsive-font-overline-lg-text-size);
	--dk-font-overline-lg-line-height: var(--dk-responsive-font-overline-lg-line-height);
	--dk-font-overline-lg-paragraph-spacing: var(--dk-responsive-font-overline-lg-paragraph-spacing);
	--dk-font-overline-md-text-size: var(--dk-responsive-font-overline-md-text-size);
	--dk-font-overline-md-line-height: var(--dk-responsive-font-overline-md-line-height);
	--dk-font-overline-md-paragraph-spacing: var(--dk-responsive-font-overline-md-paragraph-spacing);
	--dk-font-overline-sm-text-size: var(--dk-responsive-font-overline-sm-text-size);
	--dk-font-overline-sm-line-height: var(--dk-responsive-font-overline-sm-line-height);
	--dk-font-overline-sm-paragraph-spacing: var(--dk-responsive-font-overline-sm-paragraph-spacing);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ═══════════════════════════════ drift-kit:layer tokens/alias/volvo/font/input.css ═══════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · alias/volvo/font/input ═══ */
:root [data-brand="volvo"] {
    --dk-font-input-lg-text-size: var(--dk-responsive-font-input-lg-text-size);
    --dk-font-input-lg-line-height: var(--dk-responsive-font-input-lg-line-height);
    --dk-font-input-lg-paragraph-spacing: var(--dk-responsive-font-input-lg-paragraph-spacing);
    --dk-font-input-md-text-size: var(--dk-responsive-font-input-md-text-size);
    --dk-font-input-md-line-height: var(--dk-responsive-font-input-md-line-height);
    --dk-font-input-md-paragraph-spacing: var(--dk-responsive-font-input-md-paragraph-spacing);
    --dk-font-input-sm-text-size: var(--dk-responsive-font-input-sm-text-size);
    --dk-font-input-sm-line-height: var(--dk-responsive-font-input-sm-line-height);
    --dk-font-input-sm-paragraph-spacing: var(--dk-responsive-font-input-sm-paragraph-spacing);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ════════════════════════════ drift-kit:layer tokens/alias/volvo/border/radius.css ════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · alias/volvo/border/radius ═══ */
:root [data-brand="volvo"] {
	--dk-border-radius-0: var(--dk-dynamic-border-radius-0);
	--dk-border-radius-25: var(--dk-dynamic-border-radius-25);
	--dk-border-radius-50: var(--dk-dynamic-border-radius-50);
	--dk-border-radius-75: var(--dk-dynamic-border-radius-75);	
	--dk-border-radius-100: var(--dk-dynamic-border-radius-100);
	--dk-border-radius-125: var(--dk-dynamic-border-radius-125);
	--dk-border-radius-150: var(--dk-dynamic-border-radius-150);
	--dk-border-radius-200: var(--dk-dynamic-border-radius-200);
	--dk-border-radius-300: var(--dk-dynamic-border-radius-300);
	--dk-border-radius-400: var(--dk-dynamic-border-radius-400);
	--dk-border-radius-500: var(--dk-dynamic-border-radius-500);
	--dk-border-radius-600: var(--dk-dynamic-border-radius-600);
	--dk-border-radius-round: var(--dk-dynamic-border-radius-round);
	--dk-border-radius-round-fixed: 624.9375rem;
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */

/* The control radius (2 Nov), read by single-line controls; see
   tokens/dynamic/border/radius.css. */
:root [data-brand="volvo"] {
	--dk-border-radius-control-50: var(--dk-dynamic-border-radius-control-50);
	--dk-border-radius-control-100: var(--dk-dynamic-border-radius-control-100);
	--dk-border-radius-control-125: var(--dk-dynamic-border-radius-control-125);
	--dk-border-radius-control-150: var(--dk-dynamic-border-radius-control-150);
	--dk-border-radius-control-200: var(--dk-dynamic-border-radius-control-200);
	--dk-border-radius-control-300: var(--dk-dynamic-border-radius-control-300);
	--dk-border-radius-control-400: var(--dk-dynamic-border-radius-control-400);
}

/* Nested tiers (2 Nov): the same names again on any element inside the brand
   that sets its own corners, so they resolve against that element's
   rungs instead of the brand element's. Without this a tier set below the
   brand element reached nothing. test/shape-tiers.test.js keeps the list
   equal to the brand block's. */
:root [data-brand="volvo"] [data-border-radius] {
	--dk-border-radius-0: var(--dk-dynamic-border-radius-0);
	--dk-border-radius-25: var(--dk-dynamic-border-radius-25);
	--dk-border-radius-50: var(--dk-dynamic-border-radius-50);
	--dk-border-radius-75: var(--dk-dynamic-border-radius-75);
	--dk-border-radius-100: var(--dk-dynamic-border-radius-100);
	--dk-border-radius-125: var(--dk-dynamic-border-radius-125);
	--dk-border-radius-150: var(--dk-dynamic-border-radius-150);
	--dk-border-radius-200: var(--dk-dynamic-border-radius-200);
	--dk-border-radius-300: var(--dk-dynamic-border-radius-300);
	--dk-border-radius-400: var(--dk-dynamic-border-radius-400);
	--dk-border-radius-500: var(--dk-dynamic-border-radius-500);
	--dk-border-radius-600: var(--dk-dynamic-border-radius-600);
	--dk-border-radius-round: var(--dk-dynamic-border-radius-round);
	--dk-border-radius-round-fixed: 624.9375rem;
	--dk-border-radius-control-50: var(--dk-dynamic-border-radius-control-50);
	--dk-border-radius-control-100: var(--dk-dynamic-border-radius-control-100);
	--dk-border-radius-control-125: var(--dk-dynamic-border-radius-control-125);
	--dk-border-radius-control-150: var(--dk-dynamic-border-radius-control-150);
	--dk-border-radius-control-200: var(--dk-dynamic-border-radius-control-200);
	--dk-border-radius-control-300: var(--dk-dynamic-border-radius-control-300);
	--dk-border-radius-control-400: var(--dk-dynamic-border-radius-control-400);
}

/* ═════════════════════════════ drift-kit:layer tokens/alias/volvo/border/width.css ═════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · alias/volvo/border/width ═══ */
:root [data-brand="volvo"] {
	--dk-border-width-0: var(--dk-dynamic-border-width-0);
	--dk-border-width-25: var(--dk-dynamic-border-width-25);
	--dk-border-width-50: var(--dk-dynamic-border-width-50);
	--dk-border-width-100: var(--dk-dynamic-border-width-100);
	--dk-border-width-150: var(--dk-dynamic-border-width-150);
	--dk-border-width-200: var(--dk-dynamic-border-width-200);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */

/* The separator width (2 Nov); see tokens/dynamic/border/width.css. */
:root [data-brand="volvo"] {
	--dk-border-width-separator-25: var(--dk-dynamic-border-width-separator-25);
	--dk-border-width-separator-50: var(--dk-dynamic-border-width-separator-50);
}

/* Nested tiers (2 Nov): the same names again on any element inside the brand
   that sets its own border width, so they resolve against that element's
   rungs instead of the brand element's. Without this a tier set below the
   brand element reached nothing. test/shape-tiers.test.js keeps the list
   equal to the brand block's. */
:root [data-brand="volvo"] [data-border-width] {
	--dk-border-width-0: var(--dk-dynamic-border-width-0);
	--dk-border-width-25: var(--dk-dynamic-border-width-25);
	--dk-border-width-50: var(--dk-dynamic-border-width-50);
	--dk-border-width-100: var(--dk-dynamic-border-width-100);
	--dk-border-width-150: var(--dk-dynamic-border-width-150);
	--dk-border-width-200: var(--dk-dynamic-border-width-200);
	--dk-border-width-separator-25: var(--dk-dynamic-border-width-separator-25);
	--dk-border-width-separator-50: var(--dk-dynamic-border-width-separator-50);
}

/* ══════════════════════════════════ drift-kit:layer tokens/alias/volvo/spacing.css ══════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · alias/volvo/spacing ═══ */
:root [data-brand="volvo"] {
	--dk-spacing-0-25: var(--dk-dynamic-spacing-0-25);
	--dk-spacing-0-5: var(--dk-dynamic-spacing-0-5);
	--dk-spacing-1: var(--dk-dynamic-spacing-1);
	--dk-spacing-1-5: var(--dk-dynamic-spacing-1-5);
	--dk-spacing-2: var(--dk-dynamic-spacing-2);
	--dk-spacing-2-5: var(--dk-dynamic-spacing-2-5);
	--dk-spacing-3: var(--dk-dynamic-spacing-3);
	--dk-spacing-3-5: var(--dk-dynamic-spacing-3-5);
	--dk-spacing-4: var(--dk-dynamic-spacing-4);
	--dk-spacing-4-5: var(--dk-dynamic-spacing-4-5);
	--dk-spacing-5: var(--dk-dynamic-spacing-5);
	--dk-spacing-5-5: var(--dk-dynamic-spacing-5-5);
	--dk-spacing-6: var(--dk-dynamic-spacing-6);
	--dk-spacing-7: var(--dk-dynamic-spacing-7);
	--dk-spacing-8: var(--dk-dynamic-spacing-8);
	--dk-spacing-9: var(--dk-dynamic-spacing-9);
	--dk-spacing-10: var(--dk-dynamic-spacing-10);
	--dk-spacing-11: var(--dk-dynamic-spacing-11);
	--dk-spacing-12: var(--dk-dynamic-spacing-12);
	--dk-spacing-14: var(--dk-dynamic-spacing-14);
	--dk-spacing-16: var(--dk-dynamic-spacing-16);
	--dk-spacing-20: var(--dk-dynamic-spacing-20);
	--dk-spacing-24: var(--dk-dynamic-spacing-24);
	--dk-spacing-28: var(--dk-dynamic-spacing-28);
	--dk-spacing-32: var(--dk-dynamic-spacing-32);
	--dk-spacing-40: var(--dk-dynamic-spacing-40);
	--dk-spacing-48: var(--dk-dynamic-spacing-48);
	--dk-spacing-56: var(--dk-dynamic-spacing-56);
	--dk-spacing-64: var(--dk-dynamic-spacing-64);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* Nested tiers (2 Nov): the same names again on any element inside the brand
   that sets its own density, so they resolve against that element's
   rungs instead of the brand element's. Without this a tier set below the
   brand element reached nothing. test/shape-tiers.test.js keeps the list
   equal to the brand block's. */
:root [data-brand="volvo"] [data-density] {
	--dk-spacing-0-25: var(--dk-dynamic-spacing-0-25);
	--dk-spacing-0-5: var(--dk-dynamic-spacing-0-5);
	--dk-spacing-1: var(--dk-dynamic-spacing-1);
	--dk-spacing-1-5: var(--dk-dynamic-spacing-1-5);
	--dk-spacing-2: var(--dk-dynamic-spacing-2);
	--dk-spacing-2-5: var(--dk-dynamic-spacing-2-5);
	--dk-spacing-3: var(--dk-dynamic-spacing-3);
	--dk-spacing-3-5: var(--dk-dynamic-spacing-3-5);
	--dk-spacing-4: var(--dk-dynamic-spacing-4);
	--dk-spacing-4-5: var(--dk-dynamic-spacing-4-5);
	--dk-spacing-5: var(--dk-dynamic-spacing-5);
	--dk-spacing-5-5: var(--dk-dynamic-spacing-5-5);
	--dk-spacing-6: var(--dk-dynamic-spacing-6);
	--dk-spacing-7: var(--dk-dynamic-spacing-7);
	--dk-spacing-8: var(--dk-dynamic-spacing-8);
	--dk-spacing-9: var(--dk-dynamic-spacing-9);
	--dk-spacing-10: var(--dk-dynamic-spacing-10);
	--dk-spacing-11: var(--dk-dynamic-spacing-11);
	--dk-spacing-12: var(--dk-dynamic-spacing-12);
	--dk-spacing-14: var(--dk-dynamic-spacing-14);
	--dk-spacing-16: var(--dk-dynamic-spacing-16);
	--dk-spacing-20: var(--dk-dynamic-spacing-20);
	--dk-spacing-24: var(--dk-dynamic-spacing-24);
	--dk-spacing-28: var(--dk-dynamic-spacing-28);
	--dk-spacing-32: var(--dk-dynamic-spacing-32);
	--dk-spacing-40: var(--dk-dynamic-spacing-40);
	--dk-spacing-48: var(--dk-dynamic-spacing-48);
	--dk-spacing-56: var(--dk-dynamic-spacing-56);
	--dk-spacing-64: var(--dk-dynamic-spacing-64);
}

/* ════════════════════════════ drift-kit:layer tokens/alias/karmo/spacing-fixed.css ════════════════════════════ */
/* ───────────────────────────────────────────────────────────
   COLLECTION: Alias
   GROUP: Spacing, FIXED (8 Nov 2026)
   ───────────────────────────────────────────────────────────
   --dk-spacing-<rung> is responsive: it steps down on a tablet and a phone
   (tokens/responsive/spacing.css). Most layout wants that. Some does not:
   a gap sized to sit beside a fixed part (a code field's cells, a fixed
   type rung) has to keep its desktop value on every device, the way the
   fixed body type does (font/body-fixed.css).

   --dk-spacing-fixed-<rung> is that: the same rungs as --dk-spacing-*, each
   the rung's desktop value (the primitive the 1025px block maps it to) at
   every width. It does not follow data-density either: a fixed rung is a
   number, not a step on a ramp. test/spacing-fixed.test.js keeps the list
   equal to the brand's spacing rungs and each value equal to the desktop one.
   ─────────────────────────────────────────────────────────── */
:root [data-brand="karmo"] {
	--dk-spacing-fixed-0-25: var(--dk-primitive-scale-0-25);
	--dk-spacing-fixed-0-5: var(--dk-primitive-scale-0-5);
	--dk-spacing-fixed-1: var(--dk-primitive-scale-1);
	--dk-spacing-fixed-1-5: var(--dk-primitive-scale-1-5);
	--dk-spacing-fixed-2: var(--dk-primitive-scale-2);
	--dk-spacing-fixed-2-5: var(--dk-primitive-scale-2-5);
	--dk-spacing-fixed-3: var(--dk-primitive-scale-3);
	--dk-spacing-fixed-3-5: var(--dk-primitive-scale-3-5);
	--dk-spacing-fixed-4: var(--dk-primitive-scale-4);
	--dk-spacing-fixed-4-5: var(--dk-primitive-scale-4-5);
	--dk-spacing-fixed-5: var(--dk-primitive-scale-5);
	--dk-spacing-fixed-5-5: var(--dk-primitive-scale-5-5);
	--dk-spacing-fixed-6: var(--dk-primitive-scale-6);
	--dk-spacing-fixed-7: var(--dk-primitive-scale-7);
	--dk-spacing-fixed-8: var(--dk-primitive-scale-8);
	--dk-spacing-fixed-9: var(--dk-primitive-scale-9);
	--dk-spacing-fixed-10: var(--dk-primitive-scale-10);
	--dk-spacing-fixed-11: var(--dk-primitive-scale-11);
	--dk-spacing-fixed-12: var(--dk-primitive-scale-12);
	--dk-spacing-fixed-14: var(--dk-primitive-scale-14);
	--dk-spacing-fixed-16: var(--dk-primitive-scale-16);
	--dk-spacing-fixed-20: var(--dk-primitive-scale-20);
	--dk-spacing-fixed-24: var(--dk-primitive-scale-24);
	--dk-spacing-fixed-28: var(--dk-primitive-scale-28);
	--dk-spacing-fixed-32: var(--dk-primitive-scale-32);
	--dk-spacing-fixed-40: var(--dk-primitive-scale-40);
	--dk-spacing-fixed-48: var(--dk-primitive-scale-48);
	--dk-spacing-fixed-56: var(--dk-primitive-scale-56);
	--dk-spacing-fixed-64: var(--dk-primitive-scale-64);
}

/* ════════════════════════════ drift-kit:layer tokens/alias/volvo/spacing-fixed.css ════════════════════════════ */
/* ───────────────────────────────────────────────────────────
   COLLECTION: Alias
   GROUP: Spacing, FIXED (8 Nov 2026)
   ───────────────────────────────────────────────────────────
   --dk-spacing-<rung> is responsive: it steps down on a tablet and a phone
   (tokens/responsive/spacing.css). Most layout wants that. Some does not:
   a gap sized to sit beside a fixed part (a code field's cells, a fixed
   type rung) has to keep its desktop value on every device, the way the
   fixed body type does (font/body-fixed.css).

   --dk-spacing-fixed-<rung> is that: the same rungs as --dk-spacing-*, each
   the rung's desktop value (the primitive the 1025px block maps it to) at
   every width. It does not follow data-density either: a fixed rung is a
   number, not a step on a ramp. test/spacing-fixed.test.js keeps the list
   equal to the brand's spacing rungs and each value equal to the desktop one.
   ─────────────────────────────────────────────────────────── */
:root [data-brand="volvo"] {
	--dk-spacing-fixed-0-25: var(--dk-primitive-scale-0-25);
	--dk-spacing-fixed-0-5: var(--dk-primitive-scale-0-5);
	--dk-spacing-fixed-1: var(--dk-primitive-scale-1);
	--dk-spacing-fixed-1-5: var(--dk-primitive-scale-1-5);
	--dk-spacing-fixed-2: var(--dk-primitive-scale-2);
	--dk-spacing-fixed-2-5: var(--dk-primitive-scale-2-5);
	--dk-spacing-fixed-3: var(--dk-primitive-scale-3);
	--dk-spacing-fixed-3-5: var(--dk-primitive-scale-3-5);
	--dk-spacing-fixed-4: var(--dk-primitive-scale-4);
	--dk-spacing-fixed-4-5: var(--dk-primitive-scale-4-5);
	--dk-spacing-fixed-5: var(--dk-primitive-scale-5);
	--dk-spacing-fixed-5-5: var(--dk-primitive-scale-5-5);
	--dk-spacing-fixed-6: var(--dk-primitive-scale-6);
	--dk-spacing-fixed-7: var(--dk-primitive-scale-7);
	--dk-spacing-fixed-8: var(--dk-primitive-scale-8);
	--dk-spacing-fixed-9: var(--dk-primitive-scale-9);
	--dk-spacing-fixed-10: var(--dk-primitive-scale-10);
	--dk-spacing-fixed-11: var(--dk-primitive-scale-11);
	--dk-spacing-fixed-12: var(--dk-primitive-scale-12);
	--dk-spacing-fixed-14: var(--dk-primitive-scale-14);
	--dk-spacing-fixed-16: var(--dk-primitive-scale-16);
	--dk-spacing-fixed-20: var(--dk-primitive-scale-20);
	--dk-spacing-fixed-24: var(--dk-primitive-scale-24);
	--dk-spacing-fixed-28: var(--dk-primitive-scale-28);
	--dk-spacing-fixed-32: var(--dk-primitive-scale-32);
	--dk-spacing-fixed-40: var(--dk-primitive-scale-40);
	--dk-spacing-fixed-48: var(--dk-primitive-scale-48);
	--dk-spacing-fixed-56: var(--dk-primitive-scale-56);
	--dk-spacing-fixed-64: var(--dk-primitive-scale-64);
}

/* ══════════════════════════ drift-kit:layer tokens/alias/karmo/font/body-fixed.css ══════════════════════════ */
/* ───────────────────────────────────────────────────────────
   COLLECTION: Alias
   GROUP: Font / Body — FIXED SIZES (Karmo override, 2026-09-08)
   ───────────────────────────────────────────────────────────
   Upstream aliases --font-body-* onto the responsive layer, so body copy
   shrinks with the viewport: md 16 → 15 → 14, xsm 12 → 11 → 10 on a phone.
   That is backwards for reading text — a phone is held closer, iOS zooms any
   input under 16px, and 10px sits under the legibility floor — and every
   system we benchmark (Material 3, Polaris, Atlassian, Primer, Apple HIG)
   holds body sizes constant and scales DISPLAY type instead. Karmo decision
   (8 Sep, spec C3): body is fixed at the desktop values; headings keep their
   responsive ramp; the -responsive- tokens stay available for anything that
   explicitly wants them.

   Consumers that change with this: Button labels, Input, Select, Checkbox
   labels, Toast, dk-component-body, and the Forge chrome — all stop shrinking.

   PLACEMENT: after the Volvo alias files (manifest), not in the Karmo region
   of alias/karmo/font/body.css — check:placement refuses a Karmo override that
   a later upstream fence (volvo/font/body.css) re-declares at equal
   specificity, and it is right to. Selector matches upstream's exactly, so
   this wins on source order alone; Volvo is untouched.

   Values reference the scale primitives, never raw rem:
     lg  20/28  --dk-primitive-scale-5   / --dk-primitive-scale-7
     md  16/24  --dk-primitive-scale-4   / --dk-primitive-scale-6
     sm  14/20  --dk-primitive-scale-3-5 / --dk-primitive-scale-5
     xsm 12/18  --dk-primitive-scale-3   / --dk-primitive-scale-4-5
   ─────────────────────────────────────────────────────────── */
:root [data-brand="karmo"] {
  --dk-font-body-lg-text-size: var(--dk-primitive-scale-5);
  --dk-font-body-lg-line-height: var(--dk-primitive-scale-7);
  --dk-font-body-lg-paragraph-spacing: var(--dk-primitive-scale-7);
  --dk-font-body-md-text-size: var(--dk-primitive-scale-4);
  --dk-font-body-md-line-height: var(--dk-primitive-scale-6);
  --dk-font-body-md-paragraph-spacing: var(--dk-primitive-scale-6);
  --dk-font-body-sm-text-size: var(--dk-primitive-scale-3-5);
  --dk-font-body-sm-line-height: var(--dk-primitive-scale-5);
  --dk-font-body-sm-paragraph-spacing: var(--dk-primitive-scale-5);
  --dk-font-body-xsm-text-size: var(--dk-primitive-scale-3);
  --dk-font-body-xsm-line-height: var(--dk-primitive-scale-4-5);
  --dk-font-body-xsm-paragraph-spacing: var(--dk-primitive-scale-4-5);
}

/* ══════════════════════ drift-kit:layer tokens/alias/karmo/font/overline-fixed.css ══════════════════════ */
/* ───────────────────────────────────────────────────────────
   COLLECTION: Alias
   GROUP: Font / Overline — FIXED SIZES (Karmo override, 2026-09-08)
   ───────────────────────────────────────────────────────────
   Upstream's overline rungs are responsive AND tiny: 12 / 10 / 8 px on desktop,
   11 / 9 / 8 on a phone. 8 px is under any legibility floor and 10 px caps are
   the practical minimum. Karmo decision (typography-tier spec, D5): uppercase
   labels hold 12 / 11 / 10 px at every breakpoint. Consumers: dk-component-eyebrow and
   the dk-component-input label (Overline large — stays 12, stops shrinking).
   Figma's Overline styles need the same correction — flagged for Julio.

   PLACEMENT after the Volvo alias files, for the same check:placement reason
   as body-fixed.css. 11 px has no --scale-* primitive (the scale runs
   0.625 → 0.75 rem), so md is written as 0.6875rem with this note.
     lg 12/16  --dk-primitive-scale-3   / --dk-primitive-scale-4
     md 11/16  0.6875rem   / --dk-primitive-scale-4
     sm 10/12  --dk-primitive-scale-2-5 / --dk-primitive-scale-3
   ─────────────────────────────────────────────────────────── */
:root [data-brand="karmo"] {
  --dk-font-overline-lg-text-size: var(--dk-primitive-scale-3);
  --dk-font-overline-lg-line-height: var(--dk-primitive-scale-4);
  --dk-font-overline-lg-paragraph-spacing: var(--dk-primitive-scale-4);
  --dk-font-overline-md-text-size: 0.6875rem;
  --dk-font-overline-md-line-height: var(--dk-primitive-scale-4);
  --dk-font-overline-md-paragraph-spacing: var(--dk-primitive-scale-4);
  --dk-font-overline-sm-text-size: var(--dk-primitive-scale-2-5);
  --dk-font-overline-sm-line-height: var(--dk-primitive-scale-3);
  --dk-font-overline-sm-paragraph-spacing: var(--dk-primitive-scale-3);
}

/* ═════════════════════════ drift-kit:layer tokens/alias/karmo/font/input-fixed.css ═════════════════════════ */
/* ───────────────────────────────────────────────────────────
   COLLECTION: Alias
   GROUP: Font / Input — FIXED SIZES (Karmo override, 2026-09-09)
   ───────────────────────────────────────────────────────────
   Same call as body-fixed.css and overline-fixed.css: control text does not
   shrink with the viewport. Upstream's input ramp is responsive (and its
   mobile sm line-height is a literal 0rem — a long-standing upstream bug that
   drift-extensions once had to patch); fixing at the desktop values removes
   both problems at once. Consumers: dk-component-input, dk-component-select, dk-component-switch label,
   dk-component-dropzone — all on the sm rung.
     lg 20/28  --dk-primitive-scale-5   / --dk-primitive-scale-7
     md 18/24  --dk-primitive-scale-4-5 / --dk-primitive-scale-6
     sm 16/22  --dk-primitive-scale-4   / --dk-primitive-scale-5-5
   Placed after the Volvo alias files (check:placement). */
:root [data-brand="karmo"] {
  --dk-font-input-lg-text-size: var(--dk-primitive-scale-5);
  --dk-font-input-lg-line-height: var(--dk-primitive-scale-7);
  --dk-font-input-lg-paragraph-spacing: var(--dk-primitive-scale-7);
  --dk-font-input-md-text-size: var(--dk-primitive-scale-4-5);
  --dk-font-input-md-line-height: var(--dk-primitive-scale-6);
  --dk-font-input-md-paragraph-spacing: var(--dk-primitive-scale-6);
  --dk-font-input-sm-text-size: var(--dk-primitive-scale-4);
  --dk-font-input-sm-line-height: var(--dk-primitive-scale-5-5);
  --dk-font-input-sm-paragraph-spacing: var(--dk-primitive-scale-5-5);
}

/* ══════════════════════════ drift-kit:layer tokens/alias/karmo/font/type-scale.css ══════════════════════════ */
/* ───────────────────────────────────────────────────────────
   COLLECTION: Alias
   GROUP: Font / Type scale — KARMO-OWNED (2026-09-10, 4.0.0)
   ───────────────────────────────────────────────────────────
   One scale for the three type tiers, replacing the ramps the component
   collections used to borrow. Reason it exists — the audit that opened 4.0.0
   found three faults in what we had, all of them invisible until you list the
   rungs side by side:

     1. NO DISPLAY RANGE. Hero (Syne, the display tier) read the HEADING ramp,
        so it topped out at the same 48px as an H1 and ran down to 24px. A
        display tier that cannot go bigger than the heading tier is not a tier;
        24px in a display face is a heading wearing the wrong font.
     2. A RAMP WITH A HOLE AND A BUNCH. Headings ran 48 · 38 · 28 · 26 · 24 · 20.
        The h3→h2 step is 36%, while h3→h4→h5 are 8% apart — three rungs inside
        4px that no one can tell apart, and a gap at 32–36 with nothing in it.
     3. NO 18px BODY. Copy jumped 16 → 20 with nothing between, so long-form
        reading had no rung of its own.

   THE SCALE. Every value below is a --dk-primitive-scale-* step (the 4px grid)
   with ONE noted exception, and every ramp is monotonic in both size and
   leading ratio: as the rung gets smaller the line-height ratio gets looser,
   which is the direction type wants.

   RESPONSIVENESS follows the 8 Sep decision (body-fixed.css): DISPLAY type
   scales with the viewport, READING type does not. So display and heading
   carry three breakpoints; body is fixed at every width.

   NAMING. --dk-font-scale-{tier}-{rung}-{property}. The rungs are the t-shirt
   vocabulary the component collections already spoke for body and eyebrow
   (xxlarge…xxsmall, Atlassian's heading vocabulary), so all four type
   primitives now share ONE size vocabulary. Deliberately NOT the h1…h6 names
   the heading ramp used to carry: those are an HTML outline vocabulary, and
   putting them on a purely visual axis invites the exact coupling the size
   axis exists to break — see components/heading/tokens.css § Sizes.

   The `scale` segment keeps these clear of upstream's --dk-font-body-lg /
   --dk-font-heading-h1 groups, which stay untouched and still resolve. Two
   ramps one word apart with 2px between their rungs would be a trap.
   ─────────────────────────────────────────────────────────── */

/* ── DISPLAY — Hero (Syne). Sits ABOVE the heading tier at every breakpoint.
      Desktop 72 · 64 · 56 · 48 · 40, stepping 8px, leading 1.11 → 1.20. ── */
@media (max-width: 768px) {
  :root [data-brand="karmo"] {
    --dk-font-scale-display-xxlarge-text-size: var(--dk-primitive-scale-12);
    --dk-font-scale-display-xxlarge-line-height: var(--dk-primitive-scale-14);
    --dk-font-scale-display-xlarge-text-size: var(--dk-primitive-scale-11);
    --dk-font-scale-display-xlarge-line-height: var(--dk-primitive-scale-13);
    --dk-font-scale-display-large-text-size: var(--dk-primitive-scale-10);
    --dk-font-scale-display-large-line-height: var(--dk-primitive-scale-12);
    --dk-font-scale-display-medium-text-size: var(--dk-primitive-scale-9);
    --dk-font-scale-display-medium-line-height: var(--dk-primitive-scale-11);
    --dk-font-scale-display-small-text-size: var(--dk-primitive-scale-8);
    --dk-font-scale-display-small-line-height: var(--dk-primitive-scale-10);
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  :root [data-brand="karmo"] {
    --dk-font-scale-display-xxlarge-text-size: var(--dk-primitive-scale-16);
    --dk-font-scale-display-xxlarge-line-height: var(--dk-primitive-scale-18);
    --dk-font-scale-display-xlarge-text-size: var(--dk-primitive-scale-14);
    --dk-font-scale-display-xlarge-line-height: var(--dk-primitive-scale-16);
    --dk-font-scale-display-large-text-size: var(--dk-primitive-scale-12);
    --dk-font-scale-display-large-line-height: var(--dk-primitive-scale-14);
    --dk-font-scale-display-medium-text-size: var(--dk-primitive-scale-11);
    --dk-font-scale-display-medium-line-height: var(--dk-primitive-scale-13);
    --dk-font-scale-display-small-text-size: var(--dk-primitive-scale-9);
    --dk-font-scale-display-small-line-height: var(--dk-primitive-scale-11);
  }
}
@media (min-width: 1025px) {
  :root [data-brand="karmo"] {
    --dk-font-scale-display-xxlarge-text-size: var(--dk-primitive-scale-18);
    --dk-font-scale-display-xxlarge-line-height: var(--dk-primitive-scale-20);
    --dk-font-scale-display-xlarge-text-size: var(--dk-primitive-scale-16);
    --dk-font-scale-display-xlarge-line-height: var(--dk-primitive-scale-18);
    --dk-font-scale-display-large-text-size: var(--dk-primitive-scale-14);
    --dk-font-scale-display-large-line-height: var(--dk-primitive-scale-16);
    --dk-font-scale-display-medium-text-size: var(--dk-primitive-scale-12);
    --dk-font-scale-display-medium-line-height: var(--dk-primitive-scale-14);
    --dk-font-scale-display-small-text-size: var(--dk-primitive-scale-10);
    --dk-font-scale-display-small-line-height: var(--dk-primitive-scale-12);
  }
}

/* ── HEADING — Heading (Inter). Seven rungs, 48 → 20 on desktop, every step
      at least 11% so no two rungs read the same. The old ramp's dead middle
      (28 · 26 · 24) becomes one rung and the empty 32–36 band is filled. ── */
@media (max-width: 768px) {
  :root [data-brand="karmo"] {
    --dk-font-scale-heading-xxlarge-text-size: var(--dk-primitive-scale-10);
    --dk-font-scale-heading-xxlarge-line-height: var(--dk-primitive-scale-12);
    --dk-font-scale-heading-xlarge-text-size: var(--dk-primitive-scale-8);
    --dk-font-scale-heading-xlarge-line-height: var(--dk-primitive-scale-10);
    --dk-font-scale-heading-large-text-size: var(--dk-primitive-scale-7);
    --dk-font-scale-heading-large-line-height: var(--dk-primitive-scale-9);
    --dk-font-scale-heading-medium-text-size: var(--dk-primitive-scale-6);
    --dk-font-scale-heading-medium-line-height: var(--dk-primitive-scale-8);
    --dk-font-scale-heading-small-text-size: var(--dk-primitive-scale-5-5);
    --dk-font-scale-heading-small-line-height: var(--dk-primitive-scale-7);
    --dk-font-scale-heading-xsmall-text-size: var(--dk-primitive-scale-5);
    --dk-font-scale-heading-xsmall-line-height: var(--dk-primitive-scale-7);
    --dk-font-scale-heading-xxsmall-text-size: var(--dk-primitive-scale-4-5);
    --dk-font-scale-heading-xxsmall-line-height: var(--dk-primitive-scale-6);
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  :root [data-brand="karmo"] {
    --dk-font-scale-heading-xxlarge-text-size: var(--dk-primitive-scale-11);
    --dk-font-scale-heading-xxlarge-line-height: var(--dk-primitive-scale-13);
    --dk-font-scale-heading-xlarge-text-size: var(--dk-primitive-scale-9);
    --dk-font-scale-heading-xlarge-line-height: var(--dk-primitive-scale-11);
    --dk-font-scale-heading-large-text-size: var(--dk-primitive-scale-8);
    --dk-font-scale-heading-large-line-height: var(--dk-primitive-scale-10);
    --dk-font-scale-heading-medium-text-size: var(--dk-primitive-scale-7);
    --dk-font-scale-heading-medium-line-height: var(--dk-primitive-scale-9);
    --dk-font-scale-heading-small-text-size: var(--dk-primitive-scale-6);
    --dk-font-scale-heading-small-line-height: var(--dk-primitive-scale-8);
    --dk-font-scale-heading-xsmall-text-size: var(--dk-primitive-scale-5-5);
    --dk-font-scale-heading-xsmall-line-height: var(--dk-primitive-scale-7);
    --dk-font-scale-heading-xxsmall-text-size: var(--dk-primitive-scale-5);
    --dk-font-scale-heading-xxsmall-line-height: var(--dk-primitive-scale-7);
  }
}
@media (min-width: 1025px) {
  :root [data-brand="karmo"] {
    --dk-font-scale-heading-xxlarge-text-size: var(--dk-primitive-scale-12);
    --dk-font-scale-heading-xxlarge-line-height: var(--dk-primitive-scale-14);
    --dk-font-scale-heading-xlarge-text-size: var(--dk-primitive-scale-10);
    --dk-font-scale-heading-xlarge-line-height: var(--dk-primitive-scale-12);
    --dk-font-scale-heading-large-text-size: var(--dk-primitive-scale-9);
    --dk-font-scale-heading-large-line-height: var(--dk-primitive-scale-11);
    --dk-font-scale-heading-medium-text-size: var(--dk-primitive-scale-8);
    --dk-font-scale-heading-medium-line-height: var(--dk-primitive-scale-10);
    --dk-font-scale-heading-small-text-size: var(--dk-primitive-scale-7);
    --dk-font-scale-heading-small-line-height: var(--dk-primitive-scale-9);
    --dk-font-scale-heading-xsmall-text-size: var(--dk-primitive-scale-6);
    --dk-font-scale-heading-xsmall-line-height: var(--dk-primitive-scale-8);
    --dk-font-scale-heading-xxsmall-text-size: var(--dk-primitive-scale-5);
    --dk-font-scale-heading-xxsmall-line-height: var(--dk-primitive-scale-7);
  }
}

/* ── BODY — Body text (Inter). FIXED at every breakpoint (body-fixed.css
      states the case). Adds the 18px reading rung the old ramp skipped.
      26px line-height is the one value with no --dk-primitive-scale-* step
      (the grid runs 24 → 28); 28 reads at 1.56 and 24 at 1.33, both outside
      the 1.4–1.5 band body copy wants, so it is written raw with this note —
      the same exception, for the same reason, as overline-fixed.css's 11px. */
:root [data-brand="karmo"] {
  --dk-font-scale-body-xlarge-text-size: var(--dk-primitive-scale-5);
  --dk-font-scale-body-xlarge-line-height: var(--dk-primitive-scale-7);
  --dk-font-scale-body-large-text-size: var(--dk-primitive-scale-4-5);
  --dk-font-scale-body-large-line-height: 1.625rem;
  --dk-font-scale-body-medium-text-size: var(--dk-primitive-scale-4);
  --dk-font-scale-body-medium-line-height: var(--dk-primitive-scale-6);
  --dk-font-scale-body-small-text-size: var(--dk-primitive-scale-3-5);
  --dk-font-scale-body-small-line-height: var(--dk-primitive-scale-5);
  --dk-font-scale-body-xsmall-text-size: var(--dk-primitive-scale-3);
  --dk-font-scale-body-xsmall-line-height: var(--dk-primitive-scale-4-5);
}

/* ═══════════════════════════════════════ drift-kit:layer tokens/mapped/surface.css ═══════════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · mapped/surface ═══ */
:root,
[data-theme="light"] {
	--dk-surface-backdrop-black: #000000cc;
	--dk-surface-backdrop-transparent: #ffffff00;
	--dk-surface-base-black: var(--dk-color-base-black);
	--dk-surface-base-white: var(--dk-color-base-white);
	--dk-surface-card-default: var(--dk-color-base-white);
	--dk-surface-card-focus: var(--dk-color-neutral-50);
	--dk-surface-card-hover: var(--dk-color-neutral-25);
	--dk-surface-card-secondary: var(--dk-color-neutral-25);
	--dk-surface-card-tertiary: var(--dk-color-neutral-1000);
	--dk-surface-default-body: var(--dk-color-base-white);
	--dk-surface-default-body-reverse: var(--dk-color-neutral-1100);
	--dk-surface-disabled-default: var(--dk-color-neutral-300);
	--dk-surface-disabled-subtle: var(--dk-color-neutral-25);
	--dk-surface-error-default: var(--dk-color-error-500);
	--dk-surface-error-focus: var(--dk-color-error-700);
	--dk-surface-error-hover: var(--dk-color-error-600);
	--dk-surface-error-subtle: var(--dk-color-error-50);
	--dk-surface-error-subtle-focus: var(--dk-color-error-200);
	--dk-surface-error-subtle-hover: var(--dk-color-error-100);
	--dk-surface-glass-default: var(--dk-color-base-white-60);
	--dk-surface-information-default: var(--dk-color-information-500);
	--dk-surface-information-focus: var(--dk-color-information-700);
	--dk-surface-information-hover: var(--dk-color-information-600);
	--dk-surface-information-subtle: var(--dk-color-information-50);
	--dk-surface-information-subtle-focus: var(--dk-color-information-200);
	--dk-surface-information-subtle-hover: var(--dk-color-information-100);
	--dk-surface-neutral-default: var(--dk-color-neutral-500);
	--dk-surface-neutral-focus: var(--dk-color-neutral-600);
	--dk-surface-neutral-hover: var(--dk-color-neutral-600);
	--dk-surface-neutral-on-color: var(--dk-color-neutral-100);
	--dk-surface-neutral-subtle: var(--dk-color-neutral-25);
	--dk-surface-neutral-subtle-focus: var(--dk-color-neutral-100);
	--dk-surface-neutral-subtle-hover: var(--dk-color-neutral-50);
	--dk-surface-page-default: var(--dk-color-base-white);
	--dk-surface-page-secondary: var(--dk-color-neutral-25);
	--dk-surface-page-tertiary: var(--dk-color-neutral-1000);
	--dk-surface-primary-default: var(--dk-color-primary-500);
	--dk-surface-primary-disabled: var(--dk-color-primary-200);
	--dk-surface-primary-focus: var(--dk-color-primary-700);
	--dk-surface-primary-hover: var(--dk-color-primary-600);
	--dk-surface-primary-on-color: var(--dk-color-primary-100);
	--dk-surface-primary-subtle: var(--dk-color-primary-50);
	--dk-surface-primary-subtle-focus: var(--dk-color-primary-200);
	--dk-surface-primary-subtle-hover: var(--dk-color-primary-100);
	--dk-surface-success-default: var(--dk-color-success-500);
	--dk-surface-success-focus: var(--dk-color-success-700);
	--dk-surface-success-hover: var(--dk-color-success-600);
	--dk-surface-success-subtle: var(--dk-color-success-50);
	--dk-surface-success-subtle-focus: var(--dk-color-success-200);
	--dk-surface-success-subtle-hover: var(--dk-color-success-100);
	--dk-surface-warning-default: var(--dk-color-warning-500);
	--dk-surface-warning-focus: var(--dk-color-warning-700);
	--dk-surface-warning-hover: var(--dk-color-warning-600);
	--dk-surface-warning-subtle: var(--dk-color-warning-50);
	--dk-surface-warning-subtle-focus: var(--dk-color-warning-200);
	--dk-surface-warning-subtle-hover: var(--dk-color-warning-100);
}

[data-theme="dark"] {
	--dk-surface-backdrop-black: #000000cc;
	--dk-surface-backdrop-transparent: #26262600;
	--dk-surface-base-black: var(--dk-color-base-black);
	--dk-surface-base-white: var(--dk-color-base-white);
	--dk-surface-card-default: var(--dk-color-neutral-1100);
	--dk-surface-card-focus: var(--dk-color-neutral-800);
	--dk-surface-card-hover: var(--dk-color-neutral-900);
	--dk-surface-card-secondary: var(--dk-color-neutral-900);
	--dk-surface-card-tertiary: var(--dk-color-neutral-50);
	--dk-surface-default-body: var(--dk-color-neutral-1100);
	--dk-surface-default-body-reverse: var(--dk-color-base-white);
	--dk-surface-disabled-default: var(--dk-color-neutral-300);
	--dk-surface-disabled-subtle: var(--dk-color-neutral-1000);
	--dk-surface-error-default: var(--dk-color-error-700);
	--dk-surface-error-focus: var(--dk-color-error-500);
	--dk-surface-error-hover: var(--dk-color-error-600);
	--dk-surface-error-subtle: var(--dk-color-error-900);
	--dk-surface-error-subtle-focus: var(--dk-color-error-700);
	--dk-surface-error-subtle-hover: var(--dk-color-error-800);
	--dk-surface-glass-default: var(--dk-color-base-black-60);
	--dk-surface-information-default: var(--dk-color-information-600);
	--dk-surface-information-focus: var(--dk-color-information-400);
	--dk-surface-information-hover: var(--dk-color-information-500);
	--dk-surface-information-subtle: var(--dk-color-information-900);
	--dk-surface-information-subtle-focus: var(--dk-color-information-700);
	--dk-surface-information-subtle-hover: var(--dk-color-information-800);
	--dk-surface-neutral-default: var(--dk-color-neutral-700);
	--dk-surface-neutral-focus: var(--dk-color-neutral-500);
	--dk-surface-neutral-hover: var(--dk-color-neutral-600);
	--dk-surface-neutral-on-color: var(--dk-color-neutral-800);
	--dk-surface-neutral-subtle: var(--dk-color-neutral-900);
	--dk-surface-neutral-subtle-focus: var(--dk-color-neutral-700);
	--dk-surface-neutral-subtle-hover: var(--dk-color-neutral-800);
	--dk-surface-page-default: var(--dk-color-neutral-1100);
	--dk-surface-page-secondary: var(--dk-color-neutral-1000);
	--dk-surface-page-tertiary: var(--dk-color-neutral-25);
	--dk-surface-primary-default: var(--dk-color-primary-600);
	--dk-surface-primary-disabled: var(--dk-color-primary-800);
	--dk-surface-primary-focus: var(--dk-color-primary-400);
	--dk-surface-primary-hover: var(--dk-color-primary-500);
	--dk-surface-primary-on-color: var(--dk-color-primary-800);
	--dk-surface-primary-subtle: var(--dk-color-primary-850);
	--dk-surface-primary-subtle-focus: var(--dk-color-primary-700);
	--dk-surface-primary-subtle-hover: var(--dk-color-primary-800);
	--dk-surface-success-default: var(--dk-color-success-700);
	--dk-surface-success-focus: var(--dk-color-success-500);
	--dk-surface-success-hover: var(--dk-color-success-600);
	--dk-surface-success-subtle: var(--dk-color-success-900);
	--dk-surface-success-subtle-focus: var(--dk-color-success-700);
	--dk-surface-success-subtle-hover: var(--dk-color-success-800);
	--dk-surface-warning-default: var(--dk-color-warning-600);
	--dk-surface-warning-focus: var(--dk-color-warning-400);
	--dk-surface-warning-hover: var(--dk-color-warning-500);
	--dk-surface-warning-subtle: var(--dk-color-warning-900);
	--dk-surface-warning-subtle-focus: var(--dk-color-warning-700);
	--dk-surface-warning-subtle-hover: var(--dk-color-warning-800);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */

/* The page's own values for what a tone remaps used to be hand-copied here as
   --_page-*. They are generated now (scripts/build.js, --_reset-*), resolved
   from the page's real declarations, Karmo's overrides included; 12 of the 21
   copies had drifted from the page. See test/page-defaults.test.js. */
/* ── A SOFTER BACKDROP, for things that dim the page without owning it ─────
   Upstream ships one: --dk-surface-backdrop-black, #000000cc, 80% black, which
   is what a Modal wants. A Modal is the page for as long as it is open, and a
   backdrop that heavy says so.

   A SELECT'S SHEET IS NOT THAT. It is a menu that happens to be full width on a
   phone, you are three taps into a form behind it, and 80% black turns that
   form into a black rectangle: the context you are choosing FOR disappears
   while you choose. 40% dims enough to say "this is on top" and leaves the page
   legible underneath, which is the figure iOS and Material both land near for
   sheets as against dialogs.

   Declared below the fence, in both themes, because upstream owns the block
   above it and a refresh would take an edit there with it. Same value in light
   and dark: a scrim is a scrim, and the thing it dims is already whichever
   theme it is. */
[data-theme="light"], [data-theme="dark"] {
  --dk-surface-backdrop-soft: #00000066;
}
/* ───────────────────────────────────────────────────────────
   COLLECTION: Mapped
   GROUP: Surface
   ─────────────────────────────────────────────────────────── */

/* --dk-surface-curtain-backdrop  (17 Oct 2026)
   What a page recedes onto when the curtain takes it (kit/transition.js):
   the space behind the page, always darker than it. Light keeps the login
   page's own tertiary panel; dark goes to black, below the neutral-1100 page,
   because a backdrop lighter than the page it sits behind reads backwards.
     Light → color-neutral-1000
     Dark  → color-base-black */
[data-theme="light"] {
  --dk-surface-curtain-backdrop: var(--dk-color-neutral-1000);
}
[data-theme="dark"] {
  --dk-surface-curtain-backdrop: var(--dk-color-base-black);
}

/* --dk-surface-raised-default
   A surface that sits *on top of* the page background — used for floating /
   elevated UI such as the top navigation bar, floating pills, and overlay
   boxes (e.g. a legend). Distinct from --dk-surface-card-default so elevated
   chrome can read as the topmost layer.
     Light → color-base-white
     Dark  → color-neutral-1000 */
[data-theme="light"] {
  --dk-surface-raised-default: var(--dk-color-base-white);
}
[data-theme="dark"] {
  --dk-surface-raised-default: var(--dk-color-neutral-1000);
}

/* --dk-surface-raised-active
   The pressed/active variant of --dk-surface-raised-default. One step beyond
   --dk-surface-raised-hover in the same direction (slightly darker in light,
   slightly lighter in dark) so the "rest → hover → active" progression
   reads as a single coherent emphasis ramp.
     Light → color-neutral-50  (one step darker than the neutral-25 hover)
     Dark  → color-neutral-800 (one tone lighter than neutral-900) */
[data-theme="light"] {
  --dk-surface-raised-active: var(--dk-color-neutral-50);
}
[data-theme="dark"] {
  --dk-surface-raised-active: var(--dk-color-neutral-800);
}

/* --dk-surface-raised-hover
   The hover variant of --dk-surface-raised-default.

   - LIGHT: one step darker than --dk-surface-raised-default (neutral-25), so the
     hover surface itself carries the affordance alongside the darker border.
   - DARK: one tone lighter than --dk-surface-raised-default (neutral-900),
     so dark-mode hover gets the contrast bump it needs.

     Light → color-neutral-25   (one step darker than base-white)
     Dark  → color-neutral-900  (one step lighter than neutral-1000) */
[data-theme="light"] {
  --dk-surface-raised-hover: var(--dk-color-neutral-25);
}
[data-theme="dark"] {
  --dk-surface-raised-hover: var(--dk-color-neutral-900);
}

/* --dk-surface-raised-glass
   A translucent variant of --dk-surface-raised-default for "frosted glass"
   floating surfaces (e.g. the IA Explorer detail panel). Pair it with
   backdrop-filter: blur(...) so the canvas behind shows through, softly
   blurred — the modern translucent-chrome look.
   DERIVED, not hand-mixed (2026-08-18): this IS --dk-surface-raised-default at
   --dk-primitive-opacity-glass, expressed with relative-colour syntax, so it tracks that
   token through theme, brand AND surface level automatically. It used to
   hard-code the rgb it already knew (rgba(255,255,255,.72) light /
   rgba(31,43,45,.72) dark) — identical output, but frozen at the level-0,
   karmo-brand values. One block per theme is now redundant and kept only for
   symmetry with the rest of the file. */
[data-theme="light"] {
  --dk-surface-raised-glass: rgb(from var(--dk-surface-raised-default) r g b / var(--dk-primitive-opacity-glass));
}
[data-theme="dark"] {
  --dk-surface-raised-glass: rgb(from var(--dk-surface-raised-default) r g b / var(--dk-primitive-opacity-glass));
}

/* --dk-surface-page-glass
   A translucent variant of --dk-surface-page-default for frosted bands that sit
   directly ON the page surface (e.g. the sticky search/filter cluster on the
   All Projects page). Distinct from --dk-surface-raised-glass, which mirrors the
   RAISED surface: in dark the raised rgb (neutral-1000) is a step lighter than
   the page (neutral-1100), so a raised-glass band reads as a visible rectangle
   over the page background. This one mirrors the page rgb, so the band melts
   into the page in both themes. Raw rgba for the same reason as above.
     Light → rgba(255, 255, 255, 0.72)  (== surface-page-default @ 72%)
     Dark  → rgba(30, 34, 35, 0.72)     (== surface-page-default @ 72%) */
[data-theme="light"] {
  --dk-surface-page-glass: rgb(from var(--dk-surface-default-body) r g b / var(--dk-primitive-opacity-glass));
}
[data-theme="dark"] {
  --dk-surface-page-glass: rgb(from var(--dk-surface-default-body) r g b / var(--dk-primitive-opacity-glass));
}

/* --dk-surface-canvas-default
   The "back layer" surface used for canvas-like workspaces (e.g. the IA
   Explorer flow area, future map / diagram views). Pairs with
   --dk-surface-raised-default to form a clear two-layer system:
   raised chrome (topbar, breadcrumb, legend, hint chips) floats *above*
   the canvas surface.

   In LIGHT mode the canvas is a hair softer than pure white so floating
   chrome (which is pure white) reads as elevated against it.
   In DARK mode the canvas sits at the deepest neutral, matching the page
   default, so the raised chrome (one step lighter, on neutral-1000) lifts
   visibly off it.

     Light → color-neutral-25
     Dark  → color-neutral-1100

   NOTE: Drift core has page-default (white / 1100), page-secondary
   (neutral-25 / 1000) and page-tertiary (same as secondary), but none
   of those combine "neutral-25 light + neutral-1100 dark" — which is the
   specific contrast pair needed for the canvas/raised pairing here. */
[data-theme="light"] {
  --dk-surface-canvas-default: var(--dk-color-neutral-25);
}
[data-theme="dark"] {
  --dk-surface-canvas-default: var(--dk-color-neutral-1100);
}

/* --dk-surface-inverse-default
   A high-contrast "inverted" surface — dark in light mode, light in dark mode —
   for elements that should read as the opposite of the UI regardless of theme
   (e.g. tooltips, toasts, key callouts, the inverse button variant). Pair with
   an inverse text/icon colour.
   DEFINITION (tightened 2026-08-18): exactly THE OPPOSITE THEME'S BODY
   SURFACE — the dark theme's body in light mode, the light theme's body in
   dark mode. Previously one step in from each end (1000 / neutral-50), which
   held back the contrast this token exists to provide; "inverse" now means
   inverse, and the value is derivable rather than chosen.
     Light → color-neutral-1100  (= the dark theme's --dk-surface-level-0)
     Dark  → color-base-white    (= the light theme's --dk-surface-level-0)
   Note on white in dark mode: pure white at fill size is the maximum-glare
   choice, accepted deliberately here — this token's whole purpose is maximum
   contrast, and anything wanting a softer neutral has plain/raised (buttons)
   or the nested/raised families (chrome). */
[data-theme="light"] {
  --dk-surface-inverse-default: var(--dk-color-neutral-1100);
}
[data-theme="dark"] {
  --dk-surface-inverse-default: var(--dk-color-base-white);
}

/* --dk-surface-inverse-hover / --dk-surface-inverse-active
   Interaction ladder for inverse chrome (the inverse button variant): each
   state steps BACK toward the ambient theme — lighter in light mode's
   near-black, darker in dark mode's near-white — so press reads as
   "settling into" the page.
   Stepped by PERCEPTION, not by index (learned 2026-08-18 — a first attempt
   used one ramp step each way and the light states were invisible): the
   neutral ramp is perceptually COMPRESSED at its deep end, so equal-looking
   steps need unequal indices. From the rest values above, these land both
   themes on a ~20-unit-per-state ladder:
     Light  1100 → 900 → 800   (#1e2223 → #213538 → #37494c)
     Dark   white → 50 → 100   (#ffffff → #e9ebeb → #d3d7d7) */
[data-theme="light"] {
  --dk-surface-inverse-hover: var(--dk-color-neutral-900);
  --dk-surface-inverse-active: var(--dk-color-neutral-800);
}
[data-theme="dark"] {
  --dk-surface-inverse-hover: var(--dk-color-neutral-50);
  --dk-surface-inverse-active: var(--dk-color-neutral-100);
}

/* --dk-text-inverse-default / --dk-icon-inverse-default
   Content on an inverse surface — the flip of the flip: white on the
   near-black (light mode), deepest neutral on the near-white (dark mode). */
[data-theme="light"] {
  --dk-text-inverse-default: var(--dk-color-base-white);
  --dk-icon-inverse-default: var(--dk-color-base-white);
}
[data-theme="dark"] {
  --dk-text-inverse-default: var(--dk-color-neutral-1000);
  --dk-icon-inverse-default: var(--dk-color-neutral-1000);
}

/* --dk-surface-inverse-level-0/1/2, --dk-border-inverse-hairline*, --dk-text-inverse-neutral
   The inverse surface's own ladder and content, added 5.5.0 so data-tone="inverse"
   has rungs to step through. --dk-surface-inverse-default is already defined as
   exactly THE OPPOSITE THEME'S BODY SURFACE, so the levels write themselves: they
   are that theme's ladder, borrowed whole. Light mode's inverse panel is the dark
   theme's 1100/1000/900; dark mode's is the light theme's white/25/50.
   The hairline follows the same idea — it should look like the OPPOSITE theme's
   page hairline does. Dark's page hairline reads 1.70:1, and gray-800 on the
   light-mode inverse panel is 1.70:1; light's reads 1.20:1, and gray-100 on the
   dark-mode inverse panel is the closest available at 1.45:1. Hold at level 1 and
   step once at level 2, the rule 5.1.0 derived.
   Neutral copy inverts too, to the opposite theme's neutral — without it, neutral
   text on a light-mode inverse panel sits at roughly 2.3:1. */
[data-theme="light"] {
  --dk-surface-inverse-level-0: var(--dk-color-neutral-1100);
  --dk-surface-inverse-level-1: var(--dk-color-neutral-1000);
  --dk-surface-inverse-level-2: var(--dk-color-neutral-900);
  --dk-border-inverse-structural: var(--dk-color-neutral-900);
  --dk-border-inverse-structural-level-2: var(--dk-color-neutral-800);
  --dk-border-inverse-hairline: var(--dk-color-neutral-800);
  --dk-border-inverse-hairline-level-1: var(--dk-color-neutral-800);
  --dk-border-inverse-hairline-level-2: var(--dk-color-neutral-700);
  --dk-text-inverse-neutral: var(--dk-color-neutral-300);
  --dk-icon-inverse-neutral: var(--dk-color-neutral-300);
}
[data-theme="dark"] {
  --dk-surface-inverse-level-0: var(--dk-color-base-white);
  --dk-surface-inverse-level-1: var(--dk-color-neutral-25);
  --dk-surface-inverse-level-2: var(--dk-color-neutral-50);
  --dk-border-inverse-structural: var(--dk-color-neutral-50);
  --dk-border-inverse-structural-level-2: var(--dk-color-neutral-100);
  --dk-border-inverse-hairline: var(--dk-color-neutral-100);
  --dk-border-inverse-hairline-level-1: var(--dk-color-neutral-100);
  --dk-border-inverse-hairline-level-2: var(--dk-color-neutral-200);
  --dk-text-inverse-neutral: var(--dk-color-neutral-600);
  --dk-icon-inverse-neutral: var(--dk-color-neutral-600);
}

/* --dk-surface-nested-default
   A surface for boxes nested INSIDE a raised card (e.g. section items) that must
   read as distinct from their container. One step toward contrast from
   --dk-surface-raised-default: slightly darker in light, slightly lighter in dark.
     Light → color-neutral-25  (just off-white — kept subtle)
     Dark  → color-neutral-900 */
[data-theme="light"] {
  --dk-surface-nested-default: var(--dk-color-neutral-25);
}
[data-theme="dark"] {
  --dk-surface-nested-default: var(--dk-color-neutral-900);
}

/* --dk-surface-nested-glass
   Translucent variant of --dk-surface-nested-default — a "frosted glass" version of
   the nested-box surface, so a nested panel (e.g. the Design System docs-nav) can
   sit on a glass container and share the sidebar's frosted-chrome look. Pair with
   backdrop-filter: blur(...).
   DERIVED from --dk-surface-nested-default at --dk-primitive-opacity-glass (see the note on
   --dk-surface-raised-glass). This is the token the derivation helped most: the
   nested surface REMAPS per surface level, so the old frozen rgba kept a
   level-0 tint on a level-2 panel; it now follows the rung. */
[data-theme="light"] {
  --dk-surface-nested-glass: rgb(from var(--dk-surface-nested-default) r g b / var(--dk-primitive-opacity-glass));
}
[data-theme="dark"] {
  --dk-surface-nested-glass: rgb(from var(--dk-surface-nested-default) r g b / var(--dk-primitive-opacity-glass));
}

/* --dk-surface-primary-default / -hover / -active / -focus  (OVERRIDE)
   The primary-teal interactive surface used for "active / selected" emphasis
   (focal node fill, active sidebar destination, active phase tab). Core Drift
   shifts these darker in dark mode, but primary teal is a mid-range brand value
   that reads well on both light and dark backgrounds (same rationale as
   --dk-shadow-on-color). We therefore pin them to a single theme-independent
   "rest → hover → active/focus" emphasis ramp. Rest is the same mid-teal (500) in
   both themes, but the hover/active/focus steps go in OPPOSITE directions per
   theme so the interaction always reads as emphasis against its background.
   -active shares the deepest (focus) step as the pressed-button emphasis:
     Light: default 500 → hover 600 → active/focus 700  (darken on a light canvas)
     Dark:  default 500 → hover 400 → active/focus 300  (lighten on a dark canvas) */
[data-theme="light"] {
  --dk-surface-primary-default: var(--dk-color-primary-500);
  --dk-surface-primary-hover: var(--dk-color-primary-600);
  --dk-surface-primary-active: var(--dk-color-primary-700);
  --dk-surface-primary-focus: var(--dk-color-primary-700);
}
[data-theme="dark"] {
  --dk-surface-primary-default: var(--dk-color-primary-500);
  --dk-surface-primary-hover: var(--dk-color-primary-400);
  --dk-surface-primary-active: var(--dk-color-primary-300);
  --dk-surface-primary-focus: var(--dk-color-primary-300);
}

/* --dk-surface-primary-marker
   Primary fill for small persistent status markers/indicators — e.g. the "new"
   dot on a section/modal node's items. Unlike --dk-surface-primary-default (a solid
   500 in both themes, tuned as a button/node fill), the marker steps one lighter
   on dark so a tiny dot reads clearly against deep neutral canvas surfaces rather
   than muddying into them. (Same 500/400 values as the -highlight tokens, but a
   distinct token: those mark a transient interaction state, this is permanent.)
     Light → color-primary-500
     Dark  → color-primary-400 */
[data-theme="light"] {
  --dk-surface-primary-marker: var(--dk-color-primary-500);
}
[data-theme="dark"] {
  --dk-surface-primary-marker: var(--dk-color-primary-400);
}

/* --dk-surface-neutral-subtle-active
   Pressed step of the neutral-subtle surface ramp. Core Drift provides
   --dk-surface-neutral-subtle (default) and --dk-surface-neutral-subtle-hover but stops
   there; this continues the ramp one step in each theme's direction so a subtle
   neutral control (e.g. the shift-hint toast's close button) has a press state
   consistent with its hover. Mirrors the core ramp's primitives:
     Light: subtle 25 → hover 50 → active 100
     Dark:  subtle 900 → hover 800 → active 700 */
[data-theme="light"] {
  --dk-surface-neutral-subtle-active: var(--dk-color-neutral-100);
}
[data-theme="dark"] {
  --dk-surface-neutral-subtle-active: var(--dk-color-neutral-700);
}

/* ── Surface levels (spec: 2026-08-18-drift-surface-levels-design.md) ──
   The page's explicit 3-rung surface ladder: 0 = body, 1 = first nested
   section, 2 = deeper nesting. Light darkens down the ladder, dark lightens
   (elevation-as-lightness, à la Material dark). Sections opt in via the
   data-surface="1|2" CONTAINER attribute (absent/"0" = body level); each
   scope remaps ONLY the relative-neutral mapped family, so components
   consuming raised/nested tokens adapt with zero component changes.
   --dk-surface-current (the Atlassian --ds-elevation-surface-current pattern)
   always holds the rung's own colour, for consumers that must relate to
   their context (cut-out borders, matching fills).
   NOTE: --dk-surface-canvas-default is NOT a ladder alias — its dark value
   deliberately sits at body depth (1100) so raised chrome (1000) lifts off
   the canvas (see its comment above).

   TWO LAYERS, ON PURPOSE (restructured 2026-09-09 — the theme-inheriting
   pattern tones already used, spec 2026-09-08-drift-body-followups C8):
     1. RAMP tokens --{token}-level-{1,2}, declared on [data-theme="light"] /
        [data-theme="dark"] like --surface-level-N. Custom properties inherit,
        so a data-surface section reads them from the NEAREST themed
        ancestor — the theme it actually sits in.
     2. SCOPES [data-theme] [data-surface="N"]:not([data-theme]) that only
        say `--token: var(--token-level-N)`. Theme-agnostic in value; the
        bare [data-theme] ancestor leg is there for specificity only ((0,3,0),
        tying the old per-theme blocks and the tone scopes, which follow this
        file and win ties by order). The compound leg covers the same-element
        case (docs previews and probe divs carry both attributes on one node).
   This CLOSES the 2026-08-18 KNOWN LIMITATION: a data-surface section that is
   a DESCENDANT of a re-themed panel used to match both themes' descendant
   legs at equal specificity and take whichever block came later in the file
   (dark values leaking into a Light preview on a Dark page — the docs papered
   over it by stamping the preview's theme on every nested section). Now the
   scope has no theme in it to get wrong. Verified 2026-09-09: every remapped
   token measures identically to the previous four-block form in both themes
   at all three levels, and the nested case resolves the inner theme. */
[data-theme="light"] {
  --dk-surface-level-0: var(--dk-color-base-white);
  --dk-surface-level-1: var(--dk-color-neutral-25);
  --dk-surface-level-2: var(--dk-color-neutral-50);
  --dk-surface-current: var(--dk-surface-level-0);
  --dk-border-hairline-current: var(--dk-border-hairline-level-0);
}
/* --dk-surface-chrome-deep(-glass), 14 Oct: DARK CHROME.
   data-theme="dark" on a Sidebar, Top bar or Action bar makes everything in
   it resolve dark, and its fill near-black: 1100 towards black, a step deeper
   than a dark page, so it is black on white on a light page and still reads
   as a frame on a dark one. Its glass is dense, or a white page bleeds through
   it to grey. Set on the chrome itself, never inherited from a wrapper, so a
   dark docs preview is not mistaken for it. The components read it with their
   raised fills as the fallback. */
:is(.dk-component-sidebar, .dk-component-top-bar, .dk-component-action-bar)[data-theme="dark"] {
  --dk-surface-chrome-deep: color-mix(in srgb, var(--dk-color-neutral-1100), var(--dk-color-base-black) 45%);
  --dk-surface-chrome-deep-glass: rgb(from var(--dk-surface-chrome-deep) r g b / var(--dk-primitive-opacity-glass-dense));
}
[data-theme="dark"] {
  --dk-surface-level-0: var(--dk-color-neutral-1100);
  --dk-surface-level-1: var(--dk-color-neutral-1000);
  --dk-surface-level-2: var(--dk-color-neutral-900);
  --dk-surface-current: var(--dk-surface-level-0);
  --dk-border-hairline-current: var(--dk-border-hairline-level-0);
}

/* --surface-lifted-{default|hover|active}
   Interactive raised CONTROLS (the button's `raised` variant) — one contrast
   step off --dk-surface-current in BOTH themes, so the control reads lifted AT
   REST on every rung (Julio, 2026-08-18: white-on-white raised buttons read
   as `subtle`, while dark mode — 1000-on-1100 — always read correctly).
   Light resolves to the nested ramp (one step INTO the page: 25/50/100 at
   level 0), dark to the raised ramp (one step OUT of the dark: 1000/900/800
   at level 0). The per-theme CHOICE OF RAMP is what used to need theme-
   specific [data-surface] legs; it is now expressed as level tokens that
   reference the nested/raised level tokens of the same theme, so it inherits
   like everything else. The three neutral control fills form ONE ladder off
   --dk-surface-current:
     plain rest      = --dk-surface-current        (flat: border-defined)
     plain hover / lifted rest = --dk-surface-lifted-default   (one step off)
     plain active / lifted hover = --dk-surface-lifted-hover   (two steps off)
   The mapped --surface-raised-* family is untouched by all of this — passive
   raised CARDS/chrome stay white in light at every rung (repainting them
   would melt them into the canvas). */
[data-theme="light"] {
  --dk-surface-lifted-default: var(--dk-surface-nested-default);
  --dk-surface-lifted-hover: var(--dk-surface-nested-hover);
  --dk-surface-lifted-active: var(--dk-surface-nested-active);
  --dk-surface-lifted-default-level-1: var(--dk-surface-nested-default-level-1);
  --dk-surface-lifted-hover-level-1: var(--dk-surface-nested-hover-level-1);
  --dk-surface-lifted-active-level-1: var(--dk-surface-nested-active-level-1);
  --dk-surface-lifted-default-level-2: var(--dk-surface-nested-default-level-2);
  --dk-surface-lifted-hover-level-2: var(--dk-surface-nested-hover-level-2);
  --dk-surface-lifted-active-level-2: var(--dk-surface-nested-active-level-2);
}
[data-theme="dark"] {
  --dk-surface-lifted-default: var(--dk-surface-raised-default);
  --dk-surface-lifted-hover: var(--dk-surface-raised-hover);
  --dk-surface-lifted-active: var(--dk-surface-raised-active);
  --dk-surface-lifted-default-level-1: var(--dk-surface-raised-default-level-1);
  --dk-surface-lifted-hover-level-1: var(--dk-surface-raised-hover-level-1);
  --dk-surface-lifted-active-level-1: var(--dk-surface-raised-active-level-1);
  --dk-surface-lifted-default-level-2: var(--dk-surface-raised-default-level-2);
  --dk-surface-lifted-hover-level-2: var(--dk-surface-raised-hover-level-2);
  --dk-surface-lifted-active-level-2: var(--dk-surface-raised-active-level-2);
}

/* ── 1. Level ramps — what each rung remaps, per theme ──────────────────────
   Light darkens one neutral step per rung, dark lightens one. Values are the
   ones the four per-theme blocks carried until 2026-09-09, unchanged. */
[data-theme="light"] {
  /* Raised chrome — Passive raised cards/chrome STAY white in light at every rung (two same-day trials
     stepped it; both superseded — the raised button rides --surface-lifted-*, the plain
     button rests at --dk-surface-current). Hover/active step one neutral so states that
     matched the rung's own colour (raised-hover = neutral-25) stay visible. Dark lifts
     everything one step so "above" keeps meaning "lighter". */
  --dk-surface-raised-default-level-1: var(--dk-color-base-white);
  --dk-surface-raised-default-level-2: var(--dk-color-base-white);
  --dk-surface-raised-hover-level-1: var(--dk-color-neutral-50);
  --dk-surface-raised-hover-level-2: var(--dk-color-neutral-100);
  --dk-surface-raised-active-level-1: var(--dk-color-neutral-100);
  --dk-surface-raised-active-level-2: var(--dk-color-neutral-200);
  /* Nested boxes — One step toward contrast from the rung, per level. */
  --dk-surface-nested-default-level-1: var(--dk-color-neutral-50);
  --dk-surface-nested-default-level-2: var(--dk-color-neutral-100);
  --dk-surface-nested-hover-level-1: var(--dk-color-neutral-100);
  --dk-surface-nested-hover-level-2: var(--dk-color-neutral-200);
  --dk-surface-nested-active-level-1: var(--dk-color-neutral-200);
  --dk-surface-nested-active-level-2: var(--dk-color-neutral-300);
  /* Hairline borders — Borders step ONE position along the hairline ramp (see the ramp table on
     --dk-border-raised-default): every role's index = its base index + the surface level. */
  --dk-border-raised-default-level-1: var(--dk-color-neutral-100);
  --dk-border-raised-default-level-2: var(--dk-color-neutral-200);
  /* The kit hairline's own ramp (13 Oct): a rung stronger than the raised
     chrome border in light, where neutral-50 on white barely read; the same
     ramp as that border in dark. Steps with the level. */
  --dk-border-hairline-level-0: var(--dk-color-neutral-100);
  --dk-border-hairline-level-1: var(--dk-color-neutral-200);
  --dk-border-hairline-level-2: var(--dk-color-neutral-300);
  --dk-border-raised-hover-level-1: var(--dk-color-neutral-200);
  --dk-border-raised-hover-level-2: var(--dk-color-neutral-300);
  --dk-border-raised-active-level-1: var(--dk-color-neutral-300);
  --dk-border-raised-active-level-2: var(--dk-color-neutral-400);
  /* The nested edge HOLDS at level 1 and steps once at level 2, rather than
     stepping every level. Stepping per level made it climb: measured
     1.45 → 1.65 → 1.89 in light, so a nested box at level 2 read 30% stronger
     than the same box on the page, when depth should if anything be quieter.
     The surface only moves a shade per rung while a full ramp step is larger,
     so the two do not cancel — the same over-correction 5.1.0 found for
     disabled content and 5.6.0 found for tone hairlines. */
  --dk-border-nested-default-level-1: var(--dk-color-neutral-100);
  --dk-border-nested-default-level-2: var(--dk-color-neutral-200);
  --dk-border-nested-hover-level-1: var(--dk-color-neutral-300);
  --dk-border-nested-hover-level-2: var(--dk-color-neutral-400);
  --dk-border-nested-active-level-1: var(--dk-color-neutral-400);
  --dk-border-nested-active-level-2: var(--dk-color-neutral-500);
  /* Subtle tint fills — Core rests a whisper off the page (primary/error-50 light, primary-850/error-900
     dark), tonally on top of the rung — the whole rest→hover→focus ladder steps one
     deeper into the tint per level (the subtle button + outline hover fills ride these). */
  --dk-surface-primary-subtle-level-1: var(--dk-color-primary-100);
  --dk-surface-primary-subtle-level-2: var(--dk-color-primary-200);
  --dk-surface-primary-subtle-hover-level-1: var(--dk-color-primary-200);
  --dk-surface-primary-subtle-hover-level-2: var(--dk-color-primary-300);
  --dk-surface-primary-subtle-focus-level-1: var(--dk-color-primary-300);
  --dk-surface-primary-subtle-focus-level-2: var(--dk-color-primary-400);
  --dk-surface-error-subtle-level-1: var(--dk-color-error-100);
  --dk-surface-error-subtle-level-2: var(--dk-color-error-200);
  --dk-surface-error-subtle-hover-level-1: var(--dk-color-error-200);
  --dk-surface-error-subtle-hover-level-2: var(--dk-color-error-300);
  --dk-surface-error-subtle-focus-level-1: var(--dk-color-error-300);
  --dk-surface-error-subtle-focus-level-2: var(--dk-color-error-400);
  /* Status text and icon — The paired text/icon steps WITH the tint (core: 500 light / 400 dark) so
     text-on-tint contrast holds as the fill deepens. Warning and information joined
     on 2026-09-07 (dk-component-body) so the status family steps as one. Success is NOT here:
     Karmo's jade alias (primitives/transform.css) is re-declared in the scopes below
     so it rides primary's step. */
  --dk-text-primary-default-level-1: var(--dk-color-primary-600);
  --dk-text-primary-default-level-2: var(--dk-color-primary-700);
  --dk-icon-primary-default-level-1: var(--dk-color-primary-600);
  --dk-icon-primary-default-level-2: var(--dk-color-primary-700);
  --dk-text-error-default-level-1: var(--dk-color-error-600);
  --dk-text-error-default-level-2: var(--dk-color-error-700);
  --dk-icon-error-default-level-1: var(--dk-color-error-600);
  --dk-icon-error-default-level-2: var(--dk-color-error-700);
  --dk-text-warning-default-level-1: var(--dk-color-warning-600);
  --dk-text-warning-default-level-2: var(--dk-color-warning-700);
  --dk-icon-warning-default-level-1: var(--dk-color-warning-600);
  --dk-icon-warning-default-level-2: var(--dk-color-warning-700);
  --dk-text-information-default-level-1: var(--dk-color-information-600);
  --dk-text-information-default-level-2: var(--dk-color-information-700);
  --dk-icon-information-default-level-1: var(--dk-color-information-600);
  --dk-icon-information-default-level-2: var(--dk-color-information-700);
  /* Neutral text and icon — Body copy steps the same one rung (2026-09-07, dk-component-body) so copy on a card holds the
     contrast it has on the page. --dk-text-default is fixed by decision — black is black
     on any grey. */
  --dk-text-neutral-default-level-1: var(--dk-color-neutral-700);
  --dk-text-neutral-default-level-2: var(--dk-color-neutral-800);
  /* Neutral words on a status tint (30 Oct): neutral's own rungs, except on
     a dark level-2 tint, below. Read by Alert. */
  --dk-text-neutral-on-tint: var(--dk-color-neutral-600);
  --dk-text-neutral-on-tint-level-1: var(--dk-color-neutral-700);
  --dk-text-neutral-on-tint-level-2: var(--dk-color-neutral-800);
  /* Status words on their own tint (30 Oct): Alert's tinted text. One rung
     more contrast on level 2, where the tint has deepened; success is primary's. */
  --dk-text-primary-on-tint: var(--dk-color-primary-700);
  --dk-text-primary-on-tint-level-1: var(--dk-color-primary-700);
  --dk-text-primary-on-tint-level-2: var(--dk-color-primary-800);
  --dk-text-error-on-tint: var(--dk-color-error-700);
  --dk-text-error-on-tint-level-1: var(--dk-color-error-700);
  --dk-text-error-on-tint-level-2: var(--dk-color-error-800);
  --dk-text-warning-on-tint: var(--dk-color-warning-700);
  --dk-text-warning-on-tint-level-1: var(--dk-color-warning-700);
  --dk-text-warning-on-tint-level-2: var(--dk-color-warning-800);
  --dk-text-information-on-tint: var(--dk-color-information-700);
  --dk-text-information-on-tint-level-1: var(--dk-color-information-700);
  --dk-text-information-on-tint-level-2: var(--dk-color-information-800);
  --dk-text-success-on-tint: var(--dk-text-primary-on-tint);
  --dk-icon-neutral-default-level-1: var(--dk-color-neutral-600);
  --dk-icon-neutral-default-level-2: var(--dk-color-neutral-700);
  --dk-text-neutral-subtle-level-1: var(--dk-color-neutral-600);
  --dk-text-neutral-subtle-level-2: var(--dk-color-neutral-700);
  /* Its hover and focus, a rung and two past each level's rest (15 Oct). */
  --dk-text-neutral-subtle-hover-level-1: var(--dk-color-neutral-700);
  --dk-text-neutral-subtle-hover-level-2: var(--dk-color-neutral-800);
  --dk-text-neutral-subtle-focus-level-1: var(--dk-color-neutral-800);
  --dk-text-neutral-subtle-focus-level-2: var(--dk-color-neutral-900);
  --dk-icon-neutral-subtle-level-1: var(--dk-color-neutral-400);
  --dk-icon-neutral-subtle-level-2: var(--dk-color-neutral-500);
  /* Status HAIRLINES — added 5.3.0. The -default rung is the status colour at
     full strength (500), which is right for a control's border and far too loud
     for a RULE: measured against the page, -default runs 2.33:1 (warning) to
     4.25:1 (primary) where the neutral hairline every divider actually wants
     sits at 1.20:1. A status divider was reading three to four times heavier
     than the plain one beside it.
     The hairline rung is the 300 in light, landing every family in a 1.68-1.89
     band — beside --dk-border-neutral-subtle's 1.80, so a tinted rule and a
     quiet neutral rule carry the same weight.
     Ladder: HOLD at level 1, step once at level 2. Stepping every level
     over-corrects exactly as it did for disabled content in 5.1.0 (error would
     run 1.72 → 2.49 → 3.48, getting LOUDER the deeper it nests); the surfaces
     here are the same white → gray-25 → gray-50 ramp, so the same rule applies. */
  /* Neutral gets a hairline of its own rather than borrowing
     --dk-border-neutral-subtle. Two reasons: a token the Divider borrows is a
     token that moves when its real owner changes it, and the border half of the
     neutral-subtle family is the only one with no level ladder — text and icon
     have had one since the levels work, border never did, which is why neutral
     was the one divider colour that stayed flat while the statuses stepped.
     Same value as before at level 0, so nothing moves on the page. */
  --dk-border-neutral-hairline: var(--dk-color-neutral-200);
  --dk-border-neutral-hairline-level-1: var(--dk-color-neutral-200);
  --dk-border-neutral-hairline-level-2: var(--dk-color-neutral-300);
  --dk-border-primary-hairline: var(--dk-color-primary-300);
  --dk-border-primary-hairline-level-1: var(--dk-color-primary-300);
  --dk-border-primary-hairline-level-2: var(--dk-color-primary-400);
  --dk-border-error-hairline: var(--dk-color-error-300);
  --dk-border-error-hairline-level-1: var(--dk-color-error-300);
  --dk-border-error-hairline-level-2: var(--dk-color-error-400);
  --dk-border-warning-hairline: var(--dk-color-warning-300);
  --dk-border-warning-hairline-level-1: var(--dk-color-warning-300);
  --dk-border-warning-hairline-level-2: var(--dk-color-warning-400);
  --dk-border-information-hairline: var(--dk-color-information-300);
  --dk-border-information-hairline-level-1: var(--dk-color-information-300);
  --dk-border-information-hairline-level-2: var(--dk-color-information-400);
  /* Status borders — added 5.2.0. Status TEXT has stepped per level since
     2026-09-07; status BORDERS never did, so an error Input inside a level-2
     card drew the same 500 rung as one on the page. Same class of gap as the
     disabled-content one closed in 5.1.0.
     Rungs mirror the status text ladder exactly, so a status border and status
     text of the same status on the same surface stay in step.
     FOUR families, not five: --dk-border-success-default is aliased to
     --dk-border-primary-default in mapped/success.css, so success inherits this
     for free — declaring a success ladder here would shadow the alias and put
     core Drift's green back on a jade page.
     -subtle is deliberately absent: those are on-fill tints (error-50 and
     friends), not a lower rung of the same idea, and stepping a tint that
     exists to sit ON a fill is not meaningful.
     PRIMARY DOES NOT STEP AT LEVEL 1 IN LIGHT: mapped/border.css already
     overrides --dk-border-primary-default's light base to primary-600 (the
     OVERRIDE, for the focal-node rim) — the exact rung this ladder's level-1
     declares below — so level 0 and level 1 render identically; only level 2
     (700) reads as a step. Status TEXT's light base is 500, one rung earlier,
     so text still steps at every level, and the two ladders are mirrored
     anyway, deliberately, because a border and its paired text on the same
     surface must agree. Normalising primary's light border base to 500 is a
     separate change: it would move seven components for a reason unrelated to
     this ladder. */
  --dk-border-primary-default-level-1: var(--dk-color-primary-600);
  --dk-border-primary-default-level-2: var(--dk-color-primary-700);
  --dk-border-error-default-level-1: var(--dk-color-error-600);
  --dk-border-error-default-level-2: var(--dk-color-error-700);
  --dk-border-warning-default-level-1: var(--dk-color-warning-600);
  --dk-border-warning-default-level-2: var(--dk-color-warning-700);
  --dk-border-information-default-level-1: var(--dk-color-information-600);
  --dk-border-information-default-level-2: var(--dk-color-information-700);
  /* Disabled CONTENT — the -default rung, which until 5.1.0 had no ladder at all.
     The -subtle family below is disabled CHROME and steps one rung per level to
     stay visible against a moving fill; -default is the label a type primitive
     reads, and it was fixed, so its contrast DECAYED as the surface rose to meet
     it: 2.88 → 2.64 → 2.41 in light, 5.57 → 5.05 → 4.46 in dark. Disabled copy
     was quietly getting harder to read the deeper it nested.
     Stepping it one rung per level like the chrome overshoots the other way
     (2.88 → 3.44 → 4.18 — disabled getting LOUDER as it nests). What holds the
     rung's emphasis steady is to HOLD at level 1 and step once at level 2, the
     nearest available rung to the level-0 anchor at each stop:
       light  2.88 · 2.64 · 3.14   (gray-400 · 400 · 500)
       dark   5.57 · 5.05 · 5.70   (gray-400 · 400 · 300)
     Level 1 is declared rather than omitted so the ladder is greppable and the
     hold reads as a decision, not an oversight. Only text and icon: the surface
     and border -default tokens have no consumer in the kit. */
  --dk-text-disabled-default-level-1: var(--dk-color-neutral-400);
  --dk-text-disabled-default-level-2: var(--dk-color-neutral-500);
  --dk-icon-disabled-default-level-1: var(--dk-color-neutral-400);
  --dk-icon-disabled-default-level-2: var(--dk-color-neutral-500);
  /* Disabled chrome — Core's disabled fill EQUALS a rung's colour (neutral-25 light / neutral-1000 dark)
     — the whole family steps one so disabled controls stay visible. */
  --dk-surface-disabled-subtle-level-1: var(--dk-color-neutral-50);
  --dk-surface-disabled-subtle-level-2: var(--dk-color-neutral-100);
  --dk-border-disabled-subtle-level-1: var(--dk-color-neutral-200);
  --dk-border-disabled-subtle-level-2: var(--dk-color-neutral-300);
  --dk-text-disabled-subtle-level-1: var(--dk-color-neutral-300);
  --dk-text-disabled-subtle-level-2: var(--dk-color-neutral-400);
  --dk-icon-disabled-subtle-level-1: var(--dk-color-neutral-200);
  --dk-icon-disabled-subtle-level-2: var(--dk-color-neutral-300);
  --dk-border-disabled-elevation-level-1: var(--dk-color-neutral-300);
  --dk-border-disabled-elevation-level-2: var(--dk-color-neutral-400);
}
[data-theme="dark"] {
  /* Raised chrome — Passive raised cards/chrome STAY white in light at every rung (two same-day trials
     stepped it; both superseded — the raised button rides --surface-lifted-*, the plain
     button rests at --dk-surface-current). Hover/active step one neutral so states that
     matched the rung's own colour (raised-hover = neutral-25) stay visible. Dark lifts
     everything one step so "above" keeps meaning "lighter". */
  --dk-surface-raised-default-level-1: var(--dk-color-neutral-900);
  --dk-surface-raised-default-level-2: var(--dk-color-neutral-800);
  --dk-surface-raised-hover-level-1: var(--dk-color-neutral-800);
  --dk-surface-raised-hover-level-2: var(--dk-color-neutral-700);
  --dk-surface-raised-active-level-1: var(--dk-color-neutral-700);
  --dk-surface-raised-active-level-2: var(--dk-color-neutral-600);
  /* Nested boxes — One step toward contrast from the rung, per level. */
  --dk-surface-nested-default-level-1: var(--dk-color-neutral-800);
  --dk-surface-nested-default-level-2: var(--dk-color-neutral-700);
  --dk-surface-nested-hover-level-1: var(--dk-color-neutral-700);
  --dk-surface-nested-hover-level-2: var(--dk-color-neutral-600);
  --dk-surface-nested-active-level-1: var(--dk-color-neutral-600);
  --dk-surface-nested-active-level-2: var(--dk-color-neutral-500);
  /* Hairline borders — Borders step ONE position along the hairline ramp (see the ramp table on
     --dk-border-raised-default): every role's index = its base index + the surface level. */
  --dk-border-raised-default-level-1: var(--dk-color-neutral-700);
  --dk-border-raised-default-level-2: var(--dk-color-neutral-600);
  --dk-border-hairline-level-0: var(--dk-color-neutral-800);
  --dk-border-hairline-level-1: var(--dk-color-neutral-700);
  --dk-border-hairline-level-2: var(--dk-color-neutral-600);
  --dk-border-raised-hover-level-1: var(--dk-color-neutral-600);
  --dk-border-raised-hover-level-2: var(--dk-color-neutral-500);
  --dk-border-raised-active-level-1: var(--dk-color-neutral-500);
  --dk-border-raised-active-level-2: var(--dk-color-neutral-400);
  --dk-border-nested-default-level-1: var(--dk-color-neutral-700);
  --dk-border-nested-default-level-2: var(--dk-color-neutral-600);
  --dk-border-nested-hover-level-1: var(--dk-color-neutral-500);
  --dk-border-nested-hover-level-2: var(--dk-color-neutral-400);
  --dk-border-nested-active-level-1: var(--dk-color-neutral-400);
  --dk-border-nested-active-level-2: var(--dk-color-neutral-300);
  /* Subtle tint fills — Core rests a whisper off the page (primary/error-50 light, primary-850/error-900
     dark), tonally on top of the rung — the whole rest→hover→focus ladder steps one
     deeper into the tint per level (the subtle button + outline hover fills ride these). */
  --dk-surface-primary-subtle-level-1: var(--dk-color-primary-800);
  --dk-surface-primary-subtle-level-2: var(--dk-color-primary-700);
  --dk-surface-primary-subtle-hover-level-1: var(--dk-color-primary-700);
  --dk-surface-primary-subtle-hover-level-2: var(--dk-color-primary-600);
  --dk-surface-primary-subtle-focus-level-1: var(--dk-color-primary-600);
  --dk-surface-primary-subtle-focus-level-2: var(--dk-color-primary-500);
  --dk-surface-error-subtle-level-1: var(--dk-color-error-800);
  --dk-surface-error-subtle-level-2: var(--dk-color-error-700);
  --dk-surface-error-subtle-hover-level-1: var(--dk-color-error-700);
  --dk-surface-error-subtle-hover-level-2: var(--dk-color-error-600);
  --dk-surface-error-subtle-focus-level-1: var(--dk-color-error-600);
  --dk-surface-error-subtle-focus-level-2: var(--dk-color-error-500);
  /* Status text and icon — The paired text/icon steps WITH the tint (core: 500 light / 400 dark) so
     text-on-tint contrast holds as the fill deepens. Warning and information joined
     on 2026-09-07 (dk-component-body) so the status family steps as one. Success is NOT here:
     Karmo's jade alias (primitives/transform.css) is re-declared in the scopes below
     so it rides primary's step. */
  --dk-text-primary-default-level-1: var(--dk-color-primary-300);
  --dk-text-primary-default-level-2: var(--dk-color-primary-200);
  --dk-icon-primary-default-level-1: var(--dk-color-primary-300);
  --dk-icon-primary-default-level-2: var(--dk-color-primary-200);
  --dk-text-error-default-level-1: var(--dk-color-error-300);
  --dk-text-error-default-level-2: var(--dk-color-error-200);
  --dk-icon-error-default-level-1: var(--dk-color-error-300);
  --dk-icon-error-default-level-2: var(--dk-color-error-200);
  --dk-text-warning-default-level-1: var(--dk-color-warning-300);
  --dk-text-warning-default-level-2: var(--dk-color-warning-200);
  --dk-icon-warning-default-level-1: var(--dk-color-warning-300);
  --dk-icon-warning-default-level-2: var(--dk-color-warning-200);
  --dk-text-information-default-level-1: var(--dk-color-information-300);
  --dk-text-information-default-level-2: var(--dk-color-information-200);
  --dk-icon-information-default-level-1: var(--dk-color-information-300);
  --dk-icon-information-default-level-2: var(--dk-color-information-200);
  /* Neutral text and icon — Body copy steps the same one rung (2026-09-07, dk-component-body) so copy on a card holds the
     contrast it has on the page. --dk-text-default is fixed by decision — black is black
     on any grey. */
  --dk-text-neutral-default-level-1: var(--dk-color-neutral-200);
  --dk-text-neutral-default-level-2: var(--dk-color-neutral-100);
  /* A dark level-2 status tint is mid-strength (warning #995400, information
     #1a56db, error): neutral-100 read 3.99, 4.26 and 3.95 on them; white
     clears AA on each, as the title already does (Julio, 30 Oct). */
  --dk-text-neutral-on-tint: var(--dk-color-neutral-200);
  --dk-text-neutral-on-tint-level-1: var(--dk-color-neutral-200);
  --dk-text-neutral-on-tint-level-2: var(--dk-color-base-white);
  /* Status words on their own tint (30 Oct): Alert's tinted text. One rung
     more contrast on level 2, where the tint has deepened; success is primary's. */
  --dk-text-primary-on-tint: var(--dk-color-primary-200);
  --dk-text-primary-on-tint-level-1: var(--dk-color-primary-200);
  --dk-text-primary-on-tint-level-2: var(--dk-color-primary-100);
  --dk-text-error-on-tint: var(--dk-color-error-200);
  --dk-text-error-on-tint-level-1: var(--dk-color-error-200);
  --dk-text-error-on-tint-level-2: var(--dk-color-error-100);
  --dk-text-warning-on-tint: var(--dk-color-warning-200);
  --dk-text-warning-on-tint-level-1: var(--dk-color-warning-200);
  --dk-text-warning-on-tint-level-2: var(--dk-color-warning-100);
  --dk-text-information-on-tint: var(--dk-color-information-200);
  --dk-text-information-on-tint-level-1: var(--dk-color-information-200);
  --dk-text-information-on-tint-level-2: var(--dk-color-information-100);
  --dk-text-success-on-tint: var(--dk-text-primary-on-tint);
  /* Paired with text neutral subtle at each level, as light is (11 Nov 2026):
     a neutral icon beside subtle words is their colour. */
  --dk-icon-neutral-default-level-1: var(--dk-color-neutral-300);
  --dk-icon-neutral-default-level-2: var(--dk-color-neutral-200);
  --dk-text-neutral-subtle-level-1: var(--dk-color-neutral-300);
  --dk-text-neutral-subtle-level-2: var(--dk-color-neutral-200);
  --dk-text-neutral-subtle-hover-level-1: var(--dk-color-neutral-200);
  --dk-text-neutral-subtle-hover-level-2: var(--dk-color-neutral-100);
  --dk-text-neutral-subtle-focus-level-1: var(--dk-color-neutral-100);
  --dk-text-neutral-subtle-focus-level-2: var(--dk-color-neutral-50);
  --dk-icon-neutral-subtle-level-1: var(--dk-color-neutral-500);
  --dk-icon-neutral-subtle-level-2: var(--dk-color-neutral-400);
  /* Status HAIRLINES — see the light block for the reasoning. Dark takes the 800
     rung (1.48-1.97 against the page) and steps toward the light end as the
     surface rises, as every dark ladder does. Same hold-at-1, step-at-2 rule. */
  /* Neutral hairline — see the light block. Steps toward the light end as the
     surface rises, as every dark ladder does. */
  --dk-border-neutral-hairline: var(--dk-color-neutral-600);
  --dk-border-neutral-hairline-level-1: var(--dk-color-neutral-600);
  --dk-border-neutral-hairline-level-2: var(--dk-color-neutral-500);
  --dk-border-primary-hairline: var(--dk-color-primary-800);
  --dk-border-primary-hairline-level-1: var(--dk-color-primary-800);
  --dk-border-primary-hairline-level-2: var(--dk-color-primary-700);
  --dk-border-error-hairline: var(--dk-color-error-800);
  --dk-border-error-hairline-level-1: var(--dk-color-error-800);
  --dk-border-error-hairline-level-2: var(--dk-color-error-700);
  --dk-border-warning-hairline: var(--dk-color-warning-800);
  --dk-border-warning-hairline-level-1: var(--dk-color-warning-800);
  --dk-border-warning-hairline-level-2: var(--dk-color-warning-700);
  --dk-border-information-hairline: var(--dk-color-information-800);
  --dk-border-information-hairline-level-1: var(--dk-color-information-800);
  --dk-border-information-hairline-level-2: var(--dk-color-information-700);
  /* Status borders — see the light block for the reasoning. Dark steps toward
     the light end as the surface rises, as every dark ladder does.
     primary's base is 500 while the other three are 400, so primary's level-1
     is a two-rung step where theirs is one. That asymmetry is copied from the
     status TEXT ladder rather than corrected: the two families must agree on
     the same surface, and straightening it would move text in seven
     components for a reason unrelated to this change. Flagged in the spec. */
  --dk-border-primary-default-level-1: var(--dk-color-primary-300);
  --dk-border-primary-default-level-2: var(--dk-color-primary-200);
  --dk-border-error-default-level-1: var(--dk-color-error-300);
  --dk-border-error-default-level-2: var(--dk-color-error-200);
  --dk-border-warning-default-level-1: var(--dk-color-warning-300);
  --dk-border-warning-default-level-2: var(--dk-color-warning-200);
  --dk-border-information-default-level-1: var(--dk-color-information-300);
  --dk-border-information-default-level-2: var(--dk-color-information-200);
  /* Disabled CONTENT — see the light block for the reasoning and the numbers. */
  --dk-text-disabled-default-level-1: var(--dk-color-neutral-400);
  --dk-text-disabled-default-level-2: var(--dk-color-neutral-300);
  --dk-icon-disabled-default-level-1: var(--dk-color-neutral-400);
  --dk-icon-disabled-default-level-2: var(--dk-color-neutral-300);
  /* Disabled chrome — Core's disabled fill EQUALS a rung's colour (neutral-25 light / neutral-1000 dark)
     — the whole family steps one so disabled controls stay visible. */
  --dk-surface-disabled-subtle-level-1: var(--dk-color-neutral-900);
  --dk-surface-disabled-subtle-level-2: var(--dk-color-neutral-800);
  --dk-border-disabled-subtle-level-1: var(--dk-color-neutral-700);
  --dk-border-disabled-subtle-level-2: var(--dk-color-neutral-600);
  --dk-text-disabled-subtle-level-1: var(--dk-color-neutral-600);
  --dk-text-disabled-subtle-level-2: var(--dk-color-neutral-500);
  --dk-icon-disabled-subtle-level-1: var(--dk-color-neutral-700);
  --dk-icon-disabled-subtle-level-2: var(--dk-color-neutral-600);
  --dk-border-disabled-elevation-level-1: var(--dk-color-neutral-400);
  --dk-border-disabled-elevation-level-2: var(--dk-color-neutral-500);
}

/* ── 2. Level scopes — theme-agnostic; each line only points at its ramp ── */
[data-theme] [data-surface="1"]:not([data-theme]),
[data-theme][data-surface="1"] {
  --dk-text-default: var(--_reset-text-default);
  --dk-icon-default-body: var(--_reset-icon-default-body);
  --dk-surface-current: var(--dk-surface-level-1);
  --dk-border-hairline-current: var(--dk-border-hairline-level-1);
  /* Raised chrome */
  --dk-surface-raised-default: var(--dk-surface-raised-default-level-1);
  --dk-surface-raised-hover: var(--dk-surface-raised-hover-level-1);
  --dk-surface-raised-active: var(--dk-surface-raised-active-level-1);
  /* Nested boxes */
  --dk-surface-nested-default: var(--dk-surface-nested-default-level-1);
  --dk-surface-nested-hover: var(--dk-surface-nested-hover-level-1);
  --dk-surface-nested-active: var(--dk-surface-nested-active-level-1);
  /* Hairline borders */
  --dk-border-raised-default: var(--dk-border-raised-default-level-1);
  --dk-border-raised-hover: var(--dk-border-raised-hover-level-1);
  --dk-border-raised-active: var(--dk-border-raised-active-level-1);
  --dk-border-raised-control-default: var(--dk-border-raised-control-default-level-1);
  --dk-border-raised-control-hover: var(--dk-border-raised-control-hover-level-1);
  --dk-border-raised-control-active: var(--dk-border-raised-control-active-level-1);
  --dk-border-nested-default: var(--dk-border-nested-default-level-1);
  --dk-border-nested-hover: var(--dk-border-nested-hover-level-1);
  --dk-border-nested-active: var(--dk-border-nested-active-level-1);
  /* Subtle tint fills */
  --dk-surface-primary-subtle: var(--dk-surface-primary-subtle-level-1);
  --dk-surface-primary-subtle-hover: var(--dk-surface-primary-subtle-hover-level-1);
  --dk-surface-primary-subtle-focus: var(--dk-surface-primary-subtle-focus-level-1);
  --dk-surface-error-subtle: var(--dk-surface-error-subtle-level-1);
  --dk-surface-error-subtle-hover: var(--dk-surface-error-subtle-hover-level-1);
  --dk-surface-error-subtle-focus: var(--dk-surface-error-subtle-focus-level-1);
  /* The other statuses' fills step with the level too (28 Oct: a success Tag
     on a raised panel in dark kept the page's tint); they have no hover or
     focus rungs. */
  --dk-surface-success-subtle: var(--dk-surface-success-subtle-level-1);
  --dk-surface-warning-subtle: var(--dk-surface-warning-subtle-level-1);
  --dk-surface-information-subtle: var(--dk-surface-information-subtle-level-1);
  /* Status text and icon */
  --dk-text-primary-default: var(--dk-text-primary-default-level-1);
  --dk-icon-primary-default: var(--dk-icon-primary-default-level-1);
  --dk-text-error-default: var(--dk-text-error-default-level-1);
  --dk-icon-error-default: var(--dk-icon-error-default-level-1);
  --dk-text-warning-default: var(--dk-text-warning-default-level-1);
  --dk-icon-warning-default: var(--dk-icon-warning-default-level-1);
  --dk-text-information-default: var(--dk-text-information-default-level-1);
  --dk-icon-information-default: var(--dk-icon-information-default-level-1);
  /* Neutral text and icon */
  --dk-text-neutral-default: var(--dk-text-neutral-default-level-1);
  --dk-text-neutral-on-tint: var(--dk-text-neutral-on-tint-level-1);
  --dk-text-primary-on-tint: var(--dk-text-primary-on-tint-level-1);
  --dk-text-error-on-tint: var(--dk-text-error-on-tint-level-1);
  --dk-text-warning-on-tint: var(--dk-text-warning-on-tint-level-1);
  --dk-text-information-on-tint: var(--dk-text-information-on-tint-level-1);
  --dk-text-success-on-tint: var(--dk-text-primary-on-tint-level-1);
  --dk-icon-neutral-default: var(--dk-icon-neutral-default-level-1);
  --dk-text-neutral-subtle: var(--dk-text-neutral-subtle-level-1);
  --dk-text-neutral-subtle-hover: var(--dk-text-neutral-subtle-hover-level-1);
  --dk-text-neutral-subtle-focus: var(--dk-text-neutral-subtle-focus-level-1);
  --dk-icon-neutral-subtle: var(--dk-icon-neutral-subtle-level-1);
  /* Hairlines */
  --dk-border-neutral-hairline: var(--dk-border-neutral-hairline-level-1);
  --dk-border-primary-hairline: var(--dk-border-primary-hairline-level-1);
  --dk-border-error-hairline: var(--dk-border-error-hairline-level-1);
  --dk-border-warning-hairline: var(--dk-border-warning-hairline-level-1);
  --dk-border-information-hairline: var(--dk-border-information-hairline-level-1);
  /* Status borders */
  --dk-border-primary-default: var(--dk-border-primary-default-level-1);
  --dk-border-error-default: var(--dk-border-error-default-level-1);
  --dk-border-warning-default: var(--dk-border-warning-default-level-1);
  --dk-border-information-default: var(--dk-border-information-default-level-1);
  /* Disabled content */
  --dk-text-disabled-default: var(--dk-text-disabled-default-level-1);
  --dk-icon-disabled-default: var(--dk-icon-disabled-default-level-1);
  /* Disabled chrome */
  --dk-surface-disabled-subtle: var(--dk-surface-disabled-subtle-level-1);
  --dk-border-disabled-subtle: var(--dk-border-disabled-subtle-level-1);
  --dk-text-disabled-subtle: var(--dk-text-disabled-subtle-level-1);
  --dk-icon-disabled-subtle: var(--dk-icon-disabled-subtle-level-1);
  --dk-border-disabled-elevation: var(--dk-border-disabled-elevation-level-1);
  /* Lifted controls (see --surface-lifted-* above) */
  --dk-surface-lifted-default: var(--dk-surface-lifted-default-level-1);
  --dk-surface-lifted-hover: var(--dk-surface-lifted-hover-level-1);
  --dk-surface-lifted-active: var(--dk-surface-lifted-active-level-1);
  /* Success IS jade at Karmo (primitives/transform.css). The theme-level alias
     resolves once on the themed element, so it is re-declared here to re-resolve
     against this rung's primary — never as a success-N primitive, which would
     swap jade for core green (check:contrast caught that, 2026-09-08). */
  --dk-text-success-default: var(--dk-text-primary-default);
  --dk-icon-success-default: var(--dk-icon-primary-default);
}
[data-theme][data-surface="below"],
[data-theme] [data-surface="below"]:not([data-theme]):where(:not(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *))) {
  --dk-text-default: var(--_reset-text-default);
  --dk-icon-default-body: var(--_reset-icon-default-body);
  --dk-surface-current: var(--dk-surface-level-1);
  --dk-border-hairline-current: var(--dk-border-hairline-level-1);
  /* Raised chrome */
  --dk-surface-raised-default: var(--dk-surface-raised-default-level-1);
  --dk-surface-raised-hover: var(--dk-surface-raised-hover-level-1);
  --dk-surface-raised-active: var(--dk-surface-raised-active-level-1);
  /* Nested boxes */
  --dk-surface-nested-default: var(--dk-surface-nested-default-level-1);
  --dk-surface-nested-hover: var(--dk-surface-nested-hover-level-1);
  --dk-surface-nested-active: var(--dk-surface-nested-active-level-1);
  /* Hairline borders */
  --dk-border-raised-default: var(--dk-border-raised-default-level-1);
  --dk-border-raised-hover: var(--dk-border-raised-hover-level-1);
  --dk-border-raised-active: var(--dk-border-raised-active-level-1);
  --dk-border-raised-control-default: var(--dk-border-raised-control-default-level-1);
  --dk-border-raised-control-hover: var(--dk-border-raised-control-hover-level-1);
  --dk-border-raised-control-active: var(--dk-border-raised-control-active-level-1);
  --dk-border-nested-default: var(--dk-border-nested-default-level-1);
  --dk-border-nested-hover: var(--dk-border-nested-hover-level-1);
  --dk-border-nested-active: var(--dk-border-nested-active-level-1);
  /* Subtle tint fills */
  --dk-surface-primary-subtle: var(--dk-surface-primary-subtle-level-1);
  --dk-surface-primary-subtle-hover: var(--dk-surface-primary-subtle-hover-level-1);
  --dk-surface-primary-subtle-focus: var(--dk-surface-primary-subtle-focus-level-1);
  --dk-surface-error-subtle: var(--dk-surface-error-subtle-level-1);
  --dk-surface-error-subtle-hover: var(--dk-surface-error-subtle-hover-level-1);
  --dk-surface-error-subtle-focus: var(--dk-surface-error-subtle-focus-level-1);
  /* The other statuses' fills step with the level too (28 Oct: a success Tag
     on a raised panel in dark kept the page's tint); they have no hover or
     focus rungs. */
  --dk-surface-success-subtle: var(--dk-surface-success-subtle-level-1);
  --dk-surface-warning-subtle: var(--dk-surface-warning-subtle-level-1);
  --dk-surface-information-subtle: var(--dk-surface-information-subtle-level-1);
  /* Status text and icon */
  --dk-text-primary-default: var(--dk-text-primary-default-level-1);
  --dk-icon-primary-default: var(--dk-icon-primary-default-level-1);
  --dk-text-error-default: var(--dk-text-error-default-level-1);
  --dk-icon-error-default: var(--dk-icon-error-default-level-1);
  --dk-text-warning-default: var(--dk-text-warning-default-level-1);
  --dk-icon-warning-default: var(--dk-icon-warning-default-level-1);
  --dk-text-information-default: var(--dk-text-information-default-level-1);
  --dk-icon-information-default: var(--dk-icon-information-default-level-1);
  /* Neutral text and icon */
  --dk-text-neutral-default: var(--dk-text-neutral-default-level-1);
  --dk-text-neutral-on-tint: var(--dk-text-neutral-on-tint-level-1);
  --dk-text-primary-on-tint: var(--dk-text-primary-on-tint-level-1);
  --dk-text-error-on-tint: var(--dk-text-error-on-tint-level-1);
  --dk-text-warning-on-tint: var(--dk-text-warning-on-tint-level-1);
  --dk-text-information-on-tint: var(--dk-text-information-on-tint-level-1);
  --dk-text-success-on-tint: var(--dk-text-primary-on-tint-level-1);
  --dk-icon-neutral-default: var(--dk-icon-neutral-default-level-1);
  --dk-text-neutral-subtle: var(--dk-text-neutral-subtle-level-1);
  --dk-text-neutral-subtle-hover: var(--dk-text-neutral-subtle-hover-level-1);
  --dk-text-neutral-subtle-focus: var(--dk-text-neutral-subtle-focus-level-1);
  --dk-icon-neutral-subtle: var(--dk-icon-neutral-subtle-level-1);
  /* Hairlines */
  --dk-border-neutral-hairline: var(--dk-border-neutral-hairline-level-1);
  --dk-border-primary-hairline: var(--dk-border-primary-hairline-level-1);
  --dk-border-error-hairline: var(--dk-border-error-hairline-level-1);
  --dk-border-warning-hairline: var(--dk-border-warning-hairline-level-1);
  --dk-border-information-hairline: var(--dk-border-information-hairline-level-1);
  /* Status borders */
  --dk-border-primary-default: var(--dk-border-primary-default-level-1);
  --dk-border-error-default: var(--dk-border-error-default-level-1);
  --dk-border-warning-default: var(--dk-border-warning-default-level-1);
  --dk-border-information-default: var(--dk-border-information-default-level-1);
  /* Disabled content */
  --dk-text-disabled-default: var(--dk-text-disabled-default-level-1);
  --dk-icon-disabled-default: var(--dk-icon-disabled-default-level-1);
  /* Disabled chrome */
  --dk-surface-disabled-subtle: var(--dk-surface-disabled-subtle-level-1);
  --dk-border-disabled-subtle: var(--dk-border-disabled-subtle-level-1);
  --dk-text-disabled-subtle: var(--dk-text-disabled-subtle-level-1);
  --dk-icon-disabled-subtle: var(--dk-icon-disabled-subtle-level-1);
  --dk-border-disabled-elevation: var(--dk-border-disabled-elevation-level-1);
  /* Lifted controls (see --surface-lifted-* above) */
  --dk-surface-lifted-default: var(--dk-surface-lifted-default-level-1);
  --dk-surface-lifted-hover: var(--dk-surface-lifted-hover-level-1);
  --dk-surface-lifted-active: var(--dk-surface-lifted-active-level-1);
  /* Success IS jade at Karmo (primitives/transform.css). The theme-level alias
     resolves once on the themed element, so it is re-declared here to re-resolve
     against this rung's primary — never as a success-N primitive, which would
     swap jade for core green (check:contrast caught that, 2026-09-08). */
  --dk-text-success-default: var(--dk-text-primary-default);
  --dk-icon-success-default: var(--dk-icon-primary-default);
}
[data-theme="light"] .dk-component-brand-sheet__panel[data-theme="dark"]:where(:not([data-theme="light"] [data-theme="dark"] *)) {
  --dk-text-default: var(--_reset-text-default);
  --dk-icon-default-body: var(--_reset-icon-default-body);
  --dk-surface-current: var(--dk-surface-level-1);
  --dk-border-hairline-current: var(--dk-border-hairline-level-1);
  /* Raised chrome */
  --dk-surface-raised-default: var(--dk-surface-raised-default-level-1);
  --dk-surface-raised-hover: var(--dk-surface-raised-hover-level-1);
  --dk-surface-raised-active: var(--dk-surface-raised-active-level-1);
  /* Nested boxes */
  --dk-surface-nested-default: var(--dk-surface-nested-default-level-1);
  --dk-surface-nested-hover: var(--dk-surface-nested-hover-level-1);
  --dk-surface-nested-active: var(--dk-surface-nested-active-level-1);
  /* Hairline borders */
  --dk-border-raised-default: var(--dk-border-raised-default-level-1);
  --dk-border-raised-hover: var(--dk-border-raised-hover-level-1);
  --dk-border-raised-active: var(--dk-border-raised-active-level-1);
  --dk-border-raised-control-default: var(--dk-border-raised-control-default-level-1);
  --dk-border-raised-control-hover: var(--dk-border-raised-control-hover-level-1);
  --dk-border-raised-control-active: var(--dk-border-raised-control-active-level-1);
  --dk-border-nested-default: var(--dk-border-nested-default-level-1);
  --dk-border-nested-hover: var(--dk-border-nested-hover-level-1);
  --dk-border-nested-active: var(--dk-border-nested-active-level-1);
  /* Subtle tint fills */
  --dk-surface-primary-subtle: var(--dk-surface-primary-subtle-level-1);
  --dk-surface-primary-subtle-hover: var(--dk-surface-primary-subtle-hover-level-1);
  --dk-surface-primary-subtle-focus: var(--dk-surface-primary-subtle-focus-level-1);
  --dk-surface-error-subtle: var(--dk-surface-error-subtle-level-1);
  --dk-surface-error-subtle-hover: var(--dk-surface-error-subtle-hover-level-1);
  --dk-surface-error-subtle-focus: var(--dk-surface-error-subtle-focus-level-1);
  /* The other statuses' fills step with the level too (28 Oct: a success Tag
     on a raised panel in dark kept the page's tint); they have no hover or
     focus rungs. */
  --dk-surface-success-subtle: var(--dk-surface-success-subtle-level-1);
  --dk-surface-warning-subtle: var(--dk-surface-warning-subtle-level-1);
  --dk-surface-information-subtle: var(--dk-surface-information-subtle-level-1);
  /* Status text and icon */
  --dk-text-primary-default: var(--dk-text-primary-default-level-1);
  --dk-icon-primary-default: var(--dk-icon-primary-default-level-1);
  --dk-text-error-default: var(--dk-text-error-default-level-1);
  --dk-icon-error-default: var(--dk-icon-error-default-level-1);
  --dk-text-warning-default: var(--dk-text-warning-default-level-1);
  --dk-icon-warning-default: var(--dk-icon-warning-default-level-1);
  --dk-text-information-default: var(--dk-text-information-default-level-1);
  --dk-icon-information-default: var(--dk-icon-information-default-level-1);
  /* Neutral text and icon */
  --dk-text-neutral-default: var(--dk-text-neutral-default-level-1);
  --dk-text-neutral-on-tint: var(--dk-text-neutral-on-tint-level-1);
  --dk-text-primary-on-tint: var(--dk-text-primary-on-tint-level-1);
  --dk-text-error-on-tint: var(--dk-text-error-on-tint-level-1);
  --dk-text-warning-on-tint: var(--dk-text-warning-on-tint-level-1);
  --dk-text-information-on-tint: var(--dk-text-information-on-tint-level-1);
  --dk-text-success-on-tint: var(--dk-text-primary-on-tint-level-1);
  --dk-icon-neutral-default: var(--dk-icon-neutral-default-level-1);
  --dk-text-neutral-subtle: var(--dk-text-neutral-subtle-level-1);
  --dk-text-neutral-subtle-hover: var(--dk-text-neutral-subtle-hover-level-1);
  --dk-text-neutral-subtle-focus: var(--dk-text-neutral-subtle-focus-level-1);
  --dk-icon-neutral-subtle: var(--dk-icon-neutral-subtle-level-1);
  /* Hairlines */
  --dk-border-neutral-hairline: var(--dk-border-neutral-hairline-level-1);
  --dk-border-primary-hairline: var(--dk-border-primary-hairline-level-1);
  --dk-border-error-hairline: var(--dk-border-error-hairline-level-1);
  --dk-border-warning-hairline: var(--dk-border-warning-hairline-level-1);
  --dk-border-information-hairline: var(--dk-border-information-hairline-level-1);
  /* Status borders */
  --dk-border-primary-default: var(--dk-border-primary-default-level-1);
  --dk-border-error-default: var(--dk-border-error-default-level-1);
  --dk-border-warning-default: var(--dk-border-warning-default-level-1);
  --dk-border-information-default: var(--dk-border-information-default-level-1);
  /* Disabled content */
  --dk-text-disabled-default: var(--dk-text-disabled-default-level-1);
  --dk-icon-disabled-default: var(--dk-icon-disabled-default-level-1);
  /* Disabled chrome */
  --dk-surface-disabled-subtle: var(--dk-surface-disabled-subtle-level-1);
  --dk-border-disabled-subtle: var(--dk-border-disabled-subtle-level-1);
  --dk-text-disabled-subtle: var(--dk-text-disabled-subtle-level-1);
  --dk-icon-disabled-subtle: var(--dk-icon-disabled-subtle-level-1);
  --dk-border-disabled-elevation: var(--dk-border-disabled-elevation-level-1);
  /* Lifted controls (see --surface-lifted-* above) */
  --dk-surface-lifted-default: var(--dk-surface-lifted-default-level-1);
  --dk-surface-lifted-hover: var(--dk-surface-lifted-hover-level-1);
  --dk-surface-lifted-active: var(--dk-surface-lifted-active-level-1);
  /* Success IS jade at Karmo (primitives/transform.css). The theme-level alias
     resolves once on the themed element, so it is re-declared here to re-resolve
     against this rung's primary — never as a success-N primitive, which would
     swap jade for core green (check:contrast caught that, 2026-09-08). */
  --dk-text-success-default: var(--dk-text-primary-default);
  --dk-icon-success-default: var(--dk-icon-primary-default);
}
[data-theme="dark"] [data-surface="raised"]:not([data-theme]):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"] [data-tone="inverse"] [data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"][data-surface="raised"] {
  --dk-text-default: var(--_reset-text-default);
  --dk-icon-default-body: var(--_reset-icon-default-body);
  --dk-surface-current: var(--dk-surface-level-1);
  --dk-border-hairline-current: var(--dk-border-hairline-level-1);
  /* Raised chrome */
  --dk-surface-raised-default: var(--dk-surface-raised-default-level-1);
  --dk-surface-raised-hover: var(--dk-surface-raised-hover-level-1);
  --dk-surface-raised-active: var(--dk-surface-raised-active-level-1);
  /* Nested boxes */
  --dk-surface-nested-default: var(--dk-surface-nested-default-level-1);
  --dk-surface-nested-hover: var(--dk-surface-nested-hover-level-1);
  --dk-surface-nested-active: var(--dk-surface-nested-active-level-1);
  /* Hairline borders */
  --dk-border-raised-default: var(--dk-border-raised-default-level-1);
  --dk-border-raised-hover: var(--dk-border-raised-hover-level-1);
  --dk-border-raised-active: var(--dk-border-raised-active-level-1);
  --dk-border-raised-control-default: var(--dk-border-raised-control-default-level-1);
  --dk-border-raised-control-hover: var(--dk-border-raised-control-hover-level-1);
  --dk-border-raised-control-active: var(--dk-border-raised-control-active-level-1);
  --dk-border-nested-default: var(--dk-border-nested-default-level-1);
  --dk-border-nested-hover: var(--dk-border-nested-hover-level-1);
  --dk-border-nested-active: var(--dk-border-nested-active-level-1);
  /* Subtle tint fills */
  --dk-surface-primary-subtle: var(--dk-surface-primary-subtle-level-1);
  --dk-surface-primary-subtle-hover: var(--dk-surface-primary-subtle-hover-level-1);
  --dk-surface-primary-subtle-focus: var(--dk-surface-primary-subtle-focus-level-1);
  --dk-surface-error-subtle: var(--dk-surface-error-subtle-level-1);
  --dk-surface-error-subtle-hover: var(--dk-surface-error-subtle-hover-level-1);
  --dk-surface-error-subtle-focus: var(--dk-surface-error-subtle-focus-level-1);
  /* The other statuses' fills step with the level too (28 Oct: a success Tag
     on a raised panel in dark kept the page's tint); they have no hover or
     focus rungs. */
  --dk-surface-success-subtle: var(--dk-surface-success-subtle-level-1);
  --dk-surface-warning-subtle: var(--dk-surface-warning-subtle-level-1);
  --dk-surface-information-subtle: var(--dk-surface-information-subtle-level-1);
  /* Status text and icon */
  --dk-text-primary-default: var(--dk-text-primary-default-level-1);
  --dk-icon-primary-default: var(--dk-icon-primary-default-level-1);
  --dk-text-error-default: var(--dk-text-error-default-level-1);
  --dk-icon-error-default: var(--dk-icon-error-default-level-1);
  --dk-text-warning-default: var(--dk-text-warning-default-level-1);
  --dk-icon-warning-default: var(--dk-icon-warning-default-level-1);
  --dk-text-information-default: var(--dk-text-information-default-level-1);
  --dk-icon-information-default: var(--dk-icon-information-default-level-1);
  /* Neutral text and icon */
  --dk-text-neutral-default: var(--dk-text-neutral-default-level-1);
  --dk-text-neutral-on-tint: var(--dk-text-neutral-on-tint-level-1);
  --dk-text-primary-on-tint: var(--dk-text-primary-on-tint-level-1);
  --dk-text-error-on-tint: var(--dk-text-error-on-tint-level-1);
  --dk-text-warning-on-tint: var(--dk-text-warning-on-tint-level-1);
  --dk-text-information-on-tint: var(--dk-text-information-on-tint-level-1);
  --dk-text-success-on-tint: var(--dk-text-primary-on-tint-level-1);
  --dk-icon-neutral-default: var(--dk-icon-neutral-default-level-1);
  --dk-text-neutral-subtle: var(--dk-text-neutral-subtle-level-1);
  --dk-text-neutral-subtle-hover: var(--dk-text-neutral-subtle-hover-level-1);
  --dk-text-neutral-subtle-focus: var(--dk-text-neutral-subtle-focus-level-1);
  --dk-icon-neutral-subtle: var(--dk-icon-neutral-subtle-level-1);
  /* Hairlines */
  --dk-border-neutral-hairline: var(--dk-border-neutral-hairline-level-1);
  --dk-border-primary-hairline: var(--dk-border-primary-hairline-level-1);
  --dk-border-error-hairline: var(--dk-border-error-hairline-level-1);
  --dk-border-warning-hairline: var(--dk-border-warning-hairline-level-1);
  --dk-border-information-hairline: var(--dk-border-information-hairline-level-1);
  /* Status borders */
  --dk-border-primary-default: var(--dk-border-primary-default-level-1);
  --dk-border-error-default: var(--dk-border-error-default-level-1);
  --dk-border-warning-default: var(--dk-border-warning-default-level-1);
  --dk-border-information-default: var(--dk-border-information-default-level-1);
  /* Disabled content */
  --dk-text-disabled-default: var(--dk-text-disabled-default-level-1);
  --dk-icon-disabled-default: var(--dk-icon-disabled-default-level-1);
  /* Disabled chrome */
  --dk-surface-disabled-subtle: var(--dk-surface-disabled-subtle-level-1);
  --dk-border-disabled-subtle: var(--dk-border-disabled-subtle-level-1);
  --dk-text-disabled-subtle: var(--dk-text-disabled-subtle-level-1);
  --dk-icon-disabled-subtle: var(--dk-icon-disabled-subtle-level-1);
  --dk-border-disabled-elevation: var(--dk-border-disabled-elevation-level-1);
  /* Lifted controls (see --surface-lifted-* above) */
  --dk-surface-lifted-default: var(--dk-surface-lifted-default-level-1);
  --dk-surface-lifted-hover: var(--dk-surface-lifted-hover-level-1);
  --dk-surface-lifted-active: var(--dk-surface-lifted-active-level-1);
  /* Success IS jade at Karmo (primitives/transform.css). The theme-level alias
     resolves once on the themed element, so it is re-declared here to re-resolve
     against this rung's primary — never as a success-N primitive, which would
     swap jade for core green (check:contrast caught that, 2026-09-08). */
  --dk-text-success-default: var(--dk-text-primary-default);
  --dk-icon-success-default: var(--dk-icon-primary-default);
}
[data-theme] [data-surface="2"]:not([data-theme]),
[data-theme][data-surface="2"] {
  --dk-text-default: var(--_reset-text-default);
  --dk-icon-default-body: var(--_reset-icon-default-body);
  --dk-surface-current: var(--dk-surface-level-2);
  --dk-border-hairline-current: var(--dk-border-hairline-level-2);
  /* Raised chrome */
  --dk-surface-raised-default: var(--dk-surface-raised-default-level-2);
  --dk-surface-raised-hover: var(--dk-surface-raised-hover-level-2);
  --dk-surface-raised-active: var(--dk-surface-raised-active-level-2);
  /* Nested boxes */
  --dk-surface-nested-default: var(--dk-surface-nested-default-level-2);
  --dk-surface-nested-hover: var(--dk-surface-nested-hover-level-2);
  --dk-surface-nested-active: var(--dk-surface-nested-active-level-2);
  /* Hairline borders */
  --dk-border-raised-default: var(--dk-border-raised-default-level-2);
  --dk-border-raised-hover: var(--dk-border-raised-hover-level-2);
  --dk-border-raised-active: var(--dk-border-raised-active-level-2);
  --dk-border-raised-control-default: var(--dk-border-raised-control-default-level-2);
  --dk-border-raised-control-hover: var(--dk-border-raised-control-hover-level-2);
  --dk-border-raised-control-active: var(--dk-border-raised-control-active-level-2);
  --dk-border-nested-default: var(--dk-border-nested-default-level-2);
  --dk-border-nested-hover: var(--dk-border-nested-hover-level-2);
  --dk-border-nested-active: var(--dk-border-nested-active-level-2);
  /* Subtle tint fills */
  --dk-surface-primary-subtle: var(--dk-surface-primary-subtle-level-2);
  --dk-surface-primary-subtle-hover: var(--dk-surface-primary-subtle-hover-level-2);
  --dk-surface-primary-subtle-focus: var(--dk-surface-primary-subtle-focus-level-2);
  --dk-surface-error-subtle: var(--dk-surface-error-subtle-level-2);
  --dk-surface-error-subtle-hover: var(--dk-surface-error-subtle-hover-level-2);
  --dk-surface-error-subtle-focus: var(--dk-surface-error-subtle-focus-level-2);
  /* The other statuses' fills step with the level too (28 Oct: a success Tag
     on a raised panel in dark kept the page's tint); they have no hover or
     focus rungs. */
  --dk-surface-success-subtle: var(--dk-surface-success-subtle-level-2);
  --dk-surface-warning-subtle: var(--dk-surface-warning-subtle-level-2);
  --dk-surface-information-subtle: var(--dk-surface-information-subtle-level-2);
  /* Status text and icon */
  --dk-text-primary-default: var(--dk-text-primary-default-level-2);
  --dk-icon-primary-default: var(--dk-icon-primary-default-level-2);
  --dk-text-error-default: var(--dk-text-error-default-level-2);
  --dk-icon-error-default: var(--dk-icon-error-default-level-2);
  --dk-text-warning-default: var(--dk-text-warning-default-level-2);
  --dk-icon-warning-default: var(--dk-icon-warning-default-level-2);
  --dk-text-information-default: var(--dk-text-information-default-level-2);
  --dk-icon-information-default: var(--dk-icon-information-default-level-2);
  /* Neutral text and icon */
  --dk-text-neutral-default: var(--dk-text-neutral-default-level-2);
  --dk-text-neutral-on-tint: var(--dk-text-neutral-on-tint-level-2);
  --dk-text-primary-on-tint: var(--dk-text-primary-on-tint-level-2);
  --dk-text-error-on-tint: var(--dk-text-error-on-tint-level-2);
  --dk-text-warning-on-tint: var(--dk-text-warning-on-tint-level-2);
  --dk-text-information-on-tint: var(--dk-text-information-on-tint-level-2);
  --dk-text-success-on-tint: var(--dk-text-primary-on-tint-level-2);
  --dk-icon-neutral-default: var(--dk-icon-neutral-default-level-2);
  --dk-text-neutral-subtle: var(--dk-text-neutral-subtle-level-2);
  --dk-text-neutral-subtle-hover: var(--dk-text-neutral-subtle-hover-level-2);
  --dk-text-neutral-subtle-focus: var(--dk-text-neutral-subtle-focus-level-2);
  --dk-icon-neutral-subtle: var(--dk-icon-neutral-subtle-level-2);
  /* Hairlines */
  --dk-border-neutral-hairline: var(--dk-border-neutral-hairline-level-2);
  --dk-border-primary-hairline: var(--dk-border-primary-hairline-level-2);
  --dk-border-error-hairline: var(--dk-border-error-hairline-level-2);
  --dk-border-warning-hairline: var(--dk-border-warning-hairline-level-2);
  --dk-border-information-hairline: var(--dk-border-information-hairline-level-2);
  /* Status borders */
  --dk-border-primary-default: var(--dk-border-primary-default-level-2);
  --dk-border-error-default: var(--dk-border-error-default-level-2);
  --dk-border-warning-default: var(--dk-border-warning-default-level-2);
  --dk-border-information-default: var(--dk-border-information-default-level-2);
  /* Disabled content */
  --dk-text-disabled-default: var(--dk-text-disabled-default-level-2);
  --dk-icon-disabled-default: var(--dk-icon-disabled-default-level-2);
  /* Disabled chrome */
  --dk-surface-disabled-subtle: var(--dk-surface-disabled-subtle-level-2);
  --dk-border-disabled-subtle: var(--dk-border-disabled-subtle-level-2);
  --dk-text-disabled-subtle: var(--dk-text-disabled-subtle-level-2);
  --dk-icon-disabled-subtle: var(--dk-icon-disabled-subtle-level-2);
  --dk-border-disabled-elevation: var(--dk-border-disabled-elevation-level-2);
  /* Lifted controls (see --surface-lifted-* above) */
  --dk-surface-lifted-default: var(--dk-surface-lifted-default-level-2);
  --dk-surface-lifted-hover: var(--dk-surface-lifted-hover-level-2);
  --dk-surface-lifted-active: var(--dk-surface-lifted-active-level-2);
  /* And the border that sits on them, which by this rung had been caught up by
     the surface it was drawn against. See border.css for the measurement. */
  --dk-border-control-default: var(--dk-border-control-default-level-2);
  --dk-border-control-hover: var(--dk-border-control-hover-level-2);
  --dk-border-control-active: var(--dk-border-control-active-level-2);
  --dk-border-control-lifted-default: var(--dk-border-control-lifted-default-level-2);
  --dk-border-control-lifted-hover: var(--dk-border-control-lifted-hover-level-2);
  --dk-border-control-lifted-active: var(--dk-border-control-lifted-active-level-2);
  --dk-border-field-raised-default: var(--dk-border-field-raised-default-level-2);
  /* Success IS jade at Karmo (primitives/transform.css). The theme-level alias
     resolves once on the themed element, so it is re-declared here to re-resolve
     against this rung's primary — never as a success-N primitive, which would
     swap jade for core green (check:contrast caught that, 2026-09-08). */
  --dk-text-success-default: var(--dk-text-primary-default);
  --dk-icon-success-default: var(--dk-icon-primary-default);
}
[data-theme] [data-surface="below"]:not([data-theme]):where(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *)) {
  --dk-text-default: var(--_reset-text-default);
  --dk-icon-default-body: var(--_reset-icon-default-body);
  --dk-surface-current: var(--dk-surface-level-2);
  --dk-border-hairline-current: var(--dk-border-hairline-level-2);
  /* Raised chrome */
  --dk-surface-raised-default: var(--dk-surface-raised-default-level-2);
  --dk-surface-raised-hover: var(--dk-surface-raised-hover-level-2);
  --dk-surface-raised-active: var(--dk-surface-raised-active-level-2);
  /* Nested boxes */
  --dk-surface-nested-default: var(--dk-surface-nested-default-level-2);
  --dk-surface-nested-hover: var(--dk-surface-nested-hover-level-2);
  --dk-surface-nested-active: var(--dk-surface-nested-active-level-2);
  /* Hairline borders */
  --dk-border-raised-default: var(--dk-border-raised-default-level-2);
  --dk-border-raised-hover: var(--dk-border-raised-hover-level-2);
  --dk-border-raised-active: var(--dk-border-raised-active-level-2);
  --dk-border-raised-control-default: var(--dk-border-raised-control-default-level-2);
  --dk-border-raised-control-hover: var(--dk-border-raised-control-hover-level-2);
  --dk-border-raised-control-active: var(--dk-border-raised-control-active-level-2);
  --dk-border-nested-default: var(--dk-border-nested-default-level-2);
  --dk-border-nested-hover: var(--dk-border-nested-hover-level-2);
  --dk-border-nested-active: var(--dk-border-nested-active-level-2);
  /* Subtle tint fills */
  --dk-surface-primary-subtle: var(--dk-surface-primary-subtle-level-2);
  --dk-surface-primary-subtle-hover: var(--dk-surface-primary-subtle-hover-level-2);
  --dk-surface-primary-subtle-focus: var(--dk-surface-primary-subtle-focus-level-2);
  --dk-surface-error-subtle: var(--dk-surface-error-subtle-level-2);
  --dk-surface-error-subtle-hover: var(--dk-surface-error-subtle-hover-level-2);
  --dk-surface-error-subtle-focus: var(--dk-surface-error-subtle-focus-level-2);
  /* The other statuses' fills step with the level too (28 Oct: a success Tag
     on a raised panel in dark kept the page's tint); they have no hover or
     focus rungs. */
  --dk-surface-success-subtle: var(--dk-surface-success-subtle-level-2);
  --dk-surface-warning-subtle: var(--dk-surface-warning-subtle-level-2);
  --dk-surface-information-subtle: var(--dk-surface-information-subtle-level-2);
  /* Status text and icon */
  --dk-text-primary-default: var(--dk-text-primary-default-level-2);
  --dk-icon-primary-default: var(--dk-icon-primary-default-level-2);
  --dk-text-error-default: var(--dk-text-error-default-level-2);
  --dk-icon-error-default: var(--dk-icon-error-default-level-2);
  --dk-text-warning-default: var(--dk-text-warning-default-level-2);
  --dk-icon-warning-default: var(--dk-icon-warning-default-level-2);
  --dk-text-information-default: var(--dk-text-information-default-level-2);
  --dk-icon-information-default: var(--dk-icon-information-default-level-2);
  /* Neutral text and icon */
  --dk-text-neutral-default: var(--dk-text-neutral-default-level-2);
  --dk-text-neutral-on-tint: var(--dk-text-neutral-on-tint-level-2);
  --dk-text-primary-on-tint: var(--dk-text-primary-on-tint-level-2);
  --dk-text-error-on-tint: var(--dk-text-error-on-tint-level-2);
  --dk-text-warning-on-tint: var(--dk-text-warning-on-tint-level-2);
  --dk-text-information-on-tint: var(--dk-text-information-on-tint-level-2);
  --dk-text-success-on-tint: var(--dk-text-primary-on-tint-level-2);
  --dk-icon-neutral-default: var(--dk-icon-neutral-default-level-2);
  --dk-text-neutral-subtle: var(--dk-text-neutral-subtle-level-2);
  --dk-text-neutral-subtle-hover: var(--dk-text-neutral-subtle-hover-level-2);
  --dk-text-neutral-subtle-focus: var(--dk-text-neutral-subtle-focus-level-2);
  --dk-icon-neutral-subtle: var(--dk-icon-neutral-subtle-level-2);
  /* Hairlines */
  --dk-border-neutral-hairline: var(--dk-border-neutral-hairline-level-2);
  --dk-border-primary-hairline: var(--dk-border-primary-hairline-level-2);
  --dk-border-error-hairline: var(--dk-border-error-hairline-level-2);
  --dk-border-warning-hairline: var(--dk-border-warning-hairline-level-2);
  --dk-border-information-hairline: var(--dk-border-information-hairline-level-2);
  /* Status borders */
  --dk-border-primary-default: var(--dk-border-primary-default-level-2);
  --dk-border-error-default: var(--dk-border-error-default-level-2);
  --dk-border-warning-default: var(--dk-border-warning-default-level-2);
  --dk-border-information-default: var(--dk-border-information-default-level-2);
  /* Disabled content */
  --dk-text-disabled-default: var(--dk-text-disabled-default-level-2);
  --dk-icon-disabled-default: var(--dk-icon-disabled-default-level-2);
  /* Disabled chrome */
  --dk-surface-disabled-subtle: var(--dk-surface-disabled-subtle-level-2);
  --dk-border-disabled-subtle: var(--dk-border-disabled-subtle-level-2);
  --dk-text-disabled-subtle: var(--dk-text-disabled-subtle-level-2);
  --dk-icon-disabled-subtle: var(--dk-icon-disabled-subtle-level-2);
  --dk-border-disabled-elevation: var(--dk-border-disabled-elevation-level-2);
  /* Lifted controls (see --surface-lifted-* above) */
  --dk-surface-lifted-default: var(--dk-surface-lifted-default-level-2);
  --dk-surface-lifted-hover: var(--dk-surface-lifted-hover-level-2);
  --dk-surface-lifted-active: var(--dk-surface-lifted-active-level-2);
  /* And the border that sits on them, which by this rung had been caught up by
     the surface it was drawn against. See border.css for the measurement. */
  --dk-border-control-default: var(--dk-border-control-default-level-2);
  --dk-border-control-hover: var(--dk-border-control-hover-level-2);
  --dk-border-control-active: var(--dk-border-control-active-level-2);
  --dk-border-control-lifted-default: var(--dk-border-control-lifted-default-level-2);
  --dk-border-control-lifted-hover: var(--dk-border-control-lifted-hover-level-2);
  --dk-border-control-lifted-active: var(--dk-border-control-lifted-active-level-2);
  --dk-border-field-raised-default: var(--dk-border-field-raised-default-level-2);
  /* Success IS jade at Karmo (primitives/transform.css). The theme-level alias
     resolves once on the themed element, so it is re-declared here to re-resolve
     against this rung's primary — never as a success-N primitive, which would
     swap jade for core green (check:contrast caught that, 2026-09-08). */
  --dk-text-success-default: var(--dk-text-primary-default);
  --dk-icon-success-default: var(--dk-icon-primary-default);
}

/* LEVEL 0 IS A REAL SCOPE NOW. The attribute table has always said "absent or
   0 = the page", and absent does mean that, but 0 selected nothing at all: a
   container could not declare itself back to the page level from inside a
   tone. Everything levels 1 and 2 remap is restored here, so a
   <div data-surface="0"> inside a solid panel is the page again.

   Found on Body's "On surfaces" section, where the level 0 card paints the
   page white and sat inside a solid preview: its status copy was still the
   rung 50 the on-solid outline rule hands a non-matching status, pale text
   on white at 1.09:1. Restoring only text-default and icon-default-body
   fixed the two obvious lines and left the other four unreadable, which is
   the same half-a-pair fault this file keeps producing. */
[data-theme] [data-surface="0"]:not([data-theme]),
[data-theme][data-surface="0"],
[data-theme] :where([data-interactive-fill="raised"]) > :not([data-surface], [data-theme]) {
  --dk-text-default: var(--_reset-text-default);
  --dk-icon-default-body: var(--_reset-icon-default-body);
  --dk-text-neutral-default: var(--_reset-text-neutral-default);
  --dk-text-neutral-on-tint: var(--_reset-text-neutral-on-tint);
  --dk-text-primary-on-tint: var(--_reset-text-primary-on-tint);
  --dk-text-error-on-tint: var(--_reset-text-error-on-tint);
  --dk-text-warning-on-tint: var(--_reset-text-warning-on-tint);
  --dk-text-information-on-tint: var(--_reset-text-information-on-tint);
  --dk-text-success-on-tint: var(--_reset-text-success-on-tint);
  --dk-text-neutral-subtle: var(--_reset-text-neutral-subtle);
  --dk-text-neutral-subtle-hover: var(--_reset-text-neutral-subtle-hover);
  --dk-text-neutral-subtle-focus: var(--_reset-text-neutral-subtle-focus);
  --dk-icon-neutral-default: var(--_reset-icon-neutral-default);
  --dk-icon-neutral-subtle: var(--_reset-icon-neutral-subtle);
  --dk-text-primary-default: var(--_reset-text-primary-default);
  --dk-text-success-default: var(--_reset-text-success-default);
  --dk-text-error-default: var(--_reset-text-error-default);
  --dk-text-warning-default: var(--_reset-text-warning-default);
  --dk-text-information-default: var(--_reset-text-information-default);
  --dk-icon-primary-default: var(--_reset-icon-primary-default);
  --dk-icon-success-default: var(--_reset-icon-success-default);
  --dk-icon-error-default: var(--_reset-icon-error-default);
  --dk-icon-warning-default: var(--_reset-icon-warning-default);
  --dk-icon-information-default: var(--_reset-icon-information-default);
  --dk-border-primary-default: var(--_reset-border-primary-default);
  --dk-border-success-default: var(--_reset-border-success-default);
  --dk-border-error-default: var(--_reset-border-error-default);
  --dk-border-warning-default: var(--_reset-border-warning-default);
  --dk-border-information-default: var(--_reset-border-information-default);
  /* The ladder, back to the page (15 Oct): without it a level-0 panel inside
     a level-1 box kept level-1 fills, and its hover read two rungs dark. */
  --dk-surface-current: var(--_reset-surface-current);
  --dk-border-hairline-current: var(--_reset-border-hairline-current);
  --dk-surface-raised-default: var(--_reset-surface-raised-default);
  --dk-surface-raised-hover: var(--_reset-surface-raised-hover);
  --dk-surface-raised-active: var(--_reset-surface-raised-active);
  --dk-surface-nested-default: var(--_reset-surface-nested-default);
  --dk-surface-nested-hover: var(--_reset-surface-nested-hover);
  --dk-surface-nested-active: var(--_reset-surface-nested-active);
  --dk-border-raised-default: var(--_reset-border-raised-default);
  --dk-border-raised-hover: var(--_reset-border-raised-hover);
  --dk-border-raised-active: var(--_reset-border-raised-active);
  --dk-border-nested-default: var(--_reset-border-nested-default);
  --dk-border-nested-hover: var(--_reset-border-nested-hover);
  --dk-border-nested-active: var(--_reset-border-nested-active);
  --dk-surface-primary-subtle: var(--_reset-surface-primary-subtle);
  --dk-surface-primary-subtle-hover: var(--_reset-surface-primary-subtle-hover);
  --dk-surface-primary-subtle-focus: var(--_reset-surface-primary-subtle-focus);
  --dk-surface-error-subtle: var(--_reset-surface-error-subtle);
  --dk-surface-error-subtle-hover: var(--_reset-surface-error-subtle-hover);
  --dk-surface-error-subtle-focus: var(--_reset-surface-error-subtle-focus);
  --dk-surface-success-subtle: var(--_reset-surface-success-subtle);
  --dk-surface-warning-subtle: var(--_reset-surface-warning-subtle);
  --dk-surface-information-subtle: var(--_reset-surface-information-subtle);
  --dk-border-neutral-hairline: var(--_reset-border-neutral-hairline);
  --dk-border-primary-hairline: var(--_reset-border-primary-hairline);
  --dk-border-error-hairline: var(--_reset-border-error-hairline);
  --dk-border-warning-hairline: var(--_reset-border-warning-hairline);
  --dk-border-information-hairline: var(--_reset-border-information-hairline);
  --dk-text-disabled-default: var(--_reset-text-disabled-default);
  --dk-icon-disabled-default: var(--_reset-icon-disabled-default);
  --dk-surface-disabled-subtle: var(--_reset-surface-disabled-subtle);
  --dk-border-disabled-subtle: var(--_reset-border-disabled-subtle);
  --dk-text-disabled-subtle: var(--_reset-text-disabled-subtle);
  --dk-icon-disabled-subtle: var(--_reset-icon-disabled-subtle);
  --dk-border-disabled-elevation: var(--_reset-border-disabled-elevation);
  --dk-surface-lifted-default: var(--_reset-surface-lifted-default);
  --dk-surface-lifted-hover: var(--_reset-surface-lifted-hover);
  --dk-surface-lifted-active: var(--_reset-surface-lifted-active);
  --dk-border-control-default: var(--_reset-border-control-default);
  --dk-border-control-hover: var(--_reset-border-control-hover);
  --dk-border-control-active: var(--_reset-border-control-active);
  --dk-border-control-lifted-default: var(--_reset-border-control-lifted-default);
  --dk-border-control-lifted-hover: var(--_reset-border-control-lifted-hover);
  --dk-border-control-lifted-active: var(--_reset-border-control-lifted-active);
  --dk-border-raised-control-default: var(--_reset-border-raised-control-default);
  --dk-border-raised-control-hover: var(--_reset-border-raised-control-hover);
  --dk-border-raised-control-active: var(--_reset-border-raised-control-active);
  --dk-border-field-raised-default: var(--_reset-border-field-raised-default);
}
[data-theme="light"] [data-surface="raised"]:not([data-theme]):where(:not([data-tone])):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"] [data-tone="inverse"] [data-surface="raised"]:not([data-theme]):where(:not([data-tone])):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"][data-surface="raised"]:where(:not([data-tone])) {
  --dk-text-default: var(--_reset-text-default);
  --dk-icon-default-body: var(--_reset-icon-default-body);
  --dk-text-neutral-default: var(--_reset-text-neutral-default);
  --dk-text-neutral-on-tint: var(--_reset-text-neutral-on-tint);
  --dk-text-primary-on-tint: var(--_reset-text-primary-on-tint);
  --dk-text-error-on-tint: var(--_reset-text-error-on-tint);
  --dk-text-warning-on-tint: var(--_reset-text-warning-on-tint);
  --dk-text-information-on-tint: var(--_reset-text-information-on-tint);
  --dk-text-success-on-tint: var(--_reset-text-success-on-tint);
  --dk-text-neutral-subtle: var(--_reset-text-neutral-subtle);
  --dk-text-neutral-subtle-hover: var(--_reset-text-neutral-subtle-hover);
  --dk-text-neutral-subtle-focus: var(--_reset-text-neutral-subtle-focus);
  --dk-icon-neutral-default: var(--_reset-icon-neutral-default);
  --dk-icon-neutral-subtle: var(--_reset-icon-neutral-subtle);
  --dk-text-primary-default: var(--_reset-text-primary-default);
  --dk-text-success-default: var(--_reset-text-success-default);
  --dk-text-error-default: var(--_reset-text-error-default);
  --dk-text-warning-default: var(--_reset-text-warning-default);
  --dk-text-information-default: var(--_reset-text-information-default);
  --dk-icon-primary-default: var(--_reset-icon-primary-default);
  --dk-icon-success-default: var(--_reset-icon-success-default);
  --dk-icon-error-default: var(--_reset-icon-error-default);
  --dk-icon-warning-default: var(--_reset-icon-warning-default);
  --dk-icon-information-default: var(--_reset-icon-information-default);
  --dk-border-primary-default: var(--_reset-border-primary-default);
  --dk-border-success-default: var(--_reset-border-success-default);
  --dk-border-error-default: var(--_reset-border-error-default);
  --dk-border-warning-default: var(--_reset-border-warning-default);
  --dk-border-information-default: var(--_reset-border-information-default);
  /* The ladder, back to the page (15 Oct): without it a level-0 panel inside
     a level-1 box kept level-1 fills, and its hover read two rungs dark. */
  --dk-surface-current: var(--_reset-surface-current);
  --dk-border-hairline-current: var(--_reset-border-hairline-current);
  --dk-surface-raised-default: var(--_reset-surface-raised-default);
  --dk-surface-raised-hover: var(--_reset-surface-raised-hover);
  --dk-surface-raised-active: var(--_reset-surface-raised-active);
  --dk-surface-nested-default: var(--_reset-surface-nested-default);
  --dk-surface-nested-hover: var(--_reset-surface-nested-hover);
  --dk-surface-nested-active: var(--_reset-surface-nested-active);
  --dk-border-raised-default: var(--_reset-border-raised-default);
  --dk-border-raised-hover: var(--_reset-border-raised-hover);
  --dk-border-raised-active: var(--_reset-border-raised-active);
  --dk-border-nested-default: var(--_reset-border-nested-default);
  --dk-border-nested-hover: var(--_reset-border-nested-hover);
  --dk-border-nested-active: var(--_reset-border-nested-active);
  --dk-surface-primary-subtle: var(--_reset-surface-primary-subtle);
  --dk-surface-primary-subtle-hover: var(--_reset-surface-primary-subtle-hover);
  --dk-surface-primary-subtle-focus: var(--_reset-surface-primary-subtle-focus);
  --dk-surface-error-subtle: var(--_reset-surface-error-subtle);
  --dk-surface-error-subtle-hover: var(--_reset-surface-error-subtle-hover);
  --dk-surface-error-subtle-focus: var(--_reset-surface-error-subtle-focus);
  --dk-surface-success-subtle: var(--_reset-surface-success-subtle);
  --dk-surface-warning-subtle: var(--_reset-surface-warning-subtle);
  --dk-surface-information-subtle: var(--_reset-surface-information-subtle);
  --dk-border-neutral-hairline: var(--_reset-border-neutral-hairline);
  --dk-border-primary-hairline: var(--_reset-border-primary-hairline);
  --dk-border-error-hairline: var(--_reset-border-error-hairline);
  --dk-border-warning-hairline: var(--_reset-border-warning-hairline);
  --dk-border-information-hairline: var(--_reset-border-information-hairline);
  --dk-text-disabled-default: var(--_reset-text-disabled-default);
  --dk-icon-disabled-default: var(--_reset-icon-disabled-default);
  --dk-surface-disabled-subtle: var(--_reset-surface-disabled-subtle);
  --dk-border-disabled-subtle: var(--_reset-border-disabled-subtle);
  --dk-text-disabled-subtle: var(--_reset-text-disabled-subtle);
  --dk-icon-disabled-subtle: var(--_reset-icon-disabled-subtle);
  --dk-border-disabled-elevation: var(--_reset-border-disabled-elevation);
  --dk-surface-lifted-default: var(--_reset-surface-lifted-default);
  --dk-surface-lifted-hover: var(--_reset-surface-lifted-hover);
  --dk-surface-lifted-active: var(--_reset-surface-lifted-active);
  --dk-border-control-default: var(--_reset-border-control-default);
  --dk-border-control-hover: var(--_reset-border-control-hover);
  --dk-border-control-active: var(--_reset-border-control-active);
  --dk-border-control-lifted-default: var(--_reset-border-control-lifted-default);
  --dk-border-control-lifted-hover: var(--_reset-border-control-lifted-hover);
  --dk-border-control-lifted-active: var(--_reset-border-control-lifted-active);
  --dk-border-raised-control-default: var(--_reset-border-raised-control-default);
  --dk-border-raised-control-hover: var(--_reset-border-raised-control-hover);
  --dk-border-raised-control-active: var(--_reset-border-raised-control-active);
  --dk-border-field-raised-default: var(--_reset-border-field-raised-default);
}

/* --dk-surface-sidebar-panel / --dk-border-sidebar-panel (and -hover)  (NEW)
   A nested Sidebar's panel: the column of a section's pages beside the rail,
   Forge's design system nav. A recess in the rail rather than a tile on it, so
   it takes a rung the surface levels do not remap: light the faint neutral the
   nested surface rests on, dark the page's own rung, under the raised rail
   (Julio chose the recess for Forge's version). Hover steps one rung away from
   the panel in each theme, since the rail's raised hover is the panel's own
   colour there and would not show. A row's edge stands two rungs off its
   fill (3 Nov, Julio: one rung read as no edge, dark's 1000 and 900 being
   all but the same grey), and a press has its own, two off the press fill.
     light   fill 25, hover 50      border 50, hover 200, press 300
     dark    fill 1100, hover 1000  border 1000, hover 800, press 600 */
[data-theme="light"] {
  --dk-surface-sidebar-panel: var(--dk-color-neutral-25);
  --dk-surface-sidebar-panel-hover: var(--dk-color-neutral-50);
  --dk-border-sidebar-panel: var(--dk-color-neutral-50);
  --dk-border-sidebar-panel-hover: var(--dk-color-neutral-200);
  --dk-border-sidebar-panel-active: var(--dk-color-neutral-300);
}
[data-theme="dark"] {
  --dk-surface-sidebar-panel: var(--dk-color-neutral-1100);
  --dk-surface-sidebar-panel-hover: var(--dk-color-neutral-1000);
  --dk-border-sidebar-panel: var(--dk-color-neutral-1000);
  --dk-border-sidebar-panel-hover: var(--dk-color-neutral-800);
  --dk-border-sidebar-panel-active: var(--dk-color-neutral-600);
}

/* --dk-surface-primary-brand  (NEW)
   The brand's own tone as a fill, the pair --dk-text-primary-brand is as
   text: the middle primary in light and a step lighter in dark, for a solid
   brand pill with white words on it (Julio, 12 Oct). A branding decision:
   white on 500 is about 2.8:1, and on 400 lower still.
     Light: primary 500   Dark: primary 400 */
[data-theme="light"] {
  --dk-surface-primary-brand: var(--dk-color-primary-500);
}
[data-theme="dark"] {
  --dk-surface-primary-brand: var(--dk-color-primary-400);
}

/* --dk-surface-{status}-mark  (NEW, 13 Oct 2026)
   A small status mark's own solid fill: a solid Tag, a solid Icon tile. The
   600 rung on the page; inside a solid tone it inverts to white (tone.css,
   rule C), and a part that resets the tone puts the 600 back. */
[data-theme="light"], [data-theme="dark"] {
  --dk-surface-primary-mark: var(--dk-color-primary-600);
  --dk-surface-success-mark: var(--dk-color-primary-600);
  --dk-surface-error-mark: var(--dk-color-error-600);
  --dk-surface-warning-mark: var(--dk-color-warning-600);
  --dk-surface-information-mark: var(--dk-color-information-600);
}

/* --dk-surface-{status}-subtle-active  (NEW, 4 Nov 2026)
   The status tints' third rung, after subtle-hover and subtle-focus: the
   press of something drawn on a tint, an Icon tile in a pressed row (Julio:
   the tile mixed its solid into the focus tint and left the ramp).
     Light: 300   Dark: 600 */
[data-theme="light"] {
  --dk-surface-primary-subtle-active: var(--dk-color-primary-300);
  --dk-surface-success-subtle-active: var(--dk-color-success-300);
  --dk-surface-error-subtle-active: var(--dk-color-error-300);
  --dk-surface-warning-subtle-active: var(--dk-color-warning-300);
  --dk-surface-information-subtle-active: var(--dk-color-information-300);
}
[data-theme="dark"] {
  --dk-surface-primary-subtle-active: var(--dk-color-primary-600);
  --dk-surface-success-subtle-active: var(--dk-color-success-600);
  --dk-surface-error-subtle-active: var(--dk-color-error-600);
  --dk-surface-warning-subtle-active: var(--dk-color-warning-600);
  --dk-surface-information-subtle-active: var(--dk-color-information-600);
}

/* ════════════════════════════════════════ drift-kit:layer tokens/mapped/border.css ════════════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · mapped/border ═══ */
:root,
[data-theme="light"] {
    --dk-border-base-black: var(--dk-color-base-black);
    --dk-border-base-white: var(--dk-color-base-white);
    --dk-border-card-default: var(--dk-color-neutral-50);
    --dk-border-card-secondary: var(--dk-color-neutral-100);
    --dk-border-default-body: var(--dk-color-base-black);
    --dk-border-default-body-reverse: var(--dk-color-base-white);
    --dk-border-disabled-default: var(--dk-color-neutral-400);
    --dk-border-disabled-elevation: var(--dk-color-neutral-200);
    --dk-border-disabled-on-color: var(--dk-color-neutral-200);
    --dk-border-disabled-subtle: var(--dk-color-neutral-50);
    --dk-border-error-default: var(--dk-color-error-500);
    --dk-border-error-elevation: var(--dk-color-error-800);
    --dk-border-error-elevation-focus: var(--dk-color-error-700);
    --dk-border-error-elevation-hover: var(--dk-color-error-700);
    --dk-border-error-focus: var(--dk-color-error-700);
    --dk-border-error-hover: var(--dk-color-error-600);
    --dk-border-error-subtle: var(--dk-color-error-50);
    --dk-border-error-subtle-focus: var(--dk-color-error-200);
    --dk-border-error-subtle-hover: var(--dk-color-error-100);
    --dk-border-glass-default: var(--dk-color-neutral-50);
    --dk-border-information-default: var(--dk-color-information-500);
    --dk-border-information-elevation: var(--dk-color-information-800);
    --dk-border-information-elevation-focus: var(--dk-color-information-700);
    --dk-border-information-elevation-hover: var(--dk-color-information-700);
    --dk-border-information-focus: var(--dk-color-information-700);
    --dk-border-information-hover: var(--dk-color-information-600);
    --dk-border-information-subtle: var(--dk-color-information-50);
    --dk-border-information-subtle-focus: var(--dk-color-information-200);
    --dk-border-information-subtle-hover: var(--dk-color-information-100);
    --dk-border-neutral-default: var(--dk-color-neutral-600);
    --dk-border-neutral-elevation: var(--dk-color-neutral-800);
    --dk-border-neutral-elevation-focus: var(--dk-color-neutral-700);
    --dk-border-neutral-elevation-hover: var(--dk-color-neutral-700);
    --dk-border-neutral-focus: var(--dk-color-neutral-800);
    --dk-border-neutral-hover: var(--dk-color-neutral-700);
    --dk-border-neutral-subtle: var(--dk-color-neutral-200);
    --dk-border-neutral-subtle-focus: var(--dk-color-neutral-500);
    --dk-border-neutral-subtle-hover: var(--dk-color-neutral-400);
    --dk-border-page-default: var(--dk-color-neutral-50);
    --dk-border-page-secondary: var(--dk-color-neutral-200);
    --dk-border-primary-default: var(--dk-color-primary-500);
    --dk-border-primary-disabled: var(--dk-color-primary-300);
    --dk-border-primary-elevation: var(--dk-color-primary-800);
    --dk-border-primary-elevation-focus: var(--dk-color-primary-700);
    --dk-border-primary-elevation-hover: var(--dk-color-primary-700);
    --dk-border-primary-focus: var(--dk-color-primary-700);
    --dk-border-primary-hover: var(--dk-color-primary-600);
    --dk-border-primary-on-color: var(--dk-color-primary-200);
    --dk-border-primary-subtle: var(--dk-color-primary-100);
    --dk-border-primary-subtle-focus: var(--dk-color-primary-300);
    --dk-border-primary-subtle-hover: var(--dk-color-primary-200);
    --dk-border-success-default: var(--dk-color-success-500);
    --dk-border-success-elevation: var(--dk-color-success-800);
    --dk-border-success-elevation-focus: var(--dk-color-success-700);
    --dk-border-success-elevation-hover: var(--dk-color-success-700);
    --dk-border-success-focus: var(--dk-color-success-700);
    --dk-border-success-hover: var(--dk-color-success-600);
    --dk-border-success-subtle: var(--dk-color-success-50);
    --dk-border-success-subtle-focus: var(--dk-color-success-200);
    --dk-border-success-subtle-hover: var(--dk-color-success-100);
    --dk-border-warning-default: var(--dk-color-warning-500);
    --dk-border-warning-elevation: var(--dk-color-warning-800);
    --dk-border-warning-elevation-focus: var(--dk-color-warning-700);
    --dk-border-warning-elevation-hover: var(--dk-color-warning-700);
    --dk-border-warning-focus: var(--dk-color-warning-700);
    --dk-border-warning-hover: var(--dk-color-warning-600);
    --dk-border-warning-subtle: var(--dk-color-warning-50);
    --dk-border-warning-subtle-focus: var(--dk-color-warning-200);
    --dk-border-warning-subtle-hover: var(--dk-color-warning-100);
}

[data-theme="dark"] {
    --dk-border-base-black: var(--dk-color-base-black);
    --dk-border-base-white: var(--dk-color-base-white);
    --dk-border-card-default: var(--dk-color-neutral-600);
    --dk-border-card-secondary: var(--dk-color-neutral-500);
    --dk-border-default-body: var(--dk-color-base-white);
    --dk-border-default-body-reverse: var(--dk-color-base-black);
    --dk-border-disabled-default: var(--dk-color-neutral-400);
    --dk-border-disabled-elevation: var(--dk-color-neutral-300);
    --dk-border-disabled-on-color: var(--dk-color-neutral-700);
    --dk-border-disabled-subtle: var(--dk-color-neutral-800);
    --dk-border-error-default: var(--dk-color-error-400);
    --dk-border-error-elevation: var(--dk-color-error-800);
    --dk-border-error-elevation-focus: var(--dk-color-error-700);
    --dk-border-error-elevation-hover: var(--dk-color-error-700);
    --dk-border-error-focus: var(--dk-color-error-200);
    --dk-border-error-hover: var(--dk-color-error-300);
    --dk-border-error-subtle: var(--dk-color-error-50);
    --dk-border-error-subtle-focus: var(--dk-color-error-200);
    --dk-border-error-subtle-hover: var(--dk-color-error-100);
    --dk-border-glass-default: var(--dk-color-neutral-800);
    --dk-border-information-default: var(--dk-color-information-400);
    --dk-border-information-elevation: var(--dk-color-information-800);
    --dk-border-information-elevation-focus: var(--dk-color-information-700);
    --dk-border-information-elevation-hover: var(--dk-color-information-700);
    --dk-border-information-focus: var(--dk-color-information-200);
    --dk-border-information-hover: var(--dk-color-information-300);
    --dk-border-information-subtle: var(--dk-color-information-50);
    --dk-border-information-subtle-focus: var(--dk-color-information-200);
    --dk-border-information-subtle-hover: var(--dk-color-information-100);
    --dk-border-neutral-default: var(--dk-color-neutral-300);
    --dk-border-neutral-elevation: var(--dk-color-neutral-800);
    --dk-border-neutral-elevation-focus: var(--dk-color-neutral-700);
    --dk-border-neutral-elevation-hover: var(--dk-color-neutral-700);
    --dk-border-neutral-focus: var(--dk-color-neutral-100);
    --dk-border-neutral-hover: var(--dk-color-neutral-200);
    --dk-border-neutral-subtle: var(--dk-color-neutral-600);
    --dk-border-neutral-subtle-focus: var(--dk-color-neutral-400);
    --dk-border-neutral-subtle-hover: var(--dk-color-neutral-500);
    --dk-border-page-default: var(--dk-color-neutral-700);
    --dk-border-page-secondary: var(--dk-color-neutral-800);
    --dk-border-primary-default: var(--dk-color-primary-500);
    --dk-border-primary-disabled: var(--dk-color-primary-700);
    --dk-border-primary-elevation: var(--dk-color-primary-800);
    --dk-border-primary-elevation-focus: var(--dk-color-primary-600);
    --dk-border-primary-elevation-hover: var(--dk-color-primary-700);
    --dk-border-primary-focus: var(--dk-color-primary-300);
    --dk-border-primary-hover: var(--dk-color-primary-400);
    --dk-border-primary-on-color: var(--dk-color-primary-700);
    --dk-border-primary-subtle: var(--dk-color-primary-800);
    --dk-border-primary-subtle-focus: var(--dk-color-primary-600);
    --dk-border-primary-subtle-hover: var(--dk-color-primary-700);
    --dk-border-success-default: var(--dk-color-success-400);
    --dk-border-success-elevation: var(--dk-color-success-800);
    --dk-border-success-elevation-focus: var(--dk-color-success-700);
    --dk-border-success-elevation-hover: var(--dk-color-success-700);
    --dk-border-success-focus: var(--dk-color-success-200);
    --dk-border-success-hover: var(--dk-color-success-300);
    --dk-border-success-subtle: var(--dk-color-success-50);
    --dk-border-success-subtle-focus: var(--dk-color-success-200);
    --dk-border-success-subtle-hover: var(--dk-color-success-100);
    --dk-border-warning-default: var(--dk-color-warning-400);
    --dk-border-warning-elevation: var(--dk-color-warning-800);
    --dk-border-warning-elevation-focus: var(--dk-color-warning-700);
    --dk-border-warning-elevation-hover: var(--dk-color-warning-700);
    --dk-border-warning-focus: var(--dk-color-warning-200);
    --dk-border-warning-hover: var(--dk-color-warning-300);
    --dk-border-warning-subtle: var(--dk-color-warning-50);
    --dk-border-warning-subtle-focus: var(--dk-color-warning-200);
    --dk-border-warning-subtle-hover: var(--dk-color-warning-100);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */

/* ───────────────────────────────────────────────────────────
   COLLECTION: Mapped
   GROUP: Border
   ─────────────────────────────────────────────────────────── */

/* --dk-border-raised-default
   The companion border to --dk-surface-raised-default. Renamed from the
   earlier --border-neutral-soft so the surface/border pairing is obvious
   at the call site (raised surface + raised border = consistent floating-
   chrome treatment).
     Light → color-neutral-50
     Dark  → color-neutral-800

   ── THE HAIRLINE RAMP (refactor 2026-08-18) ──
   Every raised- and nested-border value across this file, INCLUDING the
   surface-level remaps, is one position on a single five-step ramp:
     pos    0     1     2     3     4     5
     Light  n-50  n-100 n-200 n-300 n-400 n-500
     Dark   n-800 n-700 n-600 n-500 n-400 n-300

   ── TWO LADDERS ON ONE RAMP, BY WHETHER A SHADOW IS PRESENT (2026-08-18) ──
   Total edge definition = border + shadow, so an element carrying a shadow
   needs LESS border than one defined by its border alone. Two families read
   off this ramp at different starting positions:
     --border-raised-*   pos 0/1/2 — elevated chrome that ALSO has a shadow:
                         cards, modals, snippets, the sidebar.
     --border-control-*  pos 1/2/3 in LIGHT (pos 0/1/2 in dark) — controls
                         with NO resting shadow, where the hairline is the
                         only thing defining the edge: plain/raised buttons.
   History worth keeping: pos 0 was briefly retuned to a minted n-75
   half-step for EVERYBODY, which fixed the button and immediately made the
   shadowed cards read too heavy (Julio) — the tell that one token was
   serving two roles. The control family was split out at n-75, then tuned
   one further step to n-100 on the same day; the half-step primitive was
   removed once nothing consumed it (re-mint it if a value between 50 and
   100 is ever wanted again).

   Roles read off it by index, and a surface level shifts the index by the
   level number — exactly how the surface ladder itself works:
     raised-default = pos 0+level    nested-default = pos 1+level
     raised-hover   = pos 1+level    nested-hover   = pos 2+level
     raised-active  = pos 2+level    nested-active  = pos 3+level
   Six positions exist because nested-active at level 2 reaches pos 5. Making
   the ramp explicit immediately caught a bug it had been hiding: the level
   blocks used to remap only nested-DEFAULT, so at level 2 the nested hover
   border came out LIGHTER than its own resting border. All six roles shift
   together now.

   These were 28 RAW HEX declarations (a hand-authored pure-grey ladder in
   light, #EBEBEB→#B3B3B3 at −14/step, and a tinted one in dark) — the only
   colours in the system with no primitive backing. Three problems that fixed:
     1. They were BRAND-BLIND. --color-neutral-* resolves to the gray family
        for karmo and the stale family for the other brand; raw hex ignored
        that, so borders stayed karmo-toned on every brand.
     2. They couldn't be retuned centrally, and the surface-levels work had
        to EXTRAPOLATE four new ones by eye for want of a ramp to index.
     3. The −14 spacing sat BELOW the ~20-unit perceptibility threshold (see
        --dk-surface-inverse-hover), so border state changes were marginal; the
        scale's native ~22 spacing makes them read.
   On the tint question (Julio's call — pure grey, no new scale): at the light
   end the scale's own tint is 2–4 units, i.e. visually pure already, so
   pos 0 lands Δ2 from the old #EBEBEB. At the dark end the tint is large and
   WANTED — it matches the teal-tinted dark surfaces, and a truly pure grey
   hairline would read warm against them. So the scale gives both for free
   and no new primitives were needed.
   Still raw, deliberately: --dk-border-raised-subtle and the two *-glass
   borders, which are translucent (rgba) rather than ramp positions. */
[data-theme="light"] {
  --dk-border-raised-default: var(--dk-color-neutral-50);
}
[data-theme="dark"] {
  --dk-border-raised-default: var(--dk-color-neutral-800);
}

/* --dk-border-raised-hover
   The hover variant of --dk-border-raised-default, mirroring the surface-side
   --dk-surface-raised-hover. One tone darker in light, one tone lighter in
   dark, so the border subtly strengthens on hover in both themes.
     Light → color-neutral-100   (hairline ramp pos 1 — see the ramp table
     Dark  → color-neutral-700    on --dk-border-raised-default above) */
[data-theme="light"] {
  --dk-border-raised-hover: var(--dk-color-neutral-100);
}
[data-theme="dark"] {
  --dk-border-raised-hover: var(--dk-color-neutral-700);
}

/* --dk-border-raised-active
   The pressed/active variant — one tone beyond --dk-border-raised-hover in
   the same direction. Combined with --dk-surface-raised-active they form
   the third step in a "rest → hover → active" progression.
     Light → color-neutral-200   (hairline ramp pos 2)
     Dark  → color-neutral-600 */
[data-theme="light"] {
  --dk-border-raised-active: var(--dk-color-neutral-200);
}
[data-theme="dark"] {
  --dk-border-raised-active: var(--dk-color-neutral-600);
}

/* --dk-border-control-default / -hover / -active
   The hairline ladder for an interactive control that carries NO shadow, so
   its border is the ONLY thing defining its edge — the `plain` and `raised`
   button variants today. Stronger than --dk-border-raised-default, which is
   tuned for elevated chrome whose shadow shares the work (see the
   two-resting-positions note on --dk-border-raised-default above).
   WHEN TO USE WHICH — mechanical, not a judgement call: does the element
   have a resting box-shadow? Yes → the --border-raised-* family. No → this.

   In LIGHT this is the chrome ramp shifted one position (pos 1/2/3 against
   chrome's 0/1/2), which is why it needs its own hover/active rather than
   borrowing chrome's: resting on chrome's pos 1 would collide with chrome's
   HOVER value and the control would stop changing on hover. Keeping the
   whole ladder shifted preserves a ~22-unit step per state.
   In DARK it simply equals the chrome ramp (pos 0/1/2) — dark hairlines were
   never reported as weak, and that ramp's strides are tighter anyway. The
   asymmetry is tuned by eye, not derived; adjust it the same way.
     Light → neutral-100 / 200 / 300   (tuned darker twice on 2026-08-18)
     Dark  → neutral-800 / 700 / 600
   Candidates for adopting this later, once reviewed on screen: unshadowed
   chips, toggles, and any input/select that reads too faint at rest. */
/* THE LEVEL-2 RUNGS EXIST BECAUSE THE SURFACE UNDER THEM CATCHES THEM UP.
   --dk-surface-lifted-default steps down the ramp with data-surface, 25 to 50
   to 100 in light, while this border stayed pinned at 100: by level 2 the
   border and the control's own background were THE SAME COLOUR and the button
   read as borderless. Dark does the same thing one rung apart, #1f2b2d to
   neutral-900 to neutral-800 against a pinned neutral-800. Reported on the
   raised button, measured at a border-to-background contrast of exactly 1.000
   at level 2 where every other level sits near 1.33 in light and 1.54 in dark.

   ONLY LEVEL 2 IS REMAPPED, deliberately. Level 1 already runs a touch flatter
   than level 0 (1.213 against 1.329) and reads correctly on screen, and moving
   it a whole rung would overshoot level 0's own contrast rather than match it:
   the ramp has no rung between 100 and 200 to land on. The defect is the
   collision, not the gradient. */
[data-theme="light"] {
  --dk-border-control-default: var(--dk-color-neutral-100);
  --dk-border-control-hover: var(--dk-color-neutral-200);
  --dk-border-control-active: var(--dk-color-neutral-300);
  --dk-border-control-default-level-2: var(--dk-color-neutral-200);
  --dk-border-control-hover-level-2: var(--dk-color-neutral-300);
  --dk-border-control-active-level-2: var(--dk-color-neutral-400);
}
[data-theme="dark"] {
  --dk-border-control-default: var(--dk-color-neutral-800);
  --dk-border-control-hover: var(--dk-color-neutral-700);
  --dk-border-control-active: var(--dk-color-neutral-600);
  /* Lighter, not darker: on a dark surface the border is the lighter of the
     two, so following the surface down the ramp means going UP these rungs. */
  --dk-border-control-default-level-2: var(--dk-color-neutral-700);
  --dk-border-control-hover-level-2: var(--dk-color-neutral-600);
  --dk-border-control-active-level-2: var(--dk-color-neutral-500);
}

/* --dk-border-control-lifted-default / -hover / -active  (NEW, 29 Oct)
   The RAISED Button and Icon button's edge: the control ladder above a tone
   more subtle (Julio). Plain keeps the control ladder; only the lifted variant,
   which has its own fill to say where it is, softens. A rung down in light,
   level 2 included (still a rung clear of that surface); half a rung in dark,
   where the ladder's next rung down would be the surface itself.
     Light → neutral-50 / 100 / 200     level 2: 100 / 200 / 300
     Dark  → neutral-850 / 750 / 650    level 2: 750 / 650 / 550 */
[data-theme="light"] {
  --dk-border-control-lifted-default: var(--dk-color-neutral-50);
  --dk-border-control-lifted-hover: var(--dk-color-neutral-100);
  --dk-border-control-lifted-active: var(--dk-color-neutral-200);
  --dk-border-control-lifted-default-level-2: var(--dk-color-neutral-100);
  --dk-border-control-lifted-hover-level-2: var(--dk-color-neutral-200);
  --dk-border-control-lifted-active-level-2: var(--dk-color-neutral-300);
}
[data-theme="dark"] {
  --dk-border-control-lifted-default: var(--dk-color-neutral-850);
  --dk-border-control-lifted-hover: var(--dk-color-neutral-750);
  --dk-border-control-lifted-active: var(--dk-color-neutral-650);
  --dk-border-control-lifted-default-level-2: var(--dk-color-neutral-750);
  --dk-border-control-lifted-hover-level-2: var(--dk-color-neutral-650);
  --dk-border-control-lifted-active-level-2: var(--dk-color-neutral-550);
}

/* --dk-border-raised-control-default / -hover / -active  (NEW, 29 Oct)
   The raised CONTROLS' container edge (Glider, the Switch's raised container,
   Breadcrumb's raised trail): the raised ramp a tone more subtle, stepping
   with the level as that ramp does. Menus, modals, Box and Card keep the
   raised ramp itself, so the chrome around a page does not move.
     Light → neutral-25 / 50 / 100      level 1: 50 / 100 / 200    level 2: 100 / 200 / 300
     Dark  → neutral-850 / 750 / 650    level 1: 750 / 650 / 550   level 2: 650 / 550 / 450 */
[data-theme="light"] {
  --dk-border-raised-control-default: var(--dk-color-neutral-25);
  --dk-border-raised-control-hover: var(--dk-color-neutral-50);
  --dk-border-raised-control-active: var(--dk-color-neutral-100);
  --dk-border-raised-control-default-level-1: var(--dk-color-neutral-50);
  --dk-border-raised-control-hover-level-1: var(--dk-color-neutral-100);
  --dk-border-raised-control-active-level-1: var(--dk-color-neutral-200);
  --dk-border-raised-control-default-level-2: var(--dk-color-neutral-100);
  --dk-border-raised-control-hover-level-2: var(--dk-color-neutral-200);
  --dk-border-raised-control-active-level-2: var(--dk-color-neutral-300);
}
[data-theme="dark"] {
  --dk-border-raised-control-default: var(--dk-color-neutral-850);
  --dk-border-raised-control-hover: var(--dk-color-neutral-750);
  --dk-border-raised-control-active: var(--dk-color-neutral-650);
  --dk-border-raised-control-default-level-1: var(--dk-color-neutral-750);
  --dk-border-raised-control-hover-level-1: var(--dk-color-neutral-650);
  --dk-border-raised-control-active-level-1: var(--dk-color-neutral-550);
  --dk-border-raised-control-default-level-2: var(--dk-color-neutral-650);
  --dk-border-raised-control-hover-level-2: var(--dk-color-neutral-550);
  --dk-border-raised-control-active-level-2: var(--dk-color-neutral-450);
}

/* --dk-border-raised-subtle
   An extra-faint companion border for raised/recessed sections where even
   --dk-border-raised-default (ramp pos 0) reads as too hard a line against a near-white
   surface (e.g. the modal's "use design system" switch-field on --dk-surface-neutral-subtle).
   Translucent rather than a fixed grey so it stays barely-there on any light surface
   (and a faint light edge on dark) — no neutral primitive sits between gray-25 and
   gray-50, so a raw low-opacity value is the only way to land between them.
     Light → rgba(0,0,0,0.025)   (~6 tonal units on an off-white surface)
     Dark  → rgba(255,255,255,0.05) */
[data-theme="light"] {
  --dk-border-raised-subtle: rgb(from var(--dk-color-base-black) r g b / var(--dk-primitive-opacity-hairline-subtle));
}
[data-theme="dark"] {
  --dk-border-raised-subtle: rgb(from var(--dk-color-base-white) r g b / var(--dk-primitive-opacity-hairline-subtle-inverse));
}

/* --dk-border-nested-default
   Companion border for --dk-surface-nested-default. One tone past
   --dk-border-raised-default (darker in light, lighter in dark) so a nested box
   reads cleanly against both its own surface and the card behind it.
     Light → color-neutral-100   (hairline ramp pos 1)
     Dark  → color-neutral-700 */
[data-theme="light"] {
  --dk-border-nested-default: var(--dk-color-neutral-100);
}
[data-theme="dark"] {
  --dk-border-nested-default: var(--dk-color-neutral-700);
}

/* --dk-border-nested-glass
   Companion border for --dk-surface-nested-glass — a translucent, deliberately
   SUBTLE edge tuned close to the frosted surface's own tone (barely a step of
   contrast) so the panel edge whispers rather than drawing a line. Same ~72%
   alpha as the surface-glass sibling. DERIVED (2026-08-18) from
   --dk-border-raised-default (hairline ramp pos 0) at --dk-primitive-opacity-glass: the old
   hand-picked rgb sat within 2-5 units of that token in both themes, and pos 0
   — the softest hairline in the ramp — is the right base for an edge meant to
   whisper. NOTE it no longer relates to --dk-border-nested-default, which moved
   two ramp positions darker during the control/chrome split. */
[data-theme="light"] {
  --dk-border-nested-glass: rgb(from var(--dk-border-raised-default) r g b / var(--dk-primitive-opacity-glass));
}
[data-theme="dark"] {
  --dk-border-nested-glass: rgb(from var(--dk-border-raised-default) r g b / var(--dk-primitive-opacity-glass));
}

/* --dk-border-primary-default / -hover / -active / -focus  (OVERRIDE)
   The primary-teal border that pairs with the --surface-primary-* fills (focal
   node, active sidebar destination, active phase tab). Steps in OPPOSITE
   directions per theme so the border always deepens the rim against its canvas.
   -active shares the deepest (focus) step as the pressed-button emphasis:
     Light: default 600 → hover 700 → active/focus 800  (darker than the fill)
     Dark:  default 400 → hover 300 → active/focus 200  (lighter than the fill) */
[data-theme="light"] {
  --dk-border-primary-default: var(--dk-color-primary-600);
  --dk-border-primary-hover: var(--dk-color-primary-700);
  --dk-border-primary-active: var(--dk-color-primary-800);
  --dk-border-primary-focus: var(--dk-color-primary-800);
}
[data-theme="dark"] {
  --dk-border-primary-default: var(--dk-color-primary-400);
  --dk-border-primary-hover: var(--dk-color-primary-300);
  --dk-border-primary-active: var(--dk-color-primary-200);
  --dk-border-primary-focus: var(--dk-color-primary-200);
}

/* --dk-surface-card-active  (NEW)
   Core Drift defines the card surface as default / hover / focus but has no
   -active step. We mirror --dk-surface-card-focus so a pressed/active card surface
   — e.g. the Select trigger's :active state — matches its focus look exactly:
     Light: --dk-color-neutral-50   (same value as --dk-surface-card-focus)
     Dark:  --dk-color-neutral-800  (same value as --dk-surface-card-focus) */
[data-theme="light"] { --dk-surface-card-active: var(--dk-color-neutral-50); }
[data-theme="dark"]  { --dk-surface-card-active: var(--dk-color-neutral-800); }

/* --dk-border-primary-guide  (NEW)
   A soft primary guide line — used for the loop-nesting indicator that runs down
   the side of nested section items (inspector + node). Recedes against its
   surface in BOTH themes (decorative, not a structural rim): pale teal in light,
   a mid teal in dark that reads equivalently quiet against the dark canvas.
   (Deliberately NOT --dk-border-primary-subtle, which the action-node border ramp
   already references via fallback — a shared name would perturb those borders.)
     Light: primary 200   Dark: primary 600 */
[data-theme="light"] {
  --dk-border-primary-guide: var(--dk-color-primary-200);
}
[data-theme="dark"] {
  --dk-border-primary-guide: var(--dk-color-primary-600);
}


/* --dk-border-{error,warning,information}-subtle / -subtle-hover / -subtle-focus
   OVERRIDING UPSTREAM. The upstream block at the top of this file declares
   these three families IDENTICALLY in its light and dark blocks (50/100/200
   both times), which is not a choice anyone made: every other rung in the
   same families flips (error-default 500→400, -hover 600→300, -focus 700→200),
   and the two families someone actually looked at, primary and neutral, flip
   their subtle trios too. The status trios were simply left behind.

   Two things were measured wrong before this override (2026-09-13, reported
   from the Disko session):
     Light  --dk-border-error-subtle resolved to the SAME colour as the fill
            it outlines, --dk-surface-error-subtle. 1.00:1. The token drew
            nothing at all, which is why nobody noticed it in light.
     Dark   the fill flips to -900 and the border did not, so a near-white
            hairline (#fdf2f2) blazed around a dark maroon panel at 9.69:1.
            Warning was worse, 14.69:1; information 10.03:1.

   The rungs here are not new: they are the ones --dk-border-primary-subtle
   already uses (light 100/200/300, dark 800/700/600), so all six tones now
   read off one shape. That lands every status at 1.06-1.10:1 in light and
   1.23-1.63:1 in dark against its own subtle fill, next to primary's
   1.12 / 1.27 and neutral's 1.65 / 2.58.

   Success needs nothing here: mapped/success.css already points its subtle
   border trio at primary's, because success IS jade at Karmo.

   Not to be confused with --dk-border-{status}-structural-on-subtle in
   mapped/tone.css, which is the LEVEL-AWARE border for a tone-scoped subtle
   panel and already flips correctly. That one is a step stronger by design
   (light -200, dark -800); this is the flat family with hover and focus rungs. */
[data-theme="light"] {
  --dk-border-error-subtle: var(--dk-color-error-100);
  --dk-border-error-subtle-hover: var(--dk-color-error-200);
  --dk-border-error-subtle-focus: var(--dk-color-error-300);
  --dk-border-warning-subtle: var(--dk-color-warning-100);
  --dk-border-warning-subtle-hover: var(--dk-color-warning-200);
  --dk-border-warning-subtle-focus: var(--dk-color-warning-300);
  --dk-border-information-subtle: var(--dk-color-information-100);
  --dk-border-information-subtle-hover: var(--dk-color-information-200);
  --dk-border-information-subtle-focus: var(--dk-color-information-300);
}
[data-theme="dark"] {
  --dk-border-error-subtle: var(--dk-color-error-800);
  --dk-border-error-subtle-hover: var(--dk-color-error-700);
  --dk-border-error-subtle-focus: var(--dk-color-error-600);
  --dk-border-warning-subtle: var(--dk-color-warning-800);
  --dk-border-warning-subtle-hover: var(--dk-color-warning-700);
  --dk-border-warning-subtle-focus: var(--dk-color-warning-600);
  --dk-border-information-subtle: var(--dk-color-information-800);
  --dk-border-information-subtle-hover: var(--dk-color-information-700);
  --dk-border-information-subtle-focus: var(--dk-color-information-600);
}

/* --dk-border-field-*  —  THE RESTING BORDER OF AN OUTLINED CONTROL
   ---------------------------------------------------------------------------
   A field that is flush with its surface is defined by its border alone, so
   that border is doing structural work no other border in the kit does. Nothing
   already here fits, and the reason is that THE NEUTRAL RAMP IS NOT MIRRORED:

     light   subtle 200   subtle-hover 400   subtle-focus 500   default 600
     dark    subtle 600   subtle-hover 500   subtle-focus 400   default 300

   so any single token lands on different rungs per theme. neutral-default is
   600 against 300, opposite ENDS, and read as a hard dark outline in light and
   a bright one in dark. neutral-subtle-focus is 500 against 400 and was still
   called too dark in light and too light in dark, which is the same complaint
   twice: the ramp is symmetric but the perception is not, because a near-black
   surface gives any grey more contrast than a near-white one does.

   Measured every rung against --dk-surface-current in both themes at all three
   levels, then every pairing. light-400/dark-600 was the evenest soft pairing
   the ramp contains, 2.41 to 3.21, and dark-600 is where dark settled. Light
   then went one rung softer again, to neutral-300, on the same judgement as
   everything above: still too dark, dark now fine. So the two themes are no
   longer the same rung and no longer need to be, which is the whole reason this
   token is declared per theme rather than borrowed from a mirrored family.

     light   neutral-300   2.26 / 2.07 / 1.89   across levels 0, 1, 2
     dark    neutral-600   3.21 / 2.91 / 2.58

   The next rung down in light is neutral-200 at 1.80 / 1.65 / 1.51, which is
   roughly where GitHub sits, and is available if this is still heavy.

   BELOW THE 3:1 WCAG 1.4.11 FLOOR everywhere except dark level 0, and that is a
   deliberate, designer-made call rather than an oversight. Judge it when the
   palette next moves. The label above the field is always present and is not
   the only thing identifying the control, and this sits where GitHub, Stripe
   and Shopify put the same border, but it is a real trade and it is written
   down here so nobody has to rediscover it.

   Hover steps to neutral-500 in BOTH themes, which is darker in light and
   brighter in dark, so it reads as "more defined" either way, and it is even by
   construction: 3.14 to 4.28. Light's resting rung moving down widened that
   step rather than breaking it, which suits a hover: 2.26 to 3.75 in light,
   3.21 to 4.28 in dark, and the fill moves underneath it as well. */
/* THE RAISED FIELD'S BORDER IS ONE RUNG FAINTER at every state. A field lifted
   on a shadow already has an edge, the shadow's, so the border is doing half
   the job it does on a flush field and the full-strength rung reads as a
   second outline. Two rungs toward the surface in light, where the white page
   makes any grey border stand out, and in dark two at rest and on hover with
   focus one rung down, since primary on a dark fill already reads quietly.
   The error and disabled borders are not in this set, because a raised field
   that is wrong or dead has to say so just as loudly as a flush one.

   ONE RUNG WAS NOT ENOUGH IN LIGHT: neutral-200 on white still read as a drawn
   outline beside the shadow. neutral-100 is 1.4:1 against white, which is
   deliberately below the 3:1 a flush field would need: on a raised field the
   shadow is what says where the control is, and the border only finishes it. */
/* The RAISED field a tone more subtle (29 Oct, Julio): a rung down in light,
   half a rung in dark (the neutral half rungs, alias neutral.css), where 900 is
   the level-2 surface. Light holds neutral-100 on a level-2 surface, the only
   rung that still reads against neutral-50 there.
   The PLAIN Select, Input and Textarea take a rung more subtle again
   (28 Oct, Julio): neutral 200 in light, 700 in dark. Below the 3:1 a flush
   field's edge would need (1.8:1 on white, 2.1:1 on the dark page), by
   decision; everything else reading the field border keeps it. */
[data-theme="light"] {
  --dk-border-field-plain-default: var(--dk-color-neutral-200);
  --dk-border-field-default: var(--dk-color-neutral-300);
  --dk-border-field-hover: var(--dk-color-neutral-500);
  --dk-border-field-raised-default: var(--dk-color-neutral-50);
  --dk-border-field-raised-hover: var(--dk-color-neutral-200);
  /* Level 2's surface IS neutral-50: the field holds the rung that reads. */
  --dk-border-field-raised-default-level-2: var(--dk-color-neutral-100);
  --dk-border-field-raised-focus: var(--dk-color-primary-400);
}
[data-theme="dark"] {
  --dk-border-field-plain-default: var(--dk-color-neutral-700);
  --dk-border-field-default: var(--dk-color-neutral-600);
  --dk-border-field-hover: var(--dk-color-neutral-500);
  --dk-border-field-raised-default: var(--dk-color-neutral-850);
  --dk-border-field-raised-hover: var(--dk-color-neutral-750);
  --dk-border-field-raised-default-level-2: var(--dk-color-neutral-850);
  --dk-border-field-raised-focus: var(--dk-color-primary-500);
}

/* --dk-border-progress  (NEW)
   A progress line's fill, the Action bar's top edge. Not border-primary-default:
   the surface levels remap that to 500 in both themes, which left dark's line
   as dim as light's. Light is 500, a step lighter than the 600 it had (Julio,
   11 Oct); dark climbs to 400 so the line reads against the dark bar.
     Light: primary 500   Dark: primary 400 */
[data-theme="light"] {
  --dk-border-progress: var(--dk-color-primary-500);
}
[data-theme="dark"] {
  --dk-border-progress: var(--dk-color-primary-400);
}
/* --dk-border-progress-start (14 Oct): where the progress gradient begins,
   the loading spinner's idea, soft primary fading up to the head's colour.
     Light: primary 200   Dark: primary 700 (dim on the dark bar, not bright) */
[data-theme="light"] {
  --dk-border-progress-start: var(--dk-color-primary-200);
}
[data-theme="dark"] {
  --dk-border-progress-start: var(--dk-color-primary-700);
}

/* --dk-border-glider-plain  (NEW)
   The edge of a Glider that is not raised (Julio, 13 Oct: "the border needs
   to be a little more contrasting"). With no shadow the hairline does all the
   work, so it sits a rung above the raised edge in BOTH themes. In light that
   is the control hairline; in dark the control hairline equals the raised
   one, so it steps on to 700.
     Light: neutral-100   Dark: neutral-700 */
[data-theme="light"] {
  --dk-border-glider-plain: var(--dk-color-neutral-100);
}
[data-theme="dark"] {
  --dk-border-glider-plain: var(--dk-color-neutral-700);
}

/* ═══════════════════════════════════════ drift-kit:layer tokens/mapped/outline.css ═══════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────
   COLLECTION: Mapped
   GROUP: Outline
   ─────────────────────────────────────────────────────────── */

/* --dk-outline-selected-default
   The ring drawn around an element when it is the "active" (selected) item —
   e.g. the IA Explorer node currently driving the side panel. Rendered as a
   CSS `outline` (drawn OUTSIDE the box, so no layout shift) rather than a
   border, so the element keeps its own resting border treatment underneath.
   Used by elements sitting on neutral / white surfaces (other pages, content
   sections, out-of-scope nodes).
     Light → color-primary-500  (a clear teal ring against white-ish surfaces)
     Dark  → color-primary-200  (a light teal ring that reads against dark) */
[data-theme="light"] {
  --dk-outline-selected-default: var(--dk-color-primary-500);
}
[data-theme="dark"] {
  --dk-outline-selected-default: var(--dk-color-primary-200);
}

/* --dk-outline-selected-on-color
   The selected-ring variant for an element sitting on a COLOURED (primary /
   teal) surface — e.g. the focal "you-are-here" node, whose background is
   --dk-surface-primary-default. The default teal ring has too little contrast
   against a teal fill, so in light mode this steps down to the deepest
   primary; dark mode keeps the same light-teal ring as the default, which
   already contrasts well against the dark teal fill.
     Light → color-primary-700  (deep teal ring on the teal focal fill)
     Dark  → color-primary-200  (== default; light ring reads against dark) */
[data-theme="light"] {
  --dk-outline-selected-on-color: var(--dk-color-primary-700);
}
[data-theme="dark"] {
  --dk-outline-selected-on-color: var(--dk-color-primary-200);
}

/* --dk-focus-ring-primary  (moved here from primitives/transform.css 2026-09-09 — a Mapped token, not a primitive)
   The wide (4px) primary focus ring on search fields (.forge-search). Riding on
   --dk-border-primary-default (primary-600) read too dark/heavy at that width in
   light mode. One step lighter per theme so the ring glows rather than blocks:
     Light → color-primary-500
     Dark  → color-primary-400 */
[data-theme="light"] {
  --dk-focus-ring-primary: var(--dk-color-primary-500);
}
[data-theme="dark"] {
  --dk-focus-ring-primary: var(--dk-color-primary-400);
}

/* ══════════════════════════════════════════ drift-kit:layer tokens/mapped/text.css ══════════════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · mapped/text ═══ */
:root,
[data-theme="light"] {
	--dk-text-default: var(--dk-color-base-black);
	--dk-text-default-reverse: var(--dk-color-base-white);
	--dk-text-base-black: var(--dk-color-base-black);
	--dk-text-base-white: var(--dk-color-base-white);
	--dk-text-disabled-default: var(--dk-color-neutral-400);
	--dk-text-disabled-on-color: var(--dk-color-neutral-300);
	--dk-text-disabled-subtle: var(--dk-color-neutral-200);
	/* Disabled text INSIDE A FORM FIELD (Input, Select). The field keeps its
	   neutral body/card fill inside a tone (as the component library does), so
	   its disabled label must not follow the tone the way --dk-text-disabled-subtle
	   does since 3.1.0. Declared here on [data-theme] it computes to the neutral
	   value at the theme root and is inherited already-resolved — the tone scopes
	   never touch it. Same value as --dk-text-disabled-subtle on a neutral surface. */
	--dk-text-disabled-on-field: var(--dk-text-disabled-subtle);
	--dk-text-error-default: var(--dk-color-error-500);
	--dk-text-error-focus: var(--dk-color-error-700);
	--dk-text-error-hover: var(--dk-color-error-600);
	--dk-text-error-on-color: var(--dk-color-base-white);
	--dk-text-error-on-color-focus: var(--dk-color-base-white);
	--dk-text-error-on-color-hover: var(--dk-color-base-white);
	--dk-text-error-subtle: var(--dk-color-error-50);
	--dk-text-error-subtle-focus: var(--dk-color-error-200);
	--dk-text-error-subtle-hover: var(--dk-color-error-100);
	--dk-text-information-default: var(--dk-color-information-500);
	--dk-text-information-focus: var(--dk-color-information-700);
	--dk-text-information-hover: var(--dk-color-information-600);
	--dk-text-information-on-color: var(--dk-color-base-white);
	--dk-text-information-on-color-focus: var(--dk-color-base-white);
	--dk-text-information-on-color-hover: var(--dk-color-base-white);
	--dk-text-information-subtle: var(--dk-color-information-50);
	--dk-text-information-subtle-focus: var(--dk-color-information-200);
	--dk-text-information-subtle-hover: var(--dk-color-information-100);
	--dk-text-neutral-default: var(--dk-color-neutral-600);
	--dk-text-neutral-focus: var(--dk-color-neutral-800);
	--dk-text-neutral-hover: var(--dk-color-neutral-700);
	--dk-text-neutral-subtle: var(--dk-color-neutral-300);
	--dk-text-neutral-subtle-focus: var(--dk-color-neutral-500);
	--dk-text-neutral-subtle-hover: var(--dk-color-neutral-400);
	--dk-text-on-color-body: var(--dk-color-base-white);
	--dk-text-on-color-caption: var(--dk-color-base-white);
	--dk-text-on-color-heading: var(--dk-color-base-white);
	--dk-text-on-color-placeholder: var(--dk-color-neutral-500);
	--dk-text-primary-default: var(--dk-color-primary-500);
	--dk-text-primary-disabled: var(--dk-color-primary-300);
	--dk-text-primary-focus: var(--dk-color-primary-700);
	--dk-text-primary-hover: var(--dk-color-primary-600);
	--dk-text-primary-on-color: var(--dk-color-primary-500);
	--dk-text-primary-on-color-focus: var(--dk-color-primary-700);
	--dk-text-primary-on-color-hover: var(--dk-color-primary-600);
	--dk-text-primary-subtle: var(--dk-color-primary-50);
	--dk-text-primary-subtle-focus: var(--dk-color-primary-200);
	--dk-text-primary-subtle-hover: var(--dk-color-primary-100);
	--dk-text-success-default: var(--dk-color-success-500);
	--dk-text-success-focus: var(--dk-color-success-700);
	--dk-text-success-hover: var(--dk-color-success-600);
	--dk-text-success-on-color: var(--dk-color-base-white);
	--dk-text-success-on-color-focus: var(--dk-color-base-white);
	--dk-text-success-on-color-hover: var(--dk-color-base-white);
	--dk-text-success-subtle: var(--dk-color-success-50);
	--dk-text-success-subtle-focus: var(--dk-color-success-200);
	--dk-text-success-subtle-hover: var(--dk-color-success-100);
	--dk-text-warning-default: var(--dk-color-warning-500);
	--dk-text-warning-focus: var(--dk-color-warning-700);
	--dk-text-warning-hover: var(--dk-color-warning-600);
	--dk-text-warning-on-color: var(--dk-color-base-white);
	--dk-text-warning-on-color-focus: var(--dk-color-base-white);
	--dk-text-warning-on-color-hover: var(--dk-color-base-white);
	--dk-text-warning-subtle: var(--dk-color-warning-50);
	--dk-text-warning-subtle-focus: var(--dk-color-warning-200);
	--dk-text-warning-subtle-hover: var(--dk-color-warning-100);
}

[data-theme="dark"] {
	--dk-text-default: var(--dk-color-base-white);
	--dk-text-default-reverse: var(--dk-color-base-black);
	--dk-text-base-black: var(--dk-color-base-black);
	--dk-text-base-white: var(--dk-color-base-white);
	--dk-text-disabled-default: var(--dk-color-neutral-400);
	--dk-text-disabled-on-color: var(--dk-color-neutral-600);
	--dk-text-disabled-subtle: var(--dk-color-neutral-700);
	--dk-text-disabled-on-field: var(--dk-text-disabled-subtle); /* see light block */
	--dk-text-error-default: var(--dk-color-error-400);
	--dk-text-error-focus: var(--dk-color-error-200);
	--dk-text-error-hover: var(--dk-color-error-300);
	--dk-text-error-on-color: var(--dk-color-base-white);
	--dk-text-error-on-color-focus: var(--dk-color-base-white);
	--dk-text-error-on-color-hover: var(--dk-color-base-white);
	--dk-text-error-subtle: var(--dk-color-error-900);
	--dk-text-error-subtle-focus: var(--dk-color-error-700);
	--dk-text-error-subtle-hover: var(--dk-color-error-800);
	--dk-text-information-default: var(--dk-color-information-400);
	--dk-text-information-focus: var(--dk-color-information-200);
	--dk-text-information-hover: var(--dk-color-information-300);
	--dk-text-information-on-color: var(--dk-color-base-white);
	--dk-text-information-on-color-focus: var(--dk-color-base-white);
	--dk-text-information-on-color-hover: var(--dk-color-base-white);
	--dk-text-information-subtle: var(--dk-color-information-900);
	--dk-text-information-subtle-focus: var(--dk-color-information-700);
	--dk-text-information-subtle-hover: var(--dk-color-information-800);
	--dk-text-neutral-default: var(--dk-color-neutral-200);
	--dk-text-neutral-focus: var(--dk-color-neutral-50);
	--dk-text-neutral-hover: var(--dk-color-neutral-100);
	--dk-text-neutral-subtle: var(--dk-color-neutral-600);
	--dk-text-neutral-subtle-focus: var(--dk-color-neutral-400);
	--dk-text-neutral-subtle-hover: var(--dk-color-neutral-500);
	--dk-text-on-color-body: var(--dk-color-base-black);
	--dk-text-on-color-caption: var(--dk-color-base-black);
	--dk-text-on-color-heading: var(--dk-color-base-black);
	--dk-text-on-color-placeholder: var(--dk-color-neutral-500);
	--dk-text-primary-default: var(--dk-color-primary-500);
	--dk-text-primary-disabled: var(--dk-color-primary-700);
	--dk-text-primary-focus: var(--dk-color-primary-300);
	--dk-text-primary-hover: var(--dk-color-primary-400);
	--dk-text-primary-on-color: var(--dk-color-primary-500);
	--dk-text-primary-on-color-focus: var(--dk-color-primary-700);
	--dk-text-primary-on-color-hover: var(--dk-color-primary-600);
	--dk-text-primary-subtle: var(--dk-color-primary-900);
	--dk-text-primary-subtle-focus: var(--dk-color-primary-700);
	--dk-text-primary-subtle-hover: var(--dk-color-primary-800);
	--dk-text-success-default: var(--dk-color-success-400);
	--dk-text-success-focus: var(--dk-color-success-200);
	--dk-text-success-hover: var(--dk-color-success-300);
	--dk-text-success-on-color: var(--dk-color-base-white);
	--dk-text-success-on-color-focus: var(--dk-color-base-white);
	--dk-text-success-on-color-hover: var(--dk-color-base-white);
	--dk-text-success-subtle: var(--dk-color-success-900);
	--dk-text-success-subtle-focus: var(--dk-color-success-700);
	--dk-text-success-subtle-hover: var(--dk-color-success-800);
	--dk-text-warning-default: var(--dk-color-warning-400);
	--dk-text-warning-focus: var(--dk-color-warning-200);
	--dk-text-warning-hover: var(--dk-color-warning-300);
	--dk-text-warning-on-color: var(--dk-color-base-white);
	--dk-text-warning-on-color-focus: var(--dk-color-base-white);
	--dk-text-warning-on-color-hover: var(--dk-color-base-white);
	--dk-text-warning-subtle: var(--dk-color-warning-900);
	--dk-text-warning-subtle-focus: var(--dk-color-warning-700);
	--dk-text-warning-subtle-hover: var(--dk-color-warning-800);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */

/* ───────────────────────────────────────────────────────────
   COLLECTION: Mapped
   GROUP: Text
   ─────────────────────────────────────────────────────────── */

/* --dk-text-primary-highlight
   A brighter, more saturated primary text colour used to mark a transient
   "highlighted" state — e.g. the interaction-hint chips on a canvas while
   the user is actively performing the matching action (scrolling to zoom,
   dragging to pan). Sits one step lighter than --dk-text-primary-default so
   the shift reads as feedback rather than as an emphasis-permanence change.
     Light → color-primary-500
     Dark  → color-primary-400 */
[data-theme="light"] {
  --dk-text-primary-highlight: var(--dk-color-primary-500);
}
[data-theme="dark"] {
  --dk-text-primary-highlight: var(--dk-color-primary-400);
}

/* --dk-text-primary-disabled  (LIGHT OVERRIDE)
   Disabled primary text (e.g. the label of an out-of-scope action node). Core
   Drift uses color-primary-300 in light mode, which reads too strong against
   the --dk-surface-primary-subtle fill; we soften it one step to color-primary-200.
   Dark mode keeps the core value. */
[data-theme="light"] {
  --dk-text-primary-disabled: var(--dk-color-primary-200);
}

/* --text-{error,success,warning,information}-active
   The third step of each status TEXT ramp. Core ships -default and
   -hover for every status but -active for PRIMARY only, so a control whose
   label must keep contrast as its tinted fill deepens on press had nowhere
   to land (found 2026-08-18 giving the subtle/outline buttons per-state
   text: their pressed fill is {status}-200, the same fill already judged
   too low-contrast against {status}-500 text at surface level 2).
   Continues each ramp's own stride, matching primary's existing values.
     Light → color-{status}-700   (default 500 → hover 600 → here)
     Dark  → color-{status}-200   (default 400 → hover 300 → here) */
[data-theme="light"] {
  --dk-text-error-active: var(--dk-color-error-700);
  --dk-text-warning-active: var(--dk-color-warning-700);
  --dk-text-information-active: var(--dk-color-information-700);
}
[data-theme="dark"] {
  --dk-text-error-active: var(--dk-color-error-200);
  --dk-text-warning-active: var(--dk-color-warning-200);
  --dk-text-information-active: var(--dk-color-information-200);
}

/* --dk-text-{primary,error,warning,information}-on-subtle
   Status text as it reads sitting on that SAME status's own subtle tint —
   e.g. Alert's title/body on its own --dk-surface-<status>-subtle fill
   (2026-09-13). tone.css already has a token for this exact reading,
   --dk-text-<status>-on-subtle-level-0, and the values below match it
   deliberately — but tone.css is the one mapped file the build's generated
   inverse mirror skips (scripts/build.js: "the tone layer OWNS inverse and
   mirroring it would be circular"), so anything declared only there resolves
   by the literal page theme and reads wrong the moment it is nested inside a
   data-tone="inverse" panel. Found wiring Alert's title/body straight to the
   tone.css token: check:conformance's inverse check (real dark panel must
   equal an inverse panel on a light page, and vice versa) failed 210 ways.
   This family lives in an ordinary both-theme mapped file instead, so the
   mirror covers it the same as everything else in this file.
     Light → color-{status}-700
     Dark  → color-{status}-200
   primary is declared by hand here rather than reused from
   --dk-text-primary-active two files over (mapped/shadow.css), even though
   the value is identical today: that token means "pressed/active interaction
   state", a different axis that happens to land on the same rung and is free
   to move for interaction reasons without taking Alert's resting text with
   it. success is not declared here — it borrows primary in mapped/success.css,
   with the rest of that file's success-is-jade aliases. */
[data-theme="light"] {
  --dk-text-primary-on-subtle: var(--dk-color-primary-700);
  --dk-text-error-on-subtle: var(--dk-color-error-700);
  --dk-text-warning-on-subtle: var(--dk-color-warning-700);
  --dk-text-information-on-subtle: var(--dk-color-information-700);
}
[data-theme="dark"] {
  --dk-text-primary-on-subtle: var(--dk-color-primary-200);
  --dk-text-error-on-subtle: var(--dk-color-error-200);
  --dk-text-warning-on-subtle: var(--dk-color-warning-200);
  --dk-text-information-on-subtle: var(--dk-color-information-200);
}

/* --dk-text-neutral-subtle  (BOTH THEMES)  +  its hover/focus steps
   Core maps subtle to the far end of the neutral ramp — light: neutral-300,
   dark: neutral-600 — which is the SAME pair as -default, simply swapped. That
   leaves secondary text at 2.26:1 in light and 2.91:1 on raised surfaces in
   dark: below WCAG AA (4.5:1) and below even the 3:1 large-text floor in light.
   Measured 2026-08-27 against #ffffff and the dark page/raised surfaces.

   Each theme lands one legible step short of its own -default, keeping the
   subtle/default separation at one ramp step in both:
     Light  neutral-500  2.26 -> 3.75                (default neutral-600, 5.00)
     Dark   neutral-400  2.91 -> 5.05 on raised,
                         3.21 -> 5.57 on page        (default neutral-300, 6.45)

   Dark initially moved to neutral-500 for symmetry with light, but at 3.88:1 on
   raised surfaces it was still reported hard to read (2026-08-28) - dark has
   more ramp headroom than light, so it uses it. Dark now passes AA for body
   text; light's 3.75 remains the known limit: within this ramp nothing higher
   exists without becoming -default itself. Light-mode captions at body size
   that must be AA should use --dk-text-neutral-default.

   The hover and focus steps progress AWAY from the background in both themes -
   they previously sat lighter than the base in light mode, which would have
   made hover reduce contrast instead of raising it. */
[data-theme="light"] {
  --dk-text-neutral-subtle: var(--dk-color-neutral-500);
  --dk-text-neutral-subtle-hover: var(--dk-color-neutral-600);
  --dk-text-neutral-subtle-focus: var(--dk-color-neutral-700);
}
[data-theme="dark"] {
  --dk-text-neutral-subtle: var(--dk-color-neutral-400);
  --dk-text-neutral-subtle-hover: var(--dk-color-neutral-300);
  --dk-text-neutral-subtle-focus: var(--dk-color-neutral-200);
}

/* --dk-icon-neutral-active
   The third step of the neutral ICON ramp. Core Drift ships
   --dk-icon-neutral-default and -hover but stops there, so a control whose icon
   should track a "rest → hover → press" progression had nowhere to land
   (found 2026-08-18 wiring per-state text/icon colours onto the plain and
   raised buttons). Continues the core ramp's own stride by one step.
     Light → color-neutral-700  (core: 500 → 600 → here)
     Dark  → color-neutral-100  (core: 300 → 200 → here) */
[data-theme="light"] {
  --dk-icon-neutral-active: var(--dk-color-neutral-700);
}
[data-theme="dark"] {
  --dk-icon-neutral-active: var(--dk-color-neutral-100);
}

/* --dk-text-nested-default
   Text inside nested item boxes (on --dk-surface-nested-default). One tone stronger
   than --dk-text-neutral-default (neutral-600/300) — darker in light, lighter in
   dark — so it reads clearly on the slightly-contrasted nested surface.
     Light → color-neutral-700
     Dark  → color-neutral-200 */
[data-theme="light"] {
  --dk-text-nested-default: var(--dk-color-neutral-700);
}
[data-theme="dark"] {
  --dk-text-nested-default: var(--dk-color-neutral-200);
}

/* --dk-text-disabled-subtle-hover
   Hover variant of Drift core's --dk-text-disabled-subtle — for dimmed text on
   an element that is still interactive (e.g. out-of-scope IA Explorer nodes,
   which rest at --dk-text-disabled-subtle but remain clickable). Steps one tone
   toward higher contrast than rest: darker in light, lighter in dark.
   Core rests at neutral-200 (light) / neutral-700 (dark).
     Light → color-neutral-300
     Dark  → color-neutral-600 */
[data-theme="light"] {
  --dk-text-disabled-subtle-hover: var(--dk-color-neutral-300);
}
[data-theme="dark"] {
  --dk-text-disabled-subtle-hover: var(--dk-color-neutral-600);
}

/* --dk-text-disabled-subtle-active
   Pressed variant — one tone beyond -hover in the same direction, the third
   step in the disabled-subtle "rest → hover → active" emphasis ramp.
     Light → color-neutral-400
     Dark  → color-neutral-500 */
[data-theme="light"] {
  --dk-text-disabled-subtle-active: var(--dk-color-neutral-400);
}
[data-theme="dark"] {
  --dk-text-disabled-subtle-active: var(--dk-color-neutral-500);
}

/* --text-code-{tag|attr|string|keyword|comment}
   Syntax-highlight palette for code snippets (design-system docs; usable by
   any prototype that renders code). Built on the primary scale + its
   analogous-hue neighbour families (Primary neighbours group below) so the
   highlighting reads as ONE branded palette rather than an imported editor
   theme: same tone/weight per step, hues fanned around the primary.
     tag      → the primary itself (element/component names carry the brand)
     attr     → quiet neutral (the snippet's base text grey) — attrs are the
                connective tissue; the VALUES carry the colour (2026-08-17)
     string   → next2 (+36°, blue) — values/strings pop against the grey attrs
     keyword  → next1 (+18°, cyan) — between tag and string (import/from/const)
     comment  → subtle neutral, deliberately outside the hue fan (de-emphasis)
   Light picks 600 steps for contrast on white code bodies; dark picks
   300 steps on the deep neutral body. */
[data-theme="light"] {
  --dk-text-code-tag: var(--dk-color-primary-600);
  --dk-text-code-attr: var(--dk-text-neutral-default);
  --dk-text-code-string: var(--dk-primitive-color-primary-next2-600);
  --dk-text-code-keyword: var(--dk-primitive-color-primary-next1-600);
  --dk-text-code-comment: var(--dk-color-neutral-400);
}
[data-theme="dark"] {
  --dk-text-code-tag: var(--dk-color-primary-300);
  --dk-text-code-attr: var(--dk-text-neutral-default);
  --dk-text-code-string: var(--dk-primitive-color-primary-next2-300);
  --dk-text-code-keyword: var(--dk-primitive-color-primary-next1-300);
  --dk-text-code-comment: var(--dk-color-neutral-500);
}

/* --dk-text-eyebrow-default  (moved here from primitives/transform.css 2026-09-09)
   Small uppercase SECTION EYEBROWS (the sidebar's "Visibility" / "Items" labels
   and kin). Core Drift's --dk-text-neutral-subtle is THEME-INDEPENDENT (#a6aeaf),
   which reads too faint against light surfaces and too dim against dark ones.
   This maps a real contrast step per theme:
     Light → color-neutral-600 (darker than subtle)
     Dark  → color-neutral-300 (lighter than subtle) */
[data-theme="light"] {
  --dk-text-eyebrow-default: var(--dk-color-neutral-600);
}
[data-theme="dark"] {
  --dk-text-eyebrow-default: var(--dk-color-neutral-300);
}

/* --dk-text-field-placeholder  —  HINT TEXT INSIDE A CONTROL
   ---------------------------------------------------------------------------
   A placeholder has one job: read as clearly NOT the value. The value is
   --dk-text-default, 12.88 to 21 against the field, so the gap does the work.
   Three earlier attempts each missed for a different reason.
   --dk-text-disabled-on-color means text on a status fill, which this is not,
   and had no level variants. --dk-text-disabled-default was 2.41 in light
   against 4.46 in dark, lopsided. --dk-text-neutral-subtle CLIMBS with the
   level, 3.75 to 5.75 in light and up to 7.14 in dark, which is how it ended up
   looking like a value someone had typed in grey.

   Same pairing as --dk-border-field-default, and for the same measured reason:
   light-400 with dark-600 is the evenest soft band the ramp offers, 2.41 to
   3.21. Sharing the border's colour is not an accident to be tidied away later;
   an empty field reading as one quiet grey outline plus one quiet grey hint is
   the point. They are two tokens rather than one so they can diverge if a
   future design wants them to.

   This is deliberately below AA, and the docs say so: a placeholder can never
   carry the label, the format hint, or anything else a reader needs. Those go
   in the label and the caption, which clear AA comfortably. */
[data-theme="light"] {
  --dk-text-field-placeholder: var(--dk-color-neutral-400);
}
[data-theme="dark"] {
  --dk-text-field-placeholder: var(--dk-color-neutral-600);
}

/* --dk-text-link-{default,hover,active,underline}
   The link ramp (29 Sep 2026), for dk-component-link and the bare links the
   kit's text components style. Its own family rather than --dk-text-primary-*
   because that token is jade-500 in light, 2.82:1 on white, which cannot carry
   text a reader has to read. Rest, hover and active step one rung at a time
   along the primary ramp, darkening in light and brightening in dark, which
   lines up with the existing --dk-text-primary-hover and -focus steps.

   LIGHT REST IS 600, NOT 700, BY DECISION. 700 clears AA at 6.75:1 but was
   judged too dark beside the rest of the brand; 600 is 4.25:1 on white, under
   AA for body-size text and over it for large text. check:contrast records it
   as a known exception rather than lowering its threshold. Hover and active
   clear AA in both themes.

   THE UNDERLINE IS A LIGHTER RUNG at rest so an underlined sentence does not
   read as a row of bars; on hover the link takes currentColor for it.
     Light → default 600 · hover 700 · active 800 · underline 300
     Dark  → default 500 · hover 400 · active 300 · underline 700 */
[data-theme="light"] {
  --dk-text-link-default: var(--dk-color-primary-600);
  --dk-text-link-hover: var(--dk-color-primary-700);
  --dk-text-link-active: var(--dk-color-primary-800);
  --dk-text-link-underline: var(--dk-color-primary-300);
}
[data-theme="dark"] {
  --dk-text-link-default: var(--dk-color-primary-500);
  --dk-text-link-hover: var(--dk-color-primary-400);
  --dk-text-link-active: var(--dk-color-primary-300);
  --dk-text-link-underline: var(--dk-color-primary-700);
}

/* --dk-text-primary-brand  (NEW)
   The brand's own tone as text: the middle primary in light and a step
   lighter in dark (Julio, 12 Oct). A branding decision, made knowing 500 on
   white is about 2.8:1, under AA, so it is for text that is never colour
   alone: a selected tab, a credit with its minus sign.
     Light: primary 500   Dark: primary 400 */
[data-theme="light"] {
  --dk-text-primary-brand: var(--dk-color-primary-500);
}
[data-theme="dark"] {
  --dk-text-primary-brand: var(--dk-color-primary-400);
}
/* --dk-text-tabs-selected: the selected tab's label, glyph and underline. */
:root, [data-theme] {
  --dk-text-tabs-selected: var(--dk-text-primary-brand);
}

/* --dk-text-on-{status}-fill  (NEW, 13 Oct 2026)
   Content ON a status fill: a filled button's label, a pill's words. White on
   the page, in both themes. Inside a solid tone the fill inverts to white and
   this takes the status's 700 (tone.css, rule C), which a literal white could
   never do. */
[data-theme="light"], [data-theme="dark"] {
  --dk-text-on-primary-fill: var(--dk-text-base-white);
  --dk-text-on-success-fill: var(--dk-text-base-white);
  --dk-text-on-error-fill: var(--dk-text-base-white);
  --dk-text-on-warning-fill: var(--dk-text-base-white);
  --dk-text-on-information-fill: var(--dk-text-base-white);
}

/* --dk-text-{status}-outline  (NEW, 13 Oct 2026)
   Text in a status colour with no fill under it: an outline Tag's label. On
   the page it is the on-subtle rung; inside a solid tone it follows the status
   text the tone adapts (tone.css, rule C), where on-subtle stays the tint's own
   reading for chips that paint one. */
[data-theme="light"], [data-theme="dark"] {
  --dk-text-primary-outline: var(--dk-text-primary-on-subtle);
  --dk-text-success-outline: var(--dk-text-success-on-subtle);
  --dk-text-error-outline: var(--dk-text-error-on-subtle);
  --dk-text-warning-outline: var(--dk-text-warning-on-subtle);
  --dk-text-information-outline: var(--dk-text-information-on-subtle);
}

/* --dk-text-on-{status}-mark  (NEW, 13 Oct 2026)
   Words on a status mark (--dk-surface-{status}-mark): white on the page, the
   status's 700 where a solid tone inverts the mark to white. */
[data-theme="light"], [data-theme="dark"] {
  --dk-text-on-primary-mark: var(--dk-text-base-white);
  --dk-text-on-success-mark: var(--dk-text-base-white);
  --dk-text-on-error-mark: var(--dk-text-base-white);
  --dk-text-on-warning-mark: var(--dk-text-base-white);
  --dk-text-on-information-mark: var(--dk-text-base-white);
}

/* ══════════════════════════════════════════ drift-kit:layer tokens/mapped/icon.css ══════════════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · mapped/icon ═══ */
:root,
[data-theme="light"] {
	--dk-icon-base-black: var(--dk-color-base-black);
	--dk-icon-base-white: var(--dk-color-base-white);
	--dk-icon-default-body: var(--dk-color-base-black);
	--dk-icon-default-body-reverse: var(--dk-color-base-white);
	--dk-icon-disabled-default: var(--dk-color-neutral-400);
	--dk-icon-disabled-on-color: var(--dk-color-neutral-300);
	--dk-icon-disabled-subtle: var(--dk-color-neutral-100);
	--dk-icon-disabled-on-field: var(--dk-icon-disabled-subtle); /* field-internal icon; tone-immune, see text.css */
	--dk-icon-error-default: var(--dk-color-error-500);
	--dk-icon-error-focus: var(--dk-color-error-700);
	--dk-icon-error-hover: var(--dk-color-error-600);
	--dk-icon-error-on-color: var(--dk-color-base-white);
	--dk-icon-error-on-color-focus: var(--dk-color-base-white);
	--dk-icon-error-on-color-hover: var(--dk-color-base-white);
	--dk-icon-error-subtle: var(--dk-color-error-50);
	--dk-icon-error-subtle-focus: var(--dk-color-error-200);
	--dk-icon-error-subtle-hover: var(--dk-color-error-100);
	--dk-icon-information-default: var(--dk-color-information-500);
	--dk-icon-information-focus: var(--dk-color-information-700);
	--dk-icon-information-hover: var(--dk-color-information-600);
	--dk-icon-information-on-color: var(--dk-color-base-white);
	--dk-icon-information-on-color-focus: var(--dk-color-base-white);
	--dk-icon-information-on-color-hover: var(--dk-color-base-white);
	--dk-icon-information-subtle: var(--dk-color-information-50);
	--dk-icon-information-subtle-focus: var(--dk-color-information-200);
	--dk-icon-information-subtle-hover: var(--dk-color-information-100);
	--dk-icon-neutral-default: var(--dk-color-neutral-500);
	--dk-icon-neutral-focus: var(--dk-color-neutral-700);
	--dk-icon-neutral-hover: var(--dk-color-neutral-600);
	--dk-icon-neutral-subtle: var(--dk-color-neutral-300);
	--dk-icon-neutral-subtle-focus: var(--dk-color-neutral-500);
	--dk-icon-neutral-subtle-hover: var(--dk-color-neutral-400);
	--dk-icon-primary-default: var(--dk-color-primary-500);
	--dk-icon-primary-disabled: var(--dk-color-primary-300);
	--dk-icon-primary-focus: var(--dk-color-primary-700);
	--dk-icon-primary-hover: var(--dk-color-primary-600);
	--dk-icon-primary-on-color: var(--dk-color-base-white);
	--dk-icon-primary-on-color-focus: var(--dk-color-base-white);
	--dk-icon-primary-on-color-hover: var(--dk-color-base-white);
	--dk-icon-primary-subtle: var(--dk-color-primary-50);
	--dk-icon-primary-subtle-focus: var(--dk-color-primary-200);
	--dk-icon-primary-subtle-hover: var(--dk-color-primary-100);
	--dk-icon-success-default: var(--dk-color-success-500);
	--dk-icon-success-focus: var(--dk-color-success-700);
	--dk-icon-success-hover: var(--dk-color-success-600);
	--dk-icon-success-on-color: var(--dk-color-base-white);
	--dk-icon-success-on-color-focus: var(--dk-color-base-white);
	--dk-icon-success-on-color-hover: var(--dk-color-base-white);
	--dk-icon-success-subtle: var(--dk-color-success-50);
	--dk-icon-success-subtle-focus: var(--dk-color-success-200);
	--dk-icon-success-subtle-hover: var(--dk-color-success-100);
	--dk-icon-warning-default: var(--dk-color-warning-500);
	--dk-icon-warning-focus: var(--dk-color-warning-700);
	--dk-icon-warning-hover: var(--dk-color-warning-600);
	--dk-icon-warning-on-color: var(--dk-color-base-white);
	--dk-icon-warning-on-color-focus: var(--dk-color-base-white);
	--dk-icon-warning-on-color-hover: var(--dk-color-base-white);
	--dk-icon-warning-subtle: var(--dk-color-warning-50);
	--dk-icon-warning-subtle-focus: var(--dk-color-warning-200);
	--dk-icon-warning-subtle-hover: var(--dk-color-warning-100);
}

[data-theme="dark"] {
	--dk-icon-base-black: var(--dk-color-base-black);
	--dk-icon-base-white: var(--dk-color-base-white);
	--dk-icon-default-body: var(--dk-color-base-white);
	--dk-icon-default-body-reverse: var(--dk-color-base-black);
	--dk-icon-disabled-default: var(--dk-color-neutral-400);
	--dk-icon-disabled-on-color: var(--dk-color-neutral-600);
	--dk-icon-disabled-subtle: var(--dk-color-neutral-800);
	--dk-icon-disabled-on-field: var(--dk-icon-disabled-subtle); /* field-internal icon; tone-immune, see text.css */
	--dk-icon-error-default: var(--dk-color-error-400);
	--dk-icon-error-focus: var(--dk-color-error-200);
	--dk-icon-error-hover: var(--dk-color-error-300);
	--dk-icon-error-on-color: var(--dk-color-base-white);
	--dk-icon-error-on-color-focus: var(--dk-color-base-white);
	--dk-icon-error-on-color-hover: var(--dk-color-base-white);
	--dk-icon-error-subtle: var(--dk-color-error-900);
	--dk-icon-error-subtle-focus: var(--dk-color-error-700);
	--dk-icon-error-subtle-hover: var(--dk-color-error-800);
	--dk-icon-information-default: var(--dk-color-information-400);
	--dk-icon-information-focus: var(--dk-color-information-200);
	--dk-icon-information-hover: var(--dk-color-information-300);
	--dk-icon-information-on-color: var(--dk-color-base-white);
	--dk-icon-information-on-color-focus: var(--dk-color-base-white);
	--dk-icon-information-on-color-hover: var(--dk-color-base-white);
	--dk-icon-information-subtle: var(--dk-color-information-900);
	--dk-icon-information-subtle-focus: var(--dk-color-information-700);
	--dk-icon-information-subtle-hover: var(--dk-color-information-800);
	--dk-icon-neutral-default: var(--dk-color-neutral-200);
	--dk-icon-neutral-focus: var(--dk-color-neutral-50);
	--dk-icon-neutral-hover: var(--dk-color-neutral-100);
	--dk-icon-neutral-subtle: var(--dk-color-neutral-600);
	--dk-icon-neutral-subtle-focus: var(--dk-color-neutral-400);
	--dk-icon-neutral-subtle-hover: var(--dk-color-neutral-500);
	--dk-icon-primary-default: var(--dk-color-primary-500);
	--dk-icon-primary-disabled: var(--dk-color-primary-700);
	--dk-icon-primary-focus: var(--dk-color-primary-300);
	--dk-icon-primary-hover: var(--dk-color-primary-400);
	--dk-icon-primary-on-color: var(--dk-color-base-white);
	--dk-icon-primary-on-color-focus: var(--dk-color-base-white);
	--dk-icon-primary-on-color-hover: var(--dk-color-base-white);
	--dk-icon-primary-subtle: var(--dk-color-primary-800);
	--dk-icon-primary-subtle-focus: var(--dk-color-primary-600);
	--dk-icon-primary-subtle-hover: var(--dk-color-primary-700);
	--dk-icon-success-default: var(--dk-color-success-400);
	--dk-icon-success-focus: var(--dk-color-success-200);
	--dk-icon-success-hover: var(--dk-color-success-300);
	--dk-icon-success-on-color: var(--dk-color-base-white);
	--dk-icon-success-on-color-focus: var(--dk-color-base-white);
	--dk-icon-success-on-color-hover: var(--dk-color-base-white);
	--dk-icon-success-subtle: var(--dk-color-success-900);
	--dk-icon-success-subtle-focus: var(--dk-color-success-700);
	--dk-icon-success-subtle-hover: var(--dk-color-success-800);
	--dk-icon-warning-default: var(--dk-color-warning-400);
	--dk-icon-warning-focus: var(--dk-color-warning-200);
	--dk-icon-warning-hover: var(--dk-color-warning-300);
	--dk-icon-warning-on-color: var(--dk-color-base-white);
	--dk-icon-warning-on-color-focus: var(--dk-color-base-white);
	--dk-icon-warning-on-color-hover: var(--dk-color-base-white);
	--dk-icon-warning-subtle: var(--dk-color-warning-900);
	--dk-icon-warning-subtle-focus: var(--dk-color-warning-700);
	--dk-icon-warning-subtle-hover: var(--dk-color-warning-800);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */

/* ───────────────────────────────────────────────────────────
   COLLECTION: Mapped
   GROUP: Icon
   ─────────────────────────────────────────────────────────── */

/* --icon-{error,success,warning,information}-active
   The third step of each status ICON ramp. Core ships -default and
   -hover for every status but -active for PRIMARY only, so a control whose
   label must keep contrast as its tinted fill deepens on press had nowhere
   to land (found 2026-08-18 giving the subtle/outline buttons per-state
   text: their pressed fill is {status}-200, the same fill already judged
   too low-contrast against {status}-500 text at surface level 2).
   Continues each ramp's own stride, matching primary's existing values.
     Light → color-{status}-700   (default 500 → hover 600 → here)
     Dark  → color-{status}-200   (default 400 → hover 300 → here) */
[data-theme="light"] {
  --dk-icon-error-active: var(--dk-color-error-700);
  --dk-icon-warning-active: var(--dk-color-warning-700);
  --dk-icon-information-active: var(--dk-color-information-700);
}
[data-theme="dark"] {
  --dk-icon-error-active: var(--dk-color-error-200);
  --dk-icon-warning-active: var(--dk-color-warning-200);
  --dk-icon-information-active: var(--dk-color-information-200);
}

/* --dk-icon-primary-highlight
   The icon-side counterpart to --dk-text-primary-highlight. Kept as a
   separate token (rather than aliasing the text one) so that icon and
   text highlight colours can diverge in the future without breaking
   either semantic.
     Light → color-primary-500
     Dark  → color-primary-400 */
[data-theme="light"] {
  --dk-icon-primary-highlight: var(--dk-color-primary-500);
}
[data-theme="dark"] {
  --dk-icon-primary-highlight: var(--dk-color-primary-400);
}

/* --dk-icon-primary-disabled  (LIGHT OVERRIDE)
   Icon-side counterpart to the --dk-text-primary-disabled light override above —
   softened from core's color-primary-300 to color-primary-200 so the disabled
   icon of an out-of-scope action node sits gently on --dk-surface-primary-subtle.
   Dark mode keeps the core value. */
[data-theme="light"] {
  --dk-icon-primary-disabled: var(--dk-color-primary-200);
}

/* --dk-icon-disabled-subtle-hover
   Icon-side counterpart to --dk-text-disabled-subtle-hover, for the dimmed icon
   inside an interactive disabled-looking element. Core rests at neutral-100
   (light) / neutral-800 (dark); hover steps one tone toward contrast.
     Light → color-neutral-200
     Dark  → color-neutral-700 */
[data-theme="light"] {
  --dk-icon-disabled-subtle-hover: var(--dk-color-neutral-200);
}
[data-theme="dark"] {
  --dk-icon-disabled-subtle-hover: var(--dk-color-neutral-700);
}

/* --dk-icon-disabled-subtle-active
   Pressed variant — one tone beyond -hover, the third step in the icon
   disabled-subtle "rest → hover → active" ramp.
     Light → color-neutral-300
     Dark  → color-neutral-600 */
[data-theme="light"] {
  --dk-icon-disabled-subtle-active: var(--dk-color-neutral-300);
}
[data-theme="dark"] {
  --dk-icon-disabled-subtle-active: var(--dk-color-neutral-600);
}

/* --dk-icon-on-{status}-fill  (NEW, 13 Oct 2026)
   Content ON a status fill: a filled button's label, a pill's words. White on
   the page, in both themes. Inside a solid tone the fill inverts to white and
   this takes the status's 700 (tone.css, rule C), which a literal white could
   never do. */
[data-theme="light"], [data-theme="dark"] {
  --dk-icon-on-primary-fill: var(--dk-icon-base-white);
  --dk-icon-on-success-fill: var(--dk-icon-base-white);
  --dk-icon-on-error-fill: var(--dk-icon-base-white);
  --dk-icon-on-warning-fill: var(--dk-icon-base-white);
  --dk-icon-on-information-fill: var(--dk-icon-base-white);
}

/* --dk-icon-on-{status}-mark  (NEW, 13 Oct 2026): the glyph twin. */
[data-theme="light"], [data-theme="dark"] {
  --dk-icon-on-primary-mark: var(--dk-icon-base-white);
  --dk-icon-on-success-mark: var(--dk-icon-base-white);
  --dk-icon-on-error-mark: var(--dk-icon-base-white);
  --dk-icon-on-warning-mark: var(--dk-icon-base-white);
  --dk-icon-on-information-mark: var(--dk-icon-base-white);
}

/* NEUTRAL ICON = SUBTLE WORDS, BOTH THEMES (11 Nov 2026, Julio). Light always
   paired icon neutral default with text neutral subtle (500, hover 600, focus
   700, the level steps in surface.css too). Upstream's dark put the icon at
   the text DEFAULT's steps (200, 100, 50), so a glyph beside subtle words
   glared brighter than them. Dark now takes text neutral subtle's steps,
   rest, hover and focus, away from the background as the text's do. */
[data-theme="dark"] {
  --dk-icon-neutral-default: var(--dk-color-neutral-400);
  --dk-icon-neutral-hover: var(--dk-color-neutral-300);
  --dk-icon-neutral-focus: var(--dk-color-neutral-200);
}

/* ═════════════════════════════════════════ drift-kit:layer tokens/mapped/field.css ═════════════════════════════════════════ */
/* ============================================================================
   The field palette, and the choice palette below it
   ----------------------------------------------------------------------------
   THE QUESTION THIS ANSWERS: what colour is the inside of a text field when the
   panel under it carries a status tone?

   Not the panel's colour, which is what it was. .dk-component-input__field
   painted --dk-surface-current, chosen deliberately so a field sits flush with
   its surface and steps with the level ladder. A tone remaps that token to the
   panel's own fill, so on a toned panel the field became the panel: measured
   1.00:1 against it in all twelve tone, fill and theme combinations, leaving a
   1px border as the only evidence a control was there. Reported from the Input
   playground on a solid primary panel.

   The border was already half of this answer. --dk-border-field-default exists
   because "a field flush with its surface is defined by its border alone, so
   that border is doing structural work no other border in the kit does", and it
   is declared per theme rather than borrowed for exactly that reason. This is
   the other half, and the same argument: the inside of a field is not the panel
   it sits on, so it does not borrow the panel's tokens.

   WHY IT IS A WHOLE PALETTE AND NOT ONE FILL. Measured every token the field
   paints with, untoned against a solid primary, a subtle primary, a solid error
   and an inverse panel: twenty of the twenty-one moved. Changing the fill alone
   would have swapped an invisible field for a white box with white text in it,
   because --dk-text-default is white inside a solid tone. The value, the affix,
   the placeholder, both focus rings, the invalid borders, the disabled rungs and
   the action buttons all have to come out of the tone together.

   WHAT IT DELIBERATELY DOES NOT CHANGE. The label, the caption and the error
   message sit OUTSIDE the field box, on the panel, and they should read as the
   panel's copy. They still take --dk-text-neutral-default and friends, which is
   why a toned panel's form still reads as one thing.

   INVERSE IS NOT A STATUS and is not escaped here. It means "the opposite
   theme", so a field on an inverse panel should flip with it, and it already
   did. The declarations below are per theme and per level in the two shapes
   scripts/build.js mirrors, so the generated inverse block re-states the whole
   palette as the opposite theme without a line of it being written twice.

   LEVELS STILL APPLY. A field on a level 2 panel is still flush with level 2;
   that part of the original design was right and is kept. Only the tone is
   escaped. The level 0 values are written as primitives rather than as the
   public tokens they mirror, because a tone remaps those public tokens on the
   very element these rules land on, so reading one here would capture the
   toned value and escape nothing. test/field-palette.test.js asserts each one
   still matches the untoned token it copies.
   ============================================================================ */
[data-theme="light"] {
  /* The field's own fill, and the rung down it takes on hover. */
  --dk-surface-field-default: var(--dk-color-base-white);
  --dk-surface-field-hover: var(--dk-color-neutral-25);
  /* The in-field action buttons (reveal a password, clear a field, help). */
  --dk-surface-field-action-hover: var(--dk-color-neutral-50);
  --dk-surface-field-action-active: var(--dk-color-neutral-100);
  /* The value someone types, and the affixes around it: a currency mark, a
     unit, a leading glyph. Two tokens because an affix is quieter than a value
     on purpose. */
  --dk-text-field-default: var(--dk-color-base-black);
  --dk-text-field-affix: var(--dk-color-neutral-600);
  --dk-text-field-disabled: var(--dk-color-neutral-200);
  /* Glyphs inside the field: the action buttons at rest, under the pointer,
     and on a control that is refusing input. */
  --dk-icon-field-default: var(--dk-color-neutral-500);
  --dk-icon-field-hover: var(--dk-color-neutral-700);
  --dk-icon-field-disabled: var(--dk-color-neutral-100);
  /* THE FIELD'S OWN GLYPH, a rung quieter than the affix text it used to share.
     A leading icon names nothing the label does not already name, so it should
     sit back until the field is in use. Measured on white: rest 3.76:1 and
     hover 5.0:1, so the resting glyph still clears the 3:1 a meaningful icon
     needs, and hover steps one rung toward the typed value. */
  --dk-icon-field-subtle: var(--dk-color-neutral-500);
  --dk-icon-field-subtle-hover: var(--dk-color-neutral-600);
  /* Focus. The ring is the wider, paler halo outside the border. */
  --dk-border-field-focus: var(--dk-color-primary-600);
  --dk-border-field-focus-ring: var(--dk-color-primary-300);
  /* It strengthens a rung per level (16 Oct, Julio): on a level-2 tint, an
     inset field there sits on primary 300 itself and lost a 300 ring. */
  --dk-border-field-focus-ring-level-1: var(--dk-color-primary-400);
  --dk-border-field-focus-ring-level-2: var(--dk-color-primary-500);
  /* aria-invalid. Same three parts as focus, in error's ramp. */
  --dk-border-field-error: var(--dk-color-error-500);
  --dk-border-field-error-focus: var(--dk-color-error-700);
  --dk-border-field-error-ring: var(--dk-color-error-300);
  --dk-border-field-disabled: var(--dk-color-neutral-100);
}
[data-theme="dark"] {
  --dk-surface-field-default: var(--dk-color-neutral-1100);
  --dk-surface-field-hover: var(--dk-color-neutral-900);
  --dk-surface-field-action-hover: var(--dk-color-neutral-800);
  --dk-surface-field-action-active: var(--dk-color-neutral-700);
  --dk-text-field-default: var(--dk-color-base-white);
  --dk-text-field-affix: var(--dk-color-neutral-200);
  --dk-text-field-disabled: var(--dk-color-neutral-700);
  --dk-icon-field-default: var(--dk-color-neutral-200);
  --dk-icon-field-hover: var(--dk-color-neutral-50);
  --dk-icon-field-disabled: var(--dk-color-neutral-800);
  /* The same rung in both themes, which is the point: 500 sits between the
     field and its text in either one. Measured on the dark field fill: rest
     4.3:1, hover (400) 5.6:1. */
  --dk-icon-field-subtle: var(--dk-color-neutral-500);
  --dk-icon-field-subtle-hover: var(--dk-color-neutral-400);
  --dk-border-field-focus: var(--dk-color-primary-400);
  --dk-border-field-focus-ring: var(--dk-color-primary-600);
  --dk-border-field-focus-ring-level-1: var(--dk-color-primary-500);
  --dk-border-field-focus-ring-level-2: var(--dk-color-primary-400);
  --dk-border-field-error: var(--dk-color-error-400);
  --dk-border-field-error-focus: var(--dk-color-error-200);
  --dk-border-field-error-ring: var(--dk-color-error-600);
  --dk-border-field-disabled: var(--dk-color-neutral-800);
}

/* The level ladder, for the ten that move with it. The rest are the same
   colour at every level by design: an invalid border and the typed value do
   not get quieter because the panel is nested. The focus ring moves the
   other way, a rung stronger per level, so it holds on a deeper fill.

   These point at the level RAMP tokens rather than at the public names. The
   ramp is what the untoned level scopes themselves read, and no tone touches
   it, so a toned panel at level 1 still hands its field level 1's neutrals. */
[data-theme] [data-surface="1"]:not([data-theme]),
[data-theme][data-surface="1"] {
  --dk-surface-choice-disabled: var(--dk-surface-choice-disabled-level-1);
  --dk-icon-choice-disabled: var(--dk-icon-choice-disabled-level-1);
  --dk-surface-field-default: var(--dk-surface-level-1);
  --dk-surface-field-hover: var(--dk-surface-nested-default-level-1);
  --dk-surface-field-action-hover: var(--dk-surface-nested-hover-level-1);
  --dk-surface-field-action-active: var(--dk-surface-nested-active-level-1);
  --dk-text-field-affix: var(--dk-text-neutral-default-level-1);
  --dk-text-field-disabled: var(--dk-text-disabled-subtle-level-1);
  --dk-icon-field-default: var(--dk-icon-neutral-default-level-1);
  --dk-icon-field-disabled: var(--dk-icon-disabled-subtle-level-1);
  --dk-border-field-disabled: var(--dk-border-disabled-subtle-level-1);
  --dk-border-field-focus-ring: var(--dk-border-field-focus-ring-level-1);
}
[data-theme][data-surface="below"],
[data-theme] [data-surface="below"]:not([data-theme]):where(:not(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *))) {
  --dk-surface-choice-disabled: var(--dk-surface-choice-disabled-level-1);
  --dk-icon-choice-disabled: var(--dk-icon-choice-disabled-level-1);
  --dk-surface-field-default: var(--dk-surface-level-1);
  --dk-surface-field-hover: var(--dk-surface-nested-default-level-1);
  --dk-surface-field-action-hover: var(--dk-surface-nested-hover-level-1);
  --dk-surface-field-action-active: var(--dk-surface-nested-active-level-1);
  --dk-text-field-affix: var(--dk-text-neutral-default-level-1);
  --dk-text-field-disabled: var(--dk-text-disabled-subtle-level-1);
  --dk-icon-field-default: var(--dk-icon-neutral-default-level-1);
  --dk-icon-field-disabled: var(--dk-icon-disabled-subtle-level-1);
  --dk-border-field-disabled: var(--dk-border-disabled-subtle-level-1);
  --dk-border-field-focus-ring: var(--dk-border-field-focus-ring-level-1);
}
[data-theme="light"] .dk-component-brand-sheet__panel[data-theme="dark"]:where(:not([data-theme="light"] [data-theme="dark"] *)) {
  --dk-surface-choice-disabled: var(--dk-surface-choice-disabled-level-1);
  --dk-icon-choice-disabled: var(--dk-icon-choice-disabled-level-1);
  --dk-surface-field-default: var(--dk-surface-level-1);
  --dk-surface-field-hover: var(--dk-surface-nested-default-level-1);
  --dk-surface-field-action-hover: var(--dk-surface-nested-hover-level-1);
  --dk-surface-field-action-active: var(--dk-surface-nested-active-level-1);
  --dk-text-field-affix: var(--dk-text-neutral-default-level-1);
  --dk-text-field-disabled: var(--dk-text-disabled-subtle-level-1);
  --dk-icon-field-default: var(--dk-icon-neutral-default-level-1);
  --dk-icon-field-disabled: var(--dk-icon-disabled-subtle-level-1);
  --dk-border-field-disabled: var(--dk-border-disabled-subtle-level-1);
  --dk-border-field-focus-ring: var(--dk-border-field-focus-ring-level-1);
}
[data-theme="dark"] [data-surface="raised"]:not([data-theme]):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"] [data-tone="inverse"] [data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"][data-surface="raised"] {
  --dk-surface-choice-disabled: var(--dk-surface-choice-disabled-level-1);
  --dk-icon-choice-disabled: var(--dk-icon-choice-disabled-level-1);
  --dk-surface-field-default: var(--dk-surface-level-1);
  --dk-surface-field-hover: var(--dk-surface-nested-default-level-1);
  --dk-surface-field-action-hover: var(--dk-surface-nested-hover-level-1);
  --dk-surface-field-action-active: var(--dk-surface-nested-active-level-1);
  --dk-text-field-affix: var(--dk-text-neutral-default-level-1);
  --dk-text-field-disabled: var(--dk-text-disabled-subtle-level-1);
  --dk-icon-field-default: var(--dk-icon-neutral-default-level-1);
  --dk-icon-field-disabled: var(--dk-icon-disabled-subtle-level-1);
  --dk-border-field-disabled: var(--dk-border-disabled-subtle-level-1);
  --dk-border-field-focus-ring: var(--dk-border-field-focus-ring-level-1);
}
[data-theme] [data-surface="2"]:not([data-theme]),
[data-theme][data-surface="2"] {
  --dk-surface-choice-disabled: var(--dk-surface-choice-disabled-level-2);
  --dk-icon-choice-disabled: var(--dk-icon-choice-disabled-level-2);
  --dk-surface-field-default: var(--dk-surface-level-2);
  --dk-surface-field-hover: var(--dk-surface-nested-default-level-2);
  --dk-surface-field-action-hover: var(--dk-surface-nested-hover-level-2);
  --dk-surface-field-action-active: var(--dk-surface-nested-active-level-2);
  --dk-text-field-affix: var(--dk-text-neutral-default-level-2);
  --dk-text-field-disabled: var(--dk-text-disabled-subtle-level-2);
  --dk-icon-field-default: var(--dk-icon-neutral-default-level-2);
  --dk-icon-field-disabled: var(--dk-icon-disabled-subtle-level-2);
  --dk-border-field-disabled: var(--dk-border-disabled-subtle-level-2);
  --dk-border-field-focus-ring: var(--dk-border-field-focus-ring-level-2);
}
[data-theme] [data-surface="below"]:not([data-theme]):where(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *)) {
  --dk-surface-choice-disabled: var(--dk-surface-choice-disabled-level-2);
  --dk-icon-choice-disabled: var(--dk-icon-choice-disabled-level-2);
  --dk-surface-field-default: var(--dk-surface-level-2);
  --dk-surface-field-hover: var(--dk-surface-nested-default-level-2);
  --dk-surface-field-action-hover: var(--dk-surface-nested-hover-level-2);
  --dk-surface-field-action-active: var(--dk-surface-nested-active-level-2);
  --dk-text-field-affix: var(--dk-text-neutral-default-level-2);
  --dk-text-field-disabled: var(--dk-text-disabled-subtle-level-2);
  --dk-icon-field-default: var(--dk-icon-neutral-default-level-2);
  --dk-icon-field-disabled: var(--dk-icon-disabled-subtle-level-2);
  --dk-border-field-disabled: var(--dk-border-disabled-subtle-level-2);
  --dk-border-field-focus-ring: var(--dk-border-field-focus-ring-level-2);
}
/* Level 0 is the page again (16 Oct): a level-0 panel inside a deeper one,
   and the contents of a raised interactive host, take the page's values back. */
[data-theme] [data-surface="0"]:not([data-theme]),
[data-theme][data-surface="0"],
[data-theme] :where([data-interactive-fill="raised"]) > :not([data-surface], [data-theme]) {
  --dk-surface-choice-disabled: var(--_reset-surface-choice-disabled);
  --dk-icon-choice-disabled: var(--_reset-icon-choice-disabled);
  --dk-surface-field-default: var(--_reset-surface-field-default);
  --dk-surface-field-hover: var(--_reset-surface-field-hover);
  --dk-surface-field-action-hover: var(--_reset-surface-field-action-hover);
  --dk-surface-field-action-active: var(--_reset-surface-field-action-active);
  --dk-text-field-affix: var(--_reset-text-field-affix);
  --dk-text-field-disabled: var(--_reset-text-field-disabled);
  --dk-icon-field-default: var(--_reset-icon-field-default);
  --dk-icon-field-disabled: var(--_reset-icon-field-disabled);
  --dk-border-field-disabled: var(--_reset-border-field-disabled);
  --dk-border-field-focus-ring: var(--_reset-border-field-focus-ring);
}
[data-theme="light"] [data-surface="raised"]:not([data-theme]):where(:not([data-tone])):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"] [data-tone="inverse"] [data-surface="raised"]:not([data-theme]):where(:not([data-tone])):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"][data-surface="raised"]:where(:not([data-tone])) {
  --dk-surface-choice-disabled: var(--_reset-surface-choice-disabled);
  --dk-icon-choice-disabled: var(--_reset-icon-choice-disabled);
  --dk-surface-field-default: var(--_reset-surface-field-default);
  --dk-surface-field-hover: var(--_reset-surface-field-hover);
  --dk-surface-field-action-hover: var(--_reset-surface-field-action-hover);
  --dk-surface-field-action-active: var(--_reset-surface-field-action-active);
  --dk-text-field-affix: var(--_reset-text-field-affix);
  --dk-text-field-disabled: var(--_reset-text-field-disabled);
  --dk-icon-field-default: var(--_reset-icon-field-default);
  --dk-icon-field-disabled: var(--_reset-icon-field-disabled);
  --dk-border-field-disabled: var(--_reset-border-field-disabled);
  --dk-border-field-focus-ring: var(--_reset-border-field-focus-ring);
}


/* ── The other half: a CHOICE control's selected state ──────────────────────
   A checkbox and a radio are field-shaped when empty, which is why their box
   reads the palette above, and they are something else entirely once chosen: a
   small filled brand swatch with a glyph on it. That fill lives here because it
   needs the same two properties the palette needs, a level that does not matter
   and a tone that cannot reach it, and because Checkbox and Radio must not
   drift apart. Component-to-component is not a tier, so they cannot read each
   other; a shared mapped family is how two siblings stay identical.

   THE LADDER MOVES THE WAY EACH THEME WANTS AND THE GLYPH FOLLOWS IT. Measured
   every rung against the page behind the box and against both candidate glyph
   colours:

     light   rest 600   page 4.25   white glyph 4.25
             hover 700  page 6.75   white glyph 6.75
             press 800  page 10.85  white glyph 10.85
     dark    rest 500   page 5.69   primary-900 glyph 5.92
             hover 400  page 6.92   primary-900 glyph 7.20
             press 300  page 8.49   primary-900 glyph 8.84

   Both axes climb in both themes: the box separates further from the page AND
   the glyph reads better, on every step. That is only possible because the
   glyph colour is a token rather than a literal white. The old checkbox wrote
   `stroke: #fff` into its stylesheet and sat at 2.82:1 on a primary-500 fill,
   under the 3:1 a graphical object carries, with no way to fix it per theme.

   THE CHOSEN FILL HAS NO LEVEL LADDER and the DISABLED pair does. A selected
   checkbox is a brand statement, not a surface, so it is the same colour on the
   page and at level 2. Its disabled form is not a brand statement at all any
   more, it is a neutral, and every neutral in this kit steps with the level or
   it stops separating from the panel it sits on. Both rungs move, the box and
   the glyph on it:

     light   L0 box 1.45 vs panel, glyph 2.59 on box
             L1 box 1.65, glyph 2.77
             L2 box 1.89, glyph 3.05
     dark    L0 box 1.70, glyph 2.52
             L1 box 2.12, glyph 2.39
             L2 box 2.58, glyph 2.21

   Level 0 is untouched, so the ladder is an addition rather than a retune. The
   rungs are declared per theme and the level scopes only re-point, which is the
   two-layer shape the rest of the kit uses and the shape the inverse mirror
   knows how to copy. */
[data-theme="light"] {
  --dk-surface-choice-selected: var(--dk-color-primary-600);
  --dk-surface-choice-selected-hover: var(--dk-color-primary-700);
  --dk-surface-choice-selected-active: var(--dk-color-primary-800);
  --dk-icon-choice-selected: var(--dk-color-base-white);
  /* ── THE UNSELECTED TRACK, which only a switch has. ──
     Checkbox and Radio paint their unengaged state from the FIELD palette: an
     outlined box, flush with the page, because a form of them should not read
     as a page of grey boxes. A switch cannot do that, and the reason is the
     thumb. The thumb sits ON the track and is the only thing that says which
     way the control is pointing, so the pair has to clear the 3:1 a graphical
     object carries in both states. Flush with the page it cannot: white on
     --dk-surface-field-default is 1.00:1, and the neutral thumb that made the
     flush track work read as a grey lozenge rather than a switch.

     So the off track is FILLED and the thumb is WHITE, which is what every
     switch anyone has used looks like, and the rung is chosen by that
     measurement rather than by eye:

       rung          white on it   it on the page
       neutral-200          1.80            1.80
       neutral-300          2.26            2.26
       neutral-400          2.88            2.88     ships
       neutral-500          3.75            3.75     clears 3:1, reads heavy
       neutral-600          5.00            5.00

     400 SHIPS AT 2.88:1, which is 0.12 under the 3:1 a graphical object
     carries, and that is a decision rather than an oversight. 500 clears the
     floor and was called too dark on sight: an off switch is the resting state
     of a control nobody has touched, and at 500 a column of them reads as a
     column of grey lozenges. The gap is closed by the thumb's SHADOW rather
     than by its fill, which is how a physical switch is legible too: the disc
     sits above the track and its edge is drawn by the light, not by a colour
     difference. Input records the same kind of decision for its border and its
     placeholder, in the same words, for the same reason.

     The hover and press rungs step away from the page, the direction every
     other control in the kit steps, and both clear 3:1 on the way. */
  --dk-surface-choice-track: var(--dk-color-neutral-400);
  --dk-surface-choice-track-hover: var(--dk-color-neutral-500);
  --dk-surface-choice-track-active: var(--dk-color-neutral-600);
  /* THE THUMB, IN EITHER STATE, and white in both themes. It used to read
     --dk-icon-choice-selected when the switch was on, which is Checkbox's TICK
     colour and goes primary-900 in dark: the disc turned near-black the moment
     the dark palette was in play, whether that was dark mode or an inverse
     panel inside light. A tick and a thumb are not the same object. A 2px
     stroke needs the contrast a dark glyph gives it; a 14px disc with a shadow
     under it is read by its edge, which is why the light off track can sit at
     2.88:1 and why the dark on track can sit at 2.82:1. One colour, so the
     thumb is a thing that slides rather than a thing that changes. */
  --dk-icon-choice-track: var(--dk-color-base-white);
  /* DISABLED AND CHOSEN IS NEUTRAL, NOT A QUIET BRAND TINT, and the kit had
     already answered this before the question was asked. What it does with a
     disabled control that carries the brand:

       button default/primary, light   fill #f4f5f5   label #bcc2c3
       button subtle/primary,  light   fill #f4f5f5   label #bcc2c3
       button default/primary, dark    fill #1f2b2d   label #4d5d60
       switch on, disabled, both       track #00ae8e

     Button goes fully neutral, in both variants and both themes. Switch is the
     only thing that keeps the brand, and it does not even mute it: a disabled
     on-switch is pixel-identical to an enabled one, which is a defect rather
     than a precedent. Checkbox was siding with the exception.

     The reasoning, not only the convention: the tick's SHAPE is what says "this
     is on", and it survives being grey. The brand colour was saying something
     else, that the control is live, which is the one thing a disabled control
     must stop claiming.

     The rung is neutral-500 rather than the fainter one a disabled button's
     label takes, because a tick is a 1.5px stroke and a label is a word.
     Measured: 2.59:1 in light against the 2.27:1 the primary tint gave, and
     2.52:1 in dark against 4.68:1. Dark is the real cost of this change and it
     was made with that number in view. */
  --dk-surface-choice-disabled: var(--dk-color-neutral-100);
  --dk-icon-choice-disabled: var(--dk-color-neutral-500);
  --dk-surface-choice-disabled-level-1: var(--dk-color-neutral-200);
  --dk-icon-choice-disabled-level-1: var(--dk-color-neutral-600);
  --dk-surface-choice-disabled-level-2: var(--dk-color-neutral-300);
  --dk-icon-choice-disabled-level-2: var(--dk-color-neutral-700);
}
[data-theme="dark"] {
  /* WHITE ON BOTH THEMES (9 Oct, Julio): the tick and the dot are white, as in
     light. White needs a fill that holds it, and dark's old brightening ladder
     did not: white on primary-500 is 2.82:1, on 400 and 300 worse. So dark
     took light's ladder, 600 deepening to 700 and 800.
     10 Oct, Julio: 600 read too dark on the dark page, so the ladder moved one
     rung up, 500 deepening to 600 and 700. White on the 500 rest is 2.82:1,
     under the 3:1 a graphical object carries, a decision rather than an
     oversight (the same call as the switch track's 2.88): hover and press clear
     it at 4.25 and 6.75. */
  --dk-surface-choice-selected: var(--dk-color-primary-500);
  --dk-surface-choice-selected-hover: var(--dk-color-primary-600);
  --dk-surface-choice-selected-active: var(--dk-color-primary-700);
  --dk-icon-choice-selected: var(--dk-color-base-white);
  /* The same pair, mirrored, and NOT moved when light dropped a rung to 400.
     "Lighter" means opposite things in the two themes: in light it means closer
     to the page and quieter, which is what was asked for; in dark it would mean
     further from the page and louder, which is the opposite. Measured, white on
     the track and the track on the page:
       neutral-700   6.88 / 2.33     the track fades into the page
       neutral-600   5.00 / 3.21     ships: both axes clear 3:1
       neutral-500   3.75 / 4.28     clears, and shouts for a resting state
     So dark keeps 600 and clears the floor on both axes, where light trades
     0.12 of thumb contrast for a quieter control. */
  --dk-surface-choice-track: var(--dk-color-neutral-600);
  --dk-surface-choice-track-hover: var(--dk-color-neutral-500);
  --dk-surface-choice-track-active: var(--dk-color-neutral-400);
  /* White here too: see the light block. The thumb does not change colour. */
  --dk-icon-choice-track: var(--dk-color-base-white);
  /* Neutral here too, see the light block. The box is 1.70:1 against the page
     and the tick 2.52:1 on the box: quiet, and there. */
  --dk-surface-choice-disabled: var(--dk-color-neutral-800);
  --dk-icon-choice-disabled: var(--dk-color-neutral-500);
  --dk-surface-choice-disabled-level-1: var(--dk-color-neutral-700);
  --dk-icon-choice-disabled-level-1: var(--dk-color-neutral-400);
  --dk-surface-choice-disabled-level-2: var(--dk-color-neutral-600);
  --dk-icon-choice-disabled-level-2: var(--dk-color-neutral-300);
}

/* --dk-border-choice-card / --dk-surface-choice-card (and -hover, -active)
   A Choice card's own ramp. The shared card border is a 3.4:1 neutral-600 in
   dark, right for a Dropdown's edge and loud on a card that sits in a list, so
   the card rests on a quieter rung there; light keeps the design's rest. Hover
   and press each climb one small step, the border and the fill together, so the
   card answers the pointer without changing what it looks like.
     light   fill white, 25, 50     border 50, 100, 200
     dark    fill 1100, 1000, 900   border 800, 700, 600 */
[data-theme="light"] {
  --dk-surface-choice-card: var(--dk-color-base-white);
  --dk-surface-choice-card-hover: var(--dk-color-neutral-25);
  --dk-surface-choice-card-active: var(--dk-color-neutral-50);
  --dk-border-choice-card: var(--dk-color-neutral-50);
  --dk-border-choice-card-hover: var(--dk-color-neutral-100);
  --dk-border-choice-card-active: var(--dk-color-neutral-200);
}
[data-theme="dark"] {
  --dk-surface-choice-card: var(--dk-color-neutral-1100);
  --dk-surface-choice-card-hover: var(--dk-color-neutral-1000);
  --dk-surface-choice-card-active: var(--dk-color-neutral-900);
  --dk-border-choice-card: var(--dk-color-neutral-800);
  --dk-border-choice-card-hover: var(--dk-color-neutral-700);
  --dk-border-choice-card-active: var(--dk-color-neutral-600);
}

/* ══════════════════════════════════════════ drift-kit:layer tokens/mapped/tone.css ══════════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────
   COLLECTION: Mapped
   GROUP: Tone (status surfaces)   — Karmo, 2026-09-08
   ───────────────────────────────────────────────────────────

   A TONE is a status-coloured container: the tinted panel behind an alert,
   the solid fill of a badge, the pink box a form error sits in. Drift ships
   the fills (--surface-{status}-subtle / -default) but never said what STATUS
   TEXT looks like on top of them — error-500 on error-50 is 3:1, and the
   component-library's Tag reaches for a --text-{status}-body that no token file
   defines. This file answers that, and gives SUBTLE tones the same three
   surface levels the neutral ladder has.

   MARKUP
     <div data-tone="error">…</div>                          subtle tint, level 0
     <div data-tone="error" data-surface="1">…</div>         one step deeper
     <div data-tone="error" data-tone-fill="solid">…</div>   solid fill
     background: var(--dk-surface-current)  — same contract as the level ladder.

   WHAT A TONE REMAPS (and nothing else — spec C2)
     --dk-surface-current                the tone's fill at this level
     --text/icon-{status}-default     the MATCHING status only → on-tint / on-solid
     solid fills also:  --dk-text-default → on-solid (white; black on warning)
                        --text/icon-neutral-default/-subtle → the status's 50 tint
   Other statuses, white/black, borders: untouched by design.
     DISABLED follows the surface since 2026-09-10 — see 1b below.

   SOLID FILLS DO NOT STEP WITH LEVELS (spec C5, amended after measuring).
   A solid fill is already the top of its ramp; deepening it in light and
   lightening it in dark (the -hover/-focus direction) took white text from
   4.7:1 to 3.5:1 on the lighter dark rungs. Levels exist to keep text
   legible, so a level that costs legibility has no reason to exist. The fill
   holds at the status 500 (light) / 700 (dark) — the same values Button's
   default variant uses — and data-surface on a solid tone only affects what
   it affects everywhere else.

   TWO LAYERS, ON PURPOSE (spec C8 — the theme-inheriting pattern)
     1. RAMP tokens, declared on [data-theme="light"] / [data-theme="dark"] like
        --surface-level-N: --surface-{status}-subtle-level-{0,1,2},
        --surface-{status}-solid, --text/icon-{status}-on-subtle-level-{0,1,2},
        --text/icon-{status}-on-solid, --text/icon-neutral-on-{status}-solid.
        They inherit from the NEAREST themed ancestor, so a tone inside a
        re-themed panel resolves that panel's theme — the level blocks in
        surface.css cannot say the same (their "KNOWN LIMITATION").
     2. SCOPES, theme-agnostic: [data-theme] [data-tone=…] wires the status's
        ramp into private --tone-* slots; generic [data-tone] / [data-surface] /
        [data-tone-fill] scopes pick the level and fill. Selectors carry a bare
        [data-theme] ancestor only for specificity — (0,3,0) ties the level
        blocks and wins on source order; level/fill scopes add one attribute.

   COMPONENT TOKENS MUST DECLARE ON [data-tone] TOO. A component token such
   as --dk-component-body-error-color: var(--dk-text-error-default) declared only on
   [data-theme] resolves THERE and is inherited already-resolved; the tone's
   remap never reaches it. Every components/<name>/tokens.css therefore scopes on
   [data-theme="light"], [data-theme="dark"], [data-surface], [data-tone].

   RAMP DIRECTION mirrors what designers already know: level 1 of a subtle
   tone IS its -subtle-hover value, level 2 its -subtle-focus value. Status
   text steps the opposite way so contrast holds or improves per level
   (measured, spec § 9). Success is jade here (primitives/transform.css) —
   its tone aliases primary's. Warning is a gold: white fails on it, so
   on-solid text is black and neutral copy on solid warning is neutral-900.
   ─────────────────────────────────────────────────────────── */

/* ── 1. Ramp tokens (theme-scoped, inherit from the nearest theme) ─────── */
[data-theme="light"] {
  /* primary */
  --dk-surface-primary-subtle-level-0: var(--dk-color-primary-50);
  --dk-surface-primary-subtle-level-1: var(--dk-color-primary-100);
  --dk-surface-primary-subtle-level-2: var(--dk-color-primary-200);
  --dk-surface-primary-solid: var(--dk-color-primary-700);
  --dk-surface-primary-solid-level-0: var(--dk-color-primary-700);
  --dk-surface-primary-solid-level-1: var(--dk-color-primary-800);
  --dk-surface-primary-solid-level-2: var(--dk-color-primary-900);
  --dk-text-primary-on-subtle-level-0: var(--dk-color-primary-700);
  --dk-icon-primary-on-subtle-level-0: var(--dk-color-primary-700);
  --dk-text-primary-on-subtle-level-1: var(--dk-color-primary-800);
  --dk-icon-primary-on-subtle-level-1: var(--dk-color-primary-800);
  --dk-text-primary-on-subtle-level-2: var(--dk-color-primary-900);
  --dk-icon-primary-on-subtle-level-2: var(--dk-color-primary-900);
  --dk-text-primary-on-solid: var(--dk-text-base-white);
  --dk-icon-primary-on-solid: var(--dk-icon-base-white);
  --dk-text-neutral-on-primary-solid: var(--dk-color-primary-50);
  --dk-icon-neutral-on-primary-solid: var(--dk-color-primary-50);
  /* error */
  --dk-surface-error-subtle-level-0: var(--dk-color-error-50);
  --dk-surface-error-subtle-level-1: var(--dk-color-error-100);
  --dk-surface-error-subtle-level-2: var(--dk-color-error-200);
  --dk-surface-error-solid: var(--dk-color-error-700);
  --dk-surface-error-solid-level-0: var(--dk-color-error-700);
  --dk-surface-error-solid-level-1: var(--dk-color-error-800);
  --dk-surface-error-solid-level-2: var(--dk-color-error-900);
  /* Hairline rules ON a tone. A divider inside a tinted panel drew the neutral
     grey hairline, which reads as foreign on a tint; and an explicit status
     hairline returned the same value on the tint as on the page, where it was
     calibrated. These are the on-tint rungs, measured against the fills they
     actually sit on: 1.53-1.70 on tint, 1.38-2.14 on solid.
     Solid fills need the opposite move in dark — a dark rung on a dark fill
     disappears — so they step toward the light end. */
  --dk-border-primary-structural-on-subtle: var(--dk-color-primary-200);
  --dk-border-primary-structural-on-subtle-level-2: var(--dk-color-primary-300);
  --dk-border-primary-hairline-on-subtle: var(--dk-color-primary-300);
  --dk-border-primary-hairline-on-subtle-level-2: var(--dk-color-primary-400);
  --dk-border-primary-hairline-on-solid: var(--dk-color-primary-300);
  /* success IS jade — these follow primary like the other 34 tokens in
     mapped/success.css. Referencing --dk-color-success-* directly drew core
     Drift's green on a jade fill: #aef3cf against primary's #99dfd2 on the
     same #e5f7f4 panel, which is the clash that file exists to prevent. */
  --dk-border-success-structural-on-subtle: var(--dk-border-primary-structural-on-subtle);
  --dk-border-success-structural-on-subtle-level-2: var(--dk-border-primary-structural-on-subtle-level-2);
  --dk-border-success-hairline-on-subtle: var(--dk-border-primary-hairline-on-subtle);
  --dk-border-success-hairline-on-subtle-level-2: var(--dk-border-primary-hairline-on-subtle-level-2);
  --dk-border-success-hairline-on-solid: var(--dk-border-primary-hairline-on-solid);
  --dk-border-error-structural-on-subtle: var(--dk-color-error-200);
  --dk-border-error-structural-on-subtle-level-2: var(--dk-color-error-300);
  --dk-border-error-hairline-on-subtle: var(--dk-color-error-300);
  --dk-border-error-hairline-on-subtle-level-2: var(--dk-color-error-400);
  --dk-border-error-hairline-on-solid: var(--dk-color-error-300);
  --dk-border-warning-structural-on-subtle: var(--dk-color-warning-200);
  --dk-border-warning-structural-on-subtle-level-2: var(--dk-color-warning-300);
  --dk-border-warning-hairline-on-subtle: var(--dk-color-warning-300);
  --dk-border-warning-hairline-on-subtle-level-2: var(--dk-color-warning-400);
  --dk-border-warning-hairline-on-solid: var(--dk-color-warning-300);
  --dk-border-information-structural-on-subtle: var(--dk-color-information-200);
  --dk-border-information-structural-on-subtle-level-2: var(--dk-color-information-300);
  --dk-border-information-hairline-on-subtle: var(--dk-color-information-300);
  --dk-border-information-hairline-on-subtle-level-2: var(--dk-color-information-400);
  --dk-border-information-hairline-on-solid: var(--dk-color-information-300);
  --dk-text-error-on-subtle-level-0: var(--dk-color-error-700);
  --dk-icon-error-on-subtle-level-0: var(--dk-color-error-700);
  --dk-text-error-on-subtle-level-1: var(--dk-color-error-800);
  --dk-icon-error-on-subtle-level-1: var(--dk-color-error-800);
  --dk-text-error-on-subtle-level-2: var(--dk-color-error-900);
  --dk-icon-error-on-subtle-level-2: var(--dk-color-error-900);
  --dk-text-error-on-solid: var(--dk-text-base-white);
  --dk-icon-error-on-solid: var(--dk-icon-base-white);
  --dk-text-neutral-on-error-solid: var(--dk-color-error-50);
  --dk-icon-neutral-on-error-solid: var(--dk-color-error-50);
  /* warning */
  --dk-surface-warning-subtle-level-0: var(--dk-color-warning-50);
  --dk-surface-warning-subtle-level-1: var(--dk-color-warning-100);
  --dk-surface-warning-subtle-level-2: var(--dk-color-warning-200);
  --dk-surface-warning-solid: var(--dk-color-warning-700);
  --dk-surface-warning-solid-level-0: var(--dk-color-warning-700);
  --dk-surface-warning-solid-level-1: var(--dk-color-warning-800);
  --dk-surface-warning-solid-level-2: var(--dk-color-warning-900);
  --dk-text-warning-on-subtle-level-0: var(--dk-color-warning-700);
  --dk-icon-warning-on-subtle-level-0: var(--dk-color-warning-700);
  --dk-text-warning-on-subtle-level-1: var(--dk-color-warning-800);
  --dk-icon-warning-on-subtle-level-1: var(--dk-color-warning-800);
  --dk-text-warning-on-subtle-level-2: var(--dk-color-warning-900);
  --dk-icon-warning-on-subtle-level-2: var(--dk-color-warning-900);
  /* White, by Julio's decision (11 Sep 2026), overriding the contrast reading.
     Warning's light solid is #ff8c00, where white measures 2.33:1 and black
     measures 9.00:1 — black was chosen originally for exactly that reason and
     made warning the only light solid tone clearing 4.5:1. It is changed here
     for consistency: a lone dark-text badge among four light-text ones read as
     a mistake on the Surfaces page. Deliberate, not an oversight — and the
     reason this comment exists. Dark is unaffected: its fill is #995400, where
     white already measured 5.80:1 and was already correct.
     If solid tones ever carry real paragraphs rather than short labels, this is
     the first thing to revisit. */
  --dk-text-warning-on-solid: var(--dk-text-base-white);
  --dk-icon-warning-on-solid: var(--dk-icon-base-white);
  --dk-text-neutral-on-warning-solid: var(--dk-color-warning-50);
  --dk-icon-neutral-on-warning-solid: var(--dk-color-warning-50);
  /* information */
  --dk-surface-information-subtle-level-0: var(--dk-color-information-50);
  --dk-surface-information-subtle-level-1: var(--dk-color-information-100);
  --dk-surface-information-subtle-level-2: var(--dk-color-information-200);
  --dk-surface-information-solid: var(--dk-color-information-700);
  --dk-surface-information-solid-level-0: var(--dk-color-information-700);
  --dk-surface-information-solid-level-1: var(--dk-color-information-800);
  --dk-surface-information-solid-level-2: var(--dk-color-information-900);
  --dk-text-information-on-subtle-level-0: var(--dk-color-information-700);
  --dk-icon-information-on-subtle-level-0: var(--dk-color-information-700);
  --dk-text-information-on-subtle-level-1: var(--dk-color-information-800);
  --dk-icon-information-on-subtle-level-1: var(--dk-color-information-800);
  --dk-text-information-on-subtle-level-2: var(--dk-color-information-900);
  --dk-icon-information-on-subtle-level-2: var(--dk-color-information-900);
  --dk-text-information-on-solid: var(--dk-text-base-white);
  --dk-icon-information-on-solid: var(--dk-icon-base-white);
  --dk-text-neutral-on-information-solid: var(--dk-color-information-50);
  --dk-icon-neutral-on-information-solid: var(--dk-color-information-50);
  /* success — Karmo's success IS jade (primitives/transform.css); the tone follows suit */
  --dk-surface-success-subtle-level-0: var(--dk-surface-primary-subtle-level-0);
  --dk-surface-success-subtle-level-1: var(--dk-surface-primary-subtle-level-1);
  --dk-surface-success-subtle-level-2: var(--dk-surface-primary-subtle-level-2);
  --dk-surface-success-solid: var(--dk-surface-primary-solid);
  --dk-surface-success-solid-level-0: var(--dk-surface-primary-solid-level-0);
  --dk-surface-success-solid-level-1: var(--dk-surface-primary-solid-level-1);
  --dk-surface-success-solid-level-2: var(--dk-surface-primary-solid-level-2);
  --dk-text-success-on-subtle-level-0: var(--dk-text-primary-on-subtle-level-0);
  --dk-icon-success-on-subtle-level-0: var(--dk-icon-primary-on-subtle-level-0);
  --dk-text-success-on-subtle-level-1: var(--dk-text-primary-on-subtle-level-1);
  --dk-icon-success-on-subtle-level-1: var(--dk-icon-primary-on-subtle-level-1);
  --dk-text-success-on-subtle-level-2: var(--dk-text-primary-on-subtle-level-2);
  --dk-icon-success-on-subtle-level-2: var(--dk-icon-primary-on-subtle-level-2);
  --dk-text-success-on-solid: var(--dk-text-primary-on-solid);
  --dk-icon-success-on-solid: var(--dk-icon-primary-on-solid);
  --dk-text-neutral-on-success-solid: var(--dk-text-neutral-on-primary-solid);
  --dk-icon-neutral-on-success-solid: var(--dk-icon-neutral-on-primary-solid);
}
[data-theme="dark"] {
  /* primary */
  --dk-surface-primary-subtle-level-0: var(--dk-color-primary-900);
  --dk-surface-primary-subtle-level-1: var(--dk-color-primary-800);
  --dk-surface-primary-subtle-level-2: var(--dk-color-primary-700);
  --dk-surface-primary-solid: var(--dk-color-primary-700);
  --dk-surface-primary-solid-level-0: var(--dk-color-primary-700);
  --dk-surface-primary-solid-level-1: var(--dk-color-primary-800);
  --dk-surface-primary-solid-level-2: var(--dk-color-primary-900);
  --dk-text-primary-on-subtle-level-0: var(--dk-color-primary-200);
  --dk-icon-primary-on-subtle-level-0: var(--dk-color-primary-200);
  --dk-text-primary-on-subtle-level-1: var(--dk-color-primary-100);
  --dk-icon-primary-on-subtle-level-1: var(--dk-color-primary-100);
  --dk-text-primary-on-subtle-level-2: var(--dk-color-primary-50);
  --dk-icon-primary-on-subtle-level-2: var(--dk-color-primary-50);
  --dk-text-primary-on-solid: var(--dk-text-base-white);
  --dk-icon-primary-on-solid: var(--dk-icon-base-white);
  --dk-text-neutral-on-primary-solid: var(--dk-color-primary-50);
  --dk-icon-neutral-on-primary-solid: var(--dk-color-primary-50);
  /* error */
  --dk-surface-error-subtle-level-0: var(--dk-color-error-900);
  --dk-surface-error-subtle-level-1: var(--dk-color-error-800);
  --dk-surface-error-subtle-level-2: var(--dk-color-error-700);
  --dk-surface-error-solid: var(--dk-color-error-700);
  --dk-surface-error-solid-level-0: var(--dk-color-error-700);
  --dk-surface-error-solid-level-1: var(--dk-color-error-800);
  --dk-surface-error-solid-level-2: var(--dk-color-error-900);
  /* Hairline rules ON a tone — see the light block. */
  --dk-border-primary-structural-on-subtle: var(--dk-color-primary-800);
  --dk-border-primary-structural-on-subtle-level-2: var(--dk-color-primary-800);
  --dk-border-primary-hairline-on-subtle: var(--dk-color-primary-700);
  --dk-border-primary-hairline-on-subtle-level-2: var(--dk-color-primary-500);
  --dk-border-primary-hairline-on-solid: var(--dk-color-primary-400);
  --dk-border-success-structural-on-subtle: var(--dk-border-primary-structural-on-subtle);
  --dk-border-success-structural-on-subtle-level-2: var(--dk-border-primary-structural-on-subtle-level-2);
  --dk-border-success-hairline-on-subtle: var(--dk-border-primary-hairline-on-subtle);
  --dk-border-success-hairline-on-subtle-level-2: var(--dk-border-primary-hairline-on-subtle-level-2);
  --dk-border-success-hairline-on-solid: var(--dk-border-primary-hairline-on-solid);
  --dk-border-error-structural-on-subtle: var(--dk-color-error-800);
  --dk-border-error-structural-on-subtle-level-2: var(--dk-color-error-800);
  --dk-border-error-hairline-on-subtle: var(--dk-color-error-700);
  --dk-border-error-hairline-on-subtle-level-2: var(--dk-color-error-500);
  --dk-border-error-hairline-on-solid: var(--dk-color-error-400);
  /* Warning is the one status whose dark ramp cannot say this with a rung.
     Every tone here tints at 900 and draws its structural edge at 800, and that
     single rule lands error at 1.30:1, information at 1.23:1 and primary and
     success at 1.54:1 against their own fill. Warning lands at 1.63:1, the
     loudest of the five, and reads louder still because amber on dark brown
     carries more chroma than blue on dark blue. Julio saw it on the Surfaces
     page before any measurement.
     The wiring is not the problem: warning-900 is rgb(51, 28, 0) and
     warning-800 is rgb(102, 56, 0), exactly double in every channel, so this
     ramp simply steps further here than the others and has no rung between.
     Hence the mix, which is derived from the same two primitives rather than
     being a new colour, so it still follows the palette. 70% lands at 1.40:1,
     the median of the other four. */
  --dk-border-warning-structural-on-subtle: color-mix(in srgb, var(--dk-color-warning-800) 70%, var(--dk-color-warning-900));
  --dk-border-warning-structural-on-subtle-level-2: var(--dk-border-warning-structural-on-subtle);
  --dk-border-warning-hairline-on-subtle: var(--dk-color-warning-700);
  --dk-border-warning-hairline-on-subtle-level-2: var(--dk-color-warning-500);
  --dk-border-warning-hairline-on-solid: var(--dk-color-warning-400);
  --dk-border-information-structural-on-subtle: var(--dk-color-information-800);
  --dk-border-information-structural-on-subtle-level-2: var(--dk-color-information-800);
  --dk-border-information-hairline-on-subtle: var(--dk-color-information-700);
  --dk-border-information-hairline-on-subtle-level-2: var(--dk-color-information-500);
  --dk-border-information-hairline-on-solid: var(--dk-color-information-400);
  --dk-text-error-on-subtle-level-0: var(--dk-color-error-200);
  --dk-icon-error-on-subtle-level-0: var(--dk-color-error-200);
  --dk-text-error-on-subtle-level-1: var(--dk-color-error-100);
  --dk-icon-error-on-subtle-level-1: var(--dk-color-error-100);
  --dk-text-error-on-subtle-level-2: var(--dk-color-error-50);
  --dk-icon-error-on-subtle-level-2: var(--dk-color-error-50);
  --dk-text-error-on-solid: var(--dk-text-base-white);
  --dk-icon-error-on-solid: var(--dk-icon-base-white);
  --dk-text-neutral-on-error-solid: var(--dk-color-error-50);
  --dk-icon-neutral-on-error-solid: var(--dk-color-error-50);
  /* warning */
  --dk-surface-warning-subtle-level-0: var(--dk-color-warning-900);
  --dk-surface-warning-subtle-level-1: var(--dk-color-warning-800);
  --dk-surface-warning-subtle-level-2: var(--dk-color-warning-700);
  --dk-surface-warning-solid: var(--dk-color-warning-700);
  --dk-surface-warning-solid-level-0: var(--dk-color-warning-700);
  --dk-surface-warning-solid-level-1: var(--dk-color-warning-800);
  --dk-surface-warning-solid-level-2: var(--dk-color-warning-900);
  --dk-text-warning-on-subtle-level-0: var(--dk-color-warning-200);
  --dk-icon-warning-on-subtle-level-0: var(--dk-color-warning-200);
  --dk-text-warning-on-subtle-level-1: var(--dk-color-warning-100);
  --dk-icon-warning-on-subtle-level-1: var(--dk-color-warning-100);
  --dk-text-warning-on-subtle-level-2: var(--dk-color-warning-50);
  --dk-icon-warning-on-subtle-level-2: var(--dk-color-warning-50);
  --dk-text-warning-on-solid: var(--dk-text-base-white);
  --dk-icon-warning-on-solid: var(--dk-icon-base-white);
  --dk-text-neutral-on-warning-solid: var(--dk-color-warning-50);
  --dk-icon-neutral-on-warning-solid: var(--dk-color-warning-50);
  /* information */
  --dk-surface-information-subtle-level-0: var(--dk-color-information-900);
  --dk-surface-information-subtle-level-1: var(--dk-color-information-800);
  --dk-surface-information-subtle-level-2: var(--dk-color-information-700);
  --dk-surface-information-solid: var(--dk-color-information-700);
  --dk-surface-information-solid-level-0: var(--dk-color-information-700);
  --dk-surface-information-solid-level-1: var(--dk-color-information-800);
  --dk-surface-information-solid-level-2: var(--dk-color-information-900);
  --dk-text-information-on-subtle-level-0: var(--dk-color-information-200);
  --dk-icon-information-on-subtle-level-0: var(--dk-color-information-200);
  --dk-text-information-on-subtle-level-1: var(--dk-color-information-100);
  --dk-icon-information-on-subtle-level-1: var(--dk-color-information-100);
  --dk-text-information-on-subtle-level-2: var(--dk-color-information-50);
  --dk-icon-information-on-subtle-level-2: var(--dk-color-information-50);
  --dk-text-information-on-solid: var(--dk-text-base-white);
  --dk-icon-information-on-solid: var(--dk-icon-base-white);
  --dk-text-neutral-on-information-solid: var(--dk-color-information-50);
  --dk-icon-neutral-on-information-solid: var(--dk-color-information-50);
  /* success — Karmo's success IS jade (primitives/transform.css); the tone follows suit */
  --dk-surface-success-subtle-level-0: var(--dk-surface-primary-subtle-level-0);
  --dk-surface-success-subtle-level-1: var(--dk-surface-primary-subtle-level-1);
  --dk-surface-success-subtle-level-2: var(--dk-surface-primary-subtle-level-2);
  --dk-surface-success-solid: var(--dk-surface-primary-solid);
  --dk-surface-success-solid-level-0: var(--dk-surface-primary-solid-level-0);
  --dk-surface-success-solid-level-1: var(--dk-surface-primary-solid-level-1);
  --dk-surface-success-solid-level-2: var(--dk-surface-primary-solid-level-2);
  --dk-text-success-on-subtle-level-0: var(--dk-text-primary-on-subtle-level-0);
  --dk-icon-success-on-subtle-level-0: var(--dk-icon-primary-on-subtle-level-0);
  --dk-text-success-on-subtle-level-1: var(--dk-text-primary-on-subtle-level-1);
  --dk-icon-success-on-subtle-level-1: var(--dk-icon-primary-on-subtle-level-1);
  --dk-text-success-on-subtle-level-2: var(--dk-text-primary-on-subtle-level-2);
  --dk-icon-success-on-subtle-level-2: var(--dk-icon-primary-on-subtle-level-2);
  --dk-text-success-on-solid: var(--dk-text-primary-on-solid);
  --dk-icon-success-on-solid: var(--dk-icon-primary-on-solid);
  --dk-text-neutral-on-success-solid: var(--dk-text-neutral-on-primary-solid);
  --dk-icon-neutral-on-success-solid: var(--dk-icon-neutral-on-primary-solid);
}

/* ── 1b. Disabled ramp tokens — DISABLED FOLLOWS THE SURFACE (2026-09-10) ──
   A disabled control is a relationship to its surface, not a colour. Core's
   one neutral recipe (neutral-25 fill / neutral-200 label in light) reads on
   the default surface, but on a tint the fill vanishes (1.01:1 against
   success-50) and on a solid it pops as a grey chip with a 1.65:1 label —
   the "hard to read on the success surface" a developer raised on 10 Sep.
   Inside a tone the shared disabled family therefore re-declares from the
   tone's OWN ramp, the way the level ladder already steps disabled one rung:
     subtle tint   fill = one rung deeper than the surface (50→100, 100→200,
                   200→300 in light; 900→800, 800→700, 700→600 in dark),
                   border one rung past the fill, label the 400 rung in light
                   (warning 500) and 500–600 in dark;
     solid fill    fill = one rung TOWARD the canvas (500→400 light, 700→800
                   dark) so it recedes rather than reading as hover; label
                   from the far end of the ramp (100 light, warning 800; 400
                   dark).
   -default is one rung stronger than -subtle in every slot, keeping Drift's
   two disabled emphases. Every value is an existing primitive — no alpha.
   Consumers: Button (all variants), Input, Select, Checkbox, Icon button,
   Body/Heading/Hero/Eyebrow/Icon [data-disabled]. Measured ratios in
   the spec (docs/superpowers/specs/2026-09-10-drift-disabled-on-tones-design.md). */
[data-theme="light"] {
  /* primary — disabled controls on a primary surface */
  --dk-surface-disabled-subtle-on-primary-subtle-level-0: var(--dk-color-primary-100);
  --dk-surface-disabled-default-on-primary-subtle-level-0: var(--dk-color-primary-200);
  --dk-border-disabled-subtle-on-primary-subtle-level-0: var(--dk-color-primary-200);
  --dk-border-disabled-default-on-primary-subtle-level-0: var(--dk-color-primary-300);
  --dk-text-disabled-subtle-on-primary-subtle-level-0: var(--dk-color-primary-400);
  --dk-text-disabled-default-on-primary-subtle-level-0: var(--dk-color-primary-500);
  --dk-icon-disabled-subtle-on-primary-subtle-level-0: var(--dk-text-disabled-subtle-on-primary-subtle-level-0);
  --dk-icon-disabled-default-on-primary-subtle-level-0: var(--dk-text-disabled-default-on-primary-subtle-level-0);
  --dk-surface-disabled-subtle-on-primary-subtle-level-1: var(--dk-color-primary-200);
  --dk-surface-disabled-default-on-primary-subtle-level-1: var(--dk-color-primary-300);
  --dk-border-disabled-subtle-on-primary-subtle-level-1: var(--dk-color-primary-300);
  --dk-border-disabled-default-on-primary-subtle-level-1: var(--dk-color-primary-400);
  --dk-text-disabled-subtle-on-primary-subtle-level-1: var(--dk-color-primary-500);
  --dk-text-disabled-default-on-primary-subtle-level-1: var(--dk-color-primary-600);
  --dk-icon-disabled-subtle-on-primary-subtle-level-1: var(--dk-text-disabled-subtle-on-primary-subtle-level-1);
  --dk-icon-disabled-default-on-primary-subtle-level-1: var(--dk-text-disabled-default-on-primary-subtle-level-1);
  --dk-surface-disabled-subtle-on-primary-subtle-level-2: var(--dk-color-primary-300);
  --dk-surface-disabled-default-on-primary-subtle-level-2: var(--dk-color-primary-400);
  --dk-border-disabled-subtle-on-primary-subtle-level-2: var(--dk-color-primary-400);
  --dk-border-disabled-default-on-primary-subtle-level-2: var(--dk-color-primary-500);
  --dk-text-disabled-subtle-on-primary-subtle-level-2: var(--dk-color-primary-600);
  --dk-text-disabled-default-on-primary-subtle-level-2: var(--dk-color-primary-700);
  --dk-icon-disabled-subtle-on-primary-subtle-level-2: var(--dk-text-disabled-subtle-on-primary-subtle-level-2);
  --dk-icon-disabled-default-on-primary-subtle-level-2: var(--dk-text-disabled-default-on-primary-subtle-level-2);
  --dk-surface-disabled-subtle-on-primary-solid: var(--dk-color-primary-400);
  --dk-surface-disabled-default-on-primary-solid: var(--dk-color-primary-300);
  --dk-border-disabled-subtle-on-primary-solid: var(--dk-color-primary-400);
  --dk-border-disabled-default-on-primary-solid: var(--dk-color-primary-300);
  --dk-text-disabled-subtle-on-primary-solid: var(--dk-color-primary-100);
  --dk-text-disabled-default-on-primary-solid: var(--dk-color-primary-50);
  --dk-icon-disabled-subtle-on-primary-solid: var(--dk-text-disabled-subtle-on-primary-solid);
  --dk-icon-disabled-default-on-primary-solid: var(--dk-text-disabled-default-on-primary-solid);
  /* error — disabled controls on a error surface */
  --dk-surface-disabled-subtle-on-error-subtle-level-0: var(--dk-color-error-100);
  --dk-surface-disabled-default-on-error-subtle-level-0: var(--dk-color-error-200);
  --dk-border-disabled-subtle-on-error-subtle-level-0: var(--dk-color-error-200);
  --dk-border-disabled-default-on-error-subtle-level-0: var(--dk-color-error-300);
  --dk-text-disabled-subtle-on-error-subtle-level-0: var(--dk-color-error-400);
  --dk-text-disabled-default-on-error-subtle-level-0: var(--dk-color-error-500);
  --dk-icon-disabled-subtle-on-error-subtle-level-0: var(--dk-text-disabled-subtle-on-error-subtle-level-0);
  --dk-icon-disabled-default-on-error-subtle-level-0: var(--dk-text-disabled-default-on-error-subtle-level-0);
  --dk-surface-disabled-subtle-on-error-subtle-level-1: var(--dk-color-error-200);
  --dk-surface-disabled-default-on-error-subtle-level-1: var(--dk-color-error-300);
  --dk-border-disabled-subtle-on-error-subtle-level-1: var(--dk-color-error-300);
  --dk-border-disabled-default-on-error-subtle-level-1: var(--dk-color-error-400);
  --dk-text-disabled-subtle-on-error-subtle-level-1: var(--dk-color-error-500);
  --dk-text-disabled-default-on-error-subtle-level-1: var(--dk-color-error-600);
  --dk-icon-disabled-subtle-on-error-subtle-level-1: var(--dk-text-disabled-subtle-on-error-subtle-level-1);
  --dk-icon-disabled-default-on-error-subtle-level-1: var(--dk-text-disabled-default-on-error-subtle-level-1);
  --dk-surface-disabled-subtle-on-error-subtle-level-2: var(--dk-color-error-300);
  --dk-surface-disabled-default-on-error-subtle-level-2: var(--dk-color-error-400);
  --dk-border-disabled-subtle-on-error-subtle-level-2: var(--dk-color-error-400);
  --dk-border-disabled-default-on-error-subtle-level-2: var(--dk-color-error-500);
  --dk-text-disabled-subtle-on-error-subtle-level-2: var(--dk-color-error-600);
  --dk-text-disabled-default-on-error-subtle-level-2: var(--dk-color-error-700);
  --dk-icon-disabled-subtle-on-error-subtle-level-2: var(--dk-text-disabled-subtle-on-error-subtle-level-2);
  --dk-icon-disabled-default-on-error-subtle-level-2: var(--dk-text-disabled-default-on-error-subtle-level-2);
  --dk-surface-disabled-subtle-on-error-solid: var(--dk-color-error-400);
  --dk-surface-disabled-default-on-error-solid: var(--dk-color-error-300);
  --dk-border-disabled-subtle-on-error-solid: var(--dk-color-error-400);
  --dk-border-disabled-default-on-error-solid: var(--dk-color-error-300);
  --dk-text-disabled-subtle-on-error-solid: var(--dk-color-error-100);
  --dk-text-disabled-default-on-error-solid: var(--dk-color-error-50);
  --dk-icon-disabled-subtle-on-error-solid: var(--dk-text-disabled-subtle-on-error-solid);
  --dk-icon-disabled-default-on-error-solid: var(--dk-text-disabled-default-on-error-solid);
  /* warning — disabled controls on a warning surface */
  --dk-surface-disabled-subtle-on-warning-subtle-level-0: var(--dk-color-warning-100);
  --dk-surface-disabled-default-on-warning-subtle-level-0: var(--dk-color-warning-200);
  --dk-border-disabled-subtle-on-warning-subtle-level-0: var(--dk-color-warning-200);
  --dk-border-disabled-default-on-warning-subtle-level-0: var(--dk-color-warning-300);
  --dk-text-disabled-subtle-on-warning-subtle-level-0: var(--dk-color-warning-500);
  --dk-text-disabled-default-on-warning-subtle-level-0: var(--dk-color-warning-600);
  --dk-icon-disabled-subtle-on-warning-subtle-level-0: var(--dk-text-disabled-subtle-on-warning-subtle-level-0);
  --dk-icon-disabled-default-on-warning-subtle-level-0: var(--dk-text-disabled-default-on-warning-subtle-level-0);
  --dk-surface-disabled-subtle-on-warning-subtle-level-1: var(--dk-color-warning-200);
  --dk-surface-disabled-default-on-warning-subtle-level-1: var(--dk-color-warning-300);
  --dk-border-disabled-subtle-on-warning-subtle-level-1: var(--dk-color-warning-300);
  --dk-border-disabled-default-on-warning-subtle-level-1: var(--dk-color-warning-400);
  --dk-text-disabled-subtle-on-warning-subtle-level-1: var(--dk-color-warning-600);
  --dk-text-disabled-default-on-warning-subtle-level-1: var(--dk-color-warning-700);
  --dk-icon-disabled-subtle-on-warning-subtle-level-1: var(--dk-text-disabled-subtle-on-warning-subtle-level-1);
  --dk-icon-disabled-default-on-warning-subtle-level-1: var(--dk-text-disabled-default-on-warning-subtle-level-1);
  --dk-surface-disabled-subtle-on-warning-subtle-level-2: var(--dk-color-warning-300);
  --dk-surface-disabled-default-on-warning-subtle-level-2: var(--dk-color-warning-400);
  --dk-border-disabled-subtle-on-warning-subtle-level-2: var(--dk-color-warning-400);
  --dk-border-disabled-default-on-warning-subtle-level-2: var(--dk-color-warning-500);
  --dk-text-disabled-subtle-on-warning-subtle-level-2: var(--dk-color-warning-700);
  --dk-text-disabled-default-on-warning-subtle-level-2: var(--dk-color-warning-800);
  --dk-icon-disabled-subtle-on-warning-subtle-level-2: var(--dk-text-disabled-subtle-on-warning-subtle-level-2);
  --dk-icon-disabled-default-on-warning-subtle-level-2: var(--dk-text-disabled-default-on-warning-subtle-level-2);
  --dk-surface-disabled-subtle-on-warning-solid: var(--dk-color-warning-400);
  --dk-surface-disabled-default-on-warning-solid: var(--dk-color-warning-300);
  --dk-border-disabled-subtle-on-warning-solid: var(--dk-color-warning-400);
  --dk-border-disabled-default-on-warning-solid: var(--dk-color-warning-300);
  --dk-text-disabled-subtle-on-warning-solid: var(--dk-color-warning-800);
  --dk-text-disabled-default-on-warning-solid: var(--dk-color-warning-900);
  --dk-icon-disabled-subtle-on-warning-solid: var(--dk-text-disabled-subtle-on-warning-solid);
  --dk-icon-disabled-default-on-warning-solid: var(--dk-text-disabled-default-on-warning-solid);
  /* information — disabled controls on a information surface */
  --dk-surface-disabled-subtle-on-information-subtle-level-0: var(--dk-color-information-100);
  --dk-surface-disabled-default-on-information-subtle-level-0: var(--dk-color-information-200);
  --dk-border-disabled-subtle-on-information-subtle-level-0: var(--dk-color-information-200);
  --dk-border-disabled-default-on-information-subtle-level-0: var(--dk-color-information-300);
  --dk-text-disabled-subtle-on-information-subtle-level-0: var(--dk-color-information-400);
  --dk-text-disabled-default-on-information-subtle-level-0: var(--dk-color-information-500);
  --dk-icon-disabled-subtle-on-information-subtle-level-0: var(--dk-text-disabled-subtle-on-information-subtle-level-0);
  --dk-icon-disabled-default-on-information-subtle-level-0: var(--dk-text-disabled-default-on-information-subtle-level-0);
  --dk-surface-disabled-subtle-on-information-subtle-level-1: var(--dk-color-information-200);
  --dk-surface-disabled-default-on-information-subtle-level-1: var(--dk-color-information-300);
  --dk-border-disabled-subtle-on-information-subtle-level-1: var(--dk-color-information-300);
  --dk-border-disabled-default-on-information-subtle-level-1: var(--dk-color-information-400);
  --dk-text-disabled-subtle-on-information-subtle-level-1: var(--dk-color-information-500);
  --dk-text-disabled-default-on-information-subtle-level-1: var(--dk-color-information-600);
  --dk-icon-disabled-subtle-on-information-subtle-level-1: var(--dk-text-disabled-subtle-on-information-subtle-level-1);
  --dk-icon-disabled-default-on-information-subtle-level-1: var(--dk-text-disabled-default-on-information-subtle-level-1);
  --dk-surface-disabled-subtle-on-information-subtle-level-2: var(--dk-color-information-300);
  --dk-surface-disabled-default-on-information-subtle-level-2: var(--dk-color-information-400);
  --dk-border-disabled-subtle-on-information-subtle-level-2: var(--dk-color-information-400);
  --dk-border-disabled-default-on-information-subtle-level-2: var(--dk-color-information-500);
  --dk-text-disabled-subtle-on-information-subtle-level-2: var(--dk-color-information-600);
  --dk-text-disabled-default-on-information-subtle-level-2: var(--dk-color-information-700);
  --dk-icon-disabled-subtle-on-information-subtle-level-2: var(--dk-text-disabled-subtle-on-information-subtle-level-2);
  --dk-icon-disabled-default-on-information-subtle-level-2: var(--dk-text-disabled-default-on-information-subtle-level-2);
  --dk-surface-disabled-subtle-on-information-solid: var(--dk-color-information-400);
  --dk-surface-disabled-default-on-information-solid: var(--dk-color-information-300);
  --dk-border-disabled-subtle-on-information-solid: var(--dk-color-information-400);
  --dk-border-disabled-default-on-information-solid: var(--dk-color-information-300);
  --dk-text-disabled-subtle-on-information-solid: var(--dk-color-information-100);
  --dk-text-disabled-default-on-information-solid: var(--dk-color-information-50);
  --dk-icon-disabled-subtle-on-information-solid: var(--dk-text-disabled-subtle-on-information-solid);
  --dk-icon-disabled-default-on-information-solid: var(--dk-text-disabled-default-on-information-solid);
  /* success is jade — aliases primary, as the rest of the success ramp does */
  --dk-surface-disabled-subtle-on-success-subtle-level-0: var(--dk-surface-disabled-subtle-on-primary-subtle-level-0);
  --dk-surface-disabled-default-on-success-subtle-level-0: var(--dk-surface-disabled-default-on-primary-subtle-level-0);
  --dk-border-disabled-subtle-on-success-subtle-level-0: var(--dk-border-disabled-subtle-on-primary-subtle-level-0);
  --dk-border-disabled-default-on-success-subtle-level-0: var(--dk-border-disabled-default-on-primary-subtle-level-0);
  --dk-text-disabled-subtle-on-success-subtle-level-0: var(--dk-text-disabled-subtle-on-primary-subtle-level-0);
  --dk-text-disabled-default-on-success-subtle-level-0: var(--dk-text-disabled-default-on-primary-subtle-level-0);
  --dk-icon-disabled-subtle-on-success-subtle-level-0: var(--dk-icon-disabled-subtle-on-primary-subtle-level-0);
  --dk-icon-disabled-default-on-success-subtle-level-0: var(--dk-icon-disabled-default-on-primary-subtle-level-0);
  --dk-surface-disabled-subtle-on-success-subtle-level-1: var(--dk-surface-disabled-subtle-on-primary-subtle-level-1);
  --dk-surface-disabled-default-on-success-subtle-level-1: var(--dk-surface-disabled-default-on-primary-subtle-level-1);
  --dk-border-disabled-subtle-on-success-subtle-level-1: var(--dk-border-disabled-subtle-on-primary-subtle-level-1);
  --dk-border-disabled-default-on-success-subtle-level-1: var(--dk-border-disabled-default-on-primary-subtle-level-1);
  --dk-text-disabled-subtle-on-success-subtle-level-1: var(--dk-text-disabled-subtle-on-primary-subtle-level-1);
  --dk-text-disabled-default-on-success-subtle-level-1: var(--dk-text-disabled-default-on-primary-subtle-level-1);
  --dk-icon-disabled-subtle-on-success-subtle-level-1: var(--dk-icon-disabled-subtle-on-primary-subtle-level-1);
  --dk-icon-disabled-default-on-success-subtle-level-1: var(--dk-icon-disabled-default-on-primary-subtle-level-1);
  --dk-surface-disabled-subtle-on-success-subtle-level-2: var(--dk-surface-disabled-subtle-on-primary-subtle-level-2);
  --dk-surface-disabled-default-on-success-subtle-level-2: var(--dk-surface-disabled-default-on-primary-subtle-level-2);
  --dk-border-disabled-subtle-on-success-subtle-level-2: var(--dk-border-disabled-subtle-on-primary-subtle-level-2);
  --dk-border-disabled-default-on-success-subtle-level-2: var(--dk-border-disabled-default-on-primary-subtle-level-2);
  --dk-text-disabled-subtle-on-success-subtle-level-2: var(--dk-text-disabled-subtle-on-primary-subtle-level-2);
  --dk-text-disabled-default-on-success-subtle-level-2: var(--dk-text-disabled-default-on-primary-subtle-level-2);
  --dk-icon-disabled-subtle-on-success-subtle-level-2: var(--dk-icon-disabled-subtle-on-primary-subtle-level-2);
  --dk-icon-disabled-default-on-success-subtle-level-2: var(--dk-icon-disabled-default-on-primary-subtle-level-2);
  --dk-surface-disabled-subtle-on-success-solid: var(--dk-surface-disabled-subtle-on-primary-solid);
  --dk-surface-disabled-default-on-success-solid: var(--dk-surface-disabled-default-on-primary-solid);
  --dk-border-disabled-subtle-on-success-solid: var(--dk-border-disabled-subtle-on-primary-solid);
  --dk-border-disabled-default-on-success-solid: var(--dk-border-disabled-default-on-primary-solid);
  --dk-text-disabled-subtle-on-success-solid: var(--dk-text-disabled-subtle-on-primary-solid);
  --dk-text-disabled-default-on-success-solid: var(--dk-text-disabled-default-on-primary-solid);
  --dk-icon-disabled-subtle-on-success-solid: var(--dk-icon-disabled-subtle-on-primary-solid);
  --dk-icon-disabled-default-on-success-solid: var(--dk-icon-disabled-default-on-primary-solid);
  /* inverse — disabled controls on an inverse panel. The panel is the OTHER
     theme's page colour, so this is the other theme's disabled ramp. */
  --dk-surface-disabled-subtle-on-inverse-level-0: var(--dk-color-neutral-1000);
  --dk-surface-disabled-default-on-inverse-level-0: var(--dk-color-neutral-300);
  --dk-border-disabled-subtle-on-inverse-level-0: var(--dk-color-neutral-700);
  --dk-border-disabled-default-on-inverse-level-0: var(--dk-color-neutral-400);
  --dk-text-disabled-subtle-on-inverse-level-0: var(--dk-color-neutral-600);
  --dk-text-disabled-default-on-inverse-level-0: var(--dk-color-neutral-400);
  --dk-icon-disabled-subtle-on-inverse-level-0: var(--dk-text-disabled-subtle-on-inverse-level-0);
  --dk-icon-disabled-default-on-inverse-level-0: var(--dk-text-disabled-default-on-inverse-level-0);
  --dk-surface-disabled-subtle-on-inverse-level-1: var(--dk-color-neutral-900);
  --dk-surface-disabled-default-on-inverse-level-1: var(--dk-color-neutral-300);
  --dk-border-disabled-subtle-on-inverse-level-1: var(--dk-color-neutral-700);
  --dk-border-disabled-default-on-inverse-level-1: var(--dk-color-neutral-400);
  --dk-text-disabled-subtle-on-inverse-level-1: var(--dk-color-neutral-600);
  --dk-text-disabled-default-on-inverse-level-1: var(--dk-color-neutral-400);
  --dk-icon-disabled-subtle-on-inverse-level-1: var(--dk-text-disabled-subtle-on-inverse-level-1);
  --dk-icon-disabled-default-on-inverse-level-1: var(--dk-text-disabled-default-on-inverse-level-1);
  --dk-surface-disabled-subtle-on-inverse-level-2: var(--dk-color-neutral-800);
  --dk-surface-disabled-default-on-inverse-level-2: var(--dk-color-neutral-300);
  --dk-border-disabled-subtle-on-inverse-level-2: var(--dk-color-neutral-600);
  --dk-border-disabled-default-on-inverse-level-2: var(--dk-color-neutral-400);
  --dk-text-disabled-subtle-on-inverse-level-2: var(--dk-color-neutral-500);
  --dk-text-disabled-default-on-inverse-level-2: var(--dk-color-neutral-300);
  --dk-icon-disabled-subtle-on-inverse-level-2: var(--dk-text-disabled-subtle-on-inverse-level-2);
  --dk-icon-disabled-default-on-inverse-level-2: var(--dk-text-disabled-default-on-inverse-level-2);
}
[data-theme="dark"] {
  /* primary — disabled controls on a primary surface */
  --dk-surface-disabled-subtle-on-primary-subtle-level-0: var(--dk-color-primary-800);
  --dk-surface-disabled-default-on-primary-subtle-level-0: var(--dk-color-primary-700);
  --dk-border-disabled-subtle-on-primary-subtle-level-0: var(--dk-color-primary-700);
  --dk-border-disabled-default-on-primary-subtle-level-0: var(--dk-color-primary-600);
  --dk-text-disabled-subtle-on-primary-subtle-level-0: var(--dk-color-primary-600);
  --dk-text-disabled-default-on-primary-subtle-level-0: var(--dk-color-primary-500);
  --dk-icon-disabled-subtle-on-primary-subtle-level-0: var(--dk-text-disabled-subtle-on-primary-subtle-level-0);
  --dk-icon-disabled-default-on-primary-subtle-level-0: var(--dk-text-disabled-default-on-primary-subtle-level-0);
  --dk-surface-disabled-subtle-on-primary-subtle-level-1: var(--dk-color-primary-700);
  --dk-surface-disabled-default-on-primary-subtle-level-1: var(--dk-color-primary-600);
  --dk-border-disabled-subtle-on-primary-subtle-level-1: var(--dk-color-primary-600);
  --dk-border-disabled-default-on-primary-subtle-level-1: var(--dk-color-primary-500);
  --dk-text-disabled-subtle-on-primary-subtle-level-1: var(--dk-color-primary-500);
  --dk-text-disabled-default-on-primary-subtle-level-1: var(--dk-color-primary-400);
  --dk-icon-disabled-subtle-on-primary-subtle-level-1: var(--dk-text-disabled-subtle-on-primary-subtle-level-1);
  --dk-icon-disabled-default-on-primary-subtle-level-1: var(--dk-text-disabled-default-on-primary-subtle-level-1);
  --dk-surface-disabled-subtle-on-primary-subtle-level-2: var(--dk-color-primary-600);
  --dk-surface-disabled-default-on-primary-subtle-level-2: var(--dk-color-primary-500);
  --dk-border-disabled-subtle-on-primary-subtle-level-2: var(--dk-color-primary-500);
  --dk-border-disabled-default-on-primary-subtle-level-2: var(--dk-color-primary-400);
  --dk-text-disabled-subtle-on-primary-subtle-level-2: var(--dk-color-primary-300);
  --dk-text-disabled-default-on-primary-subtle-level-2: var(--dk-color-primary-200);
  --dk-icon-disabled-subtle-on-primary-subtle-level-2: var(--dk-text-disabled-subtle-on-primary-subtle-level-2);
  --dk-icon-disabled-default-on-primary-subtle-level-2: var(--dk-text-disabled-default-on-primary-subtle-level-2);
  --dk-surface-disabled-subtle-on-primary-solid: var(--dk-color-primary-800);
  --dk-surface-disabled-default-on-primary-solid: var(--dk-color-primary-900);
  --dk-border-disabled-subtle-on-primary-solid: var(--dk-color-primary-800);
  --dk-border-disabled-default-on-primary-solid: var(--dk-color-primary-900);
  --dk-text-disabled-subtle-on-primary-solid: var(--dk-color-primary-400);
  --dk-text-disabled-default-on-primary-solid: var(--dk-color-primary-300);
  --dk-icon-disabled-subtle-on-primary-solid: var(--dk-text-disabled-subtle-on-primary-solid);
  --dk-icon-disabled-default-on-primary-solid: var(--dk-text-disabled-default-on-primary-solid);
  /* error — disabled controls on a error surface */
  --dk-surface-disabled-subtle-on-error-subtle-level-0: var(--dk-color-error-800);
  --dk-surface-disabled-default-on-error-subtle-level-0: var(--dk-color-error-700);
  --dk-border-disabled-subtle-on-error-subtle-level-0: var(--dk-color-error-700);
  --dk-border-disabled-default-on-error-subtle-level-0: var(--dk-color-error-600);
  --dk-text-disabled-subtle-on-error-subtle-level-0: var(--dk-color-error-500);
  --dk-text-disabled-default-on-error-subtle-level-0: var(--dk-color-error-400);
  --dk-icon-disabled-subtle-on-error-subtle-level-0: var(--dk-text-disabled-subtle-on-error-subtle-level-0);
  --dk-icon-disabled-default-on-error-subtle-level-0: var(--dk-text-disabled-default-on-error-subtle-level-0);
  --dk-surface-disabled-subtle-on-error-subtle-level-1: var(--dk-color-error-700);
  --dk-surface-disabled-default-on-error-subtle-level-1: var(--dk-color-error-600);
  --dk-border-disabled-subtle-on-error-subtle-level-1: var(--dk-color-error-600);
  --dk-border-disabled-default-on-error-subtle-level-1: var(--dk-color-error-500);
  --dk-text-disabled-subtle-on-error-subtle-level-1: var(--dk-color-error-400);
  --dk-text-disabled-default-on-error-subtle-level-1: var(--dk-color-error-300);
  --dk-icon-disabled-subtle-on-error-subtle-level-1: var(--dk-text-disabled-subtle-on-error-subtle-level-1);
  --dk-icon-disabled-default-on-error-subtle-level-1: var(--dk-text-disabled-default-on-error-subtle-level-1);
  --dk-surface-disabled-subtle-on-error-subtle-level-2: var(--dk-color-error-600);
  --dk-surface-disabled-default-on-error-subtle-level-2: var(--dk-color-error-500);
  --dk-border-disabled-subtle-on-error-subtle-level-2: var(--dk-color-error-500);
  --dk-border-disabled-default-on-error-subtle-level-2: var(--dk-color-error-400);
  --dk-text-disabled-subtle-on-error-subtle-level-2: var(--dk-color-error-300);
  --dk-text-disabled-default-on-error-subtle-level-2: var(--dk-color-error-200);
  --dk-icon-disabled-subtle-on-error-subtle-level-2: var(--dk-text-disabled-subtle-on-error-subtle-level-2);
  --dk-icon-disabled-default-on-error-subtle-level-2: var(--dk-text-disabled-default-on-error-subtle-level-2);
  --dk-surface-disabled-subtle-on-error-solid: var(--dk-color-error-800);
  --dk-surface-disabled-default-on-error-solid: var(--dk-color-error-900);
  --dk-border-disabled-subtle-on-error-solid: var(--dk-color-error-800);
  --dk-border-disabled-default-on-error-solid: var(--dk-color-error-900);
  --dk-text-disabled-subtle-on-error-solid: var(--dk-color-error-400);
  --dk-text-disabled-default-on-error-solid: var(--dk-color-error-300);
  --dk-icon-disabled-subtle-on-error-solid: var(--dk-text-disabled-subtle-on-error-solid);
  --dk-icon-disabled-default-on-error-solid: var(--dk-text-disabled-default-on-error-solid);
  /* warning — disabled controls on a warning surface */
  --dk-surface-disabled-subtle-on-warning-subtle-level-0: var(--dk-color-warning-800);
  --dk-surface-disabled-default-on-warning-subtle-level-0: var(--dk-color-warning-700);
  --dk-border-disabled-subtle-on-warning-subtle-level-0: var(--dk-color-warning-700);
  --dk-border-disabled-default-on-warning-subtle-level-0: var(--dk-color-warning-600);
  --dk-text-disabled-subtle-on-warning-subtle-level-0: var(--dk-color-warning-500);
  --dk-text-disabled-default-on-warning-subtle-level-0: var(--dk-color-warning-400);
  --dk-icon-disabled-subtle-on-warning-subtle-level-0: var(--dk-text-disabled-subtle-on-warning-subtle-level-0);
  --dk-icon-disabled-default-on-warning-subtle-level-0: var(--dk-text-disabled-default-on-warning-subtle-level-0);
  --dk-surface-disabled-subtle-on-warning-subtle-level-1: var(--dk-color-warning-700);
  --dk-surface-disabled-default-on-warning-subtle-level-1: var(--dk-color-warning-600);
  --dk-border-disabled-subtle-on-warning-subtle-level-1: var(--dk-color-warning-600);
  --dk-border-disabled-default-on-warning-subtle-level-1: var(--dk-color-warning-500);
  --dk-text-disabled-subtle-on-warning-subtle-level-1: var(--dk-color-warning-400);
  --dk-text-disabled-default-on-warning-subtle-level-1: var(--dk-color-warning-300);
  --dk-icon-disabled-subtle-on-warning-subtle-level-1: var(--dk-text-disabled-subtle-on-warning-subtle-level-1);
  --dk-icon-disabled-default-on-warning-subtle-level-1: var(--dk-text-disabled-default-on-warning-subtle-level-1);
  --dk-surface-disabled-subtle-on-warning-subtle-level-2: var(--dk-color-warning-600);
  --dk-surface-disabled-default-on-warning-subtle-level-2: var(--dk-color-warning-500);
  --dk-border-disabled-subtle-on-warning-subtle-level-2: var(--dk-color-warning-500);
  --dk-border-disabled-default-on-warning-subtle-level-2: var(--dk-color-warning-400);
  --dk-text-disabled-subtle-on-warning-subtle-level-2: var(--dk-color-warning-200);
  --dk-text-disabled-default-on-warning-subtle-level-2: var(--dk-color-warning-100);
  --dk-icon-disabled-subtle-on-warning-subtle-level-2: var(--dk-text-disabled-subtle-on-warning-subtle-level-2);
  --dk-icon-disabled-default-on-warning-subtle-level-2: var(--dk-text-disabled-default-on-warning-subtle-level-2);
  --dk-surface-disabled-subtle-on-warning-solid: var(--dk-color-warning-800);
  --dk-surface-disabled-default-on-warning-solid: var(--dk-color-warning-900);
  --dk-border-disabled-subtle-on-warning-solid: var(--dk-color-warning-800);
  --dk-border-disabled-default-on-warning-solid: var(--dk-color-warning-900);
  --dk-text-disabled-subtle-on-warning-solid: var(--dk-color-warning-400);
  --dk-text-disabled-default-on-warning-solid: var(--dk-color-warning-300);
  --dk-icon-disabled-subtle-on-warning-solid: var(--dk-text-disabled-subtle-on-warning-solid);
  --dk-icon-disabled-default-on-warning-solid: var(--dk-text-disabled-default-on-warning-solid);
  /* information — disabled controls on a information surface */
  --dk-surface-disabled-subtle-on-information-subtle-level-0: var(--dk-color-information-800);
  --dk-surface-disabled-default-on-information-subtle-level-0: var(--dk-color-information-700);
  --dk-border-disabled-subtle-on-information-subtle-level-0: var(--dk-color-information-700);
  --dk-border-disabled-default-on-information-subtle-level-0: var(--dk-color-information-600);
  --dk-text-disabled-subtle-on-information-subtle-level-0: var(--dk-color-information-500);
  --dk-text-disabled-default-on-information-subtle-level-0: var(--dk-color-information-400);
  --dk-icon-disabled-subtle-on-information-subtle-level-0: var(--dk-text-disabled-subtle-on-information-subtle-level-0);
  --dk-icon-disabled-default-on-information-subtle-level-0: var(--dk-text-disabled-default-on-information-subtle-level-0);
  --dk-surface-disabled-subtle-on-information-subtle-level-1: var(--dk-color-information-700);
  --dk-surface-disabled-default-on-information-subtle-level-1: var(--dk-color-information-600);
  --dk-border-disabled-subtle-on-information-subtle-level-1: var(--dk-color-information-600);
  --dk-border-disabled-default-on-information-subtle-level-1: var(--dk-color-information-500);
  --dk-text-disabled-subtle-on-information-subtle-level-1: var(--dk-color-information-400);
  --dk-text-disabled-default-on-information-subtle-level-1: var(--dk-color-information-300);
  --dk-icon-disabled-subtle-on-information-subtle-level-1: var(--dk-text-disabled-subtle-on-information-subtle-level-1);
  --dk-icon-disabled-default-on-information-subtle-level-1: var(--dk-text-disabled-default-on-information-subtle-level-1);
  --dk-surface-disabled-subtle-on-information-subtle-level-2: var(--dk-color-information-600);
  --dk-surface-disabled-default-on-information-subtle-level-2: var(--dk-color-information-500);
  --dk-border-disabled-subtle-on-information-subtle-level-2: var(--dk-color-information-500);
  --dk-border-disabled-default-on-information-subtle-level-2: var(--dk-color-information-400);
  --dk-text-disabled-subtle-on-information-subtle-level-2: var(--dk-color-information-300);
  --dk-text-disabled-default-on-information-subtle-level-2: var(--dk-color-information-200);
  --dk-icon-disabled-subtle-on-information-subtle-level-2: var(--dk-text-disabled-subtle-on-information-subtle-level-2);
  --dk-icon-disabled-default-on-information-subtle-level-2: var(--dk-text-disabled-default-on-information-subtle-level-2);
  --dk-surface-disabled-subtle-on-information-solid: var(--dk-color-information-800);
  --dk-surface-disabled-default-on-information-solid: var(--dk-color-information-900);
  --dk-border-disabled-subtle-on-information-solid: var(--dk-color-information-800);
  --dk-border-disabled-default-on-information-solid: var(--dk-color-information-900);
  --dk-text-disabled-subtle-on-information-solid: var(--dk-color-information-400);
  --dk-text-disabled-default-on-information-solid: var(--dk-color-information-300);
  --dk-icon-disabled-subtle-on-information-solid: var(--dk-text-disabled-subtle-on-information-solid);
  --dk-icon-disabled-default-on-information-solid: var(--dk-text-disabled-default-on-information-solid);
  /* success is jade — aliases primary, as the rest of the success ramp does */
  --dk-surface-disabled-subtle-on-success-subtle-level-0: var(--dk-surface-disabled-subtle-on-primary-subtle-level-0);
  --dk-surface-disabled-default-on-success-subtle-level-0: var(--dk-surface-disabled-default-on-primary-subtle-level-0);
  --dk-border-disabled-subtle-on-success-subtle-level-0: var(--dk-border-disabled-subtle-on-primary-subtle-level-0);
  --dk-border-disabled-default-on-success-subtle-level-0: var(--dk-border-disabled-default-on-primary-subtle-level-0);
  --dk-text-disabled-subtle-on-success-subtle-level-0: var(--dk-text-disabled-subtle-on-primary-subtle-level-0);
  --dk-text-disabled-default-on-success-subtle-level-0: var(--dk-text-disabled-default-on-primary-subtle-level-0);
  --dk-icon-disabled-subtle-on-success-subtle-level-0: var(--dk-icon-disabled-subtle-on-primary-subtle-level-0);
  --dk-icon-disabled-default-on-success-subtle-level-0: var(--dk-icon-disabled-default-on-primary-subtle-level-0);
  --dk-surface-disabled-subtle-on-success-subtle-level-1: var(--dk-surface-disabled-subtle-on-primary-subtle-level-1);
  --dk-surface-disabled-default-on-success-subtle-level-1: var(--dk-surface-disabled-default-on-primary-subtle-level-1);
  --dk-border-disabled-subtle-on-success-subtle-level-1: var(--dk-border-disabled-subtle-on-primary-subtle-level-1);
  --dk-border-disabled-default-on-success-subtle-level-1: var(--dk-border-disabled-default-on-primary-subtle-level-1);
  --dk-text-disabled-subtle-on-success-subtle-level-1: var(--dk-text-disabled-subtle-on-primary-subtle-level-1);
  --dk-text-disabled-default-on-success-subtle-level-1: var(--dk-text-disabled-default-on-primary-subtle-level-1);
  --dk-icon-disabled-subtle-on-success-subtle-level-1: var(--dk-icon-disabled-subtle-on-primary-subtle-level-1);
  --dk-icon-disabled-default-on-success-subtle-level-1: var(--dk-icon-disabled-default-on-primary-subtle-level-1);
  --dk-surface-disabled-subtle-on-success-subtle-level-2: var(--dk-surface-disabled-subtle-on-primary-subtle-level-2);
  --dk-surface-disabled-default-on-success-subtle-level-2: var(--dk-surface-disabled-default-on-primary-subtle-level-2);
  --dk-border-disabled-subtle-on-success-subtle-level-2: var(--dk-border-disabled-subtle-on-primary-subtle-level-2);
  --dk-border-disabled-default-on-success-subtle-level-2: var(--dk-border-disabled-default-on-primary-subtle-level-2);
  --dk-text-disabled-subtle-on-success-subtle-level-2: var(--dk-text-disabled-subtle-on-primary-subtle-level-2);
  --dk-text-disabled-default-on-success-subtle-level-2: var(--dk-text-disabled-default-on-primary-subtle-level-2);
  --dk-icon-disabled-subtle-on-success-subtle-level-2: var(--dk-icon-disabled-subtle-on-primary-subtle-level-2);
  --dk-icon-disabled-default-on-success-subtle-level-2: var(--dk-icon-disabled-default-on-primary-subtle-level-2);
  --dk-surface-disabled-subtle-on-success-solid: var(--dk-surface-disabled-subtle-on-primary-solid);
  --dk-surface-disabled-default-on-success-solid: var(--dk-surface-disabled-default-on-primary-solid);
  --dk-border-disabled-subtle-on-success-solid: var(--dk-border-disabled-subtle-on-primary-solid);
  --dk-border-disabled-default-on-success-solid: var(--dk-border-disabled-default-on-primary-solid);
  --dk-text-disabled-subtle-on-success-solid: var(--dk-text-disabled-subtle-on-primary-solid);
  --dk-text-disabled-default-on-success-solid: var(--dk-text-disabled-default-on-primary-solid);
  --dk-icon-disabled-subtle-on-success-solid: var(--dk-icon-disabled-subtle-on-primary-solid);
  --dk-icon-disabled-default-on-success-solid: var(--dk-icon-disabled-default-on-primary-solid);
  /* inverse — disabled controls on an inverse panel. The panel is the OTHER
     theme's page colour, so this is the other theme's disabled ramp. */
  --dk-surface-disabled-subtle-on-inverse-level-0: var(--dk-color-neutral-25);
  --dk-surface-disabled-default-on-inverse-level-0: var(--dk-color-neutral-300);
  --dk-border-disabled-subtle-on-inverse-level-0: var(--dk-color-neutral-100);
  --dk-border-disabled-default-on-inverse-level-0: var(--dk-color-neutral-400);
  --dk-text-disabled-subtle-on-inverse-level-0: var(--dk-color-neutral-200);
  --dk-text-disabled-default-on-inverse-level-0: var(--dk-color-neutral-400);
  --dk-icon-disabled-subtle-on-inverse-level-0: var(--dk-text-disabled-subtle-on-inverse-level-0);
  --dk-icon-disabled-default-on-inverse-level-0: var(--dk-text-disabled-default-on-inverse-level-0);
  --dk-surface-disabled-subtle-on-inverse-level-1: var(--dk-color-neutral-50);
  --dk-surface-disabled-default-on-inverse-level-1: var(--dk-color-neutral-300);
  --dk-border-disabled-subtle-on-inverse-level-1: var(--dk-color-neutral-200);
  --dk-border-disabled-default-on-inverse-level-1: var(--dk-color-neutral-400);
  --dk-text-disabled-subtle-on-inverse-level-1: var(--dk-color-neutral-300);
  --dk-text-disabled-default-on-inverse-level-1: var(--dk-color-neutral-400);
  --dk-icon-disabled-subtle-on-inverse-level-1: var(--dk-text-disabled-subtle-on-inverse-level-1);
  --dk-icon-disabled-default-on-inverse-level-1: var(--dk-text-disabled-default-on-inverse-level-1);
  --dk-surface-disabled-subtle-on-inverse-level-2: var(--dk-color-neutral-100);
  --dk-surface-disabled-default-on-inverse-level-2: var(--dk-color-neutral-300);
  --dk-border-disabled-subtle-on-inverse-level-2: var(--dk-color-neutral-300);
  --dk-border-disabled-default-on-inverse-level-2: var(--dk-color-neutral-400);
  --dk-text-disabled-subtle-on-inverse-level-2: var(--dk-color-neutral-400);
  --dk-text-disabled-default-on-inverse-level-2: var(--dk-color-neutral-500);
  --dk-icon-disabled-subtle-on-inverse-level-2: var(--dk-text-disabled-subtle-on-inverse-level-2);
  --dk-icon-disabled-default-on-inverse-level-2: var(--dk-text-disabled-default-on-inverse-level-2);
}

/* ── 2a. Per-status wiring — which ramp feeds the --tone-* slots ────────── */
[data-theme] [data-tone="primary"]:not([data-theme]),
[data-theme][data-tone="primary"] {
  --_tone-surface-subtle-0: var(--dk-surface-primary-subtle-level-0);
  --_tone-surface-subtle-1: var(--dk-surface-primary-subtle-level-1);
  --_tone-surface-subtle-2: var(--dk-surface-primary-subtle-level-2);
  --_tone-surface-solid: var(--dk-surface-primary-solid);
  --_tone-surface-solid-1: var(--dk-surface-primary-solid-level-1);
  --_tone-surface-solid-2: var(--dk-surface-primary-solid-level-2);
  --_tone-border-structural-0: var(--dk-border-primary-structural-on-subtle);
  --_tone-border-structural-1: var(--dk-border-primary-structural-on-subtle);
  --_tone-border-structural-2: var(--dk-border-primary-structural-on-subtle-level-2);
  --_tone-border-hairline-on-subtle-0: var(--dk-border-primary-hairline-on-subtle);
  --_tone-border-hairline-on-subtle-1: var(--dk-border-primary-hairline-on-subtle);
  --_tone-border-hairline-on-subtle-2: var(--dk-border-primary-hairline-on-subtle-level-2);
  --_tone-border-hairline-on-solid: var(--dk-border-primary-hairline-on-solid);
  --_tone-text-on-subtle-0: var(--dk-text-primary-on-subtle-level-0);
  --_tone-icon-on-subtle-0: var(--dk-icon-primary-on-subtle-level-0);
  --_tone-text-on-subtle-1: var(--dk-text-primary-on-subtle-level-1);
  --_tone-icon-on-subtle-1: var(--dk-icon-primary-on-subtle-level-1);
  --_tone-text-on-subtle-2: var(--dk-text-primary-on-subtle-level-2);
  --_tone-icon-on-subtle-2: var(--dk-icon-primary-on-subtle-level-2);
  --_tone-text-on-solid: var(--dk-text-primary-on-solid);
  --_tone-icon-on-solid: var(--dk-icon-primary-on-solid);
  --_tone-text-neutral-on-solid: var(--dk-text-neutral-on-primary-solid);
  --_tone-icon-neutral-on-solid: var(--dk-icon-neutral-on-primary-solid);
  /* the remap that answers "what does primary text look like on a primary surface" */
  --dk-text-primary-default: var(--_tone-text);
  /* disabled family (1b) */
  --_tone-surface-disabled-subtle-0: var(--dk-surface-disabled-subtle-on-primary-subtle-level-0);
  --_tone-surface-disabled-default-0: var(--dk-surface-disabled-default-on-primary-subtle-level-0);
  --_tone-border-disabled-subtle-0: var(--dk-border-disabled-subtle-on-primary-subtle-level-0);
  --_tone-border-disabled-default-0: var(--dk-border-disabled-default-on-primary-subtle-level-0);
  --_tone-text-disabled-subtle-0: var(--dk-text-disabled-subtle-on-primary-subtle-level-0);
  --_tone-text-disabled-default-0: var(--dk-text-disabled-default-on-primary-subtle-level-0);
  --_tone-icon-disabled-subtle-0: var(--dk-icon-disabled-subtle-on-primary-subtle-level-0);
  --_tone-icon-disabled-default-0: var(--dk-icon-disabled-default-on-primary-subtle-level-0);
  --_tone-surface-disabled-subtle-1: var(--dk-surface-disabled-subtle-on-primary-subtle-level-1);
  --_tone-surface-disabled-default-1: var(--dk-surface-disabled-default-on-primary-subtle-level-1);
  --_tone-border-disabled-subtle-1: var(--dk-border-disabled-subtle-on-primary-subtle-level-1);
  --_tone-border-disabled-default-1: var(--dk-border-disabled-default-on-primary-subtle-level-1);
  --_tone-text-disabled-subtle-1: var(--dk-text-disabled-subtle-on-primary-subtle-level-1);
  --_tone-text-disabled-default-1: var(--dk-text-disabled-default-on-primary-subtle-level-1);
  --_tone-icon-disabled-subtle-1: var(--dk-icon-disabled-subtle-on-primary-subtle-level-1);
  --_tone-icon-disabled-default-1: var(--dk-icon-disabled-default-on-primary-subtle-level-1);
  --_tone-surface-disabled-subtle-2: var(--dk-surface-disabled-subtle-on-primary-subtle-level-2);
  --_tone-surface-disabled-default-2: var(--dk-surface-disabled-default-on-primary-subtle-level-2);
  --_tone-border-disabled-subtle-2: var(--dk-border-disabled-subtle-on-primary-subtle-level-2);
  --_tone-border-disabled-default-2: var(--dk-border-disabled-default-on-primary-subtle-level-2);
  --_tone-text-disabled-subtle-2: var(--dk-text-disabled-subtle-on-primary-subtle-level-2);
  --_tone-text-disabled-default-2: var(--dk-text-disabled-default-on-primary-subtle-level-2);
  --_tone-icon-disabled-subtle-2: var(--dk-icon-disabled-subtle-on-primary-subtle-level-2);
  --_tone-icon-disabled-default-2: var(--dk-icon-disabled-default-on-primary-subtle-level-2);
  --_tone-surface-disabled-subtle-solid: var(--dk-surface-disabled-subtle-on-primary-solid);
  --_tone-surface-disabled-default-solid: var(--dk-surface-disabled-default-on-primary-solid);
  --_tone-border-disabled-subtle-solid: var(--dk-border-disabled-subtle-on-primary-solid);
  --_tone-border-disabled-default-solid: var(--dk-border-disabled-default-on-primary-solid);
  --_tone-text-disabled-subtle-solid: var(--dk-text-disabled-subtle-on-primary-solid);
  --_tone-text-disabled-default-solid: var(--dk-text-disabled-default-on-primary-solid);
  --_tone-icon-disabled-subtle-solid: var(--dk-icon-disabled-subtle-on-primary-solid);
  --_tone-icon-disabled-default-solid: var(--dk-icon-disabled-default-on-primary-solid);
  --dk-icon-primary-default: var(--_tone-icon);
}
[data-theme] [data-tone="success"]:not([data-theme]),
[data-theme][data-tone="success"] {
  --_tone-surface-subtle-0: var(--dk-surface-success-subtle-level-0);
  --_tone-surface-subtle-1: var(--dk-surface-success-subtle-level-1);
  --_tone-surface-subtle-2: var(--dk-surface-success-subtle-level-2);
  --_tone-surface-solid: var(--dk-surface-success-solid);
  --_tone-surface-solid-1: var(--dk-surface-success-solid-level-1);
  --_tone-surface-solid-2: var(--dk-surface-success-solid-level-2);
  --_tone-border-structural-0: var(--dk-border-success-structural-on-subtle);
  --_tone-border-structural-1: var(--dk-border-success-structural-on-subtle);
  --_tone-border-structural-2: var(--dk-border-success-structural-on-subtle-level-2);
  --_tone-border-hairline-on-subtle-0: var(--dk-border-success-hairline-on-subtle);
  --_tone-border-hairline-on-subtle-1: var(--dk-border-success-hairline-on-subtle);
  --_tone-border-hairline-on-subtle-2: var(--dk-border-success-hairline-on-subtle-level-2);
  --_tone-border-hairline-on-solid: var(--dk-border-success-hairline-on-solid);
  --_tone-text-on-subtle-0: var(--dk-text-success-on-subtle-level-0);
  --_tone-icon-on-subtle-0: var(--dk-icon-success-on-subtle-level-0);
  --_tone-text-on-subtle-1: var(--dk-text-success-on-subtle-level-1);
  --_tone-icon-on-subtle-1: var(--dk-icon-success-on-subtle-level-1);
  --_tone-text-on-subtle-2: var(--dk-text-success-on-subtle-level-2);
  --_tone-icon-on-subtle-2: var(--dk-icon-success-on-subtle-level-2);
  --_tone-text-on-solid: var(--dk-text-success-on-solid);
  --_tone-icon-on-solid: var(--dk-icon-success-on-solid);
  --_tone-text-neutral-on-solid: var(--dk-text-neutral-on-success-solid);
  --_tone-icon-neutral-on-solid: var(--dk-icon-neutral-on-success-solid);
  /* the remap that answers "what does success text look like on a success surface" */
  --dk-text-success-default: var(--_tone-text);
  /* disabled family (1b) */
  --_tone-surface-disabled-subtle-0: var(--dk-surface-disabled-subtle-on-success-subtle-level-0);
  --_tone-surface-disabled-default-0: var(--dk-surface-disabled-default-on-success-subtle-level-0);
  --_tone-border-disabled-subtle-0: var(--dk-border-disabled-subtle-on-success-subtle-level-0);
  --_tone-border-disabled-default-0: var(--dk-border-disabled-default-on-success-subtle-level-0);
  --_tone-text-disabled-subtle-0: var(--dk-text-disabled-subtle-on-success-subtle-level-0);
  --_tone-text-disabled-default-0: var(--dk-text-disabled-default-on-success-subtle-level-0);
  --_tone-icon-disabled-subtle-0: var(--dk-icon-disabled-subtle-on-success-subtle-level-0);
  --_tone-icon-disabled-default-0: var(--dk-icon-disabled-default-on-success-subtle-level-0);
  --_tone-surface-disabled-subtle-1: var(--dk-surface-disabled-subtle-on-success-subtle-level-1);
  --_tone-surface-disabled-default-1: var(--dk-surface-disabled-default-on-success-subtle-level-1);
  --_tone-border-disabled-subtle-1: var(--dk-border-disabled-subtle-on-success-subtle-level-1);
  --_tone-border-disabled-default-1: var(--dk-border-disabled-default-on-success-subtle-level-1);
  --_tone-text-disabled-subtle-1: var(--dk-text-disabled-subtle-on-success-subtle-level-1);
  --_tone-text-disabled-default-1: var(--dk-text-disabled-default-on-success-subtle-level-1);
  --_tone-icon-disabled-subtle-1: var(--dk-icon-disabled-subtle-on-success-subtle-level-1);
  --_tone-icon-disabled-default-1: var(--dk-icon-disabled-default-on-success-subtle-level-1);
  --_tone-surface-disabled-subtle-2: var(--dk-surface-disabled-subtle-on-success-subtle-level-2);
  --_tone-surface-disabled-default-2: var(--dk-surface-disabled-default-on-success-subtle-level-2);
  --_tone-border-disabled-subtle-2: var(--dk-border-disabled-subtle-on-success-subtle-level-2);
  --_tone-border-disabled-default-2: var(--dk-border-disabled-default-on-success-subtle-level-2);
  --_tone-text-disabled-subtle-2: var(--dk-text-disabled-subtle-on-success-subtle-level-2);
  --_tone-text-disabled-default-2: var(--dk-text-disabled-default-on-success-subtle-level-2);
  --_tone-icon-disabled-subtle-2: var(--dk-icon-disabled-subtle-on-success-subtle-level-2);
  --_tone-icon-disabled-default-2: var(--dk-icon-disabled-default-on-success-subtle-level-2);
  --_tone-surface-disabled-subtle-solid: var(--dk-surface-disabled-subtle-on-success-solid);
  --_tone-surface-disabled-default-solid: var(--dk-surface-disabled-default-on-success-solid);
  --_tone-border-disabled-subtle-solid: var(--dk-border-disabled-subtle-on-success-solid);
  --_tone-border-disabled-default-solid: var(--dk-border-disabled-default-on-success-solid);
  --_tone-text-disabled-subtle-solid: var(--dk-text-disabled-subtle-on-success-solid);
  --_tone-text-disabled-default-solid: var(--dk-text-disabled-default-on-success-solid);
  --_tone-icon-disabled-subtle-solid: var(--dk-icon-disabled-subtle-on-success-solid);
  --_tone-icon-disabled-default-solid: var(--dk-icon-disabled-default-on-success-solid);
  --dk-icon-success-default: var(--_tone-icon);
}
[data-theme] [data-tone="error"]:not([data-theme]),
[data-theme][data-tone="error"] {
  --_tone-surface-subtle-0: var(--dk-surface-error-subtle-level-0);
  --_tone-surface-subtle-1: var(--dk-surface-error-subtle-level-1);
  --_tone-surface-subtle-2: var(--dk-surface-error-subtle-level-2);
  --_tone-surface-solid: var(--dk-surface-error-solid);
  --_tone-surface-solid-1: var(--dk-surface-error-solid-level-1);
  --_tone-surface-solid-2: var(--dk-surface-error-solid-level-2);
  --_tone-border-structural-0: var(--dk-border-error-structural-on-subtle);
  --_tone-border-structural-1: var(--dk-border-error-structural-on-subtle);
  --_tone-border-structural-2: var(--dk-border-error-structural-on-subtle-level-2);
  --_tone-border-hairline-on-subtle-0: var(--dk-border-error-hairline-on-subtle);
  --_tone-border-hairline-on-subtle-1: var(--dk-border-error-hairline-on-subtle);
  --_tone-border-hairline-on-subtle-2: var(--dk-border-error-hairline-on-subtle-level-2);
  --_tone-border-hairline-on-solid: var(--dk-border-error-hairline-on-solid);
  --_tone-text-on-subtle-0: var(--dk-text-error-on-subtle-level-0);
  --_tone-icon-on-subtle-0: var(--dk-icon-error-on-subtle-level-0);
  --_tone-text-on-subtle-1: var(--dk-text-error-on-subtle-level-1);
  --_tone-icon-on-subtle-1: var(--dk-icon-error-on-subtle-level-1);
  --_tone-text-on-subtle-2: var(--dk-text-error-on-subtle-level-2);
  --_tone-icon-on-subtle-2: var(--dk-icon-error-on-subtle-level-2);
  --_tone-text-on-solid: var(--dk-text-error-on-solid);
  --_tone-icon-on-solid: var(--dk-icon-error-on-solid);
  --_tone-text-neutral-on-solid: var(--dk-text-neutral-on-error-solid);
  --_tone-icon-neutral-on-solid: var(--dk-icon-neutral-on-error-solid);
  /* the remap that answers "what does error text look like on a error surface" */
  --dk-text-error-default: var(--_tone-text);
  /* disabled family (1b) */
  --_tone-surface-disabled-subtle-0: var(--dk-surface-disabled-subtle-on-error-subtle-level-0);
  --_tone-surface-disabled-default-0: var(--dk-surface-disabled-default-on-error-subtle-level-0);
  --_tone-border-disabled-subtle-0: var(--dk-border-disabled-subtle-on-error-subtle-level-0);
  --_tone-border-disabled-default-0: var(--dk-border-disabled-default-on-error-subtle-level-0);
  --_tone-text-disabled-subtle-0: var(--dk-text-disabled-subtle-on-error-subtle-level-0);
  --_tone-text-disabled-default-0: var(--dk-text-disabled-default-on-error-subtle-level-0);
  --_tone-icon-disabled-subtle-0: var(--dk-icon-disabled-subtle-on-error-subtle-level-0);
  --_tone-icon-disabled-default-0: var(--dk-icon-disabled-default-on-error-subtle-level-0);
  --_tone-surface-disabled-subtle-1: var(--dk-surface-disabled-subtle-on-error-subtle-level-1);
  --_tone-surface-disabled-default-1: var(--dk-surface-disabled-default-on-error-subtle-level-1);
  --_tone-border-disabled-subtle-1: var(--dk-border-disabled-subtle-on-error-subtle-level-1);
  --_tone-border-disabled-default-1: var(--dk-border-disabled-default-on-error-subtle-level-1);
  --_tone-text-disabled-subtle-1: var(--dk-text-disabled-subtle-on-error-subtle-level-1);
  --_tone-text-disabled-default-1: var(--dk-text-disabled-default-on-error-subtle-level-1);
  --_tone-icon-disabled-subtle-1: var(--dk-icon-disabled-subtle-on-error-subtle-level-1);
  --_tone-icon-disabled-default-1: var(--dk-icon-disabled-default-on-error-subtle-level-1);
  --_tone-surface-disabled-subtle-2: var(--dk-surface-disabled-subtle-on-error-subtle-level-2);
  --_tone-surface-disabled-default-2: var(--dk-surface-disabled-default-on-error-subtle-level-2);
  --_tone-border-disabled-subtle-2: var(--dk-border-disabled-subtle-on-error-subtle-level-2);
  --_tone-border-disabled-default-2: var(--dk-border-disabled-default-on-error-subtle-level-2);
  --_tone-text-disabled-subtle-2: var(--dk-text-disabled-subtle-on-error-subtle-level-2);
  --_tone-text-disabled-default-2: var(--dk-text-disabled-default-on-error-subtle-level-2);
  --_tone-icon-disabled-subtle-2: var(--dk-icon-disabled-subtle-on-error-subtle-level-2);
  --_tone-icon-disabled-default-2: var(--dk-icon-disabled-default-on-error-subtle-level-2);
  --_tone-surface-disabled-subtle-solid: var(--dk-surface-disabled-subtle-on-error-solid);
  --_tone-surface-disabled-default-solid: var(--dk-surface-disabled-default-on-error-solid);
  --_tone-border-disabled-subtle-solid: var(--dk-border-disabled-subtle-on-error-solid);
  --_tone-border-disabled-default-solid: var(--dk-border-disabled-default-on-error-solid);
  --_tone-text-disabled-subtle-solid: var(--dk-text-disabled-subtle-on-error-solid);
  --_tone-text-disabled-default-solid: var(--dk-text-disabled-default-on-error-solid);
  --_tone-icon-disabled-subtle-solid: var(--dk-icon-disabled-subtle-on-error-solid);
  --_tone-icon-disabled-default-solid: var(--dk-icon-disabled-default-on-error-solid);
  --dk-icon-error-default: var(--_tone-icon);
}
[data-theme] [data-tone="warning"]:not([data-theme]),
[data-theme][data-tone="warning"] {
  --_tone-surface-subtle-0: var(--dk-surface-warning-subtle-level-0);
  --_tone-surface-subtle-1: var(--dk-surface-warning-subtle-level-1);
  --_tone-surface-subtle-2: var(--dk-surface-warning-subtle-level-2);
  --_tone-surface-solid: var(--dk-surface-warning-solid);
  --_tone-surface-solid-1: var(--dk-surface-warning-solid-level-1);
  --_tone-surface-solid-2: var(--dk-surface-warning-solid-level-2);
  --_tone-border-structural-0: var(--dk-border-warning-structural-on-subtle);
  --_tone-border-structural-1: var(--dk-border-warning-structural-on-subtle);
  --_tone-border-structural-2: var(--dk-border-warning-structural-on-subtle-level-2);
  --_tone-border-hairline-on-subtle-0: var(--dk-border-warning-hairline-on-subtle);
  --_tone-border-hairline-on-subtle-1: var(--dk-border-warning-hairline-on-subtle);
  --_tone-border-hairline-on-subtle-2: var(--dk-border-warning-hairline-on-subtle-level-2);
  --_tone-border-hairline-on-solid: var(--dk-border-warning-hairline-on-solid);
  --_tone-text-on-subtle-0: var(--dk-text-warning-on-subtle-level-0);
  --_tone-icon-on-subtle-0: var(--dk-icon-warning-on-subtle-level-0);
  --_tone-text-on-subtle-1: var(--dk-text-warning-on-subtle-level-1);
  --_tone-icon-on-subtle-1: var(--dk-icon-warning-on-subtle-level-1);
  --_tone-text-on-subtle-2: var(--dk-text-warning-on-subtle-level-2);
  --_tone-icon-on-subtle-2: var(--dk-icon-warning-on-subtle-level-2);
  --_tone-text-on-solid: var(--dk-text-warning-on-solid);
  --_tone-icon-on-solid: var(--dk-icon-warning-on-solid);
  --_tone-text-neutral-on-solid: var(--dk-text-neutral-on-warning-solid);
  --_tone-icon-neutral-on-solid: var(--dk-icon-neutral-on-warning-solid);
  /* the remap that answers "what does warning text look like on a warning surface" */
  --dk-text-warning-default: var(--_tone-text);
  /* disabled family (1b) */
  --_tone-surface-disabled-subtle-0: var(--dk-surface-disabled-subtle-on-warning-subtle-level-0);
  --_tone-surface-disabled-default-0: var(--dk-surface-disabled-default-on-warning-subtle-level-0);
  --_tone-border-disabled-subtle-0: var(--dk-border-disabled-subtle-on-warning-subtle-level-0);
  --_tone-border-disabled-default-0: var(--dk-border-disabled-default-on-warning-subtle-level-0);
  --_tone-text-disabled-subtle-0: var(--dk-text-disabled-subtle-on-warning-subtle-level-0);
  --_tone-text-disabled-default-0: var(--dk-text-disabled-default-on-warning-subtle-level-0);
  --_tone-icon-disabled-subtle-0: var(--dk-icon-disabled-subtle-on-warning-subtle-level-0);
  --_tone-icon-disabled-default-0: var(--dk-icon-disabled-default-on-warning-subtle-level-0);
  --_tone-surface-disabled-subtle-1: var(--dk-surface-disabled-subtle-on-warning-subtle-level-1);
  --_tone-surface-disabled-default-1: var(--dk-surface-disabled-default-on-warning-subtle-level-1);
  --_tone-border-disabled-subtle-1: var(--dk-border-disabled-subtle-on-warning-subtle-level-1);
  --_tone-border-disabled-default-1: var(--dk-border-disabled-default-on-warning-subtle-level-1);
  --_tone-text-disabled-subtle-1: var(--dk-text-disabled-subtle-on-warning-subtle-level-1);
  --_tone-text-disabled-default-1: var(--dk-text-disabled-default-on-warning-subtle-level-1);
  --_tone-icon-disabled-subtle-1: var(--dk-icon-disabled-subtle-on-warning-subtle-level-1);
  --_tone-icon-disabled-default-1: var(--dk-icon-disabled-default-on-warning-subtle-level-1);
  --_tone-surface-disabled-subtle-2: var(--dk-surface-disabled-subtle-on-warning-subtle-level-2);
  --_tone-surface-disabled-default-2: var(--dk-surface-disabled-default-on-warning-subtle-level-2);
  --_tone-border-disabled-subtle-2: var(--dk-border-disabled-subtle-on-warning-subtle-level-2);
  --_tone-border-disabled-default-2: var(--dk-border-disabled-default-on-warning-subtle-level-2);
  --_tone-text-disabled-subtle-2: var(--dk-text-disabled-subtle-on-warning-subtle-level-2);
  --_tone-text-disabled-default-2: var(--dk-text-disabled-default-on-warning-subtle-level-2);
  --_tone-icon-disabled-subtle-2: var(--dk-icon-disabled-subtle-on-warning-subtle-level-2);
  --_tone-icon-disabled-default-2: var(--dk-icon-disabled-default-on-warning-subtle-level-2);
  --_tone-surface-disabled-subtle-solid: var(--dk-surface-disabled-subtle-on-warning-solid);
  --_tone-surface-disabled-default-solid: var(--dk-surface-disabled-default-on-warning-solid);
  --_tone-border-disabled-subtle-solid: var(--dk-border-disabled-subtle-on-warning-solid);
  --_tone-border-disabled-default-solid: var(--dk-border-disabled-default-on-warning-solid);
  --_tone-text-disabled-subtle-solid: var(--dk-text-disabled-subtle-on-warning-solid);
  --_tone-text-disabled-default-solid: var(--dk-text-disabled-default-on-warning-solid);
  --_tone-icon-disabled-subtle-solid: var(--dk-icon-disabled-subtle-on-warning-solid);
  --_tone-icon-disabled-default-solid: var(--dk-icon-disabled-default-on-warning-solid);
  --dk-icon-warning-default: var(--_tone-icon);
}
[data-theme] [data-tone="information"]:not([data-theme]),
[data-theme][data-tone="information"] {
  --_tone-surface-subtle-0: var(--dk-surface-information-subtle-level-0);
  --_tone-surface-subtle-1: var(--dk-surface-information-subtle-level-1);
  --_tone-surface-subtle-2: var(--dk-surface-information-subtle-level-2);
  --_tone-surface-solid: var(--dk-surface-information-solid);
  --_tone-surface-solid-1: var(--dk-surface-information-solid-level-1);
  --_tone-surface-solid-2: var(--dk-surface-information-solid-level-2);
  --_tone-border-structural-0: var(--dk-border-information-structural-on-subtle);
  --_tone-border-structural-1: var(--dk-border-information-structural-on-subtle);
  --_tone-border-structural-2: var(--dk-border-information-structural-on-subtle-level-2);
  --_tone-border-hairline-on-subtle-0: var(--dk-border-information-hairline-on-subtle);
  --_tone-border-hairline-on-subtle-1: var(--dk-border-information-hairline-on-subtle);
  --_tone-border-hairline-on-subtle-2: var(--dk-border-information-hairline-on-subtle-level-2);
  --_tone-border-hairline-on-solid: var(--dk-border-information-hairline-on-solid);
  --_tone-text-on-subtle-0: var(--dk-text-information-on-subtle-level-0);
  --_tone-icon-on-subtle-0: var(--dk-icon-information-on-subtle-level-0);
  --_tone-text-on-subtle-1: var(--dk-text-information-on-subtle-level-1);
  --_tone-icon-on-subtle-1: var(--dk-icon-information-on-subtle-level-1);
  --_tone-text-on-subtle-2: var(--dk-text-information-on-subtle-level-2);
  --_tone-icon-on-subtle-2: var(--dk-icon-information-on-subtle-level-2);
  --_tone-text-on-solid: var(--dk-text-information-on-solid);
  --_tone-icon-on-solid: var(--dk-icon-information-on-solid);
  --_tone-text-neutral-on-solid: var(--dk-text-neutral-on-information-solid);
  --_tone-icon-neutral-on-solid: var(--dk-icon-neutral-on-information-solid);
  /* the remap that answers "what does information text look like on a information surface" */
  --dk-text-information-default: var(--_tone-text);
  /* disabled family (1b) */
  --_tone-surface-disabled-subtle-0: var(--dk-surface-disabled-subtle-on-information-subtle-level-0);
  --_tone-surface-disabled-default-0: var(--dk-surface-disabled-default-on-information-subtle-level-0);
  --_tone-border-disabled-subtle-0: var(--dk-border-disabled-subtle-on-information-subtle-level-0);
  --_tone-border-disabled-default-0: var(--dk-border-disabled-default-on-information-subtle-level-0);
  --_tone-text-disabled-subtle-0: var(--dk-text-disabled-subtle-on-information-subtle-level-0);
  --_tone-text-disabled-default-0: var(--dk-text-disabled-default-on-information-subtle-level-0);
  --_tone-icon-disabled-subtle-0: var(--dk-icon-disabled-subtle-on-information-subtle-level-0);
  --_tone-icon-disabled-default-0: var(--dk-icon-disabled-default-on-information-subtle-level-0);
  --_tone-surface-disabled-subtle-1: var(--dk-surface-disabled-subtle-on-information-subtle-level-1);
  --_tone-surface-disabled-default-1: var(--dk-surface-disabled-default-on-information-subtle-level-1);
  --_tone-border-disabled-subtle-1: var(--dk-border-disabled-subtle-on-information-subtle-level-1);
  --_tone-border-disabled-default-1: var(--dk-border-disabled-default-on-information-subtle-level-1);
  --_tone-text-disabled-subtle-1: var(--dk-text-disabled-subtle-on-information-subtle-level-1);
  --_tone-text-disabled-default-1: var(--dk-text-disabled-default-on-information-subtle-level-1);
  --_tone-icon-disabled-subtle-1: var(--dk-icon-disabled-subtle-on-information-subtle-level-1);
  --_tone-icon-disabled-default-1: var(--dk-icon-disabled-default-on-information-subtle-level-1);
  --_tone-surface-disabled-subtle-2: var(--dk-surface-disabled-subtle-on-information-subtle-level-2);
  --_tone-surface-disabled-default-2: var(--dk-surface-disabled-default-on-information-subtle-level-2);
  --_tone-border-disabled-subtle-2: var(--dk-border-disabled-subtle-on-information-subtle-level-2);
  --_tone-border-disabled-default-2: var(--dk-border-disabled-default-on-information-subtle-level-2);
  --_tone-text-disabled-subtle-2: var(--dk-text-disabled-subtle-on-information-subtle-level-2);
  --_tone-text-disabled-default-2: var(--dk-text-disabled-default-on-information-subtle-level-2);
  --_tone-icon-disabled-subtle-2: var(--dk-icon-disabled-subtle-on-information-subtle-level-2);
  --_tone-icon-disabled-default-2: var(--dk-icon-disabled-default-on-information-subtle-level-2);
  --_tone-surface-disabled-subtle-solid: var(--dk-surface-disabled-subtle-on-information-solid);
  --_tone-surface-disabled-default-solid: var(--dk-surface-disabled-default-on-information-solid);
  --_tone-border-disabled-subtle-solid: var(--dk-border-disabled-subtle-on-information-solid);
  --_tone-border-disabled-default-solid: var(--dk-border-disabled-default-on-information-solid);
  --_tone-text-disabled-subtle-solid: var(--dk-text-disabled-subtle-on-information-solid);
  --_tone-text-disabled-default-solid: var(--dk-text-disabled-default-on-information-solid);
  --_tone-icon-disabled-subtle-solid: var(--dk-icon-disabled-subtle-on-information-solid);
  --_tone-icon-disabled-default-solid: var(--dk-icon-disabled-default-on-information-solid);
  --dk-icon-information-default: var(--_tone-icon);
}


/* ── INVERSE, a tone that is not a status (5.5.0) ───────────────────────────
   Until now the only way to make an inverse container was to paint
   --dk-surface-inverse-default by hand, after which everything inside was
   wrong: measured in light mode, default body copy rendered BLACK on the
   near-black panel at 1.31:1, a plain divider drew the light hairline at
   13.41:1, and --dk-surface-current still reported #ffffff — the panel lied
   about what it was sitting on. There were no inverse levels at all, so a
   nested card had nothing to step to.
   This widens a tone from "a status-coloured container" to "a container whose
   colour is not the page's", which is the smaller change: every mechanism below
   (2b's level/fill picker, --dk-surface-current, --dk-border-hairline-current)
   is already status-agnostic, so inverse only has to fill the slots.
   It remaps DEFAULT text and icon rather than a status's, because default is
   what breaks — that is the whole bug. Neutral copy inverts with it.
   The disabled slots are deliberately left unset: an unset private slot makes
   the public token invalid-at-computed-value-time, so it INHERITS the page's
   value, and the shared disabled family is a mid grey that already reads on an
   inverse panel (5.57:1 on the light-mode one). A disabled-on-inverse ramp can
   follow if that stops being true.

   SCOPE: this is for CONTENT, not controls. It remaps surfaces, default and
   neutral text, icons and borders. It does NOT remap component tokens, so a
   button, input, select or checkbox inside an inverse panel still renders in
   the PAGE's theme. Measured in light mode: a raised button paints its
   near-white #f4f5f5 fill and a subtle button its pale mint, both of them
   bright blobs on a near-black panel.

   For a panel that contains controls, use data-theme instead. A nested
   data-theme="dark" on a light page resolves to #1e2223, the same colour this
   tone paints, and every component inside is correct because the whole token
   set flips rather than a slice of it. That is what the Surfaces page's
   "Nesting and themes" section demonstrates.

   Remapping components per tone was considered and rejected: the button alone
   has 262 tokens, input, select, checkbox, switch, card, tabs and toast have
   the same problem, and a tone has to flip RELATIVE to the current theme
   (inverse-in-dark is light), so it would be two full component sets per tone.
   That is re-implementing theming, worse, inside the tone layer. */
[data-theme] [data-tone="inverse"]:not([data-theme]),
[data-theme][data-tone="inverse"] {
  --_tone-surface-subtle-0: var(--dk-surface-inverse-level-0);
  --_tone-surface-subtle-1: var(--dk-surface-inverse-level-1);
  --_tone-surface-subtle-2: var(--dk-surface-inverse-level-2);
  /* An inverse surface has no tint/solid distinction — it is already the
     strongest thing on the page — so a solid fill is level 0. Its levels are
     the inverse ladder it already owns, rather than a second one. */
  --_tone-surface-solid: var(--dk-surface-inverse-level-0);
  --_tone-surface-solid-1: var(--dk-surface-inverse-level-1);
  --_tone-surface-solid-2: var(--dk-surface-inverse-level-2);
  --_tone-text-on-subtle-0: var(--dk-text-inverse-default);
  --_tone-text-on-subtle-1: var(--dk-text-inverse-default);
  --_tone-text-on-subtle-2: var(--dk-text-inverse-default);
  --_tone-icon-on-subtle-0: var(--dk-icon-inverse-default);
  --_tone-icon-on-subtle-1: var(--dk-icon-inverse-default);
  --_tone-icon-on-subtle-2: var(--dk-icon-inverse-default);
  --_tone-text-on-solid: var(--dk-text-inverse-default);
  --_tone-icon-on-solid: var(--dk-icon-inverse-default);
  /* Steps at level 2, as the status tones do. Every tone's fill moves with the
     level, so a held hairline converges on it: measured before stepping, inverse
     ran 1.70 → 1.54 → 1.36 and error's tint ran 1.57 → 1.47 → 1.28. Inverse moves
     furthest, so it takes the larger step. */
  --_tone-border-structural-0: var(--dk-border-inverse-structural);
  --_tone-border-structural-1: var(--dk-border-inverse-structural);
  --_tone-border-structural-2: var(--dk-border-inverse-structural-level-2);
  --_tone-border-hairline-on-subtle-0: var(--dk-border-inverse-hairline);
  --_tone-border-hairline-on-subtle-1: var(--dk-border-inverse-hairline-level-1);
  --_tone-border-hairline-on-subtle-2: var(--dk-border-inverse-hairline-level-2);
  --_tone-border-hairline-on-solid: var(--dk-border-inverse-hairline);
  /* the remap that answers "what does DEFAULT text look like on an inverse
     surface" — the status tones remap their own status here instead */
  --dk-text-default: var(--_tone-text);
  --dk-icon-default: var(--_tone-icon);
  --dk-text-neutral-default: var(--dk-text-inverse-neutral);
  --dk-text-neutral-on-tint: var(--dk-text-inverse-neutral);
  --dk-icon-neutral-default: var(--dk-icon-inverse-neutral);

  /* Disabled, filled in at last. 5.5.0 left these unset on the reasoning that
     an unset private slot makes the public token invalid so it INHERITS the
     page value. It does not: declaring it from an unset slot makes it
     guaranteed-invalid for the whole subtree, so every disabled token read
     nothing inside an inverse panel. Measured: --dk-text-disabled-subtle came
     back empty there while every status tone returned its own ramp. That is
     also why check:vars fired the moment a data-tone="inverse" element existed
     on a docs page, which is how it was found. */
  --_tone-surface-disabled-subtle-0: var(--dk-surface-disabled-subtle-on-inverse-level-0);
  --_tone-surface-disabled-default-0: var(--dk-surface-disabled-default-on-inverse-level-0);
  --_tone-border-disabled-subtle-0: var(--dk-border-disabled-subtle-on-inverse-level-0);
  --_tone-border-disabled-default-0: var(--dk-border-disabled-default-on-inverse-level-0);
  --_tone-text-disabled-subtle-0: var(--dk-text-disabled-subtle-on-inverse-level-0);
  --_tone-text-disabled-default-0: var(--dk-text-disabled-default-on-inverse-level-0);
  --_tone-icon-disabled-subtle-0: var(--dk-icon-disabled-subtle-on-inverse-level-0);
  --_tone-icon-disabled-default-0: var(--dk-icon-disabled-default-on-inverse-level-0);
  --_tone-surface-disabled-subtle-1: var(--dk-surface-disabled-subtle-on-inverse-level-1);
  --_tone-surface-disabled-default-1: var(--dk-surface-disabled-default-on-inverse-level-1);
  --_tone-border-disabled-subtle-1: var(--dk-border-disabled-subtle-on-inverse-level-1);
  --_tone-border-disabled-default-1: var(--dk-border-disabled-default-on-inverse-level-1);
  --_tone-text-disabled-subtle-1: var(--dk-text-disabled-subtle-on-inverse-level-1);
  --_tone-text-disabled-default-1: var(--dk-text-disabled-default-on-inverse-level-1);
  --_tone-icon-disabled-subtle-1: var(--dk-icon-disabled-subtle-on-inverse-level-1);
  --_tone-icon-disabled-default-1: var(--dk-icon-disabled-default-on-inverse-level-1);
  --_tone-surface-disabled-subtle-2: var(--dk-surface-disabled-subtle-on-inverse-level-2);
  --_tone-surface-disabled-default-2: var(--dk-surface-disabled-default-on-inverse-level-2);
  --_tone-border-disabled-subtle-2: var(--dk-border-disabled-subtle-on-inverse-level-2);
  --_tone-border-disabled-default-2: var(--dk-border-disabled-default-on-inverse-level-2);
  --_tone-text-disabled-subtle-2: var(--dk-text-disabled-subtle-on-inverse-level-2);
  --_tone-text-disabled-default-2: var(--dk-text-disabled-default-on-inverse-level-2);
  --_tone-icon-disabled-subtle-2: var(--dk-icon-disabled-subtle-on-inverse-level-2);
  --_tone-icon-disabled-default-2: var(--dk-icon-disabled-default-on-inverse-level-2);
  --_tone-surface-disabled-subtle-solid: var(--_tone-surface-disabled-subtle-0);
  --_tone-surface-disabled-default-solid: var(--_tone-surface-disabled-default-0);
  --_tone-border-disabled-subtle-solid: var(--_tone-border-disabled-subtle-0);
  --_tone-border-disabled-default-solid: var(--_tone-border-disabled-default-0);
  --_tone-text-disabled-subtle-solid: var(--_tone-text-disabled-subtle-0);
  --_tone-text-disabled-default-solid: var(--_tone-text-disabled-default-0);
  --_tone-icon-disabled-subtle-solid: var(--_tone-icon-disabled-subtle-0);
  --_tone-icon-disabled-default-solid: var(--_tone-icon-disabled-default-0);
}

/* The one property declaration in this file, and it earns its place. A type
   primitive with no data-color INHERITS by design ("omission inherits"), which
   is fine for a status tone — the page's black text still reads on a pale tint
   — and broken for inverse, where the panel is near-black. Measured before this
   rule existed: default body copy rendered black on the light-mode inverse panel
   at 1.31:1 even though every token on it resolved correctly to #ffffff.
   The alternative is making every element inside carry data-color="inverse",
   which is the exact pattern tones exist to remove. */
[data-theme] [data-tone="inverse"]:not([data-theme]),
[data-theme][data-tone="inverse"] { color: var(--dk-text-default); }

/* Every selector below names the six tones explicitly rather than matching any
   [data-tone]. A generic match meant an UNKNOWN value — a prototype using its
   own word, e.g. data-tone="enquiry" — entered these blocks and read private
   slots that only the six known tones fill, leaving them empty. An empty custom
   property is invalid at computed-value time. Where a consumer declares its edge
   with a shorthand — border: <width> solid var(--dk-border-raised-default) — the
   empty colour invalidates the WHOLE declaration, so it is dropped, border-style
   stays at its initial 'none', and the edge computes to 0px and VANISHES. Found
   2026-09-11 on customer-comms: all 44 of its data-tone="enquiry" elements
   measured a 0px border, and the 28 that declare one measure 1px again now.
   Naming the values makes an unknown tone a no-op, which is the right failure:
   the element keeps the page's own surface and borders. */
/* ── 2b. Level and fill — theme-agnostic, pick the slot ────────────────── */
[data-theme] [data-tone="primary"]:not([data-theme]),
[data-theme] [data-tone="success"]:not([data-theme]),
[data-theme] [data-tone="error"]:not([data-theme]),
[data-theme] [data-tone="warning"]:not([data-theme]),
[data-theme] [data-tone="information"]:not([data-theme]),
[data-theme] [data-tone="inverse"]:not([data-theme]),
[data-theme][data-tone="primary"],
[data-theme][data-tone="success"],
[data-theme][data-tone="error"],
[data-theme][data-tone="warning"],
[data-theme][data-tone="information"],
[data-theme][data-tone="inverse"] {
  --dk-surface-current: var(--_tone-surface-subtle-0);
  --dk-border-hairline-current: var(--_tone-border-hairline-on-subtle-0);
  /* Structural edges follow the tone too, one rung quieter than the rule:
     an edge bounds a box, a rule asks to be noticed. Measured, a card inside
     an error panel drew grey at 1.09:1 before this — wrong hue and nearly
     invisible. Remapping what components already read means card, modal,
     tabs, toast, search-input and button need no change. */
  --dk-border-raised-default: var(--_tone-border-structural-0);
  --dk-border-nested-default: var(--_tone-border-structural-0);
  --_tone-text: var(--_tone-text-on-subtle-0);
  --_tone-icon: var(--_tone-icon-on-subtle-0);
  /* The tone's own marks, status-agnostic, for a part whose emphasis follows
     the NEAREST tone and a reset clears (16 Oct: Dropzone's states). */
  --dk-interactive-tone-mark: var(--_tone-icon);
  --dk-interactive-tone-mark-hover: color-mix(in srgb, var(--_tone-icon) 80%, var(--dk-text-default));
  --dk-interactive-tone-mark-active: color-mix(in srgb, var(--_tone-icon) 64%, var(--dk-text-default));
  --dk-interactive-tone-fill-hover: var(--dk-surface-control-hover);
  --dk-interactive-tone-fill-active: var(--dk-surface-control-active);
  --dk-interactive-tone-text: var(--dk-text-default);
  --dk-interactive-tone-text-subtle: var(--dk-text-neutral-default);
  --dk-surface-disabled-subtle: var(--_tone-surface-disabled-subtle-0);
  --dk-surface-disabled-default: var(--_tone-surface-disabled-default-0);
  --dk-border-disabled-subtle: var(--_tone-border-disabled-subtle-0);
  --dk-border-disabled-default: var(--_tone-border-disabled-default-0);
  --dk-text-disabled-subtle: var(--_tone-text-disabled-subtle-0);
  --dk-text-disabled-default: var(--_tone-text-disabled-default-0);
  --dk-icon-disabled-subtle: var(--_tone-icon-disabled-subtle-0);
  --dk-icon-disabled-default: var(--_tone-icon-disabled-default-0);
}
[data-theme] [data-tone="primary"][data-surface="1"]:not([data-theme]),
[data-theme] [data-tone="success"][data-surface="1"]:not([data-theme]),
[data-theme] [data-tone="error"][data-surface="1"]:not([data-theme]),
[data-theme] [data-tone="warning"][data-surface="1"]:not([data-theme]),
[data-theme] [data-tone="information"][data-surface="1"]:not([data-theme]),
[data-theme] [data-tone="inverse"][data-surface="1"]:not([data-theme]),
[data-theme][data-tone="primary"][data-surface="1"],
[data-theme][data-tone="success"][data-surface="1"],
[data-theme][data-tone="error"][data-surface="1"],
[data-theme][data-tone="warning"][data-surface="1"],
[data-theme][data-tone="information"][data-surface="1"],
[data-theme][data-tone="inverse"][data-surface="1"] {
  --dk-surface-current: var(--_tone-surface-subtle-1);
  --dk-border-hairline-current: var(--_tone-border-hairline-on-subtle-1);
  --dk-border-raised-default: var(--_tone-border-structural-1);
  --dk-border-nested-default: var(--_tone-border-structural-1);
  --_tone-text: var(--_tone-text-on-subtle-1);
  --_tone-icon: var(--_tone-icon-on-subtle-1);
  /* The tone's own marks, status-agnostic, for a part whose emphasis follows
     the NEAREST tone and a reset clears (16 Oct: Dropzone's states). */
  --dk-interactive-tone-mark: var(--_tone-icon);
  --dk-interactive-tone-mark-hover: color-mix(in srgb, var(--_tone-icon) 80%, var(--dk-text-default));
  --dk-interactive-tone-mark-active: color-mix(in srgb, var(--_tone-icon) 64%, var(--dk-text-default));
  --dk-interactive-tone-fill-hover: var(--dk-surface-control-hover);
  --dk-interactive-tone-fill-active: var(--dk-surface-control-active);
  --dk-interactive-tone-text: var(--dk-text-default);
  --dk-interactive-tone-text-subtle: var(--dk-text-neutral-default);
  --dk-surface-disabled-subtle: var(--_tone-surface-disabled-subtle-1);
  --dk-surface-disabled-default: var(--_tone-surface-disabled-default-1);
  --dk-border-disabled-subtle: var(--_tone-border-disabled-subtle-1);
  --dk-border-disabled-default: var(--_tone-border-disabled-default-1);
  --dk-text-disabled-subtle: var(--_tone-text-disabled-subtle-1);
  --dk-text-disabled-default: var(--_tone-text-disabled-default-1);
  --dk-icon-disabled-subtle: var(--_tone-icon-disabled-subtle-1);
  --dk-icon-disabled-default: var(--_tone-icon-disabled-default-1);
}
[data-theme][data-tone="primary"][data-surface="below"],
[data-theme][data-tone="success"][data-surface="below"],
[data-theme][data-tone="error"][data-surface="below"],
[data-theme][data-tone="warning"][data-surface="below"],
[data-theme][data-tone="information"][data-surface="below"],
[data-theme][data-tone="inverse"][data-surface="below"],
:is([data-theme] [data-tone="primary"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="success"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="error"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="warning"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="information"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="inverse"][data-surface="below"]:not([data-theme])):where(:not(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *))) {
  --dk-surface-current: var(--_tone-surface-subtle-1);
  --dk-border-hairline-current: var(--_tone-border-hairline-on-subtle-1);
  --dk-border-raised-default: var(--_tone-border-structural-1);
  --dk-border-nested-default: var(--_tone-border-structural-1);
  --_tone-text: var(--_tone-text-on-subtle-1);
  --_tone-icon: var(--_tone-icon-on-subtle-1);
  /* The tone's own marks, status-agnostic, for a part whose emphasis follows
     the NEAREST tone and a reset clears (16 Oct: Dropzone's states). */
  --dk-interactive-tone-mark: var(--_tone-icon);
  --dk-interactive-tone-mark-hover: color-mix(in srgb, var(--_tone-icon) 80%, var(--dk-text-default));
  --dk-interactive-tone-mark-active: color-mix(in srgb, var(--_tone-icon) 64%, var(--dk-text-default));
  --dk-interactive-tone-fill-hover: var(--dk-surface-control-hover);
  --dk-interactive-tone-fill-active: var(--dk-surface-control-active);
  --dk-interactive-tone-text: var(--dk-text-default);
  --dk-interactive-tone-text-subtle: var(--dk-text-neutral-default);
  --dk-surface-disabled-subtle: var(--_tone-surface-disabled-subtle-1);
  --dk-surface-disabled-default: var(--_tone-surface-disabled-default-1);
  --dk-border-disabled-subtle: var(--_tone-border-disabled-subtle-1);
  --dk-border-disabled-default: var(--_tone-border-disabled-default-1);
  --dk-text-disabled-subtle: var(--_tone-text-disabled-subtle-1);
  --dk-text-disabled-default: var(--_tone-text-disabled-default-1);
  --dk-icon-disabled-subtle: var(--_tone-icon-disabled-subtle-1);
  --dk-icon-disabled-default: var(--_tone-icon-disabled-default-1);
}
[data-theme="dark"] [data-tone="primary"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"] [data-tone="inverse"] [data-tone="primary"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"] [data-tone="success"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"] [data-tone="inverse"] [data-tone="success"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"] [data-tone="error"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"] [data-tone="inverse"] [data-tone="error"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"] [data-tone="warning"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"] [data-tone="inverse"] [data-tone="warning"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"] [data-tone="information"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"] [data-tone="inverse"] [data-tone="information"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="light"] [data-tone="inverse"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"][data-tone="primary"][data-surface="raised"],
[data-theme="dark"][data-tone="success"][data-surface="raised"],
[data-theme="dark"][data-tone="error"][data-surface="raised"],
[data-theme="dark"][data-tone="warning"][data-surface="raised"],
[data-theme="dark"][data-tone="information"][data-surface="raised"],
[data-theme="light"][data-tone="inverse"][data-surface="raised"] {
  --dk-surface-current: var(--_tone-surface-subtle-1);
  --dk-border-hairline-current: var(--_tone-border-hairline-on-subtle-1);
  --dk-border-raised-default: var(--_tone-border-structural-1);
  --dk-border-nested-default: var(--_tone-border-structural-1);
  --_tone-text: var(--_tone-text-on-subtle-1);
  --_tone-icon: var(--_tone-icon-on-subtle-1);
  /* The tone's own marks, status-agnostic, for a part whose emphasis follows
     the NEAREST tone and a reset clears (16 Oct: Dropzone's states). */
  --dk-interactive-tone-mark: var(--_tone-icon);
  --dk-interactive-tone-mark-hover: color-mix(in srgb, var(--_tone-icon) 80%, var(--dk-text-default));
  --dk-interactive-tone-mark-active: color-mix(in srgb, var(--_tone-icon) 64%, var(--dk-text-default));
  --dk-interactive-tone-fill-hover: var(--dk-surface-control-hover);
  --dk-interactive-tone-fill-active: var(--dk-surface-control-active);
  --dk-interactive-tone-text: var(--dk-text-default);
  --dk-interactive-tone-text-subtle: var(--dk-text-neutral-default);
  --dk-surface-disabled-subtle: var(--_tone-surface-disabled-subtle-1);
  --dk-surface-disabled-default: var(--_tone-surface-disabled-default-1);
  --dk-border-disabled-subtle: var(--_tone-border-disabled-subtle-1);
  --dk-border-disabled-default: var(--_tone-border-disabled-default-1);
  --dk-text-disabled-subtle: var(--_tone-text-disabled-subtle-1);
  --dk-text-disabled-default: var(--_tone-text-disabled-default-1);
  --dk-icon-disabled-subtle: var(--_tone-icon-disabled-subtle-1);
  --dk-icon-disabled-default: var(--_tone-icon-disabled-default-1);
}
[data-theme] [data-tone="primary"][data-surface="2"]:not([data-theme]),
[data-theme] [data-tone="success"][data-surface="2"]:not([data-theme]),
[data-theme] [data-tone="error"][data-surface="2"]:not([data-theme]),
[data-theme] [data-tone="warning"][data-surface="2"]:not([data-theme]),
[data-theme] [data-tone="information"][data-surface="2"]:not([data-theme]),
[data-theme] [data-tone="inverse"][data-surface="2"]:not([data-theme]),
[data-theme][data-tone="primary"][data-surface="2"],
[data-theme][data-tone="success"][data-surface="2"],
[data-theme][data-tone="error"][data-surface="2"],
[data-theme][data-tone="warning"][data-surface="2"],
[data-theme][data-tone="information"][data-surface="2"],
[data-theme][data-tone="inverse"][data-surface="2"] {
  --dk-surface-current: var(--_tone-surface-subtle-2);
  --dk-border-hairline-current: var(--_tone-border-hairline-on-subtle-2);
  --dk-border-raised-default: var(--_tone-border-structural-2);
  --dk-border-nested-default: var(--_tone-border-structural-2);
  --_tone-text: var(--_tone-text-on-subtle-2);
  --_tone-icon: var(--_tone-icon-on-subtle-2);
  /* The tone's own marks, status-agnostic, for a part whose emphasis follows
     the NEAREST tone and a reset clears (16 Oct: Dropzone's states). */
  --dk-interactive-tone-mark: var(--_tone-icon);
  --dk-interactive-tone-mark-hover: color-mix(in srgb, var(--_tone-icon) 80%, var(--dk-text-default));
  --dk-interactive-tone-mark-active: color-mix(in srgb, var(--_tone-icon) 64%, var(--dk-text-default));
  --dk-interactive-tone-fill-hover: var(--dk-surface-control-hover);
  --dk-interactive-tone-fill-active: var(--dk-surface-control-active);
  --dk-interactive-tone-text: var(--dk-text-default);
  --dk-interactive-tone-text-subtle: var(--dk-text-neutral-default);
  --dk-surface-disabled-subtle: var(--_tone-surface-disabled-subtle-2);
  --dk-surface-disabled-default: var(--_tone-surface-disabled-default-2);
  --dk-border-disabled-subtle: var(--_tone-border-disabled-subtle-2);
  --dk-border-disabled-default: var(--_tone-border-disabled-default-2);
  --dk-text-disabled-subtle: var(--_tone-text-disabled-subtle-2);
  --dk-text-disabled-default: var(--_tone-text-disabled-default-2);
  --dk-icon-disabled-subtle: var(--_tone-icon-disabled-subtle-2);
  --dk-icon-disabled-default: var(--_tone-icon-disabled-default-2);
}
:is([data-theme] [data-tone="primary"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="success"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="error"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="warning"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="information"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="inverse"][data-surface="below"]:not([data-theme])):where(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *)) {
  --dk-surface-current: var(--_tone-surface-subtle-2);
  --dk-border-hairline-current: var(--_tone-border-hairline-on-subtle-2);
  --dk-border-raised-default: var(--_tone-border-structural-2);
  --dk-border-nested-default: var(--_tone-border-structural-2);
  --_tone-text: var(--_tone-text-on-subtle-2);
  --_tone-icon: var(--_tone-icon-on-subtle-2);
  /* The tone's own marks, status-agnostic, for a part whose emphasis follows
     the NEAREST tone and a reset clears (16 Oct: Dropzone's states). */
  --dk-interactive-tone-mark: var(--_tone-icon);
  --dk-interactive-tone-mark-hover: color-mix(in srgb, var(--_tone-icon) 80%, var(--dk-text-default));
  --dk-interactive-tone-mark-active: color-mix(in srgb, var(--_tone-icon) 64%, var(--dk-text-default));
  --dk-interactive-tone-fill-hover: var(--dk-surface-control-hover);
  --dk-interactive-tone-fill-active: var(--dk-surface-control-active);
  --dk-interactive-tone-text: var(--dk-text-default);
  --dk-interactive-tone-text-subtle: var(--dk-text-neutral-default);
  --dk-surface-disabled-subtle: var(--_tone-surface-disabled-subtle-2);
  --dk-surface-disabled-default: var(--_tone-surface-disabled-default-2);
  --dk-border-disabled-subtle: var(--_tone-border-disabled-subtle-2);
  --dk-border-disabled-default: var(--_tone-border-disabled-default-2);
  --dk-text-disabled-subtle: var(--_tone-text-disabled-subtle-2);
  --dk-text-disabled-default: var(--_tone-text-disabled-default-2);
  --dk-icon-disabled-subtle: var(--_tone-icon-disabled-subtle-2);
  --dk-icon-disabled-default: var(--_tone-icon-disabled-default-2);
}
/* Inverse is not a status: the level blocks above list it with the
   statuses, and its icon ramp at levels 1 and 2 is its own surface, so the
   NEAREST-status mark read dark on dark. It clears the mark at every level,
   and a part reading it falls back to its own colour (16 Oct). */
[data-theme] [data-tone="inverse"]:not([data-theme]),
[data-theme][data-tone="inverse"],
[data-theme] [data-tone="inverse"][data-surface]:not([data-theme]),
[data-theme][data-tone="inverse"][data-surface] {
  --dk-interactive-tone-mark: initial;
  --dk-interactive-tone-mark-hover: initial;
  --dk-interactive-tone-mark-active: initial;
}
/* So is a bare level inside a tone: data-surface without data-tone steps
   the NEUTRAL ladder, and a status mark inherited through it read white on
   grey inside a solid panel (16 Oct, conformance). */
[data-theme] [data-surface]:not([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"], [data-tone="inverse"]):not([data-theme]),
[data-theme][data-surface]:not([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"], [data-tone="inverse"]) {
  --dk-interactive-tone-mark: initial;
  --dk-interactive-tone-mark-hover: initial;
  --dk-interactive-tone-mark-active: initial;
}

/* A SUBTLE TONE PUTS THE PAGE'S OWN TEXT BACK. Only the solid block and inverse
   ever SET --dk-text-default and the neutral text and icon tokens, so a subtle
   tone nested inside a solid one inherited the solid values and drew white copy
   on a pale tint: measured 1.10:1 on the Divider page, an error card inside a
   solid primary panel, and 1.00:1 on Body. Custom properties inherit, so not
   setting a token is not the same as leaving it alone.

   INVERSE IS DELIBERATELY NOT IN THESE SELECTORS. It sets --dk-text-default
   itself, to the OPPOSITE theme's value, which is the whole point of it. The
   first cut of this reset reused the level blocks above, whose selector lists
   include inverse, and overwrote that: check:conformance caught it immediately,
   668 readings at 1.09:1 to 1.63:1, every one of them tone:inverse. */

[data-theme] [data-tone="primary"]:not([data-theme]),
[data-theme] [data-tone="success"]:not([data-theme]),
[data-theme] [data-tone="error"]:not([data-theme]),
[data-theme] [data-tone="warning"]:not([data-theme]),
[data-theme] [data-tone="information"]:not([data-theme]),
[data-theme][data-tone="primary"],
[data-theme][data-tone="success"],
[data-theme][data-tone="error"],
[data-theme][data-tone="warning"],
[data-theme][data-tone="information"] {
  --dk-text-default: var(--_reset-text-default);
  --dk-icon-default-body: var(--_reset-icon-default-body);
  --dk-text-neutral-default: var(--_reset-text-neutral-default);
  --dk-text-neutral-subtle: var(--_reset-text-neutral-subtle);
  --dk-icon-neutral-default: var(--_reset-icon-neutral-default);
  --dk-icon-neutral-subtle: var(--_reset-icon-neutral-subtle);
}

[data-theme] [data-tone="primary"][data-surface="1"]:not([data-theme]),
[data-theme] [data-tone="success"][data-surface="1"]:not([data-theme]),
[data-theme] [data-tone="error"][data-surface="1"]:not([data-theme]),
[data-theme] [data-tone="warning"][data-surface="1"]:not([data-theme]),
[data-theme] [data-tone="information"][data-surface="1"]:not([data-theme]),
[data-theme][data-tone="primary"][data-surface="1"],
[data-theme][data-tone="success"][data-surface="1"],
[data-theme][data-tone="error"][data-surface="1"],
[data-theme][data-tone="warning"][data-surface="1"],
[data-theme][data-tone="information"][data-surface="1"] {
  --dk-text-default: var(--_reset-text-default);
  --dk-icon-default-body: var(--_reset-icon-default-body);
  --dk-text-neutral-default: var(--dk-text-neutral-default-level-1);
  --dk-text-neutral-subtle: var(--dk-text-neutral-subtle-level-1);
  --dk-icon-neutral-default: var(--dk-icon-neutral-default-level-1);
  --dk-icon-neutral-subtle: var(--dk-icon-neutral-subtle-level-1);
}
[data-theme][data-tone="primary"][data-surface="below"],
[data-theme][data-tone="success"][data-surface="below"],
[data-theme][data-tone="error"][data-surface="below"],
[data-theme][data-tone="warning"][data-surface="below"],
[data-theme][data-tone="information"][data-surface="below"],
:is([data-theme] [data-tone="primary"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="success"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="error"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="warning"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="information"][data-surface="below"]:not([data-theme])):where(:not(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *))) {
  --dk-text-default: var(--_reset-text-default);
  --dk-icon-default-body: var(--_reset-icon-default-body);
  --dk-text-neutral-default: var(--dk-text-neutral-default-level-1);
  --dk-text-neutral-subtle: var(--dk-text-neutral-subtle-level-1);
  --dk-icon-neutral-default: var(--dk-icon-neutral-default-level-1);
  --dk-icon-neutral-subtle: var(--dk-icon-neutral-subtle-level-1);
}
[data-theme="dark"] [data-tone="primary"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"] [data-tone="inverse"] [data-tone="primary"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"] [data-tone="success"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"] [data-tone="inverse"] [data-tone="success"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"] [data-tone="error"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"] [data-tone="inverse"] [data-tone="error"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"] [data-tone="warning"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"] [data-tone="inverse"] [data-tone="warning"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"] [data-tone="information"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"] [data-tone="inverse"] [data-tone="information"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"][data-tone="primary"][data-surface="raised"],
[data-theme="dark"][data-tone="success"][data-surface="raised"],
[data-theme="dark"][data-tone="error"][data-surface="raised"],
[data-theme="dark"][data-tone="warning"][data-surface="raised"],
[data-theme="dark"][data-tone="information"][data-surface="raised"] {
  --dk-text-default: var(--_reset-text-default);
  --dk-icon-default-body: var(--_reset-icon-default-body);
  --dk-text-neutral-default: var(--dk-text-neutral-default-level-1);
  --dk-text-neutral-subtle: var(--dk-text-neutral-subtle-level-1);
  --dk-icon-neutral-default: var(--dk-icon-neutral-default-level-1);
  --dk-icon-neutral-subtle: var(--dk-icon-neutral-subtle-level-1);
}

[data-theme] [data-tone="primary"][data-surface="2"]:not([data-theme]),
[data-theme] [data-tone="success"][data-surface="2"]:not([data-theme]),
[data-theme] [data-tone="error"][data-surface="2"]:not([data-theme]),
[data-theme] [data-tone="warning"][data-surface="2"]:not([data-theme]),
[data-theme] [data-tone="information"][data-surface="2"]:not([data-theme]),
[data-theme][data-tone="primary"][data-surface="2"],
[data-theme][data-tone="success"][data-surface="2"],
[data-theme][data-tone="error"][data-surface="2"],
[data-theme][data-tone="warning"][data-surface="2"],
[data-theme][data-tone="information"][data-surface="2"] {
  --dk-text-default: var(--_reset-text-default);
  --dk-icon-default-body: var(--_reset-icon-default-body);
  --dk-text-neutral-default: var(--dk-text-neutral-default-level-2);
  --dk-text-neutral-subtle: var(--dk-text-neutral-subtle-level-2);
  --dk-icon-neutral-default: var(--dk-icon-neutral-default-level-2);
  --dk-icon-neutral-subtle: var(--dk-icon-neutral-subtle-level-2);
}
:is([data-theme] [data-tone="primary"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="success"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="error"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="warning"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="information"][data-surface="below"]:not([data-theme])):where(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *)) {
  --dk-text-default: var(--_reset-text-default);
  --dk-icon-default-body: var(--_reset-icon-default-body);
  --dk-text-neutral-default: var(--dk-text-neutral-default-level-2);
  --dk-text-neutral-subtle: var(--dk-text-neutral-subtle-level-2);
  --dk-icon-neutral-default: var(--dk-icon-neutral-default-level-2);
  --dk-icon-neutral-subtle: var(--dk-icon-neutral-subtle-level-2);
}

/* Solid: status text goes on-colour, and so do default and neutral copy —
   nothing dark survives on a saturated fill. (0,4,0) so it also beats the
   level blocks' neutral remaps when data-surface is present. */
[data-theme] [data-tone="primary"][data-tone-fill="solid"]:not([data-theme]),
[data-theme] [data-tone="success"][data-tone-fill="solid"]:not([data-theme]),
[data-theme] [data-tone="error"][data-tone-fill="solid"]:not([data-theme]),
[data-theme] [data-tone="warning"][data-tone-fill="solid"]:not([data-theme]),
[data-theme] [data-tone="information"][data-tone-fill="solid"]:not([data-theme]),
[data-theme][data-tone="primary"][data-tone-fill="solid"],
[data-theme][data-tone="success"][data-tone-fill="solid"],
[data-theme][data-tone="error"][data-tone-fill="solid"],
[data-theme][data-tone="warning"][data-tone-fill="solid"],
[data-theme][data-tone="information"][data-tone-fill="solid"] {
  /* INVERSE IS NOT IN THESE SELECTORS, and that is not an omission. A solid
     fill is a status at full strength; inverse is not a status, it is "the
     opposite theme", and there is no such thing as inverse at full strength.
     That this file contains zero -on-inverse-solid declarations is the proof.

     While inverse WAS listed here, every var(--_tone-*-on-solid) below resolved
     to nothing for it, and an empty custom property is invalid at computed
     value time rather than inherited. Measured: 36 tokens went empty under
     data-tone="inverse" data-tone-fill="solid", including
     --dk-text-neutral-default and --dk-icon-neutral-default and everything
     downstream of them: Button's raised and plain label and icon, all four
     typography components' neutral colours, Alert's neutral, and the icon
     button's glyph. check:conformance exists to catch exactly this and could
     not, because its matrix is themes by levels by tones with no fill axis.
     Reported as "pick solid, then inverse, and the icon disappears". */
  --dk-surface-current: var(--_tone-surface-solid);
  --dk-border-hairline-current: var(--_tone-border-hairline-on-solid);
  --_tone-text: var(--_tone-text-on-solid);
  --_tone-icon: var(--_tone-icon-on-solid);
  /* The tone's own marks, status-agnostic, for a part whose emphasis follows
     the NEAREST tone and a reset clears (16 Oct: Dropzone's states). */
  --dk-interactive-tone-mark: var(--_tone-icon);
  --dk-interactive-tone-mark-hover: color-mix(in srgb, var(--_tone-icon) 85%, var(--dk-surface-current));
  --dk-interactive-tone-mark-active: color-mix(in srgb, var(--_tone-icon) 72%, var(--dk-surface-current));
  --dk-interactive-tone-fill-hover: var(--dk-surface-control-hover);
  --dk-interactive-tone-fill-active: var(--dk-surface-control-active);
  --dk-interactive-tone-text: var(--dk-text-default);
  --dk-interactive-tone-text-subtle: var(--dk-text-neutral-default);
  --dk-text-default: var(--_tone-text-on-solid);
  /* AND THE ICON'S OWN DEFAULT. --dk-icon-default-body is the icon twin of
     --dk-text-default and icon.css gives it the same two values, but only the
     text one was remapped here, so data-color="default" on an icon stayed
     black on a solid fill while the copy beside it went white. Light theme
     only: dark already has white as its base and agreed by accident. */
  --dk-icon-default-body: var(--_tone-icon-on-solid);
  --dk-text-neutral-default: var(--_tone-text-neutral-on-solid);
  --dk-text-neutral-subtle: var(--_tone-text-neutral-on-solid);
  /* The quiet word ramp's hover and press rungs step to the tone's white (16
     Oct): left neutral, a page number on a solid fill went grey under the
     pointer. */
  --dk-text-neutral-subtle-hover: var(--_tone-text-on-solid);
  --dk-text-neutral-subtle-focus: var(--_tone-text-on-solid);
  --dk-icon-neutral-default: var(--_tone-icon-neutral-on-solid);
  --dk-icon-neutral-subtle: var(--_tone-icon-neutral-on-solid);
  /* rule D: a quiet chip follows the panel its marks follow (7 Nov, Julio).
     Rule C and the lines above turn every mark on a solid fill to the
     panel's on-solid colour, white. The neutral subtle chip those marks sit on
     was left at the page's value, so in light it stayed neutral-25 and a white
     mark on it vanished: the Stepper's completed check measured 1.09:1 on a
     primary solid and 1.01:1 on a success solid. Dark agreed only because its
     page value happens to be dark. A surface and the mark on it are remapped
     together or not at all, so the chip is now a veil of the on-solid colour
     over the panel (the step up the panel's own colour, in both themes, as the
     solid fill is the same rung in both), and its edge is the panel's
     hairline. Every reader moves with it: Stepper, Tag, Tabs, Alert, Toast,
     Icon tile, Dropzone, Switch, Feedback badge. --dk-surface-current is the
     panel's own at every level, so the veil deepens with the panel. 16% is
     the veil Icon tile already used for this same bug on its own (1.00:1). */
  --dk-surface-neutral-subtle: color-mix(in srgb, var(--_tone-text-on-solid) 16%, var(--dk-surface-current));
  --dk-surface-neutral-subtle-hover: color-mix(in srgb, var(--_tone-text-on-solid) 22%, var(--dk-surface-current));
  --dk-surface-neutral-subtle-active: color-mix(in srgb, var(--_tone-text-on-solid) 28%, var(--dk-surface-current));
  --dk-surface-neutral-subtle-focus: color-mix(in srgb, var(--_tone-text-on-solid) 28%, var(--dk-surface-current));
  --dk-border-neutral-subtle: var(--_tone-border-hairline-on-solid);
  --dk-border-neutral-subtle-hover: color-mix(in srgb, var(--_tone-text-on-solid) 45%, var(--dk-surface-current));
  --dk-border-neutral-subtle-focus: color-mix(in srgb, var(--_tone-text-on-solid) 60%, var(--dk-surface-current));
  --dk-surface-disabled-subtle: var(--_tone-surface-disabled-subtle-solid);
  --dk-surface-disabled-default: var(--_tone-surface-disabled-default-solid);
  --dk-border-disabled-subtle: var(--_tone-border-disabled-subtle-solid);
  --dk-border-disabled-default: var(--_tone-border-disabled-default-solid);
  --dk-text-disabled-subtle: var(--_tone-text-disabled-subtle-solid);
  --dk-text-disabled-default: var(--_tone-text-disabled-default-solid);
  --dk-icon-disabled-subtle: var(--_tone-icon-disabled-subtle-solid);
  --dk-icon-disabled-default: var(--_tone-icon-disabled-default-solid);
}

/* An outline control on a solid fill: its border joins its label.

   Status borders are otherwise untouched by a tone, as the header says, and at
   levels 0 to 2 that is correct: the tint stays pale enough that error-500 on
   error-50 reads as a clean edge. On the solid fill it collapses, because the
   solid fill IS the 500 rung in light. The button's border and the surface
   behind it were the same colour, 1.00:1, an edge that does not exist. Julio
   found it on the Surfaces page: "it might have a border, but you can't see
   it". Measured before, light: error, warning and information all exactly
   1.00:1, primary and success 1.51:1. Three of five were literally invisible
   and the other two nearly so.

   EVERY status is remapped now, not only the matching one. The matching status
   was handled here and the other four were deliberately left alone, on the
   reasoning that a primary outline button on an error solid banner should keep
   its primary border because status still has to mean something. The reasoning
   holds; the execution did not. Left on its own 500 rung against a saturated
   panel, that border and its label measured 1.57:1 at worst, and 49 of 96
   combinations sat below AA. A status nobody can see means nothing either.

   So the hue survives and the lightness does not: a non-matching status takes
   rung 50 of ITS OWN ramp, the lightest tint it has. Worst reading across all
   120 non-matching combinations is 5.18:1. The MATCHING status still takes the
   panel's own on-solid colour, so a button that agrees with its panel speaks in
   the panel's voice and the rest keep theirs.

   The value is --_tone-text-on-solid rather than a literal white, so the border
   and the label are the same colour by construction, and both follow whatever
   on-solid text decides later. 5.8.0 moved warning's on-solid text to white;
   this inherits that rather than restating it.

   Measured after, light: information 3.61:1, error 3.48:1, primary and success
   2.82:1, warning 2.33:1. Warning is the weakest and is exactly the ratio its
   white on-solid TEXT already carries on that same fill, which was a deliberate
   choice in 5.8.0, so the border is no quieter than the label beside it. Dark
   was never broken, 2.30:1 to 2.91:1, and rises to 5.74:1 to 6.75:1. That is a
   real increase in weight on dark solid fills, and it is the thing to look at
   first if these ever read too loud. */
[data-theme] [data-tone="primary"][data-tone-fill="solid"]:not([data-theme]),
[data-theme][data-tone="primary"][data-tone-fill="solid"] {
  --dk-border-primary-default: var(--_tone-text-on-solid);
  --dk-icon-success-default: var(--dk-color-primary-50);
  --dk-icon-error-default: var(--dk-color-error-50);
  --dk-icon-warning-default: var(--dk-color-warning-50);
  --dk-icon-information-default: var(--dk-color-information-50);
  --dk-text-success-default: var(--dk-color-primary-50);
  --dk-border-success-default: var(--dk-color-primary-50);
  --dk-text-error-default: var(--dk-color-error-50);
  --dk-border-error-default: var(--dk-color-error-50);
  --dk-text-warning-default: var(--dk-color-warning-50);
  --dk-border-warning-default: var(--dk-color-warning-50);
  --dk-text-information-default: var(--dk-color-information-50);
  --dk-border-information-default: var(--dk-color-information-50);
}
[data-theme] [data-tone="success"][data-tone-fill="solid"]:not([data-theme]),
[data-theme][data-tone="success"][data-tone-fill="solid"] {
  --dk-border-success-default: var(--_tone-text-on-solid);
  --dk-icon-primary-default: var(--dk-color-primary-50);
  --dk-icon-error-default: var(--dk-color-error-50);
  --dk-icon-warning-default: var(--dk-color-warning-50);
  --dk-icon-information-default: var(--dk-color-information-50);
  --dk-text-primary-default: var(--dk-color-primary-50);
  --dk-border-primary-default: var(--dk-color-primary-50);
  --dk-text-error-default: var(--dk-color-error-50);
  --dk-border-error-default: var(--dk-color-error-50);
  --dk-text-warning-default: var(--dk-color-warning-50);
  --dk-border-warning-default: var(--dk-color-warning-50);
  --dk-text-information-default: var(--dk-color-information-50);
  --dk-border-information-default: var(--dk-color-information-50);
}
[data-theme] [data-tone="error"][data-tone-fill="solid"]:not([data-theme]),
[data-theme][data-tone="error"][data-tone-fill="solid"] {
  --dk-border-error-default: var(--_tone-text-on-solid);
  --dk-icon-primary-default: var(--dk-color-primary-50);
  --dk-icon-success-default: var(--dk-color-primary-50);
  --dk-icon-warning-default: var(--dk-color-warning-50);
  --dk-icon-information-default: var(--dk-color-information-50);
  --dk-text-primary-default: var(--dk-color-primary-50);
  --dk-border-primary-default: var(--dk-color-primary-50);
  --dk-text-success-default: var(--dk-color-primary-50);
  --dk-border-success-default: var(--dk-color-primary-50);
  --dk-text-warning-default: var(--dk-color-warning-50);
  --dk-border-warning-default: var(--dk-color-warning-50);
  --dk-text-information-default: var(--dk-color-information-50);
  --dk-border-information-default: var(--dk-color-information-50);
}
[data-theme] [data-tone="warning"][data-tone-fill="solid"]:not([data-theme]),
[data-theme][data-tone="warning"][data-tone-fill="solid"] {
  --dk-border-warning-default: var(--_tone-text-on-solid);
  --dk-icon-primary-default: var(--dk-color-primary-50);
  --dk-icon-success-default: var(--dk-color-primary-50);
  --dk-icon-error-default: var(--dk-color-error-50);
  --dk-icon-information-default: var(--dk-color-information-50);
  --dk-text-primary-default: var(--dk-color-primary-50);
  --dk-border-primary-default: var(--dk-color-primary-50);
  --dk-text-success-default: var(--dk-color-primary-50);
  --dk-border-success-default: var(--dk-color-primary-50);
  --dk-text-error-default: var(--dk-color-error-50);
  --dk-border-error-default: var(--dk-color-error-50);
  --dk-text-information-default: var(--dk-color-information-50);
  --dk-border-information-default: var(--dk-color-information-50);
}
[data-theme] [data-tone="information"][data-tone-fill="solid"]:not([data-theme]),
[data-theme][data-tone="information"][data-tone-fill="solid"] {
  --dk-border-information-default: var(--_tone-text-on-solid);
  --dk-icon-primary-default: var(--dk-color-primary-50);
  --dk-icon-success-default: var(--dk-color-primary-50);
  --dk-icon-error-default: var(--dk-color-error-50);
  --dk-icon-warning-default: var(--dk-color-warning-50);
  --dk-text-primary-default: var(--dk-color-primary-50);
  --dk-border-primary-default: var(--dk-color-primary-50);
  --dk-text-success-default: var(--dk-color-primary-50);
  --dk-border-success-default: var(--dk-color-primary-50);
  --dk-text-error-default: var(--dk-color-error-50);
  --dk-border-error-default: var(--dk-color-error-50);
  --dk-text-warning-default: var(--dk-color-warning-50);
  --dk-border-warning-default: var(--dk-color-warning-50);
}
/* SOLID FILLS STEP WITH LEVELS, and only downward. The header note records
   levels being taken OFF solid after measuring: deepening in light and
   lightening in dark took white text from 4.7:1 to 3.5:1. That was a ladder
   running opposite ways per theme. This one does not, because a solid fill is
   the SAME rung in both themes, 700, which the subtle fills are not. So its
   ladder is the same in both, and it deepens: 700, 800, 900. White text reads
   5.74 at the lightest level and 16.70 at the deepest, so each level sits
   further above AA than the one before rather than closer to it.

   LIGHTENING WAS ASKED FOR FIRST and three lighter ladders were built and
   measured before this one was kept. The panel's own text is only half the
   question and the easier half; the CONTROL sitting on the panel is the other.
   On a solid fill a control lifts LIGHTER than its panel, so once the panel is
   itself light the lift runs out of ramp and the control's glyph has nowhere to
   sit. Measured on the rendered components, button and icon button, every
   variant and state:

       ladder        panel text below AA    control readings below 3:1
       700/800/900        0 of 12                 0 of 720
       650/700/800        1 of 12                40 of 576
       600/700/800        3 of 12                40 of 576
       500/600/700        7 of 12               220 of 576

   500/600/700 also forces the foreground to invert: white on warning-600 is
   3.57 and only black clears AA there, so the panel would carry dark text at
   one level and light at another. Deepening costs none of this.

   Level 0 is today's fill, so nothing that does not ask for a level moves. The
   slot re-assertions below were always here: the (0,4,0) level scopes above
   would otherwise re-tint a solid panel. */
[data-theme] [data-tone="primary"][data-tone-fill="solid"][data-surface="1"]:not([data-theme]),
[data-theme] [data-tone="success"][data-tone-fill="solid"][data-surface="1"]:not([data-theme]),
[data-theme] [data-tone="error"][data-tone-fill="solid"][data-surface="1"]:not([data-theme]),
[data-theme] [data-tone="warning"][data-tone-fill="solid"][data-surface="1"]:not([data-theme]),
[data-theme] [data-tone="information"][data-tone-fill="solid"][data-surface="1"]:not([data-theme]),
[data-theme][data-tone="primary"][data-tone-fill="solid"][data-surface="1"],
[data-theme][data-tone="success"][data-tone-fill="solid"][data-surface="1"],
[data-theme][data-tone="error"][data-tone-fill="solid"][data-surface="1"],
[data-theme][data-tone="warning"][data-tone-fill="solid"][data-surface="1"],
[data-theme][data-tone="information"][data-tone-fill="solid"][data-surface="1"] {
  --dk-surface-current: var(--_tone-surface-solid-1);
  --dk-border-hairline-current: var(--_tone-border-hairline-on-solid);
  --_tone-text: var(--_tone-text-on-solid);
  --_tone-icon: var(--_tone-icon-on-solid);
  /* The tone's own marks, status-agnostic, for a part whose emphasis follows
     the NEAREST tone and a reset clears (16 Oct: Dropzone's states). */
  --dk-interactive-tone-mark: var(--_tone-icon);
  --dk-interactive-tone-mark-hover: color-mix(in srgb, var(--_tone-icon) 85%, var(--dk-surface-current));
  --dk-interactive-tone-mark-active: color-mix(in srgb, var(--_tone-icon) 72%, var(--dk-surface-current));
  --dk-interactive-tone-fill-hover: var(--dk-surface-control-hover);
  --dk-interactive-tone-fill-active: var(--dk-surface-control-active);
  --dk-interactive-tone-text: var(--dk-text-default);
  --dk-interactive-tone-text-subtle: var(--dk-text-neutral-default);
  --dk-surface-disabled-subtle: var(--_tone-surface-disabled-subtle-solid);
  --dk-surface-disabled-default: var(--_tone-surface-disabled-default-solid);
  --dk-border-disabled-subtle: var(--_tone-border-disabled-subtle-solid);
  --dk-border-disabled-default: var(--_tone-border-disabled-default-solid);
  --dk-text-disabled-subtle: var(--_tone-text-disabled-subtle-solid);
  --dk-text-disabled-default: var(--_tone-text-disabled-default-solid);
  --dk-icon-disabled-subtle: var(--_tone-icon-disabled-subtle-solid);
  --dk-icon-disabled-default: var(--_tone-icon-disabled-default-solid);
}
[data-theme][data-tone="primary"][data-tone-fill="solid"][data-surface="below"],
[data-theme][data-tone="success"][data-tone-fill="solid"][data-surface="below"],
[data-theme][data-tone="error"][data-tone-fill="solid"][data-surface="below"],
[data-theme][data-tone="warning"][data-tone-fill="solid"][data-surface="below"],
[data-theme][data-tone="information"][data-tone-fill="solid"][data-surface="below"],
:is([data-theme] [data-tone="primary"][data-tone-fill="solid"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="success"][data-tone-fill="solid"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="error"][data-tone-fill="solid"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="warning"][data-tone-fill="solid"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="information"][data-tone-fill="solid"][data-surface="below"]:not([data-theme])):where(:not(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *))) {
  --dk-surface-current: var(--_tone-surface-solid-1);
  --dk-border-hairline-current: var(--_tone-border-hairline-on-solid);
  --_tone-text: var(--_tone-text-on-solid);
  --_tone-icon: var(--_tone-icon-on-solid);
  /* The tone's own marks, status-agnostic, for a part whose emphasis follows
     the NEAREST tone and a reset clears (16 Oct: Dropzone's states). */
  --dk-interactive-tone-mark: var(--_tone-icon);
  --dk-interactive-tone-mark-hover: color-mix(in srgb, var(--_tone-icon) 85%, var(--dk-surface-current));
  --dk-interactive-tone-mark-active: color-mix(in srgb, var(--_tone-icon) 72%, var(--dk-surface-current));
  --dk-interactive-tone-fill-hover: var(--dk-surface-control-hover);
  --dk-interactive-tone-fill-active: var(--dk-surface-control-active);
  --dk-interactive-tone-text: var(--dk-text-default);
  --dk-interactive-tone-text-subtle: var(--dk-text-neutral-default);
  --dk-surface-disabled-subtle: var(--_tone-surface-disabled-subtle-solid);
  --dk-surface-disabled-default: var(--_tone-surface-disabled-default-solid);
  --dk-border-disabled-subtle: var(--_tone-border-disabled-subtle-solid);
  --dk-border-disabled-default: var(--_tone-border-disabled-default-solid);
  --dk-text-disabled-subtle: var(--_tone-text-disabled-subtle-solid);
  --dk-text-disabled-default: var(--_tone-text-disabled-default-solid);
  --dk-icon-disabled-subtle: var(--_tone-icon-disabled-subtle-solid);
  --dk-icon-disabled-default: var(--_tone-icon-disabled-default-solid);
}
[data-theme="dark"] [data-tone="primary"][data-tone-fill="solid"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"] [data-tone="inverse"] [data-tone="primary"][data-tone-fill="solid"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"] [data-tone="success"][data-tone-fill="solid"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"] [data-tone="inverse"] [data-tone="success"][data-tone-fill="solid"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"] [data-tone="error"][data-tone-fill="solid"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"] [data-tone="inverse"] [data-tone="error"][data-tone-fill="solid"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"] [data-tone="warning"][data-tone-fill="solid"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"] [data-tone="inverse"] [data-tone="warning"][data-tone-fill="solid"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"] [data-tone="information"][data-tone-fill="solid"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"] [data-tone="inverse"] [data-tone="information"][data-tone-fill="solid"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"][data-tone="primary"][data-tone-fill="solid"][data-surface="raised"],
[data-theme="dark"][data-tone="success"][data-tone-fill="solid"][data-surface="raised"],
[data-theme="dark"][data-tone="error"][data-tone-fill="solid"][data-surface="raised"],
[data-theme="dark"][data-tone="warning"][data-tone-fill="solid"][data-surface="raised"],
[data-theme="dark"][data-tone="information"][data-tone-fill="solid"][data-surface="raised"] {
  --dk-surface-current: var(--_tone-surface-solid-1);
  --dk-border-hairline-current: var(--_tone-border-hairline-on-solid);
  --_tone-text: var(--_tone-text-on-solid);
  --_tone-icon: var(--_tone-icon-on-solid);
  /* The tone's own marks, status-agnostic, for a part whose emphasis follows
     the NEAREST tone and a reset clears (16 Oct: Dropzone's states). */
  --dk-interactive-tone-mark: var(--_tone-icon);
  --dk-interactive-tone-mark-hover: color-mix(in srgb, var(--_tone-icon) 85%, var(--dk-surface-current));
  --dk-interactive-tone-mark-active: color-mix(in srgb, var(--_tone-icon) 72%, var(--dk-surface-current));
  --dk-interactive-tone-fill-hover: var(--dk-surface-control-hover);
  --dk-interactive-tone-fill-active: var(--dk-surface-control-active);
  --dk-interactive-tone-text: var(--dk-text-default);
  --dk-interactive-tone-text-subtle: var(--dk-text-neutral-default);
  --dk-surface-disabled-subtle: var(--_tone-surface-disabled-subtle-solid);
  --dk-surface-disabled-default: var(--_tone-surface-disabled-default-solid);
  --dk-border-disabled-subtle: var(--_tone-border-disabled-subtle-solid);
  --dk-border-disabled-default: var(--_tone-border-disabled-default-solid);
  --dk-text-disabled-subtle: var(--_tone-text-disabled-subtle-solid);
  --dk-text-disabled-default: var(--_tone-text-disabled-default-solid);
  --dk-icon-disabled-subtle: var(--_tone-icon-disabled-subtle-solid);
  --dk-icon-disabled-default: var(--_tone-icon-disabled-default-solid);
}

[data-theme] [data-tone="primary"][data-tone-fill="solid"][data-surface="2"]:not([data-theme]),
[data-theme] [data-tone="success"][data-tone-fill="solid"][data-surface="2"]:not([data-theme]),
[data-theme] [data-tone="error"][data-tone-fill="solid"][data-surface="2"]:not([data-theme]),
[data-theme] [data-tone="warning"][data-tone-fill="solid"][data-surface="2"]:not([data-theme]),
[data-theme] [data-tone="information"][data-tone-fill="solid"][data-surface="2"]:not([data-theme]),
[data-theme][data-tone="primary"][data-tone-fill="solid"][data-surface="2"],
[data-theme][data-tone="success"][data-tone-fill="solid"][data-surface="2"],
[data-theme][data-tone="error"][data-tone-fill="solid"][data-surface="2"],
[data-theme][data-tone="warning"][data-tone-fill="solid"][data-surface="2"],
[data-theme][data-tone="information"][data-tone-fill="solid"][data-surface="2"] {
  --dk-surface-current: var(--_tone-surface-solid-2);
  --dk-border-hairline-current: var(--_tone-border-hairline-on-solid);
  --_tone-text: var(--_tone-text-on-solid);
  --_tone-icon: var(--_tone-icon-on-solid);
  /* The tone's own marks, status-agnostic, for a part whose emphasis follows
     the NEAREST tone and a reset clears (16 Oct: Dropzone's states). */
  --dk-interactive-tone-mark: var(--_tone-icon);
  --dk-interactive-tone-mark-hover: color-mix(in srgb, var(--_tone-icon) 85%, var(--dk-surface-current));
  --dk-interactive-tone-mark-active: color-mix(in srgb, var(--_tone-icon) 72%, var(--dk-surface-current));
  --dk-interactive-tone-fill-hover: var(--dk-surface-control-hover);
  --dk-interactive-tone-fill-active: var(--dk-surface-control-active);
  --dk-interactive-tone-text: var(--dk-text-default);
  --dk-interactive-tone-text-subtle: var(--dk-text-neutral-default);
  --dk-surface-disabled-subtle: var(--_tone-surface-disabled-subtle-solid);
  --dk-surface-disabled-default: var(--_tone-surface-disabled-default-solid);
  --dk-border-disabled-subtle: var(--_tone-border-disabled-subtle-solid);
  --dk-border-disabled-default: var(--_tone-border-disabled-default-solid);
  --dk-text-disabled-subtle: var(--_tone-text-disabled-subtle-solid);
  --dk-text-disabled-default: var(--_tone-text-disabled-default-solid);
  --dk-icon-disabled-subtle: var(--_tone-icon-disabled-subtle-solid);
  --dk-icon-disabled-default: var(--_tone-icon-disabled-default-solid);
}
:is([data-theme] [data-tone="primary"][data-tone-fill="solid"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="success"][data-tone-fill="solid"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="error"][data-tone-fill="solid"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="warning"][data-tone-fill="solid"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="information"][data-tone-fill="solid"][data-surface="below"]:not([data-theme])):where(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *)) {
  --dk-surface-current: var(--_tone-surface-solid-2);
  --dk-border-hairline-current: var(--_tone-border-hairline-on-solid);
  --_tone-text: var(--_tone-text-on-solid);
  --_tone-icon: var(--_tone-icon-on-solid);
  /* The tone's own marks, status-agnostic, for a part whose emphasis follows
     the NEAREST tone and a reset clears (16 Oct: Dropzone's states). */
  --dk-interactive-tone-mark: var(--_tone-icon);
  --dk-interactive-tone-mark-hover: color-mix(in srgb, var(--_tone-icon) 85%, var(--dk-surface-current));
  --dk-interactive-tone-mark-active: color-mix(in srgb, var(--_tone-icon) 72%, var(--dk-surface-current));
  --dk-interactive-tone-fill-hover: var(--dk-surface-control-hover);
  --dk-interactive-tone-fill-active: var(--dk-surface-control-active);
  --dk-interactive-tone-text: var(--dk-text-default);
  --dk-interactive-tone-text-subtle: var(--dk-text-neutral-default);
  --dk-surface-disabled-subtle: var(--_tone-surface-disabled-subtle-solid);
  --dk-surface-disabled-default: var(--_tone-surface-disabled-default-solid);
  --dk-border-disabled-subtle: var(--_tone-border-disabled-subtle-solid);
  --dk-border-disabled-default: var(--_tone-border-disabled-default-solid);
  --dk-text-disabled-subtle: var(--_tone-text-disabled-subtle-solid);
  --dk-text-disabled-default: var(--_tone-text-disabled-default-solid);
  --dk-icon-disabled-subtle: var(--_tone-icon-disabled-subtle-solid);
  --dk-icon-disabled-default: var(--_tone-icon-disabled-default-solid);
}

/* ── The link ramp on a status tone (29 Sep 2026) ────────────────────────
   A link on a tone takes the tone's own text colour, which the tone layer has
   already measured against its fill at every level and on solid. Jade on an
   error tint was never measured and would not be the tone's colour anyway.
   Hover and active share it: on a tone the step is carried by the underline,
   which thickens and takes currentColor. The resting underline is the tone's
   hairline, one rung quieter than the text, as it is on the page.

   THE FIVE STATUS TONES ARE NAMED rather than matched as [data-tone], so an
   unknown tone value is a no-op instead of an empty slot (status-border-ladder
   test). INVERSE IS EXCLUDED on purpose. text.css is mirrored into inverse by the
   build, so an inverse panel already gets the opposite theme's ramp with real
   hover and active steps; this rule at the same specificity and later in the
   bundle would flatten that. */
[data-theme] [data-tone="primary"]:not([data-theme]),
[data-theme] [data-tone="success"]:not([data-theme]),
[data-theme] [data-tone="error"]:not([data-theme]),
[data-theme] [data-tone="warning"]:not([data-theme]),
[data-theme] [data-tone="information"]:not([data-theme]),
[data-theme][data-tone="primary"],
[data-theme][data-tone="success"],
[data-theme][data-tone="error"],
[data-theme][data-tone="warning"],
[data-theme][data-tone="information"] {
  --dk-text-link-default: var(--_tone-text);
  --dk-text-link-hover: var(--_tone-text);
  --dk-text-link-active: var(--_tone-text);
  --dk-text-link-underline: var(--dk-border-hairline-current);
}

/* ── Rule B: the brand follows the tone (13 Oct 2026) ─────────────────────
   --dk-text-primary-brand was never remapped, so the brand stayed primary 500
   on a primary tint (Tabs' selected label at 1.86:1 at level 2) and on a solid
   (1:1 for the Tabs count). On any tint it takes the tint's own reading rung,
   as a link on a tone already does (29 Sep): kept at the page value on another
   status's tint it fell to 2.47:1 (dark error, level 2), measured 13 Oct.
   There is no icon twin: a glyph beside brand words is currentColor. */
/* rule B: brand on any tint */
[data-theme] [data-tone="primary"]:not([data-theme]),
[data-theme] [data-tone="success"]:not([data-theme]),
[data-theme] [data-tone="error"]:not([data-theme]),
[data-theme] [data-tone="warning"]:not([data-theme]),
[data-theme] [data-tone="information"]:not([data-theme]),
[data-theme][data-tone="primary"],
[data-theme][data-tone="success"],
[data-theme][data-tone="error"],
[data-theme][data-tone="warning"],
[data-theme][data-tone="information"] {
  --dk-text-primary-brand: var(--_tone-text);
}
/* rule B: brand on any solid */
[data-theme] [data-tone="primary"][data-tone-fill="solid"]:not([data-theme]),
[data-theme] [data-tone="success"][data-tone-fill="solid"]:not([data-theme]),
[data-theme] [data-tone="error"][data-tone-fill="solid"]:not([data-theme]),
[data-theme] [data-tone="warning"][data-tone-fill="solid"]:not([data-theme]),
[data-theme] [data-tone="information"][data-tone-fill="solid"]:not([data-theme]),
[data-theme][data-tone="primary"][data-tone-fill="solid"],
[data-theme][data-tone="success"][data-tone-fill="solid"],
[data-theme][data-tone="error"][data-tone-fill="solid"],
[data-theme][data-tone="warning"][data-tone-fill="solid"],
[data-theme][data-tone="information"][data-tone-fill="solid"] {
  --dk-text-primary-brand: var(--_tone-text-on-solid);
}

/* ── Rule C: filled marks invert on solid fills (13 Oct 2026, Julio) ──────
   A status fill on a solid of the same hue is the same colour as the panel,
   and on another status's solid it clashes (an error button on a dark warning
   panel measured 1.01:1). On a solid, every status's fill becomes the on-solid
   colour, white by construction, and the content on it (--dk-text-on-S-fill,
   --dk-icon-on-S-fill) takes the status's 700:
   a white Glider pill with primary words, a white checked box with a primary
   tick, a white primary button with a primary label. Hover and press step down
   the status's own tints. Success is jade, so it reads primary's ramp. Only
   primary has an -active surface rung; the rest stop at -focus. Outline
   text (--dk-text-S-outline) has no fill under it, so on a solid it follows
   the status text the tone already adapts (an outline Tag was 700 on 700);
   on-subtle stays the tint's reading rung, for chips that paint their own. */
/* rule C: filled marks invert on solid */
[data-theme] [data-tone="primary"][data-tone-fill="solid"]:not([data-theme]),
[data-theme] [data-tone="success"][data-tone-fill="solid"]:not([data-theme]),
[data-theme] [data-tone="error"][data-tone-fill="solid"]:not([data-theme]),
[data-theme] [data-tone="warning"][data-tone-fill="solid"]:not([data-theme]),
[data-theme] [data-tone="information"][data-tone-fill="solid"]:not([data-theme]),
[data-theme][data-tone="primary"][data-tone-fill="solid"],
[data-theme][data-tone="success"][data-tone-fill="solid"],
[data-theme][data-tone="error"][data-tone-fill="solid"],
[data-theme][data-tone="warning"][data-tone-fill="solid"],
[data-theme][data-tone="information"][data-tone-fill="solid"] {
  --dk-surface-primary-brand: var(--_tone-text-on-solid);
  --dk-surface-primary-default: var(--_tone-text-on-solid);
  --dk-surface-primary-hover: var(--dk-color-primary-50);
  --dk-surface-primary-focus: var(--dk-color-primary-100);
  --dk-surface-primary-active: var(--dk-color-primary-100);
  --dk-border-primary-default: var(--_tone-text-on-solid);
  --dk-border-primary-hover: var(--dk-color-primary-50);
  --dk-border-primary-focus: var(--dk-color-primary-100);
  --dk-text-on-primary-fill: var(--dk-color-primary-700);
  --dk-icon-on-primary-fill: var(--dk-color-primary-700);
  --dk-surface-primary-mark: var(--_tone-text-on-solid);
  --dk-text-on-primary-mark: var(--dk-color-primary-700);
  --dk-icon-on-primary-mark: var(--dk-color-primary-700);
  --dk-text-primary-outline: var(--dk-text-primary-default);
  --dk-surface-success-default: var(--_tone-text-on-solid);
  --dk-surface-success-hover: var(--dk-color-primary-50);
  --dk-surface-success-focus: var(--dk-color-primary-100);
  --dk-border-success-default: var(--_tone-text-on-solid);
  --dk-border-success-hover: var(--dk-color-primary-50);
  --dk-border-success-focus: var(--dk-color-primary-100);
  --dk-text-on-success-fill: var(--dk-color-primary-700);
  --dk-icon-on-success-fill: var(--dk-color-primary-700);
  --dk-surface-success-mark: var(--_tone-text-on-solid);
  --dk-text-on-success-mark: var(--dk-color-primary-700);
  --dk-icon-on-success-mark: var(--dk-color-primary-700);
  --dk-text-success-outline: var(--dk-text-success-default);
  --dk-surface-error-default: var(--_tone-text-on-solid);
  --dk-surface-error-hover: var(--dk-color-error-50);
  --dk-surface-error-focus: var(--dk-color-error-100);
  --dk-border-error-default: var(--_tone-text-on-solid);
  --dk-border-error-hover: var(--dk-color-error-50);
  --dk-border-error-focus: var(--dk-color-error-100);
  --dk-text-on-error-fill: var(--dk-color-error-700);
  --dk-icon-on-error-fill: var(--dk-color-error-700);
  --dk-surface-error-mark: var(--_tone-text-on-solid);
  --dk-text-on-error-mark: var(--dk-color-error-700);
  --dk-icon-on-error-mark: var(--dk-color-error-700);
  --dk-text-error-outline: var(--dk-text-error-default);
  --dk-surface-warning-default: var(--_tone-text-on-solid);
  --dk-surface-warning-hover: var(--dk-color-warning-50);
  --dk-surface-warning-focus: var(--dk-color-warning-100);
  --dk-border-warning-default: var(--_tone-text-on-solid);
  --dk-border-warning-hover: var(--dk-color-warning-50);
  --dk-border-warning-focus: var(--dk-color-warning-100);
  --dk-text-on-warning-fill: var(--dk-color-warning-700);
  --dk-icon-on-warning-fill: var(--dk-color-warning-700);
  --dk-surface-warning-mark: var(--_tone-text-on-solid);
  --dk-text-on-warning-mark: var(--dk-color-warning-700);
  --dk-icon-on-warning-mark: var(--dk-color-warning-700);
  --dk-text-warning-outline: var(--dk-text-warning-default);
  --dk-surface-information-default: var(--_tone-text-on-solid);
  --dk-surface-information-hover: var(--dk-color-information-50);
  --dk-surface-information-focus: var(--dk-color-information-100);
  --dk-border-information-default: var(--_tone-text-on-solid);
  --dk-border-information-hover: var(--dk-color-information-50);
  --dk-border-information-focus: var(--dk-color-information-100);
  --dk-text-on-information-fill: var(--dk-color-information-700);
  --dk-icon-on-information-fill: var(--dk-color-information-700);
  --dk-surface-information-mark: var(--_tone-text-on-solid);
  --dk-text-on-information-mark: var(--dk-color-information-700);
  --dk-icon-on-information-mark: var(--dk-color-information-700);
  --dk-text-information-outline: var(--dk-text-information-default);
}

/* ═══════════════════════════════════════════ drift-kit:layer tokens/mapped/hue.css ═══════════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────
   COLLECTION: Mapped
   GROUP: Hue (categorical colour)   — Karmo, 2026-09-29
   ───────────────────────────────────────────────────────────

   NINE ON-BRAND HUES for things that are categories rather than statuses: a
   report's department, a chart's series, a filter chip. Primary and its eight
   neighbours (primitives/primary-neighbours.css), yellow-green through jade to
   blue, all at one lightness and chroma per rung so they read as one family.

   THE RUNGS ARE PRIMARY'S OWN PATTERN, so a hue tag sits beside a status tag
   built identically: subtle 50 / 850, text on it 700 / 200, hairline 300 / 800,
   dot 500 / 400. The solid fill is 600 in both themes, Tag's solid rung, where
   white text is 4.25:1 on every hue because they share a lightness.

   A HUE IS NOT A STATUS. next4 sits about 15 degrees from the information blue
   and prev1 on success's hue; that is fine for a category and wrong for a
   meaning. Tones do not remap these: a category keeps its colour on any panel.
   The build mirrors this file into inverse like every other mapped file. */
[data-theme="light"] {
  --dk-surface-hue-prev4-subtle: var(--dk-primitive-color-primary-prev4-50);
  --dk-text-hue-prev4-on-subtle: var(--dk-primitive-color-primary-prev4-700);
  --dk-border-hue-prev4-hairline: var(--dk-primitive-color-primary-prev4-300);
  --dk-icon-hue-prev4-default: var(--dk-primitive-color-primary-prev4-500);
  --dk-surface-hue-prev4-solid: var(--dk-primitive-color-primary-prev4-600);
  --dk-surface-hue-prev3-subtle: var(--dk-primitive-color-primary-prev3-50);
  --dk-text-hue-prev3-on-subtle: var(--dk-primitive-color-primary-prev3-700);
  --dk-border-hue-prev3-hairline: var(--dk-primitive-color-primary-prev3-300);
  --dk-icon-hue-prev3-default: var(--dk-primitive-color-primary-prev3-500);
  --dk-surface-hue-prev3-solid: var(--dk-primitive-color-primary-prev3-600);
  --dk-surface-hue-prev2-subtle: var(--dk-primitive-color-primary-prev2-50);
  --dk-text-hue-prev2-on-subtle: var(--dk-primitive-color-primary-prev2-700);
  --dk-border-hue-prev2-hairline: var(--dk-primitive-color-primary-prev2-300);
  --dk-icon-hue-prev2-default: var(--dk-primitive-color-primary-prev2-500);
  --dk-surface-hue-prev2-solid: var(--dk-primitive-color-primary-prev2-600);
  --dk-surface-hue-prev1-subtle: var(--dk-primitive-color-primary-prev1-50);
  --dk-text-hue-prev1-on-subtle: var(--dk-primitive-color-primary-prev1-700);
  --dk-border-hue-prev1-hairline: var(--dk-primitive-color-primary-prev1-300);
  --dk-icon-hue-prev1-default: var(--dk-primitive-color-primary-prev1-500);
  --dk-surface-hue-prev1-solid: var(--dk-primitive-color-primary-prev1-600);
  --dk-surface-hue-primary-subtle: var(--dk-color-primary-50);
  --dk-text-hue-primary-on-subtle: var(--dk-color-primary-700);
  --dk-border-hue-primary-hairline: var(--dk-color-primary-300);
  --dk-icon-hue-primary-default: var(--dk-color-primary-500);
  --dk-surface-hue-primary-solid: var(--dk-color-primary-600);
  --dk-surface-hue-next1-subtle: var(--dk-primitive-color-primary-next1-50);
  --dk-text-hue-next1-on-subtle: var(--dk-primitive-color-primary-next1-700);
  --dk-border-hue-next1-hairline: var(--dk-primitive-color-primary-next1-300);
  --dk-icon-hue-next1-default: var(--dk-primitive-color-primary-next1-500);
  --dk-surface-hue-next1-solid: var(--dk-primitive-color-primary-next1-600);
  --dk-surface-hue-next2-subtle: var(--dk-primitive-color-primary-next2-50);
  --dk-text-hue-next2-on-subtle: var(--dk-primitive-color-primary-next2-700);
  --dk-border-hue-next2-hairline: var(--dk-primitive-color-primary-next2-300);
  --dk-icon-hue-next2-default: var(--dk-primitive-color-primary-next2-500);
  --dk-surface-hue-next2-solid: var(--dk-primitive-color-primary-next2-600);
  --dk-surface-hue-next3-subtle: var(--dk-primitive-color-primary-next3-50);
  --dk-text-hue-next3-on-subtle: var(--dk-primitive-color-primary-next3-700);
  --dk-border-hue-next3-hairline: var(--dk-primitive-color-primary-next3-300);
  --dk-icon-hue-next3-default: var(--dk-primitive-color-primary-next3-500);
  --dk-surface-hue-next3-solid: var(--dk-primitive-color-primary-next3-600);
  --dk-surface-hue-next4-subtle: var(--dk-primitive-color-primary-next4-50);
  --dk-text-hue-next4-on-subtle: var(--dk-primitive-color-primary-next4-700);
  --dk-border-hue-next4-hairline: var(--dk-primitive-color-primary-next4-300);
  --dk-icon-hue-next4-default: var(--dk-primitive-color-primary-next4-500);
  --dk-surface-hue-next4-solid: var(--dk-primitive-color-primary-next4-600);
  --dk-text-hue-on-solid: var(--dk-text-base-white);
}
[data-theme="dark"] {
  --dk-surface-hue-prev4-subtle: var(--dk-primitive-color-primary-prev4-850);
  --dk-text-hue-prev4-on-subtle: var(--dk-primitive-color-primary-prev4-200);
  --dk-border-hue-prev4-hairline: var(--dk-primitive-color-primary-prev4-800);
  --dk-icon-hue-prev4-default: var(--dk-primitive-color-primary-prev4-400);
  --dk-surface-hue-prev4-solid: var(--dk-primitive-color-primary-prev4-600);
  --dk-surface-hue-prev3-subtle: var(--dk-primitive-color-primary-prev3-850);
  --dk-text-hue-prev3-on-subtle: var(--dk-primitive-color-primary-prev3-200);
  --dk-border-hue-prev3-hairline: var(--dk-primitive-color-primary-prev3-800);
  --dk-icon-hue-prev3-default: var(--dk-primitive-color-primary-prev3-400);
  --dk-surface-hue-prev3-solid: var(--dk-primitive-color-primary-prev3-600);
  --dk-surface-hue-prev2-subtle: var(--dk-primitive-color-primary-prev2-850);
  --dk-text-hue-prev2-on-subtle: var(--dk-primitive-color-primary-prev2-200);
  --dk-border-hue-prev2-hairline: var(--dk-primitive-color-primary-prev2-800);
  --dk-icon-hue-prev2-default: var(--dk-primitive-color-primary-prev2-400);
  --dk-surface-hue-prev2-solid: var(--dk-primitive-color-primary-prev2-600);
  --dk-surface-hue-prev1-subtle: var(--dk-primitive-color-primary-prev1-850);
  --dk-text-hue-prev1-on-subtle: var(--dk-primitive-color-primary-prev1-200);
  --dk-border-hue-prev1-hairline: var(--dk-primitive-color-primary-prev1-800);
  --dk-icon-hue-prev1-default: var(--dk-primitive-color-primary-prev1-400);
  --dk-surface-hue-prev1-solid: var(--dk-primitive-color-primary-prev1-600);
  --dk-surface-hue-primary-subtle: var(--dk-color-primary-850);
  --dk-text-hue-primary-on-subtle: var(--dk-color-primary-200);
  --dk-border-hue-primary-hairline: var(--dk-color-primary-800);
  --dk-icon-hue-primary-default: var(--dk-color-primary-400);
  --dk-surface-hue-primary-solid: var(--dk-color-primary-600);
  --dk-surface-hue-next1-subtle: var(--dk-primitive-color-primary-next1-850);
  --dk-text-hue-next1-on-subtle: var(--dk-primitive-color-primary-next1-200);
  --dk-border-hue-next1-hairline: var(--dk-primitive-color-primary-next1-800);
  --dk-icon-hue-next1-default: var(--dk-primitive-color-primary-next1-400);
  --dk-surface-hue-next1-solid: var(--dk-primitive-color-primary-next1-600);
  --dk-surface-hue-next2-subtle: var(--dk-primitive-color-primary-next2-850);
  --dk-text-hue-next2-on-subtle: var(--dk-primitive-color-primary-next2-200);
  --dk-border-hue-next2-hairline: var(--dk-primitive-color-primary-next2-800);
  --dk-icon-hue-next2-default: var(--dk-primitive-color-primary-next2-400);
  --dk-surface-hue-next2-solid: var(--dk-primitive-color-primary-next2-600);
  --dk-surface-hue-next3-subtle: var(--dk-primitive-color-primary-next3-850);
  --dk-text-hue-next3-on-subtle: var(--dk-primitive-color-primary-next3-200);
  --dk-border-hue-next3-hairline: var(--dk-primitive-color-primary-next3-800);
  --dk-icon-hue-next3-default: var(--dk-primitive-color-primary-next3-400);
  --dk-surface-hue-next3-solid: var(--dk-primitive-color-primary-next3-600);
  --dk-surface-hue-next4-subtle: var(--dk-primitive-color-primary-next4-850);
  --dk-text-hue-next4-on-subtle: var(--dk-primitive-color-primary-next4-200);
  --dk-border-hue-next4-hairline: var(--dk-primitive-color-primary-next4-800);
  --dk-icon-hue-next4-default: var(--dk-primitive-color-primary-next4-400);
  --dk-surface-hue-next4-solid: var(--dk-primitive-color-primary-next4-600);
  --dk-text-hue-on-solid: var(--dk-text-base-white);
}

/* ═══════════════════════════════════════ drift-kit:layer tokens/mapped/control.css ═══════════════════════════════════════ */
/* ============================================================================
   Control surfaces and edges, on a tone
   ----------------------------------------------------------------------------
   THE QUESTION THIS ANSWERS: what colour is a control that is SITTING ON a
   toned surface? Not a control that IS the status, which is what
   --dk-surface-primary-* already covers, but a neutral control that has to
   belong to the panel under it: an icon button on an error card, a chip on a
   solid primary banner.

   Nothing answered it before. Of 576 surface, border and icon tokens, only
   fourteen tracked tone, level AND solid fill together, and the only one whose
   values suited an enabled control's fill was named --dk-surface-disabled-*.
   Components reaching for a neutral fill therefore got a fixed grey and stayed
   grey on every tone, which is what made an icon button a grey square on a mint
   panel and a near-white square on a solid green one.

   TWO LAYERS, the same pattern tone.css uses and for the same reason: ramp
   tokens declared per theme so they inherit from the nearest themed ancestor,
   then a remap per tone and level that points the public name at them.

   HOW THE RUNGS WERE CHOSEN, since a design system should not carry numbers
   nobody can re-derive. For every tone, level and fill, the panel's own colour
   was measured, located on its ramp, and each state given the rung whose
   contrast against that panel came closest to a target, constrained three ways:
   it must travel at least one rung, so a control always lifts off its surface;
   at most three, so it cannot cross into a different colour entirely; and the
   three states must land on different rungs, so they stay distinguishable.
   Targets come from the neutral case that was already approved on screen, a
   white panel with a neutral-25 fill: 1.12, 1.30 and 1.55 for the fill, and
   1.30, 1.55 and 1.90 for the edge.

   "Lifted" means DARKER on a light panel and LIGHTER on a dark one, decided per
   panel from its measured luminance rather than from the theme, which is what
   makes solid fills and inverse come out right without a special case.

   The spread that remains is the ramps', not the rule's: one rung on a dark
   tinted ramp is a bigger luminance step than one rung near white, so a dark
   panel's control lifts harder. Medians land at 1.22, 1.71 and 2.30.

   CORRECTED 3 Nov 2026 (23.18.1; Julio, a subtle button on a dark level-1
   surface): dark level 1 had its rest darker than its panel (800) and, on
   primary, a hover darker than its rest. It now steps the way levels 0 and 2
   do, from a new 750 (half 700, half 800): 750/700/650, with the lightest
   label, 25, so no state reads under 4.97:1. 23.18.0 also moved light error and
   information and dark success; that was wrong and is undone. Light error and
   information step LIGHTER on purpose: outline, plain and ghost buttons keep
   their red or blue label on the hover fill, and a darker fill drowned it
   (1.65:1). test/control-lift.test.js holds what is held.

   NOT GENERATED AT BUILD TIME. The values are written out because a token you
   cannot read in the file is a token nobody can review.
   ============================================================================ */
/* ── The untoned case: a control on a plain surface. ───────────────────────
   Light level 0 is neutral-25 / 50 / 100, which is exactly what the icon button
   already looked like before any of this. The point of the exercise was to make
   every OTHER surface behave like this one, not to restyle this one. Measured
   1.09 / 1.20 / 1.45 against a white panel: the readings the targets above were
   taken from. */
[data-theme="light"] {
  --dk-surface-control-default: var(--dk-color-neutral-25);
  --dk-surface-control-hover: var(--dk-color-neutral-50);
  --dk-surface-control-active: var(--dk-color-neutral-100);
  --dk-surface-control-default-level-1: var(--dk-color-neutral-50);
  --dk-surface-control-hover-level-1: var(--dk-color-neutral-100);
  --dk-surface-control-active-level-1: var(--dk-color-neutral-200);
  --dk-surface-control-default-level-2: var(--dk-color-neutral-100);
  --dk-surface-control-hover-level-2: var(--dk-color-neutral-200);
  --dk-surface-control-active-level-2: var(--dk-color-neutral-300);
}
[data-theme="dark"] {
  --dk-surface-control-default: var(--dk-color-neutral-1000);
  --dk-surface-control-hover: var(--dk-color-neutral-900);
  --dk-surface-control-active: var(--dk-color-neutral-800);
  --dk-surface-control-default-level-1: var(--dk-color-neutral-900);
  --dk-surface-control-hover-level-1: var(--dk-color-neutral-800);
  --dk-surface-control-active-level-1: var(--dk-color-neutral-700);
  --dk-surface-control-default-level-2: var(--dk-color-neutral-800);
  --dk-surface-control-hover-level-2: var(--dk-color-neutral-700);
  --dk-surface-control-active-level-2: var(--dk-color-neutral-600);
}
/* THE UNTONED GLYPH, AS AN EXPLICIT LADDER. It read --dk-icon-neutral-default
   and --dk-text-neutral-default, on the reasoning that pointing at the tokens
   the component already used meant the neutral look could not have moved. Two
   things forced the change. The neutral family SATURATES: at light level 2 both
   of those resolve to #37494c, so a pressed glyph had nowhere to go; and in
   DARK they are the same colour as each other at every level, #bcc2c3 at 0 and
   1 and #d3d7d7 at 2, so the untoned hover glyph had never changed at all.

   The light rungs below are the measured values of the tokens they replace --
   500/600/700 for default and 600/700/800 for hover, checked in the browser --
   so the light look is unmoved by construction. Dark keeps its default rungs
   and gains a hover and a press that are actually different.

   Disabled stays the token it already read, so the neutral disabled look cannot
   have moved. Only a status tone overrides any of this. */
[data-theme="light"] {
  --dk-icon-control-default: var(--dk-color-neutral-500);
  --dk-icon-control-hover: var(--dk-color-neutral-600);
  --dk-icon-control-active: var(--dk-color-neutral-700);
  --dk-icon-control-default-level-1: var(--dk-color-neutral-600);
  --dk-icon-control-hover-level-1: var(--dk-color-neutral-700);
  --dk-icon-control-active-level-1: var(--dk-color-neutral-800);
  --dk-icon-control-default-level-2: var(--dk-color-neutral-700);
  --dk-icon-control-hover-level-2: var(--dk-color-neutral-800);
  --dk-icon-control-active-level-2: var(--dk-color-neutral-900);
}
[data-theme="dark"] {
  --dk-icon-control-default: var(--dk-color-neutral-200);
  --dk-icon-control-hover: var(--dk-color-neutral-100);
  --dk-icon-control-active: var(--dk-color-neutral-50);
  --dk-icon-control-default-level-1: var(--dk-color-neutral-200);
  --dk-icon-control-hover-level-1: var(--dk-color-neutral-100);
  --dk-icon-control-active-level-1: var(--dk-color-neutral-50);
  --dk-icon-control-default-level-2: var(--dk-color-neutral-100);
  --dk-icon-control-hover-level-2: var(--dk-color-neutral-50);
  --dk-icon-control-active-level-2: var(--dk-color-neutral-25);
}
/* THE UNTONED LABEL. Button has one and the icon button did not, which is why
   the family had no text member until now. The light rungs are the measured
   values of --dk-text-neutral-default, 600/700/800, so a plain or raised button
   on an untoned page is unmoved; dark is pinned to 200/200/100 for the same
   reason, even though the derivation used for TONED panels would step it,
   because upstream's own text and icon coincide there. Hover and press step one
   rung further, the relationship --dk-text-neutral-default already has to
   --dk-icon-neutral-default at every light level. */
[data-theme="light"] {
  --dk-text-control-default: var(--dk-color-neutral-600);
  --dk-text-control-hover: var(--dk-color-neutral-700);
  --dk-text-control-active: var(--dk-color-neutral-800);
  --dk-text-control-default-level-1: var(--dk-color-neutral-700);
  --dk-text-control-hover-level-1: var(--dk-color-neutral-800);
  --dk-text-control-active-level-1: var(--dk-color-neutral-900);
  --dk-text-control-default-level-2: var(--dk-color-neutral-800);
  --dk-text-control-hover-level-2: var(--dk-color-neutral-900);
  --dk-text-control-active-level-2: var(--dk-color-neutral-1000);
}
[data-theme="dark"] {
  --dk-text-control-default: var(--dk-color-neutral-200);
  --dk-text-control-hover: var(--dk-color-neutral-100);
  --dk-text-control-active: var(--dk-color-neutral-50);
  --dk-text-control-default-level-1: var(--dk-color-neutral-200);
  --dk-text-control-hover-level-1: var(--dk-color-neutral-100);
  --dk-text-control-active-level-1: var(--dk-color-neutral-50);
  --dk-text-control-default-level-2: var(--dk-color-neutral-100);
  --dk-text-control-hover-level-2: var(--dk-color-neutral-50);
  --dk-text-control-active-level-2: var(--dk-color-neutral-25);
}
[data-theme="light"], [data-theme="dark"] {
  --dk-icon-control-disabled: var(--dk-icon-disabled-subtle);
  --dk-text-control-disabled: var(--dk-text-disabled-subtle);
  --dk-surface-control-disabled: var(--dk-surface-disabled-subtle);
}
/* The untoned ladder, the same shape surface.css uses for its own families. */
[data-theme] [data-surface="1"]:not([data-theme]),
[data-theme][data-surface="1"] {
  --dk-surface-control-default: var(--dk-surface-control-default-level-1);
  --dk-surface-control-hover: var(--dk-surface-control-hover-level-1);
  --dk-surface-control-active: var(--dk-surface-control-active-level-1);
  --dk-icon-control-default: var(--dk-icon-control-default-level-1);
  --dk-icon-control-hover: var(--dk-icon-control-hover-level-1);
  --dk-icon-control-active: var(--dk-icon-control-active-level-1);
  --dk-text-control-default: var(--dk-text-control-default-level-1);
  --dk-text-control-hover: var(--dk-text-control-hover-level-1);
  --dk-text-control-active: var(--dk-text-control-active-level-1);
}
[data-theme][data-surface="below"],
[data-theme] [data-surface="below"]:not([data-theme]):where(:not(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *))) {
  --dk-surface-control-default: var(--dk-surface-control-default-level-1);
  --dk-surface-control-hover: var(--dk-surface-control-hover-level-1);
  --dk-surface-control-active: var(--dk-surface-control-active-level-1);
  --dk-icon-control-default: var(--dk-icon-control-default-level-1);
  --dk-icon-control-hover: var(--dk-icon-control-hover-level-1);
  --dk-icon-control-active: var(--dk-icon-control-active-level-1);
  --dk-text-control-default: var(--dk-text-control-default-level-1);
  --dk-text-control-hover: var(--dk-text-control-hover-level-1);
  --dk-text-control-active: var(--dk-text-control-active-level-1);
}
[data-theme="light"] .dk-component-brand-sheet__panel[data-theme="dark"]:where(:not([data-theme="light"] [data-theme="dark"] *)) {
  --dk-surface-control-default: var(--dk-surface-control-default-level-1);
  --dk-surface-control-hover: var(--dk-surface-control-hover-level-1);
  --dk-surface-control-active: var(--dk-surface-control-active-level-1);
  --dk-icon-control-default: var(--dk-icon-control-default-level-1);
  --dk-icon-control-hover: var(--dk-icon-control-hover-level-1);
  --dk-icon-control-active: var(--dk-icon-control-active-level-1);
  --dk-text-control-default: var(--dk-text-control-default-level-1);
  --dk-text-control-hover: var(--dk-text-control-hover-level-1);
  --dk-text-control-active: var(--dk-text-control-active-level-1);
}
[data-theme="dark"] [data-surface="raised"]:not([data-theme]):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"] [data-tone="inverse"] [data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"][data-surface="raised"] {
  --dk-surface-control-default: var(--dk-surface-control-default-level-1);
  --dk-surface-control-hover: var(--dk-surface-control-hover-level-1);
  --dk-surface-control-active: var(--dk-surface-control-active-level-1);
  --dk-icon-control-default: var(--dk-icon-control-default-level-1);
  --dk-icon-control-hover: var(--dk-icon-control-hover-level-1);
  --dk-icon-control-active: var(--dk-icon-control-active-level-1);
  --dk-text-control-default: var(--dk-text-control-default-level-1);
  --dk-text-control-hover: var(--dk-text-control-hover-level-1);
  --dk-text-control-active: var(--dk-text-control-active-level-1);
}
[data-theme] [data-surface="2"]:not([data-theme]),
[data-theme][data-surface="2"] {
  --dk-surface-control-default: var(--dk-surface-control-default-level-2);
  --dk-surface-control-hover: var(--dk-surface-control-hover-level-2);
  --dk-surface-control-active: var(--dk-surface-control-active-level-2);
  --dk-icon-control-default: var(--dk-icon-control-default-level-2);
  --dk-icon-control-hover: var(--dk-icon-control-hover-level-2);
  --dk-icon-control-active: var(--dk-icon-control-active-level-2);
  --dk-text-control-default: var(--dk-text-control-default-level-2);
  --dk-text-control-hover: var(--dk-text-control-hover-level-2);
  --dk-text-control-active: var(--dk-text-control-active-level-2);
}
[data-theme] [data-surface="below"]:not([data-theme]):where(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *)) {
  --dk-surface-control-default: var(--dk-surface-control-default-level-2);
  --dk-surface-control-hover: var(--dk-surface-control-hover-level-2);
  --dk-surface-control-active: var(--dk-surface-control-active-level-2);
  --dk-icon-control-default: var(--dk-icon-control-default-level-2);
  --dk-icon-control-hover: var(--dk-icon-control-hover-level-2);
  --dk-icon-control-active: var(--dk-icon-control-active-level-2);
  --dk-text-control-default: var(--dk-text-control-default-level-2);
  --dk-text-control-hover: var(--dk-text-control-hover-level-2);
  --dk-text-control-active: var(--dk-text-control-active-level-2);
}
/* Level 0 is the page again (16 Oct): a level-0 panel inside a deeper one,
   and the contents of a raised interactive host, take the page's values back. */
[data-theme] [data-surface="0"]:not([data-theme]),
[data-theme][data-surface="0"],
[data-theme] :where([data-interactive-fill="raised"]) > :not([data-surface], [data-theme]) {
  --dk-surface-control-default: var(--_reset-surface-control-default);
  --dk-surface-control-hover: var(--_reset-surface-control-hover);
  --dk-surface-control-active: var(--_reset-surface-control-active);
  --dk-icon-control-default: var(--_reset-icon-control-default);
  --dk-icon-control-hover: var(--_reset-icon-control-hover);
  --dk-icon-control-active: var(--_reset-icon-control-active);
  --dk-text-control-default: var(--_reset-text-control-default);
  --dk-text-control-hover: var(--_reset-text-control-hover);
  --dk-text-control-active: var(--_reset-text-control-active);
}
[data-theme="light"] [data-surface="raised"]:not([data-theme]):where(:not([data-tone])):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"] [data-tone="inverse"] [data-surface="raised"]:not([data-theme]):where(:not([data-tone])):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"][data-surface="raised"]:where(:not([data-tone])) {
  --dk-surface-control-default: var(--_reset-surface-control-default);
  --dk-surface-control-hover: var(--_reset-surface-control-hover);
  --dk-surface-control-active: var(--_reset-surface-control-active);
  --dk-icon-control-default: var(--_reset-icon-control-default);
  --dk-icon-control-hover: var(--_reset-icon-control-hover);
  --dk-icon-control-active: var(--_reset-icon-control-active);
  --dk-text-control-default: var(--_reset-text-control-default);
  --dk-text-control-hover: var(--_reset-text-control-hover);
  --dk-text-control-active: var(--_reset-text-control-active);
}

[data-theme="light"] {
  /* primary */
  --dk-surface-control-default-on-primary-subtle-level-0: var(--dk-color-primary-100);
  --dk-surface-control-hover-on-primary-subtle-level-0: var(--dk-color-primary-200);
  --dk-surface-control-active-on-primary-subtle-level-0: var(--dk-color-primary-300);
  --dk-border-control-default-on-primary-subtle-level-0: var(--dk-color-primary-200);
  --dk-border-control-hover-on-primary-subtle-level-0: var(--dk-color-primary-300);
  --dk-border-control-active-on-primary-subtle-level-0: var(--dk-color-primary-400);
  --dk-icon-control-disabled-on-primary-subtle-level-0: var(--dk-color-primary-300);
  --dk-surface-control-disabled-on-primary-subtle-level-0: var(--dk-color-primary-100);
  --dk-icon-control-default-on-primary-subtle-level-0: var(--dk-color-primary-700);
  --dk-icon-control-hover-on-primary-subtle-level-0: var(--dk-color-primary-800);
  --dk-icon-control-active-on-primary-subtle-level-0: var(--dk-color-primary-850);
  --dk-text-control-default-on-primary-subtle-level-0: var(--dk-color-primary-850);
  --dk-text-control-hover-on-primary-subtle-level-0: var(--dk-color-primary-800);
  --dk-text-control-active-on-primary-subtle-level-0: var(--dk-color-primary-850);
  --dk-text-control-disabled-on-primary-subtle-level-0: var(--dk-color-primary-400);
  --dk-surface-control-default-on-primary-subtle-level-1: var(--dk-color-primary-200);
  --dk-surface-control-hover-on-primary-subtle-level-1: var(--dk-color-primary-300);
  --dk-surface-control-active-on-primary-subtle-level-1: var(--dk-color-primary-400);
  --dk-border-control-default-on-primary-subtle-level-1: var(--dk-color-primary-300);
  --dk-border-control-hover-on-primary-subtle-level-1: var(--dk-color-primary-400);
  --dk-border-control-active-on-primary-subtle-level-1: var(--dk-color-primary-500);
  --dk-icon-control-disabled-on-primary-subtle-level-1: var(--dk-color-primary-400);
  --dk-surface-control-disabled-on-primary-subtle-level-1: var(--dk-color-primary-200);
  --dk-icon-control-default-on-primary-subtle-level-1: var(--dk-color-primary-800);
  --dk-icon-control-hover-on-primary-subtle-level-1: var(--dk-color-primary-850);
  --dk-icon-control-active-on-primary-subtle-level-1: var(--dk-color-primary-900);
  --dk-text-control-default-on-primary-subtle-level-1: var(--dk-color-primary-900);
  --dk-text-control-hover-on-primary-subtle-level-1: var(--dk-color-primary-850);
  --dk-text-control-active-on-primary-subtle-level-1: var(--dk-color-primary-900);
  --dk-text-control-disabled-on-primary-subtle-level-1: var(--dk-color-primary-500);
  --dk-surface-control-default-on-primary-subtle-level-2: var(--dk-color-primary-300);
  --dk-surface-control-hover-on-primary-subtle-level-2: var(--dk-color-primary-400);
  --dk-surface-control-active-on-primary-subtle-level-2: var(--dk-color-primary-500);
  --dk-border-control-default-on-primary-subtle-level-2: var(--dk-color-primary-400);
  --dk-border-control-hover-on-primary-subtle-level-2: var(--dk-color-primary-500);
  --dk-border-control-active-on-primary-subtle-level-2: var(--dk-color-primary-550);
  --dk-icon-control-disabled-on-primary-subtle-level-2: var(--dk-color-primary-500);
  --dk-surface-control-disabled-on-primary-subtle-level-2: var(--dk-color-primary-300);
  --dk-icon-control-default-on-primary-subtle-level-2: var(--dk-color-primary-850);
  --dk-icon-control-hover-on-primary-subtle-level-2: var(--dk-color-primary-900);
  --dk-icon-control-active-on-primary-subtle-level-2: var(--dk-color-primary-800);
  --dk-text-control-default-on-primary-subtle-level-2: var(--dk-color-primary-850);
  --dk-text-control-hover-on-primary-subtle-level-2: var(--dk-color-primary-900);
  --dk-text-control-active-on-primary-subtle-level-2: var(--dk-color-primary-900);
  --dk-text-control-disabled-on-primary-subtle-level-2: var(--dk-color-primary-550);
  --dk-surface-control-default-on-primary-solid: var(--dk-color-primary-650);
  --dk-surface-control-hover-on-primary-solid: var(--dk-color-primary-600);
  --dk-surface-control-active-on-primary-solid: var(--dk-color-primary-550);
  --dk-border-control-default-on-primary-solid: var(--dk-color-primary-600);
  --dk-border-control-hover-on-primary-solid: var(--dk-color-primary-550);
  --dk-border-control-active-on-primary-solid: var(--dk-color-primary-500);
  --dk-icon-control-disabled-on-primary-solid: var(--dk-color-primary-400);
  --dk-surface-control-disabled-on-primary-solid: var(--dk-color-primary-650);
  --dk-icon-control-default-on-primary-solid: var(--dk-color-primary-100);
  --dk-icon-control-hover-on-primary-solid: var(--dk-color-primary-50);
  --dk-icon-control-active-on-primary-solid: var(--dk-color-primary-25);
  --dk-text-control-default-on-primary-solid: var(--dk-color-primary-25);
  --dk-text-control-hover-on-primary-solid: var(--dk-color-primary-50);
  --dk-text-control-active-on-primary-solid: var(--dk-color-primary-25);
  --dk-text-control-disabled-on-primary-solid: var(--dk-color-primary-300);
  --dk-surface-control-default-on-primary-solid-level-1: var(--dk-color-primary-700);
  --dk-surface-control-hover-on-primary-solid-level-1: var(--dk-color-primary-650);
  --dk-surface-control-active-on-primary-solid-level-1: var(--dk-color-primary-600);
  --dk-border-control-default-on-primary-solid-level-1: var(--dk-color-primary-650);
  --dk-border-control-hover-on-primary-solid-level-1: var(--dk-color-primary-600);
  --dk-border-control-active-on-primary-solid-level-1: var(--dk-color-primary-550);
  --dk-icon-control-disabled-on-primary-solid-level-1: var(--dk-color-primary-500);
  --dk-surface-control-disabled-on-primary-solid-level-1: var(--dk-color-primary-700);
  --dk-icon-control-default-on-primary-solid-level-1: var(--dk-color-primary-200);
  --dk-icon-control-hover-on-primary-solid-level-1: var(--dk-color-primary-100);
  --dk-icon-control-active-on-primary-solid-level-1: var(--dk-color-primary-50);
  --dk-text-control-default-on-primary-solid-level-1: var(--dk-color-primary-50);
  --dk-text-control-hover-on-primary-solid-level-1: var(--dk-color-primary-100);
  --dk-text-control-active-on-primary-solid-level-1: var(--dk-color-primary-50);
  --dk-text-control-disabled-on-primary-solid-level-1: var(--dk-color-primary-400);
  --dk-surface-control-default-on-primary-solid-level-2: var(--dk-color-primary-850);
  --dk-surface-control-hover-on-primary-solid-level-2: var(--dk-color-primary-800);
  --dk-surface-control-active-on-primary-solid-level-2: var(--dk-color-primary-700);
  --dk-border-control-default-on-primary-solid-level-2: var(--dk-color-primary-800);
  --dk-border-control-hover-on-primary-solid-level-2: var(--dk-color-primary-700);
  --dk-border-control-active-on-primary-solid-level-2: var(--dk-color-primary-650);
  --dk-icon-control-disabled-on-primary-solid-level-2: var(--dk-color-primary-700);
  --dk-surface-control-disabled-on-primary-solid-level-2: var(--dk-color-primary-850);
  --dk-icon-control-default-on-primary-solid-level-2: var(--dk-color-primary-550);
  --dk-icon-control-hover-on-primary-solid-level-2: var(--dk-color-primary-500);
  --dk-icon-control-active-on-primary-solid-level-2: var(--dk-color-primary-300);
  --dk-text-control-default-on-primary-solid-level-2: var(--dk-color-primary-400);
  --dk-text-control-hover-on-primary-solid-level-2: var(--dk-color-primary-500);
  --dk-text-control-active-on-primary-solid-level-2: var(--dk-color-primary-300);
  --dk-text-control-disabled-on-primary-solid-level-2: var(--dk-color-primary-650);
  /* success */
  --dk-surface-control-default-on-success-subtle-level-0: var(--dk-color-primary-100);
  --dk-surface-control-hover-on-success-subtle-level-0: var(--dk-color-primary-200);
  --dk-surface-control-active-on-success-subtle-level-0: var(--dk-color-primary-300);
  --dk-border-control-default-on-success-subtle-level-0: var(--dk-color-primary-200);
  --dk-border-control-hover-on-success-subtle-level-0: var(--dk-color-primary-300);
  --dk-border-control-active-on-success-subtle-level-0: var(--dk-color-primary-400);
  --dk-icon-control-disabled-on-success-subtle-level-0: var(--dk-color-primary-300);
  --dk-surface-control-disabled-on-success-subtle-level-0: var(--dk-color-primary-100);
  --dk-icon-control-default-on-success-subtle-level-0: var(--dk-color-primary-700);
  --dk-icon-control-hover-on-success-subtle-level-0: var(--dk-color-primary-800);
  --dk-icon-control-active-on-success-subtle-level-0: var(--dk-color-primary-850);
  --dk-text-control-default-on-success-subtle-level-0: var(--dk-color-primary-850);
  --dk-text-control-hover-on-success-subtle-level-0: var(--dk-color-primary-800);
  --dk-text-control-active-on-success-subtle-level-0: var(--dk-color-primary-850);
  --dk-text-control-disabled-on-success-subtle-level-0: var(--dk-color-primary-400);
  --dk-surface-control-default-on-success-subtle-level-1: var(--dk-color-primary-200);
  --dk-surface-control-hover-on-success-subtle-level-1: var(--dk-color-primary-300);
  --dk-surface-control-active-on-success-subtle-level-1: var(--dk-color-primary-400);
  --dk-border-control-default-on-success-subtle-level-1: var(--dk-color-primary-300);
  --dk-border-control-hover-on-success-subtle-level-1: var(--dk-color-primary-400);
  --dk-border-control-active-on-success-subtle-level-1: var(--dk-color-primary-500);
  --dk-icon-control-disabled-on-success-subtle-level-1: var(--dk-color-primary-400);
  --dk-surface-control-disabled-on-success-subtle-level-1: var(--dk-color-primary-200);
  --dk-icon-control-default-on-success-subtle-level-1: var(--dk-color-primary-800);
  --dk-icon-control-hover-on-success-subtle-level-1: var(--dk-color-primary-850);
  --dk-icon-control-active-on-success-subtle-level-1: var(--dk-color-primary-900);
  --dk-text-control-default-on-success-subtle-level-1: var(--dk-color-primary-900);
  --dk-text-control-hover-on-success-subtle-level-1: var(--dk-color-primary-850);
  --dk-text-control-active-on-success-subtle-level-1: var(--dk-color-primary-900);
  --dk-text-control-disabled-on-success-subtle-level-1: var(--dk-color-primary-500);
  --dk-surface-control-default-on-success-subtle-level-2: var(--dk-color-primary-300);
  --dk-surface-control-hover-on-success-subtle-level-2: var(--dk-color-primary-400);
  --dk-surface-control-active-on-success-subtle-level-2: var(--dk-color-primary-500);
  --dk-border-control-default-on-success-subtle-level-2: var(--dk-color-primary-400);
  --dk-border-control-hover-on-success-subtle-level-2: var(--dk-color-primary-500);
  --dk-border-control-active-on-success-subtle-level-2: var(--dk-color-primary-550);
  --dk-icon-control-disabled-on-success-subtle-level-2: var(--dk-color-primary-500);
  --dk-surface-control-disabled-on-success-subtle-level-2: var(--dk-color-primary-300);
  --dk-icon-control-default-on-success-subtle-level-2: var(--dk-color-primary-850);
  --dk-icon-control-hover-on-success-subtle-level-2: var(--dk-color-primary-900);
  --dk-icon-control-active-on-success-subtle-level-2: var(--dk-color-primary-800);
  --dk-text-control-default-on-success-subtle-level-2: var(--dk-color-primary-850);
  --dk-text-control-hover-on-success-subtle-level-2: var(--dk-color-primary-900);
  --dk-text-control-active-on-success-subtle-level-2: var(--dk-color-primary-900);
  --dk-text-control-disabled-on-success-subtle-level-2: var(--dk-color-primary-550);
  --dk-surface-control-default-on-success-solid: var(--dk-color-primary-650);
  --dk-surface-control-hover-on-success-solid: var(--dk-color-primary-600);
  --dk-surface-control-active-on-success-solid: var(--dk-color-primary-550);
  --dk-border-control-default-on-success-solid: var(--dk-color-primary-600);
  --dk-border-control-hover-on-success-solid: var(--dk-color-primary-550);
  --dk-border-control-active-on-success-solid: var(--dk-color-primary-500);
  --dk-icon-control-disabled-on-success-solid: var(--dk-color-primary-400);
  --dk-surface-control-disabled-on-success-solid: var(--dk-color-primary-650);
  --dk-icon-control-default-on-success-solid: var(--dk-color-primary-100);
  --dk-icon-control-hover-on-success-solid: var(--dk-color-primary-50);
  --dk-icon-control-active-on-success-solid: var(--dk-color-primary-25);
  --dk-text-control-default-on-success-solid: var(--dk-color-primary-25);
  --dk-text-control-hover-on-success-solid: var(--dk-color-primary-50);
  --dk-text-control-active-on-success-solid: var(--dk-color-primary-25);
  --dk-text-control-disabled-on-success-solid: var(--dk-color-primary-300);
  --dk-surface-control-default-on-success-solid-level-1: var(--dk-color-primary-700);
  --dk-surface-control-hover-on-success-solid-level-1: var(--dk-color-primary-650);
  --dk-surface-control-active-on-success-solid-level-1: var(--dk-color-primary-600);
  --dk-border-control-default-on-success-solid-level-1: var(--dk-color-primary-650);
  --dk-border-control-hover-on-success-solid-level-1: var(--dk-color-primary-600);
  --dk-border-control-active-on-success-solid-level-1: var(--dk-color-primary-550);
  --dk-icon-control-disabled-on-success-solid-level-1: var(--dk-color-primary-500);
  --dk-surface-control-disabled-on-success-solid-level-1: var(--dk-color-primary-700);
  --dk-icon-control-default-on-success-solid-level-1: var(--dk-color-primary-200);
  --dk-icon-control-hover-on-success-solid-level-1: var(--dk-color-primary-100);
  --dk-icon-control-active-on-success-solid-level-1: var(--dk-color-primary-50);
  --dk-text-control-default-on-success-solid-level-1: var(--dk-color-primary-50);
  --dk-text-control-hover-on-success-solid-level-1: var(--dk-color-primary-100);
  --dk-text-control-active-on-success-solid-level-1: var(--dk-color-primary-50);
  --dk-text-control-disabled-on-success-solid-level-1: var(--dk-color-primary-400);
  --dk-surface-control-default-on-success-solid-level-2: var(--dk-color-primary-850);
  --dk-surface-control-hover-on-success-solid-level-2: var(--dk-color-primary-800);
  --dk-surface-control-active-on-success-solid-level-2: var(--dk-color-primary-700);
  --dk-border-control-default-on-success-solid-level-2: var(--dk-color-primary-800);
  --dk-border-control-hover-on-success-solid-level-2: var(--dk-color-primary-700);
  --dk-border-control-active-on-success-solid-level-2: var(--dk-color-primary-650);
  --dk-icon-control-disabled-on-success-solid-level-2: var(--dk-color-primary-700);
  --dk-surface-control-disabled-on-success-solid-level-2: var(--dk-color-primary-850);
  --dk-icon-control-default-on-success-solid-level-2: var(--dk-color-primary-550);
  --dk-icon-control-hover-on-success-solid-level-2: var(--dk-color-primary-500);
  --dk-icon-control-active-on-success-solid-level-2: var(--dk-color-primary-300);
  --dk-text-control-default-on-success-solid-level-2: var(--dk-color-primary-400);
  --dk-text-control-hover-on-success-solid-level-2: var(--dk-color-primary-500);
  --dk-text-control-active-on-success-solid-level-2: var(--dk-color-primary-300);
  --dk-text-control-disabled-on-success-solid-level-2: var(--dk-color-primary-650);
  /* error */
  --dk-surface-control-default-on-error-subtle-level-0: var(--dk-color-error-100);
  --dk-surface-control-hover-on-error-subtle-level-0: var(--dk-color-error-200);
  --dk-surface-control-active-on-error-subtle-level-0: var(--dk-color-error-300);
  --dk-border-control-default-on-error-subtle-level-0: var(--dk-color-error-200);
  --dk-border-control-hover-on-error-subtle-level-0: var(--dk-color-error-300);
  --dk-border-control-active-on-error-subtle-level-0: var(--dk-color-error-400);
  --dk-icon-control-disabled-on-error-subtle-level-0: var(--dk-color-error-300);
  --dk-surface-control-disabled-on-error-subtle-level-0: var(--dk-color-error-100);
  --dk-icon-control-default-on-error-subtle-level-0: var(--dk-color-error-800);
  --dk-icon-control-hover-on-error-subtle-level-0: var(--dk-color-error-900);
  --dk-icon-control-active-on-error-subtle-level-0: var(--dk-color-error-700);
  --dk-text-control-default-on-error-subtle-level-0: var(--dk-color-error-800);
  --dk-text-control-hover-on-error-subtle-level-0: var(--dk-color-error-900);
  --dk-text-control-active-on-error-subtle-level-0: var(--dk-color-error-800);
  --dk-text-control-disabled-on-error-subtle-level-0: var(--dk-color-error-400);
  --dk-surface-control-default-on-error-subtle-level-1: var(--dk-color-error-50);
  --dk-surface-control-hover-on-error-subtle-level-1: var(--dk-color-error-25);
  --dk-surface-control-active-on-error-subtle-level-1: var(--dk-color-error-200);
  --dk-border-control-default-on-error-subtle-level-1: var(--dk-color-error-25);
  --dk-border-control-hover-on-error-subtle-level-1: var(--dk-color-error-300);
  --dk-border-control-active-on-error-subtle-level-1: var(--dk-color-error-400);
  --dk-icon-control-disabled-on-error-subtle-level-1: var(--dk-color-error-300);
  --dk-surface-control-disabled-on-error-subtle-level-1: var(--dk-color-error-50);
  --dk-icon-control-default-on-error-subtle-level-1: var(--dk-color-error-800);
  --dk-icon-control-hover-on-error-subtle-level-1: var(--dk-color-error-900);
  --dk-icon-control-active-on-error-subtle-level-1: var(--dk-color-error-700);
  --dk-text-control-default-on-error-subtle-level-1: var(--dk-color-error-800);
  --dk-text-control-hover-on-error-subtle-level-1: var(--dk-color-error-900);
  --dk-text-control-active-on-error-subtle-level-1: var(--dk-color-error-800);
  --dk-text-control-disabled-on-error-subtle-level-1: var(--dk-color-error-400);
  --dk-surface-control-default-on-error-subtle-level-2: var(--dk-color-error-100);
  --dk-surface-control-hover-on-error-subtle-level-2: var(--dk-color-error-50);
  --dk-surface-control-active-on-error-subtle-level-2: var(--dk-color-error-25);
  --dk-border-control-default-on-error-subtle-level-2: var(--dk-color-error-25);
  --dk-border-control-hover-on-error-subtle-level-2: var(--dk-color-error-100);
  --dk-border-control-active-on-error-subtle-level-2: var(--dk-color-error-400);
  --dk-icon-control-disabled-on-error-subtle-level-2: var(--dk-color-error-300);
  --dk-surface-control-disabled-on-error-subtle-level-2: var(--dk-color-error-100);
  --dk-icon-control-default-on-error-subtle-level-2: var(--dk-color-error-900);
  --dk-icon-control-hover-on-error-subtle-level-2: var(--dk-color-error-800);
  --dk-icon-control-active-on-error-subtle-level-2: var(--dk-color-error-700);
  --dk-text-control-default-on-error-subtle-level-2: var(--dk-color-error-900);
  --dk-text-control-hover-on-error-subtle-level-2: var(--dk-color-error-800);
  --dk-text-control-active-on-error-subtle-level-2: var(--dk-color-error-700);
  --dk-text-control-disabled-on-error-subtle-level-2: var(--dk-color-error-400);
  --dk-surface-control-default-on-error-solid: var(--dk-color-error-650);
  --dk-surface-control-hover-on-error-solid: var(--dk-color-error-600);
  --dk-surface-control-active-on-error-solid: var(--dk-color-error-550);
  --dk-border-control-default-on-error-solid: var(--dk-color-error-550);
  --dk-border-control-hover-on-error-solid: var(--dk-color-error-500);
  --dk-border-control-active-on-error-solid: var(--dk-color-error-400);
  --dk-icon-control-disabled-on-error-solid: var(--dk-color-error-400);
  --dk-surface-control-disabled-on-error-solid: var(--dk-color-error-650);
  --dk-icon-control-default-on-error-solid: var(--dk-color-error-100);
  --dk-icon-control-hover-on-error-solid: var(--dk-color-error-50);
  --dk-icon-control-active-on-error-solid: var(--dk-color-error-25);
  --dk-text-control-default-on-error-solid: var(--dk-color-error-25);
  --dk-text-control-hover-on-error-solid: var(--dk-color-error-50);
  --dk-text-control-active-on-error-solid: var(--dk-color-error-25);
  --dk-text-control-disabled-on-error-solid: var(--dk-color-error-300);
  --dk-surface-control-default-on-error-solid-level-1: var(--dk-color-error-700);
  --dk-surface-control-hover-on-error-solid-level-1: var(--dk-color-error-650);
  --dk-surface-control-active-on-error-solid-level-1: var(--dk-color-error-600);
  --dk-border-control-default-on-error-solid-level-1: var(--dk-color-error-650);
  --dk-border-control-hover-on-error-solid-level-1: var(--dk-color-error-600);
  --dk-border-control-active-on-error-solid-level-1: var(--dk-color-error-550);
  --dk-icon-control-disabled-on-error-solid-level-1: var(--dk-color-error-400);
  --dk-surface-control-disabled-on-error-solid-level-1: var(--dk-color-error-700);
  --dk-icon-control-default-on-error-solid-level-1: var(--dk-color-error-200);
  --dk-icon-control-hover-on-error-solid-level-1: var(--dk-color-error-100);
  --dk-icon-control-active-on-error-solid-level-1: var(--dk-color-error-50);
  --dk-text-control-default-on-error-solid-level-1: var(--dk-color-error-50);
  --dk-text-control-hover-on-error-solid-level-1: var(--dk-color-error-100);
  --dk-text-control-active-on-error-solid-level-1: var(--dk-color-error-50);
  --dk-text-control-disabled-on-error-solid-level-1: var(--dk-color-error-300);
  --dk-surface-control-default-on-error-solid-level-2: var(--dk-color-error-800);
  --dk-surface-control-hover-on-error-solid-level-2: var(--dk-color-error-700);
  --dk-surface-control-active-on-error-solid-level-2: var(--dk-color-error-650);
  --dk-border-control-default-on-error-solid-level-2: var(--dk-color-error-700);
  --dk-border-control-hover-on-error-solid-level-2: var(--dk-color-error-650);
  --dk-border-control-active-on-error-solid-level-2: var(--dk-color-error-600);
  --dk-icon-control-disabled-on-error-solid-level-2: var(--dk-color-error-500);
  --dk-surface-control-disabled-on-error-solid-level-2: var(--dk-color-error-800);
  --dk-icon-control-default-on-error-solid-level-2: var(--dk-color-error-300);
  --dk-icon-control-hover-on-error-solid-level-2: var(--dk-color-error-200);
  --dk-icon-control-active-on-error-solid-level-2: var(--dk-color-error-100);
  --dk-text-control-default-on-error-solid-level-2: var(--dk-color-error-100);
  --dk-text-control-hover-on-error-solid-level-2: var(--dk-color-error-200);
  --dk-text-control-active-on-error-solid-level-2: var(--dk-color-error-100);
  --dk-text-control-disabled-on-error-solid-level-2: var(--dk-color-error-400);
  /* warning */
  --dk-surface-control-default-on-warning-subtle-level-0: var(--dk-color-warning-100);
  --dk-surface-control-hover-on-warning-subtle-level-0: var(--dk-color-warning-200);
  --dk-surface-control-active-on-warning-subtle-level-0: var(--dk-color-warning-300);
  --dk-border-control-default-on-warning-subtle-level-0: var(--dk-color-warning-200);
  --dk-border-control-hover-on-warning-subtle-level-0: var(--dk-color-warning-400);
  --dk-border-control-active-on-warning-subtle-level-0: var(--dk-color-warning-500);
  --dk-icon-control-disabled-on-warning-subtle-level-0: var(--dk-color-warning-300);
  --dk-surface-control-disabled-on-warning-subtle-level-0: var(--dk-color-warning-100);
  --dk-icon-control-default-on-warning-subtle-level-0: var(--dk-color-warning-800);
  --dk-icon-control-hover-on-warning-subtle-level-0: var(--dk-color-warning-900);
  --dk-icon-control-active-on-warning-subtle-level-0: var(--dk-color-warning-700);
  --dk-text-control-default-on-warning-subtle-level-0: var(--dk-color-warning-800);
  --dk-text-control-hover-on-warning-subtle-level-0: var(--dk-color-warning-900);
  --dk-text-control-active-on-warning-subtle-level-0: var(--dk-color-warning-800);
  --dk-text-control-disabled-on-warning-subtle-level-0: var(--dk-color-warning-400);
  --dk-surface-control-default-on-warning-subtle-level-1: var(--dk-color-warning-200);
  --dk-surface-control-hover-on-warning-subtle-level-1: var(--dk-color-warning-300);
  --dk-surface-control-active-on-warning-subtle-level-1: var(--dk-color-warning-400);
  --dk-border-control-default-on-warning-subtle-level-1: var(--dk-color-warning-300);
  --dk-border-control-hover-on-warning-subtle-level-1: var(--dk-color-warning-400);
  --dk-border-control-active-on-warning-subtle-level-1: var(--dk-color-warning-500);
  --dk-icon-control-disabled-on-warning-subtle-level-1: var(--dk-color-warning-400);
  --dk-surface-control-disabled-on-warning-subtle-level-1: var(--dk-color-warning-200);
  --dk-icon-control-default-on-warning-subtle-level-1: var(--dk-color-warning-800);
  --dk-icon-control-hover-on-warning-subtle-level-1: var(--dk-color-warning-900);
  --dk-icon-control-active-on-warning-subtle-level-1: var(--dk-color-warning-800);
  --dk-text-control-default-on-warning-subtle-level-1: var(--dk-color-warning-800);
  --dk-text-control-hover-on-warning-subtle-level-1: var(--dk-color-warning-900);
  --dk-text-control-active-on-warning-subtle-level-1: var(--dk-color-warning-800);
  --dk-text-control-disabled-on-warning-subtle-level-1: var(--dk-color-warning-500);
  --dk-surface-control-default-on-warning-subtle-level-2: var(--dk-color-warning-300);
  --dk-surface-control-hover-on-warning-subtle-level-2: var(--dk-color-warning-400);
  --dk-surface-control-active-on-warning-subtle-level-2: var(--dk-color-warning-550);
  --dk-border-control-default-on-warning-subtle-level-2: var(--dk-color-warning-400);
  --dk-border-control-hover-on-warning-subtle-level-2: var(--dk-color-warning-500);
  --dk-border-control-active-on-warning-subtle-level-2: var(--dk-color-warning-600);
  --dk-icon-control-disabled-on-warning-subtle-level-2: var(--dk-color-warning-500);
  --dk-surface-control-disabled-on-warning-subtle-level-2: var(--dk-color-warning-300);
  --dk-icon-control-default-on-warning-subtle-level-2: var(--dk-color-warning-800);
  --dk-icon-control-hover-on-warning-subtle-level-2: var(--dk-color-warning-900);
  --dk-icon-control-active-on-warning-subtle-level-2: var(--dk-color-warning-800);
  --dk-text-control-default-on-warning-subtle-level-2: var(--dk-color-warning-800);
  --dk-text-control-hover-on-warning-subtle-level-2: var(--dk-color-warning-900);
  --dk-text-control-active-on-warning-subtle-level-2: var(--dk-color-warning-900);
  --dk-text-control-disabled-on-warning-subtle-level-2: var(--dk-color-warning-550);
  --dk-surface-control-default-on-warning-solid: var(--dk-color-warning-650);
  --dk-surface-control-hover-on-warning-solid: var(--dk-color-warning-600);
  --dk-surface-control-active-on-warning-solid: var(--dk-color-warning-600);
  --dk-border-control-default-on-warning-solid: var(--dk-color-warning-600);
  --dk-border-control-hover-on-warning-solid: var(--dk-color-warning-550);
  --dk-border-control-active-on-warning-solid: var(--dk-color-warning-500);
  --dk-icon-control-disabled-on-warning-solid: var(--dk-color-warning-400);
  --dk-surface-control-disabled-on-warning-solid: var(--dk-color-warning-650);
  --dk-icon-control-default-on-warning-solid: var(--dk-color-warning-100);
  --dk-icon-control-hover-on-warning-solid: var(--dk-color-warning-50);
  --dk-icon-control-active-on-warning-solid: var(--dk-color-warning-25);
  --dk-text-control-default-on-warning-solid: var(--dk-color-warning-25);
  --dk-text-control-hover-on-warning-solid: var(--dk-color-warning-50);
  --dk-text-control-active-on-warning-solid: var(--dk-color-warning-25);
  --dk-text-control-disabled-on-warning-solid: var(--dk-color-warning-300);
  --dk-surface-control-default-on-warning-solid-level-1: var(--dk-color-warning-700);
  --dk-surface-control-hover-on-warning-solid-level-1: var(--dk-color-warning-650);
  --dk-surface-control-active-on-warning-solid-level-1: var(--dk-color-warning-600);
  --dk-border-control-default-on-warning-solid-level-1: var(--dk-color-warning-650);
  --dk-border-control-hover-on-warning-solid-level-1: var(--dk-color-warning-600);
  --dk-border-control-active-on-warning-solid-level-1: var(--dk-color-warning-550);
  --dk-icon-control-disabled-on-warning-solid-level-1: var(--dk-color-warning-550);
  --dk-surface-control-disabled-on-warning-solid-level-1: var(--dk-color-warning-700);
  --dk-icon-control-default-on-warning-solid-level-1: var(--dk-color-warning-200);
  --dk-icon-control-hover-on-warning-solid-level-1: var(--dk-color-warning-100);
  --dk-icon-control-active-on-warning-solid-level-1: var(--dk-color-warning-50);
  --dk-text-control-default-on-warning-solid-level-1: var(--dk-color-warning-50);
  --dk-text-control-hover-on-warning-solid-level-1: var(--dk-color-warning-100);
  --dk-text-control-active-on-warning-solid-level-1: var(--dk-color-warning-50);
  --dk-text-control-disabled-on-warning-solid-level-1: var(--dk-color-warning-500);
  --dk-surface-control-default-on-warning-solid-level-2: var(--dk-color-warning-800);
  --dk-surface-control-hover-on-warning-solid-level-2: var(--dk-color-warning-700);
  --dk-surface-control-active-on-warning-solid-level-2: var(--dk-color-warning-700);
  --dk-border-control-default-on-warning-solid-level-2: var(--dk-color-warning-700);
  --dk-border-control-hover-on-warning-solid-level-2: var(--dk-color-warning-650);
  --dk-border-control-active-on-warning-solid-level-2: var(--dk-color-warning-600);
  --dk-icon-control-disabled-on-warning-solid-level-2: var(--dk-color-warning-650);
  --dk-surface-control-disabled-on-warning-solid-level-2: var(--dk-color-warning-800);
  --dk-icon-control-default-on-warning-solid-level-2: var(--dk-color-warning-500);
  --dk-icon-control-hover-on-warning-solid-level-2: var(--dk-color-warning-300);
  --dk-icon-control-active-on-warning-solid-level-2: var(--dk-color-warning-200);
  --dk-text-control-default-on-warning-solid-level-2: var(--dk-color-warning-400);
  --dk-text-control-hover-on-warning-solid-level-2: var(--dk-color-warning-300);
  --dk-text-control-active-on-warning-solid-level-2: var(--dk-color-warning-200);
  --dk-text-control-disabled-on-warning-solid-level-2: var(--dk-color-warning-600);
  /* information */
  --dk-surface-control-default-on-information-subtle-level-0: var(--dk-color-information-100);
  --dk-surface-control-hover-on-information-subtle-level-0: var(--dk-color-information-200);
  --dk-surface-control-active-on-information-subtle-level-0: var(--dk-color-information-300);
  --dk-border-control-default-on-information-subtle-level-0: var(--dk-color-information-200);
  --dk-border-control-hover-on-information-subtle-level-0: var(--dk-color-information-300);
  --dk-border-control-active-on-information-subtle-level-0: var(--dk-color-information-400);
  --dk-icon-control-disabled-on-information-subtle-level-0: var(--dk-color-information-300);
  --dk-surface-control-disabled-on-information-subtle-level-0: var(--dk-color-information-100);
  --dk-icon-control-default-on-information-subtle-level-0: var(--dk-color-information-800);
  --dk-icon-control-hover-on-information-subtle-level-0: var(--dk-color-information-900);
  --dk-icon-control-active-on-information-subtle-level-0: var(--dk-color-information-700);
  --dk-text-control-default-on-information-subtle-level-0: var(--dk-color-information-800);
  --dk-text-control-hover-on-information-subtle-level-0: var(--dk-color-information-900);
  --dk-text-control-active-on-information-subtle-level-0: var(--dk-color-information-800);
  --dk-text-control-disabled-on-information-subtle-level-0: var(--dk-color-information-400);
  --dk-surface-control-default-on-information-subtle-level-1: var(--dk-color-information-50);
  --dk-surface-control-hover-on-information-subtle-level-1: var(--dk-color-information-25);
  --dk-surface-control-active-on-information-subtle-level-1: var(--dk-color-information-200);
  --dk-border-control-default-on-information-subtle-level-1: var(--dk-color-information-25);
  --dk-border-control-hover-on-information-subtle-level-1: var(--dk-color-information-300);
  --dk-border-control-active-on-information-subtle-level-1: var(--dk-color-information-400);
  --dk-icon-control-disabled-on-information-subtle-level-1: var(--dk-color-information-300);
  --dk-surface-control-disabled-on-information-subtle-level-1: var(--dk-color-information-50);
  --dk-icon-control-default-on-information-subtle-level-1: var(--dk-color-information-800);
  --dk-icon-control-hover-on-information-subtle-level-1: var(--dk-color-information-900);
  --dk-icon-control-active-on-information-subtle-level-1: var(--dk-color-information-700);
  --dk-text-control-default-on-information-subtle-level-1: var(--dk-color-information-800);
  --dk-text-control-hover-on-information-subtle-level-1: var(--dk-color-information-900);
  --dk-text-control-active-on-information-subtle-level-1: var(--dk-color-information-800);
  --dk-text-control-disabled-on-information-subtle-level-1: var(--dk-color-information-400);
  --dk-surface-control-default-on-information-subtle-level-2: var(--dk-color-information-100);
  --dk-surface-control-hover-on-information-subtle-level-2: var(--dk-color-information-50);
  --dk-surface-control-active-on-information-subtle-level-2: var(--dk-color-information-25);
  --dk-border-control-default-on-information-subtle-level-2: var(--dk-color-information-25);
  --dk-border-control-hover-on-information-subtle-level-2: var(--dk-color-information-100);
  --dk-border-control-active-on-information-subtle-level-2: var(--dk-color-information-400);
  --dk-icon-control-disabled-on-information-subtle-level-2: var(--dk-color-information-300);
  --dk-surface-control-disabled-on-information-subtle-level-2: var(--dk-color-information-100);
  --dk-icon-control-default-on-information-subtle-level-2: var(--dk-color-information-800);
  --dk-icon-control-hover-on-information-subtle-level-2: var(--dk-color-information-900);
  --dk-icon-control-active-on-information-subtle-level-2: var(--dk-color-information-700);
  --dk-text-control-default-on-information-subtle-level-2: var(--dk-color-information-800);
  --dk-text-control-hover-on-information-subtle-level-2: var(--dk-color-information-900);
  --dk-text-control-active-on-information-subtle-level-2: var(--dk-color-information-700);
  --dk-text-control-disabled-on-information-subtle-level-2: var(--dk-color-information-400);
  --dk-surface-control-default-on-information-solid: var(--dk-color-information-650);
  --dk-surface-control-hover-on-information-solid: var(--dk-color-information-600);
  --dk-surface-control-active-on-information-solid: var(--dk-color-information-550);
  --dk-border-control-default-on-information-solid: var(--dk-color-information-550);
  --dk-border-control-hover-on-information-solid: var(--dk-color-information-500);
  --dk-border-control-active-on-information-solid: var(--dk-color-information-400);
  --dk-icon-control-disabled-on-information-solid: var(--dk-color-information-400);
  --dk-surface-control-disabled-on-information-solid: var(--dk-color-information-650);
  --dk-icon-control-default-on-information-solid: var(--dk-color-information-200);
  --dk-icon-control-hover-on-information-solid: var(--dk-color-information-100);
  --dk-icon-control-active-on-information-solid: var(--dk-color-information-50);
  --dk-text-control-default-on-information-solid: var(--dk-color-information-50);
  --dk-text-control-hover-on-information-solid: var(--dk-color-information-100);
  --dk-text-control-active-on-information-solid: var(--dk-color-information-50);
  --dk-text-control-disabled-on-information-solid: var(--dk-color-information-300);
  --dk-surface-control-default-on-information-solid-level-1: var(--dk-color-information-700);
  --dk-surface-control-hover-on-information-solid-level-1: var(--dk-color-information-650);
  --dk-surface-control-active-on-information-solid-level-1: var(--dk-color-information-600);
  --dk-border-control-default-on-information-solid-level-1: var(--dk-color-information-650);
  --dk-border-control-hover-on-information-solid-level-1: var(--dk-color-information-600);
  --dk-border-control-active-on-information-solid-level-1: var(--dk-color-information-550);
  --dk-icon-control-disabled-on-information-solid-level-1: var(--dk-color-information-400);
  --dk-surface-control-disabled-on-information-solid-level-1: var(--dk-color-information-700);
  --dk-icon-control-default-on-information-solid-level-1: var(--dk-color-information-200);
  --dk-icon-control-hover-on-information-solid-level-1: var(--dk-color-information-100);
  --dk-icon-control-active-on-information-solid-level-1: var(--dk-color-information-50);
  --dk-text-control-default-on-information-solid-level-1: var(--dk-color-information-50);
  --dk-text-control-hover-on-information-solid-level-1: var(--dk-color-information-100);
  --dk-text-control-active-on-information-solid-level-1: var(--dk-color-information-50);
  --dk-text-control-disabled-on-information-solid-level-1: var(--dk-color-information-300);
  --dk-surface-control-default-on-information-solid-level-2: var(--dk-color-information-800);
  --dk-surface-control-hover-on-information-solid-level-2: var(--dk-color-information-700);
  --dk-surface-control-active-on-information-solid-level-2: var(--dk-color-information-650);
  --dk-border-control-default-on-information-solid-level-2: var(--dk-color-information-700);
  --dk-border-control-hover-on-information-solid-level-2: var(--dk-color-information-650);
  --dk-border-control-active-on-information-solid-level-2: var(--dk-color-information-600);
  --dk-icon-control-disabled-on-information-solid-level-2: var(--dk-color-information-550);
  --dk-surface-control-disabled-on-information-solid-level-2: var(--dk-color-information-800);
  --dk-icon-control-default-on-information-solid-level-2: var(--dk-color-information-300);
  --dk-icon-control-hover-on-information-solid-level-2: var(--dk-color-information-200);
  --dk-icon-control-active-on-information-solid-level-2: var(--dk-color-information-100);
  --dk-text-control-default-on-information-solid-level-2: var(--dk-color-information-100);
  --dk-text-control-hover-on-information-solid-level-2: var(--dk-color-information-200);
  --dk-text-control-active-on-information-solid-level-2: var(--dk-color-information-100);
  --dk-text-control-disabled-on-information-solid-level-2: var(--dk-color-information-500);
  /* inverse */
  --dk-surface-control-default-on-inverse-subtle-level-0: var(--dk-color-neutral-1000);
  --dk-surface-control-default-on-inverse-subtle-level-1: var(--dk-color-neutral-900);
  --dk-surface-control-default-on-inverse-subtle-level-2: var(--dk-color-neutral-800);
  --dk-surface-control-default-on-inverse-solid: var(--dk-color-neutral-1000);
  --dk-surface-control-default-on-inverse-solid-level-1: var(--dk-color-neutral-900);
  --dk-surface-control-default-on-inverse-solid-level-2: var(--dk-color-neutral-800);
  --dk-surface-control-hover-on-inverse-subtle-level-0: var(--dk-color-neutral-900);
  --dk-surface-control-hover-on-inverse-subtle-level-1: var(--dk-color-neutral-800);
  --dk-surface-control-hover-on-inverse-subtle-level-2: var(--dk-color-neutral-700);
  --dk-surface-control-hover-on-inverse-solid: var(--dk-color-neutral-900);
  --dk-surface-control-hover-on-inverse-solid-level-1: var(--dk-color-neutral-800);
  --dk-surface-control-hover-on-inverse-solid-level-2: var(--dk-color-neutral-700);
  --dk-surface-control-active-on-inverse-subtle-level-0: var(--dk-color-neutral-800);
  --dk-surface-control-active-on-inverse-subtle-level-1: var(--dk-color-neutral-700);
  --dk-surface-control-active-on-inverse-subtle-level-2: var(--dk-color-neutral-600);
  --dk-surface-control-active-on-inverse-solid: var(--dk-color-neutral-800);
  --dk-surface-control-active-on-inverse-solid-level-1: var(--dk-color-neutral-700);
  --dk-surface-control-active-on-inverse-solid-level-2: var(--dk-color-neutral-600);
  --dk-border-control-default-on-inverse-subtle-level-0: var(--dk-color-neutral-800);
  --dk-border-control-default-on-inverse-subtle-level-1: var(--dk-color-neutral-800);
  --dk-border-control-default-on-inverse-subtle-level-2: var(--dk-color-neutral-700);
  --dk-border-control-default-on-inverse-solid: var(--dk-color-neutral-800);
  --dk-border-control-default-on-inverse-solid-level-1: var(--dk-color-neutral-800);
  --dk-border-control-default-on-inverse-solid-level-2: var(--dk-color-neutral-700);
  --dk-border-control-hover-on-inverse-subtle-level-0: var(--dk-color-neutral-700);
  --dk-border-control-hover-on-inverse-subtle-level-1: var(--dk-color-neutral-700);
  --dk-border-control-hover-on-inverse-subtle-level-2: var(--dk-color-neutral-600);
  --dk-border-control-hover-on-inverse-solid: var(--dk-color-neutral-700);
  --dk-border-control-hover-on-inverse-solid-level-1: var(--dk-color-neutral-700);
  --dk-border-control-hover-on-inverse-solid-level-2: var(--dk-color-neutral-600);
  --dk-border-control-active-on-inverse-subtle-level-0: var(--dk-color-neutral-600);
  --dk-border-control-active-on-inverse-subtle-level-1: var(--dk-color-neutral-600);
  --dk-border-control-active-on-inverse-subtle-level-2: var(--dk-color-neutral-500);
  --dk-border-control-active-on-inverse-solid: var(--dk-color-neutral-600);
  --dk-border-control-active-on-inverse-solid-level-1: var(--dk-color-neutral-600);
  --dk-border-control-active-on-inverse-solid-level-2: var(--dk-color-neutral-500);
  --dk-icon-control-default-on-inverse-subtle-level-0: var(--dk-color-neutral-200);
  --dk-icon-control-default-on-inverse-subtle-level-1: var(--dk-color-neutral-200);
  --dk-icon-control-default-on-inverse-subtle-level-2: var(--dk-color-neutral-100);
  --dk-icon-control-default-on-inverse-solid: var(--dk-color-neutral-200);
  --dk-icon-control-default-on-inverse-solid-level-1: var(--dk-color-neutral-200);
  --dk-icon-control-default-on-inverse-solid-level-2: var(--dk-color-neutral-100);
  --dk-icon-control-hover-on-inverse-subtle-level-0: var(--dk-color-neutral-100);
  --dk-icon-control-hover-on-inverse-subtle-level-1: var(--dk-color-neutral-100);
  --dk-icon-control-hover-on-inverse-subtle-level-2: var(--dk-color-neutral-50);
  --dk-icon-control-hover-on-inverse-solid: var(--dk-color-neutral-100);
  --dk-icon-control-hover-on-inverse-solid-level-1: var(--dk-color-neutral-100);
  --dk-icon-control-hover-on-inverse-solid-level-2: var(--dk-color-neutral-50);
  --dk-icon-control-active-on-inverse-subtle-level-0: var(--dk-color-neutral-50);
  --dk-icon-control-active-on-inverse-subtle-level-1: var(--dk-color-neutral-50);
  --dk-icon-control-active-on-inverse-subtle-level-2: var(--dk-color-neutral-25);
  --dk-icon-control-active-on-inverse-solid: var(--dk-color-neutral-50);
  --dk-icon-control-active-on-inverse-solid-level-1: var(--dk-color-neutral-50);
  --dk-icon-control-active-on-inverse-solid-level-2: var(--dk-color-neutral-25);
  --dk-text-control-default-on-inverse-subtle-level-0: var(--dk-color-neutral-200);
  --dk-text-control-default-on-inverse-subtle-level-1: var(--dk-color-neutral-200);
  --dk-text-control-default-on-inverse-subtle-level-2: var(--dk-color-neutral-100);
  --dk-text-control-default-on-inverse-solid: var(--dk-color-neutral-200);
  --dk-text-control-default-on-inverse-solid-level-1: var(--dk-color-neutral-200);
  --dk-text-control-default-on-inverse-solid-level-2: var(--dk-color-neutral-100);
  --dk-text-control-hover-on-inverse-subtle-level-0: var(--dk-color-neutral-100);
  --dk-text-control-hover-on-inverse-subtle-level-1: var(--dk-color-neutral-100);
  --dk-text-control-hover-on-inverse-subtle-level-2: var(--dk-color-neutral-50);
  --dk-text-control-hover-on-inverse-solid: var(--dk-color-neutral-100);
  --dk-text-control-hover-on-inverse-solid-level-1: var(--dk-color-neutral-100);
  --dk-text-control-hover-on-inverse-solid-level-2: var(--dk-color-neutral-50);
  --dk-text-control-active-on-inverse-subtle-level-0: var(--dk-color-neutral-50);
  --dk-text-control-active-on-inverse-subtle-level-1: var(--dk-color-neutral-50);
  --dk-text-control-active-on-inverse-subtle-level-2: var(--dk-color-neutral-25);
  --dk-text-control-active-on-inverse-solid: var(--dk-color-neutral-50);
  --dk-text-control-active-on-inverse-solid-level-1: var(--dk-color-neutral-50);
  --dk-text-control-active-on-inverse-solid-level-2: var(--dk-color-neutral-25);
  --dk-icon-control-disabled-on-inverse-subtle-level-0: var(--dk-icon-disabled-subtle);
  --dk-text-control-disabled-on-inverse-subtle-level-0: var(--dk-text-disabled-subtle);
  --dk-surface-control-disabled-on-inverse-subtle-level-0: var(--dk-surface-disabled-subtle);
  --dk-icon-control-disabled-on-inverse-subtle-level-1: var(--dk-icon-disabled-subtle);
  --dk-text-control-disabled-on-inverse-subtle-level-1: var(--dk-text-disabled-subtle);
  --dk-surface-control-disabled-on-inverse-subtle-level-1: var(--dk-surface-disabled-subtle);
  --dk-icon-control-disabled-on-inverse-subtle-level-2: var(--dk-icon-disabled-subtle);
  --dk-text-control-disabled-on-inverse-subtle-level-2: var(--dk-text-disabled-subtle);
  --dk-surface-control-disabled-on-inverse-subtle-level-2: var(--dk-surface-disabled-subtle);
  --dk-icon-control-disabled-on-inverse-solid: var(--dk-icon-disabled-subtle);
  --dk-text-control-disabled-on-inverse-solid: var(--dk-text-disabled-subtle);
  --dk-surface-control-disabled-on-inverse-solid: var(--dk-surface-disabled-subtle);
  --dk-icon-control-disabled-on-inverse-solid-level-1: var(--dk-icon-disabled-subtle);
  --dk-text-control-disabled-on-inverse-solid-level-1: var(--dk-text-disabled-subtle);
  --dk-surface-control-disabled-on-inverse-solid-level-1: var(--dk-surface-disabled-subtle);
  --dk-icon-control-disabled-on-inverse-solid-level-2: var(--dk-icon-disabled-subtle);
  --dk-text-control-disabled-on-inverse-solid-level-2: var(--dk-text-disabled-subtle);
  --dk-surface-control-disabled-on-inverse-solid-level-2: var(--dk-surface-disabled-subtle);
}
[data-theme="dark"] {
  /* primary */
  --dk-surface-control-default-on-primary-subtle-level-0: var(--dk-color-primary-850);
  --dk-surface-control-hover-on-primary-subtle-level-0: var(--dk-color-primary-800);
  --dk-surface-control-active-on-primary-subtle-level-0: var(--dk-color-primary-700);
  --dk-border-control-default-on-primary-subtle-level-0: var(--dk-color-primary-800);
  --dk-border-control-hover-on-primary-subtle-level-0: var(--dk-color-primary-700);
  --dk-border-control-active-on-primary-subtle-level-0: var(--dk-color-primary-650);
  --dk-icon-control-disabled-on-primary-subtle-level-0: var(--dk-color-primary-800);
  --dk-surface-control-disabled-on-primary-subtle-level-0: var(--dk-color-primary-850);
  --dk-icon-control-default-on-primary-subtle-level-0: var(--dk-color-primary-300);
  --dk-icon-control-hover-on-primary-subtle-level-0: var(--dk-color-primary-200);
  --dk-icon-control-active-on-primary-subtle-level-0: var(--dk-color-primary-100);
  --dk-text-control-default-on-primary-subtle-level-0: var(--dk-color-primary-100);
  --dk-text-control-hover-on-primary-subtle-level-0: var(--dk-color-primary-200);
  --dk-text-control-active-on-primary-subtle-level-0: var(--dk-color-primary-100);
  --dk-text-control-disabled-on-primary-subtle-level-0: var(--dk-color-primary-700);
  --dk-surface-control-default-on-primary-subtle-level-1: var(--dk-color-primary-750);
  --dk-surface-control-hover-on-primary-subtle-level-1: var(--dk-color-primary-700);
  --dk-surface-control-active-on-primary-subtle-level-1: var(--dk-color-primary-650);
  --dk-border-control-default-on-primary-subtle-level-1: var(--dk-color-primary-700);
  --dk-border-control-hover-on-primary-subtle-level-1: var(--dk-color-primary-650);
  --dk-border-control-active-on-primary-subtle-level-1: var(--dk-color-primary-600);
  --dk-icon-control-disabled-on-primary-subtle-level-1: var(--dk-color-primary-800);
  --dk-surface-control-disabled-on-primary-subtle-level-1: var(--dk-color-primary-850);
  --dk-icon-control-default-on-primary-subtle-level-1: var(--dk-color-primary-200);
  --dk-icon-control-hover-on-primary-subtle-level-1: var(--dk-color-primary-100);
  --dk-icon-control-active-on-primary-subtle-level-1: var(--dk-color-primary-50);
  --dk-text-control-default-on-primary-subtle-level-1: var(--dk-color-primary-25);
  --dk-text-control-hover-on-primary-subtle-level-1: var(--dk-color-primary-25);
  --dk-text-control-active-on-primary-subtle-level-1: var(--dk-color-primary-25);
  --dk-text-control-disabled-on-primary-subtle-level-1: var(--dk-color-primary-700);
  --dk-surface-control-default-on-primary-subtle-level-2: var(--dk-color-primary-650);
  --dk-surface-control-hover-on-primary-subtle-level-2: var(--dk-color-primary-600);
  --dk-surface-control-active-on-primary-subtle-level-2: var(--dk-color-primary-550);
  --dk-border-control-default-on-primary-subtle-level-2: var(--dk-color-primary-600);
  --dk-border-control-hover-on-primary-subtle-level-2: var(--dk-color-primary-550);
  --dk-border-control-active-on-primary-subtle-level-2: var(--dk-color-primary-500);
  --dk-icon-control-disabled-on-primary-subtle-level-2: var(--dk-color-primary-550);
  --dk-surface-control-disabled-on-primary-subtle-level-2: var(--dk-color-primary-650);
  --dk-icon-control-default-on-primary-subtle-level-2: var(--dk-color-primary-25);
  --dk-icon-control-hover-on-primary-subtle-level-2: var(--dk-color-primary-50);
  --dk-icon-control-active-on-primary-subtle-level-2: var(--dk-color-primary-850);
  --dk-text-control-default-on-primary-subtle-level-2: var(--dk-color-primary-25);
  --dk-text-control-hover-on-primary-subtle-level-2: var(--dk-color-primary-25);
  --dk-text-control-active-on-primary-subtle-level-2: var(--dk-color-primary-900);
  --dk-text-control-disabled-on-primary-subtle-level-2: var(--dk-color-primary-500);
  --dk-surface-control-default-on-primary-solid: var(--dk-color-primary-650);
  --dk-surface-control-hover-on-primary-solid: var(--dk-color-primary-600);
  --dk-surface-control-active-on-primary-solid: var(--dk-color-primary-550);
  --dk-border-control-default-on-primary-solid: var(--dk-color-primary-600);
  --dk-border-control-hover-on-primary-solid: var(--dk-color-primary-550);
  --dk-border-control-active-on-primary-solid: var(--dk-color-primary-500);
  --dk-icon-control-disabled-on-primary-solid: var(--dk-color-primary-400);
  --dk-surface-control-disabled-on-primary-solid: var(--dk-color-primary-650);
  --dk-icon-control-default-on-primary-solid: var(--dk-color-primary-100);
  --dk-icon-control-hover-on-primary-solid: var(--dk-color-primary-50);
  --dk-icon-control-active-on-primary-solid: var(--dk-color-primary-25);
  --dk-text-control-default-on-primary-solid: var(--dk-color-primary-25);
  --dk-text-control-hover-on-primary-solid: var(--dk-color-primary-50);
  --dk-text-control-active-on-primary-solid: var(--dk-color-primary-25);
  --dk-text-control-disabled-on-primary-solid: var(--dk-color-primary-300);
  --dk-surface-control-default-on-primary-solid-level-1: var(--dk-color-primary-700);
  --dk-surface-control-hover-on-primary-solid-level-1: var(--dk-color-primary-650);
  --dk-surface-control-active-on-primary-solid-level-1: var(--dk-color-primary-600);
  --dk-border-control-default-on-primary-solid-level-1: var(--dk-color-primary-650);
  --dk-border-control-hover-on-primary-solid-level-1: var(--dk-color-primary-600);
  --dk-border-control-active-on-primary-solid-level-1: var(--dk-color-primary-550);
  --dk-icon-control-disabled-on-primary-solid-level-1: var(--dk-color-primary-500);
  --dk-surface-control-disabled-on-primary-solid-level-1: var(--dk-color-primary-700);
  --dk-icon-control-default-on-primary-solid-level-1: var(--dk-color-primary-200);
  --dk-icon-control-hover-on-primary-solid-level-1: var(--dk-color-primary-100);
  --dk-icon-control-active-on-primary-solid-level-1: var(--dk-color-primary-50);
  --dk-text-control-default-on-primary-solid-level-1: var(--dk-color-primary-50);
  --dk-text-control-hover-on-primary-solid-level-1: var(--dk-color-primary-100);
  --dk-text-control-active-on-primary-solid-level-1: var(--dk-color-primary-50);
  --dk-text-control-disabled-on-primary-solid-level-1: var(--dk-color-primary-400);
  --dk-surface-control-default-on-primary-solid-level-2: var(--dk-color-primary-850);
  --dk-surface-control-hover-on-primary-solid-level-2: var(--dk-color-primary-800);
  --dk-surface-control-active-on-primary-solid-level-2: var(--dk-color-primary-700);
  --dk-border-control-default-on-primary-solid-level-2: var(--dk-color-primary-800);
  --dk-border-control-hover-on-primary-solid-level-2: var(--dk-color-primary-700);
  --dk-border-control-active-on-primary-solid-level-2: var(--dk-color-primary-650);
  --dk-icon-control-disabled-on-primary-solid-level-2: var(--dk-color-primary-700);
  --dk-surface-control-disabled-on-primary-solid-level-2: var(--dk-color-primary-850);
  --dk-icon-control-default-on-primary-solid-level-2: var(--dk-color-primary-550);
  --dk-icon-control-hover-on-primary-solid-level-2: var(--dk-color-primary-500);
  --dk-icon-control-active-on-primary-solid-level-2: var(--dk-color-primary-300);
  --dk-text-control-default-on-primary-solid-level-2: var(--dk-color-primary-400);
  --dk-text-control-hover-on-primary-solid-level-2: var(--dk-color-primary-500);
  --dk-text-control-active-on-primary-solid-level-2: var(--dk-color-primary-300);
  --dk-text-control-disabled-on-primary-solid-level-2: var(--dk-color-primary-650);
  /* success */
  --dk-surface-control-default-on-success-subtle-level-0: var(--dk-color-primary-850);
  --dk-surface-control-hover-on-success-subtle-level-0: var(--dk-color-primary-800);
  --dk-surface-control-active-on-success-subtle-level-0: var(--dk-color-primary-700);
  --dk-border-control-default-on-success-subtle-level-0: var(--dk-color-primary-800);
  --dk-border-control-hover-on-success-subtle-level-0: var(--dk-color-primary-700);
  --dk-border-control-active-on-success-subtle-level-0: var(--dk-color-primary-650);
  --dk-icon-control-disabled-on-success-subtle-level-0: var(--dk-color-primary-800);
  --dk-surface-control-disabled-on-success-subtle-level-0: var(--dk-color-primary-850);
  --dk-icon-control-default-on-success-subtle-level-0: var(--dk-color-primary-300);
  --dk-icon-control-hover-on-success-subtle-level-0: var(--dk-color-primary-200);
  --dk-icon-control-active-on-success-subtle-level-0: var(--dk-color-primary-100);
  --dk-text-control-default-on-success-subtle-level-0: var(--dk-color-primary-100);
  --dk-text-control-hover-on-success-subtle-level-0: var(--dk-color-primary-200);
  --dk-text-control-active-on-success-subtle-level-0: var(--dk-color-primary-100);
  --dk-text-control-disabled-on-success-subtle-level-0: var(--dk-color-primary-700);
  --dk-surface-control-default-on-success-subtle-level-1: var(--dk-color-primary-850);
  --dk-surface-control-hover-on-success-subtle-level-1: var(--dk-color-primary-900);
  --dk-surface-control-active-on-success-subtle-level-1: var(--dk-color-primary-700);
  --dk-border-control-default-on-success-subtle-level-1: var(--dk-color-primary-900);
  --dk-border-control-hover-on-success-subtle-level-1: var(--dk-color-primary-700);
  --dk-border-control-active-on-success-subtle-level-1: var(--dk-color-primary-650);
  --dk-icon-control-disabled-on-success-subtle-level-1: var(--dk-color-primary-800);
  --dk-surface-control-disabled-on-success-subtle-level-1: var(--dk-color-primary-850);
  --dk-icon-control-default-on-success-subtle-level-1: var(--dk-color-primary-200);
  --dk-icon-control-hover-on-success-subtle-level-1: var(--dk-color-primary-100);
  --dk-icon-control-active-on-success-subtle-level-1: var(--dk-color-primary-50);
  --dk-text-control-default-on-success-subtle-level-1: var(--dk-color-primary-50);
  --dk-text-control-hover-on-success-subtle-level-1: var(--dk-color-primary-100);
  --dk-text-control-active-on-success-subtle-level-1: var(--dk-color-primary-50);
  --dk-text-control-disabled-on-success-subtle-level-1: var(--dk-color-primary-700);
  --dk-surface-control-default-on-success-subtle-level-2: var(--dk-color-primary-650);
  --dk-surface-control-hover-on-success-subtle-level-2: var(--dk-color-primary-600);
  --dk-surface-control-active-on-success-subtle-level-2: var(--dk-color-primary-550);
  --dk-border-control-default-on-success-subtle-level-2: var(--dk-color-primary-600);
  --dk-border-control-hover-on-success-subtle-level-2: var(--dk-color-primary-550);
  --dk-border-control-active-on-success-subtle-level-2: var(--dk-color-primary-500);
  --dk-icon-control-disabled-on-success-subtle-level-2: var(--dk-color-primary-550);
  --dk-surface-control-disabled-on-success-subtle-level-2: var(--dk-color-primary-650);
  --dk-icon-control-default-on-success-subtle-level-2: var(--dk-color-primary-25);
  --dk-icon-control-hover-on-success-subtle-level-2: var(--dk-color-primary-50);
  --dk-icon-control-active-on-success-subtle-level-2: var(--dk-color-primary-850);
  --dk-text-control-default-on-success-subtle-level-2: var(--dk-color-primary-25);
  --dk-text-control-hover-on-success-subtle-level-2: var(--dk-color-primary-25);
  --dk-text-control-active-on-success-subtle-level-2: var(--dk-color-primary-900);
  --dk-text-control-disabled-on-success-subtle-level-2: var(--dk-color-primary-500);
  --dk-surface-control-default-on-success-solid: var(--dk-color-primary-650);
  --dk-surface-control-hover-on-success-solid: var(--dk-color-primary-600);
  --dk-surface-control-active-on-success-solid: var(--dk-color-primary-550);
  --dk-border-control-default-on-success-solid: var(--dk-color-primary-600);
  --dk-border-control-hover-on-success-solid: var(--dk-color-primary-550);
  --dk-border-control-active-on-success-solid: var(--dk-color-primary-500);
  --dk-icon-control-disabled-on-success-solid: var(--dk-color-primary-400);
  --dk-surface-control-disabled-on-success-solid: var(--dk-color-primary-650);
  --dk-icon-control-default-on-success-solid: var(--dk-color-primary-100);
  --dk-icon-control-hover-on-success-solid: var(--dk-color-primary-50);
  --dk-icon-control-active-on-success-solid: var(--dk-color-primary-25);
  --dk-text-control-default-on-success-solid: var(--dk-color-primary-25);
  --dk-text-control-hover-on-success-solid: var(--dk-color-primary-50);
  --dk-text-control-active-on-success-solid: var(--dk-color-primary-25);
  --dk-text-control-disabled-on-success-solid: var(--dk-color-primary-300);
  --dk-surface-control-default-on-success-solid-level-1: var(--dk-color-primary-700);
  --dk-surface-control-hover-on-success-solid-level-1: var(--dk-color-primary-650);
  --dk-surface-control-active-on-success-solid-level-1: var(--dk-color-primary-600);
  --dk-border-control-default-on-success-solid-level-1: var(--dk-color-primary-650);
  --dk-border-control-hover-on-success-solid-level-1: var(--dk-color-primary-600);
  --dk-border-control-active-on-success-solid-level-1: var(--dk-color-primary-550);
  --dk-icon-control-disabled-on-success-solid-level-1: var(--dk-color-primary-500);
  --dk-surface-control-disabled-on-success-solid-level-1: var(--dk-color-primary-700);
  --dk-icon-control-default-on-success-solid-level-1: var(--dk-color-primary-200);
  --dk-icon-control-hover-on-success-solid-level-1: var(--dk-color-primary-100);
  --dk-icon-control-active-on-success-solid-level-1: var(--dk-color-primary-50);
  --dk-text-control-default-on-success-solid-level-1: var(--dk-color-primary-50);
  --dk-text-control-hover-on-success-solid-level-1: var(--dk-color-primary-100);
  --dk-text-control-active-on-success-solid-level-1: var(--dk-color-primary-50);
  --dk-text-control-disabled-on-success-solid-level-1: var(--dk-color-primary-400);
  --dk-surface-control-default-on-success-solid-level-2: var(--dk-color-primary-850);
  --dk-surface-control-hover-on-success-solid-level-2: var(--dk-color-primary-800);
  --dk-surface-control-active-on-success-solid-level-2: var(--dk-color-primary-700);
  --dk-border-control-default-on-success-solid-level-2: var(--dk-color-primary-800);
  --dk-border-control-hover-on-success-solid-level-2: var(--dk-color-primary-700);
  --dk-border-control-active-on-success-solid-level-2: var(--dk-color-primary-650);
  --dk-icon-control-disabled-on-success-solid-level-2: var(--dk-color-primary-700);
  --dk-surface-control-disabled-on-success-solid-level-2: var(--dk-color-primary-850);
  --dk-icon-control-default-on-success-solid-level-2: var(--dk-color-primary-550);
  --dk-icon-control-hover-on-success-solid-level-2: var(--dk-color-primary-500);
  --dk-icon-control-active-on-success-solid-level-2: var(--dk-color-primary-300);
  --dk-text-control-default-on-success-solid-level-2: var(--dk-color-primary-400);
  --dk-text-control-hover-on-success-solid-level-2: var(--dk-color-primary-500);
  --dk-text-control-active-on-success-solid-level-2: var(--dk-color-primary-300);
  --dk-text-control-disabled-on-success-solid-level-2: var(--dk-color-primary-650);
  /* error */
  --dk-surface-control-default-on-error-subtle-level-0: var(--dk-color-error-800);
  --dk-surface-control-hover-on-error-subtle-level-0: var(--dk-color-error-700);
  --dk-surface-control-active-on-error-subtle-level-0: var(--dk-color-error-650);
  --dk-border-control-default-on-error-subtle-level-0: var(--dk-color-error-700);
  --dk-border-control-hover-on-error-subtle-level-0: var(--dk-color-error-650);
  --dk-border-control-active-on-error-subtle-level-0: var(--dk-color-error-600);
  --dk-icon-control-disabled-on-error-subtle-level-0: var(--dk-color-error-700);
  --dk-surface-control-disabled-on-error-subtle-level-0: var(--dk-color-error-800);
  --dk-icon-control-default-on-error-subtle-level-0: var(--dk-color-error-100);
  --dk-icon-control-hover-on-error-subtle-level-0: var(--dk-color-error-50);
  --dk-icon-control-active-on-error-subtle-level-0: var(--dk-color-error-25);
  --dk-text-control-default-on-error-subtle-level-0: var(--dk-color-error-25);
  --dk-text-control-hover-on-error-subtle-level-0: var(--dk-color-error-50);
  --dk-text-control-active-on-error-subtle-level-0: var(--dk-color-error-25);
  --dk-text-control-disabled-on-error-subtle-level-0: var(--dk-color-error-650);
  --dk-surface-control-default-on-error-subtle-level-1: var(--dk-color-error-750);
  --dk-surface-control-hover-on-error-subtle-level-1: var(--dk-color-error-700);
  --dk-surface-control-active-on-error-subtle-level-1: var(--dk-color-error-650);
  --dk-border-control-default-on-error-subtle-level-1: var(--dk-color-error-700);
  --dk-border-control-hover-on-error-subtle-level-1: var(--dk-color-error-600);
  --dk-border-control-active-on-error-subtle-level-1: var(--dk-color-error-550);
  --dk-icon-control-disabled-on-error-subtle-level-1: var(--dk-color-error-800);
  --dk-surface-control-disabled-on-error-subtle-level-1: var(--dk-color-error-900);
  --dk-icon-control-default-on-error-subtle-level-1: var(--dk-color-error-100);
  --dk-icon-control-hover-on-error-subtle-level-1: var(--dk-color-error-50);
  --dk-icon-control-active-on-error-subtle-level-1: var(--dk-color-error-25);
  --dk-text-control-default-on-error-subtle-level-1: var(--dk-color-error-25);
  --dk-text-control-hover-on-error-subtle-level-1: var(--dk-color-error-25);
  --dk-text-control-active-on-error-subtle-level-1: var(--dk-color-error-25);
  --dk-text-control-disabled-on-error-subtle-level-1: var(--dk-color-error-700);
  --dk-surface-control-default-on-error-subtle-level-2: var(--dk-color-error-650);
  --dk-surface-control-hover-on-error-subtle-level-2: var(--dk-color-error-600);
  --dk-surface-control-active-on-error-subtle-level-2: var(--dk-color-error-550);
  --dk-border-control-default-on-error-subtle-level-2: var(--dk-color-error-550);
  --dk-border-control-hover-on-error-subtle-level-2: var(--dk-color-error-500);
  --dk-border-control-active-on-error-subtle-level-2: var(--dk-color-error-400);
  --dk-icon-control-disabled-on-error-subtle-level-2: var(--dk-color-error-500);
  --dk-surface-control-disabled-on-error-subtle-level-2: var(--dk-color-error-650);
  --dk-icon-control-default-on-error-subtle-level-2: var(--dk-color-error-25);
  --dk-icon-control-hover-on-error-subtle-level-2: var(--dk-color-error-50);
  --dk-icon-control-active-on-error-subtle-level-2: var(--dk-color-error-100);
  --dk-text-control-default-on-error-subtle-level-2: var(--dk-color-error-25);
  --dk-text-control-hover-on-error-subtle-level-2: var(--dk-color-error-25);
  --dk-text-control-active-on-error-subtle-level-2: var(--dk-color-error-25);
  --dk-text-control-disabled-on-error-subtle-level-2: var(--dk-color-error-400);
  --dk-surface-control-default-on-error-solid: var(--dk-color-error-650);
  --dk-surface-control-hover-on-error-solid: var(--dk-color-error-600);
  --dk-surface-control-active-on-error-solid: var(--dk-color-error-550);
  --dk-border-control-default-on-error-solid: var(--dk-color-error-550);
  --dk-border-control-hover-on-error-solid: var(--dk-color-error-500);
  --dk-border-control-active-on-error-solid: var(--dk-color-error-400);
  --dk-icon-control-disabled-on-error-solid: var(--dk-color-error-400);
  --dk-surface-control-disabled-on-error-solid: var(--dk-color-error-650);
  --dk-icon-control-default-on-error-solid: var(--dk-color-error-100);
  --dk-icon-control-hover-on-error-solid: var(--dk-color-error-50);
  --dk-icon-control-active-on-error-solid: var(--dk-color-error-25);
  --dk-text-control-default-on-error-solid: var(--dk-color-error-25);
  --dk-text-control-hover-on-error-solid: var(--dk-color-error-50);
  --dk-text-control-active-on-error-solid: var(--dk-color-error-25);
  --dk-text-control-disabled-on-error-solid: var(--dk-color-error-300);
  --dk-surface-control-default-on-error-solid-level-1: var(--dk-color-error-700);
  --dk-surface-control-hover-on-error-solid-level-1: var(--dk-color-error-650);
  --dk-surface-control-active-on-error-solid-level-1: var(--dk-color-error-600);
  --dk-border-control-default-on-error-solid-level-1: var(--dk-color-error-650);
  --dk-border-control-hover-on-error-solid-level-1: var(--dk-color-error-600);
  --dk-border-control-active-on-error-solid-level-1: var(--dk-color-error-550);
  --dk-icon-control-disabled-on-error-solid-level-1: var(--dk-color-error-400);
  --dk-surface-control-disabled-on-error-solid-level-1: var(--dk-color-error-700);
  --dk-icon-control-default-on-error-solid-level-1: var(--dk-color-error-200);
  --dk-icon-control-hover-on-error-solid-level-1: var(--dk-color-error-100);
  --dk-icon-control-active-on-error-solid-level-1: var(--dk-color-error-50);
  --dk-text-control-default-on-error-solid-level-1: var(--dk-color-error-50);
  --dk-text-control-hover-on-error-solid-level-1: var(--dk-color-error-100);
  --dk-text-control-active-on-error-solid-level-1: var(--dk-color-error-50);
  --dk-text-control-disabled-on-error-solid-level-1: var(--dk-color-error-300);
  --dk-surface-control-default-on-error-solid-level-2: var(--dk-color-error-800);
  --dk-surface-control-hover-on-error-solid-level-2: var(--dk-color-error-700);
  --dk-surface-control-active-on-error-solid-level-2: var(--dk-color-error-650);
  --dk-border-control-default-on-error-solid-level-2: var(--dk-color-error-700);
  --dk-border-control-hover-on-error-solid-level-2: var(--dk-color-error-650);
  --dk-border-control-active-on-error-solid-level-2: var(--dk-color-error-600);
  --dk-icon-control-disabled-on-error-solid-level-2: var(--dk-color-error-500);
  --dk-surface-control-disabled-on-error-solid-level-2: var(--dk-color-error-800);
  --dk-icon-control-default-on-error-solid-level-2: var(--dk-color-error-300);
  --dk-icon-control-hover-on-error-solid-level-2: var(--dk-color-error-200);
  --dk-icon-control-active-on-error-solid-level-2: var(--dk-color-error-100);
  --dk-text-control-default-on-error-solid-level-2: var(--dk-color-error-100);
  --dk-text-control-hover-on-error-solid-level-2: var(--dk-color-error-200);
  --dk-text-control-active-on-error-solid-level-2: var(--dk-color-error-100);
  --dk-text-control-disabled-on-error-solid-level-2: var(--dk-color-error-400);
  /* warning */
  --dk-surface-control-default-on-warning-subtle-level-0: var(--dk-color-warning-800);
  --dk-surface-control-hover-on-warning-subtle-level-0: var(--dk-color-warning-700);
  --dk-surface-control-active-on-warning-subtle-level-0: var(--dk-color-warning-650);
  --dk-border-control-default-on-warning-subtle-level-0: var(--dk-color-warning-700);
  --dk-border-control-hover-on-warning-subtle-level-0: var(--dk-color-warning-650);
  --dk-border-control-active-on-warning-subtle-level-0: var(--dk-color-warning-600);
  --dk-icon-control-disabled-on-warning-subtle-level-0: var(--dk-color-warning-700);
  --dk-surface-control-disabled-on-warning-subtle-level-0: var(--dk-color-warning-800);
  --dk-icon-control-default-on-warning-subtle-level-0: var(--dk-color-warning-200);
  --dk-icon-control-hover-on-warning-subtle-level-0: var(--dk-color-warning-100);
  --dk-icon-control-active-on-warning-subtle-level-0: var(--dk-color-warning-50);
  --dk-text-control-default-on-warning-subtle-level-0: var(--dk-color-warning-50);
  --dk-text-control-hover-on-warning-subtle-level-0: var(--dk-color-warning-100);
  --dk-text-control-active-on-warning-subtle-level-0: var(--dk-color-base-white);
  --dk-text-control-disabled-on-warning-subtle-level-0: var(--dk-color-warning-650);
  --dk-surface-control-default-on-warning-subtle-level-1: var(--dk-color-warning-750);
  --dk-surface-control-hover-on-warning-subtle-level-1: var(--dk-color-warning-700);
  --dk-surface-control-active-on-warning-subtle-level-1: var(--dk-color-warning-650);
  --dk-border-control-default-on-warning-subtle-level-1: var(--dk-color-warning-700);
  --dk-border-control-hover-on-warning-subtle-level-1: var(--dk-color-warning-650);
  --dk-border-control-active-on-warning-subtle-level-1: var(--dk-color-warning-600);
  --dk-icon-control-disabled-on-warning-subtle-level-1: var(--dk-color-warning-800);
  --dk-surface-control-disabled-on-warning-subtle-level-1: var(--dk-color-warning-900);
  --dk-icon-control-default-on-warning-subtle-level-1: var(--dk-color-warning-200);
  --dk-icon-control-hover-on-warning-subtle-level-1: var(--dk-color-warning-100);
  --dk-icon-control-active-on-warning-subtle-level-1: var(--dk-color-warning-50);
  --dk-text-control-default-on-warning-subtle-level-1: var(--dk-color-warning-25);
  --dk-text-control-hover-on-warning-subtle-level-1: var(--dk-color-warning-25);
  --dk-text-control-active-on-warning-subtle-level-1: var(--dk-color-base-white);
  --dk-text-control-disabled-on-warning-subtle-level-1: var(--dk-color-warning-700);
  --dk-surface-control-default-on-warning-subtle-level-2: var(--dk-color-warning-650);
  --dk-surface-control-hover-on-warning-subtle-level-2: var(--dk-color-warning-600);
  --dk-surface-control-active-on-warning-subtle-level-2: var(--dk-color-warning-550);
  --dk-border-control-default-on-warning-subtle-level-2: var(--dk-color-warning-600);
  --dk-border-control-hover-on-warning-subtle-level-2: var(--dk-color-warning-550);
  --dk-border-control-active-on-warning-subtle-level-2: var(--dk-color-warning-500);
  --dk-icon-control-disabled-on-warning-subtle-level-2: var(--dk-color-warning-550);
  --dk-surface-control-disabled-on-warning-subtle-level-2: var(--dk-color-warning-650);
  --dk-icon-control-default-on-warning-subtle-level-2: var(--dk-color-warning-25);
  --dk-icon-control-hover-on-warning-subtle-level-2: var(--dk-color-warning-900);
  --dk-icon-control-active-on-warning-subtle-level-2: var(--dk-color-warning-800);
  --dk-text-control-default-on-warning-subtle-level-2: var(--dk-color-base-white);
  --dk-text-control-hover-on-warning-subtle-level-2: var(--dk-color-warning-900);
  --dk-text-control-active-on-warning-subtle-level-2: var(--dk-color-warning-900);
  --dk-text-control-disabled-on-warning-subtle-level-2: var(--dk-color-warning-500);
  --dk-surface-control-default-on-warning-solid: var(--dk-color-warning-650);
  --dk-surface-control-hover-on-warning-solid: var(--dk-color-warning-600);
  --dk-surface-control-active-on-warning-solid: var(--dk-color-warning-600);
  --dk-border-control-default-on-warning-solid: var(--dk-color-warning-600);
  --dk-border-control-hover-on-warning-solid: var(--dk-color-warning-550);
  --dk-border-control-active-on-warning-solid: var(--dk-color-warning-500);
  --dk-icon-control-disabled-on-warning-solid: var(--dk-color-warning-400);
  --dk-surface-control-disabled-on-warning-solid: var(--dk-color-warning-650);
  --dk-icon-control-default-on-warning-solid: var(--dk-color-warning-100);
  --dk-icon-control-hover-on-warning-solid: var(--dk-color-warning-50);
  --dk-icon-control-active-on-warning-solid: var(--dk-color-warning-25);
  --dk-text-control-default-on-warning-solid: var(--dk-color-warning-25);
  --dk-text-control-hover-on-warning-solid: var(--dk-color-warning-50);
  --dk-text-control-active-on-warning-solid: var(--dk-color-warning-25);
  --dk-text-control-disabled-on-warning-solid: var(--dk-color-warning-300);
  --dk-surface-control-default-on-warning-solid-level-1: var(--dk-color-warning-700);
  --dk-surface-control-hover-on-warning-solid-level-1: var(--dk-color-warning-650);
  --dk-surface-control-active-on-warning-solid-level-1: var(--dk-color-warning-600);
  --dk-border-control-default-on-warning-solid-level-1: var(--dk-color-warning-650);
  --dk-border-control-hover-on-warning-solid-level-1: var(--dk-color-warning-600);
  --dk-border-control-active-on-warning-solid-level-1: var(--dk-color-warning-550);
  --dk-icon-control-disabled-on-warning-solid-level-1: var(--dk-color-warning-550);
  --dk-surface-control-disabled-on-warning-solid-level-1: var(--dk-color-warning-700);
  --dk-icon-control-default-on-warning-solid-level-1: var(--dk-color-warning-200);
  --dk-icon-control-hover-on-warning-solid-level-1: var(--dk-color-warning-100);
  --dk-icon-control-active-on-warning-solid-level-1: var(--dk-color-warning-50);
  --dk-text-control-default-on-warning-solid-level-1: var(--dk-color-warning-50);
  --dk-text-control-hover-on-warning-solid-level-1: var(--dk-color-warning-100);
  --dk-text-control-active-on-warning-solid-level-1: var(--dk-color-warning-50);
  --dk-text-control-disabled-on-warning-solid-level-1: var(--dk-color-warning-500);
  --dk-surface-control-default-on-warning-solid-level-2: var(--dk-color-warning-800);
  --dk-surface-control-hover-on-warning-solid-level-2: var(--dk-color-warning-700);
  --dk-surface-control-active-on-warning-solid-level-2: var(--dk-color-warning-700);
  --dk-border-control-default-on-warning-solid-level-2: var(--dk-color-warning-700);
  --dk-border-control-hover-on-warning-solid-level-2: var(--dk-color-warning-650);
  --dk-border-control-active-on-warning-solid-level-2: var(--dk-color-warning-600);
  --dk-icon-control-disabled-on-warning-solid-level-2: var(--dk-color-warning-650);
  --dk-surface-control-disabled-on-warning-solid-level-2: var(--dk-color-warning-800);
  --dk-icon-control-default-on-warning-solid-level-2: var(--dk-color-warning-500);
  --dk-icon-control-hover-on-warning-solid-level-2: var(--dk-color-warning-300);
  --dk-icon-control-active-on-warning-solid-level-2: var(--dk-color-warning-200);
  --dk-text-control-default-on-warning-solid-level-2: var(--dk-color-warning-400);
  --dk-text-control-hover-on-warning-solid-level-2: var(--dk-color-warning-300);
  --dk-text-control-active-on-warning-solid-level-2: var(--dk-color-warning-200);
  --dk-text-control-disabled-on-warning-solid-level-2: var(--dk-color-warning-600);
  /* information */
  --dk-surface-control-default-on-information-subtle-level-0: var(--dk-color-information-800);
  --dk-surface-control-hover-on-information-subtle-level-0: var(--dk-color-information-700);
  --dk-surface-control-active-on-information-subtle-level-0: var(--dk-color-information-650);
  --dk-border-control-default-on-information-subtle-level-0: var(--dk-color-information-700);
  --dk-border-control-hover-on-information-subtle-level-0: var(--dk-color-information-650);
  --dk-border-control-active-on-information-subtle-level-0: var(--dk-color-information-600);
  --dk-icon-control-disabled-on-information-subtle-level-0: var(--dk-color-information-700);
  --dk-surface-control-disabled-on-information-subtle-level-0: var(--dk-color-information-800);
  --dk-icon-control-default-on-information-subtle-level-0: var(--dk-color-information-200);
  --dk-icon-control-hover-on-information-subtle-level-0: var(--dk-color-information-100);
  --dk-icon-control-active-on-information-subtle-level-0: var(--dk-color-information-50);
  --dk-text-control-default-on-information-subtle-level-0: var(--dk-color-information-50);
  --dk-text-control-hover-on-information-subtle-level-0: var(--dk-color-information-100);
  --dk-text-control-active-on-information-subtle-level-0: var(--dk-color-information-50);
  --dk-text-control-disabled-on-information-subtle-level-0: var(--dk-color-information-650);
  --dk-surface-control-default-on-information-subtle-level-1: var(--dk-color-information-750);
  --dk-surface-control-hover-on-information-subtle-level-1: var(--dk-color-information-700);
  --dk-surface-control-active-on-information-subtle-level-1: var(--dk-color-information-650);
  --dk-border-control-default-on-information-subtle-level-1: var(--dk-color-information-700);
  --dk-border-control-hover-on-information-subtle-level-1: var(--dk-color-information-600);
  --dk-border-control-active-on-information-subtle-level-1: var(--dk-color-information-550);
  --dk-icon-control-disabled-on-information-subtle-level-1: var(--dk-color-information-800);
  --dk-surface-control-disabled-on-information-subtle-level-1: var(--dk-color-information-900);
  --dk-icon-control-default-on-information-subtle-level-1: var(--dk-color-information-200);
  --dk-icon-control-hover-on-information-subtle-level-1: var(--dk-color-information-100);
  --dk-icon-control-active-on-information-subtle-level-1: var(--dk-color-information-50);
  --dk-text-control-default-on-information-subtle-level-1: var(--dk-color-information-25);
  --dk-text-control-hover-on-information-subtle-level-1: var(--dk-color-information-25);
  --dk-text-control-active-on-information-subtle-level-1: var(--dk-color-information-25);
  --dk-text-control-disabled-on-information-subtle-level-1: var(--dk-color-information-700);
  --dk-surface-control-default-on-information-subtle-level-2: var(--dk-color-information-650);
  --dk-surface-control-hover-on-information-subtle-level-2: var(--dk-color-information-600);
  --dk-surface-control-active-on-information-subtle-level-2: var(--dk-color-information-550);
  --dk-border-control-default-on-information-subtle-level-2: var(--dk-color-information-550);
  --dk-border-control-hover-on-information-subtle-level-2: var(--dk-color-information-500);
  --dk-border-control-active-on-information-subtle-level-2: var(--dk-color-information-400);
  --dk-icon-control-disabled-on-information-subtle-level-2: var(--dk-color-information-500);
  --dk-surface-control-disabled-on-information-subtle-level-2: var(--dk-color-information-650);
  --dk-icon-control-default-on-information-subtle-level-2: var(--dk-color-information-25);
  --dk-icon-control-hover-on-information-subtle-level-2: var(--dk-color-information-50);
  --dk-icon-control-active-on-information-subtle-level-2: var(--dk-color-information-100);
  --dk-text-control-default-on-information-subtle-level-2: var(--dk-color-information-25);
  --dk-text-control-hover-on-information-subtle-level-2: var(--dk-color-information-50);
  --dk-text-control-active-on-information-subtle-level-2: var(--dk-color-information-25);
  --dk-text-control-disabled-on-information-subtle-level-2: var(--dk-color-information-400);
  --dk-surface-control-default-on-information-solid: var(--dk-color-information-650);
  --dk-surface-control-hover-on-information-solid: var(--dk-color-information-600);
  --dk-surface-control-active-on-information-solid: var(--dk-color-information-550);
  --dk-border-control-default-on-information-solid: var(--dk-color-information-550);
  --dk-border-control-hover-on-information-solid: var(--dk-color-information-500);
  --dk-border-control-active-on-information-solid: var(--dk-color-information-400);
  --dk-icon-control-disabled-on-information-solid: var(--dk-color-information-400);
  --dk-surface-control-disabled-on-information-solid: var(--dk-color-information-650);
  --dk-icon-control-default-on-information-solid: var(--dk-color-information-200);
  --dk-icon-control-hover-on-information-solid: var(--dk-color-information-100);
  --dk-icon-control-active-on-information-solid: var(--dk-color-information-50);
  --dk-text-control-default-on-information-solid: var(--dk-color-information-50);
  --dk-text-control-hover-on-information-solid: var(--dk-color-information-100);
  --dk-text-control-active-on-information-solid: var(--dk-color-information-50);
  --dk-text-control-disabled-on-information-solid: var(--dk-color-information-300);
  --dk-surface-control-default-on-information-solid-level-1: var(--dk-color-information-700);
  --dk-surface-control-hover-on-information-solid-level-1: var(--dk-color-information-650);
  --dk-surface-control-active-on-information-solid-level-1: var(--dk-color-information-600);
  --dk-border-control-default-on-information-solid-level-1: var(--dk-color-information-650);
  --dk-border-control-hover-on-information-solid-level-1: var(--dk-color-information-600);
  --dk-border-control-active-on-information-solid-level-1: var(--dk-color-information-550);
  --dk-icon-control-disabled-on-information-solid-level-1: var(--dk-color-information-400);
  --dk-surface-control-disabled-on-information-solid-level-1: var(--dk-color-information-700);
  --dk-icon-control-default-on-information-solid-level-1: var(--dk-color-information-200);
  --dk-icon-control-hover-on-information-solid-level-1: var(--dk-color-information-100);
  --dk-icon-control-active-on-information-solid-level-1: var(--dk-color-information-50);
  --dk-text-control-default-on-information-solid-level-1: var(--dk-color-information-50);
  --dk-text-control-hover-on-information-solid-level-1: var(--dk-color-information-100);
  --dk-text-control-active-on-information-solid-level-1: var(--dk-color-information-50);
  --dk-text-control-disabled-on-information-solid-level-1: var(--dk-color-information-300);
  --dk-surface-control-default-on-information-solid-level-2: var(--dk-color-information-800);
  --dk-surface-control-hover-on-information-solid-level-2: var(--dk-color-information-700);
  --dk-surface-control-active-on-information-solid-level-2: var(--dk-color-information-650);
  --dk-border-control-default-on-information-solid-level-2: var(--dk-color-information-700);
  --dk-border-control-hover-on-information-solid-level-2: var(--dk-color-information-650);
  --dk-border-control-active-on-information-solid-level-2: var(--dk-color-information-600);
  --dk-icon-control-disabled-on-information-solid-level-2: var(--dk-color-information-550);
  --dk-surface-control-disabled-on-information-solid-level-2: var(--dk-color-information-800);
  --dk-icon-control-default-on-information-solid-level-2: var(--dk-color-information-300);
  --dk-icon-control-hover-on-information-solid-level-2: var(--dk-color-information-200);
  --dk-icon-control-active-on-information-solid-level-2: var(--dk-color-information-100);
  --dk-text-control-default-on-information-solid-level-2: var(--dk-color-information-100);
  --dk-text-control-hover-on-information-solid-level-2: var(--dk-color-information-200);
  --dk-text-control-active-on-information-solid-level-2: var(--dk-color-information-100);
  --dk-text-control-disabled-on-information-solid-level-2: var(--dk-color-information-500);
  /* inverse */
  --dk-surface-control-default-on-inverse-subtle-level-0: var(--dk-color-neutral-25);
  --dk-surface-control-default-on-inverse-subtle-level-1: var(--dk-color-neutral-50);
  --dk-surface-control-default-on-inverse-subtle-level-2: var(--dk-color-neutral-100);
  --dk-surface-control-default-on-inverse-solid: var(--dk-color-neutral-25);
  --dk-surface-control-default-on-inverse-solid-level-1: var(--dk-color-neutral-50);
  --dk-surface-control-default-on-inverse-solid-level-2: var(--dk-color-neutral-100);
  --dk-surface-control-hover-on-inverse-subtle-level-0: var(--dk-color-neutral-50);
  --dk-surface-control-hover-on-inverse-subtle-level-1: var(--dk-color-neutral-100);
  --dk-surface-control-hover-on-inverse-subtle-level-2: var(--dk-color-neutral-200);
  --dk-surface-control-hover-on-inverse-solid: var(--dk-color-neutral-50);
  --dk-surface-control-hover-on-inverse-solid-level-1: var(--dk-color-neutral-100);
  --dk-surface-control-hover-on-inverse-solid-level-2: var(--dk-color-neutral-200);
  --dk-surface-control-active-on-inverse-subtle-level-0: var(--dk-color-neutral-100);
  --dk-surface-control-active-on-inverse-subtle-level-1: var(--dk-color-neutral-200);
  --dk-surface-control-active-on-inverse-subtle-level-2: var(--dk-color-neutral-300);
  --dk-surface-control-active-on-inverse-solid: var(--dk-color-neutral-100);
  --dk-surface-control-active-on-inverse-solid-level-1: var(--dk-color-neutral-200);
  --dk-surface-control-active-on-inverse-solid-level-2: var(--dk-color-neutral-300);
  --dk-border-control-default-on-inverse-subtle-level-0: var(--dk-color-neutral-100);
  --dk-border-control-default-on-inverse-subtle-level-1: var(--dk-color-neutral-100);
  --dk-border-control-default-on-inverse-subtle-level-2: var(--dk-color-neutral-200);
  --dk-border-control-default-on-inverse-solid: var(--dk-color-neutral-100);
  --dk-border-control-default-on-inverse-solid-level-1: var(--dk-color-neutral-100);
  --dk-border-control-default-on-inverse-solid-level-2: var(--dk-color-neutral-200);
  --dk-border-control-hover-on-inverse-subtle-level-0: var(--dk-color-neutral-200);
  --dk-border-control-hover-on-inverse-subtle-level-1: var(--dk-color-neutral-200);
  --dk-border-control-hover-on-inverse-subtle-level-2: var(--dk-color-neutral-300);
  --dk-border-control-hover-on-inverse-solid: var(--dk-color-neutral-200);
  --dk-border-control-hover-on-inverse-solid-level-1: var(--dk-color-neutral-200);
  --dk-border-control-hover-on-inverse-solid-level-2: var(--dk-color-neutral-300);
  --dk-border-control-active-on-inverse-subtle-level-0: var(--dk-color-neutral-300);
  --dk-border-control-active-on-inverse-subtle-level-1: var(--dk-color-neutral-300);
  --dk-border-control-active-on-inverse-subtle-level-2: var(--dk-color-neutral-400);
  --dk-border-control-active-on-inverse-solid: var(--dk-color-neutral-300);
  --dk-border-control-active-on-inverse-solid-level-1: var(--dk-color-neutral-300);
  --dk-border-control-active-on-inverse-solid-level-2: var(--dk-color-neutral-400);
  --dk-icon-control-default-on-inverse-subtle-level-0: var(--dk-color-neutral-500);
  --dk-icon-control-default-on-inverse-subtle-level-1: var(--dk-color-neutral-600);
  --dk-icon-control-default-on-inverse-subtle-level-2: var(--dk-color-neutral-700);
  --dk-icon-control-default-on-inverse-solid: var(--dk-color-neutral-500);
  --dk-icon-control-default-on-inverse-solid-level-1: var(--dk-color-neutral-600);
  --dk-icon-control-default-on-inverse-solid-level-2: var(--dk-color-neutral-700);
  --dk-icon-control-hover-on-inverse-subtle-level-0: var(--dk-color-neutral-600);
  --dk-icon-control-hover-on-inverse-subtle-level-1: var(--dk-color-neutral-700);
  --dk-icon-control-hover-on-inverse-subtle-level-2: var(--dk-color-neutral-800);
  --dk-icon-control-hover-on-inverse-solid: var(--dk-color-neutral-600);
  --dk-icon-control-hover-on-inverse-solid-level-1: var(--dk-color-neutral-700);
  --dk-icon-control-hover-on-inverse-solid-level-2: var(--dk-color-neutral-800);
  --dk-icon-control-active-on-inverse-subtle-level-0: var(--dk-color-neutral-700);
  --dk-icon-control-active-on-inverse-subtle-level-1: var(--dk-color-neutral-800);
  --dk-icon-control-active-on-inverse-subtle-level-2: var(--dk-color-neutral-900);
  --dk-icon-control-active-on-inverse-solid: var(--dk-color-neutral-700);
  --dk-icon-control-active-on-inverse-solid-level-1: var(--dk-color-neutral-800);
  --dk-icon-control-active-on-inverse-solid-level-2: var(--dk-color-neutral-900);
  --dk-text-control-default-on-inverse-subtle-level-0: var(--dk-color-neutral-600);
  --dk-text-control-default-on-inverse-subtle-level-1: var(--dk-color-neutral-700);
  --dk-text-control-default-on-inverse-subtle-level-2: var(--dk-color-neutral-800);
  --dk-text-control-default-on-inverse-solid: var(--dk-color-neutral-600);
  --dk-text-control-default-on-inverse-solid-level-1: var(--dk-color-neutral-700);
  --dk-text-control-default-on-inverse-solid-level-2: var(--dk-color-neutral-800);
  --dk-text-control-hover-on-inverse-subtle-level-0: var(--dk-color-neutral-700);
  --dk-text-control-hover-on-inverse-subtle-level-1: var(--dk-color-neutral-800);
  --dk-text-control-hover-on-inverse-subtle-level-2: var(--dk-color-neutral-900);
  --dk-text-control-hover-on-inverse-solid: var(--dk-color-neutral-700);
  --dk-text-control-hover-on-inverse-solid-level-1: var(--dk-color-neutral-800);
  --dk-text-control-hover-on-inverse-solid-level-2: var(--dk-color-neutral-900);
  --dk-text-control-active-on-inverse-subtle-level-0: var(--dk-color-neutral-800);
  --dk-text-control-active-on-inverse-subtle-level-1: var(--dk-color-neutral-900);
  --dk-text-control-active-on-inverse-subtle-level-2: var(--dk-color-neutral-1000);
  --dk-text-control-active-on-inverse-solid: var(--dk-color-neutral-800);
  --dk-text-control-active-on-inverse-solid-level-1: var(--dk-color-neutral-900);
  --dk-text-control-active-on-inverse-solid-level-2: var(--dk-color-neutral-1000);
  --dk-icon-control-disabled-on-inverse-subtle-level-0: var(--dk-icon-disabled-subtle);
  --dk-text-control-disabled-on-inverse-subtle-level-0: var(--dk-text-disabled-subtle);
  --dk-surface-control-disabled-on-inverse-subtle-level-0: var(--dk-surface-disabled-subtle);
  --dk-icon-control-disabled-on-inverse-subtle-level-1: var(--dk-icon-disabled-subtle);
  --dk-text-control-disabled-on-inverse-subtle-level-1: var(--dk-text-disabled-subtle);
  --dk-surface-control-disabled-on-inverse-subtle-level-1: var(--dk-surface-disabled-subtle);
  --dk-icon-control-disabled-on-inverse-subtle-level-2: var(--dk-icon-disabled-subtle);
  --dk-text-control-disabled-on-inverse-subtle-level-2: var(--dk-text-disabled-subtle);
  --dk-surface-control-disabled-on-inverse-subtle-level-2: var(--dk-surface-disabled-subtle);
  --dk-icon-control-disabled-on-inverse-solid: var(--dk-icon-disabled-subtle);
  --dk-text-control-disabled-on-inverse-solid: var(--dk-text-disabled-subtle);
  --dk-surface-control-disabled-on-inverse-solid: var(--dk-surface-disabled-subtle);
  --dk-icon-control-disabled-on-inverse-solid-level-1: var(--dk-icon-disabled-subtle);
  --dk-text-control-disabled-on-inverse-solid-level-1: var(--dk-text-disabled-subtle);
  --dk-surface-control-disabled-on-inverse-solid-level-1: var(--dk-surface-disabled-subtle);
  --dk-icon-control-disabled-on-inverse-solid-level-2: var(--dk-icon-disabled-subtle);
  --dk-text-control-disabled-on-inverse-solid-level-2: var(--dk-text-disabled-subtle);
  --dk-surface-control-disabled-on-inverse-solid-level-2: var(--dk-surface-disabled-subtle);
}

/* The per-tone layer: which ramp a tone reads. */
[data-theme] [data-tone="primary"]:not([data-theme]),
[data-theme][data-tone="primary"] {
  --_tone-surface-control-default-0: var(--dk-surface-control-default-on-primary-subtle-level-0);
  --_tone-surface-control-default-1: var(--dk-surface-control-default-on-primary-subtle-level-1);
  --_tone-surface-control-default-2: var(--dk-surface-control-default-on-primary-subtle-level-2);
  --_tone-surface-control-default-solid: var(--dk-surface-control-default-on-primary-solid);
  --_tone-surface-control-default-solid1: var(--dk-surface-control-default-on-primary-solid-level-1);
  --_tone-surface-control-default-solid2: var(--dk-surface-control-default-on-primary-solid-level-2);
  --_tone-surface-control-hover-0: var(--dk-surface-control-hover-on-primary-subtle-level-0);
  --_tone-surface-control-hover-1: var(--dk-surface-control-hover-on-primary-subtle-level-1);
  --_tone-surface-control-hover-2: var(--dk-surface-control-hover-on-primary-subtle-level-2);
  --_tone-surface-control-hover-solid: var(--dk-surface-control-hover-on-primary-solid);
  --_tone-surface-control-hover-solid1: var(--dk-surface-control-hover-on-primary-solid-level-1);
  --_tone-surface-control-hover-solid2: var(--dk-surface-control-hover-on-primary-solid-level-2);
  --_tone-surface-control-active-0: var(--dk-surface-control-active-on-primary-subtle-level-0);
  --_tone-surface-control-active-1: var(--dk-surface-control-active-on-primary-subtle-level-1);
  --_tone-surface-control-active-2: var(--dk-surface-control-active-on-primary-subtle-level-2);
  --_tone-surface-control-active-solid: var(--dk-surface-control-active-on-primary-solid);
  --_tone-surface-control-active-solid1: var(--dk-surface-control-active-on-primary-solid-level-1);
  --_tone-surface-control-active-solid2: var(--dk-surface-control-active-on-primary-solid-level-2);
  --_tone-border-control-default-0: var(--dk-border-control-default-on-primary-subtle-level-0);
  --_tone-border-control-default-1: var(--dk-border-control-default-on-primary-subtle-level-1);
  --_tone-border-control-default-2: var(--dk-border-control-default-on-primary-subtle-level-2);
  --_tone-border-control-default-solid: var(--dk-border-control-default-on-primary-solid);
  --_tone-border-control-default-solid1: var(--dk-border-control-default-on-primary-solid-level-1);
  --_tone-border-control-default-solid2: var(--dk-border-control-default-on-primary-solid-level-2);
  --_tone-border-control-hover-0: var(--dk-border-control-hover-on-primary-subtle-level-0);
  --_tone-border-control-hover-1: var(--dk-border-control-hover-on-primary-subtle-level-1);
  --_tone-border-control-hover-2: var(--dk-border-control-hover-on-primary-subtle-level-2);
  --_tone-border-control-hover-solid: var(--dk-border-control-hover-on-primary-solid);
  --_tone-border-control-hover-solid1: var(--dk-border-control-hover-on-primary-solid-level-1);
  --_tone-border-control-hover-solid2: var(--dk-border-control-hover-on-primary-solid-level-2);
  --_tone-border-control-active-0: var(--dk-border-control-active-on-primary-subtle-level-0);
  --_tone-border-control-active-1: var(--dk-border-control-active-on-primary-subtle-level-1);
  --_tone-border-control-active-2: var(--dk-border-control-active-on-primary-subtle-level-2);
  --_tone-border-control-active-solid: var(--dk-border-control-active-on-primary-solid);
  --_tone-border-control-active-solid1: var(--dk-border-control-active-on-primary-solid-level-1);
  --_tone-border-control-active-solid2: var(--dk-border-control-active-on-primary-solid-level-2);
  --_tone-icon-control-default-0: var(--dk-icon-control-default-on-primary-subtle-level-0);
  --_tone-icon-control-default-1: var(--dk-icon-control-default-on-primary-subtle-level-1);
  --_tone-icon-control-default-2: var(--dk-icon-control-default-on-primary-subtle-level-2);
  --_tone-icon-control-default-solid: var(--dk-icon-control-default-on-primary-solid);
  --_tone-icon-control-default-solid1: var(--dk-icon-control-default-on-primary-solid-level-1);
  --_tone-icon-control-default-solid2: var(--dk-icon-control-default-on-primary-solid-level-2);
  --_tone-icon-control-hover-0: var(--dk-icon-control-hover-on-primary-subtle-level-0);
  --_tone-icon-control-hover-1: var(--dk-icon-control-hover-on-primary-subtle-level-1);
  --_tone-icon-control-hover-2: var(--dk-icon-control-hover-on-primary-subtle-level-2);
  --_tone-icon-control-hover-solid: var(--dk-icon-control-hover-on-primary-solid);
  --_tone-icon-control-hover-solid1: var(--dk-icon-control-hover-on-primary-solid-level-1);
  --_tone-icon-control-hover-solid2: var(--dk-icon-control-hover-on-primary-solid-level-2);
  --_tone-icon-control-active-0: var(--dk-icon-control-active-on-primary-subtle-level-0);
  --_tone-icon-control-active-1: var(--dk-icon-control-active-on-primary-subtle-level-1);
  --_tone-icon-control-active-2: var(--dk-icon-control-active-on-primary-subtle-level-2);
  --_tone-icon-control-active-solid: var(--dk-icon-control-active-on-primary-solid);
  --_tone-icon-control-active-solid1: var(--dk-icon-control-active-on-primary-solid-level-1);
  --_tone-icon-control-active-solid2: var(--dk-icon-control-active-on-primary-solid-level-2);
  --_tone-icon-control-disabled-0: var(--dk-icon-control-disabled-on-primary-subtle-level-0);
  --_tone-icon-control-disabled-1: var(--dk-icon-control-disabled-on-primary-subtle-level-1);
  --_tone-icon-control-disabled-2: var(--dk-icon-control-disabled-on-primary-subtle-level-2);
  --_tone-icon-control-disabled-solid: var(--dk-icon-control-disabled-on-primary-solid);
  --_tone-icon-control-disabled-solid1: var(--dk-icon-control-disabled-on-primary-solid-level-1);
  --_tone-icon-control-disabled-solid2: var(--dk-icon-control-disabled-on-primary-solid-level-2);
  --_tone-text-control-default-0: var(--dk-text-control-default-on-primary-subtle-level-0);
  --_tone-text-control-default-1: var(--dk-text-control-default-on-primary-subtle-level-1);
  --_tone-text-control-default-2: var(--dk-text-control-default-on-primary-subtle-level-2);
  --_tone-text-control-default-solid: var(--dk-text-control-default-on-primary-solid);
  --_tone-text-control-default-solid1: var(--dk-text-control-default-on-primary-solid-level-1);
  --_tone-text-control-default-solid2: var(--dk-text-control-default-on-primary-solid-level-2);
  --_tone-text-control-hover-0: var(--dk-text-control-hover-on-primary-subtle-level-0);
  --_tone-text-control-hover-1: var(--dk-text-control-hover-on-primary-subtle-level-1);
  --_tone-text-control-hover-2: var(--dk-text-control-hover-on-primary-subtle-level-2);
  --_tone-text-control-hover-solid: var(--dk-text-control-hover-on-primary-solid);
  --_tone-text-control-hover-solid1: var(--dk-text-control-hover-on-primary-solid-level-1);
  --_tone-text-control-hover-solid2: var(--dk-text-control-hover-on-primary-solid-level-2);
  --_tone-text-control-active-0: var(--dk-text-control-active-on-primary-subtle-level-0);
  --_tone-text-control-active-1: var(--dk-text-control-active-on-primary-subtle-level-1);
  --_tone-text-control-active-2: var(--dk-text-control-active-on-primary-subtle-level-2);
  --_tone-text-control-active-solid: var(--dk-text-control-active-on-primary-solid);
  --_tone-text-control-active-solid1: var(--dk-text-control-active-on-primary-solid-level-1);
  --_tone-text-control-active-solid2: var(--dk-text-control-active-on-primary-solid-level-2);
  --_tone-text-control-disabled-0: var(--dk-text-control-disabled-on-primary-subtle-level-0);
  --_tone-text-control-disabled-1: var(--dk-text-control-disabled-on-primary-subtle-level-1);
  --_tone-text-control-disabled-2: var(--dk-text-control-disabled-on-primary-subtle-level-2);
  --_tone-text-control-disabled-solid: var(--dk-text-control-disabled-on-primary-solid);
  --_tone-text-control-disabled-solid1: var(--dk-text-control-disabled-on-primary-solid-level-1);
  --_tone-text-control-disabled-solid2: var(--dk-text-control-disabled-on-primary-solid-level-2);
  --_tone-surface-control-disabled-0: var(--dk-surface-control-disabled-on-primary-subtle-level-0);
  --_tone-surface-control-disabled-1: var(--dk-surface-control-disabled-on-primary-subtle-level-1);
  --_tone-surface-control-disabled-2: var(--dk-surface-control-disabled-on-primary-subtle-level-2);
  --_tone-surface-control-disabled-solid: var(--dk-surface-control-disabled-on-primary-solid);
  --_tone-surface-control-disabled-solid1: var(--dk-surface-control-disabled-on-primary-solid-level-1);
  --_tone-surface-control-disabled-solid2: var(--dk-surface-control-disabled-on-primary-solid-level-2);
}
[data-theme] [data-tone="success"]:not([data-theme]),
[data-theme][data-tone="success"] {
  --_tone-surface-control-default-0: var(--dk-surface-control-default-on-success-subtle-level-0);
  --_tone-surface-control-default-1: var(--dk-surface-control-default-on-success-subtle-level-1);
  --_tone-surface-control-default-2: var(--dk-surface-control-default-on-success-subtle-level-2);
  --_tone-surface-control-default-solid: var(--dk-surface-control-default-on-success-solid);
  --_tone-surface-control-default-solid1: var(--dk-surface-control-default-on-success-solid-level-1);
  --_tone-surface-control-default-solid2: var(--dk-surface-control-default-on-success-solid-level-2);
  --_tone-surface-control-hover-0: var(--dk-surface-control-hover-on-success-subtle-level-0);
  --_tone-surface-control-hover-1: var(--dk-surface-control-hover-on-success-subtle-level-1);
  --_tone-surface-control-hover-2: var(--dk-surface-control-hover-on-success-subtle-level-2);
  --_tone-surface-control-hover-solid: var(--dk-surface-control-hover-on-success-solid);
  --_tone-surface-control-hover-solid1: var(--dk-surface-control-hover-on-success-solid-level-1);
  --_tone-surface-control-hover-solid2: var(--dk-surface-control-hover-on-success-solid-level-2);
  --_tone-surface-control-active-0: var(--dk-surface-control-active-on-success-subtle-level-0);
  --_tone-surface-control-active-1: var(--dk-surface-control-active-on-success-subtle-level-1);
  --_tone-surface-control-active-2: var(--dk-surface-control-active-on-success-subtle-level-2);
  --_tone-surface-control-active-solid: var(--dk-surface-control-active-on-success-solid);
  --_tone-surface-control-active-solid1: var(--dk-surface-control-active-on-success-solid-level-1);
  --_tone-surface-control-active-solid2: var(--dk-surface-control-active-on-success-solid-level-2);
  --_tone-border-control-default-0: var(--dk-border-control-default-on-success-subtle-level-0);
  --_tone-border-control-default-1: var(--dk-border-control-default-on-success-subtle-level-1);
  --_tone-border-control-default-2: var(--dk-border-control-default-on-success-subtle-level-2);
  --_tone-border-control-default-solid: var(--dk-border-control-default-on-success-solid);
  --_tone-border-control-default-solid1: var(--dk-border-control-default-on-success-solid-level-1);
  --_tone-border-control-default-solid2: var(--dk-border-control-default-on-success-solid-level-2);
  --_tone-border-control-hover-0: var(--dk-border-control-hover-on-success-subtle-level-0);
  --_tone-border-control-hover-1: var(--dk-border-control-hover-on-success-subtle-level-1);
  --_tone-border-control-hover-2: var(--dk-border-control-hover-on-success-subtle-level-2);
  --_tone-border-control-hover-solid: var(--dk-border-control-hover-on-success-solid);
  --_tone-border-control-hover-solid1: var(--dk-border-control-hover-on-success-solid-level-1);
  --_tone-border-control-hover-solid2: var(--dk-border-control-hover-on-success-solid-level-2);
  --_tone-border-control-active-0: var(--dk-border-control-active-on-success-subtle-level-0);
  --_tone-border-control-active-1: var(--dk-border-control-active-on-success-subtle-level-1);
  --_tone-border-control-active-2: var(--dk-border-control-active-on-success-subtle-level-2);
  --_tone-border-control-active-solid: var(--dk-border-control-active-on-success-solid);
  --_tone-border-control-active-solid1: var(--dk-border-control-active-on-success-solid-level-1);
  --_tone-border-control-active-solid2: var(--dk-border-control-active-on-success-solid-level-2);
  --_tone-icon-control-default-0: var(--dk-icon-control-default-on-success-subtle-level-0);
  --_tone-icon-control-default-1: var(--dk-icon-control-default-on-success-subtle-level-1);
  --_tone-icon-control-default-2: var(--dk-icon-control-default-on-success-subtle-level-2);
  --_tone-icon-control-default-solid: var(--dk-icon-control-default-on-success-solid);
  --_tone-icon-control-default-solid1: var(--dk-icon-control-default-on-success-solid-level-1);
  --_tone-icon-control-default-solid2: var(--dk-icon-control-default-on-success-solid-level-2);
  --_tone-icon-control-hover-0: var(--dk-icon-control-hover-on-success-subtle-level-0);
  --_tone-icon-control-hover-1: var(--dk-icon-control-hover-on-success-subtle-level-1);
  --_tone-icon-control-hover-2: var(--dk-icon-control-hover-on-success-subtle-level-2);
  --_tone-icon-control-hover-solid: var(--dk-icon-control-hover-on-success-solid);
  --_tone-icon-control-hover-solid1: var(--dk-icon-control-hover-on-success-solid-level-1);
  --_tone-icon-control-hover-solid2: var(--dk-icon-control-hover-on-success-solid-level-2);
  --_tone-icon-control-active-0: var(--dk-icon-control-active-on-success-subtle-level-0);
  --_tone-icon-control-active-1: var(--dk-icon-control-active-on-success-subtle-level-1);
  --_tone-icon-control-active-2: var(--dk-icon-control-active-on-success-subtle-level-2);
  --_tone-icon-control-active-solid: var(--dk-icon-control-active-on-success-solid);
  --_tone-icon-control-active-solid1: var(--dk-icon-control-active-on-success-solid-level-1);
  --_tone-icon-control-active-solid2: var(--dk-icon-control-active-on-success-solid-level-2);
  --_tone-icon-control-disabled-0: var(--dk-icon-control-disabled-on-success-subtle-level-0);
  --_tone-icon-control-disabled-1: var(--dk-icon-control-disabled-on-success-subtle-level-1);
  --_tone-icon-control-disabled-2: var(--dk-icon-control-disabled-on-success-subtle-level-2);
  --_tone-icon-control-disabled-solid: var(--dk-icon-control-disabled-on-success-solid);
  --_tone-icon-control-disabled-solid1: var(--dk-icon-control-disabled-on-success-solid-level-1);
  --_tone-icon-control-disabled-solid2: var(--dk-icon-control-disabled-on-success-solid-level-2);
  --_tone-text-control-default-0: var(--dk-text-control-default-on-success-subtle-level-0);
  --_tone-text-control-default-1: var(--dk-text-control-default-on-success-subtle-level-1);
  --_tone-text-control-default-2: var(--dk-text-control-default-on-success-subtle-level-2);
  --_tone-text-control-default-solid: var(--dk-text-control-default-on-success-solid);
  --_tone-text-control-default-solid1: var(--dk-text-control-default-on-success-solid-level-1);
  --_tone-text-control-default-solid2: var(--dk-text-control-default-on-success-solid-level-2);
  --_tone-text-control-hover-0: var(--dk-text-control-hover-on-success-subtle-level-0);
  --_tone-text-control-hover-1: var(--dk-text-control-hover-on-success-subtle-level-1);
  --_tone-text-control-hover-2: var(--dk-text-control-hover-on-success-subtle-level-2);
  --_tone-text-control-hover-solid: var(--dk-text-control-hover-on-success-solid);
  --_tone-text-control-hover-solid1: var(--dk-text-control-hover-on-success-solid-level-1);
  --_tone-text-control-hover-solid2: var(--dk-text-control-hover-on-success-solid-level-2);
  --_tone-text-control-active-0: var(--dk-text-control-active-on-success-subtle-level-0);
  --_tone-text-control-active-1: var(--dk-text-control-active-on-success-subtle-level-1);
  --_tone-text-control-active-2: var(--dk-text-control-active-on-success-subtle-level-2);
  --_tone-text-control-active-solid: var(--dk-text-control-active-on-success-solid);
  --_tone-text-control-active-solid1: var(--dk-text-control-active-on-success-solid-level-1);
  --_tone-text-control-active-solid2: var(--dk-text-control-active-on-success-solid-level-2);
  --_tone-text-control-disabled-0: var(--dk-text-control-disabled-on-success-subtle-level-0);
  --_tone-text-control-disabled-1: var(--dk-text-control-disabled-on-success-subtle-level-1);
  --_tone-text-control-disabled-2: var(--dk-text-control-disabled-on-success-subtle-level-2);
  --_tone-text-control-disabled-solid: var(--dk-text-control-disabled-on-success-solid);
  --_tone-text-control-disabled-solid1: var(--dk-text-control-disabled-on-success-solid-level-1);
  --_tone-text-control-disabled-solid2: var(--dk-text-control-disabled-on-success-solid-level-2);
  --_tone-surface-control-disabled-0: var(--dk-surface-control-disabled-on-success-subtle-level-0);
  --_tone-surface-control-disabled-1: var(--dk-surface-control-disabled-on-success-subtle-level-1);
  --_tone-surface-control-disabled-2: var(--dk-surface-control-disabled-on-success-subtle-level-2);
  --_tone-surface-control-disabled-solid: var(--dk-surface-control-disabled-on-success-solid);
  --_tone-surface-control-disabled-solid1: var(--dk-surface-control-disabled-on-success-solid-level-1);
  --_tone-surface-control-disabled-solid2: var(--dk-surface-control-disabled-on-success-solid-level-2);
}
[data-theme] [data-tone="error"]:not([data-theme]),
[data-theme][data-tone="error"] {
  --_tone-surface-control-default-0: var(--dk-surface-control-default-on-error-subtle-level-0);
  --_tone-surface-control-default-1: var(--dk-surface-control-default-on-error-subtle-level-1);
  --_tone-surface-control-default-2: var(--dk-surface-control-default-on-error-subtle-level-2);
  --_tone-surface-control-default-solid: var(--dk-surface-control-default-on-error-solid);
  --_tone-surface-control-default-solid1: var(--dk-surface-control-default-on-error-solid-level-1);
  --_tone-surface-control-default-solid2: var(--dk-surface-control-default-on-error-solid-level-2);
  --_tone-surface-control-hover-0: var(--dk-surface-control-hover-on-error-subtle-level-0);
  --_tone-surface-control-hover-1: var(--dk-surface-control-hover-on-error-subtle-level-1);
  --_tone-surface-control-hover-2: var(--dk-surface-control-hover-on-error-subtle-level-2);
  --_tone-surface-control-hover-solid: var(--dk-surface-control-hover-on-error-solid);
  --_tone-surface-control-hover-solid1: var(--dk-surface-control-hover-on-error-solid-level-1);
  --_tone-surface-control-hover-solid2: var(--dk-surface-control-hover-on-error-solid-level-2);
  --_tone-surface-control-active-0: var(--dk-surface-control-active-on-error-subtle-level-0);
  --_tone-surface-control-active-1: var(--dk-surface-control-active-on-error-subtle-level-1);
  --_tone-surface-control-active-2: var(--dk-surface-control-active-on-error-subtle-level-2);
  --_tone-surface-control-active-solid: var(--dk-surface-control-active-on-error-solid);
  --_tone-surface-control-active-solid1: var(--dk-surface-control-active-on-error-solid-level-1);
  --_tone-surface-control-active-solid2: var(--dk-surface-control-active-on-error-solid-level-2);
  --_tone-border-control-default-0: var(--dk-border-control-default-on-error-subtle-level-0);
  --_tone-border-control-default-1: var(--dk-border-control-default-on-error-subtle-level-1);
  --_tone-border-control-default-2: var(--dk-border-control-default-on-error-subtle-level-2);
  --_tone-border-control-default-solid: var(--dk-border-control-default-on-error-solid);
  --_tone-border-control-default-solid1: var(--dk-border-control-default-on-error-solid-level-1);
  --_tone-border-control-default-solid2: var(--dk-border-control-default-on-error-solid-level-2);
  --_tone-border-control-hover-0: var(--dk-border-control-hover-on-error-subtle-level-0);
  --_tone-border-control-hover-1: var(--dk-border-control-hover-on-error-subtle-level-1);
  --_tone-border-control-hover-2: var(--dk-border-control-hover-on-error-subtle-level-2);
  --_tone-border-control-hover-solid: var(--dk-border-control-hover-on-error-solid);
  --_tone-border-control-hover-solid1: var(--dk-border-control-hover-on-error-solid-level-1);
  --_tone-border-control-hover-solid2: var(--dk-border-control-hover-on-error-solid-level-2);
  --_tone-border-control-active-0: var(--dk-border-control-active-on-error-subtle-level-0);
  --_tone-border-control-active-1: var(--dk-border-control-active-on-error-subtle-level-1);
  --_tone-border-control-active-2: var(--dk-border-control-active-on-error-subtle-level-2);
  --_tone-border-control-active-solid: var(--dk-border-control-active-on-error-solid);
  --_tone-border-control-active-solid1: var(--dk-border-control-active-on-error-solid-level-1);
  --_tone-border-control-active-solid2: var(--dk-border-control-active-on-error-solid-level-2);
  --_tone-icon-control-default-0: var(--dk-icon-control-default-on-error-subtle-level-0);
  --_tone-icon-control-default-1: var(--dk-icon-control-default-on-error-subtle-level-1);
  --_tone-icon-control-default-2: var(--dk-icon-control-default-on-error-subtle-level-2);
  --_tone-icon-control-default-solid: var(--dk-icon-control-default-on-error-solid);
  --_tone-icon-control-default-solid1: var(--dk-icon-control-default-on-error-solid-level-1);
  --_tone-icon-control-default-solid2: var(--dk-icon-control-default-on-error-solid-level-2);
  --_tone-icon-control-hover-0: var(--dk-icon-control-hover-on-error-subtle-level-0);
  --_tone-icon-control-hover-1: var(--dk-icon-control-hover-on-error-subtle-level-1);
  --_tone-icon-control-hover-2: var(--dk-icon-control-hover-on-error-subtle-level-2);
  --_tone-icon-control-hover-solid: var(--dk-icon-control-hover-on-error-solid);
  --_tone-icon-control-hover-solid1: var(--dk-icon-control-hover-on-error-solid-level-1);
  --_tone-icon-control-hover-solid2: var(--dk-icon-control-hover-on-error-solid-level-2);
  --_tone-icon-control-active-0: var(--dk-icon-control-active-on-error-subtle-level-0);
  --_tone-icon-control-active-1: var(--dk-icon-control-active-on-error-subtle-level-1);
  --_tone-icon-control-active-2: var(--dk-icon-control-active-on-error-subtle-level-2);
  --_tone-icon-control-active-solid: var(--dk-icon-control-active-on-error-solid);
  --_tone-icon-control-active-solid1: var(--dk-icon-control-active-on-error-solid-level-1);
  --_tone-icon-control-active-solid2: var(--dk-icon-control-active-on-error-solid-level-2);
  --_tone-icon-control-disabled-0: var(--dk-icon-control-disabled-on-error-subtle-level-0);
  --_tone-icon-control-disabled-1: var(--dk-icon-control-disabled-on-error-subtle-level-1);
  --_tone-icon-control-disabled-2: var(--dk-icon-control-disabled-on-error-subtle-level-2);
  --_tone-icon-control-disabled-solid: var(--dk-icon-control-disabled-on-error-solid);
  --_tone-icon-control-disabled-solid1: var(--dk-icon-control-disabled-on-error-solid-level-1);
  --_tone-icon-control-disabled-solid2: var(--dk-icon-control-disabled-on-error-solid-level-2);
  --_tone-text-control-default-0: var(--dk-text-control-default-on-error-subtle-level-0);
  --_tone-text-control-default-1: var(--dk-text-control-default-on-error-subtle-level-1);
  --_tone-text-control-default-2: var(--dk-text-control-default-on-error-subtle-level-2);
  --_tone-text-control-default-solid: var(--dk-text-control-default-on-error-solid);
  --_tone-text-control-default-solid1: var(--dk-text-control-default-on-error-solid-level-1);
  --_tone-text-control-default-solid2: var(--dk-text-control-default-on-error-solid-level-2);
  --_tone-text-control-hover-0: var(--dk-text-control-hover-on-error-subtle-level-0);
  --_tone-text-control-hover-1: var(--dk-text-control-hover-on-error-subtle-level-1);
  --_tone-text-control-hover-2: var(--dk-text-control-hover-on-error-subtle-level-2);
  --_tone-text-control-hover-solid: var(--dk-text-control-hover-on-error-solid);
  --_tone-text-control-hover-solid1: var(--dk-text-control-hover-on-error-solid-level-1);
  --_tone-text-control-hover-solid2: var(--dk-text-control-hover-on-error-solid-level-2);
  --_tone-text-control-active-0: var(--dk-text-control-active-on-error-subtle-level-0);
  --_tone-text-control-active-1: var(--dk-text-control-active-on-error-subtle-level-1);
  --_tone-text-control-active-2: var(--dk-text-control-active-on-error-subtle-level-2);
  --_tone-text-control-active-solid: var(--dk-text-control-active-on-error-solid);
  --_tone-text-control-active-solid1: var(--dk-text-control-active-on-error-solid-level-1);
  --_tone-text-control-active-solid2: var(--dk-text-control-active-on-error-solid-level-2);
  --_tone-text-control-disabled-0: var(--dk-text-control-disabled-on-error-subtle-level-0);
  --_tone-text-control-disabled-1: var(--dk-text-control-disabled-on-error-subtle-level-1);
  --_tone-text-control-disabled-2: var(--dk-text-control-disabled-on-error-subtle-level-2);
  --_tone-text-control-disabled-solid: var(--dk-text-control-disabled-on-error-solid);
  --_tone-text-control-disabled-solid1: var(--dk-text-control-disabled-on-error-solid-level-1);
  --_tone-text-control-disabled-solid2: var(--dk-text-control-disabled-on-error-solid-level-2);
  --_tone-surface-control-disabled-0: var(--dk-surface-control-disabled-on-error-subtle-level-0);
  --_tone-surface-control-disabled-1: var(--dk-surface-control-disabled-on-error-subtle-level-1);
  --_tone-surface-control-disabled-2: var(--dk-surface-control-disabled-on-error-subtle-level-2);
  --_tone-surface-control-disabled-solid: var(--dk-surface-control-disabled-on-error-solid);
  --_tone-surface-control-disabled-solid1: var(--dk-surface-control-disabled-on-error-solid-level-1);
  --_tone-surface-control-disabled-solid2: var(--dk-surface-control-disabled-on-error-solid-level-2);
}
[data-theme] [data-tone="warning"]:not([data-theme]),
[data-theme][data-tone="warning"] {
  --_tone-surface-control-default-0: var(--dk-surface-control-default-on-warning-subtle-level-0);
  --_tone-surface-control-default-1: var(--dk-surface-control-default-on-warning-subtle-level-1);
  --_tone-surface-control-default-2: var(--dk-surface-control-default-on-warning-subtle-level-2);
  --_tone-surface-control-default-solid: var(--dk-surface-control-default-on-warning-solid);
  --_tone-surface-control-default-solid1: var(--dk-surface-control-default-on-warning-solid-level-1);
  --_tone-surface-control-default-solid2: var(--dk-surface-control-default-on-warning-solid-level-2);
  --_tone-surface-control-hover-0: var(--dk-surface-control-hover-on-warning-subtle-level-0);
  --_tone-surface-control-hover-1: var(--dk-surface-control-hover-on-warning-subtle-level-1);
  --_tone-surface-control-hover-2: var(--dk-surface-control-hover-on-warning-subtle-level-2);
  --_tone-surface-control-hover-solid: var(--dk-surface-control-hover-on-warning-solid);
  --_tone-surface-control-hover-solid1: var(--dk-surface-control-hover-on-warning-solid-level-1);
  --_tone-surface-control-hover-solid2: var(--dk-surface-control-hover-on-warning-solid-level-2);
  --_tone-surface-control-active-0: var(--dk-surface-control-active-on-warning-subtle-level-0);
  --_tone-surface-control-active-1: var(--dk-surface-control-active-on-warning-subtle-level-1);
  --_tone-surface-control-active-2: var(--dk-surface-control-active-on-warning-subtle-level-2);
  --_tone-surface-control-active-solid: var(--dk-surface-control-active-on-warning-solid);
  --_tone-surface-control-active-solid1: var(--dk-surface-control-active-on-warning-solid-level-1);
  --_tone-surface-control-active-solid2: var(--dk-surface-control-active-on-warning-solid-level-2);
  --_tone-border-control-default-0: var(--dk-border-control-default-on-warning-subtle-level-0);
  --_tone-border-control-default-1: var(--dk-border-control-default-on-warning-subtle-level-1);
  --_tone-border-control-default-2: var(--dk-border-control-default-on-warning-subtle-level-2);
  --_tone-border-control-default-solid: var(--dk-border-control-default-on-warning-solid);
  --_tone-border-control-default-solid1: var(--dk-border-control-default-on-warning-solid-level-1);
  --_tone-border-control-default-solid2: var(--dk-border-control-default-on-warning-solid-level-2);
  --_tone-border-control-hover-0: var(--dk-border-control-hover-on-warning-subtle-level-0);
  --_tone-border-control-hover-1: var(--dk-border-control-hover-on-warning-subtle-level-1);
  --_tone-border-control-hover-2: var(--dk-border-control-hover-on-warning-subtle-level-2);
  --_tone-border-control-hover-solid: var(--dk-border-control-hover-on-warning-solid);
  --_tone-border-control-hover-solid1: var(--dk-border-control-hover-on-warning-solid-level-1);
  --_tone-border-control-hover-solid2: var(--dk-border-control-hover-on-warning-solid-level-2);
  --_tone-border-control-active-0: var(--dk-border-control-active-on-warning-subtle-level-0);
  --_tone-border-control-active-1: var(--dk-border-control-active-on-warning-subtle-level-1);
  --_tone-border-control-active-2: var(--dk-border-control-active-on-warning-subtle-level-2);
  --_tone-border-control-active-solid: var(--dk-border-control-active-on-warning-solid);
  --_tone-border-control-active-solid1: var(--dk-border-control-active-on-warning-solid-level-1);
  --_tone-border-control-active-solid2: var(--dk-border-control-active-on-warning-solid-level-2);
  --_tone-icon-control-default-0: var(--dk-icon-control-default-on-warning-subtle-level-0);
  --_tone-icon-control-default-1: var(--dk-icon-control-default-on-warning-subtle-level-1);
  --_tone-icon-control-default-2: var(--dk-icon-control-default-on-warning-subtle-level-2);
  --_tone-icon-control-default-solid: var(--dk-icon-control-default-on-warning-solid);
  --_tone-icon-control-default-solid1: var(--dk-icon-control-default-on-warning-solid-level-1);
  --_tone-icon-control-default-solid2: var(--dk-icon-control-default-on-warning-solid-level-2);
  --_tone-icon-control-hover-0: var(--dk-icon-control-hover-on-warning-subtle-level-0);
  --_tone-icon-control-hover-1: var(--dk-icon-control-hover-on-warning-subtle-level-1);
  --_tone-icon-control-hover-2: var(--dk-icon-control-hover-on-warning-subtle-level-2);
  --_tone-icon-control-hover-solid: var(--dk-icon-control-hover-on-warning-solid);
  --_tone-icon-control-hover-solid1: var(--dk-icon-control-hover-on-warning-solid-level-1);
  --_tone-icon-control-hover-solid2: var(--dk-icon-control-hover-on-warning-solid-level-2);
  --_tone-icon-control-active-0: var(--dk-icon-control-active-on-warning-subtle-level-0);
  --_tone-icon-control-active-1: var(--dk-icon-control-active-on-warning-subtle-level-1);
  --_tone-icon-control-active-2: var(--dk-icon-control-active-on-warning-subtle-level-2);
  --_tone-icon-control-active-solid: var(--dk-icon-control-active-on-warning-solid);
  --_tone-icon-control-active-solid1: var(--dk-icon-control-active-on-warning-solid-level-1);
  --_tone-icon-control-active-solid2: var(--dk-icon-control-active-on-warning-solid-level-2);
  --_tone-icon-control-disabled-0: var(--dk-icon-control-disabled-on-warning-subtle-level-0);
  --_tone-icon-control-disabled-1: var(--dk-icon-control-disabled-on-warning-subtle-level-1);
  --_tone-icon-control-disabled-2: var(--dk-icon-control-disabled-on-warning-subtle-level-2);
  --_tone-icon-control-disabled-solid: var(--dk-icon-control-disabled-on-warning-solid);
  --_tone-icon-control-disabled-solid1: var(--dk-icon-control-disabled-on-warning-solid-level-1);
  --_tone-icon-control-disabled-solid2: var(--dk-icon-control-disabled-on-warning-solid-level-2);
  --_tone-text-control-default-0: var(--dk-text-control-default-on-warning-subtle-level-0);
  --_tone-text-control-default-1: var(--dk-text-control-default-on-warning-subtle-level-1);
  --_tone-text-control-default-2: var(--dk-text-control-default-on-warning-subtle-level-2);
  --_tone-text-control-default-solid: var(--dk-text-control-default-on-warning-solid);
  --_tone-text-control-default-solid1: var(--dk-text-control-default-on-warning-solid-level-1);
  --_tone-text-control-default-solid2: var(--dk-text-control-default-on-warning-solid-level-2);
  --_tone-text-control-hover-0: var(--dk-text-control-hover-on-warning-subtle-level-0);
  --_tone-text-control-hover-1: var(--dk-text-control-hover-on-warning-subtle-level-1);
  --_tone-text-control-hover-2: var(--dk-text-control-hover-on-warning-subtle-level-2);
  --_tone-text-control-hover-solid: var(--dk-text-control-hover-on-warning-solid);
  --_tone-text-control-hover-solid1: var(--dk-text-control-hover-on-warning-solid-level-1);
  --_tone-text-control-hover-solid2: var(--dk-text-control-hover-on-warning-solid-level-2);
  --_tone-text-control-active-0: var(--dk-text-control-active-on-warning-subtle-level-0);
  --_tone-text-control-active-1: var(--dk-text-control-active-on-warning-subtle-level-1);
  --_tone-text-control-active-2: var(--dk-text-control-active-on-warning-subtle-level-2);
  --_tone-text-control-active-solid: var(--dk-text-control-active-on-warning-solid);
  --_tone-text-control-active-solid1: var(--dk-text-control-active-on-warning-solid-level-1);
  --_tone-text-control-active-solid2: var(--dk-text-control-active-on-warning-solid-level-2);
  --_tone-text-control-disabled-0: var(--dk-text-control-disabled-on-warning-subtle-level-0);
  --_tone-text-control-disabled-1: var(--dk-text-control-disabled-on-warning-subtle-level-1);
  --_tone-text-control-disabled-2: var(--dk-text-control-disabled-on-warning-subtle-level-2);
  --_tone-text-control-disabled-solid: var(--dk-text-control-disabled-on-warning-solid);
  --_tone-text-control-disabled-solid1: var(--dk-text-control-disabled-on-warning-solid-level-1);
  --_tone-text-control-disabled-solid2: var(--dk-text-control-disabled-on-warning-solid-level-2);
  --_tone-surface-control-disabled-0: var(--dk-surface-control-disabled-on-warning-subtle-level-0);
  --_tone-surface-control-disabled-1: var(--dk-surface-control-disabled-on-warning-subtle-level-1);
  --_tone-surface-control-disabled-2: var(--dk-surface-control-disabled-on-warning-subtle-level-2);
  --_tone-surface-control-disabled-solid: var(--dk-surface-control-disabled-on-warning-solid);
  --_tone-surface-control-disabled-solid1: var(--dk-surface-control-disabled-on-warning-solid-level-1);
  --_tone-surface-control-disabled-solid2: var(--dk-surface-control-disabled-on-warning-solid-level-2);
}
[data-theme] [data-tone="information"]:not([data-theme]),
[data-theme][data-tone="information"] {
  --_tone-surface-control-default-0: var(--dk-surface-control-default-on-information-subtle-level-0);
  --_tone-surface-control-default-1: var(--dk-surface-control-default-on-information-subtle-level-1);
  --_tone-surface-control-default-2: var(--dk-surface-control-default-on-information-subtle-level-2);
  --_tone-surface-control-default-solid: var(--dk-surface-control-default-on-information-solid);
  --_tone-surface-control-default-solid1: var(--dk-surface-control-default-on-information-solid-level-1);
  --_tone-surface-control-default-solid2: var(--dk-surface-control-default-on-information-solid-level-2);
  --_tone-surface-control-hover-0: var(--dk-surface-control-hover-on-information-subtle-level-0);
  --_tone-surface-control-hover-1: var(--dk-surface-control-hover-on-information-subtle-level-1);
  --_tone-surface-control-hover-2: var(--dk-surface-control-hover-on-information-subtle-level-2);
  --_tone-surface-control-hover-solid: var(--dk-surface-control-hover-on-information-solid);
  --_tone-surface-control-hover-solid1: var(--dk-surface-control-hover-on-information-solid-level-1);
  --_tone-surface-control-hover-solid2: var(--dk-surface-control-hover-on-information-solid-level-2);
  --_tone-surface-control-active-0: var(--dk-surface-control-active-on-information-subtle-level-0);
  --_tone-surface-control-active-1: var(--dk-surface-control-active-on-information-subtle-level-1);
  --_tone-surface-control-active-2: var(--dk-surface-control-active-on-information-subtle-level-2);
  --_tone-surface-control-active-solid: var(--dk-surface-control-active-on-information-solid);
  --_tone-surface-control-active-solid1: var(--dk-surface-control-active-on-information-solid-level-1);
  --_tone-surface-control-active-solid2: var(--dk-surface-control-active-on-information-solid-level-2);
  --_tone-border-control-default-0: var(--dk-border-control-default-on-information-subtle-level-0);
  --_tone-border-control-default-1: var(--dk-border-control-default-on-information-subtle-level-1);
  --_tone-border-control-default-2: var(--dk-border-control-default-on-information-subtle-level-2);
  --_tone-border-control-default-solid: var(--dk-border-control-default-on-information-solid);
  --_tone-border-control-default-solid1: var(--dk-border-control-default-on-information-solid-level-1);
  --_tone-border-control-default-solid2: var(--dk-border-control-default-on-information-solid-level-2);
  --_tone-border-control-hover-0: var(--dk-border-control-hover-on-information-subtle-level-0);
  --_tone-border-control-hover-1: var(--dk-border-control-hover-on-information-subtle-level-1);
  --_tone-border-control-hover-2: var(--dk-border-control-hover-on-information-subtle-level-2);
  --_tone-border-control-hover-solid: var(--dk-border-control-hover-on-information-solid);
  --_tone-border-control-hover-solid1: var(--dk-border-control-hover-on-information-solid-level-1);
  --_tone-border-control-hover-solid2: var(--dk-border-control-hover-on-information-solid-level-2);
  --_tone-border-control-active-0: var(--dk-border-control-active-on-information-subtle-level-0);
  --_tone-border-control-active-1: var(--dk-border-control-active-on-information-subtle-level-1);
  --_tone-border-control-active-2: var(--dk-border-control-active-on-information-subtle-level-2);
  --_tone-border-control-active-solid: var(--dk-border-control-active-on-information-solid);
  --_tone-border-control-active-solid1: var(--dk-border-control-active-on-information-solid-level-1);
  --_tone-border-control-active-solid2: var(--dk-border-control-active-on-information-solid-level-2);
  --_tone-icon-control-default-0: var(--dk-icon-control-default-on-information-subtle-level-0);
  --_tone-icon-control-default-1: var(--dk-icon-control-default-on-information-subtle-level-1);
  --_tone-icon-control-default-2: var(--dk-icon-control-default-on-information-subtle-level-2);
  --_tone-icon-control-default-solid: var(--dk-icon-control-default-on-information-solid);
  --_tone-icon-control-default-solid1: var(--dk-icon-control-default-on-information-solid-level-1);
  --_tone-icon-control-default-solid2: var(--dk-icon-control-default-on-information-solid-level-2);
  --_tone-icon-control-hover-0: var(--dk-icon-control-hover-on-information-subtle-level-0);
  --_tone-icon-control-hover-1: var(--dk-icon-control-hover-on-information-subtle-level-1);
  --_tone-icon-control-hover-2: var(--dk-icon-control-hover-on-information-subtle-level-2);
  --_tone-icon-control-hover-solid: var(--dk-icon-control-hover-on-information-solid);
  --_tone-icon-control-hover-solid1: var(--dk-icon-control-hover-on-information-solid-level-1);
  --_tone-icon-control-hover-solid2: var(--dk-icon-control-hover-on-information-solid-level-2);
  --_tone-icon-control-active-0: var(--dk-icon-control-active-on-information-subtle-level-0);
  --_tone-icon-control-active-1: var(--dk-icon-control-active-on-information-subtle-level-1);
  --_tone-icon-control-active-2: var(--dk-icon-control-active-on-information-subtle-level-2);
  --_tone-icon-control-active-solid: var(--dk-icon-control-active-on-information-solid);
  --_tone-icon-control-active-solid1: var(--dk-icon-control-active-on-information-solid-level-1);
  --_tone-icon-control-active-solid2: var(--dk-icon-control-active-on-information-solid-level-2);
  --_tone-icon-control-disabled-0: var(--dk-icon-control-disabled-on-information-subtle-level-0);
  --_tone-icon-control-disabled-1: var(--dk-icon-control-disabled-on-information-subtle-level-1);
  --_tone-icon-control-disabled-2: var(--dk-icon-control-disabled-on-information-subtle-level-2);
  --_tone-icon-control-disabled-solid: var(--dk-icon-control-disabled-on-information-solid);
  --_tone-icon-control-disabled-solid1: var(--dk-icon-control-disabled-on-information-solid-level-1);
  --_tone-icon-control-disabled-solid2: var(--dk-icon-control-disabled-on-information-solid-level-2);
  --_tone-text-control-default-0: var(--dk-text-control-default-on-information-subtle-level-0);
  --_tone-text-control-default-1: var(--dk-text-control-default-on-information-subtle-level-1);
  --_tone-text-control-default-2: var(--dk-text-control-default-on-information-subtle-level-2);
  --_tone-text-control-default-solid: var(--dk-text-control-default-on-information-solid);
  --_tone-text-control-default-solid1: var(--dk-text-control-default-on-information-solid-level-1);
  --_tone-text-control-default-solid2: var(--dk-text-control-default-on-information-solid-level-2);
  --_tone-text-control-hover-0: var(--dk-text-control-hover-on-information-subtle-level-0);
  --_tone-text-control-hover-1: var(--dk-text-control-hover-on-information-subtle-level-1);
  --_tone-text-control-hover-2: var(--dk-text-control-hover-on-information-subtle-level-2);
  --_tone-text-control-hover-solid: var(--dk-text-control-hover-on-information-solid);
  --_tone-text-control-hover-solid1: var(--dk-text-control-hover-on-information-solid-level-1);
  --_tone-text-control-hover-solid2: var(--dk-text-control-hover-on-information-solid-level-2);
  --_tone-text-control-active-0: var(--dk-text-control-active-on-information-subtle-level-0);
  --_tone-text-control-active-1: var(--dk-text-control-active-on-information-subtle-level-1);
  --_tone-text-control-active-2: var(--dk-text-control-active-on-information-subtle-level-2);
  --_tone-text-control-active-solid: var(--dk-text-control-active-on-information-solid);
  --_tone-text-control-active-solid1: var(--dk-text-control-active-on-information-solid-level-1);
  --_tone-text-control-active-solid2: var(--dk-text-control-active-on-information-solid-level-2);
  --_tone-text-control-disabled-0: var(--dk-text-control-disabled-on-information-subtle-level-0);
  --_tone-text-control-disabled-1: var(--dk-text-control-disabled-on-information-subtle-level-1);
  --_tone-text-control-disabled-2: var(--dk-text-control-disabled-on-information-subtle-level-2);
  --_tone-text-control-disabled-solid: var(--dk-text-control-disabled-on-information-solid);
  --_tone-text-control-disabled-solid1: var(--dk-text-control-disabled-on-information-solid-level-1);
  --_tone-text-control-disabled-solid2: var(--dk-text-control-disabled-on-information-solid-level-2);
  --_tone-surface-control-disabled-0: var(--dk-surface-control-disabled-on-information-subtle-level-0);
  --_tone-surface-control-disabled-1: var(--dk-surface-control-disabled-on-information-subtle-level-1);
  --_tone-surface-control-disabled-2: var(--dk-surface-control-disabled-on-information-subtle-level-2);
  --_tone-surface-control-disabled-solid: var(--dk-surface-control-disabled-on-information-solid);
  --_tone-surface-control-disabled-solid1: var(--dk-surface-control-disabled-on-information-solid-level-1);
  --_tone-surface-control-disabled-solid2: var(--dk-surface-control-disabled-on-information-solid-level-2);
}
[data-theme] [data-tone="inverse"]:not([data-theme]),
[data-theme][data-tone="inverse"] {
  --_tone-surface-control-default-0: var(--dk-surface-control-default-on-inverse-subtle-level-0);
  --_tone-surface-control-default-1: var(--dk-surface-control-default-on-inverse-subtle-level-1);
  --_tone-surface-control-default-2: var(--dk-surface-control-default-on-inverse-subtle-level-2);
  --_tone-surface-control-default-solid: var(--dk-surface-control-default-on-inverse-solid);
  --_tone-surface-control-default-solid1: var(--dk-surface-control-default-on-inverse-solid-level-1);
  --_tone-surface-control-default-solid2: var(--dk-surface-control-default-on-inverse-solid-level-2);
  --_tone-surface-control-hover-0: var(--dk-surface-control-hover-on-inverse-subtle-level-0);
  --_tone-surface-control-hover-1: var(--dk-surface-control-hover-on-inverse-subtle-level-1);
  --_tone-surface-control-hover-2: var(--dk-surface-control-hover-on-inverse-subtle-level-2);
  --_tone-surface-control-hover-solid: var(--dk-surface-control-hover-on-inverse-solid);
  --_tone-surface-control-hover-solid1: var(--dk-surface-control-hover-on-inverse-solid-level-1);
  --_tone-surface-control-hover-solid2: var(--dk-surface-control-hover-on-inverse-solid-level-2);
  --_tone-surface-control-active-0: var(--dk-surface-control-active-on-inverse-subtle-level-0);
  --_tone-surface-control-active-1: var(--dk-surface-control-active-on-inverse-subtle-level-1);
  --_tone-surface-control-active-2: var(--dk-surface-control-active-on-inverse-subtle-level-2);
  --_tone-surface-control-active-solid: var(--dk-surface-control-active-on-inverse-solid);
  --_tone-surface-control-active-solid1: var(--dk-surface-control-active-on-inverse-solid-level-1);
  --_tone-surface-control-active-solid2: var(--dk-surface-control-active-on-inverse-solid-level-2);
  --_tone-border-control-default-0: var(--dk-border-control-default-on-inverse-subtle-level-0);
  --_tone-border-control-default-1: var(--dk-border-control-default-on-inverse-subtle-level-1);
  --_tone-border-control-default-2: var(--dk-border-control-default-on-inverse-subtle-level-2);
  --_tone-border-control-default-solid: var(--dk-border-control-default-on-inverse-solid);
  --_tone-border-control-default-solid1: var(--dk-border-control-default-on-inverse-solid-level-1);
  --_tone-border-control-default-solid2: var(--dk-border-control-default-on-inverse-solid-level-2);
  --_tone-border-control-hover-0: var(--dk-border-control-hover-on-inverse-subtle-level-0);
  --_tone-border-control-hover-1: var(--dk-border-control-hover-on-inverse-subtle-level-1);
  --_tone-border-control-hover-2: var(--dk-border-control-hover-on-inverse-subtle-level-2);
  --_tone-border-control-hover-solid: var(--dk-border-control-hover-on-inverse-solid);
  --_tone-border-control-hover-solid1: var(--dk-border-control-hover-on-inverse-solid-level-1);
  --_tone-border-control-hover-solid2: var(--dk-border-control-hover-on-inverse-solid-level-2);
  --_tone-border-control-active-0: var(--dk-border-control-active-on-inverse-subtle-level-0);
  --_tone-border-control-active-1: var(--dk-border-control-active-on-inverse-subtle-level-1);
  --_tone-border-control-active-2: var(--dk-border-control-active-on-inverse-subtle-level-2);
  --_tone-border-control-active-solid: var(--dk-border-control-active-on-inverse-solid);
  --_tone-border-control-active-solid1: var(--dk-border-control-active-on-inverse-solid-level-1);
  --_tone-border-control-active-solid2: var(--dk-border-control-active-on-inverse-solid-level-2);
  --_tone-icon-control-default-0: var(--dk-icon-control-default-on-inverse-subtle-level-0);
  --_tone-icon-control-default-1: var(--dk-icon-control-default-on-inverse-subtle-level-1);
  --_tone-icon-control-default-2: var(--dk-icon-control-default-on-inverse-subtle-level-2);
  --_tone-icon-control-default-solid: var(--dk-icon-control-default-on-inverse-solid);
  --_tone-icon-control-default-solid1: var(--dk-icon-control-default-on-inverse-solid-level-1);
  --_tone-icon-control-default-solid2: var(--dk-icon-control-default-on-inverse-solid-level-2);
  --_tone-icon-control-hover-0: var(--dk-icon-control-hover-on-inverse-subtle-level-0);
  --_tone-icon-control-hover-1: var(--dk-icon-control-hover-on-inverse-subtle-level-1);
  --_tone-icon-control-hover-2: var(--dk-icon-control-hover-on-inverse-subtle-level-2);
  --_tone-icon-control-hover-solid: var(--dk-icon-control-hover-on-inverse-solid);
  --_tone-icon-control-hover-solid1: var(--dk-icon-control-hover-on-inverse-solid-level-1);
  --_tone-icon-control-hover-solid2: var(--dk-icon-control-hover-on-inverse-solid-level-2);
  --_tone-icon-control-active-0: var(--dk-icon-control-active-on-inverse-subtle-level-0);
  --_tone-icon-control-active-1: var(--dk-icon-control-active-on-inverse-subtle-level-1);
  --_tone-icon-control-active-2: var(--dk-icon-control-active-on-inverse-subtle-level-2);
  --_tone-icon-control-active-solid: var(--dk-icon-control-active-on-inverse-solid);
  --_tone-icon-control-active-solid1: var(--dk-icon-control-active-on-inverse-solid-level-1);
  --_tone-icon-control-active-solid2: var(--dk-icon-control-active-on-inverse-solid-level-2);
  --_tone-icon-control-disabled-0: var(--dk-icon-control-disabled-on-inverse-subtle-level-0);
  --_tone-icon-control-disabled-1: var(--dk-icon-control-disabled-on-inverse-subtle-level-1);
  --_tone-icon-control-disabled-2: var(--dk-icon-control-disabled-on-inverse-subtle-level-2);
  --_tone-icon-control-disabled-solid: var(--dk-icon-control-disabled-on-inverse-solid);
  --_tone-icon-control-disabled-solid1: var(--dk-icon-control-disabled-on-inverse-solid-level-1);
  --_tone-icon-control-disabled-solid2: var(--dk-icon-control-disabled-on-inverse-solid-level-2);
  --_tone-text-control-default-0: var(--dk-text-control-default-on-inverse-subtle-level-0);
  --_tone-text-control-default-1: var(--dk-text-control-default-on-inverse-subtle-level-1);
  --_tone-text-control-default-2: var(--dk-text-control-default-on-inverse-subtle-level-2);
  --_tone-text-control-default-solid: var(--dk-text-control-default-on-inverse-solid);
  --_tone-text-control-default-solid1: var(--dk-text-control-default-on-inverse-solid-level-1);
  --_tone-text-control-default-solid2: var(--dk-text-control-default-on-inverse-solid-level-2);
  --_tone-text-control-hover-0: var(--dk-text-control-hover-on-inverse-subtle-level-0);
  --_tone-text-control-hover-1: var(--dk-text-control-hover-on-inverse-subtle-level-1);
  --_tone-text-control-hover-2: var(--dk-text-control-hover-on-inverse-subtle-level-2);
  --_tone-text-control-hover-solid: var(--dk-text-control-hover-on-inverse-solid);
  --_tone-text-control-hover-solid1: var(--dk-text-control-hover-on-inverse-solid-level-1);
  --_tone-text-control-hover-solid2: var(--dk-text-control-hover-on-inverse-solid-level-2);
  --_tone-text-control-active-0: var(--dk-text-control-active-on-inverse-subtle-level-0);
  --_tone-text-control-active-1: var(--dk-text-control-active-on-inverse-subtle-level-1);
  --_tone-text-control-active-2: var(--dk-text-control-active-on-inverse-subtle-level-2);
  --_tone-text-control-active-solid: var(--dk-text-control-active-on-inverse-solid);
  --_tone-text-control-active-solid1: var(--dk-text-control-active-on-inverse-solid-level-1);
  --_tone-text-control-active-solid2: var(--dk-text-control-active-on-inverse-solid-level-2);
  --_tone-text-control-disabled-0: var(--dk-text-control-disabled-on-inverse-subtle-level-0);
  --_tone-text-control-disabled-1: var(--dk-text-control-disabled-on-inverse-subtle-level-1);
  --_tone-text-control-disabled-2: var(--dk-text-control-disabled-on-inverse-subtle-level-2);
  --_tone-text-control-disabled-solid: var(--dk-text-control-disabled-on-inverse-solid);
  --_tone-text-control-disabled-solid1: var(--dk-text-control-disabled-on-inverse-solid-level-1);
  --_tone-text-control-disabled-solid2: var(--dk-text-control-disabled-on-inverse-solid-level-2);
  --_tone-surface-control-disabled-0: var(--dk-surface-control-disabled-on-inverse-subtle-level-0);
  --_tone-surface-control-disabled-1: var(--dk-surface-control-disabled-on-inverse-subtle-level-1);
  --_tone-surface-control-disabled-2: var(--dk-surface-control-disabled-on-inverse-subtle-level-2);
  --_tone-surface-control-disabled-solid: var(--dk-surface-control-disabled-on-inverse-solid);
  --_tone-surface-control-disabled-solid1: var(--dk-surface-control-disabled-on-inverse-solid-level-1);
  --_tone-surface-control-disabled-solid2: var(--dk-surface-control-disabled-on-inverse-solid-level-2);
}

/* The public names, per level. Level 0 is the bare tone. */
[data-theme] [data-tone="primary"]:not([data-theme]),
[data-theme] [data-tone="success"]:not([data-theme]),
[data-theme] [data-tone="error"]:not([data-theme]),
[data-theme] [data-tone="warning"]:not([data-theme]),
[data-theme] [data-tone="information"]:not([data-theme]),
[data-theme] [data-tone="inverse"]:not([data-theme]),
[data-theme][data-tone="primary"],
[data-theme][data-tone="success"],
[data-theme][data-tone="error"],
[data-theme][data-tone="warning"],
[data-theme][data-tone="information"],
[data-theme][data-tone="inverse"] {
  --dk-surface-control-default: var(--_tone-surface-control-default-0);
  --dk-surface-control-hover: var(--_tone-surface-control-hover-0);
  --dk-surface-control-active: var(--_tone-surface-control-active-0);
  --dk-border-control-default: var(--_tone-border-control-default-0);
  --dk-border-control-hover: var(--_tone-border-control-hover-0);
  --dk-border-control-active: var(--_tone-border-control-active-0);
  --dk-icon-control-default: var(--_tone-icon-control-default-0);
  --dk-icon-control-hover: var(--_tone-icon-control-hover-0);
  --dk-icon-control-active: var(--_tone-icon-control-active-0);
  --dk-icon-control-disabled: var(--_tone-icon-control-disabled-0);
  --dk-text-control-default: var(--_tone-text-control-default-0);
  --dk-text-control-hover: var(--_tone-text-control-hover-0);
  --dk-text-control-active: var(--_tone-text-control-active-0);
  --dk-text-control-disabled: var(--_tone-text-control-disabled-0);
  --dk-surface-control-disabled: var(--_tone-surface-control-disabled-0);
}
[data-theme] [data-tone="primary"][data-surface="1"]:not([data-theme]),
[data-theme] [data-tone="success"][data-surface="1"]:not([data-theme]),
[data-theme] [data-tone="error"][data-surface="1"]:not([data-theme]),
[data-theme] [data-tone="warning"][data-surface="1"]:not([data-theme]),
[data-theme] [data-tone="information"][data-surface="1"]:not([data-theme]),
[data-theme] [data-tone="inverse"][data-surface="1"]:not([data-theme]),
[data-theme][data-tone="primary"][data-surface="1"],
[data-theme][data-tone="success"][data-surface="1"],
[data-theme][data-tone="error"][data-surface="1"],
[data-theme][data-tone="warning"][data-surface="1"],
[data-theme][data-tone="information"][data-surface="1"],
[data-theme][data-tone="inverse"][data-surface="1"] {
  --dk-surface-control-default: var(--_tone-surface-control-default-1);
  --dk-surface-control-hover: var(--_tone-surface-control-hover-1);
  --dk-surface-control-active: var(--_tone-surface-control-active-1);
  --dk-border-control-default: var(--_tone-border-control-default-1);
  --dk-border-control-hover: var(--_tone-border-control-hover-1);
  --dk-border-control-active: var(--_tone-border-control-active-1);
  --dk-icon-control-default: var(--_tone-icon-control-default-1);
  --dk-icon-control-hover: var(--_tone-icon-control-hover-1);
  --dk-icon-control-active: var(--_tone-icon-control-active-1);
  --dk-icon-control-disabled: var(--_tone-icon-control-disabled-1);
  --dk-text-control-default: var(--_tone-text-control-default-1);
  --dk-text-control-hover: var(--_tone-text-control-hover-1);
  --dk-text-control-active: var(--_tone-text-control-active-1);
  --dk-text-control-disabled: var(--_tone-text-control-disabled-1);
  --dk-surface-control-disabled: var(--_tone-surface-control-disabled-1);
}
[data-theme][data-tone="primary"][data-surface="below"],
[data-theme][data-tone="success"][data-surface="below"],
[data-theme][data-tone="error"][data-surface="below"],
[data-theme][data-tone="warning"][data-surface="below"],
[data-theme][data-tone="information"][data-surface="below"],
[data-theme][data-tone="inverse"][data-surface="below"],
:is([data-theme] [data-tone="primary"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="success"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="error"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="warning"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="information"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="inverse"][data-surface="below"]:not([data-theme])):where(:not(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *))) {
  --dk-surface-control-default: var(--_tone-surface-control-default-1);
  --dk-surface-control-hover: var(--_tone-surface-control-hover-1);
  --dk-surface-control-active: var(--_tone-surface-control-active-1);
  --dk-border-control-default: var(--_tone-border-control-default-1);
  --dk-border-control-hover: var(--_tone-border-control-hover-1);
  --dk-border-control-active: var(--_tone-border-control-active-1);
  --dk-icon-control-default: var(--_tone-icon-control-default-1);
  --dk-icon-control-hover: var(--_tone-icon-control-hover-1);
  --dk-icon-control-active: var(--_tone-icon-control-active-1);
  --dk-icon-control-disabled: var(--_tone-icon-control-disabled-1);
  --dk-text-control-default: var(--_tone-text-control-default-1);
  --dk-text-control-hover: var(--_tone-text-control-hover-1);
  --dk-text-control-active: var(--_tone-text-control-active-1);
  --dk-text-control-disabled: var(--_tone-text-control-disabled-1);
  --dk-surface-control-disabled: var(--_tone-surface-control-disabled-1);
}
[data-theme="dark"] [data-tone="primary"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"] [data-tone="inverse"] [data-tone="primary"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"] [data-tone="success"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"] [data-tone="inverse"] [data-tone="success"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"] [data-tone="error"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"] [data-tone="inverse"] [data-tone="error"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"] [data-tone="warning"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"] [data-tone="inverse"] [data-tone="warning"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"] [data-tone="information"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"] [data-tone="inverse"] [data-tone="information"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="light"] [data-tone="inverse"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"][data-tone="primary"][data-surface="raised"],
[data-theme="dark"][data-tone="success"][data-surface="raised"],
[data-theme="dark"][data-tone="error"][data-surface="raised"],
[data-theme="dark"][data-tone="warning"][data-surface="raised"],
[data-theme="dark"][data-tone="information"][data-surface="raised"],
[data-theme="light"][data-tone="inverse"][data-surface="raised"] {
  --dk-surface-control-default: var(--_tone-surface-control-default-1);
  --dk-surface-control-hover: var(--_tone-surface-control-hover-1);
  --dk-surface-control-active: var(--_tone-surface-control-active-1);
  --dk-border-control-default: var(--_tone-border-control-default-1);
  --dk-border-control-hover: var(--_tone-border-control-hover-1);
  --dk-border-control-active: var(--_tone-border-control-active-1);
  --dk-icon-control-default: var(--_tone-icon-control-default-1);
  --dk-icon-control-hover: var(--_tone-icon-control-hover-1);
  --dk-icon-control-active: var(--_tone-icon-control-active-1);
  --dk-icon-control-disabled: var(--_tone-icon-control-disabled-1);
  --dk-text-control-default: var(--_tone-text-control-default-1);
  --dk-text-control-hover: var(--_tone-text-control-hover-1);
  --dk-text-control-active: var(--_tone-text-control-active-1);
  --dk-text-control-disabled: var(--_tone-text-control-disabled-1);
  --dk-surface-control-disabled: var(--_tone-surface-control-disabled-1);
}
[data-theme] [data-tone="primary"][data-surface="2"]:not([data-theme]),
[data-theme] [data-tone="success"][data-surface="2"]:not([data-theme]),
[data-theme] [data-tone="error"][data-surface="2"]:not([data-theme]),
[data-theme] [data-tone="warning"][data-surface="2"]:not([data-theme]),
[data-theme] [data-tone="information"][data-surface="2"]:not([data-theme]),
[data-theme] [data-tone="inverse"][data-surface="2"]:not([data-theme]),
[data-theme][data-tone="primary"][data-surface="2"],
[data-theme][data-tone="success"][data-surface="2"],
[data-theme][data-tone="error"][data-surface="2"],
[data-theme][data-tone="warning"][data-surface="2"],
[data-theme][data-tone="information"][data-surface="2"],
[data-theme][data-tone="inverse"][data-surface="2"] {
  --dk-surface-control-default: var(--_tone-surface-control-default-2);
  --dk-surface-control-hover: var(--_tone-surface-control-hover-2);
  --dk-surface-control-active: var(--_tone-surface-control-active-2);
  --dk-border-control-default: var(--_tone-border-control-default-2);
  --dk-border-control-hover: var(--_tone-border-control-hover-2);
  --dk-border-control-active: var(--_tone-border-control-active-2);
  --dk-icon-control-default: var(--_tone-icon-control-default-2);
  --dk-icon-control-hover: var(--_tone-icon-control-hover-2);
  --dk-icon-control-active: var(--_tone-icon-control-active-2);
  --dk-icon-control-disabled: var(--_tone-icon-control-disabled-2);
  --dk-text-control-default: var(--_tone-text-control-default-2);
  --dk-text-control-hover: var(--_tone-text-control-hover-2);
  --dk-text-control-active: var(--_tone-text-control-active-2);
  --dk-text-control-disabled: var(--_tone-text-control-disabled-2);
  --dk-surface-control-disabled: var(--_tone-surface-control-disabled-2);
}
:is([data-theme] [data-tone="primary"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="success"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="error"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="warning"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="information"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="inverse"][data-surface="below"]:not([data-theme])):where(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *)) {
  --dk-surface-control-default: var(--_tone-surface-control-default-2);
  --dk-surface-control-hover: var(--_tone-surface-control-hover-2);
  --dk-surface-control-active: var(--_tone-surface-control-active-2);
  --dk-border-control-default: var(--_tone-border-control-default-2);
  --dk-border-control-hover: var(--_tone-border-control-hover-2);
  --dk-border-control-active: var(--_tone-border-control-active-2);
  --dk-icon-control-default: var(--_tone-icon-control-default-2);
  --dk-icon-control-hover: var(--_tone-icon-control-hover-2);
  --dk-icon-control-active: var(--_tone-icon-control-active-2);
  --dk-icon-control-disabled: var(--_tone-icon-control-disabled-2);
  --dk-text-control-default: var(--_tone-text-control-default-2);
  --dk-text-control-hover: var(--_tone-text-control-hover-2);
  --dk-text-control-active: var(--_tone-text-control-active-2);
  --dk-text-control-disabled: var(--_tone-text-control-disabled-2);
  --dk-surface-control-disabled: var(--_tone-surface-control-disabled-2);
}

/* Solid fills do not step with levels, the same rule tone.css records: a solid
   fill is already the top of its ramp, so deepening it costs legibility rather
   than buying hierarchy. This block therefore carries no [data-surface]
   variants and is placed last so it wins over the level blocks above. */
[data-theme] [data-tone="primary"][data-tone-fill="solid"]:not([data-theme]),
[data-theme] [data-tone="success"][data-tone-fill="solid"]:not([data-theme]),
[data-theme] [data-tone="error"][data-tone-fill="solid"]:not([data-theme]),
[data-theme] [data-tone="warning"][data-tone-fill="solid"]:not([data-theme]),
[data-theme] [data-tone="information"][data-tone-fill="solid"]:not([data-theme]),
[data-theme][data-tone="primary"][data-tone-fill="solid"],
[data-theme][data-tone="success"][data-tone-fill="solid"],
[data-theme][data-tone="error"][data-tone-fill="solid"],
[data-theme][data-tone="warning"][data-tone-fill="solid"],
[data-theme][data-tone="information"][data-tone-fill="solid"] {
  --dk-surface-control-default: var(--_tone-surface-control-default-solid);
  --dk-surface-control-hover: var(--_tone-surface-control-hover-solid);
  --dk-surface-control-active: var(--_tone-surface-control-active-solid);
  --dk-border-control-default: var(--_tone-border-control-default-solid);
  --dk-border-control-hover: var(--_tone-border-control-hover-solid);
  --dk-border-control-active: var(--_tone-border-control-active-solid);
  --dk-icon-control-default: var(--_tone-icon-control-default-solid);
  --dk-icon-control-hover: var(--_tone-icon-control-hover-solid);
  --dk-icon-control-active: var(--_tone-icon-control-active-solid);
  --dk-icon-control-disabled: var(--_tone-icon-control-disabled-solid);
  --dk-text-control-default: var(--_tone-text-control-default-solid);
  --dk-text-control-hover: var(--_tone-text-control-hover-solid);
  --dk-text-control-active: var(--_tone-text-control-active-solid);
  --dk-text-control-disabled: var(--_tone-text-control-disabled-solid);
  --dk-surface-control-disabled: var(--_tone-surface-control-disabled-solid);
}

/* Solid levels. The header above used to say a solid fill does not step with
   levels; it does now, downward, 700/800/900. A control on a deeper solid panel
   therefore needs its own rungs, or it keeps level 0's and sits on a panel two
   steps darker than the one it was chosen against. These come last for the same
   reason the block above does: they have to win over the per-level blocks that
   assume a subtle fill. */
[data-theme] [data-tone="primary"][data-tone-fill="solid"][data-surface="1"]:not([data-theme]),
[data-theme] [data-tone="success"][data-tone-fill="solid"][data-surface="1"]:not([data-theme]),
[data-theme] [data-tone="error"][data-tone-fill="solid"][data-surface="1"]:not([data-theme]),
[data-theme] [data-tone="warning"][data-tone-fill="solid"][data-surface="1"]:not([data-theme]),
[data-theme] [data-tone="information"][data-tone-fill="solid"][data-surface="1"]:not([data-theme]),
[data-theme][data-tone="primary"][data-tone-fill="solid"][data-surface="1"],
[data-theme][data-tone="success"][data-tone-fill="solid"][data-surface="1"],
[data-theme][data-tone="error"][data-tone-fill="solid"][data-surface="1"],
[data-theme][data-tone="warning"][data-tone-fill="solid"][data-surface="1"],
[data-theme][data-tone="information"][data-tone-fill="solid"][data-surface="1"] {
  --dk-surface-control-default: var(--_tone-surface-control-default-solid1);
  --dk-surface-control-hover: var(--_tone-surface-control-hover-solid1);
  --dk-surface-control-active: var(--_tone-surface-control-active-solid1);
  --dk-border-control-default: var(--_tone-border-control-default-solid1);
  --dk-border-control-hover: var(--_tone-border-control-hover-solid1);
  --dk-border-control-active: var(--_tone-border-control-active-solid1);
  --dk-icon-control-default: var(--_tone-icon-control-default-solid1);
  --dk-icon-control-hover: var(--_tone-icon-control-hover-solid1);
  --dk-icon-control-active: var(--_tone-icon-control-active-solid1);
  --dk-icon-control-disabled: var(--_tone-icon-control-disabled-solid1);
  --dk-text-control-default: var(--_tone-text-control-default-solid1);
  --dk-text-control-hover: var(--_tone-text-control-hover-solid1);
  --dk-text-control-active: var(--_tone-text-control-active-solid1);
  --dk-text-control-disabled: var(--_tone-text-control-disabled-solid1);
  --dk-surface-control-disabled: var(--_tone-surface-control-disabled-solid1);
}
[data-theme][data-tone="primary"][data-tone-fill="solid"][data-surface="below"],
[data-theme][data-tone="success"][data-tone-fill="solid"][data-surface="below"],
[data-theme][data-tone="error"][data-tone-fill="solid"][data-surface="below"],
[data-theme][data-tone="warning"][data-tone-fill="solid"][data-surface="below"],
[data-theme][data-tone="information"][data-tone-fill="solid"][data-surface="below"],
:is([data-theme] [data-tone="primary"][data-tone-fill="solid"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="success"][data-tone-fill="solid"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="error"][data-tone-fill="solid"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="warning"][data-tone-fill="solid"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="information"][data-tone-fill="solid"][data-surface="below"]:not([data-theme])):where(:not(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *))) {
  --dk-surface-control-default: var(--_tone-surface-control-default-solid1);
  --dk-surface-control-hover: var(--_tone-surface-control-hover-solid1);
  --dk-surface-control-active: var(--_tone-surface-control-active-solid1);
  --dk-border-control-default: var(--_tone-border-control-default-solid1);
  --dk-border-control-hover: var(--_tone-border-control-hover-solid1);
  --dk-border-control-active: var(--_tone-border-control-active-solid1);
  --dk-icon-control-default: var(--_tone-icon-control-default-solid1);
  --dk-icon-control-hover: var(--_tone-icon-control-hover-solid1);
  --dk-icon-control-active: var(--_tone-icon-control-active-solid1);
  --dk-icon-control-disabled: var(--_tone-icon-control-disabled-solid1);
  --dk-text-control-default: var(--_tone-text-control-default-solid1);
  --dk-text-control-hover: var(--_tone-text-control-hover-solid1);
  --dk-text-control-active: var(--_tone-text-control-active-solid1);
  --dk-text-control-disabled: var(--_tone-text-control-disabled-solid1);
  --dk-surface-control-disabled: var(--_tone-surface-control-disabled-solid1);
}
[data-theme="dark"] [data-tone="primary"][data-tone-fill="solid"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"] [data-tone="inverse"] [data-tone="primary"][data-tone-fill="solid"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"] [data-tone="success"][data-tone-fill="solid"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"] [data-tone="inverse"] [data-tone="success"][data-tone-fill="solid"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"] [data-tone="error"][data-tone-fill="solid"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"] [data-tone="inverse"] [data-tone="error"][data-tone-fill="solid"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"] [data-tone="warning"][data-tone-fill="solid"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"] [data-tone="inverse"] [data-tone="warning"][data-tone-fill="solid"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"] [data-tone="information"][data-tone-fill="solid"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"] [data-tone="inverse"] [data-tone="information"][data-tone-fill="solid"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"][data-tone="primary"][data-tone-fill="solid"][data-surface="raised"],
[data-theme="dark"][data-tone="success"][data-tone-fill="solid"][data-surface="raised"],
[data-theme="dark"][data-tone="error"][data-tone-fill="solid"][data-surface="raised"],
[data-theme="dark"][data-tone="warning"][data-tone-fill="solid"][data-surface="raised"],
[data-theme="dark"][data-tone="information"][data-tone-fill="solid"][data-surface="raised"] {
  --dk-surface-control-default: var(--_tone-surface-control-default-solid1);
  --dk-surface-control-hover: var(--_tone-surface-control-hover-solid1);
  --dk-surface-control-active: var(--_tone-surface-control-active-solid1);
  --dk-border-control-default: var(--_tone-border-control-default-solid1);
  --dk-border-control-hover: var(--_tone-border-control-hover-solid1);
  --dk-border-control-active: var(--_tone-border-control-active-solid1);
  --dk-icon-control-default: var(--_tone-icon-control-default-solid1);
  --dk-icon-control-hover: var(--_tone-icon-control-hover-solid1);
  --dk-icon-control-active: var(--_tone-icon-control-active-solid1);
  --dk-icon-control-disabled: var(--_tone-icon-control-disabled-solid1);
  --dk-text-control-default: var(--_tone-text-control-default-solid1);
  --dk-text-control-hover: var(--_tone-text-control-hover-solid1);
  --dk-text-control-active: var(--_tone-text-control-active-solid1);
  --dk-text-control-disabled: var(--_tone-text-control-disabled-solid1);
  --dk-surface-control-disabled: var(--_tone-surface-control-disabled-solid1);
}
[data-theme] [data-tone="primary"][data-tone-fill="solid"][data-surface="2"]:not([data-theme]),
[data-theme] [data-tone="success"][data-tone-fill="solid"][data-surface="2"]:not([data-theme]),
[data-theme] [data-tone="error"][data-tone-fill="solid"][data-surface="2"]:not([data-theme]),
[data-theme] [data-tone="warning"][data-tone-fill="solid"][data-surface="2"]:not([data-theme]),
[data-theme] [data-tone="information"][data-tone-fill="solid"][data-surface="2"]:not([data-theme]),
[data-theme][data-tone="primary"][data-tone-fill="solid"][data-surface="2"],
[data-theme][data-tone="success"][data-tone-fill="solid"][data-surface="2"],
[data-theme][data-tone="error"][data-tone-fill="solid"][data-surface="2"],
[data-theme][data-tone="warning"][data-tone-fill="solid"][data-surface="2"],
[data-theme][data-tone="information"][data-tone-fill="solid"][data-surface="2"] {
  --dk-surface-control-default: var(--_tone-surface-control-default-solid2);
  --dk-surface-control-hover: var(--_tone-surface-control-hover-solid2);
  --dk-surface-control-active: var(--_tone-surface-control-active-solid2);
  --dk-border-control-default: var(--_tone-border-control-default-solid2);
  --dk-border-control-hover: var(--_tone-border-control-hover-solid2);
  --dk-border-control-active: var(--_tone-border-control-active-solid2);
  --dk-icon-control-default: var(--_tone-icon-control-default-solid2);
  --dk-icon-control-hover: var(--_tone-icon-control-hover-solid2);
  --dk-icon-control-active: var(--_tone-icon-control-active-solid2);
  --dk-icon-control-disabled: var(--_tone-icon-control-disabled-solid2);
  --dk-text-control-default: var(--_tone-text-control-default-solid2);
  --dk-text-control-hover: var(--_tone-text-control-hover-solid2);
  --dk-text-control-active: var(--_tone-text-control-active-solid2);
  --dk-text-control-disabled: var(--_tone-text-control-disabled-solid2);
  --dk-surface-control-disabled: var(--_tone-surface-control-disabled-solid2);
}
:is([data-theme] [data-tone="primary"][data-tone-fill="solid"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="success"][data-tone-fill="solid"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="error"][data-tone-fill="solid"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="warning"][data-tone-fill="solid"][data-surface="below"]:not([data-theme]), [data-theme] [data-tone="information"][data-tone-fill="solid"][data-surface="below"]:not([data-theme])):where(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *)) {
  --dk-surface-control-default: var(--_tone-surface-control-default-solid2);
  --dk-surface-control-hover: var(--_tone-surface-control-hover-solid2);
  --dk-surface-control-active: var(--_tone-surface-control-active-solid2);
  --dk-border-control-default: var(--_tone-border-control-default-solid2);
  --dk-border-control-hover: var(--_tone-border-control-hover-solid2);
  --dk-border-control-active: var(--_tone-border-control-active-solid2);
  --dk-icon-control-default: var(--_tone-icon-control-default-solid2);
  --dk-icon-control-hover: var(--_tone-icon-control-hover-solid2);
  --dk-icon-control-active: var(--_tone-icon-control-active-solid2);
  --dk-icon-control-disabled: var(--_tone-icon-control-disabled-solid2);
  --dk-text-control-default: var(--_tone-text-control-default-solid2);
  --dk-text-control-hover: var(--_tone-text-control-hover-solid2);
  --dk-text-control-active: var(--_tone-text-control-active-solid2);
  --dk-text-control-disabled: var(--_tone-text-control-disabled-solid2);
  --dk-surface-control-disabled: var(--_tone-surface-control-disabled-solid2);
}


/* ── A FORCED STATUS, still following the level ────────────────────────────
   Everything above answers "what colour is a control sitting on a toned
   panel", and the answer is read from the panel: the ambient data-tone picks
   the ramp. A button with data-status="error" is asking the opposite question.
   It wants error's ramp whatever the panel says, and it still wants the rung
   that belongs to the level it is standing on.

   The names below are the same family with the level segment removed, and the
   level scopes put it back. That is the grammar the rest of the kit already
   uses: --dk-text-primary-default is the level-aware name and
   --dk-text-primary-default-level-1 is the rung it points at on a level 1
   panel.

   WHY THIS EXISTS AT ALL. Button's subtle, plain, ghost and outline take their
   fills from --dk-surface-<status>-subtle-hover and their label from
   --dk-text-<status>-hover. The fill half of that pair is level-aware; the
   label half is not, so on a level 2 panel the fill had climbed two rungs and
   the label had not moved. Measured across the button family, 117 of 558
   rendered readings sat under their bar, worst 1.86:1 for a pressed primary
   outline on level 2 dark. The control family already carries a measured rung
   for every status, level and state, and the icon button has been reading it
   since it was built, which is why the icon button had none.

   Statuses only, no inverse: inverse is not a status a component can force,
   it is the panel saying "the opposite theme", and nothing carries
   data-status="inverse". */
[data-theme="light"], [data-theme="dark"] {
  /* primary */
  --dk-surface-control-default-on-primary-subtle: var(--dk-surface-control-default-on-primary-subtle-level-0);
  --dk-surface-control-hover-on-primary-subtle: var(--dk-surface-control-hover-on-primary-subtle-level-0);
  --dk-surface-control-active-on-primary-subtle: var(--dk-surface-control-active-on-primary-subtle-level-0);
  --dk-surface-control-disabled-on-primary-subtle: var(--dk-surface-control-disabled-on-primary-subtle-level-0);
  --dk-border-control-default-on-primary-subtle: var(--dk-border-control-default-on-primary-subtle-level-0);
  --dk-border-control-hover-on-primary-subtle: var(--dk-border-control-hover-on-primary-subtle-level-0);
  --dk-border-control-active-on-primary-subtle: var(--dk-border-control-active-on-primary-subtle-level-0);
  --dk-icon-control-default-on-primary-subtle: var(--dk-icon-control-default-on-primary-subtle-level-0);
  --dk-icon-control-hover-on-primary-subtle: var(--dk-icon-control-hover-on-primary-subtle-level-0);
  --dk-icon-control-active-on-primary-subtle: var(--dk-icon-control-active-on-primary-subtle-level-0);
  --dk-icon-control-disabled-on-primary-subtle: var(--dk-icon-control-disabled-on-primary-subtle-level-0);
  --dk-text-control-default-on-primary-subtle: var(--dk-text-control-default-on-primary-subtle-level-0);
  --dk-text-control-hover-on-primary-subtle: var(--dk-text-control-hover-on-primary-subtle-level-0);
  --dk-text-control-active-on-primary-subtle: var(--dk-text-control-active-on-primary-subtle-level-0);
  --dk-text-control-disabled-on-primary-subtle: var(--dk-text-control-disabled-on-primary-subtle-level-0);
  /* success */
  --dk-surface-control-default-on-success-subtle: var(--dk-surface-control-default-on-success-subtle-level-0);
  --dk-surface-control-hover-on-success-subtle: var(--dk-surface-control-hover-on-success-subtle-level-0);
  --dk-surface-control-active-on-success-subtle: var(--dk-surface-control-active-on-success-subtle-level-0);
  --dk-surface-control-disabled-on-success-subtle: var(--dk-surface-control-disabled-on-success-subtle-level-0);
  --dk-border-control-default-on-success-subtle: var(--dk-border-control-default-on-success-subtle-level-0);
  --dk-border-control-hover-on-success-subtle: var(--dk-border-control-hover-on-success-subtle-level-0);
  --dk-border-control-active-on-success-subtle: var(--dk-border-control-active-on-success-subtle-level-0);
  --dk-icon-control-default-on-success-subtle: var(--dk-icon-control-default-on-success-subtle-level-0);
  --dk-icon-control-hover-on-success-subtle: var(--dk-icon-control-hover-on-success-subtle-level-0);
  --dk-icon-control-active-on-success-subtle: var(--dk-icon-control-active-on-success-subtle-level-0);
  --dk-icon-control-disabled-on-success-subtle: var(--dk-icon-control-disabled-on-success-subtle-level-0);
  --dk-text-control-default-on-success-subtle: var(--dk-text-control-default-on-success-subtle-level-0);
  --dk-text-control-hover-on-success-subtle: var(--dk-text-control-hover-on-success-subtle-level-0);
  --dk-text-control-active-on-success-subtle: var(--dk-text-control-active-on-success-subtle-level-0);
  --dk-text-control-disabled-on-success-subtle: var(--dk-text-control-disabled-on-success-subtle-level-0);
  /* error */
  --dk-surface-control-default-on-error-subtle: var(--dk-surface-control-default-on-error-subtle-level-0);
  --dk-surface-control-hover-on-error-subtle: var(--dk-surface-control-hover-on-error-subtle-level-0);
  --dk-surface-control-active-on-error-subtle: var(--dk-surface-control-active-on-error-subtle-level-0);
  --dk-surface-control-disabled-on-error-subtle: var(--dk-surface-control-disabled-on-error-subtle-level-0);
  --dk-border-control-default-on-error-subtle: var(--dk-border-control-default-on-error-subtle-level-0);
  --dk-border-control-hover-on-error-subtle: var(--dk-border-control-hover-on-error-subtle-level-0);
  --dk-border-control-active-on-error-subtle: var(--dk-border-control-active-on-error-subtle-level-0);
  --dk-icon-control-default-on-error-subtle: var(--dk-icon-control-default-on-error-subtle-level-0);
  --dk-icon-control-hover-on-error-subtle: var(--dk-icon-control-hover-on-error-subtle-level-0);
  --dk-icon-control-active-on-error-subtle: var(--dk-icon-control-active-on-error-subtle-level-0);
  --dk-icon-control-disabled-on-error-subtle: var(--dk-icon-control-disabled-on-error-subtle-level-0);
  --dk-text-control-default-on-error-subtle: var(--dk-text-control-default-on-error-subtle-level-0);
  --dk-text-control-hover-on-error-subtle: var(--dk-text-control-hover-on-error-subtle-level-0);
  --dk-text-control-active-on-error-subtle: var(--dk-text-control-active-on-error-subtle-level-0);
  --dk-text-control-disabled-on-error-subtle: var(--dk-text-control-disabled-on-error-subtle-level-0);
  /* warning */
  --dk-surface-control-default-on-warning-subtle: var(--dk-surface-control-default-on-warning-subtle-level-0);
  --dk-surface-control-hover-on-warning-subtle: var(--dk-surface-control-hover-on-warning-subtle-level-0);
  --dk-surface-control-active-on-warning-subtle: var(--dk-surface-control-active-on-warning-subtle-level-0);
  --dk-surface-control-disabled-on-warning-subtle: var(--dk-surface-control-disabled-on-warning-subtle-level-0);
  --dk-border-control-default-on-warning-subtle: var(--dk-border-control-default-on-warning-subtle-level-0);
  --dk-border-control-hover-on-warning-subtle: var(--dk-border-control-hover-on-warning-subtle-level-0);
  --dk-border-control-active-on-warning-subtle: var(--dk-border-control-active-on-warning-subtle-level-0);
  --dk-icon-control-default-on-warning-subtle: var(--dk-icon-control-default-on-warning-subtle-level-0);
  --dk-icon-control-hover-on-warning-subtle: var(--dk-icon-control-hover-on-warning-subtle-level-0);
  --dk-icon-control-active-on-warning-subtle: var(--dk-icon-control-active-on-warning-subtle-level-0);
  --dk-icon-control-disabled-on-warning-subtle: var(--dk-icon-control-disabled-on-warning-subtle-level-0);
  --dk-text-control-default-on-warning-subtle: var(--dk-text-control-default-on-warning-subtle-level-0);
  --dk-text-control-hover-on-warning-subtle: var(--dk-text-control-hover-on-warning-subtle-level-0);
  --dk-text-control-active-on-warning-subtle: var(--dk-text-control-active-on-warning-subtle-level-0);
  --dk-text-control-disabled-on-warning-subtle: var(--dk-text-control-disabled-on-warning-subtle-level-0);
  /* information */
  --dk-surface-control-default-on-information-subtle: var(--dk-surface-control-default-on-information-subtle-level-0);
  --dk-surface-control-hover-on-information-subtle: var(--dk-surface-control-hover-on-information-subtle-level-0);
  --dk-surface-control-active-on-information-subtle: var(--dk-surface-control-active-on-information-subtle-level-0);
  --dk-surface-control-disabled-on-information-subtle: var(--dk-surface-control-disabled-on-information-subtle-level-0);
  --dk-border-control-default-on-information-subtle: var(--dk-border-control-default-on-information-subtle-level-0);
  --dk-border-control-hover-on-information-subtle: var(--dk-border-control-hover-on-information-subtle-level-0);
  --dk-border-control-active-on-information-subtle: var(--dk-border-control-active-on-information-subtle-level-0);
  --dk-icon-control-default-on-information-subtle: var(--dk-icon-control-default-on-information-subtle-level-0);
  --dk-icon-control-hover-on-information-subtle: var(--dk-icon-control-hover-on-information-subtle-level-0);
  --dk-icon-control-active-on-information-subtle: var(--dk-icon-control-active-on-information-subtle-level-0);
  --dk-icon-control-disabled-on-information-subtle: var(--dk-icon-control-disabled-on-information-subtle-level-0);
  --dk-text-control-default-on-information-subtle: var(--dk-text-control-default-on-information-subtle-level-0);
  --dk-text-control-hover-on-information-subtle: var(--dk-text-control-hover-on-information-subtle-level-0);
  --dk-text-control-active-on-information-subtle: var(--dk-text-control-active-on-information-subtle-level-0);
  --dk-text-control-disabled-on-information-subtle: var(--dk-text-control-disabled-on-information-subtle-level-0);
}
[data-theme] [data-surface="1"]:not([data-theme]),
[data-theme][data-surface="1"] {
  /* primary */
  --dk-surface-control-default-on-primary-subtle: var(--dk-surface-control-default-on-primary-subtle-level-1);
  --dk-surface-control-hover-on-primary-subtle: var(--dk-surface-control-hover-on-primary-subtle-level-1);
  --dk-surface-control-active-on-primary-subtle: var(--dk-surface-control-active-on-primary-subtle-level-1);
  --dk-surface-control-disabled-on-primary-subtle: var(--dk-surface-control-disabled-on-primary-subtle-level-1);
  --dk-border-control-default-on-primary-subtle: var(--dk-border-control-default-on-primary-subtle-level-1);
  --dk-border-control-hover-on-primary-subtle: var(--dk-border-control-hover-on-primary-subtle-level-1);
  --dk-border-control-active-on-primary-subtle: var(--dk-border-control-active-on-primary-subtle-level-1);
  --dk-icon-control-default-on-primary-subtle: var(--dk-icon-control-default-on-primary-subtle-level-1);
  --dk-icon-control-hover-on-primary-subtle: var(--dk-icon-control-hover-on-primary-subtle-level-1);
  --dk-icon-control-active-on-primary-subtle: var(--dk-icon-control-active-on-primary-subtle-level-1);
  --dk-icon-control-disabled-on-primary-subtle: var(--dk-icon-control-disabled-on-primary-subtle-level-1);
  --dk-text-control-default-on-primary-subtle: var(--dk-text-control-default-on-primary-subtle-level-1);
  --dk-text-control-hover-on-primary-subtle: var(--dk-text-control-hover-on-primary-subtle-level-1);
  --dk-text-control-active-on-primary-subtle: var(--dk-text-control-active-on-primary-subtle-level-1);
  --dk-text-control-disabled-on-primary-subtle: var(--dk-text-control-disabled-on-primary-subtle-level-1);
  /* success */
  --dk-surface-control-default-on-success-subtle: var(--dk-surface-control-default-on-success-subtle-level-1);
  --dk-surface-control-hover-on-success-subtle: var(--dk-surface-control-hover-on-success-subtle-level-1);
  --dk-surface-control-active-on-success-subtle: var(--dk-surface-control-active-on-success-subtle-level-1);
  --dk-surface-control-disabled-on-success-subtle: var(--dk-surface-control-disabled-on-success-subtle-level-1);
  --dk-border-control-default-on-success-subtle: var(--dk-border-control-default-on-success-subtle-level-1);
  --dk-border-control-hover-on-success-subtle: var(--dk-border-control-hover-on-success-subtle-level-1);
  --dk-border-control-active-on-success-subtle: var(--dk-border-control-active-on-success-subtle-level-1);
  --dk-icon-control-default-on-success-subtle: var(--dk-icon-control-default-on-success-subtle-level-1);
  --dk-icon-control-hover-on-success-subtle: var(--dk-icon-control-hover-on-success-subtle-level-1);
  --dk-icon-control-active-on-success-subtle: var(--dk-icon-control-active-on-success-subtle-level-1);
  --dk-icon-control-disabled-on-success-subtle: var(--dk-icon-control-disabled-on-success-subtle-level-1);
  --dk-text-control-default-on-success-subtle: var(--dk-text-control-default-on-success-subtle-level-1);
  --dk-text-control-hover-on-success-subtle: var(--dk-text-control-hover-on-success-subtle-level-1);
  --dk-text-control-active-on-success-subtle: var(--dk-text-control-active-on-success-subtle-level-1);
  --dk-text-control-disabled-on-success-subtle: var(--dk-text-control-disabled-on-success-subtle-level-1);
  /* error */
  --dk-surface-control-default-on-error-subtle: var(--dk-surface-control-default-on-error-subtle-level-1);
  --dk-surface-control-hover-on-error-subtle: var(--dk-surface-control-hover-on-error-subtle-level-1);
  --dk-surface-control-active-on-error-subtle: var(--dk-surface-control-active-on-error-subtle-level-1);
  --dk-surface-control-disabled-on-error-subtle: var(--dk-surface-control-disabled-on-error-subtle-level-1);
  --dk-border-control-default-on-error-subtle: var(--dk-border-control-default-on-error-subtle-level-1);
  --dk-border-control-hover-on-error-subtle: var(--dk-border-control-hover-on-error-subtle-level-1);
  --dk-border-control-active-on-error-subtle: var(--dk-border-control-active-on-error-subtle-level-1);
  --dk-icon-control-default-on-error-subtle: var(--dk-icon-control-default-on-error-subtle-level-1);
  --dk-icon-control-hover-on-error-subtle: var(--dk-icon-control-hover-on-error-subtle-level-1);
  --dk-icon-control-active-on-error-subtle: var(--dk-icon-control-active-on-error-subtle-level-1);
  --dk-icon-control-disabled-on-error-subtle: var(--dk-icon-control-disabled-on-error-subtle-level-1);
  --dk-text-control-default-on-error-subtle: var(--dk-text-control-default-on-error-subtle-level-1);
  --dk-text-control-hover-on-error-subtle: var(--dk-text-control-hover-on-error-subtle-level-1);
  --dk-text-control-active-on-error-subtle: var(--dk-text-control-active-on-error-subtle-level-1);
  --dk-text-control-disabled-on-error-subtle: var(--dk-text-control-disabled-on-error-subtle-level-1);
  /* warning */
  --dk-surface-control-default-on-warning-subtle: var(--dk-surface-control-default-on-warning-subtle-level-1);
  --dk-surface-control-hover-on-warning-subtle: var(--dk-surface-control-hover-on-warning-subtle-level-1);
  --dk-surface-control-active-on-warning-subtle: var(--dk-surface-control-active-on-warning-subtle-level-1);
  --dk-surface-control-disabled-on-warning-subtle: var(--dk-surface-control-disabled-on-warning-subtle-level-1);
  --dk-border-control-default-on-warning-subtle: var(--dk-border-control-default-on-warning-subtle-level-1);
  --dk-border-control-hover-on-warning-subtle: var(--dk-border-control-hover-on-warning-subtle-level-1);
  --dk-border-control-active-on-warning-subtle: var(--dk-border-control-active-on-warning-subtle-level-1);
  --dk-icon-control-default-on-warning-subtle: var(--dk-icon-control-default-on-warning-subtle-level-1);
  --dk-icon-control-hover-on-warning-subtle: var(--dk-icon-control-hover-on-warning-subtle-level-1);
  --dk-icon-control-active-on-warning-subtle: var(--dk-icon-control-active-on-warning-subtle-level-1);
  --dk-icon-control-disabled-on-warning-subtle: var(--dk-icon-control-disabled-on-warning-subtle-level-1);
  --dk-text-control-default-on-warning-subtle: var(--dk-text-control-default-on-warning-subtle-level-1);
  --dk-text-control-hover-on-warning-subtle: var(--dk-text-control-hover-on-warning-subtle-level-1);
  --dk-text-control-active-on-warning-subtle: var(--dk-text-control-active-on-warning-subtle-level-1);
  --dk-text-control-disabled-on-warning-subtle: var(--dk-text-control-disabled-on-warning-subtle-level-1);
  /* information */
  --dk-surface-control-default-on-information-subtle: var(--dk-surface-control-default-on-information-subtle-level-1);
  --dk-surface-control-hover-on-information-subtle: var(--dk-surface-control-hover-on-information-subtle-level-1);
  --dk-surface-control-active-on-information-subtle: var(--dk-surface-control-active-on-information-subtle-level-1);
  --dk-surface-control-disabled-on-information-subtle: var(--dk-surface-control-disabled-on-information-subtle-level-1);
  --dk-border-control-default-on-information-subtle: var(--dk-border-control-default-on-information-subtle-level-1);
  --dk-border-control-hover-on-information-subtle: var(--dk-border-control-hover-on-information-subtle-level-1);
  --dk-border-control-active-on-information-subtle: var(--dk-border-control-active-on-information-subtle-level-1);
  --dk-icon-control-default-on-information-subtle: var(--dk-icon-control-default-on-information-subtle-level-1);
  --dk-icon-control-hover-on-information-subtle: var(--dk-icon-control-hover-on-information-subtle-level-1);
  --dk-icon-control-active-on-information-subtle: var(--dk-icon-control-active-on-information-subtle-level-1);
  --dk-icon-control-disabled-on-information-subtle: var(--dk-icon-control-disabled-on-information-subtle-level-1);
  --dk-text-control-default-on-information-subtle: var(--dk-text-control-default-on-information-subtle-level-1);
  --dk-text-control-hover-on-information-subtle: var(--dk-text-control-hover-on-information-subtle-level-1);
  --dk-text-control-active-on-information-subtle: var(--dk-text-control-active-on-information-subtle-level-1);
  --dk-text-control-disabled-on-information-subtle: var(--dk-text-control-disabled-on-information-subtle-level-1);
}
[data-theme][data-surface="below"],
[data-theme] [data-surface="below"]:not([data-theme]):where(:not(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *))) {
  /* primary */
  --dk-surface-control-default-on-primary-subtle: var(--dk-surface-control-default-on-primary-subtle-level-1);
  --dk-surface-control-hover-on-primary-subtle: var(--dk-surface-control-hover-on-primary-subtle-level-1);
  --dk-surface-control-active-on-primary-subtle: var(--dk-surface-control-active-on-primary-subtle-level-1);
  --dk-surface-control-disabled-on-primary-subtle: var(--dk-surface-control-disabled-on-primary-subtle-level-1);
  --dk-border-control-default-on-primary-subtle: var(--dk-border-control-default-on-primary-subtle-level-1);
  --dk-border-control-hover-on-primary-subtle: var(--dk-border-control-hover-on-primary-subtle-level-1);
  --dk-border-control-active-on-primary-subtle: var(--dk-border-control-active-on-primary-subtle-level-1);
  --dk-icon-control-default-on-primary-subtle: var(--dk-icon-control-default-on-primary-subtle-level-1);
  --dk-icon-control-hover-on-primary-subtle: var(--dk-icon-control-hover-on-primary-subtle-level-1);
  --dk-icon-control-active-on-primary-subtle: var(--dk-icon-control-active-on-primary-subtle-level-1);
  --dk-icon-control-disabled-on-primary-subtle: var(--dk-icon-control-disabled-on-primary-subtle-level-1);
  --dk-text-control-default-on-primary-subtle: var(--dk-text-control-default-on-primary-subtle-level-1);
  --dk-text-control-hover-on-primary-subtle: var(--dk-text-control-hover-on-primary-subtle-level-1);
  --dk-text-control-active-on-primary-subtle: var(--dk-text-control-active-on-primary-subtle-level-1);
  --dk-text-control-disabled-on-primary-subtle: var(--dk-text-control-disabled-on-primary-subtle-level-1);
  /* success */
  --dk-surface-control-default-on-success-subtle: var(--dk-surface-control-default-on-success-subtle-level-1);
  --dk-surface-control-hover-on-success-subtle: var(--dk-surface-control-hover-on-success-subtle-level-1);
  --dk-surface-control-active-on-success-subtle: var(--dk-surface-control-active-on-success-subtle-level-1);
  --dk-surface-control-disabled-on-success-subtle: var(--dk-surface-control-disabled-on-success-subtle-level-1);
  --dk-border-control-default-on-success-subtle: var(--dk-border-control-default-on-success-subtle-level-1);
  --dk-border-control-hover-on-success-subtle: var(--dk-border-control-hover-on-success-subtle-level-1);
  --dk-border-control-active-on-success-subtle: var(--dk-border-control-active-on-success-subtle-level-1);
  --dk-icon-control-default-on-success-subtle: var(--dk-icon-control-default-on-success-subtle-level-1);
  --dk-icon-control-hover-on-success-subtle: var(--dk-icon-control-hover-on-success-subtle-level-1);
  --dk-icon-control-active-on-success-subtle: var(--dk-icon-control-active-on-success-subtle-level-1);
  --dk-icon-control-disabled-on-success-subtle: var(--dk-icon-control-disabled-on-success-subtle-level-1);
  --dk-text-control-default-on-success-subtle: var(--dk-text-control-default-on-success-subtle-level-1);
  --dk-text-control-hover-on-success-subtle: var(--dk-text-control-hover-on-success-subtle-level-1);
  --dk-text-control-active-on-success-subtle: var(--dk-text-control-active-on-success-subtle-level-1);
  --dk-text-control-disabled-on-success-subtle: var(--dk-text-control-disabled-on-success-subtle-level-1);
  /* error */
  --dk-surface-control-default-on-error-subtle: var(--dk-surface-control-default-on-error-subtle-level-1);
  --dk-surface-control-hover-on-error-subtle: var(--dk-surface-control-hover-on-error-subtle-level-1);
  --dk-surface-control-active-on-error-subtle: var(--dk-surface-control-active-on-error-subtle-level-1);
  --dk-surface-control-disabled-on-error-subtle: var(--dk-surface-control-disabled-on-error-subtle-level-1);
  --dk-border-control-default-on-error-subtle: var(--dk-border-control-default-on-error-subtle-level-1);
  --dk-border-control-hover-on-error-subtle: var(--dk-border-control-hover-on-error-subtle-level-1);
  --dk-border-control-active-on-error-subtle: var(--dk-border-control-active-on-error-subtle-level-1);
  --dk-icon-control-default-on-error-subtle: var(--dk-icon-control-default-on-error-subtle-level-1);
  --dk-icon-control-hover-on-error-subtle: var(--dk-icon-control-hover-on-error-subtle-level-1);
  --dk-icon-control-active-on-error-subtle: var(--dk-icon-control-active-on-error-subtle-level-1);
  --dk-icon-control-disabled-on-error-subtle: var(--dk-icon-control-disabled-on-error-subtle-level-1);
  --dk-text-control-default-on-error-subtle: var(--dk-text-control-default-on-error-subtle-level-1);
  --dk-text-control-hover-on-error-subtle: var(--dk-text-control-hover-on-error-subtle-level-1);
  --dk-text-control-active-on-error-subtle: var(--dk-text-control-active-on-error-subtle-level-1);
  --dk-text-control-disabled-on-error-subtle: var(--dk-text-control-disabled-on-error-subtle-level-1);
  /* warning */
  --dk-surface-control-default-on-warning-subtle: var(--dk-surface-control-default-on-warning-subtle-level-1);
  --dk-surface-control-hover-on-warning-subtle: var(--dk-surface-control-hover-on-warning-subtle-level-1);
  --dk-surface-control-active-on-warning-subtle: var(--dk-surface-control-active-on-warning-subtle-level-1);
  --dk-surface-control-disabled-on-warning-subtle: var(--dk-surface-control-disabled-on-warning-subtle-level-1);
  --dk-border-control-default-on-warning-subtle: var(--dk-border-control-default-on-warning-subtle-level-1);
  --dk-border-control-hover-on-warning-subtle: var(--dk-border-control-hover-on-warning-subtle-level-1);
  --dk-border-control-active-on-warning-subtle: var(--dk-border-control-active-on-warning-subtle-level-1);
  --dk-icon-control-default-on-warning-subtle: var(--dk-icon-control-default-on-warning-subtle-level-1);
  --dk-icon-control-hover-on-warning-subtle: var(--dk-icon-control-hover-on-warning-subtle-level-1);
  --dk-icon-control-active-on-warning-subtle: var(--dk-icon-control-active-on-warning-subtle-level-1);
  --dk-icon-control-disabled-on-warning-subtle: var(--dk-icon-control-disabled-on-warning-subtle-level-1);
  --dk-text-control-default-on-warning-subtle: var(--dk-text-control-default-on-warning-subtle-level-1);
  --dk-text-control-hover-on-warning-subtle: var(--dk-text-control-hover-on-warning-subtle-level-1);
  --dk-text-control-active-on-warning-subtle: var(--dk-text-control-active-on-warning-subtle-level-1);
  --dk-text-control-disabled-on-warning-subtle: var(--dk-text-control-disabled-on-warning-subtle-level-1);
  /* information */
  --dk-surface-control-default-on-information-subtle: var(--dk-surface-control-default-on-information-subtle-level-1);
  --dk-surface-control-hover-on-information-subtle: var(--dk-surface-control-hover-on-information-subtle-level-1);
  --dk-surface-control-active-on-information-subtle: var(--dk-surface-control-active-on-information-subtle-level-1);
  --dk-surface-control-disabled-on-information-subtle: var(--dk-surface-control-disabled-on-information-subtle-level-1);
  --dk-border-control-default-on-information-subtle: var(--dk-border-control-default-on-information-subtle-level-1);
  --dk-border-control-hover-on-information-subtle: var(--dk-border-control-hover-on-information-subtle-level-1);
  --dk-border-control-active-on-information-subtle: var(--dk-border-control-active-on-information-subtle-level-1);
  --dk-icon-control-default-on-information-subtle: var(--dk-icon-control-default-on-information-subtle-level-1);
  --dk-icon-control-hover-on-information-subtle: var(--dk-icon-control-hover-on-information-subtle-level-1);
  --dk-icon-control-active-on-information-subtle: var(--dk-icon-control-active-on-information-subtle-level-1);
  --dk-icon-control-disabled-on-information-subtle: var(--dk-icon-control-disabled-on-information-subtle-level-1);
  --dk-text-control-default-on-information-subtle: var(--dk-text-control-default-on-information-subtle-level-1);
  --dk-text-control-hover-on-information-subtle: var(--dk-text-control-hover-on-information-subtle-level-1);
  --dk-text-control-active-on-information-subtle: var(--dk-text-control-active-on-information-subtle-level-1);
  --dk-text-control-disabled-on-information-subtle: var(--dk-text-control-disabled-on-information-subtle-level-1);
}
[data-theme="light"] .dk-component-brand-sheet__panel[data-theme="dark"]:where(:not([data-theme="light"] [data-theme="dark"] *)) {
  /* primary */
  --dk-surface-control-default-on-primary-subtle: var(--dk-surface-control-default-on-primary-subtle-level-1);
  --dk-surface-control-hover-on-primary-subtle: var(--dk-surface-control-hover-on-primary-subtle-level-1);
  --dk-surface-control-active-on-primary-subtle: var(--dk-surface-control-active-on-primary-subtle-level-1);
  --dk-surface-control-disabled-on-primary-subtle: var(--dk-surface-control-disabled-on-primary-subtle-level-1);
  --dk-border-control-default-on-primary-subtle: var(--dk-border-control-default-on-primary-subtle-level-1);
  --dk-border-control-hover-on-primary-subtle: var(--dk-border-control-hover-on-primary-subtle-level-1);
  --dk-border-control-active-on-primary-subtle: var(--dk-border-control-active-on-primary-subtle-level-1);
  --dk-icon-control-default-on-primary-subtle: var(--dk-icon-control-default-on-primary-subtle-level-1);
  --dk-icon-control-hover-on-primary-subtle: var(--dk-icon-control-hover-on-primary-subtle-level-1);
  --dk-icon-control-active-on-primary-subtle: var(--dk-icon-control-active-on-primary-subtle-level-1);
  --dk-icon-control-disabled-on-primary-subtle: var(--dk-icon-control-disabled-on-primary-subtle-level-1);
  --dk-text-control-default-on-primary-subtle: var(--dk-text-control-default-on-primary-subtle-level-1);
  --dk-text-control-hover-on-primary-subtle: var(--dk-text-control-hover-on-primary-subtle-level-1);
  --dk-text-control-active-on-primary-subtle: var(--dk-text-control-active-on-primary-subtle-level-1);
  --dk-text-control-disabled-on-primary-subtle: var(--dk-text-control-disabled-on-primary-subtle-level-1);
  /* success */
  --dk-surface-control-default-on-success-subtle: var(--dk-surface-control-default-on-success-subtle-level-1);
  --dk-surface-control-hover-on-success-subtle: var(--dk-surface-control-hover-on-success-subtle-level-1);
  --dk-surface-control-active-on-success-subtle: var(--dk-surface-control-active-on-success-subtle-level-1);
  --dk-surface-control-disabled-on-success-subtle: var(--dk-surface-control-disabled-on-success-subtle-level-1);
  --dk-border-control-default-on-success-subtle: var(--dk-border-control-default-on-success-subtle-level-1);
  --dk-border-control-hover-on-success-subtle: var(--dk-border-control-hover-on-success-subtle-level-1);
  --dk-border-control-active-on-success-subtle: var(--dk-border-control-active-on-success-subtle-level-1);
  --dk-icon-control-default-on-success-subtle: var(--dk-icon-control-default-on-success-subtle-level-1);
  --dk-icon-control-hover-on-success-subtle: var(--dk-icon-control-hover-on-success-subtle-level-1);
  --dk-icon-control-active-on-success-subtle: var(--dk-icon-control-active-on-success-subtle-level-1);
  --dk-icon-control-disabled-on-success-subtle: var(--dk-icon-control-disabled-on-success-subtle-level-1);
  --dk-text-control-default-on-success-subtle: var(--dk-text-control-default-on-success-subtle-level-1);
  --dk-text-control-hover-on-success-subtle: var(--dk-text-control-hover-on-success-subtle-level-1);
  --dk-text-control-active-on-success-subtle: var(--dk-text-control-active-on-success-subtle-level-1);
  --dk-text-control-disabled-on-success-subtle: var(--dk-text-control-disabled-on-success-subtle-level-1);
  /* error */
  --dk-surface-control-default-on-error-subtle: var(--dk-surface-control-default-on-error-subtle-level-1);
  --dk-surface-control-hover-on-error-subtle: var(--dk-surface-control-hover-on-error-subtle-level-1);
  --dk-surface-control-active-on-error-subtle: var(--dk-surface-control-active-on-error-subtle-level-1);
  --dk-surface-control-disabled-on-error-subtle: var(--dk-surface-control-disabled-on-error-subtle-level-1);
  --dk-border-control-default-on-error-subtle: var(--dk-border-control-default-on-error-subtle-level-1);
  --dk-border-control-hover-on-error-subtle: var(--dk-border-control-hover-on-error-subtle-level-1);
  --dk-border-control-active-on-error-subtle: var(--dk-border-control-active-on-error-subtle-level-1);
  --dk-icon-control-default-on-error-subtle: var(--dk-icon-control-default-on-error-subtle-level-1);
  --dk-icon-control-hover-on-error-subtle: var(--dk-icon-control-hover-on-error-subtle-level-1);
  --dk-icon-control-active-on-error-subtle: var(--dk-icon-control-active-on-error-subtle-level-1);
  --dk-icon-control-disabled-on-error-subtle: var(--dk-icon-control-disabled-on-error-subtle-level-1);
  --dk-text-control-default-on-error-subtle: var(--dk-text-control-default-on-error-subtle-level-1);
  --dk-text-control-hover-on-error-subtle: var(--dk-text-control-hover-on-error-subtle-level-1);
  --dk-text-control-active-on-error-subtle: var(--dk-text-control-active-on-error-subtle-level-1);
  --dk-text-control-disabled-on-error-subtle: var(--dk-text-control-disabled-on-error-subtle-level-1);
  /* warning */
  --dk-surface-control-default-on-warning-subtle: var(--dk-surface-control-default-on-warning-subtle-level-1);
  --dk-surface-control-hover-on-warning-subtle: var(--dk-surface-control-hover-on-warning-subtle-level-1);
  --dk-surface-control-active-on-warning-subtle: var(--dk-surface-control-active-on-warning-subtle-level-1);
  --dk-surface-control-disabled-on-warning-subtle: var(--dk-surface-control-disabled-on-warning-subtle-level-1);
  --dk-border-control-default-on-warning-subtle: var(--dk-border-control-default-on-warning-subtle-level-1);
  --dk-border-control-hover-on-warning-subtle: var(--dk-border-control-hover-on-warning-subtle-level-1);
  --dk-border-control-active-on-warning-subtle: var(--dk-border-control-active-on-warning-subtle-level-1);
  --dk-icon-control-default-on-warning-subtle: var(--dk-icon-control-default-on-warning-subtle-level-1);
  --dk-icon-control-hover-on-warning-subtle: var(--dk-icon-control-hover-on-warning-subtle-level-1);
  --dk-icon-control-active-on-warning-subtle: var(--dk-icon-control-active-on-warning-subtle-level-1);
  --dk-icon-control-disabled-on-warning-subtle: var(--dk-icon-control-disabled-on-warning-subtle-level-1);
  --dk-text-control-default-on-warning-subtle: var(--dk-text-control-default-on-warning-subtle-level-1);
  --dk-text-control-hover-on-warning-subtle: var(--dk-text-control-hover-on-warning-subtle-level-1);
  --dk-text-control-active-on-warning-subtle: var(--dk-text-control-active-on-warning-subtle-level-1);
  --dk-text-control-disabled-on-warning-subtle: var(--dk-text-control-disabled-on-warning-subtle-level-1);
  /* information */
  --dk-surface-control-default-on-information-subtle: var(--dk-surface-control-default-on-information-subtle-level-1);
  --dk-surface-control-hover-on-information-subtle: var(--dk-surface-control-hover-on-information-subtle-level-1);
  --dk-surface-control-active-on-information-subtle: var(--dk-surface-control-active-on-information-subtle-level-1);
  --dk-surface-control-disabled-on-information-subtle: var(--dk-surface-control-disabled-on-information-subtle-level-1);
  --dk-border-control-default-on-information-subtle: var(--dk-border-control-default-on-information-subtle-level-1);
  --dk-border-control-hover-on-information-subtle: var(--dk-border-control-hover-on-information-subtle-level-1);
  --dk-border-control-active-on-information-subtle: var(--dk-border-control-active-on-information-subtle-level-1);
  --dk-icon-control-default-on-information-subtle: var(--dk-icon-control-default-on-information-subtle-level-1);
  --dk-icon-control-hover-on-information-subtle: var(--dk-icon-control-hover-on-information-subtle-level-1);
  --dk-icon-control-active-on-information-subtle: var(--dk-icon-control-active-on-information-subtle-level-1);
  --dk-icon-control-disabled-on-information-subtle: var(--dk-icon-control-disabled-on-information-subtle-level-1);
  --dk-text-control-default-on-information-subtle: var(--dk-text-control-default-on-information-subtle-level-1);
  --dk-text-control-hover-on-information-subtle: var(--dk-text-control-hover-on-information-subtle-level-1);
  --dk-text-control-active-on-information-subtle: var(--dk-text-control-active-on-information-subtle-level-1);
  --dk-text-control-disabled-on-information-subtle: var(--dk-text-control-disabled-on-information-subtle-level-1);
}
[data-theme="dark"] [data-surface="raised"]:not([data-theme]):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"] [data-tone="inverse"] [data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"][data-surface="raised"] {
  /* primary */
  --dk-surface-control-default-on-primary-subtle: var(--dk-surface-control-default-on-primary-subtle-level-1);
  --dk-surface-control-hover-on-primary-subtle: var(--dk-surface-control-hover-on-primary-subtle-level-1);
  --dk-surface-control-active-on-primary-subtle: var(--dk-surface-control-active-on-primary-subtle-level-1);
  --dk-surface-control-disabled-on-primary-subtle: var(--dk-surface-control-disabled-on-primary-subtle-level-1);
  --dk-border-control-default-on-primary-subtle: var(--dk-border-control-default-on-primary-subtle-level-1);
  --dk-border-control-hover-on-primary-subtle: var(--dk-border-control-hover-on-primary-subtle-level-1);
  --dk-border-control-active-on-primary-subtle: var(--dk-border-control-active-on-primary-subtle-level-1);
  --dk-icon-control-default-on-primary-subtle: var(--dk-icon-control-default-on-primary-subtle-level-1);
  --dk-icon-control-hover-on-primary-subtle: var(--dk-icon-control-hover-on-primary-subtle-level-1);
  --dk-icon-control-active-on-primary-subtle: var(--dk-icon-control-active-on-primary-subtle-level-1);
  --dk-icon-control-disabled-on-primary-subtle: var(--dk-icon-control-disabled-on-primary-subtle-level-1);
  --dk-text-control-default-on-primary-subtle: var(--dk-text-control-default-on-primary-subtle-level-1);
  --dk-text-control-hover-on-primary-subtle: var(--dk-text-control-hover-on-primary-subtle-level-1);
  --dk-text-control-active-on-primary-subtle: var(--dk-text-control-active-on-primary-subtle-level-1);
  --dk-text-control-disabled-on-primary-subtle: var(--dk-text-control-disabled-on-primary-subtle-level-1);
  /* success */
  --dk-surface-control-default-on-success-subtle: var(--dk-surface-control-default-on-success-subtle-level-1);
  --dk-surface-control-hover-on-success-subtle: var(--dk-surface-control-hover-on-success-subtle-level-1);
  --dk-surface-control-active-on-success-subtle: var(--dk-surface-control-active-on-success-subtle-level-1);
  --dk-surface-control-disabled-on-success-subtle: var(--dk-surface-control-disabled-on-success-subtle-level-1);
  --dk-border-control-default-on-success-subtle: var(--dk-border-control-default-on-success-subtle-level-1);
  --dk-border-control-hover-on-success-subtle: var(--dk-border-control-hover-on-success-subtle-level-1);
  --dk-border-control-active-on-success-subtle: var(--dk-border-control-active-on-success-subtle-level-1);
  --dk-icon-control-default-on-success-subtle: var(--dk-icon-control-default-on-success-subtle-level-1);
  --dk-icon-control-hover-on-success-subtle: var(--dk-icon-control-hover-on-success-subtle-level-1);
  --dk-icon-control-active-on-success-subtle: var(--dk-icon-control-active-on-success-subtle-level-1);
  --dk-icon-control-disabled-on-success-subtle: var(--dk-icon-control-disabled-on-success-subtle-level-1);
  --dk-text-control-default-on-success-subtle: var(--dk-text-control-default-on-success-subtle-level-1);
  --dk-text-control-hover-on-success-subtle: var(--dk-text-control-hover-on-success-subtle-level-1);
  --dk-text-control-active-on-success-subtle: var(--dk-text-control-active-on-success-subtle-level-1);
  --dk-text-control-disabled-on-success-subtle: var(--dk-text-control-disabled-on-success-subtle-level-1);
  /* error */
  --dk-surface-control-default-on-error-subtle: var(--dk-surface-control-default-on-error-subtle-level-1);
  --dk-surface-control-hover-on-error-subtle: var(--dk-surface-control-hover-on-error-subtle-level-1);
  --dk-surface-control-active-on-error-subtle: var(--dk-surface-control-active-on-error-subtle-level-1);
  --dk-surface-control-disabled-on-error-subtle: var(--dk-surface-control-disabled-on-error-subtle-level-1);
  --dk-border-control-default-on-error-subtle: var(--dk-border-control-default-on-error-subtle-level-1);
  --dk-border-control-hover-on-error-subtle: var(--dk-border-control-hover-on-error-subtle-level-1);
  --dk-border-control-active-on-error-subtle: var(--dk-border-control-active-on-error-subtle-level-1);
  --dk-icon-control-default-on-error-subtle: var(--dk-icon-control-default-on-error-subtle-level-1);
  --dk-icon-control-hover-on-error-subtle: var(--dk-icon-control-hover-on-error-subtle-level-1);
  --dk-icon-control-active-on-error-subtle: var(--dk-icon-control-active-on-error-subtle-level-1);
  --dk-icon-control-disabled-on-error-subtle: var(--dk-icon-control-disabled-on-error-subtle-level-1);
  --dk-text-control-default-on-error-subtle: var(--dk-text-control-default-on-error-subtle-level-1);
  --dk-text-control-hover-on-error-subtle: var(--dk-text-control-hover-on-error-subtle-level-1);
  --dk-text-control-active-on-error-subtle: var(--dk-text-control-active-on-error-subtle-level-1);
  --dk-text-control-disabled-on-error-subtle: var(--dk-text-control-disabled-on-error-subtle-level-1);
  /* warning */
  --dk-surface-control-default-on-warning-subtle: var(--dk-surface-control-default-on-warning-subtle-level-1);
  --dk-surface-control-hover-on-warning-subtle: var(--dk-surface-control-hover-on-warning-subtle-level-1);
  --dk-surface-control-active-on-warning-subtle: var(--dk-surface-control-active-on-warning-subtle-level-1);
  --dk-surface-control-disabled-on-warning-subtle: var(--dk-surface-control-disabled-on-warning-subtle-level-1);
  --dk-border-control-default-on-warning-subtle: var(--dk-border-control-default-on-warning-subtle-level-1);
  --dk-border-control-hover-on-warning-subtle: var(--dk-border-control-hover-on-warning-subtle-level-1);
  --dk-border-control-active-on-warning-subtle: var(--dk-border-control-active-on-warning-subtle-level-1);
  --dk-icon-control-default-on-warning-subtle: var(--dk-icon-control-default-on-warning-subtle-level-1);
  --dk-icon-control-hover-on-warning-subtle: var(--dk-icon-control-hover-on-warning-subtle-level-1);
  --dk-icon-control-active-on-warning-subtle: var(--dk-icon-control-active-on-warning-subtle-level-1);
  --dk-icon-control-disabled-on-warning-subtle: var(--dk-icon-control-disabled-on-warning-subtle-level-1);
  --dk-text-control-default-on-warning-subtle: var(--dk-text-control-default-on-warning-subtle-level-1);
  --dk-text-control-hover-on-warning-subtle: var(--dk-text-control-hover-on-warning-subtle-level-1);
  --dk-text-control-active-on-warning-subtle: var(--dk-text-control-active-on-warning-subtle-level-1);
  --dk-text-control-disabled-on-warning-subtle: var(--dk-text-control-disabled-on-warning-subtle-level-1);
  /* information */
  --dk-surface-control-default-on-information-subtle: var(--dk-surface-control-default-on-information-subtle-level-1);
  --dk-surface-control-hover-on-information-subtle: var(--dk-surface-control-hover-on-information-subtle-level-1);
  --dk-surface-control-active-on-information-subtle: var(--dk-surface-control-active-on-information-subtle-level-1);
  --dk-surface-control-disabled-on-information-subtle: var(--dk-surface-control-disabled-on-information-subtle-level-1);
  --dk-border-control-default-on-information-subtle: var(--dk-border-control-default-on-information-subtle-level-1);
  --dk-border-control-hover-on-information-subtle: var(--dk-border-control-hover-on-information-subtle-level-1);
  --dk-border-control-active-on-information-subtle: var(--dk-border-control-active-on-information-subtle-level-1);
  --dk-icon-control-default-on-information-subtle: var(--dk-icon-control-default-on-information-subtle-level-1);
  --dk-icon-control-hover-on-information-subtle: var(--dk-icon-control-hover-on-information-subtle-level-1);
  --dk-icon-control-active-on-information-subtle: var(--dk-icon-control-active-on-information-subtle-level-1);
  --dk-icon-control-disabled-on-information-subtle: var(--dk-icon-control-disabled-on-information-subtle-level-1);
  --dk-text-control-default-on-information-subtle: var(--dk-text-control-default-on-information-subtle-level-1);
  --dk-text-control-hover-on-information-subtle: var(--dk-text-control-hover-on-information-subtle-level-1);
  --dk-text-control-active-on-information-subtle: var(--dk-text-control-active-on-information-subtle-level-1);
  --dk-text-control-disabled-on-information-subtle: var(--dk-text-control-disabled-on-information-subtle-level-1);
}
[data-theme] [data-surface="2"]:not([data-theme]),
[data-theme][data-surface="2"] {
  /* primary */
  --dk-surface-control-default-on-primary-subtle: var(--dk-surface-control-default-on-primary-subtle-level-2);
  --dk-surface-control-hover-on-primary-subtle: var(--dk-surface-control-hover-on-primary-subtle-level-2);
  --dk-surface-control-active-on-primary-subtle: var(--dk-surface-control-active-on-primary-subtle-level-2);
  --dk-surface-control-disabled-on-primary-subtle: var(--dk-surface-control-disabled-on-primary-subtle-level-2);
  --dk-border-control-default-on-primary-subtle: var(--dk-border-control-default-on-primary-subtle-level-2);
  --dk-border-control-hover-on-primary-subtle: var(--dk-border-control-hover-on-primary-subtle-level-2);
  --dk-border-control-active-on-primary-subtle: var(--dk-border-control-active-on-primary-subtle-level-2);
  --dk-icon-control-default-on-primary-subtle: var(--dk-icon-control-default-on-primary-subtle-level-2);
  --dk-icon-control-hover-on-primary-subtle: var(--dk-icon-control-hover-on-primary-subtle-level-2);
  --dk-icon-control-active-on-primary-subtle: var(--dk-icon-control-active-on-primary-subtle-level-2);
  --dk-icon-control-disabled-on-primary-subtle: var(--dk-icon-control-disabled-on-primary-subtle-level-2);
  --dk-text-control-default-on-primary-subtle: var(--dk-text-control-default-on-primary-subtle-level-2);
  --dk-text-control-hover-on-primary-subtle: var(--dk-text-control-hover-on-primary-subtle-level-2);
  --dk-text-control-active-on-primary-subtle: var(--dk-text-control-active-on-primary-subtle-level-2);
  --dk-text-control-disabled-on-primary-subtle: var(--dk-text-control-disabled-on-primary-subtle-level-2);
  /* success */
  --dk-surface-control-default-on-success-subtle: var(--dk-surface-control-default-on-success-subtle-level-2);
  --dk-surface-control-hover-on-success-subtle: var(--dk-surface-control-hover-on-success-subtle-level-2);
  --dk-surface-control-active-on-success-subtle: var(--dk-surface-control-active-on-success-subtle-level-2);
  --dk-surface-control-disabled-on-success-subtle: var(--dk-surface-control-disabled-on-success-subtle-level-2);
  --dk-border-control-default-on-success-subtle: var(--dk-border-control-default-on-success-subtle-level-2);
  --dk-border-control-hover-on-success-subtle: var(--dk-border-control-hover-on-success-subtle-level-2);
  --dk-border-control-active-on-success-subtle: var(--dk-border-control-active-on-success-subtle-level-2);
  --dk-icon-control-default-on-success-subtle: var(--dk-icon-control-default-on-success-subtle-level-2);
  --dk-icon-control-hover-on-success-subtle: var(--dk-icon-control-hover-on-success-subtle-level-2);
  --dk-icon-control-active-on-success-subtle: var(--dk-icon-control-active-on-success-subtle-level-2);
  --dk-icon-control-disabled-on-success-subtle: var(--dk-icon-control-disabled-on-success-subtle-level-2);
  --dk-text-control-default-on-success-subtle: var(--dk-text-control-default-on-success-subtle-level-2);
  --dk-text-control-hover-on-success-subtle: var(--dk-text-control-hover-on-success-subtle-level-2);
  --dk-text-control-active-on-success-subtle: var(--dk-text-control-active-on-success-subtle-level-2);
  --dk-text-control-disabled-on-success-subtle: var(--dk-text-control-disabled-on-success-subtle-level-2);
  /* error */
  --dk-surface-control-default-on-error-subtle: var(--dk-surface-control-default-on-error-subtle-level-2);
  --dk-surface-control-hover-on-error-subtle: var(--dk-surface-control-hover-on-error-subtle-level-2);
  --dk-surface-control-active-on-error-subtle: var(--dk-surface-control-active-on-error-subtle-level-2);
  --dk-surface-control-disabled-on-error-subtle: var(--dk-surface-control-disabled-on-error-subtle-level-2);
  --dk-border-control-default-on-error-subtle: var(--dk-border-control-default-on-error-subtle-level-2);
  --dk-border-control-hover-on-error-subtle: var(--dk-border-control-hover-on-error-subtle-level-2);
  --dk-border-control-active-on-error-subtle: var(--dk-border-control-active-on-error-subtle-level-2);
  --dk-icon-control-default-on-error-subtle: var(--dk-icon-control-default-on-error-subtle-level-2);
  --dk-icon-control-hover-on-error-subtle: var(--dk-icon-control-hover-on-error-subtle-level-2);
  --dk-icon-control-active-on-error-subtle: var(--dk-icon-control-active-on-error-subtle-level-2);
  --dk-icon-control-disabled-on-error-subtle: var(--dk-icon-control-disabled-on-error-subtle-level-2);
  --dk-text-control-default-on-error-subtle: var(--dk-text-control-default-on-error-subtle-level-2);
  --dk-text-control-hover-on-error-subtle: var(--dk-text-control-hover-on-error-subtle-level-2);
  --dk-text-control-active-on-error-subtle: var(--dk-text-control-active-on-error-subtle-level-2);
  --dk-text-control-disabled-on-error-subtle: var(--dk-text-control-disabled-on-error-subtle-level-2);
  /* warning */
  --dk-surface-control-default-on-warning-subtle: var(--dk-surface-control-default-on-warning-subtle-level-2);
  --dk-surface-control-hover-on-warning-subtle: var(--dk-surface-control-hover-on-warning-subtle-level-2);
  --dk-surface-control-active-on-warning-subtle: var(--dk-surface-control-active-on-warning-subtle-level-2);
  --dk-surface-control-disabled-on-warning-subtle: var(--dk-surface-control-disabled-on-warning-subtle-level-2);
  --dk-border-control-default-on-warning-subtle: var(--dk-border-control-default-on-warning-subtle-level-2);
  --dk-border-control-hover-on-warning-subtle: var(--dk-border-control-hover-on-warning-subtle-level-2);
  --dk-border-control-active-on-warning-subtle: var(--dk-border-control-active-on-warning-subtle-level-2);
  --dk-icon-control-default-on-warning-subtle: var(--dk-icon-control-default-on-warning-subtle-level-2);
  --dk-icon-control-hover-on-warning-subtle: var(--dk-icon-control-hover-on-warning-subtle-level-2);
  --dk-icon-control-active-on-warning-subtle: var(--dk-icon-control-active-on-warning-subtle-level-2);
  --dk-icon-control-disabled-on-warning-subtle: var(--dk-icon-control-disabled-on-warning-subtle-level-2);
  --dk-text-control-default-on-warning-subtle: var(--dk-text-control-default-on-warning-subtle-level-2);
  --dk-text-control-hover-on-warning-subtle: var(--dk-text-control-hover-on-warning-subtle-level-2);
  --dk-text-control-active-on-warning-subtle: var(--dk-text-control-active-on-warning-subtle-level-2);
  --dk-text-control-disabled-on-warning-subtle: var(--dk-text-control-disabled-on-warning-subtle-level-2);
  /* information */
  --dk-surface-control-default-on-information-subtle: var(--dk-surface-control-default-on-information-subtle-level-2);
  --dk-surface-control-hover-on-information-subtle: var(--dk-surface-control-hover-on-information-subtle-level-2);
  --dk-surface-control-active-on-information-subtle: var(--dk-surface-control-active-on-information-subtle-level-2);
  --dk-surface-control-disabled-on-information-subtle: var(--dk-surface-control-disabled-on-information-subtle-level-2);
  --dk-border-control-default-on-information-subtle: var(--dk-border-control-default-on-information-subtle-level-2);
  --dk-border-control-hover-on-information-subtle: var(--dk-border-control-hover-on-information-subtle-level-2);
  --dk-border-control-active-on-information-subtle: var(--dk-border-control-active-on-information-subtle-level-2);
  --dk-icon-control-default-on-information-subtle: var(--dk-icon-control-default-on-information-subtle-level-2);
  --dk-icon-control-hover-on-information-subtle: var(--dk-icon-control-hover-on-information-subtle-level-2);
  --dk-icon-control-active-on-information-subtle: var(--dk-icon-control-active-on-information-subtle-level-2);
  --dk-icon-control-disabled-on-information-subtle: var(--dk-icon-control-disabled-on-information-subtle-level-2);
  --dk-text-control-default-on-information-subtle: var(--dk-text-control-default-on-information-subtle-level-2);
  --dk-text-control-hover-on-information-subtle: var(--dk-text-control-hover-on-information-subtle-level-2);
  --dk-text-control-active-on-information-subtle: var(--dk-text-control-active-on-information-subtle-level-2);
  --dk-text-control-disabled-on-information-subtle: var(--dk-text-control-disabled-on-information-subtle-level-2);
}
[data-theme] [data-surface="below"]:not([data-theme]):where(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *)) {
  /* primary */
  --dk-surface-control-default-on-primary-subtle: var(--dk-surface-control-default-on-primary-subtle-level-2);
  --dk-surface-control-hover-on-primary-subtle: var(--dk-surface-control-hover-on-primary-subtle-level-2);
  --dk-surface-control-active-on-primary-subtle: var(--dk-surface-control-active-on-primary-subtle-level-2);
  --dk-surface-control-disabled-on-primary-subtle: var(--dk-surface-control-disabled-on-primary-subtle-level-2);
  --dk-border-control-default-on-primary-subtle: var(--dk-border-control-default-on-primary-subtle-level-2);
  --dk-border-control-hover-on-primary-subtle: var(--dk-border-control-hover-on-primary-subtle-level-2);
  --dk-border-control-active-on-primary-subtle: var(--dk-border-control-active-on-primary-subtle-level-2);
  --dk-icon-control-default-on-primary-subtle: var(--dk-icon-control-default-on-primary-subtle-level-2);
  --dk-icon-control-hover-on-primary-subtle: var(--dk-icon-control-hover-on-primary-subtle-level-2);
  --dk-icon-control-active-on-primary-subtle: var(--dk-icon-control-active-on-primary-subtle-level-2);
  --dk-icon-control-disabled-on-primary-subtle: var(--dk-icon-control-disabled-on-primary-subtle-level-2);
  --dk-text-control-default-on-primary-subtle: var(--dk-text-control-default-on-primary-subtle-level-2);
  --dk-text-control-hover-on-primary-subtle: var(--dk-text-control-hover-on-primary-subtle-level-2);
  --dk-text-control-active-on-primary-subtle: var(--dk-text-control-active-on-primary-subtle-level-2);
  --dk-text-control-disabled-on-primary-subtle: var(--dk-text-control-disabled-on-primary-subtle-level-2);
  /* success */
  --dk-surface-control-default-on-success-subtle: var(--dk-surface-control-default-on-success-subtle-level-2);
  --dk-surface-control-hover-on-success-subtle: var(--dk-surface-control-hover-on-success-subtle-level-2);
  --dk-surface-control-active-on-success-subtle: var(--dk-surface-control-active-on-success-subtle-level-2);
  --dk-surface-control-disabled-on-success-subtle: var(--dk-surface-control-disabled-on-success-subtle-level-2);
  --dk-border-control-default-on-success-subtle: var(--dk-border-control-default-on-success-subtle-level-2);
  --dk-border-control-hover-on-success-subtle: var(--dk-border-control-hover-on-success-subtle-level-2);
  --dk-border-control-active-on-success-subtle: var(--dk-border-control-active-on-success-subtle-level-2);
  --dk-icon-control-default-on-success-subtle: var(--dk-icon-control-default-on-success-subtle-level-2);
  --dk-icon-control-hover-on-success-subtle: var(--dk-icon-control-hover-on-success-subtle-level-2);
  --dk-icon-control-active-on-success-subtle: var(--dk-icon-control-active-on-success-subtle-level-2);
  --dk-icon-control-disabled-on-success-subtle: var(--dk-icon-control-disabled-on-success-subtle-level-2);
  --dk-text-control-default-on-success-subtle: var(--dk-text-control-default-on-success-subtle-level-2);
  --dk-text-control-hover-on-success-subtle: var(--dk-text-control-hover-on-success-subtle-level-2);
  --dk-text-control-active-on-success-subtle: var(--dk-text-control-active-on-success-subtle-level-2);
  --dk-text-control-disabled-on-success-subtle: var(--dk-text-control-disabled-on-success-subtle-level-2);
  /* error */
  --dk-surface-control-default-on-error-subtle: var(--dk-surface-control-default-on-error-subtle-level-2);
  --dk-surface-control-hover-on-error-subtle: var(--dk-surface-control-hover-on-error-subtle-level-2);
  --dk-surface-control-active-on-error-subtle: var(--dk-surface-control-active-on-error-subtle-level-2);
  --dk-surface-control-disabled-on-error-subtle: var(--dk-surface-control-disabled-on-error-subtle-level-2);
  --dk-border-control-default-on-error-subtle: var(--dk-border-control-default-on-error-subtle-level-2);
  --dk-border-control-hover-on-error-subtle: var(--dk-border-control-hover-on-error-subtle-level-2);
  --dk-border-control-active-on-error-subtle: var(--dk-border-control-active-on-error-subtle-level-2);
  --dk-icon-control-default-on-error-subtle: var(--dk-icon-control-default-on-error-subtle-level-2);
  --dk-icon-control-hover-on-error-subtle: var(--dk-icon-control-hover-on-error-subtle-level-2);
  --dk-icon-control-active-on-error-subtle: var(--dk-icon-control-active-on-error-subtle-level-2);
  --dk-icon-control-disabled-on-error-subtle: var(--dk-icon-control-disabled-on-error-subtle-level-2);
  --dk-text-control-default-on-error-subtle: var(--dk-text-control-default-on-error-subtle-level-2);
  --dk-text-control-hover-on-error-subtle: var(--dk-text-control-hover-on-error-subtle-level-2);
  --dk-text-control-active-on-error-subtle: var(--dk-text-control-active-on-error-subtle-level-2);
  --dk-text-control-disabled-on-error-subtle: var(--dk-text-control-disabled-on-error-subtle-level-2);
  /* warning */
  --dk-surface-control-default-on-warning-subtle: var(--dk-surface-control-default-on-warning-subtle-level-2);
  --dk-surface-control-hover-on-warning-subtle: var(--dk-surface-control-hover-on-warning-subtle-level-2);
  --dk-surface-control-active-on-warning-subtle: var(--dk-surface-control-active-on-warning-subtle-level-2);
  --dk-surface-control-disabled-on-warning-subtle: var(--dk-surface-control-disabled-on-warning-subtle-level-2);
  --dk-border-control-default-on-warning-subtle: var(--dk-border-control-default-on-warning-subtle-level-2);
  --dk-border-control-hover-on-warning-subtle: var(--dk-border-control-hover-on-warning-subtle-level-2);
  --dk-border-control-active-on-warning-subtle: var(--dk-border-control-active-on-warning-subtle-level-2);
  --dk-icon-control-default-on-warning-subtle: var(--dk-icon-control-default-on-warning-subtle-level-2);
  --dk-icon-control-hover-on-warning-subtle: var(--dk-icon-control-hover-on-warning-subtle-level-2);
  --dk-icon-control-active-on-warning-subtle: var(--dk-icon-control-active-on-warning-subtle-level-2);
  --dk-icon-control-disabled-on-warning-subtle: var(--dk-icon-control-disabled-on-warning-subtle-level-2);
  --dk-text-control-default-on-warning-subtle: var(--dk-text-control-default-on-warning-subtle-level-2);
  --dk-text-control-hover-on-warning-subtle: var(--dk-text-control-hover-on-warning-subtle-level-2);
  --dk-text-control-active-on-warning-subtle: var(--dk-text-control-active-on-warning-subtle-level-2);
  --dk-text-control-disabled-on-warning-subtle: var(--dk-text-control-disabled-on-warning-subtle-level-2);
  /* information */
  --dk-surface-control-default-on-information-subtle: var(--dk-surface-control-default-on-information-subtle-level-2);
  --dk-surface-control-hover-on-information-subtle: var(--dk-surface-control-hover-on-information-subtle-level-2);
  --dk-surface-control-active-on-information-subtle: var(--dk-surface-control-active-on-information-subtle-level-2);
  --dk-surface-control-disabled-on-information-subtle: var(--dk-surface-control-disabled-on-information-subtle-level-2);
  --dk-border-control-default-on-information-subtle: var(--dk-border-control-default-on-information-subtle-level-2);
  --dk-border-control-hover-on-information-subtle: var(--dk-border-control-hover-on-information-subtle-level-2);
  --dk-border-control-active-on-information-subtle: var(--dk-border-control-active-on-information-subtle-level-2);
  --dk-icon-control-default-on-information-subtle: var(--dk-icon-control-default-on-information-subtle-level-2);
  --dk-icon-control-hover-on-information-subtle: var(--dk-icon-control-hover-on-information-subtle-level-2);
  --dk-icon-control-active-on-information-subtle: var(--dk-icon-control-active-on-information-subtle-level-2);
  --dk-icon-control-disabled-on-information-subtle: var(--dk-icon-control-disabled-on-information-subtle-level-2);
  --dk-text-control-default-on-information-subtle: var(--dk-text-control-default-on-information-subtle-level-2);
  --dk-text-control-hover-on-information-subtle: var(--dk-text-control-hover-on-information-subtle-level-2);
  --dk-text-control-active-on-information-subtle: var(--dk-text-control-active-on-information-subtle-level-2);
  --dk-text-control-disabled-on-information-subtle: var(--dk-text-control-disabled-on-information-subtle-level-2);
}

/* ═══════════════════════════════════════ drift-kit:layer tokens/mapped/success.css ═══════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────
   COLLECTION: Mapped
   GROUP: Success (brand override)  — moved out of primitives/transform.css 2026-09-09:
   these are Mapped-tier aliases, and the tier of a token is decided by its file.
   ─────────────────────────────────────────────────────────── */

/* ── SUCCESS ramp → JADE (BRAND OVERRIDE) ─────────────────────────────────────
   Core Drift's success green sits noticeably outside our jade brand green, so
   the two clash whenever they appear together (e.g. a success toast on a page
   full of primary-jade chrome). Remap the ENTIRE success semantic set (all 34
   surface/border/text/icon tokens) onto the corresponding primary tokens —
   success IS jade here.
   One block covers both themes: each override references a primary token that
   is itself theme-scoped, so light/dark resolve automatically at usage time.
   (--dk-text-success-body has no primary counterpart; mapped to
   --dk-text-primary-default as the closest role.) */
[data-theme="light"], [data-theme="dark"] {
  --dk-surface-success-default: var(--dk-surface-primary-default);
  --dk-surface-success-hover: var(--dk-surface-primary-hover);
  --dk-surface-success-focus: var(--dk-surface-primary-focus);
  --dk-surface-success-subtle: var(--dk-surface-primary-subtle);
  --dk-surface-success-subtle-hover: var(--dk-surface-primary-subtle-hover);
  --dk-surface-success-subtle-focus: var(--dk-surface-primary-subtle-focus);
  --dk-border-success-default: var(--dk-border-primary-default);
  --dk-border-success-hover: var(--dk-border-primary-hover);
  --dk-border-success-focus: var(--dk-border-primary-focus);
  --dk-border-success-subtle: var(--dk-border-primary-subtle);
  --dk-border-success-subtle-hover: var(--dk-border-primary-subtle-hover);
  --dk-border-success-subtle-focus: var(--dk-border-primary-subtle-focus);
  --dk-border-success-hairline: var(--dk-border-primary-hairline);
  --dk-border-success-elevation: var(--dk-border-primary-elevation);
  --dk-border-success-elevation-hover: var(--dk-border-primary-elevation-hover);
  --dk-border-success-elevation-focus: var(--dk-border-primary-elevation-focus);
  --dk-text-success-default: var(--dk-text-primary-default);
  --dk-text-success-hover: var(--dk-text-primary-hover);
  /* -active added 2026-08-18 with the button per-state text work. It MUST go
     through this remap like its siblings: referencing --dk-color-success-700
     direct (as it first did) resolved to core's true green #2e9856 and put
     green text on a jade fill — 1.58:1 on a pressed outline-success button. */
  --dk-text-success-active: var(--dk-text-primary-active);
  --dk-icon-success-active: var(--dk-icon-primary-active);
  /* -on-subtle added 2026-09-13 with Alert's title/body colour: same reason
     as -active just above, green text would land on Alert's jade tint. */
  --dk-text-success-on-subtle: var(--dk-text-primary-on-subtle);
  --dk-text-success-focus: var(--dk-text-primary-focus);
  --dk-text-success-subtle: var(--dk-text-primary-subtle);
  --dk-text-success-subtle-hover: var(--dk-text-primary-subtle-hover);
  --dk-text-success-subtle-focus: var(--dk-text-primary-subtle-focus);
  --dk-text-success-on-color: var(--dk-text-primary-on-color);
  --dk-text-success-on-color-hover: var(--dk-text-primary-on-color-hover);
  --dk-text-success-on-color-focus: var(--dk-text-primary-on-color-focus);
  --dk-text-success-body: var(--dk-text-primary-default);
  --dk-icon-success-default: var(--dk-icon-primary-default);
  --dk-icon-success-hover: var(--dk-icon-primary-hover);
  --dk-icon-success-focus: var(--dk-icon-primary-focus);
  --dk-icon-success-subtle: var(--dk-icon-primary-subtle);
  --dk-icon-success-subtle-hover: var(--dk-icon-primary-subtle-hover);
  --dk-icon-success-subtle-focus: var(--dk-icon-primary-subtle-focus);
  --dk-icon-success-on-color: var(--dk-icon-primary-on-color);
  --dk-icon-success-on-color-hover: var(--dk-icon-primary-on-color-hover);
  --dk-icon-success-on-color-focus: var(--dk-icon-primary-on-color-focus);
}

/* ════════════════════════════════════════ drift-kit:layer tokens/mapped/shadow.css ════════════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · mapped/shadow ═══ */
:root,
[data-theme="light"] {
	--dk-shadow-drop-2xl: color-mix(in srgb, var(--dk-color-base-black) 18%, transparent); /* Black with ~18% opacity */
	--dk-shadow-drop-3xl: color-mix(in srgb, var(--dk-color-base-black) 14%, transparent); /* Black with ~14% opacity */
	--dk-shadow-drop-lg-1: color-mix(in srgb, var(--dk-color-base-black) 8%, transparent); /* Black with ~8% opacity */
	--dk-shadow-drop-lg-2: color-mix(in srgb, var(--dk-color-base-black) 3%, transparent); /* Black with ~3% opacity */
	--dk-shadow-drop-md-1: color-mix(in srgb, var(--dk-color-base-black) 10%, transparent); /* Black with ~10% opacity */
	--dk-shadow-drop-md-2: color-mix(in srgb, var(--dk-color-base-black) 6%, transparent); /* Black with ~6% opacity */
	--dk-shadow-drop-sm-1: color-mix(in srgb, var(--dk-color-base-black) 10%, transparent); /* Black with ~10% opacity */
	--dk-shadow-drop-sm-2: color-mix(in srgb, var(--dk-color-base-black) 6%, transparent); /* Black with ~6% opacity */
	--dk-shadow-drop-xl-1: color-mix(in srgb, var(--dk-color-base-black) 8%, transparent); /* Black with ~8% opacity */
	--dk-shadow-drop-xl-2: color-mix(in srgb, var(--dk-color-base-black) 3%, transparent); /* Black with ~3% opacity */
	--dk-shadow-drop-xs: color-mix(in srgb, var(--dk-color-base-black) 5%, transparent); /* Black with ~5% opacity */
	--dk-shadow-inner-lg: color-mix(in srgb, var(--dk-color-base-black) 10%, transparent); /* Black with ~10% opacity */
	--dk-shadow-inner-md: color-mix(in srgb, var(--dk-color-base-black) 10%, transparent); /* Black with ~10% opacity */
	--dk-shadow-inner-sm: color-mix(in srgb, var(--dk-color-base-black) 10%, transparent); /* Black with ~10% opacity */
}

[data-theme="dark"] {
	--dk-shadow-drop-2xl: color-mix(in srgb, var(--dk-color-base-black) 36%, transparent); /* Black with ~36% opacity */
	--dk-shadow-drop-3xl: color-mix(in srgb, var(--dk-color-base-black) 28%, transparent); /* Black with ~28% opacity */
	--dk-shadow-drop-lg-1: color-mix(in srgb, var(--dk-color-base-black) 16%, transparent); /* Black with ~16% opacity */
	--dk-shadow-drop-lg-2: color-mix(in srgb, var(--dk-color-base-black) 6%, transparent); /* Black with ~6% opacity */
	--dk-shadow-drop-md-1: color-mix(in srgb, var(--dk-color-base-black) 20%, transparent); /* Black with ~20% opacity */
	--dk-shadow-drop-md-2: color-mix(in srgb, var(--dk-color-base-black) 12%, transparent); /* Black with ~12% opacity */
	--dk-shadow-drop-sm-1: color-mix(in srgb, var(--dk-color-base-black) 20%, transparent); /* Black with ~20% opacity */
	--dk-shadow-drop-sm-2: color-mix(in srgb, var(--dk-color-base-black) 12%, transparent); /* Black with ~12% opacity */
	--dk-shadow-drop-xl-1: color-mix(in srgb, var(--dk-color-base-black) 16%, transparent); /* Black with ~16% opacity */
	--dk-shadow-drop-xl-2: color-mix(in srgb, var(--dk-color-base-black) 6%, transparent); /* Black with ~6% opacity */
	--dk-shadow-drop-xs: color-mix(in srgb, var(--dk-color-base-black) 10%, transparent); /* Black with ~10% opacity */
	--dk-shadow-inner-lg: color-mix(in srgb, var(--dk-color-base-black) 60%, transparent); /* Black with 60% opacity */
	--dk-shadow-inner-md: color-mix(in srgb, var(--dk-color-base-black) 60%, transparent); /* Black with 60% opacity */
	--dk-shadow-inner-sm: color-mix(in srgb, var(--dk-color-base-black) 60%, transparent); /* Black with 60% opacity */
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */

/* ───────────────────────────────────────────────────────────
   COLLECTION: Mapped
   GROUP: Shadow  (rebuilt 7.0.0)

   ONE ramp, named for the JOB rather than the look, because a token called
   "card" was already doing the work for toasts, menus and a search field.
   Five rungs, and every one is in use across the kit and Forge:

     raised    a thing resting on the page          card, tab
     lifted    the same thing picked up             card hover, search field
     floating  a layer above the page               toast, menu, dropdown
     overlay   a layer above everything             modal, tooltip
     on-color  any of the above on a coloured fill

   What this replaced: nineteen tokens of which thirteen had never been used
   anywhere. The upstream drop-* and inner-* families are COLOURS, not shadows
   (color-mix with no offset or blur), so they cannot be used without writing
   the geometry yourself, and only one thing in the kit ever did. They still
   exist above the fence because upstream owns that block and a refresh would
   put them back; they are simply no longer part of this system, and the
   Shadows page no longer presents them as if they were.

   DARK IS NOT LIGHT WITH MORE ALPHA. Black falling on a dark surface has
   almost no range, which is why the old dark values read as nothing at all.
   Two things fix it: roughly double the alpha again, and on the two rungs that
   are genuinely floating, a hairline of light along the top edge, which is how
   a raised surface catches light in a dark room. The lower rungs skip the
   hairline: a tab or a resting card is not floating, and a bright line across
   its top edge reads as a seam rather than elevation.

   All rungs share a 4px Y-offset for one consistent light direction; they
   differ in blur, spread and opacity.
   ─────────────────────────────────────────────────────────── */

/* --dk-shadow-raised
   A panel or card at rest on the page. The quietest rung: it should read as
   "sitting on" rather than "floating above".
     Light → 0 4px 8px 0 rgba(0, 0, 0, 0.04)
     Dark  → same geometry at 0.36, where 0.16 was invisible */
[data-theme="light"] {
  --dk-shadow-raised: 0 4px 8px 0 rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] {
  --dk-shadow-raised: 0 4px 8px 0 rgba(0, 0, 0, 0.36);
}

/* --dk-shadow-lifted
   The same element picked up: a card on hover, a search field at rest. One
   step of blur and opacity above raised, not a different kind of shadow.
     Light → 0 4px 10px 0 rgba(0, 0, 0, 0.08)
     Dark  → 0 4px 12px 0 rgba(0, 0, 0, 0.44) */
[data-theme="light"] {
  --dk-shadow-lifted: 0 4px 10px 0 rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] {
  --dk-shadow-lifted: 0 4px 12px 0 rgba(0, 0, 0, 0.44);
}

/* --dk-shadow-floating
   A layer that has left the page: a toast, a dropdown menu, a select's list.
   First rung with the dark hairline, because this one is genuinely above the
   surface rather than resting on it.
     Light → 0 4px 20px 0 rgba(0, 0, 0, 0.08)
     Dark  → 0 6px 24px 0 rgba(0, 0, 0, 0.48) + a 6% top edge */
[data-theme="light"] {
  --dk-shadow-floating: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] {
  --dk-shadow-floating: inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 6px 24px 0 rgba(0, 0, 0, 0.48);
}

/* --dk-shadow-overlay
   The top of the stack: a modal, a tooltip. Two dark layers, a tight one for
   the contact edge and a wide one for the cast, so it separates from whatever
   it covers. The modal used to hardcode 0 4px 8px -2px rgba(0,0,0,.1) and did
   not theme at all, which left the most elevated thing in the system with a
   lighter shadow than a card on hover.
     Light → 0 2px 6px 0 rgba(0, 0, 0, 0.10), 0 12px 32px 0 rgba(0, 0, 0, 0.22)
     Dark  → 0 2px 6px 0 rgba(0, 0, 0, 0.40), 0 16px 40px 0 rgba(0, 0, 0, 0.64) + an 8% top edge */
[data-theme="light"] {
  --dk-shadow-overlay: 0 2px 6px 0 rgba(0, 0, 0, 0.10), 0 12px 32px 0 rgba(0, 0, 0, 0.22);
}
[data-theme="dark"] {
  --dk-shadow-overlay: inset 0 1px 0 0 rgba(255, 255, 255, 0.08), 0 2px 6px 0 rgba(0, 0, 0, 0.40), 0 16px 40px 0 rgba(0, 0, 0, 0.64);
}
/* --dk-shadow-panel  (17 Oct 2026)
   A big surface standing against another: a sign-in box beside its brand
   panel, a sheet over a page, one half of a split layout. Not a rung on the
   elevation ramp but a different job: the edge it shadows is a long side, not
   the foot, so it has NO offset. A light direction would hide it on whichever
   side the neighbour happens to be; centred, it falls the same way on the
   left of a box, over the top of a stacked one, or round all four sides. A
   centred shadow loses half itself under the element, so the wide layer is
   SPREAD past the edge to reach out as far as an offset one would, with a
   close contact layer so the edge itself reads.
   THE ONE RUNG THAT IS LIGHTER IN DARK. Its neighbour is often dark in both
   themes (the brand panel beside a sign-in is near black either way), and
   black on near black needs the alpha light uses to show at all; on a dark
   page the same alpha read as a hole. Tuned on the sign-in stage, measured
   as how far the panel darkens beside the box: light 15 levels at the edge,
   10 at 24px, 8 at 48px; dark 8 at the edge, 4 at 24px.
     Light → 0 0 24px 4px rgba(0, 0, 0, 0.20), 0 0 120px 32px rgba(0, 0, 0, 0.45)
     Dark  → 0 0 16px 0 rgba(0, 0, 0, 0.20), 0 0 96px 8px rgba(0, 0, 0, 0.30) */
[data-theme="light"] {
  --dk-shadow-panel: 0 0 24px 4px rgba(0, 0, 0, 0.20), 0 0 120px 32px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] {
  --dk-shadow-panel: 0 0 16px 0 rgba(0, 0, 0, 0.20), 0 0 96px 8px rgba(0, 0, 0, 0.30);
}

/* --dk-shadow-card / --dk-shadow-card-hover
   A choosable card at rest and under the pointer (Choice card). Light is the
   design's own pair, the Figma drop-md and drop-lg layers. Dark cannot get
   there by opacity: a black shadow on a near-black page has almost no room to
   darken, and measured at 64% the -2px spread still hid it under the card. So
   dark casts wider, with no negative spread, and adds the lit top edge
   floating uses, which is what separates a surface in dark.
     Light → 0 4px 8px -2px md-1, 0 2px 4px -2px md-2 / hover: lg-1, lg-2
     Dark  → edge 6%, 0 2px 4px 0 .56, 0 8px 20px 0 .64 / hover: edge 8%, 0 4px 8px 0 .6, 0 16px 32px 0 .72 */
[data-theme="light"] {
  --dk-shadow-card: 0 4px 8px -2px var(--dk-shadow-drop-md-1), 0 2px 4px -2px var(--dk-shadow-drop-md-2);
  --dk-shadow-card-hover: 0 12px 16px -4px var(--dk-shadow-drop-lg-1), 0 4px 6px -2px var(--dk-shadow-drop-lg-2);
}
[data-theme="dark"] {
  --dk-shadow-card: inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 2px 4px 0 rgba(0, 0, 0, 0.56), 0 8px 20px 0 rgba(0, 0, 0, 0.64);
  --dk-shadow-card-hover: inset 0 1px 0 0 rgba(255, 255, 255, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 16px 32px 0 rgba(0, 0, 0, 0.72);
}

/* --dk-shadow-on-color
   For an element sitting on a coloured fill (primary, success, information and
   the rest). IDENTICAL in both themes on purpose: those fills are mid-range
   and barely shift between themes, so the shadow that works on one works on
   the other. It is the one rung that does not get deeper in dark.
     Light → 0 4px 20px 0 rgba(0, 0, 0, 0.16)
     Dark  → 0 4px 20px 0 rgba(0, 0, 0, 0.16) */
[data-theme="light"] {
  --dk-shadow-on-color: 0 4px 20px 0 rgba(0, 0, 0, 0.16);
}
[data-theme="dark"] {
  --dk-shadow-on-color: 0 4px 20px 0 rgba(0, 0, 0, 0.16);
}

/* --dk-shadow-focus-ring
   Not elevation, but it is a box-shadow and it was written out raw in four
   components (card, checkbox, switch, select), so it is a token now. Button
   keeps its own, since its ring width and colour are already component tokens
   that vary by variant.
     Both themes → 0 0 0 4px var(--dk-color-primary-300) */
[data-theme="light"] {
  --dk-shadow-focus-ring: 0 0 0 4px var(--dk-color-primary-300);
}
[data-theme="dark"] {
  --dk-shadow-focus-ring: 0 0 0 4px var(--dk-color-primary-300);
}


/* --text-primary-* / --icon-primary-*  (DARK ramp lift + ACTIVE tokens)
   Primary text AND icons on dark backgrounds. Core Drift's dark ramp
   (default 500 → hover 400 → focus 300) reads a touch dim on the deep dark
   canvas, so we lift the whole ramp one step lighter for legibility — keeping
   text and icons in lockstep (they share the same core ramp). We also add the
   missing --dk-text-primary-active / --dk-icon-primary-active tokens (core Drift has
   no 'active' primary state); each is pinned to that theme's focus value. Light
   mode keeps the core ramp and just gains the two active tokens.
     Light : default 500 → hover 600 → focus 700 ; active = 700
     Dark  : default 400 → hover 300 → focus 200 ; active = 200  (lifted) */
[data-theme="light"] {
  --dk-text-primary-active: var(--dk-color-primary-700);
  --dk-icon-primary-active: var(--dk-color-primary-700);
}
[data-theme="dark"] {
  --dk-text-primary-default: var(--dk-color-primary-400);
  --dk-text-primary-hover: var(--dk-color-primary-300);
  --dk-text-primary-focus: var(--dk-color-primary-200);
  --dk-text-primary-active: var(--dk-color-primary-200);
  --dk-icon-primary-default: var(--dk-color-primary-400);
  --dk-icon-primary-hover: var(--dk-color-primary-300);
  --dk-icon-primary-focus: var(--dk-color-primary-200);
  --dk-icon-primary-active: var(--dk-color-primary-200);
}


/* --dk-surface-primary-disabled-* / --dk-border-primary-disabled-*  (NEW hover/active)
   Core Drift has primary-disabled REST values (surface L200/D800, border L300/D700)
   but no hover/active steps. The out-of-scope page eyebrow needs them (an OOS page
   is still interactive — you can drill it). We anchor on the disabled rest value
   and step in the same direction as the surface-primary ramp — darken in light,
   lighten in dark — one primitive step per state.
     surface  Light: 200 → 300 → 400 ; Dark: 800 → 700 → 600
     border   Light: 300 → 400 → 500 ; Dark: 700 → 600 → 500 */
[data-theme="light"] {
  --dk-surface-primary-disabled-hover: var(--dk-color-primary-300);
  --dk-surface-primary-disabled-active: var(--dk-color-primary-400);
  --dk-border-primary-disabled-hover: var(--dk-color-primary-400);
  --dk-border-primary-disabled-active: var(--dk-color-primary-500);
}
[data-theme="dark"] {
  --dk-surface-primary-disabled-hover: var(--dk-color-primary-700);
  --dk-surface-primary-disabled-active: var(--dk-color-primary-600);
  --dk-border-primary-disabled-hover: var(--dk-color-primary-600);
  --dk-border-primary-disabled-active: var(--dk-color-primary-500);
}


/* --dk-text-primary-disabled-on-color / --dk-icon-primary-disabled-on-color  (NEW)
   Foreground (text + icon) placed ON the --dk-surface-primary-disabled fill — i.e.
   the out-of-scope page eyebrow. The non-disabled on-color foreground is plain
   white (--dk-color-base-white); this muted variant keeps it legible on the pale
   (light) / deep (dark) disabled-teal surface. Named with the established
   -on-color suffix (cf. --dk-shadow-card-on-color).
     Light → color-primary-50
     Dark  → color-primary-600 */
[data-theme="light"] {
  --dk-text-primary-disabled-on-color: var(--dk-color-primary-50);
  --dk-icon-primary-disabled-on-color: var(--dk-color-primary-50);
}
[data-theme="dark"] {
  --dk-text-primary-disabled-on-color: var(--dk-color-primary-600);
  --dk-icon-primary-disabled-on-color: var(--dk-color-primary-600);
}

/* --text/icon-primary-disabled-on-color -hover / -active
   Interaction steps for the on-color disabled foreground (the OOS page eyebrow).
   Each step brightens the foreground by ONE tone of the primary ramp relative to
   its rest value, tracking the surface as it lightens on hover/press — never
   jumping straight to white. LIGHT rests at the pale end (50) and steps DOWN the
   ramp (50 → 100 → 200); DARK rests mid-ramp (600) and steps UP toward lighter
   tones (600 → 500 → 400).
     Light : rest 50  ; hover → primary-100 ; active → primary-200
     Dark  : rest 600 ; hover → primary-500 ; active → primary-400 */
[data-theme="light"] {
  --dk-text-primary-disabled-on-color-hover: var(--dk-color-primary-100);
  --dk-text-primary-disabled-on-color-active: var(--dk-color-primary-200);
  --dk-icon-primary-disabled-on-color-hover: var(--dk-color-primary-100);
  --dk-icon-primary-disabled-on-color-active: var(--dk-color-primary-200);
}
[data-theme="dark"] {
  --dk-text-primary-disabled-on-color-hover: var(--dk-color-primary-500);
  --dk-text-primary-disabled-on-color-active: var(--dk-color-primary-400);
  --dk-icon-primary-disabled-on-color-hover: var(--dk-color-primary-500);
  --dk-icon-primary-disabled-on-color-active: var(--dk-color-primary-400);
}


/* --dk-border-primary-subtle-active  (NEW)
   Core Drift's subtle primary border family stops at -hover/-focus with no
   -active step (rest 100 → hover 200 → focus 300 in light; 800 → 700 → 600 in
   dark). Pressed states (e.g. the action node) need an active step; pinned to
   the focus value per theme, matching how our other -active tokens were added. */
[data-theme="light"] {
  --dk-border-primary-subtle-active: var(--dk-color-primary-300);
}
[data-theme="dark"] {
  --dk-border-primary-subtle-active: var(--dk-color-primary-600);
}


/* --text/icon-primary-disabled -hover / -active  (NEW)
   Interaction steps for the disabled-primary foreground (OOS action label/icon,
   OOS section eyebrow icon). One primary tone per step from the rest value
   (light rest is our 200 override; dark rest is core 700), darkening in light /
   lightening in dark — same direction as the disabled surface ramp.
     Light: 200 → 300 → 400      Dark: 700 → 600 → 500 */
[data-theme="light"] {
  --dk-text-primary-disabled-hover: var(--dk-color-primary-300);
  --dk-text-primary-disabled-active: var(--dk-color-primary-400);
  --dk-icon-primary-disabled-hover: var(--dk-color-primary-300);
  --dk-icon-primary-disabled-active: var(--dk-color-primary-400);
}
[data-theme="dark"] {
  --dk-text-primary-disabled-hover: var(--dk-color-primary-600);
  --dk-text-primary-disabled-active: var(--dk-color-primary-500);
  --dk-icon-primary-disabled-hover: var(--dk-color-primary-600);
  --dk-icon-primary-disabled-active: var(--dk-color-primary-500);
}


/* --dk-text-neutral-active  (NEW)
   Core Drift's neutral text family has -hover/-focus but no -active; pressed
   states (section nodes) need one. Pinned to the focus value per theme. */
[data-theme="light"] {
  --dk-text-neutral-active: var(--dk-color-neutral-800);
}
[data-theme="dark"] {
  --dk-text-neutral-active: var(--dk-color-neutral-100);
}


/* --dk-surface-nested-hover / -active  (NEW)
   Interaction steps for the nested item-box surface, one neutral tone per step
   in each family's direction (darken in light, lighten in dark) — same stride
   as the raised surface ramp.
     Light: 25 → 50 → 100        Dark: 900 → 800 → 700 */
[data-theme="light"] {
  --dk-surface-nested-hover: var(--dk-color-neutral-50);
  --dk-surface-nested-active: var(--dk-color-neutral-100);
}
[data-theme="dark"] {
  --dk-surface-nested-hover: var(--dk-color-neutral-800);
  --dk-surface-nested-active: var(--dk-color-neutral-700);
}

/* --dk-surface-inset-default / -hover / -active  (NEW)
   The RECESSED control fill — continues the elevation ladder downward
   (canvas → raised → nested → inset): toggle tracks, and later slider rails /
   progress troughs, that sit ON a raised or nested surface and must read as
   sunk into it. Strong enough to contrast the nested card it sits on; steps
   one neutral tone per state, darkening in light / lightening in dark.
     Light: neutral 100 → 200 → 300     Dark: neutral 700 → 600 → 500 */
[data-theme="light"] {
  --dk-surface-inset-default: var(--dk-color-neutral-100);
  --dk-surface-inset-hover: var(--dk-color-neutral-200);
  --dk-surface-inset-active: var(--dk-color-neutral-300);
}
[data-theme="dark"] {
  --dk-surface-inset-default: var(--dk-color-neutral-700);
  --dk-surface-inset-hover: var(--dk-color-neutral-600);
  --dk-surface-inset-active: var(--dk-color-neutral-500);
}

/* --dk-border-nested-hover / -active  (NEW)
   Companion borders for the nested surface steps — hairline ramp positions 2
   and 3, continuing from nested-default at pos 1 (see the ramp table on
   --dk-border-raised-default). */
[data-theme="light"] {
  --dk-border-nested-hover: var(--dk-color-neutral-200);
  --dk-border-nested-active: var(--dk-color-neutral-300);
}
[data-theme="dark"] {
  --dk-border-nested-hover: var(--dk-color-neutral-600);
  --dk-border-nested-active: var(--dk-color-neutral-500);
}

/* --dk-text-nested-hover / -active  (NEW)
   Text steps inside nested item boxes — one neutral tone per step from the
   nested default (700 light / 200 dark), same stride as the neutral text ramp.
     Light: 700 → 800 → 900      Dark: 200 → 100 → 50 */
[data-theme="light"] {
  --dk-text-nested-hover: var(--dk-color-neutral-800);
  --dk-text-nested-active: var(--dk-color-neutral-900);
}
[data-theme="dark"] {
  --dk-text-nested-hover: var(--dk-color-neutral-100);
  --dk-text-nested-active: var(--dk-color-neutral-50);
}


/* --dk-surface-primary-oos / --dk-border-primary-oos / --dk-text-primary-oos /
   --dk-icon-primary-oos  (NEW)
   The OUT-OF-SCOPE treatment of the focal "you-are-here" node — an active page
   that has been set out of scope. The in-scope focal is a solid primary-500 fill
   with white text; this variant keeps the primary identity but MUTES it, going in
   OPPOSITE directions per theme so it always reads as a dimmed teal against its
   canvas:
     Light: a LIGHTER fill (primary-400) with a light primary-200 text/icon AND
            border (incl. the eyebrow's bottom rule) — close enough to the fill
            that the label reads disabled.
     Dark:  a DARKER fill (primary-700) with text/icon one step lighter
            (primary-600) — equally close to the fill, equally disabled-looking.
   The dashed border in dark steps one tone toward contrast from the fill so the
   rim stays visible (primary-600). */
[data-theme="light"] {
  --dk-surface-primary-oos: var(--dk-color-primary-400);
  --dk-border-primary-oos: var(--dk-color-primary-200);
  --dk-text-primary-oos: var(--dk-color-primary-200);
  --dk-icon-primary-oos: var(--dk-color-primary-200);
}
[data-theme="dark"] {
  --dk-surface-primary-oos: var(--dk-color-primary-700);
  --dk-border-primary-oos: var(--dk-color-primary-600);
  --dk-text-primary-oos: var(--dk-color-primary-600);
  --dk-icon-primary-oos: var(--dk-color-primary-600);
}


/* ══════════════════════════════════════ drift-kit:layer tokens/mapped/gradient.css ══════════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · mapped/gradient ═══ */
:root,
[data-theme="light"] {
	--dk-gradient-default-body-stop-1: var(--dk-primitive-color-foundation-white);
	--dk-gradient-default-body-stop-2: var(--dk-primitive-color-foundation-white-0);
	--dk-gradient-error-top-right-default-stop-1: var(--dk-color-error-100);
	--dk-gradient-error-top-right-default-stop-2: var(--dk-color-error-400);
	--dk-gradient-error-top-right-default-stop-3: var(--dk-color-error-600);
	--dk-gradient-error-top-right-focus-stop-1: var(--dk-color-error-50);
	--dk-gradient-error-top-right-focus-stop-2: var(--dk-color-error-300);
	--dk-gradient-error-top-right-focus-stop-3: var(--dk-color-error-500);
	--dk-gradient-error-top-right-hover-stop-1: var(--dk-color-error-50);
	--dk-gradient-error-top-right-hover-stop-2: var(--dk-color-error-300);
	--dk-gradient-error-top-right-hover-stop-3: var(--dk-color-error-500);
	--dk-gradient-information-top-right-default-stop-1: var(--dk-color-information-100);
	--dk-gradient-information-top-right-default-stop-2: var(--dk-color-information-500);
	--dk-gradient-information-top-right-default-stop-3: var(--dk-color-information-700);
	--dk-gradient-information-top-right-focus-stop-1: var(--dk-color-information-50);
	--dk-gradient-information-top-right-focus-stop-2: var(--dk-color-information-400);
	--dk-gradient-information-top-right-focus-stop-3: var(--dk-color-information-600);
	--dk-gradient-information-top-right-hover-stop-1: var(--dk-color-information-50);
	--dk-gradient-information-top-right-hover-stop-2: var(--dk-color-information-400);
	--dk-gradient-information-top-right-hover-stop-3: var(--dk-color-information-600);
	--dk-gradient-neutral-top-right-default-stop-1: var(--dk-color-neutral-25);
	--dk-gradient-neutral-top-right-default-stop-2: var(--dk-color-neutral-400);
	--dk-gradient-neutral-top-right-default-stop-3: var(--dk-color-neutral-600);
	--dk-gradient-neutral-top-right-focus-stop-1: var(--dk-color-neutral-25);
	--dk-gradient-neutral-top-right-focus-stop-2: var(--dk-color-neutral-300);
	--dk-gradient-neutral-top-right-focus-stop-3: var(--dk-color-neutral-400);
	--dk-gradient-neutral-top-right-hover-stop-1: var(--dk-color-neutral-25);
	--dk-gradient-neutral-top-right-hover-stop-2: var(--dk-color-neutral-300);
	--dk-gradient-neutral-top-right-hover-stop-3: var(--dk-color-neutral-400);
	--dk-gradient-primary-top-right-default-stop-1: var(--dk-color-secondary-300);
	--dk-gradient-primary-top-right-default-stop-2: var(--dk-color-primary-500);
	--dk-gradient-primary-top-right-default-stop-3: var(--dk-color-primary-600);
	--dk-gradient-primary-top-right-focus-stop-1: var(--dk-color-secondary-100);
	--dk-gradient-primary-top-right-focus-stop-2: var(--dk-color-primary-400);
	--dk-gradient-primary-top-right-focus-stop-3: var(--dk-color-primary-600);
	--dk-gradient-primary-top-right-hover-stop-1: var(--dk-color-secondary-100);
	--dk-gradient-primary-top-right-hover-stop-2: var(--dk-color-primary-400);
	--dk-gradient-primary-top-right-hover-stop-3: var(--dk-color-primary-600);
	--dk-gradient-primary-transparent-stop-1: var(--dk-color-primary-500);
	--dk-gradient-primary-transparent-stop-2: var(--dk-color-primary-200);
	--dk-gradient-primary-transparent-stop-3: var(--dk-color-base-white);
	--dk-gradient-success-top-right-default-stop-1: var(--dk-color-success-100);
	--dk-gradient-success-top-right-default-stop-2: var(--dk-color-success-400);
	--dk-gradient-success-top-right-default-stop-3: var(--dk-color-success-600);
	--dk-gradient-success-top-right-focus-stop-1: var(--dk-color-success-50);
	--dk-gradient-success-top-right-focus-stop-2: var(--dk-color-success-300);
	--dk-gradient-success-top-right-focus-stop-3: var(--dk-color-success-500);
	--dk-gradient-success-top-right-hover-stop-1: var(--dk-color-success-50);
	--dk-gradient-success-top-right-hover-stop-2: var(--dk-color-success-300);
	--dk-gradient-success-top-right-hover-stop-3: var(--dk-color-success-500);
	--dk-gradient-warning-top-right-default-stop-1: var(--dk-color-warning-100);
	--dk-gradient-warning-top-right-default-stop-2: var(--dk-color-warning-400);
	--dk-gradient-warning-top-right-default-stop-3: var(--dk-color-warning-500);
	--dk-gradient-warning-top-right-focus-stop-1: var(--dk-color-warning-50);
	--dk-gradient-warning-top-right-focus-stop-2: var(--dk-color-warning-300);
	--dk-gradient-warning-top-right-focus-stop-3: var(--dk-color-warning-400);
	--dk-gradient-warning-top-right-hover-stop-1: var(--dk-color-warning-50);
	--dk-gradient-warning-top-right-hover-stop-2: var(--dk-color-warning-300);
	--dk-gradient-warning-top-right-hover-stop-3: var(--dk-color-warning-400);
}

[data-theme="dark"] {
	--dk-gradient-default-body-stop-1: var(--dk-primitive-color-gray-1000);
	--dk-gradient-default-body-stop-2: var(--dk-primitive-color-gray-1000-0);
	--dk-gradient-error-top-right-default-stop-1: var(--dk-color-error-100);
	--dk-gradient-error-top-right-default-stop-2: var(--dk-color-error-400);
	--dk-gradient-error-top-right-default-stop-3: var(--dk-color-error-600);
	--dk-gradient-error-top-right-focus-stop-1: var(--dk-color-error-50);
	--dk-gradient-error-top-right-focus-stop-2: var(--dk-color-error-300);
	--dk-gradient-error-top-right-focus-stop-3: var(--dk-color-error-500);
	--dk-gradient-error-top-right-hover-stop-1: var(--dk-color-error-50);
	--dk-gradient-error-top-right-hover-stop-2: var(--dk-color-error-300);
	--dk-gradient-error-top-right-hover-stop-3: var(--dk-color-error-500);
	--dk-gradient-information-top-right-default-stop-1: var(--dk-color-information-100);
	--dk-gradient-information-top-right-default-stop-2: var(--dk-color-information-500);
	--dk-gradient-information-top-right-default-stop-3: var(--dk-color-information-700);
	--dk-gradient-information-top-right-focus-stop-1: var(--dk-color-information-50);
	--dk-gradient-information-top-right-focus-stop-2: var(--dk-color-information-400);
	--dk-gradient-information-top-right-focus-stop-3: var(--dk-color-information-600);
	--dk-gradient-information-top-right-hover-stop-1: var(--dk-color-information-50);
	--dk-gradient-information-top-right-hover-stop-2: var(--dk-color-information-400);
	--dk-gradient-information-top-right-hover-stop-3: var(--dk-color-information-600);
	--dk-gradient-neutral-top-right-default-stop-1: var(--dk-color-neutral-25);
	--dk-gradient-neutral-top-right-default-stop-2: var(--dk-color-neutral-400);
	--dk-gradient-neutral-top-right-default-stop-3: var(--dk-color-neutral-600);
	--dk-gradient-neutral-top-right-focus-stop-1: var(--dk-color-neutral-25);
	--dk-gradient-neutral-top-right-focus-stop-2: var(--dk-color-neutral-300);
	--dk-gradient-neutral-top-right-focus-stop-3: var(--dk-color-neutral-400);
	--dk-gradient-neutral-top-right-hover-stop-1: var(--dk-color-neutral-25);
	--dk-gradient-neutral-top-right-hover-stop-2: var(--dk-color-neutral-300);
	--dk-gradient-neutral-top-right-hover-stop-3: var(--dk-color-neutral-400);
	--dk-gradient-primary-top-right-default-stop-1: var(--dk-color-secondary-300);
	--dk-gradient-primary-top-right-default-stop-2: var(--dk-color-primary-500);
	--dk-gradient-primary-top-right-default-stop-3: var(--dk-color-primary-600);
	--dk-gradient-primary-top-right-focus-stop-1: var(--dk-color-secondary-100);
	--dk-gradient-primary-top-right-focus-stop-2: var(--dk-color-primary-400);
	--dk-gradient-primary-top-right-focus-stop-3: var(--dk-color-primary-600);
	--dk-gradient-primary-top-right-hover-stop-1: var(--dk-color-secondary-100);
	--dk-gradient-primary-top-right-hover-stop-2: var(--dk-color-primary-400);
	--dk-gradient-primary-top-right-hover-stop-3: var(--dk-color-primary-600);
	--dk-gradient-primary-transparent-stop-1: var(--dk-color-primary-500);
	--dk-gradient-primary-transparent-stop-2: var(--dk-color-primary-800);
	--dk-gradient-primary-transparent-stop-3: var(--dk-primitive-color-gray-1000-0);
	--dk-gradient-success-top-right-default-stop-1: var(--dk-color-success-100);
	--dk-gradient-success-top-right-default-stop-2: var(--dk-color-success-400);
	--dk-gradient-success-top-right-default-stop-3: var(--dk-color-success-600);
	--dk-gradient-success-top-right-focus-stop-1: var(--dk-color-success-50);
	--dk-gradient-success-top-right-focus-stop-2: var(--dk-color-success-300);
	--dk-gradient-success-top-right-focus-stop-3: var(--dk-color-success-500);
	--dk-gradient-success-top-right-hover-stop-1: var(--dk-color-success-50);
	--dk-gradient-success-top-right-hover-stop-2: var(--dk-color-success-300);
	--dk-gradient-success-top-right-hover-stop-3: var(--dk-color-success-500);
	--dk-gradient-warning-top-right-default-stop-1: var(--dk-color-warning-100);
	--dk-gradient-warning-top-right-default-stop-2: var(--dk-color-warning-400);
	--dk-gradient-warning-top-right-default-stop-3: var(--dk-color-warning-500);
	--dk-gradient-warning-top-right-focus-stop-1: var(--dk-color-warning-50);
	--dk-gradient-warning-top-right-focus-stop-2: var(--dk-color-warning-300);
	--dk-gradient-warning-top-right-focus-stop-3: var(--dk-color-warning-400);
	--dk-gradient-warning-top-right-hover-stop-1: var(--dk-color-warning-50);
	--dk-gradient-warning-top-right-hover-stop-2: var(--dk-color-warning-300);
	--dk-gradient-warning-top-right-hover-stop-3: var(--dk-color-warning-400);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ── Composed gradients (14 Oct) ─────────────────────────────────────────────
   The stops above, made into gradients ready to use, so nobody assembles an
   angle and three stops by hand again.

     --dk-surface-gradient-{status}          vivid: an accent fill, a hero band
     --dk-surface-gradient-{status}-hover    its hover, the hover stops
     --dk-surface-gradient-{status}-subtle   a wash: a small soft tint at the top
                                             right, fading into the surface it sits on
     --dk-border-gradient-{status}           an edge, for [data-gradient-border]:
                                             the hover-light stop to the deep one,
                                             one hue (not the accent's gold)
     --dk-gradient-progress(-rtl)            a progress fill, soft to strong

   RE-DECLARED ON EVERY THEME, LEVEL AND TONE SCOPE, not once at the root: a
   custom property resolves its var()s where it is declared, so a subtle wash
   declared only on the root would fade into level 0 on a level-2 card. One
   angle for all of them: change it and every gradient turns together. */
:root {
  --dk-gradient-angle: 120deg;
  /* An edge runs diagonally, light at the top right to deep at the bottom
     left (Julio, 14 Oct). Per element, set --dk-gradient-border-angle on a
     [data-gradient-border]; for every edge, this. */
  --dk-border-gradient-angle: 225deg;
  /* A wash is a small soft tint at the top right (Julio, 14 Oct): it starts
     there, is gone within this much of the element, and is this much of the
     status tint mixed into the surface. Set any of them on a
     [data-gradient-wash] to change that one. */
  --dk-gradient-wash-angle: 225deg;
  --dk-gradient-wash-reach: 45%;
  --dk-gradient-wash-strength: 70%;
  /* Moving edges ([data-gradient-border-motion], kit/gradient.css): a loop's
     own cycle, not a transition. */
  --dk-gradient-border-spin-duration: 3s;
  --dk-gradient-border-pulse-duration: 1.6s;
  /* [data-gradient-shimmer]: a loop's cycle, and how wide the band is */
  --dk-gradient-shimmer-duration: 2.8s;
  --dk-gradient-shimmer-width: 55%;
  /* the band is the element's own colour this much lighter, in OKLCH
     lightness (hue and chroma kept), never quite white */
  --dk-gradient-shimmer-lift: 0.2;
  /* how far the pulse's glow reaches, and how much it swells the edge */
  --dk-gradient-border-glow-size: var(--dk-primitive-scale-4);
  --dk-gradient-border-glow-spread: var(--dk-primitive-scale-0-5);
}
/* Dark's subtle status tints are deep and saturated (an error wash read as a
   red glow), so a dark wash takes half as much of one. */
[data-theme="dark"] {
  --dk-gradient-wash-strength: 35%;
  /* and a dark shimmer lifts gently, or it glares */
  --dk-gradient-shimmer-lift: 0.08;
}
/* An edge's two stops, per status and per theme. The status's hover-light
   stop to its deep one, except primary, whose light end is 200 (Julio,
   14 Oct): more distance between the ends, a sweep you can see. */
[data-theme="light"] {
  --dk-border-gradient-primary-light: var(--dk-color-primary-200);
  --dk-border-gradient-primary-deep: var(--dk-gradient-primary-top-right-default-stop-3);
  /* the mid primary the ai spin and the pulses mix in light mode (Julio,
     14 Oct): 500, not the deep 600. Dark keeps its deep stop. */
  --dk-border-gradient-primary-mid: var(--dk-gradient-primary-top-right-default-stop-2);
  --dk-border-gradient-neutral-light: var(--dk-gradient-neutral-top-right-hover-stop-2);
  --dk-border-gradient-neutral-deep: var(--dk-gradient-neutral-top-right-default-stop-3);
  --dk-border-gradient-success-light: var(--dk-gradient-success-top-right-hover-stop-2);
  --dk-border-gradient-success-deep: var(--dk-gradient-success-top-right-default-stop-3);
  --dk-border-gradient-warning-light: var(--dk-gradient-warning-top-right-hover-stop-2);
  --dk-border-gradient-warning-deep: var(--dk-gradient-warning-top-right-default-stop-3);
  --dk-border-gradient-error-light: var(--dk-gradient-error-top-right-hover-stop-2);
  --dk-border-gradient-error-deep: var(--dk-gradient-error-top-right-default-stop-3);
  --dk-border-gradient-information-light: var(--dk-gradient-information-top-right-hover-stop-2);
  --dk-border-gradient-information-deep: var(--dk-gradient-information-top-right-default-stop-3);
  /* ai: Karmo's gold (secondary 300, the accent Button's highlight) into primary,
     for AI features. A blue neighbour sat on information's hue. */
  --dk-border-gradient-ai-light: var(--dk-gradient-primary-top-right-default-stop-1);
  --dk-border-gradient-ai-deep: var(--dk-gradient-primary-top-right-default-stop-3);
}
[data-theme="dark"] {
  --dk-border-gradient-primary-light: var(--dk-color-primary-200);
  --dk-border-gradient-primary-deep: var(--dk-gradient-primary-top-right-default-stop-3);
  --dk-border-gradient-primary-mid: var(--dk-gradient-primary-top-right-default-stop-3);
  --dk-border-gradient-neutral-light: var(--dk-gradient-neutral-top-right-hover-stop-2);
  --dk-border-gradient-neutral-deep: var(--dk-gradient-neutral-top-right-default-stop-3);
  --dk-border-gradient-success-light: var(--dk-gradient-success-top-right-hover-stop-2);
  --dk-border-gradient-success-deep: var(--dk-gradient-success-top-right-default-stop-3);
  --dk-border-gradient-warning-light: var(--dk-gradient-warning-top-right-hover-stop-2);
  --dk-border-gradient-warning-deep: var(--dk-gradient-warning-top-right-default-stop-3);
  --dk-border-gradient-error-light: var(--dk-gradient-error-top-right-hover-stop-2);
  --dk-border-gradient-error-deep: var(--dk-gradient-error-top-right-default-stop-3);
  --dk-border-gradient-information-light: var(--dk-gradient-information-top-right-hover-stop-2);
  --dk-border-gradient-information-deep: var(--dk-gradient-information-top-right-default-stop-3);
  /* ai: Karmo's gold (secondary 300, the accent Button's highlight) into primary,
     for AI features. A blue neighbour sat on information's hue. */
  --dk-border-gradient-ai-light: var(--dk-gradient-primary-top-right-default-stop-1);
  --dk-border-gradient-ai-deep: var(--dk-gradient-primary-top-right-default-stop-3);
}
:is([data-theme], [data-surface], [data-tone], :where([data-interactive-fill="raised"]) > *) {
  --dk-surface-gradient-primary: linear-gradient(var(--dk-gradient-angle), var(--dk-gradient-primary-top-right-default-stop-2), var(--dk-gradient-primary-top-right-default-stop-3));
  --dk-surface-gradient-primary-hover: linear-gradient(var(--dk-gradient-angle), var(--dk-gradient-primary-top-right-hover-stop-2), var(--dk-gradient-primary-top-right-hover-stop-3));
  --dk-surface-gradient-primary-subtle: linear-gradient(var(--dk-gradient-wash-angle), color-mix(in srgb, var(--dk-surface-primary-subtle) var(--dk-gradient-wash-strength), var(--dk-surface-current)), var(--dk-surface-current) var(--dk-gradient-wash-reach));
  --dk-border-gradient-primary: linear-gradient(var(--dk-border-gradient-angle), var(--dk-border-gradient-primary-light), var(--dk-border-gradient-primary-deep));
  --dk-surface-gradient-neutral: linear-gradient(var(--dk-gradient-angle), var(--dk-gradient-neutral-top-right-default-stop-2), var(--dk-gradient-neutral-top-right-default-stop-3));
  --dk-surface-gradient-neutral-hover: linear-gradient(var(--dk-gradient-angle), var(--dk-gradient-neutral-top-right-hover-stop-2), var(--dk-gradient-neutral-top-right-hover-stop-3));
  --dk-surface-gradient-neutral-subtle: linear-gradient(var(--dk-gradient-wash-angle), color-mix(in srgb, var(--dk-surface-neutral-subtle) var(--dk-gradient-wash-strength), var(--dk-surface-current)), var(--dk-surface-current) var(--dk-gradient-wash-reach));
  --dk-border-gradient-neutral: linear-gradient(var(--dk-border-gradient-angle), var(--dk-border-gradient-neutral-light), var(--dk-border-gradient-neutral-deep));
  --dk-surface-gradient-success: linear-gradient(var(--dk-gradient-angle), var(--dk-gradient-success-top-right-default-stop-2), var(--dk-gradient-success-top-right-default-stop-3));
  --dk-surface-gradient-success-hover: linear-gradient(var(--dk-gradient-angle), var(--dk-gradient-success-top-right-hover-stop-2), var(--dk-gradient-success-top-right-hover-stop-3));
  --dk-surface-gradient-success-subtle: linear-gradient(var(--dk-gradient-wash-angle), color-mix(in srgb, var(--dk-surface-success-subtle) var(--dk-gradient-wash-strength), var(--dk-surface-current)), var(--dk-surface-current) var(--dk-gradient-wash-reach));
  --dk-border-gradient-success: linear-gradient(var(--dk-border-gradient-angle), var(--dk-border-gradient-success-light), var(--dk-border-gradient-success-deep));
  --dk-surface-gradient-warning: linear-gradient(var(--dk-gradient-angle), var(--dk-gradient-warning-top-right-default-stop-2), var(--dk-gradient-warning-top-right-default-stop-3));
  --dk-surface-gradient-warning-hover: linear-gradient(var(--dk-gradient-angle), var(--dk-gradient-warning-top-right-hover-stop-2), var(--dk-gradient-warning-top-right-hover-stop-3));
  --dk-surface-gradient-warning-subtle: linear-gradient(var(--dk-gradient-wash-angle), color-mix(in srgb, var(--dk-surface-warning-subtle) var(--dk-gradient-wash-strength), var(--dk-surface-current)), var(--dk-surface-current) var(--dk-gradient-wash-reach));
  --dk-border-gradient-warning: linear-gradient(var(--dk-border-gradient-angle), var(--dk-border-gradient-warning-light), var(--dk-border-gradient-warning-deep));
  --dk-surface-gradient-error: linear-gradient(var(--dk-gradient-angle), var(--dk-gradient-error-top-right-default-stop-2), var(--dk-gradient-error-top-right-default-stop-3));
  --dk-surface-gradient-error-hover: linear-gradient(var(--dk-gradient-angle), var(--dk-gradient-error-top-right-hover-stop-2), var(--dk-gradient-error-top-right-hover-stop-3));
  --dk-surface-gradient-error-subtle: linear-gradient(var(--dk-gradient-wash-angle), color-mix(in srgb, var(--dk-surface-error-subtle) var(--dk-gradient-wash-strength), var(--dk-surface-current)), var(--dk-surface-current) var(--dk-gradient-wash-reach));
  --dk-border-gradient-error: linear-gradient(var(--dk-border-gradient-angle), var(--dk-border-gradient-error-light), var(--dk-border-gradient-error-deep));
  --dk-surface-gradient-information: linear-gradient(var(--dk-gradient-angle), var(--dk-gradient-information-top-right-default-stop-2), var(--dk-gradient-information-top-right-default-stop-3));
  --dk-surface-gradient-information-hover: linear-gradient(var(--dk-gradient-angle), var(--dk-gradient-information-top-right-hover-stop-2), var(--dk-gradient-information-top-right-hover-stop-3));
  --dk-surface-gradient-information-subtle: linear-gradient(var(--dk-gradient-wash-angle), color-mix(in srgb, var(--dk-surface-information-subtle) var(--dk-gradient-wash-strength), var(--dk-surface-current)), var(--dk-surface-current) var(--dk-gradient-wash-reach));
  --dk-border-gradient-information: linear-gradient(var(--dk-border-gradient-angle), var(--dk-border-gradient-information-light), var(--dk-border-gradient-information-deep));
  --dk-border-gradient-ai: linear-gradient(var(--dk-border-gradient-angle), var(--dk-border-gradient-ai-light), var(--dk-border-gradient-ai-deep));
  --dk-gradient-progress: linear-gradient(to right, var(--dk-border-progress-start), var(--dk-border-progress));
  --dk-gradient-progress-rtl: linear-gradient(to left, var(--dk-border-progress-start), var(--dk-border-progress));
}

/* ═════════════════════════════════ drift-kit:layer tokens/mapped/border-dashed.css ═════════════════════════════════ */
/* ═══ KARMO · mapped/border-dashed ═══
   The dashed edge (14 Oct 2026): drop areas, empty areas, placeholders. One
   dash, one gap and one width for all of them, the numbers Julio tuned on the
   docs placeholder: 10 on, 8 off, 2px. kit/dashed.css paints it and
   kit/dashed.js draws it; the colour is chosen on the element, so it follows
   the level and tone it sits in. */
:root,
[data-brand],
[data-border-width] {
	--dk-border-dashed-width: var(--dk-border-width-50);
	--dk-border-dashed-dash: var(--dk-primitive-scale-2-5);
	--dk-border-dashed-gap: var(--dk-primitive-scale-2);
}
/* Primary on a dashed edge is a step lighter in light mode (Julio, 14 Oct):
   400 on the page's white reads as an invitation rather than a frame. Dark
   keeps the border primary, already the lighter rung there. */
:root,
[data-theme="light"] {
	--dk-border-dashed-primary: var(--dk-color-primary-400);
}
[data-theme="dark"] {
	--dk-border-dashed-primary: var(--dk-border-primary-default);
}

/* ═══════════════════════════════════ drift-kit:layer tokens/mapped/interactive.css ═══════════════════════════════════ */
/* ═══ KARMO · mapped/interactive ═══
   The interaction foundation (15 Oct 2026): how anything clickable behaves.
   A quiet ramp for things with no resting fill (the nested ramp, stepping
   with the level, words a rung per state); selected (this is the one: solid
   primary); highlighted (these are in the set: a primary tint, words full
   contrast); disabled; one focus ring; four press tiers, chosen by role so
   the edges move about the same few pixels at every size. kit/interactive.css
   reads them as the data-interactive utility; components map onto them.

   COLOUR IS DECLARED ON EVERY THEME, LEVEL AND TONE, so it resolves against
   the surface it sits on. SHAPE AND PRESS ON THE SCOPES THEIR SOURCES LIVE
   ON (radius on brand and data-border-radius, spacing on data-density): a
   token resolves where it is declared. */
:is([data-theme], [data-surface], [data-tone], :where([data-interactive-fill="raised"]) > *) {
	/* A highlighted mark (an Icon tile) steps its own solid toward the theme
	   shade one rung per rung its host moves: by state here, by level below. */
	--dk-interactive-mark-step: 0%;
	--dk-interactive-mark-step-hover: 25%;
	--dk-interactive-mark-step-active: 50%;
	--dk-interactive-surface: transparent;
	/* The quiet ramp is the CONTROL ramp (16 Oct): the nested rungs on a plain
	   surface, and the tone's and the level's next rung on a toned one. The
	   nested fill no tone remaps made every part reading it a tone boundary. */
	--dk-interactive-surface-hover: var(--dk-surface-control-hover);
	--dk-interactive-surface-active: var(--dk-surface-control-active);
	--dk-interactive-text: var(--dk-text-neutral-subtle);
	--dk-interactive-text-hover: var(--dk-text-neutral-subtle-hover);
	--dk-interactive-text-active: var(--dk-text-neutral-subtle-focus);
	/* A card's or a region's content: full contrast in every state. Only rows
	   and controls ramp their words. */
	--dk-interactive-content-text: var(--dk-text-default);
	--dk-interactive-selected-surface: var(--dk-surface-primary-default);
	--dk-interactive-selected-surface-hover: var(--dk-surface-primary-hover);
	--dk-interactive-selected-surface-active: var(--dk-surface-primary-active);
	--dk-interactive-selected-text: var(--dk-text-on-primary-fill);
	--dk-interactive-selected-surface-disabled: var(--dk-surface-disabled-default);
	--dk-interactive-selected-text-disabled: var(--dk-text-disabled-default);
	--dk-interactive-highlight-surface: var(--dk-surface-primary-subtle);
	--dk-interactive-highlight-surface-hover: var(--dk-surface-primary-subtle-hover);
	--dk-interactive-highlight-surface-active: var(--dk-surface-primary-subtle-focus);
	--dk-interactive-highlight-text: var(--dk-text-default);
	--dk-interactive-text-disabled: var(--dk-text-disabled-subtle);
	--dk-interactive-surface-disabled: transparent;
	--dk-interactive-ring: var(--dk-border-primary-focus);
}
/* Light deepens toward black; dark lightens toward white, so a mark stays
   ahead of a host that lightens in dark. Levels start a rung further on. */
[data-theme="light"] { --dk-interactive-mark-shade: var(--dk-color-base-black); --dk-interactive-mark-reach: 1; }
/* Dark reaches 60% as far: toward white the solid washes out under its white
   glyph (Julio keeps the glyph white), and 60% still keeps it ahead of its host. */
[data-theme="dark"] { --dk-interactive-mark-shade: var(--dk-color-base-white); --dk-interactive-mark-reach: 0.6; }
/* A halo under the pointer (Slider's thumb): a tint of the control's fill.
   A dark page swallows a faint tint, so dark takes more than twice as much
   (28 Oct, Julio: the slider's hover read in light and vanished in dark). */
[data-theme="light"] { --dk-interactive-halo-strength: 18%; }
[data-theme="dark"] { --dk-interactive-halo-strength: 40%; }
/* Unset on the page and wherever a tone resets (16 Oct): a part reading the
   tone family falls back to its own plain look. */
[data-theme="light"], [data-theme="dark"] {
	--dk-interactive-tone-mark: initial;
	--dk-interactive-tone-mark-hover: initial;
	--dk-interactive-tone-mark-active: initial;
	--dk-interactive-tone-fill-hover: initial;
	--dk-interactive-tone-fill-active: initial;
	--dk-interactive-tone-text: initial;
	--dk-interactive-tone-text-subtle: initial;
}
[data-theme] [data-surface="1"]:not([data-theme]),
[data-theme][data-surface="1"] {
	--dk-interactive-mark-step: 25%;
	--dk-interactive-mark-step-hover: 50%;
	--dk-interactive-mark-step-active: 62%;
}
[data-theme][data-surface="below"],
[data-theme] [data-surface="below"]:not([data-theme]):where(:not(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *))) {
	--dk-interactive-mark-step: 25%;
	--dk-interactive-mark-step-hover: 50%;
	--dk-interactive-mark-step-active: 62%;
}
[data-theme="light"] .dk-component-brand-sheet__panel[data-theme="dark"]:where(:not([data-theme="light"] [data-theme="dark"] *)) {
	--dk-interactive-mark-step: 25%;
	--dk-interactive-mark-step-hover: 50%;
	--dk-interactive-mark-step-active: 62%;
}
[data-theme="dark"] [data-surface="raised"]:not([data-theme]):where(:not([data-theme="dark"] [data-theme="light"] *)),
[data-theme="light"] [data-tone="inverse"] [data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="dark"][data-surface="raised"] {
	--dk-interactive-mark-step: 25%;
	--dk-interactive-mark-step-hover: 50%;
	--dk-interactive-mark-step-active: 62%;
}
[data-theme] [data-surface="2"]:not([data-theme]),
[data-theme][data-surface="2"] {
	--dk-interactive-mark-step: 50%;
	--dk-interactive-mark-step-hover: 62%;
	--dk-interactive-mark-step-active: 72%;
}
[data-theme] [data-surface="below"]:not([data-theme]):where(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *)) {
	--dk-interactive-mark-step: 50%;
	--dk-interactive-mark-step-hover: 62%;
	--dk-interactive-mark-step-active: 72%;
}

:root, [data-brand], [data-border-radius], [data-density] {
	--dk-interactive-ring-width: var(--dk-primitive-scale-0-5);
	--dk-interactive-press-control: var(--dk-motion-press-scale-control);
	--dk-interactive-press-compact: var(--dk-motion-press-scale-compact);
	--dk-interactive-press-item: var(--dk-motion-press-scale-item);
	--dk-interactive-press-surface: var(--dk-motion-press-scale-surface);
	--dk-interactive-press-panel: var(--dk-motion-press-scale-panel);
	--dk-interactive-grow-surface: var(--dk-motion-grow-scale-surface);
	--dk-interactive-grow-panel: var(--dk-motion-grow-scale-panel);
	--dk-interactive-control-padding-block: var(--dk-primitive-scale-1);
	--dk-interactive-control-padding-inline: var(--dk-primitive-scale-1-5);
	--dk-interactive-control-radius: var(--dk-border-radius-150);
	--dk-interactive-item-padding-block: var(--dk-primitive-scale-2);
	--dk-interactive-item-padding-inline: var(--dk-primitive-scale-2-5);
	--dk-interactive-item-radius: var(--dk-border-radius-150);
	--dk-interactive-surface-padding-block: var(--dk-primitive-scale-4);
	--dk-interactive-surface-padding-inline: var(--dk-primitive-scale-4);
	--dk-interactive-surface-radius: var(--dk-border-radius-200);
	--dk-interactive-panel-padding-block: var(--dk-primitive-scale-5);
	--dk-interactive-panel-padding-inline: var(--dk-primitive-scale-5);
	--dk-interactive-panel-radius: var(--dk-border-radius-300);
	--dk-interactive-target-min: var(--dk-primitive-scale-6);
	--dk-interactive-target-min-touch: var(--dk-primitive-scale-11);
}

/* ══════════════════════════════════════════ drift-kit:layer tokens/mapped/logo.css ══════════════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · mapped/logo ═══ */
:root,
[data-theme="light"] {
	--dk-logo-neutral-default: var(--dk-color-neutral-100);
	--dk-logo-neutral-subtle: var(--dk-color-neutral-300);
	--dk-logo-primary-default: var(--dk-color-primary-500);
	--dk-logo-secondary-default: var(--dk-color-neutral-900);
	--dk-logo-tertiary-default: var(--dk-color-base-white);
}

[data-theme="dark"] {
	--dk-logo-neutral-default: var(--dk-color-neutral-500);
	--dk-logo-neutral-subtle: var(--dk-color-neutral-700);
	--dk-logo-primary-default: var(--dk-color-primary-500);
	--dk-logo-secondary-default: var(--dk-color-base-white);
	--dk-logo-tertiary-default: var(--dk-color-neutral-900);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ═══════════════════════════════════ drift-kit:layer tokens/mapped/placeholder.css ═══════════════════════════════════ */
/* ═══ UPSTREAM · component-library@1a8ad6af · mapped/placeholder ═══ */
:root,
[data-theme="light"] {
	--dk-placeholder-border-default: var(--dk-primitive-color-purple-500);
	--dk-placeholder-border-shadow: var(--dk-primitive-color-purple-500);
	--dk-placeholder-border-subtle: var(--dk-primitive-color-purple-500);
	--dk-placeholder-icon-default: var(--dk-primitive-color-purple-500);
	--dk-placeholder-text-default: var(--dk-primitive-color-purple-500);
}

[data-theme="dark"] {
	--dk-placeholder-border-default: var(--dk-primitive-color-purple-300);
	--dk-placeholder-border-shadow: var(--dk-primitive-color-purple-300);
	--dk-placeholder-border-subtle: var(--dk-primitive-color-purple-300);
	--dk-placeholder-icon-default: var(--dk-primitive-color-purple-300);
	--dk-placeholder-text-default: var(--dk-primitive-color-purple-300);
}
/* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */


/* ════════════════════════════════════ drift-kit:layer tokens/fidelity/fidelity.css ════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────
   COLLECTION: Fidelity   (22 Oct 2026)

   data-fidelity="wireframe" | "midfi" on the page (on <body>, like
   data-brand) draws every component that has a look for it in that look;
   absent is the full Drift look, which nothing here can reach.

   A FAMILY OF ITS OWN, NOT A REMAP. The looks paint with --dk-fidelity-*,
   never by re-pointing --dk-surface-* or --dk-text-*, for two reasons. The
   values have to be exactly the wireframe's, and some of them are not
   colours Drift has: a line in currentColor, a muted text that inherits.
   And a remap would restyle every component that has no look yet, which the
   exempt list promises not to do.

   THE VALUES ARE DISKO'S WIREFRAME SKIN, verbatim (WF_SKIN_TOKENS in
   Disko's p/disko/src/wireframes.js), because Disko's prototype page must
   stay pixel-identical as its blocks move onto Drift; test/fidelity-tokens
   holds the fixture copy. The last thirteen stand in for the values the
   wireframe CSS writes outside its tokens, and each is the colour Disko
   actually PAINTS in that look and theme, not the literal as written: where a
   later rule wins (mid-fi's skin over the shared literal, the wireframe's
   ink-filled solid chip), the token takes the winner. Measured in Chrome
   under Disko's real stylesheet order (scripts/measure-fidelity-paint.mjs,
   test/fixtures/fidelity/disko-painted.json).

   DECLARED ON THE ATTRIBUTE'S ELEMENT ONLY, so they inherit from there.
   Dark is either attribute being the ancestor of the other, or both on one
   element: the shape the text spike verified. A nested data-theme does not
   re-declare them; a wireframe is one theme throughout. Nothing per level
   or tone: wireframes ignore both, and no selector here names data-surface,
   so the build's raised twins and inverse mirror leave the file alone.
   ─────────────────────────────────────────────────────────── */
[data-fidelity="wireframe"] {
  --dk-fidelity-page: #fff;
  --dk-fidelity-surface: #fff;
  --dk-fidelity-tile: transparent;
  --dk-fidelity-line: currentColor;
  --dk-fidelity-line-strong: #cdcdcd;
  --dk-fidelity-ink: #111;
  --dk-fidelity-ink-inverse: #fff;
  --dk-fidelity-muted: inherit;
  --dk-fidelity-scrim: rgba(0,0,0,.55);
  --dk-fidelity-shadow: none;
  --dk-fidelity-scrim-strong: rgba(0,0,0,.75);
  --dk-fidelity-text: #111;
  --dk-fidelity-action: #111;
  --dk-fidelity-action-text: #fff;
  --dk-fidelity-divider-soft: #ebebeb;
  --dk-fidelity-row-hover: rgba(0,0,0,.05);
  --dk-fidelity-row-selected: rgba(0,0,0,.07);
  --dk-fidelity-toast-shadow: 0 4px 20px 0 rgba(0,0,0,0.18);
  --dk-fidelity-menu-shadow: 0 4px 20px 0 rgba(0,0,0,0.08);
  --dk-fidelity-chip-solid-surface: #111;
  --dk-fidelity-chip-solid-border: #111;
  --dk-fidelity-chip-solid-text: #fff;
  --dk-fidelity-image-glyph: none;
}
[data-fidelity="wireframe"]:is([data-theme="dark"]), [data-theme="dark"] [data-fidelity="wireframe"] {
  --dk-fidelity-page: #111;
  --dk-fidelity-surface: #1e2223;
  --dk-fidelity-tile: transparent;
  --dk-fidelity-line: currentColor;
  --dk-fidelity-line-strong: #35484b;
  --dk-fidelity-ink: #fff;
  --dk-fidelity-ink-inverse: #111;
  --dk-fidelity-muted: inherit;
  --dk-fidelity-scrim: rgba(0,0,0,.65);
  --dk-fidelity-shadow: none;
  --dk-fidelity-scrim-strong: rgba(0,0,0,.75);
  --dk-fidelity-text: #fff;
  --dk-fidelity-action: #fff;
  --dk-fidelity-action-text: #111;
  --dk-fidelity-divider-soft: #35484b;
  --dk-fidelity-row-hover: rgba(255,255,255,.08);
  --dk-fidelity-row-selected: rgba(255,255,255,.1);
  --dk-fidelity-toast-shadow: 0 4px 20px 0 rgba(0,0,0,0.18);
  --dk-fidelity-menu-shadow: 0 4px 20px 0 rgba(0,0,0,0.08);
  --dk-fidelity-chip-solid-surface: #fff;
  --dk-fidelity-chip-solid-border: #fff;
  --dk-fidelity-chip-solid-text: #1e2223;
  --dk-fidelity-image-glyph: none;
}
/* Mid-fi's dark hairlines are not the light ones darkened: the eye tells
   bright values apart far better, so dark needs about twice the contrast for
   the same apparent weight (2.43:1 for the line, over 3:1 for the strong
   line that draws edges and focus rings). Judge them on a dark screen. */
[data-fidelity="midfi"] {
  --dk-fidelity-page: #f6f6f7;
  --dk-fidelity-surface: #ffffff;
  --dk-fidelity-tile: #ececef;
  --dk-fidelity-line: #e4e4e8;
  --dk-fidelity-line-strong: #cfcfd6;
  --dk-fidelity-ink: #1c1d21;
  --dk-fidelity-ink-inverse: #ffffff;
  --dk-fidelity-muted: #6b6c74;
  --dk-fidelity-scrim: rgba(18,19,22,.55);
  --dk-fidelity-shadow: 0 1px 2px rgba(20,20,25,.05),0 4px 14px rgba(20,20,25,.05);
  --dk-fidelity-scrim-strong: rgba(18,19,22,.55);
  --dk-fidelity-text: #1c1d21;
  --dk-fidelity-action: #1c1d21;
  --dk-fidelity-action-text: #fff;
  --dk-fidelity-divider-soft: #e4e4e8;
  --dk-fidelity-row-hover: #ececef;
  --dk-fidelity-row-selected: #ececef;
  --dk-fidelity-toast-shadow: 0 1px 2px rgba(20,20,25,.05),0 4px 14px rgba(20,20,25,.05);
  --dk-fidelity-menu-shadow: 0 1px 2px rgba(20,20,25,.05),0 4px 14px rgba(20,20,25,.05);
  --dk-fidelity-chip-solid-surface: #fff;
  --dk-fidelity-chip-solid-border: #e4e4e8;
  --dk-fidelity-chip-solid-text: #1c1d21;
  --dk-fidelity-image-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3C/svg%3E");
}
[data-fidelity="midfi"]:is([data-theme="dark"]), [data-theme="dark"] [data-fidelity="midfi"] {
  --dk-fidelity-page: #141519;
  --dk-fidelity-surface: #1e1f24;
  --dk-fidelity-tile: #2a2b31;
  --dk-fidelity-line: #595b64;
  --dk-fidelity-line-strong: #6d6f78;
  --dk-fidelity-ink: #f1f1f3;
  --dk-fidelity-ink-inverse: #17181c;
  --dk-fidelity-muted: #9d9ea8;
  --dk-fidelity-scrim: rgba(5,5,8,.65);
  --dk-fidelity-shadow: 0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
  --dk-fidelity-scrim-strong: rgba(5,5,8,.65);
  --dk-fidelity-text: #fff;
  --dk-fidelity-action: #fff;
  --dk-fidelity-action-text: #111;
  --dk-fidelity-divider-soft: #35484b;
  --dk-fidelity-row-hover: rgba(255,255,255,.08);
  --dk-fidelity-row-selected: rgba(255,255,255,.1);
  --dk-fidelity-toast-shadow: 0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
  --dk-fidelity-menu-shadow: 0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
  --dk-fidelity-chip-solid-surface: #fff;
  --dk-fidelity-chip-solid-border: #e4e4e8;
  --dk-fidelity-chip-solid-text: #1c1d21;
  --dk-fidelity-image-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3C/svg%3E");
}
/* INTERACTION MOTION IS OFF UNDER FIDELITY (decision 7, Julio, 22 Oct). A
   look reproduces today's wireframe states exactly, so Drift's own hover,
   focus and press motion steps aside: the state and press patterns are zero
   and nothing scales on a press. kit/motion.css re-resolves the state
   pattern on every element from these two, so a component that reads it
   follows. Enter, exit, travel, cascade and page transitions are untouched:
   a look that wants one of them off says so in its own fidelity.css.

   Zero here, where reduced motion keeps a short fade: nothing waits on the
   end of a state or press transition, and a look that wants a transition of
   its own writes it. */
[data-fidelity] {
  --dk-motion-state-enter-duration: 0s;
  --dk-motion-state-exit-duration: 0s;
  --dk-motion-press-duration: 0s;
  --dk-motion-press-scale-control: 1;
  --dk-motion-press-scale-compact: 1;
  --dk-motion-press-scale-surface: 1;
  --dk-motion-press-scale-item: 1;
  --dk-motion-press-scale-panel: 1;
  --dk-motion-grow-scale-surface: 1;
  --dk-motion-grow-scale-panel: 1;
}

/* ═══════════════════════════════════ drift-kit:layer tokens/primitives/opacity.css ═══════════════════════════════════ */
/* ───────────────────────────────────────────────────────────
   COLLECTION: Primitive
   GROUP: Opacity
   ─────────────────────────────────────────────────────────── */

/* --dk-primitive-opacity-glass / --dk-primitive-opacity-hairline-subtle
   Named alpha steps, so a translucent Mapped token can be expressed as
   "some other token, at this opacity" instead of a flattened rgba() literal
   (2026-08-18). Every glass token used to hard-code the ALREADY-KNOWN rgb of
   its opaque counterpart — six of the eight matched it exactly — which meant
   they silently stopped tracking their base: a glass panel inside
   data-surface="2" kept the level-0 tint, and a brand switch left them on
   karmo's greys. Expressed as relative colours they follow theme, brand and
   surface level for free. Unitless numbers, usable in any colour function.
   Retune the frostiness of every glass surface from ONE place here. */
:root {
  --dk-primitive-opacity-glass: 0.72;
  /* Dark chrome's glass: dense enough to stay near-black over a white page. */
  --dk-primitive-opacity-glass-dense: 0.9;
  --dk-primitive-opacity-hairline-subtle: 0.025;      /* light: a whisper of black */
  --dk-primitive-opacity-hairline-subtle-inverse: 0.05; /* dark: a whisper of white, needs more */

  /* Press feedback laid OVER a fill that already has a colour, for the case
     where no token ladder can express it. Alert's solid dismiss button is the
     first: --dk-surface-<status>-focus is byte-identical to
     --dk-surface-<status>-solid in light for all five statuses, and in dark
     --dk-surface-error-default collides with it the same way, so neither the
     -focus nor the -default rung gives two distinct steps above a solid fill
     in both themes. Measured, 14 Sep, before minting these.
     The colour comes from the caller (the on-solid text colour, so it is
     white over a status fill and black over the neutral one); only the
     strength lives here. */
  --dk-primitive-opacity-scrim-hover: 0.14;
  --dk-primitive-opacity-scrim-active: 0.24;

  /* The three brand strokes behind a glass surface (kit/glass.css), strongest
     first: Forge's rail's 35, 28 and 22 percent. */
  --dk-primitive-opacity-glow-1: 0.35;
  --dk-primitive-opacity-glow-2: 0.28;
  --dk-primitive-opacity-glow-3: 0.22;
}


/* ══════════════════════════════════════ drift-kit:layer tokens/primitives/blur.css ══════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────
   COLLECTION: Primitive
   GROUP: Blur
   ─────────────────────────────────────────────────────────── */

/* --dk-primitive-blur-glass
   The other half of the glass recipe. The kit already shipped the translucent
   FILL (--dk-surface-*-glass, at --dk-primitive-opacity-glass) but never the
   blur behind it, so every consumer picked its own and glass came to mean
   something different on almost every surface that used it. Counted across
   Forge on 2026-09-12: nine distinct blur values in use, 12px on the top nav
   and toolbars, 20px on the sidebars and panels, and 2 to 10px on things that
   are not glass at all.

   20px because that is what the two places already using a NAMED variable had
   settled on (--forge-glass-blur in the Forge sidebar, --glass-blur in Disko),
   so pointing them here repaints nothing.

   Blur is a length, not a colour, so it is theme-independent and lives at :root
   like the opacity it pairs with. Retune the frostiness of every glass surface
   from these two tokens.

   NOT for two neighbouring jobs that also use backdrop-filter, because they are
   different things and want different values:
     - a SCRIM behind a modal or lightbox, blurring the page underneath
     - a decorative GLOW, a blurred shape used as artwork (60px and up)
   Neither is a surface treatment; give them their own token when one is wanted. */
:root {
  --dk-primitive-blur-glass: 20px;
  /* The GLOW above: kit/glass.css's brand strokes behind a glass surface,
     Forge's rail's 60px, blurred until the strokes read as colour. */
  --dk-primitive-blur-glow: 60px;
  /* The SCRIM above (5 Nov 2026): the page behind a modal's backdrop. Less
     than glass, because the backdrop already dims it; this only takes the
     edges off, so the dialog is the one sharp thing on the screen. */
  --dk-primitive-blur-scrim: 12px;
}

/* ════════════════════════ drift-kit:layer tokens/primitives/primary-neighbours.css ════════════════════════ */
/* ───────────────────────────────────────────────────────────
   COLLECTION: Primitive
   GROUP: Primary neighbours
   ─────────────────────────────────────────────────────────── */

/* --color-primary-{prev2,prev1,next1,next2}-{50…900}
   Eight analogous-hue sibling palettes derived from the primary scale, four to
   each side on the colour wheel (prev3/prev4/next3/next4 added 29 Sep 2026 for
   DriveIQ categories and charts) — for accents, categorical encodings, and
   multi-series charts that need to stay on-brand.

   HOW THEY'RE BUILT (the whole point):
     Each step is the matching --color-primary-{step} with its LIGHTNESS and
     CHROMA held constant and only its HUE rotated, via OKLCH relative colour.
     Locking l + c means every family carries the same tone/weight at a given
     step and differs ONLY in hue — close enough to read as one harmonious
     family, far enough apart to be recognisably distinct colours.

   DYNAMIC: because the values reference var(--color-primary-{step}), changing
   the primary scale flows through to all 88 tokens automatically.

   SCOPING (fixed 2026-08-17): the family MUST live on `:root [data-brand]`,
   not bare `:root` — var() substitutes at the DECLARING element, and the
   primary scale is declared on `:root [data-brand=…]` (the body), so at the
   html element var(--color-primary-*) is undefined and every token computed
   to guaranteed-invalid/unset. Only the two tuning controls (plain numbers,
   no var refs) stay at :root and inherit down.

   RETUNING: edit the two controls below — nothing else.
     --dk-primitive-color-primary-neighbour-step   hue rotation per step, in degrees.
                                       prev/next-N = ±N×step, N = 1 to 4.
     --dk-primitive-color-primary-neighbour-chroma  chroma multiplier (1 = identical to primary).
   prev = anticlockwise (greener); next = clockwise (bluer). Default 18° gives
   ±18°/±36° — harmonious but distinct (tuned in the neighbour-tuner prototype). */
:root {
  --dk-primitive-color-primary-neighbour-step: 18;
  --dk-primitive-color-primary-neighbour-chroma: 1;
}

:root [data-brand] {
  /* prev-2 — hue −2×step (greener) */
  --dk-primitive-color-primary-prev2-50:  oklch(from var(--dk-color-primary-50)  l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 2 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev2-100: oklch(from var(--dk-color-primary-100) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 2 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev2-200: oklch(from var(--dk-color-primary-200) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 2 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev2-300: oklch(from var(--dk-color-primary-300) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 2 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev2-400: oklch(from var(--dk-color-primary-400) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 2 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev2-500: oklch(from var(--dk-color-primary-500) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 2 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev2-600: oklch(from var(--dk-color-primary-600) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 2 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev2-700: oklch(from var(--dk-color-primary-700) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 2 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev2-800: oklch(from var(--dk-color-primary-800) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 2 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev2-850: oklch(from var(--dk-color-primary-850) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 2 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev2-900: oklch(from var(--dk-color-primary-900) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 2 * var(--dk-primitive-color-primary-neighbour-step)));

  /* prev-1 — hue −1×step (greener) */
  --dk-primitive-color-primary-prev1-50:  oklch(from var(--dk-color-primary-50)  l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev1-100: oklch(from var(--dk-color-primary-100) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev1-200: oklch(from var(--dk-color-primary-200) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev1-300: oklch(from var(--dk-color-primary-300) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev1-400: oklch(from var(--dk-color-primary-400) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev1-500: oklch(from var(--dk-color-primary-500) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev1-600: oklch(from var(--dk-color-primary-600) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev1-700: oklch(from var(--dk-color-primary-700) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev1-800: oklch(from var(--dk-color-primary-800) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev1-850: oklch(from var(--dk-color-primary-850) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev1-900: oklch(from var(--dk-color-primary-900) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - var(--dk-primitive-color-primary-neighbour-step)));

  /* next-1 — hue +1×step (bluer) */
  --dk-primitive-color-primary-next1-50:  oklch(from var(--dk-color-primary-50)  l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next1-100: oklch(from var(--dk-color-primary-100) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next1-200: oklch(from var(--dk-color-primary-200) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next1-300: oklch(from var(--dk-color-primary-300) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next1-400: oklch(from var(--dk-color-primary-400) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next1-500: oklch(from var(--dk-color-primary-500) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next1-600: oklch(from var(--dk-color-primary-600) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next1-700: oklch(from var(--dk-color-primary-700) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next1-800: oklch(from var(--dk-color-primary-800) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next1-850: oklch(from var(--dk-color-primary-850) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next1-900: oklch(from var(--dk-color-primary-900) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + var(--dk-primitive-color-primary-neighbour-step)));

  /* next-2 — hue +2×step (bluer) */
  --dk-primitive-color-primary-next2-50:  oklch(from var(--dk-color-primary-50)  l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 2 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next2-100: oklch(from var(--dk-color-primary-100) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 2 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next2-200: oklch(from var(--dk-color-primary-200) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 2 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next2-300: oklch(from var(--dk-color-primary-300) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 2 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next2-400: oklch(from var(--dk-color-primary-400) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 2 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next2-500: oklch(from var(--dk-color-primary-500) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 2 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next2-600: oklch(from var(--dk-color-primary-600) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 2 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next2-700: oklch(from var(--dk-color-primary-700) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 2 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next2-800: oklch(from var(--dk-color-primary-800) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 2 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next2-850: oklch(from var(--dk-color-primary-850) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 2 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next2-900: oklch(from var(--dk-color-primary-900) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 2 * var(--dk-primitive-color-primary-neighbour-step)));

  /* prev-3 — hue −3×step (greener) */
  --dk-primitive-color-primary-prev3-50:  oklch(from var(--dk-color-primary-50)  l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 3 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev3-100: oklch(from var(--dk-color-primary-100) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 3 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev3-200: oklch(from var(--dk-color-primary-200) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 3 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev3-300: oklch(from var(--dk-color-primary-300) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 3 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev3-400: oklch(from var(--dk-color-primary-400) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 3 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev3-500: oklch(from var(--dk-color-primary-500) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 3 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev3-600: oklch(from var(--dk-color-primary-600) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 3 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev3-700: oklch(from var(--dk-color-primary-700) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 3 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev3-800: oklch(from var(--dk-color-primary-800) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 3 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev3-850: oklch(from var(--dk-color-primary-850) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 3 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev3-900: oklch(from var(--dk-color-primary-900) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 3 * var(--dk-primitive-color-primary-neighbour-step)));

  /* prev-4 — hue −4×step (greener) */
  --dk-primitive-color-primary-prev4-50:  oklch(from var(--dk-color-primary-50)  l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 4 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev4-100: oklch(from var(--dk-color-primary-100) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 4 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev4-200: oklch(from var(--dk-color-primary-200) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 4 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev4-300: oklch(from var(--dk-color-primary-300) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 4 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev4-400: oklch(from var(--dk-color-primary-400) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 4 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev4-500: oklch(from var(--dk-color-primary-500) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 4 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev4-600: oklch(from var(--dk-color-primary-600) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 4 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev4-700: oklch(from var(--dk-color-primary-700) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 4 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev4-800: oklch(from var(--dk-color-primary-800) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 4 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev4-850: oklch(from var(--dk-color-primary-850) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 4 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-prev4-900: oklch(from var(--dk-color-primary-900) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 4 * var(--dk-primitive-color-primary-neighbour-step)));

  /* next-3 — hue +3×step (bluer) */
  --dk-primitive-color-primary-next3-50:  oklch(from var(--dk-color-primary-50)  l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 3 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next3-100: oklch(from var(--dk-color-primary-100) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 3 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next3-200: oklch(from var(--dk-color-primary-200) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 3 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next3-300: oklch(from var(--dk-color-primary-300) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 3 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next3-400: oklch(from var(--dk-color-primary-400) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 3 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next3-500: oklch(from var(--dk-color-primary-500) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 3 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next3-600: oklch(from var(--dk-color-primary-600) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 3 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next3-700: oklch(from var(--dk-color-primary-700) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 3 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next3-800: oklch(from var(--dk-color-primary-800) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 3 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next3-850: oklch(from var(--dk-color-primary-850) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 3 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next3-900: oklch(from var(--dk-color-primary-900) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 3 * var(--dk-primitive-color-primary-neighbour-step)));

  /* next-4 — hue +4×step (bluer) */
  --dk-primitive-color-primary-next4-50:  oklch(from var(--dk-color-primary-50)  l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 4 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next4-100: oklch(from var(--dk-color-primary-100) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 4 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next4-200: oklch(from var(--dk-color-primary-200) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 4 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next4-300: oklch(from var(--dk-color-primary-300) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 4 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next4-400: oklch(from var(--dk-color-primary-400) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 4 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next4-500: oklch(from var(--dk-color-primary-500) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 4 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next4-600: oklch(from var(--dk-color-primary-600) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 4 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next4-700: oklch(from var(--dk-color-primary-700) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 4 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next4-800: oklch(from var(--dk-color-primary-800) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 4 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next4-850: oklch(from var(--dk-color-primary-850) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 4 * var(--dk-primitive-color-primary-neighbour-step)));
  --dk-primitive-color-primary-next4-900: oklch(from var(--dk-color-primary-900) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 4 * var(--dk-primitive-color-primary-neighbour-step)));
}

/* ════════════════════════════════════ drift-kit:layer tokens/primitives/motion.css ════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────
   COLLECTION: Primitive
   GROUP: Motion   (rebuilt 13 Oct 2026, Julio: "snappy and fluid")
   The values behind the motion scale. Duration steps are named for their
   milliseconds, as every primitive here is named for its value; the alias
   tier (tokens/alias/motion.css) names them for their job and pairs them into
   the patterns components read. Theme-independent, hence :root.

   FOUR DURATIONS where there were seven (125, 150, 200, 250, 300, 400, 500):
   the old steps sat 25 to 50ms apart, under what anyone can see in a UI
   transition. FOUR EASINGS where there were five plus three CSS keywords:
   standard, emphasized, exit and spring. The removed names are mapped in
   migrations/21.0.0-motion-scale.json. A fifth easing, gentle, and the state
   pattern's own 160 and 240 were added on 15 Oct, a sixth, pulse, on 3 Nov.
   ─────────────────────────────────────────────────────────── */
:root {
  --dk-primitive-motion-duration-120: 120ms;
  --dk-primitive-motion-duration-200: 200ms;
  --dk-primitive-motion-duration-320: 320ms;
  --dk-primitive-motion-duration-480: 480ms;
  /* The state pattern's own pair (15 Oct, Julio, after a test page): in a
     touch slower than quick so the change is seen, out slower again so it
     lets go softly. */
  --dk-primitive-motion-duration-160: 160ms;
  --dk-primitive-motion-duration-240: 240ms;
  /* standard: ease-out with a soft landing, the curve for state changes. */
  --dk-primitive-motion-easing-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* emphasized: an exponential ease-out. Most of the travel happens at once
     and the last of it settles slowly, which is what makes a moving surface
     feel deliberate rather than mechanical. For things that travel or arrive. */
  --dk-primitive-motion-easing-emphasized: cubic-bezier(0.12, 0.85, 0.18, 1);
  /* exit: accelerates away, for things leaving. */
  --dk-primitive-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
  /* spring: Radio's dot overshoot, promoted so every small confirmation
     springs the same way. */
  --dk-primitive-motion-easing-spring: linear(0, 0.429 5%, 0.752 10%, 0.983 15%, 1.137 20%, 1.231 25%, 1.28 30%, 1.297 35%, 1.3 40%, 1.295 45%, 1.28 50%, 1.256 55%, 1.225 60%, 1.189 65%, 1.15 70%, 1.111 75%, 1.075 80%, 1.044 85%, 1.02 90%, 1.005 95%, 1);
  /* gentle: CSS's own ease, a plain ease-out with a soft start. For colour,
     where standard's front-loaded curve read as an instant switch. */
  --dk-primitive-motion-easing-gentle: cubic-bezier(0.25, 0.1, 0.25, 1);
  /* pulse (3 Nov, Julio: the Stepper's step lighting up as its line reaches
     it): a there-and-back rather than a way in. Out to the keyframe's value a
     third of the way through, home again, a small rebound past where it
     started, and settled. It ends at 0, so the keyframe names only the peak. */
  --dk-primitive-motion-easing-pulse: linear(0, 0.38 5%, 0.66 10%, 0.85 15%, 0.95 20%, 0.99 25%, 1 30%, 0.96 35%, 0.82 40%, 0.58 45%, 0.3 50%, 0.06 55%, -0.12 60%, -0.2 65%, -0.18 70%, -0.12 75%, -0.06 80%, -0.02 85%, 0 90%, 0.01 95%, 0);
  /* The curtain's choreography (16 Oct): the login flow's page change, a
     staged piece longer than any step of the scale, kept to its own values
     rather than stretching the scale for one performance (its reveal is the
     slow step). sweep is its rise,
     an expo-out steeper than emphasized. */
  --dk-primitive-motion-duration-650: 650ms;
  --dk-primitive-motion-duration-850: 850ms;
  --dk-primitive-motion-duration-900: 900ms;
  --dk-primitive-motion-easing-sweep: cubic-bezier(0.16, 1, 0.3, 1);
  /* The cascade's (28 Oct): customer-portal's sign-in arrival, long and
     soft, on the sweep. Its own value for the same reason as the curtain's. */
  --dk-primitive-motion-duration-1200: 1200ms;
}

/* ═════════════════════════════════════════ drift-kit:layer tokens/alias/motion.css ═════════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────
   COLLECTION: Alias
   GROUP: Motion   (rebuilt 13 Oct 2026, Julio: "snappy and fluid")

   THREE LAYERS. Primitives hold the values. THE SCALE here names them for
   what they are: four durations (quick 120, brisk 200, moderate 320, slow
   480) and six easings (standard, emphasized, exit, spring, gentle, pulse). THE PATTERNS
   pair one duration with one easing for a job: state, press, travel, enter,
   enter-large, exit, exit-large, expand, feedback, pulse, loop and cascade.

   A COMPONENT READS A PATTERN, never the scale, never a primitive, never a
   number (test/motion-guard.test.js). Pick by the job: a hover is state, a
   pill sliding is travel, a menu arriving is enter. Exits run one step
   shorter than their enter. Anything that slides stretches by the same lag.

   THE TIER THAT MAKES prefers-reduced-motion WORK, as it has been since
   18 Sep: motion resolves through these tokens, so the preference is one
   override at the bottom of this file and nothing can fall off a list.
   Since 13 Oct it fades rather than cuts (see the override).

   BRAND-INVARIANT, hence this file sits beside the brand folders rather than
   inside them: motion does not change between Karmo and Volvo.
   ─────────────────────────────────────────────────────────── */
:root {
  /* THE SCALE. Four durations, six easings. */
  --dk-motion-duration-quick: var(--dk-primitive-motion-duration-120);
  --dk-motion-duration-brisk: var(--dk-primitive-motion-duration-200);
  --dk-motion-duration-moderate: var(--dk-primitive-motion-duration-320);
  --dk-motion-duration-slow: var(--dk-primitive-motion-duration-480);
  --dk-motion-easing-standard: var(--dk-primitive-motion-easing-standard);
  --dk-motion-easing-emphasized: var(--dk-primitive-motion-easing-emphasized);
  --dk-motion-easing-exit: var(--dk-primitive-motion-easing-exit);
  --dk-motion-easing-spring: var(--dk-primitive-motion-easing-spring);
  --dk-motion-easing-gentle: var(--dk-primitive-motion-easing-gentle);
  --dk-motion-easing-pulse: var(--dk-primitive-motion-easing-pulse);

  /* THE PATTERNS. What a component reads. Pick by the job, never by the
     number: a hover is state, a pill sliding is travel, a menu arriving is
     enter. Exits run a step shorter than their enter. */
  /* STATE has two speeds (15 Oct): in on the element that is hovered,
     focused or pressed, out as it lets go. --dk-motion-state-duration is the
     one components read: the exit here, and kit/motion.css switches it to the
     enter on that element alone. */
  --dk-motion-state-enter-duration: var(--dk-primitive-motion-duration-160);
  --dk-motion-state-exit-duration: var(--dk-primitive-motion-duration-240);
  --dk-motion-state-duration: var(--dk-motion-state-exit-duration);
  --dk-motion-state-easing: var(--dk-motion-easing-gentle);
  --dk-motion-press-duration: var(--dk-motion-duration-brisk);
  --dk-motion-press-easing: var(--dk-motion-easing-standard);
  --dk-motion-press-scale-control: var(--dk-primitive-transform-scale-active-control);
  --dk-motion-press-scale-compact: var(--dk-primitive-transform-scale-active-compact);
  --dk-motion-press-scale-surface: var(--dk-primitive-transform-scale-active-surface);
  --dk-motion-press-scale-item: var(--dk-primitive-transform-scale-active-item);
  --dk-motion-press-scale-panel: var(--dk-primitive-transform-scale-active-panel);
  --dk-motion-swap-scale: var(--dk-primitive-transform-scale-swap);
  --dk-motion-grow-scale-surface: var(--dk-primitive-transform-scale-hover-surface);
  --dk-motion-grow-scale-panel: var(--dk-primitive-transform-scale-hover-panel);
  --dk-motion-travel-duration: var(--dk-motion-duration-moderate);
  --dk-motion-travel-easing: var(--dk-motion-easing-emphasized);
  /* The stretch: the trailing edge of anything that slides starts this share
     of the travel late, so it reaches and then draws in. */
  --dk-motion-travel-lag: 0.2;
  --dk-motion-enter-duration: var(--dk-motion-duration-moderate);
  --dk-motion-enter-easing: var(--dk-motion-easing-emphasized);
  --dk-motion-enter-large-duration: var(--dk-motion-duration-slow);
  --dk-motion-enter-large-easing: var(--dk-motion-easing-emphasized);
  --dk-motion-exit-duration: var(--dk-motion-duration-brisk);
  --dk-motion-exit-easing: var(--dk-motion-easing-exit);
  --dk-motion-exit-large-duration: var(--dk-motion-duration-moderate);
  --dk-motion-exit-large-easing: var(--dk-motion-easing-exit);
  --dk-motion-expand-duration: var(--dk-motion-duration-moderate);
  --dk-motion-expand-easing: var(--dk-motion-easing-emphasized);
  --dk-motion-feedback-duration: var(--dk-motion-duration-brisk);
  --dk-motion-feedback-easing: var(--dk-motion-easing-spring);
  /* PULSE (3 Nov, Julio): something that has just become what it is grows a
     little and settles back, with one small rebound. A Stepper's step lighting
     up as its line reaches it. Its keyframe is dk-motion-pulse (kit/motion.css),
     which names only the peak: the easing brings it home. */
  --dk-motion-pulse-duration: var(--dk-motion-duration-slow);
  --dk-motion-pulse-easing: var(--dk-motion-easing-pulse);
  --dk-motion-pulse-scale: var(--dk-primitive-transform-scale-pulse);
  --dk-motion-loop-easing: linear;
  /* 28 Oct (Julio, on his phone): customer-portal's arrival. The scale's
     slow step on emphasized, 60ms apart, read as blocky and rigid there. */
  --dk-motion-cascade-duration: var(--dk-primitive-motion-duration-1200);
  --dk-motion-cascade-easing: var(--dk-primitive-motion-easing-sweep);
  --dk-motion-cascade-beat: 100ms;
  --dk-motion-cascade-rise: 24px;
  --dk-motion-cascade-max-beats: 8;
  --dk-motion-rise-char-beat: 15ms;
  --dk-motion-rise-row-beat: 20ms;
  /* CHROME'S CASCADE (29 Oct, Julio): the brisk arrival the cascade was
     before the page took the portal's, for the interface's own furniture (the
     sidebar's letters, its groups, its panel's rows). A page settles in over
     a second; the nav it is driven from answers in half that. */
  --dk-motion-chrome-cascade-duration: var(--dk-motion-duration-slow);
  --dk-motion-chrome-cascade-easing: var(--dk-motion-easing-emphasized);
  --dk-motion-chrome-cascade-beat: 60ms;
  --dk-motion-chrome-cascade-rise: 12px;
  /* PAGE: one page giving way to the next inside a region (kit/transition.js),
     Disko's wireframes swap made the kit's (16 Oct). On a region no wider
     than slide-max the new page pushes in from the side it comes from;
     wider, the old page fades out and the new one fades in on a short rise. */
  --dk-motion-page-fade-duration: var(--dk-primitive-motion-duration-240);
  --dk-motion-page-fade-easing: var(--dk-motion-easing-standard);
  --dk-motion-page-fade-exit-duration: var(--dk-motion-duration-brisk);
  --dk-motion-page-fade-exit-easing: var(--dk-motion-easing-gentle);
  --dk-motion-page-rise: 16px;
  --dk-motion-page-slide-duration: var(--dk-motion-duration-moderate);
  --dk-motion-page-slide-easing: var(--dk-motion-easing-standard);
  --dk-motion-page-slide-max: 600px;
  /* CURTAIN: the login flow's hand-over (16 Oct). The page recedes onto a
     dark backdrop, a curtain of the page surface rises over it, holds
     while the next page loads, then fades to reveal it. The reveal is quick
     (17 Oct, the login flow's 100ms): the spinner has already left, so the
     fade is a cut softened, not a moment of its own. */
  --dk-motion-curtain-recede-duration: var(--dk-primitive-motion-duration-850);
  --dk-motion-curtain-recede-easing: var(--dk-motion-easing-gentle);
  --dk-motion-curtain-recede-scale: 0.95;
  --dk-motion-curtain-recede-opacity: 0.6;
  --dk-motion-curtain-rise-delay: var(--dk-primitive-motion-duration-650);
  --dk-motion-curtain-rise-duration: var(--dk-primitive-motion-duration-900);
  --dk-motion-curtain-rise-easing: var(--dk-primitive-motion-easing-sweep);
  /* How far into the rise what the curtain holds (a spinner) comes in. */
  --dk-motion-curtain-content-delay: var(--dk-primitive-motion-duration-480);
  --dk-motion-curtain-reveal-duration: var(--dk-primitive-motion-duration-120);
  --dk-motion-curtain-reveal-easing: var(--dk-motion-easing-gentle);
}
/* REDUCED MOTION FADES, IT DOES NOT CUT (13 Oct 2026). Movement goes (no
   rise, no lag, no press, no beat), a short fade stays so a change still
   reads, and nothing is zero, so transitionend still fires for code that
   waits on it. Before this every duration was 0.01ms: change happened, but
   nothing said it had. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dk-motion-duration-quick: 120ms;
    --dk-motion-duration-brisk: 120ms;
    --dk-motion-duration-moderate: 160ms;
    --dk-motion-duration-slow: 160ms;
    --dk-motion-state-enter-duration: 120ms;
    --dk-motion-state-exit-duration: 120ms;
    --dk-motion-easing-emphasized: var(--dk-primitive-motion-easing-standard);
    --dk-motion-easing-exit: var(--dk-primitive-motion-easing-standard);
    --dk-motion-easing-spring: var(--dk-primitive-motion-easing-standard);
    --dk-motion-travel-lag: 0;
    --dk-motion-cascade-rise: 0px;
    --dk-motion-cascade-beat: 0ms;
    --dk-motion-cascade-duration: 160ms;
    --dk-motion-cascade-easing: var(--dk-primitive-motion-easing-standard);
    --dk-motion-chrome-cascade-beat: 0ms;
    --dk-motion-chrome-cascade-rise: 0px;
    --dk-motion-press-scale-control: 1;
    --dk-motion-press-scale-compact: 1;
    --dk-motion-press-scale-surface: 1;
    --dk-motion-press-scale-item: 1;
    --dk-motion-press-scale-panel: 1;
    --dk-motion-swap-scale: 1;
    --dk-motion-grow-scale-surface: 1;
    --dk-motion-grow-scale-panel: 1;
    --dk-motion-pulse-scale: 1;
    --dk-motion-page-fade-duration: 160ms;
    --dk-motion-page-rise: 0px;
    --dk-motion-page-slide-duration: 160ms;
    --dk-motion-curtain-recede-duration: 160ms;
    --dk-motion-curtain-recede-scale: 1;
    --dk-motion-curtain-rise-delay: 0ms;
    --dk-motion-curtain-rise-duration: 160ms;
    --dk-motion-curtain-content-delay: 0ms;
    --dk-motion-curtain-rise-easing: var(--dk-primitive-motion-easing-standard);
    --dk-motion-curtain-reveal-duration: 160ms;
  }
}

/* ═════════════════════════════════ drift-kit:layer tokens/primitives/transform.css ═════════════════════════════════ */
/* ───────────────────────────────────────────────────────────
   COLLECTION: Primitive
   GROUP: Transform

   Theme-independent, unitless geometry ratios consumed by component tokens
   further down the chain (e.g. --dk-component-button-transform-scale-active). Another
   upstream-promotion candidate, same as the raised family above.

   NOTE: these are consumed by component tokens, not by component rules —
   with one temporary exception (.dk-component-tab, flagged in components.css) that
   resolves when tabs get their own Components-collection pass.
   ─────────────────────────────────────────────────────────── */

/* --transform-scale-{hover,active}-{control,surface}
   The press/lift ramp, in two rungs because the SAME ratio does not read the
   same on a 32px icon button and on a 320px card: scale() is proportional, so
   a card at 1.075 travels ~24px at its corner and lurches, while a small
   button at 1.02 moves under a pixel and reads as nothing happening. Step by
   perception, not by index — small controls take the wide ratios, large
   surfaces take the narrow ones.

     control  — pressables up to ~48px: buttons, tabs, kebabs, icon buttons
     surface  — cards, panels, tiles; anything whose corner is far from centre

   Unitless ratios; no matching Drift primitive exists for any of them.
     hover-control  → 1.075   (clear grow on a small target)
     active-control → 0.97    (a text-width control; compact 0.93 for squares)
     hover-surface  → 1.02    (subtle lift; ~3px on a 320px card)
     active-surface → 0.99    (a settle after the hover grow, Julio 15 Oct) */
:root {
  --dk-primitive-transform-scale-hover-control: 1.075;
  /* Two control rungs (17 Oct, Julio): a press is how far an edge travels,
     and one rung moved a 160px Button 6.4px a side. Text-width controls take
     0.97 (a 120px Button, about 1.8px); small squares take compact 0.93 (a
     40px icon button, about 1.4px). */
  --dk-primitive-transform-scale-active-control: 0.97;
  --dk-primitive-transform-scale-active-compact: 0.93;
  /* A row presses to 0.97; a surface and a panel, which grow on hover, settle
     to 0.99 (15 Oct, set by Julio). */
  --dk-primitive-transform-scale-active-item: 0.97;
  --dk-primitive-transform-scale-hover-surface: 1.02;
  --dk-primitive-transform-scale-active-surface: 0.99;
  --dk-primitive-transform-scale-active-panel: 0.99;
  /* A panel grows on hover half a surface's step (15 Oct): its edges travel
     about 3px at 600px, a card's about 2.4px at 240px. */
  --dk-primitive-transform-scale-hover-panel: 1.01;
  /* The pulse's peak (3 Nov): big enough to read on a 12px dot, small enough
     that a 32px disc does not knock its neighbours. */
  --dk-primitive-transform-scale-pulse: 1.12;
  /* The swap (7 Nov): the part of a swap that is not shown sits at 0.8, faded,
     so one mark reads as turning into the other (a tile into its checkbox). */
  --dk-primitive-transform-scale-swap: 0.8;
}

/* ════════════════════════════════════ drift-kit:layer components/button/tokens.css ════════════════════════════════════ */
/* ============================================================================
   Drift Components — component token collection for the forge repo
   ----------------------------------------------------------------------------
   The Components collection: a new token tier that sits above the Mapped
   collection and fully describes each component's visual spec (colour,
   spacing, sizing, radius, typography, shadows, gaps — everything the
   component sets, down to single-consumer values). This file holds the
   collection for every component, sectioned per component with the same
   boxed-header + per-token comment conventions as drift-extensions.css.
   Button is the pilot — currently the only component in this file.

   STATUSES — default / subtle support primary / error ONLY. ACCENT is
   single-status (the primary CTA; error removed 2026-08-18 — a glossy
   gradient must never be the destructive action) so its status axis is
   OMITTED from names and markup entirely, like plain/raised.
   OUTLINE is the full-spectrum status variant: primary / error / success /
   warning / information — s/w/i re-added 2026-08-18 for exactly one
   documented reason (action buttons inside status alerts; outline's
   transparent fill composes with tinted containers by construction).
   `neutral` exists on NO variant (2026-08-18: neutral is the absence of
   semantic colour, not a status — grey actions are `plain` (flat, in-flow)
   or `raised` (floating) instead). Solid/tinted s/w/i remain non-things.
   Unsupported combos FAIL LOUD (no tokens → no fill), never silently
   fall back. (Spec decision #7, twice amended.)

   NAMING GRAMMAR (selector-mirror):
     --{component}-{variant}-{status}-{size}-{property}-{state}
   Axes appear in HTML-attribute order (data-variant, data-status,
   data-size), then the property, then the interaction state. A generator
   reads the data-* attributes off the element, appends property and
   state — that string is the token name. Axes a token does not vary on
   are omitted entirely: radius is global → --dk-component-button-border-radius; gap
   varies only by size → --dk-component-button-extra-large-gap; `raised` is status-agnostic
   → --dk-component-button-raised-surface-hover.

   LOAD ORDER — this file loads THIRD: after drift-ui.css and
   drift-extensions.css, before drift-components.css.
     <link rel="stylesheet" href="/assets/drift-ui.css" />   (drift-kit core.css)
     <link rel="stylesheet" href="/assets/drift-extensions.css" />   (drift-kit tokens.css)
     <link rel="stylesheet" href="/assets/drift-components-tokens.css" />
     <link rel="stylesheet" href="/assets/drift-components.css" />

   SCOPING — tokens are declared on .dk-component-button, one shared block,
   NOT :root and no longer the four legs. Custom-property var() references
   substitute at the element where the custom property is DECLARED, not where
   it is consumed, and Drift's mapped layer is scoped only under [data-theme],
   never on :root or html. Declaring these at :root would therefore resolve
   most of their references against a scope where those aliases do not exist,
   computing to empty and inheriting everywhere, ignoring the theme.

   The four legs, [data-theme="light"], [data-theme="dark"], [data-surface]
   and [data-tone], solved that by re-declaring the whole collection at every
   theme, level and tone boundary, so substitution happened again at each one.
   It worked, and it put all 322 of these on <body> and on every panel, where
   custom properties inherit them to every element in the document. Declaring
   on .dk-component-button puts substitution where the button is, which has
   the same theme, level and tone above it by definition. Same values, one
   element instead of the whole tree.

   REFERENCE RULES (spec § 3.2):
     - surface / text / icon / border colours → Mapped tokens.
     - gradient stops (accent)                → Mapped gradient tokens.
     - focus ring colours                     → Primitive colour steps,
       matching v2 (--color-{status}-300).
     - spacing / sizing / gaps                → FIXED --scale-* primitives
       (see Responsiveness below), never the responsive --spacing-*
       aliases.
     - radius                                 → --border-radius-* aliases
       (keeps the dynamic layer's corner tiers working; the control family makes it a pill under round).
     - font size / weight / line-height       → alias font tokens where a
       match exists, --scale-* or --font-weight-* otherwise.
   Raw values are used only where no primitive exists, each with a
   justification comment (same rule as drift-extensions.css).

   RESPONSIVENESS — component-owned (spec § 5): component spacing/sizing
   tokens reference fixed --scale-* primitives and are constant across
   breakpoints by default (controls hold their desktop size on every
   breakpoint — deliberate; Drift's global responsive chain shrinking
   controls on mobile is backwards for touch targets). When a token
   genuinely should adapt, it is redefined per breakpoint inside this
   file, inside the component's own section, via @media — the mode lives
   in @media scoping, never in the token name. Drift's global responsive
   --spacing-* aliases are unchanged and remain the right tool for layout.

   Specs (in this repo): docs/superpowers/specs/
         2026-08-14-drift-components-collection-design.md
         2026-08-18-drift-surface-levels-design.md
   ========================================================================== */


/* ══ COLLECTION: Components · GROUP: button — global (no axes) ══ */
/* SCOPED TO THE COMPONENT, not to every themed element on the page.

   This block used to carry four legs: [data-theme="light"],
   [data-theme="dark"], [data-surface] and [data-tone]. That put the whole
   collection on <body> and on every panel, and custom properties inherit, so
   all 322 of these reached every element in the document. Across the kit that
   came to 2,958 custom properties on a bare <span>, which is what makes the
   browser's inspector crawl.

   NOTHING IS LOST BY MOVING IT HERE. The four legs existed so the collection
   would re-resolve inside a tone, a level or an inverse panel. Declared on the
   component itself it resolves ON the component, against that element's own
   nearest theme, tone and level, which is the same answer arrived at more
   directly. Proven on Button first: check:button, check:contract,
   check:conformance and check:contrast all pass unchanged, and the last two
   sweep every tone, level and theme. */
.dk-component-button {
  --dk-component-button-font-family: var(--dk-font-family-primary);
  --dk-component-button-font-weight: var(--dk-primitive-font-weight-semi-bold); /* 600 — bold read heavy at label sizes; ALL variants share it (2026-08-18) */

  /* Motion resolves through the ALIAS tier, not the primitive. That is what
     puts these under the prefers-reduced-motion override in
     tokens/alias/motion.css: a component token pointing straight at a
     primitive would keep its full duration with the preference set, which is
     the failure mode the old hand-kept selector list existed to patch. */
  --dk-component-button-transition-duration: var(--dk-motion-state-duration); /* extension primitive: standard control-transition duration */
  --dk-component-button-transform-scale-active: var(--dk-interactive-press-control); /* extension primitive: pressed-control shrink ratio */
  /* GEOMETRY, tokenised 2026-08-18 — these were the last raw values in the
     button spec, which meant the component was not fully machine-readable
     (full-coverage doctrine, spec decision #2). */
  --dk-component-button-focus-ring-width: var(--dk-primitive-scale-1); /* 4px halo, all variants */
  --dk-component-button-content-alignment: center; /* data-alignment overrides per instance */
  --dk-component-button-state-transition-duration: var(--dk-motion-state-duration); /* transform + shadow */
  --dk-component-button-spinner-size: var(--dk-primitive-scale-4-5); /* 18px — bumped twice from scale-3-5 (14px), design call 2026-08-14 */
  --dk-component-button-spinner-border-width: var(--dk-primitive-scale-0-5);
  --dk-component-button-spinner-track: var(--dk-border-raised-default);
  --dk-component-button-spinner-head: var(--dk-surface-primary-default);
}

/* ── size axis — FIXED scale primitives (component-owned responsiveness:
      controls hold their desktop size on every breakpoint; deliberate). Values
      = v2 Button.module.scss size blocks resolved at desktop. Gap is uniform
      across sizes — this IS the former Forge gap override, now canonical. ── */
.dk-component-button {
  /* small was retuned on 15 Sep (Julio: the icons read too big and the box too
     rectangular). Both were measurable, and they compounded at this size only.
       ICON 18px → 16px. The icon-to-font ratio ran 1.50 / 1.43 / 1.38 / 1.20
       from small to extra-large, so the SMALLEST button carried the largest
       glyph relative to its words. Measured against the line box it is starker:
       small and medium set icon EXACTLY equal to line-height (18/18, 20/20)
       while large and extra-large sit below it (22/24, 24/28). 16px puts small
       at 0.89 of its line box, in the band large and extra-large already use.
       Medium is deliberately left alone: it is the default size, its ratio is
       not the outlier, and this was a small-button complaint.
       PADDING-Y 8px → 10px. Vertical padding as a share of height ran 24% /
       27% / 29% / 28%, so small was also the tightest. 10px brings it to 26%
       and the height from 34px to 38px, which is still under the 44px touch
       guidance the README records as a known limit, but closer to it. */
  --dk-component-button-small-padding-y: var(--dk-primitive-scale-2-5);
  --dk-component-button-small-padding-x: var(--dk-primitive-scale-4);
  --dk-component-button-small-gap: var(--dk-primitive-scale-1-5);
  --dk-component-button-small-border-radius: var(--dk-border-radius-control-125);
  --dk-component-button-small-font-size: var(--dk-font-body-xsm-text-size);
  --dk-component-button-small-line-height: var(--dk-font-body-xsm-line-height);
  --dk-component-button-small-icon-size: var(--dk-primitive-scale-4);

  --dk-component-button-medium-padding-y: var(--dk-primitive-scale-3);
  --dk-component-button-medium-padding-x: var(--dk-primitive-scale-5);
  --dk-component-button-medium-gap: var(--dk-primitive-scale-1-5);
  --dk-component-button-medium-border-radius: var(--dk-border-radius-control-150);
  --dk-component-button-medium-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-button-medium-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-button-medium-icon-size: var(--dk-primitive-scale-5);

  /* 52, a large field's height, so a field and its button line up (18 Oct; was 56). */
  --dk-component-button-large-padding-y: var(--dk-primitive-scale-3-5);
  --dk-component-button-large-padding-x: var(--dk-primitive-scale-6);
  --dk-component-button-large-gap: var(--dk-primitive-scale-1-5);
  --dk-component-button-large-border-radius: var(--dk-border-radius-control-200);
  --dk-component-button-large-font-size: var(--dk-font-body-md-text-size);
  --dk-component-button-large-line-height: var(--dk-font-body-md-line-height);
  --dk-component-button-large-icon-size: var(--dk-primitive-scale-5-5);

  --dk-component-button-extra-large-padding-y: var(--dk-primitive-scale-4-5);
  --dk-component-button-extra-large-padding-x: var(--dk-primitive-scale-7);
  --dk-component-button-extra-large-gap: var(--dk-primitive-scale-1-5);
  --dk-component-button-extra-large-border-radius: var(--dk-border-radius-control-200);
  --dk-component-button-extra-large-font-size: var(--dk-font-body-lg-text-size);
  --dk-component-button-extra-large-line-height: var(--dk-font-body-lg-line-height);
  /* The loading spinner's turn: a loop's own cycle, not a transition. */
  --dk-component-button-spin-duration: 0.7s;
  --dk-component-button-extra-large-icon-size: var(--dk-primitive-scale-6);
}


/* ── default (filled): white-fixed content, coloured surface per status ── */
.dk-component-button {
  --dk-component-button-default-text-default: var(--dk-text-base-white);
  --dk-component-button-default-icon-default: var(--dk-text-base-white);
  --dk-component-button-default-surface-disabled: var(--dk-surface-disabled-subtle);
  --dk-component-button-default-text-disabled: var(--dk-text-disabled-subtle);
  --dk-component-button-default-icon-disabled: var(--dk-icon-disabled-subtle);
}

/* default · primary */
.dk-component-button {
  --dk-component-button-default-primary-text-default: var(--dk-text-on-primary-fill);
  --dk-component-button-default-primary-icon-default: var(--dk-icon-on-primary-fill);
  --dk-component-button-default-primary-surface-default: var(--dk-surface-primary-default);
  --dk-component-button-default-primary-surface-hover: var(--dk-surface-primary-hover);
  --dk-component-button-default-primary-surface-focus: var(--dk-surface-primary-focus);
  --dk-component-button-default-primary-surface-active: var(--dk-surface-primary-focus); /* v2: active shares focus */
  --dk-component-button-default-primary-ring: var(--dk-color-primary-300);
}

/* default · error */
.dk-component-button {
  --dk-component-button-default-error-text-default: var(--dk-text-on-error-fill);
  --dk-component-button-default-error-icon-default: var(--dk-icon-on-error-fill);
  --dk-component-button-default-error-surface-default: var(--dk-surface-error-default);
  --dk-component-button-default-error-surface-hover: var(--dk-surface-error-hover);
  --dk-component-button-default-error-surface-focus: var(--dk-surface-error-focus);
  --dk-component-button-default-error-surface-active: var(--dk-surface-error-focus); /* v2: active shares focus */
  --dk-component-button-default-error-ring: var(--dk-color-error-300);
}

/* default · success / warning / information (2026-09-13) — added so an
   Alert's primary action can be a `default` Button carrying the alert's own
   status, matching how outline already covers all five. Same shape as
   default-primary / default-error above: solid surface default/hover/focus
   (active shares focus, v2) plus a focus ring, sourced from the same Mapped
   surface/color tokens the other default-status families use. */
/* default · success */
.dk-component-button {
  --dk-component-button-default-success-text-default: var(--dk-text-on-success-fill);
  --dk-component-button-default-success-icon-default: var(--dk-icon-on-success-fill);
  --dk-component-button-default-success-surface-default: var(--dk-surface-success-default);
  --dk-component-button-default-success-surface-hover: var(--dk-surface-success-hover);
  --dk-component-button-default-success-surface-focus: var(--dk-surface-success-focus);
  --dk-component-button-default-success-surface-active: var(--dk-surface-success-focus); /* v2: active shares focus */
  --dk-component-button-default-success-ring: var(--dk-color-success-300);
}

/* default · warning */
.dk-component-button {
  --dk-component-button-default-warning-text-default: var(--dk-text-on-warning-fill);
  --dk-component-button-default-warning-icon-default: var(--dk-icon-on-warning-fill);
  --dk-component-button-default-warning-surface-default: var(--dk-surface-warning-default);
  --dk-component-button-default-warning-surface-hover: var(--dk-surface-warning-hover);
  --dk-component-button-default-warning-surface-focus: var(--dk-surface-warning-focus);
  --dk-component-button-default-warning-surface-active: var(--dk-surface-warning-focus); /* v2: active shares focus */
  --dk-component-button-default-warning-ring: var(--dk-color-warning-300);
}

/* default · information */
.dk-component-button {
  --dk-component-button-default-information-text-default: var(--dk-text-on-information-fill);
  --dk-component-button-default-information-icon-default: var(--dk-icon-on-information-fill);
  --dk-component-button-default-information-surface-default: var(--dk-surface-information-default);
  --dk-component-button-default-information-surface-hover: var(--dk-surface-information-hover);
  --dk-component-button-default-information-surface-focus: var(--dk-surface-information-focus);
  --dk-component-button-default-information-surface-active: var(--dk-surface-information-focus); /* v2: active shares focus */
  --dk-component-button-default-information-ring: var(--dk-color-information-300);
}


/* ── accent: 3-stop 257° gradient + physical elevation + engraved text shadow ── */
.dk-component-button {
  --dk-component-button-accent-text-default: var(--dk-text-base-white);
  --dk-component-button-accent-icon-default: var(--dk-text-base-white);
  --dk-component-button-accent-transition-duration: var(--dk-motion-state-duration);
  /* Gradient + elevation geometry (was hard-coded in the CSS rule). */
  --dk-component-button-accent-gradient-angle: 257deg;
  --dk-component-button-accent-gradient-stop-1-position: -27.22%;
  --dk-component-button-accent-gradient-stop-2-position: 25.42%;
  --dk-component-button-accent-gradient-stop-3-position: 104.56%;
  --dk-component-button-accent-elevation-height: var(--dk-primitive-scale-0-5);       /* 2px lift, most sizes */
  --dk-component-button-accent-elevation-height-small: var(--dk-primitive-scale-0-25); /* 1px at the small size */ /* extension primitive: long-morph duration for the gradient cross-fade */
  --dk-component-button-accent-gradient-stop-1-disabled: var(--dk-color-neutral-50);
  --dk-component-button-accent-gradient-stop-2-disabled: var(--dk-color-neutral-100);
  --dk-component-button-accent-gradient-stop-3-disabled: var(--dk-color-neutral-200);
  --dk-component-button-accent-elevation-disabled: var(--dk-border-disabled-elevation);
  --dk-component-button-accent-text-shadow-disabled: var(--dk-text-disabled-default);
}

/* accent — single-status (the primary CTA; status axis OMITTED per the
   grammar, 2026-08-18: error was removed — a glossy gradient must never be
   the destructive action — leaving one status, and axes a variant does not
   vary on drop out of names and markup entirely). data-status on an accent
   button is ignored, as on plain/raised. */
.dk-component-button {
  --dk-component-button-accent-gradient-stop-1-default: var(--dk-gradient-primary-top-right-default-stop-1);
  --dk-component-button-accent-gradient-stop-2-default: var(--dk-gradient-primary-top-right-default-stop-2);
  --dk-component-button-accent-gradient-stop-3-default: var(--dk-gradient-primary-top-right-default-stop-3);
  --dk-component-button-accent-gradient-stop-1-hover: var(--dk-gradient-primary-top-right-hover-stop-1);
  --dk-component-button-accent-gradient-stop-2-hover: var(--dk-gradient-primary-top-right-hover-stop-2);
  --dk-component-button-accent-gradient-stop-3-hover: var(--dk-gradient-primary-top-right-hover-stop-3);
  --dk-component-button-accent-elevation-default: var(--dk-border-primary-elevation);
  --dk-component-button-accent-elevation-hover: var(--dk-border-primary-elevation-hover);
  --dk-component-button-accent-text-shadow: var(--dk-color-primary-700);
  --dk-component-button-accent-ring: var(--dk-color-primary-300);
}

/* ── outline: transparent surface, status border, coloured content ── */
.dk-component-button {
  --dk-component-button-outline-surface-default: transparent; /* raw: no transparent primitive */
  --dk-component-button-outline-border-width: var(--dk-border-width-25);
  --dk-component-button-outline-border-disabled: var(--dk-border-disabled-subtle);
  --dk-component-button-outline-text-disabled: var(--dk-text-disabled-subtle);
  --dk-component-button-outline-icon-disabled: var(--dk-icon-disabled-subtle);
}

/* outline · primary */
.dk-component-button {
  --dk-component-button-outline-primary-border-default: var(--dk-border-primary-default);
  --dk-component-button-outline-primary-border-hover: var(--dk-border-primary-hover);
  --dk-component-button-outline-primary-border-focus: var(--dk-border-primary-focus);
  --dk-component-button-outline-primary-border-active: var(--dk-border-primary-focus);
  --dk-component-button-outline-primary-surface-hover: var(--dk-surface-control-hover-on-primary-subtle);
  --dk-component-button-outline-primary-surface-focus: var(--dk-surface-control-active-on-primary-subtle);
  --dk-component-button-outline-primary-surface-active: var(--dk-surface-control-active-on-primary-subtle);
  --dk-component-button-outline-primary-text-default: var(--dk-text-primary-default);
  --dk-component-button-outline-primary-icon-default: var(--dk-icon-primary-default);
  --dk-component-button-outline-primary-text-hover: var(--dk-text-control-hover-on-primary-subtle);
  --dk-component-button-outline-primary-text-focus: var(--dk-text-control-active-on-primary-subtle);
  --dk-component-button-outline-primary-text-active: var(--dk-text-control-active-on-primary-subtle);
  --dk-component-button-outline-primary-icon-hover: var(--dk-icon-control-hover-on-primary-subtle);
  --dk-component-button-outline-primary-icon-focus: var(--dk-icon-control-active-on-primary-subtle);
  --dk-component-button-outline-primary-icon-active: var(--dk-icon-control-active-on-primary-subtle);
  --dk-component-button-outline-primary-ring: var(--dk-color-primary-300);
}

/* outline · success / warning / information (2026-08-18) — outline is the
   FULL-SPECTRUM status variant, re-adding v2's s/w/i for exactly one
   documented reason: action buttons inside status alerts. Outline's
   transparent fill composes with a tinted alert container by construction
   (the tint shows through; border/text carry the status). Solid (default)
   and tinted (subtle) s/w/i remain non-things — see the STATUSES header. */
.dk-component-button {
  --dk-component-button-outline-success-border-default: var(--dk-border-success-default);
  --dk-component-button-outline-success-border-hover: var(--dk-border-success-hover);
  --dk-component-button-outline-success-border-focus: var(--dk-border-success-focus);
  --dk-component-button-outline-success-border-active: var(--dk-border-success-focus);
  --dk-component-button-outline-success-surface-hover: var(--dk-surface-control-hover-on-success-subtle);
  --dk-component-button-outline-success-surface-focus: var(--dk-surface-control-active-on-success-subtle);
  --dk-component-button-outline-success-surface-active: var(--dk-surface-control-active-on-success-subtle);
  --dk-component-button-outline-success-text-default: var(--dk-text-success-default);
  --dk-component-button-outline-success-icon-default: var(--dk-icon-success-default);
  --dk-component-button-outline-success-text-hover: var(--dk-text-control-hover-on-success-subtle);
  --dk-component-button-outline-success-text-focus: var(--dk-text-control-active-on-success-subtle);
  --dk-component-button-outline-success-text-active: var(--dk-text-control-active-on-success-subtle);
  --dk-component-button-outline-success-icon-hover: var(--dk-icon-control-hover-on-success-subtle);
  --dk-component-button-outline-success-icon-focus: var(--dk-icon-control-active-on-success-subtle);
  --dk-component-button-outline-success-icon-active: var(--dk-icon-control-active-on-success-subtle);
  --dk-component-button-outline-success-ring: var(--dk-color-success-300);

  --dk-component-button-outline-warning-border-default: var(--dk-border-warning-default);
  --dk-component-button-outline-warning-border-hover: var(--dk-border-warning-hover);
  --dk-component-button-outline-warning-border-focus: var(--dk-border-warning-focus);
  --dk-component-button-outline-warning-border-active: var(--dk-border-warning-focus);
  --dk-component-button-outline-warning-surface-hover: var(--dk-surface-control-hover-on-warning-subtle);
  --dk-component-button-outline-warning-surface-focus: var(--dk-surface-control-active-on-warning-subtle);
  --dk-component-button-outline-warning-surface-active: var(--dk-surface-control-active-on-warning-subtle);
  --dk-component-button-outline-warning-text-default: var(--dk-text-warning-default);
  --dk-component-button-outline-warning-icon-default: var(--dk-icon-warning-default);
  --dk-component-button-outline-warning-text-hover: var(--dk-text-control-hover-on-warning-subtle);
  --dk-component-button-outline-warning-text-focus: var(--dk-text-control-active-on-warning-subtle);
  --dk-component-button-outline-warning-text-active: var(--dk-text-control-active-on-warning-subtle);
  --dk-component-button-outline-warning-icon-hover: var(--dk-icon-control-hover-on-warning-subtle);
  --dk-component-button-outline-warning-icon-focus: var(--dk-icon-control-active-on-warning-subtle);
  --dk-component-button-outline-warning-icon-active: var(--dk-icon-control-active-on-warning-subtle);
  --dk-component-button-outline-warning-ring: var(--dk-color-warning-300);

  --dk-component-button-outline-information-border-default: var(--dk-border-information-default);
  --dk-component-button-outline-information-border-hover: var(--dk-border-information-hover);
  --dk-component-button-outline-information-border-focus: var(--dk-border-information-focus);
  --dk-component-button-outline-information-border-active: var(--dk-border-information-focus);
  --dk-component-button-outline-information-surface-hover: var(--dk-surface-control-hover-on-information-subtle);
  --dk-component-button-outline-information-surface-focus: var(--dk-surface-control-active-on-information-subtle);
  --dk-component-button-outline-information-surface-active: var(--dk-surface-control-active-on-information-subtle);
  --dk-component-button-outline-information-text-default: var(--dk-text-information-default);
  --dk-component-button-outline-information-icon-default: var(--dk-icon-information-default);
  --dk-component-button-outline-information-text-hover: var(--dk-text-control-hover-on-information-subtle);
  --dk-component-button-outline-information-text-focus: var(--dk-text-control-active-on-information-subtle);
  --dk-component-button-outline-information-text-active: var(--dk-text-control-active-on-information-subtle);
  --dk-component-button-outline-information-icon-hover: var(--dk-icon-control-hover-on-information-subtle);
  --dk-component-button-outline-information-icon-focus: var(--dk-icon-control-active-on-information-subtle);
  --dk-component-button-outline-information-icon-active: var(--dk-icon-control-active-on-information-subtle);
  --dk-component-button-outline-information-ring: var(--dk-color-information-300);
}

/* outline · error */
.dk-component-button {
  --dk-component-button-outline-error-border-default: var(--dk-border-error-default);
  --dk-component-button-outline-error-border-hover: var(--dk-border-error-hover);
  --dk-component-button-outline-error-border-focus: var(--dk-border-error-focus);
  --dk-component-button-outline-error-border-active: var(--dk-border-error-focus);
  --dk-component-button-outline-error-surface-hover: var(--dk-surface-control-hover-on-error-subtle);
  --dk-component-button-outline-error-surface-focus: var(--dk-surface-control-active-on-error-subtle);
  --dk-component-button-outline-error-surface-active: var(--dk-surface-control-active-on-error-subtle);
  --dk-component-button-outline-error-text-default: var(--dk-text-error-default);
  --dk-component-button-outline-error-icon-default: var(--dk-icon-error-default);
  --dk-component-button-outline-error-text-hover: var(--dk-text-control-hover-on-error-subtle);
  --dk-component-button-outline-error-text-focus: var(--dk-text-control-active-on-error-subtle);
  --dk-component-button-outline-error-text-active: var(--dk-text-control-active-on-error-subtle);
  --dk-component-button-outline-error-icon-hover: var(--dk-icon-control-hover-on-error-subtle);
  --dk-component-button-outline-error-icon-focus: var(--dk-icon-control-active-on-error-subtle);
  --dk-component-button-outline-error-icon-active: var(--dk-icon-control-active-on-error-subtle);
  --dk-component-button-outline-error-ring: var(--dk-color-error-300);
}

/* ── subtle: soft status surface, coloured content ── */
.dk-component-button {
  /* ── subtle, NEUTRAL: the statusless default the variant never had. Written
     without a status segment, the way plain and raised are, because it is what
     the variant looks like when nobody asks for a status. It reads the control
     family end to end, so a subtle button takes the colour of whatever surface
     it is sitting on -- tone, level and fill -- exactly as the icon button's
     subtle variant does. data-status="primary" and "error" still force those
     ramps through every surface, which is what they are for. */
  --dk-component-button-subtle-surface-default: var(--dk-surface-control-default);
  --dk-component-button-subtle-surface-hover: var(--dk-surface-control-hover);
  --dk-component-button-subtle-surface-focus: var(--dk-surface-control-active);
  --dk-component-button-subtle-surface-active: var(--dk-surface-control-active);
  --dk-component-button-subtle-text-default: var(--dk-text-control-default);
  --dk-component-button-subtle-text-hover: var(--dk-text-control-hover);
  --dk-component-button-subtle-text-focus: var(--dk-text-control-active);
  --dk-component-button-subtle-text-active: var(--dk-text-control-active);
  --dk-component-button-subtle-icon-default: var(--dk-icon-control-default);
  --dk-component-button-subtle-icon-hover: var(--dk-icon-control-hover);
  --dk-component-button-subtle-icon-focus: var(--dk-icon-control-active);
  --dk-component-button-subtle-icon-active: var(--dk-icon-control-active);
  --dk-component-button-subtle-ring: var(--dk-border-control-hover);

  --dk-component-button-subtle-surface-disabled: var(--dk-surface-control-disabled);
  --dk-component-button-subtle-text-disabled: var(--dk-text-control-disabled);
  --dk-component-button-subtle-icon-disabled: var(--dk-icon-control-disabled);
}

/* subtle · primary */
.dk-component-button {
  --dk-component-button-subtle-primary-surface-default: var(--dk-surface-control-default-on-primary-subtle);
  --dk-component-button-subtle-primary-surface-hover: var(--dk-surface-control-hover-on-primary-subtle);
  --dk-component-button-subtle-primary-surface-focus: var(--dk-surface-control-active-on-primary-subtle);
  --dk-component-button-subtle-primary-surface-active: var(--dk-surface-control-active-on-primary-subtle);
  --dk-component-button-subtle-primary-text-default: var(--dk-text-control-default-on-primary-subtle);
  --dk-component-button-subtle-primary-icon-default: var(--dk-icon-control-default-on-primary-subtle);
  --dk-component-button-subtle-primary-text-hover: var(--dk-text-control-hover-on-primary-subtle);
  --dk-component-button-subtle-primary-text-focus: var(--dk-text-control-active-on-primary-subtle);
  --dk-component-button-subtle-primary-text-active: var(--dk-text-control-active-on-primary-subtle);
  --dk-component-button-subtle-primary-icon-hover: var(--dk-icon-control-hover-on-primary-subtle);
  --dk-component-button-subtle-primary-icon-focus: var(--dk-icon-control-active-on-primary-subtle);
  --dk-component-button-subtle-primary-icon-active: var(--dk-icon-control-active-on-primary-subtle);
  --dk-component-button-subtle-primary-ring: var(--dk-color-primary-300);
}

/* subtle · error */
.dk-component-button {
  --dk-component-button-subtle-error-surface-default: var(--dk-surface-control-default-on-error-subtle);
  --dk-component-button-subtle-error-surface-hover: var(--dk-surface-control-hover-on-error-subtle);
  --dk-component-button-subtle-error-surface-focus: var(--dk-surface-control-active-on-error-subtle);
  --dk-component-button-subtle-error-surface-active: var(--dk-surface-control-active-on-error-subtle);
  --dk-component-button-subtle-error-text-default: var(--dk-text-control-default-on-error-subtle);
  --dk-component-button-subtle-error-icon-default: var(--dk-icon-control-default-on-error-subtle);
  --dk-component-button-subtle-error-text-hover: var(--dk-text-control-hover-on-error-subtle);
  --dk-component-button-subtle-error-text-focus: var(--dk-text-control-active-on-error-subtle);
  --dk-component-button-subtle-error-text-active: var(--dk-text-control-active-on-error-subtle);
  --dk-component-button-subtle-error-icon-hover: var(--dk-icon-control-hover-on-error-subtle);
  --dk-component-button-subtle-error-icon-focus: var(--dk-icon-control-active-on-error-subtle);
  --dk-component-button-subtle-error-icon-active: var(--dk-icon-control-active-on-error-subtle);
  --dk-component-button-subtle-error-ring: var(--dk-color-error-300);
}

/* ── raised: plain with a shadow (13 Oct 2026). Raised means elevation
   everywhere in the kit (Select, Glider, Box), so it is plain's fill, border
   and words at every state, lifted off the surface by a shadow rather than by
   a fill a step off it: lifted at rest, floating on hover, settling to raised
   on a press. The fill follows the level and the tone exactly as plain's
   does; the shadow is the theme's. It replaced a resting fill one step off
   the surface (--dk-surface-control-default), which read as plain's twin. ── */
.dk-component-button {
  --dk-component-button-raised-border-width: var(--dk-border-width-25);
  --dk-component-button-raised-shadow: var(--dk-shadow-lifted);
  --dk-component-button-raised-shadow-hover: var(--dk-shadow-floating);
  --dk-component-button-raised-shadow-active: var(--dk-shadow-raised);
  --dk-component-button-raised-surface-default: var(--dk-surface-current);
  --dk-component-button-raised-surface-hover: var(--dk-surface-control-hover);
  --dk-component-button-raised-surface-focus: var(--dk-surface-control-active);
  --dk-component-button-raised-surface-active: var(--dk-surface-control-active);
  --dk-component-button-raised-border-default: var(--dk-border-control-lifted-default); /* no resting shadow → the stronger hairline */
  --dk-component-button-raised-border-hover: var(--dk-border-control-lifted-hover);
  --dk-component-button-raised-border-focus: var(--dk-border-control-lifted-active);
  --dk-component-button-raised-border-active: var(--dk-border-control-lifted-active);
  --dk-component-button-raised-text-default: var(--dk-text-control-default);
  --dk-component-button-raised-icon-default: var(--dk-icon-control-default);
  /* Per-state label/icon colour (added 2026-08-18 — every variant used to
     hold ONE text colour across rest/hover/active). Only the neutral
     variants get this: default/accent/inverse keep white (the fill carries
     the state) and outline/subtle keep their status colour (it IS their
     identity). Focus mirrors active, matching how the surface tokens pair. */
  --dk-component-button-raised-text-hover: var(--dk-text-control-hover);
  --dk-component-button-raised-text-focus: var(--dk-text-control-active);
  --dk-component-button-raised-text-active: var(--dk-text-control-active);
  --dk-component-button-raised-icon-hover: var(--dk-icon-control-hover);
  --dk-component-button-raised-icon-focus: var(--dk-icon-control-active);
  --dk-component-button-raised-icon-active: var(--dk-icon-control-active);
  --dk-component-button-raised-ring: var(--dk-color-neutral-300);
  --dk-component-button-raised-surface-disabled: var(--dk-surface-control-disabled);
  --dk-component-button-raised-border-disabled: var(--dk-border-disabled-subtle);
  --dk-component-button-raised-text-disabled: var(--dk-text-control-disabled);
  --dk-component-button-raised-icon-disabled: var(--dk-icon-control-disabled);
}

/* ── plain: Forge-only. The classic secondary button, defined as FLAT
   (Julio, 2026-08-18): its fill MATCHES the surface it sits on
   (--dk-surface-current — white on the white body, the rung colour on deeper
   rungs, the dark body colour in dark), so at rest it is distinguishable by
   border alone. Hover/active walk one and two steps off the current surface
   via the --surface-lifted-* ladder — the same ladder the raised variant
   RESTS on, which is exactly the role split: plain sits IN the surface,
   raised floats one step above it. Status-agnostic; base bold weight. ── */
.dk-component-button {
  /* ── ghost: plain with the edge taken off, and nothing at all at rest.
     Added so Button and the icon button carry the same neutral ladder: ghost,
     subtle, plain, raised, meaning the same thing in both. Button had no
     borderless rung before. accent looks like one and is not: it paints
     on-solid text for a coloured backdrop, so on an ordinary page it is
     invisible rather than quiet.

     Transparent at rest rather than the panel's own colour, which is what
     plain paints. On a flat surface the two are identical; over anything that
     is not flat, a ghost is the one that genuinely disappears. From hover on it
     is plain exactly, because a ghost is only a ghost until you touch it. */
  --dk-component-button-ghost-surface-default: transparent;
  /* HOVER AND PRESS ARE THE FAMILY'S OWN, unshifted. Starting a state late at
     REST does not mean running a state behind for the rest of the interaction:
     read one state back and every label is sitting on a fill it was not chosen
     for. Measured on dark warning level 2, where the ladder legitimately flips
     from a light rung to a dark one between rest and hover, a press label
     picked for surface-control-active landed on surface-control-hover at
     2.76:1. ghost and plain now differ from subtle and raised at rest and
     nowhere else, so every state's label answers to the fill it paints. */
  --dk-component-button-ghost-surface-hover: var(--dk-surface-control-hover);
  --dk-component-button-ghost-surface-focus: var(--dk-surface-control-active);
  --dk-component-button-ghost-surface-active: var(--dk-surface-control-active);
  --dk-component-button-ghost-text-default: var(--dk-text-control-default);
  --dk-component-button-ghost-icon-default: var(--dk-icon-control-default);
  --dk-component-button-ghost-text-hover: var(--dk-text-control-hover);
  --dk-component-button-ghost-text-focus: var(--dk-text-control-active);
  --dk-component-button-ghost-text-active: var(--dk-text-control-active);
  --dk-component-button-ghost-icon-hover: var(--dk-icon-control-hover);
  --dk-component-button-ghost-icon-focus: var(--dk-icon-control-active);
  --dk-component-button-ghost-icon-active: var(--dk-icon-control-active);
  --dk-component-button-ghost-ring: var(--dk-border-control-hover);
  --dk-component-button-ghost-surface-disabled: var(--dk-surface-control-disabled);
  --dk-component-button-ghost-text-disabled: var(--dk-text-control-disabled);
  --dk-component-button-ghost-icon-disabled: var(--dk-icon-control-disabled);

  --dk-component-button-plain-border-width: var(--dk-border-width-25);
  --dk-component-button-plain-surface-default: var(--dk-surface-current);
  /* THE LIFT COMES FROM THE CONTROL FAMILY, not from --dk-surface-lifted-*.
     That token tracks the LEVEL but not the TONE: measured on a primary panel
     it stays #f4f5f5, the same grey it is on a white one, which is the "grey
     button on a mint card" the control family exists to fix. Untoned the two
     are byte-identical, so nothing moves on a plain page. The RESTING fill
     stays on --dk-surface-current, because plain is the control that sits flat
     ON the surface and is read by its edge, and that token already follows the
     tone. That is also what keeps plain and raised distinct. */
  --dk-component-button-plain-surface-hover: var(--dk-surface-control-hover);
  --dk-component-button-plain-surface-focus: var(--dk-surface-control-active);
  --dk-component-button-plain-surface-active: var(--dk-surface-control-active);
  --dk-component-button-plain-border-default: var(--dk-border-control-default); /* no resting shadow → the stronger hairline */
  --dk-component-button-plain-border-hover: var(--dk-border-control-hover);
  --dk-component-button-plain-border-focus: var(--dk-border-control-active);
  --dk-component-button-plain-border-active: var(--dk-border-control-active);
  /* Label and glyph take the tone too, via the family's text and icon halves.
     --dk-text-neutral-* tracks level and goes on-solid but stays GREY on a
     tinted panel, which is the same fault the surface had. Untoned these
     resolve to the values those tokens already had. */
  --dk-component-button-plain-text-default: var(--dk-text-control-default);
  --dk-component-button-plain-icon-default: var(--dk-icon-control-default);
  /* Per-state label/icon colour — see the raised block above for the
     which-variants-and-why note. Matters most on plain: its fill moves only
     one ramp position per state, so the text step is what makes the
     feedback read. */
  --dk-component-button-plain-text-hover: var(--dk-text-control-hover);
  --dk-component-button-plain-text-focus: var(--dk-text-control-active);
  --dk-component-button-plain-text-active: var(--dk-text-control-active);
  --dk-component-button-plain-icon-hover: var(--dk-icon-control-hover);
  --dk-component-button-plain-icon-focus: var(--dk-icon-control-active);
  --dk-component-button-plain-icon-active: var(--dk-icon-control-active);
  --dk-component-button-plain-ring: var(--dk-color-neutral-300);
  --dk-component-button-plain-surface-disabled: var(--dk-surface-control-disabled);
  --dk-component-button-plain-border-disabled: var(--dk-border-disabled-subtle);
  --dk-component-button-plain-text-disabled: var(--dk-text-control-disabled);
  --dk-component-button-plain-icon-disabled: var(--dk-icon-control-disabled);

  /* plain · error — the destructive secondary. Julio, 2026-09-12, after seeing
     the shape work in Disko's inspector: a delete sitting in a row of ordinary
     controls should look ordinary until you read it, so the BORDER STAYS
     NEUTRAL at rest and only the label carries the status. Hover and active
     commit, and everything goes red together.

     That is the opposite of outline-error, which is red-bordered from the
     start. Both are correct for their job: outline announces a destructive
     action you are being offered, plain-error is a destructive action sitting
     quietly among its neighbours.

     Disabled is NOT redefined: it is a state, and plain's disabled palette
     already wins over any status (5.0.0). */
  /* ── ghost · error: the destructive lowest-emphasis action. The same ladder
     subtle and plain carry, minus the resting fill and minus the edge, which is
     what ghost is. Transparent at rest with an error label and glyph, then one
     step of the error ramp on hover and two on press, so the button only
     becomes a coloured shape once you touch it.

     This was missing entirely: the playground offered the status and the CSS
     had no rule for it, so selecting error on a ghost button changed nothing.
     Reported. */
  --dk-component-button-ghost-error-surface-default: transparent;
  --dk-component-button-ghost-error-surface-hover: var(--dk-surface-control-hover-on-error-subtle);
  --dk-component-button-ghost-error-surface-focus: var(--dk-surface-control-active-on-error-subtle);
  --dk-component-button-ghost-error-surface-active: var(--dk-surface-control-active-on-error-subtle);
  --dk-component-button-ghost-error-text-default: var(--dk-text-error-default);
  --dk-component-button-ghost-error-icon-default: var(--dk-icon-error-default);
  --dk-component-button-ghost-error-text-hover: var(--dk-text-control-hover-on-error-subtle);
  --dk-component-button-ghost-error-text-focus: var(--dk-text-control-active-on-error-subtle);
  --dk-component-button-ghost-error-text-active: var(--dk-text-control-active-on-error-subtle);
  --dk-component-button-ghost-error-icon-hover: var(--dk-icon-control-hover-on-error-subtle);
  --dk-component-button-ghost-error-icon-focus: var(--dk-icon-control-active-on-error-subtle);
  --dk-component-button-ghost-error-icon-active: var(--dk-icon-control-active-on-error-subtle);
  --dk-component-button-ghost-error-ring: var(--dk-color-error-300);

  --dk-component-button-plain-error-border-default: var(--dk-border-control-default); /* neutral on purpose */
  --dk-component-button-plain-error-border-hover: var(--dk-border-error-hover);
  --dk-component-button-plain-error-border-focus: var(--dk-border-error-focus);
  --dk-component-button-plain-error-border-active: var(--dk-border-error-focus);
  --dk-component-button-plain-error-surface-hover: var(--dk-surface-control-hover-on-error-subtle);
  --dk-component-button-plain-error-surface-focus: var(--dk-surface-control-active-on-error-subtle);
  --dk-component-button-plain-error-surface-active: var(--dk-surface-control-active-on-error-subtle);
  --dk-component-button-plain-error-text-default: var(--dk-text-error-default);
  --dk-component-button-plain-error-icon-default: var(--dk-icon-error-default);
  --dk-component-button-plain-error-text-hover: var(--dk-text-control-hover-on-error-subtle);
  --dk-component-button-plain-error-text-focus: var(--dk-text-control-active-on-error-subtle);
  --dk-component-button-plain-error-text-active: var(--dk-text-control-active-on-error-subtle);
  --dk-component-button-plain-error-icon-hover: var(--dk-icon-control-hover-on-error-subtle);
  --dk-component-button-plain-error-icon-focus: var(--dk-icon-control-active-on-error-subtle);
  --dk-component-button-plain-error-icon-active: var(--dk-icon-control-active-on-error-subtle);
  --dk-component-button-plain-error-ring: var(--dk-color-error-300);
}

/* ── inverse: Forge-only. The neutral family's MAXIMUM-emphasis rung
   (plain = flat → raised = lifted → inverse = full contrast): borrows the
   opposite theme's surface — near-black in light, near-white in dark —
   flipping with the theme. USE-WHEN doctrine (2026-08-18): for contexts
   where semantic colour is unavailable, exhausted, or reserved (CTAs over
   photography, dark hero panels, marketing moments, inverse chrome like
   toasts) — NEVER as an alternative CTA beside a semantic one (a black
   button next to the teal CTA reads as two primaries). Status-agnostic by
   definition — statusing it would just rebuild `default` in the dark
   (design call: alerts keep their outline+status / plain recipe).
   Level-static across surface rungs: near-black clears every light rung
   and near-white every dark rung by construction. ── */
.dk-component-button {
  --dk-component-button-inverse-surface-default: var(--dk-surface-inverse-default);
  --dk-component-button-inverse-surface-hover: var(--dk-surface-inverse-hover);
  --dk-component-button-inverse-surface-focus: var(--dk-surface-inverse-active);
  --dk-component-button-inverse-surface-active: var(--dk-surface-inverse-active);
  --dk-component-button-inverse-text-default: var(--dk-text-inverse-default);
  --dk-component-button-inverse-icon-default: var(--dk-icon-inverse-default);
  --dk-component-button-inverse-ring: var(--dk-color-neutral-300);
  --dk-component-button-inverse-surface-disabled: var(--dk-surface-disabled-subtle);
  --dk-component-button-inverse-text-disabled: var(--dk-text-disabled-subtle);
  --dk-component-button-inverse-icon-disabled: var(--dk-icon-disabled-subtle);
}

/* ══════════════════════════════════════ drift-kit:layer components/link/tokens.css ══════════════════════════════════════ */
/* ============================================================================
   Link: component token collection (--dk-component-link-*)
   ----------------------------------------------------------------------------
   SCOPED TO THE COMPONENT AND TO THE BARE LINK. A bare <a> inside Body,
   Heading, Eyebrow, Alert, Tooltip or Table text has no dk-component-link
   class, so tokens scoped to the class alone would resolve to nothing on it.
   Both selectors carry the same declarations; the bare one is wholly inside
   :where so it adds no specificity.

   INLINE HAS NO TYPE TOKENS, and that is the component. A link in a sentence
   is the sentence's size and weight; only standalone links carry type.
   ============================================================================ */
.dk-component-link,
:where(:is(.dk-component-body, .dk-component-heading, .dk-component-eyebrow, .dk-component-alert, .dk-component-tooltip, .dk-component-table) a:not([class])) {
  --dk-component-link-color-default: var(--dk-text-link-default);
  --dk-component-link-color-hover: var(--dk-text-link-hover);
  --dk-component-link-color-active: var(--dk-text-link-active);
  --dk-component-link-underline-color-default: var(--dk-text-link-underline);
  /* Neutral: grey at rest for footers, legal copy and table meta, and the link
     ramp on hover and active so it still answers the pointer as a link. */
  --dk-component-link-neutral-color-default: var(--dk-text-neutral-default);
  --dk-component-link-neutral-underline-color: var(--dk-border-neutral-hairline);
  /* Visited is a hue shift rather than a muted teal: nothing on the jade ramp
     reads as visited and still clears the page. The underline stays teal so a
     visited link is still plainly a link. */
  --dk-component-link-visited-color: var(--dk-text-neutral-default);
  --dk-component-link-disabled-color: var(--dk-text-disabled-default);

  --dk-component-link-underline-thickness-default: var(--dk-border-width-separator-25);
  --dk-component-link-underline-thickness-hover: var(--dk-border-width-separator-50);
  /* In em so it scales with whatever size the link inherits. */
  --dk-component-link-underline-offset: 0.2em;

  --dk-component-link-small-font-size: var(--dk-font-scale-body-small-text-size);
  --dk-component-link-small-line-height: var(--dk-font-scale-body-small-line-height);
  --dk-component-link-medium-font-size: var(--dk-font-scale-body-medium-text-size);
  --dk-component-link-medium-line-height: var(--dk-font-scale-body-medium-line-height);
  --dk-component-link-large-font-size: var(--dk-font-scale-body-large-text-size);
  --dk-component-link-large-line-height: var(--dk-font-scale-body-large-line-height);
  --dk-component-link-font-weight: var(--dk-primitive-font-weight-medium);
  --dk-component-link-small-icon-size: var(--dk-primitive-scale-4);
  --dk-component-link-medium-icon-size: var(--dk-primitive-scale-4-5);
  --dk-component-link-large-icon-size: var(--dk-primitive-scale-5);
  --dk-component-link-gap: var(--dk-spacing-1-5);
  --dk-component-link-icon-travel: var(--dk-primitive-scale-0-5);

  --dk-component-link-focus-ring-width: var(--dk-primitive-scale-0-5);
  --dk-component-link-focus-ring-offset: var(--dk-primitive-scale-0-5);
  --dk-component-link-focus-ring-radius: var(--dk-border-radius-100);

  --dk-component-link-external-icon-size: 0.875em;
  --dk-component-link-external-icon-gap: 0.15em;
  /* Lucide arrow-up-right, painted through a mask so it takes currentColor. */
  --dk-component-link-external-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");

  --dk-component-link-motion-duration: var(--dk-motion-state-duration);
  --dk-component-link-motion-easing: var(--dk-motion-state-easing);
}

/* ══════════════════════════════════════ drift-kit:layer components/body/tokens.css ══════════════════════════════════════ */
/* ============================================================================
   Body — component token collection (--dk-component-body-*)
   ----------------------------------------------------------------------------
   The body-copy primitive: dk-component-body. Ports component-library's Text
   (src/components/base/v2/primitives/typography/Text) with two changes that
   are the reason it exists here at all:

     1. SURFACE-AWARE. Every colour token below references a Mapped --text-*
        token, and the [data-surface] leg on the selector re-substitutes those
        references inside each surface scope. Neutral and the five statuses
        step per level in tokens/mapped/surface.css (2026-09-07); `default`
        is deliberately fixed — black is black on any grey.
     2. TWO COLOUR AXES. data-color says WHICH palette, data-emphasis says HOW
        STRONG within it. The CL's twelve-value `color` prop mixed palette,
        strength and theme-relation; `pseudoClass` (hover/focus/subtle) is
        gone — text is non-interactive here, and hosts own their label colour.

   Renames vs the CL: white-fixed → white, black-fixed → black,
   default-reverse → inverse, disabled-subtle → the disabled state (5.0.0),
   textStyle="italics" → data-style="italic".

   `id` is `body`, NOT `text`: --text-* is the Mapped colour family and a
   component collection one word apart from it would read as a typo.

   NAMING GRAMMAR (selector-mirror, Components Collection spec § 4):
     --dk-component-body-{color}-{emphasis}-{property}   e.g. --dk-component-body-neutral-subtle-color
   Axes a token does not vary on are omitted: --dk-component-body-error-color (statuses
   have no emphasis axis — their -subtle Mapped tokens are on-fill tints,
   not lower emphasis), --dk-component-body-large-font-size (size axis only),
   --dk-component-body-font-family (no axes).

   SCOPING — .dk-component-body, never :root and no longer the four legs
   [data-theme="light"], [data-theme="dark"], [data-surface], [data-tone].
   var() substitutes where a property is DECLARED, which is what the four legs
   were for: they re-declared the collection on every themed, levelled or toned
   element so the remaps could reach it. Declared on the component instead, it
   is declared where the component is, so the remaps reach it by being the
   nearest ancestors rather than by being re-run. Same answer, and it stops all
   of these inheriting to every element in the document.

   REFERENCE RULES — colours → Mapped; font size / line-height / weight →
   alias font tokens; duration → motion primitive. No raw values.
   Sizes use the NON-responsive body tokens, as the CL does and as the
   collection spec § 5 prescribes (component-owned, constant per breakpoint).
   ============================================================================ */

/* ── Family, motion ─────────────────────────────────────────────────────── */
/* SCOPED TO THE COMPONENT, not to every themed element on the page.

   This block used to carry four legs: [data-theme="light"],
   [data-theme="dark"], [data-surface] and [data-tone]. That put the whole
   collection on <body> and on every panel, and custom properties inherit, so
   all 38 of these reached every element in the document. Across the kit that
   came to 2,958 custom properties on a bare <span>, which is what makes the
   browser's inspector crawl.

   NOTHING IS LOST BY MOVING IT HERE. The four legs existed so the collection
   would re-resolve inside a tone, a level or an inverse panel. Declared on the
   component itself it resolves ON the component, against that element's own
   nearest theme, tone and level, which is the same answer arrived at more
   directly. Proven on Button first: check:button, check:contract,
   check:conformance and check:contrast all pass unchanged, and the last two
   sweep every tone, level and theme. */
.dk-component-body {
  --dk-component-body-font-family: var(--dk-font-family-primary);
  /* The CL eases colour over 0.125s; keeps a theme or surface change from
     snapping. Reduced motion collapses it kit-wide (kit/reduced-motion.css). */

  /* Motion resolves through the ALIAS tier, not the primitive. That is what
     puts these under the prefers-reduced-motion override in
     tokens/alias/motion.css: a component token pointing straight at a
     primitive would keep its full duration with the preference set, which is
     the failure mode the old hand-kept selector list existed to patch. */
  --dk-component-body-transition-duration: var(--dk-motion-state-duration);
}

/* ── Sizes — 20/28 · 18/26 · 16/24 · 14/20 · 12/18, fixed at every breakpoint
   4.0.0 adds the 18px reading rung the ramp used to skip (16 jumped straight to
   20) and moves onto the shared t-shirt vocabulary. WATCH THE RENAME: `large`
   was 20px and is now 18px; the old 20px rung is `xlarge`. That is the one
   value in this release whose meaning changed rather than its name, which is
   why migrations/4.0.0-type-scale.json calls it out on its own line. ── */
.dk-component-body {
  --dk-component-body-xlarge-font-size: var(--dk-font-scale-body-xlarge-text-size);
  --dk-component-body-xlarge-line-height: var(--dk-font-scale-body-xlarge-line-height);
  --dk-component-body-large-font-size: var(--dk-font-scale-body-large-text-size);
  --dk-component-body-large-line-height: var(--dk-font-scale-body-large-line-height);
  --dk-component-body-medium-font-size: var(--dk-font-scale-body-medium-text-size);
  --dk-component-body-medium-line-height: var(--dk-font-scale-body-medium-line-height);
  --dk-component-body-small-font-size: var(--dk-font-scale-body-small-text-size);
  --dk-component-body-small-line-height: var(--dk-font-scale-body-small-line-height);
  --dk-component-body-xsmall-font-size: var(--dk-font-scale-body-xsmall-text-size);
  --dk-component-body-xsmall-line-height: var(--dk-font-scale-body-xsmall-line-height);
}

/* ── Weights — the eight Inter carries ─────────────────────────────────── */
.dk-component-body {
  --dk-component-body-thin-font-weight: var(--dk-primitive-font-weight-thin);
  --dk-component-body-extra-light-font-weight: var(--dk-primitive-font-weight-extra-light);
  --dk-component-body-light-font-weight: var(--dk-primitive-font-weight-light);
  --dk-component-body-regular-font-weight: var(--dk-primitive-font-weight-regular);
  --dk-component-body-medium-font-weight: var(--dk-primitive-font-weight-medium);
  --dk-component-body-semi-bold-font-weight: var(--dk-primitive-font-weight-semi-bold);
  --dk-component-body-bold-font-weight: var(--dk-primitive-font-weight-bold);
  --dk-component-body-extra-bold-font-weight: var(--dk-primitive-font-weight-extra-bold);
}

/* ── Colours ────────────────────────────────────────────────────────────── */
.dk-component-body {
  /* Theme text. Fixed across surface levels by decision (spec A1). */
  --dk-component-body-default-color: var(--dk-text-default);
  /* The opposite theme's text — white in light, deepest neutral in dark.
     Same idea as the Button's `inverse` variant. */
  --dk-component-body-inverse-color: var(--dk-text-inverse-default);
  /* Literal, theme-independent. Only over things that don't flip either:
     photography, brand fills, the accent gradient. */
  --dk-component-body-white-color: var(--dk-text-base-white);
  --dk-component-body-black-color: var(--dk-text-base-black);
  /* Statuses — single emphasis (see header). All five step per surface. */
  --dk-component-body-primary-color: var(--dk-text-primary-default);
  --dk-component-body-success-color: var(--dk-text-success-default);
  --dk-component-body-error-color: var(--dk-text-error-default);
  --dk-component-body-warning-color: var(--dk-text-warning-default);
  --dk-component-body-information-color: var(--dk-text-information-default);
  /* Neutral carries the emphasis axis. Disabled does NOT, since 5.0.0: its two
     Mapped rungs are not two strengths of the same idea but "dim" and
     "unreadable" — on the light page surface -default is 2.88:1 and -subtle is
     1.80:1, and in dark 5.57:1 against 2.33:1. Below 2:1 is not a quieter
     label, it is text nobody can read, and the kit itself never had to choose
     between them: every disabled CONTROL label (Button's six variants,
     Checkbox's description) takes -subtle, and -default was referenced exactly
     once outside the type primitives. Prose keeps the readable rung; controls
     keep theirs. --dk-text-disabled-subtle is untouched — the interactive
     components still read it. */
  --dk-component-body-neutral-default-color: var(--dk-text-neutral-default);
  --dk-component-body-neutral-subtle-color: var(--dk-text-neutral-subtle);
  --dk-component-body-disabled-color: var(--dk-text-disabled-default);
}

/* ── A value in a sentence: __value ───────────────────────────────────────
   A figure or a day set into a line of text and highlighted, read-only: the
   component library's BlockText ("You'll be charged [$224.50] each
   [Friday]"). It shares the sentence triggers' type and their side padding
   (Input's and Select's --*-sentence-* tokens, held equal by
   test/sentence.test.js) but not their margin: the sentence's own spaces set
   it apart, and a margin left a gap before a full stop. So a read-only value
   and an editable one in the same sentence read as siblings; only the trigger
   has a box. On the primary tint
   with primary on-subtle text, which is AA on it where primary default is not. */
.dk-component-body {
  --dk-component-body-value-surface: var(--dk-surface-primary-subtle);
  --dk-component-body-value-color: var(--dk-text-primary-outline);
  --dk-component-body-value-font-weight: var(--dk-primitive-font-weight-bold);
  --dk-component-body-value-font-size: var(--dk-font-body-lg-text-size);
  --dk-component-body-value-line-height: var(--dk-font-body-lg-line-height);
  --dk-component-body-value-padding-block: var(--dk-primitive-scale-1-5);
  --dk-component-body-value-padding-inline: var(--dk-primitive-scale-3);
  --dk-component-body-value-radius: var(--dk-border-radius-100);
}

/* Generated by scripts/build.js: this component's root colours, again on
   each part that resets a status tone, so they resolve against the reset. */
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-body .dk-component-body__value,
.dk-component-body:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-body__value {
  --dk-component-body-default-color: var(--dk-text-default);
  --dk-component-body-primary-color: var(--dk-text-primary-default);
  --dk-component-body-success-color: var(--dk-text-success-default);
  --dk-component-body-error-color: var(--dk-text-error-default);
  --dk-component-body-warning-color: var(--dk-text-warning-default);
  --dk-component-body-information-color: var(--dk-text-information-default);
  --dk-component-body-neutral-default-color: var(--dk-text-neutral-default);
  --dk-component-body-neutral-subtle-color: var(--dk-text-neutral-subtle);
  --dk-component-body-disabled-color: var(--dk-text-disabled-default);
}
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-body .dk-component-body__value,
.dk-component-body:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-body__value {
  --dk-component-body-value-surface: var(--dk-surface-primary-subtle);
  --dk-component-body-value-color: var(--dk-text-primary-outline);
}

/* ═══════════════════════════════════ drift-kit:layer components/heading/tokens.css ═══════════════════════════════════ */
/* ============================================================================
   Heading — component token collection (--dk-component-heading-*)
   ----------------------------------------------------------------------------
   The document-outline tier: Inter, six responsive sizes. Size is DECOUPLED from the
   element (spec D3) — <h2 class="dk-component-heading" data-size="h4"> is an outline-level-2
   heading that LOOKS like an H4, which is the everyday case the CL's `as` prop
   could not express. Sizes stay RESPONSIVE on purpose: display type is what should
   scale with the viewport (Body follow-ups, C3), so these reference Drift's
   --font-heading-h{n} ramp (desktop 48/38/28/26/24/20 → mobile 40/30/24/22/20/18).

   Same grammar and doctrine as Body (components/body/tokens.css):
     --dk-component-heading-{axes in attribute order}-{property}; axes a token does not vary on
     are omitted. Colours → Mapped --text-*; sizes → alias font tokens; weights →
     alias weight tokens; duration → motion primitive. Scoped on the component's own class
     rather than on the four legs it used to carry; see the note above the
     first block for why that is the same answer arrived at more directly.
   ============================================================================ */

/* ── Family, motion ─────────────────────────────────────────────────────── */
/* SCOPED TO THE COMPONENT, not to every themed element on the page.

   This block used to carry four legs: [data-theme="light"],
   [data-theme="dark"], [data-surface] and [data-tone]. That put the whole
   collection on <body> and on every panel, and custom properties inherit, so
   all 40 of these reached every element in the document. Across the kit that
   came to 2,958 custom properties on a bare <span>, which is what makes the
   browser's inspector crawl.

   NOTHING IS LOST BY MOVING IT HERE. The four legs existed so the collection
   would re-resolve inside a tone, a level or an inverse panel. Declared on the
   component itself it resolves ON the component, against that element's own
   nearest theme, tone and level, which is the same answer arrived at more
   directly. Proven on Button first: check:button, check:contract,
   check:conformance and check:contrast all pass unchanged, and the last two
   sweep every tone, level and theme. */
.dk-component-heading {
  --dk-component-heading-font-family: var(--dk-font-family-primary);
  /* Inter ships a real italic face (tokens/brand/fonts.css declares
     font-style: italic at weights 100-900), so data-style="italic" selects a
     drawn italic, not a synthesised slant. Hero deliberately has no style axis:
     Syne ships normal only, and an oblique the browser invents is not a
     typeface decision we get to make. */
  --dk-component-heading-italic-font-style: italic;

  /* Motion resolves through the ALIAS tier, not the primitive. That is what
     puts these under the prefers-reduced-motion override in
     tokens/alias/motion.css: a component token pointing straight at a
     primitive would keep its full duration with the preference set, which is
     the failure mode the old hand-kept selector list existed to patch. */
  --dk-component-heading-transition-duration: var(--dk-motion-state-duration);
}

/* ── Sizes ──────────────────────────────────────────────────────────────── */
.dk-component-heading {
  --dk-component-heading-xxlarge-font-size: var(--dk-font-scale-heading-xxlarge-text-size);
  --dk-component-heading-xxlarge-line-height: var(--dk-font-scale-heading-xxlarge-line-height);
  --dk-component-heading-xlarge-font-size: var(--dk-font-scale-heading-xlarge-text-size);
  --dk-component-heading-xlarge-line-height: var(--dk-font-scale-heading-xlarge-line-height);
  --dk-component-heading-large-font-size: var(--dk-font-scale-heading-large-text-size);
  --dk-component-heading-large-line-height: var(--dk-font-scale-heading-large-line-height);
  --dk-component-heading-medium-font-size: var(--dk-font-scale-heading-medium-text-size);
  --dk-component-heading-medium-line-height: var(--dk-font-scale-heading-medium-line-height);
  --dk-component-heading-small-font-size: var(--dk-font-scale-heading-small-text-size);
  --dk-component-heading-small-line-height: var(--dk-font-scale-heading-small-line-height);
  --dk-component-heading-xsmall-font-size: var(--dk-font-scale-heading-xsmall-text-size);
  --dk-component-heading-xsmall-line-height: var(--dk-font-scale-heading-xsmall-line-height);
  --dk-component-heading-xxsmall-font-size: var(--dk-font-scale-heading-xxsmall-text-size);
  --dk-component-heading-xxsmall-line-height: var(--dk-font-scale-heading-xxsmall-line-height);
}

/* ── Weights ────────────────────────────────────────────────────────────── */
.dk-component-heading {
  --dk-component-heading-thin-font-weight: var(--dk-primitive-font-weight-thin);
  --dk-component-heading-extra-light-font-weight: var(--dk-primitive-font-weight-extra-light);
  --dk-component-heading-light-font-weight: var(--dk-primitive-font-weight-light);
  --dk-component-heading-regular-font-weight: var(--dk-primitive-font-weight-regular);
  --dk-component-heading-medium-font-weight: var(--dk-primitive-font-weight-medium);
  --dk-component-heading-semi-bold-font-weight: var(--dk-primitive-font-weight-semi-bold);
  --dk-component-heading-bold-font-weight: var(--dk-primitive-font-weight-bold);
  --dk-component-heading-extra-bold-font-weight: var(--dk-primitive-font-weight-extra-bold);
  --dk-component-heading-black-font-weight: var(--dk-primitive-font-weight-black);
}

/* ── Colours — identical set and references to Body ───────────────── */
.dk-component-heading {
  --dk-component-heading-default-color: var(--dk-text-default);
  --dk-component-heading-inverse-color: var(--dk-text-inverse-default);
  --dk-component-heading-white-color: var(--dk-text-base-white);
  --dk-component-heading-black-color: var(--dk-text-base-black);
  --dk-component-heading-primary-color: var(--dk-text-primary-default);
  --dk-component-heading-success-color: var(--dk-text-success-default);
  --dk-component-heading-error-color: var(--dk-text-error-default);
  --dk-component-heading-warning-color: var(--dk-text-warning-default);
  --dk-component-heading-information-color: var(--dk-text-information-default);
  --dk-component-heading-neutral-default-color: var(--dk-text-neutral-default);
  --dk-component-heading-neutral-subtle-color: var(--dk-text-neutral-subtle);
  --dk-component-heading-disabled-color: var(--dk-text-disabled-default);
}

/* ══════════════════════════════════════ drift-kit:layer components/hero/tokens.css ══════════════════════════════════════ */
/* ============================================================================
   Hero — component token collection (--dk-component-hero-*)
   ----------------------------------------------------------------------------
   The display tier: Syne (--dk-font-family-secondary) on the same responsive heading
   ramp, eight sizes, four weights (Syne carries 400–800; extra-bold is deliberately
   not exposed — it reads heavy at display sizes and the CL never used it). Karmo's
   own word for this tier — kept over "Display" because Figma and every CL
   consumer say Hero (spec D2).

   Same grammar and doctrine as Body (components/body/tokens.css):
     --dk-component-hero-{axes in attribute order}-{property}; axes a token does not vary on
     are omitted. Colours → Mapped --text-*; sizes → alias font tokens; weights →
     alias weight tokens; duration → motion primitive. Scoped on the component's own class
     rather than on the four legs it used to carry; see the note above the
     first block for why that is the same answer arrived at more directly.
   ============================================================================ */

/* ── Family, motion ─────────────────────────────────────────────────────── */
/* SCOPED TO THE COMPONENT, not to every themed element on the page.

   This block used to carry four legs: [data-theme="light"],
   [data-theme="dark"], [data-surface] and [data-tone]. That put the whole
   collection on <body> and on every panel, and custom properties inherit, so
   all 30 of these reached every element in the document. Across the kit that
   came to 2,958 custom properties on a bare <span>, which is what makes the
   browser's inspector crawl.

   NOTHING IS LOST BY MOVING IT HERE. The four legs existed so the collection
   would re-resolve inside a tone, a level or an inverse panel. Declared on the
   component itself it resolves ON the component, against that element's own
   nearest theme, tone and level, which is the same answer arrived at more
   directly. Proven on Button first: check:button, check:contract,
   check:conformance and check:contrast all pass unchanged, and the last two
   sweep every tone, level and theme. */
.dk-component-hero {
  --dk-component-hero-font-family: var(--dk-font-family-secondary);

  /* Motion resolves through the ALIAS tier, not the primitive. That is what
     puts these under the prefers-reduced-motion override in
     tokens/alias/motion.css: a component token pointing straight at a
     primitive would keep its full duration with the preference set, which is
     the failure mode the old hand-kept selector list existed to patch. */
  --dk-component-hero-transition-duration: var(--dk-motion-state-duration);
}

/* ── Sizes — the DISPLAY ramp, which is Hero's alone (4.0.0) ─────────────
   Until 4.0.0 Hero read --dk-font-heading-*, so the display tier topped out at
   the same 48px as an H1 and ran down to 24px. It now reads the display ramp
   (alias/karmo/font/type-scale.css): 72 · 64 · 56 · 48 · 40 on desktop, scaling
   down two breakpoints, always above the heading tier and never below 32px —
   a display face has no business at reading sizes. */
.dk-component-hero {
  --dk-component-hero-xxlarge-font-size: var(--dk-font-scale-display-xxlarge-text-size);
  --dk-component-hero-xxlarge-line-height: var(--dk-font-scale-display-xxlarge-line-height);
  --dk-component-hero-xlarge-font-size: var(--dk-font-scale-display-xlarge-text-size);
  --dk-component-hero-xlarge-line-height: var(--dk-font-scale-display-xlarge-line-height);
  --dk-component-hero-large-font-size: var(--dk-font-scale-display-large-text-size);
  --dk-component-hero-large-line-height: var(--dk-font-scale-display-large-line-height);
  --dk-component-hero-medium-font-size: var(--dk-font-scale-display-medium-text-size);
  --dk-component-hero-medium-line-height: var(--dk-font-scale-display-medium-line-height);
  --dk-component-hero-small-font-size: var(--dk-font-scale-display-small-text-size);
  --dk-component-hero-small-line-height: var(--dk-font-scale-display-small-line-height);
  /* The three smallest rungs leave the display ramp for Heading's: Syne at
     heading size, for a title that wants the display face without display
     scale. xsmall is Heading large, xxsmall Heading medium and xxxsmall
     Heading small, at every width. */
  --dk-component-hero-xsmall-font-size: var(--dk-font-scale-heading-large-text-size);
  --dk-component-hero-xsmall-line-height: var(--dk-font-scale-heading-large-line-height);
  --dk-component-hero-xxsmall-font-size: var(--dk-font-scale-heading-medium-text-size);
  --dk-component-hero-xxsmall-line-height: var(--dk-font-scale-heading-medium-line-height);
  --dk-component-hero-xxxsmall-font-size: var(--dk-font-scale-heading-small-text-size);
  --dk-component-hero-xxxsmall-line-height: var(--dk-font-scale-heading-small-line-height);
}

/* ── Weights ────────────────────────────────────────────────────────────── */
.dk-component-hero {
  --dk-component-hero-regular-font-weight: var(--dk-primitive-font-weight-regular);
  --dk-component-hero-medium-font-weight: var(--dk-primitive-font-weight-medium);
  --dk-component-hero-semi-bold-font-weight: var(--dk-primitive-font-weight-semi-bold);
  --dk-component-hero-bold-font-weight: var(--dk-primitive-font-weight-bold);
}

/* ── Colours — identical set and references to Body ───────────────── */
.dk-component-hero {
  --dk-component-hero-default-color: var(--dk-text-default);
  --dk-component-hero-inverse-color: var(--dk-text-inverse-default);
  --dk-component-hero-white-color: var(--dk-text-base-white);
  --dk-component-hero-black-color: var(--dk-text-base-black);
  --dk-component-hero-primary-color: var(--dk-text-primary-default);
  --dk-component-hero-success-color: var(--dk-text-success-default);
  --dk-component-hero-error-color: var(--dk-text-error-default);
  --dk-component-hero-warning-color: var(--dk-text-warning-default);
  --dk-component-hero-information-color: var(--dk-text-information-default);
  --dk-component-hero-neutral-default-color: var(--dk-text-neutral-default);
  --dk-component-hero-neutral-subtle-color: var(--dk-text-neutral-subtle);
  --dk-component-hero-disabled-color: var(--dk-text-disabled-default);
}

/* ═══════════════════════════════════ drift-kit:layer components/eyebrow/tokens.css ═══════════════════════════════════ */
/* ============================================================================
   Eyebrow — component token collection (--dk-component-eyebrow-*)
   ----------------------------------------------------------------------------
   Uppercase labels — the CL's Overline, renamed (Julio, 8 Sep). FIXED at 12 / 11 /
   10 px through the Karmo alias override alias/karmo/font/overline-fixed.css:
   Drift's responsive overline rungs are 12 / 10 / 8 px on desktop and 11 / 9 / 8 on
   a phone, and 8 px is what size="small" renders today. Tracking WIDENS as the size
   shrinks (0.08 / 0.10 / 0.12 em — spec D6); the CL had it reversed. Raw em because
   Drift has no letter-spacing primitive. Weight defaults to bold in the base rule.

   Same grammar and doctrine as Body (components/body/tokens.css):
     --dk-component-eyebrow-{axes in attribute order}-{property}; axes a token does not vary on
     are omitted. Colours → Mapped --text-*; sizes → alias font tokens; weights →
     alias weight tokens; duration → motion primitive. Scoped on the component's own class
     rather than on the four legs it used to carry; see the note above the
     first block for why that is the same answer arrived at more directly.
   ============================================================================ */

/* ── Family, motion ─────────────────────────────────────────────────────── */
/* SCOPED TO THE COMPONENT, not to every themed element on the page.

   This block used to carry four legs: [data-theme="light"],
   [data-theme="dark"], [data-surface] and [data-tone]. That put the whole
   collection on <body> and on every panel, and custom properties inherit, so
   all 28 of these reached every element in the document. Across the kit that
   came to 2,958 custom properties on a bare <span>, which is what makes the
   browser's inspector crawl.

   NOTHING IS LOST BY MOVING IT HERE. The four legs existed so the collection
   would re-resolve inside a tone, a level or an inverse panel. Declared on the
   component itself it resolves ON the component, against that element's own
   nearest theme, tone and level, which is the same answer arrived at more
   directly. Proven on Button first: check:button, check:contract,
   check:conformance and check:contrast all pass unchanged, and the last two
   sweep every tone, level and theme. */
.dk-component-eyebrow {
  --dk-component-eyebrow-font-family: var(--dk-font-family-primary);

  /* Motion resolves through the ALIAS tier, not the primitive. That is what
     puts these under the prefers-reduced-motion override in
     tokens/alias/motion.css: a component token pointing straight at a
     primitive would keep its full duration with the preference set, which is
     the failure mode the old hand-kept selector list existed to patch. */
  --dk-component-eyebrow-transition-duration: var(--dk-motion-state-duration);
}

/* ── Sizes ──────────────────────────────────────────────────────────────── */
.dk-component-eyebrow {
  --dk-component-eyebrow-large-font-size: var(--dk-font-overline-lg-text-size);
  --dk-component-eyebrow-large-line-height: var(--dk-font-overline-lg-line-height);
  --dk-component-eyebrow-medium-font-size: var(--dk-font-overline-md-text-size);
  --dk-component-eyebrow-medium-line-height: var(--dk-font-overline-md-line-height);
  --dk-component-eyebrow-small-font-size: var(--dk-font-overline-sm-text-size);
  --dk-component-eyebrow-small-line-height: var(--dk-font-overline-sm-line-height);
  /* Tracking — no Drift primitive exists for letter-spacing; raw em by design. */
  --dk-component-eyebrow-large-letter-spacing: 0.08em;
  --dk-component-eyebrow-medium-letter-spacing: 0.1em;
  --dk-component-eyebrow-small-letter-spacing: 0.12em;
}

/* ── Weights ────────────────────────────────────────────────────────────── */
.dk-component-eyebrow {
  --dk-component-eyebrow-medium-font-weight: var(--dk-primitive-font-weight-medium);
  --dk-component-eyebrow-semi-bold-font-weight: var(--dk-primitive-font-weight-semi-bold);
  --dk-component-eyebrow-bold-font-weight: var(--dk-primitive-font-weight-bold);
}

/* ── Colours — identical set and references to Body ───────────────── */
.dk-component-eyebrow {
  --dk-component-eyebrow-default-color: var(--dk-text-default);
  --dk-component-eyebrow-inverse-color: var(--dk-text-inverse-default);
  --dk-component-eyebrow-white-color: var(--dk-text-base-white);
  --dk-component-eyebrow-black-color: var(--dk-text-base-black);
  --dk-component-eyebrow-primary-color: var(--dk-text-primary-default);
  --dk-component-eyebrow-success-color: var(--dk-text-success-default);
  --dk-component-eyebrow-error-color: var(--dk-text-error-default);
  --dk-component-eyebrow-warning-color: var(--dk-text-warning-default);
  --dk-component-eyebrow-information-color: var(--dk-text-information-default);
  --dk-component-eyebrow-neutral-default-color: var(--dk-text-neutral-default);
  --dk-component-eyebrow-neutral-subtle-color: var(--dk-text-neutral-subtle);
  --dk-component-eyebrow-disabled-color: var(--dk-text-disabled-default);
}

/* ══════════════════════════════════════ drift-kit:layer components/icon/tokens.css ══════════════════════════════════════ */
/* ============================================================================
   Icon — component token collection (--dk-component-icon-*)
   ----------------------------------------------------------------------------
   The icon primitive is dk-component-icon with the --dk-component-icon-* collection. Until 2026-09-09
   it was dk-component-symbol, because --icon-* is the Mapped icon-colour family and a
   component collection under the same prefix could not be told apart from the
   palette. The TIER MARKER settled that for every component at once: component
   collections are --dk-component-{component}-*, the system tiers (brand, alias, mapped,
   responsive, dynamic) stay unmarked, so --dk-component-icon-error-color and
   --dk-icon-error-default read as two tiers, never as a typo.

   Icons behave like text (Julio, 8 Sep): the same colour grammar, sizes named
   like the body rungs and FIXED like them, weight = stroke width, and an
   unsized icon is 1em — a glyph in the text it sits in.

   Sizes pair with body copy: 12 for chips beside extra-small, 16 beside
   small (14), 20 beside medium (16), 24 beside large (20) and headings, 32 for
   empty states. Stroke widths are raw unitless numbers on the 24-unit viewBox
   every set shares — Lucide's native 2, one step lighter, one step bolder; no
   Drift primitive exists for stroke, so raw by necessity (the CL's responsive
   rem strokes with non-scaling-stroke made a 12px icon as heavy as a 32px one).

   Scoped on .dk-component-icon, as every collection is since the four legs
   were retired; see the note above the first block.
   ============================================================================ */

/* ── Motion, stroke ─────────────────────────────────────────────────────── */
/* SCOPED TO THE COMPONENT, not to every themed element on the page.

   This block used to carry four legs: [data-theme="light"],
   [data-theme="dark"], [data-surface] and [data-tone]. That put the whole
   collection on <body> and on every panel, and custom properties inherit, so
   all 28 of these reached every element in the document. Across the kit that
   came to 2,958 custom properties on a bare <span>, which is what makes the
   browser's inspector crawl.

   NOTHING IS LOST BY MOVING IT HERE. The four legs existed so the collection
   would re-resolve inside a tone, a level or an inverse panel. Declared on the
   component itself it resolves ON the component, against that element's own
   nearest theme, tone and level, which is the same answer arrived at more
   directly. Proven on Button first: check:button, check:contract,
   check:conformance and check:contrast all pass unchanged, and the last two
   sweep every tone, level and theme. */
.dk-component-icon {

  /* Motion resolves through the ALIAS tier, not the primitive. That is what
     puts these under the prefers-reduced-motion override in
     tokens/alias/motion.css: a component token pointing straight at a
     primitive would keep its full duration with the preference set, which is
     the failure mode the old hand-kept selector list existed to patch. */
  --dk-component-icon-transition-duration: var(--dk-motion-state-duration);
  --dk-component-icon-extra-light-stroke-width: 1;
  --dk-component-icon-light-stroke-width: 1.5;
  --dk-component-icon-regular-stroke-width: 2;
  --dk-component-icon-bold-stroke-width: 2.5;
}

/* ── Sizes — fixed, on the scale primitives ─────────────────────────────── */
.dk-component-icon {
  /* Sizes are the PIXEL NUMBER, not a t-shirt. Figma has always called these 12
     and 24, so the kit now says the same thing and there is no translation step
     between a design and its markup. It also means a new rung slots in without
     renaming its neighbours, which is what "extra-extra-large" would have cost.
     Every value is an existing scale primitive; nothing new was invented. */
  --dk-component-icon-12-size: var(--dk-primitive-scale-3);
  --dk-component-icon-14-size: var(--dk-primitive-scale-3-5);
  --dk-component-icon-16-size: var(--dk-primitive-scale-4);
  --dk-component-icon-20-size: var(--dk-primitive-scale-5);
  --dk-component-icon-24-size: var(--dk-primitive-scale-6);
  --dk-component-icon-28-size: var(--dk-primitive-scale-7);
  --dk-component-icon-32-size: var(--dk-primitive-scale-8);
  --dk-component-icon-40-size: var(--dk-primitive-scale-10);
  --dk-component-icon-48-size: var(--dk-primitive-scale-12);
}

/* ── Colours — the Mapped icon family, same names as the text collections ── */
.dk-component-icon {
  --dk-component-icon-default-color: var(--dk-icon-default-body);
  --dk-component-icon-inverse-color: var(--dk-icon-inverse-default);
  --dk-component-icon-white-color: var(--dk-icon-base-white);
  --dk-component-icon-black-color: var(--dk-icon-base-black);
  --dk-component-icon-primary-color: var(--dk-icon-primary-default);
  --dk-component-icon-success-color: var(--dk-icon-success-default);
  --dk-component-icon-error-color: var(--dk-icon-error-default);
  --dk-component-icon-warning-color: var(--dk-icon-warning-default);
  --dk-component-icon-information-color: var(--dk-icon-information-default);
  --dk-component-icon-neutral-default-color: var(--dk-icon-neutral-default);
  --dk-component-icon-neutral-subtle-color: var(--dk-icon-neutral-subtle);
  --dk-component-icon-disabled-color: var(--dk-icon-disabled-default);
}

/* ═════════════════════════════════ drift-kit:layer components/icon-tile/tokens.css ═════════════════════════════════ */
/* ============================================================================
   Icon tile: component token collection (--dk-component-icon-tile-*)
   ----------------------------------------------------------------------------
   A glyph on a small coloured square: the component library's IconBlock, and
   the tile Choice card used to draw by hand.

   ONE SHAPE, ONE RADIUS. IconBlock has a 48px square and a 64px circle, each
   welded to its own size, so a page that used both spoke two visual languages.
   Here every size and every variant wears the same corner, and that corner
   follows the theme's corner tier like everything else (a container's corner, so plush under round).

   SIZES ARE THE PIXEL NUMBER, as Icon's are, and the glyph steps with the tile
   on Icon's own rungs so the air around it stays in proportion:
     tile  24  32  40  48  56  64
     glyph 12  14  16  20  24  28
   48 with a 20 glyph is the design's tile and the default.

   THE SOLID FILLS ARE THE 600 RUNG, as Tag's are, not the shared 500 default.
   White on a 500 fill is 2.82:1 on primary and about 2:1 on warning, under
   the 3:1 a graphical object carries; on 600 every status clears it, measured
   in Chrome (primary 4.25, error 4.72, information 5.05, warning 3.57). Success
   is jade here as everywhere, so its fill is primary's. Neutral and the hues
   use the system's own fills, which already clear it (neutral 3.75 light,
   6.88 dark; hues 4.21 to 4.46).
   ============================================================================ */
.dk-component-icon-tile {
  --dk-component-icon-tile-radius: var(--dk-border-radius-200);

  --dk-component-icon-tile-24-size: var(--dk-primitive-scale-6);
  --dk-component-icon-tile-24-icon-size: var(--dk-primitive-scale-3);
  --dk-component-icon-tile-32-size: var(--dk-primitive-scale-8);
  --dk-component-icon-tile-32-icon-size: var(--dk-primitive-scale-3-5);
  --dk-component-icon-tile-40-size: var(--dk-primitive-scale-10);
  --dk-component-icon-tile-40-icon-size: var(--dk-primitive-scale-4);
  --dk-component-icon-tile-48-size: var(--dk-primitive-scale-12);
  --dk-component-icon-tile-48-icon-size: var(--dk-primitive-scale-5);
  --dk-component-icon-tile-56-size: var(--dk-primitive-scale-14);
  --dk-component-icon-tile-56-icon-size: var(--dk-primitive-scale-6);
  --dk-component-icon-tile-64-size: var(--dk-primitive-scale-16);
  --dk-component-icon-tile-64-icon-size: var(--dk-primitive-scale-7);

  --dk-component-icon-tile-primary-solid: var(--dk-surface-primary-mark);
  --dk-component-icon-tile-success-solid: var(--dk-surface-success-mark);
  --dk-component-icon-tile-error-solid: var(--dk-surface-error-mark);
  --dk-component-icon-tile-warning-solid: var(--dk-surface-warning-mark);
  --dk-component-icon-tile-information-solid: var(--dk-surface-information-mark);
}

/* ═══════════════════════════ drift-kit:layer components/section-heading/tokens.css ═══════════════════════════ */
/* ============================================================================
   Section heading: component token collection (--dk-component-section-heading-*)
   ----------------------------------------------------------------------------
   An optional glyph beside a title and a line under it, heading a list or a
   card from outside. The component library had this twice, SectionHeading and
   PageHeading, the same anatomy at two scales; here they are sizes of one.

     small   the CL SectionHeading, and every use of it in the confirmation
             steps: a 24 glyph, a body-md semibold title, a body-sm line
     medium  Box's own header type, for a heading over a group of cards:
             a 28 glyph, a body-lg semibold title, a body-md line
     large   the CL PageHeading: the display family (Syne), bold, at 34
             on 42 with a 32 glyph and an 18 line (body large)

   The glyph is primary, as the CL's benefits heading wore it; data-tone
   "neutral" is the fees heading's grey. Colours are mapped, so a heading on a
   tone or a surface level follows it.
   ============================================================================ */
.dk-component-section-heading {
  --dk-component-section-heading-gap: var(--dk-primitive-scale-2);
  --dk-component-section-heading-content-gap: var(--dk-primitive-scale-0-5);

  --dk-component-section-heading-title-color: var(--dk-text-default);
  --dk-component-section-heading-title-font-family: var(--dk-font-family-primary);
  --dk-component-section-heading-title-font-weight: var(--dk-primitive-font-weight-semi-bold);
  --dk-component-section-heading-description-color: var(--dk-text-neutral-default);
  --dk-component-section-heading-description-font-weight: var(--dk-primitive-font-weight-regular);
  --dk-component-section-heading-icon-color: var(--dk-icon-primary-default);
  --dk-component-section-heading-icon-neutral-color: var(--dk-icon-neutral-default);

  --dk-component-section-heading-small-icon-size: var(--dk-primitive-scale-6);
  --dk-component-section-heading-small-title-font-size: var(--dk-font-body-md-text-size);
  --dk-component-section-heading-small-title-line-height: var(--dk-font-body-md-line-height);
  --dk-component-section-heading-small-description-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-section-heading-small-description-line-height: var(--dk-font-body-sm-line-height);

  --dk-component-section-heading-medium-icon-size: var(--dk-primitive-scale-7);
  --dk-component-section-heading-medium-title-font-size: var(--dk-font-body-lg-text-size);
  --dk-component-section-heading-medium-title-line-height: var(--dk-font-body-lg-line-height);
  --dk-component-section-heading-medium-description-font-size: var(--dk-font-body-md-text-size);
  --dk-component-section-heading-medium-description-line-height: var(--dk-font-body-md-line-height);

  --dk-component-section-heading-large-gap: var(--dk-primitive-scale-3);
  --dk-component-section-heading-large-content-gap: var(--dk-primitive-scale-1);
  /* 34 on 42 (Julio): heading xlarge's 40 read too big beside a page's other
     headings. No rung is 34, so it is two primitives; fixed, not responsive. */
  --dk-component-section-heading-large-icon-size: var(--dk-primitive-scale-8);
  --dk-component-section-heading-large-title-font-family: var(--dk-font-family-secondary);
  --dk-component-section-heading-large-title-font-weight: var(--dk-primitive-font-weight-bold);
  --dk-component-section-heading-large-title-font-size: calc(var(--dk-primitive-scale-8) + var(--dk-primitive-scale-0-5));
  --dk-component-section-heading-large-title-line-height: calc(var(--dk-primitive-scale-10) + var(--dk-primitive-scale-0-5));
  --dk-component-section-heading-large-description-font-size: var(--dk-font-scale-body-large-text-size);
  --dk-component-section-heading-large-description-line-height: var(--dk-font-scale-body-large-line-height);
}

/* ═══════════════════════════════ drift-kit:layer components/detail-list/tokens.css ═══════════════════════════════ */
/* ============================================================================
   Detail list: component token collection (--dk-component-detail-list-*)
   ----------------------------------------------------------------------------
   Rows of a glyph, a title and a line, with a value at the end: the component
   library's DetailRow, as the list it was always used as (the benefits and the
   fees in the subscription confirmation).

   THE CL'S NUMBERS AT MEDIUM: 16 above and below a row, 16 between its parts,
   a body-md bold title over a body-sm neutral line, a body-md bold value with
   a body-sm bold neutral note. Small and large step the padding, the gap and
   the type together, so a size is one attribute: small is a body-sm title
   over a body xsmall line, large a body-lg title over a body-md line.

   THE HAIRLINE IS THE KIT'S CURRENT ONE (--dk-border-hairline-current), the
   one Box, Table and Accordion draw, so a list on a tone or a surface level
   keeps a hairline that reads there.
   ============================================================================ */
.dk-component-detail-list {
  --dk-component-detail-list-divider: var(--dk-border-hairline-current);
  --dk-component-detail-list-divider-width: var(--dk-border-width-separator-25);
  --dk-component-detail-list-font-family: var(--dk-font-family-primary);
  --dk-component-detail-list-body-gap: var(--dk-primitive-scale-1);
  /* below this the aside wraps under the body rather than squeezing it */
  --dk-component-detail-list-body-min-width: var(--dk-primitive-scale-40);
  --dk-component-detail-list-actions-gap: var(--dk-primitive-scale-2);

  --dk-component-detail-list-small-padding-block: var(--dk-primitive-scale-3);
  --dk-component-detail-list-small-gap: var(--dk-primitive-scale-3);
  --dk-component-detail-list-small-body-gap: var(--dk-primitive-scale-0-5);
  --dk-component-detail-list-medium-padding-block: var(--dk-primitive-scale-4);
  --dk-component-detail-list-medium-gap: var(--dk-primitive-scale-4);
  --dk-component-detail-list-large-padding-block: var(--dk-primitive-scale-5);
  --dk-component-detail-list-large-gap: var(--dk-primitive-scale-5);

  --dk-component-detail-list-title-color: var(--dk-text-default);
  --dk-component-detail-list-title-font-weight: var(--dk-primitive-font-weight-bold);
  --dk-component-detail-list-title-font-size: var(--dk-font-body-md-text-size);
  --dk-component-detail-list-title-line-height: var(--dk-font-body-md-line-height);
  --dk-component-detail-list-description-color: var(--dk-text-neutral-default);
  --dk-component-detail-list-description-font-weight: var(--dk-primitive-font-weight-regular);
  --dk-component-detail-list-description-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-detail-list-description-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-detail-list-small-title-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-detail-list-small-title-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-detail-list-small-description-font-size: var(--dk-font-scale-body-xsmall-text-size);
  --dk-component-detail-list-small-description-line-height: var(--dk-font-scale-body-xsmall-line-height);
  --dk-component-detail-list-large-title-font-size: var(--dk-font-body-lg-text-size);
  --dk-component-detail-list-large-title-line-height: var(--dk-font-body-lg-line-height);
  --dk-component-detail-list-large-description-font-size: var(--dk-font-body-md-text-size);
  --dk-component-detail-list-large-description-line-height: var(--dk-font-body-md-line-height);

  --dk-component-detail-list-value-color: var(--dk-text-default);
  --dk-component-detail-list-value-font-weight: var(--dk-primitive-font-weight-bold);
  --dk-component-detail-list-note-color: var(--dk-text-neutral-default);
  --dk-component-detail-list-note-font-weight: var(--dk-primitive-font-weight-bold);
}

/* ═════════════════════════════ drift-kit:layer components/price-summary/tokens.css ═════════════════════════════ */
/* ============================================================================
   Price summary: component token collection (--dk-component-price-summary-*)
   ----------------------------------------------------------------------------
   Labelled amounts and their total: the component library's PriceSummary, the
   bond summary in the subscription confirmation ("SUBTOTAL", "CREDIT", then
   "TOTAL $1,200.00 AUD including GST").

   THE CL'S NUMBERS: 6 above and below a row and 12 the total's; the label an
   overline (large, bold, uppercase) in neutral; the amount body-md bold in
   neutral, a credit in an AA success green; the total's label body-sm bold,
   its amount heading-h6 bold, both in the default text colour, and a body-sm
   neutral note under the amount.

   The hairline is the kit's current one, as Detail list's and Box's are, not
   the CL's disabled-subtle grey: a summary on a tone keeps a line that reads.
   Tracking has no primitive (Eyebrow's note): the overline's raw em, the CL's
   0.6px at 12px.
   ============================================================================ */
.dk-component-price-summary {
  --dk-component-price-summary-font-family: var(--dk-font-family-primary);
  --dk-component-price-summary-divider: var(--dk-border-hairline-current);
  --dk-component-price-summary-divider-width: var(--dk-border-width-separator-25);
  --dk-component-price-summary-row-gap: var(--dk-primitive-scale-4);
  --dk-component-price-summary-row-padding-block: var(--dk-primitive-scale-1-5);
  --dk-component-price-summary-total-padding-block: var(--dk-primitive-scale-3);

  --dk-component-price-summary-label-font-size: var(--dk-font-overline-lg-text-size);
  --dk-component-price-summary-label-line-height: var(--dk-font-overline-lg-line-height);
  --dk-component-price-summary-label-font-weight: var(--dk-primitive-font-weight-bold);
  --dk-component-price-summary-label-letter-spacing: 0.05em;
  --dk-component-price-summary-label-color: var(--dk-text-neutral-default);

  --dk-component-price-summary-amount-font-size: var(--dk-font-body-md-text-size);
  --dk-component-price-summary-amount-line-height: var(--dk-font-body-md-line-height);
  --dk-component-price-summary-amount-font-weight: var(--dk-primitive-font-weight-bold);
  --dk-component-price-summary-amount-color: var(--dk-text-neutral-default);
  /* The brand tone (Julio, 12 Oct): primary 500 in light, 400 in dark. Under
     AA on white by a branding decision; a credit is never colour alone, it
     carries its minus sign. It was success on-subtle (700 / 200). */
  --dk-component-price-summary-credit-color: var(--dk-text-primary-brand);

  --dk-component-price-summary-total-label-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-price-summary-total-label-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-price-summary-total-label-color: var(--dk-text-default);
  --dk-component-price-summary-total-amount-font-size: var(--dk-font-heading-h6-text-size);
  --dk-component-price-summary-total-amount-line-height: var(--dk-font-heading-h6-line-height);
  --dk-component-price-summary-total-amount-color: var(--dk-text-default);

  --dk-component-price-summary-note-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-price-summary-note-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-price-summary-note-font-weight: var(--dk-primitive-font-weight-regular);
  --dk-component-price-summary-note-color: var(--dk-text-neutral-default);
}

/* ════════════════════════════════════ drift-kit:layer components/avatar/tokens.css ════════════════════════════════════ */
/* ============================================================================
   Avatar: component token collection (--dk-component-avatar-*)
   ----------------------------------------------------------------------------
   A person, as a round picture or their initials. Forge drew this twice by
   hand (the rail's 32px chip and the bottom bar's 22px one), each with the
   same fix for the same bug: the initials disc behind a loaded photo fringes
   through its antialiased rim as a coloured sliver. Here that fix is the
   component's, once.

   SIZES ARE FIXED, like every component size in the kit, so a phone's avatar
   is not a smaller one, and named by the pixel number, as Icon's and Icon
   tile's are. The initials step with the disc so they keep the same share of it: 24/10, 32/12, 40/14, 48/16.
   32 is the default, the sidebar's user row.

   THE FILL IS PRIMARY SUBTLE with primary on-subtle initials, the pairing Tag
   and Icon tile use, so it reads at AA on its tint in both themes. Solid is the
   Forge rail's look: primary 600 with white, which clears 4.5:1.
   ============================================================================ */
.dk-component-avatar {
  --dk-component-avatar-radius: var(--dk-border-radius-round-fixed);
  --dk-component-avatar-24-size: var(--dk-primitive-scale-6);
  --dk-component-avatar-24-font-size: var(--dk-primitive-scale-2-5);
  --dk-component-avatar-32-size: var(--dk-primitive-scale-8);
  --dk-component-avatar-32-font-size: var(--dk-primitive-scale-3);
  --dk-component-avatar-40-size: var(--dk-primitive-scale-10);
  --dk-component-avatar-40-font-size: var(--dk-primitive-scale-3-5);
  --dk-component-avatar-48-size: var(--dk-primitive-scale-12);
  --dk-component-avatar-48-font-size: var(--dk-primitive-scale-4);
  --dk-component-avatar-font-family: var(--dk-font-family-primary);
  --dk-component-avatar-font-weight: var(--dk-primitive-font-weight-bold);
  --dk-component-avatar-letter-spacing: 0.02em;

  --dk-component-avatar-subtle-surface: var(--dk-surface-primary-subtle);
  --dk-component-avatar-subtle-text: var(--dk-text-primary-on-subtle);
  --dk-component-avatar-solid-surface: var(--dk-color-primary-600);
  --dk-component-avatar-solid-text: var(--dk-text-base-white);
  /* Ringed: the primary default fill, white initials, a primary 200 ring. */
  --dk-component-avatar-ringed-surface: var(--dk-surface-primary-default);
  --dk-component-avatar-ringed-text: var(--dk-text-base-white);
  --dk-component-avatar-ringed-ring: var(--dk-color-primary-200);
  --dk-component-avatar-ringed-ring-width: var(--dk-border-width-100);
  /* THE EDGE IS THE FILL'S OWN FAMILY (Julio, 12 Oct): the fill mixed toward
     its initials' colour, so a primary-subtle avatar has a primary-subtle
     edge, a hue its hue's, and either follows the surface level and theme its
     fill follows. Solid mixes toward black instead, for a deeper rim. A
     loaded photo keeps a neutral hairline, so a white photo on a white page
     still has an outline. Inset, so it never adds to the size. */
  --dk-component-avatar-ring: var(--dk-border-raised-default);
  --dk-component-avatar-edge-mix: 22%;
  --dk-component-avatar-solid-mix-to: var(--dk-color-base-black);
  /* An <a> or <button> avatar: hover and press deepen the fill, and the edge
     with it, a step and two steps toward the same colour. */
  --dk-component-avatar-hover-mix: 10%;
  --dk-component-avatar-active-mix: 18%;
  /* A photo hides the fill, so a photo that does something steps by a veil
     over the picture instead: faint on hover, a little more on press. */
  --dk-component-avatar-photo-hover: color-mix(in srgb, var(--dk-color-base-black) 10%, transparent);
  --dk-component-avatar-photo-active: color-mix(in srgb, var(--dk-color-base-black) 18%, transparent);
  --dk-component-avatar-focus-ring: var(--dk-border-field-focus);
  --dk-component-avatar-focus-ring-width: var(--dk-border-width-50);
  --dk-component-avatar-transition-duration: var(--dk-motion-state-duration);

  --dk-component-avatar-fade-duration: var(--dk-motion-enter-duration);
  --dk-component-avatar-fade-easing: var(--dk-motion-enter-easing);
}
/* Ringed in a dark page (11 Nov 2026, Julio): the fill a step darker
   (primary 600) and the ring the subtle primary border, so it sits on a dark
   page rather than glowing. The kit's per-theme pattern: gated to the
   NEAREST theme (a light page inside a dark one keeps light), the guard in
   :where() so it adds no weight; an avatar carrying the dark theme itself
   takes it too. */
[data-theme="dark"] .dk-component-avatar:where(:not([data-theme="light"], [data-theme="dark"] [data-theme="light"] *)),
.dk-component-avatar[data-theme="dark"] {
  --dk-component-avatar-ringed-surface: var(--dk-color-primary-600);
  --dk-component-avatar-ringed-ring: var(--dk-border-primary-subtle);
}

/* ══════════════════════════════════════ drift-kit:layer components/logo/tokens.css ══════════════════════════════════════ */
/* ============================================================================
   Logo — component token collection (--dk-component-logo-*)
   ----------------------------------------------------------------------------
   The CL marks, LogoSymbol and LogoSymbolText, as one component with a lockup
   switch. Every path is one of two ROLES, which is how CL painted them:
   secondary (CL logoPath1, the dark letterforms) and primary (CL logoPath2,
   the brand colour). A mode says which mapped logo token each role takes.
   ============================================================================ */
.dk-component-logo {
  --dk-component-logo-default-secondary: var(--dk-logo-secondary-default);
  --dk-component-logo-default-primary: var(--dk-logo-primary-default);
  --dk-component-logo-reverse-secondary: var(--dk-logo-tertiary-default);
  --dk-component-logo-reverse-primary: var(--dk-logo-primary-default);
  --dk-component-logo-neutral-secondary: var(--dk-logo-neutral-subtle);
  --dk-component-logo-neutral-primary: var(--dk-logo-neutral-default);
  /* Heights for data-size. The width follows the vector's own aspect ratio;
     with no size the logo fills its container's width, which is CL's only
     behaviour. */
  --dk-component-logo-small-height: var(--dk-primitive-scale-6);
  --dk-component-logo-medium-height: var(--dk-primitive-scale-8);
  --dk-component-logo-large-height: var(--dk-primitive-scale-12);
  --dk-component-logo-xlarge-height: var(--dk-primitive-scale-16);
}

/* ═══════════════════════════ drift-kit:layer components/loading-spinner/tokens.css ═══════════════════════════ */
/* ============================================================================
   Loading spinner — component token collection (--dk-component-loading-spinner-*)
   ----------------------------------------------------------------------------
   CL's LoadingSpinner: the brand symbol inside a sweeping arc. Values are CL's.
   Durations use the motion tier where CL's number matches one exactly and a
   component token otherwise; kit/reduced-motion.css zeroes the component ones,
   except the spin, which is the only sign that work is happening.
   ============================================================================ */
.dk-component-loading-spinner {
  --dk-component-loading-spinner-color: var(--dk-border-primary-default);
  /* Grayscale, for a spinner that should not draw the eye: a table loading,
     a panel refreshing. The glyph's own neutral, so it reads as a mark. */
  --dk-component-loading-spinner-neutral-color: var(--dk-icon-neutral-default);
  /* THE RING ON ITS OWN (data-variant="ring"), for page and content loading
     and inside buttons. Each rung's diameter is the symbol variant's logo size
     at the same rung; xsmall is ring-only, sized for a button or a line of
     text, where the symbol would be too small to read. */
  /* Where the arc's tail begins, as a share of the turn: transparent before
     it, fading up to the colour at the head. CL's 65% leaves a 35% tail, which
     suits the symbol's company; the ring on its own reads better with more
     tail, so it starts at 40% (a 60% sweep). */
  /* THE MESSAGE under the spinner, "Loading reports": DriveIQ's LoadingScreen
     values, 16px medium neutral text 20px below. */
  --dk-component-loading-spinner-message-gap: var(--dk-primitive-scale-5);
  --dk-component-loading-spinner-message-font-size: var(--dk-font-body-md-text-size);
  --dk-component-loading-spinner-message-line-height: var(--dk-font-body-md-line-height);
  --dk-component-loading-spinner-message-font-weight: var(--dk-primitive-font-weight-medium);
  --dk-component-loading-spinner-message-color: var(--dk-text-neutral-default);
  --dk-component-loading-spinner-message-max-width: 400px;
  --dk-component-loading-spinner-tail-start: 65%;
  --dk-component-loading-spinner-ring-tail-start: 40%;
  --dk-component-loading-spinner-ring-xsmall-size: var(--dk-primitive-scale-4);
  --dk-component-loading-spinner-ring-xsmall-stroke: var(--dk-primitive-scale-0-5);
  --dk-component-loading-spinner-ring-small-size: var(--dk-primitive-scale-6);
  --dk-component-loading-spinner-ring-medium-size: var(--dk-primitive-scale-10);
  --dk-component-loading-spinner-ring-large-size: var(--dk-primitive-scale-16);
  --dk-component-loading-spinner-small-logo-size: var(--dk-primitive-scale-6);
  --dk-component-loading-spinner-small-gap: var(--dk-primitive-scale-2);
  --dk-component-loading-spinner-small-stroke: var(--dk-primitive-scale-0-75);
  --dk-component-loading-spinner-medium-logo-size: var(--dk-primitive-scale-10);
  --dk-component-loading-spinner-medium-gap: var(--dk-primitive-scale-3);
  --dk-component-loading-spinner-medium-stroke: var(--dk-primitive-scale-1);
  --dk-component-loading-spinner-large-logo-size: var(--dk-primitive-scale-16);
  --dk-component-loading-spinner-large-gap: var(--dk-primitive-scale-5);
  --dk-component-loading-spinner-large-stroke: var(--dk-primitive-scale-1-5);
  --dk-component-loading-spinner-spin-duration: 1s;
  /* The ring on its own turns faster: its longer tail makes each turn feel
     slower, and there is no mark in the middle to hold the eye. */
  --dk-component-loading-spinner-ring-spin-duration: 0.8s;
  --dk-component-loading-spinner-enter-duration: var(--dk-motion-enter-duration);
  --dk-component-loading-spinner-exit-duration: var(--dk-motion-exit-duration);
  --dk-component-loading-spinner-exit-delay: 0.15s;
  --dk-component-loading-spinner-fade-duration: var(--dk-motion-enter-duration);
  --dk-component-loading-spinner-fade-delay: 0.3s;
  --dk-component-loading-spinner-enter-easing: cubic-bezier(0.39, 1.63, 0.55, 1.01);
  --dk-component-loading-spinner-exit-easing: cubic-bezier(0.45, -0.01, 0.61, -0.63);
}

/* ════════════════════════════════════ drift-kit:layer components/shield/tokens.css ════════════════════════════════════ */
/* ============================================================================
   Shield — component token collection (--dk-component-shield-*)
   ----------------------------------------------------------------------------
   CL IllustrationDynamicShield: a shield on a disc that scales in, shakes on
   error, and pulses a tick in on success. Values and curves are CL's.
   ============================================================================ */
.dk-component-shield {
  --dk-component-shield-size: var(--dk-spacing-32);
  --dk-component-shield-disc: var(--dk-surface-primary-subtle);
  --dk-component-shield-body: var(--dk-surface-primary-default);
  --dk-component-shield-glyph: var(--dk-surface-primary-subtle);
  --dk-component-shield-check: var(--dk-icon-base-white);
  --dk-component-shield-glyph-scale: 1.25;
  --dk-component-shield-enter-duration: 0.65s;
  --dk-component-shield-enter-delay: 0.2s;
  --dk-component-shield-enter-easing: cubic-bezier(0.39, 1.63, 0.55, 1.01);
  --dk-component-shield-success-duration: 0.65s;
  --dk-component-shield-check-duration: 0.8s;
  --dk-component-shield-check-delay: 0.1s;
  --dk-component-shield-error-duration: 0.8s;
  --dk-component-shield-error-easing: cubic-bezier(0.36, 0.07, 0.19, 0.97);
  --dk-component-shield-glyph-fade: var(--dk-motion-enter-duration);
}

/* ══════════════════════════════ drift-kit:layer components/illustration/tokens.css ══════════════════════════════ */
/* ============================================================================
   Illustration: component token collection (--dk-component-illustration-*)
   ----------------------------------------------------------------------------
   The kit's drawn art, painted from tokens so it follows the theme and the
   brand. cards (11 Nov 2026): the Payment Methods stack, three cards fanned,
   with the values MyKarmo's high fidelity draws them in today. Each layer has
   a body and an edge gradient (start to end); the parts every card shares are
   one colour each. Light lightens the cards behind the front one; dark sinks
   them.
   ============================================================================ */
.dk-component-illustration {
  /* The width it takes when nothing sizes it; the height follows the art. */
  --dk-component-illustration-size: var(--dk-spacing-fixed-12);

  --dk-component-illustration-cards-front-body-start: var(--dk-color-primary-500);
  --dk-component-illustration-cards-front-body-end: var(--dk-color-primary-700);
  --dk-component-illustration-cards-front-edge-start: var(--dk-color-primary-600);
  --dk-component-illustration-cards-front-edge-end: var(--dk-color-primary-800);
  --dk-component-illustration-cards-middle-body-start: var(--dk-color-primary-300);
  --dk-component-illustration-cards-middle-body-end: var(--dk-color-primary-500);
  --dk-component-illustration-cards-middle-edge-start: var(--dk-color-primary-400);
  --dk-component-illustration-cards-middle-edge-end: var(--dk-color-primary-600);
  --dk-component-illustration-cards-back-body-start: var(--dk-color-primary-200);
  --dk-component-illustration-cards-back-body-end: var(--dk-color-primary-400);
  --dk-component-illustration-cards-back-edge-start: var(--dk-color-primary-300);
  --dk-component-illustration-cards-back-edge-end: var(--dk-color-primary-500);
  /* The magnetic strip's lines and the number rows. */
  --dk-component-illustration-cards-line: var(--dk-color-primary-200);
  /* The chip's plates: a step into the surface the art sits on. */
  --dk-component-illustration-cards-chip: var(--dk-surface-nested-hover);
  --dk-component-illustration-cards-shine: var(--dk-color-primary-400);
  /* The brand mark's two discs. */
  --dk-component-illustration-cards-mark: var(--dk-color-primary-600);
  /* The chip's gold contact. */
  --dk-component-illustration-cards-gold: var(--dk-primitive-color-gold-200);
}
/* Dark, the kit's per-theme pattern (Vehicle's on-raised panel): gated to the
   NEAREST theme (a light page inside a dark preview keeps the light values),
   the guard in :where() so it adds no weight; an illustration carrying the
   dark theme itself takes it too. */
[data-theme="dark"] .dk-component-illustration:where(:not([data-theme="light"], [data-theme="dark"] [data-theme="light"] *)),
.dk-component-illustration[data-theme="dark"] {
  --dk-component-illustration-cards-front-body-end: var(--dk-color-primary-800);
  --dk-component-illustration-cards-front-edge-start: var(--dk-color-primary-700);
  --dk-component-illustration-cards-front-edge-end: var(--dk-color-primary-900);
  --dk-component-illustration-cards-middle-body-start: var(--dk-color-primary-600);
  --dk-component-illustration-cards-middle-body-end: var(--dk-color-primary-800);
  --dk-component-illustration-cards-middle-edge-start: var(--dk-color-primary-700);
  --dk-component-illustration-cards-middle-edge-end: var(--dk-color-primary-900);
  --dk-component-illustration-cards-back-body-start: var(--dk-color-primary-700);
  --dk-component-illustration-cards-back-body-end: var(--dk-color-primary-900);
  --dk-component-illustration-cards-back-edge-start: var(--dk-color-primary-800);
  --dk-component-illustration-cards-back-edge-end: var(--dk-color-primary-900);
  --dk-component-illustration-cards-line: var(--dk-color-primary-300);
  --dk-component-illustration-cards-chip: var(--dk-color-neutral-100);
  --dk-component-illustration-cards-mark: var(--dk-color-primary-700);
}

/* ════════════════════════════ drift-kit:layer components/feedback-badge/tokens.css ════════════════════════════ */
/* ============================================================================
   Feedback badge — component token collection (--dk-component-feedback-badge-*)
   ----------------------------------------------------------------------------
   CL IllustrationFeedbackBadge: a status's subtle ring around its solid
   circle, a white glyph in the middle. Sizes are CL's.
   ============================================================================ */
.dk-component-feedback-badge {
  --dk-component-feedback-badge-small-size: var(--dk-primitive-scale-12);
  --dk-component-feedback-badge-small-padding: var(--dk-primitive-scale-1-5);
  --dk-component-feedback-badge-small-icon: var(--dk-primitive-scale-5);
  --dk-component-feedback-badge-medium-size: var(--dk-primitive-scale-18);
  --dk-component-feedback-badge-medium-padding: var(--dk-primitive-scale-2);
  --dk-component-feedback-badge-medium-icon: var(--dk-primitive-scale-7);
  --dk-component-feedback-badge-large-size: var(--dk-primitive-scale-24);
  --dk-component-feedback-badge-large-padding: var(--dk-primitive-scale-2-5);
  --dk-component-feedback-badge-large-icon: var(--dk-primitive-scale-10);
  --dk-component-feedback-badge-glyph: var(--dk-text-base-white);
  /* Motion (9 Nov, Julio): opt-in through data-animation, the Shield's grammar.
     Enter: the ring springs in, the circle a beat after, then the glyph (the
     tick draws from its short arm, any other glyph swaps in). Exit: the circle
     and glyph go first, then the ring. */
  --dk-component-feedback-badge-enter-duration: var(--dk-motion-enter-large-duration);
  /* No overshoot: a springing circle swells past its own ring. */
  --dk-component-feedback-badge-enter-easing: var(--dk-motion-enter-large-easing);
  --dk-component-feedback-badge-core-delay: var(--dk-motion-feedback-duration);
  --dk-component-feedback-badge-glyph-duration: var(--dk-motion-enter-duration);
  --dk-component-feedback-badge-glyph-easing: var(--dk-motion-enter-easing);
  --dk-component-feedback-badge-glyph-delay: calc(2 * var(--dk-motion-feedback-duration));
  --dk-component-feedback-badge-glyph-scale: var(--dk-motion-swap-scale);
  /* The tick's path length in its 24-unit box (lucide check: 15.6 + 7.1). */
  --dk-component-feedback-badge-check-length: 23;
  --dk-component-feedback-badge-exit-duration: var(--dk-motion-exit-duration);
  --dk-component-feedback-badge-exit-easing: var(--dk-motion-exit-easing);
  --dk-component-feedback-badge-ring-exit-duration: var(--dk-motion-exit-large-duration);
  --dk-component-feedback-badge-ring-exit-delay: calc(var(--dk-motion-exit-duration) / 2);
}

/* ═════════════════════════════════════ drift-kit:layer components/alert/tokens.css ═════════════════════════════════════ */
/* ============================================================================
   Alert — component token collection (--dk-component-alert-*)
   ----------------------------------------------------------------------------
   An inline, persistent message in the page. The counterpart to Toast, which
   floats, animates and is built from JavaScript: the line between them is who
   creates it. An Alert is written into the markup, so it needs no factory and
   its only script is the dismiss button.

   FOUR LEGS, never :root. [data-theme="light"], [data-theme="dark"],
   [data-surface] and [data-tone] is what lets this collection apply inside an
   inverse panel, where the tokens it points at already resolve as the opposite
   theme. A collection on :root would be theme-blind and the component would
   render light colours on a dark panel.

   SLOTS, not a token per combination. Four variants times six statuses is
   twenty-four; enumerating them would be twenty-four blocks that all say the
   same thing. Instead each status fills four private slots with its own
   colours, and each variant decides which slots get painted. Six status rules
   plus four variant rules covers the same ground and cannot drift out of step.

   NO `enquiry` STATUS. It exists as a data-tone value but has no text, surface,
   border or icon tokens, so an enquiry alert would have rendered colourless.
   Checked, not assumed: the tone list looks like the status list and is not. */
/* SCOPED TO THE COMPONENT, not to every themed element on the page.

   This block used to carry four legs: [data-theme="light"],
   [data-theme="dark"], [data-surface] and [data-tone]. That put the whole
   collection on <body> and on every panel, and custom properties inherit, so
   all 34 of these reached every element in the document. Across the kit that
   came to 2,958 custom properties on a bare <span>, which is what makes the
   browser's inspector crawl.

   NOTHING IS LOST BY MOVING IT HERE. The four legs existed so the collection
   would re-resolve inside a tone, a level or an inverse panel. Declared on the
   component itself it resolves ON the component, against that element's own
   nearest theme, tone and level, which is the same answer arrived at more
   directly. Proven on Button first: check:button, check:contract,
   check:conformance and check:contrast all pass unchanged, and the last two
   sweep every tone, level and theme. */
.dk-component-alert {
  /* Geometry, shared by every variant. */
  --dk-component-alert-gap: var(--dk-spacing-3);
  /* EVEN ON ALL SIDES, one token rather than a block/inline pair (9.0.0,
     Julio). It was 12px vertical against 16px horizontal, which is the shape
     a control has, not a panel. Toast, the component Alert is the persistent
     half of, already sets a flat padding: var(--dk-spacing-4), so this is the
     pair agreeing rather than a number picked here.
     ONE token, not two holding the same value: two of them is an invitation
     to let them drift apart again, and even-on-all-sides is now a property of
     the component rather than a coincidence. Anything that genuinely needs to
     breathe on one edge does it with a longhand, the way the no-dismiss
     trailing rule in styles.css does. */
  --dk-component-alert-padding: var(--dk-spacing-4);
  --dk-component-alert-radius: var(--dk-border-radius-150);
  --dk-component-alert-border-width: var(--dk-border-width-100);
  --dk-component-alert-icon-size: 20px;

  /* The dismiss button. Its GLYPH stays --dk-component-alert-icon-size; this
     padding is the ring of space around it that gives the hover background a
     body to be, the same way Icon button sizes its box larger than its glyph
     (24px glyph in a 40px box at large). Without it a background would hug
     the X exactly and read as a smudge rather than a target.
     The offset is extra space before the button, on top of the container's
     own gap: the words end and the control begins, and the container gap
     alone was too tight for a control that now paints on hover. It is the
     panel's own padding, so the dismiss stands as far from the words as the
     words stand from the edge, and it tracks the size axis with them.

     TRAILING-EXTRA IS NOT THE OFFSET, though both were --dk-spacing-2 when
     they arrived an hour apart. One is the gap before a control that is
     there; the other is the room an alert gets on its trailing edge when that
     control is NOT. Tying them looked tidy and was wrong: raising the gap
     before the button silently widened the padding of every alert that has no
     button. They are separate because they answer separate questions. */
  --dk-component-alert-dismiss-padding: var(--dk-spacing-1);
  --dk-component-alert-dismiss-offset: var(--dk-component-alert-padding);
  --dk-component-alert-trailing-extra: var(--dk-spacing-2);

  --dk-component-alert-small-gap: var(--dk-spacing-2);
  --dk-component-alert-small-padding: var(--dk-spacing-3);
  --dk-component-alert-small-icon-size: 16px;
  --dk-component-alert-small-dismiss-padding: var(--dk-spacing-1);
  --dk-component-alert-small-dismiss-offset: var(--dk-component-alert-small-padding);
  --dk-component-alert-small-trailing-extra: var(--dk-spacing-1);

  /* Type. The Alert owns these rather than reaching into Body's collection:
     a component reading another component's tokens couples the two, and the
     solid variant needs a text colour Body cannot express. */
  /* Its own family (3 Nov), so it never falls through to the page's. */
  --dk-component-alert-font-family: var(--dk-font-family-primary);
  --dk-component-alert-title-font-size: var(--dk-font-scale-body-medium-text-size);
  --dk-component-alert-title-line-height: var(--dk-font-scale-body-medium-line-height);
  --dk-component-alert-title-font-weight: var(--dk-primitive-font-weight-semi-bold);
  --dk-component-alert-body-font-size: var(--dk-font-scale-body-small-text-size);
  --dk-component-alert-body-line-height: var(--dk-font-scale-body-small-line-height);
  --dk-component-alert-body-font-weight: var(--dk-primitive-font-weight-regular);

  --dk-component-alert-small-title-font-size: var(--dk-font-scale-body-small-text-size);
  --dk-component-alert-small-title-line-height: var(--dk-font-scale-body-small-line-height);
  /* The description steps down with the title (9 Oct): at small the title
     came down to the description's own rung and the two read as one size. */
  --dk-component-alert-small-body-font-size: var(--dk-font-scale-body-xsmall-text-size);
  --dk-component-alert-small-body-line-height: var(--dk-font-scale-body-xsmall-line-height);

  /* ── data-pointer: the balloon, the component library's layout="balloon".
     A triangle 7px deep and 10px across, centred on the side it points
     from, in the alert's own fill and border. ── */
  --dk-component-alert-pointer-depth: 0.4375rem;
  --dk-component-alert-pointer-base: 0.625rem;

  /* Status text. ONE colour per status, shared by title and body: the two
     still read as title/body through size and weight (title is body-medium
     semi-bold, body is body-small regular), not through colour.

     OPT-IN SINCE 9.0.0, via data-text="tinted". 8.3.0 made these the default
     on subtle/outline/plain and 9.0.0 put that back: an alert's words are
     black-on-grey again unless asked otherwise, and the ICON carries the
     status either way (Julio, 14 Sep). Each status rule now writes one slot,
     --_alert-tint-text, and only the data-text="tinted" rule spends it into
     title and body; solid still overwrites both back to --_alert-on-solid
     afterward (see styles.css for the ordering that guarantees it).

     SIX, not five: neutral is a status like any other here, with its own
     text, description and icon colour, rather than the absence of one. Its
     colour is --dk-text-neutral-default, the same grey the untinted body
     already uses, so a tinted neutral alert reads as one deliberate colour
     across title and body rather than falling back to nothing.
     Named and shaped like every other component's per-status text family
     (--dk-component-body-<status>-color, --dk-component-heading-<status>-color,
     …) rather than inventing an alert-only pattern.

     Sourced from --dk-text-<status>-on-subtle (mapped/text.css), not a fixed
     rung off the raw --dk-color-<status>-NNN ramp: that Mapped token exists
     for exactly this reading — text sitting on that status's own subtle
     tint, which is what Alert's tint IS (--dk-surface-<status>-subtle is the
     same fill). Measured on that tint in light: primary 6.09, warning 5.30,
     error 5.23, information 5.60 — all clear AA (4.5:1). Measured in dark:
     primary 11.01, warning 11.35, error 7.88, information 7.94 — comfortably
     higher, because -on-subtle is not a fixed rung in both themes, it
     INVERTS (light -700, dark -200), the same way the subtle tint it sits on
     inverts (light -50, dark -900). A flat --dk-color-<status>-700 in both
     themes — tried and rejected — measured 1.79-2.77:1 in dark, because a
     dark rung sits almost on top of a dark tint rather than against it.

     tone.css has its own token for this same reading,
     --dk-text-<status>-on-subtle-level-0, with the same values — deliberately
     NOT what this reaches for. tone.css is the one mapped file the build's
     generated inverse mirror excludes ("the tone layer OWNS inverse and
     mirroring it would be circular"), so a component reading it directly
     resolves by the literal page theme and renders wrong the moment it is
     nested inside a data-tone="inverse" panel — found here first, 210
     check:conformance INVERSE failures, fixed by sourcing from mapped/text.css
     (an ordinary both-theme file the mirror does cover) instead.

     Success is the exception: its OWN -700 measures 3.30 on its own subtle
     tint (and only 4.36 at -800), so it borrows primary's colour instead,
     the same precedent --dk-surface-success-solid already set by borrowing
     --dk-surface-primary-solid — mapped/success.css carries the alias, with
     the rest of that file's success-is-jade tokens. */
  /* 30 Oct: the -on-tint family, the -on-subtle rungs with one more rung of
     contrast on level 2, where the tint has deepened (Julio, after a preview). */
  --dk-component-alert-neutral-color: var(--dk-text-neutral-default);
  --dk-component-alert-primary-color: var(--dk-text-primary-on-tint);
  --dk-component-alert-warning-color: var(--dk-text-warning-on-tint);
  --dk-component-alert-error-color: var(--dk-text-error-on-tint);
  --dk-component-alert-information-color: var(--dk-text-information-on-tint);
  --dk-component-alert-success-color: var(--dk-text-success-on-tint);

  /* OWN TOKENS FOR WHAT WERE RAW PRIMITIVE READS. The Primitives collection is
     documented as "never consumed directly by components or pages", and six
     components already declare their own for exactly this (Body, Alert, Button,
     Heading, Eyebrow, Hero) while nine read the primitive inline. The ladder had
     no rung between them for weight and motion, so there was nowhere else to go;
     a component token is that rung, and is what the grammar already expects. */
  --dk-component-alert-scrim-active-opacity: var(--dk-primitive-opacity-scrim-active);
  --dk-component-alert-scrim-hover-opacity: var(--dk-primitive-opacity-scrim-hover);

  /* THE ARRIVAL (data-enter, 6 Nov): the enter pattern, settling a spacing-1
     down into place. Reduced motion zeroes the offset (kit/reduced-motion.css)
     and the pattern's own duration shortens, so it only fades. */
  --dk-component-alert-enter-duration: var(--dk-motion-enter-duration);
  --dk-component-alert-enter-easing: var(--dk-motion-enter-easing);
  --dk-component-alert-enter-offset: calc(-1 * var(--dk-spacing-1));
}

/* ═══════════════════════════════════ drift-kit:layer components/divider/tokens.css ═══════════════════════════════════ */
/* ============================================================================
   Divider — component token collection (--dk-component-divider-*)
   ----------------------------------------------------------------------------
   A rule between things. Added 5.2.0 because more than forty Forge prototypes
   were hand-rolling their own, most as
   `1px solid var(--dk-border-raised-default)` behind their own locally-invented
   token — the same rule, duplicated dozens of times instead of shared once.
   That is the usual shape of a missing component.

   Drawn as a BORDER, not a background — which is what a rule is, and what makes
   it inherit [data-border-width] with no special-casing.

   WIDTH is declared ONCE, not per [data-border-width] value. The per-attribute
   scoping the doctrine allows (see the design note) lets a component pick a
   different rung under a thick brand, but border-width's smallest non-zero rung
   at `thick` IS 4px — so scoping buys this component the ability to go up,
   never below the floor, and a hairline's only objection to `thick` is that 4px
   is a lot. The constraint is in the dynamic tier, not in the component's
   ability to choose. It still owns the token, so a brand can retarget it.

   COLOURS: `default` is --dk-border-raised-default — the hairline most of
   those forty-odd hand-rolled cases already reached for, and one of the
   families that already steps per surface level. There is no `subtle`: Material ships one divider
   colour, Polaris hands you the token scale, Spectrum makes the strong rule
   THICKER rather than darker, and only Fluent has a subtle — as one end of a
   four-way bracket. A rung below an already-quiet hairline is 5.0.0's 1.80:1
   problem in a new hat.

   SCOPING — the four legs, never :root: var() substitutes where a property is
   DECLARED, and the [data-surface] / [data-tone] legs are what let the level
   and tone remaps reach this component.
   ============================================================================ */

/* SCOPED TO THE COMPONENT, not to every themed element on the page.

   This block used to carry four legs: [data-theme="light"],
   [data-theme="dark"], [data-surface] and [data-tone]. That put the whole
   collection on <body> and on every panel, and custom properties inherit, so
   all 9 of these reached every element in the document. Across the kit that
   came to 2,958 custom properties on a bare <span>, which is what makes the
   browser's inspector crawl.

   NOTHING IS LOST BY MOVING IT HERE. The four legs existed so the collection
   would re-resolve inside a tone, a level or an inverse panel. Declared on the
   component itself it resolves ON the component, against that element's own
   nearest theme, tone and level, which is the same answer arrived at more
   directly. Proven on Button first: check:button, check:contract,
   check:conformance and check:contrast all pass unchanged, and the last two
   sweep every tone, level and theme. */
.dk-component-divider {
  --dk-component-divider-border-width: var(--dk-border-width-separator-25);
  --dk-component-divider-default-color: var(--dk-border-hairline-current);
  --dk-component-divider-neutral-color: var(--dk-border-neutral-hairline);
  --dk-component-divider-primary-color: var(--dk-border-primary-hairline);
  --dk-component-divider-success-color: var(--dk-border-success-hairline);
  --dk-component-divider-error-color: var(--dk-border-error-hairline);
  --dk-component-divider-warning-color: var(--dk-border-warning-hairline);
  --dk-component-divider-information-color: var(--dk-border-information-hairline);
}

/* ═══════════════════════════════════════ drift-kit:layer components/dot/tokens.css ═══════════════════════════════════════ */
/* ============================================================================
   Dot: component token collection (--dk-component-dot-*)
   ----------------------------------------------------------------------------
   A small filled circle that marks a status with no words: an unread row, a
   live connection. The size is the 8px rung of the primitive scale, where the
   dot inside a Tag is 6px because it sits beside a word.

   THE COLOURS ARE THE STATUS'S SOLID SURFACE, which is the strongest fill the
   status has in both themes. Neutral has no solid in the system, so the
   strongest neutral surface stands in, as Tag's does.
   ============================================================================ */
.dk-component-dot {
  --dk-component-dot-size: var(--dk-primitive-scale-2);

  --dk-component-dot-primary: var(--dk-surface-primary-solid);
  --dk-component-dot-error: var(--dk-surface-error-solid);
  --dk-component-dot-success: var(--dk-surface-success-solid);
  --dk-component-dot-warning: var(--dk-surface-warning-solid);
  --dk-component-dot-information: var(--dk-surface-information-solid);
  --dk-component-dot-neutral: var(--dk-surface-neutral-default);
}

/* ═════════════════════════════════════ drift-kit:layer components/input/tokens.css ═════════════════════════════════════ */
/* ============================================================================
   Input — component token collection (--dk-component-input-*)
   ----------------------------------------------------------------------------
   FOUR LEGS, never :root. [data-theme="light"], [data-theme="dark"],
   [data-surface] and [data-tone] is what lets this collection apply inside an
   inverse panel, where the tokens it points at already resolve as the opposite
   theme.

   HEIGHTS COME FROM THE PRIMITIVE SCALE, NOT FROM BUTTON. Two of these rungs
   used to read --dk-component-button-*-padding-y directly, which made Input the
   only component in the kit reaching into another component's collection. It
   was wrong twice over. The tiers run primitive, alias, mapped, component;
   component-to-component is not one of them, so the reference skipped the
   ladder sideways. And it made Input's height an undeclared consequence of an
   edit to Button, in a file nobody editing Button would think to open.

   The INVARIANT behind it was real: a field and a button share rows constantly,
   a search box beside Search, a filter beside Apply, so at the rungs they share
   their heights have to agree. Measured 16 Sep, the field rendered 46px against
   Button's 38 / 44 / 56 and nothing lined up. What was wrong was enforcing that
   through a var() reference. An invariant between two components is a thing to
   ASSERT, not to implement by coupling: Forge's check:contract now measures a
   rendered Button and a rendered Input and fails if the shared rungs drift
   apart, which catches the same regression without either component reaching
   into the other.

   The rungs, all three from the scale, padding doubled plus the line box:
     small    scale-2-5 (10px) x2 + body-xsm  (18px) = 38
     medium   scale-3   (12px) x2 + body-sm   (20px) = 44
     large    scale-3-5 (14px) x2 + input-md  (24px) = 52
   Small and medium match Button's first two rungs by construction. Large does
   not, and that is deliberate: Button's large is 56px, a 56px field was called
   too tall twice, and a large field usually stands alone on a login or a
   single-question step, so alignment buys it the least and height costs it the
   most. Extra large is absent. A 64px text field is not a thing.

   The field itself has no vertical padding; it centres its content inside
   min-height. So these calcs are how the NUMBER was chosen rather than a
   description of the box model, which is exactly why they are written out
   instead of left as 38px / 44px / 52px literals nobody could re-derive. */
/* SCOPED TO THE COMPONENT, not to every themed element on the page.

   This block used to carry four legs: [data-theme="light"],
   [data-theme="dark"], [data-surface] and [data-tone]. That put the whole
   collection on <body> and on every panel, and custom properties inherit, so
   all 43 of these reached every element in the document. Across the kit that
   came to 2,958 custom properties on a bare <span>, which is what makes the
   browser's inspector crawl.

   NOTHING IS LOST BY MOVING IT HERE. The four legs existed so the collection
   would re-resolve inside a tone, a level or an inverse panel. Declared on the
   component itself it resolves ON the component, against that element's own
   nearest theme, tone and level, which is the same answer arrived at more
   directly. Proven on Button first: check:button, check:contract,
   check:conformance and check:contrast all pass unchanged, and the last two
   sweep every tone, level and theme.
   AND TO THREE ROOTS, NOT ONE. __field is here because a field used on its own
   still resolves, which this component promises a few lines down. Select is
   here because it reads this collection for its height, radius, gaps and slot
   icon sizes: that borrow predates this change and is the component-to-component
   reach the kit forbids, so it is now at least written down rather than working
   by accident. Search bar was the fourth until 14.0.0 folded it in here. The tier-correct fix is to promote
   those shared metrics to the mapped tier; until then this selector is the
   honest statement of who shares the collection. */
.dk-component-input, .dk-component-input__field,
.dk-component-select, .dk-component-select__trigger {
  --dk-component-input-small-padding-y: var(--dk-primitive-scale-2-5);
  --dk-component-input-padding-y: var(--dk-primitive-scale-3);
  --dk-component-input-large-padding-y: var(--dk-primitive-scale-3-5);

  --dk-component-input-small-height: calc(var(--dk-component-input-small-padding-y) * 2 + var(--dk-font-body-xsm-line-height));
  --dk-component-input-height: calc(var(--dk-component-input-padding-y) * 2 + var(--dk-font-body-sm-line-height));
  --dk-component-input-large-height: calc(var(--dk-component-input-large-padding-y) * 2 + var(--dk-font-input-md-line-height));

  /* THE LABEL'S OWN TYPOGRAPHY. It read --dk-component-eyebrow-* directly,
     which made Input the last component in the kit reaching into another's
     collection after Button's dependency was removed on 17 Sep for exactly the
     same reason: the tiers run primitive, alias, mapped, component, and
     component-to-component is not one of them. It also made a Karmo form label
     an undeclared consequence of editing Eyebrow.
     Four of the five resolve straight to alias tokens, so Input reads those
     instead. The fifth, the tracking, is a bare 0.08em literal inside Eyebrow,
     so it is written here as the same literal rather than borrowed through it.
     THE INVARIANT IS REAL AND MOVED RATHER THAN VANISHED: a form label and an
     Eyebrow should look identical, which is a thing to ASSERT. Forge's
     check:contract carries it as a look cohort, the same machinery that keeps
     Input and Select rendering one field. */
  --dk-component-input-label-font-family: var(--dk-font-family-primary);
  --dk-component-input-label-font-size: var(--dk-font-overline-lg-text-size);
  --dk-component-input-label-line-height: var(--dk-font-overline-lg-line-height);
  --dk-component-input-label-letter-spacing: 0.08em;
  --dk-component-input-label-font-weight: var(--dk-primitive-font-weight-bold);
  /* THE SMALL LABEL (data-label-size="small", 6 Nov): the overline's md, a
     rung down, with a little more air under it, for a form that wants its
     labels quieter than its values (a sign-in sheet). */
  --dk-component-input-small-label-font-size: var(--dk-font-overline-md-text-size);
  --dk-component-input-small-label-line-height: var(--dk-font-overline-md-line-height);
  --dk-component-input-small-label-gap: var(--dk-spacing-2-5);

  /* DECISIONS, NOT REFERENCES, and the difference is what earns a token. Each
     of these was written inline against an alias: the field's border weight,
     the focus ring's thickness (three call sites), the action button's corner,
     and the caption and error type (two each). Pointing at a shared value is a
     reference; choosing how thick a field's focus ring is, is a decision, and a
     decision spread across three rules is one nobody can change in one place.
     The field's own corner already had --dk-component-input-radius for the same
     reason; its action button did not, for none. */
  --dk-component-input-border-width: var(--dk-border-width-25);
  --dk-component-input-focus-ring-width: var(--dk-border-width-100);
  --dk-component-input-action-radius: var(--dk-border-radius-control-100);
  --dk-component-input-caption-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-input-caption-line-height: var(--dk-font-body-sm-line-height);
  /* The control's resting weight. Body, Alert, Button, Heading, Eyebrow and
     Hero all declare their own; nine components read the primitive raw, which
     the Primitives collection documents as the one thing never to do. */
  --dk-component-input-font-weight: var(--dk-primitive-font-weight-regular);

  /* THE EDGE IS FIXED, as the height and the type are. On the responsive
     spacing tier it fell from 10 to 6 on a phone while nothing else in the
     field moved, and the text sat against the border. Textarea, Select and
     Code input pin theirs the same way, as Button pins its own. */
  --dk-component-input-padding-inline: var(--dk-primitive-scale-2-5);
  /* LARGE GETS MORE AIR AT THE EDGE, 12 where the other rungs have 8. The box
     grows to 52 at this rung and the edge did not grow with it, so the glyph
     sat pinned to the border. The large rule hands this to the name every
     other rule reads, so a leading control's halves take the wider edge too.
     The gap beside the glyph stays the shared 6: a wider one was tried and
     read as the glyph drifting away from its text. */
  --dk-component-input-large-padding-inline: var(--dk-primitive-scale-3-5);

  /* ── data-appearance="sentence": a trigger set inside a line of text, as the
     Subscription Confirmation designs have it ("Every [Monday] of each
     week"). The value is the sentence's own bold type in primary; the box
     rests on the card surface with a subtle border and hugs its value.
     Select keeps the same set (--dk-component-select-sentence-*): two boxes, one look, held equal by test/sentence.test.js.
     The type is the responsive ramp on purpose: it has to match the words
     around it, which are set in the same ramp. ── */
  --dk-component-input-sentence-border: var(--dk-border-neutral-subtle);
  --dk-component-input-sentence-surface: var(--dk-surface-card-default);
  --dk-component-input-sentence-text: var(--dk-text-primary-default);
  --dk-component-input-sentence-font-weight: var(--dk-primitive-font-weight-bold);
  --dk-component-input-sentence-font-size: var(--dk-font-body-lg-text-size);
  --dk-component-input-sentence-line-height: var(--dk-font-body-lg-line-height);
  --dk-component-input-sentence-small-font-size: var(--dk-font-body-md-text-size);
  --dk-component-input-sentence-small-line-height: var(--dk-font-body-md-line-height);
  --dk-component-input-sentence-large-font-size: var(--dk-font-heading-h5-text-size);
  --dk-component-input-sentence-large-line-height: var(--dk-font-heading-h5-line-height);
  --dk-component-input-sentence-padding-inline: var(--dk-primitive-scale-3);
  --dk-component-input-sentence-chevron-size: var(--dk-primitive-scale-4-5);
  --dk-component-input-sentence-value-min-width: 7.5rem;
  /* Room beside the words either side, on top of the space character. */
  --dk-component-input-sentence-margin-inline: var(--dk-primitive-scale-1);

  /* ── data-raised: the field that is the first thing on the page ──────────
     This is the whole of what Search bar used to be. That component was
     documented in its own stylesheet as "a preset of Input, not a second field
     implementation", and by the end everything it shared resolved through
     --dk-component-input-*. What was left was an elevation, a roomier padding
     and a magnifier that tinted on focus, which is three declarations and not
     a component, so it is three declarations now.

     RAISED IS THE WORD BUTTON ALREADY USES for chrome that floats above the
     page, and this is the same idea: a field lifted off the surface because it
     is the thing you are meant to reach for first. It is a presence attribute
     rather than a variant because Input has no variant axis to join.

     IT IS THE SHADOW AND NOTHING ELSE. The bar's roomier inline padding came
     across with it at first and was cut on review: it made the attribute two
     unrelated changes wearing one name, and a field whose text starts further
     in than the field below it looks like a different component rather than the
     same one lifted. Padding belongs to the size rung, which is where every
     other field reads it from.

     It does NOT change the size either. Search bar's unmarked rung was large,
     which meant its default and Input's disagreed silently; a raised field that
     wants to be large now says data-size="large", which is the same look and
     one fewer thing to know. */
  --dk-component-input-raised-shadow: var(--dk-shadow-lifted, 0 4px 10px 0 rgba(0, 0, 0, 0.08));
  --dk-component-input-raised-shadow-hover: var(--dk-shadow-floating, 0 4px 20px 0 rgba(0, 0, 0, 0.08));

  /* INSET (data-variant="inset", 16 Oct): Select's inset look, a field sunk
     into the surface on the nested ramp with no edge. */
  /* On the control ramp (16 Oct): the nested rungs on a plain surface, and
     the tone's and the level's next rung on a toned one; the nested fill no
     tone remaps made every inset a tone boundary, page grey in any tone. */
  --dk-component-input-inset-surface: var(--dk-surface-control-default);
  --dk-component-input-inset-surface-hover: var(--dk-surface-control-hover);
  --dk-component-input-inset-surface-active: var(--dk-surface-control-active);
  /* Its actions press into the same ramp, a rung and two past its fill. */
  --dk-component-input-inset-action-hover: var(--dk-surface-control-hover);
  --dk-component-input-inset-action-active: var(--dk-surface-control-active);
  --dk-component-input-inset-border: transparent;
  /* Its words follow the tone: the field's own text tokens are for a white
     box no tone touches. The same values on a plain surface, but the
     placeholder, a rung darker on the grey well. */
  --dk-component-input-inset-text: var(--dk-text-default);
  --dk-component-input-inset-placeholder: var(--dk-text-neutral-subtle);
  --dk-component-input-inset-icon: var(--dk-icon-neutral-default);
  --dk-component-input-inset-affix: var(--dk-text-neutral-default);
  --dk-component-input-inset-icon-subtle: var(--dk-icon-neutral-default);
  --dk-component-input-inset-icon-subtle-hover: var(--dk-text-neutral-default);
  /* Inside a status tone its glyphs take the tone's icon (16 Oct, Julio): the
     status's own icon token is the tone's level-aware icon there. */
  --dk-component-input-inset-icon-primary: var(--dk-icon-primary-default);
  --dk-component-input-inset-icon-success: var(--dk-icon-success-default);
  --dk-component-input-inset-icon-error: var(--dk-icon-error-default);
  --dk-component-input-inset-icon-warning: var(--dk-icon-warning-default);
  --dk-component-input-inset-icon-information: var(--dk-icon-information-default);
  --dk-component-input-radius: var(--dk-border-radius-control-200);
  --dk-component-input-gap: var(--dk-spacing-1-5);
  /* Between an affix and the control. */
  --dk-component-input-slot-gap: var(--dk-spacing-2);

  /* ── A LEADING CONTROL, which is a slot holding a control rather than a glyph
     ─────────────────────────────────────────────────────────────────────────
     A phone number is the case that asks for it: a country picker and a number,
     reading as one field and operated as two controls. So is a currency amount,
     a unit, a prefix. The kit's answer is a SHAPE rather than a component,
     because the only part that is genuinely design-system work is the seam —
     one border, one ring, one height, one type size across two controls — and
     that seam is the same whatever the control is choosing.

     The divider is what stops it being a lie: the two halves ARE two controls,
     they take focus separately and Tab moves between them, and a field with no
     line down it would promise one. */
  --dk-component-input-leading-control-divider: var(--dk-border-field-default);
  --dk-component-input-leading-control-divider-width: var(--dk-border-width-separator-25);
  /* Tighter than the field's own slot gap. A glyph and a chevron are one
     gesture — "this picks a thing" — and the field's 8px reads as two. */
  --dk-component-input-leading-control-gap: var(--dk-spacing-1);
  /* Leading/trailing slot glyph. Was a bare 20px literal, justified on Alert
     declaring its icon size the same way, which is not a justification: it is
     two components making the same mistake. 20px and 16px are scale-5 and
     scale-4 exactly, so there was never anything to invent.
     It also STEPS AT SMALL now. It did not, so a small field put a 20px leading
     magnifier next to a 16px clear button, measured side by side and visibly
     mismatched. The action glyph below has always stepped; this simply agrees
     with it, and both land on the same two rungs.
     AND IT STEPS AT LARGE NOW TOO, which it did not. The box moves 44 to 52
     and the type 16 to 18 between medium and large, and the glyph sat still at
     both, so a large field wore a medium field's icon. That is the same fault
     the paragraph above records fixing at the other end of the ramp, left in
     place at this end. 24px is scale-6, the rung after the one medium uses. */
  /* THE LEADING GLYPH'S THREE COLOURS. It shared --dk-text-field-affix with a
     text affix like "$", which is right for a character that is part of the
     value and too loud for an icon that only decorates the field. At rest and
     under the pointer it reads the palette's quieter rungs; on focus it still
     takes the field's focus colour, which is the one moment it should speak. */
  --dk-component-input-leading-icon-color: var(--dk-icon-field-subtle);
  --dk-component-input-leading-icon-color-hover: var(--dk-icon-field-subtle-hover);
  --dk-component-input-leading-icon-color-focus: var(--dk-border-field-focus);
  --dk-component-input-slot-icon-size: var(--dk-primitive-scale-5);
  --dk-component-input-small-slot-icon-size: var(--dk-primitive-scale-4);
  /* 20 at large, the same as medium, by request: 24 read heavy beside the
     type. The action glyph below moves with it, so the pair still matches. */
  --dk-component-input-large-slot-icon-size: var(--dk-primitive-scale-5);

  /* IN-FIELD ACTION: the reveal toggle on a password, the clear button on a
     search. A hit target around a glyph, the way Alert's dismiss is a padding
     ring around its X, because a bare 20px glyph is a smudge to hit and gives
     a hover background nothing to fill. 28 around 20 at the default rung, 24
     around 16 at small, which keeps the button inside a 38px field with room
     to spare. These read the scale primitives rather than a literal: the sizes
     land exactly on scale-7/6/5/4.
     32 around 24 at large, for the reason the slot glyph above gained a large
     rung: the action had stepped at small and stopped there, so a large field
     would have put a 24px leading icon beside a 20px action glyph. The comment
     above records that exact mismatch being fixed at small, measured side by
     side; this is the same pair at the other end. scale-8/7/6/5/4 throughout. */
  --dk-component-input-action-size: var(--dk-primitive-scale-7);
  --dk-component-input-action-glyph-size: var(--dk-primitive-scale-5);
  --dk-component-input-small-action-size: var(--dk-primitive-scale-6);
  --dk-component-input-small-action-glyph-size: var(--dk-primitive-scale-4);
  --dk-component-input-large-action-size: var(--dk-primitive-scale-8);
  --dk-component-input-large-action-glyph-size: var(--dk-primitive-scale-5);

  /* ERROR MESSAGE COLOUR, and deliberately NOT --dk-text-error-default.
     Measured 16 Sep against the light page: error-default is error-500
     (#f05252) at 3.48:1, below AA for body text. That rung is the status FILL
     and GLYPH colour, not a reading colour — Alert's borders and icons resolve
     through it — so moving the palette to suit one message would ripple across
     every status in the kit. The on-subtle rung is the darker reading one
     (light error-700 #c81e1e, 5.74:1; dark error-200, well clear) and passes in
     both themes, so only light actually changes.
     Its name says "on the status's own tint" and this message sits on the page
     instead, so the name is a near fit, not an exact one: the mapped text
     family has no reading-grade error rung for the page background. Naming
     --dk-text-<status>-on-page across the five statuses is the clean fix, and
     this token is the single seam to repoint when that lands. mapped/success.css
     already borrows across families the same way. */
  --dk-component-input-error-color: var(--dk-text-error-outline);

  /* THREE RUNGS OF TYPE, one per size, 14 / 16 / 18.
     The first cut gave small its own size and left large sharing medium's,
     on the reasoning that large "only grows the box". That was an assertion,
     not a decision: the kit already ships an input type ramp
     (--dk-font-input-sm/md/lg = 16 / 18 / 20) and large was simply not using
     it, so a 56px field held 16px text and read as mostly empty padding.
     Large now takes the md rung. (The box was 56px when that was written and is
     52px now, for the reasons in the header; the type was the part that was
     wrong either way.)
     lg (20px) is left for a display-sized field if one is ever wanted; 18px in
     a 52px box is the proportion a form actually needs. */
  /* THE OBSCURED FONT, and it is a fix rather than a preference.
     A password field renders nothing but bullets, so its whole appearance is
     one glyph, U+2022, taken from whichever font wins. Measured 17 Sep in the
     real field at 16px: Inter draws it 5.00px tall and 46.0px wide across nine
     characters, system-ui (our first fallback) draws it 3.25px and 30.0px.
     Two thirds the height and a third narrower, for the same markup.

     That difference shows up as a FLICKER rather than a constant. The kit ships
     Inter with font-display: swap, so text paints in the fallback first, and
     Chrome does not re-lay-out a password field when the webfont arrives; the
     stale fallback metrics sit there until something forces a relayout, which
     focusing the field does. Reported from a real browser as dots that are tiny
     until you click in and normal afterwards.

     Pinning a locally installed font takes the download out of the path
     entirely, so there is no swap to miss and the dots are the same on first
     paint as on every later one. Menlo measures 4.75px against Inter's 5.00px,
     inside a quarter pixel of what the webfont was drawing, and a monospace
     face gives evenly spaced bullets, which is what a row of identical glyphs
     wants anyway. Consolas is the Windows equivalent and is UNVERIFIED here,
     this machine being macOS; the generic monospace keyword backstops both.

     No --dk-font-family-* token exists for monospace, and this does not mint one:
     a single component needing a local face for one glyph is not evidence of a
     kit-wide typeface decision. If a second component ever needs it, that is
     when it earns an alias-tier name. */
  --dk-component-input-obscured-font-family: Menlo, Consolas, "Courier New", monospace;

  --dk-component-input-font-size: var(--dk-font-input-sm-text-size);
  --dk-component-input-line-height: var(--dk-font-input-sm-line-height);
  --dk-component-input-small-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-input-small-line-height: var(--dk-font-body-sm-line-height);
  /* body-md, 16 on 24, for the large rung: 18 read too big for the box. The
     ramp has nothing between 16 and 18, so large now shares medium's type size
     and keeps its own 24px line box, which is what holds the box at 52. */
  --dk-component-input-large-font-size: var(--dk-font-body-md-text-size);
  --dk-component-input-large-line-height: var(--dk-font-body-md-line-height);
}

/* Generated by scripts/build.js: this component's root colours, again on
   each part that resets a status tone, so they resolve against the reset. */
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-input .dk-component-input__field:not(.dk-component-input[data-variant="inset"] *),
.dk-component-input:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-input__field:not(.dk-component-input[data-variant="inset"] *) {
  --dk-component-input-sentence-border: var(--dk-border-neutral-subtle);
  --dk-component-input-sentence-text: var(--dk-text-primary-default);
  --dk-component-input-inset-surface: var(--dk-surface-control-default);
  --dk-component-input-inset-surface-hover: var(--dk-surface-control-hover);
  --dk-component-input-inset-surface-active: var(--dk-surface-control-active);
  --dk-component-input-inset-action-hover: var(--dk-surface-control-hover);
  --dk-component-input-inset-action-active: var(--dk-surface-control-active);
  --dk-component-input-inset-text: var(--dk-text-default);
  --dk-component-input-inset-placeholder: var(--dk-text-neutral-subtle);
  --dk-component-input-inset-icon: var(--dk-icon-neutral-default);
  --dk-component-input-inset-affix: var(--dk-text-neutral-default);
  --dk-component-input-inset-icon-subtle: var(--dk-icon-neutral-default);
  --dk-component-input-inset-icon-subtle-hover: var(--dk-text-neutral-default);
  --dk-component-input-inset-icon-primary: var(--dk-icon-primary-default);
  --dk-component-input-inset-icon-success: var(--dk-icon-success-default);
  --dk-component-input-inset-icon-error: var(--dk-icon-error-default);
  --dk-component-input-inset-icon-warning: var(--dk-icon-warning-default);
  --dk-component-input-inset-icon-information: var(--dk-icon-information-default);
  --dk-component-input-error-color: var(--dk-text-error-outline);
}

/* ════════════════════════════════ drift-kit:layer components/code-input/tokens.css ════════════════════════════════ */
/* ============================================================================
   Code input — component token collection (--dk-component-code-input-*)
   ----------------------------------------------------------------------------
   SCOPED TO THE COMPONENT, not to :root and not to the four theme legs. The
   reasoning is Input's, measured there: custom properties inherit, so a
   collection declared on [data-theme] reaches every element in the document,
   and declared on the component it resolves against that element's own nearest
   theme, tone and level, which is the same answer arrived at more directly.

   IT DECLARES ITS OWN RUNGS RATHER THAN READING INPUT'S. Input's collection is
   declared on .dk-component-input, .dk-component-input__field, .dk-component-select
   and .dk-component-select__trigger, and nothing else resolves it; reading
   --dk-component-input-* from here would be the component-to-component reach
   the tiers forbid, and Input's own header spends two paragraphs on why that
   was wrong when it did it to Button. Where a value should agree with Input's,
   it is derived from the same primitive by the same arithmetic and written out.

   THE CELL IS NOT A FIELD RUNG. A text field's height is padding plus a line
   box, because its content is a line of prose. A code cell holds ONE character
   and is square, so its size is chosen as a size: 40 / 48 / 56, which is
   scale-10 / scale-12 / scale-14, the same 4px grid every other box here sits
   on. Six 48px cells and five 8px gaps come to 328px, inside the 340px column a
   verification step usually gets; past that the cells shrink and stay square,
   which is the one thing a fixed rung could not do.

   AND THE TYPE IS A RUNG LARGER THAN A FIELD'S. The kit ships an input ramp,
   --dk-font-input-sm/md/lg = 16 / 18 / 20, and Input leaves lg unused, noting
   it is "for a display-sized field if one is ever wanted". A code is read back
   character by character against a text message, which is that field.
   ============================================================================ */
.dk-component-code-input, .dk-component-code-input__field {
  /* The stack: label, field, caption, error. Input's gap by the same alias, so
     a code field and a text field in one form space their parts alike. */
  --dk-component-code-input-gap: var(--dk-spacing-1-5);

  /* THE SQUARE, three rungs. See the header for why these are chosen sizes
     rather than padding arithmetic. */
  --dk-component-code-input-cell-size: var(--dk-primitive-scale-12);
  --dk-component-code-input-small-cell-size: var(--dk-primitive-scale-10);
  --dk-component-code-input-large-cell-size: var(--dk-primitive-scale-14);

  /* Between cells, and the wider one between GROUPS. A grouped code reads as
     "123 456", so the group gap has to be clearly more than the cell gap or the
     grouping is a rumour: 16 against 8, one full step apart. */
  --dk-component-code-input-cell-gap: var(--dk-spacing-2);
  /* HOW MANY CELLS the row holds, read by data-width="cells" (styles.css sets
     it from data-cells). Six, as the runtime's default is. */
  --dk-component-code-input-cells: 6;
  --dk-component-code-input-group-gap: var(--dk-spacing-4);

  /* THE FALLBACK'S PADDING, and only the fallback's: once the cells are drawn
     the control has no padding at all, because it is a hit area rather than a
     box. Input's value by the same alias, so a scriptless code field and the
     text field above it start their text at the same place. */
  --dk-component-code-input-padding-inline: var(--dk-primitive-scale-2-5);

  --dk-component-code-input-radius: var(--dk-border-radius-control-200);
  --dk-component-code-input-border-width: var(--dk-border-width-25);
  --dk-component-code-input-focus-ring-width: var(--dk-border-width-100);

  /* THE CARET IS OURS TO DRAW. One real input carries the value, and it is
     rendered transparent so the cells can show what it holds, which takes the
     native caret with it. 2px because a 1px caret inside a 48px box reads as a
     rendering artefact rather than a cursor, and text-coloured because that is
     what a caret is: the ring already says which cell is live.

     ITS HEIGHT IS A PROPORTION OF THE TYPE, not the line box. It read the line
     height at first, which tied the cursor to a number chosen for the spacing
     between lines of text there is only ever one of here: at the large rung
     that is 36px in a 56px box, a cursor two thirds the height of the cell.
     1.2em is the caret against the character it sits beside, and it follows
     the type up and down the ramp without another rung to keep in step. */
  --dk-component-code-input-caret-width: var(--dk-border-width-50);
  --dk-component-code-input-caret-height: 1.2em;
  --dk-component-code-input-caret-color: var(--dk-text-field-default);
  /* A LITERAL, and the one in this file. The motion tier's durations are the
     transition rungs, 0.15s to 0.3s, and a caret blinking three times a second
     is a different thing than a colour easing. 1s is the platform's own rate,
     near enough. It is not switched off by zeroing this: a blink held at 0%
     would be a caret that never appears, so kit/reduced-motion.css stops the
     animation instead and leaves the caret solid. */
  --dk-component-code-input-caret-blink-duration: 1s;

  /* THE PLACEHOLDER, which is a zero in every empty box rather than a word.
     A field's placeholder is a sample of what goes in it, and what goes in
     this one is one character per box, so the sample is one character per box.
     The glyph is a token rather than another attribute: the attribute is the
     decision to show a placeholder at all, and a product that wants a dash or
     a dot is changing what it looks like, not whether there is one. Anything
     valid in CSS content goes here, quotes included. */
  --dk-component-code-input-placeholder-char: "0";
  --dk-component-code-input-placeholder-color: var(--dk-text-field-placeholder);

  /* THE MASK'S DOT, drawn rather than typeset: see styles.css for why the
     character is never written into a masked cell. 10px is scale-2-5, which
     reads as a dot against an 18px digit rather than as a full stop. */
  --dk-component-code-input-mask-dot-size: var(--dk-primitive-scale-2-5);

  /* THE VALUE'S TYPE. Semibold rather than Input's regular: a code is checked
     character by character against another screen, and the digits are the whole
     content of the control rather than a line of prose inside it.

     AND IT READS THE DISPLAY RAMP, NOT THE INPUT ONE, which is the one place
     this component parts company with the field it otherwise follows. The input
     ramp is built for a line of prose inside a box and tops out at 20px, so a
     code cell took 16 / 18 / 20 in boxes of 40 / 48 / 56: measured at 0.40,
     0.375 and 0.357 of its own box, a small character in a large empty square,
     and the ramp had nothing left to climb at the top. A code's characters ARE
     the content, one per box, read back against another screen, so they take
     the rung the display ramp has for exactly that. 20 / 24 / 28 holds them at
     half the box at every size, and the sizes step by four the way the boxes do.
     h6, h5 and h3 rather than h6, h5, h4: h4 is 26px, which would have made the
     top of the ramp step by two while everything below it stepped by four. */
  --dk-component-code-input-font-family: var(--dk-font-family-primary);
  --dk-component-code-input-font-weight: var(--dk-primitive-font-weight-semi-bold);
  /* FIXED, AS THE CELLS ARE. The heading ramp is responsive and fell to
     18 / 20 / 24 on a phone inside boxes that stayed 40 / 48 / 56, so the
     characters shrank in place. These are the same rungs at their desktop
     values, on the fixed scale the type scale itself is built from. A large
     field steps down to medium on a phone instead (styles.css). */
  --dk-component-code-input-font-size: var(--dk-primitive-scale-6);
  --dk-component-code-input-line-height: var(--dk-primitive-scale-7);
  --dk-component-code-input-small-font-size: var(--dk-primitive-scale-5);
  --dk-component-code-input-small-line-height: var(--dk-primitive-scale-6);
  --dk-component-code-input-large-font-size: var(--dk-primitive-scale-7);
  --dk-component-code-input-large-line-height: var(--dk-primitive-scale-9);

  /* THE LABEL AND THE MESSAGES, Input's decisions re-made rather than borrowed,
     for the reason in the header. Each line lands on the same alias Input's
     does, so a form mixing the two reads as one form; Forge's check:contract
     carries the they-must-match invariant as a look cohort, which is how the
     kit asserts an agreement instead of implementing it with a var(). */
  --dk-component-code-input-label-font-family: var(--dk-font-family-primary);
  --dk-component-code-input-label-font-size: var(--dk-font-overline-lg-text-size);
  --dk-component-code-input-label-line-height: var(--dk-font-overline-lg-line-height);
  --dk-component-code-input-label-letter-spacing: 0.08em;
  --dk-component-code-input-label-font-weight: var(--dk-primitive-font-weight-bold);
  /* THE SMALL LABEL (data-label-size="small", 6 Nov), Input's: the overline's
     md with a little more air under it. */
  --dk-component-code-input-small-label-font-size: var(--dk-font-overline-md-text-size);
  --dk-component-code-input-small-label-line-height: var(--dk-font-overline-md-line-height);
  --dk-component-code-input-small-label-gap: var(--dk-spacing-2-5);
  --dk-component-code-input-caption-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-code-input-caption-line-height: var(--dk-font-body-sm-line-height);
  /* Input's measurement, and the same near-fit name: error-default is the
     status FILL and GLYPH rung and measures 3.48:1 on a light page, below AA
     for text; on-subtle is the reading rung and passes in both themes. See
     components/input/tokens.css for the full note and the seam to repoint when
     a --dk-text-<status>-on-page family lands. */
  --dk-component-code-input-error-color: var(--dk-text-error-outline);
}

/* ── The cells row's width, for anything beside the field ─────────────────
   ON THE PAGE, the one exception to the scoping above, and that is the
   point of them: a message, a timer or a button under a code field sized to
   its cells (data-width="cells") is a sibling, outside the component, and has
   to read the same width. Six cells and five gaps at each rung, from the same
   primitives and alias the cell tokens above use (test/code-input-width pins
   them equal to the field's own row). A large field is medium on a phone
   (styles.css), so its width is medium's there.
   ON THE BRAND AND DENSITY SCOPES, not :root: those are where --dk-spacing-*
   is declared, and a custom property resolves its var() where it is
   declared, so on :root the gap would be undefined (the reason no collection
   sits there, test/collection-scoping), and under a density it would be the
   page's gap rather than the field's. Every kit page has a [data-brand]
   root, so anything on the page reads them. They follow the density of the
   nearest [data-density], the scope the field and its sibling share (a
   wrapper, or the field's own root for its caption): there the token and
   the field agree to the pixel (test/code-input-width). A density on the
   field's root alone is the field's; a sibling outside it reads the page's,
   so put the density on a wrapper round both. */
[data-brand], [data-brand] [data-density] {
  --dk-component-code-input-cells-width-small: calc(6 * var(--dk-primitive-scale-10) + 5 * var(--dk-spacing-2));
  --dk-component-code-input-cells-width-medium: calc(6 * var(--dk-primitive-scale-12) + 5 * var(--dk-spacing-2));
  --dk-component-code-input-cells-width-large: calc(6 * var(--dk-primitive-scale-14) + 5 * var(--dk-spacing-2));
}
@media (max-width: 768px) {
  [data-brand], [data-brand] [data-density] {
    --dk-component-code-input-cells-width-large: var(--dk-component-code-input-cells-width-medium);
  }
}

/* Generated by scripts/build.js: this component's root colours, again on
   each part that resets a status tone, so they resolve against the reset. */
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-code-input .dk-component-code-input__control:not(.dk-component-code-input[data-ready] *),
.dk-component-code-input:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-code-input__control:not(.dk-component-code-input[data-ready] *),
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-code-input .dk-component-code-input__cell,
.dk-component-code-input:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-code-input__cell {
  --dk-component-code-input-error-color: var(--dk-text-error-outline);
}

/* ══════════════════════════════════ drift-kit:layer components/textarea/tokens.css ══════════════════════════════════ */
/* ============================================================================
   Text area: component token collection (--dk-component-textarea-*)
   ----------------------------------------------------------------------------
   THE SAME FIELD AS INPUT, BY CONSTRUCTION. Every colour here is the mapped
   field palette Input reads (tokens/mapped/field.css), not Input's own
   tokens: components do not reach into each other, and the palette is the
   shared thing. The contract gate holds the two to one look.

   SIZES ARE INPUT'S RUNGS. Type, inline padding and block padding match, so a
   one-row text area lines up with an input beside it and a form reads as one
   family.
   ============================================================================ */
.dk-component-textarea {
  --dk-component-textarea-gap: var(--dk-spacing-1-5);
  --dk-component-textarea-count-gap: var(--dk-spacing-3);

  --dk-component-textarea-label-font-family: var(--dk-font-family-primary);
  --dk-component-textarea-label-font-size: var(--dk-font-overline-lg-text-size);
  --dk-component-textarea-label-line-height: var(--dk-font-overline-lg-line-height);
  --dk-component-textarea-label-letter-spacing: 0.08em;
  --dk-component-textarea-label-font-weight: var(--dk-primitive-font-weight-bold);

  --dk-component-textarea-font-family: var(--dk-font-family-primary);
  --dk-component-textarea-font-weight: var(--dk-primitive-font-weight-regular);
  --dk-component-textarea-small-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-textarea-small-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-textarea-font-size: var(--dk-font-input-sm-text-size);
  --dk-component-textarea-line-height: var(--dk-font-input-sm-line-height);
  --dk-component-textarea-large-font-size: var(--dk-font-body-md-text-size);
  --dk-component-textarea-large-line-height: var(--dk-font-body-md-line-height);

  /* ONE ROW IS EXACTLY AN INPUT'S HEIGHT. Input's height is its padding
     doubled plus a line box that is not the one its text sits on (medium:
     12 + 20 + 12 = 44 around a 22px line), so borrowing its padding made a
     one-row text area 46px. The block padding here is solved from Input's
     height formula instead: (height - this rung's line - the two borders) / 2,
     for 38 / 44 / 52 border to border, as Input measures (border-box). */
  --dk-component-textarea-small-height: calc(var(--dk-primitive-scale-2-5) * 2 + var(--dk-font-body-xsm-line-height));
  --dk-component-textarea-height: calc(var(--dk-primitive-scale-3) * 2 + var(--dk-font-body-sm-line-height));
  --dk-component-textarea-large-height: calc(var(--dk-primitive-scale-3-5) * 2 + var(--dk-font-input-md-line-height));
  --dk-component-textarea-small-padding-block: calc((var(--dk-component-textarea-small-height) - var(--dk-font-body-sm-line-height) - 2 * var(--dk-border-width-25)) / 2);
  --dk-component-textarea-padding-block: calc((var(--dk-component-textarea-height) - var(--dk-font-input-sm-line-height) - 2 * var(--dk-border-width-25)) / 2);
  --dk-component-textarea-large-padding-block: calc((var(--dk-component-textarea-large-height) - var(--dk-font-body-md-line-height) - 2 * var(--dk-border-width-25)) / 2);
  --dk-component-textarea-padding-inline: var(--dk-primitive-scale-2-5);
  --dk-component-textarea-large-padding-inline: var(--dk-primitive-scale-3-5);

  --dk-component-textarea-radius: var(--dk-border-radius-200);
  --dk-component-textarea-border-width: var(--dk-border-width-25);
  --dk-component-textarea-focus-ring-width: var(--dk-border-width-100);

  --dk-component-textarea-caption-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-textarea-caption-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-textarea-caption-color: var(--dk-text-neutral-default);
  --dk-component-textarea-error-color: var(--dk-text-error-outline);

  /* The counter: quiet until it matters. Warning from 90% of the limit, the
     error colour once a soft limit is passed. The "on subtle" text rungs, not
     warning-default: that orange measured 2.33:1 as text on a light page. */
  --dk-component-textarea-count-color: var(--dk-text-neutral-default);
  --dk-component-textarea-count-warning-color: var(--dk-text-warning-outline);
  --dk-component-textarea-count-over-color: var(--dk-text-error-outline);
}

/* Generated by scripts/build.js: this component's root colours, again on
   each part that resets a status tone, so they resolve against the reset. */
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-textarea .dk-component-textarea__field,
.dk-component-textarea:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-textarea__field {
  --dk-component-textarea-caption-color: var(--dk-text-neutral-default);
  --dk-component-textarea-error-color: var(--dk-text-error-outline);
  --dk-component-textarea-count-color: var(--dk-text-neutral-default);
  --dk-component-textarea-count-warning-color: var(--dk-text-warning-outline);
  --dk-component-textarea-count-over-color: var(--dk-text-error-outline);
}

/* ═══════════════════════════════════ drift-kit:layer components/stepper/tokens.css ═══════════════════════════════════ */
/* ============================================================================
   Stepper: component token collection (--dk-component-stepper-*)
   ----------------------------------------------------------------------------
   ONE STEPPER, THREE LOOKS (1 Oct). The component library shipped four React
   components for one idea (a text row, icon circles, numbered circles with
   descriptions, vertical cards). Here it is one structure, an ordered list
   in a named nav, and the look is an attribute: numbered (default), dots,
   segments, or inline (the words beside each number, no connectors);
   horizontal or vertical. Each variant puts its labels where they read best
   (beside for inline, below for the rest); data-labels="hidden" keeps them
   for screen readers only.

   A STEP HAS FOUR LOOKS (2 Oct, the component library's): current (solid
   primary, white in it), complete (quiet: neutral, only the check primary),
   upcoming (a neutral outline) and error (the error family, an alert glyph). Error is its own attribute rather than a fourth state, so
   the current step can be the one in error and still say both.
   ============================================================================ */
.dk-component-stepper {
  /* ── Sizes: the indicator, and the type that goes with it ── */
  --dk-component-stepper-small-indicator-size: var(--dk-primitive-scale-6);
  --dk-component-stepper-indicator-size: var(--dk-primitive-scale-8);
  --dk-component-stepper-large-indicator-size: var(--dk-primitive-scale-10);
  --dk-component-stepper-small-number-font-size: var(--dk-font-body-xsm-text-size);
  --dk-component-stepper-number-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-stepper-large-number-font-size: var(--dk-font-body-md-text-size);
  --dk-component-stepper-small-label-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-stepper-small-label-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-stepper-label-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-stepper-label-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-stepper-large-label-font-size: var(--dk-font-body-md-text-size);
  --dk-component-stepper-large-label-line-height: var(--dk-font-body-md-line-height);
  --dk-component-stepper-description-font-size: var(--dk-font-body-xsm-text-size);
  --dk-component-stepper-description-line-height: var(--dk-font-body-xsm-line-height);
  --dk-component-stepper-font-family: var(--dk-font-family-primary);
  --dk-component-stepper-number-font-weight: var(--dk-primitive-font-weight-semi-bold);
  --dk-component-stepper-label-font-weight: var(--dk-primitive-font-weight-medium);
  --dk-component-stepper-label-font-weight-current: var(--dk-primitive-font-weight-semi-bold);
  --dk-component-stepper-icon-size: 55%;
  --dk-component-stepper-indicator-border-width: var(--dk-border-width-25);
  /* The hairline the indicator sizes are drawn at, the thin tier's. */
  --dk-component-stepper-indicator-border-width-base: var(--dk-primitive-scale-0-25);

  /* ── Spacing ── */
  --dk-component-stepper-gap: var(--dk-spacing-2);
  --dk-component-stepper-text-gap: var(--dk-spacing-0-5);
  --dk-component-stepper-connector-thickness: var(--dk-border-width-50);
  --dk-component-stepper-vertical-step-gap: var(--dk-spacing-6);
  --dk-component-stepper-content-gap: var(--dk-spacing-3);
  --dk-component-stepper-target-radius: var(--dk-border-radius-200);
  /* The row a step you can go back to sits in: it tints on hover and press. */
  --dk-component-stepper-target-surface-hover: var(--dk-surface-card-hover);
  --dk-component-stepper-target-surface-active: var(--dk-surface-card-active);
  /* Inline: the space between one step and the next, with no connector in it. */
  --dk-component-stepper-inline-gap: var(--dk-spacing-6);
  --dk-component-stepper-target-padding: var(--dk-spacing-1);
  /* A step you can click: a bigger hover and press area. */
  --dk-component-stepper-target-padding-block-interactive: var(--dk-spacing-2);
  --dk-component-stepper-target-padding-inline-interactive: var(--dk-spacing-3);

  /* ── Complete: quiet, a neutral disc with the check in primary ── */
  --dk-component-stepper-complete-surface: var(--dk-surface-neutral-subtle);
  --dk-component-stepper-complete-surface-hover: var(--dk-surface-neutral-subtle-hover);
  --dk-component-stepper-complete-surface-active: var(--dk-surface-neutral-subtle-active);
  --dk-component-stepper-complete-icon: var(--dk-icon-primary-default);
  --dk-component-stepper-complete-icon-hover: var(--dk-icon-primary-hover);
  --dk-component-stepper-complete-icon-active: var(--dk-icon-primary-active);
  /* 2 Oct: a neutral edge, so the quiet disc still reads as a step. */
  --dk-component-stepper-complete-border: var(--dk-border-neutral-subtle);
  --dk-component-stepper-complete-border-hover: var(--dk-border-neutral-subtle-hover);
  --dk-component-stepper-complete-border-active: var(--dk-border-neutral-hover);
  /* ── Current: solid primary, the number in white ── */
  --dk-component-stepper-current-surface: var(--dk-surface-primary-default);
  --dk-component-stepper-current-surface-hover: var(--dk-surface-primary-hover);
  --dk-component-stepper-current-surface-active: var(--dk-surface-primary-active);
  --dk-component-stepper-current-border: var(--dk-component-stepper-current-surface);
  --dk-component-stepper-current-text: var(--dk-text-on-primary-fill);
  /* ── Upcoming: a neutral outline on the surface it sits on ── */
  --dk-component-stepper-upcoming-surface: var(--dk-surface-current);
  --dk-component-stepper-upcoming-border: var(--dk-border-field-default);
  --dk-component-stepper-upcoming-text: var(--dk-text-neutral-default);
  /* ── Error ── */
  --dk-component-stepper-error-surface: var(--dk-surface-error-subtle);
  --dk-component-stepper-error-border: var(--dk-border-error-default);
  --dk-component-stepper-error-text: var(--dk-text-error-on-subtle);
  /* The label sits on the panel, not on the error chip: fill-less status text. */
  --dk-component-stepper-error-label: var(--dk-text-error-outline);

  /* ── Labels ── */
  --dk-component-stepper-label-color: var(--dk-text-default);
  --dk-component-stepper-label-color-upcoming: var(--dk-text-neutral-default);
  /* A completed step is quiet (2 Oct): neutral words, only its check primary. */
  --dk-component-stepper-label-color-complete: var(--dk-text-neutral-default);
  --dk-component-stepper-label-color-hover: var(--dk-text-default);
  --dk-component-stepper-description-color: var(--dk-text-neutral-default);
  --dk-component-stepper-optional-color: var(--dk-text-neutral-default);
  --dk-component-stepper-focus-ring: var(--dk-border-field-focus-ring);
  --dk-component-stepper-focus-ring-width: var(--dk-border-width-100);

  /* ── The connector: a neutral track that fills primary as a step completes ── */
  --dk-component-stepper-connector-track: var(--dk-border-field-default);
  --dk-component-stepper-connector-fill: var(--dk-border-primary-default);
  --dk-component-stepper-fill-duration: var(--dk-motion-state-duration);
  --dk-component-stepper-easing: var(--dk-motion-state-easing);
  --dk-component-stepper-state-duration: var(--dk-motion-state-duration);
  /* Moving forward, the step the line runs into waits for the fill to reach
     it before it lights up: as long as the fill takes. */
  --dk-component-stepper-arrive-delay: var(--dk-motion-state-duration);
  /* ...and as it lights up, it pulses (3 Nov, Julio). */
  --dk-component-stepper-arrive-pulse-duration: var(--dk-motion-pulse-duration);
  --dk-component-stepper-arrive-pulse-easing: var(--dk-motion-pulse-easing);

  /* ── Dots and segments ── */
  /* The current dot's halo and ring: its own width, since the 1px indicator
     line would make the ring vanish at dot size. */
  --dk-component-stepper-dot-ring-width: var(--dk-border-width-50);
  --dk-component-stepper-dot-size: var(--dk-primitive-scale-3);
  --dk-component-stepper-segment-thickness: var(--dk-primitive-scale-1-5);
  /* Vertical segments: the bar's least length, so it shows with labels hidden. */
  /* Vertical segments: the content sits close under its label and keeps
     room below it before the next bar starts. */
  --dk-component-stepper-segment-content-gap-start: var(--dk-spacing-2);
  --dk-component-stepper-segment-content-gap-end: var(--dk-spacing-4);
  --dk-component-stepper-segment-length: var(--dk-primitive-scale-8);
  --dk-component-stepper-segment-gap: var(--dk-spacing-1-5);
  --dk-component-stepper-segment-radius: var(--dk-border-radius-round-fixed);

  /* Below this width a horizontal stepper keeps its indicators and swaps the
     labels for one line, "Step 2 of 4: Payment". It is the stepper's own
     width, measured by behaviour.js, not the viewport's. */
  --dk-component-stepper-narrow: 30rem;
  /* Narrow: the most the current step's words may spread under the stepper,
     now that the other steps' words are hidden. */
  --dk-component-stepper-narrow-label-max: 12rem;
  /* Narrow inline: the gap between steps once the words beside them are hidden. */
  --dk-component-stepper-narrow-inline-gap: var(--dk-spacing-2);
}

/* ════════════════════════════════ drift-kit:layer components/pagination/tokens.css ════════════════════════════════ */
/* ============================================================================
   Pagination: component token collection (--dk-component-pagination-*)
   ----------------------------------------------------------------------------
   A PAGE IS A GHOST ICON BUTTON WITH A NUMBER FOR ITS GLYPH. The arrows are
   real icon buttons, so the pages take the same rungs (padding and line-height
   per size) and the same control colours at rest, hover and press. They read
   the same mapped tokens and primitives rather than the icon button's own
   tokens, which are scoped to its root.

   THE CURRENT PAGE IS THE CALENDAR'S CHOSEN DAY: the solid primary fill and
   the text that sits on it.
   ============================================================================ */
.dk-component-pagination {
  /* ── Rungs, the icon button's: small, medium, large. */
  --dk-component-pagination-small-padding: var(--dk-primitive-scale-2-5);
  --dk-component-pagination-small-line-height: var(--dk-font-body-xsm-line-height);
  --dk-component-pagination-small-font-size: var(--dk-font-body-xsm-text-size);
  --dk-component-pagination-small-border-radius: var(--dk-border-radius-control-100);

  --dk-component-pagination-padding: var(--dk-primitive-scale-3);
  --dk-component-pagination-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-pagination-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-pagination-border-radius: var(--dk-border-radius-control-150);

  --dk-component-pagination-large-padding: var(--dk-primitive-scale-4);
  --dk-component-pagination-large-line-height: var(--dk-font-body-md-line-height);
  --dk-component-pagination-large-font-size: var(--dk-font-body-md-text-size);
  --dk-component-pagination-large-border-radius: var(--dk-border-radius-control-200);

  /* Between the pages, and between the summary, the rows and the pages. */
  --dk-component-pagination-gap: var(--dk-spacing-1);
  --dk-component-pagination-section-gap: var(--dk-spacing-4);

  --dk-component-pagination-font-family: var(--dk-font-family-primary);
  --dk-component-pagination-page-font-weight: var(--dk-primitive-font-weight-medium);
  --dk-component-pagination-page-text: var(--dk-interactive-text);
  --dk-component-pagination-page-text-hover: var(--dk-interactive-text-hover);
  --dk-component-pagination-page-surface-hover: var(--dk-interactive-surface-hover);
  --dk-component-pagination-page-surface-active: var(--dk-interactive-surface-active);
  --dk-component-pagination-press-scale: var(--dk-interactive-press-compact);

  --dk-component-pagination-current-surface: var(--dk-interactive-selected-surface);
  --dk-component-pagination-current-surface-hover: var(--dk-interactive-selected-surface-hover);
  --dk-component-pagination-current-surface-active: var(--dk-interactive-selected-surface-active);
  --dk-component-pagination-current-text: var(--dk-interactive-selected-text);
  --dk-component-pagination-current-font-weight: var(--dk-primitive-font-weight-bold);

  --dk-component-pagination-gap-text: var(--dk-text-neutral-subtle);
  --dk-component-pagination-summary-text: var(--dk-text-neutral-subtle);
  --dk-component-pagination-summary-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-pagination-summary-line-height: var(--dk-font-body-sm-line-height);

  --dk-component-pagination-focus-ring-width: var(--dk-primitive-scale-1);
  --dk-component-pagination-focus-ring: var(--dk-border-control-hover);
}

/* ════════════════════════════════ drift-kit:layer components/breadcrumb/tokens.css ════════════════════════════════ */
/* ============================================================================
   Breadcrumb: component token collection (--dk-component-breadcrumb-*)
   ----------------------------------------------------------------------------
   A QUIET TRAIL (15 Oct, after two references Julio picked). The pages above
   this one are subtle neutral, words and icon, each a pill with room round
   it: hover and press step down the nested ramp and take the words and icon
   to full contrast, and a press shrinks it as a control does. A subtle
   neutral slash sits between them. The current page is full contrast: it is
   where you are. Optional back and forward arrows sit in their own pill to
   the left.
   ============================================================================ */
.dk-component-breadcrumb {
  --dk-component-breadcrumb-small-font-size: var(--dk-font-scale-body-small-text-size);
  --dk-component-breadcrumb-small-line-height: var(--dk-font-scale-body-small-line-height);
  --dk-component-breadcrumb-font-size: var(--dk-font-scale-body-medium-text-size);
  --dk-component-breadcrumb-line-height: var(--dk-font-scale-body-medium-line-height);
  --dk-component-breadcrumb-font-family: var(--dk-font-family-primary);

  --dk-component-breadcrumb-gap: var(--dk-spacing-1);

  /* The slash between items, and the phone's back chevron */
  --dk-component-breadcrumb-separator-size: 1em;
  /* A step fainter than the words (15 Oct): a divider, so a border tone,
     and one that steps with the surface level (neutral-subtle did not). */
  --dk-component-breadcrumb-separator-color: var(--dk-border-nested-hover);
  /* In a container, a step lighter again, still stepping with the level. */
  --dk-component-breadcrumb-container-separator-color: var(--dk-border-raised-hover);
  --dk-component-breadcrumb-back-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");

  /* A page above this one */
  --dk-component-breadcrumb-link-color: var(--dk-interactive-text);
  /* A step per state, as the fill steps (15 Oct): subtle, then one darker on
     hover, one more on a press. The glyphs follow their words. */
  --dk-component-breadcrumb-link-color-hover: var(--dk-interactive-text-hover);
  --dk-component-breadcrumb-link-color-active: var(--dk-interactive-text-active);
  --dk-component-breadcrumb-link-surface-hover: var(--dk-interactive-surface-hover);
  --dk-component-breadcrumb-link-surface-active: var(--dk-interactive-surface-active);
  --dk-component-breadcrumb-link-ring: var(--dk-border-primary-focus);
  --dk-component-breadcrumb-link-ring-width: var(--dk-primitive-scale-0-5);
  --dk-component-breadcrumb-link-font-weight: var(--dk-primitive-font-weight-regular);
  --dk-component-breadcrumb-press-scale: var(--dk-interactive-press-control);
  --dk-component-breadcrumb-padding-block: var(--dk-primitive-scale-1);
  --dk-component-breadcrumb-padding-inline: var(--dk-primitive-scale-1-5);
  --dk-component-breadcrumb-small-padding-block: var(--dk-primitive-scale-0-5);
  --dk-component-breadcrumb-small-padding-inline: var(--dk-primitive-scale-1);
  --dk-component-breadcrumb-radius: var(--dk-border-radius-control-150);
  --dk-component-breadcrumb-icon-size: var(--dk-primitive-scale-4-5);
  --dk-component-breadcrumb-small-icon-size: var(--dk-primitive-scale-4);
  --dk-component-breadcrumb-icon-gap: var(--dk-primitive-scale-1-5);
  /* Every glyph's line, on screen whatever size it is drawn: the stems of
     the words beside it (15 Oct). Glyphs take their words' colour. */
  --dk-component-breadcrumb-icon-stroke: 1.5px;
  --dk-component-breadcrumb-small-icon-stroke: 1.25px;

  /* The menu chevron: a button of its own beside the item, as tall as it */
  --dk-component-breadcrumb-chevron-size: var(--dk-primitive-scale-3-5);

  /* The current page */
  --dk-component-breadcrumb-current-color: var(--dk-text-default);
  /* Its icon in primary (15 Oct), the level-aware rung, so it steps with the panel. */
  --dk-component-breadcrumb-current-icon-color: var(--dk-icon-primary-default);
  --dk-component-breadcrumb-current-font-weight: var(--dk-primitive-font-weight-medium);
  --dk-component-breadcrumb-current-max-width: 20rem;

  /* Variants (15 Oct): Glider's names for the container round the trail.
     Ghost, the default, has none; raised stands on its own fill with an edge
     and a lift; plain is the edge alone; inset sinks into the nested fill,
     which steps with the level, no edge. */
  --dk-component-breadcrumb-container-padding: var(--dk-primitive-scale-1);
  /* Raised and plain, the edged ones, take more room inside their edge (15 Oct). */
  --dk-component-breadcrumb-edged-padding-block: var(--dk-primitive-scale-1-5);
  --dk-component-breadcrumb-edged-padding-inline: var(--dk-primitive-scale-2);
  --dk-component-breadcrumb-container-radius: var(--dk-border-radius-control-200);
  --dk-component-breadcrumb-container-border-width: var(--dk-border-width-25);
  --dk-component-breadcrumb-raised-surface: var(--dk-surface-raised-default);
  --dk-component-breadcrumb-raised-border: var(--dk-border-raised-control-default);
  --dk-component-breadcrumb-raised-shadow: var(--dk-shadow-raised);
  --dk-component-breadcrumb-plain-border: var(--dk-border-raised-default);
  /* On the control ramp (16 Oct): the nested rungs on a plain surface, and
     the tone's and the level's next rung on a toned one; the nested fill no
     tone remaps made every inset a tone boundary, page grey in any tone. */
  --dk-component-breadcrumb-inset-surface: var(--dk-surface-control-default);
  /* Between the arrows and the trail inside a container */
  --dk-component-breadcrumb-divider: var(--dk-border-raised-default);
  --dk-component-breadcrumb-divider-space: var(--dk-primitive-scale-2);
  /* On the inset's own fill the raised hairline all but vanished: a level-aware
     step deeper than the well. */
  --dk-component-breadcrumb-inset-divider: var(--dk-border-control-hover);
  /* Inside a status tone an inset trail's words go full strength (16 Oct,
     Julio): on the tone's inset rung the quiet greys fell to 2.5:1 in dark at
     level 2. The current page keeps its weight to tell it apart. */
  --dk-component-breadcrumb-inset-toned-color: var(--dk-text-default);

  /* Back and forward, in their own pill to the left */
  --dk-component-breadcrumb-arrows-surface: var(--dk-surface-nested-default);
  /* Square buttons with rounded corners in a rounded group (15 Oct). */
  --dk-component-breadcrumb-arrows-radius: var(--dk-border-radius-control-200);
  --dk-component-breadcrumb-arrow-radius: var(--dk-border-radius-control-150);
  --dk-component-breadcrumb-arrows-padding: var(--dk-primitive-scale-0-5);
  --dk-component-breadcrumb-arrows-gap: var(--dk-primitive-scale-0-5);
  --dk-component-breadcrumb-arrows-margin: var(--dk-primitive-scale-2);
  --dk-component-breadcrumb-arrow-size: var(--dk-primitive-scale-7);
  --dk-component-breadcrumb-arrow-icon-size: var(--dk-primitive-scale-4-5);
  --dk-component-breadcrumb-small-arrow-size: var(--dk-primitive-scale-6);
  --dk-component-breadcrumb-small-arrow-icon-size: var(--dk-primitive-scale-4);
  --dk-component-breadcrumb-arrow-color: var(--dk-icon-neutral-default);
  --dk-component-breadcrumb-arrow-color-hover: var(--dk-icon-default-body);
  --dk-component-breadcrumb-arrow-surface-hover: var(--dk-interactive-surface-hover);
  --dk-component-breadcrumb-arrow-surface-active: var(--dk-interactive-surface-active);
  --dk-component-breadcrumb-arrow-color-disabled: var(--dk-icon-disabled-subtle);
}

/* Generated by scripts/build.js: this component's root colours, again on
   each part that resets a status tone, so they resolve against the reset. */
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-breadcrumb .dk-component-breadcrumb__arrows:not(.dk-component-breadcrumb:is([data-variant="raised"], [data-variant="plain"], [data-variant="inset"]) *),
.dk-component-breadcrumb:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-breadcrumb__arrows:not(.dk-component-breadcrumb:is([data-variant="raised"], [data-variant="plain"], [data-variant="inset"]) *) {
  --dk-component-breadcrumb-separator-color: var(--dk-border-nested-hover);
  --dk-component-breadcrumb-container-separator-color: var(--dk-border-raised-hover);
  --dk-component-breadcrumb-link-color: var(--dk-interactive-text);
  --dk-component-breadcrumb-link-color-hover: var(--dk-interactive-text-hover);
  --dk-component-breadcrumb-link-color-active: var(--dk-interactive-text-active);
  --dk-component-breadcrumb-link-surface-hover: var(--dk-interactive-surface-hover);
  --dk-component-breadcrumb-link-surface-active: var(--dk-interactive-surface-active);
  --dk-component-breadcrumb-link-ring: var(--dk-border-primary-focus);
  --dk-component-breadcrumb-current-color: var(--dk-text-default);
  --dk-component-breadcrumb-current-icon-color: var(--dk-icon-primary-default);
  --dk-component-breadcrumb-raised-surface: var(--dk-surface-raised-default);
  --dk-component-breadcrumb-raised-border: var(--dk-border-raised-control-default);
  --dk-component-breadcrumb-plain-border: var(--dk-border-raised-default);
  --dk-component-breadcrumb-inset-surface: var(--dk-surface-control-default);
  --dk-component-breadcrumb-divider: var(--dk-border-raised-default);
  --dk-component-breadcrumb-inset-divider: var(--dk-border-control-hover);
  --dk-component-breadcrumb-inset-toned-color: var(--dk-text-default);
  --dk-component-breadcrumb-arrows-surface: var(--dk-surface-nested-default);
  --dk-component-breadcrumb-arrow-color: var(--dk-icon-neutral-default);
  --dk-component-breadcrumb-arrow-color-hover: var(--dk-icon-default-body);
  --dk-component-breadcrumb-arrow-surface-hover: var(--dk-interactive-surface-hover);
  --dk-component-breadcrumb-arrow-surface-active: var(--dk-interactive-surface-active);
  --dk-component-breadcrumb-arrow-color-disabled: var(--dk-icon-disabled-subtle);
}

/* ══════════════════════════════ drift-kit:layer components/payment-form/tokens.css ══════════════════════════════ */
/* ============================================================================
   Payment form: component token collection (--dk-component-payment-form-*)
   ----------------------------------------------------------------------------
   STRIPE'S PAYMENT ELEMENT, ON THE KIT'S TOKENS. Stripe draws its fields in
   an iframe, which cannot read a custom property, so behaviour.js resolves
   these where the form sits (its theme, level and tone) and hands Stripe the
   concrete values through its Appearance API. They are Input's choices, read
   from the same mapped tokens, so a card field sits beside a kit field as one
   form: the field ramp, the focus edge and ring, the uppercase label, the
   error colour, the radius and the type.
   ============================================================================ */
.dk-component-payment-form {
  --dk-component-payment-form-font-family: var(--dk-font-family-primary);
  --dk-component-payment-form-font-size: var(--dk-font-input-sm-text-size);
  --dk-component-payment-form-spacing-unit: var(--dk-primitive-scale-1);
  --dk-component-payment-form-radius: var(--dk-border-radius-200);
  --dk-component-payment-form-gap: var(--dk-spacing-4);

  --dk-component-payment-form-primary: var(--dk-surface-primary-default);
  --dk-component-payment-form-surface: var(--dk-surface-field-default);
  /* The plain field border, as Input's plain field (28 Oct). */
  --dk-component-payment-form-border: var(--dk-border-field-plain-default);
  --dk-component-payment-form-border-hover: var(--dk-border-field-hover);
  --dk-component-payment-form-border-focus: var(--dk-border-field-focus);
  --dk-component-payment-form-border-width: var(--dk-border-width-25);
  --dk-component-payment-form-ring: var(--dk-border-field-focus-ring);
  --dk-component-payment-form-ring-width: var(--dk-border-width-100);
  --dk-component-payment-form-padding-block: var(--dk-primitive-scale-3);
  --dk-component-payment-form-padding-inline: var(--dk-primitive-scale-2-5);

  --dk-component-payment-form-text: var(--dk-text-field-default);
  --dk-component-payment-form-text-secondary: var(--dk-text-neutral-subtle);
  --dk-component-payment-form-placeholder: var(--dk-text-field-placeholder);
  --dk-component-payment-form-danger: var(--dk-text-error-outline);
  --dk-component-payment-form-icon: var(--dk-icon-field-default);

  --dk-component-payment-form-label-color: var(--dk-text-default);
  --dk-component-payment-form-label-font-size: var(--dk-font-overline-lg-text-size);
  --dk-component-payment-form-label-font-weight: var(--dk-primitive-font-weight-bold);
  --dk-component-payment-form-label-letter-spacing: 0.08em;

  /* The payment method tabs (Card, Apple Pay...): a field-like tile; the
     chosen one is the kit's selected look, a solid primary with white words
     and icon (16 Oct, Julio: primary words on the primary fill Stripe's night
     theme gives a chosen tab could not be read). */
  --dk-component-payment-form-tab-surface: var(--dk-surface-field-default);
  --dk-component-payment-form-tab-surface-hover: var(--dk-surface-field-hover);
  --dk-component-payment-form-tab-border: var(--dk-border-field-plain-default);
  --dk-component-payment-form-tab-selected-surface: var(--dk-interactive-selected-surface);
  --dk-component-payment-form-tab-selected-surface-hover: var(--dk-interactive-selected-surface-hover);
  --dk-component-payment-form-tab-selected-border: var(--dk-interactive-selected-surface);
  --dk-component-payment-form-tab-selected-text: var(--dk-interactive-selected-text);

  /* The frame's own message, below the element */
  --dk-component-payment-form-error-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-payment-form-error-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-payment-form-element-min-height: var(--dk-primitive-scale-40);
}

/* ═════════════════════════════════════ drift-kit:layer components/table/tokens.css ═════════════════════════════════════ */
/* ============================================================================
   Table — component token collection (--dk-component-table-*)
   ----------------------------------------------------------------------------
   SCOPED TO THE COMPONENT, for the reason Input's collection records: custom
   properties inherit, so a collection declared on the theme legs reaches every
   element in the document, and declared on the component it resolves against
   that element's own nearest theme, tone and level instead.

   THE ROWS ARE A FIELD'S ARITHMETIC, not a number picked to look right. A table
   sits in the same forms and panels a field does, and a row that agrees with
   nothing around it is what makes a page look assembled rather than designed:
   padding doubled plus the line box it holds, which is how Input derives
   38 / 44 / 52 and how this derives 36 / 44 / 56.

     small    scale-2 (8px)   x2 + body-sm (20px) = 36
     medium   scale-3 (12px)  x2 + body-sm (20px) = 44
     large    scale-4 (16px)  x2 + body-md (24px) = 56
   THE TEXT IS A STEP SMALLER THAN BODY COPY (1 Oct): 14px, 16 at large. A
   table carries a lot, and at 16 (20 at large) little of it fit across. The
   rungs did not move; the padding took the difference.

   Medium lands on Input's own 44 exactly, which is the rung that matters: a
   table and a field share a page constantly, and a row the same height as the
   filter above it reads as one system. Small goes below Input's 38 because a
   dense table is a real ask and a 38px row is not dense; large goes above its
   52 because the reason to reach for it is a row holding two lines or an
   avatar, and 52 does not hold either comfortably.

   THE RULE BETWEEN ROWS IS NOT IN THAT NUMBER. It is a real border rather than
   an inset shadow, so it survives forced-colors mode and it prints, and a
   border takes its own pixel: a medium row measures 45 in the box model, 44 of
   which is the rung. The head shares the body's line box since the text
   went to 14px, so it sits on the same rung as a row; the fill and the
   weight are what make it the heading.
   ============================================================================ */
.dk-component-table, .dk-component-table__scroll, .dk-component-table__ghost {
  /* ── The rungs ── */
  --dk-component-table-small-padding-y: var(--dk-primitive-scale-2);
  --dk-component-table-padding-y: var(--dk-primitive-scale-3);
  --dk-component-table-large-padding-y: var(--dk-primitive-scale-4);

  /* Between a cell's text and the column beside it. One value at every rung:
     the row grows vertically with its size and a column does not get wider
     because the rows got taller. */
  --dk-component-table-padding-inline: var(--dk-spacing-3);
  /* The scroller's scrollbar: the house one a Select or Menu list wears, an
     inset pill thumb on a clear track that brightens on hover (3 Nov, Julio). */
  --dk-component-table-scrollbar-size: var(--dk-primitive-scale-3);
  --dk-component-table-scrollbar-inset: var(--dk-primitive-scale-0-75);
  --dk-component-table-scrollbar-thumb: var(--dk-border-raised-active);
  --dk-component-table-scrollbar-thumb-hover: var(--dk-icon-neutral-default);

  /* ── The head ──
     A FILL AND A HAIRLINE, not a heavy rule. --dk-surface-nested-default is one
     rung DOWN from whatever surface the table is sitting on, at every level and
     in both themes, so a header inside a card separates from the card the same
     way it separates from the page. The hand-rolled tables this component
     replaces all reached for a grey literal here and all picked a different
     one.

     THE TYPE IS SENTENCE CASE, and that is a decision rather than an omission.
     The kit's uppercase overline is the FORM LABEL treatment, the thing that
     names a control you are about to fill in; a column header names the column
     you are reading down. Uppercase costs legibility in the one place a table
     cannot afford it, a row of six or seven short headings scanned sideways,
     and it buys a distinction this component gets for free from the fill. */
  --dk-component-table-head-surface: var(--dk-surface-nested-default);
  /* The frame of the outline and raised variants: Card's outline edge and
     Box's raised surface, edge and shadow, at the large Box corner. */
  --dk-component-table-frame-radius: var(--dk-border-radius-300);
  --dk-component-table-frame-border-width: var(--dk-border-width-25);
  --dk-component-table-outline-border: var(--dk-border-hairline-current);
  --dk-component-table-raised-border: var(--dk-border-raised-default);
  --dk-component-table-raised-surface: var(--dk-surface-raised-default);
  --dk-component-table-raised-shadow: var(--dk-shadow-floating);
  /* The header row's top corners (1 Oct): the fill is the head's shape, so
     it reads as one rounded bar rather than a strip cut off square. */
  --dk-component-table-head-radius: var(--dk-border-radius-200);
  --dk-component-table-head-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-table-head-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-table-head-font-weight: var(--dk-primitive-font-weight-semi-bold);
  --dk-component-table-head-color: var(--dk-text-neutral-default);

  /* ── The body ── */
  --dk-component-table-font-family: var(--dk-font-family-primary);
  --dk-component-table-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-table-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-table-large-font-size: var(--dk-font-body-md-text-size);
  --dk-component-table-large-line-height: var(--dk-font-body-md-line-height);
  --dk-component-table-font-weight: var(--dk-primitive-font-weight-regular);
  /* Default, not neutral (1 Oct): body text is what the table is for, and it
     read as secondary beside the head it should outrank. */
  --dk-component-table-color: var(--dk-text-default);

  /* THE LINE BETWEEN ROWS FOLLOWS THE SURFACE. --dk-border-hairline-current is
     the plain hairline on the page and the tone's own hairline inside a tinted
     panel, which is what Divider's default reads and for the same reason: a
     table in an error card should not be ruled in neutral grey. */
  --dk-component-table-rule: var(--dk-border-hairline-current);
  --dk-component-table-rule-width: var(--dk-border-width-separator-25);

  /* ── Row states ──
     Hover and press are the NESTED ladder's own next rungs, so a hovered row
     steps the same distance from its surface as a hovered field does from its
     own. Selected is a primary tint rather than a darker neutral, because
     selection is a decision the reader made and the other two are feedback
     about the pointer. */
  --dk-component-table-row-hover: var(--dk-interactive-surface-hover);
  --dk-component-table-row-active: var(--dk-interactive-surface-active);
  --dk-component-table-row-selected: var(--dk-interactive-highlight-surface);
  --dk-component-table-row-selected-hover: var(--dk-interactive-highlight-surface-hover);
  /* Rows ease between those states (1 Oct) rather than snapping. Fast, on
     the snappy standard curve, and motion tokens, so reduced motion makes it
     instant. A sticky cell's fill is inherit, so it eases with its row. */
  --dk-component-table-row-duration: var(--dk-motion-state-duration);
  --dk-component-table-row-easing: var(--dk-motion-state-easing);
  /* THE ZEBRA STRIPE IS FAINTER THAN THE HEAD (1 Oct). It was the head's
     own fill, so every other row read as one more header. It is now half of
     that fill mixed into the surface the table sits on: an opaque mix of two
     tokens, so it follows the level, tone and theme, and sits between the
     page and the head at each of them. */
  --dk-component-table-zebra-mix: 50%;
  --dk-component-table-zebra: color-mix(in srgb, var(--dk-component-table-head-surface) var(--dk-component-table-zebra-mix), var(--dk-surface-current));

  /* ── The sort button ──
     A column header that sorts is a real <button> filling the cell, so it needs
     the cell's own padding back and a hover of its own. The glyph is the only
     part that is not the header's type. */
  --dk-component-table-sort-icon-size: var(--dk-primitive-scale-4);
  --dk-component-table-sort-gap: var(--dk-spacing-1);
  --dk-component-table-sort-hover: var(--dk-surface-nested-hover);
  /* Pressed, one rung past hover (1 Oct): the fill steps 25 / 50 / 100 in
     light and 900 / 800 / 700 in dark. */
  --dk-component-table-sort-active: var(--dk-surface-nested-active);
  --dk-component-table-sort-radius: var(--dk-border-radius-100);
  /* THE ARROW STEPS WITH THE FILL (1 Oct). Measured: the resting arrow read
     --dk-icon-disabled-subtle, neutral-100 on a neutral-25 header in light and
     neutral-800 on neutral-900 in dark, all but gone.

     IT IS MIXED FROM THE HEADER ITSELF: the head's text colour, into the
     fill of each state, at a rising share. A ladder of existing tokens does
     not survive the surface levels: at data-surface="0" the kit remaps
     --dk-text-neutral-subtle onto the same rung as --dk-icon-neutral-subtle,
     at level 1 the two subtle icon rungs are equal, at level 2 hover is
     lighter than rest. A mix of the head's own two colours tracks the fill at
     every level, tone and theme by construction. It is an opaque mix, not the
     alpha Icon button tried and rejected: it has a colour of its own, which
     the contrast gate can measure.
     Sorted, the arrow is primary (below). */
  /* The header's TEXT steps with the fill too (1 Oct): neutral at rest,
     halfway to the default text on hover, the default text pressed, the
     same ladder the sorted arrow climbs. */
  --dk-component-table-sort-color: var(--dk-component-table-head-color);
  --dk-component-table-sort-color-hover: color-mix(in srgb, var(--dk-component-table-head-color), var(--dk-text-default));
  --dk-component-table-sort-color-active: var(--dk-text-default);
  --dk-component-table-sort-icon-mix-rest: 55%;
  --dk-component-table-sort-icon-mix-hover: 70%;
  --dk-component-table-sort-icon-mix-active: 85%;
  --dk-component-table-sort-icon-color: color-mix(in srgb, var(--dk-component-table-head-color) var(--dk-component-table-sort-icon-mix-rest), var(--dk-component-table-head-surface));
  --dk-component-table-sort-icon-color-hover: color-mix(in srgb, var(--dk-component-table-head-color) var(--dk-component-table-sort-icon-mix-hover), var(--dk-component-table-sort-hover));
  --dk-component-table-sort-icon-color-active: color-mix(in srgb, var(--dk-component-table-head-color) var(--dk-component-table-sort-icon-mix-active), var(--dk-component-table-sort-active));
  /* THE SORTED ARROW IS PRIMARY (1 Oct): grey against grey, the sorted column
     was a step darker than the rest and did not read as the active one. The
     strong primary text rung, at a rising share into each state's fill, for
     the reason the unsorted ladder mixes: the primary icon tokens are
     level-remapped too (at level 1 their hover equals rest). */
  --dk-component-table-sort-icon-sorted-mix-rest: 85%;
  --dk-component-table-sort-icon-sorted-mix-hover: 92%;
  --dk-component-table-sort-icon-color-sorted: color-mix(in srgb, var(--dk-text-primary-on-subtle) var(--dk-component-table-sort-icon-sorted-mix-rest), var(--dk-component-table-head-surface));
  --dk-component-table-sort-icon-color-sorted-hover: color-mix(in srgb, var(--dk-text-primary-on-subtle) var(--dk-component-table-sort-icon-sorted-mix-hover), var(--dk-component-table-sort-hover));
  --dk-component-table-sort-icon-color-sorted-active: var(--dk-text-primary-on-subtle);

  /* ── Empty and loading rows ── */
  --dk-component-table-empty-color: var(--dk-text-neutral-default);
  --dk-component-table-empty-padding-y: var(--dk-primitive-scale-8);
  /* LOADING IS THE KIT'S LOADING SPINNER (1 Oct), ring, small, with its
     message under it, which replaced a hand-rolled one. The message hangs
     below the spinner (that component's choice, so the spinner stays
     centred), so the row makes room for it: the empty padding, plus the
     spinner's message gap and line, written from the same alias tokens the
     spinner reads rather than reaching into its collection. */
  --dk-component-table-loading-padding-bottom: calc(var(--dk-primitive-scale-8) + var(--dk-primitive-scale-5) + var(--dk-font-body-md-line-height));

  /* ── Sticky head ──
     How far below the top of the viewport the head stops, for a page with a
     fixed bar of its own. No shadow (1 Oct): one per cell drew a seam at each
     column; a single hairline under the head travels with it instead. */
  --dk-component-table-sticky-offset: 0px;

  /* ── Reordering (1 Oct, Julio's interaction) ──
     The column lifts into a GHOST that follows the pointer anywhere, and its
     slot becomes a PLACEHOLDER in the primary family, fill and edge, which
     moves between the columns as you drag; they slide aside, and on release
     the ghost glides into the placeholder. */
  --dk-component-table-placeholder-surface: var(--dk-surface-primary-subtle);
  --dk-component-table-placeholder-border: var(--dk-border-primary-default);
  --dk-component-table-placeholder-border-width: var(--dk-border-width-50);
  --dk-component-table-ghost-surface: var(--dk-surface-current);
  --dk-component-table-ghost-shadow: var(--dk-shadow-floating);
  --dk-component-table-ghost-radius: var(--dk-border-radius-200);
  --dk-component-table-reorder-duration: var(--dk-motion-travel-duration);
  --dk-component-table-reorder-easing: var(--dk-motion-travel-easing);
  --dk-component-table-drop-duration: var(--dk-motion-state-duration);

  /* ── The actions cell ──
     A kebab button is taller than a line of text, so the cell trims its block
     padding to keep the row on its rung. */
  --dk-component-table-actions-padding-block: 0px; /* a small icon button, 38px, sits inside every rung but small (where the row grows by 2) */
  --dk-component-table-actions-padding-inline: var(--dk-spacing-1-5);
  /* A Tag is 30px against the 24px line box, so a status chip with the full
     padding made a medium row 51 rather than 45 (measured 1 Oct). A cell
     holding one trims to this, which keeps the row on its rung. */
  --dk-component-table-chip-padding-block: var(--dk-primitive-scale-1);

  --dk-component-table-caption-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-table-caption-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-table-caption-color: var(--dk-text-neutral-default);
}

/* Generated by scripts/build.js: this component's root colours, again on
   each part that resets a status tone, so they resolve against the reset. */
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-table .dk-component-table__scroll:has(> .dk-component-table[data-variant="raised"]),
.dk-component-table:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-table__scroll:has(> .dk-component-table[data-variant="raised"]),
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-table thead th,
.dk-component-table:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) thead th,
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-table tbody tr[data-selected],
.dk-component-table:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) tbody tr[data-selected],
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-table tfoot tr,
.dk-component-table:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) tfoot tr,
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-table :is(th, td)[data-placeholder],
.dk-component-table:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) :is(th, td)[data-placeholder],
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-table tr > :is(th, td)[data-placeholder],
.dk-component-table:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) tr > :is(th, td)[data-placeholder] {
  --dk-component-table-scrollbar-thumb: var(--dk-border-raised-active);
  --dk-component-table-scrollbar-thumb-hover: var(--dk-icon-neutral-default);
  --dk-component-table-head-surface: var(--dk-surface-nested-default);
  --dk-component-table-outline-border: var(--dk-border-hairline-current);
  --dk-component-table-raised-border: var(--dk-border-raised-default);
  --dk-component-table-raised-surface: var(--dk-surface-raised-default);
  --dk-component-table-head-color: var(--dk-text-neutral-default);
  --dk-component-table-color: var(--dk-text-default);
  --dk-component-table-rule: var(--dk-border-hairline-current);
  --dk-component-table-row-hover: var(--dk-interactive-surface-hover);
  --dk-component-table-row-active: var(--dk-interactive-surface-active);
  --dk-component-table-row-selected: var(--dk-interactive-highlight-surface);
  --dk-component-table-row-selected-hover: var(--dk-interactive-highlight-surface-hover);
  --dk-component-table-zebra: color-mix(in srgb, var(--dk-component-table-head-surface) var(--dk-component-table-zebra-mix), var(--dk-surface-current));
  --dk-component-table-sort-hover: var(--dk-surface-nested-hover);
  --dk-component-table-sort-active: var(--dk-surface-nested-active);
  --dk-component-table-sort-color: var(--dk-component-table-head-color);
  --dk-component-table-sort-color-hover: color-mix(in srgb, var(--dk-component-table-head-color), var(--dk-text-default));
  --dk-component-table-sort-color-active: var(--dk-text-default);
  --dk-component-table-sort-icon-color: color-mix(in srgb, var(--dk-component-table-head-color) var(--dk-component-table-sort-icon-mix-rest), var(--dk-component-table-head-surface));
  --dk-component-table-sort-icon-color-hover: color-mix(in srgb, var(--dk-component-table-head-color) var(--dk-component-table-sort-icon-mix-hover), var(--dk-component-table-sort-hover));
  --dk-component-table-sort-icon-color-active: color-mix(in srgb, var(--dk-component-table-head-color) var(--dk-component-table-sort-icon-mix-active), var(--dk-component-table-sort-active));
  --dk-component-table-sort-icon-color-sorted: color-mix(in srgb, var(--dk-text-primary-on-subtle) var(--dk-component-table-sort-icon-sorted-mix-rest), var(--dk-component-table-head-surface));
  --dk-component-table-sort-icon-color-sorted-hover: color-mix(in srgb, var(--dk-text-primary-on-subtle) var(--dk-component-table-sort-icon-sorted-mix-hover), var(--dk-component-table-sort-hover));
  --dk-component-table-empty-color: var(--dk-text-neutral-default);
  --dk-component-table-placeholder-surface: var(--dk-surface-primary-subtle);
  --dk-component-table-placeholder-border: var(--dk-border-primary-default);
  --dk-component-table-ghost-surface: var(--dk-surface-current);
  --dk-component-table-caption-color: var(--dk-text-neutral-default);
}

/* ═══════════════════════════════════════ drift-kit:layer components/tag/tokens.css ═══════════════════════════════════════ */
/* ============================================================================
   Tag — component token collection (--dk-component-tag-*)
   ----------------------------------------------------------------------------
   SCOPED TO THE COMPONENT and to its two parts, which documentation examples
   render on their own.

   NO HEIGHT TOKEN, and that is the design rather than an omission: a tag is a
   line of text with air around it, so its height is the line box plus four
   pixels top and bottom at every rung. Writing a height as well would be two
   numbers that have to agree, and the one that loses is the type.

   THE PADDING WENT UP A STEP on 29 Sep 2026, asked for directly: 2px top and
   bottom with 4 / 6 / 8 at the sides read as a label squeezed into its box.
   Now 4px top and bottom, 8 / 10 / 12 at the sides, so 28 / 30 / 34 tall with
   the border. A tag in a table cell now sets the row a few pixels taller than
   plain text does; a small tag is the one to reach for in a dense table.

   THE COLOURS ARE NOT WRITTEN HERE, and this is the part worth reading. Alert
   solved this already: a status rule writes PRIVATE SLOTS and a variant rule
   spends them, so six statuses times three variants is nine rules rather than
   eighteen blocks of colour. The component library's Tag writes twelve, one per
   status-and-variant pair, which is where a palette change goes to be missed.
   ============================================================================ */
.dk-component-tag, .dk-component-tag__icon, .dk-component-tag__dot {
  --dk-component-tag-padding-block: var(--dk-primitive-scale-1);
  --dk-component-tag-padding-inline: var(--dk-spacing-3);
  --dk-component-tag-small-padding-inline: var(--dk-spacing-3-5);
  /* EXTRA SMALL (5 Nov 2026): a count beside an Eyebrow ("Used by 12"). The
     overline's small type, as a small Eyebrow's, so the two sit level; 2px
     above and below rather than 4, a tighter side, a smaller glyph. */
  --dk-component-tag-xsmall-padding-block: var(--dk-primitive-scale-0-5);
  --dk-component-tag-xsmall-padding-inline: var(--dk-spacing-2);
  --dk-component-tag-large-padding-inline: var(--dk-spacing-3-5);
  --dk-component-tag-gap: var(--dk-spacing-1);

  --dk-component-tag-font-family: var(--dk-font-family-primary);
  --dk-component-tag-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-tag-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-tag-xsmall-font-size: var(--dk-font-overline-sm-text-size);
  --dk-component-tag-xsmall-line-height: var(--dk-font-overline-sm-line-height);
  --dk-component-tag-small-font-size: var(--dk-font-body-xsm-text-size);
  --dk-component-tag-small-line-height: var(--dk-font-body-xsm-line-height);
  --dk-component-tag-large-font-size: var(--dk-font-body-md-text-size);
  --dk-component-tag-large-line-height: var(--dk-font-body-md-line-height);
  /* Semibold, because a tag is a label rather than prose: it is read as a unit
     and usually at the smallest size on the page. */
  --dk-component-tag-font-weight: var(--dk-primitive-font-weight-semi-bold);

  --dk-component-tag-icon-size: var(--dk-primitive-scale-3-5);
  --dk-component-tag-xsmall-icon-size: var(--dk-primitive-scale-2-5);
  --dk-component-tag-small-icon-size: var(--dk-primitive-scale-3);
  --dk-component-tag-large-icon-size: var(--dk-primitive-scale-4);
  /* The dot is a status with no room for a word: 6px is the smallest circle
     that still reads as a deliberate mark rather than a speck. */
  --dk-component-tag-dot-size: var(--dk-primitive-scale-1-5);

  /* THE SOLID FILLS ARE A RUNG LIGHTER than the kit's shared solid surface
     (29 Sep 2026, asked for directly): --dk-surface-{status}-solid is 700 in
     both themes, which on a chip this small read as nearly black. 600 in both
     themes, knowing white on it falls under AA for some statuses (warning most
     of all). Tag-only: Alert and the solid tones keep 700, which carry
     paragraphs rather than one word. Success is jade here as everywhere, so it
     follows primary. */
  --dk-component-tag-primary-solid: var(--dk-surface-primary-mark);
  --dk-component-tag-success-solid: var(--dk-surface-success-mark);
  --dk-component-tag-error-solid: var(--dk-surface-error-mark);
  --dk-component-tag-warning-solid: var(--dk-surface-warning-mark);
  --dk-component-tag-information-solid: var(--dk-surface-information-mark);

  --dk-component-tag-radius: var(--dk-border-radius-control-150);
  --dk-component-tag-border-width: var(--dk-border-width-25);
}

/* ═════════════════════════════════ drift-kit:layer components/accordion/tokens.css ═════════════════════════════════ */
/* ============================================================================
   Accordion: component token collection (--dk-component-accordion-*)
   ----------------------------------------------------------------------------
   SCOPED TO THE COMPONENT and to the item, which is a <details> that works on
   its own without a group around it.

   THE SUMMARY IS AN INSET ROW (30 Sep, Julio's pick). The item has a small
   inset and the summary is a rounded row inside it with its own padding, so
   hover tints the row and nothing else. The first cut tinted a full-width
   summary whose bottom edge was the first line of the open content, so the
   fill ran straight into the text.

   THE ROW IS NOT A BUTTON WITH A HEIGHT: its size is the padding doubled plus
   the line box, which is how Input derives 38 / 44 / 52 and how this derives
   the same three. A two-line question grows, which is what it needs to do.
   ============================================================================ */
.dk-component-accordion, .dk-component-accordion__item {
  /* ── The row ── */
  --dk-component-accordion-inset: var(--dk-spacing-1);
  --dk-component-accordion-padding-block: var(--dk-spacing-3);
  --dk-component-accordion-small-padding-block: var(--dk-spacing-2-5);
  --dk-component-accordion-large-padding-block: var(--dk-spacing-3-5);
  --dk-component-accordion-padding-inline: var(--dk-spacing-3);
  --dk-component-accordion-flush-padding-inline: var(--dk-spacing-2);
  /* Concentric with the item: the row's corner is the item's less the inset. */
  --dk-component-accordion-row-radius: max(0px, calc(var(--dk-border-radius-200) - var(--dk-spacing-1)));
  --dk-component-accordion-row-surface-hover: var(--dk-interactive-surface-hover);
  --dk-component-accordion-row-surface-active: var(--dk-interactive-surface-active);
  /* A header runs the full width, so it presses on the panel rung (17 Oct):
     at the item rung a 700px header lurched about 10px a side. */
  --dk-component-accordion-press-scale: var(--dk-interactive-press-panel);
  --dk-component-accordion-focus-ring-width: var(--dk-border-width-100);
  --dk-component-accordion-focus-ring: var(--dk-border-field-focus-ring);
  --dk-component-accordion-gap: var(--dk-spacing-2);

  /* ── Type ── */
  --dk-component-accordion-font-family: var(--dk-font-family-primary);
  --dk-component-accordion-font-size: var(--dk-font-body-md-text-size);
  --dk-component-accordion-line-height: var(--dk-font-body-md-line-height);
  --dk-component-accordion-small-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-accordion-small-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-accordion-large-font-size: var(--dk-font-body-lg-text-size);
  --dk-component-accordion-large-line-height: var(--dk-font-body-lg-line-height);
  /* The title is a heading for what is under it, so it carries weight where
     the content does not. */
  --dk-component-accordion-summary-font-weight: var(--dk-primitive-font-weight-semi-bold);
  --dk-component-accordion-summary-color: var(--dk-text-default);
  --dk-component-accordion-heading-gap: var(--dk-spacing-0-5);
  --dk-component-accordion-description-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-accordion-description-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-accordion-description-color: var(--dk-text-neutral-default);
  --dk-component-accordion-content-color: var(--dk-text-neutral-default);

  /* ── The frame ──
     separated: a stack of cards. joined: one card with rules between items.
     flush: rules only, for an accordion already inside a card. */
  --dk-component-accordion-surface: var(--dk-surface-current);
  --dk-component-accordion-border: var(--dk-border-hairline-current);
  --dk-component-accordion-border-width: var(--dk-border-width-25);
  /* The rules between rows (2 Nov): a separator, so heavier border tiers
     thicken the cards' edges, not the lines between rows. */
  --dk-component-accordion-rule-width: var(--dk-border-width-separator-25);
  --dk-component-accordion-radius: var(--dk-border-radius-200);
  --dk-component-accordion-rule: var(--dk-border-hairline-current);
  --dk-component-accordion-joined-rule: var(--dk-border-hairline-current);

  /* ── Slots ── */
  --dk-component-accordion-icon-size: var(--dk-primitive-scale-5);
  --dk-component-accordion-icon-color: var(--dk-icon-neutral-default);
  --dk-component-accordion-icon-color-hover: var(--dk-icon-neutral-hover);
  --dk-component-accordion-icon-gap: var(--dk-spacing-3);
  --dk-component-accordion-leading-size: var(--dk-primitive-scale-5);
  --dk-component-accordion-leading-color: var(--dk-icon-neutral-default);
  --dk-component-accordion-meta-gap: var(--dk-spacing-2);

  /* ── Disabled: the same ladder, in the disabled family ── */
  --dk-component-accordion-title-color-disabled: var(--dk-text-disabled-default);
  --dk-component-accordion-description-color-disabled: var(--dk-text-disabled-subtle);
  --dk-component-accordion-icon-color-disabled: var(--dk-icon-disabled-subtle);

  /* ── Motion ──
     The panel's height is animated from WHERE IT IS to where it is going, so
     a click mid-flight turns it round instead of being ignored. Open is a
     touch slower than close, both on the kit's snappy standard curve; the
     content fades and rises a few pixels on the way in. All durations are
     tokens, so the motion tier zeroes them under prefers-reduced-motion and
     behaviour.js then toggles instantly. */
  --dk-component-accordion-open-duration: var(--dk-motion-expand-duration);
  --dk-component-accordion-close-duration: var(--dk-motion-exit-duration);
  --dk-component-accordion-easing: var(--dk-motion-state-easing);
  --dk-component-accordion-content-rise: var(--dk-spacing-1);
  /* The old single duration, kept for anything that read it. */
  --dk-component-accordion-duration: var(--dk-component-accordion-open-duration);
}

/* ═══════════════════════════════════════ drift-kit:layer components/box/tokens.css ═══════════════════════════════════════ */
/* ============================================================================
   Box: component token collection (--dk-component-box-*)
   ----------------------------------------------------------------------------
   A GROUPED SURFACE, NOT A PALETTE. The box paints --dk-surface-current, so its
   fill is whatever the kit's tone and level layers say: data-tone tints it and
   remaps the text and icons of everything inside, data-surface steps the
   neutral ladder. These tokens are only what the box adds on top: its edge,
   its depth, its spacing, and the type of the facts it lays out.

   Scoped to the component, like Accordion's: a token that names a mapped token
   resolves on the box itself, which is the element that carries data-tone, so
   the tone's remap reaches it.
   ============================================================================ */
.dk-component-box {
  /* ── Size: padding, and the gap between the header, the grid and its cells.
     Five steps, 12, 18, 24, 32 and 40; the unprefixed tokens are medium, the
     default. (16 Oct, Julio: the old small, medium and large are now xsmall,
     small and medium; large and xlarge are new.) ── */
  --dk-component-box-xsmall-padding: var(--dk-spacing-3);
  --dk-component-box-small-padding: var(--dk-spacing-4-5);
  --dk-component-box-padding: var(--dk-spacing-6);
  --dk-component-box-large-padding: var(--dk-spacing-8);
  --dk-component-box-xlarge-padding: var(--dk-spacing-10);

  /* ── Edge: one corner up to medium; past it the corner grows with the
     padding, so a roomy box does not read as a sharp slab ── */
  --dk-component-box-radius: var(--dk-border-radius-200);
  --dk-component-box-large-radius: var(--dk-border-radius-300);
  --dk-component-box-xlarge-radius: var(--dk-border-radius-400);
  --dk-component-box-border-width: var(--dk-border-width-25);
  /* The kit hairline, which steps with the surface level (and the tone): a
     fixed card border is neutral-50, the level-2 fill itself, and vanished there. */
  --dk-component-box-border-color: var(--dk-border-hairline-current);
  --dk-component-box-raised-border-color: var(--dk-border-raised-default);
  /* A well's edge is a rung lighter than the hairline (16 Oct, Julio): the
     hairline read too dark around a pressed-in box. */
  --dk-component-box-inset-border-color: var(--dk-border-raised-default);

  /* ── Depth: raised lifts it off the page (the kit floating elevation: raised
     was 4% black and barely read), inset presses it in ── */
  --dk-component-box-raised-shadow: var(--dk-shadow-floating);
  --dk-component-box-inset-shadow: inset 0 var(--dk-spacing-0-5) var(--dk-spacing-2) var(--dk-shadow-inner-sm);

  /* ── The grid: the narrowest a column may get before the grid wraps ── */
  --dk-component-box-column-min: 10rem;

  /* ── Dividers: a hairline in the gap, the kit's own: it follows the tone,
     the level, a solid fill and inverse. ── */
  --dk-component-box-line-color: var(--dk-border-hairline-current);
  --dk-component-box-line-width: var(--dk-border-width-separator-25);
  /* Room the grid's clip leaves outside its box, so a focus ring on a control
     at its edge is not cut off: as wide as the widest kit ring (4px, or a
     field's ring under a heavier data-border-width), fixed rather than a
     responsive spacing step, and capped below half the gap in styles.css. */
  --dk-component-box-focus-room: max(var(--dk-primitive-scale-1), var(--dk-border-width-100));

  /* ── Facts: a label in the Eyebrow's small caps, a value in body text ── */
  --dk-component-box-label-color: var(--dk-text-neutral-default);
  --dk-component-box-label-font-size: var(--dk-font-overline-sm-text-size);
  --dk-component-box-label-line-height: var(--dk-font-overline-sm-line-height);
  --dk-component-box-label-letter-spacing: 0.12em;
  --dk-component-box-label-font-weight: var(--dk-primitive-font-weight-semi-bold);
  --dk-component-box-fact-gap: var(--dk-spacing-1);
  --dk-component-box-value-color: var(--dk-text-default);
  --dk-component-box-value-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-box-value-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-box-value-font-weight: var(--dk-primitive-font-weight-semi-bold);

  /* ── Header ── */
  --dk-component-box-title-font-size: var(--dk-font-body-lg-text-size);
  --dk-component-box-title-line-height: var(--dk-font-body-lg-line-height);
  --dk-component-box-title-font-weight: var(--dk-primitive-font-weight-semi-bold);
  --dk-component-box-description-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-box-description-line-height: var(--dk-font-body-sm-line-height);
  /* Past medium the header grows with the box: a heading over a body line. */
  --dk-component-box-large-title-font-size: var(--dk-font-heading-h5-text-size);
  --dk-component-box-large-title-line-height: var(--dk-font-heading-h5-line-height);
  --dk-component-box-large-description-font-size: var(--dk-font-body-md-text-size);
  --dk-component-box-large-description-line-height: var(--dk-font-body-md-line-height);
  --dk-component-box-xlarge-title-font-size: var(--dk-font-heading-h4-text-size);
  --dk-component-box-xlarge-title-line-height: var(--dk-font-heading-h4-line-height);
  --dk-component-box-xlarge-description-font-size: var(--dk-font-body-md-text-size);
  --dk-component-box-xlarge-description-line-height: var(--dk-font-body-md-line-height);
  --dk-component-box-header-gap: var(--dk-spacing-0-5);
  /* The header band's padding above and below its words, a step tighter
     than the box's own, per size. */
  --dk-component-box-xsmall-band-padding: var(--dk-spacing-2);
  --dk-component-box-small-band-padding: var(--dk-spacing-3);
  --dk-component-box-band-padding: var(--dk-spacing-4);
  --dk-component-box-large-band-padding: var(--dk-spacing-5);
  --dk-component-box-xlarge-band-padding: var(--dk-spacing-6);

  --dk-component-box-font-family: var(--dk-font-family-primary);
}

/* The header's colours, declared on the band as well as the box: a header
   band carries its own data-surface, and a token resolves where it is
   declared, so declared only on the box its copy would keep the box's
   level. */
.dk-component-box,
.dk-component-box__header[data-surface] {
  --dk-component-box-title-color: var(--dk-text-default);
  --dk-component-box-description-color: var(--dk-text-neutral-default);
}

/* ═══════════════════════════════════ drift-kit:layer components/vehicle/tokens.css ═══════════════════════════════════ */
/* ============================================================================
   Vehicle: component token collection (--dk-component-vehicle-*)
   ----------------------------------------------------------------------------
   A PHOTO OF A CAR, AT ANY SIZE. The photos (the vehicles folder, webp) are trimmed to
   the car, so the image IS the car; the box they sit in is 2:1, the median of
   the 309 trimmed photos, with the car contained and centred. That is what
   lines cars up in a list and puts every car's vertical centre at the box's
   centre, which the showcase panel relies on.
   ============================================================================ */
.dk-component-vehicle {
  --dk-component-vehicle-ratio: 2 / 1;

  /* ── Showcase: the space between the panel's edges and the car ── */
  --dk-component-vehicle-small-padding: var(--dk-spacing-3);
  --dk-component-vehicle-padding: var(--dk-spacing-6);
  --dk-component-vehicle-large-padding: var(--dk-spacing-8);
  /* ── Plain: room around the photo (data-padding), so a car never touches
     the edges of what holds it, such as a card's media. On the responsive
     spacing tier; set the medium token on the figure for an exact amount. ── */
  --dk-component-vehicle-small-inset: var(--dk-spacing-3);
  --dk-component-vehicle-inset: var(--dk-spacing-5);
  --dk-component-vehicle-large-inset: var(--dk-spacing-8);
  /* The room between the panel's top edge and the car grows with the
     vehicle, faster than it does (cqi: the showcase is its own inline-size
     container), never less than the size's padding: a card-sized car keeps
     its padding step, and a wide hero gets real air above the roof (about
     20px at 250px wide, 80px at 500, 200px at 1000). */
  --dk-component-vehicle-headroom: calc(24cqi - var(--dk-primitive-scale-10));
  /* How far down the car the panel reaches: two thirds, so it holds the car
     rather than cutting it in half. */
  --dk-component-vehicle-panel-reach: calc(2 / 3);
  /* The panel's corner: large (the default) and xlarge (data-radius), the
     same rungs as Box's large and xlarge. */
  --dk-component-vehicle-radius: var(--dk-border-radius-300);
  --dk-component-vehicle-xlarge-radius: var(--dk-border-radius-400);
  /* data-headroom="tall": a floor under the headroom, so a card-sized
     showcase (a phone's) still has real air above the roof, while a wide
     one keeps the growing headroom above. */
  --dk-component-vehicle-tall-headroom-min: var(--dk-spacing-12);

  /* ── The empty showcase (data-empty): no car, a placeholder glyph centred
     on the panel and an action astride its foot, its centre this far below
     the panel's bottom edge. ── */
  --dk-component-vehicle-placeholder-size: var(--dk-primitive-scale-16);
  --dk-component-vehicle-action-offset: var(--dk-spacing-2);

  /* The panel with no tone or level: the neutral level-1 fill, a quiet stage.
     With data-tone or data-surface on the vehicle it is the kit surface
     instead (styles.css), so a primary tint, a solid primary or a deeper
     neutral come from the tone and level layers like everywhere else. */
  --dk-component-vehicle-panel: var(--dk-surface-level-1);
  /* data-on="raised": the panel of a showcase standing on a raised surface.
     Raised is level 0 in light, so level 1 still reads there; in dark raised
     is level 1 itself and the default panel would vanish into it, so the
     panel steps to level 2 (below). One markup in both themes. */
  --dk-component-vehicle-on-raised-panel: var(--dk-surface-level-1);
}
/* The on-raised panel in a dark page, the kit's per-theme pattern: gated to
   the NEAREST theme (a light page inside a dark preview keeps level 1), the
   guard in :where() so it adds no weight; a vehicle carrying the dark theme
   itself takes it too. Flipping the page's theme re-resolves it at once. */
[data-theme="dark"] .dk-component-vehicle:where(:not([data-theme="light"], [data-theme="dark"] [data-theme="light"] *)),
.dk-component-vehicle[data-theme="dark"] {
  --dk-component-vehicle-on-raised-panel: var(--dk-surface-level-2);
}

/* ════════════════════════════════════ drift-kit:layer components/select/tokens.css ════════════════════════════════════ */
/* ============================================================================
   Select — component token collection (--dk-component-select-*)
   ----------------------------------------------------------------------------

   WHAT THIS REPLACED. Twelve tokens, eight of which pointed straight at
   --dk-component-input-*, and a stylesheet that read Input's collection
   another eleven times for its gap, its slot gap, its radius and its three
   type rungs. That is COMPONENT-TO-COMPONENT, which the tiers do not have:
   primitive, alias, mapped, component, and nothing between the last two.

   The kit has answered this once already. Input's label read
   --dk-component-eyebrow-* until 18 Sep and was moved off for the same reason,
   with the invariant it protected, a form label and an Eyebrow are the same
   type, moved into Forge's check:contract as a look cohort. The same move
   here: Select declares its own, pointed at the same mapped and primitive
   tokens Input points at, and check:contract's field cohort is what keeps the
   three field-shaped components identical.

   THE RUNGS ARE DERIVED, NOT COPIED. A height is padding doubled plus the line
   box it holds, which is how Input's are built, so both arrive at 38 / 44 / 52
   from the same arithmetic rather than one of them quoting the other's answer.
   If the scale moves, both move.

   THE TRIGGER IS A FIELD AND THE MENU IS NOT. The trigger paints the field
   palette, flush with its surface and outlined, exactly as Input and the
   checkbox do. The menu is a floating surface above the page: its own radius,
   its own shadow, the card palette. Those are two different objects that
   happen to touch, and the tokens say so.

   THE MENU'S SURFACE IS NAMED FOR WHAT IT IS, --dk-component-menu-*, and not
   for this component. A floating list of things to choose from is the shape
   behind a select, an action menu, a picker and a combobox, and Forge already
   hand-rolls it five times over: seven role="menu" popups across the
   prototypes, the card actions menu, and the icon picker, which still carries
   its own flip-and-clamp arithmetic. Declaring the surface under its own name
   costs nothing today and means the Dropdown that lands those consumers is a
   set of semantics on a surface that already exists, rather than a second
   stylesheet that drifts from this one.
   ============================================================================ */
/* SCOPED TO THE COMPONENT. See Checkbox's collection for the measurement: four
   legs on every collection put 2,958 custom properties on a bare <span>.

   THE MENU IS NAMED SEPARATELY because it is PORTALLED TO <body> when it
   opens, so it is not a descendant of .dk-component-select at the moment it
   needs these values. That is not a detail: a collection declared on the root
   alone would resolve to nothing the instant the menu moved.

   AND SO IS THE TRIGGER, because Forge's own control rail renders one with no
   .dk-component-select around it: a bare button carrying the class. Input's
   collection names its __field for exactly this reason and check:vars found
   the same three elements here, first with nothing to paint and then, once the
   private slots moved onto the trigger, with the slots resolving and the
   component tokens behind them still missing. Both halves have to be in scope
   or neither is. */
.dk-component-select, .dk-component-select__trigger, .dk-component-select__menu, .dk-component-menu, .dk-component-menu__scrim {
  /* ── Geometry. Each height is its padding doubled plus the line box it
     holds, which is how Input builds its own, so the two land on 38 / 44 / 52
     by the same arithmetic rather than by one quoting the other. ── */
  --dk-component-select-small-padding-y: var(--dk-primitive-scale-2-5);
  --dk-component-select-padding-y: var(--dk-primitive-scale-3);
  --dk-component-select-large-padding-y: var(--dk-primitive-scale-3-5);
  --dk-component-select-small-height: calc(var(--dk-component-select-small-padding-y) * 2 + var(--dk-font-body-xsm-line-height));
  --dk-component-select-height: calc(var(--dk-component-select-padding-y) * 2 + var(--dk-font-body-sm-line-height));
  --dk-component-select-large-height: calc(var(--dk-component-select-large-padding-y) * 2 + var(--dk-font-input-md-line-height));
  /* THE TRIGGER'S INLINE PADDING IS INPUT'S NUMBER, arrived at independently:
     spacing-2-5, 10px. It was spacing-3, 12px, which is why a select and a
     text field in one form had their first characters two pixels out of line
     with each other. Measured on the docs' own control rail. */
  --dk-component-select-padding-inline: var(--dk-primitive-scale-2-5);
  --dk-component-select-radius: var(--dk-border-radius-control-200);
  --dk-component-select-border-width: var(--dk-border-width-25);
  --dk-component-select-focus-ring-width: var(--dk-border-width-100);
  /* Label to trigger, and trigger to caption. */
  --dk-component-select-gap: var(--dk-spacing-1-5);
  /* Between the value, its icon and the chevron. */
  --dk-component-select-slot-gap: var(--dk-spacing-2);
  /* The hairline after a leading glyph, on the control border ramp: it steps
     with the trigger's fill on hover and press, and inside a tone it is the
     tone's, so it reads on an inset field, which has no edge of its own. */
  --dk-component-select-leading-divider: var(--dk-border-control-default);
  --dk-component-select-leading-divider-hover: var(--dk-border-control-hover);
  --dk-component-select-leading-divider-active: var(--dk-border-control-active);
  /* On an inverse surface, a rung stronger: the ramp's first rung is too
     faint against the opposite theme. */
  --dk-component-select-leading-divider-inverse: var(--dk-border-control-hover);
  --dk-component-select-leading-divider-inverse-hover: var(--dk-border-control-active);
  --dk-component-select-leading-divider-inverse-active: var(--dk-border-control-active);
  --dk-component-select-leading-divider-width: var(--dk-border-width-separator-25);
  /* The glyph, primary on its ramp, and the extra air after the hairline. */
  --dk-component-select-leading-color: var(--dk-icon-primary-default);
  --dk-component-select-leading-color-hover: var(--dk-icon-primary-hover);
  --dk-component-select-leading-color-active: var(--dk-icon-primary-active);
  --dk-component-select-leading-after: var(--dk-spacing-1);
  --dk-component-select-chevron-size: var(--dk-primitive-scale-4-5);

  /* ── data-appearance="sentence": a trigger set inside a line of text, as the
     Subscription Confirmation designs have it ("Every [Monday] of each
     week"). The value is the sentence's own bold type in primary; the box
     rests on the card surface with a subtle border and hugs its value.
     Input keeps the same set (--dk-component-input-sentence-*): two boxes, one look, held equal by test/sentence.test.js.
     The type is the responsive ramp on purpose: it has to match the words
     around it, which are set in the same ramp. ── */
  --dk-component-select-sentence-border: var(--dk-border-neutral-subtle);
  --dk-component-select-sentence-surface: var(--dk-surface-card-default);
  --dk-component-select-sentence-text: var(--dk-text-primary-default);
  --dk-component-select-sentence-font-weight: var(--dk-primitive-font-weight-bold);
  --dk-component-select-sentence-font-size: var(--dk-font-body-lg-text-size);
  --dk-component-select-sentence-line-height: var(--dk-font-body-lg-line-height);
  --dk-component-select-sentence-small-font-size: var(--dk-font-body-md-text-size);
  --dk-component-select-sentence-small-line-height: var(--dk-font-body-md-line-height);
  --dk-component-select-sentence-large-font-size: var(--dk-font-heading-h5-text-size);
  --dk-component-select-sentence-large-line-height: var(--dk-font-heading-h5-line-height);
  --dk-component-select-sentence-padding-inline: var(--dk-primitive-scale-3);
  --dk-component-select-sentence-chevron-size: var(--dk-primitive-scale-4-5);
  --dk-component-select-sentence-value-min-width: 7.5rem;
  /* Room beside the words either side, on top of the space character. */
  --dk-component-select-sentence-margin-inline: var(--dk-primitive-scale-1);

  /* ── Type. THE FIELD RUNGS, which this component was a step below.
     Measured: a select at medium rendered its value at 14/20 where a text field
     beside it rendered 16/22, so two controls that are meant to be the same box
     in one form were not the same type in it. The heights matched all along,
     which is what let it go unnoticed: the box arithmetic uses a line-height
     rung and the value uses a text rung, and only one of the two was Input's.

     14 / 16 / 18 now, on body-sm, input-sm and input-md, which are the three
     rungs Input reads for the same three sizes. ── */
  --dk-component-select-font-family: var(--dk-font-family-primary);
  --dk-component-select-font-size: var(--dk-font-input-sm-text-size);
  --dk-component-select-line-height: var(--dk-font-input-sm-line-height);
  --dk-component-select-small-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-select-small-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-select-large-font-size: var(--dk-font-input-md-text-size);
  --dk-component-select-large-line-height: var(--dk-font-input-md-line-height);
  --dk-component-select-value-font-weight: var(--dk-primitive-font-weight-medium);
  /* An unchosen select says what an empty field says, so it says it the same
     way: the placeholder rung, and regular rather than medium, so the shape of
     the line tells you there is nothing in it before the colour does. */
  --dk-component-select-placeholder-font-weight: var(--dk-primitive-font-weight-regular);

  /* ── The label, the caption and the error, which this component did not have.
     A select in a form could not say the things a field next to it says: no
     helper text, no message, no required mark. The type rungs are the ones
     Input uses for the same three parts, declared here for the reason at the
     top of this file. ── */
  --dk-component-select-label-font-family: var(--dk-font-family-primary);
  --dk-component-select-label-font-size: var(--dk-font-overline-lg-text-size);
  --dk-component-select-label-line-height: var(--dk-font-overline-lg-line-height);
  --dk-component-select-label-letter-spacing: 0.08em;
  --dk-component-select-label-font-weight: var(--dk-primitive-font-weight-bold);
  --dk-component-select-label-color: var(--dk-text-neutral-default);
  --dk-component-select-caption-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-select-caption-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-select-caption-color: var(--dk-text-neutral-default);
  --dk-component-select-error-color: var(--dk-text-error-outline);
  /* WARNING, NOT ERROR, for the asterisk. A field somebody still has to fill is
     a prompt, not a failure: see input/styles.css, where the same decision is
     written out at length. */
  --dk-component-select-required-color: var(--dk-text-warning-default);

  /* ── The trigger, at rest and in every state. The field palette: level-aware,
     tone-escaped, and the same one Input's field and the checkbox's box paint,
     which is what makes a form of all three read as one set of controls. ── */
  --dk-component-select-surface-default: var(--dk-surface-field-default);
  --dk-component-select-surface-hover: var(--dk-surface-field-hover);
  --dk-component-select-surface-active: var(--dk-surface-field-action-active);
  /* INSET (data-variant="inset", 14 Oct): the Glider's inset look, a trigger
     sunk into the surface. The nested ramp, no edge at rest or on hover. */
  /* On the control ramp (16 Oct): the nested rungs on a plain surface, and
     the tone's and the level's next rung on a toned one; the nested fill no
     tone remaps made every inset a tone boundary, page grey in any tone. */
  --dk-component-select-inset-surface: var(--dk-surface-control-default);
  --dk-component-select-inset-surface-hover: var(--dk-surface-control-hover);
  --dk-component-select-inset-surface-active: var(--dk-surface-control-active);
  --dk-component-select-inset-border: transparent;
  /* Its words follow the tone too (16 Oct): the field text tokens are for a
     white box. The same on a plain surface but the placeholder, a rung darker. */
  --dk-component-select-inset-value-color: var(--dk-text-default);
  --dk-component-select-inset-placeholder-color: var(--dk-text-neutral-subtle);
  --dk-component-select-inset-chevron-color: var(--dk-icon-neutral-default);
  /* Inside a status tone the chevron takes the tone's icon (16 Oct, Julio):
     the status's own icon token is the tone's level-aware icon there. */
  --dk-component-select-inset-chevron-primary: var(--dk-icon-primary-default);
  --dk-component-select-inset-chevron-success: var(--dk-icon-success-default);
  --dk-component-select-inset-chevron-error: var(--dk-icon-error-default);
  --dk-component-select-inset-chevron-warning: var(--dk-icon-warning-default);
  --dk-component-select-inset-chevron-information: var(--dk-icon-information-default);
  --dk-component-select-border-default: var(--dk-border-field-plain-default);
  --dk-component-select-border-hover: var(--dk-border-field-hover);
  --dk-component-select-border-focus: var(--dk-border-field-focus);
  --dk-component-select-ring: var(--dk-border-field-focus-ring);
  --dk-component-select-value-color: var(--dk-text-field-default);
  --dk-component-select-placeholder-color: var(--dk-text-field-placeholder);
  --dk-component-select-chevron-color: var(--dk-icon-field-default);
  --dk-component-select-chevron-color-hover: var(--dk-icon-field-hover);
  --dk-component-select-value-icon-color: var(--dk-icon-primary-default);

  /* ── data-raised: the trigger lifted off the surface, which is what Input's
     data-raised is and what Search bar was before that. THE SHADOW AND NOTHING
     ELSE: no padding change, no height change, because padding belongs to the
     size rung and a control whose text starts further in than the control below
     it reads as a different component. Input learned that one the same week.
     Its own tokens rather than Input's: component-to-component is not a tier,
     and both point at the same two mapped shadows. ── */
  --dk-component-select-raised-shadow: var(--dk-shadow-lifted, 0 4px 10px 0 rgba(0, 0, 0, 0.08));
  --dk-component-select-raised-shadow-hover: var(--dk-shadow-floating, 0 4px 20px 0 rgba(0, 0, 0, 0.08));
  /* Input's raised edge, a step fainter than the field's (16 Oct, Julio). */
  --dk-component-select-raised-border-default: var(--dk-border-field-raised-default);
  --dk-component-select-raised-border-hover: var(--dk-border-field-raised-hover);
  --dk-component-select-raised-border-focus: var(--dk-border-field-raised-focus);

  /* ── aria-invalid, spelled the way Input spells it: the border carries the
     error and the fill does not. ── */
  --dk-component-select-error-border-default: var(--dk-border-field-error);
  --dk-component-select-error-border-focus: var(--dk-border-field-error-focus);
  --dk-component-select-error-ring: var(--dk-border-field-error-ring);

  /* ── Disabled ── */
  --dk-component-select-disabled-surface: var(--dk-surface-field-hover);
  --dk-component-select-disabled-border: var(--dk-border-field-disabled);
  --dk-component-select-disabled-value-color: var(--dk-text-field-disabled);
  --dk-component-select-disabled-icon-color: var(--dk-icon-field-disabled);
  --dk-component-select-disabled-label-color: var(--dk-text-disabled-default);

  /* ── The floating surface, named for the shape rather than for this
     component: see the header. ── */
  --dk-component-menu-surface: var(--dk-surface-card-default);
  --dk-component-menu-border: var(--dk-border-raised-default);
  --dk-component-menu-border-width: var(--dk-border-width-25);
  --dk-component-menu-radius: var(--dk-border-radius-300);
  --dk-component-menu-shadow: var(--dk-shadow-floating, 0 4px 20px 0 rgba(0, 0, 0, 0.08));
  --dk-component-menu-padding-block: var(--dk-spacing-2);
  /* ── THE OPTIONS ARE INSET, not edge to edge, which is what gives the
     highlight somewhere to be. The menu's own inline padding is that inset and
     the option's padding is the rest, and the two are chosen so their SUM is
     unchanged: the text sits exactly where it sat before, and all that moves is
     the highlight, which now stops short of the menu's edge and rounds. ── */
  --dk-component-menu-padding-inline: var(--dk-spacing-2);
  --dk-component-menu-max-height: var(--dk-responsive-spacing-64);
  /* ── WIDTH IS NOT THE TRIGGER'S, and that is the fix 16.0.0 shipped a day
     late. The menu took its width from the trigger outright, which reads fine
     on a 320px field and badly everywhere else: the docs' own control rail
     opens 100px selects, and a 100px menu truncates every option in it. The
     trigger is a poor guide to how much room a LIST needs; it only ever holds
     one line.

     The rule is three-sided. It is never NARROWER than its trigger, because a
     menu that opens thinner than the control it came from looks broken. It is
     as wide as its widest option needs, which is what width: max-content
     computes. And it is capped, at this token and again at the viewport, so a
     long option cannot push it off screen or across half the page. 328px is
     scale-80, the rung that holds about 40 characters of option text at the
     menu's own size. ── */
  --dk-component-menu-max-width: var(--dk-primitive-scale-80);
  /* Kept clear of the viewport edge by more than the positioner's own 8px
     padding: 100vw includes a classic scrollbar where the positioner measures
     documentElement.clientWidth, which excludes it, so the CSS cap has to
     allow for the difference or a wide menu overhangs on Windows. */
  --dk-component-menu-viewport-gap: var(--dk-spacing-4);
  /* ── THE SHEET, which is what this menu becomes on a phone. ──
     A dropdown anchored to a 100px trigger on a 375px screen is the worst of
     both: it flips when there is no room below, it clips against the viewport,
     and its rows are small targets for a thumb. Below the kit's mobile
     breakpoint the menu stops being a dropdown and becomes a bottom sheet:
     full width, off the bottom edge, where the thumb already is.

     ALWAYS, NOT ON REQUEST. A design system's defaults are what ship, and an
     opt-in would mean most call sites never opt in and the mobile users this is
     for keep the cramped menu. data-sheet="never" is the escape hatch, for the
     one case that is genuinely wrong: a select inside something that is already
     a sheet or a full-screen modal. data-sheet="always" forces it at any width,
     which is how the documentation shows it on a desktop. ── */
  --dk-component-menu-sheet-max-height: 60vh;
  /* A TALL SHEET (data-sheet-size="tall" on a Select, 6 Nov): nearly the
     whole screen, for a list that is the whole job (218 countries). A
     fraction of the viewport has no scale in Drift, so it is named here, in
     dvh like Modal's heights: the viewport as it is, under a phone's bars. */
  --dk-component-menu-sheet-tall-height: 92dvh;
  --dk-component-menu-sheet-radius: var(--dk-border-radius-400);
  --dk-component-menu-sheet-padding-block: var(--dk-spacing-3);
  /* The SOFT backdrop, not Modal's. A modal is the page while it is open and
     its 80% black says so; a select's sheet is a menu that happens to be full
     width, and dimming the form behind it to black takes away the context you
     are choosing for. See tokens/mapped/surface.css. */
  --dk-component-menu-scrim: var(--dk-surface-backdrop-soft);
  /* The scrim fades on the large enter's time, evenly (linear: a dimming
     has no weight to ease), and the sheet rises halfway through it. */
  --dk-component-menu-scrim-duration: var(--dk-motion-enter-large-duration);
  --dk-component-menu-scrim-easing: linear;
  --dk-component-menu-sheet-enter-delay: calc(var(--dk-component-menu-scrim-duration) * 0.5);
  /* ── THE SHEET LEAVES THE WAY IT ARRIVED. It slid up and then vanished on
     the frame the selection landed, which reads as the screen glitching rather
     than as a panel closing: the thing you just touched is gone before you have
     finished touching it. Out is faster than in, which is the usual asymmetry,
     because arriving wants to be noticed and leaving wants to be out of the
     way.
     A DURATION TOKEN, so reduced motion handles it: the motion tier sets these
     to 0.01ms rather than 0 precisely so animationend still fires and code that
     waits on one cannot hang, which is what the behaviour does here. ── */
  --dk-component-menu-sheet-exit-duration: var(--dk-motion-exit-duration);
  --dk-component-menu-sheet-exit-easing: var(--dk-motion-exit-easing);
  /* ── THE DESKTOP POPUP'S MOTION (8 Oct), for every surface dk.menu opens:
     Select's list, Dropdown's menu, Date picker's calendar. It fades in and
     settles straight down from a few pixels towards its trigger (up, for
     one above it), on the emphasized curve, with no scale: growing out of a
     corner read as drifting sideways. It leaves faster, half the distance
     back, on the way-out curve. Duration tokens, so reduced motion
     makes both instant. ── */
  --dk-component-menu-enter-duration: var(--dk-motion-enter-duration);
  --dk-component-menu-enter-easing: var(--dk-motion-enter-easing);
  --dk-component-menu-exit-duration: var(--dk-motion-exit-duration);
  --dk-component-menu-exit-easing: var(--dk-motion-exit-easing);
  --dk-component-menu-motion-offset: var(--dk-primitive-scale-1-5);
  /* 44px, which is the smallest target iOS documents and close enough to
     Android's 48dp that one number serves both. An option at the menu's own
     padding is 40px at medium, so this only ever grows a row. */
  --dk-component-select-option-touch-height: 44px;
  --dk-component-select-sheet-title-color: var(--dk-text-neutral-default);
  --dk-component-menu-scrollbar-thumb: var(--dk-border-raised-active);
  --dk-component-menu-scrollbar-thumb-hover: var(--dk-icon-neutral-default);

  /* ── A CHIP, which is what a value looks like when there can be several ──
     A multi-select has to show more than one answer at once, and the one thing
     it must not do is hide them: "3 selected" makes you open the menu to learn
     what you chose. So each value is a chip in the trigger, and the trigger
     grows as they wrap, which is the trade — it stops sharing a height with the
     fields beside it, and that is the honest cost of showing the value.

     A chip sits one rung under the value it stands for. It is a token, not
     typed text, and at the same size the two read as competing. */
  --dk-component-select-chip-gap: var(--dk-spacing-1-5);
  --dk-component-select-chip-padding-block: var(--dk-spacing-1);
  --dk-component-select-chip-padding-inline: var(--dk-spacing-2);
  --dk-component-select-chip-radius: var(--dk-border-radius-control-100);
  --dk-component-select-chip-surface: var(--dk-surface-nested-default);
  /* A chip is a THING sitting in the field rather than a tint of it, and at
     this size a fill alone does not say so: the nested surface against the
     field's own is a couple of percent of lightness. The quietest rung in the
     kit, the one named for sitting on a surface rather than floating above it,
     and theme-aware, since 4% black is invisible on a dark field. */
  --dk-component-select-chip-shadow: var(--dk-shadow-raised);
  --dk-component-select-chip-surface-hover: var(--dk-surface-nested-hover);
  --dk-component-select-chip-color: var(--dk-text-default);
  --dk-component-select-chip-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-select-chip-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-select-small-chip-font-size: var(--dk-font-body-xsm-text-size);
  --dk-component-select-small-chip-line-height: var(--dk-font-body-xsm-line-height);
  --dk-component-select-large-chip-font-size: var(--dk-font-input-sm-text-size);
  --dk-component-select-large-chip-line-height: var(--dk-font-input-sm-line-height);
  /* THE CROSS IS A PICTURE, NOT A BUTTON, and that is a deliberate structural
     choice rather than a shortcut. The trigger is a real <button>; a button
     inside it would be the invalid nesting this kit has spent a release taking
     out of other components. So the cross is an aria-hidden span, the pointer
     removes with it, and the keyboard removes with Backspace, which is what
     every token field does anyway. Five values would otherwise put five tab
     stops between this control and the next field. */
  /* IT IS AN ICON BUTTON'S GHOST RUNG, in everything but the element it is
     made of: NOTHING at rest but the glyph, a fill the moment you are on it,
     one tone deeper while you press, and the icon stepping with the fill. No
     border at any point — a box drawn around a cross inside a chip is three
     nested outlines in 28 pixels, and the target does not need drawing until
     the pointer proves it is looking for it.

     It reads the mapped CONTROL palette that the icon button's own ghost rung
     reads, rather than that component's tokens: quoting another component's
     answers is not a tier, and this way both follow the palette if it moves.

     Two sizes, because the box and the glyph inside it are different things:
     an 18px target around a 12px cross. */
  --dk-component-select-chip-remove-size: var(--dk-primitive-scale-4-5);
  --dk-component-select-chip-remove-icon-size: var(--dk-primitive-scale-3);
  --dk-component-select-chip-remove-radius: var(--dk-border-radius-control-100);
  --dk-component-select-chip-remove-surface: transparent;
  --dk-component-select-chip-remove-surface-hover: var(--dk-surface-control-hover);
  --dk-component-select-chip-remove-surface-active: var(--dk-surface-control-active);
  --dk-component-select-chip-remove-color: var(--dk-icon-control-default);
  --dk-component-select-chip-remove-color-hover: var(--dk-icon-control-hover);
  --dk-component-select-chip-remove-color-active: var(--dk-icon-control-active);
  /* MEASURED AGAINST THE THING THAT MOVES, the way Checkbox's glyph was: the
     control rung is 0.97, which on an 18px box travels 0.3px and reads as
     nothing at all. 0.88 moves an edge ~1.1px, which is the same press a
     button's 2.5px is at its size. */
  --dk-component-select-chip-remove-transform-scale-active: 0.88;
  /* The trigger's own block padding once it holds chips: without it a wrapped
     row touches the border it grew past. */
  --dk-component-select-chips-padding-block: var(--dk-spacing-1-5);

  /* ── An option ── */
  --dk-component-select-option-padding-block: var(--dk-spacing-2-5);
  /* Was spacing-4 with a menu that had no inline padding at all. The pair now
     adds to the same number, so nothing moves but the highlight. */
  --dk-component-select-option-padding-inline: var(--dk-primitive-scale-2-5);
  /* CONCENTRIC, not chosen by eye: an inner radius is the outer one minus the
     gap between them, or the two curves do not sit parallel. The menu is
     radius-300 and the inset is spacing-2, which leaves radius-100. Rounder
     looks deliberate for one row and wrong the moment it sits inside the
     menu's own corner. */
  --dk-component-select-option-radius: var(--dk-border-radius-100);
  --dk-component-select-option-gap: var(--dk-spacing-2);
  /* THE PRESS SHRINKS THE ROW, the same as a Dropdown item's, because they are
     the same shape in the same box and a product using both should not have one
     answer to a finger and the other stay still. The number is a literal, and
     it is the same literal, but the two components declare it separately: a
     component token reading another component's is not a tier, it is a
     dependency, and the day a select's rows stop looking like a menu's the two
     have to be able to part.

     Neither shared rung fits. They are stepped by how far an edge TRAVELS,
     since scale() is proportional: Button at 0.95 moves 2.5px, Card at 0.99
     moves 1.6px, and that is what a press reads as. Options measured in the
     docs run 89-302px, where the control rung would move 2.2-7.6px and the
     surface rung 0.4-1.5px. 0.98 lands them at 0.9-3.0px, across the band. */
  --dk-component-select-option-transform-scale-active: var(--dk-interactive-press-item);
  /* ── AN OPTION IS THE TEXT YOU ARE ABOUT TO GET, so it is set at the rung
     the trigger will show it at rather than at one of its own. It was
     body-md, 16/24, at every size: a rung larger than the trigger's value and
     with four more pixels of leading, so a menu opened from a 14px control
     showed you 16px rows and then put 14px in the box. At small it was two
     rungs out.
     The menu is PORTALLED, so it cannot inherit the trigger's size: open()
     mirrors data-size onto it, and the rules keyed off that attribute are how
     the list follows the control. ── */
  --dk-component-select-option-font-size: var(--dk-component-select-font-size);
  --dk-component-select-option-line-height: var(--dk-component-select-line-height);
  --dk-component-select-small-option-font-size: var(--dk-component-select-small-font-size);
  --dk-component-select-small-option-line-height: var(--dk-component-select-small-line-height);
  --dk-component-select-large-option-font-size: var(--dk-component-select-large-font-size);
  --dk-component-select-large-option-line-height: var(--dk-component-select-large-line-height);
  --dk-component-select-option-font-weight: var(--dk-primitive-font-weight-medium);
  --dk-component-select-option-color: var(--dk-interactive-content-text);
  --dk-component-select-option-color-active: var(--dk-interactive-content-text);
  --dk-component-select-option-color-hover: var(--dk-interactive-content-text);
  --dk-component-select-option-icon-size: var(--dk-primitive-scale-5);
  /* ── Pictures (6 Oct): an option's image, and the grid layout of cards for a
     picker whose options are pictures (the vehicle picker). ── */
  --dk-component-select-option-media-width: var(--dk-primitive-scale-16);
  --dk-component-select-value-media-height: var(--dk-primitive-scale-6);
  --dk-component-select-grid-menu-width: 44rem;
  --dk-component-select-grid-menu-max-height: 30rem;
  --dk-component-select-grid-card-min: 7.5rem;
  /* The picture in a card: a thumbnail, not the card's full width. */
  --dk-component-select-grid-media-width: var(--dk-primitive-scale-20);
  /* A card's description (a vehicle's make): smaller, over the label. */
  --dk-component-select-grid-desc-font-size: var(--dk-font-body-xsm-text-size);
  --dk-component-select-grid-desc-line-height: var(--dk-font-body-xsm-line-height);
  --dk-component-select-grid-gap: var(--dk-spacing-1);
  --dk-component-select-grid-card-padding: var(--dk-spacing-3);
  --dk-component-select-grid-card-radius: var(--dk-border-radius-200);
  --dk-component-select-grid-card-selected-surface: var(--dk-surface-primary-subtle);
  --dk-component-select-grid-card-selected-surface-hover: var(--dk-surface-primary-subtle-hover);
  --dk-component-select-grid-card-selected-border: var(--dk-border-primary-default);
  /* A card's label (a vehicle's model): a step under the list's option size. */
  --dk-component-select-grid-label-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-select-grid-label-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-select-grid-card-selected-width: var(--dk-border-width-50);
  /* ── Icons (30 Oct): the icon layout, Forge's icon picker. Square cells,
     nine to a row, in a popup narrower than the grid's: an icon needs no
     room for words. The glyph keeps the text's colour on hover and press,
     only the cell moves; the chosen cell is solid, as the sidebar's current
     row is. ── */
  --dk-component-select-icons-menu-width: 27.5rem;
  --dk-component-select-icons-menu-max-height: 26.25rem;
  --dk-component-select-icons-columns: 9;
  --dk-component-select-icons-gap: var(--dk-spacing-0-5);
  --dk-component-select-icons-cell-radius: var(--dk-border-radius-100);
  --dk-component-select-icons-glyph-size: var(--dk-primitive-scale-5-5);
  --dk-component-select-icons-glyph: var(--dk-icon-default-body);
  --dk-component-select-icons-selected-surface: var(--dk-interactive-selected-surface);
  --dk-component-select-icons-selected-surface-hover: var(--dk-interactive-selected-surface-hover);
  --dk-component-select-icons-selected-glyph: var(--dk-interactive-selected-text);
  /* The chips that narrow it to one library: pills on the nested ramp, the
     surface a nested card has on the menu, and the pressed one solid. */
  --dk-component-select-filters-gap: var(--dk-spacing-1-5);
  --dk-component-select-filters-padding-block: var(--dk-spacing-3);
  --dk-component-select-filter-padding-block: var(--dk-spacing-1-5);
  --dk-component-select-filter-padding-inline: var(--dk-spacing-3-5);
  --dk-component-select-filter-radius: var(--dk-border-radius-round);
  --dk-component-select-filter-border-width: var(--dk-border-width-25);
  --dk-component-select-filter-font-size: var(--dk-font-body-xsm-text-size);
  --dk-component-select-filter-line-height: var(--dk-font-body-xsm-line-height);
  --dk-component-select-filter-font-weight: var(--dk-primitive-font-weight-semi-bold);
  --dk-component-select-filter-surface: var(--dk-surface-nested-default);
  --dk-component-select-filter-surface-hover: var(--dk-surface-nested-hover);
  --dk-component-select-filter-surface-active: var(--dk-surface-nested-active);
  --dk-component-select-filter-border: var(--dk-border-nested-default);
  --dk-component-select-filter-border-hover: var(--dk-border-nested-hover);
  --dk-component-select-filter-text: var(--dk-text-neutral-default);
  --dk-component-select-filter-text-hover: var(--dk-text-default);
  --dk-component-select-filter-selected-surface: var(--dk-interactive-selected-surface);
  --dk-component-select-filter-selected-surface-hover: var(--dk-interactive-selected-surface-hover);
  --dk-component-select-filter-selected-text: var(--dk-interactive-selected-text);
  --dk-component-select-option-icon-color: var(--dk-icon-primary-default);
  --dk-component-select-option-icon-color-hover: var(--dk-icon-primary-hover);
  --dk-component-select-check-size: var(--dk-primitive-scale-4-5);
  --dk-component-select-check-color: var(--dk-icon-primary-default);
  /* The chosen row (a single select): the highlight tint, and the tick in
     the icon ramp for words on it. */
  --dk-component-select-option-surface-selected: var(--dk-interactive-highlight-surface);
  --dk-component-select-check-color-selected: var(--dk-icon-primary-on-subtle-level-0);
  /* Heavier than the icon set's 2 (9 Oct): at 18px a 2 read as too thin.
     Dropdown's tick keeps the same weight. */
  --dk-component-select-check-stroke-width: 2.5;
  /* THE ACTIVE OPTION IS NOT THE HOVERED ONE AND NOT THE SELECTED ONE. It is
     where the keyboard is, which is a third state this component had no way to
     paint because it had no keyboard. It reads the hover fill deliberately: the
     pointer and the arrow keys are two ways of pointing at the same thing, and
     giving them different looks would say they are different states. What keeps
     them from fighting is that hovering also MOVES the active option, so there
     is only ever one highlighted row. */
  --dk-component-select-option-surface-hover: var(--dk-interactive-surface-hover);
  --dk-component-select-option-surface-active: var(--dk-interactive-surface-active);
  /* NOT the -on-field pair the old stylesheet used. Those two name a field they
     are not on: an option lives in the MENU, which is a card surface, and
     --dk-icon-disabled-on-field is the same token input/styles.css moved off
     for claiming a tone-immunity it did not have. The general disabled rungs
     step with the surface the menu resolves against, which after the portal and
     the scope adoption is the trigger's. */
  --dk-component-select-option-disabled-color: var(--dk-text-disabled-default);
  --dk-component-select-option-disabled-icon-color: var(--dk-icon-disabled-default);
  /* A second line on an option, for the case a label alone cannot carry. Same
     relationship Checkbox's description has to its label: the same size, told
     apart by weight and colour, because a pair that is one idea said twice
     should not read as a heading with a footnote. */
  --dk-component-select-option-desc-color: var(--dk-text-neutral-default);
  --dk-component-select-option-desc-font-weight: var(--dk-primitive-font-weight-regular);
  --dk-component-select-option-desc-gap: 0;

  /* ── A group heading inside the menu ── */
  --dk-component-select-group-font-size: var(--dk-font-overline-sm-text-size);
  --dk-component-select-group-line-height: var(--dk-font-overline-sm-line-height);
  --dk-component-select-group-letter-spacing: 0.08em;
  --dk-component-select-group-font-weight: var(--dk-primitive-font-weight-bold);
  --dk-component-select-group-color: var(--dk-text-neutral-subtle);
  --dk-component-select-group-padding-block: var(--dk-spacing-2);
  --dk-component-select-group-gap: var(--dk-spacing-1);

  /* ── SEARCH, for a list nobody can read ──────────────────────────────────
     A select with two hundred options is not a longer version of one with six:
     typeahead finds a country you can spell and nothing else, and scrolling is
     a scan of a list you cannot hold in your head. The field goes in the POPUP
     rather than replacing the trigger, which keeps this the select-only
     combobox it already is: the trigger still shows a value, still opens, and
     the thing that takes your typing exists only while the list is up.

     Measured against the v2 library's country dropdown, which had arrived at
     the same shape: field in the popup, focused on open, cleared on close, and
     matching on MORE than the visible label — a numeric query there matches the
     dial code. That last part is why options carry data-search-terms. ── */
  /* THE FIELD IS A ROW LIKE THE ROWS UNDER IT. It was set at a fixed 14/20 with
     a 16px glyph while the options stepped 14/16/18 with 20px glyphs, so a
     medium select opened a list whose first line was a size smaller than the
     rest of it, and a large one was two. It had no top padding either — the
     menu's own was doing that job — which read as squashed against the edge.

     So every one of these is the OPTION's, and the field lands on the same
     height as a row at every size: 40 / 42 / 44. Not copied numbers, the same
     tokens, so the two cannot drift. */
  /* A BAND IS NOT A ROW, and this is the one place the field parts from the
     option it otherwise copies. An option's 10 sits inside the menu's own
     padding; the field gave that padding up when it went flush to the top, so
     it has to carry the air itself or it reads squashed against the edge it
     now touches. 14 puts 15px over the text where a row has 18 counting the
     menu's, which is the same breathing room arrived at honestly. */
  --dk-component-select-search-padding-block: var(--dk-spacing-3-5);
  --dk-component-select-search-gap: var(--dk-component-select-option-gap);
  --dk-component-select-search-font-size: var(--dk-component-select-option-font-size);
  --dk-component-select-search-line-height: var(--dk-component-select-option-line-height);
  --dk-component-select-small-search-font-size: var(--dk-component-select-small-option-font-size);
  --dk-component-select-small-search-line-height: var(--dk-component-select-small-option-line-height);
  --dk-component-select-large-search-font-size: var(--dk-component-select-large-option-font-size);
  --dk-component-select-large-search-line-height: var(--dk-component-select-large-option-line-height);
  --dk-component-select-search-color: var(--dk-text-default);
  --dk-component-select-search-placeholder-color: var(--dk-text-neutral-subtle);
  /* The same glyph size the options carry, so the magnifier and the icons under
     it are one column of the same weight rather than a small one on top. */
  --dk-component-select-search-icon-size: var(--dk-component-select-option-icon-size);
  --dk-component-select-search-icon-color: var(--dk-icon-neutral-subtle);
  /* A hairline under the field, not a gap: the field belongs to the menu, and a
     gap would read as a second surface floating above the list. */
  --dk-component-select-search-border: var(--dk-border-nested-default);
  --dk-component-select-search-border-width: var(--dk-border-width-25);
  /* Focus: the hairline turns primary (a line drawn over it, the field's
     own focus state), and the magnifier with it. */
  --dk-component-select-search-focus-border: var(--dk-border-primary-default);
  --dk-component-select-search-focus-width: var(--dk-border-width-50);
  --dk-component-select-search-focus-icon-color: var(--dk-icon-primary-default);
  /* In a phone's sheet the field stands taller: a thumb's target. */
  --dk-component-select-sheet-search-padding-block: var(--dk-spacing-5);

  /* ── LOADING, which is not the same as empty and must not look like it ────
     A select whose options arrive over the network opened on "Nothing to
     choose from", which is a statement about the data and it was a lie about
     the request. Forge's share modal did exactly that while it fetched its
     groups. ── */
  --dk-component-select-loading-color: var(--dk-text-neutral-subtle);
  --dk-component-select-loading-spinner-size: var(--dk-primitive-scale-4);
  --dk-component-select-loading-spinner-track: var(--dk-border-nested-default);
  --dk-component-select-loading-spinner-head: var(--dk-icon-primary-default);
  --dk-component-select-loading-duration: 0.7s;

  /* ── CLEAR, so a chosen select can go back to unchosen ────────────────────
     Without one the placeholder is a state you can leave and never return to,
     which Input fixed for itself long ago. Same shape as a chip's cross and for
     the same reason: a button inside the trigger would be invalid nesting, so
     this is an aria-hidden span the trigger's own click reads, and Backspace is
     the keyboard's way to the same thing. ── */
  --dk-component-select-clear-size: var(--dk-primitive-scale-4-5);
  --dk-component-select-clear-icon-size: var(--dk-primitive-scale-3);
  --dk-component-select-clear-radius: var(--dk-border-radius-control-100);
  --dk-component-select-clear-surface-hover: var(--dk-surface-control-hover);
  --dk-component-select-clear-surface-active: var(--dk-surface-control-active);
  --dk-component-select-clear-color: var(--dk-icon-control-default);
  --dk-component-select-clear-color-hover: var(--dk-icon-control-hover);
  --dk-component-select-clear-color-active: var(--dk-icon-control-active);
  --dk-component-select-clear-transform-scale-active: 0.88;

  /* What a row is told apart BY rather than chosen by: a dial code, a SKU, a
     shortcut. Quieter than the label on purpose. */
  --dk-component-select-option-meta-color: var(--dk-text-neutral-subtle);

  /* ── The empty state, for a menu whose options have all gone ── */
  --dk-component-select-empty-color: var(--dk-text-neutral-subtle);

  /* ── Motion ── */
  --dk-component-select-duration: var(--dk-motion-state-duration);
  --dk-component-select-duration-fast: var(--dk-motion-state-duration);
  --dk-component-select-easing: var(--dk-motion-state-easing);
}

/* Reduced motion (13 Oct 2026, after review): the menu fades in place. Its
   entrance is a translate by this offset, which no duration token reaches. */
@media (prefers-reduced-motion: reduce) {
  .dk-component-select, .dk-component-select__trigger, .dk-component-select__menu, .dk-component-menu {
    --dk-component-menu-motion-offset: 0px;
  }
}

/* Generated by scripts/build.js: this component's root colours, again on
   each part that resets a status tone, so they resolve against the reset. */
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-select .dk-component-select__trigger:not(:where(.dk-component-select[data-variant="inset"]) *),
.dk-component-select:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-select__trigger:not(:where(.dk-component-select[data-variant="inset"]) *),
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-select .dk-component-select__menu,
.dk-component-select:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-select__menu,
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-select .dk-component-select__chip,
.dk-component-select:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-select__chip,
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-select .dk-component-select__menu[data-layout="grid"] .dk-component-select__option[aria-selected="true"],
.dk-component-select:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-select__menu[data-layout="grid"] .dk-component-select__option[aria-selected="true"],
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-select .dk-component-select__filter:not([aria-pressed="true"]),
.dk-component-select:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-select__filter:not([aria-pressed="true"]) {
  --dk-component-select-leading-divider: var(--dk-border-control-default);
  --dk-component-select-leading-divider-hover: var(--dk-border-control-hover);
  --dk-component-select-leading-divider-active: var(--dk-border-control-active);
  --dk-component-select-leading-divider-inverse: var(--dk-border-control-hover);
  --dk-component-select-leading-divider-inverse-hover: var(--dk-border-control-active);
  --dk-component-select-leading-divider-inverse-active: var(--dk-border-control-active);
  --dk-component-select-leading-color: var(--dk-icon-primary-default);
  --dk-component-select-sentence-border: var(--dk-border-neutral-subtle);
  --dk-component-select-sentence-text: var(--dk-text-primary-default);
  --dk-component-select-label-color: var(--dk-text-neutral-default);
  --dk-component-select-caption-color: var(--dk-text-neutral-default);
  --dk-component-select-error-color: var(--dk-text-error-outline);
  --dk-component-select-required-color: var(--dk-text-warning-default);
  --dk-component-select-surface-default: var(--dk-surface-field-default);
  --dk-component-select-surface-hover: var(--dk-surface-field-hover);
  --dk-component-select-surface-active: var(--dk-surface-field-action-active);
  --dk-component-select-inset-surface: var(--dk-surface-control-default);
  --dk-component-select-inset-surface-hover: var(--dk-surface-control-hover);
  --dk-component-select-inset-surface-active: var(--dk-surface-control-active);
  --dk-component-select-inset-value-color: var(--dk-text-default);
  --dk-component-select-inset-placeholder-color: var(--dk-text-neutral-subtle);
  --dk-component-select-inset-chevron-color: var(--dk-icon-neutral-default);
  --dk-component-select-inset-chevron-primary: var(--dk-icon-primary-default);
  --dk-component-select-inset-chevron-success: var(--dk-icon-success-default);
  --dk-component-select-inset-chevron-error: var(--dk-icon-error-default);
  --dk-component-select-inset-chevron-warning: var(--dk-icon-warning-default);
  --dk-component-select-inset-chevron-information: var(--dk-icon-information-default);
  --dk-component-select-ring: var(--dk-border-field-focus-ring);
  --dk-component-select-chevron-color: var(--dk-icon-field-default);
  --dk-component-select-value-icon-color: var(--dk-icon-primary-default);
  --dk-component-select-raised-border-default: var(--dk-border-field-raised-default);
  --dk-component-select-disabled-surface: var(--dk-surface-field-hover);
  --dk-component-select-disabled-border: var(--dk-border-field-disabled);
  --dk-component-select-disabled-value-color: var(--dk-text-field-disabled);
  --dk-component-select-disabled-icon-color: var(--dk-icon-field-disabled);
  --dk-component-select-disabled-label-color: var(--dk-text-disabled-default);
  --dk-component-menu-border: var(--dk-border-raised-default);
  --dk-component-select-sheet-title-color: var(--dk-text-neutral-default);
  --dk-component-menu-scrollbar-thumb: var(--dk-border-raised-active);
  --dk-component-menu-scrollbar-thumb-hover: var(--dk-icon-neutral-default);
  --dk-component-select-chip-surface: var(--dk-surface-nested-default);
  --dk-component-select-chip-surface-hover: var(--dk-surface-nested-hover);
  --dk-component-select-chip-color: var(--dk-text-default);
  --dk-component-select-chip-remove-surface-hover: var(--dk-surface-control-hover);
  --dk-component-select-chip-remove-surface-active: var(--dk-surface-control-active);
  --dk-component-select-chip-remove-color: var(--dk-icon-control-default);
  --dk-component-select-chip-remove-color-hover: var(--dk-icon-control-hover);
  --dk-component-select-chip-remove-color-active: var(--dk-icon-control-active);
  --dk-component-select-option-color: var(--dk-interactive-content-text);
  --dk-component-select-option-color-active: var(--dk-interactive-content-text);
  --dk-component-select-option-color-hover: var(--dk-interactive-content-text);
  --dk-component-select-grid-card-selected-surface: var(--dk-surface-primary-subtle);
  --dk-component-select-grid-card-selected-surface-hover: var(--dk-surface-primary-subtle-hover);
  --dk-component-select-grid-card-selected-border: var(--dk-border-primary-default);
  --dk-component-select-icons-glyph: var(--dk-icon-default-body);
  --dk-component-select-icons-selected-surface: var(--dk-interactive-selected-surface);
  --dk-component-select-icons-selected-surface-hover: var(--dk-interactive-selected-surface-hover);
  --dk-component-select-icons-selected-glyph: var(--dk-interactive-selected-text);
  --dk-component-select-filter-surface: var(--dk-surface-nested-default);
  --dk-component-select-filter-surface-hover: var(--dk-surface-nested-hover);
  --dk-component-select-filter-surface-active: var(--dk-surface-nested-active);
  --dk-component-select-filter-border: var(--dk-border-nested-default);
  --dk-component-select-filter-border-hover: var(--dk-border-nested-hover);
  --dk-component-select-filter-text: var(--dk-text-neutral-default);
  --dk-component-select-filter-text-hover: var(--dk-text-default);
  --dk-component-select-filter-selected-surface: var(--dk-interactive-selected-surface);
  --dk-component-select-filter-selected-surface-hover: var(--dk-interactive-selected-surface-hover);
  --dk-component-select-filter-selected-text: var(--dk-interactive-selected-text);
  --dk-component-select-option-icon-color: var(--dk-icon-primary-default);
  --dk-component-select-check-color: var(--dk-icon-primary-default);
  --dk-component-select-option-surface-selected: var(--dk-interactive-highlight-surface);
  --dk-component-select-option-surface-hover: var(--dk-interactive-surface-hover);
  --dk-component-select-option-surface-active: var(--dk-interactive-surface-active);
  --dk-component-select-option-disabled-color: var(--dk-text-disabled-default);
  --dk-component-select-option-disabled-icon-color: var(--dk-icon-disabled-default);
  --dk-component-select-option-desc-color: var(--dk-text-neutral-default);
  --dk-component-select-group-color: var(--dk-text-neutral-subtle);
  --dk-component-select-search-color: var(--dk-text-default);
  --dk-component-select-search-placeholder-color: var(--dk-text-neutral-subtle);
  --dk-component-select-search-icon-color: var(--dk-icon-neutral-subtle);
  --dk-component-select-search-border: var(--dk-border-nested-default);
  --dk-component-select-search-focus-border: var(--dk-border-primary-default);
  --dk-component-select-search-focus-icon-color: var(--dk-icon-primary-default);
  --dk-component-select-loading-color: var(--dk-text-neutral-subtle);
  --dk-component-select-loading-spinner-track: var(--dk-border-nested-default);
  --dk-component-select-loading-spinner-head: var(--dk-icon-primary-default);
  --dk-component-select-clear-surface-hover: var(--dk-surface-control-hover);
  --dk-component-select-clear-surface-active: var(--dk-surface-control-active);
  --dk-component-select-clear-color: var(--dk-icon-control-default);
  --dk-component-select-clear-color-hover: var(--dk-icon-control-hover);
  --dk-component-select-clear-color-active: var(--dk-icon-control-active);
  --dk-component-select-option-meta-color: var(--dk-text-neutral-subtle);
  --dk-component-select-empty-color: var(--dk-text-neutral-subtle);
}

/* ══════════════════════════════════ drift-kit:layer components/calendar/tokens.css ══════════════════════════════════ */
/* ============================================================================
   Calendar: component token collection (--dk-component-calendar-*)
   ----------------------------------------------------------------------------
   A GRID OF DAYS ON WHATEVER SURFACE IT SITS ON. The calendar has no fill of
   its own: inline it takes the page's, in a picker the popup's. Every colour
   here is a mapped token, so the tone and level layers (a tinted box, an
   inverse panel, dark) reach it with nothing extra.

   A CHOSEN DAY SPEAKS THE KIT'S CHOSEN LANGUAGE: solid primary with the
   on-solid text, the same as the current stepper step; the days between a
   range's ends are the subtle primary fill the chosen vehicle card uses.
   ============================================================================ */
.dk-component-calendar {
  /* ── Size: a day is a square of this side; small for a dense popup ── */
  --dk-component-calendar-cell-size: var(--dk-primitive-scale-10);
  --dk-component-calendar-small-cell-size: var(--dk-primitive-scale-9);
  --dk-component-calendar-day-radius: var(--dk-border-radius-control-100);
  --dk-component-calendar-month-gap: var(--dk-spacing-6);
  --dk-component-calendar-header-gap: var(--dk-spacing-2);
  --dk-component-calendar-nav-size: var(--dk-primitive-scale-10);
  --dk-component-calendar-nav-icon-size: var(--dk-primitive-scale-6);
  /* The month and year views: a grid of wider cells in the days' footprint. */
  --dk-component-calendar-cells-gap: var(--dk-spacing-1);

  /* ── Type ── */
  --dk-component-calendar-font-family: var(--dk-font-family-primary);
  --dk-component-calendar-day-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-calendar-day-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-calendar-day-font-weight: var(--dk-primitive-font-weight-medium);
  --dk-component-calendar-title-font-size: var(--dk-font-body-md-text-size);
  --dk-component-calendar-title-line-height: var(--dk-font-body-md-line-height);
  --dk-component-calendar-title-font-weight: var(--dk-primitive-font-weight-semi-bold);
  --dk-component-calendar-weekday-font-size: var(--dk-font-body-xsm-text-size);
  --dk-component-calendar-weekday-line-height: var(--dk-font-body-xsm-line-height);
  --dk-component-calendar-weekday-font-weight: var(--dk-primitive-font-weight-semi-bold);

  /* ── Colour ── */
  --dk-component-calendar-text: var(--dk-text-default);
  --dk-component-calendar-weekday-color: var(--dk-text-neutral-default);
  --dk-component-calendar-nav-color: var(--dk-icon-neutral-default);
  --dk-component-calendar-surface-hover: var(--dk-interactive-surface-hover);
  --dk-component-calendar-surface-active: var(--dk-interactive-surface-active);
  /* Today is the subtle primary, a step under a chosen day's solid. */
  --dk-component-calendar-today-surface: var(--dk-surface-primary-subtle);
  --dk-component-calendar-today-surface-hover: var(--dk-surface-primary-subtle-hover);
  --dk-component-calendar-today-surface-active: var(--dk-surface-primary-subtle-focus);
  --dk-component-calendar-today-text: var(--dk-text-primary-default);
  --dk-component-calendar-today-font-weight: var(--dk-primitive-font-weight-bold);
  --dk-component-calendar-selected-surface: var(--dk-interactive-selected-surface);
  --dk-component-calendar-selected-surface-hover: var(--dk-interactive-selected-surface-hover);
  --dk-component-calendar-selected-surface-active: var(--dk-interactive-selected-surface-active);
  --dk-component-calendar-selected-text: var(--dk-interactive-selected-text);
  --dk-component-calendar-range-surface: var(--dk-surface-primary-subtle);
  --dk-component-calendar-range-surface-hover: var(--dk-surface-primary-subtle-hover);
  --dk-component-calendar-range-surface-active: var(--dk-surface-primary-subtle-focus);
  --dk-component-calendar-blocked-text: var(--dk-text-disabled-default);
  --dk-component-calendar-focus-ring: var(--dk-border-field-focus);
  --dk-component-calendar-focus-ring-width: var(--dk-border-width-50);

  --dk-component-calendar-transition-duration: var(--dk-motion-state-duration);
  /* Paging: the old month is pushed out and the next comes in behind it,
     the full width of the grid, on the emphasized curve (almost all of the
     travel at once, then a long soft settle). Both panes, and the month name
     above them, share the distance, the clock and the curve. Motion tokens,
     so reduced motion makes it a cut. */
  --dk-component-calendar-slide-duration: var(--dk-motion-travel-duration);
  --dk-component-calendar-slide-easing: var(--dk-motion-travel-easing);
  --dk-component-calendar-slide-travel: 1;
  /* Pressed: the kit's control shrink, the same as Button and Tabs. */
  --dk-component-calendar-active-scale: var(--dk-interactive-press-compact);
}

/* Generated by scripts/build.js: this component's root colours, again on
   each part that resets a status tone, so they resolve against the reset. */
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-calendar .dk-component-calendar__day[data-today],
.dk-component-calendar:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-calendar__day[data-today],
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-calendar td[data-band="middle"],
.dk-component-calendar:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) td[data-band="middle"] {
  --dk-component-calendar-text: var(--dk-text-default);
  --dk-component-calendar-weekday-color: var(--dk-text-neutral-default);
  --dk-component-calendar-nav-color: var(--dk-icon-neutral-default);
  --dk-component-calendar-surface-hover: var(--dk-interactive-surface-hover);
  --dk-component-calendar-surface-active: var(--dk-interactive-surface-active);
  --dk-component-calendar-today-surface: var(--dk-surface-primary-subtle);
  --dk-component-calendar-today-surface-hover: var(--dk-surface-primary-subtle-hover);
  --dk-component-calendar-today-surface-active: var(--dk-surface-primary-subtle-focus);
  --dk-component-calendar-today-text: var(--dk-text-primary-default);
  --dk-component-calendar-selected-surface: var(--dk-interactive-selected-surface);
  --dk-component-calendar-selected-surface-hover: var(--dk-interactive-selected-surface-hover);
  --dk-component-calendar-selected-surface-active: var(--dk-interactive-selected-surface-active);
  --dk-component-calendar-selected-text: var(--dk-interactive-selected-text);
  --dk-component-calendar-range-surface: var(--dk-surface-primary-subtle);
  --dk-component-calendar-range-surface-hover: var(--dk-surface-primary-subtle-hover);
  --dk-component-calendar-range-surface-active: var(--dk-surface-primary-subtle-focus);
  --dk-component-calendar-blocked-text: var(--dk-text-disabled-default);
}

/* ═══════════════════════════════ drift-kit:layer components/date-picker/tokens.css ═══════════════════════════════ */
/* ============================================================================
   Date picker: component token collection (--dk-component-date-picker-*)
   ----------------------------------------------------------------------------
   A DATE FIELD IS AN INPUT FIELD, so almost nothing is here: the label, the
   box, the sizes, the caption and the error are Input's own tokens, on the
   same root. These are only what a date adds: the arrow between a range's
   dates, a range input's width, the gap between a split
   range's two fields, and the popup's frame around its Calendar.
   ============================================================================ */
.dk-component-date-picker, .dk-component-date-picker__popup, .dk-component-date-picker__sheet, .dk-component-date-picker__separator {
  --dk-component-date-picker-separator-color: var(--dk-icon-neutral-default);
  --dk-component-date-picker-separator-size: 1em;
  /* A range's two inputs are a date wide each, so the arrow sits between two
     dates rather than in the middle of the field. */
  --dk-component-date-picker-date-width: 15ch;
  --dk-component-date-picker-split-gap: var(--dk-spacing-4);
  --dk-component-date-picker-split-min: 12rem;
  --dk-component-date-picker-popup-padding: var(--dk-spacing-3);
  /* Calendar entry's trigger: the placeholder in Input's own colour, the
     chevron in its icon's, as Day of month's field. */
  --dk-component-date-picker-placeholder-color: var(--dk-text-field-placeholder);
  --dk-component-date-picker-chevron-color: var(--dk-icon-field-subtle);
  --dk-component-date-picker-chevron-size: var(--dk-primitive-scale-4-5);
  /* A thumb is not a pointer: a sheet's days grow to the 44px iOS documents. */
  --dk-component-date-picker-sheet-cell-size: var(--dk-primitive-scale-11);
  /* The modal sheet on a phone: days fill the width, up to this, leaving the
     sheet's own inset either side. */
  --dk-component-date-picker-sheet-cell-max: var(--dk-primitive-scale-14);
  --dk-component-date-picker-sheet-inset: var(--dk-primitive-scale-12);
}

/* ══════════════════════════════ drift-kit:layer components/day-of-month/tokens.css ══════════════════════════════ */
/* ============================================================================
   Day of month: component token collection (--dk-component-day-of-month-*)
   ----------------------------------------------------------------------------
   THE CALENDAR'S DAYS, ON THEIR OWN. A day here is a Calendar day: the same
   size, radius, chosen fill, hover and pressed steps, blocked look, focus
   ring and press shrink, so the two read as one family wherever they meet.
   These point at the same mapped tokens rather than at the Calendar's
   component tokens, which are scoped to its own root.
   ============================================================================ */
.dk-component-day-of-month, .dk-component-day-of-month__popup, .dk-component-day-of-month__sheet {
  --dk-component-day-of-month-cell-size: var(--dk-primitive-scale-10);
  --dk-component-day-of-month-gap: var(--dk-spacing-1);
  --dk-component-day-of-month-radius: var(--dk-border-radius-control-100);
  --dk-component-day-of-month-popup-padding: var(--dk-spacing-3);
  /* In a phone's sheet the days share its width, up to this tall. */
  --dk-component-day-of-month-sheet-cell-max: var(--dk-primitive-scale-14);

  --dk-component-day-of-month-font-family: var(--dk-font-family-primary);
  --dk-component-day-of-month-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-day-of-month-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-day-of-month-font-weight: var(--dk-primitive-font-weight-medium);

  --dk-component-day-of-month-text: var(--dk-text-default);
  --dk-component-day-of-month-surface-hover: var(--dk-interactive-surface-hover);
  --dk-component-day-of-month-surface-active: var(--dk-interactive-surface-active);
  --dk-component-day-of-month-selected-surface: var(--dk-interactive-selected-surface);
  --dk-component-day-of-month-selected-surface-hover: var(--dk-interactive-selected-surface-hover);
  --dk-component-day-of-month-selected-surface-active: var(--dk-interactive-selected-surface-active);
  --dk-component-day-of-month-selected-text: var(--dk-interactive-selected-text);
  --dk-component-day-of-month-blocked-text: var(--dk-text-disabled-default);
  --dk-component-day-of-month-focus-ring: var(--dk-border-field-focus);
  --dk-component-day-of-month-focus-ring-width: var(--dk-border-width-50);
  --dk-component-day-of-month-active-scale: var(--dk-interactive-press-compact);
  --dk-component-day-of-month-transition-duration: var(--dk-motion-state-duration);

  /* The field: the placeholder in Input's own colour, the chevron in its icon's. */
  --dk-component-day-of-month-placeholder-color: var(--dk-text-field-placeholder);
  --dk-component-day-of-month-chevron-color: var(--dk-icon-field-subtle);
  --dk-component-day-of-month-chevron-size: var(--dk-primitive-scale-4-5);
}

/* ═══════════════════════════════ drift-kit:layer components/choice-card/tokens.css ═══════════════════════════════ */
/* ============================================================================
   Choice card: component token collection (--dk-component-choice-card-*)
   ----------------------------------------------------------------------------
   The Subscription Confirmation designs' CardSelect: a white card with a
   subtle border and a soft drop shadow, 24px in, 12px between its parts. The
   radio or checkbox in it is the kit's own component, with its own tokens.
   ============================================================================ */
.dk-component-choice-card, .dk-component-choice-card-group, .dk-component-choice-card-row, .dk-component-choice-card-action {
  /* The card. */
  --dk-component-choice-card-surface: var(--dk-surface-choice-card);
  --dk-component-choice-card-border: var(--dk-border-choice-card);
  --dk-component-choice-card-border-width: var(--dk-border-width-25);
  --dk-component-choice-card-radius: var(--dk-border-radius-200);
  --dk-component-choice-card-padding: var(--dk-spacing-6);
  --dk-component-choice-card-gap: var(--dk-spacing-3);
  --dk-component-choice-card-shadow: var(--dk-shadow-card);
  --dk-component-choice-card-shadow-hover: var(--dk-shadow-card-hover);
  --dk-component-choice-card-focus-ring-width: var(--dk-border-width-100);
  --dk-component-choice-card-focus-ring: var(--dk-border-field-focus-ring);
  --dk-component-choice-card-scale-active: var(--dk-interactive-press-surface);
  /* It grows under the pointer first, the surface tier (16 Oct). */
  --dk-component-choice-card-scale-hover: var(--dk-interactive-grow-surface);
  --dk-component-choice-card-duration: var(--dk-motion-state-duration);
  --dk-component-choice-card-easing: var(--dk-motion-state-easing);

  /* Interactive states: the fill and the border climb one small step at hover
     and again at press; only a chosen card's border turns primary. */
  --dk-component-choice-card-surface-hover: var(--dk-surface-choice-card-hover);
  --dk-component-choice-card-surface-active: var(--dk-surface-choice-card-active);
  --dk-component-choice-card-border-hover: var(--dk-border-choice-card-hover);
  --dk-component-choice-card-border-active: var(--dk-border-choice-card-active);
  --dk-component-choice-card-checked-border: var(--dk-border-primary-default);
  --dk-component-choice-card-checked-border-hover: var(--dk-border-primary-hover);
  --dk-component-choice-card-checked-border-active: var(--dk-border-primary-focus);
  --dk-component-choice-card-disabled-border: var(--dk-border-disabled-subtle);
  --dk-component-choice-card-disabled-text: var(--dk-text-disabled-subtle);

  /* The words. The title and the value step with the size rung. */
  --dk-component-choice-card-font-family: var(--dk-font-family-primary);
  --dk-component-choice-card-text: var(--dk-text-default);
  --dk-component-choice-card-text-muted: var(--dk-text-neutral-default);
  --dk-component-choice-card-title-font-weight: var(--dk-primitive-font-weight-bold);
  --dk-component-choice-card-small-title-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-choice-card-small-title-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-choice-card-title-font-size: var(--dk-font-body-md-text-size);
  --dk-component-choice-card-title-line-height: var(--dk-font-body-md-line-height);
  --dk-component-choice-card-large-title-font-size: var(--dk-font-body-lg-text-size);
  --dk-component-choice-card-large-title-line-height: var(--dk-font-body-lg-line-height);
  --dk-component-choice-card-overline-font-size: var(--dk-font-overline-md-text-size);
  --dk-component-choice-card-overline-line-height: var(--dk-font-overline-md-line-height);
  --dk-component-choice-card-overline-letter-spacing: 0.03125rem;
  --dk-component-choice-card-overline-font-weight: var(--dk-primitive-font-weight-bold);
  --dk-component-choice-card-overline-color: var(--dk-text-neutral-default);
  --dk-component-choice-card-description-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-choice-card-description-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-choice-card-description-color: var(--dk-text-neutral-default);
  --dk-component-choice-card-note-font-size: var(--dk-font-body-xsm-text-size);
  --dk-component-choice-card-note-line-height: var(--dk-font-body-xsm-line-height);
  --dk-component-choice-card-note-font-weight: var(--dk-primitive-font-weight-medium);
  --dk-component-choice-card-note-color: var(--dk-text-neutral-default);
  --dk-component-choice-card-note-error-color: var(--dk-text-error-default);
  --dk-component-choice-card-body-gap: var(--dk-spacing-0-25);
  /* A phone: 16px in, a 48px edit tile. */
  /* A primitive: the spacing tier is already a step smaller on a phone. */
  --dk-component-choice-card-phone-padding: var(--dk-primitive-scale-4);
  --dk-component-choice-card-phone-action-width: var(--dk-primitive-scale-12);

  /* Media: a logo up to 40px. An icon on a tile is the kit's Icon tile, which
     brings its own size and colours. */
  --dk-component-choice-card-media-size: var(--dk-primitive-scale-10);

  /* The group and a row (a card and its edit button). */
  --dk-component-choice-card-group-gap: var(--dk-spacing-2);
  --dk-component-choice-card-row-gap: var(--dk-spacing-1);

  /* The edit button beside a card: a card-like tile. Its icon walks the
     neutral ramp, a step darker at hover and again at press; its fill and
     border take the same steps as an unchosen card's. */
  --dk-component-choice-card-action-width: 3.75rem;
  --dk-component-choice-card-action-icon-size: var(--dk-primitive-scale-5);
  --dk-component-choice-card-action-icon: var(--dk-icon-neutral-default);
  --dk-component-choice-card-action-icon-hover: var(--dk-icon-neutral-hover);
  --dk-component-choice-card-action-icon-active: var(--dk-icon-neutral-focus);
  --dk-component-choice-card-action-border-hover: var(--dk-component-choice-card-border-hover);
  --dk-component-choice-card-action-border-active: var(--dk-component-choice-card-border-active);
  /* Disabled wears the disabled card's border, so the pair reads as one. */
  --dk-component-choice-card-action-disabled-icon: var(--dk-icon-disabled-subtle);
  --dk-component-choice-card-action-disabled-border: var(--dk-component-choice-card-disabled-border);
}

/* ══════════════════════════════════ drift-kit:layer components/dropdown/tokens.css ══════════════════════════════════ */
/* ============================================================================
   Dropdown — component token collection (--dk-component-dropdown-*)
   ----------------------------------------------------------------------------

   WHAT THIS IS FOR, and why it is not Select. A listbox has a VALUE: one of its
   options is selected, it says so, and the control carries that answer into a
   form. A menu has COMMANDS: you pick one, something happens, and the menu has
   no opinion afterwards. They look identical and behave differently, and a
   screen reader is told two different stories about them, so they are two
   components with one surface between them.

   THE SURFACE IS NOT DECLARED HERE. The box, its radius, its shadow, its
   padding, its scrollbar and its bottom-sheet behaviour are --dk-component-menu-*,
   declared beside Select because that is where they were written first and
   named for the shape rather than for either component. This file is what a
   menu ITEM is, which is the part Select's option is not: no check by default,
   a destructive rung, and a separator.

   MEASURED FROM WHAT FORGE ALREADY HAND-ROLLS, five times over: a version
   switcher with a heading and links, a perspective switcher with
   role="menuitemradio" and icons, a logo switcher built on a <ul>, the card
   actions menu with an icon per item and a red Delete, and the icon picker,
   which is not a menu at all but wants the same floating box. Every shape in
   this file came from one of those, and the destructive rung and the checked
   item are here because two of them had already invented their own.
   ============================================================================ */
/* SCOPED TO THE COMPONENT, and to the menu, which is PORTALLED to <body> when
   it opens and so is not a descendant of the root at the moment it needs these
   values. See Checkbox's collection for the measurement behind scoping at all:
   four legs on every collection put 2,958 custom properties on a bare span. */
.dk-component-dropdown, .dk-component-dropdown__menu {
  /* ── An item ── */
  /* BLOCK AND INLINE ARE NOT THE SAME NUMBER, because a row is not a square. 8
     above and below against 10 either side is what the three menus this
     component replaced had each arrived at independently, and it is what keeps
     a six-item menu from reading as a list of buttons. */
  --dk-component-dropdown-item-padding-block: var(--dk-spacing-2);
  --dk-component-dropdown-item-padding-inline: var(--dk-spacing-2-5);
  --dk-component-dropdown-item-gap: var(--dk-spacing-2);
  --dk-component-dropdown-item-radius: var(--dk-border-radius-100);
  --dk-component-dropdown-item-font-family: var(--dk-font-family-primary);
  /* ── THE BODY LADDER, NOT THE FIELD LADDER, and that was the whole of the
     "it looks too big" problem. These read --dk-font-input-sm-*, which is 16/22:
     the rung a FIELD uses, and a field's type is set by the value you typed
     into it. A menu has no value and no field to match, so it was quoting an
     argument that does not apply to it, one rung above everything around it.

     Select's option is the case that looks similar and is not: its type is
     deliberately its trigger's, 14/16/18 by size, because the list and the
     control it belongs to are read as one thing. A menu of commands belongs to
     nothing, so it takes the body rung a piece of chrome takes: 14/20. That is
     also, to the pixel, where the three hand-rolled menus had landed, one at
     14px and two inheriting the page's 13-14px. ── */
  --dk-component-dropdown-item-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-dropdown-item-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-dropdown-item-font-weight: var(--dk-primitive-font-weight-medium);
  /* A thumb is not a pointer: the same 44px floor the sheet gives an option. */
  --dk-component-dropdown-item-touch-height: 44px;

  /* ── THE SIZE AXIS, AND WHY ITS DEFAULT IS THE SMALL ONE ─────────────────
     A menu is opened BY something, and the thing that opened it is usually a
     32px kebab or a toolbar button: chrome. So the rung this component starts
     on is the small one, which is the opposite of a field, where medium is the
     resting state because a field is the page's content rather than its edges.

     The three rungs are SELECT'S THREE, quoted from the same typography tokens
     rather than re-derived: 14/20, 16/22, 18/24. That is the point of naming
     them the same. Put a dropdown beside a medium select, give it
     data-size="medium", and the two lists set their labels identically; keep
     the default and it reads as the chrome it is. What does NOT match is the
     row height, and deliberately: an option is a value you are choosing from a
     field and carries that field's air, while a menu row is a command and sits
     tighter, 36 against 40 at the same type.

     Only the MENU takes a size. This component does not paint its trigger,
     which is a Button, an icon button or whatever the page already had, and
     each of those has a size axis of its own. ── */
  --dk-component-dropdown-medium-item-font-size: var(--dk-font-input-sm-text-size);
  --dk-component-dropdown-medium-item-line-height: var(--dk-font-input-sm-line-height);
  --dk-component-dropdown-medium-item-padding-block: var(--dk-spacing-2-5);
  --dk-component-dropdown-medium-item-icon-size: var(--dk-primitive-scale-5);
  --dk-component-dropdown-medium-check-size: var(--dk-primitive-scale-4-5);
  --dk-component-dropdown-large-item-font-size: var(--dk-font-input-md-text-size);
  --dk-component-dropdown-large-item-line-height: var(--dk-font-input-md-line-height);
  --dk-component-dropdown-large-item-padding-block: var(--dk-spacing-3);
  --dk-component-dropdown-large-item-icon-size: var(--dk-primitive-scale-6);
  --dk-component-dropdown-large-check-size: var(--dk-primitive-scale-5);

  /* ── Colours. Default, hover and press, then the two rungs a menu has that a
     listbox does not: destructive, and checked. ── */
  --dk-component-dropdown-item-color: var(--dk-interactive-content-text);
  --dk-component-dropdown-item-color-active: var(--dk-interactive-content-text);
  --dk-component-dropdown-item-color-hover: var(--dk-interactive-content-text);
  /* PRIMARY, THE SAME AS SELECT'S OPTION ICONS. An item's glyph is not
     decoration competing with its label: it is the fastest thing to find in a
     list of five words, and the brand rung is what makes it findable. Neutral
     was the safer choice and the duller one, and it also left two menus in one
     product disagreeing, since Select's options had been primary since 16.0.0.
     It steps a rung under the pointer, which is Select's behaviour too, so a
     row answers in the icon as well as the fill. The destructive rung below
     overrides both: a red Delete keeps its red glyph. */
  --dk-component-dropdown-item-icon-color: var(--dk-icon-primary-default);
  --dk-component-dropdown-item-icon-color-hover: var(--dk-icon-primary-hover);
  --dk-component-dropdown-item-surface-hover: var(--dk-interactive-surface-hover);
  --dk-component-dropdown-item-surface-active: var(--dk-interactive-surface-active);
  --dk-component-dropdown-item-disabled-color: var(--dk-text-disabled-default);
  --dk-component-dropdown-item-disabled-icon-color: var(--dk-icon-disabled-default);

  /* DESTRUCTIVE IS A RUNG, NOT A COLOUR SOMEONE PICKS. Forge's card menu wrote
     its own .is-danger and painted it by hand; three products doing that is
     three reds. The text and the icon go error, the fill stays neutral until
     you touch it and then goes to the error tint, which is the same shape every
     other control in the kit uses for a state: the surface answers, the content
     was already saying what it is. */
  --dk-component-dropdown-item-destructive-color: var(--dk-text-error-default);
  --dk-component-dropdown-item-destructive-icon-color: var(--dk-icon-error-default);
  --dk-component-dropdown-item-destructive-surface-hover: var(--dk-surface-error-subtle);
  --dk-component-dropdown-item-destructive-surface-active: var(--dk-surface-error-subtle-hover);

  /* A CHECKED ITEM IS A menuitemradio OR menuitemcheckbox, which is a genuinely
     different thing from a selected option: the menu is still a menu, and the
     check reports a setting rather than a value the control holds. The tick
     reads the same token Select's does, so a checked row in either looks the
     same to someone using both. */
  --dk-component-dropdown-check-size: var(--dk-primitive-scale-4);
  --dk-component-dropdown-check-color: var(--dk-icon-primary-default);
  /* As Select's tick (9 Oct), so a checked row reads the same in both. */
  --dk-component-dropdown-check-stroke-width: 2.5;
  /* A GLYPH IS SIZED AGAINST ITS LABEL, not against the scale's middle. 18 to
     14 is the same ratio 20 carried against 16, so the icons step down with the
     type rather than looming over it; the tick is a rung under the icon because
     it confirms rather than names. */
  --dk-component-dropdown-item-icon-size: var(--dk-primitive-scale-4-5);

  /* ── A heading above a set of items, which three of the five hand-rolled
     menus had already invented ("Prototype version", "View as"). Not an item:
     the keyboard walks past it. ── */
  --dk-component-dropdown-label-font-size: var(--dk-font-overline-sm-text-size);
  --dk-component-dropdown-label-line-height: var(--dk-font-overline-sm-line-height);
  --dk-component-dropdown-label-letter-spacing: 0.08em;
  --dk-component-dropdown-label-font-weight: var(--dk-primitive-font-weight-bold);
  --dk-component-dropdown-label-color: var(--dk-text-neutral-subtle);
  --dk-component-dropdown-label-padding-block: var(--dk-spacing-2);

  /* ── A separator. A hairline, not a gap: a gap says "these are different
     lists" and a line says "this one is apart", which is what a Delete at the
     bottom of a menu of edits means. ── */
  --dk-component-dropdown-separator-color: var(--dk-border-nested-default);
  --dk-component-dropdown-separator-width: var(--dk-border-width-separator-25);
  --dk-component-dropdown-separator-spacing: var(--dk-spacing-2);

  /* ── Motion ── */
  --dk-component-dropdown-duration: var(--dk-motion-state-duration);
  --dk-component-dropdown-easing: var(--dk-motion-state-easing);
  /* THE PRESS SHRINKS THE ROW, and the number is a literal because neither
     shared rung fits a menu row. scale() is proportional, so the primitives are
     stepped by how far an edge actually TRAVELS, not by how big the ratio
     looks: Button at 0.95 moves 2.5px, Card at 0.99 moves 1.6px, and that
     1.5-2.5px band is what a press reads as across the kit.

     Items measured in the docs are 120-165px wide, the menu less its padding.
     The control rung would move them 3.0-4.1px, a lurch; the surface rung
     0.6-0.8px, a press you cannot see. 0.98 puts them at 1.2-1.7px, and holds
     a 300px item to 3.0px. Select's option carries the same number for the same
     reason, declared separately: see its token for why it is not shared. */
  --dk-component-dropdown-item-transform-scale-active: var(--dk-interactive-press-item);
}

/* ══════════════════════════════════════ drift-kit:layer components/card/tokens.css ══════════════════════════════════════ */
/* ============================================================================
   Card: component token collection (--dk-component-card-*)
   ----------------------------------------------------------------------------
   A SURFACE THAT GOES SOMEWHERE. The card paints --dk-surface-current, so its
   fill is whatever the kit's tone and level layers say, as a Box's is:
   data-tone tints it and remaps the words and icons inside, data-surface
   steps the neutral ladder. Under the pointer it climbs the control rungs of
   that same surface, so a toned card hovers in its tone. It moves on the
   interaction foundation's surface tier: it grows on hover and presses on the
   surface rung, and under reduced motion both are 1.

   Scoped to the component: a token that names a mapped token resolves on the
   card itself, the element that carries data-tone, so the tone reaches it.
   (16 Oct: rebuilt from the Forge nav-card port; see the changelog.)
   ============================================================================ */
.dk-component-card {
  /* ── Fill: the surface it is on, then the control rungs above it ── */
  --dk-component-card-surface: var(--dk-surface-current);
  --dk-component-card-surface-hover: var(--dk-surface-control-default);
  --dk-component-card-surface-active: var(--dk-surface-control-hover);

  /* ── Edge, per variant ── */
  --dk-component-card-border-width: var(--dk-border-width-25);
  --dk-component-card-border: var(--dk-border-raised-default);
  --dk-component-card-border-hover: var(--dk-border-raised-hover);
  --dk-component-card-border-active: var(--dk-border-raised-active);
  --dk-component-card-outline-border: var(--dk-border-hairline-current);
  --dk-component-card-selected-border: var(--dk-border-primary-default);
  --dk-component-card-selected-border-hover: var(--dk-border-primary-hover);
  --dk-component-card-selected-border-active: var(--dk-border-primary-focus);
  --dk-component-card-disabled-border: var(--dk-border-disabled-subtle);

  /* ── Depth: raised sits on the kit's card shadow and lifts on hover ── */
  --dk-component-card-shadow: var(--dk-shadow-card);
  --dk-component-card-shadow-hover: var(--dk-shadow-card-hover);

  /* ── Motion: the surface tier ── */
  --dk-component-card-scale-hover: var(--dk-interactive-grow-surface);
  --dk-component-card-scale-active: var(--dk-interactive-press-surface);
  --dk-component-card-duration: var(--dk-motion-state-duration);
  --dk-component-card-easing: var(--dk-motion-state-easing);
  --dk-component-card-press-duration: var(--dk-motion-press-duration);
  --dk-component-card-press-easing: var(--dk-motion-press-easing);
  --dk-component-card-ring: var(--dk-interactive-ring);
  --dk-component-card-ring-width: var(--dk-interactive-ring-width);

  /* ── Size: padding, corner, type and media step together.
     Small for a dense grid, medium the default, large for a feature. ── */
  --dk-component-card-small-padding: var(--dk-spacing-3);
  --dk-component-card-padding: var(--dk-spacing-4);
  --dk-component-card-large-padding: var(--dk-spacing-6);
  --dk-component-card-small-radius: var(--dk-border-radius-200);
  --dk-component-card-radius: var(--dk-border-radius-300);
  --dk-component-card-large-radius: var(--dk-border-radius-400);
  --dk-component-card-small-gap: var(--dk-spacing-0-5);
  --dk-component-card-gap: var(--dk-spacing-1);
  --dk-component-card-large-gap: var(--dk-spacing-1-5);

  /* ── Words ── */
  --dk-component-card-font-family: var(--dk-font-family-primary);
  --dk-component-card-title-color: var(--dk-text-default);
  --dk-component-card-title-font-weight: var(--dk-primitive-font-weight-bold);
  --dk-component-card-small-title-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-card-small-title-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-card-title-font-size: var(--dk-font-body-md-text-size);
  --dk-component-card-title-line-height: var(--dk-font-body-md-line-height);
  --dk-component-card-large-title-font-size: var(--dk-font-body-lg-text-size);
  --dk-component-card-large-title-line-height: var(--dk-font-body-lg-line-height);
  --dk-component-card-subtitle-color: var(--dk-text-neutral-default);
  --dk-component-card-small-subtitle-font-size: var(--dk-font-body-xsm-text-size);
  --dk-component-card-small-subtitle-line-height: var(--dk-font-body-xsm-line-height);
  --dk-component-card-subtitle-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-card-subtitle-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-card-large-subtitle-font-size: var(--dk-font-body-md-text-size);
  --dk-component-card-large-subtitle-line-height: var(--dk-font-body-md-line-height);
  /* How many lines the subtitle shows before it ends in an ellipsis. */
  --dk-component-card-subtitle-lines: 2;
  /* The eyebrow: Box's fact label, the Eyebrow's small caps. */
  --dk-component-card-eyebrow-color: var(--dk-text-neutral-default);
  --dk-component-card-eyebrow-font-size: var(--dk-font-overline-sm-text-size);
  --dk-component-card-eyebrow-line-height: var(--dk-font-overline-sm-line-height);
  --dk-component-card-eyebrow-letter-spacing: 0.12em;
  --dk-component-card-eyebrow-font-weight: var(--dk-primitive-font-weight-semi-bold);
  --dk-component-card-disabled-text: var(--dk-text-disabled-subtle);
  --dk-component-card-disabled-icon: var(--dk-icon-disabled-subtle);

  /* ── Media: a frame for an image, a cover or an icon. Its fill is a control
     rung above the card, and steps with it, so an icon tile always reads. ── */
  --dk-component-card-media-ratio: 16 / 9;
  --dk-component-card-media-surface: var(--dk-surface-control-default);
  --dk-component-card-media-surface-hover: var(--dk-surface-control-hover);
  --dk-component-card-media-surface-active: var(--dk-surface-control-active);
  --dk-component-card-media-icon: var(--dk-interactive-tone-mark, var(--dk-icon-primary-default));
  --dk-component-card-small-icon-size: var(--dk-primitive-scale-8);
  --dk-component-card-icon-size: var(--dk-primitive-scale-10);
  --dk-component-card-large-icon-size: var(--dk-primitive-scale-12);
  /* Beside the body (data-orientation="horizontal"): the media's width. */
  --dk-component-card-small-media-inline: var(--dk-primitive-scale-20);
  --dk-component-card-media-inline: var(--dk-primitive-scale-28);
  --dk-component-card-large-media-inline: var(--dk-primitive-scale-40);
  --dk-component-card-media-inset-radius-min: var(--dk-border-radius-150);
  --dk-component-card-line-color: var(--dk-border-hairline-current);

  /* ── The CTA: one action, full width, a little more room above it than the
     body's own gap. The corners: buttons floating over the top of the card
     (a heart, a menu). A heart is an Icon button with aria-pressed and
     data-pressed-glyph="fill": its colour and fill are Icon button's. ── */
  --dk-component-card-cta-gap: var(--dk-spacing-3);
}

/* ══════════════════════════════════ drift-kit:layer components/checkbox/tokens.css ══════════════════════════════════ */
/* ============================================================================
   Checkbox — component token collection (--dk-component-checkbox-*)
   ----------------------------------------------------------------------------

   WHAT THIS REPLACED. One token, a hardcoded `stroke: #fff` on the tick,
   hardcoded 12px glyph sizes, and a box that painted the flat
   --dk-surface-default-body, one colour at every level and immune to every tone. Measured against the
   panel it sat on, the box read 1.00:1 on the page, 1.20:1 at level 2 and
   1.52:1 on a subtle primary panel, while its edge, which DID follow the tone,
   collapsed to 1.19:1. The fill never moved and the edge moved the wrong way.

   THE BOX READS THE FIELD PALETTE. tokens/mapped/field.css is the level-aware,
   tone-escaped palette Input and Select paint from, and a checkbox
   is the same kind of object: a small outlined box on a form. Reading it here
   is what makes a checkbox and a text input in the same row agree, and it is
   why none of the toned-panel work has to be done twice.

   THE CHECKED FILL IS PRIMARY-600, NOT 500, AND THE TICK IS WHY. The tick is
   the state, and white on the old fill was 2.82:1, under the 3:1 a graphical
   object carries. Every rung, both themes:

     rung   tick on fill   fill vs light page   fill vs dark page
     500            2.82                 2.82                5.69
     600            4.25                 3.56                3.77
     700            6.75                 6.75                2.38
     800           10.85                10.85                1.48

   600 is the only rung that clears 3:1 on both axes in both themes. 700 reads
   beautifully in light and disappears on a dark page.

   KNOWN: on a solid primary panel the checked box is 1.59:1 against the panel.
   The white tick is 6.75:1 against that same panel, so the state reads and the
   box's own edge does not. Switch already ships the same trade at 2.39:1.

   SIZES RIDE INPUT'S LADDER, so a checkbox and a field's leading icon are the
   same size at the same rung: 16 / 20 / 24, which is scale-4 / 5 / 6, beside
   14 / 16 / 18 label text, which is Input's three font sizes. The glyph sizes
   are literals because the scale has no rung at 10 or 14, and a component token
   is exactly the rung the ladder is missing.
   ============================================================================ */
/* SCOPED TO THE COMPONENT, not to every themed element on the page.

   This block used to carry four legs: [data-theme="light"],
   [data-theme="dark"], [data-surface] and [data-tone]. That put the whole
   collection on <body> and on every panel, and custom properties inherit, so
   all 68 of these reached every element in the document. Across the kit that
   came to 2,958 custom properties on a bare <span>, which is what makes the
   browser's inspector crawl.

   NOTHING IS LOST BY MOVING IT HERE. The four legs existed so the collection
   would re-resolve inside a tone, a level or an inverse panel. Declared on the
   component itself it resolves ON the component, against that element's own
   nearest theme, tone and level, which is the same answer arrived at more
   directly. Proven on Button first: check:button, check:contract,
   check:conformance and check:contrast all pass unchanged, and the last two
   sweep every tone, level and theme. */
.dk-component-checkbox {
  /* ── Geometry ── */
  --dk-component-checkbox-size: var(--dk-primitive-scale-5);
  --dk-component-checkbox-small-size: var(--dk-primitive-scale-4);
  --dk-component-checkbox-large-size: var(--dk-primitive-scale-6);
  /* THE GLYPH ELEMENT TAKES THE WHOLE BOX. It does not follow that the tick
     touches the edges: a check path is drawn well inside its own viewBox, so
     the air around it comes from the path rather than from a smaller element.
     The kit's tick runs x 5 to 19 and y 7 to 17 of 24, which is 58% of the box
     across and 42% down once the element matches the box.

     MINUS THE BORDERS, which is not a detail. The indicator is border-box, so
     its CONTENT box is two border widths smaller; a glyph sized to the outer
     box overflows it, and an overflowing grid item is not centred, it is pinned
     to the start edge. Measured, the ink sat 1.00px right and 1.00px low at
     every size, the same 1px in both axes whatever the box, which is the border
     and nothing else.

     Sized at 60% of the box first, which is the number that looks right written
     down and is wrong on screen: the ink measured 5.8 x 4.2 in a 16px box, 7.0
     x 5.0 in a 20px box and 8.2 x 5.8 in a 24px box, 34 to 36% of the box at
     every size, and read as a tick someone had shrunk by mistake.

     THE BORDERS ARE THE THIN TIER'S (8 Nov, Julio). The sizes are the box at
     the thin hairline, and the glyph is drawn inside that hairline, so it is
     the same at every border tier: a thicker tier grows the box outward by
     what its border gained (styles.css, --_cb-grow). Minus the live border,
     the tick was 18px at thin and 4px at bold. */
  --dk-component-checkbox-glyph-size: calc(var(--dk-component-checkbox-size) - 2 * var(--dk-component-checkbox-border-width-base));
  --dk-component-checkbox-small-glyph-size: calc(var(--dk-component-checkbox-small-size) - 2 * var(--dk-component-checkbox-border-width-base));
  --dk-component-checkbox-large-glyph-size: calc(var(--dk-component-checkbox-large-size) - 2 * var(--dk-component-checkbox-border-width-base));
  /* THE TICK'S OWN WEIGHT, not the icon ramp's. --dk-responsive-icon-stroke-2
     is drawn for a glyph at icon size and resolves to 1.75 user units, which on
     a box this small rendered 1.17px at small, 1.46 at medium and 1.75 at
     large: a hairline rather than a tick. The stroke is in viewBox units, so
     one number scales with the box; 3 renders 1.75 / 2.25 / 2.75px.

     IT IS A NUMBER, NOT A LENGTH, because that is what stroke-width in a scaled
     viewBox wants. The dash below therefore cannot borrow it: a bare 3 is
     invalid as a height, which makes the declaration invalid at computed-value
     time and the dash an empty block. It drew nothing at all for exactly as
     long as the two shared this token. */
  --dk-component-checkbox-glyph-stroke: 3;
  /* THE GLYPH SHRINKS UNDER THE FINGER, and it needs its own ratio rather than
     --dk-primitive-transform-scale-active-control, which Button, the icon
     button and Tabs all read. That primitive is 0.97, which is the right press
     for a wide control and 0.2px of movement on a 16px tick: a press nobody can
     see is a press that is not there. The number here is measured against the
     glyph it moves, not inherited from a control ten times its size. */
  --dk-component-checkbox-glyph-scale-active: 0.85;
  /* The tick draws itself along its own stroke when checked and undraws
     backwards when cleared. The length is in the icon's own units: a dash as
     long as its 24-unit box covers any tick drawn in one, so no path has to be
     measured. Drawing is a little slower than undrawing, so arriving reads as
     a gesture and leaving gets out of the way. */
  --dk-component-checkbox-glyph-draw-length: 24;
  /* It waits for the box's fill to finish (the indicator's own transition) so
     the tick draws on a settled colour. Undrawing does not wait. */
  --dk-component-checkbox-glyph-draw-delay: var(--dk-motion-state-duration);
  --dk-component-checkbox-glyph-draw-duration: var(--dk-motion-feedback-duration);
  /* Never the spring (15 Oct): an overshoot on a dash offset ran it past the
     tick's start and cut its first stroke off. Enter's curve lands softly. */
  --dk-component-checkbox-glyph-draw-easing: var(--dk-motion-enter-easing);
  --dk-component-checkbox-glyph-undraw-duration: var(--dk-motion-feedback-duration);
  --dk-component-checkbox-glyph-undraw-easing: var(--dk-motion-exit-easing);
  /* The dash's own thickness, as a real length, cut to match the tick's stroke
     at each size rather than restating the number. */
  --dk-component-checkbox-dash-thickness: calc(var(--dk-component-checkbox-size) * 0.125);
  --dk-component-checkbox-small-dash-thickness: calc(var(--dk-component-checkbox-small-size) * 0.125);
  --dk-component-checkbox-large-dash-thickness: calc(var(--dk-component-checkbox-large-size) * 0.125);
  /* 5px on a 20px box. It was 3px, which is a corner you have to look for at
     this size; the rung is taken from the radius scale rather than written as
     a length so it still answers to data-border-radius. */
  --dk-component-checkbox-radius: var(--dk-border-radius-125);
  --dk-component-checkbox-border-width: var(--dk-border-width-25);
  /* The hairline the sizes above are drawn at, the thin tier's. */
  --dk-component-checkbox-border-width-base: var(--dk-primitive-scale-0-25);
  /* Its own, not Input's: component-to-component is not a tier. Same value and
     the same reason, so the two rings are one ring on a form. */
  --dk-component-checkbox-focus-ring-width: var(--dk-border-width-100);
  /* Box to text. */
  --dk-component-checkbox-gap: var(--dk-spacing-2);
  /* ZERO, and the line box is why. The label and the description are both set
     on a 24px line-height rung against 16px text, so each carries half-leading
     above and below its glyphs: 8px of clear space sits between the two before
     any gap is added. The 2px this used to add read as a paragraph break in a
     pair that is one idea said twice.
     KEPT AS A TOKEN rather than deleted, because the group's legend and its
     description are the same pair one level up and their margin is computed
     from this: calc(legend-gap * -1 + text-gap) collapses to exactly the
     legend gap when this is 0, so the two stay in step by construction. */
  --dk-component-checkbox-text-gap: 0;
  /* One option to the next inside a group, and the legend to the first option. */
  --dk-component-checkbox-group-gap: var(--dk-spacing-2);
  --dk-component-checkbox-group-legend-gap: var(--dk-spacing-2);
  --dk-component-checkbox-group-row-gap: var(--dk-spacing-4);

  /* ── Type ── */
  --dk-component-checkbox-label-font-family: var(--dk-font-family-primary);
  --dk-component-checkbox-label-font-size: var(--dk-font-body-md-text-size);
  --dk-component-checkbox-label-line-height: var(--dk-font-body-md-line-height);
  --dk-component-checkbox-small-label-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-checkbox-small-label-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-checkbox-large-label-font-size: var(--dk-font-body-lg-text-size);
  --dk-component-checkbox-large-label-line-height: var(--dk-font-body-lg-line-height);
  --dk-component-checkbox-label-font-weight: var(--dk-primitive-font-weight-medium);
  /* THE DESCRIPTION IS THE LABEL'S SIZE, and only its weight and its colour
     set it apart. It was a rung smaller, 14 against 16, which made a two-line
     option read as a heading with a footnote under it rather than as one
     thought. Its own -desc-font-size and -desc-line-height are gone rather than
     left pointing at the label's: a token nothing reads is a lie about what the
     component can be tuned by. */
  --dk-component-checkbox-desc-font-weight: var(--dk-primitive-font-weight-regular);

  /* ── The empty box ── */
  --dk-component-checkbox-surface-default: var(--dk-surface-field-default);
  --dk-component-checkbox-surface-hover: var(--dk-surface-field-hover);
  --dk-component-checkbox-surface-active: var(--dk-surface-field-action-active);
  --dk-component-checkbox-border-default: var(--dk-border-field-default);
  --dk-component-checkbox-border-hover: var(--dk-border-field-hover);
  --dk-component-checkbox-border-active: var(--dk-border-field-hover);

  /* ── Checked, and indeterminate, which is a kind of checked ── */
  --dk-component-checkbox-checked-surface-default: var(--dk-surface-choice-selected);
  --dk-component-checkbox-checked-surface-hover: var(--dk-surface-choice-selected-hover);
  --dk-component-checkbox-checked-surface-active: var(--dk-surface-choice-selected-active);
  --dk-component-checkbox-checked-border-default: var(--dk-surface-choice-selected);
  --dk-component-checkbox-checked-border-hover: var(--dk-surface-choice-selected-hover);
  --dk-component-checkbox-checked-border-active: var(--dk-surface-choice-selected-active);
  --dk-component-checkbox-glyph: var(--dk-icon-choice-selected);

  /* ── The halo. A hairline of the surface the control would have if the panel
     under it were untoned, drawn just outside the box.

     It exists because the chosen fill escapes the tone and the panel does not,
     so on a panel of its own hue the two collide: measured, a checked box
     hovered on a solid primary panel was primary-700 on primary-700, 1.00:1, a
     control that had completely disappeared. Every other fix needs to know what
     is behind the box, which CSS cannot.

     It is invisible everywhere it is not needed, by construction. On the page
     and at every level the halo and the box are the same token, so there is
     nothing to see; an unchecked box on a toned panel is the field surface and
     so is its halo. It appears only around a CHOSEN box on a toned panel, which
     is exactly the case that was broken. ── */
  --dk-component-checkbox-halo: var(--dk-surface-field-default);
  --dk-component-checkbox-halo-width: var(--dk-border-width-25);

  /* ── Focus ── */
  --dk-component-checkbox-ring: var(--dk-border-field-focus-ring);
  --dk-component-checkbox-focus-border: var(--dk-border-field-focus);

  /* ── aria-invalid, exactly as Input spells it ── */
  --dk-component-checkbox-error-border-default: var(--dk-border-field-error);
  --dk-component-checkbox-error-border-hover: var(--dk-border-field-error-focus);
  --dk-component-checkbox-error-ring: var(--dk-border-field-error-ring);
  --dk-component-checkbox-error-color: var(--dk-text-error-default);

  /* ── Disabled. An empty disabled box and a ticked disabled box are different
     things: one is refusing input, the other is reporting a value it will not
     let you change, and the tick has to stay readable on it. ── */
  --dk-component-checkbox-disabled-surface: var(--dk-surface-field-hover);
  --dk-component-checkbox-disabled-border: var(--dk-border-field-disabled);
  --dk-component-checkbox-disabled-checked-surface: var(--dk-surface-choice-disabled);
  --dk-component-checkbox-disabled-checked-border: var(--dk-surface-choice-disabled);
  --dk-component-checkbox-disabled-glyph: var(--dk-icon-choice-disabled);

  /* ── Text. NOT the field palette, and that is the one place these two part
     company. The box is a control and escapes the tone; the label, the
     description and the legend are copy sitting ON the panel and have to read
     as the panel's copy, the same way Input's label and caption do. Measured
     with them on the field palette first: black label on a solid primary panel,
     3.11:1, when the panel's own copy beside it was white. ── */
  --dk-component-checkbox-label-color: var(--dk-text-default);
  --dk-component-checkbox-desc-color: var(--dk-text-neutral-default);
  --dk-component-checkbox-disabled-label-color: var(--dk-text-disabled-default);
  --dk-component-checkbox-disabled-desc-color: var(--dk-text-disabled-default);
  --dk-component-checkbox-legend-color: var(--dk-text-default);
}

/* ═════════════════════════════════════ drift-kit:layer components/radio/tokens.css ═════════════════════════════════════ */
/* ============================================================================
   Radio — component token collection (--dk-component-radio-*)
   ----------------------------------------------------------------------------

   IDENTICAL TO CHECKBOX'S, DELIBERATELY, AND NOT SHARED WITH IT. A radio and a
   checkbox are the same object with a different shape and a different promise:
   one of these, or any of these. Every rung below matches Checkbox's, and they
   are written out here rather than pointed at because component-to-component is
   not a tier in this kit. What keeps them from drifting is that both read the
   same mapped families, tokens/mapped/field.css for the empty box and the
   choice palette in the same file for the chosen one.

   THREE DIFFERENCES, all of them here. The radius is a full circle rather than
   a corner. There is no indeterminate state, because a radio has no such thing:
   a group with nothing chosen is a group with nothing chosen, which the native
   control already expresses. And the glyph is a dot the stylesheet draws rather
   than an <svg> the consumer supplies, because a filled circle is not an icon.

   Everything else, including the measurement behind the primary-600 chosen fill
   and the per-theme glyph colour, is recorded in the checkbox collection.
   ============================================================================ */
/* SCOPED TO THE COMPONENT, not to every themed element on the page.

   This block used to carry four legs: [data-theme="light"],
   [data-theme="dark"], [data-surface] and [data-tone]. That put the whole
   collection on <body> and on every panel, and custom properties inherit, so
   all 55 of these reached every element in the document. Across the kit that
   came to 2,958 custom properties on a bare <span>, which is what makes the
   browser's inspector crawl.

   NOTHING IS LOST BY MOVING IT HERE. The four legs existed so the collection
   would re-resolve inside a tone, a level or an inverse panel. Declared on the
   component itself it resolves ON the component, against that element's own
   nearest theme, tone and level, which is the same answer arrived at more
   directly. Proven on Button first: check:button, check:contract,
   check:conformance and check:contrast all pass unchanged, and the last two
   sweep every tone, level and theme. */
.dk-component-radio {
  /* ── Geometry ── */
  --dk-component-radio-size: var(--dk-primitive-scale-5);
  --dk-component-radio-small-size: var(--dk-primitive-scale-4);
  --dk-component-radio-large-size: var(--dk-primitive-scale-6);
  /* The dot, and unlike Checkbox's tick this IS the ink: the stylesheet draws
     it, so there is no path inset to allow for.

     EVEN NUMBERS, which is the whole reason these are not the round 45% they
     look like they should be. The dot was 7, 9 and 11px inside content boxes of
     14, 18 and 22: an odd dot in an even box cannot be centred on a whole
     pixel, and the browser rounds the remainder one way. Measured at 4x zoom it
     sat 0.50px right and 0.50px low at every size.

     6, 8 and 10 divide evenly, land on 0.00, and keep the dot a dot. 8, 10 and
     12 also divide evenly and were tried first: at half the box the white
     centre stops reading as a dot on a ring and starts reading as a ring on a
     dot, which is a different component. */
  --dk-component-radio-glyph-size: 0.5rem;
  /* The dot waits for the fill under it to finish, then grows from nothing to
     1.3 times its size and settles. The curve is written point by point: a
     cubic-bezier overshoot leaves its peak at speed and snaps back, where this
     one decelerates into the peak (an ease-out to 40%) and eases down from it
     (a cosine), so the motion never has a corner. It leaves by shrinking
     straight back to nothing, quicker, with no wait and no bounce. */
  --dk-component-radio-glyph-enter-delay: var(--dk-motion-state-duration);
  --dk-component-radio-glyph-enter-duration: var(--dk-motion-feedback-duration);
  --dk-component-radio-glyph-enter-easing: var(--dk-motion-feedback-easing);
  --dk-component-radio-glyph-exit-duration: var(--dk-motion-exit-duration);
  --dk-component-radio-glyph-exit-easing: var(--dk-motion-exit-easing);
  --dk-component-radio-small-glyph-size: 0.375rem;
  --dk-component-radio-large-glyph-size: 0.625rem;
  /* A circle, at every size, which is the whole visual difference. */
  --dk-component-radio-radius: 50%;
  --dk-component-radio-border-width: var(--dk-border-width-25);
  /* The hairline the sizes above are drawn at, the thin tier's: a thicker
     tier grows the ring outward and the dot's even box inside it stays put
     (8 Nov, Julio; at bold the ring left the dot a 4px hole). */
  --dk-component-radio-border-width-base: var(--dk-primitive-scale-0-25);
  /* Its own, not Input's: component-to-component is not a tier. Same value and
     the same reason, so the two rings are one ring on a form. */
  --dk-component-radio-focus-ring-width: var(--dk-border-width-100);
  /* Box to text. */
  --dk-component-radio-gap: var(--dk-spacing-2);
  /* ZERO, and the line box is why. The label and the description are both set
     on a 24px line-height rung against 16px text, so each carries half-leading
     above and below its glyphs: 8px of clear space sits between the two before
     any gap is added. The 2px this used to add read as a paragraph break in a
     pair that is one idea said twice.
     KEPT AS A TOKEN rather than deleted, because the group's legend and its
     description are the same pair one level up and their margin is computed
     from this: calc(legend-gap * -1 + text-gap) collapses to exactly the
     legend gap when this is 0, so the two stay in step by construction. */
  --dk-component-radio-text-gap: 0;
  /* One option to the next inside a group, and the legend to the first option. */
  --dk-component-radio-group-gap: var(--dk-spacing-2);
  --dk-component-radio-group-legend-gap: var(--dk-spacing-2);
  --dk-component-radio-group-row-gap: var(--dk-spacing-4);

  /* ── Type ── */
  --dk-component-radio-label-font-family: var(--dk-font-family-primary);
  --dk-component-radio-label-font-size: var(--dk-font-body-md-text-size);
  --dk-component-radio-label-line-height: var(--dk-font-body-md-line-height);
  --dk-component-radio-small-label-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-radio-small-label-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-radio-large-label-font-size: var(--dk-font-body-lg-text-size);
  --dk-component-radio-large-label-line-height: var(--dk-font-body-lg-line-height);
  --dk-component-radio-label-font-weight: var(--dk-primitive-font-weight-medium);
  /* THE DESCRIPTION IS THE LABEL'S SIZE, and only its weight and its colour
     set it apart. It was a rung smaller, 14 against 16, which made a two-line
     option read as a heading with a footnote under it rather than as one
     thought. Its own -desc-font-size and -desc-line-height are gone rather than
     left pointing at the label's: a token nothing reads is a lie about what the
     component can be tuned by. */
  --dk-component-radio-desc-font-weight: var(--dk-primitive-font-weight-regular);

  /* ── The empty box ── */
  --dk-component-radio-surface-default: var(--dk-surface-field-default);
  --dk-component-radio-surface-hover: var(--dk-surface-field-hover);
  --dk-component-radio-surface-active: var(--dk-surface-field-action-active);
  --dk-component-radio-border-default: var(--dk-border-field-default);
  --dk-component-radio-border-hover: var(--dk-border-field-hover);
  --dk-component-radio-border-active: var(--dk-border-field-hover);

  /* ── Checked, and indeterminate, which is a kind of checked ── */
  --dk-component-radio-checked-surface-default: var(--dk-surface-choice-selected);
  --dk-component-radio-checked-surface-hover: var(--dk-surface-choice-selected-hover);
  --dk-component-radio-checked-surface-active: var(--dk-surface-choice-selected-active);
  --dk-component-radio-checked-border-default: var(--dk-surface-choice-selected);
  --dk-component-radio-checked-border-hover: var(--dk-surface-choice-selected-hover);
  --dk-component-radio-checked-border-active: var(--dk-surface-choice-selected-active);
  --dk-component-radio-glyph: var(--dk-icon-choice-selected);

  /* ── The halo. A hairline of the surface the control would have if the panel
     under it were untoned, drawn just outside the box.

     It exists because the chosen fill escapes the tone and the panel does not,
     so on a panel of its own hue the two collide: measured, a checked box
     hovered on a solid primary panel was primary-700 on primary-700, 1.00:1, a
     control that had completely disappeared. Every other fix needs to know what
     is behind the box, which CSS cannot.

     It is invisible everywhere it is not needed, by construction. On the page
     and at every level the halo and the box are the same token, so there is
     nothing to see; an unchecked box on a toned panel is the field surface and
     so is its halo. It appears only around a CHOSEN box on a toned panel, which
     is exactly the case that was broken. ── */
  --dk-component-radio-halo: var(--dk-surface-field-default);
  --dk-component-radio-halo-width: var(--dk-border-width-25);

  /* ── Focus ── */
  --dk-component-radio-ring: var(--dk-border-field-focus-ring);
  --dk-component-radio-focus-border: var(--dk-border-field-focus);

  /* ── aria-invalid, exactly as Input spells it ── */
  --dk-component-radio-error-border-default: var(--dk-border-field-error);
  --dk-component-radio-error-border-hover: var(--dk-border-field-error-focus);
  --dk-component-radio-error-ring: var(--dk-border-field-error-ring);
  --dk-component-radio-error-color: var(--dk-text-error-default);

  /* ── Disabled. An empty disabled box and a ticked disabled box are different
     things: one is refusing input, the other is reporting a value it will not
     let you change, and the tick has to stay readable on it. ── */
  --dk-component-radio-disabled-surface: var(--dk-surface-field-hover);
  --dk-component-radio-disabled-border: var(--dk-border-field-disabled);
  --dk-component-radio-disabled-checked-surface: var(--dk-surface-choice-disabled);
  --dk-component-radio-disabled-checked-border: var(--dk-surface-choice-disabled);
  --dk-component-radio-disabled-glyph: var(--dk-icon-choice-disabled);

  /* ── Text. NOT the field palette, and that is the one place these two part
     company. The box is a control and escapes the tone; the label, the
     description and the legend are copy sitting ON the panel and have to read
     as the panel's copy, the same way Input's label and caption do. Measured
     with them on the field palette first: black label on a solid primary panel,
     3.11:1, when the panel's own copy beside it was white. ── */
  --dk-component-radio-label-color: var(--dk-text-default);
  --dk-component-radio-desc-color: var(--dk-text-neutral-default);
  --dk-component-radio-disabled-label-color: var(--dk-text-disabled-default);
  --dk-component-radio-disabled-desc-color: var(--dk-text-disabled-default);
  --dk-component-radio-legend-color: var(--dk-text-default);
}

/* ══════════════════════════════════ drift-kit:layer components/dropzone/tokens.css ══════════════════════════════════ */
/* ============================================================================
   Dropzone: component token collection (--dk-component-dropzone-*)
   ----------------------------------------------------------------------------

   OWN TOKENS FOR WHAT WERE RAW PRIMITIVE READS. The Primitives collection is
     documented as "never consumed directly by components or pages", and six
     components already declare their own for exactly this (Body, Alert, Button,
     Heading, Eyebrow, Hero) while nine read the primitive inline. The ladder had
     no rung between them for weight and motion, so there was nowhere else to go;
     a component token is that rung, and is what the grammar already expects.

   EVERY STATE IS A TOKEN NOW. The first cut read two raw primary rungs for its
     hint and title and patched dark mode with [data-theme="dark"] overrides,
     which broke inside a tone or an inverse panel. The "on subtle" text family
     is the level-aware answer to text on a primary tint, so the overrides go. */
/* SCOPED TO THE COMPONENT, not to every themed element on the page.

   This block used to carry four legs: [data-theme="light"],
   [data-theme="dark"], [data-surface] and [data-tone]. That put the whole
   collection on <body> and on every panel, and custom properties inherit, so
   all 3 of these reached every element in the document. Across the kit that
   came to 2,958 custom properties on a bare <span>, which is what makes the
   browser's inspector crawl.

   NOTHING IS LOST BY MOVING IT HERE. The four legs existed so the collection
   would re-resolve inside a tone, a level or an inverse panel. Declared on the
   component itself it resolves ON the component, against that element's own
   nearest theme, tone and level, which is the same answer arrived at more
   directly. Proven on Button first: check:button, check:contract,
   check:conformance and check:contrast all pass unchanged, and the last two
   sweep every tone, level and theme. */
.dk-component-dropzone {
  --dk-component-dropzone-hint-font-weight: var(--dk-primitive-font-weight-regular);
  --dk-component-dropzone-title-font-weight: var(--dk-primitive-font-weight-semi-bold);

  /* Field anatomy: the same label and caption as Input, so a dropzone in a
     form reads as one of its fields. */
  --dk-component-dropzone-gap: var(--dk-spacing-1-5);
  --dk-component-dropzone-label-font-family: var(--dk-font-family-primary);
  --dk-component-dropzone-label-font-size: var(--dk-font-overline-lg-text-size);
  --dk-component-dropzone-label-line-height: var(--dk-font-overline-lg-line-height);
  --dk-component-dropzone-label-letter-spacing: 0.08em;
  --dk-component-dropzone-label-font-weight: var(--dk-primitive-font-weight-bold);
  --dk-component-dropzone-caption-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-dropzone-caption-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-dropzone-error-color: var(--dk-text-error-outline);

  /* The area. Stacked is the roomy drop target; compact is one row for a form. */
  --dk-component-dropzone-padding-y: var(--dk-spacing-7);
  --dk-component-dropzone-padding-x: var(--dk-spacing-5);
  --dk-component-dropzone-compact-padding-y: var(--dk-spacing-3);
  --dk-component-dropzone-compact-padding-x: var(--dk-spacing-4);
  --dk-component-dropzone-content-gap: var(--dk-spacing-2);
  --dk-component-dropzone-compact-content-gap: var(--dk-spacing-3);
  --dk-component-dropzone-text-gap: var(--dk-spacing-0-5);
  --dk-component-dropzone-radius: var(--dk-border-radius-300);
  --dk-component-dropzone-border-width: var(--dk-border-width-50);
  --dk-component-dropzone-icon-size: var(--dk-primitive-scale-7);
  --dk-component-dropzone-compact-icon-size: var(--dk-primitive-scale-6);
  --dk-component-dropzone-clear-inset: var(--dk-spacing-2);
  --dk-component-dropzone-active-scale: var(--dk-interactive-press-surface);

  /* Rest */
  /* Level-aware (14 Oct): the nested fill and the dashed edge's neutral step
     with the panel the area sits on, as they did not when these were the
     page's neutral-subtle. */
  --dk-component-dropzone-surface: var(--dk-surface-control-default);
  --dk-component-dropzone-border: var(--dk-border-hairline-current);
  --dk-component-dropzone-icon-color: var(--dk-icon-neutral-default);
  --dk-component-dropzone-title-color: var(--dk-text-default);
  /* One step stronger than subtle (14 Oct): AA on the level-aware fill. */
  --dk-component-dropzone-hint-color: var(--dk-text-neutral-default);
  /* Hover and drag-over share ONE treatment: both say "this is where it goes".
     SAME RUNG, PRIMARY FAMILY. Rest has a neutral-500 icon and hint under
     the strongest text; hover keeps the icon and hint on the same rung,
     primary-500 (400 dark), and the title on the strongest primary text,
     700 (200 dark). Two earlier cuts moved the hint darker than it rests,
     to 700 then 600, so the subtle line got louder on hover (30 Sep). */
  /* Each state follows the NEAREST status tone through the tone family
     (16 Oct), and keeps the primary emphasis on a plain surface or inside a
     reset, where the family is unset. */
  --dk-component-dropzone-surface-hover: var(--dk-interactive-tone-fill-hover, var(--dk-surface-primary-subtle));
  /* The dashed edge's primary, a step lighter in light mode (14 Oct). */
  --dk-component-dropzone-border-hover: var(--dk-interactive-tone-mark, var(--dk-border-dashed-primary));
  --dk-component-dropzone-icon-color-hover: var(--dk-interactive-tone-mark, var(--dk-icon-primary-default));
  --dk-component-dropzone-title-color-hover: var(--dk-interactive-tone-text, var(--dk-text-primary-on-subtle));
  --dk-component-dropzone-hint-color-hover: var(--dk-interactive-tone-text-subtle, var(--dk-text-primary-default));
  /* Pressed, one step deeper */
  --dk-component-dropzone-surface-active: var(--dk-interactive-tone-fill-active, var(--dk-surface-primary-subtle-hover));
  --dk-component-dropzone-border-active: var(--dk-interactive-tone-mark, var(--dk-border-primary-hover));
  /* A file is chosen: the dashed border goes solid, on the primary tint. */
  --dk-component-dropzone-surface-filled: var(--dk-interactive-tone-fill-hover, var(--dk-surface-primary-subtle));
  --dk-component-dropzone-border-filled: var(--dk-interactive-tone-mark, var(--dk-border-primary-default));
  /* Error: the field error border, the same one Input uses. */
  --dk-component-dropzone-border-error: var(--dk-border-field-error);
  /* Disabled: NO FILL. The disabled surface is the same neutral-25 as rest,
     so the first cut changed only the text and still looked clickable
     (30 Sep). With the fill gone the target itself reads as absent, and the
     text keeps the rest ladder in the disabled family: the title fainter,
     the icon and hint fainter still. */
  --dk-component-dropzone-surface-disabled: transparent;
  --dk-component-dropzone-border-disabled: var(--dk-border-disabled-subtle);
  --dk-component-dropzone-title-disabled: var(--dk-text-disabled-default);
  --dk-component-dropzone-hint-disabled: var(--dk-text-disabled-subtle);
  --dk-component-dropzone-icon-disabled: var(--dk-icon-disabled-subtle);
  /* Keyboard focus: the field ring, on the area, since the input is hidden. */
  --dk-component-dropzone-focus-ring-width: var(--dk-border-width-100);
  --dk-component-dropzone-focus-ring: var(--dk-border-field-focus-ring);
  --dk-component-dropzone-focus-border: var(--dk-interactive-tone-mark, var(--dk-border-field-focus));

  /* The file list (multiple) */
  --dk-component-dropzone-files-gap: var(--dk-spacing-1-5);
  --dk-component-dropzone-file-gap: var(--dk-spacing-2);
  --dk-component-dropzone-file-padding-y: var(--dk-spacing-1-5);
  --dk-component-dropzone-file-padding-x: var(--dk-spacing-3);
  --dk-component-dropzone-file-radius: var(--dk-border-radius-200);
  --dk-component-dropzone-file-surface: var(--dk-surface-control-default);
  --dk-component-dropzone-file-border: var(--dk-border-hairline-current);
  --dk-component-dropzone-file-border-width: var(--dk-border-width-25);
  --dk-component-dropzone-file-icon-size: var(--dk-primitive-scale-5);
  --dk-component-dropzone-file-icon-color: var(--dk-icon-primary-default);
  --dk-component-dropzone-file-name-color: var(--dk-text-default);
  --dk-component-dropzone-file-name-font-weight: var(--dk-primitive-font-weight-medium);
  --dk-component-dropzone-file-size-color: var(--dk-text-neutral-subtle);
}

/* ═════════════════════════════════════ drift-kit:layer components/modal/tokens.css ═════════════════════════════════════ */
/* ============================================================================
   Modal — component token collection (--dk-component-modal-*)
   ----------------------------------------------------------------------------
   SCOPED TO THE COMPONENT, not to the theme legs: custom properties inherit, so
   a collection declared on [data-theme] reaches every element in the document.
   Declared here it resolves on the component, against that element's own
   nearest theme, tone and level, which is the same answer arrived at more
   directly. AND TO THE BOX, which documentation examples render on its own
   without the overlay around it.

   FOUR WIDTHS AND NO MORE. 400 for a question, 500 for a form, 640 for a form
   with two columns in it, 800 for the one that holds a table. Anything wider is
   a page: a dialog is a thing you finish and dismiss, and past 800px on a
   desktop it stops reading as something on top of the page and starts reading
   as the page with a border. The component library ships a fifth, "full", at
   the viewport minus a margin; this deliberately does not, for that reason.

   THE HEIGHTS ARE dvh, NOT vh, which is the one line of this file that fixes a
   real bug rather than tidying one. On a phone, vh is the viewport WITHOUT the
   browser's collapsing toolbars, so a sheet measured in vh is taller than the
   screen while the toolbar is showing: the footer, which holds the buttons,
   sits under it. dvh is the viewport as it currently is, which is what a box
   pinned to the bottom edge needs. vh stays as the fallback for anything old
   enough not to know the unit.
   ============================================================================ */
.dk-component-modal, .dk-component-modal__box {
  /* ── The box ── */
  --dk-component-modal-small-width: 400px;
  --dk-component-modal-width: 500px;
  --dk-component-modal-large-width: 640px;
  --dk-component-modal-xlarge-width: 800px;
  --dk-component-modal-radius: var(--dk-border-radius-300);
  --dk-component-modal-surface: var(--dk-surface-raised-default);
  --dk-component-modal-border: var(--dk-border-raised-default);
  --dk-component-modal-border-width: var(--dk-border-width-25);
  --dk-component-modal-shadow: var(--dk-shadow-overlay, 0 2px 6px 0 rgba(0, 0, 0, 0.10), 0 12px 32px 0 rgba(0, 0, 0, 0.22));
  /* Room between the box and the edge of the screen, and the reason the box is
     never quite the viewport: a dialog that touches the edges has stopped
     looking like something on top of the page. */
  --dk-component-modal-inset: var(--dk-spacing-4);
  --dk-component-modal-max-height: min(75dvh, calc(100dvh - var(--dk-spacing-8)));

  /* THE BACKDROP IS A TOKEN NOW, and it was rgba(0, 0, 0, .8) written into the
     stylesheet: the same value the token holds, arrived at by hand. The token's
     own note is the decision this component depends on, that a modal IS the
     page for as long as it is open and a backdrop that heavy says so, which is
     also why a select's sheet reads the softer one instead. */
  --dk-component-modal-backdrop: var(--dk-surface-backdrop-black);
  /* How much the page behind is blurred under the backdrop. Its own rung
     (the scrim's, not glass's): see the primitive's note. */
  --dk-component-modal-backdrop-blur: var(--dk-primitive-blur-scrim);

  /* ── The parts ──
     ONE INLINE PADDING FOR ALL THREE, which the first cut did not have: the
     header sat at 24 and the body at 20, so the title was four pixels inside
     the text it titled. The block padding differs, and that is deliberate: the
     footer holds controls with their own height and needs less air than the
     body's prose. */
  --dk-component-modal-padding-inline: var(--dk-spacing-6);
  --dk-component-modal-header-padding-block: var(--dk-spacing-5);
  --dk-component-modal-body-padding-block: var(--dk-spacing-5);
  --dk-component-modal-footer-padding-block: var(--dk-spacing-4);
  --dk-component-modal-body-gap: var(--dk-spacing-3);
  --dk-component-modal-footer-gap: var(--dk-spacing-2);
  /* The body's own actions (__actions): air above them under their rule, and
     between the stacked buttons. Fixed rungs, 20 and 12 at every width: a
     button stack keeps its rhythm on a phone, as Action bar's gap does. */
  --dk-component-modal-actions-padding-block-start: var(--dk-primitive-scale-5);
  --dk-component-modal-actions-gap: var(--dk-primitive-scale-3);
  --dk-component-modal-header-gap: var(--dk-spacing-2);
  --dk-component-modal-divider: var(--dk-border-raised-default);

  --dk-component-modal-title-font-size: var(--dk-font-body-lg-text-size);
  --dk-component-modal-title-line-height: var(--dk-font-body-lg-line-height);
  --dk-component-modal-title-font-weight: var(--dk-primitive-font-weight-bold);
  /* --dk-text-default, the page's own copy colour (base black in light, base
     white in dark), NOT --dk-text-neutral-default, which is the neutral-600
     grey a form label takes. Measured on a sheet: the title read lighter than
     the paragraph under it, which is a heading that outranks nothing. */
  --dk-component-modal-title-color: var(--dk-text-default);
  /* The text the box's own copy inherits (9 Nov 2026): a modal is portalled
     to the body, outside any root a page themed, so without it a body
     paragraph took whatever colour the body had, the browser's black. */
  --dk-component-modal-text-color: var(--dk-text-default);
  /* The header glyph. 22px was a literal and is not on the scale at all; 24 is
     scale-6, and next to an 18px title it is the rung that reads as its equal
     rather than as a bullet. */
  --dk-component-modal-icon-size: var(--dk-primitive-scale-6);
  --dk-component-modal-icon-color: var(--dk-icon-primary-default, var(--dk-surface-primary-default));

  /* ── The sheet ──
     Below the kit's mobile breakpoint a dialog is a bottom sheet: full width,
     off the bottom edge, under the thumb. Same treatment a select's menu
     already gets, so a phone shows one behaviour rather than two.

     MAX-height, not height. The component library's sheet sets both, so every
     sheet is exactly 75% of the screen and a two-line confirmation arrives as a
     three-quarter-height panel with a paragraph at the top of it. A sheet
     should be as tall as what is in it and no taller, and only then stop. */
  --dk-component-modal-sheet-max-height: 85dvh;
  /* A CAP, WHICH ONLY EVER APPLIES ABOVE THE BREAKPOINT. Under it the viewport
     is narrower than this and the sheet is full width, which is the whole
     point of a sheet. Above it, which is data-sheet="always" and nothing else,
     an uncapped sheet spans the window and a line of body copy runs 1200px: it
     docks to the bottom, centred, at the width a dialog would have had. */
  --dk-component-modal-sheet-max-width: 40rem;
  --dk-component-modal-sheet-radius: var(--dk-border-radius-300);
  /* A thumb is not a pointer: 44px is the smallest target iOS documents, and a
     small button is 38. This only ever grows them. */
  --dk-component-modal-sheet-action-height: 44px;
  /* When two buttons no longer fit side by side they stack, and this is the
     width below which they no longer fit. A fixed two-column grid, which is
     what the reference does, puts "Cancel" and "Save changes" in 140px each on
     a 360px phone and hyphenates the second one. */
  --dk-component-modal-sheet-action-min: 9rem;

  /* The grabber, and the drag it promises (5 Nov 2026). The bar is the
     size a phone's own sheets draw, a little in from the top edge; the
     header grows at the top to give it room. Let go short of dismissing, the
     sheet settles back on the travel pattern. */
  --dk-component-modal-grabber-width: var(--dk-primitive-scale-9);
  --dk-component-modal-grabber-height: var(--dk-primitive-scale-1);
  --dk-component-modal-grabber-offset: var(--dk-spacing-2);
  --dk-component-modal-grabber-color: var(--dk-border-raised-active);
  --dk-component-modal-sheet-header-padding-top: var(--dk-spacing-7);
  --dk-component-modal-settle-duration: var(--dk-motion-travel-duration);
  --dk-component-modal-settle-easing: var(--dk-motion-travel-easing);

  /* ── Motion ──
     TOKENS, NOT LITERALS, and here that is load-bearing twice over: the motion
     tier zeroes these under prefers-reduced-motion, and behaviour.js reads the
     exit duration off the element to decide how long to wait before hiding it.
     The 200ms it used to wait was written into the JavaScript beside a comment
     saying "matches the kit's .2s exit", which is the definition of a second
     source of truth: with the preference set, the animation was instant and the
     overlay still sat there for a fifth of a second. */
  --dk-component-modal-enter-duration: var(--dk-motion-enter-large-duration);
  --dk-component-modal-exit-duration: var(--dk-motion-exit-large-duration);
  --dk-component-modal-enter-easing: var(--dk-motion-enter-large-easing);
  --dk-component-modal-exit-easing: var(--dk-motion-exit-large-easing);
  /* How far the box travels on the way in. A dialog rises a little; a sheet
     comes up from off the screen, which is the whole of its own distance. */
  --dk-component-modal-enter-travel: var(--dk-spacing-4);
}

/* Generated by scripts/build.js: this component's root colours, again on
   each part that resets a status tone, so they resolve against the reset. */
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-modal .dk-component-modal__box,
.dk-component-modal:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-modal__box {
  --dk-component-modal-surface: var(--dk-surface-raised-default);
  --dk-component-modal-border: var(--dk-border-raised-default);
  --dk-component-modal-divider: var(--dk-border-raised-default);
  --dk-component-modal-title-color: var(--dk-text-default);
  --dk-component-modal-text-color: var(--dk-text-default);
  --dk-component-modal-icon-color: var(--dk-icon-primary-default, var(--dk-surface-primary-default));
  --dk-component-modal-grabber-color: var(--dk-border-raised-active);
}

/* ════════════════════════════════════ drift-kit:layer components/switch/tokens.css ════════════════════════════════════ */
/* ============================================================================
   Switch — component token collection (--dk-component-switch-*)
   ----------------------------------------------------------------------------

   WHAT THIS REPLACED. One token, and everything else a literal or a raw palette
   read: a 34x20 track, a 16px thumb, `--dk-color-base-white` straight from the
   primitives, and --dk-surface-inset-* for the off state. That off pair
   measured 1.16:1, a white disc on a near-white track; the shape is the same
   now and the rung is the one the measurement picked. The primitives
   collection is documented as "never consumed directly by components or pages",
   and this component was the clearest violation left in the kit.

   BOTH TRACKS COME FROM THE CHOICE PALETTE, the on one from the same fill
   Checkbox and Radio paint when chosen, the off one from a neutral rung that
   exists for this component alone. That is the one place a switch parts company
   with its two siblings: their unengaged state is an OUTLINED box from the
   field palette, flush with the page, and a switch cannot be, because of the
   thumb.

   AND THE THUMB IS WHY THAT MATTERS. A switch's thumb sits ON the track, so the
   pair has to clear the 3:1 a graphical object carries in BOTH states. The old
   one did not: a white thumb on --dk-surface-inset-default measured 1.16:1 in
   light, a white disc on a near-white track, readable only by its shadow, and
   there was no shadow. Reading the two palettes gives a pair that was already
   measured:

     state   track                        thumb                     light   dark
     off     --dk-surface-choice-track    --dk-icon-choice-track     2.88    5.00
     on      --dk-surface-choice-selected --dk-icon-choice-track     4.25    2.82

   Measured on the rendered component at all three sizes, in both themes, and
   the track itself carries 2.88:1 (light) and 3.21:1 (dark) against the page.
   The light off pair is 0.12 under the 3:1 floor by decision, not by accident:
   the rung that cleared it read too heavy for a control at rest, and the
   thumb's shadow draws the edge instead. mapped/field.css has the rung table.

   THE THUMB IS WHITE, ALWAYS: both states, both themes, and on an inverse panel
   in either. The metaphor and the measurement agree here, which they did not in
   the first cut: one object slides, so it is one colour. The cost is the dark
   on state, white on primary-500, at 2.82:1. That is 0.18 under the graphical
   floor and it is the same trade the light off state makes at 2.88, paid the
   same way, by the shadow that draws the disc's edge. The alternative shipped
   for a day and was wrong on sight: the thumb read primary-900 wherever the
   dark palette was in play, so it turned near-black in dark mode and, worse,
   on an inverse panel inside a light page.

   SIZES RIDE CHECKBOX'S LADDER for the track HEIGHT, 16 / 20 / 24, so a switch
   and a checkbox in the same settings list line up and both centre on the same
   14 / 16 / 18 label. The width is the height times 1.75 rather than three
   numbers off the scale: one ratio keeps the pill the same shape at every rung,
   which three rungs chosen for being on the scale would not.
   ============================================================================ */
/* SCOPED TO THE COMPONENT, not to every themed element on the page. See
   Checkbox's collection for the measurement behind this: four legs on every
   collection put 2,958 custom properties on a bare <span>.

   The group is named too, because its legend and description are SIBLINGS of
   the switches rather than children, so a collection on .dk-component-switch
   alone never reaches the words above them. check:vars is what catches this. */
.dk-component-switch, .dk-component-switch-group {
  /* ── Geometry ──
     The track height IS Checkbox's box size, rung for rung. */
  --dk-component-switch-track-height: var(--dk-primitive-scale-5);
  --dk-component-switch-small-track-height: var(--dk-primitive-scale-4);
  --dk-component-switch-large-track-height: var(--dk-primitive-scale-6);
  /* ONE RATIO, not three widths. 1.75 gives 28 / 35 / 42 against 16 / 20 / 24,
     which is the shape the old 34x20 was reaching for (1.70) with the rungs
     chosen by hand. A pill that changes proportion as it changes size reads as
     three components rather than one at three sizes. */
  --dk-component-switch-track-ratio: 1.75;
  --dk-component-switch-border-width: var(--dk-border-width-25);
  /* The hairline the track's inside is drawn at, the thin tier's: the thumb,
     its inset and its run are measured inside it, and a thicker tier adds
     its difference to the track's outside rather than taking it from them. */
  --dk-component-switch-border-width-base: var(--dk-primitive-scale-0-25);
  /* The air between the thumb and the inside of the track. The thumb's size is
     derived from it rather than written down, so a track that changes height
     cannot leave a thumb the wrong size inside it. */
  --dk-component-switch-thumb-inset: 2px;
  --dk-component-switch-thumb-radius: 50%;
  /* THE THUMB'S EDGE IS DRAWN BY LIGHT, NOT BY A COLOUR DIFFERENCE, which is
     what lets the off track sit at a rung that does not clear 3:1 against a
     white disc. A real switch is legible the same way: the thumb is above the
     track and you read its edge from the shadow. --dk-shadow-raised is the
     kit's quietest rung, a 1px lift, which is all a 14px disc needs. */
  --dk-component-switch-thumb-shadow: var(--dk-shadow-raised);
  /* THE THUMB SHRINKS UNDER THE FINGER, the same press Checkbox's glyph wears
     and the same reasoning: --dk-primitive-transform-scale-active-control is
     0.95, which is right for a 44px control and half a pixel on a 14px thumb.
     Measured against the thumb it moves. */
  --dk-component-switch-thumb-scale-active: 0.85;
  /* Its own, not Checkbox's: component-to-component is not a tier. Same value
     and the same reason, so every control on a form wears one ring. */
  --dk-component-switch-focus-ring-width: var(--dk-border-width-100);
  /* Control to text. */
  --dk-component-switch-gap: var(--dk-spacing-2);
  /* ZERO, and the line box is why: see Checkbox, where the same pair is set on
     the same rung and already carries 8px of half-leading between them. The
     group's legend margin is computed from this, so it stays a token. */
  --dk-component-switch-text-gap: 0;
  /* One switch to the next inside a group, and the legend to the first of them. */
  --dk-component-switch-group-gap: var(--dk-spacing-2);
  --dk-component-switch-group-legend-gap: var(--dk-spacing-2);

  /* NO ROW TOKENS, AND NO data-row. .dk-component-switch-field was a recessed
     box around a switch, an icon and a label, and the box is the only part of
     it that is not this component: a padded, bordered container is something a
     page draws around whatever it likes, and a switch that owns one is a switch
     that has opinions about the panel it sits in. What was worth keeping is the
     ARRANGEMENT, the control at the far end of the row, and that is data-align,
     because it orders this component's own children and nothing outside can
     reach it. The old class also painted --dk-surface-neutral-subtle and
     --dk-border-raised-subtle, neither of which steps with the surface level;
     a page drawing its own box reads --dk-surface-nested-default and
     --dk-border-nested-default and gets that for free. */
  /* The leading glyph a settings row carries. Reads the ordinary primary icon
     token rather than the field palette's, deliberately: it is decoration
     sitting on the panel with the words, not part of the control, so it follows
     a tone exactly as the label beside it does. */
  --dk-component-switch-icon-color: var(--dk-icon-primary-default);
  --dk-component-switch-icon-size: var(--dk-primitive-scale-5);
  --dk-component-switch-small-icon-size: var(--dk-primitive-scale-4);
  --dk-component-switch-large-icon-size: var(--dk-primitive-scale-6);

  /* ── Type. Checkbox's rungs, because a switch row and a checkbox row in one
     settings list are the same line of text. ── */
  --dk-component-switch-label-font-family: var(--dk-font-family-primary);
  --dk-component-switch-label-font-size: var(--dk-font-body-md-text-size);
  --dk-component-switch-label-line-height: var(--dk-font-body-md-line-height);
  --dk-component-switch-small-label-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-switch-small-label-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-switch-large-label-font-size: var(--dk-font-body-lg-text-size);
  --dk-component-switch-large-label-line-height: var(--dk-font-body-lg-line-height);
  --dk-component-switch-label-font-weight: var(--dk-primitive-font-weight-medium);
  --dk-component-switch-desc-font-weight: var(--dk-primitive-font-weight-regular);

  /* ── Off: a FILLED neutral track with a white thumb, which is what a switch
     looks like everywhere anyone has used one, and what the thumb forces. The
     border matches the fill rather than outlining it, so the box stays exactly
     the size the geometry above derives and no hairline shows. See
     tokens/mapped/field.css for the rungs and why 500 (light) and 600 (dark)
     are the ones that clear 3:1 on both axes. ── */
  --dk-component-switch-surface-default: var(--dk-surface-choice-track);
  --dk-component-switch-surface-hover: var(--dk-surface-choice-track-hover);
  --dk-component-switch-surface-active: var(--dk-surface-choice-track-active);
  --dk-component-switch-border-default: var(--dk-surface-choice-track);
  --dk-component-switch-border-hover: var(--dk-surface-choice-track-hover);
  --dk-component-switch-border-active: var(--dk-surface-choice-track-active);
  --dk-component-switch-thumb: var(--dk-icon-choice-track);
  --dk-component-switch-thumb-hover: var(--dk-icon-choice-track);

  /* ── On: the same fill Checkbox and Radio paint when chosen, so three
     controls answering yes on one form answer it in one colour. ── */
  --dk-component-switch-checked-surface-default: var(--dk-surface-choice-selected);
  --dk-component-switch-checked-surface-hover: var(--dk-surface-choice-selected-hover);
  --dk-component-switch-checked-surface-active: var(--dk-surface-choice-selected-active);
  --dk-component-switch-checked-border-default: var(--dk-surface-choice-selected);
  --dk-component-switch-checked-border-hover: var(--dk-surface-choice-selected-hover);
  --dk-component-switch-checked-border-active: var(--dk-surface-choice-selected-active);
  /* THE SAME THUMB AS OFF. It is one disc that slides, so it is one colour,
     and --dk-icon-choice-track is white in both themes. This read
     --dk-icon-choice-selected until it was looked at in dark mode: that is the
     tick's colour, primary-900 there, so the disc went near-black whenever the
     dark palette was in play, in dark mode and equally on an inverse panel
     inside light. */
  --dk-component-switch-checked-thumb: var(--dk-icon-choice-track);
  --dk-component-switch-checked-thumb-hover: var(--dk-icon-choice-track);

  /* ── VARIANTS (17 Oct, Julio): a CONTAINER around the row (the switch,
     its icon and its words); the switch itself never changes. Glider's
     grammar: raised stands the row on the raised surface with an edge and a
     lift, plain draws an edge on whatever it sits on, inset sinks it into the
     control fill. Ghost, no container, is the switch as it was and the
     default. The row is the target, so the container steps its fill. ── */
  --dk-component-switch-small-container-padding: var(--dk-spacing-2);
  --dk-component-switch-container-padding: var(--dk-spacing-3);
  --dk-component-switch-large-container-padding: var(--dk-spacing-4);
  --dk-component-switch-small-container-radius: var(--dk-border-radius-200);
  --dk-component-switch-container-radius: var(--dk-border-radius-300);
  --dk-component-switch-large-container-radius: var(--dk-border-radius-400);
  --dk-component-switch-container-border-width: var(--dk-border-width-25);
  --dk-component-switch-raised-container-surface: var(--dk-surface-raised-default);
  --dk-component-switch-raised-container-surface-hover: var(--dk-surface-raised-hover);
  --dk-component-switch-raised-container-border: var(--dk-border-raised-control-default);
  --dk-component-switch-raised-container-border-hover: var(--dk-border-raised-control-hover);
  --dk-component-switch-raised-container-shadow: var(--dk-shadow-raised);
  --dk-component-switch-plain-container-surface: var(--dk-surface-current);
  --dk-component-switch-plain-container-surface-hover: var(--dk-interactive-surface-hover);
  --dk-component-switch-plain-container-border: var(--dk-border-control-default);
  --dk-component-switch-plain-container-border-hover: var(--dk-border-control-hover);
  --dk-component-switch-inset-container-surface: var(--dk-surface-control-default);
  --dk-component-switch-inset-container-surface-hover: var(--dk-surface-control-hover);
  /* Box's well: a shadow inside the top edge. */
  --dk-component-switch-inset-container-shadow: inset 0 var(--dk-spacing-0-5) var(--dk-spacing-2) var(--dk-shadow-inner-sm);

  /* ── The halo, and it is Checkbox's halo for Checkbox's reason: the on fill
     escapes the tone and the panel does not, so on a panel of its own hue the
     two collide. A hairline of the untoned field surface, drawn just outside
     the track, is invisible everywhere it is not needed. ── */
  --dk-component-switch-halo: var(--dk-surface-field-default);
  --dk-component-switch-halo-width: var(--dk-border-width-25);

  /* ── Focus ── */
  --dk-component-switch-ring: var(--dk-border-field-focus-ring);
  --dk-component-switch-focus-border: var(--dk-border-field-focus);

  /* ── Disabled, and ONE look for both states, which is where this component
     parts from Checkbox a second time. A disabled checkbox needs two looks
     because the tick is the only thing saying which state it is in; a switch
     has the thumb's POSITION saying it, at either end of a track, and that
     survives being greyed out. So both states read the same disabled pair and
     the position carries the meaning.

     It matters more than it sounds. When the off track went neutral and the
     thumb went white, the old disabled off pair became a white thumb on a
     near-white track: measured 1.33:1, a control you cannot read the state of
     at all. The choice palette's disabled pair gives 2.59:1, the same figure
     the disabled on state has always carried, so the two are equally legible
     rather than one being invisible. WCAG exempts an inactive control from the
     contrast minimum; 1.33 was still not defensible. ── */
  --dk-component-switch-disabled-surface: var(--dk-surface-choice-disabled);
  --dk-component-switch-disabled-border: var(--dk-surface-choice-disabled);
  --dk-component-switch-disabled-thumb: var(--dk-icon-choice-disabled);
  --dk-component-switch-disabled-checked-surface: var(--dk-surface-choice-disabled);
  --dk-component-switch-disabled-checked-border: var(--dk-surface-choice-disabled);
  --dk-component-switch-disabled-checked-thumb: var(--dk-icon-choice-disabled);

  /* ── Text. NOT the field palette: the label and the description are copy
     sitting ON the panel and have to read as the panel's copy. Checkbox
     measured the alternative at 3.11:1. ── */
  --dk-component-switch-label-color: var(--dk-text-default);
  --dk-component-switch-desc-color: var(--dk-text-neutral-default);
  --dk-component-switch-disabled-label-color: var(--dk-text-disabled-default);
  --dk-component-switch-disabled-desc-color: var(--dk-text-disabled-default);
  --dk-component-switch-disabled-icon-color: var(--dk-icon-disabled-default);

  /* ── Motion. The travel and the fill move together, so one duration. ── */
  --dk-component-switch-duration: var(--dk-motion-state-duration);
  --dk-component-switch-easing: var(--dk-motion-state-easing);
}

/* ═════════════════════════════════════ drift-kit:layer components/toast/tokens.css ═════════════════════════════════════ */
/* ============================================================================
   Toast — component token collection (--dk-component-toast-*)
   ----------------------------------------------------------------------------
   Two variants on one component. DEFAULT is the card: a Feedback badge, a
   title and a description, a close button, and an optional countdown drawn
   round its ring. COMPACT is DriveIQ's pin toast: one line, a 28px tinted
   circle with the status glyph, the message and a close button.
   Scoped to the toast AND its region, because the region's offset and the
   toast's slide distance are read on both.
   ============================================================================ */
.dk-component-toast, .dk-component-toast-region {
  /* 450px is the CL card's width; there is no primitive at that size. */
  --dk-component-toast-max-width: 450px;
  --dk-component-toast-compact-max-width: min(92vw, 30rem);
  --dk-component-toast-radius: var(--dk-border-radius-200);
  --dk-component-toast-ring-width: var(--dk-border-width-50);
  --dk-component-toast-compact-border-width: var(--dk-border-width-25);
  --dk-component-toast-ring: var(--dk-border-raised-default);
  --dk-component-toast-surface: var(--dk-surface-default-body);
  --dk-component-toast-compact-surface: var(--dk-surface-raised-default);
  --dk-component-toast-shadow: var(--dk-shadow-floating);
  --dk-component-toast-padding: var(--dk-spacing-4);
  --dk-component-toast-compact-padding-block: var(--dk-primitive-scale-3);
  --dk-component-toast-compact-padding-start: var(--dk-primitive-scale-4);
  --dk-component-toast-compact-padding-end: var(--dk-primitive-scale-3);
  --dk-component-toast-content-gap: var(--dk-spacing-2-5);
  --dk-component-toast-compact-gap: var(--dk-primitive-scale-2-5);
  /* Extra room before the close button on the one-liner, on top of the gap:
     the message ran into the cross at 10px (30 Sep 2026). */
  --dk-component-toast-compact-close-gap: var(--dk-primitive-scale-2);
  /* The space between stacked toasts, and between a region and the window. */
  --dk-component-toast-gap: var(--dk-primitive-scale-3);
  --dk-component-toast-region-offset: var(--dk-spacing-10);
  --dk-component-toast-region-offset-small: var(--dk-primitive-scale-4);
  /* How far a toast travels in from its edge. The card comes from further
     than the one-liner, which only needs to rise into place. */
  --dk-component-toast-slide: var(--dk-spacing-10);
  --dk-component-toast-compact-slide: var(--dk-primitive-scale-2);
  --dk-component-toast-enter-duration: var(--dk-motion-enter-large-duration);
  --dk-component-toast-exit-duration: var(--dk-motion-exit-large-duration);
  --dk-component-toast-enter-easing: var(--dk-motion-enter-large-easing);
  --dk-component-toast-exit-easing: var(--dk-motion-exit-large-easing);
  /* DriveIQ's compact curves: out quickly, leave a little faster. */
  --dk-component-toast-compact-enter-duration: var(--dk-motion-enter-large-duration);
  --dk-component-toast-compact-exit-duration: var(--dk-motion-exit-large-duration);
  --dk-component-toast-compact-enter-easing: var(--dk-motion-enter-large-easing);
  --dk-component-toast-title-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-toast-title-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-toast-title-font-weight: var(--dk-primitive-font-weight-semi-bold);
  --dk-component-toast-title-color: var(--dk-text-default);
  --dk-component-toast-description-color: var(--dk-text-neutral-default);
  --dk-component-toast-compact-icon-size: var(--dk-primitive-scale-7);
  --dk-component-toast-compact-glyph-size: var(--dk-primitive-scale-4);
  --dk-component-toast-z-index: 9999;
}

/* Generated by scripts/build.js: this component's root colours, again on
   each part that resets a status tone, so they resolve against the reset. */
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-toast .dk-component-toast__panel,
.dk-component-toast:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-toast__panel {
  --dk-component-toast-ring: var(--dk-border-raised-default);
  --dk-component-toast-compact-surface: var(--dk-surface-raised-default);
  --dk-component-toast-title-color: var(--dk-text-default);
  --dk-component-toast-description-color: var(--dk-text-neutral-default);
}

/* ══════════════════════════════════════ drift-kit:layer components/tabs/tokens.css ══════════════════════════════════════ */
/* ============================================================================
   Tabs: component token collection (--dk-component-tabs-*)
   ----------------------------------------------------------------------------
   A strip of tabs that switch between panels of one page. What Forge's design
   system pages use for Overview and Tokens, made the kit's (Julio, 12 Oct).
   The old Tabs, a sliding pill in a raised frame, is now Glider:
   that one picks a value, this one navigates.

   THE DOCS' NUMBERS AT MEDIUM: 40 tall (10 above and below a 20 line), 14
   either side, 14px medium labels going semibold when selected, a hairline
   under the whole strip and a 2px brand bar under the selected tab sitting ON
   it. Small and large step the height, padding, type and glyph together.

   THE SELECTED LABEL, GLYPH AND BAR ARE ONE BRAND TONE (--dk-text-tabs-
   selected): primary 500 in light and a step lighter, 400, in dark. A
   branding decision (Julio, 12 Oct), made knowing 500 on white is about
   2.8:1, under AA; it was primary on-subtle (700 / 200) until then.

   ONE LOOK. A pill variant (a solid brand pill under the selected tab) lived
   here from 12 to 13 Oct; Julio took it out: tabs are the underline, and a
   pill look belongs to Glider, which picks values, several of them if need be.
   ============================================================================ */
.dk-component-tabs, .dk-component-tabs__tab, .dk-component-tabs__indicator {
  --dk-component-tabs-height: var(--dk-primitive-scale-10);
  --dk-component-tabs-small-height: var(--dk-primitive-scale-8);
  --dk-component-tabs-large-height: var(--dk-primitive-scale-12);
  --dk-component-tabs-padding-inline: var(--dk-primitive-scale-3-5);
  --dk-component-tabs-small-padding-inline: var(--dk-primitive-scale-2-5);
  --dk-component-tabs-large-padding-inline: var(--dk-primitive-scale-4);
  --dk-component-tabs-gap: var(--dk-primitive-scale-2);

  --dk-component-tabs-font-family: var(--dk-font-family-primary);
  --dk-component-tabs-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-tabs-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-tabs-small-font-size: var(--dk-font-body-xsm-text-size);
  --dk-component-tabs-small-line-height: var(--dk-font-body-xsm-line-height);
  --dk-component-tabs-large-font-size: var(--dk-font-body-md-text-size);
  --dk-component-tabs-large-line-height: var(--dk-font-body-md-line-height);
  --dk-component-tabs-font-weight: var(--dk-primitive-font-weight-medium);
  --dk-component-tabs-selected-font-weight: var(--dk-primitive-font-weight-semi-bold);

  --dk-component-tabs-icon-size: var(--dk-primitive-scale-4);
  --dk-component-tabs-small-icon-size: var(--dk-primitive-scale-3-5);
  --dk-component-tabs-large-icon-size: var(--dk-primitive-scale-5);
  --dk-component-tabs-icon-gap: var(--dk-spacing-1-5);

  --dk-component-tabs-color: var(--dk-interactive-text);
  --dk-component-tabs-color-hover: var(--dk-interactive-text-hover);
  --dk-component-tabs-color-active: var(--dk-interactive-text-active);
  --dk-component-tabs-selected-color: var(--dk-text-tabs-selected);
  --dk-component-tabs-color-disabled: var(--dk-text-disabled-subtle);

  --dk-component-tabs-hairline: var(--dk-border-raised-default);
  --dk-component-tabs-hairline-width: var(--dk-border-width-separator-25);
  --dk-component-tabs-underline-thickness: var(--dk-border-width-50);
  --dk-component-tabs-underline-surface: var(--dk-text-tabs-selected);

  --dk-component-tabs-radius: var(--dk-border-radius-100);

  /* A count: a small neutral number, primary once its tab is selected. */
  --dk-component-tabs-count-size: var(--dk-primitive-scale-5);
  --dk-component-tabs-count-radius: var(--dk-border-radius-round-fixed);
  --dk-component-tabs-count-font-size: var(--dk-font-body-xsm-text-size);
  --dk-component-tabs-count-font-weight: var(--dk-primitive-font-weight-semi-bold);
  --dk-component-tabs-count-surface: var(--dk-surface-neutral-subtle);
  --dk-component-tabs-count-color: var(--dk-text-neutral-default);
  --dk-component-tabs-count-selected-surface: var(--dk-surface-primary-subtle);
  --dk-component-tabs-count-selected-color: var(--dk-text-primary-on-subtle);

  --dk-component-tabs-focus-ring: var(--dk-border-field-focus);
  --dk-component-tabs-focus-ring-width: var(--dk-border-width-50);

  /* Through the alias tier, so prefers-reduced-motion stills them. */
  --dk-component-tabs-transition-duration: var(--dk-motion-state-duration);
  --dk-component-tabs-slide-duration: var(--dk-motion-travel-duration);
  --dk-component-tabs-easing: var(--dk-motion-state-easing);

  /* THE STRETCH (Julio, 12 Oct: "a line that animates to the clicked tab"):
     the bar moves by its two edges, the leading one first and the trailing
     one a fifth of the slide behind, so it reaches toward the new tab and
     then draws itself in. A share of the slide, so reduced motion, which
     zeroes the slide, zeroes the lag as well. The emphasized curve leaves
     fast and lands long and soft (Julio, 12 Oct: "snappy"). */
  --dk-component-tabs-slide-lag: calc(var(--dk-motion-travel-duration) * var(--dk-motion-travel-lag));
  --dk-component-tabs-slide-easing: var(--dk-motion-travel-easing);
  /* Hover previews the line under a tab, in the hairline's hover rung, growing
     from the middle; press presses the words a touch, never the layout. */
  --dk-component-tabs-hover-line: var(--dk-border-raised-hover);
  --dk-component-tabs-hover-line-from: 0.6;
  --dk-component-tabs-press-scale: var(--dk-interactive-press-control);
  --dk-component-tabs-press-duration: var(--dk-motion-press-duration);
}

/* Generated by scripts/build.js: this component's root colours, again on
   each part that resets a status tone, so they resolve against the reset. */
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-tabs .dk-component-tabs__count,
.dk-component-tabs:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-tabs__count,
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-tabs .dk-component-tabs__tab[aria-selected="true"] .dk-component-tabs__count,
.dk-component-tabs:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-tabs__tab[aria-selected="true"] .dk-component-tabs__count {
  --dk-component-tabs-color: var(--dk-interactive-text);
  --dk-component-tabs-color-hover: var(--dk-interactive-text-hover);
  --dk-component-tabs-color-active: var(--dk-interactive-text-active);
  --dk-component-tabs-color-disabled: var(--dk-text-disabled-subtle);
  --dk-component-tabs-hairline: var(--dk-border-raised-default);
  --dk-component-tabs-count-surface: var(--dk-surface-neutral-subtle);
  --dk-component-tabs-count-color: var(--dk-text-neutral-default);
  --dk-component-tabs-count-selected-surface: var(--dk-surface-primary-subtle);
  --dk-component-tabs-hover-line: var(--dk-border-raised-hover);
}

/* ════════════════════════════════════ drift-kit:layer components/glider/tokens.css ════════════════════════════════════ */
/* ============================================================================
   Glider: component token collection (--dk-component-glider-*)
   ----------------------------------------------------------------------------
   Picks a value, one or several, from a few options side by side: the raised
   frame with one primary pill sliding under the chosen option. It was the
   kit's Tabs until 12 Oct, when Tabs became the docs' underline tabs (Julio:
   "what we currently have in Tabs, which I call the liquid slider, should be
   its own component"). The numbers are unchanged.

   THE RUNGS ARE THE CONTAINER'S HEIGHT, and the option fills it. 36 / 44 / 52,
   which is Input's ladder at the top two rungs: a glider sits
   beside a search field constantly, and one two pixels off reads as a mistake.
   The pill is the container's height minus its own inset on both sides, so
   the air around it is the same on all four sides.
   ============================================================================ */
.dk-component-glider, .dk-component-glider__option, .dk-component-glider__indicator {
  --dk-component-glider-height: var(--dk-primitive-scale-11);
  --dk-component-glider-small-height: calc(var(--dk-primitive-scale-2-5) * 2 + var(--dk-font-body-xsm-line-height));
  --dk-component-glider-large-height: var(--dk-primitive-scale-13);
  /* The frame around the pill, and the gap between options: one value, because
     the air at the ends and the air between them should be the same air. */
  --dk-component-glider-inset: var(--dk-primitive-scale-1);
  --dk-component-glider-gap: var(--dk-spacing-1);

  /* ONE SIZE NAME, ONE SIZE (18 Oct, Julio: a small Glider beside a small
     Input looked a size down). The labels read on Button's ramp, 12 / 14 /
     16, and every height matches Input, Select and Button at the same name
     (test/control-heights.test.js). The extra air beside a label from 17 Oct
     stays, 12 / 16 / 20; its smaller words (10 / 12 / 14) are undone. */
  --dk-component-glider-padding-inline: var(--dk-spacing-4);
  --dk-component-glider-small-padding-inline: var(--dk-spacing-3);
  --dk-component-glider-large-padding-inline: var(--dk-spacing-5);

  --dk-component-glider-font-family: var(--dk-font-family-primary);
  --dk-component-glider-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-glider-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-glider-small-font-size: var(--dk-font-body-xsm-text-size);
  --dk-component-glider-small-line-height: var(--dk-font-body-xsm-line-height);
  --dk-component-glider-large-font-size: var(--dk-font-body-md-text-size);
  --dk-component-glider-large-line-height: var(--dk-font-body-md-line-height);
  --dk-component-glider-font-weight: var(--dk-primitive-font-weight-medium);
  /* An option's count (Notifications' unread number) is the medium weight,
     Body medium's, read from the primitive: Body's own component token is
     declared on a Body only and would compute empty here. */
  --dk-component-glider-count-font-weight: var(--dk-primitive-font-weight-medium);

  /* The glyph beside a label: Button's icon sizes at the same name, 16 / 20
     / 22 (18 Oct; it was a rung under the words, 12 / 14 / 16). */
  --dk-component-glider-icon-size: var(--dk-primitive-scale-5);
  --dk-component-glider-small-icon-size: var(--dk-primitive-scale-4);
  --dk-component-glider-large-icon-size: var(--dk-primitive-scale-5-5);
  --dk-component-glider-icon-gap: var(--dk-spacing-1-5);

  /* ── The frame ── */
  --dk-component-glider-surface: var(--dk-surface-raised-default);
  --dk-component-glider-border: var(--dk-border-raised-control-default);
  --dk-component-glider-border-width: var(--dk-border-width-25);
  /* The hairline the height rungs are drawn at, the thin tier's. */
  --dk-component-glider-border-width-base: var(--dk-primitive-scale-0-25);
  /* The panels' own corner step, so a Glider never reads rounder than the
     boxes round it (9 Nov, Julio; it was control-300 from 4 Nov). The pill
     keeps control-150. */
  --dk-component-glider-radius: var(--dk-border-radius-control-200);
  --dk-component-glider-shadow: var(--dk-shadow-raised);
  /* PLAIN (data-variant="plain", Julio, 13 Oct): not raised. No shadow, so the
     edge does all the work: a rung above the raised edge in both themes
     (100 light, 700 dark). */
  --dk-component-glider-plain-border: var(--dk-border-glider-plain);
  /* INSET (data-variant="inset", Julio, 13 Oct, after a tab strip sunk into
     its page): a subtle neutral well rather than a frame. The nested fill, so
     it steps with the surface level and stays one tone off whatever it sits
     on; no shadow and no visible edge, the fill alone says where it is. An
     option's hover steps one tone down the same ramp, edgeless too. */
  /* On the control ramp (16 Oct): the nested rungs on a plain surface, and
     the tone's and the level's next rung on a toned one; the nested fill no
     tone remaps made every inset a tone boundary, page grey in any tone. */
  --dk-component-glider-inset-surface: var(--dk-surface-control-default);
  --dk-component-glider-inset-surface-hover: var(--dk-surface-control-hover);
  --dk-component-glider-inset-surface-active: var(--dk-surface-control-active);
  --dk-component-glider-inset-border: transparent;
  /* Inside a status tone an inset Glider's words go full strength (16 Oct,
     Julio's choice for inset Breadcrumb): the word ramp fell to 2.8:1 on the
     tone's inset rung in dark. */
  --dk-component-glider-inset-toned-color: var(--dk-text-default);
  /* GHOST (data-variant="ghost", Julio, 13 Oct): Button's ghost, for the
     Glider. Plain with the edge taken off: no fill, no shadow, no edge, only
     the options and the pill. An option under the pointer takes the control
     fill Button's ghost does, edgeless. */
  --dk-component-glider-ghost-surface: transparent;
  --dk-component-glider-ghost-border: transparent;
  --dk-component-glider-ghost-surface-hover: var(--dk-interactive-surface-hover);
  --dk-component-glider-ghost-surface-active: var(--dk-interactive-surface-active);

  /* ── The pill and the labels ──
     The selected label reads --dk-text-on-primary-fill, content on a primary
     fill: white on the page, and the panel's 700 on a solid tone, where the
     pill inverts to white (13 Oct). */
  --dk-component-glider-indicator-surface: var(--dk-surface-primary-default);
  --dk-component-glider-indicator-surface-hover: var(--dk-surface-primary-hover);
  --dk-component-glider-indicator-surface-active: var(--dk-surface-primary-focus);
  --dk-component-glider-indicator-border: var(--dk-border-primary-default);
  --dk-component-glider-indicator-border-hover: var(--dk-border-primary-hover);
  --dk-component-glider-indicator-border-active: var(--dk-border-primary-focus);
  --dk-component-glider-indicator-radius: var(--dk-border-radius-control-150);
  --dk-component-glider-selected-color: var(--dk-text-on-primary-fill);
  --dk-component-glider-color: var(--dk-interactive-text);
  --dk-component-glider-color-hover: var(--dk-interactive-text-hover);
  --dk-component-glider-surface-hover: var(--dk-surface-raised-hover);
  --dk-component-glider-border-hover: var(--dk-border-raised-control-hover);
  --dk-component-glider-surface-active: var(--dk-surface-raised-active);
  --dk-component-glider-border-active: var(--dk-border-raised-control-active);
  /* A disabled option is refusing the click, so it takes the disabled reading
     colour rather than an opacity, which would take the whole label with it. */
  --dk-component-glider-color-disabled: var(--dk-text-disabled-subtle);
  /* A chosen option that is disabled keeps its pill, as a primary Button
     keeps its shape when disabled: the subtle disabled fill on its own edge,
     following the theme and the level (5 Nov). Its words are the stronger
     disabled reading, a step above the other disabled options', so what is
     chosen still shows without offering itself. */
  --dk-component-glider-indicator-surface-disabled: var(--dk-surface-disabled-subtle);
  --dk-component-glider-indicator-border-disabled: var(--dk-border-disabled-subtle);
  --dk-component-glider-selected-color-disabled: var(--dk-text-disabled-default);

  /* Motion resolves through the ALIAS tier, not the primitive. That is what
     puts these under the prefers-reduced-motion override in
     tokens/alias/motion.css: a component token pointing straight at a
     primitive would keep its full duration with the preference set, which is
     the failure mode the old hand-kept selector list existed to patch. */
  --dk-component-glider-transition-duration: var(--dk-motion-state-duration);
  --dk-component-glider-slide-duration: var(--dk-motion-travel-duration);
  --dk-component-glider-transition-easing: var(--dk-motion-state-easing);
  /* THE LIQUID STRETCH (Julio, 13 Oct, after Forge's home toggle): the pill
     moves by its two edges, the leading one first and the trailing one a
     quarter of the slide behind, so it stretches toward the new option and
     then draws back to its shape. A share of the slide, so reduced motion,
     which zeroes the slide, zeroes the lag as well. */
  --dk-component-glider-slide-lag: calc(var(--dk-motion-travel-duration) * var(--dk-motion-travel-lag));
  --dk-component-glider-active-scale: var(--dk-interactive-press-control);
}

/* ══════════════════════════════════ drift-kit:layer components/carousel/tokens.css ══════════════════════════════════ */
/* ============================================================================
   Carousel: component token collection (--dk-component-carousel-*)
   ----------------------------------------------------------------------------
   Extracted (5 Nov 2026) from MyKarmo's Home garage carousel, which Disko drew
   first. Every value is what Disko computes today, so Home looks the same once
   it switches to the kit.

   The SLIDER (phone, tablet) shows one card 76% wide with the next peeking at
   the gap. The ROW (desktop) shows row-count cards and a peek of the next:
   4 from a 1200px column, 2 under 900px, 1 under 560px (container queries on
   the carousel's own box, so the peek is measured against the column).
   ============================================================================ */
.dk-component-carousel, .dk-component-carousel__track, .dk-component-carousel__item,
.dk-component-carousel__prev, .dk-component-carousel__next, .dk-component-carousel__action, .dk-component-carousel__count {
  --dk-component-carousel-gap: var(--dk-spacing-6);
  --dk-component-carousel-slider-item-width: 76%;
  /* Room above and below the cards for a shrunk item's lift: fixed (4px at
     every width, as Disko draws it), not a responsive spacing step. A row's
     is its own (spacing-1). */
  --dk-component-carousel-padding-block: var(--dk-primitive-scale-1);

  --dk-component-carousel-row-count: 3;
  --dk-component-carousel-row-count-wide: 4;
  --dk-component-carousel-row-count-medium: 2;
  --dk-component-carousel-row-count-narrow: 1;
  --dk-component-carousel-row-peek: .4;

  /* How far the edge fades reach into the column, past the bleed. */
  --dk-component-carousel-fade-inset: var(--dk-spacing-32);

  /* A pressed item: the control rung. */
  --dk-component-carousel-item-press-scale: var(--dk-interactive-press-control);

  /* A clickable item (__action): the kit's focus ring, drawn inside the
     action's box on the Vehicle panel's corner. */
  --dk-component-carousel-action-ring: var(--dk-interactive-ring);
  --dk-component-carousel-action-ring-width: var(--dk-interactive-ring-width);
  --dk-component-carousel-action-radius: var(--dk-border-radius-300);

  /* data-item-hover="showcase": a hovered row item's Vehicle showcase steps
     its panel a tone up and grows its car a little, in place. */
  --dk-component-carousel-showcase-hover-panel: var(--dk-surface-neutral-subtle-hover);
  --dk-component-carousel-showcase-hover-grow: var(--dk-motion-grow-scale-surface);

  /* data-variant="viewer": the photo inset inside the track (and the
     track out past the column by as much on a phone), the arrows' gap from
     the track, the count's gap and type (Body small, subtle). Fixed, as
     Disko draws them. */
  --dk-component-carousel-viewer-inset: var(--dk-primitive-scale-4);
  --dk-component-carousel-viewer-arrow-gap: var(--dk-primitive-scale-1);
  --dk-component-carousel-count-gap: var(--dk-primitive-scale-2);
  --dk-component-carousel-count-font-family: var(--dk-font-family-primary);
  --dk-component-carousel-count-font-size: var(--dk-font-scale-body-small-text-size);
  --dk-component-carousel-count-line-height: var(--dk-font-scale-body-small-line-height);
  --dk-component-carousel-count-color: var(--dk-text-neutral-subtle);

  /* The solid arrows float at rest, sit on an overlay on hover, lift on a
     press (the raised ones keep the raised IconButton's own shadow); 6px
     outside the column. */
  --dk-component-carousel-arrow-shadow: var(--dk-shadow-floating);
  --dk-component-carousel-arrow-shadow-hover: var(--dk-shadow-overlay);
  --dk-component-carousel-arrow-shadow-active: var(--dk-shadow-lifted);
  --dk-component-carousel-arrow-offset: calc(-1 * var(--dk-spacing-1-5));
}

/* ════════════════════════════════════ drift-kit:layer components/slider/tokens.css ════════════════════════════════════ */
/* ============================================================================
   Slider — component token collection (--dk-component-slider-*)
   ----------------------------------------------------------------------------
   A track, the part of it already travelled, and a thumb, over a native range
   input that does the work.

   THE COLOURS: the rail is the neutral subtle border rung and the travelled
   part primary 500, lighter in light mode than Switch's choice palette and
   the same in dark (28 Oct, Julio); the thumb is the white glyph rung, a
   plain disc with no ring or edge, drawn by the card shadow.

   SIZES ride the kit's three rungs. The thumb is Checkbox's box (16 / 20 / 24)
   so a slider beside a checkbox lines up; the track is a third of it, near
   enough, on the scale (4 / 6 / 8).
   ============================================================================ */
.dk-component-slider {
  /* ── Geometry ── */
  --dk-component-slider-thumb-size: var(--dk-primitive-scale-5);
  --dk-component-slider-small-thumb-size: var(--dk-primitive-scale-4);
  --dk-component-slider-large-thumb-size: var(--dk-primitive-scale-6);
  --dk-component-slider-track-height: var(--dk-primitive-scale-1-5);
  --dk-component-slider-small-track-height: var(--dk-primitive-scale-1);
  --dk-component-slider-large-track-height: var(--dk-primitive-scale-2);
  --dk-component-slider-radius: var(--dk-border-radius-round);
  /* The halo the thumb grows under the pointer, how far it reaches, and how
     strong: the kit's halo strength, stronger in dark (28 Oct, Julio). */
  --dk-component-slider-halo-size: var(--dk-primitive-scale-1-5);
  --dk-component-slider-halo-strength: var(--dk-interactive-halo-strength);
  /* The thumb under the finger: the kit's compact press. */
  --dk-component-slider-press-scale: var(--dk-interactive-press-compact);
  --dk-component-slider-focus-ring-width: var(--dk-interactive-ring-width);
  --dk-component-slider-focus-ring-offset: var(--dk-border-width-50);

  /* ── Spacing ── */
  --dk-component-slider-gap: var(--dk-spacing-2);
  --dk-component-slider-stops-gap: var(--dk-spacing-1-5);

  /* ── Colour ── */
  /* Lighter in light mode than the choice palette Switch reads (28 Oct,
     Julio), and the same in dark: the neutral subtle border rung, primary 500. */
  --dk-component-slider-track-surface: var(--dk-border-neutral-subtle);
  --dk-component-slider-fill-surface: var(--dk-surface-primary-default);
  --dk-component-slider-thumb-surface: var(--dk-icon-choice-track);
  /* No primary ring: the card shadow (a tight contact shadow and a soft lift)
     and a subtle hairline in the raised edge's hover rung, which keeps the
     white disc from blending into a white page (28 Oct, Julio). */
  --dk-component-slider-thumb-shadow: var(--dk-shadow-card);
  --dk-component-slider-thumb-edge: var(--dk-border-raised-hover);
  --dk-component-slider-thumb-edge-width: var(--dk-border-width-25);
  --dk-component-slider-focus-ring: var(--dk-interactive-ring);
  /* KEPT, NOT READ (28 Oct): the thumb's old primary ring and the stops'
     ticks are gone from the look, but their tokens stay declared so nothing
     is removed outside a major. Remove them in the next major. */
  --dk-component-slider-thumb-border-width: var(--dk-border-width-50);
  --dk-component-slider-thumb-border: var(--dk-surface-choice-selected);
  --dk-component-slider-tick-size: var(--dk-primitive-scale-1);
  --dk-component-slider-tick-color: var(--dk-icon-choice-track);
  --dk-component-slider-disabled-track: var(--dk-surface-choice-disabled);
  --dk-component-slider-disabled-fill: var(--dk-surface-choice-disabled);
  --dk-component-slider-disabled-thumb: var(--dk-icon-choice-disabled);

  /* ── Type ── */
  --dk-component-slider-label-font-family: var(--dk-font-family-primary);
  --dk-component-slider-label-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-slider-label-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-slider-small-label-font-size: var(--dk-font-body-xsm-text-size);
  --dk-component-slider-small-label-line-height: var(--dk-font-body-xsm-line-height);
  --dk-component-slider-large-label-font-size: var(--dk-font-body-md-text-size);
  --dk-component-slider-large-label-line-height: var(--dk-font-body-md-line-height);
  --dk-component-slider-label-font-weight: var(--dk-primitive-font-weight-medium);
  --dk-component-slider-label-color: var(--dk-text-default);
  --dk-component-slider-value-color: var(--dk-text-neutral-default);
  --dk-component-slider-stop-font-size: var(--dk-font-body-xsm-text-size);
  --dk-component-slider-stop-line-height: var(--dk-font-body-xsm-line-height);
  --dk-component-slider-stop-color: var(--dk-text-neutral-default);
  --dk-component-slider-stop-color-hover: var(--dk-text-default);
  --dk-component-slider-stop-chosen-color: var(--dk-text-default);
  --dk-component-slider-stop-chosen-font-weight: var(--dk-primitive-font-weight-medium);
  --dk-component-slider-disabled-text: var(--dk-text-disabled-default);
}

/* ═══════════════════════════════════ drift-kit:layer components/tooltip/tokens.css ═══════════════════════════════════ */
/* ============================================================================
   Tooltip — component token collection (--dk-component-tooltip-*)
   ----------------------------------------------------------------------------

   The bubble's own colours are NOT here: it reads --dk-surface-inverse-default
   and --dk-text-default-reverse directly, because the whole point of those two
   is to be the opposite of whatever theme is showing, which is exactly what a
   floating callout wants. Adding a component token in front of them would name
   the same decision twice.
   ============================================================================ */
/* SCOPED TO THE COMPONENT, not to every themed element on the page.

   This block used to carry four legs: [data-theme="light"],
   [data-theme="dark"], [data-surface] and [data-tone]. That put the whole
   collection on <body> and on every panel, and custom properties inherit, so
   all 20 of these reached every element in the document. Across the kit that
   came to 2,958 custom properties on a bare <span>, which is what makes the
   browser's inspector crawl.

   NOTHING IS LOST BY MOVING IT HERE. The four legs existed so the collection
   would re-resolve inside a tone, a level or an inverse panel. Declared on the
   component itself it resolves ON the component, against that element's own
   nearest theme, tone and level, which is the same answer arrived at more
   directly. Proven on Button first: check:button, check:contract,
   check:conformance and check:contrast all pass unchanged, and the last two
   sweep every tone, level and theme. */
.dk-component-tooltip {
  --dk-component-tooltip-font-weight: var(--dk-primitive-font-weight-medium);
  /* body-sm, 14 on 20. It was body-xsm, 12px, the nearest rung to a bare
     12.5px literal it replaced, and read as small print: a tooltip is the one
     place a reader has gone looking for the words, so it should not be the
     smallest text on the page. The rows variant inherits this, and the glyph
     stays 16px, which now sits centred on a 20px line. */
  --dk-component-tooltip-font-size: var(--dk-font-body-sm-text-size);
  --dk-component-tooltip-line-height: var(--dk-font-body-sm-line-height);
  /* THE WIDTH OF THE BUBBLE, padding included, since the surface is border-box.
     264 rather than the 240 it read before, because 240 was a content width
     that rendered as 264 once the inline padding was added on both sides. The
     number went up so that what is on screen did not change. */
  --dk-component-tooltip-max-width: 264px;
  /* 10 TOP AND BOTTOM AGAINST 12 LEFT AND RIGHT, asked for directly. This was
     even on all sides (12) after 6 and then 8 top and bottom both read as a
     label squeezed vertically. Since then the text went up to 14/20, and the
     taller line box carries some of that vertical air itself, so 12 read a
     touch loose. 10 is the one step back: 8 is the rung already rejected.

     THE SCALE STEPS IN 2PX and the rung numbers are not their pixel values:
     spacing-3 is 10px and 3-5 is 12px, measured on the bubble in the scope it
     actually resolves in (the trigger's, not the body's). Reading the rung
     number as pixels is how the cramped first version shipped. */
  --dk-component-tooltip-padding-block: var(--dk-spacing-3);
  --dk-component-tooltip-padding-inline: var(--dk-spacing-3-5);
  --dk-component-tooltip-radius: var(--dk-border-radius-150);
  --dk-component-tooltip-gap: var(--dk-spacing-1-5);
  --dk-component-tooltip-icon-size: var(--dk-primitive-scale-4);
  /* ── The rows variant ──────────────────────────────────────────────────
     A label and value breakdown, the shape the component library reached for
     when it needed "a table in a tooltip". Its own width, because the 240px
     the text variant wraps at is chosen for prose and a two column breakdown
     wants room for both halves without wrapping either. */
  --dk-component-tooltip-rows-max-width: 320px;
  /* The space BETWEEN the two columns, carried as the value's padding rather
     than as a column-gap. See styles.css: a gap would cut the total's rule in
     half, and the rule has to run the full width to read as a sum. */
  --dk-component-tooltip-rows-column-gap: var(--dk-spacing-4);
  --dk-component-tooltip-rows-row-gap: var(--dk-spacing-1-5);
  --dk-component-tooltip-rows-label-weight: var(--dk-primitive-font-weight-bold);
  /* The rule above a total. The same rung Divider uses, and the INVERSE
     hairline because the bubble is an inverse surface: an ordinary border
     token would resolve for the page's theme and paint the rule the same
     colour as the bubble it is drawn on. */
  --dk-component-tooltip-rule-width: var(--dk-border-width-separator-25);
  --dk-component-tooltip-rule-color: var(--dk-border-inverse-hairline);
  /* The arrow is a rotated square, so this is its side, not its width: the
     visible triangle is the diagonal, about 1.41x this. */
  --dk-component-tooltip-arrow-size: var(--dk-primitive-scale-2);
  /* The smallest gap the bubble keeps between itself and the edge of the
     window when it has been pushed up against one. Twelve rather than the
     eight it shipped with, and deliberately the same rung as the bubble's own
     inline padding, so the space outside it matches the space inside it: at
     eight it read as flush against the edge rather than as placed near it.
     behaviour.js reads this. */
  --dk-component-tooltip-viewport-gap: var(--dk-spacing-3-5);
  /* How far the bubble travels on enter and exit. Small enough to read as
     emerging from the trigger rather than flying in. */
  --dk-component-tooltip-travel: var(--dk-spacing-1);
  /* How long the pointer must rest on a trigger before the tip appears.
     behaviour.js READS THIS, so the token is the value rather than a label for
     one hidden in a script. Overridable per trigger with data-dk-tooltip-delay,
     in ms, where 0 means show at once.

     DELIBERATELY NOT --dk-motion-duration-slow, which is also 300. Hover intent
     is not an animation: the reduced-motion override collapses every motion
     duration to 0.01ms, and borrowing one here would make every tooltip in the
     product fire on the faintest pass of the cursor for exactly the people
     least served by that. Same number, different decision. */
  --dk-component-tooltip-delay: 300ms;
}

/* ═══════════════════════════════ drift-kit:layer components/icon-button/tokens.css ═══════════════════════════════ */
/* ============================================================================
   Icon button — component token collection (--dk-component-icon-button-*)
   ----------------------------------------------------------------------------

   IT IS A BUTTON THAT HAPPENS TO BE SQUARE, so it shares Button's vocabulary:
   the same data-size rungs, the same data-variant names, the same states. A
   toolbar mixes the two freely and they have to line up, which is asserted by
   check:contract's height cohorts rather than left to agreement.

   THE RUNGS ARE THE SAME PRIMITIVES BUTTON READS, NOT BUTTON'S OWN TOKENS.
   Pointing at --dk-component-button-* would make this component's height a
   function of another component's decisions, which is the dependency Input was
   explicitly told to remove. Both read --dk-primitive-scale-* and
   --dk-font-body-*-line-height, so they move together because they are wired to
   the same source, not because one follows the other.
   ============================================================================ */
/* SCOPED TO THE COMPONENT, not to every themed element on the page.

   This block used to carry four legs: [data-theme="light"],
   [data-theme="dark"], [data-surface] and [data-tone]. That put the whole
   collection on <body> and on every panel, and custom properties inherit, so
   all 57 of these reached every element in the document. Across the kit that
   came to 2,958 custom properties on a bare <span>, which is what makes the
   browser's inspector crawl.

   NOTHING IS LOST BY MOVING IT HERE. The four legs existed so the collection
   would re-resolve inside a tone, a level or an inverse panel. Declared on the
   component itself it resolves ON the component, against that element's own
   nearest theme, tone and level, which is the same answer arrived at more
   directly. Proven on Button first: check:button, check:contract,
   check:conformance and check:contrast all pass unchanged, and the last two
   sweep every tone, level and theme. */
.dk-component-icon-button {
  /* ── Rungs. Height is emergent, exactly as Button's is: the content box is a
     square of the line-height, and padding plus border build the rest. That is
     why the padding and line-height families mirror Button's rung for rung.

     THE ICON SIZES DELIBERATELY DO NOT. They started as Button's (16/20/22) and
     that was wrong twice over: extra-small and small came out with the SAME
     16px glyph, and the glyph-to-box ratio wandered from 53% down to 39% with
     no relationship, so the biggest button had the proportionally smallest
     icon. Reported on sight.

     The reason they should differ is the reason Button's are what they are: in
     a text button the icon ACCOMPANIES the label and is sized to it, so it
     tracks the line-height. Here the icon IS the label, and it should own its
     box the way the text owns a text button's. Sized to hold roughly half the
     button across the ladder: 16 on 30, 20 on 38, 22 on 44, 28 on 56, which is
     53 / 53 / 50 / 50 per cent and strictly increasing at every rung. */
  /* EXTRA-SMALL HAS NO BUTTON EQUIVALENT, and that is the point rather than an
     oversight. Button's ladder starts at small because a text button below it
     stops being pressable; an icon button does not have that floor, and compact
     chrome is where most of them actually live. Measured across Forge before
     this rebuild: every icon button in the product sat at 28, 32 or 40px, all
     at or below Button's SMALLEST rung. A ladder that started at Button's small
     would have had nothing to offer three quarters of its real usage. */
  --dk-component-icon-button-extra-small-padding: var(--dk-primitive-scale-1-5);
  --dk-component-icon-button-extra-small-line-height: var(--dk-font-body-xsm-line-height);
  --dk-component-icon-button-extra-small-icon-size: var(--dk-primitive-scale-4);
  --dk-component-icon-button-extra-small-border-radius: var(--dk-border-radius-control-100);

  --dk-component-icon-button-small-padding: var(--dk-primitive-scale-2-5);
  --dk-component-icon-button-small-line-height: var(--dk-font-body-xsm-line-height);
  --dk-component-icon-button-small-icon-size: var(--dk-primitive-scale-5);
  --dk-component-icon-button-small-border-radius: var(--dk-border-radius-control-100);

  --dk-component-icon-button-medium-padding: var(--dk-primitive-scale-3);
  --dk-component-icon-button-medium-line-height: var(--dk-font-body-sm-line-height);
  --dk-component-icon-button-medium-icon-size: var(--dk-primitive-scale-5-5);
  --dk-component-icon-button-medium-border-radius: var(--dk-border-radius-control-150);

  /* 52 square, Button's large height (18 Oct; was 56). */
  --dk-component-icon-button-large-padding: var(--dk-primitive-scale-3-5);
  --dk-component-icon-button-large-line-height: var(--dk-font-body-md-line-height);
  --dk-component-icon-button-large-icon-size: var(--dk-primitive-scale-7);
  --dk-component-icon-button-large-border-radius: var(--dk-border-radius-control-200);

  /* ── Loading: Button's spinner, sized to the square. 16 on the two small
     rungs, 18 (Button's own) on medium, 20 on large, so the ring keeps to
     roughly the glyph it replaces. The same kit tokens Button's read. */
  --dk-component-icon-button-extra-small-spinner-size: var(--dk-primitive-scale-4);
  --dk-component-icon-button-small-spinner-size: var(--dk-primitive-scale-4);
  --dk-component-icon-button-medium-spinner-size: var(--dk-primitive-scale-4-5);
  --dk-component-icon-button-large-spinner-size: var(--dk-primitive-scale-5);
  --dk-component-icon-button-spinner-border-width: var(--dk-primitive-scale-0-5);
  --dk-component-icon-button-spinner-track: var(--dk-border-raised-default);
  --dk-component-icon-button-spinner-head: var(--dk-surface-primary-default);
  /* The spinner's turn: a loop's own cycle, not a transition. */
  --dk-component-icon-button-spin-duration: 0.7s;

  --dk-component-icon-button-focus-ring-width: var(--dk-primitive-scale-1);
  /* Press feedback, the same rung Button presses by. kit/reduced-motion.css
     already lists this component expecting a transform to suppress; the version
     this replaces hardcoded scale(0.9), which pressed harder than every other
     control in the kit. */
  --dk-component-icon-button-transform-scale-active: var(--dk-interactive-press-compact);

  /* ── IT LIFTS OFF WHATEVER IT IS SITTING ON. ────────────────────────────
     Every fill and edge here is --dk-surface-control-* / --dk-border-control-*,
     a real token family carrying a real ramp rung for every tone, every level
     and the solid fill, in both themes. See tokens/mapped/control.css for how
     the rungs were chosen and why nothing answered this question before.

     AN EARLIER CUT OF THIS FILE DERIVED THE FILL WITH color-mix AND AN ALPHA,
     which adapted correctly but was the wrong answer: a translucent control has
     no colour of its own, it borrows whatever is behind it, so it cannot be
     named, inspected, contrast-checked as a value, or reused by the next
     component that needs the same fill. Transparency solved the symptom by
     refusing to answer the question. The tokens answer it. */
  --dk-component-icon-button-subtle-surface-default: var(--dk-surface-control-default);
  --dk-component-icon-button-subtle-surface-hover: var(--dk-interactive-surface-hover);
  --dk-component-icon-button-subtle-surface-active: var(--dk-interactive-surface-active);
  /* THE GLYPH TAKES THE TONE TOO, via the control family's icon half. It read
     --dk-icon-neutral-default before, which steps with the level ladder and
     goes on-solid correctly but stays GREY on a tinted panel: a grey pencil on
     a mint button on a mint card. --dk-icon-control-* is picked from the tone's
     own ramp, constrained to clear 3:1 against all three of its fills, so the
     glyph belongs to the panel the way the fill does. Untoned, it resolves to
     exactly the token it read before, so the neutral look cannot have moved.

     Not --dk-icon-neutral-hover for the hover state, which has no entry in
     tokens/mapped/tone.css at all and went dark grey on a solid panel. */
  --dk-component-icon-button-subtle-icon-default: var(--dk-icon-control-default);
  --dk-component-icon-button-subtle-icon-hover: var(--dk-icon-control-hover);
  /* THE PRESSED GLYPH IS ITS OWN VALUE. :active used to reuse the hover glyph,
     so of the three things a press could change -- fill, edge, glyph -- it
     changed two, in every one of the 234 contexts measured. Button changes all
     three per status and this now matches it. */
  --dk-component-icon-button-subtle-icon-active: var(--dk-icon-control-active);
  --dk-component-icon-button-subtle-ring: var(--dk-border-control-hover);

  /* ── ghost: nothing at rest, the control family from hover on. This was
     called "plain" until Button and the icon button were aligned. The same
     word meant two different things across the two components: borderless
     here, bordered there. It is named for what it is now, and plain below is
     the bordered one in both. */
  --dk-component-icon-button-ghost-surface-default: transparent;
  --dk-component-icon-button-ghost-surface-hover: var(--dk-interactive-surface-hover);
  /* The pressed fill is the family's own pressed rung. This read
     --dk-surface-control-HOVER, one state behind, which is why the press
     looked identical to its hover: a bare-at-rest variant starts a state late, it does not stop
     a state early. */
  --dk-component-icon-button-ghost-surface-active: var(--dk-interactive-surface-active);
  /* Unshifted, matching Button's ghost exactly: see the note on its hover. */
  /* GHOST READS THE CONTROL GLYPH TOO. It briefly read the panel's own
     foreground, which on a solid fill is the near-white on-solid colour: a
     flat white icon where the tone's own tint was wanted. The control glyph
     now has to clear the bare panel as well as every fill, so one token serves
     both and carries the tint. */
  --dk-component-icon-button-ghost-icon-default: var(--dk-icon-control-default);
  /* ONCE IT HAS A FILL IT FOLLOWS THE FILL. ghost is bare only at rest; from
     hover on it wears the control family's surface, so from hover on it wears
     the control family's glyph too. Keeping the panel's foreground for every
     state put a light on-solid glyph on a light hover fill: measured 2.13 on a
     warning banner. */
  --dk-component-icon-button-ghost-icon-hover: var(--dk-icon-control-hover);
  --dk-component-icon-button-ghost-icon-active: var(--dk-icon-control-active);
  --dk-component-icon-button-ghost-ring: var(--dk-border-control-hover);

  /* ── plain: the ghost above, plus an edge. Mirrors Button's plain exactly,
     which is the point of the alignment: flat ON the surface and read by its
     border, where raised is lifted ABOVE it. The resting fill is the panel's
     own colour rather than transparent, the way Button's is, so the two are the
     same control at the same rung and not merely similar. */
  --dk-component-icon-button-plain-border-width: var(--dk-border-width-25);
  --dk-component-icon-button-plain-surface-default: var(--dk-surface-current);
  --dk-component-icon-button-plain-surface-hover: var(--dk-interactive-surface-hover);
  --dk-component-icon-button-plain-surface-active: var(--dk-interactive-surface-active);
  --dk-component-icon-button-plain-border-default: var(--dk-border-control-default);
  --dk-component-icon-button-plain-border-hover: var(--dk-border-control-hover);
  --dk-component-icon-button-plain-border-active: var(--dk-border-control-active);
  --dk-component-icon-button-plain-icon-default: var(--dk-icon-control-default);
  --dk-component-icon-button-plain-icon-hover: var(--dk-icon-control-hover);
  --dk-component-icon-button-plain-icon-active: var(--dk-icon-control-active);
  --dk-component-icon-button-plain-ring: var(--dk-border-control-hover);

  /* ── raised: plain with a shadow, as Button's raised is (13 Oct), so the
     two sit in a row without one looking flatter. Lifted at rest, floating on
     hover, raised on a press. */
  --dk-component-icon-button-raised-border-width: var(--dk-border-width-25);
  --dk-component-icon-button-raised-shadow: var(--dk-shadow-lifted);
  --dk-component-icon-button-raised-shadow-hover: var(--dk-shadow-floating);
  --dk-component-icon-button-raised-shadow-active: var(--dk-shadow-raised);
  --dk-component-icon-button-raised-surface-default: var(--dk-surface-current);
  --dk-component-icon-button-raised-surface-hover: var(--dk-interactive-surface-hover);
  --dk-component-icon-button-raised-surface-active: var(--dk-interactive-surface-active);
  /* The edge is the control family's border half, which tracks the same tone,
     level and fill the surface half does and is one step stronger so it still
     reads as an edge. It was --dk-border-hairline-current, which tracks all
     three correctly but picks a RUNG rather than a relationship: on a solid
     panel that rung is a bright tint and the edge came out at 3.57 against its
     panel where the neutral case sits at 1.20. */
  --dk-component-icon-button-raised-border-default: var(--dk-border-control-lifted-default);
  --dk-component-icon-button-raised-border-hover: var(--dk-border-control-lifted-hover);
  --dk-component-icon-button-raised-border-active: var(--dk-border-control-lifted-active);
  --dk-component-icon-button-raised-icon-default: var(--dk-icon-control-default);
  --dk-component-icon-button-raised-icon-hover: var(--dk-icon-control-hover);
  --dk-component-icon-button-raised-icon-active: var(--dk-icon-control-active);
  /* PRESSED: a toggle that is on (aria-pressed, Card's saved heart). Off it
     is the ordinary neutral glyph; on, the glyph takes the primary ramp and
     steps it under the pointer, whatever the variant (17 Oct). Inside a
     status tone it is that tone's mark and its steps instead: a primary
     glyph on a success tint measured 2.27:1. */
  --dk-component-icon-button-pressed-icon-default: var(--dk-interactive-tone-mark, var(--dk-icon-primary-default));
  --dk-component-icon-button-pressed-icon-hover: var(--dk-interactive-tone-mark-hover, var(--dk-icon-primary-hover));
  --dk-component-icon-button-pressed-icon-active: var(--dk-interactive-tone-mark-active, var(--dk-icon-primary-active));
  /* The fill an off toggle previews (data-pressed-glyph="fill"): this share
     of the state's glyph colour mixed into the state's own fill, so it is
     one step toward the glyph on whatever ramp the button sits on, light,
     dark, a level, a tint or a solid. (A borrowed ramp rung matched only on
     a plain light page: on levels and tones it equalled the press fill.) */
  --dk-component-icon-button-preview-fill-hover: 20%;
  --dk-component-icon-button-preview-fill-active: 28%;
  --dk-component-icon-button-raised-ring: var(--dk-border-control-hover);

  /* ── solid: the primary fill, as Button's primary is (5 Nov, for the
     Carousel's arrows). The surface rungs and the glyph are the primary
     tokens, which remap in tones and dark on their own. No edge, no lift. */
  --dk-component-icon-button-solid-surface-default: var(--dk-surface-primary-default);
  --dk-component-icon-button-solid-surface-hover: var(--dk-surface-primary-hover);
  --dk-component-icon-button-solid-surface-active: var(--dk-surface-primary-focus);
  --dk-component-icon-button-solid-icon-default: var(--dk-icon-on-primary-mark);
  --dk-component-icon-button-solid-icon-hover: var(--dk-icon-on-primary-mark);
  --dk-component-icon-button-solid-icon-active: var(--dk-icon-on-primary-mark);
  --dk-component-icon-button-solid-ring: var(--dk-border-control-hover);

  /* ── disabled, shared by every variant: one look for "you cannot press this",
     the same pairing Button uses. */
  /* ── disabled. The FILL keeps the mapped token, which is one of the fourteen
     that already track all three axes. The GLYPH does not, and that is the fix:
     --dk-icon-disabled-subtle is tone-aware but was paired for other
     components, and on a tinted ramp it sat at 1.9 to 4.2 against its own
     disabled fill where the neutral case sits at 1.3 to 1.9. A disabled button
     on a warning panel read about as strongly as an enabled one, which is the
     one thing a disabled state must not do. Reported.

     --dk-icon-control-disabled is picked against the DISABLED fill and aimed at
     the neutral case's reading rather than at legibility, because being hard to
     read is the point. Inverse and the untoned case both resolve to
     --dk-icon-disabled-subtle, the token they already used: inverse was named
     as the one tone that already looked right, and it did. */
  --dk-component-icon-button-surface-disabled: var(--dk-surface-control-disabled);
  --dk-component-icon-button-icon-disabled: var(--dk-icon-control-disabled);
}

/* ═══════════════════════════════════ drift-kit:layer components/sidebar/tokens.css ═══════════════════════════════════ */
/* ============================================================================
   Sidebar: component token collection (--dk-component-sidebar-*)
   ----------------------------------------------------------------------------
   An app's main navigation: a rail on a desktop, a bottom tab bar or a drawer
   on a phone, from one set of markup. Built from the rail Forge and Disko
   share (the component library's own SideNav is a v1 Tailwind rail that only
   widens on hover), so its numbers are that rail's:

     272 wide, 64 collapsed; 16 above and below, 10 at the sides; 44px rows on
     the radius-200 corner (8px, 21 Oct; it was radius-100); a 20px glyph in a
     fixed column that never moves when the rail collapses, because the
     collapse is width only.

   ROWS READ THE NEUTRAL TEXT RAMP, the section headings' own, so a row sits
   level with its heading (21 Oct, Julio). From 16 Oct they read the quiet
   word ramp, neutral-subtle, which in dark put every row (neutral-400) a rung
   under the headings (neutral-200). Their fills and press stay on the
   interaction foundation.

   SCOPED TO THE ROOT AND TO THE TWO PARTS THAT LEAVE IT: the drawer's scrim,
   which the runtime puts beside the sidebar, and a flyout or More menu, which
   the kit's menu portals to <body>.

   THE CURRENT ROW IS SOLID PRIMARY with white words, Forge's rail's square,
   at the brand's own 500 and 600 on hover. A branding decision (Julio,
   12 Oct), made knowing white on 500 is about 2.8:1, under AA; it was 600
   (4.25) until then. In the phone bar it is a tint
   behind the glyph instead: a solid tile under every tap reads as a button
   pressed and held.

   SIZES ARE FIXED PRIMITIVES. A rail on a phone is a bar, not a smaller rail.
   ============================================================================ */
.dk-component-sidebar, .dk-component-sidebar__scrim, .dk-component-sidebar__menu {
  --dk-component-sidebar-width: calc(var(--dk-primitive-scale-64) + var(--dk-primitive-scale-4));
  --dk-component-sidebar-collapsed-width: var(--dk-primitive-scale-16);
  --dk-component-sidebar-padding-block: var(--dk-primitive-scale-4);
  --dk-component-sidebar-padding-inline: var(--dk-primitive-scale-2-5);
  --dk-component-sidebar-gap: var(--dk-primitive-scale-4);
  /* between one section and the next heading: more than the head's gap, so
     each section reads as its own group (21 Oct, Julio) */
  --dk-component-sidebar-section-gap: var(--dk-primitive-scale-7);
  --dk-component-sidebar-border-width: var(--dk-border-width-25);
  /* The hairline the rail's widths and the rows' heights are drawn at, the
     thin tier's: a thicker tier adds its difference outside them. */
  --dk-component-sidebar-border-width-base: var(--dk-primitive-scale-0-25);

  /* docked: flush to the edge, full height, one hairline on the inside edge */
  --dk-component-sidebar-docked-surface: var(--dk-surface-chrome-deep, var(--dk-surface-raised-default));
  --dk-component-sidebar-docked-border: var(--dk-border-raised-default);
  /* floating: Forge's inset glass panel */
  --dk-component-sidebar-floating-surface: var(--dk-surface-chrome-deep-glass, var(--dk-surface-raised-glass));
  --dk-component-sidebar-floating-border: var(--dk-border-raised-default);
  /* A rung over its rows' corner (4 Nov, Julio: the rail's 150 read sharper
     than its rows' 200, and the fully nested corner, 18, too round). */
  --dk-component-sidebar-floating-radius: var(--dk-border-radius-300);
  --dk-component-sidebar-floating-shadow: var(--dk-shadow-floating);
  --dk-component-sidebar-floating-inset: var(--dk-primitive-scale-4);
  --dk-component-sidebar-blur: var(--dk-primitive-blur-glass);

  /* the brand */
  --dk-component-sidebar-brand-height: var(--dk-primitive-scale-8);
  /* The head's height from the rail's top edge to the bottom of its rule:
     the Top bar's height, equal by design rather than read from it, so in an
     App shell the two hairlines run as one line. */
  --dk-component-sidebar-head-height: var(--dk-primitive-scale-16);
  --dk-component-sidebar-brand-mark-size: var(--dk-primitive-scale-7);
  /* A whole Logo lockup in the mark is drawn this tall, and the symbol
     lockup a collapsed rail shows in its place: the Logo's small height. The
     symbol is as wide as the logo is tall, so this is also how much of the
     glyph column it takes. */
  --dk-component-sidebar-brand-logo-height: var(--dk-primitive-scale-6);
  /* from the mark's own edge to the wordmark, not from the icon column's */
  --dk-component-sidebar-brand-gap: var(--dk-primitive-scale-1-5);
  --dk-component-sidebar-wordmark-font-family: var(--dk-font-family-secondary);
  --dk-component-sidebar-wordmark-font-size: var(--dk-primitive-scale-5);
  --dk-component-sidebar-wordmark-font-weight: var(--dk-primitive-font-weight-semi-bold);
  --dk-component-sidebar-wordmark-color: var(--dk-text-default);
  --dk-component-sidebar-divider: var(--dk-border-raised-default);

  /* rows */
  --dk-component-sidebar-item-height: var(--dk-primitive-scale-11);
  --dk-component-sidebar-item-gap: var(--dk-primitive-scale-1);
  --dk-component-sidebar-item-radius: var(--dk-border-radius-200);
  --dk-component-sidebar-item-icon-size: var(--dk-primitive-scale-5);
  --dk-component-sidebar-item-font-family: var(--dk-font-family-primary);
  --dk-component-sidebar-item-font-size: var(--dk-primitive-scale-3-5);
  --dk-component-sidebar-item-line-height: var(--dk-primitive-scale-5);
  --dk-component-sidebar-item-font-weight: var(--dk-primitive-font-weight-semi-bold);
  --dk-component-sidebar-item-text: var(--dk-text-neutral-default);
  --dk-component-sidebar-item-text-hover: var(--dk-text-neutral-hover);
  --dk-component-sidebar-item-text-active: var(--dk-text-neutral-focus);
  --dk-component-sidebar-item-surface-hover: var(--dk-interactive-surface-hover);
  --dk-component-sidebar-item-border-hover: var(--dk-border-raised-hover);
  --dk-component-sidebar-item-surface-active: var(--dk-interactive-surface-active);
  /* A row draws its edge on hover and a rung further on a press, Forge's
     rail's (21 Oct, Julio), inside its own box, so nothing moves. */
  --dk-component-sidebar-item-border-active: var(--dk-border-raised-active);
  --dk-component-sidebar-item-text-disabled: var(--dk-text-disabled-subtle);
  /* A rail row is a surface wide (240px), so it settles rather than presses:
     the control ratio on a row that wide moved its ends by 6px. The bar's
     glyph is a control and keeps the definite press. */
  --dk-component-sidebar-item-press-scale: var(--dk-interactive-press-item);
  --dk-component-sidebar-bar-press-scale: var(--dk-interactive-press-compact);
  --dk-component-sidebar-focus-ring: var(--dk-border-field-focus);
  --dk-component-sidebar-focus-ring-width: var(--dk-border-width-50);

  --dk-component-sidebar-current-surface: var(--dk-interactive-selected-surface);
  --dk-component-sidebar-current-surface-hover: var(--dk-interactive-selected-surface-hover);
  --dk-component-sidebar-current-border: var(--dk-border-primary-default);
  --dk-component-sidebar-current-border-hover: var(--dk-border-primary-hover);
  --dk-component-sidebar-current-border-active: var(--dk-border-primary-focus);
  --dk-component-sidebar-current-text: var(--dk-interactive-selected-text);
  /* The page you are on, inside a flyout or More. */
  --dk-component-sidebar-menu-current-text: var(--dk-text-primary-on-subtle);
  --dk-component-sidebar-menu-current-font-weight: var(--dk-primitive-font-weight-bold);

  /* children of a group: shorter rows with a smaller glyph, starting just
     past the guide down the parent's icon column, so the current child's fill
     sits inside the nest rather than across the rail */
  --dk-component-sidebar-child-height: var(--dk-primitive-scale-9);
  --dk-component-sidebar-child-icon-size: var(--dk-primitive-scale-4);
  --dk-component-sidebar-child-inset: var(--dk-spacing-2);
  --dk-component-sidebar-child-gap: var(--dk-spacing-2);
  --dk-component-sidebar-child-font-weight: var(--dk-primitive-font-weight-medium);
  --dk-component-sidebar-guide: var(--dk-border-raised-default);
  /* the guide is a bar, not a border: two hairlines wide, its ends round */
  --dk-component-sidebar-guide-width: var(--dk-border-width-50);
  --dk-component-sidebar-guide-radius: var(--dk-border-radius-round);

  /* section headings */
  --dk-component-sidebar-heading-font-size: var(--dk-font-overline-md-text-size);
  --dk-component-sidebar-heading-line-height: var(--dk-font-overline-md-line-height);
  --dk-component-sidebar-heading-font-weight: var(--dk-primitive-font-weight-semi-bold);
  /* the Eyebrow's tracking at the same overline size, medium's 0.1em; raw em, as the kit has no tracking primitive (21 Oct, Julio) */
  --dk-component-sidebar-heading-letter-spacing: 0.1em;
  /* A rung quieter than the rows, so the headings label the sections without
     competing with them (21 Oct, Julio), knowing an 11px overline at subtle
     is 3.75:1 on the light rail, under AA; neutral was 5.0. */
  --dk-component-sidebar-heading-color: var(--dk-text-neutral-subtle);

  /* the count badge, and the unread dot */
  --dk-component-sidebar-badge-size: var(--dk-primitive-scale-5);
  --dk-component-sidebar-badge-font-size: var(--dk-primitive-scale-2-5);
  --dk-component-sidebar-badge-font-weight: var(--dk-primitive-font-weight-bold);
  --dk-component-sidebar-badge-surface: var(--dk-surface-primary-subtle);
  --dk-component-sidebar-badge-text: var(--dk-text-primary-on-subtle);
  --dk-component-sidebar-badge-current-surface: var(--dk-surface-base-white);
  --dk-component-sidebar-badge-current-text: var(--dk-color-primary-700);
  --dk-component-sidebar-dot-size: var(--dk-primitive-scale-2);
  /* The unread dot is the brand's, not an alarm (4 Nov, Julio): it says
     something new, which is the brand's word, on the rail and the bar. */
  --dk-component-sidebar-dot-surface: var(--dk-surface-primary-default);
  --dk-component-sidebar-bar-dot-surface: var(--dk-component-sidebar-dot-surface);

  /* the user row */
  --dk-component-sidebar-user-height: var(--dk-primitive-scale-12);
  /* the Avatar's own size at this rail size, for centring it under the glyphs;
     the Avatar is sized by its own data-size */
  --dk-component-sidebar-user-avatar-size: var(--dk-primitive-scale-8);
  --dk-component-sidebar-user-text-gap: var(--dk-spacing-2);
  --dk-component-sidebar-user-name-font-size: var(--dk-primitive-scale-3-5);
  --dk-component-sidebar-user-name-font-weight: var(--dk-primitive-font-weight-semi-bold);
  --dk-component-sidebar-user-name-color: var(--dk-text-default);
  --dk-component-sidebar-user-meta-font-size: var(--dk-primitive-scale-3);
  --dk-component-sidebar-user-meta-color: var(--dk-text-neutral-default);

  /* nested: the panel of a section's pages beside the rail, Forge's design
     system nav. Inset from the rail's edges by the rail's side padding, its
     rows the children's (shorter, a 16px glyph) */
  --dk-component-sidebar-panel-width: calc(var(--dk-primitive-scale-52) + var(--dk-primitive-scale-5));
  --dk-component-sidebar-panel-padding: var(--dk-primitive-scale-2);
  --dk-component-sidebar-panel-radius: var(--dk-border-radius-100);
  --dk-component-sidebar-panel-surface: var(--dk-surface-sidebar-panel);
  --dk-component-sidebar-panel-border: var(--dk-border-sidebar-panel);
  --dk-component-sidebar-panel-item-surface-hover: var(--dk-surface-sidebar-panel-hover);
  --dk-component-sidebar-panel-item-border-hover: var(--dk-border-sidebar-panel-hover);
  --dk-component-sidebar-panel-item-border-active: var(--dk-border-sidebar-panel-active);
  --dk-component-sidebar-panel-title-font-size: var(--dk-component-sidebar-item-font-size);
  --dk-component-sidebar-panel-title-font-weight: var(--dk-primitive-font-weight-bold);
  --dk-component-sidebar-panel-title-color: var(--dk-text-default);

  /* the body's scrollbar, on the rail's own edge (DriveIQ's): a slim pill */
  --dk-component-sidebar-scrollbar-size: var(--dk-primitive-scale-1-5);
  --dk-component-sidebar-scrollbar-thumb: var(--dk-border-raised-hover);
  --dk-component-sidebar-scrollbar-thumb-hover: var(--dk-border-raised-active);

  /* motion: the width, and the labels' rise on a user's expand */
  --dk-component-sidebar-duration: var(--dk-motion-state-duration);
  --dk-component-sidebar-easing: var(--dk-motion-state-easing);
  --dk-component-sidebar-rise-duration: var(--dk-motion-chrome-cascade-duration);
  --dk-component-sidebar-rise-stagger: var(--dk-motion-rise-char-beat);
  --dk-component-sidebar-rise-row-stagger: var(--dk-motion-rise-row-beat);
  --dk-component-sidebar-indicator-duration: var(--dk-motion-travel-duration);
  /* a group's rows leaving and arriving: each row's slide out of the list's
     top edge, and the delay from one row to the next */
  --dk-component-sidebar-group-row-duration: var(--dk-motion-expand-duration);
  --dk-component-sidebar-group-stagger: var(--dk-motion-chrome-cascade-beat);
  /* even, so the list's height keeps pace with the rows rather than closing
     ahead of them and clipping the ones still fading */
  --dk-component-sidebar-group-easing: var(--dk-motion-expand-easing);
  /* the panel arriving and leaving: the rail widens and closes on travel;
     the rows rise in on the cascade's beat, half a beat a row, starting this
     far through the widening, and drop out on the exit pattern */
  --dk-component-sidebar-panel-duration: var(--dk-motion-travel-duration);
  --dk-component-sidebar-panel-easing: var(--dk-motion-travel-easing);
  --dk-component-sidebar-panel-rows-start: 0.55;
  --dk-component-sidebar-panel-row-duration: var(--dk-motion-chrome-cascade-duration);
  --dk-component-sidebar-panel-row-easing: var(--dk-motion-chrome-cascade-easing);
  --dk-component-sidebar-panel-row-beat: var(--dk-motion-chrome-cascade-beat);
  --dk-component-sidebar-panel-row-rise: var(--dk-motion-chrome-cascade-rise);
  --dk-component-sidebar-panel-row-exit-duration: var(--dk-motion-exit-duration);
  --dk-component-sidebar-panel-row-exit-easing: var(--dk-motion-exit-easing);

  /* the phone bar */
  --dk-component-sidebar-bar-height: calc(var(--dk-primitive-scale-14) + var(--dk-primitive-scale-0-5));
  --dk-component-sidebar-bar-surface: var(--dk-surface-level-0);
  --dk-component-sidebar-bar-border: var(--dk-border-raised-default);
  --dk-component-sidebar-bar-shadow: var(--dk-shadow-floating);
  --dk-component-sidebar-bar-radius: calc(var(--dk-component-sidebar-bar-item-radius) + var(--dk-component-sidebar-bar-padding));
  --dk-component-sidebar-bar-inset: var(--dk-primitive-scale-4);
  /* the bar's distance from the foot, apart from its inset at the sides */
  --dk-component-sidebar-bar-bottom: var(--dk-component-sidebar-bar-inset);
  --dk-component-sidebar-bar-max-width: calc(var(--dk-primitive-scale-96) + var(--dk-primitive-scale-24));
  --dk-component-sidebar-bar-font-size: var(--dk-primitive-scale-2-5);
  --dk-component-sidebar-bar-font-weight: var(--dk-primitive-font-weight-medium);
  /* Room for descenders: the label clips its overflow to ellipsise. */
  --dk-component-sidebar-bar-line-height: var(--dk-primitive-scale-3-5);
  --dk-component-sidebar-bar-icon-size: var(--dk-primitive-scale-5);
  --dk-component-sidebar-bar-pill-width: calc(var(--dk-primitive-scale-9) + var(--dk-primitive-scale-0-5));
  --dk-component-sidebar-bar-pill-height: calc(var(--dk-primitive-scale-6) + var(--dk-primitive-scale-0-5));
  /* Each slot fills its whole box, inset from the bar's edge by this much,
     its corner concentric with the bar's. The fills step up the bar's own
     surface ramp: hover, then press and current. */
  --dk-component-sidebar-bar-padding: var(--dk-spacing-2);
  --dk-component-sidebar-bar-item-gap: var(--dk-spacing-1);
  --dk-component-sidebar-bar-item-radius: var(--dk-border-radius-300);
  --dk-component-sidebar-bar-item-surface-hover: var(--dk-surface-raised-hover);
  --dk-component-sidebar-bar-item-surface-active: var(--dk-surface-raised-active);
  /* A rung under the press, the hover's (4 Nov, Julio: the press's rung read
     too heavy as a resting fill, light and dark). */
  --dk-component-sidebar-bar-current-surface: var(--dk-surface-raised-hover);
  /* primary-default (500 light, 400 dark) by decision (4 Nov, Julio): on the
     light bar it measures 2.82:1, under AA. The on-subtle rung was AA in both. */
  --dk-component-sidebar-bar-current-text: var(--dk-text-primary-default);
  --dk-component-sidebar-bar-slots: 5;
  /* Under a Modal (1000) so a dialog opened from the bar covers it. */
  --dk-component-sidebar-bar-z-index: 900;

  /* the phone drawer */
  --dk-component-sidebar-drawer-width: min(calc(100vw - var(--dk-primitive-scale-14)), calc(var(--dk-primitive-scale-64) + var(--dk-primitive-scale-4)));
  --dk-component-sidebar-drawer-shadow: var(--dk-shadow-overlay);
  --dk-component-sidebar-scrim: var(--dk-surface-backdrop-soft);
  --dk-component-sidebar-drawer-duration: var(--dk-motion-enter-large-duration);
  --dk-component-sidebar-drawer-easing: var(--dk-motion-enter-large-easing);
  --dk-component-sidebar-drawer-z-index: 950;
}

/* On a touch screen the prototype or app is the whole screen, under the
   browser's own bar, and a bar 16 off the foot hangs there. It sits lower,
   and its shadow steps down to raised (the floating shadow was cut flat at
   the browser's edge). The pointer decides, never the width: a desktop
   mouse at phone width keeps the 16 and the floating shadow. */
@media (pointer: coarse) {
  .dk-component-sidebar {
    --dk-component-sidebar-bar-bottom: var(--dk-spacing-3);
    --dk-component-sidebar-bar-shadow: var(--dk-shadow-raised);
  }
}

/* LIGHT HEADINGS SIT A RUNG FURTHER BACK. Light's neutral-subtle is 500, one
   rung from the rows' 600, and in capitals that read as the rows' own colour
   (21 Oct, Julio); dark's subtle is already two rungs off. 400 is about
   3:1 on the light rail, a label to skim, under AA by decision. Not on a
   tone, whose ramp remaps subtle itself, and not inside a dark island. */
[data-theme="light"] .dk-component-sidebar:not([data-tone]):not([data-theme="dark"] .dk-component-sidebar),
.dk-component-sidebar[data-theme="light"]:not([data-tone]) {
  --dk-component-sidebar-heading-color: var(--dk-color-neutral-400);
}

/* ── Small: the same rail, everything a step down ─────────────────────────────
   For an app whose content needs the room. One attribute swaps the numbers and
   nothing else, so the icon column is still fixed and the collapse is still
   width only. Not the phone bar: a phone gets a bar, never a smaller one.
   13 and 11 are built from two fixed steps, since the type scale's only 13 is
   responsive and the rail's sizes are fixed by design. The user row's avatar
   is the author's to step down (data-size="24"); React does it from size.
   The 36px row's corner is a rung under the 44px row's, 150 to its 200: the
   kit steps a corner one rung per size step, as Button does, and 6 on 36
   keeps the larger row's proportion. */
.dk-component-sidebar[data-size="small"]:not([data-presentation="bar"]) {
  --dk-component-sidebar-width: calc(var(--dk-primitive-scale-56) + var(--dk-primitive-scale-9));
  --dk-component-sidebar-collapsed-width: var(--dk-primitive-scale-14);
  --dk-component-sidebar-padding-block: var(--dk-primitive-scale-3);
  --dk-component-sidebar-padding-inline: var(--dk-primitive-scale-2);
  --dk-component-sidebar-gap: var(--dk-primitive-scale-3);
  --dk-component-sidebar-section-gap: var(--dk-primitive-scale-5);
  --dk-component-sidebar-item-height: var(--dk-primitive-scale-9);
  --dk-component-sidebar-item-gap: var(--dk-primitive-scale-0-5);
  --dk-component-sidebar-item-radius: var(--dk-border-radius-150);
  --dk-component-sidebar-item-icon-size: var(--dk-primitive-scale-4-5);
  --dk-component-sidebar-item-font-size: calc(var(--dk-primitive-scale-3) + var(--dk-primitive-scale-0-25));
  --dk-component-sidebar-item-line-height: var(--dk-primitive-scale-4-5);
  --dk-component-sidebar-child-height: var(--dk-primitive-scale-8);
  --dk-component-sidebar-child-icon-size: var(--dk-primitive-scale-3-5);
  --dk-component-sidebar-brand-height: var(--dk-primitive-scale-7);
  /* A shorter head for the shorter rows: the brand sits on the rail's own
     padding, 12 above and 12 to the rule (21 Oct, Julio), so the rule no
     longer lines up with a Top bar's 64; a small rail beside a Top bar is the
     author's to avoid or to pair. */
  --dk-component-sidebar-head-height: var(--dk-primitive-scale-12);
  --dk-component-sidebar-brand-mark-size: var(--dk-primitive-scale-6);
  --dk-component-sidebar-brand-gap: var(--dk-primitive-scale-1);
  --dk-component-sidebar-wordmark-font-size: var(--dk-primitive-scale-4-5);
  --dk-component-sidebar-badge-size: var(--dk-primitive-scale-4-5);
  --dk-component-sidebar-user-height: var(--dk-primitive-scale-10);
  --dk-component-sidebar-user-avatar-size: var(--dk-primitive-scale-6);
  --dk-component-sidebar-panel-width: calc(var(--dk-primitive-scale-44) + var(--dk-primitive-scale-6));
  --dk-component-sidebar-panel-padding: var(--dk-primitive-scale-1-5);
  --dk-component-sidebar-user-name-font-size: calc(var(--dk-primitive-scale-3) + var(--dk-primitive-scale-0-25));
  --dk-component-sidebar-user-meta-font-size: calc(var(--dk-primitive-scale-2-5) + var(--dk-primitive-scale-0-25));
}

/* Generated by scripts/build.js: this component's root colours, again on
   each part that resets a status tone, so they resolve against the reset. */
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-sidebar .dk-component-sidebar__badge,
.dk-component-sidebar:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-sidebar__badge,
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-sidebar .dk-component-sidebar__item:is([aria-current="page"], [aria-current="true"]) .dk-component-sidebar__badge,
.dk-component-sidebar:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-sidebar__item:is([aria-current="page"], [aria-current="true"]) .dk-component-sidebar__badge,
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-sidebar .dk-component-sidebar__panel,
.dk-component-sidebar:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-sidebar__panel,
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-sidebar > .dk-component-sidebar__foot,
.dk-component-sidebar:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) > .dk-component-sidebar__foot,
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-sidebar .dk-component-sidebar__item:is([aria-current="page"], [aria-current="true"]),
.dk-component-sidebar:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-sidebar__item:is([aria-current="page"], [aria-current="true"]),
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-sidebar .dk-component-sidebar__item[data-current-within],
.dk-component-sidebar:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-sidebar__item[data-current-within],
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-sidebar > .dk-component-sidebar__bar-indicator,
.dk-component-sidebar:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) > .dk-component-sidebar__bar-indicator,
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-sidebar :where(:is(.dk-component-sidebar__more, .dk-component-sidebar__account, .dk-component-sidebar__group)[data-open]) :is(.dk-component-sidebar__item, .dk-component-sidebar__user),
.dk-component-sidebar:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) :where(:is(.dk-component-sidebar__more, .dk-component-sidebar__account, .dk-component-sidebar__group)[data-open]) :is(.dk-component-sidebar__item, .dk-component-sidebar__user) {
  --dk-component-sidebar-docked-surface: var(--dk-surface-chrome-deep, var(--dk-surface-raised-default));
  --dk-component-sidebar-docked-border: var(--dk-border-raised-default);
  --dk-component-sidebar-floating-border: var(--dk-border-raised-default);
  --dk-component-sidebar-wordmark-color: var(--dk-text-default);
  --dk-component-sidebar-divider: var(--dk-border-raised-default);
  --dk-component-sidebar-item-text: var(--dk-text-neutral-default);
  --dk-component-sidebar-item-surface-hover: var(--dk-interactive-surface-hover);
  --dk-component-sidebar-item-border-hover: var(--dk-border-raised-hover);
  --dk-component-sidebar-item-surface-active: var(--dk-interactive-surface-active);
  --dk-component-sidebar-item-border-active: var(--dk-border-raised-active);
  --dk-component-sidebar-item-text-disabled: var(--dk-text-disabled-subtle);
  --dk-component-sidebar-current-surface: var(--dk-interactive-selected-surface);
  --dk-component-sidebar-current-surface-hover: var(--dk-interactive-selected-surface-hover);
  --dk-component-sidebar-current-border: var(--dk-border-primary-default);
  --dk-component-sidebar-current-border-hover: var(--dk-border-primary-hover);
  --dk-component-sidebar-current-border-active: var(--dk-border-primary-focus);
  --dk-component-sidebar-current-text: var(--dk-interactive-selected-text);
  --dk-component-sidebar-guide: var(--dk-border-raised-default);
  --dk-component-sidebar-heading-color: var(--dk-text-neutral-subtle);
  --dk-component-sidebar-badge-surface: var(--dk-surface-primary-subtle);
  --dk-component-sidebar-dot-surface: var(--dk-surface-primary-default);
  --dk-component-sidebar-bar-dot-surface: var(--dk-component-sidebar-dot-surface);
  --dk-component-sidebar-user-name-color: var(--dk-text-default);
  --dk-component-sidebar-user-meta-color: var(--dk-text-neutral-default);
  --dk-component-sidebar-panel-title-color: var(--dk-text-default);
  --dk-component-sidebar-scrollbar-thumb: var(--dk-border-raised-hover);
  --dk-component-sidebar-scrollbar-thumb-hover: var(--dk-border-raised-active);
  --dk-component-sidebar-bar-border: var(--dk-border-raised-default);
  --dk-component-sidebar-bar-item-surface-hover: var(--dk-surface-raised-hover);
  --dk-component-sidebar-bar-item-surface-active: var(--dk-surface-raised-active);
  --dk-component-sidebar-bar-current-surface: var(--dk-surface-raised-hover);
  --dk-component-sidebar-bar-current-text: var(--dk-text-primary-default);
}
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-sidebar[data-theme="light"]:not([data-tone]) .dk-component-sidebar__badge,
.dk-component-sidebar[data-theme="light"]:not([data-tone]):is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-sidebar__badge,
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-sidebar[data-theme="light"]:not([data-tone]) .dk-component-sidebar__item:is([aria-current="page"], [aria-current="true"]) .dk-component-sidebar__badge,
.dk-component-sidebar[data-theme="light"]:not([data-tone]):is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-sidebar__item:is([aria-current="page"], [aria-current="true"]) .dk-component-sidebar__badge,
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-sidebar[data-theme="light"]:not([data-tone]) .dk-component-sidebar__panel,
.dk-component-sidebar[data-theme="light"]:not([data-tone]):is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-sidebar__panel,
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-sidebar[data-theme="light"]:not([data-tone]) > .dk-component-sidebar__foot,
.dk-component-sidebar[data-theme="light"]:not([data-tone]):is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) > .dk-component-sidebar__foot,
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-sidebar[data-theme="light"]:not([data-tone]) .dk-component-sidebar__item:is([aria-current="page"], [aria-current="true"]),
.dk-component-sidebar[data-theme="light"]:not([data-tone]):is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-sidebar__item:is([aria-current="page"], [aria-current="true"]),
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-sidebar[data-theme="light"]:not([data-tone]) .dk-component-sidebar__item[data-current-within],
.dk-component-sidebar[data-theme="light"]:not([data-tone]):is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-sidebar__item[data-current-within],
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-sidebar[data-theme="light"]:not([data-tone]) > .dk-component-sidebar__bar-indicator,
.dk-component-sidebar[data-theme="light"]:not([data-tone]):is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) > .dk-component-sidebar__bar-indicator,
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-sidebar[data-theme="light"]:not([data-tone]) :where(:is(.dk-component-sidebar__more, .dk-component-sidebar__account, .dk-component-sidebar__group)[data-open]) :is(.dk-component-sidebar__item, .dk-component-sidebar__user),
.dk-component-sidebar[data-theme="light"]:not([data-tone]):is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) :where(:is(.dk-component-sidebar__more, .dk-component-sidebar__account, .dk-component-sidebar__group)[data-open]) :is(.dk-component-sidebar__item, .dk-component-sidebar__user) {
  --dk-component-sidebar-heading-color: var(--dk-color-neutral-400);
}

/* ═══════════════════════════════════ drift-kit:layer components/top-bar/tokens.css ═══════════════════════════════════ */
/* ============================================================================
   Top bar: component token collection (--dk-component-top-bar-*)
   ----------------------------------------------------------------------------
   The page's banner: brand, an optional row of links, and whatever the page
   puts at the end (a help line, actions, the account). The component
   library's NavigationTop is the brand and a "Need help?" line on a white bar
   with a hairline under it; this keeps that look as the solid variant and its
   numbers: 16 above and below, 20 at the sides, the brand at 128 wide, the
   page's max width.

   THE EDGE ARRIVES WITH THE CONTENT. A sticky bar at the top of a page has
   nothing under it to be separated from, so its hairline and shadow fade in
   only once something has scrolled beneath it (data-scrolled, the runtime's).
   A bar that is not sticky never has anything under it and keeps the hairline
   the design draws.

   THE LINKS' UNDERLINE IS ONE INDICATOR that rests under the current link and
   follows the pointer, so hovering shows where the line will go.
   ============================================================================ */
.dk-component-top-bar, .dk-component-top-bar__menu-list {
  --dk-component-top-bar-height: var(--dk-primitive-scale-16);
  --dk-component-top-bar-padding-inline: var(--dk-primitive-scale-5);
  --dk-component-top-bar-phone-padding-inline: var(--dk-primitive-scale-4);
  --dk-component-top-bar-gap: var(--dk-primitive-scale-3);
  --dk-component-top-bar-max-width: var(--dk-responsive-layout-max-width);
  --dk-component-top-bar-brand-width: var(--dk-primitive-scale-32);
  --dk-component-top-bar-brand-height: var(--dk-primitive-scale-8);

  --dk-component-top-bar-solid-surface: var(--dk-surface-chrome-deep, var(--dk-surface-raised-default));
  --dk-component-top-bar-glass-surface: var(--dk-surface-chrome-deep-glass, var(--dk-surface-raised-glass));
  --dk-component-top-bar-blur: var(--dk-primitive-blur-glass);
  --dk-component-top-bar-border: var(--dk-border-raised-default);
  --dk-component-top-bar-border-width: var(--dk-border-width-25);
  /* The flow bar (data-variant="flow"): the page's own surface and the
     level's hairline, and fixed air round its buttons, 14 and 16. */
  --dk-component-top-bar-flow-surface: var(--dk-surface-current);
  --dk-component-top-bar-flow-border: var(--dk-border-hairline-current);
  --dk-component-top-bar-flow-padding-block: var(--dk-primitive-scale-3-5);
  --dk-component-top-bar-flow-padding-inline: var(--dk-primitive-scale-4);
  /* The room each end keeps beside a Stepper: a medium icon button's. */
  --dk-component-top-bar-flow-end-size: var(--dk-primitive-scale-11);
  --dk-component-top-bar-shadow: var(--dk-shadow-raised);
  --dk-component-top-bar-z-index: 800;

  --dk-component-top-bar-link-font-family: var(--dk-font-family-primary);
  --dk-component-top-bar-link-font-size: var(--dk-primitive-scale-3-5);
  --dk-component-top-bar-link-line-height: var(--dk-primitive-scale-5);
  --dk-component-top-bar-link-font-weight: var(--dk-primitive-font-weight-semi-bold);
  --dk-component-top-bar-link-padding-block: var(--dk-primitive-scale-2);
  --dk-component-top-bar-link-padding-inline: var(--dk-primitive-scale-3);
  --dk-component-top-bar-link-radius: var(--dk-border-radius-100);
  --dk-component-top-bar-link-text: var(--dk-interactive-text);
  --dk-component-top-bar-link-text-hover: var(--dk-interactive-text-hover);
  --dk-component-top-bar-link-text-active: var(--dk-interactive-text-active);
  --dk-component-top-bar-link-text-current: var(--dk-text-default);
  --dk-component-top-bar-link-surface-hover: var(--dk-interactive-surface-hover);
  --dk-component-top-bar-link-surface-active: var(--dk-interactive-surface-active);
  /* A link presses as a control does (16 Oct, the interaction foundation). */
  --dk-component-top-bar-link-press-scale: var(--dk-interactive-press-control);
  --dk-component-top-bar-indicator: var(--dk-color-primary-600);
  --dk-component-top-bar-indicator-thickness: var(--dk-border-width-50);
  --dk-component-top-bar-focus-ring: var(--dk-border-field-focus);
  --dk-component-top-bar-focus-ring-width: var(--dk-border-width-50);

  /* the help line: the component library's ContactIcon / Title / Description */
  --dk-component-top-bar-help-gap: var(--dk-primitive-scale-2);
  --dk-component-top-bar-help-icon-size: var(--dk-primitive-scale-5-5);
  --dk-component-top-bar-help-icon: var(--dk-icon-primary-default);
  --dk-component-top-bar-help-title-font-size: var(--dk-font-overline-md-text-size);
  --dk-component-top-bar-help-title-line-height: var(--dk-font-overline-md-line-height);
  --dk-component-top-bar-help-title-font-weight: var(--dk-primitive-font-weight-bold);
  --dk-component-top-bar-help-title-letter-spacing: 0.04em;
  --dk-component-top-bar-help-title-color: var(--dk-text-default);
  --dk-component-top-bar-help-text-font-size: var(--dk-primitive-scale-3-5);
  --dk-component-top-bar-help-text-line-height: var(--dk-primitive-scale-5);
  --dk-component-top-bar-help-text-color: var(--dk-text-default);
  --dk-component-top-bar-help-link: var(--dk-text-link-default);
  --dk-component-top-bar-help-link-hover: var(--dk-text-link-hover);

  --dk-component-top-bar-account-ring: var(--dk-border-raised-hover);

  --dk-component-top-bar-duration: var(--dk-motion-state-duration);
  --dk-component-top-bar-indicator-duration: var(--dk-motion-travel-duration);
  --dk-component-top-bar-easing: var(--dk-motion-state-easing);
  --dk-component-top-bar-hide-duration: var(--dk-motion-exit-duration);
}

/* ════════════════════════════════ drift-kit:layer components/action-bar/tokens.css ════════════════════════════════ */
/* ============================================================================
   Action bar: component token collection (--dk-component-action-bar-*)
   ----------------------------------------------------------------------------
   A flow's controls along the bottom: Back, Next, and what the step costs.
   The component library calls it NavigationBottom and makes it a <nav>
   landmark around two buttons; it is neither, and the name it took is the
   one a phone's tab bar needs (that is the Sidebar's phone presentation).

   ITS TWO LOOKS ARE THE DESIGN'S: fixed, the full width with a hairline on
   top; float, an inset card with a full hairline, the radius-200 corner and
   the medium drop shadow. 16 above and below, 20 at the sides, 12 between
   groups, 8 between buttons, the page's max width.

   STUCK IS WHEN THE FORM GOES ON UNDER IT. A sticky bar resting at the end of
   a form has nothing beneath it; the runtime writes data-stuck only while the
   page could still scroll further, and only then does the edge lift.
   ============================================================================ */
.dk-component-action-bar {
  --dk-component-action-bar-padding-block: var(--dk-primitive-scale-4);
  --dk-component-action-bar-padding-inline: var(--dk-primitive-scale-5);
  --dk-component-action-bar-phone-padding-inline: var(--dk-primitive-scale-4);
  --dk-component-action-bar-gap: var(--dk-primitive-scale-3);
  --dk-component-action-bar-button-gap: var(--dk-primitive-scale-2);
  --dk-component-action-bar-max-width: var(--dk-responsive-layout-max-width);

  --dk-component-action-bar-surface: var(--dk-surface-chrome-deep, var(--dk-surface-raised-default));
  --dk-component-action-bar-border: var(--dk-border-raised-default);
  --dk-component-action-bar-border-width: var(--dk-border-width-25);
  /* data-layout="fill", a flow's footer: the page's surface and the level's
     hairline, fixed air (14 and 16, 24 under the buttons on a phone). */
  --dk-component-action-bar-fill-surface: var(--dk-surface-current);
  --dk-component-action-bar-fill-border: var(--dk-border-hairline-current);
  --dk-component-action-bar-fill-padding-block: var(--dk-primitive-scale-3-5);
  --dk-component-action-bar-fill-padding-inline: var(--dk-primitive-scale-4);
  --dk-component-action-bar-fill-phone-padding-block-end: var(--dk-primitive-scale-6);
  --dk-component-action-bar-float-radius: var(--dk-border-radius-200);
  /* float is glass: the frosted fill and the blur of what is under it */
  --dk-component-action-bar-float-surface: var(--dk-surface-chrome-deep-glass, var(--dk-surface-raised-glass));
  --dk-component-action-bar-blur: var(--dk-primitive-blur-glass);
  --dk-component-action-bar-float-inset: var(--dk-primitive-scale-4);
  --dk-component-action-bar-float-shadow: 0 4px 8px -2px var(--dk-shadow-drop-md-1), 0 2px 4px -2px var(--dk-shadow-drop-md-2);
  /* For a fixed bar with the form going on under it: a long, soft, faint
     shadow rising off the bar, three layers so the falloff is smooth rather
     than an edge. A close 3% contact, a 3% body and a 5% haze 56px wide
     (Julio, 12 Oct: the two short dark layers it had read too hard). */
  --dk-component-action-bar-stuck-shadow: 0 -1px 3px var(--dk-shadow-drop-lg-2), 0 -6px 20px var(--dk-shadow-drop-lg-2), 0 -16px 56px var(--dk-shadow-drop-xs);
  --dk-component-action-bar-z-index: 700;

  --dk-component-action-bar-summary-label-font-size: var(--dk-font-overline-md-text-size);
  --dk-component-action-bar-summary-label-line-height: var(--dk-font-overline-md-line-height);
  --dk-component-action-bar-summary-label-font-weight: var(--dk-primitive-font-weight-bold);
  --dk-component-action-bar-summary-label-letter-spacing: 0.04em;
  --dk-component-action-bar-summary-label-color: var(--dk-text-neutral-default);
  --dk-component-action-bar-summary-value-font-size: var(--dk-primitive-scale-4-5);
  --dk-component-action-bar-summary-value-line-height: var(--dk-primitive-scale-6);
  --dk-component-action-bar-summary-value-font-weight: var(--dk-primitive-font-weight-bold);
  --dk-component-action-bar-summary-value-color: var(--dk-text-default);

  --dk-component-action-bar-progress-thickness: calc(var(--dk-border-width-50) + var(--dk-border-width-25));
  --dk-component-action-bar-progress-track: transparent;
  --dk-component-action-bar-progress-fill: var(--dk-border-progress);
  /* the progress gradient itself, the kit's (mapped/gradient.css) */
  --dk-component-action-bar-progress-gradient: var(--dk-gradient-progress);
  --dk-component-action-bar-progress-gradient-rtl: var(--dk-gradient-progress-rtl);

  --dk-component-action-bar-duration: var(--dk-motion-state-duration);
  --dk-component-action-bar-progress-duration: var(--dk-motion-travel-duration);
  --dk-component-action-bar-easing: var(--dk-motion-state-easing);

  /* The summary as a button (with a __detail): a hover fill one step off the
     bar, room around the words, a ring, and a small chevron that turns. */
  --dk-component-action-bar-summary-padding: var(--dk-primitive-scale-2);
  --dk-component-action-bar-summary-radius: var(--dk-border-radius-150);
  --dk-component-action-bar-summary-surface-hover: var(--dk-interactive-surface-hover);
  --dk-component-action-bar-summary-surface-active: var(--dk-interactive-surface-active);
  /* The summary presses as a row does, the item tier (16 Oct). */
  --dk-component-action-bar-summary-press-scale: var(--dk-interactive-press-item);
  --dk-component-action-bar-summary-ring: var(--dk-border-control-hover);
  --dk-component-action-bar-summary-ring-width: var(--dk-primitive-scale-1);
  --dk-component-action-bar-chevron-size: var(--dk-primitive-scale-4);
  /* The chevron ramps with the fill under it: the control icon pairs. */
  --dk-component-action-bar-chevron-color: var(--dk-icon-control-default);
  --dk-component-action-bar-chevron-color-hover: var(--dk-icon-control-hover);
  --dk-component-action-bar-chevron-color-active: var(--dk-icon-control-active);

  /* The detail: a raised card above the bar on a desktop, the bar's own
     width on a phone. It rises in on the enter pattern and drops on exit. */
  --dk-component-action-bar-detail-surface: var(--dk-surface-raised-default);
  --dk-component-action-bar-detail-border: var(--dk-border-raised-default);
  --dk-component-action-bar-detail-radius: var(--dk-border-radius-200);
  --dk-component-action-bar-detail-shadow: var(--dk-shadow-floating);
  --dk-component-action-bar-detail-padding: var(--dk-primitive-scale-4);
  --dk-component-action-bar-detail-width: 22rem;
  --dk-component-action-bar-detail-gap: var(--dk-primitive-scale-2);
  --dk-component-action-bar-detail-rise: var(--dk-motion-cascade-rise);
  --dk-component-action-bar-detail-enter-duration: var(--dk-motion-enter-duration);
  --dk-component-action-bar-detail-enter-easing: var(--dk-motion-enter-easing);
  --dk-component-action-bar-detail-exit-duration: var(--dk-motion-exit-duration);
  --dk-component-action-bar-detail-exit-easing: var(--dk-motion-exit-easing);
}

/* Generated by scripts/build.js: this component's root colours, again on
   each part that resets a status tone, so they resolve against the reset. */
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-action-bar .dk-component-action-bar__detail,
.dk-component-action-bar:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-action-bar__detail {
  --dk-component-action-bar-surface: var(--dk-surface-chrome-deep, var(--dk-surface-raised-default));
  --dk-component-action-bar-border: var(--dk-border-raised-default);
  --dk-component-action-bar-fill-surface: var(--dk-surface-current);
  --dk-component-action-bar-fill-border: var(--dk-border-hairline-current);
  --dk-component-action-bar-summary-label-color: var(--dk-text-neutral-default);
  --dk-component-action-bar-summary-value-color: var(--dk-text-default);
  --dk-component-action-bar-progress-gradient: var(--dk-gradient-progress);
  --dk-component-action-bar-progress-gradient-rtl: var(--dk-gradient-progress-rtl);
  --dk-component-action-bar-summary-surface-hover: var(--dk-interactive-surface-hover);
  --dk-component-action-bar-summary-surface-active: var(--dk-interactive-surface-active);
  --dk-component-action-bar-summary-ring: var(--dk-border-control-hover);
  --dk-component-action-bar-chevron-color: var(--dk-icon-control-default);
  --dk-component-action-bar-chevron-color-hover: var(--dk-icon-control-hover);
  --dk-component-action-bar-chevron-color-active: var(--dk-icon-control-active);
  --dk-component-action-bar-detail-surface: var(--dk-surface-raised-default);
  --dk-component-action-bar-detail-border: var(--dk-border-raised-default);
}

/* ═════════════════════════════════ drift-kit:layer components/app-shell/tokens.css ═════════════════════════════════ */
/* ============================================================================
   App shell: component token collection (--dk-component-app-shell-*)
   ----------------------------------------------------------------------------
   The layout that places a Sidebar, a Top bar, the page and an Action bar.
   It has almost nothing of its own to say, which is the point: the canvas
   behind the chrome, and the height it all fills.

   THE PAGE SURFACE, white in light and the page dark in dark (14 Oct, Julio):
   the kit is meant to sit on white, and a grey canvas behind the page assumed
   a backdrop most apps do not have. The chrome keeps its own edge and lift.
   ============================================================================ */
.dk-component-app-shell {
  --dk-component-app-shell-surface: var(--dk-surface-page-default);
  --dk-component-app-shell-height: 100dvh;
  /* The gap a floating Sidebar keeps around itself, and a floating Action
     bar above the screen's edge. Its own token, equal to the Sidebar's
     floating inset by design rather than read from it. */
  --dk-component-app-shell-floating-inset: var(--dk-primitive-scale-4);
}

/* ═══════════════════════════════ drift-kit:layer components/brand-sheet/tokens.css ═══════════════════════════════ */
/* ============================================================================
   Brand sheet: component token collection (--dk-component-brand-sheet-*)
   ----------------------------------------------------------------------------
   A dark brand panel and the page's sheet that meets it. Scoped to the
   component, as every collection is: declared on the root (geometry) and on
   the sheet (its cast and fade), so each resolves against that element's own
   theme and level.

   SIZES. Medium is a sign-in screen's: a tall panel with room for a logo and
   a line of welcome, and a sheet holding a form in a 500px column. Small is a
   home screen's: a band only as tall as its greeting, and a sheet holding the
   rest of the page, its edge rounded a rung tighter.

   THE LIFT (decision 3, 7 Nov). An optional first child of the sheet rises
   over its edge into the panel by a FIXED amount, so the edge cuts across the
   first card at the same place whatever that card holds. 48px, measured as
   how far today's usual card (one to-do, a title and a subtitle) rose over
   the edge on a phone, a tablet and a desktop: 48 on all three, so a fixed
   rung (scale-12) rather than a responsive one, which would step by device.
   ============================================================================ */
.dk-component-brand-sheet {
  /* ── Stacked (and the card): the panel above, the sheet below ── */
  --dk-component-brand-sheet-panel-padding-block-start: var(--dk-spacing-16);
  --dk-component-brand-sheet-panel-padding-inline: var(--dk-spacing-10);
  /* The panel's foot, the sheet's rise over it included. */
  --dk-component-brand-sheet-panel-padding-block-end: var(--dk-spacing-24);
  --dk-component-brand-sheet-panel-gap: var(--dk-spacing-5);
  --dk-component-brand-sheet-sheet-padding-block-start: var(--dk-spacing-10);
  --dk-component-brand-sheet-sheet-padding-inline: var(--dk-spacing-10);
  --dk-component-brand-sheet-sheet-padding-block-end: var(--dk-spacing-12);
  --dk-component-brand-sheet-sheet-gap: var(--dk-spacing-6);
  /* The sheet's corner where it meets the panel, and how far it rises over
     the panel's foot. */
  --dk-component-brand-sheet-radius: var(--dk-border-radius-600);
  --dk-component-brand-sheet-rise: var(--dk-spacing-8);
  /* The sheet's content column, centred in it (a form's width). */
  --dk-component-brand-sheet-column: 31.25rem;

  /* ── Split: the panel beside the sheet, running under its rounded edge ── */
  --dk-component-brand-sheet-split-padding: var(--dk-spacing-16);
  --dk-component-brand-sheet-split-panel-gap: var(--dk-spacing-4);
  --dk-component-brand-sheet-split-sheet-gap: var(--dk-spacing-5);
  --dk-component-brand-sheet-overlap: var(--dk-spacing-6);

  /* ── Card: the panel a rounded panel of its own on the sheet's colour ── */
  --dk-component-brand-sheet-card-radius: var(--dk-border-radius-600);
  /* Between the panel and what the sheet holds. */
  --dk-component-brand-sheet-card-gap: var(--dk-spacing-8);

  /* ── The lift ── */
  --dk-component-brand-sheet-lift: var(--dk-primitive-scale-12);
  /* In the card layout on a narrow root the lift keeps in from the panel's
     sides, as the panel's own content does. */
  --dk-component-brand-sheet-lift-inset: var(--dk-spacing-8);

  /* ── The split sheet's fade: flat to here, then towards the fade colour ── */
  --dk-component-brand-sheet-fade-stop: 35.7%;
  /* How far above its edge the stacked sheet's cast may reach before it is
     cut (the sides and the foot are cut at the sheet). */
  --dk-component-brand-sheet-cast-reach: calc(4 * var(--dk-spacing-12));
}

/* ── The panel's surface, readable outside the panel ───────────────────────
   The panel paints the current surface of its own dark scope, which nothing
   outside it can read. This token is the same colour from the page's side:
   in a light page the page's tertiary surface (dark level 1, the panel's
   own), in a dark page the page's default (dark level 0, where the panel and
   the page are one). Declared on the root and on the nearest App shell
   holding a Brand sheet marked data-page, so the shell can paint what the
   panel covers (the rules at the end of brand-sheet/styles.css).
   THE NEAREST THEME DECIDES, however deep the nesting (10 Nov 2026): each
   theme scope declares its own value on a private property, resolved there,
   and the root and the shell inherit the nearest one. A selector gate could
   only see one level of nesting, and read dark in light in dark as light. */
[data-theme="light"] { --_bs-page-panel: var(--dk-surface-page-tertiary); }
[data-theme="dark"] { --_bs-page-panel: var(--dk-surface-page-default); }
.dk-component-brand-sheet,
.dk-component-app-shell:where(:has(.dk-component-brand-sheet[data-page]):not(:has(.dk-component-app-shell .dk-component-brand-sheet[data-page]))) {
  --dk-component-brand-sheet-panel-surface: var(--_bs-page-panel, var(--dk-surface-page-tertiary));
  /* The share of the root's width the split panel's column takes (the root
     is two equal columns), which the shell paints the panel's colour under. */
  --dk-component-brand-sheet-split-panel-share: 50%;
}

.dk-component-brand-sheet[data-size="small"] {
  --dk-component-brand-sheet-panel-padding-block-start: var(--dk-spacing-8);
  --dk-component-brand-sheet-panel-padding-inline: var(--dk-spacing-8);
  --dk-component-brand-sheet-panel-padding-block-end: calc(var(--dk-spacing-8) + var(--dk-component-brand-sheet-radius));
  --dk-component-brand-sheet-panel-gap: var(--dk-spacing-8);
  --dk-component-brand-sheet-sheet-padding-block-start: var(--dk-spacing-5);
  --dk-component-brand-sheet-sheet-padding-inline: var(--dk-spacing-5);
  --dk-component-brand-sheet-sheet-padding-block-end: var(--dk-spacing-5);
  --dk-component-brand-sheet-sheet-gap: var(--dk-spacing-8);
  --dk-component-brand-sheet-radius: var(--dk-border-radius-400);
  /* The sheet's edge rises by its own corner: only the corners show the
     panel behind them. */
  --dk-component-brand-sheet-rise: var(--dk-component-brand-sheet-radius);
  /* No column: the sheet holds a page, edge to edge of its padding. */
  --dk-component-brand-sheet-column: none;
  --dk-component-brand-sheet-split-padding: var(--dk-spacing-8);
  --dk-component-brand-sheet-split-panel-gap: var(--dk-spacing-8);
  --dk-component-brand-sheet-split-sheet-gap: var(--dk-spacing-8);
}

/* ── The cast and the fade: per theme, read where the sheet is ─────────────
   The sheet casts onto the dark panel. On a light page a wide soft layer
   (2xl) and a tight one (md-1). On a dark page a wide shadow blurs the panel
   into the page, so the wide layer is the lighter (md-1) and the tight one
   the stronger (2xl, a short blur), which keeps the edge crisp; beside the
   panel (split) both reach further and each is a rung lighter, the same
   strength over that much more panel having read heavier. The split sheet
   fades towards the card hover colour in light (the fade is for a white
   sheet) and is flat in dark.
   The sheet's own block is the light theme and the fallback; the dark block
   is gated to the NEAREST theme (a light page nested in a dark preview keeps
   the light values), the guard in :where() so it adds no weight. */
.dk-component-brand-sheet__sheet {
  --dk-component-brand-sheet-cast-far: var(--dk-shadow-drop-2xl);
  --dk-component-brand-sheet-cast-near: var(--dk-shadow-drop-md-1);
  --dk-component-brand-sheet-cast-near-offset: var(--dk-spacing-1);
  --dk-component-brand-sheet-cast-near-blur: var(--dk-spacing-4);
  --dk-component-brand-sheet-cast-side-offset: var(--dk-spacing-6);
  --dk-component-brand-sheet-cast-side-blur: var(--dk-spacing-16);
  --dk-component-brand-sheet-cast-side-near-offset: var(--dk-component-brand-sheet-cast-near-offset);
  --dk-component-brand-sheet-cast-side-near-blur: var(--dk-component-brand-sheet-cast-near-blur);
  --dk-component-brand-sheet-cast-side-far: var(--dk-component-brand-sheet-cast-far);
  --dk-component-brand-sheet-cast-side-near: var(--dk-component-brand-sheet-cast-near);
  --dk-component-brand-sheet-cast-up-offset: var(--dk-spacing-4);
  --dk-component-brand-sheet-cast-up-blur: var(--dk-spacing-12);
  --dk-component-brand-sheet-fade: var(--dk-surface-card-hover);
  /* The split sheet's fill: the fade in light, flat in dark (a gradient
     between two equal colours rasterises its rounded corner differently). */
  --dk-component-brand-sheet-split-fill: linear-gradient(to bottom, var(--dk-surface-current) var(--dk-component-brand-sheet-fade-stop), var(--dk-component-brand-sheet-fade));
}
[data-theme="dark"] .dk-component-brand-sheet__sheet:where(:not([data-theme="dark"] [data-theme="light"] *)) {
  --dk-component-brand-sheet-cast-far: var(--dk-shadow-drop-md-1);
  --dk-component-brand-sheet-cast-near: var(--dk-shadow-drop-2xl);
  --dk-component-brand-sheet-cast-near-offset: var(--dk-spacing-0-5);
  --dk-component-brand-sheet-cast-near-blur: var(--dk-spacing-2);
  --dk-component-brand-sheet-cast-side-offset: var(--dk-spacing-16);
  --dk-component-brand-sheet-cast-side-blur: var(--dk-spacing-32);
  --dk-component-brand-sheet-cast-side-near-offset: var(--dk-spacing-2);
  --dk-component-brand-sheet-cast-side-near-blur: var(--dk-spacing-8);
  --dk-component-brand-sheet-cast-side-far: var(--dk-shadow-drop-xs);
  --dk-component-brand-sheet-cast-side-near: var(--dk-shadow-drop-md-1);
  --dk-component-brand-sheet-cast-up-offset: var(--dk-spacing-8);
  --dk-component-brand-sheet-cast-up-blur: var(--dk-spacing-20);
  --dk-component-brand-sheet-fade: var(--dk-surface-current);
  --dk-component-brand-sheet-split-fill: var(--dk-surface-current);
}

/* ══════════════════════════════════════ drift-kit:layer components/list/tokens.css ══════════════════════════════════════ */
/* ============================================================================
   List: component token collection (--dk-component-list-*)
   ----------------------------------------------------------------------------
   A list of interactive rows: one divided panel when narrow, separate raised
   cards when there is room. Scoped to the component, as every collection is,
   and declared on the list so each value resolves against its own theme and
   level.

   BOX'S VALUES, NAMED AGAIN. Box's tokens are declared on a Box, so a list
   cannot read them; these name the same sources (a test keeps them equal).
   The divided panel is a raised small Box: its fill is the current surface,
   its edge, corner and shadow are Box raised's. A row's corner is Box
   large's, the rung rounder a Box takes with data-radius="large", and the
   gap inside a row is Box xsmall's.
   ============================================================================ */
.dk-component-list {
  /* ── The divided panel: Box raised, size small ── */
  --dk-component-list-radius: var(--dk-border-radius-200);
  --dk-component-list-border-width: var(--dk-border-width-25);
  --dk-component-list-border-color: var(--dk-border-raised-default);
  --dk-component-list-shadow: var(--dk-shadow-floating);
  /* The line between two rows: the kit's hairline, which follows the level
     and the tone, at the separator width (Box's grid dividers). */
  --dk-component-list-divider-color: var(--dk-border-hairline-current);
  --dk-component-list-divider-width: var(--dk-border-width-separator-25);

  /* ── A row, in either presentation ── */
  --dk-component-list-item-padding: var(--dk-spacing-5);
  --dk-component-list-item-radius: var(--dk-border-radius-300);
  --dk-component-list-item-gap: var(--dk-spacing-3);

  /* ── The cards: a grid of columns no narrower than this, each card the
     raised interactive fill with the floating shadow, pressed as a control ── */
  --dk-component-list-card-min-width: var(--dk-primitive-scale-80);
  --dk-component-list-gap: var(--dk-spacing-4);
  --dk-component-list-card-shadow: var(--dk-shadow-floating);
  --dk-component-list-card-press: var(--dk-interactive-press-control);

  --dk-component-list-font-family: var(--dk-font-family-primary);
}

/* ════════════════════════════════ drift-kit:layer components/tile-check/tokens.css ════════════════════════════════ */
/* ============================================================================
   Tile check: component token collection (--dk-component-tile-check-*)
   ----------------------------------------------------------------------------
   An icon tile that becomes a checkbox. The one value it owns is how small the
   part that is not shown sits, which is the kit's swap scale: a part leaving
   or arriving shrinks to it as it fades. Reduced motion sets the scale to 1,
   so the swap is a fade alone.
   ============================================================================ */
.dk-component-tile-check {
  --dk-component-tile-check-swap-scale: var(--dk-motion-swap-scale);
}

/* ═════════════════════════════════════ drift-kit:layer components/image/tokens.css ═════════════════════════════════════ */
/* ============================================================================
   Image: component token collection (--dk-component-image-*)
   ----------------------------------------------------------------------------
   An image slot: a picture on the kit's corner, or, while there is none, the
   empty slot drawn as a hairline box crossed corner to corner.

   THE PLACEHOLDER IS THE HAIRLINE OF ITS LEVEL, edge and cross alike, so it
   steps with the surface, the tone and the theme like a Box's edge does, and
   reads as structure rather than content. The edge is the kit's thinnest
   border, so a thick brand thickens it. The cross is one device pixel's
   hairline whatever the box's size or brand: it is drawn as a mask (the one
   way to draw a corner-to-corner line in CSS that a box of any proportion
   keeps exact), and a mask's artwork cannot read a token.

   THE GLYPH SIZES ARE ICON'S NAMES AND VALUES (16, 20, 24): the small square
   that sits beside a title or a row where a picture will go, at the size of
   the icon it stands in for. Fixed, as Icon's are.

   Scoped to the component, so the hairline resolves where the image sits.
   ============================================================================ */
.dk-component-image {
  --dk-component-image-radius: var(--dk-border-radius-150);
  --dk-component-image-placeholder-color: var(--dk-border-hairline-current);
  --dk-component-image-placeholder-border-width: var(--dk-border-width-25);
  --dk-component-image-16-size: var(--dk-primitive-scale-4);
  --dk-component-image-20-size: var(--dk-primitive-scale-5);
  --dk-component-image-24-size: var(--dk-primitive-scale-6);
  /* data-fill: the surface the slot sits on, so a slot in front of another
     (a pile of photos) covers it. */
  --dk-component-image-fill: var(--dk-surface-current);
}

/* ══════════════════════════════════ drift-kit:layer components/timeline/tokens.css ══════════════════════════════════ */
/* ============================================================================
   Timeline: component token collection (--dk-component-timeline-*)
   ----------------------------------------------------------------------------
   Dated moments down a page: a dot beside each, a line joining one dot to
   the next. The dot and the line are the hairline of their level, so they
   step with the surface, the tone and the theme like a Box's edge, and read
   as structure under the words rather than as a mark of their own.

   FIXED RUNGS, the same at every width: an 8 dot 4 from the item's top, the
   words 24 in, 12 between an item's blocks and 48 after it, the line 6 clear
   of each dot. The line is the kit's medium border, so a bold brand
   thickens it.
   ============================================================================ */
.dk-component-timeline {
  --dk-component-timeline-color: var(--dk-border-hairline-current);
  --dk-component-timeline-dot-size: var(--dk-primitive-scale-2);
  --dk-component-timeline-dot-offset: var(--dk-primitive-scale-1);
  --dk-component-timeline-line-width: var(--dk-border-width-50);
  --dk-component-timeline-line-clearance: var(--dk-primitive-scale-1-5);
  --dk-component-timeline-indent: var(--dk-primitive-scale-6);
  --dk-component-timeline-item-gap: var(--dk-primitive-scale-3);
  --dk-component-timeline-spacing: var(--dk-primitive-scale-12);
}

/* ═════════════════════════════════════ drift-kit:layer components/input/styles.css ═════════════════════════════════════ */
/* ── Text input ─────────────────────────────────────────────────────────────
   Mirrors v2 Input: a .dk-component-input__field wrapper (border/background/states) around
   a borderless <input>, with optional label + caption. Error is aria-invalid="true" on the
   input, not a class (see the error rules below); disabled is input[disabled]. Sizes are
   data-size="small" or data-size="large" on the root; the unmarked default is medium.
   data-label-size="small" sets the label a rung smaller (the overline's md)
   with a little more air under it.

   Purpose: Label, field and caption, with leading and trailing slots, three
     sizes, and error, disabled and read-only states.

   Anatomy:
     div.dk-component-input[data-size="small|medium|large"]?[data-variant="raised"]?[data-leading-control]?[data-label-size="small"]?
       label.__label
       div.__field
         span.__leading?
         input|select|textarea
         span.__trailing?
         button.__action?
       p.__caption? | p.__error?
   */
.dk-component-input { display: grid; width: 100%; gap: var(--dk-component-input-gap); }
/* A small label: the overline's md and more air under it. Sets the label's
   tokens, so every rule that reads them follows. */
.dk-component-input[data-label-size="small"] {
  --dk-component-input-label-font-size: var(--dk-component-input-small-label-font-size);
  --dk-component-input-label-line-height: var(--dk-component-input-small-label-line-height);
  --dk-component-input-gap: var(--dk-component-input-small-label-gap);
}
.dk-component-input[hidden] { display: none; }

/* Label = an Eyebrow (size large): uppercase, bold, tracked, 12px fixed with
   0.08em tracking. It reads ITS OWN tokens, which resolve to the same alias
   tokens Eyebrow's do; see tokens.css for why it stopped reading Eyebrow's
   collection directly and where the they-must-match invariant went. Mirrors
   @karmo-co/component-library Input.Label, which is its Overline. */
.dk-component-input__label {
  font-family: var(--dk-component-input-label-font-family);
  text-transform: uppercase;
  font-weight: var(--dk-component-input-label-font-weight);
  font-size: var(--dk-component-input-label-font-size);
  line-height: var(--dk-component-input-label-line-height);
  letter-spacing: var(--dk-component-input-label-letter-spacing);
  color: var(--dk-text-neutral-default);
}
/* WARNING, not error. The asterisk marks a field somebody still has to fill,
   which is a prompt, not a failure: a form of ten required fields would open
   entirely in red and spend the strongest colour in the palette before anyone
   has done anything wrong. Error stays reserved for the state that actually
   is one, so the red border, the message and this mark can never be confused
   for each other. Warning is level-aware, so it follows the surface with the
   rest of the field. */
.dk-component-input__label .dk-component-req { color: var(--dk-text-warning-default); margin-left: 2px; }

.dk-component-input__field {
  display: flex; width: 100%; align-items: center;
  gap: var(--dk-component-input-slot-gap);
  /* The type size lives in a private slot, so data-size sets it ONCE and the
     control, the leading slot and the trailing slot all read the same value.
     The first cut set font-size on the input alone, which left a $ affix at
     16px beside 18px text.
     Declared HERE rather than on the root, and that is not arbitrary. A custom
     property declared on an element always beats one inherited from its parent,
     whatever the specificity, so a default on the root plus a default on the
     field would have made the root's size unreachable. Keeping every writer on
     the same element lets ordinary specificity settle it: the data-size rules
     below are .dk-component-input[data-size=…] .dk-component-input__field and
     outrank this one. It also means a __field used on its own still resolves,
     which Forge's own docs control rail relies on: check:vars caught the root
     version failing on 6 such elements. */
  --_input-font-size: var(--dk-component-input-font-size);
  --_input-line-height: var(--dk-component-input-line-height);
  --_input-slot-icon-size: var(--dk-component-input-slot-icon-size);
  /* BORDER-BOX, and this is a fix rather than a preference. The field carried
     min-height 44px with a 1px border under content-box, so it rendered 46px
     while Button, which is border-box, rendered 44px: two pixels out of line in
     every row holding both. Measured 16 Sep. */
  box-sizing: border-box;
  min-height: var(--dk-component-input-height);
  padding: 0 var(--dk-component-input-padding-inline);
  /* FLUSH WITH ITS SURFACE, so the field is outlined rather than filled.
     --dk-surface-current IS "whatever surface this is sitting on": level 0, 1
     or 2, remapped by [data-surface], in both themes. Two earlier cuts were
     wrong in opposite directions. --dk-surface-default-body held one colour at
     every level, so a field on a raised panel read as a hole punched through
     it. --dk-surface-nested-default followed the level correctly but sank the
     field a rung BELOW its surface, which is a filled field, not this one.

     THE BORDER IS THEN THE ONLY THING DEFINING THE CONTROL, so it gets a token
     of its own rather than borrowing one. Two earlier cuts borrowed and both
     were called too dark in light and too light in dark, which is one complaint
     rather than two: the neutral ramp is not mirrored between themes, so any
     borrowed token lands on different rungs in each. --dk-border-field-default
     exists for this, and mapped/border.css carries the full measurement of why
     light-400 with dark-600 is the pairing. Select inherits the same token.
     Select follows the same palette.

     AND THE PALETTE ESCAPES THE TONE. --dk-surface-current was the right answer
     for the level ladder and the wrong one under a status tone, which remaps it
     to the panel's own fill: measured 1.00:1 against the panel in all twelve
     tone, fill and theme combinations, so the field WAS the panel and its
     border was the only evidence a control was there. --dk-surface-field-* is
     the same ladder with the tone escaped. See tokens/mapped/field.css for why
     it is a whole palette rather than one fill. */
  background: var(--dk-surface-field-default);
  /* Plain, the rest: the plain field border (28 Oct), handed over under the
     name every rule reads, so raised and inset, later and stronger, still
     hand over theirs. */
  --dk-border-field-default: var(--dk-border-field-plain-default);
  border: var(--dk-component-input-border-width) solid var(--dk-border-field-default);
  border-radius: var(--dk-component-input-radius);
  cursor: text;
  transition: border-color var(--dk-motion-state-duration) var(--dk-motion-state-easing), box-shadow var(--dk-motion-state-duration) var(--dk-motion-state-easing), background-color var(--dk-motion-state-duration) var(--dk-motion-state-easing);
}
/* HOVER MOVES TWO THINGS, because one was not enough to see. A border-only
   hover on a flush field is a single rung on a 1px line, which is the kind of
   change you find by looking for it rather than by hovering. The fill steps too:
   --dk-surface-nested-default is the next rung DOWN from the surface, so the
   box reads as very slightly pressed into the page, 1.09 to 1.87 against it,
   and it is level-aware so the step holds at every level. The border goes one
   rung darker in light and lighter in dark, neutral-default, the same ramp the
   resting border sits on.
   Guarded against disabled. The old rule had no guard at all, so a disabled
   field still lit up under the cursor and invited a click it would refuse. */
/* HOVER DEFERS TO FOCUS, and this is a specificity fix rather than a
   preference. The guard that keeps hover off a disabled control,
   :not(:has(...)), carries the specificity of its argument, so the hover rule
   scored (0,3,1) against the focus rule's (0,2,1) and won whenever both
   applied, which is every time someone clicks into a field with the mouse
   still over it. Measured 17 Sep across all three field-shaped components: the
   border reverted to its hover colour while focused, and on Search input,
   whose hover also sets a box-shadow, the focus ring vanished outright.
   Source order cannot fix this; specificity outranks it. So hover is excluded
   from matching at all when the control is focused, which is also the honest
   statement of the intent: focus is the stronger state and should win. */
/* AN ACTION'S HOVER IS ITS OWN. A field lights up when the pointer is anywhere
   inside it, including on the buttons at its right end, so hovering the help
   icon lit the whole box as well as the button. Those buttons carry their own
   hover fill precisely so they read as separate targets; two hover states at
   once says the pointer is on both. Same reasoning as focus above, and the same
   fix: hover does not match while the pointer is on an action. */
@media (hover: hover) {
  .dk-component-input__field:hover:not(:has(:is(input, textarea, select):disabled, :is(input, textarea, select):focus-visible, .dk-component-input__action:hover)) {
    border-color: var(--dk-border-field-hover);
    background: var(--dk-surface-field-hover);
  }
}

/* The ring follows REAL focus. :focus-within lit the whole box when a control
   inside the trailing slot took focus, which says the field is focused when it
   is not; the reveal button carries its own ring instead.
   :is(input, textarea, select) — not input alone — because outline: none below
   is set on all three control types. A ring rule that covers only input
   restores nothing for a textarea or select: the field would suppress the
   native outline and match no rule, leaving no focus indicator at all. */
.dk-component-input__field:has(:is(input, textarea, select):focus-visible) {
  border-color: var(--dk-border-field-focus);
  box-shadow: 0 0 0 var(--dk-component-input-focus-ring-width) var(--dk-border-field-focus-ring);
}

/* ── data-leading-control: the slot holds a CONTROL, not a glyph ────────────
   A phone number is a country picker and a number: one field to read, two
   controls to operate. The kit ships this as a shape rather than a component,
   because the only part that is design-system work is the seam, and the seam
   is the same whether the thing on the left is choosing a country, a currency
   or a unit.

   THIS FILE NAMES A PART OF ANOTHER COMPONENT, which it does nowhere else and
   does not do lightly. A composition has to be owned by one of the two, or by
   a third thing that exists only to join them; Input owns it because the slot
   is Input's, and what it does to the select is subtraction — take away the
   box, the ring and the padding it would draw for itself, so that the field
   can draw them once for both.

   The divider is not decoration: the two halves take focus separately and Tab
   moves between them, and a field with no line down it would promise one
   control where there are two. ── */
.dk-component-input[data-leading-control] .dk-component-input__field {
  /* THE TWO HALVES TILE THE FIELD. Each carries its own inline padding, so
     each can paint its own state edge to edge: a fill that stopped short of
     the divider, or of the field's rounded end, would read as a box inside a
     box rather than as half of one control. */
  padding: 0;
  gap: 0;
  /* A GRID, so the number's half can span its actions (16 Oct): the slot, the
     number taking the rest, then whatever trails it, each in a column of its
     own. Isolated, so the half's ::after can sit behind the content. */
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  isolation: isolate;
}
/* THE NUMBER'S HALF, from the divider to the field's end. It used to be the
   <input>'s own border and ring, so a clear button, a sibling after it, sat
   outside the focused box. Drawn behind the content, the input and every
   trailing action share it, and the actions stay on top to be pressed. The
   left border sits on the divider's pixel column, as the input's did. */
.dk-component-input[data-leading-control] .dk-component-input__field::after {
  content: '';
  grid-row: 1;
  grid-column: 2 / span 9;
  align-self: stretch;
  z-index: -1;
  pointer-events: none;
  border: var(--dk-component-input-border-width) solid transparent;
  margin: calc(-1 * var(--dk-component-input-border-width));
  border-radius: 0 var(--dk-component-input-radius) var(--dk-component-input-radius) 0;
  transition: background-color var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              border-color var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              box-shadow var(--dk-motion-state-duration) var(--dk-motion-state-easing);
}
/* ── ONE LINE BETWEEN THE HALVES, AND IT BELONGS TO WHICHEVER IS HOT ─────────
   Both halves carry their own border, and where they meet that made two 1px
   lines side by side: the trigger's right edge against the divider. Giving the
   divider to one of them instead would make it neutral while that half is
   focused, which is the other half of the same complaint — a focused field
   with three primary sides and a grey one.

   So the line is the LEADING SLOT's, one line always, and it takes the colour
   of whichever half the pointer or the keyboard is on. The two halves' own
   borders stop at it: the trigger has no right border, the input no left. ── */
.dk-component-input[data-leading-control] .dk-component-input__leading {
  align-self: stretch;
  display: flex; align-items: center;
  border-right: var(--dk-component-input-leading-control-divider-width) solid
                var(--dk-component-input-leading-control-divider);
}
@media (hover: hover) {
  .dk-component-input[data-leading-control] .dk-component-input__field:has(.dk-component-select__trigger:hover) .dk-component-input__leading,
  .dk-component-input[data-leading-control] .dk-component-input__field:has(> :is(input, textarea):hover) .dk-component-input__leading {
    border-right-color: var(--dk-border-field-hover);
  }
}
.dk-component-input[data-leading-control] .dk-component-input__field:has(.dk-component-select__trigger:active) .dk-component-input__leading,
.dk-component-input[data-leading-control] .dk-component-input__field:has(.dk-component-select__trigger:focus-visible) .dk-component-input__leading,
.dk-component-input[data-leading-control] .dk-component-input__field:has(.dk-component-select[data-open]) .dk-component-input__leading,
.dk-component-input[data-leading-control] .dk-component-input__field:has(> :is(input, textarea):focus-visible) .dk-component-input__leading {
  border-right-color: var(--dk-border-field-focus);
}
.dk-component-input[data-leading-control] .dk-component-input__field > :is(input, textarea) {
  align-self: stretch;
  grid-row: 1;
  grid-column: 2;
  padding-inline: var(--dk-component-input-padding-inline);
  /* Its box is the half's ::after now; the input itself paints nothing. */
  background: transparent;
}
/* What trails the number sits inside its half on the field's own rhythm: a
   slot gap between, the field's padding before the edge. */
.dk-component-input[data-leading-control] .dk-component-input__field > :is(input, textarea):not(:last-child) { padding-inline-end: var(--dk-component-input-slot-gap); }
.dk-component-input[data-leading-control] .dk-component-input__field > :is(input, textarea) ~ * { grid-row: 1; margin-inline-end: var(--dk-component-input-slot-gap); }
.dk-component-input[data-leading-control] .dk-component-input__field > :is(input, textarea) ~ :last-child { margin-inline-end: var(--dk-component-input-padding-inline); }
/* Each part in a column of its own, explicitly: auto-placement never overlaps,
   so with the half placed first the number and its actions moved round it. */
.dk-component-input[data-leading-control] .dk-component-input__field > .dk-component-input__leading { grid-row: 1; grid-column: 1; }
.dk-component-input[data-leading-control] .dk-component-input__field > :nth-child(3) { grid-column: 3; }
.dk-component-input[data-leading-control] .dk-component-input__field > :nth-child(4) { grid-column: 4; }
.dk-component-input[data-leading-control] .dk-component-input__field > :nth-child(5) { grid-column: 5; }
.dk-component-input[data-leading-control] .dk-component-input__field > :nth-child(6) { grid-column: 6; }
.dk-component-input[data-leading-control] .dk-component-input__field > :nth-child(7) { grid-column: 7; }
.dk-component-input[data-leading-control] .dk-component-input__field > :nth-child(8) { grid-column: 8; }
.dk-component-input[data-leading-control] .dk-component-input__field > :nth-child(9) { grid-column: 9; }
.dk-component-input[data-leading-control] .dk-component-input__leading .dk-component-select {
  height: 100%;
}
/* BIGGER THAN ITS PARENT BY THE BORDERS IT SITS OVER, on both axes, which is
   the arithmetic the negative margins imply and 100% does not do. At 100% the
   box ran from the field's top border to 2px short of its bottom one, so the
   field's own border stayed visible under the control's: the double line, at
   the bottom edge. Across, the box covers the field's left border and the
   divider column at the other end, which is where its own right border goes. */
.dk-component-input[data-leading-control] .dk-component-input__leading .dk-component-select__trigger {
  height: calc(100% + 2 * var(--dk-component-input-border-width));
  width: calc(100% + 2 * var(--dk-component-input-border-width));
}
.dk-component-input[data-leading-control] .dk-component-input__leading .dk-component-select__trigger {
  /* ── THE SLOTS, NOT THE PROPERTIES. Setting background and border here made
     the control STATELESS: this selector outranks the component's own :active
     rule, so the press never painted and the border it colours had no width to
     show. Its private slots are the seam a component offers for exactly this —
     hand them transparent and every state rule it owns still runs, painting
     its own hover, its deeper press and its focus border from its own tokens.
     The result is a picker that presses and focuses like a select because it
     IS one, rather than like a select because this file copied its colours. ── */
  --_sel-surface: transparent;
  --_sel-border: transparent;
  /* The border keeps its width so a state has something to colour, and the box
     is pulled back over the field's own border on the three outer edges: two
     1px lines side by side would read as a seam inside a seam. */
  margin: calc(-1 * var(--dk-component-input-border-width)) 0
          calc(-1 * var(--dk-component-input-border-width))
          calc(-1 * var(--dk-component-input-border-width));
  /* THE RIGHT BORDER SITS ON THE DIVIDER'S OWN PIXEL COLUMN, the way the
     number's left border does at the same edge, and for the same reason: a
     focus ring is drawn outside the border box, so the picker's ring painted
     right over the divider and a focused control had a crisp line on three
     sides and a soft band on the fourth. A border paints above its own
     shadow. At rest it is transparent and the divider shows through it. */
  border-radius: var(--dk-component-input-radius) 0 0 var(--dk-component-input-radius);
  min-height: 0;
  padding: 0 var(--dk-component-input-padding-inline);
  gap: var(--dk-component-input-leading-control-gap);
  /* ONE SIZE ATTRIBUTE FOR BOTH HALVES. The trigger inherits the field's type
     rather than carrying its own rung, so data-size on the input drives what
     you read on either side of the divider. The menu keeps the select's own
     size, which is the one thing the author still sets on both. */
  font-size: var(--_input-font-size);
  line-height: var(--_input-line-height);
}
/* ── EACH HALF ANSWERS FOR ITSELF ───────────────────────────────────────────
   The first cut had the field carry every state for both halves: hover the
   country picker and the whole box lit, focus the number and the picker lit
   with it. That is what a single control does, and this is not one — the
   divider says so, Tab says so, and the screen reader says so.

   So the field's own hover and press stand down whenever the pointer is on the
   picker, which paints its own; and the field's focus ring is the NUMBER's,
   while the picker rings itself inside the box. Written as the field's own
   selectors plus a :has() test rather than folded into them, for the reason
   Select's chips needed the same: these rules sit in a specificity ladder. ── */
/* THE FIELD PAINTS NEITHER STATE FOR EITHER HALF. Its own hover and ring are
   written for one control, and this is two: the guards below hold the box at
   rest whatever is hovered or focused inside it, and each half answers for
   itself in the two rules after them. Written as the field's own selectors
   plus [data-leading-control] so they outrank rules this component's header
   spends a paragraph explaining the weight of. */
@media (hover: hover) {
  .dk-component-input[data-leading-control] .dk-component-input__field:hover,
  .dk-component-input[data-leading-control] .dk-component-input__field:hover:not(:has(:is(input, textarea, select):disabled, :is(input, textarea, select):focus-visible, .dk-component-input__action:hover)) {
    background: var(--dk-surface-field-default);
    border-color: var(--dk-border-field-default);
  }
}
.dk-component-input[data-leading-control] .dk-component-input__field:has(:is(input, textarea, select):focus-visible) {
  border-color: var(--dk-border-field-default);
  box-shadow: none;
}
/* The number's half: its own fill under the pointer, its own ring when the
   keyboard is on it, drawn by the half so its actions are inside. The
   picker's are the select's, untouched. */
@media (hover: hover) {
  .dk-component-input[data-leading-control] .dk-component-input__field:has(> :is(input, textarea):hover:not(:disabled):not(:focus-visible))::after {
    background: var(--dk-surface-field-hover);
    border-color: var(--dk-border-field-hover);
  }
}
.dk-component-input[data-leading-control] .dk-component-input__field:has(> :is(input, textarea):focus-visible)::after {
  border-color: var(--dk-border-field-focus);
  box-shadow: 0 0 0 var(--dk-component-input-focus-ring-width) var(--dk-border-field-focus-ring);
}

/* ── data-raised: a field lifted off the surface ────────────────────────────
   All of what Search bar was. That component called itself "a preset of Input,
   not a second field implementation" in its own header, and by the end the only
   things it still owned were an elevation, a roomier padding and a magnifier
   that tinted on focus. A preset that needs 145 lines, nine tokens, a
   documentation page and an entry in four gates is an expensive way to say
   "Input with a shadow", so it is an attribute now.

   THE SHADOW IS THE WHOLE ATTRIBUTE. The roomier padding came across with it
   and was cut on review: padding belongs to the size rung, and a raised field
   whose text starts further in than the field below it reads as a different
   component rather than the same one lifted.

   THE SHADOW STACKS WITH THE FOCUS RING rather than replacing it, which is the
   bug the old component hit hardest: its hover shadow overwrote the ring, so a
   focused search bar under the cursor had no focus state at all. Both are
   box-shadow, so the only way to have both is to write both, in one
   declaration, in the rule where both apply. */
.dk-component-input:is([data-raised], [data-variant="raised"]) .dk-component-input__field {
  box-shadow: var(--dk-component-input-raised-shadow);
  /* THE BORDER ONE RUNG FAINTER, by handing the field the raised rungs under
     the names every rule already reads, rather than writing a raised copy of
     each rule. That keeps the specificity ladder the base rules depend on:
     error and disabled still win exactly where they did, because they read
     tokens this does not touch. Everything else that reads the field's focus
     colour on this element follows it, including the leading glyph and a
     leading control's divider, so the field stays one colour at every state. */
  --dk-border-field-default: var(--dk-border-field-raised-default);
  --dk-border-field-hover: var(--dk-border-field-raised-hover);
  --dk-border-field-focus: var(--dk-border-field-raised-focus);
}
@media (hover: hover) {
  .dk-component-input:is([data-raised], [data-variant="raised"]) .dk-component-input__field:hover:not(:has(:is(input, textarea, select):disabled, :is(input, textarea, select):focus-visible, .dk-component-input__action:hover)) {
    box-shadow: var(--dk-component-input-raised-shadow-hover);
  }
}
.dk-component-input:is([data-raised], [data-variant="raised"]) .dk-component-input__field:has(:is(input, textarea, select):focus-visible) {
  box-shadow: var(--dk-component-input-raised-shadow-hover),
              0 0 0 var(--dk-component-input-focus-ring-width) var(--dk-border-field-focus-ring);
}
/* A dead control is not lifted. */
.dk-component-input:is([data-raised], [data-variant="raised"]) .dk-component-input__field:has(:is(input, textarea, select):disabled) {
  box-shadow: none;
}

/* ── data-variant="inset" (16 Oct): Select's inset look, the field sunk into
   the surface on the nested ramp with no edge. Handed to the field under the
   names every rule already reads, as raised does, so error, disabled and
   focus win exactly where they did; focus keeps its edge and ring. ── */
.dk-component-input[data-variant="inset"] .dk-component-input__field {
  --dk-surface-field-default: var(--dk-component-input-inset-surface);
  --dk-surface-field-hover: var(--dk-component-input-inset-surface-hover);
  --dk-border-field-default: var(--dk-component-input-inset-border);
  --dk-border-field-hover: var(--dk-component-input-inset-border);
  --dk-text-field-default: var(--dk-component-input-inset-text);
  --dk-text-field-placeholder: var(--dk-component-input-inset-placeholder);
  --dk-icon-field-default: var(--dk-component-input-inset-icon);
  --dk-text-field-affix: var(--dk-component-input-inset-affix);
  --dk-surface-field-action-hover: var(--dk-component-input-inset-action-hover);
  --dk-surface-field-action-active: var(--dk-component-input-inset-action-active);
  --dk-icon-field-subtle: var(--dk-component-input-inset-icon-subtle);
  --dk-icon-field-subtle-hover: var(--dk-component-input-inset-icon-subtle-hover);
}
/* Inside a status tone, the tone's icon for its glyphs. */
[data-tone="primary"] .dk-component-input[data-variant="inset"] .dk-component-input__field {
  --dk-icon-field-subtle: var(--dk-component-input-inset-icon-primary);
  --dk-icon-field-subtle-hover: var(--dk-component-input-inset-icon-primary);
}
[data-tone="success"] .dk-component-input[data-variant="inset"] .dk-component-input__field {
  --dk-icon-field-subtle: var(--dk-component-input-inset-icon-success);
  --dk-icon-field-subtle-hover: var(--dk-component-input-inset-icon-success);
}
[data-tone="error"] .dk-component-input[data-variant="inset"] .dk-component-input__field {
  --dk-icon-field-subtle: var(--dk-component-input-inset-icon-error);
  --dk-icon-field-subtle-hover: var(--dk-component-input-inset-icon-error);
}
[data-tone="warning"] .dk-component-input[data-variant="inset"] .dk-component-input__field {
  --dk-icon-field-subtle: var(--dk-component-input-inset-icon-warning);
  --dk-icon-field-subtle-hover: var(--dk-component-input-inset-icon-warning);
}
[data-tone="information"] .dk-component-input[data-variant="inset"] .dk-component-input__field {
  --dk-icon-field-subtle: var(--dk-component-input-inset-icon-information);
  --dk-icon-field-subtle-hover: var(--dk-component-input-inset-icon-information);
}
/* Its leading control follows the inset. The picker's trigger is a tone
   boundary, so its own hover and chevron reset to the page: a dark slab under
   the pointer on a dark tint. This component's tokens are declared on the
   trigger too, and re-resolve there inside that reset, so the inset's values
   are captured on the leading slot, outside it, and go in through the
   Select's own slots. */
.dk-component-input[data-variant="inset"][data-leading-control] .dk-component-input__leading {
  --_in-lead-hover: var(--dk-component-input-inset-surface-hover);
  --_in-lead-active: var(--dk-component-input-inset-surface-active);
  --_in-lead-text: var(--dk-component-input-inset-text);
  --_in-lead-chevron: var(--dk-component-input-inset-icon-subtle);
}
[data-tone="primary"] .dk-component-input[data-variant="inset"][data-leading-control] .dk-component-input__leading { --_in-lead-chevron: var(--dk-component-input-inset-icon-primary); }
[data-tone="success"] .dk-component-input[data-variant="inset"][data-leading-control] .dk-component-input__leading { --_in-lead-chevron: var(--dk-component-input-inset-icon-success); }
[data-tone="error"] .dk-component-input[data-variant="inset"][data-leading-control] .dk-component-input__leading { --_in-lead-chevron: var(--dk-component-input-inset-icon-error); }
[data-tone="warning"] .dk-component-input[data-variant="inset"][data-leading-control] .dk-component-input__leading { --_in-lead-chevron: var(--dk-component-input-inset-icon-warning); }
[data-tone="information"] .dk-component-input[data-variant="inset"][data-leading-control] .dk-component-input__leading { --_in-lead-chevron: var(--dk-component-input-inset-icon-information); }
.dk-component-input[data-variant="inset"][data-leading-control] .dk-component-input__leading .dk-component-select__trigger {
  --_sel-surface-hover: var(--_in-lead-hover);
  --_sel-surface-active: var(--_in-lead-active);
  --_sel-value: var(--_in-lead-text);
  --_sel-chevron: var(--_in-lead-chevron);
  --_sel-chevron-hover: var(--_in-lead-chevron);
}

/* ── THE LEADING GLYPH TINTS ON FOCUS ───────────────────────────────────────
   Search bar's magnifier went primary when the bar took focus, and it is the
   one piece of character that component had which Input did not. Kept, and
   widened to every leading slot rather than scoped to data-raised: tying an
   icon's colour to whether a field has a shadow is a coupling nobody would
   guess, and a leading icon brightening as you focus the field is a good
   affordance on any field, not only a prominent one.

   The trailing slot is deliberately NOT included. It holds actions, and those
   carry their own hover, press and focus states already; a second thing
   changing colour underneath them says the pointer is on both. */
.dk-component-input__field:has(:is(input, textarea, select):focus-visible) .dk-component-input__leading {
  color: var(--dk-border-field-focus);
}
/* AND ONE RUNG ON HOVER, which the bar also did. The field itself already moves
   its border and its fill on hover; leaving the glyph alone made it the one
   part of the box that did not respond. --dk-icon-field-hover is the field
   palette's own hover rung, the pair of the --dk-icon-field-default the slot
   rests on, so it steps with the level and escapes a status tone like the rest
   of the palette.
   The guard is a copy of the field's own, for the same three reasons: a dead
   control does not respond, focus outranks hover, and a pointer on an action is
   not a pointer on the field. */
@media (hover: hover) {
  .dk-component-input__field:hover:not(:has(:is(input, textarea, select):disabled, :is(input, textarea, select):focus-visible, .dk-component-input__action:hover)) .dk-component-input__leading {
    color: var(--dk-icon-field-hover);
  }
}

/* Slots. Both take anything: an icon, a unit, a currency mark, or a button. */
.dk-component-input__leading,
.dk-component-input__trailing {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  color: var(--dk-text-field-affix);
  font-size: var(--_input-font-size);
  line-height: var(--_input-line-height);
}
.dk-component-input__leading > svg, .dk-component-input__leading > i,
.dk-component-input__trailing > svg, .dk-component-input__trailing > i {
  width: var(--_input-slot-icon-size); height: var(--_input-slot-icon-size); display: block;
}
/* ── THE LEADING GLYPH IS QUIETER THAN THE AFFIX, AND EASES ─────────────────
   Set on the glyph rather than the slot, so a text affix ("$", "kg") keeps the
   affix colour and the slot rules above: the glyph's own colour beats the one
   it would otherwise inherit. Rest and hover read the field palette's subtle
   rungs; focus keeps the primary tint the slot already had.

   IT ANIMATES TO THE COLOUR rather than snapping, on the field's own duration
   token, so reduced motion zeroes it with the border and the fill. The
   selectors are the slot rules' own, which keeps the guards identical: a dead
   control does not respond, focus outranks hover, and a pointer on an action is
   not a pointer on the field. */
.dk-component-input__leading > :is(svg, i) {
  color: var(--dk-component-input-leading-icon-color);
  transition: color var(--dk-motion-state-duration) var(--dk-motion-state-easing);
}
@media (hover: hover) {
  .dk-component-input__field:hover:not(:has(:is(input, textarea, select):disabled, :is(input, textarea, select):focus-visible, .dk-component-input__action:hover)) .dk-component-input__leading > :is(svg, i) {
    color: var(--dk-component-input-leading-icon-color-hover);
  }
}
.dk-component-input__field:has(:is(input, textarea, select):focus-visible) .dk-component-input__leading > :is(svg, i) {
  color: var(--dk-component-input-leading-icon-color-focus);
}

/* Sizes. Each rung moves the box AND the type together, 38/44/52 against
   14/16/18. Spending the slot above is what keeps the affixes in step.
   There is deliberately no [data-size="medium"] rule: medium IS the base rule,
   so writing the attribute out and omitting it land on the same declarations.
   The value is named and documented all the same, because Button names its
   middle rung and a developer should not have to discover that one component
   spells the middle size and another leaves a hole where it should be. */
.dk-component-input[data-size="small"] .dk-component-input__field {
  min-height: var(--dk-component-input-small-height);
  --_input-slot-icon-size: var(--dk-component-input-small-slot-icon-size);
  --_input-font-size: var(--dk-component-input-small-font-size);
  --_input-line-height: var(--dk-component-input-small-line-height);
}
.dk-component-input[data-size="large"] .dk-component-input__field {
  min-height: var(--dk-component-input-large-height);
  /* A token rather than the property, so the rule that sets padding to 0 for a
     leading control still wins where it applies, and its halves read the
     wider edge through the same name. */
  --dk-component-input-padding-inline: var(--dk-component-input-large-padding-inline);
  --_input-slot-icon-size: var(--dk-component-input-large-slot-icon-size);
  --_input-font-size: var(--dk-component-input-large-font-size);
  --_input-line-height: var(--dk-component-input-large-line-height);
}

.dk-component-input__field input,
.dk-component-input__field textarea,
.dk-component-input__field select {
  width: 100%; padding: 0; background: transparent; border: 0; outline: none;
  font-family: var(--dk-font-family-primary);
  font-size: var(--_input-font-size);
  line-height: var(--_input-line-height);
  font-weight: var(--dk-component-input-font-weight);
  color: var(--dk-text-field-default);
}
/* Its own token too, for the same reason the border has one, and it lands on
   the same rung pairing: see mapped/text.css. Three borrowed tokens each failed
   differently, the last of them by CLIMBING with the surface level until a hint
   read like a value someone had typed in grey. */
.dk-component-input__field input::placeholder,
.dk-component-input__field textarea::placeholder { color: var(--dk-text-field-placeholder); }
/* THE BROWSER'S OWN CLEAR BUTTON, hidden. Chrome and Safari draw a cancel
   glyph inside a type="search" control once it holds a value, and this component ships its own clear button with real hover, active and focus states, so
   leaving the native one gives a search field TWO X icons side by side.
   Reported from a browser with a screenshot; it does not render headless,
   which is why no gate here caught it.
   -webkit-appearance: none on the INPUT does not remove it, which is the
   trap: the cancel button is a pseudo-element with its own appearance, and
   it has to be addressed directly. Both properties plus display, because
   the prefixed one is what currently ships and the standard one is what
   will. */
.dk-component-input__field input[type="search"]::-webkit-search-cancel-button,
.dk-component-input__field input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* select: pointer cursor; keep the native chevron */
.dk-component-input__field:has(select) { cursor: pointer; }
.dk-component-input__field select { cursor: pointer; }
/* textarea (multiline): let the field grow and pad vertically rather than center */
.dk-component-input__field:has(textarea) { align-items: stretch; min-height: 0; padding-top: 10px; padding-bottom: 10px; }
.dk-component-input__field textarea { resize: vertical; min-height: 56px; }

/* ERROR IS aria-invalid, NOT A CLASS. The red border and the screen-reader
   state are then the same fact and cannot drift: you cannot style the error
   without announcing it. This also retires the last BEM-style modifier classes
   in a kit that uses attributes everywhere else. */
/* A textarea too: this keyed on input alone, so an invalid textarea never turned red (found building Text area, 30 Sep). */
.dk-component-input__field:has(:is(input, textarea)[aria-invalid="true"]) { border-color: var(--dk-border-field-error); }
.dk-component-input__field:has(:is(input, textarea)[aria-invalid="true"]):has(:is(input, textarea, select):focus-visible) {
  border-color: var(--dk-border-field-error-focus);
  box-shadow: 0 0 0 var(--dk-component-input-focus-ring-width) var(--dk-border-field-error-ring);
}
/* margin: 0 on both of these because they are <p>, and a <p> arrives with a UA
   margin-block of 1em. Inside this grid that does not collapse, it ADDS to the
   gap: measured 16 Sep, the 6px gap rendered 20px under the caption and 34px
   between caption and error. Every other text-bearing component in the kit
   zeroes it the same way (body, heading, hero, eyebrow, card, modal, alert,
   and divider, whose comment names the same UA rule on hr). */
.dk-component-input__error {
  margin: 0;
  font-family: var(--dk-font-family-primary);
  font-size: var(--dk-component-input-caption-font-size);
  line-height: var(--dk-component-input-caption-line-height);
  color: var(--dk-component-input-error-color);
}

/* ── The obscured font ───────────────────────────────────────────────────────
   Why this exists at all is in tokens.css beside the measurement: the bullets
   are a font glyph, so their size is whichever font wins, and a webfont that
   swaps in after first paint leaves a password field showing stale fallback
   metrics until it is focused.

   TWO SELECTORS, covering the two ways a field can be showing bullets.
   The first is any password control, reveal button or not. The second is a
   field that HAS a reveal toggle, which keeps the face steady across the
   toggle: revealing flips the control to type="text", so the first selector
   alone would drop back to Inter and the text would visibly change shape at
   the moment someone is trying to read it. Monospace is the better face for a
   revealed password anyway, telling l from 1 and O from 0 apart.
   Keyed off [data-input-reveal], which the React component now emits too. */
.dk-component-input__field input[type="password"],
.dk-component-input__field:has(.dk-component-input__action[data-input-reveal]) input {
  font-family: var(--dk-component-input-obscured-font-family);
}

/* ── Autofill ────────────────────────────────────────────────────────────────
   Chrome and Safari paint an autofilled control themselves: a pale blue fill and
   their own text colour, applied at a level an ordinary `background-color`
   declaration cannot beat, so the usual override does nothing. The field should
   look exactly as it always does and simply have a value in it.

   THE TRANSITION IS THE MECHANISM, not a decoration. Those engines ANIMATE the
   autofill background in, so a background-color transition long enough never to
   arrive means it never visibly lands, and the control stays genuinely
   transparent. That matters here more than it would elsewhere: the box
   underneath is .dk-component-input__field, which changes colour on hover, and
   the other common fix (an inset box-shadow painted over the fill) would freeze
   one colour and break that. Transparent follows the field for free.

   The text needs its own answer regardless. Autofilled text is painted through
   -webkit-text-fill-color, which outranks `color`, so the value would otherwise
   keep the engine's colour rather than ours. caret-color goes with it, since the
   caret follows the fill colour rather than `color`.

   TWO SEPARATE RULES, never one selector list. :autofill is the standard and
   :-webkit-autofill is what currently ships; a browser that does not recognise
   one of them drops the ENTIRE rule it appears in, so joining them with a comma
   would mean neither applies anywhere. Written apart, each engine takes the one
   it knows. The declarations are duplicated for that reason alone.

   Not verifiable in our headless gates: nothing can force the autofill state, so
   this is the one part of the component checked by hand in a real browser. */
.dk-component-input__field input:-webkit-autofill,
.dk-component-input__field textarea:-webkit-autofill,
.dk-component-input__field select:-webkit-autofill {
  transition: background-color 600000s 0s;
  -webkit-text-fill-color: var(--dk-text-field-default);
  caret-color: var(--dk-text-field-default);
}
.dk-component-input__field input:autofill,
.dk-component-input__field textarea:autofill,
.dk-component-input__field select:autofill {
  transition: background-color 600000s 0s;
  -webkit-text-fill-color: var(--dk-text-field-default);
  caret-color: var(--dk-text-field-default);
}
/* A disabled control keeps the disabled colour even when the browser has filled
   it, which the rules above would otherwise override. */
.dk-component-input__field input:-webkit-autofill:disabled,
.dk-component-input__field textarea:-webkit-autofill:disabled,
.dk-component-input__field select:-webkit-autofill:disabled {
  -webkit-text-fill-color: var(--dk-text-field-disabled);
}
.dk-component-input__field input:autofill:disabled,
.dk-component-input__field textarea:autofill:disabled,
.dk-component-input__field select:autofill:disabled {
  -webkit-text-fill-color: var(--dk-text-field-disabled);
}

/* disabled */
.dk-component-input__field:has(:is(input, textarea, select):disabled) {
  border-color: var(--dk-border-field-disabled); cursor: not-allowed;
}
/* NO PLACEHOLDER ON A DISABLED FIELD. A placeholder is an invitation to type,
   and a disabled control is refusing exactly that, so the hint is noise at best
   and misleading at worst. It cannot be removed from the DOM by CSS, so it is
   painted transparent; nothing is lost, because a placeholder is presentational
   and the label still carries the control's name. */
.dk-component-input__field input:disabled::placeholder,
.dk-component-input__field textarea:disabled::placeholder { color: transparent; }
/* The affixes go with it. A slot holds a currency mark, a unit or a glyph, all
   of which describe a field someone can fill in, so leaving them at full
   strength on a dead control makes it read half-alive. --dk-icon-field-disabled
   is the field palette's disabled rung, the pair of the --dk-text-field-disabled
   the control itself uses. Sets `color`, so a text affix and a currentColor
   glyph both follow.

   It replaced --dk-icon-disabled-on-field, which claimed in its own name to be
   tone-immune and was not: measured under a solid primary it resolved to
   primary-100 and under a subtle primary to primary-400, because it pointed at
   --dk-icon-disabled-subtle, which every tone remaps. The whole field palette
   now escapes the tone together, which is the only way this is true rather than
   asserted. */
.dk-component-input__field:has(:is(input, textarea, select):disabled) .dk-component-input__leading,
.dk-component-input__field:has(:is(input, textarea, select):disabled) .dk-component-input__trailing,
/* The glyph too, now that it carries a colour of its own: without this line it
   would keep its resting colour on a field that is refusing input. */
.dk-component-input__field:has(:is(input, textarea, select):disabled) .dk-component-input__leading > :is(svg, i) {
  color: var(--dk-icon-field-disabled);
}
.dk-component-input__field input:disabled,
.dk-component-input__field textarea:disabled,
.dk-component-input__field select:disabled { color: var(--dk-text-field-disabled); cursor: not-allowed; } /* the field palette: neutral inside a status tone, see tokens/mapped/field.css */

.dk-component-input__caption {
  margin: 0;
  font-family: var(--dk-font-family-primary);
  font-size: var(--dk-component-input-caption-font-size);
  line-height: var(--dk-component-input-caption-line-height);
  color: var(--dk-text-neutral-default);
}

/* ── In-field actions: reveal a password, clear a field ──────────────────────
   NOT the trailing slot. __trailing is static content, a unit or a currency
   mark, and it is not focusable. This is a real control: it takes focus, it
   carries its own accessible name, it sits in the natural tab order after the
   input, and it gets its own ring rather than lighting the field's. That
   separation is the reason the field's ring is :has(input:focus-visible) and
   not :focus-within.

   HELP IS NAMED "Help" AND DESCRIBED BY ITS TIP since 18 Sep. It used to carry
   the tip as its own aria-label, because the tooltip reached no screen reader
   and the name was the only route; the tooltip now sets aria-describedby on
   whatever it is attached to, so the split is the correct one.

   It wears the press behaviour Icon button and Alert's dismiss already share:
   transparent at rest, so it never reads as a second box inside the field, a
   fill on hover, one rung further plus scale(0.9) on press. */
.dk-component-input__action {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--dk-component-input-action-size);
  height: var(--dk-component-input-action-size);
  padding: 0; border: 0; background: none;
  color: var(--dk-icon-field-default);
  cursor: pointer;
  border-radius: var(--dk-component-input-action-radius);
  transition: background-color var(--dk-motion-state-duration) var(--dk-motion-state-easing), color var(--dk-motion-state-duration) var(--dk-motion-state-easing), transform var(--dk-motion-press-duration) var(--dk-motion-press-easing);
}
.dk-component-input__action svg,
.dk-component-input__action i {
  width: var(--dk-component-input-action-glyph-size);
  height: var(--dk-component-input-action-glyph-size);
  display: block;
}
.dk-component-input[data-size="small"] .dk-component-input__action {
  width: var(--dk-component-input-small-action-size);
  height: var(--dk-component-input-small-action-size);
}
.dk-component-input[data-size="small"] .dk-component-input__action svg,
.dk-component-input[data-size="small"] .dk-component-input__action i {
  width: var(--dk-component-input-small-action-glyph-size);
  height: var(--dk-component-input-small-action-glyph-size);
}
.dk-component-input[data-size="large"] .dk-component-input__action {
  width: var(--dk-component-input-large-action-size);
  height: var(--dk-component-input-large-action-size);
}
.dk-component-input[data-size="large"] .dk-component-input__action svg,
.dk-component-input[data-size="large"] .dk-component-input__action i {
  width: var(--dk-component-input-large-action-glyph-size);
  height: var(--dk-component-input-large-action-glyph-size);
}
@media (hover: hover) {
  .dk-component-input__action:hover:not(:disabled) {
    background-color: var(--dk-surface-field-action-hover);
    color: var(--dk-icon-field-hover);
  }
}
.dk-component-input__action:active:not(:disabled) {
  background-color: var(--dk-surface-field-action-active);
  transform: scale(0.9);
}
/* Its own ring, matching Icon button's, so focus lands on the control the
   keyboard is actually on rather than on the box around it. */
.dk-component-input__action:focus-visible:not(:disabled) {
  box-shadow: 0 0 0 var(--dk-component-input-focus-ring-width) var(--dk-border-field-focus-ring);
  outline: none;
}
.dk-component-input__action:disabled { cursor: not-allowed; color: var(--dk-icon-field-disabled); }

/* HELP IS AN ACTION, NOT A NEW PART, so it needs no rule of its own: a
   .dk-component-input__action carrying data-dk-tooltip is the whole component.
   It inherits the padded hit target, the hover fill, the press and the focus
   ring the reveal and clear buttons already have, and the tooltip is the kit's
   own, shown on hover AND on focus, which is what makes it reachable by
   keyboard and by tap where a hover-only tooltip would not be.

   WHERE IT SITS answers the question it raises: the field's order is leading,
   control, trailing, then actions. Trailing is content ABOUT THE VALUE, a unit
   or a currency code; an action is a control. They do not compete for the same
   place because they are not the same kind of thing, so a field can carry a
   leading $, a trailing AUD and a help icon at once.

   The reference implementation puts this inside the field too, but has to stop
   click propagation to keep the field from swallowing it. Ours does not: the
   field is a plain div with no click handler, verified by clicking the button
   and finding focus on the button.

   IT STAYS ENABLED ON A DISABLED FIELD, deliberately, and the disabled rules
   above mute only __leading and __trailing. A field somebody cannot fill in is
   often the one they most need explained. */

/* The reveal toggle carries BOTH glyphs and shows one, rather than having
   JavaScript swap an icon. aria-pressed is already the state a toggle button
   has to expose, so letting CSS read it means the picture and the announced
   state cannot disagree, and it works before behaviour.js runs or without it.
   The glyph lives inside a span because the icon libraries replace the <i>
   placeholder they are given and anything keyed off that element's own
   attributes would go with it. */
.dk-component-input__action[aria-pressed="false"] [data-when="shown"],
.dk-component-input__action[aria-pressed="true"] [data-when="hidden"] { display: none; }
.dk-component-input__action[hidden] { display: none; }

/* ── data-appearance="sentence": the field set inside a line of text ─────────
   For a trigger that reads as part of a sentence ("Every fortnight starting
   on [Thu 2 Oct 2025]"): Date picker's calendar entry and Day of month's
   field wear it; Select's trigger has the same look in its own collection.
   The root sits in the line and hugs its value. The label stays as the
   trigger's name but is not shown: the sentence is what a reader sees. ── */
.dk-component-input[data-appearance="sentence"] {
  display: inline-grid; width: auto; max-width: 100%;
  vertical-align: middle; position: relative;
  margin-inline: var(--dk-component-input-sentence-margin-inline);
}
/* The field may shrink below its value: a grid item's minimum is otherwise its
   whole unwrapped text, which widened the page rather than ending in an
   ellipsis. */
.dk-component-input[data-appearance="sentence"] > .dk-component-input__field { min-width: 0; }
.dk-component-input[data-appearance="sentence"] > .dk-component-input__label { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* THE CAPTION AND THE ERROR LEAVE THE LINE: under the trigger they made its
   box taller than the line and dropped the words around it. They still
   describe the trigger to a screen reader, an error still turns the border,
   and anything to read belongs under the sentence, as the design's info box
   is. */
.dk-component-input[data-appearance="sentence"] > :is(.dk-component-input__caption, .dk-component-input__error) { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* THE REST LOOK AT THE LOWEST WEIGHT, so every state rule above (hover,
   focus, error, disabled) still wins over it, as it does over the default. */
:where(.dk-component-input[data-appearance="sentence"]) .dk-component-input__field {
  background: var(--dk-component-input-sentence-surface);
  border-color: var(--dk-component-input-sentence-border);
  padding: 0 var(--dk-component-input-sentence-padding-inline);
}
/* THE TYPE AT THE SIZE RULES' WEIGHT, later: the size rules set the same
   slots, and the sentence's type is what a sentence trigger must read. */
.dk-component-input[data-appearance="sentence"] .dk-component-input__field {
  --_input-font-size: var(--dk-component-input-sentence-font-size);
  --_input-line-height: var(--dk-component-input-sentence-line-height);
  --_input-font-weight: var(--dk-component-input-sentence-font-weight);
  --_input-text: var(--dk-component-input-sentence-text);
}
.dk-component-input[data-appearance="sentence"][data-size="small"] .dk-component-input__field {
  --_input-font-size: var(--dk-component-input-sentence-small-font-size);
  --_input-line-height: var(--dk-component-input-sentence-small-line-height);
}
.dk-component-input[data-appearance="sentence"][data-size="large"] .dk-component-input__field {
  --_input-font-size: var(--dk-component-input-sentence-large-font-size);
  --_input-line-height: var(--dk-component-input-sentence-large-line-height);
}

/* ════════════════════════════════ drift-kit:layer components/code-input/styles.css ════════════════════════════════ */
/* ── Code input ──────────────────────────────────────────────────────────────
   A verification code, a PIN, a voucher: N characters, one per box.

   ONE REAL INPUT, AND THE BOXES ARE DRAWN. This is the whole design decision,
   and it is the opposite of how the component library builds the same control,
   so it is worth writing down what N real inputs cost. Six <input>s are six tab
   stops and six accessible names to invent; the label can only be associated
   with one of them, so the other five announce as "edit text, blank". Six of
   them claim autocomplete="one-time-code", so the SMS code lands in whichever
   one has focus and the component spends a branch cleaning up after it. The
   value lives in six places, so a form holding one code keeps six strings, a
   copy of them, and an effect to reconcile the two. And paste works only
   because the component intercepts it, which means select-all, drag, undo and a
   password manager's fill do not.

   One input has none of that. One value, one label, one tab stop, one autofill
   target, and paste, undo, select-all and SMS autofill are native because there
   is nothing in their way. The control is rendered transparent and the cells,
   which are spans, show what it holds.

   WHAT IT COSTS, both of them. The caret is ours to draw, since a transparent
   input takes its own with it. And the caret goes where the value ends rather
   than where the pointer landed, because placing it mid-value would leave the
   cells showing one thing and the control agreeing to another; behaviour.js
   puts it at the end on focus, which is what a code field wants anyway.

   IT DEGRADES INTO A TEXT FIELD. Everything the cells need is written by
   behaviour.js, so without it there would be an invisible control and nothing
   else. So the transparent presentation is gated on [data-ready], which that
   file sets once the cells exist: with no script the control is an ordinary
   bordered field with a maxlength, which is a code field that is merely plain.

   Markup:
     <div class="dk-component-code-input" data-cells="6">
       <label class="dk-component-code-input__label" for="otp">Verification code</label>
       <div class="dk-component-code-input__field">
         <input class="dk-component-code-input__control" id="otp"
                inputmode="numeric" autocomplete="one-time-code" />
         <span class="dk-component-code-input__cells" aria-hidden="true"></span>
       </div>
       <p class="dk-component-code-input__caption" id="otp-caption">…</p>
     </div>

   Error is aria-invalid="true" on the control, disabled is [disabled] on it,
   and sizes are data-size="small" or "large" on the root: the same three
   spellings Input uses, so a form does not change vocabulary halfway down.
   data-label-size="small" is Input's too: the label a rung smaller.
   data-width="cells" makes the field no wider than its cells' row, capped at
   its column, where it is otherwise the column's full width; the row's width
   for six cells is a token per size on the page (the brand and density
   scopes), so a sibling can match it. ──

   Purpose: A verification code, a PIN, a voucher. N characters, one per box,
     with one real input underneath them.

   Anatomy:
     div.dk-component-code-input[data-cells="1..12"][data-size="small|large"]?[data-group="N"]?[data-charset="alphanumeric"]?[data-mask]?[data-placeholder]?[data-label-size="small"]?[data-width="cells"]?[data-ready]?
       label.__label
       div.__field
         input.__control            (one real input)
         span.__cells[aria-hidden] > span.__cell[data-group-end]?   (written by the runtime; square at any width)
       p.__caption? | p.__error?
   */
.dk-component-code-input { display: grid; width: 100%; gap: var(--dk-component-code-input-gap); }
/* A small label, Input's: the overline's md and more air under it. */
.dk-component-code-input[data-label-size="small"] {
  --dk-component-code-input-label-font-size: var(--dk-component-code-input-small-label-font-size);
  --dk-component-code-input-label-line-height: var(--dk-component-code-input-small-label-line-height);
  --dk-component-code-input-gap: var(--dk-component-code-input-small-label-gap);
}
.dk-component-code-input[hidden] { display: none; }

/* ── Sized to its cells (data-width="cells") ────────────────────────────────
   The row is count cells at the size's rung and one gap fewer between them;
   min() keeps it inside a narrower column, where the cells shrink and stay
   square as they always do. The rung is read on the root here (the field's
   slots are the field's), a large field medium on a phone as the field is
   (in the phone block below). */
.dk-component-code-input { --_code-row-cell: var(--dk-component-code-input-cell-size); }
.dk-component-code-input[data-size="small"] { --_code-row-cell: var(--dk-component-code-input-small-cell-size); }
.dk-component-code-input[data-size="large"] { --_code-row-cell: var(--dk-component-code-input-large-cell-size); }
.dk-component-code-input[data-cells="1"] { --dk-component-code-input-cells: 1; }
.dk-component-code-input[data-cells="2"] { --dk-component-code-input-cells: 2; }
.dk-component-code-input[data-cells="3"] { --dk-component-code-input-cells: 3; }
.dk-component-code-input[data-cells="4"] { --dk-component-code-input-cells: 4; }
.dk-component-code-input[data-cells="5"] { --dk-component-code-input-cells: 5; }
.dk-component-code-input[data-cells="7"] { --dk-component-code-input-cells: 7; }
.dk-component-code-input[data-cells="8"] { --dk-component-code-input-cells: 8; }
.dk-component-code-input[data-cells="9"] { --dk-component-code-input-cells: 9; }
.dk-component-code-input[data-cells="10"] { --dk-component-code-input-cells: 10; }
.dk-component-code-input[data-cells="11"] { --dk-component-code-input-cells: 11; }
.dk-component-code-input[data-cells="12"] { --dk-component-code-input-cells: 12; }
/* With data-group the row has wider seams: the runtime writes how many
   (--_code-seams, a group end per seam, 10 Nov 2026), each the group gap
   where a cell gap would be. */
.dk-component-code-input:where([data-width="cells"]) {
  width: min(100%, calc(var(--dk-component-code-input-cells) * var(--_code-row-cell) + (var(--dk-component-code-input-cells) - 1) * var(--dk-component-code-input-cell-gap)
    + var(--_code-seams, 0) * (var(--dk-component-code-input-group-gap) - var(--dk-component-code-input-cell-gap))));
}

/* The label is Input's: an Eyebrow at size large, uppercase, bold and tracked,
   reading its own tokens for the reason tokens.css gives. */
.dk-component-code-input__label {
  font-family: var(--dk-component-code-input-label-font-family);
  text-transform: uppercase;
  font-weight: var(--dk-component-code-input-label-font-weight);
  font-size: var(--dk-component-code-input-label-font-size);
  line-height: var(--dk-component-code-input-label-line-height);
  letter-spacing: var(--dk-component-code-input-label-letter-spacing);
  color: var(--dk-text-neutral-default);
}
/* WARNING, not error, and Input's note says why: the asterisk marks a field
   somebody still has to fill, which is a prompt rather than a failure. */
.dk-component-code-input__label .dk-component-req { color: var(--dk-text-warning-default); margin-left: 2px; }

/* THE SIZE SLOTS LIVE ON THE FIELD, not on the root, and Input's comment has
   the reason in full: a custom property declared on an element always beats one
   inherited from its parent whatever the specificity, so a default on the root
   plus a default on the field would make the root's unreachable. Every writer
   on one element lets ordinary specificity settle it. */
.dk-component-code-input__field {
  position: relative;
  display: flex;
  width: 100%;
  --_code-cell-size: var(--dk-component-code-input-cell-size);
  --_code-font-size: var(--dk-component-code-input-font-size);
  --_code-line-height: var(--dk-component-code-input-line-height);
}
.dk-component-code-input[data-size="small"] .dk-component-code-input__field {
  --_code-cell-size: var(--dk-component-code-input-small-cell-size);
  --_code-font-size: var(--dk-component-code-input-small-font-size);
  --_code-line-height: var(--dk-component-code-input-small-line-height);
}
.dk-component-code-input[data-size="large"] .dk-component-code-input__field {
  --_code-cell-size: var(--dk-component-code-input-large-cell-size);
  --_code-font-size: var(--dk-component-code-input-large-font-size);
  --_code-line-height: var(--dk-component-code-input-large-line-height);
}
/* ON A PHONE, LARGE IS MEDIUM. Its 56px cells and h3 type suit a desktop
   page but crowd a phone's width, so below the breakpoint Select and Modal
   use it steps down a rung. Small and medium already sit on a phone. */
@media (max-width: 768px) {
  .dk-component-code-input[data-size="large"] .dk-component-code-input__field {
    --_code-cell-size: var(--dk-component-code-input-cell-size);
    --_code-font-size: var(--dk-component-code-input-font-size);
    --_code-line-height: var(--dk-component-code-input-line-height);
  }
  .dk-component-code-input[data-size="large"] { --_code-row-cell: var(--dk-component-code-input-cell-size); }
}

/* ── The control, before the cells exist: an ordinary field ─────────────────
   This is what renders with no script, and it is a real fallback rather than a
   gesture at one: border, fill, radius and type are the field's, so the page
   shows a control someone can type a code into. */
.dk-component-code-input__control {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--_code-cell-size);
  padding: 0 var(--dk-component-code-input-padding-inline);
  font-family: var(--dk-component-code-input-font-family);
  font-size: var(--_code-font-size);
  line-height: var(--_code-line-height);
  font-weight: var(--dk-component-code-input-font-weight);
  color: var(--dk-text-field-default);
  background: var(--dk-surface-field-default);
  border: var(--dk-component-code-input-border-width) solid var(--dk-border-field-plain-default);
  border-radius: var(--dk-component-code-input-radius);
  outline: none;
}
.dk-component-code-input__control:focus-visible {
  border-color: var(--dk-border-field-focus);
  box-shadow: 0 0 0 var(--dk-component-code-input-focus-ring-width) var(--dk-border-field-focus-ring);
}

/* ── The control, once the cells exist: the hit area and nothing else ───────
   opacity, not visibility and not display: both of those would take it out of
   the accessibility tree and out of the tab order, and this element IS the
   control. Transparent, it still takes focus, still announces its label and
   caption, still receives the SMS code, and still owns the caret position the
   cells are drawn from. It spans the field so a click anywhere along the row
   lands on it, which is also why the cells take no pointer events. */
.dk-component-code-input[data-ready] .dk-component-code-input__control {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  opacity: 0;
  z-index: 1;
  cursor: text;
}
.dk-component-code-input[data-ready] .dk-component-code-input__control:disabled { cursor: not-allowed; }

.dk-component-code-input__cells { display: none; }
.dk-component-code-input[data-ready] .dk-component-code-input__cells {
  display: flex;
  align-items: flex-start;
  width: 100%;
  gap: var(--dk-component-code-input-cell-gap);
  pointer-events: none;
}

/* THE CELL SHRINKS BUT STAYS SQUARE. flex-basis is the rung and max-width holds
   it there, so six cells in a wide column are 48px each and eight cells on a
   360px phone give up width together rather than running off the edge. A fixed
   width could not do the second and a fluid one could not do the first. Its
   height is its width (aspect-ratio, 10 Nov 2026), so a shrunk cell is still a
   square; it was the rung's height on a narrower box until then. */
.dk-component-code-input__cell {
  box-sizing: border-box;
  position: relative;
  flex: 1 1 var(--_code-cell-size);
  max-width: var(--_code-cell-size);
  min-width: 0;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--dk-component-code-input-font-family);
  font-size: var(--_code-font-size);
  line-height: var(--_code-line-height);
  font-weight: var(--dk-component-code-input-font-weight);
  color: var(--dk-text-field-default);
  background: var(--dk-surface-field-default);
  border: var(--dk-component-code-input-border-width) solid var(--dk-border-field-plain-default);
  border-radius: var(--dk-component-code-input-radius);
  transition: border-color var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              box-shadow var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              background-color var(--dk-motion-state-duration) var(--dk-motion-state-easing);
}
/* The extra air after a group, added to the gap already between the cells so
   data-group works at any count without CSS knowing what the count is:
   behaviour.js marks the cell that ends a group and this widens that one seam. */
.dk-component-code-input__cell[data-group-end] {
  /* Logical, not margin-right: this is the end of a group in reading order, and
     the kit writes physical sides only where it means a physical side. */
  margin-inline-end: calc(var(--dk-component-code-input-group-gap) - var(--dk-component-code-input-cell-gap));
}

/* ONE HIT TARGET, ONE HOVER. Every pointer event lands on the control, which
   covers the row, so a cell's own :hover could never match. The field asks the
   control instead and all the cells answer together, which is the truth of it:
   there is one control here, drawn as six boxes. */
@media (hover: hover) {
  .dk-component-code-input__field:has(.dk-component-code-input__control:hover:not(:disabled):not(:focus-visible)) .dk-component-code-input__cell {
    border-color: var(--dk-border-field-hover);
    background: var(--dk-surface-field-hover);
  }
}

/* THE RING IS ON THE LIVE CELL, not around the row. A focus indicator has to
   say where typing will land, and on a control drawn as six boxes that is one
   box. behaviour.js marks it while the control has focus and removes the mark
   on blur, so the field at rest carries no live cell at all. */
.dk-component-code-input__cell[data-active] {
  border-color: var(--dk-border-field-focus);
  box-shadow: 0 0 0 var(--dk-component-code-input-focus-ring-width) var(--dk-border-field-focus-ring);
  /* Above its neighbours so the ring is not clipped by the next cell's fill. */
  z-index: 1;
}

/* THE CARET, ours because the real one went transparent with the control that
   owns it. Only in an EMPTY live cell: once a character is there the cell shows
   it, and a bar over a digit is a cursor claiming a position the value does not
   have. The last cell of a full code keeps the ring and drops the bar. */
.dk-component-code-input__cell[data-active]:not([data-filled])::after {
  content: "";
  position: absolute;
  width: var(--dk-component-code-input-caret-width);
  height: var(--dk-component-code-input-caret-height);
  border-radius: var(--dk-component-code-input-caret-width);
  background: var(--dk-component-code-input-caret-color);
  animation: dk-code-input-caret var(--dk-component-code-input-caret-blink-duration) linear infinite;
}
@keyframes dk-code-input-caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ── The placeholder: a character in every empty box ────────────────────────
   NOT ON THE LIVE CELL, because the caret is already there and both are drawn
   dead centre. Everywhere else it stands where the character will go, which is
   what a placeholder is for: it says how many characters this wants and what
   kind, before anything is typed.

   It is a pseudo-element rather than the control's own placeholder attribute,
   which would be one string laid out as a line of invisible text and would show
   through nothing: the control is transparent, and the boxes are what anyone
   reads. Drawn here, it also cannot be typed over or selected. */
.dk-component-code-input[data-placeholder] .dk-component-code-input__cell:not([data-filled]):not([data-active])::before {
  content: var(--dk-component-code-input-placeholder-char);
  color: var(--dk-component-code-input-placeholder-color);
}
/* NO PLACEHOLDER ON A DISABLED FIELD, which is Input's rule and Input's reason:
   a placeholder is an invitation to type and a disabled control is refusing
   exactly that, so the hint is noise at best and a broken promise at worst.
   SCOPED TO THE EMPTY CELLS, because the same pseudo-element draws the mask's
   dot, and a dot stands for a character somebody already entered rather than
   an invitation to enter one: a disabled PIN keeps its dots. */
.dk-component-code-input[data-placeholder] .dk-component-code-input__field:has(.dk-component-code-input__control:disabled) .dk-component-code-input__cell:not([data-filled])::before {
  content: none;
}

/* ── Masked, for a PIN rather than a code texted in the clear ───────────────
   THE CHARACTER IS NEVER WRITTEN INTO THE PAGE. behaviour.js leaves a masked
   cell empty and marks it filled, and the dot is drawn here, so the PIN is not
   sitting in the DOM under a transparent colour where a selection or a devtools
   pane would hand it over. It also means the dots do not depend on which font
   won the race for U+2022, which Input's obscured-font note measured at two
   thirds the height and a third the width between Inter and the fallback.
   behaviour.js also switches the control to type="password" under this
   attribute, so what a screen reader announces and what the page draws are the
   same decision rather than two. */
.dk-component-code-input[data-mask] .dk-component-code-input__cell[data-filled]::before {
  content: "";
  width: var(--dk-component-code-input-mask-dot-size);
  height: var(--dk-component-code-input-mask-dot-size);
  border-radius: 50%;
  background: currentColor;
}

/* ── Error, disabled ────────────────────────────────────────────────────────
   ERROR IS aria-invalid, NOT A CLASS, the way it is on Input: the red boxes and
   the announced state are then one fact and cannot drift. */
.dk-component-code-input__field:has(.dk-component-code-input__control[aria-invalid="true"]) .dk-component-code-input__cell {
  border-color: var(--dk-border-field-error);
}
.dk-component-code-input__field:has(.dk-component-code-input__control[aria-invalid="true"]) .dk-component-code-input__cell[data-active] {
  border-color: var(--dk-border-field-error-focus);
  box-shadow: 0 0 0 var(--dk-component-code-input-focus-ring-width) var(--dk-border-field-error-ring);
}
.dk-component-code-input__field:has(.dk-component-code-input__control:disabled) .dk-component-code-input__cell {
  border-color: var(--dk-border-field-disabled);
  color: var(--dk-text-field-disabled);
}

/* margin: 0 because these are <p> and a <p> arrives with a UA margin-block of
   1em, which inside this grid adds to the gap rather than collapsing into it.
   Input's note has the measurement. */
.dk-component-code-input__caption {
  margin: 0;
  font-family: var(--dk-font-family-primary);
  font-size: var(--dk-component-code-input-caption-font-size);
  line-height: var(--dk-component-code-input-caption-line-height);
  color: var(--dk-text-neutral-default);
}
.dk-component-code-input__error {
  margin: 0;
  font-family: var(--dk-font-family-primary);
  font-size: var(--dk-component-code-input-caption-font-size);
  line-height: var(--dk-component-code-input-caption-line-height);
  color: var(--dk-component-code-input-error-color);
}

/* ══════════════════════════════════ drift-kit:layer components/textarea/styles.css ══════════════════════════════════ */
/* ── Text area ──────────────────────────────────────────────────────────────
   Several lines of text, as a field of its own rather than an Input with a
   textarea in it: it needs a resting height in rows, growth, a resize rule and
   a counter, and none of those belong to a one-line field.

   Purpose: Several lines of text: notes, messages, comments. Input's field,
     sized in rows, with auto-grow, a character counter and a submit shortcut.

   Anatomy:
     div.dk-component-textarea[data-size][data-resize][data-autogrow][data-max-rows]
                              [data-limit][data-count][data-submit-shortcut]
       label.dk-component-textarea__label
       div.dk-component-textarea__field > textarea.dk-component-textarea__control
       p.dk-component-textarea__caption      optional
       span.dk-component-textarea__count     runtime, when there is a limit or data-count
       p.dk-component-textarea__error        optional
   The root is a two-column grid: the label and field span it, the caption
   sits left and the counter right on the same line, the error under both.
   ── */
.dk-component-textarea {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--dk-component-textarea-count-gap);
  row-gap: var(--dk-component-textarea-gap);
  width: 100%;
  --_ta-font-size: var(--dk-component-textarea-font-size);
  --_ta-line-height: var(--dk-component-textarea-line-height);
  --_ta-padding-block: var(--dk-component-textarea-padding-block);
  --_ta-padding-inline: var(--dk-component-textarea-padding-inline);
}
.dk-component-textarea[hidden] { display: none; }
.dk-component-textarea[data-size="small"] {
  --_ta-font-size: var(--dk-component-textarea-small-font-size);
  --_ta-line-height: var(--dk-component-textarea-small-line-height);
  --_ta-padding-block: var(--dk-component-textarea-small-padding-block);
}
.dk-component-textarea[data-size="large"] {
  --_ta-font-size: var(--dk-component-textarea-large-font-size);
  --_ta-line-height: var(--dk-component-textarea-large-line-height);
  --_ta-padding-block: var(--dk-component-textarea-large-padding-block);
  --_ta-padding-inline: var(--dk-component-textarea-large-padding-inline);
}
.dk-component-textarea > :is(.dk-component-textarea__label, .dk-component-textarea__field, .dk-component-textarea__error) { grid-column: 1 / -1; }
.dk-component-textarea__caption { grid-column: 1; order: 1; }
.dk-component-textarea__count { grid-column: 2; justify-self: end; order: 2; }
/* ORDER, NOT SOURCE: the runtime writes the counter, and React can add a
   caption or an error after it, so where each sits cannot depend on when it
   arrived. The status is absolutely positioned and takes no cell. */
.dk-component-textarea__error { order: 3; }
/* No caption: the counter still sits right, under the field's right edge. */
.dk-component-textarea:not(:has(.dk-component-textarea__caption)) .dk-component-textarea__count { grid-column: 1 / -1; }

.dk-component-textarea__label {
  font-family: var(--dk-component-textarea-label-font-family);
  text-transform: uppercase;
  font-weight: var(--dk-component-textarea-label-font-weight);
  font-size: var(--dk-component-textarea-label-font-size);
  line-height: var(--dk-component-textarea-label-line-height);
  letter-spacing: var(--dk-component-textarea-label-letter-spacing);
  color: var(--dk-text-neutral-default);
}
/* Warning, not error, for the reason Input gives: a required field is a
   prompt, not yet a failure. */
.dk-component-textarea__label .dk-component-req { color: var(--dk-text-warning-default); margin-left: var(--dk-spacing-0-5); }

/* ── The field: Input's look, from the same palette ── */
.dk-component-textarea__field {
  box-sizing: border-box;
  display: flex;
  background: var(--dk-surface-field-default);
  /* Input's plain field border (28 Oct), under the name every rule reads. */
  --dk-border-field-default: var(--dk-border-field-plain-default);
  border: var(--dk-component-textarea-border-width) solid var(--dk-border-field-default);
  border-radius: var(--dk-component-textarea-radius);
  cursor: text;
  transition: border-color var(--dk-motion-state-duration) var(--dk-motion-state-easing), box-shadow var(--dk-motion-state-duration) var(--dk-motion-state-easing), background-color var(--dk-motion-state-duration) var(--dk-motion-state-easing);
}
@media (hover: hover) {
  .dk-component-textarea__field:hover:not(:has(.dk-component-textarea__control:disabled, .dk-component-textarea__control:focus-visible, .dk-component-textarea__control:read-only, .dk-component-textarea__control[aria-invalid="true"])) {
    border-color: var(--dk-border-field-hover);
    background: var(--dk-surface-field-hover);
  }
}
.dk-component-textarea__field:has(.dk-component-textarea__control:focus-visible) {
  border-color: var(--dk-border-field-focus);
  box-shadow: 0 0 0 var(--dk-component-textarea-focus-ring-width) var(--dk-border-field-focus-ring);
}
.dk-component-textarea__field:has(.dk-component-textarea__control[aria-invalid="true"]) { border-color: var(--dk-border-field-error); }
.dk-component-textarea__field:has(.dk-component-textarea__control[aria-invalid="true"]:focus-visible) {
  border-color: var(--dk-border-field-error-focus);
  box-shadow: 0 0 0 var(--dk-component-textarea-focus-ring-width) var(--dk-border-field-error-ring);
}
.dk-component-textarea__field:has(.dk-component-textarea__control:disabled) { border-color: var(--dk-border-field-disabled); cursor: not-allowed; }

/* ── The control. The padding is on the textarea itself, so the scroll area
   includes it and the resize grip sits in the field's corner. ── */
.dk-component-textarea__control {
  display: block; flex: 1 1 auto; width: 100%; min-width: 0;
  box-sizing: border-box;
  margin: 0; border: 0; outline: none; background: transparent;
  padding: var(--_ta-padding-block) var(--_ta-padding-inline);
  border-radius: inherit;
  font-family: var(--dk-component-textarea-font-family);
  font-weight: var(--dk-component-textarea-font-weight);
  font-size: var(--_ta-font-size);
  line-height: var(--_ta-line-height);
  color: var(--dk-text-field-default);
  resize: vertical;
  /* At least one row, however it is resized. */
  min-height: calc(var(--_ta-line-height) + 2 * var(--_ta-padding-block));
}
.dk-component-textarea__control::placeholder { color: var(--dk-text-field-placeholder); opacity: 1; }
.dk-component-textarea__control:disabled { color: var(--dk-text-field-disabled); cursor: not-allowed; -webkit-text-fill-color: var(--dk-text-field-disabled); }
.dk-component-textarea__control:disabled::placeholder { color: transparent; }
.dk-component-textarea[data-resize="none"] .dk-component-textarea__control { resize: none; }

/* ── Auto-grow: from its rows to its max rows, then it scrolls. field-sizing
   does it without script where it exists; behaviour.js measures otherwise.
   The bounds are rows of the rung's line box plus the padding, written as
   custom properties by the runtime from rows and data-max-rows. ── */
.dk-component-textarea[data-autogrow] .dk-component-textarea__control {
  resize: none;
  field-sizing: content;
  min-height: calc(var(--_ta-rows, 3) * var(--_ta-line-height) + 2 * var(--_ta-padding-block));
  max-height: calc(var(--_ta-max-rows, 8) * var(--_ta-line-height) + 2 * var(--_ta-padding-block));
  overflow-y: auto;
}

/* ── Caption, counter, error. margin: 0 because <p> brings a UA margin. ── */
.dk-component-textarea__caption,
.dk-component-textarea__error,
.dk-component-textarea__count {
  margin: 0;
  font-family: var(--dk-font-family-primary);
  font-size: var(--dk-component-textarea-caption-font-size);
  line-height: var(--dk-component-textarea-caption-line-height);
  color: var(--dk-component-textarea-caption-color);
}
.dk-component-textarea__error { color: var(--dk-component-textarea-error-color); }
.dk-component-textarea__count {
  color: var(--dk-component-textarea-count-color);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color var(--dk-motion-state-duration) var(--dk-motion-state-easing);
}
.dk-component-textarea__count[data-state="warning"] { color: var(--dk-component-textarea-count-warning-color); }
.dk-component-textarea__count[data-state="over"] { color: var(--dk-component-textarea-count-over-color); }

/* The counter's words for a screen reader: read, never seen. */
.dk-component-textarea__status {
  position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ═══════════════════════════════════ drift-kit:layer components/stepper/styles.css ═══════════════════════════════════ */
/* ── Stepper ────────────────────────────────────────────────────────────────
   Where someone is in a process with a known number of steps, and what is
   left. An ordered list in a named nav: the list says how many steps and in
   what order, the nav makes it a landmark, aria-current="step" says which
   one is now, and each step says its state in words (behaviour.js), so the
   state is never colour alone.

   Purpose: Where someone is in a process with a known number of steps, and
     what is left.

   Anatomy (data-variant: numbered, dots, segments or inline):
     nav.dk-component-stepper[aria-label][data-variant][data-orientation][data-labels=hidden][data-size][data-free]
       ol.dk-component-stepper__list
         li.dk-component-stepper__step[data-state][data-error][data-optional]
           button|span.dk-component-stepper__target   (a button where a step can be revisited)
             span.__indicator  span.__text > span.__label + span.__description?
           div.__content?      (vertical: shown under the current step)
   ── */
.dk-component-stepper {
  display: block;
  /* A stepper spans what it sits in, like any block: in a flex row or an
     auto-width box it would otherwise shrink to its content. */
  width: 100%;
  font-family: var(--dk-component-stepper-font-family);
  --_s-size: var(--dk-component-stepper-indicator-size);
  /* The disc as drawn, its size slot plus what a thicker border tier added
     to its ring on both sides: the ring grows outward and the number or the
     tick inside keeps its room (8 Nov, Julio; at bold a 32px disc held 16). */
  --_s-grow: calc(2 * (var(--dk-component-stepper-indicator-border-width) - var(--dk-component-stepper-indicator-border-width-base)));
  --_s-disc: calc(var(--_s-size) + var(--_s-grow));
  --_s-number: var(--dk-component-stepper-number-font-size);
  --_s-label-size: var(--dk-component-stepper-label-font-size);
  --_s-label-line: var(--dk-component-stepper-label-line-height);
  --_s-pad-block: var(--dk-component-stepper-target-padding);
  --_s-pad-inline: var(--dk-component-stepper-target-padding);
}
/* A stepper you can click through (completed steps are buttons) gives each
   target a bigger hover and press area. Set on the root, so every connector
   and alignment that leans on the padding moves with it. */
.dk-component-stepper:has(button.dk-component-stepper__target) {
  --_s-pad-block: var(--dk-component-stepper-target-padding-block-interactive);
  --_s-pad-inline: var(--dk-component-stepper-target-padding-inline-interactive);
}
.dk-component-stepper[data-size="small"] {
  --_s-size: var(--dk-component-stepper-small-indicator-size);
  --_s-number: var(--dk-component-stepper-small-number-font-size);
  --_s-label-size: var(--dk-component-stepper-small-label-font-size);
  --_s-label-line: var(--dk-component-stepper-small-label-line-height);
}
.dk-component-stepper[data-size="large"] {
  --_s-size: var(--dk-component-stepper-large-indicator-size);
  --_s-number: var(--dk-component-stepper-large-number-font-size);
  --_s-label-size: var(--dk-component-stepper-large-label-font-size);
  --_s-label-line: var(--dk-component-stepper-large-label-line-height);
}
.dk-component-stepper__list { display: flex; margin: 0; padding: 0; list-style: none; }

/* ── A step, and the slots its state writes ── */
.dk-component-stepper__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  --_s-surface: var(--dk-component-stepper-upcoming-surface);
  --_s-border: var(--dk-component-stepper-upcoming-border);
  --_s-text: var(--dk-component-stepper-upcoming-text);
  --_s-label: var(--dk-component-stepper-label-color-upcoming);
  --_s-weight: var(--dk-component-stepper-label-font-weight);
  --_s-fill: 0%;
}
.dk-component-stepper__step[data-state="complete"] {
  --_s-surface: var(--dk-component-stepper-complete-surface);
  --_s-border: var(--dk-component-stepper-complete-border);
  --_s-text: var(--dk-component-stepper-complete-icon);
  --_s-label: var(--dk-component-stepper-label-color-complete);
  --_s-fill: 100%;
}
.dk-component-stepper__step[data-state="current"] {
  --_s-surface: var(--dk-component-stepper-current-surface);
  --_s-border: var(--dk-component-stepper-current-border);
  --_s-text: var(--dk-component-stepper-current-text);
  --_s-label: var(--dk-component-stepper-label-color);
  --_s-weight: var(--dk-component-stepper-label-font-weight-current);
}
.dk-component-stepper__step[data-state="upcoming"] { --_s-fill: 0%; }
/* Moving forward, the step the line runs into lights up as the fill reaches
   it (behaviour.js sets data-arriving until it has). Segments have no line. */
.dk-component-stepper:not([data-variant="segments"]) .dk-component-stepper__step[data-arriving] {
  --_s-delay: var(--dk-component-stepper-arrive-delay);
}
/* Error wins the colours whatever the state: a step in error that is also
   current is both, and says both. */
.dk-component-stepper__step[data-error] {
  --_s-surface: var(--dk-component-stepper-error-surface);
  --_s-border: var(--dk-component-stepper-error-border);
  --_s-text: var(--dk-component-stepper-error-text);
  --_s-label: var(--dk-component-stepper-error-label);
}

/* ── The target: a button where a step can be revisited, a span otherwise ── */
.dk-component-stepper__target {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dk-component-stepper-gap);
  max-width: 100%;
  margin: 0;
  padding: var(--_s-pad-block) var(--_s-pad-inline);
  border: 0;
  border-radius: var(--dk-component-stepper-target-radius);
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
}
button.dk-component-stepper__target { cursor: pointer; }
button.dk-component-stepper__target:disabled { cursor: default; }
button.dk-component-stepper__target:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--dk-component-stepper-focus-ring-width) var(--dk-component-stepper-focus-ring);
}
/* A step you can go back to: its row tints and its words darken on hover,
   one step deeper while pressed, and a completed disc steps with them. */
button.dk-component-stepper__target {
  transition: background-color var(--dk-component-stepper-state-duration) var(--dk-component-stepper-easing);
}
@media (hover: hover) {
  button.dk-component-stepper__target:hover:not(:disabled) {
    --_s-label: var(--dk-component-stepper-label-color-hover);
    background: var(--dk-component-stepper-target-surface-hover);
  }
}
button.dk-component-stepper__target:active:not(:disabled) {
  --_s-label: var(--dk-component-stepper-label-color-hover);
  background: var(--dk-component-stepper-target-surface-active);
}
@media (hover: hover) {
  .dk-component-stepper__step[data-state="complete"]:not([data-error]) > button.dk-component-stepper__target:hover:not(:disabled) {
    --_s-surface: var(--dk-component-stepper-complete-surface-hover);
    --_s-border: var(--dk-component-stepper-complete-border-hover);
    --_s-text: var(--dk-component-stepper-complete-icon-hover);
  }
}
.dk-component-stepper__step[data-state="complete"]:not([data-error]) > button.dk-component-stepper__target:active:not(:disabled) {
  --_s-surface: var(--dk-component-stepper-complete-surface-active);
  --_s-border: var(--dk-component-stepper-complete-border-active);
  --_s-text: var(--dk-component-stepper-complete-icon-active);
}

/* The current step's solid indicator steps the same way, so a step you can
   click answers the pointer wherever it is in the flow. */
@media (hover: hover) {
  .dk-component-stepper__step[data-state="current"]:not([data-error]) > button.dk-component-stepper__target:hover:not(:disabled) {
    --_s-surface: var(--dk-component-stepper-current-surface-hover);
    --_s-border: var(--dk-component-stepper-current-surface-hover);
  }
}
.dk-component-stepper__step[data-state="current"]:not([data-error]) > button.dk-component-stepper__target:active:not(:disabled) {
  --_s-surface: var(--dk-component-stepper-current-surface-active);
  --_s-border: var(--dk-component-stepper-current-surface-active);
}
.dk-component-stepper__indicator {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--_s-disc);
  height: var(--_s-disc);
  border-radius: 50%;
  border: var(--dk-component-stepper-indicator-border-width) solid var(--_s-border);
  background: var(--_s-surface);
  color: var(--_s-text);
  font-size: var(--_s-number);
  font-weight: var(--dk-component-stepper-number-font-weight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--dk-component-stepper-state-duration) var(--dk-component-stepper-easing) var(--_s-delay, 0s),
              border-color var(--dk-component-stepper-state-duration) var(--dk-component-stepper-easing) var(--_s-delay, 0s),
              color var(--dk-component-stepper-state-duration) var(--dk-component-stepper-easing) var(--_s-delay, 0s);
}
.dk-component-stepper__indicator svg { width: var(--dk-component-stepper-icon-size); height: var(--dk-component-stepper-icon-size); }

/* The step arriving (data-arriving, above) pulses as it lights up. */
.dk-component-stepper:not([data-variant="segments"]) .dk-component-stepper__step[data-arriving] > .dk-component-stepper__target > .dk-component-stepper__indicator {
  animation: dk-motion-pulse var(--dk-component-stepper-arrive-pulse-duration) var(--dk-component-stepper-arrive-pulse-easing) var(--dk-component-stepper-arrive-delay);
}

.dk-component-stepper__text { display: flex; flex-direction: column; gap: var(--dk-component-stepper-text-gap); min-width: 0; }
.dk-component-stepper__label {
  font-size: var(--_s-label-size);
  line-height: var(--_s-label-line);
  font-weight: var(--_s-weight);
  color: var(--_s-label);
  overflow-wrap: anywhere;
  transition: color var(--dk-component-stepper-state-duration) var(--dk-component-stepper-easing) var(--_s-delay, 0s);
}
.dk-component-stepper__description,
.dk-component-stepper__optional {
  font-size: var(--dk-component-stepper-description-font-size);
  line-height: var(--dk-component-stepper-description-line-height);
  color: var(--dk-component-stepper-description-color);
}
.dk-component-stepper__optional { color: var(--dk-component-stepper-optional-color); }

/* ── The connector to the next step: a track that fills primary as the step
   completes, the fill sliding along it. Drawn from just after this
   indicator to just before the next. ── */
.dk-component-stepper__step:not(:last-child)::after {
  content: '';
  /* Above a later step's hover background (each step is positioned, so a later
     one paints over an earlier one's line), below every indicator. */
  z-index: 1;
  position: absolute;
  top: calc(var(--_s-pad-block) + var(--_s-disc) / 2 - var(--dk-component-stepper-connector-thickness) / 2);
  left: calc(50% + var(--_s-disc) / 2);
  right: calc(-50% + var(--_s-disc) / 2);
  height: var(--dk-component-stepper-connector-thickness);
  border-radius: var(--dk-component-stepper-connector-thickness);
  background: linear-gradient(var(--dk-component-stepper-connector-fill), var(--dk-component-stepper-connector-fill)) no-repeat left center / var(--_s-fill) 100%,
              var(--dk-component-stepper-connector-track);
  transition: background-size var(--dk-component-stepper-fill-duration) var(--dk-component-stepper-easing);
}

/* Labels hidden: a quiet rail; the words stay for a screen reader. */
.dk-component-stepper[data-labels="hidden"] .dk-component-stepper__text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── Vertical: the wizard layout. The text sits beside the indicator; the line
   runs from the bottom of this indicator to the top of the next, touching
   both (2 Oct); and the current step's content sits INSIDE the step, right
   of that line, its left edge on the labels' (3 Oct). --_s-ind-offset drops an indicator smaller than the
   label's line (a dot) onto the middle of the label's first line; a taller
   one (a number) drops the text instead. ── */
.dk-component-stepper[data-orientation="vertical"] {
  --_s-ind-offset: max(0px, (var(--_s-label-line) - var(--_s-disc)) / 2);
}
.dk-component-stepper[data-orientation="vertical"] .dk-component-stepper__list { flex-direction: column; }
.dk-component-stepper[data-orientation="vertical"] .dk-component-stepper__step {
  flex: none;
  align-items: stretch;
  text-align: start;
  padding-block-end: var(--dk-component-stepper-vertical-step-gap);
}
.dk-component-stepper[data-orientation="vertical"] .dk-component-stepper__step:last-child { padding-block-end: 0; }
.dk-component-stepper[data-orientation="vertical"] .dk-component-stepper__target { flex-direction: row; align-items: flex-start; align-self: flex-start; text-align: start; }
.dk-component-stepper[data-orientation="vertical"] .dk-component-stepper__indicator { margin-block-start: var(--_s-ind-offset); }
.dk-component-stepper[data-orientation="vertical"] .dk-component-stepper__text { padding-block-start: max(0px, (var(--_s-disc) - var(--_s-label-line)) / 2); }
.dk-component-stepper[data-orientation="vertical"] .dk-component-stepper__step:not(:last-child)::after {
  top: calc(var(--_s-pad-block) + var(--_s-ind-offset) + var(--_s-disc));
  bottom: calc(-1 * (var(--_s-pad-block) + var(--_s-ind-offset)));
  left: calc(var(--_s-pad-inline) + var(--_s-disc) / 2 - var(--dk-component-stepper-connector-thickness) / 2);
  right: auto;
  width: var(--dk-component-stepper-connector-thickness);
  height: auto;
  background: linear-gradient(var(--dk-component-stepper-connector-fill), var(--dk-component-stepper-connector-fill)) no-repeat center top / 100% var(--_s-fill),
              var(--dk-component-stepper-connector-track);
}
.dk-component-stepper__content { display: none; }
.dk-component-stepper[data-orientation="vertical"] .dk-component-stepper__step[data-state="current"] > .dk-component-stepper__content {
  display: block;
  margin-inline-start: calc(var(--_s-pad-inline) + var(--_s-disc) + var(--dk-component-stepper-gap));
  padding-block-start: var(--dk-component-stepper-content-gap);
}

/* ── Dots: a quiet rail. No numbers, no glyphs: the colour and the hidden
   state text carry it; current is solid with a ring. ── */
.dk-component-stepper[data-variant="dots"] { --_s-size: var(--dk-component-stepper-dot-size); --_s-grow: 0px; }
.dk-component-stepper[data-variant="dots"] .dk-component-stepper__indicator { font-size: 0; border: 0; }
.dk-component-stepper[data-variant="dots"] .dk-component-stepper__indicator svg { display: none; }
/* Hovering or pressing a completed dot or segment keeps it primary and steps
   it on the check's ramp: the neutral hover steps are for the disc, and on
   these the colour IS the step. */
@media (hover: hover) {
  .dk-component-stepper:is([data-variant="dots"], [data-variant="segments"]) .dk-component-stepper__step[data-state="complete"]:not([data-error]) > button.dk-component-stepper__target:hover:not(:disabled) {
    --_s-surface: var(--dk-component-stepper-complete-icon-hover);
  }
}
.dk-component-stepper:is([data-variant="dots"], [data-variant="segments"]) .dk-component-stepper__step[data-state="complete"]:not([data-error]) > button.dk-component-stepper__target:active:not(:disabled) {
  --_s-surface: var(--dk-component-stepper-complete-icon-active);
}
/* No icon to carry it, so a completed dot takes the icon's primary. */
.dk-component-stepper[data-variant="dots"] .dk-component-stepper__step[data-state="complete"] { --_s-surface: var(--dk-component-stepper-complete-icon); }
.dk-component-stepper[data-variant="dots"] .dk-component-stepper__step[data-state="upcoming"] { --_s-surface: var(--dk-component-stepper-connector-track); }
.dk-component-stepper[data-variant="dots"] .dk-component-stepper__step[data-state="current"] { --_s-surface: var(--dk-component-stepper-current-border); }
.dk-component-stepper[data-variant="dots"] .dk-component-stepper__step[data-state="current"] .dk-component-stepper__indicator {
  box-shadow: 0 0 0 var(--dk-component-stepper-dot-ring-width) var(--dk-component-stepper-upcoming-surface),
              0 0 0 calc(2 * var(--dk-component-stepper-dot-ring-width)) var(--dk-component-stepper-current-border);
}
.dk-component-stepper[data-variant="dots"] .dk-component-stepper__step[data-error] { --_s-surface: var(--dk-component-stepper-error-border); }

/* ── Segments: a progress bar cut into steps, each label under its segment ── */
.dk-component-stepper[data-variant="segments"] .dk-component-stepper__list { gap: var(--dk-component-stepper-segment-gap); }
.dk-component-stepper[data-variant="segments"] .dk-component-stepper__step { align-items: stretch; text-align: start; }
.dk-component-stepper[data-variant="segments"] .dk-component-stepper__step::after { display: none; }
.dk-component-stepper[data-variant="segments"] .dk-component-stepper__target { align-items: stretch; text-align: start; padding-inline: 0; }
.dk-component-stepper[data-variant="segments"] .dk-component-stepper__indicator {
  width: 100%;
  height: var(--dk-component-stepper-segment-thickness);
  border: 0;
  border-radius: var(--dk-component-stepper-segment-radius);
  font-size: 0;
}
.dk-component-stepper[data-variant="segments"] .dk-component-stepper__indicator svg { display: none; }
.dk-component-stepper[data-variant="segments"] .dk-component-stepper__step[data-state="complete"] { --_s-surface: var(--dk-component-stepper-complete-icon); }
.dk-component-stepper[data-variant="segments"] .dk-component-stepper__step[data-state="upcoming"] { --_s-surface: var(--dk-component-stepper-connector-track); }
.dk-component-stepper[data-variant="segments"] .dk-component-stepper__step[data-state="current"] { --_s-surface: var(--dk-component-stepper-current-border); }
.dk-component-stepper[data-variant="segments"] .dk-component-stepper__step[data-error] { --_s-surface: var(--dk-component-stepper-error-border); }

/* Vertical segments: each piece is a bar down the whole step, beside its
   words and its content, so a label never has to fit the width of a
   horizontal bar; a step keeps a least length when the labels are hidden. */
.dk-component-stepper[data-variant="segments"][data-orientation="vertical"] .dk-component-stepper__step {
  min-height: var(--dk-component-stepper-segment-length);
  padding-block-end: 0;
  padding-inline-start: max(0px, calc(var(--dk-component-stepper-segment-thickness) + var(--dk-component-stepper-gap) - var(--_s-pad-inline)));
}
.dk-component-stepper[data-variant="segments"][data-orientation="vertical"] .dk-component-stepper__target { padding-inline: var(--_s-pad-inline); }
.dk-component-stepper[data-variant="segments"][data-orientation="vertical"] .dk-component-stepper__indicator {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--dk-component-stepper-segment-thickness);
  height: auto;
  margin: 0;
}
.dk-component-stepper[data-variant="segments"][data-orientation="vertical"] .dk-component-stepper__text { padding-block-start: 0; }
.dk-component-stepper[data-variant="segments"][data-orientation="vertical"] .dk-component-stepper__step[data-state="current"] > .dk-component-stepper__content {
  margin-inline-start: var(--_s-pad-inline);
  padding-block: var(--dk-component-stepper-segment-content-gap-start) var(--dk-component-stepper-segment-content-gap-end);
}

/* ── Inline: the words beside each number and centred on it, the steps in a
   row with space between them and no connector. The component library's
   look. Vertical inline is a plain list of steps. ── */
.dk-component-stepper[data-variant="inline"] .dk-component-stepper__list {
  flex-wrap: wrap;
  /* The gap gives back whatever padding a clickable target adds, so the space
     between one step's words and the next number is the same either way. */
  gap: max(0px, calc(var(--dk-component-stepper-inline-gap) + 2 * var(--dk-component-stepper-target-padding) - 2 * var(--_s-pad-inline)));
}
.dk-component-stepper[data-variant="inline"] .dk-component-stepper__step { flex: 0 0 auto; flex-direction: row; text-align: start; }
.dk-component-stepper[data-variant="inline"] .dk-component-stepper__step:not(:last-child)::after { display: none; }
.dk-component-stepper[data-variant="inline"] .dk-component-stepper__target { flex-direction: row; align-items: center; text-align: start; }
.dk-component-stepper[data-variant="inline"][data-orientation="vertical"] .dk-component-stepper__list { gap: 0; }
.dk-component-stepper[data-variant="inline"][data-orientation="vertical"] .dk-component-stepper__step { flex-direction: column; }
.dk-component-stepper[data-variant="inline"][data-orientation="vertical"] .dk-component-stepper__text { padding-block-start: 0; }

/* ── Words for a screen reader ── */
.dk-component-stepper__state,
.dk-component-stepper__status {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* ── Narrow (a phone): behaviour.js sets data-narrow when the stepper is
   narrower than the narrow token. A container query would need size
   containment, and that made the stepper ignore its own content and collapse
   to nothing in any shrink-to-fit layout.
   3 Oct: EVERY VARIANT stays horizontal and keeps only the current step's
   words, in place. The others are clipped, not removed, so each step still
   has its name for a screen reader. The words that are left may use the room
   the hidden ones gave up, up to the narrow-label-max token: centred on the
   current indicator, from the left edge on the first step and to the right
   edge on the last, so they never run off the stepper. (A stepper with
   data-narrow-orientation="vertical" goes vertical instead, and keeps every
   label: behaviour.js swaps its orientation.) ── */
.dk-component-stepper[data-narrow]:not([data-orientation="vertical"]) .dk-component-stepper__step:not([data-state="current"]) .dk-component-stepper__text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.dk-component-stepper[data-narrow]:not([data-orientation="vertical"]) .dk-component-stepper__step[data-state="current"] .dk-component-stepper__text {
  width: max-content;
  max-width: var(--dk-component-stepper-narrow-label-max);
}
/* Inline, narrow: one row, a tighter gap, and the current step takes the room
   the others do not need, its words wrapping inside it. */
.dk-component-stepper[data-narrow][data-variant="inline"]:not([data-orientation="vertical"]) .dk-component-stepper__list {
  flex-wrap: nowrap;
  gap: max(0px, calc(var(--dk-component-stepper-narrow-inline-gap) + 2 * var(--dk-component-stepper-target-padding) - 2 * var(--_s-pad-inline)));
}
.dk-component-stepper[data-narrow][data-variant="inline"]:not([data-orientation="vertical"]) .dk-component-stepper__step[data-state="current"] {
  flex: 1 1 auto;
  min-width: 0;
}
.dk-component-stepper[data-narrow][data-variant="inline"]:not([data-orientation="vertical"]) .dk-component-stepper__step[data-state="current"] .dk-component-stepper__text {
  width: auto;
  max-width: none;
}
.dk-component-stepper[data-narrow]:not([data-orientation="vertical"]):not([data-variant="inline"]) .dk-component-stepper__step[data-state="current"]:first-child .dk-component-stepper__text {
  align-self: flex-start;
  text-align: start;
}
.dk-component-stepper[data-narrow]:not([data-orientation="vertical"]):not([data-variant="inline"]) .dk-component-stepper__step[data-state="current"]:last-child .dk-component-stepper__text {
  align-self: flex-end;
  text-align: end;
}

/* ════════════════════════════════ drift-kit:layer components/pagination/styles.css ════════════════════════════════ */
/* ── Pagination ──────────────────────────────────────────────────────────────
   Where a long list is in pages, and the way to the others. The runtime draws
   the arrows and the page list from data-page and data-pages (or data-total
   with data-page-size); see behaviour.js.

   Purpose: Where a long list is in pages, and the way to the others: a page
     list between two arrows, with an optional count of what is showing and a
     rows select.

   Anatomy:
     nav.dk-component-pagination[data-page][data-pages|data-total][data-page-size]
                                [data-size][data-href]           (aria-label)
       p.dk-component-pagination__summary          (optional, filled by the runtime)
       div.dk-component-pagination__rows           (optional)
         span.dk-component-pagination__rows-label
         div.dk-component-select[data-size]        (a kit Select: 20, 50, 100)
       div.dk-component-pagination__pages          (drawn by the runtime)
         button.dk-component-icon-button.__prev    (ghost, the pagination's size)
         ol.dk-component-pagination__list
           li > button.__page[aria-current="page"] (or a.__page in link mode)
           li > span.__gap                         (aria-hidden)
         span.dk-component-pagination__status      ("Page 3 of 12", phone only)
         button.dk-component-icon-button.__next

   ON A PHONE the page list gives way to "Page 3 of 12" between the arrows,
   and the summary drops under the controls. */
.dk-component-pagination {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--dk-component-pagination-section-gap);
  font-family: var(--dk-component-pagination-font-family);
}
.dk-component-pagination,
.dk-component-pagination[data-size="medium"] {
  --_pg-pad: var(--dk-component-pagination-padding);
  --_pg-line: var(--dk-component-pagination-line-height);
  --_pg-font: var(--dk-component-pagination-font-size);
  --_pg-radius: var(--dk-component-pagination-border-radius);
}
.dk-component-pagination[data-size="small"] {
  --_pg-pad: var(--dk-component-pagination-small-padding);
  --_pg-line: var(--dk-component-pagination-small-line-height);
  --_pg-font: var(--dk-component-pagination-small-font-size);
  --_pg-radius: var(--dk-component-pagination-small-border-radius);
}
.dk-component-pagination[data-size="large"] {
  --_pg-pad: var(--dk-component-pagination-large-padding);
  --_pg-line: var(--dk-component-pagination-large-line-height);
  --_pg-font: var(--dk-component-pagination-large-font-size);
  --_pg-radius: var(--dk-component-pagination-large-border-radius);
}

.dk-component-pagination__summary {
  margin: 0;
  margin-inline-end: auto;
  color: var(--dk-component-pagination-summary-text);
  font-size: var(--dk-component-pagination-summary-font-size);
  line-height: var(--dk-component-pagination-summary-line-height);
  font-variant-numeric: tabular-nums;
}
.dk-component-pagination__rows {
  display: flex; align-items: center;
  gap: var(--dk-component-pagination-gap);
  color: var(--dk-component-pagination-summary-text);
  font-size: var(--dk-component-pagination-summary-font-size);
  line-height: var(--dk-component-pagination-summary-line-height);
}
/* Without a summary the rows and pages still sit at the end. */
.dk-component-pagination__rows:first-child { margin-inline-start: auto; }
.dk-component-pagination__pages:first-child { margin-inline-start: auto; }

.dk-component-pagination__pages,
.dk-component-pagination__list {
  display: flex; align-items: center;
  gap: var(--dk-component-pagination-gap);
}
.dk-component-pagination__list { list-style: none; margin: 0; padding: 0; }
.dk-component-pagination__list > li { display: flex; }

/* ── A page: the icon button's box, with a number in it. */
.dk-component-pagination__page,
.dk-component-pagination__gap {
  box-sizing: border-box;
  display: inline-grid; place-items: center;
  min-inline-size: calc(var(--_pg-line) + 2 * var(--_pg-pad));
  block-size: calc(var(--_pg-line) + 2 * var(--_pg-pad));
  padding: 0 calc(var(--_pg-pad) / 2);
  font-size: var(--_pg-font);
  line-height: var(--_pg-line);
  font-variant-numeric: tabular-nums;
}
.dk-component-pagination__page {
  --_pg-bg: transparent;
  --_pg-bg-hover: var(--dk-component-pagination-page-surface-hover);
  --_pg-bg-active: var(--dk-component-pagination-page-surface-active);
  --_pg-text: var(--dk-component-pagination-page-text);
  --_pg-text-hover: var(--dk-component-pagination-page-text-hover);
  margin: 0; border: 0;
  border-radius: var(--_pg-radius);
  background-color: var(--_pg-bg);
  color: var(--_pg-text);
  font-family: inherit;
  font-weight: var(--dk-component-pagination-page-font-weight);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              color var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              box-shadow var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              transform var(--dk-motion-press-duration) var(--dk-motion-press-easing);
}
.dk-component-pagination__page[aria-current="page"] {
  --_pg-bg: var(--dk-component-pagination-current-surface);
  --_pg-bg-hover: var(--dk-component-pagination-current-surface-hover);
  --_pg-bg-active: var(--dk-component-pagination-current-surface-active);
  --_pg-text: var(--dk-component-pagination-current-text);
  --_pg-text-hover: var(--dk-component-pagination-current-text);
  font-weight: var(--dk-component-pagination-current-font-weight);
}
@media (hover: hover) {
  .dk-component-pagination__page:hover:not(:active):not(:focus-visible):not([data-pseudo-class]) {
    background-color: var(--_pg-bg-hover);
    color: var(--_pg-text-hover);
  }
}
.dk-component-pagination__page:active:not([data-pseudo-class]) {
  background-color: var(--_pg-bg-active);
  color: var(--_pg-text-hover);
  transform: scale(var(--dk-component-pagination-press-scale));
}
.dk-component-pagination__page:focus-visible:not([data-pseudo-class]) {
  outline: none;
  box-shadow: 0 0 0 var(--dk-component-pagination-focus-ring-width) var(--dk-component-pagination-focus-ring);
}
/* Forced states for the docs, the convention Button and the icon button use. */
.dk-component-pagination__page[data-pseudo-class="hover"] { background-color: var(--_pg-bg-hover); color: var(--_pg-text-hover); }
.dk-component-pagination__page[data-pseudo-class="active"] { background-color: var(--_pg-bg-active); color: var(--_pg-text-hover); transform: scale(var(--dk-component-pagination-press-scale)); }
.dk-component-pagination__page[data-pseudo-class="focus"] { box-shadow: 0 0 0 var(--dk-component-pagination-focus-ring-width) var(--dk-component-pagination-focus-ring); }

.dk-component-pagination__gap {
  color: var(--dk-component-pagination-gap-text);
  user-select: none;
}

/* The phone's "Page 3 of 12": hidden until the list gives way to it. */
.dk-component-pagination__status {
  display: none;
  color: var(--dk-component-pagination-page-text);
  font-size: var(--_pg-font);
  line-height: var(--_pg-line);
  font-weight: var(--dk-component-pagination-page-font-weight);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .dk-component-pagination__list { display: none; }
  .dk-component-pagination__status { display: block; }
  .dk-component-pagination__pages { margin-inline-start: auto; }
  .dk-component-pagination__summary {
    order: 1;
    flex-basis: 100%;
    margin-inline-end: 0;
  }
}

/* ════════════════════════════════ drift-kit:layer components/breadcrumb/styles.css ════════════════════════════════ */
/* ── Breadcrumb ──────────────────────────────────────────────────────────────
   Where this page sits, and the way back up. Styles only: no runtime (a menu
   is the kit's Dropdown, and its runtime opens it).

   Purpose: Where this page sits, and the way back up: the pages above it as
     quiet pills, its own name last.

   Anatomy:
     nav.dk-component-breadcrumb[data-size]                (aria-label="Breadcrumb")
       div.dk-component-breadcrumb__arrows                 (optional, role="group")
         button.dk-component-breadcrumb__arrow             (aria-label="Back", then "Forward")
       ol.dk-component-breadcrumb__list
         li.dk-component-breadcrumb__item
           a.dk-component-breadcrumb__link                 (a page above this one: a pill)
             span.dk-component-breadcrumb__icon            (optional, aria-hidden)
             span.dk-component-breadcrumb__label
         li.dk-component-breadcrumb__item                  (a page with related pages)
           span.dk-component-breadcrumb__pill              (the link and its chevron, one pill)
             a.dk-component-breadcrumb__link | span.dk-component-breadcrumb__current
             div.dk-component-dropdown.dk-component-breadcrumb__more
               button.dk-component-breadcrumb__trigger.dk-component-dropdown__trigger
               div.dk-component-menu.dk-component-dropdown__menu
         li.dk-component-breadcrumb__item                  (the pages folded away)
           div.dk-component-dropdown.dk-component-breadcrumb__more
             button.dk-component-breadcrumb__ellipsis.dk-component-dropdown__trigger  ("3 more pages")
             div.dk-component-menu.dk-component-dropdown__menu
         li.dk-component-breadcrumb__item                  (the last)
           span.dk-component-breadcrumb__current[aria-current="page"][title]

   PAST FOUR ITEMS the middle folds into the "..." pill: the first, the
   "...", the last two. React's Breadcrumb does it (maxItems); in HTML the
   folded item is written as above.

   SEPARATORS ARE CSS, a slash before every item but the first, with an
   empty alt text so a screen reader reads the pages and not the slashes.

   ON A PHONE the trail is one back link to the parent, "‹ Customers": the
   other items are hidden and the parent's slash turns into a back chevron. */
.dk-component-breadcrumb {
  --_bc-font: var(--dk-component-breadcrumb-font-size);
  --_bc-line: var(--dk-component-breadcrumb-line-height);
  --_bc-pad-block: var(--dk-component-breadcrumb-padding-block);
  --_bc-pad-inline: var(--dk-component-breadcrumb-padding-inline);
  --_bc-icon: var(--dk-component-breadcrumb-icon-size);
  --_bc-stroke: var(--dk-component-breadcrumb-icon-stroke);
  --_bc-arrow: var(--dk-component-breadcrumb-arrow-size);
  --_bc-arrow-icon: var(--dk-component-breadcrumb-arrow-icon-size);
  display: flex;
  align-items: center;
  font-family: var(--dk-component-breadcrumb-font-family);
  font-size: var(--_bc-font);
  line-height: var(--_bc-line);
  min-inline-size: 0;
}
.dk-component-breadcrumb[data-size="small"] {
  --_bc-font: var(--dk-component-breadcrumb-small-font-size);
  --_bc-line: var(--dk-component-breadcrumb-small-line-height);
  --_bc-pad-block: var(--dk-component-breadcrumb-small-padding-block);
  --_bc-pad-inline: var(--dk-component-breadcrumb-small-padding-inline);
  --_bc-icon: var(--dk-component-breadcrumb-small-icon-size);
  --_bc-stroke: var(--dk-component-breadcrumb-small-icon-stroke);
  --_bc-arrow: var(--dk-component-breadcrumb-small-arrow-size);
  --_bc-arrow-icon: var(--dk-component-breadcrumb-small-arrow-icon-size);
}
.dk-component-breadcrumb__list {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--dk-component-breadcrumb-gap);
  min-inline-size: 0;
  list-style: none; margin: 0; padding: 0;
}
.dk-component-breadcrumb__item {
  display: inline-flex; align-items: center;
  gap: var(--dk-component-breadcrumb-gap);
  min-inline-size: 0;
}
.dk-component-breadcrumb__item + .dk-component-breadcrumb__item::before {
  content: "/";
  content: "/" / "";
  flex: none;
  display: inline-grid; place-items: center;
  inline-size: var(--dk-component-breadcrumb-separator-size);
  color: var(--_bc-sep, var(--dk-component-breadcrumb-separator-color));
}

/* ── A page above this one: a pill. Hover and press step down the nested
   ramp and the words and icon a rung at a time; a press shrinks it. The
   menu chevron is a button of its own and does the same. ── */
.dk-component-breadcrumb__link,
.dk-component-breadcrumb__ellipsis {
  --_bc-ink: var(--dk-component-breadcrumb-link-color);
  display: inline-flex; align-items: center;
  gap: var(--dk-component-breadcrumb-icon-gap);
  min-inline-size: 0;
  padding: var(--_bc-pad-block) var(--_bc-pad-inline);
  border-radius: var(--dk-component-breadcrumb-radius);
  color: var(--_bc-ink);
  font-weight: var(--dk-component-breadcrumb-link-font-weight);
  text-decoration: none;
  transition: background-color var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              color var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              box-shadow var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              transform var(--dk-motion-press-duration) var(--dk-motion-press-easing);
}
.dk-component-breadcrumb__ellipsis[aria-expanded="true"],
.dk-component-breadcrumb__trigger[aria-expanded="true"] {
  --_bc-ink: var(--dk-component-breadcrumb-link-color-hover);
  background: var(--dk-component-breadcrumb-link-surface-hover);
}
@media (hover: hover) {
  .dk-component-breadcrumb__link:hover,
  .dk-component-breadcrumb__ellipsis:hover,
  .dk-component-breadcrumb__trigger:hover {
    --_bc-ink: var(--dk-component-breadcrumb-link-color-hover);
    background: var(--dk-component-breadcrumb-link-surface-hover);
  }
}
.dk-component-breadcrumb__link:active,
.dk-component-breadcrumb__ellipsis:active,
.dk-component-breadcrumb__trigger:active {
  --_bc-ink: var(--dk-component-breadcrumb-link-color-active);
  background: var(--dk-component-breadcrumb-link-surface-active);
  transform: scale(var(--dk-component-breadcrumb-press-scale));
}
.dk-component-breadcrumb__link:focus-visible,
.dk-component-breadcrumb__ellipsis:focus-visible,
.dk-component-breadcrumb__trigger:focus-visible,
.dk-component-breadcrumb__arrow:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--dk-component-breadcrumb-link-ring-width) var(--dk-component-breadcrumb-link-ring);
}

/* An item with a menu: the link and its chevron side by side with no gap,
   two buttons each rounded all round with its own hover and press. On the
   current page the words are not a button: only the chevron is. */
.dk-component-breadcrumb__pill { display: inline-flex; align-items: center; gap: 0; min-inline-size: 0; }
.dk-component-breadcrumb__pill > .dk-component-breadcrumb__current { padding-inline-end: var(--dk-component-breadcrumb-gap); }

.dk-component-breadcrumb__icon { flex: none; display: inline-flex; color: inherit; }
/* ONE LINE FOR EVERY GLYPH. Lucide, Karmo and the kit's own chevrons draw on
   a 24 grid at different sizes, so a stroke of 2 came out 1.17px on a
   chevron and 1.33px on an icon. A non-scaling stroke is set in screen
   pixels instead, matched to the words' stems. A filled part that carries
   its own stroke keeps it. */
.dk-component-breadcrumb :is(.dk-component-breadcrumb__icon, .dk-component-breadcrumb__trigger, .dk-component-breadcrumb__ellipsis, .dk-component-breadcrumb__arrow) svg { stroke-width: var(--_bc-stroke); }
.dk-component-breadcrumb :is(.dk-component-breadcrumb__icon, .dk-component-breadcrumb__trigger, .dk-component-breadcrumb__ellipsis, .dk-component-breadcrumb__arrow) svg :is(path, circle, line, polyline, polygon, rect, ellipse) { vector-effect: non-scaling-stroke; }
.dk-component-breadcrumb__icon > :is(svg, i, img) { width: var(--_bc-icon); height: var(--_bc-icon); display: block; }
.dk-component-breadcrumb__label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── The menu chevron, inside its item's pill, a Dropdown of related pages. */
.dk-component-breadcrumb__more { display: inline-flex; }
/* As tall as the link beside it, so the two meet as one shape. */
.dk-component-breadcrumb__trigger {
  --_bc-ink: var(--dk-component-breadcrumb-link-color);
  display: inline-grid; place-items: center;
  inline-size: calc(var(--dk-component-breadcrumb-chevron-size) + var(--_bc-pad-inline));
  block-size: calc(var(--_bc-line) + var(--_bc-pad-block) * 2);
  margin: 0; padding: 0; border: 0;
  border-radius: var(--dk-component-breadcrumb-radius);
  background: transparent;
  color: var(--_bc-ink);
  cursor: pointer;
  transition: background-color var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              color var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              box-shadow var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              transform var(--dk-motion-press-duration) var(--dk-motion-press-easing);
}
.dk-component-breadcrumb__trigger svg {
  width: var(--dk-component-breadcrumb-chevron-size); height: var(--dk-component-breadcrumb-chevron-size);
  transition: transform var(--dk-motion-state-duration) var(--dk-motion-state-easing);
}
.dk-component-breadcrumb__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ── The pages folded away: a "..." pill. */
.dk-component-breadcrumb__ellipsis {
  margin: 0; border: 0; background: transparent; cursor: pointer; font: inherit;
  padding-inline: var(--_bc-pad-block);
}
.dk-component-breadcrumb__ellipsis > :is(svg, i) { width: var(--_bc-icon); height: var(--_bc-icon); display: block; }

/* ── The current page: full contrast, not a link. */
.dk-component-breadcrumb__current {
  display: inline-flex; align-items: center;
  gap: var(--dk-component-breadcrumb-icon-gap);
  padding: var(--_bc-pad-block) var(--_bc-pad-inline);
  max-inline-size: var(--dk-component-breadcrumb-current-max-width);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--dk-component-breadcrumb-current-color);
  font-weight: var(--dk-component-breadcrumb-current-font-weight);
}

.dk-component-breadcrumb__current .dk-component-breadcrumb__icon { color: var(--dk-component-breadcrumb-current-icon-color); }

/* ── Back and forward: two arrows in their own pill, to the left. */
.dk-component-breadcrumb__arrows {
  display: inline-flex; align-items: center; flex: none;
  gap: var(--dk-component-breadcrumb-arrows-gap);
  padding: var(--dk-component-breadcrumb-arrows-padding);
  margin-inline-end: var(--dk-component-breadcrumb-arrows-margin);
  border-radius: var(--dk-component-breadcrumb-arrows-radius);
  background: var(--dk-component-breadcrumb-arrows-surface);
}
.dk-component-breadcrumb__arrow {
  display: inline-grid; place-items: center;
  inline-size: var(--_bc-arrow);
  block-size: var(--_bc-arrow);
  margin: 0; padding: 0; border: 0;
  border-radius: var(--dk-component-breadcrumb-arrow-radius);
  background: transparent;
  color: var(--dk-component-breadcrumb-arrow-color);
  cursor: pointer;
  transition: background-color var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              color var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              box-shadow var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              transform var(--dk-motion-press-duration) var(--dk-motion-press-easing);
}
.dk-component-breadcrumb__arrow svg { width: var(--_bc-arrow-icon); height: var(--_bc-arrow-icon); }
@media (hover: hover) {
  .dk-component-breadcrumb__arrow:hover:not(:disabled) {
    background: var(--dk-component-breadcrumb-arrow-surface-hover);
    color: var(--dk-component-breadcrumb-arrow-color-hover);
  }
}
.dk-component-breadcrumb__arrow:active:not(:disabled) {
  background: var(--dk-component-breadcrumb-arrow-surface-active);
  transform: scale(var(--dk-component-breadcrumb-press-scale));
}
.dk-component-breadcrumb__arrow:disabled { color: var(--dk-component-breadcrumb-arrow-color-disabled); cursor: default; }

/* ── Variants: the container round the trail, Glider's names. Ghost is the
   absence of one. Inside a container the arrows lose their own well and sit
   flush, a hairline between them and the trail. */
.dk-component-breadcrumb:is([data-variant="raised"], [data-variant="plain"], [data-variant="inset"]) {
  --_bc-sep: var(--dk-component-breadcrumb-container-separator-color);
  box-sizing: border-box;
  width: fit-content;
  max-inline-size: 100%;
  padding: var(--dk-component-breadcrumb-container-padding);
  border: var(--dk-component-breadcrumb-container-border-width) solid transparent;
  border-radius: var(--dk-component-breadcrumb-container-radius);
}
.dk-component-breadcrumb:is([data-variant="raised"], [data-variant="plain"]) {
  /* The arrows as tall as an item beside them, and square. */
  --_bc-arrow: calc(var(--_bc-line) + var(--_bc-pad-block) * 2);
  padding: var(--dk-component-breadcrumb-edged-padding-block) var(--dk-component-breadcrumb-edged-padding-inline);
}
.dk-component-breadcrumb[data-variant="raised"] {
  background: var(--dk-component-breadcrumb-raised-surface);
  border-color: var(--dk-component-breadcrumb-raised-border);
  box-shadow: var(--dk-component-breadcrumb-raised-shadow);
}
.dk-component-breadcrumb[data-variant="plain"] { border-color: var(--dk-component-breadcrumb-plain-border); }
.dk-component-breadcrumb[data-variant="inset"] { background: var(--dk-component-breadcrumb-inset-surface); }
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-breadcrumb[data-variant="inset"],
.dk-component-breadcrumb[data-variant="inset"]:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) {
  --dk-component-breadcrumb-link-color: var(--dk-component-breadcrumb-inset-toned-color);
  --dk-component-breadcrumb-link-color-hover: var(--dk-component-breadcrumb-inset-toned-color);
  --dk-component-breadcrumb-link-color-active: var(--dk-component-breadcrumb-inset-toned-color);
  --dk-component-breadcrumb-current-icon-color: var(--dk-component-breadcrumb-inset-toned-color);
}
.dk-component-breadcrumb:is([data-variant="raised"], [data-variant="plain"], [data-variant="inset"]) .dk-component-breadcrumb__arrows {
  padding: 0;
  padding-inline-end: var(--dk-component-breadcrumb-divider-space);
  margin-inline-end: var(--dk-component-breadcrumb-divider-space);
  border-radius: 0;
  background: transparent;
  border-inline-end: var(--dk-component-breadcrumb-container-border-width) solid var(--dk-component-breadcrumb-divider);
}
.dk-component-breadcrumb[data-variant="inset"] .dk-component-breadcrumb__arrows { border-inline-end-color: var(--dk-component-breadcrumb-inset-divider); }

@media (max-width: 768px) {
  .dk-component-breadcrumb__item:not(:nth-last-child(2)):not(:only-child) { display: none; }
  .dk-component-breadcrumb__item:nth-last-child(2)::before {
    content: "";
    content: "" / "";
    flex: none;
    inline-size: var(--dk-component-breadcrumb-separator-size);
    block-size: var(--dk-component-breadcrumb-separator-size);
    background-color: var(--dk-component-breadcrumb-separator-color);
    -webkit-mask: var(--dk-component-breadcrumb-back-icon) center / contain no-repeat;
    mask: var(--dk-component-breadcrumb-back-icon) center / contain no-repeat;
  }
}

/* ══════════════════════════════ drift-kit:layer components/payment-form/styles.css ══════════════════════════════ */
/* ── Payment form ────────────────────────────────────────────────────────────
   A frame for Stripe's Payment Element, themed by the kit.

   Purpose: Stripe's Payment Element on the kit's tokens: its fields, labels,
     tabs and errors follow the theme, the surface and the tone around them,
     like any kit field.

   Anatomy:
     div.dk-component-payment-form
       div.dk-component-payment-form__element   (mount the Payment Element here)
       p.dk-component-payment-form__error       (optional, role="alert")
       div.dk-component-payment-form__actions   (optional: Pay, Back)

   The Element's own look is not CSS: Stripe draws it in an iframe. Pass
   dk.component.paymentForm.appearance(root) as Elements' appearance, or
   bind(root, elements) to keep it in step with the theme. */
.dk-component-payment-form {
  display: grid;
  gap: var(--dk-component-payment-form-gap);
  min-inline-size: 0;
  font-family: var(--dk-component-payment-form-font-family);
}
/* Room while Stripe loads, so the actions do not jump when it arrives. */
.dk-component-payment-form__element { min-block-size: var(--dk-component-payment-form-element-min-height); }
.dk-component-payment-form__element:has(iframe) { min-block-size: 0; }
.dk-component-payment-form__error {
  margin: 0;
  color: var(--dk-component-payment-form-danger);
  font-size: var(--dk-component-payment-form-error-font-size);
  line-height: var(--dk-component-payment-form-error-line-height);
}
.dk-component-payment-form__error:empty { display: none; }
.dk-component-payment-form__actions {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: var(--dk-spacing-2);
}

/* ═════════════════════════════════════ drift-kit:layer components/table/styles.css ═════════════════════════════════════ */
/* ── Table ──────────────────────────────────────────────────────────────────
   A REAL <table>, and that is the first decision rather than an implementation
   detail. A grid of divs can be made to look identical and announces nothing:
   no row and column count, no "column 3 of 7" as you move, no way to read down
   a column or to hear the header again with each cell. <table> with <thead>,
   <th scope="col"> and a <caption> gives all of that for free, in every screen
   reader, with no ARIA at all. So this component is classes on the elements
   HTML already has, the way Input is classes on a real <input>.

   Purpose: Rows and columns, as a real <table>. Sorting, selection, sticky
     edges and the two rows that stand in for rows.

   Anatomy:
     div.dk-component-table__scroll[role=region][tabindex=0][aria-label]
       table.dk-component-table[data-variant="outline|raised"][data-size][data-zebra][data-sticky-head]
                                [data-sticky-col][data-interactive]
         caption.dk-component-table__caption
         thead > tr > th[scope=col][data-numeric|data-align][aria-sort]
                   > button.dk-component-table__sort > svg.…__sort-icon
         tbody > tr[data-selected] > td[data-numeric|data-align]
                 tr > td.dk-component-table__empty[colspan]
                 tr > td.dk-component-table__loading[colspan]
         tfoot > tr > td

   THE SCROLLER IS PART OF THE COMPONENT, not a wrapper the page happens to
   add. A table is the one thing in a design system that routinely does not fit
   its column, and a box that scrolls has to be reachable by keyboard and named,
   or a reader who cannot use a pointer cannot get to the columns on the right:
   role="region" with tabindex="0" and a label is what WCAG asks for and what a
   bare overflow: auto leaves out.

   BORDER-COLLAPSE: SEPARATE, which is not the usual choice and is load-bearing
   here. Under `collapse` the borders belong to the TABLE rather than to the
   cells, so a sticky header scrolls away from its own bottom rule and a sticky
   column leaves its right rule behind. Every rule in this file is therefore a
   cell's own border, and border-spacing is zeroed so the result looks collapsed.
   ── */
.dk-component-table__scroll {
  width: 100%;
  overflow-x: auto;
  /* A named, focusable scroll region still needs its focus to be visible. */
  border-radius: var(--dk-border-radius-100);
}
/* The house scrollbar, as a Select or Menu list wears it: an inset pill thumb
   on a clear track, brightening on hover. */
.dk-component-table__scroll::-webkit-scrollbar { width: var(--dk-component-table-scrollbar-size); height: var(--dk-component-table-scrollbar-size); }
.dk-component-table__scroll::-webkit-scrollbar-track { background: transparent; }
.dk-component-table__scroll::-webkit-scrollbar-thumb {
  background: var(--dk-component-table-scrollbar-thumb); background-clip: padding-box;
  border: var(--dk-component-table-scrollbar-inset) solid transparent;
  border-radius: var(--dk-component-table-scrollbar-size);
}
@media (hover: hover) {
  .dk-component-table__scroll::-webkit-scrollbar-thumb:hover { background: var(--dk-component-table-scrollbar-thumb-hover); background-clip: padding-box; }
}
.dk-component-table__scroll:focus-visible {
  outline: var(--dk-border-width-50) solid var(--dk-border-field-focus);
  outline-offset: var(--dk-border-width-25);
}

.dk-component-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--dk-component-table-font-family);
  font-weight: var(--dk-component-table-font-weight);
  color: var(--dk-component-table-color);
  /* The size slots live on the table itself, which is where every rule that
     reads them also lives. Input's note has the full reason: a property
     declared on an element beats one inherited from its parent whatever the
     specificity, so keeping one writer lets ordinary specificity settle it. */
  --_t-padding-y: var(--dk-component-table-padding-y);
  --_t-font-size: var(--dk-component-table-font-size);
  --_t-line-height: var(--dk-component-table-line-height);
  font-size: var(--_t-font-size);
  line-height: var(--_t-line-height);
}
.dk-component-table[data-size="small"] {
  --_t-padding-y: var(--dk-component-table-small-padding-y);
}
.dk-component-table[data-size="large"] {
  --_t-padding-y: var(--dk-component-table-large-padding-y);
  --_t-font-size: var(--dk-component-table-large-font-size);
  --_t-line-height: var(--dk-component-table-large-line-height);
}

/* THE ROW HEIGHT IS NOT A DECLARATION. It is the padding doubled plus the line
   box, which is the arithmetic tokens.css writes out, so a row holding a chip
   or a two-line address grows to fit instead of clipping it. A `height` here
   would be a minimum that table layout honours unevenly and that a taller cell
   silently overrides anyway. */
.dk-component-table :is(th, td) {
  padding: var(--_t-padding-y) var(--dk-component-table-padding-inline);
  text-align: left;
  vertical-align: middle;
}

.dk-component-table__caption {
  caption-side: top;
  text-align: left;
  padding-block-end: var(--dk-spacing-2);
  font-size: var(--dk-component-table-caption-font-size);
  line-height: var(--dk-component-table-caption-line-height);
  color: var(--dk-component-table-caption-color);
}

/* ── Variants: a frame ──
   The plain table (no data-variant) has no edge: it sits on the page. Two
   variants give it one, named as the kit names them elsewhere. OUTLINE draws
   the table's edge, as Card's outline does: a hairline and a corner. RAISED
   lifts it off the page, as Box's raised does: the raised surface, the raised
   edge and the floating shadow.
   THE FRAME IS ON THE SCROLLER, keyed off the table's own variant. The scroller
   already clips (overflow), so its corner rounds everything inside it and the
   head's own corners go square; on the table the corners would have to be
   repeated on every edge cell, and a sticky column would ride past them. */
.dk-component-table__scroll:has(> .dk-component-table:is([data-variant="outline"], [data-variant="raised"])) {
  border: var(--dk-component-table-frame-border-width) solid var(--dk-component-table-outline-border);
  border-radius: var(--dk-component-table-frame-radius);
}
.dk-component-table__scroll:has(> .dk-component-table[data-variant="raised"]) {
  border-color: var(--dk-component-table-raised-border);
  background: var(--dk-component-table-raised-surface);
  box-shadow: var(--dk-component-table-raised-shadow);
}
.dk-component-table:is([data-variant="outline"], [data-variant="raised"]) {
  --dk-component-table-head-radius: 0;
}
/* Raised rows paint the raised surface, so a sticky cell still covers what
   scrolls under it. */
.dk-component-table[data-variant="raised"] {
  --dk-surface-current: var(--dk-component-table-raised-surface);
}

/* ── The head ──
   The fill is what separates it, not a heavy rule, and the rule under it comes
   from the first body row's own top border so the two cannot double up. */
.dk-component-table thead th {
  background: var(--dk-component-table-head-surface);
  font-size: var(--dk-component-table-head-font-size);
  line-height: var(--dk-component-table-head-line-height);
  font-weight: var(--dk-component-table-head-font-weight);
  color: var(--dk-component-table-head-color);
  white-space: nowrap;
}

/* The header row's top corners. Cells can carry a radius because the table
   is border-collapse: separate. The sort button's fill takes the same outer
   corner, or its hover would show square past the curve. */
.dk-component-table thead tr > :first-child { border-start-start-radius: var(--dk-component-table-head-radius); }
.dk-component-table thead tr > :last-child { border-start-end-radius: var(--dk-component-table-head-radius); }
.dk-component-table thead tr > :first-child .dk-component-table__sort { border-start-start-radius: var(--dk-component-table-head-radius); }
.dk-component-table thead tr > :last-child .dk-component-table__sort { border-start-end-radius: var(--dk-component-table-head-radius); }

/* ── The rows ──
   EVERY ROW CARRIES AN OPAQUE FILL, including the plain ones, and that is what
   makes the sticky column work: a sticky cell sits over the cells scrolling
   under it, so it needs a fill of its own, and `background: inherit` on the
   cell takes whatever the row is currently painting. One rule for the sticky
   cell then covers rest, zebra, hover and selected, rather than four that have
   to be kept in step with the four below. */
.dk-component-table tbody tr {
  background: var(--dk-surface-current);
  transition: background-color var(--dk-component-table-row-duration) var(--dk-component-table-row-easing);
}
.dk-component-table tbody :is(td, th) {
  border-block-start: var(--dk-component-table-rule-width) solid var(--dk-component-table-rule);
}
.dk-component-table[data-zebra] tbody tr:nth-child(even) {
  background: var(--dk-component-table-zebra);
}
/* Interactive is opt-in, because a row that lights up under the pointer is
   promising a click. See the a11y notes: what makes the row clickable is a real
   link or button inside it, stretched over the row the way Card does it, not a
   handler on the <tr>. */
.dk-component-table[data-interactive] tbody tr { cursor: pointer; }
/* A control inside the row (its menu, a checkbox) is the target while the
   pointer is on it, so the row rests and the control shows its own hover and
   press. They read the same fills: a hovered row swallowed its ghost buttons,
   and pressing one pressed the row (18 Oct). */
@media (hover: hover) {
  .dk-component-table[data-interactive] tbody tr:hover:not(:has(:is(.dk-component-button, .dk-component-icon-button, .dk-component-dropdown__trigger, .dk-component-select__trigger, .dk-component-checkbox, .dk-component-radio, .dk-component-switch, .dk-component-input__field, input, select, textarea, [data-interactive]):hover)) {
    background: var(--dk-component-table-row-hover);
  }
}
.dk-component-table[data-interactive] tbody tr:active:not(:has(:is(.dk-component-button, .dk-component-icon-button, .dk-component-dropdown__trigger, .dk-component-select__trigger, .dk-component-checkbox, .dk-component-radio, .dk-component-switch, .dk-component-input__field, input, select, textarea, [data-interactive]):active)) {
  background: var(--dk-component-table-row-active);
}
.dk-component-table tbody tr[data-selected] {
  background: var(--dk-component-table-row-selected);
}
@media (hover: hover) {
  .dk-component-table[data-interactive] tbody tr[data-selected]:hover:not(:has(:is(.dk-component-button, .dk-component-icon-button, .dk-component-dropdown__trigger, .dk-component-select__trigger, .dk-component-checkbox, .dk-component-radio, .dk-component-switch, .dk-component-input__field, input, select, textarea, [data-interactive]):hover)) {
    background: var(--dk-component-table-row-selected-hover);
  }
}

/* ── The foot ──
   A heavier rule above it, because a totals row is a conclusion rather than one
   more row, and the same fill as the head so the table reads as bracketed. */
.dk-component-table tfoot tr { background: var(--dk-component-table-head-surface); }
.dk-component-table tfoot td {
  border-block-start: var(--dk-border-width-separator-50) solid var(--dk-component-table-rule);
  font-weight: var(--dk-component-table-head-font-weight);
}

/* ── Alignment, and numbers ──
   data-numeric is the one that earns its keep. A money column right-aligned
   with tabular figures lines its decimal points up; the same column in
   proportional figures does not, and every hand-rolled table this component
   replaces had a .col-amount class doing half of this. */
.dk-component-table :is(th, td)[data-align="center"] { text-align: center; }
.dk-component-table :is(th, td)[data-align="right"] { text-align: right; }
.dk-component-table :is(th, td)[data-numeric] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dk-component-table :is(th, td)[data-nowrap] { white-space: nowrap; }

/* ── The sortable header ──
   A REAL BUTTON FILLING THE CELL, so the whole header is the target and the
   keyboard reaches it in the natural order. The cell gives up its padding to
   the button, which takes it back, so the hover fill covers the header rather
   than a word inside it. */
.dk-component-table thead th:has(.dk-component-table__sort) { padding: 0; }
.dk-component-table__sort {
  display: flex;
  align-items: center;
  gap: var(--dk-component-table-sort-gap);
  width: 100%;
  padding: var(--_t-padding-y) var(--dk-component-table-padding-inline);
  background: none;
  border: 0;
  border-radius: var(--dk-component-table-sort-radius);
  font: inherit;
  color: var(--dk-component-table-sort-color);
  text-align: inherit;
  cursor: pointer;
  transition: background-color var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              color var(--dk-motion-state-duration) var(--dk-motion-state-easing);
}
@media (hover: hover) {
  .dk-component-table__sort:hover { background: var(--dk-component-table-sort-hover); color: var(--dk-component-table-sort-color-hover); }
}
.dk-component-table__sort:active { background: var(--dk-component-table-sort-active); color: var(--dk-component-table-sort-color-active); }
.dk-component-table__sort:focus-visible {
  outline: var(--dk-border-width-50) solid var(--dk-border-field-focus);
  /* Inset, because the cell clips: an outline drawn outside the button would be
     cut off by the header's own edge at the ends of the row. */
  outline-offset: calc(-1 * var(--dk-border-width-50));
}
/* A numeric column's header follows its numbers to the right, which is the
   whole point of aligning them: a heading left of a right-aligned column reads
   as a heading for something else. */
.dk-component-table thead th:is([data-numeric], [data-align="right"]) .dk-component-table__sort { justify-content: flex-end; }
.dk-component-table thead th[data-align="center"] .dk-component-table__sort { justify-content: center; }

.dk-component-table__sort-icon {
  width: var(--dk-component-table-sort-icon-size);
  height: var(--dk-component-table-sort-icon-size);
  flex: none;
  color: var(--dk-component-table-sort-icon-color);
  transition: transform var(--dk-motion-travel-duration) var(--dk-motion-travel-easing),
              color var(--dk-motion-state-duration) var(--dk-motion-state-easing);
}
/* ONE ARROW, TURNED, rather than two glyphs to keep in step. Unsorted it is
   quiet and points up, which says the column can be sorted; sorted it takes the
   text colour, and descending turns it over. aria-sort is the only state this
   reads, so what the screen reader is told and what the arrow does are the same
   fact. */
@media (hover: hover) {
  .dk-component-table__sort:hover .dk-component-table__sort-icon { color: var(--dk-component-table-sort-icon-color-hover); }
}
.dk-component-table__sort:active .dk-component-table__sort-icon { color: var(--dk-component-table-sort-icon-color-active); }
.dk-component-table thead th:is([aria-sort="ascending"], [aria-sort="descending"]) .dk-component-table__sort-icon {
  color: var(--dk-component-table-sort-icon-color-sorted);
}
@media (hover: hover) {
  .dk-component-table thead th:is([aria-sort="ascending"], [aria-sort="descending"]) .dk-component-table__sort:hover .dk-component-table__sort-icon {
    color: var(--dk-component-table-sort-icon-color-sorted-hover);
  }
}
.dk-component-table thead th:is([aria-sort="ascending"], [aria-sort="descending"]) .dk-component-table__sort:active .dk-component-table__sort-icon {
  color: var(--dk-component-table-sort-icon-color-sorted-active);
}
.dk-component-table thead th[aria-sort="descending"] .dk-component-table__sort-icon {
  transform: rotate(180deg);
}
/* AN UP-AND-DOWN PAIR UNTIL A COLUMN IS SORTED (1 Oct): a lone up arrow on
   every sortable column read as "already sorted ascending". Sorted, it is one
   arrow, turned for descending. One svg, two groups, aria-sort picks; they
   cross-fade rather than swap.
   THE TURN INTO ASCENDING: descending to unsorted fades and turns, because the
   svg's own rotation goes from 180deg back to 0. Unsorted to ascending has no
   rotation to ride (both are 0), and no fixed angles can give all three steps
   of the cycle a half turn, so this step is its own animation: the arrow turns
   in from pointing down while the pair turns away, both counter-clockwise like
   the turn back. data-sort-ready (the runtime sets it after the first frame)
   keeps a table that loads already sorted from spinning on arrival. */
.dk-component-table__sort-one,
.dk-component-table__sort-both {
  transform-box: view-box;
  transform-origin: center;
  transition: opacity var(--dk-motion-state-duration) var(--dk-motion-state-easing);
}
.dk-component-table__sort-one { opacity: 0; }
.dk-component-table thead th:is([aria-sort="ascending"], [aria-sort="descending"]) .dk-component-table__sort-both { opacity: 0; }
.dk-component-table thead th:is([aria-sort="ascending"], [aria-sort="descending"]) .dk-component-table__sort-one { opacity: 1; }
.dk-component-table[data-sort-ready] thead th[aria-sort="ascending"] .dk-component-table__sort-one {
  animation: dk-component-table-sort-turn-in var(--dk-motion-state-duration) var(--dk-motion-state-easing);
}
.dk-component-table[data-sort-ready] thead th[aria-sort="ascending"] .dk-component-table__sort-both {
  animation: dk-component-table-sort-turn-out var(--dk-motion-state-duration) var(--dk-motion-state-easing);
}
@keyframes dk-component-table-sort-turn-in { from { transform: rotate(180deg); } }
@keyframes dk-component-table-sort-turn-out { to { transform: rotate(-180deg); } }

/* ── The selection column ──
   width: 1% is table layout's idiom for "as narrow as the content needs": the
   algorithm distributes what is left over the other columns, so a checkbox
   column stops taking a seventh of the table. */
.dk-component-table__select {
  width: 1%;
  white-space: nowrap;
}

/* A column of buttons still needs a name, and the kit has no shared
   visually-hidden utility to borrow, so this component carries its own. The
   clip-rect shape rather than display: none or visibility: hidden, both of
   which take the text out of the accessibility tree along with the picture. */
.dk-component-table__hidden-label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Sticky head and sticky column ──
   Both work against whichever scrollport is nearest: the page, or the scroller
   when the author gives it a max-height. The z-index ladder is the only subtle
   part, and the corner cell is why it exists: the head sits over the body, the
   first column sits over the columns beside it, and the cell that is both has
   to sit over everything. */
.dk-component-table[data-sticky-head] thead th {
  position: sticky;
  top: var(--dk-component-table-sticky-offset);
  z-index: 2;
}
/* FOLLOWING THE PAGE, NATIVELY. The scroller is overflow-x: auto, and any
   scroll container stops position: sticky seeing past it. So when the table
   FITS its box, which behaviour.js marks data-fits, the scroller is not a
   scroll container at all and the sticky above sticks to the page itself:
   instant, on the compositor, like any CSS sticky (1 Oct: the script that
   moved it lagged a frame behind the scroll). Only a table genuinely wider
   than its box keeps the scroller, and then the runtime moves the head. */
.dk-component-table__scroll[data-fits]:has(> .dk-component-table[data-sticky-head]) { overflow: visible; }
/* ONE HAIRLINE under the head, travelling with it. A shadow on each cell drew
   a seam at every column; the first row's own top rule would scroll away. */
.dk-component-table[data-sticky-head] thead th::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: var(--dk-component-table-rule-width);
  background: var(--dk-component-table-rule);
  pointer-events: none;
}
.dk-component-table[data-sticky-head] tbody tr:first-child > :is(td, th) { border-block-start-color: transparent; }
.dk-component-table[data-sticky-col] :is(tbody, tfoot) tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: inherit;
  /* The line that says the column is floating over the rest, drawn as a border
     rather than a shadow so it reads as one more rule in a ruled table. */
  border-inline-end: var(--dk-component-table-rule-width) solid var(--dk-component-table-rule);
}
.dk-component-table[data-sticky-col] thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  border-inline-end: var(--dk-component-table-rule-width) solid var(--dk-component-table-rule);
}

/* ── The actions cell: a kebab and its menu at the end of a row ──
   As narrow as the button, against the right edge, and its block padding
   trimmed so the button does not make the row taller than its rung. */
.dk-component-table :is(th, td).dk-component-table__actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  padding-block: var(--dk-component-table-actions-padding-block);
  padding-inline: var(--dk-component-table-actions-padding-inline);
}

/* A status chip is taller than a line of text: its cell trims the block
   padding so the chip sits inside the row rather than stretching it. */
.dk-component-table td:has(> .dk-component-tag) { padding-block: var(--dk-component-table-chip-padding-block); }
/* Inline controls align to the TOP of their line box, so the line box is
   exactly as tall as the control: on the baseline the descender space added
   ~9px under it, and on the middle a 38px button still overhung the 24px
   strut (measured 51, then 48, then 46.7 for a 44 row). The cell itself is
   vertical-align: middle, so the control is still centred in the row. */
.dk-component-table td > :is(.dk-component-tag, .dk-component-dropdown, .dk-component-icon-button, .dk-component-button, .dk-component-link) { vertical-align: top; }

/* ── Reordering columns ──
   A header you can drag says so with the grab cursor, and grabbing while it
   is held. Its sort button keeps them too, since it is most of the header.
   The column in your hand is tinted, head to foot. */
.dk-component-table[data-reorder] thead th:not(.dk-component-table__select),
.dk-component-table[data-reorder] thead th:not(.dk-component-table__select) .dk-component-table__sort { cursor: grab; }
.dk-component-table[data-reorder] thead th[data-pressed],
.dk-component-table[data-reorder] thead th[data-pressed] .dk-component-table__sort,
.dk-component-table[data-reorder][data-reordering],
.dk-component-table[data-reorder][data-reordering] * { cursor: grabbing; }
.dk-component-table[data-reordering] { user-select: none; -webkit-user-select: none; }
/* The column's own slot while it is in your hand: the primary placeholder,
   fill and an edge, its contents hidden. Higher than the sticky column's own
   fill, so a dragged first column shows it too.
   THE EDGE IS AN OVERLAY, ABOVE THE CELL'S BORDER (1 Oct). Inset shadows sat
   under each row's top rule, so the rule crossed the side edges at every row,
   and the header's top edge lost on specificity and never drew. Here the row
   rule goes transparent inside the placeholder (the fill shows through) and
   a pseudo-element draws the outline from the cell's border edge: sides on
   every cell, the top on the header, the bottom on the last row. */
.dk-component-table :is(th, td)[data-placeholder],
.dk-component-table[data-reordering] tr > :is(th, td)[data-placeholder] {
  background: var(--dk-component-table-placeholder-surface);
  color: transparent;
  border-block-start-color: transparent;
  box-shadow: none;
}
/* An anchor for the overlay. Sticky cells are already positioned, and their
   sticky rules outrank this, so they keep sticking. */
.dk-component-table :is(th, td)[data-placeholder] { position: relative; }
.dk-component-table :is(th, td)[data-placeholder]::before {
  content: '';
  position: absolute;
  inset: 0;
  border-inline: var(--dk-component-table-placeholder-border-width) solid var(--dk-component-table-placeholder-border);
  pointer-events: none;
  z-index: 1;
  /* A header cell at either end has the head's rounded corner. */
  border-radius: inherit;
}
.dk-component-table :is(td, tbody th)[data-placeholder]::before { top: calc(-1 * var(--dk-component-table-rule-width)); }
.dk-component-table thead tr > th[data-placeholder]::before {
  border-block-start: var(--dk-component-table-placeholder-border-width) solid var(--dk-component-table-placeholder-border);
}
.dk-component-table tbody tr:last-child > :is(td, th)[data-placeholder]::before {
  border-block-end: var(--dk-component-table-placeholder-border-width) solid var(--dk-component-table-placeholder-border);
}
.dk-component-table [data-placeholder] > * { visibility: hidden; }

/* The ghost: the column, lifted, following the pointer anywhere on the page.
   On <body> so it can leave the table; dk.scope gives it the table's theme. */
.dk-component-table__ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  pointer-events: none;
  background: var(--dk-component-table-ghost-surface);
  border-radius: var(--dk-component-table-ghost-radius);
  box-shadow: var(--dk-component-table-ghost-shadow);
  overflow: hidden;
  will-change: transform;
}
.dk-component-table__ghost > .dk-component-table { width: 100%; }
/* The copied size includes padding, so the copy is border-box. */
.dk-component-table__ghost-cell { box-sizing: border-box; }
html[data-dk-table-dragging], html[data-dk-table-dragging] * { cursor: grabbing; }
.dk-component-table__status {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── The rows that stand in for rows ──
   An empty table is not an empty box: it is a table that has to say why there
   is nothing in it. Both of these are ordinary rows with one cell spanning the
   columns, so they sit inside the same borders and the same scroller. */
.dk-component-table :is(.dk-component-table__empty, .dk-component-table__loading) {
  padding-block: var(--dk-component-table-empty-padding-y);
  text-align: center;
  color: var(--dk-component-table-empty-color);
}
/* The kit's Loading spinner, with its message hanging under it: the row
   makes room below for the words. */
.dk-component-table .dk-component-table__loading { padding-block-end: var(--dk-component-table-loading-padding-bottom); }

/* ── On a solid fill, no zebra (13 Oct 2026) ── The stripe mixes the head's
   neutral into the surface; on a solid that is a muddy mid-tone under the
   solid's white rows (2.48:1). The rows' hairlines still separate them. */
[data-tone-fill="solid"] .dk-component-table { --dk-component-table-zebra: transparent; }

/* ═══════════════════════════════════════ drift-kit:layer components/tag/styles.css ═══════════════════════════════════════ */
/* ── Tag ────────────────────────────────────────────────────────────────────
   A label, a category, a status. The thing every table's Status column and
   every card's corner has been hand-rolling.

   Purpose: A label, a category, a status. Six statuses, three variants, and
     a dot for the column where the word is already there.

   Anatomy:
     span.dk-component-tag[data-status|data-hue][data-variant][data-size][data-caret]?[data-shape="circle"]?
       span.dk-component-tag__dot     (optional, aria-hidden)
       span.dk-component-tag__icon    (optional, aria-hidden, holds an svg)
       span.dk-component-tag__text    (the words; end in an ellipsis when a tag alone in its container is squeezed)
       ::after                        (with data-caret: a chevron-down, for a tag that opens a menu)

   A <span>, not a <button>: a tag is a statement about the thing it sits on,
   not a control. If it can be clicked it is a button, and if it can be removed
   it is a select's chip, which that component already has.

   THE STATUS WRITES SLOTS AND THE VARIANT SPENDS THEM, which is Alert's
   pattern and is worth the indirection here for the same reason: six statuses
   and three variants is nine rules this way and eighteen blocks of colour the
   other way. The order below is load-bearing, exactly as it is there: the
   status block sits ABOVE the variant block, so a variant's overwrite of
   --_tag-bg and --_tag-text cannot be undone by a status rule appended later.
   ── */
.dk-component-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--dk-component-tag-gap);
  padding: var(--_tag-padding-block) var(--_tag-padding-inline);
  border-radius: var(--dk-component-tag-radius);
  font-family: var(--dk-component-tag-font-family);
  font-size: var(--_tag-font-size);
  line-height: var(--_tag-line-height);
  font-weight: var(--_tag-weight);
  white-space: nowrap;
  vertical-align: middle;

  --_tag-weight: var(--dk-component-tag-font-weight);
  --_tag-font-size: var(--dk-component-tag-font-size);
  --_tag-line-height: var(--dk-component-tag-line-height);
  --_tag-padding-block: var(--dk-component-tag-padding-block);
  --_tag-padding-inline: var(--dk-component-tag-padding-inline);
  --_tag-icon-size: var(--dk-component-tag-icon-size);

  /* NEUTRAL IS THE DEFAULT, where the component library's Tag defaults to
     primary. A tag with no status is a label rather than a signal, and a page
     whose every unmarked label arrives in the brand colour has spent it. */
  /* The nested neutral: a step from the surface it sits on at every level, in
     both themes. The flat neutral subtle was one value per theme and vanished
     on a light level-1 or a dark level-2 panel (5 Nov). */
  --_tag-tint: var(--dk-surface-nested-default);
  /* Neutral has no solid fill and no on-solid text in the system, which Alert's
     stylesheet records checking: the strongest neutral surface and the page's
     own copy colour stand in, so a neutral solid tag still renders rather than
     coming out colourless. Every status below has both for real.
     THE TEXT IS WHITE in both themes (29 Sep 2026), not the page's copy colour:
     black on the light grey fill was the one solid tag that did not read like
     the others. */
  --_tag-solid: var(--dk-surface-neutral-default);
  --_tag-line: var(--dk-border-neutral-hairline);
  --_tag-on-solid: var(--dk-text-base-white);
  --_tag-tint-text: var(--dk-text-neutral-default);
  /* A hue Tag's outline keeps its hue; a status Tag points it at the status's
     outline token below. */
  --_tag-outline-text: var(--_tag-tint-text);
  --_tag-dot: var(--dk-icon-neutral-default);

  /* What the variant rules spend. */
  --_tag-bg: var(--_tag-tint);
  --_tag-text: var(--_tag-tint-text);
  --_tag-border: transparent;

  background: var(--_tag-bg);
  color: var(--_tag-text);
  border: var(--dk-component-tag-border-width) solid var(--_tag-border);
}
.dk-component-tag[data-size="xsmall"] {
  --_tag-font-size: var(--dk-component-tag-xsmall-font-size);
  --_tag-line-height: var(--dk-component-tag-xsmall-line-height);
  --_tag-padding-block: var(--dk-component-tag-xsmall-padding-block);
  --_tag-padding-inline: var(--dk-component-tag-xsmall-padding-inline);
  --_tag-icon-size: var(--dk-component-tag-xsmall-icon-size);
}
.dk-component-tag[data-size="small"] {
  --_tag-font-size: var(--dk-component-tag-small-font-size);
  --_tag-line-height: var(--dk-component-tag-small-line-height);
  --_tag-padding-inline: var(--dk-component-tag-small-padding-inline);
  --_tag-icon-size: var(--dk-component-tag-small-icon-size);
}
.dk-component-tag[data-size="large"] {
  --_tag-font-size: var(--dk-component-tag-large-font-size);
  --_tag-line-height: var(--dk-component-tag-large-line-height);
  --_tag-padding-inline: var(--dk-component-tag-large-padding-inline);
  --_tag-icon-size: var(--dk-component-tag-large-icon-size);
}
/* NO PILL (removed 29 Sep 2026). The corner comes from the theme's
   data-border-radius (pill under round, as a single-line control), like every other control's.
   A per-tag pill fought that setting and meant nothing under bubbly, where a
   tag is nearly round already. A filter chip that needs to look different is a
   clickable Chip, not a label with a switch. */

/* A COUNT (data-shape="circle"): a number alone, in a circle as wide as the
   tag is tall at its size, the number centred; once the digits outgrow it,
   it grows into a pill of the same height rather than squeezing. Not the pill above: a
   count is a shape of its own, whatever the theme's corners. Its colour is
   the tag's, so a neutral subtle count is the nested neutral, a step from
   whatever surface it sits on. */
.dk-component-tag[data-shape="circle"] {
  --_tag-padding-inline: var(--_tag-padding-block);
  box-sizing: border-box;
  justify-content: center;
  min-inline-size: calc(var(--_tag-line-height) + 2 * var(--_tag-padding-block) + 2 * var(--dk-component-tag-border-width));
  font-variant-numeric: tabular-nums;
}
/* The round corner at the base rule's weight (later, so it wins in the full
   look), which the fidelity looks' gated corner still outweighs. */
.dk-component-tag:where([data-shape="circle"]) {
  border-radius: var(--dk-border-radius-round-fixed);
}

/* ── Status: write the slots ─────────────────────────────────────────────── */
.dk-component-tag[data-status="primary"] {
  --_tag-tint-rest: var(--dk-surface-primary-subtle);
  --_tag-tint-lift: var(--dk-surface-primary-subtle-hover);
  --_tag-tint: var(--_tag-tint-rest);
  --_tag-solid: var(--dk-component-tag-primary-solid);
  --_tag-line: var(--dk-border-primary-hairline);
  --_tag-on-solid: var(--dk-text-on-primary-mark);
  --_tag-tint-text: var(--dk-text-primary-on-subtle);
  --_tag-outline-text: var(--dk-text-primary-outline);
  --_tag-dot: var(--dk-icon-primary-default);
}
.dk-component-tag[data-status="success"] {
  --_tag-tint-rest: var(--dk-surface-success-subtle);
  --_tag-tint-lift: var(--dk-surface-success-subtle-hover);
  --_tag-tint: var(--_tag-tint-rest);
  --_tag-solid: var(--dk-component-tag-success-solid);
  --_tag-line: var(--dk-border-success-hairline);
  --_tag-on-solid: var(--dk-text-on-success-mark);
  --_tag-tint-text: var(--dk-text-success-on-subtle);
  --_tag-outline-text: var(--dk-text-success-outline);
  --_tag-dot: var(--dk-icon-success-default);
}
.dk-component-tag[data-status="error"] {
  --_tag-tint-rest: var(--dk-surface-error-subtle);
  --_tag-tint-lift: var(--dk-surface-error-subtle-hover);
  --_tag-tint: var(--_tag-tint-rest);
  --_tag-solid: var(--dk-component-tag-error-solid);
  --_tag-line: var(--dk-border-error-hairline);
  --_tag-on-solid: var(--dk-text-on-error-mark);
  --_tag-tint-text: var(--dk-text-error-on-subtle);
  --_tag-outline-text: var(--dk-text-error-outline);
  --_tag-dot: var(--dk-icon-error-default);
}
.dk-component-tag[data-status="warning"] {
  --_tag-tint-rest: var(--dk-surface-warning-subtle);
  --_tag-tint-lift: var(--dk-surface-warning-subtle-hover);
  --_tag-tint: var(--_tag-tint-rest);
  --_tag-solid: var(--dk-component-tag-warning-solid);
  --_tag-line: var(--dk-border-warning-hairline);
  --_tag-on-solid: var(--dk-text-on-warning-mark);
  --_tag-tint-text: var(--dk-text-warning-on-subtle);
  --_tag-outline-text: var(--dk-text-warning-outline);
  --_tag-dot: var(--dk-icon-warning-default);
}
.dk-component-tag[data-status="information"] {
  --_tag-tint-rest: var(--dk-surface-information-subtle);
  --_tag-tint-lift: var(--dk-surface-information-subtle-hover);
  --_tag-tint: var(--_tag-tint-rest);
  --_tag-solid: var(--dk-component-tag-information-solid);
  --_tag-line: var(--dk-border-information-hairline);
  --_tag-on-solid: var(--dk-text-on-information-mark);
  --_tag-tint-text: var(--dk-text-information-on-subtle);
  --_tag-outline-text: var(--dk-text-information-outline);
  --_tag-dot: var(--dk-icon-information-default);
}
/* DARK LIFTS THE STATUS TINT A RUNG (4 Nov, Julio). Dark's subtle tints are
   the 900s, which on a level 0 card sit at the card's own lightness (warning
   about 1:1, primary and success barely more): the tag lost its box. The
   hover rung is one step up and follows the surface level as subtle does, so
   a tag on level 1 lifts from there. Light keeps its 50s, which already part
   from a white card. Neutral's dark tint is already lighter than the page.
   Weightless theme checks, so a fidelity look's own tint still wins; a light
   island inside dark takes the light tint back. */
:where([data-theme="dark"]) .dk-component-tag[data-status="primary"],
:where([data-theme="dark"]) .dk-component-tag[data-status="success"],
:where([data-theme="dark"]) .dk-component-tag[data-status="error"],
:where([data-theme="dark"]) .dk-component-tag[data-status="warning"],
:where([data-theme="dark"]) .dk-component-tag[data-status="information"] {
  --_tag-tint: var(--_tag-tint-lift);
}
:where([data-theme="dark"] [data-theme="light"]) .dk-component-tag[data-status="primary"],
:where([data-theme="dark"] [data-theme="light"]) .dk-component-tag[data-status="success"],
:where([data-theme="dark"] [data-theme="light"]) .dk-component-tag[data-status="error"],
:where([data-theme="dark"] [data-theme="light"]) .dk-component-tag[data-status="warning"],
:where([data-theme="dark"] [data-theme="light"]) .dk-component-tag[data-status="information"] {
  --_tag-tint: var(--_tag-tint-rest);
}

/* IN A CLICKABLE THING (11 Nov 2026, Julio): a neutral subtle tag (a row's
   count) ramps with the data-interactive element it sits in, as an Icon tile
   does, keyed off the same states as kit/interactive.css, and always a rung
   past the element's own fill so it never melts into it: the item tier's
   hover fill is the nested hover in light and the nested default in dark, its
   press a rung on from each. So the tag's hover and press are a rung past
   those, per theme (the dark rungs under a weightless theme check, a light
   island inside dark taking the light ones back), and its words the neutral
   text's hover and active rungs. The tag's own transition carries it on the
   state timing. */
:where([data-interactive]) .dk-component-tag:not([data-status], [data-hue], [data-variant]) {
  transition: background-color var(--dk-motion-state-duration) var(--dk-motion-state-easing), color var(--dk-motion-state-duration) var(--dk-motion-state-easing);
}
:where([data-interactive][data-pseudo-class="hover"]) .dk-component-tag:not([data-status], [data-hue], [data-variant]) {
  --_tag-tint: var(--_tag-ramp-hover, var(--dk-surface-nested-active));
  --_tag-tint-text: var(--dk-text-neutral-hover);
}
@media (hover: hover) {
  :where([data-interactive]:hover:not(:has(:is(.dk-component-button, .dk-component-icon-button, .dk-component-dropdown__trigger, .dk-component-select__trigger, .dk-component-checkbox, .dk-component-radio, .dk-component-switch, .dk-component-input__field, input, select, textarea, [data-interactive]):hover))) .dk-component-tag:not([data-status], [data-hue], [data-variant]) {
    --_tag-tint: var(--_tag-ramp-hover, var(--dk-surface-nested-active));
    --_tag-tint-text: var(--dk-text-neutral-hover);
  }
}
:where([data-interactive]:active:not(:has(:is(.dk-component-button, .dk-component-icon-button, .dk-component-dropdown__trigger, .dk-component-select__trigger, .dk-component-checkbox, .dk-component-radio, .dk-component-switch, .dk-component-input__field, input, select, textarea, [data-interactive]):active)), [data-interactive][data-pseudo-class="active"]) .dk-component-tag:not([data-status], [data-hue], [data-variant]) {
  --_tag-tint: var(--_tag-ramp-active, var(--dk-surface-nested-active-level-1));
  --_tag-tint-text: var(--dk-text-neutral-active);
}
:where([data-theme="dark"]) .dk-component-tag:not([data-status], [data-hue], [data-variant]) {
  --_tag-ramp-hover: var(--dk-surface-nested-hover);
  --_tag-ramp-active: var(--dk-surface-nested-active);
}
:where([data-theme="dark"] [data-theme="light"]) .dk-component-tag:not([data-status], [data-hue], [data-variant]) {
  --_tag-ramp-hover: var(--dk-surface-nested-active);
  --_tag-ramp-active: var(--dk-surface-nested-active-level-1);
}

/* ── Hue: write the same slots, for categories (29 Sep 2026) ──────────────
   A category rather than a status: a department, a series, a filter. Nine
   on-brand hues from mapped/hue.css, on primary's rung pattern, so every
   variant and the dot work unchanged. BELOW THE STATUS RULES on purpose: with
   both attributes set the hue wins, and the docs say to pick one. Each value
   is named, never a bare [data-hue], so an unknown hue is a neutral tag rather
   than an empty one. */
.dk-component-tag[data-hue="prev4"] {
  --_tag-tint: var(--dk-surface-hue-prev4-subtle);
  --_tag-solid: var(--dk-surface-hue-prev4-solid);
  --_tag-line: var(--dk-border-hue-prev4-hairline);
  --_tag-on-solid: var(--dk-text-hue-on-solid);
  --_tag-tint-text: var(--dk-text-hue-prev4-on-subtle);
  --_tag-dot: var(--dk-icon-hue-prev4-default);
}
.dk-component-tag[data-hue="prev3"] {
  --_tag-tint: var(--dk-surface-hue-prev3-subtle);
  --_tag-solid: var(--dk-surface-hue-prev3-solid);
  --_tag-line: var(--dk-border-hue-prev3-hairline);
  --_tag-on-solid: var(--dk-text-hue-on-solid);
  --_tag-tint-text: var(--dk-text-hue-prev3-on-subtle);
  --_tag-dot: var(--dk-icon-hue-prev3-default);
}
.dk-component-tag[data-hue="prev2"] {
  --_tag-tint: var(--dk-surface-hue-prev2-subtle);
  --_tag-solid: var(--dk-surface-hue-prev2-solid);
  --_tag-line: var(--dk-border-hue-prev2-hairline);
  --_tag-on-solid: var(--dk-text-hue-on-solid);
  --_tag-tint-text: var(--dk-text-hue-prev2-on-subtle);
  --_tag-dot: var(--dk-icon-hue-prev2-default);
}
.dk-component-tag[data-hue="prev1"] {
  --_tag-tint: var(--dk-surface-hue-prev1-subtle);
  --_tag-solid: var(--dk-surface-hue-prev1-solid);
  --_tag-line: var(--dk-border-hue-prev1-hairline);
  --_tag-on-solid: var(--dk-text-hue-on-solid);
  --_tag-tint-text: var(--dk-text-hue-prev1-on-subtle);
  --_tag-dot: var(--dk-icon-hue-prev1-default);
}
.dk-component-tag[data-hue="primary"] {
  --_tag-tint: var(--dk-surface-hue-primary-subtle);
  --_tag-solid: var(--dk-surface-hue-primary-solid);
  --_tag-line: var(--dk-border-hue-primary-hairline);
  --_tag-on-solid: var(--dk-text-hue-on-solid);
  --_tag-tint-text: var(--dk-text-hue-primary-on-subtle);
  --_tag-dot: var(--dk-icon-hue-primary-default);
}
.dk-component-tag[data-hue="next1"] {
  --_tag-tint: var(--dk-surface-hue-next1-subtle);
  --_tag-solid: var(--dk-surface-hue-next1-solid);
  --_tag-line: var(--dk-border-hue-next1-hairline);
  --_tag-on-solid: var(--dk-text-hue-on-solid);
  --_tag-tint-text: var(--dk-text-hue-next1-on-subtle);
  --_tag-dot: var(--dk-icon-hue-next1-default);
}
.dk-component-tag[data-hue="next2"] {
  --_tag-tint: var(--dk-surface-hue-next2-subtle);
  --_tag-solid: var(--dk-surface-hue-next2-solid);
  --_tag-line: var(--dk-border-hue-next2-hairline);
  --_tag-on-solid: var(--dk-text-hue-on-solid);
  --_tag-tint-text: var(--dk-text-hue-next2-on-subtle);
  --_tag-dot: var(--dk-icon-hue-next2-default);
}
.dk-component-tag[data-hue="next3"] {
  --_tag-tint: var(--dk-surface-hue-next3-subtle);
  --_tag-solid: var(--dk-surface-hue-next3-solid);
  --_tag-line: var(--dk-border-hue-next3-hairline);
  --_tag-on-solid: var(--dk-text-hue-on-solid);
  --_tag-tint-text: var(--dk-text-hue-next3-on-subtle);
  --_tag-dot: var(--dk-icon-hue-next3-default);
}
.dk-component-tag[data-hue="next4"] {
  --_tag-tint: var(--dk-surface-hue-next4-subtle);
  --_tag-solid: var(--dk-surface-hue-next4-solid);
  --_tag-line: var(--dk-border-hue-next4-hairline);
  --_tag-on-solid: var(--dk-text-hue-on-solid);
  --_tag-tint-text: var(--dk-text-hue-next4-on-subtle);
  --_tag-dot: var(--dk-icon-hue-next4-default);
}

/* ── Variant: spend the slots ────────────────────────────────────────────── */
/* subtle is the default and is already expressed in the base rule. */
.dk-component-tag[data-variant="solid"] {
  --_tag-bg: var(--_tag-solid);
  --_tag-text: var(--_tag-on-solid);
  --_tag-border: transparent;
  --_tag-dot: var(--_tag-on-solid);
}
.dk-component-tag[data-variant="outline"] {
  --_tag-text: var(--_tag-outline-text);
  --_tag-bg: transparent;
  --_tag-border: var(--_tag-line);
}

/* WEIGHT (data-weight, 5 Nov 2026): the label weight is semi-bold by default;
   name one to set it. It writes the slot, not the property, so a fidelity
   look's own font-weight still wins. */
.dk-component-tag[data-weight="medium"] { --_tag-weight: var(--dk-primitive-font-weight-medium); }
.dk-component-tag[data-weight="semi-bold"] { --_tag-weight: var(--dk-primitive-font-weight-semi-bold); }

/* NEVER OUTGROWS ITS CONTAINER (4 Nov), but only a tag whose words sit in
   the text part: those can give way. A bare-text tag has nothing that can
   shrink, so capping it would spill the words past its fill. And only a tag
   alone in its container (6 Nov): in a row of tags each keeps its own words
   as its floor, as before the part, where a squeezed row capped every one
   to an empty pill. The cap counts its padding and edge, so a lone tag stops
   at the container's edge. */
.dk-component-tag:only-child:has(> .dk-component-tag__text) { max-width: 100%; box-sizing: border-box; }

/* ── The parts ───────────────────────────────────────────────────────────── */
/* THE WORDS TRUNCATE. A flex container cannot put an ellipsis on a bare text
   node, so the words sit in their own part, which may shrink below its
   content and ends in an ellipsis when the tag is held narrower than them.
   It clips the inline axis only (6 Nov): overflow: hidden also cut the
   descenders and glyph edges outside the line box. overflow-x: clip with
   overflow-y: visible is a valid pair (clip never turns the other axis into
   a scroller), and text-overflow ellipsises against it (Chrome 90+, Safari
   16+, Firefox 81+). The clip edge also sits a hair outside the words
   (--_tag-ink, padded and given back by a negative margin, so the layout
   does not move), so a glyph whose ink runs past its advance, a closing
   cross or an f, keeps it. overflow-clip-margin would say it in one line,
   but Safari has none. */
.dk-component-tag__text {
  min-width: 0;
  overflow-x: clip;
  overflow-y: visible;
  --_tag-ink: var(--dk-primitive-scale-0-5);
  padding-inline: var(--_tag-ink);
  margin-inline: calc(var(--_tag-ink) * -1);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dk-component-tag__icon {
  display: inline-flex;
  flex: none;
  /* The glyph takes the tag's own colour rather than the status tone: on a
     subtle tint the text IS the status colour, so a second one would be the
     same colour twice, and on a solid fill anything else would fail. */
  color: currentColor;
}
.dk-component-tag__icon svg {
  display: block;
  width: var(--_tag-icon-size);
  height: var(--_tag-icon-size);
}
/* A DOT IS A STATUS WITH NO ROOM FOR A WORD, for the table column where the
   word is already in the cell beside it. It keeps the status colour on a tint
   and turns to the on-solid colour on a fill, because a coloured dot on its own
   colour is a hole. */
.dk-component-tag__dot {
  flex: none;
  width: var(--dk-component-tag-dot-size);
  height: var(--dk-component-tag-dot-size);
  border-radius: 50%;
  background: var(--_tag-dot);
}
/* THE CARET (data-caret, 9 Nov 2026): a tag that opens a menu (a chip
   filter) says so with the kit's chevron-down after its words, a mask in the
   tag's own colour at its icon size, a tag gap from the words. */
.dk-component-tag[data-caret]::after {
  content: '';
  flex: none;
  width: var(--_tag-icon-size);
  height: var(--_tag-icon-size);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── A hue outline on a solid fill (13 Oct 2026) ── A hue has no tone remap,
   so its tint text on a solid of the same family read 700 on 700. The outline
   keeps the hue; the words take the panel's own text colour. */
[data-tone-fill="solid"] .dk-component-tag:not([data-status])[data-variant="outline"] { --_tag-text: var(--dk-text-default); }


/* ═════════════════════════════════ drift-kit:layer components/accordion/styles.css ═════════════════════════════════ */
/* ── Accordion ──────────────────────────────────────────────────────────────
   A list of things you can open, built on <details> and <summary>.

   THE PLATFORM ALREADY HAS THIS COMPONENT, which is the whole design decision.
   A <details> opens and closes with no script, takes Enter and Space because a
   <summary> is a real disclosure control, announces itself as one, and is
   expanded by the browser's own find-in-page when the words you are looking for
   are inside it. A button with aria-expanded and a region is a reimplementation
   of all of that, and it is the version that is always missing the last part.

   ONE OPEN AT A TIME IS AN ATTRIBUTE, NOT A SCRIPT. <details name="faq"> makes
   an exclusive accordion natively. behaviour.js moves it aside so the sibling
   closes on the same clock as the one opening.

   WHAT THE SCRIPT IS FOR is the motion, the keyboard between triggers, the API
   and the deep link. With no script the panel snaps, which is a working
   accordion.

   A CONTROL IN THE ROW IS ITS OWN TARGET: a Switch or a button in __meta, a
   link, or a row of your own marked data-interactive takes its click and the
   item stays as it is, the way <details> treats interactive content natively.
   The summary itself can carry data-interactive for the foundation's states;
   React passes those through AccordionItem's summaryProps.

   Purpose: A list of things you can open: FAQs, settings, details on demand.
     Built on <details>, so it works before the script does, with motion that
     turns round mid-way.

   Anatomy:
     div.dk-component-accordion[data-variant="separated|joined|flush"][data-size][data-icon="plus"]
       details.dk-component-accordion__item[name][open]
         summary.dk-component-accordion__summary[aria-disabled]
           span.__leading?  span.__heading? > span.__title + span.__description?
           span.__meta?  svg.__icon (injected when missing)
         div.dk-component-accordion__panel
           div.dk-component-accordion__content
   ── */
.dk-component-accordion {
  display: grid;
  gap: var(--dk-component-accordion-gap);
  width: 100%;
  /* The rung's own type and row padding, set once so the row and the
     content agree. */
  --_acc-padding-block: var(--dk-component-accordion-padding-block);
  --_acc-padding-inline: var(--dk-component-accordion-padding-inline);
  --_acc-font-size: var(--dk-component-accordion-font-size);
  --_acc-line-height: var(--dk-component-accordion-line-height);
}
.dk-component-accordion[data-size="small"] {
  --_acc-padding-block: var(--dk-component-accordion-small-padding-block);
  --_acc-font-size: var(--dk-component-accordion-small-font-size);
  --_acc-line-height: var(--dk-component-accordion-small-line-height);
}
.dk-component-accordion[data-size="large"] {
  --_acc-padding-block: var(--dk-component-accordion-large-padding-block);
  --_acc-font-size: var(--dk-component-accordion-large-font-size);
  --_acc-line-height: var(--dk-component-accordion-large-line-height);
}

/* ── Separated (default): a stack of cards ── */
.dk-component-accordion__item {
  padding: var(--dk-component-accordion-inset);
  background: var(--dk-component-accordion-surface);
  border: var(--dk-component-accordion-border-width) solid var(--dk-component-accordion-border);
  border-radius: var(--dk-component-accordion-radius);
}
/* ── Joined: one card, rules between items ── */
.dk-component-accordion[data-variant="joined"] {
  gap: 0;
  background: var(--dk-component-accordion-surface);
  border: var(--dk-component-accordion-border-width) solid var(--dk-component-accordion-border);
  border-radius: var(--dk-component-accordion-radius);
  overflow: hidden;
}
.dk-component-accordion[data-variant="joined"] > .dk-component-accordion__item {
  background: transparent; border: 0; border-radius: 0;
  border-bottom: var(--dk-component-accordion-rule-width) solid var(--dk-component-accordion-joined-rule);
}
.dk-component-accordion[data-variant="joined"] > .dk-component-accordion__item:last-child { border-bottom: 0; }
/* ── Flush: rules only, for an accordion already inside a card. data-flush is
   the older spelling and still works. ── */
.dk-component-accordion:is([data-variant="flush"], [data-flush]) {
  gap: 0;
  --_acc-padding-inline: var(--dk-component-accordion-flush-padding-inline);
}
.dk-component-accordion:is([data-variant="flush"], [data-flush]) > .dk-component-accordion__item {
  background: transparent; border: 0; border-radius: 0;
  padding-inline: 0;
  border-bottom: var(--dk-component-accordion-rule-width) solid var(--dk-component-accordion-rule);
}
.dk-component-accordion:is([data-variant="flush"], [data-flush]) > .dk-component-accordion__item:last-child { border-bottom: 0; }

/* ── The row ── */
.dk-component-accordion__summary {
  display: flex;
  align-items: center;
  /* space-between, not auto margins: the icon ends the row whether the label
     is a bare text node or a __heading that fills the space itself. An auto
     margin resolved through the UA default (check:ua-defaults, 30 Sep). */
  justify-content: space-between;
  gap: var(--dk-component-accordion-icon-gap);
  padding: var(--_acc-padding-block, var(--dk-component-accordion-padding-block)) var(--_acc-padding-inline, var(--dk-component-accordion-padding-inline));
  border-radius: var(--dk-component-accordion-row-radius);
  font-family: var(--dk-component-accordion-font-family);
  font-size: var(--_acc-font-size, var(--dk-component-accordion-font-size));
  line-height: var(--_acc-line-height, var(--dk-component-accordion-line-height));
  font-weight: var(--dk-component-accordion-summary-font-weight);
  color: var(--dk-component-accordion-summary-color);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              transform var(--dk-motion-press-duration) var(--dk-motion-press-easing);
  /* THE MARKER GOES, in all three spellings: the standard pseudo-element,
     Safari's WebKit one, and list-style for engines that draw a list marker. */
  list-style: none;
}
.dk-component-accordion__summary::-webkit-details-marker { display: none; }
.dk-component-accordion__summary::marker { content: ''; }
@media (hover: hover) {
  .dk-component-accordion__summary:hover:not([aria-disabled="true"]) { background: var(--dk-component-accordion-row-surface-hover); }
}
@media (hover: hover) {
  .dk-component-accordion__summary:hover:not([aria-disabled="true"]) .dk-component-accordion__icon { color: var(--dk-component-accordion-icon-color-hover); }
}
.dk-component-accordion__summary:active:not([aria-disabled="true"]) { background: var(--dk-component-accordion-row-surface-active); transform: scale(var(--dk-component-accordion-press-scale)); }
/* A CONTROL IN THE ROW IS ITS OWN TARGET (11 Nov): while the pointer is on a
   switch, a button, a link or a data-interactive row inside the summary, the
   row rests, so pressing the control does not also squeeze the whole header.
   The interaction foundation's nested-control list, plus links and buttons;
   behaviour.js leaves the click to the same controls. Heavier than the states
   above, so the row's rest wins while the control is the target. */
@media (hover: hover) {
  .dk-component-accordion__summary:hover:has(:is(.dk-component-button, .dk-component-icon-button, .dk-component-dropdown__trigger, .dk-component-select__trigger, .dk-component-checkbox, .dk-component-radio, .dk-component-switch, .dk-component-input__field, input, select, textarea, a[href], button, [data-interactive]):hover) { background: none; }
}
@media (hover: hover) {
  .dk-component-accordion__summary:hover:has(:is(.dk-component-button, .dk-component-icon-button, .dk-component-dropdown__trigger, .dk-component-select__trigger, .dk-component-checkbox, .dk-component-radio, .dk-component-switch, .dk-component-input__field, input, select, textarea, a[href], button, [data-interactive]):hover) .dk-component-accordion__icon { color: var(--dk-component-accordion-icon-color); }
}
.dk-component-accordion__summary:active:has(:is(.dk-component-button, .dk-component-icon-button, .dk-component-dropdown__trigger, .dk-component-select__trigger, .dk-component-checkbox, .dk-component-radio, .dk-component-switch, .dk-component-input__field, input, select, textarea, a[href], button, [data-interactive]):active) { background: none; transform: none; }
.dk-component-accordion__summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--dk-component-accordion-focus-ring-width) var(--dk-component-accordion-focus-ring);
}

.dk-component-accordion__leading {
  display: inline-flex; flex: none;
  color: var(--dk-component-accordion-leading-color);
}
.dk-component-accordion__leading svg,
.dk-component-accordion__leading i { display: block; inline-size: var(--dk-component-accordion-leading-size); block-size: var(--dk-component-accordion-leading-size); }
.dk-component-accordion__heading {
  display: flex; flex-direction: column; gap: var(--dk-component-accordion-heading-gap);
  flex: 1 1 auto; min-width: 0;
}
.dk-component-accordion__title { overflow-wrap: anywhere; }
.dk-component-accordion__description {
  font-weight: var(--dk-primitive-font-weight-regular);
  font-size: var(--dk-component-accordion-description-font-size);
  line-height: var(--dk-component-accordion-description-line-height);
  color: var(--dk-component-accordion-description-color);
}
.dk-component-accordion__meta {
  display: inline-flex; align-items: center; gap: var(--dk-component-accordion-meta-gap);
  flex: none;
  font-weight: var(--dk-primitive-font-weight-regular);
  font-size: var(--dk-component-accordion-description-font-size);
  line-height: var(--dk-component-accordion-description-line-height);
  color: var(--dk-component-accordion-description-color);
}

/* ── The icon, on the same clock as the panel ── */
.dk-component-accordion__icon {
  flex: none;
  width: var(--dk-component-accordion-icon-size);
  height: var(--dk-component-accordion-icon-size);
  color: var(--dk-component-accordion-icon-color);
  transition: transform var(--_acc-dur, var(--dk-component-accordion-open-duration)) var(--dk-component-accordion-easing),
              color var(--dk-motion-state-duration) var(--dk-motion-state-easing);
}
.dk-component-accordion__item[data-state="closing"] { --_acc-dur: var(--dk-component-accordion-close-duration); }
.dk-component-accordion__item:is([open]:not([data-state="closing"]), [data-state="opening"]) > .dk-component-accordion__summary .dk-component-accordion__icon[data-glyph="chevron"],
.dk-component-accordion__item:is([open]:not([data-state="closing"]), [data-state="opening"]) > .dk-component-accordion__summary .dk-component-accordion__icon:not([data-glyph]) {
  transform: rotate(180deg);
}
/* Plus: the vertical bar turns flat and the plus becomes a minus. */
.dk-component-accordion__icon-v {
  transform-box: fill-box; transform-origin: center;
  transition: transform var(--_acc-dur, var(--dk-component-accordion-open-duration)) var(--dk-component-accordion-easing);
}
.dk-component-accordion[data-icon="plus"] .dk-component-accordion__item:is([open]:not([data-state="closing"]), [data-state="opening"]) > .dk-component-accordion__summary .dk-component-accordion__icon-v {
  transform: rotate(90deg);
}

/* ── Disabled: aria-disabled on the summary. It stays focusable, so a reader
   can find it and hear why; it does not toggle. ── */
.dk-component-accordion__summary[aria-disabled="true"] { cursor: not-allowed; color: var(--dk-component-accordion-title-color-disabled); }
.dk-component-accordion__summary[aria-disabled="true"] .dk-component-accordion__description,
.dk-component-accordion__summary[aria-disabled="true"] .dk-component-accordion__meta { color: var(--dk-component-accordion-description-color-disabled); }
.dk-component-accordion__summary[aria-disabled="true"] .dk-component-accordion__icon,
.dk-component-accordion__summary[aria-disabled="true"] .dk-component-accordion__leading { color: var(--dk-component-accordion-icon-color-disabled); }

/* ── The panel ──────────────────────────────────────────────────────────────
   NO PADDING HERE, EVER. The height animates on this element, and anything
   on it is height it cannot lose: the first cut padded the element being
   clipped, so a "closed" panel was 12px tall and both ends of the motion
   jumped by that much. The padding lives on the content inside. It clips only
   while it is moving, so a focus ring in the content is never cut at rest. */
.dk-component-accordion__panel { display: block; }
.dk-component-accordion__item[data-state] > .dk-component-accordion__panel { overflow: hidden; }
.dk-component-accordion__content {
  /* The same space above as below (1 Oct): the row's block padding, so it
     follows the size. */
  padding: var(--_acc-padding-block, var(--dk-component-accordion-padding-block)) var(--_acc-padding-inline, var(--dk-component-accordion-padding-inline));
  font-family: var(--dk-component-accordion-font-family);
  font-size: var(--_acc-font-size, var(--dk-component-accordion-font-size));
  line-height: var(--_acc-line-height, var(--dk-component-accordion-line-height));
  color: var(--dk-component-accordion-content-color);
}
/* With a leading icon, the content lines up with the title, not the icon. */
.dk-component-accordion__item:has(> .dk-component-accordion__summary > .dk-component-accordion__leading) > .dk-component-accordion__panel > .dk-component-accordion__content {
  padding-inline-start: calc(var(--_acc-padding-inline, var(--dk-component-accordion-padding-inline)) + var(--dk-component-accordion-leading-size) + var(--dk-component-accordion-icon-gap));
}

/* ═══════════════════════════════════════ drift-kit:layer components/box/styles.css ═══════════════════════════════════════ */
/* ── Box ─────────────────────────────────────────────────────────────────────
   A grouped surface: a panel that separates what is in it from what is
   around it, optionally laid out as a responsive grid of facts.

   Purpose: A grouped surface: a panel that separates what is in it from what
     is around it, optionally laid out as a responsive grid of facts.
     data-radius="medium|large|xlarge" is the public way to set a Box's corner,
     whatever its data-size.

   Anatomy (every part optional):
     section.dk-component-box[data-variant][data-size][data-radius][data-tone][data-tone-fill][data-surface][data-interactive][data-align][data-sticky][data-flush="phone"]
       header.__header
         div.__heading > .__title + .__description?
         div.__actions?
       dl|div.__grid[data-columns="1..6"][data-dividers][data-align]   (style: --dk-box-grid-gap?)
         div.__cell[data-span="full"]?
           dt.__label + dd.__value        (a fact)
           … or anything

   THE FILL IS THE KIT'S. Every variant paints --dk-surface-current, so
   data-tone and data-surface on the box tint it AND remap the text and icons
   of everything inside: a Link, an icon button or a field in a primary box
   takes the primary box's colours with nothing written for it. The variant
   only decides how the box separates from what is around it.

   data-sticky keeps the box at the top of what scrolls, in its own paint
   (the page's surface for an untoned box; a toned or levelled one paints its
   fill, so stick a plain section around it instead). kit/sticky.css, which a
   plain section takes too: --dk-sticky-cover opts into a cover above it,
   --dk-sticky-bleed widens that cover, --dk-sticky-z-index lifts it.

   data-flush="phone" runs the box to the screen's sides below the kit's
   breakpoint (768px): no corner and no side edges, its top and bottom edges
   kept and no drop shadow, a band across the phone (the page bleeds it with
   its own margins).

   --dk-box-grid-gap (unset: the box's padding) sets the grid's gap, and its
   dividers stay in the middle of it: a grid of two facts set well apart with
   a line between them. It inherits, so set it on the grid itself: set on
   the box it reaches a box nested in a cell too.
   ── */
.dk-component-box {
  --_box-pad: var(--dk-component-box-padding);
  --_box-edge: var(--dk-component-box-border-color);
  --_box-line: var(--dk-component-box-line-color);
  --_box-band: var(--dk-component-box-band-padding);
  --_box-radius: var(--dk-component-box-radius);
  --_box-title-size: var(--dk-component-box-title-font-size);
  --_box-title-lh: var(--dk-component-box-title-line-height);
  --_box-desc-size: var(--dk-component-box-description-font-size);
  --_box-desc-lh: var(--dk-component-box-description-line-height);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--_box-pad);
  box-sizing: border-box;
  min-width: 0;
  padding: var(--_box-pad);
  border: var(--dk-component-box-border-width) solid var(--_box-edge);
  border-radius: var(--_box-radius);
  background: var(--dk-surface-current);
  color: var(--dk-text-default);
  font-family: var(--dk-component-box-font-family);
}
/* Five sizes; medium is the unmarked default. Past medium the corner and the
   header grow with the padding. */
.dk-component-box[data-size="xsmall"] { --_box-pad: var(--dk-component-box-xsmall-padding); --_box-band: var(--dk-component-box-xsmall-band-padding); }
.dk-component-box[data-size="small"] { --_box-pad: var(--dk-component-box-small-padding); --_box-band: var(--dk-component-box-small-band-padding); }
.dk-component-box[data-size="large"] {
  --_box-pad: var(--dk-component-box-large-padding);
  --_box-band: var(--dk-component-box-large-band-padding);
  --_box-radius: var(--dk-component-box-large-radius);
  --_box-title-size: var(--dk-component-box-large-title-font-size);
  --_box-title-lh: var(--dk-component-box-large-title-line-height);
  --_box-desc-size: var(--dk-component-box-large-description-font-size);
  --_box-desc-lh: var(--dk-component-box-large-description-line-height);
}
.dk-component-box[data-size="xlarge"] {
  --_box-pad: var(--dk-component-box-xlarge-padding);
  --_box-band: var(--dk-component-box-xlarge-band-padding);
  --_box-radius: var(--dk-component-box-xlarge-radius);
  --_box-title-size: var(--dk-component-box-xlarge-title-font-size);
  --_box-title-lh: var(--dk-component-box-xlarge-title-line-height);
  --_box-desc-size: var(--dk-component-box-xlarge-description-font-size);
  --_box-desc-lh: var(--dk-component-box-xlarge-description-line-height);
}

/* data-radius="medium|large|xlarge": the corner of that size, whatever the
   box's own size, so a small card can be a rung rounder without the large
   padding. After the sizes, at their weight, so it wins over data-size
   whichever attribute is written first. (5 Nov) */
.dk-component-box[data-radius="medium"] { --_box-radius: var(--dk-component-box-radius); }
.dk-component-box[data-radius="large"] { --_box-radius: var(--dk-component-box-large-radius); }
.dk-component-box[data-radius="xlarge"] { --_box-radius: var(--dk-component-box-xlarge-radius); }


/* ── Interactive: a box with data-interactive is a card you click. The
   interaction foundation lays a control out as a centred row, which would
   squeeze a card's stacked content, so the box keeps its column, stretched
   and started. data-align="center" centres it and keeps the column. The box's
   own padding and corner already outweigh the foundation's tier (:where()).
   Not the grid's data-align, which is on the grid. (5 Nov) ── */
.dk-component-box[data-interactive] { flex-direction: column; align-items: stretch; justify-content: flex-start; text-align: start; }
.dk-component-box[data-interactive][data-align="center"] { align-items: center; text-align: center; }
/* With a resting fill (data-interactive-fill), the foundation paints it: the
   box's own fill and edge outweighed the foundation's weight-zero ramp, so a
   clickable card grew and pressed but never changed colour (11 Nov). The
   fill reads the foundation's surface for the state; a raised or nested
   fill's edge steps that ramp's default, hover, active, on the same states the foundation
   keys (a control inside hovered keeps the card at rest). */
.dk-component-box:where([data-interactive][data-interactive-fill]) { background: var(--_ia-surface); }
/* A box is a well, not a field: its nested fill is the nested surface ramp
   (a step from the surface in both themes), where the foundation's nested
   is the field's, which in dark sits on the surface itself. */
.dk-component-box:where([data-interactive][data-interactive-fill="nested"]) {
  --_ia-rest: var(--dk-surface-nested-default);
  --_ia-hover: var(--dk-surface-nested-hover);
  --_ia-active: var(--dk-surface-nested-active);
}
.dk-component-box[data-interactive][data-interactive-fill="raised"] { --_box-edge: var(--dk-border-raised-default); }
.dk-component-box[data-interactive][data-interactive-fill="raised"]:where([data-pseudo-class="hover"]) { --_box-edge: var(--dk-border-raised-hover); }
@media (hover: hover) {
  .dk-component-box[data-interactive][data-interactive-fill="raised"]:where(:hover:not(:has(:is(.dk-component-button, .dk-component-icon-button, .dk-component-dropdown__trigger, .dk-component-select__trigger, .dk-component-checkbox, .dk-component-radio, .dk-component-switch, .dk-component-input__field, input, select, textarea, [data-interactive]):hover))) { --_box-edge: var(--dk-border-raised-hover); }
}
.dk-component-box[data-interactive][data-interactive-fill="raised"]:where(:active:not(:has(:is(.dk-component-button, .dk-component-icon-button, .dk-component-dropdown__trigger, .dk-component-select__trigger, .dk-component-checkbox, .dk-component-radio, .dk-component-switch, .dk-component-input__field, input, select, textarea, [data-interactive]):active)), [data-pseudo-class="active"]) { --_box-edge: var(--dk-border-raised-active); }
.dk-component-box[data-interactive][data-interactive-fill="nested"] { --_box-edge: var(--dk-border-nested-default); }
.dk-component-box[data-interactive][data-interactive-fill="nested"]:where([data-pseudo-class="hover"]) { --_box-edge: var(--dk-border-nested-hover); }
@media (hover: hover) {
  .dk-component-box[data-interactive][data-interactive-fill="nested"]:where(:hover:not(:has(:is(.dk-component-button, .dk-component-icon-button, .dk-component-dropdown__trigger, .dk-component-select__trigger, .dk-component-checkbox, .dk-component-radio, .dk-component-switch, .dk-component-input__field, input, select, textarea, [data-interactive]):hover))) { --_box-edge: var(--dk-border-nested-hover); }
}
.dk-component-box[data-interactive][data-interactive-fill="nested"]:where(:active:not(:has(:is(.dk-component-button, .dk-component-icon-button, .dk-component-dropdown__trigger, .dk-component-select__trigger, .dk-component-checkbox, .dk-component-radio, .dk-component-switch, .dk-component-input__field, input, select, textarea, [data-interactive]):active)), [data-pseudo-class="active"]) { --_box-edge: var(--dk-border-nested-active); }

/* ── Variants: how it separates ── */
.dk-component-box[data-variant="raised"] {
  --_box-edge: var(--dk-component-box-raised-border-color);
  box-shadow: var(--dk-component-box-raised-shadow);
}
.dk-component-box[data-variant="flat"] { border-color: transparent; }
/* A well: the shadow sits inside the edge, over the fill and under the
   content (z-index -1 in the box's own stacking context), so it never lies
   over text on a small box. */
.dk-component-box[data-variant="inset"] {
  --_box-edge: var(--dk-component-box-inset-border-color);
  isolation: isolate;
}
.dk-component-box[data-variant="inset"]::after {
  content: '';
  z-index: -1;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: var(--dk-component-box-inset-shadow);
}

/* data-flush="phone" (9 Nov 2026): a band across a phone, no corner and no
   side edges, below the kit's one breakpoint (kit/breakpoint.css). After the variants, so a raised box's
   shadow goes too. */
@media (max-width: 768px) {
  .dk-component-box[data-flush="phone"] { --_box-radius: 0; box-shadow: none; }
  .dk-component-box:where([data-flush="phone"]) { border-inline-width: 0; }
}

/* ── Tone: the edge takes the kit's own hairline, the one the tone layer
   keeps right for the tone, its level, its solid fill and inverse
   (--dk-border-hairline-current, which Accordion, Divider and Table use too).
   A solid fill has no edge. The fill, the text and the icons are the tone
   layer's, not this file's. ── */
.dk-component-box[data-tone]:not([data-tone="none"]) { --_box-edge: var(--dk-border-hairline-current); }
.dk-component-box[data-tone]:not([data-tone="none"])[data-tone-fill="solid"] { --_box-edge: transparent; }

/* ── Header: a title (and a line under it) beside its actions, wrapping when
   they do not fit side by side ── */
.dk-component-box__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--dk-spacing-2) var(--_box-pad);
}
.dk-component-box__heading { display: flex; flex-direction: column; gap: var(--dk-component-box-header-gap); min-width: 0; }
.dk-component-box__title {
  margin: 0;
  font-size: var(--_box-title-size);
  line-height: var(--_box-title-lh);
  font-weight: var(--dk-component-box-title-font-weight);
  color: var(--dk-component-box-title-color);
}
.dk-component-box__description {
  margin: 0;
  font-size: var(--_box-desc-size);
  line-height: var(--_box-desc-lh);
  color: var(--dk-component-box-description-color);
}
.dk-component-box__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dk-spacing-2); }

/* ── Header band (13 Oct): a header that carries data-surface, one level up
   from the box (React's headerBand works it out; a level-2 box steps back to
   1), runs edge to edge on that level's fill with a hairline under it. The
   level layer re-ramps everything in it, actions included. On a toned box the
   band repeats the box's data-tone (and data-tone-fill): a level inside a
   tone needs the tone on the same element, or it falls to the neutral
   ladder. ── */
.dk-component-box > .dk-component-box__header[data-surface] {
  margin: calc(-1 * var(--_box-pad)) calc(-1 * var(--_box-pad)) 0;
  padding: var(--_box-band) var(--_box-pad);
  border-block-end: var(--dk-component-box-line-width) solid var(--dk-border-hairline-current);
  border-start-start-radius: calc(var(--_box-radius) - var(--dk-component-box-border-width));
  border-start-end-radius: calc(var(--_box-radius) - var(--dk-component-box-border-width));
  background: var(--dk-surface-current);
  align-items: center;
}

/* ── The grid ──
   data-columns IS A MAXIMUM. Each track is the larger of the column floor and
   an equal share of the row for that many columns, so the grid shows that
   many while they fit and wraps to fewer, on its own, once a column would be
   narrower than the floor. It answers the box's own width, not the
   viewport's: a box in a sidebar wraps on a wide screen, one in a wide modal
   does not on a tablet. No media query, no container query, no script. */
.dk-component-box__grid {
  --_box-cols: 1;
  /* The gap, the box's padding unless --dk-box-grid-gap says otherwise; the
     dividers sit in the middle of it. */
  --_box-gap: var(--dk-box-grid-gap, var(--_box-pad));
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--dk-component-box-column-min), calc((100% - (var(--_box-cols) - 1) * var(--_box-gap)) / var(--_box-cols))), 1fr));
  gap: var(--_box-gap);
  /* A box with no set width (a flex row with no basis, fit-content, an
     inline-block) would otherwise shrink to almost nothing: percentage tracks
     give the grid no width of its own. */
  min-inline-size: min(100%, var(--dk-component-box-column-min));
  margin: 0;
  padding: 0;
}
.dk-component-box__grid[data-columns="1"] { --_box-cols: 1; }
.dk-component-box__grid[data-columns="2"] { --_box-cols: 2; }
.dk-component-box__grid[data-columns="3"] { --_box-cols: 3; }
.dk-component-box__grid[data-columns="4"] { --_box-cols: 4; }
.dk-component-box__grid[data-columns="5"] { --_box-cols: 5; }
.dk-component-box__grid[data-columns="6"] { --_box-cols: 6; }
/* Align moves each cell's CONTENT; the cells themselves stay stretched to the
   row, so a column divider is always the full height of the row. */
.dk-component-box__grid[data-align] > .dk-component-box__cell { display: flex; flex-direction: column; }
.dk-component-box__grid[data-align="start"] > .dk-component-box__cell { justify-content: flex-start; }
.dk-component-box__grid[data-align="center"] > .dk-component-box__cell { justify-content: center; }
.dk-component-box__grid[data-align="end"] > .dk-component-box__cell { justify-content: flex-end; }

.dk-component-box__cell { position: relative; min-width: 0; }
/* A whole row at any column count. A numeric span is deliberately not
   offered: span 2 in a grid that has wrapped to one column invents a second. */
.dk-component-box__cell[data-span="full"] { grid-column: 1 / -1; }

/* ── Dividers that survive the wrap ──
   Each cell draws its OWN leading line and its OWN top line, in the gap
   before it. The grid clips whatever falls outside its box, which is exactly
   the first column's leading lines and the first row's top lines, so a row
   that wrapped never starts with a stray line, at any width, with no
   :nth-child arithmetic and no script. The clip keeps a little room outside
   the box (focus-room, less than half the gap) so a focus ring on a control
   at the edge is not cut off. Top lines run the full gap either side, so they
   meet each other; with both divided, the leading lines run the full gap up
   and down too, so the two meet at every junction. The clip also clips
   anything positioned outside a cell (a non-portalled popover): portal it. */
.dk-component-box__grid[data-dividers] {
  /* clip-path, not overflow: clip with overflow-clip-margin, which Safari
     does not support (it fell back to no room at all). The room outside the
     box is the focus ring's width, capped below half the gap so the edge
     lines it exists to remove stay removed. */
  --_box-room: min(calc(var(--_box-gap) / 2 - var(--dk-component-box-line-width)), var(--dk-component-box-focus-room));
  clip-path: inset(calc(-1 * var(--_box-room)));
}
.dk-component-box__grid:is([data-dividers="columns"], [data-dividers="both"]) > .dk-component-box__cell::before,
.dk-component-box__grid:is([data-dividers="rows"], [data-dividers="both"]) > .dk-component-box__cell::after {
  content: '';
  position: absolute;
  pointer-events: none;
  background: var(--_box-line);
}
.dk-component-box__grid:is([data-dividers="columns"], [data-dividers="both"]) > .dk-component-box__cell::before {
  top: 0;
  bottom: 0;
  inset-inline-start: calc(var(--_box-gap) / -2 - var(--dk-component-box-line-width) / 2);
  width: var(--dk-component-box-line-width);
}
.dk-component-box__grid[data-dividers="both"] > .dk-component-box__cell::before {
  top: calc(var(--_box-gap) / -2);
  bottom: calc(var(--_box-gap) / -2);
}
.dk-component-box__grid:is([data-dividers="rows"], [data-dividers="both"]) > .dk-component-box__cell::after {
  top: calc(var(--_box-gap) / -2 - var(--dk-component-box-line-width) / 2);
  inset-inline: calc(var(--_box-gap) / -2);
  height: var(--dk-component-box-line-width);
}
/* With rows divided, a header is separated from the grid the same way. */
.dk-component-box:has(> .dk-component-box__grid:is([data-dividers="rows"], [data-dividers="both"])) > .dk-component-box__header:not([data-surface]) {
  padding-block-end: calc(var(--_box-pad) / 2);
  margin-block-end: calc(var(--_box-pad) / -2);
  border-block-end: var(--dk-component-box-line-width) solid var(--_box-line);
}

/* ── Facts: a label in small caps over its value ── */
.dk-component-box__cell:has(> .dk-component-box__label) { display: flex; flex-direction: column; gap: var(--dk-component-box-fact-gap); }
.dk-component-box__label {
  margin: 0;
  font-size: var(--dk-component-box-label-font-size);
  line-height: var(--dk-component-box-label-line-height);
  letter-spacing: var(--dk-component-box-label-letter-spacing);
  font-weight: var(--dk-component-box-label-font-weight);
  text-transform: uppercase;
  color: var(--dk-component-box-label-color);
}
.dk-component-box__value {
  margin: 0;
  font-size: var(--dk-component-box-value-font-size);
  line-height: var(--dk-component-box-value-line-height);
  font-weight: var(--dk-component-box-value-font-weight);
  color: var(--dk-component-box-value-color);
  overflow-wrap: anywhere;
}

/* ═══════════════════════════════════ drift-kit:layer components/vehicle/styles.css ═══════════════════════════════════ */
/* ── Vehicle ──────────────────────────────────────────────────────────────────
   A photo of a car (Vouch's car-line photos, trimmed to the car: see
   vehicles/manifest.json), in two looks.

   Purpose: A photo of a vehicle, from the car-line photo catalogue trimmed to
     the car: on its own at any size, or stood on a panel the car overflows.
     304 models ship with the kit.

   Anatomy:
     figure.dk-component-vehicle[data-variant="plain|showcase"][data-padding][data-size][data-tone][data-tone-fill][data-surface][data-on="raised"][data-radius="large|xlarge"][data-headroom="tall"][data-empty]
       img.dk-component-vehicle__image[alt]
     (empty showcase, in place of the image:)
       div.dk-component-vehicle__placeholder > an icon
       button.dk-component-button.dk-component-vehicle__action

   PLAIN (the default) is the photo alone, as wide as what holds it: a
   subscription hero, a plan card, a 48px table thumbnail. The 2:1 box with
   the car contained and centred means a list of different models lines up.

   SHOWCASE stands the car on a panel. The panel's top edge is the headroom
   (growing faster than the width, at least a padding step) above the car and its bottom edge two thirds down the car, so the
   lower third of the car overflows onto the page. The figure has side padding,
   the photo the headroom as its top margin, so the panel's area is the
   headroom plus the image and the panel the headroom plus two thirds of the image.

   ON RAISED (data-on="raised") is for a showcase standing on a raised
   surface: its panel is level 1 in light and level 2 in dark, where the
   default level 1 is the raised surface itself. The same markup in both
   themes. A tone or a level on the vehicle still wins.

   data-radius="large|xlarge" sets the panel's corner (large is the default).
   data-headroom="tall" puts a floor of spacing-12 under the headroom, for a
   card-sized showcase whose growing headroom would be a sliver.

   EMPTY (data-empty, showcase only) is a showcase with no car, the end of a
   run of them ("see all"): a photo-sized slot keeps its panel as tall as its
   neighbours', the placeholder holds an icon centred on the panel, and the
   action (a Button) sits centred astride the panel's foot. The author makes
   the whole figure the link and takes the Button out of the tab order. The action takes the card's cursor
   (cursor: inherit), so a host rule that gives a tab-out button the arrow
   does not show it inside a clickable card.

   A container may step the panel on a state through --_v-panel-hover, which
   wins over every panel choice: a Carousel row with
   data-item-hover="showcase" does it for the hovered item.
   ── */
.dk-component-vehicle {
  --_v-pad: var(--dk-component-vehicle-padding);
  --_v-panel: var(--dk-component-vehicle-panel);
  --_v-radius: var(--dk-component-vehicle-radius);
  display: block;
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  background: none;
}
.dk-component-vehicle[data-size="small"] { --_v-pad: var(--dk-component-vehicle-small-padding); }
.dk-component-vehicle[data-size="large"] { --_v-pad: var(--dk-component-vehicle-large-padding); }
/* Standing on a raised surface: a level up from it in either theme. */
.dk-component-vehicle[data-on="raised"] { --_v-panel: var(--dk-component-vehicle-on-raised-panel); }
/* A tone or a level on the vehicle: the panel is the kit's own surface. */
.dk-component-vehicle:is([data-tone]:not([data-tone="none"]), [data-surface]) { --_v-panel: var(--dk-surface-current); }

.dk-component-vehicle[data-radius="large"] { --_v-radius: var(--dk-component-vehicle-radius); }
.dk-component-vehicle[data-radius="xlarge"] { --_v-radius: var(--dk-component-vehicle-xlarge-radius); }

/* Plain with room around it: none unless data-padding asks (17 Oct). */
.dk-component-vehicle:not([data-variant="showcase"]) { padding: var(--_v-inset, 0); }
.dk-component-vehicle[data-padding="small"] { --_v-inset: var(--dk-component-vehicle-small-inset); }
.dk-component-vehicle[data-padding="medium"] { --_v-inset: var(--dk-component-vehicle-inset); }
.dk-component-vehicle[data-padding="large"] { --_v-inset: var(--dk-component-vehicle-large-inset); }

.dk-component-vehicle__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--dk-component-vehicle-ratio);
  object-fit: contain;
  object-position: center;
}

.dk-component-vehicle[data-variant="showcase"] {
  position: relative;
  isolation: isolate;
  /* A grid, so the panel can measure against the photo's own grid area: a
     figure stretched by a grid or flex row, given a height, or holding a
     figcaption is taller than padding plus photo, and 100% of the figure
     would put the panel's edge too low on the car. */
  display: grid;
  align-content: start;
  /* Its own container, so the headroom (cqi) is a share of ITS width; and
     so a width, because containment drops the photo's intrinsic size. */
  container-type: inline-size;
  width: 100%;
  --_v-head: max(var(--_v-pad), var(--dk-component-vehicle-headroom));
  /* The panel's height, read where 100% is the photo's grid area (the panel
     and the empty showcase's parts, each placed in that area). */
  --_v-panel-height: calc(var(--_v-head) + (100% - var(--_v-head)) * var(--dk-component-vehicle-panel-reach));
  padding: 0 var(--_v-pad);
}
.dk-component-vehicle[data-variant="showcase"][data-headroom="tall"] {
  --_v-head: max(var(--_v-pad), var(--dk-component-vehicle-tall-headroom-min), var(--dk-component-vehicle-headroom));
}
/* The headroom is the photo's margin, inside the panel's grid area. */
.dk-component-vehicle[data-variant="showcase"] > .dk-component-vehicle__image { margin-top: var(--_v-head); }
.dk-component-vehicle[data-variant="showcase"]::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset-inline: 0;
  /* An absolutely positioned grid child takes the area it names as its
     containing block: from the figure's padding edge down to the end of the
     photo's row, so 100% is the padding plus the photo, whatever follows. */
  grid-row: auto / 2;
  grid-column: auto / auto;
  top: 0;
  height: var(--_v-panel-height);
  border-radius: var(--_v-radius);
  background: var(--_v-panel-hover, var(--_v-panel));
}

/* ── Empty ── The slot is the photo's: the same width, ratio and headroom,
   in the photo's row, so the panel measures the same area a car's does. */
.dk-component-vehicle[data-variant="showcase"][data-empty]::after {
  content: '';
  display: block;
  grid-row: 1;
  width: 100%;
  aspect-ratio: var(--dk-component-vehicle-ratio);
  margin-top: var(--_v-head);
}
/* The placeholder covers the panel and centres its icon on it. */
.dk-component-vehicle[data-variant="showcase"] > .dk-component-vehicle__placeholder {
  position: absolute;
  grid-row: auto / 2;
  grid-column: auto / auto;
  top: 0;
  inset-inline: 0;
  height: var(--_v-panel-height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--_v-pad);
}
.dk-component-vehicle__placeholder > * {
  flex: none;
  width: var(--dk-component-vehicle-placeholder-size);
  height: var(--dk-component-vehicle-placeholder-size);
}
/* The action, centred on the panel's foot (translate, so the Button's own
   press transform still works). */
.dk-component-vehicle[data-variant="showcase"] > .dk-component-vehicle__action {
  position: absolute;
  grid-row: auto / 2;
  grid-column: auto / auto;
  left: 50%;
  top: calc(var(--_v-panel-height) + var(--dk-component-vehicle-action-offset));
  translate: -50% -50%;
  white-space: nowrap;
  /* Button sizes itself height: fit-content; WebKit resolves that, for an
     absolutely placed grid item, against the whole grid area (the action
     stretched to about 175px on iPhone). auto shrinks to the content in
     every engine. */
  height: auto;
}
/* Decorative inside a clickable figure or card: shows the card's cursor. */
.dk-component-vehicle[data-empty] > .dk-component-vehicle__action { cursor: inherit; }

/* ══════════════════════════════════ drift-kit:layer components/checkbox/styles.css ══════════════════════════════════ */
/* ── Checkbox ───────────────────────────────────────────────────────────────
   A visually-hidden native <input type="checkbox"> drives a painted
   .dk-component-checkbox__indicator. The input is the control: real keyboard
   behaviour, real form participation, real accessibility tree, no JavaScript
   and no state to keep anywhere. The indicator is decoration over the top.

   PRIVATE SLOTS, the pattern icon-button uses and for the same reason. Every
   colour the indicator paints comes from a --_cb-* slot declared on the root.
   The state rules set slots; the paint rules read them. That is what lets the
   live :hover and the docs' forced [data-pseudo-class="hover"] be one set of
   values rather than two that drift.

   THE GLYPHS ARE A TICK AND A DASH, and only the tick is markup. The tick is an
   <svg> the consumer supplies, because a tick is a real icon and the kit has a
   library of them. The indeterminate dash is a ::after bar, because a 2px
   rounded rectangle is not an icon and asking every call site to carry a second
   <svg> for it would be a tax on the common case.

   Purpose: Any number of these, or none. A native input, a painted box,
     three sizes, and a mixed state for a parent row.

   Anatomy:
     label.dk-component-checkbox[data-size]
       span.dk-component-checkbox__box
         input.dk-component-checkbox__input
         span.dk-component-checkbox__indicator > svg
       span.dk-component-checkbox__text
         span.dk-component-checkbox__label
         span.dk-component-checkbox__desc                                    */
.dk-component-checkbox {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--dk-component-checkbox-gap);
  align-items: start; width: fit-content; cursor: pointer;
  /* Room for what a thicker border tier adds to the indicator, which spills
     evenly past the label's first line: a list of them keeps its air (8 Nov). */
  padding-block: calc(var(--_cb-grow) / 2);

  /* ── The slots, at rest and unchecked: a small outlined box on a form, which
     is the same object a text field is, so it paints the same palette. See
     tokens/mapped/field.css for why that palette exists. ── */
  --_cb-surface: var(--dk-component-checkbox-surface-default);
  --_cb-surface-hover: var(--dk-component-checkbox-surface-hover);
  --_cb-surface-active: var(--dk-component-checkbox-surface-active);
  --_cb-border: var(--dk-component-checkbox-border-default);
  --_cb-border-hover: var(--dk-component-checkbox-border-hover);
  --_cb-border-active: var(--dk-component-checkbox-border-active);
  --_cb-ring: var(--dk-component-checkbox-ring);
  --_cb-glyph: var(--dk-component-checkbox-glyph);
  --_cb-size: var(--dk-component-checkbox-size);
  /* What a thicker border tier adds to the box, both sides: the box grows
     outward and the glyph inside it stays put (8 Nov). */
  --_cb-grow: calc(2 * (var(--dk-component-checkbox-border-width) - var(--dk-component-checkbox-border-width-base)));
  --_cb-glyph-size: var(--dk-component-checkbox-glyph-size);
  --_cb-dash-thickness: var(--dk-component-checkbox-dash-thickness);
  --_cb-label-size: var(--dk-component-checkbox-label-font-size);
  --_cb-label-leading: var(--dk-component-checkbox-label-line-height);
}
.dk-component-checkbox[hidden] { display: none; }

/* ── NO LABEL AT ALL, which is a real shape and not a degenerate one: a select
   row checkbox in a table, a select all in its header, a radio in a comparison
   grid. Each of those takes its name from the column or the row it sits in,
   through aria-label or aria-labelledby on the input, and printing the name
   beside every one of them would be noise.

   Omit the __text span entirely and the control collapses to its box. Without
   this the second grid track and the gap before it survive an absent label:
   measured, the root stayed 26px wide around a 20px box, six pixels of dead
   space on the right that pushed everything after it out of line.

   An EMPTY __text is treated the same way, because a template that renders the
   wrapper unconditionally and the label conditionally is the common way to
   arrive here. */
.dk-component-checkbox:not(:has(.dk-component-checkbox__text)),
.dk-component-checkbox:has(.dk-component-checkbox__text:empty) {
  grid-template-columns: auto;
  column-gap: 0;
}
/* And the empty wrapper itself goes, or it wraps to a second row and adds its
   own line height back: 20 x 30 against the 20 x 24 an absent one gives. */
.dk-component-checkbox__text:empty { display: none; }

/* ── Sizes. The box rides Input's ladder, 16 / 20 / 24, so a checkbox and a
   field's leading icon are the same size at the same rung. ── */
.dk-component-checkbox[data-size="small"] {
  --_cb-size: var(--dk-component-checkbox-small-size);
  --_cb-glyph-size: var(--dk-component-checkbox-small-glyph-size);
  --_cb-dash-thickness: var(--dk-component-checkbox-small-dash-thickness);
  --_cb-label-size: var(--dk-component-checkbox-small-label-font-size);
  --_cb-label-leading: var(--dk-component-checkbox-small-label-line-height);
}
.dk-component-checkbox[data-size="large"] {
  --_cb-size: var(--dk-component-checkbox-large-size);
  --_cb-glyph-size: var(--dk-component-checkbox-large-glyph-size);
  --_cb-dash-thickness: var(--dk-component-checkbox-large-dash-thickness);
  --_cb-label-size: var(--dk-component-checkbox-large-label-font-size);
  --_cb-label-leading: var(--dk-component-checkbox-large-label-line-height);
}

/* ── Chosen. Checked and indeterminate are one look: both mean "this option is
   engaged", and a half-checked parent row that painted itself like an empty one
   would be a lie. Only the glyph differs. ── */
.dk-component-checkbox:has(.dk-component-checkbox__input:checked),
.dk-component-checkbox:has(.dk-component-checkbox__input:indeterminate) {
  --_cb-surface: var(--dk-component-checkbox-checked-surface-default);
  --_cb-surface-hover: var(--dk-component-checkbox-checked-surface-hover);
  --_cb-surface-active: var(--dk-component-checkbox-checked-surface-active);
  --_cb-border: var(--dk-component-checkbox-checked-border-default);
  --_cb-border-hover: var(--dk-component-checkbox-checked-border-hover);
  --_cb-border-active: var(--dk-component-checkbox-checked-border-active);
}

/* ── aria-invalid, spelled the way Input spells it. The border carries it and
   the fill does not: a red empty box is an error, a red FILLED box would read
   as a chosen option in a status colour it does not have. ── */
.dk-component-checkbox:has(.dk-component-checkbox__input[aria-invalid="true"]) {
  --_cb-border: var(--dk-component-checkbox-error-border-default);
  --_cb-border-hover: var(--dk-component-checkbox-error-border-hover);
  --_cb-border-active: var(--dk-component-checkbox-error-border-hover);
  --_cb-ring: var(--dk-component-checkbox-error-ring);
}

/* ── Disabled. An empty disabled box is refusing input; a ticked disabled box
   is reporting a value it will not let you change, and its glyph has to stay
   readable on it. Two different looks, which is why there are two rules. ── */
.dk-component-checkbox:has(.dk-component-checkbox__input:disabled) {
  cursor: not-allowed;
  --_cb-surface: var(--dk-component-checkbox-disabled-surface);
  --_cb-border: var(--dk-component-checkbox-disabled-border);
}
.dk-component-checkbox:has(.dk-component-checkbox__input:disabled:checked),
.dk-component-checkbox:has(.dk-component-checkbox__input:disabled:indeterminate) {
  --_cb-surface: var(--dk-component-checkbox-disabled-checked-surface);
  --_cb-border: var(--dk-component-checkbox-disabled-checked-border);
  --_cb-glyph: var(--dk-component-checkbox-disabled-glyph);
}

/* ── The box and the input on top of it ── */
/* THE BOX IS AS TALL AS ONE LINE OF ITS LABEL, and the indicator centres
   inside it. The obvious shape, a box exactly as big as the indicator with
   align-items: start above it, puts the indicator's TOP against the text
   block's top, and the indicator is shorter than the line box it sits beside:
   16 against 20, 20 against 24, 24 against 28. Measured, the indicator's centre
   sat 2.0px above the first line's centre at all three sizes, in both themes,
   with and without a description.

   Centring on the line box rather than on the text block is what keeps it right
   when a description is added: the indicator belongs to the first line, not to
   the paragraph. The input stretches over the whole cell, so the extra height
   is hit target rather than dead space. */
.dk-component-checkbox__box {
  position: relative; display: grid; place-items: center;
  width: calc(var(--_cb-size) + var(--_cb-grow)); min-height: var(--_cb-label-leading); flex: 0 0 auto;
}
.dk-component-checkbox__input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: inherit;
}

.dk-component-checkbox__indicator {
  display: grid; place-items: center;
  width: calc(var(--_cb-size) + var(--_cb-grow)); height: calc(var(--_cb-size) + var(--_cb-grow)); box-sizing: border-box;
  /* The growth spills evenly above and below, so the box still centres on
     the label's first line and the row keeps its height. */
  margin-block: calc(var(--_cb-grow) / -2);
  border: var(--dk-component-checkbox-border-width) solid var(--_cb-border);
  background: var(--_cb-surface);
  border-radius: var(--dk-component-checkbox-radius);
  color: var(--_cb-glyph);
  box-shadow: 0 0 0 var(--dk-component-checkbox-halo-width) var(--dk-component-checkbox-halo);
  transition: background-color var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              border-color var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              box-shadow var(--dk-motion-state-duration) var(--dk-motion-state-easing);
  pointer-events: none;
}

/* The tick. currentColor, never a literal, so the glyph can move per theme with
   the fill under it: white on a darkening light-theme ladder, a deep primary on
   a brightening dark-theme one. */
/* BOTH GLYPHS SHARE ONE GRID CELL, so each is centred by the indicator's own
   place-items rather than by an absolute element's static position, which is
   a different thing in a grid and was a pixel out. */
.dk-component-checkbox__indicator svg {
  grid-area: 1 / 1;
  width: var(--_cb-glyph-size); height: var(--_cb-glyph-size);
  stroke: currentColor; stroke-width: var(--dk-component-checkbox-glyph-stroke);
  fill: none; opacity: 0;
  /* Written at rest so the press below has something to transition FROM: a
     transform that only exists in the pressed rule animates in and snaps back,
     because there is no starting value to return to. */
  transform: scale(1);
  /* Opacity steps, and only once the undraw below has finished, so the tick
     is seen leaving. */
  transition: opacity 0s linear var(--dk-component-checkbox-glyph-undraw-duration),
              transform var(--dk-motion-feedback-duration) var(--dk-motion-feedback-easing);
}
/* THE TICK DRAWS ITSELF: one dash as long as the box, pushed off the stroke by
   its own length at rest and brought home when checked. Undrawing is the same
   offset running back, so it retracts toward where it started. */
.dk-component-checkbox__indicator svg :is(path, polyline, line) {
  stroke-dasharray: var(--dk-component-checkbox-glyph-draw-length);
  stroke-dashoffset: var(--dk-component-checkbox-glyph-draw-length);
  transition: stroke-dashoffset var(--dk-component-checkbox-glyph-undraw-duration) var(--dk-component-checkbox-glyph-undraw-easing);
}
.dk-component-checkbox__input:checked:not(:indeterminate) ~ .dk-component-checkbox__indicator svg :is(path, polyline, line) {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--dk-component-checkbox-glyph-draw-duration) var(--dk-component-checkbox-glyph-draw-easing) var(--dk-component-checkbox-glyph-draw-delay);
}
/* The dash. Drawn rather than supplied, see the header. */
.dk-component-checkbox__indicator::after {
  grid-area: 1 / 1;
  content: ""; display: block;
  width: calc(var(--_cb-size) * 0.5);
  height: var(--_cb-dash-thickness);
  border-radius: var(--dk-border-radius-200);
  background: currentColor; opacity: 0;
  transform: scale(1);
  transition: opacity var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              transform var(--dk-motion-feedback-duration) var(--dk-motion-feedback-easing);
}
.dk-component-checkbox__input:checked:not(:indeterminate) ~ .dk-component-checkbox__indicator svg {
  opacity: 1;
  /* Shown as the draw starts, not before: at rest the dash's round cap would
     sit on the stroke's first point as a dot through the wait. */
  transition: opacity 0s linear var(--dk-component-checkbox-glyph-draw-delay), transform var(--dk-motion-feedback-duration) var(--dk-motion-feedback-easing);
}
/* Indeterminate wins over checked, because the native property does: a checkbox
   can be both, and the browser reports the mixed state to assistive technology
   regardless of `checked`. The paint has to agree with what is announced. */
.dk-component-checkbox__input:indeterminate ~ .dk-component-checkbox__indicator::after { opacity: 1; }
.dk-component-checkbox__input:indeterminate ~ .dk-component-checkbox__indicator svg { opacity: 0; }

/* ── Live states. Hover and press sit on the ROOT, because the root is the
   <label>: pointing at the words is pointing at the control, and a box that
   only lit up over its own 20 pixels would feel broken.

   Hover defers to press and to focus for the reason input/styles.css records:
   the :not(:has(...)) guard carries its argument's specificity, so an
   unguarded hover outranks both and wins every time the pointer is still there.
   :not([data-pseudo-class]) keeps the live rules out of the way of the docs'
   forced ones, which are a different selector and cannot otherwise compete. ── */
@media (hover: hover) {
  .dk-component-checkbox:hover:not(:has(.dk-component-checkbox__input:disabled)):not(:active):not(:has(.dk-component-checkbox__input:focus-visible)):not([data-pseudo-class]) .dk-component-checkbox__indicator {
    background: var(--_cb-surface-hover);
    border-color: var(--_cb-border-hover);
  }
}
.dk-component-checkbox:active:not(:has(.dk-component-checkbox__input:disabled)):not([data-pseudo-class]) .dk-component-checkbox__indicator {
  background: var(--_cb-surface-active);
  border-color: var(--_cb-border-active);
}
/* THE GLYPH GOES WITH IT. The box already darkens under the finger, which is
   the surface answering; the mark inside it shrinking is the control answering,
   and it is the part you are actually looking at while you press. Both marks,
   the tick and the mixed dash, because they occupy the same slot and a press
   that moved one and not the other would read as two different components.
   Only the glyph scales, never the indicator: the box is what the hit target
   and the focus ring are measured against, and shrinking it would move both. */
.dk-component-checkbox:active:not(:has(.dk-component-checkbox__input:disabled)):not([data-pseudo-class]) .dk-component-checkbox__indicator svg,
.dk-component-checkbox:active:not(:has(.dk-component-checkbox__input:disabled)):not([data-pseudo-class]) .dk-component-checkbox__indicator::after {
  transform: scale(var(--dk-component-checkbox-glyph-scale-active));
}
/* INSIDE A LARGER LABEL (a Choice card, whose whole card is the label): the
   label is the hit area, so pointing at or pressing it is pointing at or
   pressing this control. :not(label) keeps it to a root that is not itself the
   label, which the rules above already cover. */
@media (hover: hover) {
  label:hover:not(:active) .dk-component-checkbox:not(label):not(:has(.dk-component-checkbox__input:disabled)):not(:has(.dk-component-checkbox__input:focus-visible)):not([data-pseudo-class]) .dk-component-checkbox__indicator {
    background: var(--_cb-surface-hover);
    border-color: var(--_cb-border-hover);
  }
}
label:active .dk-component-checkbox:not(label):not(:has(.dk-component-checkbox__input:disabled)):not([data-pseudo-class]) .dk-component-checkbox__indicator {
  background: var(--_cb-surface-active);
  border-color: var(--_cb-border-active);
}
label:active .dk-component-checkbox:not(label):not(:has(.dk-component-checkbox__input:disabled)):not([data-pseudo-class]) .dk-component-checkbox__indicator svg,
label:active .dk-component-checkbox:not(label):not(:has(.dk-component-checkbox__input:disabled)):not([data-pseudo-class]) .dk-component-checkbox__indicator::after {
  transform: scale(var(--dk-component-checkbox-glyph-scale-active));
}
.dk-component-checkbox:has(.dk-component-checkbox__input:focus-visible):not([data-pseudo-class]) .dk-component-checkbox__indicator {
  border-color: var(--dk-component-checkbox-focus-border);
  box-shadow: 0 0 0 var(--dk-component-checkbox-halo-width) var(--dk-component-checkbox-halo),
              0 0 0 var(--dk-component-checkbox-focus-ring-width) var(--_cb-ring);
}

/* ── The same three states, forced, for the documentation's state control.
   They read the same slots, so there is one set of values. ── */
.dk-component-checkbox[data-pseudo-class="hover"] .dk-component-checkbox__indicator {
  background: var(--_cb-surface-hover); border-color: var(--_cb-border-hover);
}
.dk-component-checkbox[data-pseudo-class="active"] .dk-component-checkbox__indicator {
  background: var(--_cb-surface-active); border-color: var(--_cb-border-active);
}
.dk-component-checkbox[data-pseudo-class="active"] .dk-component-checkbox__indicator svg,
.dk-component-checkbox[data-pseudo-class="active"] .dk-component-checkbox__indicator::after {
  transform: scale(var(--dk-component-checkbox-glyph-scale-active));
}
.dk-component-checkbox[data-pseudo-class="focus"] .dk-component-checkbox__indicator {
  border-color: var(--dk-component-checkbox-focus-border);
  box-shadow: 0 0 0 var(--dk-component-checkbox-halo-width) var(--dk-component-checkbox-halo),
              0 0 0 var(--dk-component-checkbox-focus-ring-width) var(--_cb-ring);
}

/* ── Text. The label sits on the first line of the box by construction: both
   use the same line-height rung, so a one-line label and a 20px box centre on
   each other without a magic number. ── */
.dk-component-checkbox__text { display: grid; gap: var(--dk-component-checkbox-text-gap); min-width: 0; }
.dk-component-checkbox__label {
  font-family: var(--dk-component-checkbox-label-font-family);
  font-size: var(--_cb-label-size); line-height: var(--_cb-label-leading);
  font-weight: var(--dk-component-checkbox-label-font-weight);
  color: var(--dk-component-checkbox-label-color);
}
/* ── THE DESCRIPTION MUST LEAVE THE ACCESSIBLE NAME, and markup is the only
   place that can do it. The root is a <label>, so everything inside it is part
   of the control's NAME: measured in Chromium, a described checkbox announced as
   "Weekly summary A digest of everything that changed." and had no description
   at all. aria-describedby on its own makes it worse, the same words then being
   announced twice, as the name and again as the description.

   So the __desc span carries aria-hidden="true" AND an id the input points at
   with aria-describedby. The span is hidden from the name traversal and still
   read when referenced explicitly, which is what separates the two, and it
   stays on screen throughout. Both React components do this for you.

     <input class="dk-component-checkbox__input" aria-describedby="x-desc">
     ...
     <span class="dk-component-checkbox__desc" id="x-desc" aria-hidden="true">...</span>

   Forge's check:contract asserts the name and the description of a described
   example, which is what caught this. ── */
.dk-component-checkbox__desc {
  font-family: var(--dk-component-checkbox-label-font-family);
  font-size: var(--_cb-label-size); line-height: var(--_cb-label-leading);
  font-weight: var(--dk-component-checkbox-desc-font-weight);
  color: var(--dk-component-checkbox-desc-color);
}
.dk-component-checkbox:has(.dk-component-checkbox__input:disabled) .dk-component-checkbox__label {
  color: var(--dk-component-checkbox-disabled-label-color);
}
.dk-component-checkbox:has(.dk-component-checkbox__input:disabled) .dk-component-checkbox__desc {
  color: var(--dk-component-checkbox-disabled-desc-color);
}

/* ── A group. A single checkbox is a complete control and needs none of this; a
   SET of them is one question with several answers, and the question needs a
   name an assistive technology can reach. A <fieldset> with a <legend> is the
   only element pairing that does that natively. ── */
.dk-component-checkbox-group {
  display: grid; gap: var(--dk-component-checkbox-group-gap);
  border: 0; margin: 0; padding: 0; min-width: 0;
}
.dk-component-checkbox-group__legend {
  padding: 0; margin: 0 0 var(--dk-component-checkbox-group-legend-gap);
  font-family: var(--dk-component-checkbox-label-font-family);
  font-size: var(--dk-component-checkbox-label-font-size);
  line-height: var(--dk-component-checkbox-label-line-height);
  font-weight: var(--dk-component-checkbox-label-font-weight);
  color: var(--dk-component-checkbox-label-color);
}
.dk-component-checkbox-group__desc {
  margin: calc(var(--dk-component-checkbox-group-legend-gap) * -1 + var(--dk-component-checkbox-text-gap)) 0 0;
  font-family: var(--dk-component-checkbox-label-font-family);
  font-size: var(--dk-component-checkbox-label-font-size);
  line-height: var(--dk-component-checkbox-label-line-height);
  color: var(--dk-component-checkbox-desc-color);
}
.dk-component-checkbox-group__error {
  margin: 0;
  font-family: var(--dk-component-checkbox-label-font-family);
  font-size: var(--dk-component-checkbox-label-font-size);
  line-height: var(--dk-component-checkbox-label-line-height);
  color: var(--dk-component-checkbox-error-color);
}
/* Horizontal wraps rather than overflowing: a row of five options on a phone is
   a row of five options on a phone. */
.dk-component-checkbox-group[data-orientation="horizontal"] {
  grid-auto-flow: column; grid-auto-columns: max-content;
  column-gap: var(--dk-component-checkbox-group-row-gap);
  justify-content: start;
}
.dk-component-checkbox-group[data-orientation="horizontal"] > .dk-component-checkbox-group__legend,
.dk-component-checkbox-group[data-orientation="horizontal"] > .dk-component-checkbox-group__desc,
.dk-component-checkbox-group[data-orientation="horizontal"] > .dk-component-checkbox-group__error {
  grid-column: 1 / -1;
}

/* ═════════════════════════════════════ drift-kit:layer components/radio/styles.css ═════════════════════════════════════ */
/* ── Radio ──────────────────────────────────────────────────────────────────
   Checkbox's twin: a visually-hidden native <input type="radio"> driving a
   painted .dk-component-radio__indicator, the same private-slot pattern, the
   same palettes, the same three sizes. Read checkbox/styles.css for why any of
   that is shaped the way it is; only the differences are explained here.

   THE GROUP IS THE CONTROL, in a way it never is for a checkbox. A radio on its
   own cannot be unchecked by the person using it, so a single one is almost
   always a bug. The browser does the grouping through a shared `name`, which is
   also what gives arrow-key navigation, wrapping and the roving tab stop for
   free; .dk-component-radio-group supplies the question those answers belong
   to, as a <fieldset> and a <legend>.

   NO INDETERMINATE. A radio has no mixed state. A group with nothing chosen is
   a group with nothing chosen, which is what an unchecked set already says.

   THE DOT IS DRAWN, not supplied. A filled circle is not an icon, so there is
   no <svg> in the markup at all and the indicator's ::after is the whole glyph.

   Purpose: One of these, and only one. Checkbox's twin, with a circular box,
     a drawn dot and a group that is not optional.

   Anatomy:
     label.dk-component-radio[data-size]
       span.dk-component-radio__box
         input.dk-component-radio__input
         span.dk-component-radio__indicator
       span.dk-component-radio__text
         span.dk-component-radio__label
         span.dk-component-radio__desc                                       */
.dk-component-radio {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--dk-component-radio-gap);
  align-items: start; width: fit-content; cursor: pointer;
  /* Room for what a thicker border tier adds to the indicator, which spills
     evenly past the label's first line: a list of them keeps its air (8 Nov). */
  padding-block: calc(var(--_rd-grow) / 2);

  /* ── The slots, at rest and unchecked: a small outlined box on a form, which
     is the same object a text field is, so it paints the same palette. See
     tokens/mapped/field.css for why that palette exists. ── */
  --_rd-surface: var(--dk-component-radio-surface-default);
  --_rd-surface-hover: var(--dk-component-radio-surface-hover);
  --_rd-surface-active: var(--dk-component-radio-surface-active);
  --_rd-border: var(--dk-component-radio-border-default);
  --_rd-border-hover: var(--dk-component-radio-border-hover);
  --_rd-border-active: var(--dk-component-radio-border-active);
  --_rd-ring: var(--dk-component-radio-ring);
  --_rd-glyph: var(--dk-component-radio-glyph);
  --_rd-size: var(--dk-component-radio-size);
  /* What a thicker border tier adds to the ring, both sides (8 Nov). */
  --_rd-grow: calc(2 * (var(--dk-component-radio-border-width) - var(--dk-component-radio-border-width-base)));
  --_rd-glyph-size: var(--dk-component-radio-glyph-size);
  --_rd-label-size: var(--dk-component-radio-label-font-size);
  --_rd-label-leading: var(--dk-component-radio-label-line-height);
}
.dk-component-radio[hidden] { display: none; }

/* ── NO LABEL AT ALL, which is a real shape and not a degenerate one: a select
   row checkbox in a table, a select all in its header, a radio in a comparison
   grid. Each of those takes its name from the column or the row it sits in,
   through aria-label or aria-labelledby on the input, and printing the name
   beside every one of them would be noise.

   Omit the __text span entirely and the control collapses to its box. Without
   this the second grid track and the gap before it survive an absent label:
   measured, the root stayed 26px wide around a 20px box, six pixels of dead
   space on the right that pushed everything after it out of line.

   An EMPTY __text is treated the same way, because a template that renders the
   wrapper unconditionally and the label conditionally is the common way to
   arrive here. */
.dk-component-radio:not(:has(.dk-component-radio__text)),
.dk-component-radio:has(.dk-component-radio__text:empty) {
  grid-template-columns: auto;
  column-gap: 0;
}
/* And the empty wrapper itself goes, or it wraps to a second row and adds its
   own line height back: 20 x 30 against the 20 x 24 an absent one gives. */
.dk-component-radio__text:empty { display: none; }

/* ── Sizes. The box rides Input's ladder, 16 / 20 / 24, so a radio and a
   field's leading icon are the same size at the same rung. ── */
.dk-component-radio[data-size="small"] {
  --_rd-size: var(--dk-component-radio-small-size);
  --_rd-glyph-size: var(--dk-component-radio-small-glyph-size);
  --_rd-label-size: var(--dk-component-radio-small-label-font-size);
  --_rd-label-leading: var(--dk-component-radio-small-label-line-height);
}
.dk-component-radio[data-size="large"] {
  --_rd-size: var(--dk-component-radio-large-size);
  --_rd-glyph-size: var(--dk-component-radio-large-glyph-size);
  --_rd-label-size: var(--dk-component-radio-large-label-font-size);
  --_rd-label-leading: var(--dk-component-radio-large-label-line-height);
}

/* ── Chosen. ── */
.dk-component-radio:has(.dk-component-radio__input:checked) {
  --_rd-surface: var(--dk-component-radio-checked-surface-default);
  --_rd-surface-hover: var(--dk-component-radio-checked-surface-hover);
  --_rd-surface-active: var(--dk-component-radio-checked-surface-active);
  --_rd-border: var(--dk-component-radio-checked-border-default);
  --_rd-border-hover: var(--dk-component-radio-checked-border-hover);
  --_rd-border-active: var(--dk-component-radio-checked-border-active);
}

/* ── aria-invalid, spelled the way Input spells it. The border carries it and
   the fill does not: a red empty box is an error, a red FILLED box would read
   as a chosen option in a status colour it does not have. ── */
.dk-component-radio:has(.dk-component-radio__input[aria-invalid="true"]) {
  --_rd-border: var(--dk-component-radio-error-border-default);
  --_rd-border-hover: var(--dk-component-radio-error-border-hover);
  --_rd-border-active: var(--dk-component-radio-error-border-hover);
  --_rd-ring: var(--dk-component-radio-error-ring);
}

/* ── Disabled. An empty disabled box is refusing input; a ticked disabled box
   is reporting a value it will not let you change, and its glyph has to stay
   readable on it. Two different looks, which is why there are two rules. ── */
.dk-component-radio:has(.dk-component-radio__input:disabled) {
  cursor: not-allowed;
  --_rd-surface: var(--dk-component-radio-disabled-surface);
  --_rd-border: var(--dk-component-radio-disabled-border);
}
.dk-component-radio:has(.dk-component-radio__input:disabled:checked) {
  --_rd-surface: var(--dk-component-radio-disabled-checked-surface);
  --_rd-border: var(--dk-component-radio-disabled-checked-border);
  --_rd-glyph: var(--dk-component-radio-disabled-glyph);
}

/* ── The box and the input on top of it ── */
/* THE BOX IS AS TALL AS ONE LINE OF ITS LABEL, and the indicator centres
   inside it. The obvious shape, a box exactly as big as the indicator with
   align-items: start above it, puts the indicator's TOP against the text
   block's top, and the indicator is shorter than the line box it sits beside:
   16 against 20, 20 against 24, 24 against 28. Measured, the indicator's centre
   sat 2.0px above the first line's centre at all three sizes, in both themes,
   with and without a description.

   Centring on the line box rather than on the text block is what keeps it right
   when a description is added: the indicator belongs to the first line, not to
   the paragraph. The input stretches over the whole cell, so the extra height
   is hit target rather than dead space. */
.dk-component-radio__box {
  position: relative; display: grid; place-items: center;
  width: calc(var(--_rd-size) + var(--_rd-grow)); min-height: var(--_rd-label-leading); flex: 0 0 auto;
}
.dk-component-radio__input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: inherit;
}

.dk-component-radio__indicator {
  display: grid; place-items: center;
  width: calc(var(--_rd-size) + var(--_rd-grow)); height: calc(var(--_rd-size) + var(--_rd-grow)); box-sizing: border-box;
  /* The growth spills evenly above and below, so the ring still centres on
     the label's first line and the row keeps its height. */
  margin-block: calc(var(--_rd-grow) / -2);
  border: var(--dk-component-radio-border-width) solid var(--_rd-border);
  background: var(--_rd-surface);
  border-radius: var(--dk-component-radio-radius);
  color: var(--_rd-glyph);
  box-shadow: 0 0 0 var(--dk-component-radio-halo-width) var(--dk-component-radio-halo);
  transition: background-color var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              border-color var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              box-shadow var(--dk-motion-state-duration) var(--dk-motion-state-easing);
  pointer-events: none;
}

/* The dot. currentColor, never a literal, so it moves per theme with the fill
   under it: white on a darkening light-theme ladder, a deep primary on a
   brightening dark-theme one. */
.dk-component-radio__indicator::after {
  /* Same cell as anything else the indicator holds, so centring is the grid's
     job and not the pseudo-element's static position. */
  grid-area: 1 / 1;
  content: ""; display: block;
  width: var(--_rd-glyph-size); height: var(--_rd-glyph-size);
  border-radius: 50%;
  background: currentColor;
  /* At nothing rather than faded: a dot that grows from zero needs no opacity
     to hide it. Each direction carries its own transition, the rule being
     entered deciding the motion, so arriving overshoots and leaving does not. */
  transform: scale(0);
  transition: transform var(--dk-component-radio-glyph-exit-duration) var(--dk-component-radio-glyph-exit-easing);
}
.dk-component-radio__input:checked ~ .dk-component-radio__indicator::after {
  transform: scale(1);
  transition: transform var(--dk-component-radio-glyph-enter-duration) var(--dk-component-radio-glyph-enter-easing) var(--dk-component-radio-glyph-enter-delay);
}

/* ── Live states. Hover and press sit on the ROOT, because the root is the
   <label>: pointing at the words is pointing at the control, and a box that
   only lit up over its own 20 pixels would feel broken.

   Hover defers to press and to focus for the reason input/styles.css records:
   the :not(:has(...)) guard carries its argument's specificity, so an
   unguarded hover outranks both and wins every time the pointer is still there.
   :not([data-pseudo-class]) keeps the live rules out of the way of the docs'
   forced ones, which are a different selector and cannot otherwise compete. ── */
@media (hover: hover) {
  .dk-component-radio:hover:not(:has(.dk-component-radio__input:disabled)):not(:active):not(:has(.dk-component-radio__input:focus-visible)):not([data-pseudo-class]) .dk-component-radio__indicator {
    background: var(--_rd-surface-hover);
    border-color: var(--_rd-border-hover);
  }
}
.dk-component-radio:active:not(:has(.dk-component-radio__input:disabled)):not([data-pseudo-class]) .dk-component-radio__indicator {
  background: var(--_rd-surface-active);
  border-color: var(--_rd-border-active);
}
/* INSIDE A LARGER LABEL (a Choice card, whose whole card is the label): the
   label is the hit area, so pointing at or pressing it is pointing at or
   pressing this control. :not(label) keeps it to a root that is not itself the
   label, which the rules above already cover. */
@media (hover: hover) {
  label:hover:not(:active) .dk-component-radio:not(label):not(:has(.dk-component-radio__input:disabled)):not(:has(.dk-component-radio__input:focus-visible)):not([data-pseudo-class]) .dk-component-radio__indicator {
    background: var(--_rd-surface-hover);
    border-color: var(--_rd-border-hover);
  }
}
label:active .dk-component-radio:not(label):not(:has(.dk-component-radio__input:disabled)):not([data-pseudo-class]) .dk-component-radio__indicator {
  background: var(--_rd-surface-active);
  border-color: var(--_rd-border-active);
}
.dk-component-radio:has(.dk-component-radio__input:focus-visible):not([data-pseudo-class]) .dk-component-radio__indicator {
  border-color: var(--dk-component-radio-focus-border);
  box-shadow: 0 0 0 var(--dk-component-radio-halo-width) var(--dk-component-radio-halo),
              0 0 0 var(--dk-component-radio-focus-ring-width) var(--_rd-ring);
}

/* ── The same three states, forced, for the documentation's state control.
   They read the same slots, so there is one set of values. ── */
.dk-component-radio[data-pseudo-class="hover"] .dk-component-radio__indicator {
  background: var(--_rd-surface-hover); border-color: var(--_rd-border-hover);
}
.dk-component-radio[data-pseudo-class="active"] .dk-component-radio__indicator {
  background: var(--_rd-surface-active); border-color: var(--_rd-border-active);
}
.dk-component-radio[data-pseudo-class="focus"] .dk-component-radio__indicator {
  border-color: var(--dk-component-radio-focus-border);
  box-shadow: 0 0 0 var(--dk-component-radio-halo-width) var(--dk-component-radio-halo),
              0 0 0 var(--dk-component-radio-focus-ring-width) var(--_rd-ring);
}

/* ── Text. The label sits on the first line of the box by construction: both
   use the same line-height rung, so a one-line label and a 20px box centre on
   each other without a magic number. ── */
.dk-component-radio__text { display: grid; gap: var(--dk-component-radio-text-gap); min-width: 0; }
.dk-component-radio__label {
  font-family: var(--dk-component-radio-label-font-family);
  font-size: var(--_rd-label-size); line-height: var(--_rd-label-leading);
  font-weight: var(--dk-component-radio-label-font-weight);
  color: var(--dk-component-radio-label-color);
}
/* ── THE DESCRIPTION MUST LEAVE THE ACCESSIBLE NAME, and markup is the only
   place that can do it. The root is a <label>, so everything inside it is part
   of the control's NAME: measured in Chromium, a described radio announced as
   "Weekly summary A digest of everything that changed." and had no description
   at all. aria-describedby on its own makes it worse, the same words then being
   announced twice, as the name and again as the description.

   So the __desc span carries aria-hidden="true" AND an id the input points at
   with aria-describedby. The span is hidden from the name traversal and still
   read when referenced explicitly, which is what separates the two, and it
   stays on screen throughout. Both React components do this for you.

     <input class="dk-component-radio__input" aria-describedby="x-desc">
     ...
     <span class="dk-component-radio__desc" id="x-desc" aria-hidden="true">...</span>

   Forge's check:contract asserts the name and the description of a described
   example, which is what caught this. ── */
.dk-component-radio__desc {
  font-family: var(--dk-component-radio-label-font-family);
  font-size: var(--_rd-label-size); line-height: var(--_rd-label-leading);
  font-weight: var(--dk-component-radio-desc-font-weight);
  color: var(--dk-component-radio-desc-color);
}
.dk-component-radio:has(.dk-component-radio__input:disabled) .dk-component-radio__label {
  color: var(--dk-component-radio-disabled-label-color);
}
.dk-component-radio:has(.dk-component-radio__input:disabled) .dk-component-radio__desc {
  color: var(--dk-component-radio-disabled-desc-color);
}

/* ── A group, which for a radio is not optional. The shared `name` on the
   inputs is what makes them exclusive and what gives arrow-key navigation; the
   <fieldset> and <legend> are what give the set a name in the accessibility
   tree. One without the other is half a control. ── */
.dk-component-radio-group {
  display: grid; gap: var(--dk-component-radio-group-gap);
  border: 0; margin: 0; padding: 0; min-width: 0;
}
.dk-component-radio-group__legend {
  padding: 0; margin: 0 0 var(--dk-component-radio-group-legend-gap);
  font-family: var(--dk-component-radio-label-font-family);
  font-size: var(--dk-component-radio-label-font-size);
  line-height: var(--dk-component-radio-label-line-height);
  font-weight: var(--dk-component-radio-label-font-weight);
  color: var(--dk-component-radio-label-color);
}
.dk-component-radio-group__desc {
  margin: calc(var(--dk-component-radio-group-legend-gap) * -1 + var(--dk-component-radio-text-gap)) 0 0;
  font-family: var(--dk-component-radio-label-font-family);
  font-size: var(--dk-component-radio-label-font-size);
  line-height: var(--dk-component-radio-label-line-height);
  color: var(--dk-component-radio-desc-color);
}
.dk-component-radio-group__error {
  margin: 0;
  font-family: var(--dk-component-radio-label-font-family);
  font-size: var(--dk-component-radio-label-font-size);
  line-height: var(--dk-component-radio-label-line-height);
  color: var(--dk-component-radio-error-color);
}
/* Horizontal wraps rather than overflowing: a row of five options on a phone is
   a row of five options on a phone. */
.dk-component-radio-group[data-orientation="horizontal"] {
  grid-auto-flow: column; grid-auto-columns: max-content;
  column-gap: var(--dk-component-radio-group-row-gap);
  justify-content: start;
}
.dk-component-radio-group[data-orientation="horizontal"] > .dk-component-radio-group__legend,
.dk-component-radio-group[data-orientation="horizontal"] > .dk-component-radio-group__desc,
.dk-component-radio-group[data-orientation="horizontal"] > .dk-component-radio-group__error {
  grid-column: 1 / -1;
}

/* ═════════════════════════════════════ drift-kit:layer components/modal/styles.css ═════════════════════════════════════ */
/* ── Modal ──────────────────────────────────────────────────────────────────
   A fixed overlay holding a backdrop and a box, and on a phone the box is a
   bottom sheet instead of a centred card.

   Purpose: A dialog on a backdrop, and a bottom sheet on a phone. Focus
     trap, Escape, scroll lock and focus return included.

   Anatomy:
     div.dk-component-modal[hidden][data-sheet][data-sheet-open][data-sheet-drag][data-dragging][data-closing]
       div.dk-component-modal__backdrop
       div.dk-component-modal__box[data-size][role=dialog][aria-modal=true]
         ::before (the grabber, on a draggable sheet)
         div.dk-component-modal__header
           span.dk-component-modal__icon > svg
           h2.dk-component-modal__title
           button.dk-component-icon-button[aria-label]
         div.dk-component-modal__body
           div.dk-component-modal__actions?   (last: the body's own buttons, scrolling with it)
         div.dk-component-modal__footer

   VISIBILITY IS THE hidden ATTRIBUTE, which is why the [hidden] rule below has
   to exist at all: display: grid on the overlay would otherwise win against the
   UA's display: none.

   THE STATE ATTRIBUTES ARE ATTRIBUTES, not classes. This component carried
   .is-closing, the last state-carrying class in a kit that spells every other
   state as an attribute; it is [data-closing] now, and behaviour.js writes it.

   THE BODY'S OWN ACTIONS (__actions, 9 Nov 2026): buttons that end what the
   body says (a timeline, then Done) sit last in the body and scroll with it,
   under a top rule in the modal's divider (the header's line) run edge to
   edge of the box, stacked at the body's inset (a Button's data-full-width
   spans it). The footer is for buttons that stay put below the body.

   THE SHEET IS THE SAME IDEA A SELECT'S MENU ALREADY HAS, down to the
   vocabulary: data-sheet="auto | always | never" on the overlay, and
   [data-sheet-open] is what the stylesheet paints against. The breakpoint is
   declared once, in CSS, as a custom property the behaviour reads, for the
   reason that file gives: a width hardcoded in both languages drifts the first
   time one of them moves. A media query cannot switch JavaScript on, and this
   component needs the switch in JavaScript anyway, because the exit animation
   and the wait before hiding differ between a dialog and a sheet.
   ── */
.dk-component-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: var(--dk-component-modal-inset);
}
.dk-component-modal[hidden] { display: none; }

/* THE SWITCH FOLLOWS THE KIT'S ONE BREAKPOINT (kit/breakpoint.css).
   behaviour.js reads this property off the overlay through dk.sheet and writes
   data-sheet-open from it. data-sheet="never" opts out, for a dialog inside
   something that is already a sheet. */
.dk-component-modal:not([data-sheet="never"]) { --dk-component-modal-sheet: var(--dk-breakpoint-phone, 0); }
.dk-component-modal[data-sheet="always"] { --dk-component-modal-sheet: 1; }

.dk-component-modal__backdrop {
  position: fixed;
  inset: 0;
  background: var(--dk-component-modal-backdrop);
  /* THE PAGE BEHIND IS BLURRED as well as dimmed (5 Nov 2026), and the blur
     rides the same keyframes as the opacity, so it comes and goes on the
     backdrop's own clock rather than snapping on under a fade. */
  -webkit-backdrop-filter: blur(var(--dk-component-modal-backdrop-blur));
  backdrop-filter: blur(var(--dk-component-modal-backdrop-blur));
  animation: dk-component-modal-fade var(--dk-component-modal-enter-duration) var(--dk-component-modal-enter-easing);
}

.dk-component-modal__box {
  position: relative;
  z-index: 1;
  color: var(--dk-component-modal-text-color);
  /* BORDER-BOX, which is a fix rather than a preference: as a sheet the box is
     width: 100% of a full-width overlay, and under content-box its 1px sides
     put it two pixels wider than the screen, which a phone answers with a
     horizontal scrollbar on the document. Measured at 392 against 390. */
  box-sizing: border-box;
  display: grid;
  /* The body is the only part that gives: a header and a footer keep their
     height and the middle scrolls, which is what makes a long dialog usable
     without the buttons leaving the screen. */
  grid-template-rows: auto 1fr auto;
  width: 100%;
  max-width: var(--dk-component-modal-width);
  max-height: var(--dk-component-modal-max-height);
  overflow: hidden;
  background: var(--dk-component-modal-surface);
  border: var(--dk-component-modal-border-width) solid var(--dk-component-modal-border);
  border-radius: var(--dk-component-modal-radius);
  box-shadow: var(--dk-component-modal-shadow);
  animation: dk-component-modal-slide var(--dk-component-modal-enter-duration) var(--dk-component-modal-enter-easing);
}
.dk-component-modal__box[data-size="small"] { max-width: var(--dk-component-modal-small-width); }
.dk-component-modal__box[data-size="large"] { max-width: var(--dk-component-modal-large-width); }
.dk-component-modal__box[data-size="xlarge"] { max-width: var(--dk-component-modal-xlarge-width); }

.dk-component-modal__header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--dk-component-modal-header-gap);
  padding: var(--dk-component-modal-header-padding-block) var(--dk-component-modal-padding-inline);
  border-bottom: var(--dk-component-modal-border-width) solid var(--dk-component-modal-divider);
}
.dk-component-modal__header:not(:has(.dk-component-modal__icon)) { grid-template-columns: 1fr auto; }
.dk-component-modal__icon {
  display: grid;
  place-items: center;
  color: var(--dk-component-modal-icon-color);
}
.dk-component-modal__icon svg {
  width: var(--dk-component-modal-icon-size);
  height: var(--dk-component-modal-icon-size);
}
.dk-component-modal__title {
  margin: 0;
  font-family: var(--dk-font-family-primary);
  font-size: var(--dk-component-modal-title-font-size);
  line-height: var(--dk-component-modal-title-line-height);
  font-weight: var(--dk-component-modal-title-font-weight);
  color: var(--dk-component-modal-title-color);
}

.dk-component-modal__body {
  display: grid;
  gap: var(--dk-component-modal-body-gap);
  align-content: start;
  padding: var(--dk-component-modal-body-padding-block) var(--dk-component-modal-padding-inline);
  overflow-y: auto;
  /* THE PAGE BEHIND DOES NOT TAKE OVER when this reaches its end. Without it a
     phone hands the rest of the gesture to the document, so a sheet you are
     scrolling scrolls the page underneath it and you lose your place in both. */
  overscroll-behavior: contain;
}

/* The body's own actions: last in the body, a rule over them edge to edge
   of the box, the buttons stacked at the body's inset. */
.dk-component-modal__actions {
  display: flex;
  flex-direction: column;
  gap: var(--dk-component-modal-actions-gap);
  margin-inline: calc(-1 * var(--dk-component-modal-padding-inline));
  padding: var(--dk-component-modal-actions-padding-block-start) var(--dk-component-modal-padding-inline) 0;
  border-top: var(--dk-component-modal-border-width) solid var(--dk-component-modal-divider);
}

.dk-component-modal__footer {
  display: grid;
  grid-auto-flow: column;
  justify-content: end;
  gap: var(--dk-component-modal-footer-gap);
  padding: var(--dk-component-modal-footer-padding-block) var(--dk-component-modal-padding-inline);
  border-top: var(--dk-component-modal-border-width) solid var(--dk-component-modal-divider);
}

/* ── The sheet ──────────────────────────────────────────────────────────────
   Pinned to the bottom edge, full width, square where it meets the edge, and it
   comes up from off the screen rather than rising a few pixels in place.

   The box keeps a MAX height and not a height, which is the one place this
   parts company with the component library's version: that one sets height and
   max-height to the same 75vh, so a two-line confirmation arrives as a
   three-quarter-height panel with a sentence at the top of it. A sheet should
   be as tall as what is in it, and only then stop. ── */
.dk-component-modal[data-sheet-open] {
  place-items: end center;
  padding: 0;
}
.dk-component-modal[data-sheet-open] .dk-component-modal__box {
  max-width: var(--dk-component-modal-sheet-max-width);
  max-height: var(--dk-component-modal-sheet-max-height);
  border-radius: var(--dk-component-modal-sheet-radius) var(--dk-component-modal-sheet-radius) 0 0;
  border-bottom: 0;
  animation: dk-component-modal-sheet-in var(--dk-component-modal-enter-duration) var(--dk-component-modal-enter-easing);
}
/* THE GRABBER (5 Nov 2026): the bar under the top edge that says the sheet
   can be pulled down and let go. Drawn only on a sheet the behaviour has made
   draggable ([data-sheet-drag]: open, and dismissible), because a bar on a
   sheet that will not move is a promise it does not keep. It is a pseudo
   element so every sheet has it without new markup, and the header grows at
   the top to give it room. The drag itself starts on the bar or anywhere on
   the header that is not a control; the body keeps its scrolling. */
.dk-component-modal[data-sheet-open][data-sheet-drag] .dk-component-modal__box::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: var(--dk-component-modal-grabber-offset);
  left: 50%;
  translate: -50% 0;
  width: var(--dk-component-modal-grabber-width);
  height: var(--dk-component-modal-grabber-height);
  border-radius: var(--dk-border-radius-round-fixed);
  background: var(--dk-component-modal-grabber-color);
  touch-action: none;
  cursor: grab;
}
.dk-component-modal[data-sheet-open][data-sheet-drag] .dk-component-modal__header {
  padding-top: var(--dk-component-modal-sheet-header-padding-top);
  touch-action: none;
}
.dk-component-modal[data-dragging] { user-select: none; -webkit-user-select: none; cursor: grabbing; }
/* THE BUTTONS GO FULL WIDTH AND FIT THEMSELVES. Each grows from a minimum,
   which is what makes "Cancel" and "Save changes" sit side by side on a 390px
   phone and stack on a 320px one; a fixed two-column grid, which is what the
   reference does, puts them in 140px each and hyphenates the second. A single
   button spans, because one button at half width beside a gap reads as two,
   one of which is missing.

   STACKED, THE MAIN ACTION IS ON TOP (5 Nov 2026). Side by side it is the
   last button, on the right; when they no longer fit, wrap-reverse lays the
   lines from the bottom up, so the first button (the way out) is the bottom
   line and the main action sits above it, nearest the content, as a phone's
   own sheets do. The order in the markup, and so for the keyboard and a
   screen reader, does not change. */
.dk-component-modal[data-sheet-open] .dk-component-modal__footer {
  display: flex;
  flex-wrap: wrap-reverse;
  /* The home indicator's strip on an iPhone, which would otherwise sit on top
     of the buttons. Zero everywhere else. */
  padding-bottom: calc(var(--dk-component-modal-footer-padding-block) + env(safe-area-inset-bottom, 0px));
}
.dk-component-modal[data-sheet-open] .dk-component-modal__footer > * {
  flex: 1 1 var(--dk-component-modal-sheet-action-min);
  justify-content: center;
  min-height: var(--dk-component-modal-sheet-action-height);
}

/* ── Enter and leave ────────────────────────────────────────────────────────
   Every duration here is a token, so prefers-reduced-motion zeroes them with
   the rest of the kit rather than needing rules of its own, and behaviour.js
   reads the exit duration off the element instead of holding a copy of it.

   THE KEYFRAME NAMES DO NOT CHANGE, and that is deliberate in a release that
   renames two other things. An animation's name is not vocabulary, it is an
   identifier consumers can end up observing: Forge listens for
   animationName === "dk-component-modal-slide-out" to know when a box has
   finished leaving. Renaming it would break that silently, which is the worst
   kind of break, and would buy nothing but a tidier word. */
@keyframes dk-component-modal-fade { from { opacity: 0; backdrop-filter: blur(0); } }
@keyframes dk-component-modal-slide {
  from { opacity: 0; transform: translateY(var(--dk-component-modal-enter-travel)); }
}
@keyframes dk-component-modal-sheet-in { from { transform: translateY(100%); } }

.dk-component-modal[data-closing] .dk-component-modal__backdrop {
  animation: dk-component-modal-fade-out var(--dk-component-modal-exit-duration) var(--dk-component-modal-exit-easing) forwards;
}
.dk-component-modal[data-closing] .dk-component-modal__box {
  animation: dk-component-modal-slide-out var(--dk-component-modal-exit-duration) var(--dk-component-modal-exit-easing) forwards;
}
/* A sheet leaves the way it arrived, downwards and off the edge, rather than
   sinking four pixels and vanishing. */
.dk-component-modal[data-sheet-open][data-closing] .dk-component-modal__box {
  animation: dk-component-modal-sheet-out var(--dk-component-modal-exit-duration) var(--dk-component-modal-exit-easing) forwards;
}
/* Nothing to click on the way out: a tap during the exit would land on a button
   that is halfway off the screen. */
.dk-component-modal[data-closing] { pointer-events: none; }
@keyframes dk-component-modal-fade-out { to { opacity: 0; backdrop-filter: blur(0); } }
@keyframes dk-component-modal-slide-out { to { opacity: 0; transform: translateY(var(--dk-component-modal-enter-travel)); } }
@keyframes dk-component-modal-sheet-out { to { transform: translateY(100%); } }

/* ═══════════════════════════════ drift-kit:layer components/icon-button/styles.css ═══════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   Icon button — a button whose whole label is its icon.

   ANATOMY
     <button class="dk-component-icon-button" data-variant="plain"
             data-size="medium" aria-label="Duplicate">
       <i data-lucide="copy"></i>
     </button>

   IT NEEDS AN ACCESSIBLE NAME AND NOTHING IN THE MARKUP SUPPLIES ONE. A text
   button is named by its label; this has no text, so aria-label (or a visible
   label referenced by aria-labelledby) is not decoration, it is the only thing
   standing between this control and "button" being all a screen reader can say
   about it. The docs say so, and check:contract asserts it.

   HEIGHT IS EMERGENT, EXACTLY AS BUTTON'S IS, and that is what lets the two sit
   in a row. The content box is a SQUARE of the line-height, and padding builds
   the rest, with the edge inside it, so at any rung this lands on the same total height a text button lands on, whatever the variant.
   Measured before this rebuild, the old component was 12 to 18px shorter than
   its Button counterpart at every size but the smallest, which is why an icon
   button never quite lined up beside one. Asserted now by check:contract's
   height cohorts rather than left to agreement.

   The private --_ib-* slots are Button's --_btn-* pattern: each variant writes
   the slots, one set of state rules reads them, so adding a variant is a block
   of custom properties rather than another copy of every state.
   ────────────────────────────────────────────────────────────────────────

   Purpose: A button whose whole label is its icon. Same rungs as Button, so
     the two line up in a row, plus one rung below Button's smallest because
     compact chrome is where most icon buttons actually live.

   Anatomy:
     button.dk-component-icon-button[data-variant="subtle|ghost|plain|raised|solid"]?[data-status="primary"]?[data-size="extra-small|small|medium|large"]?[aria-label][aria-pressed]?[data-pressed-glyph="fill"]?
       svg | i.dk-component-icon   (the glyph)
       span.__label[hidden]?       (optional; when present, hidden is
                                   required: words beside the glyph, drawn
                                   by the fidelity looks on a desktop only,
                                   which override [hidden] on purpose)
       span.__spinner?             (while .is-loading)

   data-status="primary" and the label are the fidelity looks' (22 Oct
   2026): this stylesheet has no design for either yet, so here a primary
   draws as its variant and the label stays hidden.
   */
.dk-component-icon-button {
  /* Relative, so the loading spinner can centre itself in the square. */
  position: relative;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  /* THE SIZE IS DECLARED, NOT INHERITED FROM A BOX MODEL. box-sizing is stated
     rather than assumed because the ambient value cannot be relied on: Forge
     sets border-box globally, a bare consumer of the kit may not, and the first
     cut of this file set an explicit size under content-box reasoning and
     collapsed to 24px square on a Forge page. Declaring both the model and the
     total removes the question.

     The total is Button's own height formula, line-height plus padding on
     both sides with the edge inside it, which is how the two line up at the
     same rung. The
     padding token is an INGREDIENT of that total rather than a padding
     property: the glyph is centred by the grid, so there is nothing for real
     padding to push against. */
  box-sizing: border-box;
  /* ZERO, AND SAID OUT LOUD. The browser's own button padding is 1px 6px, and
     with an explicit size and a grid-centred glyph it changes nothing visible,
     which is exactly why it would have sat here unnoticed. check:ua-defaults
     caught it: a component should not take a box value from the user agent. */
  padding: 0;
  inline-size: var(--_ib-size);
  block-size: var(--_ib-size);
  border: var(--_ib-border-width, 0px) solid var(--_ib-border, transparent);
  border-radius: var(--_ib-radius);
  background-color: var(--_ib-bg);
  color: var(--_ib-icon);
  cursor: pointer;
  /* Not `font: inherit` from the reset alone: line-height is the box here. */
  line-height: var(--_ib-line);
  /* The duration THIS element resolved (160ms in while it is hovered, 240ms
     out), handed down so the glyph's fill moves with the fill behind it: the
     glyph resolves its own, and is rarely the element under the pointer. */
  --_ib-state-duration: var(--dk-motion-state-duration);
  transition: background-color var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              border-color var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              color var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              box-shadow var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              transform var(--dk-motion-press-duration) var(--dk-motion-press-easing);
  /* The lift: no shadow unless a variant sets one (raised). */
  box-shadow: var(--_ib-lift, none);
}

/* ── Rungs ──────────────────────────────────────────────────────────────── */
.dk-component-icon-button,
.dk-component-icon-button[data-size="medium"] {
  --_ib-pad: var(--dk-component-icon-button-medium-padding);
  --_ib-line: var(--dk-component-icon-button-medium-line-height);
  --_ib-size: calc(var(--dk-component-icon-button-medium-line-height)
                 + 2 * var(--dk-component-icon-button-medium-padding));
  --_ib-icon-size: var(--dk-component-icon-button-medium-icon-size);
  --_ib-radius: var(--dk-component-icon-button-medium-border-radius);
  --_ib-spinner: var(--dk-component-icon-button-medium-spinner-size);
}
.dk-component-icon-button[data-size="extra-small"] {
  --_ib-pad: var(--dk-component-icon-button-extra-small-padding);
  --_ib-line: var(--dk-component-icon-button-extra-small-line-height);
  --_ib-size: calc(var(--dk-component-icon-button-extra-small-line-height)
                 + 2 * var(--dk-component-icon-button-extra-small-padding));
  --_ib-icon-size: var(--dk-component-icon-button-extra-small-icon-size);
  --_ib-radius: var(--dk-component-icon-button-extra-small-border-radius);
  --_ib-spinner: var(--dk-component-icon-button-extra-small-spinner-size);
}
.dk-component-icon-button[data-size="small"] {
  --_ib-pad: var(--dk-component-icon-button-small-padding);
  --_ib-line: var(--dk-component-icon-button-small-line-height);
  --_ib-size: calc(var(--dk-component-icon-button-small-line-height)
                 + 2 * var(--dk-component-icon-button-small-padding));
  --_ib-icon-size: var(--dk-component-icon-button-small-icon-size);
  --_ib-radius: var(--dk-component-icon-button-small-border-radius);
  --_ib-spinner: var(--dk-component-icon-button-small-spinner-size);
}
.dk-component-icon-button[data-size="large"] {
  --_ib-pad: var(--dk-component-icon-button-large-padding);
  --_ib-line: var(--dk-component-icon-button-large-line-height);
  --_ib-size: calc(var(--dk-component-icon-button-large-line-height)
                 + 2 * var(--dk-component-icon-button-large-padding));
  --_ib-icon-size: var(--dk-component-icon-button-large-icon-size);
  --_ib-radius: var(--dk-component-icon-button-large-border-radius);
  --_ib-spinner: var(--dk-component-icon-button-large-spinner-size);
}

/* ── Variants. Each writes the slots; the state rules below read them. ──── */
.dk-component-icon-button,
.dk-component-icon-button[data-variant="subtle"] {
  --_ib-bg: var(--dk-component-icon-button-subtle-surface-default);
  --_ib-bg-hover: var(--dk-component-icon-button-subtle-surface-hover);
  --_ib-bg-active: var(--dk-component-icon-button-subtle-surface-active);
  --_ib-icon: var(--dk-component-icon-button-subtle-icon-default);
  --_ib-icon-hover: var(--dk-component-icon-button-subtle-icon-hover);
  --_ib-icon-active: var(--dk-component-icon-button-subtle-icon-active);
  --_ib-ring: var(--dk-component-icon-button-subtle-ring);
}
.dk-component-icon-button[data-variant="ghost"] {
  --_ib-bg: var(--dk-component-icon-button-ghost-surface-default);
  --_ib-bg-hover: var(--dk-component-icon-button-ghost-surface-hover);
  --_ib-bg-active: var(--dk-component-icon-button-ghost-surface-active);
  --_ib-icon: var(--dk-component-icon-button-ghost-icon-default);
  --_ib-icon-hover: var(--dk-component-icon-button-ghost-icon-hover);
  --_ib-icon-active: var(--dk-component-icon-button-ghost-icon-active);
  --_ib-ring: var(--dk-component-icon-button-ghost-ring);
}
/* plain: the same control with an edge. It writes --_ib-border-width, which the
   box-size calculation above adds to the rung, so a bordered variant is two
   pixels taller than a borderless one at the same size. That is deliberate and
   is the behaviour Button's bordered variants already have; check:contract's
   height cohorts measure the DEFAULT variant for exactly this reason, so they
   assert the rung rather than a difference that is supposed to exist. */
.dk-component-icon-button[data-variant="plain"] {
  --_ib-border-width: var(--dk-component-icon-button-plain-border-width);
  --_ib-bg: var(--dk-component-icon-button-plain-surface-default);
  --_ib-bg-hover: var(--dk-component-icon-button-plain-surface-hover);
  --_ib-bg-active: var(--dk-component-icon-button-plain-surface-active);
  --_ib-border: var(--dk-component-icon-button-plain-border-default);
  --_ib-border-hover: var(--dk-component-icon-button-plain-border-hover);
  --_ib-border-active: var(--dk-component-icon-button-plain-border-active);
  --_ib-icon: var(--dk-component-icon-button-plain-icon-default);
  --_ib-icon-hover: var(--dk-component-icon-button-plain-icon-hover);
  --_ib-icon-active: var(--dk-component-icon-button-plain-icon-active);
  --_ib-ring: var(--dk-component-icon-button-plain-ring);
}
.dk-component-icon-button[data-variant="raised"] {
  --_ib-lift: var(--dk-component-icon-button-raised-shadow);
  --_ib-lift-hover: var(--dk-component-icon-button-raised-shadow-hover);
  --_ib-lift-active: var(--dk-component-icon-button-raised-shadow-active);
  --_ib-border-width: var(--dk-component-icon-button-raised-border-width);
  --_ib-bg: var(--dk-component-icon-button-raised-surface-default);
  --_ib-bg-hover: var(--dk-component-icon-button-raised-surface-hover);
  --_ib-bg-active: var(--dk-component-icon-button-raised-surface-active);
  --_ib-border: var(--dk-component-icon-button-raised-border-default);
  --_ib-border-hover: var(--dk-component-icon-button-raised-border-hover);
  --_ib-border-active: var(--dk-component-icon-button-raised-border-active);
  --_ib-icon: var(--dk-component-icon-button-raised-icon-default);
  --_ib-icon-hover: var(--dk-component-icon-button-raised-icon-hover);
  --_ib-icon-active: var(--dk-component-icon-button-raised-icon-active);
  --_ib-ring: var(--dk-component-icon-button-raised-ring);
}
/* solid: the primary fill. No lift, no edge (a transparent border keeps the
   box the other variants have). */
.dk-component-icon-button[data-variant="solid"] {
  --_ib-bg: var(--dk-component-icon-button-solid-surface-default);
  --_ib-bg-hover: var(--dk-component-icon-button-solid-surface-hover);
  --_ib-bg-active: var(--dk-component-icon-button-solid-surface-active);
  --_ib-border: transparent;
  --_ib-border-hover: transparent;
  --_ib-border-active: transparent;
  --_ib-icon: var(--dk-component-icon-button-solid-icon-default);
  --_ib-icon-hover: var(--dk-component-icon-button-solid-icon-hover);
  --_ib-icon-active: var(--dk-component-icon-button-solid-icon-active);
  --_ib-ring: var(--dk-component-icon-button-solid-ring);
}

/* PRESSED: a toggle that is on takes the primary glyph ramp. Written to the
   same slots the variants fill, and after all of them, so hover and press
   step the primary ramp instead of repainting the glyph neutral (17 Oct). */
.dk-component-icon-button[aria-pressed="true"] {
  --_ib-icon: var(--dk-component-icon-button-pressed-icon-default);
  --_ib-icon-hover: var(--dk-component-icon-button-pressed-icon-hover);
  --_ib-icon-active: var(--dk-component-icon-button-pressed-icon-active);
}
/* data-pressed-glyph="fill": a closed glyph (a heart, a star, a bookmark)
   fills when on, in the pressed colour. Opt-in: a line glyph (a check, a
   bell) would fill to a blob. */
/* ONE element animates the fill, the svg; its paths inherit the moving
   value. With each path easing too, the svg's transition ending restarted
   theirs, and a 160ms fill took about 330ms (17 Oct, measured frame by
   frame). The duration is the one the button resolved, so the glyph and the
   fill behind it move as one. transparent, not none: none is not a colour,
   so the fill snapped. */
.dk-component-icon-button[data-pressed-glyph="fill"] svg {
  fill: transparent;
  transition: fill var(--_ib-state-duration) var(--dk-motion-state-easing);
}
.dk-component-icon-button[data-pressed-glyph="fill"] svg * { fill: inherit; }
.dk-component-icon-button[data-pressed-glyph="fill"][aria-pressed="true"] svg { fill: currentColor; }
/* Off, it previews that fill under the pointer: a share of the state's
   glyph mixed into the state's own fill, and a step further on press. */
.dk-component-icon-button[data-pressed-glyph="fill"]:not([aria-pressed="true"]):is([data-pseudo-class="hover"]):not(:disabled):not([aria-disabled="true"]) svg { fill: color-mix(in srgb, var(--_ib-icon-hover) var(--dk-component-icon-button-preview-fill-hover), var(--_ib-bg-hover)); }
@media (hover: hover) {
  .dk-component-icon-button[data-pressed-glyph="fill"]:not([aria-pressed="true"]):is(:hover):not(:disabled):not([aria-disabled="true"]) svg { fill: color-mix(in srgb, var(--_ib-icon-hover) var(--dk-component-icon-button-preview-fill-hover), var(--_ib-bg-hover)); }
}
.dk-component-icon-button[data-pressed-glyph="fill"]:not([aria-pressed="true"]):is(:active, [data-pseudo-class="active"]):not(:disabled):not([aria-disabled="true"]) svg { fill: color-mix(in srgb, var(--_ib-icon-active) var(--dk-component-icon-button-preview-fill-active), var(--_ib-bg-active)); }

/* ── States. One set, reading the slots.
   FOCUS IS EXCLUDED FROM HOVER, not merely ordered after it. Hover and focus
   are separate selectors at the same specificity, so source order alone decides
   which wins when both apply, and that broke on all three field components in
   September when a :has() argument quietly raised hover's specificity. Saying
   it in the selector cannot be undone by a later edit.

   AND SO IS THE PRESS, for a reason the paragraph above should have caught the
   first time: a pressed button is also a hovered one. This rule carries five
   :not()s and the press rule four, so hover outranked it 6 to 5 and won every
   real mouse press. The press looked correct in the docs and nowhere else,
   because the forced [data-pseudo-class="active"] rule below is a different
   selector that no :hover competes with -- so every probe that set the
   attribute passed while clicking did nothing. Only the transform came
   through, since hover does not set one. Measured with a real mouse down,
   which is the only thing that would have shown it. */
@media (hover: hover) {
  .dk-component-icon-button:hover:not(:disabled):not([aria-disabled="true"]):not(:active):not(:focus-visible):not([data-pseudo-class]) {
    background-color: var(--_ib-bg-hover);
    border-color: var(--_ib-border-hover, var(--_ib-border, transparent));
    color: var(--_ib-icon-hover);
    box-shadow: var(--_ib-lift-hover, var(--_ib-lift, none));
  }
}
/* PRESS TAKES THE HOVER GLYPH TOO. The press fill is the strongest of the
   three, so leaving the glyph at its resting weight cost contrast exactly where
   the fill had eaten the most of it: measured at 2.59 against its own fill on a
   pressed primary panel, under the 3:1 floor. A press is a stronger hover, not
   a different colour scheme. */
.dk-component-icon-button:active:not(:disabled):not([aria-disabled="true"]):not([data-pseudo-class]) {
  background-color: var(--_ib-bg-active);
  border-color: var(--_ib-border-active, var(--_ib-border, transparent));
  color: var(--_ib-icon-active);
  transform: scale(var(--dk-component-icon-button-transform-scale-active));
  box-shadow: var(--_ib-lift-active, var(--_ib-lift, none));
}
.dk-component-icon-button:focus-visible:not(:disabled):not([aria-disabled="true"]):not([data-pseudo-class]) {
  outline: none;
  box-shadow: 0 0 0 var(--dk-component-icon-button-focus-ring-width) var(--_ib-ring);
}
/* Raised keeps its lift under the ring. */
.dk-component-icon-button[data-variant="raised"]:focus-visible:not(:disabled):not([aria-disabled="true"]):not([data-pseudo-class]) {
  box-shadow: 0 0 0 var(--dk-component-icon-button-focus-ring-width) var(--_ib-ring), var(--_ib-lift, 0 0 0 0 transparent);
}
.dk-component-icon-button:disabled,
.dk-component-icon-button[aria-disabled="true"] {
  background-color: var(--dk-component-icon-button-surface-disabled);
  border-color: transparent;
  color: var(--dk-component-icon-button-icon-disabled);
  cursor: not-allowed;
  box-shadow: none;
}

/* Forced states for the docs, the same convention Button uses. */
.dk-component-icon-button[data-pseudo-class="hover"] { background-color: var(--_ib-bg-hover); border-color: var(--_ib-border-hover, var(--_ib-border, transparent)); color: var(--_ib-icon-hover); box-shadow: var(--_ib-lift-hover, var(--_ib-lift, none)); }
.dk-component-icon-button[data-pseudo-class="active"] { background-color: var(--_ib-bg-active); border-color: var(--_ib-border-active, var(--_ib-border, transparent)); color: var(--_ib-icon-active); transform: scale(var(--dk-component-icon-button-transform-scale-active)); box-shadow: var(--_ib-lift-active, var(--_ib-lift, none)); }
.dk-component-icon-button[data-pseudo-class="focus"] { box-shadow: 0 0 0 var(--dk-component-icon-button-focus-ring-width) var(--_ib-ring); }
.dk-component-icon-button[data-variant="raised"][data-pseudo-class="focus"] { box-shadow: 0 0 0 var(--dk-component-icon-button-focus-ring-width) var(--_ib-ring), var(--_ib-lift, 0 0 0 0 transparent); }

/* ── The glyph. BOTH svg AND i: the icon runtime renders <i data-lucide> and
   swaps it for an <svg>, so sizing only one of them leaves the other unsized
   for however long the runtime takes to arrive, or forever if it never does. */
.dk-component-icon-button svg,
.dk-component-icon-button i {
  inline-size: var(--_ib-icon-size);
  block-size: var(--_ib-icon-size);
  display: block;
  color: inherit;
}

/* ── Loading. Button's state in a square: the glyph fades and a spinner takes
   its place, so the button keeps its size. dk.component.iconButton.loading()
   (components/button/behaviour.js) writes .is-loading, aria-busy and
   aria-disabled, which is why it also takes the disabled look; it stays
   focusable. Centred by inset and margin, not a transform: the rotation owns
   the transform. */
.dk-component-icon-button.is-loading > *:not(.dk-component-icon-button__spinner) { opacity: 0; }
.dk-component-icon-button.is-loading .dk-component-icon-button__spinner { position: absolute; inset: 0; margin: auto; }
@keyframes dk-component-icon-button-spin { to { transform: rotate(360deg); } }
.dk-component-icon-button__spinner {
  box-sizing: border-box;
  width: var(--_ib-spinner); height: var(--_ib-spinner);
  border: var(--dk-component-icon-button-spinner-border-width) solid var(--dk-component-icon-button-spinner-track);
  border-top-color: var(--dk-component-icon-button-spinner-head);
  border-radius: 50%;
  animation: dk-component-icon-button-spin var(--dk-component-icon-button-spin-duration) var(--dk-motion-loop-easing) infinite;
}

/* ════════════════════════════════════ drift-kit:layer components/select/styles.css ════════════════════════════════════ */
/* ── Select ──────────────────────────────────────────────────────────────────
   A <button> trigger shaped like a field, and a floating listbox it drives.
   The chosen value lives in a hidden <input> so the control posts inside an
   ordinary form. Behaviour, which is most of what this component is, lives in
   behaviour.js: call dk.component.select.init() after the markup exists, or let
   it auto-run on DOMContentLoaded.

   ONE CONTROL, NOT TWO, and that is the design decision everything else here
   follows from. The trigger and the list are wired to each other:
   aria-controls names the list, aria-expanded reports it, and
   aria-activedescendant on the trigger points at the option the keyboard is
   currently on, while focus never leaves the trigger. That is the APG's
   select-only combobox pattern, and it is why the list cannot be a component of
   its own: a trigger that cannot drive its list is a button that opens
   something nobody can operate, which is exactly what this was until 16.0.0.

   WHAT IS SHARED IS THE SURFACE, NOT THE SEMANTICS. The menu's box reads
   --dk-component-menu-*, named for the shape rather than for this component, so
   the action menus Forge hand-rolls seven times over can land on the same
   surface later with role="menu" and roving focus inside it. A listbox has a
   selected state and announces it; a menu has actions and does not. One
   stylesheet for the box, two sets of semantics on top.

   PRIVATE SLOTS, the pattern Checkbox, Switch and the icon button share: every
   colour the trigger paints comes from a --_sel-* slot on the root, the state
   rules set slots and the paint rules read them, so the live :hover and the
   docs' forced [data-pseudo-class="hover"] are one set of values.

   Purpose: One value from a list. A field-shaped trigger, a floating
     listbox, and the keyboard that drives both.

   Anatomy:
     div.dk-component-select[data-size][data-open][data-selected][data-menu-tone="inverse"]?[data-sheet-size="tall"]?[data-sheet-title="hidden"]?
       label.dk-component-select__label            (optional, + __req)
       input[type=hidden]                          (the form value)
       button.dk-component-select__trigger         (role=combobox)
         span.dk-component-select__leading         (optional, aria-hidden: one glyph for the
                                                    field, a hairline after it; stays whatever is chosen)
         span.dk-component-select__chips           (built by the behaviour, [data-multiple] only)
           span.dk-component-select__chip
             span.dk-component-select__chip-label
             span.dk-component-select__chip-remove (aria-hidden, a picture not a button)
         span.dk-component-select__value           ([data-empty] when unchosen)
           span.dk-component-select__value-icon    (optional)
           span.dk-component-select__value-label
         svg.dk-component-select__chevron
       div.dk-component-select__menu               (role=listbox, portalled)
         div.dk-component-select__search           (built by the behaviour, [data-search] only)
           input.dk-component-select__search-input (role=combobox; the menu becomes a
         div.dk-component-select__list              presentation wrapper and the LIST is the listbox)
         div.dk-component-select__group            (optional)
           span.dk-component-select__group-label
         button.dk-component-select__option        (role=option)
           span.dk-component-select__option-main
           span.dk-component-select__option-meta  (optional, right-aligned)
             span.dk-component-select__option-icon (optional)
             span.dk-component-select__option-text
               span.dk-component-select__option-label
               span.dk-component-select__option-desc  (optional)
           svg.dk-component-select__check
         p.dk-component-select__empty              (optional)
         div.dk-component-select__filters          (built by the behaviour, data-layout="icons" + [data-search])
           button.dk-component-select__filter      (aria-pressed; All, then each category)
       p.dk-component-select__caption              (optional)
       p.dk-component-select__error                (optional)                 */
.dk-component-select {
  position: relative; display: grid; gap: var(--dk-component-select-gap);
  --_sel-label: var(--dk-component-select-label-color);
}
.dk-component-select[hidden] { display: none; }

/* ── THE SLOTS LIVE ON THE TRIGGER, NOT ON THE ROOT, and that is a fix rather
   than a preference. A custom property declared on an element always beats one
   inherited from an ancestor, whatever the specificity, so a default on the
   root plus a size rule on the trigger would have made the root's value
   unreachable; keeping every writer on the same element lets ordinary
   specificity settle it, which is the arrangement input/styles.css arrived at
   for its __field and for the same reason.

   IT ALSO MAKES A LONE TRIGGER WORK. Forge's own control rail renders
   .dk-component-select__trigger with no .dk-component-select around it, and
   with the slots on the root those triggers resolved to nothing at all: no
   height, no fill, no border. check:vars found it on 3 elements across two
   pages the moment this was written the other way. ── */
.dk-component-select__trigger {
  --_sel-surface: var(--dk-component-select-surface-default);
  --_sel-surface-hover: var(--dk-component-select-surface-hover);
  --_sel-surface-active: var(--dk-component-select-surface-active);
  --_sel-border: var(--dk-component-select-border-default);
  --_sel-border-hover: var(--dk-component-select-border-hover);
  --_sel-border-focus: var(--dk-component-select-border-focus);
  --_sel-ring: var(--dk-component-select-ring);
  --_sel-value: var(--dk-component-select-value-color);
  --_sel-placeholder: var(--dk-component-select-placeholder-color);
  --_sel-chevron: var(--dk-component-select-chevron-color);
  --_sel-chevron-hover: var(--dk-component-select-chevron-color-hover);
  --_sel-icon: var(--dk-component-select-value-icon-color);
  --_sel-lead: var(--dk-component-select-leading-color);
  --_sel-lead-hover: var(--dk-component-select-leading-color-hover);
  --_sel-lead-active: var(--dk-component-select-leading-color-active);
  --_sel-lead-divider: var(--dk-component-select-leading-divider);
  --_sel-lead-divider-hover: var(--dk-component-select-leading-divider-hover);
  --_sel-lead-divider-active: var(--dk-component-select-leading-divider-active);
  --_sel-height: var(--dk-component-select-height);
  --_sel-font-size: var(--dk-component-select-font-size);
  --_sel-line-height: var(--dk-component-select-line-height);
}

/* ── Sizes. Input's three rungs by the same arithmetic, so a select and a field
   stack cleanly in a form and a select and a button line up in a row. ── */
.dk-component-select[data-size="small"] .dk-component-select__trigger {
  --_sel-height: var(--dk-component-select-small-height);
  --_sel-font-size: var(--dk-component-select-small-font-size);
  --_sel-line-height: var(--dk-component-select-small-line-height);
}
.dk-component-select[data-size="large"] .dk-component-select__trigger {
  --_sel-height: var(--dk-component-select-large-height);
  --_sel-font-size: var(--dk-component-select-large-font-size);
  --_sel-line-height: var(--dk-component-select-large-line-height);
}

/* ── data-variant="inset" (14 Oct): the Glider's inset look, the trigger sunk
   into the surface on the nested ramp with no edge. In :where(), so this is
   no stronger than the trigger's own rule and the error and disabled rules
   below still win; focus keeps its edge and ring. ── */
:where(.dk-component-select[data-variant="inset"]) .dk-component-select__trigger {
  --_sel-surface: var(--dk-component-select-inset-surface);
  --_sel-surface-hover: var(--dk-component-select-inset-surface-hover);
  --_sel-surface-active: var(--dk-component-select-inset-surface-active);
  --_sel-border: var(--dk-component-select-inset-border);
  --_sel-border-hover: var(--dk-component-select-inset-border);
  --_sel-value: var(--dk-component-select-inset-value-color);
  --_sel-placeholder: var(--dk-component-select-inset-placeholder-color);
  --_sel-chevron: var(--dk-component-select-inset-chevron-color);
  /* Under the pointer it keeps its own colour, the tone's on a toned panel. */
  --_sel-chevron-hover: var(--_sel-chevron);
}
/* Inside a status tone, the tone's icon. Zero weight, so disabled still wins. */
:where([data-tone="primary"] .dk-component-select[data-variant="inset"]) .dk-component-select__trigger { --_sel-chevron: var(--dk-component-select-inset-chevron-primary); }
:where([data-tone="success"] .dk-component-select[data-variant="inset"]) .dk-component-select__trigger { --_sel-chevron: var(--dk-component-select-inset-chevron-success); }
:where([data-tone="error"] .dk-component-select[data-variant="inset"]) .dk-component-select__trigger { --_sel-chevron: var(--dk-component-select-inset-chevron-error); }
:where([data-tone="warning"] .dk-component-select[data-variant="inset"]) .dk-component-select__trigger { --_sel-chevron: var(--dk-component-select-inset-chevron-warning); }
:where([data-tone="information"] .dk-component-select[data-variant="inset"]) .dk-component-select__trigger { --_sel-chevron: var(--dk-component-select-inset-chevron-information); }

/* ── Raised takes Input's raised edge (16 Oct): the raised border rungs, a
   step fainter than the field's, so a raised select and a raised field read
   the same side by side. Zero weight, so error and disabled below still win.
   On the root and on a lone trigger, as the raised shadow is. ── */
:where(.dk-component-select:is([data-raised], [data-variant="raised"])) .dk-component-select__trigger,
.dk-component-select__trigger:where([data-raised], [data-variant="raised"]) {
  --_sel-border: var(--dk-component-select-raised-border-default);
  --_sel-border-hover: var(--dk-component-select-raised-border-hover);
  --_sel-border-focus: var(--dk-component-select-raised-border-focus);
}

/* ── aria-invalid, which is how Input spells an error too: the border carries
   it and the fill does not, since a red FILLED control would read as a chosen
   state in a colour it does not have. On the trigger itself, so a lone trigger
   can be invalid as well. ── */
.dk-component-select__trigger[aria-invalid="true"] {
  --_sel-border: var(--dk-component-select-error-border-default);
  --_sel-border-hover: var(--dk-component-select-error-border-default);
  --_sel-border-focus: var(--dk-component-select-error-border-focus);
  --_sel-ring: var(--dk-component-select-error-ring);
}

/* ── Disabled. THE NATIVE ATTRIBUTE, not a class. This component carried
   .dk-component-select--disabled until 16.0.0, the last BEM-style modifier in a
   kit that uses attributes everywhere else, on a component whose trigger is a
   real <button> that can simply be :disabled. The old class is gone rather than
   deprecated: it styled the trigger without disabling it, so a "disabled"
   select still opened, still took focus and still changed its value. ── */
.dk-component-select__trigger:disabled {
  --_sel-surface: var(--dk-component-select-disabled-surface);
  --_sel-border: var(--dk-component-select-disabled-border);
  --_sel-value: var(--dk-component-select-disabled-value-color);
  --_sel-chevron: var(--dk-component-select-disabled-icon-color);
  --_sel-icon: var(--dk-component-select-disabled-icon-color);
  --_sel-lead: var(--dk-component-select-disabled-icon-color);
  --_sel-lead-divider: var(--dk-component-select-disabled-border);
}
.dk-component-select:has(.dk-component-select__trigger:disabled) {
  --_sel-label: var(--dk-component-select-disabled-label-color);
}

/* ── The label, and the asterisk it may carry. An Eyebrow, the same as Input's,
   reading this component's own tokens for the reason tokens.css opens with. ── */
.dk-component-select__label {
  font-family: var(--dk-component-select-label-font-family);
  text-transform: uppercase;
  font-size: var(--dk-component-select-label-font-size);
  line-height: var(--dk-component-select-label-line-height);
  letter-spacing: var(--dk-component-select-label-letter-spacing);
  font-weight: var(--dk-component-select-label-font-weight);
  color: var(--_sel-label);
}
.dk-component-select__label .dk-component-req { color: var(--dk-component-select-required-color); margin-left: 2px; }

/* ── The trigger ── */
.dk-component-select__trigger {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: var(--dk-component-select-slot-gap);
  width: 100%; box-sizing: border-box;
  min-height: var(--_sel-height);
  padding: 0 var(--dk-component-select-padding-inline);
  background: var(--_sel-surface);
  border: var(--dk-component-select-border-width) solid var(--_sel-border);
  border-radius: var(--dk-component-select-radius);
  cursor: pointer; text-align: left;
  font-family: var(--dk-component-select-font-family);
  transition: background-color var(--dk-component-select-duration) var(--dk-component-select-easing),
              border-color var(--dk-component-select-duration) var(--dk-component-select-easing),
              box-shadow var(--dk-component-select-duration) var(--dk-component-select-easing);
}
/* Hover moves the border and the fill together, matching Input, and stands
   down while the menu is open, while the trigger has focus and while it is
   pressed. Those guards are not decoration: this component had them wrong in
   both directions at once, and the header of the previous cut recorded it.
   :not(:disabled) alone put hover at (0,3,0) against :focus-visible and :active
   at (0,2,0), so neither could ever show while the pointer was on the trigger,
   which for a button is always; adding the guards then raised hover to (0,5,0)
   and overtook the [data-open] rule at (0,3,0), which had been winning on
   source order alone, so the menu opened with the trigger still in its hover
   look. Scoping to :not([data-open]) on the ROOT stops hover matching at all
   while the menu is up, which no specificity arithmetic can undo later. */
@media (hover: hover) {
  .dk-component-select:not([data-open]) .dk-component-select__trigger:hover:not(:disabled):not(:focus-visible):not(:active) {
    background: var(--_sel-surface-hover);
    border-color: var(--_sel-border-hover);
  }
}
.dk-component-select__trigger:active:not(:disabled) {
  background: var(--_sel-surface-active);
  border-color: var(--_sel-border-focus);
}
/* FOCUS AND OPEN ARE ONE LOOK, because they are one state as far as a reader is
   concerned: the control is live and the keyboard is on it. Written as two
   selectors rather than one so the open state survives a click, which takes
   focus without :focus-visible matching. */
.dk-component-select__trigger:focus-visible,
.dk-component-select[data-open] .dk-component-select__trigger {
  border-color: var(--_sel-border-focus);
  box-shadow: 0 0 0 var(--dk-component-select-focus-ring-width) var(--_sel-ring);
  outline: none;
}
.dk-component-select__trigger:disabled { cursor: not-allowed; }

/* ── data-raised: a trigger lifted off the surface rather than sitting flush in
   it, for the one-per-page control that is the first thing on a screen. The
   same attribute Input carries, doing the same thing, and the same trade
   recorded there: the shadow is the whole of it.

   THE SHADOW STACKS WITH THE FOCUS RING rather than replacing it, which is the
   bug Search bar had worst before it was folded into Input: both are
   box-shadow, so the only way to have both is to write both, in one
   declaration, in every rule where both apply. For a select that is two rules
   rather than one, because a trigger has an OPEN state as well as a focused
   one and they are painted separately.

   The attribute is read on the root and on the trigger, so a lone trigger, the
   shape Forge's own control rail renders, can be raised too. ── */
.dk-component-select:is([data-raised], [data-variant="raised"]) .dk-component-select__trigger,
.dk-component-select__trigger:is([data-raised], [data-variant="raised"]) {
  box-shadow: var(--dk-component-select-raised-shadow);
}
@media (hover: hover) {
  .dk-component-select:is([data-raised], [data-variant="raised"]):not([data-open]) .dk-component-select__trigger:hover:not(:disabled):not(:focus-visible):not(:active),
  .dk-component-select__trigger:is([data-raised], [data-variant="raised"]):hover:not(:disabled):not(:focus-visible):not(:active) {
    box-shadow: var(--dk-component-select-raised-shadow-hover);
  }
}
.dk-component-select:is([data-raised], [data-variant="raised"]) .dk-component-select__trigger:focus-visible,
.dk-component-select:is([data-raised], [data-variant="raised"])[data-open] .dk-component-select__trigger,
.dk-component-select__trigger:is([data-raised], [data-variant="raised"]):focus-visible {
  box-shadow: var(--dk-component-select-raised-shadow-hover),
              0 0 0 var(--dk-component-select-focus-ring-width) var(--_sel-ring);
}
/* Nor does a raised one lift for a chip: same reasoning as the fill above, one
   rung further out. */
@media (hover: hover) {
  .dk-component-select:is([data-raised], [data-variant="raised"]):not([data-open]) .dk-component-select__trigger:hover:not(:disabled):not(:focus-visible):not(:active):has(.dk-component-select__chip:hover),
  .dk-component-select__trigger:is([data-raised], [data-variant="raised"]):hover:not(:disabled):not(:focus-visible):not(:active):has(.dk-component-select__chip:hover) {
    box-shadow: var(--dk-component-select-raised-shadow);
  }
}
/* A dead control is not lifted. */
.dk-component-select:is([data-raised], [data-variant="raised"]) .dk-component-select__trigger:disabled,
.dk-component-select__trigger:is([data-raised], [data-variant="raised"]):disabled { box-shadow: none; }

/* ── The same states, forced, for the documentation's state control. They read
   the same slots, so there is one set of values. ── */
.dk-component-select[data-pseudo-class="hover"] .dk-component-select__trigger {
  background: var(--_sel-surface-hover); border-color: var(--_sel-border-hover);
}
.dk-component-select[data-pseudo-class="active"] .dk-component-select__trigger {
  background: var(--_sel-surface-active); border-color: var(--_sel-border-focus);
}
.dk-component-select[data-pseudo-class="focus"] .dk-component-select__trigger {
  border-color: var(--_sel-border-focus);
  box-shadow: 0 0 0 var(--dk-component-select-focus-ring-width) var(--_sel-ring);
}
/* The forced states have to carry the lift as well, or the docs' state control
   shows a raised select losing its shadow the moment you read its hover. */
.dk-component-select:is([data-raised], [data-variant="raised"])[data-pseudo-class="hover"] .dk-component-select__trigger,
.dk-component-select:is([data-raised], [data-variant="raised"])[data-pseudo-class="active"] .dk-component-select__trigger {
  box-shadow: var(--dk-component-select-raised-shadow-hover);
}
.dk-component-select:is([data-raised], [data-variant="raised"])[data-pseudo-class="focus"] .dk-component-select__trigger {
  box-shadow: var(--dk-component-select-raised-shadow-hover),
              0 0 0 var(--dk-component-select-focus-ring-width) var(--_sel-ring);
}

.dk-component-select__value {
  display: flex; align-items: center; gap: var(--dk-component-select-slot-gap);
  min-width: 0; overflow: hidden;
  font-size: var(--_sel-font-size); line-height: var(--_sel-line-height);
  font-weight: var(--dk-component-select-value-font-weight);
  color: var(--_sel-value);
}
/* An unchosen select says what an empty field says, so it wears what an empty
   field wears. */
.dk-component-select__value[data-empty] {
  color: var(--_sel-placeholder);
  font-weight: var(--dk-component-select-placeholder-font-weight);
}
.dk-component-select__trigger:disabled .dk-component-select__value[data-empty] {
  color: var(--_sel-value);
}
.dk-component-select__value-icon { display: flex; align-items: center; flex-shrink: 0; color: var(--_sel-icon); }
.dk-component-select__value-icon > svg, .dk-component-select__value-icon > i {
  display: block;
  width: var(--dk-component-select-option-icon-size);
  height: var(--dk-component-select-option-icon-size);
}
.dk-component-select__value-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ── The leading glyph (29 Oct): the field's own, in place of a label's
   words ("[palette] | Default" for "Tone: Default"). Primary, on the primary
   icon ramp: hover steps it, a press or an open menu steps it again,
   disabled greys it, and inside a tone the tone's primary icon is the one it
   reads. A hairline follows it, the height of the glyph, with a little more
   air after it than before. The trigger makes room for it only when it is
   there. ── */
.dk-component-select__trigger:has(> .dk-component-select__leading) {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.dk-component-select__leading {
  display: flex; align-items: center; gap: var(--dk-component-select-slot-gap);
  padding-inline-end: var(--dk-component-select-leading-after);
  color: var(--_sel-lead);
  transition: color var(--dk-component-select-duration) var(--dk-component-select-easing);
}
/* On an inverse surface the control border's first rung all but vanishes
   against the opposite theme, so the hairline starts a rung stronger there.
   :where() keeps it below disabled, which still greys it. */
:where([data-tone="inverse"] .dk-component-select) .dk-component-select__trigger {
  --_sel-lead-divider: var(--dk-component-select-leading-divider-inverse);
  --_sel-lead-divider-hover: var(--dk-component-select-leading-divider-inverse-hover);
  --_sel-lead-divider-active: var(--dk-component-select-leading-divider-inverse-active);
}
/* The glyph and its hairline step together, the hairline on the control
   border ramp as the trigger's fill steps on the control fill ramp. */
.dk-component-select[data-pseudo-class="hover"] .dk-component-select__leading {
  color: var(--_sel-lead-hover); --_sel-lead-divider: var(--_sel-lead-divider-hover);
}
@media (hover: hover) {
  .dk-component-select__trigger:hover:not(:disabled) .dk-component-select__leading {
    color: var(--_sel-lead-hover); --_sel-lead-divider: var(--_sel-lead-divider-hover);
  }
}
.dk-component-select__trigger:active:not(:disabled) .dk-component-select__leading,
.dk-component-select[data-open] .dk-component-select__leading,
.dk-component-select[data-pseudo-class="active"] .dk-component-select__leading {
  color: var(--_sel-lead-active); --_sel-lead-divider: var(--_sel-lead-divider-active);
}
.dk-component-select__leading > svg, .dk-component-select__leading > i {
  display: block; flex-shrink: 0;
  width: var(--dk-component-select-option-icon-size);
  height: var(--dk-component-select-option-icon-size);
}
.dk-component-select__leading::after {
  content: ''; align-self: center;
  height: var(--dk-component-select-option-icon-size);
  border-inline-start: var(--dk-component-select-leading-divider-width) solid var(--_sel-lead-divider);
  transition: border-color var(--dk-component-select-duration) var(--dk-component-select-easing);
}

.dk-component-select__chevron {
  width: var(--dk-component-select-chevron-size); height: var(--dk-component-select-chevron-size);
  flex-shrink: 0; color: var(--_sel-chevron);
  transition: transform var(--dk-component-select-duration) var(--dk-component-select-easing),
              color var(--dk-component-select-duration) var(--dk-component-select-easing);
}
@media (hover: hover) {
  .dk-component-select__trigger:hover:not(:disabled) .dk-component-select__chevron { color: var(--_sel-chevron-hover); }
}
.dk-component-select[data-open] .dk-component-select__chevron { transform: rotate(180deg); }

/* ── The caption and the error, which this component did not have. Both are
   <p>, so both zero the UA margin for the reason input/styles.css records: it
   does not collapse inside a grid, it ADDS to the gap. ── */
.dk-component-select__caption, .dk-component-select__error {
  margin: 0;
  font-family: var(--dk-component-select-font-family);
  font-size: var(--dk-component-select-caption-font-size);
  line-height: var(--dk-component-select-caption-line-height);
}
.dk-component-select__caption { color: var(--dk-component-select-caption-color); }
.dk-component-select__error { color: var(--dk-component-select-error-color); }
.dk-component-select:has(.dk-component-select__trigger:disabled) .dk-component-select__caption {
  color: var(--dk-component-select-disabled-label-color);
}

/* ── The floating surface. Shared tokens, this component's class: see the
   header for why the class stays local until Dropdown exists. ── */
.dk-component-select__menu, .dk-component-menu {
  z-index: 1100;
  /* BORDER-BOX so the width the positioner sets is the width it renders. The
     menu is given the trigger's width, and under content-box its 1px borders
     were added on top: a 320px trigger got a 322px menu, overhanging by 2px on
     the right. Measured 18 Sep; the same bug as Input's 46px field, from the
     same cause. */
  box-sizing: border-box;
  /* As wide as the widest option needs. The floor is the trigger's width, set
     by behaviour.js before it measures; the cap is the token, and the viewport
     behind it. See tokens.css for why the trigger is the wrong ruler. */
  width: max-content;
  max-width: min(var(--dk-component-menu-max-width),
                 calc(100vw - 2 * var(--dk-component-menu-viewport-gap)));
  background: var(--dk-component-menu-surface);
  border: var(--dk-component-menu-border-width) solid var(--dk-component-menu-border);
  border-radius: var(--dk-component-menu-radius);
  box-shadow: var(--dk-component-menu-shadow);
  padding: var(--dk-component-menu-padding-block) var(--dk-component-menu-padding-inline);
  max-height: var(--dk-component-menu-max-height);
  overflow-y: auto;
}
.dk-component-select__menu[hidden], .dk-component-menu[hidden] { display: none; }
/* Leaving (dk.menu's desktop exit): nothing to click on the way out. */
.dk-component-select__menu[data-closing], .dk-component-menu[data-closing] { pointer-events: none; }
/* House scrollbar, the same treatment the icon-picker grid wears: an inset pill
   thumb on a transparent track, brightening on hover. Shows only when the
   options overflow the max-height. */
.dk-component-select__menu::-webkit-scrollbar, .dk-component-menu::-webkit-scrollbar { width: 12px; }
.dk-component-select__menu::-webkit-scrollbar-track, .dk-component-menu::-webkit-scrollbar-track { background: transparent; }
.dk-component-select__menu::-webkit-scrollbar-thumb, .dk-component-menu::-webkit-scrollbar-thumb {
  background: var(--dk-component-menu-scrollbar-thumb); background-clip: padding-box;
  border: 3px solid transparent; border-radius: 8px;
}
@media (hover: hover) {
  .dk-component-select__menu::-webkit-scrollbar-thumb:hover,
  .dk-component-menu::-webkit-scrollbar-thumb:hover {
    background: var(--dk-component-menu-scrollbar-thumb-hover); background-clip: padding-box;
  }
}

/* ── An option ── */
.dk-component-select__option {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--dk-component-select-option-gap);
  width: 100%;
  padding: var(--dk-component-select-option-padding-block) var(--dk-component-select-option-padding-inline);
  border: 0; background: transparent; cursor: pointer; text-align: left;
  border-radius: var(--dk-component-select-option-radius);
  font-family: var(--dk-component-select-font-family);
  font-size: var(--dk-component-select-option-font-size);
  line-height: var(--dk-component-select-option-line-height);
  font-weight: var(--dk-component-select-option-font-weight);
  color: var(--dk-component-select-option-color);
  transition: background-color var(--dk-component-select-duration-fast) var(--dk-motion-state-easing),
              transform var(--dk-component-select-duration-fast) var(--dk-motion-state-easing);
}
/* ── ONE HIGHLIGHT, AND WHICHEVER INPUT IS DRIVING OWNS IT ──────────────────
   The active option and the hovered option are two different facts. The active
   one is where the KEYBOARD is, it must exist the whole time the menu is open
   because aria-activedescendant has to point at something, and hovering moves
   it so that Enter always takes the row you are looking at. Painting both with
   one rule made the pointer's position permanent: hover a row, move the mouse
   out of the menu, and the highlight stayed behind, because the active option
   had not gone anywhere. A stuck hover, reported on sight.

   So the menu records which input moved last, and only that one paints:

     data-nav="pointer"    :hover paints, and stops the moment the pointer
                           leaves. The active option is still set, silently,
                           for the screen reader and for the next keypress.
     data-nav="keyboard"   [data-active] paints, and :hover is suppressed, or
                           arrowing past a row the pointer happens to be
                           resting on would light two.

   There is no :focus-visible rule here and its absence is the point: focus
   stays on the trigger while the menu is open, which is what
   aria-activedescendant means. The old stylesheet painted a 4px inset ring on
   an option's :focus-visible, a state no option could ever reach, in a raw
   --dk-color-primary-300 read straight from the primitives. ── */
@media (hover: hover) {
  .dk-component-select__option:hover:not(:disabled):where(:not(.dk-component-select__menu:not([aria-multiselectable="true"], [data-layout="grid"]) [aria-selected="true"], .dk-component-select__list:not([aria-multiselectable="true"]) [aria-selected="true"])) {
    background: var(--dk-component-select-option-surface-hover);
  }
}
@media (hover: hover) {
  .dk-component-select__menu[data-nav="keyboard"] .dk-component-select__option:hover:not(:disabled) {
    background: transparent;
  }
}
.dk-component-select__menu[data-nav="keyboard"] .dk-component-select__option[data-active]:not(:disabled):where(:not(.dk-component-select__menu:not([aria-multiselectable="true"], [data-layout="grid"]) [aria-selected="true"], .dk-component-select__list:not([aria-multiselectable="true"]) [aria-selected="true"])) {
  background: var(--dk-component-select-option-surface-hover);
}
/* The row settles under the finger, whole: icon, label, description and tick.
   Pointer only, and deliberately so. The keyboard's equivalent of a press is
   Enter, which chooses the option and closes the menu in the same frame, so a
   shrink there would be a flicker on something already leaving. */
.dk-component-select__option:active:not(:disabled):where(:not(.dk-component-select__menu:not([aria-multiselectable="true"], [data-layout="grid"]) [aria-selected="true"], .dk-component-select__list:not([aria-multiselectable="true"]) [aria-selected="true"])) {
  background: var(--dk-component-select-option-surface-active);
  transform: scale(var(--dk-component-select-option-transform-scale-active));
}
/* The words step with the row (16 Oct, the interaction foundation's word
   ramp), the keyboard's highlight included. */
.dk-component-select__menu[data-nav="keyboard"] .dk-component-select__option[data-active]:not(:disabled):where(:not(.dk-component-select__menu:not([aria-multiselectable="true"], [data-layout="grid"]) [aria-selected="true"], .dk-component-select__list:not([aria-multiselectable="true"]) [aria-selected="true"])) { color: var(--dk-component-select-option-color-hover); }
@media (hover: hover) {
  .dk-component-select__option:hover:not(:disabled):where(:not(.dk-component-select__menu:not([aria-multiselectable="true"], [data-layout="grid"]) [aria-selected="true"], .dk-component-select__list:not([aria-multiselectable="true"]) [aria-selected="true"])) { color: var(--dk-component-select-option-color-hover); }
}
@media (hover: hover) {
  .dk-component-select__menu[data-nav="keyboard"] .dk-component-select__option:hover:not(:disabled):not([data-active]) { color: var(--dk-component-select-option-color); }
}
.dk-component-select__option:active:not(:disabled):where(:not(.dk-component-select__menu:not([aria-multiselectable="true"], [data-layout="grid"]) [aria-selected="true"], .dk-component-select__list:not([aria-multiselectable="true"]) [aria-selected="true"])) { color: var(--dk-component-select-option-color-active); }
.dk-component-select__option:disabled { color: var(--dk-component-select-option-disabled-color); cursor: not-allowed; }

/* The size the list is rendered at, mirrored onto the portalled menu by open().
   A menu on <body> inherits nothing from the trigger it belongs to. */
.dk-component-select__menu[data-size="small"] .dk-component-select__option {
  font-size: var(--dk-component-select-small-option-font-size);
  line-height: var(--dk-component-select-small-option-line-height);
}
.dk-component-select__menu[data-size="large"] .dk-component-select__option {
  font-size: var(--dk-component-select-large-option-font-size);
  line-height: var(--dk-component-select-large-option-line-height);
}

/* ── MULTIPLE, and where its values live ─────────────────────────────────
   The listbox carries aria-multiselectable and every option keeps its own
   aria-selected, which is the whole of the semantics: choosing does not close
   the menu, and the tick that already marks the chosen option now marks all of
   them. What changes visually is the trigger, which has to hold more than one
   answer.

   THE CHIPS ARE INSIDE THE TRIGGER, not in a box around it. The alternative
   was a wrapper that paints the field while the trigger sits transparent
   inside it, and that would have meant a second copy of every state rule this
   component owns: hover, press, focus, open, raised, invalid, disabled. The
   trigger stays the box. Its grid holds exactly two children either way,
   because the chips and the placeholder are never shown at once. ── */
.dk-component-select[data-multiple] .dk-component-select__trigger {
  padding-block: var(--dk-component-select-chips-padding-block);
}
.dk-component-select__chips {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--dk-component-select-chip-gap);
  min-width: 0;
}
.dk-component-select[data-multiple][data-selected] .dk-component-select__value { display: none; }
.dk-component-select[data-multiple]:not([data-selected]) .dk-component-select__chips { display: none; }

.dk-component-select__chip {
  display: inline-flex; align-items: center; max-width: 100%;
  gap: var(--dk-component-select-chip-padding-block);
  padding: var(--dk-component-select-chip-padding-block) var(--dk-component-select-chip-padding-inline);
  border-radius: var(--dk-component-select-chip-radius);
  background: var(--dk-component-select-chip-surface);
  color: var(--dk-component-select-chip-color);
  box-shadow: var(--dk-component-select-chip-shadow);
  font-size: var(--dk-component-select-chip-font-size);
  line-height: var(--dk-component-select-chip-line-height);
  transition: background-color var(--dk-component-select-duration) var(--dk-component-select-easing);
}
@media (hover: hover) {
  .dk-component-select__chip:hover { background: var(--dk-component-select-chip-surface-hover); }
}
.dk-component-select__chip-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The cross is a control that happens not to be an element: a span, because the
   trigger around it is a real button. It answers like the icon button's ghost
   rung all the same — bare at rest, filled under the pointer, a tone deeper
   and smaller while pressed. */
.dk-component-select__chip-remove {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  box-sizing: border-box;
  width: var(--dk-component-select-chip-remove-size);
  height: var(--dk-component-select-chip-remove-size);
  border-radius: var(--dk-component-select-chip-remove-radius);
  background: var(--dk-component-select-chip-remove-surface);
  color: var(--dk-component-select-chip-remove-color);
  transition: background-color var(--dk-component-select-duration) var(--dk-component-select-easing),
              color var(--dk-component-select-duration) var(--dk-component-select-easing),
              transform var(--dk-component-select-duration) var(--dk-component-select-easing);
}
.dk-component-select__chip-remove > svg {
  display: block;
  width: var(--dk-component-select-chip-remove-icon-size);
  height: var(--dk-component-select-chip-remove-icon-size);
}
/* Its OWN hover, not the chip's: pointing at a chip should not light the thing
   that removes it, or every chip you read looks half-pressed. */
@media (hover: hover) {
  .dk-component-select__chip-remove:hover {
    background: var(--dk-component-select-chip-remove-surface-hover);
    color: var(--dk-component-select-chip-remove-color-hover);
  }
}
.dk-component-select__chip-remove:active {
  background: var(--dk-component-select-chip-remove-surface-active);
  color: var(--dk-component-select-chip-remove-color-active);
  transform: scale(var(--dk-component-select-chip-remove-transform-scale-active));
}

/* ── A CHIP IS NOT THE FIELD, and the pointer has to be told so ──────────────
   The chips are inside the trigger, which is where they belong, and the cost of
   that is this: :hover and :active match an ancestor too, so reading a chip lit
   the whole field and pressing a cross pressed the whole field with it. Two
   states painted at once, one of them about a value and the other about the
   control that holds it.

   Written as the SAME selectors plus the chip test rather than as a guard
   inside them, because this component's history is a specificity war: hover
   sits at (0,7,0) against an open state at (0,3,0) and a raised shadow of its
   own, and a :not() folded into those would have moved all three. These land
   above each, in source order, and put the resting value back. ── */
@media (hover: hover) {
  .dk-component-select:not([data-open]) .dk-component-select__trigger:hover:not(:disabled):not(:focus-visible):not(:active):has(.dk-component-select__chip:hover) {
    background: var(--_sel-surface);
    border-color: var(--_sel-border);
  }
}
.dk-component-select__trigger:active:not(:disabled):has(.dk-component-select__chip:active) {
  background: var(--_sel-surface);
  border-color: var(--_sel-border);
}
/* A disabled select's chips are read-only, so the cross stops inviting a click
   it will not honour. */
.dk-component-select__trigger:disabled .dk-component-select__chip-remove { display: none; }

.dk-component-select[data-size="small"] .dk-component-select__chip {
  font-size: var(--dk-component-select-small-chip-font-size);
  line-height: var(--dk-component-select-small-chip-line-height);
}
.dk-component-select[data-size="large"] .dk-component-select__chip {
  font-size: var(--dk-component-select-large-chip-font-size);
  line-height: var(--dk-component-select-large-chip-line-height);
}

.dk-component-select__option-main {
  display: flex; align-items: center; gap: var(--dk-component-select-option-gap); min-width: 0;
}
.dk-component-select__option-icon { display: flex; align-items: center; flex-shrink: 0; color: var(--dk-component-select-option-icon-color); }
.dk-component-select__option-icon > svg, .dk-component-select__option-icon > i {
  display: block;
  width: var(--dk-component-select-option-icon-size);
  height: var(--dk-component-select-option-icon-size);
}
.dk-component-select__menu[data-nav="keyboard"] .dk-component-select__option[data-active]:not(:disabled) .dk-component-select__option-icon {
  color: var(--dk-component-select-option-icon-color-hover);
}
@media (hover: hover) {
  .dk-component-select__option:hover:not(:disabled) .dk-component-select__option-icon {
    color: var(--dk-component-select-option-icon-color-hover);
  }
}
@media (hover: hover) {
  .dk-component-select__menu[data-nav="keyboard"] .dk-component-select__option:hover:not(:disabled) .dk-component-select__option-icon {
    color: var(--dk-component-select-option-icon-color);
  }
}
.dk-component-select__option:disabled .dk-component-select__option-icon { color: var(--dk-component-select-option-disabled-icon-color); }
/* A label, or a label and a second line. The wrapper is only needed for the
   second case, so an option that has no description needs no extra element:
   __option-label works directly inside __option-main. */
.dk-component-select__option-text { display: grid; gap: var(--dk-component-select-option-desc-gap); min-width: 0; }
/* ── A META, which is the part of a row that is not what you are choosing but
   what tells them apart: a dial code beside a country, a SKU beside a product,
   a shortcut beside a command. It sits against the far edge in a quieter
   colour, because a row read left to right should end on the thing you picked
   it by and not on the thing that qualifies it. ── */
.dk-component-select__option-meta {
  /* LAST IN THE ROW, PAST THE TICK. The tick holds its width whether or not it
     is showing, so a meta placed before it ended up inset by the tick plus a
     gap — 36px from the row's edge where the flag sits at 10. Reordering puts
     the meta hard against the same padding the flag is against, and the tick,
     which is the thing that appears and disappears, takes the space between
     them. Nothing shifts when a row is chosen, which is why that space was
     being held in the first place. */
  order: 1;
  flex: 0 0 auto;
  color: var(--dk-component-select-option-meta-color);
  font-variant-numeric: tabular-nums;
}
/* THE TICK SITS BESIDE THE NAME (27 Oct), not across the row: what it marks is
   the name, and over a wide row it read as belonging to the meta. The meta
   keeps the far edge, taking the free space itself. */
.dk-component-select__option:has(.dk-component-select__option-meta) .dk-component-select__option-meta {
  margin-left: auto;
}
.dk-component-select__option-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-component-select__option-desc {
  font-weight: var(--dk-component-select-option-desc-font-weight);
  color: var(--dk-component-select-option-desc-color);
}
.dk-component-select__option:disabled .dk-component-select__option-desc { color: var(--dk-component-select-option-disabled-color); }

.dk-component-select__check {
  width: var(--dk-component-select-check-size); height: var(--dk-component-select-check-size);
  flex-shrink: 0; color: var(--dk-component-select-check-color); opacity: 0;
  stroke-width: var(--dk-component-select-check-stroke-width);
}
.dk-component-select__option[aria-selected="true"] .dk-component-select__check { opacity: 1; }
/* ── THE CHOSEN ROW IS TINTED, AND STAYS PUT (27 Oct) ──────────────────────
   A single select's chosen option carries the interaction foundation's
   highlight (a subtle primary tint), so where you are is visible before you
   read for the tick, and the tick takes the icon ramp for words on that tint,
   level by level, so it holds its contrast in either theme. It has no hover
   and no press of its own: pointing at what is already chosen changes
   nothing, and a highlight over the tint read as a second state. A multiple
   select keeps its ticks on clear rows: there the set is the ticks.
   The hover, press and keyboard rules above skip it (:where(:not()), no
   weight), and these weigh no more than an option's own rules, so the
   fidelity looks still outweigh every one of them. */
.dk-component-select__option[aria-selected="true"]:where(.dk-component-select__menu:not([aria-multiselectable="true"], [data-layout="grid"]) *, .dk-component-select__list:not([aria-multiselectable="true"]) *):where(:not(:disabled)) {
  background: var(--dk-component-select-option-surface-selected);
}
.dk-component-select__option[aria-selected="true"]:where(.dk-component-select__menu:not([aria-multiselectable="true"], [data-layout="grid"]) *, .dk-component-select__list:not([aria-multiselectable="true"]) *) .dk-component-select__check {
  color: var(--dk-component-select-check-color-selected);
}

/* ── A group of options under a heading. The heading is NOT an option: it is a
   <div role="group"> with a label, so the keyboard walks past it and a screen
   reader announces the group's name with the options inside it. ── */
.dk-component-select__group + .dk-component-select__group { margin-top: var(--dk-component-select-group-gap); }
.dk-component-select__group-label {
  display: block;
  /* The same inset as an option's text, so a heading and the rows under it
     start on one line. */
  padding: var(--dk-component-select-group-padding-block) var(--dk-component-select-option-padding-inline);
  font-family: var(--dk-component-select-font-family);
  text-transform: uppercase;
  font-size: var(--dk-component-select-group-font-size);
  line-height: var(--dk-component-select-group-line-height);
  letter-spacing: var(--dk-component-select-group-letter-spacing);
  font-weight: var(--dk-component-select-group-font-weight);
  color: var(--dk-component-select-group-color);
}

/* ── Nothing to choose from. A menu that opens empty is a dead end, so it says
   so rather than showing a 2px sliver of padding. ── */
/* ── SEARCH ─────────────────────────────────────────────────────────────────
   THE MENU STOPS BEING THE LISTBOX when there is a field in it. A text input
   inside role="listbox" is not a listbox child, and a screen reader either
   ignores it or reads the list as broken; so the behaviour moves the role onto
   an inner __list and leaves the menu as a plain surface holding a combobox and
   its popup. Author markup does not change for this: the component does the
   move, the same way it builds the chips and fills the value.

   The field does not scroll with the options either, which is what the flex
   column is for: the menu keeps the max-height, the LIST does the scrolling. */
/* :not([hidden]) IS LOAD-BEARING. The rule that hides a closed menu is
   [hidden] at (0,2,0), and this one was the same weight and later in the file,
   so a searchable select rendered its whole list inside the page with the menu
   "closed" — and Tab walked into the options from the field above it. Found by
   a modal's focus trap probe, of all things, in the six-Tab list. */
.dk-component-select__menu[data-searchable]:not([hidden]) {
  display: flex; flex-direction: column; overflow: hidden;
}
.dk-component-select__menu[data-searchable] .dk-component-select__list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  /* FULL BLEED, so the scrollbar sits against the menu's own edge. A scrollbar
     belongs to the element that scrolls, and it is drawn at that element's
     inner border edge: with the list inset by the menu's padding, the bar was
     floating 8px inside the box with a strip of surface to its right. The rows
     get their inset back below, as a margin, so the highlight keeps its pill
     shape rather than running edge to edge. */
  margin-inline: calc(-1 * var(--dk-component-menu-padding-inline));
  padding-block: var(--dk-component-menu-padding-block);
  /* THE AIR ABOVE THE FIRST ROW IS THE LIST'S, inside the scroller (27 Oct).
     It was the header's margin, outside, so that no row could show through it;
     but then the list's edge sat a band below the rule, and every row passing
     it was cut off in mid-air with an empty strip over it. Inside, it scrolls
     away with the first row, and the rows run up to the rule and under it, as
     a list under a header does. The bottom keeps its padding: a sliver there is
     the list saying there is more below, which is true.

     SCROLL-SNAP WAS TRIED HERE AND TAKEN OUT AGAIN. It corrects a resting
     position, which is the right idea, but it also re-corrects the behaviour's
     own alignment: each pull-flush was snapped on to the next row and the two
     walked the list a row at a time. One of them had to own the ending, and
     the one that can measure a two-line option is the behaviour. */
  padding-block-start: var(--dk-component-select-search-padding-block);
}

.dk-component-select__menu[data-searchable] .dk-component-select__list > * {
  margin-inline: var(--dk-component-menu-padding-inline);
  /* An option is width: 100% so it fills a padded menu, and inside a full-bleed
     list that width ignores the margin and overflows by exactly twice the
     inset. The width has to be told about the margin rather than left to work
     it out: auto measures against a flex parent and comes back short. */
  width: calc(100% - 2 * var(--dk-component-menu-padding-inline));
}
.dk-component-select__list::-webkit-scrollbar { width: 12px; }
.dk-component-select__list::-webkit-scrollbar-track { background: transparent; }
.dk-component-select__list::-webkit-scrollbar-thumb {
  background: var(--dk-component-menu-scrollbar-thumb); background-clip: padding-box;
  border: 3px solid transparent; border-radius: 8px;
}
@media (hover: hover) {
  .dk-component-select__list::-webkit-scrollbar-thumb:hover {
    background: var(--dk-component-menu-scrollbar-thumb-hover); background-clip: padding-box;
  }
}
/* ── THE FIELD IS A HEADER BAND, NOT A ROW WITH A LINE UNDER IT ─────────────
   Two paddings were stacking above it: the menu's own, and the field's. 8 and
   10, reading as 18px of nothing over a control whose internal rhythm is 10,
   and no amount of tuning either number fixes a gap that is the sum of two.

   So the menu gives up its top padding to the field, and the field takes the
   full width to go with it: flush at the top, edge to edge, its rule spanning
   the whole surface the way a header's does rather than floating between two
   insets. Its inline padding is the menu's plus an option's, so the words in
   it start exactly where the labels under it do. ── */
/* THE MENU GIVES UP ITS BLOCK PADDING ENTIRELY when it has a field: the header
   takes the top, and the LIST takes the bottom — inside the scroller, where it
   belongs. Left outside it, that bottom padding was a dead band under the
   scrollbar and the rows above it ran straight into the edge. */
.dk-component-select__menu[data-searchable]:not([hidden]) { padding-block: 0; }
.dk-component-select__search {
  position: relative;
  display: flex; align-items: center; flex: 0 0 auto;
  gap: var(--dk-component-select-search-gap);
  padding: var(--dk-component-select-search-padding-block)
           calc(var(--dk-component-menu-padding-inline) + var(--dk-component-select-option-padding-inline));
  margin-inline: calc(-1 * var(--dk-component-menu-padding-inline));
  border-bottom: var(--dk-component-select-search-border-width) solid var(--dk-component-select-search-border);
}
/* The field steps with the list, because it is the first line of it. */
.dk-component-select__menu[data-size="small"] .dk-component-select__search-input {
  font-size: var(--dk-component-select-small-search-font-size);
  line-height: var(--dk-component-select-small-search-line-height);
}
.dk-component-select__menu[data-size="large"] .dk-component-select__search-input {
  font-size: var(--dk-component-select-large-search-font-size);
  line-height: var(--dk-component-select-large-search-line-height);
}
.dk-component-select__search-icon {
  display: flex; flex: 0 0 auto;
  width: var(--dk-component-select-search-icon-size);
  height: var(--dk-component-select-search-icon-size);
  color: var(--dk-component-select-search-icon-color);
}
.dk-component-select__search-icon > svg { width: 100%; height: 100%; display: block; }
/* THE MAGNIFIER SITS ON THE COLUMN BY ITS INK, not its box. Its glyph starts
   3/24 in from the left of its square (the lens's edge), where an option's
   icon or flag fills its square: box to box the lens read a step to the right
   of the flags under it. */
.dk-component-select__search-icon { margin-inline-start: calc(var(--dk-component-select-search-icon-size) * -3 / 24); }
/* ── FOCUS IS THE RULE TURNING PRIMARY, grown out from the middle ──────────
   The field has no box to ring (it is the menu's head, not a control in it),
   so the hairline under it is what answers: a primary line over it, scaled
   from nothing to the full width as the field takes focus and back as it
   leaves. A transform, so nothing reflows, on the expand pattern: something
   opening in place. ── */
.dk-component-select__search::after {
  content: '';
  position: absolute;
  inset-inline: 0; bottom: calc(-1 * var(--dk-component-select-search-border-width));
  height: var(--dk-component-select-search-focus-width);
  background: var(--dk-component-select-search-focus-border);
  transform: scaleX(0);
  transition: transform var(--dk-motion-expand-duration) var(--dk-motion-expand-easing);
  pointer-events: none;
}
.dk-component-select__search:focus-within::after { transform: scaleX(1); }
.dk-component-select__search:focus-within .dk-component-select__search-icon { color: var(--dk-component-select-search-focus-icon-color); }
/* A sheet is a phone's: the field is a thumb's target there, so it stands
   taller, the way the sheet's rows do over a dropdown's. */
.dk-component-select__menu[data-sheet-open] .dk-component-select__search {
  padding-block: var(--dk-component-select-sheet-search-padding-block);
}
/* THE FIELD HAS NO FIELD LOOK. It is not a control sitting in the menu, it is
   the menu's own way of taking a query: a box drawn around it would make the
   popup a form. The menu's border is the box. */
.dk-component-select__search-input {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: transparent; outline: none; padding: 0;
  font-family: var(--dk-component-select-font-family);
  font-size: var(--dk-component-select-search-font-size);
  line-height: var(--dk-component-select-search-line-height);
  color: var(--dk-component-select-search-color);
}
.dk-component-select__search-input::placeholder { color: var(--dk-component-select-search-placeholder-color); }
/* A filtered-out option is gone, not dimmed: the list is an answer to what was
   typed, and a greyed row is a row you still have to read. */
.dk-component-select__option[hidden], .dk-component-select__group[hidden] { display: none; }

/* ── Loading. The options, the groups and the empty line all stand down: a
   list that is still arriving has nothing to say about what is in it. ── */
.dk-component-select__menu[data-loading] .dk-component-select__option,
.dk-component-select__menu[data-loading] .dk-component-select__group,
.dk-component-select__menu[data-loading] .dk-component-select__empty { display: none; }
/* Its own [hidden], since its display outranks the browser's: a select that
   had loaded once kept "Loading" over its options (found 30 Oct). */
.dk-component-select__loading[hidden] { display: none; }
.dk-component-select__loading {
  display: flex; align-items: center; gap: var(--dk-component-select-option-gap);
  margin: 0;
  padding: var(--dk-component-select-option-padding-block) var(--dk-component-select-option-padding-inline);
  font-family: var(--dk-component-select-font-family);
  font-size: var(--dk-component-select-option-font-size);
  line-height: var(--dk-component-select-option-line-height);
  color: var(--dk-component-select-loading-color);
}
.dk-component-select__loading-spinner {
  flex: 0 0 auto;
  width: var(--dk-component-select-loading-spinner-size);
  height: var(--dk-component-select-loading-spinner-size);
  border-radius: 50%;
  border: var(--dk-component-select-border-width) solid var(--dk-component-select-loading-spinner-track);
  border-top-color: var(--dk-component-select-loading-spinner-head);
  animation: dk-component-select-spin var(--dk-component-select-loading-duration) linear infinite;
}
@keyframes dk-component-select-spin { to { transform: rotate(360deg); } }

/* ── Clear: the chip's cross again, on the trigger. Shown only when there is
   something to clear, and never on a control nobody can change. ── */
.dk-component-select__clear {
  display: none; align-items: center; justify-content: center; flex: 0 0 auto;
  box-sizing: border-box;
  width: var(--dk-component-select-clear-size);
  height: var(--dk-component-select-clear-size);
  border-radius: var(--dk-component-select-clear-radius);
  color: var(--dk-component-select-clear-color);
  transition: background-color var(--dk-component-select-duration) var(--dk-component-select-easing),
              color var(--dk-component-select-duration) var(--dk-component-select-easing),
              transform var(--dk-component-select-duration) var(--dk-component-select-easing);
}
.dk-component-select[data-clearable][data-selected] .dk-component-select__trigger:not(:disabled) .dk-component-select__clear {
  display: inline-flex;
}
.dk-component-select__clear > svg {
  display: block;
  width: var(--dk-component-select-clear-icon-size);
  height: var(--dk-component-select-clear-icon-size);
}
@media (hover: hover) {
  .dk-component-select__clear:hover {
    background: var(--dk-component-select-clear-surface-hover);
    color: var(--dk-component-select-clear-color-hover);
  }
}
.dk-component-select__clear:active {
  background: var(--dk-component-select-clear-surface-active);
  color: var(--dk-component-select-clear-color-active);
  transform: scale(var(--dk-component-select-clear-transform-scale-active));
}
/* And it does not drag the field with it, the same guard the chips needed. */
@media (hover: hover) {
  .dk-component-select:not([data-open]) .dk-component-select__trigger:hover:not(:disabled):not(:focus-visible):not(:active):has(.dk-component-select__clear:hover) {
    background: var(--_sel-surface);
    border-color: var(--_sel-border);
  }
}
.dk-component-select__trigger:active:not(:disabled):has(.dk-component-select__clear:active) {
  background: var(--_sel-surface);
  border-color: var(--_sel-border);
}
/* The trigger's grid is value + chevron; a clear affordance makes it three. */
.dk-component-select[data-clearable] .dk-component-select__trigger {
  grid-template-columns: 1fr auto auto;
}

.dk-component-select__empty {
  margin: 0;
  padding: var(--dk-component-select-option-padding-block) var(--dk-component-select-option-padding-inline);
  font-family: var(--dk-component-select-font-family);
  font-size: var(--dk-component-select-option-font-size);
  line-height: var(--dk-component-select-option-line-height);
  color: var(--dk-component-select-empty-color);
}

/* ── The sheet ───────────────────────────────────────────────────────────────
   Below the kit's mobile breakpoint the menu is not a dropdown. It is a bottom
   sheet: full width, off the bottom edge, under the thumb.

   THE BREAKPOINT IS DECLARED ONCE, HERE, and the behaviour asks the stylesheet
   for it. A media query cannot switch JavaScript on, and a width hardcoded in
   both languages drifts the first time one of them moves; so the query sets a
   custom property, behaviour.js reads it at open time, and the attribute it
   then writes is what everything below paints against. One source of truth, in
   the place that already owns every other breakpoint in the kit.

   data-sheet on the ROOT is the author's control, copied onto the menu when it
   opens because the menu is portalled and the root is not its parent by then:
     auto    (default) a sheet below the breakpoint, a dropdown above it
     always  a sheet at any width, which is how the docs show it on a desktop
     never   never a sheet, for a select inside something that already is one */
/* The switch follows the kit's one breakpoint (kit/breakpoint.css). */
.dk-component-select__menu, .dk-component-menu { --dk-component-menu-sheet: var(--dk-breakpoint-phone, 0); }

.dk-component-select__menu[data-sheet-open], .dk-component-menu[data-sheet-open] {
  /* Every inline value the positioner would have set is cleared by the
     behaviour before this applies, so there is nothing here to fight. */
  position: fixed;
  left: 0; right: 0; bottom: 0; top: auto;
  width: auto; min-width: 0;
  max-width: none;
  max-height: var(--dk-component-menu-sheet-max-height);
  border-radius: var(--dk-component-menu-sheet-radius) var(--dk-component-menu-sheet-radius) 0 0;
  border-bottom: 0;
  padding: var(--dk-component-menu-sheet-padding-block) var(--dk-component-menu-padding-inline);
  /* The home indicator's strip on an iPhone, which would otherwise sit on top
     of the last option. Zero everywhere else. */
  padding-bottom: calc(var(--dk-component-menu-sheet-padding-block) + env(safe-area-inset-bottom, 0px));
  /* THE SCRIM IS ITS OWN ELEMENT now (27 Oct), .dk-component-menu__scrim
     below, which kit/menu.js puts just before the sheet. It was this
     element's 100vmax shadow, so it slid up with the sheet: a backdrop that
     travels reads as part of the panel rather than the page dimming. The
     scrim fades in, and the sheet rises halfway through it. */
  box-shadow: var(--dk-component-menu-shadow);
  animation: dk-motion-sheet-in var(--dk-motion-enter-large-duration) var(--dk-motion-enter-large-easing)
             var(--dk-component-menu-sheet-enter-delay) backwards;
}
/* The page dimming behind a sheet: fixed over the viewport, under the sheet
   (the same layer, placed before it), a linear fade in on the large enter's
   time and out on the sheet's exit. Not a hit target: the outside-click handler that
   closes the menu listens on the document. */
.dk-component-menu__scrim {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: var(--dk-component-menu-scrim);
  pointer-events: none;
  animation: dk-menu-scrim-in var(--dk-component-menu-scrim-duration) var(--dk-component-menu-scrim-easing) both;
}
.dk-component-menu__scrim[data-closing] {
  animation: dk-menu-scrim-out var(--dk-component-menu-sheet-exit-duration) var(--dk-component-menu-scrim-easing) forwards;
}
@keyframes dk-menu-scrim-in { from { opacity: 0; } }
@keyframes dk-menu-scrim-out { to { opacity: 0; } }
/* The duration is a token, so reduced motion zeroes it with everything else
   rather than needing a rule of its own here. */

/* Leaving. The sheet slides down and fades while its scrim fades out over
   the same time, so the page comes back as the sheet goes, which is one
   gesture rather than a slide and then a snap. `forwards` holds the end
   state until the behaviour actually hides it, or the sheet would flash back
   into view for the frame between the animation ending and hidden being set. */
.dk-component-select__menu[data-sheet-closing], .dk-component-menu[data-sheet-closing] {
  animation: dk-menu-sheet-out var(--dk-component-menu-sheet-exit-duration)
             var(--dk-component-menu-sheet-exit-easing) forwards;
  /* Nothing to tap on the way out: a second tap during the exit would land on
     an option that is halfway off the screen. */
  pointer-events: none;
}
@keyframes dk-menu-sheet-out { to { transform: translateY(100%); opacity: 0; } }

/* A TALL SHEET (6 Nov): data-sheet-size="tall" on the root, which the
   behaviour copies onto the menu as it opens (the menu is portalled), makes
   the sheet nearly the whole screen, its height and its cap, for a list that
   is the whole job. A dropdown ignores it. */
.dk-component-select__menu[data-sheet-size="tall"] { --dk-component-menu-sheet-max-height: var(--dk-component-menu-sheet-tall-height); }
.dk-component-select__menu[data-sheet-open][data-sheet-size="tall"] { height: var(--dk-component-menu-sheet-tall-height); }

/* A thumb is not a pointer. 44px is the smallest target iOS documents; an
   option at the menu's own padding is 40 at medium, so this only grows rows. */
.dk-component-select__menu[data-sheet-open] .dk-component-select__option {
  min-height: var(--dk-component-select-option-touch-height);
}

/* ── The sheet says what it is for. A dropdown sits under its trigger, which is
   the whole label; a sheet covers the page and the trigger is behind a scrim,
   so without a title you are looking at a list of words with no question. The
   behaviour copies the select's own label in and marks it aria-hidden: the
   listbox is already named through the trigger, and announcing it twice is
   worse than not announcing it here at all. data-sheet-title="hidden" on the
   root leaves it out, for a list that says what it is (a search field asking
   for a country); the behaviour then builds none. ── */
.dk-component-select__sheet-title {
  display: block;
  padding: var(--dk-component-select-group-padding-block) var(--dk-component-select-option-padding-inline);
  font-family: var(--dk-component-select-font-family);
  text-transform: uppercase;
  font-size: var(--dk-component-select-group-font-size);
  line-height: var(--dk-component-select-group-line-height);
  letter-spacing: var(--dk-component-select-group-letter-spacing);
  font-weight: var(--dk-component-select-group-font-weight);
  color: var(--dk-component-select-sheet-title-color);
}
.dk-component-select__menu:not([data-sheet-open]) .dk-component-select__sheet-title {
  display: none;
}

/* ── PICTURES (6 Oct) ──────────────────────────────────────────────────────
   An option can carry an image (setOptions' image, or an __option-media span
   in markup): decorative, since the label names the option. In a list it is
   a small picture before the label; the trigger mirrors it beside the value.

   data-layout="grid" lays the options out as cards in a wider popup: the
   picture on top, the label (and a second line) under it. For a picker whose
   options are pictures, the vehicle picker first. The list and every group
   are grids, so a group's heading spans its row and its cards start a fresh
   one. Up and down move a row, measured from the layout (behaviour.js); left
   and right move one card. ── */
.dk-component-select__option-media { display: block; flex: none; }
.dk-component-select__option-media img {
  display: block;
  width: var(--dk-component-select-option-media-width);
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: contain;
}
.dk-component-select__value-media { display: flex; align-items: center; flex: none; }
.dk-component-select__value-media img {
  display: block;
  height: var(--dk-component-select-value-media-height);
  width: auto;
  aspect-ratio: 2 / 1;
  object-fit: contain;
}

.dk-component-select__menu[data-layout="grid"] {
  width: min(var(--dk-component-select-grid-menu-width), calc(100vw - 2 * var(--dk-component-menu-viewport-gap)));
  max-width: min(var(--dk-component-select-grid-menu-width), calc(100vw - 2 * var(--dk-component-menu-viewport-gap)));
  max-height: var(--dk-component-select-grid-menu-max-height);
}
/* The field's gap moves inside the scroller: cards scroll right up to its
   rule. Outside it, the gap was a band that cut the cards off short of the
   rule. (The list layout keeps it outside: there, the behaviour snaps rows
   flush so a sliver never shows; a grid of tall cards does not snap.) */
.dk-component-select__menu[data-layout="grid"] .dk-component-select__search { margin-bottom: 0; }
.dk-component-select__menu[data-layout="grid"][data-searchable] .dk-component-select__list {
  padding-block-start: var(--dk-component-select-search-padding-block);
}
/* :not([hidden]): this outranks the hidden rule, and a make the search emptied must go. */
.dk-component-select__menu[data-layout="grid"] :is(.dk-component-select__list, .dk-component-select__group:not([hidden])) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--dk-component-select-grid-card-min), 1fr));
  gap: var(--dk-component-select-grid-gap);
}
/* Without a search field the menu is the list. */
.dk-component-select__menu[data-layout="grid"]:not([data-searchable]) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--dk-component-select-grid-card-min), 1fr));
  gap: var(--dk-component-select-grid-gap);
  align-content: start;
}
.dk-component-select__menu[data-layout="grid"] :is(.dk-component-select__group, .dk-component-select__group-label, .dk-component-select__empty) {
  grid-column: 1 / -1;
}
.dk-component-select__menu[data-layout="grid"] .dk-component-select__option {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--dk-spacing-2);
  padding: var(--dk-component-select-grid-card-padding);
  border-radius: var(--dk-component-select-grid-card-radius);
  text-align: center;
}
.dk-component-select__menu[data-layout="grid"] .dk-component-select__option-media { align-self: center; }
.dk-component-select__menu[data-layout="grid"] .dk-component-select__option-media img { width: var(--dk-component-select-grid-media-width); }
/* The description leads, small and neutral: Toyota over RAV4. */
.dk-component-select__menu[data-layout="grid"] .dk-component-select__option-desc {
  order: -1;
  font-size: var(--dk-component-select-grid-desc-font-size);
  line-height: var(--dk-component-select-grid-desc-line-height);
}
.dk-component-select__menu[data-layout="grid"] .dk-component-select__option-main { justify-content: center; }
.dk-component-select__menu[data-layout="grid"] .dk-component-select__option-label {
  white-space: normal;
  font-size: var(--dk-component-select-grid-label-font-size);
  line-height: var(--dk-component-select-grid-label-line-height);
}
/* No tick on a card: the fill and the border say chosen (and aria-selected says it to a screen reader). */
.dk-component-select__menu[data-layout="grid"] .dk-component-select__check { display: none; }
.dk-component-select__menu[data-layout="grid"] .dk-component-select__option[aria-selected="true"] {
  background: var(--dk-component-select-grid-card-selected-surface);
  box-shadow: inset 0 0 0 var(--dk-component-select-grid-card-selected-width) var(--dk-component-select-grid-card-selected-border);
}
.dk-component-select__menu[data-layout="grid"] .dk-component-select__option[aria-selected="true"]:is([data-active]) {
  background: var(--dk-component-select-grid-card-selected-surface-hover);
}
@media (hover: hover) {
  .dk-component-select__menu[data-layout="grid"] .dk-component-select__option[aria-selected="true"]:is(:hover) {
    background: var(--dk-component-select-grid-card-selected-surface-hover);
  }
}

/* ── ICONS (30 Oct): data-layout="icons", Forge's icon picker ──────────────
   A grid as well, of square cells nine to a row, each a glyph with its name
   kept for a screen reader and shown on hover (the title). Thousands of
   them: content-visibility lets the browser skip the cells out of view. A
   library's heading spans its row and its cells start a fresh one; the chips
   under the field narrow the grid to one library. The glyph stays the text's
   colour; the cell takes the hover and the press, and the chosen one is
   solid. ── */
.dk-component-select__menu[data-layout="icons"] {
  /* The option's own icon tokens, pointed at the layout's: the glyph rules
     stay the list's, and the fidelity looks' still outrank them. */
  --dk-component-select-option-icon-size: var(--dk-component-select-icons-glyph-size);
  --dk-component-select-option-icon-color: var(--dk-component-select-icons-glyph);
  --dk-component-select-option-icon-color-hover: var(--dk-component-select-icons-glyph);
  width: min(var(--dk-component-select-icons-menu-width), calc(100vw - 2 * var(--dk-component-menu-viewport-gap)));
  max-width: min(var(--dk-component-select-icons-menu-width), calc(100vw - 2 * var(--dk-component-menu-viewport-gap)));
  max-height: var(--dk-component-select-icons-menu-max-height);
}
.dk-component-select__menu[data-layout="icons"] .dk-component-select__search { margin-bottom: 0; }
.dk-component-select__menu[data-layout="icons"][data-searchable] .dk-component-select__list {
  padding-block-start: var(--dk-component-select-filters-padding-block);
}
.dk-component-select__menu[data-layout="icons"] :is(.dk-component-select__list, .dk-component-select__group:not([hidden])) {
  display: grid;
  grid-template-columns: repeat(var(--dk-component-select-icons-columns), minmax(0, 1fr));
  gap: var(--dk-component-select-icons-gap);
  align-content: start;
}
.dk-component-select__menu[data-layout="icons"] :is(.dk-component-select__group, .dk-component-select__group-label, .dk-component-select__empty, .dk-component-select__loading) {
  grid-column: 1 / -1;
}
.dk-component-select__menu[data-layout="icons"] .dk-component-select__group + .dk-component-select__group { margin-top: 0; }
.dk-component-select__menu[data-layout="icons"] .dk-component-select__option {
  justify-content: center;
  aspect-ratio: 1;
  padding: 0;
  border-radius: var(--dk-component-select-icons-cell-radius);
  content-visibility: auto;
  contain-intrinsic-size: auto var(--dk-component-select-icons-glyph-size);
}
.dk-component-select__menu[data-layout="icons"] .dk-component-select__option-main { justify-content: center; }
.dk-component-select__menu[data-layout="icons"] .dk-component-select__option-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.dk-component-select__menu[data-layout="icons"] .dk-component-select__check { display: none; }
.dk-component-select__menu[data-layout="icons"] .dk-component-select__option[aria-selected="true"] {
  background: var(--dk-component-select-icons-selected-surface);
}
.dk-component-select__menu[data-layout="icons"] .dk-component-select__option[aria-selected="true"]:is([data-active]) {
  background: var(--dk-component-select-icons-selected-surface-hover);
}
@media (hover: hover) {
  .dk-component-select__menu[data-layout="icons"] .dk-component-select__option[aria-selected="true"]:is(:hover) {
    background: var(--dk-component-select-icons-selected-surface-hover);
  }
}
.dk-component-select__menu[data-layout="icons"] .dk-component-select__option[aria-selected="true"] {
  --dk-component-select-option-icon-color: var(--dk-component-select-icons-selected-glyph);
  --dk-component-select-option-icon-color-hover: var(--dk-component-select-icons-selected-glyph);
}

/* The chips, pinned under the field like it: the list is the only scroller,
   or they would scroll away exactly when you want another library. */
.dk-component-select__filters {
  flex: none;
  display: flex; flex-wrap: wrap;
  gap: var(--dk-component-select-filters-gap);
  padding: var(--dk-component-select-filters-padding-block) var(--dk-component-select-option-padding-inline) 0;
}
.dk-component-select__filter {
  margin: 0;
  padding: var(--dk-component-select-filter-padding-block) var(--dk-component-select-filter-padding-inline);
  border: var(--dk-component-select-filter-border-width) solid var(--dk-component-select-filter-border);
  border-radius: var(--dk-component-select-filter-radius);
  background: var(--dk-component-select-filter-surface);
  color: var(--dk-component-select-filter-text);
  font-family: var(--dk-component-select-font-family);
  font-size: var(--dk-component-select-filter-font-size);
  line-height: var(--dk-component-select-filter-line-height);
  font-weight: var(--dk-component-select-filter-font-weight);
  cursor: pointer;
  transition: background-color var(--dk-component-select-duration-fast) var(--dk-motion-state-easing),
              border-color var(--dk-component-select-duration-fast) var(--dk-motion-state-easing),
              color var(--dk-component-select-duration-fast) var(--dk-motion-state-easing);
}
@media (hover: hover) {
  .dk-component-select__filter:hover {
    background: var(--dk-component-select-filter-surface-hover);
    border-color: var(--dk-component-select-filter-border-hover);
    color: var(--dk-component-select-filter-text-hover);
  }
}
.dk-component-select__filter:active { background: var(--dk-component-select-filter-surface-active); }
.dk-component-select__filter[aria-pressed="true"] {
  background: var(--dk-component-select-filter-selected-surface);
  border-color: var(--dk-component-select-filter-selected-surface);
  color: var(--dk-component-select-filter-selected-text);
}
@media (hover: hover) {
  .dk-component-select__filter[aria-pressed="true"]:hover {
    background: var(--dk-component-select-filter-selected-surface-hover);
    border-color: var(--dk-component-select-filter-selected-surface-hover);
  }
}
.dk-component-select__filter:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--dk-component-select-focus-ring-width) var(--dk-component-select-ring);
}

/* ── data-appearance="sentence": the trigger set inside a line of text ───────
   "Every [Monday] of each week". The same look as Input's sentence field, in
   this component's own collection (test/sentence.test.js holds them equal).
   The root sits in the line and hugs its value; the label stays as the
   trigger's name but is not shown. ── */
.dk-component-select[data-appearance="sentence"] {
  display: inline-grid; width: auto; max-width: 100%;
  vertical-align: middle; position: relative;
  margin-inline: var(--dk-component-select-sentence-margin-inline);
}
.dk-component-select[data-appearance="sentence"] > .dk-component-select__label { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* THE CAPTION AND THE ERROR LEAVE THE LINE: under the trigger they made its
   box taller than the line and dropped the words around it. They still
   describe the trigger to a screen reader, an error still turns the border,
   and anything to read belongs under the sentence, as the design's info box
   is. */
.dk-component-select[data-appearance="sentence"] > :is(.dk-component-select__caption, .dk-component-select__error) { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The rest look through the slots, at the lowest weight: disabled and
   aria-invalid set the same slots and still win. */
:where(.dk-component-select[data-appearance="sentence"]) .dk-component-select__trigger {
  --_sel-surface: var(--dk-component-select-sentence-surface);
  --_sel-border: var(--dk-component-select-sentence-border);
  --_sel-value: var(--dk-component-select-sentence-text);
  width: auto; max-width: 100%;
  padding: 0 var(--dk-component-select-sentence-padding-inline);
}
/* The type at the size rules' weight, later, as on Input. */
.dk-component-select[data-appearance="sentence"] .dk-component-select__trigger {
  --_sel-font-size: var(--dk-component-select-sentence-font-size);
  --_sel-line-height: var(--dk-component-select-sentence-line-height);
}
.dk-component-select[data-appearance="sentence"][data-size="small"] .dk-component-select__trigger {
  --_sel-font-size: var(--dk-component-select-sentence-small-font-size);
  --_sel-line-height: var(--dk-component-select-sentence-small-line-height);
}
.dk-component-select[data-appearance="sentence"][data-size="large"] .dk-component-select__trigger {
  --_sel-font-size: var(--dk-component-select-sentence-large-font-size);
  --_sel-line-height: var(--dk-component-select-sentence-large-line-height);
}
:where(.dk-component-select[data-appearance="sentence"]) .dk-component-select__value,
:where(.dk-component-select[data-appearance="sentence"]) .dk-component-select__value[data-empty] {
  font-weight: var(--dk-component-select-sentence-font-weight);
}
:where(.dk-component-select[data-appearance="sentence"]) .dk-component-select__value {
  min-inline-size: var(--dk-component-select-sentence-value-min-width);
}
:where(.dk-component-select[data-appearance="sentence"]) .dk-component-select__chevron {
  width: var(--dk-component-select-sentence-chevron-size);
  height: var(--dk-component-select-sentence-chevron-size);
  /* The chevron's path leaves a quarter of its box empty each side: pulled
     out by that much, its drawn edge sits on the padding, as the text's does. */
  margin-inline-end: calc(var(--dk-component-select-sentence-chevron-size) / -4);
}

/* ══════════════════════════════════ drift-kit:layer components/calendar/styles.css ══════════════════════════════════ */
/* ── Calendar ────────────────────────────────────────────────────────────────
   The author writes <div class="dk-component-calendar">; behaviour.js builds
   the header, the month grids and the month and year views inside it.

     .dk-component-calendar            [data-view day | month | year] [data-size small]
       __header
         button.__prev.__nav  __titles > button.__title (one per month)  button.__next.__nav
       __months > __month > table.__grid[role=grid] > td[role=gridcell] > button.__day
       __views > __cells > button.__cell   (month and year views)
       __live                              (the month, announced)

   A DAY'S STATES ARE ATTRIBUTES on its button: data-today, data-selected (aria-selected is on its gridcell),
   aria-disabled (blocked), and for a range data-range-start, data-range-end,
   data-in-range, data-preview. ──

   Purpose: A month grid for choosing a date or a range: the engine behind
     Date picker, also usable on its own.

   Anatomy:
     div.dk-component-calendar[data-view="day|month|year"]?[data-size="small"]?[data-fluid]?
       div.__header
         div.__titles-clip > div.__titles > button.__title
         div.__nav                   (previous, next)
       div.__viewport
         div.__months > div.__month
           div.__grid > button.__cell[data-today]?[data-selected]?[data-in-range]?
       div.__live                  (screen-reader announcements)
   */
.dk-component-calendar {
  --_cal-cell: var(--dk-component-calendar-cell-size);
  display: inline-grid;
  gap: var(--dk-component-calendar-header-gap);
  font-family: var(--dk-component-calendar-font-family);
  color: var(--dk-component-calendar-text);
}
.dk-component-calendar[hidden] { display: none; }
.dk-component-calendar[data-size="small"] { --_cal-cell: var(--dk-component-calendar-small-cell-size); }

/* ── Header: the arrows at the outer edges, a title over each month ── */
.dk-component-calendar__header { display: flex; align-items: center; gap: var(--dk-component-calendar-header-gap); }
/* The strip the month name slides in, clipped; the arrows sit outside it. */
.dk-component-calendar__titles-clip { flex: 1 1 auto; min-width: 0; position: relative; overflow: hidden; }
.dk-component-calendar__titles {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: var(--dk-component-calendar-month-gap);
}
.dk-component-calendar__nav, .dk-component-calendar__title, .dk-component-calendar__day, .dk-component-calendar__cell {
  appearance: none; margin: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer;
  transition: background-color var(--dk-component-calendar-transition-duration) var(--dk-motion-state-easing),
              color var(--dk-component-calendar-transition-duration) var(--dk-motion-state-easing),
              transform var(--dk-component-calendar-transition-duration) var(--dk-motion-state-easing);
}
/* Pressed, every button in the calendar gives a little, as the kit's buttons do. */
:is(.dk-component-calendar__nav, .dk-component-calendar__title, .dk-component-calendar__day, .dk-component-calendar__cell):active:not([aria-disabled="true"]) {
  transform: scale(var(--dk-component-calendar-active-scale));
}
.dk-component-calendar__nav {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: var(--dk-component-calendar-nav-size); height: var(--dk-component-calendar-nav-size);
  padding: 0; border-radius: var(--dk-component-calendar-day-radius);
  color: var(--dk-component-calendar-nav-color);
}
.dk-component-calendar__nav svg { width: var(--dk-component-calendar-nav-icon-size); height: var(--dk-component-calendar-nav-icon-size); }
.dk-component-calendar__title {
  justify-self: center;
  padding: 0 var(--dk-spacing-2);
  min-height: var(--dk-component-calendar-nav-size);
  border-radius: var(--dk-component-calendar-day-radius);
  font-size: var(--dk-component-calendar-title-font-size);
  line-height: var(--dk-component-calendar-title-line-height);
  font-weight: var(--dk-component-calendar-title-font-weight);
}
@media (hover: hover) {
  :is(.dk-component-calendar__nav, .dk-component-calendar__title, .dk-component-calendar__cell):hover:not([aria-disabled="true"]) {
    background: var(--dk-component-calendar-surface-hover);
  }
}
:is(.dk-component-calendar__nav, .dk-component-calendar__title, .dk-component-calendar__cell):active:not([aria-disabled="true"]) {
  background: var(--dk-component-calendar-surface-active);
}

/* ── The viewport the pages slide through ── */
.dk-component-calendar__viewport { position: relative; overflow: hidden; }
.dk-component-calendar__leaving { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; }
.dk-component-calendar__titles-clip > .dk-component-calendar__leaving { height: 100%; }

/* ── The month grids ── */
.dk-component-calendar__months { display: flex; gap: var(--dk-component-calendar-month-gap); }
.dk-component-calendar[data-view]:not([data-view="day"]) .dk-component-calendar__months { display: none; }
.dk-component-calendar__grid { border-collapse: collapse; border-spacing: 0; }
.dk-component-calendar__grid th {
  width: var(--_cal-cell); height: var(--_cal-cell); padding: 0;
  font-size: var(--dk-component-calendar-weekday-font-size);
  line-height: var(--dk-component-calendar-weekday-line-height);
  font-weight: var(--dk-component-calendar-weekday-font-weight);
  color: var(--dk-component-calendar-weekday-color);
  text-align: center;
}
.dk-component-calendar__grid td { width: var(--_cal-cell); height: var(--_cal-cell); padding: 0; text-align: center; }

.dk-component-calendar__day {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--_cal-cell); height: var(--_cal-cell); padding: 0;
  border-radius: var(--dk-component-calendar-day-radius);
  font-size: var(--dk-component-calendar-day-font-size);
  line-height: var(--dk-component-calendar-day-line-height);
  font-weight: var(--dk-component-calendar-day-font-weight);
  font-variant-numeric: tabular-nums;
}
/* A DAY'S STATES SET ITS COLOURS; one pair of rules below paints them. Each
   state names its fill at rest, on hover and pressed, and its text, and the
   states are written in the order they win: default, today, inside a range,
   an end (or the chosen day), blocked. Writing hover and pressed once, from
   whatever the state set, is what keeps a hovered range end on its solid
   fill with its white text, where a hover rule of its own would out-weigh it. */
.dk-component-calendar__day {
  --_d-bg: transparent;
  --_d-bg-hover: var(--dk-component-calendar-surface-hover);
  --_d-bg-active: var(--dk-component-calendar-surface-active);
  --_d-fg: var(--dk-component-calendar-text);
  background: var(--_d-bg);
  color: var(--_d-fg);
}
.dk-component-calendar__day[data-today] {
  --_d-bg: var(--dk-component-calendar-today-surface);
  --_d-bg-hover: var(--dk-component-calendar-today-surface-hover);
  --_d-bg-active: var(--dk-component-calendar-today-surface-active);
  --_d-fg: var(--dk-component-calendar-today-text);
  font-weight: var(--dk-component-calendar-today-font-weight);
}
/* A range's middle is one band: the days lose their corners so the fill runs
   on across the week, and the ends keep theirs. */
.dk-component-calendar__day:is([data-in-range], [data-preview]) {
  --_d-bg: var(--dk-component-calendar-range-surface);
  --_d-bg-hover: var(--dk-component-calendar-range-surface-hover);
  --_d-bg-active: var(--dk-component-calendar-range-surface-active);
  border-radius: 0;
}
.dk-component-calendar__day:is([data-selected], [data-preview-end]) {
  --_d-bg: var(--dk-component-calendar-selected-surface);
  --_d-bg-hover: var(--dk-component-calendar-selected-surface-hover);
  --_d-bg-active: var(--dk-component-calendar-selected-surface-active);
  --_d-fg: var(--dk-component-calendar-selected-text);
  border-radius: var(--dk-component-calendar-day-radius);
}
/* THE END UNDER THE POINTER, while one is being chosen, is the plain primary
   (the start's own fill), not the hover tone: hover is what makes it the end,
   so a darker step on top of that reads as a second, louder state. Pressing
   it still goes a step darker. */
.dk-component-calendar__day[data-preview-end] {
  --_d-bg-hover: var(--dk-component-calendar-selected-surface);
}
/* And while an end is being chosen, colours change at once: the end and the
   band follow the pointer day by day, and fading each one in and out behind
   it was a trail of colour. The press still shrinks on its transition. */
.dk-component-calendar[data-pending] .dk-component-calendar__day {
  transition: transform var(--dk-component-calendar-transition-duration) var(--dk-motion-state-easing);
}
@media (hover: hover) {
  .dk-component-calendar__day:hover:not([aria-disabled="true"]) { background: var(--_d-bg-hover); }
}
.dk-component-calendar__day:active:not([aria-disabled="true"]) { background: var(--_d-bg-active); }

/* data-show-cursor: the day the keyboard (or a picker's typing) is on, when
   focus is elsewhere and the grid's own ring cannot say so. */
.dk-component-calendar[data-show-cursor] .dk-component-calendar__day[tabindex="0"]:not([data-selected], [data-today], [data-in-range], [data-preview]) {
  --_d-bg: var(--dk-component-calendar-surface-hover);
}
.dk-component-calendar__day[aria-disabled="true"] { --_d-fg: var(--dk-component-calendar-blocked-text); }
.dk-component-calendar__day[aria-disabled="true"],
.dk-component-calendar__cell[aria-disabled="true"] {
  color: var(--dk-component-calendar-blocked-text);
  text-decoration: line-through;
  cursor: not-allowed;
}

:is(.dk-component-calendar__nav, .dk-component-calendar__title, .dk-component-calendar__day, .dk-component-calendar__cell):focus-visible {
  outline: var(--dk-component-calendar-focus-ring-width) solid var(--dk-component-calendar-focus-ring);
  outline-offset: calc(-1 * var(--dk-component-calendar-focus-ring-width));
  position: relative;
}

/* ── FLUID (data-fluid): the calendar spreads to its container, the phone's
   sheet. The columns share the width; each day stays a square of the cell
   size in the middle of its column. A range's band moves from the days to
   their cells, so it runs on unbroken across the gaps between them, and its
   ends are half cells, so it starts and stops under the chosen days. ── */
.dk-component-calendar[data-fluid] { display: grid; width: 100%; }
.dk-component-calendar[data-fluid] :is(.dk-component-calendar__months, .dk-component-calendar__month, .dk-component-calendar__grid) { width: 100%; }
.dk-component-calendar[data-fluid] .dk-component-calendar__grid { table-layout: fixed; }
.dk-component-calendar[data-fluid] .dk-component-calendar__grid :is(th, td) { width: auto; }
.dk-component-calendar[data-fluid] .dk-component-calendar__cells { width: 100%; }
.dk-component-calendar[data-fluid] .dk-component-calendar__day:is([data-in-range], [data-preview]):not([data-preview-end], [data-selected]) {
  --_d-bg: transparent;
  --_d-bg-hover: var(--dk-component-calendar-range-surface-hover);
  border-radius: var(--dk-component-calendar-day-radius);
}
.dk-component-calendar[data-fluid] td[data-band="middle"] { background: var(--dk-component-calendar-range-surface); }
/* Columns of a fraction of a pixel leave a hairline seam between two filled
   cells; each one reaches a pixel into the next, which is band too. */
.dk-component-calendar[data-fluid] td:is([data-band="start"], [data-band="middle"]) {
  box-shadow: var(--dk-border-width-25) 0 0 0 var(--dk-component-calendar-range-surface);
}
.dk-component-calendar[data-fluid] td[data-band="start"] {
  background: linear-gradient(to right, transparent 50%, var(--dk-component-calendar-range-surface) 50%);
}
.dk-component-calendar[data-fluid] td[data-band="end"] {
  background: linear-gradient(to left, transparent 50%, var(--dk-component-calendar-range-surface) 50%);
}

/* ── Month and year views: wider cells in the same footprint ── */
.dk-component-calendar__views:empty { display: none; }
/* The days' footprint exactly (the weekday row and six weeks), so switching
   view never changes the calendar's size: a popup that jumped in height under
   the pointer would move the next thing you meant to click. */
.dk-component-calendar__cells {
  display: grid; gap: var(--dk-component-calendar-cells-gap);
  grid-auto-rows: 1fr;
  width: calc(7 * var(--_cal-cell));
  height: calc(7 * var(--_cal-cell));
}
.dk-component-calendar__cells[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.dk-component-calendar__cells[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
.dk-component-calendar__cell {
  border-radius: var(--dk-component-calendar-day-radius);
  font-size: var(--dk-component-calendar-day-font-size);
  line-height: var(--dk-component-calendar-day-line-height);
  font-weight: var(--dk-component-calendar-day-font-weight);
}
.dk-component-calendar__cell[aria-current] {
  background: var(--dk-component-calendar-selected-surface);
  color: var(--dk-component-calendar-selected-text);
}
@media (hover: hover) {
  .dk-component-calendar__cell[aria-current]:hover { background: var(--dk-component-calendar-selected-surface-hover); }
}
.dk-component-calendar__cell[aria-current]:active { background: var(--dk-component-calendar-selected-surface-active); }

.dk-component-calendar__live {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ═══════════════════════════════ drift-kit:layer components/date-picker/styles.css ═══════════════════════════════ */
/* ── Date picker ──────────────────────────────────────────────────────────────
   On a dk-component-input root (single, combined range) or on a
   wrapper of two dk-component-input parts (split range):

     .dk-component-input.dk-component-date-picker [data-mode single | range]
       label.dk-component-input__label
       .dk-component-input__field
         input.__input [data-part start | end]  span.__separator  input.__input
         button.dk-component-input__action.__button          (the calendar)
       input[type=hidden] data-date-value | data-date-start + data-date-end
     .dk-component-menu.__popup > .dk-component-calendar    (built, portalled)

   Everything a field looks like is Input's; this adds the parts between. ──

   Purpose: A date field you can type into or pick from a calendar: one date
     (a date of birth among them) or a start and an end.

   Anatomy:
     div.dk-component-input.dk-component-date-picker[data-mode="range"]?[data-entry="calendar"]?[data-appearance="sentence"]?[data-min]?[data-value]?
       label.dk-component-input__label
       div.dk-component-input__field
         input.__input              (typed, masked)
         button.__button            (opens the calendar)
       div.__popup                 (a dk-component-calendar, portalled; a sheet on a phone)
   */

/* One date fills its field; a combined range's two are a date wide each, the
   arrow between them and the calendar button pushed to the far end. */
.dk-component-date-picker .dk-component-input__field > .dk-component-date-picker__input { flex: 1 1 0; min-width: 0; }
.dk-component-date-picker[data-mode="range"]:not([data-layout="split"]) .dk-component-input__field > .dk-component-date-picker__input {
  flex: 0 1 var(--dk-component-date-picker-date-width);
}
/* Where the browser can size a field to what it holds (the date, or the
   placeholder while empty), it does; the width above is the fallback. */
@supports (field-sizing: content) {
  .dk-component-date-picker[data-mode="range"]:not([data-layout="split"]) .dk-component-input__field > .dk-component-date-picker__input {
    field-sizing: content;
    flex: 0 1 auto;
    width: auto;
    min-width: 2ch;
  }
}
.dk-component-date-picker[data-mode="range"]:not([data-layout="split"]) .dk-component-date-picker__button { margin-inline-start: auto; }
.dk-component-date-picker__separator {
  flex: none;
  display: inline-flex; align-items: center;
  color: var(--dk-component-date-picker-separator-color);
  user-select: none;
}
/* The arrow between a range's dates: one em, so it follows the field's size. */
.dk-component-date-picker__separator svg {
  width: var(--dk-component-date-picker-separator-size);
  height: var(--dk-component-date-picker-separator-size);
}

/* Split range: two fields side by side, stacking when there is no room. */
.dk-component-date-picker[data-layout="split"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--dk-component-date-picker-split-min)), 1fr));
  gap: var(--dk-component-date-picker-split-gap);
  align-items: start;
}
.dk-component-date-picker[data-layout="split"][hidden] { display: none; }

/* The popup: the kit's menu surface, framing a calendar rather than a list. */
.dk-component-date-picker__popup {
  padding: var(--dk-component-date-picker-popup-padding);
  /* As wide as its months: the menu's width cap is a list's, and two months
     are wider than any list. The viewport is still the limit. */
  max-width: calc(100vw - 2 * var(--dk-component-menu-viewport-gap));
  max-height: none;
  overflow: visible;
}
.dk-component-date-picker__popup[data-sheet-open] {
  display: flex; justify-content: center;
  overflow-y: auto;
}
.dk-component-date-picker__popup[data-sheet-open] .dk-component-calendar {
  --_cal-cell: var(--dk-component-date-picker-sheet-cell-size);
}

/* A phone: the calendar in the Modal's sheet, its days as big as the width
   allows (seven to a row, capped), centred under the header. */
.dk-component-date-picker__sheet .dk-component-modal__body { display: flex; justify-content: center; }
.dk-component-date-picker__sheet .dk-component-calendar {
  --_cal-cell: min(var(--dk-component-date-picker-sheet-cell-max), calc((100vw - var(--dk-component-date-picker-sheet-inset)) / 7));
}

/* ── data-entry="calendar": the field is a trigger that opens the calendar ──
   It fills Input's field box and reads Input's type through the field's
   slots (so data-size and a sentence reach it). The authored input stays as
   the stand-in for the value and is never seen. */
.dk-component-date-picker__trigger {
  appearance: none; margin: 0; border: 0; padding: 0; background: transparent; cursor: pointer;
  flex: 1 1 auto; min-width: 0; align-self: stretch;
  display: flex; align-items: center; justify-content: space-between; gap: var(--dk-spacing-2);
  text-align: start;
  font-family: var(--dk-font-family-primary);
  font-size: var(--_input-font-size);
  line-height: var(--_input-line-height);
  font-weight: var(--_input-font-weight, var(--dk-component-input-font-weight));
  color: var(--_input-text, var(--dk-text-field-default));
}
.dk-component-date-picker__trigger:focus-visible { outline: none; }
.dk-component-date-picker__trigger:disabled { cursor: not-allowed; color: var(--dk-text-field-disabled); }
.dk-component-date-picker__trigger:disabled .dk-component-date-picker__value[data-empty] { color: transparent; }
.dk-component-date-picker__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-component-date-picker__value[data-empty] { color: var(--dk-component-date-picker-placeholder-color); }
.dk-component-date-picker__chevron {
  flex: none;
  width: var(--dk-component-date-picker-chevron-size); height: var(--dk-component-date-picker-chevron-size);
  color: var(--dk-component-date-picker-chevron-color);
}
@media (hover: hover) {
  .dk-component-date-picker__trigger:hover:not(:disabled) .dk-component-date-picker__chevron { color: var(--dk-icon-field-hover); }
}
.dk-component-date-picker__trigger:disabled .dk-component-date-picker__chevron { color: var(--dk-icon-field-disabled); }
.dk-component-date-picker__trigger[aria-expanded="true"] .dk-component-date-picker__chevron { transform: rotate(180deg); }
.dk-component-input__field:has(> .dk-component-date-picker__trigger) { position: relative; cursor: pointer; }
.dk-component-input__field > input.dk-component-date-picker__input[data-proxy] {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none;
}
/* The field box takes the trigger's states as Day of month's does, each
   with :is(:hover, *) to outweigh Input's hover rule. The error border is
   Input's own: the stand-in carries aria-invalid. */
.dk-component-input__field:is(:hover, *):has(> .dk-component-date-picker__trigger:focus-visible) {
  border-color: var(--dk-border-field-focus);
  box-shadow: 0 0 0 var(--dk-component-input-focus-ring-width) var(--dk-border-field-focus-ring);
}
.dk-component-input__field:is(:hover, *):has(> .dk-component-date-picker__trigger:active:not(:disabled)) {
  background: var(--dk-surface-field-action-active);
  border-color: var(--dk-border-field-focus);
}
.dk-component-input__field:is(:hover, *):has(> .dk-component-date-picker__trigger[aria-expanded="true"]) {
  background: var(--dk-surface-field-default);
  border-color: var(--dk-border-field-focus);
  box-shadow: 0 0 0 var(--dk-component-input-focus-ring-width) var(--dk-border-field-focus-ring);
}
.dk-component-input__field:is(:hover, *):has(> .dk-component-date-picker__trigger[aria-invalid="true"]:focus-visible) {
  border-color: var(--dk-border-field-error-focus);
  box-shadow: 0 0 0 var(--dk-component-input-focus-ring-width) var(--dk-border-field-error-ring);
}
.dk-component-input__field:is(:hover, *):has(> .dk-component-date-picker__trigger:disabled) {
  border-color: var(--dk-border-field-disabled);
  background: var(--dk-surface-field-default);
  cursor: not-allowed;
}
/* In a sentence (input/styles.css): a usable width, the sentence's chevron. */
:where(.dk-component-input[data-appearance="sentence"]) .dk-component-date-picker__value {
  min-inline-size: var(--dk-component-input-sentence-value-min-width);
}
:where(.dk-component-input[data-appearance="sentence"]) .dk-component-date-picker__chevron {
  width: var(--dk-component-input-sentence-chevron-size);
  height: var(--dk-component-input-sentence-chevron-size);
  /* The chevron's path leaves a quarter of its box empty each side: pulled
     out by that much, its drawn edge sits on the padding, as the text's does. */
  margin-inline-end: calc(var(--dk-component-input-sentence-chevron-size) / -4);
}

/* ══════════════════════════════ drift-kit:layer components/day-of-month/styles.css ══════════════════════════════ */
/* ── Day of month ─────────────────────────────────────────────────────────────
   Inline:   .dk-component-day-of-month > .__grid[role=radiogroup] > button.__day[role=radio]
   Field:    .dk-component-input.dk-component-day-of-month[data-mode=field]
               label, .dk-component-input__field > button.__trigger (.__value, .__chevron)
               .dk-component-menu.__popup > .__grid   (portalled by dk.menu)

   SEVEN COLUMNS, OR FIVE WHEN THE ROOM RUNS OUT. The inline grid is its own
   container, so the switch follows the space it was given, not the window:
   a narrow card on a desktop gets the five bigger days a phone does. 18.9375rem
   (303px) is seven 40px days and their six gaps, less one. ──

   Purpose: A day of the month, 1 to 31, chosen from a grid: the day a bill
     is paid.

   Anatomy:
     div.dk-component-input.dk-component-day-of-month[data-mode="field|inline"]?[data-appearance="sentence"]?[data-value]?[data-disabled-days]?
       span.dk-component-input__label
       button.__trigger            (field mode: shows "14th")
       div.__popup | div[role="radiogroup"]   (the day grid)
   */
/* A size container takes no width from its contents, so it is given one:
   seven days and their gaps, never wider than what holds it. In a narrower
   container the 100% wins and the query below lays out five. */
.dk-component-day-of-month:not([data-mode="field"]) {
  container-type: inline-size;
  inline-size: calc(7 * var(--dk-component-day-of-month-cell-size) + 6 * var(--dk-component-day-of-month-gap));
  max-inline-size: 100%;
}
.dk-component-day-of-month[hidden] { display: none; }
.dk-component-day-of-month__grid {
  display: grid;
  grid-template-columns: repeat(7, var(--dk-component-day-of-month-cell-size));
  gap: var(--dk-component-day-of-month-gap);
  font-family: var(--dk-component-day-of-month-font-family);
  color: var(--dk-component-day-of-month-text);
}
@container (max-width: 18.9375rem) {
  .dk-component-day-of-month__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .dk-component-day-of-month__day { width: 100%; height: auto; aspect-ratio: 1 / 1; }
}
.dk-component-day-of-month__reason[hidden] { display: none; }

.dk-component-day-of-month__day {
  --_dm-bg: transparent;
  --_dm-bg-hover: var(--dk-component-day-of-month-surface-hover);
  --_dm-bg-active: var(--dk-component-day-of-month-surface-active);
  --_dm-fg: var(--dk-component-day-of-month-text);
  appearance: none; margin: 0; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--dk-component-day-of-month-cell-size); height: var(--dk-component-day-of-month-cell-size);
  border-radius: var(--dk-component-day-of-month-radius);
  background: var(--_dm-bg);
  color: var(--_dm-fg);
  font: inherit;
  font-size: var(--dk-component-day-of-month-font-size);
  line-height: var(--dk-component-day-of-month-line-height);
  font-weight: var(--dk-component-day-of-month-font-weight);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--dk-component-day-of-month-transition-duration) var(--dk-motion-state-easing),
              color var(--dk-component-day-of-month-transition-duration) var(--dk-motion-state-easing),
              transform var(--dk-component-day-of-month-transition-duration) var(--dk-motion-state-easing);
}
.dk-component-day-of-month__day[aria-checked="true"] {
  --_dm-bg: var(--dk-component-day-of-month-selected-surface);
  --_dm-bg-hover: var(--dk-component-day-of-month-selected-surface-hover);
  --_dm-bg-active: var(--dk-component-day-of-month-selected-surface-active);
  --_dm-fg: var(--dk-component-day-of-month-selected-text);
}
@media (hover: hover) {
  .dk-component-day-of-month__day:hover:not([aria-disabled="true"]) { background: var(--_dm-bg-hover); }
}
.dk-component-day-of-month__day:active:not([aria-disabled="true"]) {
  background: var(--_dm-bg-active);
  transform: scale(var(--dk-component-day-of-month-active-scale));
}
.dk-component-day-of-month__day[aria-disabled="true"] {
  --_dm-fg: var(--dk-component-day-of-month-blocked-text);
  text-decoration: line-through;
  cursor: not-allowed;
}
.dk-component-day-of-month__day:focus-visible {
  outline: var(--dk-component-day-of-month-focus-ring-width) solid var(--dk-component-day-of-month-focus-ring);
  outline-offset: calc(-1 * var(--dk-component-day-of-month-focus-ring-width));
}

/* ── The field: a trigger filling Input's field box ── */
.dk-component-day-of-month__trigger {
  appearance: none; margin: 0; border: 0; padding: 0; background: transparent; cursor: pointer;
  flex: 1 1 auto; min-width: 0; align-self: stretch;
  display: flex; align-items: center; justify-content: space-between; gap: var(--dk-spacing-2);
  text-align: start;
  /* The words an Input's own text would be: the same family, the field's size
     slot (so data-size reaches it), weight and colour. The weight and colour
     are slots too, which a sentence field sets (input/styles.css). */
  font-family: var(--dk-font-family-primary);
  font-size: var(--_input-font-size);
  line-height: var(--_input-line-height);
  font-weight: var(--_input-font-weight, var(--dk-component-input-font-weight));
  color: var(--_input-text, var(--dk-text-field-default));
}
.dk-component-day-of-month__trigger:focus-visible { outline: none; }
.dk-component-day-of-month__trigger:disabled { cursor: not-allowed; color: var(--dk-text-field-disabled); }
.dk-component-day-of-month__trigger:disabled .dk-component-day-of-month__value[data-empty] { color: transparent; }
.dk-component-day-of-month__trigger:disabled .dk-component-day-of-month__chevron { color: var(--dk-icon-field-disabled); }
/* The field box takes the trigger's states as Input's takes its input's:
   focus, error, error with focus, disabled. Input's hover rule cannot see a
   trigger, so each state carries :is(:hover, *), which matches either way and
   lifts it to the hover rule's weight; coming later, it wins while hovered. */
.dk-component-input__field:has(> .dk-component-day-of-month__trigger) { position: relative; }
.dk-component-input__field:is(:hover, *):has(> .dk-component-day-of-month__trigger:focus-visible) {
  border-color: var(--dk-border-field-focus);
  box-shadow: 0 0 0 var(--dk-component-input-focus-ring-width) var(--dk-border-field-focus-ring);
}
/* Pressed and open, as Select's trigger: a pressed fill, then the focus
   look for as long as the grid is up, with no hover fill under it. */
.dk-component-input__field:is(:hover, *):has(> .dk-component-day-of-month__trigger:active:not(:disabled)) {
  background: var(--dk-surface-field-action-active);
  border-color: var(--dk-border-field-focus);
}
.dk-component-input__field:is(:hover, *):has(> .dk-component-day-of-month__trigger[aria-expanded="true"]) {
  background: var(--dk-surface-field-default);
  border-color: var(--dk-border-field-focus);
  box-shadow: 0 0 0 var(--dk-component-input-focus-ring-width) var(--dk-border-field-focus-ring);
}
.dk-component-input__field:is(:hover, *):has(> .dk-component-day-of-month__trigger[aria-invalid="true"]) { border-color: var(--dk-border-field-error); }
.dk-component-input__field:is(:hover, *):has(> .dk-component-day-of-month__trigger[aria-invalid="true"]:focus-visible) {
  border-color: var(--dk-border-field-error-focus);
  box-shadow: 0 0 0 var(--dk-component-input-focus-ring-width) var(--dk-border-field-error-ring);
}
.dk-component-input__field:is(:hover, *):has(> .dk-component-day-of-month__trigger:disabled) {
  border-color: var(--dk-border-field-disabled);
  background: var(--dk-surface-field-default);
  cursor: not-allowed;
}
.dk-component-day-of-month__value[data-empty] { color: var(--dk-component-day-of-month-placeholder-color); }
.dk-component-day-of-month__chevron {
  flex: none;
  width: var(--dk-component-day-of-month-chevron-size); height: var(--dk-component-day-of-month-chevron-size);
  color: var(--dk-component-day-of-month-chevron-color);
}
.dk-component-day-of-month__trigger[aria-expanded="true"] .dk-component-day-of-month__chevron { transform: rotate(180deg); }
@media (hover: hover) {
  .dk-component-day-of-month__trigger:hover:not(:disabled) .dk-component-day-of-month__chevron { color: var(--dk-icon-field-hover); }
}
/* The stand-in that carries a required value into the form: there, unseen. */
.dk-component-input__field > input.dk-component-day-of-month__proxy {
  inset-block-start: 0; inset-inline-start: 0;
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none;
}
.dk-component-day-of-month__popup { padding: var(--dk-component-day-of-month-popup-padding); max-height: none; }
/* A phone's sheet: the seven columns share its width. */
.dk-component-day-of-month__popup[data-sheet-open] .dk-component-day-of-month__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.dk-component-day-of-month__popup[data-sheet-open] .dk-component-day-of-month__day { width: 100%; height: auto; aspect-ratio: 1 / 1; }

/* A phone: the grid in the Modal's sheet, seven columns sharing its width. */
.dk-component-day-of-month__sheet .dk-component-day-of-month__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); width: 100%; }
/* Squares, as big as the column allows up to the cap, centred in it: a wide
   phone spreads the columns rather than stretching the days. */
.dk-component-day-of-month__sheet .dk-component-day-of-month__day {
  width: min(100%, var(--dk-component-day-of-month-sheet-cell-max)); height: auto; aspect-ratio: 1 / 1; justify-self: center;
}

/* ── In a sentence (data-appearance="sentence", input/styles.css): the value
   keeps a usable width ("1st" is not a postage stamp) and ends in an
   ellipsis rather than leaving the line; the chevron is the sentence's. ── */
:where(.dk-component-input[data-appearance="sentence"]) .dk-component-day-of-month__value {
  min-inline-size: var(--dk-component-input-sentence-value-min-width);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
:where(.dk-component-input[data-appearance="sentence"]) .dk-component-day-of-month__chevron {
  width: var(--dk-component-input-sentence-chevron-size);
  height: var(--dk-component-input-sentence-chevron-size);
  /* The chevron's path leaves a quarter of its box empty each side: pulled
     out by that much, its drawn edge sits on the padding, as the text's does. */
  margin-inline-end: calc(var(--dk-component-input-sentence-chevron-size) / -4);
}

/* ═══════════════════════════════ drift-kit:layer components/choice-card/styles.css ═══════════════════════════════ */
/* ── Choice card ──────────────────────────────────────────────────────────────
   The kit's CardSelect. One component, two forms, decided by the markup:

   INTERACTIVE: a <label> holding a native radio or checkbox. The browser does
   the clicking (the whole card is the label), the grouping by name, the
   arrows and the one tab stop, Space, the form, required and reset; a screen
   reader hears "Weekly, radio button, 1 of 3, checked" with nothing written
   by hand.
     label.dk-component-choice-card[data-size]
       span.dk-component-radio | span.dk-component-checkbox   (the kit's own,
         __box > __input + __indicator, rooted on a span: the card is the
         label; behaviour.js wraps a bare input into one)
       span.dk-component-choice-card__media              (optional: a logo, or an Icon tile)
       span.dk-component-choice-card__body
         span.__overline  span.__title  span.__description  span.__note
       span.dk-component-choice-card__aside          (a __value, or a Tag)

   STATIC: the same card with no input, for what is listed rather than chosen
   (what is due now and later). It never looks clickable. data-tone="muted"
   greys its words.

   [data-show="checked"] inside a card shows only while it is chosen (the
   design's "Selected" tag, which then follows the choice).

   A card's edit button is a sibling, never inside the label (a button in a
   label would select the card): .dk-component-choice-card-row holds both. ──

   Purpose: A radio or checkbox drawn as a card, for a choice that needs room
     to explain itself: a payment frequency and its price, a saved card.

   Anatomy:
     fieldset.dk-component-choice-card-group[data-legend="visible"]?
       legend
       label.dk-component-choice-card[data-size="small|large"]?
         span.dk-component-radio|dk-component-checkbox   (the native input)
         span.__media?
         span.__body
           span.__overline? + span.__title + span.__description? + span.__note?
         span.__aside? > span.__value
   */
.dk-component-choice-card {
  position: relative;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--dk-component-choice-card-gap);
  box-sizing: border-box; width: 100%; min-width: 0;
  padding: var(--dk-component-choice-card-padding);
  background: var(--_cc-surface);
  border: var(--dk-component-choice-card-border-width) solid var(--_cc-border);
  border-radius: var(--dk-component-choice-card-radius);
  box-shadow: var(--dk-component-choice-card-shadow);
  font-family: var(--dk-component-choice-card-font-family);
  color: var(--_cc-text);
  --_cc-surface: var(--dk-component-choice-card-surface);
  --_cc-border: var(--dk-component-choice-card-border);
  --_cc-text: var(--dk-component-choice-card-text);
  --_cc-title-size: var(--dk-component-choice-card-title-font-size);
  --_cc-title-line: var(--dk-component-choice-card-title-line-height);
}
.dk-component-choice-card[hidden] { display: none; }
.dk-component-choice-card[data-size="small"] {
  --_cc-title-size: var(--dk-component-choice-card-small-title-font-size);
  --_cc-title-line: var(--dk-component-choice-card-small-title-line-height);
}
.dk-component-choice-card[data-size="large"] {
  --_cc-title-size: var(--dk-component-choice-card-large-title-font-size);
  --_cc-title-line: var(--dk-component-choice-card-large-title-line-height);
}

/* ── Interactive: only a card holding an input moves, lifts or points. ── */
.dk-component-choice-card:has(:is(.dk-component-radio__input, .dk-component-checkbox__input)) {
  cursor: pointer;
  transition: background-color var(--dk-component-choice-card-duration) var(--dk-component-choice-card-easing),
              border-color var(--dk-component-choice-card-duration) var(--dk-component-choice-card-easing),
              box-shadow var(--dk-component-choice-card-duration) var(--dk-component-choice-card-easing),
              transform var(--dk-component-choice-card-duration) var(--dk-component-choice-card-easing);
}
@media (hover: hover) {
  .dk-component-choice-card:has(:is(.dk-component-radio__input, .dk-component-checkbox__input):enabled):hover {
    --_cc-surface: var(--dk-component-choice-card-surface-hover);
    --_cc-border: var(--dk-component-choice-card-border-hover);
    box-shadow: var(--dk-component-choice-card-shadow-hover);
    transform: scale(var(--dk-component-choice-card-scale-hover));
  }
}
.dk-component-choice-card:has(:is(.dk-component-radio__input, .dk-component-checkbox__input):enabled):active {
  --_cc-surface: var(--dk-component-choice-card-surface-active);
  --_cc-border: var(--dk-component-choice-card-border-active);
  transform: scale(var(--dk-component-choice-card-scale-active));
}
.dk-component-choice-card:has(:is(.dk-component-radio__input, .dk-component-checkbox__input):checked) {
  --_cc-border: var(--dk-component-choice-card-checked-border);
}
@media (hover: hover) {
  .dk-component-choice-card:has(:is(.dk-component-radio__input, .dk-component-checkbox__input):checked:enabled):hover { --_cc-border: var(--dk-component-choice-card-checked-border-hover); }
}
.dk-component-choice-card:has(:is(.dk-component-radio__input, .dk-component-checkbox__input):checked:enabled):active { --_cc-border: var(--dk-component-choice-card-checked-border-active); }
/* :is(:hover, *) lifts it to the hover rule's weight, so the ring stays
   while the pointer rests on a card the keyboard has reached. */
.dk-component-choice-card:has(:is(.dk-component-radio__input, .dk-component-checkbox__input):focus-visible):is(:hover, *) {
  box-shadow: 0 0 0 var(--dk-component-choice-card-focus-ring-width) var(--dk-component-choice-card-focus-ring), var(--dk-component-choice-card-shadow-hover);
}
.dk-component-choice-card:has(:is(.dk-component-radio__input, .dk-component-checkbox__input):disabled) {
  cursor: not-allowed;
  --_cc-text: var(--dk-component-choice-card-disabled-text);
}
.dk-component-choice-card:has(:is(.dk-component-radio__input, .dk-component-checkbox__input):disabled:not(:checked)) {
  --_cc-border: var(--dk-component-choice-card-disabled-border);
}
.dk-component-choice-card:has(:is(.dk-component-radio__input, .dk-component-checkbox__input):disabled) :is(.dk-component-choice-card__overline, .dk-component-choice-card__description, .dk-component-choice-card__note:not([data-status="error"])) {
  color: var(--dk-component-choice-card-disabled-text);
}
.dk-component-choice-card:has(:is(.dk-component-radio__input, .dk-component-checkbox__input):disabled) .dk-component-choice-card__media { opacity: 0.5; }

/* ── Media: a logo, or an Icon tile. ── */
.dk-component-choice-card__media {
  flex: none; display: inline-grid; place-items: center;
  max-width: var(--dk-component-choice-card-media-size); max-height: var(--dk-component-choice-card-media-size);
}
.dk-component-choice-card__media > :is(img, svg, i) { display: block; width: var(--dk-component-choice-card-media-size); height: auto; max-height: var(--dk-component-choice-card-media-size); }
/* An Icon tile is its own size (48 by default); the logo cap does not apply. */
.dk-component-choice-card__media:has(> .dk-component-icon-tile) {
  max-width: none;
  max-height: none;
}

/* ── The words ── */
/* The words take what is left and never wrap below the indicator and media.
   In a narrow column they wrap onto more lines and the aside stays beside
   them (9 Oct, Julio: wrap "Pay once every 7 days" rather than drop the price
   to its own row). */
.dk-component-choice-card__body {
  flex: 1 1 0; min-width: 0; overflow-wrap: anywhere;
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--dk-component-choice-card-body-gap);
}
.dk-component-choice-card__overline {
  font-size: var(--dk-component-choice-card-overline-font-size);
  line-height: var(--dk-component-choice-card-overline-line-height);
  font-weight: var(--dk-component-choice-card-overline-font-weight);
  letter-spacing: var(--dk-component-choice-card-overline-letter-spacing);
  text-transform: uppercase;
  color: var(--dk-component-choice-card-overline-color);
}
.dk-component-choice-card__title,
.dk-component-choice-card__value {
  font-size: var(--_cc-title-size);
  line-height: var(--_cc-title-line);
  font-weight: var(--dk-component-choice-card-title-font-weight);
  color: var(--_cc-text);
}
.dk-component-choice-card__description {
  font-size: var(--dk-component-choice-card-description-font-size);
  line-height: var(--dk-component-choice-card-description-line-height);
  color: var(--dk-component-choice-card-description-color);
}
.dk-component-choice-card__note {
  font-size: var(--dk-component-choice-card-note-font-size);
  line-height: var(--dk-component-choice-card-note-line-height);
  font-weight: var(--dk-component-choice-card-note-font-weight);
  font-style: italic;
  color: var(--dk-component-choice-card-note-color);
}
.dk-component-choice-card__note[data-status="error"] { color: var(--dk-component-choice-card-note-error-color); }
.dk-component-choice-card__aside {
  flex: none; margin-inline-start: auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  gap: var(--dk-component-choice-card-body-gap);
  text-align: end; white-space: nowrap;
}

/* Shown only while the card is chosen: the "Selected" tag follows the choice. */
.dk-component-choice-card:not(:has(:is(.dk-component-radio__input, .dk-component-checkbox__input):checked)) [data-show="checked"] {
  display: none;
}

/* ── Static tones ── */
.dk-component-choice-card[data-tone="muted"]:not(:has(:is(.dk-component-radio__input, .dk-component-checkbox__input))) {
  --_cc-text: var(--dk-component-choice-card-text-muted);
}

/* ── The group: the question is the legend, the cards stack. ── */
.dk-component-choice-card-group {
  margin: 0; padding: 0; border: 0; min-width: 0;
  display: flex; flex-direction: column;
  gap: var(--dk-component-choice-card-group-gap);
}
.dk-component-choice-card-group > legend {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.dk-component-choice-card-group[data-legend="visible"] > legend {
  position: static; width: auto; height: auto; overflow: visible; clip-path: none;
  padding: 0; margin-block-end: var(--dk-component-choice-card-group-gap);
  font-size: var(--dk-component-choice-card-overline-font-size);
  line-height: var(--dk-component-choice-card-overline-line-height);
  font-weight: var(--dk-component-choice-card-overline-font-weight);
  letter-spacing: var(--dk-component-choice-card-overline-letter-spacing);
  text-transform: uppercase;
  color: var(--dk-component-choice-card-overline-color);
  font-family: var(--dk-component-choice-card-font-family);
}

/* ── A card and its edit button ── */
.dk-component-choice-card-row {
  display: flex; align-items: stretch;
  gap: var(--dk-component-choice-card-row-gap);
  min-width: 0;
}
.dk-component-choice-card-row > .dk-component-choice-card { flex: 1 1 auto; }
.dk-component-choice-card-action {
  flex: none; appearance: none; margin: 0; cursor: pointer;
  display: grid; place-items: center;
  width: var(--dk-component-choice-card-action-width);
  padding: 0;
  background: var(--dk-component-choice-card-surface);
  border: var(--dk-component-choice-card-border-width) solid var(--dk-component-choice-card-border);
  border-radius: var(--dk-component-choice-card-radius);
  box-shadow: var(--dk-component-choice-card-shadow);
  color: var(--dk-component-choice-card-action-icon);
  transition: background-color var(--dk-component-choice-card-duration) var(--dk-component-choice-card-easing),
              border-color var(--dk-component-choice-card-duration) var(--dk-component-choice-card-easing),
              color var(--dk-component-choice-card-duration) var(--dk-component-choice-card-easing),
              box-shadow var(--dk-component-choice-card-duration) var(--dk-component-choice-card-easing),
              transform var(--dk-component-choice-card-duration) var(--dk-component-choice-card-easing);
}
.dk-component-choice-card-action > :is(svg, i) {
  width: var(--dk-component-choice-card-action-icon-size); height: var(--dk-component-choice-card-action-icon-size);
}
@media (hover: hover) {
  .dk-component-choice-card-action:hover:not(:disabled) {
    background: var(--dk-component-choice-card-surface-hover);
    color: var(--dk-component-choice-card-action-icon-hover);
    border-color: var(--dk-component-choice-card-action-border-hover);
    box-shadow: var(--dk-component-choice-card-shadow-hover);
  }
}
.dk-component-choice-card-action:active:not(:disabled) {
  background: var(--dk-component-choice-card-surface-active);
  color: var(--dk-component-choice-card-action-icon-active);
  border-color: var(--dk-component-choice-card-action-border-active);
  transform: scale(var(--dk-component-choice-card-scale-active));
}
.dk-component-choice-card-action:focus-visible:is(:hover, *) {
  outline: none;
  color: var(--dk-component-choice-card-action-icon-hover);
  box-shadow: 0 0 0 var(--dk-component-choice-card-focus-ring-width) var(--dk-component-choice-card-focus-ring), var(--dk-component-choice-card-shadow-hover);
}
.dk-component-choice-card-action:disabled {
  cursor: not-allowed;
  color: var(--dk-component-choice-card-action-disabled-icon);
  border-color: var(--dk-component-choice-card-action-disabled-border);
  box-shadow: none;
}

/* A phone: less air around the card, a narrower edit tile. */
@media (max-width: 768px) {
  .dk-component-choice-card { padding: var(--dk-component-choice-card-phone-padding); }
  .dk-component-choice-card-action { width: var(--dk-component-choice-card-phone-action-width); }
}


/* ══════════════════════════════════ drift-kit:layer components/dropdown/styles.css ══════════════════════════════════ */
/* ── Dropdown ────────────────────────────────────────────────────────────────
   A menu of commands hanging off a trigger. Not a Select: a listbox has a VALUE
   and says which option is selected; a menu has COMMANDS and has no opinion
   once you have picked one. They share a box and nothing else, which is why the
   box is --dk-component-menu-* and lives beside Select, and why this file is
   only what an ITEM is.

   THE OTHER HALF OF THE DIFFERENCE IS FOCUS. A select keeps focus on its
   trigger and moves aria-activedescendant, because the trigger is the control
   and the list is its popup. A menu moves REAL FOCUS into the items, because
   each item is a control of its own: it can be a link, it can be pressed with
   Enter, and a screen reader in forms mode has to be able to reach it. Two
   patterns, both from the APG, and the reason this is a second component
   rather than a flag on the first.

   Purpose: A menu of commands hanging off a trigger. Select's surface, a
     menu's semantics: real focus, no value.

   Anatomy:
     div.dk-component-dropdown[data-menu-tone="inverse"]?
       button.dk-component-dropdown__trigger      (aria-haspopup="menu")
       div.dk-component-menu.dk-component-dropdown__menu   (role="menu", portalled)
         span|div.dk-component-dropdown__label    (optional heading: a span for
                                                  words, a div for an element)
         button|a.dk-component-dropdown__item     (role="menuitem"
           span.dk-component-dropdown__item-icon        | "menuitemradio"
           span.dk-component-dropdown__item-label       | "menuitemcheckbox")
           svg.dk-component-dropdown__check       (shown when aria-checked)
         hr.dk-component-dropdown__separator

   THE MENU CARRIES TWO CLASSES, and that is the point of the exercise:
   .dk-component-menu is the surface, shared with Select and with whatever comes
   next; .dk-component-dropdown__menu is what the surface is being used for. */
.dk-component-dropdown { position: relative; display: inline-block; }
.dk-component-dropdown[hidden] { display: none; }

/* The trigger is whatever you want it to be: a Button, an icon button, a bare
   element carrying the class. This component does not paint it, because the
   five menus in Forge it was built from had five different triggers and every
   one of them was already right. All this does is turn the chevron, for a
   trigger that has one. */
.dk-component-dropdown[data-open] .dk-component-dropdown__trigger .dk-component-select__chevron,
.dk-component-dropdown[data-open] .dk-component-dropdown__trigger [data-dropdown-chevron] {
  transform: rotate(180deg);
}

.dk-component-dropdown__item {
  display: flex; align-items: center;
  gap: var(--dk-component-dropdown-item-gap);
  width: 100%; box-sizing: border-box;
  padding: var(--dk-component-dropdown-item-padding-block) var(--dk-component-dropdown-item-padding-inline);
  border: 0; background: transparent; cursor: pointer; text-align: left;
  border-radius: var(--dk-component-dropdown-item-radius);
  font-family: var(--dk-component-dropdown-item-font-family);
  font-size: var(--dk-component-dropdown-item-font-size);
  line-height: var(--dk-component-dropdown-item-line-height);
  font-weight: var(--dk-component-dropdown-item-font-weight);
  color: var(--dk-component-dropdown-item-color);
  text-decoration: none;              /* an item may be an <a> */
  transition: background-color var(--dk-component-dropdown-duration) var(--dk-component-dropdown-easing),
              transform var(--dk-component-dropdown-duration) var(--dk-component-dropdown-easing);
}
/* ONE HIGHLIGHT, WHICHEVER INPUT IS DRIVING, which is the lesson Select learned
   the hard way: painting hover and the focused item with one rule leaves a row
   lit behind the pointer. Here the keyboard moves real focus, so :focus-visible
   IS the keyboard's highlight and the two cannot disagree by construction. */
.dk-component-dropdown__item:focus-visible {
  background: var(--dk-component-dropdown-item-surface-hover);
  outline: none;
}
@media (hover: hover) {
  .dk-component-dropdown__item:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--dk-component-dropdown-item-surface-hover);
    outline: none;
  }
}
/* The row settles under the finger. The whole item scales, glyph and tick with
   it, because a press is the row answering rather than a decoration on it. */
.dk-component-dropdown__item:active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--dk-component-dropdown-item-surface-active);
  transform: scale(var(--dk-component-dropdown-item-transform-scale-active));
}
/* The words step with the row (16 Oct, the interaction foundation's word
   ramp). Not on a destructive item, whose red is its message. */
.dk-component-dropdown__item:is(:focus-visible):not(:disabled):not([aria-disabled="true"]):not([data-destructive]) { color: var(--dk-component-dropdown-item-color-hover); }
@media (hover: hover) {
  .dk-component-dropdown__item:is(:hover):not(:disabled):not([aria-disabled="true"]):not([data-destructive]) { color: var(--dk-component-dropdown-item-color-hover); }
}
.dk-component-dropdown__item:active:not(:disabled):not([aria-disabled="true"]):not([data-destructive]) { color: var(--dk-component-dropdown-item-color-active); }
.dk-component-dropdown__item:disabled,
.dk-component-dropdown__item[aria-disabled="true"] {
  color: var(--dk-component-dropdown-item-disabled-color);
  cursor: not-allowed;
}

.dk-component-dropdown__item-icon {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  color: var(--dk-component-dropdown-item-icon-color);
}
.dk-component-dropdown__item-icon > svg, .dk-component-dropdown__item-icon > i {
  display: block;
  width: var(--dk-component-dropdown-item-icon-size);
  height: var(--dk-component-dropdown-item-icon-size);
}
/* The glyph answers with the row. Scoped away from the destructive rung, which
   sets its own colour below and must not be overtaken by this. */
.dk-component-dropdown__item:focus-visible:not([data-destructive]) .dk-component-dropdown__item-icon {
  color: var(--dk-component-dropdown-item-icon-color-hover);
}
@media (hover: hover) {
  .dk-component-dropdown__item:hover:not(:disabled):not([aria-disabled="true"]):not([data-destructive]) .dk-component-dropdown__item-icon {
    color: var(--dk-component-dropdown-item-icon-color-hover);
  }
}
.dk-component-dropdown__item-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-component-dropdown__item:disabled .dk-component-dropdown__item-icon,
.dk-component-dropdown__item[aria-disabled="true"] .dk-component-dropdown__item-icon {
  color: var(--dk-component-dropdown-item-disabled-icon-color);
}

/* ── Destructive. The words and the glyph carry it at rest, and the fill only
   joins in when you are on the item: an item that is red all over before you
   have touched it shouts across the whole menu, and the one thing a Delete
   should not do is draw the eye away from the thing you came to do. ── */
.dk-component-dropdown__item[data-destructive] {
  color: var(--dk-component-dropdown-item-destructive-color);
}
.dk-component-dropdown__item[data-destructive] .dk-component-dropdown__item-icon {
  color: var(--dk-component-dropdown-item-destructive-icon-color);
}
.dk-component-dropdown__item[data-destructive]:focus-visible {
  background: var(--dk-component-dropdown-item-destructive-surface-hover);
}
@media (hover: hover) {
  .dk-component-dropdown__item[data-destructive]:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--dk-component-dropdown-item-destructive-surface-hover);
  }
}
.dk-component-dropdown__item[data-destructive]:active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--dk-component-dropdown-item-destructive-surface-active);
}

/* ── A checked item: menuitemradio or menuitemcheckbox. The tick sits where
   Select's does and reads the same token, so a checked row looks the same to
   someone who uses both. The space is held whether or not it is ticked, or the
   labels in a set of options would not line up with each other. ── */
.dk-component-dropdown__check {
  width: var(--dk-component-dropdown-check-size);
  height: var(--dk-component-dropdown-check-size);
  flex: 0 0 auto;
  color: var(--dk-component-dropdown-check-color);
  opacity: 0;
  stroke-width: var(--dk-component-dropdown-check-stroke-width);
}
.dk-component-dropdown__item[aria-checked="true"] .dk-component-dropdown__check { opacity: 1; }

/* ── A heading. Not an item: no role, no focus, and the keyboard steps past it,
   which needs no special case because it is not a .dk-component-dropdown__item. ── */
.dk-component-dropdown__label {
  display: block;
  padding: var(--dk-component-dropdown-label-padding-block) var(--dk-component-dropdown-item-padding-inline);
  font-family: var(--dk-component-dropdown-item-font-family);
  text-transform: uppercase;
  font-size: var(--dk-component-dropdown-label-font-size);
  line-height: var(--dk-component-dropdown-label-line-height);
  letter-spacing: var(--dk-component-dropdown-label-letter-spacing);
  font-weight: var(--dk-component-dropdown-label-font-weight);
  color: var(--dk-component-dropdown-label-color);
}

/* ── A separator. An <hr>, which arrives with a UA margin and a border of its
   own, both of which go: every other text-bearing part of this kit zeroes the
   same two for the same reason. ── */
.dk-component-dropdown__separator {
  margin: var(--dk-component-dropdown-separator-spacing) 0;
  border: 0;
  border-top: var(--dk-component-dropdown-separator-width) solid var(--dk-component-dropdown-separator-color);
}

/* ── The size the list is rendered at, keyed on the MENU because that is the
   part that crosses the portal: dk.menu mirrors data-size from the root when it
   opens, the same way it carries the theme. The default rung is the small one
   and needs no rule; these two are the steps up. ── */
.dk-component-dropdown__menu[data-size="medium"] .dk-component-dropdown__item {
  font-size: var(--dk-component-dropdown-medium-item-font-size);
  line-height: var(--dk-component-dropdown-medium-item-line-height);
  padding-block: var(--dk-component-dropdown-medium-item-padding-block);
}
.dk-component-dropdown__menu[data-size="medium"] .dk-component-dropdown__item-icon > svg,
.dk-component-dropdown__menu[data-size="medium"] .dk-component-dropdown__item-icon > i {
  width: var(--dk-component-dropdown-medium-item-icon-size);
  height: var(--dk-component-dropdown-medium-item-icon-size);
}
.dk-component-dropdown__menu[data-size="medium"] .dk-component-dropdown__check {
  width: var(--dk-component-dropdown-medium-check-size);
  height: var(--dk-component-dropdown-medium-check-size);
}
.dk-component-dropdown__menu[data-size="large"] .dk-component-dropdown__item {
  font-size: var(--dk-component-dropdown-large-item-font-size);
  line-height: var(--dk-component-dropdown-large-item-line-height);
  padding-block: var(--dk-component-dropdown-large-item-padding-block);
}
.dk-component-dropdown__menu[data-size="large"] .dk-component-dropdown__item-icon > svg,
.dk-component-dropdown__menu[data-size="large"] .dk-component-dropdown__item-icon > i {
  width: var(--dk-component-dropdown-large-item-icon-size);
  height: var(--dk-component-dropdown-large-item-icon-size);
}
.dk-component-dropdown__menu[data-size="large"] .dk-component-dropdown__check {
  width: var(--dk-component-dropdown-large-check-size);
  height: var(--dk-component-dropdown-large-check-size);
}

/* A thumb is not a pointer: on the sheet an item gets the same floor an option
   gets, and the surface's own sheet rules do the rest. */
.dk-component-dropdown__menu[data-sheet-open] .dk-component-dropdown__item {
  min-height: var(--dk-component-dropdown-item-touch-height);
}

/* ════════════════════════════════════ drift-kit:layer components/button/styles.css ════════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   Button — full v2 matrix, driven entirely by the --dk-component-button-* token
   collection (assets/drift-components-tokens.css — scoped
   [data-theme="light"], [data-theme="dark"], NOT :root; every dc page loads
   it before this file). This section reads only --dk-component-button-* tokens, funneled
   through private --_btn-* locals that the variant×status assignment blocks
   below set; the base/state/size rules never reference a Mapped or primitive
   token directly. Full matrix: default / outline / subtle / accent / raised
   variants, all three statuses (primary/neutral/error) where applicable
   (raised is status-agnostic), all four sizes. success/warning/information
   are not button statuses (spec decision #7) — they remain full statuses
   for alerts/toasts/badges.
   accent opts out of the shared bg/border/transform state machinery and owns
   its own gradient lifecycle (see the comment above its @property block).
   Markup and JS integration are unchanged:
   classes .dk-component-button/.dk-component-button__label/.dk-component-button__icon/.dk-component-button__spinner,
   .is-loading, attributes data-variant/data-status/data-size/data-full-width,
   and the dk-component-button-spin keyframes name are all consumed by
   drift-components.js (dk.component.button.loading), the docs registry, and Forge chrome.
   Markup:
     <button class="dk-component-button" data-variant="default" data-status="primary" data-size="medium">
       [<span class="dk-component-button__icon"><i data-lucide="plus"></i></span>]
       <span class="dk-component-button__label">Create</span>
     </button>
   ────────────────────────────────────────────────────────────────────────

   Purpose: Two families: four semantic variants (default / accent / outline
     / subtle) across primary and error statuses, and a four-rung neutral
     emphasis ladder: ghost (no chrome until you touch it), subtle (a filled
     tint), plain (flat on its surface with an edge), raised (that edge lifted
     above it), plus inverse (maximum contrast, opposite-theme fill).

   Anatomy:
     button.dk-component-button[data-variant="default|accent|outline|subtle|raised|plain|ghost|inverse"][data-status="primary|error|success|warning|information"]?[data-size="small|medium|large|extra-large"]?[data-full-width="true"]?[data-alignment]?
       span.__icon?
       span.__label
       span.__spinner?             (while .is-loading)
   */
.dk-component-button {
  display: grid; grid-auto-flow: column; grid-auto-columns: min-content;
  justify-content: center; align-items: center; width: fit-content; height: fit-content;
  position: relative; cursor: pointer; text-align: center; white-space: nowrap; user-select: none;
  outline: none; -webkit-tap-highlight-color: transparent; appearance: none; -webkit-appearance: none;
  font-family: var(--dk-component-button-font-family);
  font-weight: var(--dk-component-button-font-weight); /* one weight for every variant — no per-variant local (2026-08-18) */
  -webkit-font-smoothing: antialiased;
  transition: all var(--dk-component-button-transition-duration) var(--dk-motion-state-easing);
  /* The edge sits inside the size: each rung's padding gives back the border
     width, so an edged variant is the same size as a borderless one (14 Oct:
     a plain Back stood 2px taller than a default Next). */
  border: var(--_btn-border-width, 0px) solid var(--_btn-border, transparent);
  background: var(--_btn-bg, transparent);
  color: var(--_btn-text);
}
/* --_btn-icon-state is set ONLY by the state rules below (hover/active/
   focus, real + forced); unset at rest, so this falls through to the
   variant's own icon token. The icon lives on a DESCENDANT, so a state
   rule on .dk-component-button cannot restyle it directly — it passes the value down
   through this local instead. */
.dk-component-button .dk-component-button__icon { color: var(--_btn-icon-state, var(--_btn-icon, var(--_btn-text))); }
/* State machinery. The bg/border/transform state rules EXCLUDE accent —
   accent owns its whole background/shadow/transform lifecycle (Task 5); if
   these rules applied, the hover/focus/active fallback chain would resolve to
   `transparent` and paint over accent's gradient. The focus ring and the
   text-colour parts of :disabled apply to every variant, accent included.
   Fix round 1 (Important): every real-pseudo-class rule in this Button
   section (this machinery, the shared ring below, and accent's own hover/
   active/focus rules further down) carries a :not([data-pseudo-class]) guard.
   Without it, resting the real cursor over a button that the playground has
   forced into "active" or "focus" produced a broken hybrid — real :hover's
   box-shadow/background out-specificities the forced one. The guard makes a
   forced state (data-pseudo-class="hover|focus|active", any value) switch the
   real rule off entirely, so the forced state always wins outright once set.
   :disabled is exempt — forced-disabled uses the real `disabled` attribute,
   so real and forced can never disagree there. */
/* The lift: no shadow unless a variant sets one (raised). */
.dk-component-button:not([data-variant="accent"]) { box-shadow: var(--_btn-lift, none); }
@media (hover: hover) and (pointer: fine) {
  .dk-component-button:not([data-variant="accent"]):hover:not(:disabled):not([aria-disabled="true"]):not([data-pseudo-class]) {
    box-shadow: var(--_btn-lift-hover, var(--_btn-lift, none));
    background: var(--_btn-bg-hover, var(--_btn-bg, transparent));
    border-color: var(--_btn-border-hover, var(--_btn-border, transparent));
    color: var(--_btn-text-hover, var(--_btn-text));
    --_btn-icon-state: var(--_btn-icon-hover, var(--_btn-icon, var(--_btn-text-hover, var(--_btn-text))));
  }
}
.dk-component-button:not([data-variant="accent"]):active:not(:disabled):not([aria-disabled="true"]):not([data-pseudo-class]) {
  transform: scale(var(--dk-component-button-transform-scale-active));
  box-shadow: var(--_btn-lift-active, var(--_btn-lift, none));
  background: var(--_btn-bg-active, var(--_btn-bg, transparent));
  border-color: var(--_btn-border-active, var(--_btn-border, transparent));
  color: var(--_btn-text-active, var(--_btn-text));
  --_btn-icon-state: var(--_btn-icon-active, var(--_btn-icon, var(--_btn-text-active, var(--_btn-text))));
}
.dk-component-button:not([data-variant="accent"]):focus-visible:not(:disabled):not([aria-disabled="true"]):not([data-pseudo-class]) {
  background: var(--_btn-bg-focus, var(--_btn-bg, transparent));
  border-color: var(--_btn-border-focus, var(--_btn-border, transparent));
  color: var(--_btn-text-focus, var(--_btn-text));
  --_btn-icon-state: var(--_btn-icon-focus, var(--_btn-icon, var(--_btn-text-focus, var(--_btn-text))));
}
.dk-component-button:focus-visible:not(:disabled):not([aria-disabled="true"]):not([data-pseudo-class]) { box-shadow: 0 0 0 var(--dk-component-button-focus-ring-width) var(--_btn-ring); }
/* Raised keeps its lift under the ring. */
.dk-component-button[data-variant="raised"]:focus-visible:not(:disabled):not([aria-disabled="true"]):not([data-pseudo-class]) { box-shadow: 0 0 0 var(--dk-component-button-focus-ring-width) var(--_btn-ring), var(--_btn-lift, 0 0 0 0 transparent); }
.dk-component-button:disabled, .dk-component-button[aria-disabled="true"] {
  cursor: not-allowed;
  color: var(--_btn-text-disabled, var(--_btn-text));
}
.dk-component-button:disabled .dk-component-button__icon, .dk-component-button[aria-disabled="true"] .dk-component-button__icon { color: var(--_btn-icon-disabled, var(--_btn-text-disabled)); }
.dk-component-button:not([data-variant="accent"]):disabled,
.dk-component-button:not([data-variant="accent"])[aria-disabled="true"] {
  box-shadow: none;
  background: var(--_btn-bg-disabled, var(--_btn-bg, transparent));
  border-color: var(--_btn-border-disabled, var(--_btn-border, transparent));
}

/* Forced visual states (v2 authoring convention): data-pseudo-class=
   "hover|focus|active" puts a button into a state without a real pointer/
   keyboard event — used by the Storybook-style playground to render every
   state side-by-side on demand. Forcing = remapping the SAME base locals
   (--_btn-bg/--_btn-border) that the real-state rules above already consume,
   so a forced state is guaranteed to render identically to the real one it
   stands in for. Excludes accent, matching the real-state split above —
   accent's forced equivalents live alongside its own gradient/elevation
   lifecycle further down. */
.dk-component-button[data-pseudo-class="hover"]:not([data-variant="accent"]) {
  box-shadow: var(--_btn-lift-hover, var(--_btn-lift, none));
  background: var(--_btn-bg-hover, var(--_btn-bg, transparent));
  border-color: var(--_btn-border-hover, var(--_btn-border, transparent));
  color: var(--_btn-text-hover, var(--_btn-text));
  --_btn-icon-state: var(--_btn-icon-hover, var(--_btn-icon, var(--_btn-text-hover, var(--_btn-text))));
}
.dk-component-button[data-pseudo-class="active"]:not([data-variant="accent"]) {
  transform: scale(var(--dk-component-button-transform-scale-active));
  box-shadow: var(--_btn-lift-active, var(--_btn-lift, none));
  background: var(--_btn-bg-active, var(--_btn-bg, transparent));
  border-color: var(--_btn-border-active, var(--_btn-border, transparent));
  color: var(--_btn-text-active, var(--_btn-text));
  --_btn-icon-state: var(--_btn-icon-active, var(--_btn-icon, var(--_btn-text-active, var(--_btn-text))));
}
.dk-component-button[data-pseudo-class="focus"]:not([data-variant="accent"]) {
  background: var(--_btn-bg-focus, var(--_btn-bg, transparent));
  border-color: var(--_btn-border-focus, var(--_btn-border, transparent));
  color: var(--_btn-text-focus, var(--_btn-text));
  --_btn-icon-state: var(--_btn-icon-focus, var(--_btn-icon, var(--_btn-text-focus, var(--_btn-text))));
}
.dk-component-button[data-pseudo-class="focus"] { box-shadow: 0 0 0 var(--dk-component-button-focus-ring-width) var(--_btn-ring); }
.dk-component-button[data-variant="raised"][data-pseudo-class="focus"] { box-shadow: 0 0 0 var(--dk-component-button-focus-ring-width) var(--_btn-ring), var(--_btn-lift, 0 0 0 0 transparent); }

.dk-component-button[hidden] { display: none; }
/* dk-component-button on an <a> (e.g. the docs' Storybook link): never underline. */
a.dk-component-button { text-decoration: none; }
.dk-component-button[data-full-width="true"] { width: 100%; }
/* alignment — ported from v2 2026-08-18 (it was silently absent before, which
   is worse than a documented divergence). Only observable once the button is
   wider than its content, i.e. with data-full-width or an explicit width, so
   the docs gate the control on full width. */
.dk-component-button { justify-content: var(--dk-component-button-content-alignment); }
.dk-component-button[data-alignment="left"] { justify-content: flex-start; }
.dk-component-button[data-alignment="center"] { justify-content: center; }
.dk-component-button[data-alignment="right"] { justify-content: flex-end; }
.dk-component-button__label { display: inline-block; }
.dk-component-button__icon { display: inline-flex; align-items: center; }

/* size: padding / gap / radius + label font size + icon size, per size token
   set. RAMP SHIFT (2026-08-17, deliberate v2 divergence): the four size
   VALUES are v2's, but each label sits one step up — Forge small = v2
   extra-small, medium = v2 small, large = v2 medium, extra-large = v2 large —
   so "medium" names the workhorse size. Candidate for upstream adoption. */
.dk-component-button[data-size="small"] {
  padding: calc(var(--dk-component-button-small-padding-y) - var(--_btn-border-width, 0px)) calc(var(--dk-component-button-small-padding-x) - var(--_btn-border-width, 0px));
  gap: var(--dk-component-button-small-gap);
  border-radius: var(--dk-component-button-small-border-radius);
  font-size: var(--dk-component-button-small-font-size);
  line-height: var(--dk-component-button-small-line-height);
}
.dk-component-button[data-size="small"] .dk-component-button__icon svg,
.dk-component-button[data-size="small"] .dk-component-button__icon i {
  width: var(--dk-component-button-small-icon-size); height: var(--dk-component-button-small-icon-size);
}
/* MEDIUM IS ALSO THE DEFAULT, and it took until 16.3.0 to be. Every rung lived
   behind [data-size=...] with nothing behind them, so a button that did not say
   its size got no padding, no radius, no gap, no font size and no icon sizing:
   50x22 of browser default with square corners and 16px inherited text, beside
   the 73x44 it was meant to be. Not a small slip either, because the markup
   looks finished. Forge had 14 of them across four pages, each one styled by
   the UA stylesheet and read as intentional.

   The fix is a selector rather than a second copy of the values: medium answers
   for both cases, so the rung cannot drift from the default. :not([data-size])
   and [data-size="medium"] carry the same specificity, and they never match the
   same element anyway, so the ordering against small and large is untouched. */
.dk-component-button:not([data-size]),
.dk-component-button[data-size="medium"] {
  padding: calc(var(--dk-component-button-medium-padding-y) - var(--_btn-border-width, 0px)) calc(var(--dk-component-button-medium-padding-x) - var(--_btn-border-width, 0px));
  gap: var(--dk-component-button-medium-gap);
  border-radius: var(--dk-component-button-medium-border-radius);
  font-size: var(--dk-component-button-medium-font-size);
  line-height: var(--dk-component-button-medium-line-height);
}
.dk-component-button:not([data-size]) .dk-component-button__icon svg,
.dk-component-button:not([data-size]) .dk-component-button__icon i,
.dk-component-button[data-size="medium"] .dk-component-button__icon svg,
.dk-component-button[data-size="medium"] .dk-component-button__icon i {
  width: var(--dk-component-button-medium-icon-size); height: var(--dk-component-button-medium-icon-size);
}
.dk-component-button[data-size="large"] {
  padding: calc(var(--dk-component-button-large-padding-y) - var(--_btn-border-width, 0px)) calc(var(--dk-component-button-large-padding-x) - var(--_btn-border-width, 0px));
  gap: var(--dk-component-button-large-gap);
  border-radius: var(--dk-component-button-large-border-radius);
  font-size: var(--dk-component-button-large-font-size);
  line-height: var(--dk-component-button-large-line-height);
}
.dk-component-button[data-size="large"] .dk-component-button__icon svg,
.dk-component-button[data-size="large"] .dk-component-button__icon i {
  width: var(--dk-component-button-large-icon-size); height: var(--dk-component-button-large-icon-size);
}
.dk-component-button[data-size="extra-large"] {
  padding: calc(var(--dk-component-button-extra-large-padding-y) - var(--_btn-border-width, 0px)) calc(var(--dk-component-button-extra-large-padding-x) - var(--_btn-border-width, 0px));
  gap: var(--dk-component-button-extra-large-gap);
  border-radius: var(--dk-component-button-extra-large-border-radius);
  font-size: var(--dk-component-button-extra-large-font-size);
  line-height: var(--dk-component-button-extra-large-line-height);
}
.dk-component-button[data-size="extra-large"] .dk-component-button__icon svg,
.dk-component-button[data-size="extra-large"] .dk-component-button__icon i {
  width: var(--dk-component-button-extra-large-icon-size); height: var(--dk-component-button-extra-large-icon-size);
}
/* No gap override here — the previous uniform-gap fix-up is now baked into the
   size tokens themselves (each --dk-component-button-*-gap is spacing-1-5 / 6px). */

/* default (filled) — shared text/icon + disabled surface across every status */
.dk-component-button[data-variant="default"] {
  --_btn-text: var(--dk-component-button-default-text-default);
  --_btn-icon: var(--dk-component-button-default-icon-default);
  --_btn-bg-disabled: var(--dk-component-button-default-surface-disabled);
  --_btn-text-disabled: var(--dk-component-button-default-text-disabled);
  --_btn-icon-disabled: var(--dk-component-button-default-icon-disabled);
}

/* default · primary */
.dk-component-button[data-variant="default"][data-status="primary"] {
  --_btn-text: var(--dk-component-button-default-primary-text-default);
  --_btn-icon: var(--dk-component-button-default-primary-icon-default);
  --_btn-bg: var(--dk-component-button-default-primary-surface-default);
  --_btn-bg-hover: var(--dk-component-button-default-primary-surface-hover);
  --_btn-bg-focus: var(--dk-component-button-default-primary-surface-focus);
  --_btn-bg-active: var(--dk-component-button-default-primary-surface-active);
  --_btn-ring: var(--dk-component-button-default-primary-ring);
}

/* default · error (destructive — e.g. a Delete confirm action) */
.dk-component-button[data-variant="default"][data-status="error"] {
  --_btn-text: var(--dk-component-button-default-error-text-default);
  --_btn-icon: var(--dk-component-button-default-error-icon-default);
  --_btn-bg: var(--dk-component-button-default-error-surface-default);
  --_btn-bg-hover: var(--dk-component-button-default-error-surface-hover);
  --_btn-bg-focus: var(--dk-component-button-default-error-surface-focus);
  --_btn-bg-active: var(--dk-component-button-default-error-surface-active);
  --_btn-ring: var(--dk-component-button-default-error-ring);
}

/* default · success (2026-09-13 — an Alert's primary action carrying the
   alert's own status) */
.dk-component-button[data-variant="default"][data-status="success"] {
  --_btn-text: var(--dk-component-button-default-success-text-default);
  --_btn-icon: var(--dk-component-button-default-success-icon-default);
  --_btn-bg: var(--dk-component-button-default-success-surface-default);
  --_btn-bg-hover: var(--dk-component-button-default-success-surface-hover);
  --_btn-bg-focus: var(--dk-component-button-default-success-surface-focus);
  --_btn-bg-active: var(--dk-component-button-default-success-surface-active);
  --_btn-ring: var(--dk-component-button-default-success-ring);
}

/* default · warning */
.dk-component-button[data-variant="default"][data-status="warning"] {
  --_btn-text: var(--dk-component-button-default-warning-text-default);
  --_btn-icon: var(--dk-component-button-default-warning-icon-default);
  --_btn-bg: var(--dk-component-button-default-warning-surface-default);
  --_btn-bg-hover: var(--dk-component-button-default-warning-surface-hover);
  --_btn-bg-focus: var(--dk-component-button-default-warning-surface-focus);
  --_btn-bg-active: var(--dk-component-button-default-warning-surface-active);
  --_btn-ring: var(--dk-component-button-default-warning-ring);
}

/* default · information */
.dk-component-button[data-variant="default"][data-status="information"] {
  --_btn-text: var(--dk-component-button-default-information-text-default);
  --_btn-icon: var(--dk-component-button-default-information-icon-default);
  --_btn-bg: var(--dk-component-button-default-information-surface-default);
  --_btn-bg-hover: var(--dk-component-button-default-information-surface-hover);
  --_btn-bg-focus: var(--dk-component-button-default-information-surface-focus);
  --_btn-bg-active: var(--dk-component-button-default-information-surface-active);
  --_btn-ring: var(--dk-component-button-default-information-ring);
}

/* raised variant: plain lifted by a shadow (13 Oct). The lift is a private
   the state rules read (--_btn-lift*, not --_btn-elevation, which is accent's
   colour), so it moves on hover and on a press and stays under the focus
   ring. Status-agnostic; padding/size/radius as the others. */
.dk-component-button[data-variant="raised"] {
  --_btn-lift: var(--dk-component-button-raised-shadow);
  --_btn-lift-hover: var(--dk-component-button-raised-shadow-hover);
  --_btn-lift-active: var(--dk-component-button-raised-shadow-active);
  --_btn-border-width: var(--dk-component-button-raised-border-width);
  --_btn-bg: var(--dk-component-button-raised-surface-default);
  --_btn-bg-hover: var(--dk-component-button-raised-surface-hover);
  --_btn-bg-focus: var(--dk-component-button-raised-surface-focus);
  --_btn-bg-active: var(--dk-component-button-raised-surface-active);
  --_btn-border: var(--dk-component-button-raised-border-default);
  --_btn-border-hover: var(--dk-component-button-raised-border-hover);
  --_btn-border-focus: var(--dk-component-button-raised-border-focus);
  --_btn-border-active: var(--dk-component-button-raised-border-active);
  --_btn-text: var(--dk-component-button-raised-text-default);
  --_btn-icon: var(--dk-component-button-raised-icon-default);
  --_btn-text-hover: var(--dk-component-button-raised-text-hover);
  --_btn-text-focus: var(--dk-component-button-raised-text-focus);
  --_btn-text-active: var(--dk-component-button-raised-text-active);
  --_btn-icon-hover: var(--dk-component-button-raised-icon-hover);
  --_btn-icon-focus: var(--dk-component-button-raised-icon-focus);
  --_btn-icon-active: var(--dk-component-button-raised-icon-active);
  --_btn-ring: var(--dk-component-button-raised-ring);
  --_btn-bg-disabled: var(--dk-component-button-raised-surface-disabled);
  --_btn-border-disabled: var(--dk-component-button-raised-border-disabled);
  --_btn-text-disabled: var(--dk-component-button-raised-text-disabled);
  --_btn-icon-disabled: var(--dk-component-button-raised-icon-disabled);
}

/* plain variant — Forge-only. The classic secondary button: opaque surface
   fill (white in light / one step off the body in dark), neutral border +
   text, base bold label. `plain` = a control sitting ON a surface; `raised`
   = floating chrome ABOVE content (semi-bold, lifted fill). Neutral with no
   status; takes data-status="error" and nothing else (see below). */
/* ghost: no chrome at rest, plain from hover on. Carries no --_btn-border-width,
   so the base rule's 0 stands and the box is the same size as plain's. */
.dk-component-button[data-variant="ghost"] {
  --_btn-bg: var(--dk-component-button-ghost-surface-default);
  --_btn-bg-hover: var(--dk-component-button-ghost-surface-hover);
  --_btn-bg-focus: var(--dk-component-button-ghost-surface-focus);
  --_btn-bg-active: var(--dk-component-button-ghost-surface-active);
  --_btn-text: var(--dk-component-button-ghost-text-default);
  --_btn-icon: var(--dk-component-button-ghost-icon-default);
  --_btn-text-hover: var(--dk-component-button-ghost-text-hover);
  --_btn-text-focus: var(--dk-component-button-ghost-text-focus);
  --_btn-text-active: var(--dk-component-button-ghost-text-active);
  --_btn-icon-hover: var(--dk-component-button-ghost-icon-hover);
  --_btn-icon-focus: var(--dk-component-button-ghost-icon-focus);
  --_btn-icon-active: var(--dk-component-button-ghost-icon-active);
  --_btn-ring: var(--dk-component-button-ghost-ring);
  --_btn-bg-disabled: var(--dk-component-button-ghost-surface-disabled);
  --_btn-text-disabled: var(--dk-component-button-ghost-text-disabled);
  --_btn-icon-disabled: var(--dk-component-button-ghost-icon-disabled);
}

.dk-component-button[data-variant="plain"] {
  --_btn-border-width: var(--dk-component-button-plain-border-width);
  --_btn-bg: var(--dk-component-button-plain-surface-default);
  --_btn-bg-hover: var(--dk-component-button-plain-surface-hover);
  --_btn-bg-focus: var(--dk-component-button-plain-surface-focus);
  --_btn-bg-active: var(--dk-component-button-plain-surface-active);
  --_btn-border: var(--dk-component-button-plain-border-default);
  --_btn-border-hover: var(--dk-component-button-plain-border-hover);
  --_btn-border-focus: var(--dk-component-button-plain-border-focus);
  --_btn-border-active: var(--dk-component-button-plain-border-active);
  --_btn-text: var(--dk-component-button-plain-text-default);
  --_btn-icon: var(--dk-component-button-plain-icon-default);
  --_btn-text-hover: var(--dk-component-button-plain-text-hover);
  --_btn-text-focus: var(--dk-component-button-plain-text-focus);
  --_btn-text-active: var(--dk-component-button-plain-text-active);
  --_btn-icon-hover: var(--dk-component-button-plain-icon-hover);
  --_btn-icon-focus: var(--dk-component-button-plain-icon-focus);
  --_btn-icon-active: var(--dk-component-button-plain-icon-active);
  --_btn-ring: var(--dk-component-button-plain-ring);
  --_btn-bg-disabled: var(--dk-component-button-plain-surface-disabled);
  --_btn-border-disabled: var(--dk-component-button-plain-border-disabled);
  --_btn-text-disabled: var(--dk-component-button-plain-text-disabled);
  --_btn-icon-disabled: var(--dk-component-button-plain-icon-disabled);
}

/* plain · error — the destructive secondary. Border stays NEUTRAL at rest so a
   delete reads as ordinary chrome among its neighbours and only the label
   carries the status; hover and active commit and everything goes red. The
   only status plain takes: there is no plain-primary, because a primary action
   is what the default and accent variants are for. */
/* ghost · error. No border slots: ghost carries no edge in any status, so it
   writes none here either and the base rule's transparent border stands. */
.dk-component-button[data-variant="ghost"][data-status="error"] {
  --_btn-bg: var(--dk-component-button-ghost-error-surface-default);
  --_btn-bg-hover: var(--dk-component-button-ghost-error-surface-hover);
  --_btn-bg-focus: var(--dk-component-button-ghost-error-surface-focus);
  --_btn-bg-active: var(--dk-component-button-ghost-error-surface-active);
  --_btn-text: var(--dk-component-button-ghost-error-text-default);
  --_btn-icon: var(--dk-component-button-ghost-error-icon-default);
  --_btn-text-hover: var(--dk-component-button-ghost-error-text-hover);
  --_btn-icon-hover: var(--dk-component-button-ghost-error-icon-hover);
  --_btn-text-focus: var(--dk-component-button-ghost-error-text-focus);
  --_btn-icon-focus: var(--dk-component-button-ghost-error-icon-focus);
  --_btn-text-active: var(--dk-component-button-ghost-error-text-active);
  --_btn-icon-active: var(--dk-component-button-ghost-error-icon-active);
  --_btn-ring: var(--dk-component-button-ghost-error-ring);
}

.dk-component-button[data-variant="plain"][data-status="error"] {
  --_btn-border: var(--dk-component-button-plain-error-border-default);
  --_btn-border-hover: var(--dk-component-button-plain-error-border-hover);
  --_btn-border-focus: var(--dk-component-button-plain-error-border-focus);
  --_btn-border-active: var(--dk-component-button-plain-error-border-active);
  --_btn-bg-hover: var(--dk-component-button-plain-error-surface-hover);
  --_btn-bg-focus: var(--dk-component-button-plain-error-surface-focus);
  --_btn-bg-active: var(--dk-component-button-plain-error-surface-active);
  --_btn-text: var(--dk-component-button-plain-error-text-default);
  --_btn-icon: var(--dk-component-button-plain-error-icon-default);
  --_btn-text-hover: var(--dk-component-button-plain-error-text-hover);
  --_btn-icon-hover: var(--dk-component-button-plain-error-icon-hover);
  --_btn-text-focus: var(--dk-component-button-plain-error-text-focus);
  --_btn-icon-focus: var(--dk-component-button-plain-error-icon-focus);
  --_btn-text-active: var(--dk-component-button-plain-error-text-active);
  --_btn-icon-active: var(--dk-component-button-plain-error-icon-active);
  --_btn-ring: var(--dk-component-button-plain-error-ring);
}

/* inverse variant — Forge-only. The neutral family's max-emphasis rung:
   opposite-theme surface (near-black in light / near-white in dark),
   borderless, states settle one tone back toward the ambient theme. For
   contexts where semantic colour can't do the job (imagery, dark heroes,
   inverse chrome) — never beside a semantic CTA. Status-agnostic. */
.dk-component-button[data-variant="inverse"] {
  --_btn-bg: var(--dk-component-button-inverse-surface-default);
  --_btn-bg-hover: var(--dk-component-button-inverse-surface-hover);
  --_btn-bg-focus: var(--dk-component-button-inverse-surface-focus);
  --_btn-bg-active: var(--dk-component-button-inverse-surface-active);
  --_btn-text: var(--dk-component-button-inverse-text-default);
  --_btn-icon: var(--dk-component-button-inverse-icon-default);
  --_btn-ring: var(--dk-component-button-inverse-ring);
  --_btn-bg-disabled: var(--dk-component-button-inverse-surface-disabled);
  --_btn-text-disabled: var(--dk-component-button-inverse-text-disabled);
  --_btn-icon-disabled: var(--dk-component-button-inverse-icon-disabled);
}

/* outline — transparent fill, coloured border + text per status; hover/focus/
   active fill in a subtle status-tinted surface (no border-width change). */
.dk-component-button[data-variant="outline"] {
  --_btn-bg: var(--dk-component-button-outline-surface-default);
  --_btn-border-width: var(--dk-component-button-outline-border-width);
  --_btn-border-disabled: var(--dk-component-button-outline-border-disabled);
  --_btn-text-disabled: var(--dk-component-button-outline-text-disabled);
  --_btn-icon-disabled: var(--dk-component-button-outline-icon-disabled);
}

/* outline · primary */
.dk-component-button[data-variant="outline"][data-status="primary"] {
  --_btn-border: var(--dk-component-button-outline-primary-border-default);
  --_btn-border-hover: var(--dk-component-button-outline-primary-border-hover);
  --_btn-border-focus: var(--dk-component-button-outline-primary-border-focus);
  --_btn-border-active: var(--dk-component-button-outline-primary-border-active);
  --_btn-bg-hover: var(--dk-component-button-outline-primary-surface-hover);
  --_btn-bg-focus: var(--dk-component-button-outline-primary-surface-focus);
  --_btn-bg-active: var(--dk-component-button-outline-primary-surface-active);
  --_btn-text: var(--dk-component-button-outline-primary-text-default);
  --_btn-icon: var(--dk-component-button-outline-primary-icon-default);
  --_btn-text-hover: var(--dk-component-button-outline-primary-text-hover);
  --_btn-icon-hover: var(--dk-component-button-outline-primary-icon-hover);
  --_btn-text-focus: var(--dk-component-button-outline-primary-text-focus);
  --_btn-icon-focus: var(--dk-component-button-outline-primary-icon-focus);
  --_btn-text-active: var(--dk-component-button-outline-primary-text-active);
  --_btn-icon-active: var(--dk-component-button-outline-primary-icon-active);
  --_btn-ring: var(--dk-component-button-outline-primary-ring);
}

/* outline · error */
.dk-component-button[data-variant="outline"][data-status="error"] {
  --_btn-border: var(--dk-component-button-outline-error-border-default);
  --_btn-border-hover: var(--dk-component-button-outline-error-border-hover);
  --_btn-border-focus: var(--dk-component-button-outline-error-border-focus);
  --_btn-border-active: var(--dk-component-button-outline-error-border-active);
  --_btn-bg-hover: var(--dk-component-button-outline-error-surface-hover);
  --_btn-bg-focus: var(--dk-component-button-outline-error-surface-focus);
  --_btn-bg-active: var(--dk-component-button-outline-error-surface-active);
  --_btn-text: var(--dk-component-button-outline-error-text-default);
  --_btn-icon: var(--dk-component-button-outline-error-icon-default);
  --_btn-text-hover: var(--dk-component-button-outline-error-text-hover);
  --_btn-icon-hover: var(--dk-component-button-outline-error-icon-hover);
  --_btn-text-focus: var(--dk-component-button-outline-error-text-focus);
  --_btn-icon-focus: var(--dk-component-button-outline-error-icon-focus);
  --_btn-text-active: var(--dk-component-button-outline-error-text-active);
  --_btn-icon-active: var(--dk-component-button-outline-error-icon-active);
  --_btn-ring: var(--dk-component-button-outline-error-ring);
}

/* outline · success / warning / information — outline is the full-spectrum
   status variant (alert actions; see the tokens file). These statuses exist
   on NO other variant. */
.dk-component-button[data-variant="outline"][data-status="success"] {
  --_btn-border: var(--dk-component-button-outline-success-border-default);
  --_btn-border-hover: var(--dk-component-button-outline-success-border-hover);
  --_btn-border-focus: var(--dk-component-button-outline-success-border-focus);
  --_btn-border-active: var(--dk-component-button-outline-success-border-active);
  --_btn-bg-hover: var(--dk-component-button-outline-success-surface-hover);
  --_btn-bg-focus: var(--dk-component-button-outline-success-surface-focus);
  --_btn-bg-active: var(--dk-component-button-outline-success-surface-active);
  --_btn-text: var(--dk-component-button-outline-success-text-default);
  --_btn-icon: var(--dk-component-button-outline-success-icon-default);
  --_btn-text-hover: var(--dk-component-button-outline-success-text-hover);
  --_btn-icon-hover: var(--dk-component-button-outline-success-icon-hover);
  --_btn-text-focus: var(--dk-component-button-outline-success-text-focus);
  --_btn-icon-focus: var(--dk-component-button-outline-success-icon-focus);
  --_btn-text-active: var(--dk-component-button-outline-success-text-active);
  --_btn-icon-active: var(--dk-component-button-outline-success-icon-active);
  --_btn-ring: var(--dk-component-button-outline-success-ring);
}
.dk-component-button[data-variant="outline"][data-status="warning"] {
  --_btn-border: var(--dk-component-button-outline-warning-border-default);
  --_btn-border-hover: var(--dk-component-button-outline-warning-border-hover);
  --_btn-border-focus: var(--dk-component-button-outline-warning-border-focus);
  --_btn-border-active: var(--dk-component-button-outline-warning-border-active);
  --_btn-bg-hover: var(--dk-component-button-outline-warning-surface-hover);
  --_btn-bg-focus: var(--dk-component-button-outline-warning-surface-focus);
  --_btn-bg-active: var(--dk-component-button-outline-warning-surface-active);
  --_btn-text: var(--dk-component-button-outline-warning-text-default);
  --_btn-icon: var(--dk-component-button-outline-warning-icon-default);
  --_btn-text-hover: var(--dk-component-button-outline-warning-text-hover);
  --_btn-icon-hover: var(--dk-component-button-outline-warning-icon-hover);
  --_btn-text-focus: var(--dk-component-button-outline-warning-text-focus);
  --_btn-icon-focus: var(--dk-component-button-outline-warning-icon-focus);
  --_btn-text-active: var(--dk-component-button-outline-warning-text-active);
  --_btn-icon-active: var(--dk-component-button-outline-warning-icon-active);
  --_btn-ring: var(--dk-component-button-outline-warning-ring);
}
.dk-component-button[data-variant="outline"][data-status="information"] {
  --_btn-border: var(--dk-component-button-outline-information-border-default);
  --_btn-border-hover: var(--dk-component-button-outline-information-border-hover);
  --_btn-border-focus: var(--dk-component-button-outline-information-border-focus);
  --_btn-border-active: var(--dk-component-button-outline-information-border-active);
  --_btn-bg-hover: var(--dk-component-button-outline-information-surface-hover);
  --_btn-bg-focus: var(--dk-component-button-outline-information-surface-focus);
  --_btn-bg-active: var(--dk-component-button-outline-information-surface-active);
  --_btn-text: var(--dk-component-button-outline-information-text-default);
  --_btn-icon: var(--dk-component-button-outline-information-icon-default);
  --_btn-text-hover: var(--dk-component-button-outline-information-text-hover);
  --_btn-icon-hover: var(--dk-component-button-outline-information-icon-hover);
  --_btn-text-focus: var(--dk-component-button-outline-information-text-focus);
  --_btn-icon-focus: var(--dk-component-button-outline-information-icon-focus);
  --_btn-text-active: var(--dk-component-button-outline-information-text-active);
  --_btn-icon-active: var(--dk-component-button-outline-information-icon-active);
  --_btn-ring: var(--dk-component-button-outline-information-ring);
}

/* subtle — status-tinted flat fill (no border), same tint ramps as outline's
   hover surfaces but visible at rest. */
.dk-component-button[data-variant="subtle"] {
  --_btn-bg-disabled: var(--dk-component-button-subtle-surface-disabled);
  --_btn-text-disabled: var(--dk-component-button-subtle-text-disabled);
  --_btn-icon-disabled: var(--dk-component-button-subtle-icon-disabled);
}

/* subtle, NEUTRAL — the statusless default. A subtle button with no status
   rendered unstyled before, because the variant only ever existed as
   subtle-primary and subtle-error; that was the documented "fail loud" for an
   unsupported pairing, but statusless is not an unsupported pairing, it is the
   ordinary case. It reads the control family, so it takes the colour of the
   surface it sits on across tone, level and fill. The two status rules that
   follow are more specific and still win when a status is asked for. */
.dk-component-button[data-variant="subtle"]:not([data-status]) {
  --_btn-bg: var(--dk-component-button-subtle-surface-default);
  --_btn-bg-hover: var(--dk-component-button-subtle-surface-hover);
  --_btn-bg-focus: var(--dk-component-button-subtle-surface-focus);
  --_btn-bg-active: var(--dk-component-button-subtle-surface-active);
  --_btn-text: var(--dk-component-button-subtle-text-default);
  --_btn-icon: var(--dk-component-button-subtle-icon-default);
  --_btn-text-hover: var(--dk-component-button-subtle-text-hover);
  --_btn-icon-hover: var(--dk-component-button-subtle-icon-hover);
  --_btn-text-focus: var(--dk-component-button-subtle-text-focus);
  --_btn-icon-focus: var(--dk-component-button-subtle-icon-focus);
  --_btn-text-active: var(--dk-component-button-subtle-text-active);
  --_btn-icon-active: var(--dk-component-button-subtle-icon-active);
  --_btn-ring: var(--dk-component-button-subtle-ring);
}

/* subtle · primary */
.dk-component-button[data-variant="subtle"][data-status="primary"] {
  --_btn-bg: var(--dk-component-button-subtle-primary-surface-default);
  --_btn-bg-hover: var(--dk-component-button-subtle-primary-surface-hover);
  --_btn-bg-focus: var(--dk-component-button-subtle-primary-surface-focus);
  --_btn-bg-active: var(--dk-component-button-subtle-primary-surface-active);
  --_btn-text: var(--dk-component-button-subtle-primary-text-default);
  --_btn-icon: var(--dk-component-button-subtle-primary-icon-default);
  --_btn-text-hover: var(--dk-component-button-subtle-primary-text-hover);
  --_btn-icon-hover: var(--dk-component-button-subtle-primary-icon-hover);
  --_btn-text-focus: var(--dk-component-button-subtle-primary-text-focus);
  --_btn-icon-focus: var(--dk-component-button-subtle-primary-icon-focus);
  --_btn-text-active: var(--dk-component-button-subtle-primary-text-active);
  --_btn-icon-active: var(--dk-component-button-subtle-primary-icon-active);
  --_btn-ring: var(--dk-component-button-subtle-primary-ring);
}

/* subtle · error */
.dk-component-button[data-variant="subtle"][data-status="error"] {
  --_btn-bg: var(--dk-component-button-subtle-error-surface-default);
  --_btn-bg-hover: var(--dk-component-button-subtle-error-surface-hover);
  --_btn-bg-focus: var(--dk-component-button-subtle-error-surface-focus);
  --_btn-bg-active: var(--dk-component-button-subtle-error-surface-active);
  --_btn-text: var(--dk-component-button-subtle-error-text-default);
  --_btn-icon: var(--dk-component-button-subtle-error-icon-default);
  --_btn-text-hover: var(--dk-component-button-subtle-error-text-hover);
  --_btn-icon-hover: var(--dk-component-button-subtle-error-icon-hover);
  --_btn-text-focus: var(--dk-component-button-subtle-error-text-focus);
  --_btn-icon-focus: var(--dk-component-button-subtle-error-icon-focus);
  --_btn-text-active: var(--dk-component-button-subtle-error-text-active);
  --_btn-icon-active: var(--dk-component-button-subtle-error-icon-active);
  --_btn-ring: var(--dk-component-button-subtle-error-ring);
}

/* accent — registered stop properties so the gradient can transition.
   Names are _btn-prefixed to avoid colliding with drift-ui.css's own
   @property --color-start/middle/end registrations. */
@property --_btn-grad-1 { syntax: "<color>"; inherits: false; initial-value: #000000; }
@property --_btn-grad-2 { syntax: "<color>"; inherits: false; initial-value: #000000; }
@property --_btn-grad-3 { syntax: "<color>"; inherits: false; initial-value: #000000; }

/* accent owns its own background/shadow/transform lifecycle end-to-end (see
   the state-machinery comment above the shared bg/border/transform rules,
   which all explicitly exclude [data-variant="accent"]). The base gradient
   `background` below persists through every state — hover/disabled reassign
   the --_btn-grad-* locals instead of swapping `background` outright, and the
   registered @property syntax above makes those colour locals transitionable. */
.dk-component-button[data-variant="accent"] {
  --_btn-text: var(--dk-component-button-accent-text-default);
  --_btn-icon: var(--dk-component-button-accent-icon-default);
  background: linear-gradient(var(--dk-component-button-accent-gradient-angle),
    var(--_btn-grad-1) var(--dk-component-button-accent-gradient-stop-1-position),
    var(--_btn-grad-2) var(--dk-component-button-accent-gradient-stop-2-position),
    var(--_btn-grad-3) var(--dk-component-button-accent-gradient-stop-3-position));
  transition: --_btn-grad-1 var(--dk-component-button-accent-transition-duration) var(--dk-motion-state-easing),
    --_btn-grad-2 var(--dk-component-button-accent-transition-duration) var(--dk-motion-state-easing),
    --_btn-grad-3 var(--dk-component-button-accent-transition-duration) var(--dk-motion-state-easing),
    background var(--dk-component-button-accent-transition-duration) var(--dk-motion-state-easing),
    transform var(--dk-component-button-state-transition-duration) var(--dk-motion-state-easing), box-shadow var(--dk-component-button-state-transition-duration) var(--dk-motion-state-easing);
}

/* accent gradient/elevation locals — single-status variant (status axis
   omitted 2026-08-18), so these live keyed on the variant alone; any
   data-status on an accent button is ignored. */
.dk-component-button[data-variant="accent"] {
  --_btn-grad-1: var(--dk-component-button-accent-gradient-stop-1-default);
  --_btn-grad-2: var(--dk-component-button-accent-gradient-stop-2-default);
  --_btn-grad-3: var(--dk-component-button-accent-gradient-stop-3-default);
  --_btn-grad-1-hover: var(--dk-component-button-accent-gradient-stop-1-hover);
  --_btn-grad-2-hover: var(--dk-component-button-accent-gradient-stop-2-hover);
  --_btn-grad-3-hover: var(--dk-component-button-accent-gradient-stop-3-hover);
  --_btn-elevation: var(--dk-component-button-accent-elevation-default);
  --_btn-elevation-hover: var(--dk-component-button-accent-elevation-hover);
  --_btn-ring: var(--dk-component-button-accent-ring);
  text-shadow: 0 1px 1px var(--dk-component-button-accent-text-shadow);
}

/* Real + forced hover, collapsed to one generic pair (was six per-status
   @media blocks above, one per status, each remapping the three gradient
   stops directly from tokens). Each status block above now ALSO assigns
   --_btn-grad-N-hover locals, so one status-agnostic rule can do the remap
   for every status. Specificity check: the base status blocks that assign
   --_btn-grad-N are .dk-component-button[data-variant="accent"] (single-status variant)
   (0,3,0). The real-hover rule below carries the fix-round-1
   :not([data-pseudo-class]) guard (see the state-machinery comment above),
   reaching (0,5,0); it still outranks the base blocks regardless of source
   order, and now additionally never fires at all once any state is forced —
   the forced-hover rule below takes over completely instead of racing it.
   The forced-hover rule, .dk-component-button[data-variant="accent"][data-pseudo-class=
   "hover"], has no guard of its own (forcing must always apply) and stays at
   (0,3,0) — a tie with the base blocks — so it must (and does, being
   declared after them) win on source order instead. */
@media (hover: hover) and (pointer: fine) {
  .dk-component-button[data-variant="accent"]:hover:not(:disabled):not([aria-disabled="true"]):not([data-pseudo-class]) {
    --_btn-grad-1: var(--_btn-grad-1-hover);
    --_btn-grad-2: var(--_btn-grad-2-hover);
    --_btn-grad-3: var(--_btn-grad-3-hover);
  }
}
.dk-component-button[data-variant="accent"][data-pseudo-class="hover"] {
  --_btn-grad-1: var(--_btn-grad-1-hover);
  --_btn-grad-2: var(--_btn-grad-2-hover);
  --_btn-grad-3: var(--_btn-grad-3-hover);
}

/* elevation: 1px lift for the smallest size, 2px otherwise (v2's extra-small
   split — Forge's small after the ramp shift) */
.dk-component-button[data-variant="accent"][data-size="small"] { box-shadow: 0 var(--dk-component-button-accent-elevation-height-small) 0 0 var(--_btn-elevation); }
.dk-component-button[data-variant="accent"]:not([data-size="small"]) { box-shadow: 0 var(--dk-component-button-accent-elevation-height) 0 0 var(--_btn-elevation); }
@media (hover: hover) and (pointer: fine) {
  .dk-component-button[data-variant="accent"][data-size="small"]:hover:not(:disabled):not([aria-disabled="true"]):not([data-pseudo-class]) { box-shadow: 0 var(--dk-component-button-accent-elevation-height-small) 0 0 var(--_btn-elevation-hover); }
  .dk-component-button[data-variant="accent"]:not([data-size="small"]):hover:not(:disabled):not([aria-disabled="true"]):not([data-pseudo-class]) { box-shadow: 0 var(--dk-component-button-accent-elevation-height) 0 0 var(--_btn-elevation-hover); }
}
/* Forced (data-pseudo-class) equivalents of the hover-elevation and
   press-flatten rules above (the two real rules just above carry the
   fix-round-1 :not([data-pseudo-class]) guard, now (0,6,0), so they switch
   off entirely once any state is forced — no race with the forced rules
   below). data-pseudo-class holds exactly one value, so
   [data-pseudo-class="hover"] and [data-pseudo-class="active"] never match
   the same element at once — there's no real tie between the hover and
   active rules directly below (reviewer-flagged: the earlier version of this
   comment wrongly described one). The tie that DOES exist is forced-active
   vs. the unconditional accent elevation base rules earlier in this section
   (.dk-component-button[data-variant="accent"][data-size=...], (0,3,0)): forced-active
   is also (0,3,0), and it wins only because it's declared after them (source
   order) — which is also why the active rules are kept below the hover rules
   here, for readability, not because of any hover/active collision. Forced
   focus has the identical tie against those same elevation base rules: the
   shared non-accent forced-focus rule above
   (.dk-component-button[data-pseudo-class="focus"], (0,2,0)) is beaten by the
   elevation base rules ((0,3,0)); this accent-specific rule matches at
   (0,3,0) too and wins the same way, by coming later. */
.dk-component-button[data-variant="accent"][data-size="small"][data-pseudo-class="hover"] { box-shadow: 0 var(--dk-component-button-accent-elevation-height-small) 0 0 var(--_btn-elevation-hover); }
.dk-component-button[data-variant="accent"]:not([data-size="small"])[data-pseudo-class="hover"] { box-shadow: 0 var(--dk-component-button-accent-elevation-height) 0 0 var(--_btn-elevation-hover); }
.dk-component-button[data-variant="accent"][data-pseudo-class="active"] { transform: translateY(2px); box-shadow: 0 0 0 0 var(--_btn-elevation-hover); }
.dk-component-button[data-variant="accent"][data-size="small"][data-pseudo-class="active"] { transform: translateY(1px); }
.dk-component-button[data-variant="accent"][data-pseudo-class="focus"] { box-shadow: 0 0 0 var(--dk-component-button-focus-ring-width) var(--_btn-ring); }
.dk-component-button[data-variant="accent"]:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(2px); box-shadow: 0 0 0 0 var(--_btn-elevation-hover); }
.dk-component-button[data-variant="accent"][data-size="small"]:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); }
.dk-component-button[data-variant="accent"]:disabled,
.dk-component-button[data-variant="accent"][aria-disabled="true"] {
  --_btn-grad-1: var(--dk-component-button-accent-gradient-stop-1-disabled);
  --_btn-grad-2: var(--dk-component-button-accent-gradient-stop-2-disabled);
  --_btn-grad-3: var(--dk-component-button-accent-gradient-stop-3-disabled);
  text-shadow: 0 1px 1px var(--dk-component-button-accent-text-shadow-disabled);
  box-shadow: 0 var(--dk-component-button-accent-elevation-height) 0 0 var(--dk-component-button-accent-elevation-disabled);
}
.dk-component-button[data-variant="accent"][data-size="small"]:disabled { box-shadow: 0 var(--dk-component-button-accent-elevation-height-small) 0 0 var(--dk-component-button-accent-elevation-disabled); }
/* Fix (review round 1, Critical): the elevation rules above are unconditional
   [data-variant][data-size] selectors — specificity (0,3,0). The shared
   focus-ring rule was originally the same (0,3,0) and, being declared
   earlier, lost the box-shadow property to elevation — so the ring never
   rendered on accent buttons. This rule adds :focus-visible (plus
   :not(:disabled)'s own specificity) to reach (0,5,0) — up from (0,4,0) now
   that fix round 1 gave the shared rule and this one a
   :not([data-pseudo-class]) guard too (see the state-machinery comment) —
   beating the elevation rules while focused. (The shared rule alone is now
   (0,4,0) and already outranks plain elevation on its own; this
   accent-specific rule is kept as the belt-and-braces version.) Known
   accepted overlap: while simultaneously hovered, the hover-elevation rules
   above are (0,6,0) and still mask the ring — matches v2 behaviour. */
.dk-component-button[data-variant="accent"]:focus-visible:not(:disabled):not([aria-disabled="true"]):not([data-pseudo-class]) { box-shadow: 0 0 0 var(--dk-component-button-focus-ring-width) var(--_btn-ring); }

/* Pressed-while-hovered: the hover-elevation rules (0,6,0, after the
   fix-round-1 guard) outrank the plain :active flattening (0,4,0 — untouched,
   real-only), so without this the pressed button keeps its 2px shadow while
   translating down — it must flatten, per v2's own `:active:hover` rule. This
   rule ties the hover-elevation rules at (0,6,0) too and wins by being
   declared after them (source order). */
@media (hover: hover) {
  .dk-component-button[data-variant="accent"]:hover:active:not(:disabled):not([aria-disabled="true"]):not([data-pseudo-class]) { box-shadow: 0 0 0 0 var(--_btn-elevation-hover); }
}

/* Loading state — overlay the spinner and fade the label/icon so the button
   keeps its natural width instead of collapsing to the spinner's size. */
.dk-component-button.is-loading > *:not(.dk-component-button__spinner) { opacity: 0; }
/* Center via inset+margin (NOT transform): the spinner's transform is owned by
   the dk-component-button-spin rotation animation. Using translate() here would collide
   with it — the animation interpolates the underlying translate → rotate through
   matrix decomposition, making the ring wobble/orbit instead of spin in place. */
.dk-component-button.is-loading .dk-component-button__spinner { position: absolute; inset: 0; margin: auto; }

/* Spinner ring shown while an async action (Create/Import/Save) is in flight.
   Driven by dk.component.button.loading() in drift-components.js, which toggles
   the .is-loading class + :disabled + aria-busy alongside appending/removing
   this element. Neutral ring + primary top reads well on the disabled-grey
   button background any of our variants fall back to. */
@keyframes dk-component-button-spin { to { transform: rotate(360deg); } }
.dk-component-button__spinner {
  display: inline-block; border-radius: 50%;
  width: var(--dk-component-button-spinner-size); height: var(--dk-component-button-spinner-size);
  border: var(--dk-component-button-spinner-border-width) solid var(--dk-component-button-spinner-track);
  border-top-color: var(--dk-component-button-spinner-head);
  animation: dk-component-button-spin var(--dk-component-button-spin-duration) var(--dk-motion-loop-easing) infinite;
  vertical-align: middle;
}

/* ══════════════════════════════════════ drift-kit:layer components/link/styles.css ══════════════════════════════════════ */
/* ── Link ───────────────────────────────────────────────────────────────────
   A way to go somewhere. An action that stays on the page is a Button.

   Purpose: A way to go somewhere. Inline, it is the sentence it sits in;
     standalone, it has its own size and room for an icon.

   Anatomy:
     (a|button).dk-component-link[data-variant][data-standalone][data-size][data-show-visited]
       span.dk-component-link__icon            (standalone only, aria-hidden)
       the text
       span.dk-component-link__icon[data-trailing]

   INLINE BY DEFAULT: no font declarations at all, so a link in a sentence is
   the sentence. Always underlined, because colour alone is not enough to find
   a link in running text (WCAG 1.4.1). Standalone links sit on their own, so
   they are recognisable by position and underline only on hover.

   THE BARE LINK: an <a> with no class inside the kit's text components gets
   the inline look, wholly inside :where so any class or consumer rule wins.
   A link outside those components is the consumer's and is not touched.

   Variant, visited, disabled and the tone write the --_link-* slots; the base
   rule and the state rules spend them. Order is load-bearing: disabled sits
   below neutral so it wins at equal specificity.

   A BUTTON THAT READS AS A LINK (8 Nov 2026): an action in a sentence, such
   as "Resend code", is a <button class="dk-component-link">. The browser's
   button chrome is taken off (no fill, edge or padding) and it takes the
   sentence's type, tracking, case and spacing, so its words sit where the
   anchor's do. It is still a button's box: an atomic inline, so it never
   breaks across two lines as an anchor can. The reset weighs one class
   (10 Nov 2026), (0,1,0): a page's plain button { } rule cannot put the
   chrome back, while every Link rule after it and a page's own class
   loaded after the kit still win. A native disabled is the disabled link.
   ── */
.dk-component-link:where(button) {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  text-transform: inherit;
  text-indent: inherit;
  text-align: inherit;
}
.dk-component-link,
:where(:is(.dk-component-body, .dk-component-heading, .dk-component-eyebrow, .dk-component-alert, .dk-component-tooltip, .dk-component-table) a:not([class])) {
  --_link-color: var(--dk-component-link-color-default);
  --_link-underline: var(--dk-component-link-underline-color-default);
  color: var(--_link-color);
  text-decoration-line: underline;
  text-decoration-color: var(--_link-underline);
  text-decoration-thickness: var(--dk-component-link-underline-thickness-default);
  text-underline-offset: var(--dk-component-link-underline-offset);
  text-decoration-skip-ink: auto;
  border-radius: var(--dk-component-link-focus-ring-radius);
  cursor: pointer;
  transition:
    color var(--dk-component-link-motion-duration) var(--dk-component-link-motion-easing),
    text-decoration-color var(--dk-component-link-motion-duration) var(--dk-component-link-motion-easing),
    text-decoration-thickness var(--dk-component-link-motion-duration) var(--dk-component-link-motion-easing);
}

.dk-component-link[data-variant="neutral"] {
  --_link-color: var(--dk-component-link-neutral-color-default);
  --_link-underline: var(--dk-component-link-neutral-underline-color);
}

/* Visited sets colour only: :visited may not set custom properties, so the
   colour is written directly and the underline keeps its teal slot. */
.dk-component-link[data-show-visited]:visited,
.dk-component-link[data-pseudo-class="visited"] {
  color: var(--dk-component-link-visited-color);
}

/* ── Hover and active ── */
.dk-component-link[data-pseudo-class="hover"] {
  color: var(--dk-component-link-color-hover);
  text-decoration-color: currentColor;
  text-decoration-thickness: var(--dk-component-link-underline-thickness-hover);
}
@media (hover: hover) {
  .dk-component-link:not([aria-disabled="true"]):not([data-pseudo-class]):hover,
  :where(:is(.dk-component-body, .dk-component-heading, .dk-component-eyebrow, .dk-component-alert, .dk-component-tooltip, .dk-component-table) a:not([class])):hover {
    color: var(--dk-component-link-color-hover);
    text-decoration-color: currentColor;
    text-decoration-thickness: var(--dk-component-link-underline-thickness-hover);
  }
}
.dk-component-link:not([aria-disabled="true"]):not([data-pseudo-class]):active,
.dk-component-link[data-pseudo-class="active"],
:where(:is(.dk-component-body, .dk-component-heading, .dk-component-eyebrow, .dk-component-alert, .dk-component-tooltip, .dk-component-table) a:not([class])):active {
  color: var(--dk-component-link-color-active);
  text-decoration-color: currentColor;
  text-decoration-thickness: var(--dk-component-link-underline-thickness-hover);
}

/* ── Focus: keyboard only. An outline rather than a box-shadow so the ring
   follows each line fragment when a link wraps. ── */
.dk-component-link:focus-visible,
.dk-component-link[data-pseudo-class="focus"],
:where(:is(.dk-component-body, .dk-component-heading, .dk-component-eyebrow, .dk-component-alert, .dk-component-tooltip, .dk-component-table) a:not([class])):focus-visible {
  outline: var(--dk-component-link-focus-ring-width) solid var(--dk-focus-ring-primary);
  outline-offset: var(--dk-component-link-focus-ring-offset);
}
.dk-component-link:focus:not(:focus-visible) { outline: none; }

/* ── Disabled: no href, aria-disabled, or a button's native disabled. Not
   focusable, not a pointer target. ── */
.dk-component-link:is([aria-disabled="true"], :disabled) {
  --_link-color: var(--dk-component-link-disabled-color);
  text-decoration-line: none;
  cursor: default;
  pointer-events: none;
}

/* ── Standalone ── */
.dk-component-link[data-standalone] {
  --_link-font-size: var(--dk-component-link-medium-font-size);
  --_link-line-height: var(--dk-component-link-medium-line-height);
  --_link-icon-size: var(--dk-component-link-medium-icon-size);
  display: inline-flex;
  align-items: center;
  gap: var(--dk-component-link-gap);
  font-size: var(--_link-font-size);
  line-height: var(--_link-line-height);
  font-weight: var(--dk-component-link-font-weight);
  text-decoration-line: none;
}
.dk-component-link[data-standalone][data-size="small"] {
  --_link-font-size: var(--dk-component-link-small-font-size);
  --_link-line-height: var(--dk-component-link-small-line-height);
  --_link-icon-size: var(--dk-component-link-small-icon-size);
}
.dk-component-link[data-standalone][data-size="large"] {
  --_link-font-size: var(--dk-component-link-large-font-size);
  --_link-line-height: var(--dk-component-link-large-line-height);
  --_link-icon-size: var(--dk-component-link-large-icon-size);
}
.dk-component-link[data-standalone]:not([aria-disabled="true"]):not([data-pseudo-class]):active,
.dk-component-link[data-standalone][data-pseudo-class="hover"],
.dk-component-link[data-standalone][data-pseudo-class="active"] {
  text-decoration-line: underline;
}
@media (hover: hover) {
  .dk-component-link[data-standalone]:not([aria-disabled="true"]):not([data-pseudo-class]):hover {
    text-decoration-line: underline;
  }
}

.dk-component-link__icon {
  display: inline-flex;
  flex: none;
  width: var(--_link-icon-size);
  height: var(--_link-icon-size);
  transition: transform var(--dk-component-link-motion-duration) var(--dk-component-link-motion-easing);
}
.dk-component-link__icon > :is(svg, i),
.dk-component-link__icon > i > svg { width: 100%; height: 100%; }
.dk-component-link[data-standalone][data-pseudo-class="hover"] .dk-component-link__icon[data-trailing] {
  transform: translateX(var(--dk-component-link-icon-travel));
}
@media (hover: hover) {
  .dk-component-link[data-standalone]:not([aria-disabled="true"]):not([data-pseudo-class]):hover .dk-component-link__icon[data-trailing] {
    transform: translateX(var(--dk-component-link-icon-travel));
  }
}

/* ── External: target="_blank" draws a glyph and says so. The generated
   content's alt text is what a screen reader appends to the name. The first
   content line is the fallback for an engine without alt syntax. ── */
.dk-component-link[target="_blank"]:not([aria-disabled="true"])::after,
:where(:is(.dk-component-body, .dk-component-heading, .dk-component-eyebrow, .dk-component-alert, .dk-component-tooltip, .dk-component-table) a:not([class])[target="_blank"]:not([aria-disabled="true"]))::after {
  content: "";
  content: "" / "(opens in new tab)";
  display: inline-block;
  width: var(--dk-component-link-external-icon-size);
  height: var(--dk-component-link-external-icon-size);
  margin-inline-start: var(--dk-component-link-external-icon-gap);
  vertical-align: -0.1em;
  background-color: currentColor;
  -webkit-mask: var(--dk-component-link-external-icon) center / contain no-repeat;
  mask: var(--dk-component-link-external-icon) center / contain no-repeat;
}
.dk-component-link[data-standalone][target="_blank"]::after { margin-inline-start: 0; }

/* ════════════════════════════════════ drift-kit:layer components/switch/styles.css ════════════════════════════════════ */
/* ── Switch ─────────────────────────────────────────────────────────────────
   A visually-hidden native <input type="checkbox" role="switch"> drives a
   painted .dk-component-switch__track. The input is the control: real keyboard
   behaviour, real form participation, real accessibility tree, no JavaScript
   and no state kept anywhere. Everything else is decoration over the top.

   role="switch" IS THE WHOLE ACCESSIBILITY STORY. A checkbox input announces
   "checkbox, checked"; with the role it announces "switch, on". The element
   stays a checkbox, so it still posts its value in a form and still answers
   Space, and the role only changes what it is called. Nothing else in this file
   is needed for a screen reader to get it right, and nothing else would do: an
   ARIA role on a <div> would have to carry its own keyboard handling, its own
   focus behaviour and its own form participation, and a design system that
   ships three hand-rolled versions of what the platform already does is a
   design system with three bugs.

   A SWITCH IS NOT A CHECKBOX, and the difference decides two omissions. It
   takes effect the moment you flip it, where a checkbox states an intention you
   submit later. So there is no indeterminate, a setting is on or off, and no
   aria-invalid: a control that has already acted cannot be a field you failed
   to fill in. Both are Checkbox's, deliberately, and both are named in its api
   table rather than left to be discovered.

   PRIVATE SLOTS, the pattern Checkbox and the icon button share. Every colour
   comes from a --_sw-* slot declared on the root; the state rules set slots and
   the paint rules read them, which is what lets the live :hover and the docs'
   forced [data-pseudo-class="hover"] be one set of values rather than two that
   drift apart.

   Purpose: An on/off setting that takes effect immediately. Checkbox's
     label, description, sizes and states on a track and a thumb, with a
     settings-row treatment of its own.

   Anatomy:
     label.dk-component-switch[data-variant][data-size][data-align]
       input.dk-component-switch__input          (role="switch")
       span.dk-component-switch__track            (the thumb is its ::after)
       span.dk-component-switch__icon             (optional, a settings row)
       span.dk-component-switch__text
         span.dk-component-switch__label
         span.dk-component-switch__desc

   THE DOM ORDER IS ALWAYS THAT, whatever the switch looks like. data-align
   moves the control with `order` rather than asking markup to be rewritten, so
   one shape is copyable for every arrangement and a playground can flip it live.
   The input and the track stay adjacent siblings in every arrangement, which is
   what the :checked + rules below depend on and what every consumer written
   before 15.0.0 already has.                                                */
/* POSITIONED, so the root is the containing block of the hidden input below
   (11 Nov). The input is the one absolute piece directly in the row; without
   a positioned root it was laid out against whatever positioned ancestor sat
   further out, so in a scrolling list that is not positioned it stayed where
   the list started while its row scrolled away, grew the outer box's scroll
   range, and a press focused it and scrolled the page back to it. */
.dk-component-switch {
  position: relative;
  display: flex; align-items: flex-start;
  gap: var(--dk-component-switch-gap);
  width: fit-content; cursor: pointer;

  /* ── The slots, at rest and off: an outlined object on a form, which is the
     same object a text field is, so it paints the same palette. ── */
  --_sw-surface: var(--dk-component-switch-surface-default);
  --_sw-surface-hover: var(--dk-component-switch-surface-hover);
  --_sw-surface-active: var(--dk-component-switch-surface-active);
  --_sw-border: var(--dk-component-switch-border-default);
  --_sw-border-hover: var(--dk-component-switch-border-hover);
  --_sw-border-active: var(--dk-component-switch-border-active);
  --_sw-thumb: var(--dk-component-switch-thumb);
  --_sw-thumb-hover: var(--dk-component-switch-thumb-hover);
  --_sw-ring: var(--dk-component-switch-ring);
  --_sw-track-h: var(--dk-component-switch-track-height);
  --_sw-icon-size: var(--dk-component-switch-icon-size);
  --_sw-label-size: var(--dk-component-switch-label-font-size);
  --_sw-label-leading: var(--dk-component-switch-label-line-height);
  /* DERIVED, ALL FOUR, from the height and the ratio, so a consumer who
     overrides one height gets a pill and a thumb that still fit each other.
     The height and the ratio are the track at the thin tier's hairline, and
     the thumb and its run are drawn INSIDE that hairline, so they never
     change. A thicker border tier GROWS THE TRACK OUTWARD by what the border
     gained on each side (8 Nov, Julio): sized from what the border left, the
     thumb was 14px at thin and nothing at bold. */
  --_sw-grow: calc(2 * (var(--dk-component-switch-border-width) - var(--dk-component-switch-border-width-base)));
  --_sw-track-w: calc(var(--_sw-track-h) * var(--dk-component-switch-track-ratio) + var(--_sw-grow));
  --_sw-track-outer-h: calc(var(--_sw-track-h) + var(--_sw-grow));
  --_sw-thumb-size: calc(var(--_sw-track-h)
                    - 2 * var(--dk-component-switch-border-width-base)
                    - 2 * var(--dk-component-switch-thumb-inset));
  --_sw-travel: calc(var(--_sw-track-h) * var(--dk-component-switch-track-ratio)
                - 2 * var(--dk-component-switch-border-width-base)
                - var(--_sw-thumb-size)
                - 2 * var(--dk-component-switch-thumb-inset));
}
.dk-component-switch[hidden] { display: none; }

/* ── NO LABEL AT ALL, which is the shape every consumer written before 15.0.0
   already has and a real shape in its own right: a switch in a table row or a
   toolbar takes its name from the column or the control beside it, through
   aria-label or aria-labelledby on the input. Omit the __text span and the
   control collapses to its track, with no gap left behind where the words
   would have been. An EMPTY __text is treated the same, because a template
   that renders the wrapper unconditionally is the common way to arrive here. */
.dk-component-switch__text:empty { display: none; }
/* EVERY SHAPE THAT PUTS SOMETHING BESIDE THE CONTROL KEEPS THE GAP, not only
   the canonical __text one: a hand-written row that carries a bare __label, or
   an icon and nothing else, is markup people write and a collapsed gap there
   would jam the words against the track. */
.dk-component-switch:not(:has(.dk-component-switch__text, .dk-component-switch__label, .dk-component-switch__icon)),
.dk-component-switch:has(.dk-component-switch__text:empty):not(:has(.dk-component-switch__label, .dk-component-switch__icon)) { gap: 0; }

/* ── Sizes. The track height IS Checkbox's box size, so the two line up in one
   settings list and both centre on the same line of text. ── */
.dk-component-switch[data-size="small"] {
  --_sw-track-h: var(--dk-component-switch-small-track-height);
  --_sw-icon-size: var(--dk-component-switch-small-icon-size);
  --_sw-label-size: var(--dk-component-switch-small-label-font-size);
  --_sw-label-leading: var(--dk-component-switch-small-label-line-height);
}
.dk-component-switch[data-size="large"] {
  --_sw-track-h: var(--dk-component-switch-large-track-height);
  --_sw-icon-size: var(--dk-component-switch-large-icon-size);
  --_sw-label-size: var(--dk-component-switch-large-label-font-size);
  --_sw-label-leading: var(--dk-component-switch-large-label-line-height);
}

/* ── On. Every slot moves at once, so the fill, its hover, its press and the
   thumb on it are one decision rather than four rules that can disagree. ── */
.dk-component-switch:has(.dk-component-switch__input:checked) {
  --_sw-surface: var(--dk-component-switch-checked-surface-default);
  --_sw-surface-hover: var(--dk-component-switch-checked-surface-hover);
  --_sw-surface-active: var(--dk-component-switch-checked-surface-active);
  --_sw-border: var(--dk-component-switch-checked-border-default);
  --_sw-border-hover: var(--dk-component-switch-checked-border-hover);
  --_sw-border-active: var(--dk-component-switch-checked-border-active);
  --_sw-thumb: var(--dk-component-switch-checked-thumb);
  --_sw-thumb-hover: var(--dk-component-switch-checked-thumb-hover);
}

/* ── Disabled. Off and on are different looks for the reason Checkbox names:
   one is refusing input, the other is reporting a setting it will not let you
   change, and the thumb has to stay readable on it. ── */
.dk-component-switch:has(.dk-component-switch__input:disabled) {
  cursor: not-allowed;
  --_sw-surface: var(--dk-component-switch-disabled-surface);
  --_sw-border: var(--dk-component-switch-disabled-border);
  --_sw-thumb: var(--dk-component-switch-disabled-thumb);
}
.dk-component-switch:has(.dk-component-switch__input:disabled:checked) {
  --_sw-surface: var(--dk-component-switch-disabled-checked-surface);
  --_sw-border: var(--dk-component-switch-disabled-checked-border);
  --_sw-thumb: var(--dk-component-switch-disabled-checked-thumb);
}

/* ── The control. VISUALLY HIDDEN RATHER THAN opacity: 0 OVER THE TRACK, which
   is where Checkbox and this component genuinely differ. A checkbox stretches
   its input over its own box so the native control is the hit target; a switch
   is wrapped in a <label> that is often a whole settings row, and an input
   stretched over that would swallow anything else in the row. The label is the
   hit target instead, which is what lets a whole settings row be clickable.
   1px rather than display: none, because a hidden control is not focusable and
   a switch nobody can tab to is not a control. ── */
.dk-component-switch__input {
  position: absolute; width: 1px; height: 1px; margin: 0;
  opacity: 0; pointer-events: none;
}

.dk-component-switch__track {
  position: relative; flex: 0 0 auto; box-sizing: border-box;
  width: var(--_sw-track-w); height: var(--_sw-track-outer-h);
  border: var(--dk-component-switch-border-width) solid var(--_sw-border);
  border-radius: var(--dk-border-radius-round, 999px);
  background: var(--_sw-surface);
  /* The halo, always present and invisible until it is needed: see tokens.css.
     Written here rather than only in the focus rule so the ring can stack on
     top of it instead of replacing it. */
  box-shadow: 0 0 0 var(--dk-component-switch-halo-width) var(--dk-component-switch-halo);
  transition: background-color var(--dk-component-switch-duration) var(--dk-component-switch-easing),
              border-color var(--dk-component-switch-duration) var(--dk-component-switch-easing),
              box-shadow var(--dk-component-switch-duration) var(--dk-component-switch-easing);
}
/* THE TRACK CENTRES ON THE FIRST LINE OF THE LABEL, not on the text block, so
   adding a description does not drag the control down the paragraph. Checkbox
   does this by making its __box as tall as one line and centring inside; a
   switch has no box element, so the same answer is spent as a margin: half the
   difference between the line box and the track. Scoped to a switch that HAS
   text, or a bare one would be pushed down by nothing. */
.dk-component-switch:has(.dk-component-switch__text) .dk-component-switch__track,
.dk-component-switch:has(.dk-component-switch__icon) .dk-component-switch__track {
  margin-top: calc((var(--_sw-label-leading) - var(--_sw-track-outer-h)) / 2);
}
/* A track a thicker border tier has grown spills past the first line by half
   its growth each way; the row makes room for it, so a list of switches keeps
   its air (8 Nov). In :where(), so a variant's container padding, which
   already has that room, wins. */
.dk-component-switch:where(:has(.dk-component-switch__text, .dk-component-switch__icon):not([data-align="end"])) {
  padding-block: calc(var(--_sw-grow) / 2);
}

/* The thumb. A ::after rather than an element: it is a disc, not content, and
   asking every call site to carry a <span> for it would be a tax on markup that
   has been input-plus-track since the component was ported.
   translate carries the travel and transform carries the press, which are
   separate properties on purpose: one animates the slide, the other the
   squeeze, and neither has to know about the other. */
.dk-component-switch__track::after {
  content: ""; position: absolute; top: 50%; left: var(--dk-component-switch-thumb-inset);
  width: var(--_sw-thumb-size); height: var(--_sw-thumb-size);
  border-radius: var(--dk-component-switch-thumb-radius);
  background: var(--_sw-thumb);
  box-shadow: var(--dk-component-switch-thumb-shadow);
  translate: 0 -50%;
  transition: translate var(--dk-component-switch-duration) var(--dk-component-switch-easing),
              background-color var(--dk-component-switch-duration) var(--dk-component-switch-easing),
              transform var(--dk-motion-travel-duration) var(--dk-motion-travel-easing);
}
.dk-component-switch__input:checked + .dk-component-switch__track::after {
  translate: var(--_sw-travel) -50%;
}

/* ── Live states. Hover and press sit on the ROOT, because the root is the
   <label>: pointing at the words is pointing at the control, and on a settings
   row the words are most of what there is to point at.

   Hover defers to press and to focus for the reason input/styles.css records:
   the :not(:has(...)) guard carries its argument's specificity, so an unguarded
   hover outranks both and wins every time the pointer is still there.
   :not([data-pseudo-class]) keeps the live rules out of the way of the docs'
   forced ones, which are a different selector and cannot otherwise compete. ── */
@media (hover: hover) {
  .dk-component-switch:hover:not(:has(.dk-component-switch__input:disabled)):not(:active):not(:has(.dk-component-switch__input:focus-visible)):not([data-pseudo-class]) .dk-component-switch__track {
    background: var(--_sw-surface-hover);
    border-color: var(--_sw-border-hover);
  }
}
@media (hover: hover) {
  .dk-component-switch:hover:not(:has(.dk-component-switch__input:disabled)):not(:active):not(:has(.dk-component-switch__input:focus-visible)):not([data-pseudo-class]) .dk-component-switch__track::after {
    background: var(--_sw-thumb-hover);
  }
}
.dk-component-switch:active:not(:has(.dk-component-switch__input:disabled)):not([data-pseudo-class]) .dk-component-switch__track {
  background: var(--_sw-surface-active);
  border-color: var(--_sw-border-active);
}
/* THE THUMB GOES WITH IT, which is this component's version of the tick
   shrinking inside a pressed checkbox: the track darkening is the surface
   answering, and the thing you are looking at while you press is the thumb. */
.dk-component-switch:active:not(:has(.dk-component-switch__input:disabled)):not([data-pseudo-class]) .dk-component-switch__track::after {
  transform: scale(var(--dk-component-switch-thumb-scale-active));
}
.dk-component-switch:has(.dk-component-switch__input:focus-visible):not([data-pseudo-class]) .dk-component-switch__track {
  border-color: var(--dk-component-switch-focus-border);
  box-shadow: 0 0 0 var(--dk-component-switch-halo-width) var(--dk-component-switch-halo),
              0 0 0 var(--dk-component-switch-focus-ring-width) var(--_sw-ring);
}

/* ── The same three states, forced, for the documentation's state control.
   They read the same slots, so there is one set of values. ── */
.dk-component-switch[data-pseudo-class="hover"] .dk-component-switch__track {
  background: var(--_sw-surface-hover); border-color: var(--_sw-border-hover);
}
.dk-component-switch[data-pseudo-class="hover"] .dk-component-switch__track::after {
  background: var(--_sw-thumb-hover);
}
.dk-component-switch[data-pseudo-class="active"] .dk-component-switch__track {
  background: var(--_sw-surface-active); border-color: var(--_sw-border-active);
}
.dk-component-switch[data-pseudo-class="active"] .dk-component-switch__track::after {
  transform: scale(var(--dk-component-switch-thumb-scale-active));
}
.dk-component-switch[data-pseudo-class="focus"] .dk-component-switch__track {
  border-color: var(--dk-component-switch-focus-border);
  box-shadow: 0 0 0 var(--dk-component-switch-halo-width) var(--dk-component-switch-halo),
              0 0 0 var(--dk-component-switch-focus-ring-width) var(--_sw-ring);
}

/* ── The optional leading glyph a settings row carries. Centred on the first
   line the same way the track is. ── */
.dk-component-switch__icon {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  color: var(--dk-component-switch-icon-color);
  margin-top: calc((var(--_sw-label-leading) - var(--_sw-icon-size)) / 2);
}
.dk-component-switch__icon > svg, .dk-component-switch__icon > i {
  width: var(--_sw-icon-size); height: var(--_sw-icon-size); display: block;
}
.dk-component-switch:has(.dk-component-switch__input:disabled) .dk-component-switch__icon {
  color: var(--dk-component-switch-disabled-icon-color);
}

/* ── Text ── */
.dk-component-switch__text { display: grid; gap: var(--dk-component-switch-text-gap); min-width: 0; }
.dk-component-switch__label {
  font-family: var(--dk-component-switch-label-font-family);
  font-size: var(--_sw-label-size); line-height: var(--_sw-label-leading);
  font-weight: var(--dk-component-switch-label-font-weight);
  color: var(--dk-component-switch-label-color);
}
/* ── THE DESCRIPTION MUST LEAVE THE ACCESSIBLE NAME, and markup is the only
   place that can do it. The root is a <label>, so everything inside it is part
   of the control's NAME: measured in Chromium, a described switch announced as
   "Weekly summary A digest of everything that changed." and had no description
   at all. aria-describedby on its own makes it worse, the same words then being
   announced twice, as the name and again as the description.

   So the __desc span carries aria-hidden="true" AND an id the input points at
   with aria-describedby. The span is hidden from the name traversal and still
   read when referenced explicitly, which is what separates the two, and it
   stays on screen throughout. Both React components do this for you.

     <input class="dk-component-switch__input" aria-describedby="x-desc">
     ...
     <span class="dk-component-switch__desc" id="x-desc" aria-hidden="true">...</span>

   Forge's check:contract asserts the name and the description of a described
   example, which is what caught this. ── */
.dk-component-switch__desc {
  font-family: var(--dk-component-switch-label-font-family);
  font-size: var(--_sw-label-size); line-height: var(--_sw-label-leading);
  font-weight: var(--dk-component-switch-desc-font-weight);
  color: var(--dk-component-switch-desc-color);
}
.dk-component-switch:has(.dk-component-switch__input:disabled) .dk-component-switch__label {
  color: var(--dk-component-switch-disabled-label-color);
}
.dk-component-switch:has(.dk-component-switch__input:disabled) .dk-component-switch__desc {
  color: var(--dk-component-switch-disabled-desc-color);
}

/* ── data-align="end": the control at the far end, the words filling the rest.
   The settings-row arrangement, and the reason .dk-component-switch-field
   existed. It is `order` rather than a second markup shape: see the header.
   The root goes full width, because a control pinned to the right of something
   that is only as wide as its own text is pinned to nothing. ── */
.dk-component-switch[data-align="end"] {
  width: 100%;
  align-items: center;
}
.dk-component-switch[data-align="end"] .dk-component-switch__icon { order: 1; }
.dk-component-switch[data-align="end"] .dk-component-switch__text { order: 2; flex: 1 1 auto; }
.dk-component-switch[data-align="end"] .dk-component-switch__track { order: 3; }
/* The two margins above centre the control on the FIRST LINE, which is right
   when the control leads and wrong when it trails: a control at the end of a
   two-line row belongs to the row, not to its first line. align-items: center
   above does the centring instead, so the margins have to go. */
.dk-component-switch[data-align="end"] .dk-component-switch__track,
.dk-component-switch[data-align="end"] .dk-component-switch__icon { margin-top: 0; }

/* ── A group. Several switches under one heading: a settings panel, not a
   question with several answers, which is the one way it differs from
   Checkbox's group. It is still a <fieldset> with a <legend>, because that is
   the only element pairing that names a set of controls natively. ── */
.dk-component-switch-group {
  display: grid; gap: var(--dk-component-switch-group-gap);
  border: 0; margin: 0; padding: 0; min-width: 0;
}
.dk-component-switch-group__legend {
  padding: 0; margin: 0 0 var(--dk-component-switch-group-legend-gap);
  font-family: var(--dk-component-switch-label-font-family);
  font-size: var(--dk-component-switch-label-font-size);
  line-height: var(--dk-component-switch-label-line-height);
  font-weight: var(--dk-component-switch-label-font-weight);
  color: var(--dk-component-switch-label-color);
}
.dk-component-switch-group__desc {
  margin: calc(var(--dk-component-switch-group-legend-gap) * -1 + var(--dk-component-switch-text-gap)) 0 0;
  font-family: var(--dk-component-switch-label-font-family);
  font-size: var(--dk-component-switch-label-font-size);
  line-height: var(--dk-component-switch-label-line-height);
  color: var(--dk-component-switch-desc-color);
}

/* ── Variants (17 Oct): a container around the row; the switch never
   changes. Ghost (absent) has none. ── */
.dk-component-switch:is([data-variant="raised"], [data-variant="plain"], [data-variant="inset"]) {
  --_sw-box-pad: var(--dk-component-switch-container-padding);
  --_sw-box-radius: var(--dk-component-switch-container-radius);
  box-sizing: border-box;
  padding: var(--_sw-box-pad);
  border: var(--dk-component-switch-container-border-width) solid var(--_sw-box-edge);
  border-radius: var(--_sw-box-radius);
  background-color: var(--_sw-box);
  box-shadow: var(--_sw-box-depth);
  transition: background-color var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              border-color var(--dk-motion-state-duration) var(--dk-motion-state-easing);
}
.dk-component-switch[data-size="small"]:is([data-variant="raised"], [data-variant="plain"], [data-variant="inset"]) {
  --_sw-box-pad: var(--dk-component-switch-small-container-padding);
  --_sw-box-radius: var(--dk-component-switch-small-container-radius);
}
.dk-component-switch[data-size="large"]:is([data-variant="raised"], [data-variant="plain"], [data-variant="inset"]) {
  --_sw-box-pad: var(--dk-component-switch-large-container-padding);
  --_sw-box-radius: var(--dk-component-switch-large-container-radius);
}
.dk-component-switch[data-variant="raised"] {
  --_sw-box: var(--dk-component-switch-raised-container-surface);
  --_sw-box-hover: var(--dk-component-switch-raised-container-surface-hover);
  --_sw-box-edge: var(--dk-component-switch-raised-container-border);
  --_sw-box-edge-hover: var(--dk-component-switch-raised-container-border-hover);
  --_sw-box-depth: var(--dk-component-switch-raised-container-shadow);
}
.dk-component-switch[data-variant="plain"] {
  --_sw-box: var(--dk-component-switch-plain-container-surface);
  --_sw-box-hover: var(--dk-component-switch-plain-container-surface-hover);
  --_sw-box-edge: var(--dk-component-switch-plain-container-border);
  --_sw-box-edge-hover: var(--dk-component-switch-plain-container-border-hover);
  --_sw-box-depth: none;
}
.dk-component-switch[data-variant="inset"] {
  --_sw-box: var(--dk-component-switch-inset-container-surface);
  --_sw-box-hover: var(--dk-component-switch-inset-container-surface-hover);
  --_sw-box-edge: transparent;
  --_sw-box-edge-hover: transparent;
  --_sw-box-depth: var(--dk-component-switch-inset-container-shadow);
}
/* The whole row is the target: the container steps its fill under it. */
.dk-component-switch:is([data-variant="raised"], [data-variant="plain"], [data-variant="inset"]):is([data-pseudo-class="hover"]):not(:has(.dk-component-switch__input:disabled)) {
  --_sw-box: var(--_sw-box-hover);
  --_sw-box-edge: var(--_sw-box-edge-hover);
}
@media (hover: hover) {
  .dk-component-switch:is([data-variant="raised"], [data-variant="plain"], [data-variant="inset"]):is(:hover):not(:has(.dk-component-switch__input:disabled)) {
    --_sw-box: var(--_sw-box-hover);
    --_sw-box-edge: var(--_sw-box-edge-hover);
  }
}

/* ══════════════════════════════════ drift-kit:layer components/dropzone/styles.css ══════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   Dropzone: a file-drop area with an optional field label, caption and
   error, for one file or a list of them.
   The root is a container. The area inside it is a <label> around the real
   file input, so click-to-browse is native and a form post sends the files;
   drift-components.js adds drag-and-drop, validation, the file list and the
   announcements. Hover and drag-over share ONE treatment; :active steps one
   deeper; a chosen file makes the dashed border solid.
   STATES KEY OFF THE REAL CONTROL, as Input's do: disabled is input:disabled
   and error is input[aria-invalid="true"], so what a screen reader is told
   and what is drawn are the same fact.
   Markup:
     <div class="dk-component-dropzone" data-layout="compact"?  data-max-size="5MB"? data-max-files="3"?>
       <span class="dk-component-dropzone__label">Documents</span>                      optional
       <label class="dk-component-dropzone__area">
         <input type="file" class="dk-component-dropzone__input" name="file" accept=".pdf" multiple? />
         <span class="dk-component-dropzone__icon">svg</span>
         <span class="dk-component-dropzone__text">
           <span class="dk-component-dropzone__title">Drop a file here</span>
           <span class="dk-component-dropzone__hint">or click to browse</span>
         </span>
       </label>
       <p class="dk-component-dropzone__caption">PDF, up to 5 MB</p>                     optional
     </div>
   ────────────────────────────────────────────────────────────────────────

   Purpose: A place to drop or browse for files: one file or a list, with the
     type, size and count checked on the way in and a plain message when
     something is refused.

   Anatomy:
     div.dk-component-dropzone[data-layout="row"]?
       label.__area
         input.__input[type="file"]
         span.__icon
         span.__text > span.__title + span.__hint
       ul.__list?                  (the chosen files, written by the runtime)
   */
.dk-component-dropzone { display: grid; width: 100%; gap: var(--dk-component-dropzone-gap); }
.dk-component-dropzone[hidden] { display: none; }

.dk-component-dropzone__label {
  font-family: var(--dk-component-dropzone-label-font-family);
  text-transform: uppercase;
  font-weight: var(--dk-component-dropzone-label-font-weight);
  font-size: var(--dk-component-dropzone-label-font-size);
  line-height: var(--dk-component-dropzone-label-line-height);
  letter-spacing: var(--dk-component-dropzone-label-letter-spacing);
  color: var(--dk-text-neutral-default);
}
/* Required: the asterisk goes on the label, or, with no label, on the prompt
   (the hint when there is no prompt), so the field says it wherever its name is. */
.dk-component-dropzone__label .dk-component-req,
.dk-component-dropzone__title .dk-component-req,
.dk-component-dropzone__hint .dk-component-req { color: var(--dk-text-warning-default); margin-left: var(--dk-spacing-0-5); }
.dk-component-dropzone:has(.dk-component-dropzone__input:disabled) .dk-component-req { color: inherit; }

/* ── The area. Its colours live in private slots, so each state writes the
   slots once and the area, icon and text all read them. ── */
.dk-component-dropzone__area {
  --_dz-surface: var(--dk-component-dropzone-surface);
  --_dz-border: var(--dk-component-dropzone-border);
  --_dz-border-style: dashed;
  --_dz-icon: var(--dk-component-dropzone-icon-color);
  --_dz-title: var(--dk-component-dropzone-title-color);
  --_dz-hint: var(--dk-component-dropzone-hint-color);
  --_dz-icon-size: var(--dk-component-dropzone-icon-size);
  /* The kit's dashed edge draws in the area's colour (kit/dashed.css). */
  --dk-dashed-border-color: var(--_dz-border);
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--dk-component-dropzone-content-gap); text-align: center; cursor: pointer;
  padding: var(--dk-component-dropzone-padding-y) var(--dk-component-dropzone-padding-x);
  border: var(--dk-component-dropzone-border-width) var(--_dz-border-style) var(--_dz-border);
  border-radius: var(--dk-component-dropzone-radius);
  background: var(--_dz-surface); color: var(--dk-text-neutral-default);
  transition: background-color var(--dk-motion-state-duration) var(--dk-motion-state-easing), border-color var(--dk-motion-state-duration) var(--dk-motion-state-easing), box-shadow var(--dk-motion-state-duration) var(--dk-motion-state-easing), transform var(--dk-motion-press-duration) var(--dk-motion-press-easing);
}
/* Visually hidden, still focusable: Tab reaches it, Enter and Space open the picker. */
.dk-component-dropzone__input {
  position: absolute; inline-size: 1px; block-size: 1px; margin: 0; padding: 0;
  opacity: 0; pointer-events: none; clip-path: inset(50%); overflow: hidden;
}
.dk-component-dropzone__icon { display: inline-flex; color: var(--_dz-icon); transition: color var(--dk-motion-state-duration) var(--dk-motion-state-easing); }
.dk-component-dropzone__icon svg,
.dk-component-dropzone__icon i { display: block; inline-size: var(--_dz-icon-size); block-size: var(--_dz-icon-size); } /* i: the pre-lucide placeholder, no layout jump */
.dk-component-dropzone__text { display: flex; flex-direction: column; gap: var(--dk-component-dropzone-text-gap); min-width: 0; }
.dk-component-dropzone__title {
  font-family: var(--dk-font-family-primary); font-weight: var(--dk-component-dropzone-title-font-weight);
  font-size: var(--dk-font-input-sm-text-size); line-height: var(--dk-font-input-sm-line-height);
  color: var(--_dz-title); overflow-wrap: anywhere;
  transition: color var(--dk-motion-state-duration) var(--dk-motion-state-easing);
}
.dk-component-dropzone__hint {
  font-family: var(--dk-font-family-primary); font-weight: var(--dk-component-dropzone-hint-font-weight);
  font-size: var(--dk-font-body-sm-text-size); line-height: var(--dk-font-body-sm-line-height);
  color: var(--_dz-hint);
  transition: color var(--dk-motion-state-duration) var(--dk-motion-state-easing);
}

/* ── Compact: one row for a form. Icon first, text left-aligned. ── */
.dk-component-dropzone[data-layout="compact"] .dk-component-dropzone__area {
  --_dz-icon-size: var(--dk-component-dropzone-compact-icon-size);
  flex-direction: row; justify-content: flex-start; text-align: start;
  gap: var(--dk-component-dropzone-compact-content-gap);
  padding: var(--dk-component-dropzone-compact-padding-y) var(--dk-component-dropzone-compact-padding-x);
}

/* ── Hover and drag-over, one treatment; pressed one deeper ── */
.dk-component-dropzone[data-dragover] .dk-component-dropzone__area,
.dk-component-dropzone[data-pseudo-class="hover"] .dk-component-dropzone__area {
  --_dz-surface: var(--dk-component-dropzone-surface-hover);
  --_dz-border: var(--dk-component-dropzone-border-hover);
  --_dz-icon: var(--dk-component-dropzone-icon-color-hover);
  --_dz-title: var(--dk-component-dropzone-title-color-hover);
  --_dz-hint: var(--dk-component-dropzone-hint-color-hover);
}
@media (hover: hover) {
  .dk-component-dropzone__area:hover {
    --_dz-surface: var(--dk-component-dropzone-surface-hover);
    --_dz-border: var(--dk-component-dropzone-border-hover);
    --_dz-icon: var(--dk-component-dropzone-icon-color-hover);
    --_dz-title: var(--dk-component-dropzone-title-color-hover);
    --_dz-hint: var(--dk-component-dropzone-hint-color-hover);
  }
}
.dk-component-dropzone__area:active:not(:has(.dk-component-dropzone__clear:active)),
.dk-component-dropzone[data-pseudo-class="active"] .dk-component-dropzone__area {
  --_dz-surface: var(--dk-component-dropzone-surface-active);
  --_dz-border: var(--dk-component-dropzone-border-active);
  --_dz-icon: var(--dk-component-dropzone-icon-color-hover);
  --_dz-title: var(--dk-component-dropzone-title-color-hover);
  --_dz-hint: var(--dk-component-dropzone-hint-color-hover);
  transform: scale(var(--dk-component-dropzone-active-scale));
}

/* ── A file is chosen: solid primary border on the primary tint ── */
.dk-component-dropzone[data-has-file] .dk-component-dropzone__area {
  --_dz-surface: var(--dk-component-dropzone-surface-filled);
  --_dz-border: var(--dk-component-dropzone-border-filled);
  --_dz-border-style: solid;
  --dk-dashed-border-pattern: none;
  --_dz-icon: var(--dk-component-dropzone-icon-color-hover);
  --_dz-title: var(--dk-component-dropzone-title-color-hover);
  --_dz-hint: var(--dk-component-dropzone-hint-color-hover);
}

/* A list keeps the prompt dashed: the area is still where more files go.
   :where() holds this at has-file's weight, so the focus, error and disabled
   rules below still win over it (at full weight it outranked all three). */
.dk-component-dropzone:where(:has(.dk-component-dropzone__files))[data-has-file] .dk-component-dropzone__area:where(:not(:hover)) {
  --_dz-surface: var(--dk-component-dropzone-surface);
  --_dz-border: var(--dk-component-dropzone-border);
  --_dz-border-style: dashed;
  --dk-dashed-border-pattern: initial;
  --_dz-icon: var(--dk-component-dropzone-icon-color);
  --_dz-title: var(--dk-component-dropzone-title-color);
  --_dz-hint: var(--dk-component-dropzone-hint-color);
}
.dk-component-dropzone[data-dragover] .dk-component-dropzone__area { --_dz-border-style: dashed; --dk-dashed-border-pattern: initial; }
@media (hover: hover) {
  .dk-component-dropzone:where(:has(.dk-component-dropzone__files)) .dk-component-dropzone__area:hover { --_dz-border-style: dashed; --dk-dashed-border-pattern: initial; }
}

/* Single file: the runtime's name and size spans stand in for the prompt. */
.dk-component-dropzone__title[data-runtime],
.dk-component-dropzone__hint[data-runtime] { display: none; }
.dk-component-dropzone[data-has-file] .dk-component-dropzone__title[data-runtime],
.dk-component-dropzone[data-has-file] .dk-component-dropzone__hint[data-runtime] { display: inline; }
.dk-component-dropzone[data-has-file] .dk-component-dropzone__text:has(> [data-runtime]) > :not([data-runtime]) { display: none; }

/* ── Keyboard focus: the field ring on the area ── */
.dk-component-dropzone__area:has(.dk-component-dropzone__input:focus-visible),
.dk-component-dropzone[data-pseudo-class="focus"] .dk-component-dropzone__area {
  --_dz-border: var(--dk-component-dropzone-focus-border);
  box-shadow: 0 0 0 var(--dk-component-dropzone-focus-ring-width) var(--dk-component-dropzone-focus-ring);
}

/* ── Error: aria-invalid on the input, set by the runtime or by the page ── */
.dk-component-dropzone:has(.dk-component-dropzone__input[aria-invalid="true"]) .dk-component-dropzone__area {
  --_dz-border: var(--dk-component-dropzone-border-error);
}

/* ── Disabled: input:disabled. Last, so it wins over hover and has-file. ── */
.dk-component-dropzone:has(.dk-component-dropzone__input:disabled) .dk-component-dropzone__area {
  --_dz-surface: var(--dk-component-dropzone-surface-disabled);
  --_dz-border: var(--dk-component-dropzone-border-disabled);
  --_dz-icon: var(--dk-component-dropzone-icon-disabled);
  --_dz-title: var(--dk-component-dropzone-title-disabled);
  --_dz-hint: var(--dk-component-dropzone-hint-disabled);
  cursor: not-allowed; transform: none;
}
.dk-component-dropzone:has(.dk-component-dropzone__input:disabled) .dk-component-dropzone__clear,
.dk-component-dropzone:has(.dk-component-dropzone__input:disabled) .dk-component-dropzone__file-remove { display: none; }

/* ── Clear (single file): top right in stacked, end of the row in compact.
   It writes Icon button's slots rather than its properties, which is what
   the --_ib-* layer is for: the state rules it would otherwise need lose to
   Icon button's own at higher specificity (measured once, hovered grey). ── */
.dk-component-dropzone__clear {
  --_ib-bg: transparent;
  --_ib-bg-hover: var(--dk-surface-primary-subtle-hover);
  --_ib-bg-active: var(--dk-surface-primary-subtle-hover);
  --_ib-icon: var(--dk-icon-primary-default);
  --_ib-icon-hover: var(--dk-icon-primary-hover);
  --_ib-ring: var(--dk-border-field-focus-ring);
  position: absolute; inset-block-start: var(--dk-component-dropzone-clear-inset); inset-inline-end: var(--dk-component-dropzone-clear-inset);
  z-index: 1; display: none;
}
.dk-component-dropzone[data-has-file] .dk-component-dropzone__clear { display: grid; }
.dk-component-dropzone[data-layout="compact"] .dk-component-dropzone__clear { position: static; margin-inline-start: auto; flex: none; }

/* ── The file list (multiple) ── */
.dk-component-dropzone__files {
  display: grid; gap: var(--dk-component-dropzone-files-gap);
  margin: 0; padding: 0; list-style: none;
}
.dk-component-dropzone__files[hidden] { display: none; }
.dk-component-dropzone__file {
  display: flex; align-items: center; gap: var(--dk-component-dropzone-file-gap); min-width: 0;
  padding: var(--dk-component-dropzone-file-padding-y) var(--dk-component-dropzone-file-padding-y) var(--dk-component-dropzone-file-padding-y) var(--dk-component-dropzone-file-padding-x);
  border: var(--dk-component-dropzone-file-border-width) solid var(--dk-component-dropzone-file-border);
  border-radius: var(--dk-component-dropzone-file-radius);
  background: var(--dk-component-dropzone-file-surface);
  font-family: var(--dk-font-family-primary);
  font-size: var(--dk-font-body-sm-text-size); line-height: var(--dk-font-body-sm-line-height);
}
.dk-component-dropzone__file-icon { display: inline-flex; flex: none; color: var(--dk-component-dropzone-file-icon-color); }
.dk-component-dropzone__file-icon svg { inline-size: var(--dk-component-dropzone-file-icon-size); block-size: var(--dk-component-dropzone-file-icon-size); }
.dk-component-dropzone__file-name {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: var(--dk-component-dropzone-file-name-font-weight); color: var(--dk-component-dropzone-file-name-color);
}
.dk-component-dropzone__file-remove {
  --_ib-bg: transparent;
  --_ib-bg-hover: var(--dk-surface-neutral-subtle-hover);
  --_ib-bg-active: var(--dk-surface-neutral-subtle-active);
  --_ib-icon: var(--dk-icon-neutral-default);
  --_ib-icon-hover: var(--dk-icon-neutral-hover);
  --_ib-ring: var(--dk-border-field-focus-ring);
  flex: none;
}
.dk-component-dropzone__file-size { flex: none; color: var(--dk-component-dropzone-file-size-color); font-variant-numeric: tabular-nums; }

/* ── Caption and error. margin: 0 because they are <p> (the UA margin adds to the gap). ── */
.dk-component-dropzone__caption,
.dk-component-dropzone__error {
  margin: 0;
  font-family: var(--dk-font-family-primary);
  font-size: var(--dk-component-dropzone-caption-font-size);
  line-height: var(--dk-component-dropzone-caption-line-height);
  color: var(--dk-text-neutral-default);
}
.dk-component-dropzone__error { color: var(--dk-component-dropzone-error-color); }
.dk-component-dropzone__error[hidden] { display: none; }

/* The announcers: read, never seen. */
.dk-component-dropzone__status {
  position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ═════════════════════════════════════ drift-kit:layer components/toast/styles.css ═════════════════════════════════════ */
/* ── Toast ──────────────────────────────────────────────────────────────────
   div.dk-component-toast-region[data-placement]           (made by show())
     div.dk-component-toast[data-status][data-variant][data-counter][data-state][data-paused]
       div.dk-component-toast__panel
         .dk-component-feedback-badge (default) | span.dk-component-toast__icon (compact)
         div.dk-component-toast__text > p.__title, p.__description
         button.dk-component-icon-button.dk-component-toast__close

   A toast ON ITS OWN renders still and visible, which is what the docs and a
   custom container want. Only a toast inside a region animates: in from the
   region's edge on insertion, out the same way on data-state="leaving".
   The DEFAULT card is a ring: the toast's background is the border colour
   and the panel sits inset by the ring width, which is where the countdown
   bars (::before and ::after) are drawn. ──

   Purpose: A message that arrives, says one thing and goes: a card with a
     badge, a title and a description, or a compact one-liner.

   Anatomy:
     div.dk-component-toast[data-status][data-variant="compact"]?
       div.__panel
         div.dk-component-feedback-badge?
         div.__text > p.__title + p.__description?
         button.dk-component-icon-button.__close?

     No role on the toast: it is not a live region. show() writes its words
     into a polite or assertive announcer a beat after it appears, so the
     close button is never read as part of the message.
   */
@keyframes dk-component-toast-countdown-h { 0% { width: 0; } 100% { width: calc(100% - var(--dk-component-toast-ring-width)); } }
@keyframes dk-component-toast-countdown-h-full { 0% { width: 0; } 100% { width: 100%; } }
@keyframes dk-component-toast-countdown-v { 0% { height: var(--dk-component-toast-ring-width); } 100% { height: calc(100% - var(--dk-component-toast-ring-width)); } }
@keyframes dk-component-toast-countdown-v-full { 0% { height: var(--dk-component-toast-ring-width); } 100% { height: 100%; } }
@keyframes dk-component-toast-in {
  from { opacity: 0; transform: translate(calc(var(--_toast-from-x) * var(--_toast-slide)), calc(var(--_toast-from-y) * var(--_toast-slide))); }
  to { opacity: 1; transform: none; }
}
@keyframes dk-component-toast-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translate(calc(var(--_toast-from-x) * var(--_toast-slide)), calc(var(--_toast-from-y) * var(--_toast-slide))); }
}

/* ── Regions: one per placement. --_toast-from-x/-y are the DIRECTION a toast
   enters from, as a multiplier of its own slide distance, so the card and the
   one-liner travel different distances from the same edge. Top regions stack
   column-reverse so the newest, appended last, sits nearest the edge. ── */
.dk-component-toast-region {
  position: fixed;
  z-index: var(--dk-component-toast-z-index);
  display: flex;
  gap: var(--dk-component-toast-gap);
  padding: var(--dk-component-toast-region-offset);
  box-sizing: border-box;
  max-width: 100%;
  pointer-events: none;
}
.dk-component-toast-region[data-placement="top-left"] { top: 0; left: 0; flex-direction: column-reverse; align-items: flex-start; --_toast-from-x: -1; --_toast-from-y: 0; }
.dk-component-toast-region[data-placement="top-center"] { top: 0; left: 0; right: 0; flex-direction: column-reverse; align-items: center; --_toast-from-x: 0; --_toast-from-y: -1; }
.dk-component-toast-region[data-placement="top-right"] { top: 0; right: 0; flex-direction: column-reverse; align-items: flex-end; --_toast-from-x: 1; --_toast-from-y: 0; }
.dk-component-toast-region[data-placement="bottom-left"] { bottom: 0; left: 0; flex-direction: column; align-items: flex-start; --_toast-from-x: -1; --_toast-from-y: 0; }
.dk-component-toast-region[data-placement="bottom-center"] { bottom: 0; left: 0; right: 0; flex-direction: column; align-items: center; --_toast-from-x: 0; --_toast-from-y: 1; }
.dk-component-toast-region[data-placement="bottom-right"] { bottom: 0; right: 0; flex-direction: column; align-items: flex-end; --_toast-from-x: 1; --_toast-from-y: 0; }

/* A PHONE HAS NO ROOM FOR A CORNER: a 450px card squeezed against one edge of
   a 390px screen. Corners move to the centre of their OWN edge, so a top toast
   stays at the top and enters from above rather than jumping to the bottom.
   The kit's one phone breakpoint (kit/breakpoint.css); it was 640px. */
@media (max-width: 768px) {
  .dk-component-toast-region { padding: var(--dk-component-toast-region-offset-small); width: 100%; }
  .dk-component-toast-region[data-placement^="top-"] { left: 0; right: 0; transform: none; align-items: center; --_toast-from-x: 0; --_toast-from-y: -1; }
  .dk-component-toast-region[data-placement^="bottom-"] { left: 0; right: 0; transform: none; align-items: center; --_toast-from-x: 0; --_toast-from-y: 1; }
}

/* ── The toast ── */
.dk-component-toast {
  --_toast-slide: var(--dk-component-toast-slide);
  --_toast-enter-duration: var(--dk-component-toast-enter-duration);
  --_toast-exit-duration: var(--dk-component-toast-exit-duration);
  --_toast-enter-easing: var(--dk-component-toast-enter-easing);
  --_toast-countdown: var(--dk-border-primary-default);
  --_toast-icon-bg: var(--dk-surface-primary-subtle);
  --_toast-icon-fg: var(--dk-icon-primary-default);
  position: relative;
  display: flex;
  width: 100%;
  max-width: var(--dk-component-toast-max-width);
  box-sizing: border-box;
  padding: var(--dk-component-toast-ring-width);
  background: var(--dk-component-toast-ring);
  border-radius: var(--dk-component-toast-radius);
  box-shadow: var(--dk-component-toast-shadow);
  overflow: hidden;
  pointer-events: auto;
}
.dk-component-toast[data-status="neutral"] { --_toast-countdown: var(--dk-border-neutral-default); --_toast-icon-bg: var(--dk-surface-neutral-subtle); --_toast-icon-fg: var(--dk-icon-neutral-default); }
.dk-component-toast[data-status="success"] { --_toast-countdown: var(--dk-border-success-default); --_toast-icon-bg: var(--dk-surface-success-subtle); --_toast-icon-fg: var(--dk-icon-success-default); }
.dk-component-toast[data-status="error"] { --_toast-countdown: var(--dk-border-error-default); --_toast-icon-bg: var(--dk-surface-error-subtle); --_toast-icon-fg: var(--dk-icon-error-default); }
.dk-component-toast[data-status="warning"] { --_toast-countdown: var(--dk-border-warning-default); --_toast-icon-bg: var(--dk-surface-warning-subtle); --_toast-icon-fg: var(--dk-icon-warning-default); }
.dk-component-toast[data-status="information"] { --_toast-countdown: var(--dk-border-information-default); --_toast-icon-bg: var(--dk-surface-information-subtle); --_toast-icon-fg: var(--dk-icon-information-default); }
.dk-component-toast[data-status="primary"] { --_toast-countdown: var(--dk-border-primary-default); }

.dk-component-toast-region .dk-component-toast {
  width: min(var(--dk-component-toast-max-width), calc(100vw - 2 * var(--dk-component-toast-region-offset)));
  animation: dk-component-toast-in var(--_toast-enter-duration) var(--_toast-enter-easing) both;
}
.dk-component-toast-region .dk-component-toast[data-state="leaving"] {
  animation: dk-component-toast-out var(--_toast-exit-duration) var(--dk-component-toast-exit-easing) forwards;
  pointer-events: none;
}

.dk-component-toast__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 0 0;
  align-items: center;
  gap: var(--dk-component-toast-content-gap);
  min-width: 0;
  padding: var(--dk-component-toast-padding);
  border-radius: calc(var(--dk-component-toast-radius) - var(--dk-component-toast-ring-width));
  background: var(--dk-component-toast-surface);
}
.dk-component-toast__text { display: flex; flex: 1; flex-direction: column; align-items: flex-start; min-width: 0; }
.dk-component-toast__title,
.dk-component-toast__description {
  margin: 0;
  font-family: var(--dk-font-family-primary);
  font-size: var(--dk-component-toast-title-font-size);
  line-height: var(--dk-component-toast-title-line-height);
  overflow-wrap: anywhere;
}
.dk-component-toast__title { font-weight: var(--dk-component-toast-title-font-weight); color: var(--dk-component-toast-title-color); }
.dk-component-toast__description { font-weight: var(--dk-primitive-font-weight-regular); color: var(--dk-component-toast-description-color); }
.dk-component-toast__close { flex: none; }
.dk-component-toast .dk-component-feedback-badge { flex: none; }

/* ── Compact: DriveIQ's one-liner. No ring and no countdown: a bordered raised
   panel, a tinted glyph circle, one line of copy in the page's own colour. ── */
.dk-component-toast[data-variant="compact"] {
  --_toast-slide: var(--dk-component-toast-compact-slide);
  --_toast-enter-duration: var(--dk-component-toast-compact-enter-duration);
  --_toast-exit-duration: var(--dk-component-toast-compact-exit-duration);
  --_toast-enter-easing: var(--dk-component-toast-compact-enter-easing);
  max-width: var(--dk-component-toast-compact-max-width);
  padding: 0;
  background: none;
}
.dk-component-toast-region .dk-component-toast[data-variant="compact"] { width: auto; }
.dk-component-toast[data-variant="compact"] .dk-component-toast__panel {
  gap: var(--dk-component-toast-compact-gap);
  padding: var(--dk-component-toast-compact-padding-block) var(--dk-component-toast-compact-padding-end) var(--dk-component-toast-compact-padding-block) var(--dk-component-toast-compact-padding-start);
  border: var(--dk-component-toast-compact-border-width) solid var(--dk-component-toast-ring);
  border-radius: var(--dk-component-toast-radius);
  background: var(--dk-component-toast-compact-surface);
}
.dk-component-toast[data-variant="compact"] .dk-component-toast__close { margin-inline-start: var(--dk-component-toast-compact-close-gap); }
/* No close button: the right edge takes the left edge's padding, since the
   tighter end padding only made sense with the button's own box beside it. */
.dk-component-toast[data-variant="compact"] .dk-component-toast__panel:not(:has(.dk-component-toast__close)) {
  padding-inline-end: var(--dk-component-toast-compact-padding-start);
}
.dk-component-toast[data-variant="compact"] .dk-component-toast__title,
.dk-component-toast[data-variant="compact"] .dk-component-toast__description {
  font-weight: var(--dk-primitive-font-weight-regular);
  color: var(--dk-component-toast-title-color);
}
.dk-component-toast__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--dk-component-toast-compact-icon-size);
  height: var(--dk-component-toast-compact-icon-size);
  border-radius: 50%;
  background: var(--_toast-icon-bg);
  color: var(--_toast-icon-fg);
}
.dk-component-toast__icon > svg,
.dk-component-toast__icon > .dk-component-icon { width: var(--dk-component-toast-compact-glyph-size); height: var(--dk-component-toast-compact-glyph-size); }

/* ── Countdown: two bars trace the ring, top then left, bottom then right,
   CL's construction. The legs' durations are set per toast by show() from its
   duration; hover or focus pauses them with the timer. ── */
.dk-component-toast::before,
.dk-component-toast::after {
  content: "";
  position: absolute;
  width: 0;
  height: var(--dk-component-toast-ring-width);
  background-color: var(--_toast-countdown);
  opacity: 0;
}
.dk-component-toast::before { top: 0; right: 0; transform: translateX(calc(var(--dk-component-toast-ring-width) * -8)); }
.dk-component-toast::after { bottom: 0; left: 0; }
.dk-component-toast[data-counter]:not([data-variant="compact"])::before {
  opacity: 1;
  animation: dk-component-toast-countdown-h var(--_toast-leg-long, 1.5s) linear forwards 0s,
             dk-component-toast-countdown-v var(--_toast-leg-short, 0.5s) linear forwards var(--_toast-leg-long, 1.5s);
}
.dk-component-toast[data-counter]:not([data-variant="compact"])::after {
  opacity: 1;
  animation: dk-component-toast-countdown-h-full var(--_toast-leg-long, 1.5s) linear forwards calc(var(--_toast-leg-long, 1.5s) + var(--_toast-leg-short, 0.5s)),
             dk-component-toast-countdown-v-full var(--_toast-leg-short, 0.5s) linear forwards calc(2 * var(--_toast-leg-long, 1.5s) + var(--_toast-leg-short, 0.5s));
}
/* At the counter rule's own specificity: that rule's animation shorthand
   resets play-state to running, so a lighter [data-paused] rule lost and the
   ring kept closing while the timer waited. */
.dk-component-toast[data-counter][data-paused]:not([data-variant="compact"])::before,
.dk-component-toast[data-counter][data-paused]:not([data-variant="compact"])::after { animation-play-state: paused; }

/* The announcers: one polite, one assertive, made once and kept, which is
   what a screen reader needs to hear text change. A toast inserted already
   filled was a live region it had never met. Visually hidden. */
.dk-component-toast-announcer {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Generated by scripts/build.js: this component's root colours, again on
   each part that resets a status tone, so they resolve against the reset. */
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-toast .dk-component-toast__panel,
.dk-component-toast:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-toast__panel {
  --_toast-countdown: var(--dk-border-primary-default);
  --_toast-icon-bg: var(--dk-surface-primary-subtle);
  --_toast-icon-fg: var(--dk-icon-primary-default);
}
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-toast[data-status="neutral"] .dk-component-toast__panel,
.dk-component-toast[data-status="neutral"]:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-toast__panel {
  --_toast-countdown: var(--dk-border-neutral-default);
  --_toast-icon-bg: var(--dk-surface-neutral-subtle);
  --_toast-icon-fg: var(--dk-icon-neutral-default);
}
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-toast[data-status="success"] .dk-component-toast__panel,
.dk-component-toast[data-status="success"]:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-toast__panel {
  --_toast-countdown: var(--dk-border-success-default);
  --_toast-icon-bg: var(--dk-surface-success-subtle);
  --_toast-icon-fg: var(--dk-icon-success-default);
}
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-toast[data-status="error"] .dk-component-toast__panel,
.dk-component-toast[data-status="error"]:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-toast__panel {
  --_toast-countdown: var(--dk-border-error-default);
  --_toast-icon-bg: var(--dk-surface-error-subtle);
  --_toast-icon-fg: var(--dk-icon-error-default);
}
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-toast[data-status="warning"] .dk-component-toast__panel,
.dk-component-toast[data-status="warning"]:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-toast__panel {
  --_toast-countdown: var(--dk-border-warning-default);
  --_toast-icon-bg: var(--dk-surface-warning-subtle);
  --_toast-icon-fg: var(--dk-icon-warning-default);
}
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-toast[data-status="information"] .dk-component-toast__panel,
.dk-component-toast[data-status="information"]:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-toast__panel {
  --_toast-countdown: var(--dk-border-information-default);
  --_toast-icon-bg: var(--dk-surface-information-subtle);
  --_toast-icon-fg: var(--dk-icon-information-default);
}
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-toast[data-status="primary"] .dk-component-toast__panel,
.dk-component-toast[data-status="primary"]:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-toast__panel {
  --_toast-countdown: var(--dk-border-primary-default);
}

/* ══════════════════════════════════════ drift-kit:layer components/tabs/styles.css ══════════════════════════════════════ */
/* ── Tabs ───────────────────────────────────────────────────────────────────
   A strip of tabs that switch between panels of one page.

   Markup:
     <div class="dk-component-tabs" aria-label="View" data-size data-full-width data-activation="manual"?>
       <button type="button" class="dk-component-tabs__tab" aria-selected="true" aria-controls="p-overview" id="t-overview" data-value="overview">
         <span class="dk-component-tabs__icon">svg</span>      optional
         <span class="dk-component-tabs__label">Overview</span>
         <span class="dk-component-tabs__count">3</span>         optional
       </button>
       …
     </div>
     <div id="p-overview" role="tabpanel" aria-labelledby="t-overview">…</div>
   The runtime writes role="tablist", role="tab", the roving tabindex, the
   panels' hidden, and the __indicator (the bar).

   THE STRIP SCROLLS when its tabs do not fit, sideways, with no scrollbar, and
   the selected tab is scrolled into view. The hairline is an inset shadow, not
   a border, so the bar (at the bottom of the same box) lies on it.

   --dk-tabs-inset (unset: none) pads the strip inside at both ends and sets
   the same scroll padding, for a strip the page bleeds to its edges: the
   first tab sits at the page's gutter, the hairline still runs the whole
   strip, and a tab scrolled into view stops at the gutter, not the edge.
   It inherits, so set it on the strip or on what holds it. ──

   Purpose: A strip of tabs that switch between panels of one page, on a
     hairline with a bar that slides to the selected tab.

   Anatomy:
     div.dk-component-tabs[role="tablist"][data-size]?   (style: --dk-tabs-inset?)
       button.__tab[role="tab"][data-value][aria-selected]
         span.__icon?
         span.__label
   */
.dk-component-tabs {
  --_tabs-height: var(--dk-component-tabs-height);
  --_tabs-pad: var(--dk-component-tabs-padding-inline);
  --_tabs-font-size: var(--dk-component-tabs-font-size);
  --_tabs-line-height: var(--dk-component-tabs-line-height);
  --_tabs-icon: var(--dk-component-tabs-icon-size);
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--dk-component-tabs-gap);
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  padding-inline: var(--dk-tabs-inset, var(--dk-primitive-scale-0));
  scroll-padding-inline: var(--dk-tabs-inset, var(--dk-primitive-scale-0));
  scrollbar-width: none;
  box-shadow: inset 0 calc(var(--dk-component-tabs-hairline-width) * -1) 0 var(--dk-component-tabs-hairline);
  font-family: var(--dk-component-tabs-font-family);
}
.dk-component-tabs::-webkit-scrollbar { width: 0; height: 0; }
.dk-component-tabs[hidden] { display: none; }
.dk-component-tabs[data-size="small"] {
  --_tabs-height: var(--dk-component-tabs-small-height);
  --_tabs-pad: var(--dk-component-tabs-small-padding-inline);
  --_tabs-font-size: var(--dk-component-tabs-small-font-size);
  --_tabs-line-height: var(--dk-component-tabs-small-line-height);
  --_tabs-icon: var(--dk-component-tabs-small-icon-size);
}
.dk-component-tabs[data-size="large"] {
  --_tabs-height: var(--dk-component-tabs-large-height);
  --_tabs-pad: var(--dk-component-tabs-large-padding-inline);
  --_tabs-font-size: var(--dk-component-tabs-large-font-size);
  --_tabs-line-height: var(--dk-component-tabs-large-line-height);
  --_tabs-icon: var(--dk-component-tabs-large-icon-size);
}

/* ── A tab ── */
.dk-component-tabs__tab {
  position: relative;
  z-index: 1;
  flex: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--dk-component-tabs-icon-gap);
  box-sizing: border-box;
  height: var(--_tabs-height);
  margin: 0;
  padding: 0 var(--_tabs-pad);
  border: 0;
  border-radius: var(--dk-component-tabs-radius);
  background: transparent;
  font: inherit;
  font-size: var(--_tabs-font-size);
  line-height: var(--_tabs-line-height);
  font-weight: var(--dk-component-tabs-font-weight);
  color: var(--dk-component-tabs-color);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dk-component-tabs-transition-duration) var(--dk-component-tabs-easing),
              background-color var(--dk-component-tabs-transition-duration) var(--dk-component-tabs-easing);
}
.dk-component-tabs__tab[hidden] { display: none; }
/* The hover line: a preview of where the bar would go, faint, growing from
   the tab's middle. */
.dk-component-tabs__tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--dk-component-tabs-underline-thickness);
  border-radius: var(--dk-component-tabs-underline-thickness);
  background: var(--dk-component-tabs-hover-line);
  opacity: 0;
  transform: scaleX(var(--dk-component-tabs-hover-line-from));
  transition: opacity var(--dk-component-tabs-transition-duration) var(--dk-component-tabs-easing),
              transform var(--dk-component-tabs-transition-duration) var(--dk-component-tabs-easing);
  pointer-events: none;
}
@media (hover: hover) {
  .dk-component-tabs__tab:not([aria-selected="true"]):not(:disabled):hover::after { opacity: 1; transform: none; }
}
/* Press: the words and the glyph give a touch, the tab and the strip stay. */
.dk-component-tabs__tab > :is(.dk-component-tabs__icon, .dk-component-tabs__label, .dk-component-tabs__count) {
  transition: transform var(--dk-component-tabs-press-duration) var(--dk-component-tabs-easing);
}
.dk-component-tabs__tab:active:not(:disabled) > :is(.dk-component-tabs__icon, .dk-component-tabs__label, .dk-component-tabs__count) {
  transform: scale(var(--dk-component-tabs-press-scale));
}
@media (hover: hover) {
  .dk-component-tabs__tab:not([aria-selected="true"]):not(:disabled):hover { color: var(--dk-component-tabs-color-hover); }
}
/* and a rung further on a press (16 Oct, the foundation's word ramp) */
.dk-component-tabs__tab:not([aria-selected="true"]):not(:disabled):not([aria-disabled="true"]):active { color: var(--dk-component-tabs-color-active); }
.dk-component-tabs__tab[aria-selected="true"] {
  color: var(--dk-component-tabs-selected-color);
  font-weight: var(--dk-component-tabs-selected-font-weight);
}
.dk-component-tabs__tab:disabled { color: var(--dk-component-tabs-color-disabled); cursor: not-allowed; }
/* Inside the tab, so the strip's own overflow never clips it. */
.dk-component-tabs__tab:focus-visible {
  outline: var(--dk-component-tabs-focus-ring-width) solid var(--dk-component-tabs-focus-ring);
  outline-offset: calc(var(--dk-component-tabs-focus-ring-width) * -1);
}
.dk-component-tabs__icon { display: inline-flex; flex: none; }
.dk-component-tabs__icon > :is(svg, i, img, [data-size]) { display: block; width: var(--_tabs-icon); height: var(--_tabs-icon); }
.dk-component-tabs__count {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  min-width: var(--dk-component-tabs-count-size);
  height: var(--dk-component-tabs-count-size);
  padding: 0 var(--dk-spacing-1-5);
  border-radius: var(--dk-component-tabs-count-radius);
  background: var(--dk-component-tabs-count-surface);
  color: var(--dk-component-tabs-count-color);
  font-size: var(--dk-component-tabs-count-font-size);
  font-weight: var(--dk-component-tabs-count-font-weight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dk-component-tabs__tab[aria-selected="true"] .dk-component-tabs__count {
  background: var(--dk-component-tabs-count-selected-surface);
  color: var(--dk-component-tabs-count-selected-color);
}

/* ── The indicator: the bar under the selected tab, sliding on its LEFT and
   WIDTH (the runtime writes both), lying on the hairline ── */
.dk-component-tabs__indicator {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 100%;
  bottom: 0;
  height: var(--dk-component-tabs-underline-thickness);
  border-radius: var(--dk-component-tabs-underline-thickness);
  background: var(--dk-component-tabs-underline-surface);
  pointer-events: none;
  /* BY ITS TWO EDGES, so they can travel at their own times: moving right
     the right edge leads and the left lags; moving left, the reverse. The
     runtime says which (data-direction). */
  transition: left var(--dk-component-tabs-slide-duration) var(--dk-component-tabs-slide-easing),
              right var(--dk-component-tabs-slide-duration) var(--dk-component-tabs-slide-easing);
}
.dk-component-tabs__indicator[data-direction="forward"] { transition-delay: var(--dk-component-tabs-slide-lag), 0s; }
.dk-component-tabs__indicator[data-direction="back"] { transition-delay: 0s, var(--dk-component-tabs-slide-lag); }
.dk-component-tabs__indicator[hidden] { display: none; }

/* ── Full width: the tabs share the strip equally ── */
.dk-component-tabs[data-full-width] .dk-component-tabs__tab {
  flex: 1 1 0;
  justify-content: center;
  min-width: max-content;
}

/* ════════════════════════════════════ drift-kit:layer components/glider/styles.css ════════════════════════════════════ */
/* ── Glider ───────────────────────────────────────────────────────
   One value from a few options side by side, or several: a raised frame with
   one primary pill sliding under the chosen option. The kit's Tabs until
   12 Oct; Tabs is now the docs' underline tabs, which switch panels.

   Markup:
     <div class="dk-component-glider" aria-label="Period" data-variant="plain|inset|ghost"? data-size data-full-width data-multiple data-overflow="scroll"?>
       <button type="button" class="dk-component-glider__option" data-value="week">
         <span class="dk-component-glider__icon">svg</span>        optional
         <span class="dk-component-glider__label">Week</span>      optional when it has an aria-label
         <span class="dk-component-glider__count">3</span>         optional
       </button>
       …
     </div>
   The runtime writes the rest: role="radiogroup" and radios with aria-checked
   (one chosen), or with data-multiple role="group" and toggle buttons with
   aria-pressed (any number); the __indicator; the roving tabindex.

   THE PILL is a separate absolutely-positioned element that moves by its LEFT
   and RIGHT edges, not its width or a transform, so its border stays crisp at
   every frame of the slide. Multiple has no single pill: each pressed option
   paints its own. ──

   Purpose: One value from a few options side by side, or several: a raised
     frame with a primary pill that slides to the choice.

   Anatomy:
     div.dk-component-glider[data-variant="raised|plain|inset|ghost"]?[data-multiple]?[data-overflow="scroll"]?[role="radiogroup"]
       button.__option[data-value][aria-checked]
         span.__icon?
         span.__label
         span.__count?
   */
.dk-component-glider {
  position: relative;
  display: inline-flex;
  /* BORDER-BOX, and it is a fix rather than a preference: under content-box the
     height is the space INSIDE the padding and the border, so the rung that
     said 44 rendered 54 and a control beside a 44px field sat ten pixels
     taller than it. Measured 46 / 54 / 62 against 36 / 44 / 52. */
  box-sizing: border-box;
  align-self: flex-start;
  gap: var(--dk-component-glider-gap);
  /* THE RUNG PLUS WHAT A THICKER BORDER TIER ADDED (8 Nov, Julio). The rung
     is the height at the thin hairline, where it matches Input, Select and
     Button. Two edges stack inside it, the frame's and each option's, so a
     thicker tier grows the frame outward by both on both sides rather than
     taking them from the label: held at the rung, a medium option at bold
     was 4px tall around a 20px line. Button and Input keep the rung at every
     tier because their one edge comes out of padding their words never
     needed; a Glider has no such padding to spend. */
  --_seg-grow: calc(4 * (var(--dk-component-glider-border-width) - var(--dk-component-glider-border-width-base)));
  height: calc(var(--dk-component-glider-height) + var(--_seg-grow));
  padding: var(--dk-component-glider-inset);
  background: var(--dk-component-glider-surface);
  border: var(--dk-component-glider-border-width) solid var(--dk-component-glider-border);
  border-radius: var(--dk-component-glider-radius);
  box-shadow: var(--dk-component-glider-shadow);
  /* The rung's own type, set once here so the options and the sizes agree without
     each rule naming a size. */
  --_seg-font-size: var(--dk-component-glider-font-size);
  --_seg-line-height: var(--dk-component-glider-line-height);
  --_seg-padding-inline: var(--dk-component-glider-padding-inline);
  --_seg-icon-size: var(--dk-component-glider-icon-size);
}
.dk-component-glider[data-size="small"] {
  height: calc(var(--dk-component-glider-small-height) + var(--_seg-grow));
  --_seg-font-size: var(--dk-component-glider-small-font-size);
  --_seg-line-height: var(--dk-component-glider-small-line-height);
  --_seg-padding-inline: var(--dk-component-glider-small-padding-inline);
  --_seg-icon-size: var(--dk-component-glider-small-icon-size);
}
.dk-component-glider[data-size="large"] {
  height: calc(var(--dk-component-glider-large-height) + var(--_seg-grow));
  --_seg-font-size: var(--dk-component-glider-large-font-size);
  --_seg-line-height: var(--dk-component-glider-large-line-height);
  --_seg-padding-inline: var(--dk-component-glider-large-padding-inline);
  --_seg-icon-size: var(--dk-component-glider-large-icon-size);
}

.dk-component-glider__indicator {
  /* top and bottom are the container's own inset, so the pill matches the
     option's height exactly and the air around it is the same on all four sides. */
  position: absolute;
  top: var(--dk-component-glider-inset);
  bottom: var(--dk-component-glider-inset);
  left: 0; right: 0;
  z-index: 0;
  background: var(--dk-component-glider-indicator-surface);
  border: var(--dk-component-glider-border-width) solid var(--dk-component-glider-indicator-border);
  border-radius: var(--dk-component-glider-indicator-radius);
  pointer-events: none;
  /* A hint to the compositor: these two edges move on every interaction. */
  will-change: left, right;
  transition: left var(--dk-component-glider-slide-duration) var(--dk-component-glider-transition-easing),
              right var(--dk-component-glider-slide-duration) var(--dk-component-glider-transition-easing),
              background-color var(--dk-component-glider-transition-duration) var(--dk-component-glider-transition-easing),
              border-color var(--dk-component-glider-transition-duration) var(--dk-component-glider-transition-easing);
}
/* ── Plain: not raised, no shadow, a stronger edge ── */
.dk-component-glider[data-variant="plain"] {
  box-shadow: none;
  border-color: var(--dk-component-glider-plain-border);
}
.dk-component-glider[data-variant="inset"] {
  background: var(--dk-component-glider-inset-surface);
  border-color: var(--dk-component-glider-inset-border);
  box-shadow: none;
}
:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-glider[data-variant="inset"] .dk-component-glider__option,
.dk-component-glider[data-variant="inset"]:is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) .dk-component-glider__option {
  --dk-component-glider-color: var(--dk-component-glider-inset-toned-color);
  --dk-component-glider-color-hover: var(--dk-component-glider-inset-toned-color);
}
.dk-component-glider[data-variant="inset"] .dk-component-glider__option {
  --dk-component-glider-surface-hover: var(--dk-component-glider-inset-surface-hover);
  --dk-component-glider-surface-active: var(--dk-component-glider-inset-surface-active);
  --dk-component-glider-border-hover: var(--dk-component-glider-inset-border);
  --dk-component-glider-border-active: var(--dk-component-glider-inset-border);
}
.dk-component-glider[data-variant="ghost"] {
  background: var(--dk-component-glider-ghost-surface);
  border-color: var(--dk-component-glider-ghost-border);
  box-shadow: none;
}
.dk-component-glider[data-variant="ghost"] .dk-component-glider__option {
  --dk-component-glider-surface-hover: var(--dk-component-glider-ghost-surface-hover);
  --dk-component-glider-surface-active: var(--dk-component-glider-ghost-surface-active);
  --dk-component-glider-border-hover: var(--dk-component-glider-ghost-border);
  --dk-component-glider-border-active: var(--dk-component-glider-ghost-border);
}
/* Moving right the right edge leads and the left lags; moving left, the
   reverse. The runtime says which (data-direction). */
.dk-component-glider__indicator[data-direction="forward"] { transition-delay: var(--dk-component-glider-slide-lag), 0s, 0s, 0s; }
.dk-component-glider__indicator[data-direction="back"] { transition-delay: 0s, var(--dk-component-glider-slide-lag), 0s, 0s; }
/* The pill answers the pointer on the option it is under, because the option
   itself is transparent: without this, hovering the chosen option does nothing
   while every other one lights up. */
@media (hover: hover) {
  .dk-component-glider:has(.dk-component-glider__option[aria-checked="true"]:not(:disabled):hover) .dk-component-glider__indicator {
    background: var(--dk-component-glider-indicator-surface-hover);
    border-color: var(--dk-component-glider-indicator-border-hover);
  }
}
.dk-component-glider:has(.dk-component-glider__option[aria-checked="true"]:not(:disabled):active) .dk-component-glider__indicator {
  background: var(--dk-component-glider-indicator-surface-active);
  border-color: var(--dk-component-glider-indicator-border-active);
}

.dk-component-glider__option {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--dk-component-glider-icon-gap);
  padding: 0 var(--_seg-padding-inline);
  border: var(--dk-component-glider-border-width) solid transparent;
  border-radius: var(--dk-component-glider-indicator-radius);
  background: transparent;
  font-family: var(--dk-component-glider-font-family);
  font-size: var(--_seg-font-size);
  line-height: var(--_seg-line-height);
  font-weight: var(--dk-component-glider-font-weight);
  color: var(--dk-component-glider-color);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dk-component-glider-transition-duration) var(--dk-component-glider-transition-easing),
              border-color var(--dk-component-glider-transition-duration) var(--dk-component-glider-transition-easing),
              color var(--dk-component-glider-transition-duration) var(--dk-component-glider-transition-easing),
              transform var(--dk-component-glider-transition-duration) var(--dk-component-glider-transition-easing);
}
.dk-component-glider__icon { display: inline-flex; flex-shrink: 0; }
.dk-component-glider__icon > :is(svg, i, img) {
  display: block;
  width: var(--_seg-icon-size);
  height: var(--_seg-icon-size);
}

@media (hover: hover) {
  .dk-component-glider__option:not([aria-checked="true"]):not([aria-pressed="true"]):not(:disabled):hover {
    background: var(--dk-component-glider-surface-hover);
    border-color: var(--dk-component-glider-border-hover);
    color: var(--dk-component-glider-color-hover);
  }
}
.dk-component-glider__option:not([aria-checked="true"]):not([aria-pressed="true"]):not(:disabled):active {
  background: var(--dk-component-glider-surface-active);
  border-color: var(--dk-component-glider-border-active);
}
.dk-component-glider__option:is([aria-checked="true"], [aria-pressed="true"]) {
  color: var(--dk-component-glider-selected-color);
}
.dk-component-glider__option:active:not(:disabled) {
  transform: scale(var(--dk-component-glider-active-scale));
}
/* THE FOCUS RING IS ON THE OPTION, not on the frame. Single, with a roving
   tabindex, only one option is in the page's tab order, so the ring lands
   where the arrow keys left it; multiple, every option is its own stop. */
.dk-component-glider__option:focus-visible {
  outline: var(--dk-border-width-50) solid var(--dk-border-field-focus);
  outline-offset: var(--dk-border-width-25);
}
.dk-component-glider__option:disabled {
  color: var(--dk-component-glider-color-disabled);
  cursor: not-allowed;
}
/* A disabled choice: the pill keeps its place on the subtle disabled fill and
   its words take the stronger disabled reading, so what is chosen still shows. */
.dk-component-glider:has(.dk-component-glider__option[aria-checked="true"]:disabled) .dk-component-glider__indicator {
  background: var(--dk-component-glider-indicator-surface-disabled);
  border-color: var(--dk-component-glider-indicator-border-disabled);
}
.dk-component-glider__option:is([aria-checked="true"], [aria-pressed="true"]):disabled {
  color: var(--dk-component-glider-selected-color-disabled);
}

/* ── Multiple: each pressed option wears its own pill ── */
.dk-component-glider[data-multiple] .dk-component-glider__indicator { display: none; }
.dk-component-glider[data-multiple] .dk-component-glider__option[aria-pressed="true"] {
  background: var(--dk-component-glider-indicator-surface);
  border-color: var(--dk-component-glider-indicator-border);
}
@media (hover: hover) {
  .dk-component-glider[data-multiple] .dk-component-glider__option[aria-pressed="true"]:not(:disabled):hover {
    background: var(--dk-component-glider-indicator-surface-hover);
    border-color: var(--dk-component-glider-indicator-border-hover);
  }
}
.dk-component-glider[data-multiple] .dk-component-glider__option[aria-pressed="true"]:not(:disabled):active {
  background: var(--dk-component-glider-indicator-surface-active);
  border-color: var(--dk-component-glider-indicator-border-active);
}
.dk-component-glider[data-multiple] .dk-component-glider__option[aria-pressed="true"]:disabled {
  background: var(--dk-component-glider-indicator-surface-disabled);
  border-color: var(--dk-component-glider-indicator-border-disabled);
}

/* ── An icon alone: square, the glyph centred. It must carry an aria-label. ── */
.dk-component-glider__option:not(:has(.dk-component-glider__label)) {
  aspect-ratio: 1;
  justify-content: center;
  padding: 0;
}

/* ── Full width: the options share the room equally ──
   A grid of equal columns, not flex 1 1 0 (2 Nov): in a box that sizes to its
   content, flex split the total evenly and the longest label was always cut.
   A 1fr grid's content size gives every column the widest option's room, and
   minmax(0, 1fr) still lets the columns shrink, with ellipsis, when the box is
   narrower than that. One row the frame's full inner height, the options
   stretched to it as flex stretched them, so a hovered option's fill is as tall
   as the chosen pill; each option centres its own label, so one taller than
   the frame still overflows evenly. */
.dk-component-glider[data-full-width] {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-rows: 100%;
  width: 100%;
  align-self: stretch;
}
.dk-component-glider[data-full-width] .dk-component-glider__option {
  justify-content: center;
  min-width: 0;
}
.dk-component-glider__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dk-component-glider__count { flex-shrink: 0; font-weight: var(--dk-component-glider-count-font-weight); }
.dk-component-glider[hidden] { display: none; }
/* SCROLLS SIDEWAYS (data-overflow="scroll", 8 Nov 2026): a row of filters
   that may not fit, on a phone above all. The Glider is no wider than its
   container and scrolls inside itself, the options keeping their words
   rather than shrinking to an ellipsis, and the scrollbar is not drawn: a
   row of chips cut at the edge already says there is more. The pill is the
   Glider's child, so it scrolls with the options. */
.dk-component-glider:where([data-overflow="scroll"]) {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.dk-component-glider:where([data-overflow="scroll"])::-webkit-scrollbar { display: none; }
.dk-component-glider:where([data-overflow="scroll"]) > .dk-component-glider__option { flex-shrink: 0; }
/* The scroller clips at its padding box, which the ring's outward reach
   (--dk-border-width-50 + --dk-border-width-25) overruns from the medium
   border width up. So here the ring is drawn inside the option, whole at
   every border width. */
.dk-component-glider:where([data-overflow="scroll"]) > .dk-component-glider__option:focus-visible {
  outline-offset: calc(-1 * var(--dk-border-width-50));
}

/* ══════════════════════════════════ drift-kit:layer components/carousel/styles.css ══════════════════════════════════ */
/* ── Carousel ─────────────────────────────────────────────────────
   Cards side by side that scroll sideways: a centred slider on a phone or
   tablet, a row with a peek of the next card and Previous / Next arrows on
   desktop.

   Markup:
     <div class="dk-component-carousel" data-presentation="slider|row" data-bleed? data-arrow-look="solid|raised-inverse"? data-at-start? data-at-end?>
       <div class="dk-component-carousel__track">
         <div class="dk-component-carousel__item">author content</div>
         ...
       </div>
       <button class="dk-component-icon-button dk-component-carousel__prev" ...>
       <button class="dk-component-icon-button dk-component-carousel__next" ...>
     </div>
   The runtime writes data-presentation, data-at-start, data-at-end and the
   inline --_bleed-l / --_bleed-r (how far the column sits from the page's
   edge); the card's own hover is the page's, only the press is here,
   unless data-item-hover asks for one (below).

   Purpose: Browse a short run of cards sideways. Two presentations: a
     slider on a phone or tablet (a centred, optionally looping run whose
     off-centre cards shrink and fade) and a row on a desktop (equal cards,
     the next one peeking, an optional bleed to the scrolling ancestor with
     eased edge fades, arrows that step one card). The card's content and
     hover are the page's; the item press and the row's snap pause are the
     Carousel's.

   Anatomy:
     div.dk-component-carousel[data-presentation="slider|row|viewer"]?[data-variant="viewer"]?[data-phone]?[data-loop]?[data-start]?[data-bleed]?[data-lift]?[data-device]?[data-arrow-look="solid|raised-inverse|plain"]?[data-item-hover="showcase"]?
       (data-presentation follows the nearest data-device when there is one,
       else the kit's phone breakpoint, and the runtime owns it; data-start is
       the real item's index; data-lift is a selector inside an item whose
       centre stays level as the item shrinks, e.g.
       data-lift=".dk-component-vehicle" for a row of Vehicle cards; data-bleed runs the track out
       to the nearest scrolling ancestor's edges, else the viewport's, and
       data-bleed="<selector>" to root.closest(selector)'s, e.g. the page's
       body beside a rail when the document scrolls)
       div.__track
         div.__item
           a|button.__action? (10 Nov 2026: the item's one child when the whole
           card goes somewhere, a link with href or a type="button". It draws
           as the div it replaces: a plain block whose layout is weightless,
           so the author's own layout class wins, and whose chrome reset
           weighs one class, so a page's plain a { } or button { } does not
           (its states are its own, not data-interactive, which would change
           the look; deliberate). An aria-disabled link takes no pointer and
           React drops its href. It adds the pointer,
           the kit's focus ring (inside its box, so the track never clips it)
           and takes the row's press, which a disabled or aria-disabled one
           does not. React CarouselAction.)
         (loop: two aria-hidden clones a side, out of the tab order, which the
         runtime makes; a tap on a clone opens its original)
       button.dk-component-icon-button.__prev
       button.dk-component-icon-button.__next
       span.__count?  (a viewer's "2 / 12": the runtime writes it, polite live text)
         (the row's arrows: a solid IconButton in light, lifted on
         the carousel's floating / overlay / lifted shadows, and a raised one
         in a light island in dark, on its own shadow, so they hold on any
         level or tone; the slider hides them. The runtime writes each
         arrow's data-variant, and data-theme="light" for raised-inverse,
         from data-arrow-look, else from the nearest data-theme as it changes)

   data-item-hover="showcase" gives a row an item hover for items that hold
   a Vehicle showcase: under a pointer the hovered item's showcase panel
   steps to the neutral subtle hover fill (over on-raised, a tone or a level)
   and its car grows by the surface grow rung, both on the state pattern.
   The slider has none; the press stays the row's own.

   data-variant="viewer" (10 Nov 2026) is a photo viewer: one photo at a
   time, centred, with no shrink or fade, the slider's loop, drag and snap,
   at every width (the runtime writes data-presentation="viewer"). Previous
   and Next stand in their own columns beside the photo, a viewer arrow gap
   from the track, centred on it; the photo is inset inside the track, so
   the next one comes in two insets away. On a phone or tablet the runtime
   writes data-phone: no arrows, and the track runs an inset past the
   column each side, so the photo lines up with the column. The arrows are
   the plain IconButton unless data-arrow-look says; an arrow the runtime
   hides at a non-looping end keeps its column. ArrowLeft and ArrowRight
   step while focus is inside. __count, under the photo, reads "2 / 12".
   The photo viewer is a Modal (the bare variant over the page) holding a
   caption row (an Image icon, the photo's group and date in Body, zoom-in
   and download IconButtons) over this, its items the photos as Image.

   The runtime fires dk-component-carousel:change { index } (the real item
   now centred, or first in a row), and dk.component.carousel.destroy(root)
   tears it down.
   */

@property --_fade-l { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --_fade-r { syntax: '<length>'; inherits: true; initial-value: 0px; }

.dk-component-carousel {
  position: relative;
}
.dk-component-carousel[data-presentation="row"] {
  container-type: inline-size;
}

.dk-component-carousel__track {
  display: flex;
  align-items: center;
  gap: var(--dk-component-carousel-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--dk-component-carousel-padding-block) 0;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.dk-component-carousel__track::-webkit-scrollbar { display: none; }
/* The browser's own drag on an image or a link would cancel the pointer drag
   (WebKit; the runtime stops dragstart everywhere). */
:where(.dk-component-carousel__track) :where(img, a) {
  -webkit-user-drag: none;
}

.dk-component-carousel__item {
  flex: 0 0 auto;
  width: var(--dk-component-carousel-slider-item-width);
  scroll-snap-align: center;
}

/* ── slider ── the side spacers are the wireframe base rule's, kept as drawn
   today. Where the page has a gutter, the track runs out to the frame's edges. */
.dk-component-carousel[data-presentation="slider"] > .dk-component-carousel__track {
  margin-inline: calc(-1 * var(--_bleed-l, 0px)) calc(-1 * var(--_bleed-r, 0px));
}
.dk-component-carousel[data-presentation="slider"] > .dk-component-carousel__track::before, .dk-component-carousel[data-presentation="slider"] > .dk-component-carousel__track::after {
  content: '';
  flex: 0 0 calc(17% - 2px);
}
.dk-component-carousel[data-presentation="slider"] > .dk-component-carousel__prev, .dk-component-carousel[data-presentation="slider"] > .dk-component-carousel__next {
  display: none;
}

/* ── row ── */
.dk-component-carousel[data-presentation="row"] > .dk-component-carousel__track {
  --_bl: var(--_bleed-l, 0px);
  --_br: var(--_bleed-r, 0px);
  --_n: var(--dk-component-carousel-row-count);
  --_fade-l: calc(var(--_bl) + var(--dk-component-carousel-fade-inset));
  --_fade-r: calc(var(--_br) + var(--dk-component-carousel-fade-inset));
  margin: 0 calc(-1 * var(--_br)) 0 calc(-1 * var(--_bl));
  padding: var(--dk-spacing-1) var(--_br) var(--dk-spacing-1) var(--_bl);
  scroll-padding-inline: var(--_bl) var(--_br);
  align-items: stretch;
  /* An eased curve from the page's edge to the fade inset inside the column. */
  mask-image: linear-gradient(to right,
    rgb(0 0 0 / 0) calc(var(--_fade-l) * 0),
    rgb(0 0 0 / 0.01) calc(var(--_fade-l) * 0.125),
    rgb(0 0 0 / 0.04) calc(var(--_fade-l) * 0.25),
    rgb(0 0 0 / 0.09) calc(var(--_fade-l) * 0.375),
    rgb(0 0 0 / 0.18) calc(var(--_fade-l) * 0.5),
    rgb(0 0 0 / 0.3) calc(var(--_fade-l) * 0.625),
    rgb(0 0 0 / 0.48) calc(var(--_fade-l) * 0.75),
    rgb(0 0 0 / 0.72) calc(var(--_fade-l) * 0.875),
    rgb(0 0 0 / 1) calc(var(--_fade-l) * 1),
    rgb(0 0 0 / 1) calc(100% - var(--_fade-r) * 1),
    rgb(0 0 0 / 0.72) calc(100% - var(--_fade-r) * 0.875),
    rgb(0 0 0 / 0.48) calc(100% - var(--_fade-r) * 0.75),
    rgb(0 0 0 / 0.3) calc(100% - var(--_fade-r) * 0.625),
    rgb(0 0 0 / 0.18) calc(100% - var(--_fade-r) * 0.5),
    rgb(0 0 0 / 0.09) calc(100% - var(--_fade-r) * 0.375),
    rgb(0 0 0 / 0.04) calc(100% - var(--_fade-r) * 0.25),
    rgb(0 0 0 / 0.01) calc(100% - var(--_fade-r) * 0.125),
    rgb(0 0 0 / 0) calc(100% - var(--_fade-r) * 0));
  transition: --_fade-l var(--dk-motion-state-duration) var(--dk-motion-state-easing), --_fade-r var(--dk-motion-state-duration) var(--dk-motion-state-easing);
}
.dk-component-carousel[data-presentation="row"][data-at-start] > .dk-component-carousel__track { --_fade-l: 0px; }
.dk-component-carousel[data-presentation="row"][data-at-end] > .dk-component-carousel__track { --_fade-r: 0px; }

.dk-component-carousel[data-presentation="row"] > .dk-component-carousel__track > .dk-component-carousel__item {
  width: calc((100cqi - var(--_n) * var(--dk-component-carousel-gap)) / (var(--_n) + var(--dk-component-carousel-row-peek)));
  scroll-snap-align: start;
  transition: transform var(--dk-motion-press-duration) var(--dk-motion-press-easing);
}

/* A pressed row item scales on the control rung (its transform eases in the
   rule above; the slider's items take transform and opacity from the runtime
   every scroll frame and are never eased). */
.dk-component-carousel[data-presentation="row"] > .dk-component-carousel__track > .dk-component-carousel__item:active {
  transform: scale(var(--dk-component-carousel-item-press-scale));
}
/* ── A clickable item (__action) ── a link or a button that is the item's
   one child, drawn as the block it replaces. Its layout is weightless, so
   the author's own layout class on it wins; the browser's chrome reset
   weighs one class (Link's reset does the same), so a page's plain a { } or
   button { } rule cannot restyle a car card. Its pointer, ring and press are
   its own, on purpose, not data-interactive: that foundation adds a tier's
   padding, radius and fill, and this part must look exactly like the div it
   replaces. */
:where(.dk-component-carousel__action) {
  display: block;
  box-sizing: border-box;
  width: 100%;
  border-radius: var(--dk-component-carousel-action-radius);
}
.dk-component-carousel__action {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  appearance: none;
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  text-transform: inherit;
  text-indent: inherit;
  text-align: inherit;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
/* Disabled: the arrow; an aria-disabled link goes nowhere (a disabled
   action is best a button with disabled). */
.dk-component-carousel__action:is(:disabled, [aria-disabled="true"]) { cursor: default; }
.dk-component-carousel__action[aria-disabled="true"] { pointer-events: none; }
.dk-component-carousel__action:is(:focus-visible, [data-pseudo-class="focus"]) {
  outline: var(--dk-component-carousel-action-ring-width) solid var(--dk-component-carousel-action-ring);
  outline-offset: calc(-1 * var(--dk-component-carousel-action-ring-width));
}
/* A disabled action does not take the row's press. */
.dk-component-carousel[data-presentation="row"] > .dk-component-carousel__track > .dk-component-carousel__item:has(> .dk-component-carousel__action:is(:disabled, [aria-disabled="true"])):active {
  transform: none;
}
/* The showcase hover (data-item-hover="showcase"), the row's alone. The
   panel's colour and the car's size move on the state pattern; the hover
   rules are :where(), weightless, and win through the Vehicle's own
   --_v-panel-hover, which its panel reads before any other choice. */
.dk-component-carousel[data-item-hover="showcase"][data-presentation="row"] > .dk-component-carousel__track > .dk-component-carousel__item .dk-component-vehicle[data-variant="showcase"]::before {
  transition: background-color var(--dk-motion-state-duration) var(--dk-motion-state-easing);
}
.dk-component-carousel[data-item-hover="showcase"][data-presentation="row"] > .dk-component-carousel__track > .dk-component-carousel__item .dk-component-vehicle[data-variant="showcase"] > .dk-component-vehicle__image {
  transition: transform var(--dk-motion-state-duration) var(--dk-motion-state-easing);
}
:where(.dk-component-carousel[data-item-hover="showcase"][data-presentation="row"] > .dk-component-carousel__track > .dk-component-carousel__item:is([data-pseudo-class="hover"]) .dk-component-vehicle[data-variant="showcase"]) {
  --_v-panel-hover: var(--dk-component-carousel-showcase-hover-panel);
}
@media (hover: hover) {
  :where(.dk-component-carousel[data-item-hover="showcase"][data-presentation="row"] > .dk-component-carousel__track > .dk-component-carousel__item:is(:hover) .dk-component-vehicle[data-variant="showcase"]) {
    --_v-panel-hover: var(--dk-component-carousel-showcase-hover-panel);
  }
}
:where(.dk-component-carousel[data-item-hover="showcase"][data-presentation="row"] > .dk-component-carousel__track > .dk-component-carousel__item:is([data-pseudo-class="hover"]) .dk-component-vehicle[data-variant="showcase"] > .dk-component-vehicle__image) {
  transform: scale(var(--dk-component-carousel-showcase-hover-grow));
}
@media (hover: hover) {
  :where(.dk-component-carousel[data-item-hover="showcase"][data-presentation="row"] > .dk-component-carousel__track > .dk-component-carousel__item:is(:hover) .dk-component-vehicle[data-variant="showcase"] > .dk-component-vehicle__image) {
    transform: scale(var(--dk-component-carousel-showcase-hover-grow));
  }
}

/* Snap reads an item's drawn box, so a shrunk item would pull the row a few
   pixels to its new edge: it holds still while an item is pressed. */
.dk-component-carousel[data-presentation="row"]:has(> .dk-component-carousel__track > .dk-component-carousel__item:active) > .dk-component-carousel__track {
  scroll-snap-type: none;
}

@container (min-width: 1200px) {
  .dk-component-carousel[data-presentation="row"] > .dk-component-carousel__track { --_n: var(--dk-component-carousel-row-count-wide); }
}
@container (max-width: 900px) {
  .dk-component-carousel[data-presentation="row"] > .dk-component-carousel__track { --_n: var(--dk-component-carousel-row-count-medium); }
}
@container (max-width: 560px) {
  .dk-component-carousel[data-presentation="row"] > .dk-component-carousel__track { --_n: var(--dk-component-carousel-row-count-narrow); }
}

/* ── viewer ── one photo at a time, the arrows in their own columns. */
.dk-component-carousel[data-variant="viewer"] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--dk-component-carousel-viewer-arrow-gap);
}
.dk-component-carousel[data-variant="viewer"] > .dk-component-carousel__track {
  grid-column: 2;
  grid-row: 1;
  gap: 0;
  padding-block: 0;
}
.dk-component-carousel[data-variant="viewer"] > .dk-component-carousel__track > .dk-component-carousel__item {
  box-sizing: border-box;
  width: 100%;
  padding-inline: var(--dk-component-carousel-viewer-inset);
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.dk-component-carousel[data-variant="viewer"] > :is(.dk-component-carousel__prev, .dk-component-carousel__next) {
  position: relative;
  inset: auto;
  translate: none;
  grid-row: 1;
}
.dk-component-carousel[data-variant="viewer"] > .dk-component-carousel__prev { grid-column: 1; }
.dk-component-carousel[data-variant="viewer"] > .dk-component-carousel__next { grid-column: 3; }
/* Hidden at a non-looping end, it keeps its column: the photo stays put. */
.dk-component-carousel[data-variant="viewer"] > :is(.dk-component-carousel__prev, .dk-component-carousel__next)[hidden] {
  display: inline-flex;
  visibility: hidden;
}
.dk-component-carousel__count {
  grid-column: 2;
  grid-row: 2;
  padding-top: var(--dk-component-carousel-count-gap);
  text-align: center;
  font-family: var(--dk-component-carousel-count-font-family);
  font-size: var(--dk-component-carousel-count-font-size);
  line-height: var(--dk-component-carousel-count-line-height);
  font-variant-numeric: tabular-nums;
  color: var(--dk-component-carousel-count-color);
}
.dk-component-carousel[data-variant="viewer"][data-phone] {
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
}
.dk-component-carousel[data-variant="viewer"][data-phone] > .dk-component-carousel__track {
  grid-column: 1;
  margin-inline: calc(-1 * var(--dk-component-carousel-viewer-inset));
}
.dk-component-carousel[data-variant="viewer"][data-phone] > .dk-component-carousel__count { grid-column: 1; }
.dk-component-carousel[data-variant="viewer"][data-phone] > :is(.dk-component-carousel__prev, .dk-component-carousel__next) { display: none; }

/* ── arrows ── Previous and Next, centred on the row's edges, on the
   IconButton's own corner. The solid look takes the carousel's lift;
   raised-inverse keeps the raised IconButton's own shadow. */
.dk-component-carousel__prev, .dk-component-carousel__next {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
}
.dk-component-carousel > .dk-component-carousel__prev[data-variant="solid"], .dk-component-carousel > .dk-component-carousel__next[data-variant="solid"] {
  --_ib-lift: var(--dk-component-carousel-arrow-shadow);
  --_ib-lift-hover: var(--dk-component-carousel-arrow-shadow-hover);
  --_ib-lift-active: var(--dk-component-carousel-arrow-shadow-active);
}
.dk-component-carousel__prev { left: var(--dk-component-carousel-arrow-offset); }
.dk-component-carousel__next { right: var(--dk-component-carousel-arrow-offset); }
.dk-component-carousel__prev[hidden], .dk-component-carousel__next[hidden] { display: none; }

/* ════════════════════════════════════ drift-kit:layer components/slider/styles.css ════════════════════════════════════ */
/* ── Slider ─────────────────────────────────────────────────────────────────
   A native <input type="range"> drives a painted track, travelled fill and
   thumb. The input is the control: the keyboard (arrows, Home, End, Page Up
   and Down), touch, forms and the accessibility tree are the platform's. It
   lies over the drawing, transparent, with its own thumb the size of the
   painted one, so a press lands where it looks like it does.

   ONE NUMBER POSITIONS EVERYTHING. --dk-component-slider-progress, 0 to 1, is
   the value's share of the range (the behaviour, or React, writes it). The
   thumb sits at that share of the track's run, which is the width less a
   thumb, the same run the native thumb travels; the fill runs from the start
   to the thumb's centre. It is a registered number, so a stepped slider's
   thumb and fill glide from stop to stop on the travel pattern instead of
   jumping; a continuous one follows the pointer with no lag.

   STEPPED is the same input, min 0, max one less than the stops, step 1, with
   the stops' names under the track. Each name is pressable. The input's aria-valuetext is the chosen name, so
   it is announced "Bubbly", not "2". The names are hidden from assistive
   technology: the input already says everything they do.

   Purpose: Choose a value along a range by dragging, or one of a few named
     settings in order (stepped), where the order itself means something:
     less to more rounded, thinner to thicker, tighter to more spacious.

   Anatomy:
     div.dk-component-slider[data-size][data-stepped]
       div.dk-component-slider__head                (optional)
         label.dk-component-slider__label
         output.dk-component-slider__value          (optional)
       div.dk-component-slider__control
         span.dk-component-slider__track            (aria-hidden)
           span.dk-component-slider__fill
         span.dk-component-slider__thumb            (aria-hidden)
         input.dk-component-slider__input           (type="range")
       div.dk-component-slider__stops               (stepped, aria-hidden)
         span.dk-component-slider__stop[data-value][data-chosen]       */
@property --dk-component-slider-progress { syntax: '<number>'; inherits: true; initial-value: 0; }

.dk-component-slider {
  --_sl-thumb: var(--dk-component-slider-thumb-size);
  --_sl-track: var(--dk-component-slider-track-height);
  --_sl-label-size: var(--dk-component-slider-label-font-size);
  --_sl-label-line: var(--dk-component-slider-label-line-height);
  --_sl-track-surface: var(--dk-component-slider-track-surface);
  --_sl-fill-surface: var(--dk-component-slider-fill-surface);
  --_sl-thumb-surface: var(--dk-component-slider-thumb-surface);
  --_sl-halo: 0;
  --_sl-scale: 1;
  /* Where the thumb's left edge is, and where the fill ends (the thumb's centre). */
  --_sl-at: calc((100% - var(--_sl-thumb)) * var(--dk-component-slider-progress));

  /* Track, then thumb, then the input over both. */
  isolation: isolate;
  display: grid;
  gap: var(--dk-component-slider-gap);
  width: 100%;
  min-width: 0;
  font-family: var(--dk-component-slider-label-font-family);
}
.dk-component-slider[data-size="small"] {
  --_sl-thumb: var(--dk-component-slider-small-thumb-size);
  --_sl-track: var(--dk-component-slider-small-track-height);
  --_sl-label-size: var(--dk-component-slider-small-label-font-size);
  --_sl-label-line: var(--dk-component-slider-small-label-line-height);
}
.dk-component-slider[data-size="large"] {
  --_sl-thumb: var(--dk-component-slider-large-thumb-size);
  --_sl-track: var(--dk-component-slider-large-track-height);
  --_sl-label-size: var(--dk-component-slider-large-label-font-size);
  --_sl-label-line: var(--dk-component-slider-large-label-line-height);
}
/* Stepped glides between stops; a continuous slider follows the pointer. */
.dk-component-slider[data-stepped] {
  transition: --dk-component-slider-progress var(--dk-motion-travel-duration) var(--dk-motion-travel-easing);
}

.dk-component-slider__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--dk-component-slider-gap);
  min-width: 0;
}
.dk-component-slider__label {
  font-size: var(--_sl-label-size);
  line-height: var(--_sl-label-line);
  font-weight: var(--dk-component-slider-label-font-weight);
  color: var(--dk-component-slider-label-color);
}
.dk-component-slider__value {
  font-size: var(--_sl-label-size);
  line-height: var(--_sl-label-line);
  color: var(--dk-component-slider-value-color);
  font-variant-numeric: tabular-nums;
}

/* ── The control: as tall as the thumb, the track centred in it ── */
.dk-component-slider__control {
  position: relative;
  height: var(--_sl-thumb);
}
.dk-component-slider__track {
  position: absolute;
  inset-inline: 0;
  top: calc((var(--_sl-thumb) - var(--_sl-track)) / 2);
  height: var(--_sl-track);
  z-index: 0;
  border-radius: var(--dk-component-slider-radius);
  background: var(--_sl-track-surface);
  overflow: hidden;
}
.dk-component-slider__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: calc(var(--_sl-at) + var(--_sl-thumb) / 2);
  border-radius: inherit;
  background: var(--_sl-fill-surface);
}
.dk-component-slider__thumb {
  position: absolute;
  top: 0;
  inset-inline-start: var(--_sl-at);
  z-index: 2;
  box-sizing: border-box;
  width: var(--_sl-thumb);
  height: var(--_sl-thumb);
  border-radius: var(--dk-component-slider-radius);
  background: var(--_sl-thumb-surface);
  box-shadow: 0 0 0 var(--dk-component-slider-thumb-edge-width) var(--dk-component-slider-thumb-edge),
    var(--dk-component-slider-thumb-shadow),
    0 0 0 calc(var(--_sl-halo) * var(--dk-component-slider-halo-size))
    color-mix(in srgb, var(--_sl-fill-surface) var(--dk-component-slider-halo-strength), transparent);
  transform: scale(var(--_sl-scale));
  pointer-events: none;
  transition: box-shadow var(--dk-motion-state-duration) var(--dk-motion-state-easing),
    transform var(--dk-motion-press-duration) var(--dk-motion-press-easing),
    background-color var(--dk-motion-state-duration) var(--dk-motion-state-easing);
}

/* The input over everything, invisible, its own thumb the painted one's size
   so a press maps to the same value it would on the drawing. */
.dk-component-slider__input {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.dk-component-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--_sl-thumb);
  height: var(--_sl-thumb);
}
.dk-component-slider__input::-moz-range-thumb {
  width: var(--_sl-thumb);
  height: var(--_sl-thumb);
  border: 0;
}

/* ── States, on the slots ── */
.dk-component-slider[data-pseudo-class="hover"] {
  --_sl-halo: 1;
}
@media (hover: hover) {
  .dk-component-slider:has(.dk-component-slider__input:hover:not(:disabled)) {
    --_sl-halo: 1;
  }
}
.dk-component-slider:has(.dk-component-slider__input:active:not(:disabled)),
.dk-component-slider[data-pseudo-class="active"] {
  --_sl-halo: 1;
  --_sl-scale: var(--dk-component-slider-press-scale);
}
.dk-component-slider:has(.dk-component-slider__input:focus-visible) .dk-component-slider__thumb,
.dk-component-slider[data-pseudo-class="focus"] .dk-component-slider__thumb {
  outline: var(--dk-component-slider-focus-ring-width) solid var(--dk-component-slider-focus-ring);
  outline-offset: var(--dk-component-slider-focus-ring-offset);
}
.dk-component-slider:has(.dk-component-slider__input:disabled) {
  --_sl-track-surface: var(--dk-component-slider-disabled-track);
  --_sl-fill-surface: var(--dk-component-slider-disabled-fill);
  --_sl-thumb-surface: var(--dk-component-slider-disabled-thumb);
}
.dk-component-slider:has(.dk-component-slider__input:disabled) .dk-component-slider__input {
  cursor: not-allowed;
}
.dk-component-slider:has(.dk-component-slider__input:disabled) :is(.dk-component-slider__label, .dk-component-slider__value, .dk-component-slider__stop) {
  color: var(--dk-component-slider-disabled-text);
}

/* ── Stops: the names under the track, each at its place. The ends sit flush
   with the track's ends; the rest centre on the thumb's place for them. ── */
.dk-component-slider__stops {
  position: relative;
  height: var(--dk-component-slider-stop-line-height);
  margin-block-start: calc(var(--dk-component-slider-stops-gap) - var(--dk-component-slider-gap));
}
.dk-component-slider__stop {
  --_sl-stop-at: 0;
  position: absolute;
  top: 0;
  inset-inline-start: calc(var(--_sl-thumb) / 2 + (100% - var(--_sl-thumb)) * var(--_sl-stop-at));
  translate: -50% 0;
  font-size: var(--dk-component-slider-stop-font-size);
  line-height: var(--dk-component-slider-stop-line-height);
  color: var(--dk-component-slider-stop-color);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dk-motion-state-duration) var(--dk-motion-state-easing);
}
.dk-component-slider__stop:first-child {
  inset-inline-start: 0;
  translate: 0 0;
}
.dk-component-slider__stop:last-child:not(:first-child) {
  inset-inline-start: auto;
  inset-inline-end: 0;
  translate: 0 0;
}
@media (hover: hover) {
  .dk-component-slider__stop:hover {
    color: var(--dk-component-slider-stop-color-hover);
  }
}
.dk-component-slider__stop[data-chosen] {
  color: var(--dk-component-slider-stop-chosen-color);
  font-weight: var(--dk-component-slider-stop-chosen-font-weight);
}
.dk-component-slider:has(.dk-component-slider__input:disabled) .dk-component-slider__stop {
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .dk-component-slider[data-stepped] {
    transition: none;
  }
}

/* ══════════════════════════════════════ drift-kit:layer components/card/styles.css ══════════════════════════════════════ */
/* ── Card ────────────────────────────────────────────────────────────────────
   A surface that goes somewhere: media over (or beside) a title, a subtitle
   and a row of meta, the whole card the target.

   Purpose: A surface that goes somewhere: media over or beside a title, a
     subtitle and a row of meta, the whole card the target.

   Anatomy (every part but the body optional):
     a|button|div.dk-component-card[data-variant][data-size][data-orientation]
                                   [data-media][data-tone][data-tone-fill][data-surface]
       div.__media[data-ratio][data-fit]       an img, a video, an icon
       div.__body
         span.__eyebrow
         h3.__title  (> a.__link, for a card with actions of its own)
         p.__subtitle
         div.__meta                            tags, a price, a date
         div.__cta                             one full-width action
       div.__corner[data-corner="start|end"]   a heart, a menu, over the top

   THE FILL IS THE KIT'S, as Box's is: every variant paints the surface it is
   on, so data-tone and data-surface tint it and remap everything inside, and
   hover and press climb that surface's control rungs. The variant only says
   how it separates from what is around it.

   ONLY A CARD THAT DOES SOMETHING MOVES: a link, a button, a tab stop, or a
   card whose title holds a stretched link. A static card is a panel.
   ── */
.dk-component-card {
  --_card-surface: var(--dk-component-card-surface);
  --_card-media: var(--dk-component-card-media-surface);
  --_card-edge: var(--dk-component-card-border);
  --_card-edge-hover: var(--dk-component-card-border-hover);
  --_card-edge-active: var(--dk-component-card-border-active);
  --_card-shadow: var(--dk-component-card-shadow);
  --_card-shadow-hover: var(--dk-component-card-shadow-hover);
  --_card-pad: var(--dk-component-card-padding);
  --_card-radius: var(--dk-component-card-radius);
  --_card-gap: var(--dk-component-card-gap);
  --_card-title-size: var(--dk-component-card-title-font-size);
  --_card-title-lh: var(--dk-component-card-title-line-height);
  --_card-sub-size: var(--dk-component-card-subtitle-font-size);
  --_card-sub-lh: var(--dk-component-card-subtitle-line-height);
  --_card-icon: var(--dk-component-card-icon-size);
  --_card-media-inline: var(--dk-component-card-media-inline);
  --_card-title-color: var(--dk-component-card-title-color);
  --_card-sub-color: var(--dk-component-card-subtitle-color);
  --_card-eyebrow-color: var(--dk-component-card-eyebrow-color);
  --_card-icon-color: var(--dk-component-card-media-icon);
  --_card-corner: calc(var(--_card-pad) / 2);
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-align: start;
  text-decoration: none;
  font: inherit;
  font-family: var(--dk-component-card-font-family);
  color: var(--dk-text-default);
  background: var(--_card-surface);
  border: var(--dk-component-card-border-width) solid var(--_card-edge);
  border-radius: var(--_card-radius);
  box-shadow: var(--_card-shadow);
  outline: none;
  transition: background-color var(--dk-component-card-duration) var(--dk-component-card-easing),
              border-color var(--dk-component-card-duration) var(--dk-component-card-easing),
              box-shadow var(--dk-component-card-duration) var(--dk-component-card-easing),
              transform var(--dk-component-card-press-duration) var(--dk-component-card-press-easing);
}
.dk-component-card[hidden] { display: none; }

/* ── Sizes; medium is the unmarked default ── */
.dk-component-card[data-size="small"] {
  --_card-pad: var(--dk-component-card-small-padding);
  --_card-radius: var(--dk-component-card-small-radius);
  --_card-gap: var(--dk-component-card-small-gap);
  --_card-title-size: var(--dk-component-card-small-title-font-size);
  --_card-title-lh: var(--dk-component-card-small-title-line-height);
  --_card-sub-size: var(--dk-component-card-small-subtitle-font-size);
  --_card-sub-lh: var(--dk-component-card-small-subtitle-line-height);
  --_card-icon: var(--dk-component-card-small-icon-size);
  --_card-media-inline: var(--dk-component-card-small-media-inline);
}
.dk-component-card[data-size="large"] {
  --_card-pad: var(--dk-component-card-large-padding);
  --_card-radius: var(--dk-component-card-large-radius);
  --_card-gap: var(--dk-component-card-large-gap);
  --_card-title-size: var(--dk-component-card-large-title-font-size);
  --_card-title-lh: var(--dk-component-card-large-title-line-height);
  --_card-sub-size: var(--dk-component-card-large-subtitle-font-size);
  --_card-sub-lh: var(--dk-component-card-large-subtitle-line-height);
  --_card-icon: var(--dk-component-card-large-icon-size);
  --_card-media-inline: var(--dk-component-card-large-media-inline);
}

/* ── Variants: how it separates ── */
.dk-component-card[data-variant="outline"] {
  --_card-edge: var(--dk-component-card-outline-border);
  --_card-shadow: none;
  --_card-shadow-hover: none;
}
.dk-component-card[data-variant="flat"] {
  --_card-edge: transparent;
  --_card-edge-hover: transparent;
  --_card-edge-active: transparent;
  --_card-shadow: none;
  --_card-shadow-hover: none;
}

/* ── Tone: the edge is the tone's hairline and holds still; a solid fill
   has none. The fill, words and icons are the tone layer's. ── */
.dk-component-card[data-tone]:not([data-tone="none"]) {
  --_card-edge: var(--dk-border-hairline-current);
  --_card-edge-hover: var(--dk-border-hairline-current);
  --_card-edge-active: var(--dk-border-hairline-current);
}
.dk-component-card[data-tone]:not([data-tone="none"])[data-tone-fill="solid"] {
  --_card-edge: transparent;
  --_card-edge-hover: transparent;
  --_card-edge-active: transparent;
}
.dk-component-card[data-variant="flat"][data-tone]:not([data-tone="none"]) {
  --_card-edge: transparent;
  --_card-edge-hover: transparent;
  --_card-edge-active: transparent;
}

/* ── Selected: the primary edge, as a chosen Choice card wears ── */
.dk-component-card:is([aria-pressed="true"], [aria-current]:not([aria-current="false"]):not([aria-current=""]),
                       :has(.dk-component-card__link[aria-pressed="true"]),
                       :has(.dk-component-card__link[aria-current]:not([aria-current="false"]))) {
  --_card-edge: var(--dk-component-card-selected-border);
  --_card-edge-hover: var(--dk-component-card-selected-border-hover);
  --_card-edge-active: var(--dk-component-card-selected-border-active);
}

/* ── Interactive: hover grows it and steps the fill, press shrinks it a step
   further. Pressing the CTA or a corner button does not press the card. ── */
.dk-component-card:is(a[href], button, [role="button"], [tabindex]:not([tabindex="-1"]), :has(.dk-component-card__link)) {
  cursor: pointer;
}
.dk-component-card:is(a[href], button, [role="button"], [tabindex]:not([tabindex="-1"]), :has(.dk-component-card__link)):not([aria-disabled="true"], :disabled, :has(.dk-component-card__link[aria-disabled="true"])):is([data-pseudo-class="hover"]) {
  --_card-surface: var(--dk-component-card-surface-hover);
  --_card-media: var(--dk-component-card-media-surface-hover);
  --_card-edge: var(--_card-edge-hover);
  --_card-shadow: var(--_card-shadow-hover);
  transform: scale(var(--dk-component-card-scale-hover));
}
@media (hover: hover) {
  .dk-component-card:is(a[href], button, [role="button"], [tabindex]:not([tabindex="-1"]), :has(.dk-component-card__link)):not([aria-disabled="true"], :disabled, :has(.dk-component-card__link[aria-disabled="true"])):is(:hover) {
    --_card-surface: var(--dk-component-card-surface-hover);
    --_card-media: var(--dk-component-card-media-surface-hover);
    --_card-edge: var(--_card-edge-hover);
    --_card-shadow: var(--_card-shadow-hover);
    transform: scale(var(--dk-component-card-scale-hover));
  }
}
.dk-component-card:is(a[href], button, [role="button"], [tabindex]:not([tabindex="-1"]), :has(.dk-component-card__link)):not([aria-disabled="true"], :disabled, :has(.dk-component-card__link[aria-disabled="true"])):is(:active, [data-pseudo-class="active"]):not(:has(:is(.dk-component-card__cta, .dk-component-card__corner) :active)) {
  --_card-surface: var(--dk-component-card-surface-active);
  --_card-media: var(--dk-component-card-media-surface-active);
  --_card-edge: var(--_card-edge-active);
  transform: scale(var(--dk-component-card-scale-active));
}
/* An outline ring, not a shadow: it stacks with the lift without a list to
   keep valid, and forced-colors mode keeps it. */
.dk-component-card:is(:focus-visible, :has(.dk-component-card__link:focus-visible), [data-pseudo-class="focus"]) {
  outline: var(--dk-component-card-ring-width) solid var(--dk-component-card-ring);
  outline-offset: 0;
}

/* ── Disabled: still, dimmed words, the disabled edge ── */
.dk-component-card:is([aria-disabled="true"], :disabled, :has(.dk-component-card__link[aria-disabled="true"])) {
  --_card-edge: var(--dk-component-card-disabled-border);
  --_card-title-color: var(--dk-component-card-disabled-text);
  --_card-sub-color: var(--dk-component-card-disabled-text);
  --_card-eyebrow-color: var(--dk-component-card-disabled-text);
  --_card-icon-color: var(--dk-component-card-disabled-icon);
  cursor: not-allowed;
}

/* ── Media ── */
.dk-component-card__media {
  --_card-ratio: var(--dk-component-card-media-ratio);
  --_card-fit: cover;
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--_card-ratio);
  overflow: hidden;
  background: var(--_card-media);
  color: var(--_card-icon-color);
  transition: background-color var(--dk-component-card-duration) var(--dk-component-card-easing);
}
.dk-component-card__media[data-ratio="1/1"] { --_card-ratio: 1 / 1; }
.dk-component-card__media[data-ratio="4/3"] { --_card-ratio: 4 / 3; }
.dk-component-card__media[data-ratio="3/2"] { --_card-ratio: 3 / 2; }
.dk-component-card__media[data-ratio="21/9"] { --_card-ratio: 21 / 9; }
.dk-component-card__media[data-fit="contain"] { --_card-fit: contain; }
.dk-component-card__media > :is(img, video, picture, picture > img) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--_card-fit);
}
/* A car is a Vehicle (data-padding gives it room): it fills the frame's
   width, centred in its height, and brings its own spacing. */
.dk-component-card__media > .dk-component-vehicle { inline-size: 100%; }
.dk-component-card__media :is(svg, i > svg) {
  width: var(--_card-icon);
  height: var(--_card-icon);
}
/* A hairline between a full-bleed media and the body. */
.dk-component-card__media + .dk-component-card__body {
  border-block-start: var(--dk-component-card-border-width) solid var(--dk-component-card-line-color);
}
/* Inset: the media framed inside the padding, its corner the card's less
   the padding, never sharper than the floor. */
.dk-component-card[data-media="inset"] > .dk-component-card__media {
  margin: var(--_card-pad) var(--_card-pad) 0;
  border-radius: max(var(--dk-component-card-media-inset-radius-min), calc(var(--_card-radius) - var(--_card-pad)));
}
.dk-component-card[data-media="inset"] > .dk-component-card__media + .dk-component-card__body { border-block-start: 0; }

/* ── Horizontal: the media beside the body, as tall as the card ── */
.dk-component-card[data-orientation="horizontal"] { flex-direction: row; }
.dk-component-card[data-orientation="horizontal"] > .dk-component-card__media {
  inline-size: var(--_card-media-inline);
  aspect-ratio: auto;
  align-self: stretch;
}
.dk-component-card[data-orientation="horizontal"] > .dk-component-card__media + .dk-component-card__body {
  border-block-start: 0;
  border-inline-start: var(--dk-component-card-border-width) solid var(--dk-component-card-line-color);
}
.dk-component-card[data-orientation="horizontal"][data-media="inset"] > .dk-component-card__media {
  margin-block: var(--_card-pad);
  margin-inline: var(--_card-pad) 0;
}
.dk-component-card[data-orientation="horizontal"][data-media="inset"] > .dk-component-card__media + .dk-component-card__body { border-inline-start: 0; }

/* ── Body ── */
.dk-component-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--_card-gap);
  min-width: 0;
  padding: var(--_card-pad);
}
.dk-component-card__eyebrow {
  margin: 0;
  font-size: var(--dk-component-card-eyebrow-font-size);
  line-height: var(--dk-component-card-eyebrow-line-height);
  letter-spacing: var(--dk-component-card-eyebrow-letter-spacing);
  font-weight: var(--dk-component-card-eyebrow-font-weight);
  text-transform: uppercase;
  color: var(--_card-eyebrow-color);
}
.dk-component-card__title {
  margin: 0;
  font-family: var(--dk-component-card-font-family);
  font-size: var(--_card-title-size);
  line-height: var(--_card-title-lh);
  font-weight: var(--dk-component-card-title-font-weight);
  color: var(--_card-title-color);
}
.dk-component-card__subtitle {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-family: var(--dk-component-card-font-family);
  font-size: var(--_card-sub-size);
  line-height: var(--_card-sub-lh);
  color: var(--_card-sub-color);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--dk-component-card-subtitle-lines);
  line-clamp: var(--dk-component-card-subtitle-lines);
}
/* Meta sits at the foot, so cards in a row line their meta up. */
.dk-component-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dk-spacing-2);
  margin-block-start: auto;
  padding-block-start: var(--_card-gap);
}

/* ── The stretched link: the title's link covers the whole card, so the
   card is one target and its actions can still be their own. ── */
.dk-component-card__link {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: inherit;
  color: inherit;
  text-decoration: none;
  outline: none;
  cursor: pointer;
}
.dk-component-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
}
.dk-component-card__cta {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--dk-spacing-2);
  margin-block-start: calc(var(--dk-component-card-cta-gap) - var(--_card-gap));
  padding-block-start: var(--_card-gap);
}
.dk-component-card__cta > * { flex: 1 1 auto; }
/* After meta, which already pushes to the foot, the CTA follows it; alone,
   it takes the foot itself. */
.dk-component-card__body > .dk-component-card__cta:not(.dk-component-card__meta ~ *) { margin-block-start: auto; }

/* ── Corners: over the top of the card, half the padding in (further over
   an inset media, so they sit inside its frame). ── */
.dk-component-card__corner {
  position: absolute;
  inset-block-start: var(--_card-corner);
  z-index: 2;
  display: flex;
  gap: var(--dk-spacing-1);
}
.dk-component-card__corner[data-corner="start"] { inset-inline-start: var(--_card-corner); }
.dk-component-card__corner[data-corner="end"] { inset-inline-end: var(--_card-corner); }
.dk-component-card[data-media="inset"] { --_card-corner: calc(var(--_card-pad) * 1.5); }

/* ── Corners on hover (data-corners="hover"; absent, they always show).
   Hidden until the card is under the pointer or holds the focus, and while
   a corner's menu is open; a pressed toggle (a saved heart) is state, so it
   stays. A screen that cannot hover always shows them. ── */
.dk-component-card[data-corners="hover"] .dk-component-card__corner > * {
  opacity: 0;
  transition: opacity var(--dk-component-card-duration) var(--dk-component-card-easing);
}
.dk-component-card[data-corners="hover"]:is(:focus-within, :has([aria-expanded="true"]), [data-pseudo-class="hover"]) .dk-component-card__corner > *,
.dk-component-card[data-corners="hover"] .dk-component-card__corner > [aria-pressed="true"] {
  opacity: 1;
}
@media (hover: hover) {
  .dk-component-card[data-corners="hover"]:is(:hover) .dk-component-card__corner > * {
    opacity: 1;
  }
}
@media (hover: none) {
  .dk-component-card[data-corners="hover"] .dk-component-card__corner > * {
    opacity: 1;
  }
}

/* ── Corners always, and nothing under them to float over: with no media
   they would cover the words, so they take a row above the body instead,
   at the body's own edge. ── */
.dk-component-card:not([data-corners="hover"]):not(:has(> .dk-component-card__media)):has(> .dk-component-card__corner) {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr;
}
.dk-component-card:not([data-corners="hover"]):not(:has(> .dk-component-card__media)):has(> .dk-component-card__corner) > .dk-component-card__corner {
  position: static;
  grid-row: 1;
  margin: var(--_card-pad) var(--_card-pad) 0;
}
.dk-component-card:not([data-corners="hover"]):not(:has(> .dk-component-card__media)):has(> .dk-component-card__corner) > .dk-component-card__corner[data-corner="start"] { grid-column: 1; }
.dk-component-card:not([data-corners="hover"]):not(:has(> .dk-component-card__media)):has(> .dk-component-card__corner) > .dk-component-card__corner[data-corner="end"] { grid-column: 3; }
.dk-component-card:not([data-corners="hover"]):not(:has(> .dk-component-card__media)):has(> .dk-component-card__corner) > .dk-component-card__body {
  grid-row: 2;
  grid-column: 1 / -1;
  padding-block-start: calc(var(--_card-pad) / 2);
}
/* Beside the body the end corner would sit on the title: both take the
   media, the end one half the padding in from the media's own end (which an
   inset media pushes a padding further in). */
.dk-component-card[data-orientation="horizontal"] { --_card-media-end: var(--_card-media-inline); }
.dk-component-card[data-orientation="horizontal"][data-media="inset"] { --_card-media-end: calc(var(--_card-media-inline) + var(--_card-pad)); }
.dk-component-card[data-orientation="horizontal"]:not([data-corners="hover"]):has(> .dk-component-card__media) > .dk-component-card__corner[data-corner="end"] {
  inset-inline-end: auto;
  inset-inline-start: calc(var(--_card-media-end) - var(--_card-pad) / 2);
  translate: -100% 0;
}
:where([dir="rtl"]) .dk-component-card[data-orientation="horizontal"]:not([data-corners="hover"]):has(> .dk-component-card__media) > .dk-component-card__corner[data-corner="end"] { translate: 100% 0; }

/* ═══════════════════════════════════ drift-kit:layer components/tooltip/styles.css ═══════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   Tooltip — one bubble, created lazily and reused by every trigger.
   dk.component.tooltip.init() wires it; kit/position.js does the geometry.

   ROOT LEVEL BY CONSTRUCTION. The bubble is appended to <body> and positioned
   `fixed`, which is what makes it immune to overflow clipping anywhere on the
   page: no ancestor's overflow, transform or stacking context can crop it,
   because it has no ancestor but the body.

   It reads the INVERSE surface and reverse text, so it is a dark bubble on a
   light page and a light one on a dark page without either theme needing its
   own rule. The arrow inherits the same background, which is what keeps it
   attached rather than floating near.

   z-index sits near the 32-bit signed int ceiling so it wins over every other
   layer including modal and toast.

   Markup (built by behaviour.js, shown for the docs):
     <div class="dk-component-tooltip" role="tooltip" id="dk-tooltip">
       <div class="dk-component-tooltip__surface">
         <span class="dk-component-tooltip__icon" aria-hidden="true">…</span>
         <span class="dk-component-tooltip__label">Text</span>
         <span class="dk-component-tooltip__arrow" aria-hidden="true"></span>
       </div>
     </div>
   The wrapper is placed, the surface is painted. Why they are two elements is
   the comment directly below.
   ────────────────────────────────────────────────────────────────────────

   Purpose: A floating label for an element that needs one word more than it
     can show.

   Anatomy:
     div.dk-component-tooltip[role="tooltip"]   (one shared bubble, rendered by the runtime)
       div.__surface > span.__icon? + span.__label | dl.__rows
       span.__arrow
     The trigger is any element: [data-dk-tooltip="<text>"], with
     [data-dk-tooltip-placement]?, [data-dk-tooltip-trigger]?, [data-dk-tooltip-delay]?
   */
/* TWO ELEMENTS, AND THE SPLIT IS THE WHOLE FIX. The outer one is PLACED and
   never transitions; the inner one is PAINTED and carries the animation.

   With both jobs on one element they shared a transform, so every reposition
   eased: scrolling made the bubble chase the trigger a frame behind and settle
   back, and moving between two triggers made it slide bodily across the screen
   with the wrong text already in it. Reported from a recording, and both are the
   same line of CSS. Separated, a reposition is instant because the element that
   moves has no transition, and the fade and travel still ease because the
   element that eases never moves. */
.dk-component-tooltip {
  position: fixed;
  top: 0; left: 0;                     /* the JS writes translate(), not top/left */
  z-index: 2147482000;
  pointer-events: none;
  transform: translate(var(--_tip-x, 0px), var(--_tip-y, 0px));
  /* NO TRANSITION HERE, deliberately, and stated rather than left to the
     default: omitting it computes to `all 0s`, which is the same behaviour
     reached by accident. Saying `none` makes the rule above this the reason,
     and means a later global transition rule cannot quietly reinstate the lag. */
  transition: none;
}
.dk-component-tooltip__surface {
  position: relative;
  /* BORDER-BOX, so max-width means the width of the bubble on screen. Under
     content-box the padding is added on top, so the 240 token rendered 268 and
     the size of the lie moved with the density. Select's menu was fixed the
     same way in 11.4.0, for the same reason. */
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: var(--dk-component-tooltip-gap);
  max-width: var(--dk-component-tooltip-max-width);
  padding: var(--dk-component-tooltip-padding-block) var(--dk-component-tooltip-padding-inline);
  background: var(--dk-surface-inverse-default);
  color: var(--dk-text-default-reverse);
  border-radius: var(--dk-component-tooltip-radius);
  font-family: var(--dk-font-family-primary);
  font-size: var(--dk-component-tooltip-font-size);
  line-height: var(--dk-component-tooltip-line-height);
  font-weight: var(--dk-component-tooltip-font-weight);
  box-shadow: var(--dk-shadow-overlay, 0 2px 6px 0 rgba(0, 0, 0, 0.10), 0 12px 32px 0 rgba(0, 0, 0, 0.22));
  /* HIDDEN BUT MEASURABLE. visibility rather than display, so the bubble still
     has a rect for kit/position.js to measure before it is shown; display:none
     would make every measurement zero and every placement wrong. */
  visibility: hidden;
  opacity: 0;
  transform: translate(var(--_tip-from, 0, 0));
  transition: opacity var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              transform var(--dk-motion-enter-duration) var(--dk-motion-enter-easing),
              visibility 0s linear var(--dk-motion-state-duration);
}
/* ENTER AND EXIT. The bubble travels a few pixels FROM the side it is on, so it
   reads as coming out of the trigger rather than drifting in from nowhere.

   The travel lives on the surface and the position on the wrapper, so the two
   never contend for one transform property. The JS writes --_tip-x and
   --_tip-y; CSS owns the rest. */
.dk-component-tooltip--visible .dk-component-tooltip__surface {
  visibility: visible;
  opacity: 1;
  transform: translate(0, 0);
  transition-delay: 0s;                /* visibility flips immediately on enter */
}
.dk-component-tooltip[data-placement="top"]    { --_tip-from: 0, var(--dk-component-tooltip-travel); }
.dk-component-tooltip[data-placement="bottom"] { --_tip-from: 0, calc(var(--dk-component-tooltip-travel) * -1); }
.dk-component-tooltip[data-placement="left"]   { --_tip-from: var(--dk-component-tooltip-travel), 0; }
.dk-component-tooltip[data-placement="right"]  { --_tip-from: calc(var(--dk-component-tooltip-travel) * -1), 0; }

.dk-component-tooltip__label { min-width: 0; }
.dk-component-tooltip__icon {
  flex: 0 0 auto;
  display: inline-flex;
  width: var(--dk-component-tooltip-icon-size);
  height: var(--dk-component-tooltip-icon-size);
  /* Nudged onto the first line's optical centre rather than its box top, which
     is what stops it riding high beside wrapped text. */
  margin-top: calc((var(--dk-component-tooltip-line-height) - var(--dk-component-tooltip-icon-size)) / 2);
}
.dk-component-tooltip__icon svg, .dk-component-tooltip__icon i {
  width: 100%; height: 100%; display: block;
}
/* [hidden] MUST WIN, and it does not by default: the UA rule is
   [hidden] { display: none } at the lowest specificity, so ANY display given to
   this class beats it and the slot keeps its 16px plus the flex gap. That is
   what put a 22px hole to the left of every tooltip with no icon: the label sat
   32px from the edge against a 12px padding. Reported from a recording, and the
   same trap that hid nothing in the docs control rail in September. */
/* EVERY SLOT, not only the icon. An explicit display beats the UA
   [hidden]{display:none} at its lowest specificity, and this codebase has been
   caught by that three times now. Declared once for all three so adding a
   display to any of them later cannot quietly resurrect the bug. */
.dk-component-tooltip__icon[hidden],
.dk-component-tooltip__label[hidden],
.dk-component-tooltip__rows[hidden] { display: none; }


/* ── THE ROWS VARIANT ──────────────────────────────────────────────────────
   A LABEL AND VALUE BREAKDOWN, NOT A TABLE, and the distinction is the whole
   design. The component library calls this contentType="table"; its one real
   consumer is BoxBreakdown, which renders a price: line items, a rule, a total.
   Every row is a pair, so this is a <dl>, which is the element for exactly
   that, and not the div soup with display:contents the reference uses.

   The bubble reads its content from markup already in the page rather than
   parsing a string, which is what keeps the kit free of a markdown parser and
   keeps this free of an innerHTML injection surface. See behaviour.js.

   Rows REPLACE the text and the icon; they do not sit beside them. Two content
   shapes, one at a time, which is what the reference does too. */
.dk-component-tooltip[data-rows] .dk-component-tooltip__surface {
  display: block;                      /* not the flex row the text variant is */
  max-width: var(--dk-component-tooltip-rows-max-width);
}
.dk-component-tooltip__rows {
  display: grid;
  /* THE LABEL COLUMN FLEXES AND THE VALUE COLUMN DOES NOT. A breakdown is read
     down its values, so those keep their natural width and a long label wraps
     instead of squeezing the money. */
  grid-template-columns: 1fr auto;
  /* NO column-gap, deliberately. The total's rule has to run unbroken across
     both columns to read as a sum, and a gap would cut it in half. The space
     between the columns is the value's own padding-left instead, which leaves
     the right edge, the thing actually being aligned, untouched. */
  column-gap: 0;
  row-gap: var(--dk-component-tooltip-rows-row-gap);
  margin: 0;
}
.dk-component-tooltip__rows dt {
  grid-column: 1;
  font-weight: var(--dk-component-tooltip-rows-label-weight);
  overflow-wrap: break-word;           /* the half that is allowed to wrap */
  min-width: 0;
}
.dk-component-tooltip__rows dd {
  grid-column: 2;
  margin: 0;
  padding-left: var(--dk-component-tooltip-rows-column-gap);
  text-align: right;
  white-space: nowrap;                 /* a figure should not break across lines */
  /* Figures line up in a column of their own accord, which is the point of
     putting them in a column. */
  font-variant-numeric: tabular-nums;
}
/* THE TOTAL. data-total on the pair, not a hasDividerAbove flag: the reference
   names the line by the decoration it wants rather than by what it is, and then
   every call site computes `index === length - 1` to find it. Say total, and
   the rule follows. */
.dk-component-tooltip__rows [data-total] {
  border-top: var(--dk-component-tooltip-rule-width) solid var(--dk-component-tooltip-rule-color);
  padding-top: var(--dk-component-tooltip-rows-row-gap);
}

/* THE ARROW is a rotated square rather than a border triangle, so it inherits
   the bubble's own background and shadow instead of needing a second colour
   kept in step by hand. Half of it sits under the bubble; the visible half is
   the triangle. The JS writes its position along the shifted axis. */
.dk-component-tooltip__arrow {
  position: absolute;
  width: var(--dk-component-tooltip-arrow-size);
  height: var(--dk-component-tooltip-arrow-size);
  background: inherit;
  transform: rotate(45deg);
}
.dk-component-tooltip[data-placement="top"] .dk-component-tooltip__arrow { bottom: calc(var(--dk-component-tooltip-arrow-size) / -2); }
.dk-component-tooltip[data-placement="bottom"] .dk-component-tooltip__arrow { top: calc(var(--dk-component-tooltip-arrow-size) / -2); }
.dk-component-tooltip[data-placement="left"] .dk-component-tooltip__arrow { right: calc(var(--dk-component-tooltip-arrow-size) / -2); }
.dk-component-tooltip[data-placement="right"] .dk-component-tooltip__arrow { left: calc(var(--dk-component-tooltip-arrow-size) / -2); }

/* ══════════════════════════════════════ drift-kit:layer components/body/styles.css ══════════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   Body — .dk-component-body, driven entirely by the --dk-component-body-* collection
   (components/body/tokens.css). This file reads only --dk-component-body-* tokens.

   Markup:
     <span class="dk-component-body" data-color="neutral" data-emphasis="subtle"
           data-size="small" data-weight="medium">…</span>
     <p class="dk-component-body" data-size="medium">…</p>    <!-- colour inherits -->

   EVERY AXIS IS OPTIONAL — omission INHERITS (spec B2). This is a deliberate
   divergence from the Button's fail-loud rule: a button with no variant has
   a fill that visibly fails; text has nothing to fail. `color` unset means
   inherit, which is what a text primitive should do inside a coloured
   container. The base rule therefore sets only family, smoothing, margin
   and the colour transition.

   NON-INTERACTIVE by design (spec B4): no hover/focus/active rules, no link
   mode. Hosts (Button, Link) own their label colour.
   ────────────────────────────────────────────────────────────────────────

   Purpose: The body-copy primitive: one element, eleven colours, two
     emphasis rungs, four sizes, eight weights, and, unlike the component-
     library original, aware of the surface it sits on.

   Anatomy:
     p|span.dk-component-body[data-size="xlarge|large|medium|small|xsmall"]?[data-weight]?[data-color]?[data-emphasis="subtle"]?[data-align]?[data-style="normal|underline|italic|strikethrough"]?[data-trim]?[data-nowrap]?
       span.__value?               (a figure inside running text)
   */
.dk-component-body {
  font-family: var(--dk-component-body-font-family);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  transition: color var(--dk-component-body-transition-duration) var(--dk-motion-state-easing);
}
.dk-component-body[hidden] { display: none; }

/* The MIDDLE rung answers for markup that names no size, the same way Button's
   medium does. Without it a body with no data-size took its size from whatever
   it inherited, or from the browser's own heading scale, which is the one place
   a design system should never leave a decision. */
/* ── Size: font-size + line-height move together ───────────────────────── */
.dk-component-body[data-size="xlarge"] { font-size: var(--dk-component-body-xlarge-font-size); line-height: var(--dk-component-body-xlarge-line-height); }
.dk-component-body[data-size="large"]  { font-size: var(--dk-component-body-large-font-size);  line-height: var(--dk-component-body-large-line-height); }
.dk-component-body:not([data-size]),
.dk-component-body[data-size="medium"] { font-size: var(--dk-component-body-medium-font-size); line-height: var(--dk-component-body-medium-line-height); }
.dk-component-body[data-size="small"]  { font-size: var(--dk-component-body-small-font-size);  line-height: var(--dk-component-body-small-line-height); }
.dk-component-body[data-size="xsmall"] { font-size: var(--dk-component-body-xsmall-font-size); line-height: var(--dk-component-body-xsmall-line-height); }

/* ── Weight ─────────────────────────────────────────────────────────────── */
.dk-component-body[data-weight="thin"]        { font-weight: var(--dk-component-body-thin-font-weight); }
.dk-component-body[data-weight="extra-light"] { font-weight: var(--dk-component-body-extra-light-font-weight); }
.dk-component-body[data-weight="light"]       { font-weight: var(--dk-component-body-light-font-weight); }
.dk-component-body[data-weight="regular"]     { font-weight: var(--dk-component-body-regular-font-weight); }
.dk-component-body[data-weight="medium"]      { font-weight: var(--dk-component-body-medium-font-weight); }
.dk-component-body[data-weight="semi-bold"]   { font-weight: var(--dk-component-body-semi-bold-font-weight); }
.dk-component-body[data-weight="bold"]        { font-weight: var(--dk-component-body-bold-font-weight); }
.dk-component-body[data-weight="extra-bold"]  { font-weight: var(--dk-component-body-extra-bold-font-weight); }

/* ── Colour — data-color picks the palette ─────────────────────────────── */
.dk-component-body[data-color="default"]     { color: var(--dk-component-body-default-color); }
.dk-component-body[data-color="inverse"]     { color: var(--dk-component-body-inverse-color); }
.dk-component-body[data-color="white"]       { color: var(--dk-component-body-white-color); }
.dk-component-body[data-color="black"]       { color: var(--dk-component-body-black-color); }
.dk-component-body[data-color="primary"]     { color: var(--dk-component-body-primary-color); }
.dk-component-body[data-color="success"]     { color: var(--dk-component-body-success-color); }
.dk-component-body[data-color="error"]       { color: var(--dk-component-body-error-color); }
.dk-component-body[data-color="warning"]     { color: var(--dk-component-body-warning-color); }
.dk-component-body[data-color="information"] { color: var(--dk-component-body-information-color); }
/* …and data-emphasis picks the rung, where the palette has one (spec B1). */
.dk-component-body[data-color="neutral"]                          { color: var(--dk-component-body-neutral-default-color); }
.dk-component-body[data-color="neutral"][data-emphasis="subtle"]  { color: var(--dk-component-body-neutral-subtle-color); }
/* ── In a clickable thing (11 Nov 2026, Julio) ─────────────────────────────
   Body's colours ramp with the data-interactive element they sit in (a
   card's detail line, its status words), keyed off the same states as
   kit/interactive.css: neutral and the five statuses take their hover and
   active rungs, neutral subtle its hover and focus (it has no active).
   Default text keeps its colour. The tokens are repointed on the Body, so
   the palette rules and the fidelity looks read them as before, and Body's
   own colour transition carries the change. */
:where([data-interactive][data-pseudo-class="hover"]) .dk-component-body {
  --dk-component-body-primary-color: var(--dk-text-primary-hover);
  --dk-component-body-success-color: var(--dk-text-success-hover);
  --dk-component-body-error-color: var(--dk-text-error-hover);
  --dk-component-body-warning-color: var(--dk-text-warning-hover);
  --dk-component-body-information-color: var(--dk-text-information-hover);
  --dk-component-body-neutral-default-color: var(--dk-text-neutral-hover);
  --dk-component-body-neutral-subtle-color: var(--dk-text-neutral-subtle-hover);
}
@media (hover: hover) {
  :where([data-interactive]:hover:not(:has(:is(.dk-component-button, .dk-component-icon-button, .dk-component-dropdown__trigger, .dk-component-select__trigger, .dk-component-checkbox, .dk-component-radio, .dk-component-switch, .dk-component-input__field, input, select, textarea, [data-interactive]):hover))) .dk-component-body {
    --dk-component-body-primary-color: var(--dk-text-primary-hover);
    --dk-component-body-success-color: var(--dk-text-success-hover);
    --dk-component-body-error-color: var(--dk-text-error-hover);
    --dk-component-body-warning-color: var(--dk-text-warning-hover);
    --dk-component-body-information-color: var(--dk-text-information-hover);
    --dk-component-body-neutral-default-color: var(--dk-text-neutral-hover);
    --dk-component-body-neutral-subtle-color: var(--dk-text-neutral-subtle-hover);
  }
}
:where([data-interactive]:active:not(:has(:is(.dk-component-button, .dk-component-icon-button, .dk-component-dropdown__trigger, .dk-component-select__trigger, .dk-component-checkbox, .dk-component-radio, .dk-component-switch, .dk-component-input__field, input, select, textarea, [data-interactive]):active)), [data-interactive][data-pseudo-class="active"]) .dk-component-body {
  --dk-component-body-primary-color: var(--dk-text-primary-active);
  --dk-component-body-success-color: var(--dk-text-success-active);
  --dk-component-body-error-color: var(--dk-text-error-active);
  --dk-component-body-warning-color: var(--dk-text-warning-active);
  --dk-component-body-information-color: var(--dk-text-information-active);
  --dk-component-body-neutral-default-color: var(--dk-text-neutral-active);
  --dk-component-body-neutral-subtle-color: var(--dk-text-neutral-subtle-focus);
}

/* ── Disabled — a STATE, not a colour (4.0.0) ─────────────────────────────
   Every other component in the kit says disabled with a state: Button and
   Checkbox with :disabled / [aria-disabled="true"], Input with a --disabled
   modifier. Only the type primitives said it with a palette value, which read
   as "paint this grey" rather than "this thing is off", and made the two
   mutually exclusive — you could not have a disabled ERROR label without
   choosing which of the two facts to drop.

   It is NOT data-status: that axis is the five semantic statuses (primary,
   error, success, warning, information) and disabled is not one of them — it
   is an interaction state that happens to have a colour, which is exactly how
   Button models it.

   A span cannot carry :disabled, so the state is [data-disabled] for the
   presentational case and [aria-disabled="true"] for the case where something
   is genuinely announced as disabled — the same pair Button accepts. Declared
   AFTER the palette rules and at equal specificity, so disabled wins over
   whatever data-color is set: state beats palette, which is the whole point.
   5.0.0 dropped the emphasis axis here — the two rungs were "dim" and
   "unreadable", not two strengths; see tokens.css. data-emphasis is now
   neutral-only. ── */
.dk-component-body[data-disabled], .dk-component-body[aria-disabled="true"] { color: var(--dk-component-body-disabled-color); }

/* ── Alignment (effective on block elements) ───────────────────────────── */
.dk-component-body[data-align="left"]   { text-align: left; }
.dk-component-body[data-align="center"] { text-align: center; }
.dk-component-body[data-align="right"]  { text-align: right; }

/* ── Style — `italic`, not the CL's `italics` (spec B3) ────────────────── */
.dk-component-body[data-style="normal"]    { text-decoration: none; font-style: normal; }
.dk-component-body[data-style="underline"] { font-style: normal; text-decoration-line: underline; text-decoration-style: solid;
  text-decoration-skip-ink: auto; text-decoration-thickness: auto; text-underline-offset: auto;
  text-underline-position: from-font; }
.dk-component-body[data-style="italic"]    { text-decoration: none; font-style: italic; }
/* A price no longer charged, struck through (9 Nov 2026). */
.dk-component-body[data-style="strikethrough"] { font-style: normal; text-decoration-line: line-through; text-decoration-style: solid; }

/* ── No wrap: the words stay on one line, a card's number, an amount or a
   date that must not break (9 Nov 2026; Table's cells spell it the same). ── */
.dk-component-body[data-nowrap] { white-space: nowrap; }

/* ── Trim — text-box-trim, the CL's Figma-parity feature (spec B5).
   Chrome 133+ / Safari 18.2+; no Firefox at time of writing. Degrades to
   ordinary line-height where unsupported. ────────────────────────────── */
.dk-component-body[data-trim="both"]  { text-box-trim: trim-both;  text-box-edge: cap alphabetic; }
.dk-component-body[data-trim="start"] { text-box-trim: trim-start; text-box-edge: cap alphabetic; }
.dk-component-body[data-trim="end"]   { text-box-trim: trim-end;   text-box-edge: cap alphabetic; }

/* ── A value in a sentence ──────────────────────────────────────────────────
   span.dk-component-body__value inside a Body: a read-only figure or day set
   into the line and highlighted, the sibling of a sentence trigger (Select,
   Date picker, Day of month with data-appearance="sentence"). Never breaks
   across lines. Tokens: body/tokens.css, "A value in a sentence". */
.dk-component-body__value {
  display: inline-block;
  vertical-align: middle;
  padding: var(--dk-component-body-value-padding-block) var(--dk-component-body-value-padding-inline);
  border-radius: var(--dk-component-body-value-radius);
  background: var(--dk-component-body-value-surface);
  color: var(--dk-component-body-value-color);
  font-size: var(--dk-component-body-value-font-size);
  line-height: var(--dk-component-body-value-line-height);
  font-weight: var(--dk-component-body-value-font-weight);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ═══════════════════════════════════ drift-kit:layer components/heading/styles.css ═══════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   Heading — .dk-component-heading, driven entirely by the --dk-component-heading-* collection.
   Every axis is optional; omission inherits, as Body does.
   Non-interactive: no hover/focus/link rules. Hosts own their label colour.
   ────────────────────────────────────────────────────────────────────────

   Purpose: The outline tier: Inter, six responsive sizes, nine weights, the
     Body colour grammar.

   Anatomy:
     h1..h6.dk-component-heading[data-size="xxlarge|xlarge|large|medium|small|xsmall|xxsmall"]?[data-weight]?[data-color]?[data-align]?
   */
.dk-component-heading {
  font-family: var(--dk-component-heading-font-family);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  /* Deterministic: a page's own h1/h2 rules (tracking, margins) must not leak
     into a type primitive — found 2026-09-08 when the docs page's h1 letter-spacing
     reached a .dk-component-hero rendered as an h1. The CL sets no tracking on either tier. */
  letter-spacing: normal;
  transition: color var(--dk-component-heading-transition-duration) var(--dk-motion-state-easing);
}
.dk-component-heading[hidden] { display: none; }

/* The MIDDLE rung answers for markup that names no size, the same way Button's
   medium does. Without it a heading with no data-size took its size from whatever
   it inherited, or from the browser's own heading scale, which is the one place
   a design system should never leave a decision. */
/* ── Size ───────────────────────────────────────────────────────────────── */
.dk-component-heading[data-size="xxlarge"] { font-size: var(--dk-component-heading-xxlarge-font-size); line-height: var(--dk-component-heading-xxlarge-line-height); }
.dk-component-heading[data-size="xlarge"] { font-size: var(--dk-component-heading-xlarge-font-size); line-height: var(--dk-component-heading-xlarge-line-height); }
.dk-component-heading[data-size="large"] { font-size: var(--dk-component-heading-large-font-size); line-height: var(--dk-component-heading-large-line-height); }
.dk-component-heading:not([data-size]),
.dk-component-heading[data-size="medium"] { font-size: var(--dk-component-heading-medium-font-size); line-height: var(--dk-component-heading-medium-line-height); }
.dk-component-heading[data-size="small"] { font-size: var(--dk-component-heading-small-font-size); line-height: var(--dk-component-heading-small-line-height); }
.dk-component-heading[data-size="xsmall"] { font-size: var(--dk-component-heading-xsmall-font-size); line-height: var(--dk-component-heading-xsmall-line-height); }
.dk-component-heading[data-size="xxsmall"] { font-size: var(--dk-component-heading-xxsmall-font-size); line-height: var(--dk-component-heading-xxsmall-line-height); }

/* ── Weight ─────────────────────────────────────────────────────────────── */
.dk-component-heading[data-weight="thin"] { font-weight: var(--dk-component-heading-thin-font-weight); }
.dk-component-heading[data-weight="extra-light"] { font-weight: var(--dk-component-heading-extra-light-font-weight); }
.dk-component-heading[data-weight="light"] { font-weight: var(--dk-component-heading-light-font-weight); }
.dk-component-heading[data-weight="regular"] { font-weight: var(--dk-component-heading-regular-font-weight); }
.dk-component-heading[data-weight="medium"] { font-weight: var(--dk-component-heading-medium-font-weight); }
.dk-component-heading[data-weight="semi-bold"] { font-weight: var(--dk-component-heading-semi-bold-font-weight); }
.dk-component-heading[data-weight="bold"] { font-weight: var(--dk-component-heading-bold-font-weight); }
.dk-component-heading[data-weight="extra-bold"] { font-weight: var(--dk-component-heading-extra-bold-font-weight); }
.dk-component-heading[data-weight="black"] { font-weight: var(--dk-component-heading-black-font-weight); }

/* ── Colour — data-color picks the palette, data-emphasis the rung (neutral only) ── */
.dk-component-heading[data-color="default"] { color: var(--dk-component-heading-default-color); }
.dk-component-heading[data-color="inverse"] { color: var(--dk-component-heading-inverse-color); }
.dk-component-heading[data-color="white"] { color: var(--dk-component-heading-white-color); }
.dk-component-heading[data-color="black"] { color: var(--dk-component-heading-black-color); }
.dk-component-heading[data-color="primary"] { color: var(--dk-component-heading-primary-color); }
.dk-component-heading[data-color="success"] { color: var(--dk-component-heading-success-color); }
.dk-component-heading[data-color="error"] { color: var(--dk-component-heading-error-color); }
.dk-component-heading[data-color="warning"] { color: var(--dk-component-heading-warning-color); }
.dk-component-heading[data-color="information"] { color: var(--dk-component-heading-information-color); }
.dk-component-heading[data-color="neutral"] { color: var(--dk-component-heading-neutral-default-color); }
.dk-component-heading[data-color="neutral"][data-emphasis="subtle"] { color: var(--dk-component-heading-neutral-subtle-color); }
/* ── Disabled — a STATE, not a colour (4.0.0) ─────────────────────────────
   Every other component in the kit says disabled with a state: Button and
   Checkbox with :disabled / [aria-disabled="true"], Input with a --disabled
   modifier. Only the type primitives said it with a palette value, which read
   as "paint this grey" rather than "this thing is off", and made the two
   mutually exclusive — you could not have a disabled ERROR label without
   choosing which of the two facts to drop.

   It is NOT data-status: that axis is the five semantic statuses (primary,
   error, success, warning, information) and disabled is not one of them — it
   is an interaction state that happens to have a colour, which is exactly how
   Button models it.

   A span cannot carry :disabled, so the state is [data-disabled] for the
   presentational case and [aria-disabled="true"] for the case where something
   is genuinely announced as disabled — the same pair Button accepts. Declared
   AFTER the palette rules and at equal specificity, so disabled wins over
   whatever data-color is set: state beats palette, which is the whole point.
   5.0.0 dropped the emphasis axis here — the two rungs were "dim" and
   "unreadable", not two strengths; see tokens.css. data-emphasis is now
   neutral-only. ── */
.dk-component-heading[data-disabled], .dk-component-heading[aria-disabled="true"] { color: var(--dk-component-heading-disabled-color); }

/* ── Style — Inter's drawn italic (Hero has no equivalent; Syne ships none) ── */
.dk-component-heading[data-style="italic"] { font-style: var(--dk-component-heading-italic-font-style); }

/* ── Alignment ──────────────────────────────────────────────────────────── */
.dk-component-heading[data-align="left"] { text-align: left; }
.dk-component-heading[data-align="center"] { text-align: center; }
.dk-component-heading[data-align="right"] { text-align: right; }

/* ── Trim — text-box-trim (Chrome 133+, Safari 18.2+; degrades to normal line-height) ── */
.dk-component-heading[data-trim="both"] { text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.dk-component-heading[data-trim="start"] { text-box-trim: trim-start; text-box-edge: cap alphabetic; }
.dk-component-heading[data-trim="end"] { text-box-trim: trim-end; text-box-edge: cap alphabetic; }

/* ══════════════════════════════════════ drift-kit:layer components/hero/styles.css ══════════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   Hero — .dk-component-hero, driven entirely by the --dk-component-hero-* collection.
   Every axis is optional; omission inherits, as Body does.
   Non-interactive: no hover/focus/link rules. Hosts own their label colour.
   ────────────────────────────────────────────────────────────────────────

   Purpose: The display tier: Syne on the heading ramp, eight responsive
     sizes, four weights, the Body colour grammar.

   Anatomy:
     h1|h2.dk-component-hero[data-size="xxlarge|xlarge|large|medium|small|xsmall|xxsmall|xxxsmall"]?[data-weight]?[data-color]?[data-align]?
   */
.dk-component-hero {
  font-family: var(--dk-component-hero-font-family);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  /* Deterministic: a page's own h1/h2 rules (tracking, margins) must not leak
     into a type primitive — found 2026-09-08 when the docs page's h1 letter-spacing
     reached a .dk-component-hero rendered as an h1. The CL sets no tracking on either tier. */
  letter-spacing: normal;
  transition: color var(--dk-component-hero-transition-duration) var(--dk-motion-state-easing);
}
.dk-component-hero[hidden] { display: none; }

/* The MIDDLE rung answers for markup that names no size, the same way Button's
   medium does. Without it a hero with no data-size took its size from whatever
   it inherited, or from the browser's own heading scale, which is the one place
   a design system should never leave a decision. */
/* ── Size — the display ramp, t-shirt rungs (4.0.0; was h1…h5) ─────────── */
.dk-component-hero[data-size="xxlarge"] { font-size: var(--dk-component-hero-xxlarge-font-size); line-height: var(--dk-component-hero-xxlarge-line-height); }
.dk-component-hero[data-size="xlarge"] { font-size: var(--dk-component-hero-xlarge-font-size); line-height: var(--dk-component-hero-xlarge-line-height); }
.dk-component-hero[data-size="large"] { font-size: var(--dk-component-hero-large-font-size); line-height: var(--dk-component-hero-large-line-height); }
.dk-component-hero:not([data-size]),
.dk-component-hero[data-size="medium"] { font-size: var(--dk-component-hero-medium-font-size); line-height: var(--dk-component-hero-medium-line-height); }
.dk-component-hero[data-size="small"] { font-size: var(--dk-component-hero-small-font-size); line-height: var(--dk-component-hero-small-line-height); }
.dk-component-hero[data-size="xsmall"] { font-size: var(--dk-component-hero-xsmall-font-size); line-height: var(--dk-component-hero-xsmall-line-height); }
.dk-component-hero[data-size="xxsmall"] { font-size: var(--dk-component-hero-xxsmall-font-size); line-height: var(--dk-component-hero-xxsmall-line-height); }
.dk-component-hero[data-size="xxxsmall"] { font-size: var(--dk-component-hero-xxxsmall-font-size); line-height: var(--dk-component-hero-xxxsmall-line-height); }

/* ── Weight ─────────────────────────────────────────────────────────────── */
.dk-component-hero[data-weight="regular"] { font-weight: var(--dk-component-hero-regular-font-weight); }
.dk-component-hero[data-weight="medium"] { font-weight: var(--dk-component-hero-medium-font-weight); }
.dk-component-hero[data-weight="semi-bold"] { font-weight: var(--dk-component-hero-semi-bold-font-weight); }
.dk-component-hero[data-weight="bold"] { font-weight: var(--dk-component-hero-bold-font-weight); }

/* ── Colour — data-color picks the palette, data-emphasis the rung (neutral only) ── */
.dk-component-hero[data-color="default"] { color: var(--dk-component-hero-default-color); }
.dk-component-hero[data-color="inverse"] { color: var(--dk-component-hero-inverse-color); }
.dk-component-hero[data-color="white"] { color: var(--dk-component-hero-white-color); }
.dk-component-hero[data-color="black"] { color: var(--dk-component-hero-black-color); }
.dk-component-hero[data-color="primary"] { color: var(--dk-component-hero-primary-color); }
.dk-component-hero[data-color="success"] { color: var(--dk-component-hero-success-color); }
.dk-component-hero[data-color="error"] { color: var(--dk-component-hero-error-color); }
.dk-component-hero[data-color="warning"] { color: var(--dk-component-hero-warning-color); }
.dk-component-hero[data-color="information"] { color: var(--dk-component-hero-information-color); }
.dk-component-hero[data-color="neutral"] { color: var(--dk-component-hero-neutral-default-color); }
.dk-component-hero[data-color="neutral"][data-emphasis="subtle"] { color: var(--dk-component-hero-neutral-subtle-color); }
/* ── Disabled — a STATE, not a colour (4.0.0) ─────────────────────────────
   Every other component in the kit says disabled with a state: Button and
   Checkbox with :disabled / [aria-disabled="true"], Input with a --disabled
   modifier. Only the type primitives said it with a palette value, which read
   as "paint this grey" rather than "this thing is off", and made the two
   mutually exclusive — you could not have a disabled ERROR label without
   choosing which of the two facts to drop.

   It is NOT data-status: that axis is the five semantic statuses (primary,
   error, success, warning, information) and disabled is not one of them — it
   is an interaction state that happens to have a colour, which is exactly how
   Button models it.

   A span cannot carry :disabled, so the state is [data-disabled] for the
   presentational case and [aria-disabled="true"] for the case where something
   is genuinely announced as disabled — the same pair Button accepts. Declared
   AFTER the palette rules and at equal specificity, so disabled wins over
   whatever data-color is set: state beats palette, which is the whole point.
   5.0.0 dropped the emphasis axis here — the two rungs were "dim" and
   "unreadable", not two strengths; see tokens.css. data-emphasis is now
   neutral-only. ── */
.dk-component-hero[data-disabled], .dk-component-hero[aria-disabled="true"] { color: var(--dk-component-hero-disabled-color); }

/* ── Alignment ──────────────────────────────────────────────────────────── */
.dk-component-hero[data-align="left"] { text-align: left; }
.dk-component-hero[data-align="center"] { text-align: center; }
.dk-component-hero[data-align="right"] { text-align: right; }

/* ── Trim — text-box-trim (Chrome 133+, Safari 18.2+; degrades to normal line-height) ── */
.dk-component-hero[data-trim="both"] { text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.dk-component-hero[data-trim="start"] { text-box-trim: trim-start; text-box-edge: cap alphabetic; }
.dk-component-hero[data-trim="end"] { text-box-trim: trim-end; text-box-edge: cap alphabetic; }

/* ═══════════════════════════════════ drift-kit:layer components/eyebrow/styles.css ═══════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   Eyebrow — .dk-component-eyebrow, driven entirely by the --dk-component-eyebrow-* collection.
   Every axis is optional except that an eyebrow without data-size is MEDIUM — uppercase + tracking without a size is not a style (spec D7).
   Non-interactive: no hover/focus/link rules. Hosts own their label colour.
   ────────────────────────────────────────────────────────────────────────

   Purpose: Uppercase labels, the component-library's Overline, renamed.
     Three fixed sizes (12 / 11 / 10 px) with tracking that widens as the size
     shrinks, bold by default, the Body colour grammar.

   Anatomy:
     span.dk-component-eyebrow[data-size="large|medium|small"]?[data-color]?[data-emphasis="subtle"]?
   */
.dk-component-eyebrow {
  font-family: var(--dk-component-eyebrow-font-family);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  transition: color var(--dk-component-eyebrow-transition-duration) var(--dk-motion-state-easing);
  text-transform: uppercase;
  font-weight: var(--dk-component-eyebrow-bold-font-weight);
  font-size: var(--dk-component-eyebrow-medium-font-size);
  line-height: var(--dk-component-eyebrow-medium-line-height);
  letter-spacing: var(--dk-component-eyebrow-medium-letter-spacing);
}
.dk-component-eyebrow[hidden] { display: none; }

/* ── Size ───────────────────────────────────────────────────────────────── */
.dk-component-eyebrow[data-size="large"] { font-size: var(--dk-component-eyebrow-large-font-size); line-height: var(--dk-component-eyebrow-large-line-height); letter-spacing: var(--dk-component-eyebrow-large-letter-spacing); }
.dk-component-eyebrow[data-size="medium"] { font-size: var(--dk-component-eyebrow-medium-font-size); line-height: var(--dk-component-eyebrow-medium-line-height); letter-spacing: var(--dk-component-eyebrow-medium-letter-spacing); }
.dk-component-eyebrow[data-size="small"] { font-size: var(--dk-component-eyebrow-small-font-size); line-height: var(--dk-component-eyebrow-small-line-height); letter-spacing: var(--dk-component-eyebrow-small-letter-spacing); }

/* ── Weight ─────────────────────────────────────────────────────────────── */
.dk-component-eyebrow[data-weight="medium"] { font-weight: var(--dk-component-eyebrow-medium-font-weight); }
.dk-component-eyebrow[data-weight="semi-bold"] { font-weight: var(--dk-component-eyebrow-semi-bold-font-weight); }
.dk-component-eyebrow[data-weight="bold"] { font-weight: var(--dk-component-eyebrow-bold-font-weight); }

/* ── Colour — data-color picks the palette, data-emphasis the rung (neutral only) ── */
.dk-component-eyebrow[data-color="default"] { color: var(--dk-component-eyebrow-default-color); }
.dk-component-eyebrow[data-color="inverse"] { color: var(--dk-component-eyebrow-inverse-color); }
.dk-component-eyebrow[data-color="white"] { color: var(--dk-component-eyebrow-white-color); }
.dk-component-eyebrow[data-color="black"] { color: var(--dk-component-eyebrow-black-color); }
.dk-component-eyebrow[data-color="primary"] { color: var(--dk-component-eyebrow-primary-color); }
.dk-component-eyebrow[data-color="success"] { color: var(--dk-component-eyebrow-success-color); }
.dk-component-eyebrow[data-color="error"] { color: var(--dk-component-eyebrow-error-color); }
.dk-component-eyebrow[data-color="warning"] { color: var(--dk-component-eyebrow-warning-color); }
.dk-component-eyebrow[data-color="information"] { color: var(--dk-component-eyebrow-information-color); }
.dk-component-eyebrow[data-color="neutral"] { color: var(--dk-component-eyebrow-neutral-default-color); }
.dk-component-eyebrow[data-color="neutral"][data-emphasis="subtle"] { color: var(--dk-component-eyebrow-neutral-subtle-color); }
/* ── Disabled — a STATE, not a colour (4.0.0) ─────────────────────────────
   Every other component in the kit says disabled with a state: Button and
   Checkbox with :disabled / [aria-disabled="true"], Input with a --disabled
   modifier. Only the type primitives said it with a palette value, which read
   as "paint this grey" rather than "this thing is off", and made the two
   mutually exclusive — you could not have a disabled ERROR label without
   choosing which of the two facts to drop.

   It is NOT data-status: that axis is the five semantic statuses (primary,
   error, success, warning, information) and disabled is not one of them — it
   is an interaction state that happens to have a colour, which is exactly how
   Button models it.

   A span cannot carry :disabled, so the state is [data-disabled] for the
   presentational case and [aria-disabled="true"] for the case where something
   is genuinely announced as disabled — the same pair Button accepts. Declared
   AFTER the palette rules and at equal specificity, so disabled wins over
   whatever data-color is set: state beats palette, which is the whole point.
   5.0.0 dropped the emphasis axis here — the two rungs were "dim" and
   "unreadable", not two strengths; see tokens.css. data-emphasis is now
   neutral-only. ── */
.dk-component-eyebrow[data-disabled], .dk-component-eyebrow[aria-disabled="true"] { color: var(--dk-component-eyebrow-disabled-color); }

/* ── Alignment ──────────────────────────────────────────────────────────── */
.dk-component-eyebrow[data-align="left"] { text-align: left; }
.dk-component-eyebrow[data-align="center"] { text-align: center; }
.dk-component-eyebrow[data-align="right"] { text-align: right; }

/* ══════════════════════════════════════ drift-kit:layer components/icon/styles.css ══════════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   Icon — .dk-component-icon, driven entirely by the --dk-component-icon-* collection.

   The class goes on the <svg> itself — or on the <i> placeholder a runtime
   swaps for one: Lucide's createIcons copies class and data-* onto the svg it
   creates, and so does dk.component.icon.init (behaviour.js) for the Karmo set.

     <i class="dk-component-icon" data-karmo="odometer" data-size="16" data-color="neutral"></i>
     <i class="dk-component-icon" data-lucide="check" data-size="20"></i>
     <svg class="dk-component-icon" data-size="24" viewBox="0 0 24 24" …>…</svg>

   The Karmo set is built into components.js: no icon script of its own.
   Every other set is drift-icons-<set>.js beside it, in the package and in
   the public kit, loaded on demand or by its own script tag.

   Every axis is optional. Unsized = 1em (a glyph in its text); uncoloured =
   currentColor; unweighted = the regular (Lucide-native) stroke.
   Non-interactive: hosts (Button, Icon button) own hover/focus colour.
   ────────────────────────────────────────────────────────────────────────

   Purpose: The icon primitive, built to behave like text: the same colour
     grammar, sizes named and fixed like the body rungs, weight as stroke
     width, and 1em when unsized.

   Anatomy:
     i.dk-component-icon[data-lucide|data-karmo|data-card|...="<glyph>"][data-size="12..48"]?[data-color]?
       (the runtime swaps in the svg)
   */
.dk-component-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;   /* sits on the text baseline like a glyph */
  flex-shrink: 0;
  color: inherit;
  fill: none;                 /* every set draws strokes; filled Karmo paths carry their own fill */
  stroke: currentColor;
  stroke-width: var(--dk-component-icon-regular-stroke-width);
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  transition: color var(--dk-component-icon-transition-duration) var(--dk-motion-state-easing);
}
.dk-component-icon[hidden] { display: none; }

/* ── Picture sets — artwork that brings its own colour ────────────────────
   Flags and brand marks are not line art: every shape carries its own fill and
   most carry no stroke at all. The rule above declares fill, stroke and
   stroke-width on the svg, those three properties inherit, and an inherited CSS
   property beats a presentation attribute on the artwork below it. Left alone,
   a flag renders with a 2px black outline around every shape in it.

   So a picture svg puts the three back to their SVG defaults: fill black,
   stroke none, stroke-width 1, which is 'initial' for each. Nothing in the
   artwork actually relies on those defaults, since Figma exports an explicit
   fill on every shape, but they are what an unstyled <svg> would do and that is
   exactly the contract: render as exported.

   The runtime stamps the attribute from setKind (behaviour.js), so a new
   picture set needs no CSS. data-color and data-weight do nothing here, by
   design: there is no single colour to set on a flag. ── */
.dk-component-icon[data-icon-kind="picture"] {
  fill: initial;
  stroke: initial;
  stroke-width: initial;
}

/* ── Size ───────────────────────────────────────────────────────────────── */
.dk-component-icon[data-size="12"] { width: var(--dk-component-icon-12-size); height: var(--dk-component-icon-12-size); vertical-align: middle; }
.dk-component-icon[data-size="14"] { width: var(--dk-component-icon-14-size); height: var(--dk-component-icon-14-size); vertical-align: middle; }
.dk-component-icon[data-size="16"] { width: var(--dk-component-icon-16-size); height: var(--dk-component-icon-16-size); vertical-align: middle; }
.dk-component-icon[data-size="20"] { width: var(--dk-component-icon-20-size); height: var(--dk-component-icon-20-size); vertical-align: middle; }
.dk-component-icon[data-size="24"] { width: var(--dk-component-icon-24-size); height: var(--dk-component-icon-24-size); vertical-align: middle; }
.dk-component-icon[data-size="28"] { width: var(--dk-component-icon-28-size); height: var(--dk-component-icon-28-size); vertical-align: middle; }
.dk-component-icon[data-size="32"] { width: var(--dk-component-icon-32-size); height: var(--dk-component-icon-32-size); vertical-align: middle; }
.dk-component-icon[data-size="40"] { width: var(--dk-component-icon-40-size); height: var(--dk-component-icon-40-size); vertical-align: middle; }
.dk-component-icon[data-size="48"] { width: var(--dk-component-icon-48-size); height: var(--dk-component-icon-48-size); vertical-align: middle; }

/* ── Weight = stroke ────────────────────────────────────────────────────── */
.dk-component-icon[data-weight="extra-light"] { stroke-width: var(--dk-component-icon-extra-light-stroke-width); }
.dk-component-icon[data-weight="light"]   { stroke-width: var(--dk-component-icon-light-stroke-width); }
.dk-component-icon[data-weight="regular"] { stroke-width: var(--dk-component-icon-regular-stroke-width); }
.dk-component-icon[data-weight="bold"]    { stroke-width: var(--dk-component-icon-bold-stroke-width); }

/* ── Colour — data-color picks the palette, data-emphasis the rung ─────── */
.dk-component-icon[data-color="default"] { color: var(--dk-component-icon-default-color); }
.dk-component-icon[data-color="inverse"] { color: var(--dk-component-icon-inverse-color); }
.dk-component-icon[data-color="white"] { color: var(--dk-component-icon-white-color); }
.dk-component-icon[data-color="black"] { color: var(--dk-component-icon-black-color); }
.dk-component-icon[data-color="primary"] { color: var(--dk-component-icon-primary-color); }
.dk-component-icon[data-color="success"] { color: var(--dk-component-icon-success-color); }
.dk-component-icon[data-color="error"] { color: var(--dk-component-icon-error-color); }
.dk-component-icon[data-color="warning"] { color: var(--dk-component-icon-warning-color); }
.dk-component-icon[data-color="information"] { color: var(--dk-component-icon-information-color); }
.dk-component-icon[data-color="neutral"] { color: var(--dk-component-icon-neutral-default-color); }
.dk-component-icon[data-color="neutral"][data-emphasis="subtle"] { color: var(--dk-component-icon-neutral-subtle-color); }
/* ── Disabled — a STATE, not a colour (4.0.0) ─────────────────────────────
   Every other component in the kit says disabled with a state: Button and
   Checkbox with :disabled / [aria-disabled="true"], Input with a --disabled
   modifier. Only the type primitives said it with a palette value, which read
   as "paint this grey" rather than "this thing is off", and made the two
   mutually exclusive — you could not have a disabled ERROR label without
   choosing which of the two facts to drop.

   It is NOT data-status: that axis is the five semantic statuses (primary,
   error, success, warning, information) and disabled is not one of them — it
   is an interaction state that happens to have a colour, which is exactly how
   Button models it.

   A span cannot carry :disabled, so the state is [data-disabled] for the
   presentational case and [aria-disabled="true"] for the case where something
   is genuinely announced as disabled — the same pair Button accepts. Declared
   AFTER the palette rules and at equal specificity, so disabled wins over
   whatever data-color is set: state beats palette, which is the whole point.
   5.0.0 dropped the emphasis axis here — the two rungs were "dim" and
   "unreadable", not two strengths; see tokens.css. data-emphasis is now
   neutral-only. ── */
.dk-component-icon[data-disabled], .dk-component-icon[aria-disabled="true"] { color: var(--dk-component-icon-disabled-color); }

/* ═════════════════════════════════ drift-kit:layer components/icon-tile/styles.css ═════════════════════════════════ */
/* ── Icon tile ──────────────────────────────────────────────────────────────
   A glyph on a small coloured square, for a list row, a card's media or the
   head of an empty state.

   Purpose: A glyph on a small coloured square, subtle or solid, with one
     corner at every size.

   Anatomy:
     span.dk-component-icon-tile[data-status|data-hue][data-variant][data-size]
       the glyph: a kit Icon, a Lucide <i>, an <svg> or an <img>

   DECORATIVE BY DEFAULT. The glyph carries aria-hidden and the tile has no
   name, so a reader hears the words beside it and nothing else. A tile that
   means something on its own takes role="img" and an aria-label.

   NOT A CONTROL: no hover, no press, no pointer. A tile that does something is
   an Icon button. DISABLED follows the thing the tile sits in: inside a
   disabled data-interactive element, or data-disabled on the tile itself
   (15 Oct; until then the host dimmed its media, as Choice card does).

   TAG'S GRAMMAR, ON PURPOSE: data-status, data-hue and data-variant mean what
   they mean on a Tag, and the colours are written the same way, the status
   writing private slots and the variant spending them. The order is
   load-bearing: statuses, then hues (so a hue wins), then the variant.
   ── */
.dk-component-icon-tile {
  flex: none;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--_it-size);
  height: var(--_it-size);
  border-radius: var(--dk-component-icon-tile-radius);
  vertical-align: middle;
  overflow: hidden;

  --_it-size: var(--dk-component-icon-tile-48-size);
  --_it-icon-size: var(--dk-component-icon-tile-48-icon-size);

  /* NEUTRAL SUBTLE IS THE DEFAULT, as a Tag's is: a tile with no status is an
     illustration rather than a signal. */
  --_it-tint: var(--dk-surface-neutral-subtle);
  --_it-tint-deep: var(--dk-surface-neutral-subtle-hover);
  --_it-tint-hover: var(--dk-surface-neutral-subtle-focus);
  --_it-tint-active: var(--dk-surface-neutral-subtle-active);
  --_it-tint-glyph: var(--dk-text-neutral-default);
  --_it-solid: var(--dk-surface-neutral-default);
  --_it-on-solid: var(--dk-icon-base-white);

  /* What the variant rules spend. */
  --_it-bg: var(--_it-tint);
  --_it-glyph: var(--_it-tint-glyph);

  background: var(--_it-bg);
  color: var(--_it-glyph);
  /* It ramps with the clickable thing it sits in, at the same pace. */
  transition: background-color var(--dk-motion-state-duration) var(--dk-motion-state-easing), color var(--dk-motion-state-duration) var(--dk-motion-state-easing);
}
.dk-component-icon-tile[hidden] { display: none; }
/* The glyph is the tile's direct child, whatever a runtime made of it: an <i>
   before Lucide or the kit Icon runtime swaps it, the <svg> after. Sized here
   rather than by the icon's own data-size, so a tile is one attribute.
   [data-size] in the list lifts this to (0,2,0), the weight of Icon's own size
   rules, and the manifest loads this file after Icon's, so a sized kit icon
   (React's <Lock size={20} /> in a 32 tile) still takes the tile's glyph. */
.dk-component-icon-tile > :is(svg, i, img, [data-size]) {
  display: block;
  width: var(--_it-icon-size);
  height: var(--_it-icon-size);
  flex: none;
}
.dk-component-icon-tile[data-size="24"] {
  --_it-size: var(--dk-component-icon-tile-24-size);
  --_it-icon-size: var(--dk-component-icon-tile-24-icon-size);
}
.dk-component-icon-tile[data-size="32"] {
  --_it-size: var(--dk-component-icon-tile-32-size);
  --_it-icon-size: var(--dk-component-icon-tile-32-icon-size);
}
.dk-component-icon-tile[data-size="40"] {
  --_it-size: var(--dk-component-icon-tile-40-size);
  --_it-icon-size: var(--dk-component-icon-tile-40-icon-size);
}
.dk-component-icon-tile[data-size="56"] {
  --_it-size: var(--dk-component-icon-tile-56-size);
  --_it-icon-size: var(--dk-component-icon-tile-56-icon-size);
}
.dk-component-icon-tile[data-size="64"] {
  --_it-size: var(--dk-component-icon-tile-64-size);
  --_it-icon-size: var(--dk-component-icon-tile-64-icon-size);
}

/* ON A SOLID TONE PANEL the tone remaps neutral copy to the status's pale
   on-solid colour, which is right for words and wrong on the light grey
   neutral tint: the default tile measured 1.00:1 there. So the tint becomes a
   veil of the panel's own on-solid colour, a translucent chip, and the pale
   glyph reads against the saturated fill behind it. Only the neutral subtle
   tile needs it: a status tint keeps its own on-tint glyph, which no tone
   remaps, and a solid tile brings its own fill. */
[data-tone-fill="solid"] .dk-component-icon-tile:not([data-status], [data-hue], [data-variant="solid"]) {
  --_it-tint: color-mix(in srgb, var(--dk-text-default) 16%, transparent);
}

/* ── Status: write the slots ─────────────────────────────────────────────── */
.dk-component-icon-tile[data-status="primary"] {
  --_it-tint: var(--dk-surface-primary-subtle);
  --_it-tint-deep: var(--dk-surface-primary-subtle-hover);
  --_it-tint-hover: var(--dk-surface-primary-subtle-focus);
  --_it-tint-active: var(--dk-surface-primary-subtle-active);
  --_it-tint-glyph: var(--dk-text-primary-on-subtle);
  --_it-solid: var(--dk-component-icon-tile-primary-solid);
  --_it-on-solid: var(--dk-icon-on-primary-mark);
}
.dk-component-icon-tile[data-status="success"] {
  --_it-tint: var(--dk-surface-success-subtle);
  --_it-tint-deep: var(--dk-surface-success-subtle-hover);
  --_it-tint-hover: var(--dk-surface-success-subtle-focus);
  --_it-tint-active: var(--dk-surface-success-subtle-active);
  --_it-tint-glyph: var(--dk-text-success-on-subtle);
  --_it-solid: var(--dk-component-icon-tile-success-solid);
  --_it-on-solid: var(--dk-icon-on-success-mark);
}
.dk-component-icon-tile[data-status="error"] {
  --_it-tint: var(--dk-surface-error-subtle);
  --_it-tint-deep: var(--dk-surface-error-subtle-hover);
  --_it-tint-hover: var(--dk-surface-error-subtle-focus);
  --_it-tint-active: var(--dk-surface-error-subtle-active);
  --_it-tint-glyph: var(--dk-text-error-on-subtle);
  --_it-solid: var(--dk-component-icon-tile-error-solid);
  --_it-on-solid: var(--dk-icon-on-error-mark);
}
.dk-component-icon-tile[data-status="warning"] {
  --_it-tint: var(--dk-surface-warning-subtle);
  --_it-tint-deep: var(--dk-surface-warning-subtle-hover);
  --_it-tint-hover: var(--dk-surface-warning-subtle-focus);
  --_it-tint-active: var(--dk-surface-warning-subtle-active);
  --_it-tint-glyph: var(--dk-text-warning-on-subtle);
  --_it-solid: var(--dk-component-icon-tile-warning-solid);
  --_it-on-solid: var(--dk-icon-on-warning-mark);
}
.dk-component-icon-tile[data-status="information"] {
  --_it-tint: var(--dk-surface-information-subtle);
  --_it-tint-deep: var(--dk-surface-information-subtle-hover);
  --_it-tint-hover: var(--dk-surface-information-subtle-focus);
  --_it-tint-active: var(--dk-surface-information-subtle-active);
  --_it-tint-glyph: var(--dk-text-information-on-subtle);
  --_it-solid: var(--dk-component-icon-tile-information-solid);
  --_it-on-solid: var(--dk-icon-on-information-mark);
}

/* ── Hue: the same slots, for a category rather than a status ──────────────
   Each value is named, never a bare [data-hue], so an unknown hue is a neutral
   tile rather than an empty one. */
.dk-component-icon-tile[data-hue="prev4"] {
  --_it-tint: var(--dk-surface-hue-prev4-subtle);
  --_it-tint-glyph: var(--dk-text-hue-prev4-on-subtle);
  --_it-solid: var(--dk-surface-hue-prev4-solid);
  --_it-on-solid: var(--dk-text-hue-on-solid);
}
.dk-component-icon-tile[data-hue="prev3"] {
  --_it-tint: var(--dk-surface-hue-prev3-subtle);
  --_it-tint-glyph: var(--dk-text-hue-prev3-on-subtle);
  --_it-solid: var(--dk-surface-hue-prev3-solid);
  --_it-on-solid: var(--dk-text-hue-on-solid);
}
.dk-component-icon-tile[data-hue="prev2"] {
  --_it-tint: var(--dk-surface-hue-prev2-subtle);
  --_it-tint-glyph: var(--dk-text-hue-prev2-on-subtle);
  --_it-solid: var(--dk-surface-hue-prev2-solid);
  --_it-on-solid: var(--dk-text-hue-on-solid);
}
.dk-component-icon-tile[data-hue="prev1"] {
  --_it-tint: var(--dk-surface-hue-prev1-subtle);
  --_it-tint-glyph: var(--dk-text-hue-prev1-on-subtle);
  --_it-solid: var(--dk-surface-hue-prev1-solid);
  --_it-on-solid: var(--dk-text-hue-on-solid);
}
.dk-component-icon-tile[data-hue="primary"] {
  --_it-tint: var(--dk-surface-hue-primary-subtle);
  --_it-tint-glyph: var(--dk-text-hue-primary-on-subtle);
  --_it-solid: var(--dk-surface-hue-primary-solid);
  --_it-on-solid: var(--dk-text-hue-on-solid);
}
.dk-component-icon-tile[data-hue="next1"] {
  --_it-tint: var(--dk-surface-hue-next1-subtle);
  --_it-tint-glyph: var(--dk-text-hue-next1-on-subtle);
  --_it-solid: var(--dk-surface-hue-next1-solid);
  --_it-on-solid: var(--dk-text-hue-on-solid);
}
.dk-component-icon-tile[data-hue="next2"] {
  --_it-tint: var(--dk-surface-hue-next2-subtle);
  --_it-tint-glyph: var(--dk-text-hue-next2-on-subtle);
  --_it-solid: var(--dk-surface-hue-next2-solid);
  --_it-on-solid: var(--dk-text-hue-on-solid);
}
.dk-component-icon-tile[data-hue="next3"] {
  --_it-tint: var(--dk-surface-hue-next3-subtle);
  --_it-tint-glyph: var(--dk-text-hue-next3-on-subtle);
  --_it-solid: var(--dk-surface-hue-next3-solid);
  --_it-on-solid: var(--dk-text-hue-on-solid);
}
.dk-component-icon-tile[data-hue="next4"] {
  --_it-tint: var(--dk-surface-hue-next4-subtle);
  --_it-tint-glyph: var(--dk-text-hue-next4-on-subtle);
  --_it-solid: var(--dk-surface-hue-next4-solid);
  --_it-on-solid: var(--dk-text-hue-on-solid);
}

/* ── Variant: spend the slots ────────────────────────────────────────────── */
/* subtle is the default and is already expressed in the base rule. */
.dk-component-icon-tile[data-variant="solid"] {
  --_it-bg: var(--_it-solid);
  --_it-glyph: var(--_it-on-solid);
}

/* ── In a clickable thing (15 Oct) ───────────────────────────────────────────
   A tile follows the state of the data-interactive element it sits in, keyed
   off the same states the utility reads (kit/interactive.css), word for word:
   quiet, a rung deeper tint so it keeps contrast on a nested or a hover fill,
   and a rung more on hover and on press, with the element;
   highlighted, its own solid; selected, inverted (the selected item's words
   as its fill, its fill as the glyph); disabled, the disabled fill and glyph.
   A hue without a deeper tint keeps its own. Selected and disabled double the
   class to outweigh data-variant="solid". */
:where([data-interactive]) .dk-component-icon-tile {
  --_it-bg: var(--_it-tint-deep, var(--_it-tint));
}
:where([data-interactive][data-pseudo-class="hover"]) .dk-component-icon-tile {
  --_it-bg: var(--_it-tint-hover, var(--_it-tint-deep, var(--_it-tint)));
}
@media (hover: hover) {
  :where([data-interactive]:hover:not(:has(:is(.dk-component-button, .dk-component-icon-button, .dk-component-dropdown__trigger, .dk-component-select__trigger, .dk-component-checkbox, .dk-component-radio, .dk-component-switch, .dk-component-input__field, input, select, textarea, [data-interactive]):hover))) .dk-component-icon-tile {
    --_it-bg: var(--_it-tint-hover, var(--_it-tint-deep, var(--_it-tint)));
  }
}
:where([data-interactive]:active:not(:has(:is(.dk-component-button, .dk-component-icon-button, .dk-component-dropdown__trigger, .dk-component-select__trigger, .dk-component-checkbox, .dk-component-radio, .dk-component-switch, .dk-component-input__field, input, select, textarea, [data-interactive]):active)), [data-interactive][data-pseudo-class="active"]) .dk-component-icon-tile {
  --_it-bg: var(--_it-tint-active, var(--_it-tint-hover, var(--_it-tint-deep, var(--_it-tint))));
}
:where([data-interactive]:is([aria-checked="true"], [aria-multiselectable="true"] [aria-selected="true"], [data-highlighted]:not([data-highlighted="false"]))) .dk-component-icon-tile {
  --_it-bg: color-mix(in srgb, var(--_it-solid), var(--dk-interactive-mark-shade) calc(var(--_ia-mark) * var(--dk-interactive-mark-reach)));
  --_it-glyph: var(--_it-on-solid);
}
:where([data-interactive]:is([aria-checked="true"], [aria-multiselectable="true"] [aria-selected="true"], [data-highlighted]:not([data-highlighted="false"])):is([data-pseudo-class="hover"])) .dk-component-icon-tile {
  --_it-bg: color-mix(in srgb, var(--_it-solid), var(--dk-interactive-mark-shade) calc(var(--_ia-mark-hover) * var(--dk-interactive-mark-reach)));
}
@media (hover: hover) {
  :where([data-interactive]:is([aria-checked="true"], [aria-multiselectable="true"] [aria-selected="true"], [data-highlighted]:not([data-highlighted="false"])):is(:hover)) .dk-component-icon-tile {
    --_it-bg: color-mix(in srgb, var(--_it-solid), var(--dk-interactive-mark-shade) calc(var(--_ia-mark-hover) * var(--dk-interactive-mark-reach)));
  }
}
:where([data-interactive]:is([aria-checked="true"], [aria-multiselectable="true"] [aria-selected="true"], [data-highlighted]:not([data-highlighted="false"])):is(:active, [data-pseudo-class="active"])) .dk-component-icon-tile {
  --_it-bg: color-mix(in srgb, var(--_it-solid), var(--dk-interactive-mark-shade) calc(var(--_ia-mark-active) * var(--dk-interactive-mark-reach)));
}
:where([data-interactive]:is([aria-current]:not([aria-current="false"], [aria-current=""]), [aria-pressed="true"], [aria-selected="true"]:not([aria-multiselectable="true"] *))) .dk-component-icon-tile.dk-component-icon-tile {
  --_it-bg: var(--dk-interactive-selected-text);
  --_it-glyph: var(--dk-interactive-selected-surface);
}
/* Disabled, in a disabled clickable thing or on its own. */
:where([data-interactive]:is(:disabled, [aria-disabled="true"])) .dk-component-icon-tile.dk-component-icon-tile,
.dk-component-icon-tile[data-disabled] {
  /* A rung deeper than a nested fill, stepping with the level, so the tile
     keeps its shape on a disabled card; the disabled solid is a fixed grey. */
  --_it-bg: var(--dk-surface-nested-hover);
  --_it-glyph: var(--dk-icon-disabled-default);
}

/* ═══════════════════════════ drift-kit:layer components/section-heading/styles.css ═══════════════════════════ */
/* ── Section heading ─────────────────────────────────────────────────────────
   An optional glyph beside a title and a line under it, heading a list or a
   card from outside (inside a Box, its own __header does this job).

   Purpose: A glyph beside a title and a line under it, heading a list or a
     card from outside.

   Anatomy:
     div.dk-component-section-heading[data-size][data-tone]
       span.__icon?            a kit Icon, a Lucide <i>, an <svg>
       div.__content
         h2..h6.__title        the author's level (h1 for a page's at large)
         p.__description?

   THE LEVEL IS THE AUTHOR'S. The class sizes the words; the element says where
   they sit in the outline, so a small heading can be an h2 on one page and an
   h4 in a nested section without a size changing.

   The glyph sits on the title's first line, not the middle of the block, so a
   heading with a line under it still reads as glyph-then-title. ── */
.dk-component-section-heading {
  --_sh-gap: var(--dk-component-section-heading-gap);
  --_sh-content-gap: var(--dk-component-section-heading-content-gap);
  --_sh-icon: var(--dk-component-section-heading-small-icon-size);
  --_sh-icon-color: var(--dk-component-section-heading-icon-color);
  --_sh-title-family: var(--dk-component-section-heading-title-font-family);
  --_sh-title-weight: var(--dk-component-section-heading-title-font-weight);
  --_sh-title-size: var(--dk-component-section-heading-small-title-font-size);
  --_sh-title-line: var(--dk-component-section-heading-small-title-line-height);
  --_sh-description-size: var(--dk-component-section-heading-small-description-font-size);
  --_sh-description-line: var(--dk-component-section-heading-small-description-line-height);
  display: flex;
  align-items: flex-start;
  gap: var(--_sh-gap);
  min-width: 0;
  color: var(--dk-component-section-heading-title-color);
}
.dk-component-section-heading[hidden] { display: none; }
.dk-component-section-heading[data-size="medium"] {
  --_sh-icon: var(--dk-component-section-heading-medium-icon-size);
  --_sh-title-size: var(--dk-component-section-heading-medium-title-font-size);
  --_sh-title-line: var(--dk-component-section-heading-medium-title-line-height);
  --_sh-description-size: var(--dk-component-section-heading-medium-description-font-size);
  --_sh-description-line: var(--dk-component-section-heading-medium-description-line-height);
}
.dk-component-section-heading[data-size="large"] {
  --_sh-gap: var(--dk-component-section-heading-large-gap);
  --_sh-content-gap: var(--dk-component-section-heading-large-content-gap);
  --_sh-icon: var(--dk-component-section-heading-large-icon-size);
  --_sh-title-family: var(--dk-component-section-heading-large-title-font-family);
  --_sh-title-weight: var(--dk-component-section-heading-large-title-font-weight);
  --_sh-title-size: var(--dk-component-section-heading-large-title-font-size);
  --_sh-title-line: var(--dk-component-section-heading-large-title-line-height);
  --_sh-description-size: var(--dk-component-section-heading-large-description-font-size);
  --_sh-description-line: var(--dk-component-section-heading-large-description-line-height);
}
.dk-component-section-heading[data-tone="neutral"] { --_sh-icon-color: var(--dk-component-section-heading-icon-neutral-color); }

/* The glyph's box is the title's first line, so the glyph centres on it. */
.dk-component-section-heading__icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  height: max(var(--_sh-icon), var(--_sh-title-line));
  color: var(--_sh-icon-color);
}
/* [data-size] lifts this to the weight of a kit Icon's own size rules, and the
   manifest loads this file after Icon's, so the heading's size wins. */
.dk-component-section-heading__icon > :is(svg, i, img, [data-size]) {
  display: block;
  width: var(--_sh-icon);
  height: var(--_sh-icon);
  flex: none;
}
.dk-component-section-heading__content {
  display: flex;
  flex-direction: column;
  gap: var(--_sh-content-gap);
  min-width: 0;
  /* Centred on the glyph when the title is one line and the glyph is taller. */
  align-self: center;
}
.dk-component-section-heading__title {
  margin: 0;
  font-family: var(--_sh-title-family);
  font-size: var(--_sh-title-size);
  line-height: var(--_sh-title-line);
  font-weight: var(--_sh-title-weight);
  color: var(--dk-component-section-heading-title-color);
  overflow-wrap: anywhere;
}
.dk-component-section-heading__description {
  margin: 0;
  font-family: var(--dk-component-section-heading-title-font-family);
  font-size: var(--_sh-description-size);
  line-height: var(--_sh-description-line);
  font-weight: var(--dk-component-section-heading-description-font-weight);
  color: var(--dk-component-section-heading-description-color);
}

/* ═══════════════════════════════ drift-kit:layer components/detail-list/styles.css ═══════════════════════════════ */
/* ── Detail list ─────────────────────────────────────────────────────────────
   Rows of a glyph, a title and a line, with a value at the end: what a
   subscription includes, the fees to avoid, what a payment is made of.

   Purpose: Rows of a glyph, a title and a line, with a value at the end, on
     a hairline between rows.

   Anatomy:
     ul.dk-component-detail-list[data-size]
       li.__row
         span.__media?          usually an Icon tile; the author picks its size
         div.__body
           span.__title
           span.__description?
         div.__aside?           span.__value + span.__note?
         div.__actions?         a Link, a Button, an icon button

   A LIST, NOT A STACK OF BORDERED ROWS. The hairline is BETWEEN rows, drawn by
   the list, so the last row never needs telling that it is last (the CL made
   every caller pass showBorder={i !== last}). Put it in a Box for an edge.

   NOT INTERACTIVE. A row has no hover or press of its own; what a row does is
   a control in __actions.
   ── */
.dk-component-detail-list {
  --_dl-pad: var(--dk-component-detail-list-medium-padding-block);
  --_dl-gap: var(--dk-component-detail-list-medium-gap);
  --_dl-body-gap: var(--dk-component-detail-list-body-gap);
  --_dl-title-size: var(--dk-component-detail-list-title-font-size);
  --_dl-title-line: var(--dk-component-detail-list-title-line-height);
  --_dl-description-size: var(--dk-component-detail-list-description-font-size);
  --_dl-description-line: var(--dk-component-detail-list-description-line-height);
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-family: var(--dk-component-detail-list-font-family);
}
.dk-component-detail-list[hidden] { display: none; }
.dk-component-detail-list[data-size="small"] {
  --_dl-pad: var(--dk-component-detail-list-small-padding-block);
  --_dl-gap: var(--dk-component-detail-list-small-gap);
  --_dl-body-gap: var(--dk-component-detail-list-small-body-gap);
  --_dl-title-size: var(--dk-component-detail-list-small-title-font-size);
  --_dl-title-line: var(--dk-component-detail-list-small-title-line-height);
  --_dl-description-size: var(--dk-component-detail-list-small-description-font-size);
  --_dl-description-line: var(--dk-component-detail-list-small-description-line-height);
}
.dk-component-detail-list[data-size="large"] {
  --_dl-pad: var(--dk-component-detail-list-large-padding-block);
  --_dl-gap: var(--dk-component-detail-list-large-gap);
  --_dl-title-size: var(--dk-component-detail-list-large-title-font-size);
  --_dl-title-line: var(--dk-component-detail-list-large-title-line-height);
  --_dl-description-size: var(--dk-component-detail-list-large-description-font-size);
  --_dl-description-line: var(--dk-component-detail-list-large-description-line-height);
}
.dk-component-detail-list__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--_dl-gap);
  margin: 0;
  padding: var(--_dl-pad) 0;
}
.dk-component-detail-list__row[hidden] { display: none; }
/* After any visible row, not just the one right before it: with a plain
   adjacent rule, a hidden first row left the first visible row a top line. */
.dk-component-detail-list__row:not([hidden]) ~ .dk-component-detail-list__row {
  border-top: var(--dk-component-detail-list-divider-width) solid var(--dk-component-detail-list-divider);
}
.dk-component-detail-list__media {
  flex: none;
  display: inline-grid;
  place-items: center;
}
/* THE BODY KEEPS A FLOOR, so on a narrow row (a phone, a small card) the
   aside drops under it, kept to the end, instead of squeezing the words into
   a column a word wide (measured: 79px at 360 before this). */
.dk-component-detail-list__body {
  flex: 1 1 var(--dk-component-detail-list-body-min-width);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--_dl-body-gap);
}
.dk-component-detail-list__title {
  font-size: var(--_dl-title-size);
  line-height: var(--_dl-title-line);
  font-weight: var(--dk-component-detail-list-title-font-weight);
  color: var(--dk-component-detail-list-title-color);
  overflow-wrap: anywhere;
}
.dk-component-detail-list__description {
  font-size: var(--_dl-description-size);
  line-height: var(--_dl-description-line);
  font-weight: var(--dk-component-detail-list-description-font-weight);
  color: var(--dk-component-detail-list-description-color);
  overflow-wrap: anywhere;
}
.dk-component-detail-list__aside {
  flex: none;
  margin-inline-start: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--_dl-body-gap);
  text-align: end;
}
.dk-component-detail-list__value {
  font-size: var(--_dl-title-size);
  line-height: var(--_dl-title-line);
  font-weight: var(--dk-component-detail-list-value-font-weight);
  color: var(--dk-component-detail-list-value-color);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dk-component-detail-list__note {
  font-size: var(--_dl-description-size);
  line-height: var(--_dl-description-line);
  font-weight: var(--dk-component-detail-list-note-font-weight);
  color: var(--dk-component-detail-list-note-color);
}
/* THE ACTIONS STAND APART: the row's gap again on top of the gap before them,
   so a link reads as something to do rather than part of the value. They keep
   to the end of the row, including when the end wraps under the body; after
   an aside the aside's auto margin does that, and a second one would split
   the room between them. */
.dk-component-detail-list__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--dk-component-detail-list-actions-gap);
  margin-inline-start: auto;
  padding-inline-start: var(--_dl-gap);
}
.dk-component-detail-list__aside + .dk-component-detail-list__actions { margin-inline-start: 0; }

/* ═════════════════════════════ drift-kit:layer components/price-summary/styles.css ═════════════════════════════ */
/* ── Price summary ───────────────────────────────────────────────────────────
   Labelled amounts on hairlines, then their total.

   Purpose: Labelled amounts on hairlines, then their total with a note under
     it. Credits in the brand tone.

   Anatomy:
     dl.dk-component-price-summary
       div.__row                    dt.__label + dd.__amount[data-tone="credit"]?
       …
       div.__row[data-total]        dt.__label + dd.__amount (+ span.__note?)

   A DEFINITION LIST, because that is what it is: each label names its amount,
   and a screen reader says so ("Subtotal, $1,200.00"). The CL drew it in divs
   and spans. A div around each pair is allowed in a dl and is what lets a row
   carry its hairline.

   A CREDIT IS SAID, NOT ONLY COLOURED: write the minus ("-$300.00") as the CL's
   screen did; the success colour is the second signal, never the only one. ── */
.dk-component-price-summary {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  min-width: 0;
  font-family: var(--dk-component-price-summary-font-family);
}
.dk-component-price-summary[hidden] { display: none; }
.dk-component-price-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--dk-component-price-summary-row-gap);
  padding: var(--dk-component-price-summary-row-padding-block) 0;
  border-bottom: var(--dk-component-price-summary-divider-width) solid var(--dk-component-price-summary-divider);
}
.dk-component-price-summary__row[hidden] { display: none; }
.dk-component-price-summary :is(.dk-component-price-summary__label, .dk-component-price-summary__amount) {
  margin: 0;
  min-width: 0;
}
.dk-component-price-summary__label {
  font-size: var(--dk-component-price-summary-label-font-size);
  line-height: var(--dk-component-price-summary-label-line-height);
  font-weight: var(--dk-component-price-summary-label-font-weight);
  letter-spacing: var(--dk-component-price-summary-label-letter-spacing);
  text-transform: uppercase;
  color: var(--dk-component-price-summary-label-color);
}
.dk-component-price-summary__amount {
  font-size: var(--dk-component-price-summary-amount-font-size);
  line-height: var(--dk-component-price-summary-amount-line-height);
  font-weight: var(--dk-component-price-summary-amount-font-weight);
  color: var(--dk-component-price-summary-amount-color);
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}
.dk-component-price-summary__amount[data-tone="credit"] { color: var(--dk-component-price-summary-credit-color); }

/* ── The total ── */
.dk-component-price-summary__row[data-total] {
  /* The label sits on the middle of the amount and its note. */
  align-items: center;
  padding: var(--dk-component-price-summary-total-padding-block) 0;
  border-bottom: 0;
}
.dk-component-price-summary__row[data-total] .dk-component-price-summary__label {
  font-size: var(--dk-component-price-summary-total-label-font-size);
  line-height: var(--dk-component-price-summary-total-label-line-height);
  letter-spacing: normal;
  text-transform: none;
  color: var(--dk-component-price-summary-total-label-color);
}
.dk-component-price-summary__row[data-total] .dk-component-price-summary__amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: var(--dk-component-price-summary-total-amount-font-size);
  line-height: var(--dk-component-price-summary-total-amount-line-height);
  color: var(--dk-component-price-summary-total-amount-color);
}
.dk-component-price-summary__note {
  font-size: var(--dk-component-price-summary-note-font-size);
  line-height: var(--dk-component-price-summary-note-line-height);
  font-weight: var(--dk-component-price-summary-note-font-weight);
  color: var(--dk-component-price-summary-note-color);
  white-space: normal;
}

/* ════════════════════════════════════ drift-kit:layer components/avatar/styles.css ════════════════════════════════════ */
/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  Avatar                                                                  ║
   ║    span.dk-component-avatar[data-size][data-variant][data-hue]           ║
   ║      img                       optional; fades in once it has decoded    ║
   ║      span.__initials           always there, under the photo             ║
   ║                                                                          ║
   ║  THE INITIALS ARE THE FLOOR, the photo the ceiling. The initials paint at ║
   ║  once, the photo fades in over them when it has actually decoded, and    ║
   ║  only then do the initials go: the disc under a loaded photo fringes     ║
   ║  through its antialiased rim as a coloured sliver otherwise. A photo     ║
   ║  that fails leaves the initials, so a broken URL is never a broken icon. ║
   ║  The runtime writes data-loaded; without the runtime a photo still shows ║
   ║  (it is only the fade and the fallback that need it).                    ║
   ╚══════════════════════════════════════════════════════════════════════════╝

   Purpose: A person, as their photo or their initials: the photo fades in
     once it has loaded, and the initials stay if it never does.

   Anatomy:
     span.dk-component-avatar[data-name][data-size="24|40|48|<px>"]?[data-variant="solid|ringed"]?[data-hue]?
       img?                          (the photo; the runtime sets data-loaded)
       span.__initials             (written by the runtime from data-name, unless written in it)

   ANY SIZE (22 Oct 2026): a data-size other than 24, 40 or 48 is that many
   pixels. No rule here draws it: the runtime (and React) write the two
   private slots, --_av-size and --_av-font-size (a quarter of the size plus
   4px, the step the named sizes follow), on the element itself.
   */
.dk-component-avatar {
  --_av-size: var(--dk-component-avatar-32-size);
  --_av-font-size: var(--dk-component-avatar-32-font-size);
  --_av-rest: var(--dk-component-avatar-subtle-surface);
  --_av-fg: var(--dk-component-avatar-subtle-text);
  --_av-mix-to: var(--_av-fg);
  --_av-bg: var(--_av-rest);
  --_av-edge: color-mix(in srgb, var(--_av-bg), var(--_av-mix-to) var(--dk-component-avatar-edge-mix));
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--_av-size);
  height: var(--_av-size);
  border-radius: var(--dk-component-avatar-radius);
  background: var(--_av-bg);
  color: var(--_av-fg);
  overflow: hidden;
  vertical-align: middle;
  user-select: none;
  transition: background-color var(--dk-component-avatar-transition-duration) var(--dk-component-avatar-fade-easing);
}
.dk-component-avatar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--_av-edge);
  pointer-events: none;
  /* The veil an interactive photo steps by, above the picture. */
  z-index: 1;
  transition: background-color var(--dk-component-avatar-transition-duration) var(--dk-component-avatar-fade-easing);
}
.dk-component-avatar[data-size="24"] { --_av-size: var(--dk-component-avatar-24-size); --_av-font-size: var(--dk-component-avatar-24-font-size); }
.dk-component-avatar[data-size="40"] { --_av-size: var(--dk-component-avatar-40-size); --_av-font-size: var(--dk-component-avatar-40-font-size); }
.dk-component-avatar[data-size="48"] { --_av-size: var(--dk-component-avatar-48-size); --_av-font-size: var(--dk-component-avatar-48-font-size); }

.dk-component-avatar__initials {
  grid-area: 1 / 1;
  font-family: var(--dk-component-avatar-font-family);
  font-size: var(--_av-font-size);
  font-weight: var(--dk-component-avatar-font-weight);
  letter-spacing: var(--dk-component-avatar-letter-spacing);
  line-height: 1;
  text-transform: uppercase;
  transition: opacity var(--dk-component-avatar-fade-duration) var(--dk-component-avatar-fade-easing);
}
.dk-component-avatar > img {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transition: opacity var(--dk-component-avatar-fade-duration) var(--dk-component-avatar-fade-easing);
}
/* The runtime holds a photo back until it has decoded, then lets it in. */
.dk-component-avatar[data-loaded="false"] > img { opacity: 0; }
.dk-component-avatar[data-loaded="error"] > img { display: none; }
.dk-component-avatar[data-loaded="true"] .dk-component-avatar__initials { opacity: 0; }
.dk-component-avatar[data-loaded="true"] { --_av-edge: var(--dk-component-avatar-ring); }

.dk-component-avatar[data-variant="solid"] {
  --_av-rest: var(--dk-component-avatar-solid-surface);
  --_av-fg: var(--dk-component-avatar-solid-text);
  --_av-mix-to: var(--dk-component-avatar-solid-mix-to);
}
/* RINGED (11 Nov 2026, Julio): the person's mark on their own profile. The
   primary fill, white initials, and a thick light primary ring inside the
   edge, so it adds nothing to the size. */
.dk-component-avatar[data-variant="ringed"] {
  --_av-rest: var(--dk-component-avatar-ringed-surface);
  --_av-fg: var(--dk-component-avatar-ringed-text);
  --_av-edge: var(--dk-component-avatar-ringed-ring);
}
.dk-component-avatar[data-variant="ringed"]::after {
  box-shadow: inset 0 0 0 var(--dk-component-avatar-ringed-ring-width) var(--_av-edge);
}
/* Tag's category hues, so a list of people can tell one from the next without
   a photo. Each named; an unknown hue stays primary. */
.dk-component-avatar[data-hue="prev4"] { --_av-rest: var(--dk-surface-hue-prev4-subtle); --_av-fg: var(--dk-text-hue-prev4-on-subtle); }
.dk-component-avatar[data-hue="prev3"] { --_av-rest: var(--dk-surface-hue-prev3-subtle); --_av-fg: var(--dk-text-hue-prev3-on-subtle); }
.dk-component-avatar[data-hue="prev2"] { --_av-rest: var(--dk-surface-hue-prev2-subtle); --_av-fg: var(--dk-text-hue-prev2-on-subtle); }
.dk-component-avatar[data-hue="prev1"] { --_av-rest: var(--dk-surface-hue-prev1-subtle); --_av-fg: var(--dk-text-hue-prev1-on-subtle); }
.dk-component-avatar[data-hue="primary"] { --_av-rest: var(--dk-surface-hue-primary-subtle); --_av-fg: var(--dk-text-hue-primary-on-subtle); }
.dk-component-avatar[data-hue="next1"] { --_av-rest: var(--dk-surface-hue-next1-subtle); --_av-fg: var(--dk-text-hue-next1-on-subtle); }
.dk-component-avatar[data-hue="next2"] { --_av-rest: var(--dk-surface-hue-next2-subtle); --_av-fg: var(--dk-text-hue-next2-on-subtle); }
.dk-component-avatar[data-hue="next3"] { --_av-rest: var(--dk-surface-hue-next3-subtle); --_av-fg: var(--dk-text-hue-next3-on-subtle); }
.dk-component-avatar[data-hue="next4"] { --_av-rest: var(--dk-surface-hue-next4-subtle); --_av-fg: var(--dk-text-hue-next4-on-subtle); }

/* ── An avatar that does something ───────────────────────────────────────────
   An <a> or a <button> with the class: a profile link, an account menu.
   Hover and press deepen the fill toward the same colour the edge leans to,
   and the edge follows the fill, so the whole disc steps. It must be named
   (aria-label): the name beside it is not inside it. */
button.dk-component-avatar {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  cursor: pointer;
}
a.dk-component-avatar { text-decoration: none; cursor: pointer; }
@media (hover: hover) {
  :is(a, button).dk-component-avatar:hover {
    --_av-bg: color-mix(in srgb, var(--_av-rest), var(--_av-mix-to) var(--dk-component-avatar-hover-mix));
  }
}
:is(a, button).dk-component-avatar:active {
  --_av-bg: color-mix(in srgb, var(--_av-rest), var(--_av-mix-to) var(--dk-component-avatar-active-mix));
}
:is(a, button).dk-component-avatar:focus-visible {
  outline: var(--dk-component-avatar-focus-ring-width) solid var(--dk-component-avatar-focus-ring);
  outline-offset: var(--dk-component-avatar-focus-ring-width);
}
@media (hover: hover) {
  :is(a, button).dk-component-avatar[data-loaded="true"]:hover::after { background: var(--dk-component-avatar-photo-hover); }
}
:is(a, button).dk-component-avatar[data-loaded="true"]:active::after { background: var(--dk-component-avatar-photo-active); }

/* ══════════════════════════════════════ drift-kit:layer components/logo/styles.css ══════════════════════════════════════ */
/* ── Logo ───────────────────────────────────────────────────────────────────
   span.dk-component-logo[data-lockup][data-mode][data-size] > svg > path[data-part]
   The svg is injected by behaviour.js for the nearest data-brand, or rendered
   inline by React. Roles take their colour from the mode's slots. ──

   Purpose: The brand mark, as a symbol or with its wordmark, in three
     colourways.

   Anatomy:
     span.dk-component-logo[data-brand="karmo|mykarmo"]?[data-lockup="symbol|symbol-text"]?[data-mode="reverse"]?[data-size]?[role="img"][aria-label]
       (the vectors are drawn by the runtime; data-brand on the logo itself
       picks the mark without changing the page's brand, else the nearest
       data-brand's mark is drawn, Karmo's when there is none; React's brand
       prop is the same choice)
   */
.dk-component-logo {
  --_logo-secondary: var(--dk-component-logo-default-secondary);
  --_logo-primary: var(--dk-component-logo-default-primary);
  display: flex;
  width: 100%;
  line-height: 0;
}
.dk-component-logo[data-mode="reverse"] {
  --_logo-secondary: var(--dk-component-logo-reverse-secondary);
  --_logo-primary: var(--dk-component-logo-reverse-primary);
}
.dk-component-logo[data-mode="neutral"] {
  --_logo-secondary: var(--dk-component-logo-neutral-secondary);
  --_logo-primary: var(--dk-component-logo-neutral-primary);
}
.dk-component-logo > svg { display: block; width: 100%; height: auto; }
.dk-component-logo [data-part="secondary"] { fill: var(--_logo-secondary); }
.dk-component-logo [data-part="primary"] { fill: var(--_logo-primary); }

/* A size fixes the height and lets the width follow, so a sized logo sits in a
   row instead of stretching across it. */
.dk-component-logo[data-size] { display: inline-flex; width: auto; }
.dk-component-logo[data-size] > svg { width: auto; height: var(--_logo-height); }
.dk-component-logo[data-size="small"] { --_logo-height: var(--dk-component-logo-small-height); }
.dk-component-logo[data-size="medium"] { --_logo-height: var(--dk-component-logo-medium-height); }
.dk-component-logo[data-size="large"] { --_logo-height: var(--dk-component-logo-large-height); }
.dk-component-logo[data-size="xlarge"] { --_logo-height: var(--dk-component-logo-xlarge-height); }

/* ═══════════════════════════ drift-kit:layer components/loading-spinner/styles.css ═══════════════════════════ */
/* ── Loading spinner ────────────────────────────────────────────────────────
   div.dk-component-loading-spinner[data-size][data-animation] > .dk-component-logo
   The arc is ::after: a round cap (radial-gradient) at the top of a conic
   sweep, masked to a ring. Exact CL construction. ──

   Purpose: The brand symbol inside a sweeping arc. It spins for at least
     half a second, so a fast load does not flash, and tells you when it has
     gone.

   Anatomy:
     div.dk-component-loading-spinner[data-size="small|medium|large"]?
       span.__message?
       (the arc and the brand symbol are drawn by the runtime)
   */
.dk-component-loading-spinner {
  --_spin-logo: var(--dk-component-loading-spinner-medium-logo-size);
  --_spin-gap: var(--dk-component-loading-spinner-medium-gap);
  --_spin-stroke: var(--dk-component-loading-spinner-medium-stroke);
  --_spin-color: var(--dk-component-loading-spinner-color);
  --_spin-tail-start: var(--dk-component-loading-spinner-tail-start);
  --_spin-duration: var(--dk-component-loading-spinner-spin-duration);
  position: relative;
  display: inline-flex;
  padding: var(--_spin-gap);
  animation: dk-component-loading-spinner-enter var(--dk-component-loading-spinner-enter-duration) var(--dk-component-loading-spinner-enter-easing) forwards;
}
.dk-component-loading-spinner[data-size="small"] {
  --_spin-logo: var(--dk-component-loading-spinner-small-logo-size);
  --_spin-gap: var(--dk-component-loading-spinner-small-gap);
  --_spin-stroke: var(--dk-component-loading-spinner-small-stroke);
}
.dk-component-loading-spinner[data-size="large"] {
  --_spin-logo: var(--dk-component-loading-spinner-large-logo-size);
  --_spin-gap: var(--dk-component-loading-spinner-large-gap);
  --_spin-stroke: var(--dk-component-loading-spinner-large-stroke);
}
.dk-component-loading-spinner[data-color="neutral"] { --_spin-color: var(--dk-component-loading-spinner-neutral-color); }

/* ── The ring on its own: no logo, no gap, the ring IS the box. ── */
.dk-component-loading-spinner[data-variant="ring"] {
  --_spin-ring: var(--dk-component-loading-spinner-ring-medium-size);
  --_spin-tail-start: var(--dk-component-loading-spinner-ring-tail-start);
  --_spin-duration: var(--dk-component-loading-spinner-ring-spin-duration);
  padding: 0;
  width: var(--_spin-ring);
  height: var(--_spin-ring);
  box-sizing: border-box;
  vertical-align: middle;
}
.dk-component-loading-spinner[data-variant="ring"] > .dk-component-logo { display: none; }
.dk-component-loading-spinner[data-variant="ring"][data-size="xsmall"] {
  --_spin-ring: var(--dk-component-loading-spinner-ring-xsmall-size);
  --_spin-stroke: var(--dk-component-loading-spinner-ring-xsmall-stroke);
}
.dk-component-loading-spinner[data-variant="ring"][data-size="small"] { --_spin-ring: var(--dk-component-loading-spinner-ring-small-size); }
.dk-component-loading-spinner[data-variant="ring"][data-size="large"] { --_spin-ring: var(--dk-component-loading-spinner-ring-large-size); }

.dk-component-loading-spinner > .dk-component-logo { width: var(--_spin-logo); height: var(--_spin-logo); }
.dk-component-loading-spinner::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(farthest-side, var(--_spin-color) 80%, #0000) top / var(--_spin-stroke) var(--_spin-stroke) no-repeat,
    conic-gradient(#0000 var(--_spin-tail-start), var(--_spin-color));
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--_spin-stroke)), #000 0);
  mask: radial-gradient(farthest-side, #0000 calc(100% - var(--_spin-stroke)), #000 0);
}
.dk-component-loading-spinner[data-animation="enter"]::after {
  animation:
    dk-motion-fade-in var(--dk-component-loading-spinner-fade-duration) forwards linear var(--dk-component-loading-spinner-fade-delay),
    dk-component-loading-spinner-spin var(--_spin-duration) infinite linear;
}
.dk-component-loading-spinner[data-animation="exit"] {
  animation: dk-component-loading-spinner-exit var(--dk-component-loading-spinner-exit-duration) var(--dk-component-loading-spinner-exit-easing) forwards var(--dk-component-loading-spinner-exit-delay);
}
.dk-component-loading-spinner[data-animation="exit"]::after {
  animation:
    dk-motion-fade-out var(--dk-component-loading-spinner-fade-duration) forwards linear,
    dk-component-loading-spinner-spin var(--_spin-duration) infinite linear;
}
.dk-component-loading-spinner[hidden] { display: none; }
/* ── The message. It HANGS below rather than sitting in flow, so the spinner
   itself stays dead centre in whatever centres it and nothing shifts when
   the words change; give the container room below if it is tight. It is the
   spinner's accessible name, so it is hidden from the reader to be read once. */
.dk-component-loading-spinner__message {
  position: absolute;
  top: calc(100% + var(--dk-component-loading-spinner-message-gap));
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: var(--dk-component-loading-spinner-message-max-width);
  margin: 0;
  text-align: center;
  font-family: var(--dk-font-family-primary);
  font-size: var(--dk-component-loading-spinner-message-font-size);
  line-height: var(--dk-component-loading-spinner-message-line-height);
  font-weight: var(--dk-component-loading-spinner-message-font-weight);
  color: var(--dk-component-loading-spinner-message-color);
}

@keyframes dk-component-loading-spinner-enter { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes dk-component-loading-spinner-exit { from { transform: scale(1); } to { transform: scale(0); } }
@keyframes dk-component-loading-spinner-spin { 100% { transform: rotate(1turn); } }

/* ════════════════════════════════════ drift-kit:layer components/shield/styles.css ════════════════════════════════════ */
/* ── Shield ─────────────────────────────────────────────────────────────────
   div.dk-component-shield[data-animation] > svg > path[data-part]
   Parts: outline, outline-shade, fill, fill-shade, check, lock. The shades are
   CL's two black 0 to 0.2 gradients over the primary. ──

   Purpose: A shield that scales in, shakes when a code is wrong and pulses a
     tick in when it is right.

   In a cascade (inside [data-dk-cascade]) the enter, the shield and its
   disc, is held at its start until the cascade reveals its root (data-in),
   so it does not scale in unseen behind a unit still waiting for its beat.
   Automatic, no attribute; its delay then counts from the reveal.
   And it enters late in the arrival, a beat before the root's last unit
   (the --dk-cascade-last beat that dk.motion.cascade.reveal writes), both
   held at their start until then: after a parts leave
   (data-dk-cascade-after="leave") the exit-large duration later as well.
   Under reduced motion it does not wait.

   Anatomy:
     div.dk-component-shield[data-animation="idle|enter|success|error"]?[data-size]?
       (the vectors are drawn by the runtime)
   */
.dk-component-shield {
  /* How long the enter waits for an arriving page: 0s unless a revealed
     cascade sets it (below). Set here so it always resolves. */
  --_shield-wait: 0s;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--dk-component-shield-size);
  height: var(--dk-component-shield-size);
}
.dk-component-shield::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background-color: var(--dk-component-shield-disc);
  border-radius: 100%;
}
.dk-component-shield > svg { position: relative; transform: scale(0); }
.dk-component-shield [data-part="outline"],
.dk-component-shield [data-part="fill"] { fill: var(--dk-component-shield-body); }
.dk-component-shield [data-part="check"],
.dk-component-shield [data-part="lock"] {
  --_shield-glyph: var(--dk-component-shield-glyph-scale);
  fill: var(--dk-component-shield-glyph);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(var(--_shield-glyph));
  transition: opacity var(--dk-component-shield-glyph-fade) linear;
}
.dk-component-shield [data-part="lock"] { opacity: 1; }
.dk-component-shield [data-part="check"] { fill: var(--dk-component-shield-check); opacity: 0; }

.dk-component-shield[data-animation="enter"] > svg,
.dk-component-shield[data-animation="enter"]::before {
  animation: dk-component-shield-enter var(--dk-component-shield-enter-duration) var(--dk-component-shield-enter-easing) forwards;
}
.dk-component-shield[data-animation="enter"] > svg { animation-delay: var(--dk-component-shield-enter-delay); }
/* Waiting for the cascade. Outweighs the enter's shorthand above, which
   writes the play state too. */
[data-dk-cascade]:not([data-in]) .dk-component-shield[data-animation="enter"] > svg,
[data-dk-cascade]:not([data-in]) .dk-component-shield[data-animation="enter"]::before { animation-play-state: paused; }
/* Entering late in the arrival (7 Nov 2026): the same weight as the enter's
   rules above, so these win by order.
   The disc waits for the arrival; the shield waits for it too, then keeps
   its own enter delay behind the disc, as it does outside a cascade (9 Nov:
   release 2 gave both the same wait, so they scaled in together). */
:where([data-dk-cascade][data-in]) .dk-component-shield[data-animation="enter"] {
  --_shield-wait: calc(max(0, var(--dk-cascade-last, 0) - 1) * var(--dk-motion-cascade-beat));
}
:where([data-dk-cascade][data-dk-cascade-after="leave"][data-in]) .dk-component-shield[data-animation="enter"] {
  --_shield-wait: calc(max(0, var(--dk-cascade-last, 0) - 1) * var(--dk-motion-cascade-beat) + var(--dk-motion-exit-large-duration));
}
:where([data-dk-cascade][data-in]) .dk-component-shield[data-animation="enter"] > svg,
:where([data-dk-cascade][data-in]) .dk-component-shield[data-animation="enter"]::before {
  animation-fill-mode: both;
}
:where([data-dk-cascade][data-in]) .dk-component-shield[data-animation="enter"]::before { animation-delay: var(--_shield-wait); }
:where([data-dk-cascade][data-in]) .dk-component-shield[data-animation="enter"] > svg {
  animation-delay: calc(var(--_shield-wait) + var(--dk-component-shield-enter-delay));
}
@media (prefers-reduced-motion: reduce) {
  :where([data-dk-cascade][data-in]) .dk-component-shield[data-animation="enter"] > svg,
  :where([data-dk-cascade][data-in]) .dk-component-shield[data-animation="enter"]::before { animation-delay: 0s; }
}

.dk-component-shield[data-animation="success"] > svg {
  --_shield-pulse: 1.6;
  animation: dk-component-shield-pulse var(--dk-component-shield-success-duration) ease-in-out forwards;
}
.dk-component-shield[data-animation="success"] [data-part="lock"] { opacity: 0; }
.dk-component-shield[data-animation="success"] [data-part="check"] {
  opacity: 1;
  --_shield-pulse: 1.6;
  animation: dk-component-shield-pulse var(--dk-component-shield-check-duration) ease-in-out forwards var(--dk-component-shield-check-delay);
}

.dk-component-shield[data-animation="error"] > svg {
  transform: scale(1);
  animation: dk-component-shield-shake var(--dk-component-shield-error-duration) var(--dk-component-shield-error-easing) both;
}

@keyframes dk-component-shield-enter { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes dk-component-shield-pulse { 0%, 100% { transform: scale(var(--_shield-glyph, 1)); } 50% { transform: scale(calc(var(--_shield-glyph, 1) * var(--_shield-pulse, 1.5))); } }
@keyframes dk-component-shield-shake {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(4px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
  40%, 60% { transform: translate3d(6px, 0, 0); }
}

/* ══════════════════════════════ drift-kit:layer components/illustration/styles.css ══════════════════════════════ */
/* ── Illustration ───────────────────────────────────────────────────────────
   The kit's drawn art, by name. The vector lives in vectors.js; the runtime
   (or React's Illustration) draws it into the element, with gradient and
   filter ids of its own per drawing, and this file paints its parts from the
   component tokens, so it follows the theme and the brand. It is as wide as
   --dk-component-illustration-size and as tall as the art at that width.

   Purpose: Drawn art from the kit, by name, painted in the theme's colours:
     cards, the Payment Methods stack of three cards.

   Anatomy:
     span.dk-component-illustration[data-name="cards"][aria-label]?
       svg (drawn by the runtime)
         g[data-layer="back|middle|front"] > path[data-part]
   */
.dk-component-illustration {
  display: inline-flex;
  flex: none;
  inline-size: var(--dk-component-illustration-size);
  vertical-align: middle;
}
.dk-component-illustration > svg { display: block; inline-size: 100%; block-size: auto; }

/* cards: the gradients' stops, a body and an edge per layer. */
.dk-component-illustration[data-name="cards"] [data-stop="front-body-start"] { stop-color: var(--dk-component-illustration-cards-front-body-start); }
.dk-component-illustration[data-name="cards"] [data-stop="front-body-end"] { stop-color: var(--dk-component-illustration-cards-front-body-end); }
.dk-component-illustration[data-name="cards"] [data-stop="front-edge-start"] { stop-color: var(--dk-component-illustration-cards-front-edge-start); }
.dk-component-illustration[data-name="cards"] [data-stop="front-edge-end"] { stop-color: var(--dk-component-illustration-cards-front-edge-end); }
.dk-component-illustration[data-name="cards"] [data-stop="middle-body-start"] { stop-color: var(--dk-component-illustration-cards-middle-body-start); }
.dk-component-illustration[data-name="cards"] [data-stop="middle-body-end"] { stop-color: var(--dk-component-illustration-cards-middle-body-end); }
.dk-component-illustration[data-name="cards"] [data-stop="middle-edge-start"] { stop-color: var(--dk-component-illustration-cards-middle-edge-start); }
.dk-component-illustration[data-name="cards"] [data-stop="middle-edge-end"] { stop-color: var(--dk-component-illustration-cards-middle-edge-end); }
.dk-component-illustration[data-name="cards"] [data-stop="back-body-start"] { stop-color: var(--dk-component-illustration-cards-back-body-start); }
.dk-component-illustration[data-name="cards"] [data-stop="back-body-end"] { stop-color: var(--dk-component-illustration-cards-back-body-end); }
.dk-component-illustration[data-name="cards"] [data-stop="back-edge-start"] { stop-color: var(--dk-component-illustration-cards-back-edge-start); }
.dk-component-illustration[data-name="cards"] [data-stop="back-edge-end"] { stop-color: var(--dk-component-illustration-cards-back-edge-end); }
/* The parts every card shares. */
.dk-component-illustration[data-name="cards"] [data-part="line"] { fill: var(--dk-component-illustration-cards-line); }
.dk-component-illustration[data-name="cards"] [data-part="chip"] { fill: var(--dk-component-illustration-cards-chip); }
.dk-component-illustration[data-name="cards"] [data-part="shine"] { fill: var(--dk-component-illustration-cards-shine); }
.dk-component-illustration[data-name="cards"] [data-part="mark"] { fill: var(--dk-component-illustration-cards-mark); }
.dk-component-illustration[data-name="cards"] [data-part="gold"] { fill: var(--dk-component-illustration-cards-gold); }

/* ════════════════════════════ drift-kit:layer components/feedback-badge/styles.css ════════════════════════════ */
/* ── Feedback badge ─────────────────────────────────────────────────────────
   div.dk-component-feedback-badge[data-status][data-size]
     span.dk-component-feedback-badge__inner > svg
   Large is the default, as in CL, and so is primary. ──

   Purpose: A status's circle inside its own soft ring, with a white glyph.
     The big mark at the top of a success screen or an empty state.

   Anatomy:
     div.dk-component-feedback-badge[data-status]?[data-size="small|medium|large"]?[data-animation="enter|exit"]?
       (the glyph is drawn by the runtime)

   Motion is opt-in: without data-animation a badge is still. enter springs
   the ring in, the circle a beat after, then the glyph (the default tick
   draws from its short arm; any other glyph swaps in). exit takes the circle
   and glyph out, then the ring, and the badge stays gone.
   dk.component.feedbackBadge.play(el, state) replays a state. In a cascade
   the enter waits for the arrival (--dk-cascade-last), as Shield's does.
   Reduced motion: enter shows the badge at once, exit fades it.
   */
.dk-component-feedback-badge {
  --_badge-ring: var(--dk-surface-primary-subtle);
  --_badge-core: var(--dk-surface-primary-default);
  --_badge-size: var(--dk-component-feedback-badge-large-size);
  --_badge-pad: var(--dk-component-feedback-badge-large-padding);
  --_badge-icon: var(--dk-component-feedback-badge-large-icon);
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--_badge-size);
  height: var(--_badge-size);
  padding: var(--_badge-pad);
  border-radius: 50%;
  background-color: var(--_badge-ring);
}
.dk-component-feedback-badge[data-size="small"] {
  --_badge-size: var(--dk-component-feedback-badge-small-size);
  --_badge-pad: var(--dk-component-feedback-badge-small-padding);
  --_badge-icon: var(--dk-component-feedback-badge-small-icon);
}
.dk-component-feedback-badge[data-size="medium"] {
  --_badge-size: var(--dk-component-feedback-badge-medium-size);
  --_badge-pad: var(--dk-component-feedback-badge-medium-padding);
  --_badge-icon: var(--dk-component-feedback-badge-medium-icon);
}
.dk-component-feedback-badge[data-status="success"] { --_badge-ring: var(--dk-surface-success-subtle); --_badge-core: var(--dk-surface-success-default); }
.dk-component-feedback-badge[data-status="neutral"] { --_badge-ring: var(--dk-surface-neutral-subtle); --_badge-core: var(--dk-surface-neutral-default); }
.dk-component-feedback-badge[data-status="error"] { --_badge-ring: var(--dk-surface-error-subtle); --_badge-core: var(--dk-surface-error-default); }
.dk-component-feedback-badge[data-status="warning"] { --_badge-ring: var(--dk-surface-warning-subtle); --_badge-core: var(--dk-surface-warning-default); }
.dk-component-feedback-badge[data-status="information"] { --_badge-ring: var(--dk-surface-information-subtle); --_badge-core: var(--dk-surface-information-default); }
.dk-component-feedback-badge__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--_badge-core);
  color: var(--dk-component-feedback-badge-glyph);
}
.dk-component-feedback-badge__inner > svg,
.dk-component-feedback-badge__inner > .dk-component-icon {
  width: var(--_badge-icon);
  height: var(--_badge-icon);
  stroke-width: 2;
}

/* ── Motion ── */
.dk-component-feedback-badge { --_badge-wait: 0s; }
.dk-component-feedback-badge[data-animation="enter"] {
  animation: dk-component-feedback-badge-grow var(--dk-component-feedback-badge-enter-duration) var(--dk-component-feedback-badge-enter-easing) var(--_badge-wait) both;
}
.dk-component-feedback-badge[data-animation="enter"] .dk-component-feedback-badge__inner {
  animation: dk-component-feedback-badge-grow var(--dk-component-feedback-badge-enter-duration) var(--dk-component-feedback-badge-enter-easing) calc(var(--_badge-wait) + var(--dk-component-feedback-badge-core-delay)) both;
}
/* Any glyph swaps in after the circle... */
.dk-component-feedback-badge[data-animation="enter"] .dk-component-feedback-badge__inner > * {
  animation: dk-component-feedback-badge-swap var(--dk-component-feedback-badge-glyph-duration) var(--dk-component-feedback-badge-glyph-easing) calc(var(--_badge-wait) + var(--dk-component-feedback-badge-glyph-delay)) both;
}
/* ...but the default tick (primary and success) draws itself, from the short
   arm: the dash runs backwards from the path's end. The status sits in a
   :where() so the hold and reduced motion below can outweigh it. */
.dk-component-feedback-badge[data-animation="enter"]:where(:not([data-status]), [data-status="primary"], [data-status="success"]) .dk-component-feedback-badge__inner > svg[data-default-glyph] {
  animation: none;
}
.dk-component-feedback-badge[data-animation="enter"]:where(:not([data-status]), [data-status="primary"], [data-status="success"]) .dk-component-feedback-badge__inner > svg[data-default-glyph] path {
  stroke-dasharray: var(--dk-component-feedback-badge-check-length);
  animation: dk-component-feedback-badge-draw var(--dk-component-feedback-badge-glyph-duration) var(--dk-component-feedback-badge-glyph-easing) calc(var(--_badge-wait) + var(--dk-component-feedback-badge-glyph-delay)) both;
}
/* Held at the start until a cascade reveals its root, then entering as the
   arrival ends, after a parts leave if there is one. */
[data-dk-cascade]:not([data-in]) .dk-component-feedback-badge[data-animation="enter"],
[data-dk-cascade]:not([data-in]) .dk-component-feedback-badge[data-animation="enter"] .dk-component-feedback-badge__inner,
[data-dk-cascade]:not([data-in]) .dk-component-feedback-badge[data-animation="enter"] .dk-component-feedback-badge__inner > *,
[data-dk-cascade]:not([data-in]) .dk-component-feedback-badge[data-animation="enter"] .dk-component-feedback-badge__inner > svg[data-default-glyph] path { animation-play-state: paused; }
:where([data-dk-cascade][data-in]) .dk-component-feedback-badge[data-animation="enter"] {
  --_badge-wait: calc(max(0, var(--dk-cascade-last, 0) - 1) * var(--dk-motion-cascade-beat));
}
:where([data-dk-cascade][data-dk-cascade-after="leave"][data-in]) .dk-component-feedback-badge[data-animation="enter"] {
  --_badge-wait: calc(max(0, var(--dk-cascade-last, 0) - 1) * var(--dk-motion-cascade-beat) + var(--dk-motion-exit-large-duration));
}
.dk-component-feedback-badge[data-animation="exit"] {
  animation: dk-component-feedback-badge-shrink var(--dk-component-feedback-badge-ring-exit-duration) var(--dk-component-feedback-badge-exit-easing) var(--dk-component-feedback-badge-ring-exit-delay) both;
}
.dk-component-feedback-badge[data-animation="exit"] .dk-component-feedback-badge__inner {
  animation: dk-component-feedback-badge-shrink var(--dk-component-feedback-badge-exit-duration) var(--dk-component-feedback-badge-exit-easing) both;
}
@media (prefers-reduced-motion: reduce) {
  .dk-component-feedback-badge[data-animation="enter"],
  .dk-component-feedback-badge[data-animation="enter"] .dk-component-feedback-badge__inner,
  .dk-component-feedback-badge[data-animation="enter"] .dk-component-feedback-badge__inner > *,
  .dk-component-feedback-badge[data-animation="enter"] .dk-component-feedback-badge__inner > svg[data-default-glyph] path { animation: none; }
  .dk-component-feedback-badge[data-animation="exit"] {
    animation: dk-component-feedback-badge-fade var(--dk-component-feedback-badge-exit-duration) var(--dk-component-feedback-badge-exit-easing) both;
  }
  .dk-component-feedback-badge[data-animation="exit"] .dk-component-feedback-badge__inner { animation: none; }
}
@keyframes dk-component-feedback-badge-grow { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes dk-component-feedback-badge-shrink { from { transform: scale(1); } to { transform: scale(0); } }
@keyframes dk-component-feedback-badge-swap { from { opacity: 0; transform: scale(var(--dk-component-feedback-badge-glyph-scale)); } to { opacity: 1; transform: scale(1); } }
/* In px: a unitless calc() offset does not interpolate, so the tick would pop in whole. */
@keyframes dk-component-feedback-badge-draw { from { stroke-dashoffset: calc(-1px * var(--dk-component-feedback-badge-check-length)); } to { stroke-dashoffset: 0; } }
@keyframes dk-component-feedback-badge-fade { from { opacity: 1; } to { opacity: 0; } }

/* ═════════════════════════════════════ drift-kit:layer components/alert/styles.css ═════════════════════════════════════ */
/* ============================================================================
   Alert — .dk-component-alert
   ----------------------------------------------------------------------------
   Layout: the icon and the dismiss button sit on the container's cross axis
   while title, body and actions stack inside __content. Without that wrapper a
   two-line body pushes the icon down the box instead of keeping it beside the
   first line, which is where a reader looks for it.

   Content width by default, full width with data-full-width="true" (9.0.0).
   This is Button's attribute, value shape and default, deliberately: two
   width vocabularies pointing opposite ways across one kit is worse than
   either default on its own (Julio's call, 14 Sep). It reverses 8.1.0, which
   shipped width:100% on the argument that an inline alert is a block in the
   flow. fit-content is not as narrow as it sounds: it resolves to
   min(max-content, max(min-content, available)), so a long body still fills
   the column and only a short one hugs.

   data-enter (React enter) makes an alert that is put in the page in answer
   to something (a wrong code) arrive on the enter pattern: it fades in and
   settles a spacing-1 down into place. Fill backwards only, so nothing is
   left on the alert once it has arrived.

   Purpose: An inline, persistent message in the page: a status colour, an
     optional icon, title, body, actions and a dismiss button.

   Anatomy:
     div.dk-component-alert[data-status="primary|success|warning|error|information"][data-variant="solid|outline|plain"]?[data-size="small"]?[data-pointer]?[data-dismissible]?[data-enter]?[role="status"]
       span.__icon?
       div.__content
         p.__title?
         p.__body
         div.__actions?
       button.__dismiss?
   */
.dk-component-alert {
  font-family: var(--dk-component-alert-font-family);
  /* The private slots. Every status fills them; every variant spends them.
     --_alert-icon-tone is split out from --_alert-icon on purpose: the status
     rules below write ONLY the tone, and this base rule is the only place
     that reads it into --_alert-icon. That makes --_alert-icon write-once
     (here) and OVERWRITE-once ([data-variant="solid"] below, which wins on
     specificity — an attribute selector beats a bare class selector — not on
     being later in the file). A status rule appended after the variant block,
     wherever that lands, still can't touch --_alert-icon directly, so it
     can't revert a solid fill's on-solid icon back to a status colour. */
  --_alert-tint: var(--dk-surface-neutral-subtle);
  /* Neutral has NO solid fill and no on-solid text in the system: checked, and
     --dk-surface-neutral-solid and --dk-text-neutral-on-solid do not exist. The
     strongest neutral surface stands in, so a neutral solid alert still renders
     rather than coming out colourless. Every status below has both for real. */
  --_alert-solid: var(--dk-surface-neutral-default);
  --_alert-line: var(--dk-border-neutral-default);
  --_alert-icon-tone: var(--dk-icon-neutral-default);
  --_alert-icon: var(--_alert-icon-tone);
  --_alert-on-solid: var(--dk-text-default);

  /* What the variant rules below actually paint. */
  --_alert-bg: var(--_alert-tint);
  --_alert-border: transparent;
  --_alert-title: var(--dk-text-default);
  --_alert-body: var(--_alert-body-on-tint, var(--dk-text-neutral-default));
  /* What data-text="tinted" spends into both of the two above. Written by
     the status rules, read in exactly one place. Neutral's own colour sits
     here as the base value so an untinted-status tinted alert still resolves
     to something rather than to the guaranteed-invalid value, which would
     drop the words back to whatever colour they inherit. */
  --_alert-tint-text: var(--dk-component-alert-neutral-color);
  --_alert-pad: var(--dk-component-alert-padding);
  --_alert-body-size: var(--dk-component-alert-body-font-size);
  --_alert-body-line: var(--dk-component-alert-body-line-height);
  --_alert-gap: var(--dk-component-alert-gap);
  --_alert-icon-size: var(--dk-component-alert-icon-size);
  /* The dismiss button's own geometry and its four state colours. Neutral
     sits here as the base, every status overwrites it below, and solid
     overwrites it again with a scrim (see its rule for why it cannot use the
     same ladder). The box is the glyph plus a ring of padding, so the hover
     background has a body; the margin-top calc reads THIS, not the glyph
     size, or a box taller than the line it centres on drifts down. */
  --_alert-dismiss-pad: var(--dk-component-alert-dismiss-padding);
  --_alert-dismiss-offset: var(--dk-component-alert-dismiss-offset);
  --_alert-trailing-extra: var(--dk-component-alert-trailing-extra);
  --_alert-dismiss-size: calc(var(--_alert-icon-size) + 2 * var(--_alert-dismiss-pad));
  --_alert-dismiss-hover-bg: var(--dk-surface-neutral-subtle-hover);
  --_alert-dismiss-active-bg: var(--dk-surface-neutral-subtle-focus);
  --_alert-dismiss-hover-icon: var(--dk-icon-neutral-hover);
  --_alert-dismiss-active-icon: var(--dk-icon-neutral-focus);
  --_alert-title-size: var(--dk-component-alert-title-font-size);
  --_alert-title-line: var(--dk-component-alert-title-line-height);

  display: flex;
  align-items: flex-start;
  gap: var(--_alert-gap);
  width: fit-content;
  box-sizing: border-box;
  padding: var(--_alert-pad);
  border: var(--dk-component-alert-border-width) solid var(--_alert-border);
  border-radius: var(--dk-component-alert-radius);
  background: var(--_alert-bg);
  color: var(--_alert-body);
}

/* ── Status: fill the slots ─────────────────────────────────────────────── */
/* Each status writes --_alert-tint-text, never --_alert-title or
   --_alert-body directly (9.0.0). Those two are the base rule's black/grey
   pair until data-text="tinted" spends the slot, so the status colours the
   ICON and the chrome by default and the words only on request.
   tokens.css explains where the colours come from and the success exception.
   Writing the slot rather than the text is also what keeps the chain safe:
   a status rule appended below the variant block, wherever it lands, still
   cannot reach --_alert-title, so it cannot undo a solid fill's on-solid
   text. Only two rules ever write those two names, and their order is
   fixed below. */
.dk-component-alert[data-status="information"] {
  --_alert-tint: var(--dk-surface-information-subtle);
  --_alert-solid: var(--dk-surface-information-solid);
  --_alert-line: var(--dk-border-information-default);
  --_alert-icon-tone: var(--dk-icon-information-default);
  --_alert-on-solid: var(--dk-text-information-on-solid);
  --_alert-tint-text: var(--dk-component-alert-information-color);
  --_alert-dismiss-hover-bg: var(--dk-surface-information-subtle-hover);
  --_alert-dismiss-active-bg: var(--dk-surface-information-subtle-focus);
  --_alert-dismiss-hover-icon: var(--dk-icon-information-hover);
  --_alert-dismiss-active-icon: var(--dk-icon-information-focus);
}
.dk-component-alert[data-status="success"] {
  --_alert-tint: var(--dk-surface-success-subtle);
  --_alert-solid: var(--dk-surface-success-solid);
  --_alert-line: var(--dk-border-success-default);
  --_alert-icon-tone: var(--dk-icon-success-default);
  --_alert-on-solid: var(--dk-text-success-on-solid);
  --_alert-tint-text: var(--dk-component-alert-success-color);
  --_alert-dismiss-hover-bg: var(--dk-surface-success-subtle-hover);
  --_alert-dismiss-active-bg: var(--dk-surface-success-subtle-focus);
  --_alert-dismiss-hover-icon: var(--dk-icon-success-hover);
  --_alert-dismiss-active-icon: var(--dk-icon-success-focus);
}
.dk-component-alert[data-status="warning"] {
  --_alert-tint: var(--dk-surface-warning-subtle);
  --_alert-solid: var(--dk-surface-warning-solid);
  --_alert-line: var(--dk-border-warning-default);
  --_alert-icon-tone: var(--dk-icon-warning-default);
  --_alert-on-solid: var(--dk-text-warning-on-solid);
  --_alert-tint-text: var(--dk-component-alert-warning-color);
  --_alert-dismiss-hover-bg: var(--dk-surface-warning-subtle-hover);
  --_alert-dismiss-active-bg: var(--dk-surface-warning-subtle-focus);
  --_alert-dismiss-hover-icon: var(--dk-icon-warning-hover);
  --_alert-dismiss-active-icon: var(--dk-icon-warning-focus);
}
.dk-component-alert[data-status="error"] {
  --_alert-tint: var(--dk-surface-error-subtle);
  --_alert-solid: var(--dk-surface-error-solid);
  --_alert-line: var(--dk-border-error-default);
  --_alert-icon-tone: var(--dk-icon-error-default);
  --_alert-on-solid: var(--dk-text-error-on-solid);
  --_alert-tint-text: var(--dk-component-alert-error-color);
  --_alert-dismiss-hover-bg: var(--dk-surface-error-subtle-hover);
  --_alert-dismiss-active-bg: var(--dk-surface-error-subtle-focus);
  --_alert-dismiss-hover-icon: var(--dk-icon-error-hover);
  --_alert-dismiss-active-icon: var(--dk-icon-error-focus);
}
.dk-component-alert[data-status="primary"] {
  --_alert-tint: var(--dk-surface-primary-subtle);
  --_alert-solid: var(--dk-surface-primary-solid);
  --_alert-line: var(--dk-border-primary-default);
  --_alert-icon-tone: var(--dk-icon-primary-default);
  --_alert-on-solid: var(--dk-text-primary-on-solid);
  --_alert-tint-text: var(--dk-component-alert-primary-color);
  --_alert-dismiss-hover-bg: var(--dk-surface-primary-subtle-hover);
  --_alert-dismiss-active-bg: var(--dk-surface-primary-subtle-focus);
  --_alert-dismiss-hover-icon: var(--dk-icon-primary-hover);
  --_alert-dismiss-active-icon: var(--dk-icon-primary-focus);
}

/* ── The body on a deep tint (30 Oct) ───────────────────────────────────── */
/* The status tints deepen with the surface level, and on dark level 2 the
   warning, information and error tints are mid-strength: the neutral body
   read 3.99, 4.26 and 3.95 there. --dk-text-neutral-on-tint is neutral's own rungs everywhere
   but a dark level-2 tint, where it is white. It writes its own slot, which the base rule's
   body falls back from, so tinted and solid, below, still decide. */
.dk-component-alert:is([data-status="warning"], [data-status="information"], [data-status="error"]):where(:not([data-variant]), [data-variant="subtle"]) {
  --_alert-body-on-tint: var(--dk-text-neutral-on-tint);
}

/* ── Text colour: opt into the status tint on the words ─────────────────── */
/* MUST STAY ABOVE THE VARIANT BLOCK. This and [data-variant="solid"] are the
   only two rules that write --_alert-title and --_alert-body, and they have
   identical specificity (0,2,0), so source order alone decides which wins.
   Solid has to: its fill is the status colour at full strength, and tinted
   words on it would be that same colour on itself. Moving this rule below
   the variant block silently makes a solid tinted alert unreadable, which is
   why the ordering is stated here and covered by a test rather than left to
   whoever edits this file next.

   The icon is untouched on purpose. It stays status-coloured in both modes,
   so turning the tint off never costs the reader the signal, it just stops
   the message shouting it twice. */
.dk-component-alert[data-text="tinted"] {
  --_alert-title: var(--_alert-tint-text);
  --_alert-body: var(--_alert-tint-text);
}

/* ── Variant: spend the slots ───────────────────────────────────────────── */
/* subtle is the default and is already expressed in the base rule. */
.dk-component-alert[data-variant="solid"] {
  --_alert-bg: var(--_alert-solid);
  --_alert-border: transparent;
  --_alert-title: var(--_alert-on-solid);
  --_alert-body: var(--_alert-on-solid);
  --_alert-icon: var(--_alert-on-solid);
  /* The dismiss button cannot use the subtle ladder here: a light tint over a
     full-strength fill is not a press, it is a hole. Nor can it step along the
     status's own rungs. Measured 14 Sep: --dk-surface-<status>-focus is
     byte-identical to --dk-surface-<status>-solid in LIGHT for all five
     statuses, and in dark --dk-surface-error-default collides with solid the
     same way, so neither rung gives two distinct steps in both themes. A scrim
     of the on-solid colour does, and it self-adapts: white over a status fill,
     black over the neutral one, since that is what on-solid already is. The
     glyph stays on-solid, because dimming the one white thing on a saturated
     fill would cost contrast to signal a hover. */
  --_alert-dismiss-hover-bg: rgb(from var(--_alert-on-solid) r g b / var(--dk-component-alert-scrim-hover-opacity));
  --_alert-dismiss-active-bg: rgb(from var(--_alert-on-solid) r g b / var(--dk-component-alert-scrim-active-opacity));
  --_alert-dismiss-hover-icon: var(--_alert-on-solid);
  --_alert-dismiss-active-icon: var(--_alert-on-solid);
}
.dk-component-alert[data-variant="outline"] {
  --_alert-bg: transparent;
  --_alert-border: var(--_alert-line);
}
.dk-component-alert[data-variant="plain"] {
  --_alert-bg: transparent;
  --_alert-border: transparent;
  --_alert-pad: 0;
}

/* ── Arrival ────────────────────────────────────────────────────────────── */
.dk-component-alert[data-enter] { animation: dk-component-alert-enter var(--dk-component-alert-enter-duration) var(--dk-component-alert-enter-easing) backwards; }
@keyframes dk-component-alert-enter { from { opacity: 0; transform: translateY(var(--dk-component-alert-enter-offset)); } }

/* ── Width ──────────────────────────────────────────────────────────────── */
/* Button's attribute and value shape exactly, including the ="true" rather
   than bare presence, so the two components are learned once. */
.dk-component-alert[data-full-width="true"] { width: 100%; }

/* NO DISMISS BUTTON: a bit more room on the trailing edge (Julio, 14 Sep).
   With the button there, the right side already holds something: 28px of
   control plus the offset before it, and the words stop well short of the
   edge. Take the button away and they run up against the padding alone,
   which reads tight next to everything else about this component.

   The extra is --_alert-trailing-extra, 8px at the default size and 4px at
   small. It was --_alert-dismiss-offset until that offset was raised: reusing
   the gap-before-the-button here read as one idea and was two, so widening
   the gap silently widened the padding of every alert that has no button.
   Separate tokens now, because they answer separate questions.

   Superseded the narrower rule this replaces, which only fired at content
   width and only with a leading icon. Now that the padding is even on all
   sides the icon is not what makes the difference, the missing control is,
   and it is missing at any width. plain stays excluded: having no padding to
   sit flush inside a container that already has its own is its whole job. */
.dk-component-alert:not([data-variant="plain"]):not(:has(.dk-component-alert__dismiss)) {
  padding-inline-end: calc(var(--_alert-pad) + var(--_alert-trailing-extra));
}

/* ── Size ───────────────────────────────────────────────────────────────── */
.dk-component-alert[data-size="small"] {
  --_alert-gap: var(--dk-component-alert-small-gap);
  --_alert-pad: var(--dk-component-alert-small-padding);
  --_alert-icon-size: var(--dk-component-alert-small-icon-size);
  --_alert-dismiss-pad: var(--dk-component-alert-small-dismiss-padding);
  --_alert-dismiss-offset: var(--dk-component-alert-small-dismiss-offset);
  --_alert-trailing-extra: var(--dk-component-alert-small-trailing-extra);
  --_alert-title-size: var(--dk-component-alert-small-title-font-size);
  --_alert-title-line: var(--dk-component-alert-small-title-line-height);
  --_alert-body-size: var(--dk-component-alert-small-body-font-size);
  --_alert-body-line: var(--dk-component-alert-small-body-line-height);
}
/* plain drops padding at every size, so it has to win over the size rule. */
.dk-component-alert[data-variant="plain"][data-size="small"] {
  --_alert-pad: 0;
}

/* Every part below the container is optional, and the icon and dismiss button
   both centre themselves on --_alert-title-line. With no title there is no
   such line: the first thing beside them is the body, which is a size step
   smaller (body-small 20px against body-medium 24px at the default size), so
   both sat 2px low. Measured, on the docs page's own body-only example.

   The slot is redirected rather than the two margins being special-cased,
   because the slot already means "the line the cross-axis chrome aligns to"
   and is read in three places. The title's own line-height is the third, and
   it is inert here by definition: there is no title to give a line-height to.

   Only visible at the default size. At data-size="small" the title steps down
   to body-small too, so the two lines already coincide and this changes
   nothing. Placed after the size rule so it wins at equal specificity if the
   two ever diverge. */
.dk-component-alert:not(:has(.dk-component-alert__title)) {
  --_alert-title-line: var(--_alert-body-line);
}

/* ── Parts ──────────────────────────────────────────────────────────────── */
.dk-component-alert__icon {
  flex: 0 0 auto;
  width: var(--_alert-icon-size);
  height: var(--_alert-icon-size);
  color: var(--_alert-icon);
  /* CENTRED ON THE CONTENT, top to bottom (27 Oct): the icon marks the whole
     message, not its first line, and pinned to the top it hung over a
     two-line body like a bullet for the first line only. */
  align-self: center;
}

/* The slot above sizes ITSELF, not the glyph an author puts inside it: an
   <svg> or <i> otherwise keeps its own intrinsic size (or, for an em-sized
   glyph, the button's UA default font-size, a value this design never chose)
   instead of the icon slot's rung, so it overflows or underflows the box the
   moment its natural size doesn't already match --_alert-icon-size. This
   covers both glyph slots — the status icon and the dismiss button's X —
   since neither draws its own glyph in CSS; both receive one as markup. */
.dk-component-alert__icon svg,    .dk-component-alert__icon i,
.dk-component-alert__dismiss svg, .dk-component-alert__dismiss i {
  width: var(--_alert-icon-size); height: var(--_alert-icon-size); display: block;
}

.dk-component-alert__content {
  flex: 1 1 auto;
  min-width: 0;   /* lets long words wrap instead of stretching the alert */
  display: flex;
  flex-direction: column;
  gap: var(--dk-spacing-1);
}

.dk-component-alert__title {
  margin: 0;
  font-size: var(--_alert-title-size);
  line-height: var(--_alert-title-line);
  font-weight: var(--dk-component-alert-title-font-weight);
  color: var(--_alert-title);
}

.dk-component-alert__body {
  margin: 0;
  font-size: var(--_alert-body-size);
  line-height: var(--_alert-body-line);
  font-weight: var(--dk-component-alert-body-font-weight);
  color: var(--_alert-body);
}

.dk-component-alert__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dk-spacing-2);
  /* The content stack's gap (now --dk-spacing-1, 2px) already sits between
     the actions row and whatever precedes it, so this margin tops that up
     rather than setting the separation alone: 2px gap + 6px margin = 8px
     total, the same distance the body sat from actions before the gap
     shrank. Title/body now read as one tight pair; actions keeps its old
     stand-off from the body. */
  margin-top: var(--dk-spacing-2);
}

/* No glyph is drawn here: this kit draws no glyphs in CSS anywhere, the same
   way the modal's close button composes with .dk-component-icon-button rather
   than painting an X from a background-image or a pseudo-element. An icon in
   this system is markup, so hand-written HTML MUST put a glyph element (an
   <svg> or an <i data-lucide="x">) inside this button itself; without one
   it is an empty hit target with a label only a screen reader can hear. */
/* Icon button's press behaviour, in Alert's colours: a background that appears
   on hover, one step further on press, and a scale-down. Two differences from
   .dk-component-icon-button, both deliberate. It is TRANSPARENT at rest, because
   it already sits on a tinted panel and a resting fill would read as a second
   panel inside the first. And its colours come from the status rather than
   from neutral, so the control belongs to the message it closes.
   The box is the glyph plus --_alert-dismiss-pad on every side. That ring is
   what the hover background needs in order to read as a target instead of a
   smudge around the X, and it is why the margin-top calc below centres
   --_alert-dismiss-size rather than the glyph. */
.dk-component-alert__dismiss {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--_alert-dismiss-size);
  height: var(--_alert-dismiss-size);
  margin-top: calc((var(--_alert-title-line) - var(--_alert-dismiss-size)) / 2);
  margin-inline-start: var(--_alert-dismiss-offset);
  padding: 0;
  border: 0;
  background: none;
  color: var(--_alert-icon);
  cursor: pointer;
  border-radius: var(--dk-border-radius-100);
  transition: background-color var(--dk-motion-state-duration) var(--dk-motion-state-easing), color var(--dk-motion-state-duration) var(--dk-motion-state-easing), transform var(--dk-motion-press-duration) var(--dk-motion-press-easing);
}
@media (hover: hover) {
  .dk-component-alert__dismiss:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: var(--_alert-dismiss-hover-bg);
    color: var(--_alert-dismiss-hover-icon);
  }
}
.dk-component-alert__dismiss:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--_alert-dismiss-active-bg);
  color: var(--_alert-dismiss-active-icon);
  transform: scale(0.9);
}
.dk-component-alert__dismiss:focus-visible {
  outline: 2px solid var(--dk-outline-selected-default);
  outline-offset: 2px;
}

/* ── Links inside a status Alert (Link, 29 Sep 2026) ─────────────────────
   Alert says its status with data-status, never data-tone, so the tone
   layer's link remap does not reach it and a link inside kept the page's jade:
   1.35:1 on a solid error fill. The Alert hands the link ramp its own body
   colour instead, the one it has already measured against every status and
   variant. Hover and active share it, as on a tone: the step is the underline
   thickening. The underline is the body colour too, because the status border
   is the fill's own colour on solid and would vanish. A neutral Alert (no
   status) keeps the page ramp, which already reads on its neutral tint. */
.dk-component-alert[data-status] {
  --dk-text-link-default: var(--_alert-body);
  --dk-text-link-hover: var(--_alert-body);
  --dk-text-link-active: var(--_alert-body);
  --dk-text-link-underline: var(--_alert-body);
}

/* ── data-pointer="left | top | right | bottom": the balloon ────────────────
   The component library's layout="balloon": a triangle on one side, centred,
   so the alert reads as said by what it points at. Two triangles: the border
   colour at the outer edge, and the fill set just inside it, which covers the
   alert's border where the two meet and leaves an edge along the slants. On
   subtle and solid the border is transparent and only the fill shows. The
   alert gives up the pointer's depth on that side so it stays in its box.
   Plain has no box to point from. It points; it does not place itself: an
   alert that must float beside an element is a popover's job. */
.dk-component-alert[data-pointer]:not([data-variant="plain"])::before,
.dk-component-alert[data-pointer]:not([data-variant="plain"])::after {
  content: ""; position: absolute; pointer-events: none;
}
/* BOTH TRIANGLES STAND ON THE INNER EDGE, so the fill crosses the alert's own
   border (no line between the alert and its pointer) and reaches the full
   depth past the outer edge at any border width. The edge triangle (the
   border colour) is that much bigger again, which leaves an edge along the
   slants on outline. The sizes live on the alert, where check:vars can see
   them, and each triangle reads its own pair. */
.dk-component-alert[data-pointer]:not([data-variant="plain"]) {
  position: relative;
  --_alert-ptr-fill-depth: calc(var(--dk-component-alert-pointer-depth) + var(--dk-component-alert-border-width));
  --_alert-ptr-fill-base: calc(var(--dk-component-alert-pointer-base) + var(--dk-component-alert-border-width));
  --_alert-ptr-edge-depth: calc(var(--dk-component-alert-pointer-depth) + 2.5 * var(--dk-component-alert-border-width));
  --_alert-ptr-edge-base: calc(var(--dk-component-alert-pointer-base) + 3.5 * var(--dk-component-alert-border-width));
}
.dk-component-alert[data-pointer]:not([data-variant="plain"])::before { background: var(--_alert-border); }
.dk-component-alert[data-pointer]:not([data-variant="plain"])::after { background: var(--_alert-bg); }
/* Outline has no fill (it is transparent onto the page), so the cut-out is
   painted in the surface it sits on: the page shows through a hollow
   pointer, and the alert's border under the pointer's base is covered. */
.dk-component-alert[data-variant="outline"][data-pointer]::after {
  background: var(--dk-surface-current);
}

.dk-component-alert[data-pointer="left"]:not([data-variant="plain"]) { margin-inline-start: var(--dk-component-alert-pointer-depth); }
.dk-component-alert[data-pointer="right"]:not([data-variant="plain"]) { margin-inline-end: var(--dk-component-alert-pointer-depth); }
.dk-component-alert[data-pointer="top"]:not([data-variant="plain"]) { margin-block-start: var(--dk-component-alert-pointer-depth); }
.dk-component-alert[data-pointer="bottom"]:not([data-variant="plain"]) { margin-block-end: var(--dk-component-alert-pointer-depth); }
.dk-component-alert[data-full-width="true"]:is([data-pointer="left"], [data-pointer="right"]):not([data-variant="plain"]) {
  width: calc(100% - var(--dk-component-alert-pointer-depth));
}

/* Side pointers: centred on the height. */
.dk-component-alert:is([data-pointer="left"], [data-pointer="right"]):not([data-variant="plain"])::before {
  top: 50%; transform: translateY(-50%);
  width: var(--_alert-ptr-edge-depth); height: var(--_alert-ptr-edge-base);
}
.dk-component-alert:is([data-pointer="left"], [data-pointer="right"]):not([data-variant="plain"])::after {
  top: 50%; transform: translateY(-50%);
  width: var(--_alert-ptr-fill-depth); height: var(--_alert-ptr-fill-base);
}
/* Top and bottom pointers: centred on the width. */
.dk-component-alert:is([data-pointer="top"], [data-pointer="bottom"]):not([data-variant="plain"])::before {
  left: 50%; transform: translateX(-50%);
  width: var(--_alert-ptr-edge-base); height: var(--_alert-ptr-edge-depth);
}
.dk-component-alert:is([data-pointer="top"], [data-pointer="bottom"]):not([data-variant="plain"])::after {
  left: 50%; transform: translateX(-50%);
  width: var(--_alert-ptr-fill-base); height: var(--_alert-ptr-fill-depth);
}
.dk-component-alert[data-pointer="left"]:not([data-variant="plain"])::before { left: calc(-1 * var(--_alert-ptr-edge-depth)); clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.dk-component-alert[data-pointer="left"]:not([data-variant="plain"])::after { left: calc(-1 * var(--_alert-ptr-fill-depth)); clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.dk-component-alert[data-pointer="right"]:not([data-variant="plain"])::before { right: calc(-1 * var(--_alert-ptr-edge-depth)); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.dk-component-alert[data-pointer="right"]:not([data-variant="plain"])::after { right: calc(-1 * var(--_alert-ptr-fill-depth)); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.dk-component-alert[data-pointer="top"]:not([data-variant="plain"])::before { top: calc(-1 * var(--_alert-ptr-edge-depth)); clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.dk-component-alert[data-pointer="top"]:not([data-variant="plain"])::after { top: calc(-1 * var(--_alert-ptr-fill-depth)); clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.dk-component-alert[data-pointer="bottom"]:not([data-variant="plain"])::before { bottom: calc(-1 * var(--_alert-ptr-edge-depth)); clip-path: polygon(0 0, 50% 100%, 100% 0); }
.dk-component-alert[data-pointer="bottom"]:not([data-variant="plain"])::after { bottom: calc(-1 * var(--_alert-ptr-fill-depth)); clip-path: polygon(0 0, 50% 100%, 100% 0); }

/* ═══════════════════════════════════ drift-kit:layer components/divider/styles.css ═══════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   Divider — .dk-component-divider, driven entirely by the
   --dk-component-divider-* collection.

   Markup: an <hr>, which already carries the implicit `separator` role and an
   implicit aria-orientation of horizontal, so the common case needs no ARIA at
   all. A vertical one mirrors data-orientation into aria-orientation — the
   data attribute drives CSS, the ARIA one drives semantics. A purely
   decorative rule takes aria-hidden="true".

     <hr class="dk-component-divider">
     <hr class="dk-component-divider" data-orientation="vertical" aria-orientation="vertical">

   Logical properties throughout, so RTL costs nothing.
   ────────────────────────────────────────────────────────────────────────

   Purpose: A rule between things. An <hr> that follows the border palette,
     mostly steps with the surface level, and turns vertical without a wrapper.

   Anatomy:
     hr.dk-component-divider[data-color]?[data-orientation="vertical"]?
   */
.dk-component-divider {
  /* hr arrives with a UA margin-block and an inset border on all four sides. */
  margin: 0;
  border: 0;
  /* One private slot the colour rules set, as Button funnels through --_btn-*.
     Deliberately unset here: an unmatched data-color must draw nothing, not
     inherit default — the kit's fail-loud rule, same as orientation below. */
}
.dk-component-divider[hidden] { display: none; }

/* ── Orientation ─────────────────────────────────────────────────────────
   Both values are declared explicitly and the omitted case is its own
   selector, so data-orientation="diagonal" draws NOTHING rather than
   silently falling back to horizontal — the kit's fail-loud rule. */
.dk-component-divider:not([data-orientation]),
.dk-component-divider[data-orientation="horizontal"] {
  border-block-start: var(--dk-component-divider-border-width) solid var(--_divider-color);
}
.dk-component-divider[data-orientation="vertical"] {
  border-inline-start: var(--dk-component-divider-border-width) solid var(--_divider-color);
  /* Fill the flex line it sits on… */
  align-self: stretch;
  /* …and stay visible outside a stretch context rather than collapsing to
     nothing and reading as "the component is broken". `1em` deliberately, not
     a token: it should match the line-height of the text beside it, which is
     exactly what em means. The one non-token value in this file. */
  min-height: 1em;
}

/* ── Colour ──────────────────────────────────────────────────────────────────
   Omitted data-color and data-color="default" are the same rule, declared
   together, so the common case (no attribute) gets the hairline. Any other
   unmatched value fails loud: --_divider-color stays unset and the border
   rules above draw a 0px, invisible line rather than silently inheriting
   default — same promise as the orientation axis. */
.dk-component-divider:not([data-color]),
.dk-component-divider[data-color="default"] { --_divider-color: var(--dk-component-divider-default-color); }
.dk-component-divider[data-color="neutral"] { --_divider-color: var(--dk-component-divider-neutral-color); }
.dk-component-divider[data-color="primary"] { --_divider-color: var(--dk-component-divider-primary-color); }
.dk-component-divider[data-color="success"] { --_divider-color: var(--dk-component-divider-success-color); }
.dk-component-divider[data-color="error"] { --_divider-color: var(--dk-component-divider-error-color); }
.dk-component-divider[data-color="warning"] { --_divider-color: var(--dk-component-divider-warning-color); }
.dk-component-divider[data-color="information"] { --_divider-color: var(--dk-component-divider-information-color); }

/* ═══════════════════════════════════════ drift-kit:layer components/dot/styles.css ═══════════════════════════════════════ */
/* ── Dot ────────────────────────────────────────────────────────────────────
   A small filled circle that marks a status with no words.

   Purpose: A status mark with no room for a word, such as an unread row.
     Six statuses; primary when none is named.

   Anatomy:
     span.dk-component-dot[data-status="primary|error|success|warning|information|neutral"]?[aria-hidden]

   Decorative by default: whatever the dot means has to be said in words
   beside it, for the reader who cannot see colour. It does not shrink in a
   flex row and keeps its circle at any width.
   ── */
.dk-component-dot {
  --_dot-color: var(--dk-component-dot-primary);
  display: inline-block;
  flex: none;
  box-sizing: border-box;
  width: var(--dk-component-dot-size);
  height: var(--dk-component-dot-size);
  border-radius: 50%;
  background: var(--_dot-color);
}
.dk-component-dot[data-status="primary"] { --_dot-color: var(--dk-component-dot-primary); }
.dk-component-dot[data-status="error"] { --_dot-color: var(--dk-component-dot-error); }
.dk-component-dot[data-status="success"] { --_dot-color: var(--dk-component-dot-success); }
.dk-component-dot[data-status="warning"] { --_dot-color: var(--dk-component-dot-warning); }
.dk-component-dot[data-status="information"] { --_dot-color: var(--dk-component-dot-information); }
.dk-component-dot[data-status="neutral"] { --_dot-color: var(--dk-component-dot-neutral); }

/* ═══════════════════════════════════ drift-kit:layer components/sidebar/styles.css ═══════════════════════════════════ */
/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  Sidebar                                                                 ║
   ║                                                                          ║
   ║  nav.dk-component-sidebar[data-variant][data-collapsed][data-phone]      ║
   ║    .__head        .__brand (.__mark + .__wordmark)                       ║
   ║    .__body        scrolls; .__section (.__heading + ul.__list)           ║
   ║      li > a.__item[aria-current="page"]                                  ║
   ║             .__icon .__label (.__badge | .__dot)                         ║
   ║      li.__group > button.__item[aria-expanded] (.__chevron)              ║
   ║                   + ul.__list[data-level="2"]                            ║
   ║    .__foot        ul.__list of utilities (a .__toggle among them), then  ║
   ║                   a Dropdown holding button.__user                       ║
   ║                                                                          ║
   ║  ONE SET OF MARKUP, THREE PRESENTATIONS. The runtime writes              ║
   ║  data-presentation: "rail" on a desktop, and on a phone whatever         ║
   ║  data-phone asks for, "bar" (a bottom tab bar, the default) or "drawer". ║
   ║  Everything below keys off that attribute and never off a media query,  ║
   ║  so a page can force a presentation and the kit's one breakpoint stays  ║
   ║  the only width anyone writes down. Without the runtime there is no     ║
   ║  attribute and the rail is what shows.                                   ║
   ║                                                                          ║
   ║  "THE RAIL" BELOW MEANS NOT A BAR AND NOT A DRAWER:                     ║
   ║    :not([data-presentation="bar"]):not([data-presentation="drawer"])     ║
   ║  written out each time, because collapse is a rail's business only: a   ║
   ║  drawer is always open wide and a bar has no labels to clip.            ║
   ║                                                                          ║
   ║  THE COLLAPSE IS WIDTH ONLY. The icon column is a fixed box pinned to   ║
   ║  the start edge in both states, sized to the collapsed rail's inside, so ║
   ║  the glyphs never move: the rail narrows and the labels are clipped by  ║
   ║  it, which is Forge's rail and the thing that makes it feel solid. The  ║
   ║  labels are clipped and faded, never removed, so a screen reader reads  ║
   ║  every name in both states.                                              ║
   ╚══════════════════════════════════════════════════════════════════════════╝

   Purpose: An app's main navigation. A rail on a desktop that collapses to
     its glyphs, and on a phone a bottom tab bar or a drawer, from one set of
     markup.

   Anatomy:
     nav.dk-component-sidebar[data-collapsed]?
       div.__head > a|div.__brand > span.__mark + span.__wordmark
         (span.__mark > .dk-component-logo[data-lockup="symbol-text"]: the
         brand's whole logo, the mark sized to it, its symbol on the glyph
         column; the collapsed rail shows the symbol lockup in its place,
         marked data-sb-lockup)
         (a div when the brand goes nowhere: named by its wordmark, or
         role="img" with aria-label when it has none)
       div.__body
         div.__section > span.__heading? + ul.__list > a|button.__item[aria-current]?
       div.__foot
         ul.__list > li[data-rail-only]? > a|button.__item
           (data-rail-only: the rail and the drawer show the row, the phone
           bar leaves it out, and it never puts More on the bar)
         ul.__list > button.__item.__toggle
         div.dk-component-dropdown.__account > button.__user
           > span.__icon[data-bar-icon]? + an avatar + __user-text
         (the glyph shows in place of the avatar on a phone bar only)
         (on a touch screen, @media (pointer: coarse), the floating bar sits
         --dk-component-sidebar-bar-bottom = spacing-3 off the foot, not the
         inset's 16, with the raised shadow; a fine pointer keeps both)
   */
.dk-component-sidebar {
  /* The rail's own edges: one when docked, two when floating, and the same
     count at the thin tier's hairline, which the widths are drawn at. */
  --_sb-frame: var(--dk-component-sidebar-border-width);
  --_sb-frame-base: var(--dk-component-sidebar-border-width-base);
  /* THE ICON COLUMN IS FIXED, drawn inside the collapsed rail at the thin
     hairline, so the glyph centres in it exactly and never moves. A thicker
     border tier GROWS THE RAIL OUTWARD by what its edges and a row's two
     edges gained (8 Nov, Julio): taken from the column instead, at bold it
     went from 41px to 20px and the current row's fill squeezed narrower than
     its own glyph. */
  --_sb-zone: calc(var(--dk-component-sidebar-collapsed-width) - var(--dk-component-sidebar-padding-inline) * 2 - var(--_sb-frame-base) - var(--dk-component-sidebar-border-width-base) * 2);
  /* One edge's growth past the hairline, and the rail's: its frame's, and a
     row's on both sides. */
  --_sb-grow: calc(var(--dk-component-sidebar-border-width) - var(--dk-component-sidebar-border-width-base));
  --_sb-add: calc(var(--_sb-frame) - var(--_sb-frame-base) + var(--_sb-grow) * 2);
  --_sb-w: calc(var(--dk-component-sidebar-width) + var(--_sb-add));
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--dk-component-sidebar-gap);
  flex: none;
  width: var(--_sb-w);
  height: 100%;
  padding: var(--dk-component-sidebar-padding-block) var(--dk-component-sidebar-padding-inline);
  background: var(--dk-component-sidebar-docked-surface);
  border-inline-end: var(--dk-component-sidebar-border-width) solid var(--dk-component-sidebar-docked-border);
  color: var(--dk-component-sidebar-item-text);
  font-family: var(--dk-component-sidebar-item-font-family);
  overflow: hidden;
  /* Its own stacking context, so the group guide can sit under the indicator
     (z-index -1) without dropping behind the rail's own fill. */
  isolation: isolate;
  transition: width var(--dk-component-sidebar-duration) var(--dk-component-sidebar-easing);
}
.dk-component-sidebar[data-variant="floating"] {
  --_sb-frame: calc(var(--dk-component-sidebar-border-width) * 2);
  --_sb-frame-base: calc(var(--dk-component-sidebar-border-width-base) * 2);
  height: calc(100% - var(--dk-component-sidebar-floating-inset) * 2);
  margin: var(--dk-component-sidebar-floating-inset);
  margin-inline-end: 0;
  background: var(--dk-component-sidebar-floating-surface);
  border: var(--dk-component-sidebar-border-width) solid var(--dk-component-sidebar-floating-border);
  border-radius: var(--dk-component-sidebar-floating-radius);
  box-shadow: var(--dk-component-sidebar-floating-shadow);
  -webkit-backdrop-filter: blur(var(--dk-component-sidebar-blur));
  backdrop-filter: blur(var(--dk-component-sidebar-blur));
}
.dk-component-sidebar[data-collapsed]:not([data-presentation="bar"]):not([data-presentation="drawer"]) {
  --_sb-w: calc(var(--dk-component-sidebar-collapsed-width) + var(--_sb-add));
}
.dk-component-sidebar ul { list-style: none; margin: 0; padding: 0; }
.dk-component-sidebar li { margin: 0; padding: 0; }

/* ── The head: the brand ───────────────────────────────────────────────────
   The mark sits in the same fixed column as the glyphs below it, so it is the
   one thing left when the rail collapses and it never shifts to get there. */
.dk-component-sidebar__head {
  display: flex;
  align-items: center;
  flex: none;
  /* The rule lands at --dk-component-sidebar-head-height from the rail's top
     edge, level with a Top bar's beside it: the rail's top padding is taken
     off and the rule's own width added, so the head's box ends with it. */
  box-sizing: border-box;
  min-height: calc(var(--dk-component-sidebar-head-height) - var(--dk-component-sidebar-padding-block) + var(--dk-component-sidebar-border-width));
  padding-bottom: var(--dk-component-sidebar-gap);
  border-bottom: var(--dk-component-sidebar-border-width) solid var(--dk-component-sidebar-divider);
  /* Takes back the root's gap, as the foot does, so the body's clip edge is
     this rule: rows scroll up under it instead of vanishing a gap below it. */
  margin-bottom: calc(var(--dk-component-sidebar-gap) * -1);
}
.dk-component-sidebar__brand {
  display: flex;
  align-items: center;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  border-radius: var(--dk-component-sidebar-item-radius);
  overflow: hidden;
  white-space: nowrap;
}
.dk-component-sidebar__mark {
  flex: 0 0 calc(var(--_sb-zone) + var(--dk-component-sidebar-border-width) * 2);
  display: inline-grid;
  place-items: center;
}
.dk-component-sidebar__mark > * { width: var(--dk-component-sidebar-brand-mark-size); height: var(--dk-component-sidebar-brand-mark-size); display: block; }
/* A whole kit Logo lockup in the mark (symbol and text) keeps its own shape
   at the brand's logo height. It is wider than the square slot, so the mark
   takes the lockup's width, starting where the symbol, as wide as the logo is
   tall, sits centred on the rows' glyph column: where a collapsed rail's
   symbol sits. While the rail is collapsed the runtime (React: the Sidebar)
   shows the symbol lockup in its place, marked data-sb-lockup, at the same
   height and centred in the slot. Either lockup keeps its own size, so
   collapsing moves nothing and expanding only adds the words. A logo that is
   a symbol to begin with is any other mark, sized by the slot. */
.dk-component-sidebar__mark:where(:has(> .dk-component-logo[data-lockup="symbol-text"])) {
  flex: none;
  width: auto;
  justify-items: start;
  padding-inline-start: calc((var(--_sb-zone) + var(--dk-component-sidebar-border-width) * 2 - var(--dk-component-sidebar-brand-logo-height)) / 2);
}
.dk-component-sidebar__mark > .dk-component-logo:where([data-lockup="symbol-text"], [data-sb-lockup]) { width: auto; height: auto; }
.dk-component-sidebar__mark > .dk-component-logo:where([data-lockup="symbol-text"], [data-sb-lockup]) > svg { width: auto; height: var(--dk-component-sidebar-brand-logo-height); }
.dk-component-sidebar__wordmark {
  /* The mark is centred in the icon column, so the column's spare room on its
     far side is taken back: the gap is measured from the mark itself. */
  margin-inline-start: calc(var(--dk-component-sidebar-brand-gap) - (var(--_sb-zone) + var(--dk-component-sidebar-border-width) * 2 - var(--dk-component-sidebar-brand-mark-size)) / 2);
  font-family: var(--dk-component-sidebar-wordmark-font-family);
  font-size: var(--dk-component-sidebar-wordmark-font-size);
  font-weight: var(--dk-component-sidebar-wordmark-font-weight);
  color: var(--dk-component-sidebar-wordmark-color);
  transition: opacity var(--dk-component-sidebar-duration) var(--dk-component-sidebar-easing);
}
/* A wordmark that is a kit Logo rather than words: let it size itself. */
.dk-component-sidebar__wordmark > svg, .dk-component-sidebar__wordmark > .dk-component-logo { display: block; height: var(--dk-component-sidebar-wordmark-font-size); width: auto; }
.dk-component-sidebar__brand:focus-visible {
  outline: var(--dk-component-sidebar-focus-ring-width) solid var(--dk-component-sidebar-focus-ring);
  outline-offset: calc(var(--dk-component-sidebar-focus-ring-width) * -1);
}

/* ── The body: it scrolls, the head and foot do not ──────────────────────── */
.dk-component-sidebar__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--dk-component-sidebar-section-gap);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* DriveIQ's scroll. The box reaches out through the rail's side padding and
     pads the rows back in, so the scrollbar sits on the rail's own edge rather
     than reading as a panel nested in the panel. Expanded, the padding is the
     same on both sides and a scrollbar that takes room (macOS set to always
     show, Windows) takes its own beside it, so a row is as far from the
     scrollbar as from the rail's other edge (21 Oct; it used to give the
     scrollbar's width back off the right padding, 10 against 4). An overlay
     scrollbar takes nothing. The collapsed rail does give it back, below. */
  margin-inline: calc(var(--dk-component-sidebar-padding-inline) * -1);
  padding-inline-start: var(--dk-component-sidebar-padding-inline);
  padding-inline-end: var(--dk-component-sidebar-padding-inline);
  /* The gap the foot's negative margin takes back, kept inside the scroll so
     the last row still rests a gap above the foot's rule. */
  padding-bottom: var(--dk-component-sidebar-gap);
}
/* COLLAPSED, the scrollbar's measured width (--_sb-sbw, written by the
   runtime) comes back off the right padding, so the glyph column stays centred
   in the 64px rail; an overlay scrollbar measures 0 and changes nothing. */
.dk-component-sidebar[data-collapsed]:not([data-presentation="bar"]):not([data-presentation="drawer"]) .dk-component-sidebar__body {
  padding-inline-end: max(0px, calc(var(--dk-component-sidebar-padding-inline) - var(--_sb-sbw, 0px)));
}
/* The same for the head's, only where there is a head: a rail without a brand
   starts at its own padding. */
.dk-component-sidebar__head + .dk-component-sidebar__body { padding-top: var(--dk-component-sidebar-gap); }
.dk-component-sidebar__body::-webkit-scrollbar { width: var(--dk-component-sidebar-scrollbar-size); }
.dk-component-sidebar__body::-webkit-scrollbar-track { background: transparent; }
.dk-component-sidebar__body::-webkit-scrollbar-thumb {
  background: var(--dk-component-sidebar-scrollbar-thumb);
  border-radius: var(--dk-component-sidebar-scrollbar-size);
}
@media (hover: hover) {
  .dk-component-sidebar__body::-webkit-scrollbar-thumb:hover { background: var(--dk-component-sidebar-scrollbar-thumb-hover); }
}
/* Firefox has no ::-webkit-scrollbar, so its thinnest standard one; only
   there, since in Chrome the standard property overrides the pseudo-elements. */
@supports not selector(::-webkit-scrollbar) {
  .dk-component-sidebar__body { scrollbar-width: thin; scrollbar-color: var(--dk-component-sidebar-scrollbar-thumb) transparent; }
}
.dk-component-sidebar__section { display: flex; flex-direction: column; gap: var(--dk-component-sidebar-item-gap); }
.dk-component-sidebar__list { display: flex; flex-direction: column; gap: var(--dk-component-sidebar-item-gap); }
.dk-component-sidebar__heading {
  display: block;
  position: relative;
  padding: 0 var(--dk-spacing-2-5);
  font-size: var(--dk-component-sidebar-heading-font-size);
  line-height: var(--dk-component-sidebar-heading-line-height);
  font-weight: var(--dk-component-sidebar-heading-font-weight);
  letter-spacing: var(--dk-component-sidebar-heading-letter-spacing);
  text-transform: uppercase;
  color: var(--dk-component-sidebar-heading-color);
  white-space: nowrap;
  overflow: hidden;
  transition: color var(--dk-component-sidebar-duration) var(--dk-component-sidebar-easing);
}
/* COLLAPSED, A HEADING BECOMES A RULE in the same height, so the glyphs below
   it stay exactly where they were and the sections still read as sections. */
.dk-component-sidebar__heading::after {
  content: '';
  position: absolute;
  inset-inline: calc(var(--_sb-zone) / 4);
  top: 50%;
  border-top: var(--dk-component-sidebar-border-width) solid var(--dk-component-sidebar-divider);
  opacity: 0;
  transition: opacity var(--dk-component-sidebar-duration) var(--dk-component-sidebar-easing);
}
.dk-component-sidebar[data-collapsed]:not([data-presentation="bar"]):not([data-presentation="drawer"]) .dk-component-sidebar__heading:not(.dk-component-sidebar__panel *) { color: transparent; }
.dk-component-sidebar[data-collapsed]:not([data-presentation="bar"]):not([data-presentation="drawer"]) .dk-component-sidebar__heading:not(.dk-component-sidebar__panel *)::after { opacity: 1; }

/* ── A row ─────────────────────────────────────────────────────────────────── */
.dk-component-sidebar__item {
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  appearance: none;
  display: flex;
  align-items: center;
  width: 100%;
  height: calc(var(--dk-component-sidebar-item-height) + var(--_sb-grow) * 2);
  margin: 0;
  padding: 0;
  padding-inline-end: var(--dk-spacing-2);
  border: var(--dk-component-sidebar-border-width) solid transparent;
  border-radius: var(--dk-component-sidebar-item-radius);
  background: transparent;
  color: var(--dk-component-sidebar-item-text);
  font: inherit;
  font-size: var(--dk-component-sidebar-item-font-size);
  line-height: var(--dk-component-sidebar-item-line-height);
  font-weight: var(--dk-component-sidebar-item-font-weight);
  text-align: start;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--dk-component-sidebar-duration) var(--dk-component-sidebar-easing),
    border-color var(--dk-component-sidebar-duration) var(--dk-component-sidebar-easing),
    color var(--dk-component-sidebar-duration) var(--dk-component-sidebar-easing),
    transform var(--dk-component-sidebar-duration) var(--dk-component-sidebar-easing);
}
.dk-component-sidebar__item[hidden] { display: none; }
.dk-component-sidebar__icon {
  position: relative;
  flex: 0 0 var(--_sb-zone);
  align-self: stretch;
  display: inline-grid;
  place-items: center;
}
.dk-component-sidebar__icon > svg, .dk-component-sidebar__icon > i, .dk-component-sidebar__icon > img {
  display: block;
  width: var(--dk-component-sidebar-item-icon-size);
  height: var(--dk-component-sidebar-item-icon-size);
}
.dk-component-sidebar__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--dk-component-sidebar-duration) var(--dk-component-sidebar-easing);
}
@media (hover: hover) {
  .dk-component-sidebar:not([data-presentation="bar"]) .dk-component-sidebar__item:hover:not([aria-current="page"]):not([aria-current="true"]):not([data-current-within]):not([aria-disabled="true"]) {
    background: var(--dk-component-sidebar-item-surface-hover);
    border-color: var(--dk-component-sidebar-item-border-hover);
    color: var(--dk-component-sidebar-item-text-hover);
  }
}
/* A press steps a rung past hover (16 Oct): the press fill was a token nothing
   read, so a press looked like a hover. It was the fill alone then, no edge;
   since 21 Oct (Julio, parity with Forge's rail) the row draws its edge on
   hover and a rung further on a press. The border is always there,
   transparent, so the edge never moves a row. */
.dk-component-sidebar:not([data-presentation="bar"]) .dk-component-sidebar__item:active:not([aria-current="page"]):not([aria-current="true"]):not([data-current-within]):not([aria-disabled="true"]) {
  background: var(--dk-component-sidebar-item-surface-active);
  border-color: var(--dk-component-sidebar-item-border-active);
  color: var(--dk-component-sidebar-item-text-active);
}
.dk-component-sidebar__item:active:not([aria-disabled="true"]) { transform: scale(var(--dk-component-sidebar-item-press-scale)); }
.dk-component-sidebar__item:focus-visible {
  outline: var(--dk-component-sidebar-focus-ring-width) solid var(--dk-component-sidebar-focus-ring);
  outline-offset: calc(var(--dk-component-sidebar-focus-ring-width) * -1);
}
.dk-component-sidebar__item[aria-disabled="true"] { color: var(--dk-component-sidebar-item-text-disabled); cursor: not-allowed; }

/* THE CURRENT ROW. Without the runtime it paints its own fill. With it, the
   fill is one indicator that slides from row to row (data-indicator on the
   root says it is there), and the row only turns its words white. */
.dk-component-sidebar__item:is([aria-current="page"], [aria-current="true"]) {
  background: var(--dk-component-sidebar-current-surface);
  border-color: var(--dk-component-sidebar-current-border);
  color: var(--dk-component-sidebar-current-text);
}
.dk-component-sidebar[data-indicator] .dk-component-sidebar__item:is([aria-current="page"], [aria-current="true"]),
.dk-component-sidebar[data-indicator] .dk-component-sidebar__item[data-current-within] {
  background: transparent;
  border-color: transparent;
  color: var(--dk-component-sidebar-current-text);
}
/* Without the runtime the current row paints its own fill, and steps its own
   edge on hover and press, as the indicator does below. */
@media (hover: hover) {
  .dk-component-sidebar:not([data-indicator]):not([data-presentation="bar"]) .dk-component-sidebar__item:is([aria-current="page"], [aria-current="true"]):hover {
    border-color: var(--dk-component-sidebar-current-border-hover);
  }
}
.dk-component-sidebar:not([data-indicator]):not([data-presentation="bar"]) .dk-component-sidebar__item:is([aria-current="page"], [aria-current="true"]):active {
  border-color: var(--dk-component-sidebar-current-border-active);
}
/* A group opening or closing moves the current row, and the row carries its
   own fill while it moves (the runtime sets this for the length of the move). */
.dk-component-sidebar[data-indicator] .dk-component-sidebar__item[data-sb-carry] {
  background: var(--dk-component-sidebar-current-surface);
  border-color: var(--dk-component-sidebar-current-border);
  color: var(--dk-component-sidebar-current-text);
}
.dk-component-sidebar__indicator {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  box-sizing: border-box;
  border: var(--dk-component-sidebar-border-width) solid var(--dk-component-sidebar-current-border);
  border-radius: var(--dk-component-sidebar-item-radius);
  background: var(--dk-component-sidebar-current-surface);
  pointer-events: none;
  transition:
    transform var(--dk-component-sidebar-indicator-duration) var(--dk-component-sidebar-easing),
    width var(--dk-component-sidebar-duration) var(--dk-component-sidebar-easing),
    height var(--dk-component-sidebar-indicator-duration) var(--dk-component-sidebar-easing),
    background-color var(--dk-component-sidebar-duration) var(--dk-component-sidebar-easing),
    border-color var(--dk-component-sidebar-duration) var(--dk-component-sidebar-easing);
}
.dk-component-sidebar__indicator[hidden] { display: none; }
/* The current row's fill is the indicator, so its hover and press are the
   indicator's: the fill a step on, the primary edge a step on, and a further
   step on a press (Forge's rail's, 21 Oct). */
@media (hover: hover) {
  :is(.dk-component-sidebar__body, .dk-component-sidebar__panel-body):has(.dk-component-sidebar__item[aria-current="page"]:hover, .dk-component-sidebar__item[aria-current="true"]:hover, .dk-component-sidebar__item[data-current-within]:hover) > .dk-component-sidebar__indicator {
    background: var(--dk-component-sidebar-current-surface-hover);
    border-color: var(--dk-component-sidebar-current-border-hover);
  }
}
:is(.dk-component-sidebar__body, .dk-component-sidebar__panel-body):has(.dk-component-sidebar__item[aria-current="page"]:active, .dk-component-sidebar__item[aria-current="true"]:active, .dk-component-sidebar__item[data-current-within]:active) > .dk-component-sidebar__indicator {
  border-color: var(--dk-component-sidebar-current-border-active);
}

/* The count, and the unread dot. Expanded, the count sits at the row's end;
   collapsed, it moves onto the glyph's corner, still a number. */
.dk-component-sidebar__badge {
  box-sizing: border-box;
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: var(--dk-component-sidebar-badge-size);
  height: var(--dk-component-sidebar-badge-size);
  margin-inline-start: var(--dk-spacing-2);
  padding: 0 var(--dk-spacing-1-5);
  border-radius: var(--dk-border-radius-round-fixed);
  background: var(--dk-component-sidebar-badge-surface);
  color: var(--dk-component-sidebar-badge-text);
  font-size: var(--dk-component-sidebar-badge-font-size);
  font-weight: var(--dk-component-sidebar-badge-font-weight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: opacity var(--dk-component-sidebar-duration) var(--dk-component-sidebar-easing);
}
.dk-component-sidebar__item:is([aria-current="page"], [aria-current="true"]) .dk-component-sidebar__badge {
  background: var(--dk-component-sidebar-badge-current-surface);
  color: var(--dk-component-sidebar-badge-current-text);
}
.dk-component-sidebar__dot {
  position: absolute;
  top: calc(50% - var(--dk-component-sidebar-item-icon-size) / 2 - var(--dk-component-sidebar-dot-size) / 4);
  inset-inline-start: calc(var(--_sb-zone) / 2 + var(--dk-component-sidebar-item-icon-size) / 2 - var(--dk-component-sidebar-dot-size) * 3 / 4);
  width: var(--dk-component-sidebar-dot-size);
  height: var(--dk-component-sidebar-dot-size);
  border-radius: var(--dk-border-radius-round-fixed);
  background: var(--dk-component-sidebar-dot-surface);
  box-shadow: 0 0 0 var(--dk-border-width-50) var(--dk-component-sidebar-docked-surface);
  /* Words inside it ("New") are for a screen reader only: the dot is the
     picture, the words are its name. */
  overflow: hidden;
  font-size: 0;
  color: transparent;
}
.dk-component-sidebar[data-collapsed]:not([data-presentation="bar"]):not([data-presentation="drawer"]) .dk-component-sidebar__label:not(.dk-component-sidebar__panel *) { opacity: 0; }
.dk-component-sidebar[data-collapsed]:not([data-presentation="bar"]):not([data-presentation="drawer"]) .dk-component-sidebar__badge:not(.dk-component-sidebar__panel *) {
  position: absolute;
  top: calc(var(--dk-spacing-1) * 0.5);
  inset-inline-start: calc(var(--_sb-zone) / 2 + var(--dk-spacing-1));
  min-width: calc(var(--dk-component-sidebar-badge-size) * 0.8);
  height: calc(var(--dk-component-sidebar-badge-size) * 0.8);
  margin: 0;
  padding: 0 var(--dk-spacing-1);
  box-shadow: 0 0 0 var(--dk-border-width-50) var(--dk-component-sidebar-docked-surface);
}

/* ── Groups ──────────────────────────────────────────────────────────────── */
.dk-component-sidebar__chevron {
  flex: none;
  display: inline-grid;
  place-items: center;
  margin-inline-start: var(--dk-spacing-1);
  transition: transform var(--dk-component-sidebar-duration) var(--dk-component-sidebar-easing), opacity var(--dk-component-sidebar-duration) var(--dk-component-sidebar-easing);
}
.dk-component-sidebar__chevron > svg { width: var(--dk-primitive-scale-4); height: var(--dk-primitive-scale-4); display: block; }
.dk-component-sidebar__item[aria-expanded="true"] .dk-component-sidebar__chevron { transform: rotate(180deg); }
.dk-component-sidebar[data-collapsed]:not([data-presentation="bar"]):not([data-presentation="drawer"]) .dk-component-sidebar__chevron:not(.dk-component-sidebar__panel *) { opacity: 0; }
.dk-component-sidebar__list[data-level="2"] {
  position: relative;
  margin-top: var(--dk-component-sidebar-item-gap);
  overflow: hidden;
}
.dk-component-sidebar__list[data-level="2"][hidden] { display: none; }
/* The guide: a line down the icon column, from the parent to its last child,
   so a nested list reads as belonging rather than as indented. A rounded bar
   two hairlines wide (14 Oct), on the left edge of the parent's glyph, which
   sits centred in the icon column. */
.dk-component-sidebar__list[data-level="2"]::before {
  content: '';
  position: absolute;
  inset-block: var(--dk-spacing-1);
  inset-inline-start: calc(var(--dk-component-sidebar-border-width) + var(--_sb-zone) / 2 - var(--dk-component-sidebar-item-icon-size) / 2);
  width: var(--dk-component-sidebar-guide-width);
  background: var(--dk-component-sidebar-guide);
  border-radius: var(--dk-component-sidebar-guide-radius);
  z-index: -1;
}
.dk-component-sidebar__list[data-level="2"] .dk-component-sidebar__item {
  width: auto;
  height: calc(var(--dk-component-sidebar-child-height) + var(--_sb-grow) * 2);
  /* The child inset past the guide, so the rows move with it. */
  margin-inline-start: calc(var(--dk-component-sidebar-border-width) + var(--_sb-zone) / 2 - var(--dk-component-sidebar-item-icon-size) / 2 + var(--dk-component-sidebar-child-inset));
  padding-inline-start: var(--dk-spacing-2);
  gap: var(--dk-component-sidebar-child-gap);
  font-weight: var(--dk-component-sidebar-child-font-weight);
}
.dk-component-sidebar__list[data-level="2"] .dk-component-sidebar__icon { flex: none; align-self: center; }
.dk-component-sidebar__list[data-level="2"] .dk-component-sidebar__icon > :is(svg, i, img) {
  width: var(--dk-component-sidebar-child-icon-size);
  height: var(--dk-component-sidebar-child-icon-size);
}
/* Collapsed, children are reached through the parent's flyout, never in place. */
.dk-component-sidebar[data-collapsed]:not([data-presentation="bar"]):not([data-presentation="drawer"]) .dk-component-sidebar__list[data-level="2"] { display: none; }

/* ── The foot: utilities, then the user ──────────────────────────────────────
   Ruled off like the head. The negative margin takes back the root's gap, so
   the body's clip edge is the rule itself: rows scroll right up under it
   instead of vanishing a gap short of it. */
.dk-component-sidebar__foot {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--dk-component-sidebar-item-gap);
  margin-top: calc(var(--dk-component-sidebar-gap) * -1);
  padding-top: var(--dk-component-sidebar-gap);
  border-top: var(--dk-component-sidebar-border-width) solid var(--dk-component-sidebar-divider);
}
.dk-component-sidebar__toggle .dk-component-sidebar__icon > svg { transition: transform var(--dk-component-sidebar-duration) var(--dk-component-sidebar-easing); }
.dk-component-sidebar[data-collapsed]:not([data-presentation="bar"]):not([data-presentation="drawer"]) .dk-component-sidebar__toggle .dk-component-sidebar__icon > svg { transform: scaleX(-1); }
/* Right to left the rail is on the right, so the glyph points the other way in both states. */
.dk-component-sidebar:dir(rtl) .dk-component-sidebar__toggle .dk-component-sidebar__icon > svg { transform: scaleX(-1); }
.dk-component-sidebar[data-collapsed]:not([data-presentation="bar"]):not([data-presentation="drawer"]):dir(rtl) .dk-component-sidebar__toggle .dk-component-sidebar__icon > svg { transform: none; }
.dk-component-sidebar__account { display: block; width: 100%; }
.dk-component-sidebar__user {
  box-sizing: border-box;
  appearance: none;
  display: flex;
  align-items: center;
  width: 100%;
  height: calc(var(--dk-component-sidebar-user-height) + var(--_sb-grow) * 2);
  margin: 0;
  padding: 0;
  padding-inline-end: var(--dk-spacing-2);
  border: var(--dk-component-sidebar-border-width) solid transparent;
  border-radius: var(--dk-component-sidebar-item-radius);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dk-component-sidebar-duration) var(--dk-component-sidebar-easing), border-color var(--dk-component-sidebar-duration) var(--dk-component-sidebar-easing), transform var(--dk-component-sidebar-duration) var(--dk-component-sidebar-easing);
}
div.dk-component-sidebar__user { cursor: default; }
.dk-component-sidebar__user > .dk-component-avatar { margin-inline: calc((var(--_sb-zone) - var(--dk-component-sidebar-user-avatar-size)) / 2); flex: none; }
.dk-component-sidebar__account[data-open] .dk-component-sidebar__user {
  background: var(--dk-component-sidebar-item-surface-hover);
}
@media (hover: hover) {
  .dk-component-sidebar:not([data-presentation="bar"]) button.dk-component-sidebar__user:hover {
    background: var(--dk-component-sidebar-item-surface-hover);
  }
}
.dk-component-sidebar:not([data-presentation="bar"]) button.dk-component-sidebar__user:active {
  background: var(--dk-component-sidebar-item-surface-active);
}
button.dk-component-sidebar__user:active { transform: scale(var(--dk-component-sidebar-item-press-scale)); }
.dk-component-sidebar__user:focus-visible {
  outline: var(--dk-component-sidebar-focus-ring-width) solid var(--dk-component-sidebar-focus-ring);
  outline-offset: calc(var(--dk-component-sidebar-focus-ring-width) * -1);
}
.dk-component-sidebar__user-text {
  flex: 1 1 auto;
  /* The avatar sits centred in the collapsed rail's column, as the nav icons
     do, but it is wider than an icon, so the words need room of their own. */
  margin-inline-start: var(--dk-component-sidebar-user-text-gap);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--dk-primitive-scale-0-25);
  transition: opacity var(--dk-component-sidebar-duration) var(--dk-component-sidebar-easing);
}
.dk-component-sidebar__user-name, .dk-component-sidebar__user-meta { overflow: hidden; text-overflow: ellipsis; }
.dk-component-sidebar__user-name {
  font-size: var(--dk-component-sidebar-user-name-font-size);
  font-weight: var(--dk-component-sidebar-user-name-font-weight);
  line-height: var(--dk-component-sidebar-item-line-height);
  color: var(--dk-component-sidebar-user-name-color);
}
.dk-component-sidebar__user-meta {
  font-size: var(--dk-component-sidebar-user-meta-font-size);
  line-height: var(--dk-primitive-scale-4);
  color: var(--dk-component-sidebar-user-meta-color);
}
.dk-component-sidebar__user .dk-component-sidebar__chevron { color: var(--dk-component-sidebar-item-text); }
.dk-component-sidebar[data-collapsed]:not([data-presentation="bar"]):not([data-presentation="drawer"]) .dk-component-sidebar__wordmark,
.dk-component-sidebar[data-collapsed]:not([data-presentation="bar"]):not([data-presentation="drawer"]) .dk-component-sidebar__user-text { opacity: 0; }
.dk-component-sidebar__bar-label { display: none; }
/* The More slot is the bar's alone. */
.dk-component-sidebar__more { display: none; }

/* ═══ GLASS ═══════════════════════════════════════════════════════════════════
   Floating is Forge's glass rail, and wears its blurred brand strokes too
   (kit/glass.css; the runtime lays the layer). Docked is the plain raised
   surface, and the phone bar its own, so neither shows them. Nor does the
   nested drawer: it is its own scroller, so the layer would scroll away with
   the first screen of rows. */
.dk-component-sidebar:not([data-variant="floating"]) > .dk-glass-decor,
.dk-component-sidebar[data-presentation="bar"] > .dk-glass-decor,
.dk-component-sidebar[data-nested][data-presentation="drawer"] > .dk-glass-decor { display: none; }

/* ═══ NESTED ═════════════════════════════════════════════════════════════════
   A rail of sections with a panel of the current section's pages beside it,
   Forge's design system nav. The runtime writes data-nested when there is a
   __panel. The rail keeps its own column, at its own width, collapsing as it
   always does; the panel is a second column that never collapses, a recess
   inset from the rail's edges by the rail's side padding. The root is one
   surface, so there is no seam between them. */
.dk-component-sidebar[data-nested][data-presentation="rail"] {
  display: grid;
  /* The rail column is its own width, not what is left: the same number at
     rest, and it keeps the rail whole while a closed panel takes no room. */
  grid-template-columns: calc(var(--_sb-w) - var(--dk-component-sidebar-padding-inline) * 2 - var(--_sb-frame)) var(--dk-component-sidebar-panel-width);
  grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: var(--dk-component-sidebar-padding-inline);
  width: calc(var(--_sb-w) + var(--dk-component-sidebar-panel-width) + var(--dk-component-sidebar-padding-inline));
  /* The rail column is sized from --_sb-w too, so on a collapse it travels
     with the width; left alone it snapped, and took the panel with it. */
  transition: width var(--dk-component-sidebar-duration) var(--dk-component-sidebar-easing), grid-template-columns var(--dk-component-sidebar-duration) var(--dk-component-sidebar-easing);
}
/* The panel arriving and leaving (behaviour.js, openPanel / closePanel).
   Closed is the rail's own width, the panel clipped behind its edge; opening
   and closing ride the travel pattern. Rows wait hidden, rise in on
   "filling" half a beat apart, and drop out in reverse on "closing". */
.dk-component-sidebar[data-nested][data-presentation="rail"][data-panel="closed"] { width: var(--_sb-w); }
.dk-component-sidebar[data-nested][data-presentation="rail"][data-panel] {
  transition: width var(--dk-component-sidebar-panel-duration) var(--dk-component-sidebar-panel-easing), grid-template-columns var(--dk-component-sidebar-duration) var(--dk-component-sidebar-easing);
}
.dk-component-sidebar[data-panel]:not([data-panel="filling"]):not([data-panel="closing"]) [data-sb-unit] { opacity: 0; }
.dk-component-sidebar[data-panel="filling"] [data-sb-unit] {
  animation: dk-component-sidebar-row-in var(--dk-component-sidebar-panel-row-duration) var(--dk-component-sidebar-panel-row-easing) backwards;
  animation-delay: calc(var(--_sb-ri, 0) * var(--dk-component-sidebar-panel-row-beat) / 2);
}
.dk-component-sidebar[data-panel="closing"] [data-sb-unit] {
  animation: dk-component-sidebar-row-out var(--dk-component-sidebar-panel-row-exit-duration) var(--dk-component-sidebar-panel-row-exit-easing) forwards;
  animation-delay: calc(var(--_sb-ro, 0) * var(--dk-component-sidebar-panel-row-beat) / 4);
}
.dk-component-sidebar[data-panel="closed"] [data-sb-unit] { animation: none; }
/* The indicator under the current row goes with that row, by fading only:
   its transform is what places it. */
.dk-component-sidebar[data-panel]:not([data-panel="filling"]):not([data-panel="closing"]) .dk-component-sidebar__panel-body > .dk-component-sidebar__indicator { opacity: 0; }
.dk-component-sidebar[data-panel="filling"] .dk-component-sidebar__panel-body > .dk-component-sidebar__indicator {
  animation: dk-component-sidebar-fade-in var(--dk-component-sidebar-panel-row-duration) var(--dk-component-sidebar-panel-row-easing) backwards;
  animation-delay: calc(var(--_sb-ri, 0) * var(--dk-component-sidebar-panel-row-beat) / 2);
}
.dk-component-sidebar[data-panel="closing"] .dk-component-sidebar__panel-body > .dk-component-sidebar__indicator {
  animation: dk-component-sidebar-fade-out var(--dk-component-sidebar-panel-row-exit-duration) var(--dk-component-sidebar-panel-row-exit-easing) forwards;
  animation-delay: calc(var(--_sb-ro, 0) * var(--dk-component-sidebar-panel-row-beat) / 4);
}
@keyframes dk-component-sidebar-fade-in { from { opacity: 0; } }
/* The rows' own rise, on chrome's distance: the kit's dk-motion-rise-in
   carries the page's, twice as far. */
@keyframes dk-component-sidebar-row-in { from { opacity: 0; transform: translateY(var(--dk-component-sidebar-panel-row-rise)); } }
@keyframes dk-component-sidebar-fade-out { to { opacity: 0; } }
@keyframes dk-component-sidebar-row-out {
  to { opacity: 0; transform: translateY(calc(var(--dk-component-sidebar-panel-row-rise) / -2)); }
}
@media (prefers-reduced-motion: reduce) {
  @keyframes dk-component-sidebar-row-out { to { opacity: 0; } }
}
.dk-component-sidebar[data-nested][data-presentation="rail"] > .dk-component-sidebar__head { grid-column: 1; grid-row: 1; }
.dk-component-sidebar[data-nested][data-presentation="rail"] > .dk-component-sidebar__body { grid-column: 1; grid-row: 2; }
.dk-component-sidebar[data-nested][data-presentation="rail"] > .dk-component-sidebar__foot { grid-column: 1; grid-row: 3; }
.dk-component-sidebar[data-nested][data-presentation="rail"] > .dk-component-sidebar__panel {
  grid-column: 2;
  grid-row: 1 / -1;
  /* Inset by the side padding on every edge, not the taller top and bottom. */
  margin-block: calc(var(--dk-component-sidebar-padding-inline) - var(--dk-component-sidebar-padding-block));
}
.dk-component-sidebar__panel {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--dk-component-sidebar-panel-surface);
  border: var(--dk-component-sidebar-border-width) solid var(--dk-component-sidebar-panel-border);
  border-radius: var(--dk-component-sidebar-panel-radius);
  overflow: hidden;
}
.dk-component-sidebar__panel-title {
  flex: none;
  display: block;
  padding: var(--dk-component-sidebar-panel-padding) calc(var(--dk-component-sidebar-panel-padding) + var(--dk-spacing-2));
  padding-bottom: 0;
  font-size: var(--dk-component-sidebar-panel-title-font-size);
  line-height: var(--dk-component-sidebar-child-height);
  font-weight: var(--dk-component-sidebar-panel-title-font-weight);
  color: var(--dk-component-sidebar-panel-title-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dk-component-sidebar__panel-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--dk-component-sidebar-gap);
  padding: var(--dk-component-sidebar-panel-padding);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dk-component-sidebar__panel-body::-webkit-scrollbar { width: var(--dk-component-sidebar-scrollbar-size); }
.dk-component-sidebar__panel-body::-webkit-scrollbar-track { background: transparent; }
.dk-component-sidebar__panel-body::-webkit-scrollbar-thumb {
  background: var(--dk-component-sidebar-scrollbar-thumb);
  border-radius: var(--dk-component-sidebar-scrollbar-size);
}
@supports not selector(::-webkit-scrollbar) {
  .dk-component-sidebar__panel-body { scrollbar-width: thin; scrollbar-color: var(--dk-component-sidebar-scrollbar-thumb) transparent; }
}
/* A heading in the panel lines up with the rows' glyphs. */
.dk-component-sidebar__panel .dk-component-sidebar__heading { padding-inline: var(--dk-spacing-2); }
/* The panel's rows are the children's: shorter, a 16px glyph beside the words
   rather than in the rail's fixed column, which the panel does not have. */
.dk-component-sidebar__panel .dk-component-sidebar__item {
  height: calc(var(--dk-component-sidebar-child-height) + var(--_sb-grow) * 2);
  padding-inline-start: var(--dk-spacing-2);
  gap: var(--dk-component-sidebar-child-gap);
  font-weight: var(--dk-component-sidebar-child-font-weight);
}
.dk-component-sidebar__panel .dk-component-sidebar__icon { flex: none; align-self: center; }
.dk-component-sidebar__panel .dk-component-sidebar__icon > :is(svg, i, img) {
  width: var(--dk-component-sidebar-child-icon-size);
  height: var(--dk-component-sidebar-child-icon-size);
}
.dk-component-sidebar__panel .dk-component-sidebar__dot { inset-inline-start: calc(var(--dk-component-sidebar-child-icon-size) - var(--dk-component-sidebar-dot-size) * 3 / 4); top: calc(50% - var(--dk-component-sidebar-child-icon-size) / 2 - var(--dk-component-sidebar-dot-size) / 4); }
@media (hover: hover) {
  .dk-component-sidebar:not([data-presentation="bar"]) .dk-component-sidebar__panel .dk-component-sidebar__item:hover:not([aria-current="page"]):not([aria-current="true"]):not([data-current-within]):not([aria-disabled="true"]) {
    background: var(--dk-component-sidebar-panel-item-surface-hover);
    border-color: var(--dk-component-sidebar-panel-item-border-hover);
  }
}
.dk-component-sidebar:not([data-presentation="bar"]) .dk-component-sidebar__panel .dk-component-sidebar__item:active:not([aria-current="page"]):not([aria-current="true"]):not([data-current-within]):not([aria-disabled="true"]) {
  background: var(--dk-component-sidebar-item-surface-active);
  border-color: var(--dk-component-sidebar-panel-item-border-active);
}
/* In the drawer there is no room beside the rail: the panel follows the
   rail's list, full width, and the drawer scrolls as one, rather than two
   short scrollers stacked. The rows are max-content: auto rows let a full
   drawer squeeze the body and panel into each other (measured 254 for 348). The
   foot stays pinned to the bottom, as it is in any drawer, over a fill of its
   own. */
.dk-component-sidebar[data-nested][data-presentation="drawer"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: max-content max-content max-content minmax(max-content, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.dk-component-sidebar[data-nested][data-presentation="drawer"]::-webkit-scrollbar { width: 0; height: 0; }
.dk-component-sidebar[data-nested][data-presentation="drawer"] > .dk-component-sidebar__head { grid-row: 1; }
.dk-component-sidebar[data-nested][data-presentation="drawer"] > .dk-component-sidebar__body { grid-row: 2; overflow: visible; }
.dk-component-sidebar[data-nested][data-presentation="drawer"] > .dk-component-sidebar__panel { grid-row: 3; overflow: visible; }
.dk-component-sidebar[data-nested][data-presentation="drawer"] .dk-component-sidebar__panel-body { overflow: visible; }
.dk-component-sidebar[data-nested][data-presentation="drawer"] > .dk-component-sidebar__foot {
  grid-row: 4;
  align-self: end;
  position: sticky;
  z-index: 2;
  bottom: calc(var(--dk-component-sidebar-padding-block) * -1);
  margin-bottom: calc(var(--dk-component-sidebar-padding-block) * -1);
  padding-bottom: var(--dk-component-sidebar-padding-block);
  background: var(--dk-component-sidebar-docked-surface);
}

/* ── The rise ────────────────────────────────────────────────────────────────
   On a user's expand (never on load: data-rising is only written by a click),
   each label's letters rise out of their own masks, staggered left to right
   and row by row. The letters are aria-hidden and the name is kept whole in
   a visually hidden copy, so a screen reader hears "Payments", not a spelling.
   data-motion="simple" on the root, or a label that is not plain text, skips
   the split and the label simply fades in. */
.dk-component-sidebar__label-text {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.dk-component-sidebar__chars { display: inline-block; }
/* The mask is the label's own line, so a letter sits exactly where the plain
   label's would (a fixed 1.25 put every letter 1.25px low, off the glyph's
   centre). The rise starts 125% of that line down, out of sight below it. */
.dk-component-sidebar__char { display: inline-block; overflow: hidden; vertical-align: bottom; line-height: inherit; }
.dk-component-sidebar__char[data-space] { white-space: pre; }
.dk-component-sidebar__char > span { display: inline-block; }
.dk-component-sidebar[data-rising] .dk-component-sidebar__char > span {
  animation: dk-component-sidebar-rise var(--dk-component-sidebar-rise-duration) var(--dk-component-sidebar-easing) both;
  animation-delay: calc(var(--_sb-row, 0) * var(--dk-component-sidebar-rise-row-stagger) + var(--_sb-i, 0) * var(--dk-component-sidebar-rise-stagger));
}
@keyframes dk-component-sidebar-rise {
  from { transform: translateY(125%); }
  to { transform: translateY(0); }
}
/* A Logo in the mark whose letters are marked (data-letter, MyKarmo's) rises
   with them, first, on the labels' stagger (5 Nov, Julio): each letter from
   below the logo's own frame, which masks it as a label's line does its
   letters (transform-box view-box: 125% is the frame's height). The symbol
   stays. */
.dk-component-sidebar[data-rising] .dk-component-sidebar__mark .dk-component-logo [data-letter] {
  transform-box: view-box;
  animation: dk-component-sidebar-rise var(--dk-component-sidebar-rise-duration) var(--dk-component-sidebar-easing) both;
  animation-delay: calc(var(--_sb-i, 0) * var(--dk-component-sidebar-rise-stagger));
}
.dk-component-sidebar__mark .dk-component-logo [data-letter="0"] { --_sb-i: 0; }
.dk-component-sidebar__mark .dk-component-logo [data-letter="1"] { --_sb-i: 1; }
.dk-component-sidebar__mark .dk-component-logo [data-letter="2"] { --_sb-i: 2; }
.dk-component-sidebar__mark .dk-component-logo [data-letter="3"] { --_sb-i: 3; }
.dk-component-sidebar__mark .dk-component-logo [data-letter="4"] { --_sb-i: 4; }
.dk-component-sidebar__mark .dk-component-logo [data-letter="5"] { --_sb-i: 5; }
.dk-component-sidebar__mark .dk-component-logo [data-letter="6"] { --_sb-i: 6; }
.dk-component-sidebar__mark .dk-component-logo [data-letter="7"] { --_sb-i: 7; }
.dk-component-sidebar__mark .dk-component-logo [data-letter="8"] { --_sb-i: 8; }
.dk-component-sidebar__mark .dk-component-logo [data-letter="9"] { --_sb-i: 9; }

/* THE FIRST PRESENTATION IS PLACED, NOT PLAYED. The runtime writes it after
   the first style, so without this a phone would watch the rail slide away
   into a drawer, or a bar slide up, on every page load. */
.dk-component-sidebar[data-sb-instant], .dk-component-sidebar[data-sb-instant] * { transition: none !important; }

/* ═══ THE PHONE BAR ═══════════════════════════════════════════════════════════
   The same rows, laid side by side along the bottom of the screen. The head,
   the headings, the children and the foot's utilities step out (the runtime
   puts the utilities, and any destination past the fifth slot, in More); the
   sections and lists dissolve so the rows are the bar's own children.

   ON TOUCH THE FLOATING BAR SITS LOWER: under @media (pointer: coarse) its
   distance from the foot (--dk-component-sidebar-bar-bottom) is spacing-3
   instead of the inset's 16, and its shadow (--dk-component-sidebar-bar-shadow)
   is raised instead of floating. The pointer decides, at any width; a desktop
   mouse at phone width keeps 16 and floating. The sides stay on the inset.
   Set either token on the Sidebar to pin it. */
.dk-component-sidebar[data-presentation="bar"] {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  top: auto;
  z-index: var(--dk-component-sidebar-bar-z-index);
  flex-direction: row;
  align-items: stretch;
  gap: var(--dk-component-sidebar-bar-item-gap);
  width: auto;
  height: auto;
  min-height: var(--dk-component-sidebar-bar-height);
  margin: 0;
  padding: var(--dk-component-sidebar-bar-padding) var(--dk-component-sidebar-bar-padding) calc(var(--dk-component-sidebar-bar-padding) + env(safe-area-inset-bottom, 0px));
  background: var(--dk-component-sidebar-bar-surface);
  border: 0;
  border-top: var(--dk-component-sidebar-border-width) solid var(--dk-component-sidebar-bar-border);
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  overflow: visible;
  transition: none;
}
.dk-component-sidebar[data-presentation="bar"][data-variant="floating"] {
  inset-inline: var(--dk-component-sidebar-bar-inset);
  bottom: max(var(--dk-component-sidebar-bar-bottom), env(safe-area-inset-bottom, 0px));
  max-width: var(--dk-component-sidebar-bar-max-width);
  margin-inline: auto;
  padding-bottom: var(--dk-component-sidebar-bar-padding);
  border: var(--dk-component-sidebar-border-width) solid var(--dk-component-sidebar-bar-border);
  border-radius: var(--dk-component-sidebar-bar-radius);
  box-shadow: var(--dk-component-sidebar-bar-shadow);
}
.dk-component-sidebar[data-presentation="bar"] :is(.dk-component-sidebar__panel, .dk-component-sidebar__head, .dk-component-sidebar__heading, .dk-component-sidebar__indicator, .dk-component-sidebar__chevron, .dk-component-sidebar__foot > .dk-component-sidebar__list, .dk-component-sidebar__list[data-level="2"], .dk-component-sidebar__user-text, [data-bar-hidden]) { display: none; }
.dk-component-sidebar[data-presentation="bar"] :is(.dk-component-sidebar__body, .dk-component-sidebar__section, .dk-component-sidebar__list, .dk-component-sidebar__list > li, .dk-component-sidebar__foot) { display: contents; }
.dk-component-sidebar[data-presentation="bar"] :is(.dk-component-sidebar__item, .dk-component-sidebar__user) {
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: var(--dk-spacing-0-5);
  width: auto;
  height: calc(var(--dk-component-sidebar-bar-height) - var(--dk-component-sidebar-bar-padding) * 2);
  padding: var(--dk-spacing-0-5);
  /* Zero wide and transparent: a bare 0 would reset the colour to
     currentColor, and a change to the rail would fade that in as an
     outline on every item. */
  border: 0 solid transparent;
  border-radius: var(--dk-component-sidebar-bar-item-radius);
  background: transparent;
  color: var(--dk-component-sidebar-item-text);
  text-align: center;
  transition: background-color var(--dk-component-sidebar-duration) var(--dk-component-sidebar-easing),
              color var(--dk-component-sidebar-duration) var(--dk-component-sidebar-easing),
              transform var(--dk-motion-press-duration) var(--dk-motion-press-easing);
}
/* The state checks in :where(), so the fidelity looks, which set their own
   slot fills, still outweigh these. */
@media (hover: hover) {
  .dk-component-sidebar[data-presentation="bar"] :is(.dk-component-sidebar__item, .dk-component-sidebar__user):hover:where(:not([aria-current="page"]):not([aria-current="true"]):not([data-current-within]):not([aria-disabled="true"])) {
    background-color: var(--dk-component-sidebar-bar-item-surface-hover);
  }
}
.dk-component-sidebar[data-presentation="bar"] :is(.dk-component-sidebar__item, .dk-component-sidebar__user):active:where(:not([aria-disabled="true"])) {
  background-color: var(--dk-component-sidebar-bar-item-surface-active);
}
.dk-component-sidebar[data-presentation="bar"] .dk-component-sidebar__icon {
  flex: none;
  align-self: center;
  width: var(--dk-component-sidebar-bar-pill-width);
  height: var(--dk-component-sidebar-bar-pill-height);
  border-radius: var(--dk-border-radius-200);
}
.dk-component-sidebar[data-presentation="bar"] .dk-component-sidebar__icon > :is(svg, i, img) { width: var(--dk-component-sidebar-bar-icon-size); height: var(--dk-component-sidebar-bar-icon-size); }
.dk-component-sidebar[data-presentation="bar"] :is(.dk-component-sidebar__label, .dk-component-sidebar__bar-label) {
  display: block;
  flex: none;
  max-width: 100%;
  font-size: var(--dk-component-sidebar-bar-font-size);
  line-height: var(--dk-component-sidebar-bar-line-height);
  font-weight: var(--dk-component-sidebar-bar-font-weight);
  opacity: 1;
}
/* Current, and a slot whose menu is open: the whole slot takes the current
   fill; current also takes the primary text, which the glyph follows. With
   the runtime (data-bar-indicator) the current fill is one indicator that
   slides from slot to slot, and the slot keeps only its words. */
.dk-component-sidebar[data-presentation="bar"] .dk-component-sidebar__item:is([aria-current="page"], [aria-current="true"]),
.dk-component-sidebar[data-presentation="bar"] .dk-component-sidebar__item[data-current-within] {
  background-color: var(--dk-component-sidebar-bar-current-surface);
  color: var(--dk-component-sidebar-bar-current-text);
}
.dk-component-sidebar[data-presentation="bar"][data-bar-indicator] .dk-component-sidebar__item:where([aria-current="page"], [aria-current="true"], [data-current-within]) {
  background-color: transparent;
}
.dk-component-sidebar__bar-indicator { display: none; }
.dk-component-sidebar[data-presentation="bar"] > .dk-component-sidebar__bar-indicator {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  box-sizing: border-box;
  border-radius: var(--dk-component-sidebar-bar-item-radius);
  background: var(--dk-component-sidebar-bar-current-surface);
  pointer-events: none;
  transition:
    translate var(--dk-component-sidebar-indicator-duration) var(--dk-component-sidebar-easing),
    width var(--dk-component-sidebar-indicator-duration) var(--dk-component-sidebar-easing),
    scale var(--dk-motion-press-duration) var(--dk-motion-press-easing),
    background-color var(--dk-component-sidebar-duration) var(--dk-component-sidebar-easing);
}
.dk-component-sidebar[data-presentation="bar"] > .dk-component-sidebar__bar-indicator[hidden] { display: none; }
/* The fill is the current slot's, so it takes the slot's press. */
.dk-component-sidebar[data-presentation="bar"]:has(.dk-component-sidebar__item:where([aria-current="page"], [aria-current="true"], [data-current-within]):active) > .dk-component-sidebar__bar-indicator {
  scale: var(--dk-component-sidebar-bar-press-scale);
}
.dk-component-sidebar[data-presentation="bar"] :where(:is(.dk-component-sidebar__more, .dk-component-sidebar__account, .dk-component-sidebar__group)[data-open]) :is(.dk-component-sidebar__item, .dk-component-sidebar__user) {
  background-color: var(--dk-component-sidebar-bar-current-surface);
}
.dk-component-sidebar[data-presentation="bar"] .dk-component-sidebar__badge {
  position: absolute;
  top: calc(var(--dk-spacing-1) * -0.5);
  inset-inline-start: calc(50% + var(--dk-spacing-1));
  min-width: calc(var(--dk-component-sidebar-badge-size) * 0.8);
  height: calc(var(--dk-component-sidebar-badge-size) * 0.8);
  margin: 0;
  padding: 0 var(--dk-spacing-1);
  box-shadow: 0 0 0 var(--dk-border-width-50) var(--dk-component-sidebar-bar-surface);
}
.dk-component-sidebar[data-presentation="bar"] .dk-component-sidebar__dot {
  top: calc(var(--dk-spacing-1-5) + (var(--dk-component-sidebar-bar-pill-height) - var(--dk-component-sidebar-bar-icon-size)) / 2 - var(--dk-component-sidebar-dot-size) / 2);
  inset-inline-start: calc(50% + var(--dk-component-sidebar-bar-icon-size) / 2 - var(--dk-component-sidebar-dot-size) * 3 / 4);
  box-shadow: 0 0 0 var(--dk-border-width-50) var(--dk-component-sidebar-bar-surface);
  --dk-component-sidebar-dot-surface: var(--dk-component-sidebar-bar-dot-surface);
}
.dk-component-sidebar[data-presentation="bar"] :is(.dk-component-sidebar__more, .dk-component-sidebar__account) { display: flex; flex: 1 1 0; min-width: 0; }
.dk-component-sidebar[data-presentation="bar"] .dk-component-sidebar__more:not([data-bar-shown]) { display: none; }
/* The avatar at bar scale. A transform rather than a size, so the Avatar's
   own geometry and type stay the Avatar's: 32 drawn at three quarters is 24. */
.dk-component-sidebar[data-presentation="bar"] .dk-component-sidebar__user > .dk-component-avatar { margin: 0; transform: scale(0.75); margin-block: calc(var(--dk-primitive-scale-8) * -0.125); }
/* The press: the whole slot, fill and all, shrinks on the control press. */
.dk-component-sidebar[data-presentation="bar"] :is(.dk-component-sidebar__item, .dk-component-sidebar__user):where(:active:not([aria-disabled="true"])) { transform: scale(var(--dk-component-sidebar-bar-press-scale)); }
.dk-component-sidebar[data-presentation="bar"] .dk-component-sidebar__label-text { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: hidden; text-overflow: ellipsis; }
.dk-component-sidebar[data-presentation="bar"] .dk-component-sidebar__chars { display: none; }

/* ═══ THE PHONE DRAWER ════════════════════════════════════════════════════════
   The rail, always wide, off the start edge until it is asked for. Hidden is
   visibility as well as position, so a closed drawer's links are out of the
   tab order and the accessibility tree without anyone managing inert. */
.dk-component-sidebar[data-presentation="drawer"] {
  --_sb-w: var(--dk-component-sidebar-drawer-width);
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: var(--dk-component-sidebar-drawer-z-index);
  height: 100%;
  margin: 0;
  border-radius: 0;
  box-shadow: var(--dk-component-sidebar-drawer-shadow);
  transform: translateX(-100%);
  visibility: hidden;
  transition:
    transform var(--dk-component-sidebar-drawer-duration) var(--dk-component-sidebar-drawer-easing),
    visibility 0s linear var(--dk-component-sidebar-drawer-duration);
}
.dk-component-sidebar[data-presentation="drawer"]:dir(rtl) { transform: translateX(100%); }
.dk-component-sidebar[data-presentation="drawer"][data-open] {
  transform: none;
  visibility: visible;
  transition:
    transform var(--dk-component-sidebar-drawer-duration) var(--dk-component-sidebar-drawer-easing),
    visibility 0s;
}
.dk-component-sidebar[data-presentation="drawer"][data-variant="floating"] {
  inset-block: var(--dk-component-sidebar-floating-inset);
  inset-inline-start: var(--dk-component-sidebar-floating-inset);
  height: auto;
  transform: translateX(calc(-100% - var(--dk-component-sidebar-floating-inset) * 2));
}
.dk-component-sidebar[data-presentation="drawer"][data-variant="floating"]:dir(rtl) { transform: translateX(calc(100% + var(--dk-component-sidebar-floating-inset) * 2)); }
.dk-component-sidebar[data-presentation="drawer"][data-variant="floating"][data-open] { transform: none; }
.dk-component-sidebar[data-presentation="drawer"] .dk-component-sidebar__toggle { display: none; }
.dk-component-sidebar__scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--dk-component-sidebar-drawer-z-index) - 1);
  background: var(--dk-component-sidebar-scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dk-component-sidebar-drawer-duration) var(--dk-component-sidebar-easing), visibility 0s linear var(--dk-component-sidebar-drawer-duration);
}
.dk-component-sidebar__scrim[data-open] {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dk-component-sidebar-drawer-duration) var(--dk-component-sidebar-easing), visibility 0s;
}

/* The flyout and the More menu are the kit's own menu surface; this only
   lines up their glyphs with their words. */
.dk-component-sidebar__menu .dk-component-dropdown__item-icon:empty { display: none; }
.dk-component-sidebar__menu .dk-component-sidebar__badge { margin-inline-start: auto; }
.dk-component-sidebar__menu-dot {
  flex: none;
  width: var(--dk-component-sidebar-dot-size);
  height: var(--dk-component-sidebar-dot-size);
  margin-inline-start: auto;
  border-radius: var(--dk-border-radius-round-fixed);
  background: var(--dk-component-sidebar-dot-surface);
}
/* The page you are on, in a flyout or More: the primary words, bold. */
.dk-component-sidebar__menu .dk-component-dropdown__item[aria-current="page"] {
  color: var(--dk-component-sidebar-menu-current-text);
  font-weight: var(--dk-component-sidebar-menu-current-font-weight);
}

/* ═══════════════════════════════════ drift-kit:layer components/top-bar/styles.css ═══════════════════════════════════ */
/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  Top bar                                                                 ║
   ║                                                                          ║
   ║  header.dk-component-top-bar[data-variant][data-sticky][data-width]      ║
   ║    .__inner                                                              ║
   ║      .__menu          a menu button: the links when they do not fit, or ║
   ║                       a drawer Sidebar (data-dk-sidebar-open)            ║
   ║      .__brand                                                            ║
   ║      nav.__nav        a.__link[aria-current="page"] ... (.__indicator)   ║
   ║      .__end           .__help, actions, an account Dropdown              ║
   ║                                                                          ║
   ║  THE RUNTIME WRITES:                                                     ║
   ║    data-scrolled       something is under the bar now                    ║
   ║    data-hidden         hide-on-scroll has it out of the way              ║
   ║    data-nav-collapsed  the links did not fit; the menu button holds them ║
   ║    data-help-compact   the help line is down to its glyph                ║
   ║  Fitting is MEASURED, not set at a breakpoint: five short links fit on a ║
   ║  tablet that three long ones do not, and a width written down here would ║
   ║  be wrong for one of them.                                               ║
   ╚══════════════════════════════════════════════════════════════════════════╝

   Purpose: The page's banner: the brand, an optional row of links, and what
     the page puts at the end, from a help line to the account.

   Anatomy:
     header.dk-component-top-bar[data-variant="glass|transparent|flow"]?[data-sticky]?
       div.__inner
         a.__brand                  (a dk-component-logo)
         nav.__links?
         div.__end                  (help, the account, actions)

   THE FLOW BAR (data-variant="flow", 9 Nov 2026): a flow's own bar, not the
   site's header (paying, confirming on a phone). Three slots:
       div.__start                  (button.dk-component-icon-button[aria-label="Back"])
       div.__title                  (a Heading, centred on the bar; or a Stepper, filling between the ends)
       div.__end                    (button.dk-component-icon-button[aria-label="Close"])
   Each slot keeps its column, so with no back button the title stays in the
   middle. The root is a header: on a page that also has the site's Top bar
   it is a second banner landmark, so a flow bar there can be a div.
   on the page's own surface with the level's hairline under it, the buttons
   14 from the top and the foot and 16 from the sides, at every width; no
   brand, no links, no width cap.
   */
.dk-component-top-bar {
  box-sizing: border-box;
  position: relative;
  z-index: var(--dk-component-top-bar-z-index);
  width: 100%;
  background: var(--dk-component-top-bar-solid-surface);
  border-bottom: var(--dk-component-top-bar-border-width) solid var(--dk-component-top-bar-border);
  color: var(--dk-text-default);
  font-family: var(--dk-component-top-bar-link-font-family);
  transition:
    background-color var(--dk-component-top-bar-duration) var(--dk-component-top-bar-easing),
    border-color var(--dk-component-top-bar-duration) var(--dk-component-top-bar-easing),
    box-shadow var(--dk-component-top-bar-duration) var(--dk-component-top-bar-easing),
    transform var(--dk-component-top-bar-hide-duration) var(--dk-component-top-bar-easing);
}
/* A sticky bar keeps its hairline at rest (14 Oct): it is the line the
   Sidebar's head draws beside it. Scrolling adds the shadow. */
.dk-component-top-bar[data-sticky] {
  position: sticky;
  top: 0;
}
.dk-component-top-bar[data-sticky][data-scrolled] {
  border-bottom-color: var(--dk-component-top-bar-border);
  box-shadow: var(--dk-component-top-bar-shadow);
}
.dk-component-top-bar[data-variant="glass"],
.dk-component-top-bar[data-variant="transparent"][data-scrolled] {
  background: var(--dk-component-top-bar-glass-surface);
  -webkit-backdrop-filter: blur(var(--dk-component-top-bar-blur));
  backdrop-filter: blur(var(--dk-component-top-bar-blur));
}
.dk-component-top-bar[data-variant="transparent"] { background: transparent; border-bottom-color: transparent; }
.dk-component-top-bar[data-variant="transparent"][data-scrolled] { border-bottom-color: var(--dk-component-top-bar-border); }
/* Out of the way while scrolling down; back on any scroll up. */
.dk-component-top-bar[data-hidden] { transform: translateY(-100%); box-shadow: none; }

.dk-component-top-bar__inner {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--dk-component-top-bar-gap);
  width: 100%;
  max-width: var(--dk-component-top-bar-max-width);
  min-height: var(--dk-component-top-bar-height);
  margin: 0 auto;
  padding: 0 var(--dk-component-top-bar-padding-inline);
}
.dk-component-top-bar[data-width="full"] .dk-component-top-bar__inner { max-width: none; }
.dk-component-top-bar[data-phone] .dk-component-top-bar__inner { padding-inline: var(--dk-component-top-bar-phone-padding-inline); }

.dk-component-top-bar__brand {
  flex: none;
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: var(--dk-component-top-bar-brand-width);
  color: inherit;
  text-decoration: none;
  border-radius: var(--dk-component-top-bar-link-radius);
}
.dk-component-top-bar__brand > :is(svg, img, .dk-component-logo) { display: block; height: var(--dk-component-top-bar-brand-height); width: auto; max-width: 100%; }
/* A Logo keeps its artwork's own proportions inside that box (a lockup is far
   wider than tall, 23 high at this width), so it is centred in it rather than
   left at the top, which sat it 4.5px high of the bar's middle. */
.dk-component-top-bar__brand > .dk-component-logo { display: flex; align-items: center; }
.dk-component-top-bar__brand:focus-visible {
  outline: var(--dk-component-top-bar-focus-ring-width) solid var(--dk-component-top-bar-focus-ring);
  outline-offset: var(--dk-component-top-bar-focus-ring-width);
}

/* The menu button is an Icon button in markup; this only says when it shows.
   A links menu shows when the links have folded into it; a drawer button
   shows while its Sidebar is a drawer (the runtime's hidden says so). */
.dk-component-top-bar__menu-wrap { flex: none; display: none; }
.dk-component-top-bar[data-nav-collapsed] .dk-component-top-bar__menu-wrap { display: inline-block; }
.dk-component-top-bar__menu[data-dk-sidebar-open] { flex: none; }
.dk-component-top-bar__menu[data-dk-sidebar-open][hidden] { display: none; }

/* ── Links ─────────────────────────────────────────────────────────────────── */
.dk-component-top-bar__nav {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--dk-primitive-scale-1);
  margin-inline-start: var(--dk-component-top-bar-gap);
}
.dk-component-top-bar__nav[hidden] { display: none; }
/* FOLDED, STILL MEASURED. The links stay laid out (so the runtime can tell
   when they would fit again) but take no room and are out of the tab order
   and the accessibility tree; the menu button carries them. */
.dk-component-top-bar[data-nav-collapsed] .dk-component-top-bar__nav {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  inset-inline-start: 0;
  top: 0;
}
.dk-component-top-bar__link {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--dk-primitive-scale-1-5);
  padding: var(--dk-component-top-bar-link-padding-block) var(--dk-component-top-bar-link-padding-inline);
  border-radius: var(--dk-component-top-bar-link-radius);
  color: var(--dk-component-top-bar-link-text);
  font-size: var(--dk-component-top-bar-link-font-size);
  line-height: var(--dk-component-top-bar-link-line-height);
  font-weight: var(--dk-component-top-bar-link-font-weight);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dk-component-top-bar-duration) var(--dk-component-top-bar-easing), background-color var(--dk-component-top-bar-duration) var(--dk-component-top-bar-easing),
              transform var(--dk-motion-press-duration) var(--dk-motion-press-easing);
}
.dk-component-top-bar__link > svg, .dk-component-top-bar__link > i { width: var(--dk-primitive-scale-4); height: var(--dk-primitive-scale-4); flex: none; }
@media (hover: hover) {
  .dk-component-top-bar__link:hover { color: var(--dk-component-top-bar-link-text-hover); background: var(--dk-component-top-bar-link-surface-hover); }
}
.dk-component-top-bar__link:active { color: var(--dk-component-top-bar-link-text-active); background: var(--dk-component-top-bar-link-surface-active); transform: scale(var(--dk-component-top-bar-link-press-scale)); }
.dk-component-top-bar__link[aria-current="page"] { color: var(--dk-component-top-bar-link-text-current); }
.dk-component-top-bar__link:focus-visible {
  outline: var(--dk-component-top-bar-focus-ring-width) solid var(--dk-component-top-bar-focus-ring);
  outline-offset: calc(var(--dk-component-top-bar-focus-ring-width) * -1);
}
/* Without the runtime the current link draws its own underline; with it, one
   indicator does, and slides. */
.dk-component-top-bar__link[aria-current="page"]::after {
  content: '';
  position: absolute;
  inset-inline: var(--dk-component-top-bar-link-padding-inline);
  bottom: calc((var(--dk-component-top-bar-height) - var(--dk-component-top-bar-link-line-height)) / -2 + var(--dk-component-top-bar-link-padding-block));
  height: var(--dk-component-top-bar-indicator-thickness);
  border-radius: var(--dk-component-top-bar-indicator-thickness);
  background: var(--dk-component-top-bar-indicator);
}
.dk-component-top-bar[data-indicator] .dk-component-top-bar__link[aria-current="page"]::after { content: none; }
.dk-component-top-bar__indicator {
  position: absolute;
  left: 0;
  bottom: calc((var(--dk-component-top-bar-height) - var(--dk-component-top-bar-link-line-height) - var(--dk-component-top-bar-link-padding-block) * 2) / -2);
  height: var(--dk-component-top-bar-indicator-thickness);
  border-radius: var(--dk-component-top-bar-indicator-thickness);
  background: var(--dk-component-top-bar-indicator);
  pointer-events: none;
  opacity: 1;
  transition:
    transform var(--dk-component-top-bar-indicator-duration) var(--dk-component-top-bar-easing),
    width var(--dk-component-top-bar-indicator-duration) var(--dk-component-top-bar-easing),
    opacity var(--dk-component-top-bar-duration) var(--dk-component-top-bar-easing);
}
.dk-component-top-bar__indicator[data-idle] { opacity: 0; }

/* ── The end ───────────────────────────────────────────────────────────────── */
.dk-component-top-bar__end {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--dk-component-top-bar-gap);
  margin-inline-start: auto;
}
.dk-component-top-bar__help {
  display: flex;
  align-items: center;
  gap: var(--dk-component-top-bar-help-gap);
  white-space: nowrap;
}
.dk-component-top-bar__help-icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  color: var(--dk-component-top-bar-help-icon);
  border-radius: var(--dk-border-radius-round-fixed);
}
.dk-component-top-bar__help-icon > :is(svg, i) { width: var(--dk-component-top-bar-help-icon-size); height: var(--dk-component-top-bar-help-icon-size); display: block; }
.dk-component-top-bar__help-text { display: flex; flex-direction: column; align-items: flex-start; }
.dk-component-top-bar__help-title {
  font-size: var(--dk-component-top-bar-help-title-font-size);
  line-height: var(--dk-component-top-bar-help-title-line-height);
  font-weight: var(--dk-component-top-bar-help-title-font-weight);
  letter-spacing: var(--dk-component-top-bar-help-title-letter-spacing);
  text-transform: uppercase;
  color: var(--dk-component-top-bar-help-title-color);
}
.dk-component-top-bar__help-text > :not(.dk-component-top-bar__help-title) {
  font-size: var(--dk-component-top-bar-help-text-font-size);
  line-height: var(--dk-component-top-bar-help-text-line-height);
  color: var(--dk-component-top-bar-help-text-color);
}
.dk-component-top-bar__help a {
  color: var(--dk-component-top-bar-help-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  border-radius: var(--dk-border-radius-50);
  transition: color var(--dk-component-top-bar-duration) var(--dk-component-top-bar-easing);
}
@media (hover: hover) {
  .dk-component-top-bar__help a:hover { color: var(--dk-component-top-bar-help-link-hover); }
}
.dk-component-top-bar__help a:focus-visible,
.dk-component-top-bar__help-icon:focus-visible {
  outline: var(--dk-component-top-bar-focus-ring-width) solid var(--dk-component-top-bar-focus-ring);
  outline-offset: var(--dk-component-top-bar-focus-ring-width);
}
/* COMPACT: the words go and the glyph becomes the link, named by them. */
.dk-component-top-bar[data-help-compact] .dk-component-top-bar__help-text { display: none; }
.dk-component-top-bar[data-help-compact] .dk-component-top-bar__help-icon { cursor: pointer; width: var(--dk-primitive-scale-10); height: var(--dk-primitive-scale-10); }
@media (hover: hover) {
  .dk-component-top-bar[data-help-compact] .dk-component-top-bar__help-icon:hover { background: var(--dk-component-top-bar-link-surface-hover); }
}

/* The account: an Avatar as a Dropdown trigger, ringed on hover and focus. */
.dk-component-top-bar__account {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--dk-primitive-scale-2);
  margin: 0;
  padding: var(--dk-primitive-scale-0-5);
  border: 0;
  border-radius: var(--dk-border-radius-round-fixed);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: box-shadow var(--dk-component-top-bar-duration) var(--dk-component-top-bar-easing);
}
[data-open] > .dk-component-top-bar__account { box-shadow: 0 0 0 var(--dk-border-width-50) var(--dk-component-top-bar-account-ring); }
@media (hover: hover) {
  .dk-component-top-bar__account:hover { box-shadow: 0 0 0 var(--dk-border-width-50) var(--dk-component-top-bar-account-ring); }
}
.dk-component-top-bar__account:focus-visible { outline: var(--dk-component-top-bar-focus-ring-width) solid var(--dk-component-top-bar-focus-ring); outline-offset: var(--dk-component-top-bar-focus-ring-width); }
.dk-component-top-bar__menu-list .dk-component-dropdown__item[aria-current="page"] { font-weight: var(--dk-primitive-font-weight-bold); }

/* ── The flow bar (data-variant="flow"): back, a title or a Stepper centred
   on the bar, close; on the page's surface with the level's hairline under
   it. Three columns, the outer two sharing what the middle leaves, so the
   middle sits in the middle of the bar whatever the two ends hold. ── */
.dk-component-top-bar[data-variant="flow"] {
  background: var(--dk-component-top-bar-flow-surface);
  border-bottom-color: var(--dk-component-top-bar-flow-border);
}
.dk-component-top-bar[data-variant="flow"] .dk-component-top-bar__inner {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
  max-width: none;
  min-height: 0;
  padding: var(--dk-component-top-bar-flow-padding-block) var(--dk-component-top-bar-flow-padding-inline);
}
/* A Stepper in the middle takes the bar's width less an end's room on both
   sides (--dk-component-top-bar-flow-end-size and the gap), so it stays
   centred whether or not there is a back button; an end wider than that
   room still gets its own width. */
.dk-component-top-bar[data-variant="flow"] .dk-component-top-bar__inner:has(> .dk-component-top-bar__title > .dk-component-stepper) {
  grid-template-columns: minmax(max-content, 1fr) minmax(0, calc(100% - 2 * (var(--dk-component-top-bar-flow-end-size) + var(--dk-component-top-bar-gap)))) minmax(max-content, 1fr);
}
.dk-component-top-bar__title > .dk-component-stepper { flex: 1 1 auto; min-width: 0; }
.dk-component-top-bar[data-variant="flow"] .dk-component-top-bar__start { grid-column: 1; }
.dk-component-top-bar[data-variant="flow"] .dk-component-top-bar__title { grid-column: 2; }
.dk-component-top-bar__start {
  display: flex;
  align-items: center;
  gap: var(--dk-component-top-bar-gap);
  justify-self: start;
}
.dk-component-top-bar__title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  text-align: center;
}
.dk-component-top-bar[data-variant="flow"] .dk-component-top-bar__end {
  grid-column: 3;
  justify-self: end;
  margin-inline-start: 0;
}

/* ════════════════════════════════ drift-kit:layer components/action-bar/styles.css ════════════════════════════════ */
/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  Action bar                                                              ║
   ║                                                                          ║
   ║  div.dk-component-action-bar[data-variant][data-sticky][data-align]      ║
   ║    .__progress   optional; role="progressbar", along the top edge        ║
   ║    .__inner                                                              ║
   ║      .__start    Back                                                    ║
   ║      .__summary  .__summary-label + .__summary-value (first, far left)   ║
   ║      .__end      Next                                                    ║
   ║    .__detail     optional; the summary's popup (a button then opens it)  ║
   ║                                                                          ║
   ║  NOT A <nav>. Two buttons that move a form along are controls, and a     ║
   ║  landmark announcing "navigation" around them sends a screen reader     ║
   ║  looking for links that are not there.                                   ║
   ║                                                                          ║
   ║  data-align="end" (the default) is the design's: everything at the end,  ║
   ║  Back beside Next. "split" puts Back at the start.                       ║
   ║                                                                          ║
   ║  THE RUNTIME WRITES data-stuck (the form goes on under it), data-phone   ║
   ║  (the kit's breakpoint) and the progress fill's length.                  ║
   ╚══════════════════════════════════════════════════════════════════════════╝

   Purpose: A flow's controls along the bottom: Back, Next, what the step
     costs and how far along it is.

   Anatomy:
     div.dk-component-action-bar[data-variant="float"]?[data-align="split"]?[data-layout="fill"]?[data-sticky]?
       div.__inner
         div.__start                 (Back: a plain Button)
         button.__summary?           (__summary-label, __summary-value, __summary-chevron; opens __detail)
         div.__end                   (Next: a Button, default + primary)
       div.__detail?
       div.__progress?

   data-layout="fill" (9 Nov 2026): a flow's footer. The page's own surface
   with the level's hairline over it, 14 above the buttons and 16 at the
   sides, no width cap; on a phone the end group (Next) runs the bar's width,
   24 under it. As the App shell's own child (after __main) it spans the
   whole shell, over the Sidebar's foot (app-shell/styles.css); the page
   leaves room for it.
   */
.dk-component-action-bar {
  --_ab-progress: 0;
  box-sizing: border-box;
  position: relative;
  z-index: var(--dk-component-action-bar-z-index);
  width: 100%;
  background: var(--dk-component-action-bar-surface);
  border-top: var(--dk-component-action-bar-border-width) solid var(--dk-component-action-bar-border);
  color: var(--dk-text-default);
  transition: box-shadow var(--dk-component-action-bar-duration) var(--dk-component-action-bar-easing);
}
.dk-component-action-bar[data-sticky] { position: sticky; bottom: 0; }
.dk-component-action-bar[data-sticky][data-stuck] { box-shadow: var(--dk-component-action-bar-stuck-shadow); }
.dk-component-action-bar[data-variant="float"] {
  width: auto;
  margin: var(--dk-component-action-bar-float-inset);
  /* Float is glass: the frosted fill and a blur of the form under it. Not
     the kit's brand strokes (kit/glass.css): on a bar this short they never
     read well (Julio, 12 Oct). Fixed stays the design's solid bar. */
  background: var(--dk-component-action-bar-float-surface);
  -webkit-backdrop-filter: blur(var(--dk-component-action-bar-blur));
  backdrop-filter: blur(var(--dk-component-action-bar-blur));
  border: var(--dk-component-action-bar-border-width) solid var(--dk-component-action-bar-border);
  border-radius: var(--dk-component-action-bar-float-radius);
  box-shadow: var(--dk-component-action-bar-float-shadow);
}
.dk-component-action-bar[data-variant="float"][data-sticky] { bottom: var(--dk-component-action-bar-float-inset); }
.dk-component-action-bar[data-variant="float"][data-sticky][data-stuck] { box-shadow: var(--dk-component-action-bar-float-shadow); }

.dk-component-action-bar__inner {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--dk-component-action-bar-gap);
  width: 100%;
  max-width: var(--dk-component-action-bar-max-width);
  margin: 0 auto;
  padding: var(--dk-component-action-bar-padding-block) var(--dk-component-action-bar-padding-inline);
  padding-bottom: calc(var(--dk-component-action-bar-padding-block) + env(safe-area-inset-bottom, 0px));
}
.dk-component-action-bar[data-variant="float"] .dk-component-action-bar__inner { padding-bottom: var(--dk-component-action-bar-padding-block); }
.dk-component-action-bar__start, .dk-component-action-bar__end {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--dk-component-action-bar-button-gap);
}
.dk-component-action-bar[data-align="split"] .dk-component-action-bar__start { margin-inline-end: auto; }
/* The groups are flex boxes, which would otherwise outrank the UA's [hidden]. */
.dk-component-action-bar :is(.dk-component-action-bar__start, .dk-component-action-bar__end, .dk-component-action-bar__summary)[hidden] { display: none; }
.dk-component-action-bar__summary {
  /* The far left (14 Oct): first in the row, whatever the markup's order. */
  order: -2;
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  text-align: start;
}
/* It pushes the buttons to the end; split keeps Back beside it instead and
   lets Back do the pushing. */
.dk-component-action-bar:not([data-align="split"]) .dk-component-action-bar__summary { margin-inline-end: auto; }

/* ── The summary as a button: it opens its __detail. The words keep their
   place: the room around them is taken back by a negative margin. */
button.dk-component-action-bar__summary {
  position: relative;
  /* The words in one column, the chevron beside them (see below). */
  display: grid;
  grid-template-columns: auto auto;
  column-gap: var(--dk-primitive-scale-2);
  justify-items: start;
  padding: var(--dk-component-action-bar-summary-padding);
  margin-block: calc(var(--dk-component-action-bar-summary-padding) * -1);
  margin-inline-start: calc(var(--dk-component-action-bar-summary-padding) * -1);
  border: 0;
  border-radius: var(--dk-component-action-bar-summary-radius);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background-color var(--dk-component-action-bar-duration) var(--dk-component-action-bar-easing),
              box-shadow var(--dk-component-action-bar-duration) var(--dk-component-action-bar-easing),
              transform var(--dk-motion-press-duration) var(--dk-motion-press-easing);
}
button.dk-component-action-bar__summary[aria-expanded="true"] { background: var(--dk-component-action-bar-summary-surface-hover); }
@media (hover: hover) {
  button.dk-component-action-bar__summary:hover:not(:active) { background: var(--dk-component-action-bar-summary-surface-hover); }
}
button.dk-component-action-bar__summary:active { background: var(--dk-component-action-bar-summary-surface-active); transform: scale(var(--dk-component-action-bar-summary-press-scale)); }
button.dk-component-action-bar__summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--dk-component-action-bar-summary-ring-width) var(--dk-component-action-bar-summary-ring);
}
/* The words in one column, the chevron in its own beside them, centred on
   both lines (Julio, 14 Oct), not on the amount alone. */
button.dk-component-action-bar__summary .dk-component-action-bar__summary-label { grid-column: 1; grid-row: 1; }
button.dk-component-action-bar__summary .dk-component-action-bar__summary-value { grid-column: 1; grid-row: 2; }
button.dk-component-action-bar__summary .dk-component-action-bar__summary-chevron { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.dk-component-action-bar__summary-chevron {
  display: inline-flex;
  color: var(--dk-component-action-bar-chevron-color);
  transition: transform var(--dk-component-action-bar-duration) var(--dk-component-action-bar-easing),
              color var(--dk-component-action-bar-duration) var(--dk-component-action-bar-easing);
}
.dk-component-action-bar__summary-chevron svg { width: var(--dk-component-action-bar-chevron-size); height: var(--dk-component-action-bar-chevron-size); }
[aria-expanded="true"] .dk-component-action-bar__summary-chevron { transform: rotate(180deg); }
button.dk-component-action-bar__summary[aria-expanded="true"] .dk-component-action-bar__summary-chevron { color: var(--dk-component-action-bar-chevron-color-hover); }
@media (hover: hover) {
  button.dk-component-action-bar__summary:hover:not(:active) .dk-component-action-bar__summary-chevron { color: var(--dk-component-action-bar-chevron-color-hover); }
}
button.dk-component-action-bar__summary:active .dk-component-action-bar__summary-chevron { color: var(--dk-component-action-bar-chevron-color-active); }

/* ── The detail: hidden by CSS until the runtime opens it, so a framework can
   render it without the two disagreeing about [hidden]. A card above the bar,
   its left edge on the summary's (--_ab-detail-x, the runtime's). */
.dk-component-action-bar__detail:not([data-open]):not([data-closing]) { display: none; }
.dk-component-action-bar__detail {
  box-sizing: border-box;
  position: absolute;
  bottom: calc(100% + var(--dk-component-action-bar-detail-gap));
  inset-inline-start: var(--_ab-detail-x, var(--dk-component-action-bar-padding-inline));
  width: min(var(--dk-component-action-bar-detail-width), calc(100% - var(--dk-component-action-bar-padding-inline) * 2));
  padding: var(--dk-component-action-bar-detail-padding);
  background: var(--dk-component-action-bar-detail-surface);
  border: var(--dk-component-action-bar-border-width) solid var(--dk-component-action-bar-detail-border);
  border-radius: var(--dk-component-action-bar-detail-radius);
  box-shadow: var(--dk-component-action-bar-detail-shadow);
  color: var(--dk-text-default);
  transform-origin: bottom left;
  opacity: 0;
  transform: translateY(var(--dk-component-action-bar-detail-rise));
  transition: opacity var(--dk-component-action-bar-detail-exit-duration) var(--dk-component-action-bar-detail-exit-easing),
              transform var(--dk-component-action-bar-detail-exit-duration) var(--dk-component-action-bar-detail-exit-easing);
}
.dk-component-action-bar__detail[data-open] {
  opacity: 1;
  transform: none;
  transition: opacity var(--dk-component-action-bar-detail-enter-duration) var(--dk-component-action-bar-detail-enter-easing),
              transform var(--dk-component-action-bar-detail-enter-duration) var(--dk-component-action-bar-detail-enter-easing);
}
@starting-style {
  .dk-component-action-bar__detail[data-open] { opacity: 0; transform: translateY(var(--dk-component-action-bar-detail-rise)); }
}
.dk-component-action-bar__summary-label {
  font-size: var(--dk-component-action-bar-summary-label-font-size);
  line-height: var(--dk-component-action-bar-summary-label-line-height);
  font-weight: var(--dk-component-action-bar-summary-label-font-weight);
  letter-spacing: var(--dk-component-action-bar-summary-label-letter-spacing);
  text-transform: uppercase;
  color: var(--dk-component-action-bar-summary-label-color);
}
.dk-component-action-bar__summary-value {
  font-size: var(--dk-component-action-bar-summary-value-font-size);
  line-height: var(--dk-component-action-bar-summary-value-line-height);
  font-weight: var(--dk-component-action-bar-summary-value-font-weight);
  color: var(--dk-component-action-bar-summary-value-color);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The progress line: the bar's own top edge, filled to where the flow is. */
.dk-component-action-bar__progress {
  position: absolute;
  inset-inline: 0;
  top: calc(var(--dk-component-action-bar-border-width) * -1);
  height: var(--dk-component-action-bar-progress-thickness);
  background: var(--dk-component-action-bar-progress-track);
  border-radius: var(--dk-component-action-bar-progress-thickness);
  overflow: hidden;
  pointer-events: none;
}
.dk-component-action-bar[data-variant="float"] .dk-component-action-bar__progress {
  inset-inline: var(--dk-component-action-bar-float-radius);
}
.dk-component-action-bar__progress::before {
  content: '';
  position: absolute;
  inset: 0;
  /* A primary gradient (14 Oct), the spinner's idea: soft at the start, the
     fill at the head. Sized to the filled part, so the head is always the
     strongest colour, however far along the flow is. */
  background: var(--dk-component-action-bar-progress-gradient) no-repeat;
  background-size: calc(var(--_ab-progress) * 100%) 100%;
  /* Grown by a rounded clip (14 Oct): scaleX() squashed the round end flat. */
  clip-path: inset(0 calc((1 - var(--_ab-progress)) * 100%) 0 0 round var(--dk-component-action-bar-progress-thickness));
  transition: clip-path var(--dk-component-action-bar-progress-duration) var(--dk-component-action-bar-easing),
              background-size var(--dk-component-action-bar-progress-duration) var(--dk-component-action-bar-easing);
}
.dk-component-action-bar__progress:dir(rtl)::before {
  background-image: var(--dk-component-action-bar-progress-gradient-rtl);
  background-position: right;
  clip-path: inset(0 0 0 calc((1 - var(--_ab-progress)) * 100%) round var(--dk-component-action-bar-progress-thickness));
}

/* ── Phone ─────────────────────────────────────────────────────────────────
   One row, as on a desktop (Julio, 14 Oct): the summary at the left, then
   Back as its arrow alone and Next at its own width. Back's word stays for
   a screen reader, hidden the way the kit hides any visually hidden text. */
.dk-component-action-bar[data-phone] .dk-component-action-bar__inner {
  padding-inline: var(--dk-component-action-bar-phone-padding-inline);
}
.dk-component-action-bar[data-phone] .dk-component-action-bar__start .dk-component-button__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* On a phone the detail is the bar's own width, straight above it: big, and
   with no backdrop, so the form stays in view around it. Square at the
   bottom, where it meets the bar. */
.dk-component-action-bar[data-phone] .dk-component-action-bar__detail {
  inset-inline: 0;
  bottom: 100%;
  width: auto;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  border-bottom: 0;
}

/* ── Fill (data-layout="fill"): a flow's footer, on the page's surface,
   edge to edge, and on a phone Next the bar's width. ── */
.dk-component-action-bar[data-layout="fill"] {
  background: var(--dk-component-action-bar-fill-surface);
  border-top-color: var(--dk-component-action-bar-fill-border);
}
.dk-component-action-bar[data-layout="fill"] .dk-component-action-bar__inner {
  max-width: none;
  padding: var(--dk-component-action-bar-fill-padding-block) var(--dk-component-action-bar-fill-padding-inline);
  padding-bottom: calc(var(--dk-component-action-bar-fill-padding-block) + env(safe-area-inset-bottom, 0px));
}
.dk-component-action-bar[data-layout="fill"][data-phone] .dk-component-action-bar__inner {
  padding-inline: var(--dk-component-action-bar-fill-padding-inline);
  padding-bottom: calc(var(--dk-component-action-bar-fill-phone-padding-block-end) + env(safe-area-inset-bottom, 0px));
}
.dk-component-action-bar[data-layout="fill"][data-phone] .dk-component-action-bar__end { flex: 1 1 auto; }
.dk-component-action-bar[data-layout="fill"][data-phone] .dk-component-action-bar__end > * { flex: 1 1 0; }

/* ═════════════════════════════════ drift-kit:layer components/app-shell/styles.css ═════════════════════════════════ */
/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  App shell                                                               ║
   ║                                                                          ║
   ║  div.dk-component-app-shell[data-contained]                              ║
   ║    nav.dk-component-sidebar         optional                             ║
   ║    div.__main                                                            ║
   ║      header.dk-component-top-bar    optional, usually data-sticky        ║
   ║      main.__content                                                      ║
   ║      div.dk-component-action-bar    optional, usually data-sticky        ║
   ║                                                                          ║
   ║  A ROW, NOT A GRID. A grid item that turns fixed (the Sidebar as a       ║
   ║  phone bar or a drawer) leaves its track empty and the page in the       ║
   ║  wrong column; a flex item that leaves the flow simply leaves room.      ║
   ║                                                                          ║
   ║  THE VIEWPORT, OR A BOX. By default the shell is the viewport's height,  ║
   ║  the Sidebar holds still and the page scrolls. data-contained makes it   ║
   ║  its parent's height instead, the main column the scroller and the      ║
   ║  phone bar absolute rather than fixed: an app in a frame, which is what  ║
   ║  the docs previews are.                                                  ║
   ║                                                                          ║
   ║  THE BAR'S HEIGHT IS MEASURED by the Sidebar's runtime and written here  ║
   ║  as --_shell-bar, so the page and a sticky Action bar clear it exactly,  ║
   ║  safe area and floating inset included, without either knowing a number.║
   ╚══════════════════════════════════════════════════════════════════════════╝

   Purpose: The layout that places a Sidebar, a Top bar, the page and an
     Action bar, in the viewport or in a box.

   Anatomy:
     div.dk-component-app-shell[data-contained]?[data-presentation="bar|drawer"]?
       nav.dk-component-sidebar      (its own component)
       div.__main
         header.dk-component-top-bar? (its own component)
         main.__content
         div.dk-component-action-bar? (its own component)
       div.dk-component-action-bar[data-layout="fill"]?  (a flow's footer, the shell's own child: spans the
                                     whole shell over the Sidebar, at the foot of the screen, or of the box
                                     when contained, above a phone bar; the page leaves room for it;
                                     React `footer`)
   */
.dk-component-app-shell {
  --_shell-bar: 0px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: var(--dk-component-app-shell-height);
  background: var(--dk-component-app-shell-surface);
  color: var(--dk-text-default);
}
.dk-component-app-shell > .dk-component-sidebar:not([data-presentation="bar"]):not([data-presentation="drawer"]) {
  position: sticky;
  top: 0;
  height: var(--dk-component-app-shell-height);
}
/* A floating rail keeps the gap it draws around itself while it holds still. */
.dk-component-app-shell > .dk-component-sidebar[data-variant="floating"]:not([data-presentation="bar"]):not([data-presentation="drawer"]) {
  top: var(--dk-component-app-shell-floating-inset);
  height: calc(var(--dk-component-app-shell-height) - var(--dk-component-app-shell-floating-inset) * 2);
}
.dk-component-app-shell__main {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--dk-component-app-shell-height);
  display: flex;
  flex-direction: column;
  padding-bottom: var(--_shell-bar);
}
.dk-component-app-shell__content { flex: 1 0 auto; min-width: 0; }
.dk-component-app-shell .dk-component-action-bar[data-sticky] { bottom: var(--_shell-bar); }
.dk-component-app-shell .dk-component-action-bar[data-variant="float"][data-sticky] { bottom: calc(var(--_shell-bar) + var(--dk-component-app-shell-floating-inset)); }

.dk-component-app-shell[data-contained] {
  --dk-component-app-shell-height: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  align-items: stretch;
  /* A transform makes the shell the containing block of everything fixed
     inside it: the phone bar, a drawer and its scrim stay in the frame. */
  transform: translateZ(0);
}
.dk-component-app-shell[data-contained] > .dk-component-sidebar:not([data-presentation="bar"]):not([data-presentation="drawer"]) { position: relative; top: 0; height: 100%; }
.dk-component-app-shell[data-contained] > .dk-component-sidebar[data-variant="floating"]:not([data-presentation="bar"]):not([data-presentation="drawer"]) { height: calc(100% - var(--dk-component-app-shell-floating-inset) * 2); }
/* CONTAINED, THE MAIN COLUMN IS THE SCROLLER, and its bottom padding (the
   phone bar's clearance) is already outside its sticky area: an Action bar
   that also sat on the clearance would float a whole bar above the bar. */
.dk-component-app-shell[data-contained] .dk-component-action-bar[data-sticky] { bottom: 0; }
/* A fill Action bar that is the shell's own child: the whole shell's width,
   over the Sidebar's foot, at the foot of the screen (of the box, contained). */
.dk-component-app-shell > .dk-component-action-bar[data-layout="fill"] {
  position: fixed;
  inset-inline: 0;
  bottom: var(--_shell-bar);
}
.dk-component-app-shell[data-contained] > .dk-component-action-bar[data-layout="fill"] { position: absolute; }
.dk-component-app-shell[data-contained] .dk-component-action-bar[data-variant="float"][data-sticky] { bottom: var(--dk-component-app-shell-floating-inset); }
.dk-component-app-shell[data-contained] .dk-component-app-shell__main {
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ═══════════════════════════════ drift-kit:layer components/brand-sheet/styles.css ═══════════════════════════════ */
/* ── Brand sheet ────────────────────────────────────────────────────────────
   A dark brand panel and the page's sheet that meets it.

   Purpose: A dark brand panel and the page's sheet that meets it, for a
     sign-in screen (medium) or the top of a home screen (small).

   Anatomy:
     div.dk-component-brand-sheet[data-layout="stacked|split|card|auto"]?[data-size="small|medium"]?[data-page]?
       section.dk-component-brand-sheet__panel[data-theme="dark"]
       section.dk-component-brand-sheet__sheet[data-surface="raised"]
         div.dk-component-brand-sheet__lift?   (first child: rises over the edge)

   The panel is always dark, in either page theme: a step up from a light
   page's own dark (dark level 1), the page's own level on a dark page (dark
   level 0), the nearest theme outside the panel deciding. The build twins
   the level 1 scopes for it (scripts/build.js), so the markup is the same in
   both themes and a theme switched at runtime follows. The sheet is the
   raised level and paints it, so what sits on it ramps with it.

   LAYOUTS. stacked (the default): the panel above, the sheet rising over its
   foot with its top corners rounded, casting up on it. split: the panel
   beside the sheet, running under its rounded leading edge, the sheet
   casting sideways and, in light, fading down. card: the panel a rounded
   panel of its own on the sheet's colour, no edge and no cast. auto: for a
   page that will not switch the attribute itself, stacked below a 64rem
   root, and from it split (medium) or card (small), by a container query on
   the root.

   THE LIFT. An optional first child of the sheet that rises a fixed token
   (--dk-component-brand-sheet-lift) over the sheet's edge into the panel,
   whose foot grows by the same amount so nothing in it is covered. In the
   card layout, from a 47.5rem root, it lies flat under the panel instead.

   IN AN APP SHELL. A sheet that is the page carries data-page, and the
   nearest App shell holding it paints itself to match (rules at the end): the panel's colour where the panel sits, read from
   --dk-component-brand-sheet-panel-surface, which the shell can read too,
   and the sheet's raised colour elsewhere, the phone bar's clearance
   included. Without data-page the shell keeps its own background, so a
   sheet shown inside a page (a docs example, a preview) leaves it alone.
   ── */

/* ── Each layout is a set of private values on the panel and the sheet, so
   auto can set the same ones from inside its container query (a query never
   styles the container itself). Stacked is the default. ── */
.dk-component-brand-sheet > * {
  --_bs-panel-area: 1 / 1 / 2 / 3;
  --_bs-sheet-area: 2 / 1 / 3 / 3;
  --_bs-panel-pad-start: var(--dk-component-brand-sheet-panel-padding-block-start);
  --_bs-panel-pad-inline-start: var(--dk-component-brand-sheet-panel-padding-inline);
  --_bs-panel-pad-inline-end: var(--dk-component-brand-sheet-panel-padding-inline);
  --_bs-panel-foot: var(--dk-component-brand-sheet-panel-padding-block-end);
  --_bs-panel-lift: var(--_bs-lift);
  --_bs-panel-gap: var(--dk-component-brand-sheet-panel-gap);
  --_bs-panel-radius: 0;
  --_bs-panel-overlap: var(--dk-primitive-scale-0);
  --_bs-sheet-pad-start: var(--dk-component-brand-sheet-sheet-padding-block-start);
  --_bs-sheet-pad-inline: var(--dk-component-brand-sheet-sheet-padding-inline);
  --_bs-sheet-pad-end: var(--dk-component-brand-sheet-sheet-padding-block-end);
  --_bs-sheet-gap: var(--dk-component-brand-sheet-sheet-gap);
  --_bs-sheet-rise: var(--dk-component-brand-sheet-rise);
  --_bs-sheet-radius: var(--dk-component-brand-sheet-radius) var(--dk-component-brand-sheet-radius) 0 0;
  --_bs-sheet-fill: var(--dk-surface-current);
  --_bs-up-cast:
    0 calc(-1 * var(--dk-component-brand-sheet-cast-up-offset)) var(--dk-component-brand-sheet-cast-up-blur) 0 var(--dk-component-brand-sheet-cast-far),
    0 calc(-1 * var(--dk-component-brand-sheet-cast-near-offset)) var(--dk-component-brand-sheet-cast-near-blur) 0 var(--dk-component-brand-sheet-cast-near);
  --_bs-cast: var(--_bs-up-cast);
  --_bs-cast-clip: inset(calc(-1 * var(--dk-component-brand-sheet-cast-reach)) 0 0 0);
  --_bs-edge-cast: none;
  --_bs-edge-clip: none;
  --_bs-edge-fill: transparent;
  --_bs-isolation: auto;
  --_bs-lift-pull: calc(-1 * (var(--_bs-sheet-pad-start) + var(--dk-component-brand-sheet-lift)));
  --_bs-lift-inset: var(--dk-primitive-scale-0);
}
/* Small, stacked: only the sheet's edge casts, a strip the corner's height
   (__sheet::before) painted in the sheet's colour over its own shadow, the
   sheet's own fill starting under it. A home screen's sheet is the whole
   page; the whole of it casting reads darker over the band than the edge
   does. The split and card blocks below put the whole-sheet values back. */
.dk-component-brand-sheet[data-size="small"] > * {
  --_bs-sheet-fill: linear-gradient(to bottom, transparent var(--_bs-sheet-rise), var(--dk-surface-current) var(--_bs-sheet-rise));
  --_bs-cast: none;
  --_bs-cast-clip: none;
  --_bs-edge-cast: var(--_bs-up-cast);
  --_bs-edge-clip: inset(calc(-1 * var(--dk-component-brand-sheet-cast-reach)) 0 0 0);
  --_bs-edge-fill: var(--dk-surface-current);
  --_bs-isolation: isolate;
}
.dk-component-brand-sheet[data-layout="split"] > * {
  --_bs-panel-area: 1 / 1 / 3 / 2;
  --_bs-sheet-area: 1 / 2 / 3 / 3;
  --_bs-panel-pad-start: var(--dk-component-brand-sheet-split-padding);
  --_bs-panel-pad-inline-start: var(--dk-component-brand-sheet-split-padding);
  --_bs-panel-pad-inline-end: calc(var(--dk-component-brand-sheet-split-padding) + var(--dk-component-brand-sheet-overlap));
  --_bs-panel-foot: var(--dk-component-brand-sheet-split-padding);
  --_bs-panel-lift: var(--dk-primitive-scale-0);
  --_bs-panel-gap: var(--dk-component-brand-sheet-split-panel-gap);
  --_bs-panel-overlap: calc(-1 * var(--dk-component-brand-sheet-overlap));
  --_bs-sheet-pad-start: var(--dk-component-brand-sheet-split-padding);
  --_bs-sheet-pad-inline: var(--dk-component-brand-sheet-split-padding);
  --_bs-sheet-pad-end: var(--dk-component-brand-sheet-split-padding);
  --_bs-sheet-gap: var(--dk-component-brand-sheet-split-sheet-gap);
  --_bs-sheet-rise: var(--dk-primitive-scale-0);
  --_bs-sheet-radius: var(--dk-component-brand-sheet-radius) 0 0 var(--dk-component-brand-sheet-radius);
  --_bs-sheet-fill: var(--dk-component-brand-sheet-split-fill);
  --_bs-cast:
    calc(-1 * var(--dk-component-brand-sheet-cast-side-offset)) 0 var(--dk-component-brand-sheet-cast-side-blur) 0 var(--dk-component-brand-sheet-cast-side-far),
    calc(-1 * var(--dk-component-brand-sheet-cast-side-near-offset)) 0 var(--dk-component-brand-sheet-cast-side-near-blur) 0 var(--dk-component-brand-sheet-cast-side-near);
  --_bs-cast-clip: none;
  --_bs-edge-cast: none;
  --_bs-edge-clip: none;
  --_bs-edge-fill: transparent;
  --_bs-isolation: auto;
  --_bs-lift-pull: var(--dk-primitive-scale-0);
}
/* The card on a narrow root: the lift still rises into the panel, by its
   token over where the sheet's edge would be. */
.dk-component-brand-sheet[data-layout="card"] > * {
  --_bs-panel-radius: var(--dk-component-brand-sheet-card-radius);
  --_bs-sheet-pad-start: var(--dk-component-brand-sheet-card-gap);
  --_bs-sheet-pad-inline: var(--dk-primitive-scale-0);
  --_bs-sheet-pad-end: var(--dk-primitive-scale-0);
  --_bs-sheet-rise: var(--dk-primitive-scale-0);
  --_bs-sheet-radius: 0;
  --_bs-sheet-fill: var(--dk-surface-current);
  --_bs-cast: none;
  --_bs-cast-clip: none;
  --_bs-edge-cast: none;
  --_bs-edge-clip: none;
  --_bs-edge-fill: transparent;
  --_bs-isolation: auto;
  --_bs-lift-pull: calc(-1 * (var(--_bs-sheet-pad-start) + var(--dk-component-brand-sheet-rise) + var(--dk-component-brand-sheet-lift)));
  --_bs-lift-inset: var(--dk-component-brand-sheet-lift-inset);
}
/* The card from a 47.5rem root: the lift lies flat under the panel, at the
   card's gap, and the panel's foot is its top's. */
@container dk-brand-sheet (min-width: 47.5rem) {
  .dk-component-brand-sheet[data-layout="card"] > * {
    --_bs-panel-foot: var(--dk-component-brand-sheet-panel-padding-block-start);
    --_bs-panel-lift: var(--dk-primitive-scale-0);
    --_bs-lift-pull: var(--dk-primitive-scale-0);
    --_bs-lift-inset: var(--dk-primitive-scale-0);
  }
}
/* auto from a 64rem root: split at medium, the (wide) card at small. */
@container dk-brand-sheet (min-width: 64rem) {
  .dk-component-brand-sheet[data-layout="auto"]:not([data-size="small"]) > * {
    --_bs-panel-area: 1 / 1 / 3 / 2;
    --_bs-sheet-area: 1 / 2 / 3 / 3;
    --_bs-panel-pad-start: var(--dk-component-brand-sheet-split-padding);
    --_bs-panel-pad-inline-start: var(--dk-component-brand-sheet-split-padding);
    --_bs-panel-pad-inline-end: calc(var(--dk-component-brand-sheet-split-padding) + var(--dk-component-brand-sheet-overlap));
    --_bs-panel-foot: var(--dk-component-brand-sheet-split-padding);
    --_bs-panel-lift: var(--dk-primitive-scale-0);
    --_bs-panel-gap: var(--dk-component-brand-sheet-split-panel-gap);
    --_bs-panel-overlap: calc(-1 * var(--dk-component-brand-sheet-overlap));
    --_bs-sheet-pad-start: var(--dk-component-brand-sheet-split-padding);
    --_bs-sheet-pad-inline: var(--dk-component-brand-sheet-split-padding);
    --_bs-sheet-pad-end: var(--dk-component-brand-sheet-split-padding);
    --_bs-sheet-gap: var(--dk-component-brand-sheet-split-sheet-gap);
    --_bs-sheet-rise: var(--dk-primitive-scale-0);
    --_bs-sheet-radius: var(--dk-component-brand-sheet-radius) 0 0 var(--dk-component-brand-sheet-radius);
    --_bs-sheet-fill: var(--dk-component-brand-sheet-split-fill);
    --_bs-cast:
      calc(-1 * var(--dk-component-brand-sheet-cast-side-offset)) 0 var(--dk-component-brand-sheet-cast-side-blur) 0 var(--dk-component-brand-sheet-cast-side-far),
      calc(-1 * var(--dk-component-brand-sheet-cast-side-near-offset)) 0 var(--dk-component-brand-sheet-cast-side-near-blur) 0 var(--dk-component-brand-sheet-cast-side-near);
    --_bs-cast-clip: none;
    --_bs-edge-cast: none;
    --_bs-edge-clip: none;
    --_bs-edge-fill: transparent;
    --_bs-isolation: auto;
    --_bs-lift-pull: var(--dk-primitive-scale-0);
  }
  .dk-component-brand-sheet[data-layout="auto"][data-size="small"] > * {
    --_bs-panel-radius: var(--dk-component-brand-sheet-card-radius);
    --_bs-panel-foot: var(--dk-component-brand-sheet-panel-padding-block-start);
    --_bs-panel-lift: var(--dk-primitive-scale-0);
    --_bs-sheet-pad-start: var(--dk-component-brand-sheet-card-gap);
    --_bs-sheet-pad-inline: var(--dk-primitive-scale-0);
    --_bs-sheet-pad-end: var(--dk-primitive-scale-0);
    --_bs-sheet-rise: var(--dk-primitive-scale-0);
    --_bs-sheet-radius: 0;
    --_bs-sheet-fill: var(--dk-surface-current);
    --_bs-cast: none;
    --_bs-cast-clip: none;
    --_bs-edge-cast: none;
    --_bs-edge-clip: none;
    --_bs-edge-fill: transparent;
    --_bs-isolation: auto;
    --_bs-lift-pull: var(--dk-primitive-scale-0);
    --_bs-lift-inset: var(--dk-primitive-scale-0);
  }
}

/* ── The root: two columns (split uses both), the panel's row then the
   sheet's, which takes any height the page gives the root. It paints the
   raised level, the sheet's colour, which only shows round the card's
   corners. ── */
.dk-component-brand-sheet {
  --_bs-lift: var(--dk-primitive-scale-0);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  background: var(--dk-surface-raised-default);
}
.dk-component-brand-sheet:where(:has(> .dk-component-brand-sheet__sheet > .dk-component-brand-sheet__lift:first-child)) {
  --_bs-lift: var(--dk-component-brand-sheet-lift);
}
/* Only where a query reads the root's width: a container cannot size to
   its content, and it becomes the container for unnamed queries inside it. */
.dk-component-brand-sheet:where([data-layout="auto"], [data-layout="card"]) {
  container: dk-brand-sheet / inline-size;
}

.dk-component-brand-sheet__panel {
  grid-area: var(--_bs-panel-area);
  display: flex;
  flex-direction: column;
  gap: var(--_bs-panel-gap);
  min-width: 0;
  box-sizing: border-box;
  padding: var(--_bs-panel-pad-start) var(--_bs-panel-pad-inline-end) calc(var(--_bs-panel-foot) + var(--_bs-panel-lift)) var(--_bs-panel-pad-inline-start);
  margin-inline-end: var(--_bs-panel-overlap);
  border-radius: var(--_bs-panel-radius);
  background: var(--dk-surface-current);
  color: var(--dk-text-default);
}

/* The sheet casts with its own shadow, under its own fill, so the shadow
   never shows through the anti-aliased rounded corner. Stacked, the clip
   cuts the cast at the sides and the foot (and anything the sheet holds that
   overflows them); split casts sideways, unclipped. The sheet is its own
   stacking context for the small size's edge strip (::before). */
.dk-component-brand-sheet__sheet {
  grid-area: var(--_bs-sheet-area);
  position: relative;
  isolation: var(--_bs-isolation);
  display: flex;
  flex-direction: column;
  gap: var(--_bs-sheet-gap);
  min-width: 0;
  box-sizing: border-box;
  margin-block-start: calc(-1 * var(--_bs-sheet-rise));
  padding: var(--_bs-sheet-pad-start) var(--_bs-sheet-pad-inline) var(--_bs-sheet-pad-end);
  border-radius: var(--_bs-sheet-radius);
  background: var(--_bs-sheet-fill);
  box-shadow: var(--_bs-cast);
  clip-path: var(--_bs-cast-clip);
  color: var(--dk-text-default);
}
.dk-component-brand-sheet__sheet::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--_bs-sheet-rise);
  z-index: -1;
  border-radius: inherit;
  background: var(--_bs-edge-fill);
  box-shadow: var(--_bs-edge-cast);
  clip-path: var(--_bs-edge-clip);
  pointer-events: none;
}
/* The sheet's column (medium), centred: its parts keep a form's width on a
   wide sheet. */
:where(.dk-component-brand-sheet:not([data-size="small"])) > .dk-component-brand-sheet__sheet > :not(.dk-component-brand-sheet__lift) {
  width: 100%;
  max-width: var(--dk-component-brand-sheet-column);
  align-self: center;
}

/* Above the panel, which it overlaps. */
.dk-component-brand-sheet__lift {
  position: relative;
  margin-block-start: var(--_bs-lift-pull);
  margin-inline: var(--_bs-lift-inset);
}

/* ── An App shell whose page is a Brand sheet paints what covers it ────────
   Opt-in: only a sheet marked as the page (data-page) paints its shell, and
   only the nearest shell, so an outer shell (a docs site's, an app showing a
   sheet in a nested preview) keeps its own background. So nothing of the page's own colour shows round the sheet's rounded
   corners or in the phone bar's clearance, which is the shell's own paint
   below its content: the sheet's raised colour throughout, and the panel's
   (--dk-component-brand-sheet-panel-surface, declared on this shell by the
   tokens) where the panel sits. Stacked, under the top --dk-spacing-8,
   behind the panel's corners and no further; split, the left half; card,
   the sheet's colour alone. With no phone bar there is no clearance, so
   nothing below the sheet is painted another colour. auto picks its layout
   by a container query the shell cannot read, so it takes the sheet's
   colour, as the card does, except below the kit's breakpoint (768px, a
   viewport the shell can read), where an auto sheet, small or medium, is
   stacked and the shell paints as it does under one. (From there to the
   width where auto changes layout the sheet is still stacked and the shell
   plain: the shell cannot read the sheet's container.) Here rather than in the App shell's styles: the
   shell reads no other component's tokens, and these are the Brand sheet's.
   One class of weight, (0,1,0): the condition is inside :where(), so only
   .dk-component-app-shell counts, and a look that restyles the shell (its
   fidelity.css, [data-fidelity] .dk-component-app-shell, 0,2,0) still wins,
   as does a page's own class on the shell loaded after the kit. */
.dk-component-app-shell:where(:has(.dk-component-app-shell__content .dk-component-brand-sheet[data-page]):not(:has(.dk-component-app-shell .dk-component-brand-sheet[data-page]))) {
  background: var(--dk-surface-raised-default);
}
.dk-component-app-shell:where(:has(.dk-component-app-shell__content .dk-component-brand-sheet[data-page]:is(:not([data-layout]), [data-layout="stacked"])):not(:has(.dk-component-app-shell .dk-component-brand-sheet[data-page]))) {
  background: linear-gradient(var(--dk-component-brand-sheet-panel-surface) 0 var(--dk-spacing-8), var(--dk-surface-raised-default) var(--dk-spacing-8));
}
.dk-component-app-shell:where(:has(.dk-component-app-shell__content .dk-component-brand-sheet[data-page][data-layout="split"]):not(:has(.dk-component-app-shell .dk-component-brand-sheet[data-page]))) {
  background: linear-gradient(to right, var(--dk-component-brand-sheet-panel-surface) 0 var(--dk-component-brand-sheet-split-panel-share), var(--dk-surface-raised-default) var(--dk-component-brand-sheet-split-panel-share));
}
@media (max-width: 768px) {
  .dk-component-app-shell:where(:has(.dk-component-app-shell__content .dk-component-brand-sheet[data-page][data-layout="auto"]):not(:has(.dk-component-app-shell .dk-component-brand-sheet[data-page]))) {
    background: linear-gradient(var(--dk-component-brand-sheet-panel-surface) 0 var(--dk-spacing-8), var(--dk-surface-raised-default) var(--dk-spacing-8));
  }
}

/* ══════════════════════════════════════ drift-kit:layer components/list/styles.css ══════════════════════════════════════ */
/* ── List ───────────────────────────────────────────────────────────────────
   A list of actions or tasks the customer can open: one divided panel when
   narrow, separate raised cards when there is room, from one markup.

   Purpose: A list of interactive rows (things to do, actions to take): one
     raised panel with a hairline between its rows, or a grid of raised
     cards, or the panel below a 47.5rem list and the cards from it.

   Anatomy:
     div.dk-component-list[data-presentation="divided|cards|auto"]?
       .dk-component-list__item[data-interactive="item"]   (a link, a button, or a div with role="button")
         author content

   DIVIDED (the default). The list is one panel, a raised small Box: the
   current surface, Box raised's edge, corner and shadow. Its rows are flat
   inside it, edge to edge, a straight hairline between them: a row is
   square, and only the first row's top and the last row's bottom follow the
   panel's corner. A row's hover and press fill the interaction foundation's
   item tier in that shape; it never presses (data-interactive-press="none"
   built in), as a row that shrank would pull away from the lines around it.

   CARDS. No panel: the rows become separate cards in a grid of columns no
   narrower than --dk-component-list-card-min-width (a lone card keeps one
   column's width). Each card is the foundation's raised fill, its edge
   ramping with it, the floating shadow, and the control's press.

   AUTO. Divided below a 47.5rem list and cards from it, by a container query
   on the list itself, so it follows the room the list is given, not the
   screen, and no script is needed. The list is an inline-size container: it
   takes the width its parent gives it, never its content's.

   EVERYTHING MOVES ON THE ROW'S TIMING. What a row holds (an icon tile, its
   words) changes with the row's fill on the row's state timing, not on its
   own. Every state rule here is :where(), weight zero.
   ── */

/* ── The list: one grid for every presentation, so auto changes only what
   its rows and its panel read (a container query never styles the container
   itself). A divided row spans every column and pulls up over the gap. ── */
.dk-component-list {
  container: dk-list / inline-size;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--dk-component-list-card-min-width)), 1fr));
  gap: var(--dk-component-list-gap);
  box-sizing: border-box;
  min-width: 0;
  color: var(--dk-text-default);
  font-family: var(--dk-component-list-font-family);
}

/* The divided panel, under the rows. A pseudo-element of the list may read
   the list's own container query, so auto can take it away. */
.dk-component-list:not([data-presentation="cards"])::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  box-sizing: border-box;
  border: var(--dk-component-list-border-width) solid var(--dk-component-list-border-color);
  border-radius: var(--dk-component-list-radius);
  background: var(--dk-surface-current);
  box-shadow: var(--dk-component-list-shadow);
  pointer-events: none;
}

/* ── A row. Its padding, corner and layout outweigh the foundation's tier
   (:where()); what differs by presentation it reads from private values. ── */
.dk-component-list__item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--dk-component-list-item-gap);
  box-sizing: border-box;
  min-width: 0;
  margin: 0 var(--_list-inset);
  grid-column: var(--_list-span);
  padding: var(--dk-component-list-item-padding);
  border-style: solid;
  border-width: var(--_list-edge-width);
  border-radius: var(--dk-component-list-item-radius);
  color: var(--dk-text-default);
  font: inherit;
  text-align: start;
  text-decoration: none;
}
.dk-component-list__item:first-child { margin-block-start: var(--_list-inset); }
.dk-component-list__item:last-child { margin-block-end: var(--_list-inset); }
.dk-component-list__item + .dk-component-list__item {
  margin-block-start: calc(-1 * var(--_list-pull));
  border-block-start-width: var(--_list-divider-width);
}
/* What a row holds changes on the row's timing (the state pattern's enter
   while the row is hovered, its exit after), not on its own. */
.dk-component-list__item * { --dk-motion-state-duration: inherit; }

/* The edge and the shadow at weight zero, so the foundation's focus ring
   (later, also zero) shows over a card's shadow, as on its own raised fill. */
:where(.dk-component-list__item) {
  border-color: var(--_list-edge);
  box-shadow: var(--_list-shadow);
}
:where(.dk-component-list__item[data-pseudo-class="hover"]) {
  border-color: var(--_list-edge-hover);
}
@media (hover: hover) {
  :where(.dk-component-list__item:hover) {
    border-color: var(--_list-edge-hover);
  }
}
:where(.dk-component-list__item:active, .dk-component-list__item[data-pseudo-class="active"]) {
  border-color: var(--_list-edge-active);
}

/* ── Divided: inside the panel's edge, every column, touching ── */
.dk-component-list:not([data-presentation="cards"]) > .dk-component-list__item {
  --_list-inset: var(--dk-component-list-border-width);
  --_list-pull: var(--dk-component-list-gap);
  --_list-span: 1 / -1;
  --_list-edge-width: 0;
  --_list-divider-width: var(--dk-component-list-divider-width);
  --_list-edge: var(--dk-component-list-divider-color);
  --_list-edge-hover: var(--dk-component-list-divider-color);
  --_list-edge-active: var(--dk-component-list-divider-color);
  --_list-shadow: none;
  --_ia-press: 1;
}
/* A divided row's corners: square, so the hairline between two rows runs
   straight to the panel's edge. Only the first row's top and the last row's
   bottom follow the panel's corner, inside its edge (concentric), which is
   where a hover's fill meets it. */
.dk-component-list:not([data-presentation="cards"]) > .dk-component-list__item {
  --_list-inner-radius: max(var(--dk-primitive-scale-0), calc(var(--dk-component-list-radius) - var(--dk-component-list-border-width)));
  border-radius: 0;
}
.dk-component-list:not([data-presentation="cards"]) > .dk-component-list__item:first-child {
  border-start-start-radius: var(--_list-inner-radius);
  border-start-end-radius: var(--_list-inner-radius);
}
.dk-component-list:not([data-presentation="cards"]) > .dk-component-list__item:last-child {
  border-end-start-radius: var(--_list-inner-radius);
  border-end-end-radius: var(--_list-inner-radius);
}

/* ── Cards: apart, each the raised interactive fill ── */
.dk-component-list[data-presentation="cards"] > .dk-component-list__item {
  --_list-inset: var(--dk-primitive-scale-0);
  --_list-pull: var(--dk-primitive-scale-0);
  --_list-span: auto;
  --_list-edge-width: var(--dk-component-list-border-width);
  --_list-divider-width: var(--dk-component-list-border-width);
  --_list-edge: var(--dk-border-raised-default);
  --_list-edge-hover: var(--dk-border-raised-hover);
  --_list-edge-active: var(--dk-border-raised-active);
  --_list-shadow: var(--dk-component-list-card-shadow);
  --_ia-rest: var(--dk-surface-raised-default);
  --_ia-hover: var(--dk-surface-raised-hover);
  --_ia-active: var(--dk-surface-raised-active);
  --_ia-press: var(--dk-component-list-card-press);
}

/* ── Auto: the cards from a 47.5rem list (760px at the default root) ── */
@container dk-list (min-width: 47.5rem) {
  .dk-component-list[data-presentation="auto"]::before { content: none; }
  .dk-component-list[data-presentation="auto"] > .dk-component-list__item {
    --_list-inset: var(--dk-primitive-scale-0);
    --_list-pull: var(--dk-primitive-scale-0);
    --_list-span: auto;
    --_list-edge-width: var(--dk-component-list-border-width);
    --_list-divider-width: var(--dk-component-list-border-width);
    --_list-edge: var(--dk-border-raised-default);
    --_list-edge-hover: var(--dk-border-raised-hover);
    --_list-edge-active: var(--dk-border-raised-active);
    --_list-shadow: var(--dk-component-list-card-shadow);
    --_ia-rest: var(--dk-surface-raised-default);
    --_ia-hover: var(--dk-surface-raised-hover);
    --_ia-active: var(--dk-surface-raised-active);
    --_ia-press: var(--dk-component-list-card-press);
  }
  /* Cards again: each its own corner. */
  .dk-component-list[data-presentation="auto"] > .dk-component-list__item,
  .dk-component-list[data-presentation="auto"] > .dk-component-list__item:first-child,
  .dk-component-list[data-presentation="auto"] > .dk-component-list__item:last-child {
    border-radius: var(--dk-component-list-item-radius);
  }
}

/* ════════════════════════════════ drift-kit:layer components/tile-check/styles.css ════════════════════════════════ */
/* ── Tile check ─────────────────────────────────────────────────────────────
   An icon tile that becomes a checkbox: the tile stands for a row (what it
   is), and when the row can be selected it gives way to the checkbox that
   selects it, in the same place.

   Purpose: The leading mark of a selectable row (a notification, a message, a
     document): its icon tile at rest, its checkbox once the row is being
     picked from, ticked once it is picked.

   Anatomy:
     span.dk-component-tile-check[data-state="idle|picking|checked"][data-reveal="hover"]?
       .dk-component-icon-tile                      (the tile)
       span.dk-component-tile-check__box[aria-hidden="true"]
         label.dk-component-checkbox                (its input has tabindex="-1")

   ONE CELL, TWO PARTS. Both parts sit in the same grid cell, centred, and the
   one not shown is faded to nothing and scaled to the swap scale
   (--dk-motion-swap-scale), so the swap reads as one mark turning into the
   other. They change on the kit's state timing, opacity and transform only.

   STATES. idle: the tile shows. picking: the checkbox shows, empty. checked:
   the checkbox shows, ticked (its input carries checked; the tile check does
   not tick it, it only shows it). data-reveal="hover" shows the checkbox
   under a pointer too: when the nearest [data-interactive] ancestor is
   hovered, where the device can hover, so a row offers its checkbox before it
   is picked.

   THE ROW OWNS THE SELECTION. The checkbox is decoration here: out of the tab
   order, hidden from assistive technology, and it takes no pointer (a click
   lands on the row). The row the tile check sits in carries the selected
   state (aria-selected, aria-pressed or a real checkbox of its own), so a
   screen reader is told once. Every state rule here is :where(), weight zero.
   ── */
.dk-component-tile-check {
  display: inline-grid;
  place-items: center;
  flex: none;
}
.dk-component-tile-check > * {
  grid-area: 1 / 1;
  transition: opacity var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              transform var(--dk-motion-state-duration) var(--dk-motion-state-easing);
}
.dk-component-tile-check__box {
  display: flex;
  pointer-events: none;
}

/* ── What shows. Idle is the tile; the checkbox waits, faded and small. ── */
:where(.dk-component-tile-check) > :where(.dk-component-tile-check__box) {
  opacity: 0;
  transform: scale(var(--dk-component-tile-check-swap-scale));
}
:where(.dk-component-tile-check[data-state="picking"], .dk-component-tile-check[data-state="checked"]) > :where(.dk-component-tile-check__box) {
  opacity: 1;
  transform: none;
}
:where(.dk-component-tile-check[data-state="picking"], .dk-component-tile-check[data-state="checked"]) > :where(:not(.dk-component-tile-check__box)) {
  opacity: 0;
  transform: scale(var(--dk-component-tile-check-swap-scale));
}

/* ── Under a pointer: the row's hover (live where the device hovers, or the
   docs' forced one) shows the checkbox. ── */
@media (hover: hover) {
  :where([data-interactive]:hover) :where(.dk-component-tile-check[data-reveal="hover"]) > :where(.dk-component-tile-check__box) {
    opacity: 1;
    transform: none;
  }
  :where([data-interactive]:hover) :where(.dk-component-tile-check[data-reveal="hover"]) > :where(:not(.dk-component-tile-check__box)) {
    opacity: 0;
    transform: scale(var(--dk-component-tile-check-swap-scale));
  }
}
:where([data-interactive][data-pseudo-class="hover"]) :where(.dk-component-tile-check[data-reveal="hover"]) > :where(.dk-component-tile-check__box) {
  opacity: 1;
  transform: none;
}
:where([data-interactive][data-pseudo-class="hover"]) :where(.dk-component-tile-check[data-reveal="hover"]) > :where(:not(.dk-component-tile-check__box)) {
  opacity: 0;
  transform: scale(var(--dk-component-tile-check-swap-scale));
}

/* ═════════════════════════════════════ drift-kit:layer components/image/styles.css ═════════════════════════════════════ */
/* ── Image ───────────────────────────────────────────────────────────────────
   An image slot. With an <img> inside it frames the picture on the kit's
   corner, cropped to fill. With data-placeholder it is the slot with nothing
   in it yet: a hairline box crossed corner to corner, the way a picture that
   is not there has always been drawn.

   Purpose: An image slot: a picture on the kit's corner, or, with
     data-placeholder, the empty slot drawn as a hairline box crossed corner
     to corner. data-size="16|20|24" is the small square that stands beside a
     title or a row.

   Anatomy:
     div.dk-component-image[data-placeholder]?[data-fill]?[data-size="16|20|24"]?[data-ratio="1/1|4/3|3/2|16/9|21/9"]?
       img                                   (a picture; none on a placeholder)
       ::before                              (the cross, on a placeholder)

   ITS SIZE IS THE LAYOUT'S. It fills the width it is given; its height comes
   from data-ratio, or from whatever sizes it (a grid track, a style, a
   wrapper). data-size makes it a fixed square instead, and wins over both.

   THE CROSS IS A MASK, not markup: two lines from corner to corner whose
   artwork scales with the box while the stroke stays one pixel
   (vector-effect: non-scaling-stroke), so the same rule draws a 16px glyph
   and a full-width banner. It paints the placeholder colour, so it follows
   the level, the tone and the theme with the edge. A placeholder is
   decoration: give it aria-hidden, or role="img" and a label when the slot
   itself means something.

   data-fill paints the slot in the surface it sits on: a placeholder is
   see-through, so in a pile of photos each cross showed through the one in
   front; filled, the one in front covers the ones behind.
   ── */
.dk-component-image {
  --_img-radius: var(--dk-component-image-radius);
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  /* The flex item's own default, written so the glyph sizes' flex: none
     has a counterpart without a size. */
  flex: 0 1 auto;
  border-radius: var(--_img-radius);
}
/* A picture is cropped to the corner. A placeholder is not: its cross runs
   into the corners, under the edge's own curve, as the drawing it matches
   does. */
.dk-component-image:not([data-placeholder]) { overflow: hidden; }
.dk-component-image[hidden] { display: none; }

.dk-component-image > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Ratio ── */
.dk-component-image[data-ratio="1/1"] { aspect-ratio: 1 / 1; }
.dk-component-image[data-ratio="4/3"] { aspect-ratio: 4 / 3; }
.dk-component-image[data-ratio="3/2"] { aspect-ratio: 3 / 2; }
.dk-component-image[data-ratio="16/9"] { aspect-ratio: 16 / 9; }
.dk-component-image[data-ratio="21/9"] { aspect-ratio: 21 / 9; }

/* ── The glyph sizes: a fixed square, Icon's names ── */
.dk-component-image[data-size="16"] { --_img-size: var(--dk-component-image-16-size); }
.dk-component-image[data-size="20"] { --_img-size: var(--dk-component-image-20-size); }
.dk-component-image[data-size="24"] { --_img-size: var(--dk-component-image-24-size); }
.dk-component-image:is([data-size="16"], [data-size="20"], [data-size="24"]) {
  flex: none;
  width: var(--_img-size);
  height: var(--_img-size);
  aspect-ratio: auto;
}

/* ── The placeholder ── */
.dk-component-image[data-placeholder] {
  border: var(--dk-component-image-placeholder-border-width) solid var(--dk-component-image-placeholder-color);
}
.dk-component-image[data-placeholder]::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--dk-component-image-placeholder-color);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none' stroke='black' stroke-width='1'%3E%3Cline x1='0' y1='0' x2='100' y2='100' vector-effect='non-scaling-stroke'/%3E%3Cline x1='100' y1='0' x2='0' y2='100' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none' stroke='black' stroke-width='1'%3E%3Cline x1='0' y1='0' x2='100' y2='100' vector-effect='non-scaling-stroke'/%3E%3Cline x1='100' y1='0' x2='0' y2='100' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
/* Opaque, in the surface it sits on (data-fill). */
.dk-component-image[data-fill] { background: var(--dk-component-image-fill); }
/* A placeholder holds no picture. */
.dk-component-image[data-placeholder] > img { display: none; }

/* ══════════════════════════════════ drift-kit:layer components/timeline/styles.css ══════════════════════════════════ */
/* ── Timeline ───────────────────────────────────────────────────────────────
   Dated moments down a page, a dot beside each and a line from one dot to
   the next.

   Purpose: Dated moments down a page (pick-up, then refresh, then return):
     a dot beside each, a line joining one dot to the next, and what happens
     at each moment beside its dot.

   Anatomy:
     ol.dk-component-timeline[aria-label]?
       li.dk-component-timeline__item     (any content: an eyebrow, a date, cards)
         ::before                         (the dot)
         ::after                          (the line to the next dot; not on the last)

   NOT A STEPPER. A stepper is a process with a current step and a state for
   each; a timeline is what happens when, and has no state. An ordered list,
   because the order is the point.

   THE DOT AND THE LINE ARE PSEUDO ELEMENTS, so an item holds only its own
   content. The line starts a clearance under its dot and stops the same
   clearance above the next item's top, where the next dot begins. An item
   lays its blocks out as a column. ── */
.dk-component-timeline {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dk-component-timeline__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--dk-component-timeline-item-gap);
  min-width: 0;
  margin: 0;
  padding-inline-start: var(--dk-component-timeline-indent);
}
.dk-component-timeline__item:not(:last-child) { padding-block-end: var(--dk-component-timeline-spacing); }
.dk-component-timeline__item::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: var(--dk-component-timeline-dot-offset);
  width: var(--dk-component-timeline-dot-size);
  height: var(--dk-component-timeline-dot-size);
  border-radius: 50%;
  background: var(--dk-component-timeline-color);
}
.dk-component-timeline__item:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-inline-start: calc((var(--dk-component-timeline-dot-size) - var(--dk-component-timeline-line-width)) / 2);
  top: calc(var(--dk-component-timeline-dot-offset) + var(--dk-component-timeline-dot-size) + var(--dk-component-timeline-line-clearance));
  bottom: var(--dk-component-timeline-line-clearance);
  width: var(--dk-component-timeline-line-width);
  background: var(--dk-component-timeline-color);
}

/* ═══════════════════════════════════════════════════ drift-kit:layer kit/reset.css ═══════════════════════════════════════════════════ */
/* ── Reset: the browser's own margins, scoped to this kit ────────────────────
   Every text-bearing component in here zeroes its own margin by hand, and has
   since the first one. <p>, <h1>-<h6> and <hr> all arrive with a UA
   margin-block, and inside a flex or grid container that margin does not
   collapse: it ADDS to the gap. Input shipped without it on 16 Sep and its 6px
   gap rendered 20px under the caption and 34px between caption and error.
   Eleven components remembered; the twelfth author will not, and nothing in the
   build can tell a margin somebody wanted from one the browser supplied.

   SCOPED TO KIT CLASSES ON PURPOSE. drift-kit.css is loaded into applications
   whose markup this kit does not own. A bare `p { margin: 0 }` here would
   restyle every paragraph in drift-app and in every Forge prototype, a breaking
   change well outside the kit's blast radius. This matches only elements
   carrying a dk-component class, so a consumer's own markup is untouched.

   :where() IS LOAD-BEARING, not decoration. It makes the selector's specificity
   ZERO, which buys three things:
     - any component rule that genuinely wants a margin beats it outright.
       Alert's actions row, its icon and its dismiss button all set one, and
       none of them needs a change or an !important to keep it.
     - a consuming application's own rule beats it too.
     - the position of this entry in src/manifest.js is therefore NOT
       load-bearing. That is unusual in this build, where order settles almost
       everything, so it is worth stating plainly rather than leaving the next
       reader to assume a reset must come first.
   No new compatibility surface: :where() shipped before :has(), which this kit
   already uses eleven times.

   WHAT IS STILL OUT, deliberately: a list's padding-inline-start and a
   fieldset's border. Those belong to components nobody has written yet, so a
   rule for them here would be guessing at markup that does not exist.
   check:ua-defaults in Forge is what catches them when it does. */
:where([class*="dk-component-"]) { margin: 0; }

/* Form controls do not inherit the page's font. The UA gives <button>, <input>,
   <select> and <textarea> one of their own, 13.33px Arial here, so a component
   that never names a family renders its text in it. Eight kit controls do name
   one; icon-button, alert's dismiss button and the three visually hidden inputs
   behind checkbox, switch and dropzone do not, and check:ua-defaults found
   every one of them on its first run.

   Nothing is visibly wrong today, which is the point: an icon button holds an
   SVG and the hidden inputs are opacity 0, so the fall-through is latent rather
   than broken, and the first character anyone puts in an icon button renders in
   Arial. A latent trap is what a reset is for.

   `font` rather than `font-family` alone, so a stray 13.33px goes with it.
   Measured before adding it: 692 kit element boxes across the 20 component
   pages, zero changed size, so the shorthand costs no layout. */
:where([class*="dk-component-"]):where(button, input, textarea, select, optgroup) { font: inherit; }

/* ════════════════════════════════════════════════════ drift-kit:layer kit/page.css ════════════════════════════════════════════════════ */
/* ── The page: Drift's text colour, font and surface on the body ────────────
   3 Nov 2026 (Julio). A plain HTML page built in Claude chat rendered its
   title black on the dark page and an Alert in Times. Heading and Body without
   a data-color inherit their colour on purpose, so they sit right inside a
   button or a tinted panel; nothing on that page gave the body one, so they
   inherited the browser's black. Forge, Disko and the site never showed it
   because each sets its own body styles. A fresh page did not know to.

   SCOPED TO A BODY WITH data-brand: a page that has asked for Drift. Zero
   specificity, as reset.css is, so any body rule a project writes (even a bare
   `body { }`) beats it, and an app that styles its own body is unchanged. */
:where(body[data-brand]) {
  color: var(--dk-text-default);
  font-family: var(--dk-font-family-primary);
  background: var(--dk-surface-current);
}

/* ── The kit's text colour on every themed root ─────────────────────────────
   9 Nov 2026. The body rule above reaches only a page that asked for Drift
   with data-brand. A page that set data-theme alone, or a panel re-themed
   inside a page (a dark panel on a light page), still handed its text the
   colour around it, the browser's black at the top, which on a dark root is
   black on near-black. Each [data-theme] now starts its text at the kit's
   default for that theme. At no weight, like the body rule, so a colour any
   component or project writes wins. Modal sets its own (modal/styles.css):
   it is portalled to the body, outside any root a page themed. */
:where([data-theme]) {
  color: var(--dk-text-default);
}

/* ═══════════════════════════════════════════════ drift-kit:layer kit/selection.css ═══════════════════════════════════════════════ */
/* ── Text selection ──────────────────────────────────────────────────────────
   Dragging over text paints the brand primary behind it with white on top, the
   same in both themes. --dk-surface-primary-default is primary-500 in light AND
   dark (only its hover/active steps diverge per theme), so one declaration is
   genuinely theme-correct here rather than a shortcut, and --dk-text-base-white
   is the pairing Button already uses for a label on that same fill.

   SCOPED TO [data-brand], not written bare. Bare ::selection rules are the norm
   on the open web, but this stylesheet is loaded into applications whose markup
   the kit does not own, and selection is document-wide: a bare rule would
   repaint selection across every page that so much as links the file, including
   parts of a host app that have not adopted the kit at all. [data-brand] is the
   attribute a page sets to opt into the kit, so scoping to it means the
   selection colour arrives with everything else and not before. Same reasoning
   as kit/reset.css, one file over.

   Two selectors, because ::selection does not inherit through the cascade the
   way an ordinary property does: browsers look up the tree for a matching rule,
   so the descendant form covers the content and the direct form covers the
   element carrying the attribute itself.

   NOT in :where(). The reset next door is zero-specificity on purpose so any
   component rule outranks it, but this is a deliberate brand colour rather than
   a default being cleared, and a page wanting its own selection colour should
   have to say so rather than win by accident.

   Only the properties ::selection actually honours are set. background-color
   rather than the background shorthand, which several engines ignore here. */
[data-brand] ::selection {
  background-color: var(--dk-surface-primary-default);
  color: var(--dk-text-base-white);
  /* Autofilled and password fields paint their text through -webkit-text-fill-color,
     which outranks `color`, so without this a selection inside one keeps the
     old colour and the white never lands. */
  -webkit-text-fill-color: var(--dk-text-base-white);
}
[data-brand]::selection {
  background-color: var(--dk-surface-primary-default);
  color: var(--dk-text-base-white);
  -webkit-text-fill-color: var(--dk-text-base-white);
}

/* ══════════════════════════════════════════ drift-kit:layer kit/reduced-motion.css ══════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — kit-wide (added 2026-08-18; the kit previously honoured
   prefers-reduced-motion nowhere at all).
   Non-essential motion is switched off: colour/border/shadow morphs snap
   instead of easing, and press feedback stops moving the element (the
   scale-down on every variant, plus accent's translateY lift). Since 18 Sep the
   morphs are handled by the motion tier zeroing its duration tokens, and this
   file carries only what a duration cannot express.
   DELIBERATELY EXEMPT: the loading spinner. It communicates status rather
   than decorating, which WCAG treats as essential motion — freezing it would
   remove information. Modal/toast entrances are shortened, not removed, so
   focus still lands somewhere that visibly appeared.
   `!important` is intentional here: several of the rules being overridden
   carry state-plus-variant selectors at (0,4,0)-(0,5,0), and a reduced-motion
   preference should not lose a specificity race.
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* THE TRANSITION LIST IS GONE. It named eighteen component classes and had to
     be remembered on every new component and every new part, which it was not:
     audited 18 Sep it missed Search bar entirely, both Tabs classes, Tooltip,
     Toast, and at least one part each of Button, Card, Dropzone, Select, Icon
     button and Input, including the field's own action buttons. Every duration
     now resolves through tokens/alias/motion.css, which zeroes them under this
     same query, so a component cannot fall off a list that no longer exists.

     WHAT IS LEFT HERE is what a duration token cannot express. */

  /* Press feedback: a transform, not a duration. Suppressing the movement means
     removing the transform itself. */
  .dk-component-choice-card:has(:is(.dk-component-radio__input, .dk-component-checkbox__input):enabled):active,
  .dk-component-choice-card-action:active:not(:disabled) {
    transform: none !important;
  }
  /* Navigation's rows press the same way: the rail's, and the bar's glyph. */
  .dk-component-sidebar__item:active,
  .dk-component-sidebar__user:active,
  .dk-component-sidebar[data-presentation="bar"] .dk-component-sidebar__item:active .dk-component-sidebar__icon {
    transform: none !important;
  }
  .dk-component-button:active:not(:disabled):not([aria-disabled="true"]),
  .dk-component-button[data-pseudo-class="active"],
  .dk-component-button[data-variant="accent"]:active:not(:disabled):not([aria-disabled="true"]),
  .dk-component-button[data-variant="accent"][data-pseudo-class="active"],
  .dk-component-icon-button:active:not(:disabled):not([aria-disabled="true"]),
  .dk-component-alert__dismiss:active:not(:disabled):not([aria-disabled="true"]),
  /* Added with the motion tier: these press the same way and were never on the
     old list, so they kept moving with the preference set. */
  .dk-component-input__action:active:not(:disabled),
  .dk-component-tab:active:not(:disabled),
  :is(.dk-component-calendar__nav, .dk-component-calendar__title, .dk-component-calendar__day, .dk-component-calendar__cell):active {
    transform: none !important;
  }

  /* Keyframe animations. MODAL IS NO LONGER LISTED: its four animations take
     their duration from the motion patterns, which this preference
     already zeroes, so naming it here would repeat a rule that is now made
     somewhere better. Toast's entrance still writes its own, so it stays.

     DELIBERATELY ABSENT, and this is the part a blanket rule would break: the
     button's loading spinner and the toast's countdown border. Both convey
     information rather than decorate, which WCAG treats as essential motion, so
     both keep real durations and neither resolves through a token this query
     zeroes. Freezing a spinner says "finished" and freezing a countdown removes
     the only indication of how long is left. */
  .dk-component-toast-fixed {
    animation-duration: 0.01ms !important;
  }

  /* THE CODE FIELD'S CARET, and it is stopped rather than shortened. Zeroing
     the duration holds a keyframe animation at its 0% frame, which for a blink
     is whichever of the two states happens to be written first: a caret that is
     permanently invisible is worse than one that never blinks. So the animation
     goes and the caret stays solid, which is exactly what the preference asks
     for and what a duration token cannot express. */
  .dk-component-code-input__cell[data-active]:not([data-filled])::after {
    animation: none !important;
  }

  /* A STANDALONE LINK'S TRAILING ICON nudges on hover. The nudge is the
     motion, so it goes rather than being shortened. */
  .dk-component-link__icon {
    transition: none !important;
    transform: none !important;
  }

  /* THE LOADING SPINNER'S SCALE goes and its spin stays: the spin is the only
     sign work is happening (the exemption the header records for Button's
     spinner). Exit still resolves because the zeroed animation still ends. */
  .dk-component-loading-spinner {
    --dk-component-loading-spinner-enter-duration: 0.01ms;
    --dk-component-loading-spinner-exit-duration: 0.01ms;
    --dk-component-loading-spinner-exit-delay: 0s;
    --dk-component-loading-spinner-fade-delay: 0s;
  }

  /* AN ALERT'S ARRIVAL fades and no longer travels: the offset is a
     distance, which a duration cannot express. */
  .dk-component-alert {
    --dk-component-alert-enter-offset: 0px;
  }

  /* THE SHIELD settles instead of moving: no scale-in, pulse or shake. The
     zeroed durations still run the animations to their end state, so the
     shield shows at full size and the tick replaces the lock. */
  .dk-component-shield {
    --dk-component-shield-enter-duration: 0.01ms;
    --dk-component-shield-enter-delay: 0s;
    --dk-component-shield-success-duration: 0.01ms;
    --dk-component-shield-check-duration: 0.01ms;
    --dk-component-shield-check-delay: 0s;
    --dk-component-shield-error-duration: 0.01ms;
  }
}

/* ══════════════════════════════════════════════════ drift-kit:layer kit/motion.css ══════════════════════════════════════════════════ */
/* ── The state pattern's two speeds (15 Oct 2026) ──────────────────────────
   Every element reads the exit; the element that is itself hovered, focused
   or pressed reads the enter. Set on each element rather than inherited: a
   parent of the pointer is hovered too, and a value it handed down would make
   a control the pointer has just left let go at the hover's speed. A token a
   component declares from --dk-motion-state-duration resolves on that
   component's own element, so its parts follow it. */
:where(*) { --dk-motion-state-duration: var(--dk-motion-state-exit-duration); }
:where(:focus-visible, :active) { --dk-motion-state-duration: var(--dk-motion-state-enter-duration); }
@media (hover: hover) {
  :where(:hover) { --dk-motion-state-duration: var(--dk-motion-state-enter-duration); }
}

/* ── Shared keyframes (13 Oct 2026) ─────────────────────────────────────────
   The plumbing every arrival and departure shares, so a modal, a toast, a
   menu and a cascade all move the same way. Character pieces (Shield's shake,
   the spinner's enter, Toast's countdown, Table's sort turn, the code input's
   caret) keep keyframes of their own. Timing never lives here: the animation
   that uses one of these names reads a pattern for its duration and easing. */
@keyframes dk-motion-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dk-motion-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes dk-motion-rise-in {
  from { opacity: 0; transform: translateY(var(--dk-motion-cascade-rise)); }
  to { opacity: 1; transform: none; }
}
/* The rise's way out: up by the same distance as it fades (a parts leave,
   kit/transition.css). */
@keyframes dk-motion-rise-out {
  to { opacity: 0; transform: translateY(calc(-1 * var(--dk-motion-cascade-rise))); }
}
/* Scale honours the element's transform-origin, which kit/position.js sets to
   the trigger's side, so a menu grows out of what opened it. */
@keyframes dk-motion-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes dk-motion-scale-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: scale(0.96); }
}
@keyframes dk-motion-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes dk-motion-sheet-out { from { transform: none; } to { transform: translateY(100%); } }
/* The pulse: only its peak, on the scale property so it composes with any
   transform the element has. The pulse easing takes it there and home. */
@keyframes dk-motion-pulse { to { scale: var(--dk-motion-pulse-scale); } }

/* ── The cascade ── kit/cascade.js marks the units and their beats. Hidden
   until the root says data-in, so nothing shows half-arrived; the root's own
   children are hidden from the first paint, before the runtime has marked
   them. Fill backwards, never both: an identity transform left behind kills
   backdrop-filter.
   THROUGH-PANELS ARE DRAWN (7 Nov 2026). A panel the walk goes through (a
   brand panel, a sheet) is no unit, and hidden with the root's other
   children it popped in whole as the cascade began, a flash of its colour.
   A [data-dk-cascade-through] at any depth is drawn from the first paint;
   only what it holds, other than another through-panel, waits. The :where()
   keeps both rules at the weight the root's rule always had. */
[data-dk-cascade]:not([data-in]) [data-dk-cascade-unit] { opacity: 0; }
[data-dk-cascade]:not([data-in]) > :not(script):not(style):not(:where([data-dk-cascade-through])) { opacity: 0; }
[data-dk-cascade]:not([data-in]) :where([data-dk-cascade-through]) > :not(script):not(style):not(:where([data-dk-cascade-through])) { opacity: 0; }
[data-dk-cascade][data-in] [data-dk-cascade-unit] {
  animation: dk-motion-rise-in var(--dk-motion-cascade-duration) var(--dk-motion-cascade-easing) backwards;
  animation-delay: calc(var(--dk-cascade-i, 0) * var(--dk-motion-cascade-beat));
}
/* After a parts leave (data-dk-cascade-after="leave", which
   dk.motion.transition.swap writes with { leave: 'parts' }) the arrival
   waits for the old page's parts to rise out: every beat starts the
   exit-large duration later. A unit that is or holds
   [data-dk-transition-stay] (a logo the same on both pages) does not
   arrive: it stood still in the old page's copy over this one. */
[data-dk-cascade]:where([data-dk-cascade-after="leave"])[data-in] [data-dk-cascade-unit] {
  animation-delay: calc(var(--dk-cascade-i, 0) * var(--dk-motion-cascade-beat) + var(--dk-motion-exit-large-duration));
}
[data-dk-cascade]:where([data-dk-cascade-after="leave"])[data-in] [data-dk-cascade-unit]:where([data-dk-transition-stay], :has([data-dk-transition-stay])) {
  animation: none;
}

/* Reduced motion: the same names, no movement, a fade only. */
@media (prefers-reduced-motion: reduce) {
  @keyframes dk-motion-rise-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes dk-motion-rise-out { to { opacity: 0; } }
  @keyframes dk-motion-scale-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes dk-motion-scale-out { from { opacity: 1; } to { opacity: 0; } }
  @keyframes dk-motion-sheet-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes dk-motion-sheet-out { from { opacity: 1; } to { opacity: 0; } }
}

/* ══════════════════════════════════════════════ drift-kit:layer kit/transition.css ══════════════════════════════════════════════ */
/* ── Page transitions (16 Oct 2026) ─────────────────────────────────────────
   kit/transition.js drives these; the timing is the page and curtain
   patterns in tokens/alias/motion.css.

   THE SWAP, Disko's wireframes made the kit's. A region holds one page.
   Before it changes, the runtime lays a still copy of the old page over it
   (the ghost), then marks the new page as it arrives:
     a phone-sized region: the new page pushes in from the side it comes
       from (forward from the end, back from the start) and the ghost pushes
       out the other way;
     wider: the ghost fades out and the new page fades in on a short rise.
   The region clips both, so a header or a tab bar outside it holds still.

   THE PARTS LEAVE, for two pages on the same panels (two sign-in steps on
   one brand panel and sheet): the panels stay put, the old page's parts
   rise out together over them, then the new page's parts cascade in.

   THE CURTAIN, the login flow's hand-over. The page recedes onto a dark
   backdrop (neutral-1000 in light, black in dark), a curtain of the page surface rises over it, holds while
   the next page loads, then fades away to reveal it. */

[data-dk-transition] {
  --_dk-push: 100%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
:where([dir="rtl"]) [data-dk-transition] { --_dk-push: -100%; }

/* The ghost is opaque on the region's own surface, so the page arriving
   under a fade is masked until the ghost has gone. */
[data-dk-transition-ghost] {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  background: var(--dk-surface-current);
}
/* The copy is drawn at its full height and moved up by the old page's
   scroll, so it leaves from where the reader was. */
[data-dk-transition-ghost] > [data-dk-transition-ghost-inner] > * {
  height: auto;
  max-height: none;
  overflow: visible;
}

[data-dk-transition-enter="fade"] {
  animation: dk-motion-page-rise-in var(--dk-motion-page-fade-duration) var(--dk-motion-page-fade-easing) both;
}
[data-dk-transition-ghost="fade"] {
  animation: dk-motion-fade-out var(--dk-motion-page-fade-exit-duration) var(--dk-motion-page-fade-exit-easing) both;
}
[data-dk-transition-enter="slide-forward"] {
  animation: dk-motion-push-in-end var(--dk-motion-page-slide-duration) var(--dk-motion-page-slide-easing) both;
}
[data-dk-transition-enter="slide-back"] {
  animation: dk-motion-push-in-start var(--dk-motion-page-slide-duration) var(--dk-motion-page-slide-easing) both;
}
[data-dk-transition-ghost="slide-forward"] {
  animation: dk-motion-push-out-start var(--dk-motion-page-slide-duration) var(--dk-motion-page-slide-easing) both;
}
[data-dk-transition-ghost="slide-back"] {
  animation: dk-motion-push-out-end var(--dk-motion-page-slide-duration) var(--dk-motion-page-slide-easing) both;
}

/* ── The parts leave (7 Nov 2026) ── [data-dk-transition-leave="parts"] on
   a leaving copy, which swap and go write on their own ghost with
   { leave: 'parts' }. The copy's through-panels paint nothing, so the live
   panels under it show through it; its cascade units rise out together on
   the exit-large pattern; a unit that is or holds [data-dk-transition-stay]
   (a logo the same on both pages) stays still over its twin. The attribute
   positions nothing: a host that lays its own copy over the page keeps its
   own placing. The kit's ghost for it (data-dk-transition-ghost="parts")
   has no fill and no motion of its own. A Shield in the copy stands whole
   rather than playing its enter again.
   The paint goes with !important: a through-panel is any component, at
   whatever weight it paints itself, and in a leaving copy it must not. */
[data-dk-transition-ghost="parts"] { background: transparent; }
/* Its copy is at least the region's height, as a page that fills the
   region is, so parts placed from the foot leave from where they stood. */
[data-dk-transition-ghost="parts"] > [data-dk-transition-ghost-inner] { height: 100%; }
[data-dk-transition-ghost="parts"] > [data-dk-transition-ghost-inner] > * { min-height: 100%; }
[data-dk-transition-leave="parts"] [data-dk-cascade-through],
[data-dk-transition-leave="parts"] [data-dk-cascade-through]::before,
[data-dk-transition-leave="parts"] [data-dk-cascade-through]::after {
  background: none !important;
  box-shadow: none !important;
}
/* Outweighs the arrival's unit rules (kit/motion.css), which the copy of a
   revealed root still matches. */
[data-dk-transition-leave="parts"] [data-dk-cascade][data-in] [data-dk-cascade-unit],
[data-dk-transition-leave="parts"][data-dk-cascade][data-in] [data-dk-cascade-unit] {
  animation: dk-motion-rise-out var(--dk-motion-exit-large-duration) var(--dk-motion-exit-large-easing) both;
}
[data-dk-transition-leave="parts"] [data-dk-cascade][data-in] [data-dk-cascade-unit]:is([data-dk-transition-stay], :has([data-dk-transition-stay])),
[data-dk-transition-leave="parts"][data-dk-cascade][data-in] [data-dk-cascade-unit]:is([data-dk-transition-stay], :has([data-dk-transition-stay])) {
  animation: none;
}
[data-dk-transition-leave="parts"] .dk-component-shield[data-animation="enter"] > svg { transform: none; }
[data-dk-transition-leave="parts"] .dk-component-shield[data-animation="enter"] > svg,
[data-dk-transition-leave="parts"] .dk-component-shield[data-animation="enter"]::before { animation: none; }

@keyframes dk-motion-page-rise-in { from { opacity: 0; transform: translateY(var(--dk-motion-page-rise)); } }
@keyframes dk-motion-push-in-end { from { transform: translateX(var(--_dk-push)); } }
@keyframes dk-motion-push-in-start { from { transform: translateX(calc(-1 * var(--_dk-push))); } }
@keyframes dk-motion-push-out-start { to { transform: translateX(calc(-1 * var(--_dk-push))); } }
@keyframes dk-motion-push-out-end { to { transform: translateX(var(--_dk-push)); } }

/* ── The curtain ── fixed to the viewport, or held inside an element when
   the runtime is given one (a frame, a docs stage). Three layers: the
   backdrop under the receding page, the page, the curtain over both. */
[data-dk-curtain-within] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
[data-dk-curtain-backdrop] {
  position: fixed;
  inset: 0;
  z-index: 2147483645;
  /* Always darker than the page: neutral-1000 in light, black in dark. */
  background: var(--dk-surface-curtain-backdrop);
  pointer-events: none;
}
[data-dk-curtain-recede] {
  position: relative;
  z-index: 2147483646;
  transform-origin: 50% 50%;
  background-color: var(--dk-surface-current);
  pointer-events: none;
  animation: dk-motion-curtain-recede var(--dk-motion-curtain-recede-duration) var(--dk-motion-curtain-recede-easing) both;
}
[data-dk-curtain] {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dk-surface-page-default);
  color: var(--dk-text-default);
  animation: dk-motion-curtain-rise var(--dk-motion-curtain-rise-duration) var(--dk-motion-curtain-rise-easing) var(--dk-motion-curtain-rise-delay) both;
}
[data-dk-curtain-within] > :is([data-dk-curtain], [data-dk-curtain-backdrop]) { position: absolute; }
[data-dk-curtain]:is([data-phase="hold"], [data-phase="reveal"]) { animation: none; }
[data-dk-curtain][data-phase="reveal"] {
  opacity: 0;
  transition: opacity var(--dk-motion-curtain-reveal-duration) var(--dk-motion-curtain-reveal-easing);
}

/* It rises from the foot: a clip, so what it holds (a spinner) stays put. */
@keyframes dk-motion-curtain-rise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes dk-motion-curtain-recede {
  to { transform: scale(var(--dk-motion-curtain-recede-scale)); opacity: var(--dk-motion-curtain-recede-opacity); }
}

/* Reduced motion: the same names, no movement, a fade only. */
@media (prefers-reduced-motion: reduce) {
  @keyframes dk-motion-push-in-end { from { opacity: 0; } }
  @keyframes dk-motion-push-in-start { from { opacity: 0; } }
  @keyframes dk-motion-push-out-start { to { opacity: 0; } }
  @keyframes dk-motion-push-out-end { to { opacity: 0; } }
  @keyframes dk-motion-curtain-rise { from { opacity: 0; } to { opacity: 1; } }
}

/* ══════════════════════════════════════════════ drift-kit:layer kit/breakpoint.css ══════════════════════════════════════════════ */
/* ── THE PHONE BREAKPOINT, declared once ─────────────────────────────────────
   Every desktop-or-phone switch in the kit reads this: the menu's sheet and
   the modal's sheet derive their own switches from it, and dk.sheet reads
   those. A media query cannot take a custom property, so the few stylesheets
   that need the width itself (Code input, Toast) write 768px, and a kit test
   fails on any other width. */
@media (max-width: 768px) {
  :root {
    --dk-breakpoint-phone: 1;
  }
}

/* ═══════════════════════════════════════════════════ drift-kit:layer kit/glass.css ═══════════════════════════════════════════════════ */
/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  .dk-glass-decor: the blurred brand strokes behind a glass surface.      ║
   ║  kit/glass.js lays it; the host decides when it shows. It needs a host   ║
   ║  that is positioned and its own stacking context (isolation: isolate),   ║
   ║  so z-index -1 puts it over the host's fill and under its content.       ║
   ║  Forge's numbers: primary 500, 400 and 300 at 35, 28 and 22 percent,     ║
   ║  blurred 60px. Clipped to the host's corners.                            ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */
.dk-glass-decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.dk-glass-decor > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: blur(var(--dk-primitive-blur-glow));
}
.dk-glass-decor path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.dk-glass-decor [data-wave="1"] { stroke: var(--dk-color-primary-500); opacity: var(--dk-primitive-opacity-glow-1); }
.dk-glass-decor [data-wave="2"] { stroke: var(--dk-color-primary-400); opacity: var(--dk-primitive-opacity-glow-2); }
.dk-glass-decor [data-wave="3"] { stroke: var(--dk-color-primary-300); opacity: var(--dk-primitive-opacity-glow-3); }

/* ════════════════════════════════════════════════ drift-kit:layer kit/gradient.css ════════════════════════════════════════════════ */
/* ── [data-gradient-border]: a gradient edge on any element (14 Oct) ────────
   CSS cannot put a gradient on border-color, so the edge is a gradient
   painted under a transparent border (border-box) with the element's fill
   laid over it inside the padding (padding-box). The corners follow the
   element's own radius; the fill is the surface it sits on unless
   --dk-gradient-border-fill says otherwise; the width is a hairline unless
   --dk-gradient-border-width does. data-gradient-border="success" (and the
   other statuses) picks the colour; on its own it is primary.

   THE ANGLE: light at the top right, 225deg, unless --dk-gradient-border-angle
   on the element says otherwise (90deg runs left to right, 180deg top to
   bottom). The gradient is composed HERE, from the stops, so an angle set on
   the element turns it: a token composed on a scope above could not see it. */
[data-gradient-border] {
  --_gb-fill: var(--dk-gradient-border-fill, var(--dk-surface-current));
  --_gb-angle: var(--dk-gradient-border-angle, var(--dk-border-gradient-angle));
  --_gb-light: var(--dk-border-gradient-primary-light);
  --_gb-deep: var(--dk-border-gradient-primary-deep);
  /* what the moving edges mix: the deep stop, or primary's mid in light mode */
  --_gb-mid: var(--_gb-deep);
  --_gb-edge: linear-gradient(var(--_gb-angle), var(--_gb-light), var(--_gb-deep));
  border: var(--dk-gradient-border-width, var(--dk-border-width-25)) solid transparent;
  background: linear-gradient(var(--_gb-fill), var(--_gb-fill)) padding-box, var(--_gb-edge) border-box;
}
[data-gradient-border="neutral"] { --_gb-light: var(--dk-border-gradient-neutral-light); --_gb-deep: var(--dk-border-gradient-neutral-deep); }
[data-gradient-border="success"] { --_gb-light: var(--dk-border-gradient-success-light); --_gb-deep: var(--dk-border-gradient-success-deep); }
[data-gradient-border="warning"] { --_gb-light: var(--dk-border-gradient-warning-light); --_gb-deep: var(--dk-border-gradient-warning-deep); }
[data-gradient-border="error"] { --_gb-light: var(--dk-border-gradient-error-light); --_gb-deep: var(--dk-border-gradient-error-deep); }
[data-gradient-border="information"] { --_gb-light: var(--dk-border-gradient-information-light); --_gb-deep: var(--dk-border-gradient-information-deep); }
[data-gradient-border="primary"] { --_gb-light: var(--dk-border-gradient-primary-light); --_gb-deep: var(--dk-border-gradient-primary-deep); }
[data-gradient-border="ai"] { --_gb-light: var(--dk-border-gradient-ai-light); --_gb-deep: var(--dk-border-gradient-ai-deep); }
[data-gradient-border=""], [data-gradient-border="primary"], [data-gradient-border="ai"] { --_gb-mid: var(--dk-border-gradient-primary-mid); }

/* ── Moving edges (14 Oct): data-gradient-border-motion ──────────────────────
   "spin": the edge is a conic gradient, a soft track with a comet of the deep
   colour, whose start angle is a registered property the loop turns. A
   loading card, an AI prompt.
   "pulse": a glow of the deep colour breathes out from the edge and back,
   quieter. It is a box-shadow, so it replaces the element's own shadow.
   Both repaint the element every frame (a gradient is not composited), which
   is fine for a few things on screen and not for every row of a list. A
   browser without @property shows the edge still. Reduced motion holds it. */
@property --dk-gradient-border-spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --_gb-pulse { syntax: '<number>'; inherits: false; initial-value: 0; }
[data-gradient-border][data-gradient-border-motion="spin"] {
  --_gb-edge: conic-gradient(from var(--dk-gradient-border-spin), var(--_gb-light), var(--_gb-deep) 25%, var(--_gb-light) 50%, var(--_gb-light));
  animation: dk-gradient-border-spin var(--dk-gradient-border-spin-duration) linear infinite;
}
@keyframes dk-gradient-border-spin { to { --dk-gradient-border-spin: 360deg; } }
/* The ai spin turns it round: a primary track with a gold highlight (Julio,
   14 Oct): primary, then a broad plateau of gold, about two fifths of the
   ring with its fades. */
[data-gradient-border="ai"][data-gradient-border-motion="spin"] {
  --_gb-edge: conic-gradient(from var(--dk-gradient-border-spin), var(--_gb-mid), var(--_gb-mid) 25%, var(--_gb-light) 50%, var(--_gb-light) 70%, var(--_gb-mid) 95%);
}
[data-gradient-border][data-gradient-border-motion="pulse"] {
  --_gb-edge: linear-gradient(var(--_gb-angle), var(--_gb-light), var(--_gb-mid));
  box-shadow: 0 0 calc(var(--_gb-pulse) * var(--dk-gradient-border-glow-size)) calc(var(--_gb-pulse) * var(--dk-gradient-border-glow-spread)) color-mix(in srgb, var(--_gb-mid) calc(var(--_gb-pulse) * 55%), transparent);
  animation: dk-gradient-border-pulse var(--dk-gradient-border-pulse-duration) var(--dk-motion-easing-standard) infinite alternate;
}
@keyframes dk-gradient-border-pulse { from { --_gb-pulse: 0.15; } to { --_gb-pulse: 1; } }
@media (prefers-reduced-motion: reduce) {
  [data-gradient-border][data-gradient-border-motion] { animation: none; }
  [data-gradient-border][data-gradient-border-motion="pulse"] { --_gb-pulse: 0.15; }
}

/* ── [data-gradient-wash] (14 Oct): an angled wash ────────────────────────────
   A small soft tint at the top right, fading into the surface the element is
   on, composed on the element itself, so --dk-gradient-wash-angle, -reach
   and -strength set there change it (the
   --dk-surface-gradient-*-subtle tokens are composed on a scope above and
   cannot see it). Primary on its own, a status by value. */
[data-gradient-wash] {
  --_gw-tint: var(--dk-surface-primary-subtle);
  background: linear-gradient(var(--dk-gradient-wash-angle), color-mix(in srgb, var(--_gw-tint) var(--dk-gradient-wash-strength), var(--dk-surface-current)), var(--dk-surface-current) var(--dk-gradient-wash-reach));
}
[data-gradient-wash="primary"] { --_gw-tint: var(--dk-surface-primary-subtle); }
[data-gradient-wash="neutral"] { --_gw-tint: var(--dk-surface-neutral-subtle); }
[data-gradient-wash="success"] { --_gw-tint: var(--dk-surface-success-subtle); }
[data-gradient-wash="warning"] { --_gw-tint: var(--dk-surface-warning-subtle); }
[data-gradient-wash="error"] { --_gw-tint: var(--dk-surface-error-subtle); }
[data-gradient-wash="information"] { --_gw-tint: var(--dk-surface-information-subtle); }

/* ── [data-gradient-shimmer] (14 Oct): a band of light sweeping an element ───
   Left to right, on a loop, over whatever the element paints: a progress
   line, a loading bar, a skeleton. The band runs from just out of sight to
   just out of sight (with it 55% wide, -122% to 222% of the room), so a loop
   starts again the moment the last one leaves. --dk-gradient-shimmer-duration
   is the cycle. Reduced motion hides it.

   THE BAND IS THE ELEMENT'S OWN COLOUR, LIGHTER, never white (Julio, 14 Oct):
   set --dk-gradient-shimmer-base to what the element is painted with (the
   current surface when unset) and its OKLCH lightness is raised
   --dk-gradient-shimmer-lift, 0.2 (0.08 in dark), hue and chroma kept, so a
   teal stays a teal and a dark grey a grey; never quite white. Composed here,
   on the element, so a base set on it is the one used. */
[data-gradient-shimmer] {
  --_gs-light: oklch(from var(--dk-gradient-shimmer-base, var(--dk-surface-current)) min(calc(l + var(--dk-gradient-shimmer-lift)), 0.99) c h);
  position: relative;
  overflow: hidden;
}
[data-gradient-shimmer]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--_gs-light), transparent) no-repeat;
  background-size: var(--dk-gradient-shimmer-width) 100%;
  animation: dk-gradient-shimmer var(--dk-gradient-shimmer-duration) linear infinite;
}
@keyframes dk-gradient-shimmer { from { background-position: -122% 0; } to { background-position: 222% 0; } }
@media (prefers-reduced-motion: reduce) {
  [data-gradient-shimmer]::after { animation: none; opacity: 0; }
}

/* ══════════════════════════════════════════════════ drift-kit:layer kit/dashed.css ══════════════════════════════════════════════════ */
/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  data-dashed-border: the kit's dashed edge                               ║
   ║                                                                          ║
   ║  For drop areas, empty areas and placeholders. A browser's own dashed    ║
   ║  border cannot set its dash or its gap and draws them differently in     ║
   ║  each engine, so kit/dashed.js draws the edge as an inline SVG sized to  ║
   ║  the element, following its radius, and this paints it. Until the        ║
   ║  runtime runs, or without it, the element has a plain dashed border in   ║
   ║  the same colour and width, so the layout never moves when it draws.     ║
   ║                                                                          ║
   ║  data-dashed-border          neutral: the subtle hairline of its level   ║
   ║                  ="primary"  or a status                                 ║
   ║  data-dashed-border-state="active"   a drag held over it: primary, on    ║
   ║                                      the primary tint                    ║
   ║  --dk-dashed-border-color    a colour of the element's own (Dropzone's)  ║
   ║  --dk-dashed-border-pattern  none for a solid edge                       ║
   ║                                                                          ║
   ║  THE BASE IS AT NO WEIGHT (:where), so a component that draws its own    ║
   ║  border (Dropzone) keeps it as the fallback; once drawn, the border      ║
   ║  goes transparent at full weight and the SVG is the edge.                ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */
[data-dashed-border] {
  --_db-color: var(--dk-dashed-border-color, var(--_db-tone, var(--dk-border-hairline-current)));
}
:where([data-dashed-border]) {
  position: relative;
  border: var(--dk-border-dashed-width) dashed var(--_db-color);
}
[data-dashed-border][data-dashed-drawn] {
  border-color: transparent;
}
[data-dashed-border="primary"] { --_db-tone: var(--dk-border-dashed-primary); }
[data-dashed-border="success"] { --_db-tone: var(--dk-border-success-default); }
[data-dashed-border="warning"] { --_db-tone: var(--dk-border-warning-default); }
[data-dashed-border="error"] { --_db-tone: var(--dk-border-error-default); }
[data-dashed-border="information"] { --_db-tone: var(--dk-border-information-default); }
/* Something to press or drop on says so on hover, in primary. */
@media (hover: hover) {
  :where([data-dashed-border]):is(a[href], button, label, [role="button"]):hover:not(:disabled):not([aria-disabled="true"]) {
    --_db-tone: var(--dk-border-dashed-primary);
  }
}
[data-dashed-border-state="active"] {
  --_db-tone: var(--dk-border-dashed-primary);
  background-color: var(--dk-surface-primary-subtle);
}

.dk-dashed-border__edge {
  position: absolute;
  pointer-events: none;
  overflow: visible;
}
.dk-dashed-border__edge rect {
  fill: none;
  stroke: var(--_db-color);
  stroke-width: var(--dk-border-dashed-width);
  stroke-dasharray: var(--dk-dashed-border-pattern, var(--_db-fit, var(--dk-border-dashed-dash) var(--dk-border-dashed-gap)));
  transition: stroke var(--dk-motion-state-duration) var(--dk-motion-state-easing);
}

/* ══════════════════════════════════════════════════ drift-kit:layer kit/sticky.css ══════════════════════════════════════════════════ */
/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  data-sticky on a Box or a plain section: stays at the top, on its paint ║
   ║                                                                          ║
   ║  Filters under a page title, a vehicle's header over its details: a part ║
   ║  that stays at the top of what scrolls. Content scrolls up BEHIND it, so ║
   ║  it paints in its own paint: --dk-surface-current as the element         ║
   ║  resolves it, the page's surface for a plain section or an untoned Box.  ║
   ║  A toned or levelled Box paints its own fill; to stick one on the page's ║
   ║  surface, put data-sticky on a plain section around it.                  ║
   ║                                                                          ║
   ║  --dk-sticky-cover   how far a cover in the same paint rises above it    ║
   ║                      (::before), so nothing shows in the gap above it    ║
   ║                      once stuck: a header's padding, a scroller's top    ║
   ║                      room. None when unset. Set it (--dk-spacing-16,     ║
   ║                      say) only where nothing sits above the element in   ║
   ║                      its scroller: the cover paints at rest too, and     ║
   ║                      would hide a title just above it.                   ║
   ║  --dk-sticky-bleed   how far the cover reaches past each side: a         ║
   ║                      section inset by the page's gutter sets the gutter, ║
   ║                      so the cover meets the page's edges. None when      ║
   ║                      unset.                                              ║
   ║  --dk-sticky-z-index its layer, 5 when unset: over the content it        ║
   ║                      scrolls past, under every floating layer the kit    ║
   ║                      has (bars at 700 and up, menus, modals).            ║
   ║                                                                          ║
   ║  THE SAME WORD AS TOP BAR AND ACTION BAR, and the same idea: the part    ║
   ║  stays in view as the page scrolls. Where it stays is the part's: a bar  ║
   ║  at its edge (their own rules), anything else at the top (this one).     ║
   ║  The two bars are left out here by name so their rules stay theirs.      ║
   ║                                                                          ║
   ║  At the weight of one class, so it wins over Box's own position and      ║
   ║  stays below any rule a project writes with a class of its own.          ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */
:where([data-sticky]):not(.dk-component-top-bar, .dk-component-action-bar) {
  position: sticky;
  top: 0;
  z-index: var(--dk-sticky-z-index, 5);
  background: var(--dk-surface-current);
}
:where([data-sticky]):not(.dk-component-top-bar, .dk-component-action-bar)::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--dk-sticky-bleed, 0px));
  right: calc(-1 * var(--dk-sticky-bleed, 0px));
  bottom: 100%;
  height: var(--dk-sticky-cover, 0px);
  background: inherit;
  pointer-events: none;
}

/* ═════════════════════════════════════════════ drift-kit:layer kit/interactive.css ═════════════════════════════════════════════ */
/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  data-interactive: anything clickable, the kit's way (15 Oct 2026)       ║
   ║                                                                          ║
   ║  data-interactive="control|item|surface|panel" (empty is control) gives  ║
   ║  an element the tier's padding and radius, the quiet ramp (no fill at    ║
   ║  rest, the nested ramp on hover and press, words a rung per state), the  ║
   ║  state pattern's colour motion, the tier's press shrink and the focus    ║
   ║  ring. data-interactive-fill="raised|nested" starts from a fill.         ║
   ║  data-interactive-press="none|control" picks the press over the tier's.  ║
   ║                                                                          ║
   ║  STATES ARE THE ELEMENT'S OWN, never a class: selected from              ║
   ║  aria-current, aria-pressed or a single-select aria-selected (solid      ║
   ║  primary); highlighted from aria-checked, a multi-select aria-selected   ║
   ║  or data-highlighted (a primary tint); disabled from disabled or         ║
   ║  aria-disabled, last, so it wins. data-pseudo-class forces hover, active ║
   ║  or focus for docs and gates, as the components allow.                   ║
   ║                                                                          ║
   ║  EVERY RULE IS :where(), weight zero, so a component's own rule or an    ║
   ║  app's always wins, and ORDER decides between these: later wins.         ║
   ║  It adds no semantics: the element is still a button or a link.          ║
   ║                                                                          ║
   ║  data-reveal="hover" on an element inside a [data-interactive] row (the  ║
   ║  row's own action): transparent until the row is hovered or holds focus, ║
   ║  where the pointer is fine and hovers and no pointer is coarse; always   ║
   ║  shown on a touch screen. Still in the tab order and the accessibility   ║
   ║  tree: Tab onto it shows it. In nested rows it shows while every row     ║
   ║  around it is hovered. Tile check keeps its own meaning of it.           ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */
:where([data-interactive]) {
  --_ia-rest: var(--dk-interactive-surface);
  --_ia-hover: var(--dk-interactive-surface-hover);
  --_ia-active: var(--dk-interactive-surface-active);
  --_ia-surface: var(--_ia-rest);
  --_ia-text-rest: var(--dk-interactive-text);
  --_ia-text-hover: var(--dk-interactive-text-hover);
  --_ia-text-active: var(--dk-interactive-text-active);
  --_ia-text: var(--_ia-text-rest);
  --_ia-press: var(--dk-interactive-press-control);
  /* Only big targets grow on hover; a row growing would ride its neighbours. */
  --_ia-grow: 1;
  /* A highlighted mark's rung amounts, resolved at the host's level and
     inherited by its contents (a raised host's contents are level 0). */
  --_ia-mark: var(--dk-interactive-mark-step);
  --_ia-mark-hover: var(--dk-interactive-mark-step-hover);
  --_ia-mark-active: var(--dk-interactive-mark-step-active);
  /* inline-flex so a plain link presses and keeps its target: transform and
     min-block-size do nothing on an inline box. Any author display wins. */
  display: inline-flex;
  align-items: center;
  /* A control centres what it holds; rows and cards start (their tiers). */
  justify-content: center;
  box-sizing: border-box;
  min-block-size: var(--dk-interactive-target-min);
  padding: var(--dk-interactive-control-padding-block) var(--dk-interactive-control-padding-inline);
  border-radius: var(--dk-interactive-control-radius);
  background-color: var(--_ia-surface);
  color: var(--_ia-text);
  cursor: pointer;
  outline: none;
  transition: background-color var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              color var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              border-color var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              box-shadow var(--dk-motion-state-duration) var(--dk-motion-state-easing),
              transform var(--dk-motion-press-duration) var(--dk-motion-press-easing);
}

/* Tiers */
/* A small square (an icon button, a page number, a day): a control's box,
   pressed on the compact rung so its edge travels about as far as a wider
   control's does (17 Oct). */
:where([data-interactive="compact"]) {
  --_ia-press: var(--dk-interactive-press-compact);
}
:where([data-interactive="item"]) {
  --_ia-press: var(--dk-interactive-press-item);
  justify-content: flex-start;
  padding: var(--dk-interactive-item-padding-block) var(--dk-interactive-item-padding-inline);
  border-radius: var(--dk-interactive-item-radius);
}
:where([data-interactive="surface"]) {
  --_ia-press: var(--dk-interactive-press-surface);
  --_ia-grow: var(--dk-interactive-grow-surface);
  --_ia-text-rest: var(--dk-interactive-content-text);
  --_ia-text-hover: var(--dk-interactive-content-text);
  --_ia-text-active: var(--dk-interactive-content-text);
  justify-content: flex-start;
  padding: var(--dk-interactive-surface-padding-block) var(--dk-interactive-surface-padding-inline);
  border-radius: var(--dk-interactive-surface-radius);
}
:where([data-interactive="panel"]) {
  --_ia-press: var(--dk-interactive-press-panel);
  --_ia-grow: var(--dk-interactive-grow-panel);
  --_ia-text-rest: var(--dk-interactive-content-text);
  --_ia-text-hover: var(--dk-interactive-content-text);
  --_ia-text-active: var(--dk-interactive-content-text);
  justify-content: flex-start;
  padding: var(--dk-interactive-panel-padding-block) var(--dk-interactive-panel-padding-inline);
  border-radius: var(--dk-interactive-panel-radius);
}

/* The press chosen by the page, whatever the tier (5 Nov):
   data-interactive-press="none" keeps it still (a row in a divided list, which
   would pull away from its neighbours' lines), "control" presses it like a
   button (a card on a raised fill). After the tiers, so it wins. */
:where([data-interactive][data-interactive-press="none"]) { --_ia-press: 1; }
:where([data-interactive][data-interactive-press="control"]) { --_ia-press: var(--dk-interactive-press-control); }

/* A resting fill, stepping the same way from there */
:where([data-interactive-fill="nested"]) {
  --_ia-rest: var(--dk-surface-control-default);
  --_ia-hover: var(--dk-surface-control-hover);
  --_ia-active: var(--dk-surface-control-active);
}
:where([data-interactive-fill="raised"]) {
  --_ia-rest: var(--dk-surface-raised-default);
  --_ia-hover: var(--dk-surface-raised-hover);
  --_ia-active: var(--dk-surface-raised-active);
  /* Raised stands on its edge and lift: without them it is the surface it
     sits on, and reads as no fill. */
  border: var(--dk-border-width-25) solid var(--dk-border-raised-default);
  box-shadow: var(--dk-shadow-floating);
}
:where([data-interactive-fill="raised"][data-pseudo-class="hover"]) {
  border-color: var(--dk-border-raised-hover);
}
@media (hover: hover) {
  :where([data-interactive-fill="raised"]:hover) {
    border-color: var(--dk-border-raised-hover);
  }
}
:where([data-interactive-fill="raised"]:active, [data-interactive-fill="raised"][data-pseudo-class="active"]) {
  border-color: var(--dk-border-raised-active);
}

/* Hover, press, focus. A control inside (a row's menu button) is the target
   while the pointer is on it: the container rests, so the control's own hover
   and press show rather than vanishing into the container's (18 Oct). */
:where([data-interactive][data-pseudo-class="hover"]) {
  --_ia-surface: var(--_ia-hover);
  --_ia-text: var(--_ia-text-hover);
  transform: scale(var(--_ia-grow));
}
@media (hover: hover) {
  :where([data-interactive]:hover:not(:has(:is(.dk-component-button, .dk-component-icon-button, .dk-component-dropdown__trigger, .dk-component-select__trigger, .dk-component-checkbox, .dk-component-radio, .dk-component-switch, .dk-component-input__field, input, select, textarea, [data-interactive]):hover))) {
    --_ia-surface: var(--_ia-hover);
    --_ia-text: var(--_ia-text-hover);
    transform: scale(var(--_ia-grow));
  }
}
:where([data-interactive]:active:not(:has(:is(.dk-component-button, .dk-component-icon-button, .dk-component-dropdown__trigger, .dk-component-select__trigger, .dk-component-checkbox, .dk-component-radio, .dk-component-switch, .dk-component-input__field, input, select, textarea, [data-interactive]):active)), [data-interactive][data-pseudo-class="active"]) {
  --_ia-surface: var(--_ia-active);
  --_ia-text: var(--_ia-text-active);
  transform: scale(var(--_ia-press));
}
:where([data-interactive]:focus-visible, [data-interactive][data-pseudo-class="focus"]) {
  box-shadow: 0 0 0 var(--dk-interactive-ring-width) var(--dk-interactive-ring);
}

/* Highlighted: these are in the set. A primary tint, the words full contrast. */
:where([data-interactive]:is([aria-checked="true"], [aria-multiselectable="true"] [aria-selected="true"], [data-highlighted]:not([data-highlighted="false"]))) {
  --_ia-rest: var(--dk-interactive-highlight-surface);
  --_ia-hover: var(--dk-interactive-highlight-surface-hover);
  --_ia-active: var(--dk-interactive-highlight-surface-active);
  --_ia-surface: var(--_ia-rest);
  --_ia-text: var(--dk-interactive-highlight-text);
}
:where([data-interactive]:is([aria-checked="true"], [aria-multiselectable="true"] [aria-selected="true"], [data-highlighted]:not([data-highlighted="false"])):is([data-pseudo-class="hover"])) {
  --_ia-surface: var(--_ia-hover);
}
@media (hover: hover) {
  :where([data-interactive]:is([aria-checked="true"], [aria-multiselectable="true"] [aria-selected="true"], [data-highlighted]:not([data-highlighted="false"])):is(:hover)) {
    --_ia-surface: var(--_ia-hover);
  }
}
:where([data-interactive]:is([aria-checked="true"], [aria-multiselectable="true"] [aria-selected="true"], [data-highlighted]:not([data-highlighted="false"])):is(:active, [data-pseudo-class="active"])) {
  --_ia-surface: var(--_ia-active);
}

/* Selected: this is the one. Solid primary, on-primary words. */
:where([data-interactive]:is([aria-current]:not([aria-current="false"], [aria-current=""]), [aria-pressed="true"], [aria-selected="true"]:not([aria-multiselectable="true"] *))) {
  --_ia-rest: var(--dk-interactive-selected-surface);
  --_ia-hover: var(--dk-interactive-selected-surface-hover);
  --_ia-active: var(--dk-interactive-selected-surface-active);
  --_ia-surface: var(--_ia-rest);
  --_ia-text: var(--dk-interactive-selected-text);
}
:where([data-interactive]:is([aria-current]:not([aria-current="false"], [aria-current=""]), [aria-pressed="true"], [aria-selected="true"]:not([aria-multiselectable="true"] *)):is([data-pseudo-class="hover"])) {
  --_ia-surface: var(--_ia-hover);
}
@media (hover: hover) {
  :where([data-interactive]:is([aria-current]:not([aria-current="false"], [aria-current=""]), [aria-pressed="true"], [aria-selected="true"]:not([aria-multiselectable="true"] *)):is(:hover)) {
    --_ia-surface: var(--_ia-hover);
  }
}
:where([data-interactive]:is([aria-current]:not([aria-current="false"], [aria-current=""]), [aria-pressed="true"], [aria-selected="true"]:not([aria-multiselectable="true"] *)):is(:active, [data-pseudo-class="active"])) {
  --_ia-surface: var(--_ia-active);
}

/* A raised edge follows the state: highlighted, its tint a shade toward the
   selected primary; selected, the solid itself. Both read the live fill. */
:where([data-interactive-fill="raised"]:is([aria-checked="true"], [aria-multiselectable="true"] [aria-selected="true"], [data-highlighted]:not([data-highlighted="false"]))) {
  border-color: color-mix(in srgb, var(--_ia-surface), var(--dk-interactive-selected-surface) 25%);
}
:where([data-interactive-fill="raised"]:is([aria-current]:not([aria-current="false"], [aria-current=""]), [aria-pressed="true"], [aria-selected="true"]:not([aria-multiselectable="true"] *))) {
  border-color: var(--_ia-surface);
}

/* Disabled, last: no hover, no press, no shrink. It holds the fill it had
   (a resting fill, a highlight), so what it shows does not change; a
   disabled selected item keeps a solid, the disabled one, so a disabled
   control still says what is chosen. */
:where([data-interactive]:is(:disabled, [aria-disabled="true"])) {
  --_ia-hover: var(--_ia-rest);
  --_ia-active: var(--_ia-rest);
  --_ia-surface: var(--_ia-rest);
  --_ia-text: var(--dk-interactive-text-disabled);
  transform: none;
  cursor: default;
}
:where([data-interactive]:is([aria-current]:not([aria-current="false"], [aria-current=""]), [aria-pressed="true"], [aria-selected="true"]:not([aria-multiselectable="true"] *)):is(:disabled, [aria-disabled="true"])) {
  --_ia-rest: var(--dk-interactive-selected-surface-disabled);
  --_ia-hover: var(--_ia-rest);
  --_ia-active: var(--_ia-rest);
  --_ia-surface: var(--_ia-rest);
  --_ia-text: var(--dk-interactive-selected-text-disabled);
}

/* On a phone, the touch target. */
@media (max-width: 768px) {
  :where([data-interactive]) { min-block-size: var(--dk-interactive-target-min-touch); }
}

/* data-reveal="hover": a row's own action, out of sight until the row is
   hovered or holds focus, where the pointer hovers (a desk) and no pointer
   is coarse (a touch laptop shows it). A touch screen has no hover to find
   it with, so there it always shows. Opacity, never visibility: it stays in
   the tab order and the accessibility tree (Tab onto it makes the row
   :focus-within, which shows it), keeps its room, and takes no clicks while
   it cannot be seen. Written as "hidden unless", so it never overrides a
   disabled control's own dimming. */
@media (hover: hover) and (pointer: fine) and (not (any-pointer: coarse)) {
  :where([data-interactive]:not(:hover):not(:focus-within):not([data-pseudo-class="hover"])) :where([data-reveal="hover"]:not(.dk-component-tile-check)) { opacity: 0; pointer-events: none; }
}

/* ═══════════════════════════════ drift-kit:layer components/app-shell/fidelity.css ═══════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   App shell: the wireframe and mid-fi looks (data-fidelity, 23 Oct 2026).
   A wireframe's frame is a row: the rail, then the page, which fills the
   rest and scrolls inside itself. The contained shell draws nothing of its
   own (no surface, the page's ink) and its main column and content are
   plain flex columns that pass the height down, so the page inside sizes
   and scrolls as the wireframe's did. The phone bar floats over the page,
   so nothing is set aside for it (no clearance under the main column).

   The look defines only what Disko draws: a contained shell (data-contained,
   "layout") with a Sidebar and a page. A Top bar or an Action bar in it,
   and the viewport shell, keep the full look's layout.

   Every rule is the Drift selector it overrides, prefixed with the gate,
   so it wins on weight.
   ──────────────────────────────────────────────────────────────────────── */
[data-fidelity] .dk-component-app-shell[data-contained] {
  background: transparent;
  color: inherit;
}
[data-fidelity] .dk-component-app-shell[data-contained] .dk-component-app-shell__main {
  padding-bottom: 0;
  overflow: visible;
}
[data-fidelity] .dk-component-app-shell[data-contained] .dk-component-app-shell__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
}

/* ══════════════════════════════════ drift-kit:layer components/avatar/fidelity.css ══════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   Avatar: the wireframe and mid-fi looks (data-fidelity, 22 Oct 2026).
   A wireframe's person: a 1px circle in the look's line colour on the
   look's tile (nothing in a wireframe, a soft fill in mid-fi), with the
   initials as written in the page's own face at 600, a third of the circle
   (a page may set the size of the words on the avatar itself). No inner ring and no photo veil:
   the circle is the edge. Every rule is the Drift selector it overrides,
   prefixed with the gate, so it wins on weight.
   ──────────────────────────────────────────────────────────────────────── */
[data-fidelity] .dk-component-avatar {
  position: static;
  border: 1px solid var(--dk-fidelity-line);
  background: var(--dk-fidelity-tile);
  color: inherit;
  font-size: calc(var(--_av-size) * .34);
  font-weight: 600;
  vertical-align: baseline;
}
/* The bar's open account menu has no state of its own in the look: its
   avatar keeps the look's tile. */
[data-fidelity] .dk-component-sidebar[data-presentation="bar"] .dk-component-sidebar__account[data-open] .dk-component-avatar { background-color: var(--dk-fidelity-tile); }
[data-fidelity] .dk-component-avatar::after { content: none; }
[data-fidelity] .dk-component-avatar__initials {
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
}

/* ════════════════════════════════════ drift-kit:layer components/body/fidelity.css ════════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   Body: the wireframe and mid-fi looks (data-fidelity, 22 Oct 2026).
   A wireframe's running text: the page's own glyph smoothing, line-height
   normal, the three sizes in fixed px, and its subtle rung as a fade
   (wireframe) or the look's muted ink (mid-fi). Every rule is the Drift
   selector it overrides, prefixed with the gate, so it wins on weight.
   ──────────────────────────────────────────────────────────────────────── */
[data-fidelity] .dk-component-body {
  -webkit-font-smoothing: auto;
  transition: none;
}

/* ── Size: xsmall 12, small 14, medium 16 ───────────────────────────────── */
[data-fidelity] .dk-component-body:not([data-size]),
[data-fidelity] .dk-component-body[data-size="medium"] { font-size: 16px; line-height: normal; }
[data-fidelity] .dk-component-body[data-size="small"] { font-size: 14px; line-height: normal; }
[data-fidelity] .dk-component-body[data-size="xsmall"] { font-size: 12px; line-height: normal; }

/* ── Subtle: a fade in a wireframe, the muted ink in mid-fi ─────────────── */
[data-fidelity="wireframe"] .dk-component-body[data-color="neutral"][data-emphasis="subtle"] { color: inherit; opacity: .7; }
[data-fidelity="midfi"] .dk-component-body[data-color="neutral"][data-emphasis="subtle"] { color: var(--dk-fidelity-muted); opacity: 1; }

/* ═════════════════════════════════════ drift-kit:layer components/box/fidelity.css ═════════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   Box: the wireframe and mid-fi looks (data-fidelity, 22 Oct 2026).
   A wireframe's panel: a 1px line in the look's line colour, a 10px corner,
   nothing behind it in a wireframe and the look's surface in mid-fi, the
   page's own text. Its sizes are fixed: xsmall is a card (12px of air, 8px
   between its parts), small a section (30px by 14px, 16px between). The
   others are not drawn by a wireframe yet and keep the full look's steps,
   in px. Raised lifts it with the look's shadow and, in mid-fi, rounds it to
   12px. Every rule is the Drift selector it overrides, prefixed with the
   gate, so it wins on weight; a page's own layout around it outweighs it.
   ──────────────────────────────────────────────────────────────────────── */
[data-fidelity] .dk-component-box {
  position: static;
  min-width: auto;
  border-width: 1px;
  border-style: solid;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font-family: inherit;
}
[data-fidelity="midfi"] .dk-component-box { background: var(--dk-fidelity-surface); }
/* The edge is the look's line; flat keeps the full look's transparent
   edge (its fill alone). Inset has no well: the look draws no inner
   shadow, and a static box would place it against some other ancestor. */
[data-fidelity] .dk-component-box:not([data-variant="flat"]) { border-color: var(--dk-fidelity-line); }
[data-fidelity] .dk-component-box[data-variant="inset"]::after { content: none; }

/* ── Size: the padding and the gap between the parts ────────────────────── */
[data-fidelity] .dk-component-box[data-size="xsmall"] { padding: 12px; gap: 8px; }
[data-fidelity] .dk-component-box[data-size="small"] { padding: 30px 14px; gap: 16px; }
[data-fidelity] .dk-component-box:not([data-size]),
[data-fidelity] .dk-component-box[data-size="medium"] { padding: 24px; gap: 24px; }
[data-fidelity] .dk-component-box[data-size="large"] { padding: 32px; gap: 32px; }
[data-fidelity] .dk-component-box[data-size="xlarge"] { padding: 40px; gap: 40px; }

/* ── Raised: the look's shadow, and a rounder corner in mid-fi ──────────── */
[data-fidelity] .dk-component-box[data-variant="raised"] { box-shadow: var(--dk-fidelity-shadow); }
[data-fidelity="midfi"] .dk-component-box[data-variant="raised"] { border-radius: 12px; }

/* ══════════════════════════════════ drift-kit:layer components/button/fidelity.css ══════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   Button: the wireframe and mid-fi looks (data-fidelity, 22 Oct 2026).
   A wireframe's button is its words in the page's own face, 600 weight,
   14px with 14px by 16px of air (small: 13px, 9px by 14px, 112px wide at
   least), in a 1px line with an 8px corner, on one or more lines as the
   width allows. A wireframe draws it transparent in the look's line, mid-fi
   on the surface in the strong line; the primary (default, status primary)
   is filled with the ink, its words in the inverse ink. It keeps that paint
   in every state: the pointer fades it (60% in a wireframe, 75% in mid-fi),
   a press shrinks it to 97% (with motion reduced it does not shrink: it
   dips to 80%, or keeps a hovering pointer's fade), both easing over
   120ms as the wireframe's do, focus is
   the browser's own ring in a wireframe and the strong line 2px out in
   mid-fi. Busy is the label beside a 14px spinner (the button's own
   iconLeft slot), not the full look's loading state.

   The look defines only what Disko draws: outline and default + primary,
   medium and small. Not designed yet: large and extra-large (drawn as
   medium), disabled (the rest look at 40%), the other statuses (drawn as
   the plain look), accent (left to the full look: its gradient lifecycle
   is its own, and Karmo's main action is default + primary), and a Button
   with no variant (Drift leaves it unpainted, and so does the look).

   Static, not relative: a positioned root rasterises its edges and glyphs
   differently from the wireframe's plain box. Every rule is the Drift
   selector it overrides, prefixed with the gate, so it wins on weight.
   ──────────────────────────────────────────────────────────────────────── */
[data-fidelity] .dk-component-button {
  position: static;
  -webkit-font-smoothing: auto;
  font-family: inherit;
  font-weight: 600;
}
/* The wireframe's own motion (decision 7): the fade and the press ease over
   120ms; with motion reduced only the fade does, and a press snaps. */
[data-fidelity] .dk-component-button:not([data-variant="accent"]) { transition: opacity .12s ease, transform .12s ease; }
@media (prefers-reduced-motion: reduce) {
  [data-fidelity] .dk-component-button:not([data-variant="accent"]) { transition: opacity .12s ease; }
}

/* ── The box: medium (and none, large, extra-large), then small ────────── */
[data-fidelity] .dk-component-button:not([data-size]),
[data-fidelity] .dk-component-button[data-size="medium"],
[data-fidelity] .dk-component-button[data-size="large"],
[data-fidelity] .dk-component-button[data-size="extra-large"] {
  display: inline-block;
  width: auto;
  height: auto;
  min-width: auto;
  white-space: normal;
  padding: 14px 16px;
  gap: 8px;
  border-radius: 8px;
  font-size: 14px;
  line-height: normal;
}
[data-fidelity] .dk-component-button[data-size="small"] {
  display: inline-block;
  width: auto;
  height: auto;
  min-width: 112px;
  white-space: normal;
  padding: 9px 14px;
  gap: 8px;
  border-radius: 8px;
  font-size: 13px;
  line-height: normal;
}
[data-fidelity] .dk-component-button[data-full-width="true"] { width: 100%; }
/* With an icon (the busy spinner) the parts sit side by side, centred. */
[data-fidelity] .dk-component-button:has(> .dk-component-button__icon) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
[data-fidelity] .dk-component-button[hidden] { display: none; }

/* ── The paint, through the component's own slots: a 1px edge, the rest
   paint in every state (the state slots cleared, so each state falls back
   to it), no lift and no ring ─────────────────────────────────────────── */
[data-fidelity] .dk-component-button[data-variant]:not([data-variant="accent"]) {
  --_btn-border-width: 1px;
  --_btn-text: currentColor;
  --_btn-icon: currentColor;
  --_btn-bg-hover: initial;
  --_btn-bg-focus: initial;
  --_btn-bg-active: initial;
  --_btn-bg-disabled: initial;
  --_btn-border-hover: initial;
  --_btn-border-focus: initial;
  --_btn-border-active: initial;
  --_btn-border-disabled: initial;
  --_btn-text-hover: initial;
  --_btn-text-focus: initial;
  --_btn-text-active: initial;
  --_btn-text-disabled: initial;
  --_btn-icon-hover: initial;
  --_btn-icon-focus: initial;
  --_btn-icon-active: initial;
  --_btn-icon-disabled: initial;
  --_btn-lift: none;
  --_btn-lift-hover: initial;
  --_btn-lift-active: initial;
  --_btn-ring: transparent;
}
[data-fidelity="wireframe"] .dk-component-button[data-variant]:not([data-variant="accent"]) {
  --_btn-bg: transparent;
  --_btn-border: var(--dk-fidelity-line);
}
[data-fidelity="midfi"] .dk-component-button[data-variant]:not([data-variant="accent"]) {
  --_btn-bg: var(--dk-fidelity-surface);
  --_btn-border: var(--dk-fidelity-line-strong);
}
[data-fidelity] .dk-component-button[data-variant="default"][data-status="primary"] {
  --_btn-bg: var(--dk-fidelity-ink);
  --_btn-border: var(--dk-fidelity-ink);
  --_btn-text: var(--dk-fidelity-ink-inverse);
}
[data-fidelity] .dk-component-button:disabled,
[data-fidelity] .dk-component-button[aria-disabled="true"] {
  opacity: .4;
  cursor: default;
}

/* ── Busy: a 14px ring in the words' colour, a quarter of it solid ─────── */
[data-fidelity] .dk-component-button__spinner {
  flex: none;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 28%, transparent);
  border-top-color: currentColor;
  animation-duration: .7s;
  animation-timing-function: linear;
  vertical-align: baseline;
}

/* ── Pointer, press and focus ───────────────────────────────────────────── */
@media (hover: hover) {
  [data-fidelity="wireframe"] .dk-component-button:hover:not(:disabled):not([aria-disabled="true"]) { opacity: .6; }
  [data-fidelity="midfi"] .dk-component-button:hover:not(:disabled):not([aria-disabled="true"]) { opacity: .75; }
}
[data-fidelity="wireframe"] .dk-component-button[data-pseudo-class="hover"] { opacity: .6; }
[data-fidelity="midfi"] .dk-component-button[data-pseudo-class="hover"] { opacity: .75; }
[data-fidelity] .dk-component-button:not([data-variant="accent"]):active:not(:disabled):not([aria-disabled="true"]):not([data-pseudo-class]),
[data-fidelity] .dk-component-button[data-pseudo-class="active"]:not([data-variant="accent"]):not(:disabled) { transform: scale(.97); }
/* Motion reduced, a press does not shrink (kit/reduced-motion.css takes
   the scale away): it dips to 80%, on a touch screen too, which reports
   :hover during the tap but has no fade. A pointer that hovers keeps its
   own fade as the press. */
@media (prefers-reduced-motion: reduce) {
  [data-fidelity] .dk-component-button:not([data-variant="accent"]):active:not(:disabled):not([aria-disabled="true"]):not([data-pseudo-class]),
  [data-fidelity] .dk-component-button[data-pseudo-class="active"]:not([data-variant="accent"]):not(:disabled) { opacity: .8; }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
  [data-fidelity="wireframe"] .dk-component-button:not([data-variant="accent"]):active:hover:not(:disabled):not([aria-disabled="true"]):not([data-pseudo-class]) { opacity: .6; }
  [data-fidelity="midfi"] .dk-component-button:not([data-variant="accent"]):active:hover:not(:disabled):not([aria-disabled="true"]):not([data-pseudo-class]) { opacity: .75; }
}
[data-fidelity="wireframe"] .dk-component-button:focus-visible {
  outline: revert;
  outline-offset: revert;
}
[data-fidelity="midfi"] .dk-component-button:focus-visible {
  outline: 2px solid var(--dk-fidelity-line-strong);
  outline-offset: 2px;
}

/* ════════════════════════════════ drift-kit:layer components/checkbox/fidelity.css ════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   Checkbox: the wireframe and mid-fi looks (data-fidelity, 23 Oct 2026).
   A wireframe's checkbox is an 18px box drawn by a 1px line with a 4px
   corner, 1px down from the top of its words and 10px before them; checked,
   a tick drawn as the wireframe draws it, a 5px by 9px corner of 2px line
   turned 45 degrees (the line in a wireframe, the ink in mid-fi), never
   Drift's drawn path. The label is 14px at 600 in the page's own face and
   colour, the description 13px under it, 2px apart: at 60% in a wireframe,
   the muted colour in mid-fi. The box sits in the row's full width.

   States are the wireframe's: the pointer fades the box to 60%, at once;
   keyboard focus is the browser's own ring around the whole control, as on
   the element the wireframe focused. Drift's hover and press fills, its
   ring and halo, the tick's draw and every transition are held at rest.

   The look defines only what Disko draws: medium, unchecked and checked,
   with or without words. Not designed yet: indeterminate (no mark), the
   other sizes (drawn as medium), invalid and disabled (the box at rest).

   Every rule is the Drift selector it overrides, prefixed with the gate,
   so it wins on weight.
   ──────────────────────────────────────────────────────────────────────── */
[data-fidelity] .dk-component-checkbox:not([hidden]) {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: auto;
}
[data-fidelity] .dk-component-checkbox:not(:has(.dk-component-checkbox__text)),
[data-fidelity] .dk-component-checkbox:has(.dk-component-checkbox__text:empty) { column-gap: 10px; }

/* ── The box ─────────────────────────────────────────────────────────────── */
[data-fidelity] .dk-component-checkbox__box {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin-top: 1px;
}
[data-fidelity] .dk-component-checkbox__indicator {
  display: block;
  position: relative;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: var(--dk-fidelity-line);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  box-shadow: none;
  transition: none;
}
[data-fidelity] .dk-component-checkbox__indicator svg { display: none; }
[data-fidelity] .dk-component-checkbox__indicator::after { content: none; }
[data-fidelity] .dk-component-checkbox__input:checked:not(:indeterminate) ~ .dk-component-checkbox__indicator::after {
  content: '';
  display: block;
  position: absolute;
  left: 5.5px;
  top: 2px;
  width: 5px;
  height: 9px;
  box-sizing: border-box;
  border: solid var(--dk-fidelity-line);
  border-width: 0 2px 2px 0;
  border-radius: 0;
  background: none;
  opacity: 1;
  transform: rotate(45deg);
  transition: none;
}
[data-fidelity="midfi"] .dk-component-checkbox__input:checked:not(:indeterminate) ~ .dk-component-checkbox__indicator::after {
  border-color: var(--dk-fidelity-ink);
}
/* Drift's press scales its mark; the tick keeps its turn. */
[data-fidelity] .dk-component-checkbox:active:not(:has(.dk-component-checkbox__input:disabled)):not([data-pseudo-class]) .dk-component-checkbox__indicator::after,
[data-fidelity] label:active .dk-component-checkbox:not(label):not(:has(.dk-component-checkbox__input:disabled)):not([data-pseudo-class]) .dk-component-checkbox__indicator::after,
[data-fidelity] .dk-component-checkbox[data-pseudo-class="active"] .dk-component-checkbox__indicator::after { transform: rotate(45deg); }

/* Drift's hover, press and focus paint, held at rest. */
[data-fidelity] .dk-component-checkbox:active:not(:has(.dk-component-checkbox__input:disabled)):not([data-pseudo-class]) .dk-component-checkbox__indicator,
[data-fidelity] label:active .dk-component-checkbox:not(label):not(:has(.dk-component-checkbox__input:disabled)):not([data-pseudo-class]) .dk-component-checkbox__indicator,
[data-fidelity] .dk-component-checkbox:has(.dk-component-checkbox__input:focus-visible):not([data-pseudo-class]) .dk-component-checkbox__indicator,
[data-fidelity] .dk-component-checkbox[data-pseudo-class="hover"] .dk-component-checkbox__indicator,
[data-fidelity] .dk-component-checkbox[data-pseudo-class="active"] .dk-component-checkbox__indicator,
[data-fidelity] .dk-component-checkbox[data-pseudo-class="focus"] .dk-component-checkbox__indicator {
  border-color: var(--dk-fidelity-line);
  background: transparent;
  box-shadow: none;
}
@media (hover: hover) {
  [data-fidelity] .dk-component-checkbox:hover:not(:has(.dk-component-checkbox__input:disabled)):not(:active):not(:has(.dk-component-checkbox__input:focus-visible)):not([data-pseudo-class]) .dk-component-checkbox__indicator,
  [data-fidelity] label:hover:not(:active) .dk-component-checkbox:not(label):not(:has(.dk-component-checkbox__input:disabled)):not(:has(.dk-component-checkbox__input:focus-visible)):not([data-pseudo-class]) .dk-component-checkbox__indicator {
    border-color: var(--dk-fidelity-line);
    background: transparent;
    box-shadow: none;
  }
}

/* ── The words ───────────────────────────────────────────────────────────── */
[data-fidelity] .dk-component-checkbox__text:not(:empty) {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
[data-fidelity] .dk-component-checkbox__label {
  font-family: inherit;
  font-size: 14px;
  line-height: inherit;
  font-weight: 600;
  color: inherit;
}
[data-fidelity] .dk-component-checkbox__desc {
  font-family: inherit;
  font-size: 13px;
  line-height: inherit;
  font-weight: inherit;
}
[data-fidelity="wireframe"] .dk-component-checkbox__desc {
  color: inherit;
  opacity: .6;
}
[data-fidelity="midfi"] .dk-component-checkbox__desc {
  color: var(--dk-fidelity-muted);
  opacity: 1;
}
[data-fidelity] .dk-component-checkbox:has(.dk-component-checkbox__input:disabled) .dk-component-checkbox__label,
[data-fidelity="wireframe"] .dk-component-checkbox:has(.dk-component-checkbox__input:disabled) .dk-component-checkbox__desc { color: inherit; }
[data-fidelity="midfi"] .dk-component-checkbox:has(.dk-component-checkbox__input:disabled) .dk-component-checkbox__desc { color: var(--dk-fidelity-muted); }

/* ── Pointer and focus ───────────────────────────────────────────────────── */
@media (hover: hover) {
  [data-fidelity] .dk-component-checkbox:hover .dk-component-checkbox__indicator { opacity: .6; }
}
[data-fidelity] .dk-component-checkbox[data-pseudo-class="hover"] .dk-component-checkbox__indicator { opacity: .6; }
[data-fidelity] .dk-component-checkbox:has(.dk-component-checkbox__input:focus-visible) {
  /* The browser's own ring: the plain line for a browser that has no
     -webkit-focus-ring-color, which drops the second. */
  outline: auto 1px;
  outline: auto 1px -webkit-focus-ring-color;
}

/* ══════════════════════════════ drift-kit:layer components/code-input/fidelity.css ══════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   Code input: the wireframe and mid-fi looks (data-fidelity, 23 Oct 2026).
   A wireframe's code is a row of boxes sharing the width equally, 8px
   apart, each 52px tall, drawn by a 1px line with an 8px corner;
   transparent in a wireframe, the surface in mid-fi. A character sits in
   the middle of its box, 20px at 600, in the page's own face and colour,
   tabular so the row does not jitter as the code lands.

   No live cell and no caret: the wireframe's code is entered for the
   participant, never typed, so it has no focus look; Drift's ring, caret,
   hover and transitions are held at rest.

   The look defines only what Disko draws: medium, unmasked, filled and
   empty. Not designed yet: the label, caption and error (the full look's),
   the other sizes (drawn as medium), groups (Drift's wider seam), the mask
   dot and the placeholder character (the full look's), and the field
   before the behaviour has drawn its cells (the full look's plain field).

   Static, not relative: a positioned box rasterises its edges and glyphs
   differently from the wireframe's plain box. Every rule is the Drift
   selector it overrides, prefixed with the gate, so it wins on weight.
   ──────────────────────────────────────────────────────────────────────── */
[data-fidelity] .dk-component-code-input:not([hidden]) { display: block; }

[data-fidelity] .dk-component-code-input[data-ready] .dk-component-code-input__cells { gap: 8px; }
[data-fidelity] .dk-component-code-input__cell {
  position: static;
  flex: 1 1 0%;
  max-width: none;
  min-width: auto;
  height: 52px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--dk-fidelity-line);
  border-radius: 8px;
  background: var(--_fci-surface);
  box-shadow: none;
  font-family: inherit;
  font-size: 20px;
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: inherit;
  transition: none;
  --_fci-surface: transparent;
}
[data-fidelity="midfi"] .dk-component-code-input__cell { --_fci-surface: var(--dk-fidelity-surface); }
[data-fidelity] .dk-component-code-input__cell[data-group-end] { margin-inline-end: 0; }

/* Drift's hover, live cell, invalid and disabled paint and the caret,
   held at rest. */
[data-fidelity] .dk-component-code-input__cell[data-active],
[data-fidelity] .dk-component-code-input__field:has(.dk-component-code-input__control[aria-invalid="true"]) .dk-component-code-input__cell,
[data-fidelity] .dk-component-code-input__field:has(.dk-component-code-input__control[aria-invalid="true"]) .dk-component-code-input__cell[data-active],
[data-fidelity] .dk-component-code-input__field:has(.dk-component-code-input__control:disabled) .dk-component-code-input__cell {
  border-color: var(--dk-fidelity-line);
  background: var(--_fci-surface);
  box-shadow: none;
  color: inherit;
}
@media (hover: hover) {
  [data-fidelity] .dk-component-code-input__field:has(.dk-component-code-input__control:hover:not(:disabled):not(:focus-visible)) .dk-component-code-input__cell {
    border-color: var(--dk-fidelity-line);
    background: var(--_fci-surface);
    box-shadow: none;
    color: inherit;
  }
}
[data-fidelity] .dk-component-code-input__cell[data-active]:not([data-filled])::after { content: none; }

/* ═════════════════════════════════ drift-kit:layer components/divider/fidelity.css ═════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   Divider: the wireframe and mid-fi looks (data-fidelity, 22 Oct 2026).
   A 1px fill in the look's line colour with 8px above and below. A fill,
   not a border: like the wireframe's own rule, it gives way (shrinks to
   nothing) in a flex column that overflows, where a border would hold its
   1px and push everything below it down. A wireframe's line is the text
   colour, so the rule takes its colour from its parent, not the user
   agent's grey for an hr. The margin is the light rule here, so a page's
   own context (a rule flush in a card) outweighs it.
   ──────────────────────────────────────────────────────────────────────── */
[data-fidelity] .dk-component-divider {
  margin: 8px 0;
  color: inherit;
  background: var(--dk-fidelity-line);
}
[data-fidelity] .dk-component-divider:not([data-orientation]),
[data-fidelity] .dk-component-divider[data-orientation="horizontal"] { border-block-start: 0; height: 1px; }
[data-fidelity] .dk-component-divider[data-orientation="vertical"] { border-inline-start: 0; width: 1px; margin: 0 8px; }

/* ════════════════════════════════ drift-kit:layer components/dropdown/fidelity.css ════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   Dropdown: the wireframe and mid-fi looks (data-fidelity, 23 Oct 2026).
   A wireframe's overflow menu is a column of commands at least 180px wide,
   6px in, a 1px edge in the look's line colour, 10px round, on the look's
   surface (mid-fi shadows it). An item is its words at 14px, 9px 10px,
   6px round, never wrapped; the pointer or the keyboard draws a 1px line
   round it, never a fill. A destructive item is drawn like the rest. While
   the menu is open a ghost icon-button trigger shows its line.

   The root is inline-flex: an inline-block root sits its 36px trigger on
   the text's baseline.

   The look defines only what Disko draws: commands, no icons, no ticks, no
   headings or separators (those keep the full look's paint on the look's
   box), one size. Where the menu hangs is align, exact and container.

   Every rule is the Drift selector it overrides, prefixed with the gate,
   so it wins on weight; sizes are fixed px.
   ──────────────────────────────────────────────────────────────────────── */
[data-fidelity] .dk-component-dropdown:not([hidden]) { display: inline-flex; }

/* ── The menu: a dropdown, never a phone's sheet (the full look's) ────── */
[data-fidelity] .dk-component-dropdown__menu:not([data-sheet-open]) {
  --dk-component-menu-enter-duration: 0ms;
  --dk-component-menu-exit-duration: 0ms;
  -webkit-font-smoothing: auto;
  min-width: 180px;
  max-width: none;
  max-height: none;
  padding: 6px;
  border: 1px solid var(--dk-fidelity-line);
  border-radius: 10px;
  background: var(--dk-fidelity-surface);
  box-shadow: var(--dk-fidelity-shadow);
  color: var(--dk-fidelity-text);
  font-family: inherit;
  font-size: 16px;
  line-height: normal;
  overflow: visible;
}
[data-fidelity] .dk-component-dropdown__menu:not([data-sheet-open]):not([hidden]) { display: flex; flex-direction: column; gap: 0; }

/* ── An item: its words, a line round it under the pointer or the keys ── */
[data-fidelity] .dk-component-dropdown__menu:not([data-sheet-open]) .dk-component-dropdown__item {
  display: block;
  width: auto;
  min-height: 0;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  color: inherit;
  text-align: left;
  white-space: nowrap;
  transition: none;
}
[data-fidelity] .dk-component-dropdown__item-label { overflow: visible; }
/* Drift's fills and colours, held at rest: hovered, focused, pressed,
   destructive, disabled (not designed yet: drawn like the rest). */
[data-fidelity] .dk-component-dropdown__item:focus-visible,
[data-fidelity] .dk-component-dropdown__item[data-destructive]:focus-visible,
[data-fidelity] .dk-component-dropdown__item:active:not(:disabled):not([aria-disabled="true"]),
[data-fidelity] .dk-component-dropdown__item[data-destructive]:active:not(:disabled):not([aria-disabled="true"]) { background: transparent; }
@media (hover: hover) {
  [data-fidelity] .dk-component-dropdown__item:hover:not(:disabled):not([aria-disabled="true"]),
  [data-fidelity] .dk-component-dropdown__item[data-destructive]:hover:not(:disabled):not([aria-disabled="true"]) { background: transparent; }
}
[data-fidelity] .dk-component-dropdown__item:is(:focus-visible):not(:disabled):not([aria-disabled="true"]):not([data-destructive]),
[data-fidelity] .dk-component-dropdown__item:active:not(:disabled):not([aria-disabled="true"]):not([data-destructive]),
[data-fidelity] .dk-component-dropdown__item:disabled,
[data-fidelity] .dk-component-dropdown__item[aria-disabled="true"],
[data-fidelity] .dk-component-dropdown__item[data-destructive],
[data-fidelity] .dk-component-sidebar__menu .dk-component-dropdown__item[aria-current="page"] { color: inherit; }
@media (hover: hover) {
  [data-fidelity] .dk-component-dropdown__item:is(:hover):not(:disabled):not([aria-disabled="true"]):not([data-destructive]) { color: inherit; }
}
[data-fidelity] .dk-component-dropdown__item:active:not(:disabled):not([aria-disabled="true"]) { transform: none; }
[data-fidelity] .dk-component-dropdown__menu:not([data-sheet-open]) .dk-component-dropdown__item:is(:focus-visible):not(:disabled):not([aria-disabled="true"]) {
  border-color: var(--dk-fidelity-line);
  outline: none;
}
@media (hover: hover) {
  [data-fidelity] .dk-component-dropdown__menu:not([data-sheet-open]) .dk-component-dropdown__item:is(:hover):not(:disabled):not([aria-disabled="true"]) {
    border-color: var(--dk-fidelity-line);
    outline: none;
  }
}

/* An open menu's ghost icon-button trigger shows its line. */
[data-fidelity] .dk-component-dropdown[data-open] .dk-component-icon-button[data-variant="ghost"].dk-component-dropdown__trigger { --_ib-border: var(--dk-fidelity-line); }

/* ═════════════════════════════════ drift-kit:layer components/eyebrow/fidelity.css ═════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   Eyebrow: the wireframe and mid-fi looks (data-fidelity, 22 Oct 2026).
   A wireframe has one eyebrow, so every size draws it: 10px, .08em
   tracking, line-height normal, on one line, faded (wireframe) or in the
   look's muted ink (mid-fi) unless a colour is asked for. Every rule is the
   Drift selector it overrides, prefixed with the gate, so it wins on weight.
   ──────────────────────────────────────────────────────────────────────── */
[data-fidelity] .dk-component-eyebrow {
  -webkit-font-smoothing: auto;
  transition: none;
  white-space: nowrap;
}

/* ── Size: one eyebrow, 10px ─────────────────────────────────────────────── */
[data-fidelity] .dk-component-eyebrow:not([data-size]),
[data-fidelity] .dk-component-eyebrow[data-size] { font-size: 10px; line-height: normal; letter-spacing: .08em; }

/* ── Colour: a fade in a wireframe, the muted ink in mid-fi ─────────────── */
[data-fidelity="wireframe"] .dk-component-eyebrow { opacity: .7; }
[data-fidelity="midfi"] .dk-component-eyebrow:not([data-color]) { color: var(--dk-fidelity-muted); }

/* ═════════════════════════════════ drift-kit:layer components/heading/fidelity.css ═════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   Heading: the wireframe and mid-fi looks (data-fidelity, 22 Oct 2026).
   A page title at 22px and a section title at 17px, line-height normal and
   the page's own glyph smoothing; mid-fi sets titles in Syne. On a desktop
   page a centred title sits left, as a wireframe's desktop layout does.
   Every rule is the Drift selector it overrides, prefixed with the gate, so
   it wins on weight.
   ──────────────────────────────────────────────────────────────────────── */
[data-fidelity] .dk-component-heading {
  -webkit-font-smoothing: auto;
  transition: none;
}

/* ── Size: medium (and none) 22, small 17 ───────────────────────────────── */
[data-fidelity] .dk-component-heading:not([data-size]),
[data-fidelity] .dk-component-heading[data-size="medium"] { font-size: 22px; line-height: normal; }
[data-fidelity] .dk-component-heading[data-size="small"] { font-size: 17px; line-height: normal; }

/* ── Mid-fi titles are Syne ─────────────────────────────────────────────── */
[data-fidelity="midfi"] .dk-component-heading { font-family: Syne, system-ui, -apple-system, sans-serif; }

/* ── Desktop: a centred title sits left ─────────────────────────────────── */
[data-fidelity][data-device="desktop"] .dk-component-heading[data-align="center"] { text-align: left; }

/* ═════════════════════════════ drift-kit:layer components/icon-button/fidelity.css ═════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   Icon button: the wireframe and mid-fi looks (data-fidelity, 22 Oct 2026).
   A wireframe's icon button is its glyph, 18px, in a 36px square with a 1px
   line and an 8px corner, transparent, in the words' colour. Ghost keeps
   the square without its line (the line comes back under the pointer); a
   small ghost is the bare glyph, 22px in 28px, at 45% (80% under the
   pointer). Primary is filled with the ink, the glyph in the inverse ink;
   pressed (aria-pressed) is filled with the line in a wireframe and the
   ink in mid-fi, the glyph's stroke the surface. Disabled is the rest look
   at 30%. A label shows beside the glyph on a desktop only (data-device):
   44px tall, 16px either side, 8px apart, 14px at 600; elsewhere the
   button stays the square. The paint holds in every state: the pointer
   fades it (60% in a wireframe, 75% in mid-fi), a press shrinks it to 94%
   (with motion reduced it does not shrink: it dips to 80%, or keeps a
   hovering pointer's fade), both easing over 120ms as the wireframe's do;
   focus is the browser's own ring in a wireframe and the strong line 2px
   out in mid-fi.

   The look defines only what Disko draws: plain, ghost and a small ghost,
   primary, pressed, disabled, medium and that small. Not designed yet:
   subtle, raised and no variant (drawn as plain), the other sizes (drawn
   as medium), loading (the full look's spinner, on the disabled look).

   Static, not relative: a positioned root rasterises its edges and glyphs
   differently from the wireframe's plain box. Every rule is the Drift
   selector it overrides, prefixed with the gate, so it wins on weight.
   ──────────────────────────────────────────────────────────────────────── */
[data-fidelity] .dk-component-icon-button {
  position: static;
  font: inherit;
  /* The wireframe's own motion (decision 7): the fade and the press ease
     over 120ms; with motion reduced only the fade does, and a press snaps. */
  transition: opacity .12s ease, transform .12s ease;
}
@media (prefers-reduced-motion: reduce) {
  [data-fidelity] .dk-component-icon-button { transition: opacity .12s ease; }
}

/* ── The box: every size a 36px square with an 18px glyph, but the small
   ghost: 28px with a 22px glyph ─────────────────────────────────────────── */
[data-fidelity] .dk-component-icon-button:not([data-size]),
[data-fidelity] .dk-component-icon-button[data-size="extra-small"],
[data-fidelity] .dk-component-icon-button[data-size="small"],
[data-fidelity] .dk-component-icon-button[data-size="medium"],
[data-fidelity] .dk-component-icon-button[data-size="large"] {
  --_ib-size: 36px;
  --_ib-icon-size: 18px;
  --_ib-radius: 8px;
}

/* ── The paint, through the component's own slots. Every state reads the
   rest paint (Drift's state slots have no fallback, so each points at its
   rest value), no lift and no ring ───────────────────────────────────── */
[data-fidelity] .dk-component-icon-button:not([data-variant]),
[data-fidelity] .dk-component-icon-button[data-variant] {
  --_ib-bg-hover: var(--_ib-bg);
  --_ib-bg-active: var(--_ib-bg);
  --_ib-icon-hover: var(--_ib-icon);
  --_ib-icon-active: var(--_ib-icon);
  --_ib-border-hover: initial;
  --_ib-border-active: initial;
  --_ib-lift: none;
  --_ib-lift-hover: initial;
  --_ib-lift-active: initial;
  --_ib-ring: transparent;
}
[data-fidelity] .dk-component-icon-button:not([data-variant]),
[data-fidelity] .dk-component-icon-button[data-variant="subtle"],
[data-fidelity] .dk-component-icon-button[data-variant="plain"],
[data-fidelity] .dk-component-icon-button[data-variant="raised"] {
  --_ib-border-width: 1px;
  --_ib-border: var(--dk-fidelity-line);
  --_ib-bg: transparent;
  --_ib-icon: currentColor;
}
[data-fidelity] .dk-component-icon-button[data-variant="ghost"] {
  --_ib-border-width: 1px;
  --_ib-border: transparent;
  --_ib-bg: transparent;
  --_ib-icon: currentColor;
}
[data-fidelity] .dk-component-icon-button[data-variant="ghost"][data-size="small"] {
  --_ib-size: 28px;
  --_ib-icon-size: 22px;
  --_ib-border-width: 0px;
  opacity: .45;
}
[data-fidelity] .dk-component-icon-button[data-status="primary"] {
  --_ib-border-width: 1px;
  --_ib-border: var(--dk-fidelity-ink);
  --_ib-bg: var(--dk-fidelity-ink);
  --_ib-icon: var(--dk-fidelity-ink-inverse);
}
[data-fidelity="wireframe"] .dk-component-icon-button[aria-pressed="true"] {
  --_ib-bg: var(--dk-fidelity-line);
  --_ib-icon: currentColor;
}
[data-fidelity="midfi"] .dk-component-icon-button[aria-pressed="true"] {
  --_ib-bg: var(--dk-fidelity-ink);
  --_ib-icon: currentColor;
}
[data-fidelity] .dk-component-icon-button[aria-pressed="true"] svg { stroke: var(--dk-fidelity-surface); }
[data-fidelity] .dk-component-icon-button:disabled,
[data-fidelity] .dk-component-icon-button[aria-disabled="true"] {
  background-color: var(--_ib-bg);
  border-color: var(--_ib-border, transparent);
  color: var(--_ib-icon);
  opacity: .3;
  cursor: default;
}

/* ── The label: beside the glyph on a desktop, nowhere else ─────────────── */
[data-fidelity] .dk-component-icon-button__label { display: none; }
[data-fidelity][data-device="desktop"] .dk-component-icon-button:has(> .dk-component-icon-button__label) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  inline-size: auto;
  block-size: 44px;
  padding: 0 16px;
}
[data-fidelity][data-device="desktop"] .dk-component-icon-button__label {
  display: inline;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
/* The labelled button sets display, which outweighs the browser's own
   [hidden]: restated here at the desktop rule's own weight, after it, so a
   hidden icon button stays hidden (and in every look and device). */
[data-fidelity] .dk-component-icon-button[hidden],
[data-fidelity][data-device="desktop"] .dk-component-icon-button[hidden] { display: none; }

/* ── Pointer, press and focus ───────────────────────────────────────────── */
@media (hover: hover) {
  [data-fidelity="wireframe"] .dk-component-icon-button:hover:not(:disabled):not([aria-disabled="true"]) { opacity: .6; }
  [data-fidelity="midfi"] .dk-component-icon-button:hover:not(:disabled):not([aria-disabled="true"]) { opacity: .75; }
  /* A ghost does not fade: it shows its line. A small ghost comes up to 80%. */
  [data-fidelity] .dk-component-icon-button[data-variant="ghost"]:hover:not(:disabled):not([aria-disabled="true"]) {
    opacity: 1;
    --_ib-border: var(--dk-fidelity-line);
  }
  [data-fidelity] .dk-component-icon-button[data-variant="ghost"][data-size="small"]:hover:not(:disabled):not([aria-disabled="true"]) { opacity: .8; }
}
[data-fidelity="wireframe"] .dk-component-icon-button[data-pseudo-class="hover"] { opacity: .6; }
[data-fidelity="midfi"] .dk-component-icon-button[data-pseudo-class="hover"] { opacity: .75; }
[data-fidelity] .dk-component-icon-button[data-variant="ghost"][data-pseudo-class="hover"] {
  opacity: 1;
  --_ib-border: var(--dk-fidelity-line);
}
[data-fidelity] .dk-component-icon-button[data-variant="ghost"][data-size="small"][data-pseudo-class="hover"] { opacity: .8; }
[data-fidelity] .dk-component-icon-button:active:not(:disabled):not([aria-disabled="true"]):not([data-pseudo-class]),
[data-fidelity] .dk-component-icon-button[data-pseudo-class="active"]:not(:disabled):not([aria-disabled="true"]) { transform: scale(.94); }
/* Motion reduced, a press does not shrink (kit/reduced-motion.css takes
   the scale away): it dips to 80%, on a touch screen too, which reports
   :hover during the tap but has no fade. A pointer that hovers keeps its
   own hover as the press. */
@media (prefers-reduced-motion: reduce) {
  [data-fidelity] .dk-component-icon-button:active:not(:disabled):not([aria-disabled="true"]):not([data-pseudo-class]),
  [data-fidelity] .dk-component-icon-button[data-pseudo-class="active"]:not(:disabled):not([aria-disabled="true"]) { opacity: .8; }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
  [data-fidelity="wireframe"] .dk-component-icon-button:active:hover:not(:disabled):not([aria-disabled="true"]):not([data-pseudo-class]) { opacity: .6; }
  [data-fidelity="midfi"] .dk-component-icon-button:active:hover:not(:disabled):not([aria-disabled="true"]):not([data-pseudo-class]) { opacity: .75; }
  [data-fidelity] .dk-component-icon-button[data-variant="ghost"]:active:hover:not(:disabled):not([aria-disabled="true"]):not([data-pseudo-class]) { opacity: 1; }
  [data-fidelity] .dk-component-icon-button[data-variant="ghost"][data-size="small"]:active:hover:not(:disabled):not([aria-disabled="true"]):not([data-pseudo-class]) { opacity: .8; }
}
[data-fidelity="wireframe"] .dk-component-icon-button:focus-visible:not(:disabled):not([aria-disabled="true"]):not([data-pseudo-class]) {
  outline: revert;
  outline-offset: revert;
}
[data-fidelity="midfi"] .dk-component-icon-button:focus-visible:not(:disabled):not([aria-disabled="true"]):not([data-pseudo-class]) {
  outline: 2px solid var(--dk-fidelity-line-strong);
  outline-offset: 2px;
}

/* ═══════════════════════════════════ drift-kit:layer components/input/fidelity.css ═══════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   Input: the wireframe and mid-fi looks (data-fidelity, 23 Oct 2026).
   A wireframe's field is a box drawn by a 1px line with a 10px corner,
   14px by 16px of room around the words, 8px between a leading slot and
   the value; the value and the slot are 16px in the page's own face and
   colour, the placeholder is that colour at 50%. Transparent in a
   wireframe, the surface in mid-fi. Small is 7px by 10px of room, an 8px
   corner and 13px words. Disabled is the field at 60%.

   The raised variant (what a search field is in Drift: a magnifier in the
   leading slot, no label) is the wireframe's search field: 10px between the
   glyph and the words, a 12px corner, 15px words, a 16px glyph, no shadow,
   and no fade under the pointer.

   States are the wireframe's: the pointer fades a field (not a search
   field, not a disabled one, not while it holds focus) to 60%, at once;
   focus draws nothing in a wireframe and the strong line 2px out from the
   value in mid-fi. Drift's own hover fill, focus ring, disabled colours and
   their transitions are held at rest.

   The look defines only what Disko draws: plain and raised, medium and
   small, a text leading slot or a glyph, enabled, read-only and disabled.
   Not designed yet: the label, caption and error (the full look's), the
   inset variant (drawn as plain), large (drawn as medium), the in-field
   actions (the full look's) and a leading control (in the plain field's
   box, its halves the full look's).

   Every rule is the Drift selector it overrides, prefixed with the gate,
   so it wins on weight.
   ──────────────────────────────────────────────────────────────────────── */
[data-fidelity] .dk-component-input:not([hidden]) {
  display: block;
  width: auto;
}

/* ── The box ─────────────────────────────────────────────────────────────── */
[data-fidelity] .dk-component-input__field {
  gap: 8px;
  min-height: 0;
  padding: 14px 16px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--dk-fidelity-line);
  border-radius: 10px;
  background: var(--_fin-surface);
  box-shadow: none;
  cursor: auto;
  transition: none;
  --_fin-surface: transparent;
}
[data-fidelity="midfi"] .dk-component-input__field { --_fin-surface: var(--dk-fidelity-surface); }
[data-fidelity] .dk-component-input[data-size="small"] .dk-component-input__field {
  min-height: 0;
  padding: 7px 10px;
  border-radius: 8px;
}
[data-fidelity] .dk-component-input[data-size="large"] .dk-component-input__field { min-height: 0; }
[data-fidelity] .dk-component-input:is([data-raised], [data-variant="raised"]) .dk-component-input__field {
  gap: 10px;
  border-radius: 12px;
  box-shadow: none;
}

/* Drift's hover, focus, invalid and disabled paint, held at rest: the
   field's own, a leading control's, and the date picker's and day of
   month's, which draw their triggers' states on this field. A leading
   control takes the plain field's box (not designed yet). */
[data-fidelity] .dk-component-input__field:has(:is(input, textarea, select):focus-visible),
[data-fidelity] .dk-component-input__field:has(:is(input, textarea)[aria-invalid="true"]),
[data-fidelity] .dk-component-input__field:has(:is(input, textarea)[aria-invalid="true"]):has(:is(input, textarea, select):focus-visible),
[data-fidelity] .dk-component-input__field:has(:is(input, textarea, select):disabled),
[data-fidelity] .dk-component-input[data-leading-control] .dk-component-input__field:has(:is(input, textarea, select):focus-visible),
[data-fidelity] .dk-component-input__field:has(> .dk-component-date-picker__trigger),
[data-fidelity] .dk-component-input__field:is(:hover, *):has(> .dk-component-date-picker__trigger:focus-visible),
[data-fidelity] .dk-component-input__field:is(:hover, *):has(> .dk-component-date-picker__trigger:active:not(:disabled)),
[data-fidelity] .dk-component-input__field:is(:hover, *):has(> .dk-component-date-picker__trigger[aria-expanded="true"]),
[data-fidelity] .dk-component-input__field:is(:hover, *):has(> .dk-component-date-picker__trigger[aria-invalid="true"]:focus-visible),
[data-fidelity] .dk-component-input__field:is(:hover, *):has(> .dk-component-date-picker__trigger:disabled),
[data-fidelity] .dk-component-input__field:is(:hover, *):has(> .dk-component-day-of-month__trigger:focus-visible),
[data-fidelity] .dk-component-input__field:is(:hover, *):has(> .dk-component-day-of-month__trigger:active:not(:disabled)),
[data-fidelity] .dk-component-input__field:is(:hover, *):has(> .dk-component-day-of-month__trigger[aria-expanded="true"]),
[data-fidelity] .dk-component-input__field:is(:hover, *):has(> .dk-component-day-of-month__trigger[aria-invalid="true"]),
[data-fidelity] .dk-component-input__field:is(:hover, *):has(> .dk-component-day-of-month__trigger[aria-invalid="true"]:focus-visible),
[data-fidelity] .dk-component-input__field:is(:hover, *):has(> .dk-component-day-of-month__trigger:disabled) {
  border-color: var(--dk-fidelity-line);
  background: var(--_fin-surface);
  box-shadow: none;
  cursor: auto;
}
@media (hover: hover) {
  [data-fidelity] .dk-component-input__field:hover:not(:has(:is(input, textarea, select):disabled, :is(input, textarea, select):focus-visible, .dk-component-input__action:hover)),
  [data-fidelity] .dk-component-input[data-leading-control] .dk-component-input__field:hover,
  [data-fidelity] .dk-component-input[data-leading-control] .dk-component-input__field:hover:not(:has(:is(input, textarea, select):disabled, :is(input, textarea, select):focus-visible, .dk-component-input__action:hover)) {
    border-color: var(--dk-fidelity-line);
    background: var(--_fin-surface);
    box-shadow: none;
    cursor: auto;
  }
}
[data-fidelity] .dk-component-input[data-leading-control] .dk-component-input__field {
  gap: 8px;
  padding: 14px 16px;
}
[data-fidelity] .dk-component-input:is([data-raised], [data-variant="raised"]) .dk-component-input__field:has(:is(input, textarea, select):focus-visible),
[data-fidelity] .dk-component-input:is([data-raised], [data-variant="raised"]) .dk-component-input__field:has(:is(input, textarea, select):disabled) {
  box-shadow: none;
}
@media (hover: hover) {
  [data-fidelity] .dk-component-input:is([data-raised], [data-variant="raised"]) .dk-component-input__field:hover:not(:has(:is(input, textarea, select):disabled, :is(input, textarea, select):focus-visible, .dk-component-input__action:hover)) {
    box-shadow: none;
  }
}

/* ── The value ───────────────────────────────────────────────────────────── */
/* width auto, as a plain input: Drift's 100% would make the value's own
   width compressible, and a field in a crowded row would shrink past it. */
[data-fidelity] .dk-component-input__field input {
  flex: 1 1 0%;
  width: auto;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  color: inherit;
}
[data-fidelity] .dk-component-input[data-size="small"] .dk-component-input__field input { font-size: 13px; }
[data-fidelity] .dk-component-input:is([data-raised], [data-variant="raised"]) .dk-component-input__field input { font-size: 15px; }
[data-fidelity] .dk-component-input__field input::placeholder {
  color: currentColor;
  opacity: .5;
}
[data-fidelity] .dk-component-input__field input:disabled {
  color: inherit;
  -webkit-text-fill-color: currentColor;
  cursor: default;
}

/* ── The leading slot: words at the value's size, or a 16px glyph ────────── */
[data-fidelity] .dk-component-input__leading {
  color: inherit;
  font-size: 16px;
  line-height: inherit;
}
[data-fidelity] .dk-component-input__field:has(:is(input, textarea, select):focus-visible) .dk-component-input__leading,
[data-fidelity] .dk-component-input__field:has(:is(input, textarea, select):disabled) .dk-component-input__leading {
  color: inherit;
}
@media (hover: hover) {
  [data-fidelity] .dk-component-input__field:hover:not(:has(:is(input, textarea, select):disabled, :is(input, textarea, select):focus-visible, .dk-component-input__action:hover)) .dk-component-input__leading {
    color: inherit;
  }
}
[data-fidelity] .dk-component-input__leading > svg,
[data-fidelity] .dk-component-input__leading > i {
  width: 16px;
  height: 16px;
}
[data-fidelity] .dk-component-input__leading > :is(svg, i),
[data-fidelity] .dk-component-input__field:has(:is(input, textarea, select):focus-visible) .dk-component-input__leading > :is(svg, i),
[data-fidelity] .dk-component-input__field:has(:is(input, textarea, select):disabled) .dk-component-input__leading > :is(svg, i) {
  color: inherit;
  transition: none;
}
@media (hover: hover) {
  [data-fidelity] .dk-component-input__field:hover:not(:has(:is(input, textarea, select):disabled, :is(input, textarea, select):focus-visible, .dk-component-input__action:hover)) .dk-component-input__leading > :is(svg, i) {
    color: inherit;
    transition: none;
  }
}

/* ── Disabled: the field at 60% ──────────────────────────────────────────── */
[data-fidelity] .dk-component-input:has(> .dk-component-input__field :is(input, textarea, select):disabled) { opacity: .6; }

/* ── Pointer and focus ───────────────────────────────────────────────────── */
@media (hover: hover) {
  [data-fidelity] .dk-component-input:not([data-raised]):not([data-variant="raised"]):hover:not(:focus-within):not(:has(> .dk-component-input__field :is(input, textarea, select):disabled)) { opacity: .6; }
}
[data-fidelity] .dk-component-input:not([data-raised]):not([data-variant="raised"])[data-pseudo-class="hover"]:not(:has(> .dk-component-input__field :is(input, textarea, select):disabled)) { opacity: .6; }
[data-fidelity="midfi"] .dk-component-input__field input:focus-visible {
  outline: 2px solid var(--dk-fidelity-line-strong);
  outline-offset: 2px;
}

/* ════════════════════════════════════ drift-kit:layer components/link/fidelity.css ════════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   Link: the wireframe and mid-fi looks (data-fidelity, 22 Oct 2026).
   A wireframe's link is its text underlined, in the text's own colour, 3px
   below the baseline, and it answers the pointer the way the page around it
   does (no colour or underline change of its own). A standalone link has a
   size: 14px, 12px small, 16px large, line-height normal, the text's own
   weight, and is underlined at rest like any other wireframe link. The
   focus ring is the browser's own in a wireframe, the look's strong line
   2px out in mid-fi. Every rule is the Drift
   selector it overrides, prefixed with the gate, so it wins on weight.
   ──────────────────────────────────────────────────────────────────────── */
[data-fidelity] .dk-component-link {
  color: inherit;
  text-decoration-color: currentColor;
  text-decoration-thickness: auto;
  text-underline-offset: 3px;
  border-radius: 0;
}

/* ── Standalone: its own size, underlined like the rest, and words on the
   line like the rest (in a centred column it centres); with an icon it
   lines the icon up with the words ─────────────────────────────────────── */
[data-fidelity] .dk-component-link[data-standalone] {
  display: inline;
  gap: 6px;
  font-size: 14px;
  line-height: normal;
  font-weight: inherit;
  text-decoration-line: underline;
}
[data-fidelity] .dk-component-link[data-standalone]:has(> .dk-component-link__icon) { display: inline-flex; }
/* Both set display, which outweighs the browser's own [hidden]: restated at
   their weight, after them, so a hidden link stays hidden. */
[data-fidelity] .dk-component-link[data-standalone][hidden] { display: none; }
[data-fidelity] .dk-component-link[data-standalone][data-size="small"] { font-size: 12px; }
[data-fidelity] .dk-component-link[data-standalone][data-size="large"] { font-size: 16px; }

/* ── Visited, hover and press: the link stays as it is ──────────────────── */
[data-fidelity] .dk-component-link[data-show-visited]:visited,
[data-fidelity] .dk-component-link[data-pseudo-class="visited"] { color: inherit; }
[data-fidelity] .dk-component-link:not([aria-disabled="true"]):not([data-pseudo-class]):active,
[data-fidelity] .dk-component-link[data-pseudo-class="hover"],
[data-fidelity] .dk-component-link[data-pseudo-class="active"] {
  color: inherit;
  text-decoration-color: currentColor;
  text-decoration-thickness: auto;
}
@media (hover: hover) {
  [data-fidelity] .dk-component-link:not([aria-disabled="true"]):not([data-pseudo-class]):hover {
    color: inherit;
    text-decoration-color: currentColor;
    text-decoration-thickness: auto;
  }
}
[data-fidelity] .dk-component-link[data-standalone]:not([aria-disabled="true"]):not([data-pseudo-class]):active,
[data-fidelity] .dk-component-link[data-standalone][data-pseudo-class="hover"],
[data-fidelity] .dk-component-link[data-standalone][data-pseudo-class="active"] { text-decoration-line: underline; }
@media (hover: hover) {
  [data-fidelity] .dk-component-link[data-standalone]:not([aria-disabled="true"]):not([data-pseudo-class]):hover { text-decoration-line: underline; }
}

/* ── Focus, for the keyboard only: the browser's own ring in a wireframe
   (revert: the user agent's :focus-visible ring, which no author rule
   restyles), the look's strong line 2px out in mid-fi. A forced
   data-pseudo-class="focus" keeps the full look's ring: the browser draws
   no ring for an element that is not really focused. ─────────────────── */
[data-fidelity="wireframe"] .dk-component-link:focus-visible {
  outline: revert;
  outline-offset: revert;
}
[data-fidelity="midfi"] .dk-component-link:focus-visible {
  outline: 2px solid var(--dk-fidelity-line-strong);
  outline-offset: 2px;
}

/* ═════════════════════════ drift-kit:layer components/loading-spinner/fidelity.css ═════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   Loading spinner: the wireframe and mid-fi looks (data-fidelity, 23 Oct
   2026). A wireframe's spinner is a ring in the words' colour: a track at
   a share of that colour and a quarter of it solid, turning at a constant
   pace. The ring on its own (data-variant="ring") is 44px with a 3px
   track at 16%, a turn every .9s (2.6s with motion reduced: a spinner
   that cannot spin says nothing, so it slows rather than stops), the
   signing-in veil's; xsmall is a busy button's, 14px with a 2px track at
   28%, a turn every .7s. Both colours draw in the words' colour. It
   arrives with no motion and goes at once (its exit is instant, so
   React's onExitComplete still fires).

   The look defines only what Disko draws: the ring at medium and xsmall.
   Not designed yet: small and large (24px and 64px, the full look's
   nominal sizes, with medium's track), and the symbol variant, which
   keeps the full look.

   Static, not relative: a positioned root rasterises differently from the
   wireframe's plain box, and the ring is the element's own border, so the
   arc (::after) is not drawn. Every rule is the Drift selector it
   overrides, prefixed with the gate, so it wins on weight; sizes are
   fixed px.
   ──────────────────────────────────────────────────────────────────────── */

/* The wireframe's own turn, and an exit that is over at once. */
@keyframes dk-fidelity-loading-spinner-spin { to { transform: rotate(360deg); } }
@keyframes dk-fidelity-loading-spinner-exit { to { opacity: 0; } }

[data-fidelity] .dk-component-loading-spinner[data-variant="ring"] {
  position: static;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 3px solid color-mix(in srgb, currentColor 16%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: dk-fidelity-loading-spinner-spin .9s linear infinite;
}
[data-fidelity] .dk-component-loading-spinner[data-variant="ring"]::after { content: none; }
[data-fidelity] .dk-component-loading-spinner[data-variant="ring"][data-size="xsmall"] {
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, currentColor 28%, transparent);
  border-top-color: currentColor;
  animation: dk-fidelity-loading-spinner-spin .7s linear infinite;
}
[data-fidelity] .dk-component-loading-spinner[data-variant="ring"][data-size="small"] {
  width: 24px;
  height: 24px;
  border: 2px solid color-mix(in srgb, currentColor 16%, transparent);
  border-top-color: currentColor;
}
[data-fidelity] .dk-component-loading-spinner[data-variant="ring"][data-size="large"] {
  width: 64px;
  height: 64px;
}
[data-fidelity] .dk-component-loading-spinner[data-variant="ring"][data-animation="exit"] {
  animation: dk-fidelity-loading-spinner-exit 0s linear forwards;
}
@media (prefers-reduced-motion: reduce) {
  [data-fidelity] .dk-component-loading-spinner[data-variant="ring"]:not([data-size="xsmall"]):not([data-animation="exit"]) { animation: dk-fidelity-loading-spinner-spin 2.6s linear infinite; }
}

/* ═══════════════════════════════════ drift-kit:layer components/modal/fidelity.css ═══════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   Modal: the wireframe and mid-fi looks (data-fidelity, 23 Oct 2026).
   A wireframe's dialog is one padded column on a dimmed screen: the box
   at most 420px wide, 20px in, its parts 12px apart, a 1px edge in the
   look's line (the strong line in the dark), 12px round, on the look's
   surface with its shadow. The header is the page's own row (Modal's
   header slot): the header box is display: contents, so the row is the
   column's first item. The body scrolls between the header and the
   footer, bleeding to the box's edges (a thin scrollbar in the strong
   line); the footer is a column of actions under a hairline that runs
   edge to edge. The backdrop is the look's strong scrim, the overlay 20px
   in, z-index 50.

   On a phone (data-sheet-open, which the page asks for with
   sheet="always") the box is a sheet: full width at the foot of the
   screen, 50% to 92% tall, 14px round at the top, a top edge only, 32px
   under the actions, which sit at its foot. side is a panel on the inline
   end: at most 380px, full height, square, a start edge only (a sheet on
   a phone, with no edge at all). bare is a lightbox: no box, white words,
   up to 900px wide and the screen's height, 16px in (40px at the top on a
   tablet or a desktop, 30px at the foot on a phone, data-device).

   Motion: the overlay fades the box in with it (.18s in, .16s out) and
   the backdrop does not move, so the box and the dim compose as one layer
   as the wireframe's scrim and box did. The box rises 12px from 98% (a
   sheet 48px) over .2s and leaves over .16s, which is also how it leaves
   when it swaps (data-swapping): the wireframe's own frames
   (dk-fidelity-modal-*), which Chrome rasterises the box by even at rest. The exit token is .16s, so the behaviour
   waits that long before it hides the overlay or swaps. The look plays
   these frames with reduced motion too, on purpose: Disko's wireframes
   do, and the look matches them pixel for pixel.

   The look defines only what Disko draws: the dialog, side and bare, one
   width (data-size draws as the dialog's 420px), the header slot (Drift's
   own title, icon and cross take the column and keep their full-look
   paint), a body and a footer of actions. Contained (data-contained) it is
   absolute in its container, which the behaviour writes inline.

   Every rule is the Drift selector it overrides, prefixed with the gate,
   so it wins on weight; sizes are fixed px.
   ──────────────────────────────────────────────────────────────────────── */

/* The wireframe's own frames: a box rises 12px from 98%, and leaves 10px
   down to 98%; a sheet comes and goes 48px. Chrome rasterises the box by
   its animation's frames even at rest (a scale changes how its text and
   lines are drawn), so these are the wireframe's exactly. */
@keyframes dk-fidelity-modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes dk-fidelity-modal-out { to { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes dk-fidelity-modal-sheet-in { from { transform: translateY(48px); opacity: 0; } }
@keyframes dk-fidelity-modal-sheet-out { to { transform: translateY(48px); opacity: 0; } }

/* ── The overlay: the dim and the motion ──────────────────────────────── */
[data-fidelity] .dk-component-modal {
  --dk-component-modal-exit-duration: .16s;
  /* The wireframe's sheet is drawn, not handled: no grabber, no drag and no
     blur (the full look's, 5 Nov 2026). */
  --dk-component-modal-drag: 0;
  z-index: 50;
  justify-content: center;
  animation: dk-component-modal-fade .18s ease both;
}
[data-fidelity] .dk-component-modal:not([hidden]) { display: flex; }
[data-fidelity] .dk-component-modal:not([data-sheet-open]) { align-items: center; padding: 20px; }
[data-fidelity] .dk-component-modal[data-closing] { animation: dk-component-modal-fade-out .16s ease both; }
[data-fidelity] .dk-component-modal[data-swapping] { pointer-events: none; }
[data-fidelity] .dk-component-modal__backdrop { background: var(--dk-fidelity-scrim-strong); animation: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-fidelity] .dk-component-modal[data-closing] .dk-component-modal__backdrop { animation: none; }

/* ── The box: one padded column ───────────────────────────────────────── */
[data-fidelity] .dk-component-modal .dk-component-modal__box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 20px;
  overflow: visible;
  background: var(--dk-fidelity-surface);
  box-shadow: var(--dk-fidelity-shadow);
}
[data-fidelity] .dk-component-modal:not([data-sheet-open]) .dk-component-modal__box {
  max-width: 420px;
  max-height: 100%;
  border: 1px solid var(--dk-fidelity-line);
  border-radius: 12px;
}
/* In, and out (a close or a swap), filled both ways. */
[data-fidelity] .dk-component-modal:not([data-closing]):not([data-swapping]) .dk-component-modal__box {
  animation: dk-fidelity-modal-in .2s cubic-bezier(.2,.8,.2,1) both;
}
[data-fidelity] .dk-component-modal[data-closing] .dk-component-modal__box,
[data-fidelity] .dk-component-modal[data-swapping] .dk-component-modal__box,
[data-fidelity] .dk-component-modal[data-sheet-open][data-closing] .dk-component-modal__box {
  animation: dk-fidelity-modal-out .16s ease both;
}

/* ── The header is the page's row; the body scrolls; the footer acts ──── */
[data-fidelity] .dk-component-modal__header:not(:has(> .dk-component-modal__title)) { display: contents; }
[data-fidelity] .dk-component-modal .dk-component-modal__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  margin: 0 -20px -12px;
  padding: 0 20px 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--dk-fidelity-line-strong) transparent;
}
[data-fidelity] .dk-component-modal__body::-webkit-scrollbar { width: 12px; }
[data-fidelity] .dk-component-modal__body::-webkit-scrollbar-track { background: transparent; }
[data-fidelity] .dk-component-modal__body::-webkit-scrollbar-thumb {
  background: var(--dk-fidelity-line-strong);
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: 8px;
}
[data-fidelity] .dk-component-modal__footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: normal;
  margin: 0 -20px;
  padding: 20px 20px 0;
  border-top: 1px solid var(--dk-fidelity-divider-soft);
}

/* ── side: a panel on the inline end, full height ─────────────────────── */
[data-fidelity] .dk-component-modal[data-variant="side"] { justify-content: flex-end; }
[data-fidelity] .dk-component-modal[data-variant="side"]:not([data-sheet-open]) { align-items: stretch; padding: 0; }
[data-fidelity] .dk-component-modal[data-variant="side"]:not([data-sheet-open]) .dk-component-modal__box {
  max-width: 380px;
  height: 100%;
  border-radius: 0;
  border-top: none;
  border-right: none;
  border-bottom: none;
}
[data-fidelity] .dk-component-modal[data-variant="side"] .dk-component-modal__body { flex: 1; }

/* ── The sheet: a phone (data-sheet-open) ─────────────────────────────── */
[data-fidelity] .dk-component-modal[data-sheet-open] { align-items: flex-end; padding: 0; }
[data-fidelity] .dk-component-modal[data-sheet-open] .dk-component-modal__box {
  max-width: none;
  max-height: 92%;
  min-height: 50%;
  border: none;
  border-top: 1px solid var(--dk-fidelity-line);
  border-radius: 14px 14px 0 0;
  padding-bottom: 32px;
}
[data-fidelity] .dk-component-modal[data-sheet-open]:not([data-variant="bare"]):not([data-closing]):not([data-swapping]) .dk-component-modal__box { animation-name: dk-fidelity-modal-sheet-in; }
[data-fidelity] .dk-component-modal[data-sheet-open]:not([data-variant="bare"])[data-closing] .dk-component-modal__box,
[data-fidelity] .dk-component-modal[data-sheet-open]:not([data-variant="bare"])[data-swapping] .dk-component-modal__box { animation-name: dk-fidelity-modal-sheet-out; }
/* A side panel on a phone is a sheet with no edge at all, as tall as it may. */
[data-fidelity] .dk-component-modal[data-variant="side"][data-sheet-open] .dk-component-modal__box { height: 100%; border-top: none; }
[data-fidelity] .dk-component-modal[data-sheet-open] .dk-component-modal__body { flex: 1; }
[data-fidelity] .dk-component-modal[data-sheet-open] .dk-component-modal__footer {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: normal;
  margin-top: auto;
  padding: 20px 20px 0;
}
/* The full look's sheet grows each action to a thumb's 44px and spans it;
   the wireframe's keep their own size. */
[data-fidelity] .dk-component-modal[data-sheet-open] .dk-component-modal__footer > * { flex: none; width: auto; min-height: auto; }
[data-fidelity] .dk-component-modal[data-sheet-open] .dk-component-modal__footer > :not(.dk-component-button) { justify-content: normal; }

/* ── bare: a lightbox, no box ─────────────────────────────────────────── */
[data-fidelity] .dk-component-modal[data-variant="bare"]:not([data-sheet-open]) { padding: 16px; }
[data-fidelity][data-device="desktop"] .dk-component-modal[data-variant="bare"]:not([data-sheet-open]) { padding: 40px 16px 16px; }
[data-fidelity][data-device="tablet"] .dk-component-modal[data-variant="bare"]:not([data-sheet-open]) { padding-top: 40px; }
[data-fidelity][data-device="phone"] .dk-component-modal[data-variant="bare"]:not([data-sheet-open]) { align-items: center; padding: 16px 16px 30px; }
[data-fidelity] .dk-component-modal[data-variant="bare"] .dk-component-modal__box {
  max-width: 900px;
  height: 100%;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  color: #fff;
}
[data-fidelity][data-device="phone"] .dk-component-modal[data-variant="bare"] .dk-component-modal__box {
  max-width: none;
  min-height: 0;
  border-radius: 0;
}
[data-fidelity] .dk-component-modal[data-variant="bare"] .dk-component-modal__body {
  flex: 1;
  margin: 0;
  padding: 0;
  overflow: visible;
}

/* ── The dark: the box's edge is the strong line ──────────────────────── */
[data-fidelity]:is([data-theme="dark"]) .dk-component-modal .dk-component-modal__box { border-color: var(--dk-fidelity-line-strong); }

/* The body's own actions bleed by the body's padding, which these looks set
   to 20 at every width (fix round 1, M7). */
[data-fidelity] .dk-component-modal__actions { margin-inline: -20px; padding-inline: 20px; }

/* ═══════════════════════════════════ drift-kit:layer components/radio/fidelity.css ═══════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   Radio: the wireframe and mid-fi looks (data-fidelity, 23 Oct 2026).
   A wireframe's radio is an 18px ring drawn by a 1px line; checked, a dot
   in the words' colour fills it 4px in from the line. Nothing else: no
   fill, no halo, no motion, and no state of its own (in a wireframe the
   row it sits in is the control).

   The look defines only what Disko draws: medium, without words,
   unchecked and checked. Not designed yet: the words (the full look's,
   beside a box that keeps its wireframe size), the other sizes (drawn as
   medium), invalid and disabled (the ring at rest).

   Every rule is the Drift selector it overrides, prefixed with the gate,
   so it wins on weight.
   ──────────────────────────────────────────────────────────────────────── */
[data-fidelity] .dk-component-radio:not([hidden]):not(:has(.dk-component-radio__text)),
[data-fidelity] .dk-component-radio:not([hidden]):has(.dk-component-radio__text:empty) {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
}

/* ── The ring ────────────────────────────────────────────────────────────── */
[data-fidelity] .dk-component-radio__box {
  display: block;
  width: 18px;
  height: 18px;
  min-height: 0;
}
[data-fidelity] .dk-component-radio__indicator {
  display: block;
  position: relative;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: var(--dk-fidelity-line);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  box-shadow: none;
  transition: none;
}
[data-fidelity] .dk-component-radio__indicator::after { content: none; }
[data-fidelity] .dk-component-radio__input:checked ~ .dk-component-radio__indicator::after {
  content: '';
  display: block;
  position: absolute;
  inset: 4px;
  width: auto;
  height: auto;
  border-radius: 50%;
  background: currentColor;
  transform: none;
  transition: none;
}

/* Drift's hover, press and focus paint, held at rest. */
[data-fidelity] .dk-component-radio:active:not(:has(.dk-component-radio__input:disabled)):not([data-pseudo-class]) .dk-component-radio__indicator,
[data-fidelity] label:active .dk-component-radio:not(label):not(:has(.dk-component-radio__input:disabled)):not([data-pseudo-class]) .dk-component-radio__indicator,
[data-fidelity] .dk-component-radio:has(.dk-component-radio__input:focus-visible):not([data-pseudo-class]) .dk-component-radio__indicator,
[data-fidelity] .dk-component-radio[data-pseudo-class="hover"] .dk-component-radio__indicator,
[data-fidelity] .dk-component-radio[data-pseudo-class="active"] .dk-component-radio__indicator,
[data-fidelity] .dk-component-radio[data-pseudo-class="focus"] .dk-component-radio__indicator {
  border-color: var(--dk-fidelity-line);
  background: transparent;
  box-shadow: none;
}
@media (hover: hover) {
  [data-fidelity] .dk-component-radio:hover:not(:has(.dk-component-radio__input:disabled)):not(:active):not(:has(.dk-component-radio__input:focus-visible)):not([data-pseudo-class]) .dk-component-radio__indicator,
  [data-fidelity] label:hover:not(:active) .dk-component-radio:not(label):not(:has(.dk-component-radio__input:disabled)):not(:has(.dk-component-radio__input:focus-visible)):not([data-pseudo-class]) .dk-component-radio__indicator {
    border-color: var(--dk-fidelity-line);
    background: transparent;
    box-shadow: none;
  }
}

/* ══════════════════════════════════ drift-kit:layer components/select/fidelity.css ══════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   Select: the wireframe and mid-fi looks (data-fidelity, 23 Oct 2026).
   A wireframe's select is a box with a 1px edge in the look's line colour,
   10px round, its value in the page's own face and a plain chevron 14px from
   the right; the pointer fades it to 60%. Its menu hangs 6px under the
   trigger, at least as wide as it, max-content up to 340px and 280px tall,
   a 1px edge, 10px round, 6px in, rows 2px apart; a row is 8px 10px, 8px
   round, on the look's row fills: the chosen one (which wins), the one
   under the pointer, the keyboard's. Mid-fi fills the trigger and the menu
   with its surface and shadows the menu.

   The wireframe hangs its menu off the trigger's PADDING box, Drift off its
   border box, so here the two are the same box: the trigger takes a 1px
   margin and no border, and its edge (and mid-fi's fill, which sits under
   the wireframe's border) is a ::before 1px outside it, behind the words.
   A spread shadow for the edge rasterises the corners differently.

   Sizes: large is the wireframe's default select (15px, 14px 44px 14px
   16px), medium its md (14px, 11px 40px 11px 14px), small its sm (13px,
   6px 30px 6px 10px, 8px round, a 14px chevron 8px in, a 4px menu whose
   rows are 7px 10px and may shrink). The menu's floor beside the trigger
   (280, 180, 140px) is Select's menuMinWidth, and where it hangs is
   align, exact and container: the look only paints. Disko mirrors each size's
   horizontal padding plus its 2px edge (62, 56 and 42px) in the flex
   basis of a select that shares a row (p/disko/src/wireframes.js, the
   wf-row and wf-tcol rules): change the two together.

   A row is the label at 15px (medium 14, small 13) 8px above and below, or
   with a description a 14px 600 title over a 12px line at 60% (mid-fi: the
   muted ink, full strength), a 40px picture box (the icon: the wireframe's crossed box,
   mid-fi's picture tile and glyph, --dk-fidelity-image-glyph) and a 12px
   600 meta at the far edge. No tick, except on a chosen row of a multi
   select, 20px. The search field is the menu's head: 15px 12px, a 1px line
   under it, a 16px glyph at 50%, the words at 15px (14, 13), its
   placeholder at 50%; the menu scrolls, the field stuck to its top.

   The look defines only what Disko draws: plain, the three sizes, one value,
   multiple as a count (countLabel), search, rows with a description, icon
   and meta. Not designed yet: chips, clear, loading, groups, the empty
   line, a disabled option or select, an error, a label and a caption (the
   look's box, the full look's paint); raised and inset (drawn plain); and
   the full look whole for a select in an Input's leading slot, the grid
   layout, the sentence appearance's words and the phone sheet.

   Every rule is the Drift selector it overrides, prefixed with the gate,
   or heavier by what it leaves out (a leading slot, a grid, a sheet); sizes
   are fixed px.
   ──────────────────────────────────────────────────────────────────────── */
[data-fidelity] .dk-component-select {
  gap: 0;
  -webkit-font-smoothing: auto;
}

/* ── The trigger: the wireframe's padding box, its edge drawn outside ──── */
[data-fidelity] .dk-component-select:not(.dk-component-input__leading .dk-component-select) .dk-component-select__trigger {
  display: flex;
  position: relative;
  isolation: isolate;
  align-items: center;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 1px;
  padding: 14px 44px 14px 16px;
  border-width: 0;
  border-radius: 9px;
  box-shadow: none;
  color: inherit;
  font-family: inherit;
  line-height: normal;
  transition: none;
  --_sel-surface: transparent;
}
[data-fidelity] .dk-component-select:not([data-size]):not(.dk-component-input__leading .dk-component-select) .dk-component-select__trigger { padding: 11px 40px 11px 14px; }
[data-fidelity] .dk-component-select[data-size="small"]:not(.dk-component-input__leading .dk-component-select) .dk-component-select__trigger { padding: 6px 30px 6px 10px; border-radius: 7px; }
[data-fidelity] .dk-component-select:not(.dk-component-input__leading .dk-component-select) .dk-component-select__trigger::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  pointer-events: none;
  border: 1px solid var(--dk-fidelity-line);
  border-radius: 10px;
}
[data-fidelity] .dk-component-select[data-size="small"]:not(.dk-component-input__leading .dk-component-select) .dk-component-select__trigger::before { border-radius: 8px; }
[data-fidelity="midfi"] .dk-component-select:not(.dk-component-input__leading .dk-component-select) .dk-component-select__trigger::before { background: var(--dk-fidelity-surface); }

/* Drift's fills, lifts and rings, held at rest: hovered, pressed, focused,
   open, raised (drawn plain), and the docs' forced states. The pointer
   fades a closed trigger instead. */
[data-fidelity] .dk-component-select__trigger:active:not(:disabled),
[data-fidelity] .dk-component-select__trigger:active:not(:disabled):has(.dk-component-select__chip:active),
[data-fidelity] .dk-component-select__trigger:active:not(:disabled):has(.dk-component-select__clear:active),
[data-fidelity] .dk-component-select[data-pseudo-class="hover"] .dk-component-select__trigger,
[data-fidelity] .dk-component-select[data-pseudo-class="active"] .dk-component-select__trigger { background: transparent; }
@media (hover: hover) {
  [data-fidelity] .dk-component-select:not([data-open]) .dk-component-select__trigger:hover:not(:disabled):not(:focus-visible):not(:active),
  [data-fidelity] .dk-component-select:not([data-open]) .dk-component-select__trigger:hover:not(:disabled):not(:focus-visible):not(:active):has(.dk-component-select__chip:hover),
  [data-fidelity] .dk-component-select:not([data-open]) .dk-component-select__trigger:hover:not(:disabled):not(:focus-visible):not(:active):has(.dk-component-select__clear:hover) { background: transparent; }
}
[data-fidelity] .dk-component-select__trigger:focus-visible,
[data-fidelity] .dk-component-select[data-open] .dk-component-select__trigger,
[data-fidelity] .dk-component-select[data-pseudo-class="focus"] .dk-component-select__trigger,
[data-fidelity] .dk-component-select:is([data-raised], [data-variant="raised"]) .dk-component-select__trigger,
[data-fidelity] .dk-component-select__trigger:is([data-raised], [data-variant="raised"]),
[data-fidelity] .dk-component-select:is([data-raised], [data-variant="raised"]) .dk-component-select__trigger:focus-visible,
[data-fidelity] .dk-component-select:is([data-raised], [data-variant="raised"])[data-open] .dk-component-select__trigger,
[data-fidelity] .dk-component-select__trigger:is([data-raised], [data-variant="raised"]):focus-visible,
[data-fidelity] .dk-component-select:is([data-raised], [data-variant="raised"]) .dk-component-select__trigger:disabled,
[data-fidelity] .dk-component-select__trigger:is([data-raised], [data-variant="raised"]):disabled,
[data-fidelity] .dk-component-select:is([data-raised], [data-variant="raised"])[data-pseudo-class="hover"] .dk-component-select__trigger,
[data-fidelity] .dk-component-select:is([data-raised], [data-variant="raised"])[data-pseudo-class="active"] .dk-component-select__trigger,
[data-fidelity] .dk-component-select:is([data-raised], [data-variant="raised"])[data-pseudo-class="focus"] .dk-component-select__trigger { box-shadow: none; }
@media (hover: hover) {
  [data-fidelity] .dk-component-select:is([data-raised], [data-variant="raised"]):not([data-open]) .dk-component-select__trigger:hover:not(:disabled):not(:focus-visible):not(:active),
  [data-fidelity] .dk-component-select__trigger:is([data-raised], [data-variant="raised"]):hover:not(:disabled):not(:focus-visible):not(:active),
  [data-fidelity] .dk-component-select:is([data-raised], [data-variant="raised"]):not([data-open]) .dk-component-select__trigger:hover:not(:disabled):not(:focus-visible):not(:active):has(.dk-component-select__chip:hover),
  [data-fidelity] .dk-component-select__trigger:is([data-raised], [data-variant="raised"]):hover:not(:disabled):not(:focus-visible):not(:active):has(.dk-component-select__chip:hover) { box-shadow: none; }
}
@media (hover: hover) {
  [data-fidelity] .dk-component-select:not([data-open]) .dk-component-select__trigger:hover:not(:disabled) { opacity: .6; }
}
/* Focus is the browser's ring in a wireframe and the strong line in mid-fi,
   open or not (heavier than Drift's open rule, which takes the outline
   off). The line sits 2px out from the wireframe's border box, a pixel
   outside this one; Chrome draws the browser's ring where the wireframe's
   fell with no offset. */
[data-fidelity="wireframe"] .dk-component-select .dk-component-select__trigger:focus-visible {
  outline: revert;
  outline-offset: 0;
}
/* The browser's ring rounds with the box it rings, so the trigger takes the
   wireframe's corner while it shows (nothing else of it paints). */
[data-fidelity="wireframe"] .dk-component-select:not(.dk-component-input__leading .dk-component-select) .dk-component-select__trigger:focus-visible { border-radius: 10px; }
[data-fidelity="wireframe"] .dk-component-select[data-size="small"]:not(.dk-component-input__leading .dk-component-select) .dk-component-select__trigger:focus-visible { border-radius: 8px; }
[data-fidelity="midfi"] .dk-component-select .dk-component-select__trigger:focus-visible {
  outline: 2px solid var(--dk-fidelity-line-strong);
  outline-offset: 3px;
}

/* ── The value: one line in the page's face ───────────────────────────── */
[data-fidelity] .dk-component-select__value {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  line-height: normal;
  font-weight: 400;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* A placeholder reads as a value: the wireframe's default is its label. */
[data-fidelity] .dk-component-select__value[data-empty],
[data-fidelity] .dk-component-select__trigger:disabled .dk-component-select__value[data-empty],
[data-fidelity] :where(.dk-component-select[data-appearance="sentence"]) .dk-component-select__value[data-empty] { color: inherit; font-weight: 400; }
[data-fidelity] .dk-component-select:not([data-size]) .dk-component-select__value { font-size: 14px; }
[data-fidelity] .dk-component-select[data-size="small"] .dk-component-select__value { font-size: 13px; }
/* One line, except where a multi select's chips stand in for it. */
[data-fidelity] .dk-component-select:not([data-multiple][data-selected]) .dk-component-select__value { display: block; }
[data-fidelity] .dk-component-select__value-label { overflow: visible; }
/* The trigger shows the words only, never the row's picture. */
[data-fidelity] .dk-component-select__value-icon,
[data-fidelity] .dk-component-select__value-media { display: none; }

/* ── The chevron: plain, square-ended ─────────────────────────────────── */
[data-fidelity] .dk-component-select__chevron {
  position: absolute;
  right: 14px;
  width: 18px;
  height: 18px;
  color: inherit;
  pointer-events: none;
  transition: none;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
@media (hover: hover) {
  [data-fidelity] .dk-component-select__trigger:hover:not(:disabled) .dk-component-select__chevron { color: inherit; }
}
[data-fidelity] .dk-component-select[data-size="small"] .dk-component-select__chevron { right: 8px; width: 14px; height: 14px; }

/* ── The menu: a list, never a grid's cards or a phone's sheet ───────── */
[data-fidelity] .dk-component-select__menu:not([data-layout="grid"]):not([data-sheet-open]) {
  --dk-component-menu-enter-duration: 0ms;
  --dk-component-menu-exit-duration: 0ms;
  -webkit-font-smoothing: auto;
  width: max-content;
  max-width: 340px;
  max-height: 280px;
  padding: 6px;
  border: 1px solid var(--dk-fidelity-line);
  border-radius: 10px;
  background: var(--dk-fidelity-surface);
  box-shadow: var(--dk-fidelity-shadow);
  color: var(--dk-fidelity-text);
  font-family: inherit;
  font-size: 16px;
  line-height: normal;
  overflow-x: hidden;
  overflow-y: auto;
}
[data-fidelity] .dk-component-select__menu:not([data-layout="grid"]):not([data-sheet-open]):not([hidden]) { display: flex; flex-direction: column; gap: 2px; }
[data-fidelity] .dk-component-select__menu[data-size="small"]:not([data-layout="grid"]):not([data-sheet-open]):not([hidden]) { padding: 4px; }

/* ── A row ────────────────────────────────────────────────────────────── */
[data-fidelity] .dk-component-select__menu:not([data-layout="grid"]):not([data-sheet-open]) .dk-component-select__option {
  justify-content: flex-start;
  gap: 10px;
  flex: 0 1 auto;
  padding: 8px 10px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  color: inherit;
  transition: none;
}
[data-fidelity] .dk-component-select__menu[data-size="small"]:not([data-layout="grid"]):not([data-sheet-open]) .dk-component-select__option { min-height: 0; padding: 7px 10px; }
[data-fidelity] .dk-component-select__menu[data-size="large"]:not([data-layout="grid"]):not([data-sheet-open]) .dk-component-select__option { font-size: 16px; line-height: normal; }
/* The words keep the menu's colour in every state. */
[data-fidelity] .dk-component-select__menu[data-nav="keyboard"] .dk-component-select__option[data-active]:not(:disabled),
[data-fidelity] .dk-component-select__option:active:not(:disabled),
[data-fidelity] .dk-component-select__menu[data-nav="keyboard"] .dk-component-select__option[data-active]:not(:disabled):where(:not(.dk-component-select__menu:not([aria-multiselectable="true"], [data-layout="grid"]) [aria-selected="true"], .dk-component-select__list:not([aria-multiselectable="true"]) [aria-selected="true"])),
[data-fidelity] .dk-component-select__option:active:not(:disabled):where(:not(.dk-component-select__menu:not([aria-multiselectable="true"], [data-layout="grid"]) [aria-selected="true"], .dk-component-select__list:not([aria-multiselectable="true"]) [aria-selected="true"])),
[data-fidelity] .dk-component-select__option:disabled { color: inherit; }
@media (hover: hover) {
  [data-fidelity] .dk-component-select__option:hover:not(:disabled),
  [data-fidelity] .dk-component-select__menu[data-nav="keyboard"] .dk-component-select__option:hover:not(:disabled):not([data-active]),
  [data-fidelity] .dk-component-select__option:hover:not(:disabled):where(:not(.dk-component-select__menu:not([aria-multiselectable="true"], [data-layout="grid"]) [aria-selected="true"], .dk-component-select__list:not([aria-multiselectable="true"]) [aria-selected="true"])) { color: inherit; }
}
[data-fidelity] .dk-component-select__option:active:not(:disabled) { transform: none; }
/* The fills: under the pointer (not while the keyboard drives), the
   keyboard's row, and the chosen row over both, as the wireframe's. A press
   adds nothing. */
[data-fidelity] .dk-component-select__menu[data-nav="keyboard"] .dk-component-select__option[data-active]:not(:disabled) { background: var(--dk-fidelity-row-hover); }
@media (hover: hover) {
  [data-fidelity] .dk-component-select__menu:not([data-nav="keyboard"]) .dk-component-select__option:hover:not(:disabled) { background: var(--dk-fidelity-row-hover); }
}
@media (hover: hover) {
  [data-fidelity] .dk-component-select__menu[data-nav="keyboard"] .dk-component-select__option:hover:not(:disabled):not([data-active]) { background: transparent; }
}
[data-fidelity] .dk-component-select__menu:not([hidden]):not([data-layout="grid"]) .dk-component-select__option[aria-selected="true"]:not(:disabled) { background: var(--dk-fidelity-row-selected); }

[data-fidelity] .dk-component-select__option-main { flex: 1 1 auto; gap: 10px; }
[data-fidelity] .dk-component-select__menu:not([data-layout="grid"]) .dk-component-select__option-label { padding: 8px 0; font-size: 15px; overflow: visible; }
[data-fidelity] .dk-component-select__menu:not([data-size]):not([data-layout="grid"]) .dk-component-select__option-label { font-size: 14px; }
[data-fidelity] .dk-component-select__menu[data-size="small"]:not([data-layout="grid"]) .dk-component-select__option-label { font-size: 13px; }
[data-fidelity] .dk-component-select__option-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
[data-fidelity] .dk-component-select__menu:not([data-layout="grid"]) .dk-component-select__option-text .dk-component-select__option-label {
  padding: 0;
  font-size: 14px;
  font-weight: 600;
}
[data-fidelity] .dk-component-select__menu:not([data-layout="grid"]) .dk-component-select__option-desc {
  font-size: 12px;
  font-weight: 400;
  opacity: .6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-fidelity="wireframe"] .dk-component-select__option-desc,
[data-fidelity="wireframe"] .dk-component-select__option:disabled .dk-component-select__option-desc { color: inherit; }
[data-fidelity="midfi"] .dk-component-select__option-desc,
[data-fidelity="midfi"] .dk-component-select__option:disabled .dk-component-select__option-desc { color: var(--dk-fidelity-muted); }
[data-fidelity="midfi"] .dk-component-select__menu:not([data-layout="grid"]) .dk-component-select__option-desc { opacity: 1; }
[data-fidelity] .dk-component-select__option-meta {
  font-size: 12px;
  font-weight: 600;
  color: inherit;
  white-space: nowrap;
  font-variant-numeric: normal;
}

/* The picture: the crossed box the icon draws (wireframe); the picture
   tile and its glyph (mid-fi). */
[data-fidelity] .dk-component-select__option-icon {
  position: relative;
  display: block;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--dk-fidelity-line);
  border-radius: 6px;
  color: inherit;
}
[data-fidelity] .dk-component-select__menu[data-nav="keyboard"] .dk-component-select__option[data-active]:not(:disabled) .dk-component-select__option-icon,
[data-fidelity] .dk-component-select__option:disabled .dk-component-select__option-icon { color: inherit; }
@media (hover: hover) {
  [data-fidelity] .dk-component-select__option:hover:not(:disabled) .dk-component-select__option-icon,
  [data-fidelity] .dk-component-select__menu[data-nav="keyboard"] .dk-component-select__option:hover:not(:disabled) .dk-component-select__option-icon { color: inherit; }
}
[data-fidelity] .dk-component-select__option-icon > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
[data-fidelity="midfi"] .dk-component-select__option-icon { border: 0; border-radius: 10px; background: var(--dk-fidelity-tile); }
[data-fidelity="midfi"] .dk-component-select__option-icon > svg { display: none; }
[data-fidelity="midfi"] .dk-component-select__option-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(38%, 26px);
  height: min(38%, 26px);
  background: var(--dk-fidelity-muted);
  opacity: .4;
  -webkit-mask: var(--dk-fidelity-image-glyph) center/contain no-repeat;
  mask: var(--dk-fidelity-image-glyph) center/contain no-repeat;
}

/* The tick: only on a chosen row of a multi select, never on its exclusive
   row ("All"), which says so by its fill. */
[data-fidelity] .dk-component-select__menu:not([data-layout="grid"]) .dk-component-select__check { display: none; }
[data-fidelity] .dk-component-select__menu[aria-multiselectable="true"]:not([data-layout="grid"]) .dk-component-select__option[aria-selected="true"]:not([data-exclusive]) .dk-component-select__check,
[data-fidelity] .dk-component-select__list[aria-multiselectable="true"] .dk-component-select__option[aria-selected="true"]:not([data-exclusive]) .dk-component-select__check {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  opacity: 1;
  color: inherit;
  stroke-width: 2;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

/* ── The search field: the menu's head ────────────────────────────────────
   The wireframe's menu scrolls itself, its field stuck to the top; Drift's
   holds the field still and scrolls the list. Chrome draws the two
   differently at the rounded corners, so here the menu is the scroller
   again: the field sticky, the list in the menu's flow. */
[data-fidelity] .dk-component-select__menu[data-searchable]:not([data-layout="grid"]):not([data-sheet-open]):not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  overflow-x: hidden;
  overflow-y: auto;
}
[data-fidelity] .dk-component-select__menu:not([data-layout="grid"]) .dk-component-select__search {
  position: sticky;
  top: -6px;
  gap: 8px;
  margin: -6px -6px 4px;
  padding: 15px 12px;
  border-bottom: 1px solid var(--dk-fidelity-line);
  border-radius: 9px 9px 0 0;
  background: var(--dk-fidelity-surface);
}
[data-fidelity] .dk-component-select__search-icon { width: 16px; height: 16px; color: inherit; opacity: .5; margin-inline-start: 0; }
/* The full look's focus rule (a primary line grown over the hairline) is not
   the wireframe's: the head keeps its line as it is. */
[data-fidelity] .dk-component-select__search::after { display: none; }
[data-fidelity] .dk-component-select__search:focus-within .dk-component-select__search-icon { color: inherit; }
[data-fidelity] .dk-component-select__search-icon > svg { width: 16px; height: 16px; }
[data-fidelity] .dk-component-select__menu:not([data-size="small"]) .dk-component-select__search-input {
  font-family: inherit;
  font-size: 15px;
  line-height: normal;
  color: currentColor;
}
[data-fidelity] .dk-component-select__menu:not([data-size]) .dk-component-select__search-input { font-size: 14px; }
[data-fidelity] .dk-component-select__menu[data-size="small"] .dk-component-select__search-input { font-size: 13px; line-height: normal; }
[data-fidelity] .dk-component-select__search-input::placeholder { color: currentColor; opacity: .5; }
[data-fidelity] .dk-component-select__menu[data-searchable]:not([data-layout="grid"]) .dk-component-select__list {
  display: flex;
  flex-direction: column;
  flex: none;
  gap: 2px;
  min-height: auto;
  margin-inline: 0;
  padding: 0;
  overflow: visible;
}
[data-fidelity] .dk-component-select__menu[data-searchable] .dk-component-select__list > * { margin-inline: 0; width: auto; }
/* A search that matches nothing shows only the field, as the wireframe's
   did: no line saying so, and the empty list takes no room (not even the
   menu's 2px gap under the field). Nor does a list with no options. */
[data-fidelity] .dk-component-select__empty,
[data-fidelity] .dk-component-select__menu[data-loading] .dk-component-select__empty { display: none; }
[data-fidelity] .dk-component-select__menu[data-searchable]:not([data-layout="grid"]) .dk-component-select__list:not(:has(> .dk-component-select__option:not([hidden]), > .dk-component-select__group:not([hidden]))) { display: none; }

/* ═════════════════════════════════ drift-kit:layer components/sidebar/fidelity.css ═════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   Sidebar: the wireframe and mid-fi looks (data-fidelity, 23 Oct 2026).
   A wireframe's rail is a 180px column 14px in from the frame's top, left
   and foot, 10px inside a 1px line, 12px round, with nothing behind it (the
   surface and the look's shadow in mid-fi). The brand is the mark and the
   product's name at 16px 700, 10px apart, 10px in and 14px above the rows.
   A row is its 16px glyph and its words at 13px, 6px apart, 10px inside a
   1px edge that only the current row shows (mid-fi: the current row is the
   tile on the strong line, in the ink; the others are muted). Rows are 4px
   apart; the foot's (Collapse, the theme, Log out) 2px, under the rows'
   last, with the person at the very foot: the avatar beside the name at
   13px 600 and the meta at 11px, faded. Collapsed, the rail is as wide as
   its glyphs. The unread dot is 7px on the glyph's corner, the line's
   colour (the ink in mid-fi).

   A compact device (data-device phone or tablet) gets the bar: 14px in from
   either side and 20px off the foot, at most 520px, 6px by 8px inside a 1px
   line, 14px round, on the look's surface, the slots spread evenly. A slot
   is the glyph over its words at 10px (a tablet: beside them at 13px, the
   bar only as wide as its slots), every slot shown (no More), the
   account's slot its glyph (barIcon) and its word. The account menu
   (.dk-component-sidebar__account-menu, placed by the stylesheet:
   position "css") sits 14px in from the screen's right and 95px off its
   foot (85px on a tablet), 230px wide at least, 8px inside a 1px line,
   12px round, on the surface with the menu's shadow (mid-fi: the look's);
   the person at its head, a 1px rule 4px either side, then its commands
   as rows at 13px, the glyph 8px from the words.

   States are the wireframe's (decision 7): the pointer fades a row to 60%
   (75% in mid-fi) over .12s, a press adds nothing, focus is the browser's
   own ring in a wireframe and the strong line 2px out in mid-fi. The open
   account's slot shows the current row's edge.

   No layers, no clips: the rail, its body and its brand do not clip or
   isolate, and the rail is static in a contained shell. Each of those
   rasterises its glyphs and edges differently from the wireframe's plain
   boxes. Labels are whole words (motion="simple"), never split letters.

   The look defines only what Disko draws: the floating rail (medium),
   collapsed or not, a brand, one section of rows without headings, groups
   or badges, the foot's rows, a person (a row, or a menu on a bar), and
   the bar. Not designed yet, the full look's paint on the look's box: the
   docked variant, small, headings, groups and their flyouts, badges, the
   nested panel, More, the drawer and the tooltips of a collapsed rail.

   Every rule is the Drift selector it overrides, prefixed with the gate,
   so it wins on weight; sizes are fixed px.
   ──────────────────────────────────────────────────────────────────────── */
/* ── The root: its tokens, and the box of a rail ───────────────────────── */
[data-fidelity] .dk-component-sidebar:not([data-size="small"]) {
  --dk-component-sidebar-width: 180px;
  --dk-component-sidebar-item-icon-size: 16px;
  --dk-component-sidebar-brand-mark-size: 28px;
  --dk-component-sidebar-bar-icon-size: 16px;
  --dk-component-sidebar-bar-current-surface: transparent;
  --dk-component-sidebar-bar-item-surface-hover: transparent;
  --dk-component-sidebar-bar-item-surface-active: transparent;
  --dk-component-sidebar-bar-slots: 99;
  --dk-component-sidebar-duration: 0s;
}
[data-fidelity] .dk-component-sidebar {
  -webkit-font-smoothing: auto;
  color: inherit;
  font-family: inherit;
}
[data-fidelity] .dk-component-sidebar:not([data-presentation="bar"]):not([data-nested]) {
  gap: 4px;
  padding: 10px;
  overflow: visible;
  isolation: auto;
}

/* ── The rail ──────────────────────────────────────────────────────────── */
[data-fidelity] .dk-component-sidebar[data-variant="floating"]:not([data-presentation="bar"]) {
  margin: 14px 0 14px 14px;
  background: transparent;
  border: 1px solid var(--dk-fidelity-line);
  border-radius: 12px;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
[data-fidelity="midfi"] .dk-component-sidebar[data-variant="floating"]:not([data-presentation="bar"]) {
  background: var(--dk-fidelity-surface);
  box-shadow: var(--dk-fidelity-shadow);
}
[data-fidelity] .dk-component-sidebar[data-variant="floating"] > .dk-glass-decor { display: none; }
/* Static in a contained shell, and its own height: positioned, its edge and
   shadow rasterise differently. */
[data-fidelity] .dk-component-app-shell[data-contained] > .dk-component-sidebar:not([data-presentation="bar"]):not([data-presentation="drawer"]) { position: static; }
[data-fidelity] .dk-component-app-shell[data-contained] > .dk-component-sidebar[data-variant="floating"]:not([data-presentation="bar"]):not([data-presentation="drawer"]) { height: auto; }

/* ── The head: the brand ───────────────────────────────────────────────── */
[data-fidelity] .dk-component-sidebar__head {
  min-height: 0;
  padding: 10px 10px 14px;
  border-bottom: 0;
  margin-bottom: 0;
}
[data-fidelity] .dk-component-sidebar__brand {
  gap: 10px;
  border-radius: 0;
  overflow: visible;
}
[data-fidelity] .dk-component-sidebar__mark { flex: none; display: block; }
[data-fidelity] .dk-component-sidebar__wordmark {
  margin-inline-start: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  color: inherit;
  transition: none;
}

/* ── The body and the foot ─────────────────────────────────────────────── */
[data-fidelity] .dk-component-sidebar:not([data-nested]):not([data-presentation="drawer"]) > .dk-component-sidebar__body {
  gap: 4px;
  margin-inline: 0;
  padding: 0;
  overflow: visible;
}
[data-fidelity] .dk-component-sidebar__head + .dk-component-sidebar__body { padding-top: 0; }
[data-fidelity] .dk-component-sidebar__section,
[data-fidelity] .dk-component-sidebar__list { gap: 4px; }
[data-fidelity] .dk-component-sidebar__foot {
  gap: 2px;
  margin-top: 0;
  padding-top: 10px;
  border-top: 0;
}
[data-fidelity] .dk-component-sidebar__foot .dk-component-sidebar__list { gap: 2px; }
/* No sliding fill: the current row draws its own edge. */
[data-fidelity] .dk-component-sidebar__indicator { visibility: hidden; }

/* ── A row (a group's children keep the full look) ─────────────────────── */
[data-fidelity] .dk-component-sidebar__item:not(.dk-component-sidebar__list[data-level="2"] *) {
  height: auto;
  padding: 10px;
  gap: 6px;
  border-width: 1px;
  border-style: solid;
  border-radius: 8px;
  font-size: 13px;
  line-height: normal;
  font-weight: inherit;
  transition: opacity .12s ease;
}
[data-fidelity] .dk-component-sidebar__icon:not(.dk-component-sidebar__list[data-level="2"] *) { flex: none; align-self: auto; display: inline-flex; }
[data-fidelity] .dk-component-sidebar__label { transition: none; }

/* A row at rest, under the pointer, pressed: no fill, no edge, the page's
   ink (mid-fi: muted). Disabled is not designed yet. */
[data-fidelity="wireframe"] .dk-component-sidebar__item:not([aria-current]):not([data-current-within]):not([data-sb-carry]),
[data-fidelity="wireframe"] .dk-component-sidebar:not([data-presentation="bar"]) .dk-component-sidebar__item:active:not([aria-current="page"]):not([aria-current="true"]):not([data-current-within]):not([aria-disabled="true"]) {
  border-color: transparent;
  color: inherit;
}
@media (hover: hover) {
  [data-fidelity="wireframe"] .dk-component-sidebar:not([data-presentation="bar"]) .dk-component-sidebar__item:hover:not([aria-current="page"]):not([aria-current="true"]):not([data-current-within]):not([aria-disabled="true"]) {
    border-color: transparent;
    color: inherit;
  }
}
[data-fidelity="midfi"] .dk-component-sidebar__item:not([aria-current]):not([data-current-within]):not([data-sb-carry]),
[data-fidelity="midfi"] .dk-component-sidebar:not([data-presentation="bar"]) .dk-component-sidebar__item:active:not([aria-current="page"]):not([aria-current="true"]):not([data-current-within]):not([aria-disabled="true"]) {
  border-color: transparent;
  color: var(--dk-fidelity-muted);
}
@media (hover: hover) {
  [data-fidelity="midfi"] .dk-component-sidebar:not([data-presentation="bar"]) .dk-component-sidebar__item:hover:not([aria-current="page"]):not([aria-current="true"]):not([data-current-within]):not([aria-disabled="true"]) {
    border-color: transparent;
    color: var(--dk-fidelity-muted);
  }
}
[data-fidelity] .dk-component-sidebar:not([data-presentation="bar"]) .dk-component-sidebar__item:active:not([aria-current="page"]):not([aria-current="true"]):not([data-current-within]):not([aria-disabled="true"]),
[data-fidelity] .dk-component-sidebar:not([data-presentation="bar"]) .dk-component-sidebar__panel .dk-component-sidebar__item:active:not([aria-current="page"]):not([aria-current="true"]):not([data-current-within]):not([aria-disabled="true"]) {
  background: transparent;
  border-color: transparent;
}
@media (hover: hover) {
  [data-fidelity] .dk-component-sidebar:not([data-presentation="bar"]) .dk-component-sidebar__item:hover:not([aria-current="page"]):not([aria-current="true"]):not([data-current-within]):not([aria-disabled="true"]),
  [data-fidelity] .dk-component-sidebar:not([data-presentation="bar"]) .dk-component-sidebar__panel .dk-component-sidebar__item:hover:not([aria-current="page"]):not([aria-current="true"]):not([data-current-within]):not([aria-disabled="true"]) {
    background: transparent;
    border-color: transparent;
  }
}

/* The current row: its edge in the line (mid-fi: the tile on the strong
   line, in the ink). A group holding it is not designed yet. */
[data-fidelity="wireframe"] .dk-component-sidebar[data-indicator] .dk-component-sidebar__item:is([aria-current="page"], [aria-current="true"]),
[data-fidelity="wireframe"] .dk-component-sidebar:not([data-indicator]):not([data-presentation="bar"]) .dk-component-sidebar__item:is([aria-current="page"], [aria-current="true"]):active,
[data-fidelity="wireframe"] .dk-component-sidebar[data-presentation="bar"] .dk-component-sidebar__item:is([aria-current="page"], [aria-current="true"]) {
  background: transparent;
  border-color: var(--dk-fidelity-line);
  color: inherit;
}
@media (hover: hover) {
  [data-fidelity="wireframe"] .dk-component-sidebar:not([data-indicator]):not([data-presentation="bar"]) .dk-component-sidebar__item:is([aria-current="page"], [aria-current="true"]):hover {
    background: transparent;
    border-color: var(--dk-fidelity-line);
    color: inherit;
  }
}
[data-fidelity="midfi"] .dk-component-sidebar[data-indicator] .dk-component-sidebar__item:is([aria-current="page"], [aria-current="true"]),
[data-fidelity="midfi"] .dk-component-sidebar:not([data-indicator]):not([data-presentation="bar"]) .dk-component-sidebar__item:is([aria-current="page"], [aria-current="true"]):active,
[data-fidelity="midfi"] .dk-component-sidebar[data-presentation="bar"] .dk-component-sidebar__item:is([aria-current="page"], [aria-current="true"]) {
  background: var(--dk-fidelity-tile);
  border-color: var(--dk-fidelity-line-strong);
  color: var(--dk-fidelity-ink);
}
@media (hover: hover) {
  [data-fidelity="midfi"] .dk-component-sidebar:not([data-indicator]):not([data-presentation="bar"]) .dk-component-sidebar__item:is([aria-current="page"], [aria-current="true"]):hover {
    background: var(--dk-fidelity-tile);
    border-color: var(--dk-fidelity-line-strong);
    color: var(--dk-fidelity-ink);
  }
}

/* ── The unread dot ────────────────────────────────────────────────────── */
[data-fidelity] .dk-component-sidebar__icon > .dk-component-sidebar__dot,
[data-fidelity] .dk-component-sidebar[data-presentation="bar"] .dk-component-sidebar__dot {
  top: -2px;
  inset-inline-start: auto;
  right: -3px;
  width: 7px;
  height: 7px;
  box-shadow: none;
  background: var(--dk-fidelity-line);
  color: inherit;
}
[data-fidelity="midfi"] .dk-component-sidebar__icon > .dk-component-sidebar__dot,
[data-fidelity="midfi"] .dk-component-sidebar[data-presentation="bar"] .dk-component-sidebar__dot { background: var(--dk-fidelity-ink); }

/* ── The person, at the foot and at the head of the account menu ──────── */
[data-fidelity] .dk-component-sidebar__foot .dk-component-sidebar__account .dk-component-sidebar__user,
[data-fidelity] .dk-component-sidebar__account-menu .dk-component-dropdown__label > .dk-component-sidebar__user {
  height: auto;
  padding: 10px;
  gap: 10px;
  border: 0;
  border-radius: 0;
  transition: none;
}
[data-fidelity] .dk-component-sidebar:not([data-presentation="bar"]) button.dk-component-sidebar__user:active { background: transparent; }
@media (hover: hover) {
  [data-fidelity] .dk-component-sidebar:not([data-presentation="bar"]) button.dk-component-sidebar__user:hover { background: transparent; }
}
[data-fidelity] .dk-component-sidebar__user > .dk-component-avatar,
[data-fidelity] .dk-component-sidebar[data-presentation="bar"] .dk-component-sidebar__user > .dk-component-avatar {
  --_av-size: 32px;
  margin: 0;
  transform: none;
  font-size: 11px;
  font-weight: 700;
}
[data-fidelity] .dk-component-sidebar__user-text { margin-inline-start: 0; gap: 0; transition: none; }
[data-fidelity] .dk-component-sidebar__user-name {
  font-size: 13px;
  font-weight: 600;
  line-height: normal;
  color: inherit;
}
[data-fidelity] .dk-component-sidebar__user-meta {
  font-size: 11px;
  line-height: normal;
  color: inherit;
  opacity: .7;
}
[data-fidelity="midfi"] .dk-component-sidebar__user-meta { color: var(--dk-fidelity-muted); opacity: 1; }

/* ── Collapsed: as wide as the glyphs ──────────────────────────────────── */
[data-fidelity] .dk-component-sidebar[data-collapsed]:not([data-presentation="bar"]):not([data-presentation="drawer"]) { --_sb-w: auto; }
[data-fidelity] .dk-component-sidebar[data-collapsed]:not([data-presentation="bar"]):not([data-presentation="drawer"]) :is(.dk-component-sidebar__label, .dk-component-sidebar__wordmark, .dk-component-sidebar__user-text) { display: none; }
[data-fidelity] .dk-component-sidebar[data-collapsed]:not([data-presentation="bar"]):not([data-presentation="drawer"]) :is(.dk-component-sidebar__item, .dk-component-sidebar__head, .dk-component-sidebar__brand, .dk-component-sidebar__user) { justify-content: center; }
[data-fidelity] .dk-component-sidebar[data-collapsed]:not([data-presentation="bar"]):not([data-presentation="drawer"]) .dk-component-sidebar__body { padding-inline-end: 0; }

/* ── The bar (a phone, and a tablet) ───────────────────────────────────── */
[data-fidelity] .dk-component-sidebar[data-presentation="bar"][data-variant="floating"] {
  inset-inline: 14px;
  bottom: 20px;
  max-width: 520px;
  margin: 0 auto;
  min-height: 0;
  padding: 6px 8px;
  gap: 4px;
  justify-content: space-around;
  border: 1px solid var(--dk-fidelity-line);
  border-radius: 14px;
  box-shadow: none;
  background: var(--dk-fidelity-surface);
  z-index: 10;
  transition: none;
}
[data-fidelity="midfi"] .dk-component-sidebar[data-presentation="bar"][data-variant="floating"] { box-shadow: var(--dk-fidelity-shadow); }
[data-fidelity][data-device="tablet"] .dk-component-sidebar[data-presentation="bar"][data-variant="floating"] {
  width: fit-content;
  max-width: calc(100% - 28px);
  gap: 8px;
}
[data-fidelity] .dk-component-sidebar[data-presentation="bar"] :is(.dk-component-sidebar__more, .dk-component-sidebar__account) {
  flex: 0 1 auto;
  width: auto;
  min-width: auto;
}
[data-fidelity] .dk-component-sidebar[data-presentation="bar"][data-variant="floating"] :is(.dk-component-sidebar__item, .dk-component-sidebar__user) {
  flex: 0 1 auto;
  min-width: 56px;
  gap: 2px;
  height: auto;
  padding: 4px 6px;
  border-width: 1px;
  border-style: solid;
  border-radius: 8px;
  font-size: 10px;
  line-height: normal;
  font-weight: inherit;
}
[data-fidelity="wireframe"] .dk-component-sidebar[data-presentation="bar"][data-variant="floating"] :is(.dk-component-sidebar__item, .dk-component-sidebar__user):not([aria-current]) {
  background: transparent;
  border-color: transparent;
  color: inherit;
}
[data-fidelity="midfi"] .dk-component-sidebar[data-presentation="bar"][data-variant="floating"] :is(.dk-component-sidebar__item, .dk-component-sidebar__user):not([aria-current]) {
  background: transparent;
  border-color: transparent;
  color: var(--dk-fidelity-muted);
}
[data-fidelity][data-device="tablet"] .dk-component-sidebar[data-presentation="bar"][data-variant="floating"] :is(.dk-component-sidebar__item, .dk-component-sidebar__user) {
  flex-direction: row;
  gap: 6px;
  padding: 6px 10px;
  font-size: 13px;
  min-width: auto;
}
[data-fidelity] .dk-component-sidebar[data-presentation="bar"] .dk-component-sidebar__icon {
  width: auto;
  height: auto;
  border-radius: 0;
  align-self: auto;
  transition: none;
}
[data-fidelity] .dk-component-sidebar[data-presentation="bar"] :is(.dk-component-sidebar__label, .dk-component-sidebar__bar-label) {
  font-size: inherit;
  line-height: normal;
  font-weight: inherit;
  overflow: visible;
  max-width: none;
  text-overflow: clip;
}
/* The open account's slot shows the current row's edge. */
[data-fidelity="wireframe"] .dk-component-sidebar .dk-component-sidebar__account[data-open] .dk-component-sidebar__user.dk-component-dropdown__trigger:not([aria-current]) {
  background: transparent;
  border-color: var(--dk-fidelity-line);
}
[data-fidelity="midfi"] .dk-component-sidebar .dk-component-sidebar__account[data-open] .dk-component-sidebar__user.dk-component-dropdown__trigger:not([aria-current]) {
  background: var(--dk-fidelity-tile);
  border-color: var(--dk-fidelity-line-strong);
  color: var(--dk-fidelity-ink);
}
[data-fidelity] .dk-component-sidebar[data-presentation="bar"] :is(.dk-component-sidebar__more, .dk-component-sidebar__account, .dk-component-sidebar__group)[data-open] :is(.dk-component-sidebar__item, .dk-component-sidebar__user) .dk-component-sidebar__icon { background-color: transparent; }

/* ── The account menu: placed by the stylesheet, above the bar ─────────── */
[data-fidelity] .dk-component-dropdown__menu.dk-component-sidebar__account-menu:not([data-sheet-open]) {
  right: 14px;
  bottom: 95px;
  min-width: 230px;
  padding: 8px;
  border-radius: 12px;
  box-shadow: var(--dk-fidelity-menu-shadow);
}
[data-fidelity][data-device="tablet"] .dk-component-dropdown__menu.dk-component-sidebar__account-menu:not([data-sheet-open]) { bottom: 85px; }
[data-fidelity="midfi"] .dk-component-dropdown__menu.dk-component-sidebar__account-menu:not([data-sheet-open]) { box-shadow: var(--dk-fidelity-shadow); }
[data-fidelity] .dk-component-dropdown__menu.dk-component-sidebar__account-menu:not([data-sheet-open]):not([hidden]) { gap: 2px; }
[data-fidelity] .dk-component-sidebar__account-menu .dk-component-dropdown__label {
  padding: 0;
  text-transform: none;
  font-family: inherit;
  font-size: inherit;
  line-height: normal;
  letter-spacing: normal;
  font-weight: inherit;
  color: inherit;
}
[data-fidelity] .dk-component-sidebar__account-menu .dk-component-dropdown__separator {
  height: 1px;
  margin: 4px 0;
  border: 0;
  background: var(--dk-fidelity-line);
  color: inherit;
}
[data-fidelity] .dk-component-dropdown__menu.dk-component-sidebar__account-menu:not([data-sheet-open]) .dk-component-dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
  white-space: nowrap;
  transition: opacity .12s ease;
}
[data-fidelity="midfi"] .dk-component-dropdown__menu.dk-component-sidebar__account-menu:not([data-sheet-open]) .dk-component-dropdown__item:not([data-destructive]) { color: var(--dk-fidelity-muted); }
[data-fidelity] .dk-component-sidebar__account-menu .dk-component-dropdown__item:not([data-destructive]):not([aria-disabled="true"]):not(:disabled) > .dk-component-dropdown__item-icon {
  display: inline-flex;
  color: inherit;
}
[data-fidelity] .dk-component-sidebar__account-menu .dk-component-dropdown__item-icon > svg { width: 16px; height: 16px; }

/* ── Pointer and focus: the wireframe's fade, the browser's ring ───────── */
[data-fidelity] .dk-component-sidebar__item:active:not([aria-disabled="true"]),
[data-fidelity] .dk-component-sidebar[data-presentation="bar"] .dk-component-sidebar__item:active,
[data-fidelity] .dk-component-sidebar[data-presentation="bar"] .dk-component-sidebar__user:active,
[data-fidelity] button.dk-component-sidebar__user:active,
[data-fidelity] .dk-component-sidebar[data-presentation="bar"] .dk-component-sidebar__item:active .dk-component-sidebar__icon { transform: none; }
@media (hover: hover) {
  [data-fidelity] .dk-component-sidebar__item:hover,
  [data-fidelity] button.dk-component-sidebar__user:hover,
  [data-fidelity] .dk-component-sidebar__account-menu .dk-component-dropdown__item:hover { opacity: .6; }
  [data-fidelity="midfi"] .dk-component-sidebar__item:hover,
  [data-fidelity="midfi"] button.dk-component-sidebar__user:hover,
  [data-fidelity="midfi"] .dk-component-sidebar__account-menu .dk-component-dropdown__item:hover { opacity: .75; }
}
[data-fidelity] .dk-component-dropdown__menu.dk-component-sidebar__account-menu:not([data-sheet-open]) .dk-component-dropdown__item:is(:focus-visible):not(:disabled):not([aria-disabled="true"]) { border-color: transparent; }
@media (hover: hover) {
  [data-fidelity] .dk-component-dropdown__menu.dk-component-sidebar__account-menu:not([data-sheet-open]) .dk-component-dropdown__item:is(:hover):not(:disabled):not([aria-disabled="true"]) { border-color: transparent; }
}
[data-fidelity="wireframe"] .dk-component-dropdown__menu.dk-component-sidebar__account-menu:not([data-sheet-open]) .dk-component-dropdown__item:focus-visible:not(:disabled):not([aria-disabled="true"]) {
  outline: revert;
  outline-offset: revert;
}
[data-fidelity="midfi"] .dk-component-dropdown__menu.dk-component-sidebar__account-menu:not([data-sheet-open]) .dk-component-dropdown__item:focus-visible:not(:disabled):not([aria-disabled="true"]) {
  outline: 2px solid var(--dk-fidelity-line-strong);
  outline-offset: 2px;
}
[data-fidelity="wireframe"] :is(.dk-component-sidebar__item, .dk-component-sidebar__user, .dk-component-sidebar__brand):focus-visible {
  outline: revert;
  outline-offset: revert;
}
[data-fidelity="midfi"] :is(.dk-component-sidebar__item, .dk-component-sidebar__user, .dk-component-sidebar__brand):focus-visible {
  outline: 2px solid var(--dk-fidelity-line-strong);
  outline-offset: 2px;
}

/* ═════════════════════════════════ drift-kit:layer components/stepper/fidelity.css ═════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   Stepper: the wireframe and mid-fi looks (data-fidelity, 23 Oct 2026).
   A wireframe's stepper is one row, never wrapped: each step a 26px ring
   in the look's line with its number at 12px 600, its words 13px beside it
   8px away, the steps 20px apart (12px on a phone). The current step's
   ring is 2px and its words 700; every other step sits at 50%. A completed
   step's ring is empty but for the wireframe's drawn tick (the look's line;
   mid-fi: the ink), never Drift's glyph. A row longer than its room is
   clipped at the edge, as the wireframe's is.

   The device, not the width, decides the words: on a phone or a tablet
   (data-device on the page) only the current step keeps them (the others
   stay for a screen reader), and on a desktop every step does, even where
   the 480px narrow switch (data-narrow) has measured the stepper narrow.

   What only a screen reader hears (the hidden words, each step's state,
   the announcement) is a box of no size in the flow, not the full look's
   1px clipped box positioned out of it: a positioned box inside a faded
   step changes how Chrome rasterises the step, so the wireframe's pixels
   would move. The ring and the words are 8px apart by the words' own
   margin, so a box of no size between them adds nothing.

   The look defines only what Disko draws: the inline variant, horizontal,
   medium, its steps upcoming, current and complete, and a finished flow
   (current = steps.length). Small and large draw as medium (no rule is
   sized). Hidden labels (data-labels="hidden") keep the full look's
   screen-reader box: no rule here reaches their words. Not designed yet,
   so drawn in the full look: the numbered, dots and segments variants,
   vertical, error, optional, descriptions, and steps you can click back to.

   Static, not relative: a positioned box rasterises its edges and glyphs
   differently from the wireframe's plain one. Every rule is the Drift
   selector it overrides, prefixed with the gate, so it wins on weight.
   ──────────────────────────────────────────────────────────────────────── */
[data-fidelity] .dk-component-stepper[data-variant="inline"]:not([data-orientation="vertical"]) { font-family: inherit; }

/* ── The row: one line, clipped, 20px between steps (12px on a phone) ─── */
[data-fidelity] .dk-component-stepper[data-variant="inline"]:not([data-orientation="vertical"]) .dk-component-stepper__list,
[data-fidelity] .dk-component-stepper[data-narrow][data-variant="inline"]:not([data-orientation="vertical"]) .dk-component-stepper__list {
  flex-wrap: nowrap;
  align-items: center;
  gap: 20px;
  min-width: 0;
  overflow: hidden;
}
[data-fidelity][data-device="phone"] .dk-component-stepper[data-variant="inline"]:not([data-orientation="vertical"]) .dk-component-stepper__list,
[data-fidelity][data-device="phone"] .dk-component-stepper[data-narrow][data-variant="inline"]:not([data-orientation="vertical"]) .dk-component-stepper__list { gap: 12px; }

/* ── A step: its ring and its words, 8px apart, at 50% unless current ─── */
[data-fidelity] .dk-component-stepper[data-variant="inline"]:not([data-orientation="vertical"]) .dk-component-stepper__step,
[data-fidelity] .dk-component-stepper[data-narrow][data-variant="inline"]:not([data-orientation="vertical"]) .dk-component-stepper__step[data-state="current"] {
  position: static;
  flex: 0 1 auto;
  min-width: 0;
}
[data-fidelity] .dk-component-stepper[data-variant="inline"]:not([data-orientation="vertical"]) .dk-component-stepper__step:not([data-state="current"]) { opacity: .5; }
[data-fidelity] .dk-component-stepper[data-variant="inline"]:not([data-orientation="vertical"]) .dk-component-stepper__target {
  gap: 0;
  max-width: none;
  padding: 0;
  border-radius: 0;
}

/* ── The ring ──────────────────────────────────────────────────────────── */
[data-fidelity] .dk-component-stepper[data-variant="inline"]:not([data-orientation="vertical"]) .dk-component-stepper__indicator {
  position: relative;
  z-index: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  border: 1px solid var(--dk-fidelity-line);
  border-radius: 50%;
  background: none;
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: inherit;
  font-variant-numeric: normal;
  transition: none;
}
[data-fidelity] .dk-component-stepper[data-variant="inline"]:not([data-orientation="vertical"]) .dk-component-stepper__step[data-state="current"] .dk-component-stepper__indicator { border-width: 2px; }
[data-fidelity] .dk-component-stepper[data-variant="inline"]:not([data-orientation="vertical"]) .dk-component-stepper__indicator svg { display: none; }
[data-fidelity] .dk-component-stepper[data-variant="inline"]:not([data-orientation="vertical"]) .dk-component-stepper__step[data-state="complete"] .dk-component-stepper__indicator::after {
  content: '';
  position: absolute;
  left: 9px;
  top: 6px;
  width: 5px;
  height: 9px;
  border: solid var(--dk-fidelity-line);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
[data-fidelity="midfi"] .dk-component-stepper[data-variant="inline"]:not([data-orientation="vertical"]) .dk-component-stepper__step[data-state="complete"] .dk-component-stepper__indicator::after { border-color: var(--dk-fidelity-ink); }

/* ── The words ─────────────────────────────────────────────────────────── */
/* (A narrow stepper's words take theirs in the rules on the narrow switch,
   below.) */
[data-fidelity] .dk-component-stepper[data-variant="inline"]:not([data-orientation="vertical"]):not([data-labels="hidden"]):not([data-narrow]) .dk-component-stepper__step .dk-component-stepper__text { margin-left: 8px; }
[data-fidelity] .dk-component-stepper[data-variant="inline"]:not([data-orientation="vertical"]) .dk-component-stepper__label {
  font-size: 13px;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
  white-space: nowrap;
  overflow-wrap: normal;
  transition: none;
}
[data-fidelity] .dk-component-stepper[data-variant="inline"]:not([data-orientation="vertical"]) .dk-component-stepper__step[data-state="current"] .dk-component-stepper__label { font-weight: 700; }
/* The narrow switch does not decide the words under fidelity: a narrow
   stepper keeps every step's words, and the current step's sit as wide as
   they are. */
[data-fidelity] .dk-component-stepper[data-narrow][data-variant="inline"]:not([data-orientation="vertical"]):not([data-labels="hidden"]) .dk-component-stepper__step:not([data-state="current"]) .dk-component-stepper__text {
  position: static;
  width: auto;
  height: auto;
  margin: 0 0 0 8px;
  padding: 0;
  overflow: visible;
  clip-path: none;
  white-space: normal;
  border: 0;
}
[data-fidelity] .dk-component-stepper[data-narrow][data-variant="inline"]:not([data-orientation="vertical"]):not([data-labels="hidden"]) .dk-component-stepper__step[data-state="current"] .dk-component-stepper__text {
  width: auto;
  max-width: none;
  margin-left: 8px;
}
/* The device does: on a phone or a tablet only the current step keeps its
   words on the screen. */
[data-fidelity]:is([data-device="phone"], [data-device="tablet"]) .dk-component-stepper[data-variant="inline"]:not([data-orientation="vertical"]):not([data-labels="hidden"]) .dk-component-stepper__step:not([data-state="current"]) .dk-component-stepper__text,
[data-fidelity]:is([data-device="phone"], [data-device="tablet"]) .dk-component-stepper[data-narrow][data-variant="inline"]:not([data-orientation="vertical"]):not([data-labels="hidden"]) .dk-component-stepper__step:not([data-state="current"]) .dk-component-stepper__text {
  position: static;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: none;
  white-space: nowrap;
  border: 0;
}

/* ── For a screen reader only: each step's state and the announcement ── */
[data-fidelity] .dk-component-stepper[data-variant="inline"]:not([data-orientation="vertical"]) .dk-component-stepper__state,
[data-fidelity] .dk-component-stepper[data-variant="inline"]:not([data-orientation="vertical"]) > .dk-component-stepper__status {
  position: static;
  display: block;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: none;
  white-space: nowrap;
  border: 0;
}

/* ════════════════════════════════════ drift-kit:layer components/tabs/fidelity.css ════════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   Tabs: the wireframe and mid-fi looks (data-fidelity, 23 Oct 2026).
   A wireframe's strip of tabs is the words, 14px in the page's own face,
   28px apart on a 1px line in the look's line colour. A tab is 4px above
   its words and 10px below, 2px either side, at 55%; the selected tab is
   600 and full strength, and draws its own 2px line under it, overlapping
   the strip's line by a pixel (there is no sliding bar, so nothing glides).
   A count is plain text 6px after the words at 60% (75% on the selected
   tab; mid-fi: the muted ink, full strength until selected). A glyph sits
   6px before the words. With fullWidth (Disko asks for it on a phone) the
   tabs share the strip with no space between them. The pointer brings an
   unselected tab up to 85% at once, with no easing, as the wireframe's do;
   a press does nothing; focus is the browser's own ring in a wireframe and
   the strong line in mid-fi, both inside the tab, where the strip's own
   scroll cannot clip them.

   The look defines only what Disko draws: medium, selected and not, with
   or without fullWidth, words, a glyph and a count. Not designed yet: the
   small and large sizes (drawn as medium), and a disabled tab (the
   unselected look, with no pointer).

   Static, not relative: a positioned root rasterises its edges and glyphs
   differently from the wireframe's plain box. Every rule is the Drift
   selector it overrides, prefixed with the gate, so it wins on weight.
   ──────────────────────────────────────────────────────────────────────── */
[data-fidelity] .dk-component-tabs {
  position: static;
  gap: 28px;
  box-shadow: none;
  border-bottom: 1px solid var(--dk-fidelity-line);
  font-family: inherit;
}
[data-fidelity] .dk-component-tabs[data-full-width] { gap: 0; }

/* ── A tab: its words, padded, with a 2px line of its own ─────────────── */
[data-fidelity] .dk-component-tabs__tab {
  position: static;
  z-index: auto;
  height: auto;
  gap: 0;
  padding: 4px 2px 10px;
  margin: 0 0 -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-size: 14px;
  line-height: inherit;
  color: inherit;
  opacity: .55;
  transition: none;
}
[data-fidelity] .dk-component-tabs__tab:not([aria-selected="true"]) { font-weight: inherit; }
[data-fidelity] .dk-component-tabs__tab:has(> .dk-component-tabs__icon) { gap: 6px; }
[data-fidelity] .dk-component-tabs__tab[aria-selected="true"] {
  color: inherit;
  font-weight: 600;
  border-bottom-color: var(--dk-fidelity-line);
  opacity: 1;
}
[data-fidelity] .dk-component-tabs__tab:disabled { color: inherit; cursor: default; }
/* No preview line under a hovered tab, and no press. */
[data-fidelity] .dk-component-tabs__tab::after { display: none; }
[data-fidelity] .dk-component-tabs__tab > :is(.dk-component-tabs__icon, .dk-component-tabs__label, .dk-component-tabs__count) { transition: none; }
[data-fidelity] .dk-component-tabs__tab:active:not(:disabled) > :is(.dk-component-tabs__icon, .dk-component-tabs__label, .dk-component-tabs__count) { transform: none; }

/* ── The bar: none. The selected tab's own line marks it, so nothing
   slides from one tab to the next. ───────────────────────────────────── */
[data-fidelity] .dk-component-tabs__indicator,
[data-fidelity] .dk-component-tabs__indicator[hidden] { display: none; }

/* ── A count: plain text after the words, never a pill ────────────────── */
[data-fidelity] .dk-component-tabs__count {
  display: inline;
  min-width: 0;
  height: auto;
  padding: 0;
  margin-left: 6px;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-variant-numeric: tabular-nums;
  opacity: .6;
}
[data-fidelity] .dk-component-tabs__tab[aria-selected="true"] .dk-component-tabs__count {
  background: none;
  color: inherit;
  opacity: .75;
}
[data-fidelity="midfi"] .dk-component-tabs__tab:not([aria-selected="true"]) .dk-component-tabs__count {
  color: var(--dk-fidelity-muted);
  opacity: 1;
}
[data-fidelity="midfi"] .dk-component-tabs__tab[aria-selected="true"] .dk-component-tabs__count {
  color: var(--dk-fidelity-muted);
  opacity: .75;
}

/* ── Pointer and focus ─────────────────────────────────────────────────── */
@media (hover: hover) {
  [data-fidelity] .dk-component-tabs__tab:not([aria-selected="true"]):not(:disabled):hover { color: inherit; }
}
[data-fidelity] .dk-component-tabs__tab:not([aria-selected="true"]):not(:disabled):not([aria-disabled="true"]):active { color: inherit; }
@media (hover: hover) {
  [data-fidelity] .dk-component-tabs__tab:not([aria-selected="true"]):not(:disabled):hover { opacity: .85; }
}
[data-fidelity="wireframe"] .dk-component-tabs__tab:focus-visible {
  outline: revert;
  outline-offset: -2px;
}
[data-fidelity="midfi"] .dk-component-tabs__tab:focus-visible {
  outline: 2px solid var(--dk-fidelity-line-strong);
  outline-offset: -2px;
}

/* ═════════════════════════════════════ drift-kit:layer components/tag/fidelity.css ═════════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   Tag: the wireframe and mid-fi looks (data-fidelity, 22 Oct 2026).
   A wireframe's chip: a 1px line in the look's line colour around 12px
   text in the page's own face, weight and colour, 9px by 10px of air and a
   6px corner; small is 11px text, 4px by 8px
   and a 5px corner. Mid-fi fills it with the surface and rounds it to 8px.
   Solid is filled with the line (wireframe) or the ink (mid-fi), the words
   cut out of it in the surface colour. Status and hue are the full look's:
   a wireframe has no colour to spend on them. Every rule is the Drift
   selector it overrides, prefixed with the gate, so it wins on weight.
   ──────────────────────────────────────────────────────────────────────── */
[data-fidelity] .dk-component-tag {
  gap: 6px;
  padding: 9px 10px;
  border: 1px solid var(--dk-fidelity-line);
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 12px;
  line-height: normal;
  font-weight: inherit;
}
[data-fidelity="midfi"] .dk-component-tag {
  border-radius: 8px;
  background: var(--dk-fidelity-surface);
}

/* ── Size: small 11px; large is the page's 14px ─────────────────────────── */
[data-fidelity] .dk-component-tag[data-size="small"] { padding: 4px 8px; font-size: 11px; border-radius: 5px; }
[data-fidelity] .dk-component-tag[data-size="large"] { font-size: 14px; }

/* ── Solid: filled, the words cut out of it ─────────────────────────────── */
[data-fidelity="wireframe"] .dk-component-tag[data-variant="solid"] {
  background: var(--dk-fidelity-line);
  -webkit-text-fill-color: var(--dk-fidelity-surface);
}
[data-fidelity="midfi"] .dk-component-tag[data-variant="solid"] {
  background: var(--dk-fidelity-ink);
  -webkit-text-fill-color: var(--dk-fidelity-ink-inverse);
}

/* ── The words stay whole (6 Nov 2026) ──────────────────────────────────
   A wireframe tag is drawn as it was before the text part: its words set
   its width and never shrink or clip in a squeezed row. The cap and the
   ellipsis are the full look's. */
[data-fidelity] .dk-component-tag:only-child:has(> .dk-component-tag__text) { max-width: none; }
[data-fidelity] .dk-component-tag__text { min-width: auto; overflow: visible; text-overflow: clip; }

/* ── The parts: a dot and an icon in the text's colour ──────────────────── */
[data-fidelity] .dk-component-tag__dot { background: currentColor; }

/* ═══════════════════════════════════ drift-kit:layer components/toast/fidelity.css ═══════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────────
   Toast: the wireframe and mid-fi looks (data-fidelity, 23 Oct 2026).
   A wireframe's toast is one line in a pill of the ink: its words in the
   inverse ink, 13px at 500 on one line, 11px by 12px of air (14px before
   the words), 10px between the words and a bare 14px cross at 75%, a 1px
   edge in the ink, 10px round, the toast shadow (mid-fi: the skin's). It
   arrives and goes with no motion.

   Contained (a region the helper made in a container, data-contained),
   the region is no box (display: contents) and the toast is absolute in
   the container: centred, 20px above its foot, 77px on a tablet and 87px
   on a phone (data-device), above the navigation's bar, z-index 40, under
   a dialog's scrim.

   The look defines only what Disko draws: the compact variant with no
   glyph and its close button. Not designed yet: the default card, the
   compact glyph circle and a status's tint (they keep the full look's
   paint), and an uncontained region, which keeps the full look's place
   on the screen.

   Every rule is the Drift selector it overrides, prefixed with the gate,
   so it wins on weight (the cross outweighs Icon button's looks too);
   sizes are fixed px.
   ──────────────────────────────────────────────────────────────────────── */

/* ── A contained region is no box: its toasts sit in the container ────── */
[data-fidelity] .dk-component-toast-region[data-contained] { display: contents; }
[data-fidelity] .dk-component-toast-region[data-contained][hidden] { display: none; }

/* ── The pill ──────────────────────────────────────────────────────────── */
[data-fidelity] .dk-component-toast-region .dk-component-toast[data-variant="compact"] {
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto;
  max-width: none;
  padding: 11px 12px 11px 14px;
  border: 1px solid var(--dk-fidelity-ink);
  border-radius: 10px;
  background: var(--dk-fidelity-ink);
  color: var(--dk-fidelity-ink-inverse);
  box-shadow: var(--dk-fidelity-toast-shadow);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: visible;
  animation: none;
}
[data-fidelity] .dk-component-toast-region .dk-component-toast[data-variant="compact"][hidden] { display: none; }
[data-fidelity] .dk-component-toast-region .dk-component-toast[data-variant="compact"]::before,
[data-fidelity] .dk-component-toast-region .dk-component-toast[data-variant="compact"]::after { content: none; }

/* ── Where it sits in its container ───────────────────────────────────── */
[data-fidelity] .dk-component-toast-region[data-contained] .dk-component-toast[data-variant="compact"] {
  position: absolute;
  left: 50%;
  bottom: 20px;
  z-index: 40;
  transform: translateX(-50%);
}
[data-fidelity][data-device="tablet"] .dk-component-toast-region[data-contained] .dk-component-toast[data-variant="compact"] { bottom: 77px; }
[data-fidelity][data-device="phone"] .dk-component-toast-region[data-contained] .dk-component-toast[data-variant="compact"] { bottom: 87px; }

/* ── Its parts: the panel and the text are no boxes, so the words and the
   cross are the pill's own two items ─────────────────────────────────── */
[data-fidelity] .dk-component-toast[data-variant="compact"] .dk-component-toast__panel,
[data-fidelity] .dk-component-toast[data-variant="compact"] .dk-component-toast__text { display: contents; }
[data-fidelity] .dk-component-toast-region .dk-component-toast[data-variant="compact"] .dk-component-toast__title {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
  overflow-wrap: normal;
}

/* ── The cross: a bare glyph in the words' colour at 75%, in every state
   (the pointer, a press and focus change nothing but the browser's own
   ring), through Icon button's own slots ──────────────────────────────── */
[data-fidelity] .dk-component-toast-region .dk-component-toast[data-variant="compact"] .dk-component-toast__panel > .dk-component-icon-button.dk-component-toast__close {
  --_ib-size: 14px;
  --_ib-icon-size: 14px;
  --_ib-radius: 0px;
  --_ib-border-width: 0px;
  --_ib-border: transparent;
  --_ib-border-hover: initial;
  --_ib-border-active: initial;
  --_ib-bg: transparent;
  --_ib-bg-hover: transparent;
  --_ib-bg-active: transparent;
  --_ib-icon: currentColor;
  --_ib-icon-hover: currentColor;
  --_ib-icon-active: currentColor;
  --_ib-lift: none;
  --_ib-lift-hover: initial;
  --_ib-lift-active: initial;
  --_ib-ring: transparent;
  flex: 0 1 auto;
  margin: 0;
  opacity: .75;
  transform: none;
  transition: none;
  outline: revert;
  outline-offset: revert;
}
[data-fidelity] .dk-component-toast-region .dk-component-toast[data-variant="compact"] .dk-component-toast__close svg {
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

/* ═══════════════════════════════ drift-kit:layer GENERATED inverse mirror ═══════════════════════════════ */
/* Generated by scripts/build.js, never edited by hand: every mapped colour
   resolved as the opposite theme and scoped to [data-tone="inverse"], plus the
   ladder re-points so levels step inside one. 227 source blocks. */
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-backdrop-black: #000000cc;
  --dk-surface-backdrop-transparent: #ffffff00;
  --dk-surface-base-black: var(--dk-color-base-black);
  --dk-surface-base-white: var(--dk-color-base-white);
  --dk-surface-card-default: var(--dk-color-base-white);
  --dk-surface-card-focus: var(--dk-color-neutral-50);
  --dk-surface-card-hover: var(--dk-color-neutral-25);
  --dk-surface-card-secondary: var(--dk-color-neutral-25);
  --dk-surface-card-tertiary: var(--dk-color-neutral-1000);
  --dk-surface-default-body: var(--dk-color-base-white);
  --dk-surface-default-body-reverse: var(--dk-color-neutral-1100);
  --dk-surface-disabled-default: var(--dk-color-neutral-300);
  --dk-surface-disabled-subtle: var(--dk-color-neutral-25);
  --dk-surface-error-default: var(--dk-color-error-500);
  --dk-surface-error-focus: var(--dk-color-error-700);
  --dk-surface-error-hover: var(--dk-color-error-600);
  --dk-surface-error-subtle: var(--dk-color-error-50);
  --dk-surface-error-subtle-focus: var(--dk-color-error-200);
  --dk-surface-error-subtle-hover: var(--dk-color-error-100);
  --dk-surface-glass-default: var(--dk-color-base-white-60);
  --dk-surface-information-default: var(--dk-color-information-500);
  --dk-surface-information-focus: var(--dk-color-information-700);
  --dk-surface-information-hover: var(--dk-color-information-600);
  --dk-surface-information-subtle: var(--dk-color-information-50);
  --dk-surface-information-subtle-focus: var(--dk-color-information-200);
  --dk-surface-information-subtle-hover: var(--dk-color-information-100);
  --dk-surface-neutral-default: var(--dk-color-neutral-500);
  --dk-surface-neutral-focus: var(--dk-color-neutral-600);
  --dk-surface-neutral-hover: var(--dk-color-neutral-600);
  --dk-surface-neutral-on-color: var(--dk-color-neutral-100);
  --dk-surface-neutral-subtle: var(--dk-color-neutral-25);
  --dk-surface-neutral-subtle-focus: var(--dk-color-neutral-100);
  --dk-surface-neutral-subtle-hover: var(--dk-color-neutral-50);
  --dk-surface-page-default: var(--dk-color-base-white);
  --dk-surface-page-secondary: var(--dk-color-neutral-25);
  --dk-surface-page-tertiary: var(--dk-color-neutral-1000);
  --dk-surface-primary-default: var(--dk-color-primary-500);
  --dk-surface-primary-disabled: var(--dk-color-primary-200);
  --dk-surface-primary-focus: var(--dk-color-primary-700);
  --dk-surface-primary-hover: var(--dk-color-primary-600);
  --dk-surface-primary-on-color: var(--dk-color-primary-100);
  --dk-surface-primary-subtle: var(--dk-color-primary-50);
  --dk-surface-primary-subtle-focus: var(--dk-color-primary-200);
  --dk-surface-primary-subtle-hover: var(--dk-color-primary-100);
  --dk-surface-success-default: var(--dk-color-success-500);
  --dk-surface-success-focus: var(--dk-color-success-700);
  --dk-surface-success-hover: var(--dk-color-success-600);
  --dk-surface-success-subtle: var(--dk-color-success-50);
  --dk-surface-success-subtle-focus: var(--dk-color-success-200);
  --dk-surface-success-subtle-hover: var(--dk-color-success-100);
  --dk-surface-warning-default: var(--dk-color-warning-500);
  --dk-surface-warning-focus: var(--dk-color-warning-700);
  --dk-surface-warning-hover: var(--dk-color-warning-600);
  --dk-surface-warning-subtle: var(--dk-color-warning-50);
  --dk-surface-warning-subtle-focus: var(--dk-color-warning-200);
  --dk-surface-warning-subtle-hover: var(--dk-color-warning-100);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-backdrop-black: #000000cc;
  --dk-surface-backdrop-transparent: #26262600;
  --dk-surface-base-black: var(--dk-color-base-black);
  --dk-surface-base-white: var(--dk-color-base-white);
  --dk-surface-card-default: var(--dk-color-neutral-1100);
  --dk-surface-card-focus: var(--dk-color-neutral-800);
  --dk-surface-card-hover: var(--dk-color-neutral-900);
  --dk-surface-card-secondary: var(--dk-color-neutral-900);
  --dk-surface-card-tertiary: var(--dk-color-neutral-50);
  --dk-surface-default-body: var(--dk-color-neutral-1100);
  --dk-surface-default-body-reverse: var(--dk-color-base-white);
  --dk-surface-disabled-default: var(--dk-color-neutral-300);
  --dk-surface-disabled-subtle: var(--dk-color-neutral-1000);
  --dk-surface-error-default: var(--dk-color-error-700);
  --dk-surface-error-focus: var(--dk-color-error-500);
  --dk-surface-error-hover: var(--dk-color-error-600);
  --dk-surface-error-subtle: var(--dk-color-error-900);
  --dk-surface-error-subtle-focus: var(--dk-color-error-700);
  --dk-surface-error-subtle-hover: var(--dk-color-error-800);
  --dk-surface-glass-default: var(--dk-color-base-black-60);
  --dk-surface-information-default: var(--dk-color-information-600);
  --dk-surface-information-focus: var(--dk-color-information-400);
  --dk-surface-information-hover: var(--dk-color-information-500);
  --dk-surface-information-subtle: var(--dk-color-information-900);
  --dk-surface-information-subtle-focus: var(--dk-color-information-700);
  --dk-surface-information-subtle-hover: var(--dk-color-information-800);
  --dk-surface-neutral-default: var(--dk-color-neutral-700);
  --dk-surface-neutral-focus: var(--dk-color-neutral-500);
  --dk-surface-neutral-hover: var(--dk-color-neutral-600);
  --dk-surface-neutral-on-color: var(--dk-color-neutral-800);
  --dk-surface-neutral-subtle: var(--dk-color-neutral-900);
  --dk-surface-neutral-subtle-focus: var(--dk-color-neutral-700);
  --dk-surface-neutral-subtle-hover: var(--dk-color-neutral-800);
  --dk-surface-page-default: var(--dk-color-neutral-1100);
  --dk-surface-page-secondary: var(--dk-color-neutral-1000);
  --dk-surface-page-tertiary: var(--dk-color-neutral-25);
  --dk-surface-primary-default: var(--dk-color-primary-600);
  --dk-surface-primary-disabled: var(--dk-color-primary-800);
  --dk-surface-primary-focus: var(--dk-color-primary-400);
  --dk-surface-primary-hover: var(--dk-color-primary-500);
  --dk-surface-primary-on-color: var(--dk-color-primary-800);
  --dk-surface-primary-subtle: var(--dk-color-primary-850);
  --dk-surface-primary-subtle-focus: var(--dk-color-primary-700);
  --dk-surface-primary-subtle-hover: var(--dk-color-primary-800);
  --dk-surface-success-default: var(--dk-color-success-700);
  --dk-surface-success-focus: var(--dk-color-success-500);
  --dk-surface-success-hover: var(--dk-color-success-600);
  --dk-surface-success-subtle: var(--dk-color-success-900);
  --dk-surface-success-subtle-focus: var(--dk-color-success-700);
  --dk-surface-success-subtle-hover: var(--dk-color-success-800);
  --dk-surface-warning-default: var(--dk-color-warning-600);
  --dk-surface-warning-focus: var(--dk-color-warning-400);
  --dk-surface-warning-hover: var(--dk-color-warning-500);
  --dk-surface-warning-subtle: var(--dk-color-warning-900);
  --dk-surface-warning-subtle-focus: var(--dk-color-warning-700);
  --dk-surface-warning-subtle-hover: var(--dk-color-warning-800);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-backdrop-soft: #00000066;
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-backdrop-soft: #00000066;
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-curtain-backdrop: var(--dk-color-neutral-1000);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-curtain-backdrop: var(--dk-color-base-black);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-raised-default: var(--dk-color-base-white);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-raised-default: var(--dk-color-neutral-1000);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-raised-active: var(--dk-color-neutral-50);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-raised-active: var(--dk-color-neutral-800);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-raised-hover: var(--dk-color-neutral-25);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-raised-hover: var(--dk-color-neutral-900);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-raised-glass: rgb(from var(--dk-surface-raised-default) r g b / var(--dk-primitive-opacity-glass));
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-raised-glass: rgb(from var(--dk-surface-raised-default) r g b / var(--dk-primitive-opacity-glass));
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-page-glass: rgb(from var(--dk-surface-default-body) r g b / var(--dk-primitive-opacity-glass));
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-page-glass: rgb(from var(--dk-surface-default-body) r g b / var(--dk-primitive-opacity-glass));
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-canvas-default: var(--dk-color-neutral-25);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-canvas-default: var(--dk-color-neutral-1100);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-inverse-default: var(--dk-color-neutral-1100);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-inverse-default: var(--dk-color-base-white);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-inverse-hover: var(--dk-color-neutral-900);
  --dk-surface-inverse-active: var(--dk-color-neutral-800);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-inverse-hover: var(--dk-color-neutral-50);
  --dk-surface-inverse-active: var(--dk-color-neutral-100);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-text-inverse-default: var(--dk-color-base-white);
  --dk-icon-inverse-default: var(--dk-color-base-white);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-text-inverse-default: var(--dk-color-neutral-1000);
  --dk-icon-inverse-default: var(--dk-color-neutral-1000);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-text-inverse-neutral: var(--dk-color-neutral-300);
  --dk-icon-inverse-neutral: var(--dk-color-neutral-300);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-text-inverse-neutral: var(--dk-color-neutral-600);
  --dk-icon-inverse-neutral: var(--dk-color-neutral-600);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-nested-default: var(--dk-color-neutral-25);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-nested-default: var(--dk-color-neutral-900);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-nested-glass: rgb(from var(--dk-surface-nested-default) r g b / var(--dk-primitive-opacity-glass));
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-nested-glass: rgb(from var(--dk-surface-nested-default) r g b / var(--dk-primitive-opacity-glass));
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-primary-default: var(--dk-color-primary-500);
  --dk-surface-primary-hover: var(--dk-color-primary-600);
  --dk-surface-primary-active: var(--dk-color-primary-700);
  --dk-surface-primary-focus: var(--dk-color-primary-700);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-primary-default: var(--dk-color-primary-500);
  --dk-surface-primary-hover: var(--dk-color-primary-400);
  --dk-surface-primary-active: var(--dk-color-primary-300);
  --dk-surface-primary-focus: var(--dk-color-primary-300);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-primary-marker: var(--dk-color-primary-500);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-primary-marker: var(--dk-color-primary-400);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-neutral-subtle-active: var(--dk-color-neutral-100);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-neutral-subtle-active: var(--dk-color-neutral-700);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-level-0: var(--dk-color-base-white);
  --dk-surface-level-1: var(--dk-color-neutral-25);
  --dk-surface-level-2: var(--dk-color-neutral-50);
  --dk-surface-current: var(--dk-surface-level-0);
  --dk-border-hairline-current: var(--dk-border-hairline-level-0);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-level-0: var(--dk-color-neutral-1100);
  --dk-surface-level-1: var(--dk-color-neutral-1000);
  --dk-surface-level-2: var(--dk-color-neutral-900);
  --dk-surface-current: var(--dk-surface-level-0);
  --dk-border-hairline-current: var(--dk-border-hairline-level-0);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-lifted-default: var(--dk-surface-nested-default);
  --dk-surface-lifted-hover: var(--dk-surface-nested-hover);
  --dk-surface-lifted-active: var(--dk-surface-nested-active);
  --dk-surface-lifted-default-level-1: var(--dk-surface-nested-default-level-1);
  --dk-surface-lifted-hover-level-1: var(--dk-surface-nested-hover-level-1);
  --dk-surface-lifted-active-level-1: var(--dk-surface-nested-active-level-1);
  --dk-surface-lifted-default-level-2: var(--dk-surface-nested-default-level-2);
  --dk-surface-lifted-hover-level-2: var(--dk-surface-nested-hover-level-2);
  --dk-surface-lifted-active-level-2: var(--dk-surface-nested-active-level-2);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-lifted-default: var(--dk-surface-raised-default);
  --dk-surface-lifted-hover: var(--dk-surface-raised-hover);
  --dk-surface-lifted-active: var(--dk-surface-raised-active);
  --dk-surface-lifted-default-level-1: var(--dk-surface-raised-default-level-1);
  --dk-surface-lifted-hover-level-1: var(--dk-surface-raised-hover-level-1);
  --dk-surface-lifted-active-level-1: var(--dk-surface-raised-active-level-1);
  --dk-surface-lifted-default-level-2: var(--dk-surface-raised-default-level-2);
  --dk-surface-lifted-hover-level-2: var(--dk-surface-raised-hover-level-2);
  --dk-surface-lifted-active-level-2: var(--dk-surface-raised-active-level-2);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-raised-default-level-1: var(--dk-color-base-white);
  --dk-surface-raised-default-level-2: var(--dk-color-base-white);
  --dk-surface-raised-hover-level-1: var(--dk-color-neutral-50);
  --dk-surface-raised-hover-level-2: var(--dk-color-neutral-100);
  --dk-surface-raised-active-level-1: var(--dk-color-neutral-100);
  --dk-surface-raised-active-level-2: var(--dk-color-neutral-200);
  --dk-surface-nested-default-level-1: var(--dk-color-neutral-50);
  --dk-surface-nested-default-level-2: var(--dk-color-neutral-100);
  --dk-surface-nested-hover-level-1: var(--dk-color-neutral-100);
  --dk-surface-nested-hover-level-2: var(--dk-color-neutral-200);
  --dk-surface-nested-active-level-1: var(--dk-color-neutral-200);
  --dk-surface-nested-active-level-2: var(--dk-color-neutral-300);
  --dk-border-raised-default-level-1: var(--dk-color-neutral-100);
  --dk-border-raised-default-level-2: var(--dk-color-neutral-200);
  --dk-border-hairline-level-0: var(--dk-color-neutral-100);
  --dk-border-hairline-level-1: var(--dk-color-neutral-200);
  --dk-border-hairline-level-2: var(--dk-color-neutral-300);
  --dk-border-raised-hover-level-1: var(--dk-color-neutral-200);
  --dk-border-raised-hover-level-2: var(--dk-color-neutral-300);
  --dk-border-raised-active-level-1: var(--dk-color-neutral-300);
  --dk-border-raised-active-level-2: var(--dk-color-neutral-400);
  --dk-border-nested-default-level-1: var(--dk-color-neutral-100);
  --dk-border-nested-default-level-2: var(--dk-color-neutral-200);
  --dk-border-nested-hover-level-1: var(--dk-color-neutral-300);
  --dk-border-nested-hover-level-2: var(--dk-color-neutral-400);
  --dk-border-nested-active-level-1: var(--dk-color-neutral-400);
  --dk-border-nested-active-level-2: var(--dk-color-neutral-500);
  --dk-surface-primary-subtle-level-1: var(--dk-color-primary-100);
  --dk-surface-primary-subtle-level-2: var(--dk-color-primary-200);
  --dk-surface-primary-subtle-hover-level-1: var(--dk-color-primary-200);
  --dk-surface-primary-subtle-hover-level-2: var(--dk-color-primary-300);
  --dk-surface-primary-subtle-focus-level-1: var(--dk-color-primary-300);
  --dk-surface-primary-subtle-focus-level-2: var(--dk-color-primary-400);
  --dk-surface-error-subtle-level-1: var(--dk-color-error-100);
  --dk-surface-error-subtle-level-2: var(--dk-color-error-200);
  --dk-surface-error-subtle-hover-level-1: var(--dk-color-error-200);
  --dk-surface-error-subtle-hover-level-2: var(--dk-color-error-300);
  --dk-surface-error-subtle-focus-level-1: var(--dk-color-error-300);
  --dk-surface-error-subtle-focus-level-2: var(--dk-color-error-400);
  --dk-text-primary-default-level-1: var(--dk-color-primary-600);
  --dk-text-primary-default-level-2: var(--dk-color-primary-700);
  --dk-icon-primary-default-level-1: var(--dk-color-primary-600);
  --dk-icon-primary-default-level-2: var(--dk-color-primary-700);
  --dk-text-error-default-level-1: var(--dk-color-error-600);
  --dk-text-error-default-level-2: var(--dk-color-error-700);
  --dk-icon-error-default-level-1: var(--dk-color-error-600);
  --dk-icon-error-default-level-2: var(--dk-color-error-700);
  --dk-text-warning-default-level-1: var(--dk-color-warning-600);
  --dk-text-warning-default-level-2: var(--dk-color-warning-700);
  --dk-icon-warning-default-level-1: var(--dk-color-warning-600);
  --dk-icon-warning-default-level-2: var(--dk-color-warning-700);
  --dk-text-information-default-level-1: var(--dk-color-information-600);
  --dk-text-information-default-level-2: var(--dk-color-information-700);
  --dk-icon-information-default-level-1: var(--dk-color-information-600);
  --dk-icon-information-default-level-2: var(--dk-color-information-700);
  --dk-text-neutral-default-level-1: var(--dk-color-neutral-700);
  --dk-text-neutral-default-level-2: var(--dk-color-neutral-800);
  --dk-text-neutral-on-tint: var(--dk-color-neutral-600);
  --dk-text-neutral-on-tint-level-1: var(--dk-color-neutral-700);
  --dk-text-neutral-on-tint-level-2: var(--dk-color-neutral-800);
  --dk-text-primary-on-tint: var(--dk-color-primary-700);
  --dk-text-primary-on-tint-level-1: var(--dk-color-primary-700);
  --dk-text-primary-on-tint-level-2: var(--dk-color-primary-800);
  --dk-text-error-on-tint: var(--dk-color-error-700);
  --dk-text-error-on-tint-level-1: var(--dk-color-error-700);
  --dk-text-error-on-tint-level-2: var(--dk-color-error-800);
  --dk-text-warning-on-tint: var(--dk-color-warning-700);
  --dk-text-warning-on-tint-level-1: var(--dk-color-warning-700);
  --dk-text-warning-on-tint-level-2: var(--dk-color-warning-800);
  --dk-text-information-on-tint: var(--dk-color-information-700);
  --dk-text-information-on-tint-level-1: var(--dk-color-information-700);
  --dk-text-information-on-tint-level-2: var(--dk-color-information-800);
  --dk-text-success-on-tint: var(--dk-text-primary-on-tint);
  --dk-icon-neutral-default-level-1: var(--dk-color-neutral-600);
  --dk-icon-neutral-default-level-2: var(--dk-color-neutral-700);
  --dk-text-neutral-subtle-level-1: var(--dk-color-neutral-600);
  --dk-text-neutral-subtle-level-2: var(--dk-color-neutral-700);
  --dk-text-neutral-subtle-hover-level-1: var(--dk-color-neutral-700);
  --dk-text-neutral-subtle-hover-level-2: var(--dk-color-neutral-800);
  --dk-text-neutral-subtle-focus-level-1: var(--dk-color-neutral-800);
  --dk-text-neutral-subtle-focus-level-2: var(--dk-color-neutral-900);
  --dk-icon-neutral-subtle-level-1: var(--dk-color-neutral-400);
  --dk-icon-neutral-subtle-level-2: var(--dk-color-neutral-500);
  --dk-border-neutral-hairline: var(--dk-color-neutral-200);
  --dk-border-neutral-hairline-level-1: var(--dk-color-neutral-200);
  --dk-border-neutral-hairline-level-2: var(--dk-color-neutral-300);
  --dk-border-primary-hairline: var(--dk-color-primary-300);
  --dk-border-primary-hairline-level-1: var(--dk-color-primary-300);
  --dk-border-primary-hairline-level-2: var(--dk-color-primary-400);
  --dk-border-error-hairline: var(--dk-color-error-300);
  --dk-border-error-hairline-level-1: var(--dk-color-error-300);
  --dk-border-error-hairline-level-2: var(--dk-color-error-400);
  --dk-border-warning-hairline: var(--dk-color-warning-300);
  --dk-border-warning-hairline-level-1: var(--dk-color-warning-300);
  --dk-border-warning-hairline-level-2: var(--dk-color-warning-400);
  --dk-border-information-hairline: var(--dk-color-information-300);
  --dk-border-information-hairline-level-1: var(--dk-color-information-300);
  --dk-border-information-hairline-level-2: var(--dk-color-information-400);
  --dk-border-primary-default-level-1: var(--dk-color-primary-600);
  --dk-border-primary-default-level-2: var(--dk-color-primary-700);
  --dk-border-error-default-level-1: var(--dk-color-error-600);
  --dk-border-error-default-level-2: var(--dk-color-error-700);
  --dk-border-warning-default-level-1: var(--dk-color-warning-600);
  --dk-border-warning-default-level-2: var(--dk-color-warning-700);
  --dk-border-information-default-level-1: var(--dk-color-information-600);
  --dk-border-information-default-level-2: var(--dk-color-information-700);
  --dk-text-disabled-default-level-1: var(--dk-color-neutral-400);
  --dk-text-disabled-default-level-2: var(--dk-color-neutral-500);
  --dk-icon-disabled-default-level-1: var(--dk-color-neutral-400);
  --dk-icon-disabled-default-level-2: var(--dk-color-neutral-500);
  --dk-surface-disabled-subtle-level-1: var(--dk-color-neutral-50);
  --dk-surface-disabled-subtle-level-2: var(--dk-color-neutral-100);
  --dk-border-disabled-subtle-level-1: var(--dk-color-neutral-200);
  --dk-border-disabled-subtle-level-2: var(--dk-color-neutral-300);
  --dk-text-disabled-subtle-level-1: var(--dk-color-neutral-300);
  --dk-text-disabled-subtle-level-2: var(--dk-color-neutral-400);
  --dk-icon-disabled-subtle-level-1: var(--dk-color-neutral-200);
  --dk-icon-disabled-subtle-level-2: var(--dk-color-neutral-300);
  --dk-border-disabled-elevation-level-1: var(--dk-color-neutral-300);
  --dk-border-disabled-elevation-level-2: var(--dk-color-neutral-400);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-raised-default-level-1: var(--dk-color-neutral-900);
  --dk-surface-raised-default-level-2: var(--dk-color-neutral-800);
  --dk-surface-raised-hover-level-1: var(--dk-color-neutral-800);
  --dk-surface-raised-hover-level-2: var(--dk-color-neutral-700);
  --dk-surface-raised-active-level-1: var(--dk-color-neutral-700);
  --dk-surface-raised-active-level-2: var(--dk-color-neutral-600);
  --dk-surface-nested-default-level-1: var(--dk-color-neutral-800);
  --dk-surface-nested-default-level-2: var(--dk-color-neutral-700);
  --dk-surface-nested-hover-level-1: var(--dk-color-neutral-700);
  --dk-surface-nested-hover-level-2: var(--dk-color-neutral-600);
  --dk-surface-nested-active-level-1: var(--dk-color-neutral-600);
  --dk-surface-nested-active-level-2: var(--dk-color-neutral-500);
  --dk-border-raised-default-level-1: var(--dk-color-neutral-700);
  --dk-border-raised-default-level-2: var(--dk-color-neutral-600);
  --dk-border-hairline-level-0: var(--dk-color-neutral-800);
  --dk-border-hairline-level-1: var(--dk-color-neutral-700);
  --dk-border-hairline-level-2: var(--dk-color-neutral-600);
  --dk-border-raised-hover-level-1: var(--dk-color-neutral-600);
  --dk-border-raised-hover-level-2: var(--dk-color-neutral-500);
  --dk-border-raised-active-level-1: var(--dk-color-neutral-500);
  --dk-border-raised-active-level-2: var(--dk-color-neutral-400);
  --dk-border-nested-default-level-1: var(--dk-color-neutral-700);
  --dk-border-nested-default-level-2: var(--dk-color-neutral-600);
  --dk-border-nested-hover-level-1: var(--dk-color-neutral-500);
  --dk-border-nested-hover-level-2: var(--dk-color-neutral-400);
  --dk-border-nested-active-level-1: var(--dk-color-neutral-400);
  --dk-border-nested-active-level-2: var(--dk-color-neutral-300);
  --dk-surface-primary-subtle-level-1: var(--dk-color-primary-800);
  --dk-surface-primary-subtle-level-2: var(--dk-color-primary-700);
  --dk-surface-primary-subtle-hover-level-1: var(--dk-color-primary-700);
  --dk-surface-primary-subtle-hover-level-2: var(--dk-color-primary-600);
  --dk-surface-primary-subtle-focus-level-1: var(--dk-color-primary-600);
  --dk-surface-primary-subtle-focus-level-2: var(--dk-color-primary-500);
  --dk-surface-error-subtle-level-1: var(--dk-color-error-800);
  --dk-surface-error-subtle-level-2: var(--dk-color-error-700);
  --dk-surface-error-subtle-hover-level-1: var(--dk-color-error-700);
  --dk-surface-error-subtle-hover-level-2: var(--dk-color-error-600);
  --dk-surface-error-subtle-focus-level-1: var(--dk-color-error-600);
  --dk-surface-error-subtle-focus-level-2: var(--dk-color-error-500);
  --dk-text-primary-default-level-1: var(--dk-color-primary-300);
  --dk-text-primary-default-level-2: var(--dk-color-primary-200);
  --dk-icon-primary-default-level-1: var(--dk-color-primary-300);
  --dk-icon-primary-default-level-2: var(--dk-color-primary-200);
  --dk-text-error-default-level-1: var(--dk-color-error-300);
  --dk-text-error-default-level-2: var(--dk-color-error-200);
  --dk-icon-error-default-level-1: var(--dk-color-error-300);
  --dk-icon-error-default-level-2: var(--dk-color-error-200);
  --dk-text-warning-default-level-1: var(--dk-color-warning-300);
  --dk-text-warning-default-level-2: var(--dk-color-warning-200);
  --dk-icon-warning-default-level-1: var(--dk-color-warning-300);
  --dk-icon-warning-default-level-2: var(--dk-color-warning-200);
  --dk-text-information-default-level-1: var(--dk-color-information-300);
  --dk-text-information-default-level-2: var(--dk-color-information-200);
  --dk-icon-information-default-level-1: var(--dk-color-information-300);
  --dk-icon-information-default-level-2: var(--dk-color-information-200);
  --dk-text-neutral-default-level-1: var(--dk-color-neutral-200);
  --dk-text-neutral-default-level-2: var(--dk-color-neutral-100);
  --dk-text-neutral-on-tint: var(--dk-color-neutral-200);
  --dk-text-neutral-on-tint-level-1: var(--dk-color-neutral-200);
  --dk-text-neutral-on-tint-level-2: var(--dk-color-base-white);
  --dk-text-primary-on-tint: var(--dk-color-primary-200);
  --dk-text-primary-on-tint-level-1: var(--dk-color-primary-200);
  --dk-text-primary-on-tint-level-2: var(--dk-color-primary-100);
  --dk-text-error-on-tint: var(--dk-color-error-200);
  --dk-text-error-on-tint-level-1: var(--dk-color-error-200);
  --dk-text-error-on-tint-level-2: var(--dk-color-error-100);
  --dk-text-warning-on-tint: var(--dk-color-warning-200);
  --dk-text-warning-on-tint-level-1: var(--dk-color-warning-200);
  --dk-text-warning-on-tint-level-2: var(--dk-color-warning-100);
  --dk-text-information-on-tint: var(--dk-color-information-200);
  --dk-text-information-on-tint-level-1: var(--dk-color-information-200);
  --dk-text-information-on-tint-level-2: var(--dk-color-information-100);
  --dk-text-success-on-tint: var(--dk-text-primary-on-tint);
  --dk-icon-neutral-default-level-1: var(--dk-color-neutral-300);
  --dk-icon-neutral-default-level-2: var(--dk-color-neutral-200);
  --dk-text-neutral-subtle-level-1: var(--dk-color-neutral-300);
  --dk-text-neutral-subtle-level-2: var(--dk-color-neutral-200);
  --dk-text-neutral-subtle-hover-level-1: var(--dk-color-neutral-200);
  --dk-text-neutral-subtle-hover-level-2: var(--dk-color-neutral-100);
  --dk-text-neutral-subtle-focus-level-1: var(--dk-color-neutral-100);
  --dk-text-neutral-subtle-focus-level-2: var(--dk-color-neutral-50);
  --dk-icon-neutral-subtle-level-1: var(--dk-color-neutral-500);
  --dk-icon-neutral-subtle-level-2: var(--dk-color-neutral-400);
  --dk-border-neutral-hairline: var(--dk-color-neutral-600);
  --dk-border-neutral-hairline-level-1: var(--dk-color-neutral-600);
  --dk-border-neutral-hairline-level-2: var(--dk-color-neutral-500);
  --dk-border-primary-hairline: var(--dk-color-primary-800);
  --dk-border-primary-hairline-level-1: var(--dk-color-primary-800);
  --dk-border-primary-hairline-level-2: var(--dk-color-primary-700);
  --dk-border-error-hairline: var(--dk-color-error-800);
  --dk-border-error-hairline-level-1: var(--dk-color-error-800);
  --dk-border-error-hairline-level-2: var(--dk-color-error-700);
  --dk-border-warning-hairline: var(--dk-color-warning-800);
  --dk-border-warning-hairline-level-1: var(--dk-color-warning-800);
  --dk-border-warning-hairline-level-2: var(--dk-color-warning-700);
  --dk-border-information-hairline: var(--dk-color-information-800);
  --dk-border-information-hairline-level-1: var(--dk-color-information-800);
  --dk-border-information-hairline-level-2: var(--dk-color-information-700);
  --dk-border-primary-default-level-1: var(--dk-color-primary-300);
  --dk-border-primary-default-level-2: var(--dk-color-primary-200);
  --dk-border-error-default-level-1: var(--dk-color-error-300);
  --dk-border-error-default-level-2: var(--dk-color-error-200);
  --dk-border-warning-default-level-1: var(--dk-color-warning-300);
  --dk-border-warning-default-level-2: var(--dk-color-warning-200);
  --dk-border-information-default-level-1: var(--dk-color-information-300);
  --dk-border-information-default-level-2: var(--dk-color-information-200);
  --dk-text-disabled-default-level-1: var(--dk-color-neutral-400);
  --dk-text-disabled-default-level-2: var(--dk-color-neutral-300);
  --dk-icon-disabled-default-level-1: var(--dk-color-neutral-400);
  --dk-icon-disabled-default-level-2: var(--dk-color-neutral-300);
  --dk-surface-disabled-subtle-level-1: var(--dk-color-neutral-900);
  --dk-surface-disabled-subtle-level-2: var(--dk-color-neutral-800);
  --dk-border-disabled-subtle-level-1: var(--dk-color-neutral-700);
  --dk-border-disabled-subtle-level-2: var(--dk-color-neutral-600);
  --dk-text-disabled-subtle-level-1: var(--dk-color-neutral-600);
  --dk-text-disabled-subtle-level-2: var(--dk-color-neutral-500);
  --dk-icon-disabled-subtle-level-1: var(--dk-color-neutral-700);
  --dk-icon-disabled-subtle-level-2: var(--dk-color-neutral-600);
  --dk-border-disabled-elevation-level-1: var(--dk-color-neutral-400);
  --dk-border-disabled-elevation-level-2: var(--dk-color-neutral-500);
}
[data-theme="light"] [data-tone="inverse"][data-surface="1"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"][data-surface="1"] {
  --dk-text-default: var(--_reset-text-default);
  --dk-icon-default-body: var(--_reset-icon-default-body);
  --dk-surface-current: var(--dk-surface-level-1);
  --dk-border-hairline-current: var(--dk-border-hairline-level-1);
  --dk-surface-raised-default: var(--dk-surface-raised-default-level-1);
  --dk-surface-raised-hover: var(--dk-surface-raised-hover-level-1);
  --dk-surface-raised-active: var(--dk-surface-raised-active-level-1);
  --dk-surface-nested-default: var(--dk-surface-nested-default-level-1);
  --dk-surface-nested-hover: var(--dk-surface-nested-hover-level-1);
  --dk-surface-nested-active: var(--dk-surface-nested-active-level-1);
  --dk-border-raised-default: var(--dk-border-raised-default-level-1);
  --dk-border-raised-hover: var(--dk-border-raised-hover-level-1);
  --dk-border-raised-active: var(--dk-border-raised-active-level-1);
  --dk-border-raised-control-default: var(--dk-border-raised-control-default-level-1);
  --dk-border-raised-control-hover: var(--dk-border-raised-control-hover-level-1);
  --dk-border-raised-control-active: var(--dk-border-raised-control-active-level-1);
  --dk-border-nested-default: var(--dk-border-nested-default-level-1);
  --dk-border-nested-hover: var(--dk-border-nested-hover-level-1);
  --dk-border-nested-active: var(--dk-border-nested-active-level-1);
  --dk-surface-primary-subtle: var(--dk-surface-primary-subtle-level-1);
  --dk-surface-primary-subtle-hover: var(--dk-surface-primary-subtle-hover-level-1);
  --dk-surface-primary-subtle-focus: var(--dk-surface-primary-subtle-focus-level-1);
  --dk-surface-error-subtle: var(--dk-surface-error-subtle-level-1);
  --dk-surface-error-subtle-hover: var(--dk-surface-error-subtle-hover-level-1);
  --dk-surface-error-subtle-focus: var(--dk-surface-error-subtle-focus-level-1);
  --dk-surface-success-subtle: var(--dk-surface-success-subtle-level-1);
  --dk-surface-warning-subtle: var(--dk-surface-warning-subtle-level-1);
  --dk-surface-information-subtle: var(--dk-surface-information-subtle-level-1);
  --dk-text-primary-default: var(--dk-text-primary-default-level-1);
  --dk-icon-primary-default: var(--dk-icon-primary-default-level-1);
  --dk-text-error-default: var(--dk-text-error-default-level-1);
  --dk-icon-error-default: var(--dk-icon-error-default-level-1);
  --dk-text-warning-default: var(--dk-text-warning-default-level-1);
  --dk-icon-warning-default: var(--dk-icon-warning-default-level-1);
  --dk-text-information-default: var(--dk-text-information-default-level-1);
  --dk-icon-information-default: var(--dk-icon-information-default-level-1);
  --dk-text-neutral-default: var(--dk-text-neutral-default-level-1);
  --dk-text-neutral-on-tint: var(--dk-text-neutral-on-tint-level-1);
  --dk-text-primary-on-tint: var(--dk-text-primary-on-tint-level-1);
  --dk-text-error-on-tint: var(--dk-text-error-on-tint-level-1);
  --dk-text-warning-on-tint: var(--dk-text-warning-on-tint-level-1);
  --dk-text-information-on-tint: var(--dk-text-information-on-tint-level-1);
  --dk-text-success-on-tint: var(--dk-text-primary-on-tint-level-1);
  --dk-icon-neutral-default: var(--dk-icon-neutral-default-level-1);
  --dk-text-neutral-subtle: var(--dk-text-neutral-subtle-level-1);
  --dk-text-neutral-subtle-hover: var(--dk-text-neutral-subtle-hover-level-1);
  --dk-text-neutral-subtle-focus: var(--dk-text-neutral-subtle-focus-level-1);
  --dk-icon-neutral-subtle: var(--dk-icon-neutral-subtle-level-1);
  --dk-border-neutral-hairline: var(--dk-border-neutral-hairline-level-1);
  --dk-border-primary-hairline: var(--dk-border-primary-hairline-level-1);
  --dk-border-error-hairline: var(--dk-border-error-hairline-level-1);
  --dk-border-warning-hairline: var(--dk-border-warning-hairline-level-1);
  --dk-border-information-hairline: var(--dk-border-information-hairline-level-1);
  --dk-border-primary-default: var(--dk-border-primary-default-level-1);
  --dk-border-error-default: var(--dk-border-error-default-level-1);
  --dk-border-warning-default: var(--dk-border-warning-default-level-1);
  --dk-border-information-default: var(--dk-border-information-default-level-1);
  --dk-text-disabled-default: var(--dk-text-disabled-default-level-1);
  --dk-icon-disabled-default: var(--dk-icon-disabled-default-level-1);
  --dk-surface-disabled-subtle: var(--dk-surface-disabled-subtle-level-1);
  --dk-border-disabled-subtle: var(--dk-border-disabled-subtle-level-1);
  --dk-text-disabled-subtle: var(--dk-text-disabled-subtle-level-1);
  --dk-icon-disabled-subtle: var(--dk-icon-disabled-subtle-level-1);
  --dk-border-disabled-elevation: var(--dk-border-disabled-elevation-level-1);
  --dk-surface-lifted-default: var(--dk-surface-lifted-default-level-1);
  --dk-surface-lifted-hover: var(--dk-surface-lifted-hover-level-1);
  --dk-surface-lifted-active: var(--dk-surface-lifted-active-level-1);
  --dk-text-success-default: var(--dk-text-primary-default);
  --dk-icon-success-default: var(--dk-icon-primary-default);
}
[data-theme="light"][data-tone="inverse"][data-surface="below"],
[data-theme="light"] [data-tone="inverse"][data-surface="below"]:not([data-theme]):where(:not(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *))) {
  --dk-text-default: var(--_reset-text-default);
  --dk-icon-default-body: var(--_reset-icon-default-body);
  --dk-surface-current: var(--dk-surface-level-1);
  --dk-border-hairline-current: var(--dk-border-hairline-level-1);
  --dk-surface-raised-default: var(--dk-surface-raised-default-level-1);
  --dk-surface-raised-hover: var(--dk-surface-raised-hover-level-1);
  --dk-surface-raised-active: var(--dk-surface-raised-active-level-1);
  --dk-surface-nested-default: var(--dk-surface-nested-default-level-1);
  --dk-surface-nested-hover: var(--dk-surface-nested-hover-level-1);
  --dk-surface-nested-active: var(--dk-surface-nested-active-level-1);
  --dk-border-raised-default: var(--dk-border-raised-default-level-1);
  --dk-border-raised-hover: var(--dk-border-raised-hover-level-1);
  --dk-border-raised-active: var(--dk-border-raised-active-level-1);
  --dk-border-raised-control-default: var(--dk-border-raised-control-default-level-1);
  --dk-border-raised-control-hover: var(--dk-border-raised-control-hover-level-1);
  --dk-border-raised-control-active: var(--dk-border-raised-control-active-level-1);
  --dk-border-nested-default: var(--dk-border-nested-default-level-1);
  --dk-border-nested-hover: var(--dk-border-nested-hover-level-1);
  --dk-border-nested-active: var(--dk-border-nested-active-level-1);
  --dk-surface-primary-subtle: var(--dk-surface-primary-subtle-level-1);
  --dk-surface-primary-subtle-hover: var(--dk-surface-primary-subtle-hover-level-1);
  --dk-surface-primary-subtle-focus: var(--dk-surface-primary-subtle-focus-level-1);
  --dk-surface-error-subtle: var(--dk-surface-error-subtle-level-1);
  --dk-surface-error-subtle-hover: var(--dk-surface-error-subtle-hover-level-1);
  --dk-surface-error-subtle-focus: var(--dk-surface-error-subtle-focus-level-1);
  --dk-surface-success-subtle: var(--dk-surface-success-subtle-level-1);
  --dk-surface-warning-subtle: var(--dk-surface-warning-subtle-level-1);
  --dk-surface-information-subtle: var(--dk-surface-information-subtle-level-1);
  --dk-text-primary-default: var(--dk-text-primary-default-level-1);
  --dk-icon-primary-default: var(--dk-icon-primary-default-level-1);
  --dk-text-error-default: var(--dk-text-error-default-level-1);
  --dk-icon-error-default: var(--dk-icon-error-default-level-1);
  --dk-text-warning-default: var(--dk-text-warning-default-level-1);
  --dk-icon-warning-default: var(--dk-icon-warning-default-level-1);
  --dk-text-information-default: var(--dk-text-information-default-level-1);
  --dk-icon-information-default: var(--dk-icon-information-default-level-1);
  --dk-text-neutral-default: var(--dk-text-neutral-default-level-1);
  --dk-text-neutral-on-tint: var(--dk-text-neutral-on-tint-level-1);
  --dk-text-primary-on-tint: var(--dk-text-primary-on-tint-level-1);
  --dk-text-error-on-tint: var(--dk-text-error-on-tint-level-1);
  --dk-text-warning-on-tint: var(--dk-text-warning-on-tint-level-1);
  --dk-text-information-on-tint: var(--dk-text-information-on-tint-level-1);
  --dk-text-success-on-tint: var(--dk-text-primary-on-tint-level-1);
  --dk-icon-neutral-default: var(--dk-icon-neutral-default-level-1);
  --dk-text-neutral-subtle: var(--dk-text-neutral-subtle-level-1);
  --dk-text-neutral-subtle-hover: var(--dk-text-neutral-subtle-hover-level-1);
  --dk-text-neutral-subtle-focus: var(--dk-text-neutral-subtle-focus-level-1);
  --dk-icon-neutral-subtle: var(--dk-icon-neutral-subtle-level-1);
  --dk-border-neutral-hairline: var(--dk-border-neutral-hairline-level-1);
  --dk-border-primary-hairline: var(--dk-border-primary-hairline-level-1);
  --dk-border-error-hairline: var(--dk-border-error-hairline-level-1);
  --dk-border-warning-hairline: var(--dk-border-warning-hairline-level-1);
  --dk-border-information-hairline: var(--dk-border-information-hairline-level-1);
  --dk-border-primary-default: var(--dk-border-primary-default-level-1);
  --dk-border-error-default: var(--dk-border-error-default-level-1);
  --dk-border-warning-default: var(--dk-border-warning-default-level-1);
  --dk-border-information-default: var(--dk-border-information-default-level-1);
  --dk-text-disabled-default: var(--dk-text-disabled-default-level-1);
  --dk-icon-disabled-default: var(--dk-icon-disabled-default-level-1);
  --dk-surface-disabled-subtle: var(--dk-surface-disabled-subtle-level-1);
  --dk-border-disabled-subtle: var(--dk-border-disabled-subtle-level-1);
  --dk-text-disabled-subtle: var(--dk-text-disabled-subtle-level-1);
  --dk-icon-disabled-subtle: var(--dk-icon-disabled-subtle-level-1);
  --dk-border-disabled-elevation: var(--dk-border-disabled-elevation-level-1);
  --dk-surface-lifted-default: var(--dk-surface-lifted-default-level-1);
  --dk-surface-lifted-hover: var(--dk-surface-lifted-hover-level-1);
  --dk-surface-lifted-active: var(--dk-surface-lifted-active-level-1);
  --dk-text-success-default: var(--dk-text-primary-default);
  --dk-icon-success-default: var(--dk-icon-primary-default);
}
[data-theme="light"] [data-tone="inverse"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="light"][data-tone="inverse"][data-surface="raised"] {
  --dk-text-default: var(--_reset-text-default);
  --dk-icon-default-body: var(--_reset-icon-default-body);
  --dk-surface-current: var(--dk-surface-level-1);
  --dk-border-hairline-current: var(--dk-border-hairline-level-1);
  --dk-surface-raised-default: var(--dk-surface-raised-default-level-1);
  --dk-surface-raised-hover: var(--dk-surface-raised-hover-level-1);
  --dk-surface-raised-active: var(--dk-surface-raised-active-level-1);
  --dk-surface-nested-default: var(--dk-surface-nested-default-level-1);
  --dk-surface-nested-hover: var(--dk-surface-nested-hover-level-1);
  --dk-surface-nested-active: var(--dk-surface-nested-active-level-1);
  --dk-border-raised-default: var(--dk-border-raised-default-level-1);
  --dk-border-raised-hover: var(--dk-border-raised-hover-level-1);
  --dk-border-raised-active: var(--dk-border-raised-active-level-1);
  --dk-border-raised-control-default: var(--dk-border-raised-control-default-level-1);
  --dk-border-raised-control-hover: var(--dk-border-raised-control-hover-level-1);
  --dk-border-raised-control-active: var(--dk-border-raised-control-active-level-1);
  --dk-border-nested-default: var(--dk-border-nested-default-level-1);
  --dk-border-nested-hover: var(--dk-border-nested-hover-level-1);
  --dk-border-nested-active: var(--dk-border-nested-active-level-1);
  --dk-surface-primary-subtle: var(--dk-surface-primary-subtle-level-1);
  --dk-surface-primary-subtle-hover: var(--dk-surface-primary-subtle-hover-level-1);
  --dk-surface-primary-subtle-focus: var(--dk-surface-primary-subtle-focus-level-1);
  --dk-surface-error-subtle: var(--dk-surface-error-subtle-level-1);
  --dk-surface-error-subtle-hover: var(--dk-surface-error-subtle-hover-level-1);
  --dk-surface-error-subtle-focus: var(--dk-surface-error-subtle-focus-level-1);
  --dk-surface-success-subtle: var(--dk-surface-success-subtle-level-1);
  --dk-surface-warning-subtle: var(--dk-surface-warning-subtle-level-1);
  --dk-surface-information-subtle: var(--dk-surface-information-subtle-level-1);
  --dk-text-primary-default: var(--dk-text-primary-default-level-1);
  --dk-icon-primary-default: var(--dk-icon-primary-default-level-1);
  --dk-text-error-default: var(--dk-text-error-default-level-1);
  --dk-icon-error-default: var(--dk-icon-error-default-level-1);
  --dk-text-warning-default: var(--dk-text-warning-default-level-1);
  --dk-icon-warning-default: var(--dk-icon-warning-default-level-1);
  --dk-text-information-default: var(--dk-text-information-default-level-1);
  --dk-icon-information-default: var(--dk-icon-information-default-level-1);
  --dk-text-neutral-default: var(--dk-text-neutral-default-level-1);
  --dk-text-neutral-on-tint: var(--dk-text-neutral-on-tint-level-1);
  --dk-text-primary-on-tint: var(--dk-text-primary-on-tint-level-1);
  --dk-text-error-on-tint: var(--dk-text-error-on-tint-level-1);
  --dk-text-warning-on-tint: var(--dk-text-warning-on-tint-level-1);
  --dk-text-information-on-tint: var(--dk-text-information-on-tint-level-1);
  --dk-text-success-on-tint: var(--dk-text-primary-on-tint-level-1);
  --dk-icon-neutral-default: var(--dk-icon-neutral-default-level-1);
  --dk-text-neutral-subtle: var(--dk-text-neutral-subtle-level-1);
  --dk-text-neutral-subtle-hover: var(--dk-text-neutral-subtle-hover-level-1);
  --dk-text-neutral-subtle-focus: var(--dk-text-neutral-subtle-focus-level-1);
  --dk-icon-neutral-subtle: var(--dk-icon-neutral-subtle-level-1);
  --dk-border-neutral-hairline: var(--dk-border-neutral-hairline-level-1);
  --dk-border-primary-hairline: var(--dk-border-primary-hairline-level-1);
  --dk-border-error-hairline: var(--dk-border-error-hairline-level-1);
  --dk-border-warning-hairline: var(--dk-border-warning-hairline-level-1);
  --dk-border-information-hairline: var(--dk-border-information-hairline-level-1);
  --dk-border-primary-default: var(--dk-border-primary-default-level-1);
  --dk-border-error-default: var(--dk-border-error-default-level-1);
  --dk-border-warning-default: var(--dk-border-warning-default-level-1);
  --dk-border-information-default: var(--dk-border-information-default-level-1);
  --dk-text-disabled-default: var(--dk-text-disabled-default-level-1);
  --dk-icon-disabled-default: var(--dk-icon-disabled-default-level-1);
  --dk-surface-disabled-subtle: var(--dk-surface-disabled-subtle-level-1);
  --dk-border-disabled-subtle: var(--dk-border-disabled-subtle-level-1);
  --dk-text-disabled-subtle: var(--dk-text-disabled-subtle-level-1);
  --dk-icon-disabled-subtle: var(--dk-icon-disabled-subtle-level-1);
  --dk-border-disabled-elevation: var(--dk-border-disabled-elevation-level-1);
  --dk-surface-lifted-default: var(--dk-surface-lifted-default-level-1);
  --dk-surface-lifted-hover: var(--dk-surface-lifted-hover-level-1);
  --dk-surface-lifted-active: var(--dk-surface-lifted-active-level-1);
  --dk-text-success-default: var(--dk-text-primary-default);
  --dk-icon-success-default: var(--dk-icon-primary-default);
}
[data-theme="dark"] [data-tone="inverse"][data-surface="1"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"][data-surface="1"] {
  --dk-text-default: var(--_reset-text-default);
  --dk-icon-default-body: var(--_reset-icon-default-body);
  --dk-surface-current: var(--dk-surface-level-1);
  --dk-border-hairline-current: var(--dk-border-hairline-level-1);
  --dk-surface-raised-default: var(--dk-surface-raised-default-level-1);
  --dk-surface-raised-hover: var(--dk-surface-raised-hover-level-1);
  --dk-surface-raised-active: var(--dk-surface-raised-active-level-1);
  --dk-surface-nested-default: var(--dk-surface-nested-default-level-1);
  --dk-surface-nested-hover: var(--dk-surface-nested-hover-level-1);
  --dk-surface-nested-active: var(--dk-surface-nested-active-level-1);
  --dk-border-raised-default: var(--dk-border-raised-default-level-1);
  --dk-border-raised-hover: var(--dk-border-raised-hover-level-1);
  --dk-border-raised-active: var(--dk-border-raised-active-level-1);
  --dk-border-raised-control-default: var(--dk-border-raised-control-default-level-1);
  --dk-border-raised-control-hover: var(--dk-border-raised-control-hover-level-1);
  --dk-border-raised-control-active: var(--dk-border-raised-control-active-level-1);
  --dk-border-nested-default: var(--dk-border-nested-default-level-1);
  --dk-border-nested-hover: var(--dk-border-nested-hover-level-1);
  --dk-border-nested-active: var(--dk-border-nested-active-level-1);
  --dk-surface-primary-subtle: var(--dk-surface-primary-subtle-level-1);
  --dk-surface-primary-subtle-hover: var(--dk-surface-primary-subtle-hover-level-1);
  --dk-surface-primary-subtle-focus: var(--dk-surface-primary-subtle-focus-level-1);
  --dk-surface-error-subtle: var(--dk-surface-error-subtle-level-1);
  --dk-surface-error-subtle-hover: var(--dk-surface-error-subtle-hover-level-1);
  --dk-surface-error-subtle-focus: var(--dk-surface-error-subtle-focus-level-1);
  --dk-surface-success-subtle: var(--dk-surface-success-subtle-level-1);
  --dk-surface-warning-subtle: var(--dk-surface-warning-subtle-level-1);
  --dk-surface-information-subtle: var(--dk-surface-information-subtle-level-1);
  --dk-text-primary-default: var(--dk-text-primary-default-level-1);
  --dk-icon-primary-default: var(--dk-icon-primary-default-level-1);
  --dk-text-error-default: var(--dk-text-error-default-level-1);
  --dk-icon-error-default: var(--dk-icon-error-default-level-1);
  --dk-text-warning-default: var(--dk-text-warning-default-level-1);
  --dk-icon-warning-default: var(--dk-icon-warning-default-level-1);
  --dk-text-information-default: var(--dk-text-information-default-level-1);
  --dk-icon-information-default: var(--dk-icon-information-default-level-1);
  --dk-text-neutral-default: var(--dk-text-neutral-default-level-1);
  --dk-text-neutral-on-tint: var(--dk-text-neutral-on-tint-level-1);
  --dk-text-primary-on-tint: var(--dk-text-primary-on-tint-level-1);
  --dk-text-error-on-tint: var(--dk-text-error-on-tint-level-1);
  --dk-text-warning-on-tint: var(--dk-text-warning-on-tint-level-1);
  --dk-text-information-on-tint: var(--dk-text-information-on-tint-level-1);
  --dk-text-success-on-tint: var(--dk-text-primary-on-tint-level-1);
  --dk-icon-neutral-default: var(--dk-icon-neutral-default-level-1);
  --dk-text-neutral-subtle: var(--dk-text-neutral-subtle-level-1);
  --dk-text-neutral-subtle-hover: var(--dk-text-neutral-subtle-hover-level-1);
  --dk-text-neutral-subtle-focus: var(--dk-text-neutral-subtle-focus-level-1);
  --dk-icon-neutral-subtle: var(--dk-icon-neutral-subtle-level-1);
  --dk-border-neutral-hairline: var(--dk-border-neutral-hairline-level-1);
  --dk-border-primary-hairline: var(--dk-border-primary-hairline-level-1);
  --dk-border-error-hairline: var(--dk-border-error-hairline-level-1);
  --dk-border-warning-hairline: var(--dk-border-warning-hairline-level-1);
  --dk-border-information-hairline: var(--dk-border-information-hairline-level-1);
  --dk-border-primary-default: var(--dk-border-primary-default-level-1);
  --dk-border-error-default: var(--dk-border-error-default-level-1);
  --dk-border-warning-default: var(--dk-border-warning-default-level-1);
  --dk-border-information-default: var(--dk-border-information-default-level-1);
  --dk-text-disabled-default: var(--dk-text-disabled-default-level-1);
  --dk-icon-disabled-default: var(--dk-icon-disabled-default-level-1);
  --dk-surface-disabled-subtle: var(--dk-surface-disabled-subtle-level-1);
  --dk-border-disabled-subtle: var(--dk-border-disabled-subtle-level-1);
  --dk-text-disabled-subtle: var(--dk-text-disabled-subtle-level-1);
  --dk-icon-disabled-subtle: var(--dk-icon-disabled-subtle-level-1);
  --dk-border-disabled-elevation: var(--dk-border-disabled-elevation-level-1);
  --dk-surface-lifted-default: var(--dk-surface-lifted-default-level-1);
  --dk-surface-lifted-hover: var(--dk-surface-lifted-hover-level-1);
  --dk-surface-lifted-active: var(--dk-surface-lifted-active-level-1);
  --dk-text-success-default: var(--dk-text-primary-default);
  --dk-icon-success-default: var(--dk-icon-primary-default);
}
[data-theme="dark"][data-tone="inverse"][data-surface="below"],
[data-theme="dark"] [data-tone="inverse"][data-surface="below"]:not([data-theme]):where(:not(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *))) {
  --dk-text-default: var(--_reset-text-default);
  --dk-icon-default-body: var(--_reset-icon-default-body);
  --dk-surface-current: var(--dk-surface-level-1);
  --dk-border-hairline-current: var(--dk-border-hairline-level-1);
  --dk-surface-raised-default: var(--dk-surface-raised-default-level-1);
  --dk-surface-raised-hover: var(--dk-surface-raised-hover-level-1);
  --dk-surface-raised-active: var(--dk-surface-raised-active-level-1);
  --dk-surface-nested-default: var(--dk-surface-nested-default-level-1);
  --dk-surface-nested-hover: var(--dk-surface-nested-hover-level-1);
  --dk-surface-nested-active: var(--dk-surface-nested-active-level-1);
  --dk-border-raised-default: var(--dk-border-raised-default-level-1);
  --dk-border-raised-hover: var(--dk-border-raised-hover-level-1);
  --dk-border-raised-active: var(--dk-border-raised-active-level-1);
  --dk-border-raised-control-default: var(--dk-border-raised-control-default-level-1);
  --dk-border-raised-control-hover: var(--dk-border-raised-control-hover-level-1);
  --dk-border-raised-control-active: var(--dk-border-raised-control-active-level-1);
  --dk-border-nested-default: var(--dk-border-nested-default-level-1);
  --dk-border-nested-hover: var(--dk-border-nested-hover-level-1);
  --dk-border-nested-active: var(--dk-border-nested-active-level-1);
  --dk-surface-primary-subtle: var(--dk-surface-primary-subtle-level-1);
  --dk-surface-primary-subtle-hover: var(--dk-surface-primary-subtle-hover-level-1);
  --dk-surface-primary-subtle-focus: var(--dk-surface-primary-subtle-focus-level-1);
  --dk-surface-error-subtle: var(--dk-surface-error-subtle-level-1);
  --dk-surface-error-subtle-hover: var(--dk-surface-error-subtle-hover-level-1);
  --dk-surface-error-subtle-focus: var(--dk-surface-error-subtle-focus-level-1);
  --dk-surface-success-subtle: var(--dk-surface-success-subtle-level-1);
  --dk-surface-warning-subtle: var(--dk-surface-warning-subtle-level-1);
  --dk-surface-information-subtle: var(--dk-surface-information-subtle-level-1);
  --dk-text-primary-default: var(--dk-text-primary-default-level-1);
  --dk-icon-primary-default: var(--dk-icon-primary-default-level-1);
  --dk-text-error-default: var(--dk-text-error-default-level-1);
  --dk-icon-error-default: var(--dk-icon-error-default-level-1);
  --dk-text-warning-default: var(--dk-text-warning-default-level-1);
  --dk-icon-warning-default: var(--dk-icon-warning-default-level-1);
  --dk-text-information-default: var(--dk-text-information-default-level-1);
  --dk-icon-information-default: var(--dk-icon-information-default-level-1);
  --dk-text-neutral-default: var(--dk-text-neutral-default-level-1);
  --dk-text-neutral-on-tint: var(--dk-text-neutral-on-tint-level-1);
  --dk-text-primary-on-tint: var(--dk-text-primary-on-tint-level-1);
  --dk-text-error-on-tint: var(--dk-text-error-on-tint-level-1);
  --dk-text-warning-on-tint: var(--dk-text-warning-on-tint-level-1);
  --dk-text-information-on-tint: var(--dk-text-information-on-tint-level-1);
  --dk-text-success-on-tint: var(--dk-text-primary-on-tint-level-1);
  --dk-icon-neutral-default: var(--dk-icon-neutral-default-level-1);
  --dk-text-neutral-subtle: var(--dk-text-neutral-subtle-level-1);
  --dk-text-neutral-subtle-hover: var(--dk-text-neutral-subtle-hover-level-1);
  --dk-text-neutral-subtle-focus: var(--dk-text-neutral-subtle-focus-level-1);
  --dk-icon-neutral-subtle: var(--dk-icon-neutral-subtle-level-1);
  --dk-border-neutral-hairline: var(--dk-border-neutral-hairline-level-1);
  --dk-border-primary-hairline: var(--dk-border-primary-hairline-level-1);
  --dk-border-error-hairline: var(--dk-border-error-hairline-level-1);
  --dk-border-warning-hairline: var(--dk-border-warning-hairline-level-1);
  --dk-border-information-hairline: var(--dk-border-information-hairline-level-1);
  --dk-border-primary-default: var(--dk-border-primary-default-level-1);
  --dk-border-error-default: var(--dk-border-error-default-level-1);
  --dk-border-warning-default: var(--dk-border-warning-default-level-1);
  --dk-border-information-default: var(--dk-border-information-default-level-1);
  --dk-text-disabled-default: var(--dk-text-disabled-default-level-1);
  --dk-icon-disabled-default: var(--dk-icon-disabled-default-level-1);
  --dk-surface-disabled-subtle: var(--dk-surface-disabled-subtle-level-1);
  --dk-border-disabled-subtle: var(--dk-border-disabled-subtle-level-1);
  --dk-text-disabled-subtle: var(--dk-text-disabled-subtle-level-1);
  --dk-icon-disabled-subtle: var(--dk-icon-disabled-subtle-level-1);
  --dk-border-disabled-elevation: var(--dk-border-disabled-elevation-level-1);
  --dk-surface-lifted-default: var(--dk-surface-lifted-default-level-1);
  --dk-surface-lifted-hover: var(--dk-surface-lifted-hover-level-1);
  --dk-surface-lifted-active: var(--dk-surface-lifted-active-level-1);
  --dk-text-success-default: var(--dk-text-primary-default);
  --dk-icon-success-default: var(--dk-icon-primary-default);
}
[data-theme="light"] [data-tone="inverse"][data-surface="2"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"][data-surface="2"] {
  --dk-text-default: var(--_reset-text-default);
  --dk-icon-default-body: var(--_reset-icon-default-body);
  --dk-surface-current: var(--dk-surface-level-2);
  --dk-border-hairline-current: var(--dk-border-hairline-level-2);
  --dk-surface-raised-default: var(--dk-surface-raised-default-level-2);
  --dk-surface-raised-hover: var(--dk-surface-raised-hover-level-2);
  --dk-surface-raised-active: var(--dk-surface-raised-active-level-2);
  --dk-surface-nested-default: var(--dk-surface-nested-default-level-2);
  --dk-surface-nested-hover: var(--dk-surface-nested-hover-level-2);
  --dk-surface-nested-active: var(--dk-surface-nested-active-level-2);
  --dk-border-raised-default: var(--dk-border-raised-default-level-2);
  --dk-border-raised-hover: var(--dk-border-raised-hover-level-2);
  --dk-border-raised-active: var(--dk-border-raised-active-level-2);
  --dk-border-raised-control-default: var(--dk-border-raised-control-default-level-2);
  --dk-border-raised-control-hover: var(--dk-border-raised-control-hover-level-2);
  --dk-border-raised-control-active: var(--dk-border-raised-control-active-level-2);
  --dk-border-nested-default: var(--dk-border-nested-default-level-2);
  --dk-border-nested-hover: var(--dk-border-nested-hover-level-2);
  --dk-border-nested-active: var(--dk-border-nested-active-level-2);
  --dk-surface-primary-subtle: var(--dk-surface-primary-subtle-level-2);
  --dk-surface-primary-subtle-hover: var(--dk-surface-primary-subtle-hover-level-2);
  --dk-surface-primary-subtle-focus: var(--dk-surface-primary-subtle-focus-level-2);
  --dk-surface-error-subtle: var(--dk-surface-error-subtle-level-2);
  --dk-surface-error-subtle-hover: var(--dk-surface-error-subtle-hover-level-2);
  --dk-surface-error-subtle-focus: var(--dk-surface-error-subtle-focus-level-2);
  --dk-surface-success-subtle: var(--dk-surface-success-subtle-level-2);
  --dk-surface-warning-subtle: var(--dk-surface-warning-subtle-level-2);
  --dk-surface-information-subtle: var(--dk-surface-information-subtle-level-2);
  --dk-text-primary-default: var(--dk-text-primary-default-level-2);
  --dk-icon-primary-default: var(--dk-icon-primary-default-level-2);
  --dk-text-error-default: var(--dk-text-error-default-level-2);
  --dk-icon-error-default: var(--dk-icon-error-default-level-2);
  --dk-text-warning-default: var(--dk-text-warning-default-level-2);
  --dk-icon-warning-default: var(--dk-icon-warning-default-level-2);
  --dk-text-information-default: var(--dk-text-information-default-level-2);
  --dk-icon-information-default: var(--dk-icon-information-default-level-2);
  --dk-text-neutral-default: var(--dk-text-neutral-default-level-2);
  --dk-text-neutral-on-tint: var(--dk-text-neutral-on-tint-level-2);
  --dk-text-primary-on-tint: var(--dk-text-primary-on-tint-level-2);
  --dk-text-error-on-tint: var(--dk-text-error-on-tint-level-2);
  --dk-text-warning-on-tint: var(--dk-text-warning-on-tint-level-2);
  --dk-text-information-on-tint: var(--dk-text-information-on-tint-level-2);
  --dk-text-success-on-tint: var(--dk-text-primary-on-tint-level-2);
  --dk-icon-neutral-default: var(--dk-icon-neutral-default-level-2);
  --dk-text-neutral-subtle: var(--dk-text-neutral-subtle-level-2);
  --dk-text-neutral-subtle-hover: var(--dk-text-neutral-subtle-hover-level-2);
  --dk-text-neutral-subtle-focus: var(--dk-text-neutral-subtle-focus-level-2);
  --dk-icon-neutral-subtle: var(--dk-icon-neutral-subtle-level-2);
  --dk-border-neutral-hairline: var(--dk-border-neutral-hairline-level-2);
  --dk-border-primary-hairline: var(--dk-border-primary-hairline-level-2);
  --dk-border-error-hairline: var(--dk-border-error-hairline-level-2);
  --dk-border-warning-hairline: var(--dk-border-warning-hairline-level-2);
  --dk-border-information-hairline: var(--dk-border-information-hairline-level-2);
  --dk-border-primary-default: var(--dk-border-primary-default-level-2);
  --dk-border-error-default: var(--dk-border-error-default-level-2);
  --dk-border-warning-default: var(--dk-border-warning-default-level-2);
  --dk-border-information-default: var(--dk-border-information-default-level-2);
  --dk-text-disabled-default: var(--dk-text-disabled-default-level-2);
  --dk-icon-disabled-default: var(--dk-icon-disabled-default-level-2);
  --dk-surface-disabled-subtle: var(--dk-surface-disabled-subtle-level-2);
  --dk-border-disabled-subtle: var(--dk-border-disabled-subtle-level-2);
  --dk-text-disabled-subtle: var(--dk-text-disabled-subtle-level-2);
  --dk-icon-disabled-subtle: var(--dk-icon-disabled-subtle-level-2);
  --dk-border-disabled-elevation: var(--dk-border-disabled-elevation-level-2);
  --dk-surface-lifted-default: var(--dk-surface-lifted-default-level-2);
  --dk-surface-lifted-hover: var(--dk-surface-lifted-hover-level-2);
  --dk-surface-lifted-active: var(--dk-surface-lifted-active-level-2);
  --dk-border-control-default: var(--dk-border-control-default-level-2);
  --dk-border-control-hover: var(--dk-border-control-hover-level-2);
  --dk-border-control-active: var(--dk-border-control-active-level-2);
  --dk-border-control-lifted-default: var(--dk-border-control-lifted-default-level-2);
  --dk-border-control-lifted-hover: var(--dk-border-control-lifted-hover-level-2);
  --dk-border-control-lifted-active: var(--dk-border-control-lifted-active-level-2);
  --dk-border-field-raised-default: var(--dk-border-field-raised-default-level-2);
  --dk-text-success-default: var(--dk-text-primary-default);
  --dk-icon-success-default: var(--dk-icon-primary-default);
}
[data-theme="light"] [data-tone="inverse"][data-surface="below"]:not([data-theme]):where(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *)) {
  --dk-text-default: var(--_reset-text-default);
  --dk-icon-default-body: var(--_reset-icon-default-body);
  --dk-surface-current: var(--dk-surface-level-2);
  --dk-border-hairline-current: var(--dk-border-hairline-level-2);
  --dk-surface-raised-default: var(--dk-surface-raised-default-level-2);
  --dk-surface-raised-hover: var(--dk-surface-raised-hover-level-2);
  --dk-surface-raised-active: var(--dk-surface-raised-active-level-2);
  --dk-surface-nested-default: var(--dk-surface-nested-default-level-2);
  --dk-surface-nested-hover: var(--dk-surface-nested-hover-level-2);
  --dk-surface-nested-active: var(--dk-surface-nested-active-level-2);
  --dk-border-raised-default: var(--dk-border-raised-default-level-2);
  --dk-border-raised-hover: var(--dk-border-raised-hover-level-2);
  --dk-border-raised-active: var(--dk-border-raised-active-level-2);
  --dk-border-raised-control-default: var(--dk-border-raised-control-default-level-2);
  --dk-border-raised-control-hover: var(--dk-border-raised-control-hover-level-2);
  --dk-border-raised-control-active: var(--dk-border-raised-control-active-level-2);
  --dk-border-nested-default: var(--dk-border-nested-default-level-2);
  --dk-border-nested-hover: var(--dk-border-nested-hover-level-2);
  --dk-border-nested-active: var(--dk-border-nested-active-level-2);
  --dk-surface-primary-subtle: var(--dk-surface-primary-subtle-level-2);
  --dk-surface-primary-subtle-hover: var(--dk-surface-primary-subtle-hover-level-2);
  --dk-surface-primary-subtle-focus: var(--dk-surface-primary-subtle-focus-level-2);
  --dk-surface-error-subtle: var(--dk-surface-error-subtle-level-2);
  --dk-surface-error-subtle-hover: var(--dk-surface-error-subtle-hover-level-2);
  --dk-surface-error-subtle-focus: var(--dk-surface-error-subtle-focus-level-2);
  --dk-surface-success-subtle: var(--dk-surface-success-subtle-level-2);
  --dk-surface-warning-subtle: var(--dk-surface-warning-subtle-level-2);
  --dk-surface-information-subtle: var(--dk-surface-information-subtle-level-2);
  --dk-text-primary-default: var(--dk-text-primary-default-level-2);
  --dk-icon-primary-default: var(--dk-icon-primary-default-level-2);
  --dk-text-error-default: var(--dk-text-error-default-level-2);
  --dk-icon-error-default: var(--dk-icon-error-default-level-2);
  --dk-text-warning-default: var(--dk-text-warning-default-level-2);
  --dk-icon-warning-default: var(--dk-icon-warning-default-level-2);
  --dk-text-information-default: var(--dk-text-information-default-level-2);
  --dk-icon-information-default: var(--dk-icon-information-default-level-2);
  --dk-text-neutral-default: var(--dk-text-neutral-default-level-2);
  --dk-text-neutral-on-tint: var(--dk-text-neutral-on-tint-level-2);
  --dk-text-primary-on-tint: var(--dk-text-primary-on-tint-level-2);
  --dk-text-error-on-tint: var(--dk-text-error-on-tint-level-2);
  --dk-text-warning-on-tint: var(--dk-text-warning-on-tint-level-2);
  --dk-text-information-on-tint: var(--dk-text-information-on-tint-level-2);
  --dk-text-success-on-tint: var(--dk-text-primary-on-tint-level-2);
  --dk-icon-neutral-default: var(--dk-icon-neutral-default-level-2);
  --dk-text-neutral-subtle: var(--dk-text-neutral-subtle-level-2);
  --dk-text-neutral-subtle-hover: var(--dk-text-neutral-subtle-hover-level-2);
  --dk-text-neutral-subtle-focus: var(--dk-text-neutral-subtle-focus-level-2);
  --dk-icon-neutral-subtle: var(--dk-icon-neutral-subtle-level-2);
  --dk-border-neutral-hairline: var(--dk-border-neutral-hairline-level-2);
  --dk-border-primary-hairline: var(--dk-border-primary-hairline-level-2);
  --dk-border-error-hairline: var(--dk-border-error-hairline-level-2);
  --dk-border-warning-hairline: var(--dk-border-warning-hairline-level-2);
  --dk-border-information-hairline: var(--dk-border-information-hairline-level-2);
  --dk-border-primary-default: var(--dk-border-primary-default-level-2);
  --dk-border-error-default: var(--dk-border-error-default-level-2);
  --dk-border-warning-default: var(--dk-border-warning-default-level-2);
  --dk-border-information-default: var(--dk-border-information-default-level-2);
  --dk-text-disabled-default: var(--dk-text-disabled-default-level-2);
  --dk-icon-disabled-default: var(--dk-icon-disabled-default-level-2);
  --dk-surface-disabled-subtle: var(--dk-surface-disabled-subtle-level-2);
  --dk-border-disabled-subtle: var(--dk-border-disabled-subtle-level-2);
  --dk-text-disabled-subtle: var(--dk-text-disabled-subtle-level-2);
  --dk-icon-disabled-subtle: var(--dk-icon-disabled-subtle-level-2);
  --dk-border-disabled-elevation: var(--dk-border-disabled-elevation-level-2);
  --dk-surface-lifted-default: var(--dk-surface-lifted-default-level-2);
  --dk-surface-lifted-hover: var(--dk-surface-lifted-hover-level-2);
  --dk-surface-lifted-active: var(--dk-surface-lifted-active-level-2);
  --dk-border-control-default: var(--dk-border-control-default-level-2);
  --dk-border-control-hover: var(--dk-border-control-hover-level-2);
  --dk-border-control-active: var(--dk-border-control-active-level-2);
  --dk-border-control-lifted-default: var(--dk-border-control-lifted-default-level-2);
  --dk-border-control-lifted-hover: var(--dk-border-control-lifted-hover-level-2);
  --dk-border-control-lifted-active: var(--dk-border-control-lifted-active-level-2);
  --dk-border-field-raised-default: var(--dk-border-field-raised-default-level-2);
  --dk-text-success-default: var(--dk-text-primary-default);
  --dk-icon-success-default: var(--dk-icon-primary-default);
}
[data-theme="dark"] [data-tone="inverse"][data-surface="2"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"][data-surface="2"] {
  --dk-text-default: var(--_reset-text-default);
  --dk-icon-default-body: var(--_reset-icon-default-body);
  --dk-surface-current: var(--dk-surface-level-2);
  --dk-border-hairline-current: var(--dk-border-hairline-level-2);
  --dk-surface-raised-default: var(--dk-surface-raised-default-level-2);
  --dk-surface-raised-hover: var(--dk-surface-raised-hover-level-2);
  --dk-surface-raised-active: var(--dk-surface-raised-active-level-2);
  --dk-surface-nested-default: var(--dk-surface-nested-default-level-2);
  --dk-surface-nested-hover: var(--dk-surface-nested-hover-level-2);
  --dk-surface-nested-active: var(--dk-surface-nested-active-level-2);
  --dk-border-raised-default: var(--dk-border-raised-default-level-2);
  --dk-border-raised-hover: var(--dk-border-raised-hover-level-2);
  --dk-border-raised-active: var(--dk-border-raised-active-level-2);
  --dk-border-raised-control-default: var(--dk-border-raised-control-default-level-2);
  --dk-border-raised-control-hover: var(--dk-border-raised-control-hover-level-2);
  --dk-border-raised-control-active: var(--dk-border-raised-control-active-level-2);
  --dk-border-nested-default: var(--dk-border-nested-default-level-2);
  --dk-border-nested-hover: var(--dk-border-nested-hover-level-2);
  --dk-border-nested-active: var(--dk-border-nested-active-level-2);
  --dk-surface-primary-subtle: var(--dk-surface-primary-subtle-level-2);
  --dk-surface-primary-subtle-hover: var(--dk-surface-primary-subtle-hover-level-2);
  --dk-surface-primary-subtle-focus: var(--dk-surface-primary-subtle-focus-level-2);
  --dk-surface-error-subtle: var(--dk-surface-error-subtle-level-2);
  --dk-surface-error-subtle-hover: var(--dk-surface-error-subtle-hover-level-2);
  --dk-surface-error-subtle-focus: var(--dk-surface-error-subtle-focus-level-2);
  --dk-surface-success-subtle: var(--dk-surface-success-subtle-level-2);
  --dk-surface-warning-subtle: var(--dk-surface-warning-subtle-level-2);
  --dk-surface-information-subtle: var(--dk-surface-information-subtle-level-2);
  --dk-text-primary-default: var(--dk-text-primary-default-level-2);
  --dk-icon-primary-default: var(--dk-icon-primary-default-level-2);
  --dk-text-error-default: var(--dk-text-error-default-level-2);
  --dk-icon-error-default: var(--dk-icon-error-default-level-2);
  --dk-text-warning-default: var(--dk-text-warning-default-level-2);
  --dk-icon-warning-default: var(--dk-icon-warning-default-level-2);
  --dk-text-information-default: var(--dk-text-information-default-level-2);
  --dk-icon-information-default: var(--dk-icon-information-default-level-2);
  --dk-text-neutral-default: var(--dk-text-neutral-default-level-2);
  --dk-text-neutral-on-tint: var(--dk-text-neutral-on-tint-level-2);
  --dk-text-primary-on-tint: var(--dk-text-primary-on-tint-level-2);
  --dk-text-error-on-tint: var(--dk-text-error-on-tint-level-2);
  --dk-text-warning-on-tint: var(--dk-text-warning-on-tint-level-2);
  --dk-text-information-on-tint: var(--dk-text-information-on-tint-level-2);
  --dk-text-success-on-tint: var(--dk-text-primary-on-tint-level-2);
  --dk-icon-neutral-default: var(--dk-icon-neutral-default-level-2);
  --dk-text-neutral-subtle: var(--dk-text-neutral-subtle-level-2);
  --dk-text-neutral-subtle-hover: var(--dk-text-neutral-subtle-hover-level-2);
  --dk-text-neutral-subtle-focus: var(--dk-text-neutral-subtle-focus-level-2);
  --dk-icon-neutral-subtle: var(--dk-icon-neutral-subtle-level-2);
  --dk-border-neutral-hairline: var(--dk-border-neutral-hairline-level-2);
  --dk-border-primary-hairline: var(--dk-border-primary-hairline-level-2);
  --dk-border-error-hairline: var(--dk-border-error-hairline-level-2);
  --dk-border-warning-hairline: var(--dk-border-warning-hairline-level-2);
  --dk-border-information-hairline: var(--dk-border-information-hairline-level-2);
  --dk-border-primary-default: var(--dk-border-primary-default-level-2);
  --dk-border-error-default: var(--dk-border-error-default-level-2);
  --dk-border-warning-default: var(--dk-border-warning-default-level-2);
  --dk-border-information-default: var(--dk-border-information-default-level-2);
  --dk-text-disabled-default: var(--dk-text-disabled-default-level-2);
  --dk-icon-disabled-default: var(--dk-icon-disabled-default-level-2);
  --dk-surface-disabled-subtle: var(--dk-surface-disabled-subtle-level-2);
  --dk-border-disabled-subtle: var(--dk-border-disabled-subtle-level-2);
  --dk-text-disabled-subtle: var(--dk-text-disabled-subtle-level-2);
  --dk-icon-disabled-subtle: var(--dk-icon-disabled-subtle-level-2);
  --dk-border-disabled-elevation: var(--dk-border-disabled-elevation-level-2);
  --dk-surface-lifted-default: var(--dk-surface-lifted-default-level-2);
  --dk-surface-lifted-hover: var(--dk-surface-lifted-hover-level-2);
  --dk-surface-lifted-active: var(--dk-surface-lifted-active-level-2);
  --dk-border-control-default: var(--dk-border-control-default-level-2);
  --dk-border-control-hover: var(--dk-border-control-hover-level-2);
  --dk-border-control-active: var(--dk-border-control-active-level-2);
  --dk-border-control-lifted-default: var(--dk-border-control-lifted-default-level-2);
  --dk-border-control-lifted-hover: var(--dk-border-control-lifted-hover-level-2);
  --dk-border-control-lifted-active: var(--dk-border-control-lifted-active-level-2);
  --dk-border-field-raised-default: var(--dk-border-field-raised-default-level-2);
  --dk-text-success-default: var(--dk-text-primary-default);
  --dk-icon-success-default: var(--dk-icon-primary-default);
}
[data-theme="dark"] [data-tone="inverse"][data-surface="below"]:not([data-theme]):where(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *)) {
  --dk-text-default: var(--_reset-text-default);
  --dk-icon-default-body: var(--_reset-icon-default-body);
  --dk-surface-current: var(--dk-surface-level-2);
  --dk-border-hairline-current: var(--dk-border-hairline-level-2);
  --dk-surface-raised-default: var(--dk-surface-raised-default-level-2);
  --dk-surface-raised-hover: var(--dk-surface-raised-hover-level-2);
  --dk-surface-raised-active: var(--dk-surface-raised-active-level-2);
  --dk-surface-nested-default: var(--dk-surface-nested-default-level-2);
  --dk-surface-nested-hover: var(--dk-surface-nested-hover-level-2);
  --dk-surface-nested-active: var(--dk-surface-nested-active-level-2);
  --dk-border-raised-default: var(--dk-border-raised-default-level-2);
  --dk-border-raised-hover: var(--dk-border-raised-hover-level-2);
  --dk-border-raised-active: var(--dk-border-raised-active-level-2);
  --dk-border-raised-control-default: var(--dk-border-raised-control-default-level-2);
  --dk-border-raised-control-hover: var(--dk-border-raised-control-hover-level-2);
  --dk-border-raised-control-active: var(--dk-border-raised-control-active-level-2);
  --dk-border-nested-default: var(--dk-border-nested-default-level-2);
  --dk-border-nested-hover: var(--dk-border-nested-hover-level-2);
  --dk-border-nested-active: var(--dk-border-nested-active-level-2);
  --dk-surface-primary-subtle: var(--dk-surface-primary-subtle-level-2);
  --dk-surface-primary-subtle-hover: var(--dk-surface-primary-subtle-hover-level-2);
  --dk-surface-primary-subtle-focus: var(--dk-surface-primary-subtle-focus-level-2);
  --dk-surface-error-subtle: var(--dk-surface-error-subtle-level-2);
  --dk-surface-error-subtle-hover: var(--dk-surface-error-subtle-hover-level-2);
  --dk-surface-error-subtle-focus: var(--dk-surface-error-subtle-focus-level-2);
  --dk-surface-success-subtle: var(--dk-surface-success-subtle-level-2);
  --dk-surface-warning-subtle: var(--dk-surface-warning-subtle-level-2);
  --dk-surface-information-subtle: var(--dk-surface-information-subtle-level-2);
  --dk-text-primary-default: var(--dk-text-primary-default-level-2);
  --dk-icon-primary-default: var(--dk-icon-primary-default-level-2);
  --dk-text-error-default: var(--dk-text-error-default-level-2);
  --dk-icon-error-default: var(--dk-icon-error-default-level-2);
  --dk-text-warning-default: var(--dk-text-warning-default-level-2);
  --dk-icon-warning-default: var(--dk-icon-warning-default-level-2);
  --dk-text-information-default: var(--dk-text-information-default-level-2);
  --dk-icon-information-default: var(--dk-icon-information-default-level-2);
  --dk-text-neutral-default: var(--dk-text-neutral-default-level-2);
  --dk-text-neutral-on-tint: var(--dk-text-neutral-on-tint-level-2);
  --dk-text-primary-on-tint: var(--dk-text-primary-on-tint-level-2);
  --dk-text-error-on-tint: var(--dk-text-error-on-tint-level-2);
  --dk-text-warning-on-tint: var(--dk-text-warning-on-tint-level-2);
  --dk-text-information-on-tint: var(--dk-text-information-on-tint-level-2);
  --dk-text-success-on-tint: var(--dk-text-primary-on-tint-level-2);
  --dk-icon-neutral-default: var(--dk-icon-neutral-default-level-2);
  --dk-text-neutral-subtle: var(--dk-text-neutral-subtle-level-2);
  --dk-text-neutral-subtle-hover: var(--dk-text-neutral-subtle-hover-level-2);
  --dk-text-neutral-subtle-focus: var(--dk-text-neutral-subtle-focus-level-2);
  --dk-icon-neutral-subtle: var(--dk-icon-neutral-subtle-level-2);
  --dk-border-neutral-hairline: var(--dk-border-neutral-hairline-level-2);
  --dk-border-primary-hairline: var(--dk-border-primary-hairline-level-2);
  --dk-border-error-hairline: var(--dk-border-error-hairline-level-2);
  --dk-border-warning-hairline: var(--dk-border-warning-hairline-level-2);
  --dk-border-information-hairline: var(--dk-border-information-hairline-level-2);
  --dk-border-primary-default: var(--dk-border-primary-default-level-2);
  --dk-border-error-default: var(--dk-border-error-default-level-2);
  --dk-border-warning-default: var(--dk-border-warning-default-level-2);
  --dk-border-information-default: var(--dk-border-information-default-level-2);
  --dk-text-disabled-default: var(--dk-text-disabled-default-level-2);
  --dk-icon-disabled-default: var(--dk-icon-disabled-default-level-2);
  --dk-surface-disabled-subtle: var(--dk-surface-disabled-subtle-level-2);
  --dk-border-disabled-subtle: var(--dk-border-disabled-subtle-level-2);
  --dk-text-disabled-subtle: var(--dk-text-disabled-subtle-level-2);
  --dk-icon-disabled-subtle: var(--dk-icon-disabled-subtle-level-2);
  --dk-border-disabled-elevation: var(--dk-border-disabled-elevation-level-2);
  --dk-surface-lifted-default: var(--dk-surface-lifted-default-level-2);
  --dk-surface-lifted-hover: var(--dk-surface-lifted-hover-level-2);
  --dk-surface-lifted-active: var(--dk-surface-lifted-active-level-2);
  --dk-border-control-default: var(--dk-border-control-default-level-2);
  --dk-border-control-hover: var(--dk-border-control-hover-level-2);
  --dk-border-control-active: var(--dk-border-control-active-level-2);
  --dk-border-control-lifted-default: var(--dk-border-control-lifted-default-level-2);
  --dk-border-control-lifted-hover: var(--dk-border-control-lifted-hover-level-2);
  --dk-border-control-lifted-active: var(--dk-border-control-lifted-active-level-2);
  --dk-border-field-raised-default: var(--dk-border-field-raised-default-level-2);
  --dk-text-success-default: var(--dk-text-primary-default);
  --dk-icon-success-default: var(--dk-icon-primary-default);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-sidebar-panel: var(--dk-color-neutral-25);
  --dk-surface-sidebar-panel-hover: var(--dk-color-neutral-50);
  --dk-border-sidebar-panel: var(--dk-color-neutral-50);
  --dk-border-sidebar-panel-hover: var(--dk-color-neutral-200);
  --dk-border-sidebar-panel-active: var(--dk-color-neutral-300);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-sidebar-panel: var(--dk-color-neutral-1100);
  --dk-surface-sidebar-panel-hover: var(--dk-color-neutral-1000);
  --dk-border-sidebar-panel: var(--dk-color-neutral-1000);
  --dk-border-sidebar-panel-hover: var(--dk-color-neutral-800);
  --dk-border-sidebar-panel-active: var(--dk-color-neutral-600);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-primary-brand: var(--dk-color-primary-500);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-primary-brand: var(--dk-color-primary-400);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-primary-mark: var(--dk-color-primary-600);
  --dk-surface-success-mark: var(--dk-color-primary-600);
  --dk-surface-error-mark: var(--dk-color-error-600);
  --dk-surface-warning-mark: var(--dk-color-warning-600);
  --dk-surface-information-mark: var(--dk-color-information-600);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-primary-mark: var(--dk-color-primary-600);
  --dk-surface-success-mark: var(--dk-color-primary-600);
  --dk-surface-error-mark: var(--dk-color-error-600);
  --dk-surface-warning-mark: var(--dk-color-warning-600);
  --dk-surface-information-mark: var(--dk-color-information-600);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-primary-subtle-active: var(--dk-color-primary-300);
  --dk-surface-success-subtle-active: var(--dk-color-success-300);
  --dk-surface-error-subtle-active: var(--dk-color-error-300);
  --dk-surface-warning-subtle-active: var(--dk-color-warning-300);
  --dk-surface-information-subtle-active: var(--dk-color-information-300);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-primary-subtle-active: var(--dk-color-primary-600);
  --dk-surface-success-subtle-active: var(--dk-color-success-600);
  --dk-surface-error-subtle-active: var(--dk-color-error-600);
  --dk-surface-warning-subtle-active: var(--dk-color-warning-600);
  --dk-surface-information-subtle-active: var(--dk-color-information-600);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-border-base-black: var(--dk-color-base-black);
  --dk-border-base-white: var(--dk-color-base-white);
  --dk-border-card-default: var(--dk-color-neutral-50);
  --dk-border-card-secondary: var(--dk-color-neutral-100);
  --dk-border-default-body: var(--dk-color-base-black);
  --dk-border-default-body-reverse: var(--dk-color-base-white);
  --dk-border-disabled-default: var(--dk-color-neutral-400);
  --dk-border-disabled-elevation: var(--dk-color-neutral-200);
  --dk-border-disabled-on-color: var(--dk-color-neutral-200);
  --dk-border-disabled-subtle: var(--dk-color-neutral-50);
  --dk-border-error-default: var(--dk-color-error-500);
  --dk-border-error-elevation: var(--dk-color-error-800);
  --dk-border-error-elevation-focus: var(--dk-color-error-700);
  --dk-border-error-elevation-hover: var(--dk-color-error-700);
  --dk-border-error-focus: var(--dk-color-error-700);
  --dk-border-error-hover: var(--dk-color-error-600);
  --dk-border-error-subtle: var(--dk-color-error-50);
  --dk-border-error-subtle-focus: var(--dk-color-error-200);
  --dk-border-error-subtle-hover: var(--dk-color-error-100);
  --dk-border-glass-default: var(--dk-color-neutral-50);
  --dk-border-information-default: var(--dk-color-information-500);
  --dk-border-information-elevation: var(--dk-color-information-800);
  --dk-border-information-elevation-focus: var(--dk-color-information-700);
  --dk-border-information-elevation-hover: var(--dk-color-information-700);
  --dk-border-information-focus: var(--dk-color-information-700);
  --dk-border-information-hover: var(--dk-color-information-600);
  --dk-border-information-subtle: var(--dk-color-information-50);
  --dk-border-information-subtle-focus: var(--dk-color-information-200);
  --dk-border-information-subtle-hover: var(--dk-color-information-100);
  --dk-border-neutral-default: var(--dk-color-neutral-600);
  --dk-border-neutral-elevation: var(--dk-color-neutral-800);
  --dk-border-neutral-elevation-focus: var(--dk-color-neutral-700);
  --dk-border-neutral-elevation-hover: var(--dk-color-neutral-700);
  --dk-border-neutral-focus: var(--dk-color-neutral-800);
  --dk-border-neutral-hover: var(--dk-color-neutral-700);
  --dk-border-neutral-subtle: var(--dk-color-neutral-200);
  --dk-border-neutral-subtle-focus: var(--dk-color-neutral-500);
  --dk-border-neutral-subtle-hover: var(--dk-color-neutral-400);
  --dk-border-page-default: var(--dk-color-neutral-50);
  --dk-border-page-secondary: var(--dk-color-neutral-200);
  --dk-border-primary-default: var(--dk-color-primary-500);
  --dk-border-primary-disabled: var(--dk-color-primary-300);
  --dk-border-primary-elevation: var(--dk-color-primary-800);
  --dk-border-primary-elevation-focus: var(--dk-color-primary-700);
  --dk-border-primary-elevation-hover: var(--dk-color-primary-700);
  --dk-border-primary-focus: var(--dk-color-primary-700);
  --dk-border-primary-hover: var(--dk-color-primary-600);
  --dk-border-primary-on-color: var(--dk-color-primary-200);
  --dk-border-primary-subtle: var(--dk-color-primary-100);
  --dk-border-primary-subtle-focus: var(--dk-color-primary-300);
  --dk-border-primary-subtle-hover: var(--dk-color-primary-200);
  --dk-border-success-default: var(--dk-color-success-500);
  --dk-border-success-elevation: var(--dk-color-success-800);
  --dk-border-success-elevation-focus: var(--dk-color-success-700);
  --dk-border-success-elevation-hover: var(--dk-color-success-700);
  --dk-border-success-focus: var(--dk-color-success-700);
  --dk-border-success-hover: var(--dk-color-success-600);
  --dk-border-success-subtle: var(--dk-color-success-50);
  --dk-border-success-subtle-focus: var(--dk-color-success-200);
  --dk-border-success-subtle-hover: var(--dk-color-success-100);
  --dk-border-warning-default: var(--dk-color-warning-500);
  --dk-border-warning-elevation: var(--dk-color-warning-800);
  --dk-border-warning-elevation-focus: var(--dk-color-warning-700);
  --dk-border-warning-elevation-hover: var(--dk-color-warning-700);
  --dk-border-warning-focus: var(--dk-color-warning-700);
  --dk-border-warning-hover: var(--dk-color-warning-600);
  --dk-border-warning-subtle: var(--dk-color-warning-50);
  --dk-border-warning-subtle-focus: var(--dk-color-warning-200);
  --dk-border-warning-subtle-hover: var(--dk-color-warning-100);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-border-base-black: var(--dk-color-base-black);
  --dk-border-base-white: var(--dk-color-base-white);
  --dk-border-card-default: var(--dk-color-neutral-600);
  --dk-border-card-secondary: var(--dk-color-neutral-500);
  --dk-border-default-body: var(--dk-color-base-white);
  --dk-border-default-body-reverse: var(--dk-color-base-black);
  --dk-border-disabled-default: var(--dk-color-neutral-400);
  --dk-border-disabled-elevation: var(--dk-color-neutral-300);
  --dk-border-disabled-on-color: var(--dk-color-neutral-700);
  --dk-border-disabled-subtle: var(--dk-color-neutral-800);
  --dk-border-error-default: var(--dk-color-error-400);
  --dk-border-error-elevation: var(--dk-color-error-800);
  --dk-border-error-elevation-focus: var(--dk-color-error-700);
  --dk-border-error-elevation-hover: var(--dk-color-error-700);
  --dk-border-error-focus: var(--dk-color-error-200);
  --dk-border-error-hover: var(--dk-color-error-300);
  --dk-border-error-subtle: var(--dk-color-error-50);
  --dk-border-error-subtle-focus: var(--dk-color-error-200);
  --dk-border-error-subtle-hover: var(--dk-color-error-100);
  --dk-border-glass-default: var(--dk-color-neutral-800);
  --dk-border-information-default: var(--dk-color-information-400);
  --dk-border-information-elevation: var(--dk-color-information-800);
  --dk-border-information-elevation-focus: var(--dk-color-information-700);
  --dk-border-information-elevation-hover: var(--dk-color-information-700);
  --dk-border-information-focus: var(--dk-color-information-200);
  --dk-border-information-hover: var(--dk-color-information-300);
  --dk-border-information-subtle: var(--dk-color-information-50);
  --dk-border-information-subtle-focus: var(--dk-color-information-200);
  --dk-border-information-subtle-hover: var(--dk-color-information-100);
  --dk-border-neutral-default: var(--dk-color-neutral-300);
  --dk-border-neutral-elevation: var(--dk-color-neutral-800);
  --dk-border-neutral-elevation-focus: var(--dk-color-neutral-700);
  --dk-border-neutral-elevation-hover: var(--dk-color-neutral-700);
  --dk-border-neutral-focus: var(--dk-color-neutral-100);
  --dk-border-neutral-hover: var(--dk-color-neutral-200);
  --dk-border-neutral-subtle: var(--dk-color-neutral-600);
  --dk-border-neutral-subtle-focus: var(--dk-color-neutral-400);
  --dk-border-neutral-subtle-hover: var(--dk-color-neutral-500);
  --dk-border-page-default: var(--dk-color-neutral-700);
  --dk-border-page-secondary: var(--dk-color-neutral-800);
  --dk-border-primary-default: var(--dk-color-primary-500);
  --dk-border-primary-disabled: var(--dk-color-primary-700);
  --dk-border-primary-elevation: var(--dk-color-primary-800);
  --dk-border-primary-elevation-focus: var(--dk-color-primary-600);
  --dk-border-primary-elevation-hover: var(--dk-color-primary-700);
  --dk-border-primary-focus: var(--dk-color-primary-300);
  --dk-border-primary-hover: var(--dk-color-primary-400);
  --dk-border-primary-on-color: var(--dk-color-primary-700);
  --dk-border-primary-subtle: var(--dk-color-primary-800);
  --dk-border-primary-subtle-focus: var(--dk-color-primary-600);
  --dk-border-primary-subtle-hover: var(--dk-color-primary-700);
  --dk-border-success-default: var(--dk-color-success-400);
  --dk-border-success-elevation: var(--dk-color-success-800);
  --dk-border-success-elevation-focus: var(--dk-color-success-700);
  --dk-border-success-elevation-hover: var(--dk-color-success-700);
  --dk-border-success-focus: var(--dk-color-success-200);
  --dk-border-success-hover: var(--dk-color-success-300);
  --dk-border-success-subtle: var(--dk-color-success-50);
  --dk-border-success-subtle-focus: var(--dk-color-success-200);
  --dk-border-success-subtle-hover: var(--dk-color-success-100);
  --dk-border-warning-default: var(--dk-color-warning-400);
  --dk-border-warning-elevation: var(--dk-color-warning-800);
  --dk-border-warning-elevation-focus: var(--dk-color-warning-700);
  --dk-border-warning-elevation-hover: var(--dk-color-warning-700);
  --dk-border-warning-focus: var(--dk-color-warning-200);
  --dk-border-warning-hover: var(--dk-color-warning-300);
  --dk-border-warning-subtle: var(--dk-color-warning-50);
  --dk-border-warning-subtle-focus: var(--dk-color-warning-200);
  --dk-border-warning-subtle-hover: var(--dk-color-warning-100);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-border-raised-default: var(--dk-color-neutral-50);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-border-raised-default: var(--dk-color-neutral-800);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-border-raised-hover: var(--dk-color-neutral-100);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-border-raised-hover: var(--dk-color-neutral-700);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-border-raised-active: var(--dk-color-neutral-200);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-border-raised-active: var(--dk-color-neutral-600);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-border-control-default: var(--dk-color-neutral-100);
  --dk-border-control-hover: var(--dk-color-neutral-200);
  --dk-border-control-active: var(--dk-color-neutral-300);
  --dk-border-control-default-level-2: var(--dk-color-neutral-200);
  --dk-border-control-hover-level-2: var(--dk-color-neutral-300);
  --dk-border-control-active-level-2: var(--dk-color-neutral-400);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-border-control-default: var(--dk-color-neutral-800);
  --dk-border-control-hover: var(--dk-color-neutral-700);
  --dk-border-control-active: var(--dk-color-neutral-600);
  --dk-border-control-default-level-2: var(--dk-color-neutral-700);
  --dk-border-control-hover-level-2: var(--dk-color-neutral-600);
  --dk-border-control-active-level-2: var(--dk-color-neutral-500);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-border-control-lifted-default: var(--dk-color-neutral-50);
  --dk-border-control-lifted-hover: var(--dk-color-neutral-100);
  --dk-border-control-lifted-active: var(--dk-color-neutral-200);
  --dk-border-control-lifted-default-level-2: var(--dk-color-neutral-100);
  --dk-border-control-lifted-hover-level-2: var(--dk-color-neutral-200);
  --dk-border-control-lifted-active-level-2: var(--dk-color-neutral-300);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-border-control-lifted-default: var(--dk-color-neutral-850);
  --dk-border-control-lifted-hover: var(--dk-color-neutral-750);
  --dk-border-control-lifted-active: var(--dk-color-neutral-650);
  --dk-border-control-lifted-default-level-2: var(--dk-color-neutral-750);
  --dk-border-control-lifted-hover-level-2: var(--dk-color-neutral-650);
  --dk-border-control-lifted-active-level-2: var(--dk-color-neutral-550);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-border-raised-control-default: var(--dk-color-neutral-25);
  --dk-border-raised-control-hover: var(--dk-color-neutral-50);
  --dk-border-raised-control-active: var(--dk-color-neutral-100);
  --dk-border-raised-control-default-level-1: var(--dk-color-neutral-50);
  --dk-border-raised-control-hover-level-1: var(--dk-color-neutral-100);
  --dk-border-raised-control-active-level-1: var(--dk-color-neutral-200);
  --dk-border-raised-control-default-level-2: var(--dk-color-neutral-100);
  --dk-border-raised-control-hover-level-2: var(--dk-color-neutral-200);
  --dk-border-raised-control-active-level-2: var(--dk-color-neutral-300);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-border-raised-control-default: var(--dk-color-neutral-850);
  --dk-border-raised-control-hover: var(--dk-color-neutral-750);
  --dk-border-raised-control-active: var(--dk-color-neutral-650);
  --dk-border-raised-control-default-level-1: var(--dk-color-neutral-750);
  --dk-border-raised-control-hover-level-1: var(--dk-color-neutral-650);
  --dk-border-raised-control-active-level-1: var(--dk-color-neutral-550);
  --dk-border-raised-control-default-level-2: var(--dk-color-neutral-650);
  --dk-border-raised-control-hover-level-2: var(--dk-color-neutral-550);
  --dk-border-raised-control-active-level-2: var(--dk-color-neutral-450);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-border-raised-subtle: rgb(from var(--dk-color-base-black) r g b / var(--dk-primitive-opacity-hairline-subtle));
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-border-raised-subtle: rgb(from var(--dk-color-base-white) r g b / var(--dk-primitive-opacity-hairline-subtle-inverse));
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-border-nested-default: var(--dk-color-neutral-100);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-border-nested-default: var(--dk-color-neutral-700);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-border-nested-glass: rgb(from var(--dk-border-raised-default) r g b / var(--dk-primitive-opacity-glass));
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-border-nested-glass: rgb(from var(--dk-border-raised-default) r g b / var(--dk-primitive-opacity-glass));
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-border-primary-default: var(--dk-color-primary-600);
  --dk-border-primary-hover: var(--dk-color-primary-700);
  --dk-border-primary-active: var(--dk-color-primary-800);
  --dk-border-primary-focus: var(--dk-color-primary-800);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-border-primary-default: var(--dk-color-primary-400);
  --dk-border-primary-hover: var(--dk-color-primary-300);
  --dk-border-primary-active: var(--dk-color-primary-200);
  --dk-border-primary-focus: var(--dk-color-primary-200);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-card-active: var(--dk-color-neutral-50);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-card-active: var(--dk-color-neutral-800);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-border-primary-guide: var(--dk-color-primary-200);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-border-primary-guide: var(--dk-color-primary-600);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-border-error-subtle: var(--dk-color-error-100);
  --dk-border-error-subtle-hover: var(--dk-color-error-200);
  --dk-border-error-subtle-focus: var(--dk-color-error-300);
  --dk-border-warning-subtle: var(--dk-color-warning-100);
  --dk-border-warning-subtle-hover: var(--dk-color-warning-200);
  --dk-border-warning-subtle-focus: var(--dk-color-warning-300);
  --dk-border-information-subtle: var(--dk-color-information-100);
  --dk-border-information-subtle-hover: var(--dk-color-information-200);
  --dk-border-information-subtle-focus: var(--dk-color-information-300);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-border-error-subtle: var(--dk-color-error-800);
  --dk-border-error-subtle-hover: var(--dk-color-error-700);
  --dk-border-error-subtle-focus: var(--dk-color-error-600);
  --dk-border-warning-subtle: var(--dk-color-warning-800);
  --dk-border-warning-subtle-hover: var(--dk-color-warning-700);
  --dk-border-warning-subtle-focus: var(--dk-color-warning-600);
  --dk-border-information-subtle: var(--dk-color-information-800);
  --dk-border-information-subtle-hover: var(--dk-color-information-700);
  --dk-border-information-subtle-focus: var(--dk-color-information-600);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-border-field-plain-default: var(--dk-color-neutral-200);
  --dk-border-field-default: var(--dk-color-neutral-300);
  --dk-border-field-hover: var(--dk-color-neutral-500);
  --dk-border-field-raised-default: var(--dk-color-neutral-50);
  --dk-border-field-raised-hover: var(--dk-color-neutral-200);
  --dk-border-field-raised-default-level-2: var(--dk-color-neutral-100);
  --dk-border-field-raised-focus: var(--dk-color-primary-400);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-border-field-plain-default: var(--dk-color-neutral-700);
  --dk-border-field-default: var(--dk-color-neutral-600);
  --dk-border-field-hover: var(--dk-color-neutral-500);
  --dk-border-field-raised-default: var(--dk-color-neutral-850);
  --dk-border-field-raised-hover: var(--dk-color-neutral-750);
  --dk-border-field-raised-default-level-2: var(--dk-color-neutral-850);
  --dk-border-field-raised-focus: var(--dk-color-primary-500);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-border-progress: var(--dk-color-primary-500);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-border-progress: var(--dk-color-primary-400);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-border-progress-start: var(--dk-color-primary-200);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-border-progress-start: var(--dk-color-primary-700);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-border-glider-plain: var(--dk-color-neutral-100);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-border-glider-plain: var(--dk-color-neutral-700);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-outline-selected-default: var(--dk-color-primary-500);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-outline-selected-default: var(--dk-color-primary-200);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-outline-selected-on-color: var(--dk-color-primary-700);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-outline-selected-on-color: var(--dk-color-primary-200);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-focus-ring-primary: var(--dk-color-primary-500);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-focus-ring-primary: var(--dk-color-primary-400);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-text-default: var(--dk-color-base-black);
  --dk-text-default-reverse: var(--dk-color-base-white);
  --dk-text-base-black: var(--dk-color-base-black);
  --dk-text-base-white: var(--dk-color-base-white);
  --dk-text-disabled-default: var(--dk-color-neutral-400);
  --dk-text-disabled-on-color: var(--dk-color-neutral-300);
  --dk-text-disabled-subtle: var(--dk-color-neutral-200);
  --dk-text-disabled-on-field: var(--dk-text-disabled-subtle);
  --dk-text-error-default: var(--dk-color-error-500);
  --dk-text-error-focus: var(--dk-color-error-700);
  --dk-text-error-hover: var(--dk-color-error-600);
  --dk-text-error-on-color: var(--dk-color-base-white);
  --dk-text-error-on-color-focus: var(--dk-color-base-white);
  --dk-text-error-on-color-hover: var(--dk-color-base-white);
  --dk-text-error-subtle: var(--dk-color-error-50);
  --dk-text-error-subtle-focus: var(--dk-color-error-200);
  --dk-text-error-subtle-hover: var(--dk-color-error-100);
  --dk-text-information-default: var(--dk-color-information-500);
  --dk-text-information-focus: var(--dk-color-information-700);
  --dk-text-information-hover: var(--dk-color-information-600);
  --dk-text-information-on-color: var(--dk-color-base-white);
  --dk-text-information-on-color-focus: var(--dk-color-base-white);
  --dk-text-information-on-color-hover: var(--dk-color-base-white);
  --dk-text-information-subtle: var(--dk-color-information-50);
  --dk-text-information-subtle-focus: var(--dk-color-information-200);
  --dk-text-information-subtle-hover: var(--dk-color-information-100);
  --dk-text-neutral-default: var(--dk-color-neutral-600);
  --dk-text-neutral-focus: var(--dk-color-neutral-800);
  --dk-text-neutral-hover: var(--dk-color-neutral-700);
  --dk-text-neutral-subtle: var(--dk-color-neutral-300);
  --dk-text-neutral-subtle-focus: var(--dk-color-neutral-500);
  --dk-text-neutral-subtle-hover: var(--dk-color-neutral-400);
  --dk-text-on-color-body: var(--dk-color-base-white);
  --dk-text-on-color-caption: var(--dk-color-base-white);
  --dk-text-on-color-heading: var(--dk-color-base-white);
  --dk-text-on-color-placeholder: var(--dk-color-neutral-500);
  --dk-text-primary-default: var(--dk-color-primary-500);
  --dk-text-primary-disabled: var(--dk-color-primary-300);
  --dk-text-primary-focus: var(--dk-color-primary-700);
  --dk-text-primary-hover: var(--dk-color-primary-600);
  --dk-text-primary-on-color: var(--dk-color-primary-500);
  --dk-text-primary-on-color-focus: var(--dk-color-primary-700);
  --dk-text-primary-on-color-hover: var(--dk-color-primary-600);
  --dk-text-primary-subtle: var(--dk-color-primary-50);
  --dk-text-primary-subtle-focus: var(--dk-color-primary-200);
  --dk-text-primary-subtle-hover: var(--dk-color-primary-100);
  --dk-text-success-default: var(--dk-color-success-500);
  --dk-text-success-focus: var(--dk-color-success-700);
  --dk-text-success-hover: var(--dk-color-success-600);
  --dk-text-success-on-color: var(--dk-color-base-white);
  --dk-text-success-on-color-focus: var(--dk-color-base-white);
  --dk-text-success-on-color-hover: var(--dk-color-base-white);
  --dk-text-success-subtle: var(--dk-color-success-50);
  --dk-text-success-subtle-focus: var(--dk-color-success-200);
  --dk-text-success-subtle-hover: var(--dk-color-success-100);
  --dk-text-warning-default: var(--dk-color-warning-500);
  --dk-text-warning-focus: var(--dk-color-warning-700);
  --dk-text-warning-hover: var(--dk-color-warning-600);
  --dk-text-warning-on-color: var(--dk-color-base-white);
  --dk-text-warning-on-color-focus: var(--dk-color-base-white);
  --dk-text-warning-on-color-hover: var(--dk-color-base-white);
  --dk-text-warning-subtle: var(--dk-color-warning-50);
  --dk-text-warning-subtle-focus: var(--dk-color-warning-200);
  --dk-text-warning-subtle-hover: var(--dk-color-warning-100);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-text-default: var(--dk-color-base-white);
  --dk-text-default-reverse: var(--dk-color-base-black);
  --dk-text-base-black: var(--dk-color-base-black);
  --dk-text-base-white: var(--dk-color-base-white);
  --dk-text-disabled-default: var(--dk-color-neutral-400);
  --dk-text-disabled-on-color: var(--dk-color-neutral-600);
  --dk-text-disabled-subtle: var(--dk-color-neutral-700);
  --dk-text-disabled-on-field: var(--dk-text-disabled-subtle);
  --dk-text-error-default: var(--dk-color-error-400);
  --dk-text-error-focus: var(--dk-color-error-200);
  --dk-text-error-hover: var(--dk-color-error-300);
  --dk-text-error-on-color: var(--dk-color-base-white);
  --dk-text-error-on-color-focus: var(--dk-color-base-white);
  --dk-text-error-on-color-hover: var(--dk-color-base-white);
  --dk-text-error-subtle: var(--dk-color-error-900);
  --dk-text-error-subtle-focus: var(--dk-color-error-700);
  --dk-text-error-subtle-hover: var(--dk-color-error-800);
  --dk-text-information-default: var(--dk-color-information-400);
  --dk-text-information-focus: var(--dk-color-information-200);
  --dk-text-information-hover: var(--dk-color-information-300);
  --dk-text-information-on-color: var(--dk-color-base-white);
  --dk-text-information-on-color-focus: var(--dk-color-base-white);
  --dk-text-information-on-color-hover: var(--dk-color-base-white);
  --dk-text-information-subtle: var(--dk-color-information-900);
  --dk-text-information-subtle-focus: var(--dk-color-information-700);
  --dk-text-information-subtle-hover: var(--dk-color-information-800);
  --dk-text-neutral-default: var(--dk-color-neutral-200);
  --dk-text-neutral-focus: var(--dk-color-neutral-50);
  --dk-text-neutral-hover: var(--dk-color-neutral-100);
  --dk-text-neutral-subtle: var(--dk-color-neutral-600);
  --dk-text-neutral-subtle-focus: var(--dk-color-neutral-400);
  --dk-text-neutral-subtle-hover: var(--dk-color-neutral-500);
  --dk-text-on-color-body: var(--dk-color-base-black);
  --dk-text-on-color-caption: var(--dk-color-base-black);
  --dk-text-on-color-heading: var(--dk-color-base-black);
  --dk-text-on-color-placeholder: var(--dk-color-neutral-500);
  --dk-text-primary-default: var(--dk-color-primary-500);
  --dk-text-primary-disabled: var(--dk-color-primary-700);
  --dk-text-primary-focus: var(--dk-color-primary-300);
  --dk-text-primary-hover: var(--dk-color-primary-400);
  --dk-text-primary-on-color: var(--dk-color-primary-500);
  --dk-text-primary-on-color-focus: var(--dk-color-primary-700);
  --dk-text-primary-on-color-hover: var(--dk-color-primary-600);
  --dk-text-primary-subtle: var(--dk-color-primary-900);
  --dk-text-primary-subtle-focus: var(--dk-color-primary-700);
  --dk-text-primary-subtle-hover: var(--dk-color-primary-800);
  --dk-text-success-default: var(--dk-color-success-400);
  --dk-text-success-focus: var(--dk-color-success-200);
  --dk-text-success-hover: var(--dk-color-success-300);
  --dk-text-success-on-color: var(--dk-color-base-white);
  --dk-text-success-on-color-focus: var(--dk-color-base-white);
  --dk-text-success-on-color-hover: var(--dk-color-base-white);
  --dk-text-success-subtle: var(--dk-color-success-900);
  --dk-text-success-subtle-focus: var(--dk-color-success-700);
  --dk-text-success-subtle-hover: var(--dk-color-success-800);
  --dk-text-warning-default: var(--dk-color-warning-400);
  --dk-text-warning-focus: var(--dk-color-warning-200);
  --dk-text-warning-hover: var(--dk-color-warning-300);
  --dk-text-warning-on-color: var(--dk-color-base-white);
  --dk-text-warning-on-color-focus: var(--dk-color-base-white);
  --dk-text-warning-on-color-hover: var(--dk-color-base-white);
  --dk-text-warning-subtle: var(--dk-color-warning-900);
  --dk-text-warning-subtle-focus: var(--dk-color-warning-700);
  --dk-text-warning-subtle-hover: var(--dk-color-warning-800);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-text-primary-highlight: var(--dk-color-primary-500);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-text-primary-highlight: var(--dk-color-primary-400);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-text-primary-disabled: var(--dk-color-primary-200);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-text-error-active: var(--dk-color-error-700);
  --dk-text-warning-active: var(--dk-color-warning-700);
  --dk-text-information-active: var(--dk-color-information-700);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-text-error-active: var(--dk-color-error-200);
  --dk-text-warning-active: var(--dk-color-warning-200);
  --dk-text-information-active: var(--dk-color-information-200);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-text-primary-on-subtle: var(--dk-color-primary-700);
  --dk-text-error-on-subtle: var(--dk-color-error-700);
  --dk-text-warning-on-subtle: var(--dk-color-warning-700);
  --dk-text-information-on-subtle: var(--dk-color-information-700);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-text-primary-on-subtle: var(--dk-color-primary-200);
  --dk-text-error-on-subtle: var(--dk-color-error-200);
  --dk-text-warning-on-subtle: var(--dk-color-warning-200);
  --dk-text-information-on-subtle: var(--dk-color-information-200);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-text-neutral-subtle: var(--dk-color-neutral-500);
  --dk-text-neutral-subtle-hover: var(--dk-color-neutral-600);
  --dk-text-neutral-subtle-focus: var(--dk-color-neutral-700);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-text-neutral-subtle: var(--dk-color-neutral-400);
  --dk-text-neutral-subtle-hover: var(--dk-color-neutral-300);
  --dk-text-neutral-subtle-focus: var(--dk-color-neutral-200);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-icon-neutral-active: var(--dk-color-neutral-700);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-icon-neutral-active: var(--dk-color-neutral-100);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-text-nested-default: var(--dk-color-neutral-700);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-text-nested-default: var(--dk-color-neutral-200);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-text-disabled-subtle-hover: var(--dk-color-neutral-300);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-text-disabled-subtle-hover: var(--dk-color-neutral-600);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-text-disabled-subtle-active: var(--dk-color-neutral-400);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-text-disabled-subtle-active: var(--dk-color-neutral-500);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-text-code-tag: var(--dk-color-primary-600);
  --dk-text-code-attr: var(--dk-text-neutral-default);
  --dk-text-code-string: var(--dk-primitive-color-primary-next2-600);
  --dk-text-code-keyword: var(--dk-primitive-color-primary-next1-600);
  --dk-text-code-comment: var(--dk-color-neutral-400);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-text-code-tag: var(--dk-color-primary-300);
  --dk-text-code-attr: var(--dk-text-neutral-default);
  --dk-text-code-string: var(--dk-primitive-color-primary-next2-300);
  --dk-text-code-keyword: var(--dk-primitive-color-primary-next1-300);
  --dk-text-code-comment: var(--dk-color-neutral-500);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-text-eyebrow-default: var(--dk-color-neutral-600);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-text-eyebrow-default: var(--dk-color-neutral-300);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-text-field-placeholder: var(--dk-color-neutral-400);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-text-field-placeholder: var(--dk-color-neutral-600);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-text-link-default: var(--dk-color-primary-600);
  --dk-text-link-hover: var(--dk-color-primary-700);
  --dk-text-link-active: var(--dk-color-primary-800);
  --dk-text-link-underline: var(--dk-color-primary-300);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-text-link-default: var(--dk-color-primary-500);
  --dk-text-link-hover: var(--dk-color-primary-400);
  --dk-text-link-active: var(--dk-color-primary-300);
  --dk-text-link-underline: var(--dk-color-primary-700);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-text-primary-brand: var(--dk-color-primary-500);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-text-primary-brand: var(--dk-color-primary-400);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-text-on-primary-fill: var(--dk-text-base-white);
  --dk-text-on-success-fill: var(--dk-text-base-white);
  --dk-text-on-error-fill: var(--dk-text-base-white);
  --dk-text-on-warning-fill: var(--dk-text-base-white);
  --dk-text-on-information-fill: var(--dk-text-base-white);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-text-on-primary-fill: var(--dk-text-base-white);
  --dk-text-on-success-fill: var(--dk-text-base-white);
  --dk-text-on-error-fill: var(--dk-text-base-white);
  --dk-text-on-warning-fill: var(--dk-text-base-white);
  --dk-text-on-information-fill: var(--dk-text-base-white);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-text-primary-outline: var(--dk-text-primary-on-subtle);
  --dk-text-success-outline: var(--dk-text-success-on-subtle);
  --dk-text-error-outline: var(--dk-text-error-on-subtle);
  --dk-text-warning-outline: var(--dk-text-warning-on-subtle);
  --dk-text-information-outline: var(--dk-text-information-on-subtle);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-text-primary-outline: var(--dk-text-primary-on-subtle);
  --dk-text-success-outline: var(--dk-text-success-on-subtle);
  --dk-text-error-outline: var(--dk-text-error-on-subtle);
  --dk-text-warning-outline: var(--dk-text-warning-on-subtle);
  --dk-text-information-outline: var(--dk-text-information-on-subtle);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-text-on-primary-mark: var(--dk-text-base-white);
  --dk-text-on-success-mark: var(--dk-text-base-white);
  --dk-text-on-error-mark: var(--dk-text-base-white);
  --dk-text-on-warning-mark: var(--dk-text-base-white);
  --dk-text-on-information-mark: var(--dk-text-base-white);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-text-on-primary-mark: var(--dk-text-base-white);
  --dk-text-on-success-mark: var(--dk-text-base-white);
  --dk-text-on-error-mark: var(--dk-text-base-white);
  --dk-text-on-warning-mark: var(--dk-text-base-white);
  --dk-text-on-information-mark: var(--dk-text-base-white);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-icon-base-black: var(--dk-color-base-black);
  --dk-icon-base-white: var(--dk-color-base-white);
  --dk-icon-default-body: var(--dk-color-base-black);
  --dk-icon-default-body-reverse: var(--dk-color-base-white);
  --dk-icon-disabled-default: var(--dk-color-neutral-400);
  --dk-icon-disabled-on-color: var(--dk-color-neutral-300);
  --dk-icon-disabled-subtle: var(--dk-color-neutral-100);
  --dk-icon-disabled-on-field: var(--dk-icon-disabled-subtle);
  --dk-icon-error-default: var(--dk-color-error-500);
  --dk-icon-error-focus: var(--dk-color-error-700);
  --dk-icon-error-hover: var(--dk-color-error-600);
  --dk-icon-error-on-color: var(--dk-color-base-white);
  --dk-icon-error-on-color-focus: var(--dk-color-base-white);
  --dk-icon-error-on-color-hover: var(--dk-color-base-white);
  --dk-icon-error-subtle: var(--dk-color-error-50);
  --dk-icon-error-subtle-focus: var(--dk-color-error-200);
  --dk-icon-error-subtle-hover: var(--dk-color-error-100);
  --dk-icon-information-default: var(--dk-color-information-500);
  --dk-icon-information-focus: var(--dk-color-information-700);
  --dk-icon-information-hover: var(--dk-color-information-600);
  --dk-icon-information-on-color: var(--dk-color-base-white);
  --dk-icon-information-on-color-focus: var(--dk-color-base-white);
  --dk-icon-information-on-color-hover: var(--dk-color-base-white);
  --dk-icon-information-subtle: var(--dk-color-information-50);
  --dk-icon-information-subtle-focus: var(--dk-color-information-200);
  --dk-icon-information-subtle-hover: var(--dk-color-information-100);
  --dk-icon-neutral-default: var(--dk-color-neutral-500);
  --dk-icon-neutral-focus: var(--dk-color-neutral-700);
  --dk-icon-neutral-hover: var(--dk-color-neutral-600);
  --dk-icon-neutral-subtle: var(--dk-color-neutral-300);
  --dk-icon-neutral-subtle-focus: var(--dk-color-neutral-500);
  --dk-icon-neutral-subtle-hover: var(--dk-color-neutral-400);
  --dk-icon-primary-default: var(--dk-color-primary-500);
  --dk-icon-primary-disabled: var(--dk-color-primary-300);
  --dk-icon-primary-focus: var(--dk-color-primary-700);
  --dk-icon-primary-hover: var(--dk-color-primary-600);
  --dk-icon-primary-on-color: var(--dk-color-base-white);
  --dk-icon-primary-on-color-focus: var(--dk-color-base-white);
  --dk-icon-primary-on-color-hover: var(--dk-color-base-white);
  --dk-icon-primary-subtle: var(--dk-color-primary-50);
  --dk-icon-primary-subtle-focus: var(--dk-color-primary-200);
  --dk-icon-primary-subtle-hover: var(--dk-color-primary-100);
  --dk-icon-success-default: var(--dk-color-success-500);
  --dk-icon-success-focus: var(--dk-color-success-700);
  --dk-icon-success-hover: var(--dk-color-success-600);
  --dk-icon-success-on-color: var(--dk-color-base-white);
  --dk-icon-success-on-color-focus: var(--dk-color-base-white);
  --dk-icon-success-on-color-hover: var(--dk-color-base-white);
  --dk-icon-success-subtle: var(--dk-color-success-50);
  --dk-icon-success-subtle-focus: var(--dk-color-success-200);
  --dk-icon-success-subtle-hover: var(--dk-color-success-100);
  --dk-icon-warning-default: var(--dk-color-warning-500);
  --dk-icon-warning-focus: var(--dk-color-warning-700);
  --dk-icon-warning-hover: var(--dk-color-warning-600);
  --dk-icon-warning-on-color: var(--dk-color-base-white);
  --dk-icon-warning-on-color-focus: var(--dk-color-base-white);
  --dk-icon-warning-on-color-hover: var(--dk-color-base-white);
  --dk-icon-warning-subtle: var(--dk-color-warning-50);
  --dk-icon-warning-subtle-focus: var(--dk-color-warning-200);
  --dk-icon-warning-subtle-hover: var(--dk-color-warning-100);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-icon-base-black: var(--dk-color-base-black);
  --dk-icon-base-white: var(--dk-color-base-white);
  --dk-icon-default-body: var(--dk-color-base-white);
  --dk-icon-default-body-reverse: var(--dk-color-base-black);
  --dk-icon-disabled-default: var(--dk-color-neutral-400);
  --dk-icon-disabled-on-color: var(--dk-color-neutral-600);
  --dk-icon-disabled-subtle: var(--dk-color-neutral-800);
  --dk-icon-disabled-on-field: var(--dk-icon-disabled-subtle);
  --dk-icon-error-default: var(--dk-color-error-400);
  --dk-icon-error-focus: var(--dk-color-error-200);
  --dk-icon-error-hover: var(--dk-color-error-300);
  --dk-icon-error-on-color: var(--dk-color-base-white);
  --dk-icon-error-on-color-focus: var(--dk-color-base-white);
  --dk-icon-error-on-color-hover: var(--dk-color-base-white);
  --dk-icon-error-subtle: var(--dk-color-error-900);
  --dk-icon-error-subtle-focus: var(--dk-color-error-700);
  --dk-icon-error-subtle-hover: var(--dk-color-error-800);
  --dk-icon-information-default: var(--dk-color-information-400);
  --dk-icon-information-focus: var(--dk-color-information-200);
  --dk-icon-information-hover: var(--dk-color-information-300);
  --dk-icon-information-on-color: var(--dk-color-base-white);
  --dk-icon-information-on-color-focus: var(--dk-color-base-white);
  --dk-icon-information-on-color-hover: var(--dk-color-base-white);
  --dk-icon-information-subtle: var(--dk-color-information-900);
  --dk-icon-information-subtle-focus: var(--dk-color-information-700);
  --dk-icon-information-subtle-hover: var(--dk-color-information-800);
  --dk-icon-neutral-default: var(--dk-color-neutral-200);
  --dk-icon-neutral-focus: var(--dk-color-neutral-50);
  --dk-icon-neutral-hover: var(--dk-color-neutral-100);
  --dk-icon-neutral-subtle: var(--dk-color-neutral-600);
  --dk-icon-neutral-subtle-focus: var(--dk-color-neutral-400);
  --dk-icon-neutral-subtle-hover: var(--dk-color-neutral-500);
  --dk-icon-primary-default: var(--dk-color-primary-500);
  --dk-icon-primary-disabled: var(--dk-color-primary-700);
  --dk-icon-primary-focus: var(--dk-color-primary-300);
  --dk-icon-primary-hover: var(--dk-color-primary-400);
  --dk-icon-primary-on-color: var(--dk-color-base-white);
  --dk-icon-primary-on-color-focus: var(--dk-color-base-white);
  --dk-icon-primary-on-color-hover: var(--dk-color-base-white);
  --dk-icon-primary-subtle: var(--dk-color-primary-800);
  --dk-icon-primary-subtle-focus: var(--dk-color-primary-600);
  --dk-icon-primary-subtle-hover: var(--dk-color-primary-700);
  --dk-icon-success-default: var(--dk-color-success-400);
  --dk-icon-success-focus: var(--dk-color-success-200);
  --dk-icon-success-hover: var(--dk-color-success-300);
  --dk-icon-success-on-color: var(--dk-color-base-white);
  --dk-icon-success-on-color-focus: var(--dk-color-base-white);
  --dk-icon-success-on-color-hover: var(--dk-color-base-white);
  --dk-icon-success-subtle: var(--dk-color-success-900);
  --dk-icon-success-subtle-focus: var(--dk-color-success-700);
  --dk-icon-success-subtle-hover: var(--dk-color-success-800);
  --dk-icon-warning-default: var(--dk-color-warning-400);
  --dk-icon-warning-focus: var(--dk-color-warning-200);
  --dk-icon-warning-hover: var(--dk-color-warning-300);
  --dk-icon-warning-on-color: var(--dk-color-base-white);
  --dk-icon-warning-on-color-focus: var(--dk-color-base-white);
  --dk-icon-warning-on-color-hover: var(--dk-color-base-white);
  --dk-icon-warning-subtle: var(--dk-color-warning-900);
  --dk-icon-warning-subtle-focus: var(--dk-color-warning-700);
  --dk-icon-warning-subtle-hover: var(--dk-color-warning-800);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-icon-error-active: var(--dk-color-error-700);
  --dk-icon-warning-active: var(--dk-color-warning-700);
  --dk-icon-information-active: var(--dk-color-information-700);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-icon-error-active: var(--dk-color-error-200);
  --dk-icon-warning-active: var(--dk-color-warning-200);
  --dk-icon-information-active: var(--dk-color-information-200);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-icon-primary-highlight: var(--dk-color-primary-500);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-icon-primary-highlight: var(--dk-color-primary-400);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-icon-primary-disabled: var(--dk-color-primary-200);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-icon-disabled-subtle-hover: var(--dk-color-neutral-200);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-icon-disabled-subtle-hover: var(--dk-color-neutral-700);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-icon-disabled-subtle-active: var(--dk-color-neutral-300);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-icon-disabled-subtle-active: var(--dk-color-neutral-600);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-icon-on-primary-fill: var(--dk-icon-base-white);
  --dk-icon-on-success-fill: var(--dk-icon-base-white);
  --dk-icon-on-error-fill: var(--dk-icon-base-white);
  --dk-icon-on-warning-fill: var(--dk-icon-base-white);
  --dk-icon-on-information-fill: var(--dk-icon-base-white);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-icon-on-primary-fill: var(--dk-icon-base-white);
  --dk-icon-on-success-fill: var(--dk-icon-base-white);
  --dk-icon-on-error-fill: var(--dk-icon-base-white);
  --dk-icon-on-warning-fill: var(--dk-icon-base-white);
  --dk-icon-on-information-fill: var(--dk-icon-base-white);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-icon-on-primary-mark: var(--dk-icon-base-white);
  --dk-icon-on-success-mark: var(--dk-icon-base-white);
  --dk-icon-on-error-mark: var(--dk-icon-base-white);
  --dk-icon-on-warning-mark: var(--dk-icon-base-white);
  --dk-icon-on-information-mark: var(--dk-icon-base-white);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-icon-on-primary-mark: var(--dk-icon-base-white);
  --dk-icon-on-success-mark: var(--dk-icon-base-white);
  --dk-icon-on-error-mark: var(--dk-icon-base-white);
  --dk-icon-on-warning-mark: var(--dk-icon-base-white);
  --dk-icon-on-information-mark: var(--dk-icon-base-white);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-icon-neutral-default: var(--dk-color-neutral-400);
  --dk-icon-neutral-hover: var(--dk-color-neutral-300);
  --dk-icon-neutral-focus: var(--dk-color-neutral-200);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-field-default: var(--dk-color-base-white);
  --dk-surface-field-hover: var(--dk-color-neutral-25);
  --dk-surface-field-action-hover: var(--dk-color-neutral-50);
  --dk-surface-field-action-active: var(--dk-color-neutral-100);
  --dk-text-field-default: var(--dk-color-base-black);
  --dk-text-field-affix: var(--dk-color-neutral-600);
  --dk-text-field-disabled: var(--dk-color-neutral-200);
  --dk-icon-field-default: var(--dk-color-neutral-500);
  --dk-icon-field-hover: var(--dk-color-neutral-700);
  --dk-icon-field-disabled: var(--dk-color-neutral-100);
  --dk-icon-field-subtle: var(--dk-color-neutral-500);
  --dk-icon-field-subtle-hover: var(--dk-color-neutral-600);
  --dk-border-field-focus: var(--dk-color-primary-600);
  --dk-border-field-focus-ring: var(--dk-color-primary-300);
  --dk-border-field-focus-ring-level-1: var(--dk-color-primary-400);
  --dk-border-field-focus-ring-level-2: var(--dk-color-primary-500);
  --dk-border-field-error: var(--dk-color-error-500);
  --dk-border-field-error-focus: var(--dk-color-error-700);
  --dk-border-field-error-ring: var(--dk-color-error-300);
  --dk-border-field-disabled: var(--dk-color-neutral-100);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-field-default: var(--dk-color-neutral-1100);
  --dk-surface-field-hover: var(--dk-color-neutral-900);
  --dk-surface-field-action-hover: var(--dk-color-neutral-800);
  --dk-surface-field-action-active: var(--dk-color-neutral-700);
  --dk-text-field-default: var(--dk-color-base-white);
  --dk-text-field-affix: var(--dk-color-neutral-200);
  --dk-text-field-disabled: var(--dk-color-neutral-700);
  --dk-icon-field-default: var(--dk-color-neutral-200);
  --dk-icon-field-hover: var(--dk-color-neutral-50);
  --dk-icon-field-disabled: var(--dk-color-neutral-800);
  --dk-icon-field-subtle: var(--dk-color-neutral-500);
  --dk-icon-field-subtle-hover: var(--dk-color-neutral-400);
  --dk-border-field-focus: var(--dk-color-primary-400);
  --dk-border-field-focus-ring: var(--dk-color-primary-600);
  --dk-border-field-focus-ring-level-1: var(--dk-color-primary-500);
  --dk-border-field-focus-ring-level-2: var(--dk-color-primary-400);
  --dk-border-field-error: var(--dk-color-error-400);
  --dk-border-field-error-focus: var(--dk-color-error-200);
  --dk-border-field-error-ring: var(--dk-color-error-600);
  --dk-border-field-disabled: var(--dk-color-neutral-800);
}
[data-theme="light"] [data-tone="inverse"][data-surface="1"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"][data-surface="1"] {
  --dk-surface-choice-disabled: var(--dk-surface-choice-disabled-level-1);
  --dk-icon-choice-disabled: var(--dk-icon-choice-disabled-level-1);
  --dk-surface-field-default: var(--dk-surface-level-1);
  --dk-surface-field-hover: var(--dk-surface-nested-default-level-1);
  --dk-surface-field-action-hover: var(--dk-surface-nested-hover-level-1);
  --dk-surface-field-action-active: var(--dk-surface-nested-active-level-1);
  --dk-text-field-affix: var(--dk-text-neutral-default-level-1);
  --dk-text-field-disabled: var(--dk-text-disabled-subtle-level-1);
  --dk-icon-field-default: var(--dk-icon-neutral-default-level-1);
  --dk-icon-field-disabled: var(--dk-icon-disabled-subtle-level-1);
  --dk-border-field-disabled: var(--dk-border-disabled-subtle-level-1);
  --dk-border-field-focus-ring: var(--dk-border-field-focus-ring-level-1);
}
[data-theme="light"][data-tone="inverse"][data-surface="below"],
[data-theme="light"] [data-tone="inverse"][data-surface="below"]:not([data-theme]):where(:not(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *))) {
  --dk-surface-choice-disabled: var(--dk-surface-choice-disabled-level-1);
  --dk-icon-choice-disabled: var(--dk-icon-choice-disabled-level-1);
  --dk-surface-field-default: var(--dk-surface-level-1);
  --dk-surface-field-hover: var(--dk-surface-nested-default-level-1);
  --dk-surface-field-action-hover: var(--dk-surface-nested-hover-level-1);
  --dk-surface-field-action-active: var(--dk-surface-nested-active-level-1);
  --dk-text-field-affix: var(--dk-text-neutral-default-level-1);
  --dk-text-field-disabled: var(--dk-text-disabled-subtle-level-1);
  --dk-icon-field-default: var(--dk-icon-neutral-default-level-1);
  --dk-icon-field-disabled: var(--dk-icon-disabled-subtle-level-1);
  --dk-border-field-disabled: var(--dk-border-disabled-subtle-level-1);
  --dk-border-field-focus-ring: var(--dk-border-field-focus-ring-level-1);
}
[data-theme="light"] [data-tone="inverse"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="light"][data-tone="inverse"][data-surface="raised"] {
  --dk-surface-choice-disabled: var(--dk-surface-choice-disabled-level-1);
  --dk-icon-choice-disabled: var(--dk-icon-choice-disabled-level-1);
  --dk-surface-field-default: var(--dk-surface-level-1);
  --dk-surface-field-hover: var(--dk-surface-nested-default-level-1);
  --dk-surface-field-action-hover: var(--dk-surface-nested-hover-level-1);
  --dk-surface-field-action-active: var(--dk-surface-nested-active-level-1);
  --dk-text-field-affix: var(--dk-text-neutral-default-level-1);
  --dk-text-field-disabled: var(--dk-text-disabled-subtle-level-1);
  --dk-icon-field-default: var(--dk-icon-neutral-default-level-1);
  --dk-icon-field-disabled: var(--dk-icon-disabled-subtle-level-1);
  --dk-border-field-disabled: var(--dk-border-disabled-subtle-level-1);
  --dk-border-field-focus-ring: var(--dk-border-field-focus-ring-level-1);
}
[data-theme="dark"] [data-tone="inverse"][data-surface="1"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"][data-surface="1"] {
  --dk-surface-choice-disabled: var(--dk-surface-choice-disabled-level-1);
  --dk-icon-choice-disabled: var(--dk-icon-choice-disabled-level-1);
  --dk-surface-field-default: var(--dk-surface-level-1);
  --dk-surface-field-hover: var(--dk-surface-nested-default-level-1);
  --dk-surface-field-action-hover: var(--dk-surface-nested-hover-level-1);
  --dk-surface-field-action-active: var(--dk-surface-nested-active-level-1);
  --dk-text-field-affix: var(--dk-text-neutral-default-level-1);
  --dk-text-field-disabled: var(--dk-text-disabled-subtle-level-1);
  --dk-icon-field-default: var(--dk-icon-neutral-default-level-1);
  --dk-icon-field-disabled: var(--dk-icon-disabled-subtle-level-1);
  --dk-border-field-disabled: var(--dk-border-disabled-subtle-level-1);
  --dk-border-field-focus-ring: var(--dk-border-field-focus-ring-level-1);
}
[data-theme="dark"][data-tone="inverse"][data-surface="below"],
[data-theme="dark"] [data-tone="inverse"][data-surface="below"]:not([data-theme]):where(:not(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *))) {
  --dk-surface-choice-disabled: var(--dk-surface-choice-disabled-level-1);
  --dk-icon-choice-disabled: var(--dk-icon-choice-disabled-level-1);
  --dk-surface-field-default: var(--dk-surface-level-1);
  --dk-surface-field-hover: var(--dk-surface-nested-default-level-1);
  --dk-surface-field-action-hover: var(--dk-surface-nested-hover-level-1);
  --dk-surface-field-action-active: var(--dk-surface-nested-active-level-1);
  --dk-text-field-affix: var(--dk-text-neutral-default-level-1);
  --dk-text-field-disabled: var(--dk-text-disabled-subtle-level-1);
  --dk-icon-field-default: var(--dk-icon-neutral-default-level-1);
  --dk-icon-field-disabled: var(--dk-icon-disabled-subtle-level-1);
  --dk-border-field-disabled: var(--dk-border-disabled-subtle-level-1);
  --dk-border-field-focus-ring: var(--dk-border-field-focus-ring-level-1);
}
[data-theme="light"] [data-tone="inverse"][data-surface="2"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"][data-surface="2"] {
  --dk-surface-choice-disabled: var(--dk-surface-choice-disabled-level-2);
  --dk-icon-choice-disabled: var(--dk-icon-choice-disabled-level-2);
  --dk-surface-field-default: var(--dk-surface-level-2);
  --dk-surface-field-hover: var(--dk-surface-nested-default-level-2);
  --dk-surface-field-action-hover: var(--dk-surface-nested-hover-level-2);
  --dk-surface-field-action-active: var(--dk-surface-nested-active-level-2);
  --dk-text-field-affix: var(--dk-text-neutral-default-level-2);
  --dk-text-field-disabled: var(--dk-text-disabled-subtle-level-2);
  --dk-icon-field-default: var(--dk-icon-neutral-default-level-2);
  --dk-icon-field-disabled: var(--dk-icon-disabled-subtle-level-2);
  --dk-border-field-disabled: var(--dk-border-disabled-subtle-level-2);
  --dk-border-field-focus-ring: var(--dk-border-field-focus-ring-level-2);
}
[data-theme="light"] [data-tone="inverse"][data-surface="below"]:not([data-theme]):where(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *)) {
  --dk-surface-choice-disabled: var(--dk-surface-choice-disabled-level-2);
  --dk-icon-choice-disabled: var(--dk-icon-choice-disabled-level-2);
  --dk-surface-field-default: var(--dk-surface-level-2);
  --dk-surface-field-hover: var(--dk-surface-nested-default-level-2);
  --dk-surface-field-action-hover: var(--dk-surface-nested-hover-level-2);
  --dk-surface-field-action-active: var(--dk-surface-nested-active-level-2);
  --dk-text-field-affix: var(--dk-text-neutral-default-level-2);
  --dk-text-field-disabled: var(--dk-text-disabled-subtle-level-2);
  --dk-icon-field-default: var(--dk-icon-neutral-default-level-2);
  --dk-icon-field-disabled: var(--dk-icon-disabled-subtle-level-2);
  --dk-border-field-disabled: var(--dk-border-disabled-subtle-level-2);
  --dk-border-field-focus-ring: var(--dk-border-field-focus-ring-level-2);
}
[data-theme="dark"] [data-tone="inverse"][data-surface="2"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"][data-surface="2"] {
  --dk-surface-choice-disabled: var(--dk-surface-choice-disabled-level-2);
  --dk-icon-choice-disabled: var(--dk-icon-choice-disabled-level-2);
  --dk-surface-field-default: var(--dk-surface-level-2);
  --dk-surface-field-hover: var(--dk-surface-nested-default-level-2);
  --dk-surface-field-action-hover: var(--dk-surface-nested-hover-level-2);
  --dk-surface-field-action-active: var(--dk-surface-nested-active-level-2);
  --dk-text-field-affix: var(--dk-text-neutral-default-level-2);
  --dk-text-field-disabled: var(--dk-text-disabled-subtle-level-2);
  --dk-icon-field-default: var(--dk-icon-neutral-default-level-2);
  --dk-icon-field-disabled: var(--dk-icon-disabled-subtle-level-2);
  --dk-border-field-disabled: var(--dk-border-disabled-subtle-level-2);
  --dk-border-field-focus-ring: var(--dk-border-field-focus-ring-level-2);
}
[data-theme="dark"] [data-tone="inverse"][data-surface="below"]:not([data-theme]):where(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *)) {
  --dk-surface-choice-disabled: var(--dk-surface-choice-disabled-level-2);
  --dk-icon-choice-disabled: var(--dk-icon-choice-disabled-level-2);
  --dk-surface-field-default: var(--dk-surface-level-2);
  --dk-surface-field-hover: var(--dk-surface-nested-default-level-2);
  --dk-surface-field-action-hover: var(--dk-surface-nested-hover-level-2);
  --dk-surface-field-action-active: var(--dk-surface-nested-active-level-2);
  --dk-text-field-affix: var(--dk-text-neutral-default-level-2);
  --dk-text-field-disabled: var(--dk-text-disabled-subtle-level-2);
  --dk-icon-field-default: var(--dk-icon-neutral-default-level-2);
  --dk-icon-field-disabled: var(--dk-icon-disabled-subtle-level-2);
  --dk-border-field-disabled: var(--dk-border-disabled-subtle-level-2);
  --dk-border-field-focus-ring: var(--dk-border-field-focus-ring-level-2);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-choice-selected: var(--dk-color-primary-600);
  --dk-surface-choice-selected-hover: var(--dk-color-primary-700);
  --dk-surface-choice-selected-active: var(--dk-color-primary-800);
  --dk-icon-choice-selected: var(--dk-color-base-white);
  --dk-surface-choice-track: var(--dk-color-neutral-400);
  --dk-surface-choice-track-hover: var(--dk-color-neutral-500);
  --dk-surface-choice-track-active: var(--dk-color-neutral-600);
  --dk-icon-choice-track: var(--dk-color-base-white);
  --dk-surface-choice-disabled: var(--dk-color-neutral-100);
  --dk-icon-choice-disabled: var(--dk-color-neutral-500);
  --dk-surface-choice-disabled-level-1: var(--dk-color-neutral-200);
  --dk-icon-choice-disabled-level-1: var(--dk-color-neutral-600);
  --dk-surface-choice-disabled-level-2: var(--dk-color-neutral-300);
  --dk-icon-choice-disabled-level-2: var(--dk-color-neutral-700);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-choice-selected: var(--dk-color-primary-500);
  --dk-surface-choice-selected-hover: var(--dk-color-primary-600);
  --dk-surface-choice-selected-active: var(--dk-color-primary-700);
  --dk-icon-choice-selected: var(--dk-color-base-white);
  --dk-surface-choice-track: var(--dk-color-neutral-600);
  --dk-surface-choice-track-hover: var(--dk-color-neutral-500);
  --dk-surface-choice-track-active: var(--dk-color-neutral-400);
  --dk-icon-choice-track: var(--dk-color-base-white);
  --dk-surface-choice-disabled: var(--dk-color-neutral-800);
  --dk-icon-choice-disabled: var(--dk-color-neutral-500);
  --dk-surface-choice-disabled-level-1: var(--dk-color-neutral-700);
  --dk-icon-choice-disabled-level-1: var(--dk-color-neutral-400);
  --dk-surface-choice-disabled-level-2: var(--dk-color-neutral-600);
  --dk-icon-choice-disabled-level-2: var(--dk-color-neutral-300);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-choice-card: var(--dk-color-base-white);
  --dk-surface-choice-card-hover: var(--dk-color-neutral-25);
  --dk-surface-choice-card-active: var(--dk-color-neutral-50);
  --dk-border-choice-card: var(--dk-color-neutral-50);
  --dk-border-choice-card-hover: var(--dk-color-neutral-100);
  --dk-border-choice-card-active: var(--dk-color-neutral-200);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-choice-card: var(--dk-color-neutral-1100);
  --dk-surface-choice-card-hover: var(--dk-color-neutral-1000);
  --dk-surface-choice-card-active: var(--dk-color-neutral-900);
  --dk-border-choice-card: var(--dk-color-neutral-800);
  --dk-border-choice-card-hover: var(--dk-color-neutral-700);
  --dk-border-choice-card-active: var(--dk-color-neutral-600);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-primary-subtle-level-0: var(--dk-color-primary-50);
  --dk-surface-primary-subtle-level-1: var(--dk-color-primary-100);
  --dk-surface-primary-subtle-level-2: var(--dk-color-primary-200);
  --dk-surface-primary-solid: var(--dk-color-primary-700);
  --dk-surface-primary-solid-level-0: var(--dk-color-primary-700);
  --dk-surface-primary-solid-level-1: var(--dk-color-primary-800);
  --dk-surface-primary-solid-level-2: var(--dk-color-primary-900);
  --dk-text-primary-on-subtle-level-0: var(--dk-color-primary-700);
  --dk-icon-primary-on-subtle-level-0: var(--dk-color-primary-700);
  --dk-text-primary-on-subtle-level-1: var(--dk-color-primary-800);
  --dk-icon-primary-on-subtle-level-1: var(--dk-color-primary-800);
  --dk-text-primary-on-subtle-level-2: var(--dk-color-primary-900);
  --dk-icon-primary-on-subtle-level-2: var(--dk-color-primary-900);
  --dk-text-primary-on-solid: var(--dk-text-base-white);
  --dk-icon-primary-on-solid: var(--dk-icon-base-white);
  --dk-text-neutral-on-primary-solid: var(--dk-color-primary-50);
  --dk-icon-neutral-on-primary-solid: var(--dk-color-primary-50);
  --dk-surface-error-subtle-level-0: var(--dk-color-error-50);
  --dk-surface-error-subtle-level-1: var(--dk-color-error-100);
  --dk-surface-error-subtle-level-2: var(--dk-color-error-200);
  --dk-surface-error-solid: var(--dk-color-error-700);
  --dk-surface-error-solid-level-0: var(--dk-color-error-700);
  --dk-surface-error-solid-level-1: var(--dk-color-error-800);
  --dk-surface-error-solid-level-2: var(--dk-color-error-900);
  --dk-border-primary-structural-on-subtle: var(--dk-color-primary-200);
  --dk-border-primary-structural-on-subtle-level-2: var(--dk-color-primary-300);
  --dk-border-primary-hairline-on-subtle: var(--dk-color-primary-300);
  --dk-border-primary-hairline-on-subtle-level-2: var(--dk-color-primary-400);
  --dk-border-primary-hairline-on-solid: var(--dk-color-primary-300);
  --dk-border-success-structural-on-subtle: var(--dk-border-primary-structural-on-subtle);
  --dk-border-success-structural-on-subtle-level-2: var(--dk-border-primary-structural-on-subtle-level-2);
  --dk-border-success-hairline-on-subtle: var(--dk-border-primary-hairline-on-subtle);
  --dk-border-success-hairline-on-subtle-level-2: var(--dk-border-primary-hairline-on-subtle-level-2);
  --dk-border-success-hairline-on-solid: var(--dk-border-primary-hairline-on-solid);
  --dk-border-error-structural-on-subtle: var(--dk-color-error-200);
  --dk-border-error-structural-on-subtle-level-2: var(--dk-color-error-300);
  --dk-border-error-hairline-on-subtle: var(--dk-color-error-300);
  --dk-border-error-hairline-on-subtle-level-2: var(--dk-color-error-400);
  --dk-border-error-hairline-on-solid: var(--dk-color-error-300);
  --dk-border-warning-structural-on-subtle: var(--dk-color-warning-200);
  --dk-border-warning-structural-on-subtle-level-2: var(--dk-color-warning-300);
  --dk-border-warning-hairline-on-subtle: var(--dk-color-warning-300);
  --dk-border-warning-hairline-on-subtle-level-2: var(--dk-color-warning-400);
  --dk-border-warning-hairline-on-solid: var(--dk-color-warning-300);
  --dk-border-information-structural-on-subtle: var(--dk-color-information-200);
  --dk-border-information-structural-on-subtle-level-2: var(--dk-color-information-300);
  --dk-border-information-hairline-on-subtle: var(--dk-color-information-300);
  --dk-border-information-hairline-on-subtle-level-2: var(--dk-color-information-400);
  --dk-border-information-hairline-on-solid: var(--dk-color-information-300);
  --dk-text-error-on-subtle-level-0: var(--dk-color-error-700);
  --dk-icon-error-on-subtle-level-0: var(--dk-color-error-700);
  --dk-text-error-on-subtle-level-1: var(--dk-color-error-800);
  --dk-icon-error-on-subtle-level-1: var(--dk-color-error-800);
  --dk-text-error-on-subtle-level-2: var(--dk-color-error-900);
  --dk-icon-error-on-subtle-level-2: var(--dk-color-error-900);
  --dk-text-error-on-solid: var(--dk-text-base-white);
  --dk-icon-error-on-solid: var(--dk-icon-base-white);
  --dk-text-neutral-on-error-solid: var(--dk-color-error-50);
  --dk-icon-neutral-on-error-solid: var(--dk-color-error-50);
  --dk-surface-warning-subtle-level-0: var(--dk-color-warning-50);
  --dk-surface-warning-subtle-level-1: var(--dk-color-warning-100);
  --dk-surface-warning-subtle-level-2: var(--dk-color-warning-200);
  --dk-surface-warning-solid: var(--dk-color-warning-700);
  --dk-surface-warning-solid-level-0: var(--dk-color-warning-700);
  --dk-surface-warning-solid-level-1: var(--dk-color-warning-800);
  --dk-surface-warning-solid-level-2: var(--dk-color-warning-900);
  --dk-text-warning-on-subtle-level-0: var(--dk-color-warning-700);
  --dk-icon-warning-on-subtle-level-0: var(--dk-color-warning-700);
  --dk-text-warning-on-subtle-level-1: var(--dk-color-warning-800);
  --dk-icon-warning-on-subtle-level-1: var(--dk-color-warning-800);
  --dk-text-warning-on-subtle-level-2: var(--dk-color-warning-900);
  --dk-icon-warning-on-subtle-level-2: var(--dk-color-warning-900);
  --dk-text-warning-on-solid: var(--dk-text-base-white);
  --dk-icon-warning-on-solid: var(--dk-icon-base-white);
  --dk-text-neutral-on-warning-solid: var(--dk-color-warning-50);
  --dk-icon-neutral-on-warning-solid: var(--dk-color-warning-50);
  --dk-surface-information-subtle-level-0: var(--dk-color-information-50);
  --dk-surface-information-subtle-level-1: var(--dk-color-information-100);
  --dk-surface-information-subtle-level-2: var(--dk-color-information-200);
  --dk-surface-information-solid: var(--dk-color-information-700);
  --dk-surface-information-solid-level-0: var(--dk-color-information-700);
  --dk-surface-information-solid-level-1: var(--dk-color-information-800);
  --dk-surface-information-solid-level-2: var(--dk-color-information-900);
  --dk-text-information-on-subtle-level-0: var(--dk-color-information-700);
  --dk-icon-information-on-subtle-level-0: var(--dk-color-information-700);
  --dk-text-information-on-subtle-level-1: var(--dk-color-information-800);
  --dk-icon-information-on-subtle-level-1: var(--dk-color-information-800);
  --dk-text-information-on-subtle-level-2: var(--dk-color-information-900);
  --dk-icon-information-on-subtle-level-2: var(--dk-color-information-900);
  --dk-text-information-on-solid: var(--dk-text-base-white);
  --dk-icon-information-on-solid: var(--dk-icon-base-white);
  --dk-text-neutral-on-information-solid: var(--dk-color-information-50);
  --dk-icon-neutral-on-information-solid: var(--dk-color-information-50);
  --dk-surface-success-subtle-level-0: var(--dk-surface-primary-subtle-level-0);
  --dk-surface-success-subtle-level-1: var(--dk-surface-primary-subtle-level-1);
  --dk-surface-success-subtle-level-2: var(--dk-surface-primary-subtle-level-2);
  --dk-surface-success-solid: var(--dk-surface-primary-solid);
  --dk-surface-success-solid-level-0: var(--dk-surface-primary-solid-level-0);
  --dk-surface-success-solid-level-1: var(--dk-surface-primary-solid-level-1);
  --dk-surface-success-solid-level-2: var(--dk-surface-primary-solid-level-2);
  --dk-text-success-on-subtle-level-0: var(--dk-text-primary-on-subtle-level-0);
  --dk-icon-success-on-subtle-level-0: var(--dk-icon-primary-on-subtle-level-0);
  --dk-text-success-on-subtle-level-1: var(--dk-text-primary-on-subtle-level-1);
  --dk-icon-success-on-subtle-level-1: var(--dk-icon-primary-on-subtle-level-1);
  --dk-text-success-on-subtle-level-2: var(--dk-text-primary-on-subtle-level-2);
  --dk-icon-success-on-subtle-level-2: var(--dk-icon-primary-on-subtle-level-2);
  --dk-text-success-on-solid: var(--dk-text-primary-on-solid);
  --dk-icon-success-on-solid: var(--dk-icon-primary-on-solid);
  --dk-text-neutral-on-success-solid: var(--dk-text-neutral-on-primary-solid);
  --dk-icon-neutral-on-success-solid: var(--dk-icon-neutral-on-primary-solid);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-primary-subtle-level-0: var(--dk-color-primary-900);
  --dk-surface-primary-subtle-level-1: var(--dk-color-primary-800);
  --dk-surface-primary-subtle-level-2: var(--dk-color-primary-700);
  --dk-surface-primary-solid: var(--dk-color-primary-700);
  --dk-surface-primary-solid-level-0: var(--dk-color-primary-700);
  --dk-surface-primary-solid-level-1: var(--dk-color-primary-800);
  --dk-surface-primary-solid-level-2: var(--dk-color-primary-900);
  --dk-text-primary-on-subtle-level-0: var(--dk-color-primary-200);
  --dk-icon-primary-on-subtle-level-0: var(--dk-color-primary-200);
  --dk-text-primary-on-subtle-level-1: var(--dk-color-primary-100);
  --dk-icon-primary-on-subtle-level-1: var(--dk-color-primary-100);
  --dk-text-primary-on-subtle-level-2: var(--dk-color-primary-50);
  --dk-icon-primary-on-subtle-level-2: var(--dk-color-primary-50);
  --dk-text-primary-on-solid: var(--dk-text-base-white);
  --dk-icon-primary-on-solid: var(--dk-icon-base-white);
  --dk-text-neutral-on-primary-solid: var(--dk-color-primary-50);
  --dk-icon-neutral-on-primary-solid: var(--dk-color-primary-50);
  --dk-surface-error-subtle-level-0: var(--dk-color-error-900);
  --dk-surface-error-subtle-level-1: var(--dk-color-error-800);
  --dk-surface-error-subtle-level-2: var(--dk-color-error-700);
  --dk-surface-error-solid: var(--dk-color-error-700);
  --dk-surface-error-solid-level-0: var(--dk-color-error-700);
  --dk-surface-error-solid-level-1: var(--dk-color-error-800);
  --dk-surface-error-solid-level-2: var(--dk-color-error-900);
  --dk-border-primary-structural-on-subtle: var(--dk-color-primary-800);
  --dk-border-primary-structural-on-subtle-level-2: var(--dk-color-primary-800);
  --dk-border-primary-hairline-on-subtle: var(--dk-color-primary-700);
  --dk-border-primary-hairline-on-subtle-level-2: var(--dk-color-primary-500);
  --dk-border-primary-hairline-on-solid: var(--dk-color-primary-400);
  --dk-border-success-structural-on-subtle: var(--dk-border-primary-structural-on-subtle);
  --dk-border-success-structural-on-subtle-level-2: var(--dk-border-primary-structural-on-subtle-level-2);
  --dk-border-success-hairline-on-subtle: var(--dk-border-primary-hairline-on-subtle);
  --dk-border-success-hairline-on-subtle-level-2: var(--dk-border-primary-hairline-on-subtle-level-2);
  --dk-border-success-hairline-on-solid: var(--dk-border-primary-hairline-on-solid);
  --dk-border-error-structural-on-subtle: var(--dk-color-error-800);
  --dk-border-error-structural-on-subtle-level-2: var(--dk-color-error-800);
  --dk-border-error-hairline-on-subtle: var(--dk-color-error-700);
  --dk-border-error-hairline-on-subtle-level-2: var(--dk-color-error-500);
  --dk-border-error-hairline-on-solid: var(--dk-color-error-400);
  --dk-border-warning-structural-on-subtle: color-mix(in srgb, var(--dk-color-warning-800) 70%, var(--dk-color-warning-900));
  --dk-border-warning-structural-on-subtle-level-2: var(--dk-border-warning-structural-on-subtle);
  --dk-border-warning-hairline-on-subtle: var(--dk-color-warning-700);
  --dk-border-warning-hairline-on-subtle-level-2: var(--dk-color-warning-500);
  --dk-border-warning-hairline-on-solid: var(--dk-color-warning-400);
  --dk-border-information-structural-on-subtle: var(--dk-color-information-800);
  --dk-border-information-structural-on-subtle-level-2: var(--dk-color-information-800);
  --dk-border-information-hairline-on-subtle: var(--dk-color-information-700);
  --dk-border-information-hairline-on-subtle-level-2: var(--dk-color-information-500);
  --dk-border-information-hairline-on-solid: var(--dk-color-information-400);
  --dk-text-error-on-subtle-level-0: var(--dk-color-error-200);
  --dk-icon-error-on-subtle-level-0: var(--dk-color-error-200);
  --dk-text-error-on-subtle-level-1: var(--dk-color-error-100);
  --dk-icon-error-on-subtle-level-1: var(--dk-color-error-100);
  --dk-text-error-on-subtle-level-2: var(--dk-color-error-50);
  --dk-icon-error-on-subtle-level-2: var(--dk-color-error-50);
  --dk-text-error-on-solid: var(--dk-text-base-white);
  --dk-icon-error-on-solid: var(--dk-icon-base-white);
  --dk-text-neutral-on-error-solid: var(--dk-color-error-50);
  --dk-icon-neutral-on-error-solid: var(--dk-color-error-50);
  --dk-surface-warning-subtle-level-0: var(--dk-color-warning-900);
  --dk-surface-warning-subtle-level-1: var(--dk-color-warning-800);
  --dk-surface-warning-subtle-level-2: var(--dk-color-warning-700);
  --dk-surface-warning-solid: var(--dk-color-warning-700);
  --dk-surface-warning-solid-level-0: var(--dk-color-warning-700);
  --dk-surface-warning-solid-level-1: var(--dk-color-warning-800);
  --dk-surface-warning-solid-level-2: var(--dk-color-warning-900);
  --dk-text-warning-on-subtle-level-0: var(--dk-color-warning-200);
  --dk-icon-warning-on-subtle-level-0: var(--dk-color-warning-200);
  --dk-text-warning-on-subtle-level-1: var(--dk-color-warning-100);
  --dk-icon-warning-on-subtle-level-1: var(--dk-color-warning-100);
  --dk-text-warning-on-subtle-level-2: var(--dk-color-warning-50);
  --dk-icon-warning-on-subtle-level-2: var(--dk-color-warning-50);
  --dk-text-warning-on-solid: var(--dk-text-base-white);
  --dk-icon-warning-on-solid: var(--dk-icon-base-white);
  --dk-text-neutral-on-warning-solid: var(--dk-color-warning-50);
  --dk-icon-neutral-on-warning-solid: var(--dk-color-warning-50);
  --dk-surface-information-subtle-level-0: var(--dk-color-information-900);
  --dk-surface-information-subtle-level-1: var(--dk-color-information-800);
  --dk-surface-information-subtle-level-2: var(--dk-color-information-700);
  --dk-surface-information-solid: var(--dk-color-information-700);
  --dk-surface-information-solid-level-0: var(--dk-color-information-700);
  --dk-surface-information-solid-level-1: var(--dk-color-information-800);
  --dk-surface-information-solid-level-2: var(--dk-color-information-900);
  --dk-text-information-on-subtle-level-0: var(--dk-color-information-200);
  --dk-icon-information-on-subtle-level-0: var(--dk-color-information-200);
  --dk-text-information-on-subtle-level-1: var(--dk-color-information-100);
  --dk-icon-information-on-subtle-level-1: var(--dk-color-information-100);
  --dk-text-information-on-subtle-level-2: var(--dk-color-information-50);
  --dk-icon-information-on-subtle-level-2: var(--dk-color-information-50);
  --dk-text-information-on-solid: var(--dk-text-base-white);
  --dk-icon-information-on-solid: var(--dk-icon-base-white);
  --dk-text-neutral-on-information-solid: var(--dk-color-information-50);
  --dk-icon-neutral-on-information-solid: var(--dk-color-information-50);
  --dk-surface-success-subtle-level-0: var(--dk-surface-primary-subtle-level-0);
  --dk-surface-success-subtle-level-1: var(--dk-surface-primary-subtle-level-1);
  --dk-surface-success-subtle-level-2: var(--dk-surface-primary-subtle-level-2);
  --dk-surface-success-solid: var(--dk-surface-primary-solid);
  --dk-surface-success-solid-level-0: var(--dk-surface-primary-solid-level-0);
  --dk-surface-success-solid-level-1: var(--dk-surface-primary-solid-level-1);
  --dk-surface-success-solid-level-2: var(--dk-surface-primary-solid-level-2);
  --dk-text-success-on-subtle-level-0: var(--dk-text-primary-on-subtle-level-0);
  --dk-icon-success-on-subtle-level-0: var(--dk-icon-primary-on-subtle-level-0);
  --dk-text-success-on-subtle-level-1: var(--dk-text-primary-on-subtle-level-1);
  --dk-icon-success-on-subtle-level-1: var(--dk-icon-primary-on-subtle-level-1);
  --dk-text-success-on-subtle-level-2: var(--dk-text-primary-on-subtle-level-2);
  --dk-icon-success-on-subtle-level-2: var(--dk-icon-primary-on-subtle-level-2);
  --dk-text-success-on-solid: var(--dk-text-primary-on-solid);
  --dk-icon-success-on-solid: var(--dk-icon-primary-on-solid);
  --dk-text-neutral-on-success-solid: var(--dk-text-neutral-on-primary-solid);
  --dk-icon-neutral-on-success-solid: var(--dk-icon-neutral-on-primary-solid);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-disabled-subtle-on-primary-subtle-level-0: var(--dk-color-primary-100);
  --dk-surface-disabled-default-on-primary-subtle-level-0: var(--dk-color-primary-200);
  --dk-border-disabled-subtle-on-primary-subtle-level-0: var(--dk-color-primary-200);
  --dk-border-disabled-default-on-primary-subtle-level-0: var(--dk-color-primary-300);
  --dk-text-disabled-subtle-on-primary-subtle-level-0: var(--dk-color-primary-400);
  --dk-text-disabled-default-on-primary-subtle-level-0: var(--dk-color-primary-500);
  --dk-icon-disabled-subtle-on-primary-subtle-level-0: var(--dk-text-disabled-subtle-on-primary-subtle-level-0);
  --dk-icon-disabled-default-on-primary-subtle-level-0: var(--dk-text-disabled-default-on-primary-subtle-level-0);
  --dk-surface-disabled-subtle-on-primary-subtle-level-1: var(--dk-color-primary-200);
  --dk-surface-disabled-default-on-primary-subtle-level-1: var(--dk-color-primary-300);
  --dk-border-disabled-subtle-on-primary-subtle-level-1: var(--dk-color-primary-300);
  --dk-border-disabled-default-on-primary-subtle-level-1: var(--dk-color-primary-400);
  --dk-text-disabled-subtle-on-primary-subtle-level-1: var(--dk-color-primary-500);
  --dk-text-disabled-default-on-primary-subtle-level-1: var(--dk-color-primary-600);
  --dk-icon-disabled-subtle-on-primary-subtle-level-1: var(--dk-text-disabled-subtle-on-primary-subtle-level-1);
  --dk-icon-disabled-default-on-primary-subtle-level-1: var(--dk-text-disabled-default-on-primary-subtle-level-1);
  --dk-surface-disabled-subtle-on-primary-subtle-level-2: var(--dk-color-primary-300);
  --dk-surface-disabled-default-on-primary-subtle-level-2: var(--dk-color-primary-400);
  --dk-border-disabled-subtle-on-primary-subtle-level-2: var(--dk-color-primary-400);
  --dk-border-disabled-default-on-primary-subtle-level-2: var(--dk-color-primary-500);
  --dk-text-disabled-subtle-on-primary-subtle-level-2: var(--dk-color-primary-600);
  --dk-text-disabled-default-on-primary-subtle-level-2: var(--dk-color-primary-700);
  --dk-icon-disabled-subtle-on-primary-subtle-level-2: var(--dk-text-disabled-subtle-on-primary-subtle-level-2);
  --dk-icon-disabled-default-on-primary-subtle-level-2: var(--dk-text-disabled-default-on-primary-subtle-level-2);
  --dk-surface-disabled-subtle-on-primary-solid: var(--dk-color-primary-400);
  --dk-surface-disabled-default-on-primary-solid: var(--dk-color-primary-300);
  --dk-border-disabled-subtle-on-primary-solid: var(--dk-color-primary-400);
  --dk-border-disabled-default-on-primary-solid: var(--dk-color-primary-300);
  --dk-text-disabled-subtle-on-primary-solid: var(--dk-color-primary-100);
  --dk-text-disabled-default-on-primary-solid: var(--dk-color-primary-50);
  --dk-icon-disabled-subtle-on-primary-solid: var(--dk-text-disabled-subtle-on-primary-solid);
  --dk-icon-disabled-default-on-primary-solid: var(--dk-text-disabled-default-on-primary-solid);
  --dk-surface-disabled-subtle-on-error-subtle-level-0: var(--dk-color-error-100);
  --dk-surface-disabled-default-on-error-subtle-level-0: var(--dk-color-error-200);
  --dk-border-disabled-subtle-on-error-subtle-level-0: var(--dk-color-error-200);
  --dk-border-disabled-default-on-error-subtle-level-0: var(--dk-color-error-300);
  --dk-text-disabled-subtle-on-error-subtle-level-0: var(--dk-color-error-400);
  --dk-text-disabled-default-on-error-subtle-level-0: var(--dk-color-error-500);
  --dk-icon-disabled-subtle-on-error-subtle-level-0: var(--dk-text-disabled-subtle-on-error-subtle-level-0);
  --dk-icon-disabled-default-on-error-subtle-level-0: var(--dk-text-disabled-default-on-error-subtle-level-0);
  --dk-surface-disabled-subtle-on-error-subtle-level-1: var(--dk-color-error-200);
  --dk-surface-disabled-default-on-error-subtle-level-1: var(--dk-color-error-300);
  --dk-border-disabled-subtle-on-error-subtle-level-1: var(--dk-color-error-300);
  --dk-border-disabled-default-on-error-subtle-level-1: var(--dk-color-error-400);
  --dk-text-disabled-subtle-on-error-subtle-level-1: var(--dk-color-error-500);
  --dk-text-disabled-default-on-error-subtle-level-1: var(--dk-color-error-600);
  --dk-icon-disabled-subtle-on-error-subtle-level-1: var(--dk-text-disabled-subtle-on-error-subtle-level-1);
  --dk-icon-disabled-default-on-error-subtle-level-1: var(--dk-text-disabled-default-on-error-subtle-level-1);
  --dk-surface-disabled-subtle-on-error-subtle-level-2: var(--dk-color-error-300);
  --dk-surface-disabled-default-on-error-subtle-level-2: var(--dk-color-error-400);
  --dk-border-disabled-subtle-on-error-subtle-level-2: var(--dk-color-error-400);
  --dk-border-disabled-default-on-error-subtle-level-2: var(--dk-color-error-500);
  --dk-text-disabled-subtle-on-error-subtle-level-2: var(--dk-color-error-600);
  --dk-text-disabled-default-on-error-subtle-level-2: var(--dk-color-error-700);
  --dk-icon-disabled-subtle-on-error-subtle-level-2: var(--dk-text-disabled-subtle-on-error-subtle-level-2);
  --dk-icon-disabled-default-on-error-subtle-level-2: var(--dk-text-disabled-default-on-error-subtle-level-2);
  --dk-surface-disabled-subtle-on-error-solid: var(--dk-color-error-400);
  --dk-surface-disabled-default-on-error-solid: var(--dk-color-error-300);
  --dk-border-disabled-subtle-on-error-solid: var(--dk-color-error-400);
  --dk-border-disabled-default-on-error-solid: var(--dk-color-error-300);
  --dk-text-disabled-subtle-on-error-solid: var(--dk-color-error-100);
  --dk-text-disabled-default-on-error-solid: var(--dk-color-error-50);
  --dk-icon-disabled-subtle-on-error-solid: var(--dk-text-disabled-subtle-on-error-solid);
  --dk-icon-disabled-default-on-error-solid: var(--dk-text-disabled-default-on-error-solid);
  --dk-surface-disabled-subtle-on-warning-subtle-level-0: var(--dk-color-warning-100);
  --dk-surface-disabled-default-on-warning-subtle-level-0: var(--dk-color-warning-200);
  --dk-border-disabled-subtle-on-warning-subtle-level-0: var(--dk-color-warning-200);
  --dk-border-disabled-default-on-warning-subtle-level-0: var(--dk-color-warning-300);
  --dk-text-disabled-subtle-on-warning-subtle-level-0: var(--dk-color-warning-500);
  --dk-text-disabled-default-on-warning-subtle-level-0: var(--dk-color-warning-600);
  --dk-icon-disabled-subtle-on-warning-subtle-level-0: var(--dk-text-disabled-subtle-on-warning-subtle-level-0);
  --dk-icon-disabled-default-on-warning-subtle-level-0: var(--dk-text-disabled-default-on-warning-subtle-level-0);
  --dk-surface-disabled-subtle-on-warning-subtle-level-1: var(--dk-color-warning-200);
  --dk-surface-disabled-default-on-warning-subtle-level-1: var(--dk-color-warning-300);
  --dk-border-disabled-subtle-on-warning-subtle-level-1: var(--dk-color-warning-300);
  --dk-border-disabled-default-on-warning-subtle-level-1: var(--dk-color-warning-400);
  --dk-text-disabled-subtle-on-warning-subtle-level-1: var(--dk-color-warning-600);
  --dk-text-disabled-default-on-warning-subtle-level-1: var(--dk-color-warning-700);
  --dk-icon-disabled-subtle-on-warning-subtle-level-1: var(--dk-text-disabled-subtle-on-warning-subtle-level-1);
  --dk-icon-disabled-default-on-warning-subtle-level-1: var(--dk-text-disabled-default-on-warning-subtle-level-1);
  --dk-surface-disabled-subtle-on-warning-subtle-level-2: var(--dk-color-warning-300);
  --dk-surface-disabled-default-on-warning-subtle-level-2: var(--dk-color-warning-400);
  --dk-border-disabled-subtle-on-warning-subtle-level-2: var(--dk-color-warning-400);
  --dk-border-disabled-default-on-warning-subtle-level-2: var(--dk-color-warning-500);
  --dk-text-disabled-subtle-on-warning-subtle-level-2: var(--dk-color-warning-700);
  --dk-text-disabled-default-on-warning-subtle-level-2: var(--dk-color-warning-800);
  --dk-icon-disabled-subtle-on-warning-subtle-level-2: var(--dk-text-disabled-subtle-on-warning-subtle-level-2);
  --dk-icon-disabled-default-on-warning-subtle-level-2: var(--dk-text-disabled-default-on-warning-subtle-level-2);
  --dk-surface-disabled-subtle-on-warning-solid: var(--dk-color-warning-400);
  --dk-surface-disabled-default-on-warning-solid: var(--dk-color-warning-300);
  --dk-border-disabled-subtle-on-warning-solid: var(--dk-color-warning-400);
  --dk-border-disabled-default-on-warning-solid: var(--dk-color-warning-300);
  --dk-text-disabled-subtle-on-warning-solid: var(--dk-color-warning-800);
  --dk-text-disabled-default-on-warning-solid: var(--dk-color-warning-900);
  --dk-icon-disabled-subtle-on-warning-solid: var(--dk-text-disabled-subtle-on-warning-solid);
  --dk-icon-disabled-default-on-warning-solid: var(--dk-text-disabled-default-on-warning-solid);
  --dk-surface-disabled-subtle-on-information-subtle-level-0: var(--dk-color-information-100);
  --dk-surface-disabled-default-on-information-subtle-level-0: var(--dk-color-information-200);
  --dk-border-disabled-subtle-on-information-subtle-level-0: var(--dk-color-information-200);
  --dk-border-disabled-default-on-information-subtle-level-0: var(--dk-color-information-300);
  --dk-text-disabled-subtle-on-information-subtle-level-0: var(--dk-color-information-400);
  --dk-text-disabled-default-on-information-subtle-level-0: var(--dk-color-information-500);
  --dk-icon-disabled-subtle-on-information-subtle-level-0: var(--dk-text-disabled-subtle-on-information-subtle-level-0);
  --dk-icon-disabled-default-on-information-subtle-level-0: var(--dk-text-disabled-default-on-information-subtle-level-0);
  --dk-surface-disabled-subtle-on-information-subtle-level-1: var(--dk-color-information-200);
  --dk-surface-disabled-default-on-information-subtle-level-1: var(--dk-color-information-300);
  --dk-border-disabled-subtle-on-information-subtle-level-1: var(--dk-color-information-300);
  --dk-border-disabled-default-on-information-subtle-level-1: var(--dk-color-information-400);
  --dk-text-disabled-subtle-on-information-subtle-level-1: var(--dk-color-information-500);
  --dk-text-disabled-default-on-information-subtle-level-1: var(--dk-color-information-600);
  --dk-icon-disabled-subtle-on-information-subtle-level-1: var(--dk-text-disabled-subtle-on-information-subtle-level-1);
  --dk-icon-disabled-default-on-information-subtle-level-1: var(--dk-text-disabled-default-on-information-subtle-level-1);
  --dk-surface-disabled-subtle-on-information-subtle-level-2: var(--dk-color-information-300);
  --dk-surface-disabled-default-on-information-subtle-level-2: var(--dk-color-information-400);
  --dk-border-disabled-subtle-on-information-subtle-level-2: var(--dk-color-information-400);
  --dk-border-disabled-default-on-information-subtle-level-2: var(--dk-color-information-500);
  --dk-text-disabled-subtle-on-information-subtle-level-2: var(--dk-color-information-600);
  --dk-text-disabled-default-on-information-subtle-level-2: var(--dk-color-information-700);
  --dk-icon-disabled-subtle-on-information-subtle-level-2: var(--dk-text-disabled-subtle-on-information-subtle-level-2);
  --dk-icon-disabled-default-on-information-subtle-level-2: var(--dk-text-disabled-default-on-information-subtle-level-2);
  --dk-surface-disabled-subtle-on-information-solid: var(--dk-color-information-400);
  --dk-surface-disabled-default-on-information-solid: var(--dk-color-information-300);
  --dk-border-disabled-subtle-on-information-solid: var(--dk-color-information-400);
  --dk-border-disabled-default-on-information-solid: var(--dk-color-information-300);
  --dk-text-disabled-subtle-on-information-solid: var(--dk-color-information-100);
  --dk-text-disabled-default-on-information-solid: var(--dk-color-information-50);
  --dk-icon-disabled-subtle-on-information-solid: var(--dk-text-disabled-subtle-on-information-solid);
  --dk-icon-disabled-default-on-information-solid: var(--dk-text-disabled-default-on-information-solid);
  --dk-surface-disabled-subtle-on-success-subtle-level-0: var(--dk-surface-disabled-subtle-on-primary-subtle-level-0);
  --dk-surface-disabled-default-on-success-subtle-level-0: var(--dk-surface-disabled-default-on-primary-subtle-level-0);
  --dk-border-disabled-subtle-on-success-subtle-level-0: var(--dk-border-disabled-subtle-on-primary-subtle-level-0);
  --dk-border-disabled-default-on-success-subtle-level-0: var(--dk-border-disabled-default-on-primary-subtle-level-0);
  --dk-text-disabled-subtle-on-success-subtle-level-0: var(--dk-text-disabled-subtle-on-primary-subtle-level-0);
  --dk-text-disabled-default-on-success-subtle-level-0: var(--dk-text-disabled-default-on-primary-subtle-level-0);
  --dk-icon-disabled-subtle-on-success-subtle-level-0: var(--dk-icon-disabled-subtle-on-primary-subtle-level-0);
  --dk-icon-disabled-default-on-success-subtle-level-0: var(--dk-icon-disabled-default-on-primary-subtle-level-0);
  --dk-surface-disabled-subtle-on-success-subtle-level-1: var(--dk-surface-disabled-subtle-on-primary-subtle-level-1);
  --dk-surface-disabled-default-on-success-subtle-level-1: var(--dk-surface-disabled-default-on-primary-subtle-level-1);
  --dk-border-disabled-subtle-on-success-subtle-level-1: var(--dk-border-disabled-subtle-on-primary-subtle-level-1);
  --dk-border-disabled-default-on-success-subtle-level-1: var(--dk-border-disabled-default-on-primary-subtle-level-1);
  --dk-text-disabled-subtle-on-success-subtle-level-1: var(--dk-text-disabled-subtle-on-primary-subtle-level-1);
  --dk-text-disabled-default-on-success-subtle-level-1: var(--dk-text-disabled-default-on-primary-subtle-level-1);
  --dk-icon-disabled-subtle-on-success-subtle-level-1: var(--dk-icon-disabled-subtle-on-primary-subtle-level-1);
  --dk-icon-disabled-default-on-success-subtle-level-1: var(--dk-icon-disabled-default-on-primary-subtle-level-1);
  --dk-surface-disabled-subtle-on-success-subtle-level-2: var(--dk-surface-disabled-subtle-on-primary-subtle-level-2);
  --dk-surface-disabled-default-on-success-subtle-level-2: var(--dk-surface-disabled-default-on-primary-subtle-level-2);
  --dk-border-disabled-subtle-on-success-subtle-level-2: var(--dk-border-disabled-subtle-on-primary-subtle-level-2);
  --dk-border-disabled-default-on-success-subtle-level-2: var(--dk-border-disabled-default-on-primary-subtle-level-2);
  --dk-text-disabled-subtle-on-success-subtle-level-2: var(--dk-text-disabled-subtle-on-primary-subtle-level-2);
  --dk-text-disabled-default-on-success-subtle-level-2: var(--dk-text-disabled-default-on-primary-subtle-level-2);
  --dk-icon-disabled-subtle-on-success-subtle-level-2: var(--dk-icon-disabled-subtle-on-primary-subtle-level-2);
  --dk-icon-disabled-default-on-success-subtle-level-2: var(--dk-icon-disabled-default-on-primary-subtle-level-2);
  --dk-surface-disabled-subtle-on-success-solid: var(--dk-surface-disabled-subtle-on-primary-solid);
  --dk-surface-disabled-default-on-success-solid: var(--dk-surface-disabled-default-on-primary-solid);
  --dk-border-disabled-subtle-on-success-solid: var(--dk-border-disabled-subtle-on-primary-solid);
  --dk-border-disabled-default-on-success-solid: var(--dk-border-disabled-default-on-primary-solid);
  --dk-text-disabled-subtle-on-success-solid: var(--dk-text-disabled-subtle-on-primary-solid);
  --dk-text-disabled-default-on-success-solid: var(--dk-text-disabled-default-on-primary-solid);
  --dk-icon-disabled-subtle-on-success-solid: var(--dk-icon-disabled-subtle-on-primary-solid);
  --dk-icon-disabled-default-on-success-solid: var(--dk-icon-disabled-default-on-primary-solid);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-disabled-subtle-on-primary-subtle-level-0: var(--dk-color-primary-800);
  --dk-surface-disabled-default-on-primary-subtle-level-0: var(--dk-color-primary-700);
  --dk-border-disabled-subtle-on-primary-subtle-level-0: var(--dk-color-primary-700);
  --dk-border-disabled-default-on-primary-subtle-level-0: var(--dk-color-primary-600);
  --dk-text-disabled-subtle-on-primary-subtle-level-0: var(--dk-color-primary-600);
  --dk-text-disabled-default-on-primary-subtle-level-0: var(--dk-color-primary-500);
  --dk-icon-disabled-subtle-on-primary-subtle-level-0: var(--dk-text-disabled-subtle-on-primary-subtle-level-0);
  --dk-icon-disabled-default-on-primary-subtle-level-0: var(--dk-text-disabled-default-on-primary-subtle-level-0);
  --dk-surface-disabled-subtle-on-primary-subtle-level-1: var(--dk-color-primary-700);
  --dk-surface-disabled-default-on-primary-subtle-level-1: var(--dk-color-primary-600);
  --dk-border-disabled-subtle-on-primary-subtle-level-1: var(--dk-color-primary-600);
  --dk-border-disabled-default-on-primary-subtle-level-1: var(--dk-color-primary-500);
  --dk-text-disabled-subtle-on-primary-subtle-level-1: var(--dk-color-primary-500);
  --dk-text-disabled-default-on-primary-subtle-level-1: var(--dk-color-primary-400);
  --dk-icon-disabled-subtle-on-primary-subtle-level-1: var(--dk-text-disabled-subtle-on-primary-subtle-level-1);
  --dk-icon-disabled-default-on-primary-subtle-level-1: var(--dk-text-disabled-default-on-primary-subtle-level-1);
  --dk-surface-disabled-subtle-on-primary-subtle-level-2: var(--dk-color-primary-600);
  --dk-surface-disabled-default-on-primary-subtle-level-2: var(--dk-color-primary-500);
  --dk-border-disabled-subtle-on-primary-subtle-level-2: var(--dk-color-primary-500);
  --dk-border-disabled-default-on-primary-subtle-level-2: var(--dk-color-primary-400);
  --dk-text-disabled-subtle-on-primary-subtle-level-2: var(--dk-color-primary-300);
  --dk-text-disabled-default-on-primary-subtle-level-2: var(--dk-color-primary-200);
  --dk-icon-disabled-subtle-on-primary-subtle-level-2: var(--dk-text-disabled-subtle-on-primary-subtle-level-2);
  --dk-icon-disabled-default-on-primary-subtle-level-2: var(--dk-text-disabled-default-on-primary-subtle-level-2);
  --dk-surface-disabled-subtle-on-primary-solid: var(--dk-color-primary-800);
  --dk-surface-disabled-default-on-primary-solid: var(--dk-color-primary-900);
  --dk-border-disabled-subtle-on-primary-solid: var(--dk-color-primary-800);
  --dk-border-disabled-default-on-primary-solid: var(--dk-color-primary-900);
  --dk-text-disabled-subtle-on-primary-solid: var(--dk-color-primary-400);
  --dk-text-disabled-default-on-primary-solid: var(--dk-color-primary-300);
  --dk-icon-disabled-subtle-on-primary-solid: var(--dk-text-disabled-subtle-on-primary-solid);
  --dk-icon-disabled-default-on-primary-solid: var(--dk-text-disabled-default-on-primary-solid);
  --dk-surface-disabled-subtle-on-error-subtle-level-0: var(--dk-color-error-800);
  --dk-surface-disabled-default-on-error-subtle-level-0: var(--dk-color-error-700);
  --dk-border-disabled-subtle-on-error-subtle-level-0: var(--dk-color-error-700);
  --dk-border-disabled-default-on-error-subtle-level-0: var(--dk-color-error-600);
  --dk-text-disabled-subtle-on-error-subtle-level-0: var(--dk-color-error-500);
  --dk-text-disabled-default-on-error-subtle-level-0: var(--dk-color-error-400);
  --dk-icon-disabled-subtle-on-error-subtle-level-0: var(--dk-text-disabled-subtle-on-error-subtle-level-0);
  --dk-icon-disabled-default-on-error-subtle-level-0: var(--dk-text-disabled-default-on-error-subtle-level-0);
  --dk-surface-disabled-subtle-on-error-subtle-level-1: var(--dk-color-error-700);
  --dk-surface-disabled-default-on-error-subtle-level-1: var(--dk-color-error-600);
  --dk-border-disabled-subtle-on-error-subtle-level-1: var(--dk-color-error-600);
  --dk-border-disabled-default-on-error-subtle-level-1: var(--dk-color-error-500);
  --dk-text-disabled-subtle-on-error-subtle-level-1: var(--dk-color-error-400);
  --dk-text-disabled-default-on-error-subtle-level-1: var(--dk-color-error-300);
  --dk-icon-disabled-subtle-on-error-subtle-level-1: var(--dk-text-disabled-subtle-on-error-subtle-level-1);
  --dk-icon-disabled-default-on-error-subtle-level-1: var(--dk-text-disabled-default-on-error-subtle-level-1);
  --dk-surface-disabled-subtle-on-error-subtle-level-2: var(--dk-color-error-600);
  --dk-surface-disabled-default-on-error-subtle-level-2: var(--dk-color-error-500);
  --dk-border-disabled-subtle-on-error-subtle-level-2: var(--dk-color-error-500);
  --dk-border-disabled-default-on-error-subtle-level-2: var(--dk-color-error-400);
  --dk-text-disabled-subtle-on-error-subtle-level-2: var(--dk-color-error-300);
  --dk-text-disabled-default-on-error-subtle-level-2: var(--dk-color-error-200);
  --dk-icon-disabled-subtle-on-error-subtle-level-2: var(--dk-text-disabled-subtle-on-error-subtle-level-2);
  --dk-icon-disabled-default-on-error-subtle-level-2: var(--dk-text-disabled-default-on-error-subtle-level-2);
  --dk-surface-disabled-subtle-on-error-solid: var(--dk-color-error-800);
  --dk-surface-disabled-default-on-error-solid: var(--dk-color-error-900);
  --dk-border-disabled-subtle-on-error-solid: var(--dk-color-error-800);
  --dk-border-disabled-default-on-error-solid: var(--dk-color-error-900);
  --dk-text-disabled-subtle-on-error-solid: var(--dk-color-error-400);
  --dk-text-disabled-default-on-error-solid: var(--dk-color-error-300);
  --dk-icon-disabled-subtle-on-error-solid: var(--dk-text-disabled-subtle-on-error-solid);
  --dk-icon-disabled-default-on-error-solid: var(--dk-text-disabled-default-on-error-solid);
  --dk-surface-disabled-subtle-on-warning-subtle-level-0: var(--dk-color-warning-800);
  --dk-surface-disabled-default-on-warning-subtle-level-0: var(--dk-color-warning-700);
  --dk-border-disabled-subtle-on-warning-subtle-level-0: var(--dk-color-warning-700);
  --dk-border-disabled-default-on-warning-subtle-level-0: var(--dk-color-warning-600);
  --dk-text-disabled-subtle-on-warning-subtle-level-0: var(--dk-color-warning-500);
  --dk-text-disabled-default-on-warning-subtle-level-0: var(--dk-color-warning-400);
  --dk-icon-disabled-subtle-on-warning-subtle-level-0: var(--dk-text-disabled-subtle-on-warning-subtle-level-0);
  --dk-icon-disabled-default-on-warning-subtle-level-0: var(--dk-text-disabled-default-on-warning-subtle-level-0);
  --dk-surface-disabled-subtle-on-warning-subtle-level-1: var(--dk-color-warning-700);
  --dk-surface-disabled-default-on-warning-subtle-level-1: var(--dk-color-warning-600);
  --dk-border-disabled-subtle-on-warning-subtle-level-1: var(--dk-color-warning-600);
  --dk-border-disabled-default-on-warning-subtle-level-1: var(--dk-color-warning-500);
  --dk-text-disabled-subtle-on-warning-subtle-level-1: var(--dk-color-warning-400);
  --dk-text-disabled-default-on-warning-subtle-level-1: var(--dk-color-warning-300);
  --dk-icon-disabled-subtle-on-warning-subtle-level-1: var(--dk-text-disabled-subtle-on-warning-subtle-level-1);
  --dk-icon-disabled-default-on-warning-subtle-level-1: var(--dk-text-disabled-default-on-warning-subtle-level-1);
  --dk-surface-disabled-subtle-on-warning-subtle-level-2: var(--dk-color-warning-600);
  --dk-surface-disabled-default-on-warning-subtle-level-2: var(--dk-color-warning-500);
  --dk-border-disabled-subtle-on-warning-subtle-level-2: var(--dk-color-warning-500);
  --dk-border-disabled-default-on-warning-subtle-level-2: var(--dk-color-warning-400);
  --dk-text-disabled-subtle-on-warning-subtle-level-2: var(--dk-color-warning-200);
  --dk-text-disabled-default-on-warning-subtle-level-2: var(--dk-color-warning-100);
  --dk-icon-disabled-subtle-on-warning-subtle-level-2: var(--dk-text-disabled-subtle-on-warning-subtle-level-2);
  --dk-icon-disabled-default-on-warning-subtle-level-2: var(--dk-text-disabled-default-on-warning-subtle-level-2);
  --dk-surface-disabled-subtle-on-warning-solid: var(--dk-color-warning-800);
  --dk-surface-disabled-default-on-warning-solid: var(--dk-color-warning-900);
  --dk-border-disabled-subtle-on-warning-solid: var(--dk-color-warning-800);
  --dk-border-disabled-default-on-warning-solid: var(--dk-color-warning-900);
  --dk-text-disabled-subtle-on-warning-solid: var(--dk-color-warning-400);
  --dk-text-disabled-default-on-warning-solid: var(--dk-color-warning-300);
  --dk-icon-disabled-subtle-on-warning-solid: var(--dk-text-disabled-subtle-on-warning-solid);
  --dk-icon-disabled-default-on-warning-solid: var(--dk-text-disabled-default-on-warning-solid);
  --dk-surface-disabled-subtle-on-information-subtle-level-0: var(--dk-color-information-800);
  --dk-surface-disabled-default-on-information-subtle-level-0: var(--dk-color-information-700);
  --dk-border-disabled-subtle-on-information-subtle-level-0: var(--dk-color-information-700);
  --dk-border-disabled-default-on-information-subtle-level-0: var(--dk-color-information-600);
  --dk-text-disabled-subtle-on-information-subtle-level-0: var(--dk-color-information-500);
  --dk-text-disabled-default-on-information-subtle-level-0: var(--dk-color-information-400);
  --dk-icon-disabled-subtle-on-information-subtle-level-0: var(--dk-text-disabled-subtle-on-information-subtle-level-0);
  --dk-icon-disabled-default-on-information-subtle-level-0: var(--dk-text-disabled-default-on-information-subtle-level-0);
  --dk-surface-disabled-subtle-on-information-subtle-level-1: var(--dk-color-information-700);
  --dk-surface-disabled-default-on-information-subtle-level-1: var(--dk-color-information-600);
  --dk-border-disabled-subtle-on-information-subtle-level-1: var(--dk-color-information-600);
  --dk-border-disabled-default-on-information-subtle-level-1: var(--dk-color-information-500);
  --dk-text-disabled-subtle-on-information-subtle-level-1: var(--dk-color-information-400);
  --dk-text-disabled-default-on-information-subtle-level-1: var(--dk-color-information-300);
  --dk-icon-disabled-subtle-on-information-subtle-level-1: var(--dk-text-disabled-subtle-on-information-subtle-level-1);
  --dk-icon-disabled-default-on-information-subtle-level-1: var(--dk-text-disabled-default-on-information-subtle-level-1);
  --dk-surface-disabled-subtle-on-information-subtle-level-2: var(--dk-color-information-600);
  --dk-surface-disabled-default-on-information-subtle-level-2: var(--dk-color-information-500);
  --dk-border-disabled-subtle-on-information-subtle-level-2: var(--dk-color-information-500);
  --dk-border-disabled-default-on-information-subtle-level-2: var(--dk-color-information-400);
  --dk-text-disabled-subtle-on-information-subtle-level-2: var(--dk-color-information-300);
  --dk-text-disabled-default-on-information-subtle-level-2: var(--dk-color-information-200);
  --dk-icon-disabled-subtle-on-information-subtle-level-2: var(--dk-text-disabled-subtle-on-information-subtle-level-2);
  --dk-icon-disabled-default-on-information-subtle-level-2: var(--dk-text-disabled-default-on-information-subtle-level-2);
  --dk-surface-disabled-subtle-on-information-solid: var(--dk-color-information-800);
  --dk-surface-disabled-default-on-information-solid: var(--dk-color-information-900);
  --dk-border-disabled-subtle-on-information-solid: var(--dk-color-information-800);
  --dk-border-disabled-default-on-information-solid: var(--dk-color-information-900);
  --dk-text-disabled-subtle-on-information-solid: var(--dk-color-information-400);
  --dk-text-disabled-default-on-information-solid: var(--dk-color-information-300);
  --dk-icon-disabled-subtle-on-information-solid: var(--dk-text-disabled-subtle-on-information-solid);
  --dk-icon-disabled-default-on-information-solid: var(--dk-text-disabled-default-on-information-solid);
  --dk-surface-disabled-subtle-on-success-subtle-level-0: var(--dk-surface-disabled-subtle-on-primary-subtle-level-0);
  --dk-surface-disabled-default-on-success-subtle-level-0: var(--dk-surface-disabled-default-on-primary-subtle-level-0);
  --dk-border-disabled-subtle-on-success-subtle-level-0: var(--dk-border-disabled-subtle-on-primary-subtle-level-0);
  --dk-border-disabled-default-on-success-subtle-level-0: var(--dk-border-disabled-default-on-primary-subtle-level-0);
  --dk-text-disabled-subtle-on-success-subtle-level-0: var(--dk-text-disabled-subtle-on-primary-subtle-level-0);
  --dk-text-disabled-default-on-success-subtle-level-0: var(--dk-text-disabled-default-on-primary-subtle-level-0);
  --dk-icon-disabled-subtle-on-success-subtle-level-0: var(--dk-icon-disabled-subtle-on-primary-subtle-level-0);
  --dk-icon-disabled-default-on-success-subtle-level-0: var(--dk-icon-disabled-default-on-primary-subtle-level-0);
  --dk-surface-disabled-subtle-on-success-subtle-level-1: var(--dk-surface-disabled-subtle-on-primary-subtle-level-1);
  --dk-surface-disabled-default-on-success-subtle-level-1: var(--dk-surface-disabled-default-on-primary-subtle-level-1);
  --dk-border-disabled-subtle-on-success-subtle-level-1: var(--dk-border-disabled-subtle-on-primary-subtle-level-1);
  --dk-border-disabled-default-on-success-subtle-level-1: var(--dk-border-disabled-default-on-primary-subtle-level-1);
  --dk-text-disabled-subtle-on-success-subtle-level-1: var(--dk-text-disabled-subtle-on-primary-subtle-level-1);
  --dk-text-disabled-default-on-success-subtle-level-1: var(--dk-text-disabled-default-on-primary-subtle-level-1);
  --dk-icon-disabled-subtle-on-success-subtle-level-1: var(--dk-icon-disabled-subtle-on-primary-subtle-level-1);
  --dk-icon-disabled-default-on-success-subtle-level-1: var(--dk-icon-disabled-default-on-primary-subtle-level-1);
  --dk-surface-disabled-subtle-on-success-subtle-level-2: var(--dk-surface-disabled-subtle-on-primary-subtle-level-2);
  --dk-surface-disabled-default-on-success-subtle-level-2: var(--dk-surface-disabled-default-on-primary-subtle-level-2);
  --dk-border-disabled-subtle-on-success-subtle-level-2: var(--dk-border-disabled-subtle-on-primary-subtle-level-2);
  --dk-border-disabled-default-on-success-subtle-level-2: var(--dk-border-disabled-default-on-primary-subtle-level-2);
  --dk-text-disabled-subtle-on-success-subtle-level-2: var(--dk-text-disabled-subtle-on-primary-subtle-level-2);
  --dk-text-disabled-default-on-success-subtle-level-2: var(--dk-text-disabled-default-on-primary-subtle-level-2);
  --dk-icon-disabled-subtle-on-success-subtle-level-2: var(--dk-icon-disabled-subtle-on-primary-subtle-level-2);
  --dk-icon-disabled-default-on-success-subtle-level-2: var(--dk-icon-disabled-default-on-primary-subtle-level-2);
  --dk-surface-disabled-subtle-on-success-solid: var(--dk-surface-disabled-subtle-on-primary-solid);
  --dk-surface-disabled-default-on-success-solid: var(--dk-surface-disabled-default-on-primary-solid);
  --dk-border-disabled-subtle-on-success-solid: var(--dk-border-disabled-subtle-on-primary-solid);
  --dk-border-disabled-default-on-success-solid: var(--dk-border-disabled-default-on-primary-solid);
  --dk-text-disabled-subtle-on-success-solid: var(--dk-text-disabled-subtle-on-primary-solid);
  --dk-text-disabled-default-on-success-solid: var(--dk-text-disabled-default-on-primary-solid);
  --dk-icon-disabled-subtle-on-success-solid: var(--dk-icon-disabled-subtle-on-primary-solid);
  --dk-icon-disabled-default-on-success-solid: var(--dk-icon-disabled-default-on-primary-solid);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-hue-prev4-subtle: var(--dk-primitive-color-primary-prev4-50);
  --dk-text-hue-prev4-on-subtle: var(--dk-primitive-color-primary-prev4-700);
  --dk-border-hue-prev4-hairline: var(--dk-primitive-color-primary-prev4-300);
  --dk-icon-hue-prev4-default: var(--dk-primitive-color-primary-prev4-500);
  --dk-surface-hue-prev4-solid: var(--dk-primitive-color-primary-prev4-600);
  --dk-surface-hue-prev3-subtle: var(--dk-primitive-color-primary-prev3-50);
  --dk-text-hue-prev3-on-subtle: var(--dk-primitive-color-primary-prev3-700);
  --dk-border-hue-prev3-hairline: var(--dk-primitive-color-primary-prev3-300);
  --dk-icon-hue-prev3-default: var(--dk-primitive-color-primary-prev3-500);
  --dk-surface-hue-prev3-solid: var(--dk-primitive-color-primary-prev3-600);
  --dk-surface-hue-prev2-subtle: var(--dk-primitive-color-primary-prev2-50);
  --dk-text-hue-prev2-on-subtle: var(--dk-primitive-color-primary-prev2-700);
  --dk-border-hue-prev2-hairline: var(--dk-primitive-color-primary-prev2-300);
  --dk-icon-hue-prev2-default: var(--dk-primitive-color-primary-prev2-500);
  --dk-surface-hue-prev2-solid: var(--dk-primitive-color-primary-prev2-600);
  --dk-surface-hue-prev1-subtle: var(--dk-primitive-color-primary-prev1-50);
  --dk-text-hue-prev1-on-subtle: var(--dk-primitive-color-primary-prev1-700);
  --dk-border-hue-prev1-hairline: var(--dk-primitive-color-primary-prev1-300);
  --dk-icon-hue-prev1-default: var(--dk-primitive-color-primary-prev1-500);
  --dk-surface-hue-prev1-solid: var(--dk-primitive-color-primary-prev1-600);
  --dk-surface-hue-primary-subtle: var(--dk-color-primary-50);
  --dk-text-hue-primary-on-subtle: var(--dk-color-primary-700);
  --dk-border-hue-primary-hairline: var(--dk-color-primary-300);
  --dk-icon-hue-primary-default: var(--dk-color-primary-500);
  --dk-surface-hue-primary-solid: var(--dk-color-primary-600);
  --dk-surface-hue-next1-subtle: var(--dk-primitive-color-primary-next1-50);
  --dk-text-hue-next1-on-subtle: var(--dk-primitive-color-primary-next1-700);
  --dk-border-hue-next1-hairline: var(--dk-primitive-color-primary-next1-300);
  --dk-icon-hue-next1-default: var(--dk-primitive-color-primary-next1-500);
  --dk-surface-hue-next1-solid: var(--dk-primitive-color-primary-next1-600);
  --dk-surface-hue-next2-subtle: var(--dk-primitive-color-primary-next2-50);
  --dk-text-hue-next2-on-subtle: var(--dk-primitive-color-primary-next2-700);
  --dk-border-hue-next2-hairline: var(--dk-primitive-color-primary-next2-300);
  --dk-icon-hue-next2-default: var(--dk-primitive-color-primary-next2-500);
  --dk-surface-hue-next2-solid: var(--dk-primitive-color-primary-next2-600);
  --dk-surface-hue-next3-subtle: var(--dk-primitive-color-primary-next3-50);
  --dk-text-hue-next3-on-subtle: var(--dk-primitive-color-primary-next3-700);
  --dk-border-hue-next3-hairline: var(--dk-primitive-color-primary-next3-300);
  --dk-icon-hue-next3-default: var(--dk-primitive-color-primary-next3-500);
  --dk-surface-hue-next3-solid: var(--dk-primitive-color-primary-next3-600);
  --dk-surface-hue-next4-subtle: var(--dk-primitive-color-primary-next4-50);
  --dk-text-hue-next4-on-subtle: var(--dk-primitive-color-primary-next4-700);
  --dk-border-hue-next4-hairline: var(--dk-primitive-color-primary-next4-300);
  --dk-icon-hue-next4-default: var(--dk-primitive-color-primary-next4-500);
  --dk-surface-hue-next4-solid: var(--dk-primitive-color-primary-next4-600);
  --dk-text-hue-on-solid: var(--dk-text-base-white);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-hue-prev4-subtle: var(--dk-primitive-color-primary-prev4-850);
  --dk-text-hue-prev4-on-subtle: var(--dk-primitive-color-primary-prev4-200);
  --dk-border-hue-prev4-hairline: var(--dk-primitive-color-primary-prev4-800);
  --dk-icon-hue-prev4-default: var(--dk-primitive-color-primary-prev4-400);
  --dk-surface-hue-prev4-solid: var(--dk-primitive-color-primary-prev4-600);
  --dk-surface-hue-prev3-subtle: var(--dk-primitive-color-primary-prev3-850);
  --dk-text-hue-prev3-on-subtle: var(--dk-primitive-color-primary-prev3-200);
  --dk-border-hue-prev3-hairline: var(--dk-primitive-color-primary-prev3-800);
  --dk-icon-hue-prev3-default: var(--dk-primitive-color-primary-prev3-400);
  --dk-surface-hue-prev3-solid: var(--dk-primitive-color-primary-prev3-600);
  --dk-surface-hue-prev2-subtle: var(--dk-primitive-color-primary-prev2-850);
  --dk-text-hue-prev2-on-subtle: var(--dk-primitive-color-primary-prev2-200);
  --dk-border-hue-prev2-hairline: var(--dk-primitive-color-primary-prev2-800);
  --dk-icon-hue-prev2-default: var(--dk-primitive-color-primary-prev2-400);
  --dk-surface-hue-prev2-solid: var(--dk-primitive-color-primary-prev2-600);
  --dk-surface-hue-prev1-subtle: var(--dk-primitive-color-primary-prev1-850);
  --dk-text-hue-prev1-on-subtle: var(--dk-primitive-color-primary-prev1-200);
  --dk-border-hue-prev1-hairline: var(--dk-primitive-color-primary-prev1-800);
  --dk-icon-hue-prev1-default: var(--dk-primitive-color-primary-prev1-400);
  --dk-surface-hue-prev1-solid: var(--dk-primitive-color-primary-prev1-600);
  --dk-surface-hue-primary-subtle: var(--dk-color-primary-850);
  --dk-text-hue-primary-on-subtle: var(--dk-color-primary-200);
  --dk-border-hue-primary-hairline: var(--dk-color-primary-800);
  --dk-icon-hue-primary-default: var(--dk-color-primary-400);
  --dk-surface-hue-primary-solid: var(--dk-color-primary-600);
  --dk-surface-hue-next1-subtle: var(--dk-primitive-color-primary-next1-850);
  --dk-text-hue-next1-on-subtle: var(--dk-primitive-color-primary-next1-200);
  --dk-border-hue-next1-hairline: var(--dk-primitive-color-primary-next1-800);
  --dk-icon-hue-next1-default: var(--dk-primitive-color-primary-next1-400);
  --dk-surface-hue-next1-solid: var(--dk-primitive-color-primary-next1-600);
  --dk-surface-hue-next2-subtle: var(--dk-primitive-color-primary-next2-850);
  --dk-text-hue-next2-on-subtle: var(--dk-primitive-color-primary-next2-200);
  --dk-border-hue-next2-hairline: var(--dk-primitive-color-primary-next2-800);
  --dk-icon-hue-next2-default: var(--dk-primitive-color-primary-next2-400);
  --dk-surface-hue-next2-solid: var(--dk-primitive-color-primary-next2-600);
  --dk-surface-hue-next3-subtle: var(--dk-primitive-color-primary-next3-850);
  --dk-text-hue-next3-on-subtle: var(--dk-primitive-color-primary-next3-200);
  --dk-border-hue-next3-hairline: var(--dk-primitive-color-primary-next3-800);
  --dk-icon-hue-next3-default: var(--dk-primitive-color-primary-next3-400);
  --dk-surface-hue-next3-solid: var(--dk-primitive-color-primary-next3-600);
  --dk-surface-hue-next4-subtle: var(--dk-primitive-color-primary-next4-850);
  --dk-text-hue-next4-on-subtle: var(--dk-primitive-color-primary-next4-200);
  --dk-border-hue-next4-hairline: var(--dk-primitive-color-primary-next4-800);
  --dk-icon-hue-next4-default: var(--dk-primitive-color-primary-next4-400);
  --dk-surface-hue-next4-solid: var(--dk-primitive-color-primary-next4-600);
  --dk-text-hue-on-solid: var(--dk-text-base-white);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-control-default: var(--dk-color-neutral-25);
  --dk-surface-control-hover: var(--dk-color-neutral-50);
  --dk-surface-control-active: var(--dk-color-neutral-100);
  --dk-surface-control-default-level-1: var(--dk-color-neutral-50);
  --dk-surface-control-hover-level-1: var(--dk-color-neutral-100);
  --dk-surface-control-active-level-1: var(--dk-color-neutral-200);
  --dk-surface-control-default-level-2: var(--dk-color-neutral-100);
  --dk-surface-control-hover-level-2: var(--dk-color-neutral-200);
  --dk-surface-control-active-level-2: var(--dk-color-neutral-300);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-control-default: var(--dk-color-neutral-1000);
  --dk-surface-control-hover: var(--dk-color-neutral-900);
  --dk-surface-control-active: var(--dk-color-neutral-800);
  --dk-surface-control-default-level-1: var(--dk-color-neutral-900);
  --dk-surface-control-hover-level-1: var(--dk-color-neutral-800);
  --dk-surface-control-active-level-1: var(--dk-color-neutral-700);
  --dk-surface-control-default-level-2: var(--dk-color-neutral-800);
  --dk-surface-control-hover-level-2: var(--dk-color-neutral-700);
  --dk-surface-control-active-level-2: var(--dk-color-neutral-600);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-icon-control-default: var(--dk-color-neutral-500);
  --dk-icon-control-hover: var(--dk-color-neutral-600);
  --dk-icon-control-active: var(--dk-color-neutral-700);
  --dk-icon-control-default-level-1: var(--dk-color-neutral-600);
  --dk-icon-control-hover-level-1: var(--dk-color-neutral-700);
  --dk-icon-control-active-level-1: var(--dk-color-neutral-800);
  --dk-icon-control-default-level-2: var(--dk-color-neutral-700);
  --dk-icon-control-hover-level-2: var(--dk-color-neutral-800);
  --dk-icon-control-active-level-2: var(--dk-color-neutral-900);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-icon-control-default: var(--dk-color-neutral-200);
  --dk-icon-control-hover: var(--dk-color-neutral-100);
  --dk-icon-control-active: var(--dk-color-neutral-50);
  --dk-icon-control-default-level-1: var(--dk-color-neutral-200);
  --dk-icon-control-hover-level-1: var(--dk-color-neutral-100);
  --dk-icon-control-active-level-1: var(--dk-color-neutral-50);
  --dk-icon-control-default-level-2: var(--dk-color-neutral-100);
  --dk-icon-control-hover-level-2: var(--dk-color-neutral-50);
  --dk-icon-control-active-level-2: var(--dk-color-neutral-25);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-text-control-default: var(--dk-color-neutral-600);
  --dk-text-control-hover: var(--dk-color-neutral-700);
  --dk-text-control-active: var(--dk-color-neutral-800);
  --dk-text-control-default-level-1: var(--dk-color-neutral-700);
  --dk-text-control-hover-level-1: var(--dk-color-neutral-800);
  --dk-text-control-active-level-1: var(--dk-color-neutral-900);
  --dk-text-control-default-level-2: var(--dk-color-neutral-800);
  --dk-text-control-hover-level-2: var(--dk-color-neutral-900);
  --dk-text-control-active-level-2: var(--dk-color-neutral-1000);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-text-control-default: var(--dk-color-neutral-200);
  --dk-text-control-hover: var(--dk-color-neutral-100);
  --dk-text-control-active: var(--dk-color-neutral-50);
  --dk-text-control-default-level-1: var(--dk-color-neutral-200);
  --dk-text-control-hover-level-1: var(--dk-color-neutral-100);
  --dk-text-control-active-level-1: var(--dk-color-neutral-50);
  --dk-text-control-default-level-2: var(--dk-color-neutral-100);
  --dk-text-control-hover-level-2: var(--dk-color-neutral-50);
  --dk-text-control-active-level-2: var(--dk-color-neutral-25);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-icon-control-disabled: var(--dk-icon-disabled-subtle);
  --dk-text-control-disabled: var(--dk-text-disabled-subtle);
  --dk-surface-control-disabled: var(--dk-surface-disabled-subtle);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-icon-control-disabled: var(--dk-icon-disabled-subtle);
  --dk-text-control-disabled: var(--dk-text-disabled-subtle);
  --dk-surface-control-disabled: var(--dk-surface-disabled-subtle);
}
[data-theme="light"] [data-tone="inverse"][data-surface="1"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"][data-surface="1"] {
  --dk-surface-control-default: var(--dk-surface-control-default-level-1);
  --dk-surface-control-hover: var(--dk-surface-control-hover-level-1);
  --dk-surface-control-active: var(--dk-surface-control-active-level-1);
  --dk-icon-control-default: var(--dk-icon-control-default-level-1);
  --dk-icon-control-hover: var(--dk-icon-control-hover-level-1);
  --dk-icon-control-active: var(--dk-icon-control-active-level-1);
  --dk-text-control-default: var(--dk-text-control-default-level-1);
  --dk-text-control-hover: var(--dk-text-control-hover-level-1);
  --dk-text-control-active: var(--dk-text-control-active-level-1);
}
[data-theme="light"][data-tone="inverse"][data-surface="below"],
[data-theme="light"] [data-tone="inverse"][data-surface="below"]:not([data-theme]):where(:not(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *))) {
  --dk-surface-control-default: var(--dk-surface-control-default-level-1);
  --dk-surface-control-hover: var(--dk-surface-control-hover-level-1);
  --dk-surface-control-active: var(--dk-surface-control-active-level-1);
  --dk-icon-control-default: var(--dk-icon-control-default-level-1);
  --dk-icon-control-hover: var(--dk-icon-control-hover-level-1);
  --dk-icon-control-active: var(--dk-icon-control-active-level-1);
  --dk-text-control-default: var(--dk-text-control-default-level-1);
  --dk-text-control-hover: var(--dk-text-control-hover-level-1);
  --dk-text-control-active: var(--dk-text-control-active-level-1);
}
[data-theme="light"] [data-tone="inverse"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="light"][data-tone="inverse"][data-surface="raised"] {
  --dk-surface-control-default: var(--dk-surface-control-default-level-1);
  --dk-surface-control-hover: var(--dk-surface-control-hover-level-1);
  --dk-surface-control-active: var(--dk-surface-control-active-level-1);
  --dk-icon-control-default: var(--dk-icon-control-default-level-1);
  --dk-icon-control-hover: var(--dk-icon-control-hover-level-1);
  --dk-icon-control-active: var(--dk-icon-control-active-level-1);
  --dk-text-control-default: var(--dk-text-control-default-level-1);
  --dk-text-control-hover: var(--dk-text-control-hover-level-1);
  --dk-text-control-active: var(--dk-text-control-active-level-1);
}
[data-theme="dark"] [data-tone="inverse"][data-surface="1"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"][data-surface="1"] {
  --dk-surface-control-default: var(--dk-surface-control-default-level-1);
  --dk-surface-control-hover: var(--dk-surface-control-hover-level-1);
  --dk-surface-control-active: var(--dk-surface-control-active-level-1);
  --dk-icon-control-default: var(--dk-icon-control-default-level-1);
  --dk-icon-control-hover: var(--dk-icon-control-hover-level-1);
  --dk-icon-control-active: var(--dk-icon-control-active-level-1);
  --dk-text-control-default: var(--dk-text-control-default-level-1);
  --dk-text-control-hover: var(--dk-text-control-hover-level-1);
  --dk-text-control-active: var(--dk-text-control-active-level-1);
}
[data-theme="dark"][data-tone="inverse"][data-surface="below"],
[data-theme="dark"] [data-tone="inverse"][data-surface="below"]:not([data-theme]):where(:not(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *))) {
  --dk-surface-control-default: var(--dk-surface-control-default-level-1);
  --dk-surface-control-hover: var(--dk-surface-control-hover-level-1);
  --dk-surface-control-active: var(--dk-surface-control-active-level-1);
  --dk-icon-control-default: var(--dk-icon-control-default-level-1);
  --dk-icon-control-hover: var(--dk-icon-control-hover-level-1);
  --dk-icon-control-active: var(--dk-icon-control-active-level-1);
  --dk-text-control-default: var(--dk-text-control-default-level-1);
  --dk-text-control-hover: var(--dk-text-control-hover-level-1);
  --dk-text-control-active: var(--dk-text-control-active-level-1);
}
[data-theme="light"] [data-tone="inverse"][data-surface="2"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"][data-surface="2"] {
  --dk-surface-control-default: var(--dk-surface-control-default-level-2);
  --dk-surface-control-hover: var(--dk-surface-control-hover-level-2);
  --dk-surface-control-active: var(--dk-surface-control-active-level-2);
  --dk-icon-control-default: var(--dk-icon-control-default-level-2);
  --dk-icon-control-hover: var(--dk-icon-control-hover-level-2);
  --dk-icon-control-active: var(--dk-icon-control-active-level-2);
  --dk-text-control-default: var(--dk-text-control-default-level-2);
  --dk-text-control-hover: var(--dk-text-control-hover-level-2);
  --dk-text-control-active: var(--dk-text-control-active-level-2);
}
[data-theme="light"] [data-tone="inverse"][data-surface="below"]:not([data-theme]):where(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *)) {
  --dk-surface-control-default: var(--dk-surface-control-default-level-2);
  --dk-surface-control-hover: var(--dk-surface-control-hover-level-2);
  --dk-surface-control-active: var(--dk-surface-control-active-level-2);
  --dk-icon-control-default: var(--dk-icon-control-default-level-2);
  --dk-icon-control-hover: var(--dk-icon-control-hover-level-2);
  --dk-icon-control-active: var(--dk-icon-control-active-level-2);
  --dk-text-control-default: var(--dk-text-control-default-level-2);
  --dk-text-control-hover: var(--dk-text-control-hover-level-2);
  --dk-text-control-active: var(--dk-text-control-active-level-2);
}
[data-theme="dark"] [data-tone="inverse"][data-surface="2"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"][data-surface="2"] {
  --dk-surface-control-default: var(--dk-surface-control-default-level-2);
  --dk-surface-control-hover: var(--dk-surface-control-hover-level-2);
  --dk-surface-control-active: var(--dk-surface-control-active-level-2);
  --dk-icon-control-default: var(--dk-icon-control-default-level-2);
  --dk-icon-control-hover: var(--dk-icon-control-hover-level-2);
  --dk-icon-control-active: var(--dk-icon-control-active-level-2);
  --dk-text-control-default: var(--dk-text-control-default-level-2);
  --dk-text-control-hover: var(--dk-text-control-hover-level-2);
  --dk-text-control-active: var(--dk-text-control-active-level-2);
}
[data-theme="dark"] [data-tone="inverse"][data-surface="below"]:not([data-theme]):where(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *)) {
  --dk-surface-control-default: var(--dk-surface-control-default-level-2);
  --dk-surface-control-hover: var(--dk-surface-control-hover-level-2);
  --dk-surface-control-active: var(--dk-surface-control-active-level-2);
  --dk-icon-control-default: var(--dk-icon-control-default-level-2);
  --dk-icon-control-hover: var(--dk-icon-control-hover-level-2);
  --dk-icon-control-active: var(--dk-icon-control-active-level-2);
  --dk-text-control-default: var(--dk-text-control-default-level-2);
  --dk-text-control-hover: var(--dk-text-control-hover-level-2);
  --dk-text-control-active: var(--dk-text-control-active-level-2);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-control-default-on-primary-subtle-level-0: var(--dk-color-primary-100);
  --dk-surface-control-hover-on-primary-subtle-level-0: var(--dk-color-primary-200);
  --dk-surface-control-active-on-primary-subtle-level-0: var(--dk-color-primary-300);
  --dk-border-control-default-on-primary-subtle-level-0: var(--dk-color-primary-200);
  --dk-border-control-hover-on-primary-subtle-level-0: var(--dk-color-primary-300);
  --dk-border-control-active-on-primary-subtle-level-0: var(--dk-color-primary-400);
  --dk-icon-control-disabled-on-primary-subtle-level-0: var(--dk-color-primary-300);
  --dk-surface-control-disabled-on-primary-subtle-level-0: var(--dk-color-primary-100);
  --dk-icon-control-default-on-primary-subtle-level-0: var(--dk-color-primary-700);
  --dk-icon-control-hover-on-primary-subtle-level-0: var(--dk-color-primary-800);
  --dk-icon-control-active-on-primary-subtle-level-0: var(--dk-color-primary-850);
  --dk-text-control-default-on-primary-subtle-level-0: var(--dk-color-primary-850);
  --dk-text-control-hover-on-primary-subtle-level-0: var(--dk-color-primary-800);
  --dk-text-control-active-on-primary-subtle-level-0: var(--dk-color-primary-850);
  --dk-text-control-disabled-on-primary-subtle-level-0: var(--dk-color-primary-400);
  --dk-surface-control-default-on-primary-subtle-level-1: var(--dk-color-primary-200);
  --dk-surface-control-hover-on-primary-subtle-level-1: var(--dk-color-primary-300);
  --dk-surface-control-active-on-primary-subtle-level-1: var(--dk-color-primary-400);
  --dk-border-control-default-on-primary-subtle-level-1: var(--dk-color-primary-300);
  --dk-border-control-hover-on-primary-subtle-level-1: var(--dk-color-primary-400);
  --dk-border-control-active-on-primary-subtle-level-1: var(--dk-color-primary-500);
  --dk-icon-control-disabled-on-primary-subtle-level-1: var(--dk-color-primary-400);
  --dk-surface-control-disabled-on-primary-subtle-level-1: var(--dk-color-primary-200);
  --dk-icon-control-default-on-primary-subtle-level-1: var(--dk-color-primary-800);
  --dk-icon-control-hover-on-primary-subtle-level-1: var(--dk-color-primary-850);
  --dk-icon-control-active-on-primary-subtle-level-1: var(--dk-color-primary-900);
  --dk-text-control-default-on-primary-subtle-level-1: var(--dk-color-primary-900);
  --dk-text-control-hover-on-primary-subtle-level-1: var(--dk-color-primary-850);
  --dk-text-control-active-on-primary-subtle-level-1: var(--dk-color-primary-900);
  --dk-text-control-disabled-on-primary-subtle-level-1: var(--dk-color-primary-500);
  --dk-surface-control-default-on-primary-subtle-level-2: var(--dk-color-primary-300);
  --dk-surface-control-hover-on-primary-subtle-level-2: var(--dk-color-primary-400);
  --dk-surface-control-active-on-primary-subtle-level-2: var(--dk-color-primary-500);
  --dk-border-control-default-on-primary-subtle-level-2: var(--dk-color-primary-400);
  --dk-border-control-hover-on-primary-subtle-level-2: var(--dk-color-primary-500);
  --dk-border-control-active-on-primary-subtle-level-2: var(--dk-color-primary-550);
  --dk-icon-control-disabled-on-primary-subtle-level-2: var(--dk-color-primary-500);
  --dk-surface-control-disabled-on-primary-subtle-level-2: var(--dk-color-primary-300);
  --dk-icon-control-default-on-primary-subtle-level-2: var(--dk-color-primary-850);
  --dk-icon-control-hover-on-primary-subtle-level-2: var(--dk-color-primary-900);
  --dk-icon-control-active-on-primary-subtle-level-2: var(--dk-color-primary-800);
  --dk-text-control-default-on-primary-subtle-level-2: var(--dk-color-primary-850);
  --dk-text-control-hover-on-primary-subtle-level-2: var(--dk-color-primary-900);
  --dk-text-control-active-on-primary-subtle-level-2: var(--dk-color-primary-900);
  --dk-text-control-disabled-on-primary-subtle-level-2: var(--dk-color-primary-550);
  --dk-surface-control-default-on-primary-solid: var(--dk-color-primary-650);
  --dk-surface-control-hover-on-primary-solid: var(--dk-color-primary-600);
  --dk-surface-control-active-on-primary-solid: var(--dk-color-primary-550);
  --dk-border-control-default-on-primary-solid: var(--dk-color-primary-600);
  --dk-border-control-hover-on-primary-solid: var(--dk-color-primary-550);
  --dk-border-control-active-on-primary-solid: var(--dk-color-primary-500);
  --dk-icon-control-disabled-on-primary-solid: var(--dk-color-primary-400);
  --dk-surface-control-disabled-on-primary-solid: var(--dk-color-primary-650);
  --dk-icon-control-default-on-primary-solid: var(--dk-color-primary-100);
  --dk-icon-control-hover-on-primary-solid: var(--dk-color-primary-50);
  --dk-icon-control-active-on-primary-solid: var(--dk-color-primary-25);
  --dk-text-control-default-on-primary-solid: var(--dk-color-primary-25);
  --dk-text-control-hover-on-primary-solid: var(--dk-color-primary-50);
  --dk-text-control-active-on-primary-solid: var(--dk-color-primary-25);
  --dk-text-control-disabled-on-primary-solid: var(--dk-color-primary-300);
  --dk-surface-control-default-on-primary-solid-level-1: var(--dk-color-primary-700);
  --dk-surface-control-hover-on-primary-solid-level-1: var(--dk-color-primary-650);
  --dk-surface-control-active-on-primary-solid-level-1: var(--dk-color-primary-600);
  --dk-border-control-default-on-primary-solid-level-1: var(--dk-color-primary-650);
  --dk-border-control-hover-on-primary-solid-level-1: var(--dk-color-primary-600);
  --dk-border-control-active-on-primary-solid-level-1: var(--dk-color-primary-550);
  --dk-icon-control-disabled-on-primary-solid-level-1: var(--dk-color-primary-500);
  --dk-surface-control-disabled-on-primary-solid-level-1: var(--dk-color-primary-700);
  --dk-icon-control-default-on-primary-solid-level-1: var(--dk-color-primary-200);
  --dk-icon-control-hover-on-primary-solid-level-1: var(--dk-color-primary-100);
  --dk-icon-control-active-on-primary-solid-level-1: var(--dk-color-primary-50);
  --dk-text-control-default-on-primary-solid-level-1: var(--dk-color-primary-50);
  --dk-text-control-hover-on-primary-solid-level-1: var(--dk-color-primary-100);
  --dk-text-control-active-on-primary-solid-level-1: var(--dk-color-primary-50);
  --dk-text-control-disabled-on-primary-solid-level-1: var(--dk-color-primary-400);
  --dk-surface-control-default-on-primary-solid-level-2: var(--dk-color-primary-850);
  --dk-surface-control-hover-on-primary-solid-level-2: var(--dk-color-primary-800);
  --dk-surface-control-active-on-primary-solid-level-2: var(--dk-color-primary-700);
  --dk-border-control-default-on-primary-solid-level-2: var(--dk-color-primary-800);
  --dk-border-control-hover-on-primary-solid-level-2: var(--dk-color-primary-700);
  --dk-border-control-active-on-primary-solid-level-2: var(--dk-color-primary-650);
  --dk-icon-control-disabled-on-primary-solid-level-2: var(--dk-color-primary-700);
  --dk-surface-control-disabled-on-primary-solid-level-2: var(--dk-color-primary-850);
  --dk-icon-control-default-on-primary-solid-level-2: var(--dk-color-primary-550);
  --dk-icon-control-hover-on-primary-solid-level-2: var(--dk-color-primary-500);
  --dk-icon-control-active-on-primary-solid-level-2: var(--dk-color-primary-300);
  --dk-text-control-default-on-primary-solid-level-2: var(--dk-color-primary-400);
  --dk-text-control-hover-on-primary-solid-level-2: var(--dk-color-primary-500);
  --dk-text-control-active-on-primary-solid-level-2: var(--dk-color-primary-300);
  --dk-text-control-disabled-on-primary-solid-level-2: var(--dk-color-primary-650);
  --dk-surface-control-default-on-success-subtle-level-0: var(--dk-color-primary-100);
  --dk-surface-control-hover-on-success-subtle-level-0: var(--dk-color-primary-200);
  --dk-surface-control-active-on-success-subtle-level-0: var(--dk-color-primary-300);
  --dk-border-control-default-on-success-subtle-level-0: var(--dk-color-primary-200);
  --dk-border-control-hover-on-success-subtle-level-0: var(--dk-color-primary-300);
  --dk-border-control-active-on-success-subtle-level-0: var(--dk-color-primary-400);
  --dk-icon-control-disabled-on-success-subtle-level-0: var(--dk-color-primary-300);
  --dk-surface-control-disabled-on-success-subtle-level-0: var(--dk-color-primary-100);
  --dk-icon-control-default-on-success-subtle-level-0: var(--dk-color-primary-700);
  --dk-icon-control-hover-on-success-subtle-level-0: var(--dk-color-primary-800);
  --dk-icon-control-active-on-success-subtle-level-0: var(--dk-color-primary-850);
  --dk-text-control-default-on-success-subtle-level-0: var(--dk-color-primary-850);
  --dk-text-control-hover-on-success-subtle-level-0: var(--dk-color-primary-800);
  --dk-text-control-active-on-success-subtle-level-0: var(--dk-color-primary-850);
  --dk-text-control-disabled-on-success-subtle-level-0: var(--dk-color-primary-400);
  --dk-surface-control-default-on-success-subtle-level-1: var(--dk-color-primary-200);
  --dk-surface-control-hover-on-success-subtle-level-1: var(--dk-color-primary-300);
  --dk-surface-control-active-on-success-subtle-level-1: var(--dk-color-primary-400);
  --dk-border-control-default-on-success-subtle-level-1: var(--dk-color-primary-300);
  --dk-border-control-hover-on-success-subtle-level-1: var(--dk-color-primary-400);
  --dk-border-control-active-on-success-subtle-level-1: var(--dk-color-primary-500);
  --dk-icon-control-disabled-on-success-subtle-level-1: var(--dk-color-primary-400);
  --dk-surface-control-disabled-on-success-subtle-level-1: var(--dk-color-primary-200);
  --dk-icon-control-default-on-success-subtle-level-1: var(--dk-color-primary-800);
  --dk-icon-control-hover-on-success-subtle-level-1: var(--dk-color-primary-850);
  --dk-icon-control-active-on-success-subtle-level-1: var(--dk-color-primary-900);
  --dk-text-control-default-on-success-subtle-level-1: var(--dk-color-primary-900);
  --dk-text-control-hover-on-success-subtle-level-1: var(--dk-color-primary-850);
  --dk-text-control-active-on-success-subtle-level-1: var(--dk-color-primary-900);
  --dk-text-control-disabled-on-success-subtle-level-1: var(--dk-color-primary-500);
  --dk-surface-control-default-on-success-subtle-level-2: var(--dk-color-primary-300);
  --dk-surface-control-hover-on-success-subtle-level-2: var(--dk-color-primary-400);
  --dk-surface-control-active-on-success-subtle-level-2: var(--dk-color-primary-500);
  --dk-border-control-default-on-success-subtle-level-2: var(--dk-color-primary-400);
  --dk-border-control-hover-on-success-subtle-level-2: var(--dk-color-primary-500);
  --dk-border-control-active-on-success-subtle-level-2: var(--dk-color-primary-550);
  --dk-icon-control-disabled-on-success-subtle-level-2: var(--dk-color-primary-500);
  --dk-surface-control-disabled-on-success-subtle-level-2: var(--dk-color-primary-300);
  --dk-icon-control-default-on-success-subtle-level-2: var(--dk-color-primary-850);
  --dk-icon-control-hover-on-success-subtle-level-2: var(--dk-color-primary-900);
  --dk-icon-control-active-on-success-subtle-level-2: var(--dk-color-primary-800);
  --dk-text-control-default-on-success-subtle-level-2: var(--dk-color-primary-850);
  --dk-text-control-hover-on-success-subtle-level-2: var(--dk-color-primary-900);
  --dk-text-control-active-on-success-subtle-level-2: var(--dk-color-primary-900);
  --dk-text-control-disabled-on-success-subtle-level-2: var(--dk-color-primary-550);
  --dk-surface-control-default-on-success-solid: var(--dk-color-primary-650);
  --dk-surface-control-hover-on-success-solid: var(--dk-color-primary-600);
  --dk-surface-control-active-on-success-solid: var(--dk-color-primary-550);
  --dk-border-control-default-on-success-solid: var(--dk-color-primary-600);
  --dk-border-control-hover-on-success-solid: var(--dk-color-primary-550);
  --dk-border-control-active-on-success-solid: var(--dk-color-primary-500);
  --dk-icon-control-disabled-on-success-solid: var(--dk-color-primary-400);
  --dk-surface-control-disabled-on-success-solid: var(--dk-color-primary-650);
  --dk-icon-control-default-on-success-solid: var(--dk-color-primary-100);
  --dk-icon-control-hover-on-success-solid: var(--dk-color-primary-50);
  --dk-icon-control-active-on-success-solid: var(--dk-color-primary-25);
  --dk-text-control-default-on-success-solid: var(--dk-color-primary-25);
  --dk-text-control-hover-on-success-solid: var(--dk-color-primary-50);
  --dk-text-control-active-on-success-solid: var(--dk-color-primary-25);
  --dk-text-control-disabled-on-success-solid: var(--dk-color-primary-300);
  --dk-surface-control-default-on-success-solid-level-1: var(--dk-color-primary-700);
  --dk-surface-control-hover-on-success-solid-level-1: var(--dk-color-primary-650);
  --dk-surface-control-active-on-success-solid-level-1: var(--dk-color-primary-600);
  --dk-border-control-default-on-success-solid-level-1: var(--dk-color-primary-650);
  --dk-border-control-hover-on-success-solid-level-1: var(--dk-color-primary-600);
  --dk-border-control-active-on-success-solid-level-1: var(--dk-color-primary-550);
  --dk-icon-control-disabled-on-success-solid-level-1: var(--dk-color-primary-500);
  --dk-surface-control-disabled-on-success-solid-level-1: var(--dk-color-primary-700);
  --dk-icon-control-default-on-success-solid-level-1: var(--dk-color-primary-200);
  --dk-icon-control-hover-on-success-solid-level-1: var(--dk-color-primary-100);
  --dk-icon-control-active-on-success-solid-level-1: var(--dk-color-primary-50);
  --dk-text-control-default-on-success-solid-level-1: var(--dk-color-primary-50);
  --dk-text-control-hover-on-success-solid-level-1: var(--dk-color-primary-100);
  --dk-text-control-active-on-success-solid-level-1: var(--dk-color-primary-50);
  --dk-text-control-disabled-on-success-solid-level-1: var(--dk-color-primary-400);
  --dk-surface-control-default-on-success-solid-level-2: var(--dk-color-primary-850);
  --dk-surface-control-hover-on-success-solid-level-2: var(--dk-color-primary-800);
  --dk-surface-control-active-on-success-solid-level-2: var(--dk-color-primary-700);
  --dk-border-control-default-on-success-solid-level-2: var(--dk-color-primary-800);
  --dk-border-control-hover-on-success-solid-level-2: var(--dk-color-primary-700);
  --dk-border-control-active-on-success-solid-level-2: var(--dk-color-primary-650);
  --dk-icon-control-disabled-on-success-solid-level-2: var(--dk-color-primary-700);
  --dk-surface-control-disabled-on-success-solid-level-2: var(--dk-color-primary-850);
  --dk-icon-control-default-on-success-solid-level-2: var(--dk-color-primary-550);
  --dk-icon-control-hover-on-success-solid-level-2: var(--dk-color-primary-500);
  --dk-icon-control-active-on-success-solid-level-2: var(--dk-color-primary-300);
  --dk-text-control-default-on-success-solid-level-2: var(--dk-color-primary-400);
  --dk-text-control-hover-on-success-solid-level-2: var(--dk-color-primary-500);
  --dk-text-control-active-on-success-solid-level-2: var(--dk-color-primary-300);
  --dk-text-control-disabled-on-success-solid-level-2: var(--dk-color-primary-650);
  --dk-surface-control-default-on-error-subtle-level-0: var(--dk-color-error-100);
  --dk-surface-control-hover-on-error-subtle-level-0: var(--dk-color-error-200);
  --dk-surface-control-active-on-error-subtle-level-0: var(--dk-color-error-300);
  --dk-border-control-default-on-error-subtle-level-0: var(--dk-color-error-200);
  --dk-border-control-hover-on-error-subtle-level-0: var(--dk-color-error-300);
  --dk-border-control-active-on-error-subtle-level-0: var(--dk-color-error-400);
  --dk-icon-control-disabled-on-error-subtle-level-0: var(--dk-color-error-300);
  --dk-surface-control-disabled-on-error-subtle-level-0: var(--dk-color-error-100);
  --dk-icon-control-default-on-error-subtle-level-0: var(--dk-color-error-800);
  --dk-icon-control-hover-on-error-subtle-level-0: var(--dk-color-error-900);
  --dk-icon-control-active-on-error-subtle-level-0: var(--dk-color-error-700);
  --dk-text-control-default-on-error-subtle-level-0: var(--dk-color-error-800);
  --dk-text-control-hover-on-error-subtle-level-0: var(--dk-color-error-900);
  --dk-text-control-active-on-error-subtle-level-0: var(--dk-color-error-800);
  --dk-text-control-disabled-on-error-subtle-level-0: var(--dk-color-error-400);
  --dk-surface-control-default-on-error-subtle-level-1: var(--dk-color-error-50);
  --dk-surface-control-hover-on-error-subtle-level-1: var(--dk-color-error-25);
  --dk-surface-control-active-on-error-subtle-level-1: var(--dk-color-error-200);
  --dk-border-control-default-on-error-subtle-level-1: var(--dk-color-error-25);
  --dk-border-control-hover-on-error-subtle-level-1: var(--dk-color-error-300);
  --dk-border-control-active-on-error-subtle-level-1: var(--dk-color-error-400);
  --dk-icon-control-disabled-on-error-subtle-level-1: var(--dk-color-error-300);
  --dk-surface-control-disabled-on-error-subtle-level-1: var(--dk-color-error-50);
  --dk-icon-control-default-on-error-subtle-level-1: var(--dk-color-error-800);
  --dk-icon-control-hover-on-error-subtle-level-1: var(--dk-color-error-900);
  --dk-icon-control-active-on-error-subtle-level-1: var(--dk-color-error-700);
  --dk-text-control-default-on-error-subtle-level-1: var(--dk-color-error-800);
  --dk-text-control-hover-on-error-subtle-level-1: var(--dk-color-error-900);
  --dk-text-control-active-on-error-subtle-level-1: var(--dk-color-error-800);
  --dk-text-control-disabled-on-error-subtle-level-1: var(--dk-color-error-400);
  --dk-surface-control-default-on-error-subtle-level-2: var(--dk-color-error-100);
  --dk-surface-control-hover-on-error-subtle-level-2: var(--dk-color-error-50);
  --dk-surface-control-active-on-error-subtle-level-2: var(--dk-color-error-25);
  --dk-border-control-default-on-error-subtle-level-2: var(--dk-color-error-25);
  --dk-border-control-hover-on-error-subtle-level-2: var(--dk-color-error-100);
  --dk-border-control-active-on-error-subtle-level-2: var(--dk-color-error-400);
  --dk-icon-control-disabled-on-error-subtle-level-2: var(--dk-color-error-300);
  --dk-surface-control-disabled-on-error-subtle-level-2: var(--dk-color-error-100);
  --dk-icon-control-default-on-error-subtle-level-2: var(--dk-color-error-900);
  --dk-icon-control-hover-on-error-subtle-level-2: var(--dk-color-error-800);
  --dk-icon-control-active-on-error-subtle-level-2: var(--dk-color-error-700);
  --dk-text-control-default-on-error-subtle-level-2: var(--dk-color-error-900);
  --dk-text-control-hover-on-error-subtle-level-2: var(--dk-color-error-800);
  --dk-text-control-active-on-error-subtle-level-2: var(--dk-color-error-700);
  --dk-text-control-disabled-on-error-subtle-level-2: var(--dk-color-error-400);
  --dk-surface-control-default-on-error-solid: var(--dk-color-error-650);
  --dk-surface-control-hover-on-error-solid: var(--dk-color-error-600);
  --dk-surface-control-active-on-error-solid: var(--dk-color-error-550);
  --dk-border-control-default-on-error-solid: var(--dk-color-error-550);
  --dk-border-control-hover-on-error-solid: var(--dk-color-error-500);
  --dk-border-control-active-on-error-solid: var(--dk-color-error-400);
  --dk-icon-control-disabled-on-error-solid: var(--dk-color-error-400);
  --dk-surface-control-disabled-on-error-solid: var(--dk-color-error-650);
  --dk-icon-control-default-on-error-solid: var(--dk-color-error-100);
  --dk-icon-control-hover-on-error-solid: var(--dk-color-error-50);
  --dk-icon-control-active-on-error-solid: var(--dk-color-error-25);
  --dk-text-control-default-on-error-solid: var(--dk-color-error-25);
  --dk-text-control-hover-on-error-solid: var(--dk-color-error-50);
  --dk-text-control-active-on-error-solid: var(--dk-color-error-25);
  --dk-text-control-disabled-on-error-solid: var(--dk-color-error-300);
  --dk-surface-control-default-on-error-solid-level-1: var(--dk-color-error-700);
  --dk-surface-control-hover-on-error-solid-level-1: var(--dk-color-error-650);
  --dk-surface-control-active-on-error-solid-level-1: var(--dk-color-error-600);
  --dk-border-control-default-on-error-solid-level-1: var(--dk-color-error-650);
  --dk-border-control-hover-on-error-solid-level-1: var(--dk-color-error-600);
  --dk-border-control-active-on-error-solid-level-1: var(--dk-color-error-550);
  --dk-icon-control-disabled-on-error-solid-level-1: var(--dk-color-error-400);
  --dk-surface-control-disabled-on-error-solid-level-1: var(--dk-color-error-700);
  --dk-icon-control-default-on-error-solid-level-1: var(--dk-color-error-200);
  --dk-icon-control-hover-on-error-solid-level-1: var(--dk-color-error-100);
  --dk-icon-control-active-on-error-solid-level-1: var(--dk-color-error-50);
  --dk-text-control-default-on-error-solid-level-1: var(--dk-color-error-50);
  --dk-text-control-hover-on-error-solid-level-1: var(--dk-color-error-100);
  --dk-text-control-active-on-error-solid-level-1: var(--dk-color-error-50);
  --dk-text-control-disabled-on-error-solid-level-1: var(--dk-color-error-300);
  --dk-surface-control-default-on-error-solid-level-2: var(--dk-color-error-800);
  --dk-surface-control-hover-on-error-solid-level-2: var(--dk-color-error-700);
  --dk-surface-control-active-on-error-solid-level-2: var(--dk-color-error-650);
  --dk-border-control-default-on-error-solid-level-2: var(--dk-color-error-700);
  --dk-border-control-hover-on-error-solid-level-2: var(--dk-color-error-650);
  --dk-border-control-active-on-error-solid-level-2: var(--dk-color-error-600);
  --dk-icon-control-disabled-on-error-solid-level-2: var(--dk-color-error-500);
  --dk-surface-control-disabled-on-error-solid-level-2: var(--dk-color-error-800);
  --dk-icon-control-default-on-error-solid-level-2: var(--dk-color-error-300);
  --dk-icon-control-hover-on-error-solid-level-2: var(--dk-color-error-200);
  --dk-icon-control-active-on-error-solid-level-2: var(--dk-color-error-100);
  --dk-text-control-default-on-error-solid-level-2: var(--dk-color-error-100);
  --dk-text-control-hover-on-error-solid-level-2: var(--dk-color-error-200);
  --dk-text-control-active-on-error-solid-level-2: var(--dk-color-error-100);
  --dk-text-control-disabled-on-error-solid-level-2: var(--dk-color-error-400);
  --dk-surface-control-default-on-warning-subtle-level-0: var(--dk-color-warning-100);
  --dk-surface-control-hover-on-warning-subtle-level-0: var(--dk-color-warning-200);
  --dk-surface-control-active-on-warning-subtle-level-0: var(--dk-color-warning-300);
  --dk-border-control-default-on-warning-subtle-level-0: var(--dk-color-warning-200);
  --dk-border-control-hover-on-warning-subtle-level-0: var(--dk-color-warning-400);
  --dk-border-control-active-on-warning-subtle-level-0: var(--dk-color-warning-500);
  --dk-icon-control-disabled-on-warning-subtle-level-0: var(--dk-color-warning-300);
  --dk-surface-control-disabled-on-warning-subtle-level-0: var(--dk-color-warning-100);
  --dk-icon-control-default-on-warning-subtle-level-0: var(--dk-color-warning-800);
  --dk-icon-control-hover-on-warning-subtle-level-0: var(--dk-color-warning-900);
  --dk-icon-control-active-on-warning-subtle-level-0: var(--dk-color-warning-700);
  --dk-text-control-default-on-warning-subtle-level-0: var(--dk-color-warning-800);
  --dk-text-control-hover-on-warning-subtle-level-0: var(--dk-color-warning-900);
  --dk-text-control-active-on-warning-subtle-level-0: var(--dk-color-warning-800);
  --dk-text-control-disabled-on-warning-subtle-level-0: var(--dk-color-warning-400);
  --dk-surface-control-default-on-warning-subtle-level-1: var(--dk-color-warning-200);
  --dk-surface-control-hover-on-warning-subtle-level-1: var(--dk-color-warning-300);
  --dk-surface-control-active-on-warning-subtle-level-1: var(--dk-color-warning-400);
  --dk-border-control-default-on-warning-subtle-level-1: var(--dk-color-warning-300);
  --dk-border-control-hover-on-warning-subtle-level-1: var(--dk-color-warning-400);
  --dk-border-control-active-on-warning-subtle-level-1: var(--dk-color-warning-500);
  --dk-icon-control-disabled-on-warning-subtle-level-1: var(--dk-color-warning-400);
  --dk-surface-control-disabled-on-warning-subtle-level-1: var(--dk-color-warning-200);
  --dk-icon-control-default-on-warning-subtle-level-1: var(--dk-color-warning-800);
  --dk-icon-control-hover-on-warning-subtle-level-1: var(--dk-color-warning-900);
  --dk-icon-control-active-on-warning-subtle-level-1: var(--dk-color-warning-800);
  --dk-text-control-default-on-warning-subtle-level-1: var(--dk-color-warning-800);
  --dk-text-control-hover-on-warning-subtle-level-1: var(--dk-color-warning-900);
  --dk-text-control-active-on-warning-subtle-level-1: var(--dk-color-warning-800);
  --dk-text-control-disabled-on-warning-subtle-level-1: var(--dk-color-warning-500);
  --dk-surface-control-default-on-warning-subtle-level-2: var(--dk-color-warning-300);
  --dk-surface-control-hover-on-warning-subtle-level-2: var(--dk-color-warning-400);
  --dk-surface-control-active-on-warning-subtle-level-2: var(--dk-color-warning-550);
  --dk-border-control-default-on-warning-subtle-level-2: var(--dk-color-warning-400);
  --dk-border-control-hover-on-warning-subtle-level-2: var(--dk-color-warning-500);
  --dk-border-control-active-on-warning-subtle-level-2: var(--dk-color-warning-600);
  --dk-icon-control-disabled-on-warning-subtle-level-2: var(--dk-color-warning-500);
  --dk-surface-control-disabled-on-warning-subtle-level-2: var(--dk-color-warning-300);
  --dk-icon-control-default-on-warning-subtle-level-2: var(--dk-color-warning-800);
  --dk-icon-control-hover-on-warning-subtle-level-2: var(--dk-color-warning-900);
  --dk-icon-control-active-on-warning-subtle-level-2: var(--dk-color-warning-800);
  --dk-text-control-default-on-warning-subtle-level-2: var(--dk-color-warning-800);
  --dk-text-control-hover-on-warning-subtle-level-2: var(--dk-color-warning-900);
  --dk-text-control-active-on-warning-subtle-level-2: var(--dk-color-warning-900);
  --dk-text-control-disabled-on-warning-subtle-level-2: var(--dk-color-warning-550);
  --dk-surface-control-default-on-warning-solid: var(--dk-color-warning-650);
  --dk-surface-control-hover-on-warning-solid: var(--dk-color-warning-600);
  --dk-surface-control-active-on-warning-solid: var(--dk-color-warning-600);
  --dk-border-control-default-on-warning-solid: var(--dk-color-warning-600);
  --dk-border-control-hover-on-warning-solid: var(--dk-color-warning-550);
  --dk-border-control-active-on-warning-solid: var(--dk-color-warning-500);
  --dk-icon-control-disabled-on-warning-solid: var(--dk-color-warning-400);
  --dk-surface-control-disabled-on-warning-solid: var(--dk-color-warning-650);
  --dk-icon-control-default-on-warning-solid: var(--dk-color-warning-100);
  --dk-icon-control-hover-on-warning-solid: var(--dk-color-warning-50);
  --dk-icon-control-active-on-warning-solid: var(--dk-color-warning-25);
  --dk-text-control-default-on-warning-solid: var(--dk-color-warning-25);
  --dk-text-control-hover-on-warning-solid: var(--dk-color-warning-50);
  --dk-text-control-active-on-warning-solid: var(--dk-color-warning-25);
  --dk-text-control-disabled-on-warning-solid: var(--dk-color-warning-300);
  --dk-surface-control-default-on-warning-solid-level-1: var(--dk-color-warning-700);
  --dk-surface-control-hover-on-warning-solid-level-1: var(--dk-color-warning-650);
  --dk-surface-control-active-on-warning-solid-level-1: var(--dk-color-warning-600);
  --dk-border-control-default-on-warning-solid-level-1: var(--dk-color-warning-650);
  --dk-border-control-hover-on-warning-solid-level-1: var(--dk-color-warning-600);
  --dk-border-control-active-on-warning-solid-level-1: var(--dk-color-warning-550);
  --dk-icon-control-disabled-on-warning-solid-level-1: var(--dk-color-warning-550);
  --dk-surface-control-disabled-on-warning-solid-level-1: var(--dk-color-warning-700);
  --dk-icon-control-default-on-warning-solid-level-1: var(--dk-color-warning-200);
  --dk-icon-control-hover-on-warning-solid-level-1: var(--dk-color-warning-100);
  --dk-icon-control-active-on-warning-solid-level-1: var(--dk-color-warning-50);
  --dk-text-control-default-on-warning-solid-level-1: var(--dk-color-warning-50);
  --dk-text-control-hover-on-warning-solid-level-1: var(--dk-color-warning-100);
  --dk-text-control-active-on-warning-solid-level-1: var(--dk-color-warning-50);
  --dk-text-control-disabled-on-warning-solid-level-1: var(--dk-color-warning-500);
  --dk-surface-control-default-on-warning-solid-level-2: var(--dk-color-warning-800);
  --dk-surface-control-hover-on-warning-solid-level-2: var(--dk-color-warning-700);
  --dk-surface-control-active-on-warning-solid-level-2: var(--dk-color-warning-700);
  --dk-border-control-default-on-warning-solid-level-2: var(--dk-color-warning-700);
  --dk-border-control-hover-on-warning-solid-level-2: var(--dk-color-warning-650);
  --dk-border-control-active-on-warning-solid-level-2: var(--dk-color-warning-600);
  --dk-icon-control-disabled-on-warning-solid-level-2: var(--dk-color-warning-650);
  --dk-surface-control-disabled-on-warning-solid-level-2: var(--dk-color-warning-800);
  --dk-icon-control-default-on-warning-solid-level-2: var(--dk-color-warning-500);
  --dk-icon-control-hover-on-warning-solid-level-2: var(--dk-color-warning-300);
  --dk-icon-control-active-on-warning-solid-level-2: var(--dk-color-warning-200);
  --dk-text-control-default-on-warning-solid-level-2: var(--dk-color-warning-400);
  --dk-text-control-hover-on-warning-solid-level-2: var(--dk-color-warning-300);
  --dk-text-control-active-on-warning-solid-level-2: var(--dk-color-warning-200);
  --dk-text-control-disabled-on-warning-solid-level-2: var(--dk-color-warning-600);
  --dk-surface-control-default-on-information-subtle-level-0: var(--dk-color-information-100);
  --dk-surface-control-hover-on-information-subtle-level-0: var(--dk-color-information-200);
  --dk-surface-control-active-on-information-subtle-level-0: var(--dk-color-information-300);
  --dk-border-control-default-on-information-subtle-level-0: var(--dk-color-information-200);
  --dk-border-control-hover-on-information-subtle-level-0: var(--dk-color-information-300);
  --dk-border-control-active-on-information-subtle-level-0: var(--dk-color-information-400);
  --dk-icon-control-disabled-on-information-subtle-level-0: var(--dk-color-information-300);
  --dk-surface-control-disabled-on-information-subtle-level-0: var(--dk-color-information-100);
  --dk-icon-control-default-on-information-subtle-level-0: var(--dk-color-information-800);
  --dk-icon-control-hover-on-information-subtle-level-0: var(--dk-color-information-900);
  --dk-icon-control-active-on-information-subtle-level-0: var(--dk-color-information-700);
  --dk-text-control-default-on-information-subtle-level-0: var(--dk-color-information-800);
  --dk-text-control-hover-on-information-subtle-level-0: var(--dk-color-information-900);
  --dk-text-control-active-on-information-subtle-level-0: var(--dk-color-information-800);
  --dk-text-control-disabled-on-information-subtle-level-0: var(--dk-color-information-400);
  --dk-surface-control-default-on-information-subtle-level-1: var(--dk-color-information-50);
  --dk-surface-control-hover-on-information-subtle-level-1: var(--dk-color-information-25);
  --dk-surface-control-active-on-information-subtle-level-1: var(--dk-color-information-200);
  --dk-border-control-default-on-information-subtle-level-1: var(--dk-color-information-25);
  --dk-border-control-hover-on-information-subtle-level-1: var(--dk-color-information-300);
  --dk-border-control-active-on-information-subtle-level-1: var(--dk-color-information-400);
  --dk-icon-control-disabled-on-information-subtle-level-1: var(--dk-color-information-300);
  --dk-surface-control-disabled-on-information-subtle-level-1: var(--dk-color-information-50);
  --dk-icon-control-default-on-information-subtle-level-1: var(--dk-color-information-800);
  --dk-icon-control-hover-on-information-subtle-level-1: var(--dk-color-information-900);
  --dk-icon-control-active-on-information-subtle-level-1: var(--dk-color-information-700);
  --dk-text-control-default-on-information-subtle-level-1: var(--dk-color-information-800);
  --dk-text-control-hover-on-information-subtle-level-1: var(--dk-color-information-900);
  --dk-text-control-active-on-information-subtle-level-1: var(--dk-color-information-800);
  --dk-text-control-disabled-on-information-subtle-level-1: var(--dk-color-information-400);
  --dk-surface-control-default-on-information-subtle-level-2: var(--dk-color-information-100);
  --dk-surface-control-hover-on-information-subtle-level-2: var(--dk-color-information-50);
  --dk-surface-control-active-on-information-subtle-level-2: var(--dk-color-information-25);
  --dk-border-control-default-on-information-subtle-level-2: var(--dk-color-information-25);
  --dk-border-control-hover-on-information-subtle-level-2: var(--dk-color-information-100);
  --dk-border-control-active-on-information-subtle-level-2: var(--dk-color-information-400);
  --dk-icon-control-disabled-on-information-subtle-level-2: var(--dk-color-information-300);
  --dk-surface-control-disabled-on-information-subtle-level-2: var(--dk-color-information-100);
  --dk-icon-control-default-on-information-subtle-level-2: var(--dk-color-information-800);
  --dk-icon-control-hover-on-information-subtle-level-2: var(--dk-color-information-900);
  --dk-icon-control-active-on-information-subtle-level-2: var(--dk-color-information-700);
  --dk-text-control-default-on-information-subtle-level-2: var(--dk-color-information-800);
  --dk-text-control-hover-on-information-subtle-level-2: var(--dk-color-information-900);
  --dk-text-control-active-on-information-subtle-level-2: var(--dk-color-information-700);
  --dk-text-control-disabled-on-information-subtle-level-2: var(--dk-color-information-400);
  --dk-surface-control-default-on-information-solid: var(--dk-color-information-650);
  --dk-surface-control-hover-on-information-solid: var(--dk-color-information-600);
  --dk-surface-control-active-on-information-solid: var(--dk-color-information-550);
  --dk-border-control-default-on-information-solid: var(--dk-color-information-550);
  --dk-border-control-hover-on-information-solid: var(--dk-color-information-500);
  --dk-border-control-active-on-information-solid: var(--dk-color-information-400);
  --dk-icon-control-disabled-on-information-solid: var(--dk-color-information-400);
  --dk-surface-control-disabled-on-information-solid: var(--dk-color-information-650);
  --dk-icon-control-default-on-information-solid: var(--dk-color-information-200);
  --dk-icon-control-hover-on-information-solid: var(--dk-color-information-100);
  --dk-icon-control-active-on-information-solid: var(--dk-color-information-50);
  --dk-text-control-default-on-information-solid: var(--dk-color-information-50);
  --dk-text-control-hover-on-information-solid: var(--dk-color-information-100);
  --dk-text-control-active-on-information-solid: var(--dk-color-information-50);
  --dk-text-control-disabled-on-information-solid: var(--dk-color-information-300);
  --dk-surface-control-default-on-information-solid-level-1: var(--dk-color-information-700);
  --dk-surface-control-hover-on-information-solid-level-1: var(--dk-color-information-650);
  --dk-surface-control-active-on-information-solid-level-1: var(--dk-color-information-600);
  --dk-border-control-default-on-information-solid-level-1: var(--dk-color-information-650);
  --dk-border-control-hover-on-information-solid-level-1: var(--dk-color-information-600);
  --dk-border-control-active-on-information-solid-level-1: var(--dk-color-information-550);
  --dk-icon-control-disabled-on-information-solid-level-1: var(--dk-color-information-400);
  --dk-surface-control-disabled-on-information-solid-level-1: var(--dk-color-information-700);
  --dk-icon-control-default-on-information-solid-level-1: var(--dk-color-information-200);
  --dk-icon-control-hover-on-information-solid-level-1: var(--dk-color-information-100);
  --dk-icon-control-active-on-information-solid-level-1: var(--dk-color-information-50);
  --dk-text-control-default-on-information-solid-level-1: var(--dk-color-information-50);
  --dk-text-control-hover-on-information-solid-level-1: var(--dk-color-information-100);
  --dk-text-control-active-on-information-solid-level-1: var(--dk-color-information-50);
  --dk-text-control-disabled-on-information-solid-level-1: var(--dk-color-information-300);
  --dk-surface-control-default-on-information-solid-level-2: var(--dk-color-information-800);
  --dk-surface-control-hover-on-information-solid-level-2: var(--dk-color-information-700);
  --dk-surface-control-active-on-information-solid-level-2: var(--dk-color-information-650);
  --dk-border-control-default-on-information-solid-level-2: var(--dk-color-information-700);
  --dk-border-control-hover-on-information-solid-level-2: var(--dk-color-information-650);
  --dk-border-control-active-on-information-solid-level-2: var(--dk-color-information-600);
  --dk-icon-control-disabled-on-information-solid-level-2: var(--dk-color-information-550);
  --dk-surface-control-disabled-on-information-solid-level-2: var(--dk-color-information-800);
  --dk-icon-control-default-on-information-solid-level-2: var(--dk-color-information-300);
  --dk-icon-control-hover-on-information-solid-level-2: var(--dk-color-information-200);
  --dk-icon-control-active-on-information-solid-level-2: var(--dk-color-information-100);
  --dk-text-control-default-on-information-solid-level-2: var(--dk-color-information-100);
  --dk-text-control-hover-on-information-solid-level-2: var(--dk-color-information-200);
  --dk-text-control-active-on-information-solid-level-2: var(--dk-color-information-100);
  --dk-text-control-disabled-on-information-solid-level-2: var(--dk-color-information-500);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-control-default-on-primary-subtle-level-0: var(--dk-color-primary-850);
  --dk-surface-control-hover-on-primary-subtle-level-0: var(--dk-color-primary-800);
  --dk-surface-control-active-on-primary-subtle-level-0: var(--dk-color-primary-700);
  --dk-border-control-default-on-primary-subtle-level-0: var(--dk-color-primary-800);
  --dk-border-control-hover-on-primary-subtle-level-0: var(--dk-color-primary-700);
  --dk-border-control-active-on-primary-subtle-level-0: var(--dk-color-primary-650);
  --dk-icon-control-disabled-on-primary-subtle-level-0: var(--dk-color-primary-800);
  --dk-surface-control-disabled-on-primary-subtle-level-0: var(--dk-color-primary-850);
  --dk-icon-control-default-on-primary-subtle-level-0: var(--dk-color-primary-300);
  --dk-icon-control-hover-on-primary-subtle-level-0: var(--dk-color-primary-200);
  --dk-icon-control-active-on-primary-subtle-level-0: var(--dk-color-primary-100);
  --dk-text-control-default-on-primary-subtle-level-0: var(--dk-color-primary-100);
  --dk-text-control-hover-on-primary-subtle-level-0: var(--dk-color-primary-200);
  --dk-text-control-active-on-primary-subtle-level-0: var(--dk-color-primary-100);
  --dk-text-control-disabled-on-primary-subtle-level-0: var(--dk-color-primary-700);
  --dk-surface-control-default-on-primary-subtle-level-1: var(--dk-color-primary-750);
  --dk-surface-control-hover-on-primary-subtle-level-1: var(--dk-color-primary-700);
  --dk-surface-control-active-on-primary-subtle-level-1: var(--dk-color-primary-650);
  --dk-border-control-default-on-primary-subtle-level-1: var(--dk-color-primary-700);
  --dk-border-control-hover-on-primary-subtle-level-1: var(--dk-color-primary-650);
  --dk-border-control-active-on-primary-subtle-level-1: var(--dk-color-primary-600);
  --dk-icon-control-disabled-on-primary-subtle-level-1: var(--dk-color-primary-800);
  --dk-surface-control-disabled-on-primary-subtle-level-1: var(--dk-color-primary-850);
  --dk-icon-control-default-on-primary-subtle-level-1: var(--dk-color-primary-200);
  --dk-icon-control-hover-on-primary-subtle-level-1: var(--dk-color-primary-100);
  --dk-icon-control-active-on-primary-subtle-level-1: var(--dk-color-primary-50);
  --dk-text-control-default-on-primary-subtle-level-1: var(--dk-color-primary-25);
  --dk-text-control-hover-on-primary-subtle-level-1: var(--dk-color-primary-25);
  --dk-text-control-active-on-primary-subtle-level-1: var(--dk-color-primary-25);
  --dk-text-control-disabled-on-primary-subtle-level-1: var(--dk-color-primary-700);
  --dk-surface-control-default-on-primary-subtle-level-2: var(--dk-color-primary-650);
  --dk-surface-control-hover-on-primary-subtle-level-2: var(--dk-color-primary-600);
  --dk-surface-control-active-on-primary-subtle-level-2: var(--dk-color-primary-550);
  --dk-border-control-default-on-primary-subtle-level-2: var(--dk-color-primary-600);
  --dk-border-control-hover-on-primary-subtle-level-2: var(--dk-color-primary-550);
  --dk-border-control-active-on-primary-subtle-level-2: var(--dk-color-primary-500);
  --dk-icon-control-disabled-on-primary-subtle-level-2: var(--dk-color-primary-550);
  --dk-surface-control-disabled-on-primary-subtle-level-2: var(--dk-color-primary-650);
  --dk-icon-control-default-on-primary-subtle-level-2: var(--dk-color-primary-25);
  --dk-icon-control-hover-on-primary-subtle-level-2: var(--dk-color-primary-50);
  --dk-icon-control-active-on-primary-subtle-level-2: var(--dk-color-primary-850);
  --dk-text-control-default-on-primary-subtle-level-2: var(--dk-color-primary-25);
  --dk-text-control-hover-on-primary-subtle-level-2: var(--dk-color-primary-25);
  --dk-text-control-active-on-primary-subtle-level-2: var(--dk-color-primary-900);
  --dk-text-control-disabled-on-primary-subtle-level-2: var(--dk-color-primary-500);
  --dk-surface-control-default-on-primary-solid: var(--dk-color-primary-650);
  --dk-surface-control-hover-on-primary-solid: var(--dk-color-primary-600);
  --dk-surface-control-active-on-primary-solid: var(--dk-color-primary-550);
  --dk-border-control-default-on-primary-solid: var(--dk-color-primary-600);
  --dk-border-control-hover-on-primary-solid: var(--dk-color-primary-550);
  --dk-border-control-active-on-primary-solid: var(--dk-color-primary-500);
  --dk-icon-control-disabled-on-primary-solid: var(--dk-color-primary-400);
  --dk-surface-control-disabled-on-primary-solid: var(--dk-color-primary-650);
  --dk-icon-control-default-on-primary-solid: var(--dk-color-primary-100);
  --dk-icon-control-hover-on-primary-solid: var(--dk-color-primary-50);
  --dk-icon-control-active-on-primary-solid: var(--dk-color-primary-25);
  --dk-text-control-default-on-primary-solid: var(--dk-color-primary-25);
  --dk-text-control-hover-on-primary-solid: var(--dk-color-primary-50);
  --dk-text-control-active-on-primary-solid: var(--dk-color-primary-25);
  --dk-text-control-disabled-on-primary-solid: var(--dk-color-primary-300);
  --dk-surface-control-default-on-primary-solid-level-1: var(--dk-color-primary-700);
  --dk-surface-control-hover-on-primary-solid-level-1: var(--dk-color-primary-650);
  --dk-surface-control-active-on-primary-solid-level-1: var(--dk-color-primary-600);
  --dk-border-control-default-on-primary-solid-level-1: var(--dk-color-primary-650);
  --dk-border-control-hover-on-primary-solid-level-1: var(--dk-color-primary-600);
  --dk-border-control-active-on-primary-solid-level-1: var(--dk-color-primary-550);
  --dk-icon-control-disabled-on-primary-solid-level-1: var(--dk-color-primary-500);
  --dk-surface-control-disabled-on-primary-solid-level-1: var(--dk-color-primary-700);
  --dk-icon-control-default-on-primary-solid-level-1: var(--dk-color-primary-200);
  --dk-icon-control-hover-on-primary-solid-level-1: var(--dk-color-primary-100);
  --dk-icon-control-active-on-primary-solid-level-1: var(--dk-color-primary-50);
  --dk-text-control-default-on-primary-solid-level-1: var(--dk-color-primary-50);
  --dk-text-control-hover-on-primary-solid-level-1: var(--dk-color-primary-100);
  --dk-text-control-active-on-primary-solid-level-1: var(--dk-color-primary-50);
  --dk-text-control-disabled-on-primary-solid-level-1: var(--dk-color-primary-400);
  --dk-surface-control-default-on-primary-solid-level-2: var(--dk-color-primary-850);
  --dk-surface-control-hover-on-primary-solid-level-2: var(--dk-color-primary-800);
  --dk-surface-control-active-on-primary-solid-level-2: var(--dk-color-primary-700);
  --dk-border-control-default-on-primary-solid-level-2: var(--dk-color-primary-800);
  --dk-border-control-hover-on-primary-solid-level-2: var(--dk-color-primary-700);
  --dk-border-control-active-on-primary-solid-level-2: var(--dk-color-primary-650);
  --dk-icon-control-disabled-on-primary-solid-level-2: var(--dk-color-primary-700);
  --dk-surface-control-disabled-on-primary-solid-level-2: var(--dk-color-primary-850);
  --dk-icon-control-default-on-primary-solid-level-2: var(--dk-color-primary-550);
  --dk-icon-control-hover-on-primary-solid-level-2: var(--dk-color-primary-500);
  --dk-icon-control-active-on-primary-solid-level-2: var(--dk-color-primary-300);
  --dk-text-control-default-on-primary-solid-level-2: var(--dk-color-primary-400);
  --dk-text-control-hover-on-primary-solid-level-2: var(--dk-color-primary-500);
  --dk-text-control-active-on-primary-solid-level-2: var(--dk-color-primary-300);
  --dk-text-control-disabled-on-primary-solid-level-2: var(--dk-color-primary-650);
  --dk-surface-control-default-on-success-subtle-level-0: var(--dk-color-primary-850);
  --dk-surface-control-hover-on-success-subtle-level-0: var(--dk-color-primary-800);
  --dk-surface-control-active-on-success-subtle-level-0: var(--dk-color-primary-700);
  --dk-border-control-default-on-success-subtle-level-0: var(--dk-color-primary-800);
  --dk-border-control-hover-on-success-subtle-level-0: var(--dk-color-primary-700);
  --dk-border-control-active-on-success-subtle-level-0: var(--dk-color-primary-650);
  --dk-icon-control-disabled-on-success-subtle-level-0: var(--dk-color-primary-800);
  --dk-surface-control-disabled-on-success-subtle-level-0: var(--dk-color-primary-850);
  --dk-icon-control-default-on-success-subtle-level-0: var(--dk-color-primary-300);
  --dk-icon-control-hover-on-success-subtle-level-0: var(--dk-color-primary-200);
  --dk-icon-control-active-on-success-subtle-level-0: var(--dk-color-primary-100);
  --dk-text-control-default-on-success-subtle-level-0: var(--dk-color-primary-100);
  --dk-text-control-hover-on-success-subtle-level-0: var(--dk-color-primary-200);
  --dk-text-control-active-on-success-subtle-level-0: var(--dk-color-primary-100);
  --dk-text-control-disabled-on-success-subtle-level-0: var(--dk-color-primary-700);
  --dk-surface-control-default-on-success-subtle-level-1: var(--dk-color-primary-850);
  --dk-surface-control-hover-on-success-subtle-level-1: var(--dk-color-primary-900);
  --dk-surface-control-active-on-success-subtle-level-1: var(--dk-color-primary-700);
  --dk-border-control-default-on-success-subtle-level-1: var(--dk-color-primary-900);
  --dk-border-control-hover-on-success-subtle-level-1: var(--dk-color-primary-700);
  --dk-border-control-active-on-success-subtle-level-1: var(--dk-color-primary-650);
  --dk-icon-control-disabled-on-success-subtle-level-1: var(--dk-color-primary-800);
  --dk-surface-control-disabled-on-success-subtle-level-1: var(--dk-color-primary-850);
  --dk-icon-control-default-on-success-subtle-level-1: var(--dk-color-primary-200);
  --dk-icon-control-hover-on-success-subtle-level-1: var(--dk-color-primary-100);
  --dk-icon-control-active-on-success-subtle-level-1: var(--dk-color-primary-50);
  --dk-text-control-default-on-success-subtle-level-1: var(--dk-color-primary-50);
  --dk-text-control-hover-on-success-subtle-level-1: var(--dk-color-primary-100);
  --dk-text-control-active-on-success-subtle-level-1: var(--dk-color-primary-50);
  --dk-text-control-disabled-on-success-subtle-level-1: var(--dk-color-primary-700);
  --dk-surface-control-default-on-success-subtle-level-2: var(--dk-color-primary-650);
  --dk-surface-control-hover-on-success-subtle-level-2: var(--dk-color-primary-600);
  --dk-surface-control-active-on-success-subtle-level-2: var(--dk-color-primary-550);
  --dk-border-control-default-on-success-subtle-level-2: var(--dk-color-primary-600);
  --dk-border-control-hover-on-success-subtle-level-2: var(--dk-color-primary-550);
  --dk-border-control-active-on-success-subtle-level-2: var(--dk-color-primary-500);
  --dk-icon-control-disabled-on-success-subtle-level-2: var(--dk-color-primary-550);
  --dk-surface-control-disabled-on-success-subtle-level-2: var(--dk-color-primary-650);
  --dk-icon-control-default-on-success-subtle-level-2: var(--dk-color-primary-25);
  --dk-icon-control-hover-on-success-subtle-level-2: var(--dk-color-primary-50);
  --dk-icon-control-active-on-success-subtle-level-2: var(--dk-color-primary-850);
  --dk-text-control-default-on-success-subtle-level-2: var(--dk-color-primary-25);
  --dk-text-control-hover-on-success-subtle-level-2: var(--dk-color-primary-25);
  --dk-text-control-active-on-success-subtle-level-2: var(--dk-color-primary-900);
  --dk-text-control-disabled-on-success-subtle-level-2: var(--dk-color-primary-500);
  --dk-surface-control-default-on-success-solid: var(--dk-color-primary-650);
  --dk-surface-control-hover-on-success-solid: var(--dk-color-primary-600);
  --dk-surface-control-active-on-success-solid: var(--dk-color-primary-550);
  --dk-border-control-default-on-success-solid: var(--dk-color-primary-600);
  --dk-border-control-hover-on-success-solid: var(--dk-color-primary-550);
  --dk-border-control-active-on-success-solid: var(--dk-color-primary-500);
  --dk-icon-control-disabled-on-success-solid: var(--dk-color-primary-400);
  --dk-surface-control-disabled-on-success-solid: var(--dk-color-primary-650);
  --dk-icon-control-default-on-success-solid: var(--dk-color-primary-100);
  --dk-icon-control-hover-on-success-solid: var(--dk-color-primary-50);
  --dk-icon-control-active-on-success-solid: var(--dk-color-primary-25);
  --dk-text-control-default-on-success-solid: var(--dk-color-primary-25);
  --dk-text-control-hover-on-success-solid: var(--dk-color-primary-50);
  --dk-text-control-active-on-success-solid: var(--dk-color-primary-25);
  --dk-text-control-disabled-on-success-solid: var(--dk-color-primary-300);
  --dk-surface-control-default-on-success-solid-level-1: var(--dk-color-primary-700);
  --dk-surface-control-hover-on-success-solid-level-1: var(--dk-color-primary-650);
  --dk-surface-control-active-on-success-solid-level-1: var(--dk-color-primary-600);
  --dk-border-control-default-on-success-solid-level-1: var(--dk-color-primary-650);
  --dk-border-control-hover-on-success-solid-level-1: var(--dk-color-primary-600);
  --dk-border-control-active-on-success-solid-level-1: var(--dk-color-primary-550);
  --dk-icon-control-disabled-on-success-solid-level-1: var(--dk-color-primary-500);
  --dk-surface-control-disabled-on-success-solid-level-1: var(--dk-color-primary-700);
  --dk-icon-control-default-on-success-solid-level-1: var(--dk-color-primary-200);
  --dk-icon-control-hover-on-success-solid-level-1: var(--dk-color-primary-100);
  --dk-icon-control-active-on-success-solid-level-1: var(--dk-color-primary-50);
  --dk-text-control-default-on-success-solid-level-1: var(--dk-color-primary-50);
  --dk-text-control-hover-on-success-solid-level-1: var(--dk-color-primary-100);
  --dk-text-control-active-on-success-solid-level-1: var(--dk-color-primary-50);
  --dk-text-control-disabled-on-success-solid-level-1: var(--dk-color-primary-400);
  --dk-surface-control-default-on-success-solid-level-2: var(--dk-color-primary-850);
  --dk-surface-control-hover-on-success-solid-level-2: var(--dk-color-primary-800);
  --dk-surface-control-active-on-success-solid-level-2: var(--dk-color-primary-700);
  --dk-border-control-default-on-success-solid-level-2: var(--dk-color-primary-800);
  --dk-border-control-hover-on-success-solid-level-2: var(--dk-color-primary-700);
  --dk-border-control-active-on-success-solid-level-2: var(--dk-color-primary-650);
  --dk-icon-control-disabled-on-success-solid-level-2: var(--dk-color-primary-700);
  --dk-surface-control-disabled-on-success-solid-level-2: var(--dk-color-primary-850);
  --dk-icon-control-default-on-success-solid-level-2: var(--dk-color-primary-550);
  --dk-icon-control-hover-on-success-solid-level-2: var(--dk-color-primary-500);
  --dk-icon-control-active-on-success-solid-level-2: var(--dk-color-primary-300);
  --dk-text-control-default-on-success-solid-level-2: var(--dk-color-primary-400);
  --dk-text-control-hover-on-success-solid-level-2: var(--dk-color-primary-500);
  --dk-text-control-active-on-success-solid-level-2: var(--dk-color-primary-300);
  --dk-text-control-disabled-on-success-solid-level-2: var(--dk-color-primary-650);
  --dk-surface-control-default-on-error-subtle-level-0: var(--dk-color-error-800);
  --dk-surface-control-hover-on-error-subtle-level-0: var(--dk-color-error-700);
  --dk-surface-control-active-on-error-subtle-level-0: var(--dk-color-error-650);
  --dk-border-control-default-on-error-subtle-level-0: var(--dk-color-error-700);
  --dk-border-control-hover-on-error-subtle-level-0: var(--dk-color-error-650);
  --dk-border-control-active-on-error-subtle-level-0: var(--dk-color-error-600);
  --dk-icon-control-disabled-on-error-subtle-level-0: var(--dk-color-error-700);
  --dk-surface-control-disabled-on-error-subtle-level-0: var(--dk-color-error-800);
  --dk-icon-control-default-on-error-subtle-level-0: var(--dk-color-error-100);
  --dk-icon-control-hover-on-error-subtle-level-0: var(--dk-color-error-50);
  --dk-icon-control-active-on-error-subtle-level-0: var(--dk-color-error-25);
  --dk-text-control-default-on-error-subtle-level-0: var(--dk-color-error-25);
  --dk-text-control-hover-on-error-subtle-level-0: var(--dk-color-error-50);
  --dk-text-control-active-on-error-subtle-level-0: var(--dk-color-error-25);
  --dk-text-control-disabled-on-error-subtle-level-0: var(--dk-color-error-650);
  --dk-surface-control-default-on-error-subtle-level-1: var(--dk-color-error-750);
  --dk-surface-control-hover-on-error-subtle-level-1: var(--dk-color-error-700);
  --dk-surface-control-active-on-error-subtle-level-1: var(--dk-color-error-650);
  --dk-border-control-default-on-error-subtle-level-1: var(--dk-color-error-700);
  --dk-border-control-hover-on-error-subtle-level-1: var(--dk-color-error-600);
  --dk-border-control-active-on-error-subtle-level-1: var(--dk-color-error-550);
  --dk-icon-control-disabled-on-error-subtle-level-1: var(--dk-color-error-800);
  --dk-surface-control-disabled-on-error-subtle-level-1: var(--dk-color-error-900);
  --dk-icon-control-default-on-error-subtle-level-1: var(--dk-color-error-100);
  --dk-icon-control-hover-on-error-subtle-level-1: var(--dk-color-error-50);
  --dk-icon-control-active-on-error-subtle-level-1: var(--dk-color-error-25);
  --dk-text-control-default-on-error-subtle-level-1: var(--dk-color-error-25);
  --dk-text-control-hover-on-error-subtle-level-1: var(--dk-color-error-25);
  --dk-text-control-active-on-error-subtle-level-1: var(--dk-color-error-25);
  --dk-text-control-disabled-on-error-subtle-level-1: var(--dk-color-error-700);
  --dk-surface-control-default-on-error-subtle-level-2: var(--dk-color-error-650);
  --dk-surface-control-hover-on-error-subtle-level-2: var(--dk-color-error-600);
  --dk-surface-control-active-on-error-subtle-level-2: var(--dk-color-error-550);
  --dk-border-control-default-on-error-subtle-level-2: var(--dk-color-error-550);
  --dk-border-control-hover-on-error-subtle-level-2: var(--dk-color-error-500);
  --dk-border-control-active-on-error-subtle-level-2: var(--dk-color-error-400);
  --dk-icon-control-disabled-on-error-subtle-level-2: var(--dk-color-error-500);
  --dk-surface-control-disabled-on-error-subtle-level-2: var(--dk-color-error-650);
  --dk-icon-control-default-on-error-subtle-level-2: var(--dk-color-error-25);
  --dk-icon-control-hover-on-error-subtle-level-2: var(--dk-color-error-50);
  --dk-icon-control-active-on-error-subtle-level-2: var(--dk-color-error-100);
  --dk-text-control-default-on-error-subtle-level-2: var(--dk-color-error-25);
  --dk-text-control-hover-on-error-subtle-level-2: var(--dk-color-error-25);
  --dk-text-control-active-on-error-subtle-level-2: var(--dk-color-error-25);
  --dk-text-control-disabled-on-error-subtle-level-2: var(--dk-color-error-400);
  --dk-surface-control-default-on-error-solid: var(--dk-color-error-650);
  --dk-surface-control-hover-on-error-solid: var(--dk-color-error-600);
  --dk-surface-control-active-on-error-solid: var(--dk-color-error-550);
  --dk-border-control-default-on-error-solid: var(--dk-color-error-550);
  --dk-border-control-hover-on-error-solid: var(--dk-color-error-500);
  --dk-border-control-active-on-error-solid: var(--dk-color-error-400);
  --dk-icon-control-disabled-on-error-solid: var(--dk-color-error-400);
  --dk-surface-control-disabled-on-error-solid: var(--dk-color-error-650);
  --dk-icon-control-default-on-error-solid: var(--dk-color-error-100);
  --dk-icon-control-hover-on-error-solid: var(--dk-color-error-50);
  --dk-icon-control-active-on-error-solid: var(--dk-color-error-25);
  --dk-text-control-default-on-error-solid: var(--dk-color-error-25);
  --dk-text-control-hover-on-error-solid: var(--dk-color-error-50);
  --dk-text-control-active-on-error-solid: var(--dk-color-error-25);
  --dk-text-control-disabled-on-error-solid: var(--dk-color-error-300);
  --dk-surface-control-default-on-error-solid-level-1: var(--dk-color-error-700);
  --dk-surface-control-hover-on-error-solid-level-1: var(--dk-color-error-650);
  --dk-surface-control-active-on-error-solid-level-1: var(--dk-color-error-600);
  --dk-border-control-default-on-error-solid-level-1: var(--dk-color-error-650);
  --dk-border-control-hover-on-error-solid-level-1: var(--dk-color-error-600);
  --dk-border-control-active-on-error-solid-level-1: var(--dk-color-error-550);
  --dk-icon-control-disabled-on-error-solid-level-1: var(--dk-color-error-400);
  --dk-surface-control-disabled-on-error-solid-level-1: var(--dk-color-error-700);
  --dk-icon-control-default-on-error-solid-level-1: var(--dk-color-error-200);
  --dk-icon-control-hover-on-error-solid-level-1: var(--dk-color-error-100);
  --dk-icon-control-active-on-error-solid-level-1: var(--dk-color-error-50);
  --dk-text-control-default-on-error-solid-level-1: var(--dk-color-error-50);
  --dk-text-control-hover-on-error-solid-level-1: var(--dk-color-error-100);
  --dk-text-control-active-on-error-solid-level-1: var(--dk-color-error-50);
  --dk-text-control-disabled-on-error-solid-level-1: var(--dk-color-error-300);
  --dk-surface-control-default-on-error-solid-level-2: var(--dk-color-error-800);
  --dk-surface-control-hover-on-error-solid-level-2: var(--dk-color-error-700);
  --dk-surface-control-active-on-error-solid-level-2: var(--dk-color-error-650);
  --dk-border-control-default-on-error-solid-level-2: var(--dk-color-error-700);
  --dk-border-control-hover-on-error-solid-level-2: var(--dk-color-error-650);
  --dk-border-control-active-on-error-solid-level-2: var(--dk-color-error-600);
  --dk-icon-control-disabled-on-error-solid-level-2: var(--dk-color-error-500);
  --dk-surface-control-disabled-on-error-solid-level-2: var(--dk-color-error-800);
  --dk-icon-control-default-on-error-solid-level-2: var(--dk-color-error-300);
  --dk-icon-control-hover-on-error-solid-level-2: var(--dk-color-error-200);
  --dk-icon-control-active-on-error-solid-level-2: var(--dk-color-error-100);
  --dk-text-control-default-on-error-solid-level-2: var(--dk-color-error-100);
  --dk-text-control-hover-on-error-solid-level-2: var(--dk-color-error-200);
  --dk-text-control-active-on-error-solid-level-2: var(--dk-color-error-100);
  --dk-text-control-disabled-on-error-solid-level-2: var(--dk-color-error-400);
  --dk-surface-control-default-on-warning-subtle-level-0: var(--dk-color-warning-800);
  --dk-surface-control-hover-on-warning-subtle-level-0: var(--dk-color-warning-700);
  --dk-surface-control-active-on-warning-subtle-level-0: var(--dk-color-warning-650);
  --dk-border-control-default-on-warning-subtle-level-0: var(--dk-color-warning-700);
  --dk-border-control-hover-on-warning-subtle-level-0: var(--dk-color-warning-650);
  --dk-border-control-active-on-warning-subtle-level-0: var(--dk-color-warning-600);
  --dk-icon-control-disabled-on-warning-subtle-level-0: var(--dk-color-warning-700);
  --dk-surface-control-disabled-on-warning-subtle-level-0: var(--dk-color-warning-800);
  --dk-icon-control-default-on-warning-subtle-level-0: var(--dk-color-warning-200);
  --dk-icon-control-hover-on-warning-subtle-level-0: var(--dk-color-warning-100);
  --dk-icon-control-active-on-warning-subtle-level-0: var(--dk-color-warning-50);
  --dk-text-control-default-on-warning-subtle-level-0: var(--dk-color-warning-50);
  --dk-text-control-hover-on-warning-subtle-level-0: var(--dk-color-warning-100);
  --dk-text-control-active-on-warning-subtle-level-0: var(--dk-color-base-white);
  --dk-text-control-disabled-on-warning-subtle-level-0: var(--dk-color-warning-650);
  --dk-surface-control-default-on-warning-subtle-level-1: var(--dk-color-warning-750);
  --dk-surface-control-hover-on-warning-subtle-level-1: var(--dk-color-warning-700);
  --dk-surface-control-active-on-warning-subtle-level-1: var(--dk-color-warning-650);
  --dk-border-control-default-on-warning-subtle-level-1: var(--dk-color-warning-700);
  --dk-border-control-hover-on-warning-subtle-level-1: var(--dk-color-warning-650);
  --dk-border-control-active-on-warning-subtle-level-1: var(--dk-color-warning-600);
  --dk-icon-control-disabled-on-warning-subtle-level-1: var(--dk-color-warning-800);
  --dk-surface-control-disabled-on-warning-subtle-level-1: var(--dk-color-warning-900);
  --dk-icon-control-default-on-warning-subtle-level-1: var(--dk-color-warning-200);
  --dk-icon-control-hover-on-warning-subtle-level-1: var(--dk-color-warning-100);
  --dk-icon-control-active-on-warning-subtle-level-1: var(--dk-color-warning-50);
  --dk-text-control-default-on-warning-subtle-level-1: var(--dk-color-warning-25);
  --dk-text-control-hover-on-warning-subtle-level-1: var(--dk-color-warning-25);
  --dk-text-control-active-on-warning-subtle-level-1: var(--dk-color-base-white);
  --dk-text-control-disabled-on-warning-subtle-level-1: var(--dk-color-warning-700);
  --dk-surface-control-default-on-warning-subtle-level-2: var(--dk-color-warning-650);
  --dk-surface-control-hover-on-warning-subtle-level-2: var(--dk-color-warning-600);
  --dk-surface-control-active-on-warning-subtle-level-2: var(--dk-color-warning-550);
  --dk-border-control-default-on-warning-subtle-level-2: var(--dk-color-warning-600);
  --dk-border-control-hover-on-warning-subtle-level-2: var(--dk-color-warning-550);
  --dk-border-control-active-on-warning-subtle-level-2: var(--dk-color-warning-500);
  --dk-icon-control-disabled-on-warning-subtle-level-2: var(--dk-color-warning-550);
  --dk-surface-control-disabled-on-warning-subtle-level-2: var(--dk-color-warning-650);
  --dk-icon-control-default-on-warning-subtle-level-2: var(--dk-color-warning-25);
  --dk-icon-control-hover-on-warning-subtle-level-2: var(--dk-color-warning-900);
  --dk-icon-control-active-on-warning-subtle-level-2: var(--dk-color-warning-800);
  --dk-text-control-default-on-warning-subtle-level-2: var(--dk-color-base-white);
  --dk-text-control-hover-on-warning-subtle-level-2: var(--dk-color-warning-900);
  --dk-text-control-active-on-warning-subtle-level-2: var(--dk-color-warning-900);
  --dk-text-control-disabled-on-warning-subtle-level-2: var(--dk-color-warning-500);
  --dk-surface-control-default-on-warning-solid: var(--dk-color-warning-650);
  --dk-surface-control-hover-on-warning-solid: var(--dk-color-warning-600);
  --dk-surface-control-active-on-warning-solid: var(--dk-color-warning-600);
  --dk-border-control-default-on-warning-solid: var(--dk-color-warning-600);
  --dk-border-control-hover-on-warning-solid: var(--dk-color-warning-550);
  --dk-border-control-active-on-warning-solid: var(--dk-color-warning-500);
  --dk-icon-control-disabled-on-warning-solid: var(--dk-color-warning-400);
  --dk-surface-control-disabled-on-warning-solid: var(--dk-color-warning-650);
  --dk-icon-control-default-on-warning-solid: var(--dk-color-warning-100);
  --dk-icon-control-hover-on-warning-solid: var(--dk-color-warning-50);
  --dk-icon-control-active-on-warning-solid: var(--dk-color-warning-25);
  --dk-text-control-default-on-warning-solid: var(--dk-color-warning-25);
  --dk-text-control-hover-on-warning-solid: var(--dk-color-warning-50);
  --dk-text-control-active-on-warning-solid: var(--dk-color-warning-25);
  --dk-text-control-disabled-on-warning-solid: var(--dk-color-warning-300);
  --dk-surface-control-default-on-warning-solid-level-1: var(--dk-color-warning-700);
  --dk-surface-control-hover-on-warning-solid-level-1: var(--dk-color-warning-650);
  --dk-surface-control-active-on-warning-solid-level-1: var(--dk-color-warning-600);
  --dk-border-control-default-on-warning-solid-level-1: var(--dk-color-warning-650);
  --dk-border-control-hover-on-warning-solid-level-1: var(--dk-color-warning-600);
  --dk-border-control-active-on-warning-solid-level-1: var(--dk-color-warning-550);
  --dk-icon-control-disabled-on-warning-solid-level-1: var(--dk-color-warning-550);
  --dk-surface-control-disabled-on-warning-solid-level-1: var(--dk-color-warning-700);
  --dk-icon-control-default-on-warning-solid-level-1: var(--dk-color-warning-200);
  --dk-icon-control-hover-on-warning-solid-level-1: var(--dk-color-warning-100);
  --dk-icon-control-active-on-warning-solid-level-1: var(--dk-color-warning-50);
  --dk-text-control-default-on-warning-solid-level-1: var(--dk-color-warning-50);
  --dk-text-control-hover-on-warning-solid-level-1: var(--dk-color-warning-100);
  --dk-text-control-active-on-warning-solid-level-1: var(--dk-color-warning-50);
  --dk-text-control-disabled-on-warning-solid-level-1: var(--dk-color-warning-500);
  --dk-surface-control-default-on-warning-solid-level-2: var(--dk-color-warning-800);
  --dk-surface-control-hover-on-warning-solid-level-2: var(--dk-color-warning-700);
  --dk-surface-control-active-on-warning-solid-level-2: var(--dk-color-warning-700);
  --dk-border-control-default-on-warning-solid-level-2: var(--dk-color-warning-700);
  --dk-border-control-hover-on-warning-solid-level-2: var(--dk-color-warning-650);
  --dk-border-control-active-on-warning-solid-level-2: var(--dk-color-warning-600);
  --dk-icon-control-disabled-on-warning-solid-level-2: var(--dk-color-warning-650);
  --dk-surface-control-disabled-on-warning-solid-level-2: var(--dk-color-warning-800);
  --dk-icon-control-default-on-warning-solid-level-2: var(--dk-color-warning-500);
  --dk-icon-control-hover-on-warning-solid-level-2: var(--dk-color-warning-300);
  --dk-icon-control-active-on-warning-solid-level-2: var(--dk-color-warning-200);
  --dk-text-control-default-on-warning-solid-level-2: var(--dk-color-warning-400);
  --dk-text-control-hover-on-warning-solid-level-2: var(--dk-color-warning-300);
  --dk-text-control-active-on-warning-solid-level-2: var(--dk-color-warning-200);
  --dk-text-control-disabled-on-warning-solid-level-2: var(--dk-color-warning-600);
  --dk-surface-control-default-on-information-subtle-level-0: var(--dk-color-information-800);
  --dk-surface-control-hover-on-information-subtle-level-0: var(--dk-color-information-700);
  --dk-surface-control-active-on-information-subtle-level-0: var(--dk-color-information-650);
  --dk-border-control-default-on-information-subtle-level-0: var(--dk-color-information-700);
  --dk-border-control-hover-on-information-subtle-level-0: var(--dk-color-information-650);
  --dk-border-control-active-on-information-subtle-level-0: var(--dk-color-information-600);
  --dk-icon-control-disabled-on-information-subtle-level-0: var(--dk-color-information-700);
  --dk-surface-control-disabled-on-information-subtle-level-0: var(--dk-color-information-800);
  --dk-icon-control-default-on-information-subtle-level-0: var(--dk-color-information-200);
  --dk-icon-control-hover-on-information-subtle-level-0: var(--dk-color-information-100);
  --dk-icon-control-active-on-information-subtle-level-0: var(--dk-color-information-50);
  --dk-text-control-default-on-information-subtle-level-0: var(--dk-color-information-50);
  --dk-text-control-hover-on-information-subtle-level-0: var(--dk-color-information-100);
  --dk-text-control-active-on-information-subtle-level-0: var(--dk-color-information-50);
  --dk-text-control-disabled-on-information-subtle-level-0: var(--dk-color-information-650);
  --dk-surface-control-default-on-information-subtle-level-1: var(--dk-color-information-750);
  --dk-surface-control-hover-on-information-subtle-level-1: var(--dk-color-information-700);
  --dk-surface-control-active-on-information-subtle-level-1: var(--dk-color-information-650);
  --dk-border-control-default-on-information-subtle-level-1: var(--dk-color-information-700);
  --dk-border-control-hover-on-information-subtle-level-1: var(--dk-color-information-600);
  --dk-border-control-active-on-information-subtle-level-1: var(--dk-color-information-550);
  --dk-icon-control-disabled-on-information-subtle-level-1: var(--dk-color-information-800);
  --dk-surface-control-disabled-on-information-subtle-level-1: var(--dk-color-information-900);
  --dk-icon-control-default-on-information-subtle-level-1: var(--dk-color-information-200);
  --dk-icon-control-hover-on-information-subtle-level-1: var(--dk-color-information-100);
  --dk-icon-control-active-on-information-subtle-level-1: var(--dk-color-information-50);
  --dk-text-control-default-on-information-subtle-level-1: var(--dk-color-information-25);
  --dk-text-control-hover-on-information-subtle-level-1: var(--dk-color-information-25);
  --dk-text-control-active-on-information-subtle-level-1: var(--dk-color-information-25);
  --dk-text-control-disabled-on-information-subtle-level-1: var(--dk-color-information-700);
  --dk-surface-control-default-on-information-subtle-level-2: var(--dk-color-information-650);
  --dk-surface-control-hover-on-information-subtle-level-2: var(--dk-color-information-600);
  --dk-surface-control-active-on-information-subtle-level-2: var(--dk-color-information-550);
  --dk-border-control-default-on-information-subtle-level-2: var(--dk-color-information-550);
  --dk-border-control-hover-on-information-subtle-level-2: var(--dk-color-information-500);
  --dk-border-control-active-on-information-subtle-level-2: var(--dk-color-information-400);
  --dk-icon-control-disabled-on-information-subtle-level-2: var(--dk-color-information-500);
  --dk-surface-control-disabled-on-information-subtle-level-2: var(--dk-color-information-650);
  --dk-icon-control-default-on-information-subtle-level-2: var(--dk-color-information-25);
  --dk-icon-control-hover-on-information-subtle-level-2: var(--dk-color-information-50);
  --dk-icon-control-active-on-information-subtle-level-2: var(--dk-color-information-100);
  --dk-text-control-default-on-information-subtle-level-2: var(--dk-color-information-25);
  --dk-text-control-hover-on-information-subtle-level-2: var(--dk-color-information-50);
  --dk-text-control-active-on-information-subtle-level-2: var(--dk-color-information-25);
  --dk-text-control-disabled-on-information-subtle-level-2: var(--dk-color-information-400);
  --dk-surface-control-default-on-information-solid: var(--dk-color-information-650);
  --dk-surface-control-hover-on-information-solid: var(--dk-color-information-600);
  --dk-surface-control-active-on-information-solid: var(--dk-color-information-550);
  --dk-border-control-default-on-information-solid: var(--dk-color-information-550);
  --dk-border-control-hover-on-information-solid: var(--dk-color-information-500);
  --dk-border-control-active-on-information-solid: var(--dk-color-information-400);
  --dk-icon-control-disabled-on-information-solid: var(--dk-color-information-400);
  --dk-surface-control-disabled-on-information-solid: var(--dk-color-information-650);
  --dk-icon-control-default-on-information-solid: var(--dk-color-information-200);
  --dk-icon-control-hover-on-information-solid: var(--dk-color-information-100);
  --dk-icon-control-active-on-information-solid: var(--dk-color-information-50);
  --dk-text-control-default-on-information-solid: var(--dk-color-information-50);
  --dk-text-control-hover-on-information-solid: var(--dk-color-information-100);
  --dk-text-control-active-on-information-solid: var(--dk-color-information-50);
  --dk-text-control-disabled-on-information-solid: var(--dk-color-information-300);
  --dk-surface-control-default-on-information-solid-level-1: var(--dk-color-information-700);
  --dk-surface-control-hover-on-information-solid-level-1: var(--dk-color-information-650);
  --dk-surface-control-active-on-information-solid-level-1: var(--dk-color-information-600);
  --dk-border-control-default-on-information-solid-level-1: var(--dk-color-information-650);
  --dk-border-control-hover-on-information-solid-level-1: var(--dk-color-information-600);
  --dk-border-control-active-on-information-solid-level-1: var(--dk-color-information-550);
  --dk-icon-control-disabled-on-information-solid-level-1: var(--dk-color-information-400);
  --dk-surface-control-disabled-on-information-solid-level-1: var(--dk-color-information-700);
  --dk-icon-control-default-on-information-solid-level-1: var(--dk-color-information-200);
  --dk-icon-control-hover-on-information-solid-level-1: var(--dk-color-information-100);
  --dk-icon-control-active-on-information-solid-level-1: var(--dk-color-information-50);
  --dk-text-control-default-on-information-solid-level-1: var(--dk-color-information-50);
  --dk-text-control-hover-on-information-solid-level-1: var(--dk-color-information-100);
  --dk-text-control-active-on-information-solid-level-1: var(--dk-color-information-50);
  --dk-text-control-disabled-on-information-solid-level-1: var(--dk-color-information-300);
  --dk-surface-control-default-on-information-solid-level-2: var(--dk-color-information-800);
  --dk-surface-control-hover-on-information-solid-level-2: var(--dk-color-information-700);
  --dk-surface-control-active-on-information-solid-level-2: var(--dk-color-information-650);
  --dk-border-control-default-on-information-solid-level-2: var(--dk-color-information-700);
  --dk-border-control-hover-on-information-solid-level-2: var(--dk-color-information-650);
  --dk-border-control-active-on-information-solid-level-2: var(--dk-color-information-600);
  --dk-icon-control-disabled-on-information-solid-level-2: var(--dk-color-information-550);
  --dk-surface-control-disabled-on-information-solid-level-2: var(--dk-color-information-800);
  --dk-icon-control-default-on-information-solid-level-2: var(--dk-color-information-300);
  --dk-icon-control-hover-on-information-solid-level-2: var(--dk-color-information-200);
  --dk-icon-control-active-on-information-solid-level-2: var(--dk-color-information-100);
  --dk-text-control-default-on-information-solid-level-2: var(--dk-color-information-100);
  --dk-text-control-hover-on-information-solid-level-2: var(--dk-color-information-200);
  --dk-text-control-active-on-information-solid-level-2: var(--dk-color-information-100);
  --dk-text-control-disabled-on-information-solid-level-2: var(--dk-color-information-500);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-control-default-on-primary-subtle: var(--dk-surface-control-default-on-primary-subtle-level-0);
  --dk-surface-control-hover-on-primary-subtle: var(--dk-surface-control-hover-on-primary-subtle-level-0);
  --dk-surface-control-active-on-primary-subtle: var(--dk-surface-control-active-on-primary-subtle-level-0);
  --dk-surface-control-disabled-on-primary-subtle: var(--dk-surface-control-disabled-on-primary-subtle-level-0);
  --dk-border-control-default-on-primary-subtle: var(--dk-border-control-default-on-primary-subtle-level-0);
  --dk-border-control-hover-on-primary-subtle: var(--dk-border-control-hover-on-primary-subtle-level-0);
  --dk-border-control-active-on-primary-subtle: var(--dk-border-control-active-on-primary-subtle-level-0);
  --dk-icon-control-default-on-primary-subtle: var(--dk-icon-control-default-on-primary-subtle-level-0);
  --dk-icon-control-hover-on-primary-subtle: var(--dk-icon-control-hover-on-primary-subtle-level-0);
  --dk-icon-control-active-on-primary-subtle: var(--dk-icon-control-active-on-primary-subtle-level-0);
  --dk-icon-control-disabled-on-primary-subtle: var(--dk-icon-control-disabled-on-primary-subtle-level-0);
  --dk-text-control-default-on-primary-subtle: var(--dk-text-control-default-on-primary-subtle-level-0);
  --dk-text-control-hover-on-primary-subtle: var(--dk-text-control-hover-on-primary-subtle-level-0);
  --dk-text-control-active-on-primary-subtle: var(--dk-text-control-active-on-primary-subtle-level-0);
  --dk-text-control-disabled-on-primary-subtle: var(--dk-text-control-disabled-on-primary-subtle-level-0);
  --dk-surface-control-default-on-success-subtle: var(--dk-surface-control-default-on-success-subtle-level-0);
  --dk-surface-control-hover-on-success-subtle: var(--dk-surface-control-hover-on-success-subtle-level-0);
  --dk-surface-control-active-on-success-subtle: var(--dk-surface-control-active-on-success-subtle-level-0);
  --dk-surface-control-disabled-on-success-subtle: var(--dk-surface-control-disabled-on-success-subtle-level-0);
  --dk-border-control-default-on-success-subtle: var(--dk-border-control-default-on-success-subtle-level-0);
  --dk-border-control-hover-on-success-subtle: var(--dk-border-control-hover-on-success-subtle-level-0);
  --dk-border-control-active-on-success-subtle: var(--dk-border-control-active-on-success-subtle-level-0);
  --dk-icon-control-default-on-success-subtle: var(--dk-icon-control-default-on-success-subtle-level-0);
  --dk-icon-control-hover-on-success-subtle: var(--dk-icon-control-hover-on-success-subtle-level-0);
  --dk-icon-control-active-on-success-subtle: var(--dk-icon-control-active-on-success-subtle-level-0);
  --dk-icon-control-disabled-on-success-subtle: var(--dk-icon-control-disabled-on-success-subtle-level-0);
  --dk-text-control-default-on-success-subtle: var(--dk-text-control-default-on-success-subtle-level-0);
  --dk-text-control-hover-on-success-subtle: var(--dk-text-control-hover-on-success-subtle-level-0);
  --dk-text-control-active-on-success-subtle: var(--dk-text-control-active-on-success-subtle-level-0);
  --dk-text-control-disabled-on-success-subtle: var(--dk-text-control-disabled-on-success-subtle-level-0);
  --dk-surface-control-default-on-error-subtle: var(--dk-surface-control-default-on-error-subtle-level-0);
  --dk-surface-control-hover-on-error-subtle: var(--dk-surface-control-hover-on-error-subtle-level-0);
  --dk-surface-control-active-on-error-subtle: var(--dk-surface-control-active-on-error-subtle-level-0);
  --dk-surface-control-disabled-on-error-subtle: var(--dk-surface-control-disabled-on-error-subtle-level-0);
  --dk-border-control-default-on-error-subtle: var(--dk-border-control-default-on-error-subtle-level-0);
  --dk-border-control-hover-on-error-subtle: var(--dk-border-control-hover-on-error-subtle-level-0);
  --dk-border-control-active-on-error-subtle: var(--dk-border-control-active-on-error-subtle-level-0);
  --dk-icon-control-default-on-error-subtle: var(--dk-icon-control-default-on-error-subtle-level-0);
  --dk-icon-control-hover-on-error-subtle: var(--dk-icon-control-hover-on-error-subtle-level-0);
  --dk-icon-control-active-on-error-subtle: var(--dk-icon-control-active-on-error-subtle-level-0);
  --dk-icon-control-disabled-on-error-subtle: var(--dk-icon-control-disabled-on-error-subtle-level-0);
  --dk-text-control-default-on-error-subtle: var(--dk-text-control-default-on-error-subtle-level-0);
  --dk-text-control-hover-on-error-subtle: var(--dk-text-control-hover-on-error-subtle-level-0);
  --dk-text-control-active-on-error-subtle: var(--dk-text-control-active-on-error-subtle-level-0);
  --dk-text-control-disabled-on-error-subtle: var(--dk-text-control-disabled-on-error-subtle-level-0);
  --dk-surface-control-default-on-warning-subtle: var(--dk-surface-control-default-on-warning-subtle-level-0);
  --dk-surface-control-hover-on-warning-subtle: var(--dk-surface-control-hover-on-warning-subtle-level-0);
  --dk-surface-control-active-on-warning-subtle: var(--dk-surface-control-active-on-warning-subtle-level-0);
  --dk-surface-control-disabled-on-warning-subtle: var(--dk-surface-control-disabled-on-warning-subtle-level-0);
  --dk-border-control-default-on-warning-subtle: var(--dk-border-control-default-on-warning-subtle-level-0);
  --dk-border-control-hover-on-warning-subtle: var(--dk-border-control-hover-on-warning-subtle-level-0);
  --dk-border-control-active-on-warning-subtle: var(--dk-border-control-active-on-warning-subtle-level-0);
  --dk-icon-control-default-on-warning-subtle: var(--dk-icon-control-default-on-warning-subtle-level-0);
  --dk-icon-control-hover-on-warning-subtle: var(--dk-icon-control-hover-on-warning-subtle-level-0);
  --dk-icon-control-active-on-warning-subtle: var(--dk-icon-control-active-on-warning-subtle-level-0);
  --dk-icon-control-disabled-on-warning-subtle: var(--dk-icon-control-disabled-on-warning-subtle-level-0);
  --dk-text-control-default-on-warning-subtle: var(--dk-text-control-default-on-warning-subtle-level-0);
  --dk-text-control-hover-on-warning-subtle: var(--dk-text-control-hover-on-warning-subtle-level-0);
  --dk-text-control-active-on-warning-subtle: var(--dk-text-control-active-on-warning-subtle-level-0);
  --dk-text-control-disabled-on-warning-subtle: var(--dk-text-control-disabled-on-warning-subtle-level-0);
  --dk-surface-control-default-on-information-subtle: var(--dk-surface-control-default-on-information-subtle-level-0);
  --dk-surface-control-hover-on-information-subtle: var(--dk-surface-control-hover-on-information-subtle-level-0);
  --dk-surface-control-active-on-information-subtle: var(--dk-surface-control-active-on-information-subtle-level-0);
  --dk-surface-control-disabled-on-information-subtle: var(--dk-surface-control-disabled-on-information-subtle-level-0);
  --dk-border-control-default-on-information-subtle: var(--dk-border-control-default-on-information-subtle-level-0);
  --dk-border-control-hover-on-information-subtle: var(--dk-border-control-hover-on-information-subtle-level-0);
  --dk-border-control-active-on-information-subtle: var(--dk-border-control-active-on-information-subtle-level-0);
  --dk-icon-control-default-on-information-subtle: var(--dk-icon-control-default-on-information-subtle-level-0);
  --dk-icon-control-hover-on-information-subtle: var(--dk-icon-control-hover-on-information-subtle-level-0);
  --dk-icon-control-active-on-information-subtle: var(--dk-icon-control-active-on-information-subtle-level-0);
  --dk-icon-control-disabled-on-information-subtle: var(--dk-icon-control-disabled-on-information-subtle-level-0);
  --dk-text-control-default-on-information-subtle: var(--dk-text-control-default-on-information-subtle-level-0);
  --dk-text-control-hover-on-information-subtle: var(--dk-text-control-hover-on-information-subtle-level-0);
  --dk-text-control-active-on-information-subtle: var(--dk-text-control-active-on-information-subtle-level-0);
  --dk-text-control-disabled-on-information-subtle: var(--dk-text-control-disabled-on-information-subtle-level-0);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-control-default-on-primary-subtle: var(--dk-surface-control-default-on-primary-subtle-level-0);
  --dk-surface-control-hover-on-primary-subtle: var(--dk-surface-control-hover-on-primary-subtle-level-0);
  --dk-surface-control-active-on-primary-subtle: var(--dk-surface-control-active-on-primary-subtle-level-0);
  --dk-surface-control-disabled-on-primary-subtle: var(--dk-surface-control-disabled-on-primary-subtle-level-0);
  --dk-border-control-default-on-primary-subtle: var(--dk-border-control-default-on-primary-subtle-level-0);
  --dk-border-control-hover-on-primary-subtle: var(--dk-border-control-hover-on-primary-subtle-level-0);
  --dk-border-control-active-on-primary-subtle: var(--dk-border-control-active-on-primary-subtle-level-0);
  --dk-icon-control-default-on-primary-subtle: var(--dk-icon-control-default-on-primary-subtle-level-0);
  --dk-icon-control-hover-on-primary-subtle: var(--dk-icon-control-hover-on-primary-subtle-level-0);
  --dk-icon-control-active-on-primary-subtle: var(--dk-icon-control-active-on-primary-subtle-level-0);
  --dk-icon-control-disabled-on-primary-subtle: var(--dk-icon-control-disabled-on-primary-subtle-level-0);
  --dk-text-control-default-on-primary-subtle: var(--dk-text-control-default-on-primary-subtle-level-0);
  --dk-text-control-hover-on-primary-subtle: var(--dk-text-control-hover-on-primary-subtle-level-0);
  --dk-text-control-active-on-primary-subtle: var(--dk-text-control-active-on-primary-subtle-level-0);
  --dk-text-control-disabled-on-primary-subtle: var(--dk-text-control-disabled-on-primary-subtle-level-0);
  --dk-surface-control-default-on-success-subtle: var(--dk-surface-control-default-on-success-subtle-level-0);
  --dk-surface-control-hover-on-success-subtle: var(--dk-surface-control-hover-on-success-subtle-level-0);
  --dk-surface-control-active-on-success-subtle: var(--dk-surface-control-active-on-success-subtle-level-0);
  --dk-surface-control-disabled-on-success-subtle: var(--dk-surface-control-disabled-on-success-subtle-level-0);
  --dk-border-control-default-on-success-subtle: var(--dk-border-control-default-on-success-subtle-level-0);
  --dk-border-control-hover-on-success-subtle: var(--dk-border-control-hover-on-success-subtle-level-0);
  --dk-border-control-active-on-success-subtle: var(--dk-border-control-active-on-success-subtle-level-0);
  --dk-icon-control-default-on-success-subtle: var(--dk-icon-control-default-on-success-subtle-level-0);
  --dk-icon-control-hover-on-success-subtle: var(--dk-icon-control-hover-on-success-subtle-level-0);
  --dk-icon-control-active-on-success-subtle: var(--dk-icon-control-active-on-success-subtle-level-0);
  --dk-icon-control-disabled-on-success-subtle: var(--dk-icon-control-disabled-on-success-subtle-level-0);
  --dk-text-control-default-on-success-subtle: var(--dk-text-control-default-on-success-subtle-level-0);
  --dk-text-control-hover-on-success-subtle: var(--dk-text-control-hover-on-success-subtle-level-0);
  --dk-text-control-active-on-success-subtle: var(--dk-text-control-active-on-success-subtle-level-0);
  --dk-text-control-disabled-on-success-subtle: var(--dk-text-control-disabled-on-success-subtle-level-0);
  --dk-surface-control-default-on-error-subtle: var(--dk-surface-control-default-on-error-subtle-level-0);
  --dk-surface-control-hover-on-error-subtle: var(--dk-surface-control-hover-on-error-subtle-level-0);
  --dk-surface-control-active-on-error-subtle: var(--dk-surface-control-active-on-error-subtle-level-0);
  --dk-surface-control-disabled-on-error-subtle: var(--dk-surface-control-disabled-on-error-subtle-level-0);
  --dk-border-control-default-on-error-subtle: var(--dk-border-control-default-on-error-subtle-level-0);
  --dk-border-control-hover-on-error-subtle: var(--dk-border-control-hover-on-error-subtle-level-0);
  --dk-border-control-active-on-error-subtle: var(--dk-border-control-active-on-error-subtle-level-0);
  --dk-icon-control-default-on-error-subtle: var(--dk-icon-control-default-on-error-subtle-level-0);
  --dk-icon-control-hover-on-error-subtle: var(--dk-icon-control-hover-on-error-subtle-level-0);
  --dk-icon-control-active-on-error-subtle: var(--dk-icon-control-active-on-error-subtle-level-0);
  --dk-icon-control-disabled-on-error-subtle: var(--dk-icon-control-disabled-on-error-subtle-level-0);
  --dk-text-control-default-on-error-subtle: var(--dk-text-control-default-on-error-subtle-level-0);
  --dk-text-control-hover-on-error-subtle: var(--dk-text-control-hover-on-error-subtle-level-0);
  --dk-text-control-active-on-error-subtle: var(--dk-text-control-active-on-error-subtle-level-0);
  --dk-text-control-disabled-on-error-subtle: var(--dk-text-control-disabled-on-error-subtle-level-0);
  --dk-surface-control-default-on-warning-subtle: var(--dk-surface-control-default-on-warning-subtle-level-0);
  --dk-surface-control-hover-on-warning-subtle: var(--dk-surface-control-hover-on-warning-subtle-level-0);
  --dk-surface-control-active-on-warning-subtle: var(--dk-surface-control-active-on-warning-subtle-level-0);
  --dk-surface-control-disabled-on-warning-subtle: var(--dk-surface-control-disabled-on-warning-subtle-level-0);
  --dk-border-control-default-on-warning-subtle: var(--dk-border-control-default-on-warning-subtle-level-0);
  --dk-border-control-hover-on-warning-subtle: var(--dk-border-control-hover-on-warning-subtle-level-0);
  --dk-border-control-active-on-warning-subtle: var(--dk-border-control-active-on-warning-subtle-level-0);
  --dk-icon-control-default-on-warning-subtle: var(--dk-icon-control-default-on-warning-subtle-level-0);
  --dk-icon-control-hover-on-warning-subtle: var(--dk-icon-control-hover-on-warning-subtle-level-0);
  --dk-icon-control-active-on-warning-subtle: var(--dk-icon-control-active-on-warning-subtle-level-0);
  --dk-icon-control-disabled-on-warning-subtle: var(--dk-icon-control-disabled-on-warning-subtle-level-0);
  --dk-text-control-default-on-warning-subtle: var(--dk-text-control-default-on-warning-subtle-level-0);
  --dk-text-control-hover-on-warning-subtle: var(--dk-text-control-hover-on-warning-subtle-level-0);
  --dk-text-control-active-on-warning-subtle: var(--dk-text-control-active-on-warning-subtle-level-0);
  --dk-text-control-disabled-on-warning-subtle: var(--dk-text-control-disabled-on-warning-subtle-level-0);
  --dk-surface-control-default-on-information-subtle: var(--dk-surface-control-default-on-information-subtle-level-0);
  --dk-surface-control-hover-on-information-subtle: var(--dk-surface-control-hover-on-information-subtle-level-0);
  --dk-surface-control-active-on-information-subtle: var(--dk-surface-control-active-on-information-subtle-level-0);
  --dk-surface-control-disabled-on-information-subtle: var(--dk-surface-control-disabled-on-information-subtle-level-0);
  --dk-border-control-default-on-information-subtle: var(--dk-border-control-default-on-information-subtle-level-0);
  --dk-border-control-hover-on-information-subtle: var(--dk-border-control-hover-on-information-subtle-level-0);
  --dk-border-control-active-on-information-subtle: var(--dk-border-control-active-on-information-subtle-level-0);
  --dk-icon-control-default-on-information-subtle: var(--dk-icon-control-default-on-information-subtle-level-0);
  --dk-icon-control-hover-on-information-subtle: var(--dk-icon-control-hover-on-information-subtle-level-0);
  --dk-icon-control-active-on-information-subtle: var(--dk-icon-control-active-on-information-subtle-level-0);
  --dk-icon-control-disabled-on-information-subtle: var(--dk-icon-control-disabled-on-information-subtle-level-0);
  --dk-text-control-default-on-information-subtle: var(--dk-text-control-default-on-information-subtle-level-0);
  --dk-text-control-hover-on-information-subtle: var(--dk-text-control-hover-on-information-subtle-level-0);
  --dk-text-control-active-on-information-subtle: var(--dk-text-control-active-on-information-subtle-level-0);
  --dk-text-control-disabled-on-information-subtle: var(--dk-text-control-disabled-on-information-subtle-level-0);
}
[data-theme="light"] [data-tone="inverse"][data-surface="1"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"][data-surface="1"] {
  --dk-surface-control-default-on-primary-subtle: var(--dk-surface-control-default-on-primary-subtle-level-1);
  --dk-surface-control-hover-on-primary-subtle: var(--dk-surface-control-hover-on-primary-subtle-level-1);
  --dk-surface-control-active-on-primary-subtle: var(--dk-surface-control-active-on-primary-subtle-level-1);
  --dk-surface-control-disabled-on-primary-subtle: var(--dk-surface-control-disabled-on-primary-subtle-level-1);
  --dk-border-control-default-on-primary-subtle: var(--dk-border-control-default-on-primary-subtle-level-1);
  --dk-border-control-hover-on-primary-subtle: var(--dk-border-control-hover-on-primary-subtle-level-1);
  --dk-border-control-active-on-primary-subtle: var(--dk-border-control-active-on-primary-subtle-level-1);
  --dk-icon-control-default-on-primary-subtle: var(--dk-icon-control-default-on-primary-subtle-level-1);
  --dk-icon-control-hover-on-primary-subtle: var(--dk-icon-control-hover-on-primary-subtle-level-1);
  --dk-icon-control-active-on-primary-subtle: var(--dk-icon-control-active-on-primary-subtle-level-1);
  --dk-icon-control-disabled-on-primary-subtle: var(--dk-icon-control-disabled-on-primary-subtle-level-1);
  --dk-text-control-default-on-primary-subtle: var(--dk-text-control-default-on-primary-subtle-level-1);
  --dk-text-control-hover-on-primary-subtle: var(--dk-text-control-hover-on-primary-subtle-level-1);
  --dk-text-control-active-on-primary-subtle: var(--dk-text-control-active-on-primary-subtle-level-1);
  --dk-text-control-disabled-on-primary-subtle: var(--dk-text-control-disabled-on-primary-subtle-level-1);
  --dk-surface-control-default-on-success-subtle: var(--dk-surface-control-default-on-success-subtle-level-1);
  --dk-surface-control-hover-on-success-subtle: var(--dk-surface-control-hover-on-success-subtle-level-1);
  --dk-surface-control-active-on-success-subtle: var(--dk-surface-control-active-on-success-subtle-level-1);
  --dk-surface-control-disabled-on-success-subtle: var(--dk-surface-control-disabled-on-success-subtle-level-1);
  --dk-border-control-default-on-success-subtle: var(--dk-border-control-default-on-success-subtle-level-1);
  --dk-border-control-hover-on-success-subtle: var(--dk-border-control-hover-on-success-subtle-level-1);
  --dk-border-control-active-on-success-subtle: var(--dk-border-control-active-on-success-subtle-level-1);
  --dk-icon-control-default-on-success-subtle: var(--dk-icon-control-default-on-success-subtle-level-1);
  --dk-icon-control-hover-on-success-subtle: var(--dk-icon-control-hover-on-success-subtle-level-1);
  --dk-icon-control-active-on-success-subtle: var(--dk-icon-control-active-on-success-subtle-level-1);
  --dk-icon-control-disabled-on-success-subtle: var(--dk-icon-control-disabled-on-success-subtle-level-1);
  --dk-text-control-default-on-success-subtle: var(--dk-text-control-default-on-success-subtle-level-1);
  --dk-text-control-hover-on-success-subtle: var(--dk-text-control-hover-on-success-subtle-level-1);
  --dk-text-control-active-on-success-subtle: var(--dk-text-control-active-on-success-subtle-level-1);
  --dk-text-control-disabled-on-success-subtle: var(--dk-text-control-disabled-on-success-subtle-level-1);
  --dk-surface-control-default-on-error-subtle: var(--dk-surface-control-default-on-error-subtle-level-1);
  --dk-surface-control-hover-on-error-subtle: var(--dk-surface-control-hover-on-error-subtle-level-1);
  --dk-surface-control-active-on-error-subtle: var(--dk-surface-control-active-on-error-subtle-level-1);
  --dk-surface-control-disabled-on-error-subtle: var(--dk-surface-control-disabled-on-error-subtle-level-1);
  --dk-border-control-default-on-error-subtle: var(--dk-border-control-default-on-error-subtle-level-1);
  --dk-border-control-hover-on-error-subtle: var(--dk-border-control-hover-on-error-subtle-level-1);
  --dk-border-control-active-on-error-subtle: var(--dk-border-control-active-on-error-subtle-level-1);
  --dk-icon-control-default-on-error-subtle: var(--dk-icon-control-default-on-error-subtle-level-1);
  --dk-icon-control-hover-on-error-subtle: var(--dk-icon-control-hover-on-error-subtle-level-1);
  --dk-icon-control-active-on-error-subtle: var(--dk-icon-control-active-on-error-subtle-level-1);
  --dk-icon-control-disabled-on-error-subtle: var(--dk-icon-control-disabled-on-error-subtle-level-1);
  --dk-text-control-default-on-error-subtle: var(--dk-text-control-default-on-error-subtle-level-1);
  --dk-text-control-hover-on-error-subtle: var(--dk-text-control-hover-on-error-subtle-level-1);
  --dk-text-control-active-on-error-subtle: var(--dk-text-control-active-on-error-subtle-level-1);
  --dk-text-control-disabled-on-error-subtle: var(--dk-text-control-disabled-on-error-subtle-level-1);
  --dk-surface-control-default-on-warning-subtle: var(--dk-surface-control-default-on-warning-subtle-level-1);
  --dk-surface-control-hover-on-warning-subtle: var(--dk-surface-control-hover-on-warning-subtle-level-1);
  --dk-surface-control-active-on-warning-subtle: var(--dk-surface-control-active-on-warning-subtle-level-1);
  --dk-surface-control-disabled-on-warning-subtle: var(--dk-surface-control-disabled-on-warning-subtle-level-1);
  --dk-border-control-default-on-warning-subtle: var(--dk-border-control-default-on-warning-subtle-level-1);
  --dk-border-control-hover-on-warning-subtle: var(--dk-border-control-hover-on-warning-subtle-level-1);
  --dk-border-control-active-on-warning-subtle: var(--dk-border-control-active-on-warning-subtle-level-1);
  --dk-icon-control-default-on-warning-subtle: var(--dk-icon-control-default-on-warning-subtle-level-1);
  --dk-icon-control-hover-on-warning-subtle: var(--dk-icon-control-hover-on-warning-subtle-level-1);
  --dk-icon-control-active-on-warning-subtle: var(--dk-icon-control-active-on-warning-subtle-level-1);
  --dk-icon-control-disabled-on-warning-subtle: var(--dk-icon-control-disabled-on-warning-subtle-level-1);
  --dk-text-control-default-on-warning-subtle: var(--dk-text-control-default-on-warning-subtle-level-1);
  --dk-text-control-hover-on-warning-subtle: var(--dk-text-control-hover-on-warning-subtle-level-1);
  --dk-text-control-active-on-warning-subtle: var(--dk-text-control-active-on-warning-subtle-level-1);
  --dk-text-control-disabled-on-warning-subtle: var(--dk-text-control-disabled-on-warning-subtle-level-1);
  --dk-surface-control-default-on-information-subtle: var(--dk-surface-control-default-on-information-subtle-level-1);
  --dk-surface-control-hover-on-information-subtle: var(--dk-surface-control-hover-on-information-subtle-level-1);
  --dk-surface-control-active-on-information-subtle: var(--dk-surface-control-active-on-information-subtle-level-1);
  --dk-surface-control-disabled-on-information-subtle: var(--dk-surface-control-disabled-on-information-subtle-level-1);
  --dk-border-control-default-on-information-subtle: var(--dk-border-control-default-on-information-subtle-level-1);
  --dk-border-control-hover-on-information-subtle: var(--dk-border-control-hover-on-information-subtle-level-1);
  --dk-border-control-active-on-information-subtle: var(--dk-border-control-active-on-information-subtle-level-1);
  --dk-icon-control-default-on-information-subtle: var(--dk-icon-control-default-on-information-subtle-level-1);
  --dk-icon-control-hover-on-information-subtle: var(--dk-icon-control-hover-on-information-subtle-level-1);
  --dk-icon-control-active-on-information-subtle: var(--dk-icon-control-active-on-information-subtle-level-1);
  --dk-icon-control-disabled-on-information-subtle: var(--dk-icon-control-disabled-on-information-subtle-level-1);
  --dk-text-control-default-on-information-subtle: var(--dk-text-control-default-on-information-subtle-level-1);
  --dk-text-control-hover-on-information-subtle: var(--dk-text-control-hover-on-information-subtle-level-1);
  --dk-text-control-active-on-information-subtle: var(--dk-text-control-active-on-information-subtle-level-1);
  --dk-text-control-disabled-on-information-subtle: var(--dk-text-control-disabled-on-information-subtle-level-1);
}
[data-theme="light"][data-tone="inverse"][data-surface="below"],
[data-theme="light"] [data-tone="inverse"][data-surface="below"]:not([data-theme]):where(:not(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *))) {
  --dk-surface-control-default-on-primary-subtle: var(--dk-surface-control-default-on-primary-subtle-level-1);
  --dk-surface-control-hover-on-primary-subtle: var(--dk-surface-control-hover-on-primary-subtle-level-1);
  --dk-surface-control-active-on-primary-subtle: var(--dk-surface-control-active-on-primary-subtle-level-1);
  --dk-surface-control-disabled-on-primary-subtle: var(--dk-surface-control-disabled-on-primary-subtle-level-1);
  --dk-border-control-default-on-primary-subtle: var(--dk-border-control-default-on-primary-subtle-level-1);
  --dk-border-control-hover-on-primary-subtle: var(--dk-border-control-hover-on-primary-subtle-level-1);
  --dk-border-control-active-on-primary-subtle: var(--dk-border-control-active-on-primary-subtle-level-1);
  --dk-icon-control-default-on-primary-subtle: var(--dk-icon-control-default-on-primary-subtle-level-1);
  --dk-icon-control-hover-on-primary-subtle: var(--dk-icon-control-hover-on-primary-subtle-level-1);
  --dk-icon-control-active-on-primary-subtle: var(--dk-icon-control-active-on-primary-subtle-level-1);
  --dk-icon-control-disabled-on-primary-subtle: var(--dk-icon-control-disabled-on-primary-subtle-level-1);
  --dk-text-control-default-on-primary-subtle: var(--dk-text-control-default-on-primary-subtle-level-1);
  --dk-text-control-hover-on-primary-subtle: var(--dk-text-control-hover-on-primary-subtle-level-1);
  --dk-text-control-active-on-primary-subtle: var(--dk-text-control-active-on-primary-subtle-level-1);
  --dk-text-control-disabled-on-primary-subtle: var(--dk-text-control-disabled-on-primary-subtle-level-1);
  --dk-surface-control-default-on-success-subtle: var(--dk-surface-control-default-on-success-subtle-level-1);
  --dk-surface-control-hover-on-success-subtle: var(--dk-surface-control-hover-on-success-subtle-level-1);
  --dk-surface-control-active-on-success-subtle: var(--dk-surface-control-active-on-success-subtle-level-1);
  --dk-surface-control-disabled-on-success-subtle: var(--dk-surface-control-disabled-on-success-subtle-level-1);
  --dk-border-control-default-on-success-subtle: var(--dk-border-control-default-on-success-subtle-level-1);
  --dk-border-control-hover-on-success-subtle: var(--dk-border-control-hover-on-success-subtle-level-1);
  --dk-border-control-active-on-success-subtle: var(--dk-border-control-active-on-success-subtle-level-1);
  --dk-icon-control-default-on-success-subtle: var(--dk-icon-control-default-on-success-subtle-level-1);
  --dk-icon-control-hover-on-success-subtle: var(--dk-icon-control-hover-on-success-subtle-level-1);
  --dk-icon-control-active-on-success-subtle: var(--dk-icon-control-active-on-success-subtle-level-1);
  --dk-icon-control-disabled-on-success-subtle: var(--dk-icon-control-disabled-on-success-subtle-level-1);
  --dk-text-control-default-on-success-subtle: var(--dk-text-control-default-on-success-subtle-level-1);
  --dk-text-control-hover-on-success-subtle: var(--dk-text-control-hover-on-success-subtle-level-1);
  --dk-text-control-active-on-success-subtle: var(--dk-text-control-active-on-success-subtle-level-1);
  --dk-text-control-disabled-on-success-subtle: var(--dk-text-control-disabled-on-success-subtle-level-1);
  --dk-surface-control-default-on-error-subtle: var(--dk-surface-control-default-on-error-subtle-level-1);
  --dk-surface-control-hover-on-error-subtle: var(--dk-surface-control-hover-on-error-subtle-level-1);
  --dk-surface-control-active-on-error-subtle: var(--dk-surface-control-active-on-error-subtle-level-1);
  --dk-surface-control-disabled-on-error-subtle: var(--dk-surface-control-disabled-on-error-subtle-level-1);
  --dk-border-control-default-on-error-subtle: var(--dk-border-control-default-on-error-subtle-level-1);
  --dk-border-control-hover-on-error-subtle: var(--dk-border-control-hover-on-error-subtle-level-1);
  --dk-border-control-active-on-error-subtle: var(--dk-border-control-active-on-error-subtle-level-1);
  --dk-icon-control-default-on-error-subtle: var(--dk-icon-control-default-on-error-subtle-level-1);
  --dk-icon-control-hover-on-error-subtle: var(--dk-icon-control-hover-on-error-subtle-level-1);
  --dk-icon-control-active-on-error-subtle: var(--dk-icon-control-active-on-error-subtle-level-1);
  --dk-icon-control-disabled-on-error-subtle: var(--dk-icon-control-disabled-on-error-subtle-level-1);
  --dk-text-control-default-on-error-subtle: var(--dk-text-control-default-on-error-subtle-level-1);
  --dk-text-control-hover-on-error-subtle: var(--dk-text-control-hover-on-error-subtle-level-1);
  --dk-text-control-active-on-error-subtle: var(--dk-text-control-active-on-error-subtle-level-1);
  --dk-text-control-disabled-on-error-subtle: var(--dk-text-control-disabled-on-error-subtle-level-1);
  --dk-surface-control-default-on-warning-subtle: var(--dk-surface-control-default-on-warning-subtle-level-1);
  --dk-surface-control-hover-on-warning-subtle: var(--dk-surface-control-hover-on-warning-subtle-level-1);
  --dk-surface-control-active-on-warning-subtle: var(--dk-surface-control-active-on-warning-subtle-level-1);
  --dk-surface-control-disabled-on-warning-subtle: var(--dk-surface-control-disabled-on-warning-subtle-level-1);
  --dk-border-control-default-on-warning-subtle: var(--dk-border-control-default-on-warning-subtle-level-1);
  --dk-border-control-hover-on-warning-subtle: var(--dk-border-control-hover-on-warning-subtle-level-1);
  --dk-border-control-active-on-warning-subtle: var(--dk-border-control-active-on-warning-subtle-level-1);
  --dk-icon-control-default-on-warning-subtle: var(--dk-icon-control-default-on-warning-subtle-level-1);
  --dk-icon-control-hover-on-warning-subtle: var(--dk-icon-control-hover-on-warning-subtle-level-1);
  --dk-icon-control-active-on-warning-subtle: var(--dk-icon-control-active-on-warning-subtle-level-1);
  --dk-icon-control-disabled-on-warning-subtle: var(--dk-icon-control-disabled-on-warning-subtle-level-1);
  --dk-text-control-default-on-warning-subtle: var(--dk-text-control-default-on-warning-subtle-level-1);
  --dk-text-control-hover-on-warning-subtle: var(--dk-text-control-hover-on-warning-subtle-level-1);
  --dk-text-control-active-on-warning-subtle: var(--dk-text-control-active-on-warning-subtle-level-1);
  --dk-text-control-disabled-on-warning-subtle: var(--dk-text-control-disabled-on-warning-subtle-level-1);
  --dk-surface-control-default-on-information-subtle: var(--dk-surface-control-default-on-information-subtle-level-1);
  --dk-surface-control-hover-on-information-subtle: var(--dk-surface-control-hover-on-information-subtle-level-1);
  --dk-surface-control-active-on-information-subtle: var(--dk-surface-control-active-on-information-subtle-level-1);
  --dk-surface-control-disabled-on-information-subtle: var(--dk-surface-control-disabled-on-information-subtle-level-1);
  --dk-border-control-default-on-information-subtle: var(--dk-border-control-default-on-information-subtle-level-1);
  --dk-border-control-hover-on-information-subtle: var(--dk-border-control-hover-on-information-subtle-level-1);
  --dk-border-control-active-on-information-subtle: var(--dk-border-control-active-on-information-subtle-level-1);
  --dk-icon-control-default-on-information-subtle: var(--dk-icon-control-default-on-information-subtle-level-1);
  --dk-icon-control-hover-on-information-subtle: var(--dk-icon-control-hover-on-information-subtle-level-1);
  --dk-icon-control-active-on-information-subtle: var(--dk-icon-control-active-on-information-subtle-level-1);
  --dk-icon-control-disabled-on-information-subtle: var(--dk-icon-control-disabled-on-information-subtle-level-1);
  --dk-text-control-default-on-information-subtle: var(--dk-text-control-default-on-information-subtle-level-1);
  --dk-text-control-hover-on-information-subtle: var(--dk-text-control-hover-on-information-subtle-level-1);
  --dk-text-control-active-on-information-subtle: var(--dk-text-control-active-on-information-subtle-level-1);
  --dk-text-control-disabled-on-information-subtle: var(--dk-text-control-disabled-on-information-subtle-level-1);
}
[data-theme="light"] [data-tone="inverse"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="light"][data-tone="inverse"][data-surface="raised"] {
  --dk-surface-control-default-on-primary-subtle: var(--dk-surface-control-default-on-primary-subtle-level-1);
  --dk-surface-control-hover-on-primary-subtle: var(--dk-surface-control-hover-on-primary-subtle-level-1);
  --dk-surface-control-active-on-primary-subtle: var(--dk-surface-control-active-on-primary-subtle-level-1);
  --dk-surface-control-disabled-on-primary-subtle: var(--dk-surface-control-disabled-on-primary-subtle-level-1);
  --dk-border-control-default-on-primary-subtle: var(--dk-border-control-default-on-primary-subtle-level-1);
  --dk-border-control-hover-on-primary-subtle: var(--dk-border-control-hover-on-primary-subtle-level-1);
  --dk-border-control-active-on-primary-subtle: var(--dk-border-control-active-on-primary-subtle-level-1);
  --dk-icon-control-default-on-primary-subtle: var(--dk-icon-control-default-on-primary-subtle-level-1);
  --dk-icon-control-hover-on-primary-subtle: var(--dk-icon-control-hover-on-primary-subtle-level-1);
  --dk-icon-control-active-on-primary-subtle: var(--dk-icon-control-active-on-primary-subtle-level-1);
  --dk-icon-control-disabled-on-primary-subtle: var(--dk-icon-control-disabled-on-primary-subtle-level-1);
  --dk-text-control-default-on-primary-subtle: var(--dk-text-control-default-on-primary-subtle-level-1);
  --dk-text-control-hover-on-primary-subtle: var(--dk-text-control-hover-on-primary-subtle-level-1);
  --dk-text-control-active-on-primary-subtle: var(--dk-text-control-active-on-primary-subtle-level-1);
  --dk-text-control-disabled-on-primary-subtle: var(--dk-text-control-disabled-on-primary-subtle-level-1);
  --dk-surface-control-default-on-success-subtle: var(--dk-surface-control-default-on-success-subtle-level-1);
  --dk-surface-control-hover-on-success-subtle: var(--dk-surface-control-hover-on-success-subtle-level-1);
  --dk-surface-control-active-on-success-subtle: var(--dk-surface-control-active-on-success-subtle-level-1);
  --dk-surface-control-disabled-on-success-subtle: var(--dk-surface-control-disabled-on-success-subtle-level-1);
  --dk-border-control-default-on-success-subtle: var(--dk-border-control-default-on-success-subtle-level-1);
  --dk-border-control-hover-on-success-subtle: var(--dk-border-control-hover-on-success-subtle-level-1);
  --dk-border-control-active-on-success-subtle: var(--dk-border-control-active-on-success-subtle-level-1);
  --dk-icon-control-default-on-success-subtle: var(--dk-icon-control-default-on-success-subtle-level-1);
  --dk-icon-control-hover-on-success-subtle: var(--dk-icon-control-hover-on-success-subtle-level-1);
  --dk-icon-control-active-on-success-subtle: var(--dk-icon-control-active-on-success-subtle-level-1);
  --dk-icon-control-disabled-on-success-subtle: var(--dk-icon-control-disabled-on-success-subtle-level-1);
  --dk-text-control-default-on-success-subtle: var(--dk-text-control-default-on-success-subtle-level-1);
  --dk-text-control-hover-on-success-subtle: var(--dk-text-control-hover-on-success-subtle-level-1);
  --dk-text-control-active-on-success-subtle: var(--dk-text-control-active-on-success-subtle-level-1);
  --dk-text-control-disabled-on-success-subtle: var(--dk-text-control-disabled-on-success-subtle-level-1);
  --dk-surface-control-default-on-error-subtle: var(--dk-surface-control-default-on-error-subtle-level-1);
  --dk-surface-control-hover-on-error-subtle: var(--dk-surface-control-hover-on-error-subtle-level-1);
  --dk-surface-control-active-on-error-subtle: var(--dk-surface-control-active-on-error-subtle-level-1);
  --dk-surface-control-disabled-on-error-subtle: var(--dk-surface-control-disabled-on-error-subtle-level-1);
  --dk-border-control-default-on-error-subtle: var(--dk-border-control-default-on-error-subtle-level-1);
  --dk-border-control-hover-on-error-subtle: var(--dk-border-control-hover-on-error-subtle-level-1);
  --dk-border-control-active-on-error-subtle: var(--dk-border-control-active-on-error-subtle-level-1);
  --dk-icon-control-default-on-error-subtle: var(--dk-icon-control-default-on-error-subtle-level-1);
  --dk-icon-control-hover-on-error-subtle: var(--dk-icon-control-hover-on-error-subtle-level-1);
  --dk-icon-control-active-on-error-subtle: var(--dk-icon-control-active-on-error-subtle-level-1);
  --dk-icon-control-disabled-on-error-subtle: var(--dk-icon-control-disabled-on-error-subtle-level-1);
  --dk-text-control-default-on-error-subtle: var(--dk-text-control-default-on-error-subtle-level-1);
  --dk-text-control-hover-on-error-subtle: var(--dk-text-control-hover-on-error-subtle-level-1);
  --dk-text-control-active-on-error-subtle: var(--dk-text-control-active-on-error-subtle-level-1);
  --dk-text-control-disabled-on-error-subtle: var(--dk-text-control-disabled-on-error-subtle-level-1);
  --dk-surface-control-default-on-warning-subtle: var(--dk-surface-control-default-on-warning-subtle-level-1);
  --dk-surface-control-hover-on-warning-subtle: var(--dk-surface-control-hover-on-warning-subtle-level-1);
  --dk-surface-control-active-on-warning-subtle: var(--dk-surface-control-active-on-warning-subtle-level-1);
  --dk-surface-control-disabled-on-warning-subtle: var(--dk-surface-control-disabled-on-warning-subtle-level-1);
  --dk-border-control-default-on-warning-subtle: var(--dk-border-control-default-on-warning-subtle-level-1);
  --dk-border-control-hover-on-warning-subtle: var(--dk-border-control-hover-on-warning-subtle-level-1);
  --dk-border-control-active-on-warning-subtle: var(--dk-border-control-active-on-warning-subtle-level-1);
  --dk-icon-control-default-on-warning-subtle: var(--dk-icon-control-default-on-warning-subtle-level-1);
  --dk-icon-control-hover-on-warning-subtle: var(--dk-icon-control-hover-on-warning-subtle-level-1);
  --dk-icon-control-active-on-warning-subtle: var(--dk-icon-control-active-on-warning-subtle-level-1);
  --dk-icon-control-disabled-on-warning-subtle: var(--dk-icon-control-disabled-on-warning-subtle-level-1);
  --dk-text-control-default-on-warning-subtle: var(--dk-text-control-default-on-warning-subtle-level-1);
  --dk-text-control-hover-on-warning-subtle: var(--dk-text-control-hover-on-warning-subtle-level-1);
  --dk-text-control-active-on-warning-subtle: var(--dk-text-control-active-on-warning-subtle-level-1);
  --dk-text-control-disabled-on-warning-subtle: var(--dk-text-control-disabled-on-warning-subtle-level-1);
  --dk-surface-control-default-on-information-subtle: var(--dk-surface-control-default-on-information-subtle-level-1);
  --dk-surface-control-hover-on-information-subtle: var(--dk-surface-control-hover-on-information-subtle-level-1);
  --dk-surface-control-active-on-information-subtle: var(--dk-surface-control-active-on-information-subtle-level-1);
  --dk-surface-control-disabled-on-information-subtle: var(--dk-surface-control-disabled-on-information-subtle-level-1);
  --dk-border-control-default-on-information-subtle: var(--dk-border-control-default-on-information-subtle-level-1);
  --dk-border-control-hover-on-information-subtle: var(--dk-border-control-hover-on-information-subtle-level-1);
  --dk-border-control-active-on-information-subtle: var(--dk-border-control-active-on-information-subtle-level-1);
  --dk-icon-control-default-on-information-subtle: var(--dk-icon-control-default-on-information-subtle-level-1);
  --dk-icon-control-hover-on-information-subtle: var(--dk-icon-control-hover-on-information-subtle-level-1);
  --dk-icon-control-active-on-information-subtle: var(--dk-icon-control-active-on-information-subtle-level-1);
  --dk-icon-control-disabled-on-information-subtle: var(--dk-icon-control-disabled-on-information-subtle-level-1);
  --dk-text-control-default-on-information-subtle: var(--dk-text-control-default-on-information-subtle-level-1);
  --dk-text-control-hover-on-information-subtle: var(--dk-text-control-hover-on-information-subtle-level-1);
  --dk-text-control-active-on-information-subtle: var(--dk-text-control-active-on-information-subtle-level-1);
  --dk-text-control-disabled-on-information-subtle: var(--dk-text-control-disabled-on-information-subtle-level-1);
}
[data-theme="dark"] [data-tone="inverse"][data-surface="1"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"][data-surface="1"] {
  --dk-surface-control-default-on-primary-subtle: var(--dk-surface-control-default-on-primary-subtle-level-1);
  --dk-surface-control-hover-on-primary-subtle: var(--dk-surface-control-hover-on-primary-subtle-level-1);
  --dk-surface-control-active-on-primary-subtle: var(--dk-surface-control-active-on-primary-subtle-level-1);
  --dk-surface-control-disabled-on-primary-subtle: var(--dk-surface-control-disabled-on-primary-subtle-level-1);
  --dk-border-control-default-on-primary-subtle: var(--dk-border-control-default-on-primary-subtle-level-1);
  --dk-border-control-hover-on-primary-subtle: var(--dk-border-control-hover-on-primary-subtle-level-1);
  --dk-border-control-active-on-primary-subtle: var(--dk-border-control-active-on-primary-subtle-level-1);
  --dk-icon-control-default-on-primary-subtle: var(--dk-icon-control-default-on-primary-subtle-level-1);
  --dk-icon-control-hover-on-primary-subtle: var(--dk-icon-control-hover-on-primary-subtle-level-1);
  --dk-icon-control-active-on-primary-subtle: var(--dk-icon-control-active-on-primary-subtle-level-1);
  --dk-icon-control-disabled-on-primary-subtle: var(--dk-icon-control-disabled-on-primary-subtle-level-1);
  --dk-text-control-default-on-primary-subtle: var(--dk-text-control-default-on-primary-subtle-level-1);
  --dk-text-control-hover-on-primary-subtle: var(--dk-text-control-hover-on-primary-subtle-level-1);
  --dk-text-control-active-on-primary-subtle: var(--dk-text-control-active-on-primary-subtle-level-1);
  --dk-text-control-disabled-on-primary-subtle: var(--dk-text-control-disabled-on-primary-subtle-level-1);
  --dk-surface-control-default-on-success-subtle: var(--dk-surface-control-default-on-success-subtle-level-1);
  --dk-surface-control-hover-on-success-subtle: var(--dk-surface-control-hover-on-success-subtle-level-1);
  --dk-surface-control-active-on-success-subtle: var(--dk-surface-control-active-on-success-subtle-level-1);
  --dk-surface-control-disabled-on-success-subtle: var(--dk-surface-control-disabled-on-success-subtle-level-1);
  --dk-border-control-default-on-success-subtle: var(--dk-border-control-default-on-success-subtle-level-1);
  --dk-border-control-hover-on-success-subtle: var(--dk-border-control-hover-on-success-subtle-level-1);
  --dk-border-control-active-on-success-subtle: var(--dk-border-control-active-on-success-subtle-level-1);
  --dk-icon-control-default-on-success-subtle: var(--dk-icon-control-default-on-success-subtle-level-1);
  --dk-icon-control-hover-on-success-subtle: var(--dk-icon-control-hover-on-success-subtle-level-1);
  --dk-icon-control-active-on-success-subtle: var(--dk-icon-control-active-on-success-subtle-level-1);
  --dk-icon-control-disabled-on-success-subtle: var(--dk-icon-control-disabled-on-success-subtle-level-1);
  --dk-text-control-default-on-success-subtle: var(--dk-text-control-default-on-success-subtle-level-1);
  --dk-text-control-hover-on-success-subtle: var(--dk-text-control-hover-on-success-subtle-level-1);
  --dk-text-control-active-on-success-subtle: var(--dk-text-control-active-on-success-subtle-level-1);
  --dk-text-control-disabled-on-success-subtle: var(--dk-text-control-disabled-on-success-subtle-level-1);
  --dk-surface-control-default-on-error-subtle: var(--dk-surface-control-default-on-error-subtle-level-1);
  --dk-surface-control-hover-on-error-subtle: var(--dk-surface-control-hover-on-error-subtle-level-1);
  --dk-surface-control-active-on-error-subtle: var(--dk-surface-control-active-on-error-subtle-level-1);
  --dk-surface-control-disabled-on-error-subtle: var(--dk-surface-control-disabled-on-error-subtle-level-1);
  --dk-border-control-default-on-error-subtle: var(--dk-border-control-default-on-error-subtle-level-1);
  --dk-border-control-hover-on-error-subtle: var(--dk-border-control-hover-on-error-subtle-level-1);
  --dk-border-control-active-on-error-subtle: var(--dk-border-control-active-on-error-subtle-level-1);
  --dk-icon-control-default-on-error-subtle: var(--dk-icon-control-default-on-error-subtle-level-1);
  --dk-icon-control-hover-on-error-subtle: var(--dk-icon-control-hover-on-error-subtle-level-1);
  --dk-icon-control-active-on-error-subtle: var(--dk-icon-control-active-on-error-subtle-level-1);
  --dk-icon-control-disabled-on-error-subtle: var(--dk-icon-control-disabled-on-error-subtle-level-1);
  --dk-text-control-default-on-error-subtle: var(--dk-text-control-default-on-error-subtle-level-1);
  --dk-text-control-hover-on-error-subtle: var(--dk-text-control-hover-on-error-subtle-level-1);
  --dk-text-control-active-on-error-subtle: var(--dk-text-control-active-on-error-subtle-level-1);
  --dk-text-control-disabled-on-error-subtle: var(--dk-text-control-disabled-on-error-subtle-level-1);
  --dk-surface-control-default-on-warning-subtle: var(--dk-surface-control-default-on-warning-subtle-level-1);
  --dk-surface-control-hover-on-warning-subtle: var(--dk-surface-control-hover-on-warning-subtle-level-1);
  --dk-surface-control-active-on-warning-subtle: var(--dk-surface-control-active-on-warning-subtle-level-1);
  --dk-surface-control-disabled-on-warning-subtle: var(--dk-surface-control-disabled-on-warning-subtle-level-1);
  --dk-border-control-default-on-warning-subtle: var(--dk-border-control-default-on-warning-subtle-level-1);
  --dk-border-control-hover-on-warning-subtle: var(--dk-border-control-hover-on-warning-subtle-level-1);
  --dk-border-control-active-on-warning-subtle: var(--dk-border-control-active-on-warning-subtle-level-1);
  --dk-icon-control-default-on-warning-subtle: var(--dk-icon-control-default-on-warning-subtle-level-1);
  --dk-icon-control-hover-on-warning-subtle: var(--dk-icon-control-hover-on-warning-subtle-level-1);
  --dk-icon-control-active-on-warning-subtle: var(--dk-icon-control-active-on-warning-subtle-level-1);
  --dk-icon-control-disabled-on-warning-subtle: var(--dk-icon-control-disabled-on-warning-subtle-level-1);
  --dk-text-control-default-on-warning-subtle: var(--dk-text-control-default-on-warning-subtle-level-1);
  --dk-text-control-hover-on-warning-subtle: var(--dk-text-control-hover-on-warning-subtle-level-1);
  --dk-text-control-active-on-warning-subtle: var(--dk-text-control-active-on-warning-subtle-level-1);
  --dk-text-control-disabled-on-warning-subtle: var(--dk-text-control-disabled-on-warning-subtle-level-1);
  --dk-surface-control-default-on-information-subtle: var(--dk-surface-control-default-on-information-subtle-level-1);
  --dk-surface-control-hover-on-information-subtle: var(--dk-surface-control-hover-on-information-subtle-level-1);
  --dk-surface-control-active-on-information-subtle: var(--dk-surface-control-active-on-information-subtle-level-1);
  --dk-surface-control-disabled-on-information-subtle: var(--dk-surface-control-disabled-on-information-subtle-level-1);
  --dk-border-control-default-on-information-subtle: var(--dk-border-control-default-on-information-subtle-level-1);
  --dk-border-control-hover-on-information-subtle: var(--dk-border-control-hover-on-information-subtle-level-1);
  --dk-border-control-active-on-information-subtle: var(--dk-border-control-active-on-information-subtle-level-1);
  --dk-icon-control-default-on-information-subtle: var(--dk-icon-control-default-on-information-subtle-level-1);
  --dk-icon-control-hover-on-information-subtle: var(--dk-icon-control-hover-on-information-subtle-level-1);
  --dk-icon-control-active-on-information-subtle: var(--dk-icon-control-active-on-information-subtle-level-1);
  --dk-icon-control-disabled-on-information-subtle: var(--dk-icon-control-disabled-on-information-subtle-level-1);
  --dk-text-control-default-on-information-subtle: var(--dk-text-control-default-on-information-subtle-level-1);
  --dk-text-control-hover-on-information-subtle: var(--dk-text-control-hover-on-information-subtle-level-1);
  --dk-text-control-active-on-information-subtle: var(--dk-text-control-active-on-information-subtle-level-1);
  --dk-text-control-disabled-on-information-subtle: var(--dk-text-control-disabled-on-information-subtle-level-1);
}
[data-theme="dark"][data-tone="inverse"][data-surface="below"],
[data-theme="dark"] [data-tone="inverse"][data-surface="below"]:not([data-theme]):where(:not(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *))) {
  --dk-surface-control-default-on-primary-subtle: var(--dk-surface-control-default-on-primary-subtle-level-1);
  --dk-surface-control-hover-on-primary-subtle: var(--dk-surface-control-hover-on-primary-subtle-level-1);
  --dk-surface-control-active-on-primary-subtle: var(--dk-surface-control-active-on-primary-subtle-level-1);
  --dk-surface-control-disabled-on-primary-subtle: var(--dk-surface-control-disabled-on-primary-subtle-level-1);
  --dk-border-control-default-on-primary-subtle: var(--dk-border-control-default-on-primary-subtle-level-1);
  --dk-border-control-hover-on-primary-subtle: var(--dk-border-control-hover-on-primary-subtle-level-1);
  --dk-border-control-active-on-primary-subtle: var(--dk-border-control-active-on-primary-subtle-level-1);
  --dk-icon-control-default-on-primary-subtle: var(--dk-icon-control-default-on-primary-subtle-level-1);
  --dk-icon-control-hover-on-primary-subtle: var(--dk-icon-control-hover-on-primary-subtle-level-1);
  --dk-icon-control-active-on-primary-subtle: var(--dk-icon-control-active-on-primary-subtle-level-1);
  --dk-icon-control-disabled-on-primary-subtle: var(--dk-icon-control-disabled-on-primary-subtle-level-1);
  --dk-text-control-default-on-primary-subtle: var(--dk-text-control-default-on-primary-subtle-level-1);
  --dk-text-control-hover-on-primary-subtle: var(--dk-text-control-hover-on-primary-subtle-level-1);
  --dk-text-control-active-on-primary-subtle: var(--dk-text-control-active-on-primary-subtle-level-1);
  --dk-text-control-disabled-on-primary-subtle: var(--dk-text-control-disabled-on-primary-subtle-level-1);
  --dk-surface-control-default-on-success-subtle: var(--dk-surface-control-default-on-success-subtle-level-1);
  --dk-surface-control-hover-on-success-subtle: var(--dk-surface-control-hover-on-success-subtle-level-1);
  --dk-surface-control-active-on-success-subtle: var(--dk-surface-control-active-on-success-subtle-level-1);
  --dk-surface-control-disabled-on-success-subtle: var(--dk-surface-control-disabled-on-success-subtle-level-1);
  --dk-border-control-default-on-success-subtle: var(--dk-border-control-default-on-success-subtle-level-1);
  --dk-border-control-hover-on-success-subtle: var(--dk-border-control-hover-on-success-subtle-level-1);
  --dk-border-control-active-on-success-subtle: var(--dk-border-control-active-on-success-subtle-level-1);
  --dk-icon-control-default-on-success-subtle: var(--dk-icon-control-default-on-success-subtle-level-1);
  --dk-icon-control-hover-on-success-subtle: var(--dk-icon-control-hover-on-success-subtle-level-1);
  --dk-icon-control-active-on-success-subtle: var(--dk-icon-control-active-on-success-subtle-level-1);
  --dk-icon-control-disabled-on-success-subtle: var(--dk-icon-control-disabled-on-success-subtle-level-1);
  --dk-text-control-default-on-success-subtle: var(--dk-text-control-default-on-success-subtle-level-1);
  --dk-text-control-hover-on-success-subtle: var(--dk-text-control-hover-on-success-subtle-level-1);
  --dk-text-control-active-on-success-subtle: var(--dk-text-control-active-on-success-subtle-level-1);
  --dk-text-control-disabled-on-success-subtle: var(--dk-text-control-disabled-on-success-subtle-level-1);
  --dk-surface-control-default-on-error-subtle: var(--dk-surface-control-default-on-error-subtle-level-1);
  --dk-surface-control-hover-on-error-subtle: var(--dk-surface-control-hover-on-error-subtle-level-1);
  --dk-surface-control-active-on-error-subtle: var(--dk-surface-control-active-on-error-subtle-level-1);
  --dk-surface-control-disabled-on-error-subtle: var(--dk-surface-control-disabled-on-error-subtle-level-1);
  --dk-border-control-default-on-error-subtle: var(--dk-border-control-default-on-error-subtle-level-1);
  --dk-border-control-hover-on-error-subtle: var(--dk-border-control-hover-on-error-subtle-level-1);
  --dk-border-control-active-on-error-subtle: var(--dk-border-control-active-on-error-subtle-level-1);
  --dk-icon-control-default-on-error-subtle: var(--dk-icon-control-default-on-error-subtle-level-1);
  --dk-icon-control-hover-on-error-subtle: var(--dk-icon-control-hover-on-error-subtle-level-1);
  --dk-icon-control-active-on-error-subtle: var(--dk-icon-control-active-on-error-subtle-level-1);
  --dk-icon-control-disabled-on-error-subtle: var(--dk-icon-control-disabled-on-error-subtle-level-1);
  --dk-text-control-default-on-error-subtle: var(--dk-text-control-default-on-error-subtle-level-1);
  --dk-text-control-hover-on-error-subtle: var(--dk-text-control-hover-on-error-subtle-level-1);
  --dk-text-control-active-on-error-subtle: var(--dk-text-control-active-on-error-subtle-level-1);
  --dk-text-control-disabled-on-error-subtle: var(--dk-text-control-disabled-on-error-subtle-level-1);
  --dk-surface-control-default-on-warning-subtle: var(--dk-surface-control-default-on-warning-subtle-level-1);
  --dk-surface-control-hover-on-warning-subtle: var(--dk-surface-control-hover-on-warning-subtle-level-1);
  --dk-surface-control-active-on-warning-subtle: var(--dk-surface-control-active-on-warning-subtle-level-1);
  --dk-surface-control-disabled-on-warning-subtle: var(--dk-surface-control-disabled-on-warning-subtle-level-1);
  --dk-border-control-default-on-warning-subtle: var(--dk-border-control-default-on-warning-subtle-level-1);
  --dk-border-control-hover-on-warning-subtle: var(--dk-border-control-hover-on-warning-subtle-level-1);
  --dk-border-control-active-on-warning-subtle: var(--dk-border-control-active-on-warning-subtle-level-1);
  --dk-icon-control-default-on-warning-subtle: var(--dk-icon-control-default-on-warning-subtle-level-1);
  --dk-icon-control-hover-on-warning-subtle: var(--dk-icon-control-hover-on-warning-subtle-level-1);
  --dk-icon-control-active-on-warning-subtle: var(--dk-icon-control-active-on-warning-subtle-level-1);
  --dk-icon-control-disabled-on-warning-subtle: var(--dk-icon-control-disabled-on-warning-subtle-level-1);
  --dk-text-control-default-on-warning-subtle: var(--dk-text-control-default-on-warning-subtle-level-1);
  --dk-text-control-hover-on-warning-subtle: var(--dk-text-control-hover-on-warning-subtle-level-1);
  --dk-text-control-active-on-warning-subtle: var(--dk-text-control-active-on-warning-subtle-level-1);
  --dk-text-control-disabled-on-warning-subtle: var(--dk-text-control-disabled-on-warning-subtle-level-1);
  --dk-surface-control-default-on-information-subtle: var(--dk-surface-control-default-on-information-subtle-level-1);
  --dk-surface-control-hover-on-information-subtle: var(--dk-surface-control-hover-on-information-subtle-level-1);
  --dk-surface-control-active-on-information-subtle: var(--dk-surface-control-active-on-information-subtle-level-1);
  --dk-surface-control-disabled-on-information-subtle: var(--dk-surface-control-disabled-on-information-subtle-level-1);
  --dk-border-control-default-on-information-subtle: var(--dk-border-control-default-on-information-subtle-level-1);
  --dk-border-control-hover-on-information-subtle: var(--dk-border-control-hover-on-information-subtle-level-1);
  --dk-border-control-active-on-information-subtle: var(--dk-border-control-active-on-information-subtle-level-1);
  --dk-icon-control-default-on-information-subtle: var(--dk-icon-control-default-on-information-subtle-level-1);
  --dk-icon-control-hover-on-information-subtle: var(--dk-icon-control-hover-on-information-subtle-level-1);
  --dk-icon-control-active-on-information-subtle: var(--dk-icon-control-active-on-information-subtle-level-1);
  --dk-icon-control-disabled-on-information-subtle: var(--dk-icon-control-disabled-on-information-subtle-level-1);
  --dk-text-control-default-on-information-subtle: var(--dk-text-control-default-on-information-subtle-level-1);
  --dk-text-control-hover-on-information-subtle: var(--dk-text-control-hover-on-information-subtle-level-1);
  --dk-text-control-active-on-information-subtle: var(--dk-text-control-active-on-information-subtle-level-1);
  --dk-text-control-disabled-on-information-subtle: var(--dk-text-control-disabled-on-information-subtle-level-1);
}
[data-theme="light"] [data-tone="inverse"][data-surface="2"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"][data-surface="2"] {
  --dk-surface-control-default-on-primary-subtle: var(--dk-surface-control-default-on-primary-subtle-level-2);
  --dk-surface-control-hover-on-primary-subtle: var(--dk-surface-control-hover-on-primary-subtle-level-2);
  --dk-surface-control-active-on-primary-subtle: var(--dk-surface-control-active-on-primary-subtle-level-2);
  --dk-surface-control-disabled-on-primary-subtle: var(--dk-surface-control-disabled-on-primary-subtle-level-2);
  --dk-border-control-default-on-primary-subtle: var(--dk-border-control-default-on-primary-subtle-level-2);
  --dk-border-control-hover-on-primary-subtle: var(--dk-border-control-hover-on-primary-subtle-level-2);
  --dk-border-control-active-on-primary-subtle: var(--dk-border-control-active-on-primary-subtle-level-2);
  --dk-icon-control-default-on-primary-subtle: var(--dk-icon-control-default-on-primary-subtle-level-2);
  --dk-icon-control-hover-on-primary-subtle: var(--dk-icon-control-hover-on-primary-subtle-level-2);
  --dk-icon-control-active-on-primary-subtle: var(--dk-icon-control-active-on-primary-subtle-level-2);
  --dk-icon-control-disabled-on-primary-subtle: var(--dk-icon-control-disabled-on-primary-subtle-level-2);
  --dk-text-control-default-on-primary-subtle: var(--dk-text-control-default-on-primary-subtle-level-2);
  --dk-text-control-hover-on-primary-subtle: var(--dk-text-control-hover-on-primary-subtle-level-2);
  --dk-text-control-active-on-primary-subtle: var(--dk-text-control-active-on-primary-subtle-level-2);
  --dk-text-control-disabled-on-primary-subtle: var(--dk-text-control-disabled-on-primary-subtle-level-2);
  --dk-surface-control-default-on-success-subtle: var(--dk-surface-control-default-on-success-subtle-level-2);
  --dk-surface-control-hover-on-success-subtle: var(--dk-surface-control-hover-on-success-subtle-level-2);
  --dk-surface-control-active-on-success-subtle: var(--dk-surface-control-active-on-success-subtle-level-2);
  --dk-surface-control-disabled-on-success-subtle: var(--dk-surface-control-disabled-on-success-subtle-level-2);
  --dk-border-control-default-on-success-subtle: var(--dk-border-control-default-on-success-subtle-level-2);
  --dk-border-control-hover-on-success-subtle: var(--dk-border-control-hover-on-success-subtle-level-2);
  --dk-border-control-active-on-success-subtle: var(--dk-border-control-active-on-success-subtle-level-2);
  --dk-icon-control-default-on-success-subtle: var(--dk-icon-control-default-on-success-subtle-level-2);
  --dk-icon-control-hover-on-success-subtle: var(--dk-icon-control-hover-on-success-subtle-level-2);
  --dk-icon-control-active-on-success-subtle: var(--dk-icon-control-active-on-success-subtle-level-2);
  --dk-icon-control-disabled-on-success-subtle: var(--dk-icon-control-disabled-on-success-subtle-level-2);
  --dk-text-control-default-on-success-subtle: var(--dk-text-control-default-on-success-subtle-level-2);
  --dk-text-control-hover-on-success-subtle: var(--dk-text-control-hover-on-success-subtle-level-2);
  --dk-text-control-active-on-success-subtle: var(--dk-text-control-active-on-success-subtle-level-2);
  --dk-text-control-disabled-on-success-subtle: var(--dk-text-control-disabled-on-success-subtle-level-2);
  --dk-surface-control-default-on-error-subtle: var(--dk-surface-control-default-on-error-subtle-level-2);
  --dk-surface-control-hover-on-error-subtle: var(--dk-surface-control-hover-on-error-subtle-level-2);
  --dk-surface-control-active-on-error-subtle: var(--dk-surface-control-active-on-error-subtle-level-2);
  --dk-surface-control-disabled-on-error-subtle: var(--dk-surface-control-disabled-on-error-subtle-level-2);
  --dk-border-control-default-on-error-subtle: var(--dk-border-control-default-on-error-subtle-level-2);
  --dk-border-control-hover-on-error-subtle: var(--dk-border-control-hover-on-error-subtle-level-2);
  --dk-border-control-active-on-error-subtle: var(--dk-border-control-active-on-error-subtle-level-2);
  --dk-icon-control-default-on-error-subtle: var(--dk-icon-control-default-on-error-subtle-level-2);
  --dk-icon-control-hover-on-error-subtle: var(--dk-icon-control-hover-on-error-subtle-level-2);
  --dk-icon-control-active-on-error-subtle: var(--dk-icon-control-active-on-error-subtle-level-2);
  --dk-icon-control-disabled-on-error-subtle: var(--dk-icon-control-disabled-on-error-subtle-level-2);
  --dk-text-control-default-on-error-subtle: var(--dk-text-control-default-on-error-subtle-level-2);
  --dk-text-control-hover-on-error-subtle: var(--dk-text-control-hover-on-error-subtle-level-2);
  --dk-text-control-active-on-error-subtle: var(--dk-text-control-active-on-error-subtle-level-2);
  --dk-text-control-disabled-on-error-subtle: var(--dk-text-control-disabled-on-error-subtle-level-2);
  --dk-surface-control-default-on-warning-subtle: var(--dk-surface-control-default-on-warning-subtle-level-2);
  --dk-surface-control-hover-on-warning-subtle: var(--dk-surface-control-hover-on-warning-subtle-level-2);
  --dk-surface-control-active-on-warning-subtle: var(--dk-surface-control-active-on-warning-subtle-level-2);
  --dk-surface-control-disabled-on-warning-subtle: var(--dk-surface-control-disabled-on-warning-subtle-level-2);
  --dk-border-control-default-on-warning-subtle: var(--dk-border-control-default-on-warning-subtle-level-2);
  --dk-border-control-hover-on-warning-subtle: var(--dk-border-control-hover-on-warning-subtle-level-2);
  --dk-border-control-active-on-warning-subtle: var(--dk-border-control-active-on-warning-subtle-level-2);
  --dk-icon-control-default-on-warning-subtle: var(--dk-icon-control-default-on-warning-subtle-level-2);
  --dk-icon-control-hover-on-warning-subtle: var(--dk-icon-control-hover-on-warning-subtle-level-2);
  --dk-icon-control-active-on-warning-subtle: var(--dk-icon-control-active-on-warning-subtle-level-2);
  --dk-icon-control-disabled-on-warning-subtle: var(--dk-icon-control-disabled-on-warning-subtle-level-2);
  --dk-text-control-default-on-warning-subtle: var(--dk-text-control-default-on-warning-subtle-level-2);
  --dk-text-control-hover-on-warning-subtle: var(--dk-text-control-hover-on-warning-subtle-level-2);
  --dk-text-control-active-on-warning-subtle: var(--dk-text-control-active-on-warning-subtle-level-2);
  --dk-text-control-disabled-on-warning-subtle: var(--dk-text-control-disabled-on-warning-subtle-level-2);
  --dk-surface-control-default-on-information-subtle: var(--dk-surface-control-default-on-information-subtle-level-2);
  --dk-surface-control-hover-on-information-subtle: var(--dk-surface-control-hover-on-information-subtle-level-2);
  --dk-surface-control-active-on-information-subtle: var(--dk-surface-control-active-on-information-subtle-level-2);
  --dk-surface-control-disabled-on-information-subtle: var(--dk-surface-control-disabled-on-information-subtle-level-2);
  --dk-border-control-default-on-information-subtle: var(--dk-border-control-default-on-information-subtle-level-2);
  --dk-border-control-hover-on-information-subtle: var(--dk-border-control-hover-on-information-subtle-level-2);
  --dk-border-control-active-on-information-subtle: var(--dk-border-control-active-on-information-subtle-level-2);
  --dk-icon-control-default-on-information-subtle: var(--dk-icon-control-default-on-information-subtle-level-2);
  --dk-icon-control-hover-on-information-subtle: var(--dk-icon-control-hover-on-information-subtle-level-2);
  --dk-icon-control-active-on-information-subtle: var(--dk-icon-control-active-on-information-subtle-level-2);
  --dk-icon-control-disabled-on-information-subtle: var(--dk-icon-control-disabled-on-information-subtle-level-2);
  --dk-text-control-default-on-information-subtle: var(--dk-text-control-default-on-information-subtle-level-2);
  --dk-text-control-hover-on-information-subtle: var(--dk-text-control-hover-on-information-subtle-level-2);
  --dk-text-control-active-on-information-subtle: var(--dk-text-control-active-on-information-subtle-level-2);
  --dk-text-control-disabled-on-information-subtle: var(--dk-text-control-disabled-on-information-subtle-level-2);
}
[data-theme="light"] [data-tone="inverse"][data-surface="below"]:not([data-theme]):where(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *)) {
  --dk-surface-control-default-on-primary-subtle: var(--dk-surface-control-default-on-primary-subtle-level-2);
  --dk-surface-control-hover-on-primary-subtle: var(--dk-surface-control-hover-on-primary-subtle-level-2);
  --dk-surface-control-active-on-primary-subtle: var(--dk-surface-control-active-on-primary-subtle-level-2);
  --dk-surface-control-disabled-on-primary-subtle: var(--dk-surface-control-disabled-on-primary-subtle-level-2);
  --dk-border-control-default-on-primary-subtle: var(--dk-border-control-default-on-primary-subtle-level-2);
  --dk-border-control-hover-on-primary-subtle: var(--dk-border-control-hover-on-primary-subtle-level-2);
  --dk-border-control-active-on-primary-subtle: var(--dk-border-control-active-on-primary-subtle-level-2);
  --dk-icon-control-default-on-primary-subtle: var(--dk-icon-control-default-on-primary-subtle-level-2);
  --dk-icon-control-hover-on-primary-subtle: var(--dk-icon-control-hover-on-primary-subtle-level-2);
  --dk-icon-control-active-on-primary-subtle: var(--dk-icon-control-active-on-primary-subtle-level-2);
  --dk-icon-control-disabled-on-primary-subtle: var(--dk-icon-control-disabled-on-primary-subtle-level-2);
  --dk-text-control-default-on-primary-subtle: var(--dk-text-control-default-on-primary-subtle-level-2);
  --dk-text-control-hover-on-primary-subtle: var(--dk-text-control-hover-on-primary-subtle-level-2);
  --dk-text-control-active-on-primary-subtle: var(--dk-text-control-active-on-primary-subtle-level-2);
  --dk-text-control-disabled-on-primary-subtle: var(--dk-text-control-disabled-on-primary-subtle-level-2);
  --dk-surface-control-default-on-success-subtle: var(--dk-surface-control-default-on-success-subtle-level-2);
  --dk-surface-control-hover-on-success-subtle: var(--dk-surface-control-hover-on-success-subtle-level-2);
  --dk-surface-control-active-on-success-subtle: var(--dk-surface-control-active-on-success-subtle-level-2);
  --dk-surface-control-disabled-on-success-subtle: var(--dk-surface-control-disabled-on-success-subtle-level-2);
  --dk-border-control-default-on-success-subtle: var(--dk-border-control-default-on-success-subtle-level-2);
  --dk-border-control-hover-on-success-subtle: var(--dk-border-control-hover-on-success-subtle-level-2);
  --dk-border-control-active-on-success-subtle: var(--dk-border-control-active-on-success-subtle-level-2);
  --dk-icon-control-default-on-success-subtle: var(--dk-icon-control-default-on-success-subtle-level-2);
  --dk-icon-control-hover-on-success-subtle: var(--dk-icon-control-hover-on-success-subtle-level-2);
  --dk-icon-control-active-on-success-subtle: var(--dk-icon-control-active-on-success-subtle-level-2);
  --dk-icon-control-disabled-on-success-subtle: var(--dk-icon-control-disabled-on-success-subtle-level-2);
  --dk-text-control-default-on-success-subtle: var(--dk-text-control-default-on-success-subtle-level-2);
  --dk-text-control-hover-on-success-subtle: var(--dk-text-control-hover-on-success-subtle-level-2);
  --dk-text-control-active-on-success-subtle: var(--dk-text-control-active-on-success-subtle-level-2);
  --dk-text-control-disabled-on-success-subtle: var(--dk-text-control-disabled-on-success-subtle-level-2);
  --dk-surface-control-default-on-error-subtle: var(--dk-surface-control-default-on-error-subtle-level-2);
  --dk-surface-control-hover-on-error-subtle: var(--dk-surface-control-hover-on-error-subtle-level-2);
  --dk-surface-control-active-on-error-subtle: var(--dk-surface-control-active-on-error-subtle-level-2);
  --dk-surface-control-disabled-on-error-subtle: var(--dk-surface-control-disabled-on-error-subtle-level-2);
  --dk-border-control-default-on-error-subtle: var(--dk-border-control-default-on-error-subtle-level-2);
  --dk-border-control-hover-on-error-subtle: var(--dk-border-control-hover-on-error-subtle-level-2);
  --dk-border-control-active-on-error-subtle: var(--dk-border-control-active-on-error-subtle-level-2);
  --dk-icon-control-default-on-error-subtle: var(--dk-icon-control-default-on-error-subtle-level-2);
  --dk-icon-control-hover-on-error-subtle: var(--dk-icon-control-hover-on-error-subtle-level-2);
  --dk-icon-control-active-on-error-subtle: var(--dk-icon-control-active-on-error-subtle-level-2);
  --dk-icon-control-disabled-on-error-subtle: var(--dk-icon-control-disabled-on-error-subtle-level-2);
  --dk-text-control-default-on-error-subtle: var(--dk-text-control-default-on-error-subtle-level-2);
  --dk-text-control-hover-on-error-subtle: var(--dk-text-control-hover-on-error-subtle-level-2);
  --dk-text-control-active-on-error-subtle: var(--dk-text-control-active-on-error-subtle-level-2);
  --dk-text-control-disabled-on-error-subtle: var(--dk-text-control-disabled-on-error-subtle-level-2);
  --dk-surface-control-default-on-warning-subtle: var(--dk-surface-control-default-on-warning-subtle-level-2);
  --dk-surface-control-hover-on-warning-subtle: var(--dk-surface-control-hover-on-warning-subtle-level-2);
  --dk-surface-control-active-on-warning-subtle: var(--dk-surface-control-active-on-warning-subtle-level-2);
  --dk-surface-control-disabled-on-warning-subtle: var(--dk-surface-control-disabled-on-warning-subtle-level-2);
  --dk-border-control-default-on-warning-subtle: var(--dk-border-control-default-on-warning-subtle-level-2);
  --dk-border-control-hover-on-warning-subtle: var(--dk-border-control-hover-on-warning-subtle-level-2);
  --dk-border-control-active-on-warning-subtle: var(--dk-border-control-active-on-warning-subtle-level-2);
  --dk-icon-control-default-on-warning-subtle: var(--dk-icon-control-default-on-warning-subtle-level-2);
  --dk-icon-control-hover-on-warning-subtle: var(--dk-icon-control-hover-on-warning-subtle-level-2);
  --dk-icon-control-active-on-warning-subtle: var(--dk-icon-control-active-on-warning-subtle-level-2);
  --dk-icon-control-disabled-on-warning-subtle: var(--dk-icon-control-disabled-on-warning-subtle-level-2);
  --dk-text-control-default-on-warning-subtle: var(--dk-text-control-default-on-warning-subtle-level-2);
  --dk-text-control-hover-on-warning-subtle: var(--dk-text-control-hover-on-warning-subtle-level-2);
  --dk-text-control-active-on-warning-subtle: var(--dk-text-control-active-on-warning-subtle-level-2);
  --dk-text-control-disabled-on-warning-subtle: var(--dk-text-control-disabled-on-warning-subtle-level-2);
  --dk-surface-control-default-on-information-subtle: var(--dk-surface-control-default-on-information-subtle-level-2);
  --dk-surface-control-hover-on-information-subtle: var(--dk-surface-control-hover-on-information-subtle-level-2);
  --dk-surface-control-active-on-information-subtle: var(--dk-surface-control-active-on-information-subtle-level-2);
  --dk-surface-control-disabled-on-information-subtle: var(--dk-surface-control-disabled-on-information-subtle-level-2);
  --dk-border-control-default-on-information-subtle: var(--dk-border-control-default-on-information-subtle-level-2);
  --dk-border-control-hover-on-information-subtle: var(--dk-border-control-hover-on-information-subtle-level-2);
  --dk-border-control-active-on-information-subtle: var(--dk-border-control-active-on-information-subtle-level-2);
  --dk-icon-control-default-on-information-subtle: var(--dk-icon-control-default-on-information-subtle-level-2);
  --dk-icon-control-hover-on-information-subtle: var(--dk-icon-control-hover-on-information-subtle-level-2);
  --dk-icon-control-active-on-information-subtle: var(--dk-icon-control-active-on-information-subtle-level-2);
  --dk-icon-control-disabled-on-information-subtle: var(--dk-icon-control-disabled-on-information-subtle-level-2);
  --dk-text-control-default-on-information-subtle: var(--dk-text-control-default-on-information-subtle-level-2);
  --dk-text-control-hover-on-information-subtle: var(--dk-text-control-hover-on-information-subtle-level-2);
  --dk-text-control-active-on-information-subtle: var(--dk-text-control-active-on-information-subtle-level-2);
  --dk-text-control-disabled-on-information-subtle: var(--dk-text-control-disabled-on-information-subtle-level-2);
}
[data-theme="dark"] [data-tone="inverse"][data-surface="2"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"][data-surface="2"] {
  --dk-surface-control-default-on-primary-subtle: var(--dk-surface-control-default-on-primary-subtle-level-2);
  --dk-surface-control-hover-on-primary-subtle: var(--dk-surface-control-hover-on-primary-subtle-level-2);
  --dk-surface-control-active-on-primary-subtle: var(--dk-surface-control-active-on-primary-subtle-level-2);
  --dk-surface-control-disabled-on-primary-subtle: var(--dk-surface-control-disabled-on-primary-subtle-level-2);
  --dk-border-control-default-on-primary-subtle: var(--dk-border-control-default-on-primary-subtle-level-2);
  --dk-border-control-hover-on-primary-subtle: var(--dk-border-control-hover-on-primary-subtle-level-2);
  --dk-border-control-active-on-primary-subtle: var(--dk-border-control-active-on-primary-subtle-level-2);
  --dk-icon-control-default-on-primary-subtle: var(--dk-icon-control-default-on-primary-subtle-level-2);
  --dk-icon-control-hover-on-primary-subtle: var(--dk-icon-control-hover-on-primary-subtle-level-2);
  --dk-icon-control-active-on-primary-subtle: var(--dk-icon-control-active-on-primary-subtle-level-2);
  --dk-icon-control-disabled-on-primary-subtle: var(--dk-icon-control-disabled-on-primary-subtle-level-2);
  --dk-text-control-default-on-primary-subtle: var(--dk-text-control-default-on-primary-subtle-level-2);
  --dk-text-control-hover-on-primary-subtle: var(--dk-text-control-hover-on-primary-subtle-level-2);
  --dk-text-control-active-on-primary-subtle: var(--dk-text-control-active-on-primary-subtle-level-2);
  --dk-text-control-disabled-on-primary-subtle: var(--dk-text-control-disabled-on-primary-subtle-level-2);
  --dk-surface-control-default-on-success-subtle: var(--dk-surface-control-default-on-success-subtle-level-2);
  --dk-surface-control-hover-on-success-subtle: var(--dk-surface-control-hover-on-success-subtle-level-2);
  --dk-surface-control-active-on-success-subtle: var(--dk-surface-control-active-on-success-subtle-level-2);
  --dk-surface-control-disabled-on-success-subtle: var(--dk-surface-control-disabled-on-success-subtle-level-2);
  --dk-border-control-default-on-success-subtle: var(--dk-border-control-default-on-success-subtle-level-2);
  --dk-border-control-hover-on-success-subtle: var(--dk-border-control-hover-on-success-subtle-level-2);
  --dk-border-control-active-on-success-subtle: var(--dk-border-control-active-on-success-subtle-level-2);
  --dk-icon-control-default-on-success-subtle: var(--dk-icon-control-default-on-success-subtle-level-2);
  --dk-icon-control-hover-on-success-subtle: var(--dk-icon-control-hover-on-success-subtle-level-2);
  --dk-icon-control-active-on-success-subtle: var(--dk-icon-control-active-on-success-subtle-level-2);
  --dk-icon-control-disabled-on-success-subtle: var(--dk-icon-control-disabled-on-success-subtle-level-2);
  --dk-text-control-default-on-success-subtle: var(--dk-text-control-default-on-success-subtle-level-2);
  --dk-text-control-hover-on-success-subtle: var(--dk-text-control-hover-on-success-subtle-level-2);
  --dk-text-control-active-on-success-subtle: var(--dk-text-control-active-on-success-subtle-level-2);
  --dk-text-control-disabled-on-success-subtle: var(--dk-text-control-disabled-on-success-subtle-level-2);
  --dk-surface-control-default-on-error-subtle: var(--dk-surface-control-default-on-error-subtle-level-2);
  --dk-surface-control-hover-on-error-subtle: var(--dk-surface-control-hover-on-error-subtle-level-2);
  --dk-surface-control-active-on-error-subtle: var(--dk-surface-control-active-on-error-subtle-level-2);
  --dk-surface-control-disabled-on-error-subtle: var(--dk-surface-control-disabled-on-error-subtle-level-2);
  --dk-border-control-default-on-error-subtle: var(--dk-border-control-default-on-error-subtle-level-2);
  --dk-border-control-hover-on-error-subtle: var(--dk-border-control-hover-on-error-subtle-level-2);
  --dk-border-control-active-on-error-subtle: var(--dk-border-control-active-on-error-subtle-level-2);
  --dk-icon-control-default-on-error-subtle: var(--dk-icon-control-default-on-error-subtle-level-2);
  --dk-icon-control-hover-on-error-subtle: var(--dk-icon-control-hover-on-error-subtle-level-2);
  --dk-icon-control-active-on-error-subtle: var(--dk-icon-control-active-on-error-subtle-level-2);
  --dk-icon-control-disabled-on-error-subtle: var(--dk-icon-control-disabled-on-error-subtle-level-2);
  --dk-text-control-default-on-error-subtle: var(--dk-text-control-default-on-error-subtle-level-2);
  --dk-text-control-hover-on-error-subtle: var(--dk-text-control-hover-on-error-subtle-level-2);
  --dk-text-control-active-on-error-subtle: var(--dk-text-control-active-on-error-subtle-level-2);
  --dk-text-control-disabled-on-error-subtle: var(--dk-text-control-disabled-on-error-subtle-level-2);
  --dk-surface-control-default-on-warning-subtle: var(--dk-surface-control-default-on-warning-subtle-level-2);
  --dk-surface-control-hover-on-warning-subtle: var(--dk-surface-control-hover-on-warning-subtle-level-2);
  --dk-surface-control-active-on-warning-subtle: var(--dk-surface-control-active-on-warning-subtle-level-2);
  --dk-surface-control-disabled-on-warning-subtle: var(--dk-surface-control-disabled-on-warning-subtle-level-2);
  --dk-border-control-default-on-warning-subtle: var(--dk-border-control-default-on-warning-subtle-level-2);
  --dk-border-control-hover-on-warning-subtle: var(--dk-border-control-hover-on-warning-subtle-level-2);
  --dk-border-control-active-on-warning-subtle: var(--dk-border-control-active-on-warning-subtle-level-2);
  --dk-icon-control-default-on-warning-subtle: var(--dk-icon-control-default-on-warning-subtle-level-2);
  --dk-icon-control-hover-on-warning-subtle: var(--dk-icon-control-hover-on-warning-subtle-level-2);
  --dk-icon-control-active-on-warning-subtle: var(--dk-icon-control-active-on-warning-subtle-level-2);
  --dk-icon-control-disabled-on-warning-subtle: var(--dk-icon-control-disabled-on-warning-subtle-level-2);
  --dk-text-control-default-on-warning-subtle: var(--dk-text-control-default-on-warning-subtle-level-2);
  --dk-text-control-hover-on-warning-subtle: var(--dk-text-control-hover-on-warning-subtle-level-2);
  --dk-text-control-active-on-warning-subtle: var(--dk-text-control-active-on-warning-subtle-level-2);
  --dk-text-control-disabled-on-warning-subtle: var(--dk-text-control-disabled-on-warning-subtle-level-2);
  --dk-surface-control-default-on-information-subtle: var(--dk-surface-control-default-on-information-subtle-level-2);
  --dk-surface-control-hover-on-information-subtle: var(--dk-surface-control-hover-on-information-subtle-level-2);
  --dk-surface-control-active-on-information-subtle: var(--dk-surface-control-active-on-information-subtle-level-2);
  --dk-surface-control-disabled-on-information-subtle: var(--dk-surface-control-disabled-on-information-subtle-level-2);
  --dk-border-control-default-on-information-subtle: var(--dk-border-control-default-on-information-subtle-level-2);
  --dk-border-control-hover-on-information-subtle: var(--dk-border-control-hover-on-information-subtle-level-2);
  --dk-border-control-active-on-information-subtle: var(--dk-border-control-active-on-information-subtle-level-2);
  --dk-icon-control-default-on-information-subtle: var(--dk-icon-control-default-on-information-subtle-level-2);
  --dk-icon-control-hover-on-information-subtle: var(--dk-icon-control-hover-on-information-subtle-level-2);
  --dk-icon-control-active-on-information-subtle: var(--dk-icon-control-active-on-information-subtle-level-2);
  --dk-icon-control-disabled-on-information-subtle: var(--dk-icon-control-disabled-on-information-subtle-level-2);
  --dk-text-control-default-on-information-subtle: var(--dk-text-control-default-on-information-subtle-level-2);
  --dk-text-control-hover-on-information-subtle: var(--dk-text-control-hover-on-information-subtle-level-2);
  --dk-text-control-active-on-information-subtle: var(--dk-text-control-active-on-information-subtle-level-2);
  --dk-text-control-disabled-on-information-subtle: var(--dk-text-control-disabled-on-information-subtle-level-2);
}
[data-theme="dark"] [data-tone="inverse"][data-surface="below"]:not([data-theme]):where(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *)) {
  --dk-surface-control-default-on-primary-subtle: var(--dk-surface-control-default-on-primary-subtle-level-2);
  --dk-surface-control-hover-on-primary-subtle: var(--dk-surface-control-hover-on-primary-subtle-level-2);
  --dk-surface-control-active-on-primary-subtle: var(--dk-surface-control-active-on-primary-subtle-level-2);
  --dk-surface-control-disabled-on-primary-subtle: var(--dk-surface-control-disabled-on-primary-subtle-level-2);
  --dk-border-control-default-on-primary-subtle: var(--dk-border-control-default-on-primary-subtle-level-2);
  --dk-border-control-hover-on-primary-subtle: var(--dk-border-control-hover-on-primary-subtle-level-2);
  --dk-border-control-active-on-primary-subtle: var(--dk-border-control-active-on-primary-subtle-level-2);
  --dk-icon-control-default-on-primary-subtle: var(--dk-icon-control-default-on-primary-subtle-level-2);
  --dk-icon-control-hover-on-primary-subtle: var(--dk-icon-control-hover-on-primary-subtle-level-2);
  --dk-icon-control-active-on-primary-subtle: var(--dk-icon-control-active-on-primary-subtle-level-2);
  --dk-icon-control-disabled-on-primary-subtle: var(--dk-icon-control-disabled-on-primary-subtle-level-2);
  --dk-text-control-default-on-primary-subtle: var(--dk-text-control-default-on-primary-subtle-level-2);
  --dk-text-control-hover-on-primary-subtle: var(--dk-text-control-hover-on-primary-subtle-level-2);
  --dk-text-control-active-on-primary-subtle: var(--dk-text-control-active-on-primary-subtle-level-2);
  --dk-text-control-disabled-on-primary-subtle: var(--dk-text-control-disabled-on-primary-subtle-level-2);
  --dk-surface-control-default-on-success-subtle: var(--dk-surface-control-default-on-success-subtle-level-2);
  --dk-surface-control-hover-on-success-subtle: var(--dk-surface-control-hover-on-success-subtle-level-2);
  --dk-surface-control-active-on-success-subtle: var(--dk-surface-control-active-on-success-subtle-level-2);
  --dk-surface-control-disabled-on-success-subtle: var(--dk-surface-control-disabled-on-success-subtle-level-2);
  --dk-border-control-default-on-success-subtle: var(--dk-border-control-default-on-success-subtle-level-2);
  --dk-border-control-hover-on-success-subtle: var(--dk-border-control-hover-on-success-subtle-level-2);
  --dk-border-control-active-on-success-subtle: var(--dk-border-control-active-on-success-subtle-level-2);
  --dk-icon-control-default-on-success-subtle: var(--dk-icon-control-default-on-success-subtle-level-2);
  --dk-icon-control-hover-on-success-subtle: var(--dk-icon-control-hover-on-success-subtle-level-2);
  --dk-icon-control-active-on-success-subtle: var(--dk-icon-control-active-on-success-subtle-level-2);
  --dk-icon-control-disabled-on-success-subtle: var(--dk-icon-control-disabled-on-success-subtle-level-2);
  --dk-text-control-default-on-success-subtle: var(--dk-text-control-default-on-success-subtle-level-2);
  --dk-text-control-hover-on-success-subtle: var(--dk-text-control-hover-on-success-subtle-level-2);
  --dk-text-control-active-on-success-subtle: var(--dk-text-control-active-on-success-subtle-level-2);
  --dk-text-control-disabled-on-success-subtle: var(--dk-text-control-disabled-on-success-subtle-level-2);
  --dk-surface-control-default-on-error-subtle: var(--dk-surface-control-default-on-error-subtle-level-2);
  --dk-surface-control-hover-on-error-subtle: var(--dk-surface-control-hover-on-error-subtle-level-2);
  --dk-surface-control-active-on-error-subtle: var(--dk-surface-control-active-on-error-subtle-level-2);
  --dk-surface-control-disabled-on-error-subtle: var(--dk-surface-control-disabled-on-error-subtle-level-2);
  --dk-border-control-default-on-error-subtle: var(--dk-border-control-default-on-error-subtle-level-2);
  --dk-border-control-hover-on-error-subtle: var(--dk-border-control-hover-on-error-subtle-level-2);
  --dk-border-control-active-on-error-subtle: var(--dk-border-control-active-on-error-subtle-level-2);
  --dk-icon-control-default-on-error-subtle: var(--dk-icon-control-default-on-error-subtle-level-2);
  --dk-icon-control-hover-on-error-subtle: var(--dk-icon-control-hover-on-error-subtle-level-2);
  --dk-icon-control-active-on-error-subtle: var(--dk-icon-control-active-on-error-subtle-level-2);
  --dk-icon-control-disabled-on-error-subtle: var(--dk-icon-control-disabled-on-error-subtle-level-2);
  --dk-text-control-default-on-error-subtle: var(--dk-text-control-default-on-error-subtle-level-2);
  --dk-text-control-hover-on-error-subtle: var(--dk-text-control-hover-on-error-subtle-level-2);
  --dk-text-control-active-on-error-subtle: var(--dk-text-control-active-on-error-subtle-level-2);
  --dk-text-control-disabled-on-error-subtle: var(--dk-text-control-disabled-on-error-subtle-level-2);
  --dk-surface-control-default-on-warning-subtle: var(--dk-surface-control-default-on-warning-subtle-level-2);
  --dk-surface-control-hover-on-warning-subtle: var(--dk-surface-control-hover-on-warning-subtle-level-2);
  --dk-surface-control-active-on-warning-subtle: var(--dk-surface-control-active-on-warning-subtle-level-2);
  --dk-surface-control-disabled-on-warning-subtle: var(--dk-surface-control-disabled-on-warning-subtle-level-2);
  --dk-border-control-default-on-warning-subtle: var(--dk-border-control-default-on-warning-subtle-level-2);
  --dk-border-control-hover-on-warning-subtle: var(--dk-border-control-hover-on-warning-subtle-level-2);
  --dk-border-control-active-on-warning-subtle: var(--dk-border-control-active-on-warning-subtle-level-2);
  --dk-icon-control-default-on-warning-subtle: var(--dk-icon-control-default-on-warning-subtle-level-2);
  --dk-icon-control-hover-on-warning-subtle: var(--dk-icon-control-hover-on-warning-subtle-level-2);
  --dk-icon-control-active-on-warning-subtle: var(--dk-icon-control-active-on-warning-subtle-level-2);
  --dk-icon-control-disabled-on-warning-subtle: var(--dk-icon-control-disabled-on-warning-subtle-level-2);
  --dk-text-control-default-on-warning-subtle: var(--dk-text-control-default-on-warning-subtle-level-2);
  --dk-text-control-hover-on-warning-subtle: var(--dk-text-control-hover-on-warning-subtle-level-2);
  --dk-text-control-active-on-warning-subtle: var(--dk-text-control-active-on-warning-subtle-level-2);
  --dk-text-control-disabled-on-warning-subtle: var(--dk-text-control-disabled-on-warning-subtle-level-2);
  --dk-surface-control-default-on-information-subtle: var(--dk-surface-control-default-on-information-subtle-level-2);
  --dk-surface-control-hover-on-information-subtle: var(--dk-surface-control-hover-on-information-subtle-level-2);
  --dk-surface-control-active-on-information-subtle: var(--dk-surface-control-active-on-information-subtle-level-2);
  --dk-surface-control-disabled-on-information-subtle: var(--dk-surface-control-disabled-on-information-subtle-level-2);
  --dk-border-control-default-on-information-subtle: var(--dk-border-control-default-on-information-subtle-level-2);
  --dk-border-control-hover-on-information-subtle: var(--dk-border-control-hover-on-information-subtle-level-2);
  --dk-border-control-active-on-information-subtle: var(--dk-border-control-active-on-information-subtle-level-2);
  --dk-icon-control-default-on-information-subtle: var(--dk-icon-control-default-on-information-subtle-level-2);
  --dk-icon-control-hover-on-information-subtle: var(--dk-icon-control-hover-on-information-subtle-level-2);
  --dk-icon-control-active-on-information-subtle: var(--dk-icon-control-active-on-information-subtle-level-2);
  --dk-icon-control-disabled-on-information-subtle: var(--dk-icon-control-disabled-on-information-subtle-level-2);
  --dk-text-control-default-on-information-subtle: var(--dk-text-control-default-on-information-subtle-level-2);
  --dk-text-control-hover-on-information-subtle: var(--dk-text-control-hover-on-information-subtle-level-2);
  --dk-text-control-active-on-information-subtle: var(--dk-text-control-active-on-information-subtle-level-2);
  --dk-text-control-disabled-on-information-subtle: var(--dk-text-control-disabled-on-information-subtle-level-2);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-success-default: var(--dk-surface-primary-default);
  --dk-surface-success-hover: var(--dk-surface-primary-hover);
  --dk-surface-success-focus: var(--dk-surface-primary-focus);
  --dk-surface-success-subtle: var(--dk-surface-primary-subtle);
  --dk-surface-success-subtle-hover: var(--dk-surface-primary-subtle-hover);
  --dk-surface-success-subtle-focus: var(--dk-surface-primary-subtle-focus);
  --dk-border-success-default: var(--dk-border-primary-default);
  --dk-border-success-hover: var(--dk-border-primary-hover);
  --dk-border-success-focus: var(--dk-border-primary-focus);
  --dk-border-success-subtle: var(--dk-border-primary-subtle);
  --dk-border-success-subtle-hover: var(--dk-border-primary-subtle-hover);
  --dk-border-success-subtle-focus: var(--dk-border-primary-subtle-focus);
  --dk-border-success-hairline: var(--dk-border-primary-hairline);
  --dk-border-success-elevation: var(--dk-border-primary-elevation);
  --dk-border-success-elevation-hover: var(--dk-border-primary-elevation-hover);
  --dk-border-success-elevation-focus: var(--dk-border-primary-elevation-focus);
  --dk-text-success-default: var(--dk-text-primary-default);
  --dk-text-success-hover: var(--dk-text-primary-hover);
  --dk-text-success-active: var(--dk-text-primary-active);
  --dk-icon-success-active: var(--dk-icon-primary-active);
  --dk-text-success-on-subtle: var(--dk-text-primary-on-subtle);
  --dk-text-success-focus: var(--dk-text-primary-focus);
  --dk-text-success-subtle: var(--dk-text-primary-subtle);
  --dk-text-success-subtle-hover: var(--dk-text-primary-subtle-hover);
  --dk-text-success-subtle-focus: var(--dk-text-primary-subtle-focus);
  --dk-text-success-on-color: var(--dk-text-primary-on-color);
  --dk-text-success-on-color-hover: var(--dk-text-primary-on-color-hover);
  --dk-text-success-on-color-focus: var(--dk-text-primary-on-color-focus);
  --dk-text-success-body: var(--dk-text-primary-default);
  --dk-icon-success-default: var(--dk-icon-primary-default);
  --dk-icon-success-hover: var(--dk-icon-primary-hover);
  --dk-icon-success-focus: var(--dk-icon-primary-focus);
  --dk-icon-success-subtle: var(--dk-icon-primary-subtle);
  --dk-icon-success-subtle-hover: var(--dk-icon-primary-subtle-hover);
  --dk-icon-success-subtle-focus: var(--dk-icon-primary-subtle-focus);
  --dk-icon-success-on-color: var(--dk-icon-primary-on-color);
  --dk-icon-success-on-color-hover: var(--dk-icon-primary-on-color-hover);
  --dk-icon-success-on-color-focus: var(--dk-icon-primary-on-color-focus);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-success-default: var(--dk-surface-primary-default);
  --dk-surface-success-hover: var(--dk-surface-primary-hover);
  --dk-surface-success-focus: var(--dk-surface-primary-focus);
  --dk-surface-success-subtle: var(--dk-surface-primary-subtle);
  --dk-surface-success-subtle-hover: var(--dk-surface-primary-subtle-hover);
  --dk-surface-success-subtle-focus: var(--dk-surface-primary-subtle-focus);
  --dk-border-success-default: var(--dk-border-primary-default);
  --dk-border-success-hover: var(--dk-border-primary-hover);
  --dk-border-success-focus: var(--dk-border-primary-focus);
  --dk-border-success-subtle: var(--dk-border-primary-subtle);
  --dk-border-success-subtle-hover: var(--dk-border-primary-subtle-hover);
  --dk-border-success-subtle-focus: var(--dk-border-primary-subtle-focus);
  --dk-border-success-hairline: var(--dk-border-primary-hairline);
  --dk-border-success-elevation: var(--dk-border-primary-elevation);
  --dk-border-success-elevation-hover: var(--dk-border-primary-elevation-hover);
  --dk-border-success-elevation-focus: var(--dk-border-primary-elevation-focus);
  --dk-text-success-default: var(--dk-text-primary-default);
  --dk-text-success-hover: var(--dk-text-primary-hover);
  --dk-text-success-active: var(--dk-text-primary-active);
  --dk-icon-success-active: var(--dk-icon-primary-active);
  --dk-text-success-on-subtle: var(--dk-text-primary-on-subtle);
  --dk-text-success-focus: var(--dk-text-primary-focus);
  --dk-text-success-subtle: var(--dk-text-primary-subtle);
  --dk-text-success-subtle-hover: var(--dk-text-primary-subtle-hover);
  --dk-text-success-subtle-focus: var(--dk-text-primary-subtle-focus);
  --dk-text-success-on-color: var(--dk-text-primary-on-color);
  --dk-text-success-on-color-hover: var(--dk-text-primary-on-color-hover);
  --dk-text-success-on-color-focus: var(--dk-text-primary-on-color-focus);
  --dk-text-success-body: var(--dk-text-primary-default);
  --dk-icon-success-default: var(--dk-icon-primary-default);
  --dk-icon-success-hover: var(--dk-icon-primary-hover);
  --dk-icon-success-focus: var(--dk-icon-primary-focus);
  --dk-icon-success-subtle: var(--dk-icon-primary-subtle);
  --dk-icon-success-subtle-hover: var(--dk-icon-primary-subtle-hover);
  --dk-icon-success-subtle-focus: var(--dk-icon-primary-subtle-focus);
  --dk-icon-success-on-color: var(--dk-icon-primary-on-color);
  --dk-icon-success-on-color-hover: var(--dk-icon-primary-on-color-hover);
  --dk-icon-success-on-color-focus: var(--dk-icon-primary-on-color-focus);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-shadow-drop-2xl: color-mix(in srgb, var(--dk-color-base-black) 18%, transparent);
  --dk-shadow-drop-3xl: color-mix(in srgb, var(--dk-color-base-black) 14%, transparent);
  --dk-shadow-drop-lg-1: color-mix(in srgb, var(--dk-color-base-black) 8%, transparent);
  --dk-shadow-drop-lg-2: color-mix(in srgb, var(--dk-color-base-black) 3%, transparent);
  --dk-shadow-drop-md-1: color-mix(in srgb, var(--dk-color-base-black) 10%, transparent);
  --dk-shadow-drop-md-2: color-mix(in srgb, var(--dk-color-base-black) 6%, transparent);
  --dk-shadow-drop-sm-1: color-mix(in srgb, var(--dk-color-base-black) 10%, transparent);
  --dk-shadow-drop-sm-2: color-mix(in srgb, var(--dk-color-base-black) 6%, transparent);
  --dk-shadow-drop-xl-1: color-mix(in srgb, var(--dk-color-base-black) 8%, transparent);
  --dk-shadow-drop-xl-2: color-mix(in srgb, var(--dk-color-base-black) 3%, transparent);
  --dk-shadow-drop-xs: color-mix(in srgb, var(--dk-color-base-black) 5%, transparent);
  --dk-shadow-inner-lg: color-mix(in srgb, var(--dk-color-base-black) 10%, transparent);
  --dk-shadow-inner-md: color-mix(in srgb, var(--dk-color-base-black) 10%, transparent);
  --dk-shadow-inner-sm: color-mix(in srgb, var(--dk-color-base-black) 10%, transparent);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-shadow-drop-2xl: color-mix(in srgb, var(--dk-color-base-black) 36%, transparent);
  --dk-shadow-drop-3xl: color-mix(in srgb, var(--dk-color-base-black) 28%, transparent);
  --dk-shadow-drop-lg-1: color-mix(in srgb, var(--dk-color-base-black) 16%, transparent);
  --dk-shadow-drop-lg-2: color-mix(in srgb, var(--dk-color-base-black) 6%, transparent);
  --dk-shadow-drop-md-1: color-mix(in srgb, var(--dk-color-base-black) 20%, transparent);
  --dk-shadow-drop-md-2: color-mix(in srgb, var(--dk-color-base-black) 12%, transparent);
  --dk-shadow-drop-sm-1: color-mix(in srgb, var(--dk-color-base-black) 20%, transparent);
  --dk-shadow-drop-sm-2: color-mix(in srgb, var(--dk-color-base-black) 12%, transparent);
  --dk-shadow-drop-xl-1: color-mix(in srgb, var(--dk-color-base-black) 16%, transparent);
  --dk-shadow-drop-xl-2: color-mix(in srgb, var(--dk-color-base-black) 6%, transparent);
  --dk-shadow-drop-xs: color-mix(in srgb, var(--dk-color-base-black) 10%, transparent);
  --dk-shadow-inner-lg: color-mix(in srgb, var(--dk-color-base-black) 60%, transparent);
  --dk-shadow-inner-md: color-mix(in srgb, var(--dk-color-base-black) 60%, transparent);
  --dk-shadow-inner-sm: color-mix(in srgb, var(--dk-color-base-black) 60%, transparent);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-shadow-raised: 0 4px 8px 0 rgba(0, 0, 0, 0.04);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-shadow-raised: 0 4px 8px 0 rgba(0, 0, 0, 0.36);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-shadow-lifted: 0 4px 10px 0 rgba(0, 0, 0, 0.08);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-shadow-lifted: 0 4px 12px 0 rgba(0, 0, 0, 0.44);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-shadow-floating: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-shadow-floating: inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 6px 24px 0 rgba(0, 0, 0, 0.48);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-shadow-overlay: 0 2px 6px 0 rgba(0, 0, 0, 0.10), 0 12px 32px 0 rgba(0, 0, 0, 0.22);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-shadow-overlay: inset 0 1px 0 0 rgba(255, 255, 255, 0.08), 0 2px 6px 0 rgba(0, 0, 0, 0.40), 0 16px 40px 0 rgba(0, 0, 0, 0.64);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-shadow-panel: 0 0 24px 4px rgba(0, 0, 0, 0.20), 0 0 120px 32px rgba(0, 0, 0, 0.45);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-shadow-panel: 0 0 16px 0 rgba(0, 0, 0, 0.20), 0 0 96px 8px rgba(0, 0, 0, 0.30);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-shadow-card: 0 4px 8px -2px var(--dk-shadow-drop-md-1), 0 2px 4px -2px var(--dk-shadow-drop-md-2);
  --dk-shadow-card-hover: 0 12px 16px -4px var(--dk-shadow-drop-lg-1), 0 4px 6px -2px var(--dk-shadow-drop-lg-2);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-shadow-card: inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 2px 4px 0 rgba(0, 0, 0, 0.56), 0 8px 20px 0 rgba(0, 0, 0, 0.64);
  --dk-shadow-card-hover: inset 0 1px 0 0 rgba(255, 255, 255, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 16px 32px 0 rgba(0, 0, 0, 0.72);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-shadow-on-color: 0 4px 20px 0 rgba(0, 0, 0, 0.16);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-shadow-on-color: 0 4px 20px 0 rgba(0, 0, 0, 0.16);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-shadow-focus-ring: 0 0 0 4px var(--dk-color-primary-300);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-shadow-focus-ring: 0 0 0 4px var(--dk-color-primary-300);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-text-primary-active: var(--dk-color-primary-700);
  --dk-icon-primary-active: var(--dk-color-primary-700);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-text-primary-default: var(--dk-color-primary-400);
  --dk-text-primary-hover: var(--dk-color-primary-300);
  --dk-text-primary-focus: var(--dk-color-primary-200);
  --dk-text-primary-active: var(--dk-color-primary-200);
  --dk-icon-primary-default: var(--dk-color-primary-400);
  --dk-icon-primary-hover: var(--dk-color-primary-300);
  --dk-icon-primary-focus: var(--dk-color-primary-200);
  --dk-icon-primary-active: var(--dk-color-primary-200);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-primary-disabled-hover: var(--dk-color-primary-300);
  --dk-surface-primary-disabled-active: var(--dk-color-primary-400);
  --dk-border-primary-disabled-hover: var(--dk-color-primary-400);
  --dk-border-primary-disabled-active: var(--dk-color-primary-500);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-primary-disabled-hover: var(--dk-color-primary-700);
  --dk-surface-primary-disabled-active: var(--dk-color-primary-600);
  --dk-border-primary-disabled-hover: var(--dk-color-primary-600);
  --dk-border-primary-disabled-active: var(--dk-color-primary-500);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-text-primary-disabled-on-color: var(--dk-color-primary-50);
  --dk-icon-primary-disabled-on-color: var(--dk-color-primary-50);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-text-primary-disabled-on-color: var(--dk-color-primary-600);
  --dk-icon-primary-disabled-on-color: var(--dk-color-primary-600);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-text-primary-disabled-on-color-hover: var(--dk-color-primary-100);
  --dk-text-primary-disabled-on-color-active: var(--dk-color-primary-200);
  --dk-icon-primary-disabled-on-color-hover: var(--dk-color-primary-100);
  --dk-icon-primary-disabled-on-color-active: var(--dk-color-primary-200);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-text-primary-disabled-on-color-hover: var(--dk-color-primary-500);
  --dk-text-primary-disabled-on-color-active: var(--dk-color-primary-400);
  --dk-icon-primary-disabled-on-color-hover: var(--dk-color-primary-500);
  --dk-icon-primary-disabled-on-color-active: var(--dk-color-primary-400);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-border-primary-subtle-active: var(--dk-color-primary-300);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-border-primary-subtle-active: var(--dk-color-primary-600);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-text-primary-disabled-hover: var(--dk-color-primary-300);
  --dk-text-primary-disabled-active: var(--dk-color-primary-400);
  --dk-icon-primary-disabled-hover: var(--dk-color-primary-300);
  --dk-icon-primary-disabled-active: var(--dk-color-primary-400);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-text-primary-disabled-hover: var(--dk-color-primary-600);
  --dk-text-primary-disabled-active: var(--dk-color-primary-500);
  --dk-icon-primary-disabled-hover: var(--dk-color-primary-600);
  --dk-icon-primary-disabled-active: var(--dk-color-primary-500);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-text-neutral-active: var(--dk-color-neutral-800);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-text-neutral-active: var(--dk-color-neutral-100);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-nested-hover: var(--dk-color-neutral-50);
  --dk-surface-nested-active: var(--dk-color-neutral-100);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-nested-hover: var(--dk-color-neutral-800);
  --dk-surface-nested-active: var(--dk-color-neutral-700);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-inset-default: var(--dk-color-neutral-100);
  --dk-surface-inset-hover: var(--dk-color-neutral-200);
  --dk-surface-inset-active: var(--dk-color-neutral-300);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-inset-default: var(--dk-color-neutral-700);
  --dk-surface-inset-hover: var(--dk-color-neutral-600);
  --dk-surface-inset-active: var(--dk-color-neutral-500);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-border-nested-hover: var(--dk-color-neutral-200);
  --dk-border-nested-active: var(--dk-color-neutral-300);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-border-nested-hover: var(--dk-color-neutral-600);
  --dk-border-nested-active: var(--dk-color-neutral-500);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-text-nested-hover: var(--dk-color-neutral-800);
  --dk-text-nested-active: var(--dk-color-neutral-900);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-text-nested-hover: var(--dk-color-neutral-100);
  --dk-text-nested-active: var(--dk-color-neutral-50);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-surface-primary-oos: var(--dk-color-primary-400);
  --dk-border-primary-oos: var(--dk-color-primary-200);
  --dk-text-primary-oos: var(--dk-color-primary-200);
  --dk-icon-primary-oos: var(--dk-color-primary-200);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-surface-primary-oos: var(--dk-color-primary-700);
  --dk-border-primary-oos: var(--dk-color-primary-600);
  --dk-text-primary-oos: var(--dk-color-primary-600);
  --dk-icon-primary-oos: var(--dk-color-primary-600);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-gradient-default-body-stop-1: var(--dk-primitive-color-foundation-white);
  --dk-gradient-default-body-stop-2: var(--dk-primitive-color-foundation-white-0);
  --dk-gradient-error-top-right-default-stop-1: var(--dk-color-error-100);
  --dk-gradient-error-top-right-default-stop-2: var(--dk-color-error-400);
  --dk-gradient-error-top-right-default-stop-3: var(--dk-color-error-600);
  --dk-gradient-error-top-right-focus-stop-1: var(--dk-color-error-50);
  --dk-gradient-error-top-right-focus-stop-2: var(--dk-color-error-300);
  --dk-gradient-error-top-right-focus-stop-3: var(--dk-color-error-500);
  --dk-gradient-error-top-right-hover-stop-1: var(--dk-color-error-50);
  --dk-gradient-error-top-right-hover-stop-2: var(--dk-color-error-300);
  --dk-gradient-error-top-right-hover-stop-3: var(--dk-color-error-500);
  --dk-gradient-information-top-right-default-stop-1: var(--dk-color-information-100);
  --dk-gradient-information-top-right-default-stop-2: var(--dk-color-information-500);
  --dk-gradient-information-top-right-default-stop-3: var(--dk-color-information-700);
  --dk-gradient-information-top-right-focus-stop-1: var(--dk-color-information-50);
  --dk-gradient-information-top-right-focus-stop-2: var(--dk-color-information-400);
  --dk-gradient-information-top-right-focus-stop-3: var(--dk-color-information-600);
  --dk-gradient-information-top-right-hover-stop-1: var(--dk-color-information-50);
  --dk-gradient-information-top-right-hover-stop-2: var(--dk-color-information-400);
  --dk-gradient-information-top-right-hover-stop-3: var(--dk-color-information-600);
  --dk-gradient-neutral-top-right-default-stop-1: var(--dk-color-neutral-25);
  --dk-gradient-neutral-top-right-default-stop-2: var(--dk-color-neutral-400);
  --dk-gradient-neutral-top-right-default-stop-3: var(--dk-color-neutral-600);
  --dk-gradient-neutral-top-right-focus-stop-1: var(--dk-color-neutral-25);
  --dk-gradient-neutral-top-right-focus-stop-2: var(--dk-color-neutral-300);
  --dk-gradient-neutral-top-right-focus-stop-3: var(--dk-color-neutral-400);
  --dk-gradient-neutral-top-right-hover-stop-1: var(--dk-color-neutral-25);
  --dk-gradient-neutral-top-right-hover-stop-2: var(--dk-color-neutral-300);
  --dk-gradient-neutral-top-right-hover-stop-3: var(--dk-color-neutral-400);
  --dk-gradient-primary-top-right-default-stop-1: var(--dk-color-secondary-300);
  --dk-gradient-primary-top-right-default-stop-2: var(--dk-color-primary-500);
  --dk-gradient-primary-top-right-default-stop-3: var(--dk-color-primary-600);
  --dk-gradient-primary-top-right-focus-stop-1: var(--dk-color-secondary-100);
  --dk-gradient-primary-top-right-focus-stop-2: var(--dk-color-primary-400);
  --dk-gradient-primary-top-right-focus-stop-3: var(--dk-color-primary-600);
  --dk-gradient-primary-top-right-hover-stop-1: var(--dk-color-secondary-100);
  --dk-gradient-primary-top-right-hover-stop-2: var(--dk-color-primary-400);
  --dk-gradient-primary-top-right-hover-stop-3: var(--dk-color-primary-600);
  --dk-gradient-primary-transparent-stop-1: var(--dk-color-primary-500);
  --dk-gradient-primary-transparent-stop-2: var(--dk-color-primary-200);
  --dk-gradient-primary-transparent-stop-3: var(--dk-color-base-white);
  --dk-gradient-success-top-right-default-stop-1: var(--dk-color-success-100);
  --dk-gradient-success-top-right-default-stop-2: var(--dk-color-success-400);
  --dk-gradient-success-top-right-default-stop-3: var(--dk-color-success-600);
  --dk-gradient-success-top-right-focus-stop-1: var(--dk-color-success-50);
  --dk-gradient-success-top-right-focus-stop-2: var(--dk-color-success-300);
  --dk-gradient-success-top-right-focus-stop-3: var(--dk-color-success-500);
  --dk-gradient-success-top-right-hover-stop-1: var(--dk-color-success-50);
  --dk-gradient-success-top-right-hover-stop-2: var(--dk-color-success-300);
  --dk-gradient-success-top-right-hover-stop-3: var(--dk-color-success-500);
  --dk-gradient-warning-top-right-default-stop-1: var(--dk-color-warning-100);
  --dk-gradient-warning-top-right-default-stop-2: var(--dk-color-warning-400);
  --dk-gradient-warning-top-right-default-stop-3: var(--dk-color-warning-500);
  --dk-gradient-warning-top-right-focus-stop-1: var(--dk-color-warning-50);
  --dk-gradient-warning-top-right-focus-stop-2: var(--dk-color-warning-300);
  --dk-gradient-warning-top-right-focus-stop-3: var(--dk-color-warning-400);
  --dk-gradient-warning-top-right-hover-stop-1: var(--dk-color-warning-50);
  --dk-gradient-warning-top-right-hover-stop-2: var(--dk-color-warning-300);
  --dk-gradient-warning-top-right-hover-stop-3: var(--dk-color-warning-400);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-gradient-default-body-stop-1: var(--dk-primitive-color-gray-1000);
  --dk-gradient-default-body-stop-2: var(--dk-primitive-color-gray-1000-0);
  --dk-gradient-error-top-right-default-stop-1: var(--dk-color-error-100);
  --dk-gradient-error-top-right-default-stop-2: var(--dk-color-error-400);
  --dk-gradient-error-top-right-default-stop-3: var(--dk-color-error-600);
  --dk-gradient-error-top-right-focus-stop-1: var(--dk-color-error-50);
  --dk-gradient-error-top-right-focus-stop-2: var(--dk-color-error-300);
  --dk-gradient-error-top-right-focus-stop-3: var(--dk-color-error-500);
  --dk-gradient-error-top-right-hover-stop-1: var(--dk-color-error-50);
  --dk-gradient-error-top-right-hover-stop-2: var(--dk-color-error-300);
  --dk-gradient-error-top-right-hover-stop-3: var(--dk-color-error-500);
  --dk-gradient-information-top-right-default-stop-1: var(--dk-color-information-100);
  --dk-gradient-information-top-right-default-stop-2: var(--dk-color-information-500);
  --dk-gradient-information-top-right-default-stop-3: var(--dk-color-information-700);
  --dk-gradient-information-top-right-focus-stop-1: var(--dk-color-information-50);
  --dk-gradient-information-top-right-focus-stop-2: var(--dk-color-information-400);
  --dk-gradient-information-top-right-focus-stop-3: var(--dk-color-information-600);
  --dk-gradient-information-top-right-hover-stop-1: var(--dk-color-information-50);
  --dk-gradient-information-top-right-hover-stop-2: var(--dk-color-information-400);
  --dk-gradient-information-top-right-hover-stop-3: var(--dk-color-information-600);
  --dk-gradient-neutral-top-right-default-stop-1: var(--dk-color-neutral-25);
  --dk-gradient-neutral-top-right-default-stop-2: var(--dk-color-neutral-400);
  --dk-gradient-neutral-top-right-default-stop-3: var(--dk-color-neutral-600);
  --dk-gradient-neutral-top-right-focus-stop-1: var(--dk-color-neutral-25);
  --dk-gradient-neutral-top-right-focus-stop-2: var(--dk-color-neutral-300);
  --dk-gradient-neutral-top-right-focus-stop-3: var(--dk-color-neutral-400);
  --dk-gradient-neutral-top-right-hover-stop-1: var(--dk-color-neutral-25);
  --dk-gradient-neutral-top-right-hover-stop-2: var(--dk-color-neutral-300);
  --dk-gradient-neutral-top-right-hover-stop-3: var(--dk-color-neutral-400);
  --dk-gradient-primary-top-right-default-stop-1: var(--dk-color-secondary-300);
  --dk-gradient-primary-top-right-default-stop-2: var(--dk-color-primary-500);
  --dk-gradient-primary-top-right-default-stop-3: var(--dk-color-primary-600);
  --dk-gradient-primary-top-right-focus-stop-1: var(--dk-color-secondary-100);
  --dk-gradient-primary-top-right-focus-stop-2: var(--dk-color-primary-400);
  --dk-gradient-primary-top-right-focus-stop-3: var(--dk-color-primary-600);
  --dk-gradient-primary-top-right-hover-stop-1: var(--dk-color-secondary-100);
  --dk-gradient-primary-top-right-hover-stop-2: var(--dk-color-primary-400);
  --dk-gradient-primary-top-right-hover-stop-3: var(--dk-color-primary-600);
  --dk-gradient-primary-transparent-stop-1: var(--dk-color-primary-500);
  --dk-gradient-primary-transparent-stop-2: var(--dk-color-primary-800);
  --dk-gradient-primary-transparent-stop-3: var(--dk-primitive-color-gray-1000-0);
  --dk-gradient-success-top-right-default-stop-1: var(--dk-color-success-100);
  --dk-gradient-success-top-right-default-stop-2: var(--dk-color-success-400);
  --dk-gradient-success-top-right-default-stop-3: var(--dk-color-success-600);
  --dk-gradient-success-top-right-focus-stop-1: var(--dk-color-success-50);
  --dk-gradient-success-top-right-focus-stop-2: var(--dk-color-success-300);
  --dk-gradient-success-top-right-focus-stop-3: var(--dk-color-success-500);
  --dk-gradient-success-top-right-hover-stop-1: var(--dk-color-success-50);
  --dk-gradient-success-top-right-hover-stop-2: var(--dk-color-success-300);
  --dk-gradient-success-top-right-hover-stop-3: var(--dk-color-success-500);
  --dk-gradient-warning-top-right-default-stop-1: var(--dk-color-warning-100);
  --dk-gradient-warning-top-right-default-stop-2: var(--dk-color-warning-400);
  --dk-gradient-warning-top-right-default-stop-3: var(--dk-color-warning-500);
  --dk-gradient-warning-top-right-focus-stop-1: var(--dk-color-warning-50);
  --dk-gradient-warning-top-right-focus-stop-2: var(--dk-color-warning-300);
  --dk-gradient-warning-top-right-focus-stop-3: var(--dk-color-warning-400);
  --dk-gradient-warning-top-right-hover-stop-1: var(--dk-color-warning-50);
  --dk-gradient-warning-top-right-hover-stop-2: var(--dk-color-warning-300);
  --dk-gradient-warning-top-right-hover-stop-3: var(--dk-color-warning-400);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-gradient-wash-strength: 35%;
  --dk-gradient-shimmer-lift: 0.08;
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-border-gradient-primary-light: var(--dk-color-primary-200);
  --dk-border-gradient-primary-deep: var(--dk-gradient-primary-top-right-default-stop-3);
  --dk-border-gradient-primary-mid: var(--dk-gradient-primary-top-right-default-stop-2);
  --dk-border-gradient-neutral-light: var(--dk-gradient-neutral-top-right-hover-stop-2);
  --dk-border-gradient-neutral-deep: var(--dk-gradient-neutral-top-right-default-stop-3);
  --dk-border-gradient-success-light: var(--dk-gradient-success-top-right-hover-stop-2);
  --dk-border-gradient-success-deep: var(--dk-gradient-success-top-right-default-stop-3);
  --dk-border-gradient-warning-light: var(--dk-gradient-warning-top-right-hover-stop-2);
  --dk-border-gradient-warning-deep: var(--dk-gradient-warning-top-right-default-stop-3);
  --dk-border-gradient-error-light: var(--dk-gradient-error-top-right-hover-stop-2);
  --dk-border-gradient-error-deep: var(--dk-gradient-error-top-right-default-stop-3);
  --dk-border-gradient-information-light: var(--dk-gradient-information-top-right-hover-stop-2);
  --dk-border-gradient-information-deep: var(--dk-gradient-information-top-right-default-stop-3);
  --dk-border-gradient-ai-light: var(--dk-gradient-primary-top-right-default-stop-1);
  --dk-border-gradient-ai-deep: var(--dk-gradient-primary-top-right-default-stop-3);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-border-gradient-primary-light: var(--dk-color-primary-200);
  --dk-border-gradient-primary-deep: var(--dk-gradient-primary-top-right-default-stop-3);
  --dk-border-gradient-primary-mid: var(--dk-gradient-primary-top-right-default-stop-3);
  --dk-border-gradient-neutral-light: var(--dk-gradient-neutral-top-right-hover-stop-2);
  --dk-border-gradient-neutral-deep: var(--dk-gradient-neutral-top-right-default-stop-3);
  --dk-border-gradient-success-light: var(--dk-gradient-success-top-right-hover-stop-2);
  --dk-border-gradient-success-deep: var(--dk-gradient-success-top-right-default-stop-3);
  --dk-border-gradient-warning-light: var(--dk-gradient-warning-top-right-hover-stop-2);
  --dk-border-gradient-warning-deep: var(--dk-gradient-warning-top-right-default-stop-3);
  --dk-border-gradient-error-light: var(--dk-gradient-error-top-right-hover-stop-2);
  --dk-border-gradient-error-deep: var(--dk-gradient-error-top-right-default-stop-3);
  --dk-border-gradient-information-light: var(--dk-gradient-information-top-right-hover-stop-2);
  --dk-border-gradient-information-deep: var(--dk-gradient-information-top-right-default-stop-3);
  --dk-border-gradient-ai-light: var(--dk-gradient-primary-top-right-default-stop-1);
  --dk-border-gradient-ai-deep: var(--dk-gradient-primary-top-right-default-stop-3);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-border-dashed-primary: var(--dk-color-primary-400);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-border-dashed-primary: var(--dk-border-primary-default);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-interactive-mark-shade: var(--dk-color-base-black); --dk-interactive-mark-reach: 1;
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-interactive-mark-shade: var(--dk-color-base-white); --dk-interactive-mark-reach: 0.6;
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-interactive-halo-strength: 18%;
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-interactive-halo-strength: 40%;
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-interactive-tone-mark: initial;
  --dk-interactive-tone-mark-hover: initial;
  --dk-interactive-tone-mark-active: initial;
  --dk-interactive-tone-fill-hover: initial;
  --dk-interactive-tone-fill-active: initial;
  --dk-interactive-tone-text: initial;
  --dk-interactive-tone-text-subtle: initial;
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-interactive-tone-mark: initial;
  --dk-interactive-tone-mark-hover: initial;
  --dk-interactive-tone-mark-active: initial;
  --dk-interactive-tone-fill-hover: initial;
  --dk-interactive-tone-fill-active: initial;
  --dk-interactive-tone-text: initial;
  --dk-interactive-tone-text-subtle: initial;
}
[data-theme="light"] [data-tone="inverse"][data-surface="1"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"][data-surface="1"] {
  --dk-interactive-mark-step: 25%;
  --dk-interactive-mark-step-hover: 50%;
  --dk-interactive-mark-step-active: 62%;
}
[data-theme="light"][data-tone="inverse"][data-surface="below"],
[data-theme="light"] [data-tone="inverse"][data-surface="below"]:not([data-theme]):where(:not(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *))) {
  --dk-interactive-mark-step: 25%;
  --dk-interactive-mark-step-hover: 50%;
  --dk-interactive-mark-step-active: 62%;
}
[data-theme="light"] [data-tone="inverse"][data-surface="raised"]:not([data-theme]):where(:not([data-theme="light"] [data-theme="dark"] *)),
[data-theme="light"][data-tone="inverse"][data-surface="raised"] {
  --dk-interactive-mark-step: 25%;
  --dk-interactive-mark-step-hover: 50%;
  --dk-interactive-mark-step-active: 62%;
}
[data-theme="dark"] [data-tone="inverse"][data-surface="1"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"][data-surface="1"] {
  --dk-interactive-mark-step: 25%;
  --dk-interactive-mark-step-hover: 50%;
  --dk-interactive-mark-step-active: 62%;
}
[data-theme="dark"][data-tone="inverse"][data-surface="below"],
[data-theme="dark"] [data-tone="inverse"][data-surface="below"]:not([data-theme]):where(:not(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *))) {
  --dk-interactive-mark-step: 25%;
  --dk-interactive-mark-step-hover: 50%;
  --dk-interactive-mark-step-active: 62%;
}
[data-theme="light"] [data-tone="inverse"][data-surface="2"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"][data-surface="2"] {
  --dk-interactive-mark-step: 50%;
  --dk-interactive-mark-step-hover: 62%;
  --dk-interactive-mark-step-active: 72%;
}
[data-theme="light"] [data-tone="inverse"][data-surface="below"]:not([data-theme]):where(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *)) {
  --dk-interactive-mark-step: 50%;
  --dk-interactive-mark-step-hover: 62%;
  --dk-interactive-mark-step-active: 72%;
}
[data-theme="dark"] [data-tone="inverse"][data-surface="2"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"][data-surface="2"] {
  --dk-interactive-mark-step: 50%;
  --dk-interactive-mark-step-hover: 62%;
  --dk-interactive-mark-step-active: 72%;
}
[data-theme="dark"] [data-tone="inverse"][data-surface="below"]:not([data-theme]):where(:is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *), :is(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *):not(:is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) :is([data-theme], [data-surface], [data-tone]):not([data-surface="1"], [data-surface="2"], [data-surface="below"], [data-theme="dark"] [data-surface="raised"]:not([data-theme="dark"] [data-theme="light"] *), [data-theme="dark"][data-surface="raised"]) *)) {
  --dk-interactive-mark-step: 50%;
  --dk-interactive-mark-step-hover: 62%;
  --dk-interactive-mark-step-active: 72%;
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-logo-neutral-default: var(--dk-color-neutral-100);
  --dk-logo-neutral-subtle: var(--dk-color-neutral-300);
  --dk-logo-primary-default: var(--dk-color-primary-500);
  --dk-logo-secondary-default: var(--dk-color-neutral-900);
  --dk-logo-tertiary-default: var(--dk-color-base-white);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-logo-neutral-default: var(--dk-color-neutral-500);
  --dk-logo-neutral-subtle: var(--dk-color-neutral-700);
  --dk-logo-primary-default: var(--dk-color-primary-500);
  --dk-logo-secondary-default: var(--dk-color-base-white);
  --dk-logo-tertiary-default: var(--dk-color-neutral-900);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --dk-placeholder-border-default: var(--dk-primitive-color-purple-500);
  --dk-placeholder-border-shadow: var(--dk-primitive-color-purple-500);
  --dk-placeholder-border-subtle: var(--dk-primitive-color-purple-500);
  --dk-placeholder-icon-default: var(--dk-primitive-color-purple-500);
  --dk-placeholder-text-default: var(--dk-primitive-color-purple-500);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --dk-placeholder-border-default: var(--dk-primitive-color-purple-300);
  --dk-placeholder-border-shadow: var(--dk-primitive-color-purple-300);
  --dk-placeholder-border-subtle: var(--dk-primitive-color-purple-300);
  --dk-placeholder-icon-default: var(--dk-primitive-color-purple-300);
  --dk-placeholder-text-default: var(--dk-primitive-color-purple-300);
}

/* ═══════════════════════════════ drift-kit:layer GENERATED tone reset ═══════════════════════════════ */
/* Generated by scripts/build.js from tone.css and src/tone-boundary.js. */
[data-theme="light"] {
  --_reset-border-control-active: var(--dk-color-neutral-300);
  --_reset-border-control-active-on-error-subtle: var(--dk-border-control-active-on-error-subtle-level-0);
  --_reset-border-control-active-on-information-subtle: var(--dk-border-control-active-on-information-subtle-level-0);
  --_reset-border-control-active-on-primary-subtle: var(--dk-border-control-active-on-primary-subtle-level-0);
  --_reset-border-control-active-on-success-subtle: var(--dk-border-control-active-on-success-subtle-level-0);
  --_reset-border-control-active-on-warning-subtle: var(--dk-border-control-active-on-warning-subtle-level-0);
  --_reset-border-control-default: var(--dk-color-neutral-100);
  --_reset-border-control-default-on-error-subtle: var(--dk-border-control-default-on-error-subtle-level-0);
  --_reset-border-control-default-on-information-subtle: var(--dk-border-control-default-on-information-subtle-level-0);
  --_reset-border-control-default-on-primary-subtle: var(--dk-border-control-default-on-primary-subtle-level-0);
  --_reset-border-control-default-on-success-subtle: var(--dk-border-control-default-on-success-subtle-level-0);
  --_reset-border-control-default-on-warning-subtle: var(--dk-border-control-default-on-warning-subtle-level-0);
  --_reset-border-control-hover: var(--dk-color-neutral-200);
  --_reset-border-control-hover-on-error-subtle: var(--dk-border-control-hover-on-error-subtle-level-0);
  --_reset-border-control-hover-on-information-subtle: var(--dk-border-control-hover-on-information-subtle-level-0);
  --_reset-border-control-hover-on-primary-subtle: var(--dk-border-control-hover-on-primary-subtle-level-0);
  --_reset-border-control-hover-on-success-subtle: var(--dk-border-control-hover-on-success-subtle-level-0);
  --_reset-border-control-hover-on-warning-subtle: var(--dk-border-control-hover-on-warning-subtle-level-0);
  --_reset-border-control-lifted-active: var(--dk-color-neutral-200);
  --_reset-border-control-lifted-default: var(--dk-color-neutral-50);
  --_reset-border-control-lifted-hover: var(--dk-color-neutral-100);
  --_reset-border-disabled-default: var(--dk-color-neutral-400);
  --_reset-border-disabled-elevation: var(--dk-color-neutral-200);
  --_reset-border-disabled-subtle: var(--dk-color-neutral-50);
  --_reset-border-error-default: var(--dk-color-error-500);
  --_reset-border-error-focus: var(--dk-color-error-700);
  --_reset-border-error-hairline: var(--dk-color-error-300);
  --_reset-border-error-hover: var(--dk-color-error-600);
  --_reset-border-field-disabled: var(--dk-color-neutral-100);
  --_reset-border-field-focus-ring: var(--dk-color-primary-300);
  --_reset-border-field-raised-default: var(--dk-color-neutral-50);
  --_reset-border-hairline-current: var(--dk-border-hairline-level-0);
  --_reset-border-information-default: var(--dk-color-information-500);
  --_reset-border-information-focus: var(--dk-color-information-700);
  --_reset-border-information-hairline: var(--dk-color-information-300);
  --_reset-border-information-hover: var(--dk-color-information-600);
  --_reset-border-nested-active: var(--dk-color-neutral-300);
  --_reset-border-nested-default: var(--dk-color-neutral-100);
  --_reset-border-nested-hover: var(--dk-color-neutral-200);
  --_reset-border-neutral-hairline: var(--dk-color-neutral-200);
  --_reset-border-neutral-subtle: var(--dk-color-neutral-200);
  --_reset-border-neutral-subtle-focus: var(--dk-color-neutral-500);
  --_reset-border-neutral-subtle-hover: var(--dk-color-neutral-400);
  --_reset-border-primary-default: var(--dk-color-primary-600);
  --_reset-border-primary-focus: var(--dk-color-primary-800);
  --_reset-border-primary-hairline: var(--dk-color-primary-300);
  --_reset-border-primary-hover: var(--dk-color-primary-700);
  --_reset-border-raised-active: var(--dk-color-neutral-200);
  --_reset-border-raised-control-active: var(--dk-color-neutral-100);
  --_reset-border-raised-control-default: var(--dk-color-neutral-25);
  --_reset-border-raised-control-hover: var(--dk-color-neutral-50);
  --_reset-border-raised-default: var(--dk-color-neutral-50);
  --_reset-border-raised-hover: var(--dk-color-neutral-100);
  --_reset-border-success-default: var(--dk-color-primary-600);
  --_reset-border-success-focus: var(--dk-color-primary-800);
  --_reset-border-success-hover: var(--dk-color-primary-700);
  --_reset-border-warning-default: var(--dk-color-warning-500);
  --_reset-border-warning-focus: var(--dk-color-warning-700);
  --_reset-border-warning-hairline: var(--dk-color-warning-300);
  --_reset-border-warning-hover: var(--dk-color-warning-600);
  --_reset-icon-choice-disabled: var(--dk-color-neutral-500);
  --_reset-icon-control-active: var(--dk-color-neutral-700);
  --_reset-icon-control-active-on-error-subtle: var(--dk-icon-control-active-on-error-subtle-level-0);
  --_reset-icon-control-active-on-information-subtle: var(--dk-icon-control-active-on-information-subtle-level-0);
  --_reset-icon-control-active-on-primary-subtle: var(--dk-icon-control-active-on-primary-subtle-level-0);
  --_reset-icon-control-active-on-success-subtle: var(--dk-icon-control-active-on-success-subtle-level-0);
  --_reset-icon-control-active-on-warning-subtle: var(--dk-icon-control-active-on-warning-subtle-level-0);
  --_reset-icon-control-default: var(--dk-color-neutral-500);
  --_reset-icon-control-default-on-error-subtle: var(--dk-icon-control-default-on-error-subtle-level-0);
  --_reset-icon-control-default-on-information-subtle: var(--dk-icon-control-default-on-information-subtle-level-0);
  --_reset-icon-control-default-on-primary-subtle: var(--dk-icon-control-default-on-primary-subtle-level-0);
  --_reset-icon-control-default-on-success-subtle: var(--dk-icon-control-default-on-success-subtle-level-0);
  --_reset-icon-control-default-on-warning-subtle: var(--dk-icon-control-default-on-warning-subtle-level-0);
  --_reset-icon-control-disabled: var(--dk-color-neutral-100);
  --_reset-icon-control-disabled-on-error-subtle: var(--dk-icon-control-disabled-on-error-subtle-level-0);
  --_reset-icon-control-disabled-on-information-subtle: var(--dk-icon-control-disabled-on-information-subtle-level-0);
  --_reset-icon-control-disabled-on-primary-subtle: var(--dk-icon-control-disabled-on-primary-subtle-level-0);
  --_reset-icon-control-disabled-on-success-subtle: var(--dk-icon-control-disabled-on-success-subtle-level-0);
  --_reset-icon-control-disabled-on-warning-subtle: var(--dk-icon-control-disabled-on-warning-subtle-level-0);
  --_reset-icon-control-hover: var(--dk-color-neutral-600);
  --_reset-icon-control-hover-on-error-subtle: var(--dk-icon-control-hover-on-error-subtle-level-0);
  --_reset-icon-control-hover-on-information-subtle: var(--dk-icon-control-hover-on-information-subtle-level-0);
  --_reset-icon-control-hover-on-primary-subtle: var(--dk-icon-control-hover-on-primary-subtle-level-0);
  --_reset-icon-control-hover-on-success-subtle: var(--dk-icon-control-hover-on-success-subtle-level-0);
  --_reset-icon-control-hover-on-warning-subtle: var(--dk-icon-control-hover-on-warning-subtle-level-0);
  --_reset-icon-default-body: var(--dk-color-base-black);
  --_reset-icon-disabled-default: var(--dk-color-neutral-400);
  --_reset-icon-disabled-subtle: var(--dk-color-neutral-100);
  --_reset-icon-error-default: var(--dk-color-error-500);
  --_reset-icon-field-default: var(--dk-color-neutral-500);
  --_reset-icon-field-disabled: var(--dk-color-neutral-100);
  --_reset-icon-information-default: var(--dk-color-information-500);
  --_reset-icon-neutral-default: var(--dk-color-neutral-500);
  --_reset-icon-neutral-subtle: var(--dk-color-neutral-300);
  --_reset-icon-on-error-fill: var(--dk-icon-base-white);
  --_reset-icon-on-error-mark: var(--dk-icon-base-white);
  --_reset-icon-on-information-fill: var(--dk-icon-base-white);
  --_reset-icon-on-information-mark: var(--dk-icon-base-white);
  --_reset-icon-on-primary-fill: var(--dk-icon-base-white);
  --_reset-icon-on-primary-mark: var(--dk-icon-base-white);
  --_reset-icon-on-success-fill: var(--dk-icon-base-white);
  --_reset-icon-on-success-mark: var(--dk-icon-base-white);
  --_reset-icon-on-warning-fill: var(--dk-icon-base-white);
  --_reset-icon-on-warning-mark: var(--dk-icon-base-white);
  --_reset-icon-primary-default: var(--dk-color-primary-500);
  --_reset-icon-success-default: var(--dk-color-primary-500);
  --_reset-icon-warning-default: var(--dk-color-warning-500);
  --_reset-interactive-tone-fill-active: initial;
  --_reset-interactive-tone-fill-hover: initial;
  --_reset-interactive-tone-mark: initial;
  --_reset-interactive-tone-mark-active: initial;
  --_reset-interactive-tone-mark-hover: initial;
  --_reset-interactive-tone-text: initial;
  --_reset-interactive-tone-text-subtle: initial;
  --_reset-surface-choice-disabled: var(--dk-color-neutral-100);
  --_reset-surface-control-active: var(--dk-color-neutral-100);
  --_reset-surface-control-active-on-error-subtle: var(--dk-surface-control-active-on-error-subtle-level-0);
  --_reset-surface-control-active-on-information-subtle: var(--dk-surface-control-active-on-information-subtle-level-0);
  --_reset-surface-control-active-on-primary-subtle: var(--dk-surface-control-active-on-primary-subtle-level-0);
  --_reset-surface-control-active-on-success-subtle: var(--dk-surface-control-active-on-success-subtle-level-0);
  --_reset-surface-control-active-on-warning-subtle: var(--dk-surface-control-active-on-warning-subtle-level-0);
  --_reset-surface-control-default: var(--dk-color-neutral-25);
  --_reset-surface-control-default-on-error-subtle: var(--dk-surface-control-default-on-error-subtle-level-0);
  --_reset-surface-control-default-on-information-subtle: var(--dk-surface-control-default-on-information-subtle-level-0);
  --_reset-surface-control-default-on-primary-subtle: var(--dk-surface-control-default-on-primary-subtle-level-0);
  --_reset-surface-control-default-on-success-subtle: var(--dk-surface-control-default-on-success-subtle-level-0);
  --_reset-surface-control-default-on-warning-subtle: var(--dk-surface-control-default-on-warning-subtle-level-0);
  --_reset-surface-control-disabled: var(--dk-color-neutral-25);
  --_reset-surface-control-disabled-on-error-subtle: var(--dk-surface-control-disabled-on-error-subtle-level-0);
  --_reset-surface-control-disabled-on-information-subtle: var(--dk-surface-control-disabled-on-information-subtle-level-0);
  --_reset-surface-control-disabled-on-primary-subtle: var(--dk-surface-control-disabled-on-primary-subtle-level-0);
  --_reset-surface-control-disabled-on-success-subtle: var(--dk-surface-control-disabled-on-success-subtle-level-0);
  --_reset-surface-control-disabled-on-warning-subtle: var(--dk-surface-control-disabled-on-warning-subtle-level-0);
  --_reset-surface-control-hover: var(--dk-color-neutral-50);
  --_reset-surface-control-hover-on-error-subtle: var(--dk-surface-control-hover-on-error-subtle-level-0);
  --_reset-surface-control-hover-on-information-subtle: var(--dk-surface-control-hover-on-information-subtle-level-0);
  --_reset-surface-control-hover-on-primary-subtle: var(--dk-surface-control-hover-on-primary-subtle-level-0);
  --_reset-surface-control-hover-on-success-subtle: var(--dk-surface-control-hover-on-success-subtle-level-0);
  --_reset-surface-control-hover-on-warning-subtle: var(--dk-surface-control-hover-on-warning-subtle-level-0);
  --_reset-surface-current: var(--dk-surface-level-0);
  --_reset-surface-disabled-default: var(--dk-color-neutral-300);
  --_reset-surface-disabled-subtle: var(--dk-color-neutral-25);
  --_reset-surface-error-default: var(--dk-color-error-500);
  --_reset-surface-error-focus: var(--dk-color-error-700);
  --_reset-surface-error-hover: var(--dk-color-error-600);
  --_reset-surface-error-mark: var(--dk-color-error-600);
  --_reset-surface-error-subtle: var(--dk-color-error-50);
  --_reset-surface-error-subtle-focus: var(--dk-color-error-200);
  --_reset-surface-error-subtle-hover: var(--dk-color-error-100);
  --_reset-surface-field-action-active: var(--dk-color-neutral-100);
  --_reset-surface-field-action-hover: var(--dk-color-neutral-50);
  --_reset-surface-field-default: var(--dk-color-base-white);
  --_reset-surface-field-hover: var(--dk-color-neutral-25);
  --_reset-surface-information-default: var(--dk-color-information-500);
  --_reset-surface-information-focus: var(--dk-color-information-700);
  --_reset-surface-information-hover: var(--dk-color-information-600);
  --_reset-surface-information-mark: var(--dk-color-information-600);
  --_reset-surface-information-subtle: var(--dk-color-information-50);
  --_reset-surface-lifted-active: var(--dk-color-neutral-100);
  --_reset-surface-lifted-default: var(--dk-color-neutral-25);
  --_reset-surface-lifted-hover: var(--dk-color-neutral-50);
  --_reset-surface-nested-active: var(--dk-color-neutral-100);
  --_reset-surface-nested-default: var(--dk-color-neutral-25);
  --_reset-surface-nested-hover: var(--dk-color-neutral-50);
  --_reset-surface-neutral-subtle: var(--dk-color-neutral-25);
  --_reset-surface-neutral-subtle-active: var(--dk-color-neutral-100);
  --_reset-surface-neutral-subtle-focus: var(--dk-color-neutral-100);
  --_reset-surface-neutral-subtle-hover: var(--dk-color-neutral-50);
  --_reset-surface-primary-active: var(--dk-color-primary-700);
  --_reset-surface-primary-brand: var(--dk-color-primary-500);
  --_reset-surface-primary-default: var(--dk-color-primary-500);
  --_reset-surface-primary-focus: var(--dk-color-primary-700);
  --_reset-surface-primary-hover: var(--dk-color-primary-600);
  --_reset-surface-primary-mark: var(--dk-color-primary-600);
  --_reset-surface-primary-subtle: var(--dk-color-primary-50);
  --_reset-surface-primary-subtle-focus: var(--dk-color-primary-200);
  --_reset-surface-primary-subtle-hover: var(--dk-color-primary-100);
  --_reset-surface-raised-active: var(--dk-color-neutral-50);
  --_reset-surface-raised-default: var(--dk-color-base-white);
  --_reset-surface-raised-hover: var(--dk-color-neutral-25);
  --_reset-surface-success-default: var(--dk-color-primary-500);
  --_reset-surface-success-focus: var(--dk-color-primary-700);
  --_reset-surface-success-hover: var(--dk-color-primary-600);
  --_reset-surface-success-mark: var(--dk-color-primary-600);
  --_reset-surface-success-subtle: var(--dk-color-primary-50);
  --_reset-surface-warning-default: var(--dk-color-warning-500);
  --_reset-surface-warning-focus: var(--dk-color-warning-700);
  --_reset-surface-warning-hover: var(--dk-color-warning-600);
  --_reset-surface-warning-mark: var(--dk-color-warning-600);
  --_reset-surface-warning-subtle: var(--dk-color-warning-50);
  --_reset-text-control-active: var(--dk-color-neutral-800);
  --_reset-text-control-active-on-error-subtle: var(--dk-text-control-active-on-error-subtle-level-0);
  --_reset-text-control-active-on-information-subtle: var(--dk-text-control-active-on-information-subtle-level-0);
  --_reset-text-control-active-on-primary-subtle: var(--dk-text-control-active-on-primary-subtle-level-0);
  --_reset-text-control-active-on-success-subtle: var(--dk-text-control-active-on-success-subtle-level-0);
  --_reset-text-control-active-on-warning-subtle: var(--dk-text-control-active-on-warning-subtle-level-0);
  --_reset-text-control-default: var(--dk-color-neutral-600);
  --_reset-text-control-default-on-error-subtle: var(--dk-text-control-default-on-error-subtle-level-0);
  --_reset-text-control-default-on-information-subtle: var(--dk-text-control-default-on-information-subtle-level-0);
  --_reset-text-control-default-on-primary-subtle: var(--dk-text-control-default-on-primary-subtle-level-0);
  --_reset-text-control-default-on-success-subtle: var(--dk-text-control-default-on-success-subtle-level-0);
  --_reset-text-control-default-on-warning-subtle: var(--dk-text-control-default-on-warning-subtle-level-0);
  --_reset-text-control-disabled: var(--dk-color-neutral-200);
  --_reset-text-control-disabled-on-error-subtle: var(--dk-text-control-disabled-on-error-subtle-level-0);
  --_reset-text-control-disabled-on-information-subtle: var(--dk-text-control-disabled-on-information-subtle-level-0);
  --_reset-text-control-disabled-on-primary-subtle: var(--dk-text-control-disabled-on-primary-subtle-level-0);
  --_reset-text-control-disabled-on-success-subtle: var(--dk-text-control-disabled-on-success-subtle-level-0);
  --_reset-text-control-disabled-on-warning-subtle: var(--dk-text-control-disabled-on-warning-subtle-level-0);
  --_reset-text-control-hover: var(--dk-color-neutral-700);
  --_reset-text-control-hover-on-error-subtle: var(--dk-text-control-hover-on-error-subtle-level-0);
  --_reset-text-control-hover-on-information-subtle: var(--dk-text-control-hover-on-information-subtle-level-0);
  --_reset-text-control-hover-on-primary-subtle: var(--dk-text-control-hover-on-primary-subtle-level-0);
  --_reset-text-control-hover-on-success-subtle: var(--dk-text-control-hover-on-success-subtle-level-0);
  --_reset-text-control-hover-on-warning-subtle: var(--dk-text-control-hover-on-warning-subtle-level-0);
  --_reset-text-default: var(--dk-color-base-black);
  --_reset-text-disabled-default: var(--dk-color-neutral-400);
  --_reset-text-disabled-subtle: var(--dk-color-neutral-200);
  --_reset-text-error-default: var(--dk-color-error-500);
  --_reset-text-error-on-tint: var(--dk-color-error-700);
  --_reset-text-error-outline: var(--dk-text-error-on-subtle);
  --_reset-text-field-affix: var(--dk-color-neutral-600);
  --_reset-text-field-disabled: var(--dk-color-neutral-200);
  --_reset-text-information-default: var(--dk-color-information-500);
  --_reset-text-information-on-tint: var(--dk-color-information-700);
  --_reset-text-information-outline: var(--dk-text-information-on-subtle);
  --_reset-text-link-active: var(--dk-color-primary-800);
  --_reset-text-link-default: var(--dk-color-primary-600);
  --_reset-text-link-hover: var(--dk-color-primary-700);
  --_reset-text-link-underline: var(--dk-color-primary-300);
  --_reset-text-neutral-default: var(--dk-color-neutral-600);
  --_reset-text-neutral-on-tint: var(--dk-color-neutral-600);
  --_reset-text-neutral-subtle: var(--dk-color-neutral-500);
  --_reset-text-neutral-subtle-focus: var(--dk-color-neutral-700);
  --_reset-text-neutral-subtle-hover: var(--dk-color-neutral-600);
  --_reset-text-on-error-fill: var(--dk-text-base-white);
  --_reset-text-on-error-mark: var(--dk-text-base-white);
  --_reset-text-on-information-fill: var(--dk-text-base-white);
  --_reset-text-on-information-mark: var(--dk-text-base-white);
  --_reset-text-on-primary-fill: var(--dk-text-base-white);
  --_reset-text-on-primary-mark: var(--dk-text-base-white);
  --_reset-text-on-success-fill: var(--dk-text-base-white);
  --_reset-text-on-success-mark: var(--dk-text-base-white);
  --_reset-text-on-warning-fill: var(--dk-text-base-white);
  --_reset-text-on-warning-mark: var(--dk-text-base-white);
  --_reset-text-primary-brand: var(--dk-color-primary-500);
  --_reset-text-primary-default: var(--dk-color-primary-500);
  --_reset-text-primary-on-tint: var(--dk-color-primary-700);
  --_reset-text-primary-outline: var(--dk-text-primary-on-subtle);
  --_reset-text-success-default: var(--dk-color-primary-500);
  --_reset-text-success-on-tint: var(--dk-color-primary-700);
  --_reset-text-success-outline: var(--dk-text-success-on-subtle);
  --_reset-text-warning-default: var(--dk-color-warning-500);
  --_reset-text-warning-on-tint: var(--dk-color-warning-700);
  --_reset-text-warning-outline: var(--dk-text-warning-on-subtle);
}
[data-theme="dark"] {
  --_reset-border-control-active: var(--dk-color-neutral-600);
  --_reset-border-control-active-on-error-subtle: var(--dk-border-control-active-on-error-subtle-level-0);
  --_reset-border-control-active-on-information-subtle: var(--dk-border-control-active-on-information-subtle-level-0);
  --_reset-border-control-active-on-primary-subtle: var(--dk-border-control-active-on-primary-subtle-level-0);
  --_reset-border-control-active-on-success-subtle: var(--dk-border-control-active-on-success-subtle-level-0);
  --_reset-border-control-active-on-warning-subtle: var(--dk-border-control-active-on-warning-subtle-level-0);
  --_reset-border-control-default: var(--dk-color-neutral-800);
  --_reset-border-control-default-on-error-subtle: var(--dk-border-control-default-on-error-subtle-level-0);
  --_reset-border-control-default-on-information-subtle: var(--dk-border-control-default-on-information-subtle-level-0);
  --_reset-border-control-default-on-primary-subtle: var(--dk-border-control-default-on-primary-subtle-level-0);
  --_reset-border-control-default-on-success-subtle: var(--dk-border-control-default-on-success-subtle-level-0);
  --_reset-border-control-default-on-warning-subtle: var(--dk-border-control-default-on-warning-subtle-level-0);
  --_reset-border-control-hover: var(--dk-color-neutral-700);
  --_reset-border-control-hover-on-error-subtle: var(--dk-border-control-hover-on-error-subtle-level-0);
  --_reset-border-control-hover-on-information-subtle: var(--dk-border-control-hover-on-information-subtle-level-0);
  --_reset-border-control-hover-on-primary-subtle: var(--dk-border-control-hover-on-primary-subtle-level-0);
  --_reset-border-control-hover-on-success-subtle: var(--dk-border-control-hover-on-success-subtle-level-0);
  --_reset-border-control-hover-on-warning-subtle: var(--dk-border-control-hover-on-warning-subtle-level-0);
  --_reset-border-control-lifted-active: var(--dk-color-neutral-650);
  --_reset-border-control-lifted-default: var(--dk-color-neutral-850);
  --_reset-border-control-lifted-hover: var(--dk-color-neutral-750);
  --_reset-border-disabled-default: var(--dk-color-neutral-400);
  --_reset-border-disabled-elevation: var(--dk-color-neutral-300);
  --_reset-border-disabled-subtle: var(--dk-color-neutral-800);
  --_reset-border-error-default: var(--dk-color-error-400);
  --_reset-border-error-focus: var(--dk-color-error-200);
  --_reset-border-error-hairline: var(--dk-color-error-800);
  --_reset-border-error-hover: var(--dk-color-error-300);
  --_reset-border-field-disabled: var(--dk-color-neutral-800);
  --_reset-border-field-focus-ring: var(--dk-color-primary-600);
  --_reset-border-field-raised-default: var(--dk-color-neutral-850);
  --_reset-border-hairline-current: var(--dk-border-hairline-level-0);
  --_reset-border-information-default: var(--dk-color-information-400);
  --_reset-border-information-focus: var(--dk-color-information-200);
  --_reset-border-information-hairline: var(--dk-color-information-800);
  --_reset-border-information-hover: var(--dk-color-information-300);
  --_reset-border-nested-active: var(--dk-color-neutral-500);
  --_reset-border-nested-default: var(--dk-color-neutral-700);
  --_reset-border-nested-hover: var(--dk-color-neutral-600);
  --_reset-border-neutral-hairline: var(--dk-color-neutral-600);
  --_reset-border-neutral-subtle: var(--dk-color-neutral-600);
  --_reset-border-neutral-subtle-focus: var(--dk-color-neutral-400);
  --_reset-border-neutral-subtle-hover: var(--dk-color-neutral-500);
  --_reset-border-primary-default: var(--dk-color-primary-400);
  --_reset-border-primary-focus: var(--dk-color-primary-200);
  --_reset-border-primary-hairline: var(--dk-color-primary-800);
  --_reset-border-primary-hover: var(--dk-color-primary-300);
  --_reset-border-raised-active: var(--dk-color-neutral-600);
  --_reset-border-raised-control-active: var(--dk-color-neutral-650);
  --_reset-border-raised-control-default: var(--dk-color-neutral-850);
  --_reset-border-raised-control-hover: var(--dk-color-neutral-750);
  --_reset-border-raised-default: var(--dk-color-neutral-800);
  --_reset-border-raised-hover: var(--dk-color-neutral-700);
  --_reset-border-success-default: var(--dk-color-primary-400);
  --_reset-border-success-focus: var(--dk-color-primary-200);
  --_reset-border-success-hover: var(--dk-color-primary-300);
  --_reset-border-warning-default: var(--dk-color-warning-400);
  --_reset-border-warning-focus: var(--dk-color-warning-200);
  --_reset-border-warning-hairline: var(--dk-color-warning-800);
  --_reset-border-warning-hover: var(--dk-color-warning-300);
  --_reset-icon-choice-disabled: var(--dk-color-neutral-500);
  --_reset-icon-control-active: var(--dk-color-neutral-50);
  --_reset-icon-control-active-on-error-subtle: var(--dk-icon-control-active-on-error-subtle-level-0);
  --_reset-icon-control-active-on-information-subtle: var(--dk-icon-control-active-on-information-subtle-level-0);
  --_reset-icon-control-active-on-primary-subtle: var(--dk-icon-control-active-on-primary-subtle-level-0);
  --_reset-icon-control-active-on-success-subtle: var(--dk-icon-control-active-on-success-subtle-level-0);
  --_reset-icon-control-active-on-warning-subtle: var(--dk-icon-control-active-on-warning-subtle-level-0);
  --_reset-icon-control-default: var(--dk-color-neutral-200);
  --_reset-icon-control-default-on-error-subtle: var(--dk-icon-control-default-on-error-subtle-level-0);
  --_reset-icon-control-default-on-information-subtle: var(--dk-icon-control-default-on-information-subtle-level-0);
  --_reset-icon-control-default-on-primary-subtle: var(--dk-icon-control-default-on-primary-subtle-level-0);
  --_reset-icon-control-default-on-success-subtle: var(--dk-icon-control-default-on-success-subtle-level-0);
  --_reset-icon-control-default-on-warning-subtle: var(--dk-icon-control-default-on-warning-subtle-level-0);
  --_reset-icon-control-disabled: var(--dk-color-neutral-800);
  --_reset-icon-control-disabled-on-error-subtle: var(--dk-icon-control-disabled-on-error-subtle-level-0);
  --_reset-icon-control-disabled-on-information-subtle: var(--dk-icon-control-disabled-on-information-subtle-level-0);
  --_reset-icon-control-disabled-on-primary-subtle: var(--dk-icon-control-disabled-on-primary-subtle-level-0);
  --_reset-icon-control-disabled-on-success-subtle: var(--dk-icon-control-disabled-on-success-subtle-level-0);
  --_reset-icon-control-disabled-on-warning-subtle: var(--dk-icon-control-disabled-on-warning-subtle-level-0);
  --_reset-icon-control-hover: var(--dk-color-neutral-100);
  --_reset-icon-control-hover-on-error-subtle: var(--dk-icon-control-hover-on-error-subtle-level-0);
  --_reset-icon-control-hover-on-information-subtle: var(--dk-icon-control-hover-on-information-subtle-level-0);
  --_reset-icon-control-hover-on-primary-subtle: var(--dk-icon-control-hover-on-primary-subtle-level-0);
  --_reset-icon-control-hover-on-success-subtle: var(--dk-icon-control-hover-on-success-subtle-level-0);
  --_reset-icon-control-hover-on-warning-subtle: var(--dk-icon-control-hover-on-warning-subtle-level-0);
  --_reset-icon-default-body: var(--dk-color-base-white);
  --_reset-icon-disabled-default: var(--dk-color-neutral-400);
  --_reset-icon-disabled-subtle: var(--dk-color-neutral-800);
  --_reset-icon-error-default: var(--dk-color-error-400);
  --_reset-icon-field-default: var(--dk-color-neutral-200);
  --_reset-icon-field-disabled: var(--dk-color-neutral-800);
  --_reset-icon-information-default: var(--dk-color-information-400);
  --_reset-icon-neutral-default: var(--dk-color-neutral-400);
  --_reset-icon-neutral-subtle: var(--dk-color-neutral-600);
  --_reset-icon-on-error-fill: var(--dk-icon-base-white);
  --_reset-icon-on-error-mark: var(--dk-icon-base-white);
  --_reset-icon-on-information-fill: var(--dk-icon-base-white);
  --_reset-icon-on-information-mark: var(--dk-icon-base-white);
  --_reset-icon-on-primary-fill: var(--dk-icon-base-white);
  --_reset-icon-on-primary-mark: var(--dk-icon-base-white);
  --_reset-icon-on-success-fill: var(--dk-icon-base-white);
  --_reset-icon-on-success-mark: var(--dk-icon-base-white);
  --_reset-icon-on-warning-fill: var(--dk-icon-base-white);
  --_reset-icon-on-warning-mark: var(--dk-icon-base-white);
  --_reset-icon-primary-default: var(--dk-color-primary-400);
  --_reset-icon-success-default: var(--dk-color-primary-400);
  --_reset-icon-warning-default: var(--dk-color-warning-400);
  --_reset-interactive-tone-fill-active: initial;
  --_reset-interactive-tone-fill-hover: initial;
  --_reset-interactive-tone-mark: initial;
  --_reset-interactive-tone-mark-active: initial;
  --_reset-interactive-tone-mark-hover: initial;
  --_reset-interactive-tone-text: initial;
  --_reset-interactive-tone-text-subtle: initial;
  --_reset-surface-choice-disabled: var(--dk-color-neutral-800);
  --_reset-surface-control-active: var(--dk-color-neutral-800);
  --_reset-surface-control-active-on-error-subtle: var(--dk-surface-control-active-on-error-subtle-level-0);
  --_reset-surface-control-active-on-information-subtle: var(--dk-surface-control-active-on-information-subtle-level-0);
  --_reset-surface-control-active-on-primary-subtle: var(--dk-surface-control-active-on-primary-subtle-level-0);
  --_reset-surface-control-active-on-success-subtle: var(--dk-surface-control-active-on-success-subtle-level-0);
  --_reset-surface-control-active-on-warning-subtle: var(--dk-surface-control-active-on-warning-subtle-level-0);
  --_reset-surface-control-default: var(--dk-color-neutral-1000);
  --_reset-surface-control-default-on-error-subtle: var(--dk-surface-control-default-on-error-subtle-level-0);
  --_reset-surface-control-default-on-information-subtle: var(--dk-surface-control-default-on-information-subtle-level-0);
  --_reset-surface-control-default-on-primary-subtle: var(--dk-surface-control-default-on-primary-subtle-level-0);
  --_reset-surface-control-default-on-success-subtle: var(--dk-surface-control-default-on-success-subtle-level-0);
  --_reset-surface-control-default-on-warning-subtle: var(--dk-surface-control-default-on-warning-subtle-level-0);
  --_reset-surface-control-disabled: var(--dk-color-neutral-1000);
  --_reset-surface-control-disabled-on-error-subtle: var(--dk-surface-control-disabled-on-error-subtle-level-0);
  --_reset-surface-control-disabled-on-information-subtle: var(--dk-surface-control-disabled-on-information-subtle-level-0);
  --_reset-surface-control-disabled-on-primary-subtle: var(--dk-surface-control-disabled-on-primary-subtle-level-0);
  --_reset-surface-control-disabled-on-success-subtle: var(--dk-surface-control-disabled-on-success-subtle-level-0);
  --_reset-surface-control-disabled-on-warning-subtle: var(--dk-surface-control-disabled-on-warning-subtle-level-0);
  --_reset-surface-control-hover: var(--dk-color-neutral-900);
  --_reset-surface-control-hover-on-error-subtle: var(--dk-surface-control-hover-on-error-subtle-level-0);
  --_reset-surface-control-hover-on-information-subtle: var(--dk-surface-control-hover-on-information-subtle-level-0);
  --_reset-surface-control-hover-on-primary-subtle: var(--dk-surface-control-hover-on-primary-subtle-level-0);
  --_reset-surface-control-hover-on-success-subtle: var(--dk-surface-control-hover-on-success-subtle-level-0);
  --_reset-surface-control-hover-on-warning-subtle: var(--dk-surface-control-hover-on-warning-subtle-level-0);
  --_reset-surface-current: var(--dk-surface-level-0);
  --_reset-surface-disabled-default: var(--dk-color-neutral-300);
  --_reset-surface-disabled-subtle: var(--dk-color-neutral-1000);
  --_reset-surface-error-default: var(--dk-color-error-700);
  --_reset-surface-error-focus: var(--dk-color-error-500);
  --_reset-surface-error-hover: var(--dk-color-error-600);
  --_reset-surface-error-mark: var(--dk-color-error-600);
  --_reset-surface-error-subtle: var(--dk-color-error-900);
  --_reset-surface-error-subtle-focus: var(--dk-color-error-700);
  --_reset-surface-error-subtle-hover: var(--dk-color-error-800);
  --_reset-surface-field-action-active: var(--dk-color-neutral-700);
  --_reset-surface-field-action-hover: var(--dk-color-neutral-800);
  --_reset-surface-field-default: var(--dk-color-neutral-1100);
  --_reset-surface-field-hover: var(--dk-color-neutral-900);
  --_reset-surface-information-default: var(--dk-color-information-600);
  --_reset-surface-information-focus: var(--dk-color-information-400);
  --_reset-surface-information-hover: var(--dk-color-information-500);
  --_reset-surface-information-mark: var(--dk-color-information-600);
  --_reset-surface-information-subtle: var(--dk-color-information-900);
  --_reset-surface-lifted-active: var(--dk-color-neutral-800);
  --_reset-surface-lifted-default: var(--dk-color-neutral-1000);
  --_reset-surface-lifted-hover: var(--dk-color-neutral-900);
  --_reset-surface-nested-active: var(--dk-color-neutral-700);
  --_reset-surface-nested-default: var(--dk-color-neutral-900);
  --_reset-surface-nested-hover: var(--dk-color-neutral-800);
  --_reset-surface-neutral-subtle: var(--dk-color-neutral-900);
  --_reset-surface-neutral-subtle-active: var(--dk-color-neutral-700);
  --_reset-surface-neutral-subtle-focus: var(--dk-color-neutral-700);
  --_reset-surface-neutral-subtle-hover: var(--dk-color-neutral-800);
  --_reset-surface-primary-active: var(--dk-color-primary-300);
  --_reset-surface-primary-brand: var(--dk-color-primary-400);
  --_reset-surface-primary-default: var(--dk-color-primary-500);
  --_reset-surface-primary-focus: var(--dk-color-primary-300);
  --_reset-surface-primary-hover: var(--dk-color-primary-400);
  --_reset-surface-primary-mark: var(--dk-color-primary-600);
  --_reset-surface-primary-subtle: var(--dk-color-primary-850);
  --_reset-surface-primary-subtle-focus: var(--dk-color-primary-700);
  --_reset-surface-primary-subtle-hover: var(--dk-color-primary-800);
  --_reset-surface-raised-active: var(--dk-color-neutral-800);
  --_reset-surface-raised-default: var(--dk-color-neutral-1000);
  --_reset-surface-raised-hover: var(--dk-color-neutral-900);
  --_reset-surface-success-default: var(--dk-color-primary-500);
  --_reset-surface-success-focus: var(--dk-color-primary-300);
  --_reset-surface-success-hover: var(--dk-color-primary-400);
  --_reset-surface-success-mark: var(--dk-color-primary-600);
  --_reset-surface-success-subtle: var(--dk-color-primary-850);
  --_reset-surface-warning-default: var(--dk-color-warning-600);
  --_reset-surface-warning-focus: var(--dk-color-warning-400);
  --_reset-surface-warning-hover: var(--dk-color-warning-500);
  --_reset-surface-warning-mark: var(--dk-color-warning-600);
  --_reset-surface-warning-subtle: var(--dk-color-warning-900);
  --_reset-text-control-active: var(--dk-color-neutral-50);
  --_reset-text-control-active-on-error-subtle: var(--dk-text-control-active-on-error-subtle-level-0);
  --_reset-text-control-active-on-information-subtle: var(--dk-text-control-active-on-information-subtle-level-0);
  --_reset-text-control-active-on-primary-subtle: var(--dk-text-control-active-on-primary-subtle-level-0);
  --_reset-text-control-active-on-success-subtle: var(--dk-text-control-active-on-success-subtle-level-0);
  --_reset-text-control-active-on-warning-subtle: var(--dk-text-control-active-on-warning-subtle-level-0);
  --_reset-text-control-default: var(--dk-color-neutral-200);
  --_reset-text-control-default-on-error-subtle: var(--dk-text-control-default-on-error-subtle-level-0);
  --_reset-text-control-default-on-information-subtle: var(--dk-text-control-default-on-information-subtle-level-0);
  --_reset-text-control-default-on-primary-subtle: var(--dk-text-control-default-on-primary-subtle-level-0);
  --_reset-text-control-default-on-success-subtle: var(--dk-text-control-default-on-success-subtle-level-0);
  --_reset-text-control-default-on-warning-subtle: var(--dk-text-control-default-on-warning-subtle-level-0);
  --_reset-text-control-disabled: var(--dk-color-neutral-700);
  --_reset-text-control-disabled-on-error-subtle: var(--dk-text-control-disabled-on-error-subtle-level-0);
  --_reset-text-control-disabled-on-information-subtle: var(--dk-text-control-disabled-on-information-subtle-level-0);
  --_reset-text-control-disabled-on-primary-subtle: var(--dk-text-control-disabled-on-primary-subtle-level-0);
  --_reset-text-control-disabled-on-success-subtle: var(--dk-text-control-disabled-on-success-subtle-level-0);
  --_reset-text-control-disabled-on-warning-subtle: var(--dk-text-control-disabled-on-warning-subtle-level-0);
  --_reset-text-control-hover: var(--dk-color-neutral-100);
  --_reset-text-control-hover-on-error-subtle: var(--dk-text-control-hover-on-error-subtle-level-0);
  --_reset-text-control-hover-on-information-subtle: var(--dk-text-control-hover-on-information-subtle-level-0);
  --_reset-text-control-hover-on-primary-subtle: var(--dk-text-control-hover-on-primary-subtle-level-0);
  --_reset-text-control-hover-on-success-subtle: var(--dk-text-control-hover-on-success-subtle-level-0);
  --_reset-text-control-hover-on-warning-subtle: var(--dk-text-control-hover-on-warning-subtle-level-0);
  --_reset-text-default: var(--dk-color-base-white);
  --_reset-text-disabled-default: var(--dk-color-neutral-400);
  --_reset-text-disabled-subtle: var(--dk-color-neutral-700);
  --_reset-text-error-default: var(--dk-color-error-400);
  --_reset-text-error-on-tint: var(--dk-color-error-200);
  --_reset-text-error-outline: var(--dk-text-error-on-subtle);
  --_reset-text-field-affix: var(--dk-color-neutral-200);
  --_reset-text-field-disabled: var(--dk-color-neutral-700);
  --_reset-text-information-default: var(--dk-color-information-400);
  --_reset-text-information-on-tint: var(--dk-color-information-200);
  --_reset-text-information-outline: var(--dk-text-information-on-subtle);
  --_reset-text-link-active: var(--dk-color-primary-300);
  --_reset-text-link-default: var(--dk-color-primary-500);
  --_reset-text-link-hover: var(--dk-color-primary-400);
  --_reset-text-link-underline: var(--dk-color-primary-700);
  --_reset-text-neutral-default: var(--dk-color-neutral-200);
  --_reset-text-neutral-on-tint: var(--dk-color-neutral-200);
  --_reset-text-neutral-subtle: var(--dk-color-neutral-400);
  --_reset-text-neutral-subtle-focus: var(--dk-color-neutral-200);
  --_reset-text-neutral-subtle-hover: var(--dk-color-neutral-300);
  --_reset-text-on-error-fill: var(--dk-text-base-white);
  --_reset-text-on-error-mark: var(--dk-text-base-white);
  --_reset-text-on-information-fill: var(--dk-text-base-white);
  --_reset-text-on-information-mark: var(--dk-text-base-white);
  --_reset-text-on-primary-fill: var(--dk-text-base-white);
  --_reset-text-on-primary-mark: var(--dk-text-base-white);
  --_reset-text-on-success-fill: var(--dk-text-base-white);
  --_reset-text-on-success-mark: var(--dk-text-base-white);
  --_reset-text-on-warning-fill: var(--dk-text-base-white);
  --_reset-text-on-warning-mark: var(--dk-text-base-white);
  --_reset-text-primary-brand: var(--dk-color-primary-400);
  --_reset-text-primary-default: var(--dk-color-primary-400);
  --_reset-text-primary-on-tint: var(--dk-color-primary-200);
  --_reset-text-primary-outline: var(--dk-text-primary-on-subtle);
  --_reset-text-success-default: var(--dk-color-primary-400);
  --_reset-text-success-on-tint: var(--dk-color-primary-200);
  --_reset-text-success-outline: var(--dk-text-success-on-subtle);
  --_reset-text-warning-default: var(--dk-color-warning-400);
  --_reset-text-warning-on-tint: var(--dk-color-warning-200);
  --_reset-text-warning-outline: var(--dk-text-warning-on-subtle);
}
[data-theme="dark"] [data-tone="inverse"]:not([data-theme]),
[data-theme="dark"][data-tone="inverse"] {
  --_reset-border-control-active: var(--dk-color-neutral-300);
  --_reset-border-control-active-on-error-subtle: var(--dk-border-control-active-on-error-subtle-level-0);
  --_reset-border-control-active-on-information-subtle: var(--dk-border-control-active-on-information-subtle-level-0);
  --_reset-border-control-active-on-primary-subtle: var(--dk-border-control-active-on-primary-subtle-level-0);
  --_reset-border-control-active-on-success-subtle: var(--dk-border-control-active-on-success-subtle-level-0);
  --_reset-border-control-active-on-warning-subtle: var(--dk-border-control-active-on-warning-subtle-level-0);
  --_reset-border-control-default: var(--dk-color-neutral-100);
  --_reset-border-control-default-on-error-subtle: var(--dk-border-control-default-on-error-subtle-level-0);
  --_reset-border-control-default-on-information-subtle: var(--dk-border-control-default-on-information-subtle-level-0);
  --_reset-border-control-default-on-primary-subtle: var(--dk-border-control-default-on-primary-subtle-level-0);
  --_reset-border-control-default-on-success-subtle: var(--dk-border-control-default-on-success-subtle-level-0);
  --_reset-border-control-default-on-warning-subtle: var(--dk-border-control-default-on-warning-subtle-level-0);
  --_reset-border-control-hover: var(--dk-color-neutral-200);
  --_reset-border-control-hover-on-error-subtle: var(--dk-border-control-hover-on-error-subtle-level-0);
  --_reset-border-control-hover-on-information-subtle: var(--dk-border-control-hover-on-information-subtle-level-0);
  --_reset-border-control-hover-on-primary-subtle: var(--dk-border-control-hover-on-primary-subtle-level-0);
  --_reset-border-control-hover-on-success-subtle: var(--dk-border-control-hover-on-success-subtle-level-0);
  --_reset-border-control-hover-on-warning-subtle: var(--dk-border-control-hover-on-warning-subtle-level-0);
  --_reset-border-control-lifted-active: var(--dk-color-neutral-200);
  --_reset-border-control-lifted-default: var(--dk-color-neutral-50);
  --_reset-border-control-lifted-hover: var(--dk-color-neutral-100);
  --_reset-border-disabled-default: var(--dk-color-neutral-400);
  --_reset-border-disabled-elevation: var(--dk-color-neutral-200);
  --_reset-border-disabled-subtle: var(--dk-color-neutral-50);
  --_reset-border-error-default: var(--dk-color-error-500);
  --_reset-border-error-focus: var(--dk-color-error-700);
  --_reset-border-error-hairline: var(--dk-color-error-300);
  --_reset-border-error-hover: var(--dk-color-error-600);
  --_reset-border-field-disabled: var(--dk-color-neutral-100);
  --_reset-border-field-focus-ring: var(--dk-color-primary-300);
  --_reset-border-field-raised-default: var(--dk-color-neutral-50);
  --_reset-border-hairline-current: var(--dk-border-hairline-level-0);
  --_reset-border-information-default: var(--dk-color-information-500);
  --_reset-border-information-focus: var(--dk-color-information-700);
  --_reset-border-information-hairline: var(--dk-color-information-300);
  --_reset-border-information-hover: var(--dk-color-information-600);
  --_reset-border-nested-active: var(--dk-color-neutral-300);
  --_reset-border-nested-default: var(--dk-color-neutral-100);
  --_reset-border-nested-hover: var(--dk-color-neutral-200);
  --_reset-border-neutral-hairline: var(--dk-color-neutral-200);
  --_reset-border-neutral-subtle: var(--dk-color-neutral-200);
  --_reset-border-neutral-subtle-focus: var(--dk-color-neutral-500);
  --_reset-border-neutral-subtle-hover: var(--dk-color-neutral-400);
  --_reset-border-primary-default: var(--dk-color-primary-600);
  --_reset-border-primary-focus: var(--dk-color-primary-800);
  --_reset-border-primary-hairline: var(--dk-color-primary-300);
  --_reset-border-primary-hover: var(--dk-color-primary-700);
  --_reset-border-raised-active: var(--dk-color-neutral-200);
  --_reset-border-raised-control-active: var(--dk-color-neutral-100);
  --_reset-border-raised-control-default: var(--dk-color-neutral-25);
  --_reset-border-raised-control-hover: var(--dk-color-neutral-50);
  --_reset-border-raised-default: var(--dk-color-neutral-50);
  --_reset-border-raised-hover: var(--dk-color-neutral-100);
  --_reset-border-success-default: var(--dk-color-primary-600);
  --_reset-border-success-focus: var(--dk-color-primary-800);
  --_reset-border-success-hover: var(--dk-color-primary-700);
  --_reset-border-warning-default: var(--dk-color-warning-500);
  --_reset-border-warning-focus: var(--dk-color-warning-700);
  --_reset-border-warning-hairline: var(--dk-color-warning-300);
  --_reset-border-warning-hover: var(--dk-color-warning-600);
  --_reset-icon-choice-disabled: var(--dk-color-neutral-500);
  --_reset-icon-control-active: var(--dk-color-neutral-700);
  --_reset-icon-control-active-on-error-subtle: var(--dk-icon-control-active-on-error-subtle-level-0);
  --_reset-icon-control-active-on-information-subtle: var(--dk-icon-control-active-on-information-subtle-level-0);
  --_reset-icon-control-active-on-primary-subtle: var(--dk-icon-control-active-on-primary-subtle-level-0);
  --_reset-icon-control-active-on-success-subtle: var(--dk-icon-control-active-on-success-subtle-level-0);
  --_reset-icon-control-active-on-warning-subtle: var(--dk-icon-control-active-on-warning-subtle-level-0);
  --_reset-icon-control-default: var(--dk-color-neutral-500);
  --_reset-icon-control-default-on-error-subtle: var(--dk-icon-control-default-on-error-subtle-level-0);
  --_reset-icon-control-default-on-information-subtle: var(--dk-icon-control-default-on-information-subtle-level-0);
  --_reset-icon-control-default-on-primary-subtle: var(--dk-icon-control-default-on-primary-subtle-level-0);
  --_reset-icon-control-default-on-success-subtle: var(--dk-icon-control-default-on-success-subtle-level-0);
  --_reset-icon-control-default-on-warning-subtle: var(--dk-icon-control-default-on-warning-subtle-level-0);
  --_reset-icon-control-disabled: var(--dk-color-neutral-100);
  --_reset-icon-control-disabled-on-error-subtle: var(--dk-icon-control-disabled-on-error-subtle-level-0);
  --_reset-icon-control-disabled-on-information-subtle: var(--dk-icon-control-disabled-on-information-subtle-level-0);
  --_reset-icon-control-disabled-on-primary-subtle: var(--dk-icon-control-disabled-on-primary-subtle-level-0);
  --_reset-icon-control-disabled-on-success-subtle: var(--dk-icon-control-disabled-on-success-subtle-level-0);
  --_reset-icon-control-disabled-on-warning-subtle: var(--dk-icon-control-disabled-on-warning-subtle-level-0);
  --_reset-icon-control-hover: var(--dk-color-neutral-600);
  --_reset-icon-control-hover-on-error-subtle: var(--dk-icon-control-hover-on-error-subtle-level-0);
  --_reset-icon-control-hover-on-information-subtle: var(--dk-icon-control-hover-on-information-subtle-level-0);
  --_reset-icon-control-hover-on-primary-subtle: var(--dk-icon-control-hover-on-primary-subtle-level-0);
  --_reset-icon-control-hover-on-success-subtle: var(--dk-icon-control-hover-on-success-subtle-level-0);
  --_reset-icon-control-hover-on-warning-subtle: var(--dk-icon-control-hover-on-warning-subtle-level-0);
  --_reset-icon-default-body: var(--dk-color-base-black);
  --_reset-icon-disabled-default: var(--dk-color-neutral-400);
  --_reset-icon-disabled-subtle: var(--dk-color-neutral-100);
  --_reset-icon-error-default: var(--dk-color-error-500);
  --_reset-icon-field-default: var(--dk-color-neutral-500);
  --_reset-icon-field-disabled: var(--dk-color-neutral-100);
  --_reset-icon-information-default: var(--dk-color-information-500);
  --_reset-icon-neutral-default: var(--dk-color-neutral-500);
  --_reset-icon-neutral-subtle: var(--dk-color-neutral-300);
  --_reset-icon-on-error-fill: var(--dk-icon-base-white);
  --_reset-icon-on-error-mark: var(--dk-icon-base-white);
  --_reset-icon-on-information-fill: var(--dk-icon-base-white);
  --_reset-icon-on-information-mark: var(--dk-icon-base-white);
  --_reset-icon-on-primary-fill: var(--dk-icon-base-white);
  --_reset-icon-on-primary-mark: var(--dk-icon-base-white);
  --_reset-icon-on-success-fill: var(--dk-icon-base-white);
  --_reset-icon-on-success-mark: var(--dk-icon-base-white);
  --_reset-icon-on-warning-fill: var(--dk-icon-base-white);
  --_reset-icon-on-warning-mark: var(--dk-icon-base-white);
  --_reset-icon-primary-default: var(--dk-color-primary-500);
  --_reset-icon-success-default: var(--dk-color-primary-500);
  --_reset-icon-warning-default: var(--dk-color-warning-500);
  --_reset-interactive-tone-fill-active: initial;
  --_reset-interactive-tone-fill-hover: initial;
  --_reset-interactive-tone-mark: initial;
  --_reset-interactive-tone-mark-active: initial;
  --_reset-interactive-tone-mark-hover: initial;
  --_reset-interactive-tone-text: initial;
  --_reset-interactive-tone-text-subtle: initial;
  --_reset-surface-choice-disabled: var(--dk-color-neutral-100);
  --_reset-surface-control-active: var(--dk-color-neutral-100);
  --_reset-surface-control-active-on-error-subtle: var(--dk-surface-control-active-on-error-subtle-level-0);
  --_reset-surface-control-active-on-information-subtle: var(--dk-surface-control-active-on-information-subtle-level-0);
  --_reset-surface-control-active-on-primary-subtle: var(--dk-surface-control-active-on-primary-subtle-level-0);
  --_reset-surface-control-active-on-success-subtle: var(--dk-surface-control-active-on-success-subtle-level-0);
  --_reset-surface-control-active-on-warning-subtle: var(--dk-surface-control-active-on-warning-subtle-level-0);
  --_reset-surface-control-default: var(--dk-color-neutral-25);
  --_reset-surface-control-default-on-error-subtle: var(--dk-surface-control-default-on-error-subtle-level-0);
  --_reset-surface-control-default-on-information-subtle: var(--dk-surface-control-default-on-information-subtle-level-0);
  --_reset-surface-control-default-on-primary-subtle: var(--dk-surface-control-default-on-primary-subtle-level-0);
  --_reset-surface-control-default-on-success-subtle: var(--dk-surface-control-default-on-success-subtle-level-0);
  --_reset-surface-control-default-on-warning-subtle: var(--dk-surface-control-default-on-warning-subtle-level-0);
  --_reset-surface-control-disabled: var(--dk-color-neutral-25);
  --_reset-surface-control-disabled-on-error-subtle: var(--dk-surface-control-disabled-on-error-subtle-level-0);
  --_reset-surface-control-disabled-on-information-subtle: var(--dk-surface-control-disabled-on-information-subtle-level-0);
  --_reset-surface-control-disabled-on-primary-subtle: var(--dk-surface-control-disabled-on-primary-subtle-level-0);
  --_reset-surface-control-disabled-on-success-subtle: var(--dk-surface-control-disabled-on-success-subtle-level-0);
  --_reset-surface-control-disabled-on-warning-subtle: var(--dk-surface-control-disabled-on-warning-subtle-level-0);
  --_reset-surface-control-hover: var(--dk-color-neutral-50);
  --_reset-surface-control-hover-on-error-subtle: var(--dk-surface-control-hover-on-error-subtle-level-0);
  --_reset-surface-control-hover-on-information-subtle: var(--dk-surface-control-hover-on-information-subtle-level-0);
  --_reset-surface-control-hover-on-primary-subtle: var(--dk-surface-control-hover-on-primary-subtle-level-0);
  --_reset-surface-control-hover-on-success-subtle: var(--dk-surface-control-hover-on-success-subtle-level-0);
  --_reset-surface-control-hover-on-warning-subtle: var(--dk-surface-control-hover-on-warning-subtle-level-0);
  --_reset-surface-current: var(--dk-surface-level-0);
  --_reset-surface-disabled-default: var(--dk-color-neutral-300);
  --_reset-surface-disabled-subtle: var(--dk-color-neutral-25);
  --_reset-surface-error-default: var(--dk-color-error-500);
  --_reset-surface-error-focus: var(--dk-color-error-700);
  --_reset-surface-error-hover: var(--dk-color-error-600);
  --_reset-surface-error-mark: var(--dk-color-error-600);
  --_reset-surface-error-subtle: var(--dk-color-error-50);
  --_reset-surface-error-subtle-focus: var(--dk-color-error-200);
  --_reset-surface-error-subtle-hover: var(--dk-color-error-100);
  --_reset-surface-field-action-active: var(--dk-color-neutral-100);
  --_reset-surface-field-action-hover: var(--dk-color-neutral-50);
  --_reset-surface-field-default: var(--dk-color-base-white);
  --_reset-surface-field-hover: var(--dk-color-neutral-25);
  --_reset-surface-information-default: var(--dk-color-information-500);
  --_reset-surface-information-focus: var(--dk-color-information-700);
  --_reset-surface-information-hover: var(--dk-color-information-600);
  --_reset-surface-information-mark: var(--dk-color-information-600);
  --_reset-surface-information-subtle: var(--dk-color-information-50);
  --_reset-surface-lifted-active: var(--dk-color-neutral-100);
  --_reset-surface-lifted-default: var(--dk-color-neutral-25);
  --_reset-surface-lifted-hover: var(--dk-color-neutral-50);
  --_reset-surface-nested-active: var(--dk-color-neutral-100);
  --_reset-surface-nested-default: var(--dk-color-neutral-25);
  --_reset-surface-nested-hover: var(--dk-color-neutral-50);
  --_reset-surface-neutral-subtle: var(--dk-color-neutral-25);
  --_reset-surface-neutral-subtle-active: var(--dk-color-neutral-100);
  --_reset-surface-neutral-subtle-focus: var(--dk-color-neutral-100);
  --_reset-surface-neutral-subtle-hover: var(--dk-color-neutral-50);
  --_reset-surface-primary-active: var(--dk-color-primary-700);
  --_reset-surface-primary-brand: var(--dk-color-primary-500);
  --_reset-surface-primary-default: var(--dk-color-primary-500);
  --_reset-surface-primary-focus: var(--dk-color-primary-700);
  --_reset-surface-primary-hover: var(--dk-color-primary-600);
  --_reset-surface-primary-mark: var(--dk-color-primary-600);
  --_reset-surface-primary-subtle: var(--dk-color-primary-50);
  --_reset-surface-primary-subtle-focus: var(--dk-color-primary-200);
  --_reset-surface-primary-subtle-hover: var(--dk-color-primary-100);
  --_reset-surface-raised-active: var(--dk-color-neutral-50);
  --_reset-surface-raised-default: var(--dk-color-base-white);
  --_reset-surface-raised-hover: var(--dk-color-neutral-25);
  --_reset-surface-success-default: var(--dk-color-primary-500);
  --_reset-surface-success-focus: var(--dk-color-primary-700);
  --_reset-surface-success-hover: var(--dk-color-primary-600);
  --_reset-surface-success-mark: var(--dk-color-primary-600);
  --_reset-surface-success-subtle: var(--dk-color-primary-50);
  --_reset-surface-warning-default: var(--dk-color-warning-500);
  --_reset-surface-warning-focus: var(--dk-color-warning-700);
  --_reset-surface-warning-hover: var(--dk-color-warning-600);
  --_reset-surface-warning-mark: var(--dk-color-warning-600);
  --_reset-surface-warning-subtle: var(--dk-color-warning-50);
  --_reset-text-control-active: var(--dk-color-neutral-800);
  --_reset-text-control-active-on-error-subtle: var(--dk-text-control-active-on-error-subtle-level-0);
  --_reset-text-control-active-on-information-subtle: var(--dk-text-control-active-on-information-subtle-level-0);
  --_reset-text-control-active-on-primary-subtle: var(--dk-text-control-active-on-primary-subtle-level-0);
  --_reset-text-control-active-on-success-subtle: var(--dk-text-control-active-on-success-subtle-level-0);
  --_reset-text-control-active-on-warning-subtle: var(--dk-text-control-active-on-warning-subtle-level-0);
  --_reset-text-control-default: var(--dk-color-neutral-600);
  --_reset-text-control-default-on-error-subtle: var(--dk-text-control-default-on-error-subtle-level-0);
  --_reset-text-control-default-on-information-subtle: var(--dk-text-control-default-on-information-subtle-level-0);
  --_reset-text-control-default-on-primary-subtle: var(--dk-text-control-default-on-primary-subtle-level-0);
  --_reset-text-control-default-on-success-subtle: var(--dk-text-control-default-on-success-subtle-level-0);
  --_reset-text-control-default-on-warning-subtle: var(--dk-text-control-default-on-warning-subtle-level-0);
  --_reset-text-control-disabled: var(--dk-color-neutral-200);
  --_reset-text-control-disabled-on-error-subtle: var(--dk-text-control-disabled-on-error-subtle-level-0);
  --_reset-text-control-disabled-on-information-subtle: var(--dk-text-control-disabled-on-information-subtle-level-0);
  --_reset-text-control-disabled-on-primary-subtle: var(--dk-text-control-disabled-on-primary-subtle-level-0);
  --_reset-text-control-disabled-on-success-subtle: var(--dk-text-control-disabled-on-success-subtle-level-0);
  --_reset-text-control-disabled-on-warning-subtle: var(--dk-text-control-disabled-on-warning-subtle-level-0);
  --_reset-text-control-hover: var(--dk-color-neutral-700);
  --_reset-text-control-hover-on-error-subtle: var(--dk-text-control-hover-on-error-subtle-level-0);
  --_reset-text-control-hover-on-information-subtle: var(--dk-text-control-hover-on-information-subtle-level-0);
  --_reset-text-control-hover-on-primary-subtle: var(--dk-text-control-hover-on-primary-subtle-level-0);
  --_reset-text-control-hover-on-success-subtle: var(--dk-text-control-hover-on-success-subtle-level-0);
  --_reset-text-control-hover-on-warning-subtle: var(--dk-text-control-hover-on-warning-subtle-level-0);
  --_reset-text-default: var(--dk-color-base-black);
  --_reset-text-disabled-default: var(--dk-color-neutral-400);
  --_reset-text-disabled-subtle: var(--dk-color-neutral-200);
  --_reset-text-error-default: var(--dk-color-error-500);
  --_reset-text-error-on-tint: var(--dk-color-error-700);
  --_reset-text-error-outline: var(--dk-text-error-on-subtle);
  --_reset-text-field-affix: var(--dk-color-neutral-600);
  --_reset-text-field-disabled: var(--dk-color-neutral-200);
  --_reset-text-information-default: var(--dk-color-information-500);
  --_reset-text-information-on-tint: var(--dk-color-information-700);
  --_reset-text-information-outline: var(--dk-text-information-on-subtle);
  --_reset-text-link-active: var(--dk-color-primary-800);
  --_reset-text-link-default: var(--dk-color-primary-600);
  --_reset-text-link-hover: var(--dk-color-primary-700);
  --_reset-text-link-underline: var(--dk-color-primary-300);
  --_reset-text-neutral-default: var(--dk-color-neutral-600);
  --_reset-text-neutral-on-tint: var(--dk-color-neutral-600);
  --_reset-text-neutral-subtle: var(--dk-color-neutral-500);
  --_reset-text-neutral-subtle-focus: var(--dk-color-neutral-700);
  --_reset-text-neutral-subtle-hover: var(--dk-color-neutral-600);
  --_reset-text-on-error-fill: var(--dk-text-base-white);
  --_reset-text-on-error-mark: var(--dk-text-base-white);
  --_reset-text-on-information-fill: var(--dk-text-base-white);
  --_reset-text-on-information-mark: var(--dk-text-base-white);
  --_reset-text-on-primary-fill: var(--dk-text-base-white);
  --_reset-text-on-primary-mark: var(--dk-text-base-white);
  --_reset-text-on-success-fill: var(--dk-text-base-white);
  --_reset-text-on-success-mark: var(--dk-text-base-white);
  --_reset-text-on-warning-fill: var(--dk-text-base-white);
  --_reset-text-on-warning-mark: var(--dk-text-base-white);
  --_reset-text-primary-brand: var(--dk-color-primary-500);
  --_reset-text-primary-default: var(--dk-color-primary-500);
  --_reset-text-primary-on-tint: var(--dk-color-primary-700);
  --_reset-text-primary-outline: var(--dk-text-primary-on-subtle);
  --_reset-text-success-default: var(--dk-color-primary-500);
  --_reset-text-success-on-tint: var(--dk-color-primary-700);
  --_reset-text-success-outline: var(--dk-text-success-on-subtle);
  --_reset-text-warning-default: var(--dk-color-warning-500);
  --_reset-text-warning-on-tint: var(--dk-color-warning-700);
  --_reset-text-warning-outline: var(--dk-text-warning-on-subtle);
}
[data-theme="light"] [data-tone="inverse"]:not([data-theme]),
[data-theme="light"][data-tone="inverse"] {
  --_reset-border-control-active: var(--dk-color-neutral-600);
  --_reset-border-control-active-on-error-subtle: var(--dk-border-control-active-on-error-subtle-level-0);
  --_reset-border-control-active-on-information-subtle: var(--dk-border-control-active-on-information-subtle-level-0);
  --_reset-border-control-active-on-primary-subtle: var(--dk-border-control-active-on-primary-subtle-level-0);
  --_reset-border-control-active-on-success-subtle: var(--dk-border-control-active-on-success-subtle-level-0);
  --_reset-border-control-active-on-warning-subtle: var(--dk-border-control-active-on-warning-subtle-level-0);
  --_reset-border-control-default: var(--dk-color-neutral-800);
  --_reset-border-control-default-on-error-subtle: var(--dk-border-control-default-on-error-subtle-level-0);
  --_reset-border-control-default-on-information-subtle: var(--dk-border-control-default-on-information-subtle-level-0);
  --_reset-border-control-default-on-primary-subtle: var(--dk-border-control-default-on-primary-subtle-level-0);
  --_reset-border-control-default-on-success-subtle: var(--dk-border-control-default-on-success-subtle-level-0);
  --_reset-border-control-default-on-warning-subtle: var(--dk-border-control-default-on-warning-subtle-level-0);
  --_reset-border-control-hover: var(--dk-color-neutral-700);
  --_reset-border-control-hover-on-error-subtle: var(--dk-border-control-hover-on-error-subtle-level-0);
  --_reset-border-control-hover-on-information-subtle: var(--dk-border-control-hover-on-information-subtle-level-0);
  --_reset-border-control-hover-on-primary-subtle: var(--dk-border-control-hover-on-primary-subtle-level-0);
  --_reset-border-control-hover-on-success-subtle: var(--dk-border-control-hover-on-success-subtle-level-0);
  --_reset-border-control-hover-on-warning-subtle: var(--dk-border-control-hover-on-warning-subtle-level-0);
  --_reset-border-control-lifted-active: var(--dk-color-neutral-650);
  --_reset-border-control-lifted-default: var(--dk-color-neutral-850);
  --_reset-border-control-lifted-hover: var(--dk-color-neutral-750);
  --_reset-border-disabled-default: var(--dk-color-neutral-400);
  --_reset-border-disabled-elevation: var(--dk-color-neutral-300);
  --_reset-border-disabled-subtle: var(--dk-color-neutral-800);
  --_reset-border-error-default: var(--dk-color-error-400);
  --_reset-border-error-focus: var(--dk-color-error-200);
  --_reset-border-error-hairline: var(--dk-color-error-800);
  --_reset-border-error-hover: var(--dk-color-error-300);
  --_reset-border-field-disabled: var(--dk-color-neutral-800);
  --_reset-border-field-focus-ring: var(--dk-color-primary-600);
  --_reset-border-field-raised-default: var(--dk-color-neutral-850);
  --_reset-border-hairline-current: var(--dk-border-hairline-level-0);
  --_reset-border-information-default: var(--dk-color-information-400);
  --_reset-border-information-focus: var(--dk-color-information-200);
  --_reset-border-information-hairline: var(--dk-color-information-800);
  --_reset-border-information-hover: var(--dk-color-information-300);
  --_reset-border-nested-active: var(--dk-color-neutral-500);
  --_reset-border-nested-default: var(--dk-color-neutral-700);
  --_reset-border-nested-hover: var(--dk-color-neutral-600);
  --_reset-border-neutral-hairline: var(--dk-color-neutral-600);
  --_reset-border-neutral-subtle: var(--dk-color-neutral-600);
  --_reset-border-neutral-subtle-focus: var(--dk-color-neutral-400);
  --_reset-border-neutral-subtle-hover: var(--dk-color-neutral-500);
  --_reset-border-primary-default: var(--dk-color-primary-400);
  --_reset-border-primary-focus: var(--dk-color-primary-200);
  --_reset-border-primary-hairline: var(--dk-color-primary-800);
  --_reset-border-primary-hover: var(--dk-color-primary-300);
  --_reset-border-raised-active: var(--dk-color-neutral-600);
  --_reset-border-raised-control-active: var(--dk-color-neutral-650);
  --_reset-border-raised-control-default: var(--dk-color-neutral-850);
  --_reset-border-raised-control-hover: var(--dk-color-neutral-750);
  --_reset-border-raised-default: var(--dk-color-neutral-800);
  --_reset-border-raised-hover: var(--dk-color-neutral-700);
  --_reset-border-success-default: var(--dk-color-primary-400);
  --_reset-border-success-focus: var(--dk-color-primary-200);
  --_reset-border-success-hover: var(--dk-color-primary-300);
  --_reset-border-warning-default: var(--dk-color-warning-400);
  --_reset-border-warning-focus: var(--dk-color-warning-200);
  --_reset-border-warning-hairline: var(--dk-color-warning-800);
  --_reset-border-warning-hover: var(--dk-color-warning-300);
  --_reset-icon-choice-disabled: var(--dk-color-neutral-500);
  --_reset-icon-control-active: var(--dk-color-neutral-50);
  --_reset-icon-control-active-on-error-subtle: var(--dk-icon-control-active-on-error-subtle-level-0);
  --_reset-icon-control-active-on-information-subtle: var(--dk-icon-control-active-on-information-subtle-level-0);
  --_reset-icon-control-active-on-primary-subtle: var(--dk-icon-control-active-on-primary-subtle-level-0);
  --_reset-icon-control-active-on-success-subtle: var(--dk-icon-control-active-on-success-subtle-level-0);
  --_reset-icon-control-active-on-warning-subtle: var(--dk-icon-control-active-on-warning-subtle-level-0);
  --_reset-icon-control-default: var(--dk-color-neutral-200);
  --_reset-icon-control-default-on-error-subtle: var(--dk-icon-control-default-on-error-subtle-level-0);
  --_reset-icon-control-default-on-information-subtle: var(--dk-icon-control-default-on-information-subtle-level-0);
  --_reset-icon-control-default-on-primary-subtle: var(--dk-icon-control-default-on-primary-subtle-level-0);
  --_reset-icon-control-default-on-success-subtle: var(--dk-icon-control-default-on-success-subtle-level-0);
  --_reset-icon-control-default-on-warning-subtle: var(--dk-icon-control-default-on-warning-subtle-level-0);
  --_reset-icon-control-disabled: var(--dk-color-neutral-800);
  --_reset-icon-control-disabled-on-error-subtle: var(--dk-icon-control-disabled-on-error-subtle-level-0);
  --_reset-icon-control-disabled-on-information-subtle: var(--dk-icon-control-disabled-on-information-subtle-level-0);
  --_reset-icon-control-disabled-on-primary-subtle: var(--dk-icon-control-disabled-on-primary-subtle-level-0);
  --_reset-icon-control-disabled-on-success-subtle: var(--dk-icon-control-disabled-on-success-subtle-level-0);
  --_reset-icon-control-disabled-on-warning-subtle: var(--dk-icon-control-disabled-on-warning-subtle-level-0);
  --_reset-icon-control-hover: var(--dk-color-neutral-100);
  --_reset-icon-control-hover-on-error-subtle: var(--dk-icon-control-hover-on-error-subtle-level-0);
  --_reset-icon-control-hover-on-information-subtle: var(--dk-icon-control-hover-on-information-subtle-level-0);
  --_reset-icon-control-hover-on-primary-subtle: var(--dk-icon-control-hover-on-primary-subtle-level-0);
  --_reset-icon-control-hover-on-success-subtle: var(--dk-icon-control-hover-on-success-subtle-level-0);
  --_reset-icon-control-hover-on-warning-subtle: var(--dk-icon-control-hover-on-warning-subtle-level-0);
  --_reset-icon-default-body: var(--dk-color-base-white);
  --_reset-icon-disabled-default: var(--dk-color-neutral-400);
  --_reset-icon-disabled-subtle: var(--dk-color-neutral-800);
  --_reset-icon-error-default: var(--dk-color-error-400);
  --_reset-icon-field-default: var(--dk-color-neutral-200);
  --_reset-icon-field-disabled: var(--dk-color-neutral-800);
  --_reset-icon-information-default: var(--dk-color-information-400);
  --_reset-icon-neutral-default: var(--dk-color-neutral-400);
  --_reset-icon-neutral-subtle: var(--dk-color-neutral-600);
  --_reset-icon-on-error-fill: var(--dk-icon-base-white);
  --_reset-icon-on-error-mark: var(--dk-icon-base-white);
  --_reset-icon-on-information-fill: var(--dk-icon-base-white);
  --_reset-icon-on-information-mark: var(--dk-icon-base-white);
  --_reset-icon-on-primary-fill: var(--dk-icon-base-white);
  --_reset-icon-on-primary-mark: var(--dk-icon-base-white);
  --_reset-icon-on-success-fill: var(--dk-icon-base-white);
  --_reset-icon-on-success-mark: var(--dk-icon-base-white);
  --_reset-icon-on-warning-fill: var(--dk-icon-base-white);
  --_reset-icon-on-warning-mark: var(--dk-icon-base-white);
  --_reset-icon-primary-default: var(--dk-color-primary-400);
  --_reset-icon-success-default: var(--dk-color-primary-400);
  --_reset-icon-warning-default: var(--dk-color-warning-400);
  --_reset-interactive-tone-fill-active: initial;
  --_reset-interactive-tone-fill-hover: initial;
  --_reset-interactive-tone-mark: initial;
  --_reset-interactive-tone-mark-active: initial;
  --_reset-interactive-tone-mark-hover: initial;
  --_reset-interactive-tone-text: initial;
  --_reset-interactive-tone-text-subtle: initial;
  --_reset-surface-choice-disabled: var(--dk-color-neutral-800);
  --_reset-surface-control-active: var(--dk-color-neutral-800);
  --_reset-surface-control-active-on-error-subtle: var(--dk-surface-control-active-on-error-subtle-level-0);
  --_reset-surface-control-active-on-information-subtle: var(--dk-surface-control-active-on-information-subtle-level-0);
  --_reset-surface-control-active-on-primary-subtle: var(--dk-surface-control-active-on-primary-subtle-level-0);
  --_reset-surface-control-active-on-success-subtle: var(--dk-surface-control-active-on-success-subtle-level-0);
  --_reset-surface-control-active-on-warning-subtle: var(--dk-surface-control-active-on-warning-subtle-level-0);
  --_reset-surface-control-default: var(--dk-color-neutral-1000);
  --_reset-surface-control-default-on-error-subtle: var(--dk-surface-control-default-on-error-subtle-level-0);
  --_reset-surface-control-default-on-information-subtle: var(--dk-surface-control-default-on-information-subtle-level-0);
  --_reset-surface-control-default-on-primary-subtle: var(--dk-surface-control-default-on-primary-subtle-level-0);
  --_reset-surface-control-default-on-success-subtle: var(--dk-surface-control-default-on-success-subtle-level-0);
  --_reset-surface-control-default-on-warning-subtle: var(--dk-surface-control-default-on-warning-subtle-level-0);
  --_reset-surface-control-disabled: var(--dk-color-neutral-1000);
  --_reset-surface-control-disabled-on-error-subtle: var(--dk-surface-control-disabled-on-error-subtle-level-0);
  --_reset-surface-control-disabled-on-information-subtle: var(--dk-surface-control-disabled-on-information-subtle-level-0);
  --_reset-surface-control-disabled-on-primary-subtle: var(--dk-surface-control-disabled-on-primary-subtle-level-0);
  --_reset-surface-control-disabled-on-success-subtle: var(--dk-surface-control-disabled-on-success-subtle-level-0);
  --_reset-surface-control-disabled-on-warning-subtle: var(--dk-surface-control-disabled-on-warning-subtle-level-0);
  --_reset-surface-control-hover: var(--dk-color-neutral-900);
  --_reset-surface-control-hover-on-error-subtle: var(--dk-surface-control-hover-on-error-subtle-level-0);
  --_reset-surface-control-hover-on-information-subtle: var(--dk-surface-control-hover-on-information-subtle-level-0);
  --_reset-surface-control-hover-on-primary-subtle: var(--dk-surface-control-hover-on-primary-subtle-level-0);
  --_reset-surface-control-hover-on-success-subtle: var(--dk-surface-control-hover-on-success-subtle-level-0);
  --_reset-surface-control-hover-on-warning-subtle: var(--dk-surface-control-hover-on-warning-subtle-level-0);
  --_reset-surface-current: var(--dk-surface-level-0);
  --_reset-surface-disabled-default: var(--dk-color-neutral-300);
  --_reset-surface-disabled-subtle: var(--dk-color-neutral-1000);
  --_reset-surface-error-default: var(--dk-color-error-700);
  --_reset-surface-error-focus: var(--dk-color-error-500);
  --_reset-surface-error-hover: var(--dk-color-error-600);
  --_reset-surface-error-mark: var(--dk-color-error-600);
  --_reset-surface-error-subtle: var(--dk-color-error-900);
  --_reset-surface-error-subtle-focus: var(--dk-color-error-700);
  --_reset-surface-error-subtle-hover: var(--dk-color-error-800);
  --_reset-surface-field-action-active: var(--dk-color-neutral-700);
  --_reset-surface-field-action-hover: var(--dk-color-neutral-800);
  --_reset-surface-field-default: var(--dk-color-neutral-1100);
  --_reset-surface-field-hover: var(--dk-color-neutral-900);
  --_reset-surface-information-default: var(--dk-color-information-600);
  --_reset-surface-information-focus: var(--dk-color-information-400);
  --_reset-surface-information-hover: var(--dk-color-information-500);
  --_reset-surface-information-mark: var(--dk-color-information-600);
  --_reset-surface-information-subtle: var(--dk-color-information-900);
  --_reset-surface-lifted-active: var(--dk-color-neutral-800);
  --_reset-surface-lifted-default: var(--dk-color-neutral-1000);
  --_reset-surface-lifted-hover: var(--dk-color-neutral-900);
  --_reset-surface-nested-active: var(--dk-color-neutral-700);
  --_reset-surface-nested-default: var(--dk-color-neutral-900);
  --_reset-surface-nested-hover: var(--dk-color-neutral-800);
  --_reset-surface-neutral-subtle: var(--dk-color-neutral-900);
  --_reset-surface-neutral-subtle-active: var(--dk-color-neutral-700);
  --_reset-surface-neutral-subtle-focus: var(--dk-color-neutral-700);
  --_reset-surface-neutral-subtle-hover: var(--dk-color-neutral-800);
  --_reset-surface-primary-active: var(--dk-color-primary-300);
  --_reset-surface-primary-brand: var(--dk-color-primary-400);
  --_reset-surface-primary-default: var(--dk-color-primary-500);
  --_reset-surface-primary-focus: var(--dk-color-primary-300);
  --_reset-surface-primary-hover: var(--dk-color-primary-400);
  --_reset-surface-primary-mark: var(--dk-color-primary-600);
  --_reset-surface-primary-subtle: var(--dk-color-primary-850);
  --_reset-surface-primary-subtle-focus: var(--dk-color-primary-700);
  --_reset-surface-primary-subtle-hover: var(--dk-color-primary-800);
  --_reset-surface-raised-active: var(--dk-color-neutral-800);
  --_reset-surface-raised-default: var(--dk-color-neutral-1000);
  --_reset-surface-raised-hover: var(--dk-color-neutral-900);
  --_reset-surface-success-default: var(--dk-color-primary-500);
  --_reset-surface-success-focus: var(--dk-color-primary-300);
  --_reset-surface-success-hover: var(--dk-color-primary-400);
  --_reset-surface-success-mark: var(--dk-color-primary-600);
  --_reset-surface-success-subtle: var(--dk-color-primary-850);
  --_reset-surface-warning-default: var(--dk-color-warning-600);
  --_reset-surface-warning-focus: var(--dk-color-warning-400);
  --_reset-surface-warning-hover: var(--dk-color-warning-500);
  --_reset-surface-warning-mark: var(--dk-color-warning-600);
  --_reset-surface-warning-subtle: var(--dk-color-warning-900);
  --_reset-text-control-active: var(--dk-color-neutral-50);
  --_reset-text-control-active-on-error-subtle: var(--dk-text-control-active-on-error-subtle-level-0);
  --_reset-text-control-active-on-information-subtle: var(--dk-text-control-active-on-information-subtle-level-0);
  --_reset-text-control-active-on-primary-subtle: var(--dk-text-control-active-on-primary-subtle-level-0);
  --_reset-text-control-active-on-success-subtle: var(--dk-text-control-active-on-success-subtle-level-0);
  --_reset-text-control-active-on-warning-subtle: var(--dk-text-control-active-on-warning-subtle-level-0);
  --_reset-text-control-default: var(--dk-color-neutral-200);
  --_reset-text-control-default-on-error-subtle: var(--dk-text-control-default-on-error-subtle-level-0);
  --_reset-text-control-default-on-information-subtle: var(--dk-text-control-default-on-information-subtle-level-0);
  --_reset-text-control-default-on-primary-subtle: var(--dk-text-control-default-on-primary-subtle-level-0);
  --_reset-text-control-default-on-success-subtle: var(--dk-text-control-default-on-success-subtle-level-0);
  --_reset-text-control-default-on-warning-subtle: var(--dk-text-control-default-on-warning-subtle-level-0);
  --_reset-text-control-disabled: var(--dk-color-neutral-700);
  --_reset-text-control-disabled-on-error-subtle: var(--dk-text-control-disabled-on-error-subtle-level-0);
  --_reset-text-control-disabled-on-information-subtle: var(--dk-text-control-disabled-on-information-subtle-level-0);
  --_reset-text-control-disabled-on-primary-subtle: var(--dk-text-control-disabled-on-primary-subtle-level-0);
  --_reset-text-control-disabled-on-success-subtle: var(--dk-text-control-disabled-on-success-subtle-level-0);
  --_reset-text-control-disabled-on-warning-subtle: var(--dk-text-control-disabled-on-warning-subtle-level-0);
  --_reset-text-control-hover: var(--dk-color-neutral-100);
  --_reset-text-control-hover-on-error-subtle: var(--dk-text-control-hover-on-error-subtle-level-0);
  --_reset-text-control-hover-on-information-subtle: var(--dk-text-control-hover-on-information-subtle-level-0);
  --_reset-text-control-hover-on-primary-subtle: var(--dk-text-control-hover-on-primary-subtle-level-0);
  --_reset-text-control-hover-on-success-subtle: var(--dk-text-control-hover-on-success-subtle-level-0);
  --_reset-text-control-hover-on-warning-subtle: var(--dk-text-control-hover-on-warning-subtle-level-0);
  --_reset-text-default: var(--dk-color-base-white);
  --_reset-text-disabled-default: var(--dk-color-neutral-400);
  --_reset-text-disabled-subtle: var(--dk-color-neutral-700);
  --_reset-text-error-default: var(--dk-color-error-400);
  --_reset-text-error-on-tint: var(--dk-color-error-200);
  --_reset-text-error-outline: var(--dk-text-error-on-subtle);
  --_reset-text-field-affix: var(--dk-color-neutral-200);
  --_reset-text-field-disabled: var(--dk-color-neutral-700);
  --_reset-text-information-default: var(--dk-color-information-400);
  --_reset-text-information-on-tint: var(--dk-color-information-200);
  --_reset-text-information-outline: var(--dk-text-information-on-subtle);
  --_reset-text-link-active: var(--dk-color-primary-300);
  --_reset-text-link-default: var(--dk-color-primary-500);
  --_reset-text-link-hover: var(--dk-color-primary-400);
  --_reset-text-link-underline: var(--dk-color-primary-700);
  --_reset-text-neutral-default: var(--dk-color-neutral-200);
  --_reset-text-neutral-on-tint: var(--dk-color-neutral-200);
  --_reset-text-neutral-subtle: var(--dk-color-neutral-400);
  --_reset-text-neutral-subtle-focus: var(--dk-color-neutral-200);
  --_reset-text-neutral-subtle-hover: var(--dk-color-neutral-300);
  --_reset-text-on-error-fill: var(--dk-text-base-white);
  --_reset-text-on-error-mark: var(--dk-text-base-white);
  --_reset-text-on-information-fill: var(--dk-text-base-white);
  --_reset-text-on-information-mark: var(--dk-text-base-white);
  --_reset-text-on-primary-fill: var(--dk-text-base-white);
  --_reset-text-on-primary-mark: var(--dk-text-base-white);
  --_reset-text-on-success-fill: var(--dk-text-base-white);
  --_reset-text-on-success-mark: var(--dk-text-base-white);
  --_reset-text-on-warning-fill: var(--dk-text-base-white);
  --_reset-text-on-warning-mark: var(--dk-text-base-white);
  --_reset-text-primary-brand: var(--dk-color-primary-400);
  --_reset-text-primary-default: var(--dk-color-primary-400);
  --_reset-text-primary-on-tint: var(--dk-color-primary-200);
  --_reset-text-primary-outline: var(--dk-text-primary-on-subtle);
  --_reset-text-success-default: var(--dk-color-primary-400);
  --_reset-text-success-on-tint: var(--dk-color-primary-200);
  --_reset-text-success-outline: var(--dk-text-success-on-subtle);
  --_reset-text-warning-default: var(--dk-color-warning-400);
  --_reset-text-warning-on-tint: var(--dk-color-warning-200);
  --_reset-text-warning-outline: var(--dk-text-warning-on-subtle);
}
:where([data-tone="none"], :is([data-tone="primary"], [data-tone="success"], [data-tone="error"], [data-tone="warning"], [data-tone="information"]) :is(.dk-component-action-bar:not([data-variant="float"]):not([data-layout="fill"]), .dk-component-action-bar__detail, .dk-component-alert:not([data-variant="outline"]):not([data-variant="plain"]), .dk-component-app-shell, .dk-component-avatar:not([data-variant="solid"]):not([data-variant="ringed"]), .dk-component-body__value, .dk-component-brand-sheet, .dk-component-app-shell:where(:has(.dk-component-app-shell__content .dk-component-brand-sheet[data-page]):not(:has(.dk-component-app-shell .dk-component-brand-sheet[data-page]))), .dk-component-breadcrumb__arrows:not(.dk-component-breadcrumb:is([data-variant="raised"], [data-variant="plain"], [data-variant="inset"]) *), .dk-component-breadcrumb[data-variant="raised"], .dk-component-calendar__day[data-today], .dk-component-calendar[data-fluid] td[data-band="middle"], .dk-component-choice-card, .dk-component-choice-card-action, .dk-component-code-input__control:not(.dk-component-code-input[data-ready] *), .dk-component-code-input__cell, .dk-component-dot, .dk-component-feedback-badge, .dk-component-glider:not([data-variant="inset"]):not([data-variant="ghost"]), .dk-component-icon-tile:not([data-status="primary"][data-variant="solid"]):not([data-status="success"][data-variant="solid"]):not([data-status="error"][data-variant="solid"]):not([data-status="warning"][data-variant="solid"]):not([data-status="information"][data-variant="solid"]):not([data-tone-fill="solid"] *):not(:where([data-interactive]:is([aria-checked="true"], [aria-multiselectable="true"] [aria-selected="true"], [data-highlighted]:not([data-highlighted="false"]))) *), .dk-component-input__field:not(.dk-component-input[data-variant="inset"] *), .dk-component-modal__box, .dk-component-select__trigger:not(:where(.dk-component-select[data-variant="inset"]) *), .dk-component-select__menu, .dk-component-menu, .dk-component-select__chip, .dk-component-select__menu[data-layout="grid"] .dk-component-select__option[aria-selected="true"], .dk-component-select__filter:not([aria-pressed="true"]), .dk-component-sidebar:not([data-variant="floating"]), .dk-component-sidebar__badge, .dk-component-sidebar__item:is([aria-current="page"], [aria-current="true"]) .dk-component-sidebar__badge, .dk-component-sidebar__panel, .dk-component-sidebar[data-nested][data-presentation="drawer"] > .dk-component-sidebar__foot, .dk-component-sidebar[data-presentation="bar"], .dk-component-sidebar[data-presentation="bar"] .dk-component-sidebar__item:is([aria-current="page"], [aria-current="true"]), .dk-component-sidebar[data-presentation="bar"] .dk-component-sidebar__item[data-current-within], .dk-component-sidebar[data-presentation="bar"] > .dk-component-sidebar__bar-indicator, .dk-component-sidebar[data-presentation="bar"] :where(:is(.dk-component-sidebar__more, .dk-component-sidebar__account, .dk-component-sidebar__group)[data-open]) :is(.dk-component-sidebar__item, .dk-component-sidebar__user), .dk-component-table__scroll:has(> .dk-component-table[data-variant="raised"]), .dk-component-table thead th, .dk-component-table tbody tr[data-selected], .dk-component-table tfoot tr, .dk-component-table :is(th, td)[data-placeholder], .dk-component-table[data-reordering] tr > :is(th, td)[data-placeholder], .dk-component-tabs__count, .dk-component-tabs__tab[aria-selected="true"] .dk-component-tabs__count, .dk-component-tag:not([data-variant="outline"]):not([data-status="primary"][data-variant="solid"]):not([data-status="success"][data-variant="solid"]):not([data-status="error"][data-variant="solid"]):not([data-status="warning"][data-variant="solid"]):not([data-status="information"][data-variant="solid"]):not(:where([data-theme="dark"]) *):not(:where([data-theme="dark"] [data-theme="light"]) *), .dk-component-textarea__field, .dk-component-toast__panel, .dk-component-toast[data-variant="compact"] .dk-component-toast__panel, .dk-component-tooltip__surface, .dk-component-top-bar:not([data-variant="glass"]):not([data-variant="transparent"][data-scrolled]):not([data-variant="transparent"]):not([data-variant="flow"]), .dk-component-switch[data-variant="raised"])) {
  --dk-border-control-active: var(--_reset-border-control-active);
  --dk-border-control-active-on-error-subtle: var(--_reset-border-control-active-on-error-subtle);
  --dk-border-control-active-on-information-subtle: var(--_reset-border-control-active-on-information-subtle);
  --dk-border-control-active-on-primary-subtle: var(--_reset-border-control-active-on-primary-subtle);
  --dk-border-control-active-on-success-subtle: var(--_reset-border-control-active-on-success-subtle);
  --dk-border-control-active-on-warning-subtle: var(--_reset-border-control-active-on-warning-subtle);
  --dk-border-control-default: var(--_reset-border-control-default);
  --dk-border-control-default-on-error-subtle: var(--_reset-border-control-default-on-error-subtle);
  --dk-border-control-default-on-information-subtle: var(--_reset-border-control-default-on-information-subtle);
  --dk-border-control-default-on-primary-subtle: var(--_reset-border-control-default-on-primary-subtle);
  --dk-border-control-default-on-success-subtle: var(--_reset-border-control-default-on-success-subtle);
  --dk-border-control-default-on-warning-subtle: var(--_reset-border-control-default-on-warning-subtle);
  --dk-border-control-hover: var(--_reset-border-control-hover);
  --dk-border-control-hover-on-error-subtle: var(--_reset-border-control-hover-on-error-subtle);
  --dk-border-control-hover-on-information-subtle: var(--_reset-border-control-hover-on-information-subtle);
  --dk-border-control-hover-on-primary-subtle: var(--_reset-border-control-hover-on-primary-subtle);
  --dk-border-control-hover-on-success-subtle: var(--_reset-border-control-hover-on-success-subtle);
  --dk-border-control-hover-on-warning-subtle: var(--_reset-border-control-hover-on-warning-subtle);
  --dk-border-control-lifted-active: var(--_reset-border-control-lifted-active);
  --dk-border-control-lifted-default: var(--_reset-border-control-lifted-default);
  --dk-border-control-lifted-hover: var(--_reset-border-control-lifted-hover);
  --dk-border-disabled-default: var(--_reset-border-disabled-default);
  --dk-border-disabled-elevation: var(--_reset-border-disabled-elevation);
  --dk-border-disabled-subtle: var(--_reset-border-disabled-subtle);
  --dk-border-error-default: var(--_reset-border-error-default);
  --dk-border-error-focus: var(--_reset-border-error-focus);
  --dk-border-error-hairline: var(--_reset-border-error-hairline);
  --dk-border-error-hover: var(--_reset-border-error-hover);
  --dk-border-field-disabled: var(--_reset-border-field-disabled);
  --dk-border-field-focus-ring: var(--_reset-border-field-focus-ring);
  --dk-border-field-raised-default: var(--_reset-border-field-raised-default);
  --dk-border-hairline-current: var(--_reset-border-hairline-current);
  --dk-border-information-default: var(--_reset-border-information-default);
  --dk-border-information-focus: var(--_reset-border-information-focus);
  --dk-border-information-hairline: var(--_reset-border-information-hairline);
  --dk-border-information-hover: var(--_reset-border-information-hover);
  --dk-border-nested-active: var(--_reset-border-nested-active);
  --dk-border-nested-default: var(--_reset-border-nested-default);
  --dk-border-nested-hover: var(--_reset-border-nested-hover);
  --dk-border-neutral-hairline: var(--_reset-border-neutral-hairline);
  --dk-border-neutral-subtle: var(--_reset-border-neutral-subtle);
  --dk-border-neutral-subtle-focus: var(--_reset-border-neutral-subtle-focus);
  --dk-border-neutral-subtle-hover: var(--_reset-border-neutral-subtle-hover);
  --dk-border-primary-default: var(--_reset-border-primary-default);
  --dk-border-primary-focus: var(--_reset-border-primary-focus);
  --dk-border-primary-hairline: var(--_reset-border-primary-hairline);
  --dk-border-primary-hover: var(--_reset-border-primary-hover);
  --dk-border-raised-active: var(--_reset-border-raised-active);
  --dk-border-raised-control-active: var(--_reset-border-raised-control-active);
  --dk-border-raised-control-default: var(--_reset-border-raised-control-default);
  --dk-border-raised-control-hover: var(--_reset-border-raised-control-hover);
  --dk-border-raised-default: var(--_reset-border-raised-default);
  --dk-border-raised-hover: var(--_reset-border-raised-hover);
  --dk-border-success-default: var(--_reset-border-success-default);
  --dk-border-success-focus: var(--_reset-border-success-focus);
  --dk-border-success-hover: var(--_reset-border-success-hover);
  --dk-border-warning-default: var(--_reset-border-warning-default);
  --dk-border-warning-focus: var(--_reset-border-warning-focus);
  --dk-border-warning-hairline: var(--_reset-border-warning-hairline);
  --dk-border-warning-hover: var(--_reset-border-warning-hover);
  --dk-icon-choice-disabled: var(--_reset-icon-choice-disabled);
  --dk-icon-control-active: var(--_reset-icon-control-active);
  --dk-icon-control-active-on-error-subtle: var(--_reset-icon-control-active-on-error-subtle);
  --dk-icon-control-active-on-information-subtle: var(--_reset-icon-control-active-on-information-subtle);
  --dk-icon-control-active-on-primary-subtle: var(--_reset-icon-control-active-on-primary-subtle);
  --dk-icon-control-active-on-success-subtle: var(--_reset-icon-control-active-on-success-subtle);
  --dk-icon-control-active-on-warning-subtle: var(--_reset-icon-control-active-on-warning-subtle);
  --dk-icon-control-default: var(--_reset-icon-control-default);
  --dk-icon-control-default-on-error-subtle: var(--_reset-icon-control-default-on-error-subtle);
  --dk-icon-control-default-on-information-subtle: var(--_reset-icon-control-default-on-information-subtle);
  --dk-icon-control-default-on-primary-subtle: var(--_reset-icon-control-default-on-primary-subtle);
  --dk-icon-control-default-on-success-subtle: var(--_reset-icon-control-default-on-success-subtle);
  --dk-icon-control-default-on-warning-subtle: var(--_reset-icon-control-default-on-warning-subtle);
  --dk-icon-control-disabled: var(--_reset-icon-control-disabled);
  --dk-icon-control-disabled-on-error-subtle: var(--_reset-icon-control-disabled-on-error-subtle);
  --dk-icon-control-disabled-on-information-subtle: var(--_reset-icon-control-disabled-on-information-subtle);
  --dk-icon-control-disabled-on-primary-subtle: var(--_reset-icon-control-disabled-on-primary-subtle);
  --dk-icon-control-disabled-on-success-subtle: var(--_reset-icon-control-disabled-on-success-subtle);
  --dk-icon-control-disabled-on-warning-subtle: var(--_reset-icon-control-disabled-on-warning-subtle);
  --dk-icon-control-hover: var(--_reset-icon-control-hover);
  --dk-icon-control-hover-on-error-subtle: var(--_reset-icon-control-hover-on-error-subtle);
  --dk-icon-control-hover-on-information-subtle: var(--_reset-icon-control-hover-on-information-subtle);
  --dk-icon-control-hover-on-primary-subtle: var(--_reset-icon-control-hover-on-primary-subtle);
  --dk-icon-control-hover-on-success-subtle: var(--_reset-icon-control-hover-on-success-subtle);
  --dk-icon-control-hover-on-warning-subtle: var(--_reset-icon-control-hover-on-warning-subtle);
  --dk-icon-default-body: var(--_reset-icon-default-body);
  --dk-icon-disabled-default: var(--_reset-icon-disabled-default);
  --dk-icon-disabled-subtle: var(--_reset-icon-disabled-subtle);
  --dk-icon-error-default: var(--_reset-icon-error-default);
  --dk-icon-field-default: var(--_reset-icon-field-default);
  --dk-icon-field-disabled: var(--_reset-icon-field-disabled);
  --dk-icon-information-default: var(--_reset-icon-information-default);
  --dk-icon-neutral-default: var(--_reset-icon-neutral-default);
  --dk-icon-neutral-subtle: var(--_reset-icon-neutral-subtle);
  --dk-icon-on-error-fill: var(--_reset-icon-on-error-fill);
  --dk-icon-on-error-mark: var(--_reset-icon-on-error-mark);
  --dk-icon-on-information-fill: var(--_reset-icon-on-information-fill);
  --dk-icon-on-information-mark: var(--_reset-icon-on-information-mark);
  --dk-icon-on-primary-fill: var(--_reset-icon-on-primary-fill);
  --dk-icon-on-primary-mark: var(--_reset-icon-on-primary-mark);
  --dk-icon-on-success-fill: var(--_reset-icon-on-success-fill);
  --dk-icon-on-success-mark: var(--_reset-icon-on-success-mark);
  --dk-icon-on-warning-fill: var(--_reset-icon-on-warning-fill);
  --dk-icon-on-warning-mark: var(--_reset-icon-on-warning-mark);
  --dk-icon-primary-default: var(--_reset-icon-primary-default);
  --dk-icon-success-default: var(--_reset-icon-success-default);
  --dk-icon-warning-default: var(--_reset-icon-warning-default);
  --dk-interactive-tone-fill-active: var(--_reset-interactive-tone-fill-active);
  --dk-interactive-tone-fill-hover: var(--_reset-interactive-tone-fill-hover);
  --dk-interactive-tone-mark: var(--_reset-interactive-tone-mark);
  --dk-interactive-tone-mark-active: var(--_reset-interactive-tone-mark-active);
  --dk-interactive-tone-mark-hover: var(--_reset-interactive-tone-mark-hover);
  --dk-interactive-tone-text: var(--_reset-interactive-tone-text);
  --dk-interactive-tone-text-subtle: var(--_reset-interactive-tone-text-subtle);
  --dk-surface-choice-disabled: var(--_reset-surface-choice-disabled);
  --dk-surface-control-active: var(--_reset-surface-control-active);
  --dk-surface-control-active-on-error-subtle: var(--_reset-surface-control-active-on-error-subtle);
  --dk-surface-control-active-on-information-subtle: var(--_reset-surface-control-active-on-information-subtle);
  --dk-surface-control-active-on-primary-subtle: var(--_reset-surface-control-active-on-primary-subtle);
  --dk-surface-control-active-on-success-subtle: var(--_reset-surface-control-active-on-success-subtle);
  --dk-surface-control-active-on-warning-subtle: var(--_reset-surface-control-active-on-warning-subtle);
  --dk-surface-control-default: var(--_reset-surface-control-default);
  --dk-surface-control-default-on-error-subtle: var(--_reset-surface-control-default-on-error-subtle);
  --dk-surface-control-default-on-information-subtle: var(--_reset-surface-control-default-on-information-subtle);
  --dk-surface-control-default-on-primary-subtle: var(--_reset-surface-control-default-on-primary-subtle);
  --dk-surface-control-default-on-success-subtle: var(--_reset-surface-control-default-on-success-subtle);
  --dk-surface-control-default-on-warning-subtle: var(--_reset-surface-control-default-on-warning-subtle);
  --dk-surface-control-disabled: var(--_reset-surface-control-disabled);
  --dk-surface-control-disabled-on-error-subtle: var(--_reset-surface-control-disabled-on-error-subtle);
  --dk-surface-control-disabled-on-information-subtle: var(--_reset-surface-control-disabled-on-information-subtle);
  --dk-surface-control-disabled-on-primary-subtle: var(--_reset-surface-control-disabled-on-primary-subtle);
  --dk-surface-control-disabled-on-success-subtle: var(--_reset-surface-control-disabled-on-success-subtle);
  --dk-surface-control-disabled-on-warning-subtle: var(--_reset-surface-control-disabled-on-warning-subtle);
  --dk-surface-control-hover: var(--_reset-surface-control-hover);
  --dk-surface-control-hover-on-error-subtle: var(--_reset-surface-control-hover-on-error-subtle);
  --dk-surface-control-hover-on-information-subtle: var(--_reset-surface-control-hover-on-information-subtle);
  --dk-surface-control-hover-on-primary-subtle: var(--_reset-surface-control-hover-on-primary-subtle);
  --dk-surface-control-hover-on-success-subtle: var(--_reset-surface-control-hover-on-success-subtle);
  --dk-surface-control-hover-on-warning-subtle: var(--_reset-surface-control-hover-on-warning-subtle);
  --dk-surface-current: var(--_reset-surface-current);
  --dk-surface-disabled-default: var(--_reset-surface-disabled-default);
  --dk-surface-disabled-subtle: var(--_reset-surface-disabled-subtle);
  --dk-surface-error-default: var(--_reset-surface-error-default);
  --dk-surface-error-focus: var(--_reset-surface-error-focus);
  --dk-surface-error-hover: var(--_reset-surface-error-hover);
  --dk-surface-error-mark: var(--_reset-surface-error-mark);
  --dk-surface-error-subtle: var(--_reset-surface-error-subtle);
  --dk-surface-error-subtle-focus: var(--_reset-surface-error-subtle-focus);
  --dk-surface-error-subtle-hover: var(--_reset-surface-error-subtle-hover);
  --dk-surface-field-action-active: var(--_reset-surface-field-action-active);
  --dk-surface-field-action-hover: var(--_reset-surface-field-action-hover);
  --dk-surface-field-default: var(--_reset-surface-field-default);
  --dk-surface-field-hover: var(--_reset-surface-field-hover);
  --dk-surface-information-default: var(--_reset-surface-information-default);
  --dk-surface-information-focus: var(--_reset-surface-information-focus);
  --dk-surface-information-hover: var(--_reset-surface-information-hover);
  --dk-surface-information-mark: var(--_reset-surface-information-mark);
  --dk-surface-information-subtle: var(--_reset-surface-information-subtle);
  --dk-surface-lifted-active: var(--_reset-surface-lifted-active);
  --dk-surface-lifted-default: var(--_reset-surface-lifted-default);
  --dk-surface-lifted-hover: var(--_reset-surface-lifted-hover);
  --dk-surface-nested-active: var(--_reset-surface-nested-active);
  --dk-surface-nested-default: var(--_reset-surface-nested-default);
  --dk-surface-nested-hover: var(--_reset-surface-nested-hover);
  --dk-surface-neutral-subtle: var(--_reset-surface-neutral-subtle);
  --dk-surface-neutral-subtle-active: var(--_reset-surface-neutral-subtle-active);
  --dk-surface-neutral-subtle-focus: var(--_reset-surface-neutral-subtle-focus);
  --dk-surface-neutral-subtle-hover: var(--_reset-surface-neutral-subtle-hover);
  --dk-surface-primary-active: var(--_reset-surface-primary-active);
  --dk-surface-primary-brand: var(--_reset-surface-primary-brand);
  --dk-surface-primary-default: var(--_reset-surface-primary-default);
  --dk-surface-primary-focus: var(--_reset-surface-primary-focus);
  --dk-surface-primary-hover: var(--_reset-surface-primary-hover);
  --dk-surface-primary-mark: var(--_reset-surface-primary-mark);
  --dk-surface-primary-subtle: var(--_reset-surface-primary-subtle);
  --dk-surface-primary-subtle-focus: var(--_reset-surface-primary-subtle-focus);
  --dk-surface-primary-subtle-hover: var(--_reset-surface-primary-subtle-hover);
  --dk-surface-raised-active: var(--_reset-surface-raised-active);
  --dk-surface-raised-default: var(--_reset-surface-raised-default);
  --dk-surface-raised-hover: var(--_reset-surface-raised-hover);
  --dk-surface-success-default: var(--_reset-surface-success-default);
  --dk-surface-success-focus: var(--_reset-surface-success-focus);
  --dk-surface-success-hover: var(--_reset-surface-success-hover);
  --dk-surface-success-mark: var(--_reset-surface-success-mark);
  --dk-surface-success-subtle: var(--_reset-surface-success-subtle);
  --dk-surface-warning-default: var(--_reset-surface-warning-default);
  --dk-surface-warning-focus: var(--_reset-surface-warning-focus);
  --dk-surface-warning-hover: var(--_reset-surface-warning-hover);
  --dk-surface-warning-mark: var(--_reset-surface-warning-mark);
  --dk-surface-warning-subtle: var(--_reset-surface-warning-subtle);
  --dk-text-control-active: var(--_reset-text-control-active);
  --dk-text-control-active-on-error-subtle: var(--_reset-text-control-active-on-error-subtle);
  --dk-text-control-active-on-information-subtle: var(--_reset-text-control-active-on-information-subtle);
  --dk-text-control-active-on-primary-subtle: var(--_reset-text-control-active-on-primary-subtle);
  --dk-text-control-active-on-success-subtle: var(--_reset-text-control-active-on-success-subtle);
  --dk-text-control-active-on-warning-subtle: var(--_reset-text-control-active-on-warning-subtle);
  --dk-text-control-default: var(--_reset-text-control-default);
  --dk-text-control-default-on-error-subtle: var(--_reset-text-control-default-on-error-subtle);
  --dk-text-control-default-on-information-subtle: var(--_reset-text-control-default-on-information-subtle);
  --dk-text-control-default-on-primary-subtle: var(--_reset-text-control-default-on-primary-subtle);
  --dk-text-control-default-on-success-subtle: var(--_reset-text-control-default-on-success-subtle);
  --dk-text-control-default-on-warning-subtle: var(--_reset-text-control-default-on-warning-subtle);
  --dk-text-control-disabled: var(--_reset-text-control-disabled);
  --dk-text-control-disabled-on-error-subtle: var(--_reset-text-control-disabled-on-error-subtle);
  --dk-text-control-disabled-on-information-subtle: var(--_reset-text-control-disabled-on-information-subtle);
  --dk-text-control-disabled-on-primary-subtle: var(--_reset-text-control-disabled-on-primary-subtle);
  --dk-text-control-disabled-on-success-subtle: var(--_reset-text-control-disabled-on-success-subtle);
  --dk-text-control-disabled-on-warning-subtle: var(--_reset-text-control-disabled-on-warning-subtle);
  --dk-text-control-hover: var(--_reset-text-control-hover);
  --dk-text-control-hover-on-error-subtle: var(--_reset-text-control-hover-on-error-subtle);
  --dk-text-control-hover-on-information-subtle: var(--_reset-text-control-hover-on-information-subtle);
  --dk-text-control-hover-on-primary-subtle: var(--_reset-text-control-hover-on-primary-subtle);
  --dk-text-control-hover-on-success-subtle: var(--_reset-text-control-hover-on-success-subtle);
  --dk-text-control-hover-on-warning-subtle: var(--_reset-text-control-hover-on-warning-subtle);
  --dk-text-default: var(--_reset-text-default);
  --dk-text-disabled-default: var(--_reset-text-disabled-default);
  --dk-text-disabled-subtle: var(--_reset-text-disabled-subtle);
  --dk-text-error-default: var(--_reset-text-error-default);
  --dk-text-error-on-tint: var(--_reset-text-error-on-tint);
  --dk-text-error-outline: var(--_reset-text-error-outline);
  --dk-text-field-affix: var(--_reset-text-field-affix);
  --dk-text-field-disabled: var(--_reset-text-field-disabled);
  --dk-text-information-default: var(--_reset-text-information-default);
  --dk-text-information-on-tint: var(--_reset-text-information-on-tint);
  --dk-text-information-outline: var(--_reset-text-information-outline);
  --dk-text-link-active: var(--_reset-text-link-active);
  --dk-text-link-default: var(--_reset-text-link-default);
  --dk-text-link-hover: var(--_reset-text-link-hover);
  --dk-text-link-underline: var(--_reset-text-link-underline);
  --dk-text-neutral-default: var(--_reset-text-neutral-default);
  --dk-text-neutral-on-tint: var(--_reset-text-neutral-on-tint);
  --dk-text-neutral-subtle: var(--_reset-text-neutral-subtle);
  --dk-text-neutral-subtle-focus: var(--_reset-text-neutral-subtle-focus);
  --dk-text-neutral-subtle-hover: var(--_reset-text-neutral-subtle-hover);
  --dk-text-on-error-fill: var(--_reset-text-on-error-fill);
  --dk-text-on-error-mark: var(--_reset-text-on-error-mark);
  --dk-text-on-information-fill: var(--_reset-text-on-information-fill);
  --dk-text-on-information-mark: var(--_reset-text-on-information-mark);
  --dk-text-on-primary-fill: var(--_reset-text-on-primary-fill);
  --dk-text-on-primary-mark: var(--_reset-text-on-primary-mark);
  --dk-text-on-success-fill: var(--_reset-text-on-success-fill);
  --dk-text-on-success-mark: var(--_reset-text-on-success-mark);
  --dk-text-on-warning-fill: var(--_reset-text-on-warning-fill);
  --dk-text-on-warning-mark: var(--_reset-text-on-warning-mark);
  --dk-text-primary-brand: var(--_reset-text-primary-brand);
  --dk-text-primary-default: var(--_reset-text-primary-default);
  --dk-text-primary-on-tint: var(--_reset-text-primary-on-tint);
  --dk-text-primary-outline: var(--_reset-text-primary-outline);
  --dk-text-success-default: var(--_reset-text-success-default);
  --dk-text-success-on-tint: var(--_reset-text-success-on-tint);
  --dk-text-success-outline: var(--_reset-text-success-outline);
  --dk-text-warning-default: var(--_reset-text-warning-default);
  --dk-text-warning-on-tint: var(--_reset-text-warning-on-tint);
  --dk-text-warning-outline: var(--_reset-text-warning-outline);
  --dk-surface-gradient-primary: linear-gradient(var(--dk-gradient-angle), var(--dk-gradient-primary-top-right-default-stop-2), var(--dk-gradient-primary-top-right-default-stop-3));
  --dk-surface-gradient-primary-hover: linear-gradient(var(--dk-gradient-angle), var(--dk-gradient-primary-top-right-hover-stop-2), var(--dk-gradient-primary-top-right-hover-stop-3));
  --dk-surface-gradient-primary-subtle: linear-gradient(var(--dk-gradient-wash-angle), color-mix(in srgb, var(--dk-surface-primary-subtle) var(--dk-gradient-wash-strength), var(--dk-surface-current)), var(--dk-surface-current) var(--dk-gradient-wash-reach));
  --dk-border-gradient-primary: linear-gradient(var(--dk-border-gradient-angle), var(--dk-border-gradient-primary-light), var(--dk-border-gradient-primary-deep));
  --dk-surface-gradient-neutral: linear-gradient(var(--dk-gradient-angle), var(--dk-gradient-neutral-top-right-default-stop-2), var(--dk-gradient-neutral-top-right-default-stop-3));
  --dk-surface-gradient-neutral-hover: linear-gradient(var(--dk-gradient-angle), var(--dk-gradient-neutral-top-right-hover-stop-2), var(--dk-gradient-neutral-top-right-hover-stop-3));
  --dk-surface-gradient-neutral-subtle: linear-gradient(var(--dk-gradient-wash-angle), color-mix(in srgb, var(--dk-surface-neutral-subtle) var(--dk-gradient-wash-strength), var(--dk-surface-current)), var(--dk-surface-current) var(--dk-gradient-wash-reach));
  --dk-border-gradient-neutral: linear-gradient(var(--dk-border-gradient-angle), var(--dk-border-gradient-neutral-light), var(--dk-border-gradient-neutral-deep));
  --dk-surface-gradient-success: linear-gradient(var(--dk-gradient-angle), var(--dk-gradient-success-top-right-default-stop-2), var(--dk-gradient-success-top-right-default-stop-3));
  --dk-surface-gradient-success-hover: linear-gradient(var(--dk-gradient-angle), var(--dk-gradient-success-top-right-hover-stop-2), var(--dk-gradient-success-top-right-hover-stop-3));
  --dk-surface-gradient-success-subtle: linear-gradient(var(--dk-gradient-wash-angle), color-mix(in srgb, var(--dk-surface-success-subtle) var(--dk-gradient-wash-strength), var(--dk-surface-current)), var(--dk-surface-current) var(--dk-gradient-wash-reach));
  --dk-border-gradient-success: linear-gradient(var(--dk-border-gradient-angle), var(--dk-border-gradient-success-light), var(--dk-border-gradient-success-deep));
  --dk-surface-gradient-warning: linear-gradient(var(--dk-gradient-angle), var(--dk-gradient-warning-top-right-default-stop-2), var(--dk-gradient-warning-top-right-default-stop-3));
  --dk-surface-gradient-warning-hover: linear-gradient(var(--dk-gradient-angle), var(--dk-gradient-warning-top-right-hover-stop-2), var(--dk-gradient-warning-top-right-hover-stop-3));
  --dk-surface-gradient-warning-subtle: linear-gradient(var(--dk-gradient-wash-angle), color-mix(in srgb, var(--dk-surface-warning-subtle) var(--dk-gradient-wash-strength), var(--dk-surface-current)), var(--dk-surface-current) var(--dk-gradient-wash-reach));
  --dk-border-gradient-warning: linear-gradient(var(--dk-border-gradient-angle), var(--dk-border-gradient-warning-light), var(--dk-border-gradient-warning-deep));
  --dk-surface-gradient-error: linear-gradient(var(--dk-gradient-angle), var(--dk-gradient-error-top-right-default-stop-2), var(--dk-gradient-error-top-right-default-stop-3));
  --dk-surface-gradient-error-hover: linear-gradient(var(--dk-gradient-angle), var(--dk-gradient-error-top-right-hover-stop-2), var(--dk-gradient-error-top-right-hover-stop-3));
  --dk-surface-gradient-error-subtle: linear-gradient(var(--dk-gradient-wash-angle), color-mix(in srgb, var(--dk-surface-error-subtle) var(--dk-gradient-wash-strength), var(--dk-surface-current)), var(--dk-surface-current) var(--dk-gradient-wash-reach));
  --dk-border-gradient-error: linear-gradient(var(--dk-border-gradient-angle), var(--dk-border-gradient-error-light), var(--dk-border-gradient-error-deep));
  --dk-surface-gradient-information: linear-gradient(var(--dk-gradient-angle), var(--dk-gradient-information-top-right-default-stop-2), var(--dk-gradient-information-top-right-default-stop-3));
  --dk-surface-gradient-information-hover: linear-gradient(var(--dk-gradient-angle), var(--dk-gradient-information-top-right-hover-stop-2), var(--dk-gradient-information-top-right-hover-stop-3));
  --dk-surface-gradient-information-subtle: linear-gradient(var(--dk-gradient-wash-angle), color-mix(in srgb, var(--dk-surface-information-subtle) var(--dk-gradient-wash-strength), var(--dk-surface-current)), var(--dk-surface-current) var(--dk-gradient-wash-reach));
  --dk-border-gradient-information: linear-gradient(var(--dk-border-gradient-angle), var(--dk-border-gradient-information-light), var(--dk-border-gradient-information-deep));
  --dk-border-gradient-ai: linear-gradient(var(--dk-border-gradient-angle), var(--dk-border-gradient-ai-light), var(--dk-border-gradient-ai-deep));
  --dk-gradient-progress: linear-gradient(to right, var(--dk-border-progress-start), var(--dk-border-progress));
  --dk-gradient-progress-rtl: linear-gradient(to left, var(--dk-border-progress-start), var(--dk-border-progress));
  --dk-interactive-mark-step: 0%;
  --dk-interactive-mark-step-hover: 25%;
  --dk-interactive-mark-step-active: 50%;
  --dk-interactive-surface: transparent;
  --dk-interactive-surface-hover: var(--dk-surface-control-hover);
  --dk-interactive-surface-active: var(--dk-surface-control-active);
  --dk-interactive-text: var(--dk-text-neutral-subtle);
  --dk-interactive-text-hover: var(--dk-text-neutral-subtle-hover);
  --dk-interactive-text-active: var(--dk-text-neutral-subtle-focus);
  --dk-interactive-content-text: var(--dk-text-default);
  --dk-interactive-selected-surface: var(--dk-surface-primary-default);
  --dk-interactive-selected-surface-hover: var(--dk-surface-primary-hover);
  --dk-interactive-selected-surface-active: var(--dk-surface-primary-active);
  --dk-interactive-selected-text: var(--dk-text-on-primary-fill);
  --dk-interactive-selected-surface-disabled: var(--dk-surface-disabled-default);
  --dk-interactive-selected-text-disabled: var(--dk-text-disabled-default);
  --dk-interactive-highlight-surface: var(--dk-surface-primary-subtle);
  --dk-interactive-highlight-surface-hover: var(--dk-surface-primary-subtle-hover);
  --dk-interactive-highlight-surface-active: var(--dk-surface-primary-subtle-focus);
  --dk-interactive-highlight-text: var(--dk-text-default);
  --dk-interactive-text-disabled: var(--dk-text-disabled-subtle);
  --dk-interactive-surface-disabled: transparent;
  --dk-interactive-ring: var(--dk-border-primary-focus);
  color: var(--dk-text-default);
}