/* Elements as every page shows them, before any component: one font, one text colour, one link colour, one heading
   ramp. Only tokens (tokens.css). */

*, *::before, *::after { box-sizing: border-box; }
/* the scrollbar's gutter is always kept, so a short page and a long one put the content on the same left edge */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--s-3); scrollbar-gutter: stable; }
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    font: var(--t-body)/var(--lh) var(--c-font);
    color: var(--c-text);
    background: var(--c-page);
}
main { flex: 1; }
::selection { background: var(--c-selection); color: var(--c-strong); }
:focus-visible { outline: var(--line-thick) solid var(--c-focus); outline-offset: var(--line-thick); }

a { color: var(--c-link); text-decoration: none; }
a:hover { color: var(--c-link-hover); text-decoration: underline; }

h1, h2, h3, h4 { font-family: inherit; font-weight: var(--w-medium); line-height: var(--lh-heading); color: inherit; }
h1 { margin: var(--s-4) 0 var(--s-2); font-size: var(--t-h1); font-weight: var(--w-bold); }
h2 { margin: var(--s-4) 0 var(--s-2); font-size: var(--t-h2); }
h3 { margin: var(--s-4) 0 var(--s-2); font-size: var(--t-h3); }
h4 { margin: var(--s-2) 0; font-size: var(--t-h4); }
p { margin: 0 0 var(--s-2); }
ul, ol { margin: 0 0 var(--s-2); padding-left: var(--s-5); }
hr { margin: var(--s-4) 0; border: 0; border-top: var(--line) solid var(--c-rule-light); }
code { padding: 0 var(--s-1); font-family: var(--c-mono); background: var(--c-surface); border-radius: var(--radius); }
details > summary { cursor: pointer; }

/* sprites are pixel art: never smoothed, never shrunk to fit */
img { max-width: none; image-rendering: pixelated; }

/* screen-reader-only text (sprite column headers, form labels the layout shows another way) */
.visually-hidden { position: absolute; width: var(--line); height: var(--line); margin: calc(-1 * var(--line)); padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s-3); top: calc(-1 * var(--s-6)); z-index: 10; padding: var(--s-1) var(--s-3); color: var(--c-white); background: var(--c-link); }
.skip:focus { top: var(--s-3); }

/* text helpers */
.lead, .lede { margin-bottom: var(--s-4); font-size: var(--t-lead); }
/* fine print is the body size in grey: never smaller than the text it sits under */
.text-muted, .fine { color: var(--c-muted); }
.small { font-size: var(--t-small); }
.text-center { text-align: center; }
.num, .tab { font-variant-numeric: tabular-nums; }