/* ===========================================================================
   Ahoy API docs — shell for the standalone pages (landing + reference).

   Design notes:
   - Dark-first. The palette is tuned for dark and derived for light, not the
     other way round, because developer docs are read in dark far more often.
   - The accent is Ahoy's brand indigo #1A0F8B — oklch(0.310 0.185 271) —
     the colour used on buttons in Ahoy's own customer-facing emails. At
     L=0.31 it is too dark to read as an accent on a dark ground, so dark
     mode lifts it to L=0.66 at the same hue and light mode uses the exact
     brand value. It marks interactive things only; everything else is a
     neutral tinted with the same hue.
   - Borders are neutrals with a trace of brand hue rather than pure grey —
     pure grey next to a violet accent reads as dirty.
   - Typefaces are Ahoy's own: Roobert for UI text and Manier for display,
     both lifted from the product's index.css rather than substituted. Inter
     was only ever Roobert's fallback.
   - Monospace carries every identifier: paths, methods, codes, stats. That
     single decision does most of the work in making a page read as API docs.
   =========================================================================== */

@import "/fonts/brand.css";
@import "/fonts/mono.css";

:root {
  --h: 271;            /* Ahoy brand indigo #1A0F8B */
  --font: "Roobert", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Manier", "Roobert", Georgia, serif;
  --mono: "JetBrains Mono Variable", ui-monospace, "SF Mono", Menlo, monospace;
  --bar-h: 3.5rem;
  --r: 0.5rem;
  --r-sm: 0.3125rem;
  --page: 72rem;
}

:root[data-theme="dark"] {
  --bg: oklch(0.145 0.013 var(--h));
  --bg-1: oklch(0.181 0.012 var(--h));
  --bg-2: oklch(0.215 0.013 var(--h));
  --line: oklch(0.268 0.011 var(--h));
  --line-2: oklch(0.34 0.013 var(--h));
  --fg: oklch(0.97 0.004 var(--h));
  --fg-1: oklch(0.80 0.007 var(--h));
  --fg-2: oklch(0.635 0.009 var(--h));
  --fg-3: oklch(0.60 0.009 var(--h));   /* 5.01:1 on --bg */
  --ac: oklch(0.66 0.19 var(--h));        /* links/marks: 6.03:1 on --bg */
  --ac-hi: oklch(0.73 0.17 var(--h));
  /* A filled button needs a darker ground than a link does: white on --ac is
     only 3.28:1. Split the token rather than darkening the accent globally. */
  --ac-btn: oklch(0.54 0.19 var(--h));    /* white on this: 5.33:1 */
  --ac-btn-hi: oklch(0.60 0.19 var(--h));
  --ac-lo: oklch(0.28 0.10 var(--h));
  --on-ac: oklch(0.99 0 0);
  --get: oklch(0.70 0.13 240);
  --post: oklch(0.72 0.15 155);
  --put: oklch(0.78 0.14 80);
  --del: oklch(0.66 0.19 25);
  --shadow: 0 1px 2px oklch(0 0 0 / 0.30), 0 16px 40px -20px oklch(0 0 0 / 0.65);
  --glow: radial-gradient(60rem 28rem at 18% -8%, oklch(0.40 0.11 var(--h) / 0.28), transparent 62%);
}

:root[data-theme="light"] {
  --bg: oklch(1 0 0);
  --bg-1: oklch(0.985 0.003 var(--h));
  --bg-2: oklch(0.965 0.005 var(--h));
  --line: oklch(0.912 0.005 var(--h));
  --line-2: oklch(0.85 0.007 var(--h));
  --fg: oklch(0.19 0.012 var(--h));
  --fg-1: oklch(0.33 0.010 var(--h));
  --fg-2: oklch(0.50 0.009 var(--h));
  --fg-3: oklch(0.52 0.008 var(--h));   /* 5.49:1 on white */
  --ac: oklch(0.310 0.185 var(--h));   /* exactly #1A0F8B */
  --ac-hi: oklch(0.255 0.165 var(--h));
  --ac-btn: oklch(0.310 0.185 var(--h));
  --ac-btn-hi: oklch(0.255 0.165 var(--h));
  --ac-lo: oklch(0.955 0.030 var(--h));
  --on-ac: oklch(1 0 0);
  --get: oklch(0.52 0.14 240);
  --post: oklch(0.48 0.13 155);
  --put: oklch(0.55 0.13 70);
  --del: oklch(0.53 0.19 25);
  --shadow: 0 1px 2px oklch(0 0 0 / 0.05), 0 14px 34px -18px oklch(0 0 0 / 0.18);
  --glow: radial-gradient(60rem 28rem at 18% -8%, oklch(0.72 0.10 var(--h) / 0.16), transparent 62%);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
/* The hero's full-bleed glow is intentionally wider than the viewport; clip it
   so it cannot extend the scrollable area. `clip` (not `hidden`) keeps the
   sticky header working. */
html { overflow-x: clip; }
body { overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Header --------------------------------------------------------------- */
.ah-bar {
  position: sticky; top: 0; z-index: 40;
  height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0 1rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 90%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
}
.ah-lockup { display: inline-flex; align-items: center; gap: 0.5rem; }
.ah-home {
  --mark-h: 1.75rem;
  /* The wordmark is an icon plus the word "ahoy", and the icon rises higher than
     the letterforms — so the element's box centre sits above the centre of the
     word. The chips are read against the word, not the box, so they are nudged
     down by the difference. Measured off the artwork: the letters span y
     12.84–44.62 of the 48-unit viewBox (centre 28.73) against a box centre of
     24 — 9.85% of the mark's height. Kept as a ratio so it survives a resize. */
  --badge-nudge: calc(var(--mark-h) * 0.0985);
  display: inline-flex; align-items: center; gap: 0.5rem;
  text-decoration: none; color: var(--fg); font-size: 0.9375rem;
  border-radius: var(--r-sm);
}
.ah-mark { color: var(--fg); display: block; height: var(--mark-h); }
/* The wordmark is inlined (not an <img>) so that currentColor inherits from
   the page — an <img> isolates the SVG in its own document, where
   currentColor resolves to black regardless of what we set on the element. */
.ah-mark svg { height: 100%; width: auto; display: block; }
.ah-word { font-weight: 640; letter-spacing: -0.018em; }

/* One shape for both chips so they read as a set rather than two unrelated
   pills; colour alone carries the difference between them. Spacing is left
   entirely to the flex gap, so the three parts sit on one even rhythm. */
.ah-api,
.ah-beta {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 600;
  /* Pinned rather than inherited: Starlight's prose leading is 1.75, which
     would inflate the same chip to 24px there and 20px here. Chip height is a
     function of its own type and padding, never of the surrounding text. */
  line-height: 1.3;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 999px; padding: 0.1rem 0.45rem;
  transform: translateY(var(--badge-nudge));
}
.ah-api {
  color: var(--ac);
  border: 1px solid color-mix(in oklab, var(--ac) 38%, transparent);
  background: var(--ac-lo);
}
.ah-sep { color: var(--line-2); }
.ah-crumb { color: var(--fg-2); }

.ah-nav { display: inline-flex; align-items: center; gap: 0.125rem; }
.ah-link {
  font: inherit; font-size: 0.875rem;
  color: var(--fg-2); text-decoration: none;
  background: none; border: 0; cursor: pointer;
  padding: 0.4rem 0.7rem; border-radius: var(--r-sm);
}
.ah-link:hover { color: var(--fg); background: var(--bg-2); }
.ah-link.is-active { color: var(--fg); }
.ah-divider { width: 1px; height: 1.1rem; background: var(--line); margin: 0 0.4rem; }
.ah-theme { min-width: 4.25rem; text-align: center; }


/* Beta badge. Deliberately NOT the brand accent — status is not identity, and
   an amber chip next to the indigo "API" pill reads as a state, not a label. */
.ah-beta {
  color: oklch(0.78 0.14 80);
  border: 1px solid color-mix(in oklab, oklch(0.78 0.14 80) 40%, transparent);
  background: color-mix(in oklab, oklch(0.78 0.14 80) 12%, transparent);
}
:root[data-theme="light"] .ah-beta { color: oklch(0.52 0.13 70); }

/* "Open Ahoy" is the way back to the product, so it carries slightly more
   weight than the section links beside it. */
.ah-app { color: var(--fg-1); font-weight: 500; }
.ah-app:hover { color: var(--ac); }

/* --- Layout --------------------------------------------------------------- */
.ah-main { max-width: var(--page); margin-inline: auto; padding: 0 1.5rem 5rem; }

/* --- Hero ----------------------------------------------------------------- */
.ah-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 3.5rem; align-items: start;
  padding: 5rem 0 4.5rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4.5rem;
}
.ah-hero::before {
  content: ""; position: absolute; inset: -6rem -50vw 0;
  background: var(--glow); pointer-events: none; z-index: -1;
}
.ah-hero-copy { padding-top: 0.75rem; }

.ah-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--fg-3); margin: 0 0 1.5rem;
}
.ah-dot { width: 0.375rem; height: 0.375rem; border-radius: 999px; background: var(--ac); }

.ah-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 5vw, 3.75rem);
  line-height: 1.04; letter-spacing: -0.025em; font-weight: 500;
  margin: 0 0 1.25rem; color: var(--fg); text-wrap: balance;
}
:root[data-theme="dark"] .ah-dim { color: oklch(0.50 0.009 var(--h)); }
:root[data-theme="light"] .ah-dim { color: oklch(0.62 0.008 var(--h)); }

.ah-lede {
  font-size: 1.0625rem; line-height: 1.6; color: var(--fg-1);
  margin: 0 0 2.25rem; max-width: 30rem;
}

.ah-cta { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.ah-cta-note {
  margin: 1.5rem 0 0; max-width: 30rem;
  font-size: 0.8125rem; line-height: 1.65; color: var(--fg-2);
}
.ah-cta-note code { font-family: var(--mono); font-size: 0.75rem; color: var(--fg-1); }
.ah-cta-note a { color: var(--fg-1); text-underline-offset: 0.15em; }
.ah-cta-note a:hover { color: var(--ac); }
.ah-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.9375rem; font-weight: 550;
  padding: 0.6rem 1.05rem; border-radius: var(--r-sm);
  text-decoration: none; border: 1px solid transparent;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.ah-btn-primary { background: var(--ac-btn); color: var(--on-ac); }
.ah-btn-primary:hover { background: var(--ac-btn-hi); }
.ah-btn-ghost { color: var(--fg-1); border-color: var(--line-2); }
.ah-btn-ghost:hover { background: var(--bg-2); color: var(--fg); }

/* --- Code panes ----------------------------------------------------------- */
.ah-hero-demo { display: grid; gap: 0.75rem; }
.ah-pane {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-1); overflow: hidden; box-shadow: var(--shadow);
}
.ah-pane-head {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.ah-pane-head code {
  font-family: var(--mono); font-size: 0.75rem; color: var(--fg-2);
}
.ah-status {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 700;
  color: var(--post); letter-spacing: 0.02em;
}
.ah-code {
  margin: 0; padding: 0.95rem 1.05rem;
  font-family: var(--mono); font-size: 0.78125rem; line-height: 1.75;
  color: var(--fg-1); white-space: pre-wrap; word-break: break-word;
  overflow-x: auto;
}
.c-fn { color: var(--ac); } .c-fl { color: var(--put); }
.c-s { color: var(--post); } .c-k { color: var(--get); } .c-b { color: var(--put); }

/* --- Method badges -------------------------------------------------------- */
.ah-m {
  font-family: var(--mono); font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.05em; line-height: 1;
  padding: 0.3rem 0.4rem; border-radius: 0.25rem;
  border: 1px solid currentColor; min-width: 3.4rem; text-align: center;
  flex: none;
}
.ah-m-get { color: var(--get); } .ah-m-post { color: var(--post); }
.ah-m-put, .ah-m-patch { color: var(--put); } .ah-m-delete { color: var(--del); }

/* --- Sections ------------------------------------------------------------- */
.ah-block { margin-bottom: 5rem; }
.ah-label {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--fg-3); margin: 0 0 1.125rem;
}

/* Four columns so the eight guides fill two rows with no empty cell. */
.ah-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.ah-card {
  background: var(--bg); padding: 1.4rem 1.4rem 1.5rem;
  text-decoration: none; display: block;
  position: relative;
  transition: background-color 0.14s ease;
}
.ah-card:hover { background: var(--bg-1); }
/* A background shift alone is only ~1.05:1 on this palette, so hover needs a
   structural cue as well. */
.ah-card::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: var(--ac); transform: scaleX(0); transform-origin: left;
  transition: transform 0.16s ease;
}
.ah-card:hover::after { transform: scaleX(1); }
.ah-card:hover h3 { color: var(--ac); }
.ah-card h3 {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.012em;
  margin: 0 0 0.45rem; color: var(--fg);
}
.ah-arrow { color: var(--fg-3); transition: transform 0.14s ease, color 0.14s ease; }
.ah-card:hover .ah-arrow { color: var(--ac); transform: translateX(3px); }
.ah-card p { margin: 0; font-size: 0.8438rem; line-height: 1.62; color: var(--fg-2); }

/* --- Quickstart ---------------------------------------------------------- */
.ah-steps {
  list-style: none; counter-reset: step; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r); overflow: clip;
}
.ah-steps li {
  counter-increment: step; background: var(--bg);
  padding: 1.4rem 1.4rem 1.5rem;
}
.ah-steps h3 {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.012em;
  margin: 0 0 0.5rem; color: var(--fg);
}
.ah-steps h3::before {
  content: counter(step);
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 600;
  display: grid; place-items: center;
  width: 1.375rem; height: 1.375rem; flex: none;
  border-radius: 999px;
  color: var(--ac);
  border: 1px solid color-mix(in oklab, var(--ac) 40%, transparent);
  background: var(--ac-lo);
}
.ah-steps p { margin: 0; font-size: 0.8438rem; line-height: 1.62; color: var(--fg-2); }
.ah-steps code {
  font-family: var(--mono); font-size: 0.78125rem; color: var(--fg-1);
  background: var(--bg-2); border-radius: 0.25rem; padding: 0.05rem 0.3rem;
}
.ah-steps a { color: var(--fg-1); }
.ah-steps a:hover { color: var(--ac); }

/* --- Endpoint index ------------------------------------------------------- */
.ah-endpoints {
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.ah-tag-group + .ah-tag-group { border-top: 1px solid var(--line); }
summary.ah-tag {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; cursor: pointer; list-style: none;
  padding: 0.7rem 1rem; background: var(--bg-1);
  border-bottom: 1px solid var(--line);
}
summary.ah-tag::-webkit-details-marker { display: none; }
summary.ah-tag h3 {
  font-family: var(--font); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: -0.005em; text-transform: none; color: var(--fg-1);
  margin: 0;
}
summary.ah-tag:hover h3 { color: var(--fg); }
.ah-tag-n {
  font-family: var(--mono); font-size: 0.6875rem; color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
/* A chevron that rotates is the clearest available "this opens" signal. */
summary.ah-tag h3::after {
  content: "›"; display: inline-block; margin-left: 0.5rem;
  color: var(--fg-3); transform: rotate(90deg);
  transition: transform 0.15s ease;
}
.ah-tag-group:not([open]) summary.ah-tag h3::after { transform: rotate(0deg); }
.ah-tag-group:last-child:not([open]) summary.ah-tag { border-bottom: 0; }
.ah-endpoints ul { list-style: none; margin: 0; padding: 0; }
.ah-endpoints li + li { border-top: 1px solid var(--line); }
.ah-endpoints a {
  display: grid;
  /* Two tracks by default — the summary is supplementary and only earns a
     column once there is room for it (see the 62rem query below). */
  grid-template-columns: 3.4rem minmax(0, 1fr);
  align-items: center; gap: 0.75rem;
  padding: 0.5rem 1rem; text-decoration: none;
  min-width: 0;
  transition: background-color 0.12s ease;
}
.ah-endpoints a:hover { background: var(--bg-1); }
.ah-endpoints code {
  font-family: var(--mono); font-size: 0.78125rem; color: var(--fg-1);
  white-space: nowrap;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.ah-op-summary {
  /* Left-aligned immediately after the path: flushing it right left up to
     841px of empty space between a path and its own description. */
  justify-self: start; padding-left: 0.75rem;
  font-size: 0.78125rem; color: var(--fg-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}

/* --- Footer --------------------------------------------------------------- */
.ah-footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  border-top: 1px solid var(--line); padding-top: 1.5rem;
  font-size: 0.8125rem; color: var(--fg-3);
}
.ah-footer a { color: var(--fg-2); text-decoration: none; }
.ah-footer a:hover { color: var(--ac); }
.ah-footer code { font-family: var(--mono); font-size: 0.75rem; }
.ah-foot-sep { color: var(--line-2); }

/* --- Reference route ------------------------------------------------------ */
#scalar-reference { height: calc(100vh - var(--bar-h)); overflow: auto; }

/* --- Responsive ----------------------------------------------------------- */
@media (min-width: 50em) { .ah-bar { padding: 0 1.5rem; } }

@media (max-width: 62rem) {
  .ah-hero { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 3.25rem; }
  .ah-grid { grid-template-columns: repeat(2, 1fr); }
  .ah-steps { grid-template-columns: 1fr; }
}
/* The path is the identifier and must never be clipped by its own summary,
   so the summary column only appears when the row is wide enough for both. */
@media (min-width: 62rem) {
  .ah-endpoints a { grid-template-columns: 3.4rem minmax(0, auto) minmax(0, 1fr); }
}
@media (max-width: 61.99rem) {
  .ah-op-summary { display: none; }
}

@media (max-width: 40rem) {
  .ah-grid { grid-template-columns: 1fr; }
  .ah-crumb, .ah-sep { display: none; }
}

/* ===========================================================================
   Scalar reference — mapped onto our tokens.

   Scalar ships its own palette, which left the reference visibly off-brand.
   It reads these custom properties, but it sets its own defaults ON the
   .scalar-app element — and an element-level custom property beats an
   inherited :root one, so these must be scoped to .scalar-app to win.
   =========================================================================== */
.scalar-app {
  --scalar-font: var(--font) !important;
  --scalar-font-code: var(--mono) !important;
  --scalar-radius: var(--r-sm) !important;
  --scalar-radius-lg: var(--r) !important;

  --scalar-background-1: var(--bg) !important;
  --scalar-background-2: var(--bg-1) !important;
  --scalar-background-3: var(--bg-2) !important;
  --scalar-background-accent: var(--ac-lo) !important;
  --scalar-border-color: var(--line) !important;

  --scalar-color-1: var(--fg) !important;
  --scalar-color-2: var(--fg-1) !important;
  --scalar-color-3: var(--fg-2) !important;
  --scalar-color-accent: var(--ac) !important;

  --scalar-color-green: var(--post) !important;
  --scalar-color-blue: var(--get) !important;
  --scalar-color-orange: var(--put) !important;
  --scalar-color-red: var(--del) !important;
}

/* Scalar's sidebar sits under our header; give it the same border language. */
.scalar-app .sidebar { border-right: 1px solid var(--line); }

/* --- Accessibility -------------------------------------------------------- */

/* Every interactive element gets a visible, consistent focus ring. Starlight
   ships one; the standalone pages did not, which failed keyboard users. */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Inside the card grid and endpoint list the outline-offset pushed the ring
   into the container's clip, so it rendered as disconnected stubs. An inset
   ring survives clipping. */
.ah-card:focus-visible,
.ah-endpoints a:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--ac);
}

.ah-skip {
  position: absolute; left: 0.75rem; top: 0.6rem; z-index: 100;
  padding: 0.5rem 0.85rem; border-radius: var(--r-sm);
  background: var(--ac); color: var(--on-ac);
  font-size: 0.875rem; font-weight: 550; text-decoration: none;
  transform: translateY(-150%);
  transition: transform 0.14s ease;
}
.ah-skip:focus-visible { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}