/*!
 * Flux 2.0 — component layer
 *
 * Framework-agnostic CSS for the documented components, built entirely from
 * Tier 3 tokens. Optional: import it to get working components, or read it as
 * the reference implementation and reproduce the same token bindings in your
 * own framework.
 *
 * Every component themes automatically, because Tier 3 references Tier 2.
 *
 *   @import url("https://flux.kaptio.com/tokens/v2/flux.css");
 *   @import url("https://flux.kaptio.com/tokens/v2/flux-components.css");
 *
 * Canonical: https://flux.kaptio.com/components
 */

/* Registered so the spinner's arc length can animate. */
@property --flux-spinner-arc {
  syntax: '<percentage>';
  initial-value: 20%;
  inherits: false;
}

@layer flux.components {
  /* Components are sized border-box whether or not the page has its own reset. */
  :where([class*="flux-"]),
  :where([class*="flux-"])::before,
  :where([class*="flux-"])::after {
    box-sizing: border-box;
  }

  /* Button ---------------------------------------------------------- */

  .flux-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--flux-button-gap);
    height: var(--flux-button-height-md);
    padding-inline: var(--flux-button-padding-x-md);
    border: var(--flux-hairline) solid transparent;
    border-radius: var(--flux-button-radius);
    background: var(--flux-surface-brand);
    color: var(--flux-text-on-color);
    font-family: var(--flux-font-sans);
    font-size: var(--flux-button-font-size-md);
    font-weight: var(--flux-button-font-weight);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
      background-color var(--flux-duration-fast) var(--flux-ease-productive),
      border-color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-button:hover {
    background: var(--flux-surface-brand-hover);
    color: var(--flux-text-on-color);
  }

  .flux-button:active {
    background: var(--flux-surface-brand-active);
  }

  /* Trailing chevron on a button that opens a menu or panel; it flips while open. */
  .flux-button__chevron {
    flex: none;
    width: var(--flux-button-chevron-size);
    height: var(--flux-button-chevron-size);
    transition: transform var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-button[aria-expanded='true'] .flux-button__chevron {
    transform: rotate(180deg);
  }

  .flux-button:disabled,
  .flux-button[aria-disabled='true'] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .flux-button--secondary {
    background: var(--flux-layer-03);
    color: var(--flux-text-primary);
  }

  .flux-button--secondary:hover {
    background: var(--flux-layer-hover-03);
    color: var(--flux-text-primary);
  }

  .flux-button--outline {
    background: transparent;
    border-color: var(--flux-border-brand);
    color: var(--flux-text-brand);
  }

  .flux-button--outline:hover {
    background: var(--flux-surface-brand-subtle);
    color: var(--flux-text-brand);
  }

  .flux-button--ghost {
    background: transparent;
    color: var(--flux-text-brand);
  }

  .flux-button--ghost:hover {
    background: var(--flux-surface-brand-subtle);
    color: var(--flux-text-brand);
  }

  .flux-button--danger {
    background: var(--flux-text-error);
    color: var(--flux-white);
  }

  .flux-button--danger:hover {
    background: color-mix(in srgb, var(--flux-text-error) 88%, black);
    color: var(--flux-white);
  }

  /* The single sanctioned yellow fill. One per view, never for navigation. */
  .flux-button--cta {
    background: var(--flux-surface-cta);
    color: var(--flux-text-on-cta);
  }

  .flux-button--cta:hover {
    background: var(--flux-surface-cta-hover);
    color: var(--flux-text-on-cta);
  }

  .flux-button--sm {
    height: var(--flux-button-height-sm);
    padding-inline: var(--flux-button-padding-x-sm);
    font-size: var(--flux-button-font-size-sm);
  }

  .flux-button--lg {
    height: var(--flux-button-height-lg);
    padding-inline: var(--flux-button-padding-x-lg);
    font-size: var(--flux-button-font-size-lg);
  }

  /* Field ----------------------------------------------------------- */

  .flux-field {
    display: block;
  }

  .flux-field__label {
    display: block;
    margin-bottom: var(--flux-field-label-gap);
    font-size: var(--flux-text-sm);
    font-weight: var(--flux-weight-bold);
    color: var(--flux-text-primary);
  }

  .flux-field__required {
    color: var(--flux-text-error);
  }

  .flux-field__header {
    display: flex;
    align-items: center;
    gap: var(--flux-space-1);
    margin-bottom: var(--flux-field-label-gap);
  }

  .flux-field__header .flux-field__label {
    margin-bottom: 0;
  }

  .flux-info {
    position: relative;
    display: inline-flex;
  }

  .flux-info__trigger {
    display: inline-grid;
    place-items: center;
    width: var(--flux-field-info-size);
    height: var(--flux-field-info-size);
    padding: 0;
    border: 0;
    border-radius: var(--flux-radius-sm);
    background: transparent;
    color: var(--flux-field-info-icon);
    cursor: help;
    transition: color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-info__trigger:hover,
  .flux-info[data-open] .flux-info__trigger {
    color: var(--flux-field-info-icon-hover);
  }

  .flux-info__trigger svg {
    width: var(--flux-field-info-icon-size);
    height: var(--flux-field-info-icon-size);
  }

  .flux-info__bubble {
    position: absolute;
    z-index: 2;
    inset-block-end: calc(100% + var(--flux-space-1));
    inset-inline-start: 0;
    inline-size: max-content;
    max-inline-size: var(--flux-field-info-max-width);
    padding: var(--flux-field-info-padding-y) var(--flux-field-info-padding-x);
    border: var(--flux-hairline) solid var(--flux-field-info-border);
    border-radius: var(--flux-radius-sm);
    background: var(--flux-field-info-bg);
    box-shadow: var(--flux-field-info-shadow);
    color: var(--flux-field-info-text);
    font-size: var(--flux-text-sm);
    font-weight: var(--flux-weight-light);
    line-height: var(--flux-leading-normal);
  }

  .flux-input,
  .flux-textarea {
    display: block;
    width: 100%;
    height: var(--flux-field-height);
    padding-inline: var(--flux-field-padding-x);
    border: var(--flux-hairline) solid var(--flux-field-border);
    border-radius: var(--flux-field-radius);
    background: var(--flux-field-bg);
    color: var(--flux-field-text);
    font-family: var(--flux-font-sans);
    font-size: var(--flux-field-font-size);
    font-weight: var(--flux-weight-light);
    transition: border-color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-textarea {
    height: auto;
    min-height: var(--flux-textarea-min-height);
    padding-block: var(--flux-space-2);
    resize: vertical;
  }

  .flux-select {
    position: relative;
    display: block;
  }

  .flux-select__control {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--flux-space-2);
    width: 100%;
    height: var(--flux-field-height);
    padding-inline: var(--flux-field-padding-x);
    padding-right: var(--flux-space-8);
    border: var(--flux-hairline) solid var(--flux-field-border);
    border-radius: var(--flux-field-radius);
    background: var(--flux-field-bg);
    color: var(--flux-field-text);
    font-family: var(--flux-font-sans);
    font-size: var(--flux-field-font-size);
    font-weight: var(--flux-weight-light);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-select__chevron,
  .flux-multiselect__chevron {
    position: absolute;
    top: 50%;
    right: var(--flux-space-3);
    width: var(--flux-select-chevron-size);
    height: var(--flux-select-chevron-size);
    color: var(--flux-icon-subtle);
    pointer-events: none;
    transform: translateY(-50%);
    transition: transform var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-select__control[aria-expanded='true'] .flux-select__chevron,
  .flux-multiselect[open] .flux-multiselect__chevron {
    transform: translateY(-50%) rotate(180deg);
  }

  .flux-select__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .flux-select__panel {
    position: absolute;
    z-index: 1;
    inset-block-start: calc(100% + var(--flux-space-1));
    inset-inline: 0;
    max-block-size: var(--flux-select-panel-max-height);
    overflow-y: auto;
    border: var(--flux-hairline) solid var(--flux-field-border);
    border-radius: var(--flux-field-radius);
    background: var(--flux-layer-01);
    box-shadow: var(--flux-shadow-md);
  }

  .flux-select__options {
    margin: 0;
    padding: var(--flux-space-1) 0;
    list-style: none;
  }

  .flux-select__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--flux-space-3);
    width: 100%;
    padding: var(--flux-space-2) var(--flux-field-padding-x);
    border: 0;
    background: transparent;
    color: var(--flux-text-primary);
    font-family: var(--flux-font-sans);
    font-size: var(--flux-field-font-size);
    font-weight: var(--flux-weight-light);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-select__option:hover {
    background: var(--flux-layer-hover-01);
  }

  .flux-select__option[aria-selected='true'] {
    background: var(--flux-surface-selected);
  }

  .flux-select__check {
    flex: none;
    width: var(--flux-select-chevron-size);
    height: var(--flux-select-chevron-size);
    color: var(--flux-icon-primary);
    opacity: 0;
  }

  .flux-select__option[aria-selected='true'] .flux-select__check {
    opacity: 1;
  }

  .flux-select__group + .flux-select__group {
    margin-top: var(--flux-space-1);
    padding-top: var(--flux-space-1);
    border-top: var(--flux-hairline) solid var(--flux-border-subtle);
  }

  .flux-select__group-label {
    display: block;
    padding: var(--flux-space-2) var(--flux-field-padding-x) var(--flux-space-1);
    color: var(--flux-text-secondary);
    font-size: var(--flux-text-sm);
    font-weight: var(--flux-weight-bold);
  }

  .flux-select__group > ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* With a search field, only the option list scrolls, so the field stays in view. */
  .flux-select__panel--search:not([hidden]) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .flux-select__panel--search .flux-select__options {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  .flux-select__search-row {
    flex: none;
    padding: var(--flux-space-2) var(--flux-space-2) 0;
  }

  .flux-select__empty {
    margin: 0;
    padding: var(--flux-space-3) var(--flux-field-padding-x);
    color: var(--flux-text-secondary);
    font-size: var(--flux-field-font-size);
  }

  .flux-multiselect {
    position: relative;
    display: block;
  }

  .flux-multiselect__control {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--flux-space-2);
    width: 100%;
    height: var(--flux-field-height);
    padding-inline: var(--flux-field-padding-x);
    padding-right: var(--flux-space-8);
    border: var(--flux-hairline) solid var(--flux-field-border);
    border-radius: var(--flux-field-radius);
    background: var(--flux-field-bg);
    color: var(--flux-field-text);
    font-family: var(--flux-font-sans);
    font-size: var(--flux-field-font-size);
    font-weight: var(--flux-weight-light);
    list-style: none;
    cursor: pointer;
    transition: border-color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-multiselect__control::-webkit-details-marker {
    display: none;
  }

  .flux-multiselect__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .flux-multiselect__panel {
    position: absolute;
    z-index: 1;
    inset-block-start: calc(100% + var(--flux-space-1));
    inset-inline: 0;
    max-block-size: var(--flux-multiselect-panel-max-height);
    overflow-y: auto;
    border: var(--flux-hairline) solid var(--flux-field-border);
    border-radius: var(--flux-field-radius);
    background: var(--flux-layer-01);
    box-shadow: var(--flux-shadow-md);
  }

  .flux-multiselect__options {
    margin: 0;
    padding: var(--flux-space-1) 0;
    list-style: none;
  }

  .flux-multiselect__option {
    display: flex;
    align-items: center;
    gap: var(--flux-control-label-gap);
    padding: var(--flux-space-2) var(--flux-field-padding-x);
    color: var(--flux-text-primary);
    font-size: var(--flux-field-font-size);
    font-weight: var(--flux-weight-light);
    cursor: pointer;
    transition: background-color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-multiselect__option:hover {
    background: var(--flux-layer-hover-01);
  }

  .flux-multiselect__option input[type='checkbox'] {
    flex: none;
    width: var(--flux-control-size);
    height: var(--flux-control-size);
    margin: 0;
    accent-color: var(--flux-control-checked-bg);
  }

  .flux-multiselect:hover .flux-multiselect__control,
  .flux-select:hover .flux-select__control {
    border-color: var(--flux-field-border-hover);
  }

  .flux-multiselect--disabled,
  .flux-multiselect--disabled .flux-multiselect__control {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
  }

  .flux-multiselect[aria-invalid='true'] .flux-multiselect__control {
    border-color: var(--flux-field-border-error);
  }

  .flux-input::placeholder,
  .flux-textarea::placeholder {
    color: var(--flux-field-placeholder);
  }

  .flux-input:hover,
  .flux-textarea:hover {
    border-color: var(--flux-field-border-hover);
  }

  .flux-input:disabled,
  .flux-textarea:disabled {
    background: var(--flux-surface-disabled);
    opacity: 0.6;
    cursor: not-allowed;
  }

  .flux-input[aria-invalid='true'],
  .flux-textarea[aria-invalid='true'] {
    border-color: var(--flux-field-border-error);
  }

  .flux-select[aria-invalid='true'] .flux-select__control {
    border-color: var(--flux-field-border-error);
  }

  .flux-field__help {
    margin: var(--flux-space-1) 0 0;
    font-size: var(--flux-text-xs);
    color: var(--flux-text-subtle);
  }

  .flux-field__help[data-tone='error'] {
    color: var(--flux-text-error);
  }

  /* Date picker ----------------------------------------------------- */

  .flux-date-picker {
    position: relative;
    display: block;
  }

  .flux-date-picker__control {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--flux-space-2);
    width: 100%;
    height: var(--flux-field-height);
    padding-inline: var(--flux-field-padding-x);
    padding-right: var(--flux-space-8);
    border: var(--flux-hairline) solid var(--flux-field-border);
    border-radius: var(--flux-field-radius);
    background: var(--flux-field-bg);
    color: var(--flux-field-text);
    font-family: var(--flux-font-sans);
    font-size: var(--flux-field-font-size);
    font-weight: var(--flux-weight-light);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-date-picker:hover .flux-date-picker__control {
    border-color: var(--flux-field-border-hover);
  }

  .flux-date-picker[aria-invalid='true'] .flux-date-picker__control {
    border-color: var(--flux-field-border-error);
  }

  .flux-date-picker__icon,
  .flux-date-picker__chevron {
    flex: none;
    width: var(--flux-datepicker-trigger-icon-size);
    height: var(--flux-datepicker-trigger-icon-size);
    color: var(--flux-icon-subtle);
  }

  .flux-date-picker__chevron {
    position: absolute;
    top: 50%;
    right: var(--flux-space-3);
    pointer-events: none;
    transform: translateY(-50%);
    transition: transform var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-date-picker__control[aria-expanded='true'] .flux-date-picker__chevron {
    transform: translateY(-50%) rotate(180deg);
  }

  .flux-date-picker__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .flux-date-picker__value[data-placeholder] {
    color: var(--flux-field-placeholder);
  }

  .flux-date-picker__panel {
    position: absolute;
    z-index: 2;
    inset-block-start: calc(100% + var(--flux-space-1));
    inset-inline-start: 0;
    width: var(--flux-datepicker-panel-width);
    max-width: calc(100vw - (var(--flux-space-4) * 2));
    padding: var(--flux-datepicker-panel-padding);
    border: var(--flux-hairline) solid var(--flux-datepicker-panel-border);
    border-radius: var(--flux-field-radius);
    background: var(--flux-datepicker-panel-bg);
    box-shadow: var(--flux-shadow-md);
  }

  .flux-date-picker__status {
    margin: 0 0 var(--flux-space-2);
    color: var(--flux-text-secondary);
    font-size: var(--flux-text-xs);
  }

  .flux-date-picker__header {
    display: grid;
    grid-template-columns: var(--flux-datepicker-nav-size) 1fr var(--flux-datepicker-nav-size);
    align-items: center;
    gap: var(--flux-space-2);
    margin-bottom: var(--flux-space-3);
  }

  .flux-date-picker__month {
    margin: 0;
    color: var(--flux-text-primary);
    font-size: var(--flux-text-sm);
    font-weight: var(--flux-weight-bold);
    text-align: center;
  }

  .flux-date-picker__nav {
    display: grid;
    place-items: center;
    width: var(--flux-datepicker-nav-size);
    height: var(--flux-datepicker-nav-size);
    padding: 0;
    border: 0;
    border-radius: var(--flux-radius-sm);
    background: transparent;
    color: var(--flux-icon-secondary);
    cursor: pointer;
    transition:
      background-color var(--flux-duration-fast) var(--flux-ease-productive),
      color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-date-picker__nav:hover {
    background: var(--flux-layer-hover-01);
    color: var(--flux-icon-primary);
  }

  .flux-date-picker__weekdays,
  .flux-date-picker__grid {
    display: grid;
    grid-template-columns: repeat(7, var(--flux-datepicker-day-size));
    gap: var(--flux-datepicker-grid-gap);
  }

  .flux-date-picker__weekdays {
    margin-bottom: var(--flux-space-1);
  }

  .flux-date-picker__weekday,
  .flux-date-picker__blank,
  .flux-date-picker__day {
    display: grid;
    place-items: center;
    width: var(--flux-datepicker-day-size);
    height: var(--flux-datepicker-day-size);
  }

  .flux-date-picker__weekday {
    color: var(--flux-datepicker-weekday-text);
    font-family: var(--flux-font-mono);
    font-size: var(--flux-text-xs);
    font-weight: var(--flux-weight-mono-bold);
  }

  .flux-date-picker__day {
    padding: 0;
    border: var(--flux-hairline) solid transparent;
    border-radius: var(--flux-radius-sm);
    background: transparent;
    color: var(--flux-datepicker-day-text);
    font-family: var(--flux-font-mono);
    font-size: var(--flux-text-sm);
    font-weight: var(--flux-weight-mono-regular);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition:
      background-color var(--flux-duration-fast) var(--flux-ease-productive),
      color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-date-picker__day:hover {
    background: var(--flux-layer-hover-01);
  }

  .flux-date-picker__day[aria-current='date'] {
    border-color: var(--flux-datepicker-today-border);
  }

  .flux-date-picker__day[data-in-range] {
    background: var(--flux-datepicker-range-bg);
  }

  .flux-date-picker__day[data-range-preview] {
    background: var(--flux-datepicker-selected-bg);
    color: var(--flux-datepicker-selected-text);
    font-weight: var(--flux-weight-mono-bold);
  }

  .flux-date-picker__day[aria-selected='true'] {
    background: var(--flux-datepicker-selected-bg);
    color: var(--flux-datepicker-selected-text);
    font-weight: var(--flux-weight-mono-bold);
  }

  .flux-date-picker__day[aria-selected='true']:hover {
    background: var(--flux-surface-brand-hover);
  }

  .flux-date-picker__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--flux-space-3);
    padding-top: var(--flux-space-3);
    border-top: var(--flux-hairline) solid var(--flux-border-subtle);
  }

  .flux-date-picker__clear {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--flux-text-link);
    font-family: var(--flux-font-sans);
    font-size: var(--flux-text-xs);
    font-weight: var(--flux-weight-bold);
    cursor: pointer;
  }

  .flux-date-picker__clear:hover {
    color: var(--flux-text-link-hover);
  }

  /* Card ------------------------------------------------------------ */

  .flux-card {
    padding: var(--flux-card-padding);
    border: var(--flux-hairline) solid var(--flux-card-border);
    border-radius: var(--flux-card-radius);
    background: var(--flux-card-bg);
  }

  .flux-card--interactive {
    display: block;
    color: inherit;
    text-decoration: none;
    transition:
      border-color var(--flux-duration-fast) var(--flux-ease-productive),
      box-shadow var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-card--interactive:hover {
    border-color: var(--flux-card-border-hover);
    box-shadow: var(--flux-card-shadow-hover);
    color: inherit;
  }

  .flux-card__title {
    margin: 0;
    font-size: var(--flux-text-base);
    font-weight: var(--flux-weight-bold);
    color: var(--flux-text-primary);
  }

  .flux-card__body {
    margin: var(--flux-space-2) 0 0;
    font-size: var(--flux-text-sm);
    line-height: var(--flux-leading-relaxed);
    color: var(--flux-text-secondary);
  }

  .flux-card__footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--flux-space-2);
    margin-top: var(--flux-space-4);
    padding-top: var(--flux-space-4);
    border-top: var(--flux-hairline) solid var(--flux-card-border);
  }

  /* Metric ---------------------------------------------------------- */

  /* Each metric spans three rows of a subgrid, so labels, values and changes
     line up across the row however long any one of them is. */
  /* A card is already the surface; a second outline inside it is a box in a box. */
  .flux-card .flux-metrics {
    padding: 0;
    border: 0;
    background: none;
  }

  .flux-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--flux-metric-min-width), 100%), 1fr));
    gap: var(--flux-metric-gap-y) var(--flux-metric-gap-x);
    margin: 0;
    padding: var(--flux-metric-padding);
    border: var(--flux-hairline) solid var(--flux-metric-border);
    border-radius: var(--flux-metric-radius);
    background: var(--flux-metric-bg);
  }

  /* Four metrics go from four columns to two to one, never three and an orphan.
     The multiplied term is negative once four columns fit and huge before. */
  .flux-metrics:has(> .flux-metric:nth-child(4):last-child) {
    grid-template-columns: repeat(
      auto-fit,
      minmax(
        max(
          min(var(--flux-metric-min-width), 100%),
          min(
            calc((100% - var(--flux-metric-gap-x)) / 2),
            max(var(--flux-metric-min-width), calc((4 * var(--flux-metric-min-width) + 3 * var(--flux-metric-gap-x) - 100%) * 999))
          )
        ),
        1fr
      )
    );
  }

  .flux-metric {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: var(--flux-metric-part-gap);
    align-content: start;
    margin: 0;
  }

  .flux-metric__label {
    color: var(--flux-metric-label-color);
    font-size: var(--flux-metric-label-size);
    font-weight: var(--flux-weight-bold);
  }

  .flux-metric__value {
    margin: 0;
    align-self: end;
    color: var(--flux-metric-value-color);
    font-size: var(--flux-metric-value-size);
    font-weight: var(--flux-weight-bold);
    line-height: var(--flux-leading-tight);
    letter-spacing: var(--flux-metric-value-tracking);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* A currency code or unit word, set small so the figure keeps the weight. */
  .flux-metric__unit {
    margin-inline-end: var(--flux-space-1);
    letter-spacing: var(--flux-tracking-normal);
    color: var(--flux-metric-label-color);
    font-size: var(--flux-metric-label-size);
    font-weight: var(--flux-weight-bold);
  }

  .flux-metric__change {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--flux-space-1);
    margin: 0;
    color: var(--flux-metric-change-neutral);
    font-size: var(--flux-metric-change-size);
    font-weight: var(--flux-weight-bold);
    font-variant-numeric: tabular-nums;
  }

  .flux-metric__change[data-tone='positive'] {
    color: var(--flux-metric-change-positive);
  }

  .flux-metric__change[data-tone='negative'] {
    color: var(--flux-metric-change-negative);
  }

  .flux-metric__change svg {
    flex: none;
    width: var(--flux-metric-icon-size);
    height: var(--flux-metric-icon-size);
  }

  .flux-metric__context {
    color: var(--flux-metric-change-neutral);
    font-weight: var(--flux-weight-light);
  }

  /* Timeline -------------------------------------------------------- */

  /* One markup, two layouts: time above the title for a history, or time in
     its own column for a schedule. The rail joins marker centres, which sit
     on the first line of text. */
  .flux-timeline {
    --flux-timeline-marker-column: var(--flux-timeline-marker-current-size);
    --flux-timeline-rail-x: calc(var(--flux-timeline-marker-column) / 2);

    display: grid;
    gap: var(--flux-timeline-item-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--flux-timeline-font-size);
  }

  .flux-timeline--schedule {
    --flux-timeline-rail-x: calc(
      var(--flux-timeline-time-width) + var(--flux-timeline-column-gap) + var(--flux-timeline-marker-column) / 2
    );
  }

  .flux-timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: var(--flux-timeline-marker-column) minmax(0, 1fr);
    grid-template-areas:
      'marker time'
      '. content';
    column-gap: var(--flux-timeline-column-gap);
  }

  .flux-timeline--schedule .flux-timeline__item {
    grid-template-columns: var(--flux-timeline-time-width) var(--flux-timeline-marker-column) minmax(0, 1fr);
    grid-template-areas: 'time marker content';
  }

  .flux-timeline__item:not(:last-child)::before {
    content: '';
    position: absolute;
    inset-block: calc(0.5lh) calc(-1 * var(--flux-timeline-item-gap) - 0.5lh);
    inset-inline-start: calc(var(--flux-timeline-rail-x) - var(--flux-timeline-rail-width) / 2);
    inline-size: var(--flux-timeline-rail-width);
    background: var(--flux-timeline-rail);
  }

  .flux-timeline__marker {
    position: relative;
    grid-area: marker;
    justify-self: center;
    inline-size: var(--flux-timeline-marker-size);
    block-size: var(--flux-timeline-marker-size);
    margin-block-start: calc((1lh - var(--flux-timeline-marker-size)) / 2);
    border: var(--flux-hairline) solid var(--flux-timeline-marker-upcoming);
    border-radius: var(--flux-timeline-marker-radius);
    background: var(--flux-timeline-marker-bg);
  }

  .flux-timeline__item[data-state='done'] .flux-timeline__marker,
  .flux-timeline__item[aria-current] .flux-timeline__marker {
    border-color: var(--flux-timeline-marker-done);
    background: var(--flux-timeline-marker-done);
  }

  .flux-timeline__item[aria-current] .flux-timeline__marker {
    inline-size: var(--flux-timeline-marker-current-size);
    block-size: var(--flux-timeline-marker-current-size);
    margin-block-start: calc((1lh - var(--flux-timeline-marker-current-size)) / 2);
  }

  .flux-timeline__time {
    grid-area: time;
    margin: 0;
    color: var(--flux-timeline-time-color);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .flux-timeline__item[aria-current] .flux-timeline__time {
    color: var(--flux-timeline-time-current);
    font-weight: var(--flux-weight-bold);
  }

  /* The aside shares the title's line while the title keeps its minimum
     width, and wraps below it otherwise. The body always takes its own line. */
  .flux-timeline__content {
    grid-area: content;
    display: flex;
    flex-wrap: wrap;
    gap: var(--flux-space-1) var(--flux-space-3);
    align-items: start;
    min-width: 0;
  }

  .flux-timeline__title,
  .flux-timeline__body {
    margin: 0;
  }

  .flux-timeline__title {
    flex: 1 1 var(--flux-timeline-title-min-width);
    color: var(--flux-timeline-title-color);
    font-weight: var(--flux-weight-bold);
  }

  .flux-timeline__body {
    flex-basis: 100%;
    order: 2;
    color: var(--flux-timeline-body-color);
  }

  .flux-timeline__aside {
    order: 1;
  }

  /* Itinerary ------------------------------------------------------- */

  /* Days separated by hairlines. The day column sits beside the content and
     wraps above it when the content would drop below its minimum width. */
  .flux-itinerary {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .flux-itinerary__day {
    display: flex;
    flex-wrap: wrap;
    gap: var(--flux-space-3) var(--flux-itinerary-column-gap);
    padding-block: var(--flux-itinerary-day-padding);
    border-block-start: var(--flux-hairline) solid var(--flux-itinerary-divider);
  }

  .flux-itinerary__day:first-child {
    padding-block-start: 0;
    border-block-start: 0;
  }

  .flux-itinerary__when {
    display: grid;
    flex: 0 0 var(--flux-itinerary-when-width);
    gap: var(--flux-space-1);
    align-content: start;
    font-size: var(--flux-text-sm);
  }

  .flux-itinerary__number {
    color: var(--flux-itinerary-number-color);
    font-weight: var(--flux-weight-bold);
  }

  .flux-itinerary__date {
    color: var(--flux-itinerary-date-color);
    font-variant-numeric: tabular-nums;
  }

  .flux-itinerary__body {
    display: grid;
    flex: 1 1 var(--flux-itinerary-body-min-width);
    gap: var(--flux-space-4);
    min-width: 0;
  }

  .flux-itinerary__title {
    margin: 0;
    color: var(--flux-text-primary);
    font-size: var(--flux-itinerary-title-size);
    font-weight: var(--flux-weight-bold);
    line-height: var(--flux-leading-snug);
  }

  .flux-itinerary__overnight {
    margin: 0;
    padding-block-start: var(--flux-space-3);
    border-block-start: var(--flux-hairline) solid var(--flux-itinerary-divider);
    color: var(--flux-text-secondary);
    font-size: var(--flux-text-sm);
  }

  .flux-itinerary__overnight-label {
    margin-inline-end: var(--flux-space-2);
    color: var(--flux-text-primary);
    font-weight: var(--flux-weight-bold);
  }

  /* Spinner --------------------------------------------------------- */

  /* flux-loading carries the status and its label; the spinner is decoration
     inside it. The arc runs from the brand colour through the accent and
     fades out, growing and shrinking as it turns. */
  .flux-loading {
    display: inline-flex;
    align-items: center;
    gap: var(--flux-spinner-gap);
    color: var(--flux-spinner-label);
    font-size: var(--flux-text-sm);
  }

  .flux-spinner {
    --flux-spinner-current-size: var(--flux-spinner-size);
    --flux-spinner-ring: calc(var(--flux-spinner-current-size) / 8);
    display: inline-block;
    flex: none;
    inline-size: var(--flux-spinner-current-size);
    aspect-ratio: 1;
    border-radius: var(--flux-radius-full);
    /* Glyph, not a surface: the arc is drawn by the gradient.
       flux-ignore-next-line gradient */
    background: conic-gradient(var(--flux-spinner-head), var(--flux-spinner-accent), transparent var(--flux-spinner-arc));
    /* Cuts the ring out of the disc; only the alpha of the mask is read.
       flux-ignore-next-line gradient */
    mask: radial-gradient(closest-side, transparent calc(100% - var(--flux-spinner-ring)), var(--flux-spinner-head) calc(100% - var(--flux-spinner-ring)));
    animation: flux-spinner var(--flux-spinner-duration) var(--flux-spinner-ease) infinite;
  }

  .flux-spinner--sm {
    --flux-spinner-current-size: var(--flux-spinner-size-sm);
  }

  .flux-spinner--lg {
    --flux-spinner-current-size: var(--flux-spinner-size-lg);
  }

  .flux-spinner--brand {
    --flux-spinner-accent: var(--flux-spinner-head);
  }

  @keyframes flux-spinner {
    from {
      --flux-spinner-arc: 20%;
      transform: rotate(0deg);
    }

    50% {
      --flux-spinner-arc: 50%;
    }

    70% {
      --flux-spinner-arc: 30%;
    }

    90% {
      --flux-spinner-arc: 10%;
    }

    to {
      --flux-spinner-arc: 20%;
      transform: rotate(-360deg);
    }
  }

  /* Progress and meter ---------------------------------------------- */

  /* A visually hidden progress or meter element carries the value; the
     segments draw it and are aria-hidden. flux-components.js keeps them in
     step when the value changes. */
  :is(.flux-progress, .flux-meter) {
    display: grid;
    gap: var(--flux-progress-header-gap);
    min-inline-size: 0;
  }

  :is(.flux-progress, .flux-meter) + :is(.flux-progress, .flux-meter) {
    margin-block-start: var(--flux-space-6);
  }

  :is(.flux-progress, .flux-meter) .flux-progress__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--flux-space-1) var(--flux-space-4);
  }

  .flux-progress__label {
    color: var(--flux-progress-label);
    font-size: var(--flux-text-sm);
    font-weight: var(--flux-weight-bold);
  }

  .flux-progress__value {
    color: var(--flux-progress-value);
    font-family: var(--flux-font-mono);
    font-size: var(--flux-text-sm);
    font-weight: var(--flux-weight-mono-medium);
    font-variant-numeric: tabular-nums;
  }

  .flux-segments {
    --flux-progress-current-fill: var(--flux-progress-fill);
    display: flex;
    gap: var(--flux-progress-segment-gap);
  }

  .flux-segments__item {
    flex: 1 1 0;
    block-size: var(--flux-progress-segment-height);
    border-radius: var(--flux-progress-segment-radius);
    background: var(--flux-progress-segment-empty);
    transition: background-color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-segments__item[data-filled] {
    background: var(--flux-progress-current-fill);
  }

  .flux-meter[data-tone='warning'] .flux-segments {
    --flux-progress-current-fill: var(--flux-progress-fill-warning);
  }

  .flux-meter[data-tone='error'] .flux-segments {
    --flux-progress-current-fill: var(--flux-progress-fill-error);
  }

  :is(.flux-progress, .flux-meter).flux-progress--sm .flux-segments__item {
    block-size: var(--flux-progress-segment-height-sm);
  }

  /* Skeleton -------------------------------------------------------- */

  /* Flat shapes standing in for content whose layout is known. A text line
     takes exactly one line box of the text around it, drawn at cap height,
     so the real content replaces it without the layout moving. */
  .flux-skeleton {
    display: block;
    border-radius: var(--flux-skeleton-radius);
    background: var(--flux-skeleton-bg);
    animation: flux-skeleton var(--flux-skeleton-duration) var(--flux-skeleton-ease) infinite;
  }

  /* The line box is the element; the bar is drawn inside it, so no margin
     can collapse away the leading. */
  .flux-skeleton--text {
    display: flex;
    align-items: center;
    block-size: 1lh;
    border-radius: 0;
    background: none;
  }

  .flux-skeleton--text::before {
    content: '';
    flex: 1 1 auto;
    block-size: 1cap;
    border-radius: var(--flux-skeleton-radius);
    background: var(--flux-skeleton-bg);
  }

  .flux-skeleton--text:last-child:not(:first-child) {
    inline-size: 60%;
  }

  .flux-skeleton--short {
    inline-size: 40%;
  }

  td .flux-skeleton--text,
  th .flux-skeleton--text {
    display: inline-flex;
    inline-size: 60%;
    vertical-align: top;
  }

  .flux-skeleton--avatar {
    flex: none;
    inline-size: var(--flux-skeleton-avatar-size);
    block-size: var(--flux-skeleton-avatar-size);
    border-radius: var(--flux-radius-full);
  }

  .flux-skeleton--block {
    block-size: var(--flux-skeleton-block-size);
  }

  /* An avatar beside its lines, as in a list of people or suppliers. */
  .flux-skeleton-row {
    display: flex;
    align-items: center;
    gap: var(--flux-space-3);
  }

  .flux-skeleton-row + .flux-skeleton-row {
    margin-block-start: var(--flux-space-3);
  }

  .flux-skeleton-row > :last-child {
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  /* Ends at full strength, so the base layer's reduced-motion reset leaves
     it still rather than dimmed. */
  @keyframes flux-skeleton {
    50% {
      opacity: var(--flux-skeleton-dim);
    }
  }

  /* App shell ------------------------------------------------------- */

  /* A rail of destinations beside a top bar and the main column. Wide, the
     rail collapses to its icons; narrow, it leaves the grid and opens as a
     sheet from the top bar. Media queries cannot read custom properties, so
     the 48rem breakpoint is written here and nowhere else. */
  .flux-shell {
    display: grid;
    grid-template-columns: var(--flux-shell-rail-width) minmax(0, 1fr);
    grid-template-rows: var(--flux-shell-topbar-height) 1fr;
    grid-template-areas: 'rail topbar' 'rail main';
    min-block-size: 100dvh;
    background: var(--flux-shell-main-bg);
  }

  .flux-shell--contained {
    position: relative;
    min-block-size: var(--flux-shell-contained-height);
    overflow: clip;
    border: var(--flux-hairline) solid var(--flux-shell-divider);
    border-radius: var(--flux-radius-sm);
  }

  .flux-shell__skip {
    position: absolute;
    inset-block-start: var(--flux-space-3);
    inset-inline-start: var(--flux-space-3);
    z-index: 3;
    padding: var(--flux-space-2) var(--flux-space-3);
    border: var(--flux-hairline) solid var(--flux-shell-divider);
    border-radius: var(--flux-radius-sm);
    background: var(--flux-layer-01);
    box-shadow: var(--flux-shadow-md);
    color: var(--flux-text-link);
    font-size: var(--flux-text-sm);
  }

  .flux-shell__skip:not(:focus) {
    width: var(--flux-hairline);
    height: var(--flux-hairline);
    padding: 0;
    overflow: hidden;
    border: 0;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .flux-shell__rail {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    grid-area: rail;
    align-self: start;
    block-size: 100dvh;
    min-inline-size: 0;
    border-inline-end: var(--flux-hairline) solid var(--flux-shell-divider);
    background: var(--flux-shell-rail-bg);
  }

  .flux-shell--contained .flux-shell__rail {
    position: static;
    align-self: stretch;
    block-size: auto;
  }

  .flux-shell__product {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--flux-shell-item-gap);
    block-size: var(--flux-shell-topbar-height);
    padding-inline: calc(var(--flux-shell-padding) + var(--flux-shell-item-padding-x));
    border-block-end: var(--flux-hairline) solid var(--flux-shell-divider);
    color: var(--flux-text-primary);
    text-decoration: none;
  }

  .flux-shell__mark {
    flex: none;
    inline-size: var(--flux-shell-mark-size);
    block-size: var(--flux-shell-mark-size);
    border-radius: var(--flux-radius-sm);
    background: var(--flux-shell-mark);
  }

  .flux-shell__product-name {
    display: grid;
    min-inline-size: 0;
    font-size: var(--flux-text-sm);
    font-weight: var(--flux-weight-bold);
    line-height: var(--flux-leading-snug);
  }

  .flux-shell__product-meta {
    color: var(--flux-text-secondary);
    font-size: var(--flux-text-xs);
    font-weight: var(--flux-weight-light);
  }

  .flux-shell__nav {
    display: grid;
    flex: 1 1 auto;
    align-content: start;
    gap: var(--flux-shell-section-gap);
    padding: var(--flux-shell-padding);
    overflow-y: auto;
  }

  .flux-shell__section {
    display: grid;
    gap: var(--flux-space-1);
  }

  .flux-shell__section-label {
    padding: var(--flux-space-2) var(--flux-shell-item-padding-x) var(--flux-space-1);
    color: var(--flux-shell-section-label);
    font-family: var(--flux-font-mono);
    font-size: var(--flux-text-xs);
    font-weight: var(--flux-weight-mono-bold);
    letter-spacing: var(--flux-tracking-wide);
    text-transform: uppercase;
  }

  .flux-shell__list {
    display: grid;
    gap: var(--flux-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .flux-shell__item {
    display: flex;
    align-items: center;
    gap: var(--flux-shell-item-gap);
    inline-size: 100%;
    min-block-size: var(--flux-shell-item-height);
    padding-inline: var(--flux-shell-item-padding-x);
    border: 0;
    border-radius: var(--flux-shell-item-radius);
    background: none;
    color: var(--flux-shell-item-text);
    font: inherit;
    font-size: var(--flux-text-sm);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition-property: background-color, color;
    transition-duration: var(--flux-duration-fast);
    transition-timing-function: var(--flux-ease-productive);
  }

  .flux-shell__item:hover {
    background: var(--flux-shell-item-hover);
    color: var(--flux-shell-item-hover-text);
  }

  .flux-shell__item > svg {
    flex: none;
    inline-size: var(--flux-shell-icon-size);
    block-size: var(--flux-shell-icon-size);
    color: var(--flux-shell-item-icon);
  }

  .flux-shell__item[aria-current='page'] {
    background: var(--flux-shell-item-current-bg);
    color: var(--flux-shell-item-current-text);
    font-weight: var(--flux-weight-bold);
  }

  .flux-shell__item[aria-current='page'] > svg {
    color: var(--flux-shell-item-current-icon);
  }

  .flux-shell__label {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .flux-shell__count {
    color: var(--flux-text-secondary);
    font-family: var(--flux-font-mono);
    font-size: var(--flux-text-xs);
    font-weight: var(--flux-weight-mono-medium);
    font-variant-numeric: tabular-nums;
  }

  /* Sticks to the bottom of the viewport when the rail is taller than it. */
  .flux-shell__footer {
    position: sticky;
    inset-block-end: 0;
    flex: none;
    padding: var(--flux-shell-padding);
    border-block-start: var(--flux-hairline) solid var(--flux-shell-divider);
    background: var(--flux-shell-rail-bg);
  }

  .flux-shell__collapse > svg {
    transition: transform var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-shell__topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    display: flex;
    grid-area: topbar;
    align-items: center;
    gap: var(--flux-space-3);
    min-inline-size: 0;
    padding-inline: var(--flux-shell-content-padding);
    border-block-end: var(--flux-hairline) solid var(--flux-shell-divider);
    background: var(--flux-shell-topbar-bg);
    container-type: inline-size;
  }

  /* Search keeps its label before the session context keeps its place. */
  @container (width < 36rem) {
    .flux-shell__context {
      display: none;
    }
  }

  .flux-shell__menu {
    display: none;
  }

  .flux-shell__search {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--flux-space-2);
    min-inline-size: 0;
    max-inline-size: var(--flux-shell-search-width);
    block-size: var(--flux-field-height);
    padding-inline: var(--flux-field-padding-x);
    border: var(--flux-hairline) solid var(--flux-field-border);
    border-radius: var(--flux-field-radius);
    background: var(--flux-field-bg);
    color: var(--flux-text-secondary);
    font: inherit;
    font-size: var(--flux-text-sm);
    cursor: pointer;
    transition: border-color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-shell__search:hover {
    border-color: var(--flux-border-interactive);
  }

  .flux-shell__search > svg {
    flex: none;
    inline-size: var(--flux-shell-icon-size);
    block-size: var(--flux-shell-icon-size);
    color: var(--flux-icon-secondary);
  }

  .flux-shell__search-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .flux-shell__kbd {
    padding-inline: var(--flux-space-1);
    border: var(--flux-hairline) solid var(--flux-shell-divider);
    border-radius: var(--flux-radius-sm);
    color: var(--flux-text-secondary);
    font-family: var(--flux-font-mono);
    font-size: var(--flux-text-xs);
    font-weight: var(--flux-weight-mono-medium);
  }

  .flux-shell__actions {
    display: flex;
    align-items: center;
    gap: var(--flux-space-3);
    margin-inline-start: auto;
  }

  .flux-shell__context {
    color: var(--flux-text-secondary);
    font-family: var(--flux-font-mono);
    font-size: var(--flux-text-sm);
    font-weight: var(--flux-weight-mono-medium);
    white-space: nowrap;
  }

  .flux-shell__main {
    grid-area: main;
    min-inline-size: 0;
    padding: var(--flux-shell-content-padding);
  }

  @media (width > 48rem) {
    .flux-shell[data-collapsed] {
      grid-template-columns: var(--flux-shell-rail-collapsed-width) minmax(0, 1fr);
    }

    .flux-shell[data-collapsed] :is(.flux-shell__product-name, .flux-shell__label, .flux-shell__count) {
      position: absolute;
      width: var(--flux-hairline);
      height: var(--flux-hairline);
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .flux-shell[data-collapsed] .flux-shell__section-label {
      position: absolute;
      width: var(--flux-hairline);
      height: var(--flux-hairline);
      padding: 0;
      overflow: hidden;
      clip-path: inset(50%);
    }

    .flux-shell[data-collapsed] .flux-shell__nav {
      gap: var(--flux-shell-padding);
    }

    .flux-shell[data-collapsed] .flux-shell__section + .flux-shell__section {
      padding-block-start: var(--flux-shell-padding);
      border-block-start: var(--flux-hairline) solid var(--flux-shell-divider);
    }

    .flux-shell[data-collapsed] :is(.flux-shell__item, .flux-shell__product) {
      justify-content: center;
      padding-inline: 0;
    }

    .flux-shell[data-collapsed] .flux-shell__collapse > svg {
      transform: rotate(180deg);
    }
  }

  @media (width <= 48rem) {
    .flux-shell {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: 'topbar' 'main';
    }

    .flux-shell__rail,
    .flux-shell--contained .flux-shell__rail {
      position: fixed;
      inset-block: 0;
      inset-inline-start: 0;
      z-index: 3;
      block-size: auto;
      inline-size: var(--flux-shell-rail-width);
      max-inline-size: calc(100% - var(--flux-shell-rail-collapsed-width));
      box-shadow: var(--flux-shell-sheet-shadow);
      visibility: hidden;
      transform: translateX(-100%);
      transition-property: transform, visibility;
      transition-duration: var(--flux-duration-fast);
      transition-timing-function: var(--flux-ease-productive);
    }

    .flux-shell--contained .flux-shell__rail {
      position: absolute;
    }

    /* Visible at once on open so focus can move into the sheet; on close the
       base rule keeps it visible until the slide out ends. */
    .flux-shell[data-nav-open] .flux-shell__rail {
      visibility: visible;
      transform: none;
      transition-property: transform;
    }

    .flux-shell[data-nav-open]::after {
      position: fixed;
      inset: 0;
      z-index: 2;
      background: var(--flux-shell-backdrop);
      content: '';
    }

    .flux-shell--contained[data-nav-open]::after {
      position: absolute;
    }

    .flux-shell__menu {
      display: inline-flex;
    }

    .flux-shell__footer,
    .flux-shell__context {
      display: none;
    }

    .flux-shell__topbar,
    .flux-shell__main {
      padding-inline: var(--flux-space-4);
    }

    .flux-shell__kbd {
      display: none;
    }
  }

  /* Badge ----------------------------------------------------------- */

  .flux-badge {
    display: inline-flex;
    align-items: center;
    height: var(--flux-badge-height);
    padding-inline: var(--flux-badge-padding-x);
    border: var(--flux-hairline) solid transparent;
    border-radius: var(--flux-badge-radius);
    background: var(--flux-surface-brand-subtle);
    color: var(--flux-text-brand);
    font-size: var(--flux-badge-font-size);
    font-weight: var(--flux-badge-font-weight);
    line-height: 1;
    white-space: nowrap;
  }

  /* Status semantics are shared with table status cells. Do not invent more. */
  .flux-badge--confirmed {
    background: var(--flux-green-200);
    color: var(--flux-green-800);
  }

  .flux-badge--pending {
    background: var(--flux-yellow-300);
    color: var(--flux-yellow-900);
  }

  .flux-badge--awaiting {
    background: var(--flux-blue-200);
    color: var(--flux-blue-800);
  }

  .flux-badge--cancelled {
    background: var(--flux-orange-200);
    color: var(--flux-orange-800);
  }

  .flux-badge--unavailable {
    background: var(--flux-orange-200);
    color: var(--flux-orange-800);
  }

  /* Table ----------------------------------------------------------- */

  /*
   * Positioned, so visually hidden text inside cannot overflow the page, and
   * isolated, so sticky cells never stack above a select panel beside the table.
   */
  .flux-table-wrap {
    position: relative;
    isolation: isolate;
    border: var(--flux-hairline) solid var(--flux-border-subtle);
    border-radius: var(--flux-radius-sm);
    background: var(--flux-layer-01);
    overflow-x: auto;
  }

  /* A bounded height is what gives a sticky header something to stick within. */
  .flux-table-wrap--sticky {
    max-height: var(--flux-table-sticky-max-height);
    overflow: auto;
  }

  /*
   * Separate borders, so a sticky cell keeps its divider. The negative margin
   * tucks the final row divider under the wrapper border, so the last visible
   * row never draws a double line however rows are filtered or hidden.
   */
  .flux-table {
    width: 100%;
    margin-bottom: calc(var(--flux-hairline) * -1);
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--flux-table-font-size);
    text-align: left;
  }

  .flux-table th,
  .flux-table td {
    padding: var(--flux-table-cell-padding-y) var(--flux-table-cell-padding-x);
    border-bottom: var(--flux-hairline) solid var(--flux-table-divider);
  }

  .flux-table thead th {
    background: var(--flux-table-header-bg);
    font-family: var(--flux-font-mono);
    font-size: var(--flux-table-header-font-size);
    font-weight: var(--flux-weight-mono-bold);
    letter-spacing: var(--flux-tracking-wide);
    text-transform: uppercase;
    color: var(--flux-table-header-text);
    white-space: nowrap;
  }

  .flux-table td,
  .flux-table tbody th {
    color: var(--flux-text-primary);
  }

  /* A row header names its row: body type, bold, in the row's own colour. */
  .flux-table tbody th[scope='row'] {
    font-weight: var(--flux-weight-bold);
  }

  /*
   * One line per row keeps the row rhythm; the wrapper scrolls instead of
   * squeezing. A cell of genuine prose opts in to wrapping with data-wrap.
   */
  .flux-table tbody > tr:not(.flux-table__detail) > * {
    white-space: nowrap;
  }

  .flux-table tbody > tr > [data-wrap] {
    min-width: var(--flux-space-32);
    white-space: normal;
  }

  .flux-table tbody tr {
    height: var(--flux-table-row-height);
  }

  .flux-table tbody tr:hover > * {
    background: var(--flux-table-row-hover);
  }

  /* Figures line up, so numeric columns are tabular and right-aligned. */
  .flux-table [data-numeric] {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .flux-table caption {
    padding: var(--flux-table-cell-padding-y) var(--flux-table-cell-padding-x);
    color: var(--flux-text-secondary);
    text-align: left;
  }

  .flux-table--compact th,
  .flux-table--compact td {
    padding-block: var(--flux-table-cell-padding-y-compact);
  }

  .flux-table--compact tbody tr {
    height: var(--flux-table-row-height-compact);
  }

  /* Sorting --------------------------------------------------------- */

  .flux-table__sort {
    display: inline-flex;
    align-items: center;
    gap: var(--flux-space-1);
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    transition: color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-table__sort:hover {
    color: var(--flux-text-primary);
  }

  [data-numeric] > .flux-table__sort {
    flex-direction: row-reverse;
  }

  .flux-table__sort-icon {
    flex: none;
    width: var(--flux-space-4);
    height: var(--flux-space-4);
    color: var(--flux-table-icon);
  }

  /* Unsorted shows both directions; sorted shows only the one in force. */
  [aria-sort='ascending'] .flux-table__sort-icon,
  [aria-sort='descending'] .flux-table__sort-icon {
    color: var(--flux-table-sort-icon-active);
  }

  [aria-sort='ascending'] .flux-table__sort-down,
  [aria-sort='descending'] .flux-table__sort-up {
    display: none;
  }

  [aria-sort='ascending'] > .flux-table__sort,
  [aria-sort='descending'] > .flux-table__sort {
    color: var(--flux-text-primary);
  }

  /* Control columns: selection and expansion ------------------------ */

  /* Controls are centred by the row height, so their cells drop the vertical padding. */
  .flux-table .flux-table__control {
    width: var(--flux-table-control-width);
    padding-block: 0;
    padding-inline-end: 0;
  }

  .flux-table .flux-table__control + .flux-table__control {
    padding-inline-start: var(--flux-space-1);
  }

  .flux-table tbody tr:has(.flux-table__select:checked) > * {
    background: var(--flux-table-row-selected);
  }

  .flux-table__icon-button {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--flux-table-icon-button-size);
    height: var(--flux-table-icon-button-size);
    padding: 0;
    border: 0;
    border-radius: var(--flux-radius-sm);
    background: transparent;
    color: var(--flux-table-icon);
    cursor: pointer;
    transition:
      background-color var(--flux-duration-fast) var(--flux-ease-productive),
      color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-table__icon-button:hover,
  .flux-table__icon-button[aria-expanded='true'] {
    background: var(--flux-table-icon-hover-bg);
    color: var(--flux-table-icon-hover);
  }

  .flux-table__icon-button svg {
    width: var(--flux-space-4);
    height: var(--flux-space-4);
  }

  .flux-table__toggle svg {
    transform: rotate(-90deg);
    transition: transform var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-table__toggle[aria-expanded='true'] svg {
    transform: none;
  }

  .flux-table .flux-table__detail,
  .flux-table .flux-table__detail:hover {
    height: auto;
  }

  .flux-table .flux-table__detail > td,
  .flux-table .flux-table__detail:hover > td {
    padding-block: var(--flux-space-4);
    background: var(--flux-table-detail-bg);
  }

  .flux-table .flux-table__empty {
    padding-block: var(--flux-space-8);
    color: var(--flux-text-secondary);
    text-align: center;
  }

  /* Row actions ----------------------------------------------------- */

  .flux-table .flux-table__actions {
    width: var(--flux-table-control-width);
    padding-block: 0;
    white-space: nowrap;
  }

  .flux-table__action-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--flux-space-1);
  }

  /* Sticky header and leading columns -------------------------------- */

  .flux-table--sticky-header thead th {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  /* flux-components.js marks every column up to the row header and sets its offset. */
  .flux-table [data-flux-sticky] {
    position: sticky;
    z-index: 1;
    background: var(--flux-table-cell-bg);
  }

  .flux-table thead [data-flux-sticky] {
    z-index: 3;
    background: var(--flux-table-header-bg);
  }

  .flux-table [data-flux-sticky='edge'] {
    box-shadow: inset calc(var(--flux-hairline) * -1) 0 0 var(--flux-table-divider);
  }

  /* Toolbar --------------------------------------------------------- */

  .flux-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--flux-table-toolbar-gap);
    margin-bottom: var(--flux-table-toolbar-gap);
  }

  .flux-table-toolbar__summary:not([hidden]),
  .flux-table-toolbar__bulk:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--flux-space-2) var(--flux-space-4);
    min-height: var(--flux-field-height);
  }

  .flux-table-toolbar__title {
    margin: 0;
    color: var(--flux-text-primary);
    font-size: var(--flux-text-lg);
    font-weight: var(--flux-weight-bold);
  }

  .flux-table-toolbar__count {
    margin: 0;
    color: var(--flux-text-secondary);
    font-size: var(--flux-text-sm);
    font-variant-numeric: tabular-nums;
  }

  .flux-table-toolbar__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--flux-space-3);
  }

  .flux-table-toolbar__controls > .flux-field {
    width: var(--flux-datepicker-panel-width);
    max-width: 100%;
  }

  /* Filter chips ---------------------------------------------------- */

  .flux-filter-chips:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--flux-space-2);
    margin-bottom: var(--flux-table-toolbar-gap);
  }

  .flux-filter-chips__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--flux-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* The whole chip removes its filter, so the target is the chip, not the cross. */
  .flux-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--flux-chip-gap);
    height: var(--flux-chip-height);
    padding: 0 var(--flux-chip-padding-end) 0 var(--flux-chip-padding-x);
    border: var(--flux-hairline) solid var(--flux-chip-border);
    border-radius: var(--flux-chip-radius);
    background: var(--flux-chip-bg);
    color: var(--flux-chip-text);
    font: inherit;
    font-size: var(--flux-chip-font-size);
    cursor: pointer;
    transition: border-color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-chip:hover {
    border-color: var(--flux-chip-border-hover);
  }

  .flux-chip svg {
    flex: none;
    width: var(--flux-chip-icon-size);
    height: var(--flux-chip-icon-size);
    color: var(--flux-chip-icon);
  }

  /* More-filters panel ---------------------------------------------- */

  /* A popover like the menu, but holding fields, so it must not clip their listboxes. */
  .flux-filter-panel {
    position: fixed;
    inset: auto;
    width: var(--flux-filter-panel-width);
    max-width: 100%;
    margin: var(--flux-menu-offset) 0;
    padding: var(--flux-filter-panel-padding);
    overflow: visible;
    border: var(--flux-hairline) solid var(--flux-menu-border);
    border-radius: var(--flux-menu-radius);
    background: var(--flux-menu-bg);
    color: var(--flux-text-primary);
    box-shadow: var(--flux-menu-shadow);
  }

  .flux-filter-panel:popover-open {
    display: grid;
    gap: var(--flux-filter-panel-gap);
  }

  .flux-filter-panel__title {
    margin: 0;
    color: var(--flux-text-primary);
    font-size: var(--flux-text-base);
    font-weight: var(--flux-weight-bold);
  }

  /* Checkbox -------------------------------------------------------- */

  /* Drawn from tokens rather than left native, so it follows every theme. */
  .flux-checkbox {
    appearance: none;
    display: inline-grid;
    place-content: center;
    width: var(--flux-control-size);
    height: var(--flux-control-size);
    margin: 0;
    border: var(--flux-hairline) solid var(--flux-control-unchecked-border);
    border-radius: var(--flux-radius-sm);
    background: var(--flux-field-bg);
    vertical-align: middle;
    cursor: pointer;
    transition:
      background-color var(--flux-duration-fast) var(--flux-ease-productive),
      border-color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-checkbox:hover {
    border-color: var(--flux-field-border-hover);
  }

  .flux-checkbox::before {
    content: '';
    width: var(--flux-space-3);
    height: var(--flux-space-3);
    background: var(--flux-control-check);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    visibility: hidden;
  }

  .flux-checkbox:checked,
  .flux-checkbox:indeterminate {
    border-color: var(--flux-control-checked-bg);
    background: var(--flux-control-checked-bg);
  }

  .flux-checkbox:checked::before,
  .flux-checkbox:indeterminate::before {
    visibility: visible;
  }

  .flux-checkbox:indeterminate::before {
    clip-path: inset(40% 8%);
  }

  .flux-checkbox:disabled,
  .flux-radio:disabled {
    border-color: var(--flux-border-disabled);
    background: var(--flux-surface-disabled);
    cursor: not-allowed;
  }

  /* Radio ----------------------------------------------------------- */

  /* Round, so a one-of-many choice never reads as a checkbox. */
  .flux-radio {
    appearance: none;
    display: inline-grid;
    place-content: center;
    width: var(--flux-control-size);
    height: var(--flux-control-size);
    margin: 0;
    border: var(--flux-hairline) solid var(--flux-control-unchecked-border);
    border-radius: var(--flux-radius-full);
    background: var(--flux-field-bg);
    vertical-align: middle;
    cursor: pointer;
    transition:
      background-color var(--flux-duration-fast) var(--flux-ease-productive),
      border-color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-radio:hover {
    border-color: var(--flux-field-border-hover);
  }

  .flux-radio::before {
    content: '';
    width: var(--flux-control-radio-dot);
    height: var(--flux-control-radio-dot);
    border-radius: var(--flux-radius-full);
    background: var(--flux-control-check);
    visibility: hidden;
  }

  .flux-radio:checked {
    border-color: var(--flux-control-checked-bg);
    background: var(--flux-control-checked-bg);
  }

  .flux-radio:checked::before {
    visibility: visible;
  }

  .flux-checkbox[aria-invalid='true'],
  .flux-radio[aria-invalid='true'] {
    border-color: var(--flux-field-border-error);
  }

  /* Switch ---------------------------------------------------------- */

  /* A checkbox with role="switch". The thumb's position, not only its colour,
     says whether it is on. */
  .flux-switch {
    appearance: none;
    position: relative;
    display: inline-block;
    inline-size: var(--flux-switch-track-width);
    block-size: var(--flux-switch-track-height);
    margin: 0;
    border: var(--flux-hairline) solid var(--flux-control-unchecked-border);
    border-radius: var(--flux-radius-full);
    background: var(--flux-field-bg);
    vertical-align: middle;
    cursor: pointer;
    transition:
      background-color var(--flux-duration-fast) var(--flux-ease-productive),
      border-color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-switch::before {
    content: '';
    position: absolute;
    inset-block-start: var(--flux-switch-thumb-inset);
    inset-inline-start: var(--flux-switch-thumb-inset);
    inline-size: calc(var(--flux-switch-track-height) - var(--flux-switch-thumb-inset) * 2 - var(--flux-hairline) * 2);
    block-size: calc(var(--flux-switch-track-height) - var(--flux-switch-thumb-inset) * 2 - var(--flux-hairline) * 2);
    border-radius: var(--flux-radius-full);
    background: var(--flux-switch-thumb);
    transition:
      transform var(--flux-duration-fast) var(--flux-ease-productive),
      background-color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-switch:hover {
    border-color: var(--flux-field-border-hover);
  }

  .flux-switch:checked {
    border-color: var(--flux-control-checked-bg);
    background: var(--flux-control-checked-bg);
  }

  .flux-switch:checked::before {
    background: var(--flux-control-check);
    transform: translateX(calc(var(--flux-switch-track-width) - var(--flux-switch-track-height)));
  }

  .flux-switch:checked:dir(rtl)::before {
    transform: translateX(calc(var(--flux-switch-track-height) - var(--flux-switch-track-width)));
  }

  .flux-switch:disabled {
    border-color: var(--flux-border-disabled);
    background: var(--flux-surface-disabled);
    cursor: not-allowed;
  }

  .flux-switch:disabled::before {
    background: var(--flux-icon-disabled);
  }

  /* Slider ---------------------------------------------------------- */

  /* Native range inputs over one drawn track. A range stacks two inputs; only
     their thumbs take the pointer, so either can be dragged. The fill runs
     between thumb centres, which travel half a thumb in from each end. */
  .flux-slider__value {
    margin-inline-start: auto;
    color: var(--flux-slider-value);
    font-family: var(--flux-font-mono);
    font-size: var(--flux-text-sm);
    font-weight: var(--flux-weight-mono-medium);
    font-variant-numeric: tabular-nums;
  }

  .flux-slider__control {
    --flux-slider-from: 0;
    --flux-slider-to: 0;
    position: relative;
    display: grid;
    align-items: center;
  }

  .flux-slider__control::before,
  .flux-slider__control::after {
    content: '';
    position: absolute;
    block-size: var(--flux-slider-track-height);
    border-radius: var(--flux-radius-full);
  }

  .flux-slider__control::before {
    inset-inline: calc(var(--flux-slider-thumb-size) / 2);
    background: var(--flux-slider-track);
  }

  .flux-slider__control::after {
    inset-inline-start: calc(var(--flux-slider-thumb-size) / 2 + (100% - var(--flux-slider-thumb-size)) * var(--flux-slider-from));
    inline-size: calc((100% - var(--flux-slider-thumb-size)) * (var(--flux-slider-to) - var(--flux-slider-from)));
    background: var(--flux-slider-fill);
  }

  .flux-slider__input {
    appearance: none;
    position: relative;
    z-index: 1;
    grid-area: 1 / 1;
    inline-size: 100%;
    block-size: var(--flux-slider-thumb-size);
    margin: 0;
    background: transparent;
    pointer-events: none;
  }

  .flux-slider__input:only-of-type {
    pointer-events: auto;
    cursor: pointer;
  }

  .flux-slider__input[data-raised] {
    z-index: 2;
  }

  .flux-slider__input::-webkit-slider-runnable-track {
    background: transparent;
  }

  .flux-slider__input::-moz-range-track {
    background: transparent;
  }

  .flux-slider__input::-webkit-slider-thumb {
    appearance: none;
    box-sizing: border-box;
    inline-size: var(--flux-slider-thumb-size);
    block-size: var(--flux-slider-thumb-size);
    border: var(--flux-slider-thumb-border-width) solid var(--flux-slider-thumb-border);
    border-radius: var(--flux-radius-full);
    background: var(--flux-slider-thumb-bg);
    pointer-events: auto;
    cursor: grab;
    transition: background-color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-slider__input::-moz-range-thumb {
    box-sizing: border-box;
    inline-size: var(--flux-slider-thumb-size);
    block-size: var(--flux-slider-thumb-size);
    border: var(--flux-slider-thumb-border-width) solid var(--flux-slider-thumb-border);
    border-radius: var(--flux-radius-full);
    background: var(--flux-slider-thumb-bg);
    pointer-events: auto;
    cursor: grab;
    transition: background-color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-slider__input:hover::-webkit-slider-thumb {
    background: var(--flux-slider-thumb-bg-hover);
  }

  .flux-slider__input:hover::-moz-range-thumb {
    background: var(--flux-slider-thumb-bg-hover);
  }

  /* Both inputs of a range share one box, so the focus ring alone cannot say
     which handle has focus. The focused thumb fills as well, which also marks
     the handle being dragged. */
  .flux-slider__input:focus::-webkit-slider-thumb {
    background: var(--flux-slider-fill);
  }

  .flux-slider__input:focus::-moz-range-thumb {
    background: var(--flux-slider-fill);
  }

  .flux-slider__input:disabled::-webkit-slider-thumb {
    border-color: var(--flux-icon-disabled);
    background: var(--flux-surface-disabled);
    cursor: not-allowed;
  }

  .flux-slider__input:disabled::-moz-range-thumb {
    border-color: var(--flux-icon-disabled);
    background: var(--flux-surface-disabled);
    cursor: not-allowed;
  }

  .flux-slider:has(:disabled) .flux-slider__control::after {
    background: var(--flux-icon-disabled);
  }

  .flux-slider__scale {
    display: flex;
    justify-content: space-between;
    gap: var(--flux-space-4);
    margin-block-start: var(--flux-slider-scale-gap);
    color: var(--flux-slider-scale);
    font-size: var(--flux-text-sm);
  }

  .flux-slider:has(:disabled) :is(.flux-field__label, .flux-slider__value, .flux-slider__scale) {
    color: var(--flux-text-disabled);
  }

  /* Choice — a control and its label ------------------------------- */

  .flux-choice {
    display: flex;
    align-items: flex-start;
    gap: var(--flux-control-label-gap);
    color: var(--flux-text-primary);
    font-size: var(--flux-text-sm);
    line-height: var(--flux-leading-normal);
    cursor: pointer;
  }

  /* Centred on the first line's x-height, where a mostly lowercase label
     reads as centred, rather than on the line box. The font is inherited so
     lh, cap and ex measure the label, not the control's own font. */
  /* On a touch screen the whole label is the target, so it grows to the touch target. */
  @media (pointer: coarse) {
    .flux-choice {
      padding-block: calc((var(--flux-touch-target) - 1lh) / 2);
    }
  }

  .flux-choice > :is(.flux-checkbox, .flux-radio) {
    flex: none;
    font: inherit;
    margin-block-start: calc((1lh - var(--flux-control-size)) / 2 + (1cap - 1ex) / 2);
  }

  .flux-choice > .flux-switch {
    flex: none;
    font: inherit;
    margin-block-start: calc((1lh - var(--flux-switch-track-height)) / 2 + (1cap - 1ex) / 2);
  }

  /* A settings row: the text leads and the control sits at the end of the line. */
  .flux-choice--end {
    flex-direction: row-reverse;
    justify-content: space-between;
    gap: var(--flux-space-6);
  }

  .flux-choice:has(:disabled) {
    color: var(--flux-text-disabled);
    cursor: not-allowed;
  }

  .flux-choice-group {
    display: grid;
    gap: var(--flux-choice-group-gap);
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  /* Floated, the legend is an ordinary child, so the group's gap and wrap apply to it. */
  .flux-choice-group > legend {
    float: left;
    inline-size: 100%;
    margin-block-end: calc(var(--flux-field-label-gap) - var(--flux-choice-group-gap));
    padding: 0;
    color: var(--flux-text-primary);
    font-size: var(--flux-text-sm);
    font-weight: var(--flux-weight-bold);
  }

  .flux-choice-group--inline {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--flux-choice-group-inline-gap);
  }

  .flux-choice-group > .flux-field__help {
    flex-basis: 100%;
    margin: 0;
  }

  /* Menu ------------------------------------------------------------ */

  /* A popover, so it escapes scroll containers. flux-components.js positions it. */
  .flux-menu {
    position: fixed;
    inset: auto;
    min-width: var(--flux-menu-min-width);
    margin: var(--flux-menu-offset) 0;
    padding: var(--flux-menu-padding);
    border: var(--flux-hairline) solid var(--flux-menu-border);
    border-radius: var(--flux-menu-radius);
    background: var(--flux-menu-bg);
    color: var(--flux-text-primary);
    box-shadow: var(--flux-menu-shadow);
  }

  .flux-menu__item {
    display: flex;
    align-items: center;
    gap: var(--flux-space-2);
    width: 100%;
    padding: var(--flux-menu-item-padding-y) var(--flux-menu-item-padding-x);
    border: 0;
    border-radius: var(--flux-radius-sm);
    background: transparent;
    color: var(--flux-text-primary);
    font: inherit;
    font-size: var(--flux-menu-item-font-size);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-menu__item:hover,
  .flux-menu__item:focus-visible {
    background: var(--flux-menu-item-hover);
  }

  .flux-menu__item--danger {
    color: var(--flux-menu-item-danger);
  }

  .flux-menu__item:is(:disabled, [aria-disabled='true']) {
    background: transparent;
    color: var(--flux-text-disabled);
    cursor: not-allowed;
  }

  .flux-menu__separator {
    margin: var(--flux-menu-padding) calc(var(--flux-menu-padding) * -1);
    border-block-start: var(--flux-hairline) solid var(--flux-menu-separator);
  }

  .flux-menu__check {
    flex: none;
    width: var(--flux-space-4);
    height: var(--flux-space-4);
    color: var(--flux-icon-brand);
    visibility: hidden;
  }

  [aria-checked='true'] > .flux-menu__check {
    visibility: visible;
  }

  /* Search ---------------------------------------------------------- */

  .flux-search {
    position: relative;
    display: flex;
    align-items: center;
  }

  .flux-search__icon {
    position: absolute;
    inset-inline-start: var(--flux-field-padding-x);
    inline-size: var(--flux-search-icon-size);
    block-size: var(--flux-search-icon-size);
    color: var(--flux-search-icon);
    pointer-events: none;
  }

  .flux-search > .flux-input {
    padding-inline: calc(var(--flux-field-padding-x) * 2 + var(--flux-search-icon-size)) calc(var(--flux-field-padding-x) + var(--flux-search-clear-size));
  }

  /* The clear button replaces the platform's, which differs per browser. */
  .flux-search > .flux-input::-webkit-search-cancel-button {
    appearance: none;
  }

  .flux-search__clear {
    position: absolute;
    inset-inline-end: var(--flux-space-1);
  }

  .flux-search__clear,
  .flux-toast__close,
  .flux-upload__remove,
  .flux-assistant__close {
    display: inline-grid;
    flex: none;
    place-items: center;
    inline-size: var(--flux-search-clear-size);
    block-size: var(--flux-search-clear-size);
    padding: 0;
    border: 0;
    border-radius: var(--flux-radius-sm);
    background: transparent;
    color: var(--flux-icon-secondary);
    cursor: pointer;
    transition: color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-search__clear:hover,
  .flux-toast__close:hover,
  .flux-upload__remove:hover,
  .flux-assistant__close:hover {
    color: var(--flux-icon-primary);
  }

  .flux-search__clear[hidden] {
    display: none;
  }

  .flux-search__clear svg,
  .flux-toast__close svg,
  .flux-upload__remove svg,
  .flux-assistant__close svg {
    inline-size: var(--flux-search-icon-size);
    block-size: var(--flux-search-icon-size);
  }

  .flux-search__count {
    margin: var(--flux-field-label-gap) 0 0;
    color: var(--flux-search-count);
    font-size: var(--flux-text-sm);
    font-variant-numeric: tabular-nums;
  }

  /* Accordion ------------------------------------------------------- */

  /* Sections separated by hairlines, not boxed. Built on details and summary,
     so it opens without the script and the panel never animates its height. */
  .flux-accordion {
    border-block-start: var(--flux-hairline) solid var(--flux-accordion-divider);
  }

  .flux-accordion__item {
    border-block-end: var(--flux-hairline) solid var(--flux-accordion-divider);
  }

  .flux-accordion__summary {
    display: flex;
    align-items: center;
    gap: var(--flux-space-3);
    padding-block: var(--flux-accordion-padding-y);
    color: var(--flux-text-primary);
    font-size: var(--flux-accordion-title-size);
    font-weight: var(--flux-weight-bold);
    list-style: none;
    cursor: pointer;
    transition: color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-accordion__summary::-webkit-details-marker {
    display: none;
  }

  .flux-accordion__summary:hover {
    color: var(--flux-accordion-title-hover);
  }

  .flux-accordion__title {
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  .flux-accordion__meta {
    color: var(--flux-accordion-meta);
    font-family: var(--flux-font-mono);
    font-size: var(--flux-text-sm);
    font-weight: var(--flux-weight-mono-medium);
  }

  .flux-accordion__icon {
    flex: none;
    inline-size: var(--flux-space-4);
    block-size: var(--flux-space-4);
    color: var(--flux-accordion-icon);
    transition: transform var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-accordion__item[open] > .flux-accordion__summary .flux-accordion__icon {
    transform: rotate(180deg);
  }

  .flux-accordion__panel {
    padding-block-end: var(--flux-accordion-panel-padding);
    color: var(--flux-text-secondary);
  }

  .flux-accordion__panel > :first-child {
    margin-block-start: 0;
  }

  .flux-accordion__panel > :last-child {
    margin-block-end: 0;
  }

  /* Toast ----------------------------------------------------------- */

  /* The region is a live region, present before the first toast so that
     every toast is announced. flux-components.js creates it if it is missing. */
  .flux-toaster {
    position: fixed;
    inset-block-end: var(--flux-toast-offset);
    inset-inline-end: var(--flux-toast-offset);
    z-index: 4;
    display: grid;
    gap: var(--flux-toast-gap);
    inline-size: min(var(--flux-toast-width), calc(100vw - var(--flux-toast-offset) * 2));
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
  }

  .flux-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--flux-toast-gap);
    padding: var(--flux-toast-padding);
    border: var(--flux-hairline) solid var(--flux-toast-border);
    border-radius: var(--flux-radius-sm);
    background: var(--flux-toast-bg);
    box-shadow: var(--flux-toast-shadow);
    color: var(--flux-text-primary);
    font-size: var(--flux-text-sm);
    line-height: var(--flux-leading-normal);
    pointer-events: auto;
    animation: flux-toast-in var(--flux-duration-normal) var(--flux-ease-entrance);
  }

  .flux-toaster .flux-toast[data-leaving] {
    opacity: 0;
    transition: opacity var(--flux-duration-fast) var(--flux-ease-exit);
  }

  .flux-toast__icon {
    display: grid;
    flex: none;
    place-items: center;
    inline-size: var(--flux-toast-icon-size);
    block-size: 1lh;
    color: var(--flux-toast-icon);
  }

  .flux-toast__icon > svg {
    inline-size: 100%;
    block-size: auto;
  }

  .flux-toast[data-tone='success'] .flux-toast__icon {
    color: var(--flux-toast-icon-success);
  }

  .flux-toast__message {
    flex: 1 1 auto;
    margin: 0;
  }

  .flux-toast__actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--flux-space-1);
    margin-block: calc(var(--flux-space-1) * -1);
  }

  .flux-toast--static {
    animation: none;
  }

  /* A region drawn in the page flow, for documentation. Not a live region. */
  .flux-toaster--static {
    position: static;
    inline-size: auto;
    max-inline-size: var(--flux-toast-width);
    pointer-events: auto;
  }

  @keyframes flux-toast-in {
    from {
      opacity: 0;
      transform: translateY(var(--flux-space-2));
    }
  }

  /* Reorder --------------------------------------------------------- */

  /* Positioned, so each item's offsetTop is measured from the list. */
  .flux-reorder {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .flux-reorder__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--flux-reorder-gap);
    padding-block: var(--flux-reorder-padding-y);
    padding-inline-end: var(--flux-reorder-gap);
    border-block-end: var(--flux-hairline) solid var(--flux-reorder-divider);
    background: var(--flux-layer-01);
    color: var(--flux-text-primary);
    font-size: var(--flux-text-sm);
  }

  .flux-reorder__item:first-child {
    border-block-start: var(--flux-hairline) solid var(--flux-reorder-divider);
  }

  /* Lifted while dragged or picked up: it floats, so it takes a shadow. */
  .flux-reorder__item[data-lifted] {
    z-index: 1;
    border-radius: var(--flux-radius-sm);
    background: var(--flux-reorder-lifted-bg);
    box-shadow: var(--flux-reorder-lifted-shadow);
  }

  .flux-reorder__item[data-settling] {
    transition: transform var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-reorder__handle {
    display: inline-grid;
    flex: none;
    place-items: center;
    inline-size: var(--flux-reorder-handle-size);
    block-size: var(--flux-reorder-handle-size);
    padding: 0;
    border: 0;
    border-radius: var(--flux-radius-sm);
    background: transparent;
    color: var(--flux-reorder-handle-icon);
    cursor: grab;
    touch-action: none;
    transition: color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-reorder__handle:hover,
  .flux-reorder__item[data-lifted] .flux-reorder__handle {
    color: var(--flux-icon-brand);
  }

  .flux-reorder__item[data-lifted] .flux-reorder__handle {
    cursor: grabbing;
  }

  .flux-reorder__handle svg {
    inline-size: var(--flux-space-4);
    block-size: var(--flux-space-4);
  }

  .flux-reorder__label {
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  .flux-reorder__meta {
    color: var(--flux-text-secondary);
    font-family: var(--flux-font-mono);
    font-weight: var(--flux-weight-mono-medium);
  }

  /* Editable cell --------------------------------------------------- */

  /* The value is a button until it is edited, so every editable cell is
     reachable with Tab and says what it edits. */
  .flux-editable__value {
    display: block;
    inline-size: calc(100% + var(--flux-editable-padding-x) * 2);
    margin-inline: calc(var(--flux-editable-padding-x) * -1);
    padding: var(--flux-space-1) var(--flux-editable-padding-x);
    border: var(--flux-hairline) solid transparent;
    border-radius: var(--flux-editable-radius);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: text;
    transition: border-color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-editable__value:hover {
    border-color: var(--flux-editable-border-hover);
  }

  .flux-editable__value[hidden] {
    display: none;
  }

  .flux-editable__input {
    inline-size: calc(100% + var(--flux-editable-padding-x) * 2);
    height: auto;
    margin-inline: calc(var(--flux-editable-padding-x) * -1);
    padding: var(--flux-space-1) var(--flux-editable-padding-x);
    font-size: inherit;
    text-align: inherit;
  }

  .flux-editable[data-state='saving'] .flux-editable__value {
    color: var(--flux-editable-saving-text);
    cursor: progress;
  }

  .flux-editable {
    position: relative;
  }

  /* At the start of the cell, clear of a right-aligned figure. */
  .flux-editable__status {
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--flux-table-cell-padding-x);
  }

  /* Wraps inside the column rather than widening it. */
  .flux-editable .flux-field__help {
    contain: inline-size;
    margin-block-end: 0;
    white-space: normal;
  }

  /* Tooltip --------------------------------------------------------- */

  /* A manual popover, so it sits in the top layer above scroll containers.
     flux-components.js opens it on hover and focus and places it. */
  .flux-tooltip {
    position: fixed;
    inset: auto;
    max-inline-size: var(--flux-tooltip-max-width);
    margin: var(--flux-tooltip-offset) 0;
    padding: var(--flux-tooltip-padding-y) var(--flux-tooltip-padding-x);
    border: 0;
    border-radius: var(--flux-tooltip-radius);
    background: var(--flux-tooltip-bg);
    color: var(--flux-tooltip-text);
    font-size: var(--flux-tooltip-font-size);
    line-height: var(--flux-leading-snug);
    overflow: visible;
  }

  /* Popover --------------------------------------------------------- */

  .flux-popover {
    position: fixed;
    inset: auto;
    inline-size: var(--flux-popover-width);
    max-inline-size: calc(100vw - var(--flux-space-8));
    margin: var(--flux-menu-offset) 0;
    padding: var(--flux-popover-padding);
    border: var(--flux-hairline) solid var(--flux-popover-border);
    border-radius: var(--flux-popover-radius);
    background: var(--flux-popover-bg);
    box-shadow: var(--flux-popover-shadow);
    color: var(--flux-text-primary);
    font-size: var(--flux-text-sm);
  }

  .flux-popover__title {
    margin: 0 0 var(--flux-space-2);
    font-size: var(--flux-text-base);
    font-weight: var(--flux-weight-bold);
  }

  .flux-popover__body {
    margin: 0;
    color: var(--flux-text-secondary);
  }

  .flux-popover__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--flux-space-2);
    margin-block-start: var(--flux-popover-gap);
  }

  /* Empty state ----------------------------------------------------- */

  /* A heading and its lede may be centred; nothing longer belongs here. */
  .flux-empty {
    display: grid;
    justify-items: center;
    gap: var(--flux-empty-gap);
    padding: var(--flux-empty-padding) var(--flux-space-6);
    text-align: center;
    white-space: normal;
  }

  .flux-empty__icon {
    inline-size: var(--flux-empty-icon-size);
    block-size: var(--flux-empty-icon-size);
    color: var(--flux-empty-icon);
  }

  .flux-empty__title {
    margin: 0;
    color: var(--flux-text-primary);
    font-size: var(--flux-empty-title-size);
    font-weight: var(--flux-weight-bold);
  }

  .flux-empty__body {
    max-inline-size: var(--flux-empty-measure);
    margin: 0;
    color: var(--flux-empty-body);
    font-size: var(--flux-text-base);
    line-height: var(--flux-leading-normal);
  }

  .flux-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--flux-space-2);
    margin-block-start: var(--flux-space-2);
  }

  .flux-empty--compact {
    padding-block: var(--flux-space-8);
  }

  /* Breadcrumbs ----------------------------------------------------- */

  .flux-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--flux-breadcrumbs-gap);
    margin: 0;
    padding: 0;
    font-size: var(--flux-text-sm);
    list-style: none;
  }

  .flux-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: var(--flux-breadcrumbs-gap);
    min-inline-size: 0;
  }

  .flux-breadcrumbs__item + .flux-breadcrumbs__item::before {
    content: '';
    flex: none;
    inline-size: var(--flux-breadcrumbs-separator-size);
    block-size: var(--flux-breadcrumbs-separator-size);
    background: var(--flux-breadcrumbs-separator);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 2.5L8 6l-3.5 3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .flux-breadcrumbs__link {
    color: var(--flux-breadcrumbs-link);
    text-decoration: none;
    text-underline-offset: var(--flux-space-1);
    transition: color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-breadcrumbs__link:hover {
    color: var(--flux-breadcrumbs-link-hover);
    text-decoration: underline;
  }

  .flux-breadcrumbs [aria-current='page'] {
    overflow: hidden;
    color: var(--flux-breadcrumbs-current);
    font-weight: var(--flux-weight-bold);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Pagination ------------------------------------------------------ */

  .flux-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--flux-space-2) var(--flux-space-4);
    font-size: var(--flux-text-sm);
  }

  .flux-table-wrap + .flux-pagination {
    margin-block-start: var(--flux-space-4);
  }

  .flux-pagination__range {
    margin: 0;
    color: var(--flux-pagination-range);
    font-variant-numeric: tabular-nums;
  }

  .flux-pagination__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--flux-pagination-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .flux-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--flux-space-1);
    min-inline-size: var(--flux-pagination-item-size);
    block-size: var(--flux-pagination-item-size);
    padding-inline: var(--flux-space-2);
    border-radius: var(--flux-radius-sm);
    color: var(--flux-pagination-item-text);
    text-decoration: none;
    transition: background-color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-pagination__link:hover {
    background: var(--flux-pagination-item-hover);
    color: var(--flux-pagination-item-text);
  }

  .flux-pagination__link svg {
    inline-size: var(--flux-space-4);
    block-size: var(--flux-space-4);
  }

  .flux-pagination__page {
    font-family: var(--flux-font-mono);
    font-weight: var(--flux-weight-mono-regular);
    font-variant-numeric: tabular-nums;
  }

  .flux-pagination__link[aria-current='page'] {
    background: var(--flux-pagination-current-bg);
    color: var(--flux-pagination-current-text);
    font-weight: var(--flux-weight-mono-bold);
  }

  .flux-pagination__link[aria-disabled='true'] {
    color: var(--flux-text-disabled);
    pointer-events: none;
  }

  .flux-pagination__gap {
    min-inline-size: var(--flux-pagination-item-size);
    color: var(--flux-pagination-range);
    text-align: center;
  }

  /* Segmented control ----------------------------------------------- */

  /* Native radios, so arrow keys, form submission and the group name come
     from the platform. The input is invisible; its label draws the option
     and takes the focus ring. */
  .flux-segmented {
    display: inline-flex;
    max-inline-size: 100%;
    margin: 0;
    padding: 0;
    border: var(--flux-hairline) solid var(--flux-segmented-border);
    border-radius: var(--flux-radius-sm);
    background: var(--flux-segmented-bg);
  }

  .flux-segmented__option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    block-size: calc(var(--flux-segmented-height) - var(--flux-hairline) * 2);
    padding-inline: var(--flux-segmented-padding-x);
    color: var(--flux-segmented-text);
    font-size: var(--flux-text-sm);
    font-weight: var(--flux-weight-bold);
    white-space: nowrap;
    cursor: pointer;
    transition:
      background-color var(--flux-duration-fast) var(--flux-ease-productive),
      color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-segmented__option + .flux-segmented__option {
    border-inline-start: var(--flux-hairline) solid var(--flux-segmented-border);
  }

  .flux-segmented__option:first-of-type {
    border-start-start-radius: calc(var(--flux-radius-sm) - var(--flux-hairline));
    border-end-start-radius: calc(var(--flux-radius-sm) - var(--flux-hairline));
  }

  .flux-segmented__option:last-of-type {
    border-start-end-radius: calc(var(--flux-radius-sm) - var(--flux-hairline));
    border-end-end-radius: calc(var(--flux-radius-sm) - var(--flux-hairline));
  }

  .flux-segmented__option > input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: inherit;
  }

  .flux-segmented__option:hover {
    color: var(--flux-segmented-text-hover);
  }

  .flux-segmented__option:has(:checked) {
    background: var(--flux-segmented-selected-bg);
    color: var(--flux-segmented-selected-text);
  }

  .flux-segmented__option:has(:focus-visible) {
    z-index: 1;
    outline: var(--flux-focus-ring-width) solid var(--flux-focus-ring);
    outline-offset: var(--flux-focus-ring-offset);
  }

  .flux-segmented__option:has(:disabled) {
    color: var(--flux-text-disabled);
    cursor: not-allowed;
  }

  .flux-segmented--sm .flux-segmented__option {
    block-size: calc(var(--flux-segmented-height-sm) - var(--flux-hairline) * 2);
    padding-inline: var(--flux-space-3);
  }

  /* Stepper and wizard ---------------------------------------------- */

  /* Numbered, because order is the meaning. Markers are near-square like
     every other control; the connector after a finished step turns teal. */
  .flux-stepper {
    display: flex;
    gap: var(--flux-stepper-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .flux-stepper__step {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--flux-stepper-gap);
    min-inline-size: 0;
    color: var(--flux-stepper-label);
    font-size: var(--flux-text-sm);
  }

  .flux-stepper__step:last-child {
    flex: 0 1 auto;
  }

  .flux-stepper__step:not(:last-child)::after {
    content: '';
    flex: 1 1 auto;
    min-inline-size: var(--flux-space-4);
    block-size: var(--flux-hairline);
    background: var(--flux-stepper-connector);
  }

  .flux-stepper__step[data-state='complete']:not(:last-child)::after {
    background: var(--flux-stepper-connector-complete);
  }

  .flux-stepper__marker {
    display: inline-grid;
    flex: none;
    place-items: center;
    inline-size: var(--flux-stepper-marker-size);
    block-size: var(--flux-stepper-marker-size);
    border: var(--flux-hairline) solid var(--flux-stepper-marker-border);
    border-radius: var(--flux-radius-sm);
    color: var(--flux-stepper-marker-text);
    font-family: var(--flux-font-mono);
    font-weight: var(--flux-weight-mono-medium);
    font-variant-numeric: tabular-nums;
    transition:
      background-color var(--flux-duration-fast) var(--flux-ease-productive),
      border-color var(--flux-duration-fast) var(--flux-ease-productive),
      color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-stepper__marker svg {
    inline-size: var(--flux-space-4);
    block-size: var(--flux-space-4);
  }

  .flux-stepper__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .flux-stepper__step[aria-current='step'] {
    color: var(--flux-stepper-label-current);
    font-weight: var(--flux-weight-bold);
  }

  .flux-stepper__step[aria-current='step'] .flux-stepper__marker {
    border-color: var(--flux-stepper-marker-current-bg);
    background: var(--flux-stepper-marker-current-bg);
    color: var(--flux-stepper-marker-current-text);
  }

  .flux-stepper__step[data-state='complete'] .flux-stepper__marker {
    border-color: var(--flux-stepper-marker-complete);
    color: var(--flux-stepper-marker-complete);
  }

  .flux-stepper__step[data-state='error'] {
    color: var(--flux-stepper-marker-error);
  }

  .flux-stepper__step[data-state='error'] .flux-stepper__marker {
    border-color: var(--flux-stepper-marker-error);
    color: var(--flux-stepper-marker-error);
  }

  /* Narrow, only the current step keeps its label; the rest keep their marker. */
  @media (width <= 48rem) {
    .flux-stepper__step:not([aria-current='step']) .flux-stepper__label {
      position: absolute;
      inline-size: var(--flux-hairline);
      block-size: var(--flux-hairline);
      overflow: hidden;
      clip-path: inset(50%);
    }
  }

  .flux-wizard {
    display: grid;
    gap: var(--flux-space-6);
  }

  .flux-wizard__step {
    display: grid;
    gap: var(--flux-space-5);
  }

  .flux-wizard__step[hidden] {
    display: none;
  }

  .flux-wizard__title {
    margin: 0;
    color: var(--flux-text-primary);
    font-size: var(--flux-text-xl);
    font-weight: var(--flux-weight-bold);
  }

  .flux-wizard__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--flux-space-2);
    padding-block-start: var(--flux-space-4);
    border-block-start: var(--flux-hairline) solid var(--flux-border-subtle);
  }

  .flux-wizard__actions > [data-flux-wizard-back] {
    margin-inline-end: auto;
  }

  .flux-wizard__actions > [hidden] {
    display: none;
  }

  /* Split view ------------------------------------------------------ */

  /* Two panes that scroll on their own. In a narrow container the list
     and the detail take turns, and the detail gains a way back. */
  .flux-split {
    container-type: inline-size;
    display: flex;
    block-size: var(--flux-split-height);
    overflow: hidden;
    border: var(--flux-hairline) solid var(--flux-split-border);
    border-radius: var(--flux-radius-sm);
    background: var(--flux-split-bg);
  }

  /* The divider is drawn by the list inside the pane, not the pane, leaving
     a gutter the selected item's pointer can reach into without the
     scrolling pane clipping it. */
  .flux-split__list {
    flex: 0 0 min(var(--flux-split-list-width), 45%);
    overflow-y: auto;
  }

  .flux-split__items {
    min-block-size: 100%;
    margin: 0;
    margin-inline-end: var(--flux-split-item-pointer-size);
    padding: 0;
    border-inline-end: var(--flux-hairline) solid var(--flux-split-border);
    list-style: none;
  }

  .flux-split__item {
    position: relative;
    display: grid;
    gap: var(--flux-space-1);
    inline-size: 100%;
    padding: var(--flux-split-item-padding-y) var(--flux-split-item-padding-x);
    border: 0;
    border-block-end: var(--flux-hairline) solid var(--flux-split-border);
    background: transparent;
    color: var(--flux-text-primary);
    font: inherit;
    font-size: var(--flux-text-sm);
    text-align: start;
    cursor: pointer;
    transition: background-color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-split__item:hover {
    background: var(--flux-split-item-hover);
  }

  /* The selected fill continues past the divider as a pointer at the
     detail, covering the divider beside it. */
  .flux-split__item[aria-current='true'] {
    background: var(--flux-split-item-selected);
  }

  .flux-split__item[aria-current='true']::after {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 100%;
    inline-size: calc(var(--flux-split-item-pointer-size) + var(--flux-hairline));
    background: inherit;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }

  .flux-split__item[aria-current='true']:dir(rtl)::after {
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
  }

  /* The list pane scrolls and would clip an outer ring, so it is drawn inside. */
  .flux-split__item:focus-visible {
    outline-offset: calc(var(--flux-focus-ring-width) * -2);
  }

  .flux-split__item-title {
    display: flex;
    justify-content: space-between;
    gap: var(--flux-space-3);
    font-weight: var(--flux-weight-bold);
  }

  .flux-split__item-meta {
    color: var(--flux-split-item-meta);
  }

  .flux-split__ref {
    font-family: var(--flux-font-mono);
    font-weight: var(--flux-weight-mono-medium);
  }

  .flux-split__detail {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow-y: auto;
    padding: var(--flux-split-detail-padding);
  }

  .flux-split__panel {
    display: grid;
    align-content: start;
    gap: var(--flux-space-5);
  }

  .flux-split__panel[hidden],
  .flux-split__back {
    display: none;
  }

  .flux-split__title {
    margin: 0;
    color: var(--flux-text-primary);
    font-size: var(--flux-text-xl);
    font-weight: var(--flux-weight-bold);
  }

  .flux-split__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--flux-space-2);
    padding-block-start: var(--flux-space-4);
    border-block-start: var(--flux-hairline) solid var(--flux-split-border);
  }

  @container (width < 32rem) {
    .flux-split__list,
    .flux-split__detail {
      flex-basis: 100%;
      border-inline-end: 0;
    }

    .flux-split__items {
      margin-inline-end: 0;
      border-inline-end: 0;
    }

    .flux-split__item[aria-current='true']::after {
      content: none;
    }

    .flux-split[data-view='detail'] .flux-split__list,
    .flux-split:not([data-view='detail']) .flux-split__detail {
      display: none;
    }

    .flux-split__back {
      display: inline-flex;
      justify-self: start;
    }

    .flux-split__back svg {
      inline-size: var(--flux-space-4);
      block-size: var(--flux-space-4);
    }
  }

  /* File upload ----------------------------------------------------- */

  /* The file input covers the dropzone, so a click anywhere opens the
     picker and a dropped file lands in the input natively. */
  .flux-upload {
    display: grid;
    gap: var(--flux-space-3);
  }

  .flux-upload__dropzone {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--flux-upload-gap);
    padding: var(--flux-upload-padding);
    border: var(--flux-hairline) dashed var(--flux-upload-border);
    border-radius: var(--flux-radius-sm);
    background: var(--flux-upload-bg);
    color: var(--flux-upload-text);
    font-size: var(--flux-text-sm);
    text-align: center;
    transition:
      background-color var(--flux-duration-fast) var(--flux-ease-productive),
      border-color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-upload__dropzone:hover,
  .flux-upload__dropzone[data-dragover] {
    border-color: var(--flux-upload-border-active);
  }

  .flux-upload__dropzone[data-dragover] {
    border-style: solid;
    background: var(--flux-upload-bg-active);
  }

  .flux-upload__dropzone:has(.flux-upload__input:focus-visible) {
    outline: var(--flux-focus-ring-width) solid var(--flux-focus-ring);
    outline-offset: var(--flux-focus-ring-offset);
  }

  .flux-upload__dropzone:has(.flux-upload__input:disabled) {
    border-color: var(--flux-border-disabled);
    color: var(--flux-text-disabled);
  }

  .flux-upload__input {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    opacity: 0;
    cursor: pointer;
  }

  .flux-upload__icon {
    inline-size: var(--flux-upload-icon-size);
    block-size: var(--flux-upload-icon-size);
    color: var(--flux-upload-icon);
  }

  .flux-upload__prompt {
    margin: 0;
    color: var(--flux-text-primary);
  }

  .flux-upload__action {
    color: var(--flux-text-brand);
    font-weight: var(--flux-weight-bold);
  }

  .flux-upload__list {
    margin: 0;
    padding: 0;
    border: var(--flux-hairline) solid var(--flux-upload-item-divider);
    border-radius: var(--flux-radius-sm);
    background: var(--flux-layer-01);
    list-style: none;
  }

  .flux-upload__list:empty {
    display: none;
  }

  .flux-upload__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--flux-upload-item-gap);
    padding: var(--flux-upload-item-padding-y) var(--flux-upload-item-padding-x);
    font-size: var(--flux-text-sm);
  }

  .flux-upload__item + .flux-upload__item {
    border-block-start: var(--flux-hairline) solid var(--flux-upload-item-divider);
  }

  .flux-upload__file-icon {
    inline-size: var(--flux-space-5);
    block-size: var(--flux-space-5);
    color: var(--flux-upload-icon);
  }

  .flux-upload__item[data-state='done'] .flux-upload__file-icon {
    color: var(--flux-upload-success);
  }

  .flux-upload__item[data-state='error'] .flux-upload__file-icon {
    color: var(--flux-text-error);
  }

  .flux-upload__body {
    display: grid;
    gap: var(--flux-space-1);
    min-inline-size: 0;
  }

  .flux-upload__name {
    overflow: hidden;
    color: var(--flux-text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .flux-upload__meta {
    color: var(--flux-upload-meta);
  }

  .flux-upload__size {
    font-family: var(--flux-font-mono);
    font-weight: var(--flux-weight-mono-regular);
    font-variant-numeric: tabular-nums;
  }

  .flux-upload__item[data-state='error'] .flux-upload__meta {
    color: var(--flux-text-error);
  }

  .flux-upload__actions {
    display: flex;
    align-items: center;
    gap: var(--flux-space-1);
  }

  /* Assistant panel ------------------------------------------------- */

  .flux-assistant {
    display: flex;
    flex-direction: column;
    inline-size: min(100%, var(--flux-assistant-width));
    block-size: var(--flux-assistant-height);
    border: var(--flux-hairline) solid var(--flux-assistant-border);
    border-radius: var(--flux-radius-sm);
    background: var(--flux-assistant-bg);
  }

  .flux-assistant__header {
    display: flex;
    align-items: center;
    gap: var(--flux-space-3);
    padding: var(--flux-space-4) var(--flux-assistant-padding);
    border-block-end: var(--flux-hairline) solid var(--flux-assistant-border);
  }

  /* Graphic only: the product accent marks the assistant, never its text. */
  .flux-assistant__mark {
    flex: none;
    inline-size: var(--flux-assistant-mark-size);
    block-size: var(--flux-assistant-mark-size);
    border-radius: var(--flux-radius-sm);
    background: var(--flux-assistant-mark);
  }

  .flux-assistant__heading {
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  .flux-assistant__title {
    margin: 0;
    color: var(--flux-text-primary);
    font-size: var(--flux-text-base);
    font-weight: var(--flux-weight-bold);
  }

  .flux-assistant__subtitle {
    margin: 0;
    color: var(--flux-assistant-meta);
    font-size: var(--flux-text-sm);
  }

  .flux-assistant__log {
    display: grid;
    flex: 1 1 auto;
    align-content: start;
    gap: var(--flux-assistant-gap);
    overflow-y: auto;
    padding: var(--flux-assistant-padding);
  }

  .flux-assistant__message {
    display: grid;
    gap: var(--flux-space-2);
    color: var(--flux-text-primary);
    font-size: var(--flux-text-sm);
    line-height: var(--flux-leading-relaxed);
  }

  .flux-assistant__message > p {
    margin: 0;
  }

  /* The tail points to the sender's side, so the corner it leaves is square. */
  .flux-assistant__message--user {
    position: relative;
    justify-self: end;
    max-inline-size: 85%;
    margin-inline-end: var(--flux-assistant-tail-size);
    padding: var(--flux-space-3) var(--flux-space-4);
    border-radius: var(--flux-radius-sm);
    border-end-end-radius: 0;
    background: var(--flux-assistant-user-bg);
  }

  .flux-assistant__message--user::after {
    content: '';
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 100%;
    inline-size: var(--flux-assistant-tail-size);
    block-size: var(--flux-assistant-tail-size);
    background: inherit;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
  }

  .flux-assistant__message--user:dir(rtl)::after {
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
  }

  .flux-assistant__sources {
    display: flex;
    flex-wrap: wrap;
    gap: var(--flux-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .flux-assistant__source {
    display: inline-flex;
    align-items: baseline;
    gap: var(--flux-space-2);
    padding: var(--flux-space-1) var(--flux-space-2);
    border-radius: var(--flux-radius-sm);
    background: var(--flux-assistant-source-bg);
    color: var(--flux-text-primary);
    text-decoration: none;
    transition: background-color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-assistant__source:hover {
    background: var(--flux-assistant-source-hover);
    color: var(--flux-text-primary);
  }

  .flux-assistant__source-ref {
    color: var(--flux-text-brand);
    font-family: var(--flux-font-mono);
    font-weight: var(--flux-weight-mono-medium);
  }

  .flux-assistant__suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--flux-space-2);
    padding: 0 var(--flux-assistant-padding) var(--flux-space-3);
  }

  .flux-assistant__suggestions:empty {
    display: none;
  }

  .flux-assistant__composer {
    display: grid;
    gap: var(--flux-space-2);
    padding: var(--flux-space-4) var(--flux-assistant-padding);
    border-block-start: var(--flux-hairline) solid var(--flux-assistant-border);
  }

  .flux-assistant__field {
    display: flex;
    align-items: flex-end;
    gap: var(--flux-space-2);
  }

  .flux-assistant__field .flux-textarea {
    field-sizing: content;
    min-height: var(--flux-field-height);
    max-block-size: var(--flux-space-32);
    resize: none;
  }

  .flux-assistant__send {
    flex: none;
    inline-size: var(--flux-button-height-md);
    padding-inline: 0;
  }

  .flux-assistant__send svg {
    inline-size: var(--flux-space-4);
    block-size: var(--flux-space-4);
  }

  .flux-assistant__disclaimer {
    margin: 0;
    color: var(--flux-assistant-meta);
    font-size: var(--flux-text-xs);
  }

  /* Rich text editor and prose -------------------------------------- */

  .flux-editor {
    border: var(--flux-hairline) solid var(--flux-editor-border);
    border-radius: var(--flux-radius-sm);
    background: var(--flux-editor-bg);
    transition: border-color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-editor:hover {
    border-color: var(--flux-editor-border-hover);
  }

  .flux-editor:focus-within {
    border-color: var(--flux-field-border-focus);
  }

  .flux-editor__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--flux-space-1);
    padding: var(--flux-editor-toolbar-padding);
    border-block-end: var(--flux-hairline) solid var(--flux-border-subtle);
    border-start-start-radius: calc(var(--flux-radius-sm) - var(--flux-hairline));
    border-start-end-radius: calc(var(--flux-radius-sm) - var(--flux-hairline));
    background: var(--flux-editor-toolbar-bg);
  }

  .flux-editor__group {
    display: flex;
    gap: var(--flux-space-1);
  }

  .flux-editor__group + .flux-editor__group {
    padding-inline-start: var(--flux-space-1);
    border-inline-start: var(--flux-hairline) solid var(--flux-border-subtle);
  }

  .flux-editor__tool {
    display: inline-grid;
    place-items: center;
    inline-size: var(--flux-editor-tool-size);
    block-size: var(--flux-editor-tool-size);
    padding: 0;
    border: 0;
    border-radius: var(--flux-radius-sm);
    background: transparent;
    color: var(--flux-editor-tool-icon);
    cursor: pointer;
    transition:
      background-color var(--flux-duration-fast) var(--flux-ease-productive),
      color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-editor__tool:hover {
    background: var(--flux-editor-tool-hover);
  }

  .flux-editor__tool[aria-pressed='true'] {
    background: var(--flux-editor-tool-pressed-bg);
    color: var(--flux-editor-tool-pressed-icon);
  }

  .flux-editor__tool svg {
    inline-size: var(--flux-space-4);
    block-size: var(--flux-space-4);
  }

  .flux-editor > .flux-editor__content {
    min-block-size: var(--flux-editor-min-height);
    max-inline-size: none;
    padding: var(--flux-editor-content-padding);
  }

  /* The editor's own border already shows where the field is; the ring is
     drawn inside it so it does not collide with that border. */
  .flux-editor__content:focus-visible {
    outline-offset: calc(var(--flux-focus-ring-width) * -1);
  }

  .flux-editor__content:empty::before {
    content: attr(data-placeholder);
    color: var(--flux-text-placeholder);
  }

  .flux-prose {
    max-inline-size: var(--flux-measure-prose);
    color: var(--flux-prose-text);
    font-size: var(--flux-text-base);
    line-height: var(--flux-leading-relaxed);
  }

  .flux-prose > * {
    margin-block: 0;
  }

  .flux-prose > * + * {
    margin-block-start: var(--flux-prose-gap);
  }

  .flux-prose :is(h2, h3) {
    font-weight: var(--flux-weight-bold);
    line-height: var(--flux-leading-snug);
  }

  .flux-prose h2 {
    font-size: var(--flux-prose-heading-2);
  }

  .flux-prose h3 {
    font-size: var(--flux-prose-heading-3);
  }

  .flux-prose :is(ul, ol) {
    padding-inline-start: var(--flux-space-6);
  }

  .flux-prose li + li {
    margin-block-start: var(--flux-space-1);
  }

  .flux-prose blockquote {
    margin-inline: 0;
    padding-inline-start: var(--flux-space-4);
    border-inline-start: var(--flux-hairline) solid var(--flux-prose-quote-border);
    color: var(--flux-prose-quote-text);
  }

  .flux-prose strong,
  .flux-prose b {
    font-weight: var(--flux-weight-bold);
  }

  .flux-prose a {
    color: var(--flux-prose-link);
    text-decoration: underline;
    text-underline-offset: var(--flux-space-1);
  }

  .flux-prose code {
    font-family: var(--flux-font-mono);
    font-weight: var(--flux-weight-mono-regular);
  }

  /* Utility --------------------------------------------------------- */

  /* Read by assistive technology, not drawn. For captions, column names and icon labels. */
  .flux-visually-hidden {
    position: absolute;
    width: var(--flux-hairline);
    height: var(--flux-hairline);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Note ------------------------------------------------------------ */

  .flux-note {
    display: flex;
    gap: var(--flux-note-gap);
    padding: var(--flux-note-padding);
    border-radius: var(--flux-note-radius);
    background: var(--flux-surface-info-subtle);
    color: var(--flux-text-primary);
    font-size: var(--flux-text-sm);
    line-height: var(--flux-leading-relaxed);
  }

  .flux-note--success {
    background: var(--flux-surface-success-subtle);
  }

  .flux-note--warning {
    background: var(--flux-surface-warning-subtle);
  }

  .flux-note--error {
    background: var(--flux-surface-error-subtle);
  }

  .flux-note__title {
    margin: 0 0 var(--flux-space-1);
    font-weight: var(--flux-weight-bold);
  }

  .flux-note__body {
    margin: 0;
    color: var(--flux-text-secondary);
  }

  /* Description list ------------------------------------------------ */

  .flux-dl {
    display: flex;
    flex-wrap: wrap;
    gap: var(--flux-dl-gap-y) var(--flux-dl-gap-x);
    margin: 0;
  }

  /* dt and dd cannot be flex or grid children of dl directly in every engine,
     so each pair is wrapped. The wrapper does not break the dt/dd association. */
  .flux-dl__pair {
    display: flex;
    flex-direction: column;
    gap: var(--flux-dl-term-gap);
  }

  .flux-dl__term {
    color: var(--flux-dl-term-color);
    font-size: var(--flux-dl-term-size);
    font-weight: var(--flux-weight-bold);
  }

  .flux-dl__detail {
    margin: 0;
    color: var(--flux-dl-detail-color);
    font-size: var(--flux-dl-detail-size);
  }

  /* Data rather than language: mono, and lined up for comparison. */
  .flux-dl__detail--data {
    font-family: var(--flux-font-mono);
    font-weight: var(--flux-weight-mono-regular);
    font-variant-numeric: tabular-nums;
  }

  .flux-dl--stacked {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--flux-dl-gap-y);
  }

  .flux-dl--stacked .flux-dl__pair {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--flux-dl-gap-x);
  }

  .flux-dl--stacked .flux-dl__detail {
    text-align: right;
  }

  /* Tabs ------------------------------------------------------------ */

  .flux-tabs {
    display: flex;
    gap: var(--flux-space-1);
    border-bottom: var(--flux-hairline) solid var(--flux-border-subtle);
  }

  .flux-tab {
    height: var(--flux-tab-height);
    padding-inline: var(--flux-tab-padding-x);
    border: 0;
    border-bottom: var(--flux-tab-indicator-width) solid transparent;
    margin-bottom: calc(var(--flux-hairline) * -1);
    background: transparent;
    color: var(--flux-tab-text);
    font-family: var(--flux-font-sans);
    font-size: var(--flux-tab-font-size);
    font-weight: var(--flux-weight-bold);
    cursor: pointer;
  }

  .flux-tab:hover {
    color: var(--flux-text-primary);
  }

  .flux-tab[aria-selected='true'] {
    border-bottom-color: var(--flux-tab-indicator);
    color: var(--flux-tab-text-active);
  }

  /* Avatar ---------------------------------------------------------- */

  .flux-avatar {
    display: inline-grid;
    place-items: center;
    width: var(--flux-avatar-size-md);
    height: var(--flux-avatar-size-md);
    border-radius: var(--flux-avatar-radius);
    background: var(--flux-avatar-bg);
    color: var(--flux-avatar-text);
    font-family: var(--flux-font-mono);
    font-size: var(--flux-text-xs);
    font-weight: var(--flux-weight-mono-bold);
    overflow: hidden;
  }

  .flux-avatar--sm {
    width: var(--flux-avatar-size-sm);
    height: var(--flux-avatar-size-sm);
  }

  .flux-avatar--lg {
    width: var(--flux-avatar-size-lg);
    height: var(--flux-avatar-size-lg);
    font-size: var(--flux-text-base);
  }

  .flux-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .flux-avatar-group {
    display: inline-flex;
  }

  .flux-avatar-group .flux-avatar + .flux-avatar {
    margin-left: calc(var(--flux-space-2) * -1);
    box-shadow: 0 0 0 2px var(--flux-layer-01);
  }

  /* Modal ----------------------------------------------------------- */

  .flux-modal {
    width: 100%;
    max-width: var(--flux-modal-width-md);
    padding: 0;
    border: 0;
    border-radius: var(--flux-modal-radius);
    background: var(--flux-modal-bg);
    box-shadow: var(--flux-modal-shadow);
    color: var(--flux-text-primary);
  }

  .flux-modal::backdrop {
    background: var(--flux-modal-backdrop);
  }

  .flux-modal__header,
  .flux-modal__footer {
    display: flex;
    align-items: center;
    gap: var(--flux-space-3);
    padding: var(--flux-modal-padding);
  }

  .flux-modal__header {
    border-bottom: var(--flux-hairline) solid var(--flux-border-subtle);
  }

  .flux-modal__footer {
    justify-content: flex-end;
    border-top: var(--flux-hairline) solid var(--flux-border-subtle);
  }

  .flux-modal__title {
    margin: 0;
    font-size: var(--flux-text-lg);
    font-weight: var(--flux-weight-bold);
  }

  .flux-modal__body {
    padding: var(--flux-modal-padding);
    color: var(--flux-text-secondary);
    font-size: var(--flux-text-sm);
    line-height: var(--flux-leading-relaxed);
  }

  /* Drawer ---------------------------------------------------------- */

  /* A modal dialog pinned to the end edge at full height. display is set only
     while open, so a closed dialog stays hidden by the platform. */
  .flux-drawer {
    --flux-drawer-enter: 100%;

    inline-size: var(--flux-drawer-width);
    max-inline-size: 100%;
    block-size: 100%;
    max-block-size: 100%;
    margin: 0;
    margin-inline-start: auto;
    padding: 0;
    border: 0;
    background: var(--flux-drawer-bg);
    box-shadow: var(--flux-drawer-shadow);
    color: var(--flux-text-primary);
  }

  .flux-drawer:dir(rtl) {
    --flux-drawer-enter: -100%;
  }

  .flux-drawer--lg {
    inline-size: var(--flux-drawer-width-lg);
  }

  .flux-drawer[open],
  .flux-drawer__form {
    display: flex;
    flex-direction: column;
    min-block-size: 0;
  }

  .flux-drawer[open] {
    animation: flux-drawer-in var(--flux-drawer-duration) var(--flux-ease-entrance);
  }

  .flux-drawer__form {
    flex: 1 1 auto;
  }

  .flux-drawer::backdrop {
    background: var(--flux-drawer-backdrop);
  }

  .flux-drawer[open]::backdrop {
    animation: flux-drawer-backdrop-in var(--flux-drawer-duration) var(--flux-ease-entrance);
  }

  .flux-drawer__header,
  .flux-drawer__footer {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--flux-space-3);
    padding: var(--flux-drawer-padding);
  }

  .flux-drawer__header {
    border-block-end: var(--flux-hairline) solid var(--flux-drawer-divider);
  }

  .flux-drawer__heading {
    display: grid;
    flex: 1 1 auto;
    gap: var(--flux-space-1);
    min-inline-size: 0;
  }

  .flux-drawer__title {
    margin: 0;
    font-size: var(--flux-text-lg);
    font-weight: var(--flux-weight-bold);
  }

  .flux-drawer__meta {
    margin: 0;
    color: var(--flux-text-secondary);
    font-size: var(--flux-text-sm);
  }

  .flux-drawer__close {
    display: inline-grid;
    flex: none;
    place-items: center;
    align-self: flex-start;
    inline-size: var(--flux-button-height-sm);
    block-size: var(--flux-button-height-sm);
    padding: 0;
    border: 0;
    border-radius: var(--flux-radius-sm);
    background: transparent;
    color: var(--flux-icon-secondary);
    cursor: pointer;
    transition:
      color var(--flux-duration-fast) var(--flux-ease-productive),
      background-color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-drawer__close:hover {
    background: var(--flux-layer-hover-01);
    color: var(--flux-icon-primary);
  }

  .flux-drawer__close > svg {
    inline-size: var(--flux-space-4);
    block-size: var(--flux-space-4);
  }

  .flux-drawer__body {
    display: grid;
    flex: 1 1 auto;
    align-content: start;
    gap: var(--flux-space-6);
    min-block-size: 0;
    padding: var(--flux-drawer-padding);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .flux-drawer__footer {
    justify-content: flex-end;
    border-block-start: var(--flux-hairline) solid var(--flux-drawer-divider);
  }

  @keyframes flux-drawer-in {
    from {
      transform: translateX(var(--flux-drawer-enter));
    }
  }

  @keyframes flux-drawer-backdrop-in {
    from {
      opacity: 0;
    }
  }

  /* Chart ----------------------------------------------------------- */

  /* Built from lists and inline SVG rather than a library, so every mark takes
     a theme role. Each mark names its series with data-series. */
  .flux-chart {
    display: grid;
    gap: var(--flux-chart-gap);
    min-inline-size: 0;
    margin: 0;
  }

  .flux-chart [data-series] {
    --flux-chart-mark: var(--flux-chart-1);
  }

  .flux-chart [data-series='2'] {
    --flux-chart-mark: var(--flux-chart-2);
  }

  .flux-chart [data-series='3'] {
    --flux-chart-mark: var(--flux-chart-3);
  }

  .flux-chart [data-series='4'] {
    --flux-chart-mark: var(--flux-chart-4);
  }

  .flux-chart [data-series='muted'] {
    --flux-chart-mark: var(--flux-chart-muted);
  }

  .flux-chart__header {
    display: grid;
    gap: var(--flux-space-1);
  }

  .flux-chart__title {
    margin: 0;
    color: var(--flux-text-primary);
    font-size: var(--flux-text-base);
    font-weight: var(--flux-weight-bold);
  }

  .flux-chart__summary {
    margin: 0;
    color: var(--flux-text-secondary);
    font-size: var(--flux-text-sm);
  }

  .flux-chart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--flux-space-2) var(--flux-chart-legend-gap);
    margin: 0;
    padding: 0;
    color: var(--flux-text-secondary);
    font-size: var(--flux-text-sm);
    list-style: none;
  }

  .flux-chart__legend > li {
    display: flex;
    align-items: center;
    gap: var(--flux-space-2);
  }

  .flux-chart__swatch {
    flex: none;
    inline-size: var(--flux-chart-swatch-size);
    block-size: var(--flux-chart-swatch-size);
    border-radius: var(--flux-radius-sm);
    background: var(--flux-chart-mark);
  }

  /* The key for a line series: a stroke, dashed when the series is. */
  .flux-chart__swatch--line {
    inline-size: var(--flux-space-5);
    block-size: 0;
    border-block-start: calc(var(--flux-hairline) * var(--flux-chart-line-width)) solid var(--flux-chart-mark);
    border-radius: 0;
    background: none;
  }

  .flux-chart__swatch--line[data-series='muted'] {
    border-block-start-style: dashed;
  }

  .flux-chart__legend-value {
    color: var(--flux-text-primary);
    font-family: var(--flux-font-mono);
    font-variant-numeric: tabular-nums;
  }

  /* Plot frame: the scale on the start side, the plot, and the category row
     below. Columns and lines share it, so both have the same axis. */
  .flux-chart__frame {
    display: grid;
    grid-template-columns: var(--flux-chart-scale-width) minmax(0, 1fr);
    grid-template-rows: var(--flux-chart-plot-height) auto;
    padding-block-start: var(--flux-chart-headroom);
  }

  .flux-chart__scale {
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    grid-area: 1 / 1 / 2 / -1;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .flux-chart__scale > li {
    position: relative;
    block-size: 0;
  }

  .flux-chart__scale > li::after {
    content: '';
    position: absolute;
    inset-inline: var(--flux-chart-scale-width) 0;
    border-block-start: var(--flux-hairline) solid var(--flux-chart-grid);
  }

  /* The first tick is zero: the baseline the data stands on. */
  .flux-chart__scale > li:first-child::after {
    border-block-start-color: var(--flux-chart-axis);
  }

  .flux-chart__scale > li > span {
    position: absolute;
    inset-inline-start: 0;
    inline-size: calc(var(--flux-chart-scale-width) - var(--flux-space-2));
    color: var(--flux-chart-label);
    font-family: var(--flux-font-mono);
    font-size: var(--flux-text-xs);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: end;
    transform: translateY(-50%);
  }

  .flux-chart__columns,
  .flux-chart__categories {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    grid-column: 2;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .flux-chart__columns {
    grid-row: 1 / 3;
    grid-template-rows: subgrid;
  }

  .flux-chart__categories {
    grid-row: 2;
  }

  .flux-chart__columns > li {
    display: grid;
    grid-row: 1 / 3;
    grid-template-rows: subgrid;
  }

  .flux-chart__bars {
    display: flex;
    grid-row: 1;
    align-items: flex-end;
    justify-content: center;
    gap: var(--flux-chart-column-gap);
    position: relative;
  }

  .flux-chart__column {
    position: relative;
    flex: 0 1 var(--flux-chart-bar-width);
    block-size: var(--flux-value, 0%);
    border-start-start-radius: var(--flux-radius-sm);
    border-start-end-radius: var(--flux-radius-sm);
    background: var(--flux-chart-mark);
  }

  .flux-chart__column > .flux-chart__value {
    position: absolute;
    inset-block-end: 100%;
    inset-inline-start: 50%;
    padding-block-end: var(--flux-space-1);
    transform: translateX(-50%);
  }

  .flux-chart__column > .flux-chart__value:dir(rtl) {
    transform: translateX(50%);
  }

  .flux-chart__category,
  .flux-chart__categories > li {
    grid-row: 2;
    padding-block-start: var(--flux-space-2);
    color: var(--flux-chart-label);
    font-family: var(--flux-font-mono);
    font-size: var(--flux-text-xs);
    text-align: center;
  }

  .flux-chart__value {
    color: var(--flux-text-primary);
    font-family: var(--flux-font-mono);
    font-size: var(--flux-text-sm);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* Lines are drawn on a 100 × 100 plot: x across the category centres, y as a
     percentage of the scale. The stroke keeps its width as the plot stretches. */
  .flux-chart__lines {
    grid-area: 1 / 2;
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
  }

  .flux-chart__lines polyline {
    fill: none;
    stroke: var(--flux-chart-mark);
    stroke-width: var(--flux-chart-line-width);
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }

  .flux-chart__lines [data-series='muted'] {
    stroke-dasharray: var(--flux-chart-line-dash);
  }

  /* Ranked bars: a label, the bar and its value on one line. */
  .flux-chart__rows {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    gap: var(--flux-space-3) var(--flux-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .flux-chart__rows > li {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
  }

  .flux-chart__label {
    color: var(--flux-text-primary);
    font-size: var(--flux-text-sm);
  }

  .flux-chart__bar {
    inline-size: var(--flux-value, 0%);
    block-size: var(--flux-chart-row-bar-height);
    border-radius: var(--flux-radius-sm);
    background: var(--flux-chart-mark);
  }

  .flux-chart__rows .flux-chart__value {
    text-align: end;
  }

  /* Donut: radius 15.9155 makes the circumference 100, so a segment's dash is
     the percentage it represents and its offset is the sum of those before it. */
  .flux-chart__donut {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--flux-space-8);
  }

  .flux-chart__ring {
    flex: none;
    inline-size: var(--flux-chart-donut-size);
    block-size: var(--flux-chart-donut-size);
    transform: rotate(-90deg);
  }

  .flux-chart__ring circle {
    fill: none;
    stroke: var(--flux-chart-mark);
    stroke-width: var(--flux-chart-donut-stroke);
  }

  .flux-chart__ring .flux-chart__track {
    stroke: var(--flux-chart-track);
  }

  .flux-chart__donut .flux-chart__legend {
    display: grid;
    gap: var(--flux-space-3);
  }

  .flux-chart__donut .flux-chart__legend > li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: var(--flux-space-3);
  }

  /* Stacked columns: the stack is the total, as a share of the scale, and
     each segment is its part, as a share of the stack. The first segment in
     source order sits on the baseline. */
  .flux-chart__stack {
    position: relative;
    display: flex;
    flex: 0 1 var(--flux-chart-bar-width);
    flex-direction: column-reverse;
    gap: var(--flux-chart-stack-gap);
    block-size: var(--flux-value, 0%);
  }

  .flux-chart__segment {
    flex: 0 1 var(--flux-value, 0%);
    min-block-size: 0;
    background: var(--flux-chart-mark);
  }

  .flux-chart__segment:nth-last-child(1 of .flux-chart__segment) {
    border-start-start-radius: var(--flux-radius-sm);
    border-start-end-radius: var(--flux-radius-sm);
  }

  .flux-chart__stack > .flux-chart__value {
    position: absolute;
    inset-block-end: 100%;
    inset-inline-start: 50%;
    padding-block-end: var(--flux-space-1);
    transform: translateX(-50%);
  }

  .flux-chart__stack > .flux-chart__value:dir(rtl) {
    transform: translateX(50%);
  }

  /* Two scales: the start scale draws the gridlines, and the end scale labels
     the same lines in the second unit, so both need the same number of ticks. */
  .flux-chart__frame--dual {
    grid-template-columns: var(--flux-chart-scale-width) minmax(0, 1fr) var(--flux-chart-scale-width);
  }

  .flux-chart__frame--dual .flux-chart__scale > li::after {
    inset-inline-end: var(--flux-chart-scale-width);
  }

  .flux-chart__scale--end > li::after {
    content: none;
  }

  .flux-chart__scale--end > li > span {
    inset-inline: auto 0;
    text-align: start;
  }

  /* An area is the region under its line, closed down to the baseline. */
  .flux-chart__lines polygon {
    fill: var(--flux-chart-mark);
    fill-opacity: var(--flux-chart-area-opacity);
    stroke: none;
  }

  /* Inspection: one target per category over the plot. Hovering or focusing
     one draws a guide through its centre and shows its readout. */
  .flux-chart__targets {
    display: grid;
    grid-area: 1 / 2;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .flux-chart__targets > li {
    position: relative;
  }

  .flux-chart__targets > li::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    border-inline-start: var(--flux-hairline) solid var(--flux-chart-guide);
    opacity: 0;
    transition: opacity var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-chart__readout {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: calc(50% + var(--flux-chart-readout-gap));
    display: grid;
    gap: var(--flux-space-1);
    inline-size: max-content;
    padding: var(--flux-chart-readout-padding-y) var(--flux-chart-readout-padding-x);
    border: var(--flux-hairline) solid var(--flux-chart-readout-border);
    border-radius: var(--flux-radius-sm);
    background: var(--flux-chart-readout-bg);
    box-shadow: var(--flux-chart-readout-shadow);
    color: var(--flux-text-primary);
    font-size: var(--flux-text-sm);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--flux-duration-fast) var(--flux-ease-productive);
  }

  /* The last categories open their readout towards the start, so it stays on the plot. */
  .flux-chart__targets > li:nth-last-child(-n + 2) > .flux-chart__readout {
    inset-inline: auto calc(50% + var(--flux-chart-readout-gap));
  }

  .flux-chart__targets > li[data-active]::before,
  .flux-chart__targets > li[data-active] > .flux-chart__readout {
    opacity: 1;
  }

  .flux-chart__readout-title {
    margin: 0;
    font-weight: var(--flux-weight-bold);
  }

  .flux-chart__readout-values {
    display: grid;
    grid-template-columns: auto auto;
    gap: var(--flux-space-1) var(--flux-space-4);
    margin: 0;
  }

  .flux-chart__readout-values > div {
    display: contents;
  }

  .flux-chart__readout-values dt {
    display: flex;
    align-items: center;
    gap: var(--flux-space-2);
    color: var(--flux-text-secondary);
  }

  .flux-chart__readout-values dd {
    margin: 0;
    font-family: var(--flux-font-mono);
    font-variant-numeric: tabular-nums;
    text-align: end;
  }

  /* Heatmap --------------------------------------------------------- */

  /* A table whose cells are buttons on one sequential teal ramp. Each value is
     printed in its cell, so the colour is never the only way to read it. */
  .flux-heatmap {
    display: grid;
    gap: var(--flux-chart-gap);
    min-inline-size: 0;
    margin: 0;
  }

  .flux-heatmap__header {
    display: grid;
    gap: var(--flux-space-1);
  }

  .flux-heatmap__title {
    margin: 0;
    color: var(--flux-text-primary);
    font-size: var(--flux-text-base);
    font-weight: var(--flux-weight-bold);
  }

  .flux-heatmap__summary {
    margin: 0;
    color: var(--flux-text-secondary);
    font-size: var(--flux-text-sm);
  }

  .flux-heatmap__scroll {
    min-inline-size: 0;
    overflow-x: auto;
  }

  .flux-heatmap__table {
    border-collapse: separate;
    border-spacing: var(--flux-heatmap-cell-gap);
    font-size: var(--flux-text-sm);
  }

  .flux-heatmap__table th {
    padding: 0;
    font-weight: var(--flux-weight-bold);
  }

  .flux-heatmap__table th[scope='col'] {
    padding-block-end: var(--flux-space-2);
    color: var(--flux-heatmap-header);
    font-family: var(--flux-font-mono);
    font-size: var(--flux-text-xs);
    font-weight: var(--flux-weight-mono-medium);
    text-align: center;
  }

  .flux-heatmap__table th[scope='row'] {
    padding-inline-end: var(--flux-space-4);
    color: var(--flux-heatmap-row-header);
    text-align: start;
    white-space: nowrap;
  }

  .flux-heatmap__table td {
    padding: 0;
  }

  .flux-heatmap__cell,
  .flux-heatmap__empty {
    display: grid;
    place-items: center;
    inline-size: 100%;
    min-inline-size: var(--flux-heatmap-cell-min-width);
    block-size: var(--flux-heatmap-cell-height);
    padding-inline: var(--flux-heatmap-cell-padding-x);
    border-radius: var(--flux-radius-sm);
    font-family: var(--flux-font-mono);
    font-size: var(--flux-text-sm);
    font-variant-numeric: tabular-nums;
  }

  .flux-heatmap__cell {
    --flux-heatmap-fill: var(--flux-chart-sequential-1);
    --flux-heatmap-text: var(--flux-chart-sequential-text-1);
    border: 0;
    background: var(--flux-heatmap-fill);
    color: var(--flux-heatmap-text);
    cursor: pointer;
  }

  .flux-heatmap [data-step='2'] {
    --flux-heatmap-fill: var(--flux-chart-sequential-2);
    --flux-heatmap-text: var(--flux-chart-sequential-text-2);
  }

  .flux-heatmap [data-step='3'] {
    --flux-heatmap-fill: var(--flux-chart-sequential-3);
    --flux-heatmap-text: var(--flux-chart-sequential-text-3);
  }

  .flux-heatmap [data-step='4'] {
    --flux-heatmap-fill: var(--flux-chart-sequential-4);
    --flux-heatmap-text: var(--flux-chart-sequential-text-4);
  }

  .flux-heatmap [data-step='5'] {
    --flux-heatmap-fill: var(--flux-chart-sequential-5);
    --flux-heatmap-text: var(--flux-chart-sequential-text-5);
  }

  .flux-heatmap__cell:hover {
    box-shadow: inset 0 0 0 calc(var(--flux-hairline) * 2) var(--flux-heatmap-hover-ring);
  }

  /* Raised so the focus ring paints over the neighbouring cells. */
  .flux-heatmap__cell:focus-visible {
    position: relative;
    z-index: 1;
  }

  /* No fill: an empty cell reads as the absence of a value, never as a low one. */
  .flux-heatmap__empty {
    color: var(--flux-heatmap-empty-text);
  }

  .flux-heatmap__key {
    display: flex;
    flex-wrap: wrap;
    gap: var(--flux-space-2) var(--flux-chart-legend-gap);
    margin: 0;
    padding: 0;
    color: var(--flux-text-secondary);
    font-size: var(--flux-text-sm);
    list-style: none;
  }

  .flux-heatmap__key > li {
    display: flex;
    align-items: center;
    gap: var(--flux-space-2);
  }

  .flux-heatmap__swatch {
    --flux-heatmap-fill: var(--flux-chart-sequential-1);
    flex: none;
    inline-size: var(--flux-heatmap-key-swatch);
    block-size: var(--flux-chart-swatch-size);
    border-radius: var(--flux-radius-sm);
    background: var(--flux-heatmap-fill);
  }

  /* Keyboard shortcut ----------------------------------------------- */

  .flux-kbd {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--flux-kbd-gap);
    padding-inline: var(--flux-kbd-padding-x);
    border: var(--flux-hairline) solid var(--flux-kbd-border);
    border-radius: var(--flux-radius-sm);
    background: var(--flux-kbd-bg);
    color: var(--flux-kbd-text);
    font-family: var(--flux-font-mono);
    font-size: var(--flux-text-xs);
    font-weight: var(--flux-weight-mono-medium);
    line-height: var(--flux-leading-normal);
    white-space: nowrap;
  }

  .flux-menu__item > .flux-kbd,
  .flux-command__option > .flux-kbd {
    margin-inline-start: auto;
  }

  .flux-shortcuts {
    display: grid;
    gap: var(--flux-space-2);
    margin: 0;
  }

  .flux-shortcuts > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--flux-space-2) var(--flux-space-4);
    padding-block: var(--flux-space-2);
    border-block-end: var(--flux-hairline) solid var(--flux-border-subtle);
  }

  .flux-shortcuts dt {
    font-size: var(--flux-text-sm);
  }

  .flux-shortcuts dd {
    display: flex;
    flex-wrap: wrap;
    gap: var(--flux-space-1);
    margin: 0;
  }

  /* Command palette ------------------------------------------------- */

  .flux-command {
    inline-size: var(--flux-command-width);
    max-inline-size: calc(100% - var(--flux-space-8));
    max-block-size: calc(100% - var(--flux-command-offset) - var(--flux-space-4));
    margin: var(--flux-command-offset) auto auto;
    padding: 0;
    border: 0;
    border-radius: var(--flux-radius-sm);
    background: var(--flux-command-bg);
    box-shadow: var(--flux-command-shadow);
    color: var(--flux-text-primary);
    font-family: var(--flux-font-sans);
    font-weight: var(--flux-weight-light);
  }

  .flux-command[open] {
    display: flex;
    flex-direction: column;
    animation: flux-drawer-backdrop-in var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-command::backdrop {
    background: var(--flux-command-backdrop);
  }

  .flux-command__search {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--flux-space-1);
    padding-inline: var(--flux-space-4) var(--flux-space-2);
    border-block-end: var(--flux-hairline) solid var(--flux-command-divider);
  }

  .flux-command__search > svg {
    flex: none;
    inline-size: var(--flux-space-4);
    block-size: var(--flux-space-4);
    color: var(--flux-icon-secondary);
  }

  .flux-command__input {
    flex: 1 1 auto;
    min-inline-size: 0;
    block-size: var(--flux-command-input-height);
    padding: 0 var(--flux-space-2);
    border: 0;
    background: transparent;
    color: var(--flux-text-primary);
    font: inherit;
    font-size: var(--flux-text-base);
  }

  .flux-command__input:focus-visible {
    outline-offset: calc(var(--flux-focus-ring-offset) * -1);
  }

  .flux-command__input::placeholder {
    color: var(--flux-text-placeholder);
  }

  .flux-command__list {
    flex: 1 1 auto;
    max-block-size: var(--flux-command-list-height);
    padding: var(--flux-command-padding);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .flux-command__group {
    display: grid;
  }

  .flux-command__group + .flux-command__group {
    margin-block-start: var(--flux-space-2);
  }

  .flux-command__group[hidden],
  .flux-command__option[hidden],
  .flux-command__empty[hidden] {
    display: none;
  }

  .flux-command__group-label {
    padding: var(--flux-space-2) var(--flux-command-option-padding-x) var(--flux-space-1);
    color: var(--flux-command-group-label);
    font-family: var(--flux-font-mono);
    font-size: var(--flux-text-xs);
    font-weight: var(--flux-weight-mono-bold);
    letter-spacing: var(--flux-tracking-wide);
    text-transform: uppercase;
  }

  .flux-command__option {
    display: flex;
    align-items: center;
    gap: var(--flux-space-3);
    padding: var(--flux-command-option-padding-y) var(--flux-command-option-padding-x);
    border-radius: var(--flux-radius-sm);
    font-size: var(--flux-text-sm);
    cursor: pointer;
    transition: background-color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-command__option[aria-selected='true'] {
    background: var(--flux-command-option-active);
  }

  .flux-command__option > svg {
    flex: none;
    inline-size: var(--flux-space-4);
    block-size: var(--flux-space-4);
    color: var(--flux-command-option-icon);
  }

  .flux-command__meta {
    color: var(--flux-text-secondary);
    font-family: var(--flux-font-mono);
    font-weight: var(--flux-weight-mono-medium);
  }

  .flux-command__empty {
    margin: 0;
    padding: var(--flux-space-6) var(--flux-command-option-padding-x);
    color: var(--flux-text-secondary);
    font-size: var(--flux-text-sm);
  }

  .flux-command__footer {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    gap: var(--flux-space-2) var(--flux-space-4);
    padding: var(--flux-space-2) var(--flux-space-4);
    border-block-start: var(--flux-hairline) solid var(--flux-command-divider);
    color: var(--flux-text-secondary);
    font-size: var(--flux-text-xs);
  }

  .flux-command__footer > span {
    display: inline-flex;
    align-items: center;
    gap: var(--flux-space-1);
  }

  /* Calendar view --------------------------------------------------- */

  .flux-calendar {
    display: grid;
    gap: var(--flux-space-4);
  }

  .flux-calendar__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--flux-space-2);
  }

  .flux-calendar__title {
    margin: 0 auto 0 0;
    font-size: var(--flux-text-lg);
    font-weight: var(--flux-weight-bold);
  }

  .flux-calendar__nav {
    display: inline-grid;
    place-items: center;
    inline-size: var(--flux-button-height-sm);
    block-size: var(--flux-button-height-sm);
    padding: 0;
    border: 0;
    border-radius: var(--flux-radius-sm);
    background: transparent;
    color: var(--flux-icon-secondary);
    cursor: pointer;
    transition:
      color var(--flux-duration-fast) var(--flux-ease-productive),
      background-color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-calendar__nav:hover {
    background: var(--flux-layer-hover-01);
    color: var(--flux-icon-primary);
  }

  .flux-calendar__nav > svg {
    inline-size: var(--flux-space-4);
    block-size: var(--flux-space-4);
  }

  .flux-calendar__scroll {
    overflow-x: auto;
  }

  .flux-calendar__grid {
    inline-size: 100%;
    min-inline-size: var(--flux-calendar-min-width);
    border-collapse: collapse;
    table-layout: fixed;
    background: var(--flux-calendar-bg);
  }

  .flux-calendar__grid th {
    padding: var(--flux-space-2) var(--flux-calendar-day-padding);
    border: var(--flux-hairline) solid var(--flux-calendar-border);
    color: var(--flux-text-subtle);
    font-family: var(--flux-font-mono);
    font-size: var(--flux-text-xs);
    font-weight: var(--flux-weight-mono-bold);
    letter-spacing: var(--flux-tracking-wide);
    text-align: start;
    text-transform: uppercase;
  }

  .flux-calendar__grid td {
    block-size: var(--flux-calendar-day-min-height);
    padding: var(--flux-calendar-day-padding);
    border: var(--flux-hairline) solid var(--flux-calendar-border);
    vertical-align: top;
  }

  .flux-calendar__grid td[data-outside] {
    background: var(--flux-calendar-outside-bg);
  }

  .flux-calendar__date {
    display: inline-grid;
    place-items: center;
    min-inline-size: var(--flux-space-6);
    block-size: var(--flux-space-6);
    padding-inline: var(--flux-space-1);
    border-radius: var(--flux-radius-sm);
    color: var(--flux-calendar-date);
    font-family: var(--flux-font-mono);
    font-size: var(--flux-text-sm);
  }

  td[data-outside] > .flux-calendar__date {
    color: var(--flux-text-subtle);
  }

  td[aria-current='date'] > .flux-calendar__date {
    background: var(--flux-calendar-today-bg);
    color: var(--flux-calendar-today-text);
    font-weight: var(--flux-weight-mono-bold);
  }

  .flux-calendar__events {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--flux-space-1);
    margin: var(--flux-space-1) 0 0;
    padding: 0;
    list-style: none;
  }

  .flux-calendar__event {
    display: flex;
    align-items: center;
    gap: var(--flux-space-1);
    min-inline-size: 0;
    padding: var(--flux-space-1) var(--flux-space-2);
    border-radius: var(--flux-radius-sm);
    background: var(--flux-calendar-event-bg);
    color: var(--flux-text-primary);
    font-size: var(--flux-text-sm);
    text-decoration: none;
    transition: background-color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-calendar__event:hover {
    background: var(--flux-calendar-event-hover);
  }

  .flux-calendar__event--attention,
  .flux-calendar__event--attention:hover {
    background: var(--flux-calendar-event-attention);
  }

  .flux-calendar__event > svg {
    flex: none;
    inline-size: var(--flux-space-3);
    block-size: var(--flux-space-3);
  }

  .flux-calendar__event-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .flux-calendar__more {
    color: var(--flux-text-link);
    font-size: var(--flux-text-sm);
  }

  /* Board ----------------------------------------------------------- */

  .flux-board {
    display: flex;
    align-items: flex-start;
    gap: var(--flux-board-gap);
    padding-block-end: var(--flux-space-2);
    overflow-x: auto;
  }

  .flux-board__column {
    display: grid;
    flex: 0 0 var(--flux-board-column-width);
    gap: var(--flux-space-3);
  }

  .flux-board__header {
    display: flex;
    align-items: baseline;
    gap: var(--flux-space-2);
  }

  .flux-board__title {
    margin: 0;
    font-size: var(--flux-text-sm);
    font-weight: var(--flux-weight-bold);
  }

  .flux-board__count {
    color: var(--flux-text-secondary);
    font-family: var(--flux-font-mono);
    font-size: var(--flux-text-sm);
    font-weight: var(--flux-weight-mono-medium);
  }

  .flux-board__cards {
    display: grid;
    align-content: start;
    gap: var(--flux-board-card-gap);
    min-block-size: var(--flux-space-24);
    margin: 0;
    padding: var(--flux-board-column-padding);
    border-radius: var(--flux-radius-sm);
    background: var(--flux-board-column-bg);
    list-style: none;
  }

  .flux-board__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--flux-space-1) var(--flux-space-2);
    padding: var(--flux-board-card-padding);
    border: var(--flux-hairline) solid var(--flux-board-card-border);
    border-radius: var(--flux-radius-sm);
    background: var(--flux-board-card-bg);
    transition:
      border-color var(--flux-duration-fast) var(--flux-ease-productive),
      box-shadow var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-board__card[data-lifted] {
    position: relative;
    z-index: 1;
    border-color: var(--flux-board-drop-border);
    box-shadow: var(--flux-board-lifted-shadow);
  }

  .flux-board__ref {
    color: var(--flux-text-secondary);
    font-family: var(--flux-font-mono);
    font-size: var(--flux-text-sm);
    font-weight: var(--flux-weight-mono-medium);
  }

  .flux-board__name {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--flux-text-sm);
  }

  .flux-board__meta {
    display: flex;
    margin: 0;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    align-items: center;
    gap: var(--flux-space-2);
    color: var(--flux-text-secondary);
    font-size: var(--flux-text-sm);
  }

  .flux-board__handle {
    display: inline-grid;
    grid-row: 1;
    grid-column: 2;
    place-items: center;
    inline-size: var(--flux-space-6);
    block-size: var(--flux-space-6);
    padding: 0;
    border: 0;
    border-radius: var(--flux-radius-sm);
    background: transparent;
    color: var(--flux-icon-secondary);
    cursor: grab;
    touch-action: none;
    transition: color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-board__handle:hover,
  .flux-board__card[data-lifted] .flux-board__handle {
    color: var(--flux-icon-brand);
  }

  .flux-board__card[data-lifted] .flux-board__handle {
    cursor: grabbing;
  }

  .flux-board__handle > svg {
    inline-size: var(--flux-space-4);
    block-size: var(--flux-space-4);
  }

  /* Walkthrough and storyboard -------------------------------------- */

  .flux-walkthrough {
    display: grid;
    gap: var(--flux-walkthrough-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: flux-step;
    container-type: inline-size;
  }

  .flux-walkthrough__step {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: start;
    gap: var(--flux-space-8);
    counter-increment: flux-step;
  }

  @container (inline-size < 44rem) {
    .flux-walkthrough__step {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--flux-space-4);
    }
  }

  .flux-walkthrough__text {
    display: grid;
    justify-items: start;
    gap: var(--flux-space-3);
    max-inline-size: var(--flux-measure-prose);
  }

  .flux-walkthrough__text::before {
    content: counter(flux-step);
    display: inline-grid;
    place-items: center;
    inline-size: var(--flux-walkthrough-marker-size);
    block-size: var(--flux-walkthrough-marker-size);
    border-radius: var(--flux-radius-sm);
    background: var(--flux-walkthrough-marker-bg);
    color: var(--flux-walkthrough-marker-text);
    font-family: var(--flux-font-mono);
    font-size: var(--flux-text-sm);
    font-weight: var(--flux-weight-mono-bold);
  }

  .flux-walkthrough__title {
    margin: 0;
    font-size: var(--flux-text-xl);
    font-weight: var(--flux-weight-bold);
  }

  .flux-walkthrough__text p {
    margin: 0;
    color: var(--flux-text-secondary);
    font-size: var(--flux-text-base);
    line-height: var(--flux-leading-relaxed);
  }

  .flux-walkthrough__media {
    display: grid;
    gap: var(--flux-space-2);
    margin: 0;
  }

  .flux-walkthrough__frame {
    display: grid;
    gap: var(--flux-space-3);
    padding: var(--flux-walkthrough-media-padding);
    border-radius: var(--flux-radius-sm);
    background: var(--flux-walkthrough-media-bg);
  }

  .flux-walkthrough__frame > img {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }

  .flux-walkthrough__media > figcaption {
    color: var(--flux-text-secondary);
    font-size: var(--flux-text-sm);
  }

  .flux-storyboard {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--flux-storyboard-frame-width), 100%), 1fr));
    gap: var(--flux-storyboard-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: flux-frame;
  }

  .flux-storyboard__frame {
    display: grid;
    align-content: start;
    gap: var(--flux-space-3);
    counter-increment: flux-frame;
  }

  .flux-storyboard__screen {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: var(--flux-space-2);
    aspect-ratio: 4 / 3;
    padding: var(--flux-storyboard-screen-padding);
    border: var(--flux-hairline) solid var(--flux-storyboard-screen-border);
    border-radius: var(--flux-radius-sm);
    background: var(--flux-storyboard-screen-bg);
    overflow: hidden;
  }

  .flux-storyboard__screen-title,
  .flux-storyboard__screen-meta {
    margin: 0;
    font-size: var(--flux-text-sm);
  }

  .flux-storyboard__screen-title {
    font-weight: var(--flux-weight-bold);
  }

  .flux-storyboard__screen-meta {
    color: var(--flux-text-secondary);
  }

  .flux-storyboard__screen > .flux-button,
  .flux-walkthrough__frame > .flux-button {
    justify-self: start;
  }

  .flux-storyboard__caption {
    display: flex;
    gap: var(--flux-space-2);
    margin: 0;
    color: var(--flux-text-secondary);
    font-size: var(--flux-text-sm);
  }

  .flux-storyboard__caption::before {
    content: counter(flux-frame);
    color: var(--flux-storyboard-number);
    font-family: var(--flux-font-mono);
    font-weight: var(--flux-weight-mono-bold);
  }

  /* Map ------------------------------------------------------------- */

  /* Geography is physical, so positions use left and top in every direction. */
  .flux-map {
    position: relative;
    block-size: var(--flux-map-height);
    border: var(--flux-hairline) solid var(--flux-map-border);
    border-radius: var(--flux-radius-sm);
    background: var(--flux-map-ground);
    overflow: hidden;
  }

  .flux-map__routes {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
  }

  .flux-map__graticule {
    fill: none;
    stroke: var(--flux-border-subtle);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
  }

  .flux-map__route {
    fill: none;
    stroke: var(--flux-map-route);
    stroke-width: var(--flux-map-route-width);
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }

  .flux-map__route--planned {
    stroke: var(--flux-map-route-planned);
    stroke-dasharray: var(--flux-map-route-dash);
  }

  .flux-map__marker {
    position: absolute;
    top: var(--flux-y);
    left: var(--flux-x);
    display: inline-grid;
    place-items: center;
    inline-size: var(--flux-map-marker-size);
    block-size: var(--flux-map-marker-size);
    padding: 0;
    border: calc(var(--flux-hairline) * 2) solid var(--flux-map-marker-ring);
    border-radius: var(--flux-radius-sm);
    background: var(--flux-map-marker-bg);
    color: var(--flux-map-marker-text);
    font-family: var(--flux-font-mono);
    font-size: var(--flux-text-sm);
    font-weight: var(--flux-weight-mono-bold);
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition:
      color var(--flux-duration-fast) var(--flux-ease-productive),
      background-color var(--flux-duration-fast) var(--flux-ease-productive),
      border-color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-map__marker[aria-pressed='true'] {
    z-index: 1;
    border-color: var(--flux-map-marker-selected-border);
    background: var(--flux-map-marker-selected-bg);
    color: var(--flux-map-marker-selected-text);
  }

  .flux-map__popup {
    position: absolute;
    z-index: 2;
    top: var(--flux-y);
    left: var(--flux-x);
    display: grid;
    gap: var(--flux-space-1);
    inline-size: var(--flux-map-popup-width);
    max-inline-size: calc(100% - var(--flux-space-4));
    padding: var(--flux-map-popup-padding);
    border-radius: var(--flux-radius-sm);
    background: var(--flux-map-popup-bg);
    box-shadow: var(--flux-map-popup-shadow);
    font-size: var(--flux-text-sm);
    transform: translate(-50%, calc(-100% - var(--flux-map-marker-size) / 2 - var(--flux-space-2)));
  }

  .flux-map__popup[hidden] {
    display: none;
  }

  .flux-map__popup-title {
    margin: 0;
    font-weight: var(--flux-weight-bold);
  }

  .flux-map__popup-meta {
    margin: 0;
    color: var(--flux-text-secondary);
  }

  .flux-map__legend {
    position: absolute;
    bottom: var(--flux-space-3);
    left: var(--flux-space-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--flux-space-2) var(--flux-space-4);
    margin: 0;
    padding: var(--flux-space-2) var(--flux-space-3);
    border: var(--flux-hairline) solid var(--flux-map-border);
    border-radius: var(--flux-radius-sm);
    background: var(--flux-layer-01);
    font-size: var(--flux-text-sm);
    list-style: none;
  }

  .flux-map__legend > li {
    display: inline-flex;
    align-items: center;
    gap: var(--flux-space-2);
  }

  .flux-map__legend svg {
    inline-size: var(--flux-space-6);
    block-size: var(--flux-space-2);
  }

  /* Flow diagram ---------------------------------------------------- */

  /* Node geometry is unitless: --flux-x, --flux-y, --flux-w and --flux-h count
     flow units, and the edge SVG's viewBox uses the same units. */
  .flux-flow {
    position: relative;
    border: var(--flux-hairline) solid var(--flux-flow-border);
    border-radius: var(--flux-radius-sm);
    background: var(--flux-flow-bg);
  }

  .flux-flow__viewport {
    block-size: var(--flux-flow-height);
    overflow: auto;
  }

  .flux-flow__canvas {
    position: relative;
    inline-size: calc(var(--flux-cols) * var(--flux-flow-unit));
    block-size: calc(var(--flux-rows) * var(--flux-flow-unit));
  }

  .flux-flow__edges {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
  }

  .flux-flow__dot {
    fill: var(--flux-flow-grid);
  }

  .flux-flow__edge {
    fill: none;
    stroke: var(--flux-flow-edge);
    stroke-width: var(--flux-flow-edge-width);
    vector-effect: non-scaling-stroke;
    transition: stroke var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-flow__edge[data-active] {
    stroke: var(--flux-flow-edge-active);
  }

  .flux-flow__arrow {
    fill: var(--flux-flow-edge);
  }

  .flux-flow__arrow--active {
    fill: var(--flux-flow-edge-active);
  }

  .flux-flow__nodes {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .flux-flow__node {
    position: absolute;
    top: calc(var(--flux-y) * var(--flux-flow-unit));
    left: calc(var(--flux-x) * var(--flux-flow-unit));
    display: grid;
    align-content: center;
    gap: var(--flux-space-1);
    inline-size: calc(var(--flux-w) * var(--flux-flow-unit));
    block-size: calc(var(--flux-h) * var(--flux-flow-unit));
    padding: var(--flux-flow-node-padding);
    border: var(--flux-hairline) solid var(--flux-flow-node-border);
    border-radius: var(--flux-radius-sm);
    background: var(--flux-flow-node-bg);
    color: var(--flux-text-primary);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition:
      background-color var(--flux-duration-fast) var(--flux-ease-productive),
      border-color var(--flux-duration-fast) var(--flux-ease-productive);
  }

  .flux-flow__node[aria-pressed='true'] {
    border-color: var(--flux-flow-node-selected-border);
    background: var(--flux-flow-node-selected-bg);
  }

  .flux-flow__node-type {
    color: var(--flux-flow-node-type);
    font-family: var(--flux-font-mono);
    font-size: var(--flux-text-xs);
    font-weight: var(--flux-weight-mono-bold);
    letter-spacing: var(--flux-tracking-wide);
    text-transform: uppercase;
  }

  .flux-flow__node-title {
    font-size: var(--flux-text-sm);
  }

  .flux-flow__label {
    position: absolute;
    top: calc(var(--flux-y) * var(--flux-flow-unit));
    left: calc(var(--flux-x) * var(--flux-flow-unit));
    padding-inline: var(--flux-space-1);
    background: var(--flux-flow-label-bg);
    color: var(--flux-text-secondary);
    font-family: var(--flux-font-mono);
    font-size: var(--flux-text-xs);
    font-weight: var(--flux-weight-mono-medium);
    transform: translate(-50%, -50%);
  }

  .flux-flow__minimap {
    position: absolute;
    right: var(--flux-space-3);
    bottom: var(--flux-space-3);
    inline-size: var(--flux-flow-minimap-width);
    padding: var(--flux-space-1);
    border: var(--flux-hairline) solid var(--flux-flow-border);
    border-radius: var(--flux-radius-sm);
    background: var(--flux-flow-minimap-bg);
  }

  .flux-flow__minimap svg {
    display: block;
    cursor: pointer;
    inline-size: 100%;
    block-size: auto;
  }

  .flux-flow__minimap-node {
    fill: var(--flux-flow-minimap-node);
  }

  .flux-flow__minimap-viewport {
    fill: none;
    stroke: var(--flux-flow-minimap-viewport);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
  }
}