/* ============================================================================
   PROCTOR docs theme (2026-11-05).

   The docs pages are the same exam hall as the front page
   (site/assets/proctor.css): ruled paper, the desk strip along the top,
   Young Serif in the green ink, the red pen for marks and corrections, the
   answer sheet's pencil bubbles and one gold detail at a time. Every value
   below comes from the front page's tokens; nothing new was invented.

   How it gets onto the pages: docs/docs.json "theme" names this file and
   docs/_header.html. The docs builder copies this file to
   site/docs/theme/proctor.css and links it after the kit's docs.css, so the
   --dk-* tokens and the rules below win without !important. The kit's
   docs.css stays byte for byte Squire's.

   The front page has no dark mode, so the dark set is derived (the exam
   book's cardstock green at night, cream text, gold where the light page uses
   green, a softer red pen), as mapped in the stack's docs theme notes.

   File map: 1. fonts and tokens  2. frame  3. masthead  4. sidebar and menu
             5. article  6. code  7. tabs  8. tables, notes  9. toc, pager,
             footer  10. dark  11. responsive  12. motion  13. print

   The proctor reminds you: no copying from the neighbouring stylesheet.
   (We copied the patterns. Not the answers.)
   ========================================================================== */

/* ---------------------------------------------------- 1. fonts and tokens */

@font-face {
  font-family: "Young Serif";
  src: url("../../assets/fonts/young-serif-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Caveat";
  src: url("../../assets/fonts/caveat-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* The front page's palette, under the same names. */
  --p-green: #0c5449;
  --p-green-deep: #08352f;
  --p-green-ink: #0a3f37;
  --p-gold: #ffcc33;
  --p-gold-hi: #ffd65c;
  --p-cream: #f4f1ea;
  --p-paper: #fbf8f1;
  --p-desk: #eee7d7;
  --p-rule: rgba(12, 84, 73, 0.085);
  --p-crimson: #9b1c2e;
  --p-ink: #142521;
  --p-muted: #45524e;
  --p-pencil: #33393a;
  --p-sheet-ink: #2e7a6c;
  --p-white: #ffffff;
  --p-stock: #fffdf6;          /* the note slip and the desk tops */
  --p-hairline: rgba(20, 37, 33, 0.16);
  --p-margin: rgba(155, 28, 46, 0.38);
  --p-slab: #142521;           /* the install command's ground */
  --p-slab-ink: #f4f1ea;
  --p-display: "Young Serif", Georgia, "Times New Roman", serif;
  --p-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --p-body: var(--wsu-font-family-body, Lato, Calibri, "Helvetica Neue", Arial, sans-serif);
  --p-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --p-ease-thunk: cubic-bezier(0.3, 1.6, 0.5, 1);
  --p-masthead-h: 64px;
  --p-heading: var(--p-green-ink);
  --p-pen: var(--p-crimson);
  /* The red pen's underline under every page title: one hand-drawn stroke. */
  --p-pen-stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5C42 5.2 86 4.1 130 5.4c34 1 69 2.6 107-1.2' fill='none' stroke='%239b1c2e' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");

  /* The kit's tokens, set from the palette above. */
  --dk-bg: var(--p-paper);
  --dk-ink: var(--p-ink);
  --dk-muted: var(--p-muted);
  --dk-rule: #ddd5c2;
  --dk-accent: var(--p-green);
  --dk-on-accent: var(--p-white);
  --dk-note: var(--p-green);
  --dk-tip: var(--p-sheet-ink);
  --dk-warning: #634d00;
  --dk-danger: var(--p-crimson);
  --dk-code-bg: var(--p-desk);
  --dk-display: var(--p-display);
  --dk-mono: var(--wsu-font-family-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  --dk-radius: 6px;
  --dk-focus: var(--p-green);
  --dk-focus-w: 3px;
  --dk-focus-o: 3px;
  --dk-sidebar: 15.5rem;
  --dk-prose-max: 46rem;
  --dk-gap: 2rem;

  color-scheme: light;
}

/* ------------------------------------------------------------- 2. frame */

html {
  background: var(--dk-bg);
  scroll-padding-top: calc(var(--p-masthead-h) + 1rem);
}

/* Ruled exam paper, the same 32px rule as the front page. */
body {
  margin: 0;
  color: var(--dk-ink);
  background-color: var(--dk-bg);
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--p-rule) 31px 32px);
  font-family: var(--p-body);
}

:where(a, button, summary, [tabindex]):focus-visible {
  outline: var(--dk-focus-w) solid var(--dk-focus);
  outline-offset: var(--dk-focus-o);
  border-radius: 3px;
}

/* ---------------------------------------------------------- 3. masthead */

/* The desk the exam book sits on, kept in view while the page scrolls. */
.masthead {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  background: var(--p-desk);
  border-block-end: 1px solid rgba(20, 37, 33, 0.12);
}

.masthead__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-sizing: border-box;
  max-inline-size: 100rem;
  min-block-size: var(--p-masthead-h);
  margin-inline: auto;
  padding-inline: var(--dk-gap);
}

.masthead__brand {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  color: var(--dk-ink);
  text-decoration: none;
}

.masthead__mark {
  inline-size: 34px;
  block-size: 34px;
  border-radius: 8px;
}

.masthead__name {
  font-family: var(--p-display);
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  color: var(--p-heading);
}

.masthead__form {
  padding: 1px 6px;
  font-family: var(--dk-mono);
  font-size: 0.72rem;
  color: var(--dk-muted);
  white-space: nowrap;
  border: 1px solid currentColor;
  border-radius: 3px;
}

.masthead__nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 0.95rem;
}

.masthead__nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: 32px;
  color: var(--dk-ink);
  text-decoration: none;
  white-space: nowrap;
}

/* The red pen underline, as on the front page; it stays drawn under Docs. */
.masthead__nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 2px;
  block-size: 2px;
  background: var(--p-pen);
  transform: scaleX(0);
  transform-origin: left;
}

.masthead__nav a:hover::after,
.masthead__nav a:focus-visible::after,
.masthead__nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.masthead__nav a[aria-current="page"] {
  font-weight: 700;
  color: var(--p-heading);
}

/* --------------------------------------------------- 4. sidebar and menu */

.docs-layout {
  gap: 1.5rem clamp(1.75rem, 1rem + 2.5vw, 3.5rem);
  padding-block: 2.5rem 3.5rem;
  padding-inline: var(--dk-gap);
}

/* Group labels are the answer sheet's field labels: small caps, tracked out. */
.docs-nav__label {
  display: block;
  margin: 1.5rem 0 0.4rem;
  padding-block-end: 0.3rem;
  font-family: var(--p-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--p-sheet-ink);
  border-block-end: 1px solid var(--dk-rule);
}

/* Group lists are plain <ul> inside the kit's list: no bullets, no indent. */
.docs-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-nav__group + li {
  margin-top: 1rem;
}

/* Each page is a row on the answer sheet: an empty bubble on hover, the
   current page's bubble filled in pencil. */
.docs-nav a {
  position: relative;
  display: block;
  padding: 0.38rem 0.6rem 0.38rem 1.85rem;
  font-size: 0.97rem;
  line-height: 1.35;
  color: var(--dk-ink);
  text-decoration: none;
  border-radius: 4px;
}

.docs-nav a::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.45rem;
  inset-block-start: calc(0.38rem + 0.675em - 6px);
  inline-size: 15px;
  block-size: 11px;
  box-sizing: border-box;
  border: 1.5px solid transparent;
  border-radius: 50%;
}

.docs-nav a:hover {
  color: var(--p-heading);
  background: var(--p-desk);
}

.docs-nav a:hover::before {
  border-color: var(--p-sheet-ink);
}

.docs-nav a[aria-current="page"] {
  font-weight: 700;
  color: var(--p-heading);
  background: transparent;
}

.docs-nav a[aria-current="page"]::before {
  border-color: var(--p-pencil);
  border-radius: 48% 52% 50% 46%;
  background: radial-gradient(circle at 30% 35%, rgba(255, 255, 255, 0.18), transparent 40%), var(--p-pencil);
}

.docs-menu summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-block-size: 44px;
  box-sizing: border-box;
  padding: 0.4rem 1rem;
  font-family: var(--p-display);
  font-size: 1.1rem;
  color: var(--p-heading);
  background: var(--p-stock);
  border: 1px solid var(--p-hairline);
  border-block-start: 4px solid var(--dk-accent);
  border-radius: 2px 2px var(--dk-radius) var(--dk-radius);
  list-style: none;
  cursor: pointer;
}

.docs-menu summary::-webkit-details-marker {
  display: none;
}

.docs-menu summary::after {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  rotate: 45deg;
  translate: 0 -2px;
}

.docs-menu[open] summary::after {
  rotate: 225deg;
  translate: 0 2px;
}

.docs-menu {
  margin-block-end: 1.5rem;
}

.docs-menu[open] > .docs-nav {
  padding: 0.25rem 0.25rem 0.75rem;
}

/* ------------------------------------------------------------- 5. article */

.docs-article {
  font-family: var(--p-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--dk-ink);
}

.docs-article h1,
.docs-article h2,
.docs-article h3 {
  font-family: var(--p-display);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--p-heading);
  scroll-margin-top: calc(var(--p-masthead-h) + 1rem);
  text-wrap: balance;
}

.docs-article h1 {
  margin: 0 0 1.6rem;
  padding-block-end: 1.1rem;
  font-size: clamp(2.3rem, 1.7rem + 2.4vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  /* The red pen's stroke under the title, drawn once by hand. */
  background: var(--p-pen-stroke) no-repeat left bottom / min(15rem, 70%) 0.85rem;
}

.docs-article h2 {
  margin: 2.8rem 0 0.9rem;
  padding-bottom: 0.45rem;
  font-size: clamp(1.55rem, 1.3rem + 0.9vw, 2rem);
  line-height: 1.12;
  border-bottom: 1px solid var(--dk-rule);
}

.docs-article h3 {
  margin: 2rem 0 0.5rem;
  font-size: 1.3rem;
  line-height: 1.25;
}

.docs-article :is(h1, h2, h3) code {
  font-size: 0.78em;
}

.docs-heading-link {
  color: var(--dk-muted);
}

.docs-article a {
  color: var(--dk-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* A link the proctor is about to mark: the red pen, as on the front page. */
.docs-article a:hover {
  color: var(--p-pen);
}

.docs-article strong {
  color: var(--p-heading);
}

.docs-article :is(ul, ol) {
  padding-inline-start: 1.4rem;
}

.docs-article li {
  margin-block: 0.3rem;
}

.docs-article ol > li::marker {
  font-family: var(--p-display);
  color: var(--p-pen);
}

.docs-article ul > li::marker {
  color: var(--p-sheet-ink);
}

.docs-article img {
  max-inline-size: 100%;
  block-size: auto;
}

.docs-article hr {
  margin-block: 2.5rem;
  border: 0;
  border-block-start: 1px dashed rgba(20, 37, 33, 0.25);
}

/* ---------------------------------------------------------------- 6. code */

.docs-article code {
  padding: 0.05em 0.3em;
  font-size: 0.88em;
  color: var(--dk-ink);
  background: rgba(12, 84, 73, 0.08);
  border-radius: 3px;
  overflow-wrap: anywhere;
}

/* What you type: the front page's install command, an ink slab with cream
   type. Lines keep their shape, so a long one scrolls instead of wrapping. */
.docs-article pre {
  margin: 1.1rem 0 1.4rem;
  padding: 1rem 1.15rem 1.1rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--p-slab-ink);
  background: var(--p-slab);
  border: 1px solid var(--p-slab);
  border-radius: var(--dk-radius);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 6px 16px rgba(20, 37, 33, 0.14);
  tab-size: 4;
  scrollbar-color: #45524e transparent;
}

.docs-article pre code {
  padding: 0;
  font-size: inherit;
  color: inherit;
  background: none;
  border-radius: 0;
  overflow-wrap: normal;
}

/* With docs.js the block sits in .docs-copy: the slab moves to the wrapper and
   the pre stops short of a gutter, so the gold Copy tab never covers a command. */
.docs-copy {
  margin: 1.1rem 0 1.4rem;
  background: var(--p-slab);
  border: 1px solid var(--p-slab);
  border-radius: var(--dk-radius);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 6px 16px rgba(20, 37, 33, 0.14);
}

.docs-copy > pre {
  margin: 0;
  margin-inline-end: 5rem;
  padding-inline-end: 0.75rem;
  background: transparent;
  border: 0;
  border-radius: var(--dk-radius) 0 0 var(--dk-radius);
  box-shadow: none;
}

/* The Copy button is the install command's: gold, flush in the slab's corner. */
.docs-copy__button {
  inset-block-start: 0;
  inset-inline-end: 0;
  min-block-size: 40px;
  min-inline-size: 4.5rem;
  padding: 0 1rem;
  font-family: var(--p-body);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--p-ink);
  background: var(--p-gold);
  border: 0;
  border-radius: 0 var(--dk-radius) 0 var(--dk-radius);
  cursor: pointer;
}

.docs-copy__button:hover {
  color: var(--p-ink);
  background: var(--p-gold-hi);
}

.docs-copy__button:focus-visible {
  outline-color: var(--p-ink);
  outline-offset: -4px;
}

/* A block that scrolls sideways takes focus (docs.js): gold ring inside the slab. */
.docs-article pre:focus-visible {
  outline: 3px solid var(--p-gold);
  outline-offset: -4px;
}

/* ---------------------------------------------------------------- 7. tabs */

/* Synced shell tabs, when the builder makes them: the front page's quick
   start tabs, cream index cards with a red pen bar on the one that is open. */
.docs-tabs__tablist {
  gap: 4px;
  margin-bottom: 0;
}

.docs-tabs__tab {
  position: relative;
  min-height: 44px;
  padding: 0.5rem 1rem;
  font: 700 0.9rem var(--dk-mono);
  color: var(--dk-ink);
  background: var(--p-cream);
  border: 1px solid rgba(20, 37, 33, 0.25);
  border-bottom: 0;
  border-radius: var(--dk-radius) var(--dk-radius) 0 0;
  box-shadow: none;
}

.docs-tabs__tab:hover {
  color: var(--p-heading);
  border-color: rgba(20, 37, 33, 0.25);
}

.docs-tabs__tab[aria-selected="true"] {
  color: var(--dk-ink);
  background: var(--p-white);
  border-color: rgba(20, 37, 33, 0.25);
  box-shadow: none;
}

.docs-tabs__tab[aria-selected="true"]::before {
  content: "";
  position: absolute;
  inset-inline: 10px;
  inset-block-start: 0;
  block-size: 3px;
  background: var(--p-pen);
  border-radius: 0 0 2px 2px;
}

.docs-tabs__panel .docs-copy,
.docs-tabs__panel > pre {
  margin-top: 0;
  border-start-start-radius: 0;
}

.docs-tabs__label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--p-sheet-ink);
}

/* ------------------------------------------------------- 8. tables, notes */

/* Tables are the answer sheet: white stock, drop-out green rules. */
.docs-table {
  margin: 1.25rem 0 1.5rem;
  background: var(--p-white);
  border: 1px solid rgba(46, 122, 108, 0.35);
  border-radius: 4px;
  box-shadow: 0 18px 32px -28px rgba(20, 37, 33, 0.55);
}

.docs-article table {
  font-size: 0.95rem;
  line-height: 1.5;
}

.docs-article th {
  font-family: var(--p-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--p-sheet-ink);
  background: transparent;
  border-bottom: 2px solid var(--p-sheet-ink);
}

.docs-article th,
.docs-article td {
  padding: 0.6rem 0.9rem;
  text-align: start;
  vertical-align: top;
}

.docs-article td {
  border-bottom: 1px solid rgba(46, 122, 108, 0.22);
}

/* A rule id or command keeps its shape in a cell: the column sizes to it, and
   it only breaks if it would spill out of the table. */
.docs-article td code {
  overflow-wrap: break-word;
}

.docs-article tbody tr:last-child td {
  border-bottom: 0;
}

/* Notes are slips of paper pinned to the exam: off-white stock, the label
   pencilled in by hand, the margin in the note's own ink. */
.docs-article blockquote,
.docs-callout {
  margin: 1.6rem 0;
  padding: 0.9rem 1.2rem 1rem;
  color: var(--dk-ink);
  background: var(--p-stock);
  border: 1px solid rgba(20, 37, 33, 0.2);
  border-inline-start: 4px solid var(--p-sheet-ink);
  border-radius: 0 var(--dk-radius) var(--dk-radius) 0;
  box-shadow: 0 14px 24px -20px rgba(20, 37, 33, 0.6);
}

.docs-article blockquote > :last-child,
.docs-callout > :last-child {
  margin-bottom: 0;
}

.docs-callout__label {
  margin: 0 0 0.3rem;
  font-family: var(--p-hand);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}

.docs-callout--note {
  border-inline-start-color: var(--dk-note);
}

.docs-callout--tip {
  border-inline-start-color: var(--dk-tip);
}

.docs-callout--warning {
  border-inline-start-color: var(--p-gold);
}

.docs-callout--danger {
  border-inline-start-color: var(--dk-danger);
}

.docs-callout--note .docs-callout__label {
  color: var(--dk-note);
}

.docs-callout--tip .docs-callout__label {
  color: var(--dk-tip);
}

.docs-callout--warning .docs-callout__label {
  color: var(--dk-warning);
}

.docs-callout--danger .docs-callout__label {
  color: var(--dk-danger);
}

/* ------------------------------------------------ 9. toc, pager, footer */

.docs-toc__title {
  font-family: var(--p-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--p-sheet-ink);
}

.docs-toc__list {
  border-left: 2px solid var(--dk-rule);
}

.docs-toc__item a {
  margin-inline-start: -2px;
  font-size: 0.93rem;
  line-height: 1.4;
  border-inline-start: 2px solid transparent;
}

.docs-toc__item a:hover {
  color: var(--p-heading);
  border-inline-start-color: var(--p-pen);
}

/* Previous and next are question cards: white stock, the green rule on top. */
.docs-pager {
  margin-top: 3rem;
  padding-top: 0;
  border-top: 0;
}

.docs-pager__link {
  box-sizing: border-box;
  flex: 1 1 0;
  max-width: 22rem;
  padding: 0.85rem 1.1rem 1rem;
  background: var(--p-white);
  border: 1px solid var(--p-hairline);
  border-block-start: 4px solid var(--dk-accent);
  border-radius: 2px 2px var(--dk-radius) var(--dk-radius);
  box-shadow: 0 1px 0 rgba(20, 37, 33, 0.06), 0 10px 20px -16px rgba(20, 37, 33, 0.4);
}

.docs-pager__link--next {
  margin-inline-start: auto;
}

.docs-pager__dir {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dk-muted);
}

.docs-pager__title {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--p-display);
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--p-heading);
  text-decoration: none;
}

.docs-pager__link:hover .docs-pager__title {
  color: var(--p-pen);
}

/* The front page's green footer band, full bleed under a centered row:
   pencils down. */
.docs-footer {
  flex-wrap: wrap;
  align-items: baseline;
  padding-block: 2rem;
  padding-inline: var(--dk-gap);
  color: #f4f1ea;
  background: var(--p-green);
  border-top: 0;
  box-shadow: 0 0 0 100vmax var(--p-green);
  clip-path: inset(0 -100vmax);
}

.docs-footer a {
  color: var(--p-gold);
}

.docs-footer a:hover {
  color: #ffffff;
}

/* --------------------------------------------------------------- 10. dark */

/* Derived: the front page has no dark mode. The exam book's cardstock green
   for the ground, cream text, gold where the light page uses green, and a
   red pen light enough to read at night. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --p-heading: #f1ecdf;
    --p-pen: #ff8fa0;
    --p-margin: rgba(255, 143, 160, 0.3);
    --p-desk: #162925;
    --p-stock: #132623;
    --p-white: #11231f;
    --p-cream: #1a2f2a;
    --p-rule: rgba(241, 236, 223, 0.04);
    --p-hairline: #2f443e;
    --p-sheet-ink: #8fcfbf;
    --p-pencil: #f1ecdf;
    --p-slab: #08150f;
    --p-green: #0a3f37;
    --p-pen-stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5C42 5.2 86 4.1 130 5.4c34 1 69 2.6 107-1.2' fill='none' stroke='%23ff8fa0' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");

    --dk-bg: #0e1f1c;
    --dk-ink: #f1ecdf;
    --dk-muted: #b8c4be;
    --dk-rule: #2f443e;
    --dk-accent: var(--p-gold);
    --dk-on-accent: #142521;
    --dk-note: var(--p-gold);
    --dk-tip: #8fcfbf;
    --dk-warning: var(--p-gold);
    --dk-danger: #ff8fa0;
    --dk-code-bg: #162925;
    --dk-focus: var(--p-gold);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --p-heading: #f1ecdf;
  --p-pen: #ff8fa0;
  --p-margin: rgba(255, 143, 160, 0.3);
  --p-desk: #162925;
  --p-stock: #132623;
  --p-white: #11231f;
  --p-cream: #1a2f2a;
  --p-rule: rgba(241, 236, 223, 0.04);
  --p-hairline: #2f443e;
  --p-sheet-ink: #8fcfbf;
  --p-pencil: #f1ecdf;
  --p-slab: #08150f;
  --p-green: #0a3f37;
  --p-pen-stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5C42 5.2 86 4.1 130 5.4c34 1 69 2.6 107-1.2' fill='none' stroke='%23ff8fa0' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");

  --dk-bg: #0e1f1c;
  --dk-ink: #f1ecdf;
  --dk-muted: #b8c4be;
  --dk-rule: #2f443e;
  --dk-accent: var(--p-gold);
  --dk-on-accent: #142521;
  --dk-note: var(--p-gold);
  --dk-tip: #8fcfbf;
  --dk-warning: var(--p-gold);
  --dk-danger: #ff8fa0;
  --dk-code-bg: #162925;
  --dk-focus: var(--p-gold);

  color-scheme: dark;
}

/* A few pieces name their color directly in dark: the slab and inline code
   need their own grounds, and the hairlines lift. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .masthead {
    border-block-end-color: var(--dk-rule);
  }

  :root:not([data-theme="light"]) .docs-article code {
    background: rgba(241, 236, 223, 0.08);
  }

  :root:not([data-theme="light"]) .docs-article pre code {
    background: none;
  }

  :root:not([data-theme="light"]) :is(.docs-article pre, .docs-copy) {
    border-color: var(--dk-rule);
    box-shadow: none;
  }

  :root:not([data-theme="light"]) .docs-copy > pre {
    border: 0;
  }

  :root:not([data-theme="light"]) :is(.docs-table, .docs-article blockquote, .docs-callout, .docs-pager__link, .docs-tabs__tab) {
    border-color: var(--dk-rule);
    box-shadow: none;
  }

  :root:not([data-theme="light"]) :is(.docs-callout--note, .docs-callout--warning) {
    border-inline-start-color: var(--p-gold);
  }

  :root:not([data-theme="light"]) .docs-callout--tip {
    border-inline-start-color: var(--dk-tip);
  }

  :root:not([data-theme="light"]) .docs-callout--danger {
    border-inline-start-color: var(--dk-danger);
  }

  :root:not([data-theme="light"]) :is(.docs-pager__link, .docs-menu summary) {
    border-block-start-color: var(--p-gold);
  }

  :root:not([data-theme="light"]) .docs-article blockquote {
    border-inline-start-color: var(--p-sheet-ink);
  }

  :root:not([data-theme="light"]) .docs-article td {
    border-bottom-color: var(--dk-rule);
  }

  :root:not([data-theme="light"]) .docs-footer {
    border-top: 1px solid var(--dk-rule);
  }
}

:root[data-theme="dark"] .masthead {
  border-block-end-color: var(--dk-rule);
}

:root[data-theme="dark"] .docs-article code {
  background: rgba(241, 236, 223, 0.08);
}

:root[data-theme="dark"] .docs-article pre code {
  background: none;
}

:root[data-theme="dark"] :is(.docs-article pre, .docs-copy) {
  border-color: var(--dk-rule);
  box-shadow: none;
}

:root[data-theme="dark"] .docs-copy > pre {
  border: 0;
}

:root[data-theme="dark"] :is(.docs-table, .docs-article blockquote, .docs-callout, .docs-pager__link, .docs-tabs__tab) {
  border-color: var(--dk-rule);
  box-shadow: none;
}

:root[data-theme="dark"] :is(.docs-callout--note, .docs-callout--warning) {
  border-inline-start-color: var(--p-gold);
}

:root[data-theme="dark"] .docs-callout--tip {
  border-inline-start-color: var(--dk-tip);
}

:root[data-theme="dark"] .docs-callout--danger {
  border-inline-start-color: var(--dk-danger);
}

:root[data-theme="dark"] :is(.docs-pager__link, .docs-menu summary) {
  border-block-start-color: var(--p-gold);
}

:root[data-theme="dark"] .docs-article blockquote {
  border-inline-start-color: var(--p-sheet-ink);
}

:root[data-theme="dark"] .docs-article td {
  border-bottom-color: var(--dk-rule);
}

:root[data-theme="dark"] .docs-footer {
  border-top: 1px solid var(--dk-rule);
}

/* --------------------------------------------------------- 11. responsive */

@media (min-width: 760px) {
  /* The sidebar rides under the masthead while the page scrolls. */
  .docs-nav--sidebar {
    position: sticky;
    top: calc(var(--p-masthead-h) + 1.25rem);
    max-block-size: calc(100vh - var(--p-masthead-h) - 2.5rem);
    overflow-y: auto;
    padding-inline-end: 0.25rem;
  }

  .docs-nav--sidebar > .docs-nav__list > li:first-child > .docs-nav__label {
    margin-top: 0;
  }

  /* The red double margin line of exam paper, down the left of the answer. */
  .docs-content {
    padding-inline-start: 1.6rem;
    background: linear-gradient(to right, var(--p-margin) 0 1px, transparent 1px 4px, var(--p-margin) 4px 5px, transparent 5px) left top / 5px 100% no-repeat;
  }
}

@media (min-width: 1200px) {
  .docs-layout--toc .docs-toc {
    top: calc(var(--p-masthead-h) + 1.25rem);
  }
}

/* Tablet: the front page's section links give way to the docs' own menu. */
@media (max-width: 1100px) {
  .masthead__nav a[href*="index.html#"] {
    display: none;
  }
}

/* Phone: the seal, the name and the two links that leave the page. */
@media (max-width: 640px) {
  :root {
    --dk-gap: 1rem;
  }

  .masthead__nav {
    gap: 16px;
  }

  .docs-layout {
    padding-block-start: 1rem;
  }

  .docs-article pre {
    font-size: 0.8125rem;
  }

  /* No room for a gutter: the Copy tab takes a band above the code instead. */
  .docs-copy > pre {
    margin-inline-end: 0;
    padding-block-start: 2.9rem;
    padding-inline-end: 1rem;
    border-radius: var(--dk-radius);
  }

  .docs-pager {
    flex-direction: column;
    gap: 0.75rem;
  }

  .docs-pager__link {
    max-width: none;
  }
}

@media (max-width: 420px) {
  .masthead__form {
    display: none;
  }
}

/* ------------------------------------------- 12. motion (no-preference) */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* The seal turns its head to keep an eye on you, as on the front page. */
  .masthead__mark {
    transition: transform 0.4s var(--p-ease-thunk);
  }

  .masthead__brand:hover .masthead__mark {
    transform: rotate(-8deg) scale(1.06);
  }

  .masthead__nav a::after {
    transition: transform 0.3s var(--p-ease-out);
  }

  /* The red pen writes its stroke under the title once, as the page lands. */
  .docs-article h1 {
    animation: pen-stroke 0.9s steps(14, end) 0.2s both;
  }

  .docs-pager__link {
    transition: transform 0.3s var(--p-ease-out), box-shadow 0.3s;
  }

  .docs-pager__link:hover {
    transform: translateY(-3px) rotate(-0.3deg);
    box-shadow: 0 16px 28px -18px rgba(20, 37, 33, 0.5);
  }

  .docs-nav a,
  .docs-copy__button {
    transition: background-color 0.15s, color 0.15s;
  }
}

@keyframes pen-stroke {
  from { background-size: 0 0.85rem; }
  to { background-size: min(15rem, 70%) 0.85rem; }
}

/* -------------------------------------------------------------- 13. print */

@media print {
  body {
    background-image: none;
  }

  .masthead {
    position: static;
  }

  .masthead__nav {
    display: none;
  }

  .docs-content {
    background: none;
    padding-inline-start: 0;
  }

  .docs-article pre,
  .docs-copy {
    color: #142521;
    background: #ffffff;
    border-color: #ddd5c2;
    box-shadow: none;
  }

  .docs-copy > pre {
    margin-inline-end: 0;
    white-space: pre-wrap;
  }

  .docs-copy__button {
    display: none;
  }

  .docs-footer {
    color: #142521;
    background: none;
    box-shadow: none;
    clip-path: none;
  }
}