@layer base {
  body {
    font-family: var(--font-sans);
    font-size: var(--text-normal);
    color: var(--color-text);
    background: var(--color-bg);
  }

  h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; }
  h1 { font-size: var(--text-x-large); }
  h2 { font-size: var(--text-large); }
  h3 { font-size: var(--text-medium); font-weight: 600; }
  h4 { font-size: var(--text-normal); font-weight: 600; }

  a {
    color: var(--color-link);
    text-underline-offset: 0.2em;

    &:hover { color: var(--color-link-hover); }
  }

  /* A text link's underline draws itself in from the left on hover (kirupa.com). Links with a
     class are buttons or navigation, and keep their own. */
  a:not([class]) {
    text-decoration: none;
    background:
      linear-gradient(currentColor 0 0) left bottom / 0% 2px no-repeat,
      linear-gradient(color-mix(in srgb, currentColor 35%, transparent) 0 0) left bottom / 100% 1px no-repeat;
    transition: background-size var(--duration-flip) var(--ease-out-back);

    &:hover { background-size: 100% 2px, 100% 1px; }
  }

  strong, b { font-weight: 700; }
  small { font-size: var(--text-small); color: var(--color-subtle); }

  /* The logo's descender, a half ring, hangs under the start of every divider, as it hangs under
     the bowl in the isotype: the same gap, 10.4 % of its width (12.57 of 120.45 in brand/). The
     line is as thick as its stroke, the logo's own weight, and the same violet. */
  hr {
    --descender: 1.5rem;
    --stroke: calc(var(--descender) * var(--ring-ratio));
    --gap: calc(var(--descender) * 0.104);

    position: relative;
    overflow: visible;
    border: 0;
    border-block-start: var(--stroke) solid var(--color-link);
    margin-block: var(--block-space) calc(var(--block-space) + var(--gap) + var(--descender) / 2);

    &::after {
      content: "";
      position: absolute;
      inset-block-start: var(--gap);
      inset-inline-start: 0.375rem; /* in from the line's end, by eye */
      inline-size: var(--descender);
      aspect-ratio: 2;
      border: var(--stroke) solid var(--color-link);
      border-block-start: 0;
      border-radius: 0 0 50% 50% / 0 0 100% 100%;
    }
  }

  ul, ol { padding-inline-start: var(--inline-space-double); }

  /* Tables in the editorial voice (2026-10-11): no card, rules between rows, the header small and
     grey and bold over the same rule. A row lights faintly under the pointer. */
  table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--text-small);
  }

  th, td {
    padding: 0.875rem var(--inline-space-double) 0.875rem 0;
    border-block-end: 1px solid var(--color-border);
    text-align: start;
    vertical-align: middle;
  }

  th {
    font-size: var(--text-small);
    font-weight: 700;
    color: var(--color-subtle);
  }

  tbody tr { transition: background var(--transition); }
  tbody tr:hover { background: color-mix(in srgb, var(--color-link-tint) 60%, transparent); }

  /* On a phone a wide table scrolls sideways instead of being cut off. Positioned, so absolutely
     positioned cells' content (a visually hidden heading) scrolls with it instead of widening the
     page: a scroller only clips what it is the containing block of. */
  @media (max-width: 40rem) {
    table { display: block; overflow-x: auto; position: relative; }
    th, td { white-space: nowrap; }
  }

  label, legend { font-size: var(--text-small); font-weight: 600; }

  fieldset {
    border: 0;
    padding: 0;
  }

  input:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=hidden]), select, textarea {
    inline-size: 100%;
    min-block-size: var(--touch-target);
    padding: var(--block-space-half) var(--inline-space);
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);

    &:hover { border-color: var(--color-subtle); }
    /* Figma, Text field focus: a violet edge. The global ring still shows for the keyboard. */
    /* The bottom edge thickens into the logo's descender: a U under the field. */
    &:focus {
      border-color: var(--color-link);
      border-end-start-radius: var(--radius-large);
      border-end-end-radius: var(--radius-large);
      box-shadow: 0 0 0 1px var(--color-link), 0 0.1875rem 0 0 var(--color-link);
    }
    &:focus-visible { outline: none; } /* the 2px violet edge is the visible focus (5.5:1) */
    &[aria-invalid=true] { border-color: var(--color-negative); box-shadow: 0 0 0 1px var(--color-negative); }
    /* The browser paints autofilled fields its own blue and ignores background; an inset shadow
       covers it. Focus and invalid repeat their edges, as box-shadow does not add up. */
    &:autofill {
      --autofill-fill: inset 0 0 0 100vmax var(--color-bg-raised);

      box-shadow: var(--autofill-fill);
      -webkit-text-fill-color: var(--color-text);
    }
    &:autofill:focus { box-shadow: var(--autofill-fill), 0 0 0 1px var(--color-link), 0 0.1875rem 0 0 var(--color-link); }
    &:autofill[aria-invalid=true] { box-shadow: var(--autofill-fill), 0 0 0 1px var(--color-negative); }
    &:disabled, &[readonly] {
      color: var(--color-subtle);
      background: color-mix(in srgb, var(--color-border) 40%, var(--color-bg-raised)); /* Figma, Readonly: a grey fill */
    }
  }

  ::placeholder { color: var(--color-subtle); opacity: 1; }

  /* A plain file field's button reads as our secondary button; the "no file" text is the browser's. */
  ::file-selector-button {
    margin-inline-end: var(--inline-space-double);
    padding: 0.375rem var(--inline-space-double);
    font: inherit;
    font-size: var(--text-small);
    font-weight: 700;
    color: var(--color-link);
    background: var(--color-bg-raised);
    border: 1px solid var(--color-link);
    border-radius: var(--radius);
    cursor: pointer;
  }

  input[type=checkbox], input[type=radio] {
    flex: none;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    accent-color: var(--color-link);
  }

  /* Figma, Switch (Frame 8): a native checkbox with role=switch, drawn as a pill. */
  input[type=checkbox][role=switch] {
    appearance: none;
    inline-size: 2.75rem;
    block-size: 1.5rem;
    background: var(--color-border-strong);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--transition);

    &::before {
      content: "";
      display: block;
      inline-size: 1.125rem;
      aspect-ratio: 1;
      margin: 0.1875rem;
      background: var(--color-bg-raised);
      border-radius: 50%;
      transition: translate var(--transition);
    }

    &:checked { background: var(--color-link); }
    &:checked::before { translate: 1.25rem 0; }
  }

  button, input[type=submit], input[type=button] {
    cursor: pointer;

    &:disabled { cursor: not-allowed; }
  }

  :focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
  }

  ::selection { background: var(--color-link-tint); color: var(--color-text); }
}