@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }

  body {
    background: var(--color-canvas);
    color: var(--color-ink);
    font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  }

  /* Plain links read as text with a quiet underline; components restyle them in later layers. */
  a {
    color: var(--color-ink);
    text-decoration-color: color-mix(in oklch, var(--color-ink) 35%, transparent);
    text-underline-offset: 2px;

    &:hover {
      color: var(--color-primary);
      text-decoration-color: currentColor;
    }
  }

  /* No focus ring on what's clicked: the designer is worked by keys, so the browser counts the last click's
     button as keyboard-focused and ringed it until the next click. Components light theirs up instead where a
     keyboard reaches them (.page-nav__link, .workspaces__tab); fields show focus by their background, ticks keep
     their own ring. */
  :is(a, button, summary):focus-visible {
    outline: none;
  }

  input[type="range"] {
    accent-color: var(--color-primary);
  }

  /* Checkboxes and radios drawn like the fields: a sunken box (a radio round) with a hairline edge, filled with
     the primary colour when checked — a checkbox ticked, a radio with a dot; the focus ring stays for the
     keyboard. */
  input:is([type="checkbox"], [type="radio"]) {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    appearance: none;
    cursor: pointer;
    background: var(--color-surface-sunken) center / 14px no-repeat;
    border: var(--hairline) solid var(--color-edge);
    border-radius: 4px;

    &:hover {
      border-color: var(--color-ink-muted);
    }

    &:checked {
      background-color: var(--color-primary);
      background-image: var(--icon-check);
      border-color: var(--color-primary);
    }

    &[type="radio"] {
      border-radius: 50%;
    }

    &[type="radio"]:checked {
      background-image: radial-gradient(circle, var(--color-on-primary) 0 3px, transparent 3.5px);
      background-size: auto;
    }

    &:focus-visible {
      outline: 2px solid color-mix(in oklch, var(--color-primary) 50%, transparent);
      outline-offset: 1px;
    }
  }

  /* Every select's arrow: a small solid triangle like the menus' ▾ (two right triangles side by side), not the
     system's chevron. Components set its box with background-color, so the image stays, and leave room for it
     on the right. */
  select {
    appearance: none;
    background-image:
      linear-gradient(45deg, transparent 50%, var(--color-ink-muted) 50%),
      linear-gradient(135deg, var(--color-ink-muted) 50%, transparent 50%);
    background-position: right 13px center, right 8px center;
    background-size: 5px 5px;
    background-repeat: no-repeat;
  }

  /* A number field's up and down as an addon at its end (Bootstrap's input group): the field's full height, a
     rule on its left, two small solid triangles like the select's. The system's spin button stays (a click on
     its upper half steps up, the lower down), drawn over, so the triangles stack; its margins reach over the
     field's padding to its border, which the field's styles give as --spin-pad-y / -x. Firefox's can't be drawn:
     it has none (the arrow keys still step). */
  input[type="number"] {
    --spin-ink: var(--color-ink-muted);
    -moz-appearance: textfield;

    &:hover {
      --spin-ink: var(--color-ink);
    }

    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
      opacity: 1; /* the browser shows it only under the pointer or while focused */
      align-self: stretch;
      width: 22px;
      height: auto;
      margin: calc(-1 * var(--spin-pad-y, 0px)) calc(-1 * var(--spin-pad-x, 0px)) calc(-1 * var(--spin-pad-y, 0px)) 8px;
      cursor: pointer;
      border-left: var(--hairline) solid var(--color-line);
      background-image:
        linear-gradient(135deg, transparent 50%, var(--spin-ink) 50%),
        linear-gradient(45deg, var(--spin-ink) 50%, transparent 50%),
        linear-gradient(45deg, transparent 50%, var(--spin-ink) 50%),
        linear-gradient(135deg, var(--spin-ink) 50%, transparent 50%);
      background-position:
        6px calc(50% - 4px), 11px calc(50% - 4px),
        6px calc(50% + 4px), 11px calc(50% + 4px);
      background-size: 5px 5px;
      background-repeat: no-repeat;
    }
  }

  /* A keyboard key, wherever one is named (hints, the changelog, the toolbar, buttons): a small key cap
     drawn from the text's own colour, so it reads on muted copy and on a pressed button alike. Inline,
     so its border never makes a line taller. */
  kbd {
    padding: 0 0.35em;
    font: 600 0.85em/1 ui-monospace, monospace;
    /* in a flex row (a tool, a toggle) it's a box: kept short */
    color: inherit;
    white-space: nowrap;
    background: color-mix(in oklch, currentColor 10%, transparent);
    border: 1px solid color-mix(in oklch, currentColor 30%, transparent);
    border-bottom-width: 2px;
    border-radius: 4px;
  }

  :is(button, a)>kbd {
    margin-left: 4px;
  }

  /* A modifier drawn in a key cap (ApplicationHelper#key_cap): as tall as the letters beside it. */
  .key-glyph {
    width: 1.05em;
    height: 1.05em;
    vertical-align: -0.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linejoin: round;
  }
}