/* The look of every page in the project. A rule is said of the element it is
   about, and a class only names what one page does differently. */

body {
  margin: 0;
  padding: 14px 16px 40px;
  background: #fff;
  font: 16px system-ui;
  color: #222;
}

main {
    max-width: 56em;
    margin: 0 auto;
}

h2 {
  margin: 22px 0 6px;
  color: #444;
}

p {
  max-width: 46em;
}

a {
  color: #36c;
}

code {
  font-family: ui-monospace, monospace;
}

/* A line under a name or a heading, saying which level is drawn. */
small {
  display: block;
  font-size: inherit;
  font-weight: 400;
  opacity: 0.7;
}

nav {
  margin: 0 0 12px;
  font-size: 12px;
}

nav a {
  margin-right: 14px;
}

/* The current page marks where the reader is, so it is not styled as a link. */
nav [aria-current] {
  color: #222;
  font-weight: 600;
  text-decoration: none;
}

/* A drawing is named under it, and drawings of one kind stand in a row on one
   line, so their size tells one from the next. */
figure {
  display: inline-block;
  vertical-align: bottom;
  margin: 0 14px 8px 0;
}

figcaption {
  padding-top: 5px;
  font-size: 11px;
  color: #666;
}

/* A drawing is outlined, so the room a part has at the canvas edge shows. */
img,
svg {
  display: block;
  outline: 1px solid #ddd;
}

/* A graphic wider than the page fills it instead, at its own proportions. */
figure.wide {
  display: block;
  margin-right: 0;
}

figure.wide img {
  width: 100%;
  height: auto;
}

/* A class says which level to draw, so the container query is switched off
   inside a drawing that carries one. */
.sz-md svg,
.sz-sm svg,
.sz-xs svg {
  container-type: normal;
}

table {
  border-collapse: collapse;
}

th {
  padding: 0 10px 6px 0;
  font-size: 11px;
  font-weight: 600;
  color: #666;
  text-align: left;
  vertical-align: bottom;
}

td {
  padding: 5px 10px 5px 0;
  vertical-align: bottom;
}

/* Beside the classic one */

/* A section is one colour of paper, edge to edge, so a drawing sits on it as it
   would on a page of that colour. */
.paper {
  margin: 22px -16px 0;
  padding: 16px;
  background: #fff;
  overflow-x: auto;
}

.paper h2 {
  margin-top: 0;
}

/* The paper is the subject here, so nothing on it is outlined. */
.paper img,
.paper svg {
  outline: none;
}

/* The two rows face each other, so a size meets its counterpart across the
   line between them. */
.paper tbody tr:last-child > * {
  vertical-align: top;
}

.paper.dark {
  background: #000;
  color: #ddd;
}

.paper.dark h2,
.paper.dark th {
  color: #bbb;
}

/* The icon */

/* The Material grid, laid over a drawing. Every measure is a fraction of the 24
   canvas, so the grid holds at any size. The box must hold the drawing and
   nothing else for those fractions to land. */
.grid {
  position: relative;
  display: inline-block;
}

.grid::before,
.grid::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

/* The live area, 2 in from every side: nothing but a pencil may leave it. */
.grid::before {
  inset: 8.3333%;
  outline: 1px solid #e0208a;
}

/* Where Material's two keylines cross, 4 in from every side. */
.grid::after {
  inset: 16.6667%;
  outline: 1px solid #00a0e0;
}

/* The apple touch icon */

/* The squircle iOS masks a touch icon with, laid over the tile. The radius is a
   fraction of the tile, so it holds at any size, and the box must hold the
   tile and nothing else for that fraction to land.

   Apple's shape is a superellipse, which corner-shape draws. Where a browser
   lacks it the same radius rounds the corners a shade harder, which sits inside
   the mask rather than outside it. */
.squircle {
  position: relative;
  display: inline-block;
}

.squircle::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid #e0208a;
  border-radius: 22.37%;
  corner-shape: squircle;
}

/* The colour matrices that stand for one kind of colour blindness live in the
   page as SVG filters, because CSS has no matrix of its own. The element that
   holds them draws nothing. */
.filters {
  position: absolute;
  width: 0;
  height: 0;
}

.deuteranopia {
  filter: url(#deuteranopia);
}

.protanopia {
  filter: url(#protanopia);
}

.tritanopia {
  filter: url(#tritanopia);
}