/* base: the ground every theme stands on, loaded before the theme's own stylesheet. Elements
   only, styled through the shared design tokens, which each theme defines (see README, "One
   design system"); nothing here sets a colour, font or size of its own.

   Mobile first and fluid: no fixed widths, images never wider than their column, text that
   scales with the browser setting, touch targets of at least 24px (WCAG 2.5.8). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; hanging-punctuation: first last; }
body {
  margin: 0; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--color-bg); color: var(--color-text); font: var(--text-base)/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
main { flex: 1; }
img, svg, video, iframe { max-width: 100%; }
img { display: block; height: auto; }
h1, h2, h3, h4 { text-wrap: balance; overflow-wrap: break-word; }
p, li, dd, figcaption { text-wrap: pretty; }
:target { scroll-margin-top: var(--space-4); }
/* An image in a document: as wide as the text, or the share of it the author gave it in the Doc */
.prose figure { max-width: var(--width, 100%); }

/* Focus: a ring on whatever the keyboard reaches, never on a mouse click */
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* Hidden, but read out; the skip link appears on focus */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: var(--space-2); top: var(--space-2); z-index: 10; padding: var(--space-1) var(--space-2); background: var(--color-surface); color: var(--color-text); }

/* The notice: a line atop every page, when the theme has one (e.g. while the design is a proposal) */
.notice { margin: 0; padding: var(--space-1) var(--space-2); background: var(--color-text); color: var(--color-bg); font: var(--text-sm)/1.5 var(--font-ui, var(--font-body)); text-align: center; }
.notice a { margin-left: var(--space-1); font-weight: 600; color: inherit; }

.not-found { padding-block: var(--space-5); }

/* Motion only for those who have not asked for less (WCAG 2.3.3) */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* In forced colours (Windows high contrast), keep focus and the current page visible */
@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
  [aria-current] { text-decoration: underline; }
}