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


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

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

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

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

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

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

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

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

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

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

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

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

button.m__button-inline {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;

  &:hover {
    color: var(--m__text-link-hover);
    text-decoration-style: solid;
  }
}

:root {
  --m__radio-card-padding: var(--m__padding-input-s);
}

.m__radio-card-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m__gap-xxxs);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.m__radio-card {
  display: inline-flex;
  flex-grow: 1;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  box-sizing: border-box;
  padding: var(--m__radio-card-padding);
  border: var(--m__border-width-s) solid color-mix(in srgb, currentColor 25%, transparent);
  border-radius: var(--m__radius-s);
  background-color: transparent;
  color: var(--m__text);
  font: inherit;
  line-height: var(--m__line-height-base);
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  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);
}

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

.m__radio-card:active {
  color: var(--m__text-link-pressed);
  transition-duration: var(--m__duration-instant);
}

.m__radio-card:has(input:focus-visible) {
  outline: var(--m__border-width-m) solid var(--m__text-link-hover);
  outline-offset: 2px;
}

.m__radio-card:has(input:checked) {
  color: var(--m__text-link-hover);
  outline: 1px solid color-mix(in srgb, currentColor 100%, transparent);
  outline-offset: -1px;
  background-color: color-mix(in srgb, var(--m__bg-accent-hover) 8%, transparent);
}

.m__radio-card input[type="radio"] {
  appearance: none;
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.m__radio-card__value {
  font-size: inherit;
  font-weight: var(--m__font-weight-regular);
  line-height: var(--m__line-height-base);
  margin: 0;
}

.m__radio-card__caption {
  color: var(--m__text-caption);
  font-size: inherit;
  line-height: var(--m__line-height-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.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__segmented-nav {
  display: inline-block;

  & ul {
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
    border: var(--m__border-width-m) solid var(--m__text);
    border-radius: var(--m__radius-s);
    overflow: hidden;
  }

  & ul li {
    margin: 0;
    padding: 0;
    border-right: var(--m__border-width-s) solid
      color-mix(in srgb, var(--m__text) 20%, transparent);

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

    &::before {
      content: "";
    }

    & a {
      display: block;
      padding: var(--m__padding-button-s);
      font-size: 0.8em;
      font-weight: var(--m__font-weight-medium);
      text-decoration: none;
      color: var(--m__text);
      transition: background-color var(--m__duration-base)
        var(--m__easing-base);

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

  & .current {
    & a {
      background-color: color-mix(
        in srgb,
        var(--m__text-link) 8%,
        transparent
      );

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

.m__nav-menu {
  display: flex;
  flex-direction: column;
  gap: var(--m__gap-nav);
  inline-size: 10rem;
  max-inline-size: 10rem;
}

.m__nav-menu-item {
  display: flex;
  align-items: center;
  gap: var(--m__gap-nav-menu-item);
  box-sizing: border-box;
  inline-size: 100%;
  padding: var(--m__padding-nav-menu-item);
  border-radius: var(--m__radius-l);
  color: var(--m__text);
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color var(--m__duration-base) var(--m__easing-base);

  & .m__nav-menu-item__icon {
    width: 1rem;
    height: 1rem;
    color: currentColor;
    fill: currentColor;
    flex-shrink: 0;
  }

  & span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

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

  & .m__nav-menu-item__caption {
    font-size: var(--m__font-size-s);
    color: var(--m__text-caption);
  }

  &:has(.m__nav-menu-item__caption) {
    padding: var(--m__padding-nav-menu-caption);
  }
}

.m__nav-menu-heading {
  margin: 0.85rem 0 0.2rem;
  padding: 0 0.75rem;
  color: var(--m__text-caption);
  font-family: var(--m__font-family-semi-mono);
  font-size: var(--m__font-size-xs);
  line-height: var(--m__line-height-base);
  text-transform: uppercase;
}

.m__nav-menu-divider {
  block-size: 1px;
  margin: 0.2rem 0.75rem;
  background-color: color-mix(in srgb, var(--m__text) 14%, transparent);
}

button.m__nav-menu-item {
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.m__nav-menu > .m__nav-menu-item:has(.m__nav-menu-item__caption):first-child {
  padding: var(--m__padding-nav-menu-caption-first);
}

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

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

.m__datepicker {
  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;
    cursor: pointer;
  }

  & .m__datepicker__field {
    position: relative;

    & input[type="date"] {
      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);
      padding-inline-end: 2.25rem;
      color: var(--m__text);
      font-size: inherit;
      line-height: var(--m__line-height-base);
      width: 100%;
      transition: color var(--m__duration-base) var(--m__easing-base);

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

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

      &::-webkit-calendar-picker-indicator {
        position: absolute;
        right: 0;
        top: 0;
        width: 2.5rem;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        margin: 0;
      }
    }

    & > svg {
      position: absolute;
      right: 0.75rem;
      top: 50%;
      translate: 0 -50%;
      pointer-events: none;
      color: var(--m__text-caption);
      transition: color var(--m__duration-base) var(--m__easing-base);
    }

    &:has(input[type="date"]:is(:hover, :focus-visible)) > svg {
      color: var(--m__text-link-hover);
      transition-duration: var(--m__duration-instant);
    }
  }
}

.m__datepicker.S {
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  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: text;
  position: relative;
  & > svg:first-child {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;

    cursor: pointer;
    color: var(--m__text-caption);
    transition: color var(--m__duration-base)
      var(--m__easing-base);
  }

  & > span {
    white-space: nowrap;
    font-size: inherit;
    color: var(--m__text-caption);
    font-weight: var(--m__font-weight-medium);
    cursor: pointer;
    transition: color var(--m__duration-base)
      var(--m__easing-base);

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

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

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

    &:focus-visible {
      outline: none;
    }

    &::-webkit-calendar-picker-indicator {
      position: absolute;
      left: 0;
      top: 0;
      width: 2.2em;
      height: 100%;
      opacity: 0;
      cursor: pointer;
      margin: 0;
    }
  }

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

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

  &: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__option-list {
  margin-bottom: var(--m__default-margin-bottom);

  & .m__option-list__item {
    display: flex;
    align-items: center;
    gap: var(--m__gap-s);
    padding: var(--m__padding-button-m);
    text-decoration: none;
    color: var(--m__text);
    border: var(--m__border-width-s) solid
      color-mix(in srgb, currentColor 25%, var(--m__bg));
    transition: color var(--m__duration-base)
      var(--m__easing-base);

    &:not(:first-child) {
      margin-top: -1px;
    }

    &:first-child {
      border-radius: var(--m__radius-m) var(--m__radius-m) 0 0;
    }

    &:last-child {
      border-radius: 0 0 var(--m__radius-m) var(--m__radius-m);
    }

    &:first-child:last-child {
      border-radius: var(--m__radius-m);
    }

    & .m__tag {
      transition:
        color var(--m__duration-base) var(--m__easing-base),
        border-color var(--m__duration-base)
          var(--m__easing-base);
    }

    &:hover {
      position: relative;
      z-index: 1;
      color: var(--m__text-link-hover);
      transition-duration: var(--m__duration-instant);

      & .m__tag {
        transition-duration: var(--m__duration-instant);
      }
    }
  }

  & .m__option-list__item-label {
    flex: 1;
  }

  & .m__option-list__item-tags {
    display: flex;
    gap: var(--m__gap-xxxs);
    flex-shrink: 0;
  }
}

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

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

.m__searchbar {
  display: inline-flex;
  align-items: center;
  gap: 0;
  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);
  color: var(--m__text-caption);
  cursor: text;
  transition: color var(--m__duration-base)
    var(--m__easing-base);

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

  &: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 {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
  }

  & input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    color: var(--m__text);
    font: inherit;
    line-height: var(--m__line-height-base);
    transition: color var(--m__duration-base)
      var(--m__easing-base);

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

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

    &:focus-visible {
      outline: none;
    }

    &::-webkit-search-cancel-button {
      display: none;
    }
  }
}

.m__popover {
  position: fixed;
  z-index: 200;
  background-color: var(--m__bg);
  border: var(--m__border-width-s) solid var(--m__border);
  border-radius: var(--m__widget-radius);
  box-shadow: 0 4px 20px color-mix(in srgb, #000 22%, transparent);
  width: 15rem;
  overflow: hidden;
}

.m__popover[hidden] {
  display: none;
}

.m__popover .m__searchbar {
  width: 100%;
  box-sizing: border-box;
  background: none;
  border-radius: 0;
  border: none;
  border-bottom: var(--m__border-width-s) solid var(--m__border);
  padding: 0.55rem 0.75rem;

  & input {
    font-size: 0.9em;
  }

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

.m__popover-list {
  max-height: 12rem;
  overflow-y: auto;
  padding: 0.25rem;
}

label.m__popover-item {
  display: flex;
  align-items: center;
  gap: var(--m__gap-popover-item);
  padding: 0.45rem 0.65rem;
  border-radius: var(--m__radius-m);
  width: 100%;
  box-sizing: border-box;
  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);
  }

  & .m__popover-item-name {
    font-size: 0.9em;
    flex: 1;
  }

  &:has(input:checked) .m__popover-item-name {
    color: var(--m__text-link);
  }
}

.bw-popover-empty {
  margin: 0;
  padding: 0.4rem 0.65rem;
  font-size: var(--m__font-size-xs);
  color: var(--m__text-caption);
}

.bw-popover-empty[hidden] {
  display: none;
}

.m__popover-footer {
  border-top: var(--m__border-width-s) solid var(--m__border);
  padding: 0.25rem;
}

.m__popover-new-btn {
  background: none;
  border: none;
  padding: 0.45rem 0.65rem;
  border-radius: var(--m__radius-m);
  font: inherit;
  color: var(--m__text-caption);
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition:
    background-color var(--m__duration-base)
      var(--m__easing-base),
    color var(--m__duration-base) var(--m__easing-base);

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

.m__col-actions {
  text-align: right;
}

.m__menu-button {
  display: inline-block;
}

.m__menu-button.m__split-button {
  display: inline-flex;
}

:is(
  a.m__menu-button-primary,
  button.m__menu-button-primary,
  a.m__menu-button-secondary,
  button.m__menu-button-secondary
) {
  gap: var(--m__gap-xxxs);

  & .m__button__icon {
    width: 0.72lh;
    height: 0.72lh;
    align-self: center;
    stroke: currentColor;
    stroke-width: 0.65;
    stroke-linejoin: round;
    transition: transform var(--m__duration-base) var(--m__easing-base);
  }

  &[aria-expanded="true"] .m__button__icon {
    transform: rotate(180deg);
  }
}

:is(
  a.m__menu-button-primary,
  button.m__menu-button-primary,
  a.m__menu-button-secondary,
  button.m__menu-button-secondary
).m__menu-button-trigger--active {
  color: var(--m__text-link-hover);
}

.m__split-button
  > :is(
    a.m__menu-button-primary,
    button.m__menu-button-primary,
    a.m__menu-button-secondary,
    button.m__menu-button-secondary
  ):last-of-type {
  padding-inline: var(--m__spacer-xs);
}

.m__split-button
  > :is(
    a.m__menu-button-primary,
    button.m__menu-button-primary,
    a.m__menu-button-secondary,
    button.m__menu-button-secondary
  ).S:last-of-type {
  padding-inline: var(--m__spacer-xxs);
}

:is(
  a.m__menu-button-primary,
  button.m__menu-button-primary,
  a.m__menu-button-secondary,
  button.m__menu-button-secondary
).m__menu-button-trigger:has(> .m__button__icon:only-child) {
  align-items: center;

  & > .m__button__icon:only-child {
    align-self: center;
  }
}

button.m__menu-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: calc(1lh + 1rem);
  block-size: calc(1lh + 1rem);
  padding: 0;
  border: none;
  border-radius: var(--m__radius-s);
  background-color: transparent;
  color: var(--m__text);
  font: inherit;
  cursor: pointer;
  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.85rem;
    height: 0.85rem;
  }

  &.M {
    inline-size: calc(1lh + 1rem);
    block-size: calc(1lh + 1rem);
  }

  &.S {
    inline-size: calc(1lh + 0.6rem);
    block-size: calc(1lh + 0.6rem);

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

  &:hover,
  &.m__menu-button-trigger--active {
    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);
  }
}

.m__menu-button-list {
  position: fixed;
  z-index: 200;
  background-color: var(--m__bg);
  border: var(--m__border-width-s) solid var(--m__border);
  border-radius: var(--m__widget-radius);
  box-shadow: 0 4px 20px color-mix(in srgb, #000 22%, transparent);
  min-width: 9rem;
  overflow: hidden;
  padding: 0.25rem;
}

.m__menu-button-list[hidden] {
  display: none;
}

.m__menu-button-item {
  font-size: 1rem;
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: none;
  border: none;
  padding: 0.45rem 0.65rem;
  border-radius: var(--m__radius-m);
  font: inherit;
  color: var(--m__text);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition:
    background-color var(--m__duration-base)
      var(--m__easing-base),
    color var(--m__duration-base) var(--m__easing-base);

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

.m__menu-button-item--danger {
  color: color-mix(in srgb, var(--m__error) 80%, transparent);

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

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

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

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

[data-model-icon-3d] {
  position: relative;
  overflow: visible;

  & .m__model-icon-3d__canvas {
    position: absolute;
    inset: -0.12em;
    z-index: 1;
    display: block;
    width: calc(100% + 0.24em);
    height: calc(100% + 0.24em);
    pointer-events: none;
  }

  &.m__model-icon-3d-ready > svg {
    opacity: 0;
  }
}

[data-model-icon-3d-stack] {
  position: relative;
  overflow: visible;

  & .m__model-icon-3d-stack__canvas {
    position: absolute;
    inset: -6em;
    z-index: 2;
    display: block;
    width: calc(100% + 12em);
    height: calc(var(--auth-layout-icon-size) + 12em);
    pointer-events: none;
  }

  &.m__model-icon-3d-stack-ready .auth-layout__icons {
    opacity: 0;
  }
}

/* Floating panel with live render settings. Fixed to the right edge by
   default; the --left variant pins it to the left edge above the auth form
   on /auth/3d-icons-sandbox/. */
.icon-3d-settings {
  position: fixed;
  top: var(--m__spacer-s);
  right: var(--m__spacer-s);
  z-index: 20;
  width: min(22rem, calc(100vw - var(--m__spacer-s) * 2));
  max-height: calc(100vh - var(--m__spacer-s) * 2);
  overflow: auto;
  padding: 0.45rem;
  border: 1px solid var(--m__border);
  background-color: var(--m__bg-surface);
  box-shadow: 0 1rem 3rem color-mix(in srgb, var(--m__text) 12%, transparent);

  /* Login page: the panel takes the whole left half of the viewport, with
     the icon checkboxes in a narrow first column and the render settings in
     two wide columns (20/40/40). */
  &.icon-3d-settings--left {
    right: auto;
    left: var(--m__spacer-s);
    bottom: var(--m__spacer-s);
    width: calc(50vw - var(--m__spacer-s) * 2);
    max-height: none;

    & .icon-3d-settings__grid {
      grid-template-columns: 20fr 40fr 40fr;
      align-items: start;

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

  & .icon-3d-settings__col {
    display: grid;
    gap: 0.35rem;
  }

  & .icon-3d-settings__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  & fieldset {
    margin: 0;
    padding: 0.35rem;
    border: 1px solid var(--m__border);
    border-radius: var(--m__radius-s);
  }

  & legend {
    padding: 0 0.2rem;
    font-size: var(--m__font-size-xs);
    line-height: 1;
    font-weight: var(--m__font-weight-bold);
  }

  & .icon-3d-settings__reset {
    display: block;
    margin: -0.1rem 0 0.3rem auto;
    padding: 0.15rem 0.35rem;
    border: 1px solid var(--m__border);
    border-radius: var(--m__radius-s);
    background-color: var(--m__bg);
    color: var(--m__text-caption);
    font: inherit;
    font-size: var(--m__font-size-xs);
    line-height: 1.1;
    cursor: pointer;
  }

  & .icon-3d-settings__reset:hover {
    color: var(--m__text);
  }

  & fieldset label {
    display: grid;
    grid-template-columns: minmax(5.6rem, 0.9fr) minmax(5rem, 1fr) 2.4rem;
    gap: 0.35rem;
    align-items: center;
    margin-bottom: 0.25rem;
    font-size: var(--m__font-size-xs);
    color: var(--m__text-caption);

    &:last-child {
      margin-bottom: 0;
    }
  }

  & fieldset label.icon-3d-settings__icon-toggle {
    display: flex;
    gap: 0.35rem;
    cursor: pointer;

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

  & input {
    min-width: 0;
  }

  & input[type="text"] {
    width: 100%;
    padding: 0.25em 0.4em;
    border: 1px solid var(--m__border);
    border-radius: var(--m__radius-s);
    background-color: var(--m__bg);
    color: var(--m__text);
    font: inherit;
  }

  & output {
    overflow: hidden;
    font-family: var(--m__font-family-mono);
    font-size: 0.72rem;
    color: var(--m__text);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  @media (width < 960px) {
    position: static;
    width: auto;
    max-height: none;
  }
}


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

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

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

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

.ids__navbar {
  display: inline-block;

  & ul {
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
    border: var(--m__border-width-m) solid var(--m__text);
    border-radius: 0.4em;
    overflow: hidden;

    @media (width < 767px) {
      flex-direction: column;
      width: max-content;
    }
  }

  & ul li {
    margin: 0;
    padding: 0;
    border-right: var(--m__border-width-s) solid
      color-mix(in srgb, var(--m__text) 20%, transparent);

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

    @media (width < 767px) {
      border-right: none;
      border-bottom: var(--m__border-width-s) solid
        color-mix(in srgb, var(--m__text) 20%, transparent);

      &:last-child {
        border-bottom: none;

        & a {
          padding-bottom: 0.5em;
        }
      }
    }

    &::before {
      content: "";
    }

    & a {
      display: block;
      padding: 0.3em 0.8em;
      font-size: 0.8em;
      font-weight: var(--m__font-weight-medium);
      text-decoration: none;
      color: var(--m__text);

      @media (width < 767px) {
        padding-right: 2em;
      }

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

  & .current {
    & a {
      background-color: color-mix(
        in srgb,
        var(--m__text-link) 8%,
        transparent
      );

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

/* ============================================
   IDS Footnote Link
   ============================================ */

ids-footnote-link {
  display: inline;
  white-space: nowrap;

  label {
    cursor: pointer;
    white-space: nowrap;
  }
}

.ids-footnote-link__button {
  appearance: none;
  cursor: pointer;
  padding: 0.5em 0.15em;
  margin: 0 0 0.15em 0.15em;
  transform: translateY(-0.3em);

  /* Circle styling */
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  display: inline-grid;
  font-size: 0.65em;
  line-height: 1;
  place-content: center;
  box-sizing: border-box;

  /* Not selected state: outlined circle */
  background: transparent;
  border: var(--m__border-width-s) solid var(--m__text);
  color: var(--m__text);

  &.ids-footnote-link__button--pill {
    width: auto;
    min-width: 1.3em;
    padding: 0 0.35em;
    border-radius: var(--m__radius-pill);
  }

  /* Selected state: filled circle */
  &.open {
    background: var(--m__text);
    border: var(--m__border-width-s) solid transparent;
    color: var(--m__bg);
  }

  /* Hover state for non-selected */
  &:not(.open):hover {
    border-color: var(--m__text-link-hover);
    color: var(--m__text-link-hover);
  }
}

/* ============================================
   IDS Footnote
   ============================================ */

.ids-footnote-wrap {
  left: 100%;
  width: max-content;
  height: auto;
  position: relative;
  top: var(--top);

  > :not(aside) {
    display: none;
  }
}

aside.ids-footnote {
  /* Reset prose `aside` (page-composition); footnote is overlay UI, not a text block */
  margin: 0;
  background-color: var(--m__bg);
  border-radius: 0.3em;
  padding: 0.975em;

  position: absolute;
  width: 20em;
  font-size: 0.8em;
  z-index: 150;
  box-shadow: 0 0.5em 1em
    color-mix(in srgb, var(--m__text) 30%, transparent);

  /* First paragraph badge - black filled circle */
  p:first-child::before {
    content: attr(data-index);
    display: inline-grid;
    place-items: center;
    width: 1.3em;
    height: 1.3em;
    border-radius: 50%;
    background: var(--m__text);
    color: var(--m__bg);
    font-size: 1em;
    line-height: 1;
    margin-right: 0.3em;
    vertical-align: middle;
  }

  &.ids-footnote--pill-badge p:first-child::before {
    width: auto;
    min-width: 1.3em;
    padding: 0 0.3em;
    border-radius: var(--m__radius-pill);
    box-sizing: border-box;
  }

  /* Scrollability */
  &.scrollable {
    box-shadow:
      0 0.5em 1em color-mix(in srgb, var(--m__text) 50%, transparent),
      0 -10em 0 color-mix(in srgb, var(--m__text) 30%, transparent);
    overflow: auto;
  }
}

/* Mobile layout */
@media (width < 767px) {
  .ids-footnote-wrap {
    left: 0;
    bottom: 0;
  }

  aside.ids-footnote {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: 1em;
    max-height: calc(100dvh - 5em);
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 0.5em 1em
      color-mix(in srgb, var(--m__text) 30%, transparent);
  }
}

/* Scrollability - lock body scroll */
html:has(.ids-footnote.scrollable) {
  overflow: hidden;
}

/* Close button */
:not(.scrollable) .ids-footnote__close {
  display: none;
}
.scrollable .ids-footnote__close {
  display: block;

  width: 100%;
  background-color: transparent;
  border: none;
  color: var(--m__text-link);
  cursor: pointer;
  font-size: 0.9em;
  padding: 0.5em 0;
  margin-top: 1em;

  &:hover,
  &:active {
    color: var(--m__text-link-hover);
  }

  svg {
    width: 0.8em;
    height: 0.8em;
    margin-right: 0.5em;
    vertical-align: middle;
  }

  line {
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

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

.nav-island {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: var(--m__gap-nav);
  padding: 1.25rem 1.25rem 0.4rem 0.5rem;
  border-radius: var(--m__radius-l);
  background-color: color-mix(
    in srgb,
    var(--m__bg) 72%,
    transparent
  );
  box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, black 8%, transparent);
  backdrop-filter: blur(0.5rem);
  opacity: 0.45;
  transition: opacity var(--m__duration-base) var(--m__easing-base);

  &:hover {
    opacity: 1;
    transition-duration: var(--m__duration-instant);
  }
}

.nav-island__link {
  font-size: var(--m__font-size-xs);
  line-height: 1.55;
  color: var(--m__text);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--m__duration-base) var(--m__easing-base);

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

.nav-island__theme-toggle {
  margin-top: 0.25rem;
}

.nav-island__close {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: none;
  border-radius: 0.25rem;
  background: none;
  font-size: 0.875rem;
  line-height: 1;
  color: var(--m__text);
  cursor: pointer;
  opacity: 0.45;
  transition: opacity var(--m__duration-base) var(--m__easing-base);

  &:hover {
    opacity: 1;
    transition-duration: var(--m__duration-instant);
  }
}

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

body:has(.footer:not(.footer--minimal)) > :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);
    margin-left: auto;
  }

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

.color-palette-dark {
  background-color: var(--m__bg);
  padding: 4rem 0;
}

/* Color palette plates */
.guide-color-plate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--m__gap-xxxxs);
  padding: 0.5rem;
  line-height: 1.2;
  min-height: 6.2rem;

  & p {
    font-weight: var(--m__font-weight-medium);
    margin: 0;
  }

  & .guide-color-plate__token {
    display: block;
    font-size: var(--m__font-size-xs);
    font-weight: var(--m__font-weight-medium);
    margin: 0;
  }

  & .guide-color-plate__value {
    display: inline-block;
    margin-top: auto;
    font: inherit;
    font-family: var(--m__font-family-semi-mono);
    font-size: var(--m__font-size-xs);
    color: inherit;
    opacity: 0.7;
    background: none;
    border: var(--m__border-width-s) solid color-mix(in srgb, currentColor 30%, transparent);
    padding: 0.15rem 0.35rem;
    border-radius: 0.2rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition:
      border-color var(--m__duration-base) var(--m__easing-base),
      opacity var(--m__duration-base) var(--m__easing-base);

    &:hover {
      opacity: 1;
      border-color: currentColor;
      transition-duration: var(--m__duration-instant), var(--m__duration-instant);
    }
  }

  & .guide-color-plate__emotions {
    font-size: var(--m__font-size-xs);

    &::first-letter {
      text-transform: uppercase;
    }
  }

  &.guide-color-plate--emotions {
    min-height: 9.2rem;
  }
}

@keyframes guide-color-copy-flash {
  from {
    transform: scale(1);
    opacity: 1;
  }

  to {
    transform: scale(1.5);
    opacity: 0;
  }
}

.guide-color-plate__flash {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: guide-color-copy-flash 0.4s ease-out forwards;
}

/* Token dump — populated by tokens-dump.js */
.guide-tokens {
  display: flex;
  flex-direction: column;
  gap: var(--m__gap-l);
}

.guide-tokens__group {
  display: flex;
  flex-direction: column;
  gap: var(--m__gap-xxxs);
}

.guide-tokens__group-label {
  margin: 0;
  font-family: var(--m__font-family-semi-mono);
  font-size: var(--m__font-size-s);
  font-weight: var(--m__font-weight-regular);
  color: var(--m__text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.guide-tokens__plates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0;
}

[data-tokens-render="swatch"] .guide-tokens__plates {
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}

/* Generic plate (used by swatch renderer) */
.guide-tokens__plate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--m__gap-xxs);
  min-height: 4.5rem;
  padding: 0.5rem 0.6rem;
  border: none;
  border-radius: 0;
  font: inherit;
  text-align: left;
  background: none;
  position: relative;
  overflow: hidden;
}

.guide-tokens__plate--swatch {
  cursor: pointer;
  justify-content: space-between;
  margin: 0 -1px;
  transform-origin: bottom;
  transition: transform var(--m__duration-medium) var(--m__easing-base);

  &:hover {
    transform: scaleY(0.94);
    transition-duration: var(--m__duration-instant);
  }

  &.guide-tokens__plate--light {
    box-shadow: inset 0 0 0 1px var(--m__border);
  }
}

.guide-tokens__radius-sample {
  width: 5rem;
  height: 5rem;
  background-color: color-mix(in srgb, var(--m__error) 20%, transparent);
}

.guide-tokens__plate-name {
  font-weight: var(--m__font-weight-medium);
  font-size: var(--m__font-size-s);
}

.guide-tokens__plate-value {
  font-family: var(--m__font-family-semi-mono);
  font-size: var(--m__font-size-xs);
  opacity: 0.7;
}

.guide-tokens__plate-flash {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--m__font-family-mono);
  font-size: var(--m__font-size-xs);
  text-align: center;
  pointer-events: none;
  animation: guide-color-copy-flash 0.4s ease-out forwards;
}

/* Row renderer (bar, text-size, text-weight, text-family, duration, easing) */
.guide-tokens__rows {
  display: flex;
  flex-direction: column;
}

.guide-tokens__row {
  display: grid;
  grid-template-columns: 13rem 1fr 14rem;
  align-items: start;
  gap: var(--m__gap-xxl);
  padding: 0.5rem 0;
  border-top: var(--m__border-width-s) solid var(--m__border);
}

.guide-tokens__row-label {
  font-family: var(--m__font-family-mono);
  font-size: var(--m__font-size-m);
  font-weight: var(--m__font-weight-medium);
}

.guide-tokens__row-value {
  font-family: var(--m__font-family-mono);
  font-size: var(--m__font-size-s);
  opacity: 0.7;
}

.guide-tokens__bar-track {
  display: block;
  height: 1.4rem;
  background-color: var(--m__bg-surface);
  width: 100%;
}

.guide-tokens__bar-fill {
  display: block;
  height: 100%;
  background-color: var(--m__bg-accent);
  width: 0;
}

.guide-tokens__bar-fill--anim {
  width: 0;

  &.is-active {
    width: 100%;
  }
}

.guide-tokens__row--anim {
  cursor: pointer;
}

/* Space renderer — vertical stack, label above a full-width bar */
.guide-tokens__space-stack {
  display: flex;
  flex-direction: column;
  gap: var(--m__gap-l);
}

.guide-tokens__space-item {
  display: flex;
  flex-direction: column;
  gap: var(--m__gap-xxxxs);
}

.guide-tokens__space-item-label {
  display: flex;
  align-items: baseline;
  gap: var(--m__gap-xxs);
}

/* Border-width renderer — horizontal line with the token thickness */
.guide-tokens__border-line {
  width: 100%;
  background-color: var(--m__bg-accent);
}

/* Control padding renderer — sample with the padding applied */
.guide-tokens__row--control-padding {
  grid-template-columns: 13rem 1fr 14rem;
  align-items: start;

  & .guide-tokens__row-label {
    font-size: var(--m__font-size-m);
  }
}

.guide-tokens__row--header {
  font-size: var(--m__font-size-s);
  font-weight: var(--m__font-weight-medium);
  color: var(--m__text-caption);
  border-top: none;
}

.guide-tokens__control-sample {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  background-color: color-mix(in srgb, var(--m__error) 20%, transparent);
}

.guide-tokens__control-sample-content {
  box-sizing: content-box;
  width: 4rem;
  height: 1rem;
  flex-shrink: 0;
  background-color: var(--m__bg);
}

.guide-tokens__text-sample {
  font-size: var(--m__font-size-xl);
  line-height: 1;
}


/* Emotion colors showcase (from modulate-design) */
.emotion-colors-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.2em;
  margin-bottom: 2em;
}

.emotion-group {
  background-color: var(--m__bg-surface);
  padding: 0.8em 2em 2em 1em;

  & .emotion-group-header {
    margin-bottom: 0.6em;

    & h3 {
      margin: 0;
      font-weight: var(--m__font-weight-medium);
      color: color-mix(in srgb, var(--m__text) 70%, transparent);
    }
  }

  & .emotion-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1em;

    & .emotion-color-sample {
      padding: 0.3em 0.6em;
      color: var(--m__color-white);
    }
  }
}

/* Design system home (`src/index.html`) — section layout not tied to color samples */

.docs-icon-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--m__gap-xs);
  margin-top: 1rem;

  & .docs-icon-row__item {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: var(--m__gap-xs);
    padding: 0.75rem;
    border-radius: var(--m__widget-radius);
    background-color: var(--m__bg-surface);
    cursor: pointer;
    transition: background-color var(--m__duration-base)
      var(--m__easing-base);

    &:hover {
      background-color: color-mix(
        in srgb,
        var(--m__bg-surface) 88%,
        white
      );
      transition-duration: var(--m__duration-instant);
    }
  }

  & .docs-icon-row__icon {
    width: 1.6rem;
    height: 1.6rem;
    color: var(--m__text);
    fill: currentColor;
    flex-shrink: 0;
    transform-origin: center center;

    &.is-flying {
      animation: docs-icon-fly-away 0.42s ease-in forwards;
    }

    &.is-returning {
      animation: docs-icon-return 0.22s ease-out forwards;
    }
  }

  & .docs-icon-row__label {
    max-width: 100%;
    font-size: var(--m__font-size-s);
    color: var(--m__text-caption);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.docs-icon-row--3d {
  & .docs-icon-row__item {
    padding: 0;
    background-color: transparent;

    &:hover {
      background-color: transparent;
    }
  }

  /* The slot square is the reference box for the 3D tile: the model at its
     default front-facing rotation projects to exactly this square. The
     canvas bleeds half a grid gap outward on each side, so neighboring
     canvases touch and the gaps double as rotation headroom. */
  & .docs-icon-row__icon {
    width: 100%;
    height: auto;
    aspect-ratio: 1;

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

    /* Vertical bleed is 1.5 gaps per side (vs half a gap horizontally):
       rotated corners need more headroom above and below, and extra canvas
       height doesn't change the icon size — the camera scale is anchored to
       the host square, not the canvas. */
    & .m__model-icon-3d__canvas {
      inset: calc(var(--m__gap-xs) * -1.5) calc(var(--m__gap-xs) / -2);
      width: calc(100% + var(--m__gap-xs));
      height: calc(100% + var(--m__gap-xs) * 3);
    }
  }

  & .docs-icon-row__label {
    margin-bottom: var(--m__gap-s);
  }
}

@keyframes docs-icon-fly-away {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }

  100% {
    transform: translate(0.85rem, -1.35rem) scale(1.65);
    opacity: 0;
  }
}

@keyframes docs-icon-return {
  0% {
    transform: scale(1);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.docs-animation-samples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--m__gap-m);

  & .docs-animation-samples__text {
    & p {
      margin: 0;
    }
  }

  & .docs-animation-samples__sidebar {
    min-width: 10rem;
  }
}

/* Icon Studio (`/icon-studio/`) — pick a model icon, tune light and backdrop,
   set the pose, and take a screenshot. Controls sit in-flow above the
   full-width stage rectangle, directly on the page background. */

.icon-studio {
  & .icon-studio__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--m__gap-xxxl);
    row-gap: var(--m__gap-s);
    align-items: start;

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

  & .icon-studio__col {
    display: grid;
    gap: var(--m__gap-s);
  }

  & fieldset {
    margin: 0;
    padding: 0;
    border: 0;
  }

  & legend {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    /* Reserve the Reset button height so its appearance doesn't shift the
       rows below. */
    min-height: 1.1rem;
    padding: 0;
    margin-bottom: 0.35rem;
    font-size: var(--m__font-size-xs);
    line-height: 1;
    font-weight: var(--m__font-weight-bold);
  }

  /* Small outline button next to the group title; JS shows it only when
     something in the group differs from the defaults. */
  & .icon-studio__reset {
    padding: 0.1rem 0.3rem;
    border: var(--m__border-width-s) solid
      color-mix(in srgb, currentColor 40%, transparent);
    border-radius: var(--m__radius-s);
    background: none;
    color: var(--m__text-caption);
    font: inherit;
    font-size: 0.65rem;
    font-weight: var(--m__font-weight-medium);
    line-height: 1.1;
    cursor: pointer;

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

  /* Direct children only: labels nested inside rows (e.g. the segmented
     control) keep their component styling. */
  & fieldset > label {
    display: grid;
    grid-template-columns: 4rem minmax(5rem, 1fr) 2.4rem;
    gap: 0.35rem;
    align-items: center;
    font-size: var(--m__font-size-xs);
    color: var(--m__text-caption);
  }

  & fieldset > label.icon-studio__check {
    display: flex;
    gap: 0.35rem;
    cursor: pointer;

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

  /* Non-label rows (dropdowns, segmented controls): same first column as
     the labels, the control spans the input + output columns. */
  & .icon-studio__row {
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: 0.35rem;
    align-items: center;
    font-size: var(--m__font-size-xs);
    color: var(--m__text-caption);
  }

  & output {
    overflow: hidden;
    font-family: var(--m__font-family-mono);
    font-size: 0.72rem;
    color: var(--m__text);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Flat range: thin track with a filled progress part and a round thumb.
     JS keeps --icon-studio-range-progress in sync with the value. */
  & input[type="range"] {
    --icon-studio-range-progress: 0%;
    --icon-studio-range-track: 0.12em;
    --icon-studio-range-thumb: 0.65em;

    min-width: 0;
    height: 1.1rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;

    &::-webkit-slider-runnable-track {
      height: var(--icon-studio-range-track);
      border: 0;
      border-radius: 0;
      background: linear-gradient(
        to right,
        var(--m__text-caption) 0%,
        var(--m__text-caption) var(--icon-studio-range-progress),
        var(--m__border) var(--icon-studio-range-progress),
        var(--m__border) 100%
      );
    }

    &::-webkit-slider-thumb {
      width: var(--icon-studio-range-thumb);
      height: var(--icon-studio-range-thumb);
      margin-top: calc(
        (var(--icon-studio-range-track) - var(--icon-studio-range-thumb)) / 2
      );
      border: 0;
      border-radius: 50%;
      background: var(--m__text);
      box-shadow: none;
      appearance: none;
      -webkit-appearance: none;
    }

    &::-moz-range-track {
      height: var(--icon-studio-range-track);
      border: 0;
      border-radius: 0;
      background: var(--m__border);
    }

    &::-moz-range-progress {
      height: var(--icon-studio-range-track);
      border: 0;
      border-radius: 0;
      background: var(--m__text-caption);
    }

    &::-moz-range-thumb {
      width: var(--icon-studio-range-thumb);
      height: var(--icon-studio-range-thumb);
      border: 0;
      border-radius: 50%;
      background: var(--m__text);
      box-shadow: none;
    }
  }

  /* Custom dropdowns (icon picker, palette): summary shows the current
     value, the open state drops an absolutely positioned list. */
  & .icon-studio__dropdown,
  & .icon-studio__palette {
    position: relative;

    & summary {
      display: flex;
      gap: 0.35rem;
      align-items: center;
      padding: 0.15rem 0.25rem;
      border: 1px solid var(--m__border);
      border-radius: var(--m__radius-s);
      background-color: var(--m__bg);
      color: var(--m__text);
      font-size: var(--m__font-size-xs);
      list-style: none;
      cursor: pointer;

      &::-webkit-details-marker {
        display: none;
      }
    }
  }

  & .icon-studio__palette summary {
    font-family: var(--m__font-family-mono);
    font-size: 0.72rem;
  }

  & .icon-studio__dropdown summary svg {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    color: var(--m__text);
    fill: currentColor;
  }

  & .icon-studio__dropdown-list {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    z-index: 30;
    min-width: 100%;
    padding: 0.25rem;
    border: 1px solid var(--m__border);
    border-radius: var(--m__radius-s);
    background-color: var(--m__bg-surface);
    box-shadow: 0 0.5rem 2rem
      color-mix(in srgb, var(--m__text) 18%, transparent);

    & button {
      display: flex;
      gap: 0.35rem;
      align-items: center;
      width: 100%;
      padding: 0.25rem 0.35rem;
      border: 0;
      border-radius: var(--m__radius-s);
      background: none;
      color: var(--m__text);
      font: inherit;
      font-size: var(--m__font-size-xs);
      font-weight: var(--m__font-weight-medium);
      white-space: nowrap;
      text-align: left;
      cursor: pointer;

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

      & svg {
        width: 1.1rem;
        height: 1.1rem;
        flex-shrink: 0;
        fill: currentColor;
      }
    }
  }

  & .icon-studio__swatch {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--m__text) 25%, transparent);
    border-radius: var(--m__radius-s);
  }

  /* Design-system-style palette: flush rectangles, 4 per row, token names
     written small inside each plate. */
  & .icon-studio__palette-grid {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(4, 6rem);
    gap: 0;
    overflow: auto;
    max-height: 60vh;
    border: 1px solid var(--m__border);
    background-color: var(--m__bg-surface);
    box-shadow: 0 0.5rem 2rem
      color-mix(in srgb, var(--m__text) 18%, transparent);
  }

  & .icon-studio__palette-color {
    display: flex;
    align-items: flex-end;
    height: 2.4rem;
    padding: 0.25rem 0.35rem;
    border: 0;
    border-radius: 0;
    font-family: var(--m__font-family-mono);
    font-size: 0.62rem;
    line-height: 1;
    text-align: left;
    cursor: pointer;

    &:hover {
      outline: 2px solid var(--m__text);
      outline-offset: -2px;
    }
  }

  /* 2D pad for the key light: X maps to the light angle, Y to its height.
     The pad renders a sphere in the tile material under the same light
     scheme as the icon; the vertical slider on the right is the light Z. */
  & .icon-studio__light-pad {
    position: relative;
    margin-top: 0.35rem;
    aspect-ratio: 2.4;
    overflow: hidden;
    border: 1px solid var(--m__border);
    border-radius: var(--m__radius-s);
    background-color: var(--m__color-slate-900);
    cursor: crosshair;
    touch-action: none;

    & .icon-studio__light-pad-canvas {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
  }

  /* The type selector keeps this heavier than the generic range rule, so
     its fixed 1.1rem height doesn't shrink the vertical slider. */
  & input[type="range"].icon-studio__light-z {
    position: absolute;
    top: 0.35rem;
    right: 0.1rem;
    width: 1.1rem;
    height: calc(100% - 0.7rem);
    writing-mode: vertical-lr;
    direction: rtl;

    /* No progress fill on the vertical slider: the horizontal gradient
       logic doesn't rotate with the writing mode. */
    &::-webkit-slider-runnable-track {
      background: var(--m__border);
    }

    &::-moz-range-track {
      background: var(--m__border);
    }

    &::-moz-range-progress {
      background: var(--m__border);
    }
  }

  & .icon-studio__light-knob {
    position: absolute;
    width: 0.85rem;
    height: 0.85rem;
    border: 1px solid var(--m__bg-surface);
    border-radius: 50%;
    background-color: var(--m__color-yellow-500);
    box-shadow: 0 0 0 1px var(--m__border);
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  & .icon-studio__light-output {
    display: block;
    margin-top: 0.25rem;
  }

  & .icon-studio__anim-preset {
    margin: 0;
    justify-self: start;
  }

  /* The screenshot target. Aspect and background come from the controls via
     inline styles; the fixed text color keeps currentColor glyph parts
     independent of the page theme. */
  & .icon-studio__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--m__color-slate-900);
    color: var(--m__color-gray-900);
    cursor: crosshair;

    & .icon-studio__canvas {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
    }
  }
}

.palette-lamp-body {
  margin: 0;
  color: var(--m__color-gray-950);
  background-color: var(--m__color-white);
}

.palette-lamp-page {
  --palette-lamp-page-pad: clamp(1rem, 3vw, 2.5rem);
  --palette-lamp-stage-height: calc(
    100vh - var(--palette-lamp-page-pad) - var(--palette-lamp-page-pad)
  );
  --palette-lamp-glow-color: var(--m__color-purple-500);

  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: var(--palette-lamp-page-pad);
  background-color: var(--m__color-white);
  overflow: hidden;

  &:not(.is-on) {
    --palette-lamp-glow-color: var(--m__color-purple-500);
  }
}

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

.palette-lamp__stage {
  display: grid;
  grid-template-columns: minmax(32rem, 1fr) minmax(16rem, 28vw);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 5rem);
  width: 100%;
  max-width: 118rem;
  height: min(48rem, var(--palette-lamp-stage-height));
  margin-inline: auto;
}

.palette-lamp__palette {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  align-self: stretch;
  min-height: 0;
}

.palette-lamp__tile {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(0.45rem, 0.75vw, 0.7rem);
  font-weight: var(--m__font-weight-medium);
  line-height: 1.1;
  color: var(--palette-lamp-tile-ink-on);
  background-color: var(--palette-lamp-tile-on);
  transition:
    color var(--m__duration-medium) var(--m__easing-base),
    background-color var(--m__duration-medium) var(--m__easing-base);

  & span,
  & code {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  & span {
    font-size: clamp(0.72rem, 1vw, var(--m__font-size-s));
  }

  & code {
    padding: 0;
    font-family: var(--m__font-family-semi-mono);
    font-size: clamp(0.5rem, 0.7vw, var(--m__font-size-xs));
    color: inherit;
    background: transparent;
    opacity: 0.65;
  }
}

.palette-lamp-page:not(.is-on) .palette-lamp__tile {
  color: var(--palette-lamp-tile-ink-off);
  background-color: var(--palette-lamp-tile-off);
}

.palette-lamp__tile-value--off {
  display: none;
}

.palette-lamp-page:not(.is-on) {
  & .palette-lamp__tile-value--on {
    display: none;
  }

  & .palette-lamp__tile-value--off {
    display: inline;
  }
}

.palette-lamp__fixture {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--m__spacer-s);
  isolation: isolate;

  &::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: min(17rem, 78%);
    height: min(41rem, 78vh);
    border-radius: var(--m__radius-pill);
    background-color: var(--palette-lamp-glow-color);
    filter: blur(4rem);
    opacity: 0.28;
    transition: opacity var(--m__duration-medium) var(--m__easing-base);
  }
}

.palette-lamp-page:not(.is-on) .palette-lamp__fixture::before {
  opacity: 0;
}

.palette-lamp__svg {
  width: min(12rem, 100%);
  height: min(72vh, 40rem);
  overflow: visible;

  & .palette-lamp__glass-shell,
  & .palette-lamp__light-core,
  & .palette-lamp__cap,
  & .palette-lamp__glass-line {
    transition:
      opacity var(--m__duration-medium) var(--m__easing-base),
      fill var(--m__duration-medium) var(--m__easing-base),
      stroke var(--m__duration-medium) var(--m__easing-base);
  }

  & .palette-lamp__glass-shell {
    fill: transparent;
    stroke: color-mix(in srgb, var(--m__color-gray-200) 64%, transparent);
    stroke-width: 1.5;
  }

  & .palette-lamp__light-core {
    fill: var(--palette-lamp-glow-color);
    opacity: 0.2;
  }

  & .palette-lamp__cap {
    fill: var(--m__color-white);
    stroke: color-mix(in srgb, var(--m__color-gray-200) 72%, transparent);
    stroke-width: 1.5;
  }

  & .palette-lamp__glass-line {
    stroke: color-mix(in srgb, var(--m__color-gray-200) 48%, transparent);
    stroke-width: 1.5;
    stroke-linecap: round;
  }
}

.palette-lamp-page:not(.is-on) {
  & .palette-lamp__glass-shell {
    fill: transparent;
  }

  & .palette-lamp__light-core {
    opacity: 0;
  }

  & .palette-lamp__glass-line {
    opacity: 0.65;
  }
}

.palette-lamp__toggle {
  color: var(--m__color-gray-950);
}

/* Embedded variant — the figure inside a blog post keeps its own light context */
.palette-lamp-page.palette-lamp-embed {
  min-height: 0;
  padding: clamp(1rem, 2vw, 2rem);

  & .palette-lamp__stage {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 28%);
    height: auto;
  }

  & .palette-lamp__palette {
    min-height: 30rem;
  }

  & .palette-lamp__svg {
    height: min(28rem, 60vh);
  }

  & .palette-lamp__fixture::before {
    height: min(26rem, 56vh);
  }
}

@media (width < 900px) {
  .palette-lamp-page {
    overflow: auto;
  }

  .palette-lamp__stage {
    grid-template-columns: 1fr;
    height: auto;
  }

  .palette-lamp__palette {
    min-height: 38rem;
  }

  .palette-lamp__svg {
    height: min(32rem, 70vh);
  }
}

/* Blog section — /blog/ index and individual post pages */

/* Post meta line above the title: back link, author with photo, date */
.post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--m__gap-m);
  margin-bottom: var(--m__spacer-s);

  & .post-meta__author {
    display: inline-flex;
    align-items: center;
    gap: var(--m__gap-xxs);
  }

  & .post-meta__photo {
    width: 1.6em;
    height: 1.6em;
    border-radius: var(--m__radius-pill);
    object-fit: cover;
  }

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

/* Homepage row: section navbar with the blog link to its right */
.navbar-blog-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--m__gap-m);
}

/* Index page: column title above each series, like models-nav__col-title */
.posts-list-col-title {
  display: block;
  padding: 0.4rem 0 0.2rem;
  margin-bottom: var(--m__gap-xxs);
  font-family: var(--m__font-family-semi-mono);
  font-size: var(--m__font-size-s);
  font-weight: var(--m__font-weight-regular);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--m__text-caption);
}

/* Index page: plain column of links, no list markers */
.posts-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--m__gap-xs);

  & .posts-list__item {
    display: block;
  }
}

/* Date runs inline right after the post title */
.posts-list__caption {
  margin-left: var(--m__gap-xxxs);
  font-size: var(--m__font-size-s);
  color: var(--m__text-caption);
  white-space: nowrap;
}

/* Layers post: table of system layers with live token and component examples */
.layers-table {
  & td:first-child {
    width: 40%;
  }

  & .layers-table__tokens {
    display: flex;
    align-items: flex-start;
    gap: var(--m__gap-xl);
  }

  & .layers-table__token-stack {
    flex: 1;
    max-width: 11rem;
    display: flex;
    flex-direction: column;
    gap: var(--m__border-width-s);
  }

  & .layers-table__token-color {
    display: block;
    padding: 0.3rem 0.5rem;
  }

  & .layers-table__token-spacer {
    display: flex;
    align-items: center;
    gap: var(--m__gap-xs);

    & > span {
      flex: 1;
      background-color: color-mix(in srgb, var(--m__text) 12%, transparent);
    }
  }

  & code {
    padding: 0;
    background: transparent;
    color: inherit;
    font-family: var(--m__font-family-semi-mono);
    font-size: var(--m__font-size-xs);
  }

  & .layers-table__token-spacer code {
    color: var(--m__text-caption);
  }

  & .layers-table__components {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--m__gap-xl);
  }
}

/* Read next: full-width outline button at the end of a post.
   The a.-prefixed selector matches the specificity of the base button rules. */
a.read-next {
  display: flex;
  white-space: normal;
  text-align: center;
  font-weight: var(--m__font-weight-regular);

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

/* UI Architecture static diagram — structure vs layout illustration */
.ui-arch-diagram-wrap {
  max-width: 25em;
  width: 100%;
  margin-bottom: 1em;
}

@media (max-width: 767px) {
  .ui-arch-diagram-wrap {
    max-width: 100%;
  }
}

.ui-arch-diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5em;
  width: 100%;
  min-height: 15em;

  &.ui-arch-diagram--layout-only {
    display: block;
  }

  & .ui-arch-diagram__arrow {
    display: flex;
    align-items: center;
    /* justify-content: center; */
    width: 3rem;
    padding-bottom: 2em;

    color: color-mix(
      in srgb,
      var(--m__text, currentColor) 50%,
      transparent
    );
  }

  & .ui-arch-diagram__structure {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
  }

  & .ui-arch-diagram__path {
    display: block;
    font-size: 0.8rem;

    color: color-mix(
      in srgb,
      var(--m__text, currentColor) 70%,
      transparent
    );
  }

  & .ui-arch-diagram__structure-list {
    margin: 0;
    list-style: disc;
    font-size: 0.8rem;
  }

  & .ui-arch-diagram__structure-list li {
    margin-bottom: 0.2em;
  }

  & .ui-arch-diagram__section-frame {
    display: inline-block;
    margin-top: 0.15em;
    padding: 0.25em 0.5em;
    border: var(--m__border-width-s) solid
      color-mix(in srgb, var(--m__text, currentColor) 35%, transparent);
    border-radius: 0.35em;
  }

  & .ui-arch-diagram__section-frame-item {
    display: block;
    margin-bottom: 0.05em;
  }

  & .ui-arch-diagram__section-frame-item:last-child {
    margin-bottom: 0;
  }

  & .ui-arch-diagram__layout {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
  }

  & .ui-arch-diagram__section {
    position: relative;
    padding: 0.1em;
    padding-top: 0.75em;
    border: var(--m__border-width-s) dashed
      color-mix(in srgb, var(--m__text, currentColor) 25%, transparent);
    border-radius: 0.3em;
  }

  & .ui-arch-diagram__section-label {
    position: absolute;
    top: 0em;
    left: 0.2em;
    font-size: 0.6em;
    text-transform: uppercase;
    font-weight: var(--m__font-weight-medium);
    color: color-mix(
      in srgb,
      var(--m__text, currentColor) 30%,
      transparent
    );
  }

  & .ui-arch-diagram__block {
    padding: 0.2em 0.6em;
    border: var(--m__border-width-s) solid
      color-mix(in srgb, var(--m__text, currentColor) 30%, transparent);
    border-radius: 0.25em;
    text-align: center;
    font-size: 0.85em;
  }

  & .ui-arch-diagram__block--single {
    margin: 0 auto;
  }

  & .ui-arch-diagram__blocks-row {
    display: flex;
    gap: 0.2em;
  }

  & .ui-arch-diagram__blocks-row .ui-arch-diagram__block {
    flex: 1;
  }
}

/* UI Visualizer — semantic structure, extend via .ui-viz__* */
.ui-viz-intro {
  margin: 0 0 1em 0;
  font-size: 0.95rem;
}

.ui-viz {
  font-size: 0.9rem;
  line-height: 1.4;
  margin-top: 1.5em;

  & .ui-viz__table {
    border-spacing: 0;
    background-color: var(--m__bg);
    width: 100%;

    @media (max-width: 768px) {
      font-size: 0.7em;
    }

    thead {
      background-color: var(--m__bg);
    }

    tr {
      background-color: var(--m__bg);

      & th {
        position: sticky;
        top: 0;
        text-align: left;
        font-size: 0.75em;
        font-weight: var(--m__font-weight-regular);
        border-bottom: var(--m__border-width-s) solid
          color-mix(in srgb, var(--m__text) 30%, transparent);
        padding-bottom: 0.3em;
        padding-top: 0.3em;
        background-color: var(--m__bg);
        z-index: 1;

        @media (max-width: 768px) {
          padding-top: 0.8em;
        }
      }

      & td {
        padding: 0.8em 0.5em 1em 0;
        border-bottom: var(--m__border-width-s) solid
          color-mix(in srgb, var(--m__text) 12%, transparent);
        vertical-align: top;
        background-color: var(--m__bg);
      }

      &:last-child {
        & td {
          border-bottom: none;
        }
      }
    }
  }

  & .ui-viz__route-path {
    display: block;
    margin: 0 0 0.4em 0;
    font-size: 0.85em;
    color: color-mix(
      in srgb,
      var(--m__text, currentColor) 70%,
      transparent
    );
  }

  & .ui-viz__empty {
    margin: 0;
    font-size: 0.9em;
    color: color-mix(
      in srgb,
      var(--m__text, currentColor) 55%,
      transparent
    );
  }

  & .ui-viz__sections {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  & .ui-viz__subsections {
    margin-top: 0.75em;
    display: flex;
    flex-direction: column;
    gap: 0.75em;
  }

  & .ui-viz__subsection-title {
    margin: 0 0 0.35em 0;
    font-size: 0.95em;
    font-weight: var(--m__font-weight-bold);
    color: color-mix(
      in srgb,
      var(--m__text, currentColor) 85%,
      transparent
    );
  }

  & .ui-viz__section {
    position: relative;
    margin-bottom: 0.25em;
    padding-left: 0.8rem;

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

  & .ui-viz__section--widget,
  & .ui-viz__section--widgets {
    padding-left: 0;

    &::before {
      content: none;
    }

    & .ui-viz__section-frame {
      display: inline-block;
      margin-top: 0.25em;
      padding: 0.35em 0.6em;
      border: var(--m__border-width-s) solid
        color-mix(in srgb, var(--m__text, currentColor) 35%, transparent);
      border-radius: 0.35em;
    }

    & .ui-viz__section-frame-list {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    & .ui-viz__section-frame-item {
      position: relative;
      margin-bottom: 0.1em;
      padding-left: 0.8rem;

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

    & .ui-viz__section-frame-item:last-child {
      margin-bottom: 0;
    }
  }

  & .ui-viz__section--content {
    color: color-mix(
      in srgb,
      var(--m__text, currentColor) 75%,
      transparent
    );
  }

  & .ui-viz__states {
    color: color-mix(
      in srgb,
      var(--m__text, currentColor) 70%,
      transparent
    );
    font-size: 0.9em;
  }

  & .ui-viz__error {
    color: rgba(var(--ids__UI-error-RGB), 1);
  }
}

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

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

html:has(.dashboard-layout) {
  scrollbar-gutter: stable;
}

.dashboard-layout {
  display: flex;
  align-items: flex-start;
  gap: var(--m__gap-xl);

  @media (width < 767px) {
    flex-direction: column;
    align-items: stretch;
  }

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

.m__wrapper:has(.dashboard-layout) {
  max-width: 1280px;
}

.dashboard-content {
  flex: 1;
}

.nav-sidebar {
  position: sticky;
  top: 1rem;
  flex-shrink: 0;

  @media (width < 768px) {
    display: none;
  }
}

.dashboard-content {
  & p {
    font-size: var(--m__font-size-s);
  }

  & > p,
  & > .dashboard-section > p,
  & .dashboard-page-title + p {
    max-width: 90ch;
  }

  & .dashboard-page-title {
    margin: 0.15rem 0 1rem;
    font-size: var(--m__font-size-xl);
    font-weight: var(--m__font-weight-bold);
  }

  & .dashboard-page-title:has(+ p),
  & .dashboard-page-title:has(+ .dashboard-section > p:first-child) {
    margin-bottom: var(--m__default-margin-bottom);
  }

  & > .m__segmented-control-primary:first-child,
  & > .conversations-page-nav:first-child {
    margin-top: 0.15rem;
  }

  & .conversations-page-nav {
    margin-bottom: 0.75rem;
  }

  & .dashboard-section {
    margin-bottom: 0.5rem;

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

  & .dashboard-stats {
    display: grid;
    grid-template-columns: minmax(11rem, 2fr) minmax(0, 3fr);
    gap: var(--m__gap-xs);

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

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

  & .m__widget .m__col-actions:has(.m__toggle-primary) {
    padding-left: 2rem;
  }

  & .m__widget :is(.m__datepicker, .m__select) {
    font-size: var(--m__font-size-s);
  }

  & .chart-empty {
    font-size: var(--m__font-size-s);
    color: var(--m__text-caption);
  }

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

  & .model-limits-table {
    min-width: 46rem;

    & th:nth-child(2),
    & td:nth-child(2) {
      width: 32%;
    }

    & th:nth-child(3),
    & td:nth-child(3) {
      width: 12rem;
      padding-left: 3rem;
      white-space: nowrap;
    }
  }

  & .model-limits-quota {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }

  & .model-limits-name {
    font-weight: var(--m__font-weight-bold);
  }

  & .model-limits-meta {
    color: var(--m__text-caption);
    font-size: var(--m__font-size-s);
    text-transform: capitalize;
  }

  & .model-limits-meta::first-letter {
    text-transform: uppercase;
  }

  & .model-limits-progress {
    display: grid;
    grid-template-columns: minmax(9rem, 1fr) 2.5rem;
    align-items: center;
    gap: 0.4rem;
  }

  & .model-limits-progress__track {
    position: relative;
    height: 0.5rem;
    min-width: 0;
    overflow: hidden;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--m__text) 12%, transparent);
  }

  & .model-limits-progress__bar {
    display: block;
    width: var(--limit-progress);
    height: 100%;
    border-radius: inherit;
    background-color: var(--m__text);
  }

  & .model-limits-progress__value {
    color: var(--m__text-caption);
    font-weight: var(--m__font-weight-medium);
    text-align: right;
  }

  & .model-limits-used {
    color: var(--m__text);
  }
}

/* Insights */

.insights-page {
  & .insights-plain-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;

    & > * {
      min-width: 0;
    }

    @media (width < 1100px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

  & .insights-plain-widget {
    min-height: 10rem;
  }

  & .insights-widget-value-text {
    overflow-wrap: anywhere;
  }

  & .insights-widget-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;

    & h2 {
      margin: 0 0 0.25rem;
    }

    & p {
      margin: 0;
      color: var(--m__text-caption);
      font-size: var(--m__font-size-s);
      line-height: 1.35;
    }
  }

  & .insights-alerts-table {
    min-width: 42rem;
  }

  & .insights-empty-row td {
    padding: 2.5rem 1rem;
    text-align: center;
  }

  & .insights-empty-state {
    display: flex;
    min-height: 7.5rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    color: var(--m__text-caption);

    & strong {
      color: var(--m__text);
      font-size: var(--m__font-size-s);
      font-weight: var(--m__font-weight-bold);
    }

    & span {
      max-width: 28rem;
      font-size: var(--m__font-size-s);
      line-height: 1.35;
    }
  }
}

/* Conversation upload */

.conversation-create-page {
  & .conversation-create-upload {
    min-height: 21rem;
  }
}

.conversation-upload-plate {
  &.pg-upload-plate {
    transition:
      min-height 150ms var(--m__easing-base),
      border-color 150ms var(--m__easing-base),
      background-color 150ms var(--m__easing-base);
  }

  &[data-expanding="true"] > .conversation-upload-model-row,
  &[data-expanding="true"] .pg-upload-actions,
  &[data-expanding="true"] .pg-upload-plate-footer {
    animation: conversation-upload-reveal 160ms var(--m__easing-base) both;
  }

  &[data-expanding="true"] .pg-upload-actions {
    animation-delay: 20ms;
  }

  &[data-expanding="true"] .pg-upload-plate-footer {
    animation-delay: 35ms;
  }

  &.pg-upload-plate > .conversation-upload-model-row {
    right: auto;
    width: auto;
    min-height: 0;
    padding: 0.65rem 0.75rem;
    border-bottom: none;
    background-color: transparent;
    pointer-events: auto;
  }

  & .conversation-upload-model-controls {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: var(--m__font-size-s);
  }

  & .conversation-report__report-menu--text {
    display: inline-flex;
    width: auto;
    max-width: none;
  }

  & button.conversation-report__report-trigger--text {
    display: inline-flex;
    align-items: baseline;
    gap: 0.2em;
    padding: 0;
    border: 0;
    background: none;
    color: var(--m__text);
    font: inherit;
    font-size: var(--m__font-size-s);
    font-weight: var(--m__font-weight-medium);
    cursor: pointer;
    transition: color var(--m__duration-base) var(--m__easing-base);
  }

  &
    button.conversation-report__report-trigger--text:is(
      :hover,
      :focus-visible,
      .m__menu-button-trigger--active
    ) {
    color: var(--m__text-link-hover);
    transition-duration: var(--m__duration-instant);
  }

  & .conversation-report__report-trigger--text:focus-visible {
    outline: var(--m__border-width-m) solid currentColor;
    outline-offset: 0.18rem;
  }

  &
    .conversation-report__report-trigger--text
    .conversation-report__report-trigger-label {
    color: var(--m__text-caption);
    font-weight: var(--m__font-weight-regular);
  }

  &
    .conversation-report__report-trigger--text
    .conversation-report__report-trigger-text {
    min-width: 0;
    font-weight: var(--m__font-weight-medium);
    line-height: 1.2;
    white-space: nowrap;
  }

  & .conversation-report__report-trigger--text .m__button__icon {
    width: 0.85em;
    height: 0.85em;
    flex: 0 0 auto;
    align-self: center;
    color: var(--m__bg-accent);
    pointer-events: none;
    stroke: currentColor;
    stroke-width: 0.65;
    stroke-linejoin: round;
    transition: color var(--m__duration-base) var(--m__easing-base);
  }

  &
    button.conversation-report__report-trigger--text:is(
      :hover,
      :focus-visible,
      .m__menu-button-trigger--active
    )
    .m__button__icon {
    color: var(--m__text-link-hover);
    transition-duration: var(--m__duration-instant);
  }

  & .pg-upload-collapse {
    left: auto;
    top: 0.1rem;
    right: 0.1rem;
    background-color: transparent;
    color: var(--m__bg-accent);
    backdrop-filter: none;
  }

  & .pg-upload-collapse:hover,
  & .pg-upload-collapse:focus-visible {
    background-color: transparent;
    color: var(--m__text-link-hover);
  }

  & .conversation-upload-button {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--m__spacer-xxs);
    padding: var(--m__padding-button-m);
    border: var(--m__border-width-m) solid var(--m__bg-accent);
    border-radius: var(--m__radius-m);
    background-color: transparent;
    color: var(--m__text);
    font: inherit;
    font-weight: var(--m__font-weight-medium);
    white-space: nowrap;
    cursor: pointer;
    transition:
      color var(--m__duration-base) var(--m__easing-base),
      border-color var(--m__duration-base) var(--m__easing-base);

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

  & .conversation-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }

  & .pg-upload-stream {
    display: none;
  }
}

@keyframes conversation-upload-reveal {
  from {
    opacity: 0;
    transform: translateY(-0.2rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .conversation-upload-plate[data-expanding="true"]
    > .conversation-upload-model-row,
  .conversation-upload-plate[data-expanding="true"] .pg-upload-actions,
  .conversation-upload-plate[data-expanding="true"] .pg-upload-plate-footer {
    animation: none;
  }
}

main.dashboard-content .conversation-upload-plate[data-state="uploaded"] {
  border: var(--m__border-width-s) solid
    color-mix(in srgb, currentColor 25%, transparent);
  background-color: transparent;
  color: var(--m__text);
  transition:
    min-height 150ms var(--m__easing-base),
    color var(--m__duration-base) var(--m__easing-base);
}

main.dashboard-content .conversation-upload-plate[data-state="uploaded"]:hover {
  color: var(--m__text-link-hover);
  transition-duration: var(--m__duration-instant);
}

main.dashboard-content
  .conversation-upload-plate[data-state="uploaded"]
  .pg-upload-collapsed-cta {
  min-height: 3rem;
}

[data-component="credit-balance-over-time"] .chart-container,
[data-component="conversation-volume-over-time"] .chart-container,
#credit-balance-chart,
#conversation-volume-chart {
  height: 8rem !important;
  max-height: 8rem !important;
}

[data-component="usage-by-model"] .chart-container,
[data-component="requests-by-status"] .chart-container,
#usage-by-model-chart,
#request-status-chart {
  height: 18rem !important;
  max-height: 18rem !important;
}

table.org-details {
  font-size: var(--m__font-size-s);
  & th,
  & td {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }

  & th {
    width: 1%;
    white-space: nowrap;
    font-weight: var(--m__font-weight-bold);
    color: var(--m__text);
    background-color: transparent;
    position: static;
    padding-right: 2rem;
    padding-left: 0;
  }

  & td:last-child {
    width: 1%;
    white-space: nowrap;
    text-align: right;
    padding-right: 0;
    padding-left: 0;
  }

  & tbody tr:first-child th,
  & tbody tr:first-child td {
    padding-top: 0;
  }

  & tbody tr:last-child th,
  & tbody tr:last-child td {
    padding-bottom: 0;
  }

  @media (width < 600px) {
    &,
    & tbody {
      display: block;
    }

    & tbody tr {
      display: flex;
      flex-direction: column;
      padding: 0.75rem 0;
      border-bottom: var(--m__border-width-s) solid
        color-mix(in srgb, var(--m__text) 12%, transparent);
    }

    & tbody tr:last-child {
      padding-bottom: 0;
      border-bottom: none;
      gap: var(--m__gap-xxxxs);
    }

    & tbody tr:first-child {
      padding-top: 0;
    }

    & th,
    & td,
    & td:last-child {
      width: auto;
      white-space: normal;
      text-align: left;
      border-bottom: none;
      padding: 0;
      padding-right: 0;
    }

    & th {
      padding-bottom: 0.4rem;
    }

    & td + td {
      margin-top: 0.75rem;
    }
  }
}

[data-org-edit-form] {
  --dashboard-inline-edit-control-block-size: calc(
    1lh + 0.6rem + (2 * var(--m__border-width-s))
  );

  display: none;
  gap: var(--m__gap-nav-menu-item);
  align-items: center;
  width: 100%;

  & .m__textfield {
    margin: 0;
    flex: 1;
  }

  & .m__textfield input {
    padding: var(--m__padding-input-s);
    min-block-size: var(--dashboard-inline-edit-control-block-size);
  }

  & :is(.m__button-primary, .m__button-secondary-outline) {
    align-items: center;
    line-height: var(--m__line-height-base);
    min-block-size: var(--dashboard-inline-edit-control-block-size);
  }
}

.account-details th,
.account-details td {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.account-details td[colspan],
table.account-details td:last-child {
  text-align: left;
  width: auto;
  white-space: normal;
}

table.config-details {
  & td:last-child {
    width: auto;
    white-space: normal;
    text-align: left;
  }

  & .m__textfield {
    margin: 0;
  }

  & .config-details-name {
    max-width: 24rem;
  }
}

.account-name-field {
  margin: 0 0 0.75rem;
  max-width: 16rem;
}

.account-password-fields {
  display: flex;
  flex-direction: column;
  gap: var(--m__gap-xxs);
  margin-bottom: 0.75rem;
  max-width: 16rem;

  & .m__textfield {
    margin: 0;
  }
}

.account-opt-out-note {
  font-size: var(--m__font-size-xs);
  margin: 0.3rem 0 0;
}

.billing-intro {
  margin-bottom: 0;
}

.billing-block-gap {
  height: 0.5rem;
}

.billing-credit-code {
  --billing-form-control-block-size: calc(
    1lh + 1rem + (2 * var(--m__border-width-s))
  );

  display: flex;
  flex-direction: column;
  font-size: var(--m__font-size-s);

  & .billing-credit-code__description {
    color: var(--m__text-caption);
    margin-bottom: 0;
    flex: 1;
  }

  & .billing-credit-code__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: var(--m__gap-xs);
    margin-top: 0.75rem;

    & .m__textfield {
      flex: 1;
      min-width: 0;
      margin: 0;
    }

    & .m__textfield input {
      background-color: transparent;
      padding: var(--m__padding-input-m);
      min-block-size: var(--billing-form-control-block-size);

      &:focus-visible {
        background-color: transparent;
      }
    }

    & .m__button-secondary {
      align-items: center;
      line-height: var(--m__line-height-base);
      min-block-size: var(--billing-form-control-block-size);
    }

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

      & .m__button-secondary {
        width: 100%;
      }
    }
  }
}

.billing-purchase {
  --billing-purchase-control-font-size: var(--m__font-size-s);
  --billing-purchase-control-block-size: calc(
    var(--billing-purchase-control-font-size) * var(--m__line-height-base) +
      1rem + (2 * var(--m__border-width-s))
  );

  margin-bottom: 0;
  font-size: var(--m__font-size-s);

  & .billing-purchase__body {
    margin-top: 0.75rem;
  }

  & .billing-purchase__controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(9rem, max-content);
    align-items: stretch;
    gap: 0.375rem;
    font-size: var(--billing-purchase-control-font-size);
  }

  & .billing-purchase__presets {
    display: grid;
    grid-column: span 3;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.375rem;
    margin: 0;

    & .m__radio-card {
      justify-content: flex-start;
      block-size: var(--billing-purchase-control-block-size);
      min-block-size: 0;
      padding: var(--m__padding-input-m);
      overflow: hidden;
    }
  }

  & .m__textfield {
    min-width: 0;
    margin: 0;
  }

  & .m__textfield input {
    background-color: transparent;
    font: inherit;
    padding: var(--m__padding-input-m);
    min-block-size: var(--billing-purchase-control-block-size);

    &:focus-visible {
      background-color: transparent;
    }
  }

  & .billing-pay-btn {
    align-items: center;
    line-height: var(--m__line-height-base);
    min-width: 7.5rem;
    min-block-size: var(--billing-purchase-control-block-size);
    overflow: visible;
    text-overflow: clip;
    width: 100%;
  }

  @media (width < 1100px) {
    & .billing-purchase__controls {
      grid-template-columns: minmax(0, 1fr) minmax(9rem, max-content);
      gap: 0.5rem;
    }

    & .billing-purchase__presets {
      grid-column: 1 / -1;
    }
  }

  @media (width < 520px) {
    & .billing-purchase__controls,
    & .billing-purchase__presets {
      grid-template-columns: 1fr;
    }

    & .billing-pay-btn {
      width: 100%;
    }
  }
}

.dashboard-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--m__gap-nav);
  font-size: var(--m__font-size-s);
  color: var(--m__text-caption);
  text-decoration: none;
  margin-left: -0.22rem;
  transition: color var(--m__duration-base) var(--m__easing-base);

  & svg {
    flex-shrink: 0;
  }

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

.behaviors-toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--m__gap-nav-menu-item);
}

@media (max-width: 768px) {
  .m__widget-header:has(.behaviors-toolbar-actions) {
    flex-wrap: wrap;
    padding-bottom: 0.75rem;

    & .m__searchbar {
      flex: 1 1 100%;
    }

    & .behaviors-toolbar-actions {
      width: 100%;
      padding: 0 var(--m__widget-padding);
      box-sizing: border-box;

      & > * {
        flex: 1;
        justify-content: center;
      }
    }
  }
}

/* Config edit page — Behaviors widget title row */

.config-behaviors-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;

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

/* Config fields */

.config-fields {
  display: flex;
  flex-direction: column;
  gap: var(--m__gap-m);
}

.config-field {
  display: flex;
  flex-direction: column;
  gap: var(--m__gap-xxxs);

  & .m__textfield {
    margin: 0;
  }

  &:first-child {
    max-width: 50%;

    @media (max-width: 600px) {
      max-width: 100%;
    }
  }
}

.config-field-label {
  font-size: var(--m__font-size-s);
  font-weight: var(--m__font-weight-medium);
}

/* Config edit page */

.config-form {
  & .m__select select {
    padding: var(--m__padding-input-s);
    padding-inline-end: 2rem;
  }

  & .m__textfield {
    margin-bottom: 0;
  }
}

/* Form footer actions */

.config-form-actions {
  position: sticky;
  z-index: 20;
  bottom: 0;
  display: flex;
  gap: var(--m__gap-xs);
  align-items: center;
  padding: 1rem 0;
  background: linear-gradient(to bottom, transparent, var(--m__bg) 40%);
  margin-top: 0.5rem;
}

/* === Behaviors widget (config create) === */

.bw-behavior-cell {
  vertical-align: top;
  width: 55%;
}

.bw-behavior-name {
  font-size: var(--m__font-size-s);
  font-weight: var(--m__font-weight-medium);
  line-height: 1.3;
  color: var(--m__text);
}

.bw-behavior-desc {
  font-size: var(--m__font-size-xs);
  color: var(--m__text-caption);
  margin-top: 0.1rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bw-behavior-name .m__tag-flat {
  margin-left: 0.1rem;
}

.bw-tags-cell {
  vertical-align: top;
  padding-left: 0.5rem;
}

.bw-cell-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m__gap-xxxs);
  align-items: center;
  padding-top: 0.05rem;
}

.bw-tag-item-name {
  overflow: hidden;
  white-space: nowrap;
  min-width: 0;
  padding-bottom: 0.15em;
  margin-bottom: -0.15em;
  cursor: pointer;

  &.is-truncated {
    mask-image: linear-gradient(
      to right,
      black calc(100% - 1rem),
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      black calc(100% - 1rem),
      transparent 100%
    );
  }
}

.bw-tag-item {
  display: inline-flex;
  align-items: center;
  gap: var(--m__gap-xxxxs);
  max-width: 100%;
  padding-right: 0;
  transition: border-color var(--m__duration-base) var(--m__easing-base);

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

.bw-tag-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0.25rem 0.3rem 0.25rem 0.1rem;
  margin: -0.25rem 0;
  cursor: pointer;
  color: currentColor;
  opacity: 0.5;
  line-height: 1;
  flex-shrink: 0;
  transition: opacity var(--m__duration-base) var(--m__easing-base);

  &:hover {
    opacity: 1;
    transition-duration: var(--m__duration-instant);
  }
}

.bw-tags-cell {
  cursor: pointer;
  transition: background-color var(--m__duration-base) var(--m__easing-base);

  &:hover,
  &.bw-cell--active {
    background-color: color-mix(
      in srgb,
      var(--m__bg-accent-hover) 5%,
      transparent
    );
    transition-duration: var(--m__duration-instant);
  }
}

#bw-configurations th:nth-child(2),
#bw-configurations td:nth-child(2) {
  white-space: nowrap;
  min-width: 9rem;
}

#bw-list table,
#bw-matrix table {
  table-layout: fixed;
  width: 100%;
}

#bw-list .m__table-wrapper {
  margin: 0 calc(-1 * var(--m__widget-padding));
}

#bw-list table {
  min-width: 36rem;
}

#bw-list th:nth-child(1),
#bw-list td:nth-child(1) {
  padding-left: var(--m__widget-padding);
  width: 43%;
}

#bw-list th:nth-child(2),
#bw-list td:nth-child(2),
#bw-list th:nth-child(3),
#bw-list td:nth-child(3) {
  padding-left: 0.5rem;
}

#bw-list th:nth-child(2),
#bw-list th:nth-child(3) {
  width: 25%;
}

#bw-list th:nth-child(4),
#bw-list td:nth-child(4) {
  width: 7%;
  padding-left: 0.75rem;
  padding-right: var(--m__widget-padding);
}

#bw-list tbody tr [data-bw-delete] {
  color: var(--m__error);
}

@media (hover: hover) {
  #bw-list tbody tr [data-bw-delete] {
    opacity: 0;
    transition: opacity var(--m__duration-base) var(--m__easing-base);
  }

  #bw-list tbody tr:hover [data-bw-delete] {
    opacity: 1;
    transition-duration: var(--m__duration-instant);
  }
}

.bw-behavior-cell[data-bw-edit] {
  cursor: pointer;
}

#bw-list tbody tr td {
  transition: background-color var(--m__duration-base) var(--m__easing-base);
}

#bw-list tbody tr:not(.bw-empty-row) td:not(:last-child):hover {
  background-color: color-mix(
    in srgb,
    var(--m__bg-accent-hover) 5%,
    transparent
  );
  outline: 1px solid color-mix(in srgb, var(--m__text) 20%, transparent);
  outline-offset: -1px;
  transition-duration: var(--m__duration-instant);
}

#bw-list tbody tr:not(.bw-empty-row):has(td:last-child:hover) {
  outline: 1px solid color-mix(in srgb, var(--m__text) 20%, transparent);
  outline-offset: -1px;
}

#bw-list tbody tr:not(.bw-empty-row):has(td:last-child:hover) td {
  background-color: color-mix(
    in srgb,
    var(--m__bg-accent-hover) 5%,
    transparent
  );
  transition-duration: var(--m__duration-instant);
}

#bw-list .bw-empty-row td {
  height: 14rem;
  vertical-align: middle;
}

#bw-list .bw-empty-row .m__table-empty {
  padding-block: 0;
}

#bw-list .bw-empty-row .m__table-empty p {
  font-size: var(--m__font-size-s);
}

#bw-matrix th:first-child,
#bw-matrix td:first-child {
  width: 45%;
}

/* Behaviors add modal */

.m__modal--wide {
  max-width: 68rem;
}

.bw-add-modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--m__gap-xs);
  padding-bottom: 0;
}

.bw-add-list {
  display: flex;
  flex-direction: column;
  max-height: 30rem;
  overflow-y: auto;
}

.bw-add-item {
}

.bw-add-item-label {
  display: flex;
  align-items: flex-start;
  gap: var(--m__gap-s);
  padding: 0.45rem 0.65rem;
  border-radius: var(--m__radius-m);
  cursor: pointer;
  transition: background-color var(--m__duration-base) var(--m__easing-base);

  & .m__checkbox-primary {
    margin-top: 0.05rem;
    flex-shrink: 0;
  }

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

.bw-add-item-text {
  display: flex;
  flex-direction: column;
  gap: var(--m__gap-xxxxs);
  min-width: 0;
}

.bw-add-item-name {
  display: flex;
  align-items: center;
  gap: var(--m__gap-xs);
  font-size: var(--m__font-size-s);
  font-weight: var(--m__font-weight-medium);
  color: var(--m__text);
  line-height: 1.3;
}

.bw-add-item-desc {
  font-size: var(--m__font-size-xs);
  color: var(--m__text-caption);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#modal-behaviors-add .m__modal__footer #bw-add-create-btn {
  margin-right: auto;
}

.bw-add-empty {
  font-size: var(--m__font-size-s);
  color: var(--m__text-caption);
  text-align: center;
  padding: 1rem 0;
  margin: 0;
}

.bw-save-to-library-toggle[hidden] {
  display: none;
}

.bw-save-to-library-row {
  display: flex;
  flex-direction: column;
  gap: var(--m__gap-xxxxs);
  cursor: pointer;
}

.bw-save-to-library-top {
  display: flex;
  align-items: center;
  gap: var(--m__gap-xxs);
}

.bw-save-to-library-row .m__modal__field-hint {
  margin: 0;
}

/* === Inline template dropdown === */

.bw-prompt-header {
  display: flex;
  align-items: baseline;
  gap: var(--m__gap-xxxxs);
  margin-bottom: 0.3rem;

  & label {
    font-size: var(--m__font-size-s);
    font-weight: var(--m__font-weight-medium);
    color: var(--m__text);
  }
}

.bw-prompt-sep {
  font-size: var(--m__font-size-s);
  color: var(--m__text-caption);
}

.bw-prompt-link {
  font-size: var(--m__font-size-s);
}

#behavior-prompt,
#behavior-edit-prompt,
#conversation-type-prompt,
#conversation-type-edit-prompt,
#role-prompt,
#role-edit-prompt {
  min-height: calc(10 * 1.3em + 1rem);
}

.m__label-optional {
  font-weight: var(--m__font-weight-regular);
  color: var(--m__text-caption);
}

.bw-tpl-wrap {
  position: relative;
}

.bw-tpl-trigger-value {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.bw-tpl-trigger-label {
  display: none;
  font-weight: var(--m__font-weight-medium);
  color: var(--m__text-caption);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--m__duration-base) var(--m__easing-base);

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

.bw-tpl-trigger.has-value .bw-tpl-trigger-label {
  display: block;
}

.bw-tpl-trigger.has-value:hover .bw-tpl-trigger-label {
  color: var(--m__text-link-hover);
  transition-duration: var(--m__duration-instant);
}

#bw-tpl-trigger-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bw-tpl-dropdown {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  right: 0;
  width: auto;

  & .m__popover-list {
    min-height: 20rem;
    max-height: 20rem;
    padding-right: 0;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--m__border) transparent;

    &::-webkit-scrollbar {
      width: 4px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 2px;
      background-color: color-mix(in srgb, currentColor 30%, transparent);
    }
  }
}

.bw-tpl-tags {
  padding: 0.4rem 0.55rem;
}

.bw-tpl-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--m__gap-m);
  width: 100%;
  padding: 0.45rem 0.65rem;
  border-radius: var(--m__radius-m);
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: var(--m__text);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;

  @media (max-width: 768px) {
    flex-wrap: wrap;
    white-space: normal;
    row-gap: var(--m__gap-xxxxs);
  }
  transition: background-color var(--m__duration-base) var(--m__easing-base);

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

  &.is-selected {
    color: var(--m__text-link);
  }

  &.is-dimmed {
    color: var(--m__text-caption);
    opacity: 0.6;

    & .bw-tpl-item-usecase {
      color: inherit;
    }
  }
}

.bw-tpl-item-usecase {
  flex-shrink: 0;
  color: var(--m__text-caption);
  font-weight: var(--m__font-weight-regular);
  font-size: var(--m__font-size-s);

  @media (max-width: 768px) {
    flex-basis: 100%;
    margin-left: 0;
  }
}

.bw-tpl-empty {
  margin: 0;
  padding: 0.4rem 0.65rem;
  font-size: var(--m__font-size-xs);
  color: var(--m__text-caption);
}

.bw-tpl-empty[hidden] {
  display: none;
}

.conversations-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.5rem;

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

.conversations-analytics-widget,
.conversations-chart-widget {
  min-width: 0;
  min-height: 14rem;
}

.conversations-table {
  & .conversations-table__header {
    display: grid;
    grid-template-columns:
      minmax(16rem, 1.2fr)
      minmax(20rem, 32rem)
      max-content;
    align-items: stretch;
    width: 100%;
  }

  & .conversations-table__header > .m__searchbar {
    min-width: 16rem;
  }

  & .conversations-table__header > .conversations-table__filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    position: relative;

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

  & .m__datepicker.S.conversations-table__date-range {
    gap: 0.18rem;
    min-width: 0;
    width: 100%;
  }

  & .m__datepicker.S.conversations-table__date-range input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
  }

  & .conversations-table__date-range-value {
    appearance: none;
    border: none;
    background: none;
    color: var(--m__text);
    cursor: pointer;
    flex: 0 0 auto;
    font: inherit;
    line-height: 1;
    padding: 0;
    transition: color var(--m__duration-base) var(--m__easing-base);

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

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

  & .m__datepicker.S.conversations-table__date-range::after {
    display: none;
  }

  &
    .m__datepicker.S.conversations-table__date-range
    .conversations-table__date-range-separator {
    flex: 0 0 auto;
    color: var(--m__text-caption);
    font-weight: var(--m__font-weight-medium);

    &::after {
      content: "";
      margin: 0;
    }
  }

  & .conversations-table__header > .conversations-table__actions {
    align-items: center;
    justify-content: flex-end;
    min-width: max-content;
  }

  & table {
    min-width: 100%;
    table-layout: fixed;
  }

  & .conversations-table__col-conversation {
    width: 39%;
  }

  & .conversations-table__col-fingerprint {
    width: 29%;
  }

  & .conversations-table__col-detection {
    width: 28%;
  }

  & .conversations-table__col-actions {
    width: 4%;
  }

  & .conversations-table__last-visible td {
    border-bottom: none;
  }

  & .conversations-table__audio {
    min-width: 0;
  }

  & .conversations-table__audio-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
  }

  & .conversations-table__audio-text {
    flex: 1 1 auto;
    min-width: 0;
  }

  & .conversations-table__audio-link {
    display: block;
    color: inherit;
    text-decoration: none;

    &:focus-visible {
      border-radius: 0.18rem;
      outline: 0.06rem solid currentColor;
      outline-offset: 0.12rem;
    }

    &:is(:hover, :focus-visible)
      :is(.conversations-table__title, .conversations-table__meta) {
      color: var(--m__text-link-hover);
      transition-duration: 0s;
      transition-timing-function: ease;
    }
  }

  & .conversations-table__title {
    display: -webkit-box;
    color: inherit;
    font-size: var(--m__font-size-s);
    font-weight: var(--m__font-weight-bold);
    line-height: 1.2;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    transition: color 0.5s ease;
    white-space: normal;
  }

  & .conversations-table__meta {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-top: 0.08rem;
    min-width: 0;
    color: var(--m__text-caption);
    font-size: var(--m__font-size-xs);
    font-variant-numeric: tabular-nums;
    transition: color 0.5s ease;
  }

  & .conversations-table__uploaded-line .conversations-table__uploaded-source,
  &
    .conversations-table__uploaded-line
    .conversations-table__uploaded-separator,
  & .conversations-table__uploaded-line .conversations-table__uploaded-date {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
  }

  & .conversations-table__uploaded-line .conversations-table__uploaded-source,
  & .conversations-table__uploaded-line .conversations-table__uploaded-date {
    display: inline;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  & .conversations-table__uploaded-line .conversations-table__uploaded-source {
    flex: 0 1 auto;
  }

  &
    .conversations-table__uploaded-line
    .conversations-table__uploaded-separator,
  & .conversations-table__uploaded-line .conversations-table__uploaded-date {
    flex: 0 0 auto;
  }

  & .conversations-table__fingerprint-cell {
    min-width: 0;
    vertical-align: top;
  }

  & .conversations-table__fingerprint-link {
    display: flex;
    align-items: flex-start;
    gap: 0.28rem;
    width: 100%;
    max-width: 100%;
    color: inherit;
    text-decoration: none;

    &:is(:hover, :focus-visible) {
      color: var(--m__text-link-hover);
      transition-duration: var(--m__duration-instant);

      & .conversations-table__fingerprint {
        filter: brightness(103%) saturate(102%);
        transition-duration: var(--m__duration-instant);
      }

      & .conversations-table__fingerprint-duration {
        color: var(--m__text-link-hover);
        transition-duration: 0s;
        transition-timing-function: ease;
      }
    }

    &:focus-visible {
      border-radius: 0.35rem;
      outline: 0.06rem solid currentColor;
      outline-offset: 0.16rem;
    }
  }

  & .conversations-table__fingerprint {
    display: flex;
    align-items: stretch;
    width: min(var(--fingerprint-width, 42%), calc(100% - 3.5rem));
    max-width: calc(100% - 3.5rem);
    height: 1.85rem;
    flex: 0 1 auto;
    overflow: hidden;
    border-radius: 0.24rem;
    background-color: rgba(var(--emotion-neutral-RGB), 0.24);
    transition: filter var(--m__duration-base) var(--m__easing-base);
  }

  & .conversations-table__fingerprint--language {
    background-color: color-mix(in srgb, var(--m__border) 55%, transparent);
  }

  & .conversations-table__fingerprint-segment {
    position: relative;
    flex: var(--fingerprint-span, 1) 1 0;
    min-width: 0.14rem;
    height: 100%;
    background-color: transparent;
  }

  &
    .conversations-table__fingerprint--ai-music
    .conversations-table__fingerprint-segment,
  &
    .conversations-table__fingerprint--pii
    .conversations-table__fingerprint-segment {
    background-color: var(
      --fingerprint-color,
      rgba(var(--emotion-neutral-RGB), 1)
    );
  }

  &
    .conversations-table__fingerprint--language
    .conversations-table__fingerprint-segment {
    display: none;
  }

  & .conversations-table__fingerprint-segment::before,
  & .conversations-table__fingerprint-segment::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 50%;
    background-color: transparent;
  }

  &
    .conversations-table__fingerprint--ai-music
    .conversations-table__fingerprint-segment::before,
  &
    .conversations-table__fingerprint--ai-music
    .conversations-table__fingerprint-segment::after,
  &
    .conversations-table__fingerprint--pii
    .conversations-table__fingerprint-segment::before,
  &
    .conversations-table__fingerprint--pii
    .conversations-table__fingerprint-segment::after {
    display: none;
  }

  & .conversations-table__fingerprint-segment::before {
    top: 0;
  }

  & .conversations-table__fingerprint-segment::after {
    bottom: 0;
  }

  & .conversations-table__fingerprint-segment--top::before,
  & .conversations-table__fingerprint-segment--full:nth-child(odd)::before,
  & .conversations-table__fingerprint-segment--bottom::after,
  & .conversations-table__fingerprint-segment--full:nth-child(even)::after {
    background-color: var(
      --fingerprint-color,
      rgba(var(--emotion-neutral-RGB), 1)
    );
  }

  & .conversations-table__fingerprint-duration {
    align-self: flex-start;
    color: var(--m__text-caption);
    flex: 0 0 auto;
    font-size: var(--m__font-size-xs);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    transition: color 0.5s ease;
  }

  & .conversations-table__detection {
    min-width: 0;
  }

  & .conversations-table__verdict-stack {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
  }

  & .conversations-table__verdict-bubble {
    display: inline-flex;
    align-items: center;
    gap: var(--m__gap-xxs);
    max-width: 100%;
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    padding: 0.12rem 0.36rem;
    border: var(--m__border-width-s) solid
      color-mix(in srgb, currentColor 25%, transparent);
    border-radius: var(--m__radius-s);
    background-color: transparent;
    color: var(--m__text);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition:
      border-color 0.5s ease,
      color 0.5s ease;

    &:is(:hover, :focus-visible) {
      color: var(--m__text-link-hover);
      transition-duration: 0s;
      transition-timing-function: ease;

      &
        :is(
          .conversations-table__verdict-icon,
          .conversations-table__detection-empty
        ) {
        color: inherit;
        transition-duration: 0s;
        transition-timing-function: ease;
      }
    }

    &:focus-visible {
      outline: var(--m__border-width-m) solid currentColor;
      outline-offset: 0.12rem;
    }
  }

  & .conversations-table__verdict-bubble--failed {
    border-color: color-mix(in srgb, var(--m__error) 40%, transparent);
    color: var(--m__error);

    & .conversations-table__verdict-icon {
      color: var(--m__text);
    }

    & .conversations-table__detection-empty {
      color: inherit;
    }

    &:is(:hover, :focus-visible) {
      border-color: color-mix(in srgb, currentColor 25%, transparent);
      color: var(--m__text-link-hover);
    }
  }

  & .conversations-table__verdict-icon {
    width: 1.18rem;
    height: 1.18rem;
    flex: 0 0 auto;
    transition: color 0.5s ease;
  }

  & .conversations-table__verdict-text {
    display: inline-flex;
    align-items: baseline;
    min-width: 0;
    font-size: var(--m__font-size-xs);
    font-weight: var(--m__font-weight-bold);
    line-height: 1.15;
  }

  & .conversations-table__verdict-text .conversations-table__detection-empty {
    font-size: inherit;
  }

  & .conversations-table__detection-link {
    display: inline-flex;
    align-items: baseline;
    max-width: 100%;
    color: var(--m__text);
    font-size: var(--m__font-size-xs);
    font-weight: var(--m__font-weight-bold);
    line-height: 1.15;
    text-decoration-color: currentColor;
    text-decoration-line: underline;
    text-decoration-thickness: 0.15rem;
    text-underline-offset: 0.24rem;
    transition: color var(--m__duration-base) var(--m__easing-base);

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

    &:focus-visible {
      border-radius: 0.18rem;
      outline: 0.06rem solid currentColor;
      outline-offset: 0.16rem;
    }
  }

  & .conversations-table__detection-icon {
    margin-right: 0.22rem;
    flex: 0 0 auto;
    font-size: 0.95em;
    line-height: 1;
    transform: translateY(0.04em);
  }

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

  & .conversations-table__detection-score {
    margin-left: 0.35rem;
    flex: 0 0 auto;
    font-size: 0.85em;
  }

  & .conversations-table__detection-empty {
    color: var(--m__text-caption);
    font-size: var(--m__font-size-s);
    transition: color 0.5s ease;
  }

  & .conversations-table__uploaded {
    min-width: 9rem;
  }

  & .conversations-table__uploaded-date,
  & .conversations-table__uploaded-source {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  & .conversations-table__uploaded-source {
    color: var(--m__text);
    font-size: var(--m__font-size-s);
  }

  & .conversations-table__uploaded-date {
    margin-top: 0.15rem;
    color: var(--m__text-caption);
    font-size: var(--m__font-size-xs);
    font-variant-numeric: tabular-nums;
  }

  & .conversations-table__status {
    min-width: 0;
  }

  & .conversations-table__status-cell {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.55rem;
    min-width: 0;
  }

  & .conversations-table__status-value {
    flex: 1 1 auto;
    min-width: 0;
  }

  & .conversations-table__row-actions {
    min-width: 0;
    text-align: right;
    vertical-align: top;
  }

  & .conversations-table__actions-menu {
    flex: 0 0 auto;
    margin-top: -0.2rem;
  }

  & .conversations-table__status-tag--neutral,
  & .conversations-table__status-tag--processing {
    color: var(--m__text-caption);
  }

  & .conversations-table__status-tag--processing {
    padding-right: 0;
    padding-left: 0;
    border-color: transparent;
  }

  & .conversations-table__status-tag--failed {
    color: var(--m__error);
  }

  & .conversations-table__reports {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    min-width: 0;
    gap: 0.08rem;
  }

  & .conversations-table__report {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.28rem;
    height: 1.28rem;
    color: var(--m__text);
    text-decoration: none;
    transition: color var(--m__duration-base) var(--m__easing-base);

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

    &:focus-visible {
      border-radius: 0.18rem;
      outline: 0.06rem solid currentColor;
      outline-offset: 0.12rem;
    }
  }

  & .conversations-table__report-icon {
    width: 21px;
    height: 21px;
    flex-shrink: 0;
  }

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

    & .conversations-table__header > .conversations-table__filters {
      grid-template-columns: 1fr;
    }

    & .conversations-table__fingerprint {
      max-width: 100%;
    }

    & .conversations-table__actions {
      justify-content: flex-start;
      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-position: top;
      background-repeat: no-repeat;
      background-size: 100% 1px;
    }
  }
}

.conversation-report {
  & .conversation-report__back {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    margin: 0.48rem 0 0.55rem -0.22rem;
    color: var(--m__text-caption);
    font-size: var(--m__font-size-s);
    text-decoration: none;
    transition: color var(--m__duration-base) var(--m__easing-base);

    & svg {
      width: 12px;
      height: 12px;
      flex-shrink: 0;
    }

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

  & .conversation-report__title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  & .conversation-report__title-line {
    min-width: 0;
    flex: 1 1 auto;
    margin-bottom: 0;

    & .dashboard-page-title {
      margin: 0;
      font-size: var(--m__font-size-xxxl);
      font-weight: var(--m__font-weight-bold);
      line-height: var(--m__line-height-base);
      letter-spacing: normal;
      overflow-wrap: anywhere;
    }
  }

  & .conversation-report__title-actions {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    flex: 0 0 min(14rem, 40%);
    max-width: 14rem;
  }

  @media (width < 720px) {
    & .conversation-report__title-row {
      flex-direction: column;
    }

    & .conversation-report__title-actions {
      width: 100%;
      max-width: none;
      flex-basis: auto;
    }
  }

  & .conversation-report__report-menu {
    display: inline-flex;
    width: 100%;
    max-width: 14rem;
  }

  & button.m__menu-button-secondary.conversation-report__report-trigger {
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 0.4rem;
    max-width: 100%;
    padding: 0.34rem 0.55rem;
    font-size: var(--m__font-size-s);
  }

  & .conversation-report__report-trigger .m__button__icon {
    margin-left: auto;
  }

  & .conversation-report__report-icon {
    width: 1.3rem;
    height: 1.3rem;
    flex: 0 0 auto;
  }

  & .conversation-report__report-trigger-text {
    overflow: hidden;
    min-width: 0;
    flex: 0 1 auto;
    font-weight: var(--m__font-weight-medium);
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  & .conversation-report__player {
    overflow: hidden;
    margin-bottom: 1.75rem;
  }

  & .conversation-report__output {
    & .pg-velma-output > p,
    & .pg-transcript-text,
    & .pg-transcript-text p {
      font-size: 1rem;
      line-height: var(--m__line-height-base);
    }

    & .pg-results-table-section {
      overflow-x: auto;
    }
  }
}

.conversation-report__report-list {
  min-width: 0;
  max-width: calc(100vw - 2rem);
  padding: 0.25rem;
}

.conversation-report__report-items {
  display: flex;
  flex-direction: column;
  gap: 0.05em;
}

.conversation-report__report-generate {
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem;
}

.conversation-report__report-generate-title {
  display: block;
  padding: 0.18rem 0.55rem 0.12rem;
  color: var(--m__text-caption);
  font-family: var(--m__font-family-semi-mono);
  font-size: var(--m__font-size-xs);
  font-weight: var(--m__font-weight-regular);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.conversation-report__report-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.34rem 0.55rem;
  border-radius: var(--m__rounded-radius);
  corner-shape: squircle;
  color: var(--m__text);
  font-size: var(--m__font-size-s);
  font-weight: var(--m__font-weight-medium);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.conversation-report__report-item.is-active {
  background-color: var(--m__bg-surface);
  color: var(--m__text);
}

.conversation-report__report-item.is-active
  .conversation-report__report-item-title {
  font-weight: var(--m__font-weight-bold);
}

.conversation-report__report-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.conversation-report__report-item-icon svg {
  width: 1.3rem;
  height: 1.3rem;
  flex-shrink: 0;
}

.conversation-report__report-item-title {
  overflow: hidden;
  min-width: 0;
  flex: 0 1 auto;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-report__report-item--generate {
  gap: 0;
}

.conversation-report__report-item--generate
  .conversation-report__report-item-icon {
  margin-right: 0.55rem;
}

.conversation-report__report-item-copy {
  display: flex;
  align-items: baseline;
  min-width: 0;
  flex: 1 1 auto;
}

.conversation-report__report-item--generate:is(:hover, :focus-visible) {
  color: var(--m__text-link-hover);
}

.conversation-report__report-settings-footer {
  margin: 0.25rem -0.25rem 0;
  padding: 0.25rem 0.25rem 0;
  border-top: var(--m__border-width-s) solid var(--m__border);
}

.conversation-report__report-item--settings {
  min-height: calc(1.3rem + 0.68rem);
  padding-left: 0.55rem;
  color: var(--m__bg-accent);
}

.conversation-report__report-item--settings:is(:hover, :focus-visible) {
  color: var(--m__text-link-hover);
}

.conversation-report__report-item-cost {
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 0.5rem;
  color: var(--m__text-caption);
  font-size: var(--m__font-size-xs);
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}

@media (width < 520px) {
  .conversation-report__report-list {
    min-width: min(16rem, calc(100vw - 2rem));
  }
}

/* === Models === */

.model-settings-widget .m__widget-header .m__searchbar {
  box-sizing: border-box;
  min-height: 2.5rem;
  padding-block: 0.55rem;
}

.model-settings-table {
  min-width: 36rem;
}

.model-settings-table th,
.model-settings-table td {
  vertical-align: top;
}

.model-settings-table th:first-child,
.model-settings-table td:first-child {
  width: auto;
}

.model-settings-table__last-visible td {
  border-bottom: none;
}

.model-settings-model {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  min-width: 20rem;
}

.model-settings-model__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  flex: 0 0 1.65rem;
  margin-top: 0.02rem;
  color: var(--m__text);
}

.model-settings-model__icon svg {
  width: 100%;
  height: 100%;
}

.model-settings-model__copy {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
}

.model-settings-model__title {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--m__font-size-s);
  font-weight: var(--m__font-weight-medium);
  line-height: 1.3;
  color: var(--m__text);
}

.model-settings-model__meta {
  font-size: var(--m__font-size-s);
  line-height: 1.35;
  color: var(--m__text-caption);
}

.model-settings-table .m__col-actions > div {
  align-items: flex-start;
}

.model-settings-modal__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.model-settings-input-unit {
  position: relative;
}

.model-settings-input-unit input {
  padding-right: 2.5rem;
}

.model-settings-input-unit span {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  font-size: var(--m__font-size-s);
  color: var(--m__text-caption);
  pointer-events: none;
}

.model-settings-modal__checkbox {
  font-size: var(--m__font-size-s);
}

@media (width < 640px) {
  .model-settings-modal__fields {
    grid-template-columns: 1fr;
  }
}

/* Moderation Review Queue MVP */

.moderation-page {
  & .moderation-page__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0;

    & p {
      margin: 0 0 var(--m__default-margin-bottom);
    }
  }
}

.moderation-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.5rem;

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

.moderation-stat-card__status-list {
  margin-top: 1.55rem;
  gap: 0.45rem;

  & .m__widget__meta-item {
    align-items: baseline;
    font-size: var(--m__font-size-l);
    line-height: 1.25;
  }

  & .m__widget__meta-value {
    color: var(--m__text);
    font-size: var(--m__font-size-m);
  }
}

.moderation-behavior-summary {
  display: flex;
  align-items: baseline;
  max-width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.moderation-behavior-link {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  gap: var(--m__gap-xxs);
  padding: 0.12rem 0.36rem;
  border: var(--m__border-width-s) solid
    color-mix(in srgb, currentColor 25%, transparent);
  border-radius: var(--m__radius-s);
  background-color: transparent;
  color: var(--m__text);
  cursor: pointer;
  line-height: 1.15;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition:
    border-color 0.5s ease,
    color 0.5s ease;

  &:hover {
    color: var(--m__text-link-hover);
    transition-duration: 0s;
    transition-timing-function: ease;
  }
}

.moderation-behavior-link__content {
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
  font-size: var(--m__font-size-s);
  font-weight: var(--m__font-weight-bold);
  line-height: 1.15;
}

.moderation-behavior-link__name {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.moderation-behavior-link__confidence {
  flex: 0 0 auto;
  margin-left: 0.35rem;
  font-size: var(--m__font-size-xs);
  font-variant-numeric: tabular-nums;
}

.moderation-behavior-link__score,
.moderation-behavior-link__more {
  flex: 0 0 auto;
  color: var(--m__text-caption);
  font-size: var(--m__font-size-xs);
  font-weight: var(--m__font-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.moderation-behavior-link__more {
  padding-inline: 0.12rem;
  white-space: nowrap;
}

.moderation-behavior-link__wrap {
  display: inline-flex;
  align-items: baseline;
  max-width: 100%;
  min-width: 0;
  flex: 0 1 auto;
  gap: 0.35rem;
}

.moderation-detail {
  min-width: 0;
  position: sticky;
  top: 1rem;

  @media (width < 1100px) {
    position: static;
  }

  & .moderation-detail__panel[hidden] {
    display: none;
  }

  & .moderation-detail__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  & .moderation-detail__eyebrow {
    color: var(--m__text-caption);
    font-size: var(--m__font-size-xs);
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
  }

  & h2 {
    margin: 0.1rem 0 0;
    line-height: 1.2;
  }

  & .moderation-detail__score {
    display: grid;
    justify-items: end;
    gap: 0.15rem;
    color: var(--m__text-caption);
    font-size: var(--m__font-size-xs);
    text-align: right;

    & strong {
      color: var(--m__text);
      font-size: var(--m__font-size-xl);
      line-height: 1;
    }
  }
}

.moderation-detail__review-list {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.moderation-detection {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 0.45rem 0.75rem;
  padding: 0.65rem;
  border: var(--m__border-width-s) solid var(--m__border);
  border-radius: var(--m__radius-m);
  background-color: color-mix(in srgb, var(--m__bg) 45%, transparent);

  & .moderation-detection__meta {
    display: grid;
    gap: 0.05rem;
    min-width: 0;
  }

  & .moderation-detection__meta strong {
    font-size: var(--m__font-size-s);
    line-height: 1.25;
  }

  & .moderation-detection__meta span,
  & .moderation-detection__state {
    color: var(--m__text-caption);
    font-size: var(--m__font-size-xs);
  }

  & .moderation-detection__actions {
    display: flex;
    gap: 0.3rem;
    align-items: flex-start;
  }

  & .moderation-detection__actions .is-selected {
    outline: var(--m__border-width-m) solid currentColor;
    outline-offset: 0.12rem;
  }

  & .moderation-detection__state {
    grid-column: 1 / -1;
  }

  &[data-review-result="true"] .moderation-detection__state {
    color: var(--m__success);
  }

  &[data-review-result="false"] .moderation-detection__state {
    color: var(--m__error);
  }

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

    & .moderation-detection__actions {
      flex-wrap: wrap;
    }
  }
}

.moderation-transcript {
  display: grid;
  gap: 0.35rem;
}

.moderation-transcript__title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.2rem 0 0.1rem;

  & h3 {
    margin: 0;
    font-size: var(--m__font-size-s);
    font-weight: var(--m__font-weight-bold);
  }

  & span {
    color: var(--m__text-caption);
    font-size: var(--m__font-size-xs);
  }
}

.moderation-transcript__turn {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.7rem;
  border-radius: var(--m__radius-m);
  background-color: color-mix(in srgb, var(--m__text) 4%, transparent);

  &.has-detection {
    background-color: color-mix(
      in srgb,
      var(--m__bg-highlight) 9%,
      transparent
    );
    box-shadow: inset 0 0 0 1px
      color-mix(in srgb, var(--m__bg-highlight) 30%, transparent);
  }

  & .moderation-transcript__speaker {
    display: grid;
    align-content: start;
    gap: 0.1rem;
    font-size: var(--m__font-size-xs);
  }

  & .moderation-transcript__speaker span {
    color: var(--m__text-caption);
    font-variant-numeric: tabular-nums;
  }

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

  & mark {
    border-radius: 0.25em;
    padding: 0.04em 0.16em;
    background-color: color-mix(
      in srgb,
      var(--m__bg-highlight) 28%,
      transparent
    );
    color: inherit;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

  @media (width < 560px) {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
}

/* Moderation split queue + detail */

.moderation-table {
  min-width: 0;

  & .moderation-table__header {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) max-content;
    align-items: stretch;
    width: 100%;
  }

  & .moderation-table__filter {
    min-width: 0;
  }

  & .moderation-table__header > .m__searchbar,
  & .moderation-table__filter--behavior {
    position: relative;
  }

  & .moderation-table__filter--behavior {
    font: inherit;
    text-align: left;
  }

  & .moderation-table__filter--behavior:focus-within,
  & .moderation-table__filter--behavior:focus-visible,
  & .moderation-table__filter--behavior[aria-expanded="true"] {
    outline: none;
    background-color: var(--m__bg-input);
  }

  &
    .moderation-table__filter--behavior:is(
      :focus-visible,
      [aria-expanded="true"]
    ),
  &
    .moderation-table__filter--behavior:is(
      :focus-visible,
      [aria-expanded="true"]
    )
    > span:first-child,
  &
    .moderation-table__filter--behavior:is(
      :focus-visible,
      [aria-expanded="true"]
    )
    .m__select__inline-control
    :is(.m__select__value, svg) {
    color: var(--m__text-link-hover);
  }

  & .moderation-table__header > .m__searchbar::after,
  & .moderation-table__filter--behavior::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 1px;
    height: 40%;
    background-color: var(--m__border);
    transform: translateY(-50%);
  }

  & .moderation-table__filter--sort::after {
    display: none;
  }

  & .moderation-table__header > .moderation-table__actions {
    align-items: center;
    justify-content: flex-end;
    min-width: max-content;
  }

  & .moderation-table__tag-filters {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--m__gap-xxs);
    min-height: 2.9rem;
    margin: calc(-1 * var(--m__widget-padding))
      calc(-1 * var(--m__widget-padding)) var(--m__widget-padding);
    padding: 0.5rem var(--m__widget-padding);
  }

  & .moderation-table__tag-filters[hidden] {
    display: none;
  }

  & .moderation-table__tag-filter-label {
    color: var(--m__text-caption);
    font-size: var(--m__font-size-s);
    font-weight: var(--m__font-weight-medium);
    line-height: 1;
  }

  & .moderation-table__tag-filter-label::after {
    content: none;
  }

  & .moderation-table__selected-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    padding-top: 0;
  }

  & :is(.moderation-table__selected-tag, .moderation-table__tag-filter-reset) {
    padding: 0.12rem 0.36rem;
    border-radius: var(--m__radius-s);
    background-color: transparent;
    font-size: var(--m__font-size-s);
    font-weight: var(--m__font-weight-bold);
    line-height: 1.15;
  }

  & .moderation-table__selected-tag {
    gap: 0.25rem;
    border: var(--m__border-width-s) solid
      color-mix(in srgb, currentColor 25%, transparent);
    cursor: text;
    transition:
      border-color 0.5s ease,
      color 0.5s ease;
  }

  & .moderation-table__selected-tag .bw-tag-item-name {
    padding-bottom: 0;
    margin-bottom: 0;
    cursor: text;
  }

  & .moderation-table__selected-tag .bw-tag-x {
    position: relative;
    padding: 0 0 0 0.05rem;
    margin: 0;
    cursor: pointer;
    transition:
      color 0.5s ease,
      opacity 0.5s ease;
  }

  & .moderation-table__selected-tag:has(.bw-tag-x:hover) {
    color: var(--m__text-link-hover);
    transition-duration: 0s;
    transition-timing-function: ease;
  }

  & .moderation-table__selected-tag .bw-tag-x::before {
    content: "";
    position: absolute;
    inset: -0.35rem -0.42rem -0.35rem -0.2rem;
  }

  & .moderation-table__selected-tag .bw-tag-x:hover {
    opacity: 1;
    transition-duration: 0s;
    transition-timing-function: ease;
  }

  & .moderation-table__tag-filter-reset {
    appearance: none;
    border: none;
    cursor: pointer;
    color: var(--m__text-caption);
    font-family: inherit;
    opacity: 0;
    pointer-events: none;
    transition:
      color 0.5s ease,
      opacity 0.5s ease;
  }

  &
    .moderation-table__tag-filters:is(:hover, :focus-within)
    .moderation-table__tag-filter-reset {
    opacity: 1;
    pointer-events: auto;
    transition:
      color 0.5s ease,
      opacity 0s ease;
  }

  & .moderation-table__tag-filter-reset:is(:hover, :focus-visible),
  &
    .moderation-table__tag-filters:is(:hover, :focus-within)
    .moderation-table__tag-filter-reset:is(:hover, :focus-visible) {
    color: var(--m__text-link-hover);
    transition:
      color 0s ease,
      opacity 0s ease;
  }

  & table {
    min-width: 0;
    table-layout: fixed;
  }

  & .moderation-table__col-conversation {
    width: 28%;
  }

  & .moderation-table__col-pattern {
    width: 16%;
  }

  & .moderation-table__col-detection {
    width: 39%;
  }

  & .moderation-table__col-status {
    width: 12%;
  }

  & .moderation-table__col-actions {
    width: 5%;
  }

  & th:nth-child(4),
  & td:nth-child(4) {
    padding-left: 1rem;
    white-space: nowrap;
  }

  & .moderation-table__status-tag {
    font-size: var(--m__font-size-s);
  }

  & .moderation-table__status-tag--pending {
    color: var(--m__error);
  }

  & .moderation-table__status-tag--in-review {
    color: var(--m__text-caption);
  }

  & .moderation-table__row-actions > div {
    align-items: flex-start;
  }

  & .moderation-table__conversation-link,
  & .moderation-table__detection-link {
    color: inherit;
    text-decoration: none;
  }

  & .moderation-table__conversation-link {
    display: block;
    min-width: 0;
  }

  & .moderation-table__title {
    display: -webkit-box;
    overflow: hidden;
    color: inherit;
    font-size: inherit;
    font-weight: var(--m__font-weight-regular);
    line-height: inherit;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    transition: color var(--m__duration-base) var(--m__easing-base);
  }

  & .moderation-table__meta {
    display: block;
    overflow: hidden;
    margin-top: 0.18rem;
    color: var(--m__text-caption);
    font-size: var(--m__font-size-xs);
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--m__duration-base) var(--m__easing-base);
  }

  &
    .moderation-table__conversation-link:hover
    :is(.moderation-table__title, .moderation-table__meta) {
    color: var(--m__text-link-hover);
    transition-duration: var(--m__duration-instant);
  }

  & .moderation-table__detection-link {
    min-width: 0;
  }

  & .moderation-table__detection-link:is(:hover, :focus-visible) {
    color: var(--m__text-link-hover);
    transition-duration: 0s;
    transition-timing-function: ease;
  }

  & .moderation-pattern-cell {
    min-width: 0;
    vertical-align: top;
  }

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

    & .moderation-table__header > .m__searchbar::after,
    & .moderation-table__filter--behavior::after {
      display: none;
    }

    & .moderation-table__actions {
      justify-content: flex-start;
      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-position: top;
      background-repeat: no-repeat;
      background-size: 100% 1px;
    }
  }
}

.moderation-pattern {
  display: flex;
  align-items: flex-start;
  gap: 0.28rem;
  width: 100%;
  max-width: 100%;
  color: inherit;
  text-decoration: none;

  &:is(:hover, :focus-visible) {
    color: var(--m__text-link-hover);
    transition-duration: var(--m__duration-instant);

    & .moderation-pattern__fingerprint {
      filter: brightness(103%) saturate(102%);
      transition-duration: var(--m__duration-instant);
    }

    & .moderation-pattern__duration {
      color: var(--m__text-link-hover);
      transition-duration: 0s;
      transition-timing-function: ease;
    }
  }

  &:focus-visible {
    border-radius: 0.35rem;
    outline: 0.06rem solid currentColor;
    outline-offset: 0.16rem;
  }
}

.moderation-pattern__fingerprint {
  display: flex;
  align-items: stretch;
  width: min(var(--fingerprint-width, 42%), calc(100% - 3.5rem));
  max-width: calc(100% - 3.5rem);
  height: 1.2rem;
  flex: 0 1 auto;
  overflow: hidden;
  border-radius: 0.18rem;
  background-color: rgba(var(--emotion-neutral-RGB), 0.24);
  transition: filter var(--m__duration-base) var(--m__easing-base);
}

.moderation-pattern__fingerprint-segment {
  position: relative;
  flex: var(--fingerprint-span, 1) 1 0;
  min-width: 0.14rem;
  height: 100%;
  background-color: transparent;
}

.moderation-pattern__fingerprint-segment::before,
.moderation-pattern__fingerprint-segment::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  background-color: transparent;
}

.moderation-pattern__fingerprint-segment::before {
  top: 0;
}

.moderation-pattern__fingerprint-segment::after {
  bottom: 0;
}

.moderation-pattern__fingerprint-segment--top::before,
.moderation-pattern__fingerprint-segment--full:nth-child(odd)::before,
.moderation-pattern__fingerprint-segment--bottom::after,
.moderation-pattern__fingerprint-segment--full:nth-child(even)::after {
  background-color: var(
    --fingerprint-color,
    rgba(var(--emotion-neutral-RGB), 1)
  );
}

.moderation-pattern__duration {
  align-self: flex-start;
  flex: 0 0 auto;
  color: var(--m__text-caption);
  font-size: var(--m__font-size-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: color 0.5s ease;
}

.moderation-review-page {
  & .conversation-report__back {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    margin: 0.48rem 0 0.55rem -0.22rem;
    color: var(--m__text-caption);
    font-size: var(--m__font-size-s);
    text-decoration: none;
    transition: color var(--m__duration-base) var(--m__easing-base);

    & svg {
      width: 12px;
      height: 12px;
      flex-shrink: 0;
    }

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

.moderation-review-behaviors .pg-results-table-section {
  overflow-x: clip;
}

.moderation-review-behaviors__table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.moderation-review-behaviors__table th,
.moderation-review-behaviors__table td {
  box-sizing: border-box;
}

.moderation-review-behaviors__table th:nth-child(1) {
  width: 13%;
}

.moderation-review-behaviors__table th:nth-child(2) {
  width: 17%;
}

.moderation-review-behaviors__table th:nth-child(3) {
  width: 37%;
}

.moderation-review-behaviors__table th:nth-child(4) {
  width: 8%;
}

.moderation-review-behaviors__table th:nth-child(5) {
  width: 25%;
}

.moderation-review-behaviors__table th:last-child,
.moderation-review-behaviors__table td:last-child {
  padding-right: 0;
}

.moderation-review-behaviors__table
  tbody
  tr:not(:last-child):not(.pg-behavior-row--detected-last):not(
    .pg-behavior-subhead-row
  )
  > td:not(.pg-behavior-speaker-cell) {
  border-bottom: var(--m__border-width-s) solid
    color-mix(in srgb, var(--m__text) 12%, transparent);
}

.moderation-review-behaviors__table
  .pg-behavior-row--detected-last
  td:not(.pg-behavior-speaker-cell),
.moderation-review-behaviors__table
  .pg-behavior-row--detected-last
  .pg-behavior-speaker-cell {
  border-bottom: none;
}

.moderation-review-behaviors__actions {
  text-align: right;
  white-space: nowrap;
}

.moderation-review-behaviors__action {
  display: inline-flex;
  align-items: center;
  padding-inline: 0.45rem;
}

.moderation-review-behaviors__action + .moderation-review-behaviors__action {
  margin-left: 0.25rem;
}

.moderation-review-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--m__gap-xs);
  margin-top: var(--m__spacer-l);
}

.moderation-review-nav__button:last-child {
  margin-left: auto;
}

@media (width < 520px) {
  .moderation-review-nav {
    flex-direction: column;
  }

  .moderation-review-nav__button,
  .moderation-review-nav__button:last-child {
    width: 100%;
    margin-left: 0;
  }
}

.prototype-internal-nav {
  display: contents;
}

body.prototype-hide-internal-nav .prototype-internal-nav {
  display: none;
}

.auth-layout {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  align-items: stretch;

  & .auth-layout__left {
    flex: 0 0 54%;
    display: flex;
    flex-direction: column;
    padding: 1rem;

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

  & .auth-layout__right {
    flex: 0 0 46%;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--m__spacer-l) 1rem;
    border-radius: 0;
    background-color: var(--m__bg);
    color: var(--m__text);

    @media (width < 768px) {
      display: none;
    }
  }
}

.auth-layout__promo {
  width: 100%;
  max-width: 24rem;
  color: inherit;

  & .auth-layout__promo-heading {
    margin: 0 0 var(--m__spacer-s);
    font-size: 2rem;
    font-weight: var(--m__font-weight-heavy);
    line-height: 1.2;
    color: inherit;
  }
}

.auth-layout__right.dark-vibrant {
  --auth-layout-icon-bg: color-mix(
    in srgb,
    var(--m__text) 45%,
    var(--auth-layout-icon-bg-active)
  );
  --auth-layout-icon-bg-active: var(--m__color-white);

  & .auth-layout__icon-stack {
    --auth-layout-icon-shadow-color: color-mix(
      in srgb,
      var(--m__bg) 40%,
      transparent
    );
  }
}

.auth-layout__icon-stack {
  --auth-layout-icon-count: 11;
  --auth-layout-icon-size: 4.45em;
  --auth-layout-icon-overlap: calc(
    (var(--auth-layout-icon-count) * var(--auth-layout-icon-size) - 100%) /
      (var(--auth-layout-icon-count) - 1)
  );
  position: relative;
  margin-bottom: var(--m__spacer-xs);
}

.auth-layout__icons {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;

  &.light .auth-layout__icon-tile {
    background-color: var(--auth-layout-icon-bg);
    color: var(--m__text);
    transition: background-color var(--m__duration-base)
      var(--m__easing-base);
  }
}

.auth-layout__icon-hover-zones {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
}

.auth-layout__icon-hover-zone {
  flex: 1;
  min-height: var(--auth-layout-icon-size);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  text-decoration: none;
  cursor: default;
}

a.auth-layout__icon-hover-zone {
  cursor: pointer;
}

.auth-layout__icon-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--auth-layout-icon-size);
  aspect-ratio: 1;
  margin-left: calc(-1 * var(--auth-layout-icon-overlap));
  padding: 0.35rem;
  pointer-events: none;
  background-color: color-mix(
    in srgb,
    var(--m__text) 20%,
    var(--m__bg)
  );
  color: var(--m__text);
  filter: drop-shadow(0 0 0.5em var(--auth-layout-icon-shadow-color));
  transition:
    background-color var(--m__duration-base)
      var(--m__easing-base),
    z-index var(--m__duration-instant);

  &:first-child {
    margin-left: 0;
  }

  &[data-term="velma"] {
    z-index: 11;
  }

  &[data-term="transcription"] {
    z-index: 10;
  }

  &[data-term="deepfake-detection"] {
    z-index: 9;
  }

  &[data-term="pii-phi-redaction"] {
    z-index: 8;
  }

  &[data-term="music-speech-detection"] {
    z-index: 7;
  }

  &[data-term="speech-to-text"] {
    z-index: 6;
  }

  &[data-term="ai-music"] {
    z-index: 5;
  }

  &[data-term="language"] {
    z-index: 4;
  }

  &[data-term="emotion-detection"] {
    z-index: 3;
  }

  &[data-term="accent-identification"] {
    z-index: 2;
  }

  &[data-term="voice-match"] {
    z-index: 1;
  }

  & svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
    stroke: none;
    transform-origin: center;
    transition: transform var(--m__duration-base)
      var(--m__easing-base);
  }
}

.auth-layout__icon-stack[data-stack-focus="velma"] {
  & .auth-layout__icon-tile[data-term="velma"] {
    z-index: 9;
  }

  & .auth-layout__icon-tile[data-term="transcription"] {
    z-index: 8;
  }

  & .auth-layout__icon-tile[data-term="deepfake-detection"] {
    z-index: 7;
  }

  & .auth-layout__icon-tile[data-term="pii-phi-redaction"] {
    z-index: 6;
  }

  & .auth-layout__icon-tile[data-term="music-speech-detection"] {
    z-index: 5;
  }

  & .auth-layout__icon-tile[data-term="speech-to-text"] {
    z-index: 4;
  }

  & .auth-layout__icon-tile[data-term="ai-music"] {
    z-index: 3;
  }

  & .auth-layout__icon-tile[data-term="language"] {
    z-index: 2;
  }

  & .auth-layout__icon-tile[data-term="emotion-detection"] {
    z-index: 1;
  }

  & .auth-layout__icon-tile[data-term="accent-identification"] {
    z-index: 1;
  }

  & .auth-layout__icon-tile[data-term="voice-match"] {
    z-index: 1;
  }
}

.auth-layout__icon-stack[data-stack-focus="transcription"] {
  & .auth-layout__icon-tile[data-term="velma"] {
    z-index: 8;
  }

  & .auth-layout__icon-tile[data-term="transcription"] {
    z-index: 9;
  }

  & .auth-layout__icon-tile[data-term="deepfake-detection"] {
    z-index: 8;
  }

  & .auth-layout__icon-tile[data-term="pii-phi-redaction"] {
    z-index: 7;
  }

  & .auth-layout__icon-tile[data-term="music-speech-detection"] {
    z-index: 6;
  }

  & .auth-layout__icon-tile[data-term="speech-to-text"] {
    z-index: 5;
  }

  & .auth-layout__icon-tile[data-term="ai-music"] {
    z-index: 4;
  }

  & .auth-layout__icon-tile[data-term="language"] {
    z-index: 3;
  }

  & .auth-layout__icon-tile[data-term="emotion-detection"] {
    z-index: 2;
  }

  & .auth-layout__icon-tile[data-term="accent-identification"] {
    z-index: 1;
  }

  & .auth-layout__icon-tile[data-term="voice-match"] {
    z-index: 1;
  }
}

.auth-layout__icon-stack[data-stack-focus="deepfake-detection"] {
  & .auth-layout__icon-tile[data-term="velma"] {
    z-index: 7;
  }

  & .auth-layout__icon-tile[data-term="transcription"] {
    z-index: 8;
  }

  & .auth-layout__icon-tile[data-term="deepfake-detection"] {
    z-index: 9;
  }

  & .auth-layout__icon-tile[data-term="pii-phi-redaction"] {
    z-index: 8;
  }

  & .auth-layout__icon-tile[data-term="music-speech-detection"] {
    z-index: 7;
  }

  & .auth-layout__icon-tile[data-term="speech-to-text"] {
    z-index: 6;
  }

  & .auth-layout__icon-tile[data-term="ai-music"] {
    z-index: 5;
  }

  & .auth-layout__icon-tile[data-term="language"] {
    z-index: 4;
  }

  & .auth-layout__icon-tile[data-term="emotion-detection"] {
    z-index: 3;
  }

  & .auth-layout__icon-tile[data-term="accent-identification"] {
    z-index: 2;
  }

  & .auth-layout__icon-tile[data-term="voice-match"] {
    z-index: 1;
  }
}

.auth-layout__icon-stack[data-stack-focus="pii-phi-redaction"] {
  & .auth-layout__icon-tile[data-term="velma"] {
    z-index: 6;
  }

  & .auth-layout__icon-tile[data-term="transcription"] {
    z-index: 7;
  }

  & .auth-layout__icon-tile[data-term="deepfake-detection"] {
    z-index: 8;
  }

  & .auth-layout__icon-tile[data-term="pii-phi-redaction"] {
    z-index: 9;
  }

  & .auth-layout__icon-tile[data-term="music-speech-detection"] {
    z-index: 8;
  }

  & .auth-layout__icon-tile[data-term="speech-to-text"] {
    z-index: 7;
  }

  & .auth-layout__icon-tile[data-term="ai-music"] {
    z-index: 6;
  }

  & .auth-layout__icon-tile[data-term="language"] {
    z-index: 5;
  }

  & .auth-layout__icon-tile[data-term="emotion-detection"] {
    z-index: 4;
  }

  & .auth-layout__icon-tile[data-term="accent-identification"] {
    z-index: 3;
  }

  & .auth-layout__icon-tile[data-term="voice-match"] {
    z-index: 2;
  }
}

.auth-layout__icon-stack[data-stack-focus="music-speech-detection"] {
  & .auth-layout__icon-tile[data-term="velma"] {
    z-index: 5;
  }

  & .auth-layout__icon-tile[data-term="transcription"] {
    z-index: 6;
  }

  & .auth-layout__icon-tile[data-term="deepfake-detection"] {
    z-index: 7;
  }

  & .auth-layout__icon-tile[data-term="pii-phi-redaction"] {
    z-index: 8;
  }

  & .auth-layout__icon-tile[data-term="music-speech-detection"] {
    z-index: 9;
  }

  & .auth-layout__icon-tile[data-term="speech-to-text"] {
    z-index: 8;
  }

  & .auth-layout__icon-tile[data-term="ai-music"] {
    z-index: 7;
  }

  & .auth-layout__icon-tile[data-term="language"] {
    z-index: 6;
  }

  & .auth-layout__icon-tile[data-term="emotion-detection"] {
    z-index: 5;
  }

  & .auth-layout__icon-tile[data-term="accent-identification"] {
    z-index: 4;
  }

  & .auth-layout__icon-tile[data-term="voice-match"] {
    z-index: 3;
  }
}

.auth-layout__icon-stack[data-stack-focus="speech-to-text"] {
  & .auth-layout__icon-tile[data-term="velma"] {
    z-index: 4;
  }

  & .auth-layout__icon-tile[data-term="transcription"] {
    z-index: 5;
  }

  & .auth-layout__icon-tile[data-term="deepfake-detection"] {
    z-index: 6;
  }

  & .auth-layout__icon-tile[data-term="pii-phi-redaction"] {
    z-index: 7;
  }

  & .auth-layout__icon-tile[data-term="music-speech-detection"] {
    z-index: 8;
  }

  & .auth-layout__icon-tile[data-term="speech-to-text"] {
    z-index: 9;
  }

  & .auth-layout__icon-tile[data-term="ai-music"] {
    z-index: 8;
  }

  & .auth-layout__icon-tile[data-term="language"] {
    z-index: 7;
  }

  & .auth-layout__icon-tile[data-term="emotion-detection"] {
    z-index: 6;
  }

  & .auth-layout__icon-tile[data-term="accent-identification"] {
    z-index: 5;
  }

  & .auth-layout__icon-tile[data-term="voice-match"] {
    z-index: 4;
  }
}

.auth-layout__icon-stack[data-stack-focus="ai-music"] {
  & .auth-layout__icon-tile[data-term="velma"] {
    z-index: 3;
  }

  & .auth-layout__icon-tile[data-term="transcription"] {
    z-index: 4;
  }

  & .auth-layout__icon-tile[data-term="deepfake-detection"] {
    z-index: 5;
  }

  & .auth-layout__icon-tile[data-term="pii-phi-redaction"] {
    z-index: 6;
  }

  & .auth-layout__icon-tile[data-term="music-speech-detection"] {
    z-index: 7;
  }

  & .auth-layout__icon-tile[data-term="speech-to-text"] {
    z-index: 8;
  }

  & .auth-layout__icon-tile[data-term="ai-music"] {
    z-index: 9;
  }

  & .auth-layout__icon-tile[data-term="language"] {
    z-index: 8;
  }

  & .auth-layout__icon-tile[data-term="emotion-detection"] {
    z-index: 7;
  }

  & .auth-layout__icon-tile[data-term="accent-identification"] {
    z-index: 6;
  }

  & .auth-layout__icon-tile[data-term="voice-match"] {
    z-index: 5;
  }
}

.auth-layout__icon-stack[data-stack-focus="language"] {
  & .auth-layout__icon-tile[data-term="velma"] {
    z-index: 2;
  }

  & .auth-layout__icon-tile[data-term="transcription"] {
    z-index: 3;
  }

  & .auth-layout__icon-tile[data-term="deepfake-detection"] {
    z-index: 4;
  }

  & .auth-layout__icon-tile[data-term="pii-phi-redaction"] {
    z-index: 5;
  }

  & .auth-layout__icon-tile[data-term="music-speech-detection"] {
    z-index: 6;
  }

  & .auth-layout__icon-tile[data-term="speech-to-text"] {
    z-index: 7;
  }

  & .auth-layout__icon-tile[data-term="ai-music"] {
    z-index: 8;
  }

  & .auth-layout__icon-tile[data-term="language"] {
    z-index: 9;
  }

  & .auth-layout__icon-tile[data-term="emotion-detection"] {
    z-index: 8;
  }

  & .auth-layout__icon-tile[data-term="accent-identification"] {
    z-index: 7;
  }

  & .auth-layout__icon-tile[data-term="voice-match"] {
    z-index: 6;
  }
}
.auth-layout__icon-stack[data-stack-focus="emotion-detection"] {
  & .auth-layout__icon-tile[data-term="velma"] {
    z-index: 1;
  }

  & .auth-layout__icon-tile[data-term="transcription"] {
    z-index: 2;
  }

  & .auth-layout__icon-tile[data-term="deepfake-detection"] {
    z-index: 3;
  }

  & .auth-layout__icon-tile[data-term="pii-phi-redaction"] {
    z-index: 4;
  }

  & .auth-layout__icon-tile[data-term="music-speech-detection"] {
    z-index: 5;
  }

  & .auth-layout__icon-tile[data-term="speech-to-text"] {
    z-index: 6;
  }

  & .auth-layout__icon-tile[data-term="ai-music"] {
    z-index: 7;
  }

  & .auth-layout__icon-tile[data-term="language"] {
    z-index: 8;
  }

  & .auth-layout__icon-tile[data-term="emotion-detection"] {
    z-index: 9;
  }

  & .auth-layout__icon-tile[data-term="accent-identification"] {
    z-index: 8;
  }

  & .auth-layout__icon-tile[data-term="voice-match"] {
    z-index: 7;
  }
}

.auth-layout__icon-stack[data-stack-focus="accent-identification"] {
  & .auth-layout__icon-tile[data-term="velma"] {
    z-index: 1;
  }

  & .auth-layout__icon-tile[data-term="transcription"] {
    z-index: 1;
  }

  & .auth-layout__icon-tile[data-term="deepfake-detection"] {
    z-index: 2;
  }

  & .auth-layout__icon-tile[data-term="pii-phi-redaction"] {
    z-index: 3;
  }

  & .auth-layout__icon-tile[data-term="music-speech-detection"] {
    z-index: 4;
  }

  & .auth-layout__icon-tile[data-term="speech-to-text"] {
    z-index: 5;
  }

  & .auth-layout__icon-tile[data-term="ai-music"] {
    z-index: 6;
  }

  & .auth-layout__icon-tile[data-term="language"] {
    z-index: 7;
  }

  & .auth-layout__icon-tile[data-term="emotion-detection"] {
    z-index: 8;
  }

  & .auth-layout__icon-tile[data-term="accent-identification"] {
    z-index: 9;
  }

  & .auth-layout__icon-tile[data-term="voice-match"] {
    z-index: 8;
  }
}

.auth-layout__icon-stack[data-stack-focus="voice-match"] {
  & .auth-layout__icon-tile[data-term="velma"] {
    z-index: 1;
  }

  & .auth-layout__icon-tile[data-term="transcription"] {
    z-index: 1;
  }

  & .auth-layout__icon-tile[data-term="deepfake-detection"] {
    z-index: 1;
  }

  & .auth-layout__icon-tile[data-term="pii-phi-redaction"] {
    z-index: 2;
  }

  & .auth-layout__icon-tile[data-term="music-speech-detection"] {
    z-index: 3;
  }

  & .auth-layout__icon-tile[data-term="speech-to-text"] {
    z-index: 4;
  }

  & .auth-layout__icon-tile[data-term="ai-music"] {
    z-index: 5;
  }

  & .auth-layout__icon-tile[data-term="language"] {
    z-index: 6;
  }

  & .auth-layout__icon-tile[data-term="emotion-detection"] {
    z-index: 7;
  }

  & .auth-layout__icon-tile[data-term="accent-identification"] {
    z-index: 8;
  }

  & .auth-layout__icon-tile[data-term="voice-match"] {
    z-index: 9;
  }
}

.auth-layout__promo:has(.auth-layout__icon-hover-zone[data-term="velma"]:hover)
  .auth-layout__icon-tile[data-term="velma"],
.auth-layout__promo:has(
    .auth-layout__icon-hover-zone[data-term="transcription"]:hover
  )
  .auth-layout__icon-tile[data-term="transcription"],
.auth-layout__promo:has(
    .auth-layout__icon-hover-zone[data-term="deepfake-detection"]:hover
  )
  .auth-layout__icon-tile[data-term="deepfake-detection"],
.auth-layout__promo:has(
    .auth-layout__icon-hover-zone[data-term="pii-phi-redaction"]:hover
  )
  .auth-layout__icon-tile[data-term="pii-phi-redaction"],
.auth-layout__promo:has(
    .auth-layout__icon-hover-zone[data-term="music-speech-detection"]:hover
  )
  .auth-layout__icon-tile[data-term="music-speech-detection"],
.auth-layout__promo:has(
    .auth-layout__icon-hover-zone[data-term="speech-to-text"]:hover
  )
  .auth-layout__icon-tile[data-term="speech-to-text"],
.auth-layout__promo:has(
    .auth-layout__icon-hover-zone[data-term="ai-music"]:hover
  )
  .auth-layout__icon-tile[data-term="ai-music"],
.auth-layout__promo:has(
    .auth-layout__icon-hover-zone[data-term="language"]:hover
  )
  .auth-layout__icon-tile[data-term="language"],
.auth-layout__promo:has(
    .auth-layout__icon-hover-zone[data-term="emotion-detection"]:hover
  )
  .auth-layout__icon-tile[data-term="emotion-detection"],
.auth-layout__promo:has(
    .auth-layout__icon-hover-zone[data-term="accent-identification"]:hover
  )
  .auth-layout__icon-tile[data-term="accent-identification"],
.auth-layout__promo:has(
    .auth-layout__icon-hover-zone[data-term="voice-match"]:hover
  )
  .auth-layout__icon-tile[data-term="voice-match"] {
  transition-duration: var(--m__duration-instant);

  & svg {
    transform: scale(1.12);
    transition-duration: var(--m__duration-instant);
  }
}

.auth-layout__icon-stack[data-stack-focus="velma"] {
  & .light .auth-layout__icon-tile[data-term="velma"] {
    background-color: var(--auth-layout-icon-bg-active);
    transition-duration: var(--m__duration-instant);
  }
}

.auth-layout__icon-stack[data-stack-focus="transcription"] {
  & .light .auth-layout__icon-tile[data-term="transcription"] {
    background-color: var(--auth-layout-icon-bg-active);
    transition-duration: var(--m__duration-instant);
  }
}

.auth-layout__icon-stack[data-stack-focus="deepfake-detection"] {
  & .light .auth-layout__icon-tile[data-term="deepfake-detection"] {
    background-color: var(--auth-layout-icon-bg-active);
    transition-duration: var(--m__duration-instant);
  }
}

.auth-layout__icon-stack[data-stack-focus="pii-phi-redaction"] {
  & .light .auth-layout__icon-tile[data-term="pii-phi-redaction"] {
    background-color: var(--auth-layout-icon-bg-active);
    transition-duration: var(--m__duration-instant);
  }
}

.auth-layout__icon-stack[data-stack-focus="music-speech-detection"] {
  & .light .auth-layout__icon-tile[data-term="music-speech-detection"] {
    background-color: var(--auth-layout-icon-bg-active);
    transition-duration: var(--m__duration-instant);
  }
}

.auth-layout__icon-stack[data-stack-focus="speech-to-text"] {
  & .light .auth-layout__icon-tile[data-term="speech-to-text"] {
    background-color: var(--auth-layout-icon-bg-active);
    transition-duration: var(--m__duration-instant);
  }
}

.auth-layout__icon-stack[data-stack-focus="ai-music"] {
  & .light .auth-layout__icon-tile[data-term="ai-music"] {
    background-color: var(--auth-layout-icon-bg-active);
    transition-duration: var(--m__duration-instant);
  }
}

.auth-layout__icon-stack[data-stack-focus="language"] {
  & .light .auth-layout__icon-tile[data-term="language"] {
    background-color: var(--auth-layout-icon-bg-active);
    transition-duration: var(--m__duration-instant);
  }
}

.auth-layout__icon-stack[data-stack-focus="emotion-detection"] {
  & .light .auth-layout__icon-tile[data-term="emotion-detection"] {
    background-color: var(--auth-layout-icon-bg-active);
    transition-duration: var(--m__duration-instant);
  }
}

.auth-layout__icon-stack[data-stack-focus="accent-identification"] {
  & .light .auth-layout__icon-tile[data-term="accent-identification"] {
    background-color: var(--auth-layout-icon-bg-active);
    transition-duration: var(--m__duration-instant);
  }
}

.auth-layout__icon-stack[data-stack-focus="voice-match"] {
  & .light .auth-layout__icon-tile[data-term="voice-match"] {
    background-color: var(--auth-layout-icon-bg-active);
    transition-duration: var(--m__duration-instant);
  }
}

.auth-layout__promo-footer {
  line-height: var(--m__line-height-base);
}

.auth-layout__promo-status {
  display: grid;
  margin-bottom: var(--m__spacer-s);

  & > .auth-layout__promo-caption,
  & > .auth-layout__promo-links {
    grid-area: 1 / 1;
  }
}

/* Sits in the same grid cell as the captions: visible at rest, replaced by
   the hovered caption without a transition (only the 3D graphic animates). */
.auth-layout__promo-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m__gap-s) var(--m__gap-l);

  & a {
    color: var(--m__text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-skip-ink: none;
    text-decoration-color: color-mix(
      in srgb,
      var(--m__text) 35%,
      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) 35%,
        transparent
      );
      transition-duration:
        var(--m__duration-instant), var(--m__duration-instant);
    }
  }
}

.auth-layout__promo-caption {
  visibility: hidden;
  margin: 0;

  & .auth-layout__promo-caption-lead {
    color: var(--m__text-link-hover);
    font-weight: var(--m__font-weight-bold);
  }

  & .auth-layout__promo-caption-tagline {
    color: var(--m__text);
  }
}

.auth-layout__promo:has(.auth-layout__icon-stack[data-stack-focus="velma"])
  .auth-layout__promo-caption[data-term="velma"],
.auth-layout__promo:has(
    .auth-layout__icon-stack[data-stack-focus="transcription"]
  )
  .auth-layout__promo-caption[data-term="transcription"],
.auth-layout__promo:has(
    .auth-layout__icon-stack[data-stack-focus="deepfake-detection"]
  )
  .auth-layout__promo-caption[data-term="deepfake-detection"],
.auth-layout__promo:has(
    .auth-layout__icon-stack[data-stack-focus="pii-phi-redaction"]
  )
  .auth-layout__promo-caption[data-term="pii-phi-redaction"],
.auth-layout__promo:has(
    .auth-layout__icon-stack[data-stack-focus="music-speech-detection"]
  )
  .auth-layout__promo-caption[data-term="music-speech-detection"],
.auth-layout__promo:has(
    .auth-layout__icon-stack[data-stack-focus="speech-to-text"]
  )
  .auth-layout__promo-caption[data-term="speech-to-text"],
.auth-layout__promo:has(.auth-layout__icon-stack[data-stack-focus="ai-music"])
  .auth-layout__promo-caption[data-term="ai-music"],
.auth-layout__promo:has(.auth-layout__icon-stack[data-stack-focus="language"])
  .auth-layout__promo-caption[data-term="language"],
.auth-layout__promo:has(
    .auth-layout__icon-stack[data-stack-focus="emotion-detection"]
  )
  .auth-layout__promo-caption[data-term="emotion-detection"],
.auth-layout__promo:has(
    .auth-layout__icon-stack[data-stack-focus="accent-identification"]
  )
  .auth-layout__promo-caption[data-term="accent-identification"],
.auth-layout__promo:has(
    .auth-layout__icon-stack[data-stack-focus="voice-match"]
  )
  .auth-layout__promo-caption[data-term="voice-match"] {
  visibility: visible;
}

.auth-layout__promo:has(.auth-layout__icon-stack[data-stack-focus])
  .auth-layout__promo-links {
  visibility: hidden;
}

.auth-layout__header.prototype-header {
  padding: 0;
  justify-content: flex-start;

  & .prototype-header__brand {
    font-size: 0.9em;
    font-weight: var(--m__font-weight-heavy);
  }
}

.auth-layout__main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--m__spacer-l) 0;
}

.auth-form {
  width: 100%;
  max-width: 20rem;

  & h1 {
    margin: 0 0 var(--m__default-margin-bottom);
    font-size: 1.6rem;
    font-weight: var(--m__font-weight-heavy);
    line-height: 1.2;
    color: var(--m__text-accent);
  }

  & .auth-form__oauth {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--m__default-margin-bottom);

    & .m__button-secondary-outline.M {
      width: 100%;
      margin-bottom: var(--m__default-margin-bottom);

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  & .auth-form__textfield-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }

  & .auth-form__textfield-header a,
  & .auth-form__link {
    font-size: var(--m__font-size-s);
    color: var(--m__text-link);
    text-decoration: underline;
    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);
    }
  }

  & .auth-form__agreement {
    margin-bottom: var(--m__spacer-s);
    font-size: var(--m__font-size-s);

    & a {
      display: inline-block;
      padding-block: 0.35em;
      margin-block: -0.35em;
      line-height: 1;
      transition: color var(--m__duration-base) var(--m__easing-base);
    }

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

    &:has(a:hover) {
      color: var(--m__text);

      & input[type="checkbox"]:not(:checked) {
        border-color: var(--m__border);
      }

      & input[type="checkbox"]:checked {
        background-color: var(--m__bg-accent);
        border-color: var(--m__bg-accent);
      }
    }
  }

  & .auth-form__actions {
    margin-bottom: var(--m__default-margin-bottom);

    & .m__button-primary.M,
    & .m__button-secondary-outline.M {
      width: 100%;
    }
  }

  & .auth-form__link {
    display: block;
    text-align: center;
    font-size: var(--m__font-size-s);
    margin-bottom: var(--m__default-margin-bottom);
  }

  & .auth-form__links {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--m__font-size-s);

    & a {
      margin-bottom: var(--m__default-margin-bottom);

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

.docs-model-nav {
  display: flex;
  flex: 0 0 8rem;
  flex-direction: column;
  gap: var(--m__gap-nav);
  width: 8rem;
  max-width: 8rem;
  margin-bottom: var(--m__default-margin-bottom);

  @media (width < 767px) {
    flex: none;
    width: 100%;
    max-width: none;
  }
}

.docs-model-nav__loading {
  padding: var(--m__padding-button-m);
  color: var(--m__text-caption);
  font-size: var(--m__font-size-s);
}

.docs-model-nav__group {
  display: flex;
  flex-direction: column;
}

.docs-model-nav__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--m__gap-xxxxs);
  padding: var(--m__padding-button-m);
  padding-inline-end: 1rem;
  background: none;
  border: var(--m__border-width-s) solid
    color-mix(in srgb, currentColor 25%, var(--m__bg));
  font: inherit;
  font-size: var(--m__font-size-s);
  text-align: left;
  width: 100%;
  cursor: pointer;
  color: var(--m__text);
  transition: color var(--m__duration-base) var(--m__easing-base);

  &:not(:first-child) {
    margin-top: -1px;
  }

  &:first-child {
    border-radius: var(--m__radius-m) var(--m__radius-m) 0 0;
  }

  &:last-child {
    border-radius: 0 0 var(--m__radius-m) var(--m__radius-m);
  }

  &:first-child:last-child {
    border-radius: var(--m__radius-m);
  }

  &:hover {
    position: relative;
    z-index: 1;
    color: var(--m__text-link-hover);
    transition-duration: var(--m__duration-instant);
  }

  &.active {
    position: relative;
    z-index: 1;
    background-color: color-mix(in srgb, var(--m__text-link) 8%, transparent);
    cursor: default;
    pointer-events: none;
  }

  & .docs-model-nav__group-label {
    display: block;
    font-weight: var(--m__font-weight-bold);
    margin-bottom: 0.1rem;
    overflow-wrap: anywhere;
  }

  & .docs-model-nav__item-row {
    display: flex;
    align-items: center;
    gap: var(--m__gap-xxs);
    max-width: 100%;
    min-width: 0;

    & svg {
      flex-shrink: 0;
      width: 0.9em;
      height: 0.9em;
    }

    & span {
      min-width: 0;
      overflow-wrap: anywhere;
    }
  }
}

/* Models navigation plaque: family columns on the pricing page
   (`src/prototypes/pricing.html`) and the vertical variant in the
   playground sidebar (`src/includes/prototypes/playground-nav-sidebar.html`). */

.models-nav {
  width: 100%;
  padding: 0.2rem 0.5rem;
  background-color: var(--m__bg-surface);

  & .models-nav__cols {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
  }

  & .models-nav__col {
    flex: 1 1 0;
    min-width: 0;
  }

  & .models-nav__col-title {
    display: block;
    padding: 0.4rem 0.5rem 0.4rem 0.35rem;
    border-bottom: var(--m__border-width-s) solid var(--m__border);
    font-family: var(--m__font-family-semi-mono);
    font-size: var(--m__font-size-s);
    font-weight: var(--m__font-weight-regular);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--m__text-caption);
    white-space: nowrap;
  }

  & .models-nav__models {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    padding-top: 0.15em;
    padding-bottom: 0.5em;
  }

  & .models-nav__link {
    display: flex;
    align-items: center;
    gap: var(--m__gap-xxs);
    padding: 0.3rem 0.5rem 0.3rem 0.35rem;
    color: var(--m__text);
    text-decoration: none;
    font-size: var(--m__font-size-s);
    font-weight: var(--m__font-weight-medium);
    white-space: nowrap;
    transition: color var(--m__duration-base)
      var(--m__easing-base);

    &:hover:not(.active) {
      color: var(--m__text-link-hover);
      text-decoration: none;
      transition-duration: var(--m__duration-instant);
    }

    &.active {
      background-color: var(--m__bg);
      cursor: default;
      pointer-events: none;
    }
  }

  & .models-nav__link-icon {
    width: 1.1rem;
    height: 1.1rem;
    color: currentColor;
    fill: currentColor;
    flex-shrink: 0;
  }

  @media (width < 767px) {
    & .models-nav__cols {
      flex-wrap: wrap;
      gap: var(--m__gap-l);
    }

    & .models-nav__col {
      flex: 1 1 calc(50% - var(--m__gap-l) / 2);
    }

    & .models-nav__col-title {
      white-space: normal;
    }

    & .models-nav__link {
      white-space: normal;
    }
  }
}

/* Vertical variant: family groups stacked in a sidebar */
.models-nav--vertical {
  display: flex;
  flex-direction: column;
  padding: 0.1rem 0.35rem 0.35rem;
  max-width: 12rem;

  & .models-nav__group {
    display: flex;
    flex-direction: column;
  }

  & .models-nav__group-title {
    display: block;
    padding: 0.5rem 0.5rem 0.1rem 0.35rem;
    font-family: var(--m__font-family-semi-mono);
    font-size: var(--m__font-size-xs);
    font-weight: var(--m__font-weight-regular);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--m__text-caption);
    white-space: nowrap;
  }

  & .models-nav__models {
    padding-bottom: 0.35em;
  }

  & .models-nav__link-icon {
    width: 0.9rem;
    height: 0.9rem;
  }
}

/* "Preview" section label in the model list */
.docs-model-list__section-label {
  padding: 0.6rem 0.75rem 0.1rem;
  font-size: var(--m__font-size-xs);
  font-weight: var(--m__font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--m__text-caption);
}

.docs-layout {
  align-items: flex-start;
}

.docs-content {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
}

/* Empty / loading state */
.docs-loading {
  padding: 2rem 0.75rem;
  color: var(--m__text-caption);
  font-size: var(--m__font-size-s);
  text-align: center;
}

.docs-quickstart-content h2,
.docs-quickstart-content h3,
.docs-quickstart-content h4,
.docs-quickstart-content h5,
.docs-quickstart-content h6 {
  margin-top: var(--m__spacer-m);
}

.docs-quickstart-content h2 {
  font-size: var(--m__font-size-l);
}

/* Doc content panel — code-block-style wrapper for both quickstart and API spec */
.docs-panel {
  background-color: var(--m__bg-surface);
  border-radius: var(--m__radius-s);
  overflow: hidden;
  margin-bottom: var(--m__default-margin-bottom);

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

  & .docs-panel__body {
    padding: 0.5rem 0.7rem;

    & pre {
      border: var(--m__border-width-s) solid var(--m__border);
    }

    & code {
      font-family: var(--m__font-family-semi-mono);
      color: var(--m__text-code);
      background: none;
      border: none;
      padding: 0;
    }

    & pre code {
      color: inherit;
    }

    & h2 {
      font-size: 1rem;
    }

    & h3 {
      font-size: 1rem;
      font-weight: var(--m__font-weight-regular);
    }

    & table {
      margin-bottom: var(--m__default-margin-bottom);
    }

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

    & table th {
      background-color: transparent;
      font-weight: var(--m__font-weight-regular);
    }
  }
}

/* Pricing comparison table */
.pricing-table-wrap {
  overflow-x: auto;
  margin-bottom: var(--m__default-margin-bottom);
}

.models-pricing-table {
  --models-pricing-label-col: 12rem;
  width: 100%;
  table-layout: fixed;
}

.models-pricing-table col:nth-child(1) {
  width: var(--models-pricing-label-col);
}

.models-pricing-table--3 col:nth-child(2),
.models-pricing-table--3 col:nth-child(3) {
  width: calc((100% - var(--models-pricing-label-col)) / 2);
}

.models-pricing-table--2 col:nth-child(2) {
  width: calc(100% - var(--models-pricing-label-col));
}

/* Match pixel widths of the 4-column table: col % ÷ table scale */
.models-pricing-table--4 col:nth-child(1) {
  width: 20%;
}

.models-pricing-table--4 col:nth-child(2),
.models-pricing-table--4 col:nth-child(3),
.models-pricing-table--4 col:nth-child(4) {
  width: calc(80% / 3);
}

/* 5-column table: label col + 4 equal model columns */
.models-pricing-table--5 col:nth-child(1) {
  width: 16%;
}

.models-pricing-table--5 col:nth-child(2),
.models-pricing-table--5 col:nth-child(3),
.models-pricing-table--5 col:nth-child(4),
.models-pricing-table--5 col:nth-child(5) {
  width: 21%;
}

/* Grouped column headers (e.g. "English Fast" spanning Batch + Streaming) */
.models-pricing-table__group-header {
  font-weight: var(--m__font-weight-bold);
  border-bottom: var(--m__border-width-s) solid var(--m__text);
}

/* Sub-labels in second thead row of grouped tables */
.models-pricing-table--5 thead tr:nth-child(2) th {
  font-size: var(--m__font-size-s);
  color: var(--m__text-caption);
  font-weight: var(--m__font-weight-regular);
}

.models-pricing-table th {
  font-size: var(--m__font-size-m);
  color: var(--m__text);
  font-weight: var(--m__font-weight-regular);
}

.models-pricing-table thead th {
  vertical-align: baseline;
}

.models-pricing-table thead th:first-child {
  font-size: var(--m__font-size-s);
  color: var(--m__text-caption);
  font-weight: var(--m__font-weight-regular);
}

.models-pricing-table tbody td:first-child:not([colspan]) {
  font-size: var(--m__font-size-s);
  color: var(--m__text-caption);
}

.models-section-intro {
  --models-pricing-label-col: 12rem;
  display: grid;
  grid-template-columns: var(--models-pricing-label-col) 1fr;
  align-items: start;

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

.models-section-heading__icon {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  line-height: 1;
  position: relative;
  top: 0.1em;
  color: var(--m__text);
}

.models-section-intro__icon-tile {
  --models-section-intro-icon-size: 8.625rem;
  --models-section-intro-icon-align-offset: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--models-section-intro-icon-size);
  aspect-ratio: 1;
  margin-top: calc(var(--models-section-intro-icon-align-offset) * -1);
  margin-left: calc(var(--models-section-intro-icon-align-offset) * -1);
  padding: 0;
  background-color: transparent;
  color: var(--m__text);

  & svg {
    display: block;
    box-sizing: border-box;
    width: calc(100% - var(--models-section-intro-icon-align-offset) * 2);
    height: calc(100% - var(--models-section-intro-icon-align-offset) * 2);
    padding: 0.75rem;
    border-radius: inherit;
    background-color: var(--m__bg-surface);
    fill: currentColor;
    stroke: none;
  }
}

.models-section-intro__content {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  min-width: 0;

  & h2 {
    margin: 0;
  }

  & p {
    margin: 0;
  }
}

.models-table-price {
  font-family: var(--m__font-family-semi-mono);
  font-size: var(--m__font-size-m);
  font-weight: var(--m__font-weight-bold);
  color: var(--m__text);
}

.models-column-heading {
  display: inline-flex;
  align-items: baseline;
  gap: var(--m__gap-xxxs);
}

.models-column-heading__icon {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  line-height: 1;
  position: relative;
  top: 0.08em;
  color: currentColor;
}

.models-column-heading__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: none;
}

.models-pricing-table tr:has(+ tr.models-table-group-row) td {
  border-bottom: none;
}

.models-pricing-table tr.models-table-group-row td {
  padding-top: 1.4rem;
  padding-bottom: 0.5rem;
  border-bottom: var(--m__border-width-m) solid
    color-mix(in srgb, var(--m__text) 10%, transparent);
}

.models-pricing-table__group-title {
  display: block;
  font-family: var(--m__font-family-semi-mono);
  font-size: var(--m__font-size-s);
  font-weight: var(--m__font-weight-regular);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--m__text-caption);
}

.models-pricing-table tr.models-table-group-row + tr td {
  border-top: var(--m__border-width-s) solid var(--m__text);
}

.models-pricing-table__col-headers {
  display: none;
}

@media (width < 767px) {
  .pricing-table-wrap {
    overflow-x: visible;
  }

  .models-pricing-table {
    display: block;
    table-layout: auto;

    & colgroup {
      display: none;
    }

    & thead,
    & tbody {
      display: block;
    }

    & tr {
      display: grid;
      gap: var(--m__gap-nav-menu-item) var(--m__gap-m);
      padding-block: 0.75rem;
      border-bottom: var(--m__border-width-s) solid
        color-mix(in srgb, var(--m__text) 12%, transparent);
    }

    & thead tr {
      display: none;
    }

    & th,
    & td {
      display: block;
      padding: 0;
      border: none;
    }

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

  .models-pricing-table--3 {
    & thead {
      display: none;
    }

    & .models-pricing-table__col-headers {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--m__gap-m);
      padding-block: 0.5rem;
      border-bottom: var(--m__border-width-s) solid
        color-mix(in srgb, var(--m__text) 12%, transparent);

      & .models-pricing-table__col-headers-label {
        display: none;
      }

      & td:nth-child(2) {
        grid-column: 1;
      }

      & td:nth-child(3) {
        grid-column: 2;
      }
    }

    & tbody tr {
      grid-template-columns: 1fr 1fr;
    }

    & tbody td:first-child:not([colspan]) {
      grid-column: 1 / -1;
      font-size: var(--m__font-size-s);
      font-weight: var(--m__font-weight-medium);
      color: var(--m__text);
    }

    & tbody td:nth-child(2):not([colspan]) {
      grid-column: 1;
    }

    & tbody td:nth-child(3) {
      grid-column: 2;
    }

    & tbody td[colspan="2"] {
      grid-column: 1 / -1;
    }
  }

  .models-pricing-table--2 {
    & thead {
      display: none;
    }

    & tbody tr {
      grid-template-columns: 1fr;
    }

    & tbody td:first-child:not([colspan]) {
      grid-column: 1;
      font-size: var(--m__font-size-s);
      font-weight: var(--m__font-weight-medium);
      color: var(--m__text);
    }

    & tbody td:nth-child(2) {
      grid-column: 1;
    }
  }

  .models-pricing-table tr:has(+ tr.models-table-group-row) {
    border-bottom: none;
  }

  .models-pricing-table tr.models-table-group-row {
    display: block;
    padding-top: 1.4rem;
    padding-bottom: 0;

    & td {
      padding-bottom: 0.5rem;
      border-bottom: var(--m__border-width-m) solid
        color-mix(in srgb, var(--m__text) 10%, transparent);
    }
  }

  .models-pricing-table
    tr.models-table-group-row
    + tr:not(.models-pricing-table__col-headers) {
    border-top: none;
  }
}

/*
 * Online docs are experimental. Doc-specific layout values and components live
 * only in this file — do not add them to src/styles/tokens/ or other shared
 * design-system modules until the pattern is promoted.
 */

.m__online-doc-wrapper {
  --online-doc-title-bleed: 3rem;
  --online-doc-title-padding-block: 1.5rem;
  --online-doc-callout-bg-color: color-mix(
    in srgb,
    var(--m__color-blue-500) 12%,
    var(--m__color-white)
  );
  /* Print: same value as @page margin (each side). */
  --online-doc-print-margin: 0.5in;
  --online-doc-print-letter-height: 11in;
  --online-doc-print-title-min-height: calc(
    var(--online-doc-print-letter-height) - 2 * var(--online-doc-print-margin)
  );

  position: relative;
  width: 100%;
  margin: 0 auto;
  max-width: 900px;
  padding: 0 0.7rem;
  color: var(--m__color-slate-900);

  & a {
    color: inherit;
  }

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

  & .m__text-width {
    width: 80%;
    max-width: 100%;

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

  & h1,
  & h2,
  & h3,
  & h4,
  & h5,
  & h6 {
    break-after: avoid;
  }

  /* Section kicker (e.g. Case Study, Abstract) — online docs only. */
  & h4.online-doc-kicker {
    font-size: var(--m__font-size-s);
    font-weight: var(--m__font-weight-bold);
    line-height: var(--m__line-height-base);
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }

  & h1 {
    font-family: var(--m__font-family-semi-mono);
    font-size: 3.5em;
  }

  & table,
  & .m__code-block,
  & figure,
  & .m__table {
    break-inside: avoid;
  }

  & ul,
  & ol,
  & blockquote {
    break-inside: avoid;
  }

  /* Accent paragraph — prototype; mono, bold. */
  & p.accent {
    font-family: var(--m__font-family-semi-mono);
    font-size: var(--m__font-size-xxl);
    font-weight: var(--m__font-weight-bold);
    line-height: var(--m__line-height-base);
    color: var(--m__color-blue-500);
  }

  & mark.online-doc-highlight {
    background-color: var(--online-doc-callout-bg-color);
    color: inherit;
    padding: 0;
    border-radius: 0.12em;
  }

  & ul.appendix-speech-list {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  & p.appendix-speech-label {
    margin-bottom: 0.55rem;
    break-after: avoid;
    page-break-after: avoid;
  }

  & p.appendix-speech-label + ul.appendix-speech-list {
    break-before: avoid;
    page-break-before: avoid;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  & ul.appendix-speech-list li.appendix-speech {
    --online-doc-appendix-bubble-radius: calc(var(--m__rounded-radius) * 3);

    font-size: var(--m__font-size-xl);
    font-family: var(--m__font-family-semi-mono);
    font-weight: var(--m__font-weight-bold);
    line-height: var(--m__line-height-base);
    color: var(--m__color-blue-500);
    background-color: var(--online-doc-callout-bg-color);
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    padding: 0.7rem 0.9rem;
    border-radius: var(--online-doc-appendix-bubble-radius);
    border-top-left-radius: 0;
    corner-shape: squircle;
    overflow: hidden;

    &::before {
      content: none;
    }
  }

  @media screen and (width < 767px) {
    & p.accent {
      font-size: var(--m__font-size-xl);
    }

    & ul.appendix-speech-list li.appendix-speech {
      font-size: var(--m__font-size-l);
    }
  }

  @supports not (corner-shape: squircle) {
    & ul.appendix-speech-list li.appendix-speech {
      --online-doc-appendix-bubble-radius-safari: calc(
        var(--online-doc-appendix-bubble-radius) / 3
      );

      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,0 l100,0 l0,100 l-100,0 Z"/></svg>')
          top left / calc(var(--online-doc-appendix-bubble-radius-safari) * 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(--online-doc-appendix-bubble-radius-safari) * 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(--online-doc-appendix-bubble-radius-safari) * 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(--online-doc-appendix-bubble-radius-safari) * 100) no-repeat
          intersect;
    }
  }

  /* Contextual panel — blue tint on white; body copy in callout stays accent blue. */
  & aside.online-doc-callout {
    color: var(--m__color-blue-500);
    background-color: var(--online-doc-callout-bg-color);
    padding: var(--m__widget-padding) calc(2 * var(--m__widget-padding))
      var(--m__widget-padding) var(--m__widget-padding);

    & .online-doc-callout__rule {
      border: 0;
      border-top: var(--m__border-width-s) solid var(--m__color-blue-500);
      margin: 0;
      margin-bottom: var(--m__default-margin-bottom);
      width: 100%;
    }

    /* Inner cell wrapper (layout hook; no border for now). */
    & .online-doc-callout-block {
      margin-bottom: 0.8rem;

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

    & .online-doc-callout-block strong {
      font-family: var(--m__font-family-semi-mono);
      font-weight: var(--m__font-weight-bold);
      text-decoration: underline;
      text-decoration-thickness: 3px;
      text-decoration-color: var(--m__color-blue-500);
      text-underline-offset: 0.18em;
      text-decoration-skip-ink: none;
    }

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

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

    @media screen and (width < 767px) {
      & .online-doc-callout-block p {
        font-size: var(--m__font-size-l);
      }
    }

    & a {
      color: var(--m__color-blue-600);
      text-decoration-color: color-mix(
        in srgb,
        var(--m__color-blue-600) 35%,
        transparent
      );
    }

    & a:hover {
      color: var(--m__color-blue-500);
      text-decoration-color: color-mix(
        in srgb,
        var(--m__color-blue-500) 35%,
        transparent
      );
    }

    & mark {
      background: transparent;
      color: inherit;
      text-decoration: underline;
      text-decoration-thickness: 3px;
      text-decoration-color: var(--m__color-blue-500);
      text-underline-offset: 0.18em;
      text-decoration-skip-ink: none;
    }

    /* First stats row: icon + stacked blocks (flex). */
    & .online-doc-callout-sequence .online-doc-callout-item {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: var(--m__gap-xxs);
    }

    & .online-doc-callout-sequence .online-doc-callout-item__icon {
      flex-shrink: 0;
      width: 2rem;
      height: 2rem;
      color: var(--m__color-blue-500);

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

    & .online-doc-callout-sequence .online-doc-callout-item__body {
      flex: 1;
      min-width: 0;
      margin-top: 0.15rem;
    }
  }
}

.title-container {
  background-color: var(--m__bg-accent);
  color: var(--m__text-inverted);
  border-radius: var(--m__radius-xl);
  margin-top: var(--m__spacer-m);
  margin-left: calc(-1 * var(--online-doc-title-bleed));
  margin-right: calc(-1 * var(--online-doc-title-bleed));
  padding: var(--online-doc-title-padding-block) var(--online-doc-title-bleed);
  display: flex;
  flex-direction: column;

  &.dark-mode {
    /* Mid between dark-mode --m__text rgb(180, 180, 190) and white. */
    --m__text: rgb(218, 218, 223);
    /* Draft stops — long spans ≈ slow blend, short spans ≈ quick blend. */
    background-color: var(--m__color-slate-900);
    /* ~135deg ≈ to bottom right; smaller angle = a bit counter-clockwise. */
    background-image: linear-gradient(
      110deg,
      var(--m__color-blue-600) 0%,
      var(--m__color-slate-900) 40%,
      var(--m__color-slate-700) 75%,
      var(--m__color-red-500) 100%
    );
    color: var(--m__text);
  }

  & h1,
  & h4,
  & p {
    color: inherit;
  }

  & .title-container__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--m__gap-xxl);
    row-gap: var(--m__gap-xl);
    margin-top: auto;
    padding-top: 3rem;
    font-size: var(--m__font-size-s);
  }

  & .title-container__footer-spacer {
    flex: 1 1 auto;
    min-width: 1rem;
  }

  @media screen and (width < 767px) {
    margin-left: 0;
    margin-right: 0;
    min-height: 25em;
    padding: calc(var(--online-doc-title-padding-block) / 2)
      calc(var(--online-doc-title-padding-block) / 2);

    & h1 {
      font-size: 1.7em;
    }

    & .title-container__footer-spacer {
      flex-basis: 100%;
      height: 0;
      flex-grow: 0;
      min-width: 0;
    }
  }

  & a.title-container__logo-link {
    display: block;
    color: var(--m__text-link);
    text-decoration: none;
    will-change: color;
    transition: color var(--m__duration-base)
      var(--m__easing-base);

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

  & a[href^="mailto:"] {
    color: var(--m__text-link);
    will-change: color;
    transition: color var(--m__duration-base)
      var(--m__easing-base);

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

  & .title-container__logo-slot {
    position: relative;
    width: 7.25rem;
    flex-shrink: 0;

    &.title-container__logo-slot--activision {
      width: calc(7.25rem * 0.88);
      bottom: -0.35em;
    }

    & .title-container__logo-slot-label {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    & .title-container__logo-slot-graphic {
      & svg {
        display: block;
        width: 100%;
        height: auto;
      }
    }
  }

  @media print {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding: var(--online-doc-print-margin);
    min-height: var(--online-doc-print-title-min-height);
    box-sizing: border-box;
    break-after: page;
    break-inside: avoid;
  }
}

@media print {
  @page {
    size: letter;
    margin: 0.5in;
  }

  body {
    font-size: 12pt;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* Hoisted out of `.m__online-doc-wrapper` nesting so every page / engine gets
     the same measure; `p` alone left lists and headings full width, which
     reads like the rule “stopped” after the callout page. */
  .m__online-doc-wrapper {
    max-width: none;
    padding: 0;
    margin: 0;
  }

  .m__online-doc-wrapper p {
    font-size: 1.1em;
    width: 90%;
    box-sizing: border-box;
  }

  .m__online-doc-wrapper p.accent {
    font-size: 1.8em;
    margin-bottom: 0.5em;
  }

  .m__online-doc-wrapper ul,
  .m__online-doc-wrapper ol {
    width: 90%;
    box-sizing: border-box;
  }

  .m__online-doc-wrapper h2,
  .m__online-doc-wrapper h3,
  .m__online-doc-wrapper h4,
  .m__online-doc-wrapper h5,
  .m__online-doc-wrapper h6 {
    width: 90%;
    box-sizing: border-box;
  }

  .m__online-doc-wrapper aside.online-doc-callout {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .m__online-doc-wrapper p.online-doc-callout-lead {
    break-after: avoid;
    page-break-after: avoid;
  }

  .m__online-doc-wrapper p.online-doc-callout-lead + .m__space {
    break-after: avoid;
    page-break-after: avoid;
  }

  .m__online-doc-wrapper
    p.online-doc-callout-lead
    + .m__space
    + aside.online-doc-callout {
    break-before: avoid;
    page-break-before: avoid;
  }

  .m__online-doc-wrapper h2.online-doc-print-new-page {
    break-before: page;
    page-break-before: always;
  }

  .m__online-doc-wrapper
    aside.online-doc-callout.online-doc-callout--print-fullpage {
    break-before: page;
    break-after: page;
    break-inside: avoid;
    box-sizing: border-box;
    min-height: var(--online-doc-print-title-min-height);
    padding: var(--m__widget-padding) calc(2 * var(--m__widget-padding))
      var(--m__widget-padding) var(--m__widget-padding);
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
  }

  .m__online-doc-wrapper aside.online-doc-callout .online-doc-callout-block p {
    font-size: 1.2em;
  }
}

/*
 * Styles for the new index-landing prototype.
 *
 * These classes are intentionally outside the design system prefix (m__).
 * They exist only to compose the landing page and should be reviewed
 * before being promoted into the design system proper.
 */

.landing-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m__gap-s);
}

.landing-mini-hero {
  max-width: 60rem;
}

.landing-feature-inline {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  white-space: nowrap;
  vertical-align: baseline;
}

.landing-feature-inline__icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 1em;
  line-height: 1;
  position: relative;
  top: 0.2em;
  color: var(--m__text);
}

.landing-feature-inline__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: none;
}

/* Larger, gothic-faced h2 — used as a section opener */

h2.accent {
  font-size: 2.5rem;
  font-family: var(--m__font-family-gothic);
  line-height: 1.1;
}

/* Slight letter-spacing on uppercase h6 eyebrows */

h6 {
  letter-spacing: 0.04em;
}

/* Benchmark stats — large numeric value + caption */

.landing-stat__value {
  font-family: var(--m__font-family-gothic);
  font-size: var(--m__font-size-xxxl);
  font-weight: var(--m__font-weight-bold);
  line-height: 1;
  margin: 0;
}

.landing-stat__label {
  margin: var(--m__spacer-xs) 0 0;
}

/* Pricing tier card — label, price, note */

.landing-price__value {
  font-family: var(--m__font-family-gothic);
  font-size: var(--m__font-size-xxl);
  font-weight: var(--m__font-weight-bold);
  line-height: 1.1;
  margin: var(--m__spacer-xs) 0 0;
}

.landing-price__unit {
  font-size: var(--m__font-size-m);
  font-weight: var(--m__font-weight-regular);
  color: var(--m__text-caption);
}

.landing-price__note {
  font-size: var(--m__font-size-s);
  color: var(--m__text-caption);
  margin: var(--m__spacer-xs) 0 0;
}


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

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

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

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

:root {
  --initial-height: 14em;
  --player-visualization-height: 75%;
  --player-visualization-mobile-height: 65%;

  /* Captions top position - common for all time/emotion captions */
  --player-captions-top: calc(var(--player-visualization-height) + 1.4em);
  --player-captions-top-mobile: calc(
    var(--player-visualization-mobile-height) + 1.3em
  );

  /* Emotion color animation timing */
  --emotion-color-delay: var(--m__duration-instant);
  --emotion-color-duration: var(--m__duration-medium);
}

@keyframes emotion-color-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.media-container {
  & .media-box {
    position: relative;
    display: flex;
    flex-direction: column;
    --padding: 0.2em;
    --speaker-count: 2;

    height: var(--initial-height);
    background-color: rgba(var(--ids__bg-accent-RGB), 1);

    &[data-speaker-count="1"] { --speaker-count: 1; }
    &[data-speaker-count="2"] { --speaker-count: 2; }
    &[data-speaker-count="3"] { --speaker-count: 3; }
    &[data-speaker-count="4"] { --speaker-count: 4; }
    &[data-speaker-count="5"] { --speaker-count: 5; }
  }

  /* Player visualization timeline */
  & .player-visualization {
    position: relative;
    background-color: rgba(var(--ids__bg-surface-RGB), 1);
    height: var(--player-visualization-height);
    transition: height var(--m__duration-medium) var(--m__easing-base);

    & .transcript-clip {
      position: absolute;
      height: 100%;
      top: 0;
      cursor: pointer;

      &:hover,
      &.hover {
        & .clip-visualization {
          filter: brightness(112%) saturate(105%);
          transition: filter var(--m__duration-instant) var(--m__easing-base);

          &::after {
            filter: brightness(112%) saturate(105%);
          }
        }
      }

      & .clip-visualization {
        position: absolute;
        left: 0;
        right: 0;
        height: calc(100% / var(--speaker-count));
        transition: filter 0.1s var(--m__easing-base);
        background-color: rgba(var(--emotion-neutral-RGB), 1);
        border-color: rgba(var(--emotion-neutral-RGB), 1);

        &::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          opacity: 0;
          pointer-events: none;
          animation: emotion-color-fade-in var(--emotion-color-duration) ease-in
            var(--emotion-color-delay) forwards;
        }
      }

      &[data-speaker-index="1"] .clip-visualization {
        top: calc((1 - 1) * (100% / var(--speaker-count)));
      }
      &[data-speaker-index="2"] .clip-visualization {
        top: calc((2 - 1) * (100% / var(--speaker-count)));
      }
      &[data-speaker-index="3"] .clip-visualization {
        top: calc((3 - 1) * (100% / var(--speaker-count)));
      }
      &[data-speaker-index="4"] .clip-visualization {
        top: calc((4 - 1) * (100% / var(--speaker-count)));
      }
      &[data-speaker-index="5"] .clip-visualization {
        top: calc((5 - 1) * (100% / var(--speaker-count)));
      }

      & .clip-caption,
      & .clip-text {
        display: none;
      }

      & .clip-caption .behaviour {
        &::after {
          content: attr(data-behaviour-type);
          display: none;
        }
      }

      /* Emotion colors */
      &.emotion-neutral .clip-visualization::after {
        animation: none;
      }
      &.emotion-unknown .clip-visualization::after {
        background-color: rgba(var(--emotion-unknown-RGB), 1);
        opacity: 1;
      }
      &.emotion-angry .clip-visualization::after {
        background-color: rgba(var(--emotion-angry-RGB), 1);
        opacity: 1;
      }
      &.emotion-contemptuous .clip-visualization::after {
        background-color: rgba(var(--emotion-contemptuous-RGB), 1);
        opacity: 1;
      }
      &.emotion-disgusted .clip-visualization::after {
        background-color: rgba(var(--emotion-disgusted-RGB), 1);
        opacity: 1;
      }
      &.emotion-afraid .clip-visualization::after {
        background-color: rgba(var(--emotion-afraid-RGB), 1);
        opacity: 1;
      }
      &.emotion-anxious .clip-visualization::after {
        background-color: rgba(var(--emotion-anxious-RGB), 1);
        opacity: 1;
      }
      &.emotion-stressed .clip-visualization::after {
        background-color: rgba(var(--emotion-stressed-RGB), 1);
        opacity: 1;
      }
      &.emotion-surprised .clip-visualization::after {
        background-color: rgba(var(--emotion-surprised-RGB), 1);
        opacity: 1;
      }
      &.emotion-ashamed .clip-visualization::after {
        background-color: rgba(var(--emotion-ashamed-RGB), 1);
        opacity: 1;
      }
      &.emotion-frustrated .clip-visualization::after {
        background-color: rgba(var(--emotion-frustrated-RGB), 1);
        opacity: 1;
      }
      &.emotion-calm .clip-visualization::after {
        background-color: rgba(var(--emotion-calm-RGB), 1);
        opacity: 1;
      }
      &.emotion-confident .clip-visualization::after {
        background-color: rgba(var(--emotion-confident-RGB), 1);
        opacity: 1;
      }
      &.emotion-interested .clip-visualization::after {
        background-color: rgba(var(--emotion-interested-RGB), 1);
        opacity: 1;
      }
      &.emotion-affectionate .clip-visualization::after {
        background-color: rgba(var(--emotion-affectionate-RGB), 1);
        opacity: 1;
      }
      &.emotion-amused .clip-visualization::after {
        background-color: rgba(var(--emotion-amused-RGB), 1);
        opacity: 1;
      }
      &.emotion-excited .clip-visualization::after {
        background-color: rgba(var(--emotion-excited-RGB), 1);
        opacity: 1;
      }
      &.emotion-happy .clip-visualization::after {
        background-color: rgba(var(--emotion-happy-RGB), 1);
        opacity: 1;
      }
      &.emotion-hopeful .clip-visualization::after {
        background-color: rgba(var(--emotion-hopeful-RGB), 1);
        opacity: 1;
      }
      &.emotion-proud .clip-visualization::after {
        background-color: rgba(var(--emotion-proud-RGB), 1);
        opacity: 1;
      }
      &.emotion-relieved .clip-visualization::after {
        background-color: rgba(var(--emotion-relieved-RGB), 1);
        opacity: 1;
      }
      &.emotion-curious .clip-visualization::after {
        background-color: rgba(var(--emotion-curious-RGB), 1);
        opacity: 1;
      }
      &.emotion-sad .clip-visualization::after {
        background-color: rgba(var(--emotion-sad-RGB), 1);
        opacity: 1;
      }
      &.emotion-disappointed .clip-visualization::after {
        background-color: rgba(var(--emotion-disappointed-RGB), 1);
        opacity: 1;
      }
      &.emotion-bored .clip-visualization::after {
        background-color: rgba(var(--emotion-bored-RGB), 1);
        opacity: 1;
      }
      &.emotion-tired .clip-visualization::after {
        background-color: rgba(var(--emotion-tired-RGB), 1);
        opacity: 1;
      }
      &.emotion-concerned .clip-visualization::after {
        background-color: rgba(var(--emotion-concerned-RGB), 1);
        opacity: 1;
      }
      &.emotion-confused .clip-visualization::after {
        background-color: rgba(var(--emotion-confused-RGB), 1);
        opacity: 1;
      }
    }
  }

  & .speaker-labels {
    position: absolute;
    width: 100%;
    height: var(--player-visualization-height);
    transition: height var(--m__duration-medium) var(--m__easing-base);
    pointer-events: none;
    font-size: 0.8em;

    & .speaker-label {
      position: absolute;
      display: flex;
      align-items: flex-end;
      padding-left: 0.1em;
      height: calc(100% / var(--speaker-count));

      &[data-speaker-index="1"] {
        top: calc((1 - 1) * (100% / var(--speaker-count)));
      }
      &[data-speaker-index="2"] {
        top: calc((2 - 1) * (100% / var(--speaker-count)));
      }
      &[data-speaker-index="3"] {
        top: calc((3 - 1) * (100% / var(--speaker-count)));
      }
      &[data-speaker-index="4"] {
        top: calc((4 - 1) * (100% / var(--speaker-count)));
      }
      &[data-speaker-index="5"] {
        top: calc((5 - 1) * (100% / var(--speaker-count)));
      }

      & span {
        background-color: rgba(var(--ids__bg-surface-RGB), 1);
        padding: 0.1em 0.2em 0 0;
        color: rgba(var(--ids__text-RGB), 0.3);
      }
    }
  }

  & .behaviour-indicators {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--player-visualization-height);
    transition: height var(--m__duration-medium) var(--m__easing-base);
    pointer-events: none;
    z-index: 2;
    overflow: visible;

    & .behaviour-indicator {
      position: absolute;
      bottom: 0;
      display: flex;
      align-items: flex-end;
      gap: 0.1em;
      font-size: 0.8em;
      line-height: 1.2;
      padding-bottom: 0;
      z-index: 1;

      &[data-speaker-index="1"] {
        bottom: calc((var(--speaker-count) - 1) * (100% / var(--speaker-count)));
        top: auto;
      }
      &[data-speaker-index="2"] {
        bottom: calc((var(--speaker-count) - 2) * (100% / var(--speaker-count)));
        top: auto;
      }
      &[data-speaker-index="3"] {
        bottom: calc((var(--speaker-count) - 3) * (100% / var(--speaker-count)));
        top: auto;
      }
      &[data-speaker-index="4"] {
        bottom: calc((var(--speaker-count) - 4) * (100% / var(--speaker-count)));
        top: auto;
      }
      &[data-speaker-index="5"] {
        bottom: calc((var(--speaker-count) - 5) * (100% / var(--speaker-count)));
        top: auto;
      }

      &[data-behaviour-index="1"] { transform: translateY(0); }
      &[data-behaviour-index="2"] { transform: translateY(calc(-1 * 1.2em)); }
      &[data-behaviour-index="3"] { transform: translateY(calc(-2 * 1.2em)); }

      & .behaviour-icon {
        display: inline-block;
        width: 1em;
        height: 1em;
        flex-shrink: 0;
        order: 2;
        position: relative;
        z-index: 1;
        margin-top: -1px;
        transition: filter 0.1s var(--m__easing-base);

        & svg {
          width: 100%;
          height: 100%;
          fill: var(--m__color-white);
        }

        & .behaviour-icon__outline {
          fill: transparent;
        }
      }

      /* Emotion outline colors for behaviour icons */
      &[data-emotion="angry"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-angry-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
      &[data-emotion="contemptuous"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-contemptuous-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
      &[data-emotion="disgusted"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-disgusted-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
      &[data-emotion="afraid"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-afraid-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
      &[data-emotion="anxious"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-anxious-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
      &[data-emotion="stressed"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-stressed-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
      &[data-emotion="surprised"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-surprised-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
      &[data-emotion="ashamed"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-ashamed-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
      &[data-emotion="frustrated"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-frustrated-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
      &[data-emotion="fear"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-fear-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
      &[data-emotion="affectionate"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-affectionate-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
      &[data-emotion="amused"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-amused-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
      &[data-emotion="excited"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-excited-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
      &[data-emotion="happy"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-happy-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
      &[data-emotion="hopeful"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-hopeful-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
      &[data-emotion="proud"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-proud-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
      &[data-emotion="relieved"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-relieved-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
      &[data-emotion="curious"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-curious-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
      &[data-emotion="calm"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-calm-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
      &[data-emotion="confident"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-confident-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
      &[data-emotion="interested"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-interested-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
      &[data-emotion="sad"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-sad-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
      &[data-emotion="disappointed"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-disappointed-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
      &[data-emotion="bored"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-bored-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
      &[data-emotion="tired"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-tired-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
      &[data-emotion="concerned"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-concerned-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
      &[data-emotion="confused"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-confused-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
      &[data-emotion="neutral"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-neutral-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }

      & .behaviour-label {
        display: inline-block;
        font-size: 0.9em;
        font-weight: var(--m__font-weight-bold);
        white-space: nowrap;
        cursor: pointer;
        pointer-events: auto;
        order: 1;
        overflow: hidden;
        max-width: 0;
        transition: max-width var(--m__duration-medium) var(--m__easing-base), opacity var(--m__duration-medium) var(--m__easing-base);
        opacity: 0;

        & a {
          pointer-events: auto;
          text-decoration: none;
          display: block;
          border-bottom: var(--m__border-width-m) solid currentColor;
          padding-bottom: 0.05em;
          line-height: 1.2;
          transition: color var(--m__duration-xslow) var(--m__easing-base), border-color var(--m__duration-xslow) var(--m__easing-base);

          &:hover {
            color: rgba(var(--ids__text-link-RGB), 1);
            border-color: currentColor;
            transition: color var(--m__duration-instant) var(--m__easing-base), border-color var(--m__duration-instant) var(--m__easing-base);

            & span {
              transform: translateX(0.2em);
              transition: transform var(--m__duration-instant) var(--m__easing-base);
            }
          }

          & .behaviour-icon {
            display: inline-block;
            width: 0.9em;
            height: 0.9em;
            vertical-align: middle;
          }

          & .behaviour-icon--kiki,
          & .behaviour-icon--buba {
            position: relative;
          }

          & span {
            display: inline-block;
            font-weight: var(--m__font-weight-bold);
            transition: transform var(--m__duration-xslow) var(--m__easing-base);
          }
        }
      }
    }
  }

  & .behaviour-labels {
    position: absolute;
    width: 100%;
    height: var(--player-visualization-height);
    transition: height var(--m__duration-medium) var(--m__easing-base);
    pointer-events: none;
    z-index: 1;
    display: none; /* Hidden, replaced by behaviour-indicators */

    & .behaviour-label {
      position: absolute;
      font-size: 0.8em;
      line-height: 1.1;
      width: 10em;
      display: flex;
      align-items: flex-end;
      padding-bottom: 0.4em;
      height: calc(100% / var(--speaker-count));

      &:after {
        content: "";
        position: absolute;
        width: 0.4em;
        height: 0.4em;
        border-radius: 50%;
        background-color: var(--m__color-white);
        bottom: -0.2em;
        left: 0;
      }

      &[data-speaker-index="1"] {
        top: calc((1 - 1) * (100% / var(--speaker-count)));
      }
      &[data-speaker-index="2"] {
        top: calc((2 - 1) * (100% / var(--speaker-count)));
      }
      &[data-speaker-index="3"] {
        top: calc((3 - 1) * (100% / var(--speaker-count)));
      }
      &[data-speaker-index="4"] {
        top: calc((4 - 1) * (100% / var(--speaker-count)));
      }
      &[data-speaker-index="5"] {
        top: calc((5 - 1) * (100% / var(--speaker-count)));
      }

      & a {
        pointer-events: auto;
        text-decoration: none;
        display: block;
        border-bottom: var(--m__border-width-m) solid currentColor;
        padding-bottom: 0.05em;
        line-height: 1.2;
        transition: color var(--m__duration-xslow) var(--m__easing-base), border-color var(--m__duration-xslow) var(--m__easing-base);

        &:hover {
          color: rgba(var(--ids__text-link-RGB), 1);
          border-color: currentColor;
          transition: color var(--m__duration-instant) var(--m__easing-base), border-color var(--m__duration-instant) var(--m__easing-base);

          & span {
            transform: translateX(0.2em);
            transition: transform var(--m__duration-instant) var(--m__easing-base);
          }
        }

        & .behaviour-icon {
          display: inline-block;
          width: 0.9em;
          height: 0.9em;
          vertical-align: middle;
        }

        & .behaviour-icon--kiki,
        & .behaviour-icon--buba {
          position: relative;
        }

        & span {
          display: inline-block;
          font-weight: var(--m__font-weight-bold);
          transition: transform var(--m__duration-xslow) var(--m__easing-base);
        }
      }
    }
  }

  & .player-controls {
    position: relative;
    display: flex;
    align-items: center;
    height: calc(100% - var(--player-visualization-height));
    transition: height var(--m__duration-medium) var(--m__easing-base);
    padding-top: 1em;

    & .player-control-center {
      position: absolute;
      left: 0;
      right: 0;
      top: 0em;
      bottom: 0;
      padding-top: 0.8em;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background-color var(--m__duration-medium) var(--m__easing-base);
    }

    & .player-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.5em;
      height: 1.5em;
      cursor: pointer;
      transition: transform var(--m__duration-medium) var(--m__easing-base);

      & svg {
        width: 100%;
        height: 100%;
      }

      & svg,
      & svg * {
        fill: rgba(var(--ids__text-hover-RGB), 1);
        transition: fill var(--m__duration-xslow) var(--m__easing-base);
      }
    }

    & .player-control-center:hover {
      background-color: rgba(var(--ids__bg-surface-RGB), 0.3);
      transition: background-color var(--m__duration-instant) var(--m__easing-base);

      & .player-icon {
        transform: scale(1.1);
        transition: transform var(--m__duration-instant) var(--m__easing-base);
      }
    }

    & .player-control-center:hover .player-icon:hover {
      & svg,
      & svg * {
        fill: var(--m__color-white);
        transition: fill var(--m__duration-instant) var(--m__easing-base);
      }
    }
  }

  & .clip-text-caption {
    position: absolute;
    top: var(--player-visualization-height);
    transition: top var(--m__duration-medium) var(--m__easing-base);
    bottom: var(--padding);
    left: 0.2em;
    width: 80%;
    color: rgba(var(--ids__text-caption-RGB), 1);
    opacity: 0;
    transition: opacity var(--m__duration-xslow) var(--m__easing-base);
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none;

    & span {
      font-size: 0.8em;
    }

    &.visible {
      opacity: 1;
      transition: opacity var(--m__duration-instant) var(--m__easing-base);
    }

    &::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 1em;
      height: 100%;
      background: linear-gradient(
        to right,
        transparent,
        rgba(var(--ids__bg-accent-RGB), 1)
      );
      pointer-events: none;
    }
  }

  & .player-status-caption {
    position: absolute;
    top: var(--player-visualization-height);
    transition: top var(--m__duration-medium) var(--m__easing-base);
    bottom: var(--padding);
    right: var(--padding);
    pointer-events: none;

    & .emotion-caption {
      font-size: 0.8em;
      opacity: 0;
      transition: opacity var(--m__duration-xslow) var(--m__easing-base);

      &.visible {
        opacity: 1;
        transition: opacity var(--m__duration-instant) var(--m__easing-base);
      }
    }
  }

  & .player-total-time {
    position: absolute;
    top: var(--player-captions-top);
    transition: top var(--m__duration-medium) var(--m__easing-base);
    right: var(--padding);
    pointer-events: none;

    & .total-time {
      opacity: 0.5;
      font-size: 0.8em;
    }
  }

  & .player-position-indicator {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;

    & .player-position-line {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      border-left: var(--m__border-width-s) solid rgba(255, 255, 255, 0.5);
      opacity: 0;
      visibility: hidden;
      transition: opacity var(--m__duration-medium) var(--m__easing-base), visibility var(--m__duration-medium) var(--m__easing-base);
    }

    & .player-position-caption {
      position: absolute;
      left: var(--padding);
      top: var(--player-captions-top);
      transition: top var(--m__duration-medium) var(--m__easing-base);

      & span {
        font-size: 0.8em;
        opacity: 0.5;
        transition: opacity var(--m__duration-medium) var(--m__easing-base);
      }
    }
  }

  /* Hide position caption when hover indicator is active */
  &
    .media-box:has(.player-hover-position-indicator.active)
    .player-position-indicator
    .player-position-caption,
  .media-box.has-hover-indicator
    .player-position-indicator
    .player-position-caption {
    opacity: 0;
    visibility: hidden;
  }

  /* After playback started: show position line, full-opacity caption */
  & .media-box[data-playback-started="true"] .player-position-indicator {
    & .player-position-line {
      opacity: 1;
      visibility: visible;
    }

    & .player-position-caption span {
      opacity: 1;
    }
  }

  /* Keep line visible even when hover indicator is active */
  &
    .media-box[data-playback-started="true"]:has(
      .player-hover-position-indicator.active
    )
    .player-position-indicator
    .player-position-line,
  &
    .media-box[data-playback-started="true"].has-hover-indicator
    .player-position-indicator
    .player-position-line {
    opacity: 1;
    visibility: visible;
  }

  & .player-hover-position-indicator {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 2;

    &.active {
      opacity: 1;
      visibility: visible;
    }

    & .player-hover-position-line {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      border-left: var(--m__border-width-s) solid rgba(255, 255, 255, 0.25);
    }

    & .player-hover-position-caption {
      position: absolute;
      left: var(--padding);
      top: var(--player-captions-top);
      transition: top var(--m__duration-medium) var(--m__easing-base);

      & span {
        font-size: 0.8em;
        color: rgba(var(--ids__text-RGB), 1);
        transition: color var(--m__duration-medium) var(--m__easing-base);
      }
    }
  }

  /* After playback started: hover caption white */
  & .media-box[data-playback-started="true"] .player-hover-position-indicator {
    & .player-hover-position-caption span {
      color: rgba(255, 255, 255, 1);
    }
  }
}

/* OPTIONS */
.pg-stt-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m__gap-s) var(--m__gap-l);
}

.pg-stt-option {
  font-size: var(--m__font-size-s);
  user-select: none;
  gap: var(--m__gap-xxxs);
}

/* RESULT */
.pg-results-section {
  margin-bottom: var(--m__spacer-xl);
  flex: 1;
}

.pg-results-layout {
  display: block;
}

.pg-results-main {
  min-width: 0;
}

.pg-results-filename {
  font-size: var(--m__font-size-xxl);
  font-weight: var(--m__font-weight-heavy);
  color: var(--m__bg-accent);
  letter-spacing: -0.02em;
  margin-bottom: var(--m__spacer-xxs);
  word-break: break-word;
}

.pg-results-player {
  width: 100%;
  margin-bottom: var(--m__spacer-s);
  border-radius: var(--m__radius-m);
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--m__bg);
  padding: var(--m__spacer-xs) 0;
}

/* Histogram ──────────────────────────────────────────────────────────── */
.pg-histogram-section {
  margin-bottom: var(--m__spacer-s);
}
.pg-histogram-scroll {
  overflow-x: auto;
}
.pg-histogram {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  width: 100%;
}

.pg-histo-squares {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  width: 100%;
}
.pg-histo-axis {
  display: flex;
  gap: 0;
  width: 100%;
}

.pg-histo-tick {
  flex: 1;
  font-size: 0.6rem;
  color: var(--m__text-caption);
  text-align: left;
  height: 1rem;
  line-height: 1rem;
  overflow: visible;
  white-space: nowrap;
}

.pg-histo-bar {
  flex: 1;
  aspect-ratio: unset;
  height: 1.2rem;
  cursor: pointer;
  position: relative;
  filter: brightness(1);

  transition: filter var(--m__duration-base) var(--m__easing-base);
}

.pg-histo-bar:hover {
  z-index: 10;
  filter: brightness(1.1);
  transition: filter var(--m__duration-instant) var(--m__easing-base);
  outline-offset: 0px;
}

.pg-histo-bar.synthetic {
  background: var(--m__error);
}
.pg-histo-bar.authentic {
  background: var(--m__success);
}

.pg-histo-bar.active {
  outline: 2px solid var(--m__bg-accent);
  outline-offset: 1px;
  z-index: 5;
  filter: none;
}

.pg-histo-bar-tooltip {
  display: none;
  position: fixed;
  background: var(--m__bg-accent);
  color: var(--m__text-inverted);
  font-size: 0.7rem;
  font-weight: var(--m__font-weight-bold);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 100;
}

.deepfake-header h2 {
  margin: 0;
}

/* RESULT */

.verdict-synthetic {
  color: var(--m__error);
}
.verdict-authentic {
  color: var(--m__success);
}
.verdict-no-content {
  color: var(--m__text-caption);
}

.pg-results-table-section td:first-child,
.pg-results-table-section td:last-child,
.pg-confidence-cell span {
  font-variant-numeric: tabular-nums;
}

.pg-confidence-cell {
  display: flex;
  align-items: center;
  gap: var(--m__gap-xs);
}

.pg-confidence-bar-track {
  flex: 1;
  height: 4px;
  background: var(--m__border);
  border-radius: 2px;
  overflow: hidden;
  max-width: 80px;
}

.pg-confidence-bar-fill {
  height: 100%;
  border-radius: 2px;
}
.pg-confidence-bar-fill.synthetic {
  background: var(--m__error);
}
.pg-confidence-bar-fill.authentic {
  background: var(--m__success);
}
.pg-confidence-bar-fill.no-content {
  background: var(--m__border);
}

/* Verdict ring sidebar ───────────────────────────────────────────────── */
.pg-results-verdict {
  text-align: center;
  margin-top: 9.5rem;
  padding: 0 var(--m__spacer-m);
  position: sticky;
  top: min(0.4rem, calc(100vh - 26rem));
}

.pg-verdict-ring {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0 auto;
  gap: var(--m__gap-xxxxs);
}

.pg-verdict-ring.synthetic {
  background: color-mix(in srgb, var(--m__error) 6%, transparent);
  box-shadow:
    0 0 0 3px var(--m__error),
    0 0 50px color-mix(in srgb, var(--m__error) 12%, transparent);
}

.pg-verdict-ring.authentic {
  background: color-mix(in srgb, var(--m__success) 6%, transparent);
  box-shadow:
    0 0 0 3px var(--m__success),
    0 0 50px color-mix(in srgb, var(--m__success) 12%, transparent);
}

.pg-verdict-ring.pending {
  background: color-mix(in srgb, var(--m__text-caption) 6%, transparent);
  box-shadow:
    0 0 0 3px var(--m__border),
    0 0 50px color-mix(in srgb, var(--m__text-caption) 8%, transparent);
}

.pg-verdict-ring-icon {
  width: 2.2rem;
  height: 2.2rem;
}

.pg-verdict-ring.synthetic .pg-verdict-ring-icon {
  color: var(--m__error);
}
.pg-verdict-ring.authentic .pg-verdict-ring-icon {
  color: var(--m__success);
}
.pg-verdict-ring.pending .pg-verdict-ring-icon {
  color: var(--m__text-caption);
}

.pg-verdict-ring-label {
  font-size: var(--m__font-size-xl);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.pg-verdict-ring.synthetic .pg-verdict-ring-label {
  color: var(--m__error);
}
.pg-verdict-ring.authentic .pg-verdict-ring-label {
  color: rgb(10, 150, 95);
}
.pg-verdict-ring.pending .pg-verdict-ring-label {
  color: var(--m__text-caption);
}

.pg-verdict-ring-count {
  font-size: var(--m__font-size-xs);
  font-weight: var(--m__font-weight-medium);
  line-height: 1.3;
  margin-top: 0.1rem;
  color: var(--m__text-caption);
}

.pg-verdict-links {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--m__gap-xxxs);
  margin-top: var(--m__spacer-s);
}

.pg-verdict-link {
  display: inline-flex;
  align-items: center;
  gap: var(--m__gap-xxxs);
  font-size: var(--m__font-size-xs);
  font-weight: var(--m__font-weight-medium);
  color: var(--m__text-caption);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  transition: color var(--m__duration-medium);
}

.pg-verdict-link:hover {
  color: var(--m__chart-model-1);
}
.pg-verdict-link svg {
  width: 0.85rem;
  height: 0.85rem;
}

/* Transcription ──────────────────────────────────────────────────────── */
.pg-transcript-container {
  display: none;
}
.pg-transcript-container.visible {
  display: block;
}

.pg-transcript-list {
  display: flex;
  flex-direction: column;
  gap: var(--m__gap-xxs);
}

.pg-transcript-utterance {
  background: var(--m__bg-surface);
  padding: var(--m__spacer-xs) var(--m__spacer-s);
  border-radius: 2rem;
  corner-shape: squircle;
  max-width: min(92%, 60rem);
  cursor: pointer;
  transition:
    background var(--m__duration-base) var(--m__easing-base),
    color var(--m__duration-base) var(--m__easing-base);
}

.pg-transcript-list > .pg-transcript-utterance:nth-of-type(odd) {
  align-self: flex-start;
}
.pg-transcript-list > .pg-transcript-utterance:nth-of-type(even) {
  align-self: flex-end;
}
.pg-transcript-utterance.speaker-left {
  align-self: flex-start;
}
.pg-transcript-utterance.speaker-right {
  align-self: flex-end;
}
.pg-transcript-utterance:hover {
  color: var(--m__text-link-hover);
  background: color-mix(in srgb, var(--m__bg-accent-hover) 15%, transparent);
  transition:
    background var(--m__duration-instant) var(--m__easing-base),
    color var(--m__duration-instant) var(--m__easing-base);
}
.dark-mode .pg-transcript-utterance:hover {
  background: var(--m__color-slate-700);
}

.pg-transcript-utterance.active {
  background: color-mix(
    in srgb,
    var(--ec, var(--m__chart-model-1)) 20%,
    var(--m__bg-surface)
  ) !important;
}

.pg-transcript-utterance.active:hover {
  background: color-mix(
    in srgb,
    var(--ec, var(--m__chart-model-1)) 20%,
    transparent
  ) !important;
}

.pg-transcript-utterance-header {
  display: flex;
  align-items: baseline;
  gap: var(--m__gap-m);
  margin-bottom: 0.45rem;
  font-size: var(--m__font-size-xs);
}

.pg-transcript-time {
  font-variant-numeric: tabular-nums;
}
.pg-transcript-emotion {
  color: var(--ec, #0078c8);
}

.ec-calm {
  --ec: var(--emotion-calm);
}
.ec-confident {
  --ec: var(--emotion-confident);
}
.ec-interested {
  --ec: var(--emotion-interested);
}
.ec-happy {
  --ec: var(--emotion-happy);
}
.ec-neutral {
  --ec: var(--emotion-neutral);
}
.ec-angry {
  --ec: var(--emotion-angry);
}
.ec-frustrated {
  --ec: var(--emotion-frustrated);
}
.ec-stressed {
  --ec: var(--emotion-stressed);
}
.ec-anxious {
  --ec: var(--emotion-anxious);
}
.ec-sad {
  --ec: var(--emotion-sad);
}
.ec-concerned {
  --ec: var(--emotion-concerned);
}
.ec-tired {
  --ec: var(--emotion-tired);
}
.ec-amused {
  --ec: var(--emotion-amused);
}
.ec-confused {
  --ec: var(--emotion-confused);
}
.ec-affectionate {
  --ec: var(--emotion-affectionate);
}
.ec-excited {
  --ec: var(--emotion-excited);
}
.ec-disappointed {
  --ec: var(--emotion-disappointed);
}
.pg-transcript-accent {
  color: var(--m__text-caption);
}
.pg-transcript-deepfake-score {
  color: var(--m__text-caption);
  font-family: monospace;
  font-size: 0.75rem;
}
.pg-transcript-lang {
  font-size: 0.7rem;
  color: var(--m__text-caption);
  font-weight: var(--m__font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pg-transcript-text,
.pg-transcript-text p {
  font-family: "Inter";
}
.pg-transcript-text.partial {
  font-style: italic;
  color: var(--m__text-caption);
}

.pii-blur {
  filter: blur(5px);
  transition: filter var(--m__duration-medium);
  cursor: help;
  padding: 0 0.15em;
  border-radius: 3px;
  background: color-mix(in srgb, var(--m__text) 8%, transparent);
}

.pii-blur:hover {
  filter: none;
  background: color-mix(in srgb, var(--m__text) 12%, transparent);
}

.pg-transcript-empty {
  text-align: center;
  padding: var(--m__spacer-xl) var(--m__spacer-m);
  color: var(--m__text-caption);
  font-size: var(--m__font-size-s);
}

.verdict-authentic,
.verdict-synthetic {
  margin-left: auto;
}

/* STT emotion chart ──────────────────────────────────────────────────── */
.pg-stt-chart {
  display: none;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--m__spacer-s);
}
.pg-stt-chart.visible {
  display: flex;
}

.pg-stt-chart-row {
  position: relative;
  height: 22px;
}

.pg-stt-chart-label {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 0.6rem;
  color: #000;
  font-weight: var(--m__font-weight-bold);
  z-index: 2;
  pointer-events: none;
  padding-left: 0.2rem;
}

.pg-stt-chart-bar {
  position: absolute;
  top: 0;
  height: 22px;
  cursor: pointer;
  transition: opacity var(--m__duration-fast);
  min-width: 3px;
}

.pg-stt-chart-bar:hover {
  z-index: 10;
  filter: brightness(1.15);
  outline: 1.5px solid var(--m__text-caption);
}
.pg-stt-chart-bar.active {
  outline: 2px solid var(--m__bg-accent);
  outline-offset: 1px;
  z-index: 5;
}

/* Transcription sidebar ──────────────────────────────────────────────── */
.pg-results-sidebar {
  display: none;
  padding: 0 var(--m__spacer-m);
  position: sticky;
  top: var(--m__spacer-m);
  margin-top: calc(
    48px + var(--m__spacer-l) + 37px + var(--m__spacer-xxs) +
      var(--m__spacer-xs)
  );
  background: transparent;
  border-radius: 0;
}

.pg-results-sidebar.visible {
  display: block;
}

.pg-sidebar-links {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--m__gap-xxxs);
}

/* Upload area ────────────────────────────────────────────────────────── */

.pg-upload-plate {
  position: relative;
  border: var(--m__border-width-l) solid var(--m__bg-accent);
  border-radius: var(--m__radius-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 18rem;
}

.pg-upload-plate > .pg-options-row {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  min-height: 2.4rem;
  padding-block: var(--m__spacer-xxs);
  padding-inline: var(--m__spacer-xs);
  display: flex;
  align-items: center;
  border-bottom: var(--m__border-width-s) solid var(--m__bg-accent);
  font-weight: var(--m__font-weight-medium);
  background-color: inherit;
}

.pg-plate-header {
  font-size: var(--m__font-size-s);
}
.pg-plate-header__title {
  color: var(--m__text);
}

.pg-upload-plate-body {
  padding: var(--m__spacer-l) var(--m__widget-padding);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}

.pg-upload-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--m__gap-s);
}

.pg-verdict-slot:empty {
  display: none;
}
.pg-verdict-slot {
  margin-top: 0.5rem;
  margin-bottom: calc(var(--m__spacer-l) + 0.5rem);
}
.pg-verdict-slot > * {
  width: 28rem;
  max-width: 100%;
  margin-inline: auto;
}

/* "This is …" verdict statement ──────────────────────────────────────── */
.pg-verdict-statement {
  --pg-verdict-statement-color: var(--m__text);
  width: auto;
  text-align: center;
  color: var(--pg-verdict-statement-color);
}
.pg-verdict-statement.danger {
  --pg-verdict-statement-color: var(--m__error);
}
.pg-verdict-statement.success {
  --pg-verdict-statement-color: var(--m__success);
}
.pg-verdict-statement-title {
  margin: 0;
}
a.pg-verdict-statement-link,
a.pg-verdict-statement-link:link,
a.pg-verdict-statement-link:visited {
  color: var(--pg-verdict-statement-color);
  text-decoration-line: underline;
  text-decoration-color: var(--pg-verdict-statement-color);
  text-decoration-thickness: var(--m__border-width-xl);
  text-underline-offset: 0.22em;
  text-decoration-skip-ink: none;
  transition:
    color var(--m__duration-base) var(--m__easing-base),
    text-decoration-color var(--m__duration-base) var(--m__easing-base);
}
a.pg-verdict-statement-link:hover,
a.pg-verdict-statement-link:focus,
a.pg-verdict-statement-link:active {
  color: var(--m__text-link-hover);
  text-decoration-color: var(--m__text-link-hover);
  transition-duration: var(--m__duration-instant);
}
.pg-verdict-statement-details {
  margin-top: 0.45rem;
  font-size: var(--m__font-size-s);
  font-weight: 500;
}
.pg-verdict-statement-stat {
  white-space: nowrap;
}
.pg-verdict-statement-stat + .pg-verdict-statement-stat::before {
  content: " · ";
  white-space: pre;
  opacity: 0.6;
}
.pg-verdict-statement-stat-value {
  font-variant-numeric: tabular-nums;
}

#audio-player {
  scroll-margin-top: var(--m__spacer-l);
}

.pg-upload-plate-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--m__spacer-xs);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--m__gap-s);
  font-size: var(--m__font-size-xs);
  color: var(--m__text);
  pointer-events: none;
}
.pg-upload-plate-footer > * {
  pointer-events: auto;
}

.pg-upload-collapse {
  display: none;
  position: absolute;
  top: var(--m__spacer-xxs);
  right: var(--m__spacer-xxs);
  z-index: 12;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--m__bg) 74%, transparent);
  color: var(--m__text-caption);
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(0.5rem);
  transition:
    color var(--m__duration-base) var(--m__easing-base),
    background-color var(--m__duration-base) var(--m__easing-base);
}
.pg-upload-collapse:hover,
.pg-upload-collapse:focus-visible {
  color: var(--m__text-link-hover);
  background-color: color-mix(in srgb, var(--m__bg) 88%, transparent);
  transition-duration: var(--m__duration-instant);
}
.pg-upload-plate[data-state="initial"] .pg-upload-collapse,
.pg-upload-plate[data-state="low-quota"] .pg-upload-collapse,
.pg-upload-plate[data-state="exhausted"] .pg-upload-collapse {
  display: inline-flex;
}
.pg-upload-plate-footer .pg-upload-meta {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--m__spacer-xxs);
  font-size: var(--m__font-size-xs);
  font-weight: var(--m__font-weight-medium);
  line-height: var(--m__line-height-base);
  white-space: nowrap;
}

.pg-upload-formats-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--m__gap-xxxs);
}
.pg-upload-formats-label {
  font-weight: var(--m__font-weight-medium);
}

.pg-upload-formats-tags .m__tag-flat {
  color: var(--m__text);
  background-color: var(--m__bg-surface);
  font-size: var(--m__font-size-xs);
}

/* Streaming split control: positioning context for popover menu */
.pg-upload-stream {
  position: relative;
}
.pg-upload-stream__menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 30;
  min-width: 14rem;
  padding: 0.25rem;
  background-color: var(--m__bg);
  border: var(--m__border-width-s) solid var(--m__border);
  border-radius: var(--m__widget-radius);
  box-shadow: 0 4px 20px color-mix(in srgb, #000 22%, transparent);
  display: flex;
  flex-direction: column;
}
.pg-upload-stream__menu[hidden] {
  display: none;
}
.pg-upload-stream__menu [role="menuitem"] {
  background: none;
  border: none;
  padding: 0.5rem 0.7rem;
  border-radius: var(--m__radius-m);
  font: inherit;
  color: var(--m__text);
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--m__duration-base) var(--m__easing-base),
    color var(--m__duration-base) var(--m__easing-base);
}
.pg-upload-stream__menu [role="menuitem"]:hover {
  background-color: var(--m__bg-surface);
  color: var(--m__text-link-hover);
  transition-duration: var(--m__duration-instant);
}

/* Plate states ─────────────────────────────────────────────────────────── */
.pg-upload-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--m__gap-s);
  text-align: center;
  font-weight: var(--m__font-weight-medium);
  background-color: color-mix(in srgb, var(--m__bg) 92%, transparent);
  pointer-events: none;
}
.pg-upload-overlay__icon {
  font-size: 2rem;
  line-height: 1;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pg-upload-overlay .m__loader {
  width: 2rem;
  height: 2rem;
}
.pg-processing-stages {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--m__gap-xxxs) var(--m__gap-l);
  font-weight: var(--m__font-weight-medium);
  color: var(--m__text);
}
.pg-processing-stage {
  --stage-delay: 0s;
  position: relative;
  display: inline-block;
  color: var(--m__text-caption);
}
.pg-processing-stage svg {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
}
.pg-stage-check path {
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
}
.pg-processing-stage:nth-child(1) {
  --stage-delay: 1s;
}
.pg-processing-stage:nth-child(2) {
  --stage-delay: 2.4s;
}
.pg-processing-stage:nth-child(3) {
  --stage-delay: 3.8s;
}
.pg-processing-stage:nth-child(4) {
  --stage-delay: 5.2s;
}
.pg-processing-stage:nth-child(5) {
  --stage-delay: 6.6s;
}
.pg-processing-stage:nth-child(6) {
  --stage-delay: 8s;
}

.pg-upload-plate[data-state="processing"] .pg-processing-stage {
  animation:
    pg-stage-pulse 1.1s ease-in-out infinite,
    pg-stage-done 0.8s ease-out var(--stage-delay) 1 forwards,
    pg-stage-slot 0.3s ease-out var(--stage-delay) 1 forwards;
}
.pg-upload-plate[data-state="processing"] .pg-stage-check {
  animation: pg-stage-fade 0.3s ease-out var(--stage-delay) 1 forwards;
}
.pg-upload-plate[data-state="processing"] .pg-stage-check path {
  animation: pg-stage-draw 0.3s ease-out var(--stage-delay) 1 forwards;
}

@keyframes pg-stage-pulse {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}
@keyframes pg-stage-done {
  to {
    opacity: 1;
    color: var(--m__text);
  }
}
@keyframes pg-stage-slot {
  to {
    padding-left: 1.25rem;
  }
}
@keyframes pg-stage-fade {
  to {
    opacity: 1;
  }
}
@keyframes pg-stage-draw {
  to {
    stroke-dashoffset: 0;
  }
}
.pg-upload-collapsed-cta {
  display: none;
  background: none;
  border: none;
  font: inherit;
  font-weight: var(--m__font-weight-medium);
  color: var(--m__text);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--m__duration-base) var(--m__easing-base);
}
.pg-upload-collapsed-cta:hover,
.pg-upload-plate[data-state="uploaded"]:hover .pg-upload-collapsed-cta {
  color: var(--m__text-link-hover);
  transition-duration: var(--m__duration-instant);
}
.pg-upload-plate[data-state="uploaded"] {
  transition: border-color var(--m__duration-base) var(--m__easing-base);
}
.pg-upload-plate[data-state="uploaded"]:hover {
  border-color: var(--m__text-link-hover);
  cursor: pointer;
  transition-duration: var(--m__duration-instant);
}

/* file-dropping — only the drop overlay; hide options + actions + footer */
.pg-upload-plate[data-state="file-dropping"] {
  border-style: dashed;
  border-color: var(--m__bg-accent);
  background-color: var(--m__bg);
}
.pg-upload-plate[data-state="file-dropping"] > .pg-options-row,
.pg-upload-plate[data-state="file-dropping"] .pg-upload-plate-footer,
.pg-upload-plate[data-state="file-dropping"] .pg-upload-actions {
  display: none;
}
.pg-upload-plate[data-state="file-dropping"] .pg-upload-overlay--dragging {
  display: flex;
  position: static;
  inset: auto;
  background: none;
  color: var(--m__bg-accent);
}

/* uploading — only the spinner overlay; hide options + actions + footer */
.pg-upload-plate[data-state="uploading"] > .pg-options-row,
.pg-upload-plate[data-state="uploading"] .pg-upload-plate-footer,
.pg-upload-plate[data-state="uploading"] .pg-upload-actions {
  display: none;
}
.pg-upload-plate[data-state="uploading"] .pg-upload-overlay--processing {
  display: flex;
  position: static;
  inset: auto;
  background: none;
}

/* processing — collapsed plate, no click, shows stages strip */
.pg-upload-plate[data-state="processing"] {
  min-height: 0;
}
.pg-upload-plate[data-state="processing"] > .pg-options-row,
.pg-upload-plate[data-state="processing"] .pg-upload-plate-footer,
.pg-upload-plate[data-state="processing"] .pg-upload-actions {
  display: none;
}
.pg-upload-plate[data-state="processing"] .pg-upload-plate-body {
  padding: 0;
}
.pg-upload-plate[data-state="processing"] .pg-upload-overlay--analyzing {
  display: flex;
  position: static;
  inset: auto;
  background: none;
  padding: var(--m__spacer-s) var(--m__widget-padding);
}

/* accept — shrink plate, hide actions + footer, show tiny CTA */
.pg-upload-plate[data-state="uploaded"] {
  min-height: 0;
}
.pg-upload-plate[data-state="uploaded"] > .pg-options-row,
.pg-upload-plate[data-state="uploaded"] .pg-upload-plate-footer {
  display: none;
}
.pg-upload-plate[data-state="uploaded"] .pg-upload-plate-body {
  padding: 0;
}
.pg-upload-plate[data-state="uploaded"] .pg-upload-actions {
  display: none;
}
.pg-upload-plate[data-state="uploaded"] .pg-upload-collapsed-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 100%;
  padding: var(--m__spacer-s) var(--m__widget-padding);
}

/* low-quota — same look as initial; meta swaps to show the danger digit */
.pg-upload-plate-footer .pg-upload-meta--low {
  display: none;
}
.pg-upload-plate[data-state="low-quota"] .pg-upload-meta--default {
  display: none;
}
.pg-upload-plate[data-state="low-quota"] .pg-upload-meta--low {
  display: inline-flex;
}
.pg-upload-meta-danger {
  color: var(--m__error);
  font-weight: var(--m__font-weight-medium);
}

/* exhausted — hide options + actions + footer, show centered signup CTA */
.pg-upload-plate[data-state="exhausted"] > .pg-options-row,
.pg-upload-plate[data-state="exhausted"] .pg-upload-plate-footer,
.pg-upload-plate[data-state="exhausted"] .pg-upload-actions {
  display: none;
}
.pg-upload-plate[data-state="exhausted"] .pg-upload-overlay--exhausted {
  display: flex;
  position: static;
  inset: auto;
  background: none;
  pointer-events: auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--m__spacer-m);
  max-width: 28rem;
  margin-inline: auto;
  color: var(--m__text);
}
.pg-upload-overlay--exhausted p {
  margin: 0;
}

/* State switcher floating panel (design preview only) — top-right inside the
     plate; shows only on plate hover, no transitions. Styling cribbed from
     .nav-island: semi-transparent bg, soft shadow, backdrop blur. */
.pg-plate-state-switch {
  display: none;
  position: absolute;
  bottom: 0.6rem;
  left: var(--m__spacer-xs);
  z-index: 10;
  flex-direction: row;
  align-items: center;
  gap: var(--m__gap-nav);
  padding: 0.15rem 0.25rem;
  border-radius: var(--m__radius-m);
  background-color: color-mix(in srgb, var(--m__bg) 70%, transparent);
  backdrop-filter: blur(0.5rem);
  font-size: var(--m__font-size-xs);
  line-height: 1;
  color: var(--m__text);
  transition: none;
}
.pg-upload-plate:hover .pg-plate-state-switch {
  display: flex;
}
.pg-plate-state-switch label {
  display: inline-flex;
  align-items: center;
  gap: var(--m__gap-xxxs);
  padding: 0.15rem 0.3rem;
  border-radius: var(--m__radius-s);
  cursor: pointer;
  color: var(--m__text);
  transition: none;
}
.pg-plate-state-switch label:hover {
  background-color: color-mix(in srgb, var(--m__text) 10%, transparent);
}
.pg-plate-state-switch label:has(input:checked) {
  font-weight: var(--m__font-weight-medium);
}
.pg-plate-state-switch input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  box-sizing: border-box;
  width: 4px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--m__bg-accent);
  margin: 0;
  flex: none;
  transition: none;
}
.pg-plate-state-switch input[type="radio"]:checked {
  box-shadow:
    0 0 0 2px var(--m__bg),
    0 0 0 3px var(--m__bg-accent);
}

.pg-upload-header {
  display: flex;
  gap: var(--m__gap-s);
  align-items: baseline;
}

.pg-upload-limits {
  color: var(--m__text-caption);
  font-size: var(--m__font-size-xxl);
}

/* ── ids__ tokens required by player.css ─────────────────────────────── */
:root {
  --ids__radius: 1.5em;
  --ids__background-RGB: 255, 255, 255;
  --ids__bg-surface-RGB: 242, 242, 246;
  --ids__bg-accent-RGB: 20, 20, 50;
  --ids__text-RGB: 30, 30, 35;
  --ids__text-caption-RGB: 150, 150, 170;
  --ids__text-hover-RGB: 40, 95, 235;
  --ids__UI-border-RGB: 220, 220, 230;

  /* emotion RGB tokens */
  --emotion-attack-rejection-group-RGB: 255, 53, 84;
  --emotion-threat-uncertainty-group-RGB: 180, 100, 200;
  --emotion-excited-engaged-group-RGB: 255, 120, 80;
  --emotion-low-energy-negative-group-RGB: 0, 120, 200;
  --emotion-calm-grounded-group-RGB: 110, 140, 190;
  --emotion-neutral-group-RGB: 90, 90, 110;

  --emotion-angry-RGB: var(--emotion-attack-rejection-group-RGB);
  --emotion-contemptuous-RGB: var(--emotion-attack-rejection-group-RGB);
  --emotion-disgusted-RGB: var(--emotion-attack-rejection-group-RGB);
  --emotion-afraid-RGB: var(--emotion-threat-uncertainty-group-RGB);
  --emotion-anxious-RGB: var(--emotion-threat-uncertainty-group-RGB);
  --emotion-stressed-RGB: var(--emotion-threat-uncertainty-group-RGB);
  --emotion-surprised-RGB: var(--emotion-threat-uncertainty-group-RGB);
  --emotion-ashamed-RGB: var(--emotion-threat-uncertainty-group-RGB);
  --emotion-frustrated-RGB: var(--emotion-threat-uncertainty-group-RGB);
  --emotion-fear-RGB: var(--emotion-threat-uncertainty-group-RGB);
  --emotion-affectionate-RGB: var(--emotion-excited-engaged-group-RGB);
  --emotion-amused-RGB: var(--emotion-excited-engaged-group-RGB);
  --emotion-excited-RGB: var(--emotion-excited-engaged-group-RGB);
  --emotion-happy-RGB: var(--emotion-excited-engaged-group-RGB);
  --emotion-hopeful-RGB: var(--emotion-excited-engaged-group-RGB);
  --emotion-proud-RGB: var(--emotion-excited-engaged-group-RGB);
  --emotion-relieved-RGB: var(--emotion-excited-engaged-group-RGB);
  --emotion-curious-RGB: var(--emotion-excited-engaged-group-RGB);
  --emotion-disappointed-RGB: var(--emotion-low-energy-negative-group-RGB);
  --emotion-bored-RGB: var(--emotion-low-energy-negative-group-RGB);
  --emotion-tired-RGB: var(--emotion-low-energy-negative-group-RGB);
  --emotion-concerned-RGB: var(--emotion-low-energy-negative-group-RGB);
  --emotion-confused-RGB: var(--emotion-low-energy-negative-group-RGB);
  --emotion-sad-RGB: var(--emotion-low-energy-negative-group-RGB);
  --emotion-calm-RGB: var(--emotion-calm-grounded-group-RGB);
  --emotion-confident-RGB: var(--emotion-calm-grounded-group-RGB);
  --emotion-interested-RGB: var(--emotion-calm-grounded-group-RGB);
  --emotion-neutral-RGB: var(--emotion-neutral-group-RGB);
  --emotion-unknown-RGB: var(--emotion-neutral-group-RGB);
}

.dark-mode {
  --ids__background-RGB: 20, 20, 50;
  --ids__bg-surface-RGB: 50, 50, 85;
  --ids__bg-accent-RGB: 20, 20, 50;
  --ids__text-RGB: 255, 255, 255;
  --ids__text-caption-RGB: 128, 128, 128;
  --ids__text-hover-RGB: 120, 180, 255;
  --ids__bg-hover-RGB: 100, 110, 140;
}

/* Bottom columns: Raw JSON (left) + Statistics (right) ───────────────── */
.pg-bottom-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
  gap: var(--m__gap-l);
  align-items: start;
}
@media (width < 900px) {
  .pg-bottom-columns {
    grid-template-columns: 1fr;
  }
}

/* Statistics (dense debug grid below the output) ───────────────────── */
.pg-stats-block {
  font-family: var(--m__font-family-semi-mono);
  font-size: var(--m__font-size-xs);
  color: var(--m__text-caption);
}
.pg-bottom-columns > .pg-stats-block {
  margin-left: 2rem;
}
@media (width < 900px) {
  .pg-bottom-columns > .pg-stats-block {
    margin-left: 0;
  }
}
.pg-stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--m__gap-xxl);
}
.pg-stats-card-title {
  margin: 0 0 0.4rem;
  font-size: var(--m__font-size-xs);
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--m__text-caption);
}
.pg-stats-list {
  margin: 0;
  display: grid;
  grid-template-columns: 7rem 1fr;
  column-gap: var(--m__gap-xs);
  row-gap: var(--m__gap-xxxxs);
  color: var(--m__text-caption);
}
.pg-stats-list dt {
  font-weight: var(--m__font-weight-regular);
  min-width: 0;
  overflow-wrap: anywhere;
}
.pg-stats-list dd {
  margin: 0;
  word-break: break-word;
}

.pg-stats-table .pg-stats-label {
  color: var(--m__text-caption);
  font-weight: var(--m__font-weight-medium);
  padding-right: var(--m__spacer-m);
  white-space: nowrap;
  width: 25%;
}

.pg-stats-table tr.pg-stats-group-row td {
  padding-top: 1.4rem;
  padding-bottom: 0.35rem;
}

.pg-stats-table tr.pg-stats-group-row td h6 {
  margin: 0;
}

.pg-stats-table tr:has(+ tr.pg-stats-group-row) td {
  border-bottom: none;
}

.pg-stats-table tr.pg-stats-group-row + tr td {
  border-top: var(--m__border-width-s) solid var(--m__text);
}

/* Output panel — sits below the plate, no surface of its own */
.pg-output-panel {
  background: transparent;
  padding: 0;
  font-size: 1rem;
  font-family: "Inter";
}

.pg-output-panel table td {
  font-size: 1rem;
}
.pg-output-panel table th {
  font-size: 0.8rem;
  font-weight: var(--m__font-weight-regular);
  background-color: inherit;
}
.pg-output-panel .pg-reason,
.pg-output-panel table .pg-num {
  font-size: 0.8rem;
}

.pg-output-panel .caption {
  font-size: 1rem;
}

/* Semi-mono, 0.8rem only on tags + transcript meta + emo labels ──────── */
.pg-output-panel
  :is(.m__tag, .m__tag-flat, .pg-transcript-utterance-header, .pg-emo-labels) {
  font-family: var(--m__font-family-semi-mono);
  font-size: 0.8rem;
}

/* JSON Response (placed before stats, no background) ─────────────────── */
.pg-section-title {
  margin: 0 0 var(--m__spacer-xs);
  font-size: var(--m__font-size-xs);
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--m__text-caption);
}

.pg-json-block {
  font-family: var(--m__font-family-semi-mono);
  font-size: var(--m__font-size-xs);
}

.pg-json-container {
  position: relative;
}

.pg-json-pre {
  font-family: inherit;
  font-size: inherit;
  line-height: 1.6;
  overflow-x: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--m__text-caption);
  background: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  transition: color var(--m__duration-base) var(--m__easing-base);
}

.pg-json-pre
  :is(
    .pg-json-key,
    .pg-json-string,
    .pg-json-number,
    .pg-json-bool,
    .pg-json-null
  ) {
  color: inherit;
  transition: color var(--m__duration-base) var(--m__easing-base);
}

.pg-json-pre:hover {
  color: var(--m__text);
  transition-duration: var(--m__duration-instant);
}

.pg-json-pre:hover .pg-json-key {
  color: var(--m__color-purple-500);
}
.pg-json-pre:hover .pg-json-string {
  color: rgb(21, 150, 100);
}
.pg-json-pre:hover .pg-json-number {
  color: var(--m__color-blue-500);
}
.pg-json-pre:hover .pg-json-bool {
  color: rgb(220, 80, 50);
}
.pg-json-pre:hover .pg-json-null {
  color: var(--m__text-caption);
}
.pg-json-pre:hover
  :is(
    .pg-json-key,
    .pg-json-string,
    .pg-json-number,
    .pg-json-bool,
    .pg-json-null
  ) {
  transition-duration: var(--m__duration-instant);
}

/* Demo recordings table ──────────────────────────────────────────────── */
.pg-demo-recordings tbody tr {
  cursor: pointer;
  transition: color var(--m__duration-fast);
}

.pg-demo-recordings tbody tr:hover {
  color: var(--m__text-link-hover);
  transition: color var(--m__duration-instant);
}

.pg-demo-recordings .col-category,
.pg-demo-recordings .col-industry {
  font-size: var(--m__font-size-s);
}

.pg-demo-recordings .col-fp {
  width: 22%;
  white-space: nowrap;
}

.pg-demo-recordings .col-category,
.pg-demo-recordings .col-industry {
  width: 16%;
}

.pg-fp-wrapper {
  display: inline-flex;
  align-items: center;
  gap: var(--m__gap-xxs);
}

.pg-fp {
  position: relative;
  width: 100px;
  height: 1.35em;
  border-radius: 3px;
  overflow: hidden;
  background: var(--m__bg-accent);
  flex-shrink: 0;
}

.pg-fp-clip {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--emotion-color, transparent);
}

.pg-fp-time {
  color: var(--m__text-caption);
  font-size: var(--m__font-size-s);
}

/* speaker rows inside fingerprint */
.pg-fp[data-speakers="1"] .pg-fp-clip {
  height: 100%;
  top: 0;
}
.pg-fp[data-speakers="2"] .pg-fp-clip {
  height: 50%;
}
.pg-fp[data-speakers="2"] .pg-fp-clip[data-sp="1"] {
  top: 0;
}
.pg-fp[data-speakers="2"] .pg-fp-clip[data-sp="2"] {
  top: 50%;
}
.pg-fp[data-speakers="4"] .pg-fp-clip {
  height: 25%;
}
.pg-fp[data-speakers="4"] .pg-fp-clip[data-sp="1"] {
  top: 0;
}
.pg-fp[data-speakers="4"] .pg-fp-clip[data-sp="2"] {
  top: 25%;
}
.pg-fp[data-speakers="4"] .pg-fp-clip[data-sp="3"] {
  top: 50%;
}
.pg-fp[data-speakers="4"] .pg-fp-clip[data-sp="4"] {
  top: 75%;
}

/* Sidebar tab nav ─────────────────────────────────────────────────────── */
.pg-content {
  flex: 1;
  min-width: 0;
}

.pg-page-header {
  display: flex;
  gap: var(--m__gap-s);
  align-items: center;
  margin: -0.3rem 0 0.3rem;
}

.pg-page-header .pg-page-title {
  margin: 0;
}

.pg-upload-section > .pg-upload-plate {
  margin-top: var(--m__spacer-s);
}

/* Player overrides ────────────────────────────────────────────────────── */
/* Player + visualization form a modular system of equal-height strips
     stacked flush. One strip = --player-strip-height. The visualization
     plate is N strips tall, where N = --speaker-count. */
.media-container {
  --player-strip-height: 3rem;
  --player-controls-height: var(--player-strip-height);
  --initial-height: var(--player-controls-height);
  --speaker-count: 2;
  --player-visualization-height: calc(
    var(--speaker-count) * var(--player-strip-height)
  );
}
#audio-player.media-box {
  background-color: var(--m__bg-surface);
  color: var(--m__text);
  overflow: hidden;
}
#audio-player.media-box .player-controls {
  height: 100%;
  padding-top: 0;
}
#audio-player.media-box .player-controls .player-control-center {
  padding-top: 0;
}
.pg-player-dataviz {
  position: relative;
  margin-top: 0;
  --speaker-count: 2;
  --padding: 0.2em;
  height: var(--player-visualization-height);
  background-color: var(--m__border);
}
.pg-player-dataviz .player-visualization {
  background-color: transparent;
}

.media-container {
  position: relative;
}
.pg-media-hover-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--m__error);
  left: var(--pg-hover-x, 0);
  pointer-events: none;
  opacity: 0;
  z-index: 4;
  transition: opacity var(--m__duration-base) var(--m__easing-base);
}
.media-container[data-hover="true"] .pg-media-hover-line {
  opacity: 1;
  transition-duration: var(--m__duration-instant);
}
.pg-player-dataviz .speaker-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-size: var(--m__font-size-xs);
  z-index: 2;
}
.pg-player-dataviz .speaker-labels .speaker-label {
  position: absolute;
  left: 0;
  height: auto;
  line-height: 1;
  top: auto;
  padding-left: 0;
}
.pg-player-dataviz .speaker-labels .speaker-label[data-speaker-index="1"] {
  bottom: calc(100% / var(--speaker-count));
  top: auto;
}
.pg-player-dataviz .speaker-labels .speaker-label[data-speaker-index="2"] {
  bottom: 0;
  top: auto;
}
.pg-player-dataviz .speaker-labels .speaker-label span {
  background-color: var(--m__border);
  color: var(--m__text-caption);
  padding: 0.1rem 0.35em;
  font-weight: var(--m__font-weight-medium);
}

#audio-player .player-icon {
  color: var(--m__text);
}
#audio-player .player-icon svg,
#audio-player .player-icon svg * {
  fill: currentColor;
}

#audio-player .player-start-time,
#audio-player .player-total-time {
  position: absolute;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--m__text-caption);
  z-index: 3;
}

#audio-player .player-start-time {
  left: calc(var(--padding) + 0.6em);
}
#audio-player .player-total-time {
  right: calc(var(--padding) + 0.6em);
}

#audio-player .player-start-time .start-time,
#audio-player .player-total-time .total-time {
  font-size: 0.8em;
  opacity: 1;
  color: inherit;
}

.pg-content .pg-upload-header h2 {
  margin: 0;
}

.pg-content .pg-results-player {
  background: transparent;
}

/* Keep tab nav visible on mobile too (dashboard hides .nav-sidebar there) */
@media (width < 768px) {
  .dashboard-layout:has(#pg-tabs) .nav-sidebar {
    display: block;
    position: static;
    width: 100%;
  }
  #pg-tabs {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 var(--m__gap-xl);
  }
}

#pg-tabs button.models-nav__link {
  width: 100%;
  font-size: 0.9rem;
}

.nav-sidebar:has(#pg-tabs) {
  min-width: 12rem;
}

/* Velma report output */
.pg-velma-output p,
.pg-velma-output .caption,
.pg-velma-output .pg-summary-head,
.pg-velma-output table th,
.pg-velma-output table td,
.pg-velma-output table td strong {
  font-family: "Inter";
}
.pg-velma-output table th {
  z-index: 1;
  background-color: var(--m__bg);
}
.pg-velma-output .caption {
  color: var(--m__text);
}
.pg-velma-setup {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--m__gap-s);
  font-size: var(--m__font-size-s);
}
.pg-velma-setup-link {
  color: var(--m__text);
  font-weight: 500;
  text-decoration: none;
  padding-bottom: 0;
  border-bottom: 1.5px dotted currentColor;
  transition:
    color var(--m__duration-base) var(--m__easing-base),
    border-bottom-color var(--m__duration-base) var(--m__easing-base);
}
.pg-velma-setup-link:hover {
  color: var(--m__text-link-hover);
  transition-duration: var(--m__duration-instant);
}
.pg-velma-setup-link svg {
  display: inline-block;
  vertical-align: baseline;
  position: relative;
  top: 0.25em;
  margin-right: 0.1rem;
}

a.pg-behavior-link,
a.pg-behavior-link:link,
a.pg-behavior-link:visited {
  color: var(--m__bg-accent);
  font-weight: var(--m__font-weight-bold);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% var(--m__border-width-l);
  background-position: 0 100%;
  padding-bottom: 0.22em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: color var(--m__duration-base) var(--m__easing-base);
}
a.pg-behavior-link:hover,
a.pg-behavior-link:focus,
a.pg-behavior-link:active {
  color: var(--m__text-link-hover);
  transition-duration: var(--m__duration-instant);
}
.pg-behavior-link svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  margin-right: 0.15em;
}
.pg-transcript-utterance-header a.pg-behavior-link,
.pg-transcript-utterance-header a.pg-behavior-link:link,
.pg-transcript-utterance-header a.pg-behavior-link:visited,
.pg-transcript-utterance-header a.pg-behavior-link:hover,
.pg-transcript-utterance-header a.pg-behavior-link:focus,
.pg-transcript-utterance-header a.pg-behavior-link:active {
  color: inherit;
  font-family: var(--m__font-family-sans);
  font-size: var(--m__font-size-s);
  font-weight: var(--m__font-weight-medium);
  background-size: 100% var(--m__border-width-m);
  padding-bottom: 0.1em;
  transition: none;
}

.pg-summary-item {
  margin-bottom: var(--m__spacer-m);
}
.pg-summary-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--m__gap-xxs);
  margin-bottom: 0.25rem;
}

/* Per-speaker emotion distribution bar — width = speaking time */
.pg-emo-bar {
  height: 2rem;
  border-radius: 3px;
  display: flex;
  overflow: hidden;
  background: var(--emotion-neutral);
  max-width: 440px;
}
.pg-emo-seg {
  height: 100%;
  flex-shrink: 0;
}
.pg-emo-labels {
  margin-top: 0.35rem;
}
.pg-emo-labels span {
  white-space: nowrap;
}
.pg-emo-labels .ec-tired {
  color: var(--emotion-tired);
}
.pg-emo-labels .ec-amused {
  color: var(--emotion-amused);
}
.pg-emo-labels .ec-confused {
  color: var(--emotion-confused);
}
.pg-emo-labels .ec-neutral {
  color: var(--emotion-neutral);
}
.pg-emo-labels .ec-calm {
  color: var(--emotion-calm);
}
.pg-emo-labels .ec-affectionate {
  color: var(--emotion-affectionate);
}
.pg-emo-labels .ec-excited {
  color: var(--emotion-excited);
}
.pg-emo-labels .ec-concerned {
  color: var(--emotion-concerned);
}
.pg-emo-labels .ec-disappointed {
  color: var(--emotion-disappointed);
}
.pg-emo-labels .ec-confident {
  color: var(--emotion-confident);
}

.pg-num {
  font-variant-numeric: tabular-nums;
}

/* Speakers table */
.pg-output-panel table.pg-speakers-table {
  table-layout: fixed;
}
.pg-output-panel table.pg-speakers-table th,
.pg-output-panel table.pg-speakers-table td {
  font-size: var(--m__font-size-s);
}
.pg-speakers-table th:nth-child(1) {
  width: 33%;
}
.pg-speakers-table th:nth-child(2) {
  width: 27%;
}
.pg-speakers-table th:nth-child(3) {
  width: 14%;
}
.pg-speakers-table th:nth-child(4) {
  width: 26%;
}
.pg-speakers-table td {
  vertical-align: top;
}
.pg-speakers-table .pg-speaker-cell-name {
  font-weight: var(--m__font-weight-medium);
}
.pg-speakers-table .pg-speaker-cell-desc {
  margin-top: 0.15rem;
  margin-bottom: 0.25rem;
}
.pg-speakers-table .m__tag-flat {
  font-size: var(--m__font-size-xs);
}

/* Topics & Sentiment */
.pg-topics-type {
  margin-bottom: var(--m__spacer-s);
}
.pg-topics-type .m__tag-flat {
  margin-left: 0.4rem;
  font-size: var(--m__font-size-xs);
}
.pg-topics-type .m__tag-flat .pg-num {
  font-size: inherit;
}
.pg-output-panel table.pg-topics-table th,
.pg-output-panel table.pg-topics-table td {
  font-size: var(--m__font-size-s);
}
.pg-topics-table {
  table-layout: fixed;
}
.pg-topics-table th:nth-child(1) {
  width: 22%;
}
.pg-topics-table th:nth-child(2) {
  width: 78%;
}
.pg-topics-table td {
  vertical-align: top;
}
.pg-topics-table .m__tag .pg-num {
  margin-left: 0.2rem;
}
.pg-topics-table .m__tag--error .pg-num.muted {
  color: inherit;
}

.pg-behaviors-cta {
  display: block;
  width: 100%;
  margin-top: var(--m__spacer-m);
  text-align: center;
}

/* Behaviors table */
.pg-output-panel table.pg-behaviors-table th,
.pg-output-panel table.pg-behaviors-table td {
  font-size: var(--m__font-size-s);
}
.pg-behaviors-table {
  table-layout: fixed;
}
.pg-behaviors-table th:nth-child(1) {
  width: 22%;
}
.pg-behaviors-table th:nth-child(2) {
  width: 28%;
}
.pg-behaviors-table th:nth-child(3) {
  width: 40%;
}
.pg-behaviors-table th:nth-child(4) {
  width: 10%;
}
.pg-behaviors-table td {
  vertical-align: top;
}
.pg-behaviors-table .pg-behavior-speaker-cell--last {
  border-bottom: none;
}
.pg-behaviors-table .pg-behavior-link,
.pg-behaviors-table .pg-behavior-name {
  font-size: var(--m__font-size-m);
  font-weight: var(--m__font-weight-bold);
}
.pg-behavior-row--inactive td {
  color: var(--m__text-caption);
}
.pg-behavior-row--inactive .pg-behavior-name {
  color: var(--m__text-caption);
}
.pg-behavior-row--group-end td:not(.pg-behavior-speaker-cell) {
  padding-bottom: 1.6rem;
}
.pg-behavior-row--detected-last td:not(.pg-behavior-speaker-cell) {
  border-bottom: none;
}
.pg-behavior-subhead-row td {
  padding-top: 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: var(--m__border-width-m) solid
    color-mix(in srgb, var(--m__text) 10%, transparent);
}
.moderation-review-page .pg-behavior-row--detected-last td {
  border-bottom: none;
}
.pg-behavior-subhead {
  display: block;
  font-family: var(--m__font-family-semi-mono);
  font-size: var(--m__font-size-s);
  font-weight: var(--m__font-weight-regular);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--m__text-caption);
}
.pg-behaviors-table .pg-evidence-list {
  display: flex;
  flex-direction: column;
  gap: var(--m__gap-nav-menu-item);
  margin-top: 0.65rem;
  align-items: flex-start;
}
.pg-behaviors-table .pg-evidence-link {
  --pg-evidence-bg: var(--m__bg-surface);
  --pg-evidence-bg-hover: color-mix(
    in srgb,
    var(--m__bg-accent-hover) 12%,
    var(--m__bg-surface)
  );
  --pg-evidence-pad-right: 0.5rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: min(100%, 20rem);
  overflow: hidden;
  padding: 0.3rem var(--pg-evidence-pad-right) 0.3rem 0.35rem;
  border-radius: var(--m__rounded-radius);
  corner-shape: squircle;
  background-color: var(--pg-evidence-bg);
  color: var(--m__text);
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  transition:
    background-color var(--m__duration-base) var(--m__easing-base),
    color var(--m__duration-base) var(--m__easing-base);
}
.pg-behaviors-table .pg-evidence-link--fade::after {
  content: "";
  position: absolute;
  top: 0;
  right: var(--pg-evidence-pad-right);
  bottom: 0;
  width: 1.2rem;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(90deg, transparent, currentColor 100%);
  color: var(--pg-evidence-bg);
  transform: translateX(var(--pg-evidence-pad-right));
  transition: color var(--m__duration-base) var(--m__easing-base);
}
.pg-behaviors-table .pg-evidence-link:hover,
.pg-behaviors-table .pg-evidence-link:focus {
  background-color: var(--pg-evidence-bg-hover);
  color: var(--m__text-link-hover);
  transition-duration: var(--m__duration-instant);
}
.pg-behaviors-table .pg-evidence-link--fade:hover::after,
.pg-behaviors-table .pg-evidence-link--fade:focus::after {
  color: var(--pg-evidence-bg-hover);
  transition-duration: var(--m__duration-instant);
}
.pg-model-reasoning {
  line-height: 1.45;
}
.pg-transcript-utterance[id="clip-evidence"] {
  scroll-margin-top: var(--m__spacer-l);
}
html {
  scroll-behavior: smooth;
}

.pg-transcript-flag {
  color: var(--m__text-caption);
}