@layer components {
  .admin,
  .admin-sign-in {
    padding: var(--space-l) var(--gutter) var(--space-3xl);
  }

  .admin-sign-in {
    max-inline-size: 28rem;
    margin-inline: auto;
  }

  .admin h1,
  .admin-sign-in h1 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    margin-block-end: var(--space-m);
  }

  .admin-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-inline-l);
    padding-block-end: var(--space-s);
    margin-block-end: var(--space-l);
    border-block-end: 1px solid var(--card-border);
    font-size: var(--text-s);
  }

  .admin-nav ul {
    display: flex;
    gap: var(--space-inline-l);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .admin-nav form { margin-inline-start: auto; }

  .admin-nav a,
  .admin-tabs a {
    color: var(--ink-soft);
    padding-block: var(--space-2xs);
    border-block-end: 2px solid transparent;
  }

  .admin-nav a[aria-current],
  .admin-tabs a[aria-current] {
    color: var(--ink);
    font-weight: 700;
    border-block-end-color: var(--blip);
  }

  .admin-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs) var(--space-inline-m);
    margin-block-end: var(--space-m);
  }

  .admin-header h1 { margin-block-end: 0; margin-inline-end: auto; }

  .admin-flash {
    padding: var(--space-xs) var(--space-inline-m);
    margin-block: 0 var(--space-m);
    border-radius: 0.5ch;
    background: var(--sky-soft);
    list-style: none;
  }

  .admin-flash--alert { background: var(--blip-soft); color: var(--blip-text); }

  .button--danger { background: var(--blip-text); border-color: var(--blip-text); color: var(--paper); }
  .button--danger:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

  .admin-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xs);
    max-inline-size: 28rem;
    margin-block-end: var(--space-l);
  }

  .admin-form label { font-size: var(--text-s); color: var(--ink-soft); margin-block-start: var(--space-xs); }

  .admin-form :is(input:not([type="submit"]), select) {
    padding: var(--space-2xs) var(--space-inline-xs);
    border: 1px solid var(--card-border);
    border-radius: 0.5ch;
    background: var(--card-bg);
  }

  .admin-form .field_with_errors { display: contents; }

  .admin-form [type="submit"] { justify-self: start; margin-block-start: var(--space-s); }

  .admin-details {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2xs) var(--space-inline-l);
    margin-block: 0 var(--space-l);
  }

  .admin-details dt { color: var(--quiet-text); font-size: var(--text-s); }
  .admin-details dd { margin: 0; }

  .admin-details--inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-inline-2xl);
  }
}