/* code-node's site. Plain on purpose: white paper, black type, one link blue, IBM Plex Sans and Cascadia Code. The
   only colour that carries meaning is the graph's, where it encodes the kind of each arrow (calls grey, reads blue,
   writes orange, sends pink). The home page's figure is the one interactive thing; graph.js lights up the path each
   code line takes, and nothing moves on its own when the reader asks for less motion. */

:root, [data-md-color-scheme="default"] {
  --cn-paper: #ffffff;
  --cn-fg: #1b1d22;
  --cn-dim: #5f6470;
  --cn-rule: #e2e4e9;
  --cn-panel: #f6f7f9;
  --cn-link: #1f5fd6;
  --cn-call: #9097a3;
  --cn-event: #22a35a;
  --cn-env: #6b7cff;
  --cn-reads: #3b82f6;
  --cn-writes: #ea580c;
  --cn-sends: #db2777;
  --cn-warn: #d97706;
  --cn-lit: #fff6d6;
  --md-primary-fg-color: var(--cn-paper);
  --md-primary-fg-color--light: var(--cn-paper);
  --md-primary-fg-color--dark: var(--cn-paper);
  --md-primary-bg-color: var(--cn-fg);
  --md-primary-bg-color--light: var(--cn-dim);
  --md-accent-fg-color: var(--cn-link);
  --md-typeset-a-color: var(--cn-link);
  --md-default-fg-color: var(--cn-fg);
  --md-default-bg-color: var(--cn-paper);
  --md-code-bg-color: var(--cn-panel);
  --md-footer-bg-color: var(--cn-paper);
  --md-footer-bg-color--dark: var(--cn-paper);
  --md-footer-fg-color: var(--cn-fg);
  --md-footer-fg-color--light: var(--cn-dim);
  --md-footer-fg-color--lighter: var(--cn-dim);
}

[data-md-color-scheme="slate"] {
  --cn-paper: #16181d;
  --cn-fg: #e4e6eb;
  --cn-dim: #9aa0ab;
  --cn-rule: #2b2e36;
  --cn-panel: #1d2026;
  --cn-link: #7eaaff;
  --cn-call: #7d8494;
  --cn-lit: #3a3420;
  --md-default-fg-color: var(--cn-fg);
  --md-default-bg-color: var(--cn-paper);
  --md-code-bg-color: var(--cn-panel);
  --md-typeset-a-color: var(--cn-link);
  --md-primary-fg-color: var(--cn-paper);
  --md-primary-bg-color: var(--cn-fg);
  --md-footer-bg-color: var(--cn-paper);
  --md-footer-bg-color--dark: var(--cn-paper);
  --md-footer-fg-color: var(--cn-fg);
  --md-footer-fg-color--light: var(--cn-dim);
  --md-footer-fg-color--lighter: var(--cn-dim);
}

/* ---------- chrome ---------- */

.md-header, .md-tabs {
  background: var(--cn-paper);
  color: var(--cn-fg);
  box-shadow: none;
}
.md-header { border-bottom: 1px solid var(--cn-rule); }
.md-tabs { border-bottom: 1px solid var(--cn-rule); }
.md-tabs__link { opacity: 1; color: var(--cn-dim); font-size: 0.72rem; }
.md-tabs__item--active .md-tabs__link, .md-tabs__link:hover { color: var(--cn-fg); }
.md-tabs__item--active .md-tabs__link { text-decoration: underline; text-underline-offset: 0.5em; text-decoration-thickness: 2px; }
.md-header__topic:first-child { font-weight: 600; }
.md-search__form { background: var(--cn-panel); }
.md-search__input::placeholder, .md-search__icon { color: var(--cn-dim); }
.md-grid { max-width: 1180px; }
.md-footer { border-top: 1px solid var(--cn-rule); }

.md-typeset { font-size: 0.82rem; line-height: 1.65; }
.md-typeset h1, .md-typeset h2, .md-typeset h3 { color: var(--cn-fg); letter-spacing: -0.01em; }
.md-typeset h1 { font-weight: 600; font-size: 2em; margin-bottom: 0.6em; }
.md-typeset h2 { font-weight: 600; font-size: 1.3em; margin-top: 2.2em; }
.md-typeset h3 { font-weight: 600; font-size: 1.05em; }
.md-typeset a { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 0.18em; }
.md-typeset a:hover { text-decoration-color: currentColor; }
.md-typeset .headerlink { text-decoration: none; }
.md-typeset :is(p, ul, ol) { max-width: 40em; }
.md-typeset > :is(.admonition, details) { max-width: 33rem; }
.md-typeset > .highlight { width: fit-content; min-width: min(100%, 26rem); max-width: 100%; }
.md-typeset code { border-radius: 3px; }

.md-typeset table:not([class]) { border: 1px solid var(--cn-rule); border-radius: 4px; font-size: 0.78rem; }
.md-typeset table:not([class]) th { font-weight: 600; color: var(--cn-fg); background: var(--cn-panel); }
.md-typeset table:not([class]) td { border-top-color: var(--cn-rule); }
.md-typeset table:not([class]) :is(th, td) { padding: 0.6em 1em; }

/* a page's first line, under its title: what it covers */
.md-typeset .gist { font-size: 1.1em; color: var(--cn-dim); margin-top: -0.4em; }

/* asides: "Worth knowing" is a plain note with an amber rule, "more" folds are quiet so they read as optional */
.md-typeset .admonition, .md-typeset details {
  border: 0;
  border-left: 3px solid var(--cn-rule);
  border-radius: 0;
  box-shadow: none;
  background: none;
  font-size: 0.78rem;
}
.md-typeset :is(.admonition, details).tip { border-left-color: var(--cn-warn); }
.md-typeset :is(.admonition, details) > :is(.admonition-title, summary) { background: none; font-weight: 600; padding-left: 0.8rem; }
.md-typeset :is(.admonition, details) > :is(.admonition-title, summary)::before { display: none; }
.md-typeset details > summary { cursor: pointer; color: var(--cn-link); }
.md-typeset details > summary::after { color: var(--cn-dim); }

/* ---------- the home page ---------- */

.md-content__inner:has(.cn-trace) { padding-top: 1.2rem; }
.md-content__inner:has(.cn-trace) h1 { font-size: 2.4rem; margin: 0.4em 0 0.4em; letter-spacing: -0.02em; }
.md-typeset .cn-lede { font-size: 1.12rem; line-height: 1.55; max-width: 34em; color: var(--cn-fg); }

.md-typeset :is(.cn-trace, .cn-shot) { display: block; text-align: left; }
.md-typeset .cn-trace { margin: 2.4em 0 1em; }
.cn-trace-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  border: 1px solid var(--cn-rule);
  border-radius: 6px;
  overflow: hidden;
}
.cn-code {
  padding: 0 0 12px;
  border-right: 1px solid var(--cn-rule);
  background: var(--cn-panel);
  font: 0.68rem/1.25 var(--md-code-font-family);
  color: var(--cn-dim);
  overflow-x: auto;
}
.cn-file {
  padding: 8px 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--cn-rule);
  color: var(--cn-dim);
}
.cn-line {
  display: block;
  padding: 3.5px 14px 3.5px 11px;
  border-left: 3px solid transparent;
  white-space: pre;
}
.cn-line i { display: inline-block; width: 2.6em; font-style: normal; color: color-mix(in srgb, var(--cn-dim) 60%, transparent); user-select: none; }
.cn-line[tabindex] { color: var(--cn-fg); cursor: pointer; }
.cn-line[tabindex]:hover { background: color-mix(in srgb, var(--cn-fg) 5%, transparent); }
.cn-line[tabindex]:focus-visible { outline: 2px solid var(--cn-link); outline-offset: -2px; }
.cn-line.on { background: var(--cn-lit); border-left-color: var(--cn-warn); }
.cn-line.on:hover { background: var(--cn-lit); }
.cn-graph-wrap { padding: 16px; background: var(--cn-paper); align-self: center; }
.md-typeset .cn-trace figcaption {
  max-width: 44em;
  margin: 0.8em 0 0;
  text-align: left;
  font-size: 0.74rem;
  font-style: normal;
  color: var(--cn-dim);
}

.cn-shot { margin: 1.2em 0 0; }
.md-typeset .cn-shot p { max-width: none; }
.md-typeset .cn-shot img { width: 100%; border: 1px solid var(--cn-rule); border-radius: 6px; }
.md-typeset p:has(> img.cn-figure) { max-width: none; }  /* a figure takes the column, not the reading width */
.md-typeset img.cn-figure { width: 100%; height: auto; }

/* ---------- the graph (scripts/site_graph.py), drawn like code-node's own ---------- */

.cn-graph { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--md-text-font-family); }
.cn-graph .cap { font: 600 9.5px var(--md-code-font-family); letter-spacing: 0.12em; fill: var(--cn-dim); }
.cn-graph .n, .cn-graph .e { transition: opacity 0.15s; }
.cn-graph .n { cursor: default; --c: var(--cn-call); }
.cn-graph .n .bg { fill: var(--cn-paper); stroke: var(--cn-rule); stroke-width: 1.2; }
.cn-graph .n:hover .bg { stroke: var(--cn-dim); }
.cn-graph .n .bd { fill: color-mix(in srgb, var(--c) 15%, transparent); }
.cn-graph .n .bd.lg { fill: #fff; stroke: var(--cn-rule); }
.cn-graph .n .logo { color: #1b1d22; }
.cn-graph .n .ic { fill: none; stroke: var(--c); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cn-graph .n .lb { font-size: 12.5px; font-weight: 600; fill: var(--cn-fg); }
.cn-graph .n .lb.mono { font: 600 10.4px var(--md-code-font-family); }
.cn-graph .n .sb { font-size: 10.5px; fill: var(--cn-dim); }
.cn-graph .k-event { --c: var(--cn-event); }
.cn-graph .k-env { --c: var(--cn-env); }
.cn-graph .k-handler .bg { stroke: var(--cn-fg); stroke-width: 1.6; }
.cn-graph .k-handler .bd { fill: var(--cn-fg); }
.cn-graph .k-handler .ic { stroke: var(--cn-paper); fill: var(--cn-paper); }
.cn-graph .n-s3 { --c: var(--cn-reads); }
.cn-graph .n-ddb { --c: var(--cn-writes); }
.cn-graph .n-sns, .cn-graph .n-web { --c: var(--cn-sends); }
.cn-graph .n.warn .bg { stroke: var(--cn-warn); stroke-width: 1.5; }
.cn-graph .wd { fill: var(--cn-warn); }
.cn-graph .wm { stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }
.cn-graph .e { --c: var(--cn-call); }
.cn-graph .e .ln, .cn-graph .e .ah { fill: none; stroke: var(--c); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cn-graph .e.k-event { --c: var(--cn-event); }
.cn-graph .e.k-event .ln { stroke-width: 2.2; }
.cn-graph .e.k-env { --c: var(--cn-env); }
.cn-graph .e.k-env .ln { stroke-dasharray: 5 4; }
.cn-graph .e.k-reads { --c: var(--cn-reads); }
.cn-graph .e.k-writes { --c: var(--cn-writes); }
.cn-graph .e.k-sends, .cn-graph .e.k-http { --c: var(--cn-sends); }
.cn-graph .e.k-http .ln { stroke-dasharray: 7 3; }

/* a selected line lights its path and fades the rest */
.cn-trace.tracing .cn-graph .e:not(.on) { opacity: 0.1; }
.cn-trace.tracing .cn-graph .n:not(.on) { opacity: 0.3; }
.cn-trace .cn-graph .e.on .ln { stroke-width: 2.4; }
.cn-trace .cn-graph .n.on .bg { stroke: var(--cn-fg); stroke-width: 1.6; }

/* ---------- small screens ---------- */

@media (max-width: 900px) {
  .cn-trace-body { grid-template-columns: minmax(0, 1fr); }
  .cn-code { border-right: 0; border-bottom: 1px solid var(--cn-rule); }
  .md-content__inner:has(.cn-trace) h1 { font-size: 2rem; }
  .cn-graph-wrap { overflow-x: auto; }
  .cn-graph-wrap .cn-graph { min-width: 600px; }
}

@media (prefers-reduced-motion: reduce) {
  .cn-graph .n, .cn-graph .e { transition: none; }
}

/* the tabs are the navigation on a wide screen; the left sidebar would only repeat the page's own name */
@media (min-width: 76.25em) {
  .md-sidebar--primary { display: none; }
}