/*
 * components.css: reusable pieces, one block per component, BEM names.
 * Every colour is a theme token; sizes use the spacing and type scales.
 *
 * Contents: skip link, buttons, notices, forms, tables, status, page head,
 * sections, empty states, filters.
 */
@layer components {
  /* Skip link: first focusable element on every page. */
  .skip-link {
    position: absolute;
    inset-inline-start: var(--space-4);
    inset-block-start: -10rem;
    z-index: var(--z-toast);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    color: var(--color-link);
    border: 2px solid var(--color-focus);
    border-radius: var(--radius-1);
  }
  .skip-link:focus { inset-block-start: var(--space-4); }

  /* Buttons: a <button> for actions, an <a class="btn"> for navigation that looks like one. */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: var(--tap);
    min-inline-size: var(--tap);
    padding: var(--space-2) var(--space-5);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-1);
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
  }
  .btn:hover { border-color: var(--color-text); }
  .btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
  .btn--primary:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); }
  .btn--on-dark { background: transparent; color: var(--color-masthead-ink); border-color: var(--color-masthead-muted); }
  .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }

  /* Notices: a one-time message or a refusal with its reason, where the person is. */
  .notice {
    display: flex;
    gap: var(--space-3);
    margin-block-end: var(--space-6);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-inline-start-width: 0.35rem;
    border-radius: var(--radius-1);
    background: var(--color-surface);
  }
  .notice p { margin: 0; }
  .notice--success { border-inline-start-color: var(--color-success); background: var(--color-success-wash); }
  .notice--info { border-inline-start-color: var(--color-info); background: var(--color-info-wash); }
  .notice--warning { border-inline-start-color: var(--color-warning); background: var(--color-warning-wash); }
  .notice--error { border-inline-start-color: var(--color-danger); background: var(--color-danger-wash); }

  /* Forms. */
  .form { display: grid; gap: var(--space-6); max-inline-size: 44rem; }
  .field { display: grid; gap: var(--space-1); border: 0; margin: 0; padding: 0; min-inline-size: 0; }
  .field__label { font-weight: 600; padding: 0; }
  .field__hint { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
  .field__error { margin: 0; color: var(--color-danger); font-weight: 600; }
  .input {
    inline-size: 100%;
    min-block-size: var(--tap);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-1);
    background: var(--color-surface);
    font-size: max(1rem, 16px); /* below 16px iOS Safari zooms the page on focus */
  }
  .input[aria-invalid="true"] { border-color: var(--color-danger); border-width: 2px; }
  .choices { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-block-start: var(--space-2); }
  .choice { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--tap); cursor: pointer; }
  .choice input { inline-size: 1.25rem; block-size: 1.25rem; accent-color: var(--color-accent); }
  .form__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

  /* Tables: data only; wide tables scroll inside their own wrapper. */
  .table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-1); background: var(--color-surface); }
  .table { inline-size: 100%; font-size: var(--text-sm); }
  .table th, .table td { padding: var(--space-3) var(--space-4); text-align: start; vertical-align: top; border-block-end: 1px solid var(--color-border); }
  .table thead th { background: var(--color-surface-2); font-weight: 600; white-space: nowrap; }
  .table tbody tr:last-child > * { border-block-end: 0; }
  .table tbody th { font-weight: 600; }
  .table--compact th, .table--compact td { padding: var(--space-2) var(--space-3); }

  /* Status: the word carries the meaning; the colour and the mark only reinforce it. */
  .status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.1rem var(--space-2);
    border-radius: var(--radius-1);
    font-weight: 600;
    font-size: var(--text-sm);
    white-space: nowrap;
  }
  .status::before { content: ""; inline-size: 0.55rem; block-size: 0.55rem; border: 2px solid currentColor; }
  .status--ok { color: var(--color-success); background: var(--color-success-wash); }
  .status--ok::before { border-radius: 50%; background: currentColor; }
  .status--bad { color: var(--color-danger); background: var(--color-danger-wash); }
  .status--bad::before { transform: rotate(45deg); }
  .status--wait { color: var(--color-warning); background: var(--color-warning-wash); }
  .status--wait::before { border-radius: 50%; }
  .status--info { color: var(--color-info); background: var(--color-info-wash); }

  /* Page head and sections. */
  .page-head { margin-block-end: var(--space-8); }
  .page-head__sub { color: var(--color-text-muted); font-size: var(--text-1); }
  .section { margin-block-end: var(--space-10); }
  .section--aside { padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-2); background: var(--color-surface); }
  .empty { padding: var(--space-6); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-1); color: var(--color-text-muted); }

  /* Filter bar above a list. */
  .filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-4); margin-block-end: var(--space-8); }
  .filters .field { min-inline-size: 11rem; flex: 1 1 11rem; }
  .filters__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

  .attribution { font-size: var(--text-sm); color: var(--color-text-muted); }

  @media (forced-colors: active) {
    .btn, .input, .status, .notice { border: 1px solid ButtonText; }
  }
}