@layer components {
  /* ─── Bar and page ────────────────────────── */

  .admin-bar {
    align-items: center;
    border-block-end: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    padding-block: 0.75rem;
    padding-inline: max(var(--gutter), calc((100% - var(--content-max-inline-size)) / 2));
  }

  .admin-bar__title {
    color: var(--color-ink);
    font-weight: 700;
    text-decoration: none;
  }

  .admin-main {
    display: grid;
    gap: 1.5rem;
    margin-inline: auto;
    max-inline-size: var(--content-max-inline-size);
    min-inline-size: 0;
    padding-block: 1.5rem 3rem;
    padding-inline: var(--gutter);
  }

  .admin-columns {
    display: grid;
    gap: 1.5rem;

    @media (width >= 768px) {
      align-items: start;
      grid-template-columns: 1fr 1fr;
    }
  }

  .flash {
    background: var(--color-positive-tint);
    border-radius: var(--radius-sm);
    color: var(--color-positive);
    padding: 0.625rem 1rem;
  }

  .flash--alert {
    background: var(--color-negative-tint);
    color: var(--color-negative);
  }

  /* ─── Page header ─────────────────────────── */

  .page-header {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    justify-content: space-between;
  }

  .page-header__title {
    font-size: 1.75rem;
  }

  .page-header__state {
    color: var(--color-positive);
    font-weight: 600;
  }

  .page-header__state--halted {
    color: var(--color-negative);
  }

  /* ─── Stats ───────────────────────────────── */

  .stats {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  }

  .stat {
    gap: 0.25rem;
  }

  .stat__label {
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
  }

  .stat__value {
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
  }

  /* ─── Ledger table ────────────────────────── */

  .ledger-table {
    border-collapse: collapse;
    inline-size: 100%;

    th, td {
      border-block-end: 1px solid var(--color-border);
      padding-block: 0.5rem;
      text-align: start;
    }

    th {
      color: var(--color-ink-muted);
      font-size: 0.75rem;
      text-transform: uppercase;
    }
  }

  /* One class more than the cells' own rule, which aligns them to the start. */
  .ledger-table .ledger-table__amount {
    font-variant-numeric: tabular-nums;
    text-align: end;
  }

  /* ─── Killswitch ──────────────────────────── */

  .switches {
    display: grid;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
  }

  .switch {
    align-items: center;
    background: var(--color-negative-tint);
    border-radius: var(--radius-sm);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.625rem 0.875rem;
  }

  .switch__about {
    display: grid;
    min-inline-size: 0;
  }

  .switch__meta {
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
  }

  .switches__empty {
    color: var(--color-ink-muted);
  }

  .halt-form {
    border-block-start: 1px dashed var(--color-border);
    display: grid;
    gap: 0.75rem;
    padding-block-start: 1rem;
  }
}