@layer components {
  .event-grid {
    --auto-grid-min: 19rem;
  }

  /* Event card in the overview grid: the whole card is the link. */
  .event-card {
    block-size: 100%;
    gap: var(--space-xs);
    color: inherit;
    text-decoration: none;
    transition:
      translate var(--duration-base) var(--ease-out),
      box-shadow var(--duration-base) var(--ease-out),
      border-color var(--duration-base) var(--ease-out);

    &:hover {
      translate: 0 -2px;
      box-shadow: var(--shadow-l);
      border-color: var(--color-border-strong);
    }

    &:focus-visible {
      border-radius: var(--radius-l);
    }
  }

  .event-card__title {
    font-size: var(--step-2);
  }

  .event-card__meta {
    margin-block-start: auto;
  }

  /* Event detail page: one column, sidebar on the right once the main area is wide enough. */
  .event-layout {
    display: grid;
    gap: var(--space-m);
    align-items: start;

    @container main (inline-size > 58rem) {
      grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
    }
  }

  /* Status card: a coloured edge shows the current state at a glance. */
  .status-card {
    --status-color: var(--color-warning);
    border-inline-start: 4px solid var(--status-color);

    &.status-card--open { --status-color: var(--color-success); }
    &.status-card--closed { --status-color: var(--color-border-strong); }
  }

  /* Label/value list */
  .details-list {
    display: grid;
    gap: var(--space-xs);

    & > div {
      display: grid;
      gap: var(--space-3xs);
    }

    & dt {
      color: var(--color-text-muted);
      font-size: var(--step--1);
      font-weight: 560;
    }

    & dd {
      margin: 0;
      overflow-wrap: anywhere;

      & p + p { margin-block-start: var(--space-2xs); }
    }
  }

  /* Read-only input with a copy button; stacks on narrow cards. */
  .copy-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);

    @container card (inline-size > 28rem) {
      flex-direction: row;

      & .btn { flex-shrink: 0; }
    }
  }

  .copy-field__input {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: max(16px, var(--step--1));
    background-color: var(--color-surface-sunken);
    text-overflow: ellipsis;
  }

  .empty-state--compact {
    padding: var(--space-m);
  }
}

@layer components {
  .stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2xs);
  }

  .stats__item {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-3xs);
    padding: var(--space-xs);
    border-radius: var(--radius-m);
    background-color: var(--color-surface-sunken);

    & dd {
      margin: 0;
      font-family: var(--font-display);
      font-size: var(--step-3);
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }

    & dt {
      color: var(--color-text-muted);
      font-size: var(--step--1);
    }
  }
}