/*
 * erui: the look of ERPOWER on top of the headless library hui. The markup and the behaviour
 * come from hui; state is styled only through the attributes it renders (data-enabled,
 * data-disabled, data-pending, data-invalid, data-readonly, data-required, data-checked,
 * data-open, data-selected, data-highlighted, data-searching, data-dragging).
 */

/* Icons: Lucide, stroke 1.5 */
.icon {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--xs {
  width: 12px;
  height: 12px;
}

.icon--sm {
  width: 14px;
  height: 14px;
}

.icon--lg {
  width: 20px;
  height: 20px;
}

.icon--xl {
  width: 24px;
  height: 24px;
}

/* Buttons */
.button {
  --button-bg: transparent;
  --button-fg: var(--color-fg);
  --button-line: transparent;
  --button-bg-hover: var(--button-bg);
  --button-fg-hover: var(--button-fg);
  --button-line-hover: var(--button-line);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--spacing-control-md);
  padding: 0 20px;
  border: 1px solid var(--button-line);
  border-radius: var(--radius-sm);
  background: var(--button-bg);
  color: var(--button-fg);
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.12s,
    border-color 0.12s,
    color 0.12s;
}

.button[data-enabled]:hover {
  border-color: var(--button-line-hover);
  background: var(--button-bg-hover);
  color: var(--button-fg-hover);
}

.button--primary {
  --button-bg: var(--color-brand);
  --button-fg: var(--color-on-brand);
  --button-bg-hover: var(--color-brand-hover);
}

.button--dark {
  --button-bg: var(--color-ink);
  --button-fg: var(--color-on-ink);
  --button-bg-hover: var(--color-brand);
}

.button--secondary {
  --button-bg: var(--color-surface);
  --button-line: var(--color-line-strong);
  --button-line-hover: var(--color-fg);
}

/* No border and no fill of its own, so the hover may not paint a shape: only the colour changes. */
.button--ghost {
  --button-fg-hover: var(--color-brand);
}

.button--on-ink {
  --button-fg: var(--color-on-ink);
  --button-line: var(--color-line-strong-on-ink);
  --button-bg-hover: var(--color-fill-on-ink-hover);
}

.button--on-ink-quiet {
  --button-fg: var(--color-on-ink);
  --button-line: var(--color-line-on-ink);
  --button-bg-hover: var(--color-fill-on-ink);
}

.button--on-ink-filled {
  --button-bg: var(--color-fill-on-ink);
  --button-fg: var(--color-on-ink);
  --button-line: var(--color-line-on-ink);
  --button-bg-hover: var(--color-fill-on-ink-hover);
}

/* Secondary buttons speak mono */
.button--secondary,
.button--ghost,
.button--on-ink,
.button--on-ink-quiet,
.button--on-ink-filled {
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  font-weight: 400;
}

.button--xs {
  height: var(--spacing-control-xs);
  padding-inline: 12px;
  font-size: var(--text-mono);
}

.button--sm {
  height: var(--spacing-control-sm);
  padding-inline: 14px;
}

.button--lg {
  height: var(--spacing-control-lg);
  font-size: var(--text-ui-sm);
}

.button--xl {
  height: var(--spacing-control-xl);
  padding-inline: 22px;
  font-size: var(--text-title-sm);
}

.button--secondary.button--sm,
.button--on-ink.button--sm,
.button--ghost.button--sm {
  font-size: var(--text-mono);
}

.button--secondary.button--lg,
.button--ghost.button--lg,
.button--on-ink.button--lg,
.button--on-ink-quiet.button--lg,
.button--on-ink-filled.button--lg,
.button--secondary.button--xl,
.button--ghost.button--xl,
.button--on-ink.button--xl {
  font-size: var(--text-mono-lg);
}

.button--square {
  aspect-ratio: 1;
  padding: 0;
}

.button--block {
  display: flex;
  width: 100%;
}

.button [data-slot] {
  display: contents;
}

.button--xs .icon,
.button--xs .spinner {
  width: 14px;
  height: 14px;
}

.button__stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.button__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}

.button__value {
  font-family: var(--font-sans);
  font-size: var(--text-ui-sm);
  font-weight: 500;
}

.button__value--mono {
  font-family: var(--font-mono);
  font-weight: 600;
}

.button__chevron {
  opacity: 0.5;
}

.button[data-disabled]:not([data-pending]) {
  --button-bg: var(--color-line);
  --button-fg: var(--color-fg-hint);
  --button-line: transparent;
  cursor: not-allowed;
}

.button--secondary[data-disabled]:not([data-pending]) {
  --button-bg: var(--color-stripe-b);
  --button-line: var(--color-line);
}

.button--ghost[data-disabled]:not([data-pending]) {
  --button-bg: transparent;
}

.button--on-ink[data-disabled]:not([data-pending]),
.button--on-ink-quiet[data-disabled]:not([data-pending]),
.button--on-ink-filled[data-disabled]:not([data-pending]) {
  --button-bg: transparent;
  --button-fg: var(--color-on-ink-subtle);
  --button-line: var(--color-line-on-ink);
}

/* While it waits, the spinner takes the place of the icon, so the width does not change. */
.button .spinner {
  display: none;
}

.button[data-pending] {
  cursor: progress;
}

.button[data-pending] .spinner {
  display: inline-block;
}

.button[data-pending] [data-slot="left"] .icon {
  display: none;
}

.button[aria-pressed="true"] .icon--fillable {
  fill: currentColor;
}

/* Rating: the coloured row of stars is clipped to the value in --rating. */
.rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  line-height: var(--text-mono-xs--line-height);
}

.rating__stars {
  position: relative;
  flex: none;
  width: 77px;
  height: 14px;
}

.rating__row {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: var(--color-line-strong);
}

.rating__row--value {
  fill: var(--color-highlight);
  clip-path: inset(0 calc(100% - var(--rating)) 0 0);
}

.rating__value {
  font-weight: 600;
}

.rating__count {
  color: var(--color-fg-muted);
}

/* Product card */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--spacing-grid);
}

.product-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: var(--transition-lift);
}

.product-card:hover {
  border-color: var(--color-fg);
  box-shadow: var(--shadow-lift);
  transform: translateY(var(--lift-y));
}

.product-card__body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  gap: 14px;
  padding: 10px 14px 14px 10px;
}

.product-card__media {
  position: relative;
  align-self: start;
}

.product-card__image {
  display: block;
  aspect-ratio: 1;
}

.product-card__tags {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.product-card__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding-top: 2px;
}

.product-card__name {
  font-size: var(--text-title-sm);
  line-height: var(--text-title-sm--line-height);
  font-weight: var(--text-title-sm--font-weight);
  text-wrap: pretty;
}

.product-card__name a {
  color: var(--color-fg);
}

.product-card__name a:hover {
  color: var(--color-brand);
}

.product-card__prices {
  display: grid;
  gap: 3px;
  margin-top: 4px;
}

.product-card__info .stock {
  margin-top: 4px;
}

.product-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px;
  border-top: 1px solid var(--color-line-soft);
}

.product-card__favourite {
  --button-fg: var(--color-brand);
}

.product-card__buy {
  padding-inline: 14px;
}

/* Field */
.field {
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
}

.field__label {
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
  letter-spacing: var(--text-label--letter-spacing);
  text-transform: uppercase;
}

.field__label[data-required]::after {
  content: " *";
  color: var(--color-brand);
}

.field__label[data-disabled] {
  color: var(--color-fg-hint);
}

.field__description {
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  line-height: var(--text-mono-xs--line-height);
}

.field__description[data-disabled] {
  color: var(--color-fg-hint);
}

.field__error {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--color-brand);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  line-height: var(--text-mono-xs--line-height);
}

.field__error::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-brand);
  transform: translateY(-1px);
}

/* Text controls */
.input,
.textarea,
.select__control,
.input-group {
  width: 100%;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-fg);
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  outline: none;
  transition:
    border-color 0.12s,
    box-shadow 0.12s;
}

.input,
.select__control {
  height: var(--spacing-control-md);
  padding: 0 12px;
}

.textarea {
  display: block;
  min-height: 96px;
  padding: 10px 12px;
  line-height: 1.5;
  resize: vertical;
  field-sizing: content;
}

.input::placeholder,
.textarea::placeholder,
.input-group__control::placeholder {
  color: var(--color-fg-muted);
  opacity: 1;
}

.input:hover,
.textarea:hover,
.select__control:hover,
.input-group:hover {
  border-color: var(--color-fg-subtle);
}

.input:focus,
.textarea:focus,
.select__control:focus,
.input-group:focus-within {
  border-color: var(--color-fg);
  box-shadow: 0 0 0 1px var(--color-fg);
}

.input[data-invalid],
.textarea[data-invalid],
.select__control[data-invalid],
.input-group[data-invalid] {
  border-color: var(--color-brand);
}

.input[data-invalid]:focus,
.textarea[data-invalid]:focus,
.select__control[data-invalid]:focus,
.input-group[data-invalid]:focus-within {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 1px var(--color-brand);
}

.input[data-readonly],
.textarea[data-readonly],
.input-group[data-readonly] {
  border-color: var(--color-line);
  background: var(--color-canvas);
}

.input[data-disabled],
.textarea[data-disabled],
.select__control[data-disabled],
.input-group[data-disabled] {
  border-color: var(--color-line);
  background: var(--color-stripe-b);
  color: var(--color-fg-hint);
  cursor: not-allowed;
}

.input[data-disabled]::placeholder,
.textarea[data-disabled]::placeholder,
.input-group[data-disabled] .input-group__control::placeholder {
  color: var(--color-fg-hint);
}

.input--sm,
.select__control--sm {
  height: var(--spacing-control-sm);
}

.input--lg {
  height: var(--spacing-control-xl);
}

/* Input with slots */
.input-group {
  display: flex;
  align-items: center;
  height: var(--spacing-control-md);
}

.input-group--sm {
  height: var(--spacing-control-sm);
}

.input-group__control {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 12px;
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
}

.input-group__control:disabled {
  cursor: not-allowed;
}

.input-group__slot {
  flex: none;
  display: flex;
  align-items: center;
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  pointer-events: none;
}

.input-group__slot--left {
  padding-left: 12px;
}

.input-group__slot--left + .input-group__control {
  padding-left: 10px;
}

.input-group__slot--right {
  padding-right: 12px;
}

.input-group > .button {
  flex: none;
  margin-right: 5px;
}

/* Select: hui renders a customizable native select, a browser without it shows a plain one. */
.select__control {
  display: block;
  cursor: pointer;
}

.select__control:has(option[data-placeholder]:checked) {
  color: var(--color-fg-muted);
}

.select__control option[data-placeholder] {
  display: none;
}

@supports (appearance: base-select) {
  .select__control,
  .select__control::picker(select) {
    appearance: base-select;
  }

  .select__control {
    padding: 0;
  }

  .select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    height: 100%;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: inherit;
  }

  .select__trigger [data-slot] {
    display: contents;
  }

  .select__control::picker-icon {
    display: none;
  }

  .select__control::picker(select) {
    margin-block: 4px;
    padding: 4px;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }

  .select__control option {
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-mono-lg);
  }

  .select__control option:hover,
  .select__control option:focus-visible {
    background: var(--color-stripe-a);
    outline: none;
  }

  .select__control option:checked {
    color: var(--color-brand);
    font-weight: 600;
  }

  .select__control option::checkmark {
    display: none;
  }
}

/* Quantity */
.quantity {
  display: inline-flex;
  align-items: stretch;
  height: var(--spacing-control-md);
  overflow: hidden;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  transition:
    border-color 0.12s,
    box-shadow 0.12s;
}

.quantity:hover {
  border-color: var(--color-fg-subtle);
}

.quantity:focus-within {
  border-color: var(--color-fg);
  box-shadow: 0 0 0 1px var(--color-fg);
}

.quantity[data-disabled] {
  border-color: var(--color-line);
  background: var(--color-stripe-b);
  color: var(--color-fg-hint);
}

.quantity__step [data-slot] {
  display: contents;
}

.quantity__step {
  display: grid;
  place-items: center;
  width: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.quantity__step[data-enabled]:hover {
  background: var(--color-stripe-a);
}

.quantity__step[data-disabled] {
  color: var(--color-fg-hint);
  cursor: not-allowed;
}

.quantity__step:focus-visible {
  outline-offset: -2px;
}

.quantity__input {
  width: 44px;
  padding: 0;
  border: 0;
  border-inline: 1px solid var(--color-line-soft);
  background: transparent;
  outline: none;
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  font-weight: 600;
  text-align: center;
}

.quantity__input:disabled {
  cursor: not-allowed;
}

/* Listbox and Combobox share the list of options. hui teleports the popup into hui-portals and
   positions it with CSS anchors, so it is fixed and takes only the z-index and the look here. */
.listbox,
.combobox {
  min-width: 0;
}

.listbox__trigger [data-slot] {
  display: contents;
}

.listbox__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}

.listbox__trigger[data-placeholder] {
  color: var(--color-fg-muted);
}

.listbox__trigger[data-disabled] {
  color: var(--color-fg-hint);
  cursor: not-allowed;
}

.listbox__trigger[data-open],
.input-group:has([data-open]),
.input-group[data-preview="open"] {
  border-color: var(--color-fg);
  box-shadow: 0 0 0 1px var(--color-fg);
}

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

.listbox__value-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.listbox__chevron {
  flex: none;
  color: var(--color-fg-muted);
}

.listbox__content {
  z-index: 50;
  padding: 4px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-fg);
}

.listbox__search {
  margin-bottom: 4px;
}

.listbox__list {
  max-height: 240px;
  overflow-y: auto;
}

.listbox__list[data-searching] {
  opacity: 0.5;
  pointer-events: none;
}

.listbox__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  line-height: 1.3;
  cursor: pointer;
}

.listbox__item[data-highlighted] {
  background: var(--color-stripe-a);
}

.listbox__item[data-selected] {
  color: var(--color-brand);
  font-weight: 600;
}

.listbox__item[data-disabled] {
  color: var(--color-fg-hint);
  cursor: not-allowed;
}

.listbox__item [data-slot] {
  display: contents;
}

.listbox__item-label {
  flex: 1;
  min-width: 0;
}

.listbox__item-note {
  flex: none;
  color: var(--color-fg-muted);
  font-size: var(--text-mono-xs);
  font-weight: 400;
}

.listbox__indicator {
  flex: none;
  display: inline-flex;
  width: 16px;
  height: 16px;
  margin-left: auto;
}

.listbox__item-note + .listbox__indicator {
  margin-left: 0;
}

.listbox__group-label {
  padding: 8px 10px 4px;
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--text-label--letter-spacing);
  text-transform: uppercase;
}

.listbox__separator {
  margin: 4px 0;
  border-top: 1px solid var(--color-line-soft);
}

.listbox__empty {
  padding: 14px 10px;
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  text-align: center;
}

.listbox__item mark {
  background: var(--color-highlight);
  color: var(--color-on-highlight);
}

.combobox .combobox__spinner {
  display: none;
  margin-right: 6px;
  color: var(--color-fg-muted);
}

.combobox:has(.combobox__input[data-searching]) .combobox__spinner {
  display: inline-block;
}

/* Range: native inputs stacked over one track */
.range-root {
  display: grid;
  gap: 8px;
}

.range {
  position: relative;
  height: 20px;
}

.range__track,
.range__fill {
  position: absolute;
  top: 8px;
  height: 4px;
  border-radius: 1px;
}

.range__track {
  right: 0;
  left: 0;
  background: var(--color-line-strong);
}

.range__fill {
  right: calc(100% - var(--hui-range-end));
  left: var(--hui-range-start);
  background: var(--color-brand);
}

.range__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 20px;
  margin: 0;
  background: transparent;
  outline: none;
  pointer-events: none;
  appearance: none;
}

.range__thumb::-webkit-slider-runnable-track {
  height: 20px;
  background: transparent;
}

.range__thumb::-moz-range-track {
  background: transparent;
}

.range__thumb::-webkit-slider-thumb {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 2px solid var(--color-brand);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: grab;
  pointer-events: auto;
  appearance: none;
}

.range__thumb::-moz-range-thumb {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-brand);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: grab;
  pointer-events: auto;
}

.range__thumb:hover::-webkit-slider-thumb {
  background: var(--color-stripe-a);
}

.range__thumb:hover::-moz-range-thumb {
  background: var(--color-stripe-a);
}

.range__thumb:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.range__thumb:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.range[data-invalid] .range__track {
  background: var(--color-brand-tint);
}

.range[data-disabled] .range__fill {
  background: var(--color-fg-subtle);
}

.range__thumb:disabled::-webkit-slider-thumb {
  border-color: var(--color-line-strong);
  background: var(--color-stripe-b);
  cursor: not-allowed;
}

.range__thumb:disabled::-moz-range-thumb {
  border-color: var(--color-line-strong);
  background: var(--color-stripe-b);
  cursor: not-allowed;
}

.range__values {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  line-height: var(--text-mono--line-height);
}

/* File upload */
.file-upload {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.file-upload__zone {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 22px 16px;
  border: 1px dashed var(--color-fg-hint);
  border-radius: var(--radius-md);
  background: var(--color-stripe-b);
  text-align: center;
  cursor: pointer;
  transition:
    background-color 0.12s,
    border-color 0.12s;
}

.file-upload__zone:hover {
  border-color: var(--color-fg);
}

.file-upload__zone:has(input:focus-visible) {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.file-upload__zone[data-dragging],
.file-upload__zone--dragging {
  border-style: solid;
  border-color: var(--color-brand);
  background: var(--color-stripe-a);
}

.file-upload__zone--invalid,
.file-upload:has([data-invalid]) .file-upload__zone {
  border-color: var(--color-brand);
}

.file-upload__zone--disabled,
.file-upload:has(input:disabled) .file-upload__zone {
  border-color: var(--color-line-strong);
  color: var(--color-fg-hint);
  cursor: not-allowed;
}

.file-upload__icon {
  margin-bottom: 4px;
  color: var(--color-fg-muted);
}

.file-upload__title {
  font-size: var(--text-ui);
  line-height: 1.3;
  font-weight: 600;
}

.file-upload__hint {
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  line-height: var(--text-mono-xs--line-height);
}

.file-upload__zone--disabled .file-upload__icon,
.file-upload__zone--disabled .file-upload__hint {
  color: var(--color-fg-hint);
}

.file-upload__list {
  display: grid;
  gap: 4px;
}

.file-upload__file {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
}

.file-upload__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Choices: a control, its label, and the description or the error under the label */
.choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 10px;
  align-items: start;
  min-width: 0;
}

.choice__below {
  grid-column: 2;
}

.choice__label {
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  line-height: 18px;
  cursor: pointer;
}

.choice__label[data-disabled] {
  color: var(--color-fg-hint);
  cursor: not-allowed;
}

.checkbox,
.radio {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--color-fg-hint);
  background: var(--color-surface);
  color: var(--color-on-brand);
  cursor: pointer;
  transition:
    background-color 0.12s,
    border-color 0.12s;
}

.checkbox {
  border-radius: var(--radius-sm);
}

.radio {
  border-radius: var(--radius-full);
}

.checkbox[data-enabled]:hover,
.radio[data-enabled]:hover {
  border-color: var(--color-fg);
}

.checkbox[data-checked],
.checkbox[data-indeterminate] {
  border-color: var(--color-brand);
  background: var(--color-brand);
}

.checkbox[data-enabled][data-checked]:hover,
.checkbox[data-enabled][data-indeterminate]:hover {
  border-color: var(--color-brand-hover);
  background: var(--color-brand-hover);
}

.radio[data-checked] {
  border-color: var(--color-brand);
}

.radio[data-enabled][data-checked]:hover {
  border-color: var(--color-brand-hover);
}

.radio__indicator {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-brand);
}

.checkbox[data-invalid],
.radio[data-invalid] {
  border-color: var(--color-brand);
}

.checkbox[data-disabled],
.radio[data-disabled] {
  border-color: var(--color-line-strong);
  background: var(--color-stripe-b);
  color: var(--color-fg-hint);
  cursor: not-allowed;
}

.radio[data-disabled] .radio__indicator {
  background: var(--color-line-strong);
}

.checkbox__indicator {
  display: grid;
  place-items: center;
}

.checkbox__indicator .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}

.switch {
  flex: none;
  display: inline-flex;
  align-items: center;
  width: 36px;
  height: 20px;
  padding: 2px;
  border: 1px solid var(--color-fg-hint);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
  transition:
    background-color 0.12s,
    border-color 0.12s;
}

.switch__thumb {
  width: 14px;
  height: 14px;
  border-radius: 1px;
  background: var(--color-fg-muted);
  transition:
    transform 0.12s,
    background-color 0.12s;
}

.switch[data-enabled]:hover {
  border-color: var(--color-fg);
}

.switch[data-checked] {
  border-color: var(--color-brand);
  background: var(--color-brand);
}

.switch[data-enabled][data-checked]:hover {
  border-color: var(--color-brand-hover);
  background: var(--color-brand-hover);
}

.switch[data-checked] .switch__thumb {
  background: var(--color-on-brand);
  transform: translateX(16px);
}

.switch[data-disabled] {
  border-color: var(--color-line-strong);
  background: var(--color-stripe-b);
  cursor: not-allowed;
}

.switch[data-disabled] .switch__thumb {
  background: var(--color-line-strong);
}

/* Group of choices */
.fieldset {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.fieldset__legend {
  padding: 0;
  margin-bottom: 10px;
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
  letter-spacing: var(--text-label--letter-spacing);
  text-transform: uppercase;
}

/* Choice card: delivery, payment */
.choice-card {
  position: relative;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color 0.12s;
}

.choice-card:hover {
  border-color: var(--color-fg);
}

.choice-card:has([data-checked]) {
  border-color: var(--color-brand);
}

.choice-card:has([data-disabled]) {
  border-color: var(--color-line);
  background: var(--color-stripe-b);
}

/* The radio and the price sit in the middle of the card, so they line up with its content however
   many lines the note takes and with a picture on the left too. */
.choice-card .radio {
  position: absolute;
  top: 50%;
  left: 14px;
  translate: 0 -50%;
}

.choice-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 14px 14px 42px;
  cursor: pointer;
}

.choice-card:has([data-disabled]) .choice-card__body {
  cursor: not-allowed;
}

.choice-card__title {
  display: block;
  font-size: var(--text-title-sm);
  line-height: var(--text-title-sm--line-height);
  font-weight: var(--text-title-sm--font-weight);
}

.choice-card__note {
  display: block;
  margin-top: 2px;
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  line-height: var(--text-mono-xs--line-height);
}

.choice-card__price {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  font-weight: 600;
}

.choice-card:has([data-disabled]) .choice-card__title,
.choice-card:has([data-disabled]) .choice-card__price {
  color: var(--color-fg-hint);
}

/* Keyboard hint */
/*
 * Kbd: one key per element. The thick lower edge gives the keycap its height without a shadow,
 * a pressed key loses the edge and moves down by the same amount, so the layout stays still.
 */
.kbd {
  --kbd-bg: var(--color-surface);
  --kbd-fg: var(--color-fg);
  --kbd-line: var(--color-line-strong);
  --kbd-edge: color-mix(in srgb, var(--color-ink) 32%, var(--color-surface));
  --kbd-size: 24px;
  --kbd-edge-size: 3px;
  --kbd-font-size: var(--text-mono-xs);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: var(--kbd-size);
  height: var(--kbd-size);
  padding: 0 6px;
  border: 1px solid var(--kbd-line);
  border-bottom: var(--kbd-edge-size) solid var(--kbd-edge);
  border-radius: var(--radius-md);
  background: var(--kbd-bg);
  color: var(--kbd-fg);
  font-family: var(--font-mono);
  font-size: var(--kbd-font-size);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.kbd--sm {
  --kbd-size: 20px;
  --kbd-edge-size: 2px;
  --kbd-font-size: var(--text-code);

  padding-inline: 4px;
}

.kbd--lg {
  --kbd-size: 32px;
  --kbd-edge-size: 4px;
  --kbd-font-size: var(--text-mono-lg);

  padding-inline: 9px;
}

/* The mono font has no command sign, the system one is too small next to the letters. */
.kbd[data-kbd-mod=""] {
  font-size: calc(var(--kbd-font-size) * 1.3);
}

.kbd[data-pressed] {
  height: calc(var(--kbd-size) - var(--kbd-edge-size) + 1px);
  margin-top: calc(var(--kbd-edge-size) - 1px);
  border-bottom-width: 1px;
  border-bottom-color: var(--kbd-line);
  background: var(--color-stripe-a);
}

.on-ink .kbd {
  --kbd-bg: var(--color-fill-on-ink-hover);
  --kbd-fg: var(--color-on-ink);
  --kbd-line: var(--color-line-strong-on-ink);
  --kbd-edge: rgba(255, 255, 255, 0.42);
}

.on-ink .kbd[data-pressed] {
  background: var(--color-fill-on-ink);
}

/* Keys pressed together, the outer kbd is the whole shortcut. */
.kbd-combo {
  display: inline-flex;
  align-items: flex-start;
  gap: 3px;
}

/* The search is a light field even in the dark header, its keys stay light. */
.on-ink .search .kbd {
  --kbd-bg: var(--color-surface);
  --kbd-fg: var(--color-fg);
  --kbd-line: var(--color-line-strong);
  --kbd-edge: color-mix(in srgb, var(--color-ink) 32%, var(--color-surface));
}

/* Search in the header */
.search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--spacing-control-xl);
  padding: 0 4px 0 16px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-line-on-ink);
  color: var(--color-fg);
}

.search:focus-within {
  box-shadow: 0 0 0 2px var(--color-brand-tint);
}

.search__scope {
  padding-right: 12px;
  border-right: 1px solid var(--color-line);
  color: var(--color-fg-hint);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  letter-spacing: 0.08em;
}

.search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--font-sans);
  font-size: var(--text-title);
}

.search__input::placeholder {
  color: var(--color-fg-muted);
  opacity: 1;
}

.search__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 4px;
}

.search .button {
  padding-inline: 20px;
}

@media (hover: none), (max-width: 640px) {
  .search .kbd-combo {
    display: none;
  }
}

/*
 * Spinner from Parido: the ring turns with a push (fast in the middle of a turn, slow at its
 * ends) while the arc grows and shrinks. The turn takes longer than the arc, so the arc
 * collapses at a different place every time. With reduced motion it only turns slowly.
 */
.spinner {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  animation: spinner-turn 1.6s cubic-bezier(0.55, 0.1, 0.45, 0.9) infinite;
}

.spinner__arc {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 25 100;
  animation: spinner-arc 1.33s ease-in-out infinite;
}

.spinner--xs {
  width: 12px;
  height: 12px;
}

.spinner--sm {
  width: 14px;
  height: 14px;
}

.spinner--lg {
  width: 20px;
  height: 20px;
}

.spinner--xl {
  width: 24px;
  height: 24px;
}

@keyframes spinner-turn {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spinner-arc {
  0% {
    stroke-dasharray: 1 100;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 65 100;
    stroke-dashoffset: -15;
  }

  100% {
    stroke-dasharray: 1 100;
    stroke-dashoffset: -99;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: spinner-turn 2s linear infinite;
  }

  .spinner__arc {
    animation: none;
  }
}

/* Code and identifier */
.code {
  color: var(--color-fg);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  line-height: var(--text-mono--line-height);
}

.code--muted {
  color: var(--color-fg-muted);
}

.identifier {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.identifier__label {
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
}

/* Separator */
.separator {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-line);
}

.separator--soft {
  border-top-color: var(--color-line-soft);
}

.separator--vertical {
  align-self: stretch;
  width: 0;
  border-top: 0;
  border-left: 1px solid var(--color-line);
}

.on-ink .separator {
  border-color: var(--color-line-on-ink);
}

/* Card */
.card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--color-line-soft);
}

.card__title {
  font-size: var(--text-title);
  line-height: var(--text-title--line-height);
  font-weight: var(--text-title--font-weight);
}

.card__description {
  margin-top: 2px;
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  line-height: var(--text-mono-xs--line-height);
}

.card__actions {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.card__body {
  padding: 22px;
}

.card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 22px;
  border-top: 1px solid var(--color-line-soft);
}

/* Tile: the promo blocks next to the banner */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-height: 190px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-fg);
  transition:
    background-color 0.12s,
    border-color 0.12s;
}

.tile:hover {
  background: var(--color-stripe-a);
  color: var(--color-fg);
}

.tile__label {
  color: var(--color-brand);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--text-label--letter-spacing);
  text-transform: uppercase;
}

.tile__title {
  display: block;
  margin-bottom: 6px;
  font-size: var(--text-heading-md);
  line-height: var(--text-heading-md--line-height);
  font-weight: var(--text-heading-md--font-weight);
}

.tile__note {
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  line-height: var(--text-mono--line-height);
}

.tile--brand {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.tile--brand:hover {
  border-color: var(--color-brand-raised);
  background: var(--color-brand-raised);
  color: var(--color-on-brand);
}

.tile--brand::after {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 150px;
  height: 150px;
  border: 1px solid var(--color-line-strong-on-ink);
  border-radius: var(--radius-full);
}

.tile--brand .tile__label,
.tile--brand .tile__note {
  color: var(--color-on-brand);
  opacity: 0.85;
}

.tile--ink {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-on-ink);
}

.tile--ink:hover {
  border-color: color-mix(in srgb, var(--color-ink), var(--color-on-ink) 8%);
  background: color-mix(in srgb, var(--color-ink), var(--color-on-ink) 8%);
  color: var(--color-on-ink);
}

.tile--ink .tile__label,
.tile--ink .tile__note {
  color: var(--color-on-ink-muted);
}

/* Alert: an icon and a tinted area, both in the colour of the state */
.alert {
  --alert-color: var(--color-transit);

  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--alert-color) 40%, var(--color-surface));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--alert-color) 8%, var(--color-surface));
}

.alert--success {
  --alert-color: var(--color-success);
}

.alert--warning {
  --alert-color: var(--color-warning);
}

.alert--info {
  --alert-color: var(--color-transit);
}

.alert--error {
  --alert-color: var(--color-brand);
}

.alert__icon {
  width: 20px;
  height: 20px;
  color: var(--alert-color);
}

.alert__body {
  flex: 1;
  min-width: 0;
}

.alert__title {
  font-size: var(--text-title-sm);
  line-height: var(--text-title-sm--line-height);
  font-weight: var(--text-title-sm--font-weight);
}

.alert__text {
  margin-top: 2px;
  color: var(--color-fg);
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  line-height: var(--text-mono-sm--line-height);
}

/* Skeleton */
.skeleton {
  display: block;
  height: 14px;
  border-radius: var(--radius-sm);
  background: var(--color-stripe-a);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

@keyframes skeleton-pulse {
  50% {
    opacity: 0.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
  }
}

/* Empty state */
.empty-state {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 40px 24px;
  text-align: center;
}

.empty-state__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  border-radius: var(--radius-sm);
  background: var(--color-stripe-a);
  color: var(--color-fg-muted);
}

.empty-state__title {
  font-size: var(--text-title);
  line-height: var(--text-title--line-height);
  font-weight: var(--text-title--font-weight);
}

.empty-state__description {
  max-width: 420px;
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  line-height: var(--text-mono-sm--line-height);
}

.empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

/* Breadcrumb */
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  line-height: var(--text-mono--line-height);
}

/* Flex items, so a link that starts with an icon does not sit on the icon's baseline. */
.breadcrumb__list > li {
  display: flex;
}

.breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-fg-muted);
}

.breadcrumb__link .icon {
  width: 14px;
  height: 14px;
}

.breadcrumb__link:hover {
  color: var(--color-brand);
}

.breadcrumb__link[data-current] {
  color: var(--color-fg);
}

.breadcrumb__separator {
  display: flex;
  color: var(--color-fg-hint);
}

.breadcrumb__separator .icon {
  width: 12px;
  height: 12px;
}

/* Tabs */
.tabs {
  min-width: 0;
}

.tabs__list {
  display: inline-flex;
  gap: 6px;
  max-width: 100%;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  scrollbar-width: none;
}

.tabs__trigger {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-fg-muted);
  font-family: var(--font-sans);
  font-size: var(--text-ui-sm);
  font-weight: 600;
  line-height: var(--text-ui-sm--line-height);
  cursor: pointer;
  transition:
    background-color 0.12s,
    color 0.12s;
}

.tabs__trigger[data-enabled]:hover {
  color: var(--color-fg);
}

.tabs__trigger[data-selected],
.tabs__trigger[data-selected][data-enabled]:hover {
  background: var(--color-ink);
  color: var(--color-on-ink);
}

.tabs__trigger[data-disabled] {
  color: var(--color-fg-hint);
  cursor: not-allowed;
}

.tabs__trigger:focus-visible {
  outline-offset: 1px;
}

.tabs__count {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 400;
  opacity: 0.65;
}

.tabs__content {
  padding-top: 16px;
}

.tabs__content:focus-visible {
  outline-offset: 4px;
}

/* The line is an inset shadow: the 2 px line of the active tab then sits exactly on top of it,
   which a border could not do, because the list scrolls and clips anything outside its box. */
.tabs--underline .tabs__list {
  display: flex;
  gap: 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: inset 0 -1px 0 var(--color-line);
}

.tabs--underline .tabs__trigger {
  padding: 0 12px;
  height: var(--spacing-control-lg);
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--color-fg);
  font-size: var(--text-ui);
  font-weight: var(--text-ui--font-weight);
}

.tabs--underline .tabs__trigger[data-enabled]:hover {
  background: transparent;
  color: var(--color-brand);
}

.tabs--underline .tabs__trigger[data-selected],
.tabs--underline .tabs__trigger[data-selected][data-enabled]:hover {
  border-bottom-color: var(--color-brand);
  background: transparent;
  color: var(--color-brand);
}

.tabs--underline .tabs__trigger[data-disabled] {
  color: var(--color-fg-hint);
}

.tabs--underline .tabs__trigger:focus-visible {
  outline-offset: -2px;
}

.tabs--underline[data-orientation="vertical"] {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 22px;
}

.tabs--underline[data-orientation="vertical"] .tabs__list {
  flex-direction: column;
  align-self: start;
  gap: 0;
  box-shadow: inset 1px 0 0 var(--color-line);
}

.tabs--underline[data-orientation="vertical"] .tabs__trigger {
  border-bottom: 0;
  border-left: 2px solid transparent;
}

.tabs--underline[data-orientation="vertical"] .tabs__trigger[data-selected] {
  border-left-color: var(--color-brand);
}

.tabs--underline[data-orientation="vertical"] .tabs__content {
  padding-top: 14px;
}

/* Collapsible */
.collapsible {
  border-bottom: 1px solid var(--color-line-soft);
}

.collapsible__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
}

.collapsible__header[data-clickable] {
  cursor: pointer;
}

.collapsible__title {
  font-size: var(--text-title-sm);
  line-height: var(--text-title-sm--line-height);
  font-weight: var(--text-title-sm--font-weight);
}

.collapsible__trigger .icon {
  transition: transform 0.12s;
}

.collapsible__trigger[data-open] .icon {
  transform: rotate(180deg);
}

.collapsible__trigger--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: var(--text-title-sm);
  line-height: var(--text-title-sm--line-height);
  font-weight: var(--text-title-sm--font-weight);
  text-align: left;
  cursor: pointer;
}

.collapsible__trigger--row:hover {
  color: var(--color-brand);
}

.collapsible__title--disabled {
  color: var(--color-fg-hint);
}

/* The element hui animates has no spacing, otherwise the height animation jumps. */
.collapsible__inner {
  padding-bottom: 14px;
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  line-height: 1.6;
}

/* Smooth state changes of the controls without an own transition. */
.input,
.textarea,
.select__control,
.checkbox,
.quantity__step,
.breadcrumb__link,
.collapsible__trigger--row,
.table__sort,
.dropdown__item,
.listbox__item,
.kbd {
  transition: var(--transition-state);
}

.range__thumb::-webkit-slider-thumb {
  transition: var(--transition-state);
}

.range__thumb::-moz-range-thumb {
  transition: var(--transition-state);
}

.tabs__content {
  animation: state-fade-in 0.15s ease-out;
}

@keyframes state-fade-in {
  from {
    opacity: 0;
  }
}

/*
 * Carousel: the track scrolls natively and snaps to slides. The filling bar of the active dot
 * is the timer: when its animation ends, shop.js moves on, and pausing the animation pauses it.
 */
.carousel {
  --carousel-delay: 7s;
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-ink);
  color: var(--color-on-ink);
}

.carousel__track {
  position: relative;
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.carousel__controls {
  position: absolute;
  bottom: 24px;
  left: 44px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.carousel__counter {
  margin-right: 6px;
  color: var(--color-on-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
}

.carousel__dots {
  display: flex;
  gap: 4px;
  margin-right: 8px;
}

.carousel__dot {
  display: block;
  width: 34px;
  height: 18px;
  padding: 7px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.carousel__dot-fill {
  position: relative;
  display: block;
  height: 4px;
  overflow: hidden;
  background: var(--color-line-strong-on-ink);
  transition: background-color 0.12s ease;
}

.carousel__dot:hover .carousel__dot-fill {
  background: var(--color-on-ink-muted);
}

.carousel__dot-fill::after {
  position: absolute;
  background: var(--color-brand-tint);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  inset: 0;
}

.carousel__dot[aria-current="true"] .carousel__dot-fill::after {
  transform: scaleX(1);
}

.carousel[data-autoplay] .carousel__dot[aria-current="true"] .carousel__dot-fill::after {
  animation: carousel-progress var(--carousel-delay) linear forwards;
}

.carousel[data-paused] .carousel__dot-fill::after,
.carousel:hover .carousel__dot-fill::after,
.carousel:focus-within .carousel__dot-fill::after {
  animation-play-state: paused !important;
}

@keyframes carousel-progress {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.carousel__toggle {
  display: inline-grid;
  place-items: center;
}

.carousel__pause-icon,
.carousel__play-icon {
  grid-area: 1 / 1;
  transition: opacity 0.12s ease;
}

.carousel__play-icon,
.carousel[data-paused] .carousel__pause-icon {
  opacity: 0;
}

.carousel[data-paused] .carousel__play-icon {
  opacity: 1;
}

/* Prose: long text from the CMS, its elements carry no classes. */
.prose {
  max-width: 680px;
  color: var(--color-fg);
  font-size: var(--text-body-lg);
  line-height: 1.65;
}

.prose > :first-child {
  margin-top: 0;
}

.prose > :last-child {
  margin-bottom: 0;
}

.prose h2 {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 32px 0 12px;
  padding-top: 24px;
  border-top: 1px solid var(--color-line-soft);
  font-size: var(--text-heading-md);
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}

.prose > h2:first-child {
  padding-top: 0;
  border-top: 0;
}

.prose h3 {
  margin: 24px 0 8px;
  font-size: var(--text-body-lg);
  font-weight: 600;
  line-height: 1.35;
}

.prose h4 {
  margin: 20px 0 6px;
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 400;
  line-height: var(--text-label--line-height);
  letter-spacing: var(--text-label--letter-spacing);
  text-transform: uppercase;
}

.prose p,
.prose ul,
.prose ol,
.prose blockquote,
.prose .table-scroll,
.prose .alert {
  margin: 0 0 14px;
}

.prose ul,
.prose ol {
  padding-left: 22px;
}

.prose ul {
  list-style: square;
}

.prose ol {
  list-style: decimal;
}

.prose li + li {
  margin-top: 6px;
}

.prose li > ul,
.prose li > ol {
  margin: 6px 0 0;
}

.prose ul > li::marker {
  color: var(--color-brand);
}

.prose ol > li::marker {
  color: var(--color-fg-muted);
}

/* Browsers compare the type attribute without case, so the position picks the letter size. */
.prose ol[type] {
  padding-left: 28px;
  list-style: prose-upper-letter;
}

.prose li ol[type] {
  list-style: prose-lower-letter;
}

.prose a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.prose strong {
  font-weight: 600;
}

.prose code {
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  background: var(--color-stripe-a);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
}

.prose blockquote {
  padding-left: 14px;
  border-left: 2px solid var(--color-brand);
  color: var(--color-fg-muted);
}

.prose hr {
  margin: 24px 0;
  border: 0;
  border-top: 1px solid var(--color-line);
}

.prose .alert {
  margin-top: 14px;
}

.prose .alert p {
  margin: 0;
}

.prose kbd:not(.kbd-combo .kbd) {
  margin-inline: 0.25em;
  vertical-align: text-bottom;
}

/* Chapters number themselves, so the text from the CMS holds only plain headings. */
.prose--roman,
.prose--clauses {
  counter-reset: prose-chapter;
}

.prose--roman h2,
.prose--clauses h2 {
  counter-increment: prose-chapter;
}

.prose--clauses h2 {
  counter-reset: prose-clause;
}

.prose--roman h2::before,
.prose--clauses h2::before {
  flex: none;
  color: var(--color-brand);
}

.prose--roman h2::before {
  content: counter(prose-chapter, upper-roman) ".";
}

.prose--clauses h2::before {
  content: counter(prose-chapter) ".";
}

.prose--clauses > ol {
  padding-left: 0;
  list-style: none;
}

.prose--clauses > ol > li {
  position: relative;
  padding-left: 44px;
  counter-increment: prose-clause;
}

.prose--clauses > ol > li::before {
  position: absolute;
  left: 0;
  color: var(--color-fg-muted);
  content: counter(prose-chapter) "." counter(prose-clause);
}

@counter-style prose-upper-letter {
  system: extends upper-alpha;
  suffix: ") ";
}

@counter-style prose-lower-letter {
  system: extends lower-alpha;
  suffix: ") ";
}

/* Pagination */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.pagination__page {
  min-width: var(--spacing-control-sm);
  padding-inline: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 400;
}

.pagination__gap {
  width: var(--spacing-control-sm);
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  text-align: center;
}

/* Table */
.table-scroll {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  container: table / inline-size;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th {
  padding: 6px 12px;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 400;
  line-height: var(--text-label--line-height);
  letter-spacing: var(--text-label--letter-spacing);
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.table td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--color-line-soft);
  font-size: var(--text-ui-sm);
  line-height: 20px;
  vertical-align: middle;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

/* Rows stay white: a selected row has the checkbox and a brand line on its left edge. */
.table tbody tr[data-selected] td:first-child {
  box-shadow: inset 2px 0 0 var(--color-brand);
}

.table tbody[data-pending] {
  opacity: 0.5;
}

.table__loader td {
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  text-align: center;
}

.table__loader .spinner {
  margin-right: 8px;
  vertical-align: -3px;
}

.table [data-align="end"] {
  text-align: right;
}

.table__mono {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
}

.table__select {
  width: 42px;
}

.table__select .checkbox {
  display: grid;
}

/* vertical-align: a button that starts with an icon would otherwise sit on the icon's baseline. */
.table__sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: top;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.table__sort:hover {
  color: var(--color-fg);
}

/* All headers share one colour; only the arrow says which column is sorted. */
.table th[aria-sort="ascending"] .icon,
.table th[aria-sort="descending"] .icon {
  color: var(--color-brand);
}

.table__sort [data-slot] {
  display: contents;
}

.table__sort .icon {
  width: 12px;
  height: 12px;
}

.table tfoot td {
  border-top: 1px solid var(--color-line);
  border-bottom: 0;
  font-weight: 600;
}

@container table (max-width: 560px) {
  .table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .table--stack,
  .table--stack tbody,
  .table--stack tfoot {
    display: block;
  }

  .table--stack tr {
    display: block;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-line-soft);
  }

  .table--stack tbody tr:last-child {
    border-bottom: 0;
  }

  .table--stack tbody tr[data-selected] td:first-child {
    box-shadow: none;
  }

  .table--stack tbody tr[data-selected] {
    box-shadow: inset 2px 0 0 var(--color-brand);
  }

  .table--stack tfoot tr {
    border-top: 1px solid var(--color-line);
    border-bottom: 0;
  }

  .table--stack td,
  .table--stack tfoot td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    text-align: right;
  }

  .table--stack td:empty {
    display: none;
  }

  .table--stack td[data-label]::before {
    content: attr(data-label);
    color: var(--color-fg-muted);
    font-family: var(--font-mono);
    font-size: var(--text-label);
    font-weight: 400;
    letter-spacing: var(--text-label--letter-spacing);
    text-transform: uppercase;
  }

  .table--stack .table__select {
    width: auto;
  }
}

/* Meter */
.meter {
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 1px;
  background: var(--color-line);
}

.meter__fill {
  display: block;
  width: var(--hui-meter);
  height: 100%;
  background: var(--color-brand);
  transition: width 0.2s;
}

.meter[data-state="optimum"] .meter__fill {
  background: var(--color-success);
}

.meter[data-state="suboptimal"] .meter__fill {
  background: var(--color-warning);
}

.meter[data-state="critical"] .meter__fill {
  background: var(--color-brand);
}

/* Modal and Drawer. The design has no shadows: the scrim and the line separate them. */

/* The scrollbar gutter lies outside the viewport, so the scrim cannot reach it. The root
   background paints it in the colour the scrim gives the page. */
html {
  transition: background-color 0.15s;
}

html:has(.modal__overlay[data-open]) {
  background: color-mix(in srgb, var(--color-canvas), var(--color-ink) 50%);
}

.modal__overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--color-scrim);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  width: calc(100% - 32px);
  max-width: 480px;
  height: fit-content;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 22px;
  overflow-y: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-fg);
}

.modal--sm {
  max-width: 400px;
}

.modal:focus,
.drawer:focus {
  outline: none;
}

.modal__title {
  font-size: var(--text-heading-md);
  line-height: var(--text-heading-md--line-height);
  font-weight: var(--text-heading-md--font-weight);
}

.modal__description {
  margin-top: 6px;
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  line-height: 1.6;
}

.modal__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.drawer {
  position: fixed;
  top: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: min(480px, calc(100% - 16px));
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-fg);
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-line-soft);
}

.drawer__body {
  flex: 1;
  padding: 18px;
  overflow-y: auto;
}

.drawer__footer {
  padding: 12px 18px;
  border-top: 1px solid var(--color-line-soft);
}

/* Dropdown: items take real focus even on hover, so :focus is the highlight. */
.dropdown {
  display: inline-block;
}

.dropdown__content {
  z-index: 50;
  min-width: 220px;
  padding: 4px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-fg);
}

.dropdown__content:focus {
  outline: none;
}

.dropdown__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-fg);
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

.dropdown__item:hover {
  color: var(--color-fg);
}

.dropdown__item:focus {
  background: var(--color-stripe-a);
  outline: none;
}

.dropdown__item [data-slot] {
  display: contents;
}

.dropdown__item [data-slot="right"] {
  display: flex;
  margin-left: auto;
}

.dropdown__item[role="menuitemcheckbox"] [data-slot="left"],
.dropdown__item[role="menuitemradio"] [data-slot="left"] {
  display: grid;
  flex: none;
  place-items: center;
  width: 16px;
  height: 16px;
}

.dropdown__item[data-disabled] {
  color: var(--color-fg-hint);
  cursor: not-allowed;
}

.dropdown__item--danger,
.dropdown__item--danger:hover {
  color: var(--color-brand);
}

.dropdown__check {
  display: grid;
  width: 16px;
  place-items: center;
  color: var(--color-brand);
}

.dropdown__dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-brand);
}

/* Tooltip */
.tooltip {
  display: inline-flex;
}

.tooltip__content {
  z-index: 60;
  width: max-content;
  max-width: 280px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  line-height: 1.4;
}

.tooltip__close {
  float: right;
  margin: 2px 0 0 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-on-ink-muted);
  cursor: pointer;
}

/* Toast: dark, so it stands out on the page without a shadow */
.toaster {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(380px, calc(100% - 32px));
}

.toast {
  --toast-color: var(--color-on-ink-subtle);

  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--color-ink);
  color: var(--color-on-ink);
}

.toast__icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--toast-color);
}

.toast--success {
  --toast-color: var(--color-success);
}

.toast--info {
  --toast-color: var(--color-on-ink);
}

.toast--error {
  --toast-color: var(--color-brand-tint);
}

.toast__body {
  flex: 1;
  min-width: 0;
}

.toast__title {
  font-size: var(--text-title-sm);
  line-height: var(--text-title-sm--line-height);
  font-weight: var(--text-title-sm--font-weight);
}

.toast__description {
  margin-top: 2px;
  color: var(--color-on-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  line-height: var(--text-mono-xs--line-height);
}

/* iOS zooms the page when it focuses a control under 16 px. */
@media (max-width: 640px) {
  .input,
  .textarea,
  .select__control,
  .input-group,
  .quantity__input,
  .search__input {
    font-size: 16px;
  }

  .search__scope {
    display: none;
  }
}