/*
 * AMW documentation — one stylesheet for every page.
 *
 * The same palette, faces and devices as the console and the landing page. The
 * layout is what a reference needs and the other two do not: a standing
 * sidebar that never moves between pages, a contents list for the page you are
 * on, and a footer that says where to go next.
 *
 * What this file enforces rather than leaves to memory: reference material
 * sits on sheets, running text stops at 70 characters, machine values stay
 * monospaced, and colour is reserved for exceptions — a permitted row carries
 * none, and the only green is a signature seal.
 */

:root {

  /* ── the type scale ──────────────────────────────────────────────────
     One family, named steps, and nothing between them. Both static surfaces
     had thirty ad-hoc sizes, half of them within a pixel of each other —
     which reads as noise on the same screen as the console's eight. These
     are the console's steps, under the console's names, so a heading that
     matches across the three surfaces is the same size on all three. */
  --mark:11px;        /* uppercase label, clause marker */
  --meta:12.5px;      /* machine values, references, footnotes */
  --data:14px;        /* dense, tabular, the substance */
  --body:15.5px;      /* running text in an interface */
  --read:17px;        /* a claim, read rather than scanned */
  --title:22px;       /* section heading */
  --display:clamp(26px,3.2vw,34px);   /* the head of a page or a section */
  --hero:clamp(32px,4.4vw,50px);      /* the one line a surface opens with */
  --figure:clamp(28px,4vw,46px);      /* a figure someone acts on */
  --paper:#F7F7F8; --leaf:#FFFFFF; --veil:#FBFBFC;
  --ink:#252641; --ink-2:#5F6076; --ink-3:#656678;
  --rule:#E8E8EC; --rule-2:#D6D6DE;
  --indigo:#5147E5; --indigo-2:#4038CC; --indigo-3:#ECEAFD; --lilac:#A7A1F4;
  --night:#08080A; --night-rule:#26262C; --night-ink:#FFFFFF; --night-ink-2:#9A9AA8;
  /* Code on the night block: ordinary ink, and the comment under it. The
     brightest level is `--night-ink` and the accent is `--lilac`. */
  --code-ink:#C7C7D4; --code-cm:#82828F;
  --warn:#85520B; --crit:#B52F25; --seal:#1F7A55;

  /* Kept as aliases so a rule written against the old names still resolves. */
  --deep:var(--night); --teal:var(--indigo); --teal-2:var(--indigo-2);
  --mint:var(--lilac); --band-ink:var(--night-ink); --band-ink-2:var(--night-ink-2);

  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* `--serif` used to be here, aliased to the sans so it rendered correctly
     while still telling every reader of this file that the documentation set
     its figures in a serif. It named one thing and meant another, and it was
     used once. */
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --measure:68ch;
  --pad:clamp(20px,4vw,52px);
  --nav:66px;
  --r:12px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--nav) + 24px); }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--body); line-height:1.58;
  letter-spacing:-.011em; -webkit-font-smoothing:antialiased;
}

.eyebrow {
  font-size:var(--mark); font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-3); display:block;
}
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.figure { font-variant-numeric:tabular-nums; font-weight:700; letter-spacing:-.03em; }

/* Keyboard first: the first stop on every page is a way past the navigation. */
.skip {
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--deep); color:var(--band-ink); padding:10px 16px; font-size:var(--meta);
}
.skip:focus { left:0; }
/* One ring, on every surface: 2px indigo, offset 2, and nothing may turn it
   off. A control that swaps the ring for a fill of its own leaves a keyboard
   reader guessing where they are. */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline:2px solid var(--indigo); outline-offset:2px; border-radius:3px;
}

/* A finger is not a mouse: every control clears 44px on a coarse pointer,
   which is the one measurement neither static surface made. */
/* A standalone control is 24px of hittable area, and 44 where the pointer is
   a finger. The masthead's links measured 16 to 19. A link inside a sentence
   is exempt and is not listed here. */
a.link, a.cta, .nav a, .results a, #minimap a, .bar a, nav a.link,
footer li a, .routes li > a {
  min-height:24px; display:inline-flex; align-items:center;
}
@media (pointer: coarse) {
  a.link, a.cta, .nav a, .results a, #minimap a, .bar a, nav a.link,
  footer li a, .routes li > a, .crumbs a, button {
    min-height:44px; display:inline-flex; align-items:center;
  }
}

/* ── the bar ──────────────────────────────────────────────────────── */

.bar {
  position:sticky; top:0; z-index:50; height:var(--nav);
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--rule); color:var(--ink);
}
.bar-inner {
  max-width:1440px; margin:0 auto; padding:0 var(--pad);
  height:100%; display:flex; align-items:center; gap:26px;
}
.brand {
  display:inline-flex; align-items:center; gap:10px;
  font-weight:800; font-size:var(--title); letter-spacing:-.03em;
  text-decoration:none; color:var(--ink); white-space:nowrap;
}
/* The mark: a ceiling, and a sequence whose third action stopped under it.
   The same drawing as the site, the console and the tab icon. */
.brand::before {
  content:""; width:28px; height:28px; flex:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%235147E5'/%3E%3Crect x='7' y='9.2' width='18' height='2.4' fill='%23fff'/%3E%3Crect x='7.8' y='18.4' width='4' height='6.4' fill='%23fff'/%3E%3Crect x='14' y='15.4' width='4' height='9.4' fill='%23fff'/%3E%3Crect x='20.2' y='13.8' width='4' height='11' fill='%23fff' opacity='.55'/%3E%3C/svg%3E"); background-size:cover;
}
.brand span { font-size:var(--meta); font-weight:400; letter-spacing:-.01em; color:var(--ink-3); }
.bar .links { display:flex; gap:22px; margin-left:auto; align-items:center; }
.bar a.link {
  color:var(--ink-2); text-decoration:none; font-size:var(--data);
  padding:6px 2px; border-bottom:1px solid transparent;
}
/* A control drawn as a glyph carries no label to size it, so it takes the
   24px of hittable area the standard asks for rather than the 18px of the
   drawing. */
.bar a.link.icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; color:var(--ink-3); padding:0;
}
.bar a.link.icon:hover { color:var(--ink); }

.bar a.link:hover, .bar a.link[aria-current="page"] { color:var(--ink); border-bottom-color:var(--ink); }
.bar a.cta {
  background:var(--indigo); border:1px solid var(--indigo); color:#fff;
  text-decoration:none; border-radius:8px;
  font-size:var(--data); font-weight:600; padding:10px 18px; white-space:nowrap;
  transition:background 150ms;
}
.bar a.cta:hover { background:var(--indigo-2); }
@media (max-width: 720px) {
  .bar .links a.link { display:none; }
  /* The wordmark's subtitle is the reason the call to action was being clipped
     off the right edge of a phone. The wordmark survives; the gloss does not. */
  .brand span { display:none; }
  .bar-inner { gap:14px; }
}

/* ── the shell ────────────────────────────────────────────────────── */

.shell {
  max-width:1440px; margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:236px minmax(0,1fr) 190px; gap:clamp(24px,3.5vw,56px);
  align-items:start;
}
@media (max-width: 1180px) { .shell { grid-template-columns:220px minmax(0,1fr); } .minimap { display:none; } }
@media (max-width: 860px) { .shell { grid-template-columns:1fr; } }

/* The contents scroll inside the sidebar rather than with the page. Twenty
   pages in six groups is taller than a laptop's window, so the last group was
   reachable only by scrolling the document — which moves the page a reader is
   in to get to a list of the ones they are not. */
.sidebar {
  position:sticky; top:var(--nav); padding:30px 0 40px;
  max-height:calc(100vh - var(--nav)); overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--rule-2) transparent;
}
.sidebar::-webkit-scrollbar { width:8px; }
.sidebar::-webkit-scrollbar-thumb { background:var(--rule-2); border-radius:999px; }
.sidebar::-webkit-scrollbar-track { background:transparent; }
@media (max-width: 860px) {
  .sidebar { position:static; max-height:none; overflow:visible; border-bottom:1px solid var(--rule); }
}

/* The same for "on this page", for the same reason. */
.minimap { max-height:calc(100vh - var(--nav)); overflow-y:auto; overscroll-behavior:contain; }

/* ── contents, on a phone ─────────────────────────────────────────────
   Seventeen links and a search box before the first sentence is a table of
   contents standing in front of the document. On a wide screen it is a
   sidebar and it belongs there; on a narrow one it folds, and what opens
   the page is the page. */
.contents > summary {
  display:none; cursor:pointer; list-style:none;
  padding:12px 0; font-size:var(--meta); color:var(--ink-2);
  border-bottom:1px solid var(--rule);
}
.contents > summary::-webkit-details-marker { display:none; }
.contents > summary::after { content:" ▾"; color:var(--ink-3); }
.contents[open] > summary::after { content:" ▴"; }
.contents > summary b { font-weight:600; color:var(--ink); }
.contents > summary:hover { color:var(--ink); }
@media (max-width: 860px) {
  .contents > summary { display:block; }
  /* The summary carries the rule. A second one under an empty fold reads as a
     region that failed to load. */
  .sidebar { padding:0; border-bottom:0; }
  .search { margin:16px 0 18px; }
  .contents[open] { padding-bottom:18px; border-bottom:1px solid var(--rule); }
}

.search { margin:0 0 22px; }
.search input {
  width:100%; margin-top:6px; padding:7px 9px; font-family:var(--sans); font-size:var(--meta);
  color:var(--ink); background:var(--veil); border:1px solid var(--rule-2); border-radius:10px;
}
.results { list-style:none; margin:8px 0 0; padding:0; border-top:1px solid var(--rule); }
.results li { border-bottom:1px solid var(--rule); }
.results a { display:block; padding:7px 0; text-decoration:none; color:var(--ink); font-size:var(--meta); }
.results a:hover { color:var(--indigo); }
/* The option the arrow keys are on. Focus stays in the field — the reader is
   still typing — so the list needs a mark of its own, and it is the same 2px
   indigo edge the rail and a held row use. */
.results a[aria-selected="true"] {
  color:var(--indigo); background:var(--indigo-3);
  border-left:2px solid var(--indigo);
  padding-left:10px;
}
.results .where { display:block; font-size:var(--mark); color:var(--ink-3); }
.results .empty { padding:8px 0; font-size:var(--meta); color:var(--ink-3); }

.nav { list-style:none; margin:0; padding:0; }
.nav .group + .group { margin-top:20px; }
.nav .group > ul { list-style:none; margin:7px 0 0; padding:0; }
.nav a {
  display:block; text-decoration:none; color:var(--ink-2); font-size:var(--data);
  padding:7px 12px; border-radius:10px; transition:background 140ms, color 140ms;
}
.nav a:hover { color:var(--ink); background:color-mix(in srgb, var(--ink) 5%, transparent); }
.nav a[aria-current="page"] {
  color:var(--ink); font-weight:600;
  background:var(--indigo-3); color:var(--indigo);
}

main { padding:30px 0 10px; min-width:0; }
.crumbs { font-size:var(--meta); color:var(--ink-3); margin-bottom:14px; }
/* The breadcrumb is a standalone control, not a link inside a sentence: it is
   the only way back up from a page, and it measured 16px. */
.crumbs a { color:var(--ink-2); text-decoration:none; min-height:24px; display:inline-flex; align-items:center; }
.crumbs a:hover { color:var(--ink); }

h1 {
  font-weight:700; font-size:var(--display); letter-spacing:-.035em;
  line-height:1.08; margin:0 0 8px; max-width:24ch;
}
h2 {
  font-weight:700; font-size:var(--title); letter-spacing:-.028em; margin:40px 0 0;
  padding-top:18px; border-top:1px solid var(--rule);
}
h3 { font-weight:700; font-size:var(--read); letter-spacing:-.022em; margin:28px 0 0; }
h4 { font-size:var(--meta); font-weight:600; margin:20px 0 0; }
p { max-width:var(--measure); margin:14px 0 0; color:var(--ink-2); }
p.lead { color:var(--ink); font-size:var(--read); }
strong { color:var(--ink); font-weight:600; }
ul, ol { max-width:var(--measure); margin:14px 0 0; padding-left:18px; color:var(--ink-2); }
li { margin:7px 0; }
li::marker { color:var(--ink-3); }
em { font-style:italic; }

/* A reference is monospaced because of what it points at — a hash, an id, an
   address. Every link in the body of these pages was given that face and its
   12.5px size too, so twenty pages of prose carried cross-references set in
   the machine face, smaller than the sentence around them, breaking the line
   wherever one appeared. A link inside a sentence is part of the sentence: it
   takes the sentence's face and the sentence's size, and keeps the indigo it
   already had. `.ref` is unchanged, and is what a machine value still uses. */
a.ref {
  font-family:var(--mono); font-size:var(--meta); color:var(--indigo); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--indigo) 35%, transparent); padding:0 1px;
}
main p a, main li a, main td a {
  color:var(--indigo); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--indigo) 35%, transparent); padding:0 1px;
}
a.ref:hover, main p a:hover, main li a:hover, main td a:hover { background:var(--indigo); color:#fff; }

/* The block is read, not decorated.
   Every token used to arrive in one lavender — the command, the string it
   takes and the number inside it — so the shape a reader skims for was not on
   the page. Three levels of ink and one hue, which is the site's own rule
   applied to code: structure brightest, ordinary ink below it, comments
   quietest, and the accent reserved for the *values*, because a value is what
   somebody copies out. `build-docs.mjs` marks the spans. */
pre {
  margin:20px 0 0; padding:18px 20px; overflow-x:auto;
  background:var(--night); border-radius:var(--r);
  font-family:var(--mono); font-size:var(--meta); line-height:1.66; color:var(--code-ink);
}
pre .k { color:var(--night-ink); }
pre .s, pre .n { color:var(--lilac); }
pre .cm { color:var(--code-cm); }
code { font-family:var(--mono); font-size:.92em; color:var(--ink); }
/* The block sets the ink for everything in it: `code` carries the page's
   dark ink, which on a dark block is a command nobody can read. */
pre code { font-size:inherit; color:inherit; }
.cm { color:var(--ink-3); }

/* ── the entry's map ───────────────────────────────────────────────────
   Twenty pages behind a sidebar is a list a reader scans; it is not an
   answer to "where does this go". The entry opens with the four things
   somebody actually arrives wanting to do, each pointing at the head of
   its group. Rows divided by a rule, like every other region here — no
   cards, no tinted boxes. */
.routes { margin:24px 0 8px; border-top:1px solid var(--rule); }
.routes-lead { margin:16px 0 4px; color:var(--ink-2); }
.routes ul { list-style:none; margin:0; padding:0; }
.routes li {
  display:grid; grid-template-columns:minmax(180px,15rem) 1fr;
  gap:6px 24px; align-items:baseline;
  padding:14px 0; border-bottom:1px solid var(--rule);
}
.routes li > a { font-weight:600; text-decoration:none; }
.routes li > a:hover { text-decoration:underline; }
.routes li > span { color:var(--ink-2); font-size:var(--data); }
.routes-foot { margin-top:14px; font-size:var(--meta); color:var(--ink-3); }
@media (max-width: 640px) { .routes li { grid-template-columns:1fr; } }

.tablewrap { overflow-x:auto; margin-top:20px; }
table { width:100%; border-collapse:collapse; font-size:var(--data); }
caption { text-align:left; font-size:var(--meta); color:var(--ink-3); padding-bottom:8px; }
thead th {
  text-align:left; font-size:var(--mark); font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); padding:0 14px 8px 0; border-bottom:1.5px solid var(--ink); white-space:nowrap;
}
tbody td { padding:10px 14px 10px 0; border-bottom:1px solid var(--rule); vertical-align:baseline; color:var(--ink-2); }
tbody td:first-child { color:var(--ink); white-space:nowrap; }
/* A border, not a shadow drawn to look like one. There are no shadows in this
   system, and the console wrote that down after finding the same line in its
   own ledger. */
tr.tier2 { border-left:2px solid var(--indigo); }
tr.tier2 td:first-child { padding-left:10px; }
td.num { text-align:right; font-variant-numeric:tabular-nums; font-size:var(--body); white-space:nowrap; }
.state { font-size:var(--meta); font-weight:600; }
.state.no { color:var(--crit); }
.state.quiet { color:var(--ink-3); font-weight:400; }

.callout {
  margin-top:24px; padding:16px 20px; border-radius:var(--r);
  background:var(--veil); border:1px solid var(--rule);
}
.callout p { margin-top:0; }
.callout.warn {
  border-color:color-mix(in srgb, var(--crit) 35%, transparent);
  background:color-mix(in srgb, var(--crit) 5%, var(--veil));
}

.impression {
  display:inline-block; margin-top:22px; border:1px solid var(--seal); border-radius:6px;
  outline:1px solid color-mix(in srgb, var(--seal) 45%, transparent);
  outline-offset:3px; padding:12px 16px; color:var(--seal);
  font-family:var(--mono); font-size:var(--mark); line-height:1.7;
}
.impression .t { font-family:var(--sans); font-size:var(--mark); letter-spacing:.12em; text-transform:uppercase; display:block; margin-bottom:4px; }

.deployed {
  margin:24px 0 0; display:grid; grid-template-columns:auto 1fr; gap:0 22px;
  background:var(--leaf); border:1px solid var(--rule); border-radius:var(--r);
  padding:6px clamp(16px,2.4vw,24px);
}
.deployed dt { font-size:var(--meta); color:var(--ink-2); padding:11px 0; border-bottom:1px solid var(--rule); }
.deployed dd { margin:0; padding:11px 0; border-bottom:1px solid var(--rule); display:flex; flex-wrap:wrap; gap:12px; align-items:baseline; }
.deployed dt:last-of-type, .deployed dd:last-of-type { border-bottom:0; }
.deployed .alias { font-family:var(--mono); font-size:var(--mark); color:var(--ink-3); }

/* ── where to go next ─────────────────────────────────────────────── */

.steps {
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  margin:52px 0 0; padding-top:22px; border-top:1px solid var(--rule);
}
.step {
  text-decoration:none; color:var(--ink); font-weight:700; letter-spacing:-.022em; font-size:var(--read);
  padding:18px 22px; border-radius:var(--r);
  background:var(--leaf); border:1px solid var(--rule);
  transition:border-color 180ms;
}
.step:hover { border-color:var(--indigo); }
.step.next { text-align:right; }

/* ── on this page ─────────────────────────────────────────────────── */

.minimap { position:sticky; top:calc(var(--nav) + 30px); padding:34px 0 40px; }
.minimap ol { list-style:none; margin:10px 0 0; padding:0; }
.minimap a {
  display:block; text-decoration:none; color:var(--ink-3); font-size:var(--meta);
  padding:5px 0 5px 12px; border-left:2px solid var(--rule); line-height:1.35;
  transition:color 140ms, border-color 140ms;
}
.minimap a:hover, .minimap a[aria-current="true"] { color:var(--ink); border-left-color:var(--indigo); }

/* ── footer ───────────────────────────────────────────────────────── */

footer { background:var(--night); color:var(--band-ink); margin-top:clamp(40px,6vw,72px); padding:clamp(34px,5vw,54px) 0 26px; }
footer .eyebrow { color:var(--band-ink-2); }
.foot-inner { max-width:1440px; margin:0 auto; padding:0 var(--pad); display:grid; grid-template-columns:2fr 1fr; gap:36px; }
@media (max-width: 760px) { .foot-inner { grid-template-columns:1fr; } }
footer p { color:var(--band-ink-2); font-size:var(--meta); max-width:52ch; }
footer ul { list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
footer a { color:var(--band-ink); text-decoration:none; border-bottom:1px solid rgba(159,176,164,.4); font-size:var(--data); }
footer a:hover { color:var(--lilac); border-bottom-color:var(--lilac); }
.foot-rule {
  max-width:1440px; margin:28px auto 0; padding:16px var(--pad) 0;
  border-top:1px solid rgba(159,176,164,.25); font-size:var(--meta); color:var(--band-ink-2);
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

/* A caveat that has to be read before the thing it qualifies. Ruled rather
   than boxed, and amber because it is an exception to the page's authority. */
.note {
  border:1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  background:color-mix(in srgb, var(--warn) 6%, var(--veil));
  border-radius:var(--r); padding:14px 18px; margin:20px 0 26px;
  color:var(--ink-2); font-size:var(--data);
}
.note strong { color:var(--ink); }

/* ── printed ──────────────────────────────────────────────────────── */

@media print {
  .bar, .sidebar, .minimap, .steps, .skip, footer { display:none; }
    .shell { display:block; padding:0; }
  body { background:#fff; color:#000; font-size:11pt; }
  pre { border:1px solid #000; border-radius:0; background:#fff; color:#000; }
  /* On paper the marking is not information: a lavender string prints grey and
     reads as a mistake. Everything in the block is one ink, and the comment
     keeps its distance by being lighter. */
  pre .k, pre .s, pre .n { color:#000; }
  pre .cm { color:#555; }
  .callout, .note, .deployed { border-radius:0; box-shadow:none; }
  a { color:#000; }
  main p a::after, main li a::after { content:" (" attr(href) ")"; font-size:9pt; color:#555; }
}