/* SPDX-License-Identifier: Apache-2.0 */
/* Open Aquarium Project website. Colours are the brand palette in branding/guidelines.md,
   plus one warm alert colour for a lamp that has lost contact. */

@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  /* Brand */
  --deep-water: #123b5a;
  --current: #2c7da0;
  --shallows: #8fd0e0;
  --surface: #4fcbd4;
  --water: #1b78a3;
  --depth: #125b80;
  --glass: #7fb3c8;
  --walls: #bfe0ec;

  /* Roles */
  --ink: var(--deep-water);
  --text: #26445a;
  --muted: #4f6b7f;
  --link: #19698f;
  --ground: #ffffff;
  --tint: #f2f8fb;
  --rule: #d4e6ee;
  --grid: #e2eff4;
  --alert: #e0782f;
  --off: #c9dce4;
  --off-dark: #2a5878;
  --on-deep: #ffffff;
  --on-deep-muted: #b9d4e2;

  --font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(16px, 4vw, 40px);
  --max: 1240px;
  --radius: 6px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* How much of the sticky header stays in view: all 77px of it on wide
     screens, only the page links' row on phones. */
  --header-pinned: 77px;

  color-scheme: light;
  scrollbar-color: var(--glass) var(--tint);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-pinned) + 1rem);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.6;
  font-feature-settings: "kern", "calt";
  caret-color: var(--water);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--surface);
  color: var(--deep-water);
}

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

h1,
h2,
h3 {
  color: var(--ink);
  font-weight: 800;
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: clamp(2.6rem, 1.5rem + 3.9vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(2rem, 1.35rem + 2.1vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
}

h3 {
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 700;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--link);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent);
  transition: text-decoration-color 150ms, color 150ms;
}

a:hover {
  color: var(--ink);
  text-decoration-color: var(--surface);
}

:focus-visible {
  outline: 3px solid var(--water);
  outline-offset: 3px;
  border-radius: 2px;
}

code {
  font-family: var(--mono);
  font-size: 0.86em;
  font-feature-settings: "tnum";
}

code {
  white-space: nowrap;
  color: var(--ink);
  background: var(--tint);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.05em 0.35em;
}

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  background: var(--deep-water);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  font-weight: 700;
}

.skip:focus {
  top: 12px;
}

.skip:hover {
  color: #fff;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Header */

.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--ground);
  position: sticky;
  top: 0;
  z-index: 5;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 76px;
}

.brand {
  display: block;
  flex: none;
}

.brand img {
  height: 40px;
  width: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
}

.nav a {
  color: var(--ink);
  font-weight: 650;
  font-size: 1rem;
  text-decoration: none;
  padding-block: 0.4rem;
  border-bottom: 3px solid transparent;
  transition: border-color 150ms;
}

.nav a:hover {
  border-bottom-color: var(--walls);
}

.nav a[aria-current="page"] {
  border-bottom-color: var(--water);
}

.nav .nav-github {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.45rem 0.8rem;
  transition: border-color 150ms, background-color 150ms;
}

.nav .nav-github:hover {
  border-color: var(--glass);
  background: var(--tint);
}

.icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}

@media (max-width: 760px) {
  :root {
    --header-pinned: 47px;
  }

  /* The logo row, with the GitHub icon beside it, scrolls away and the page
     links' row stays pinned, so the header never covers more than 47px of a
     phone's screen. */
  .site-header {
    top: calc(-0.85rem - 42px);
  }

  .site-header .wrap {
    position: relative;
    flex-wrap: wrap;
    gap: 0 1rem;
    padding-block: 0.85rem 0;
  }

  .nav {
    width: 100%;
    gap: min(1.5rem, 4.5vw);
  }

  /* Tall enough to tap, with the current page's underline resting on the
     header's bottom line. */
  .nav a {
    white-space: nowrap;
    font-size: 0.95rem;
    padding-block: 0.7rem 0.55rem;
  }

  /* The GitHub icon moves up beside the logo, so the three page links have
     their row to themselves, down to 320px. */
  .nav .nav-github {
    position: absolute;
    top: calc(0.85rem - 2px);
    right: var(--gutter);
    width: 44px;
    height: 44px;
    justify-content: center;
    padding: 0;
  }

  .nav .nav-github span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* On a short screen, such as a phone on its side, the header scrolls with the
   page instead of covering a fifth of it. */
@media (max-height: 480px) {
  :root {
    --header-pinned: 0px;
  }

  .site-header {
    position: relative;
    top: 0;
  }
}

/* Buttons */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.7rem 1.25rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--deep-water);
  background: var(--deep-water);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms, border-color 160ms, color 160ms;
}

.btn:hover {
  background: #0b2a42;
  border-color: #0b2a42;
  color: #fff;
}

.btn .arrow {
  transition: transform 220ms var(--ease-out);
}

.btn:hover .arrow {
  transform: translateX(3px);
}

.btn-quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--glass);
}

.btn-quiet:hover {
  background: var(--tint);
  border-color: var(--deep-water);
  color: var(--ink);
}

.on-deep .btn {
  background: #fff;
  border-color: #fff;
  color: var(--deep-water);
}

.on-deep .btn:hover {
  background: var(--shallows);
  border-color: var(--shallows);
}

.on-deep .btn-quiet {
  background: transparent;
  border-color: rgb(255 255 255 / 0.45);
  color: #fff;
}

.on-deep .btn-quiet:hover {
  background: rgb(255 255 255 / 0.08);
  border-color: #fff;
  color: #fff;
}

/* On phones, a pair of buttons stacks at full width instead of wrapping into
   two ragged rows. */
@media (max-width: 520px) {
  .actions {
    display: grid;
  }

  .actions .btn {
    justify-content: center;
  }
}

/* The isometric grid the drawings stand on. */

.grid-ground {
  position: relative;
  isolation: isolate;
}

.grid-ground::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='83.138' height='48'%3E%3Cpath fill='none' stroke='%23e2eff4' stroke-width='1' d='M0 0L83.138 48M0 48L83.138 0M0.5 0V48M41.569 0V48'/%3E%3C/svg%3E");
  background-size: 83.138px 48px;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 70% 45%, #000 35%, transparent 85%);
  mask-image: radial-gradient(ellipse 75% 85% at 70% 45%, #000 35%, transparent 85%);
  pointer-events: none;
}

/* Drawings */

.art {
  width: 100%;
  height: auto;
  overflow: visible;
}

.art text {
  font-family: var(--font);
}

.art .lamp {
  fill: var(--surface);
  transition: fill 300ms;
}

.art .lamp.off {
  fill: var(--off);
}

.art .on-dark .lamp.off {
  fill: var(--off-dark);
}

.art-callout text {
  font-family: var(--font);
}

/* The hero's continuous motion shows only once site.js turns it on. */
.art .ripples {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .art-hero .part,
  .art-rail .part,
  .art-shelf .part,
  .art-join .part {
    animation: settle 1100ms var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 110ms + 120ms);
  }

  .art-hero .callouts,
  .art-rail .callouts {
    animation: appear 600ms ease-out both;
    animation-delay: 1100ms;
  }

  /* Once the hero's parts land, the system comes alive, once: the bus
     connects, the lamps light in order along it, and the refugium light
     comes on. It all ends within five
     seconds of loading. */
  .art-hero .leads {
    animation: appear 500ms ease-out 900ms both;
  }

  .art-hero .bus {
    stroke-dasharray: 1;
    animation: connect 300ms var(--ease-out) both;
    animation-delay: calc(1500ms + var(--n, 0) * 250ms);
  }

  .art-hero .lamp:not(.off) {
    animation: lamp-on 250ms ease-out both;
    animation-delay: calc(1650ms + (var(--i, 2) - 2) * 250ms + var(--n, 0) * 60ms);
  }

  .art-hero .on-dark .lamp:not(.off) {
    animation-name: lamp-on-dark;
  }

  .art-hero .strip {
    animation: strip-on 400ms ease-out 2700ms both;
  }

  /* Continuous motion, kept quiet: ripples drift toward the return, a
     heartbeat runs along the bus every two seconds, and now and then a
     dosing head turns: each head doses for two seconds, one every four
     seconds, in turn. site.js adds .motion to the hero only without reduced
     motion, and adds .motion-offscreen while the hero is out of view. */
  .motion .art-hero .ripples {
    display: inline;
  }

  .motion .art-hero .ripple {
    animation: drift 9s linear infinite;
  }

  .motion .art-hero .beat {
    animation: beat 2s ease-in-out infinite;
    animation-delay: calc(4200ms + var(--b, 0) * 140ms);
  }

  .motion .art-hero .rotor {
    transform-box: fill-box;
    transform-origin: center;
    animation: dose 12s ease-in-out infinite;
    animation-delay: calc(5s + var(--h, 0) * 4s);
  }

  .motion-offscreen .art-hero .ripple,
  .motion-offscreen .art-hero .beat,
  .motion-offscreen .art-hero .rotor {
    animation-play-state: paused;
  }
}

@keyframes settle {
  from {
    transform: translateY(-36px);
    opacity: 0;
  }
}

@keyframes appear {
  from {
    opacity: 0;
  }
}

@keyframes connect {
  from {
    stroke-dashoffset: 1;
  }
}

@keyframes lamp-on {
  from {
    fill: var(--off);
  }
}

@keyframes lamp-on-dark {
  from {
    fill: var(--off-dark);
  }
}

@keyframes strip-on {
  from {
    stroke: var(--off-dark);
  }
}

@keyframes drift {
  to {
    transform: translate(var(--tx), var(--ty));
  }
}

@keyframes beat {
  0%,
  30%,
  100% {
    opacity: 1;
  }
  12% {
    opacity: 0.3;
  }
}

@keyframes dose {
  0% {
    transform: rotate(0deg);
  }
  16%,
  100% {
    transform: rotate(720deg);
  }
}

@keyframes identify {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}

/* Sections */

/* Steep enough that a phone gets 3rem, while wide screens still reach 8rem
   from about 1333px. */
.section {
  padding-block: clamp(3rem, 1rem + 8.4vw, 8rem);
}

.section-tint {
  background: var(--tint);
  border-block: 1px solid var(--rule);
}

.section-head {
  max-width: 44rem;
  display: grid;
  gap: 1.1rem;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.lede {
  font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.35rem);
  line-height: 1.55;
  color: var(--text);
  max-width: 40rem;
}

.prose {
  max-width: 68ch;
  display: grid;
  gap: 1rem;
}

/* The padding widens the tap area without moving anything. */
.more {
  display: inline-block;
  padding-block: 0.5rem;
  margin-block: -0.5rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--link);
}

.more .nowrap {
  white-space: nowrap;
}

.more .arrow {
  display: inline-block;
  vertical-align: -0.18em;
  margin-left: 0.15em;
  transition: transform 220ms var(--ease-out);
}

.more:hover .arrow {
  transform: translateX(3px);
}

/* Home: hero */

.hero {
  overflow: hidden;
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2.5rem, 0.75rem + 6.5vw, 6.5rem);
}

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}

.hero-copy {
  display: grid;
  gap: 1.6rem;
  align-content: center;
  position: relative;
  z-index: 1;
}

.hero-copy .lede {
  max-width: 34rem;
}

.hero-art {
  min-width: 0;
}

.status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--muted);
  padding-top: 0.25rem;
}

.status .stage {
  width: 26px;
  height: auto;
  flex: none;
}

@media (max-width: 900px) {
  .hero .wrap {
    grid-template-columns: 1fr;
  }

  .hero-art {
    margin-inline: -8px;
  }
}

/* Home: principles */

.split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.split > .section-head {
  position: sticky;
  top: calc(var(--header-pinned) + 2rem);
  margin-bottom: 0;
}

.principle-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.principle {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
  padding-block: 1.9rem;
  border-bottom: 1px solid var(--rule);
}

.principle .art-glyph {
  width: 112px;
  height: 92px;
}

.principle h3 {
  margin-bottom: 0.15rem;
}

.principle-line {
  font-weight: 650;
  color: var(--water);
  margin-bottom: 0.55rem;
}

.principle p {
  color: var(--text);
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
  }

  .split > .section-head {
    position: static;
  }
}

/* On phones the glyph sits beside the name and its line, and the paragraph
   takes the full width below them. */
@media (max-width: 520px) {
  .principle {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 0 1rem;
    align-items: center;
    padding-block: 1.6rem;
  }

  .principle > div {
    display: contents;
  }

  .principle .art-glyph {
    width: 64px;
    height: 56px;
    grid-row: 1 / span 2;
  }

  .principle h3 {
    grid-column: 2;
    align-self: end;
    margin-bottom: 0;
  }

  .principle-line {
    grid-column: 2;
    align-self: start;
    margin-bottom: 0;
  }

  .principle p:last-child {
    grid-column: 1 / -1;
    margin-top: 0.9rem;
  }
}

/* Home: fail-safe demonstration */

.demo {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.demo-copy {
  display: grid;
  gap: 1.4rem;
}

.demo-control {
  display: grid;
  gap: 1rem;
  justify-items: start;
}

.demo-message {
  min-height: 3.2em;
  font-size: 1rem;
  color: var(--muted);
  max-width: 30rem;
}

.demo-message strong {
  color: var(--ink);
}

.demo-art .art-failsafe {
  max-width: 560px;
  margin-inline: auto;
}

.art-failsafe .eq {
  transition: opacity 500ms var(--ease-out);
}

.art-failsafe .bus {
  transition: opacity 250ms;
}

.art-failsafe .bus-loose {
  opacity: 0;
}

.art-failsafe .port-in {
  fill: var(--surface);
}

[data-state="lost"] .art-failsafe .bus-connected,
[data-state="failsafe"] .art-failsafe .bus-connected {
  opacity: 0;
}

[data-state="lost"] .art-failsafe .bus-loose,
[data-state="failsafe"] .art-failsafe .bus-loose {
  opacity: 1;
}

[data-state="lost"] .art-failsafe .port-in,
[data-state="failsafe"] .art-failsafe .port-in,
[data-state="waiting"] .art-failsafe .port-in {
  fill: var(--alert);
}

[data-state="failsafe"] .art-failsafe .port-stop,
[data-state="waiting"] .art-failsafe .port-stop {
  fill: var(--off);
}

[data-state="failsafe"] .art-failsafe .on-dark .port-stop,
[data-state="waiting"] .art-failsafe .on-dark .port-stop {
  fill: var(--off-dark);
}

[data-state="failsafe"] .art-failsafe .eq-stop,
[data-state="waiting"] .art-failsafe .eq-stop {
  opacity: 0.28;
}

[data-state="waiting"] .art-failsafe .port-in {
  fill: var(--surface);
}

@media (prefers-reduced-motion: no-preference) {
  [data-state="lost"] .art-failsafe .port-in,
  [data-state="failsafe"] .art-failsafe .port-in {
    animation: identify 1s steps(2, jump-none) 4;
  }
}

.outcomes {
  width: 100%;
  border-collapse: collapse;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  font-size: 1rem;
}

.outcomes caption {
  text-align: left;
  font-size: 0.95rem;
  color: var(--muted);
  padding-bottom: 0.9rem;
}

.outcomes th,
.outcomes td {
  text-align: left;
  vertical-align: top;
  padding: 0.95rem 1.25rem 0.95rem 0;
  border-bottom: 1px solid var(--rule);
}

.outcomes thead th {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  border-bottom-color: var(--glass);
}

.outcomes tbody th {
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
}

.outcomes .why {
  color: var(--muted);
  padding-left: 1.25rem;
}

.outcomes .lost,
.outcomes .lost-head {
  padding-left: 0.9rem;
}

.outcomes .lost {
  font-weight: 700;
  color: var(--ink);
  transition: background-color 400ms;
}

.outcome-mark {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  margin-right: 0.5rem;
  background: var(--surface);
  vertical-align: 0.05em;
}

/* A Glass rim keeps the unlit dot visible when its column fills with Walls. */
.outcome-mark.stopped {
  background: var(--off);
  border: 1.5px solid var(--glass);
}

[data-state="failsafe"] .outcomes .lost,
[data-state="waiting"] .outcomes .lost {
  background: var(--walls);
}

.demo-source {
  margin-top: 1.25rem;
  font-size: 0.95rem;
  color: var(--muted);
}

/* In one column the drawing comes before the button, so the button and what
   it does to the drawing stay in view together. */
@media (max-width: 900px) {
  .demo {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .demo-copy {
    display: contents;
  }

  .demo-art {
    order: 1;
    margin-block: 0.6rem 0.2rem;
  }

  .demo-control {
    order: 2;
  }
}

@media (max-width: 520px) {
  .demo-control {
    justify-items: stretch;
  }

  .demo-control .btn {
    justify-content: center;
  }
}

/* On phones each row stacks: the equipment, then each value beside its label
   like a spec sheet, then why. In the fail-safe states the whole "if contact
   is lost" line fills with Walls, and its dot hangs so a wrapped outcome
   keeps a straight edge. */
@media (max-width: 700px) {
  .outcomes {
    --label: 7.25rem;
    --band: 0.6rem;
    margin-top: 1.75rem;
  }

  .outcomes thead {
    display: none;
  }

  .outcomes tbody tr:first-child {
    border-top: 1px solid var(--glass);
  }

  .outcomes tr {
    display: grid;
    gap: 0.3rem;
    padding-block: 1.1rem;
    border-bottom: 1px solid var(--rule);
  }

  .outcomes th,
  .outcomes td {
    border: 0;
    padding: 0;
  }

  .outcomes tbody th {
    margin-bottom: 0.2rem;
  }

  .outcomes td[data-label] {
    position: relative;
    padding-left: var(--label);
  }

  .outcomes td[data-label]::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.8rem;
    line-height: 1.6rem;
    font-weight: 700;
    color: var(--muted);
  }

  .outcomes td.lost {
    margin-inline: calc(-1 * var(--band));
    padding: 0.25rem var(--band) 0.25rem calc(var(--label) + var(--band) + 1.1rem);
  }

  .outcomes td.lost::before {
    left: var(--band);
    top: 0.25rem;
  }

  .outcomes .lost .outcome-mark {
    position: absolute;
    left: calc(var(--label) + var(--band));
    top: 0.75rem;
  }

  .outcomes .why {
    padding-left: 0;
    margin-top: 0.15rem;
  }
}

/* Home: two ways in */

.paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule);
}

.path {
  display: grid;
  gap: 1.25rem;
  align-content: start;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.5rem) 0 0;
}

.path + .path {
  border-left: 1px solid var(--rule);
  padding-left: clamp(1.5rem, 4vw, 3.5rem);
}

.path .art-glyph {
  width: 190px;
  height: 140px;
  margin-bottom: 0.25rem;
}

.checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.8rem;
}

.checks li {
  position: relative;
  padding-left: 1.6rem;
}

.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.7rem;
  height: 0.8rem;
  /* A small isometric cube in the mark's water colours. */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath fill='%234fcbd4' d='M7 0L14 4L7 8L0 4Z'/%3E%3Cpath fill='%231b78a3' d='M0 4L7 8V16L0 12Z'/%3E%3Cpath fill='%23125b80' d='M14 4L7 8V16L14 12Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

@media (max-width: 800px) {
  .paths {
    grid-template-columns: 1fr;
  }

  .path {
    padding-right: 0;
  }

  .path + .path {
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding-left: 0;
    margin-top: 2.5rem;
  }
}

/* Specification index, by area */

.area-name {
  font-size: 1.15rem;
  font-weight: 700;
}

.area-about {
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 40rem;
  margin: 0.3rem 0 1.4rem;
}

.index {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem clamp(1.5rem, 3vw, 2.5rem);
}

/* The areas after the first share its columns, and their lists start level. */
.index.areas {
  grid-template-rows: auto auto auto;
  margin-top: clamp(3rem, 2.5rem + 2vw, 4.5rem);
}

.areas .area {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
}

.areas .area-about {
  margin-bottom: 1rem;
}

.areas .area > ul {
  border-top: 1px solid var(--glass);
}

.index h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--water);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--glass);
  margin: 0 0 0.4rem;
}

.index ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.index li {
  border-bottom: 1px solid var(--rule);
}

.index li > a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.6rem;
  color: var(--ink);
  font-weight: 650;
  font-size: 1rem;
  text-decoration: none;
}

.index li > a:hover {
  color: var(--link);
}

.index li > a:hover .rev {
  color: var(--ink);
}

.rev {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  font-feature-settings: "tnum";
  white-space: nowrap;
}

.index .planned span.row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.6rem;
  font-size: 1rem;
  font-weight: 650;
  color: var(--muted);
}

@media (max-width: 1000px) {
  .index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .index {
    grid-template-columns: 1fr;
  }
}

/* The stage mark hangs to the left, so a wrapped note keeps a straight edge. */
.index-note {
  position: relative;
  margin-top: 2rem;
  padding-left: calc(24px + 0.6rem);
  font-size: 0.95rem;
  color: var(--muted);
}

.index-note .stage {
  position: absolute;
  left: 0;
  top: -1px;
  width: 24px;
  height: auto;
}

.index-note a {
  white-space: nowrap;
}

.built {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  padding-top: 2.25rem;
  border-top: 1px solid var(--glass);
}

.built > div {
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

.built p {
  font-size: 1rem;
}

@media (max-width: 800px) {
  .built {
    grid-template-columns: 1fr;
  }
}

/* Closing field */

.on-deep {
  background: var(--deep-water);
  color: var(--on-deep-muted);
}

.on-deep h2,
.on-deep h3 {
  color: var(--on-deep);
}

.on-deep a:not(.btn) {
  color: #fff;
  text-decoration-color: rgb(255 255 255 / 0.4);
}

.on-deep a:not(.btn):hover {
  text-decoration-color: var(--surface);
}

.on-deep ::selection {
  background: var(--surface);
  color: var(--deep-water);
}

.close .wrap {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2.5rem 4rem;
  align-items: end;
}

.close h2 {
  max-width: 14ch;
}

.close-copy {
  display: grid;
  gap: 1.6rem;
}

.close .lede {
  color: var(--on-deep-muted);
}

@media (max-width: 860px) {
  .close .wrap {
    grid-template-columns: 1fr;
  }
}

/* Footer */

.site-footer {
  background: var(--deep-water);
  color: var(--on-deep-muted);
  font-size: 0.95rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 3.5rem) 2.5rem;
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr));
  gap: 2.5rem;
}

.footer-top img {
  height: 44px;
  width: auto;
}

.footer-top p {
  margin-top: 1.1rem;
  max-width: 24rem;
}

.site-footer h2 {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0;
  color: #fff;
  margin-bottom: 0.8rem;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.site-footer a {
  color: var(--on-deep-muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--surface);
}

.footer-legal {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  font-size: 0.875rem;
}

@media (max-width: 860px) {
  .footer-top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-top > :first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
}

/* Footer links get taller to tap, with the same rhythm. */
@media (max-width: 760px) {
  .site-footer h2 {
    margin-bottom: 0.4rem;
  }

  .site-footer ul {
    gap: 0;
  }

  .site-footer li a,
  .footer-legal a {
    display: inline-block;
    padding-block: 0.4rem;
  }

  .footer-legal a {
    margin-block: -0.4rem;
  }
}

/* Inner pages */

.page-head {
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2.5rem, 2rem + 2vw, 4rem);
  border-bottom: 1px solid var(--rule);
}

.page-head .wrap {
  display: grid;
  gap: 1.4rem;
}

.page-head h1 {
  max-width: 16ch;
}

.page-head.has-art .wrap {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: center;
  gap: 2rem clamp(2rem, 5vw, 5rem);
}

.page-head-copy {
  display: grid;
  gap: 1.4rem;
}

.page-head .art-shelf,
.page-head .art-join {
  max-width: 500px;
  justify-self: end;
}

@media (max-width: 860px) {
  .page-head.has-art .wrap {
    grid-template-columns: 1fr;
  }

  .page-head .art-shelf,
  .page-head .art-join {
    justify-self: start;
    max-width: 360px;
  }
}

.section.after-head {
  padding-top: clamp(3rem, 2rem + 3vw, 5rem);
}

.page-head .lede {
  max-width: 44rem;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  color: var(--muted);
}

.facts strong {
  color: var(--ink);
  font-weight: 700;
}

/* Lifecycle */

.lifecycle {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  counter-reset: none;
  border-top: 1px solid var(--rule);
}

.lifecycle li {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding: 1.75rem 1.5rem 0 0;
  position: relative;
}

.lifecycle li + li {
  padding-left: 1.5rem;
  border-left: 1px solid var(--rule);
}

.lifecycle .stage {
  width: 48px;
  height: auto;
  margin-bottom: 0.4rem;
}

.lifecycle p {
  font-size: 1rem;
  color: var(--text);
}

.lifecycle .here {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--water);
}

@media (max-width: 860px) {
  .lifecycle {
    grid-template-columns: 1fr 1fr;
  }

  .lifecycle li:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .lifecycle li:nth-child(n + 3) {
    border-top: 1px solid var(--rule);
    margin-top: 1.75rem;
  }
}

/* On phones each stage's mark sits beside its name, so the four stages read
   as one short ruled list. */
@media (max-width: 480px) {
  .lifecycle {
    grid-template-columns: 1fr;
  }

  .lifecycle li {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 0.35rem 1.1rem;
    padding: 1.4rem 0 0;
  }

  .lifecycle li + li {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--rule);
    margin-top: 1.4rem;
  }

  .lifecycle .stage {
    grid-row: 1 / span 2;
    align-self: start;
    margin-bottom: 0;
  }

  .lifecycle li > :not(.stage) {
    grid-column: 2;
  }
}

/* Areas in the page head of the Specifications page */

.area-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  max-width: 34rem;
  border-top: 1px solid var(--glass);
}

.area-list li {
  border-bottom: 1px solid var(--rule);
}

.area-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 44px;
  padding-block: 0.5rem;
  color: var(--ink);
  font-weight: 650;
  text-decoration: none;
}

.area-list a:hover {
  color: var(--link);
}

.area-stage {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.95rem;
  white-space: nowrap;
}

.area-stage .stage {
  width: 22px;
  height: auto;
}

/* Specification table, by area and group */

.spec-area + .spec-area {
  margin-top: clamp(4rem, 3rem + 4vw, 7rem);
}

.spec-area > h2 {
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  margin-bottom: 0.4rem;
}

.spec-area > h2 + p {
  color: var(--muted);
  font-size: 1rem;
  margin-bottom: 1.4rem;
  max-width: 44rem;
}

.spec-group {
  margin-top: 2.25rem;
}

.spec-group + .spec-group {
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

.spec-group > h3 {
  font-size: 1.15rem;
  margin-bottom: 0.3rem;
}

.spec-group > p {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 1rem;
  max-width: 44rem;
}

.specs {
  width: 100%;
  border-collapse: collapse;
}

.specs th,
.specs td {
  text-align: left;
  vertical-align: top;
  padding: 1.15rem 1.5rem 1.15rem 0;
  border-bottom: 1px solid var(--rule);
}

.specs thead th {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  padding-block: 0.6rem;
  border-bottom-color: var(--glass);
}

.specs .col-name {
  width: 30%;
}

.specs .col-rev {
  width: 6rem;
}

.specs .col-stage {
  width: 9.5rem;
  padding-right: 0;
}

.specs tbody th {
  font-weight: 700;
  font-size: 1.05rem;
}

.specs tbody th a,
.parts h3 a {
  color: var(--ink);
  text-decoration: none;
}

.specs tbody th a:hover,
.parts h3 a:hover {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--surface);
}

.specs td {
  font-size: 1rem;
}

.stage-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--ink);
  white-space: nowrap;
}

.stage-cell .stage {
  width: 22px;
  height: auto;
}

.specs tr.planned th,
.specs tr.planned td,
.parts .planned h3,
.parts .planned p {
  color: var(--muted);
}

@media (max-width: 760px) {
  .specs thead {
    display: none;
  }

  .specs tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.4rem 1rem;
    padding-block: 1.1rem;
    border-bottom: 1px solid var(--rule);
  }

  .specs th,
  .specs td {
    border: 0;
    padding: 0;
  }

  .specs .defines {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .specs tbody th {
    grid-column: 1;
  }

  .specs .rev-cell {
    grid-row: 1;
    grid-column: 2;
    text-align: right;
  }

  .specs .stage-td {
    grid-column: 1 / -1;
  }
}

.includes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 5vw, 4rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.includes li {
  padding-block: 1.25rem;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 0.35rem;
  align-content: start;
}

.includes h3 {
  font-size: 1.1rem;
}

.includes p {
  font-size: 1rem;
}

@media (max-width: 760px) {
  .includes {
    grid-template-columns: 1fr;
  }
}

/* Hardware */

.rail-figure {
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(1rem, 2vw, 2rem);
}

.rail-figure .art-rail {
  max-width: 1120px;
  margin-inline: auto;
}

.rail-figure figcaption {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.95rem;
  color: var(--muted);
}

@media (max-width: 640px) {
  .art-rail .callouts,
  .art-hero .callouts {
    display: none;
  }
}

.parts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--glass);
}

.parts li {
  padding: 1.25rem 1.25rem 0 0;
  display: grid;
  gap: 0.45rem;
  align-content: start;
}

.parts li + li {
  padding-left: 1.25rem;
  border-left: 1px solid var(--rule);
}

.parts h3 {
  font-size: 1.05rem;
}

.parts p {
  font-size: 0.95rem;
}

@media (max-width: 1000px) {
  .parts {
    grid-template-columns: 1fr 1fr;
  }

  .parts li,
  .parts li + li {
    padding: 1.25rem 0;
    border-left: 0;
    border-bottom: 1px solid var(--rule);
  }

  .parts li:nth-child(odd) {
    padding-right: 1.25rem;
  }
}

@media (max-width: 560px) {
  .parts {
    grid-template-columns: 1fr;
  }

  .parts li:nth-child(odd) {
    padding-right: 0;
  }
}

.principles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 5vw, 4rem);
}

.principles li {
  display: grid;
  gap: 0.4rem;
  align-content: start;
  padding-block: 1.4rem;
  border-top: 1px solid var(--rule);
}

.principles p {
  font-size: 1rem;
}

@media (max-width: 760px) {
  .principles {
    grid-template-columns: 1fr;
  }
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.timeline li {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 1.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--rule);
}

.timeline .when {
  font-weight: 700;
  color: var(--water);
  font-size: 0.95rem;
}

.timeline .now .when {
  color: var(--ink);
}

.timeline .now .when::before {
  content: "";
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.55rem;
  border-radius: 50%;
  background: var(--surface);
  vertical-align: 0.06em;
}

.timeline h3 {
  font-size: 1.15rem;
  margin-bottom: 0.35rem;
}

.timeline p {
  font-size: 1rem;
  max-width: 62ch;
}

@media (max-width: 640px) {
  .timeline li {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

/* Get involved */

.ways {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 5vw, 4rem);
}

.ways li {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding-block: 1.6rem;
  border-top: 1px solid var(--rule);
}

.ways p {
  font-size: 1rem;
}

@media (max-width: 760px) {
  .ways {
    grid-template-columns: 1fr;
  }
}

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.steps li {
  padding-block: 1.25rem;
  border-top: 1px solid var(--rule);
}

.steps h3 {
  margin-bottom: 0.3rem;
}

.steps p {
  font-size: 1rem;
}


.licenses {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}

.licenses th,
.licenses td {
  text-align: left;
  vertical-align: top;
  padding: 0.95rem 1.5rem 0.95rem 0;
  border-bottom: 1px solid var(--rule);
}

.licenses thead th {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 700;
  border-bottom-color: var(--glass);
}

.licenses tbody th {
  color: var(--ink);
  font-weight: 700;
}

@media (max-width: 640px) {
  .licenses thead {
    display: none;
  }

  .licenses tr {
    display: grid;
    gap: 0.2rem;
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--rule);
  }

  .licenses th,
  .licenses td {
    padding: 0;
    border: 0;
  }
}

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.two-col > .section-head {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .two-col {
    grid-template-columns: 1fr;
  }
}

/* A link to a specification's PDF ends in a small tag that says so. */

.file-tag {
  display: inline-block;
  margin-left: 0.45em;
  padding: 0 0.3em;
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--muted);
  vertical-align: 0.12em;
}

.btn .file-tag {
  margin-left: 0;
  border-color: var(--glass);
  color: inherit;
}

/* Document pages: the project's Markdown documents, built by docs/build.py. */

.doc {
  display: grid;
  gap: 2rem;
  align-items: start;
}

.doc.has-toc {
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  column-gap: clamp(2.5rem, 5vw, 5rem);
}

.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc li {
  border-bottom: 1px solid var(--rule);
}

.toc a {
  display: flex;
  gap: 0.6rem;
  padding-block: 0.55rem;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.35;
  text-decoration: none;
}

.toc a:hover {
  color: var(--link);
}

.toc-num {
  min-width: 1.3em;
  color: var(--water);
  font-feature-settings: "tnum";
}

.toc-side {
  position: sticky;
  top: calc(var(--header-pinned) + 2rem);
  max-height: calc(100vh - var(--header-pinned) - 4rem);
  overflow-y: auto;
}

.toc-side h2 {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--muted);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--glass);
}

.toc-fold {
  display: none;
  border-block: 1px solid var(--glass);
}

.toc-fold summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.toc-fold summary::-webkit-details-marker {
  display: none;
}

/* The site's arrow, turned to point down, and up when the contents are open. */
.toc-fold summary::after {
  content: "";
  width: 1.1em;
  height: 1.1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11M11 5l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11M11 5l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(90deg);
  transition: transform 220ms var(--ease-out);
}

.toc-fold[open] summary::after {
  transform: rotate(-90deg);
}

.toc-fold[open] summary {
  border-bottom: 1px solid var(--rule);
}

.toc-fold li:last-child {
  border-bottom: 0;
}

@media (max-width: 999px) {
  .doc.has-toc {
    grid-template-columns: minmax(0, 1fr);
  }

  .toc-side {
    display: none;
  }

  .toc-fold {
    display: block;
  }
}

.doc-body {
  max-width: 46rem;
  min-width: 0;
  font-size: 1.0625rem;
  overflow-wrap: break-word;
}

.doc-body > * + * {
  margin-top: 1.1rem;
}

.doc-body h2 {
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-top: clamp(2.75rem, 2.25rem + 2vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.doc-body > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.doc-body h3 {
  font-size: 1.25rem;
  margin-top: 2.25rem;
}

.doc-body h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-top: 1.75rem;
}

.doc-body :is(h2, h3, h4) + * {
  margin-top: 0.8rem;
}

.doc-body .num {
  margin-right: 0.1em;
  color: var(--water);
  text-decoration: none;
}

.doc-body .num:hover {
  text-decoration: underline;
  text-decoration-color: var(--surface);
}

.doc-body strong {
  color: var(--ink);
}

.doc-body ul,
.doc-body ol {
  margin-bottom: 0;
  padding-left: 1.3rem;
}

.doc-body li + li,
.doc-body li > ul,
.doc-body li > ol {
  margin-top: 0.45rem;
}

.doc-body ul li::marker {
  color: var(--glass);
}

.doc-body ol li::marker {
  color: var(--muted);
  font-weight: 650;
}

.doc-body p code,
.doc-body li code {
  white-space: normal;
}

.doc-body blockquote {
  margin-inline: 0;
  padding: 1rem 1.25rem;
  background: var(--tint);
  border: 1px solid var(--rule);
  font-size: 1rem;
}

.doc-body blockquote > * + * {
  margin-top: 0.5rem;
}

.doc-body hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin-block: 2.5rem;
}

.doc-body pre {
  margin-inline: 0;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  background: var(--tint);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink);
}

.doc-body pre code {
  padding: 0;
  border: 0;
  background: none;
  font-size: inherit;
  white-space: pre;
}

.doc-body img {
  height: auto;
}

.caption {
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--muted);
}

.caption-table + .table-scroll {
  margin-top: 0.5rem;
}

.table-scroll {
  overflow-x: auto;
}

.doc-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  line-height: 1.5;
}

.doc-body th,
.doc-body td {
  text-align: left;
  vertical-align: top;
  padding: 0.7rem 1.25rem 0.7rem 0;
  border-bottom: 1px solid var(--rule);
}

.doc-body :is(th, td):last-child {
  padding-right: 0;
}

.doc-body thead th {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  border-bottom-color: var(--glass);
}

/* On phones each row restacks: its first cell as the row's name, and each other cell with its
   column's heading above it. */
@media (max-width: 640px) {
  .doc-body table,
  .doc-body tbody,
  .doc-body tr,
  .doc-body td {
    display: block;
  }

  .doc-body thead {
    display: none;
  }

  .doc-body tr {
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--rule);
  }

  .doc-body tbody tr:first-child {
    border-top: 1px solid var(--glass);
  }

  .doc-body td {
    padding: 0;
    border: 0;
  }

  .doc-body td + td {
    margin-top: 0.45rem;
  }

  .doc-body td[data-label]:first-child {
    color: var(--ink);
    font-weight: 700;
  }

  .doc-body td[data-label]:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
  }
}

/* Not found */

.not-found {
  padding-block: clamp(3rem, 1rem + 8.4vw, 8rem);
}

.not-found .wrap {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 3rem;
  align-items: center;
}

.not-found .art-empty {
  max-width: 380px;
}

@media (max-width: 760px) {
  .not-found .wrap {
    grid-template-columns: 1fr;
  }
}

/* Focus on dark fields */

.on-deep :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--surface);
}