/* Fonts, reset, element defaults and the few utilities every page uses.
   The layouts load tokens.css, base.css, components.css, layout.css, in that
   order. */

/* Fonts, self hosted with their OFL licences next to them in ../fonts/.
   Files referenced from CSS cannot carry the ?v= parameter, so a changed font
   gets a new file name (.v2.woff2) and this file changes with it. The two
   layouts preload the latin files of Inter and Instrument Sans under exactly
   these URLs; a preload that differs by one character downloads twice.

   Each family is split by unicode-range as Google Fonts serves it: the
   latin-ext file is fetched only when a page contains such a character, a
   name with a Polish or Czech letter for example. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-wght.v1.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-ext-wght.v1.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/instrument-sans-latin-wght.v1.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/instrument-sans-latin-ext-wght.v1.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Latin only: the mono face shows identifiers, request ids and links, which
   are ASCII. */
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-latin-wght.v1.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol,
fieldset, legend {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* A tap on iOS otherwise flashes a grey box over every link. The focus
       and active states below replace it. */
    -webkit-tap-highlight-color: transparent;
    /* Controls the browser draws itself, a range or a progress bar for
       example, in black and white too instead of the system blue. */
    accent-color: var(--color-primary);
}

body {
    min-height: 100vh;
    min-height: 100svh;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background: var(--color-canvas);
}

/* The display face is the title's at the top of a page or a window, the
   <h1> and the few that stand in its place there; every title inside, a
   card's or a section's, is in the text face, as the figures are. (D102) */
h1, h2, h3, h4 {
    font-family: var(--font-sans);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: -0.011em;
    color: var(--color-text);
    /* No single word stranded on a heading's last line. */
    text-wrap: balance;
}

h1 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}

p {
    text-wrap: pretty;
}

ul[class],
ol[class] {
    list-style: none;
}

img,
svg {
    display: block;
    max-width: 100%;
}

table {
    border-collapse: collapse;
    width: 100%;
}

/* Form elements do not inherit type by default, and Safari falls back to its
   own interface font without this. */
input,
button,
select,
textarea {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}

button {
    cursor: pointer;
}

/* A fieldset is shrink wrapped to its widest content by default, which lets a
   long option push a form wider than a 360 pixel phone. */
fieldset {
    border: 0;
    min-width: 0;
}

a {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-color: var(--color-border-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-color var(--duration-fast) var(--ease-in-out);
}

@media (hover: hover) {
    a:hover {
        text-decoration-color: currentColor;
    }
}

strong,
b {
    font-weight: var(--weight-semibold);
}

code,
kbd,
samp {
    font-family: var(--font-mono);
    font-size: 0.92em;
}

/* Only the background: selected text keeps its own colour, which the
   translucent grey leaves readable on every surface, a black button's
   included. */
::selection {
    background: var(--color-selection);
}

[hidden] {
    display: none !important;
}

/* Focus. Every interactive element that has no ring of its own gets a
   black outline in light mode and a white one in dark mode, for the keyboard
   only. Inputs mark focus with their border and a soft halo in
   components.css instead, because an outline there would sit on top of the
   border rather than around it. */
:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

/* After a click or a tap no ring at all, wherever a script or the browser
   put the focus: app.js marks the root while the pointer was the last thing
   used (data-input="pointer"), and any key takes the mark away. It covers
   the rings drawn on the focused element, inside it and around it (:has),
   so it must win over every component's ring, hence !important. A field's
   border and halo while typing are no ring and stay. */
:root[data-input="pointer"] :focus-visible,
:root[data-input="pointer"] :focus-visible *,
:root[data-input="pointer"] :has(:focus-visible) {
    outline: none !important;
}

/* Elements focused only by script, the main region after the skip link or
   the error summary on load, need no ring: nothing can be done with them. */
[tabindex="-1"]:focus {
    outline: none;
}

/* Nor what a click focused without a ring of the keyboard's: Chrome rings
   such a part of a drawing (a country, a cell) by a rule of its own for
   :focus, a square around it, before any mark is set. (D102) */
:focus:not(:focus-visible) {
    outline: none;
}

.skip-link {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 1000;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: var(--weight-medium);
    text-decoration: none;
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
}

/* Utilities. Deliberately few: the components carry their own spacing, and a
   page that needs many utilities is missing a component. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.stack-sm {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-subtle {
    color: var(--color-text-subtle);
}

.mono {
    font-family: var(--font-mono);
    font-size: 0.92em;
}

.nowrap {
    white-space: nowrap;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Icons are inline SVG from Icons.php, sized by the text around them unless a
   component says otherwise. */
.icon {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
}

.icon-sm {
    width: 1rem;
    height: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}