:root {
  /* Brand palette */
  --color-brand-navy: #131428;
  --color-brand-cyan: #00aad1;
  --color-brand-orange: #f26d23;
  --color-brand-magenta: #d1155d;

  /* Neutral palette */
  --color-white: #fff;
  --color-grey-100: #f5f6f8;
  --color-grey-200: #eef0f5;
  --color-grey-300: #d9dce3;
  --color-grey-500: #8b90a0;
  --color-grey-700: #4a4e5c;

  /* Semantic roles: override these together when creating a theme. */
  color-scheme: light;
  --color-text: var(--color-brand-navy);
  --color-text-muted: #596174;
  --color-text-cyan: #00758f;
  --color-text-orange: #a94308;
  --color-text-magenta: #b81050;
  --color-link: #00758f;
  --color-link-hover: #00596d;
  --color-background: var(--color-surface);
  --color-surface: var(--color-white);
  --color-surface-muted: #f4f5f8;
  --color-surface-hover: #eef0f5;
  --color-border: var(--color-grey-300);
  --color-control-border: #737b8c;
  --color-placeholder: #596174;
  --color-primary: var(--color-brand-magenta);
  --color-primary-hover: #b81050;
  --color-primary-pressed: #950b40;
  --color-on-primary: #fff;
  --color-accent: var(--color-brand-cyan);
  --color-accent-hover: #009abd;
  --color-accent-pressed: #0096b8;
  --color-on-accent: #06242b;
  --color-orange: #a94308;
  --color-orange-hover: #8b3605;
  --color-orange-pressed: #702b04;
  --color-on-orange: #fff;
  --color-info: #00596d;
  --color-info-border: #00758f;
  --color-info-surface: #e0f3f8;
  --color-success: #17633a;
  --color-success-border: #17633a;
  --color-success-surface: #edf8f0;
  --color-warning: #754500;
  --color-warning-border: #8a5300;
  --color-warning-surface: #fff4d6;
  --color-danger: #b21e3d;
  --color-danger-border: #b21e3d;
  --color-danger-surface: #fff1f3;
  --color-danger-hover: #ffe0e6;
  --color-danger-pressed: #ffd0da;
  --color-selected: #e0f3f8;
  --color-on-selected: #06242b;
  --color-selected-border: #00758f;
  --color-disabled: #eef0f5;
  --color-on-disabled: #596174;
  --color-readonly: #f4f5f8;
  --color-chrome: var(--color-brand-navy);
  --color-on-chrome: #fff;
  --color-chrome-link: #8de8fa;
  --color-chrome-hover: #303248;
  --color-chrome-selected: #174658;
  --color-focus: #00758f;
  --color-focus-on-chrome: #8de8fa;
  --color-focus-gap: var(--color-surface);
  --color-backdrop: rgba(19, 20, 40, .58);

  /* Foundation scales. Semantic component tokens below consume these values. */
  --space-0: 0;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --font-size-xs: .75rem;
  --font-size-small: .875rem;
  --font-size-base: 1rem;
  --font-size-large: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 3rem;
  --font-weight-normal: 400;
  --font-weight-strong: 700;
  --font-weight-heavy: 900;
  --line-height-none: 1;
  --line-height-tight: 1.2;
  --line-height-control: 1.25;
  --line-height-relaxed: 1.6;
  --control-height-small: 2rem;
  --control-height-medium: 2.75rem;
  --control-height-large: 3rem;
  --control-height-multiline: 7rem;
  --target-size-touch: 2.75rem;
  --choice-size: 1.125rem;
  --choice-size-touch: 1.5rem;
  --border-width: 1px;
  --border-width-strong: 2px;
  --border-width-marker: 4px;
  --focus-width: 3px;
  --focus-offset: 2px;
  --focus-gap-width: 2px;
  --motion-duration-instant: 0s;
  --motion-duration-fast: .15s;
  --motion-duration-medium: .25s;
  --motion-duration-slow: .4s;
  --motion-duration-progress: .8s;
  --motion-easing: ease-out;
  --layer-base: 0;
  --layer-skip-link: 3;
  --table-scroll-height: 28rem;

  /* Semantic typography, spacing, shape, and layout */
  --font-family-base: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  --line-height-base: var(--line-height-relaxed);
  --radius-small: .35rem;
  --radius-medium: .5rem;
  --radius-large: .65rem;
  --shadow-overlay: 0 1.5rem 4rem rgba(19, 20, 40, .25);
  --content-width: 68.75rem;
  --content-width-wide: 75rem;
  --content-width-narrow: 28rem;
  --content-width-compact: 32rem;
  --content-width-medium: 36rem;
  --dialog-width: 38rem;
  --dialog-width-small: 26rem;
  --dialog-width-wide: 56rem;
  --focus-ring: 0 0 0 var(--focus-gap-width) var(--color-focus-gap);
  --control-height: var(--control-height-medium);
  --control-padding-block: var(--space-2);
  --control-padding-inline: var(--space-3);
  --table-cell-padding-block: var(--space-3);
  --table-cell-padding-inline: var(--space-4);
  --panel-padding: var(--space-6);
  --page-padding: var(--space-8);
  --page-title-size: var(--font-size-3xl);
  --motion-duration: var(--motion-duration-fast);
  --layer-sticky: 1;
  --layer-popover: 2;
}

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

html { font-family: var(--font-family-base); }

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font: var(--font-weight-normal) var(--font-size-base)/var(--line-height-base) var(--font-family-base);
}

img,
svg { max-width: 100%; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-3);
  color: var(--color-text);
  line-height: var(--line-height-tight);
}
h1 { font-size: clamp(var(--font-size-3xl), 5vw, var(--font-size-4xl)); font-weight: var(--font-weight-heavy); }
h2 { font-size: var(--font-size-3xl); font-weight: var(--font-weight-strong); }
h3 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-strong); }
h4 { font-size: var(--font-size-xl); font-weight: var(--font-weight-strong); }
h5 { font-size: var(--font-size-large); font-weight: var(--font-weight-strong); }
h6 { font-size: var(--font-size-base); font-weight: var(--font-weight-strong); }
p { margin: 0 0 var(--space-4); }
small { font-size: var(--font-size-small); }
:where(.form, .editor) label, .form__label { display: block; font-weight: var(--font-weight-strong); }
a { color: var(--color-link); text-decoration: underline; text-underline-offset: .15em; }
a:hover { color: var(--color-link-hover); }

/* Layout */
.layout { min-height: 100vh; }
.layout--centered { display: grid; place-items: center; padding: var(--space-6); }
.layout--brand { background: var(--color-chrome); }
.layout--muted { background: var(--color-surface-muted); color: var(--color-text); }
.container { width: min(100% - 3rem, var(--content-width)); margin-inline: auto; }
.container--narrow { max-width: var(--content-width-narrow); }
.container--compact { max-width: var(--content-width-compact); }
.container--medium { max-width: var(--content-width-medium); }
.container--wide { width: min(100% - 3rem, var(--content-width-wide)); max-width: var(--content-width-wide); }
.page-content { padding-block: var(--page-padding); }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.page-header h1 { margin: 0; font-size: var(--page-title-size); line-height: var(--line-height-tight); }

/* Brand identity */
.brand-header {
  display: flex;
  justify-content: center;
  padding: var(--space-5) var(--space-6);
  background: var(--color-chrome);
  text-align: center;
}
.brand-header__logo { display: block; width: min(12rem, 70%); height: auto; margin-inline: auto; }

/* Header and navigation */
.site-header { width: 100%; background: var(--color-chrome); color: var(--color-on-chrome); }
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  max-width: var(--content-width-wide);
  margin: 0 auto;
  padding: var(--space-3) var(--space-6);
}
.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-on-chrome);
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-strong);
  text-decoration: none;
  white-space: nowrap;
}
.site-header__brand:hover { color: var(--color-on-chrome); text-decoration: none; }
.site-header__logo { display: block; width: auto; height: 3rem; max-width: 5rem; object-fit: contain; }
.navigation__list { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.navigation__link { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-small); color: var(--color-on-chrome); text-decoration: none; }
.navigation__link:hover,
.navigation__link:focus-visible,
.navigation__link--active { color: var(--color-on-chrome); text-decoration: none; }
.navigation__link:hover,
.navigation__link:focus-visible { background: var(--color-chrome-hover); }
.navigation__link--active { background: var(--color-chrome-selected); }
.navigation__link--outlined { margin-inline-start: var(--space-1); border: var(--border-width) solid var(--color-chrome-link); color: var(--color-chrome-link); }

/* Typography */
.text { color: var(--color-text); }
.text--small { font-size: var(--font-size-small); }
.text--muted { color: var(--color-text-muted); }
.text--cyan { color: var(--color-text-cyan); }
.text--magenta { color: var(--color-text-magenta); }
.text--orange { color: var(--color-text-orange); }
.text--center { text-align: center; }

/* Buttons: each variant supplies the same interaction-state roles. */
.button {
  --button-background: var(--color-primary);
  --button-hover: var(--color-primary-hover);
  --button-pressed: var(--color-primary-pressed);
  --button-text: var(--color-on-primary);
  --button-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--control-height);
  padding: var(--control-padding-block) var(--space-4);
  border: var(--border-width) solid var(--button-border);
  border-radius: var(--radius-small);
  background: var(--button-background);
  color: var(--button-text);
  font: var(--font-weight-strong) var(--font-size-base)/var(--line-height-none) var(--font-family-base);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-duration) var(--motion-easing), border-color var(--motion-duration) var(--motion-easing);
}
.button--secondary {
  --button-background: var(--color-accent);
  --button-hover: var(--color-accent-hover);
  --button-pressed: var(--color-accent-pressed);
  --button-text: var(--color-on-accent);
}
.button--orange {
  --button-background: var(--color-orange);
  --button-hover: var(--color-orange-hover);
  --button-pressed: var(--color-orange-pressed);
  --button-text: var(--color-on-orange);
}
.button--danger {
  --button-background: var(--color-surface);
  --button-hover: var(--color-danger-hover);
  --button-pressed: var(--color-danger-pressed);
  --button-text: var(--color-danger);
  --button-border: var(--color-danger-border);
}
.button--outline {
  --button-background: var(--color-surface);
  --button-hover: var(--color-surface-hover);
  --button-pressed: var(--color-surface-muted);
  --button-text: var(--color-text);
  --button-border: var(--color-control-border);
}
.button:hover { color: var(--button-text); text-decoration: none; }
.button:where(:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"])):hover { background: var(--button-hover); }
.button:where(:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"])):active { background: var(--button-pressed); }
.button[aria-pressed="true"] {
  --button-background: var(--color-selected);
  --button-hover: var(--color-selected);
  --button-pressed: var(--color-selected);
  --button-text: var(--color-on-selected);
  --button-border: var(--color-selected-border);
  box-shadow: inset 0 -3px 0 var(--button-border);
}
.button:disabled, .button[aria-disabled="true"] {
  background: var(--color-disabled);
  border-color: var(--color-control-border);
  color: var(--color-on-disabled);
  cursor: not-allowed;
}
.button[aria-busy="true"] { cursor: progress; }
.button[aria-busy="true"]::before {
  content: "";
  width: 1em;
  height: 1em;
  border: var(--border-width-strong) solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  flex: 0 0 auto;
  animation: button-progress var(--motion-duration-progress) linear infinite;
}
@keyframes button-progress { to { transform: rotate(360deg); } }
.button--small { min-height: var(--control-height-small); padding: var(--space-2) var(--space-2); font-size: var(--font-size-small); }
.button--block { width: 100%; }

/* Forms */
.form { display: grid; gap: var(--space-4); max-width: 48rem; }
.form--inline { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-2) var(--space-3); max-width: 52rem; margin: 0 0 var(--space-6); }
.form--inline > .button { min-width: 7rem; }
.form__field { display: grid; gap: var(--space-2); margin: 0; }
.form__label { margin: 0; font-weight: var(--font-weight-strong); }
.form__control,
:where(.form, .editor) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="image"]):not([type="range"])),
:where(.form, .editor) textarea,
:where(.form, .editor) select {
  width: 100%;
  min-height: var(--control-height);
  padding: var(--control-padding-block) var(--control-padding-inline);
  border: var(--border-width) solid var(--color-control-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  line-height: var(--line-height-control);
}
.form__control--textarea,
textarea.form__control,
:where(.form, .editor) textarea { min-height: var(--control-height-multiline); resize: vertical; }
.form__help { color: var(--color-text-muted); font-size: var(--font-size-small); }
.form__fieldset {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-surface);
}
.form__fieldset label { margin: 0; font-weight: var(--font-weight-normal); }
.form__fieldset input[type="checkbox"],
.form__fieldset input[type="radio"] { width: auto; }
.form__fieldset legend { padding: 0 var(--space-2); font-weight: var(--font-weight-strong); }
:where(.form, .editor) :is(input, textarea)::placeholder,
.form__control::placeholder { color: var(--color-placeholder); opacity: 1; }
:where(.form, .editor) :is(input[type="checkbox"], input[type="radio"]),
.form__choice { accent-color: var(--color-primary); }
.form__required { color: var(--color-text-muted); font-size: var(--font-size-small); font-weight: var(--font-weight-normal); }
.form__error { margin: 0; color: var(--color-danger); font-weight: var(--font-weight-strong); font-size: var(--font-size-small); }
.form__error-summary { padding: var(--space-4); border: var(--border-width-strong) solid var(--color-danger-border); background: var(--color-danger-surface); color: var(--color-danger); }
.form__error-summary a { color: inherit; }
:where(.form, .editor) :is(input, select, textarea):is([aria-invalid="true"], :user-invalid),
.form__control:is([aria-invalid="true"], :user-invalid) { border-color: var(--color-danger-border); border-width: var(--border-width-strong); }
:where(.form, .editor) :is(input, textarea)[readonly],
.form__control[readonly] { background: var(--color-readonly); border-style: dashed; }
:where(.form, .editor) :is(input, select, textarea):disabled,
.form__control:disabled { background: var(--color-disabled); color: var(--color-on-disabled); opacity: 1; cursor: not-allowed; }
.form__field[aria-busy="true"] { border-inline-start: var(--focus-width) solid var(--color-selected-border); padding-inline-start: var(--space-3); }

/* Keep a real outline for high contrast modes; the gap separates it from fills. */
a:focus-visible, button:focus-visible,
:where(.form, .editor) :is(input, select, textarea):focus-visible,
.form__control:focus-visible, .form__choice:focus-visible,
.form__error-summary:focus, .rich-text-editor:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 var(--focus-gap-width) var(--color-focus-gap);
}
:where(.site-header, .brand-header, .section__header, .layout--brand) {
  --color-focus: var(--color-focus-on-chrome);
  --color-focus-gap: var(--color-chrome);
}

/* Alerts and cards */
.alert { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-inline-start: var(--border-width-marker) solid var(--color-info-border); background: var(--color-info-surface); color: var(--color-info); }
.alert--error { border-color: var(--color-danger-border); background: var(--color-danger-surface); color: var(--color-danger); }
.card { margin: var(--space-6) 0; padding: var(--panel-padding); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-surface); }
.card--accent { border-inline-start: var(--border-width-marker) solid var(--color-selected-border); }
.card--centered { text-align: center; }
.card--form { padding: var(--space-8); }
.card--form h1 { font-size: var(--font-size-3xl); }
.card--form .button { width: 100%; }
.card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.card__header h2 { margin: 0; font-size: var(--font-size-xl); }
.card__body > :first-child { margin-top: 0; }
.card__body > :last-child { margin-bottom: 0; }

/* Actions, grids, and tables */
.button-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.button-group--end { justify-content: flex-end; }
/* A joined group stays intact; wrap separate groups at deliberate section breaks. */
.button-group--joined { display: inline-flex; flex-wrap: nowrap; align-items: stretch; gap: 0; max-width: 100%; }
.button-group--joined > .button { position: relative; border-radius: 0; }
.button-group--joined > .button + .button { margin-inline-start: calc(-1 * var(--border-width)); }
.button-group--joined > .button:first-child { border-start-start-radius: var(--radius-small); border-end-start-radius: var(--radius-small); }
.button-group--joined > .button:last-child { border-start-end-radius: var(--radius-small); border-end-end-radius: var(--radius-small); }
.button-group--joined > .button:focus-visible { z-index: 1; }

.inline-form { display: inline-flex; margin: 0; }
.grid { display: grid; gap: var(--space-4); align-items: start; }
.grid--two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.table-wrap { overflow-x: auto; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-surface); }
.table { width: 100%; border-collapse: collapse; color: var(--color-text); }
.table th,
.table td { padding: var(--table-cell-padding-block) var(--table-cell-padding-inline); border-bottom: var(--border-width) solid var(--color-border); text-align: left; vertical-align: top; }
.table thead th { background: var(--color-surface-muted); color: var(--color-text); font-size: var(--font-size-small); letter-spacing: .04em; text-transform: uppercase; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--color-surface-hover); }
.table__primary { font-weight: var(--font-weight-strong); }
.table__actions { white-space: nowrap; }
.table pre { margin: 0; font: inherit; white-space: pre-wrap; }

/* Reusable content lists and editors */
.content-list { display: grid; gap: var(--space-4); margin: var(--space-5) 0; padding: 0; list-style: none; }
.content-list__item { padding: var(--space-5); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-surface); }
.content-list__item--active { border-color: var(--color-selected-border); }
.content-list__header { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-4); }
.content-list__label { color: var(--color-text-cyan); font-size: var(--font-size-xs); font-weight: var(--font-weight-strong); letter-spacing: .06em; text-transform: uppercase; }
.content-list__body { display: grid; gap: var(--space-3); }
.content-list__body--two-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.section { padding: 0; min-width: 0; }
.section__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-5); background: var(--color-chrome); color: var(--color-on-chrome); }
.section__title { margin: 0; color: inherit; font-size: var(--font-size-large); }
.section__actions { justify-content: flex-end; }
.section__header .navigation__link { color: var(--color-chrome-link); }
.section__content { padding: var(--panel-padding); }
.section__content--flush { padding: 0; }
.section__content--flush .table-wrap { border: 0; border-radius: 0; }
.section__footer { display: flex; justify-content: flex-end; padding: var(--space-3) var(--space-5); border-top: var(--border-width) solid var(--color-border); }
.section__content .table-wrap { margin: 0; }
.navigation__button { border: 0; background: transparent; font: inherit; cursor: pointer; }
.content-list__field { display: grid; grid-template-columns: minmax(7rem, 18%) 1fr; gap: var(--space-4); }
.content-list__field-label { color: var(--color-text-muted); font-weight: var(--font-weight-strong); }
.content-list__value { white-space: pre-wrap; }
.content-list__value ul { margin: 0; padding-inline-start: var(--space-5); }
.content-list__cards { display: grid; gap: var(--space-3); }
.content-list__cards > * { padding: var(--space-3); border-radius: var(--radius-small); background: var(--color-surface-muted); }
.content-list__cards p { margin: var(--space-1) 0; }
.content-list__actions { margin-top: var(--space-5); }
.editor { display: grid; gap: var(--space-2); }
.editor__field { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.editor__card {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface-muted);
}
.editor__errors {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-inline-start: var(--border-width-marker) solid var(--color-danger-border);
  background: var(--color-danger-surface);
  color: var(--color-danger);
}
.editor__errors p { margin: 0; }
.rich-text-editor {
  min-height: var(--control-height-multiline);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-control-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  font: inherit;
}
.rich-text-editor__tools { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-1) 0; }
.rich-text-editor__button {
  padding: var(--space-1) var(--space-2);
  border: var(--border-width) solid var(--color-control-border);
  border-radius: var(--radius-small);
  background: var(--color-surface-muted);
  color: inherit;
  cursor: pointer;
}
.rich-text-editor__preview,
.rich-text-editor__content { overflow-wrap: anywhere; }
.rich-text-editor__preview > :first-child,
.rich-text-editor__content > :first-child { margin-top: 0; }
.rich-text-editor__preview > :last-child,
.rich-text-editor__content > :last-child { margin-bottom: 0; }

/* Dialogs */
.modal {
  width: min(var(--dialog-width), calc(100vw - var(--space-8)));
  max-width: none;
  max-height: calc(100vh - 2rem);
  padding: 0;
  overflow: auto;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-overlay);
}
.modal::backdrop { background: var(--color-backdrop); }
.modal__panel { padding: var(--panel-padding); }
.modal__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.modal__header h2 { margin: 0; }
.modal__close {
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: var(--radius-small);
  background: var(--color-surface-muted);
  color: inherit;
  font-size: var(--font-size-2xl);
  cursor: pointer;
}
.modal__actions { justify-content: flex-end; margin-top: var(--space-6); }
.modal__actions form { margin: 0; }

/* Utilities */
.u-hidden { display: none !important; }

@media (max-width: 700px) {
  .site-header__inner { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
  .content-list__body--two-column { grid-template-columns: minmax(0, 1fr); }
  .section__header { align-items: flex-start; flex-direction: column; }
  .page-header { align-items: flex-start; flex-direction: column; }
  .container { width: min(100% - 2rem, var(--content-width)); }
  .container--wide { width: min(100% - 2rem, var(--content-width-wide)); }
  .page-content { padding-block: var(--page-padding); }
  .content-list__field { grid-template-columns: 1fr; gap: var(--space-1); }
}

@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
  .button[aria-busy="true"]::before { animation: none; }
}
@media (forced-colors: active) {
  a:focus-visible, button:focus-visible,
  :where(.form, .editor) :is(input, select, textarea):focus-visible,
  .form__control:focus-visible, .form__choice:focus-visible,
  .form__error-summary:focus, .rich-text-editor:focus-visible {
    outline-color: Highlight;
    box-shadow: none;
  }
  .button[aria-pressed="true"] { border: var(--focus-width) double Highlight; }
  .button:disabled, .button[aria-disabled="true"] { color: GrayText; border-color: GrayText; }
}

/* Density is inherited by composed components, or scoped to a single region. */
.density, .density--comfortable {
  --control-height: var(--control-height-medium);
  --control-padding-block: var(--space-2);
  --control-padding-inline: var(--space-3);
  --table-cell-padding-block: var(--space-3);
  --table-cell-padding-inline: var(--space-4);
  --panel-padding: var(--space-6);
  --page-padding: var(--space-8);
  --page-title-size: var(--font-size-3xl);
}
.density--compact {
  --control-height: var(--control-height-small);
  --control-padding-block: var(--space-1);
  --control-padding-inline: var(--space-2);
  --table-cell-padding-block: var(--space-1);
  --table-cell-padding-inline: var(--space-2);
  --panel-padding: var(--space-4);
  --page-padding: var(--space-4);
  --page-title-size: var(--font-size-2xl);
}
.button--quiet {
  --button-background: transparent;
  --button-hover: var(--color-surface-hover);
  --button-pressed: var(--color-surface-muted);
  --button-text: var(--color-link);
}
.button--icon { width: var(--control-height); min-width: var(--control-height-small); padding: var(--space-1); aspect-ratio: 1; }
.button--icon.button--small { width: var(--control-height-small); }
.button--quiet.button--danger {
  --button-border: transparent;
  --button-text: var(--color-danger);
  --button-hover: var(--color-danger-hover);
  --button-pressed: var(--color-danger-pressed);
}

/* Keep table semantics. Wide data scrolls inside a named, keyboard-focusable region. */
.table-wrap:focus-visible, summary:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}
.table-wrap--sticky { max-height: var(--table-scroll-height); }
.table--wide { min-width: 38rem; }
.table--fixed { table-layout: fixed; }
.table caption { padding: var(--space-3); text-align: start; font-weight: var(--font-weight-strong); }
.table--sticky thead th { position: sticky; top: 0; z-index: var(--layer-sticky); }
.table .table__number { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table__sort { display: inline-flex; align-items: center; gap: var(--space-1); border: 0; background: transparent; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.table th[aria-sort="ascending"] .table__sort::after { content: "\2191"; }
.table th[aria-sort="descending"] .table__sort::after { content: "\2193"; }
.table__sort-icon { font-size: .8em; }
.table__selection { width: 3rem; }
.table__selection input { accent-color: var(--color-primary); width: var(--choice-size); height: var(--choice-size); }
.table__selection input:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.table tbody tr:has(.table__selection input:checked) { background: var(--color-selected); color: var(--color-on-selected); }
.table tbody tr:focus-within { box-shadow: inset 3px 0 var(--color-selected-border); }
.table__cell-content { min-width: 0; }
.table__cell-content--wrap { overflow-wrap: anywhere; white-space: normal; }
.table__truncate { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table__edit { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-2); }
.table__edit .form__field { flex: 1 1 8rem; }
.table__status { padding: var(--space-6); text-align: center; }
.selection-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-selected-border); background: var(--color-selected); color: var(--color-on-selected); }
.selection-bar[hidden] { display: none; }
.status { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border: var(--border-width) solid var(--color-control-border); border-radius: var(--radius-small); background: var(--color-surface-muted); color: var(--color-text); font-size: var(--font-size-small); font-weight: var(--font-weight-strong); }
.status--error { border-color: var(--color-danger-border); background: var(--color-danger-surface); color: var(--color-danger); }
.status--selected { border-color: var(--color-selected-border); background: var(--color-selected); color: var(--color-on-selected); }
.data-state { display: grid; justify-items: start; gap: var(--space-3); padding: var(--panel-padding); }
.data-state > * { margin: 0; }
.data-state--error { border-inline-start: var(--border-width-marker) solid var(--color-danger-border); }
.data-state__title { font-size: var(--font-size-large); }

/* A disclosure of ordinary links/buttons, not an ARIA application menu. */
.action-menu { position: relative; display: inline-block; }
.action-menu > summary { list-style: none; }
.action-menu > summary::-webkit-details-marker { display: none; }
.action-menu__items { position: absolute; inset-inline-end: 0; min-width: 10rem; max-width: min(20rem, 80vw); padding: var(--space-1); border: var(--border-width) solid var(--color-control-border); border-radius: var(--radius-small); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-overlay); z-index: var(--layer-popover); }
.action-menu__item { display: block; width: 100%; padding: var(--space-2) var(--space-2); border: 0; background: transparent; color: var(--color-text); font: inherit; text-align: start; text-decoration: none; cursor: pointer; white-space: normal; }
.action-menu__item:hover { background: var(--color-surface-hover); color: var(--color-text); }
.action-menu__item--danger { color: var(--color-danger); }
.action-menu__item--danger:hover { color: var(--color-danger); background: var(--color-danger-surface); }
/* Use the native top layer in scrollable tables so actions are not clipped. */
.action-menu__items[popover] { position: fixed; inset: auto; margin: 0; }

/* Read-only record presentation; editing composes the existing form and section. */
.record-summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: var(--space-4); padding: var(--panel-padding); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-surface); }
.record-summary__identity { flex: 1 1 15rem; min-width: 0; overflow-wrap: anywhere; }
.record-summary__title { margin: 0; font-size: var(--page-title-size); }
.record-summary__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-block-start: var(--space-2); color: var(--color-text-muted); }
.record-summary__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.record-details { display: grid; gap: var(--space-4); margin: 0; }
.record-details--two-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.record-details__field { min-width: 0; }
.record-details__label { color: var(--color-text-muted); font-size: var(--font-size-small); font-weight: var(--font-weight-strong); }
.record-details__value { margin: var(--space-1) 0 0; overflow-wrap: anywhere; white-space: pre-wrap; }

/* Optional script-powered navigation disclosure remains visible without JS. */
.navigation__toggle { display: none; align-items: center; justify-content: center; min-width: var(--target-size-touch); min-height: var(--target-size-touch); padding: var(--space-2); border: 0; background: transparent; color: var(--color-on-chrome); font: inherit; cursor: pointer; }
.navigation__toggle:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.navigation--surface { --color-on-chrome: var(--color-text); --color-chrome-hover: var(--color-surface-hover); --color-chrome-selected: var(--color-selected); --color-focus: var(--color-link); --color-focus-gap: var(--color-surface); }
.modal--small { width: min(var(--dialog-width-small), calc(100vw - var(--space-8))); }
.modal--wide { width: min(var(--dialog-width-wide), calc(100vw - var(--space-8))); }
.modal__body { min-height: 0; overflow-y: auto; padding: var(--panel-padding); }
.modal--scrollable { overflow: hidden; }
.modal--scrollable[open] { display: flex; flex-direction: column; }
.modal--scrollable > .modal__header, .modal--scrollable > .modal__actions { flex: 0 0 auto; margin: 0; padding: var(--panel-padding); }
.modal--scrollable > .modal__actions { border-top: var(--border-width) solid var(--color-border); }
.modal { max-height: calc(100dvh - 2rem); }
.modal__close { flex: 0 0 auto; }
.modal__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
body:has(dialog.modal[open]) { overflow: hidden; }
.u-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Focusable helper text is revealed when reached; never leave an invisible tab stop. */
.u-visually-hidden:focus, .u-visually-hidden:focus-within { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; }
.skip-link { position: fixed; inset-block-start: .5rem; inset-inline-start: .5rem; z-index: var(--layer-skip-link); padding: var(--space-3); background: var(--color-surface); color: var(--color-link); transform: translateY(-200%); }
.skip-link:focus { transform: none; }

@media (max-width: 64rem) {
  .site-header__inner { flex-wrap: wrap; gap: var(--space-4); }
  .site-header__brand { white-space: normal; }
}
@media (max-width: 44rem) {
  .form--inline { grid-template-columns: minmax(0, 1fr); }
  .form--inline > .button { min-width: 0; justify-self: start; }
  .card__header, .modal__header { flex-wrap: wrap; }
  .record-details--two-column { grid-template-columns: minmax(0, 1fr); }
  .navigation[data-ui-navigation] { width: 100%; }
  .navigation[data-ui-navigation][data-ui-ready] .navigation__toggle { display: inline-flex; }
  .navigation[data-ui-navigation][data-ui-ready] .navigation__list { display: none; flex-direction: column; align-items: stretch; padding-block: var(--space-2); }
  .navigation[data-ui-navigation][data-ui-ready]:has(.navigation__toggle[aria-expanded="true"]) .navigation__list { display: flex; }
  .navigation__link--outlined { margin-inline-start: 0; }
  .table__actions { white-space: normal; }
}
@media (pointer: coarse) {
  .button, .button--small, .button--icon, .button--icon.button--small, .modal__close { min-width: var(--target-size-touch); min-height: var(--target-size-touch); }
  .action-menu__item, .navigation__link, .table__sort { min-height: var(--target-size-touch); }
  .table__selection input, .form__choice { min-width: var(--choice-size-touch); min-height: var(--choice-size-touch); }
}
@media (prefers-reduced-motion: reduce) {
  :root { --motion-duration: var(--motion-duration-instant); }
}
@media (forced-colors: active) {
  .table tbody tr:has(.table__selection input:checked) { outline: var(--border-width-strong) solid Highlight; outline-offset: -2px; }
  .table-wrap:focus-visible, summary:focus-visible, .table__selection input:focus-visible { outline-color: Highlight; }
}

/* Flexible toolbars compose search, filters, counts and action groups. */
.toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); margin-block: var(--space-4); }
.toolbar__search { flex: 1 1 16rem; min-width: 0; }
.toolbar__filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); }
.toolbar__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-inline-start: auto; }
.toolbar__count { margin: 0; color: var(--color-text-muted); }
@media (max-width: 44rem) {
  .toolbar__search, .toolbar__filters, .toolbar__actions { flex-basis: 100%; margin-inline-start: 0; }
}

/* Calendars and schedules: semantic tables, lists and native radio choices. */
.calendar, .schedule { min-width: 0; color: var(--color-text); }
.calendar { padding: var(--space-3); border: var(--border-width) solid var(--color-control-border); border-radius: var(--radius-medium); background: var(--color-surface); }
.calendar__header, .schedule__header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.calendar__title { margin: 0; font-size: var(--font-size-xl); }
.calendar__scroll, .schedule__scroll { max-width: 100%; overflow-x: auto; padding: var(--space-1); }
.calendar__month { width: 100%; min-width: 35rem; table-layout: fixed; border-spacing: var(--space-1); }
.calendar__weekday { text-align: center; color: var(--color-text-muted); font-size: var(--font-size-small); }
.calendar__cell { padding: 0; text-align: center; vertical-align: top; }
.calendar__date { display: flex; flex-direction: column; gap: var(--space-1); align-items: center; justify-content: center; min-height: var(--target-size-touch); min-width: var(--target-size-touch); padding: var(--space-1); border: var(--border-width) solid transparent; border-radius: var(--radius-small); color: inherit; background: var(--color-surface); font: inherit; }
.calendar__date[href]:hover { background: var(--color-surface-hover); text-decoration: underline; }
.calendar__date[aria-current="date"] { border-color: var(--color-control-border); font-weight: var(--font-weight-strong); }
.calendar__date--selected { background: var(--color-selected); color: var(--color-on-selected); border: var(--border-width-strong) solid var(--color-selected-border); }
.calendar__date--unavailable { background: var(--color-disabled); color: var(--color-on-disabled); }
.calendar__state { font-size: var(--font-size-xs); line-height: var(--line-height-tight); white-space: nowrap; }
.schedule__zone, .schedule__meta { color: var(--color-text-muted); overflow-wrap: anywhere; }
.schedule__list { list-style: none; padding: 0; margin: 0; }
.schedule__item { display: grid; grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-4); border-block-start: var(--border-width) solid var(--color-border); }
.schedule__time { font-weight: var(--font-weight-strong); }
.schedule__event { min-width: 0; padding: var(--space-3); border: var(--border-width) solid var(--color-control-border); border-inline-start-width: var(--border-width-marker); border-radius: var(--radius-small); background: var(--color-surface); overflow-wrap: anywhere; }
.schedule__event--tentative { border-style: dashed; }
.schedule__event--conflict { border-color: var(--color-danger-border); color: var(--color-danger); background: var(--color-danger-surface); }
.schedule__title { margin: 0; font-size: var(--font-size-large); }
.schedule__board { width: 100%; min-width: 38rem; table-layout: fixed; border-collapse: collapse; }
.schedule__board th, .schedule__board td { padding: var(--space-3); border: var(--border-width) solid var(--color-control-border); text-align: start; vertical-align: top; overflow-wrap: anywhere; }
.schedule__board th { background: var(--color-surface-muted); }
.schedule__slots { display: flex; flex-wrap: wrap; gap: var(--space-2); border: 0; padding: 0; margin: 0; }
.schedule__slots legend { margin-block-end: var(--space-2); font-weight: var(--font-weight-strong); }
.schedule__slot { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target-size-touch); padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--color-control-border); border-radius: var(--radius-small); }
.schedule__slot:has(input:checked) { border-color: var(--color-selected-border); background: var(--color-selected); color: var(--color-on-selected); }
.schedule__slot:has(input:disabled) { background: var(--color-disabled); color: var(--color-on-disabled); }
.calendar__date:focus-visible, .calendar__scroll:focus-visible, .schedule__scroll:focus-visible, .schedule__slot:focus-within { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
@media (max-width: 44rem) { .schedule__item { grid-template-columns: minmax(0, 1fr); } }
@media (forced-colors: active) {
  .calendar__date--selected, .schedule__slot:has(input:checked) { outline: var(--border-width-strong) solid Highlight; border-color: Highlight; }
  .calendar__date:focus-visible, .calendar__scroll:focus-visible, .schedule__scroll:focus-visible, .schedule__slot:focus-within { outline-color: Highlight; }
}

/* Business navigation and task feedback. */
.breadcrumbs__list, .pagination__list, .steps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); list-style: none; padding: 0; }
.breadcrumbs__item { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; overflow-wrap: anywhere; }
.breadcrumbs__separator { color: var(--color-text-muted); }
.breadcrumbs__link, .pagination__link, .tabs__tab { display: inline-flex; align-items: center; min-height: var(--target-size-touch); padding: var(--space-2); overflow-wrap: anywhere; }
.pagination__link { justify-content: center; min-width: var(--target-size-touch); border: var(--border-width) solid var(--color-control-border); border-radius: var(--radius-small); }
.pagination__link[aria-current="page"], .tabs__tab[aria-selected="true"] { background: var(--color-selected); color: var(--color-on-selected); border: var(--border-width-strong) solid var(--color-selected-border); font-weight: var(--font-weight-strong); }
.pagination__link[aria-disabled="true"] { background: var(--color-disabled); color: var(--color-on-disabled); }
.pagination__summary { color: var(--color-text-muted); }
.tabs { min-width: 0; }
.tabs__list { display: flex; flex-wrap: wrap; gap: var(--space-2); border-block-end: var(--border-width) solid var(--color-control-border); }
.tabs__tab { border: var(--border-width) solid var(--color-control-border); border-radius: var(--radius-small) var(--radius-small) 0 0; }
.tabs__panel { padding-block: var(--space-4); overflow-wrap: anywhere; }
.progress { min-width: 0; }
.progress__label { display: block; font-weight: var(--font-weight-strong); }
.progress__bar { display: block; width: 100%; height: var(--space-4); accent-color: var(--color-selected-border); }
.progress__text { color: var(--color-text-muted); }
.steps { align-items: stretch; counter-reset: step; }
.steps__item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); border: var(--border-width) solid var(--color-control-border); border-radius: var(--radius-small); overflow-wrap: anywhere; }
.steps__item[aria-current="step"] { border: var(--border-width-strong) solid var(--color-selected-border); background: var(--color-selected); color: var(--color-on-selected); font-weight: var(--font-weight-strong); }
.upload { min-width: 0; padding: var(--space-4); border: var(--border-width) dashed var(--color-control-border); border-radius: var(--radius-medium); }
.upload__input { display: block; max-width: 100%; font: inherit; color: inherit; }
.upload__input::file-selector-button { min-height: var(--target-size-touch); margin-inline-end: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--color-surface); color: var(--color-text); border: var(--border-width) solid var(--color-control-border); border-radius: var(--radius-small); font: inherit; }
.upload__list { padding-inline-start: var(--space-5); overflow-wrap: anywhere; }
.upload__item { padding-block: var(--space-2); }
.upload__error { color: var(--color-danger); }
.selection { min-width: 0; }
.selection__options { min-width: 0; border: var(--border-width) solid var(--color-control-border); border-radius: var(--radius-small); padding: var(--space-3); }
.selection__option { display: flex; align-items: center; gap: var(--space-2); min-height: var(--target-size-touch); padding: var(--space-2); overflow-wrap: anywhere; }
.selection__option:has(input:checked) { background: var(--color-selected); color: var(--color-on-selected); }
.selection__option:has(input:disabled) { color: var(--color-on-disabled); }
.selection__summary { color: var(--color-text-muted); }
.breadcrumbs__link:focus-visible, .pagination__link:focus-visible, .tabs__tab:focus-visible, .tabs__panel:focus-visible, .upload__input:focus-visible, .selection__option:focus-within { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
/* Hidden must win over the display rules above, including before enhancement. */
.tabs [hidden], .selection [hidden], .upload [hidden] { display: none !important; }
@media (forced-colors: active) {
  .tabs__tab[aria-selected="true"], .pagination__link[aria-current="page"], .steps__item[aria-current="step"], .selection__option:has(input:checked) { border: var(--border-width-strong) solid Highlight; }
  .breadcrumbs__link:focus-visible, .pagination__link:focus-visible, .tabs__tab:focus-visible, .tabs__panel:focus-visible, .upload__input:focus-visible, .selection__option:focus-within { outline-color: Highlight; }
}

/* App-rendered dates and time rows; count changes sizing, never date semantics. */
.schedule__week {
  --schedule-day-count: 7;
  --schedule-day-width: 12rem;
  --schedule-time-width: 7rem;
  width: 100%;
  min-width: calc(var(--schedule-time-width) + var(--schedule-day-count) * var(--schedule-day-width));
  table-layout: fixed;
  border-collapse: collapse;
}
.schedule__week th, .schedule__week td { padding: var(--space-3); border: var(--border-width) solid var(--color-control-border); text-align: start; vertical-align: top; overflow-wrap: anywhere; }
.schedule__week th { background: var(--color-surface-muted); }
.schedule__time-column { width: var(--schedule-time-width); }
.schedule__day-label { display: block; }
.schedule__day-state { display: block; font-size: var(--font-size-small); font-weight: var(--font-weight-strong); }
.schedule__week [aria-current="date"] { border-block-end: var(--border-width-marker) solid var(--color-selected-border); }
.schedule__week .schedule__event + .schedule__event { margin-block-start: var(--space-2); }
@media (forced-colors: active) { .schedule__week [aria-current="date"] { border-block-end-color: Highlight; } }

.schedule__week caption { text-align: start; padding-block: var(--space-2); }

/* Navigation composes plain links, native disclosures and secondary sections. */
.navigation__link, .navigation__dropdown > summary { min-height: var(--target-size-touch); }
.navigation--vertical .navigation__list { flex-direction: column; align-items: stretch; }
.navigation--secondary { padding: var(--space-2); border-block-end: var(--border-width) solid var(--color-control-border); }
.navigation--vertical.navigation--secondary { border-block-end: 0; border-inline-end: var(--border-width) solid var(--color-control-border); }
.navigation__dropdown { position: relative; }
.navigation__dropdown > summary { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; list-style: none; }
.navigation__dropdown > summary::-webkit-details-marker { display: none; }
.navigation__submenu { position: absolute; inset-block-start: 100%; inset-inline-start: 0; z-index: var(--layer-popover); width: max-content; min-width: 14rem; max-width: min(22rem, calc(100vw - 3rem)); max-height: 60dvh; overflow-y: auto; list-style: none; padding: var(--space-2); margin: var(--space-1) 0 0; border: var(--border-width) solid var(--color-control-border); border-radius: var(--radius-small); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-overlay); }
.navigation__list > li:last-child .navigation__submenu,
.navigation__submenu--end { inset-inline-start: auto; inset-inline-end: 0; }
.navigation__submenu .navigation__link { white-space: normal; overflow-wrap: anywhere; }
.navigation--vertical .navigation__submenu,
.navigation--overlay .navigation__submenu { position: static; width: auto; min-width: 0; max-width: 100%; max-height: none; box-shadow: none; }
@media (max-width: 44rem) {
  .navigation__submenu { position: static; width: auto; min-width: 0; max-width: 100%; max-height: none; box-shadow: none; }
}
.navigation__submenu .navigation__link { color: var(--color-text); }
.navigation__submenu .navigation__link:hover { background: var(--color-surface-hover); }
.navigation__link:focus-visible, .navigation__dropdown > summary:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
/* Native disclosure picklists retain checkbox/radio semantics. */
.selection__picklist { border: var(--border-width) solid var(--color-control-border); border-radius: var(--radius-small); padding: var(--space-3); }
.selection__picklist > summary { cursor: pointer; min-height: var(--target-size-touch); padding: var(--space-2); font-weight: var(--font-weight-strong); }
.selection__pills { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin-block: var(--space-3); }
.selection__pill { display: inline-flex; max-width: 100%; min-width: 0; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3); border: var(--border-width) solid var(--color-selected-border); border-radius: 999px; background: var(--color-selected); color: var(--color-on-selected); font-size: var(--font-size-small); line-height: var(--line-height-control); overflow-wrap: anywhere; }
.selection__pill > span { min-width: 0; }
.selection__remove { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; min-width: 1.75rem; min-height: 1.75rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.selection__remove:hover { background: var(--color-surface); color: var(--color-text); }
.selection__remove .icon { width: 1rem; height: 1rem; }
@media (pointer: coarse) {
  .selection__remove { width: var(--target-size-touch); height: var(--target-size-touch); min-width: var(--target-size-touch); min-height: var(--target-size-touch); }
}
.selection__remove:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
/* Informational process chevrons keep labels inset from the pointed edges. */
.steps--chevron { gap: var(--space-2); }
.steps--chevron .steps__item { border: 0; padding: var(--space-4) var(--space-8); background: var(--color-surface-muted); clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 50%, calc(100% - 1rem) 100%, 0 100%, 1rem 50%); }
.steps--chevron .steps__item[aria-current="step"] { background: var(--color-selected); color: var(--color-on-selected); }
.steps--chevron:dir(rtl) .steps__item { clip-path: polygon(1rem 0, 100% 0, calc(100% - 1rem) 50%, 100% 100%, 1rem 100%, 0 50%); }
.navigation__dropdown > summary::after { content: ''; display: block; flex: 0 0 auto; width: .45em; height: .45em; margin-inline-start: auto; border-inline-end: var(--border-width-strong) solid currentColor; border-block-end: var(--border-width-strong) solid currentColor; transform: translateY(-.15em) rotate(45deg); }
.navigation__dropdown[open] > summary::after { transform: translateY(.1em) rotate(225deg); }
@media (forced-colors: active) { .selection__pill { border-color: Highlight; } .selection__remove:focus-visible { outline-color: Highlight; } }

/* Header disclosures use chrome triggers and light destination surfaces. */
.navigation__dropdown > .site-header__brand { min-height: var(--target-size-touch); padding: var(--space-2); border-radius: var(--radius-small); cursor: pointer; }
.navigation__dropdown > .site-header__brand:hover { background: var(--color-chrome-hover); }
.navigation__dropdown > .site-header__brand:focus-visible { outline: var(--focus-width) solid var(--color-focus-on-chrome); outline-offset: var(--focus-offset); }
.navigation__submenu { --color-focus: var(--color-link); --color-focus-gap: var(--color-surface); }
.navigation__submenu .navigation__link:focus-visible { background: var(--color-surface-hover); color: var(--color-text); }
/* Generic content components and theme roles for sites and applications. */
/* Explicit light regions can be nested inside dark pages and vice versa. */
.theme { color: var(--color-text); background: var(--color-background); --focus-ring: 0 0 0 var(--focus-gap-width) var(--color-focus-gap); }
.theme--light {
  color-scheme: light;
  --color-brand-navy: #131428;
  --color-brand-cyan: #00aad1;
  --color-brand-orange: #f26d23;
  --color-brand-magenta: #d1155d;
  --color-white: #fff;
  --color-grey-100: #f5f6f8;
  --color-grey-200: #eef0f5;
  --color-grey-300: #d9dce3;
  --color-grey-500: #8b90a0;
  --color-grey-700: #4a4e5c;
  --color-text: var(--color-brand-navy);
  --color-text-muted: #596174;
  --color-text-cyan: #00758f;
  --color-text-orange: #a94308;
  --color-text-magenta: #b81050;
  --color-link: #00758f;
  --color-link-hover: #00596d;
  --color-background: var(--color-surface);
  --color-surface: var(--color-white);
  --color-surface-muted: #f4f5f8;
  --color-surface-hover: #eef0f5;
  --color-border: var(--color-grey-300);
  --color-control-border: #737b8c;
  --color-placeholder: #596174;
  --color-primary: var(--color-brand-magenta);
  --color-primary-hover: #b81050;
  --color-primary-pressed: #950b40;
  --color-on-primary: #fff;
  --color-accent: var(--color-brand-cyan);
  --color-accent-hover: #009abd;
  --color-accent-pressed: #0096b8;
  --color-on-accent: #06242b;
  --color-orange: #a94308;
  --color-orange-hover: #8b3605;
  --color-orange-pressed: #702b04;
  --color-on-orange: #fff;
  --color-info: #00596d;
  --color-info-border: #00758f;
  --color-info-surface: #e0f3f8;
  --color-success: #17633a;
  --color-success-border: #17633a;
  --color-success-surface: #edf8f0;
  --color-warning: #754500;
  --color-warning-border: #8a5300;
  --color-warning-surface: #fff4d6;
  --color-danger: #b21e3d;
  --color-danger-border: #b21e3d;
  --color-danger-surface: #fff1f3;
  --color-danger-hover: #ffe0e6;
  --color-danger-pressed: #ffd0da;
  --color-selected: #e0f3f8;
  --color-on-selected: #06242b;
  --color-selected-border: #00758f;
  --color-disabled: #eef0f5;
  --color-on-disabled: #596174;
  --color-readonly: #f4f5f8;
  --color-chrome: var(--color-brand-navy);
  --color-on-chrome: #fff;
  --color-chrome-link: #8de8fa;
  --color-chrome-hover: #303248;
  --color-chrome-selected: #174658;
  --color-focus: #00758f;
  --color-focus-on-chrome: #8de8fa;
  --color-focus-gap: var(--color-surface);
  --color-backdrop: rgba(19, 20, 40, .58);
}
.theme--dark {
  color-scheme: dark;
  --color-text: #fff;
  --color-text-muted: #c4c8dc;
  --color-text-cyan: #8de8fa;
  --color-text-orange: #ffb589;
  --color-text-magenta: #ff9fc3;
  --color-link: #8de8fa;
  --color-link-hover: #c3f4ff;
  --color-background: #131428;
  --color-surface: #131428;
  --color-surface-muted: #293152;
  --color-surface-hover: #343e60;
  --color-border: #8b90a0;
  --color-control-border: #a5abc0;
  --color-placeholder: #c4c8dc;
  --color-selected: #174658;
  --color-on-selected: #fff;
  --color-selected-border: #8de8fa;
  --color-disabled: #293152;
  --color-on-disabled: #c4c8dc;
  --color-readonly: #293152;
  --color-info: #8de8fa;
  --color-info-border: #8de8fa;
  --color-info-surface: #173746;
  --color-success: #96e4b0;
  --color-success-border: #96e4b0;
  --color-success-surface: #163522;
  --color-warning: #ffd184;
  --color-warning-border: #ffd184;
  --color-warning-surface: #3d2d12;
  --color-danger: #ffb3c4;
  --color-danger-border: #ffb3c4;
  --color-danger-surface: #421e30;
  --color-danger-hover: #54283d;
  --color-danger-pressed: #633047;
  --color-chrome: #131428;
  --color-on-chrome: #fff;
  --color-chrome-link: #8de8fa;
  --color-chrome-hover: #303248;
  --color-chrome-selected: #174658;
  --color-focus: #8de8fa;
  --color-focus-on-chrome: #8de8fa;
  --color-focus-gap: #131428;
  color: var(--color-text);
  background: var(--color-background);
}
.site-header--fixed { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 10; }
.site-header__logo--large { height: 4rem; max-width: 7rem; }
.navigation--overlay { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; padding: var(--space-6); background: var(--color-chrome); color: var(--color-on-chrome); }
.navigation--overlay .navigation__list { flex-direction: column; align-items: stretch; text-align: center; font-size: var(--font-size-2xl); }
.navigation--overlay .navigation__link { overflow-wrap: anywhere; }
.navigation__close { display: block; margin-inline-start: auto; margin-block-end: var(--space-6); }
.hero { position: relative; isolation: isolate; padding: clamp(4rem, 10vw, 8rem) 0; }
.hero--gradient { background: linear-gradient(110deg, var(--color-surface), var(--color-surface-muted)); }
.hero--angled { padding-block-end: clamp(6rem, 12vw, 10rem); clip-path: polygon(0 0,100% 0,100% 94%,0 100%); }
.hero__inner { max-width: 62.5rem; }
.hero__title { margin: 0; font-size: clamp(2.6rem, 7vw, 5rem); line-height: var(--line-height-tight); overflow-wrap: anywhere; }
.hero__accent { color: var(--color-text-cyan); }
.hero__lead, .section__lead { max-width: 50rem; font-size: clamp(1rem, 2vw, 1.35rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-6); }
.section--spacious { padding-block: clamp(3rem, 7vw, 5rem); }
.section--muted { background: var(--color-surface-muted); color: var(--color-text); }
.section__inner { min-width: 0; }
.section__inner--narrow { max-width: 56.25rem; }
.grid--cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-8); }
.card--feature { margin: 0; padding: var(--space-4) 0 0; border: 0; border-block-start: var(--border-width-strong) solid var(--color-text-cyan); border-radius: 0; background: transparent; }
.card__title { margin-block-start: 0; font-size: var(--font-size-2xl); }
.card--numbered { display: flex; align-items: flex-start; gap: var(--space-4); margin: 0; border: 0; background: transparent; }
.card__number { flex: 0 0 auto; min-width: 2.5rem; min-height: 2.5rem; padding: var(--space-1); border: var(--border-width-strong) solid currentColor; border-radius: 50%; color: var(--color-text-cyan); text-align: center; }
.card--media { margin: 0; overflow: hidden; }
.card__image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-block-end: var(--space-4); }
.site-footer { padding-block: var(--space-8); background: var(--color-surface-muted); color: var(--color-text-muted); text-align: center; }
.site-footer__list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-6); list-style: none; padding: 0; margin: 0 0 var(--space-6); }
.site-footer__link { display: inline-flex; align-items: center; min-height: var(--target-size-touch); }
.site-footer__copyright { margin: 0; }
.article { max-width: 52rem; margin-inline: auto; padding-block: var(--space-8); overflow-wrap: anywhere; }
.article__summary { font-size: var(--font-size-xl); color: var(--color-text-muted); }
.article__image { display: block; width: 100%; height: auto; margin-block: var(--space-6); }
.article__body { line-height: 1.75; }
.article__body img, .article__body video { max-width: 100%; height: auto; }
.article__body pre { overflow-x: auto; }
@media (forced-colors: active) {
  .hero--gradient { background: Canvas; }
  .card--feature, .card__number { border-color: CanvasText; }
}

/* Locally hosted Material Symbols SVG masks; no icon-font dependency. */
.icon { display: inline-block; flex: 0 0 auto; width: 1.5rem; height: 1.5rem; vertical-align: -.25em; fill: currentColor; }
.icon--small { width: 1rem; height: 1rem; }
.icon--large { width: 2rem; height: 2rem; }
.icon--symbol { background-color: currentColor; -webkit-mask: var(--icon-image) center / contain no-repeat; mask: var(--icon-image) center / contain no-repeat; }
.icon--menu { --icon-image: url("../img/icons/menu.svg"); }
.icon--close { --icon-image: url("../img/icons/close.svg"); }
.icon--expand-more { --icon-image: url("../img/icons/expand_more.svg"); }
.icon--expand-less { --icon-image: url("../img/icons/expand_less.svg"); }
.icon--chevron-left { --icon-image: url("../img/icons/chevron_left.svg"); }
.icon--chevron-right { --icon-image: url("../img/icons/chevron_right.svg"); }
.icon--search { --icon-image: url("../img/icons/search.svg"); }
.icon--account-circle { --icon-image: url("../img/icons/account_circle.svg"); }
.icon--edit { --icon-image: url("../img/icons/edit.svg"); }
.icon--delete { --icon-image: url("../img/icons/delete.svg"); }
.icon--check-circle { --icon-image: url("../img/icons/check_circle.svg"); }
.icon--info { --icon-image: url("../img/icons/info.svg"); }
.icon--warning { --icon-image: url("../img/icons/warning.svg"); }
.icon--error { --icon-image: url("../img/icons/error.svg"); }
.icon--add { --icon-image: url("../img/icons/add.svg"); }
.icon--download { --icon-image: url("../img/icons/download.svg"); }
.navigation__toggle[aria-expanded="false"] .icon--close,
.navigation__toggle[aria-expanded="true"] .icon--menu { display: none; }
@media (forced-colors: active) { .icon--symbol { background-color: ButtonText; forced-color-adjust: none; } }

.site-header--transparent { background: transparent; --color-on-chrome: var(--color-text); --color-chrome-link: var(--color-link); --color-chrome-hover: var(--color-surface-hover); --color-focus-on-chrome: var(--color-focus); }
.section--surface { background: var(--color-surface); color: var(--color-text); }
.section--padded { padding: var(--panel-padding); }
.hero--compact { padding-block: var(--space-8); }
.hero--compact .hero__title { font-size: clamp(1.75rem, 4vw, 3rem); }

/* Record history and discussion preserve chronological DOM reading order. */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline__item { position: relative; margin-inline-start: var(--space-2); padding-block-end: var(--space-6); padding-inline-start: var(--space-6); border-inline-start: var(--border-width-strong) solid var(--color-control-border); overflow-wrap: anywhere; }
.timeline__item::before { content: ''; position: absolute; inset-inline-start: -.4rem; inset-block-start: .35rem; width: .65rem; height: .65rem; border-radius: 50%; background: var(--color-surface); border: var(--border-width-strong) solid var(--color-control-border); }
.timeline__item:last-child { padding-block-end: 0; border-inline-start-color: transparent; }
.timeline__title { margin: 0; font-size: var(--font-size-large); }
.timeline__meta, .comment__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-small); }
.comments { list-style: none; padding: 0; margin: 0; }
.comment { min-width: 0; padding: var(--space-4); margin-block-end: var(--space-4); border: var(--border-width) solid var(--color-control-border); border-radius: var(--radius-medium); background: var(--color-surface); color: var(--color-text); overflow-wrap: anywhere; }
.comment__header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.comment__author { margin: 0; font-size: var(--font-size-large); }
.comment__body { white-space: pre-wrap; overflow-wrap: anywhere; }
.comment__replies { list-style: none; padding-inline-start: var(--space-4); margin-block-start: var(--space-4); border-inline-start: var(--border-width-strong) solid var(--color-control-border); }
.comment--deleted { background: var(--color-surface-muted); }
.comment__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.comment__attachments { padding-inline-start: var(--space-5); }
/* Persistent messages; urgency is expressed in words and app-owned announcements. */
.notification-list { list-style: none; padding: 0; margin: 0; }
.notification { min-width: 0; padding: var(--space-4); margin-block-end: var(--space-3); border: var(--border-width) solid var(--color-control-border); border-inline-start-width: var(--border-width-marker); border-radius: var(--radius-medium); background: var(--color-surface); color: var(--color-text); overflow-wrap: anywhere; }
.notification__header { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: var(--space-2); }
.notification__title { margin: 0; font-size: var(--font-size-large); }
.notification__meta { color: var(--color-text-muted); font-size: var(--font-size-small); }
.notification__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.notification--unread { border-inline-start-color: var(--color-selected-border); }
.notification--error { border-color: var(--color-danger-border); background: var(--color-danger-surface); color: var(--color-danger); }
.notification[hidden], .notification [hidden] { display: none !important; }
@media (max-width: 44rem) { .comment__replies { padding-inline-start: var(--space-2); } }
@media (forced-colors: active) { .timeline__item::before { background: Canvas; border-color: CanvasText; } .notification--unread { border-inline-start-color: Highlight; } }

/* Hierarchy keeps native disclosure/list and table semantics. */
.tree { list-style: none; padding: 0; margin: 0; }
.tree__children { list-style: none; margin-block: var(--space-2); padding-inline-start: var(--space-5); border-inline-start: var(--border-width) solid var(--color-control-border); }
.tree__branch { padding-block: var(--space-1); }
.tree__branch > summary, .tree__link { min-height: var(--target-size-touch); padding: var(--space-2); overflow-wrap: anywhere; }
.tree__branch > summary { cursor: pointer; font-weight: var(--font-weight-strong); }
.tree__link { display: block; }
.tree__link[aria-current="page"] { background: var(--color-selected); color: var(--color-on-selected); border-inline-start: var(--border-width-marker) solid var(--color-selected-border); }
.tree-table__label { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding-inline-start: calc(var(--tree-depth, 0) * 1rem); }
.tree-table { --tree-depth: 0; }
.tree-table__toggle { min-width: var(--target-size-touch); min-height: var(--target-size-touch); border: var(--border-width) solid var(--color-control-border); border-radius: var(--radius-small); background: var(--color-surface); color: var(--color-text); font: inherit; cursor: pointer; }
.tree-table__toggle::before { content: '+'; }
.tree-table__toggle[aria-expanded="true"]::before { content: '−'; }
.tree-table [hidden] { display: none !important; }
.tree-table__toggle:focus-visible, .tree__link:focus-visible, .tree__branch > summary:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
/* Drawers share the native modal lifecycle; split views are ordinary page layout. */
.modal.drawer { --drawer-width: 30rem; position: fixed; inset-block: 0; inset-inline-start: auto; inset-inline-end: 0; margin: 0; width: min(var(--drawer-width), 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; padding: 0; border-radius: 0; }
.modal.drawer--start { inset-inline-start: 0; inset-inline-end: auto; }
.modal.drawer[open] { display: flex; flex-direction: column; }
.drawer > .modal__header, .drawer > .modal__actions { flex: 0 0 auto; margin: 0; padding: var(--panel-padding); }
.drawer > .modal__body { flex: 1 1 auto; }
.split-view { --split-view-master-width: 18rem; display: grid; grid-template-columns: minmax(0, var(--split-view-master-width)) minmax(0, 1fr); gap: var(--space-4); }
.split-view__master, .split-view__detail { min-width: 0; padding: var(--space-4); border: var(--border-width) solid var(--color-control-border); border-radius: var(--radius-medium); background: var(--color-surface); color: var(--color-text); overflow-wrap: anywhere; }
.split-view__list { list-style: none; padding: 0; margin: 0; }
.split-view__link { display: block; min-height: var(--target-size-touch); padding: var(--space-3); }
.split-view__link[aria-current="true"] { background: var(--color-selected); color: var(--color-on-selected); border-inline-start: var(--border-width-marker) solid var(--color-selected-border); }
.split-view__link:focus-visible, .split-view__detail:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
@media (max-width: 44rem) { .split-view { grid-template-columns: minmax(0, 1fr); } .tree__children { padding-inline-start: var(--space-3); } }
@media (forced-colors: active) { .tree__link[aria-current="page"], .split-view__link[aria-current="true"] { border-inline-start-color: Highlight; } }

/* Dashboard placeholders are decorative; the app owns busy/status transitions. */
.skeleton { display: grid; gap: var(--space-3); }
.skeleton__line { display: block; width: 100%; height: var(--space-4); border: var(--border-width) solid var(--color-control-border); border-radius: var(--radius-small); background: var(--color-surface-hover); }
.skeleton__line--short { width: 45%; }
.skeleton__line--heading { width: 65%; height: var(--space-8); }
.skeleton__block { min-height: 10rem; border: var(--border-width) solid var(--color-control-border); border-radius: var(--radius-medium); background: var(--color-surface-hover); }
.skeleton--pulse { animation: skeleton-pulse 1.8s ease-in-out infinite alternate; }
@keyframes skeleton-pulse { to { opacity: .55; } }
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-4); }
.metric { min-width: 0; padding: var(--space-4); border: var(--border-width) solid var(--color-control-border); border-radius: var(--radius-medium); background: var(--color-surface); color: var(--color-text); overflow-wrap: anywhere; }
.metric__label { margin: 0; font-size: var(--font-size-base); }
.metric__value { margin-block: var(--space-2); font-size: var(--font-size-3xl); font-weight: var(--font-weight-strong); line-height: var(--line-height-tight); font-variant-numeric: tabular-nums; }
.metric__comparison { margin-block: var(--space-2); }
.metric__meta { margin: 0; font-size: var(--font-size-small); color: var(--color-text-muted); }
/* Charts use semantic theme colours and remain paired with real data tables. */
.chart { min-width: 0; margin: 0; padding: var(--space-4); border: var(--border-width) solid var(--color-control-border); border-radius: var(--radius-medium); background: var(--color-surface); color: var(--color-text); }
.chart__title { margin-block: 0 var(--space-2); font-size: var(--font-size-xl); }
.chart__summary { margin-block: var(--space-2) var(--space-4); }
.chart__bars { display: grid; gap: var(--space-3); margin-block: var(--space-4); }
.chart__row { display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) minmax(0, 4rem); gap: var(--space-2); align-items: center; overflow-wrap: anywhere; }
.chart__track { min-width: 0; height: var(--space-6); border-inline-start: var(--border-width) solid var(--color-control-border); background: var(--color-surface-muted); }
.chart__bar { --chart-value: 0%; display: block; height: 100%; width: clamp(0%, var(--chart-value), 100%); background: var(--color-selected-border); border: var(--border-width) solid var(--color-selected-border); }
.chart__value { text-align: end; font-variant-numeric: tabular-nums; }
.chart__legend { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-block: var(--space-3); }
.chart__key { display: inline-flex; align-items: center; gap: var(--space-2); }
.chart__swatch { display: inline-block; width: 2rem; border-block-start: var(--border-width-marker) solid var(--color-selected-border); }
.chart__swatch--target { border-block-start-style: dashed; border-color: var(--color-text-muted); }
.chart__plot { display: block; width: 100%; height: auto; overflow: visible; }
.chart__axis { fill: none; stroke: var(--color-control-border); stroke-width: 1; }
.chart__series { fill: none; stroke: var(--color-selected-border); stroke-width: 3; stroke-linejoin: round; }
.chart__series--target { stroke: var(--color-text-muted); stroke-dasharray: 8 6; }
.chart__point { fill: var(--color-surface); stroke: var(--color-selected-border); stroke-width: 3; }
.chart__range { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); font-size: var(--font-size-small); }
.chart__table { margin-block-start: var(--space-4); }
@media (prefers-reduced-motion: reduce) { .skeleton--pulse { animation: none; } }
@media (forced-colors: active) {
  .skeleton__line, .skeleton__block { background: Canvas; border-color: CanvasText; }
  .chart__bar { background: Highlight; border-color: Highlight; forced-color-adjust: none; }
  .chart__series, .chart__point { stroke: CanvasText; }
  .chart__series--target { stroke: Highlight; }
  .chart__axis { stroke: CanvasText; }
  .chart__swatch { border-color: CanvasText; }
  .chart__swatch--target { border-color: Highlight; }
}

@media (max-width: 44rem) {
  .chart__row { grid-template-columns: minmax(0, 1fr) auto; }
  .chart__track { grid-column: 1 / -1; grid-row: 2; }
  .chart__value { grid-column: 2; grid-row: 1; }
}

/* Headers reflow within narrow containers as well as narrow viewports. */
.site-header__inner > *, .navigation, .navigation__list > li { min-width: 0; max-width: 100%; }
.site-header__brand, .navigation__link { overflow-wrap: anywhere; }

/* Semantic outcome states: wording/icons convey meaning independently of colour. */
.alert--success, .notification--success, .status--success { color: var(--color-success); background: var(--color-success-surface); border-color: var(--color-success-border); }
.alert--warning, .notification--warning, .status--warning { color: var(--color-warning); background: var(--color-warning-surface); border-color: var(--color-warning-border); }
.form__help--success { color: var(--color-success); }
.form__help--warning { color: var(--color-warning); }
.disclosure { min-width: 0; margin-block: var(--space-3); border: var(--border-width) solid var(--color-control-border); border-radius: var(--radius-medium); background: var(--color-surface); color: var(--color-text); }
.disclosure__summary { padding: var(--space-4); min-height: var(--target-size-touch); cursor: pointer; font-weight: var(--font-weight-strong); overflow-wrap: anywhere; }
.disclosure[open] > .disclosure__summary { border-block-end: var(--border-width) solid var(--color-border); }
.disclosure__body { padding: var(--space-4); overflow-wrap: anywhere; }
.disclosure__body > :first-child { margin-block-start: 0; }
.disclosure__body > :last-child { margin-block-end: 0; }
.disclosure__summary:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.code { font-family: ui-monospace, Consolas, monospace; font-size: .9em; background: var(--color-surface-muted); color: var(--color-text); padding: .1em .3em; border-radius: var(--radius-small); overflow-wrap: anywhere; }
.code-block { min-width: 0; margin-block: var(--space-4); border: var(--border-width) solid var(--color-control-border); border-radius: var(--radius-medium); background: var(--color-surface-muted); color: var(--color-text); }
.code-block__label { margin: 0; padding: var(--space-2) var(--space-4); border-block-end: var(--border-width) solid var(--color-control-border); font-weight: var(--font-weight-strong); }
.code-block__source { margin: 0; max-height: 32rem; overflow: auto; padding: var(--space-4); font: var(--font-size-small)/var(--line-height-relaxed) ui-monospace, Consolas, monospace; white-space: pre; tab-size: 2; }
.code-block__source:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: calc(-1 * var(--focus-width)); }
.code-block--wrap .code-block__source { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Reusable documentation shell, navigation, examples and reference presentation. */
.documentation { display: grid; grid-template-columns: 16rem minmax(0, 1fr); }
.documentation__sidebar { position: sticky; top: 0; height: 100dvh; overflow-y: auto; padding: 1.5rem; border-inline-end: 1px solid var(--color-border); background: var(--color-surface-muted); }
.documentation__brand { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; color: var(--color-text); font-weight: 900; text-decoration: none; }
.documentation__brand img { width: 2.5rem; }
.documentation__sidebar ol { padding-inline-start: 1.25rem; font-size: .875rem; }
.documentation__sidebar li { padding-block: .2rem; }
.documentation__main { min-width: 0; padding: 2rem clamp(1rem, 4vw, 4rem); max-width: 90rem; }
.documentation__intro { max-width: 52rem; margin-bottom: 2rem; }
.documentation__intro h1 { font-size: 2.25rem; }
.documentation__section { scroll-margin-top: 1rem; border-top: 1px solid var(--color-border); padding-block: 2rem; }
.documentation__section > h2 { font-size: 1.5rem; }
.documentation__section > h3 { margin-block-start: 1.5rem; font-size: 1.125rem; }
.documentation__preview { padding: 1.25rem; margin-block: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-medium); min-width: 0; }
.documentation__preview > :last-child { margin-bottom: 0; }
.documentation__preview > :first-child { margin-top: 0; }
.documentation__source { margin-block: 1rem; }
.documentation__source summary { cursor: pointer; color: var(--color-link); font-weight: 700; }
.documentation__source pre, .documentation__code { max-height: 32rem; overflow: auto; padding: 1rem; border-radius: var(--radius-small); background: var(--color-surface-muted); color: var(--color-text); font-size: .8125rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.documentation__classes { font-size: .875rem; overflow-wrap: anywhere; }
.documentation__tokens { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .5rem; }
.documentation__token { display: flex; align-items: center; gap: .5rem; padding: .5rem; border: 1px solid var(--color-border); font-size: .75rem; min-width: 0; overflow-wrap: anywhere; }
.documentation__swatch { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; border: 1px solid var(--color-control-border); }
.documentation__density-preview { border: 1px solid var(--color-border); border-radius: var(--radius-medium); margin-block: 1rem; }
.documentation__density-preview .card { margin: 0; }
.documentation__inventory { columns: 2 20rem; font-size: .8125rem; }
.documentation__inventory li { break-inside: avoid; padding-block: .15rem; overflow-wrap: anywhere; }
.documentation__note { padding-inline-start: 1rem; border-inline-start: 3px solid var(--color-selected-border); }
@media (max-width: 60rem) {
  .documentation { grid-template-columns: minmax(0, 1fr); }
  .documentation__sidebar { position: static; height: auto; border-inline-end: 0; border-bottom: 1px solid var(--color-border); }
  .documentation__sidebar ol { columns: 2; }
  .documentation__main { padding: 1.5rem 1rem; }
}
@media (max-width: 30rem) {
  .documentation__sidebar ol { columns: 1; }
  .documentation__preview { padding: .75rem; }
}

.documentation__group { font-size: .875rem; margin-block: 1.25rem .25rem; }
.documentation__preview-tools { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-block: .75rem; font-size: .8125rem; }
.documentation__preview-tools button { padding: .4rem .75rem; min-height: 2.75rem; border: 1px solid var(--color-control-border); border-radius: var(--radius-small); background: var(--color-surface); color: var(--color-text); font: inherit; cursor: pointer; }
.documentation__preview-tools button[aria-pressed="true"] { background: var(--color-selected); color: var(--color-on-selected); border-color: var(--color-selected-border); font-weight: 700; }
.documentation__preview-tools button:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }

.documentation__mobile-preview { display: block; width: 390px; max-width: 100%; height: 560px; border: 1px solid var(--color-border); border-radius: var(--radius-medium); }

.documentation__badge { display: inline-block; vertical-align: middle; padding: .15rem .5rem; border: 1px solid currentColor; border-radius: var(--radius-large); font-size: .6875rem; font-weight: var(--font-weight-strong); line-height: 1.4; white-space: nowrap; }
.documentation__badge--new { color: var(--color-on-selected); background: var(--color-selected); }
.documentation__badge--updated { color: var(--color-warning); background: var(--color-warning-surface); }
.documentation__section > h2 .documentation__badge { margin-inline-start: .35rem; }
.documentation__version-note { font-size: var(--font-size-small); }
@media (forced-colors: active) { .documentation__badge { color: CanvasText; background: Canvas; border-color: CanvasText; } }

.documentation__sidebar a { overflow-wrap: anywhere; }
.documentation__sidebar .documentation__badge { margin-inline-start: .25rem; font-size: .625rem; }

.documentation--embedded { grid-template-columns: minmax(0, 1fr); }
.documentation--embedded .documentation__sidebar { position: static; height: auto; }

/* Compact header navigation uses an icon-only control at the inline end. */
@media (max-width: 44rem) {
  .site-header__inner { position: relative; flex-direction: row; align-items: center; }
  .site-header__inner > .navigation[data-ui-navigation][data-ui-ready] { flex: 0 0 auto; width: auto; margin-inline-start: auto; }
  .site-header__inner > .navigation[data-ui-navigation][data-ui-ready] .navigation__list { position: absolute; inset-block-start: 100%; inset-inline: 0; z-index: var(--layer-popover); margin: 0; padding: var(--space-3); background: var(--color-chrome); }
}

/* Mobile headers reserve a stable control column and bound expanded menus. */
@media (max-width: 44rem) {
  .site-header__inner:has(> .navigation[data-ui-navigation][data-ui-ready]) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; }
  .site-header__inner > .site-header__brand, .site-header__inner > .navigation__dropdown { grid-column: 1; grid-row: 1; }
  .site-header__inner > .navigation[data-ui-navigation][data-ui-ready] { grid-column: 2; grid-row: 1; }
  .site-header__inner > .navigation__dropdown { position: static; }
  .site-header__brand { min-width: 0; }
  .site-header__brand > span { min-width: 0; overflow-wrap: anywhere; }
  .site-header__logo { flex: 0 1 auto; min-width: 0; max-width: min(3rem, 30%); height: auto; max-height: 3rem; }
  .site-header__inner > .navigation__dropdown > .navigation__submenu,
  .site-header__inner > .navigation[data-ui-navigation][data-ui-ready] .navigation__list {
    position: absolute; inset-block-start: 100%; inset-inline: 0; width: auto; min-width: 0; max-width: 100%; max-height: 60dvh; overflow-y: auto; overscroll-behavior: contain;
  }
}
/* Action labels may be localized or contain long identifiers. */
.button { max-width: 100%; overflow-wrap: anywhere; }
.button > span { min-width: 0; }
.button .icon { flex-shrink: 0; }

@media (max-width: 44rem) {
  .site-header__inner > .navigation__dropdown > .site-header__brand { gap: var(--space-1); padding-inline: 0; }
  .site-header__logo { max-width: 2rem; }
}

/* Information is a message severity, independent of selection or unread state. */
.alert--info, .notification--info, .status--info { color: var(--color-info); background: var(--color-info-surface); border-color: var(--color-info-border); }
.form__help--info { color: var(--color-info); }
.alert :is(h1, h2, h3, h4, h5, h6), .notification__title { color: inherit; }

/* Opt-in motion; application state owns timing and loading completion. */
.motion { transform-origin: center; }
.motion--hover-lift { transition: transform var(--motion-duration-fast) var(--motion-easing); }
@media (hover: hover) { .motion--hover-lift:hover { transform: translateY(-.2rem); } }
.motion--shake { animation: motion-shake .35s ease-in-out 1; }
.motion--pop { animation: motion-pop var(--motion-duration-medium) var(--motion-easing) 1; }
.motion--spin { display: inline-block; animation: motion-spin var(--motion-duration-progress) linear infinite; }
@keyframes motion-shake { 25%, 75% { transform: translateX(-.2rem); } 50% { transform: translateX(.2rem); } }
@keyframes motion-pop { from { transform: scale(.94); } to { transform: scale(1); } }
@keyframes motion-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .motion--hover-lift { transition: none; }
  .motion--hover-lift:hover { transform: none; }
  .motion--shake, .motion--pop, .motion--spin { animation: none; }
}
.documentation__requirement { font-size: var(--font-size-small); color: var(--color-text-muted); }

/* Advanced form controls retain native values, validation and keyboard behavior. */
.form__range { width: 100%; min-height: var(--target-size-touch); margin: 0; padding: 0; border: 0; accent-color: var(--color-selected-border); background: transparent; }
.form__range:focus-visible, .form__switch:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.form__switch { appearance: none; width: 3rem; height: 1.75rem; flex-shrink: 0; margin: 0; border: var(--border-width-strong) solid var(--color-control-border); border-radius: 999px; background: var(--color-surface-muted); position: relative; cursor: pointer; }
.form__switch::before { content: ''; position: absolute; width: 1.1rem; height: 1.1rem; inset-block-start: .2rem; inset-inline-start: .2rem; border-radius: 50%; background: var(--color-text-muted); }
.form__switch:checked { background: var(--color-selected); border-color: var(--color-selected-border); }
.form__switch:checked::before { inset-inline-start: auto; inset-inline-end: .2rem; background: var(--color-selected-border); }
.form__switch:disabled { opacity: .65; cursor: default; }
.form__switch-label { display: flex; align-items: center; gap: var(--space-3); min-height: var(--target-size-touch); }
.form-row { --form-columns: 1; display: grid; gap: var(--space-4); grid-template-columns: repeat(var(--form-columns), minmax(0, 1fr)); }
.form-row--two { --form-columns: 2; }
.form-row--three { --form-columns: 3; }
.form-row > * { min-width: 0; }
.form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); }
.form-grid__field { min-width: 0; grid-column: span 12; }
.form-grid__field--half { grid-column: span 6; }
.form-grid__field--third { grid-column: span 4; }
.form-grid__field--two-thirds { grid-column: span 8; }
.form-grid__field--quarter { grid-column: span 3; }
.input-group { display: flex; align-items: stretch; min-width: 0; max-width: 100%; }
.input-group > .form__control { flex: 1 1 8rem; width: 0; min-width: 0; border-radius: 0; }
.input-group__text { display: flex; align-items: center; padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--color-control-border); background: var(--color-surface-muted); color: var(--color-text); overflow-wrap: anywhere; }
.input-group > :first-child { border-start-start-radius: var(--radius-small); border-end-start-radius: var(--radius-small); }
.input-group > :last-child { border-start-end-radius: var(--radius-small); border-end-end-radius: var(--radius-small); }
.password-strength { width: 100%; height: var(--space-4); accent-color: var(--color-selected-border); }
.tags [hidden], .stepper [hidden] { display: none !important; }
.tags__entry { margin-block: var(--space-2); }
.chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; padding: var(--space-1) var(--space-2); border: var(--border-width) solid var(--color-selected-border); border-radius: 999px; background: var(--color-selected); color: var(--color-on-selected); overflow-wrap: anywhere; }
.chip__remove { min-width: var(--target-size-touch); min-height: var(--target-size-touch); border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.chip__remove:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.avatar { --avatar-size: 3rem; display: inline-flex; width: var(--avatar-size); height: var(--avatar-size); flex-shrink: 0; align-items: center; justify-content: center; overflow: hidden; border: var(--border-width) solid var(--color-control-border); border-radius: 50%; background: var(--color-selected); color: var(--color-on-selected); font-weight: var(--font-weight-strong); vertical-align: middle; }
.avatar__image { width: 100%; height: 100%; object-fit: cover; }
.avatar--small { --avatar-size: 2rem; }
.avatar--large { --avatar-size: 4rem; }
.avatar--square { border-radius: var(--radius-small); }
.avatar-group { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.tooltip[popover] { position: fixed; inset: auto; margin: 0; max-width: min(20rem, calc(100vw - 1rem)); padding: var(--space-3); border: var(--border-width) solid var(--color-control-border); border-radius: var(--radius-small); background: var(--color-chrome); color: var(--color-on-chrome); overflow-wrap: anywhere; box-shadow: var(--shadow-overlay); }
.scrollspy__link { display: block; min-height: var(--target-size-touch); padding: var(--space-2); }
.scrollspy__link[aria-current="location"] { border-inline-start: var(--border-width-marker) solid var(--color-selected-border); background: var(--color-selected); color: var(--color-on-selected); }
.scrollspy__viewport { max-height: 18rem; overflow: auto; padding: var(--space-4); border: var(--border-width) solid var(--color-control-border); scroll-padding-block-start: var(--space-3); }
.scrollspy__viewport:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.scrollspy__section { min-height: 15rem; scroll-margin-block-start: var(--space-3); }
.stepper__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-4); }
.progress-ring { --progress-value: 0; position: relative; display: inline-grid; place-items: center; width: 8rem; height: 8rem; color: var(--color-text); }
.progress-ring__plot { grid-area: 1 / 1; width: 100%; height: 100%; transform: rotate(-90deg); }
.progress-ring__track, .progress-ring__fill { fill: none; stroke-width: 8; }
.progress-ring__track { stroke: var(--color-control-border); }
.progress-ring__fill { stroke: var(--color-selected-border); stroke-dasharray: clamp(0, var(--progress-value), 100) 100; }
.progress-ring__value { grid-area: 1 / 1; font-size: var(--font-size-xl); font-weight: var(--font-weight-strong); }
/* Chart primitives: rendering/data transformations remain in the application. */
.chart__columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-block: var(--space-4); }
.chart__column { display: flex; flex-direction: column; gap: var(--space-2); align-items: stretch; min-width: 0; text-align: center; }
.chart__column-track { display: flex; align-items: end; height: 10rem; background: var(--color-surface-muted); border-block-end: var(--border-width) solid var(--color-control-border); }
.chart__column-fill { --chart-value: 0%; width: 100%; height: clamp(0%, var(--chart-value), 100%); background: var(--color-selected-border); border: var(--border-width) solid var(--color-selected-border); }
.chart__stack { display: flex; height: 2rem; width: 100%; border: var(--border-width) solid var(--color-control-border); }
.chart__segment { --chart-value: 0%; width: var(--chart-value); background: var(--color-selected-border); }
.chart__segment--alternate { background: repeating-linear-gradient(45deg, var(--color-text-orange), var(--color-text-orange) 4px, var(--color-surface) 4px, var(--color-surface) 7px); }
.chart__area { fill: var(--color-selected); stroke: var(--color-selected-border); stroke-width: 2; }
.chart__slice { fill: none; stroke: var(--color-selected-border); stroke-width: 22; }
.chart__slice--dashed { stroke: var(--color-text-orange); stroke-dasharray: 8 3; }
.chart__slice--dotted { stroke: var(--color-text-magenta); stroke-dasharray: 2 3; }
.chart__doughnut { display: block; width: min(100%, 16rem); height: auto; margin-inline: auto; }
.sparkline { display: inline-block; width: 6rem; height: 2rem; vertical-align: middle; }
.sparkline__line { fill: none; stroke: var(--color-selected-border); stroke-width: 2; }
@media (max-width: 44rem) { .form-row { --form-columns: 1; } .form-grid__field { grid-column: span 12; } .input-group { flex-wrap: wrap; } .input-group > .form__control { flex-basis: 8rem; } }
@media (forced-colors: active) {
  .form__switch:checked { border-color: Highlight; }
  .form__switch:checked::before { background: Highlight; }
  .chart__column-fill, .chart__segment { background: Highlight; border-color: Highlight; forced-color-adjust: none; }
  .chart__segment--alternate { background: CanvasText; }
  .chart__area { fill: Canvas; stroke: CanvasText; }
  .chart__slice, .sparkline__line { stroke: CanvasText; }
  .chart__slice--dashed, .chart__slice--dotted { stroke: Highlight; }
  .progress-ring__track { stroke: CanvasText; } .progress-ring__fill { stroke: Highlight; }
}

/* Six visual slots preserve one native field for paste, autofill and editing. */
.otp { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); width: min(100%, 20rem); container-type: inline-size; }
.otp__box { height: 3rem; border: var(--border-width) solid var(--color-control-border); border-radius: var(--radius-small); background: var(--color-surface); }
.otp .otp__input { position: absolute; inset: 0; width: 100%; height: 3rem; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: var(--radius-small); background: transparent; color: var(--color-text); font-family: ui-monospace, Consolas, monospace; font-size: 1.25rem; font-weight: var(--font-weight-strong); line-height: 3rem; letter-spacing: calc((100cqw + var(--space-2)) / 6 - 1ch); text-indent: calc((100cqw - 5 * var(--space-2)) / 12 - .5ch); direction: ltr; }
.otp:has(:disabled) { opacity: .6; }

/* Reserve the trailing character advance so native editing never scrolls digits. */
.otp { overflow: clip; border-radius: var(--radius-small); }
.otp .otp__input { width: calc(100% + 3rem); max-width: none; }
.otp:focus-within { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.otp .otp__input:focus-visible { outline: none; }