/* service/base.css */
/* Reset */

body {
  margin: 0;
  font-synthesis: none;
}

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

  &:focus:not(:focus-visible) {
    outline: none;
  }
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

img {
  display: block;
  width: 100%;
}

/* Fonts */

@font-face {
  font-family: "CoFo Gothic";
  src:
    url("fonts/CoFoGothic-Medium.woff2") format("woff2"),
    url("fonts/CoFoGothic-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CoFo Gothic";
  src:
    url("fonts/CoFoGothic-Bold.woff2") format("woff2"),
    url("fonts/CoFoGothic-Bold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CoFo Sans Semi Mono";
  src:
    url("fonts/CoFoSansSemi-Mono-Regular.woff2") format("woff2"),
    url("fonts/CoFoSansSemi-Mono-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CoFo Sans Semi Mono";
  src:
    url("fonts/CoFoSansSemi-Mono-Bold.woff2") format("woff2"),
    url("fonts/CoFoSansSemi-Mono-Bold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CoFo Sans Mono";
  src:
    url("fonts/CoFoSansMono-Regular.woff2") format("woff2"),
    url("fonts/CoFoSansMono-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
}

@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  src: url("fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype");
}

/* Base */

:root {
  font-size: 118%;

  @media (width < 768px) {
    font-size: 100%;
  }
}

body {
  font-family: var(--m__font-family-sans);
  -webkit-font-smoothing: antialiased;
  font-weight: var(--m__font-weight-regular);
  line-height: var(--m__line-height-base);
  color: var(--m__text);
  background-color: var(--m__bg);
}

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


/* service/scrollbar.css */
body {
  scrollbar-width: thin;
  scrollbar-color: var(--m__text) transparent;
}

@media (hover: hover) and (pointer: fine) {
  body::-webkit-scrollbar,
  body ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  body::-webkit-scrollbar-track,
  body ::-webkit-scrollbar-track {
    background: transparent;
  }

  body::-webkit-scrollbar-thumb,
  body ::-webkit-scrollbar-thumb {
    background-color: var(--m__text);
    border-radius: var(--m__radius-pill);
  }

  body::-webkit-scrollbar-corner,
  body ::-webkit-scrollbar-corner {
    background: transparent;
  }
}


/* tokens/palette.css */
/* Palette — raw color values, theme-independent.
   These are the source of truth for color. Semantic tokens in colors.css
   reference these and never inline a raw rgb() value.

   Scale convention: Tailwind 50 (lightest) … 950 (darkest). */

:root {
  /* ===== Neutrals (cool grays) ===== */
  --m__color-white: rgb(255, 255, 255);
  --m__color-gray-50: rgb(242, 242, 246);
  --m__color-gray-75: rgb(231, 231, 238);
  --m__color-gray-100: rgb(220, 220, 230);
  --m__color-gray-200: rgb(198, 198, 210);
  --m__color-gray-300: rgb(176, 176, 190);
  --m__color-gray-400: rgb(153, 153, 170);
  --m__color-gray-500: rgb(126, 126, 144);
  --m__color-gray-600: rgb(97, 97, 118);
  --m__color-gray-700: rgb(68, 68, 86);
  --m__color-gray-800: rgb(45, 45, 60);
  --m__color-gray-900: rgb(30, 30, 40);
  --m__color-gray-950: rgb(20, 20, 25);

  /* ===== Blue (brand) ===== */
  --m__color-blue-500: rgb(40, 95, 235);
  --m__color-blue-600: rgb(37, 80, 209);
  --m__color-blue-700: rgb(34, 65, 184);
  --m__color-blue-800: rgb(30, 50, 160);

  /* ===== Azure (emotion: low-energy / negative) ===== */
  --m__color-azure-400: rgb(110, 140, 190);
  --m__color-azure-500: rgb(72, 131, 195);
  --m__color-azure-600: rgb(0, 120, 200);

  /* ===== Purple ===== */
  --m__color-purple-200: rgb(220, 208, 255);
  --m__color-purple-300: rgb(185, 163, 252);
  --m__color-purple-400: rgb(152, 116, 246);
  --m__color-purple-500: rgb(124, 58, 237);

  /* ===== Orange (coral) ===== */
  --m__color-orange-300: rgb(255, 150, 110);
  --m__color-orange-400: rgb(255, 120, 80);
  --m__color-orange-500: rgb(253, 85, 45);

  /* ===== Red ===== */
  --m__color-red-400: rgb(255, 90, 113);
  --m__color-red-500: rgb(238, 64, 86);
  --m__color-red-600: rgb(220, 30, 58);

  /* ===== Green ===== */
  --m__color-green-400: rgb(100, 225, 140);
  --m__color-green-500: rgb(74, 185, 108);
  --m__color-green-600: rgb(48, 147, 77);
  --m__color-green-800: rgb(20, 110, 47);

  /* ===== Yellow ===== */
  --m__color-yellow-500: rgb(255, 200, 0);

  /* ===== Misc accents (emotion-only) ===== */
  --m__color-pink-600: rgb(200, 80, 160);
  --m__color-slate-300: rgb(180, 180, 220);
  --m__color-slate-500: rgb(118, 119, 156);
  --m__color-slate-700: rgb(62, 63, 97);
  --m__color-slate-900: rgb(20, 20, 50);
}


/* tokens/colors.css */
/* Semantic colors — every value points at the palette.
   Theme switching happens here, not in the palette. */

:root,
.light,
.light-mode {
  /* TEXT */
  --m__text: var(--m__color-gray-800);
  --m__text-caption: var(--m__color-gray-400);
  --m__text-accent: var(--m__color-slate-900);
  --m__text-inverted: var(--m__color-gray-50);
  --m__text-link: var(--m__color-slate-700);
  --m__text-link-hover: var(--m__color-blue-500);
  --m__text-link-pressed: var(--m__color-blue-700);
  --m__text-code: var(--m__color-gray-500);
  --m__text-code-accent: var(--m__color-purple-500);

  /* SURFACE */
  --m__bg: var(--m__color-white);
  --m__bg-surface: var(--m__color-gray-50);
  --m__bg-input: var(--m__bg-surface);
  --m__bg-accent: var(--m__color-slate-900);
  --m__bg-accent-hover: var(--m__color-blue-600);
  --m__bg-accent-pressed: var(--m__color-blue-800);
  --m__bg-highlight: var(--m__color-yellow-500);

  /* BORDER */
  --m__border: var(--m__color-gray-100);

  /* FEEDBACK */
  --m__error: var(--m__color-red-500);
  --m__error-hover: var(--m__color-red-600);
  --m__success: var(--m__color-green-600);
  --m__success-hover: var(--m__color-green-800);

  /* CHARTS */
  --m__chart-default: var(--m__color-slate-900);
  --m__chart-model-1: var(--m__color-purple-500);
  --m__chart-model-2: var(--m__color-purple-400);
  --m__chart-model-3: var(--m__color-purple-300);
  --m__chart-status-success: var(--m__color-green-500);
  --m__chart-status-server-error: var(--m__color-red-500);
  --m__chart-status-client-error: var(--m__color-orange-400);
  --m__chart-status-processing: var(--m__text-caption);
}

.dark,
.dark-mode,
.dark-vibrant {
  /* TEXT */
  --m__text: var(--m__color-gray-300);
  --m__text-caption: var(--m__color-gray-500);
  --m__text-accent: var(--m__color-gray-300);
  --m__text-inverted: var(--m__color-gray-950);
  --m__text-link: var(--m__text);
  --m__text-link-hover: var(--m__color-white);
  --m__text-link-pressed: var(--m__color-gray-200);
  --m__text-code: var(--m__text-caption);
  --m__text-code-accent: var(--m__color-purple-400);

  /* SURFACE */
  --m__bg: var(--m__color-gray-950);
  --m__bg-surface: var(--m__color-gray-900);
  --m__bg-input: var(--m__color-gray-700);
  --m__bg-accent: var(--m__color-gray-200);
  --m__bg-accent-hover: var(--m__color-gray-400);
  --m__bg-accent-pressed: var(--m__color-gray-600);
  --m__bg-highlight: var(--m__color-yellow-500);

  /* BORDER */
  --m__border: var(--m__color-gray-700);

  /* FEEDBACK */
  --m__error: var(--m__color-red-500);
  --m__error-hover: var(--m__color-red-400);
  --m__success: var(--m__color-green-500);
  --m__success-hover: var(--m__color-green-400);

  /* CHARTS */
  --m__chart-default: var(--m__color-slate-300);
  --m__chart-model-1: var(--m__color-purple-400);
  --m__chart-model-2: var(--m__color-purple-300);
  --m__chart-model-3: var(--m__color-purple-200);
  --m__chart-status-success: var(--m__color-green-400);
  --m__chart-status-server-error: var(--m__color-red-400);
  --m__chart-status-client-error: var(--m__color-orange-300);
  --m__chart-status-processing: var(--m__text-caption);
}

.dark-vibrant {
  --m__bg: var(--m__color-slate-900);
  --m__bg-surface: var(--m__color-gray-900);
  --m__text: var(--m__color-gray-300);
  --m__text-link: var(--m__color-gray-300);
}

:root {
  /* Emotion group colors - base values */
  --emotion-attack-rejection-group: var(--m__color-red-500);
  --emotion-threat-uncertainty-group: var(--m__color-pink-600);
  --emotion-excited-engaged-group: var(--m__color-orange-400);
  --emotion-low-energy-negative-group: var(--m__color-azure-600);
  --emotion-calm-grounded-group: var(--m__color-azure-400);
  --emotion-neutral-group: var(--m__color-gray-600);

  /* Individual emotion variables - map to group variables */
  /* attack / rejection */
  --emotion-angry: var(--emotion-attack-rejection-group);
  --emotion-contemptuous: var(--emotion-attack-rejection-group);
  --emotion-disgusted: var(--emotion-attack-rejection-group);

  /* threat / uncertainty */
  --emotion-afraid: var(--emotion-threat-uncertainty-group);
  --emotion-anxious: var(--emotion-threat-uncertainty-group);
  --emotion-stressed: var(--emotion-threat-uncertainty-group);
  --emotion-surprised: var(--emotion-threat-uncertainty-group);
  --emotion-ashamed: var(--emotion-threat-uncertainty-group);
  --emotion-frustrated: var(--emotion-threat-uncertainty-group);
  --emotion-fear: var(--emotion-threat-uncertainty-group);

  /* excited / engaged */
  --emotion-affectionate: var(--emotion-excited-engaged-group);
  --emotion-amused: var(--emotion-excited-engaged-group);
  --emotion-excited: var(--emotion-excited-engaged-group);
  --emotion-happy: var(--emotion-excited-engaged-group);
  --emotion-hopeful: var(--emotion-excited-engaged-group);
  --emotion-proud: var(--emotion-excited-engaged-group);
  --emotion-relieved: var(--emotion-excited-engaged-group);
  --emotion-curious: var(--emotion-excited-engaged-group);

  /* low energy, negative */
  --emotion-disappointed: var(--emotion-low-energy-negative-group);
  --emotion-bored: var(--emotion-low-energy-negative-group);
  --emotion-tired: var(--emotion-low-energy-negative-group);
  --emotion-concerned: var(--emotion-low-energy-negative-group);
  --emotion-confused: var(--emotion-low-energy-negative-group);
  --emotion-sad: var(--emotion-low-energy-negative-group);

  /* calm / grounded */
  --emotion-calm: var(--emotion-calm-grounded-group);
  --emotion-confident: var(--emotion-calm-grounded-group);
  --emotion-interested: var(--emotion-calm-grounded-group);

  /* no strong signal */
  --emotion-neutral: var(--emotion-neutral-group);
  --emotion-unknown: var(--emotion-neutral-group);
}


/* tokens/gap.css */
:root {
  --m__gap-xxxxs: 0.2rem;
  --m__gap-xxxs: 0.3rem;
  --m__gap-xxs: 0.4rem;
  --m__gap-xs: 0.5rem;
  --m__gap-s: 0.7rem;
  --m__gap-m: 0.75rem;
  --m__gap-l: 0.9rem;
  --m__gap-xl: 1rem;
  --m__gap-xxl: 1.2rem;
  --m__gap-xxxl: 2.4rem;
  --m__gap-xxxxl: 4.8rem;

  /* Component-specific gaps (internal spacing tuned per component). */
  --m__gap-nav: 0.1rem;
  --m__gap-nav-menu-item: 0.35rem;
  --m__gap-checkbox: 0.4rem;
  --m__gap-tag-group: 0.4rem;
  --m__gap-toggle: 0.5rem;
  --m__gap-popover-item: 0.5rem;
  --m__gap-modal: 0.5rem;
  --m__gap-table-toolbar: 0.5rem;
  --m__gap-table-filters: 0.4rem;
  --m__gap-table-empty: 0.75rem;
}

@media (width < 767px) {
  :root {
    --m__gap-xxxs: 0.2rem;
    --m__gap-xxs: 0.3rem;
    --m__gap-xs: 0.35rem;
    --m__gap-s: 0.5rem;
    --m__gap-m: 0.55rem;
    --m__gap-l: 0.6rem;
    --m__gap-xl: 0.7rem;
    --m__gap-xxl: 0.8rem;
    --m__gap-xxxl: 1.6rem;
    --m__gap-xxxxl: 3.2rem;

    --m__gap-checkbox: 0.3rem;
    --m__gap-tag-group: 0.3rem;
    --m__gap-toggle: 0.35rem;
    --m__gap-popover-item: 0.35rem;
    --m__gap-modal: 0.35rem;
    --m__gap-table-toolbar: 0.35rem;
    --m__gap-table-filters: 0.3rem;
    --m__gap-table-empty: 0.55rem;
  }
}


/* tokens/spacers.css */
:root {
  --m__spacer-xxs: 0.3rem;
  --m__spacer-xs: 0.7rem;
  --m__spacer-s: 0.9rem;
  --m__spacer-m: 1.2rem;
  --m__spacer-l: 2.4rem;
  --m__spacer-xl: 4.8rem;

  --m__default-margin-bottom: 0.5rem;
}

@media (width < 767px) {
  :root {
    --m__spacer-xxs: 0.2rem;
    --m__spacer-xs: 0.5rem;
    --m__spacer-s: 0.6rem;
    --m__spacer-m: 0.8rem;
    --m__spacer-l: 1.6rem;
    --m__spacer-xl: 3.2rem;
  }
}


/* tokens/typography.css */
:root {
  --m__font-size-xs: 0.65rem;
  --m__font-size-s: 0.8rem;
  --m__font-size-m: 1rem;
  --m__font-size-smaller: 0.9em;
  --m__font-size-l: 1.15rem;
  --m__font-size-xl: 1.25rem;
  --m__font-size-xxl: 1.4rem;
  --m__font-size-xxxl: 2rem;
  --m__font-size-xxxxl: 2.6rem;
  --m__font-size-display: 4.5rem;

  --m__font-weight-regular: 400;
  --m__font-weight-medium: 500;
  --m__font-weight-bold: 600;
  --m__font-weight-heavy: 700;

  --m__line-height-base: 1.3;

  --m__font-family-sans: "Inter", sans-serif;
  --m__font-family-gothic: "CoFo Gothic", sans-serif;
  --m__font-family-semi-mono: "CoFo Sans Semi Mono", monospace;
  --m__font-family-mono: "CoFo Sans Mono", monospace;
}


/* tokens/layout.css */
:root {
  --m__border-width-s: 1px;
  --m__border-width-m: 2px;
  --m__border-width-l: 3px;
  --m__border-width-xl: 4px;

  --m__radius-xs: 0.15rem;
  --m__radius-s: 0.3rem;
  --m__radius-m: 0.4rem;
  --m__radius-l: 0.5rem;
  --m__radius-xl: 0.75rem;
  --m__radius-pill: 9999px;

  /* Corner radius used by .m__rounded (squircle).
     Lives outside the radius scale because it's in em, scoped to one component. */
  --m__rounded-radius: 1.5em;

  --m__widget-radius: var(--m__radius-xl);
  --m__widget-padding: 1rem;

  --m__modal-padding: 1rem;
}


/* tokens/padding.css */
:root {
  /* Component internal padding (block + inline). */
  --m__padding-control-xs: 0.15rem 0.45rem;
  --m__padding-button-s:  0.3rem 0.7rem;
  --m__padding-button-m:  0.5rem 1rem;
  --m__padding-input-s: 0.3rem 0.5rem;
  --m__padding-input-m: 0.5rem 0.65rem;

  /* Nav menu item padding (asymmetric: extra inline-end room past the label).
     Full shorthands so each variant is self-contained and applies as a single
     `padding:` declaration. Caption rows are tighter block-wise; the first
     caption row gets extra top room. Inline values stay constant across all. */
  --m__padding-nav-menu-item:           0.45rem 1.25rem 0.45rem 0.75rem;
  --m__padding-nav-menu-caption:        0.22rem 1.25rem 0.22rem 0.75rem;
  --m__padding-nav-menu-caption-first:  0.42rem 1.25rem 0.22rem 0.75rem;
}


/* tokens/animations.css */
:root {
  --m__duration-instant: 0s;
  --m__duration-fast: 0.15s;
  --m__duration-medium: 0.2s;
  --m__duration-base: 0.3s;
  --m__duration-slow: 0.35s;
  --m__duration-xslow: 0.5s;
  --m__easing-base: ease;
}


/* components/text.css */
p {
  margin: 0 0 var(--m__default-margin-bottom);
}

strong,
b {
  font-weight: var(--m__font-weight-bold);
}

a {
  color: var(--m__text-link);
  text-decoration: underline;
  will-change: color;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-skip-ink: none;
  text-decoration-color: color-mix(
    in srgb,
    var(--m__text-link) 20%,
    transparent
  );
  transition:
    color var(--m__duration-base) var(--m__easing-base),
    text-decoration-color var(--m__duration-base)
      var(--m__easing-base);

  &:hover {
    color: var(--m__text-link-hover);
    text-decoration-color: color-mix(
      in srgb,
      var(--m__text-link-hover) 20%,
      transparent
    );
    transition-duration:
      var(--m__duration-instant), var(--m__duration-instant);
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--m__default-margin-bottom);
  font-weight: var(--m__font-weight-bold);
  line-height: var(--m__line-height-base);
}

h1 {
  font-size: var(--m__font-size-xxxl);
}

h1.loud {
  font-size: var(--m__font-size-display);
  font-family: var(--m__font-family-gothic);
  font-weight: var(--m__font-weight-bold);
  color: var(--m__text);
  line-height: 1;

  @media (width < 767px) {
    font-size: calc(var(--m__font-size-display) - var(--m__font-size-xl));
  }
}

p.loud {
  font-size: var(--m__font-size-xl);
  line-height: 1.4;
}

h2 {
  font-size: var(--m__font-size-xxl);
}

h2.loud {
  font-size: var(--m__font-size-xxxxl);
  font-family: var(--m__font-family-gothic);
  font-weight: var(--m__font-weight-medium);
  color: var(--m__text);
  line-height: 1;
  margin-bottom: var(--m__spacer-s);

  @media (width < 767px) {
    font-size: var(--m__font-size-xxxl);
  }
}

h3 {
  font-size: var(--m__font-size-l);
}

h4 {
  font-size: var(--m__font-size-m);
}

h5 {
  font-size: var(--m__font-size-m);
}

h6 {
  font-size: var(--m__font-size-s);
  text-transform: uppercase;
}

code,
.m__inline-code {
  font-family: var(--m__font-family-semi-mono);
  font-size: var(--m__font-size-smaller);
  font-weight: var(--m__font-weight-regular);
  padding: 0.1em 0.25em;
  border-radius: 0.2rem;
  color: var(--m__text-code);
  border: var(--m__border-width-s) solid color-mix(in srgb, var(--m__text-code) 10%, transparent);
  background: color-mix(in srgb, var(--m__text-code) 10%, transparent);

  &.accent {
    color: var(--m__text-code-accent);
    border-color: color-mix(
      in srgb,
      var(--m__text-code-accent) 10%,
      transparent
    );
    background: color-mix(
      in srgb,
      var(--m__text-code-accent) 10%,
      transparent
    );
  }
}

ul,
ol {
  margin: 0 0 var(--m__default-margin-bottom) 0;
  padding: 0;

  & li {
    position: relative;
    margin-bottom: var(--m__default-margin-bottom);
  }
}

ol {
  & li {
    list-style: decimal inside none;
  }
}

ul {
  & li {
    list-style-type: none;
    padding-left: 0.8rem;
    margin-bottom: var(--m__default-margin-bottom);

    &:before {
      position: absolute;
      left: 0;
      content: "⋅ ";
    }
  }
}

pre {
  background-color: var(--m__bg-surface);
  border-radius: var(--m__radius-s);
  padding: 0.5rem 0.7rem;
  overflow-x: auto;
  margin-top: 0;
  margin-bottom: var(--m__default-margin-bottom);

  & code {
    font-family: var(--m__font-family-mono);
    font-size: var(--m__font-size-smaller);
    line-height: 1.6;
    background: none;
    border: none;
    padding: 0;
    color: inherit;
  }
}

.muted {
  color: var(--m__text-caption);
}

.caption {
  font-size: var(--m__font-size-s);
  color: var(--m__text-caption);

  & a {
    color: inherit;
    text-decoration: underline;
    will-change: color;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-skip-ink: none;
    text-decoration-color: color-mix(
      in srgb,
      var(--m__text-caption) 20%,
      transparent
    );
    transition:
      color var(--m__duration-base) var(--m__easing-base),
      text-decoration-color var(--m__duration-base)
        var(--m__easing-base);

    &:hover {
      color: var(--m__text-link-hover);
      text-decoration-color: color-mix(
        in srgb,
        var(--m__text-link-hover) 20%,
        transparent
      );
      transition-duration:
        var(--m__duration-instant), var(--m__duration-instant);
    }
  }
}


/* components/button.css */
:root {
  --m__button-icon-size: 1lh;
}

:is(
  a.m__button-primary,
  button.m__button-primary,
  a.m__button-secondary,
  button.m__button-secondary,
  a.m__button-primary-outline,
  button.m__button-primary-outline,
  a.m__button-secondary-outline,
  button.m__button-secondary-outline,
  a.m__button-danger-outline,
  button.m__button-danger-outline,
  a.m__button-success-outline,
  button.m__button-success-outline,
  a.m__menu-button-primary,
  button.m__menu-button-primary,
  a.m__menu-button-secondary,
  button.m__menu-button-secondary,
  button.m__button-icon
) {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--m__gap-xxxs);
  border-radius: var(--m__radius-m);
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:is(
  a.m__button-primary,
  button.m__button-primary,
  a.m__button-secondary,
  button.m__button-secondary,
  a.m__button-primary-outline,
  button.m__button-primary-outline,
  a.m__button-secondary-outline,
  button.m__button-secondary-outline,
  a.m__button-danger-outline,
  button.m__button-danger-outline,
  a.m__button-success-outline,
  button.m__button-success-outline,
  a.m__menu-button-primary,
  button.m__menu-button-primary,
  a.m__menu-button-secondary,
  button.m__menu-button-secondary
) {
  padding: var(--m__padding-button-m);
  border-radius: var(--m__radius-m);

  &.XS {
    padding: var(--m__padding-control-xs);
    border-radius: var(--m__radius-xs);
  }

  &.S {
    padding: var(--m__padding-button-s);
    border-radius: var(--m__radius-s);
  }

  &.M {
    padding: var(--m__padding-button-m);
    border-radius: var(--m__radius-m);
  }
}

.m__button__icon {
  display: block;
  position: relative;
  width: var(--m__button-icon-size);
  height: var(--m__button-icon-size);
  flex-shrink: 0;
  overflow: hidden;
  align-self: end;
}

:is(
  a.m__button-primary,
  button.m__button-primary
) {
  background-color: var(--m__bg-accent);
  color: var(--m__text-inverted);
  border: none;
  transition: background-color var(--m__duration-base) var(--m__easing-base);

  &:hover {
    background-color: var(--m__text-link-hover);
    color: var(--m__text-inverted);
    transition-duration: var(--m__duration-instant);
  }
}

:is(
  button.m__button-primary
):active {
  background-color: var(--m__bg-accent-pressed);
  transition-duration: var(--m__duration-instant);
}

:is(
  a.m__button-secondary,
  button.m__button-secondary
) {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
  color: var(--m__text);
  border: none;
  transition:
    background-color var(--m__duration-base) var(--m__easing-base),
    color var(--m__duration-base) var(--m__easing-base);

  &:hover {
    background-color: color-mix(in srgb, currentColor 15%, transparent);
    color: var(--m__text-link-hover);
    transition-duration: var(--m__duration-instant);
  }
}

:is(
  button.m__button-secondary
):active {
  background-color: color-mix(in srgb, currentColor 8%, transparent);
  color: var(--m__text-link-pressed);
  transition-duration: var(--m__duration-instant);
}

:is(
  a.m__button-primary-outline,
  button.m__button-primary-outline,
  a.m__menu-button-primary,
  button.m__menu-button-primary
) {
  background-color: transparent;
  color: var(--m__text);
  border: var(--m__border-width-m) solid var(--m__bg-accent);
  font-weight: var(--m__font-weight-medium);
  transition:
    color var(--m__duration-base) var(--m__easing-base),
    border-color var(--m__duration-base) var(--m__easing-base);

  &:hover {
    color: var(--m__text-link-hover);
    border-color: var(--m__text-link-hover);
    transition-duration: var(--m__duration-instant);
  }
}

:is(
  button.m__button-primary-outline,
  button.m__menu-button-primary
):active {
  color: var(--m__text-link-pressed);
  transition-duration: var(--m__duration-instant);
}

:is(
  a.m__button-secondary-outline,
  button.m__button-secondary-outline,
  a.m__menu-button-secondary,
  button.m__menu-button-secondary
) {
  background-color: transparent;
  color: var(--m__text);
  border: var(--m__border-width-s) solid color-mix(in srgb, currentColor 25%, transparent);
  transition: color var(--m__duration-base) var(--m__easing-base);

  &:hover {
    color: var(--m__text-link-hover);
    transition-duration: var(--m__duration-instant);
  }
}

:is(
  button.m__button-secondary-outline,
  button.m__menu-button-secondary
):active {
  color: var(--m__text-link-pressed);
  transition-duration: var(--m__duration-instant);
}

:is(
  a.m__button-danger-outline,
  button.m__button-danger-outline
) {
  background-color: transparent;
  color: color-mix(in srgb, var(--m__error) 85%, transparent);
  border: var(--m__border-width-s) solid color-mix(in srgb, currentColor 30%, transparent);
  transition:
    color var(--m__duration-base) var(--m__easing-base),
    border-color var(--m__duration-base) var(--m__easing-base);

  &:hover {
    color: var(--m__error-hover);
    transition-duration: var(--m__duration-instant);
  }
}

:is(
  button.m__button-danger-outline
):active {
  background-color: transparent;
  color: color-mix(in srgb, var(--m__error) 80%, transparent);
  transition-duration: var(--m__duration-instant);
}

:is(
  a.m__button-success-outline,
  button.m__button-success-outline
) {
  background-color: transparent;
  color: color-mix(in srgb, var(--m__success) 80%, transparent);
  border: var(--m__border-width-s) solid color-mix(in srgb, currentColor 30%, transparent);
  transition:
    color var(--m__duration-base) var(--m__easing-base),
    border-color var(--m__duration-base) var(--m__easing-base);

  &:hover {
    color: var(--m__success-hover);
    transition-duration: var(--m__duration-instant);
  }
}

:is(
  button.m__button-success-outline
):active {
  color: color-mix(in srgb, var(--m__success) 80%, transparent);
  transition-duration: var(--m__duration-instant);
}

/* Processing buttons keep their container stable while their label breathes.
   Pair aria-busy with disabled so the state is semantic and non-interactive. */
button[aria-busy='true']:disabled {
  opacity: 0.45;
  cursor: wait;

  & > .m__button__label {
    animation: m__button-label-breathe 2s ease-in-out infinite;
  }
}

button.m__button-primary[aria-busy='true']:disabled:is(:hover, :active) {
  background-color: var(--m__bg-accent);
  color: var(--m__text-inverted);
}

@keyframes m__button-label-breathe {
  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  button[aria-busy='true']:disabled > .m__button__label {
    animation: none;
    opacity: 0.65;
  }
}

.m__split-button {
  display: inline-flex;
  align-items: stretch;

  & > :is(button, a):first-of-type {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-width: var(--m__border-width-s);
  }

  & > :is(button, a):last-of-type {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left-width: 0;
  }

  &:has(> :is(button, a):last-of-type:hover) > :is(button, a):first-of-type {
    border-right-color: var(--m__text-link-hover);
  }
}

button.m__button-icon {
  padding: 0.3em;
  border-radius: var(--m__radius-s);
  background-color: transparent;
  color: var(--m__text);
  border: none;
  align-items: center;
  transition:
    background-color var(--m__duration-base) var(--m__easing-base),
    color var(--m__duration-base) var(--m__easing-base);

  & svg {
    display: block;
    width: 0.75rem;
    height: 0.75rem;
  }

  &:hover {
    background-color: color-mix(in srgb, currentColor 10%, transparent);
    color: var(--m__text-link-hover);
    transition-duration: var(--m__duration-instant);
  }

  &:active {
    background-color: color-mix(in srgb, currentColor 8%, transparent);
    color: var(--m__text-link-pressed);
    transition-duration: var(--m__duration-instant);
  }
}


/* components/textfield.css */
.m__textfield {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--m__default-margin-bottom);

  & label {
    font-size: var(--m__font-size-s);
    font-weight: var(--m__font-weight-medium);
    color: var(--m__text);
    margin-block-end: 0.3rem;
  }

  & input,
  & textarea {
    background-color: var(--m__bg-input);
    border: var(--m__border-width-s) solid var(--m__border);
    border-radius: var(--m__radius-s);
    padding: var(--m__padding-input-m);
    color: var(--m__text);
    width: 100%;
    line-height: var(--m__line-height-base);

    &::placeholder {
      color: var(--m__text-caption);
    }

    &:focus-visible {
      outline: 1px solid var(--m__text-link-hover);
      outline-offset: -1px;
      background-color: color-mix(
        in srgb,
        var(--m__bg-accent-hover) 8%,
        transparent
      );
      color: var(--m__text-link-hover);
    }

    &:user-invalid[data-touched],
    /* aria-invalid is for static demos only */
    &[aria-invalid="true"] {
      border-color: var(--m__error);
      color: var(--m__error);
    }

    &:user-invalid[data-touched]:focus-visible,
    &[aria-invalid="true"]:focus-visible {
      outline-color: var(--m__error);
    }

    &:disabled {
      cursor: not-allowed;
      border-color: color-mix(
        in srgb,
        var(--m__border) 40%,
        transparent
      );
      background-color: color-mix(
        in srgb,
        var(--m__bg-input) 40%,
        transparent
      );
      color: var(--m__text-caption);
    }
  }

  & textarea {
    resize: vertical;
    font: inherit;
    min-height: 4.5rem;
  }

  & textarea.m__textarea--autogrow {
    field-sizing: content;
    resize: none;
    overflow-y: auto;
    min-height: calc(3 * 1.3em + 1rem);
    max-height: calc(24 * 1.3em + 1rem);
  }

  & .m__textfield__message {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
      grid-template-rows var(--m__duration-slow) var(--m__easing-base),
      opacity calc(var(--m__duration-slow) / 2) var(--m__easing-base);

    & > span {
      overflow: hidden;
      color: var(--m__error);
      font-size: var(--m__font-size-s);
      padding-top: 0.3rem;
    }
  }

  & input:user-invalid[data-touched] ~ .m__textfield__message,
  & input[aria-invalid="true"] ~ .m__textfield__message {
    grid-template-rows: 1fr;
    opacity: 1;
    transition:
      grid-template-rows var(--m__duration-slow) var(--m__easing-base),
      opacity var(--m__duration-slow) var(--m__easing-base)
        calc(var(--m__duration-slow) / 3);
  }
}

.m__textfield--no-spin input {
  appearance: textfield;
  -moz-appearance: textfield;
}


/* components/checkbox.css */
.m__checkbox-primary,
.m__checkbox-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--m__gap-checkbox);
  cursor: pointer;
  color: var(--m__text);
  position: relative;
  transition: color var(--m__duration-base) var(--m__easing-base);

  &:hover:not(:has(input:disabled)) {
    color: var(--m__text-link-hover);
    transition-duration: var(--m__duration-instant);
  }

  &:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.4;
  }

  & input[type="checkbox"] {
    appearance: none;
    width: 1rem;
    height: 1rem;
    border-radius: var(--m__radius-xs);
    cursor: pointer;
    flex-shrink: 0;
    transition:
      background-color var(--m__duration-base) var(--m__easing-base),
      border-color var(--m__duration-base) var(--m__easing-base);

    &:disabled {
      cursor: not-allowed;
    }
  }

  & > svg {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    padding: 0.1rem;
    color: var(--m__bg);
    pointer-events: none;
    opacity: 0;
  }

  &::after {
    content: "";
    position: absolute;
    left: 0.22rem;
    top: 50%;
    box-sizing: border-box;
    width: 0.6rem;
    height: 0.36rem;
    border-left: 0.125rem solid var(--m__bg);
    border-bottom: 0.125rem solid var(--m__bg);
    transform: translateY(-65%) rotate(-45deg);
    pointer-events: none;
    opacity: 0;
  }

  &:has(input:checked)::after {
    opacity: 1;
  }
}

.m__checkbox-primary {
  & input[type="checkbox"] {
    border: var(--m__border-width-s) solid var(--m__border);

    &:hover:not(:disabled) {
      border-color: var(--m__bg-accent-hover);
      transition-duration: var(--m__duration-instant);

      .dark-mode & {
        border-color: var(--m__text-link-hover);
      }
    }

    &:checked {
      background-color: var(--m__bg-accent);
      border-color: var(--m__bg-accent);

      &:hover:not(:disabled) {
        background-color: var(--m__bg-accent-hover);
        border-color: var(--m__bg-accent-hover);

        .dark-mode & {
          background-color: var(--m__text-link-hover);
          border-color: var(--m__text-link-hover);
        }
      }
    }
  }
}

.m__checkbox-secondary {
  font-weight: var(--m__font-weight-medium);

  & input[type="checkbox"] {
    box-sizing: border-box;
    border: var(--m__border-width-m) solid var(--m__bg-accent);
    background-color: transparent;

    &:hover:not(:disabled) {
      border-color: var(--m__text-link-hover);
      transition-duration: var(--m__duration-instant);
    }

    &:checked {
      background-color: var(--m__bg-accent);

      &:hover:not(:disabled) {
        background-color: var(--m__text-link-hover);
        border-color: var(--m__text-link-hover);
      }
    }
  }
}


/* components/toggle.css */
.m__toggle-primary[hidden],
.m__toggle-secondary[hidden] {
  display: none;
}

.m__toggle-primary,
.m__toggle-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--m__gap-toggle);
  cursor: pointer;
  color: var(--m__text);
  transition: color var(--m__duration-base) var(--m__easing-base);

  &:hover:not(:has(input:disabled)) {
    color: var(--m__text-link-hover);
    transition-duration: var(--m__duration-instant);
  }

  &:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.4;
  }

  & input[type="checkbox"] {
    appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 2rem;
    height: 1.1rem;
    border-radius: var(--m__radius-pill);
    background-color: var(--m__border);
    border: none;
    outline: none;
    cursor: pointer;
    transition: background-color var(--m__duration-base) var(--m__easing-base);

    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 0.15rem;
      transform: translate(0, -50%);
      width: 0.75rem;
      height: 0.75rem;
      border-radius: 50%;
      background-color: var(--m__bg);
      transition:
        transform var(--m__duration-fast) var(--m__easing-base),
        background-color var(--m__duration-base) var(--m__easing-base);
    }

    &:checked {
      background-color: var(--m__bg-accent);

      &::after {
        transform: translate(calc(2rem - 2 * 0.15rem - 0.75rem), -50%);
      }
    }

    &:hover:not(:disabled) {
      background-color: color-mix(in srgb, var(--m__border) 70%, var(--m__text));
      transition-duration: var(--m__duration-instant);

      .dark-mode & {
        background-color: color-mix(in srgb, var(--m__border) 50%, var(--m__text-link-hover));
      }

      &:checked {
        background-color: var(--m__text-link-hover);
      }
    }

    &:disabled {
      cursor: not-allowed;
    }
  }
}

.m__toggle-secondary {
  font-weight: var(--m__font-weight-medium);

  & input[type="checkbox"] {
    box-sizing: border-box;
    border: var(--m__border-width-m) solid var(--m__bg-accent);
    background-color: transparent;
    transition:
      background-color var(--m__duration-base) var(--m__easing-base),
      border-color var(--m__duration-base) var(--m__easing-base);

    &::after {
      box-sizing: border-box;
      width: 0.55rem;
      height: 0.55rem;
      border: var(--m__border-width-s) solid transparent;
      background-color: var(--m__bg-accent);
      transition:
        transform var(--m__duration-fast) var(--m__easing-base),
        background-color var(--m__duration-base) var(--m__easing-base);
    }

    &:checked {
      background-color: var(--m__bg-accent);

      &::after {
        background-color: var(--m__bg);
        border-color: var(--m__bg);
        transform: translate(calc(2rem - 2 * 0.15rem - 0.55rem - 2 * 2px), -50%);
      }

      .dark-mode &::after {
        box-shadow: 0 0 0 var(--m__border-width-s) var(--m__bg);
      }
    }

    &:hover:not(:disabled) {
      background-color: transparent;
      border-color: var(--m__text-link-hover);
      transition-duration: var(--m__duration-instant);

      .dark-mode & {
        background-color: transparent;
      }

      &::after {
        background-color: var(--m__text-link-hover);
        transition-duration:
          var(--m__duration-fast),
          var(--m__duration-instant);
      }

      &:checked {
        background-color: var(--m__text-link-hover);

        &::after {
          background-color: var(--m__bg);
          border-color: var(--m__bg);
        }

        .dark-mode &::after {
          box-shadow: 0 0 0 var(--m__border-width-s) var(--m__bg);
        }
      }
    }
  }
}


/* components/select.css */
.m__select {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  background-color: var(--m__bg-input);
  border: var(--m__border-width-s) solid var(--m__border);
  border-radius: var(--m__radius-s);

  &:has(> label) {
    flex-direction: column;
    align-items: stretch;
    background-color: transparent;
    border: none;
    border-radius: 0;
  }

  & > label {
    font-size: var(--m__font-size-s);
    font-weight: var(--m__font-weight-medium);
    color: var(--m__text);
    margin-block-end: 0.3rem;
    cursor: pointer;
  }

  & .m__select__control {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--m__bg-input);
    border: var(--m__border-width-s) solid var(--m__border);
    border-radius: var(--m__radius-s);

    &:focus-within {
      outline: 1px solid var(--m__text-link-hover);
      outline-offset: -1px;
      background-color: color-mix(
        in srgb,
        var(--m__bg-accent-hover) 8%,
        transparent
      );
    }

    & > svg {
      position: absolute;
      right: 0.75rem;
      top: 50%;
      transform: translateY(-50%);
      width: 0.85em;
      height: 0.85em;
      pointer-events: none;
      color: var(--m__text-caption);
      stroke: currentColor;
      stroke-width: 0.65;
      stroke-linejoin: round;
    }
  }

  & select {
    appearance: none;
    background: none;
    border: none;
    padding: var(--m__padding-input-m);
    padding-inline-end: 2.15rem;
    color: var(--m__text);
    flex: 1;
    cursor: pointer;
    font-size: inherit;
    line-height: var(--m__line-height-base);
    transition: color var(--m__duration-base)
      var(--m__easing-base);

    &:focus-visible {
      outline: none;
    }

    & option {
      background-color: var(--m__bg-surface);
      color: var(--m__text);
    }
  }

  &:is(button) {
    appearance: none;
    justify-content: flex-start;
    padding: var(--m__padding-input-m);
    padding-inline-end: 2.15rem;
    font: inherit;
    color: var(--m__text-caption);
    cursor: pointer;
    text-align: left;
    transition: color var(--m__duration-base)
      var(--m__easing-base);
  }

  &:is(button).has-value {
    color: var(--m__text);
  }

  &:not(:has(> label)):hover select {
    color: var(--m__text-link-hover);
    transition-duration: var(--m__duration-instant);
  }

  &:is(button):hover {
    color: var(--m__text-link-hover);
    transition-duration: var(--m__duration-instant);
  }

  &:not(:has(> label)):hover > svg {
    color: var(--m__text-link-hover);
    transition-duration: var(--m__duration-instant);
  }

  &:not(:has(> label)):focus-within,
  &:not(:has(> label))[aria-expanded="true"] {
    outline: 1px solid var(--m__text-link-hover);
    outline-offset: -1px;
    background-color: color-mix(
      in srgb,
      var(--m__bg-accent-hover) 8%,
      transparent
    );
  }

  &:not(:has(> label))[aria-expanded="true"],
  &:not(:has(> label))[aria-expanded="true"] > svg {
    color: var(--m__text-link-hover);
  }

  & > svg {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.85em;
    height: 0.85em;
    pointer-events: none;
    color: var(--m__text-caption);
    stroke: currentColor;
    stroke-width: 0.65;
    stroke-linejoin: round;
    transition: color var(--m__duration-base)
      var(--m__easing-base);
  }
}

.m__select.S {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: var(--m__bg-input);
  border: var(--m__border-width-s) solid var(--m__border);
  border-radius: var(--m__radius-s);
  padding: var(--m__padding-input-s);
  cursor: pointer;
  position: relative;
  & > span:first-child,
  & > label:first-child {
    white-space: nowrap;
    font-weight: normal;
    font-size: inherit;
    color: var(--m__text-caption);
    cursor: pointer;
    font-weight: var(--m__font-weight-medium);
    transition: color var(--m__duration-base)
      var(--m__easing-base);

    &::after {
      content: ":";
      margin-right: 0.1em;
    }
  }

  &:hover {
    & > span:first-child,
    & > label:first-child {
      color: var(--m__text-link-hover);
      transition-duration: var(--m__duration-instant);
    }

    & .m__select__inline-control .m__select__value {
      color: var(--m__text-link-hover);
      transition-duration: var(--m__duration-instant);
    }

    & .m__select__inline-control > svg {
      color: var(--m__text-link-hover);
      transition-duration: var(--m__duration-instant);
    }
  }

  & input {
    background: none;
    border: none;
    padding: 0;
    border-radius: 0;
    flex: 1;
    min-width: 0;
    color: var(--m__text);
    font-size: inherit;
    line-height: var(--m__line-height-base);

    &::placeholder {
      color: var(--m__text-caption);
    }

    &:focus-visible {
      outline: none;
    }
  }

  &:focus-within {
    outline: 1px solid var(--m__text-link-hover);
    outline-offset: -1px;
    background-color: color-mix(
      in srgb,
      var(--m__bg-accent-hover) 8%,
      transparent
    );
  }

  & .m__select__inline-control {
    position: static;
    background: none;
    border: none;
    border-radius: 0;
    width: auto;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 0.2em;

    &:focus-within {
      outline: none;
      background-color: transparent;
    }

    & .m__select__value {
      flex: 1;
      min-width: 0;
      color: var(--m__text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: color var(--m__duration-base)
        var(--m__easing-base);
    }

    & select {
      appearance: none;
      background: none;
      border: none;
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer;

      & option {
        background-color: var(--m__bg-surface);
        color: var(--m__text);
      }
    }

    & > svg {
      position: static;
      transform: none;
      width: 0.85em;
      height: 0.85em;
      pointer-events: none;
      color: var(--m__text-caption);
      stroke: currentColor;
      stroke-width: 0.65;
      stroke-linejoin: round;
      flex-shrink: 0;
      transition: color var(--m__duration-base)
        var(--m__easing-base);
    }
  }
}


/* components/tag.css */
.m__tag,
.m__tag-flat {
  display: inline-flex;
  align-items: center;
  color: currentColor;
  font-weight: var(--m__font-weight-medium);
  line-height: 1;
  white-space: nowrap;
}

.m__tag {
  padding: var(--m__padding-control-xs);
  border-radius: var(--m__radius-xs);
  font-size: var(--m__font-size-s);
  background-color: transparent;
  border: var(--m__border-width-s) solid color-mix(in srgb, currentColor 25%, transparent);
}

.m__tag-flat {
  font-size: var(--m__font-size-xs);
  padding: 0.2em 0.45em;
  border-radius: var(--m__radius-s);
  background-color: color-mix(in srgb, currentColor 15%, transparent);
  color: var(--m__text-caption);
}

.m__tag--success {
  color: var(--m__success);
}
.m__tag--error {
  color: var(--m__error);
}
.m__tag--muted {
  color: var(--m__text-caption);
}
.m__tag--warning {
  color: var(--m__bg-highlight);
}
.m__tag--secondary {
  color: var(--m__bg-accent-hover);
}

.m__tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m__gap-tag-group);
}


/* components/chip.css */
.m__chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m__gap-xxxs);
}

.m__chip {
  display: inline-flex;
  align-items: center;
  padding: var(--m__padding-control-xs);
  border-radius: var(--m__radius-s);
  font-size: var(--m__font-size-s);
  font-weight: var(--m__font-weight-medium);
  border: var(--m__border-width-s) solid color-mix(in srgb, currentColor 25%, transparent);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  color: var(--m__text);
  transition:
    color var(--m__duration-base) var(--m__easing-base),
    background-color var(--m__duration-base) var(--m__easing-base),
    border-color var(--m__duration-base) var(--m__easing-base);

  & input[type="checkbox"],
  & input[type="radio"] {
    appearance: none;
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
  }

  &:hover {
    color: var(--m__text-link-hover);
    border-color: color-mix(
      in srgb,
      var(--m__text-link-hover) 40%,
      transparent
    );
    transition-duration: var(--m__duration-instant);
  }

  &:has(input:checked) {
    color: var(--m__bg);
    background-color: var(--m__bg-accent);
    border-color: var(--m__bg-accent);

    &:hover {
      background-color: var(--m__text-link-hover);
      border-color: var(--m__text-link-hover);
    }
  }
}


/* components/table.css */
.m__table-wrapper {
  overflow-x: auto;
  overflow-y: clip;
}

.m__table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--m__gap-table-toolbar);
  margin-bottom: 1rem;

  & .m__segmented-control-secondary {
    margin: 0;
  }
}

.m__table-filters {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: var(--m__gap-table-filters);
  align-items: center;
  margin-bottom: 1rem;
  min-width: 0;
  z-index: 10;

  @media (width < 768px) {
    grid-template-columns: 1fr;
  }
}

.m__table-filters__dates {
  display: flex;
  flex-direction: row;
  gap: var(--m__gap-table-filters);
  min-width: 0;

  & > * {
    flex: 1;
    min-width: 0;
  }
}

table {
  width: 100%;
  border-spacing: 0;
  background-color: inherit;

  & td {
    padding: 0.3rem 0.5rem 0.7rem 0;
    text-align: left;
    vertical-align: top;
    border-bottom: var(--m__border-width-s) solid
      color-mix(in srgb, var(--m__text) 12%, transparent);
  }

  & th {
    padding: 0.3rem 0.5rem 0.3rem 0;
    text-align: left;
    vertical-align: top;
    border-bottom: var(--m__border-width-s) solid
      color-mix(in srgb, var(--m__text) 12%, transparent);
    font-size: var(--m__font-size-s);
    color: var(--m__text-caption);
    font-weight: var(--m__font-weight-medium);
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: var(--m__bg);
  }

  & tbody tr:last-child td,
  & tbody tr:last-child th {
    border-bottom: none;
  }

  & .m__table-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--m__gap-table-empty);
    padding-block: 2.5rem;
    text-align: center;
    color: var(--m__text-caption);

    & p {
      margin: 0;
      max-width: 28rem;
    }
  }

  & .m__col-actions {
    text-align: right;
    padding-right: 0;
    width: 1%;
    white-space: nowrap;

    & > div {
      display: flex;
      gap: var(--m__gap-nav-menu-item);
      align-items: center;
      justify-content: flex-end;
    }
  }
}

table.m__table-baseline {
  & td,
  & th {
    vertical-align: baseline;
  }

  & td .m__toggle-primary,
  & th .m__toggle-primary {
    align-items: baseline;

    & input[type="checkbox"] {
      align-self: center;
    }
  }
}

td.m__table-baseline,
th.m__table-baseline {
  vertical-align: baseline;

  & .m__toggle-primary {
    align-items: baseline;

    & input[type="checkbox"] {
      align-self: center;
    }
  }
}


/* components/alert.css */
.m__alert-error,
.m__alert-success {
  border-radius: var(--m__radius-m);
  padding: var(--m__padding-button-m);
}

.m__alert-error {
  background: color-mix(in srgb, var(--m__error) 15%, transparent);
  color: var(--m__error);
}

.m__alert-success {
  background: color-mix(in srgb, var(--m__success) 15%, transparent);
  color: var(--m__success);
}


/* components/loader.css */
.m__loader {
  --m__loader-size: 1.5rem;

  display: block;
  width: var(--m__loader-size);
  height: var(--m__loader-size);
  flex-shrink: 0;
  filter: brightness(0.65);
}

.dark-mode .m__loader {
  filter: brightness(0.75);
}


/* components/tooltip.css */
.m__tooltip {
  position: fixed;
  z-index: 300;
  background-color: var(--m__color-gray-950);
  border-radius: var(--m__radius-s);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--m__color-gray-950) 40%, transparent);
  padding: var(--m__padding-control-xs);
  font-size: var(--m__font-size-xs);
  color: var(--m__color-gray-50);
  width: max-content;
  max-width: 14rem;
  line-height: 1.4;
  pointer-events: none;
  white-space: normal;
  transform: translateX(-50%);
}
.m__tooltip[hidden] {
  display: none;
}
.m__tooltip:not([hidden]) {
  animation: tooltip-show var(--m__duration-fast) var(--m__duration-xslow) both;
}
@keyframes tooltip-show {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* components/code-block.css */
.m__code-block {
  background-color: var(--m__bg-surface);
  border-radius: var(--m__radius-s);
  overflow: hidden;
  margin-bottom: var(--m__default-margin-bottom);

  & .m__code-block__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.6rem;
    border-bottom: var(--m__border-width-s) solid var(--m__border);
    font-size: var(--m__font-size-s);
    color: var(--m__text-caption);
  }

  & pre {
    margin: 0;
    padding: 0.5rem 0.7rem;
    overflow-x: auto;

    & code {
      font-family: var(--m__font-family-mono);
      font-size: var(--m__font-size-smaller);
      line-height: 1.6;
      background: none;
      border: none;
      padding: 0;
      color: inherit;
    }
  }
}


/* components/rounded.css */
.m__rounded {
  border-radius: var(--m__rounded-radius);
  corner-shape: squircle;
  overflow: hidden;
}

@supports not (corner-shape: squircle) {
  .m__rounded {
    border-radius: 0;
    border-radius: initial;
    mask:
      url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="m0,1 c0,-1 0,-1 1,-1 l99,0 l0,100 l-100,0 Z"/></svg>')
        top left / calc(var(--m__rounded-radius) * 100) no-repeat intersect,
      url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="m0,0 l99,0 c1,0 1,0 1,1 l0,99 l-100,0 l0,-100 Z"/></svg>')
        top right / calc(var(--m__rounded-radius) * 100) no-repeat intersect,
      url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="m0,0 l100,0 l0,99 c0,1 -0,1 -1,1 l-99,0 Z"/></svg>')
        bottom right / calc(var(--m__rounded-radius) * 100) no-repeat intersect,
      url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="m0,0 l100,0 l0,100 l-99,0 c-1,0 -1,-0 -1,-1 Z"/></svg>')
        bottom left / calc(var(--m__rounded-radius) * 100) no-repeat intersect;
  }
}


/* components/modal.css */
.m__modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: color-mix(
    in srgb,
    var(--m__bg-accent) 55%,
    transparent
  );
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--m__modal-padding);

  @media (width < 480px) {
    padding: 0;
    align-items: flex-end;

    & .m__modal {
      margin-top: auto;
      margin-bottom: 0;
    }
  }
}

.dark-mode .m__modal-backdrop {
  background-color: color-mix(in srgb, #000 70%, transparent);
}

.m__modal-backdrop[hidden] {
  display: none;
}

.m__modal {
  background-color: var(--m__bg);
  border-radius: var(--m__radius-xl);
  box-shadow: 0 8px 32px color-mix(in srgb, #000 18%, transparent);
  width: 100%;
  max-width: 28rem;
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3rem;

  @media (width < 768px) {
    max-width: 100%;
    border-radius: var(--m__radius-xl) var(--m__radius-xl) 0 0;
    margin: 0;
  }
}

.m__modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--m__modal-padding) var(--m__modal-padding) 0
    var(--m__modal-padding);
  flex-shrink: 0;
}

.m__modal__title {
  font-size: var(--m__font-size-l);
  font-weight: var(--m__font-weight-bold);
  color: var(--m__text);
  margin: 0;
}

.m__modal__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--m__text-caption);
  padding: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--m__radius-s);
  transition: color var(--m__duration-base)
    var(--m__easing-base);
  flex-shrink: 0;
  margin: -0.4rem;

  & svg {
    width: 24px;
    height: 24px;
  }

  &:hover {
    color: var(--m__text);
    transition-duration: var(--m__duration-instant);
  }
}

.m__modal__body {
  padding: var(--m__modal-padding);

  & p {
    margin: 0;
  }

  & .m__textfield,
  & .m__select,
  & .m__datepicker,
  & .m__modal__checklist,
  & .m__modal__field-hint {
    margin-bottom: 0;
  }
}

.m__modal__field-hint {
  font-size: var(--m__font-size-s);
  color: var(--m__text-caption);
  margin-top: -0.25rem;
  margin-bottom: var(--m__default-margin-bottom);
}

.m__textfield + .m__modal__field-hint,
.m__select + .m__modal__field-hint {
  margin-top: 0.3rem;
}

.m__modal__checklist {
  margin-bottom: var(--m__default-margin-bottom);
}

.m__modal__checklist-label {
  font-size: var(--m__font-size-s);
  font-weight: var(--m__font-weight-medium);
  color: var(--m__text);
  margin: 0 0 0.3rem;
}

.m__modal__checklist-box {
  display: flex;
  flex-direction: column;
  gap: var(--m__gap-modal);

  & .m__checkbox-primary {
    font-size: var(--m__font-size-s);
  }
}

.m__modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--m__gap-modal);
  padding: 0 var(--m__modal-padding) var(--m__modal-padding)
    var(--m__modal-padding);
  flex-shrink: 0;
}

.m__modal__notice {
  background: var(--m__bg-surface);
  border-radius: var(--m__radius-xl) var(--m__radius-xl) 0 0;
  padding: var(--m__modal-padding);
  padding-bottom: calc(var(--m__modal-padding) + var(--m__radius-xl));
  font-size: var(--m__font-size-s);
  color: var(--m__text);
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: var(--m__gap-xxl);
  order: -1;

  &[hidden] {
    display: none;
  }

  & p {
    margin: 0;
    flex: 1;
  }

  & button {
    align-self: center;
    flex-shrink: 0;
  }
}

.m__modal:has(.m__modal__notice:not([hidden]))
  .m__modal__footer
  [data-modal-close] {
  display: none;
}

.m__modal:has(.m__modal__notice:not([hidden])) .m__modal__header {
  position: relative;
  z-index: 1;
  background: var(--m__bg);
  border-radius: var(--m__radius-xl) var(--m__radius-xl) 0 0;
  margin-top: calc(-1 * var(--m__radius-xl));
  padding-top: var(--m__modal-padding);
}

:is(
    #modal-behaviors-create,
    #modal-behaviors-edit,
    #modal-behaviors-add,
    #modal-conversation-type-create,
    #modal-conversation-type-edit,
    #modal-role-create,
    #modal-role-edit
  )
  .m__modal {
  max-width: 38rem;
}


/* page-composition/wrappers.css */
.m__wrapper {
  --m__wrapper-pad: 1rem;

  position: relative;
  width: 100%;
  margin: 0 auto;
  max-width: 1050px;
  padding-inline: var(--m__wrapper-pad);

  @media (width < 767px) {
    --m__wrapper-pad: 0.7rem;

    width: 100%;
  }

  & .m__text-width {
    width: 85%;

    @media (width < 767px) {
      width: 100%;
    }
  }

  /* Narrower column for long-form narrative (blog posts). */
  & .narrative-text-width {
    width: 76%;

    @media (width < 767px) {
      width: 100%;
    }
  }

  /* Padding-less variant: content spans the wrapper column edge to edge. */
  &.no-padding {
    padding-inline: 0;
  }

  /* Full-bleed band: outer padding matches `.prototype-header`; inner column matches a plain `.m__wrapper`. */
  &.full-width {
    --m__wrapper-surface-pad: 0.7rem;

    max-width: none;
    margin-inline: 0;
    padding-inline: var(--m__wrapper-pad);
    padding-block: 0;
    box-sizing: border-box;

    & .m__wrapper__surface {
      background-color: var(--m__bg-surface);
      padding-inline: var(--m__wrapper-surface-pad);

      @media (width < 767px) {
        padding-inline: 0;
      }
    }

    & .m__wrapper__inset {
      box-sizing: border-box;
      width: min(1050px, 100%);
      margin-inline: auto;
      padding-inline: var(--m__wrapper-pad);
      padding-block-start: var(--m__spacer-xl);
      padding-block-end: var(--m__spacer-m);

      @media (width < 767px) {
        padding-block: var(--m__wrapper-pad);
      }
    }
  }
}

.m__widget {
  background-color: var(--m__bg-surface);
  border-radius: var(--m__widget-radius);
  padding: var(--m__widget-padding);
  overflow-x: clip;
  --m__widget-header-height: 0px;

  & .m__widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
    border-radius: var(--m__widget-radius) var(--m__widget-radius) 0 0;
    margin: calc(-1 * var(--m__widget-padding));
    margin-bottom: var(--m__widget-padding);
    padding: 0.6rem var(--m__widget-padding);
    background-color: var(--m__bg-surface);
    border-bottom: var(--m__border-width-s) solid var(--m__border);
    font-size: var(--m__font-size-s);
    color: var(--m__text-caption);

    &:has(.m__table-filters),
    &:has(.m__searchbar) {
      box-sizing: border-box;
      min-block-size: 2.6rem;
      padding: 0;
    }

    & .m__table-filters {
      z-index: 10;
      margin-bottom: 0;
      flex: 1;
      display: grid;
      grid-template-columns: 12rem 1fr auto;
      gap: 0;

      & .m__select.S,
      & .m__datepicker.S {
        margin: 0;
      }

      @media (width < 768px) {
        grid-template-columns: 1fr;

        & :is(.m__select.S, .m__datepicker.S)::after {
          display: none;
        }

        & .m__table-filters__dates {
          flex-direction: column;
        }

        &
          :is(
            .m__table-filters__dates,
            .m__table-filters__dates .m__datepicker.S:last-child
          ) {
          background-image: linear-gradient(
            to right,
            transparent var(--m__widget-padding),
            var(--m__border) var(--m__widget-padding),
            var(--m__border) calc(100% - var(--m__widget-padding)),
            transparent calc(100% - var(--m__widget-padding))
          );
          background-size: 100% 1px;
          background-position: top;
          background-repeat: no-repeat;
        }

        & > .m__button-primary.S {
          box-sizing: border-box;
          margin: 0.2rem var(--m__widget-padding) 0.8rem auto;
          width: calc(100% - 2 * var(--m__widget-padding));
          justify-content: center;
        }
      }
    }

    & .m__table-filters__dates {
      display: flex;
      gap: 0;

      & > * {
        flex: 1;
      }
    }

    & .m__select.S .m__select__value {
      flex: 0 1 auto;
    }

    & :is(.m__datepicker.S, .m__select.S) {
      background-color: transparent;
      border: none;
      border-radius: 0;
      padding: 0.55rem var(--m__widget-padding);
      position: relative;

      &:focus-within {
        outline: none;
        background-color: transparent;
      }

      &::after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 40%;
        background-color: var(--m__border);
      }
    }

    & .m__searchbar {
      flex: 1;
      background-color: transparent;
      border: none;
      border-radius: 0;
      padding: 0.55rem var(--m__widget-padding);

      &:hover {
        background-color: transparent;
      }

      &:focus-within {
        outline: none;
        background-color: transparent;
      }
    }

    & .behaviors-toolbar-actions {
      padding: 0.4rem var(--m__widget-padding);
    }

    & .m__table-filters__dates :is(.m__datepicker.S):last-child::after {
      display: none;
    }

    @media (width >= 700px) {
      & .m__table-filters > .m__button-primary.S {
        margin: 0.4rem var(--m__widget-padding) 0.4rem auto;
      }
    }
  }

  & h2 {
    font-size: var(--m__font-size-m);
    font-weight: var(--m__font-weight-bold);
    margin: 0 0 0.4rem 0;
  }

  & .m__widget__value {
    font-size: var(--m__font-size-xxl);
    font-weight: var(--m__font-weight-bold);
    margin: 0;
  }

  & .m__widget__meta-list {
    margin-top: 1rem;
    display: grid;
    gap: var(--m__gap-nav-menu-item);
  }

  & .m__widget__meta-item {
    display: flex;
    justify-content: space-between;
    gap: var(--m__gap-xl);
    margin: 0;
    font-size: var(--m__font-size-s);
  }

  & .m__widget__meta-label {
    color: var(--m__text-caption);
  }

  & .m__widget__meta-value {
    font-weight: var(--m__font-weight-bold);
  }

  & .chart-container {
    position: relative;
    width: 100%;
  }

  & .chart-status-bar {
    margin: 0.4rem 0 0;
    line-height: 1.3;
    min-height: 1.3em;
    font-size: var(--m__font-size-xs);
    color: var(--m__text-caption);
    text-align: center;
  }

  & .chart-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--m__gap-xxxxs) var(--m__gap-m);
    padding-top: 0.65rem;
    font-size: var(--m__font-size-xs);
    color: var(--m__text-caption);

    & .chart-legend-item {
      display: inline-flex;
      align-items: center;
      gap: var(--m__gap-xxxs);
    }

    & .chart-legend-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    & .chart-legend-value {
      font-weight: var(--m__font-weight-bold);
    }

    & .chart-legend-date {
      align-self: center;
    }
  }

  & .m__table-wrapper {
    @media (width >= 768px) {
      overflow: visible;
    }
  }

  th {
    z-index: 1;
    top: 0px;
    background-color: var(--m__bg-surface);
  }

  & table,
  & table th {
    font-size: var(--m__font-size-s);

    & .m__tag {
      font-size: var(--m__font-size-xs);
    }
  }

  &
    :is(
      .m__button-primary,
      .m__button-secondary,
      .m__button-secondary-outline
    ) {
    font-size: var(--m__font-size-s);
  }

  .m__segmented-control-primary label {
    font-size: var(--m__font-size-s);
  }
  button {
    font-size: var(--m__font-size-s);
  }

  table button {
    font-size: var(--m__font-size-s);
  }
}

/* Prose asides: surface panel aligned with .m__widget */
aside {
  margin: 0;
  margin-bottom: 0.65em;
  background-color: var(--m__bg-surface);
  border-radius: var(--m__widget-radius);
  padding: var(--m__widget-padding);
}

.m__widget--danger {
  border: var(--m__border-width-m) solid
    color-mix(in srgb, var(--m__error) 40%, transparent);
  background: none;
  color: var(--m__error);
}


/* page-composition/space.css */
.m__space {
  height: var(--m__spacer-m);

  &.XXS { height: var(--m__spacer-xxs); }
  &.XS { height: var(--m__spacer-xs); }
  &.S { height: var(--m__spacer-s); }
  &.M { height: var(--m__spacer-m); }
  &.L { height: var(--m__spacer-l); }
  &.XL { height: var(--m__spacer-xl); }
}


/* page-composition/sequence.css */
.m__sequence {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
  --gap: 0em;
  gap: var(--gap);

  &.gap-XL {
    --gap: 2em;
    margin-bottom: calc(var(--gap) * 1.5);
  }

  &.gap-L {
    --gap: 1.5em;
    margin-bottom: calc(var(--gap) * 1.5);
  }

  &.gap-M {
    --gap: 1em;
    margin-bottom: calc(var(--gap) * 1.5);
  }

  &.gap-S {
    --gap: 0.5em;
    margin-bottom: calc(var(--gap) * 1.5);
  }

  .m__sequence-item {
    --columns: 4;
    width: calc((100% - var(--gap) * (var(--columns) - 1)) / var(--columns));

    @media (width < 767px) {
      --columns: 2;
    }
  }

  &.XL {
    .m__sequence-item {
      --columns: 2;

      @media (width < 767px) {
        --columns: 1;
      }
    }
  }

  &.L {
    .m__sequence-item {
      --columns: 3;

      @media (width < 767px) {
        --columns: 2;
      }
    }
  }

  &.S {
    .m__sequence-item {
      --columns: 6;

      @media (width < 767px) {
        --columns: 3;
      }
    }
  }
}


/* service/theme-toggle.css */
.theme-toggle {
  appearance: none;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
}

.theme-toggle__track {
  display: flex;
  align-items: center;
  width: 2.05em;
  height: 1em;
  border-radius: var(--m__radius-pill);
  background: linear-gradient(
    90deg,
    var(--m__bg-surface) 0%,
    var(--m__text) 200%
  );
  border: var(--m__border-width-s) solid var(--m__border);
  padding: 0.12em;
}

.theme-toggle__thumb {
  width: 0.68em;
  height: 0.68em;
  border-radius: 50%;
  background-color: var(--m__text);
  transform: translateX(0);
  transition: transform var(--m__duration-medium) var(--m__easing-base);
}

.theme-toggle[aria-checked="true"] .theme-toggle__thumb {
  transform: translateX(1.13em);
}

.theme-toggle[aria-checked="true"] .theme-toggle__track {
  background: linear-gradient(
    90deg,
    var(--m__text) -100%,
    var(--m__bg-surface) 100%
  );
}


/* service/header.css */
.header {
  padding: 0.5em 0 1em;

  & nav {
    font-size: 0.8em;
    font-weight: 480;
    display: flex;
    align-items: baseline;
    gap: 1em;
    flex-wrap: wrap;

    @media (width < 768px) {
      gap: 1em;
    }

    & span.nav-link {
      text-decoration: none;
    }

    & .nav-link {
      display: flex;
      align-items: baseline;
      gap: 0.3em;
    }

    & .nav-spacer {
      flex: 1;
    }
  }
}


/* app.css */
/* App-level styles on top of the design system tokens. */
body { background: var(--m__bg); color: var(--m__text); font-family: var(--m__font-family-sans); }
.nav-link.app-brand { font-weight: 600; }
.app-brand__icon { width: 1.1em; height: 1.1em; align-self: center; }
.nav-spacer { flex: 1; }
.inline-form { display: inline; }
.link-button { background: none; border: none; padding: 0; font: inherit; color: var(--m__text-link); cursor: pointer; }
.link-button:hover { color: var(--m__text-link-hover); }
.m__wrapper.wide { max-width: 1400px; }
.row-between { display: flex; align-items: baseline; justify-content: space-between; gap: var(--m__gap-m); flex-wrap: wrap; }
.ta-right { text-align: right; }
.mono { font-family: var(--m__font-family-mono); font-size: var(--m__font-size-s); }
.ok { color: var(--m__success); }
.warn { color: var(--m__color-orange-500, #e8862a); }
.form-stack { display: flex; flex-direction: column; gap: var(--m__gap-m); max-width: 46rem; }
.form-row { display: flex; gap: var(--m__gap-m); flex-wrap: wrap; align-items: flex-end; }
.form-row > .m__textfield { flex: 1 1 14rem; }
.form-row__button { flex: 0 0 auto; }

/* Login */
.login-card { max-width: 30rem; }

/* Home flow */
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--m__gap-m); }
.flow__step h3 { margin-top: 0.4rem; }
.flow__num { font-family: var(--m__font-family-semi-mono); color: var(--m__text-caption); font-size: var(--m__font-size-s); }
.project-list { display: grid; gap: var(--m__gap-m); }
.project-card { text-decoration: none; color: inherit; display: block; }
.project-card:hover { outline: var(--m__border-width-s) solid var(--m__border); }
.project-card h3 { margin: 0; }
@media (width < 767px) { .flow { grid-template-columns: 1fr; } }

/* Progress */
.progress-bar { height: 0.6rem; border-radius: var(--m__radius-pill); background: var(--m__bg-surface); overflow: hidden; border: var(--m__border-width-s) solid var(--m__border); }
.progress-bar__fill { height: 100%; background: var(--m__bg-accent); transition: width var(--m__duration-base) var(--m__easing-base); }

/* Chat */
.chat-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--m__gap-l); align-items: start; }
.chat { display: flex; flex-direction: column; min-height: calc(100vh - 9rem); }
.chat__messages { display: flex; flex-direction: column; gap: var(--m__gap-xxs); flex: 1; padding-bottom: var(--m__spacer-m); }
.chat__messages--static { min-height: 0; }
.chat-msg { background: var(--m__bg-surface); padding: var(--m__spacer-xs) var(--m__spacer-s); border-radius: 1.35rem; max-width: min(92%, 60rem); }
.chat-msg--assistant { align-self: flex-start; }
.chat-msg--user { align-self: flex-end; background: color-mix(in srgb, var(--m__bg-accent) 12%, var(--m__bg-surface)); white-space: pre-wrap; }
.chat-msg__body > :first-child { margin-top: 0; }
.chat-msg__body > :last-child { margin-bottom: 0; }
.chat-msg__image { max-width: 18rem; border-radius: var(--m__radius-m); margin-bottom: 0.4rem; }
.chat-msg.is-streaming .chat-msg__body::after { content: "▍"; opacity: 0.5; }
.chat__status { padding: 0.4rem 0; color: var(--m__text-caption); font-size: var(--m__font-size-s); }
.chat__status.is-error { color: var(--m__error); }
.chat__form { position: sticky; bottom: 0; background: var(--m__bg); padding: var(--m__spacer-xs) 0 var(--m__spacer-s); }
.chat__row { display: flex; gap: var(--m__gap-xs); align-items: flex-end; }
.chat__field { flex: 1; }
.chat__field textarea { max-height: 14rem; resize: none; }
.chat__attach { cursor: pointer; font-size: 1.4em; line-height: 1; height: 2.35rem; width: 2.35rem; align-items: center; }
.chat__attachments { display: flex; gap: var(--m__gap-xxs); flex-wrap: wrap; padding-bottom: 0.3rem; }
.chat__attachments:empty { display: none; }
.chat-side { position: sticky; top: 1rem; }
.qlist { list-style: none; padding: 0; margin: 0 0 var(--m__spacer-s); display: flex; flex-direction: column; gap: 0.35rem; font-size: var(--m__font-size-s); }
.qlist__item { display: flex; gap: 0.5rem; align-items: flex-start; color: var(--m__text-caption); }
.qlist__mark { flex: 0 0 auto; width: 0.9em; height: 0.9em; margin-top: 0.25em; border-radius: 50%; border: var(--m__border-width-s) solid var(--m__border); }
.qlist__item.is-done { color: var(--m__text); }
.qlist__item.is-done .qlist__mark { background: var(--m__success); border-color: var(--m__success); }
@media (width < 900px) {
  .chat-layout { grid-template-columns: 1fr; }
  .chat-side { position: static; order: -1; }
  .qlist { max-height: 10rem; overflow: auto; }
}

/* Results */
.matrix-wrap { overflow-x: auto; }
.matrix th, .matrix td { min-width: 16rem; }
.matrix .matrix__q { min-width: 14rem; max-width: 20rem; position: sticky; left: 0; background: var(--m__bg); }
.matrix__section { font-family: var(--m__font-family-semi-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--m__font-size-xs); color: var(--m__text-caption); padding-top: 1rem !important; }
.matrix__cell { font-size: var(--m__font-size-s); }
.matrix__quote, .answer blockquote { margin: 0.4rem 0 0; padding-left: 0.6rem; border-left: 2px solid var(--m__border); color: var(--m__text-caption); font-style: italic; }
.answer { padding: 0.6rem 0; border-bottom: var(--m__border-width-s) solid color-mix(in srgb, var(--m__text) 12%, transparent); }