/*
 * Foundation for the knobs download page: the faces and a small reset.
 * Colours, type stacks, geometry and motion are tokens, in tokens.css; the
 * page's layout and components are in styles.css.
 *
 * Geometry: the mark is cut straight and only its circles are round. So on
 * the page every rectangle (button, panel, well, tag, frame, focus ring)
 * takes var(--radius) and every round thing (step node, dot, handle) is a
 * true circle.
 */

/* Faces: Radio Canada (CBC/Radio-Canada, 2.104, the hinted static files,
   subset to Latin-1, no Reserved Font Name) and Source Code Pro (Adobe
   2.042, unmodified). Radio Canada Condensed is the same family's narrow
   width, for the headline and the section titles. Every face
   takes Radio Canada's line metrics, so mono sits in prose without moving
   the line. */
@font-face {
  font-family: "Radio Canada";
  src: url("fonts/RadioCanada-Regular-Latin1.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  ascent-override: 94.5%; descent-override: 25.5%; line-gap-override: 0%;
}
@font-face {
  font-family: "Radio Canada";
  src: url("fonts/RadioCanada-Medium-Latin1.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  ascent-override: 94.5%; descent-override: 25.5%; line-gap-override: 0%;
}
@font-face {
  font-family: "Radio Canada";
  src: url("fonts/RadioCanada-SemiBold-Latin1.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  ascent-override: 94.5%; descent-override: 25.5%; line-gap-override: 0%;
}
@font-face {
  font-family: "Radio Canada Condensed";
  src: url("fonts/RadioCanadaCondensed-Bold-Latin1.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  ascent-override: 94.5%; descent-override: 25.5%; line-gap-override: 0%;
}
@font-face {
  font-family: "Source Code Pro";
  src: url("fonts/SourceCodePro-Regular.ttf.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  ascent-override: 94.5%; descent-override: 25.5%; line-gap-override: 0%;
}
/* Arial, scaled to Radio Canada's width and line metrics. */
@font-face {
  font-family: "Radio Canada Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 100 500;
  size-adjust: 102.91%; ascent-override: 91.83%; descent-override: 24.78%; line-gap-override: 0%;
}
@font-face {
  font-family: "Radio Canada Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 600 900;
  size-adjust: 98.84%; ascent-override: 95.61%; descent-override: 25.8%; line-gap-override: 0%;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 100%;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-color: var(--line-strong) var(--ground);
}
body { margin: 0; min-height: 100vh; }
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, pre { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
code, kbd, samp, pre, .mono { font-family: var(--font-mono); font-variant-ligatures: none; }
::selection { background: var(--selection); color: var(--text); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nowrap { white-space: nowrap; }
/* Kept on one line where it fits, and wrapped inside itself only where it
   can't (very large text in a narrow column). Not for words in a link: a
   link's underline doesn't run through an inline block. */
.keep { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* While the scheme switches, nothing fades: every colour takes the new
   scheme's in the same frame, rather than links and buttons easing over
   from the old one (theme.js). */
.is-switching *, .is-switching *::before, .is-switching *::after { transition: none !important; }