/*
 * 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;
  --warn:#9E6511; --crit:#C2352A; --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:var(--sans);
  --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. */
@media (pointer: coarse) {
  a.link, a.cta, .nav a, .results a, #minimap a, .bar a, nav a.link, 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;
}
.brand::before {
  content:"A"; display:grid; place-items:center; width:28px; height:28px;
  border-radius:7px; background:var(--indigo); color:#fff; font-size:var(--body); font-weight:800;
}
.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;
}
.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; } }

.sidebar { position:sticky; top:calc(var(--nav) + 24px); padding:30px 0 40px; }
@media (max-width: 860px) { .sidebar { position:static; border-bottom:1px solid var(--rule); } }

/* ── 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); }
.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; }
.crumbs a { color:var(--ink-2); text-decoration:none; }
.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.ref, main p a, main li a, main td a {
  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;
}
a.ref:hover, main p a:hover, main li a:hover, main td a:hover { background:var(--indigo); color:#fff; }

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(--lilac);
}
pre .cm { color:var(--night-ink-2); }
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); }

.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; }
tr.tier2 { box-shadow:inset 2px 0 0 0 var(--indigo); }
tr.tier2 td:first-child { padding-left:10px; }
td.num { text-align:right; font-family:var(--serif); 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, box-shadow 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; }
  .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; }
}