/* Sol UI 0.11.2 — generated by tools/build.mjs from tokens/tokens.json. Do not edit by hand. */
@layer sol.tokens, sol.base, sol.components, sol.patterns;
@layer sol.tokens {
:root {
	--sol-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--sol-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
	--sol-font-features: "cv11" 1;
	--sol-text-xs: 0.75rem;
	--sol-leading-xs: 1rem;
	--sol-weight-xs: 400;
	--sol-tracking-xs: 0;
	--sol-text-sm: 0.8125rem;
	--sol-leading-sm: 1.25rem;
	--sol-weight-sm: 400;
	--sol-tracking-sm: 0;
	--sol-text-md: 0.875rem;
	--sol-leading-md: 1.25rem;
	--sol-weight-md: 400;
	--sol-tracking-md: 0;
	--sol-text-base: 1rem;
	--sol-leading-base: 1.5rem;
	--sol-weight-base: 400;
	--sol-tracking-base: 0;
	--sol-text-lg: 1.125rem;
	--sol-leading-lg: 1.75rem;
	--sol-weight-lg: 500;
	--sol-tracking-lg: -0.005em;
	--sol-text-xl: 1.25rem;
	--sol-leading-xl: 1.75rem;
	--sol-weight-xl: 600;
	--sol-tracking-xl: -0.01em;
	--sol-text-2xl: 1.5rem;
	--sol-leading-2xl: 2rem;
	--sol-weight-2xl: 600;
	--sol-tracking-2xl: -0.015em;
	--sol-text-3xl: 1.875rem;
	--sol-leading-3xl: 2.375rem;
	--sol-weight-3xl: 600;
	--sol-tracking-3xl: -0.02em;
	--sol-text-4xl: 2.25rem;
	--sol-leading-4xl: 2.75rem;
	--sol-weight-4xl: 600;
	--sol-tracking-4xl: -0.022em;
	--sol-weight-regular: 400;
	--sol-weight-medium: 500;
	--sol-weight-semibold: 600;
	--sol-space-0: 0;
	--sol-space-1: 0.125rem;
	--sol-space-2: 0.25rem;
	--sol-space-3: 0.5rem;
	--sol-space-4: 0.75rem;
	--sol-space-5: 1rem;
	--sol-space-6: 1.25rem;
	--sol-space-7: 1.5rem;
	--sol-space-8: 2rem;
	--sol-space-9: 2.5rem;
	--sol-space-10: 3rem;
	--sol-space-11: 4rem;
	--sol-space-12: 5rem;
	--sol-control-sm: 1.75rem;
	--sol-control-md: 2rem;
	--sol-control-lg: 2.5rem;
	--sol-control-touch: 2.75rem;
	--sol-radius-sm: 0.25rem;
	--sol-radius-md: 0.5rem;
	--sol-radius-lg: 0.75rem;
	--sol-radius-xl: 1.25rem;
	--sol-radius-full: 9999px;
	--sol-duration-fast: 100ms;
	--sol-duration-base: 150ms;
	--sol-duration-slow: 200ms;
	--sol-duration-slower: 300ms;
	--sol-ease: cubic-bezier(0.2, 0, 0, 1);
	--sol-ease-in: cubic-bezier(0.4, 0, 1, 1);
	--sol-width-auth: 25rem;
	--sol-width-read: 45rem;
	--sol-width-app: 75rem;
	--sol-topbar-height: 3.5rem;
	--sol-sidenav-width: 15rem;
}
:root, [data-theme="light"] {
	color-scheme: light;
	--sol-canvas: #f7f7f7;
	--sol-canvas-hover: #f1f1f1;
	--sol-canvas-active: #ebebeb;
	--sol-field: #ffffff;
	--sol-layer-1: #ffffff;
	--sol-layer-1-hover: #f1f1f1;
	--sol-layer-1-active: #ebebeb;
	--sol-layer-2: #ffffff;
	--sol-layer-2-hover: #f1f1f1;
	--sol-layer-2-active: #ebebeb;
	--sol-sunken: #f1f1f1;
	--sol-sunken-hover: #ebebeb;
	--sol-sunken-active: #e4e4e4;
	--sol-selected: #ffede7;
	--sol-divider: #e4e4e4;
	--sol-border: #dcdcdc;
	--sol-border-hover: #d1d1d1;
	--sol-decoration: #e4e4e4;
	--sol-text: #232323;
	--sol-text-disabled: #bfbfbf;
	--sol-text-link: #9c3611;
	--sol-accent: #c44e27;
	--sol-accent-hover: #b54016;
	--sol-accent-active: #a73301;
	--sol-accent-subtle: #ffede7;
	--sol-accent-subtle-text: #9c3611;
	--sol-accent-border: #ffc0ac;
	--sol-focus-ring: #c44e27;
	--sol-overlay: rgb(20 20 20 / 0.32);
	--sol-border-control: #888888;
	--sol-text-muted: #606060;
	--sol-on-accent: #ffffff;
	--sol-success-solid: #1d7d3e;
	--sol-success-solid-hover: #006e30;
	--sol-success-on-solid: #ffffff;
	--sol-success-subtle: #e8f5ea;
	--sol-success-subtle-text: #1b6e36;
	--sol-success-border: #b3debb;
	--sol-warning-solid: #f4bf3f;
	--sol-warning-solid-hover: #e6b22d;
	--sol-warning-on-solid: #0d0d0d;
	--sol-warning-subtle: #f9f0df;
	--sol-warning-subtle-text: #755700;
	--sol-warning-border: #e8ce99;
	--sol-danger-solid: #b91a48;
	--sol-danger-solid-hover: #aa003e;
	--sol-danger-on-solid: #ffffff;
	--sol-danger-subtle: #ffeced;
	--sol-danger-subtle-text: #a61c42;
	--sol-danger-border: #ffbdc4;
	--sol-tone-blue: #e0efff;
	--sol-tone-blue-text: #326aa0;
	--sol-tone-teal: #cef6f4;
	--sol-tone-teal-text: #007471;
	--sol-tone-green: #dbf5dd;
	--sol-tone-green-text: #357541;
	--sol-tone-purple: #f2e8ff;
	--sol-tone-purple-text: #78599a;
	--sol-tone-pink: #ffe5ee;
	--sol-tone-pink-text: #984e6d;
	--sol-tone-amber: #ffe9cf;
	--sol-tone-amber-text: #8d5d10;
	--sol-neutral-1: #fdfdfd;
	--sol-neutral-2: #f7f7f7;
	--sol-neutral-3: #f1f1f1;
	--sol-neutral-4: #ebebeb;
	--sol-neutral-5: #e4e4e4;
	--sol-neutral-6: #dcdcdc;
	--sol-neutral-7: #d1d1d1;
	--sol-neutral-8: #bfbfbf;
	--sol-neutral-9: #424242;
	--sol-neutral-10: #333333;
	--sol-neutral-11: #5c5c5c;
	--sol-neutral-12: #232323;
	--sol-accent-1: #fffcfb;
	--sol-accent-2: #fff5f1;
	--sol-accent-3: #ffede7;
	--sol-accent-4: #ffe5dc;
	--sol-accent-5: #ffdcd1;
	--sol-accent-6: #ffd0c1;
	--sol-accent-7: #ffc0ac;
	--sol-accent-8: #f8a991;
	--sol-accent-9: #c44e27;
	--sol-accent-10: #b54016;
	--sol-accent-11: #9c3611;
	--sol-accent-12: #420e00;
	--sol-success-1: #fafefb;
	--sol-success-2: #f2f9f3;
	--sol-success-3: #e8f5ea;
	--sol-success-4: #ddf1e0;
	--sol-success-5: #d2edd6;
	--sol-success-6: #c5e6ca;
	--sol-success-7: #b3debb;
	--sol-success-8: #9bcfa4;
	--sol-success-9: #1d7d3e;
	--sol-success-10: #006e30;
	--sol-success-11: #1b6e36;
	--sol-success-12: #002c0f;
	--sol-warning-1: #fffdf8;
	--sol-warning-2: #fbf7ee;
	--sol-warning-3: #f9f0df;
	--sol-warning-4: #f6ead1;
	--sol-warning-5: #f3e3c1;
	--sol-warning-6: #eedaaf;
	--sol-warning-7: #e8ce99;
	--sol-warning-8: #dbbb78;
	--sol-warning-9: #f4bf3f;
	--sol-warning-10: #e6b22d;
	--sol-warning-11: #755700;
	--sol-warning-12: #2e2000;
	--sol-danger-1: #fffcfc;
	--sol-danger-2: #fff4f5;
	--sol-danger-3: #ffeced;
	--sol-danger-4: #ffe3e6;
	--sol-danger-5: #ffdadd;
	--sol-danger-6: #ffcdd2;
	--sol-danger-7: #ffbdc4;
	--sol-danger-8: #ffa1ac;
	--sol-danger-9: #b91a48;
	--sol-danger-10: #aa003e;
	--sol-danger-11: #a61c42;
	--sol-danger-12: #480015;
	--sol-shadow-1: 0 0.0625rem 0.125rem 0 rgb(20 20 20 / 0.050);
	--sol-shadow-2: 0 0.0625rem 0.125rem 0 rgb(20 20 20 / 0.040), 0 0.25rem 0.75rem -0.125rem rgb(20 20 20 / 0.070);
	--sol-shadow-3: 0 0.125rem 0.25rem -0.0625rem rgb(20 20 20 / 0.040), 0 0.75rem 2rem -0.5rem rgb(20 20 20 / 0.120);
}
[data-theme="dark"] {
	color-scheme: dark;
	--sol-canvas: #171717;
	--sol-canvas-hover: #1e1e1e;
	--sol-canvas-active: #252525;
	--sol-field: #121212;
	--sol-layer-1: #1e1e1e;
	--sol-layer-1-hover: #252525;
	--sol-layer-1-active: #2c2c2c;
	--sol-layer-2: #252525;
	--sol-layer-2-hover: #2c2c2c;
	--sol-layer-2-active: #343434;
	--sol-sunken: #121212;
	--sol-sunken-hover: #171717;
	--sol-sunken-active: #1e1e1e;
	--sol-selected: #40241c;
	--sol-divider: #343434;
	--sol-border: #3d3d3d;
	--sol-border-hover: #4c4c4c;
	--sol-decoration: #343434;
	--sol-text: #f0f0f0;
	--sol-text-disabled: #626262;
	--sol-text-link: #fea387;
	--sol-accent: #ea7a57;
	--sol-accent-hover: #fa8865;
	--sol-accent-active: #e26943;
	--sol-accent-subtle: #40241c;
	--sol-accent-subtle-text: #fea387;
	--sol-accent-border: #713a29;
	--sol-focus-ring: #fea387;
	--sol-overlay: rgb(0 0 0 / 0.55);
	--sol-border-control: #717171;
	--sol-text-muted: #9e9e9e;
	--sol-on-accent: #0d0d0d;
	--sol-success-solid: #21763c;
	--sol-success-solid-hover: #318349;
	--sol-success-on-solid: #ffffff;
	--sol-success-subtle: #1c291f;
	--sol-success-subtle-text: #92cf9e;
	--sol-success-border: #2f5638;
	--sol-warning-solid: #f0c051;
	--sol-warning-solid-hover: #fecd5f;
	--sol-warning-on-solid: #0d0d0d;
	--sol-warning-subtle: #2c2414;
	--sol-warning-subtle-text: #deb868;
	--sol-warning-border: #5f480e;
	--sol-danger-solid: #ba2f50;
	--sol-danger-solid-hover: #c63c5a;
	--sol-danger-on-solid: #ffffff;
	--sol-danger-subtle: #351d20;
	--sol-danger-subtle-text: #ff9eaa;
	--sol-danger-border: #78313d;
	--sol-tone-blue: #1c334b;
	--sol-tone-blue-text: #69a2dd;
	--sol-tone-teal: #033a38;
	--sol-tone-teal-text: #36b1ad;
	--sol-tone-green: #1e3922;
	--sol-tone-green-text: #6eaf77;
	--sol-tone-purple: #382a47;
	--sol-tone-purple-text: #af8fd5;
	--sol-tone-pink: #462633;
	--sol-tone-pink-text: #d484a3;
	--sol-tone-amber: #422d10;
	--sol-tone-amber-text: #c89451;
	--sol-neutral-1: #171717;
	--sol-neutral-2: #1e1e1e;
	--sol-neutral-3: #252525;
	--sol-neutral-4: #2c2c2c;
	--sol-neutral-5: #343434;
	--sol-neutral-6: #3d3d3d;
	--sol-neutral-7: #4c4c4c;
	--sol-neutral-8: #626262;
	--sol-neutral-9: #cacaca;
	--sol-neutral-10: #dedede;
	--sol-neutral-11: #bebebe;
	--sol-neutral-12: #f0f0f0;
	--sol-accent-1: #1b1614;
	--sol-accent-2: #251c19;
	--sol-accent-3: #33201a;
	--sol-accent-4: #40241c;
	--sol-accent-5: #4c2a1f;
	--sol-accent-6: #5b3022;
	--sol-accent-7: #713a29;
	--sol-accent-8: #924b34;
	--sol-accent-9: #ea7a57;
	--sol-accent-10: #fa8865;
	--sol-accent-11: #fea387;
	--sol-accent-12: #ffebe5;
	--sol-success-1: #151815;
	--sol-success-2: #1a201b;
	--sol-success-3: #1c291f;
	--sol-success-4: #1f3223;
	--sol-success-5: #233b28;
	--sol-success-6: #27452e;
	--sol-success-7: #2f5638;
	--sol-success-8: #3c6f48;
	--sol-success-9: #21763c;
	--sol-success-10: #318349;
	--sol-success-11: #92cf9e;
	--sol-success-12: #dff8e3;
	--sol-warning-1: #191713;
	--sol-warning-2: #211e16;
	--sol-warning-3: #2c2414;
	--sol-warning-4: #362b12;
	--sol-warning-5: #403212;
	--sol-warning-6: #4c3a10;
	--sol-warning-7: #5f480e;
	--sol-warning-8: #7b5d0f;
	--sol-warning-9: #f0c051;
	--sol-warning-10: #fecd5f;
	--sol-warning-11: #deb868;
	--sol-warning-12: #feefcf;
	--sol-danger-1: #1c1516;
	--sol-danger-2: #261a1c;
	--sol-danger-3: #351d20;
	--sol-danger-4: #432125;
	--sol-danger-5: #50252b;
	--sol-danger-6: #602932;
	--sol-danger-7: #78313d;
	--sol-danger-8: #9a3f4f;
	--sol-danger-9: #ba2f50;
	--sol-danger-10: #c63c5a;
	--sol-danger-11: #ff9eaa;
	--sol-danger-12: #ffeaec;
	--sol-shadow-1: 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 0.100);
	--sol-shadow-2: 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 0.080), 0 0.25rem 0.75rem -0.125rem rgb(0 0 0 / 0.140);
	--sol-shadow-3: 0 0.125rem 0.25rem -0.0625rem rgb(0 0 0 / 0.080), 0 0.75rem 2rem -0.5rem rgb(0 0 0 / 0.240);
}
[data-theme="hc-light"] {
	color-scheme: light;
	--sol-canvas: #ffffff;
	--sol-canvas-hover: #f1f1f1;
	--sol-canvas-active: #ebebeb;
	--sol-field: #ffffff;
	--sol-layer-1: #ffffff;
	--sol-layer-1-hover: #f1f1f1;
	--sol-layer-1-active: #ebebeb;
	--sol-layer-2: #ffffff;
	--sol-layer-2-hover: #f1f1f1;
	--sol-layer-2-active: #ebebeb;
	--sol-sunken: #f7f7f7;
	--sol-sunken-hover: #f1f1f1;
	--sol-sunken-active: #ebebeb;
	--sol-selected: #ffede7;
	--sol-divider: #717171;
	--sol-border: #484848;
	--sol-border-hover: #2e2e2e;
	--sol-decoration: transparent;
	--sol-border-control: #2e2e2e;
	--sol-text: #060606;
	--sol-text-disabled: #717171;
	--sol-text-link: #872700;
	--sol-accent: #902a00;
	--sol-accent-hover: #7a2200;
	--sol-accent-active: #691c00;
	--sol-accent-subtle: #ffede7;
	--sol-accent-subtle-text: #762100;
	--sol-accent-border: #902a00;
	--sol-focus-ring: #762100;
	--sol-overlay: rgb(0 0 0 / 0.6);
	--sol-text-muted: #4c4c4c;
	--sol-on-accent: #ffffff;
	--sol-success-solid: #00652b;
	--sol-success-solid-hover: #005825;
	--sol-success-on-solid: #ffffff;
	--sol-success-subtle: #e8f5ea;
	--sol-success-subtle-text: #005a26;
	--sol-success-border: #48a160;
	--sol-warning-solid: #6f5200;
	--sol-warning-solid-hover: #624800;
	--sol-warning-on-solid: #ffffff;
	--sol-warning-subtle: #f9f0df;
	--sol-warning-subtle-text: #624800;
	--sol-warning-border: #b58800;
	--sol-danger-solid: #ae0440;
	--sol-danger-solid-hover: #9b0038;
	--sol-danger-on-solid: #ffffff;
	--sol-danger-subtle: #ffeced;
	--sol-danger-subtle-text: #9b0038;
	--sol-danger-border: #f45978;
	--sol-tone-blue: #f7f7f7;
	--sol-tone-blue-text: #060606;
	--sol-tone-teal: #f7f7f7;
	--sol-tone-teal-text: #060606;
	--sol-tone-green: #f7f7f7;
	--sol-tone-green-text: #060606;
	--sol-tone-purple: #f7f7f7;
	--sol-tone-purple-text: #060606;
	--sol-tone-pink: #f7f7f7;
	--sol-tone-pink-text: #060606;
	--sol-tone-amber: #f7f7f7;
	--sol-tone-amber-text: #060606;
	--sol-neutral-1: #fdfdfd;
	--sol-neutral-2: #f7f7f7;
	--sol-neutral-3: #f1f1f1;
	--sol-neutral-4: #ebebeb;
	--sol-neutral-5: #e4e4e4;
	--sol-neutral-6: #dcdcdc;
	--sol-neutral-7: #d1d1d1;
	--sol-neutral-8: #bfbfbf;
	--sol-neutral-9: #424242;
	--sol-neutral-10: #333333;
	--sol-neutral-11: #5c5c5c;
	--sol-neutral-12: #232323;
	--sol-accent-1: #fffcfb;
	--sol-accent-2: #fff5f1;
	--sol-accent-3: #ffede7;
	--sol-accent-4: #ffe5dc;
	--sol-accent-5: #ffdcd1;
	--sol-accent-6: #ffd0c1;
	--sol-accent-7: #ffc0ac;
	--sol-accent-8: #f8a991;
	--sol-accent-9: #c44e27;
	--sol-accent-10: #b54016;
	--sol-accent-11: #9c3611;
	--sol-accent-12: #420e00;
	--sol-success-1: #fafefb;
	--sol-success-2: #f2f9f3;
	--sol-success-3: #e8f5ea;
	--sol-success-4: #ddf1e0;
	--sol-success-5: #d2edd6;
	--sol-success-6: #c5e6ca;
	--sol-success-7: #b3debb;
	--sol-success-8: #9bcfa4;
	--sol-success-9: #1d7d3e;
	--sol-success-10: #006e30;
	--sol-success-11: #1b6e36;
	--sol-success-12: #002c0f;
	--sol-warning-1: #fffdf8;
	--sol-warning-2: #fbf7ee;
	--sol-warning-3: #f9f0df;
	--sol-warning-4: #f6ead1;
	--sol-warning-5: #f3e3c1;
	--sol-warning-6: #eedaaf;
	--sol-warning-7: #e8ce99;
	--sol-warning-8: #dbbb78;
	--sol-warning-9: #f4bf3f;
	--sol-warning-10: #e6b22d;
	--sol-warning-11: #755700;
	--sol-warning-12: #2e2000;
	--sol-danger-1: #fffcfc;
	--sol-danger-2: #fff4f5;
	--sol-danger-3: #ffeced;
	--sol-danger-4: #ffe3e6;
	--sol-danger-5: #ffdadd;
	--sol-danger-6: #ffcdd2;
	--sol-danger-7: #ffbdc4;
	--sol-danger-8: #ffa1ac;
	--sol-danger-9: #b91a48;
	--sol-danger-10: #aa003e;
	--sol-danger-11: #a61c42;
	--sol-danger-12: #480015;
	--sol-shadow-1: 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 0.060);
	--sol-shadow-2: 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 0.048), 0 0.25rem 0.75rem -0.125rem rgb(0 0 0 / 0.084);
	--sol-shadow-3: 0 0.125rem 0.25rem -0.0625rem rgb(0 0 0 / 0.048), 0 0.75rem 2rem -0.5rem rgb(0 0 0 / 0.144);
}
[data-theme="hc-dark"] {
	color-scheme: dark;
	--sol-canvas: #060606;
	--sol-canvas-hover: #161616;
	--sol-canvas-active: #1f1f1f;
	--sol-field: #020202;
	--sol-layer-1: #0b0b0b;
	--sol-layer-1-hover: #1b1b1b;
	--sol-layer-1-active: #242424;
	--sol-layer-2: #141414;
	--sol-layer-2-hover: #222222;
	--sol-layer-2-active: #2b2b2b;
	--sol-sunken: #020202;
	--sol-sunken-hover: #0b0b0b;
	--sol-sunken-active: #141414;
	--sol-selected: #33201a;
	--sol-divider: #717171;
	--sol-border: #989898;
	--sol-border-hover: #c4c4c4;
	--sol-decoration: transparent;
	--sol-border-control: #b7b7b7;
	--sol-text: #fcfcfc;
	--sol-text-disabled: #717171;
	--sol-text-link: #ffad93;
	--sol-accent: #ffa286;
	--sol-accent-hover: #ffc0ac;
	--sol-accent-active: #ffd3c5;
	--sol-accent-subtle: #33201a;
	--sol-accent-subtle-text: #ffc0ac;
	--sol-accent-border: #ff9878;
	--sol-focus-ring: #ffc0ac;
	--sol-overlay: rgb(0 0 0 / 0.75);
	--sol-text-muted: #b2b2b2;
	--sol-on-accent: #0d0d0d;
	--sol-success-solid: #57b06e;
	--sol-success-solid-hover: #64bd7a;
	--sol-success-on-solid: #0d0d0d;
	--sol-success-subtle: #1c291f;
	--sol-success-subtle-text: #71ca86;
	--sol-success-border: #067132;
	--sol-warning-solid: #c79600;
	--sol-warning-solid-hover: #d6a20a;
	--sol-warning-on-solid: #0d0d0d;
	--sol-warning-subtle: #2c2414;
	--sol-warning-subtle-text: #e2ae26;
	--sol-warning-border: #7d5d00;
	--sol-danger-solid: #ff6d87;
	--sol-danger-solid-hover: #ff8798;
	--sol-danger-on-solid: #0d0d0d;
	--sol-danger-subtle: #351d20;
	--sol-danger-subtle-text: #ff97a4;
	--sol-danger-border: #bc1f4b;
	--sol-tone-blue: #020202;
	--sol-tone-blue-text: #fcfcfc;
	--sol-tone-teal: #020202;
	--sol-tone-teal-text: #fcfcfc;
	--sol-tone-green: #020202;
	--sol-tone-green-text: #fcfcfc;
	--sol-tone-purple: #020202;
	--sol-tone-purple-text: #fcfcfc;
	--sol-tone-pink: #020202;
	--sol-tone-pink-text: #fcfcfc;
	--sol-tone-amber: #020202;
	--sol-tone-amber-text: #fcfcfc;
	--sol-neutral-1: #171717;
	--sol-neutral-2: #1e1e1e;
	--sol-neutral-3: #252525;
	--sol-neutral-4: #2c2c2c;
	--sol-neutral-5: #343434;
	--sol-neutral-6: #3d3d3d;
	--sol-neutral-7: #4c4c4c;
	--sol-neutral-8: #626262;
	--sol-neutral-9: #cacaca;
	--sol-neutral-10: #dedede;
	--sol-neutral-11: #bebebe;
	--sol-neutral-12: #f0f0f0;
	--sol-accent-1: #1b1614;
	--sol-accent-2: #251c19;
	--sol-accent-3: #33201a;
	--sol-accent-4: #40241c;
	--sol-accent-5: #4c2a1f;
	--sol-accent-6: #5b3022;
	--sol-accent-7: #713a29;
	--sol-accent-8: #924b34;
	--sol-accent-9: #ea7a57;
	--sol-accent-10: #fa8865;
	--sol-accent-11: #fea387;
	--sol-accent-12: #ffebe5;
	--sol-success-1: #151815;
	--sol-success-2: #1a201b;
	--sol-success-3: #1c291f;
	--sol-success-4: #1f3223;
	--sol-success-5: #233b28;
	--sol-success-6: #27452e;
	--sol-success-7: #2f5638;
	--sol-success-8: #3c6f48;
	--sol-success-9: #21763c;
	--sol-success-10: #318349;
	--sol-success-11: #92cf9e;
	--sol-success-12: #dff8e3;
	--sol-warning-1: #191713;
	--sol-warning-2: #211e16;
	--sol-warning-3: #2c2414;
	--sol-warning-4: #362b12;
	--sol-warning-5: #403212;
	--sol-warning-6: #4c3a10;
	--sol-warning-7: #5f480e;
	--sol-warning-8: #7b5d0f;
	--sol-warning-9: #f0c051;
	--sol-warning-10: #fecd5f;
	--sol-warning-11: #deb868;
	--sol-warning-12: #feefcf;
	--sol-danger-1: #1c1516;
	--sol-danger-2: #261a1c;
	--sol-danger-3: #351d20;
	--sol-danger-4: #432125;
	--sol-danger-5: #50252b;
	--sol-danger-6: #602932;
	--sol-danger-7: #78313d;
	--sol-danger-8: #9a3f4f;
	--sol-danger-9: #ba2f50;
	--sol-danger-10: #c63c5a;
	--sol-danger-11: #ff9eaa;
	--sol-danger-12: #ffeaec;
	--sol-shadow-1: 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 0.125);
	--sol-shadow-2: 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 0.100), 0 0.25rem 0.75rem -0.125rem rgb(0 0 0 / 0.175);
	--sol-shadow-3: 0 0.125rem 0.25rem -0.0625rem rgb(0 0 0 / 0.100), 0 0.75rem 2rem -0.5rem rgb(0 0 0 / 0.300);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme]) {
	color-scheme: dark;
	--sol-canvas: #171717;
	--sol-canvas-hover: #1e1e1e;
	--sol-canvas-active: #252525;
	--sol-field: #121212;
	--sol-layer-1: #1e1e1e;
	--sol-layer-1-hover: #252525;
	--sol-layer-1-active: #2c2c2c;
	--sol-layer-2: #252525;
	--sol-layer-2-hover: #2c2c2c;
	--sol-layer-2-active: #343434;
	--sol-sunken: #121212;
	--sol-sunken-hover: #171717;
	--sol-sunken-active: #1e1e1e;
	--sol-selected: #40241c;
	--sol-divider: #343434;
	--sol-border: #3d3d3d;
	--sol-border-hover: #4c4c4c;
	--sol-decoration: #343434;
	--sol-text: #f0f0f0;
	--sol-text-disabled: #626262;
	--sol-text-link: #fea387;
	--sol-accent: #ea7a57;
	--sol-accent-hover: #fa8865;
	--sol-accent-active: #e26943;
	--sol-accent-subtle: #40241c;
	--sol-accent-subtle-text: #fea387;
	--sol-accent-border: #713a29;
	--sol-focus-ring: #fea387;
	--sol-overlay: rgb(0 0 0 / 0.55);
	--sol-border-control: #717171;
	--sol-text-muted: #9e9e9e;
	--sol-on-accent: #0d0d0d;
	--sol-success-solid: #21763c;
	--sol-success-solid-hover: #318349;
	--sol-success-on-solid: #ffffff;
	--sol-success-subtle: #1c291f;
	--sol-success-subtle-text: #92cf9e;
	--sol-success-border: #2f5638;
	--sol-warning-solid: #f0c051;
	--sol-warning-solid-hover: #fecd5f;
	--sol-warning-on-solid: #0d0d0d;
	--sol-warning-subtle: #2c2414;
	--sol-warning-subtle-text: #deb868;
	--sol-warning-border: #5f480e;
	--sol-danger-solid: #ba2f50;
	--sol-danger-solid-hover: #c63c5a;
	--sol-danger-on-solid: #ffffff;
	--sol-danger-subtle: #351d20;
	--sol-danger-subtle-text: #ff9eaa;
	--sol-danger-border: #78313d;
	--sol-tone-blue: #1c334b;
	--sol-tone-blue-text: #69a2dd;
	--sol-tone-teal: #033a38;
	--sol-tone-teal-text: #36b1ad;
	--sol-tone-green: #1e3922;
	--sol-tone-green-text: #6eaf77;
	--sol-tone-purple: #382a47;
	--sol-tone-purple-text: #af8fd5;
	--sol-tone-pink: #462633;
	--sol-tone-pink-text: #d484a3;
	--sol-tone-amber: #422d10;
	--sol-tone-amber-text: #c89451;
	--sol-neutral-1: #171717;
	--sol-neutral-2: #1e1e1e;
	--sol-neutral-3: #252525;
	--sol-neutral-4: #2c2c2c;
	--sol-neutral-5: #343434;
	--sol-neutral-6: #3d3d3d;
	--sol-neutral-7: #4c4c4c;
	--sol-neutral-8: #626262;
	--sol-neutral-9: #cacaca;
	--sol-neutral-10: #dedede;
	--sol-neutral-11: #bebebe;
	--sol-neutral-12: #f0f0f0;
	--sol-accent-1: #1b1614;
	--sol-accent-2: #251c19;
	--sol-accent-3: #33201a;
	--sol-accent-4: #40241c;
	--sol-accent-5: #4c2a1f;
	--sol-accent-6: #5b3022;
	--sol-accent-7: #713a29;
	--sol-accent-8: #924b34;
	--sol-accent-9: #ea7a57;
	--sol-accent-10: #fa8865;
	--sol-accent-11: #fea387;
	--sol-accent-12: #ffebe5;
	--sol-success-1: #151815;
	--sol-success-2: #1a201b;
	--sol-success-3: #1c291f;
	--sol-success-4: #1f3223;
	--sol-success-5: #233b28;
	--sol-success-6: #27452e;
	--sol-success-7: #2f5638;
	--sol-success-8: #3c6f48;
	--sol-success-9: #21763c;
	--sol-success-10: #318349;
	--sol-success-11: #92cf9e;
	--sol-success-12: #dff8e3;
	--sol-warning-1: #191713;
	--sol-warning-2: #211e16;
	--sol-warning-3: #2c2414;
	--sol-warning-4: #362b12;
	--sol-warning-5: #403212;
	--sol-warning-6: #4c3a10;
	--sol-warning-7: #5f480e;
	--sol-warning-8: #7b5d0f;
	--sol-warning-9: #f0c051;
	--sol-warning-10: #fecd5f;
	--sol-warning-11: #deb868;
	--sol-warning-12: #feefcf;
	--sol-danger-1: #1c1516;
	--sol-danger-2: #261a1c;
	--sol-danger-3: #351d20;
	--sol-danger-4: #432125;
	--sol-danger-5: #50252b;
	--sol-danger-6: #602932;
	--sol-danger-7: #78313d;
	--sol-danger-8: #9a3f4f;
	--sol-danger-9: #ba2f50;
	--sol-danger-10: #c63c5a;
	--sol-danger-11: #ff9eaa;
	--sol-danger-12: #ffeaec;
	--sol-shadow-1: 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 0.100);
	--sol-shadow-2: 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 0.080), 0 0.25rem 0.75rem -0.125rem rgb(0 0 0 / 0.140);
	--sol-shadow-3: 0 0.125rem 0.25rem -0.0625rem rgb(0 0 0 / 0.080), 0 0.75rem 2rem -0.5rem rgb(0 0 0 / 0.240);
} }
@media (prefers-contrast: more) { :root:not([data-theme]) {
	color-scheme: light;
	--sol-canvas: #ffffff;
	--sol-canvas-hover: #f1f1f1;
	--sol-canvas-active: #ebebeb;
	--sol-field: #ffffff;
	--sol-layer-1: #ffffff;
	--sol-layer-1-hover: #f1f1f1;
	--sol-layer-1-active: #ebebeb;
	--sol-layer-2: #ffffff;
	--sol-layer-2-hover: #f1f1f1;
	--sol-layer-2-active: #ebebeb;
	--sol-sunken: #f7f7f7;
	--sol-sunken-hover: #f1f1f1;
	--sol-sunken-active: #ebebeb;
	--sol-selected: #ffede7;
	--sol-divider: #717171;
	--sol-border: #484848;
	--sol-border-hover: #2e2e2e;
	--sol-decoration: transparent;
	--sol-border-control: #2e2e2e;
	--sol-text: #060606;
	--sol-text-disabled: #717171;
	--sol-text-link: #872700;
	--sol-accent: #902a00;
	--sol-accent-hover: #7a2200;
	--sol-accent-active: #691c00;
	--sol-accent-subtle: #ffede7;
	--sol-accent-subtle-text: #762100;
	--sol-accent-border: #902a00;
	--sol-focus-ring: #762100;
	--sol-overlay: rgb(0 0 0 / 0.6);
	--sol-text-muted: #4c4c4c;
	--sol-on-accent: #ffffff;
	--sol-success-solid: #00652b;
	--sol-success-solid-hover: #005825;
	--sol-success-on-solid: #ffffff;
	--sol-success-subtle: #e8f5ea;
	--sol-success-subtle-text: #005a26;
	--sol-success-border: #48a160;
	--sol-warning-solid: #6f5200;
	--sol-warning-solid-hover: #624800;
	--sol-warning-on-solid: #ffffff;
	--sol-warning-subtle: #f9f0df;
	--sol-warning-subtle-text: #624800;
	--sol-warning-border: #b58800;
	--sol-danger-solid: #ae0440;
	--sol-danger-solid-hover: #9b0038;
	--sol-danger-on-solid: #ffffff;
	--sol-danger-subtle: #ffeced;
	--sol-danger-subtle-text: #9b0038;
	--sol-danger-border: #f45978;
	--sol-tone-blue: #f7f7f7;
	--sol-tone-blue-text: #060606;
	--sol-tone-teal: #f7f7f7;
	--sol-tone-teal-text: #060606;
	--sol-tone-green: #f7f7f7;
	--sol-tone-green-text: #060606;
	--sol-tone-purple: #f7f7f7;
	--sol-tone-purple-text: #060606;
	--sol-tone-pink: #f7f7f7;
	--sol-tone-pink-text: #060606;
	--sol-tone-amber: #f7f7f7;
	--sol-tone-amber-text: #060606;
	--sol-neutral-1: #fdfdfd;
	--sol-neutral-2: #f7f7f7;
	--sol-neutral-3: #f1f1f1;
	--sol-neutral-4: #ebebeb;
	--sol-neutral-5: #e4e4e4;
	--sol-neutral-6: #dcdcdc;
	--sol-neutral-7: #d1d1d1;
	--sol-neutral-8: #bfbfbf;
	--sol-neutral-9: #424242;
	--sol-neutral-10: #333333;
	--sol-neutral-11: #5c5c5c;
	--sol-neutral-12: #232323;
	--sol-accent-1: #fffcfb;
	--sol-accent-2: #fff5f1;
	--sol-accent-3: #ffede7;
	--sol-accent-4: #ffe5dc;
	--sol-accent-5: #ffdcd1;
	--sol-accent-6: #ffd0c1;
	--sol-accent-7: #ffc0ac;
	--sol-accent-8: #f8a991;
	--sol-accent-9: #c44e27;
	--sol-accent-10: #b54016;
	--sol-accent-11: #9c3611;
	--sol-accent-12: #420e00;
	--sol-success-1: #fafefb;
	--sol-success-2: #f2f9f3;
	--sol-success-3: #e8f5ea;
	--sol-success-4: #ddf1e0;
	--sol-success-5: #d2edd6;
	--sol-success-6: #c5e6ca;
	--sol-success-7: #b3debb;
	--sol-success-8: #9bcfa4;
	--sol-success-9: #1d7d3e;
	--sol-success-10: #006e30;
	--sol-success-11: #1b6e36;
	--sol-success-12: #002c0f;
	--sol-warning-1: #fffdf8;
	--sol-warning-2: #fbf7ee;
	--sol-warning-3: #f9f0df;
	--sol-warning-4: #f6ead1;
	--sol-warning-5: #f3e3c1;
	--sol-warning-6: #eedaaf;
	--sol-warning-7: #e8ce99;
	--sol-warning-8: #dbbb78;
	--sol-warning-9: #f4bf3f;
	--sol-warning-10: #e6b22d;
	--sol-warning-11: #755700;
	--sol-warning-12: #2e2000;
	--sol-danger-1: #fffcfc;
	--sol-danger-2: #fff4f5;
	--sol-danger-3: #ffeced;
	--sol-danger-4: #ffe3e6;
	--sol-danger-5: #ffdadd;
	--sol-danger-6: #ffcdd2;
	--sol-danger-7: #ffbdc4;
	--sol-danger-8: #ffa1ac;
	--sol-danger-9: #b91a48;
	--sol-danger-10: #aa003e;
	--sol-danger-11: #a61c42;
	--sol-danger-12: #480015;
	--sol-shadow-1: 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 0.060);
	--sol-shadow-2: 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 0.048), 0 0.25rem 0.75rem -0.125rem rgb(0 0 0 / 0.084);
	--sol-shadow-3: 0 0.125rem 0.25rem -0.0625rem rgb(0 0 0 / 0.048), 0 0.75rem 2rem -0.5rem rgb(0 0 0 / 0.144);
} }
@media (prefers-contrast: more) and (prefers-color-scheme: dark) { :root:not([data-theme]) {
	color-scheme: dark;
	--sol-canvas: #060606;
	--sol-canvas-hover: #161616;
	--sol-canvas-active: #1f1f1f;
	--sol-field: #020202;
	--sol-layer-1: #0b0b0b;
	--sol-layer-1-hover: #1b1b1b;
	--sol-layer-1-active: #242424;
	--sol-layer-2: #141414;
	--sol-layer-2-hover: #222222;
	--sol-layer-2-active: #2b2b2b;
	--sol-sunken: #020202;
	--sol-sunken-hover: #0b0b0b;
	--sol-sunken-active: #141414;
	--sol-selected: #33201a;
	--sol-divider: #717171;
	--sol-border: #989898;
	--sol-border-hover: #c4c4c4;
	--sol-decoration: transparent;
	--sol-border-control: #b7b7b7;
	--sol-text: #fcfcfc;
	--sol-text-disabled: #717171;
	--sol-text-link: #ffad93;
	--sol-accent: #ffa286;
	--sol-accent-hover: #ffc0ac;
	--sol-accent-active: #ffd3c5;
	--sol-accent-subtle: #33201a;
	--sol-accent-subtle-text: #ffc0ac;
	--sol-accent-border: #ff9878;
	--sol-focus-ring: #ffc0ac;
	--sol-overlay: rgb(0 0 0 / 0.75);
	--sol-text-muted: #b2b2b2;
	--sol-on-accent: #0d0d0d;
	--sol-success-solid: #57b06e;
	--sol-success-solid-hover: #64bd7a;
	--sol-success-on-solid: #0d0d0d;
	--sol-success-subtle: #1c291f;
	--sol-success-subtle-text: #71ca86;
	--sol-success-border: #067132;
	--sol-warning-solid: #c79600;
	--sol-warning-solid-hover: #d6a20a;
	--sol-warning-on-solid: #0d0d0d;
	--sol-warning-subtle: #2c2414;
	--sol-warning-subtle-text: #e2ae26;
	--sol-warning-border: #7d5d00;
	--sol-danger-solid: #ff6d87;
	--sol-danger-solid-hover: #ff8798;
	--sol-danger-on-solid: #0d0d0d;
	--sol-danger-subtle: #351d20;
	--sol-danger-subtle-text: #ff97a4;
	--sol-danger-border: #bc1f4b;
	--sol-tone-blue: #020202;
	--sol-tone-blue-text: #fcfcfc;
	--sol-tone-teal: #020202;
	--sol-tone-teal-text: #fcfcfc;
	--sol-tone-green: #020202;
	--sol-tone-green-text: #fcfcfc;
	--sol-tone-purple: #020202;
	--sol-tone-purple-text: #fcfcfc;
	--sol-tone-pink: #020202;
	--sol-tone-pink-text: #fcfcfc;
	--sol-tone-amber: #020202;
	--sol-tone-amber-text: #fcfcfc;
	--sol-neutral-1: #171717;
	--sol-neutral-2: #1e1e1e;
	--sol-neutral-3: #252525;
	--sol-neutral-4: #2c2c2c;
	--sol-neutral-5: #343434;
	--sol-neutral-6: #3d3d3d;
	--sol-neutral-7: #4c4c4c;
	--sol-neutral-8: #626262;
	--sol-neutral-9: #cacaca;
	--sol-neutral-10: #dedede;
	--sol-neutral-11: #bebebe;
	--sol-neutral-12: #f0f0f0;
	--sol-accent-1: #1b1614;
	--sol-accent-2: #251c19;
	--sol-accent-3: #33201a;
	--sol-accent-4: #40241c;
	--sol-accent-5: #4c2a1f;
	--sol-accent-6: #5b3022;
	--sol-accent-7: #713a29;
	--sol-accent-8: #924b34;
	--sol-accent-9: #ea7a57;
	--sol-accent-10: #fa8865;
	--sol-accent-11: #fea387;
	--sol-accent-12: #ffebe5;
	--sol-success-1: #151815;
	--sol-success-2: #1a201b;
	--sol-success-3: #1c291f;
	--sol-success-4: #1f3223;
	--sol-success-5: #233b28;
	--sol-success-6: #27452e;
	--sol-success-7: #2f5638;
	--sol-success-8: #3c6f48;
	--sol-success-9: #21763c;
	--sol-success-10: #318349;
	--sol-success-11: #92cf9e;
	--sol-success-12: #dff8e3;
	--sol-warning-1: #191713;
	--sol-warning-2: #211e16;
	--sol-warning-3: #2c2414;
	--sol-warning-4: #362b12;
	--sol-warning-5: #403212;
	--sol-warning-6: #4c3a10;
	--sol-warning-7: #5f480e;
	--sol-warning-8: #7b5d0f;
	--sol-warning-9: #f0c051;
	--sol-warning-10: #fecd5f;
	--sol-warning-11: #deb868;
	--sol-warning-12: #feefcf;
	--sol-danger-1: #1c1516;
	--sol-danger-2: #261a1c;
	--sol-danger-3: #351d20;
	--sol-danger-4: #432125;
	--sol-danger-5: #50252b;
	--sol-danger-6: #602932;
	--sol-danger-7: #78313d;
	--sol-danger-8: #9a3f4f;
	--sol-danger-9: #ba2f50;
	--sol-danger-10: #c63c5a;
	--sol-danger-11: #ff9eaa;
	--sol-danger-12: #ffeaec;
	--sol-shadow-1: 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 0.125);
	--sol-shadow-2: 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 0.100), 0 0.25rem 0.75rem -0.125rem rgb(0 0 0 / 0.175);
	--sol-shadow-3: 0 0.125rem 0.25rem -0.0625rem rgb(0 0 0 / 0.100), 0 0.75rem 2rem -0.5rem rgb(0 0 0 / 0.300);
} }
[data-layer="1"] {
	--sol-layer: var(--sol-layer-1);
	--sol-layer-hover: var(--sol-layer-1-hover);
	--sol-layer-active: var(--sol-layer-1-active);
}
[data-layer="2"] {
	--sol-layer: var(--sol-layer-2);
	--sol-layer-hover: var(--sol-layer-2-hover);
	--sol-layer-active: var(--sol-layer-2-active);
}
:root, [data-theme], [data-layer="canvas"] {
	--sol-layer: var(--sol-canvas);
	--sol-layer-hover: var(--sol-canvas-hover);
	--sol-layer-active: var(--sol-canvas-active);
}
[data-layer="sunken"] {
	--sol-layer: var(--sol-sunken);
	--sol-layer-hover: var(--sol-sunken-hover);
	--sol-layer-active: var(--sol-sunken-active);
}
:root, [data-density="comfortable"] {
	--sol-body-size: var(--sol-text-base);
	--sol-body-leading: var(--sol-leading-base);
	--sol-control: var(--sol-control-lg);
	--sol-pad: var(--sol-space-7);
	--sol-gap: var(--sol-space-5);
}
[data-density="compact"] {
	--sol-body-size: var(--sol-text-md);
	--sol-body-leading: var(--sol-leading-md);
	--sol-control: var(--sol-control-md);
	--sol-pad: var(--sol-space-6);
	--sol-gap: var(--sol-space-4);
}
}

/* Fonts: Inter (variable, SIL OFL) and IBM Plex Mono (SIL OFL), shipped beside
   this file in fonts/. Nothing is fetched from anywhere else. */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/InterVariable.woff2') format('woff2');
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/IBMPlexMono-Regular-Latin1.woff2') format('woff2');
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/IBMPlexMono-Medium-Latin1.woff2') format('woff2');
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/IBMPlexMono-SemiBold-Latin1.woff2') format('woff2');
}

/* Sol UI base: a light reset, type, focus, links, code, and layout helpers.
   Everything in @layer sol.base, so a project's own CSS wins without !important. */
@layer sol.base {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
		background: var(--sol-canvas);
	}

	body {
		margin: 0;
		min-height: 100vh;
		font-family: var(--sol-font-sans);
		font-feature-settings: var(--sol-font-features);
		font-size: var(--sol-body-size);
		line-height: var(--sol-body-leading);
		color: var(--sol-text);
		background: var(--sol-canvas);
	}

	/* Anything given its own theme or density (a preview panel, an admin area)
	   paints with it. */
	[data-theme],
	[data-density] {
		font-size: var(--sol-body-size);
		line-height: var(--sol-body-leading);
		color: var(--sol-text);
	}
	[data-theme]:not(html) {
		background: var(--sol-canvas);
	}
	/* A layer paints itself; its hovers come from --sol-layer-hover. */
	[data-layer] {
		background: var(--sol-layer);
	}

	h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
		margin: 0;
	}
	h1, h2, h3, h4 {
		color: var(--sol-text);
		text-wrap: balance;
	}
	h1 {
		font-size: var(--sol-text-3xl);
		line-height: var(--sol-leading-3xl);
		font-weight: var(--sol-weight-3xl);
		letter-spacing: var(--sol-tracking-3xl);
	}
	h2 {
		font-size: var(--sol-text-2xl);
		line-height: var(--sol-leading-2xl);
		font-weight: var(--sol-weight-2xl);
		letter-spacing: var(--sol-tracking-2xl);
	}
	h3 {
		font-size: var(--sol-text-xl);
		line-height: var(--sol-leading-xl);
		font-weight: var(--sol-weight-xl);
		letter-spacing: var(--sol-tracking-xl);
	}
	h4 {
		font-size: var(--sol-text-lg);
		line-height: var(--sol-leading-lg);
		font-weight: var(--sol-weight-semibold);
	}
	/* Admin areas take the type one step down, so pages stay dense. */
	[data-density='compact'] h1 {
		font-size: var(--sol-text-2xl);
		line-height: var(--sol-leading-2xl);
		letter-spacing: var(--sol-tracking-2xl);
	}
	[data-density='compact'] h2 {
		font-size: var(--sol-text-xl);
		line-height: var(--sol-leading-xl);
		letter-spacing: var(--sol-tracking-xl);
	}
	[data-density='compact'] h3 {
		font-size: var(--sol-text-lg);
		line-height: var(--sol-leading-lg);
	}

	p {
		text-wrap: pretty;
	}
	small {
		font-size: var(--sol-text-sm);
		line-height: var(--sol-leading-sm);
	}
	strong, b {
		font-weight: var(--sol-weight-semibold);
	}

	a {
		color: var(--sol-text-link);
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.18em;
		text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
		transition: text-decoration-color var(--sol-duration-fast) var(--sol-ease);
	}
	a:hover {
		text-decoration-color: currentColor;
	}

	code, kbd, samp, pre {
		font-family: var(--sol-font-mono);
		font-size: 0.9em;
		font-feature-settings: normal;
	}
	:not(pre) > code {
		padding: 0.1em 0.35em;
		border-radius: var(--sol-radius-sm);
		background: var(--sol-sunken);
		border: 1px solid var(--sol-divider);
	}
	pre {
		margin: 0;
		padding: var(--sol-space-5);
		overflow-x: auto;
		border-radius: var(--sol-radius-md);
		background: var(--sol-sunken);
		border: 1px solid var(--sol-divider);
		line-height: var(--sol-leading-md);
		font-size: var(--sol-text-sm);
	}
	kbd {
		padding: 0.05em 0.4em;
		border-radius: var(--sol-radius-sm);
		border: 1px solid var(--sol-border);
		border-bottom-width: 2px;
		background: var(--sol-layer-1);
		font-size: 0.85em;
	}

	hr {
		border: 0;
		border-top: 1px solid var(--sol-divider);
		margin: var(--sol-space-7) 0;
	}

	img, svg, video, canvas {
		display: block;
		max-width: 100%;
	}
	svg {
		flex-shrink: 0;
	}

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

	table {
		border-collapse: collapse;
		font-variant-numeric: tabular-nums;
	}

	::selection {
		background: var(--sol-accent-subtle);
		color: var(--sol-text);
	}

	/* One focus ring for everything, keyboard only. Never removed. */
	:focus-visible {
		outline: 2px solid var(--sol-focus-ring);
		outline-offset: 2px;
		border-radius: var(--sol-radius-sm);
	}
	:focus:not(:focus-visible) {
		outline: none;
	}

	[hidden] {
		display: none !important;
	}

	@media (prefers-reduced-motion: reduce) {
		/* everything stops, except what says "busy": spinners keep turning */
		*:not(.sol-spinner),
		*::before,
		*:not([data-loading])::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}
	}

	/* --- helpers --- */

	.sol-visually-hidden {
		position: absolute !important;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}

	.sol-muted { color: var(--sol-text-muted); }
	.sol-mono { font-family: var(--sol-font-mono); font-feature-settings: normal; }
	.sol-num { font-variant-numeric: tabular-nums; }
	.sol-text-xs { font-size: var(--sol-text-xs); line-height: var(--sol-leading-xs); }
	.sol-text-sm { font-size: var(--sol-text-sm); line-height: var(--sol-leading-sm); }
	.sol-text-md { font-size: var(--sol-text-md); line-height: var(--sol-leading-md); }
	.sol-text-base { font-size: var(--sol-text-base); line-height: var(--sol-leading-base); }
	.sol-text-lg { font-size: var(--sol-text-lg); line-height: var(--sol-leading-lg); }

	/* Containers: auth (sign-in cards), read (prose), app (consoles). */
	.sol-container {
		width: 100%;
		max-width: var(--sol-width-app);
		margin-inline: auto;
		padding-inline: var(--sol-space-6);
	}
	.sol-container[data-width='read'] { max-width: calc(var(--sol-width-read) + 2 * var(--sol-space-6)); }
	.sol-container[data-width='auth'] { max-width: calc(var(--sol-width-auth) + 2 * var(--sol-space-6)); }
	@media (max-width: 640px) {
		.sol-container { padding-inline: var(--sol-space-5); }
	}

	/* Stack: a column with even gaps. Cluster: a wrapping row. Grid: equal columns. */
	.sol-stack {
		display: flex;
		flex-direction: column;
		gap: var(--sol-gap, var(--sol-space-5));
	}
	.sol-cluster {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--sol-gap, var(--sol-space-3));
	}
	.sol-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(var(--sol-min, 16rem), 1fr));
		gap: var(--sol-gap, var(--sol-space-5));
	}
	[data-gap='1'] { --sol-gap: var(--sol-space-1); }
	[data-gap='2'] { --sol-gap: var(--sol-space-2); }
	[data-gap='3'] { --sol-gap: var(--sol-space-3); }
	[data-gap='4'] { --sol-gap: var(--sol-space-4); }
	[data-gap='5'] { --sol-gap: var(--sol-space-5); }
	[data-gap='6'] { --sol-gap: var(--sol-space-6); }
	[data-gap='7'] { --sol-gap: var(--sol-space-7); }
	[data-gap='8'] { --sol-gap: var(--sol-space-8); }
	[data-gap='9'] { --sol-gap: var(--sol-space-9); }
	[data-gap='10'] { --sol-gap: var(--sol-space-10); }
	[data-gap='11'] { --sol-gap: var(--sol-space-11); }
}

/* Sol UI primitives: CSS on native elements, no JavaScript needed.
   In @layer sol.components. Sizes follow the density of the area they sit in
   (--sol-control, --sol-pad), surfaces follow the layer (--sol-layer*). */
@layer sol.components {
	/* A component that is a layer sets the layer context for what is inside it. */
	.sol-card,
	.sol-table-wrap,
	.sol-shell-top,
	.sol-shell-nav {
		--sol-layer: var(--sol-layer-1);
		--sol-layer-hover: var(--sol-layer-1-hover);
		--sol-layer-active: var(--sol-layer-1-active);
	}
	.sol-dialog,
	.sol-menu-list,
	.sol-popover-panel,
	.sol-toast {
		--sol-layer: var(--sol-layer-2);
		--sol-layer-hover: var(--sol-layer-2-hover);
		--sol-layer-active: var(--sol-layer-2-active);
	}

	/* ===== Button ===== */
	.sol-button {
		--_h: var(--sol-control);
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--sol-space-3);
		height: var(--_h);
		padding: 0 calc(var(--_h) * 0.4);
		border: 1px solid var(--sol-border);
		border-radius: var(--sol-radius-md);
		background: var(--sol-layer-2);
		color: var(--sol-text);
		font: inherit;
		font-size: var(--_fs, inherit);
		font-weight: var(--sol-weight-medium);
		line-height: 1;
		white-space: nowrap;
		text-decoration: none;
		cursor: pointer;
		user-select: none;
		box-shadow: var(--sol-shadow-1);
		transition: background-color var(--sol-duration-fast) var(--sol-ease), border-color var(--sol-duration-fast) var(--sol-ease),
			color var(--sol-duration-fast) var(--sol-ease), transform var(--sol-duration-fast) var(--sol-ease);
	}
	.sol-button:hover { background: var(--sol-layer-2-hover); }
	.sol-button:active { background: var(--sol-layer-2-active); transform: translateY(0.5px); }
	.sol-button > :is(.sol-icon, sol-icon) { width: 1.125em; height: 1.125em; margin-inline: -0.125em; }
	[data-density='compact'] .sol-button { --_fs: var(--sol-text-md); }

	.sol-button.primary {
		background: var(--sol-accent);
		border-color: var(--sol-accent);
		color: var(--sol-on-accent);
	}
	.sol-button.primary:hover { background: var(--sol-accent-hover); border-color: var(--sol-accent-hover); }
	.sol-button.primary:active { background: var(--sol-accent-active); border-color: var(--sol-accent-active); }

	.sol-button.danger {
		background: var(--sol-danger-solid);
		border-color: var(--sol-danger-solid);
		color: var(--sol-danger-on-solid);
	}
	.sol-button.danger:hover { background: var(--sol-danger-solid-hover); border-color: var(--sol-danger-solid-hover); }

	.sol-button.ghost {
		background: transparent;
		border-color: transparent;
		box-shadow: none;
	}
	.sol-button.ghost:hover { background: var(--sol-layer-hover); }
	.sol-button.ghost:active { background: var(--sol-layer-active); }
	.sol-button.ghost.danger { color: var(--sol-danger-subtle-text); background: transparent; }
	.sol-button.ghost.danger:hover { background: var(--sol-danger-subtle); }

	.sol-button.link {
		height: auto;
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
		color: var(--sol-text-link);
		font-weight: var(--sol-weight-medium);
	}
	.sol-button.link:hover { text-decoration: underline; text-underline-offset: 0.18em; background: none; }

	.sol-button.primary,
	.sol-button.danger,
	.sol-button.ghost { box-shadow: none; }

	.sol-button.sm { --_h: var(--sol-control-sm); --_fs: var(--sol-text-sm); }
	.sol-button.md { --_h: var(--sol-control-md); --_fs: var(--sol-text-md); }
	.sol-button.lg { --_h: var(--sol-control-lg); --_fs: var(--sol-text-base); }
	.sol-button.icon { width: var(--_h); padding: 0; }
	.sol-button.block { width: 100%; }

	.sol-button:disabled,
	.sol-button[aria-disabled='true'] {
		opacity: 0.5;
		cursor: not-allowed;
		transform: none;
		pointer-events: none;
	}
	/* loading: keeps its width, shows a spinner instead of the label */
	.sol-button[data-loading] { color: transparent !important; pointer-events: none; }
	.sol-button[data-loading]::after {
		content: '';
		position: absolute;
		width: 1em;
		height: 1em;
		border-radius: 50%;
		border: 2px solid var(--_spin, var(--sol-text));
		border-right-color: transparent;
		animation: sol-spin 0.7s linear infinite;
	}
	.sol-button.primary[data-loading] { --_spin: var(--sol-on-accent); }
	.sol-button.danger[data-loading] { --_spin: var(--sol-danger-on-solid); }

	/* touch: the tap area reaches 44px even when the button looks smaller */
	@media (pointer: coarse) {
		.sol-button::before {
			content: '';
			position: absolute;
			inset: min(0px, calc((var(--_h) - var(--sol-control-touch)) / 2));
		}
	}

	.sol-button-group { display: inline-flex; }
	.sol-button-group > .sol-button:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
	.sol-button-group > .sol-button:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
	.sol-button-group > .sol-button:focus-visible { z-index: 1; }

	/* ===== Form fields ===== */
	.sol-field {
		display: flex;
		flex-direction: column;
		gap: var(--sol-space-2);
		min-width: 0;
	}
	.sol-label {
		font-size: var(--sol-text-md);
		line-height: var(--sol-leading-md);
		font-weight: var(--sol-weight-medium);
		color: var(--sol-text);
	}
	.sol-label .sol-optional { color: var(--sol-text-muted); font-weight: var(--sol-weight-regular); }
	.sol-hint { font-size: var(--sol-text-sm); line-height: var(--sol-leading-sm); color: var(--sol-text-muted); }
	.sol-error {
		display: flex;
		align-items: flex-start;
		gap: var(--sol-space-2);
		font-size: var(--sol-text-sm);
		line-height: var(--sol-leading-sm);
		color: var(--sol-danger-subtle-text);
		font-weight: var(--sol-weight-medium);
	}
	.sol-error :is(.sol-icon, sol-icon) { width: 1rem; height: 1rem; margin-top: 0.125rem; }

	.sol-input,
	.sol-select select,
	.sol-textarea {
		display: block;
		width: 100%;
		height: var(--sol-control);
		padding: 0 var(--sol-space-4);
		border: 1px solid var(--sol-border-control);
		border-radius: var(--sol-radius-md);
		background: var(--sol-field);
		color: var(--sol-text);
		font: inherit;
		font-size: var(--_fs, inherit);
		transition: border-color var(--sol-duration-fast) var(--sol-ease), box-shadow var(--sol-duration-fast) var(--sol-ease);
	}
	[data-density='compact'] :is(.sol-input, .sol-select select, .sol-textarea) { --_fs: var(--sol-text-md); }
	.sol-input::placeholder,
	.sol-textarea::placeholder { color: var(--sol-text-muted); opacity: 1; }
	.sol-input:hover,
	.sol-select select:hover,
	.sol-textarea:hover { border-color: var(--sol-text-muted); }
	.sol-input:focus,
	.sol-select select:focus,
	.sol-textarea:focus {
		outline: none;
		border-color: var(--sol-focus-ring);
		box-shadow: 0 0 0 1px var(--sol-focus-ring);
	}
	.sol-input[aria-invalid='true'],
	.sol-select select[aria-invalid='true'],
	.sol-textarea[aria-invalid='true'] {
		border-color: var(--sol-danger-subtle-text);
	}
	.sol-input[aria-invalid='true']:focus,
	.sol-textarea[aria-invalid='true']:focus { box-shadow: 0 0 0 1px var(--sol-danger-subtle-text); }
	.sol-input:disabled,
	.sol-select select:disabled,
	.sol-textarea:disabled {
		background: var(--sol-canvas);
		color: var(--sol-text-disabled);
		border-color: var(--sol-border);
		cursor: not-allowed;
	}
	.sol-input.mono { font-family: var(--sol-font-mono); letter-spacing: 0.02em; }
	/* a code or shared PIN of no fixed length: large, centred, spaced (a fixed length: sol-pin) */
	.sol-input.code {
		height: calc(var(--sol-control-lg) + var(--sol-space-3));
		font-family: var(--sol-font-mono);
		font-size: var(--sol-text-xl);
		letter-spacing: 0.3em;
		text-align: center;
	}
	.sol-input.code::placeholder { letter-spacing: 0.3em; }
	.sol-textarea { height: auto; min-height: calc(var(--sol-control) * 2.5); padding-block: var(--sol-space-3); line-height: var(--sol-body-leading); resize: vertical; }

	.sol-select { position: relative; display: block; }
	.sol-select select { appearance: none; padding-right: calc(var(--sol-space-4) + 1.25rem); cursor: pointer; }
	.sol-select::after {
		content: '';
		position: absolute;
		right: var(--sol-space-4);
		top: 50%;
		width: 1rem;
		height: 1rem;
		margin-top: -0.5rem;
		background: var(--sol-text-muted);
		mask: url('icons/chevron-down.svg') center / contain no-repeat;
		pointer-events: none;
	}

	/* an input with something inside its edge: a reveal button, a unit, an icon */
	.sol-input-group { position: relative; display: flex; align-items: center; }
	.sol-input-group .sol-input { flex: 1; }
	.sol-input-group > .sol-input:not(:last-child) { padding-right: calc(var(--sol-control) - 2px); }
	.sol-input-group > .sol-button,
	.sol-input-group > .sol-addon {
		position: absolute;
		right: 1px;
		height: calc(var(--sol-control) - 2px);
		width: calc(var(--sol-control) - 2px);
		padding: 0;
		border: 0;
		border-radius: 0 calc(var(--sol-radius-md) - 1px) calc(var(--sol-radius-md) - 1px) 0;
		background: transparent;
		box-shadow: none;
		color: var(--sol-text-muted);
	}
	.sol-input-group > .sol-button:hover { color: var(--sol-text); background: transparent; }
	.sol-input-group > .sol-addon { display: inline-flex; align-items: center; justify-content: center; pointer-events: none; }

	/* checkbox and radio */
	.sol-check {
		display: inline-flex;
		align-items: flex-start;
		gap: var(--sol-space-3);
		cursor: pointer;
		font-size: var(--_fs, inherit);
		line-height: var(--sol-body-leading);
	}
	[data-density='compact'] .sol-check { --_fs: var(--sol-text-md); }
	.sol-check input {
		appearance: none;
		flex: none;
		width: 1rem;
		height: 1rem;
		margin: calc((var(--sol-body-leading) - 1rem) / 2) 0 0;
		border: 1px solid var(--sol-border-control);
		border-radius: var(--sol-radius-sm);
		background: var(--sol-field);
		display: grid;
		place-content: center;
		cursor: pointer;
		transition: background-color var(--sol-duration-fast) var(--sol-ease), border-color var(--sol-duration-fast) var(--sol-ease);
	}
	.sol-check input[type='radio'] { border-radius: 50%; }
	.sol-check input:hover { border-color: var(--sol-text-muted); }
	.sol-check input:checked,
	.sol-check input:indeterminate { background: var(--sol-accent); border-color: var(--sol-accent); }
	.sol-check input[type='checkbox']:checked::before,
	.sol-check input[type='checkbox']:indeterminate::before {
		content: '';
		width: 0.75rem;
		height: 0.75rem;
		background: var(--sol-on-accent);
		mask: url('icons/check.svg') center / contain no-repeat;
	}
	.sol-check input[type='checkbox']:indeterminate::before { mask-image: url('icons/minus.svg'); }
	.sol-check input[type='radio']:checked::before {
		content: '';
		width: 0.375rem;
		height: 0.375rem;
		border-radius: 50%;
		background: var(--sol-on-accent);
	}
	.sol-check input:disabled { opacity: 0.5; cursor: not-allowed; }
	.sol-check:has(input:disabled) { color: var(--sol-text-disabled); cursor: not-allowed; }
	.sol-check .sol-hint { display: block; }

	/* switch: a checkbox with role="switch" */
	.sol-switch {
		display: inline-flex;
		align-items: center;
		gap: var(--sol-space-3);
		cursor: pointer;
		font-size: var(--_fs, inherit);
	}
	[data-density='compact'] .sol-switch { --_fs: var(--sol-text-md); }
	.sol-switch input {
		appearance: none;
		flex: none;
		position: relative;
		width: 2.25rem;
		height: 1.25rem;
		margin: 0;
		border-radius: var(--sol-radius-full);
		background: var(--sol-border-control);
		cursor: pointer;
		transition: background-color var(--sol-duration-base) var(--sol-ease);
	}
	.sol-switch input::before {
		content: '';
		position: absolute;
		top: 2px;
		left: 2px;
		width: calc(1.25rem - 4px);
		height: calc(1.25rem - 4px);
		border-radius: 50%;
		background: var(--sol-layer-2);
		box-shadow: var(--sol-shadow-1);
		transition: transform var(--sol-duration-base) var(--sol-ease);
	}
	.sol-switch input:checked { background: var(--sol-accent); }
	.sol-switch input:checked::before { transform: translateX(1rem); background: var(--sol-on-accent); }
	.sol-switch input:disabled { opacity: 0.5; cursor: not-allowed; }

	/* segmented control: radios that look like one control */
	.sol-segmented {
		display: inline-flex;
		padding: 2px;
		gap: 2px;
		border-radius: var(--sol-radius-md);
		background: var(--sol-sunken);
		border: 1px solid var(--sol-border);
	}
	.sol-segmented label { position: relative; display: inline-flex; }
	.sol-segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
	.sol-segmented span {
		display: inline-flex;
		align-items: center;
		gap: var(--sol-space-2);
		height: calc(var(--sol-control) - 6px);
		padding: 0 var(--sol-space-4);
		border-radius: calc(var(--sol-radius-md) - 2px);
		color: var(--sol-text-muted);
		font-size: var(--sol-text-md);
		font-weight: var(--sol-weight-medium);
		transition: background-color var(--sol-duration-fast) var(--sol-ease), color var(--sol-duration-fast) var(--sol-ease);
	}
	.sol-segmented label:hover span { color: var(--sol-text); }
	.sol-segmented input:checked + span { background: var(--sol-layer-2); color: var(--sol-text); box-shadow: var(--sol-shadow-1); }
	.sol-segmented input:focus-visible + span { outline: 2px solid var(--sol-focus-ring); outline-offset: 1px; }
	.sol-segmented :is(.sol-icon, sol-icon) { width: 1rem; height: 1rem; }
	.sol-segmented.sm span { height: calc(var(--sol-control-sm) - 6px); padding: 0 var(--sol-space-3); font-size: var(--sol-text-sm); }
	.sol-segmented.block { display: flex; }
	.sol-segmented.block > label { flex: 1; }
	.sol-segmented.block span { flex: 1; justify-content: center; }

	.sol-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sol-space-3); min-width: 0; }
	.sol-fieldset > legend { padding: 0; margin-bottom: var(--sol-space-2); font-size: var(--sol-text-md); font-weight: var(--sol-weight-medium); }

	/* ===== Card ===== */
	.sol-card {
		display: flex;
		flex-direction: column;
		gap: var(--sol-gap);
		padding: var(--sol-pad);
		background: var(--sol-layer-1);
		border: 1px solid var(--sol-border);
		border-radius: var(--sol-radius-lg);
		min-width: 0;
	}
	.sol-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sol-space-5); }
	.sol-card-header > :first-child { display: flex; flex-direction: column; gap: var(--sol-space-1); min-width: 0; }
	.sol-card-title { font-size: var(--sol-text-lg); line-height: var(--sol-leading-lg); font-weight: var(--sol-weight-semibold); }
	[data-density='compact'] .sol-card-title { font-size: var(--sol-text-base); line-height: var(--sol-leading-base); }
	.sol-card-description { color: var(--sol-text-muted); font-size: var(--sol-text-md); line-height: var(--sol-leading-md); }
	.sol-card-footer {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: var(--sol-space-3);
		margin: 0 calc(-1 * var(--sol-pad)) calc(-1 * var(--sol-pad));
		padding: var(--sol-space-5) var(--sol-pad);
		border-top: 1px solid var(--sol-divider);
		background: var(--sol-canvas);
		border-radius: 0 0 calc(var(--sol-radius-lg) - 1px) calc(var(--sol-radius-lg) - 1px);
	}
	.sol-card.flush { padding: 0; gap: 0; overflow: hidden; }
	a.sol-card,
	.sol-card.interactive {
		color: inherit;
		text-decoration: none;
		box-shadow: var(--sol-shadow-1);
		transition: border-color var(--sol-duration-fast) var(--sol-ease), box-shadow var(--sol-duration-fast) var(--sol-ease);
	}
	a.sol-card:hover,
	.sol-card.interactive:hover { border-color: var(--sol-border-hover); box-shadow: var(--sol-shadow-2); }
	.sol-card.danger-zone { border-color: var(--sol-danger-border); }

	/* ===== List ===== */
	.sol-list { list-style: none; margin: 0; padding: 0; }
	.sol-list > li {
		display: flex;
		align-items: center;
		gap: var(--sol-space-4);
		padding: var(--sol-space-4) 0;
		border-top: 1px solid var(--sol-divider);
		min-width: 0;
	}
	.sol-list > li:first-child { border-top: 0; }
	.sol-list.inset > li { padding-inline: var(--sol-pad); }
	.sol-list.interactive > li { cursor: pointer; transition: background-color var(--sol-duration-fast) var(--sol-ease); }
	.sol-list.interactive > li:hover { background: var(--sol-layer-hover); }
	.sol-list-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
	.sol-list-title { font-weight: var(--sol-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.sol-list-meta { color: var(--sol-text-muted); font-size: var(--sol-text-sm); line-height: var(--sol-leading-sm); }
	.sol-list > li > :is(.sol-icon, sol-icon) { color: var(--sol-text-muted); }

	/* ===== Description list ===== */
	.sol-dl { display: grid; grid-template-columns: fit-content(45%) minmax(0, 1fr); gap: var(--sol-space-3) var(--sol-space-5); margin: 0; }
	.sol-dl dt { color: var(--sol-text-muted); }
	.sol-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
	@media (max-width: 560px) {
		.sol-dl { grid-template-columns: 1fr; gap: var(--sol-space-1); }
		.sol-dl dd { margin-bottom: var(--sol-space-3); }
	}

	/* ===== Table ===== */
	.sol-table-wrap {
		overflow: auto;
		border: 1px solid var(--sol-border);
		border-radius: var(--sol-radius-lg);
		background: var(--sol-layer-1);
	}
	.sol-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--_fs, inherit); }
	[data-density='compact'] .sol-table { --_fs: var(--sol-text-md); }
	.sol-table th,
	.sol-table td {
		padding: var(--sol-space-4) var(--sol-space-5);
		text-align: left;
		vertical-align: middle;
		border-bottom: 1px solid var(--sol-divider);
	}
	[data-density='compact'] .sol-table :is(th, td) { padding-block: var(--sol-space-3); }
	.sol-table thead th {
		position: sticky;
		top: 0;
		z-index: 1;
		background: var(--sol-sunken);
		color: var(--sol-text-muted);
		font-size: var(--sol-text-sm);
		font-weight: var(--sol-weight-medium);
		white-space: nowrap;
	}
	.sol-table tbody tr:last-child > * { border-bottom: 0; }
	.sol-table tbody tr { transition: background-color var(--sol-duration-fast) var(--sol-ease); }
	.sol-table tbody tr:hover { background: var(--sol-layer-hover); }
	.sol-table tbody tr[aria-selected='true'] { background: var(--sol-selected); }
	.sol-table .num { text-align: right; font-variant-numeric: tabular-nums; }
	.sol-table .shrink { width: 1%; white-space: nowrap; }
	.sol-table th[aria-sort] { cursor: pointer; }
	.sol-table th[aria-sort]::after {
		content: '';
		display: inline-block;
		width: 0.75rem;
		height: 0.75rem;
		margin-left: var(--sol-space-2);
		vertical-align: -0.1em;
		background: currentColor;
		mask: url('icons/chevron-down.svg') center / contain no-repeat;
		opacity: 0;
	}
	.sol-table th[aria-sort='descending']::after { opacity: 1; }
	.sol-table th[aria-sort='ascending']::after { opacity: 1; transform: rotate(180deg); }
	.sol-table th[aria-sort]:hover::after { opacity: 0.6; }

	/* ===== Badge and tag ===== */
	.sol-badge {
		display: inline-flex;
		align-items: center;
		gap: var(--sol-space-2);
		height: 1.375rem;
		padding: 0 var(--sol-space-3);
		border-radius: var(--sol-radius-full);
		border: 1px solid var(--sol-border);
		background: var(--sol-layer);
		color: var(--sol-text-muted);
		font-size: var(--sol-text-xs);
		line-height: 1;
		font-weight: var(--sol-weight-medium);
		white-space: nowrap;
		vertical-align: middle;
	}
	.sol-badge :is(.sol-icon, sol-icon) { width: 0.75rem; height: 0.75rem; }
	.sol-badge.accent { background: var(--sol-accent-subtle); color: var(--sol-accent-subtle-text); border-color: transparent; }
	.sol-badge.success { background: var(--sol-success-subtle); color: var(--sol-success-subtle-text); border-color: transparent; }
	.sol-badge.warning { background: var(--sol-warning-subtle); color: var(--sol-warning-subtle-text); border-color: transparent; }
	.sol-badge.danger { background: var(--sol-danger-subtle); color: var(--sol-danger-subtle-text); border-color: transparent; }
	.sol-badge.solid.accent { background: var(--sol-accent); color: var(--sol-on-accent); }
	.sol-badge.solid.success { background: var(--sol-success-solid); color: var(--sol-success-on-solid); }
	.sol-badge.solid.warning { background: var(--sol-warning-solid); color: var(--sol-warning-on-solid); }
	.sol-badge.solid.danger { background: var(--sol-danger-solid); color: var(--sol-danger-on-solid); }
	.sol-badge.dot::before { content: ''; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; }

	.sol-tag {
		display: inline-flex;
		align-items: center;
		gap: var(--sol-space-2);
		height: 1.5rem;
		padding: 0 var(--sol-space-3);
		border-radius: var(--sol-radius-sm);
		background: var(--sol-sunken);
		border: 1px solid var(--sol-divider);
		color: var(--sol-text);
		font-size: var(--sol-text-sm);
		white-space: nowrap;
	}
	.sol-tag button {
		display: inline-grid;
		place-items: center;
		width: 1rem;
		height: 1rem;
		margin-right: -0.25rem;
		padding: 0;
		border: 0;
		border-radius: var(--sol-radius-sm);
		background: transparent;
		color: var(--sol-text-muted);
		cursor: pointer;
	}
	.sol-tag button:hover { background: var(--sol-layer-hover); color: var(--sol-text); }
	.sol-tag button :is(.sol-icon, sol-icon) { width: 0.75rem; height: 0.75rem; }

	/* ===== Alert and banner ===== */
	.sol-alert {
		--_tone-bg: var(--sol-accent-subtle);
		--_tone-text: var(--sol-accent-subtle-text);
		--_tone-border: var(--sol-accent-border);
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: start;
		gap: var(--sol-space-2) var(--sol-space-4);
		padding: var(--sol-space-5);
		border: 1px solid var(--_tone-border);
		border-radius: var(--sol-radius-md);
		background: var(--_tone-bg);
		color: var(--sol-text);
		font-size: var(--sol-text-md);
		line-height: var(--sol-leading-md);
	}
	.sol-alert > :is(.sol-icon, sol-icon) { width: 1.25rem; height: 1.25rem; color: var(--_tone-text); margin-top: 0; }
	.sol-alert-body { display: flex; flex-direction: column; gap: var(--sol-space-1); min-width: 0; }
	.sol-alert-title { font-weight: var(--sol-weight-semibold); color: var(--_tone-text); }
	.sol-alert-actions { display: flex; flex-wrap: wrap; gap: var(--sol-space-3); margin-top: var(--sol-space-3); }
	.sol-alert > .sol-button.icon { margin: calc(-1 * var(--sol-space-2)) calc(-1 * var(--sol-space-2)) 0 0; }
	.sol-alert.success { --_tone-bg: var(--sol-success-subtle); --_tone-text: var(--sol-success-subtle-text); --_tone-border: var(--sol-success-border); }
	.sol-alert.warning { --_tone-bg: var(--sol-warning-subtle); --_tone-text: var(--sol-warning-subtle-text); --_tone-border: var(--sol-warning-border); }
	.sol-alert.danger { --_tone-bg: var(--sol-danger-subtle); --_tone-text: var(--sol-danger-subtle-text); --_tone-border: var(--sol-danger-border); }
	.sol-alert.neutral { --_tone-bg: var(--sol-layer); --_tone-text: var(--sol-text); --_tone-border: var(--sol-border); }
	.sol-alert.banner { border-radius: 0; border-width: 0 0 1px; padding-inline: var(--sol-space-6); }

	/* ===== Avatar ===== */
	.sol-avatar {
		--_s: 2rem;
		display: inline-grid;
		place-items: center;
		flex: none;
		width: var(--_s);
		height: var(--_s);
		border-radius: 50%;
		background: var(--sol-accent-subtle);
		color: var(--sol-accent-subtle-text);
		font-size: calc(var(--_s) * 0.4);
		font-weight: var(--sol-weight-semibold);
		letter-spacing: 0;
		overflow: hidden;
		user-select: none;
	}
	.sol-avatar img { width: 100%; height: 100%; object-fit: cover; }
	.sol-avatar.sm { --_s: 1.5rem; }
	.sol-avatar.lg { --_s: 2.75rem; }
	.sol-avatar.square { border-radius: var(--sol-radius-md); }

	/* ===== Divider ===== */
	.sol-divider {
		display: flex;
		align-items: center;
		gap: var(--sol-space-4);
		color: var(--sol-text-muted);
		font-size: var(--sol-text-sm);
	}
	.sol-divider::before,
	.sol-divider::after { content: ''; flex: 1; border-top: 1px solid var(--sol-divider); }
	.sol-divider:empty { gap: 0; }

	/* ===== Feedback: spinner, skeleton, progress ===== */
	.sol-spinner {
		display: inline-block;
		width: 1.25rem;
		height: 1.25rem;
		border-radius: 50%;
		border: 2px solid var(--sol-divider);
		border-top-color: var(--sol-accent);
		animation: sol-spin 0.7s linear infinite;
		vertical-align: middle;
	}
	.sol-spinner.sm { width: 1rem; height: 1rem; }
	.sol-spinner.lg { width: 2rem; height: 2rem; border-width: 3px; }
	@keyframes sol-spin { to { transform: rotate(360deg); } }

	.sol-skeleton {
		display: block;
		height: 0.875rem;
		border-radius: var(--sol-radius-sm);
		background: linear-gradient(90deg, var(--sol-layer-hover) 25%, var(--sol-layer-active) 50%, var(--sol-layer-hover) 75%);
		background-size: 200% 100%;
		animation: sol-shimmer 1.4s var(--sol-ease) infinite;
	}
	.sol-skeleton.title { height: 1.25rem; width: 40%; }
	.sol-skeleton.short { width: 60%; }
	.sol-skeleton.circle { width: 2rem; height: 2rem; border-radius: 50%; }
	@keyframes sol-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

	.sol-progress {
		appearance: none;
		display: block;
		width: 100%;
		height: 0.375rem;
		border: 0;
		border-radius: var(--sol-radius-full);
		background: var(--sol-layer-active);
		overflow: hidden;
		color: var(--sol-accent);
	}
	.sol-progress::-webkit-progress-bar { background: var(--sol-layer-active); }
	.sol-progress::-webkit-progress-value { background: var(--sol-accent); border-radius: var(--sol-radius-full); transition: width var(--sol-duration-slow) var(--sol-ease); }
	.sol-progress::-moz-progress-bar { background: var(--sol-accent); border-radius: var(--sol-radius-full); }

	/* ===== Empty state ===== */
	.sol-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var(--sol-space-3);
		padding: var(--sol-space-10) var(--sol-space-6);
	}
	.sol-empty > :is(.sol-icon, sol-icon) {
		width: 2.5rem;
		height: 2.5rem;
		padding: var(--sol-space-3);
		margin-bottom: var(--sol-space-2);
		border-radius: var(--sol-radius-lg);
		background: var(--sol-layer-hover);
		color: var(--sol-text-muted);
		box-sizing: content-box;
	}
	.sol-empty-title { font-weight: var(--sol-weight-semibold); font-size: var(--sol-text-base); }
	.sol-empty p { color: var(--sol-text-muted); max-width: 26rem; font-size: var(--sol-text-md); }
	.sol-empty .sol-cluster { margin-top: var(--sol-space-3); justify-content: center; }

	/* ===== Page header and breadcrumbs ===== */
	.sol-page-header {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--sol-space-5);
		padding-bottom: var(--sol-space-6);
		margin-bottom: var(--sol-space-6);
		border-bottom: 1px solid var(--sol-divider);
	}
	.sol-page-header > :first-child { display: flex; flex-direction: column; gap: var(--sol-space-2); min-width: 0; }
	.sol-page-header p { color: var(--sol-text-muted); max-width: var(--sol-width-read); }
	.sol-page-header .sol-cluster { flex: none; }

	.sol-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sol-space-2); list-style: none; margin: 0; padding: 0; font-size: var(--sol-text-sm); }
	.sol-breadcrumbs li { display: inline-flex; align-items: center; gap: var(--sol-space-2); color: var(--sol-text-muted); }
	.sol-breadcrumbs li + li::before {
		content: '';
		width: 0.875rem;
		height: 0.875rem;
		background: var(--sol-text-muted);
		mask: url('icons/chevron-right.svg') center / contain no-repeat;
		opacity: 0.7;
	}
	.sol-breadcrumbs a { color: var(--sol-text-muted); text-decoration: none; }
	.sol-breadcrumbs a:hover { color: var(--sol-text); text-decoration: underline; }
	.sol-breadcrumbs [aria-current='page'] { color: var(--sol-text); font-weight: var(--sol-weight-medium); }

	/* ===== Icon ===== */
	:is(.sol-icon, sol-icon) { display: inline-block; width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; }
	sol-icon { display: inline-flex; vertical-align: -0.25em; line-height: 1; }
	sol-icon > svg { width: 100%; height: 100%; }

	/* ===== App shell: top bar, side nav, main ===== */
	.sol-shell {
		display: grid;
		grid-template-columns: var(--sol-sidenav-width) minmax(0, 1fr);
		grid-template-rows: var(--sol-topbar-height) minmax(0, 1fr);
		grid-template-areas: 'top top' 'nav main';
		min-height: 100vh;
	}
	.sol-shell-top {
		grid-area: top;
		position: sticky;
		top: 0;
		z-index: 20;
		display: flex;
		align-items: center;
		gap: var(--sol-space-5);
		padding: 0 var(--sol-space-6);
		background: var(--sol-layer-1);
		border-bottom: 1px solid var(--sol-border);
	}
	.sol-shell-brand { display: inline-flex; align-items: center; gap: var(--sol-space-3); font-weight: var(--sol-weight-semibold); color: var(--sol-text); text-decoration: none; }
	.sol-shell-top .sol-spacer { flex: 1; }
	.sol-shell-nav {
		grid-area: nav;
		position: sticky;
		top: var(--sol-topbar-height);
		align-self: start;
		height: calc(100vh - var(--sol-topbar-height));
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		gap: var(--sol-space-1);
		padding: var(--sol-space-5) var(--sol-space-4);
		background: var(--sol-layer-1);
		border-right: 1px solid var(--sol-border);
	}
	.sol-shell-main { grid-area: main; padding: var(--sol-space-8) var(--sol-space-8) var(--sol-space-11); min-width: 0; }
	.sol-shell-main > .sol-shell-content { max-width: var(--sol-width-app); margin-inline: auto; }
	.sol-shell-main > .sol-shell-content[data-width='read'] { max-width: var(--sol-width-read); }
	.sol-shell-toggle { display: none; }
	/* a shell with only the top bar: a tool with one page, or reading pages */
	.sol-shell.no-nav { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'top' 'main'; }
	.sol-shell-nav-end { margin-top: auto; padding-top: var(--sol-space-5); display: flex; flex-direction: column; gap: var(--sol-space-1); }

	.sol-nav-section {
		padding: var(--sol-space-5) var(--sol-space-4) var(--sol-space-2);
		font-size: var(--sol-text-xs);
		font-weight: var(--sol-weight-semibold);
		color: var(--sol-text-muted);
	}
	.sol-nav-item {
		display: flex;
		align-items: center;
		gap: var(--sol-space-4);
		height: var(--sol-control-md);
		padding: 0 var(--sol-space-4);
		border-radius: var(--sol-radius-md);
		color: var(--sol-text-muted);
		font-size: var(--sol-text-md);
		font-weight: var(--sol-weight-medium);
		text-decoration: none;
		transition: background-color var(--sol-duration-fast) var(--sol-ease), color var(--sol-duration-fast) var(--sol-ease);
	}
	.sol-nav-item:hover { background: var(--sol-layer-hover); color: var(--sol-text); }
	.sol-nav-item[aria-current='page'] { background: var(--sol-selected); color: var(--sol-accent-subtle-text); }
	.sol-nav-item :is(.sol-icon, sol-icon) { width: 1.125rem; height: 1.125rem; }
	.sol-nav-item .sol-badge { margin-left: auto; }

	@media (max-width: 960px) {
		.sol-shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'top' 'main'; }
		.sol-shell-toggle { display: inline-flex; }
		.sol-shell-nav {
			position: fixed;
			top: var(--sol-topbar-height);
			left: 0;
			bottom: 0;
			height: auto;
			align-self: stretch;
			width: min(var(--sol-sidenav-width), 85vw);
			z-index: 30;
			box-shadow: var(--sol-shadow-3);
			transform: translateX(-105%);
			transition: transform var(--sol-duration-slow) var(--sol-ease);
		}
		.sol-shell[data-nav-open] .sol-shell-nav { transform: none; }
		.sol-shell-main { padding: var(--sol-space-6) var(--sol-space-5) var(--sol-space-10); }
	}

	/* ===== Dialog (native <dialog>; sol-ui.js adds openers and light dismiss) ===== */
	.sol-dialog {
		width: min(32rem, calc(100vw - 2 * var(--sol-space-5)));
		max-height: calc(100vh - 2 * var(--sol-space-8));
		padding: 0;
		border: 1px solid var(--sol-border);
		border-radius: var(--sol-radius-lg);
		background: var(--sol-layer-2);
		color: var(--sol-text);
		box-shadow: var(--sol-shadow-3);
		overflow: hidden;
	}
	.sol-dialog.wide { width: min(44rem, calc(100vw - 2 * var(--sol-space-5))); }
	/* a form around header, body and footer: the body still scrolls between them */
	.sol-dialog > form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
	.sol-dialog-header > div { display: flex; flex-direction: column; gap: var(--sol-space-1); min-width: 0; flex: 1; }
	.sol-dialog-header p { color: var(--sol-text-muted); font-size: var(--sol-text-md); line-height: var(--sol-leading-md); }
	.sol-dialog[open] { display: flex; flex-direction: column; animation: sol-dialog-in var(--sol-duration-slow) var(--sol-ease); }
	.sol-dialog::backdrop { background: var(--sol-overlay); animation: sol-fade-in var(--sol-duration-slow) var(--sol-ease); }
	.sol-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sol-space-5); padding: var(--sol-space-6) var(--sol-space-6) 0; }
	.sol-dialog-header h2 { font-size: var(--sol-text-lg); line-height: var(--sol-leading-lg); font-weight: var(--sol-weight-semibold); letter-spacing: 0; }
	.sol-dialog-header .sol-button.icon { margin: calc(-1 * var(--sol-space-2)) calc(-1 * var(--sol-space-3)) 0 0; }
	.sol-dialog-body { display: flex; flex-direction: column; gap: var(--sol-space-5); padding: var(--sol-space-5) var(--sol-space-6) var(--sol-space-6); overflow-y: auto; color: var(--sol-text); }
	.sol-dialog-body > p { color: var(--sol-text-muted); }
	.sol-dialog-footer {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: var(--sol-space-3);
		padding: var(--sol-space-5) var(--sol-space-6);
		border-top: 1px solid var(--sol-divider);
		background: var(--sol-canvas);
	}
	@keyframes sol-dialog-in { from { opacity: 0; transform: translateY(6px) scale(0.985); } }
	@keyframes sol-fade-in { from { opacity: 0; } }
	@media (max-width: 560px) {
		.sol-dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--sol-radius-lg) var(--sol-radius-lg) 0 0; max-height: 90vh; }
	}

	/* ===== Floating panels: menu, popover, tooltip (sol-ui.js places them) ===== */
	/* browsers still read align="end" as the old presentational attribute and
	   right-align the text inside; here it only says where the panel goes */
	:is(sol-menu, sol-popover)[align] { text-align: inherit; }
	.sol-menu-list,
	.sol-popover-panel {
		position: fixed;
		inset: auto;
		margin: 0;
		min-width: 12rem;
		max-width: min(22rem, calc(100vw - 16px));
		max-height: min(24rem, calc(100vh - 16px));
		overflow-y: auto;
		padding: var(--sol-space-2);
		border: 1px solid var(--sol-border);
		border-radius: var(--sol-radius-md);
		background: var(--sol-layer-2);
		color: var(--sol-text);
		box-shadow: var(--sol-shadow-2);
		font-size: var(--sol-text-md);
		line-height: var(--sol-leading-md);
	}
	.sol-popover-panel { padding: var(--sol-space-5); min-width: 16rem; }
	.sol-menu-list:popover-open,
	.sol-popover-panel:popover-open { animation: sol-pop-in var(--sol-duration-base) var(--sol-ease); }
	@keyframes sol-pop-in { from { opacity: 0; transform: translateY(-4px); } }
	.sol-menu-item {
		display: flex;
		align-items: center;
		gap: var(--sol-space-3);
		width: 100%;
		min-height: var(--sol-control-md);
		padding: var(--sol-space-2) var(--sol-space-4);
		border: 0;
		border-radius: calc(var(--sol-radius-md) - 2px);
		background: none;
		color: var(--sol-text);
		font: inherit;
		text-align: left;
		text-decoration: none;
		cursor: pointer;
	}
	.sol-menu-item:hover,
	.sol-menu-item:focus { background: var(--sol-layer-hover); outline: none; }
	.sol-menu-item:focus-visible { outline: 2px solid var(--sol-focus-ring); outline-offset: -2px; }
	.sol-menu-item :is(.sol-icon, sol-icon) { width: 1rem; height: 1rem; color: var(--sol-text-muted); }
	.sol-menu-item kbd { margin-left: auto; font-size: var(--sol-text-xs); color: var(--sol-text-muted); }
	.sol-menu-item.danger { color: var(--sol-danger-subtle-text); }
	.sol-menu-item.danger :is(.sol-icon, sol-icon) { color: inherit; }
	.sol-menu-item[aria-disabled='true'] { color: var(--sol-text-disabled); cursor: not-allowed; }
	.sol-menu-separator { height: 1px; margin: var(--sol-space-2) calc(-1 * var(--sol-space-2)); background: var(--sol-divider); border: 0; }
	.sol-menu-label { padding: var(--sol-space-3) var(--sol-space-4) var(--sol-space-1); font-size: var(--sol-text-xs); font-weight: var(--sol-weight-semibold); color: var(--sol-text-muted); }

	.sol-tooltip {
		position: fixed;
		inset: auto;
		margin: 0;
		max-width: 18rem;
		padding: var(--sol-space-2) var(--sol-space-3);
		border: 0;
		border-radius: var(--sol-radius-sm);
		background: var(--sol-text);
		color: var(--sol-canvas);
		font-size: var(--sol-text-xs);
		line-height: var(--sol-leading-xs);
		font-weight: var(--sol-weight-medium);
		pointer-events: none;
		box-shadow: var(--sol-shadow-2);
	}
	.sol-tooltip:popover-open { animation: sol-fade-in var(--sol-duration-fast) var(--sol-ease); }

	/* ===== Tabs (sol-tabs wires keys and panels) ===== */
	.sol-tablist {
		display: flex;
		gap: var(--sol-space-2);
		border-bottom: 1px solid var(--sol-divider);
		overflow-x: auto;
		scrollbar-width: none;
	}
	.sol-tab {
		position: relative;
		display: inline-flex;
		align-items: center;
		gap: var(--sol-space-2);
		height: var(--sol-control);
		padding: 0 var(--sol-space-4);
		border: 0;
		background: none;
		color: var(--sol-text-muted);
		font: inherit;
		font-size: var(--sol-text-md);
		font-weight: var(--sol-weight-medium);
		white-space: nowrap;
		cursor: pointer;
		border-radius: var(--sol-radius-md) var(--sol-radius-md) 0 0;
	}
	a.sol-tab { text-decoration: none; }
	.sol-tab:hover { color: var(--sol-text); }
	/* links in a <nav class="sol-tablist"> are tabs that are pages: aria-current marks the one you're on */
	.sol-tab:is([aria-selected='true'], [aria-current='page']) { color: var(--sol-text); }
	.sol-tab:is([aria-selected='true'], [aria-current='page'])::after {
		content: '';
		position: absolute;
		left: var(--sol-space-3);
		right: var(--sol-space-3);
		bottom: -1px;
		height: 2px;
		border-radius: 2px 2px 0 0;
		background: var(--sol-accent);
	}
	.sol-tab .sol-badge { height: 1.125rem; padding: 0 var(--sol-space-2); }
	.sol-tabpanel { padding-top: var(--sol-space-6); }
	.sol-tabpanel:focus-visible { outline-offset: 4px; }

	/* ===== Toast (sol-toaster) ===== */
	sol-toaster {
		position: fixed;
		right: var(--sol-space-6);
		bottom: var(--sol-space-6);
		z-index: 1000;
		display: flex;
		flex-direction: column-reverse;
		gap: var(--sol-space-3);
		width: min(24rem, calc(100vw - 2 * var(--sol-space-5)));
		pointer-events: none;
	}
	@media (max-width: 560px) { sol-toaster { right: var(--sol-space-5); left: var(--sol-space-5); bottom: var(--sol-space-5); width: auto; } }
	.sol-toast {
		display: grid;
		grid-template-columns: auto 1fr auto;
		gap: var(--sol-space-1) var(--sol-space-4);
		align-items: start;
		padding: var(--sol-space-5);
		border: 1px solid var(--sol-border);
		border-radius: var(--sol-radius-md);
		background: var(--sol-layer-2);
		color: var(--sol-text);
		box-shadow: var(--sol-shadow-3);
		font-size: var(--sol-text-md);
		line-height: var(--sol-leading-md);
		pointer-events: auto;
		animation: sol-toast-in var(--sol-duration-slow) var(--sol-ease);
	}
	.sol-toast[data-leaving] { animation: sol-toast-out var(--sol-duration-base) var(--sol-ease-in) forwards; }
	.sol-toast > :is(.sol-icon, sol-icon) { width: 1.25rem; height: 1.25rem; color: var(--sol-text-muted); }
	.sol-toast.success > :is(.sol-icon, sol-icon) { color: var(--sol-success-subtle-text); }
	.sol-toast.warning > :is(.sol-icon, sol-icon) { color: var(--sol-warning-subtle-text); }
	.sol-toast.danger > :is(.sol-icon, sol-icon) { color: var(--sol-danger-subtle-text); }
	.sol-toast-title { font-weight: var(--sol-weight-semibold); }
	.sol-toast-body { color: var(--sol-text-muted); }
	.sol-toast .sol-button.icon { margin: calc(-1 * var(--sol-space-2)) calc(-1 * var(--sol-space-2)) 0 0; }
	@keyframes sol-toast-in { from { opacity: 0; transform: translateY(8px); } }
	@keyframes sol-toast-out { to { opacity: 0; transform: translateY(4px); } }

	/* ===== PIN / one-time code (sol-pin) ===== */
	sol-pin { display: inline-block; position: relative; }
	sol-pin input {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		color: transparent;
		caret-color: transparent;
		font-size: 1px;
		letter-spacing: 0;
		outline: none;
		opacity: 0.001;
		cursor: text;
	}
	.sol-pin-boxes { display: flex; gap: var(--sol-space-3); pointer-events: none; }
	.sol-pin-box {
		display: grid;
		place-items: center;
		width: calc(var(--sol-control-lg) + 4px);
		height: calc(var(--sol-control-lg) + 12px);
		border: 1px solid var(--sol-border-control);
		border-radius: var(--sol-radius-md);
		background: var(--sol-field);
		color: var(--sol-text);
		font-family: var(--sol-font-mono);
		font-size: var(--sol-text-xl);
		font-weight: var(--sol-weight-medium);
		transition: border-color var(--sol-duration-fast) var(--sol-ease), box-shadow var(--sol-duration-fast) var(--sol-ease);
	}
	.sol-pin-box[data-gap] { margin-left: var(--sol-space-4); }
	sol-pin:focus-within .sol-pin-box[data-current] { border-color: var(--sol-focus-ring); box-shadow: 0 0 0 1px var(--sol-focus-ring); }
	sol-pin:focus-within .sol-pin-box[data-current]:empty::after {
		content: '';
		width: 1.5px;
		height: 1.25em;
		background: var(--sol-text);
		animation: sol-blink 1s steps(1) infinite;
	}
	sol-pin[aria-invalid='true'] .sol-pin-box { border-color: var(--sol-danger-subtle-text); }
	sol-pin[disabled] .sol-pin-box { background: var(--sol-canvas); color: var(--sol-text-disabled); border-color: var(--sol-border); }
	@keyframes sol-blink { 50% { opacity: 0; } }

	/* ===== Copy (sol-copy) ===== */
	sol-copy { display: inline-flex; }
	.sol-secret {
		display: flex;
		align-items: center;
		gap: var(--sol-space-3);
		padding: var(--sol-space-3) var(--sol-space-3) var(--sol-space-3) var(--sol-space-4);
		border: 1px solid var(--sol-border-control);
		border-radius: var(--sol-radius-md);
		background: var(--sol-sunken);
		font-family: var(--sol-font-mono);
		font-size: var(--sol-text-md);
		overflow-wrap: anywhere;
	}
	.sol-secret > code { flex: 1; padding: 0; border: 0; background: none; font-size: inherit; user-select: all; }

	/* ===== Identification tones (0.7.0) =====
	   data-tone="blue|teal|green|purple|pink|amber" on an avatar or a tile:
	   a quiet fill and its measured text. To tell things apart, never to act. */
	[data-tone='blue'] { --_tone: var(--sol-tone-blue); --_tone-fg: var(--sol-tone-blue-text); }
	[data-tone='teal'] { --_tone: var(--sol-tone-teal); --_tone-fg: var(--sol-tone-teal-text); }
	[data-tone='green'] { --_tone: var(--sol-tone-green); --_tone-fg: var(--sol-tone-green-text); }
	[data-tone='purple'] { --_tone: var(--sol-tone-purple); --_tone-fg: var(--sol-tone-purple-text); }
	[data-tone='pink'] { --_tone: var(--sol-tone-pink); --_tone-fg: var(--sol-tone-pink-text); }
	[data-tone='amber'] { --_tone: var(--sol-tone-amber); --_tone-fg: var(--sol-tone-amber-text); }
	.sol-avatar[data-tone] { background: var(--_tone); color: var(--_tone-fg); }
	.sol-avatar.xl { --_s: 4.5rem; }
	.sol-avatar.xxl { --_s: 6rem; }
	/* a tile: what a section or a thing is about. People are round (avatars);
	   things are tiles, cut like a quadrant of the Sol mark: small corners and
	   one large one, top right */
	.sol-tile {
		--_s: 2rem;
		display: inline-grid;
		place-items: center;
		flex: none;
		width: var(--_s);
		height: var(--_s);
		border-radius: calc(var(--_s) * 0.14) calc(var(--_s) * 0.5) calc(var(--_s) * 0.14) calc(var(--_s) * 0.14);
		background: var(--_tone, var(--sol-sunken));
		color: var(--_tone-fg, var(--sol-text-muted));
	}
	.sol-tile > :is(.sol-icon, sol-icon) { width: calc(var(--_s) * 0.52); height: calc(var(--_s) * 0.52); }
	.sol-tile.sm { --_s: 1.5rem; }
	.sol-tile.lg { --_s: 2.75rem; }
	.sol-tile > b { font-size: calc(var(--_s) * 0.42); font-weight: var(--sol-weight-semibold); }
	.sol-tile > sol-sigil { --_s: calc(var(--_s) * 0.6); }

	/* ===== Quick links: small labelled shortcuts, in a row that wraps ===== */
	.sol-quick { display: flex; flex-wrap: wrap; gap: var(--sol-space-3); }
	.sol-quick > a, .sol-quick > button {
		display: inline-flex;
		align-items: center;
		gap: var(--sol-space-3);
		min-height: var(--sol-control-md);
		padding: 0 var(--sol-space-4) 0 var(--sol-space-2);
		border: 1px solid var(--sol-border);
		border-radius: var(--sol-radius-md);
		background: var(--sol-layer);
		color: var(--sol-text);
		font: inherit;
		font-size: var(--sol-text-sm);
		font-weight: var(--sol-weight-medium);
		text-decoration: none;
		white-space: nowrap;
		cursor: pointer;
		transition: background var(--sol-duration-fast) var(--sol-ease), border-color var(--sol-duration-fast) var(--sol-ease);
	}
	.sol-quick > :is(a, button):hover { background: var(--sol-layer-hover); border-color: var(--sol-border-hover); }
	.sol-quick > :is(a, button):focus-visible { outline: 2px solid var(--sol-focus-ring); outline-offset: 2px; }
	.sol-quick .sol-tile { --_s: 1.375rem; }

	/* ===== Search: a field with its icon, for finding a setting or a page ===== */
	.sol-search { position: relative; display: block; width: 100%; text-align: left; }
	.sol-search > :is(.sol-icon, sol-icon) {
		position: absolute;
		left: var(--sol-space-4);
		top: 50%;
		translate: 0 -50%;
		width: 1.125rem;
		height: 1.125rem;
		color: var(--sol-text-muted);
		pointer-events: none;
	}
	.sol-search > input {
		width: 100%;
		height: var(--sol-control-lg);
		padding: 0 var(--sol-space-5) 0 calc(var(--sol-space-4) + 1.125rem + var(--sol-space-3));
		border: 1px solid var(--sol-border-control);
		border-radius: var(--sol-radius-md);
		background: var(--sol-field);
		color: var(--sol-text);
		font: inherit;
		font-size: var(--sol-text-base);
	}
	.sol-search > input::placeholder { color: var(--sol-text-muted); }
	.sol-search > input:focus-visible { outline: 2px solid var(--sol-focus-ring); outline-offset: 1px; border-color: var(--sol-focus-ring); }
	.sol-search kbd { position: absolute; right: var(--sol-space-4); top: 50%; translate: 0 -50%; }
	/* results under it: a floating list of links */
	.sol-search-results {
		position: absolute;
		z-index: 30;
		top: calc(100% + var(--sol-space-2));
		inset-inline: 0;
		margin: 0;
		padding: var(--sol-space-2);
		list-style: none;
		border: 1px solid var(--sol-border);
		border-radius: var(--sol-radius-md);
		background: var(--sol-layer-2);
		box-shadow: var(--sol-shadow-2);
		--sol-layer: var(--sol-layer-2);
		--sol-layer-hover: var(--sol-layer-2-hover);
		--sol-layer-active: var(--sol-layer-2-active);
	}
	.sol-search-results a {
		display: flex;
		align-items: center;
		gap: var(--sol-space-4);
		padding: var(--sol-space-3) var(--sol-space-3);
		border-radius: var(--sol-radius-sm);
		color: var(--sol-text);
		text-decoration: none;
	}
	.sol-search-results a:is(:hover, [aria-selected='true']) { background: var(--sol-layer-hover); }
	.sol-search-results a span:not(.sol-tile) { display: flex; flex-direction: column; min-width: 0; }
	.sol-search-results a b { font-weight: var(--sol-weight-medium); }
	.sol-search-results a small { color: var(--sol-text-muted); font-size: var(--sol-text-sm); }
	.sol-search-results .sol-tile { --_s: 1.75rem; }

	/* ===== Account menu (sol-account): the person's circle, top right of every app =====
	   The trigger is their avatar; the panel says who they are, links to their
	   account, and holds what every app shares (the theme, signing out). See
	   docs/account-menu.md. */
	sol-account { display: inline-flex; }
	.sol-account-trigger {
		display: inline-grid;
		place-items: center;
		width: 2.5rem;
		height: 2.5rem;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: none;
		cursor: pointer;
	}
	.sol-account-trigger > .sol-avatar { --_s: 2rem; box-shadow: 0 0 0 2px var(--sol-layer, var(--sol-canvas)), 0 0 0 3px transparent; transition: box-shadow var(--sol-duration-fast) var(--sol-ease); }
	.sol-account-trigger:hover > .sol-avatar, .sol-account-trigger[aria-expanded='true'] > .sol-avatar { box-shadow: 0 0 0 2px var(--sol-layer, var(--sol-canvas)), 0 0 0 4px var(--sol-border-hover); }
	.sol-account-trigger:focus-visible { outline: 2px solid var(--sol-focus-ring); outline-offset: 1px; }
	.sol-account-panel {
		position: fixed;
		inset: auto;
		margin: 0;
		width: min(21rem, calc(100vw - 16px));
		max-height: calc(100vh - 16px);
		overflow-y: auto;
		padding: 0;
		border: 1px solid var(--sol-border);
		border-radius: var(--sol-radius-lg);
		background: var(--sol-layer-2);
		color: var(--sol-text);
		box-shadow: var(--sol-shadow-3);
		font-size: var(--sol-text-md);
		line-height: var(--sol-leading-md);
		--sol-layer: var(--sol-layer-2);
		--sol-layer-hover: var(--sol-layer-2-hover);
		--sol-layer-active: var(--sol-layer-2-active);
	}
	.sol-account-panel:popover-open { animation: sol-pop-in var(--sol-duration-base) var(--sol-ease); }
	/* who: the avatar beside the name and the detail, then the way to the account */
	.sol-account-head {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: var(--sol-space-2) var(--sol-space-4);
		padding: var(--sol-space-5);
		border-bottom: 1px solid var(--sol-divider);
	}
	.sol-account-head > .sol-avatar { --_s: 3rem; grid-row: span 2; }
	.sol-account-name { font-weight: var(--sol-weight-semibold); font-size: var(--sol-text-base); line-height: var(--sol-leading-base); overflow-wrap: anywhere; align-self: end; }
	.sol-account-detail { color: var(--sol-text-muted); font-size: var(--sol-text-sm); line-height: var(--sol-leading-sm); overflow-wrap: anywhere; align-self: start; }
	.sol-account-head > .sol-button { grid-column: 1 / -1; margin-top: var(--sol-space-3); }
	.sol-account-body { display: flex; flex-direction: column; padding: var(--sol-space-2); }
	.sol-account-setting {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--sol-space-3);
		padding: var(--sol-space-2) var(--sol-space-3) var(--sol-space-2) var(--sol-space-4);
	}
	.sol-account-setting > span { display: inline-flex; align-items: center; gap: var(--sol-space-4); color: var(--sol-text); }
	.sol-account-setting > span > :is(.sol-icon, sol-icon) { color: var(--sol-text-muted); }
	.sol-account-body hr { margin: var(--sol-space-2) calc(-1 * var(--sol-space-2)); border: 0; border-top: 1px solid var(--sol-divider); }
	.sol-account-link {
		display: flex;
		align-items: center;
		gap: var(--sol-space-4);
		width: 100%;
		min-height: var(--sol-control-md);
		padding: 0 var(--sol-space-4);
		border: 0;
		border-radius: var(--sol-radius-sm);
		background: none;
		color: var(--sol-text);
		font: inherit;
		text-align: left;
		text-decoration: none;
		cursor: pointer;
	}
	.sol-account-link:hover { background: var(--sol-layer-hover); }
	.sol-account-link:active { background: var(--sol-layer-active); }
	.sol-account-link:focus-visible { outline: 2px solid var(--sol-focus-ring); outline-offset: -2px; }
	.sol-account-link > :is(.sol-icon, sol-icon) { color: var(--sol-text-muted); }
	.sol-account-body form { display: contents; }
	.sol-account-foot {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sol-space-2) var(--sol-space-5);
		padding: var(--sol-space-3) var(--sol-space-5);
		border-top: 1px solid var(--sol-divider);
		font-size: var(--sol-text-xs);
	}
	.sol-account-foot a { color: var(--sol-text-muted); text-decoration: none; }
	.sol-account-foot a:hover { color: var(--sol-text); text-decoration: underline; }
	/* the other accounts signed in in this browser, under the current one (0.11.0):
	   one press switches; then adding one. A band of its own, so it reads as
	   "who" rather than "what" */
	.sol-account-others { display: flex; flex-direction: column; padding: var(--sol-space-2); border-bottom: 1px solid var(--sol-divider); background: var(--sol-sunken); }
	.sol-account-switch {
		display: flex;
		align-items: center;
		gap: var(--sol-space-3);
		width: 100%;
		min-height: 2.75rem;
		padding: var(--sol-space-2) var(--sol-space-3);
		border: 0;
		border-radius: var(--sol-radius-md);
		background: none;
		color: var(--sol-text);
		font: inherit;
		font-size: var(--sol-text-sm);
		text-align: left;
		text-decoration: none;
		cursor: pointer;
	}
	.sol-account-switch:hover { background: var(--sol-layer-hover); }
	.sol-account-switch:active { background: var(--sol-layer-active); }
	.sol-account-switch:focus-visible { outline: 2px solid var(--sol-focus-ring); outline-offset: -2px; }
	.sol-account-switch > .sol-avatar { --_s: 1.75rem; font-size: var(--sol-text-xs); }
	.sol-account-switch > :is(.sol-icon, sol-icon) { width: 1.75rem; color: var(--sol-text-muted); }
	.sol-account-switch-name { flex: 1; min-width: 0; font-weight: var(--sol-weight-medium); overflow-wrap: anywhere; }
	.sol-account-switch-note { color: var(--sol-text-muted); font-size: var(--sol-text-xs); }
	[data-theme^='hc'] .sol-account-others { background: var(--sol-canvas); }

	/* ===== Theme switch (sol-theme-switch renders a segmented control) ===== */
	sol-theme-switch { display: inline-flex; }

	/* motion off: no shimmer, spinners still turn (they mean "busy") but slower */
	@media (prefers-reduced-motion: reduce) {
		.sol-skeleton { animation: none; }
	}
}

/* ===== The Sol mark and app sigils (0.10.0): docs/app-identity.md =====
   The mark is Sol's own: four quadrants in their colours, one colour in high
   contrast. A sigil is an app's: drawn from the same quadrants (which of them,
   which solid, which soft or outlined, one turned in), all from the app's
   name, in the app's colour. */
@layer sol.components {
	.sol-mark { display: block; flex: none; width: 1.75rem; height: 1.75rem;
		--q-core: #c44e27; --q-slate: #4c5b70; --q-steel: #7c8a9e; --q-mist: #aeb8c5; }
	.sol-mark .q-core { fill: var(--q-core); }
	.sol-mark .q-slate { fill: var(--q-slate); }
	.sol-mark .q-steel { fill: var(--q-steel); }
	.sol-mark .q-mist { fill: var(--q-mist); }
	[data-theme='dark'] .sol-mark { --q-core: #ea7a57; --q-slate: #8796ad; --q-steel: #a9b5c6; --q-mist: #d3dae3; }
	@media (prefers-color-scheme: dark) { :root:not([data-theme]) .sol-mark { --q-core: #ea7a57; --q-slate: #8796ad; --q-steel: #a9b5c6; --q-mist: #d3dae3; } }
	[data-theme='hc-light'] .sol-mark { --q-core: #000; --q-slate: #000; --q-steel: #000; --q-mist: #000; }
	[data-theme='hc-dark'] .sol-mark { --q-core: #fff; --q-slate: #fff; --q-steel: #fff; --q-mist: #fff; }

	sol-sigil { --_s: 2.5rem; display: inline-block; flex: none; width: var(--_s); height: var(--_s); color: var(--sigil, var(--_tone-fg, var(--sol-text))); }
	sol-sigil > svg { display: block; width: 100%; height: 100%; overflow: visible; }
	sol-sigil .accent { fill: currentColor; }
	sol-sigil .soft { fill: currentColor; opacity: 0.34; }
	sol-sigil .outline { fill: none; stroke: currentColor; stroke-width: 1.6; opacity: 0.8; }
	sol-sigil .sol-mark { width: 100%; height: 100%; }
	sol-sigil.sm { --_s: 1.5rem; }
	sol-sigil.lg { --_s: 4rem; }
	sol-sigil.xl { --_s: 6rem; }
	[data-theme^='hc'] sol-sigil .soft { fill: none; stroke: currentColor; stroke-width: 1.6; opacity: 1; }
	[data-theme^='hc'] sol-sigil .outline { stroke-dasharray: 3 2; opacity: 1; }
}

/* Sol UI patterns: layouts made of the primitives, for pages every project
   has. In @layer sol.patterns, after the components.

   The auth layout (sign-in, sign-up, a PIN gate, "confirm it's you", a
   one-off page such as "email confirmed"):

     <div class="sol-auth">
       <header class="sol-auth-top"><a class="sol-auth-wordmark" href="/">Name</a> …</header>
       <main class="sol-auth-main">
         <section class="sol-card sol-auth-card">
           <div class="sol-auth-head"><h1>Sign in</h1><p>to continue to Wallboard</p></div>
           <div class="sol-auth-methods">…buttons…</div>
         </section>
         <p class="sol-auth-aside">…</p>
       </main>
       <footer class="sol-auth-foot">…</footer>
     </div>

   One column, a 400px card a little above the middle of the window, the page
   on the canvas and the card on layer 1. On a phone the card fills the width
   and keeps its padding tight; the top bar and footer stay quiet. */
@layer sol.patterns {
	.sol-auth {
		display: grid;
		grid-template-rows: auto 1fr auto;
		min-height: 100vh;
		min-height: 100dvh;
		background: var(--sol-canvas);
	}
	.sol-auth-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--sol-space-5);
		padding: var(--sol-space-5) var(--sol-space-7);
	}
	.sol-auth-wordmark {
		color: var(--sol-text);
		text-decoration: none;
		font-size: var(--sol-text-lg);
		line-height: var(--sol-leading-lg);
		font-weight: var(--sol-weight-semibold);
		letter-spacing: -0.012em;
	}
	.sol-auth-wordmark:hover { color: var(--sol-text); }
	.sol-auth-main {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--sol-space-6);
		/* a little above the middle: the eye lands there first */
		padding: clamp(var(--sol-space-6), 9vh, var(--sol-space-12)) var(--sol-space-5) var(--sol-space-10);
	}
	.sol-auth-card {
		width: 100%;
		max-width: var(--sol-width-auth);
		padding: var(--sol-space-8);
		gap: var(--sol-space-7);
		box-shadow: var(--sol-shadow-1);
	}
	.sol-auth-card.wide { max-width: var(--sol-width-read); }
	@media (max-width: 480px) {
		.sol-auth-top { padding: var(--sol-space-4) var(--sol-space-5); }
		.sol-auth-main { padding-top: var(--sol-space-4); }
		.sol-auth-card { padding: var(--sol-space-7) var(--sol-space-6); gap: var(--sol-space-6); }
	}

	/* the heading block: title, and what this is for */
	.sol-auth-head { display: flex; flex-direction: column; gap: var(--sol-space-2); }
	.sol-auth-head h1 {
		font-size: var(--sol-text-2xl);
		line-height: var(--sol-leading-2xl);
		letter-spacing: var(--sol-tracking-2xl);
	}
	.sol-auth-head p { color: var(--sol-text-muted); }
	.sol-auth-head p b { color: var(--sol-text); font-weight: var(--sol-weight-semibold); }
	/* an icon above the title, for states (confirmed, expired, no access) */
	.sol-auth-mark {
		display: inline-grid;
		place-items: center;
		width: 2.75rem;
		height: 2.75rem;
		margin-bottom: var(--sol-space-3);
		border-radius: var(--sol-radius-lg);
		background: var(--sol-layer-hover);
		color: var(--sol-text-muted);
	}
	.sol-auth-mark > :is(.sol-icon, sol-icon) { width: 1.375rem; height: 1.375rem; }
	.sol-auth-mark.success { background: var(--sol-success-subtle); color: var(--sol-success-subtle-text); }
	.sol-auth-mark.warning { background: var(--sol-warning-subtle); color: var(--sol-warning-subtle-text); }
	.sol-auth-mark.danger { background: var(--sol-danger-subtle); color: var(--sol-danger-subtle-text); }
	.sol-auth-mark.accent { background: var(--sol-accent-subtle); color: var(--sol-accent-subtle-text); }

	/* the ways in: one primary, the rest quiet, all full width */
	.sol-auth-methods { display: flex; flex-direction: column; gap: var(--sol-space-3); }
	.sol-auth-methods > .sol-divider { margin-block: var(--sol-space-2); }
	.sol-auth-methods > .sol-hint { text-align: center; }

	/* a group inside the card that belongs together (a choice and its form) */
	.sol-auth-section { display: flex; flex-direction: column; gap: var(--sol-space-5); }
	/* content-only blocks that bring their own heading (a step-up inside any card) */
	.sol-auth-stack { display: flex; flex-direction: column; gap: var(--sol-space-7); }

	/* a form inside the card */
	.sol-auth-form { display: flex; flex-direction: column; gap: var(--sol-space-5); }
	.sol-auth-form > .sol-button.primary { margin-top: var(--sol-space-2); }

	/* waiting on something (sending you back to an app, confirming a link) */
	.sol-auth-busy {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--sol-space-5);
		padding-block: var(--sol-space-8);
		color: var(--sol-text-muted);
		text-align: center;
	}

	/* who you are, when it matters ("signed in as …") */
	.sol-auth-identity {
		display: flex;
		align-items: center;
		gap: var(--sol-space-4);
		padding: var(--sol-space-3) var(--sol-space-4);
		border: 1px solid var(--sol-border);
		border-radius: var(--sol-radius-full);
		background: var(--sol-layer-hover);
		font-size: var(--sol-text-md);
		line-height: var(--sol-leading-md);
		align-self: flex-start;
		max-width: 100%;
	}
	.sol-auth-identity > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

	/* the quiet links under a card's content: back, cancel, another way */
	.sol-auth-links {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--sol-space-2) var(--sol-space-6);
		font-size: var(--sol-text-md);
	}
	.sol-auth-links > .sol-button.link { font-weight: var(--sol-weight-regular); }

	.sol-auth-aside { max-width: var(--sol-width-auth); text-align: center; color: var(--sol-text-muted); font-size: var(--sol-text-md); }
	.sol-auth-foot {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--sol-space-2) var(--sol-space-6);
		padding: var(--sol-space-6) var(--sol-space-5) var(--sol-space-7);
		color: var(--sol-text-muted);
		font-size: var(--sol-text-sm);
	}
	.sol-auth-foot a { color: var(--sol-text-muted); text-decoration: none; }
	.sol-auth-foot a:hover { color: var(--sol-text); text-decoration: underline; }

	/* ===== Prose: long text such as a privacy notice ===== */
	.sol-prose { max-width: 68ch; color: var(--sol-text); }
	.sol-prose > * + * { margin-top: var(--sol-space-5); }
	.sol-prose > h2 {
		margin-top: var(--sol-space-9);
		font-size: var(--sol-text-xl);
		line-height: var(--sol-leading-xl);
	}
	.sol-prose > h3 { margin-top: var(--sol-space-7); font-size: var(--sol-text-lg); line-height: var(--sol-leading-lg); }
	.sol-prose > h2 + *,
	.sol-prose > h3 + * { margin-top: var(--sol-space-3); }
	.sol-prose ul,
	.sol-prose ol { padding-left: 1.25rem; margin-bottom: 0; }
	.sol-prose li + li { margin-top: var(--sol-space-3); }
	.sol-prose li::marker { color: var(--sol-text-muted); }
	.sol-prose .sol-lead { color: var(--sol-text-muted); font-size: var(--sol-text-lg); line-height: var(--sol-leading-lg); }
}

/* ===== The split auth layout (0.6.0) =====
   For products whose sign-in is their front door: the form on one side,
   on layer 1 and not in a card; on wide screens a panel beside it that says
   what you are signing in to. Below 1024px it is the form alone.

     <div class="sol-auth split">
       <div class="sol-auth-side">
         <header class="sol-auth-top">…wordmark, theme switch…</header>
         <main class="sol-auth-body"><div class="sol-auth-column">…head, methods…</div></main>
         <footer class="sol-auth-foot">…</footer>
       </div>
       <aside class="sol-auth-panel"><div class="sol-auth-panel-body">…</div></aside>
     </div> */
@layer sol.patterns {
	.sol-auth.split {
		display: grid;
		grid-template-rows: none;
		grid-template-columns: minmax(0, 1fr);
		background: var(--sol-layer-1);
		--sol-layer: var(--sol-layer-1);
		--sol-layer-hover: var(--sol-layer-1-hover);
		--sol-layer-active: var(--sol-layer-1-active);
	}
	.sol-auth-side {
		display: grid;
		grid-template-rows: auto 1fr auto;
		min-height: 100vh;
		min-height: 100dvh;
		min-width: 0;
	}
	.sol-auth-body {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--sol-space-8) var(--sol-space-7) var(--sol-space-10);
	}
	.sol-auth-column {
		display: flex;
		flex-direction: column;
		gap: var(--sol-space-7);
		width: 100%;
		max-width: 24rem;
		/* a little above the middle */
		margin-top: -6vh;
	}
	.sol-auth.split .sol-auth-head h1 {
		font-size: var(--sol-text-3xl);
		line-height: var(--sol-leading-3xl);
		letter-spacing: var(--sol-tracking-3xl);
	}
	.sol-auth.split .sol-auth-foot { justify-content: flex-start; padding-inline: var(--sol-space-7); }
	/* the column reads from the left edge, so its quiet lines do too */
	.sol-auth.split :is(.sol-auth-aside, .sol-auth-methods > .sol-hint) { text-align: left; }
	.sol-auth.split .sol-auth-links { justify-content: flex-start; }
	.sol-auth.split .sol-auth-aside { padding-top: var(--sol-space-6); border-top: 1px solid var(--sol-divider); }
	.sol-auth-panel { display: none; }

	@media (min-width: 1024px) {
		.sol-auth.split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
		.sol-auth-panel {
			display: flex;
			align-items: center;
			justify-content: center;
			position: sticky;
			top: 0;
			height: 100vh;
			height: 100dvh;
			padding: var(--sol-space-10);
			background-color: var(--sol-canvas);
			background-image: radial-gradient(circle at 1px 1px, var(--sol-decoration) 1px, transparent 0);
			background-size: 20px 20px;
			border-left: 1px solid var(--sol-border);
		}
	}
	@media (max-width: 480px) {
		.sol-auth-body { align-items: flex-start; padding: var(--sol-space-6) var(--sol-space-5) var(--sol-space-9); }
		.sol-auth-column { margin-top: 0; }
		.sol-auth.split .sol-auth-head h1 { font-size: var(--sol-text-2xl); line-height: var(--sol-leading-2xl); }
		.sol-auth.split .sol-auth-foot { justify-content: center; }
	}

	.sol-auth-panel-body {
		display: flex;
		flex-direction: column;
		gap: var(--sol-space-8);
		width: 100%;
		max-width: 28rem;
	}
	.sol-auth-eyebrow {
		font-size: var(--sol-text-sm);
		line-height: var(--sol-leading-sm);
		font-weight: var(--sol-weight-semibold);
		color: var(--sol-accent-subtle-text);
	}
	.sol-auth-statement {
		font-size: var(--sol-text-3xl);
		line-height: var(--sol-leading-3xl);
		font-weight: var(--sol-weight-semibold);
		letter-spacing: var(--sol-tracking-3xl);
		color: var(--sol-text);
		text-wrap: balance;
	}
	.sol-auth-panel-body > .sol-auth-statement + p { margin-top: calc(-1 * var(--sol-space-5)); }
	.sol-auth-statement + p { color: var(--sol-text-muted); font-size: var(--sol-text-lg); line-height: var(--sol-leading-lg); }
	/* three or four short facts, each with an icon */
	.sol-auth-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sol-space-6); }
	.sol-auth-facts li { display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--sol-space-1) var(--sol-space-5); align-items: start; }
	.sol-auth-facts li > :is(.sol-icon, sol-icon) {
		grid-row: span 2;
		width: 2.25rem;
		height: 2.25rem;
		padding: 0.5rem;
		box-sizing: border-box;
		border-radius: var(--sol-radius-md);
		background: var(--sol-layer-1);
		border: 1px solid var(--sol-border);
		color: var(--sol-text);
	}
	.sol-auth-facts b { font-weight: var(--sol-weight-semibold); }
	.sol-auth-facts span { color: var(--sol-text-muted); font-size: var(--sol-text-md); line-height: var(--sol-leading-md); }
	/* "you are signing in to": an app's identity, when a sign-in serves another app */
	.sol-auth-app { display: flex; align-items: center; gap: var(--sol-space-5); }
	.sol-auth-app .sol-avatar { --_s: 3.5rem; border-radius: var(--sol-radius-lg); font-size: var(--sol-text-xl); }
	.sol-auth-app b { display: block; font-size: var(--sol-text-2xl); line-height: var(--sol-leading-2xl); font-weight: var(--sol-weight-semibold); letter-spacing: var(--sol-tracking-2xl); }
	.sol-auth-app > div > span { color: var(--sol-text-muted); font-family: var(--sol-font-mono); font-size: var(--sol-text-sm); }

	/* ===== Console patterns (0.6.0) ===== */

	/* a page inside the shell: its header, then sections */
	.sol-page { display: flex; flex-direction: column; gap: var(--sol-space-7); min-width: 0; }
	.sol-page > .sol-page-header { margin-bottom: 0; }
	.sol-page-section { display: flex; flex-direction: column; gap: var(--sol-space-4); min-width: 0; }
	.sol-page-section > header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sol-space-3) var(--sol-space-5); }
	.sol-page-section > header h2 { font-size: var(--sol-text-lg); line-height: var(--sol-leading-lg); letter-spacing: 0; }
	.sol-page-section > header p { color: var(--sol-text-muted); font-size: var(--sol-text-md); line-height: var(--sol-leading-md); max-width: var(--sol-width-read); }
	.sol-page-section > header > div:first-child { display: flex; flex-direction: column; gap: var(--sol-space-1); min-width: 0; flex: 1 1 22rem; }

	/* a row of numbers that matter */
	.sol-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--sol-space-5); }
	.sol-stat {
		display: flex;
		flex-direction: column;
		gap: var(--sol-space-2);
		padding: var(--sol-space-6);
		border: 1px solid var(--sol-border);
		border-radius: var(--sol-radius-lg);
		background: var(--sol-layer-1);
		color: inherit;
		text-decoration: none;
		min-width: 0;
	}
	a.sol-stat { transition: border-color var(--sol-duration-fast) var(--sol-ease), box-shadow var(--sol-duration-fast) var(--sol-ease); }
	a.sol-stat:hover { border-color: var(--sol-border-hover); box-shadow: var(--sol-shadow-1); }
	.sol-stat-label { display: flex; align-items: center; gap: var(--sol-space-3); color: var(--sol-text-muted); font-size: var(--sol-text-md); }
	.sol-stat-label :is(.sol-icon, sol-icon) { width: 1rem; height: 1rem; }
	.sol-stat-value { font-size: var(--sol-text-3xl); line-height: var(--sol-leading-3xl); font-weight: var(--sol-weight-semibold); letter-spacing: var(--sol-tracking-3xl); font-variant-numeric: tabular-nums; }
	.sol-stat-meta { color: var(--sol-text-muted); font-size: var(--sol-text-sm); line-height: var(--sol-leading-sm); }
	.sol-stat.attention .sol-stat-value { color: var(--sol-accent-subtle-text); }

	/* settings: a section menu beside the sections, one column on a phone */
	.sol-settings { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--sol-space-9); align-items: start; }
	.sol-subnav { position: sticky; top: calc(var(--sol-topbar-height) + var(--sol-space-6)); display: flex; flex-direction: column; gap: var(--sol-space-1); }
	.sol-subnav a {
		display: flex;
		align-items: center;
		gap: var(--sol-space-3);
		padding: var(--sol-space-3) var(--sol-space-4);
		border-radius: var(--sol-radius-md);
		color: var(--sol-text-muted);
		font-size: var(--sol-text-md);
		font-weight: var(--sol-weight-medium);
		text-decoration: none;
	}
	.sol-subnav a:hover { color: var(--sol-text); background: var(--sol-layer-hover); }
	.sol-subnav a[aria-current='true'] { color: var(--sol-text); background: var(--sol-layer-active); }
	.sol-subnav :is(.sol-icon, sol-icon) { width: 1rem; height: 1rem; }
	.sol-settings-body { display: flex; flex-direction: column; gap: var(--sol-space-7); min-width: 0; }
	.sol-settings-body > section { scroll-margin-top: calc(var(--sol-topbar-height) + var(--sol-space-6)); }
	@media (max-width: 960px) {
		.sol-settings { grid-template-columns: minmax(0, 1fr); gap: var(--sol-space-6); }
		.sol-subnav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--sol-space-5)); padding-inline: var(--sol-space-5); }
		.sol-subnav a { white-space: nowrap; }
	}

	/* a setting or a thing you have, with its actions on the right */
	.sol-rows { display: flex; flex-direction: column; }
	.sol-row {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--sol-space-3) var(--sol-space-6);
		padding: var(--sol-space-5) 0;
		border-top: 1px solid var(--sol-divider);
		min-width: 0;
	}
	.sol-rows > .sol-row:first-child { border-top: 0; padding-top: 0; }
	.sol-rows > .sol-row:last-child { padding-bottom: 0; }
	.sol-row > :is(.sol-icon, sol-icon) { width: 1.25rem; height: 1.25rem; color: var(--sol-text-muted); }
	.sol-row-main { flex: 1 1 14rem; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
	.sol-row-title { font-weight: var(--sol-weight-medium); display: flex; align-items: center; flex-wrap: wrap; gap: var(--sol-space-3); }
	.sol-row-meta { color: var(--sol-text-muted); font-size: var(--sol-text-sm); line-height: var(--sol-leading-sm); overflow-wrap: anywhere; }
	.sol-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sol-space-3); margin-left: auto; }

	/* master-detail: a list to choose from beside what is chosen (requests, messages) */
	.sol-master {
		display: grid;
		grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
		border: 1px solid var(--sol-border);
		border-radius: var(--sol-radius-lg);
		background: var(--sol-layer-1);
		/* clip, not hidden: hidden would make it a scroll container and trap a sticky footer inside */
		overflow: clip;
		min-height: 28rem;
		--sol-layer: var(--sol-layer-1);
		--sol-layer-hover: var(--sol-layer-1-hover);
		--sol-layer-active: var(--sol-layer-1-active);
	}
	.sol-master-list { border-right: 1px solid var(--sol-border); overflow-y: auto; max-height: calc(100vh - 14rem); }
	.sol-master-list > ul { list-style: none; margin: 0; padding: var(--sol-space-2); display: flex; flex-direction: column; gap: 2px; }
	.sol-master-item {
		display: flex;
		flex-direction: column;
		gap: 2px;
		width: 100%;
		padding: var(--sol-space-4);
		border: 0;
		border-radius: var(--sol-radius-md);
		background: none;
		color: inherit;
		font: inherit;
		text-align: left;
		text-decoration: none;
		cursor: pointer;
	}
	.sol-master-item:hover { background: var(--sol-layer-hover); }
	.sol-master-item[aria-current='true'] { background: var(--sol-selected); }
	.sol-master-item b { font-weight: var(--sol-weight-medium); display: flex; justify-content: space-between; align-items: baseline; gap: var(--sol-space-3); min-width: 0; }
	.sol-master-item b > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.sol-master-item b > :is(time, .sol-badge) { flex: none; font-weight: var(--sol-weight-regular); color: var(--sol-text-muted); font-size: var(--sol-text-sm); }
	.sol-master-item b > .sol-badge { color: revert-layer; font-size: var(--sol-text-xs); }
	.sol-master-item > span { color: var(--sol-text-muted); font-size: var(--sol-text-sm); line-height: var(--sol-leading-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.sol-master-detail { display: flex; flex-direction: column; min-width: 0; }
	.sol-master-detail > .sol-empty { margin: auto; }
	.sol-master-back { display: none; }
	@media (max-width: 960px) {
		.sol-master { grid-template-columns: minmax(0, 1fr); min-height: 0; }
		.sol-master-list { border-right: 0; max-height: none; }
		.sol-master[data-pane='detail'] .sol-master-list { display: none; }
		.sol-master:not([data-pane='detail']) .sol-master-detail { display: none; }
		.sol-master-back { display: inline-flex; }
	}

	/* a thread: what happened, in order */
	.sol-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
	.sol-timeline > li { position: relative; display: grid; grid-template-columns: 1.75rem 1fr; gap: 0 var(--sol-space-4); padding-bottom: var(--sol-space-6); }
	.sol-timeline > li:last-child { padding-bottom: 0; }
	.sol-timeline > li::before {
		content: '';
		position: absolute;
		left: calc(0.875rem - 0.5px);
		top: 1.75rem;
		bottom: 0;
		width: 1px;
		background: var(--sol-divider);
	}
	.sol-timeline > li:last-child::before { display: none; }
	.sol-timeline-mark {
		display: grid;
		place-items: center;
		width: 1.75rem;
		height: 1.75rem;
		border-radius: 50%;
		background: var(--sol-layer-hover);
		color: var(--sol-text-muted);
		font-size: var(--sol-text-xs);
		font-weight: var(--sol-weight-semibold);
	}
	.sol-timeline-mark :is(.sol-icon, sol-icon) { width: 0.875rem; height: 0.875rem; }
	.sol-timeline-mark.success { background: var(--sol-success-subtle); color: var(--sol-success-subtle-text); }
	.sol-timeline-mark.danger { background: var(--sol-danger-subtle); color: var(--sol-danger-subtle-text); }
	.sol-timeline-mark.accent { background: var(--sol-accent-subtle); color: var(--sol-accent-subtle-text); }
	.sol-timeline-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sol-space-2) var(--sol-space-3); min-height: 1.75rem; padding-top: 0.2rem; font-size: var(--sol-text-md); }
	.sol-timeline-head time { color: var(--sol-text-muted); font-size: var(--sol-text-sm); }
	.sol-timeline-body { grid-column: 2; color: var(--sol-text); font-size: var(--sol-text-md); line-height: var(--sol-leading-md); overflow-wrap: anywhere; }
	.sol-timeline-body.quote { padding: var(--sol-space-3) var(--sol-space-4); margin-top: var(--sol-space-2); border-radius: var(--sol-radius-md); background: var(--sol-sunken); }

	/* steps in order: a setup wizard, or a ladder you climb */
	.sol-stepper { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
	.sol-stepper > li { position: relative; display: grid; grid-template-columns: 2rem 1fr auto; gap: 0 var(--sol-space-5); align-items: start; padding: var(--sol-space-4) 0; }
	.sol-stepper > li::before {
		content: '';
		position: absolute;
		left: calc(1rem - 0.5px);
		top: calc(var(--sol-space-4) + 2rem + 4px);
		bottom: calc(-1 * var(--sol-space-4) + 4px);
		width: 1px;
		background: var(--sol-divider);
	}
	.sol-stepper > li:last-child::before { display: none; }
	.sol-step-mark {
		display: grid;
		place-items: center;
		width: 2rem;
		height: 2rem;
		border-radius: 50%;
		border: 1px solid var(--sol-border-control);
		background: var(--sol-layer);
		color: var(--sol-text-muted);
		font-size: var(--sol-text-sm);
		font-weight: var(--sol-weight-semibold);
		font-variant-numeric: tabular-nums;
	}
	.sol-step-mark :is(.sol-icon, sol-icon) { width: 1rem; height: 1rem; }
	.sol-step-main { display: flex; flex-direction: column; gap: 2px; padding-top: 0.3rem; min-width: 0; }
	.sol-step-title { font-weight: var(--sol-weight-semibold); }
	.sol-step-text { color: var(--sol-text-muted); font-size: var(--sol-text-md); line-height: var(--sol-leading-md); }
	.sol-stepper > li[data-state='done'] .sol-step-mark { background: var(--sol-accent); border-color: var(--sol-accent); color: var(--sol-on-accent); }
	.sol-stepper > li[data-state='current'] .sol-step-mark { border-color: var(--sol-accent); color: var(--sol-accent-subtle-text); box-shadow: 0 0 0 3px var(--sol-accent-subtle); }
	.sol-stepper > li[data-state='current'] .sol-step-title { color: var(--sol-text); }
	.sol-stepper > li[data-state='on'] .sol-step-mark { background: var(--sol-danger-solid); border-color: var(--sol-danger-solid); color: var(--sol-danger-on-solid); }
	.sol-stepper > li[data-state='on'] .sol-step-title { color: var(--sol-danger-subtle-text); }

	/* choosing one of a few things that need explaining (a level, a plan) */
	.sol-options { display: flex; flex-direction: column; gap: var(--sol-space-3); }
	.sol-option {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: var(--sol-space-1) var(--sol-space-4);
		align-items: start;
		padding: var(--sol-space-5);
		border: 1px solid var(--sol-border);
		border-radius: var(--sol-radius-md);
		background: var(--sol-layer);
		cursor: pointer;
		transition: border-color var(--sol-duration-fast) var(--sol-ease), background-color var(--sol-duration-fast) var(--sol-ease);
	}
	.sol-option:hover { border-color: var(--sol-border-hover); }
	.sol-option:has(input:checked) { border-color: var(--sol-accent); background: var(--sol-selected); }
	.sol-option:has(input:focus-visible) { outline: 2px solid var(--sol-focus-ring); outline-offset: 2px; }
	.sol-option > input { grid-row: span 3; margin: 0.2rem 0 0; accent-color: var(--sol-accent); width: 1rem; height: 1rem; }
	.sol-option-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sol-space-3); font-weight: var(--sol-weight-semibold); }
	.sol-option-text { color: var(--sol-text-muted); font-size: var(--sol-text-md); line-height: var(--sol-leading-md); }
	.sol-option-meta { display: flex; flex-wrap: wrap; gap: var(--sol-space-2); margin-top: var(--sol-space-2); }

	/* a row of controls over a table: filters on the left, actions on the right */
	.sol-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sol-space-3); }
	.sol-toolbar > .sol-cluster { flex-wrap: wrap; }

	/* a count on an icon button (unread notifications) */
	.sol-count {
		position: absolute;
		top: 0.125rem;
		right: 0.125rem;
		min-width: 1rem;
		height: 1rem;
		padding: 0 0.25rem;
		border-radius: var(--sol-radius-full);
		background: var(--sol-accent);
		color: var(--sol-on-accent);
		font-size: 0.625rem;
		font-weight: var(--sol-weight-semibold);
		line-height: 1rem;
		text-align: center;
		pointer-events: none;
		font-variant-numeric: tabular-nums;
	}

	/* tables that become stacked rows on a phone: give each td a data-label */
	@media (max-width: 640px) {
		.sol-table.stack thead { display: none; }
		.sol-table.stack,
		.sol-table.stack tbody,
		.sol-table.stack tr,
		.sol-table.stack td { display: block; width: 100%; }
		.sol-table.stack tr { padding: var(--sol-space-4) var(--sol-space-5); border-bottom: 1px solid var(--sol-divider); }
		.sol-table.stack tbody tr:last-child { border-bottom: 0; }
		.sol-table.stack td { padding: var(--sol-space-1) 0; border: 0; text-align: left; }
		.sol-table.stack td[data-label]::before {
			content: attr(data-label);
			display: block;
			color: var(--sol-text-muted);
			font-size: var(--sol-text-xs);
			line-height: var(--sol-leading-xs);
		}
		.sol-table.stack td.shrink { width: 100%; }
		.sol-table.stack .num { text-align: left; }
	}
}

/* ===== The account hub (0.7.0, 0.8.0): a person's own pages =====
   Where someone looks after their account, not where they run anything: a
   quiet top bar with their circle, sections down the left as tiles with short
   names, and one roomy column. On a phone the sections become a strip under the
   top bar. See docs/account-page.md. */
@layer sol.patterns {
	.sol-hub {
		display: grid;
		grid-template-columns: 17rem minmax(0, 1fr);
		grid-template-rows: auto minmax(0, 1fr);
		grid-template-areas: 'top top' 'nav main';
		min-height: 100vh;
		background: var(--sol-canvas);
	}
	.sol-hub-top {
		grid-area: top;
		position: sticky;
		top: 0;
		z-index: 20;
		display: flex;
		align-items: center;
		gap: var(--sol-space-3);
		height: 3.75rem;
		padding: 0 var(--sol-space-5) 0 var(--sol-space-6);
		background: var(--sol-canvas);
		border-bottom: 1px solid var(--sol-divider);
	}
	.sol-hub-brand { display: inline-flex; align-items: center; gap: var(--sol-space-3); color: var(--sol-text); text-decoration: none; font-size: var(--sol-text-lg); line-height: 1; }
	.sol-hub-brand b { font-weight: var(--sol-weight-semibold); }
	.sol-hub-brand span { color: var(--sol-text-muted); font-weight: var(--sol-weight-regular); }
	.sol-hub-top .sol-spacer { flex: 1; }
	.sol-hub-nav {
		grid-area: nav;
		position: sticky;
		top: 3.75rem;
		align-self: start;
		display: flex;
		flex-direction: column;
		gap: var(--sol-space-1);
		height: calc(100vh - 3.75rem);
		overflow-y: auto;
		padding: var(--sol-space-6) var(--sol-space-4) var(--sol-space-5);
	}
	.sol-hub-link {
		position: relative;
		display: flex;
		align-items: center;
		gap: var(--sol-space-4);
		min-height: 2.75rem;
		padding: 0 var(--sol-space-4) 0 var(--sol-space-3);
		border-radius: var(--sol-radius-md);
		color: var(--sol-text-muted);
		font-size: var(--sol-text-md);
		font-weight: var(--sol-weight-medium);
		text-decoration: none;
		transition: background var(--sol-duration-fast) var(--sol-ease), color var(--sol-duration-fast) var(--sol-ease);
	}
	.sol-hub-link:hover { background: var(--sol-canvas-hover); color: var(--sol-text); }
	.sol-hub-link:focus-visible { outline: 2px solid var(--sol-focus-ring); outline-offset: -2px; }
	/* where you are: a raised surface, the text at full strength, the accent as a bar */
	.sol-hub-link[aria-current='page'] { background: var(--sol-layer-1); color: var(--sol-text); box-shadow: var(--sol-shadow-1), inset 0 0 0 1px var(--sol-border); }
	.sol-hub-link[aria-current='page']::before { content: ''; position: absolute; left: 4px; top: 0.875rem; bottom: 0.875rem; width: 3px; border-radius: 3px; background: var(--sol-accent); }
	.sol-hub-link[aria-current='page'] { padding-left: var(--sol-space-4); }
	.sol-hub-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--sol-space-2) var(--sol-space-5); padding: var(--sol-space-6) var(--sol-space-4) 0; font-size: var(--sol-text-xs); }
	.sol-hub-foot a { color: var(--sol-text-muted); text-decoration: none; }
	.sol-hub-foot a:hover { color: var(--sol-text); text-decoration: underline; }
	.sol-hub-main { grid-area: main; min-width: 0; padding: var(--sol-space-8) var(--sol-space-8) var(--sol-space-11); }
	.sol-hub-content { max-width: 48rem; margin-inline: auto; display: flex; flex-direction: column; gap: var(--sol-space-7); }

	/* the start page: who you are beside your avatar, then a search and shortcuts */
	.sol-hub-hero {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: var(--sol-space-1) var(--sol-space-6);
		padding: var(--sol-space-4) 0 var(--sol-space-2);
	}
	.sol-hub-hero > .sol-avatar { --_s: 4.5rem; grid-row: span 2; }
	.sol-hub-hero h1 { margin: 0; align-self: end; font-size: var(--sol-text-3xl); line-height: var(--sol-leading-3xl); font-weight: var(--sol-weight-semibold); letter-spacing: var(--sol-tracking-3xl); overflow-wrap: anywhere; }
	.sol-hub-hero > p { margin: 0; align-self: start; color: var(--sol-text-muted); }
	.sol-hub-hero > :is(.sol-search, .sol-quick) { grid-column: 1 / -1; }
	.sol-hub-hero > .sol-search { margin-top: var(--sol-space-7); }
	.sol-hub-hero > .sol-quick { margin-top: var(--sol-space-4); }
	/* a section page: its title and what it is for */
	.sol-hub-head { display: flex; align-items: flex-start; gap: var(--sol-space-5); padding: var(--sol-space-4) 0 var(--sol-space-2); }
	.sol-hub-head > div { display: flex; flex-direction: column; gap: var(--sol-space-2); min-width: 0; }
	.sol-hub-head h1 { margin: 0; font-size: var(--sol-text-3xl); line-height: var(--sol-leading-3xl); font-weight: var(--sol-weight-semibold); letter-spacing: var(--sol-tracking-3xl); }
	.sol-hub-head p { margin: 0; max-width: 38rem; color: var(--sol-text-muted); }
	.sol-hub-head > .sol-tile { --_s: 3rem; margin-top: var(--sol-space-1); }
	/* a group of settings: a card with its heading inside */
	.sol-hub-card { padding: var(--sol-space-6); border: 1px solid var(--sol-border); border-radius: var(--sol-radius-lg); background: var(--sol-layer-1); --sol-layer: var(--sol-layer-1); --sol-layer-hover: var(--sol-layer-1-hover); --sol-layer-active: var(--sol-layer-1-active); }
	.sol-hub-card > header { display: flex; align-items: flex-start; gap: var(--sol-space-4); margin-bottom: var(--sol-space-5); }
	.sol-hub-card > header > div { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--sol-space-1); min-width: 0; }
	.sol-hub-card > header h2 { margin: 0; font-size: var(--sol-text-lg); line-height: var(--sol-leading-lg); font-weight: var(--sol-weight-semibold); }
	.sol-hub-card > header p { margin: 0; color: var(--sol-text-muted); font-size: var(--sol-text-md); }
	.sol-hub-card.danger-zone { border-color: var(--sol-danger-border); }
	/* in the hub, a page section is one card with its heading inside: the
	   sections a product already has (heading, then a card of rows) read as
	   the hub's cards without being rewritten */
	.sol-hub-content > .sol-page-section { gap: var(--sol-space-5); padding: var(--sol-space-6); border: 1px solid var(--sol-border); border-radius: var(--sol-radius-lg); background: var(--sol-layer-1); --sol-layer: var(--sol-layer-1); --sol-layer-hover: var(--sol-layer-1-hover); --sol-layer-active: var(--sol-layer-1-active); scroll-margin-top: 5rem; }
	.sol-hub-content > .sol-page-section > header h2 { font-size: var(--sol-text-lg); line-height: var(--sol-leading-lg); font-weight: var(--sol-weight-semibold); }
	.sol-hub-content > .sol-page-section > .sol-card { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
	.sol-hub-content > .sol-page-section.danger-zone { border-color: var(--sol-danger-border); }
	@media (max-width: 900px) { .sol-hub-content > .sol-page-section { padding: var(--sol-space-5); } }
	/* cards side by side on the start page: tile, heading and what stands, then the way in */
	.sol-hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--sol-space-4); }
	.sol-hub-grid > .sol-hub-card { display: flex; flex-direction: column; gap: var(--sol-space-4); padding: var(--sol-space-5); }
	.sol-hub-grid > .sol-hub-card > header { margin: 0; }
	.sol-hub-grid > .sol-hub-card > header > .sol-tile { order: -1; }
	.sol-hub-grid > .sol-hub-card > :last-child:not(header) { margin-top: auto; align-self: flex-start; }
	/* a whole card that opens its section */
	a.sol-hub-card { color: inherit; text-decoration: none; transition: border-color var(--sol-duration-fast) var(--sol-ease), box-shadow var(--sol-duration-fast) var(--sol-ease); }
	a.sol-hub-card:hover { border-color: var(--sol-border-hover); box-shadow: var(--sol-shadow-1); }
	a.sol-hub-card:focus-visible { outline: 2px solid var(--sol-focus-ring); outline-offset: 2px; }

	/* a row that is a link: the whole row opens it, a chevron says so */
	a.sol-row.link { color: inherit; text-decoration: none; margin-inline: calc(-1 * var(--sol-space-4)); padding-inline: var(--sol-space-4); border-radius: var(--sol-radius-md); }
	.sol-rows > a.sol-row.link:first-child { padding-top: var(--sol-space-4); }
	.sol-rows > a.sol-row.link:last-child { padding-bottom: var(--sol-space-4); }
	a.sol-row.link:hover { background: var(--sol-layer-hover); }
	a.sol-row.link:focus-visible { outline: 2px solid var(--sol-focus-ring); outline-offset: -2px; }
	a.sol-row.link::after { content: ''; flex: none; width: 1rem; height: 1rem; margin-left: auto; background: var(--sol-text-muted); mask: url('icons/chevron-right.svg') center / contain no-repeat; }

	@media (max-width: 900px) {
		.sol-hub { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'top' 'nav' 'main'; }
		.sol-hub-top { padding-inline: var(--sol-space-4); height: 3.5rem; }
		.sol-hub-nav { position: sticky; top: 3.5rem; z-index: 19; height: auto; flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: var(--sol-space-2); padding: var(--sol-space-2) var(--sol-space-4); background: var(--sol-canvas); border-bottom: 1px solid var(--sol-divider); }
		.sol-hub-link { flex: none; min-height: var(--sol-control-md); gap: var(--sol-space-3); padding: 0 var(--sol-space-4) 0 var(--sol-space-2); font-size: var(--sol-text-sm); white-space: nowrap; }
		.sol-hub-link[aria-current='page']::before { left: var(--sol-space-3); right: var(--sol-space-3); top: auto; bottom: 0; width: auto; height: 2px; border-radius: 2px 2px 0 0; }
		.sol-hub-link .sol-tile { --_s: 1.5rem; }
		.sol-hub-foot { display: none; }
		.sol-hub-main { padding: var(--sol-space-6) var(--sol-space-5) var(--sol-space-10); }
		.sol-hub-hero { column-gap: var(--sol-space-5); }
		.sol-hub-hero > .sol-avatar { --_s: 3.5rem; }
		.sol-hub-hero h1, .sol-hub-head h1 { font-size: var(--sol-text-2xl); line-height: var(--sol-leading-2xl); }
		.sol-hub-head > .sol-tile { display: none; }
		.sol-hub-card { padding: var(--sol-space-5); }
	}
}

/* ===== Articles and stories (0.9.0): reading, and finding something to read =====
   An article is one calm column of text at a reading size, with images that
   may step out of it: wide, or the full width of the screen. Its pieces are
   what the editor in Sol Internal makes (figure, gallery, pull quote,
   callout, app card, actions), so the page you write on and the page people
   read are the same CSS. Stories are the cards that lead to an article: a
   lead story, a grid of cards and compact rows. See docs/articles.md. */
@layer sol.patterns {
	/* a focal point, in tenths, kept in view whatever the crop (CSP-safe: no inline style) */
	[data-fx='0'] { --_fx: 0%; } [data-fx='1'] { --_fx: 10%; } [data-fx='2'] { --_fx: 20%; } [data-fx='3'] { --_fx: 30%; }
	[data-fx='4'] { --_fx: 40%; } [data-fx='5'] { --_fx: 50%; } [data-fx='6'] { --_fx: 60%; } [data-fx='7'] { --_fx: 70%; }
	[data-fx='8'] { --_fx: 80%; } [data-fx='9'] { --_fx: 90%; } [data-fx='10'] { --_fx: 100%; }
	[data-fy='0'] { --_fy: 0%; } [data-fy='1'] { --_fy: 10%; } [data-fy='2'] { --_fy: 20%; } [data-fy='3'] { --_fy: 30%; }
	[data-fy='4'] { --_fy: 40%; } [data-fy='5'] { --_fy: 50%; } [data-fy='6'] { --_fy: 60%; } [data-fy='7'] { --_fy: 70%; }
	[data-fy='8'] { --_fy: 80%; } [data-fy='9'] { --_fy: 90%; } [data-fy='10'] { --_fy: 100%; }
	img[data-fx], img[data-fy], .sol-focal { object-fit: cover; object-position: var(--_fx, 50%) var(--_fy, 50%); }

	/* what kind of piece it is: a short word, with the accent as a small bar */
	.sol-kicker {
		display: inline-flex;
		align-items: center;
		gap: var(--sol-space-2);
		color: var(--sol-text);
		font-size: var(--sol-text-sm);
		font-weight: var(--sol-weight-semibold);
		line-height: 1.2;
	}
	.sol-kicker::before { content: ''; width: 0.75rem; height: 3px; border-radius: 3px; background: var(--sol-accent); }
	a.sol-kicker { text-decoration: none; }
	a.sol-kicker:hover { text-decoration: underline; text-underline-offset: 0.18em; }

	/* --- the article: head, then body --- */
	.sol-article-head {
		--_col: min(var(--_measure, 42rem), 100% - 2 * var(--sol-space-5));
		display: flex;
		flex-direction: column;
		gap: var(--sol-space-4);
		width: var(--_col);
		margin-inline: auto;
	}
	.sol-article-title {
		margin: 0;
		font-size: clamp(2.125rem, 1.4rem + 2.6vw, 3.25rem);
		line-height: 1.08;
		letter-spacing: -0.028em;
		font-weight: var(--sol-weight-semibold);
		text-wrap: balance;
	}
	.sol-article-dek { margin: 0; color: var(--sol-text-muted); font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.5; text-wrap: pretty; }
	.sol-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sol-space-2) var(--sol-space-3); color: var(--sol-text-muted); font-size: var(--sol-text-sm); }
	.sol-article-meta .sol-avatar { --_s: 2rem; }
	.sol-article-meta b { color: var(--sol-text); font-weight: var(--sol-weight-medium); }
	.sol-article-meta .sol-dot::before { content: '·'; }
	.sol-article-cover { width: min(58rem, 100% - 2 * var(--sol-space-5)); margin: var(--sol-space-7) auto 0; }
	.sol-article-head + .sol-article { margin-top: var(--sol-space-8); }
	.sol-article-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--sol-radius-lg); background: var(--sol-sunken); }
	.sol-article-cover figcaption { margin-top: var(--sol-space-3); color: var(--sol-text-muted); font-size: var(--sol-text-sm); }

	.sol-article {
		--_measure: 42rem;
		width: min(var(--_measure), 100% - 2 * var(--sol-space-5));
		margin-inline: auto;
		color: var(--sol-text);
		font-size: 1.125rem;
		line-height: 1.72;
		overflow-wrap: break-word;
	}
	.sol-article > * { margin-block: 0 1.25em; }
	.sol-article > :last-child { margin-bottom: 0; }
	.sol-article :is(h2, h3, h4) { font-weight: var(--sol-weight-semibold); letter-spacing: -0.015em; text-wrap: balance; scroll-margin-top: 5rem; }
	.sol-article h2 { margin: 2.2em 0 0.6em; font-size: 1.625rem; line-height: 1.25; }
	.sol-article h3 { margin: 1.8em 0 0.5em; font-size: 1.3rem; line-height: 1.3; }
	.sol-article h4 { margin: 1.6em 0 0.4em; font-size: 1.125rem; line-height: 1.4; }
	.sol-article > :first-child { margin-top: 0; }
	.sol-article a { color: var(--sol-text-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
	.sol-article a:hover { text-decoration-thickness: 2px; }
	.sol-article :is(ul, ol) { padding-left: 1.4em; }
	.sol-article li + li { margin-top: 0.35em; }
	.sol-article li::marker { color: var(--sol-text-muted); }
	.sol-article blockquote { margin-inline: 0; padding-left: 1.25em; border-left: 3px solid var(--sol-border); color: var(--sol-text-muted); }
	.sol-article :not(pre) > code { padding: 0.1em 0.35em; border-radius: var(--sol-radius-sm); background: var(--sol-sunken); font-family: var(--sol-font-mono); font-size: 0.88em; }
	.sol-article pre {
		position: relative;
		padding: var(--sol-space-5);
		overflow-x: auto;
		border-radius: var(--sol-radius-md);
		background: var(--sol-sunken);
		font-family: var(--sol-font-mono);
		font-size: var(--sol-text-sm);
		line-height: 1.6;
	}
	.sol-article pre[data-lang]::before { content: attr(data-lang); position: absolute; top: var(--sol-space-2); right: var(--sol-space-3); color: var(--sol-text-muted); font-size: var(--sol-text-xs); }
	/* a pause: one small Sol quadrant */
	.sol-article hr { width: 0.75rem; height: 0.75rem; margin: 2.75em auto; border: 0; border-radius: 2px 6px 2px 2px; background: var(--sol-border); }

	/* images: in the column, wide (out of it on both sides), or the full width */
	.sol-article-figure, .sol-article-gallery { margin-block: 2em; }
	.sol-article-figure img { display: block; width: 100%; height: auto; border-radius: var(--sol-radius-md); background: var(--sol-sunken); }
	.sol-article :is(figure[data-size='wide'], .sol-article-gallery) { width: min(58rem, 100vw - 2 * var(--sol-space-5)); margin-left: 50%; translate: -50% 0; }
	.sol-article figure[data-size='full'] { width: 100vw; margin-left: 50%; translate: -50% 0; }
	.sol-article figure[data-size='full'] img { border-radius: 0; }
	.sol-article figure[data-size='full'] figcaption { width: min(var(--_measure), 100% - 2 * var(--sol-space-5)); margin-inline: auto; }
	.sol-article figcaption { margin-top: var(--sol-space-3); color: var(--sol-text-muted); font-size: var(--sol-text-sm); line-height: 1.5; }
	.sol-article-credit { margin-left: var(--sol-space-2); color: var(--sol-text-muted); font-size: var(--sol-text-xs); letter-spacing: 0.02em; text-transform: uppercase; }
	.sol-article-gallery > div { display: grid; grid-template-columns: repeat(var(--_cols, 2), minmax(0, 1fr)); gap: var(--sol-space-3); }
	.sol-article-gallery[data-count='3'], .sol-article-gallery[data-count='5'], .sol-article-gallery[data-count='6'] { --_cols: 3; }
	.sol-article-gallery[data-count='1'] { --_cols: 1; }
	.sol-article-gallery img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--sol-radius-md); background: var(--sol-sunken); }

	/* a pull quote: a line worth saying twice, larger, under a small accent quadrant */
	.sol-article-pull { margin-block: 2.25em; }
	.sol-article-pull::before { content: ''; display: block; width: 1rem; height: 1rem; margin-bottom: var(--sol-space-4); border-radius: 2px 8px 2px 2px; background: var(--sol-accent); }
	.sol-article-pull blockquote { margin: 0; padding: 0; border: 0; color: var(--sol-text); }
	.sol-article-pull p { margin: 0; font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); line-height: 1.35; font-weight: var(--sol-weight-medium); letter-spacing: -0.015em; text-wrap: balance; }
	.sol-article-pull figcaption { margin-top: var(--sol-space-4); font-size: var(--sol-text-md); }
	.sol-article-pull figcaption::before { content: '— '; }

	/* a callout: a note beside the text, in words and an icon, not only a colour */
	.sol-article-callout {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--sol-space-4);
		padding: var(--sol-space-5);
		border-radius: var(--sol-radius-md);
		background: var(--sol-sunken);
		font-size: 1rem;
		line-height: 1.65;
	}
	.sol-article-callout > :is(sol-icon, .sol-icon) { width: 1.25rem; height: 1.25rem; margin-top: 0.15em; color: var(--sol-text-muted); }
	.sol-article-callout > div > * { margin: 0 0 0.75em; }
	.sol-article-callout > div > :last-child { margin-bottom: 0; }
	.sol-article-callout[data-tone='tip'] { background: var(--sol-accent-subtle); }
	.sol-article-callout[data-tone='tip'] > :is(sol-icon, .sol-icon) { color: var(--sol-accent-subtle-text); }
	.sol-article-callout[data-tone='success'] { background: var(--sol-success-subtle); }
	.sol-article-callout[data-tone='success'] > :is(sol-icon, .sol-icon) { color: var(--sol-success-subtle-text); }
	.sol-article-callout[data-tone='warning'] { background: var(--sol-warning-subtle); }
	.sol-article-callout[data-tone='warning'] > :is(sol-icon, .sol-icon) { color: var(--sol-warning-subtle-text); }

	/* an app card: one Sol app, to open from the article */
	.sol-article .sol-article-app {
		display: flex;
		align-items: center;
		gap: var(--sol-space-4);
		padding: var(--sol-space-4) var(--sol-space-5);
		border: 1px solid var(--sol-border);
		border-radius: var(--sol-radius-md);
		background: var(--sol-layer-1);
		color: var(--sol-text);
		text-decoration: none;
		font-size: var(--sol-text-md);
		line-height: 1.4;
		transition: background var(--sol-duration-fast) var(--sol-ease), border-color var(--sol-duration-fast) var(--sol-ease);
	}
	.sol-article .sol-article-app:hover { background: var(--sol-layer-hover); border-color: var(--sol-border-hover); }
	.sol-article-app .sol-tile { --_s: 2.75rem; }
	.sol-article-app > span:not(.sol-tile) { display: flex; flex: 1; flex-direction: column; }
	.sol-article-app b { font-weight: var(--sol-weight-semibold); }
	.sol-article-app > span > span { color: var(--sol-text-muted); font-size: var(--sol-text-sm); }
	.sol-article-app > :is(sol-icon, .sol-icon):last-child { color: var(--sol-text-muted); }
	.sol-article-actions { display: flex; flex-wrap: wrap; gap: var(--sol-space-3); }
	.sol-article .sol-article-actions a { text-decoration: none; }
	.sol-article .sol-article-actions a.primary { color: var(--sol-on-accent); }
	.sol-article .sol-article-actions a:not(.primary) { color: var(--sol-text); }

	/* on this page: the article's headings, beside it on a wide screen */
	.sol-toc { display: flex; flex-direction: column; gap: var(--sol-space-1); font-size: var(--sol-text-sm); }
	.sol-toc > b { margin-bottom: var(--sol-space-2); font-weight: var(--sol-weight-semibold); }
	.sol-toc a { padding: var(--sol-space-1) 0 var(--sol-space-1) var(--sol-space-3); border-left: 2px solid var(--sol-divider); color: var(--sol-text-muted); text-decoration: none; line-height: 1.4; }
	.sol-toc a[data-level='3'] { padding-left: var(--sol-space-6); }
	.sol-toc a:hover { color: var(--sol-text); }
	.sol-toc a[aria-current='true'] { border-left-color: var(--sol-accent); color: var(--sol-text); }

	/* --- stories: the way to an article --- */
	.sol-story { display: flex; flex-direction: column; gap: var(--sol-space-4); min-width: 0; color: var(--sol-text); text-decoration: none; }
	.sol-story-media { display: block; overflow: hidden; border-radius: var(--sol-radius-md); background: var(--sol-sunken); aspect-ratio: 16 / 10; }
	.sol-story-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale var(--sol-duration-slow) var(--sol-ease); }
	.sol-story-body { display: flex; flex-direction: column; gap: var(--sol-space-2); min-width: 0; }
	.sol-story-title { font-size: var(--sol-text-lg); line-height: 1.3; font-weight: var(--sol-weight-semibold); letter-spacing: -0.01em; text-wrap: balance; }
	.sol-story-dek { color: var(--sol-text-muted); font-size: var(--sol-text-md); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
	.sol-story-meta { color: var(--sol-text-muted); font-size: var(--sol-text-sm); }
	.sol-story:hover .sol-story-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
	.sol-story:hover .sol-story-media img { scale: 1.025; }
	.sol-story:focus-visible { outline: 2px solid var(--sol-focus-ring); outline-offset: 4px; border-radius: var(--sol-radius-md); }

	/* the lead story: the picture large beside its words */
	.sol-story.lead { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: center; gap: var(--sol-space-8); }
	.sol-story.lead .sol-story-media { border-radius: var(--sol-radius-lg); aspect-ratio: 3 / 2; }
	.sol-story.lead .sol-story-body { gap: var(--sol-space-3); }
	.sol-story.lead .sol-story-title { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.12; letter-spacing: -0.025em; }
	.sol-story.lead .sol-story-dek { font-size: var(--sol-text-lg); -webkit-line-clamp: 4; }
	/* a row: small picture, words beside it */
	.sol-story.row { flex-direction: row; align-items: center; gap: var(--sol-space-4); }
	.sol-story.row .sol-story-media { flex: none; width: 6.5rem; aspect-ratio: 1; }
	.sol-story.row .sol-story-title { font-size: var(--sol-text-md); }
	.sol-story.row .sol-story-dek { display: none; }

	.sol-stories { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: var(--sol-space-8) var(--sol-space-6); }
	.sol-stories.rows { grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr)); gap: var(--sol-space-5) var(--sol-space-6); }

	@media (max-width: 48rem) {
		.sol-story.lead { grid-template-columns: minmax(0, 1fr); gap: var(--sol-space-5); }
		.sol-article { font-size: 1.0625rem; }
	}
	@media (prefers-reduced-motion: reduce) {
		.sol-story-media img { transition: none; }
		.sol-story:hover .sol-story-media img { scale: none; }
	}
}

/* ===== Doors and the bar (0.10.0): docs/app-identity.md, docs/navigation.md =====
   A door is an app, as a place to go: tall, in the app's own colour, its sigil
   large and again faintly behind, its name, what it's for. Cut like a quadrant
   of the Sol mark: three small corners, one large arch top right. Colours come
   from the app (--door-bg, --door-ink: its soft and solid brand colour) or, for
   an app without a brand, from its identification tone (data-tone).
   The bar is navigation for a product with few places: one line at the top,
   the places as words, and on a phone a tab bar at the bottom. A product with
   many places, in groups, keeps the side nav (sol-shell). */
@layer sol.patterns {
	.sol-doors { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(12.5rem, 100%), 1fr)); gap: var(--sol-space-5); margin: 0; padding: 0; list-style: none; }
	.sol-door {
		--_bg: var(--door-bg, var(--_tone, var(--sol-sunken)));
		--_ink: var(--door-ink, var(--_tone-fg, var(--sol-text)));
		position: relative;
		isolation: isolate;
		display: flex;
		flex-direction: column;
		min-width: 0;
		aspect-ratio: 4 / 5;
		min-height: 15rem;
		padding: var(--sol-space-6) var(--sol-space-5) var(--sol-space-5);
		overflow: hidden;
		border-radius: var(--sol-radius-md) 46% var(--sol-radius-md) var(--sol-radius-md) / var(--sol-radius-md) 36% var(--sol-radius-md) var(--sol-radius-md);
		background: var(--_bg);
		color: var(--sol-text);
		text-decoration: none;
		transition: transform var(--sol-duration-slow) var(--sol-ease), box-shadow var(--sol-duration-slow) var(--sol-ease);
	}
	.sol-door > sol-sigil { --_s: 4rem; color: var(--_ink); }
	/* the same sigil, large and faint, behind: the door's own pattern */
	.sol-door > sol-sigil.sol-door-ghost { position: absolute; z-index: -1; right: -20%; bottom: -16%; --_s: 80%; width: 80%; height: auto; aspect-ratio: 1; color: var(--_ink); opacity: 0.09; pointer-events: none; }
	/* behind, the sigil is one flat silhouette: a shape, not a second emblem */
	.sol-door > sol-sigil.sol-door-ghost path { fill: currentColor; stroke: none; opacity: 1; }
	.sol-door-body { display: flex; flex-direction: column; gap: var(--sol-space-1); margin-top: auto; min-width: 0; }
	.sol-door-name { font-size: var(--sol-text-xl); line-height: 1.2; font-weight: var(--sol-weight-semibold); letter-spacing: -0.015em; overflow-wrap: anywhere; }
	.sol-door-about { color: var(--sol-text-muted); font-size: var(--sol-text-sm); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.sol-door-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sol-space-2); margin-top: var(--sol-space-3); color: var(--sol-text-muted); font-size: var(--sol-text-xs); }
	.sol-door-meta .sol-badge { background: color-mix(in oklab, var(--sol-layer-1) 70%, transparent); }
	/* the whole door is its link: an <a class="sol-door">, or a door whose name is
	   a.sol-door-link, stretched over it, so a second link (.sol-door-more) fits */
	.sol-door-link { color: inherit; text-decoration: none; }
	.sol-door-link::after { content: ''; position: absolute; z-index: 1; inset: 0; border-radius: inherit; }
	.sol-door-link:focus-visible { outline: none; }
	.sol-door-more { position: absolute; z-index: 2; right: var(--sol-space-3); bottom: var(--sol-space-3); }
	.sol-door:has(.sol-door-more) .sol-door-body { padding-right: var(--sol-space-8); }
	.sol-door-logo { display: block; width: 4rem; height: 4rem; }
	.sol-door-logo img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: var(--sol-radius-md); }
	/* a door lifts, flat: a 3D tilt on a rounded box that clips made Chrome flicker
	   what's inside it, and the ghost stays still, so no piece crosses the edge (0.10.1) */
	:is(a.sol-door, .sol-door:has(.sol-door-link)):hover { transform: translateY(-3px); box-shadow: var(--sol-shadow-3); }
	:is(a.sol-door:focus-visible, .sol-door:has(.sol-door-link:focus-visible)) { outline: 2px solid var(--sol-focus-ring); outline-offset: 3px; }
	/* landscape, for an app's own page */
	.sol-door.wide { aspect-ratio: auto; min-height: 15rem; flex-direction: row; align-items: flex-end; gap: var(--sol-space-6); padding: var(--sol-space-8); border-radius: var(--sol-radius-md) 18% var(--sol-radius-md) var(--sol-radius-md) / var(--sol-radius-md) 45% var(--sol-radius-md) var(--sol-radius-md); }
	.sol-door.wide > sol-sigil:not(.sol-door-ghost) { --_s: 6rem; }
	.sol-door.wide > sol-sigil.sol-door-ghost { right: 4%; bottom: auto; top: 10%; width: min(30%, 16rem); }
	.sol-door.wide .sol-door-name { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); letter-spacing: -0.025em; }
	.sol-door.wide .sol-door-about { font-size: var(--sol-text-md); -webkit-line-clamp: 3; }
	/* smaller, square: a row of them */
	.sol-door.small, .sol-doors.small .sol-door { aspect-ratio: auto; min-height: 12.5rem; padding: var(--sol-space-5) var(--sol-space-4) var(--sol-space-4); }
	.sol-doors.small .sol-door > sol-sigil:not(.sol-door-ghost) { --_s: 2.75rem; }
	.sol-doors.small .sol-door-name { font-size: var(--sol-text-lg); }
	.sol-door.small > sol-sigil:not(.sol-door-ghost) { --_s: 2.75rem; }
	.sol-door.small .sol-door-name { font-size: var(--sol-text-lg); }
	.sol-doors.small { grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr)); gap: var(--sol-space-4); }
	@media (prefers-reduced-motion: reduce) {
		.sol-door { transition: none; }
		:is(a.sol-door, .sol-door:has(.sol-door-link)):hover { transform: none; }
	}
	[data-theme^='hc'] .sol-door { background: var(--sol-canvas); box-shadow: inset 0 0 0 2px var(--sol-text); }
	[data-theme^='hc'] .sol-door > sol-sigil { color: var(--sol-text); }
	[data-theme^='hc'] .sol-door > sol-sigil.sol-door-ghost { display: none; }

	/* --- the bar --- */
	.sol-bar {
		position: sticky;
		top: 0;
		z-index: 30;
		display: flex;
		align-items: center;
		gap: var(--sol-space-3);
		height: 4rem;
		padding: 0 clamp(1rem, 4vw, 2.5rem);
		background: color-mix(in oklab, var(--sol-canvas) 86%, transparent);
		backdrop-filter: saturate(1.4) blur(14px);
	}
	.sol-bar-brand { display: inline-flex; align-items: center; gap: var(--sol-space-3); color: var(--sol-text); text-decoration: none; font-size: var(--sol-text-lg); line-height: 1; }
	.sol-bar-brand b { font-weight: var(--sol-weight-semibold); }
	.sol-bar-brand span { color: var(--sol-text-muted); }
	.sol-bar-nav { display: flex; align-items: stretch; height: 100%; margin-left: var(--sol-space-7); }
	.sol-bar-nav a { position: relative; display: inline-flex; align-items: center; gap: var(--sol-space-2); padding: 0 var(--sol-space-3); color: var(--sol-text-muted); font-weight: var(--sol-weight-medium); text-decoration: none; white-space: nowrap; }
	.sol-bar-nav a:hover { color: var(--sol-text); }
	.sol-bar-nav a:focus-visible { outline: 2px solid var(--sol-focus-ring); outline-offset: -6px; border-radius: var(--sol-radius-md); }
	.sol-bar-nav a[aria-current='page'] { color: var(--sol-text); }
	.sol-bar-nav a[aria-current='page']::after { content: ''; position: absolute; left: var(--sol-space-3); right: var(--sol-space-3); bottom: 0.875rem; height: 3px; border-radius: 3px; background: var(--sol-accent); }
	.sol-bar-nav sol-icon { display: none; width: 1.25rem; height: 1.25rem; }
	/* a product of apps: each place with its sigil, in its colour (data-tone on the link) */
	.sol-bar-nav sol-sigil { --_s: 1.125rem; }
	.sol-bar-nav .sol-count { position: static; }
	.sol-bar .sol-spacer { flex: 1; }
	.sol-bar-main { width: min(var(--sol-bar-width, 76rem), 100% - 2 * clamp(1rem, 4vw, 2.5rem)); margin: 0 auto; padding: var(--sol-space-7) 0 var(--sol-space-11); }
	/* a phone: the places go to the bottom, as tabs with their icon */
	@media (max-width: 40rem) {
		/* a backdrop filter would hold the fixed tabs inside the bar */
		.sol-bar { backdrop-filter: none; background: var(--sol-canvas); }
		.sol-doors, .sol-doors.small { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sol-space-3); }
		.sol-doors .sol-door { min-height: 0; padding: var(--sol-space-4) var(--sol-space-4) var(--sol-space-3); }
		.sol-doors .sol-door > sol-sigil:not(.sol-door-ghost) { --_s: 2.5rem; }
		.sol-doors .sol-door-name { font-size: var(--sol-text-lg); }
		.sol-doors .sol-door-about { display: none; }
		.sol-door.wide { flex-direction: column; align-items: flex-start; padding: var(--sol-space-6); }
		.sol-needs { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * clamp(1rem, 4vw, 2.5rem)); padding-inline: clamp(1rem, 4vw, 2.5rem); scrollbar-width: none; }
		.sol-needs a { white-space: nowrap; }
		.sol-bar-nav { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; height: calc(3.75rem + env(safe-area-inset-bottom)); margin: 0; padding-bottom: env(safe-area-inset-bottom); justify-content: space-around; background: var(--sol-layer-2); border-top: 1px solid var(--sol-divider); }
		.sol-bar-nav a { flex: 1; flex-direction: column; justify-content: center; gap: 2px; padding: 0; font-size: var(--sol-text-xs); }
		.sol-bar-nav sol-icon { display: block; }
		.sol-bar-nav sol-sigil { --_s: 1.375rem; }
		.sol-bar-nav a[aria-current='page']::after { top: 0; bottom: auto; left: 30%; right: 30%; }
		.sol-bar-nav .sol-count { position: absolute; top: 0.375rem; left: calc(50% + 0.5rem); right: auto; }
		.sol-bar-main { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
		/* one place is no choice: no tabs, the brand leads home */
		.sol-bar-nav:not(:has(> a + a)) { display: none; }
		.sol-bar:has(> .sol-bar-nav:not(:has(> a + a))) ~ .sol-bar-main { padding-bottom: var(--sol-space-11); }
	}

	/* --- what needs the person, in a line of small links --- */
	.sol-needs { display: flex; flex-wrap: wrap; gap: var(--sol-space-3); margin: 0; padding: 0; list-style: none; }
	.sol-needs a { display: inline-flex; align-items: center; gap: var(--sol-space-3); padding: var(--sol-space-3) var(--sol-space-4); border: 1px solid var(--sol-border); border-radius: var(--sol-radius-md); background: var(--sol-layer-1); color: var(--sol-text); font-size: var(--sol-text-sm); text-decoration: none; transition: background var(--sol-duration-fast) var(--sol-ease), border-color var(--sol-duration-fast) var(--sol-ease); }
	.sol-needs a:hover { background: var(--sol-layer-hover); border-color: var(--sol-border-hover); }
	.sol-needs a:focus-visible { outline: 2px solid var(--sol-focus-ring); outline-offset: 2px; }
	.sol-needs b { font-weight: var(--sol-weight-semibold); }
	.sol-needs sol-icon { width: 1rem; height: 1rem; color: var(--sol-accent-subtle-text); }
}