/* Layer order is repeated in every file: browsers use the first declaration they see, and files load alphabetically. */
@layer tokens, base, components, pages;

@layer pages {
  .admin { padding-block: var(--space-md) var(--space-xl); max-width: 64rem; }
  .admin-nav { max-width: 64rem; }
  .admin-nav nav { display: flex; gap: 1.25rem; font-size: var(--text-sm); }
  .admin__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1rem; }
  .admin__periods { display: flex; gap: 1rem; font-size: var(--text-sm); }
  .admin__periods .is-active { font-weight: 600; text-decoration: none; color: var(--ink); }
  .admin__search { display: flex; gap: 0.5rem; }
  .admin__search .field__input { flex: 1; }
  .admin .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
}