/*
 * Reset.
 *
 * Not a wholesale "* { all: unset }" reset. Browser defaults for headings, lists and form controls carry
 * accessibility behaviour and semantics that are expensive to rebuild, so this only removes the defaults
 * that fight a design system: inconsistent box sizing, margins nobody asked for, and images that overflow
 * their container.
 *
 * Everything here is a decision about correctness rather than taste.
 */

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

/* Margins are set deliberately by typography.css and by components; inherited ones cause layout that
   works by accident. */
body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

/*
 * Honour the reader's request for less motion.
 *
 * `!important` is used here on purpose, and it is one of only two places in this codebase where it is:
 * this rule has to beat any component that animates, including one written later by someone who forgot.
 * `0.01ms` rather than `0` so that `transitionend` and `animationend` still fire and JavaScript waiting
 * on them does not hang.
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

html {
    /* Percentage rather than a pixel size, so the reader's own font-size setting is respected. */
    font-size: 100%;

    /* Anchors and the skip link land below the sticky header instead of underneath it. */
    scroll-padding-top: var(--space-7);
}

body {
    min-height: 100vh;
    background-color: var(--colour-surface-sunken);
    color: var(--colour-ink);
}

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Form controls do not inherit typography by default, which is how a select ends up in a different face
   from the label next to it. */
input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

textarea {
    /* Horizontal resizing breaks the layout and helps nobody; vertical is genuinely useful. */
    resize: vertical;
}

/* Long unbroken strings — a pasted URL, a ULID — must wrap rather than force the page sideways. */
p,
li,
dd,
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    margin-top: var(--space-2);
}

/*
 * Focus.
 *
 * The default outline is removed only where a visible replacement is guaranteed. `:focus-visible` gives
 * the ring to keyboard users without putting it on every mouse click, and the fallback below keeps the
 * browser's own outline for engines that do not support it — so no route through this file ends with an
 * invisible focus indicator (WCAG 2.4.7).
 */
:focus-visible {
    outline: var(--focus-width) solid var(--colour-focus);
    outline-offset: var(--focus-offset);
}

@supports selector(:focus-visible) {
    :focus:not(:focus-visible) {
        outline: none;
    }
}

/* Target size and hit area: a control should be at least 24px in both directions (WCAG 2.5.8). */
button,
[type="button"],
[type="submit"],
[role="button"] {
    min-height: 1.5rem;
    min-width: 1.5rem;
    cursor: pointer;
}

/* Tables are used for data, never for layout; these are the defaults data tables want. */
table {
    border-collapse: collapse;
    width: 100%;
}

/* Hide anything the server marked hidden, whatever a component's display rule says. The second and last
   `!important` in this codebase: `[hidden]` failing to hide is a correctness bug, not a style
   preference, and JavaScript relies on it. */
[hidden] {
    display: none !important;
}