/* The docs site, in the app's design language: its tokens (tokens.css, copied
   from webapp/src/styles/00-tokens.css) and its fonts. Reading pages are set a
   step larger than the app's dense UI, on the same paper and ink. */

@font-face {
  font-family: "Space Grotesk";
  font-weight: 400;
  font-display: swap;
  src: url("fonts/space-grotesk-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-weight: 600;
  font-display: swap;
  src: url("fonts/space-grotesk-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-weight: 400;
  font-display: swap;
  src: url("fonts/space-mono-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-weight: 700;
  font-display: swap;
  src: url("fonts/space-mono-latin-700.woff2") format("woff2");
}

:root {
  /* 62, not 66: text is in the reader's system font, and one font's 66ch is
     another's 78 characters a line (Noto Sans 75, Ubuntu's 78). */
  --measure: 62ch;
  --toc-w: 15rem;
  color-scheme: light dark;
}
:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font: 1rem/1.6 var(--font-body);
}
a {
  color: var(--accent);
  text-underline-offset: 0.2em;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  inset-inline-start: var(--sp-2);
  inset-block-start: -10rem;
  padding: var(--sp-2) var(--sp-3);
  background: var(--sheet);
}
.skip:focus {
  inset-block-start: var(--sp-2);
}

/* ---- /next/ only: these pages run ahead of the release ---- */
.channel {
  margin: 0;
  padding: var(--sp-2) var(--sp-4);
  border-block-end: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 12%, var(--sheet));
  color: var(--ink);
  text-align: center;
}
.channel p {
  margin: 0;
}
.channel a {
  color: inherit;
  font-weight: 600;
}

/* ---- the bar across the top: the brand, then the two manuals ---- */
.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-6);
  padding: var(--sp-4) var(--sp-6);
  border-block-end: 1px solid var(--line);
  background: color-mix(in srgb, var(--desk) 55%, var(--sheet));
}
/* The app's wordmark: its mark, then INKHOLD in mono bold (02-app-shell-rail.css). */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding-block: var(--sp-1);
  font: 700 1.125rem var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--ink);
  text-decoration: none;
}
.brand__mark {
  flex: none;
}
.manuals {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.manuals a {
  padding-block: var(--sp-1);
  color: var(--ink-soft);
  text-decoration: none;
  font-family: var(--font-display);
}
.manuals a:hover,
.manuals a[aria-current] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}

/* ---- search: the app's search box (03-main-topbar.css) ---- */
.search {
  position: relative;
}
.search--bar {
  flex: 0 1 18rem;
}
.search__glyph {
  position: absolute;
  inset-inline-start: 12px;
  inset-block-start: 50%;
  inline-size: 16px;
  block-size: 16px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--ink-faint);
  stroke-width: 1.8;
  stroke-linecap: round;
  pointer-events: none;
}
.search input {
  inline-size: 100%;
  block-size: var(--hit-target);
  padding: 0 var(--sp-3) 0 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sheet);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
}
.search input::placeholder {
  color: var(--ink-faint);
}
/* Focus: the border turns accent and doubles, as in the app. */
.search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.search--page {
  max-inline-size: var(--measure);
  margin-block-end: var(--sp-3);
}
.search--page input {
  block-size: var(--hit-target-touch);
  font-size: 1rem;
}
.search-count {
  color: var(--ink-soft);
}
.search-count:empty {
  display: none;
}
.search-results mark {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  color: var(--ink);
  border-radius: 2px;
  padding: 0 1px;
}
/* The phone's way in: the glyph alone, a link to the search page. */
.search-glyph {
  display: none;
}

/* Light or dark: the app's quiet glyph button. */
.theme {
  display: inline-grid;
  place-items: center;
  align-self: center;
  inline-size: var(--hit-target-min);
  block-size: var(--hit-target-min);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.theme[hidden] {
  display: none;
}
.theme:hover {
  color: var(--ink);
  background: var(--hover);
}
.theme svg {
  inline-size: 18px;
  block-size: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme[aria-pressed="false"] .theme__sun,
.theme[aria-pressed="true"] .theme__moon {
  display: none;
}

/* ---- the manual's pages beside the page ---- */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  max-inline-size: calc(var(--measure) + var(--toc-w) + 6rem);
  margin-inline: auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-8);
}
@media (min-width: 900px) {
  .layout:has(> .toc) {
    grid-template-columns: var(--toc-w) minmax(0, 1fr);
  }
}
/* No sidebar (home, Get Inkhold, a manual's index): the page is centred. */
.layout:not(:has(> .toc)) .prose {
  margin-inline: auto;
}
.layout:not(:has(> .toc)) {
  max-inline-size: calc(64rem + 2 * var(--sp-4));
}
.toc {
  font-size: 0.9375rem;
}
.toc ul {
  margin: var(--sp-2) 0 0;
  padding: 0;
  list-style: none;
}
.toc a {
  display: block;
  padding: var(--sp-1) var(--sp-2);
  border-inline-start: 2px solid transparent;
  color: var(--ink-soft);
  text-decoration: none;
}
.toc a:hover {
  color: var(--ink);
  background: var(--hover);
}
.toc a[aria-current="page"] {
  border-inline-start-color: var(--accent);
  color: var(--ink);
  font-weight: 600;
}
/* ---- the page's own sections, beside it on a wide screen ---- */
.onthis {
  display: none;
  font-size: 0.875rem;
}
.onthis ul {
  margin: var(--sp-2) 0 0;
  padding: 0;
  list-style: none;
}
.onthis a {
  display: block;
  padding: var(--sp-1) var(--sp-2);
  color: var(--ink-soft);
  text-decoration: none;
}
.onthis a:hover {
  color: var(--ink);
  background: var(--hover);
}
@media (min-width: 1200px) {
  .layout:has(> .onthis) {
    grid-template-columns: var(--toc-w) minmax(0, 1fr) 13rem;
    max-inline-size: calc(var(--measure) + var(--toc-w) + 13rem + 8rem);
  }
  .onthis {
    display: block;
    position: sticky;
    inset-block-start: var(--sp-6);
    align-self: start;
  }
}

.toc__head {
  font-family: var(--font-display);
  font-weight: 600;
}
/* The four kinds: the app's eyebrow (mono, small, faint). */
.toc__kind {
  margin: var(--sp-4) 0 0;
  padding-inline: var(--sp-2);
  font: 400 var(--fs-eyebrow) var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
/* A planned page reads as such in the list, not as a finished one. */
.toc a.is-stub:not([aria-current]) {
  color: var(--ink-faint);
}

/* A heading's own link: there on hover and focus, the app's faint ink. */
.anchor {
  margin-inline-start: var(--sp-2);
  color: var(--ink-faint);
  font-weight: 400;
  text-decoration: none;
  opacity: 0;
}
:is(h2, h3, h4):hover > .anchor,
.anchor:focus-visible {
  opacity: 1;
}
@media (hover: none) {
  .anchor {
    display: none;
  }
}

/* Previous and next in the manual's order: two rows, the next one at the end. */
.pager {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--sp-3);
  margin-block-start: var(--sp-8);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--line);
}
.pager a {
  display: grid;
  gap: 2px;
  min-block-size: var(--hit-target-touch);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
}
.pager a:hover {
  background: var(--hover);
}
.pager span {
  font: 400 var(--fs-eyebrow) var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.pager__next {
  grid-column: -2;
  text-align: end;
}

/* ---- the page: ink on a sheet ---- */
main {
  min-inline-size: 0;
}
main:focus {
  outline: none;
}
.prose {
  max-inline-size: var(--measure);
  padding: var(--sp-6) var(--sp-8) var(--sp-8);
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
@media (max-width: 599px) {
  .prose {
    padding: var(--sp-4);
  }
}
.prose h1,
.prose h2,
.prose h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.25;
}
.prose h1 {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-display);
}
.prose h2 {
  margin: var(--sp-8) 0 var(--sp-3);
  font-size: var(--fs-heading);
}
.prose h3 {
  margin: var(--sp-6) 0 var(--sp-2);
  font-size: 1.125rem;
}
.prose :is(p, ul, ol, table, pre, figure) {
  margin: 0 0 var(--sp-4);
}
.prose li + li {
  margin-block-start: var(--sp-1);
}
.prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
}
.prose :not(pre) > code {
  padding: 0.1em 0.3em;
  border-radius: var(--radius);
  background: var(--hover);
}
.prose pre {
  overflow-x: auto;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--desk);
  line-height: 1.5;
}
.prose table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
}
.prose :is(th, td) {
  padding: var(--sp-2) var(--sp-3);
  border-block-end: 1px solid var(--line);
  text-align: start;
  vertical-align: top;
}
.prose th {
  font-family: var(--font-display);
}

/* "Contributor · Reference": the app's subtitle voice (mono, faint). */
.kind {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--ink-faint);
}

/* ---- a manual's index: every page as a row, the whole row the link ---- */
.prose--index {
  max-inline-size: 64rem;
}
.prose--index > p {
  max-inline-size: var(--measure);
}
.progress {
  color: var(--ink-soft);
}
.group h2 {
  margin-block-end: var(--sp-1);
}
.group__says {
  color: var(--ink-soft);
}
.rows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  column-gap: var(--sp-6);
  padding: 0;
  list-style: none;
}
/* The home page's two manuals: one per row, the column's width. */
.rows--wide {
  grid-template-columns: minmax(0, 1fr);
}
.prose .rows li {
  margin: 0;
  border-block-start: 1px solid var(--line);
}
.row {
  display: grid;
  gap: 2px;
  min-block-size: var(--hit-target-touch);
  padding: var(--sp-2) var(--sp-2) var(--sp-3);
  color: var(--ink);
  text-decoration: none;
}
.row:hover {
  background: var(--hover);
}
.row:hover b {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}
.row b {
  font-weight: 600;
}
.row span {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.5;
}
/* A planned page: its title faint and marked, in the app's small mono. */
.row.is-stub b {
  color: var(--ink-soft);
  font-weight: 400;
}
/* Planned: the app's open to-do ring (22-todo.css), "not done yet". */
.ring {
  display: inline-block;
  inline-size: 0.7em;
  block-size: 0.7em;
  margin-inline-end: 0.45em;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  vertical-align: -0.05em;
  opacity: 0.8;
}

.stub {
  margin: var(--sp-6) 0 0;
  padding: var(--sp-3) var(--sp-4);
  border-inline-start: 2px solid var(--line);
  background: var(--hover);
  color: var(--ink-soft);
}

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A diagram, inlined at build in both themes; the page's theme picks one. */
.diagram {
  margin: 0 0 var(--sp-4);
  overflow-x: auto;
}
.diagram svg,
.diagram img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
  /* The SVG's own width and height set its shape; CSS only shrinks it. */
  inline-size: auto;
  margin-inline: auto;
}
/* One theme's drawing only: `.diagram > ` outranks `.diagram img` above, which
   the preview's two <img> would otherwise both match. */
.diagram > .diagram__dark {
  display: none;
}
:root[data-theme="dark"] .diagram > .diagram__light {
  display: none;
}
:root[data-theme="dark"] .diagram > .diagram__dark {
  display: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .diagram > .diagram__light {
    display: none;
  }
  :root:not([data-theme="light"]) .diagram > .diagram__dark {
    display: block;
  }
}

.colophon p {
  margin: 0 0 var(--sp-2);
}
.colophon a {
  display: inline-block;
  padding-block: var(--sp-1);
  color: var(--ink-soft);
}
.colophon {
  padding: var(--sp-4) var(--sp-6) var(--sp-8);
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-caption);
  color: var(--ink-faint);
  text-align: center;
}

/* ---- a phone ---- */
@media (max-width: 699px) {
  /* The brand and the toggle on one row, the links on their own under it. */
  .masthead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
  }
  .manuals {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
  }
  /* Thumb-sized: the bar's links, the manual's pages. */
  .manuals a,
  .brand {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--hit-target-touch);
  }
  .toc a {
    display: flex;
    align-items: center;
    min-block-size: var(--hit-target-touch);
  }
  .colophon a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--hit-target-touch);
  }
  /* The field leaves; its glyph, beside the toggle, opens the search page. */
  .search--bar {
    display: none;
  }
  .search-glyph {
    display: inline-grid;
    place-items: center;
    grid-column: 2;
    grid-row: 1;
    inline-size: var(--hit-target-touch);
    block-size: var(--hit-target-touch);
    color: var(--ink-soft);
  }
  .search-glyph svg {
    inline-size: 20px;
    block-size: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
  }
  .theme {
    grid-column: 3;
    grid-row: 1;
    inline-size: var(--hit-target-touch);
    block-size: var(--hit-target-touch);
  }
  /* The page first; the manual's other pages after it. */
  .layout {
    padding-inline: 0;
  }
  .layout > .toc {
    order: 1;
    padding-inline: var(--sp-4);
  }
  .prose {
    border-inline: 0;
    border-radius: 0;
  }
}

/* In running text the ring is a word: the space after it is the gap. */
.progress .ring {
  margin-inline-end: 0;
}


/* ================= the home page ================= */
.layout:has(.home) {
  max-inline-size: 76rem;
}
.home {
  display: grid;
  gap: var(--sp-8);
}
.home h1,
.home h2 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.home h2 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-heading);
}
.home p {
  margin: 0 0 var(--sp-3);
  max-inline-size: 60ch;
}
.home code {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

/* Buttons: the app's square, outlined control; the one that matters is filled with ink. */
.button {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--hit-target-touch);
  padding: 0 var(--sp-4);
  border: 1px solid var(--ink-soft);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
}
.button:hover {
  background: var(--hover);
}
.button--primary {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--sheet);
}
.button--primary:hover {
  background: color-mix(in srgb, var(--ink) 85%, var(--sheet));
}

/* ---- hero: what it is, then the welcome page itself, on a screen and a phone ---- */
.hero {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
  padding-block: var(--sp-6) var(--sp-4);
}
.hero h1 {
  margin: 0 0 var(--sp-4);
  font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem);
  max-inline-size: 16ch;
}
.hero__lead {
  font-size: 1.125rem;
  line-height: 1.55;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block: var(--sp-6) var(--sp-4);
}
.hero__small {
  color: var(--ink-soft);
  font-size: 0.9375rem;
}
.hero__shots {
  position: relative;
  padding-inline-end: 9%;
  padding-block-end: 6%;
}
/* The phone stands in front of the screen's corner. */
.hero__shots .shot--phone {
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: 0;
  inline-size: 24%;
}
@media (min-width: 1000px) {
  .hero {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

/* ---- a screenshot: the app's sheet, framed like a window on the desk ---- */
.prose .shot {
  margin: var(--sp-4) 0 var(--sp-6);
}
/* A phone's screen in a reading column: its own width, centred. */
.prose .shot--phone {
  max-inline-size: 18rem;
  margin-inline: auto;
}
.shot {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--sheet);
  box-shadow:
    0 2px 3px var(--shadow),
    0 26px 50px -28px var(--shadow);
}
.shot img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
.shot--phone {
  border-radius: 18px;
  border-width: 4px;
  border-color: color-mix(in srgb, var(--ink) 80%, var(--desk));
}
/* The tablet's e-ink screen: the same in either theme, in the device's dark bezel. */
.prose .shot--tablet {
  max-inline-size: 30rem;
}
.shot--tablet {
  border-width: 10px;
  border-color: color-mix(in srgb, var(--ink) 80%, var(--desk));
}
/* One theme's picture: the hidden one, lazy, is never fetched. */
.shot > .shot__dark {
  display: none;
}
:root[data-theme="dark"] .shot > .shot__light {
  display: none;
}
:root[data-theme="dark"] .shot > .shot__dark {
  display: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot > .shot__light {
    display: none;
  }
  :root:not([data-theme="light"]) .shot > .shot__dark {
    display: block;
  }
}

/* ---- features: the words on one side, the screen on the other, alternating ---- */
.feature {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
  padding-block-start: var(--sp-8);
  border-block-start: 1px solid var(--line);
}
.feature__text a {
  color: var(--accent);
}
.feature__code {
  margin: var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sheet);
  font-size: 0.875rem;
  line-height: 1.6;
}
.feature__shots--pair {
  display: grid;
  gap: var(--sp-4);
}
.feature__shots--phones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  max-inline-size: 28rem;
  margin-inline: auto;
}
@media (min-width: 1000px) {
  .feature {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  }
  .feature--flip > .feature__text {
    order: 1;
  }
  .feature--flip {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  }
  .feature--phone {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }
  /* The bin and its history: one over the other, the second set in. */
  .feature__shots--pair > .shot:last-child {
    inline-size: 82%;
    margin-inline-start: auto;
    margin-block-start: -18%;
  }
}

/* ---- the numbers, as words: a definition list, not stat cards ---- */
.small {
  padding-block-start: var(--sp-8);
  border-block-start: 1px solid var(--line);
}
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--sp-4) var(--sp-6);
  margin: var(--sp-4) 0 0;
}
.facts dt {
  font-family: var(--font-display);
  font-weight: 600;
}
.facts dd {
  margin: var(--sp-1) 0 0;
  color: var(--ink-soft);
}

.beta {
  padding: var(--sp-6) var(--sp-8);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sheet);
}
.beta .rows {
  margin-block-start: var(--sp-4);
}
@media (max-width: 699px) {
  .beta {
    padding: var(--sp-4);
  }
  .home {
    padding-inline: var(--sp-4);
  }
}

/* A key, as the app draws one (22-todo.css, `.todo-keys kbd`). */
.prose kbd {
  display: inline-block;
  min-inline-size: 1.6em;
  padding: 0 0.35em;
  border: 1px solid var(--line);
  border-block-end-width: 2px;
  border-radius: var(--radius);
  background: var(--sheet);
  font: 0.8125em/1.5 var(--font-mono);
  text-align: center;
}