/* The stylesheet for every page the documentation and the platform serve.
 *
 * Served from /assets/docs.css (and /docs/assets/docs.css). The static
 * cookbook pages, the pages the services render, the console and the back
 * office all link this same file, so a change lands on all of them at once.
 *
 * It is the Nums design system applied to this service's markup, so that
 * platform.nums.world, docs.nums.world and nums.world read as one company's:
 * the system's tokens and fonts (tokens.css and fonts.css, copied unchanged),
 * its header (64px, the thin wordmark, a context label after a rule), its
 * sidebar rail, its black-and-white pill buttons, its 12px fields and its
 * tables. Values come from the tokens; nothing below introduces a colour of
 * its own, which is what makes dark mode work: the tokens switch to their
 * dark values when the operating system asks for dark, and every rule here
 * follows. The one accent is the system's: purple is not used, because
 * nothing on these pages is a focal object.
 *
 * Both imports are same-origin, so the content security policy in
 * web/base.py (style-src 'self', font-src through default-src 'self') needs
 * nothing added for them. */
@import url("tokens.css");
@import url("fonts.css");

/* Names the service's inline rules have always used, kept as aliases of the
   tokens so those rules follow the theme too. */
:root {
  --bg: var(--color-paper);
  --bg2: var(--color-surface);
  --ink: var(--color-ink);
  --muted: var(--color-muted);
  --line: var(--color-line);
  --line2: var(--color-line);
  --sel: var(--color-accent-soft);
  --sans: var(--font-sans);
  --mono: var(--font-mono);
  --page-width: var(--content-width);
  --nav-h: var(--site-header-height);
  --side-w: 232px;
  --field-line: var(--color-button-line);
}

/* --- Base (the design system's base.css, as far as these pages use it) --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar-thumb) transparent;
  background: var(--color-paper);
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--color-accent-soft); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--tracking-heading);
  font-optical-sizing: auto;
  text-wrap: balance;
}
h1:lang(ko), h2:lang(ko), h3:lang(ko) { letter-spacing: 0; }
p { text-wrap: pretty; }
strong { font-weight: 600; }
small { font-size: var(--text-small); }

/* --- Header ---------------------------------------------------------------
   The design system's header (header.css) as docs.nums.world draws it: the
   wordmark at --brand-header-width, the context label after a rule, the
   links in 13px ink, actions at the far end, and under 850px a round menu
   button that opens the links as a list. A <details> element, so it needs no
   script. What this bar adds is the dashboard button where docs.nums.world
   has its own. */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-header-scrolled);
  border-bottom: 1px solid var(--color-line);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.skip {
  position: absolute; top: -100px; left: var(--gutter); z-index: 60;
  padding: 12px 24px; background: var(--color-surface); color: var(--color-ink);
}
.skip:focus { top: 10px; }
.nav-inner {
  position: relative;
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--content-width);
  margin-inline: auto;
  min-height: calc(var(--site-header-height) - 1px);
  display: flex;
  align-items: center;
  gap: 40px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; min-width: 0; }
.brand-home {
  display: inline-flex; align-items: center;
  width: var(--brand-header-width); min-height: 44px; flex-shrink: 0;
  text-decoration: none;
}
.brand-home img, .site-foot-brand img {
  display: block; width: 100%; height: auto;
  filter: var(--brand-filter);
}
.brand-home img { transform: translateY(-2px); }
.brand-tag {
  display: inline-flex; align-items: center; min-height: 44px;
  padding-left: 12px;
  border-left: 1px solid var(--color-line);
  color: var(--color-ink);
  font-size: var(--text-small);
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
}
.nav-links { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.nav-links a {
  min-height: 44px; display: flex; align-items: center; padding-inline: 8px;
  color: var(--color-ink); font-size: 13px; line-height: 1.5; white-space: nowrap;
  text-decoration: none;
}
.nav-links a:hover { text-decoration: underline; text-decoration-color: var(--color-button-hover-line);
  text-underline-offset: 6px; text-decoration-thickness: 1px; }
.nav-links a[aria-current], .nav-menu nav a[aria-current] {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-dash {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--button-height-sm);
  padding: var(--button-padding-block-sm) var(--button-padding-inline-sm);
  border: 1px solid var(--color-action);
  border-radius: var(--radius-control);
  background: var(--color-action);
  color: var(--color-action-ink);
  font: 500 var(--text-small) / var(--button-line-height) var(--font-sans);
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.nav-dash:hover, .nav-dash[aria-current] { background: var(--color-action-hover); border-color: var(--color-action-hover); }
.nav-menu { display: none; }
.nav-menu summary {
  list-style: none; cursor: pointer;
  width: 44px; height: 44px; border-radius: var(--radius-control);
  background: var(--color-surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary span { display: block; width: 20px; height: 1px; background: var(--color-ink);
  transition: transform var(--motion-fast); }
.nav-menu[open] summary span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-menu[open] summary span:last-child { transform: translateY(-4px) rotate(-45deg); }
.nav-menu nav {
  position: absolute; top: 100%;
  left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter));
  max-height: calc(100dvh - var(--site-header-height));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px var(--gutter) 24px;
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-line);
  box-shadow: 0 18px 48px var(--color-shadow);
  display: flex; flex-direction: column;
}
.nav-menu nav a {
  display: flex; align-items: center; min-height: 48px; padding-block: 8px;
  font-size: 20px; line-height: 1.4; letter-spacing: -.02em;
  color: var(--color-ink); text-decoration: none;
  border-bottom: 1px solid var(--color-line);
}
.nav-menu nav a:last-child { border-bottom: 0; }
@media (max-width: 850px) {
  .nav-inner { gap: 16px; }
  .nav-links { display: none; }
  .nav-menu { display: block; }
}
@media (max-width: 640px) {
  .nav-dash { display: none; }
}
@media (max-width: 420px) {
  .brand { gap: 8px; }
  .brand-tag { padding-left: 8px; font-size: 13px; }
}

/* --- Footer ----------------------------------------------------------------
   The wordmark and the copyright line, on the page's own paper, as the
   design system's documentation footer has them. */
.site-foot { background: var(--color-paper); border-top: 1px solid var(--color-line); }
.site-foot-row {
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--content-width);
  margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  min-height: 88px; padding-block: 20px;
}
.site-foot-brand { display: inline-flex; align-items: center; flex-shrink: 0;
  width: var(--brand-header-width); min-height: 44px; }
.copyright {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .03em; white-space: nowrap;
}

/* --- Frame ----------------------------------------------------------------
   The sidebar rail and the content beside it. A short page keeps the footer
   at the bottom of the window. */
body > .frame { flex: 1 0 auto; }
.frame {
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--reading-start-space) 0 var(--page-end-space);
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
/* The sign-in page and the other pages without a sidebar: one column,
   starting where the wordmark starts. */
.frame:has(> .side[aria-hidden="true"]) { grid-template-columns: minmax(0, 1fr);
  padding-top: var(--page-start-space); }
.side[aria-hidden="true"] { display: none; }

/* The design system's sidebar rail (sidebar.css): labels in ink, links in
   the muted colour with a rounded fill on hover, the current page on the
   soft accent fill. Pulled 8px left so its text lines up with the wordmark. */
.side {
  position: sticky;
  top: calc(var(--site-header-height) + var(--reading-start-space));
  max-height: calc(100dvh - var(--site-header-height) - var(--reading-start-space) - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  margin-left: -8px;
  font-size: 13px;
}
.side-group + .side-group { margin-top: 30px; }
.side-label {
  display: block;
  padding: 0 8px;
  margin-bottom: 8px;
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
.side a {
  display: block;
  min-height: 36px;
  padding: 8px;
  border-radius: var(--radius-field);
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.5;
  text-decoration: none;
  overflow-wrap: break-word;
}
.side a:hover { color: var(--color-ink); background: var(--color-surface-raised); }
.side a[aria-current] { color: var(--color-ink); background: var(--color-accent-soft); font-weight: 500; }
.doc { max-width: var(--reading-width); min-width: 0; }

/* Every problem document's `type` is the reference plus #<code>, so the row a
   link lands on has to be visible below the bar, and marked briefly so the
   reader can see which of twenty rows they came for. */
[id] { scroll-margin-top: calc(var(--site-header-height) + 24px); }
@keyframes landed {
  from { background: var(--color-accent-soft); }
  to   { background: transparent; }
}
tr:target td { animation: landed 2s ease-out 1 both; }

/* --- Type -------------------------------------------------------------------
   The working pages (sign-in, console, dashboard) set titles at the system's
   compact size; the documentation sets its page title at the reading size
   docs.nums.world uses. Headings in DM Sans, everything else in Geist. */
.doc h1 {
  font-size: var(--text-compact);
  font-weight: var(--font-weight-heading);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-heading);
  margin: 0 0 20px;
}
.doc h2 {
  font-size: var(--text-reading-subheading);
  font-weight: var(--font-weight-reading-heading);
  line-height: var(--leading-reading-subheading);
  letter-spacing: -0.01em;
  margin: 40px 0 12px;
}
.doc h3 {
  font-size: 17px;
  font-weight: var(--font-weight-reading-heading);
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 28px 0 8px;
}
body[data-section="docs"] .doc h1 {
  font-size: var(--text-title);
  font-weight: var(--font-weight-display);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-display);
  margin-bottom: 28px;
}
body[data-section="docs"] .doc h2 {
  font-size: var(--text-reading-heading);
  line-height: var(--leading-reading-heading);
  letter-spacing: -0.015em;
  margin: var(--prose-heading-space) 0 var(--prose-heading-content-space);
}
body[data-section="docs"] .doc h3 {
  font-size: var(--text-reading-subheading);
  line-height: var(--leading-reading-subheading);
  margin: 32px 0 12px;
}
p { margin: 0 0 16px; }
/* Kept for any page that still marks an introduction this way: it is set as
   ordinary body text, not as a grey aside. */
.lead { margin: 0 0 16px; }
.lead > p:last-child { margin-bottom: 16px; }
.doc p a:not(.oauth-button), .doc li a, .doc td a, .lead a {
  text-decoration: underline;
  text-decoration-color: var(--color-button-hover-line);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.doc p a:not(.oauth-button):hover, .doc li a:hover, .doc td a:hover, .lead a:hover {
  text-decoration-color: var(--color-ink);
}
hr { border: 0; border-top: 1px solid var(--color-line); margin: 32px 0; }
/* A heading straight after a rule takes the rule's place rather than adding
   its own space above it. */
hr + h2 { margin-top: 0 !important; }
ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 6px; }
.eyebrow { font-size: 13px; font-weight: 600; }
.muted { color: var(--color-muted); }

/* --- Code -------------------------------------------------------------------
   Geist Mono on the surface colour; pygments' classes are mapped to the
   system's syntax roles below, so highlighted code follows the theme. */
code, pre, kbd { font-family: var(--font-mono); }
p code, li code, td code, th code {
  background: var(--color-surface-raised);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.86em;
  white-space: nowrap;
}
pre, .hl {
  margin: 0 0 20px;
  padding: 16px 20px;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-code);
  overflow-x: auto;
  color: var(--color-ink);
  font-size: var(--text-code);
  line-height: var(--leading-code);
}
pre code, .hl pre { background: none; padding: 0; border: 0; font-size: inherit; }
.hl pre { margin: 0; overflow: visible; line-height: var(--leading-code);
  background: transparent !important; border: 0; border-radius: 0; }
.doc pre { line-height: var(--leading-code); }
/* Recorded output is printed, not written, so it carries no syntax colour. */
.hl.out { background: var(--color-paper) !important; }
.hl.out span { color: var(--color-ink) !important; }
.label { font-size: var(--text-small); font-weight: 600; margin: 0 0 8px; }
/* The design system's pygments adapter (syntax.css). */
.hl span { color: inherit; font-weight: inherit !important; font-style: normal !important;
  background: transparent !important; border: 0 !important; }
.hl :is(.c,.ch,.cm,.cp,.cpf,.c1,.cs) { color: var(--color-syntax-comment) !important; }
.hl :is(.s,.sa,.sb,.sc,.dl,.sd,.s2,.se,.sh,.si,.sx,.sr,.s1,.ss) { color: var(--color-syntax-string) !important; }
.hl :is(.m,.mb,.mf,.mh,.mi,.il,.mo) { color: var(--color-syntax-number) !important; }
.hl :is(.o,.ow) { color: var(--color-syntax-operator) !important; }
.hl :is(.k,.kc,.kd,.kn,.kp,.kr,.kt) { color: var(--color-syntax-keyword) !important; }
.hl :is(.nf,.fm,.nb,.bp,.nd) { color: var(--color-syntax-function) !important; }
.hl :is(.nc,.ne,.nn,.nt) { color: var(--color-syntax-class) !important; }
.hl :is(.ge,.ges) { font-style: italic !important; }
.hl :is(.gs,.ges) { font-weight: 600 !important; }
.hl .err { color: var(--color-status-danger) !important; }
.hl :is(.gd,.gi) { color: var(--color-ink) !important; }

/* --- Tables -------------------------------------------------------------------
   The documentation's: rules between rows, the head row on the raised
   surface. Wrapped in a scroller by the renderer so a wide table never widens
   the page. The console's tables (console.css) sit in a bordered frame. */
.tw { max-width: 100%; overflow-x: auto; margin: 0 0 24px; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
  line-height: 1.6;
  margin: 0 0 24px;
}
.tw table { margin: 0; }
/* A documentation table keeps a readable width and scrolls on a phone, as
   docs.nums.world's do, rather than folding its prose into one-word lines. */
body[data-section="docs"] .tw table { min-width: 560px; }
th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-line);
  vertical-align: top;
}
th, thead th { background: var(--color-surface-raised); font-weight: 500; }
thead th { white-space: nowrap; }
/* Two-column tables of figures: the figure on the right, in tabular digits. */
.facts td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Page furniture -------------------------------------------------------- */
.nearby {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--color-line);
  font-size: var(--text-small);
}
.nearby a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; font-weight: 500; }
.nearby a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--color-line);
  color: var(--color-muted);
  font-size: 13px;
}
.banner {
  padding: 14px 18px;
  background: var(--color-surface);
  border-left: 2px solid var(--color-muted);
  margin: 0 0 24px;
}
.banner p:last-child { margin-bottom: 0; }

/* --- Buttons and fields ------------------------------------------------------
   The design system's buttons (button.css): a pill, black on light and white
   on dark for the main action, an outlined pill for a quiet one. Fields are
   its 12px-radius inputs. */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--button-height);
  padding: var(--button-padding-block) var(--button-padding-inline);
  border: 1px solid var(--color-action);
  border-radius: var(--radius-control);
  background: var(--color-action);
  color: var(--color-action-ink);
  box-shadow: inset 0 1px 0 var(--color-control-highlight), 0 1px 1px var(--color-control-shadow);
  font: 500 var(--text-small) / var(--button-line-height) var(--font-sans);
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
}
button:hover:not([disabled]) { background: var(--color-action-hover); border-color: var(--color-action-hover); }
button:active:not([disabled]) { transform: translateY(1px); }
button:focus-visible { outline: 2px solid var(--color-ink); outline-offset: var(--button-focus-offset); border-radius: var(--radius-control); }
button[disabled] { opacity: .45; cursor: not-allowed; }
button.quiet, .oauth-button {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-button-line);
  box-shadow: none;
}
button.quiet { min-height: var(--button-height-sm);
  padding: var(--button-padding-block-sm) var(--button-padding-inline-sm); }
button.quiet:hover:not([disabled]), .oauth-button:hover {
  background: var(--color-accent-soft);
  border-color: var(--color-button-hover-line);
}
.oauth { margin: 22px 0 10px; }
.oauth-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--button-height);
  padding: var(--button-padding-block) var(--button-padding-inline);
  border-radius: var(--radius-control);
  font: 500 var(--text-small) / var(--button-line-height) var(--font-sans);
  text-decoration: none;
}
.oauth-note { font-size: 15px; margin: 0 0 22px; }
.oauth-or {
  font-size: 15px;
  margin: 0 0 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-line);
}
form#signup p { margin: 0 0 16px; }
label { display: inline-block; font-size: var(--text-small); font-weight: 500; margin-bottom: 6px; }
form#signup small { font-weight: 400; }
input[type=text], input[type=email], input[type=number], input[type=password],
input[type=search], input[type=url], input:not([type]), select, textarea {
  width: 100%;
  max-width: 420px;
  min-height: 48px;
  padding: var(--field-padding-block) var(--field-padding-inline);
  font: 400 var(--text-small) / var(--leading-lead) var(--font-sans);
  color: var(--color-ink);
  background: var(--color-paper);
  border: 1px solid var(--field-line);
  border-radius: var(--radius-field);
  transition: border-color var(--motion-fast);
}
textarea { max-width: 640px; }
select {
  width: auto;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  /* The chevron, drawn with two gradients so it takes the ink colour. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-muted) 50%),
    linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
:is(input, select, textarea):hover { border-color: var(--color-button-hover-line); }
:is(input, select, textarea):focus { outline: none; border-color: var(--color-ink); }
:is(input, select, textarea):focus-visible { outline: 2px solid var(--color-ink); outline-offset: 1px; }
::placeholder { color: var(--color-muted); opacity: 1; }
input[type=checkbox], input[type=radio] { accent-color: var(--color-ink); width: 16px; height: 16px; vertical-align: -2px; }
/* Off-screen rather than hidden: it is the field only a robot fills in. */
.field-note { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#notice {
  max-width: var(--reading-width);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-field);
  padding: 14px 16px;
  font-size: var(--text-small);
}
/* A refusal is the one place a second colour carries meaning. */
#notice[role="alert"] { border-color: var(--color-status-danger); }

/* --- A key, shown once ------------------------------------------------------
   The panel is outlined in ink; the key and the commands under it are on the
   system's strong panel, dark in both themes, so they read as something to
   copy rather than as prose. */
.reveal {
  padding: var(--panel-padding);
  margin: 0 0 24px;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius);
}
.reveal h2 { margin-top: 0 !important; }
.reveal pre, .reveal pre.key {
  background: var(--color-panel-strong) !important;
  color: var(--color-code-ink);
  border-color: var(--color-code-line);
}
/* The key itself. Shown once, so it has to be selectable and unwrapped. */
pre.key { font-size: 15px; word-break: break-all; white-space: pre-wrap; user-select: all; }

/* --- Usage chart ---------------------------------------------------------- */
.chart { margin: 16px 0 12px; }
.chart-top { color: var(--color-muted); font-size: 12px; margin-bottom: 8px; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 160px;
  border-bottom: 1px solid var(--color-ink); border-top: 1px dashed var(--color-line); }
.bar { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; min-width: 0; }
.bar span { display: block; width: 100%; background: var(--color-ink); border-radius: 2px 2px 0 0; }
.chart-x { display: flex; justify-content: space-between; color: var(--color-muted); font-size: 12px; margin-top: 8px; }

/* --- Narrow ------------------------------------------------------------------
   Under 850px the bar's menu carries the way to every page, as it does on
   nums.world, so the sidebar goes rather than becoming a second menu above
   the article. */
@media (max-width: 850px) {
  .frame { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 28px; }
  .side { display: none; }
  .nearby { flex-direction: column; gap: 4px; }
}
@media (max-width: 640px) {
  .doc h1 { font-size: 28px; }
  body[data-section="docs"] .doc h1 { font-size: var(--text-title); }
  /* A path or a code in a table cell stays one piece; the table scrolls. */
  p code, li code { white-space: normal; overflow-wrap: anywhere; }
  td code { white-space: nowrap; }
  input[type=text], input[type=email], input[type=number], select, textarea { max-width: 100%; }
  .site-foot-row { min-height: 72px; }
  .copyright { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  tr:target td { background: var(--color-accent-soft); }
}
@media (forced-colors: active) {
  button, .nav-dash, .oauth-button { border-color: ButtonText; }
}