/*
  Components: the reusable controls and containers of the EzGathr design system.
  Every class is c-*; parts use c-name__part and variants c-name--variant. State comes
  from HTML and ARIA (:checked, :disabled, [aria-current], [aria-invalid], [aria-busy],
  [open]), never from state classes.

  Catalog, anatomy, and markup contracts: docs/design/components.md.
  Live reference with every state: /design (Development and Testing only).
*/
@layer components {
  /* @component c-layout ----------------------------------------------------- */

  .c-container {
    width: 100%;
    max-width: calc(var(--container-page) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .c-container--content {
    max-width: calc(var(--container-content) + var(--gutter) * 2);
  }

  .c-container--form {
    max-width: calc(var(--container-form) + var(--gutter) * 2);
  }

  .c-container--narrow {
    max-width: calc(var(--container-narrow) + var(--gutter) * 2);
  }

  .c-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  /* Block margins only: the gap spaces a stack's children. Zeroing inline margins too
     would undo .c-container's centering (same specificity, later in the file). */
  .c-stack > * {
    margin-block: var(--space-0);
  }

  .c-stack--1 { gap: var(--space-1); }
  .c-stack--2 { gap: var(--space-2); }
  .c-stack--3 { gap: var(--space-3); }
  .c-stack--4 { gap: var(--space-4); }
  .c-stack--5 { gap: var(--space-5); }
  .c-stack--6 { gap: var(--space-6); }
  .c-stack--8 { gap: var(--space-8); }
  .c-stack--10 { gap: var(--space-10); }
  .c-stack--12 { gap: var(--space-12); }
  .c-stack--16 { gap: var(--space-16); }

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

  .c-cluster > * {
    margin: var(--space-0);
  }

  .c-cluster--1 { gap: var(--space-1); }
  .c-cluster--3 { gap: var(--space-3); }
  .c-cluster--4 { gap: var(--space-4); }
  .c-cluster--6 { gap: var(--space-6); }
  .c-cluster--between { justify-content: space-between; }
  .c-cluster--end { justify-content: flex-end; }
  .c-cluster--center { justify-content: center; }
  .c-cluster--start { align-items: flex-start; }
  .c-cluster--baseline { align-items: baseline; }
  .c-cluster--nowrap { flex-wrap: nowrap; }

  .c-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
    gap: var(--space-6);
  }

  .c-grid--sm { grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); }
  .c-grid--lg { grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr)); }
  .c-grid--gap-4 { gap: var(--space-4); }

  .c-divider {
    margin: var(--space-0);
    border: 0;
    border-block-start: var(--border-width) solid var(--color-border);
  }

  /* @component c-text ------------------------------------------------------- */

  .c-display {
    margin: var(--space-0);
    font-size: var(--text-display);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }

  .c-title {
    margin: var(--space-0);
    font-size: var(--text-title);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }

  .c-heading {
    margin: var(--space-0);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
  }

  .c-subheading {
    margin: var(--space-0);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-normal);
  }

  .c-lead {
    margin: var(--space-0);
    max-width: var(--container-prose);
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    color: var(--color-text-secondary);
  }

  .c-body-sm {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
  }

  .c-caption {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
    color: var(--color-text-secondary);
  }

  /* The only uppercase style in the product: section kickers, never field labels. */
  .c-overline {
    margin: var(--space-0);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-secondary);
  }

  .c-link {
    color: var(--color-text-link);
    font-weight: var(--weight-medium);
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: var(--underline-offset);
  }

  .c-link:hover {
    color: var(--color-text-link-hover);
  }

  /* @component c-icon ------------------------------------------------------- */

  .c-icon {
    display: inline-block;
    flex-shrink: 0;
    width: var(--icon-md);
    height: var(--icon-md);
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    stroke-width: var(--icon-stroke-width);
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .c-icon--sm {
    width: var(--icon-sm);
    height: var(--icon-sm);
  }

  .c-icon--lg {
    width: var(--icon-lg);
    height: var(--icon-lg);
  }

  /* @component c-button ----------------------------------------------------- */

  .c-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-md);
    padding-inline: var(--space-5);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-none);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition:
      background-color var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard),
      color var(--duration-fast) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard),
      box-shadow var(--duration-normal) var(--ease-standard);
  }

  .c-button:hover {
    text-decoration: none;
  }

  /* Small, local responses: no delayed navigation or hidden page content. */
  .c-button[data-share-copied] {
    border-color: var(--color-success);
    background: var(--color-success-subtle);
    color: var(--color-success);
  }

  @media (prefers-reduced-motion: no-preference) {
    .c-button:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):active {
      transform: scale(var(--motion-press-scale));
    }

    .c-menu[open] > .c-menu__panel,
    .c-disclosure[open] > .c-disclosure__content,
    .c-callout[role="status"],
    .c-button[data-share-copied] {
      animation: c-enter var(--duration-slow) var(--ease-standard);
    }

    .c-chip__input:checked + .c-chip__face .c-chip__check,
    .c-tile__input:checked + .c-tile__face .c-tile__check {
      animation: c-check-in var(--duration-slow) var(--ease-emphasized);
    }

    .c-sheet[open]::backdrop {
      animation: c-backdrop-in var(--duration-slow) var(--ease-standard);
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .c-button--primary:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover {
      box-shadow: var(--shadow-md);
    }
  }

  @keyframes c-enter {
    from {
      opacity: 0;
      transform: translateY(var(--motion-enter-distance));
    }
  }

  @keyframes c-check-in {
    from {
      opacity: 0;
      transform: scale(var(--motion-check-scale));
    }
  }

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

  .c-button--primary {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
  }

  .c-button--primary:hover {
    background: var(--color-accent-hover);
    color: var(--color-text-on-accent);
  }

  .c-button--primary:active {
    background: var(--color-accent-pressed);
  }

  .c-button--secondary {
    border-color: var(--color-border-control);
    background: var(--color-surface);
    color: var(--color-text);
  }

  .c-button--secondary:hover {
    border-color: var(--color-border-control-hover);
    background: var(--color-surface-subtle);
    color: var(--color-text);
  }

  .c-button--secondary:active {
    background: var(--color-surface-hover);
  }

  .c-button--tertiary {
    color: var(--color-text);
  }

  .c-button--tertiary:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
  }

  .c-button--tertiary:active {
    background: var(--color-surface-pressed);
  }

  .c-button--inverse {
    background: var(--color-surface-inverse);
    color: var(--color-text-on-inverse);
  }

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

  .c-button--danger {
    background: var(--color-danger);
    color: var(--color-text-on-accent);
  }

  .c-button--danger:hover {
    color: var(--color-text-on-accent);
  }

  /* Looks like a link, behaves like a button (e.g. "Clear all"). */
  .c-button--link {
    min-height: var(--target-min);
    padding-inline: var(--space-0);
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: var(--underline-offset);
  }

  .c-button--link:hover {
    color: var(--color-text-link-hover);
    text-decoration: underline;
  }

  .c-button--sm {
    min-height: var(--control-sm);
    padding-inline: var(--space-3);
    gap: var(--space-1-5);
    font-size: var(--text-sm);
  }

  /* A link button has no padding at any size: --sm comes later and would otherwise indent its
     words from the text above. */
  .c-button--link.c-button--sm {
    padding-inline: var(--space-0);
  }

  /* A small tertiary action on a line of its own bleeds its padding, so its words line up with
     the text above while its hover fill keeps its shape (as in p-section-head). */
  p > .c-button--tertiary.c-button--sm:only-child {
    margin-inline-start: calc(var(--space-3) * -1);
  }

  .c-button--lg {
    min-height: var(--control-lg);
    padding-inline: var(--space-6);
    font-size: var(--text-md);
  }

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

  .c-button--icon {
    width: var(--control-md);
    padding-inline: var(--space-0);
  }

  .c-button--icon.c-button--sm {
    width: var(--control-sm);
  }

  .c-button--round {
    border-radius: var(--radius-full);
  }

  .c-button:disabled,
  .c-button[aria-disabled="true"] {
    border-color: transparent;
    background: var(--color-surface-muted);
    color: var(--color-text-disabled);
    cursor: not-allowed;
  }

  .c-button[aria-busy="true"] {
    color: transparent;
    cursor: progress;
  }

  .c-button[aria-busy="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--icon-sm);
    height: var(--icon-sm);
    margin: auto;
    border: var(--border-width-strong) solid var(--color-text-on-accent);
    border-inline-end-color: transparent;
    border-radius: var(--radius-round);
    animation: c-spin var(--duration-spin) var(--ease-linear) infinite;
  }

  .c-button--secondary[aria-busy="true"]::after,
  .c-button--tertiary[aria-busy="true"]::after {
    border-color: var(--color-text);
    border-inline-end-color: transparent;
  }

  @keyframes c-spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* @component c-field ------------------------------------------------------ */

  .c-field {
    display: grid;
    align-content: start;
    gap: var(--space-1-5);
    min-width: 0;
    margin: var(--space-0);
  }

  .c-field__label {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: var(--space-0);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
  }

  .c-field__optional {
    color: var(--color-text-tertiary);
    font-weight: var(--weight-regular);
  }

  .c-field__hint {
    margin: var(--space-0);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
  }

  .c-field__error {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1-5);
    margin: var(--space-0);
    color: var(--color-danger);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
  }

  .c-field__error:empty {
    display: none;
  }

  /* Fields side by side that wrap to a column when narrow. */
  .c-field-row {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
    gap: var(--space-3);
  }

  /* Free-text fields (name, email) need room for what people type: they stack on phones. */
  .c-field-row--wide {
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: var(--space-5) var(--space-4);
  }

  /* A group of related controls: fieldset + legend with the field label style. */
  .c-fieldset {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    min-width: 0;
    margin: var(--space-0);
    padding: var(--space-0);
    border: 0;
  }

  .c-fieldset__legend {
    float: left;
    width: 100%;
    margin: var(--space-0) var(--space-0) var(--space-3);
    padding: var(--space-0);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
  }

  .c-fieldset__legend + * {
    clear: left;
  }

  .c-fieldset__legend--lg {
    font-size: var(--text-lg);
    letter-spacing: var(--tracking-normal);
  }

  /* @component c-input ------------------------------------------------------ */

  .c-input,
  .c-textarea,
  .c-select__control {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: var(--control-md);
    margin: var(--space-0);
    padding-inline: var(--space-3);
    border: var(--border-width) solid var(--color-border-control);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-md);
    line-height: var(--leading-snug);
    appearance: none;
    transition: border-color var(--duration-fast) var(--ease-standard);
  }

  .c-input:hover,
  .c-textarea:hover,
  .c-select__control:hover {
    border-color: var(--color-border-control-hover);
  }

  .c-input:focus-visible,
  .c-textarea:focus-visible,
  .c-select__control:focus-visible {
    border-color: var(--color-accent);
  }

  .c-input[aria-invalid="true"],
  .c-textarea[aria-invalid="true"],
  .c-select__control[aria-invalid="true"] {
    border-color: var(--color-danger);
  }

  .c-input[aria-invalid="true"]:focus-visible,
  .c-textarea[aria-invalid="true"]:focus-visible,
  .c-select__control[aria-invalid="true"]:focus-visible {
    outline-color: var(--color-danger);
  }

  .c-input:disabled,
  .c-textarea:disabled,
  .c-select__control:disabled {
    border-color: var(--color-border);
    background: var(--color-surface-muted);
    color: var(--color-text-disabled);
  }

  .c-input[readonly],
  .c-textarea[readonly] {
    background: var(--color-surface-subtle);
  }

  .c-input[type="date"],
  .c-input[type="time"] {
    padding-inline-end: var(--space-2);
  }

  .c-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
  }

  .c-input--narrow {
    width: auto;
    max-width: var(--container-narrow);
  }

  .c-textarea {
    min-height: var(--textarea-min-height);
    padding-block: var(--space-3);
    line-height: var(--leading-normal);
    resize: vertical;
  }

  /* The select keeps the native element for accessibility; the wrapper draws the chevron. */
  .c-select {
    position: relative;
    display: block;
    min-width: 0;
  }

  .c-select__control {
    padding-inline-end: var(--space-10);
    cursor: pointer;
  }

  .c-select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: var(--space-3);
    width: var(--icon-md);
    height: var(--icon-md);
    margin-block-start: calc(var(--icon-md) / -2);
    background-color: var(--color-text-secondary);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
  }

  /*
   * Prefix/suffix inside one bordered control ("$", "guests"). The border is an inset box-shadow,
   * not a border, so it never adds to the box height: a `border` here would sit outside the
   * min-height this shares with the addon and the borderless input inside it, forcing the group
   * taller than both (principle 12, one shared row height).
   */
  .c-input-group {
    display: flex;
    align-items: center;
    min-height: var(--control-md);
    box-shadow: var(--ring-control);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: box-shadow var(--duration-fast) var(--ease-standard);
  }

  .c-input-group:hover {
    box-shadow: var(--ring-control-hover);
  }

  .c-input-group:focus-within {
    outline: var(--focus-width) solid var(--color-focus);
    outline-offset: var(--focus-offset);
  }

  /* The group draws the control's edge, so it carries the input's invalid and read-only states too. */
  .c-input-group:has(> .c-input[aria-invalid="true"]) {
    box-shadow: var(--ring-danger);
  }

  .c-input-group:has(> .c-input[aria-invalid="true"]):focus-within {
    outline-color: var(--color-danger);
  }

  .c-input-group:has(> .c-input[readonly]) {
    background: var(--color-surface-subtle);
  }

  .c-input-group__addon {
    padding-inline: var(--space-3) var(--space-0);
    color: var(--color-text-secondary);
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    white-space: nowrap;
  }

  .c-input-group__addon--end {
    padding-inline: var(--space-0) var(--space-3);
  }

  .c-input-group > .c-input {
    min-height: var(--control-md);
    border: 0;
    background: transparent;
  }

  .c-input-group > .c-input:focus-visible {
    outline: none;
  }

  /* @component c-check ------------------------------------------------------ */

  .c-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-height: var(--target-min);
    padding-block: var(--space-1);
    color: var(--color-text);
    font-size: var(--text-md);
    line-height: var(--leading-snug);
    cursor: pointer;
  }

  .c-check__input {
    display: grid;
    flex-shrink: 0;
    place-content: center;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    margin: var(--space-0);
    border: var(--border-width) solid var(--color-border-control);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    appearance: none;
    cursor: pointer;
    transition:
      background-color var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard);
  }

  .c-check__input[type="radio"] {
    border-radius: var(--radius-round);
  }

  .c-check__input::before {
    content: "";
    width: var(--icon-sm);
    height: var(--icon-sm);
    background-color: var(--color-text-on-accent);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: scale(0);
    transition: transform var(--duration-fast) var(--ease-standard);
  }

  .c-check__input[type="radio"]::before {
    width: var(--badge-dot);
    height: var(--badge-dot);
    border-radius: var(--radius-round);
    mask: none;
  }

  .c-check__input:hover {
    border-color: var(--color-border-control-hover);
  }

  .c-check__input:checked {
    border-color: var(--color-accent);
    background: var(--color-accent);
  }

  .c-check__input:checked::before {
    transform: scale(1);
  }

  .c-check__input:disabled {
    border-color: var(--color-border);
    background: var(--color-surface-muted);
  }

  .c-check__input:disabled + .c-check__text {
    color: var(--color-text-disabled);
  }

  .c-check__text {
    display: grid;
    gap: var(--space-0-5);
    padding-block-start: var(--space-0-5);
  }

  .c-check__description {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
  }

  .c-check-list {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-0);
    padding: var(--space-0);
    list-style: none;
  }

  @media (width >= 40em) {
    .c-check-list--columns {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--space-6);
    }
  }

  /* @component c-switch ----------------------------------------------------- */

  .c-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--target-min);
    color: var(--color-text);
    font-size: var(--text-md);
    cursor: pointer;
  }

  .c-switch--between {
    display: flex;
    justify-content: space-between;
  }

  .c-switch__input {
    position: relative;
    flex-shrink: 0;
    width: var(--switch-width);
    height: var(--switch-height);
    margin: var(--space-0);
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-border-control);
    appearance: none;
    cursor: pointer;
    transition: background-color var(--duration-normal) var(--ease-standard);
  }

  .c-switch__input::before {
    content: "";
    position: absolute;
    top: calc((var(--switch-height) - var(--switch-thumb)) / 2);
    left: calc((var(--switch-height) - var(--switch-thumb)) / 2);
    width: var(--switch-thumb);
    height: var(--switch-thumb);
    border-radius: var(--radius-round);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-normal) var(--ease-standard);
  }

  .c-switch__input:checked {
    background: var(--color-accent);
  }

  .c-switch__input:checked::before {
    transform: translateX(var(--switch-travel));
  }

  .c-switch__input:disabled {
    background: var(--color-surface-pressed);
  }

  /* @component c-segmented -------------------------------------------------- */

  .c-segmented {
    min-width: 0;
    margin: var(--space-0);
    padding: var(--space-0);
    border: 0;
  }

  .c-segmented__track {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: var(--space-1);
    border-radius: var(--radius-full);
    background: var(--color-surface-muted);
  }

  .c-segmented--block .c-segmented__track {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    width: 100%;
  }

  .c-segmented__input {
    position: absolute;
    width: var(--space-px);
    height: var(--space-px);
    margin: var(--space-0);
    opacity: 0;
    pointer-events: none;
  }

  .c-segmented__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    min-height: var(--control-segment);
    padding-inline: var(--space-4);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-none);
    white-space: nowrap;
    cursor: pointer;
    transition:
      background-color var(--duration-fast) var(--ease-standard),
      color var(--duration-fast) var(--ease-standard);
  }

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

  .c-segmented__input:checked + .c-segmented__option {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-inset-raised);
  }

  .c-segmented__input:focus-visible + .c-segmented__option {
    outline: var(--focus-width) solid var(--color-focus);
    outline-offset: var(--focus-offset);
  }

  .c-segmented__input:disabled + .c-segmented__option {
    color: var(--color-text-disabled);
    cursor: not-allowed;
  }

  /* Phones: five options (ten children: an input and a label each) don't fit one row at the
     default padding, and the fifth wraps alone. Tighter segments that share the row's width
     keep them on one line; the track still wraps if they can't fit. */
  @media (width < 40em) {
    .c-segmented__track:has(> :nth-child(10)) {
      display: flex;
      gap: var(--space-0-5);
    }

    .c-segmented__track:has(> :nth-child(10)) > .c-segmented__option {
      flex: 1 1 auto;
      padding-inline: var(--space-2);
    }
  }

  /* Hint and error sit under the track with the same spacing as a field's. */
  .c-segmented__description {
    display: grid;
    gap: var(--space-1);
    margin-block-start: var(--space-1-5);
  }

  /* Link-based segmented navigation (List | Map) shares the look. */
  .c-segmented__link {
    text-decoration: none;
  }

  .c-segmented__link:hover {
    text-decoration: none;
  }

  .c-segmented__link[aria-current="page"],
  .c-segmented__link[aria-current="true"] {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-inset-raised);
  }

  /* @component c-chip ------------------------------------------------------- */

  .c-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .c-chip {
    display: inline-flex;
    position: relative;
    cursor: pointer;
  }

  .c-chip__input {
    position: absolute;
    width: var(--space-px);
    height: var(--space-px);
    margin: var(--space-0);
    opacity: 0;
    pointer-events: none;
  }

  .c-chip__face {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    min-height: var(--control-chip);
    padding-inline: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--color-border-control);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--leading-none);
    white-space: nowrap;
    transition:
      background-color var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard);
  }

  .c-chip__check {
    display: none;
  }

  .c-chip:hover .c-chip__face {
    border-color: var(--color-border-control-hover);
  }

  .c-chip__input:checked + .c-chip__face {
    border-color: var(--color-accent);
    background: var(--color-accent-subtle);
    color: var(--color-accent-text);
    box-shadow: var(--ring-accent);
  }

  .c-chip__input:checked + .c-chip__face .c-chip__check {
    display: inline-block;
  }

  .c-chip__input:focus-visible + .c-chip__face {
    outline: var(--focus-width) solid var(--color-focus);
    outline-offset: var(--focus-offset);
  }

  .c-chip__input:disabled + .c-chip__face {
    border-color: var(--color-border);
    color: var(--color-text-disabled);
    cursor: not-allowed;
  }

  /* @component c-filter-chip ------------------------------------------------ */

  /* Navigation filters (links). Selected is inverted, unlike choice chips. */
  .c-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-chip);
    padding-inline: var(--space-4);
    border: var(--border-width) solid var(--color-border-control);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--leading-none);
    text-decoration: none;
    white-space: nowrap;
    transition:
      background-color var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard);
  }

  .c-filter-chip:hover {
    border-color: var(--color-border-control-hover);
    color: var(--color-text);
    text-decoration: none;
  }

  .c-filter-chip[aria-current="true"],
  .c-filter-chip[aria-current="page"] {
    border-color: var(--color-surface-inverse);
    background: var(--color-surface-inverse);
    color: var(--color-text-on-inverse);
  }

  .c-filter-chip[aria-current="true"]:hover,
  .c-filter-chip[aria-current="page"]:hover {
    background: var(--color-surface-inverse-hover);
    color: var(--color-text-on-inverse);
  }

  /* A removable active-filter pill: the whole pill is the remove link. */
  .c-filter-chip--removable {
    padding-inline-end: var(--space-2);
    border-color: var(--color-accent-subtle-border);
    background: var(--color-accent-subtle);
    color: var(--color-accent-text);
  }

  .c-filter-chip--removable:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-text);
  }

  /* The rail scrolls, so it clips its chips' focus rings. It pads by the ring's reach (and
     snaps to that padding, not its edge), then bleeds into the gutter by the same amount so
     chips still line up with the column.
     With no scrollbar, the end edge fades so a cut-off chip reads as "more this way". The end
     padding is as wide as the fade, so once scrolled to the end the last chip is clear of it;
     a rail that fits never has a chip under the fade. The mask only uses the color's alpha. */
  .c-filter-rail {
    display: flex;
    gap: var(--space-2);
    margin: var(--space-0) calc(var(--focus-reach) * -1);
    padding: var(--space-1) var(--space-8) var(--space-1) var(--focus-reach);
    overflow-x: auto;
    list-style: none;
    scroll-padding-inline: var(--focus-reach);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, var(--color-text) calc(100% - var(--space-8)), transparent);
  }

  .c-filter-rail::-webkit-scrollbar {
    display: none;
  }

  .c-filter-rail > * {
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  /* @component c-tile ------------------------------------------------------- */

  .c-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--tile-min-width), 100%), 1fr));
    gap: var(--space-3);
  }

  .c-tile {
    position: relative;
    display: flex;
    cursor: pointer;
  }

  .c-tile__input {
    position: absolute;
    width: var(--space-px);
    height: var(--space-px);
    margin: var(--space-0);
    opacity: 0;
    pointer-events: none;
  }

  .c-tile__face {
    display: grid;
    align-content: start;
    gap: var(--space-1);
    width: 100%;
    padding: var(--space-4);
    border: var(--border-width) solid var(--color-border-control);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    transition:
      background-color var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard);
  }

  .c-tile__icon {
    margin-block-end: var(--space-2);
    color: var(--color-text);
  }

  .c-tile__title {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
  }

  .c-tile__description {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
  }

  .c-tile__check {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: none;
    color: var(--color-accent);
  }

  .c-tile:hover .c-tile__face {
    border-color: var(--color-border-control-hover);
  }

  .c-tile__input:checked + .c-tile__face {
    border-color: var(--color-accent);
    background: var(--color-accent-subtle);
    box-shadow: var(--ring-accent);
  }

  .c-tile__input:checked + .c-tile__face .c-tile__check {
    display: block;
  }

  .c-tile__input:focus-visible + .c-tile__face {
    outline: var(--focus-width) solid var(--color-focus);
    outline-offset: var(--focus-offset);
  }

  /* @component c-stepper ---------------------------------------------------- */

  .c-stepper {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
  }

  .c-stepper__input {
    width: var(--control-lg);
    min-height: var(--control-md);
    padding-inline: var(--space-2);
    border: var(--border-width) solid var(--color-border-control);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  /* With JavaScript the value reads as text between round −/+ buttons. */
  :root[data-js] .c-stepper__input {
    width: calc(var(--stepper-value-width) + var(--space-4));
    padding-inline: var(--space-0);
    border-color: transparent;
    background: transparent;
    appearance: textfield;
  }

  :root[data-js] .c-stepper__input::-webkit-inner-spin-button,
  :root[data-js] .c-stepper__input::-webkit-outer-spin-button {
    margin: var(--space-0);
    appearance: none;
  }

  .c-stepper__button {
    display: inline-grid;
    place-items: center;
    width: var(--control-chip);
    height: var(--control-chip);
    padding: var(--space-0);
    border: var(--border-width) solid var(--color-border-control);
    border-radius: var(--radius-round);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-standard);
  }

  .c-stepper__button:hover {
    border-color: var(--color-border-control-hover);
  }

  .c-stepper__button:disabled {
    border-color: var(--color-border);
    color: var(--color-text-disabled);
    cursor: not-allowed;
  }

  /* @component c-menu ------------------------------------------------------- */

  .c-menu {
    position: relative;
    display: inline-block;
  }

  .c-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-chip);
    padding-inline: var(--space-4) var(--space-3);
    border: var(--border-width) solid var(--color-border-control);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--leading-none);
    white-space: nowrap;
    list-style: none;
    cursor: pointer;
    user-select: none;
    transition: border-color var(--duration-fast) var(--ease-standard);
  }

  .c-menu__trigger::-webkit-details-marker {
    display: none;
  }

  .c-menu__trigger:hover,
  .c-menu[open] > .c-menu__trigger {
    border-color: var(--color-border-control-hover);
  }

  .c-menu__label {
    color: var(--color-text-secondary);
  }

  .c-menu__value {
    font-weight: var(--weight-semibold);
  }

  .c-menu__chevron {
    transition: transform var(--duration-fast) var(--ease-standard);
  }

  .c-menu[open] .c-menu__chevron {
    transform: rotate(180deg);
  }

  .c-menu__panel {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    z-index: var(--z-dropdown);
    display: grid;
    gap: var(--space-0-5);
    min-width: var(--menu-min-width);
    max-height: var(--menu-max-height);
    padding: var(--space-2);
    overflow-y: auto;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
  }

  .c-menu--end .c-menu__panel {
    right: 0;
    left: auto;
  }

  .c-menu__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: var(--control-md);
    padding-inline: var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: var(--text-md);
    font-weight: var(--weight-regular);
    text-align: start;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }

  .c-menu__item:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
    text-decoration: none;
  }

  .c-menu__item[aria-current="true"],
  .c-menu__item:has(input:checked) {
    font-weight: var(--weight-semibold);
  }

  .c-menu__item-check {
    visibility: hidden;
    color: var(--color-accent);
  }

  .c-menu__item[aria-current="true"] .c-menu__item-check,
  .c-menu__item:has(input:checked) .c-menu__item-check {
    visibility: visible;
  }

  .c-menu__radio {
    position: absolute;
    width: var(--space-px);
    height: var(--space-px);
    opacity: 0;
    pointer-events: none;
  }

  .c-menu__item:has(.c-menu__radio:focus-visible) {
    outline: var(--focus-width) solid var(--color-focus);
    outline-offset: calc(var(--focus-offset) * -1);
  }

  /*
    Account menu: the signed-in identity in the header. Same <details> mechanics as the filter
    menus above, but the trigger is an avatar and the panel holds a heading, a link group, and a
    sign-out form rather than one list of choices.
  */
  .c-menu__trigger--account {
    gap: var(--space-2);
    padding-inline: var(--space-1) var(--space-2);
    border-color: var(--color-border);
  }

  .c-menu__panel--account {
    gap: var(--space-2);
    padding: var(--space-3);
  }

  .c-menu__heading {
    display: grid;
    gap: var(--space-0-5);
    margin: var(--space-0);
    padding: var(--space-1) var(--space-3) var(--space-2);
    border-block-end: var(--border-width) solid var(--color-border);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
  }

  .c-menu__heading-meta {
    overflow: hidden;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    text-overflow: ellipsis;
  }

  .c-menu__group {
    display: grid;
    gap: var(--space-0-5);
    margin: var(--space-0);
    padding: var(--space-0);
    list-style: none;
  }

  /* Icon then label, rather than the label-and-check layout a choice menu uses. */
  .c-menu__group .c-menu__item {
    justify-content: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
  }

  .c-menu__footer {
    margin-block-start: var(--space-1);
    padding-block-start: var(--space-2);
    border-block-start: var(--border-width) solid var(--color-border);
  }

  /* @component c-sheet ------------------------------------------------------ */

  .c-sheet {
    width: min(100% - var(--gutter) * 2, var(--sheet-width));
    max-width: none;
    max-height: var(--sheet-max-height);
    margin: auto;
    padding: var(--space-0);
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-xl);
  }

  .c-sheet[open] {
    display: flex;
    flex-direction: column;
    animation: c-sheet-in var(--duration-slow) var(--ease-standard);
  }

  .c-sheet::backdrop {
    background: var(--color-overlay);
  }

  .c-sheet__header {
    display: grid;
    grid-template-columns: var(--control-md) 1fr var(--control-md);
    align-items: center;
    min-height: var(--control-lg);
    padding: var(--space-2) var(--space-4);
    border-block-end: var(--border-width) solid var(--color-border);
  }

  .c-sheet__title {
    grid-column: 2;
    margin: var(--space-0);
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-normal);
    text-align: center;
  }

  .c-sheet__close {
    grid-column: 1;
    grid-row: 1;
  }

  .c-sheet__body {
    flex: 1;
    padding: var(--space-6);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .c-sheet__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    border-block-start: var(--border-width) solid var(--color-border);
    background: var(--color-surface);
  }

  .c-sheet__section {
    display: grid;
    gap: var(--space-4);
    padding-block: var(--space-6);
    border-block-end: var(--border-width) solid var(--color-border);
  }

  .c-sheet__section:first-child {
    padding-block-start: var(--space-0);
  }

  .c-sheet__section:last-child {
    padding-block-end: var(--space-0);
    border-block-end: 0;
  }

  .c-sheet__section-title {
    margin: var(--space-0);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-normal);
  }

  @media (width < 40em) {
    .c-sheet {
      width: 100%;
      max-height: var(--sheet-max-height);
      margin-block-end: var(--space-0);
      border-end-start-radius: 0;
      border-end-end-radius: 0;
    }

    .c-sheet[open] {
      animation-name: c-sheet-up;
    }

    .c-sheet__body {
      padding: var(--space-5);
    }

    .c-sheet__footer {
      padding: var(--space-3) var(--space-5);
    }
  }

  @keyframes c-sheet-in {
    from {
      opacity: 0;
      transform: translateY(1rem) scale(0.98);
    }
  }

  @keyframes c-sheet-up {
    from {
      transform: translateY(100%);
    }
  }

  /* @component c-disclosure ------------------------------------------------- */

  .c-disclosure__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: var(--control-md);
    color: var(--color-text);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    list-style: none;
    cursor: pointer;
  }

  .c-disclosure__summary::-webkit-details-marker {
    display: none;
  }

  .c-disclosure__chevron {
    transition: transform var(--duration-fast) var(--ease-standard);
  }

  .c-disclosure[open] > .c-disclosure__summary .c-disclosure__chevron {
    transform: rotate(180deg);
  }

  .c-disclosure__content {
    padding-block: var(--space-2) var(--space-4);
  }

  .c-disclosure--divided {
    border-block-end: var(--border-width) solid var(--color-border);
  }

  /* @component c-tabs ------------------------------------------------------- */

  .c-tabs {
    display: flex;
    gap: var(--space-6);
    margin: var(--space-0);
    padding: var(--space-0);
    overflow-x: auto;
    border-block-end: var(--border-width) solid var(--color-border);
    scrollbar-width: none;
  }

  .c-tabs::-webkit-scrollbar {
    display: none;
  }

  .c-tabs__tab {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-md);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    white-space: nowrap;
  }

  .c-tabs__tab:hover {
    color: var(--color-text);
    text-decoration: none;
  }

  .c-tabs__tab::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: calc(var(--border-width) * -1);
    left: 0;
    height: var(--border-width-strong);
    border-radius: var(--radius-full);
    background: transparent;
  }

  .c-tabs__tab[aria-current="page"],
  .c-tabs__tab[aria-current="true"] {
    color: var(--color-text);
  }

  .c-tabs__tab[aria-current="page"]::after,
  .c-tabs__tab[aria-current="true"]::after {
    background: var(--color-text);
  }

  /* @component c-card ------------------------------------------------------- */

  .c-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
  }

  .c-card--interactive {
    transition:
      box-shadow var(--duration-normal) var(--ease-standard),
      border-color var(--duration-normal) var(--ease-standard);
  }

  .c-card--interactive:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
  }

  .c-card__body {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-5);
  }

  .c-card__title {
    margin: var(--space-0);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-normal);
  }

  /* The title link covers the card so the whole card is one target. */
  .c-card__link {
    color: inherit;
    text-decoration: none;
  }

  .c-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: var(--z-raised);
  }

  .c-card__link:hover {
    color: inherit;
    text-decoration: none;
  }

  .c-card__link:focus-visible {
    outline: none;
  }

  .c-card__link:focus-visible::after {
    border-radius: var(--radius-lg);
    outline: var(--focus-width) solid var(--color-focus);
    outline-offset: var(--focus-offset);
  }

  /* @component c-panel ------------------------------------------------------ */

  .c-panel {
    min-width: 0;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }

  .c-panel--subtle {
    border-color: transparent;
    background: var(--color-surface-subtle);
  }

  .c-panel__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-5) var(--space-6);
    border-block-end: var(--border-width) solid var(--color-border);
  }

  .c-panel__title {
    margin: var(--space-0);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-normal);
  }

  .c-panel__description {
    margin: var(--space-0);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
  }

  .c-panel__body {
    padding: var(--space-6);
  }

  .c-panel__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-block-start: var(--border-width) solid var(--color-border);
  }

  @media (width < 40em) {
    .c-panel__header,
    .c-panel__body {
      padding: var(--space-4);
    }

    .c-panel__footer {
      padding: var(--space-3) var(--space-4);
    }
  }

  /* @component c-callout ---------------------------------------------------- */

  .c-callout {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3);
    margin: var(--space-0);
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
    color: var(--color-text);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
  }

  .c-callout__icon {
    margin-block-start: var(--space-0-5);
    color: var(--color-text-secondary);
  }

  .c-callout__content {
    display: grid;
    gap: var(--space-1);
  }

  .c-callout__content > * {
    margin: var(--space-0);
  }

  .c-callout__title {
    font-weight: var(--weight-semibold);
  }

  .c-callout--info {
    border-color: var(--color-info-border);
    background: var(--color-info-subtle);
  }

  .c-callout--info .c-callout__icon {
    color: var(--color-info);
  }

  .c-callout--success {
    border-color: var(--color-success-border);
    background: var(--color-success-subtle);
  }

  .c-callout--success .c-callout__icon {
    color: var(--color-success);
  }

  .c-callout--warning {
    border-color: var(--color-warning-border);
    background: var(--color-warning-subtle);
  }

  .c-callout--warning .c-callout__icon {
    color: var(--color-warning);
  }

  .c-callout--danger {
    border-color: var(--color-danger-border);
    background: var(--color-danger-subtle);
  }

  .c-callout--danger .c-callout__icon {
    color: var(--color-danger);
  }

  /* @component c-badge ------------------------------------------------------ */

  .c-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-0-5) var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-surface-muted);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    white-space: nowrap;
  }

  /* A stack stretches its children; a badge hugs its words instead of becoming a bar. */
  .c-stack > .c-badge {
    align-self: flex-start;
  }

  .c-badge--accent {
    background: var(--color-accent-subtle);
    color: var(--color-accent-text);
  }

  .c-badge--success {
    background: var(--color-success-subtle);
    color: var(--color-success);
  }

  .c-badge--warning {
    background: var(--color-warning-subtle);
    color: var(--color-warning);
  }

  .c-badge--danger {
    background: var(--color-danger-subtle);
    color: var(--color-danger);
  }

  .c-badge--inverse {
    background: var(--color-surface-inverse);
    color: var(--color-text-on-inverse);
  }

  /* A count on a button ("Filters 3"). */
  .c-badge--count {
    justify-content: center;
    min-width: var(--icon-md);
    padding-inline: var(--space-1-5);
    background: var(--color-surface-inverse);
    color: var(--color-text-on-inverse);
  }

  .c-badge__dot {
    width: var(--badge-dot);
    height: var(--badge-dot);
    border-radius: var(--radius-round);
    background: currentColor;
  }

  /* @component c-avatar ----------------------------------------------------- */

  /*
    Initials on a tinted disc. The initials are decorative — every avatar sits beside the
    name it stands for, so the element is aria-hidden and adds no second announcement.
  */
  .c-avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--avatar-md);
    height: var(--avatar-md);
    border-radius: var(--radius-round);
    background: var(--color-avatar-neutral-surface);
    color: var(--color-avatar-neutral-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tight);
    text-transform: uppercase;
    user-select: none;
  }

  .c-avatar--sm {
    width: var(--avatar-sm);
    height: var(--avatar-sm);
    font-size: var(--text-xs);
  }

  .c-avatar--lg {
    width: var(--avatar-lg);
    height: var(--avatar-lg);
    font-size: var(--text-2xl);
  }

  .c-avatar--indigo {
    background: var(--color-avatar-indigo-surface);
    color: var(--color-avatar-indigo-text);
  }

  .c-avatar--coral {
    background: var(--color-avatar-coral-surface);
    color: var(--color-avatar-coral-text);
  }

  .c-avatar--teal {
    background: var(--color-avatar-teal-surface);
    color: var(--color-avatar-teal-text);
  }

  .c-avatar--amber {
    background: var(--color-avatar-amber-surface);
    color: var(--color-avatar-amber-text);
  }

  .c-avatar--neutral {
    background: var(--color-avatar-neutral-surface);
    color: var(--color-avatar-neutral-text);
  }

  /* Name beside its avatar — the row a people table or a profile header is built from. */
  .c-identity {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
  }

  .c-identity__body {
    display: grid;
    gap: var(--space-0-5);
    min-width: 0;
  }

  .c-identity__name {
    margin: var(--space-0);
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .c-identity__meta {
    margin: var(--space-0);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
  }

  /* @component c-table ------------------------------------------------------ */

  .c-table-wrap {
    overflow-x: auto;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }

  /* Inside a panel, which already draws the border. */
  .c-table-wrap--flush {
    border: 0;
    border-radius: 0;
  }

  .c-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
  }

  .c-table th,
  .c-table td {
    padding: var(--space-3) var(--space-4);
    border-block-end: var(--border-width) solid var(--color-border);
    text-align: start;
    vertical-align: top;
  }

  .c-table th {
    background: var(--color-surface-subtle);
    color: var(--color-text-secondary);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
  }

  .c-table tbody tr:last-child td {
    border-block-end: 0;
  }

  /* Qualified by the table: a bare modifier loses to ".c-table td", and the column would never right-align. */
  .c-table .c-table__numeric {
    text-align: end;
    font-variant-numeric: tabular-nums;
  }

  /* A link that makes up a cell is a target, not running text, so it gets the minimum target height. */
  .c-table td > .c-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-min);
  }

  /* A row with an Actions cell (Remove, Edit) centers its cells on the button, and the button
     sits at the row's end rather than floating mid-column. */
  .c-table tr:has(> td[data-label="Actions"]) > td {
    vertical-align: middle;
  }

  .c-table td[data-label="Actions"] {
    text-align: end;
  }

  @media (width < 48em) {
    .c-table--stack thead {
      position: absolute;
      width: var(--space-px);
      height: var(--space-px);
      overflow: hidden;
      clip-path: inset(50%);
    }

    .c-table--stack tr {
      display: grid;
      gap: var(--space-2);
      padding: var(--space-4);
      border-block-end: var(--border-width) solid var(--color-border);
    }

    .c-table--stack tbody tr:last-child {
      border-block-end: 0;
    }

    /* Values keep their own width (a badge hugs its words rather than stretching into a bar). */
    .c-table--stack td {
      display: grid;
      grid-template-columns: minmax(7rem, 35%) minmax(0, 1fr);
      gap: var(--space-1) var(--space-3);
      justify-items: start;
      padding: var(--space-0);
      border: 0;
      overflow-wrap: anywhere;
    }

    /* A second line in a cell, like the email under a name, stays in the value column. */
    .c-table--stack td > * {
      grid-column: 2;
    }

    /* An email has nowhere sensible to break, and the value column splits it mid-word
       ("example.co / m"). It takes the cell's full width under its label instead; the
       cell's overflow-wrap stays as the last resort for an address longer than that. */
    .c-table--stack td:is([data-label="Email"], [data-label="Purchaser"]) {
      grid-template-columns: minmax(0, 1fr);
    }

    .c-table--stack td:is([data-label="Email"], [data-label="Purchaser"]) > * {
      grid-column: 1;
    }

    /* The label is drawn for sighted readers only. The alternative text after the slash is
       empty, so a screen reader reads the value once instead of "Name Caleb Morrison". */
    .c-table--stack td::before {
      content: attr(data-label) / "";
      color: var(--color-text-secondary);
      font-weight: var(--weight-semibold);
    }

    /* The button names its action, so "Actions" beside it says nothing; it sits under the values. */
    .c-table--stack td[data-label="Actions"]::before {
      content: none;
    }
  }

  /* @component c-empty ------------------------------------------------------ */

  .c-empty {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    padding: var(--space-12) var(--space-6);
    border: var(--border-width) dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    text-align: center;
  }

  .c-empty__icon {
    display: grid;
    place-items: center;
    width: var(--empty-icon-size);
    height: var(--empty-icon-size);
    border-radius: var(--radius-round);
    background: var(--color-surface-muted);
    color: var(--color-text-secondary);
  }

  .c-empty__title {
    margin: var(--space-0);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-normal);
  }

  .c-empty__body {
    max-width: var(--container-prose);
    margin: var(--space-0);
    color: var(--color-text-secondary);
  }

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

  /* @component c-stat ------------------------------------------------------- */

  /* A counted fact: the label names it, the value is what you came to read. */
  .c-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
    gap: var(--space-3);
    margin: var(--space-0);
  }

  /* Phones: always two columns, so four tiles make 2 × 2 even inside a padded panel, and an
     odd last tile spans the row instead of leaving a hole beside it. */
  @media (width < 40em) {
    .c-stat-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .c-stat-grid > :last-child:nth-child(odd) {
      grid-column: 1 / -1;
    }
  }

  .c-stat {
    display: grid;
    align-content: start;
    gap: var(--space-1);
    padding: var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }

  .c-stat__label {
    margin: var(--space-0);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
  }

  .c-stat__value {
    margin: var(--space-0);
    color: var(--color-text);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
  }

  /* @component c-summary ---------------------------------------------------- */

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

  .c-summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .c-summary__row > dt {
    color: var(--color-text-secondary);
    font-weight: var(--weight-regular);
  }

  .c-summary__row > dd {
    margin: var(--space-0);
    font-variant-numeric: tabular-nums;
    text-align: end;
  }

  .c-summary__row--total {
    margin-block-start: var(--space-2);
    padding-block-start: var(--space-3);
    border-block-start: var(--border-width) solid var(--color-border);
    font-weight: var(--weight-semibold);
  }

  .c-summary__row--total > dt {
    color: var(--color-text);
    font-weight: var(--weight-semibold);
  }

  /* Facts rather than money: labels in a column with values left-aligned beside them, stacked on phones. */
  .c-summary--facts .c-summary__row {
    display: grid;
    gap: var(--space-0-5);
  }

  .c-summary--facts .c-summary__row > dd {
    font-variant-numeric: normal;
    text-align: start;
  }

  /* The rows share one label column (subgrid). It is at least 10rem and grows to the longest
     label, up to 40% of the list, so "Platform fee on new ticket orders" stays on one line in
     a wide panel while a narrow card keeps the 10rem column. */
  @media (width >= 40em) {
    .c-summary--facts {
      grid-template-columns: fit-content(40%) minmax(0, 1fr);
    }

    .c-summary--facts > * {
      grid-column: 1 / -1;
    }

    .c-summary--facts .c-summary__row {
      grid-template-columns: subgrid;
      gap: var(--space-4);
    }

    .c-summary--facts .c-summary__row > dt {
      min-width: 10rem;
    }
  }

  /* @component c-page-header ------------------------------------------------ */

  .c-page-header {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-0);
  }

  .c-page-header > * {
    margin: var(--space-0);
  }

  .c-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-3);
  }

  /* A text link beside header buttons: the row's height as its target, its words level with theirs. */
  .c-page-header__actions > .c-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-md);
  }

  /* @component c-list ------------------------------------------------------- */

  /* Icon + text rows (house rules, requirements, highlights). */
  .c-icon-list {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-0);
    padding: var(--space-0);
    list-style: none;
  }

  .c-icon-list__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3);
  }

  .c-icon-list__item > .c-icon {
    margin-block-start: var(--space-0-5);
    color: var(--color-text-secondary);
  }

  .c-icon-list__text {
    display: grid;
    gap: var(--space-0-5);
  }

  .c-icon-list__meta {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
  }

  /* ------------------------------------------------------------------------- */

  @media (forced-colors: active) {
    .c-segmented__input:checked + .c-segmented__option,
    .c-segmented__link[aria-current="page"],
    .c-segmented__link[aria-current="true"],
    .c-chip__input:checked + .c-chip__face,
    .c-tile__input:checked + .c-tile__face,
    .c-filter-chip[aria-current="true"],
    .c-filter-chip[aria-current="page"] {
      border-color: Highlight;
    }

    /* A selected segment, chip, or filter chip fills with the system selection colors, so the
       choice survives with no author colors at all (principle 5). */
    .c-segmented__input:checked + .c-segmented__option,
    .c-segmented__link[aria-current="page"],
    .c-segmented__link[aria-current="true"],
    .c-chip__input:checked + .c-chip__face,
    .c-filter-chip[aria-current="true"],
    .c-filter-chip[aria-current="page"] {
      forced-color-adjust: none;
      background: Highlight;
      color: HighlightText;
    }

    /* A tile holds descriptive text, so selection is a heavier inner outline plus its check. */
    .c-tile__input:checked + .c-tile__face {
      outline: var(--border-width-strong) solid Highlight;
      outline-offset: calc(var(--border-width-strong) * -1);
    }

    .c-tabs__tab[aria-current="page"]::after,
    .c-tabs__tab[aria-current="true"]::after {
      forced-color-adjust: none;
      background: Highlight;
    }

    .c-check__input:checked,
    .c-switch__input:checked {
      background: Highlight;
    }

    .c-select::after,
    .c-check__input::before {
      background-color: CanvasText;
    }
  }
}