@layer components {
  /* A pipeline's board: a column per stage. Narrow screens snap one column at a time. */
  .board {
    flex: 1;
    min-block-size: 0;
    overflow: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scroll-padding-inline: 1rem;
    container-type: inline-size;
  }

  /* A notice above the board, inset like its columns. */
  .board__notice {
    padding: 1rem 1rem 0;
  }

  .board__columns {
    display: grid;
    grid-auto-columns: min(85cqi, 16rem);
    grid-auto-flow: column;
    align-items: start;
    gap: 0.75rem;
    inline-size: max-content;
    margin: 0;
    padding: 1rem;
    list-style: none;
  }

  .board-column {
    display: grid;
    align-content: start;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: var(--radius-lg);
    background: var(--muted);
    scroll-snap-align: start;
    transition: background-color 150ms ease-out;
  }

  .board-column__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 1.5rem;
  }

  .board-column__title {
    min-inline-size: 0;
    overflow: hidden;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-normal);
    line-height: var(--text-sm--line-height);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .board-column__count {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
  }

  .board-column__meta,
  .board-column__empty {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
  }

  .board-column__empty {
    padding-block: 0.5rem;
  }

  .board-column__cards {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;

    &:not(:has(> li)) {
      display: none;
    }

    &:has(> li) + .board-column__empty {
      display: none;
    }
  }

  /* The board's wrapper holds its drag controller and alert without a box of its own. */
  .board-view {
    display: contents;
  }

  .board__alert:not(:empty) {
    padding: 1rem 1rem 0;
  }

  /* A column a dragged card can drop into. */
  .board-column--over {
    background: color-mix(in oklch, var(--muted), var(--foreground) 5%);
    outline: 2px dashed var(--ring);
    outline-offset: -2px;
  }

  .board-card--dragging .board-card {
    opacity: 0.5;
  }

  .board-card--placed .board-card {
    animation: board-card-place 200ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  li[aria-busy="true"] .board-card {
    cursor: progress;
  }

  @keyframes board-card-place {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
  }

  .board-card {
    display: grid;
    gap: 0.375rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
    color: var(--card-foreground);
    text-decoration: none;
    transition: background-color 150ms ease-out, transform 150ms ease-out;

    &:hover {
      background: var(--accent);
    }

    &:active {
      transform: scale(0.97);
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }
  }

  .board-card__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .board-card__title {
    min-inline-size: 0;
    overflow: hidden;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--text-sm--line-height);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .board-card__time {
    flex-shrink: 0;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
  }

  .board-card__data {
    display: grid;
    gap: 0.125rem;
    margin: 0;
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);

    div {
      display: flex;
      gap: 0.375rem;
      min-inline-size: 0;
    }

    dt {
      flex-shrink: 0;
      color: var(--muted-foreground);
    }

    dd {
      margin: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .settings-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .stage-list,
  .card-history {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .stage-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    &[data-retired] .stage-list__body {
      opacity: 0.6;
    }
  }

  .stage-list__body {
    display: grid;
    flex: 1 1 12rem;
    gap: 0.25rem;
    min-inline-size: 0;
  }

  .stage-list__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-weight: var(--font-weight-medium);
  }

  .stage-list__meta,
  .stage-list__instructions {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
  }

  .stage-list__instructions {
    overflow-wrap: anywhere;
    white-space: pre-line;
  }

  .stage-list__actions {
    display: flex;
    flex-shrink: 0;
    gap: 0.25rem;
  }

  .automation-activity {
    display: grid;
    gap: 0.375rem;
    margin-block-start: 0.375rem;
    padding-block-start: 0.5rem;
    border-block-start: 1px solid var(--border);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
  }

  .automation-activity__period {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
  }

  .automation-activity__counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0;
  }

  .automation-activity__count {
    display: flex;
    flex-direction: row-reverse;
    align-items: baseline;
    gap: 0.25rem;

    dt {
      color: var(--muted-foreground);
    }

    dd {
      margin: 0;
      font-weight: var(--font-weight-medium);
      font-variant-numeric: tabular-nums;
    }

    &[data-zero] dd {
      color: var(--muted-foreground);
      font-weight: normal;
    }
  }

  .automation-activity__skips {
    display: grid;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    color: var(--muted-foreground);
    list-style: none;

    li {
      display: grid;
      grid-template-columns: 3ch 1fr;
      gap: 0.25rem;
    }
  }

  .automation-activity__skip-count {
    color: var(--foreground);
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
    text-align: end;
  }

  .card-history__event {
    display: grid;
    gap: 0.375rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }

  .card-history__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 0.5rem;
  }

  .card-history__summary {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
  }

  .card-history__creator {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    white-space: nowrap;
  }

  .card-history__time {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
  }

  .card-history__reason {
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
  }

  .card-history__link {
    justify-self: start;
    font-size: var(--text-sm);
    text-underline-offset: 0.2em;
  }

  .board-column__title a {
    color: inherit;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }
  }

  .board-column__automations {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    margin-inline-start: auto;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    text-decoration: none;

    svg {
      inline-size: 0.875rem;
      block-size: 0.875rem;
    }

    &:hover {
      color: var(--foreground);
    }
  }

  /* The pipeline's automation limits, grouped under the main settings. */
  .settings-fieldset {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .settings-fieldset__legend {
    margin-block-end: 0.25rem;
    padding: 0;
    font-weight: var(--font-weight-semibold);
  }

  .settings-fieldset__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .settings-fieldset__days {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
  }

  .automation-variable {
    display: grid;
    gap: 0.75rem;

    /* The value field shows only for a card field named by hand or fixed text. */
    &:not(:has(option:is([value="card"], [value="text"]):checked)) > .field + .field {
      display: none;
    }
  }

  /* A delay's amount beside its unit. */
  .delay-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.5rem;
  }

  .stage-list__name a {
    color: inherit;
    text-underline-offset: 0.2em;
  }

  /* Field names the pipeline already uses, under a stage's required fields. */
  .field-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
  }

  .field-chips__label {
    margin-inline-end: 0.125rem;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
  }

  .field-chips__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-block-size: 2rem;
    padding-inline: 0.5rem 0.625rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--background);
    color: var(--foreground);
    font: inherit;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background-color 150ms ease-out, border-color 150ms ease-out, transform 150ms ease-out;

    svg {
      inline-size: 0.875rem;
      block-size: 0.875rem;
      color: var(--muted-foreground);
      transition: rotate 150ms ease-out;
    }

    &:enabled:hover {
      background: var(--accent);
    }

    &:enabled:active {
      transform: scale(0.97);
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    /* Pressed reads as added; the plus turns to a cross that takes it out. */
    &[aria-pressed="true"] {
      border-color: var(--secondary);
      background: var(--secondary);

      svg {
        rotate: 45deg;
      }
    }

    &:disabled {
      padding-inline: 0.625rem;
      color: var(--muted-foreground);
      cursor: default;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .board-card,
    .board-column,
    .field-chips__chip,
    .field-chips__chip svg {
      transition: none;
    }

    .board-card--placed .board-card {
      animation: none;
    }
  }
}