/* Mock-up only: a small open-source project site for Technically Not (the pages in this folder).
   It uses the live site's own colors and typefaces and nothing else of it: no scene, no shared
   style sheet, no shared script.

   The layout: a top bar, then the page in one centered column. Behind every page stands one
   scene (moon.js): the Moon filling most of the window, the Earth far off and the real night
   sky, all three from NASA pictures. The home's first screen is that scene with the words on
   its dark side; inner pages read over it, dimmed.
   Written phone first; wider layouts are added further down. */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/night/fonts/bricolage-grotesque-latin.woff2) format('woff2');
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/night/fonts/instrument-sans-latin.woff2) format('woff2');
}

/* The live site's tokens. There is no amber, yellow or orange here on purpose: on a night-blue
   page they are the pairing the owner ruled out. */
:root {
  --sky: #0e1836;
  --night: #060914;
  --ink: #f3f1ec;
  --soft: #c9cfe6;
  --blue: #8fb4ff;
  --red: #ff4b4b;
  --tint: #8fb4ff14;
  /* The four colors that mark a kind of line (changelog labels, the docs' Note, Tip and Warning).
     Each is always shown with its word. */
  --k-new: #5fdca0;
  --k-changed: #8fb4ff;
  --k-fixed: #c9a4ff;
  --k-removed: #ff7a7a;
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --text: 'Instrument Sans', system-ui, sans-serif;
  --mono: ui-monospace, Consolas, 'Cascadia Mono', monospace;
  --pad: clamp(16px, 4vw, 56px);
  --gap: clamp(64px, 9vw, 120px);
  color-scheme: dark;
}

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

html {
  background: #03040a;
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.6;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* no background of its own: the scene stands behind the page, on the night color of the root */
  background: none;
  color: var(--ink);
  overflow-wrap: anywhere;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
pre,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

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

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-radius: 4px;
}

/* ---------- the bar that says this is a mock-up ---------- */

/* a solid ground (the old see-through tint over the night): the scene never shows through it */
.concept {
  position: relative;
  z-index: 1;
  padding: 7px var(--pad);
  background: #141928;
  color: var(--soft);
  font-size: 12.5px;
  line-height: 1.45;
  text-align: center;
}

/* its lower edge is no cut: the ground thins out into the page under it */
.concept::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 22px;
  background: linear-gradient(#141928, #14192800);
  pointer-events: none;
}

.concept b {
  color: var(--ink);
  font-weight: 600;
}

/* the longer middle of that line is for screens with room: a phone keeps it to two lines */
.concept .c-wide {
  display: none;
}

.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  background: var(--ink);
  color: #05040a;
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: 12px;
}

/* ---------- the scene behind every page: the Moon, the Earth and the night sky (moon.js) ---------- */

#space {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.4s;
}

#space.on {
  opacity: 1;
}

/* ---------- the top bar ---------- */

/* a soft shade under the bar, so its links read over the lit Moon */
.shell::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: -1;
  height: 220px;
  /* nearly closed behind the bar itself, then open: the Moon rises out of the dark under it */
  background: linear-gradient(#03040af5 0, #03040ae6 84px, transparent 220px);
  pointer-events: none;
}

.shell {
  position: relative;
  overflow-x: clip;
}

/* the bar stands on the page's own column, so the logo and the words share one left edge at
   every width */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(100% - 2 * var(--pad), 1080px);
  margin-inline: auto;
  padding: clamp(14px, 2.4vw, 30px) 0 0;
}

.mark {
  flex: none;
  display: flex;
  align-items: center;
  min-height: 44px;
}

/* The logo is eleven times as wide as it is high: on a phone it gives way to the links. */
.mark img {
  height: clamp(12px, 3.6vw, 22px);
  width: auto;
}

.bar nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.4vw, 32px);
  font-size: 15px;
}

.bar nav a,
.end a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  white-space: nowrap;
}

.bar nav a:not(.gh) span {
  border-bottom: 1px solid #ffffff80;
  padding-bottom: 4px;
}

.bar nav a:not(.gh):hover span,
.bar nav a[aria-current] span {
  border-color: var(--red);
}

/* GitHub, the second action after Download. It is the same button as Download (height, border,
   radius, type); what sets it apart is what it holds: the GitHub mark, the name, and the star
   count as a quieter part of the same line. The button is as wide as the number it holds (user,
   2026-10-14: no room kept for digits it does not have), so it grows a little when a larger
   count arrives (open.js reads it from GitHub; without an answer the button shows no number). */
.gh {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 9px 18px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: #06091480;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.gh-mark {
  flex: none;
  width: 17px;
  height: 17px;
}

.gh b {
  font-weight: 500;
}

.gh .count {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-left: 3px;
  color: var(--soft);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* the star is gold (user, 2026-10-14: "Gold anyway, I'm overriding the rule here", the one
   exception to no gold on the navy ground) */
.gh .count i {
  color: #f2c14e;
  font-style: normal;
  font-size: 13px;
}

.gh:hover {
  background: var(--ink);
  color: #05040a;
}

.gh:hover .count {
  color: inherit;
}

.gh:hover .count i {
  color: #9a6b00;
}

.gh.no-count .count {
  display: none;
}

.bar nav a.get {
  padding: 9px 18px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-weight: 500;
  background: #06091480;
}

/* The two buttons are a pair: 12px between them at every width, whatever the links' gap is. */
.bar nav a.gh + a.get {
  margin-left: calc(12px - clamp(12px, 2.4vw, 32px));
}

.bar nav a.get:hover {
  background: var(--ink);
  color: #05040a;
}

/* Under 760 px the bar is two rows, so nothing has to hide: the logo with Docs and Changelog,
   then the two buttons side by side. The order on screen is the order in the page. */
@media (max-width: 759px) {
  .bar {
    position: relative;
    display: block;
  }

  .mark {
    position: absolute;
    left: 0;
    top: clamp(14px, 2.4vw, 30px);
  }

  .bar nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px 22px;
  }

  /* the break between the two rows */
  .bar nav::before {
    content: '';
    order: 1;
    flex-basis: 100%;
    height: 0;
  }

  .bar nav a.gh,
  .bar nav a.get {
    order: 2;
  }

  .bar nav a.gh + a.get {
    margin-left: -10px;
  }
}

/* On a phone the two buttons share the row's width in equal halves; on the narrowest phones
   GitHub keeps the width of what it holds and Download takes the rest. */
@media (max-width: 479px) {
  .bar nav {
    column-gap: 12px;
  }

  .bar nav a.gh + a.get {
    margin-left: 0;
  }

  .bar nav a.gh,
  .bar nav a.get {
    flex: 1 1 0;
    min-width: max-content;
    justify-content: center;
    padding-inline: 13px;
  }

  /* Docs and Changelog keep their own distance */
  .bar nav a.wide {
    margin-left: 10px;
  }
}

/* ---------- the page over the scene ---------- */

.body {
  min-width: 0;
}

main {
  width: min(100% - 2 * var(--pad), 1080px);
  margin-inline: auto;
}

/* Inner pages are for reading: the scene stays behind them, dimmed to a quarter. */
.inner {
  background: linear-gradient(#060914c4 0, #060914e6 420px);
  min-height: 100dvh;
}

/* the bar needs no shade of its own there */
.inner::before {
  display: none;
}

/* The home's first screen is the scene itself; what follows reads on the night, which closes
   over the Moon in a long soft fade (no line where one ends and the other begins). */
.below {
  margin-inline: calc(-1 * var(--pad));
  padding-inline: var(--pad);
}

/* the app picture follows the first screen's last line on the same step every part uses */
.home .after {
  position: relative;
  padding-top: var(--gap);
}

/* The night that closes over the scene reaches from one window edge to the other, and down to
   where the footer begins. Over its last stretch it closes completely, so the home ends on the
   night: at the end of the page the Moon is out of view on every screen, never a lit strip under
   the footer and never the footer's words on the Moon. */
.home .after::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: calc(-1 * var(--gap));
  left: 50%;
  z-index: -1;
  width: 100vw;
  transform: translateX(-50%);
  /* Drawn once, never tiled: when the box starts on a part of a pixel (a scaled preview, a
     zoomed browser), a tiled ground lets the closed night of its lower end show again as a thin
     dark line along its upper edge, across the lit Moon. */
  background-repeat: no-repeat;
  background-image:
    linear-gradient(to top, #060914 0, #06091400 360px),
    /* the fade eases in, so the eye finds no place where the night begins */
    linear-gradient(
      #06091400 0,
      #0609140a 28px,
      #06091423 55px,
      #06091447 83px,
      #06091470 110px,
      #06091499 138px,
      #060914bd 165px,
      #060914d6 193px,
      #060914e0 220px,
      #060914f2 520px
    );
}

/* the footer of the home stands on that closed night, as wide as the window */
.home .end {
  position: relative;
}

.home .end::before {
  content: '';
  position: absolute;
  top: -1px;
  bottom: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  transform: translateX(-50%);
  background: #060914;
}

.kick {
  color: var(--blue);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2 {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(34px, 5vw, 66px);
  line-height: 1.08;
}

h1 em {
  font-style: normal;
  color: var(--red);
}

h2 {
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.12;
}

h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lede {
  max-width: 56ch;
  color: var(--soft);
  font-size: clamp(17px, 1.5vw, 20px);
}

.fine {
  color: var(--blue);
  font-size: 14px;
}

.fine a,
.prose a,
.leaves a {
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-underline-offset: 3px;
}

code {
  font-family: var(--mono);
  font-size: 0.88em;
  color: #dfe6ff;
  background: var(--tint);
  padding: 1px 5px;
  border-radius: 4px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}

.go {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 11px 24px;
  background: var(--red);
  color: #12060a;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 0 30px -6px #ff4b4b88;
}

.go:hover {
  background: #ff7373;
}

.link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  text-decoration: none;
}

.link span {
  border-bottom: 1px solid #ffffff80;
  padding-bottom: 4px;
}

.link:hover span {
  border-color: var(--red);
}

/* On a phone the Download buttons (one per platform) stand one above the other at the same full
   width, so they read as one set of choices instead of two buttons of different lengths. */
@media (max-width: 619px) {
  /* the row itself spans the column: the home's first screen sizes its parts to their content */
  .actions {
    justify-self: stretch;
  }

  .actions .go {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* ---------- home: the first screen ---------- */

.first {
  display: grid;
  gap: 22px;
  justify-items: start;
  align-content: start;
  /* As high as its words: the next part follows on the page's usual step (.home .after), so no
     band of empty sky stands between the first screen's last line and the app picture. */
  padding-block: clamp(56px, 11vh, 110px) 0;
}

.first h1,
.first .lede {
  max-width: 12.5em;
  text-shadow: 0 2px 30px #03040a;
}

.first .lede {
  max-width: 30em;
}

/* the two small lines and the plain link beside the button can stand on the lit Moon on a
   phone: the same shade as the headline's */
.first .link,
.first .fine,
.first .credit {
  text-shadow:
    0 1px 12px #03040a,
    0 0 3px #03040a;
}

/* Three compositions of the first screen. moon.js places the Moon and the Earth for the same
   three, so keep its test ("wide") in step with these queries.

   1. On its side (wider than tall, from 861 px): the words at the left, the Moon at the right.
      The words start a fixed step under the bar (.first above), whatever the window's height. */

/* 2. Upright (a phone, an upright tablet, any window taller than wide): the words start under
      the bar, and the Moon rises under them, in the room they leave. */
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  .first {
    align-content: start;
    padding-top: clamp(30px, calc(18vh - 85px), 96px);
  }
}

/* 3. An upright tablet is not a large phone: its own type size, buttons and spacing. */
@media (min-width: 600px) and (max-width: 860px) and (min-height: 700px),
  (min-width: 861px) and (max-aspect-ratio: 1/1) {
  .first {
    gap: 28px;
  }

  .first .kick {
    font-size: 14.5px;
  }

  .first h1 {
    font-size: clamp(48px, 7vw, 70px);
  }

  .first .lede {
    font-size: clamp(19px, 2.5vw, 24px);
  }

  .first .go {
    min-height: 54px;
    padding: 14px 30px;
    font-size: 17px;
  }

  .first .link {
    font-size: 17px;
  }

  .first .fine {
    font-size: 15.5px;
  }

  .first .credit {
    font-size: 13px;
  }
}

/* who made the pictures the scene is built from */
.credit {
  color: var(--soft);
  font-size: 12px;
}

/* The app, large, running off the right edge of the screen: its other edges fade into the night. */
.app {
  margin-top: 0;
}

.app .frame {
  aspect-ratio: 1180 / 760;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to bottom, #000 0, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to bottom, #000 0, #000 84%, transparent 100%);
  mask-composite: intersect;
}

.app video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app figcaption {
  margin-top: 6px;
  text-align: center;
}

/* ---------- home: the numbered parts ----------
   Each part has a margin column (its number and its title) and the matter beside it. */

.part {
  display: grid;
  gap: 26px;
  padding-top: var(--gap);
}

.tag {
  display: grid;
  gap: 12px;
  align-content: start;
}

.tag .n {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(44px, 6vw, 72px);
  line-height: 0.9;
  color: var(--blue);
}

.tag .n small {
  margin-left: 8px;
  font: 400 13px var(--text);
  letter-spacing: 0.08em;
  color: var(--blue);
}

.tag p {
  color: var(--soft);
  font-size: 15.5px;
}

.matter {
  display: grid;
  gap: 26px;
  min-width: 0;
}

.does {
  display: grid;
  gap: 26px 44px;
}

.does li {
  display: grid;
  gap: 5px;
}

.does p {
  color: var(--soft);
  font-size: 16px;
}

.bring {
  max-width: 64ch;
  color: var(--soft);
}

.bring b {
  color: var(--ink);
  font-weight: 600;
}

.way {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.way p {
  color: var(--soft);
}

pre {
  overflow-x: auto;
  padding: 18px 20px;
  background: #02040b;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px #8fb4ff2e;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.75;
  color: #dfe6ff;
  user-select: text;
}

pre i {
  font-style: normal;
  color: var(--blue);
  user-select: none;
}

.rules {
  display: grid;
  gap: 14px;
}

.rules li {
  position: relative;
  padding-left: 26px;
  color: var(--soft);
}

/* the mark's own red stroke as the bullet */
.rules li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 14px;
  height: 3px;
  border-radius: 99px;
  background: var(--red);
  transform: rotate(-12deg);
}

.rules b {
  color: var(--ink);
  font-weight: 600;
}

.leaves {
  display: grid;
  gap: 4px;
}

.leaves > div {
  display: grid;
  gap: 4px 28px;
  padding: 14px 18px;
  border-radius: 10px;
}

.leaves > div:nth-child(odd) {
  background: var(--tint);
}

.leaves dt {
  font-weight: 600;
}

.leaves dd {
  color: var(--soft);
  font-size: 15.5px;
}

.leaves dd.file {
  font-size: 14px;
}

/* ---------- the small links at the end of every page ---------- */

.end {
  width: min(100% - 2 * var(--pad), 1080px);
  margin: var(--gap) auto 0;
  padding-block: 24px 40px;
  font-size: 14px;
  color: var(--soft);
}

.end ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
}

.end a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-underline-offset: 4px;
}

/* ---------- inner pages: Download, Docs, Changelog ---------- */

.page {
  display: grid;
  gap: 20px;
  justify-items: start;
  padding-top: clamp(22px, 5vw, 64px);
}

.prose {
  display: grid;
  gap: 16px;
  max-width: 68ch;
}

.prose h2 {
  margin-top: 30px;
  font-size: clamp(26px, 2.6vw, 36px);
}

.prose p,
.prose li {
  color: var(--soft);
}

/* Numbered steps (here and in the guide): the number in the site's one accent, set as a figure. */
.prose ol,
.doc ol.g-steps {
  display: grid;
  gap: 12px;
  padding-left: 0;
  list-style: none;
  counter-reset: step;
}

.prose ol li,
.doc ol.g-steps li {
  position: relative;
  padding-left: 2.5rem;
  counter-increment: step;
}

.prose ol li::before,
.doc ol.g-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.14em;
  font: 300 1.5rem/1.3 var(--display);
  font-variant-numeric: tabular-nums;
  color: var(--red);
}

.specs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 20px;
  font-size: 15.5px;
}

.specs dt {
  color: var(--blue);
}

.specs dd {
  color: var(--ink);
}

/* a warning box: round on all four corners, its red marker painted inside the box */
.heed {
  padding: 12px 16px 12px 20px;
  border-radius: 10px;
  background: linear-gradient(to right, var(--red) 0 4px, transparent 4px), var(--tint);
  color: var(--soft);
  font-size: 15px;
}

.heed b {
  color: var(--ink);
  font-weight: 600;
}

/* a list of links out: one line each, what it holds on the right */
.out {
  display: grid;
  gap: 4px;
  max-width: 68ch;
  margin-top: 14px;
}

.out a {
  display: grid;
  gap: 2px 20px;
  padding: 13px 16px;
  border-radius: 10px;
  text-decoration: none;
}

.out li:nth-child(odd) a {
  background: var(--tint);
}

.out a:hover b {
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-underline-offset: 4px;
}

.out b {
  font-weight: 600;
}

.out span {
  color: var(--soft);
  font-size: 14.5px;
}

/* Each release stands in a container of its own, in the material of the guide's boxes: its
   version, date and build at the top, its lines inside. One step of padding on every side, one
   clear space between two releases. */
.release,
.doc .release {
  display: grid;
  gap: 14px;
  max-width: 70ch;
  margin-top: 20px;
  padding: 24px;
  border-radius: 12px;
  background: var(--tint);
}

/* the first one keeps a little more distance from the page's opening words */
.page + .release,
.doc .timeline > .release:first-of-type {
  margin-top: 36px;
}

.doc .release ul {
  margin-block: 0;
}

/* on a phone the container is as wide as the page's column, with a smaller step inside */
@media (max-width: 619px) {
  .release,
  .doc .release {
    margin-top: 14px;
    padding: 18px 16px;
  }
}

.release h2 {
  font-size: clamp(28px, 3vw, 40px);
}

.release time {
  color: var(--blue);
  font-size: 14px;
}

.release ul {
  display: grid;
  gap: 9px;
  padding-left: 20px;
  list-style: disc;
}

.release li {
  color: var(--soft);
  font-size: 16px;
}

.release li::marker {
  color: var(--blue);
}

/* ---------- kinds: a small label with its word, one color per kind ----------
   Used for the changelog's New, Changed, Fixed and Removed, and for the guide's Note, Tip and
   Warning. The label has a solid backing, so it reads the same whatever the scene shows behind. */

.kind {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--k, var(--soft)) 16%, #060914);
  color: var(--k, var(--soft));
  font: 600 12px/1.5 var(--text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.kind.new,
.kind.tip {
  --k: var(--k-new);
}

.kind.changed,
.kind.note {
  --k: var(--k-changed);
}

.kind.fixed {
  --k: var(--k-fixed);
}

.kind.removed,
.kind.warn {
  --k: var(--k-removed);
}

/* A release's lines: the labels stand in one column, the words beside them. A line whose note
   named no kind has no label and starts in the words' column. */
.release ul.kinds,
.doc ul.kinds {
  gap: 11px;
  padding-left: 0;
  list-style: none;
}

ul.kinds li {
  display: grid;
  grid-template-columns: 5.4rem minmax(0, 1fr);
  column-gap: 14px;
  align-items: baseline;
}

ul.kinds li > .kind {
  justify-self: start;
}

ul.kinds li > .what {
  grid-column: 2;
}

/* on a phone the label stands above its line, so the words keep the whole width */
@media (max-width: 619px) {
  ul.kinds {
    gap: 14px;
  }

  ul.kinds li {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 5px;
  }

  ul.kinds li > .what {
    grid-column: 1;
  }
}

/* ---------- wider than a phone ---------- */

@media (min-width: 620px) {
  .concept .c-wide {
    display: inline;
  }

  .does {
    grid-template-columns: 1fr 1fr;
  }

  .leaves > div {
    grid-template-columns: 1fr 1.5fr;
  }

  .leaves dd.file {
    grid-column: 2;
  }

  .out a {
    grid-template-columns: 1fr 1.3fr;
    align-items: baseline;
  }
}

@media (min-width: 800px) {
  /* the margin column: a part's number and title stand left of its matter */
  .part {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
    gap: 40px;
  }
}

@media (hover: none) {
  .go:hover {
    background: var(--red);
  }
}

/* a change from one page of the site to another fades briefly, it does not jump (every page loads
   this sheet, so both sides of a change agree; not for a visitor who asked for less motion) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- reading pages: legal, security, licences, contact, the user guide, every release ----------
   Their text comes from the working copy's own pages as it stands, so the class names inside
   .doc are that text's own. Everything reads in one column. */

.doc {
  /* the app's own status colors, shown only as the small dots of the guide's status list */
  --st-working: #3ddc84;
  --st-waiting: #ffb020;
  --st-agents: #b79cff;
  --st-idle: #8a8794;
  --st-error: #ff4b4b;
  max-width: 70ch;
  padding-top: clamp(30px, 6vw, 90px);
  user-select: text;
}

/* the guide keeps its parts in sections: on a reading page they follow each other closely */
.doc section {
  padding-top: 0;
}

.doc > header {
  display: grid;
  gap: 18px;
  margin-bottom: 30px;
}

.doc .updated {
  color: var(--blue);
  font-size: 14.5px;
}

.doc h2 {
  margin: 52px 0 16px;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.15;
}

.doc h3 {
  margin: 32px 0 10px;
}

.doc p,
.doc li,
.doc td,
.doc th {
  color: var(--soft);
}

.doc p + p,
.doc p + ul,
.doc p + ol,
.doc ul + p,
.doc ol + p,
.doc aside + p,
.doc div + p {
  margin-top: 14px;
}

.doc b,
.doc th {
  color: var(--ink);
  font-weight: 600;
}

.doc a {
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-underline-offset: 3px;
}

.doc a.go {
  text-decoration: none;
}

.doc ul,
.doc ol {
  display: grid;
  gap: 9px;
  margin-block: 14px;
  padding-left: 22px;
}

.doc ul {
  list-style: disc;
}

.doc ol {
  list-style: decimal;
}

.doc li::marker {
  color: var(--blue);
}

.doc .say {
  font-size: clamp(17px, 1.5vw, 20px);
}

.doc .sub,
.doc .t {
  margin-top: 44px;
}

.doc .actions {
  margin-block: 16px;
}

/* Boxed notes of the guide: one calm look for all of them, with a quiet edge. Only a box the
   text itself calls a note, a tip or a warning carries that word as a label and its color on
   the edge; the body text of every box stays plain. */
.doc .callout,
.doc .fix {
  /* One shape for every box: the same round corner on all four sides. The marker at the left is
     painted inside the box as part of its ground, so it follows the corners; it is never a
     border, which would cut them square. */
  --edge: #c9cfe64d;
  margin-block: 18px;
  padding: 14px 18px 14px 22px;
  border-radius: 10px;
  background: linear-gradient(to right, var(--edge) 0 4px, transparent 4px), var(--tint);
}

.doc .callout.is-note {
  --edge: var(--k-changed);
}

.doc .callout.is-tip {
  --edge: var(--k-new);
}

.doc .callout.is-warn {
  --edge: var(--k-removed);
}

.doc .callout-label,
.doc .fact-k {
  color: var(--ink);
  font-weight: 600;
}

.doc .callout-label .kind {
  margin-right: 8px;
  vertical-align: 1px;
}

/* what a block of commands is for, above the block */
.doc .g-code-head {
  color: var(--blue);
  font-size: 13.5px;
}

.doc .g-code pre {
  margin-top: 6px;
}

/* a file's name in a list of links is a path: the code style, at the size of its line */
.out b code {
  font-size: 0.92em;
}

.doc .fix h3 {
  margin-top: 0;
}

.doc .facts,
.doc .status-legend,
.doc .qs,
.doc .steps {
  padding-left: 0;
  list-style: none;
}

.doc .facts li {
  padding: 12px 16px;
  border-radius: 10px;
}

.doc .facts li:nth-child(odd) {
  background: var(--tint);
}

.doc .status-legend li {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.doc .status-legend b {
  margin-right: 8px;
}

.st-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--st, var(--blue));
}

.doc .steps li {
  display: flex;
  gap: 12px;
}

.doc .steps li::before {
  flex: none;
  content: attr(data-n);
  color: var(--blue);
  font-family: var(--display);
}

.doc .chip {
  padding: 1px 8px;
  border-radius: 99px;
  background: var(--tint);
  color: var(--ink);
  font-size: 0.86em;
}

kbd {
  padding: 1px 6px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px #8fb4ff55;
  font-family: var(--mono);
  font-size: 0.84em;
  color: var(--ink);
}

/* a wide table scrolls inside its own box, never the page */
.doc .compare-wrap,
.doc .table-wrap {
  overflow-x: auto;
  margin-block: 18px;
}

.doc .qs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* a table keeps its words whole and, on a phone, scrolls sideways inside its own box */
.doc table {
  min-width: 34rem;
  overflow-wrap: normal;
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
}

/* A web address is not a word: where the table has the room of a tablet or a desktop it may
   break, so a long one does not push the table a few letters past its box. On a phone the table
   scrolls sideways anyway, and there the address stays whole. */
@media (min-width: 620px) {
  .doc td a {
    overflow-wrap: anywhere;
  }
}

.doc th,
.doc td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}

.doc tbody tr:nth-child(odd) {
  background: var(--tint);
}

.doc details {
  margin-block: 14px;
}

.doc summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  color: var(--ink);
}

.doc pre {
  margin-block: 12px;
  white-space: pre-wrap;
  font-size: 13px;
}

.doc .lic-id {
  color: var(--blue);
  font-size: 0.6em;
}

/* every release, one after another */
.doc .release h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin: 0;
}

.doc .v-date {
  font: 400 14px var(--text);
  letter-spacing: 0;
  color: var(--blue);
}

/* ---------- parts: every section of a reading page stands in its own container ----------
   So a reader sees at a glance where a part begins and ends, with no line drawn: the part's
   heading at its top, its text inside, a clear space to the next part. The container is the
   material of the changelog's releases. The boxes inside a part (notes, table rows, the steps to
   the next part) are one step lighter than the part, so they do not vanish into it: inside a
   part the tint they all use is redefined. Blocks of commands are the darker step. */

.doc .doc-part,
.doc section[data-part],
.prose .doc-part {
  --tint: #8fb4ff1f;
  margin-top: 20px;
  padding: 24px;
  border-radius: 12px;
  background: #8fb4ff12;
}

.prose .doc-part {
  display: grid;
  gap: 16px;
  margin-top: 4px;
}

/* on the download page the first part keeps its distance from the buttons above it */
.prose > .doc-part:first-child {
  margin-top: 28px;
}

.doc .doc-part > h2:first-child,
.doc section[data-part] > h2:first-child,
.prose .doc-part > h2:first-child {
  margin-top: 0;
}

.doc .doc-part > :last-child,
.doc section[data-part] > :last-child {
  margin-bottom: 0;
}

/* a heading inside a part reads as a heading: by its size and weight, not by a line */
.doc .doc-part h3,
.doc section[data-part] h3 {
  margin: 36px 0 10px;
  font: 500 21px/1.25 var(--display);
  letter-spacing: -0.01em;
  text-transform: none;
}

/* the title of a small box inside a part stays a box title */
.doc .doc-part .fix h3,
.doc section[data-part] .fix h3 {
  margin: 0 0 6px;
  font: 600 17px/1.4 var(--text);
  letter-spacing: 0;
}

/* the name of a group of parts, standing between two groups with more room above it */
.g-group-title {
  margin: 60px 0 -4px;
  color: var(--blue);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.doc header + .g-group-title {
  margin-top: 30px;
}

@media (max-width: 619px) {
  .doc .doc-part,
  .doc section[data-part],
  .prose .doc-part {
    margin-top: 14px;
    padding: 18px 16px;
  }

  .g-group-title {
    margin-top: 44px;
  }
}

/* ---------- waiting for the public release ----------
   While OPEN_SOURCE_REPO in open.js is empty, every link to the repository and to the Download page is written in the
   HTML as a greyed piece that is not a link. It keeps its place and size, so nothing moves on launch day. The grey
   ground is the one the older pages already use for a switched-off button. */
a[data-waits][aria-disabled="true"],
a[data-waits][aria-disabled="true"]:hover {
  color: var(--soft);
  opacity: 0.55;
  cursor: default;
}

/* an underlined link loses its line, in the bar and in the text */
a[data-waits][aria-disabled="true"],
a[data-waits][aria-disabled="true"] span,
a[data-waits][aria-disabled="true"]:hover span {
  border-color: transparent;
  text-decoration: none;
}

/* the outlined buttons keep their outline, without the hover fill. The selectors name aria-disabled too, so that
   they outweigh the rule above that takes the line off a greyed link: without it the GitHub button lost its
   outline and its words stood indented beside the plain links. */
.bar nav a.get[data-waits][aria-disabled="true"],
.bar nav a.get[data-waits][aria-disabled="true"]:hover,
a.gh[data-waits][aria-disabled="true"],
a.gh[data-waits][aria-disabled="true"]:hover {
  border-color: var(--soft);
  background: #06091480;
}

/* the red button turns to the grey ground and is fully opaque, so its words stay readable */
.go[data-waits][aria-disabled="true"],
.go[data-waits][aria-disabled="true"]:hover {
  background: #2a3150;
  color: var(--soft);
  box-shadow: none;
  opacity: 1;
}