/* ── Design system (mirrored from modulate-design-system, read-only) ── */
/* 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: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ABC Areal";
  src: url("fonts/ABCArealVariable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ABC Areal Semi Mono";
  src: url("fonts/ABCArealSemiMonoVariable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ABC Areal Mono";
  src: url("fonts/ABCArealMonoVariable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* 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;
  }
}

/* Thumb color: on the light theme the text color is too heavy for a scrollbar, so it is
   softened; the dark theme keeps the full text color */
body {
  --m__scrollbar-thumb: color-mix(in srgb, var(--m__text) 30%, transparent);
  scrollbar-width: thin;
  scrollbar-color: var(--m__scrollbar-thumb) transparent;
}

body.dark-mode {
  --m__scrollbar-thumb: var(--m__text);
}

@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__scrollbar-thumb);
    border-radius: var(--m__radius-pill);
  }

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

/* 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: sad) ===== */
  --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-450: rgb(248, 106, 86);
  --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 (rose/pink: emotion accents; slates: dark surfaces) ===== */
  --m__color-rose-400: rgb(228, 99, 130);
  --m__color-rose-600: rgb(219, 68, 124);
  --m__color-pink-500: rgb(209, 91, 162);
  --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);
}

/* 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 colors — one variable per supported emotion (flat, no groups).
     The vocabulary matches the Emotion model: Angry, Disgusted, Afraid,
     Happy, Neutral, Other, Sad, Surprised, Unknown. The warm five
     (angry..happy) form a perceptually balanced scale: red through a cold
     saturated pink at afraid back to deep coral at happy. */
  --emotion-angry: var(--m__color-red-500);
  --emotion-disgusted: var(--m__color-rose-600);
  --emotion-afraid: var(--m__color-pink-500);
  --emotion-surprised: var(--m__color-rose-400);
  --emotion-happy: var(--m__color-orange-450);
  --emotion-sad: var(--m__color-azure-600);
  --emotion-neutral: var(--m__color-gray-600);
  --emotion-other: var(--m__color-gray-600);
  --emotion-unknown: var(--m__color-gray-600);

  /* RGB triplets for rgba() composition. Each must stay in sync with the
     palette token named alongside — CSS can't extract channels from rgb()
     for the targeted browser matrix, hence the literals. */
  --emotion-angry-RGB: 238, 64, 86; /* = --m__color-red-500 */
  --emotion-disgusted-RGB: 219, 68, 124; /* = --m__color-rose-600 */
  --emotion-afraid-RGB: 209, 91, 162; /* = --m__color-pink-500 */
  --emotion-surprised-RGB: 228, 99, 130; /* = --m__color-rose-400 */
  --emotion-happy-RGB: 248, 106, 86; /* = --m__color-orange-450 */
  --emotion-sad-RGB: 0, 120, 200; /* = --m__color-azure-600 */
  --emotion-neutral-RGB: 97, 97, 118; /* = --m__color-gray-600 */
  --emotion-other-RGB: 97, 97, 118; /* = --m__color-gray-600 */
  --emotion-unknown-RGB: 97, 97, 118; /* = --m__color-gray-600 */
}

: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;
  }
}

: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;
  }
}

: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: 700;

  --m__line-height-base: 1.3;

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

: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;
}

: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;
}

: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;
}

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
    );
  }
}

/* A code tag that is a link. At rest it looks like any code tag, without the link underline;
   on hover and press the whole tag takes the link colours. */
a.m__code-link {
  text-decoration: none;

  & > code {
    transition:
      color var(--m__duration-base) var(--m__easing-base),
      border-color var(--m__duration-base) var(--m__easing-base),
      background-color var(--m__duration-base) var(--m__easing-base);
  }

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

  &:active > code {
    color: var(--m__text-link-pressed);
    border-color: color-mix(in srgb, var(--m__text-link-pressed) 30%, transparent);
    background: color-mix(in srgb, var(--m__text-link-pressed) 12%, transparent);
    transition-duration: var(--m__duration-instant);
  }
}

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);
    }
  }
}

: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:not(:disabled) {
    background-color: var(--m__text-link-hover);
    color: var(--m__text-inverted);
    transition-duration: var(--m__duration-instant);
  }
}

:is(
  button.m__button-primary
):active:not(:disabled) {
  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:not(:disabled) {
    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:not(:disabled) {
  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:not(:disabled) {
    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:not(:disabled) {
  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:not(:disabled) {
    color: var(--m__text-link-hover);
    transition-duration: var(--m__duration-instant);
  }
}

:is(
  button.m__button-secondary-outline,
  button.m__menu-button-secondary
):active:not(:disabled) {
  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:not(:disabled) {
    color: var(--m__error-hover);
    transition-duration: var(--m__duration-instant);
  }
}

:is(
  button.m__button-danger-outline
):active:not(:disabled) {
  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:not(:disabled) {
    color: var(--m__success-hover);
    transition-duration: var(--m__duration-instant);
  }
}

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

:is(
  button.m__button-primary,
  button.m__button-secondary,
  button.m__button-primary-outline,
  button.m__button-secondary-outline,
  button.m__button-danger-outline,
  button.m__button-success-outline,
  button.m__menu-button-primary,
  button.m__menu-button-secondary,
  button.m__button-icon
):disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* 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;
  }
}

@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:not(:disabled)) > :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:not(:disabled) {
    background-color: color-mix(in srgb, currentColor 10%, transparent);
    color: var(--m__text-link-hover);
    transition-duration: var(--m__duration-instant);
  }

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

.m__segmented-control-primary {
  display: inline-flex;
  max-width: 100%;
  margin: 0 0 0.75rem;
  padding: 0;
  border: var(--m__border-width-m) solid var(--m__text);
  border-radius: var(--m__radius-s);
  overflow: hidden;

  & label {
    display: block;
    padding: var(--m__padding-button-s);
    font-size: 0.8em;
    font-weight: var(--m__font-weight-medium);
    cursor: pointer;
    color: var(--m__text);
    border-right: var(--m__border-width-s) solid
      color-mix(in srgb, var(--m__text) 20%, transparent);
    min-width: 0;
    transition: var(--m__duration-base)
      var(--m__easing-base);

    &:last-child {
      border-right: none;
    }

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

    &:has(input:checked) {
      background-color: color-mix(
        in srgb,
        var(--m__text-link) 8%,
        transparent
      );
      cursor: default;

      &:hover {
        color: var(--m__text);
        background-color: color-mix(
          in srgb,
          var(--m__text-link) 8%,
          transparent
        );
      }
    }
  }

  & input[type="radio"] {
    display: none;
  }
}

/* Compact variant for dense control panels (studio tools): smaller paddings,
   fixed small type instead of the context-relative 0.8em. */
.m__segmented-control-primary.S label,
.m__segmented-control-secondary.S label {
  padding: 0.25rem 0.6rem;
  font-size: var(--m__font-size-xs);
}

.m__segmented-control-secondary {
  display: inline-flex;
  margin: 0 0 0.75rem;
  padding: 0;
  border: var(--m__border-width-s) solid color-mix(in srgb, currentColor 15%, transparent);
  overflow: hidden;
  border-radius: var(--m__radius-s);

  & label {
    display: block;
    padding: var(--m__padding-button-s);
    font-size: 0.8em;
    font-weight: var(--m__font-weight-medium);
    cursor: pointer;
    color: var(--m__text);
    border-right: var(--m__border-width-s) solid
      color-mix(in srgb, var(--m__text) 15%, transparent);
    transition: var(--m__duration-base)
      var(--m__easing-base);

    &:last-child {
      border-right: none;
    }

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

    &:has(input:checked) {
      color: var(--m__text);
      background-color: color-mix(
        in srgb,
        var(--m__text) 5%,
        transparent
      );
      cursor: default;
    }
  }

  & input[type="radio"] {
    display: none;
  }
}

.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;
}

.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);
      }
    }
  }
}

.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);
}

.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);
  }

  /* No divider under the last visible row. Hidden rows (filtered out, or an
     empty-state row kept at the end) don't count as the last one. */
  & tbody tr:nth-last-child(1 of :not([hidden])) td,
  & tbody tr:nth-last-child(1 of :not([hidden])) th {
    border-bottom: none;
  }

  /* The last column ends flush with the table edge. */
  & tr > :is(td, th):last-child {
    padding-right: 0;
  }

  & .m__table-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--m__gap-table-empty);
    padding-block: 4rem;
    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;
    }
  }
}

.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;
  }

  /* Balances and other amounts: tabular (fixed-width) figures, as in the product. */
  & .m__widget__value--amount {
    font-weight: var(--m__font-weight-medium);
    font-variant-numeric: tabular-nums;
  }

  & .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);
  }

  /* Placeholder: a centered caption (+ optional S button) standing in for the widget's
     content when there is nothing to show or it failed to load. Neutral colour in both
     cases; .L matches the spacing of .m__table-empty for tables and charts. */
  & .m__widget__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--m__gap-table-empty);
    padding-block: 2rem;
    text-align: center;
    font-size: var(--m__font-size-s);
    color: var(--m__text-caption);

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

    &.L {
      padding-block: 4rem;
    }

    /* Optical centring: a button is heavier than the caption, so the group sits
       a little above the geometric middle. */
    &:has(> button, > a) {
      padding-bottom: 3rem;
    }

    &.L:has(> button, > a) {
      padding-bottom: 5.25rem;
    }
  }

  & .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);
}

.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); }
}

.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;
      }
    }
  }
}

.prototype-header {
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;

  & .prototype-header__brand {
    display: flex;
    align-items: center;
    gap: var(--m__gap-nav-menu-item);
    flex-shrink: 0;
    text-decoration: none;
  }

  & .prototype-header__brand-label {
    line-height: inherit;
  }

  & .prototype-header__right {
    display: flex;
    align-items: center;
    gap: var(--m__gap-xl);
  }

  & .prototype-header__links {
    display: flex;
    align-items: center;
    gap: var(--m__gap-m);
  }

  @media (width < 768px) {
    & .prototype-header__links {
      display: none;
    }

    &:not(:has(.prototype-header__user-wrap)) .prototype-header__links {
      display: flex;
    }
  }

  & .prototype-header__user-wrap {
    position: relative;
  }

  & .prototype-header__user-trigger {
    display: flex;
    align-items: center;
    gap: var(--m__gap-nav-menu-item);
    padding: 0;
    border: none;
    background: none;
    color: var(--m__text);
    font: inherit;
    font-size: 0.9em;
    cursor: pointer;
    min-width: 0;
    transition: color var(--m__duration-xslow) var(--m__easing-base);

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

  & .prototype-header__user-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  & .prototype-header__user-chevron {
    display: flex;
    color: inherit;
  }

  & .prototype-header__popover {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    min-width: 16rem;
    padding: 0.2rem 0.2rem 0.6rem 0.2rem;
    background-color: var(--m__bg);
    border-radius: var(--m__widget-radius);
    border: var(--m__border-width-s) solid var(--m__border);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    z-index: 100;
  }

  & .prototype-header__popover[hidden] {
    display: none;
  }

  & .prototype-header__popover-nav {
    display: none;
  }

  & .prototype-header__popover-divider {
    display: none;
  }

  @media (width < 768px) {
    & .prototype-header__popover-nav {
      display: flex;
      flex-direction: column;
      gap: var(--m__gap-xxxs);
      padding-top: 0.25rem;
      margin-top: 0.4rem;
      border-top: var(--m__border-width-s) solid var(--m__border);
      padding-bottom: 0.25rem;
      margin-bottom: 0.4rem;
    }

    & .prototype-header__popover-divider {
      display: block;
      margin: 0 0 0.75rem;
      border-top: var(--m__border-width-s) solid var(--m__border);
    }
  }

  & .prototype-header__popover-link {
    display: flex;
    align-items: center;
    gap: var(--m__gap-xs);
    padding: 0.45rem 0.75rem;
    border-radius: var(--m__radius-l);
    color: var(--m__text);
    text-decoration: none;
    font-size: 0.9em;
    transition: background-color var(--m__duration-base) var(--m__easing-base);

    & .prototype-header__popover-link-icon {
      width: 1rem;
      height: 1rem;
      color: currentColor;
      fill: currentColor;
      flex-shrink: 0;
    }
  }

  & .prototype-header__popover-link:hover {
    background-color: var(--m__bg-surface);
    transition-duration: var(--m__duration-instant);
  }

  & .prototype-header__popover-link.active {
    background-color: var(--m__bg-surface);
    font-weight: var(--m__font-weight-medium);
  }

  & .prototype-header__popover-meta-link {
    display: block;
    padding: 0.22rem 0.75rem;
    border-radius: var(--m__radius-l);
    color: var(--m__text);
    text-decoration: none;
    font-size: 0.9em;
    transition: background-color var(--m__duration-base) var(--m__easing-base);

    &:hover {
      background-color: var(--m__bg-surface);
      transition-duration: var(--m__duration-instant);
    }

    &.active {
      background-color: var(--m__bg-surface);
      font-weight: var(--m__font-weight-medium);
    }
  }

  &
    .prototype-header__popover
    > .prototype-header__popover-meta-link:first-child {
    padding-top: 0.42rem;
  }

  & .prototype-header__popover-meta-caption {
    font-size: var(--m__font-size-s);
    color: var(--m__text-caption);
  }

  & .prototype-header__popover-appearance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--m__gap-m);
    padding: 0.45rem 0.75rem;
    border-radius: var(--m__radius-l);
    cursor: pointer;
    transition: background-color var(--m__duration-base) var(--m__easing-base);

    &:hover {
      background-color: var(--m__bg-surface);
      transition-duration: var(--m__duration-instant);
    }
  }

  & .prototype-header__popover-appearance-label {
    font-size: 0.9em;
    color: var(--m__text);
  }

  & .prototype-header__popover-logout {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.45rem 0.75rem;
    border-radius: var(--m__radius-l);
    border: none;
    background: none;
    color: var(--m__text);
    font: inherit;
    font-size: 0.9em;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--m__duration-base) var(--m__easing-base);
  }

  & .prototype-header__popover-logout:hover {
    background-color: var(--m__bg-surface);
    transition-duration: var(--m__duration-instant);
  }

  & .prototype-header__link {
    color: var(--m__text);
    text-decoration: none;
    font-size: 0.9em;

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

  & .prototype-header__link:hover {
    color: var(--m__text-link-hover);
  }

  & .prototype-header__icon {
    display: block;
    width: 1.35rem;
    height: 1.35rem;
    color: currentColor;
    background-color: var(--m__bg-surface);

    border-radius: 50%;
  }
}

.prototype-header [data-prototype-auth] {
  display: none;
}

body.prototype-auth-signed-out .prototype-header [data-prototype-auth="guest"],
body.prototype-auth-signed-in .prototype-header [data-prototype-auth="user"] {
  display: flex;
}

body.prototype-auth-signed-out .prototype-header {
  padding-block: 0.7rem;
}

@media (width < 768px) {
  body.prototype-auth-signed-in
    .prototype-header
    .prototype-header__links[data-prototype-auth="user"] {
    display: none;
  }
}

@media (width < 50rem) {
  .prototype-header__brand-label {
    display: none;
  }
}

body:has(.footer) {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Breathing room above the footer goes on the last content block, not on
   the footer (its margin-top: auto is what pins it to the viewport bottom on
   short pages). Pages may end with inline scripts before the footer — they
   render no box. Select the last non-script child BEFORE the footer so browser
   extensions adding nodes after it cannot shift the spacing onto the footer. */
body:has(.footer:not(.footer--minimal)) > :nth-last-child(1 of :not(script):has(~ .footer)) {
  margin-bottom: 9.6rem;
}

.footer {
  margin-top: auto;
  padding: 1.6rem 3.2rem 1.6rem 1.6rem;
  background-color: var(--m__bg-surface);

  @media (width < 768px) {
    padding: 0.8rem 1.6rem 1.2rem 0.8rem;
  }

  &.footer--minimal {
    margin-top: auto;
    padding: 1rem;
    background-color: transparent;

    @media (width < 768px) {
      & .footer-nav-item--toggle {
        display: none;
      }
    }
  }

  & .footer-columns {
    display: flex;
    justify-content: space-between;
    gap: 28%;

    @media (width < 768px) {
      gap: 8%;
    }
  }

  & .footer-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--m__gap-m);
  }

  & .footer-nav-item--toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--m__gap-xxs);
    /* Left, after the legal links: the right corner is taken by prototype panels. */
    margin-left: var(--m__gap-m);
  }

  & .footer-prototype-tools__toggle-label {
    cursor: pointer;
  }

  & .footer-prototype-tools__switch {
    appearance: none;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font: inherit;
    flex-shrink: 0;
  }

  & .footer-prototype-tools__switch-track {
    display: flex;
    align-items: center;
    width: 1.65rem;
    height: 0.8rem;
    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.1rem;
  }

  & .footer-prototype-tools__switch-thumb {
    width: 0.54rem;
    height: 0.54rem;
    border-radius: 50%;
    background-color: var(--m__text);
    transform: translateX(0);
    transition: transform var(--m__duration-medium) var(--m__easing-base);
  }

  &
    .footer-prototype-tools__switch[aria-checked="true"]
    .footer-prototype-tools__switch-thumb {
    transform: translateX(0.9rem);
  }

  &
    .footer-prototype-tools__switch[aria-checked="true"]
    .footer-prototype-tools__switch-track {
    background: linear-gradient(
      90deg,
      var(--m__text) -100%,
      var(--m__bg-surface) 100%
    );
  }
}

.footer-logo {
  width: 6.4rem;
  margin-bottom: 0.8rem;

  & svg {
    display: block;
    width: 100%;
    height: auto;
  }
}

.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;
  /* Room for the scrollbar is kept on both sides, so a modal that grows past the
     viewport doesn't jump sideways when the scrollbar appears */
  scrollbar-gutter: stable both-edges;
  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: 32rem; /* default and minimum width on desktop; wider modals set their own */
  display: flex;
  flex-direction: column;
  /* Auto margins center the modal in the backdrop with equal space above and below;
     a modal taller than the viewport starts at the top and scrolls, unlike align-items: center */
  margin: auto;

  @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;
}

/* A compact square as tall as an S button (the icon menu button S size); its top and right
   edges sit on the padding lines, as the footer buttons sit on the bottom and right ones.
   Hover tints it like .m__menu-button-icon. */
.m__modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font: inherit;
  line-height: var(--m__line-height-base);
  inline-size: calc(1lh + 0.6rem);
  block-size: calc(1lh + 0.6rem);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--m__radius-s);
  background: none;
  /* Text color, like the table's "⋮" (.m__menu-button-icon) */
  color: var(--m__text);
  cursor: pointer;
  transition:
    background-color var(--m__duration-base) var(--m__easing-base),
    color var(--m__duration-base) var(--m__easing-base);

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

  &: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);
  }
}

.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;
}

.m__alert-error,
.m__alert-success,
.m__alert-info,
.m__alert-warning {
  /* Box of an M text field: same radius, padding and (invisible) border, so an alert
     next to a field matches it in height, corners and where the text starts */
  border: var(--m__border-width-s) solid transparent;
  border-radius: var(--m__radius-s);
  padding: var(--m__padding-input-m);
  line-height: var(--m__line-height-base);
}

.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);
}

/* Same recipe as error/success: the color at 15% for the surface, full for the text. */
.m__alert-info {
  background: color-mix(in srgb, var(--m__color-blue-500) 15%, transparent);
  color: var(--m__color-blue-500);
}

/* Yellow is too light for text, so the text mixes it into the text color:
   dark ochre on light theme, pale yellow on dark. */
.m__alert-warning {
  background: color-mix(in srgb, var(--m__color-yellow-500) 22%, transparent);
  color: color-mix(in srgb, var(--m__color-yellow-500) 35%, var(--m__text));
}

/* Inline code inside an alert takes the alert's color instead of the code grey */
:is(.m__alert-error, .m__alert-success, .m__alert-info, .m__alert-warning) code {
  color: inherit;
  border-color: color-mix(in srgb, currentColor 15%, transparent);
  background: color-mix(in srgb, currentColor 10%, transparent);
}

/*
 * Toast: short confirmation that appears at the bottom centre and fades out.
 * Add .is-visible to show it. Solid accent background, squircle corners.
 */
.m__toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 300;
  max-width: min(32rem, calc(100vw - 2rem));
  padding: var(--m__padding-button-m);
  border-radius: var(--m__radius-xl);
  corner-shape: squircle;
  background: var(--m__bg-accent);
  color: var(--m__text-inverted);
  font-size: var(--m__font-size-s);
  line-height: var(--m__line-height-base);
  box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--m__color-gray-950) 20%, transparent);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.5rem);
  /* Hiding fades out; showing is instant (see .is-visible). */
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;

  &.is-visible { opacity: 1; transform: translate(-50%, 0); transition: none; }

  /* In documentation: shown in place instead of fixed to the viewport */
  &.is-static {
    position: static;
    display: inline-block;
    opacity: 1;
    transform: none;
  }
}


/* ── Site styles (new values only in styles/site/tokens.css, see AGENTS.md) ── */
/* Site tokens: the exception list.
 *
 * Design-system tokens (--m__*) are the rule. Layouts built from them in any combination
 * need no registration. A value the design system does not have — an absolute length
 * (rem/px), a colour (including a palette colour used directly, bypassing the semantic
 * tokens), a duration — is declared HERE and nowhere else, as --tc__*, and used through
 * var(). `npm test` enforces this; /lab/ renders this file as a table.
 *
 * Each token carries a two-line comment right above it:
 *   Where:   file(s) and what the value does
 *   Closest: the nearest design-system token(s) and their values
 */
:root {
  /* Where: aside-footer.css — space between the aside's text and its footer row
     Closest: --m__spacer-l (2.4rem), --m__spacer-xl (4.8rem) */
  --tc__spacer-aside-footer: 3rem;

  /* Where: aside-footer.css — the "Last reviewed" note, quieter than a caption
     Closest: --m__text-caption (gray-400) */
  --tc__text-faint: var(--m__color-gray-300);

  /* Where: checklist.css — hanging indent that leaves room for the check icon
     Closest: --m__spacer-m (1.2rem) */
  --tc__checklist-indent: 1.4rem;
}

/* header-links-mobile:
   The platform header hides its links under 768px only when a user menu is present
   (prototypes/header.css). This site has no user menu, so it hides them itself:
   six anchors do not fit a phone-width row, and the page is one scroll anyway. */
@media (width < 768px) {
  .prototype-header:not(:has(.prototype-header__user-wrap)) .prototype-header__links {
    display: none;
  }
}

/* aside-footer: a footer row inside an <aside>, links on the left, a note on the right. */
.aside-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--m__gap-xs) var(--m__gap-xxl);
  margin-top: var(--tc__spacer-aside-footer);

  & .aside-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--m__gap-xs) var(--m__gap-xxl);
  }

  & p {
    margin: 0;
  }

  & .aside-footer__note {
    color: var(--tc__text-faint);
  }
}

/* anchor-offset:
   Room above a section when in-page navigation scrolls to it, so its heading
   doesn't sit on the viewport edge. */
main [id] {
  scroll-margin-top: var(--m__spacer-l);
}

/* status-dot:
   Adds a dot in the label's colour to the design system's .m__tag-flat
   (colours, size, weight and tint all stay the tag's own). */
.m__tag-flat.status-dot {
  gap: var(--m__gap-xxxs);

  &::before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background-color: currentColor;
  }
}

/* compliance-tiles:
   Four .m__widget tiles in a .m__sequence row: equal height, denser type (title at
   the body size; description and label at the label size). */
.compliance-tiles {
  & .m__sequence-item > .m__widget {
    height: 100%;
  }

  & .m__widget {
    & h3 {
      font-size: var(--m__font-size-m);
    }

    & p {
      font-size: var(--m__font-size-s);
      margin-bottom: 0;
    }

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

/* documents-table:
   In the Documents table the category caption, the access tag and the action
   button share one type size, so table.m__table-baseline can align them on the
   baseline of the document title. */
.documents-table :is(.caption, .m__tag-flat, .m__button-secondary-outline) {
  font-size: var(--m__font-size-s);
}

/* read-more: a block of text whose bottom fades into the page background, with a
   "Show more" link below it that reveals the rest and collapses it again. */
.read-more {
  position: relative;

  /* Closed: the visible text ends flush, so the fade sits on its last line. */
  &:not(.is-open) .read-more__visible > :last-child {
    margin-bottom: 0;
  }

  /* The fade: only the lower part of the visible text, the last line dissolves. */
  &::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.5lh;
    background: linear-gradient(to bottom, transparent, var(--m__bg));
    pointer-events: none;
  }

  &.is-open::after {
    content: none;
  }
}

/* stepper:
   Horizontal progress steps: a coloured top rule per step, states done / active / pending. */
.stepper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--m__gap-m);
  margin: 0 0 var(--m__default-margin-bottom);
  padding: 0;

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

  & .stepper__step {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--m__gap-xxxs);
    margin: 0;
    padding-top: var(--m__spacer-xs);
    border-top: var(--m__border-width-l) solid var(--m__border);
  }

  & .stepper__step--done {
    border-top-color: var(--m__success);
  }

  & .stepper__step--active {
    border-top-color: var(--m__bg-highlight);
  }
}

/* checklist: a group heading with a light rule under it, then a `ul` whose bullets are
   the design system's checkmark icon in the success colour. */
.checklist-group {
  & h3 {
    padding-bottom: var(--m__spacer-xs);
    border-bottom: var(--m__border-width-s) solid var(--m__border);
    margin-bottom: var(--m__gap-xl);
  }
}

.checklist {
  & li {
    padding-left: var(--tc__checklist-indent);

    &::before {
      content: none;
    }

    & > svg {
      position: absolute;
      left: 0;
      top: 0.15em;
      width: 1em;
      height: 1em;
      color: var(--m__success);
      /* The sprite's checkmark is a thin filled shape; a stroke in the same colour
         makes it heavier without a second icon. */
      stroke: currentColor;
      stroke-width: 0.8;
      stroke-linejoin: round;
    }
  }
}

/* lab: the colour swatch on /lab/. --swatch is set per cell to a token reference. */
.lab-swatch {
  display: inline-block;
  vertical-align: middle;
  width: 1.2em;
  height: 1.2em;
  margin-right: var(--m__gap-xxxs);
  border-radius: var(--m__radius-xs);
  border: var(--m__border-width-s) solid var(--m__border);
  background-color: var(--swatch);
}