/*
  ── Blueprint ────────────────────────────────────────────────────────────────
  The stylesheet the three integrator documents share: the developer guide, the
  configurator and the white-label page.

  **The 2026-09-23 canvas, Nocturne.** It draws these three the way it draws
  every document — dark by default with a light/dark switch, a row of document
  tabs, a contents column, sections headed "§" in the accent — so this file is
  now only what a *technical* document adds on top of `/paper.css`: code, the
  live widget previews, the arrangements and the parameter tables. Every colour
  comes from there, so the switch reaches these pages with no second palette.

  It is a file rather than three inline copies because the pages are meant to
  look like one thing, and a copy is how that stops being true.

  Served **no-cache** (firebase.json) and referenced by its content hash.
  ───────────────────────────────────────────────────────────────────────────*/

:root {
  --paper: var(--p-page);
  --card: var(--p-surface);
  --ink: var(--p-ink);
  --ink-2: var(--p-ink-3);
  --ink-3: var(--p-ink-5);
  --rule: var(--p-rule);
  --accent: var(--p-accent);
  --accent-soft: var(--p-accent-band);
  --amber: #e8aa4e;
  --amber-soft: rgba(232, 170, 78, 0.12);
  --code-bg: var(--p-neutral-900);
  --code-ink: var(--p-ink-2);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: var(--p-font);
}

:root[data-theme='light'] {
  --amber: #845a0f;
  --amber-soft: rgba(132, 90, 15, 0.1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--p-page-glow), var(--p-page);
  color: var(--ink-2);
  font: 15px/1.55 var(--sans);
}

a { color: var(--p-accent-2); }

/* The article and its hand-written contents column. `minmax(0, …)`, never a
   bare `1fr`: these pages are full of `<pre>` blocks with hundred-character
   snippets, and a grid item's automatic minimum is the widest of them. */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 clamp(32px, 5vw, 80px);
  justify-content: start;
  padding: 0 var(--p-gutter, clamp(20px, 5vw, 72px));
}

.layout > main {
  min-width: 0;
  max-width: 820px;
  padding: clamp(28px, 6vw, 56px) 0 96px;
}

.toc {
  display: none;
  position: sticky;
  top: 24px;
  align-self: start;
  flex-direction: column;
  gap: 2px;
  padding-top: 56px;
  font-size: 14px;
  line-height: 20px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  scrollbar-width: none;
}

.toc p {
  margin: 0 0 8px;
  color: var(--p-ink-5);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.toc a {
  display: block;
  padding: 5px 0;
  color: var(--p-ink-3);
  text-decoration: none;
}

.toc a:hover { color: var(--p-ink); }
.toc .sub { padding-left: 12px; color: var(--p-ink-5); }

@media (min-width: 1040px) {
  .layout { grid-template-columns: 200px minmax(0, 820px); }
  .toc { display: flex; }
}

h1 {
  margin: 20px 0 0;
  color: var(--ink);
  font: 500 clamp(38px, 4.6vw, 60px)/1.06 var(--sans);
  letter-spacing: -0.02em;
}

h2 {
  display: flex;
  gap: 12px;
  margin: 72px 0 18px;
  color: var(--ink);
  font: 500 28px/36px var(--sans);
  letter-spacing: -0.012em;
}

h3 { margin: 28px 0 10px; color: var(--ink); font: 500 20px/28px var(--sans); }
h2 .n, h3 .n { color: var(--accent); font-weight: 500; }

p { margin: 18px 0 0; color: var(--p-ink-3); font-size: 15.5px; line-height: 26px; }
.lede { margin: 20px 0 0; max-width: 60ch; color: var(--p-ink-2); font-size: 18px; line-height: 29px; }
.note { color: var(--p-ink-5); font-size: 14px; line-height: 22px; }
strong { color: var(--ink); font-weight: 500; }

.stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--accent);
  font: 400 12px/1.2 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card {
  margin: 18px 0 0;
  padding: 16px 18px;
  border: 0;
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--rule);
}

.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

/* A caution, and the rule that holds whatever the tier: Nocturne marks both
   with a 2px inset line on the left rather than a tinted slab. */
.card-flag { background: var(--card); box-shadow: inset 2px 0 0 var(--amber), 0 0 0 1px var(--rule); }
.card-rule {
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  box-shadow: 0 0 0 1px var(--p-accent-700);
}

pre {
  position: relative;
  margin: 18px 0 0;
  padding: 18px 20px;
  overflow-x: auto;
  border-radius: 8px;
  background: var(--code-bg);
  box-shadow: 0 0 0 1px var(--rule);
  color: var(--code-ink);
  font: 13.5px/22px var(--mono);
}

/*
  `overflow-wrap: break-word` because inline code is where the unbreakable
  strings are. It breaks a token only when the token cannot fit on a line of its
  own, and does nothing inside `td code`, which is `white-space: nowrap`.
*/
code {
  font: 0.92em var(--mono);
  color: var(--p-accent-hi);
  background: none;
  padding: 0;
  overflow-wrap: break-word;
}

pre code { color: inherit; background: none; padding: 0; }

.copy {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 5px 8px;
  border: 0;
  border-radius: 4px;
  background: var(--p-surface);
  box-shadow: 0 0 0 1px var(--rule);
  color: var(--p-ink-4);
  font: 500 11px/1 var(--sans);
  cursor: pointer;
}

.copy:hover { color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

table { width: 100%; margin: 18px 0 0; border-collapse: collapse; font-size: 14px; }
th, td { padding: 5.6px; line-height: 22px; text-align: left; vertical-align: top; }
th {
  color: color-mix(in srgb, var(--p-ink) 60%, transparent);
  font: 400 11px/1.4 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
td { color: var(--p-ink-3); }
td code { white-space: nowrap; }

@media (max-width: 760px) {
  table {
    display: block;
    overflow-x: auto;
  }
}

ul { padding-left: 20px; }
li { margin: 8px 0; color: var(--p-ink-3); font-size: 15.5px; line-height: 26px; }

/* Nocturne's tags. */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 0;
  border-radius: 6px;
  background: var(--p-accent-800);
  color: var(--p-accent-100);
  font: 400 11px/1.4 var(--sans);
  letter-spacing: 0.02em;
  vertical-align: 2px;
}

.pill-soon { background: var(--p-neutral-800); color: var(--p-neutral-100); }

/* A live widget, in the canvas's frame: the surface, a hairline, and a small
   uppercase label with an accent dot. */
.preview {
  margin: 16px 0 6px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--rule);
}

.preview-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  color: var(--p-ink-4);
  font: 400 12px/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.preview-bar b { color: var(--p-ink-3); font-weight: 400; }
.preview-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.preview iframe { display: block; width: 100%; border: 0; }
.preview-label { margin: 0 0 16px; color: var(--p-ink-5); font-size: 13px; }

footer { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--p-hair); color: var(--p-ink-5); font-size: 13px; }
footer a { display: inline-block; margin: 0 16px 6px 0; }

/* The copy button beside a ready-made arrangement. */
.share-copy {
  margin-left: 6px;
  padding: 4px 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: 0 0 0 1px var(--rule);
  color: var(--accent);
  font: 400 12px/1 var(--sans);
  white-space: nowrap;
  cursor: pointer;
}

.share-copy:hover,
.share-copy:focus-visible { box-shadow: 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* Built by `/developers.js`: put a preview back the way it started, and collect
   the calculators you want to carry into the configurator. */
.dv-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }

.dv-action {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 5.6px 10.08px;
  border: 1px solid var(--p-hair);
  border-radius: 8px;
  background: transparent;
  color: var(--p-ink);
  font: 500 14px/1.2 var(--sans);
  text-decoration: none;
  cursor: pointer;
}

.dv-action:hover { background: color-mix(in srgb, var(--p-ink) 7%, transparent); }

.dv-add[aria-pressed='true'] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

.dv-tray {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 32px);
  padding: 10px 12px 10px 18px;
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--p-lift);
  color: var(--p-ink);
  font-size: 13px;
}

.dv-tray[hidden] { display: none; }
.dv-tray-count { white-space: nowrap; }

/* Nocturne's primary action, an accent outline — here and in the hero. */
.dv-tray-go,
.btn-fill {
  display: inline-flex;
  align-items: center;
  padding: 5.6px 10.08px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  font: 500 14px/1.2 var(--sans);
  text-decoration: none;
  white-space: nowrap;
}

.dv-tray-go:hover,
.btn-fill:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }

/* The second action beside it: Nocturne's ghost, accent text and no edge. */
.btn-line,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5.6px 2.8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  font: 500 14px/1.2 var(--sans);
  text-decoration: none;
  white-space: nowrap;
}

.btn-line:hover,
.btn-ghost:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }

/* The ready-made arrangements: a card each, as the canvas draws them. */
.planners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 12px;
  margin: 18px 0 0;
}

.planner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--rule);
}

.planner-name { color: var(--ink); font-size: 17px; font-weight: 500; }
.planner-note { flex: 1; margin-top: 0; color: var(--p-ink-4); font-size: 14px; line-height: 21px; }

.planner-said code {
  display: inline-block;
  max-width: 100%;
  margin-top: 0;
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--p-neutral-800);
  color: var(--p-neutral-100);
  font: 400 11px/1.4 var(--sans);
  overflow-wrap: anywhere;
}

.planner-actions { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 4px; font-size: 13.5px; }

/* The library's overview, as the canvas draws it: a group label in the accent,
   then a grid of cards joined by 1px of the rule colour, each the page ground
   with its name, a "live" tag, its code name and one line. */
.dv-lib { display: flex; flex-direction: column; gap: 24px; margin: 24px 0 56px; }
.dv-lib-group { display: flex; flex-direction: column; gap: 10px; }
.dv-lib-name { margin: 0; color: var(--accent); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.dv-lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 1px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--p-neutral-800);
}
.dv-lib-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: var(--p-page);
  color: var(--p-ink);
  text-decoration: none;
}
.dv-lib-card:hover { background: color-mix(in srgb, var(--accent) 6%, var(--p-page)); color: var(--p-ink); }
.dv-lib-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15.5px; font-weight: 500; }
.dv-lib-card code { font-size: 12.5px; }
.dv-lib-body { color: var(--p-ink-4); font-size: 14px; line-height: 21px; }

/* ── the white-label page's own shapes, from the canvas ─────────────────── */
.wl-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; margin-top: 28px; }
.wl-side { display: flex; flex-direction: column; gap: 10px; }
.wl-side-label { color: var(--p-ink-5); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.wl-side-label-on { color: var(--accent); }
.wl-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  height: 150px;
  padding: 14px;
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--rule);
}
.wl-frame-on { box-shadow: 0 0 0 1px var(--p-accent-600); }
.wl-mark { position: absolute; top: 12px; right: 12px; padding: 3px 7px; border-radius: 4px; box-shadow: 0 0 0 1px var(--rule); color: var(--p-ink-4); font-size: 11px; letter-spacing: 0.04em; }
.wl-fill { height: 64px; border-radius: 8px; background: linear-gradient(to top, var(--p-accent-800), transparent); }
.wl-line { color: var(--p-ink-5); font-size: 11.5px; }
.wl-ask { padding: 22px 24px; }
.wl-ask-lead { margin: 0; font-size: 19px; line-height: 29px; }
.wl-ask-lead strong { font-weight: 400; }
.wl-ask-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; font-size: 14px; }
.wl-get { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.wl-get li { display: block; margin: 0; padding: 18px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--rule); color: var(--p-ink-4); font-size: 14px; line-height: 22px; }
.wl-get li .pill { margin-bottom: 8px; }
.wl-get li strong { display: block; margin-bottom: 8px; color: var(--ink); font-size: 17px; line-height: 1.3; }
.wl-never { background: transparent; box-shadow: 0 0 0 1px var(--p-border-2); }
.wl-never p { color: var(--p-ink-2); font-size: 16px; line-height: 27px; }
.wl-swatches { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; color: var(--p-ink-4); font-size: 13px; }
.wl-swatches > span { display: flex; align-items: center; gap: 6px; }
.wl-swatches i { width: 10px; height: 10px; border-radius: 3px; }