/* ADC Design System v0.4.0. Generated, do not edit. */
@layer reset, tokens, base, layout, components, patterns, utilities, app;
/* Generated from tokens/ sources. Run npm run build; do not edit. */
@layer tokens {
  :root {
    --color-neutral-black: #1F1F21;
    --color-neutral-dark-grey: #494B51;
    --color-neutral-warm-grey: #706A64;
    --color-neutral-medium-grey: #848692;
    --color-neutral-beige: #A0958F;
    --color-neutral-light-grey: #F5F7FA;
    --color-neutral-white: #FFFFFF;
    --color-primary-olive-green: #4C6259;
    --color-primary-dark-olive: #33413B;
    --color-primary-green: #567A64;
    --color-primary-light-olive: #638475;
    --color-primary-light-green: #90B79B;
    --color-primary-muted-green: #A2B4AC;
    --color-primary-light-sage: #DBE0DE;
    --color-success-teal: #009B8A;
    --color-success-deep-teal: #007E6F;
    --color-success-light-teal: #00AB8C;
    --color-success-herbal: #32C997;
    --color-success-mint: #00DAAA;
    --color-warning-lemon: #FFA826;
    --color-warning-yellow: #F4C566;
    --color-warning-bright-yellow: #FFEB80;
    --color-warning-sand: #FBD791;
    --color-danger-dark-red: #C33025;
    --color-danger-scarlet: #E01507;
    --color-danger-medium-red: #E02B1D;
    --color-danger-raspberry: #FF5A4F;
    --color-danger-rubicund: #F0857D;
    --color-danger-light-red: #FFF1F0;
    --color-paper: #EDE7DD;
    --space-0: 0rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-30: 7.5rem;
    --type-size-12: 0.75rem;
    --type-size-14: 0.875rem;
    --type-size-16: 1rem;
    --type-size-18: 1.125rem;
    --type-size-20: 1.25rem;
    --type-size-28: 1.75rem;
    --type-size-36: 2.25rem;
    --type-size-64: 4rem;
    --leading-16: 1rem;
    --leading-20: 1.25rem;
    --leading-24: 1.5rem;
    --leading-28: 1.75rem;
    --leading-36: 2.25rem;
    --leading-44: 2.75rem;
    --leading-76: 4.75rem;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-family-latin: "aktiv-grotesk", "Aktiv Grotesk", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    --font-family-arabic: var(--font-family-latin);
    --font-family-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --tracking-label: 0.2em;
    --type-size-24: 1.5rem;
    --leading-32: 2rem;
    --tracking-navigation: 0.04em;
    --radius-none: 0;
    --radius-2: 2px;
    --radius-4: 4px;
    --radius-pill: 999px;
    --size-container: 76.5rem;
    --size-prose: 65ch;
    --size-control-normal: 3.5rem;
    --size-control-medium: 3rem;
    --size-control-small: 2rem;
    --size-icon-button-normal: 4rem;
    --size-icon: 1.5rem;
    --size-icon-small: 1rem;
    --size-choice: 1.5rem;
    --size-radio-dot: 0.75rem;
    --size-switch-track: 3rem;
    --size-switch-knob: 1rem;
    --size-pagination: 2rem;
    --size-brand-mark: 2rem;
    --size-header: 4rem;
    --focus-width: 2px;
    --focus-offset: 2px;
    --border-width: 1px;
    --cut-corner-normal: 17px;
    --cut-corner-medium: 14px;
    --cut-corner-small: 10px;
    --shadow-2: 0 2px 4px rgb(76 98 89 / 15%);
    --shadow-4: 0 4px 8px rgb(76 98 89 / 15%);
    --shadow-6: 0 6px 12px rgb(171 190 209 / 30%);
    --shadow-8: 0 8px 16px rgb(171 190 209 / 40%);
    --size-target-min: 1.5rem;
    --motion-fast: 140ms;
    --motion-normal: 220ms;
    --motion-easing: cubic-bezier(.2, 0, 0, 1);
    --color-background: var(--color-neutral-white);
    --color-surface: var(--color-neutral-white);
    --color-surface-subtle: var(--color-neutral-light-grey);
    --color-surface-muted: var(--color-primary-light-sage);
    --color-surface-inverse: var(--color-primary-dark-olive);
    --color-text: var(--color-neutral-black);
    --color-text-heading: var(--color-neutral-black);
    --color-text-secondary: var(--color-neutral-dark-grey);
    --color-text-muted: var(--color-neutral-warm-grey);
    --color-text-inverse: var(--color-neutral-white);
    --color-text-placeholder: var(--color-neutral-dark-grey);
    --color-text-on-action: var(--color-neutral-white);
    --color-border: color-mix(in srgb, var(--color-neutral-beige) 50%, transparent);
    --color-border-strong: var(--color-neutral-medium-grey);
    --color-control-border: var(--color-neutral-medium-grey);
    --color-focus: var(--color-neutral-dark-grey);
    --color-focus-strong: var(--color-neutral-black);
    --color-selection: var(--color-primary-light-sage);
    --color-link: var(--color-primary-green);
    --color-link-hover: var(--color-primary-dark-olive);
    --color-link-active: var(--color-primary-olive-green);
    --color-action: var(--color-primary-green);
    --color-action-hover: var(--color-primary-dark-olive);
    --color-action-active: var(--color-primary-olive-green);
    --color-action-subtle: var(--color-primary-muted-green);
    --color-action-soft: var(--color-primary-light-green);
    --color-action-tint: var(--color-neutral-light-grey);
    --color-disabled-surface: var(--color-primary-muted-green);
    --color-disabled-text: var(--color-neutral-beige);
    --color-input: var(--color-primary-muted-green);
    --color-input-hover: var(--color-primary-light-sage);
    --color-input-hover-border: var(--color-action);
    --color-input-focus: var(--color-neutral-white);
    --color-input-focus-border: var(--color-primary-green);
    --color-input-readonly: var(--color-neutral-light-grey);
    --color-success: var(--color-success-light-teal);
    --color-success-accent: var(--color-success-light-teal);
    --color-success-surface: color-mix(in srgb, var(--color-success-light-teal) 12%, transparent);
    --color-warning: #E48900;
    --color-warning-accent: var(--color-warning);
    --color-warning-surface: #FFF8EC;
    --color-danger: var(--color-danger-medium-red);
    --color-danger-hover: var(--color-danger-dark-red);
    --color-danger-active: var(--color-danger-scarlet);
    --color-danger-accent: var(--color-danger-medium-red);
    --color-danger-strong: var(--color-danger-dark-red);
    --color-danger-surface: var(--color-danger-light-red);
    --color-info: var(--color-primary-olive-green);
    --color-info-accent: var(--color-primary-green);
    --color-info-surface: var(--color-primary-light-sage);
    --gradient-brand: linear-gradient(125deg, #3E4F46, #7B8680);
    --font-family-body: var(--font-family-latin);
    --font-size-headline-1: var(--type-size-28);
    --line-height-headline-1: var(--leading-36);
    --font-size-headline-2: var(--type-size-20);
    --line-height-headline-2: var(--leading-28);
    --font-size-headline-3: var(--type-size-18);
    --line-height-headline-3: var(--leading-24);
    --font-size-headline-4: var(--type-size-16);
    --line-height-headline-4: var(--leading-20);
    --font-size-body-1: var(--type-size-18);
    --line-height-body-1: var(--leading-28);
    --font-size-body-2: var(--type-size-16);
    --line-height-body-2: var(--leading-24);
    --font-size-body-3: var(--type-size-14);
    --line-height-body-3: var(--leading-20);
    --font-size-field: var(--type-size-16);
    --line-height-field: var(--leading-24);
    --font-size-caption: var(--type-size-14);
    --line-height-caption: var(--leading-20);
    --font-size-title: var(--type-size-28);
    --line-height-title: var(--leading-36);
    --font-size-section-title: var(--type-size-20);
    --line-height-section-title: var(--leading-28);
    --font-size-dialog-title: var(--type-size-24);
    --line-height-dialog-title: var(--leading-32);
    --font-size-field-caption: var(--type-size-12);
    --line-height-field-caption: var(--leading-16);
    --space-inline: var(--space-2);
    --space-stack: var(--space-4);
    --space-inset: var(--space-8);
    --space-section: var(--space-12);
    --space-page: var(--space-6);
    --grid-columns: 6;
    --space-grid: var(--space-4);
    --space-cell-block: var(--space-4);
    --space-cell-inline: var(--space-6);
    --space-choice-block: var(--space-3);
    --space-navigation-inline: var(--space-5);
    --space-panel-gap: var(--space-5);
    --size-control: var(--size-control-normal);
    --size-field: var(--size-control-normal);
    --size-icon-button: var(--size-icon-button-normal);
    --size-control-icon: var(--size-icon);
    --size-icon-button-icon: var(--size-icon);
    --space-control-inline: var(--space-8);
    --space-field-block: var(--space-4);
    --space-field-floating: var(--space-2);
    --cut-corner: var(--cut-corner-normal);
    --font-size-label: var(--type-size-16);
    --line-height-label: var(--leading-24);
    --font-size-label-compact: var(--type-size-16);
    --line-height-label-compact: var(--leading-20);
    --icon-control-small: 0;
    --icon-button-small: 0;
    --size-option: var(--size-control-normal);
    --size-pagination-item: var(--size-control-medium);
    --size-navigation: var(--size-control-normal);
    --size-avatar: 2.5rem;
    --size-avatar-large: var(--size-control-normal);
    --shadow-raised: var(--shadow-4);
    --shadow-menu: var(--shadow-6);
    --motion-interaction-duration: var(--motion-fast);
    --motion-interaction-easing: var(--motion-easing);
    --motion-menu-open-delay: var(--motion-fast);
    --motion-menu-close-delay: var(--motion-normal);
  }
  /* Figma display headlines and grid from 48rem; interface text follows the size mode */
  @media (min-width: 48rem) {
    :root {
      --font-size-headline-1: var(--type-size-64);
      --line-height-headline-1: var(--leading-76);
      --font-size-headline-2: var(--type-size-36);
      --line-height-headline-2: var(--leading-44);
      --font-size-headline-3: var(--type-size-28);
      --line-height-headline-3: var(--leading-36);
      --font-size-headline-4: var(--type-size-20);
      --line-height-headline-4: var(--leading-28);
      --grid-columns: 12;
      --space-grid: var(--space-6);
    }
  }
  /* Coordinated interface size, set on any element with data-ui-size or a size modifier: normal */
  [data-ui-size='normal'],
  [data-ui-size='auto'],
  .ui-button--normal,
  .ui-field--normal,
  .ui-link--normal {
    --font-size-body-1: var(--type-size-18);
    --line-height-body-1: var(--leading-28);
    --font-size-body-2: var(--type-size-16);
    --line-height-body-2: var(--leading-24);
    --font-size-body-3: var(--type-size-14);
    --line-height-body-3: var(--leading-20);
    --font-size-caption: var(--type-size-14);
    --line-height-caption: var(--leading-20);
    --font-size-title: var(--type-size-28);
    --line-height-title: var(--leading-36);
    --font-size-section-title: var(--type-size-20);
    --line-height-section-title: var(--leading-28);
    --font-size-dialog-title: var(--type-size-24);
    --line-height-dialog-title: var(--leading-32);
    --space-inset: var(--space-8);
    --space-cell-block: var(--space-4);
    --space-cell-inline: var(--space-6);
    --space-choice-block: var(--space-3);
    --space-navigation-inline: var(--space-5);
    --space-panel-gap: var(--space-5);
    --size-control: var(--size-control-normal);
    --size-field: var(--size-control-normal);
    --size-icon-button: var(--size-icon-button-normal);
    --size-control-icon: var(--size-icon);
    --size-icon-button-icon: var(--size-icon);
    --space-control-inline: var(--space-8);
    --space-field-block: var(--space-4);
    --space-field-floating: var(--space-2);
    --cut-corner: var(--cut-corner-normal);
    --font-size-label: var(--type-size-16);
    --line-height-label: var(--leading-24);
    --font-size-label-compact: var(--type-size-16);
    --line-height-label-compact: var(--leading-20);
    --icon-control-small: 0;
    --icon-button-small: 0;
    --size-option: var(--size-control-normal);
    --size-pagination-item: var(--size-control-medium);
    --size-navigation: var(--size-control-normal);
    --size-avatar: 2.5rem;
    --size-avatar-large: var(--size-control-normal);
  }
  /* Coordinated interface size, set on any element with data-ui-size or a size modifier: medium */
  [data-ui-size='medium'],
  .ui-button--medium,
  .ui-field--medium,
  .ui-link--medium {
    --font-size-body-1: var(--type-size-16);
    --line-height-body-1: var(--leading-24);
    --font-size-body-2: var(--type-size-14);
    --line-height-body-2: var(--leading-20);
    --font-size-body-3: var(--type-size-14);
    --line-height-body-3: var(--leading-20);
    --font-size-caption: var(--type-size-12);
    --line-height-caption: var(--leading-16);
    --font-size-title: var(--type-size-24);
    --line-height-title: var(--leading-32);
    --font-size-section-title: var(--type-size-18);
    --line-height-section-title: var(--leading-24);
    --font-size-dialog-title: var(--type-size-20);
    --line-height-dialog-title: var(--leading-28);
    --space-inset: var(--space-6);
    --space-cell-block: var(--space-3);
    --space-cell-inline: var(--space-4);
    --space-choice-block: var(--space-2);
    --space-navigation-inline: var(--space-4);
    --space-panel-gap: var(--space-4);
    --size-control: var(--size-control-medium);
    --size-field: var(--size-control-medium);
    --size-icon-button: var(--size-control-medium);
    --size-control-icon: var(--size-icon-small);
    --size-icon-button-icon: var(--size-icon);
    --space-control-inline: var(--space-8);
    --space-field-block: var(--space-3);
    --space-field-floating: var(--space-1);
    --cut-corner: var(--cut-corner-medium);
    --font-size-label: var(--type-size-16);
    --line-height-label: var(--leading-20);
    --font-size-label-compact: var(--type-size-14);
    --line-height-label-compact: var(--leading-20);
    --icon-control-small: 1;
    --icon-button-small: 0;
    --size-option: var(--size-control-medium);
    --size-pagination-item: var(--size-pagination);
    --size-navigation: var(--size-control-medium);
    --size-avatar: var(--size-control-small);
    --size-avatar-large: var(--size-control-medium);
  }
  /* Coordinated interface size, set on any element with data-ui-size or a size modifier: small */
  [data-ui-size='small'],
  .ui-button--small,
  .ui-link--small {
    --font-size-body-1: var(--type-size-16);
    --line-height-body-1: var(--leading-24);
    --font-size-body-2: var(--type-size-14);
    --line-height-body-2: var(--leading-20);
    --font-size-body-3: var(--type-size-14);
    --line-height-body-3: var(--leading-20);
    --font-size-caption: var(--type-size-12);
    --line-height-caption: var(--leading-16);
    --font-size-title: var(--type-size-24);
    --line-height-title: var(--leading-32);
    --font-size-section-title: var(--type-size-18);
    --line-height-section-title: var(--leading-24);
    --font-size-dialog-title: var(--type-size-20);
    --line-height-dialog-title: var(--leading-28);
    --space-inset: var(--space-6);
    --space-cell-block: var(--space-3);
    --space-cell-inline: var(--space-4);
    --space-choice-block: var(--space-2);
    --space-navigation-inline: var(--space-4);
    --space-panel-gap: var(--space-4);
    --size-control: var(--size-control-small);
    --size-field: var(--size-control-medium);
    --size-icon-button: var(--size-control-small);
    --size-control-icon: var(--size-icon-small);
    --size-icon-button-icon: var(--size-icon-small);
    --space-control-inline: var(--space-6);
    --space-field-block: var(--space-3);
    --space-field-floating: var(--space-1);
    --cut-corner: var(--cut-corner-small);
    --font-size-label: var(--type-size-14);
    --line-height-label: var(--leading-16);
    --font-size-label-compact: var(--type-size-14);
    --line-height-label-compact: var(--leading-20);
    --icon-control-small: 1;
    --icon-button-small: 1;
    --size-option: var(--size-control-medium);
    --size-pagination-item: var(--size-pagination);
    --size-navigation: var(--size-control-small);
    --size-avatar: var(--size-control-small);
    --size-avatar-large: var(--size-control-medium);
  }
  /* Standalone targets remain usable on narrow viewports and coarse pointers, independently of size overrides */
  @media (max-width: 63.999rem), (any-pointer: coarse) {
    :root {
      --size-target-min: 2.75rem;
    }
  }
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }
  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }
  button,
  select {
    text-transform: none;
  }
  button {
    cursor: pointer;
  }
  img,
  svg {
    display: block;
    max-inline-size: 100%;
  }
  img {
    block-size: auto;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  textarea {
    resize: vertical;
  }
  [hidden] {
    display: none !important;
  }
}

@layer base {
  :root {
    color-scheme: light;
  }
  body {
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-2);
    line-height: var(--line-height-body-2);
    font-synthesis: none;
  }
  :where([data-ui-size]) {
    font-size: var(--font-size-body-2);
    line-height: var(--line-height-body-2);
  }
  /* Keep rem tied to the reader's browser preference, including explicit sizes on html. */
  html {
    font-size: 100%;
  }
  /* Arabic inherits the same Aktiv Grotesk family and size as Latin. Remove tracking to
     preserve joined letters, including the tracking compensation in buttons and labels. */
  :lang(ar) {
    --tracking-label: 0em;
    --tracking-navigation: 0em;
    letter-spacing: normal;
  }
  :where(h1, h2, h3, h4, h5, h6) {
    color: var(--color-text-heading);
    font-weight: var(--font-weight-bold);
    text-wrap: balance;
    overflow-wrap: break-word;
  }
  /* Heading levels map to Figma Headline 1–4. Use .ui-headline-* when the outline level and
     the visual size differ. */
  h1 {
    font-size: var(--font-size-headline-1);
    font-weight: var(--font-weight-extrabold);
    line-height: var(--line-height-headline-1);
  }
  h2 {
    font-size: var(--font-size-headline-2);
    line-height: var(--line-height-headline-2);
  }
  h3 {
    font-size: var(--font-size-headline-3);
    line-height: var(--line-height-headline-3);
  }
  h4 {
    font-size: var(--font-size-headline-4);
    line-height: var(--line-height-headline-4);
  }
  h5,
  h6 {
    font-size: var(--font-size-body-1);
    line-height: var(--line-height-body-1);
  }
  p {
    text-wrap: pretty;
  }
  a {
    color: var(--color-link);
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
  }
  a:hover {
    color: var(--color-link-hover);
    text-decoration-thickness: 2px;
  }
  a:active {
    color: var(--color-link-active);
  }
  strong,
  b {
    font-weight: var(--font-weight-bold);
  }
  small {
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
  }
  code,
  pre,
  kbd,
  samp {
    font-family: var(--font-family-mono);
    font-size: 0.875em;
  }
  :not(pre) > code,
  kbd {
    background: var(--color-surface-subtle);
    padding: 0.15em 0.35em;
    overflow-wrap: anywhere;
  }
  pre {
    --color-focus: var(--color-neutral-white);
    background: var(--color-surface-inverse);
    color: var(--color-text-inverse);
    padding: var(--space-inset);
    overflow: auto;
    line-height: 1.7;
    tab-size: 2;
  }
  hr {
    border: 0;
    border-block-start: var(--border-width) solid var(--color-border);
    margin-block: var(--space-section);
  }
  ul,
  ol {
    padding-inline-start: var(--space-6);
  }
  li + li {
    margin-block-start: var(--space-2);
  }
  dt {
    font-weight: var(--font-weight-medium);
  }
  dd + dt {
    margin-block-start: var(--space-4);
  }
  blockquote {
    border-inline-start: var(--focus-width) solid var(--color-action);
    padding-inline-start: var(--space-6);
    color: var(--color-text);
    font-size: var(--font-size-body-1);
    line-height: var(--line-height-body-1);
  }
  blockquote cite {
    display: block;
    margin-block-start: var(--space-3);
    font-size: var(--font-size-body-2);
    font-style: normal;
    color: var(--color-text-muted);
  }
  ::selection {
    background: var(--color-selection);
    color: var(--color-text);
  }
  /* Figma components draw their own focus border. Everything else gets this 2px ring, set just
     off the element in the Figma focus color. Dark surfaces re-assign --color-focus. */
  :focus-visible {
    outline: var(--focus-width) solid var(--color-focus);
    outline-offset: var(--focus-offset);
  }
  :target {
    scroll-margin-block-start: var(--space-6);
  }
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

@layer layout {
  /* Figma grid: a 1224px container centered on desktop, 24px page margins on mobile. */
  .l-container {
    inline-size: min(100% - 2 * var(--space-page), var(--layout-container, var(--size-container)));
    margin-inline: auto;
  }
  /* Figma column grid: 6 columns with 16px gutters on mobile, 12 with 24px on desktop.
     Children span every column unless they set grid-column themselves. */
  .l-columns {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    gap: var(--layout-gap, var(--space-grid));
  }
  .l-columns > * {
    grid-column: 1 / -1;
    min-inline-size: 0;
  }
  .l-stack {
    display: flex;
    flex-direction: column;
    gap: var(--layout-gap, var(--space-stack));
  }
  .l-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--layout-gap, var(--space-inline));
  }
  .l-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--layout-min, 16rem)), 1fr));
    gap: var(--layout-gap, var(--space-grid));
  }
  .l-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--layout-gap, var(--space-grid));
  }
  .l-stack > *,
  .l-grid > *,
  .l-split > * {
    min-inline-size: 0;
  }
  @media (max-width: 48rem) {
    .l-split {
      grid-template-columns: 1fr;
    }
  }
}

@layer reset, tokens, base, layout, components, patterns, utilities, app;
@layer components {
  /* Type roles ---------------------------------------------------------- */
  /* Figma text styles as classes, for when the heading level and the visual size differ. Each
     switches between its mobile and desktop values at 48rem. */
  .ui-headline-1 {
    font-size: var(--font-size-headline-1);
    font-weight: var(--font-weight-extrabold);
    line-height: var(--line-height-headline-1);
    color: var(--color-text-heading);
    text-wrap: balance;
  }
  .ui-headline-2 {
    font-size: var(--font-size-headline-2);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-headline-2);
  }
  .ui-headline-3 {
    font-size: var(--font-size-headline-3);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-headline-3);
  }
  .ui-headline-4 {
    font-size: var(--font-size-headline-4);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-headline-4);
  }
  .ui-body-1 {
    font-size: var(--font-size-body-1);
    line-height: var(--line-height-body-1);
  }
  .ui-body-2 {
    font-size: var(--font-size-body-2);
    line-height: var(--line-height-body-2);
  }
  .ui-body-3 {
    font-size: var(--font-size-body-3);
    line-height: var(--line-height-body-3);
  }
  .ui-caption {
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
    color: var(--color-text-muted);
  }
  /* Not a Figma style: an uppercase label at the Button_Link Small size, for eyebrows. */
  .ui-overline {
    font-size: var(--type-size-14);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-16);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }
  :lang(ar):is(
    .ui-overline,
    .ui-button,
    .ui-link,
    .ui-tab,
    .ui-breadcrumb li,
    .ui-pagination__gap,
    .ui-table thead th
  ) {
    letter-spacing: normal;
  }
  .ui-prose {
    max-inline-size: var(--size-prose);
  }
  .ui-prose > * + * {
    margin-block-start: var(--space-4);
  }
  .ui-prose > :is(h2, h3, h4, h5, h6) {
    margin-block-start: var(--space-8);
  }
  .ui-prose > :is(h2, h3, h4, h5, h6) + * {
    margin-block-start: var(--space-3);
  }
}
@layer components {
  /* Figma glyphs that components draw as CSS masks, where markup has no icon element: the
     checkbox mark, field messages, dropdown chevrons and the search clear control. */
  :root {
    --ui-glyph-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.333 4 6 11.333 2.667 8'/%3E%3C/svg%3E");
    --ui-glyph-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 4 12M4 4l8 8'/%3E%3C/svg%3E");
    --ui-glyph-close-large: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
    --ui-glyph-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M2 10.878C2 10.515 2.093 10.158 2.271 9.841L5.977 3.23C6.309 2.638 6.883 2.221 7.549 2.089C7.847 2.03 8.153 2.03 8.451 2.089C9.117 2.221 9.691 2.638 10.023 3.23L13.729 9.841C13.907 10.158 14 10.515 14 10.878C14 12.05 13.05 13 11.878 13H4.122C2.95 13 2 12.05 2 10.878Z'/%3E%3Cpath d='M8 6v2.667M8 10.667V11' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --ui-glyph-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='m5 9 6.219 5.331c.449.385 1.113.385 1.562 0L19 9'/%3E%3C/svg%3E");
    --ui-glyph-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='m5 15 6.219-5.331c.449-.385 1.113-.385 1.562 0L19 15'/%3E%3C/svg%3E");
  }

  /* Icons ---------------------------------------------------------------- */
  /* assets/icons.svg is generated from the Figma icon set (scripts/icons.mjs), and each symbol
     carries its own Figma strokes and fills. Where Figma also draws a 16px version (arrows,
     chevrons, swaps, plus, minus, check, close, loading, search, warning), the symbol holds both
     drawings: the 24px one inherits stroke-opacity, the 16px one inherits stroke-width.
     --ui-icon-small (0 or 1) chooses between them, so a 16px icon uses the Figma 16px drawing
     and a 24px icon the 24px drawing. Components that size icons set it; .ui-icon--small sets
     it for any other 16px icon. */
  .ui-icon {
    inline-size: var(--size-icon);
    block-size: var(--size-icon);
    flex: none;
    stroke-opacity: calc(1 - var(--ui-icon-small, 0));
    stroke-width: calc(1.1px * var(--ui-icon-small, 0));
  }
  .ui-icon--small {
    --ui-icon-small: 1;
    inline-size: var(--size-icon-small);
    block-size: var(--size-icon-small);
  }
  .ui-icon--directional:dir(rtl) {
    transform: scaleX(-1);
  }
}

@layer components {
  /* A bare icon action for dense chrome such as the workspace header. It follows the Figma
     secondary icon button: the icon alone at rest and Muted Green on hover. */
  .ui-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: var(--size-control-medium);
    block-size: var(--size-control-medium);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-action);
    cursor: pointer;
    transition: background-color var(--motion-interaction-duration) var(--motion-interaction-easing);
  }
  .ui-icon-button:is(:hover, :active) {
    background: var(--color-action-subtle);
  }
  .ui-icon-button:active {
    box-shadow: inset 0 0 0 var(--border-width) var(--color-action);
  }
  .ui-icon-button:focus-visible {
    outline: none;
    background: var(--color-action-subtle);
    box-shadow: inset 0 0 0 var(--focus-width) var(--color-focus-strong);
  }
  .ui-icon-button .ui-icon {
    inline-size: var(--size-icon);
    block-size: var(--size-icon);
  }
  @media (forced-colors: active) {
    .ui-icon-button:focus-visible {
      outline: 2px solid Highlight;
    }
  }
}
/* The sweep angle animates smoothly only as a registered property. */
@property --ui-spinner-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@layer components {
  /* Figma User Interface/Loading: eight radial strokes, 24px (1.5px stroke) or 16px (1.1px).
     The strokes stay still while a light sweep travels around them, the leading stroke in full
     color and the ones behind it fading. It takes the current text color and the size of the
     icon it stands in for; 16px spinners draw the Figma 16px glyph (see icon.css). */
  .ui-spinner {
    --ui-spinner-small: var(--ui-icon-small, 1);
    display: inline-block;
    flex: none;
    inline-size: var(--size-icon-small);
    block-size: var(--size-icon-small);
    background: conic-gradient(
      from var(--ui-spinner-angle),
      color-mix(in srgb, currentColor 20%, transparent),
      currentColor
    );
    -webkit-mask:
      var(--ui-spinner-glyph) center / calc(100% * (1 - var(--ui-spinner-small))) no-repeat,
      var(--ui-spinner-glyph-small) center / calc(100% * var(--ui-spinner-small)) no-repeat;
    mask:
      var(--ui-spinner-glyph) center / calc(100% * (1 - var(--ui-spinner-small))) no-repeat,
      var(--ui-spinner-glyph-small) center / calc(100% * var(--ui-spinner-small)) no-repeat;
    animation: ui-spinner-sweep 1s linear infinite;
  }
  .ui-spinner,
  .ui-message[data-tone='loading'] {
    --ui-spinner-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 2v3M12 19v3M22 12h-3M5 12H2M19.07 4.93l-2.12 2.12M7.05 16.95l-2.12 2.12M4.93 4.93l2.12 2.12M16.95 16.95l2.12 2.12'/%3E%3C/svg%3E");
    --ui-spinner-glyph-small: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M8 1.33v2M8 12.67v2M14.67 8h-2M3.33 8h-2M12.71 3.29 11.3 4.7M4.7 11.3l-1.41 1.41M3.29 3.29 4.7 4.7M11.3 11.3l1.41 1.41'/%3E%3C/svg%3E");
  }
  @keyframes ui-spinner-sweep {
    to {
      --ui-spinner-angle: 1turn;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .ui-spinner {
      animation-duration: 2s;
    }
  }
}

@layer components {
  @media (forced-colors: active) {
    .ui-spinner {
      forced-color-adjust: none;
      background: CanvasText;
    }
  }
}
@layer components {
  /* Buttons -------------------------------------------------------------- */
  /* Figma Button: Type Primary, Secondary or Tertiary; Size Normal (56), Medium (48) or
     Small (32) through data-ui-size or .ui-button--{size}; States Default, Hover, Focus, Click,
     Loading (aria-busy) and Disabled. */
  .ui-button {
    --ui-button-bg: var(--color-action);
    --ui-button-fg: var(--color-text-on-action);
    --ui-button-border: transparent;
    --ui-button-border-width: 0px;
    /* CSS adds letter spacing after the last letter too; Figma does not. The label is indented
       by the same amount and the inline padding, gap and icon margins absorb it, so the label
       sits centered and the button matches Figma's width (136 × 56 for LABEL at Normal). */
    --ui-button-tracking: var(--tracking-label);
    --ui-icon-small: var(--icon-control-small);
    --ui-cut: var(--cut-corner);
    /* Clip only the diagonal. Extending the other sides keeps the clip from softening
       native, pixel-snapped borders when text or layout gives the button fractional bounds. */
    --ui-fill-shape: polygon(
      -1px -1px,
      calc(100% + 1px) -1px,
      calc(100% + 1px) calc(100% - var(--ui-cut) - 1px),
      calc(100% - var(--ui-cut) - 1px) calc(100% + 1px),
      -1px calc(100% + 1px)
    );
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--space-2) - 2 * var(--ui-button-tracking));
    min-inline-size: var(--size-target-min);
    max-inline-size: 100%;
    min-block-size: max(var(--size-control), var(--size-target-min));
    padding-block: max(
      var(--space-1),
      calc(
        (var(--size-control) - max(var(--font-size-label) * 1.3125, var(--size-control-icon))) / 2
      )
    );
    padding-inline: calc(var(--space-control-inline) - var(--ui-button-tracking));
    overflow-wrap: anywhere;
    border: 0;
    background: transparent;
    color: var(--ui-button-fg);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-bold);
    /* One line box as tall as Aktiv Grotesk's glyph box, so there is no half-leading to round
       and the capitals centre on the rows Figma renders them on at every size. */
    line-height: 1.3125;
    letter-spacing: var(--ui-button-tracking);
    text-indent: var(--ui-button-tracking);
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    transition: color var(--motion-interaction-duration) var(--motion-interaction-easing);
  }
  /* The cut corner sits at the inline end, so it mirrors with the writing direction. */
  .ui-button:dir(rtl) {
    --ui-fill-shape: polygon(
      -1px -1px,
      calc(100% + 1px) -1px,
      calc(100% + 1px) calc(100% + 1px),
      calc(var(--ui-cut) + 1px) calc(100% + 1px),
      -1px calc(100% - var(--ui-cut) - 1px)
    );
  }
  .ui-button::before,
  .ui-button::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  }
  .ui-button::before {
    background: var(--ui-button-bg);
    border: var(--ui-button-border-width) solid var(--ui-button-border);
    clip-path: var(--ui-fill-shape);
    transition: background-color var(--motion-interaction-duration) var(--motion-interaction-easing);
  }
  /* A real CSS border, rotated 45°, gives the cut the same pixel-snapped stroke weight
     as the straight sides. Its outer endpoints meet the two ends of the cut exactly. */
  .ui-button::after {
    inset: auto;
    inset-inline-end: 0;
    inset-block-end: var(--ui-cut);
    inline-size: calc(var(--ui-cut) * 1.4142135624);
    /* A non-collapsed drawing box avoids WebKit rounding the thin border again
       before rotation at fractional display densities. Only its bottom edge is painted. */
    block-size: 4px;
    border-block-end: var(--ui-button-border-width) solid var(--ui-button-border);
    transform: rotate(-45deg);
    transform-origin: 100% 100%;
  }
  .ui-button:dir(rtl)::after {
    transform: rotate(45deg);
    transform-origin: 0 100%;
  }
  .ui-button :is(.ui-icon, .ui-spinner) {
    inline-size: var(--size-control-icon);
    block-size: var(--size-control-icon);
  }
  .ui-button > :is(.ui-icon, .ui-spinner) {
    margin-inline: var(--ui-button-tracking);
  }
  .ui-button:hover {
    color: var(--ui-button-fg);
    text-decoration: none;
  }
  /* Focus is drawn on the button's own edge, inside the cut shape. */
  .ui-button:focus-visible {
    outline: none;
  }

  /* Primary */
  .ui-button:hover,
  .ui-button:focus-visible {
    --ui-button-bg: var(--color-action-hover);
  }
  .ui-button:focus-visible {
    --ui-button-border: var(--color-focus-strong);
    --ui-button-border-width: var(--focus-width);
  }
  .ui-button:active,
  .ui-button[aria-busy='true'] {
    --ui-button-bg: var(--color-action-active);
  }

  /* Secondary: white with a 1px action border; filled on interaction. */
  .ui-button--secondary {
    --ui-button-bg: var(--color-surface);
    --ui-button-fg: var(--color-action);
    --ui-button-border: var(--color-action);
    --ui-button-border-width: var(--border-width);
  }
  .ui-button--secondary:hover {
    --ui-button-bg: var(--color-action-subtle);
    --ui-button-fg: var(--color-text-on-action);
  }
  .ui-button--secondary:focus-visible {
    --ui-button-bg: var(--color-action-subtle);
    --ui-button-fg: var(--color-text-on-action);
    --ui-button-border: var(--color-focus);
    --ui-button-border-width: var(--focus-width);
  }
  .ui-button--secondary:active {
    --ui-button-bg: var(--color-action-hover);
    --ui-button-fg: var(--color-text-on-action);
    --ui-button-border: var(--color-action-hover);
  }
  .ui-button--secondary[aria-busy='true'] {
    --ui-button-bg: var(--color-action-subtle);
    --ui-button-fg: var(--color-action);
    --ui-button-border: transparent;
    --ui-button-border-width: 0px;
  }

  /* Tertiary: text only at rest. */
  .ui-button--tertiary {
    --ui-button-bg: transparent;
    --ui-button-fg: var(--color-action);
  }
  .ui-button--tertiary:hover {
    --ui-button-bg: var(--color-action-subtle);
  }
  .ui-button--tertiary:focus-visible {
    --ui-button-bg: transparent;
    --ui-button-border: var(--color-focus);
  }
  .ui-button--tertiary:is(:active, [aria-busy='true']) {
    --ui-button-bg: var(--color-action-soft);
  }

  /* Not in Figma. Danger follows the primary pattern in the Figma reds. */
  .ui-button--danger {
    --ui-button-bg: var(--color-danger);
  }
  .ui-button--danger:is(:hover, :focus-visible) {
    --ui-button-bg: var(--color-danger-hover);
  }
  .ui-button--danger:is(:active, [aria-busy='true']) {
    --ui-button-bg: var(--color-danger-active);
  }
  /* Not in Figma. White actions for dark and brand surfaces. */
  .ui-button--inverse {
    --ui-button-bg: var(--color-neutral-white);
    --ui-button-fg: var(--color-primary-olive-green);
  }
  .ui-button--inverse:hover {
    --ui-button-bg: var(--color-primary-light-sage);
  }
  .ui-button--inverse:focus-visible {
    --ui-button-bg: var(--color-primary-light-sage);
    --ui-button-border: var(--color-focus-strong);
  }
  .ui-button--inverse:is(:active, [aria-busy='true']) {
    --ui-button-bg: var(--color-primary-muted-green);
  }

  /* Loading: the spinner follows the label and replaces any icon. */
  .ui-button:not([aria-busy='true']) > .ui-spinner,
  .ui-button[aria-busy='true'] > .ui-icon {
    display: none;
  }
  .ui-button[aria-busy='true'] {
    cursor: progress;
  }

  /* Figma Icon button: square, no cut corner, 64, 48 or 32px. */
  .ui-button--icon {
    --ui-cut: 0px;
    --ui-button-tracking: 0em;
    --ui-icon-small: var(--icon-button-small);
    flex: none;
    inline-size: max(var(--size-icon-button), var(--size-target-min));
    min-block-size: max(var(--size-icon-button), var(--size-target-min));
    padding: 0;
  }
  .ui-button--icon::before {
    clip-path: none;
  }
  .ui-button--icon::after {
    display: none;
  }
  .ui-button--icon :is(.ui-icon, .ui-spinner) {
    inline-size: var(--size-icon-button-icon);
    block-size: var(--size-icon-button-icon);
  }
  /* Secondary icon button: the icon alone at rest. Tertiary icon buttons share it. */
  .ui-button--icon:is(.ui-button--secondary, .ui-button--tertiary) {
    --ui-button-bg: transparent;
    --ui-button-fg: var(--color-action);
    --ui-button-border: transparent;
    --ui-button-border-width: 0px;
  }
  .ui-button--icon:is(.ui-button--secondary, .ui-button--tertiary):is(
      :hover,
      :active,
      [aria-busy='true']
    ) {
    --ui-button-bg: var(--color-action-subtle);
    --ui-button-fg: var(--color-action);
  }
  .ui-button--icon:is(.ui-button--secondary, .ui-button--tertiary):active {
    --ui-button-border: var(--color-action);
    --ui-button-border-width: var(--border-width);
  }
  .ui-button--icon:is(.ui-button--secondary, .ui-button--tertiary):focus-visible {
    --ui-button-bg: var(--color-action-subtle);
    --ui-button-fg: var(--color-action);
    --ui-button-border: var(--color-focus-strong);
    --ui-button-border-width: var(--focus-width);
  }

  /* Doubled class: disabled must outrank every variant's interaction states. */
  .ui-button.ui-button:is(:disabled, [aria-disabled='true']) {
    --ui-button-bg: var(--color-disabled-surface);
    --ui-button-fg: var(--color-disabled-text);
    --ui-button-border: transparent;
    --ui-button-border-width: 0px;
    cursor: not-allowed;
  }
}

@layer components {
  @media (forced-colors: active) {
    .ui-button {
      border: 1px solid ButtonText;
      color: ButtonText;
      background: ButtonFace;
    }
    .ui-button::before,
    .ui-button::after {
      display: none;
    }
    .ui-button:focus-visible {
      outline: 2px solid Highlight;
      outline-offset: 2px;
    }
    .ui-button:is(:disabled, [aria-disabled='true']) {
      color: GrayText;
      border-color: GrayText;
    }
  }
}
@layer components {
  /* Figma Link: an uppercase text action in the three button sizes. Green at rest; on hover
     and focus a 1px accent line 2.625em long (47, 42 and 36px) runs under the start of the
     label; Olive Green while pressed; Beige when disabled. Focus adds a 2px Black box. Links
     inside running text keep the base link style. */
  .ui-link {
    --ui-icon-small: var(--icon-control-small);
    position: relative;
    display: inline-flex;
    align-items: center;
    min-block-size: var(--size-target-min);
    min-inline-size: var(--size-target-min);
    max-inline-size: 100%;
    overflow-wrap: anywhere;
    gap: var(--space-2);
    padding: 0;
    border: 0;
    background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 var(--border-width);
    color: var(--color-link);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition:
      color var(--motion-interaction-duration) var(--motion-interaction-easing),
      background-size var(--motion-interaction-duration) var(--motion-interaction-easing);
  }
  .ui-link:dir(rtl) {
    background-position: 100% 100%;
  }
  .ui-link:is(:hover, :focus-visible, :active) {
    background-size: min(2.625em, 100% - var(--tracking-label)) var(--border-width);
    color: var(--color-link);
    text-decoration: none;
  }
  .ui-link:active {
    color: var(--color-link-active);
  }
  /* Figma boxes the label without its trailing letter spacing, 2px outside. */
  .ui-link:focus-visible {
    outline: none;
  }
  .ui-link:focus-visible::after {
    content: '';
    position: absolute;
    inset-block: calc(-1 * var(--focus-width));
    inset-inline: calc(-1 * var(--focus-width)) calc(var(--tracking-label) - var(--focus-width));
    border: var(--focus-width) solid var(--color-focus-strong);
    pointer-events: none;
  }
  .ui-link:has(> .ui-icon):focus-visible::after {
    inset-inline-end: calc(-1 * var(--focus-width));
  }
  .ui-link .ui-icon {
    inline-size: var(--size-control-icon);
    block-size: var(--size-control-icon);
  }
  .ui-link:is(:disabled, [aria-disabled='true']) {
    background-size: 0 var(--border-width);
    color: var(--color-disabled-text);
    pointer-events: none;
    cursor: not-allowed;
  }
}
@layer components {
  /* Fields --------------------------------------------------------------- */
  /* Figma Fields: a filled box with the title inside. At rest the title reads like a
     placeholder; on focus or with a value it floats up as a 12px caption. The <label> stays a
     real label throughout. Floating needs a placeholder attribute on the control (a single
     space is enough); without one the title stays floated. .ui-field--stacked puts the label
     above the box instead. Sizes: Normal (56) and Medium (48). */
  .ui-field,
  .ui-input-group,
  .ui-listbox {
    --ui-field-inline: var(--space-5);
    --ui-field-icon-inset: calc(var(--ui-field-inline) + var(--size-icon) + var(--space-3));
  }
  .ui-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
  }
  .ui-field > :is(.ui-control, .ui-input-group, .ui-listbox) {
    grid-area: 1 / 1;
  }
  .ui-field > .ui-label {
    grid-area: 1 / 1;
    z-index: 1;
    align-self: center;
    padding-inline: var(--ui-field-inline);
    overflow: hidden;
    color: var(--color-text-placeholder);
    font-size: var(--font-size-field);
    line-height: var(--line-height-field);
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    transition:
      font-size var(--motion-fast) var(--motion-easing),
      line-height var(--motion-fast) var(--motion-easing),
      color var(--motion-fast) var(--motion-easing);
  }
  .ui-field:has(> textarea.ui-control) > .ui-label {
    align-self: start;
    padding-block-start: var(--space-field-block);
  }
  .ui-field:has(.ui-input-group > .ui-icon:not(.ui-control ~ *)) > .ui-label {
    padding-inline-start: var(--ui-field-icon-inset);
  }
  .ui-field:has(
      > .ui-input-group > .ui-control ~ :is(.ui-icon, .ui-button),
      > select.ui-control:not([multiple]),
      > .ui-listbox
    )
    > .ui-label {
    padding-inline-end: var(--ui-field-icon-inset);
  }
  /* Floated title: any focused or filled control. */
  .ui-field:not(.ui-field--stacked):has(
      .ui-control:is(:focus, :not(:placeholder-shown), [aria-expanded='true']):not(
          [data-empty],
          [hidden]
        )
    )
    > .ui-label,
  .ui-field:not(.ui-field--stacked):has(.ui-control[data-empty]:is(:focus, [aria-expanded='true']))
    > .ui-label,
  .ui-field:not(.ui-field--stacked):has(> select.ui-control:not([hidden])) > .ui-label {
    align-self: start;
    padding-block-start: var(--space-field-floating);
    color: var(--color-text-muted);
    font-size: var(--font-size-field-caption);
    line-height: var(--line-height-field-caption);
  }
  /* The hint text appears once the title has floated out of its way. */
  .ui-field:not(.ui-field--stacked):has(> .ui-label:not(.u-visually-hidden))
    .ui-control:not(:focus)::placeholder {
    color: transparent;
  }
  /* Space messages explicitly. A zero-height autofill accessory must not create a gap. */
  .ui-field > :not(.ui-label, .ui-control, .ui-input-group, .ui-listbox) {
    grid-column: 1;
  }
  .ui-field > :is(.ui-help, .ui-error, .ui-message, .ui-field__meta) {
    margin-block-start: var(--space-2);
  }

  .ui-label,
  .ui-legend {
    font-size: var(--font-size-field);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-field);
  }
  .ui-field--stacked > .ui-label {
    grid-area: auto;
    align-self: start;
    margin-block-end: var(--space-2);
    padding: 0;
    color: var(--color-text);
    white-space: normal;
    pointer-events: auto;
  }
  .ui-field--stacked > :is(.ui-control, .ui-input-group, .ui-listbox) {
    grid-area: auto;
  }

  /* The box. A transparent 1px border reserves room for the hover and focus edges. */
  .ui-control {
    --ui-control-bg: var(--color-input);
    --ui-control-border: transparent;
    display: block;
    inline-size: 100%;
    min-block-size: var(--size-field);
    padding-block: calc(var(--space-field-block) - var(--border-width));
    padding-inline: calc(var(--ui-field-inline, var(--space-5)) - var(--border-width));
    border: var(--border-width) solid var(--ui-control-border);
    border-radius: var(--radius-none);
    background-color: var(--ui-control-bg);
    color: var(--color-text);
    font-size: var(--font-size-field);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-field);
    transition:
      background-color var(--motion-fast) var(--motion-easing),
      border-color var(--motion-fast) var(--motion-easing);
  }
  /* With a floating title the value sits below the caption line. Stacked fields, fields with
     a hidden label, and bare controls center the value instead. */
  .ui-field:not(.ui-field--stacked):has(> .ui-label:not(.u-visually-hidden))
    :is(.ui-control:not(.ui-listbox__trigger), .ui-listbox__value) {
    padding-block: calc(
        var(--space-field-floating) + var(--line-height-field-caption) - var(--border-width)
      )
      calc(var(--space-field-floating) - var(--border-width));
  }
  .ui-control::placeholder {
    color: var(--color-text-placeholder);
    opacity: 1;
  }
  .ui-control:hover {
    --ui-control-bg: var(--color-input-hover);
    --ui-control-border: var(--color-input-hover-border);
  }
  .ui-control:is(:focus, [aria-expanded='true']) {
    --ui-control-bg: var(--color-input-focus);
    --ui-control-border: var(--color-input-focus-border);
    outline: none;
  }
  .ui-control:focus-visible {
    outline: none;
  }
  .ui-control[aria-invalid='true'],
  [data-state='error'] > :is(.ui-control, .ui-input-group > .ui-control) {
    --ui-control-bg: var(--color-danger-surface);
  }
  [data-state='warning'] > :is(.ui-control, .ui-input-group > .ui-control) {
    --ui-control-bg: var(--color-warning-surface);
  }
  .ui-control[aria-invalid='true']:hover,
  [data-state='error'] > :is(.ui-control, .ui-input-group > .ui-control):hover,
  [data-state='warning'] > :is(.ui-control, .ui-input-group > .ui-control):hover {
    --ui-control-border: transparent;
  }
  .ui-control:is([aria-invalid='true'], [data-state] *):is(:focus, [aria-expanded='true']) {
    --ui-control-border: var(--color-input-focus-border);
  }
  .ui-control[readonly] {
    --ui-control-bg: var(--color-input-readonly);
    --ui-control-border: transparent;
  }
  .ui-control:disabled,
  .ui-control[aria-disabled='true'] {
    --ui-control-bg: var(--color-disabled-surface);
    --ui-control-border: transparent;
    color: var(--color-disabled-text);
    cursor: not-allowed;
  }
  .ui-field:has(.ui-control:is(:disabled, [aria-disabled='true'])) > .ui-label {
    color: var(--color-disabled-text);
  }
  .ui-control:disabled::placeholder {
    color: var(--color-disabled-text);
  }
  textarea.ui-control {
    min-block-size: 7.5rem;
    resize: vertical;
  }
  /* Native select before a listbox enhances it. The 24px chevron sits at the inline end. */
  select.ui-control:not([multiple]) {
    appearance: none;
    padding-inline-end: calc(var(--ui-field-icon-inset) - var(--border-width));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23494B51' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='m5 9 6.219 5.331c.449.385 1.113.385 1.562 0L19 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: var(--size-icon);
    background-position: right var(--space-5) center;
  }
  select.ui-control:not([multiple]):dir(rtl) {
    background-position: left var(--space-5) center;
  }
  select.ui-control[multiple] {
    padding: var(--space-1);
  }
  select.ui-control[multiple] option {
    padding: var(--space-2) var(--space-3);
  }
  /* Native file picker: a full-height action and filename in one aligned field. */
  .ui-control:where([type='file']) {
    --ui-control-bg: var(--color-surface);
    --ui-control-border: var(--color-border-strong);
    block-size: var(--size-field);
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
  }
  .ui-control::file-selector-button {
    min-block-size: calc(var(--size-field) - 2 * var(--border-width));
    margin: 0;
    margin-inline-end: var(--space-4);
    padding: 0 var(--space-5);
    border: 0;
    border-inline-end: var(--border-width) solid var(--ui-control-border);
    border-radius: 0;
    background: var(--color-action-tint);
    color: var(--color-action);
    font: inherit;
    font-weight: var(--font-weight-medium);
    cursor: inherit;
    transition: background-color var(--motion-fast) var(--motion-easing);
  }
  .ui-control:not(:disabled, [aria-disabled='true'])::file-selector-button:hover {
    background: var(--color-input-hover);
  }
  .ui-control:is(:disabled, [aria-disabled='true'])::file-selector-button {
    background: transparent;
    color: inherit;
  }

  /* Icons inside the box: a leading search icon, trailing calendar, chevron or eye. */
  .ui-input-group {
    position: relative;
    display: flex;
    align-items: center;
  }
  .ui-input-group > .ui-icon {
    position: absolute;
    z-index: 1;
    inline-size: var(--size-icon);
    block-size: var(--size-icon);
    color: var(--color-text-secondary);
    pointer-events: none;
  }
  /* A leading icon is any icon before the control, even after a hidden label. */
  .ui-input-group > .ui-icon:not(.ui-control ~ *) {
    inset-inline-start: var(--ui-field-inline, var(--space-5));
  }
  .ui-input-group > .ui-control ~ .ui-icon {
    inset-inline-end: var(--ui-field-inline, var(--space-5));
  }
  .ui-input-group:has(> .ui-icon:not(.ui-control ~ *)) > .ui-control {
    padding-inline-start: calc(var(--ui-field-icon-inset) - var(--border-width));
  }
  .ui-input-group:has(> .ui-control ~ :is(.ui-icon, .ui-button)) > .ui-control {
    padding-inline-end: calc(var(--ui-field-icon-inset) - var(--border-width));
  }
  /* A trailing icon button, such as the password visibility toggle. */
  .ui-input-group > .ui-control ~ .ui-button {
    --ui-button-fg: var(--color-text-secondary);
    position: absolute;
    z-index: 1;
    --ui-field-action-size: max(
      var(--size-target-min),
      calc(var(--size-icon) + 2 * var(--space-2))
    );
    inset-inline-end: calc(
      var(--ui-field-inline, var(--space-5)) - (var(--ui-field-action-size) - var(--size-icon)) / 2
    );
    inline-size: var(--ui-field-action-size);
    min-block-size: var(--ui-field-action-size);
  }
  .ui-input-group > .ui-control ~ .ui-button .ui-icon {
    inline-size: var(--size-icon);
    block-size: var(--size-icon);
  }
  .ui-input-group:has(.ui-control:disabled) > :is(.ui-icon, .ui-button) {
    color: var(--color-disabled-text);
  }
  /* The browser's clear control on search inputs, drawn as the Figma 24px close icon in the
     trailing icon position (12px after the text, 20px from the edge). */
  .ui-control[type='search']::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    inline-size: var(--size-icon);
    block-size: var(--size-icon);
    margin: 0 0 0 var(--space-3);
    background: var(--color-text-secondary);
    -webkit-mask: var(--ui-glyph-close-large) center / contain no-repeat;
    mask: var(--ui-glyph-close-large) center / contain no-repeat;
    cursor: pointer;
  }
  .ui-control[type='search']:dir(rtl)::-webkit-search-cancel-button {
    margin: 0 var(--space-3) 0 0;
  }
  .ui-control[type='search']::-webkit-search-cancel-button:hover {
    background: var(--color-text);
  }

  /* Messages under the box: help, error, warning, success and loading. */
  .ui-help {
    color: var(--color-text-muted);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
  }
  .ui-error,
  .ui-message {
    --ui-message-color: var(--color-danger);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--ui-message-color);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-caption);
  }
  .ui-error::before,
  .ui-message::before {
    content: '';
    flex: none;
    align-self: flex-start;
    inline-size: var(--size-icon-small);
    block-size: var(--size-icon-small);
    background: currentColor;
    -webkit-mask: var(--ui-message-icon) center / contain no-repeat;
    mask: var(--ui-message-icon) center / contain no-repeat;
  }
  .ui-error,
  .ui-message,
  .ui-message[data-tone='danger'] {
    --ui-message-icon: var(--ui-glyph-close);
  }
  .ui-message[data-tone='warning'] {
    --ui-message-color: var(--color-warning);
    --ui-message-icon: var(--ui-glyph-warning);
  }
  .ui-message[data-tone='success'] {
    --ui-message-color: var(--color-success);
    --ui-message-icon: var(--ui-glyph-check);
  }
  /* Loading: the Figma 16px spinner, sweeping like .ui-spinner. */
  .ui-message[data-tone='loading'] {
    --ui-message-color: var(--color-disabled-text);
    --ui-message-icon: var(--ui-spinner-glyph-small);
  }
  .ui-message[data-tone='loading']::before {
    background: conic-gradient(
      from var(--ui-spinner-angle),
      color-mix(in srgb, currentColor 20%, transparent),
      currentColor
    );
    animation: ui-spinner-sweep 1s linear infinite;
  }
  /* A message row with an end-aligned counter or link, such as “0/200” or “Remind password”. */
  .ui-field__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
  }
  .ui-field__meta > :last-child:not(:first-child) {
    margin-inline-start: auto;
    text-align: end;
  }
  .ui-field__meta a {
    color: var(--color-link);
    text-decoration: none;
  }
  .ui-field__meta a:hover {
    color: var(--color-link);
    text-decoration: underline;
  }
  .ui-counter {
    font-variant-numeric: tabular-nums;
  }

  .ui-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-inline-size: 0;
  }
  .ui-legend {
    margin-block-end: var(--space-3);
    padding: 0;
  }
}

@layer components {
  @media (forced-colors: active) {
    .ui-control {
      border-color: ButtonText;
    }
    .ui-control:focus {
      outline: 2px solid Highlight;
    }
    .ui-error::before,
    .ui-message::before {
      forced-color-adjust: none;
      background: CanvasText;
    }
  }
}
@layer components {
  /* Figma Dropdown: a field-styled trigger and a list panel for List Value (single choice),
     MultiSelect (checkboxes and a count) and Search (typed filter). createListbox() builds it
     from a native <select>, which stays in the form, hidden, as the source of truth. */
  .ui-listbox {
    position: relative;
    min-inline-size: 0;
  }
  .ui-listbox__trigger {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-block: 0;
    padding-inline-end: calc(var(--ui-field-icon-inset, 3.5rem) - var(--border-width));
    text-align: start;
    cursor: pointer;
    touch-action: manipulation;
  }
  /* Figma Arrows & Directions/Down 2, turned up while the list is open. */
  .ui-listbox__trigger::after {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-end: var(--ui-field-inline, var(--space-5));
    margin-block: auto;
    inline-size: var(--size-icon);
    block-size: var(--size-icon);
    pointer-events: none;
    background: var(--color-text-secondary);
    -webkit-mask: var(--ui-glyph-chevron-down) center / contain no-repeat;
    mask: var(--ui-glyph-chevron-down) center / contain no-repeat;
  }
  .ui-listbox__trigger[aria-expanded='true']::after {
    -webkit-mask-image: var(--ui-glyph-chevron-up);
    mask-image: var(--ui-glyph-chevron-up);
  }
  .ui-listbox__trigger:disabled::after {
    background: var(--color-disabled-text);
  }
  /* Only the value follows floating-label padding; the count stays centered in the field. */
  .ui-listbox__value {
    flex: 1;
    padding-block: calc(var(--space-field-block) - var(--border-width));
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* The number of selected options in a multi-select, a Green disc before the chevron. */
  .ui-listbox__count {
    display: inline-grid;
    place-items: center;
    flex: none;
    min-inline-size: 1.25rem;
    block-size: 1.25rem;
    padding-inline: var(--space-1);
    border-radius: var(--radius-pill);
    background: var(--color-action);
    color: var(--color-text-on-action);
    font-size: var(--type-size-12);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .ui-listbox__count[hidden] {
    display: none;
  }
  /* Figma Dropdown panel: 12px below the field, a 1px Light Grey edge, 4px corners and
     Shadow/6px. Five rows show before it scrolls. */
  .ui-listbox__panel {
    position: absolute;
    inset-block-start: calc(100% + var(--space-3));
    inset-inline: 0;
    z-index: 20;
    max-block-size: min(
      calc(5 * var(--size-option) + 2 * var(--border-width)),
      max(0px, calc(var(--ui-listbox-available, 100dvh) - var(--space-3)))
    );
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    border: var(--border-width) solid var(--color-surface-subtle);
    border-radius: var(--radius-4);
    background: var(--color-surface);
    box-shadow: var(--shadow-menu);
    scrollbar-width: thin;
    scrollbar-color: var(--color-neutral-beige) transparent;
  }
  .ui-listbox__panel[data-placement='top'] {
    inset-block: auto calc(100% + var(--space-3));
  }
  .ui-listbox__option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-block-size: var(--size-option);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    color: var(--color-text);
    font-size: var(--font-size-field);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-field);
    cursor: pointer;
  }
  .ui-listbox__option + .ui-listbox__option {
    margin: 0;
  }
  .ui-listbox__label {
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }
  .ui-listbox__option[data-active],
  .ui-listbox__option:hover {
    background: var(--color-action-tint);
  }
  .ui-listbox__option[aria-selected='true'] {
    color: var(--color-action);
  }
  .ui-listbox__option[aria-disabled='true'] {
    color: var(--color-disabled-text);
    background: transparent;
    cursor: not-allowed;
  }
  .ui-listbox__empty {
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-field);
  }
  /* MultiSelect rows carry a Figma checkbox. */
  .ui-listbox--multiple .ui-listbox__option {
    position: relative;
    padding-inline-start: calc(var(--space-4) + var(--size-choice) + var(--space-3));
  }
  .ui-listbox--multiple .ui-listbox__option[aria-selected='true'] {
    color: var(--color-text);
  }
  .ui-listbox--multiple .ui-listbox__option::before,
  .ui-listbox--multiple .ui-listbox__option::after {
    content: '';
    position: absolute;
    inset-inline-start: var(--space-4);
    inset-block-start: calc(50% - var(--size-choice) / 2);
    inline-size: var(--size-choice);
    block-size: var(--size-choice);
  }
  .ui-listbox--multiple .ui-listbox__option::before {
    background: var(--color-surface);
    box-shadow: inset 0 0 0 var(--border-width) var(--color-control-border);
  }
  .ui-listbox--multiple .ui-listbox__option[aria-selected='true']::before {
    background: var(--color-action);
    box-shadow: none;
  }
  .ui-listbox--multiple .ui-listbox__option[aria-selected='true']::after {
    background: var(--color-text-on-action);
    -webkit-mask: var(--ui-glyph-check) center / var(--size-icon-small) no-repeat;
    mask: var(--ui-glyph-check) center / var(--size-icon-small) no-repeat;
  }
  .ui-listbox--multiple .ui-listbox__option[aria-disabled='true']::before {
    background: var(--color-disabled-surface);
    box-shadow: none;
  }
  .ui-listbox--multiple .ui-listbox__option[aria-disabled='true']::after {
    background: var(--color-disabled-text);
  }
  /* Search rows: the typed part in Black, the rest muted. */
  .ui-listbox--search .ui-listbox__option {
    color: var(--color-border-strong);
  }
  .ui-listbox__match {
    background: none;
    color: var(--color-text);
  }
}

@layer components {
  @media (forced-colors: active) {
    .ui-listbox__panel {
      border: 1px solid CanvasText;
    }
    .ui-listbox__option[data-active] {
      outline: 2px solid Highlight;
      outline-offset: -2px;
    }
    .ui-listbox--multiple .ui-listbox__option::before {
      border: 1px solid CanvasText;
    }
    .ui-listbox--multiple .ui-listbox__option[aria-selected='true']::after {
      forced-color-adjust: none;
      background: CanvasText;
    }
  }
}
@layer components {
  /* Selection controls --------------------------------------------------- */
  /* Figma Checkbox, Radiobutton and Toggle: 24px controls with a 1px outline at rest, a 2px focus
     border, Green when on and Dark Olive on hover and focus. Outlines are inset shadows so a
     change of width never moves anything. The label may sit on either side of the control. */
  .ui-choice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-block-size: max(
      var(--size-target-min),
      calc(var(--size-choice) + 2 * var(--space-choice-block))
    );
    padding-block: var(--space-choice-block);
    font-size: var(--font-size-body-2);
    line-height: max(var(--line-height-body-2), var(--size-choice));
    cursor: pointer;
  }
  .ui-choice input {
    --ui-choice-border: var(--color-control-border);
    --ui-choice-border-width: var(--border-width);
    --ui-choice-bg: var(--color-surface);
    --ui-choice-mark: var(--color-text-on-action);
    appearance: none;
    flex: none;
    display: grid;
    place-content: center;
    inline-size: var(--size-choice);
    block-size: var(--size-choice);
    margin: 0;
    border: 0;
    border-radius: var(--radius-none);
    background-color: var(--ui-choice-bg);
    box-shadow: inset 0 0 0 var(--ui-choice-border-width) var(--ui-choice-border);
    color: var(--ui-choice-mark);
    cursor: pointer;
    transition:
      background-color var(--motion-fast) var(--motion-easing),
      box-shadow var(--motion-fast) var(--motion-easing);
  }
  .ui-choice input::before {
    content: '';
    display: block;
    transform: scale(0);
    transition: transform var(--motion-fast) var(--motion-easing);
  }
  .ui-choice input:checked::before {
    transform: scale(1);
  }
  /* Figma 16/User Interface/Check, 1.1px stroke. */
  .ui-choice input[type='checkbox']:not([role='switch'])::before {
    inline-size: var(--size-icon-small);
    block-size: var(--size-icon-small);
    background: currentColor;
    -webkit-mask: var(--ui-glyph-check) center / contain no-repeat;
    mask: var(--ui-glyph-check) center / contain no-repeat;
  }
  .ui-choice input[type='radio'] {
    border-radius: var(--radius-pill);
  }
  .ui-choice input[type='radio']::before {
    inline-size: var(--size-radio-dot);
    block-size: var(--size-radio-dot);
    border-radius: var(--radius-pill);
    background: currentColor;
  }

  /* Off */
  .ui-choice:hover input,
  .ui-choice input:hover {
    --ui-choice-border: var(--color-action);
  }
  .ui-choice input:focus-visible {
    --ui-choice-border: var(--color-focus);
    --ui-choice-border-width: var(--focus-width);
    outline: none;
  }
  .ui-choice input[aria-invalid='true'] {
    --ui-choice-border: var(--color-danger);
  }

  /* On: a checkbox fills; a radio keeps a 1px ring around its dot. */
  .ui-choice input[type='checkbox']:checked {
    --ui-choice-bg: var(--color-action);
    --ui-choice-border: var(--color-action);
  }
  .ui-choice input[type='radio']:checked {
    --ui-choice-border: var(--color-action);
    --ui-choice-mark: var(--color-action);
  }
  .ui-choice:hover input[type='checkbox']:checked,
  .ui-choice input[type='checkbox']:checked:is(:hover, :focus-visible) {
    --ui-choice-bg: var(--color-action-hover);
    --ui-choice-border: var(--color-action-hover);
  }
  .ui-choice input[type='checkbox']:checked:focus-visible {
    --ui-choice-border: var(--color-focus);
  }
  .ui-choice:hover input[type='radio']:checked,
  .ui-choice input[type='radio']:checked:hover {
    --ui-choice-border: var(--color-action-hover);
    --ui-choice-mark: var(--color-action-hover);
  }
  .ui-choice input[type='radio']:checked:focus-visible {
    --ui-choice-border: var(--color-focus);
    --ui-choice-mark: var(--color-action-hover);
  }
  .ui-choice input[type='checkbox'][aria-invalid='true']:checked {
    --ui-choice-bg: var(--color-danger);
    --ui-choice-border: var(--color-danger);
  }
  .ui-choice input[type='radio'][aria-invalid='true']:checked {
    --ui-choice-border: var(--color-danger);
    --ui-choice-mark: var(--color-danger);
  }

  /* Toggle: a 48 × 24 track with a 16px knob, 4px from the ends. */
  .ui-switch input {
    --ui-choice-knob: var(--color-control-border);
    display: block;
    inline-size: var(--size-switch-track);
    block-size: var(--size-choice);
    padding: var(--space-1);
    border-radius: var(--radius-pill);
  }
  .ui-switch input::before {
    inline-size: var(--size-switch-knob);
    block-size: var(--size-switch-knob);
    border-radius: var(--radius-pill);
    background: var(--ui-choice-knob);
    transform: none;
    transition:
      transform var(--motion-fast) var(--motion-easing),
      background-color var(--motion-fast) var(--motion-easing);
  }
  .ui-switch:hover input:not(:checked),
  .ui-switch input:not(:checked):hover {
    --ui-choice-knob: var(--color-action);
  }
  .ui-switch input:focus-visible:not(:checked) {
    --ui-choice-knob: var(--color-control-border);
  }
  .ui-switch input:checked {
    --ui-choice-bg: var(--color-action);
    --ui-choice-border: var(--color-action);
    --ui-choice-knob: var(--color-text-on-action);
  }
  .ui-switch:hover input:checked,
  .ui-switch input:checked:is(:hover, :focus-visible) {
    --ui-choice-bg: var(--color-action-hover);
    --ui-choice-border: var(--color-action-hover);
  }
  .ui-switch input:checked:focus-visible {
    --ui-choice-border: var(--color-focus);
  }
  .ui-switch input:checked::before {
    transform: translateX(
      calc(var(--size-switch-track) - var(--size-switch-knob) - 2 * var(--space-1))
    );
  }
  .ui-switch input:dir(rtl):checked::before {
    transform: translateX(
      calc(-1 * (var(--size-switch-track) - var(--size-switch-knob) - 2 * var(--space-1)))
    );
  }

  /* Disabled: Muted Green with a Beige mark, dot or knob. The repeated class outranks the
     checked, hover and error states above. */
  .ui-choice.ui-choice.ui-choice input:disabled {
    --ui-choice-bg: var(--color-disabled-surface);
    --ui-choice-border: transparent;
    --ui-choice-mark: var(--color-disabled-text);
    --ui-choice-knob: var(--color-disabled-text);
    cursor: not-allowed;
  }
  .ui-choice:has(input:disabled) {
    color: var(--color-disabled-text);
    cursor: not-allowed;
  }
}

@layer components {
  @media (forced-colors: active) {
    .ui-choice input {
      appearance: auto;
      inline-size: var(--size-choice);
      padding: 0;
      box-shadow: none;
    }
    .ui-switch input {
      appearance: auto;
      inline-size: var(--size-choice);
      padding: 0;
    }
    .ui-choice input::before {
      display: none;
    }
  }
}
@layer components {
  /* Surfaces ------------------------------------------------------------- */
  /* Not in Figma. Content sits directly on the white page; a card lifts a block off it with the
     Figma Shadow/4px. Subtle cards sit on Light Grey instead, and the brand card uses the
     Figma cover gradient. */
  .ui-card {
    padding: var(--space-inset);
    background: var(--color-surface);
    box-shadow: var(--shadow-raised);
  }
  :where(.ui-card) :where(h2, h3) {
    font-size: var(--font-size-section-title);
    line-height: var(--line-height-section-title);
  }
  .ui-card--subtle {
    background: var(--color-surface-subtle);
    box-shadow: none;
  }
  .ui-card--inverse {
    --color-text: var(--color-text-inverse);
    --color-text-heading: var(--color-text-inverse);
    --color-text-muted: color-mix(in srgb, var(--color-neutral-white) 80%, transparent);
    --color-link: var(--color-neutral-white);
    --color-link-hover: var(--color-primary-light-sage);
    --color-focus: var(--color-neutral-white);
    background: var(--gradient-brand);
    box-shadow: none;
    color: var(--color-text);
  }
}

@layer components {
  @media (forced-colors: active) {
    .ui-card {
      border: 1px solid CanvasText;
    }
  }
}
@layer components {
  [data-tone='success'] {
    --ui-tone: var(--color-success);
    --ui-tone-accent: var(--color-success-accent);
    --ui-tone-surface: var(--color-success-surface);
  }
  [data-tone='warning'] {
    --ui-tone: var(--color-warning);
    --ui-tone-accent: var(--color-warning-accent);
    --ui-tone-surface: var(--color-warning-surface);
  }
  [data-tone='danger'] {
    --ui-tone: var(--color-danger-strong);
    --ui-tone-accent: var(--color-danger-accent);
    --ui-tone-surface: var(--color-danger-surface);
  }
  [data-tone='info'] {
    --ui-tone: var(--color-info);
    --ui-tone-accent: var(--color-info-accent);
    --ui-tone-surface: var(--color-info-surface);
  }
}
@layer components {
  /* Not in Figma: a square tag in the caption style, on Light Sage or a tone surface. */
  .ui-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    inline-size: fit-content;
    min-block-size: var(--size-choice);
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-caption);
    background: var(--ui-tone-surface, var(--color-surface-muted));
    color: var(--ui-tone, var(--color-text));
  }
}

@layer components {
  @media (forced-colors: active) {
    .ui-badge {
      border: 1px solid CanvasText;
    }
  }
}
@layer components {
  .ui-alert:empty {
    display: none;
  }
  /* Not in Figma: a tone surface with the tone's icon, like the Figma field messages. */
  .ui-alert {
    display: flex;
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--ui-tone-surface, var(--color-surface-subtle));
    color: var(--color-text);
  }
  .ui-alert > .ui-icon {
    color: var(--ui-tone-accent, var(--color-text-secondary));
  }
  .ui-alert > :not(.ui-icon) {
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }
  .ui-alert strong {
    color: var(--ui-tone, var(--color-text-heading));
  }
  .ui-alert p + p {
    margin-block-start: var(--space-1);
  }
}

@layer components {
  @media (forced-colors: active) {
    .ui-alert {
      border: 1px solid CanvasText;
    }
  }
}
@layer components {
  /* Tables --------------------------------------------------------------- */
  /* Not in Figma. Tables sit on the page; Figma divider lines give them structure, and the
     header uses the uppercase label language in the caption size. */
  .ui-table-region {
    inline-size: 100%;
    overflow-x: auto;
  }
  .ui-table {
    inline-size: 100%;
    text-align: start;
    font-size: var(--font-size-body-2);
    line-height: var(--line-height-body-2);
  }
  .ui-table caption {
    padding: var(--space-cell-block) var(--space-cell-inline);
    text-align: start;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-heading);
    border-block-end: var(--border-width) solid var(--color-border);
  }
  .ui-table :is(th, td) {
    padding: var(--space-cell-block) var(--space-cell-inline);
    border-block-end: var(--border-width) solid var(--color-border);
    text-align: start;
    vertical-align: middle;
  }
  .ui-table thead th {
    border-block-end: var(--border-width) solid var(--color-border-strong);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-caption);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-text-secondary);
  }
  .ui-table tbody th {
    font-weight: var(--font-weight-medium);
  }
  .ui-table tfoot {
    font-weight: var(--font-weight-medium);
  }
  .ui-table tfoot :is(th, td) {
    border-block-end: 0;
    border-block-start: var(--border-width) solid var(--color-border-strong);
  }
  .ui-table .ui-table__numeric {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .ui-table--compact :is(th, td) {
    padding-block: var(--space-2);
  }
  .ui-table--striped tbody tr:nth-child(even) {
    background: var(--color-surface-subtle);
  }
  .ui-sort {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--size-target-min);
    gap: var(--space-2);
    background: transparent;
    border: 0;
    padding: var(--space-2);
    margin: calc(-1 * var(--space-2));
    border-radius: var(--radius-none);
    cursor: pointer;
    transition: background-color var(--motion-interaction-duration) var(--motion-interaction-easing);
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
  }
  .ui-sort:is(:hover, :focus-visible) {
    background: var(--color-action-tint);
  }
  .ui-table__primary {
    font-weight: var(--font-weight-medium);
  }
  .ui-table__meta {
    display: block;
    margin-block-start: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-caption);
  }
  .ui-table__actions {
    white-space: nowrap;
  }
  .ui-table__identifier {
    display: block;
    max-inline-size: 18ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-family-mono);
    font-size: var(--font-size-caption);
  }
  .ui-table__date {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .ui-sort .ui-icon {
    inline-size: var(--size-icon-small);
    block-size: var(--size-icon-small);
  }
  .ui-table--records {
    min-inline-size: 44rem;
  }
  .ui-table--records :is(th, td) {
    padding: var(--space-cell-block) var(--space-3);
  }
  .ui-table--records td {
    max-inline-size: 28rem;
    overflow-wrap: anywhere;
  }
  .ui-table--records td:has(> .ui-person) {
    min-inline-size: 14rem;
    overflow-wrap: break-word;
  }
  .ui-table--records :is(.ui-button, .ui-badge) {
    white-space: nowrap;
  }
  .ui-table--records a {
    transition:
      background-color var(--motion-interaction-duration) var(--motion-interaction-easing),
      color var(--motion-interaction-duration) var(--motion-interaction-easing);
    color: var(--color-text);
    text-decoration: none;
  }
  .ui-table--records a:is(:hover, :focus-visible) {
    color: var(--color-link);
    background: var(--color-action-tint);
  }
  .ui-table--records td small {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--font-size-caption);
  }
  @media (max-width: 43.75rem) {
    .ui-table--records tr[data-ui-row-link]:is(:hover, :focus-within) > :is(th, td) {
      background: var(--color-action-tint);
    }
  }
}
@layer components {
  /* Secondary navigation uses the compact label tier, natural casing and untracked text.
     Keep the Figma slash and green current item; separate the links so each remains readable
     and operable when a path wraps or the user enlarges the text. */
  .ui-breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    margin: 0;
    padding: 0;
  }
  .ui-breadcrumb li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-inline-size: 0;
    max-inline-size: 100%;
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-label-compact);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-label-compact);
  }
  .ui-breadcrumb li + li::before {
    content: '/';
    flex: none;
    inline-size: 0.75rem;
    font-weight: var(--font-weight-regular);
    text-align: center;
  }
  .ui-breadcrumb :is(a, [aria-current], [aria-disabled='true']) {
    display: inline-flex;
    align-items: center;
    min-inline-size: 0;
    min-block-size: max(var(--size-control-small), var(--size-target-min));
    padding-block: var(--space-1);
    overflow-wrap: anywhere;
  }
  .ui-breadcrumb a {
    min-inline-size: var(--size-target-min);
    color: inherit;
    text-decoration: none;
  }
  .ui-breadcrumb a:is(:hover, :focus-visible) {
    text-decoration: underline;
    color: var(--color-link);
  }
  .ui-breadcrumb a:focus-visible {
    border-radius: var(--radius-2);
    outline: var(--focus-width) solid var(--color-focus);
    outline-offset: var(--focus-offset);
  }
  .ui-breadcrumb [aria-current] {
    color: var(--color-link);
  }
  .ui-breadcrumb li:has(> [aria-disabled='true']) {
    color: var(--color-disabled-text);
  }
  .ui-breadcrumb [aria-disabled='true'] {
    pointer-events: none;
  }
}

@layer components {
  @media (forced-colors: active) {
    .ui-breadcrumb a:focus-visible {
      outline-color: Highlight;
    }
  }
}
@layer components {
  /* Figma Pagination, adapted to 32px Medium / 48px Normal pages and untracked numbers.
     Touch targets remain at least 44px even in an explicit compact region.
     Black at rest; Light Grey with a 1px Medium Grey edge on hover; Light Grey with a 2px
     D_Grey edge on focus; Green with white numbers when current; a Green ellipsis for skipped
     pages. Previous and next are Small secondary icon buttons, 12px from the pages. */
  .ui-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-6);
  }
  .ui-pagination__summary {
    color: var(--color-text-muted);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
  }
  .ui-pagination ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
  }
  .ui-pagination li {
    margin: 0;
  }
  .ui-pagination li:first-child:not(.ui-pagination__page) {
    margin-inline-end: 6px;
  }
  .ui-pagination li:last-child:not(.ui-pagination__page) {
    margin-inline-start: 6px;
  }
  .ui-pagination :is(a, button) {
    --ui-page-bg: transparent;
    --ui-page-border: transparent;
    --ui-page-border-width: 0px;
    display: inline-grid;
    place-items: center;
    min-inline-size: max(var(--size-pagination-item), var(--size-target-min));
    min-block-size: max(var(--size-pagination-item), var(--size-target-min));
    padding-inline: var(--space-1);
    border: 0;
    background: var(--ui-page-bg);
    box-shadow: inset 0 0 0 var(--ui-page-border-width) var(--ui-page-border);
    color: var(--color-text);
    font-size: var(--font-size-label-compact);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-label-compact);
    letter-spacing: normal;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--motion-interaction-duration) var(--motion-interaction-easing);
  }
  .ui-pagination :is(a, button):not(:disabled, [aria-disabled='true']):hover {
    --ui-page-bg: var(--color-action-tint);
    --ui-page-border: var(--color-border-strong);
    --ui-page-border-width: var(--border-width);
    color: var(--color-text);
  }
  .ui-pagination :is(a, button):focus-visible {
    --ui-page-bg: var(--color-action-tint);
    --ui-page-border: var(--color-focus);
    --ui-page-border-width: var(--focus-width);
    outline: none;
  }
  .ui-pagination [aria-current='page'],
  .ui-pagination [aria-current='page']:not(:disabled, [aria-disabled='true']):hover {
    --ui-page-bg: var(--color-action);
    --ui-page-border-width: 0px;
    color: var(--color-text-on-action);
  }
  .ui-pagination [aria-current='page']:focus-visible {
    --ui-page-border: var(--color-focus-strong);
    --ui-page-border-width: var(--focus-width);
  }
  .ui-pagination__gap {
    display: inline-grid;
    place-items: center;
    min-inline-size: max(var(--size-pagination-item), var(--size-target-min));
    min-block-size: max(var(--size-pagination-item), var(--size-target-min));
    color: var(--color-action);
    font-size: var(--font-size-label-compact);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-label-compact);
    letter-spacing: normal;
  }
  /* Previous and next: the Figma Small secondary icon button with a 16px chevron. */
  .ui-pagination :is(a, button):has(> .ui-icon) {
    --ui-icon-small: 1;
    padding: 0;
    color: var(--color-action);
    text-indent: 0;
  }
  .ui-pagination
    :is(a, button):not(:disabled, [aria-disabled='true']):has(> .ui-icon):is(:hover, :active) {
    --ui-page-bg: var(--color-action-subtle);
    --ui-page-border-width: 0px;
    color: var(--color-action);
  }
  .ui-pagination :is(a, button):not(:disabled, [aria-disabled='true']):has(> .ui-icon):active {
    --ui-page-border: var(--color-action);
    --ui-page-border-width: var(--border-width);
  }
  .ui-pagination
    :is(a, button):not(:disabled, [aria-disabled='true']):has(> .ui-icon):focus-visible {
    --ui-page-bg: var(--color-action-subtle);
    --ui-page-border: var(--color-focus-strong);
  }
  .ui-pagination .ui-icon {
    inline-size: var(--size-icon-small);
    block-size: var(--size-icon-small);
  }
  /* Disabled pagination stays unfilled and outranks hover, active and current-page states. */
  .ui-pagination :is(a, button):is(:disabled, [aria-disabled='true']) {
    --ui-page-bg: transparent;
    --ui-page-border-width: 0px;
    color: var(--color-disabled-text);
    cursor: not-allowed;
  }
}

@layer components {
  @media (max-width: 30rem) {
    .ui-pagination__gap,
    .ui-pagination__page:not(:has([aria-current='page'])) {
      display: none;
    }
  }
  @media (forced-colors: active) {
    .ui-pagination :is(a, button):focus-visible {
      outline: 2px solid Highlight;
    }
  }
}
@layer components {
  /* Navigation follows the size mode. The Figma label and rule remain, with quieter tracking,
     balanced block padding, and a distinct selected rule. A tab row scrolls inside its parent. */
  .ui-tabs {
    display: flex;
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: var(--space-4);
    /* Room for the focus box, which the scroll container would otherwise clip. */
    margin: calc(-1 * var(--focus-width));
    padding: var(--focus-width);
    scrollbar-width: none;
  }
  .ui-tab {
    --ui-tab-line: var(--color-border);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    flex: none;
    min-block-size: max(var(--size-navigation), var(--size-target-min));
    padding: var(--space-2) var(--space-navigation-inline);
    border: 0;
    background: transparent;
    box-shadow: inset 0 calc(-1 * var(--border-width)) 0 var(--ui-tab-line);
    color: var(--color-text-secondary);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-label);
    letter-spacing: var(--tracking-navigation);
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition:
      color var(--motion-interaction-duration) var(--motion-interaction-easing),
      box-shadow var(--motion-interaction-duration) var(--motion-interaction-easing);
  }
  .ui-tab:hover,
  .ui-tab:focus-visible,
  .ui-tab[aria-selected='true'],
  .ui-tab[aria-current='page'],
  .ui-tab[aria-pressed='true'] {
    --ui-tab-line: var(--color-action);
    color: var(--color-action);
    text-decoration: none;
  }
  .ui-tab:focus-visible {
    border-radius: var(--radius-2);
    outline: var(--focus-width) solid var(--color-focus);
    outline-offset: 0;
  }
  .ui-tab:is([aria-selected='true'], [aria-current='page'], [aria-pressed='true']) {
    box-shadow: inset 0 -2px 0 var(--ui-tab-line);
  }
  .ui-tab > .ui-icon {
    --ui-icon-small: var(--icon-control-small);
    inline-size: var(--size-control-icon);
    block-size: var(--size-control-icon);
  }
  .ui-tab__count {
    align-self: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-caption);
    letter-spacing: normal;
    text-indent: 0;
    font-variant-numeric: tabular-nums;
  }
  .ui-tab:is(:disabled, [aria-disabled='true']) {
    --ui-tab-line: var(--color-border);
    color: var(--color-disabled-text);
    cursor: not-allowed;
  }
  .ui-tabpanel {
    padding-block: var(--space-panel-gap);
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }
  :where(.ui-tabpanel) :where(h2, h3) {
    font-size: var(--font-size-section-title);
    line-height: var(--line-height-section-title);
  }
}

@layer components {
  @media (forced-colors: active) {
    .ui-tab[aria-selected='true'] {
      border-block-end: 2px solid Highlight;
    }
    .ui-tab:focus-visible {
      outline-color: Highlight;
    }
  }
}
@layer components {
  /* Not in Figma: rows separated by the Figma divider line, with a 16px plus that turns to a
     cross when open. */
  .ui-disclosure {
    border-block-end: var(--border-width) solid var(--color-border);
  }
  .ui-disclosure summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-block-size: max(var(--size-navigation), var(--size-target-min));
    padding-block: var(--space-cell-block);
    list-style: none;
    cursor: pointer;
    color: var(--color-text-heading);
    font-size: var(--font-size-body-2);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-body-2);
  }
  .ui-disclosure summary::-webkit-details-marker {
    display: none;
  }
  .ui-disclosure summary::after {
    content: '';
    flex: none;
    inline-size: 0.75rem;
    block-size: 0.75rem;
    background:
      linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
      linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
    transition: transform var(--motion-fast) var(--motion-easing);
  }
  .ui-disclosure[open] summary::after {
    transform: rotate(45deg);
  }
  .ui-disclosure summary:hover {
    color: var(--color-action);
  }
  .ui-disclosure > :not(summary) {
    margin-block: 0 var(--space-4);
  }
}
@layer components {
  /* Not in Figma: a Green bar on a Light Sage track. */
  .ui-progress {
    appearance: none;
    inline-size: 100%;
    block-size: var(--space-2);
    border: 0;
    background: var(--color-surface-muted);
    color: var(--color-action);
  }
  .ui-progress::-webkit-progress-bar {
    background: var(--color-surface-muted);
  }
  .ui-progress::-webkit-progress-value {
    background: var(--color-action);
  }
  .ui-progress::-moz-progress-bar {
    background: var(--color-action);
  }
}
@layer components {
  /* Not in Figma: interface-sized title, readable body, and a separate action area. */
  .ui-dialog {
    inline-size: min(34rem, calc(100% - var(--space-8)));
    max-inline-size: calc(100% - var(--space-8));
    max-block-size: calc(100dvh - var(--space-8));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: min(var(--space-inset), 5vw);
    border: 0;
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-menu);
    font-size: var(--font-size-body-2);
    line-height: var(--line-height-body-2);
    overflow-wrap: anywhere;
  }
  .ui-dialog :where(h1, h2, .ui-dialog__title) {
    font-size: var(--font-size-dialog-title);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-dialog-title);
    text-wrap: pretty;
  }
  .ui-dialog__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
  }
  .ui-dialog__body {
    display: grid;
    gap: var(--space-panel-gap);
    min-inline-size: 0;
  }
  .ui-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-block-start: var(--space-6);
  }
  .ui-dialog__actions > .ui-button {
    min-inline-size: 0;
    max-inline-size: 100%;
  }
  .ui-dialog :where(.l-stack, .ui-dialog__body) > .ui-dialog__actions {
    margin-block-start: var(--space-2);
  }
  @media (max-width: 36rem) {
    .ui-dialog__actions {
      flex-direction: column;
      align-items: stretch;
    }
    .ui-dialog__actions > .ui-button {
      inline-size: 100%;
    }
  }
  .ui-dialog::backdrop {
    background: rgb(31 31 33 / 50%);
  }
}

@layer components {
  @media (forced-colors: active) {
    .ui-dialog {
      border: 1px solid CanvasText;
    }
  }
}
@layer components {
  /* Not in Figma: initials in Dark Olive on Muted Green, at the Small and Medium control sizes. */
  .ui-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: var(--size-avatar);
    block-size: var(--size-avatar);
    border-radius: 50%;
    color: var(--color-primary-dark-olive);
    background: var(--color-primary-muted-green);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-bold);
    line-height: 1;
  }
  .ui-avatar--large {
    inline-size: var(--size-avatar-large);
    block-size: var(--size-avatar-large);
    font-size: var(--type-size-16);
  }
  .ui-person {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text);
    text-decoration: none;
  }
  .ui-person strong {
    display: block;
    font-size: var(--font-size-body-3);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-body-3);
  }
  .ui-person small {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--font-size-caption);
  }
}
@layer components {
  /* A disclosure menu. The panel follows the Figma dropdown list: square, white, Shadow/8px,
     48px rows of 16px text, Light Grey on hover. */
  .ui-menu {
    position: relative;
  }
  .ui-menu > summary {
    list-style: none;
    cursor: pointer;
  }
  .ui-menu > summary::-webkit-details-marker {
    display: none;
  }
  .ui-menu__panel {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-end: 0;
    z-index: 10;
    inline-size: 15rem;
    max-inline-size: calc(100vw - var(--space-6));
    max-block-size: 70dvh;
    overflow-y: auto;
    padding: 0;
    border: 0;
    border-radius: var(--radius-none);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-menu);
    --color-focus: var(--color-neutral-dark-grey);
  }
  .ui-menu__content {
    padding: var(--space-4);
  }
  .ui-menu__content h2 {
    margin-block-end: var(--space-4);
    font-size: var(--font-size-section-title);
    line-height: var(--line-height-section-title);
  }
  .ui-menu__content p {
    font-size: var(--font-size-body-2);
  }
  .ui-menu__content small {
    color: var(--color-text-muted);
    font-size: var(--font-size-caption);
  }
  .ui-menu__action {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    inline-size: 100%;
    min-block-size: var(--size-option);
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-radius: var(--radius-none);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: var(--font-size-body-2);
    line-height: var(--line-height-body-2);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition:
      background-color var(--motion-interaction-duration) var(--motion-interaction-easing),
      color var(--motion-interaction-duration) var(--motion-interaction-easing);
  }
  .ui-menu__action:is(:hover, :focus-visible) {
    background: var(--color-action-tint);
    color: var(--color-text);
  }
  .ui-menu__action:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 var(--focus-width) var(--color-focus);
  }
  .ui-menu__action[aria-current='page'] {
    color: var(--color-action);
  }
  .ui-menu__action:is(:disabled, [aria-disabled='true']) {
    color: var(--color-disabled-text);
    background: transparent;
    cursor: not-allowed;
  }
  .ui-menu__action > .ui-icon {
    inline-size: var(--size-icon);
    block-size: var(--size-icon);
  }
  .ui-menu__action > .ui-icon:last-child {
    margin-inline-start: auto;
  }
  .ui-account {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-inline-size: var(--size-control-medium);
    min-block-size: var(--size-control-medium);
    padding-inline: var(--space-2);
    background: transparent;
    color: inherit;
    border: 0;
    border-radius: var(--radius-none);
    text-align: start;
  }
  .ui-account__identity strong {
    display: block;
    font-size: var(--font-size-body-3);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-body-3);
  }
  .ui-account__identity small {
    color: inherit;
    display: block;
    font-size: var(--font-size-caption);
    opacity: 0.8;
  }
  .ui-account__chevron {
    inline-size: var(--size-icon-small);
    transform: rotate(90deg);
    transition: transform var(--motion-interaction-duration) var(--motion-interaction-easing);
  }
  .ui-menu[open] .ui-account__chevron {
    transform: rotate(-90deg);
  }
  @media (forced-colors: active) {
    .ui-menu__action:is(:hover, :focus-visible) {
      outline: 1px solid Highlight;
    }
  }
}
@layer components {
  .ui-surface-link,
  .ui-text-link,
  [data-ui-row-link] {
    cursor: pointer;
  }
  .ui-surface-link {
    display: block;
    color: var(--color-text);
    text-decoration: none;
  }
  .ui-text-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    color: var(--color-link);
    text-decoration: none;
  }
  .ui-surface-link,
  .ui-text-link,
  [data-ui-row-link]:not(tr),
  [data-ui-row-link] > :is(th, td) {
    transition:
      background-color var(--motion-interaction-duration) var(--motion-interaction-easing),
      color var(--motion-interaction-duration) var(--motion-interaction-easing);
  }
  :is(.ui-surface-link, .ui-text-link, [data-ui-row-link]:not(tr)):is(
    :hover,
    :focus-visible,
    :focus-within
  ),
  tr[data-ui-row-link]:is(:hover, :focus-within) > :is(th, td) {
    background: var(--color-action-tint);
    color: var(--color-text);
  }
  @media (forced-colors: active) {
    :is(.ui-surface-link, .ui-text-link, [data-ui-row-link]):hover {
      outline: 1px solid Highlight;
    }
  }
}
@layer components {
  /* Not in Figma: a Dark Olive note with the Figma Shadow/8px. */
  .ui-toast {
    position: fixed;
    z-index: 100;
    inset-inline-end: var(--space-5);
    inset-block-end: var(--space-5);
    max-inline-size: min(28rem, calc(100vw - var(--space-10)));
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface-inverse);
    color: var(--color-text-inverse);
    font-size: var(--font-size-body-2);
    line-height: var(--line-height-body-2);
    box-shadow: var(--shadow-menu);
  }
  .ui-toast[data-tone='danger'] {
    background: var(--color-danger);
    color: var(--color-text-on-action);
  }
}
@layer components {
  .ui-empty-state {
    display: grid;
    justify-items: center;
    gap: var(--space-4);
    padding: var(--space-12) var(--space-6);
    text-align: center;
  }
  .ui-empty-state > .ui-icon {
    inline-size: var(--space-8);
    block-size: var(--space-8);
    color: var(--color-text-muted);
  }
  .ui-empty-state :is(h2, h3) {
    font-size: var(--font-size-section-title);
    line-height: var(--line-height-section-title);
  }
  .ui-empty-state p {
    color: var(--color-text-muted);
    max-inline-size: 40ch;
  }
}

@layer reset, tokens, base, layout, components, patterns, utilities, app;
@layer patterns {
  .ui-shell {
    min-block-size: 100dvh;
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
  }
  .ui-shell__sidebar {
    --color-focus: var(--color-neutral-white);
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-5);
    background: var(--color-surface-inverse);
    color: var(--color-text-inverse);
  }
  .ui-shell__brand {
    display: block;
    color: inherit;
    text-decoration: none;
  }
  .ui-shell__brand img {
    inline-size: 100%;
    max-inline-size: 13rem;
    block-size: auto;
  }
  .ui-shell__title {
    margin-block-start: var(--space-4);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }
  .ui-shell__nav {
    display: grid;
    gap: var(--space-2);
  }
  .ui-shell__nav a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-inverse);
    text-decoration: none;
    border-inline-start: var(--focus-width) solid transparent;
  }
  .ui-shell__nav a:hover,
  .ui-shell__nav a[aria-current='page'] {
    color: var(--color-text-inverse);
    background: var(--color-primary-olive-green);
    border-inline-start-color: var(--color-primary-light-green);
  }
  .ui-shell__account {
    margin-block-start: auto;
    display: grid;
    gap: var(--space-3);
    padding-block-start: var(--space-6);
    border-block-start: var(--border-width) solid var(--color-primary-olive-green);
  }
  .ui-shell__body {
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
  }
  .ui-shell__main {
    flex: 1;
    inline-size: 100%;
    max-inline-size: calc(var(--size-container) + 2 * var(--space-10));
    margin-inline: auto;
    padding: var(--space-8) var(--space-10);
  }
  .ui-shell__footer {
    padding: var(--space-4) var(--space-10);
    color: var(--color-text-muted);
    font-size: var(--font-size-caption);
  }
  .ui-shell__toggle {
    display: none;
  }
  .ui-skip-link {
    position: fixed;
    inset-block-start: var(--space-2);
    inset-inline-start: var(--space-2);
    z-index: 100;
    padding: var(--space-3);
    background: var(--color-surface);
    color: var(--color-text);
    transform: translateY(-200%);
  }
  .ui-skip-link:focus {
    transform: none;
  }
  @media (max-width: 60rem) {
    .ui-shell {
      grid-template-columns: 12rem minmax(0, 1fr);
    }
    .ui-shell__main {
      padding: var(--space-6);
    }
  }
  @media (max-width: 44rem) {
    .ui-shell {
      display: block;
    }
    .ui-shell__sidebar {
      padding: var(--space-4);
      gap: var(--space-4);
    }
    .ui-shell__brand img {
      max-inline-size: 10rem;
    }
    .ui-shell__toggle {
      display: inline-flex;
      align-self: flex-start;
    }
    .ui-shell__nav[data-collapsed],
    .ui-shell__account[data-collapsed] {
      display: none;
    }
    .ui-shell__main,
    .ui-shell__footer {
      padding: var(--space-5);
    }
  }
}
@layer patterns {
  .ui-auth {
    min-block-size: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .ui-auth__visual {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-10);
    overflow: hidden;
    background: var(--gradient-brand);
    color: var(--color-text-inverse);
  }
  .ui-auth__image {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    opacity: 0.45;
  }
  .ui-auth__visual > :not(.ui-auth__image) {
    position: relative;
  }
  .ui-auth__logo {
    inline-size: min(18rem, 100%);
    block-size: auto;
  }
  .ui-auth__headline {
    font-size: var(--font-size-headline-1);
    line-height: var(--line-height-headline-1);
    font-weight: var(--font-weight-extrabold);
    color: inherit;
    max-inline-size: 12ch;
  }
  .ui-auth__content {
    display: grid;
    align-content: center;
    padding: var(--space-10);
  }
  .ui-auth__form {
    inline-size: 100%;
    max-inline-size: 28rem;
    margin-inline: auto;
  }
  .ui-auth__form > * + * {
    margin-block-start: var(--space-5);
  }
  @media (max-width: 44rem) {
    .ui-auth {
      display: block;
    }
    .ui-auth__visual {
      min-block-size: 16rem;
      padding: var(--space-6);
    }
    .ui-auth__headline {
      margin-block: var(--space-6) 0;
    }
    .ui-auth__content {
      padding: var(--space-6);
    }
  }
}
@layer patterns {
  .ui-banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: end;
    min-block-size: 15rem;
    padding: var(--space-8);
    background: var(--color-surface-inverse);
    color: var(--color-text-inverse);
  }
  .ui-banner__image {
    position: absolute;
    z-index: -2;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .ui-banner::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(90deg, rgb(51 65 59 / 0.92), rgb(51 65 59 / 0.5));
  }
  .ui-banner:dir(rtl)::before {
    transform: scaleX(-1);
  }
  .ui-banner h1,
  .ui-banner p {
    color: inherit;
  }
  .ui-banner p {
    max-inline-size: 45ch;
  }
  @media (max-width: 44rem) {
    .ui-banner {
      min-block-size: 12rem;
      padding: var(--space-5);
    }
  }
}
@layer patterns {
  .ui-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: var(--space-4);
  }
  .ui-metric {
    display: grid;
    align-content: start;
    min-inline-size: 0;
    overflow-wrap: anywhere;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-3);
    border-block-end: var(--border-width) solid var(--color-border);
    text-decoration: none;
    color: var(--color-text);
    transition: background-color var(--motion-interaction-duration) var(--motion-interaction-easing);
  }
  .ui-metric:is(:hover, :focus-visible) {
    background: var(--color-action-tint);
    color: var(--color-text);
  }
  .ui-metric__value {
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-title);
    color: var(--color-text-heading);
    font-variant-numeric: tabular-nums;
  }
  .ui-metric__label {
    font-size: var(--font-size-body-3);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-body-3);
  }
  .ui-metric__note {
    font-size: var(--font-size-caption);
    color: var(--color-text-muted);
  }
}
@layer patterns {
  /* Fixed application chrome. Content and actions are supplied by the host. */
  .ui-shell--workspace {
    --ui-shell-header-height: var(--size-header);
    --ui-shell-nav-width: 15rem;
    --ui-shell-gutter: clamp(1.25rem, 3.2vw, 3.5rem);
    grid-template-columns: var(--ui-shell-nav-width) minmax(0, 1fr);
    padding-block-start: var(--ui-shell-header-height);
    background: var(--color-background);
  }
  html:has(.ui-shell--workspace) {
    scroll-padding-block-start: calc(4rem + var(--space-4));
  }
  .ui-shell--workspace .ui-shell__toggle {
    display: none;
  }
  /* An optional second glyph replaces the menu glyph while navigation is open. */
  .ui-shell__toggle[aria-expanded='true'] > .ui-icon:not(.ui-shell__toggle-close),
  .ui-shell__toggle:not([aria-expanded='true']) > .ui-shell__toggle-close {
    display: none;
  }
  .ui-shell__header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: var(--ui-shell-nav-width) minmax(0, 1fr) auto;
    align-items: center;
    block-size: var(--ui-shell-header-height);
    padding-inline-end: var(--ui-shell-gutter);
    background: var(--color-surface-inverse);
    color: var(--color-text-inverse);
    --color-focus: var(--color-neutral-white);
  }
  .ui-shell__header .ui-shell__brand {
    display: flex;
    align-items: center;
    inline-size: fit-content;
    min-block-size: var(--size-navigation);
    padding-inline: var(--space-6);
    color: inherit;
    transition: background-color var(--motion-interaction-duration) var(--motion-interaction-easing);
  }
  .ui-shell__header .ui-shell__brand:hover {
    background: var(--color-primary-olive-green);
  }
  .ui-shell__header .ui-shell__brand img {
    inline-size: auto;
    block-size: var(--size-brand-mark);
  }
  .ui-shell__app-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    min-inline-size: 0;
    padding-inline: var(--ui-shell-gutter);
  }
  .ui-shell__app-name {
    font-size: var(--type-size-14);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-16);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }
  .ui-shell__version {
    padding: var(--space-1) var(--space-2);
    color: var(--color-text-inverse);
    background: var(--color-primary-olive-green);
    font-size: var(--font-size-caption);
    font-family: var(--font-family-mono);
  }
  .ui-shell__header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    block-size: 100%;
  }
  .ui-shell__header .ui-icon-button {
    color: inherit;
  }
  .ui-shell__header .ui-icon-button:is(:hover, :active, :focus-visible) {
    background: var(--color-primary-olive-green);
  }
  .ui-shell__header .ui-icon-button:focus-visible {
    box-shadow: inset 0 0 0 var(--focus-width) var(--color-focus);
  }
  .ui-shell--workspace .ui-shell__sidebar {
    position: fixed;
    inset-block: var(--ui-shell-header-height) 0;
    inset-inline-start: 0;
    inline-size: var(--ui-shell-nav-width);
    padding: var(--space-6);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: transparent;
    color: var(--color-text);
    --color-focus: var(--color-neutral-dark-grey);
  }
  /* Navigation follows the documentation sidebar: Body 2 rows at 40px, uppercase group
     labels, and a start-edge bar on the current page. It sits on the page surface. */
  .ui-shell--workspace .ui-shell__nav {
    --ui-shell-nav-row: max(2.5rem, var(--size-target-min));
    --ui-shell-nav-inset: var(--space-3);
    gap: 0;
    align-content: start;
  }
  .ui-shell__nav-label {
    grid-column: 1 / -1;
    padding-block: var(--space-6) var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-caption);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }
  .ui-shell__nav-label:first-child {
    padding-block-start: 0;
  }
  .ui-shell--workspace .ui-shell__nav a {
    gap: var(--space-3);
    min-block-size: var(--ui-shell-nav-row);
    margin-inline: calc(-1 * var(--ui-shell-nav-inset));
    padding: var(--space-2) var(--ui-shell-nav-inset);
    padding-inline-start: calc(var(--ui-shell-nav-inset) - var(--focus-width));
    border: 0;
    border-inline-start: var(--focus-width) solid transparent;
    background: transparent;
    color: var(--color-text);
    font-size: var(--font-size-body-2);
    line-height: var(--line-height-body-2);
    transition:
      background-color var(--motion-interaction-duration) var(--motion-interaction-easing),
      color var(--motion-interaction-duration) var(--motion-interaction-easing);
  }
  .ui-shell--workspace .ui-shell__nav a:is(:hover, :focus-visible) {
    color: var(--color-text);
    background: var(--color-action-tint);
  }
  .ui-shell--workspace .ui-shell__nav a[aria-current='page'] {
    color: var(--color-action-hover);
    font-weight: var(--font-weight-medium);
    background: var(--color-action-tint);
    border-inline-start-color: var(--color-action);
  }
  .ui-shell--workspace .ui-shell__nav a:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 var(--focus-width) var(--color-focus);
  }
  .ui-shell--workspace .ui-shell__nav .ui-icon {
    flex: none;
    inline-size: var(--size-icon-small);
    block-size: var(--size-icon-small);
    color: var(--color-text-muted);
  }
  .ui-shell--workspace .ui-shell__nav a:is(:hover, [aria-current='page']) .ui-icon {
    color: currentColor;
  }
  .ui-shell--workspace .ui-shell__body {
    grid-column: 2;
    min-block-size: calc(100dvh - var(--ui-shell-header-height));
  }
  .ui-shell--workspace.ui-shell--restricted .ui-shell__body {
    grid-column: 1 / -1;
  }
  .ui-shell--workspace .ui-shell__main {
    padding: var(--space-8) var(--ui-shell-gutter) var(--space-10);
  }
  .ui-shell--workspace .ui-shell__main:focus {
    outline: none;
  }
  .ui-shell--workspace .ui-shell__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--ui-shell-gutter);
  }
  .ui-shell__header .ui-menu {
    position: static;
    display: flex;
    align-items: center;
    block-size: 100%;
  }
  .ui-shell__header .ui-menu__panel {
    inset-block-start: 100%;
    inset-inline-end: 0;
    max-inline-size: 100%;
    max-block-size: calc(100dvh - var(--ui-shell-header-height));
  }
  @media (min-width: 43.751rem) and (max-width: 68.75rem) {
    .ui-shell--workspace {
      --ui-shell-nav-width: 13.75rem;
    }
    .ui-shell__header-actions {
      gap: var(--space-3);
    }
    .ui-shell__header .ui-account__identity {
      display: none;
    }
  }
  @media (max-width: 43.75rem) {
    .ui-shell--workspace {
      display: block;
    }
    .ui-shell__header {
      grid-template-columns: var(--size-control-medium) 1.75rem minmax(0, 1fr) auto;
      gap: var(--space-2);
      padding-inline: var(--space-3);
    }
    .ui-shell__header .ui-shell__brand {
      grid-area: 1 / 2;
      inline-size: 100%;
      justify-content: center;
      padding: 0;
    }
    .ui-shell--workspace .ui-shell__header .ui-shell__toggle {
      display: inline-flex;
      grid-area: 1 / 1;
      align-self: center;
    }
    .ui-shell__app-details {
      grid-area: 1 / 3;
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      padding: 0;
      padding-inline-start: var(--space-3);
    }
    .ui-shell__app-name {
      letter-spacing: 0.04em;
    }
    .ui-shell__version {
      padding: 0;
      background: transparent;
    }
    .ui-shell__header-actions {
      grid-area: 1 / 4;
      gap: var(--space-1);
    }
    .ui-shell__header .ui-account__identity,
    .ui-shell__header .ui-account__chevron {
      display: none;
    }
    .ui-shell__header .ui-account {
      padding-inline: 0;
    }
    /* Compact navigation becomes a drawer on the inverse surface, like the documentation
       sidebar, anchored beneath the header so the toggle stays in place to close it. */
    .ui-shell--workspace .ui-shell__sidebar {
      --color-focus: var(--color-neutral-white);
      inline-size: min(20rem, calc(100% - var(--space-12)));
      gap: var(--space-8);
      padding: var(--space-6) var(--space-5);
      background: var(--color-surface-inverse);
      color: var(--color-text-inverse);
      box-shadow: var(--shadow-menu);
      z-index: 30;
    }
    .ui-shell--workspace .ui-shell__sidebar[data-collapsed] {
      display: none;
    }
    .ui-shell--workspace:has(> .ui-shell__sidebar:not([data-collapsed]))::after {
      content: '';
      position: fixed;
      inset: var(--ui-shell-header-height) 0 0;
      z-index: 20;
      background: rgb(31 31 33 / 50%);
    }
    html:has(.ui-shell--workspace > .ui-shell__sidebar:not([data-collapsed])) {
      overflow: hidden;
    }
    .ui-shell--workspace .ui-shell__sidebar .ui-shell__nav-label {
      color: var(--color-action-subtle);
    }
    .ui-shell--workspace .ui-shell__sidebar .ui-shell__nav a {
      color: var(--color-text-inverse);
    }
    .ui-shell--workspace .ui-shell__sidebar .ui-shell__nav .ui-icon {
      color: var(--color-action-subtle);
    }
    .ui-shell--workspace .ui-shell__sidebar .ui-shell__nav a:is(:hover, :focus-visible) {
      color: var(--color-text-inverse);
      background: var(--color-primary-olive-green);
    }
    .ui-shell--workspace .ui-shell__sidebar .ui-shell__nav a[aria-current='page'] {
      color: var(--color-text-inverse);
      background: var(--color-action);
      border-inline-start-color: var(--color-action-soft);
    }
    .ui-shell--workspace
      .ui-shell__sidebar
      .ui-shell__nav
      a:is(:hover, [aria-current='page'])
      .ui-icon {
      color: var(--color-text-inverse);
    }
    .ui-shell--restricted .ui-shell__header {
      grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    }
    .ui-shell--restricted .ui-shell__brand {
      grid-column: 1;
    }
    .ui-shell--restricted .ui-shell__app-details {
      grid-column: 2;
    }
    .ui-shell--restricted .ui-shell__header-actions {
      grid-column: 3;
    }
  }
  @media (max-width: 23.75rem) {
    .ui-shell__version {
      display: none;
    }
  }
}
@layer patterns {
  .ui-page,
  .ui-section {
    display: grid;
    align-content: start;
    gap: var(--space-6);
    min-inline-size: 0;
  }
  .ui-page > *,
  .ui-section > * {
    min-inline-size: 0;
  }
  .ui-page__header,
  .ui-section__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
  }
  /* Interface titles follow the size mode; display headlines remain available separately. */
  .ui-page__header h1 {
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-title);
  }
  .ui-page__description {
    margin-block-start: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-body-3);
    line-height: var(--line-height-body-3);
  }
  .ui-section h2,
  .ui-section__header h2 {
    font-size: var(--font-size-section-title);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-section-title);
  }
  .ui-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-4);
  }
  .ui-toolbar .ui-field {
    flex: 1;
    min-inline-size: min(12rem, 100%);
  }
  .ui-toolbar .ui-button {
    flex: 0 1 auto;
    max-inline-size: 100%;
  }
  /* Terms use the uppercase label language of table headers at 12px so they recede; values
     keep Body 2 in the text colour and carry the reading weight. */
  .ui-definition {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--space-6) var(--space-8);
  }
  .ui-definition > div {
    min-inline-size: 0;
  }
  .ui-definition dt {
    color: var(--color-text-muted);
    font-size: var(--type-size-12);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-16);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }
  .ui-definition dt:lang(ar) {
    letter-spacing: normal;
  }
  .ui-definition dd {
    margin-block-start: var(--space-2);
    overflow-wrap: anywhere;
    color: var(--color-text);
    font-size: var(--font-size-body-2);
    line-height: var(--line-height-body-2);
  }
  .ui-record-list {
    display: grid;
  }
  .ui-record-list__item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-3);
    border-block-end: var(--border-width) solid var(--color-border);
  }
  .ui-record-list__item > :first-child {
    flex: 1;
    min-inline-size: min(10rem, 100%);
  }
  .ui-record-list__item small {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--font-size-caption);
  }
}
@layer patterns {
  .ui-collection {
    display: grid;
    gap: var(--space-5);
    min-inline-size: 0;
  }
  .ui-collection > *,
  .ui-collection__results > * {
    min-inline-size: 0;
  }
  .ui-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-3);
    min-inline-size: 0;
  }
  .ui-filter-bar > * {
    min-inline-size: 0;
    max-inline-size: 100%;
  }
  .ui-filter-bar__search {
    flex: 1 1 20rem;
    max-inline-size: 28rem;
  }
  .ui-filter-bar__field {
    flex: 0 1 12rem;
  }
  .ui-filter-bar__more {
    flex-basis: 100%;
  }
  .ui-filter-bar__more > .ui-filter-bar {
    padding-block: var(--space-3);
  }
  .ui-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .ui-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-inline-size: 100%;
    min-block-size: max(var(--size-control-small), var(--size-target-min));
    min-inline-size: var(--size-target-min);
    padding: var(--space-1) var(--space-3);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-none);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-caption);
    cursor: pointer;
    transition: background-color var(--motion-interaction-duration) var(--motion-interaction-easing);
  }
  .ui-filter-chip span {
    overflow-wrap: anywhere;
    min-inline-size: 0;
  }
  .ui-filter-chip:is(:hover, :focus-visible) {
    background: var(--color-action-tint);
  }
  .ui-filter-chip .ui-icon {
    flex: none;
    inline-size: var(--size-icon-small);
    block-size: var(--size-icon-small);
  }
  .ui-list-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-caption);
  }
  .ui-list-summary .ui-control {
    inline-size: auto;
  }
  .ui-list-summary .ui-filter-bar {
    align-items: center;
  }
  @media (max-width: 43.75rem) {
    .ui-filter-bar__search {
      flex-basis: 100%;
      max-inline-size: none;
    }
    .ui-filter-bar__field {
      flex: 1 1 9rem;
    }
  }
}
@layer patterns {
  /* Brand surface, after the Figma cover: light content on the olive gradient. For splash
     screens, sign-in panels and other brand moments. Components inside switch to light
     content: text, links and focus turn white, and primary actions become white with
     Olive Green labels. */
  .ui-brand-surface {
    --color-text: var(--color-text-inverse);
    --color-text-heading: var(--color-text-inverse);
    --color-text-secondary: var(--color-text-inverse);
    --color-text-muted: color-mix(in srgb, var(--color-neutral-white) 80%, transparent);
    --color-link: var(--color-neutral-white);
    --color-link-hover: var(--color-primary-light-sage);
    --color-link-active: var(--color-primary-muted-green);
    --color-focus: var(--color-neutral-white);
    --color-focus-strong: var(--color-neutral-white);
    --color-border: color-mix(in srgb, var(--color-neutral-white) 40%, transparent);
    --color-action: var(--color-neutral-white);
    --color-action-hover: var(--color-primary-light-sage);
    --color-action-active: var(--color-primary-muted-green);
    --color-text-on-action: var(--color-primary-olive-green);
    position: relative;
    isolation: isolate;
    background: var(--gradient-brand);
    color: var(--color-text);
  }
  .ui-brand-surface .ui-button--secondary {
    --ui-button-bg: transparent;
  }
  /* A full-viewport composition: logo at the top and message below. */
  .ui-splash {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: var(--space-12);
    min-block-size: 100dvh;
    padding: var(--space-12) var(--space-page);
  }
  .ui-splash__logo {
    justify-self: end;
    inline-size: min(20rem, 60%);
    block-size: auto;
  }
  .ui-splash__content {
    display: grid;
    align-content: center;
    gap: var(--space-8);
    inline-size: min(100%, var(--size-container));
    margin-inline: auto;
  }
  .ui-splash__title {
    max-inline-size: 16ch;
    font-size: var(--font-size-headline-1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-headline-1);
  }
  @media (max-width: 48rem) {
    .ui-splash {
      padding-block: var(--space-8);
    }
    .ui-splash__logo {
      justify-self: start;
    }
  }
}

@layer patterns {
  @media (forced-colors: active) {
    .ui-brand-surface {
      border: 1px solid CanvasText;
    }
  }
}

@layer reset, tokens, base, layout, components, patterns, utilities, app;
@layer utilities {
  .u-visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .u-text-muted {
    color: var(--color-text-muted);
  }
  .u-text-end {
    text-align: end;
  }
  .u-numeric {
    font-variant-numeric: tabular-nums;
  }
  .u-full-width {
    inline-size: 100%;
  }
  .u-measure {
    max-inline-size: var(--size-prose);
  }
  .u-gap-small {
    --layout-gap: var(--space-2);
  }
  .u-gap-large {
    --layout-gap: var(--space-8);
  }
}