/*
 * Element defaults only: no class selectors live here.
 *
 * Active Admin clears its own stylesheets and renders plain markup, so these
 * element rules are what give the Backoffice its typography, tables and forms.
 * Keeping this layer class-free means it styles generated markup we do not own
 * without needing to know its class names.
 */

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    font-family: var(--font-sans);
    font-size: 100%;
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background-color: var(--surface-page);
    -webkit-text-size-adjust: 100%;
  }

  body {
    margin: 0;
  }

  /* Headings set their own rhythm; margins collapse predictably. */
  h1,
  h2,
  h3,
  h4 {
    margin: 0 0 var(--space-3);
    line-height: var(--leading-tight);
    font-weight: 600;
    text-wrap: balance;
  }

  h1 {
    font-size: var(--text-2xl);
  }

  h2 {
    font-size: var(--text-xl);
  }

  h3 {
    font-size: var(--text-lg);
  }

  h4 {
    font-size: var(--text-base);
  }

  p,
  ul,
  ol,
  dl {
    margin: 0 0 var(--space-4);
  }

  /* Only prose gets a reading measure. Lists and definition lists are also used
     for layout, where a measure would collapse grids into a single column. */
  p {
    max-width: var(--measure);
  }

  /* Lists marked up as lists purely for semantics carry no marker or indent. */
  :where(ul, ol)[role="list"] {
    list-style: none;
    padding-inline-start: 0;
  }

  :is(p, li) > code,
  pre {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
  }

  a {
    color: var(--accent-strong);
    text-decoration-color: var(--colour-accent-200);
    text-underline-offset: 0.15em;
  }

  a:hover {
    text-decoration-color: currentcolor;
  }

  /* One visible focus treatment everywhere, including generated markup. */
  :focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  img,
  svg {
    max-width: 100%;
    height: auto;
  }

  hr {
    border: 0;
    border-top: 1px solid var(--border-subtle);
    margin: var(--space-5) 0;
  }

  /* Forms inherit type rather than falling back to browser defaults. */
  input,
  select,
  textarea,
  button {
    font: inherit;
    color: inherit;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
  select,
  textarea {
    padding: var(--space-2) var(--space-3);
    background-color: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    max-width: 100%;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):hover,
  select:hover,
  textarea:hover {
    border-color: var(--colour-neutral-500);
  }

  /* Default submit affordance for generated markup, such as Active Admin forms.
     The .button component overrides this from a later layer, so modifiers win
     without needing to out-specify these element selectors. */
  input[type="submit"],
  button[type="submit"] {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    background-color: var(--accent);
    color: var(--text-on-accent);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
  }

  input[type="submit"]:hover,
  button[type="submit"]:hover {
    background-color: var(--accent-strong);
    border-color: var(--accent-strong);
  }

  label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
  }

  /* Checkbox and radio labels sit beside their control, not above it. Covers
     Devise and Active Admin markup, which emit the input before the label. */
  :is(input[type="checkbox"], input[type="radio"]) + label {
    display: inline-block;
    margin-block-end: 0;
    margin-inline-start: var(--space-2);
    font-weight: 400;
    color: var(--text-primary);
  }

  fieldset {
    margin: 0 0 var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
  }

  legend {
    padding: 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
  }

  caption {
    text-align: left;
    padding-bottom: var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-sm);
  }

  th,
  td {
    padding: var(--space-3);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border-subtle);
  }

  thead th {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    border-bottom-color: var(--border-strong);
    white-space: nowrap;
  }

  tbody tr:last-child :is(th, td) {
    border-bottom: 0;
  }

  /* Row headings act as labels in the metric comparison tables. */
  tbody th {
    font-weight: 500;
    color: var(--text-secondary);
  }
}