/*
  The markdown edition: the same text a crawler is served, shown on a dark grey
  ground in Geist Mono with orange used only where something is actionable.
  No photographs and no icons: the generator drops them, and nothing here adds
  any back.
*/

:root {
  --md-bg: #1A1A1A;
  --md-bg-2: #242423;
  --md-ink: #FFFFFF;
  --md-ink-2: #9A968F;
  --md-accent: #FF7A18;
  --md-rule: #303030;
  --md-rule-2: #4C4A47;
}

/* Higher specificity than the :root palette each page declares inline, so
   source order between the stylesheets does not matter. */
html[data-view="md"] {
  --paper: var(--md-bg);
  --paper-2: var(--md-bg-2);
  --ink: var(--md-ink);
  --ink-2: var(--md-ink-2);
  --accent: var(--md-accent);
  --rule: var(--md-rule);
  --rule-2: var(--md-rule-2);
  --idx: var(--md-ink-2);
  --sel-ink: var(--md-bg);
  color-scheme: dark;
  background: var(--md-bg);
}

html[data-view="md"] body {
  background: var(--md-bg);
  color: var(--md-ink);
  font-family: var(--font-mono);
}

/* The main page repaints the header when a dark section passes under it. That
   section is hidden here, but the rule is neutralised anyway. */
html[data-view="md"] .site-header.on-dark {
  --paper: var(--md-bg);
  --ink: var(--md-ink);
  --ink-2: var(--md-ink-2);
  --accent: var(--md-accent);
  --rule: var(--md-rule);
  --rule-2: var(--md-rule-2);
  background: color-mix(in srgb, var(--md-bg) 88%, transparent);
  color: var(--md-ink);
}

html[data-view="md"] main > :not(.md-doc),
html[data-view="md"] body > footer,
html[data-view="md"] .dialog,
html[data-view="md"] .skip { display: none !important; }

.md-doc { display: none; }
html[data-view="md"] .md-doc { display: block; }

.md-top {
  max-width: 46rem;
  margin-inline: auto;
  padding: var(--s8) var(--gutter) var(--s7);
  text-align: center;
}

.md-copy {
  display: block;
  width: 100%;
  min-height: 76px;
  padding: var(--s5) var(--s6);
  border: 1px solid var(--md-accent);
  border-radius: 14px;
  background: transparent;
  color: var(--md-accent);
  font-family: var(--font-mono);
  font-size: var(--step-2);
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background-color 150ms linear, color 150ms linear;
}

.md-copy:hover,
.md-copy.is-copied {
  background: var(--md-accent);
  color: var(--md-bg);
}

.md-copy[hidden] { display: none; }

.md-hint {
  margin-top: var(--s4);
  color: var(--md-ink-2);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.6;
}

.md-hint a { color: var(--md-accent); }

.md-source {
  max-width: 54rem;
  margin: 0 auto;
  padding: 0 var(--gutter) var(--s10);
  color: var(--md-ink);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  tab-size: 2;
}

/* Headings carry the accent so the document can be scanned at a glance. */
.md-source .md-h { color: var(--md-accent); font-weight: 500; }
.md-source .md-q { color: var(--md-ink-2); }

@media (max-width: 620px) {
  .md-top { padding-top: var(--s7); }
  .md-copy { min-height: 66px; font-size: var(--step-1); }
}