/* Coinstash brand layer for the SpectaQL reference.
 *
 * Source of truth: https://design.coinstash.ai (machine-readable mirror of design.coinstash.com.au).
 * Loaded after spectaql.min.css and overrides it; console.css loads after this and reads its tokens.
 *
 * Three rules from the guidelines drive most of what is below:
 *   - PP Telegraf Coinstash is for headings and numeric data ONLY. Body copy is FK Grotesk Neue.
 *   - Corner radius is 4 / 8 / 12 / 16 — nothing else.
 *   - The palette is the eleven tokens in :root. No other colours.
 */

/* Body copy — "clarity and restraint ... extended passages of text". */
@font-face { font-family: "FK Grotesk Neue"; src: url("fonts/FKGroteskNeue-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "FK Grotesk Neue"; src: url("fonts/FKGroteskNeue-Medium.woff2") format("woff2");  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "FK Grotesk Neue"; src: url("fonts/FKGroteskNeue-Bold.woff2") format("woff2");    font-weight: 700; font-style: normal; font-display: swap; }

/* Headlines and numerals only. */
@font-face { font-family: "PP Telegraf Coinstash"; src: url("fonts/PPTelegrafCoinstash-Regular.woff2") format("woff2");  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Telegraf Coinstash"; src: url("fonts/PPTelegrafCoinstash-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Telegraf Coinstash"; src: url("fonts/PPTelegrafCoinstash-Black.woff2") format("woff2");    font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* The eleven brand tokens, verbatim. */
  --cs-black: #000000;
  --cs-white: #FFFFFF;
  --cs-purple: #5C5BD5;
  --cs-purple-dark: #373184;
  --cs-purple-light: #BFBEFF;
  --cs-grey-dark: #9B9A9E;
  --cs-grey-light: #EAEBF6;
  --cs-mint: #B2FFBE;
  --cs-coral: #FF7262;
  --cs-forest: #527658;
  --cs-terracotta: #C46751;

  /* Derived surfaces — tints of the tokens above, nothing new. */
  --cs-grey-wash: #F5F6FB;
  --cs-purple-wash: #F2F2FE;
  --cs-ink-soft: #4A4A55;
  /* cool-grey-dark is only 2.8:1 on white, which fails AA for the small uppercase labels.
   * Darkened tint of the same hue for on-white use; the token itself stays for dark surfaces. */
  --cs-label: #6B6A72;

  /* Dark code surfaces are black, per the palette. */
  --cs-code-bg: #000000;
  --cs-code-bg-soft: #14141C;
  --cs-code-line: #2A2A33;
  --cs-code-fg: #EAEBF6;

  /* Corner radius scale — 4 tags, 8 nested, 12 default, 16 large containers. */
  --cs-r-tag: 4px;
  --cs-r-sm: 8px;
  --cs-r-md: 12px;
  --cs-r-lg: 16px;

  --cs-font-body: "FK Grotesk Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --cs-font-head: "PP Telegraf Coinstash", "FK Grotesk Neue", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --cs-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ─── Base ─────────────────────────────────────────────────────────────── */

#spectaql {
  font-family: var(--cs-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--cs-ink-soft);
  background: var(--cs-white);
  -webkit-font-smoothing: antialiased;
}
#spectaql p, #spectaql li, #spectaql td, #spectaql th { font-family: var(--cs-font-body); }

/* Headings and numerals in the brand face. */
#spectaql h1, #spectaql h2, #spectaql h3, #spectaql h4, #spectaql h5, #spectaql h6 {
  font-family: var(--cs-font-head);
  color: var(--cs-black);
  letter-spacing: -0.01em;
  font-weight: 600;
}
#spectaql a { color: var(--cs-purple); text-decoration: none; }
#spectaql a:hover { color: var(--cs-purple-dark); text-decoration: underline; }

/* ─── Sidebar ──────────────────────────────────────────────────────────── */

#spectaql #sidebar {
  background: var(--cs-purple-dark);
  border-right: 0;
  padding-top: 0;
}
#spectaql .sidebar-top-container { padding: 0; }
#spectaql #logo {
  display: block;
  padding: 26px 24px 22px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  margin-bottom: 8px;
}
#spectaql #logo img { display: block; width: 150px; height: auto; }

#spectaql #sidebar #nav { padding: 0 8px 40px; }
#spectaql #sidebar #nav .nav-group { margin-top: 0; margin-bottom: 14px; }
#spectaql #sidebar #nav .nav-group li { margin-bottom: 0; }

/* Group and section titles — these must outrank SpectaQL's own colour rules, which are
 * written as `#spectaql #sidebar .nav-group-title` etc. Match that weight or beat it. */
#spectaql #sidebar #nav .nav-group-title,
#spectaql #sidebar .nav-group-title {
  font-family: var(--cs-font-head);
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cs-purple-light); opacity: 1;
  padding: 0 16px; margin: 0 0 6px;
}
#spectaql #sidebar #nav .nav-group-section-title,
#spectaql #sidebar .nav-group-section-title {
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 0 16px; margin: 10px 0 4px; opacity: 1;
}
#spectaql #sidebar #nav .nav-group-section-title a,
#spectaql #sidebar .nav-group-section-title a {
  color: rgba(255,255,255,.62); text-decoration: none;
}
#spectaql #sidebar #nav .nav-group-section-title a:hover { color: var(--cs-white); }

/* Every nav link, in every state SpectaQL's JS can put it in. */
#spectaql #sidebar #nav ul { list-style: none; margin: 0; padding: 0; }
#spectaql #sidebar #nav ul li a,
#spectaql #sidebar #nav ul li a:link,
#spectaql #sidebar #nav ul li a:visited {
  display: block; padding: 5px 16px; border-radius: var(--cs-r-sm); margin: 0;
  font-family: var(--cs-font-mono); font-size: 12.5px; line-height: 1.45;
  color: rgba(255,255,255,.72); text-decoration: none;
  transition: background .12s, color .12s;
}
#spectaql #sidebar #nav ul li a:hover { background: rgba(191,190,255,.14); color: var(--cs-white); }
/* SpectaQL's scrollspy marks the current link with .nav-scroll-active and colours it #222 via
 * `#spectaql #sidebar a.nav-scroll-active` — two IDs, so a one-ID rule of ours never wins. */
#spectaql #sidebar #nav ul li a.nav-scroll-active,
#spectaql #sidebar #nav ul li a.nav-scroll-active:hover {
  background: var(--cs-purple); color: var(--cs-white); font-weight: 500;
}
#spectaql .close-button { color: var(--cs-white); }

/* ─── Content shell ────────────────────────────────────────────────────── */

/* The empty right-hand half: above 48em SpectaQL puts copy and examples side by side at
 * `#spectaql .doc-row .doc-copy{width:50%}` (1,2,0). We stack them instead — the code panels want
 * the full width — so this has to match that selector depth, media query and all. */
#spectaql #docs { padding: 48px 40px 80px; max-width: 76em; }
#spectaql .doc-heading {
  font-family: var(--cs-font-head); font-size: 40px; font-weight: 600;
  letter-spacing: -.025em; line-height: 1.1; color: var(--cs-black);
  margin: 0 0 8px; overflow: visible; text-overflow: clip;
}
#spectaql #content { max-width: 100%; }
#spectaql .doc-row { display: block; max-width: none; padding: 0; }
#spectaql .doc-row .doc-copy,
#spectaql .doc-row .doc-examples {
  width: 100%; float: none; padding-left: 0; padding-right: 0;
}
@media (min-width: 48em) {
  #spectaql .doc-row { display: block; }
  #spectaql .doc-row .doc-copy,
  #spectaql .doc-row .doc-examples {
    width: 100%; padding-left: 0; padding-right: 0;
  }
  #spectaql .doc-row .doc-examples { margin-top: 22px; }
}
#spectaql .doc-copy > div:first-child { margin-top: 0; }

#spectaql .group-heading {
  border-top: 0; padding-top: 0;
  font-family: var(--cs-font-head);
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cs-purple); margin: 64px 0 12px; padding: 0;
}

/* ─── Operation / definition cards ─────────────────────────────────────── */

#spectaql .operation, #spectaql .definition {
  border: 1px solid var(--cs-grey-light);
  border-radius: var(--cs-r-lg);
  background: var(--cs-white);
  padding: 28px 30px;
  margin: 0 0 20px;
  scroll-margin-top: 24px;
}
#spectaql .operation-group-name, #spectaql .definition-group-name {
  border-top: 0; padding-top: 0;
  font-family: var(--cs-font-body);
  font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cs-label); margin-bottom: 12px;
}
#spectaql .operation-group-name a, #spectaql .definition-group-name a { color: inherit; }
#spectaql .operation-group-name a:hover, #spectaql .definition-group-name a:hover,
#spectaql .group-heading a:hover { color: var(--cs-purple); font-weight: inherit; }
#spectaql .group-heading a { color: inherit; }

#spectaql .operation .operation-heading,
#spectaql .operation .definition-heading,
#spectaql .definition .definition-heading,
#spectaql .definition .operation-heading {
  margin: 0 0 6px; font-size: 26px; font-weight: 600; letter-spacing: -.02em;
  overflow: visible; text-overflow: clip;
}
#spectaql .operation .operation-heading code,
#spectaql .definition .definition-heading code {
  background: none; border: 0; padding: 0;
  font-family: var(--cs-font-head); font-size: inherit; font-weight: inherit; color: var(--cs-black);
}
/* Verb tag — 4px radius, the "small components like tags" step. */
#spectaql .operation-query .operation-heading::after,
#spectaql .operation-mutation .operation-heading::after {
  content: "QUERY"; vertical-align: middle; margin-left: 14px;
  font-family: var(--cs-font-body); font-size: 10px; font-weight: 600; letter-spacing: .1em;
  padding: 5px 8px; border-radius: var(--cs-r-tag);
  background: var(--cs-purple-wash); color: var(--cs-purple-dark);
}
#spectaql .operation-mutation .operation-heading::after {
  content: "MUTATION"; background: var(--cs-mint); color: #1B3320;
}

#spectaql .operation-description { margin-top: 14px; }
#spectaql .operation-description p { margin: 0 0 10px; max-width: 70ch; }

/* Section labels. */
#spectaql .doc-copy .doc-copy-section > h5 {
  font-family: var(--cs-font-body);
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cs-label); margin: 30px 0 12px;
}

/* ─── Tables ───────────────────────────────────────────────────────────── */

#spectaql .doc-copy table { width: 100%; border-collapse: collapse; margin: 0; font-size: 14.5px; }
#spectaql .doc-copy table tr th {
  text-align: left; padding: 9px 12px;
  font-family: var(--cs-font-body);
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cs-label); border-bottom: 1px solid var(--cs-grey-light);
  font-weight: 600;
}
#spectaql .doc-copy table tr td {
  padding: 13px 12px; border-bottom: 1px solid var(--cs-grey-light); vertical-align: top; line-height: 1.6;
}
#spectaql .doc-copy table tr:last-child td { border-bottom: 0; }
#spectaql .property-name code {
  background: none; padding: 0; border: 0;
  font-family: var(--cs-font-mono); font-size: 13px; font-weight: 600; color: var(--cs-black);
}
#spectaql .property-type code {
  font-family: var(--cs-font-mono); font-size: 12px;
  background: var(--cs-purple-wash); color: var(--cs-purple-dark);
  padding: 2px 6px; border-radius: var(--cs-r-tag); border: 0;
}
#spectaql .property-type a, #spectaql .property-type a:hover { text-decoration: none; }

/* ─── Inline code ──────────────────────────────────────────────────────── */

#spectaql p code, #spectaql li code, #spectaql td code {
  font-family: var(--cs-font-mono); font-size: .86em;
  background: var(--cs-grey-wash); border: 1px solid var(--cs-grey-light);
  border-radius: var(--cs-r-tag); padding: 1px 5px; color: var(--cs-black);
}

/* ─── Code blocks ──────────────────────────────────────────────────────── */

/* SpectaQL paints `#spectaql .doc-examples .example-section-is-code h5` solid black as a label
 * bar; we need at least that weight to replace it with a quiet caption. */
#spectaql .doc-examples .example-section-is-code h5,
#spectaql #introduction .example-section-is-code h5 {
  background: none; color: var(--cs-label);
  font-family: var(--cs-font-body);
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: 0; margin: 0 0 10px; opacity: 1;
}
#spectaql .example-section { margin: 0 0 18px; }

/* Every code block gets the dark surface — the introduction's markdown fences are plain <pre>
 * with no .example-section wrapper, so scoping this to those classes left light-on-white text. */
#spectaql pre {
  background: var(--cs-code-bg); color: var(--cs-code-fg);
  border: 0; border-radius: var(--cs-r-md);
  padding: 0; margin: 0 0 18px; overflow: hidden;
}
#spectaql .example-section-is-code pre,
#spectaql pre.hljs {
  background: var(--cs-code-bg); color: var(--cs-code-fg);
  border: 0; border-radius: var(--cs-r-md);
  padding: 0; margin: 0; overflow: hidden;
}
/* SpectaQL sets `#spectaql pre code{display:block;background:#222}` — that grey box is what shows
 * through behind the code. Neutralise it everywhere, then own the padding here. */
#spectaql pre code,
#spectaql pre code.hljs,
#spectaql .example-section-is-code pre code {
  display: block; background: none; border: 0; border-radius: 0;
  font-family: var(--cs-font-mono); font-size: 12.5px; line-height: 1.7;
  padding: 18px 20px; color: var(--cs-code-fg); overflow-x: auto;
}

/* Syntax — palette tokens only. */
#spectaql .hljs-string, #spectaql .hljs-symbol { color: var(--cs-mint); }
#spectaql .hljs-keyword, #spectaql .hljs-literal { color: var(--cs-purple-light); }
#spectaql .hljs-number { color: var(--cs-coral); }
#spectaql .hljs-attr, #spectaql .hljs-tag, #spectaql .hljs-type, #spectaql .hljs-title { color: var(--cs-white); }
#spectaql .hljs-comment { color: var(--cs-grey-dark); font-style: italic; }
#spectaql .hljs-punctuation { color: var(--cs-grey-dark); }

/* ─── Introduction ─────────────────────────────────────────────────────── */

#spectaql #introduction .doc-copy > div { max-width: 78ch; }
#spectaql #introduction h1 {
  font-size: 34px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 16px;
}
#spectaql #introduction h3 {
  font-size: 17px; font-weight: 600; margin: 36px 0 10px;
  color: var(--cs-black); letter-spacing: 0; text-transform: none;
}

/* ─── Narrow viewports ─────────────────────────────────────────────────── */

/* GraphQL type names are long unbreakable tokens; without this they push the whole page wider
 * than the phone and the reader gets a horizontally scrolling document. */
#spectaql .operation .operation-heading,
#spectaql .definition .definition-heading,
#spectaql p code, #spectaql li code, #spectaql td code,
#spectaql .property-name code, #spectaql .property-type code {
  overflow-wrap: anywhere;
}
#spectaql .doc-copy table tr td { overflow-wrap: anywhere; }

@media (max-width: 47.99em) {
  #spectaql #docs { padding: 0 16px 56px; }
  /* SpectaQL bleeds the navbar with margin:-20px to cancel #docs' own 20px padding; ours is 16. */
  #spectaql #mobile-navbar { margin-left: -16px; margin-right: -16px; }
  #spectaql .operation, #spectaql .definition { padding: 20px 16px; border-radius: var(--cs-r-md); }
  #spectaql .operation .operation-heading,
  #spectaql .definition .definition-heading { font-size: 21px; }
  /* Stack the argument table into rows rather than squeezing two columns into 300px. */
  #spectaql .doc-copy table tr td { display: block; padding: 4px 0; border-bottom: 0; }
  #spectaql .doc-copy table tr { display: block; border-bottom: 1px solid var(--cs-grey-light); padding: 10px 0; }
  #spectaql .doc-copy table tr:last-child { border-bottom: 0; }
  #spectaql .doc-copy table thead { display: none; }
}

/* ─── "Copy page" menu for AI assistants (assets/llm-menu.js) ──────────── */

#spectaql .operation, #spectaql #content { position: relative; }
#spectaql .operation .operation-heading { padding-right: 200px; }

.cs-pm { position: absolute; z-index: 20; font-family: var(--cs-font-body); }
.cs-pm-op { top: 24px; right: 28px; }
.cs-pm-page { top: 4px; right: 0; }

.cs-pm-split {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--cs-grey-light); border-radius: var(--cs-r-sm); background: var(--cs-white);
}
.cs-pm-main, .cs-pm-toggle {
  appearance: none; border: 0; background: none; cursor: pointer; color: var(--cs-black);
  display: inline-flex; align-items: center; gap: 7px; font: 500 13px/1 var(--cs-font-body);
}
.cs-pm-main { padding: 8px 12px; border-radius: var(--cs-r-sm) 0 0 var(--cs-r-sm); }
.cs-pm-toggle { padding: 8px 9px; border-left: 1px solid var(--cs-grey-light); border-radius: 0 var(--cs-r-sm) var(--cs-r-sm) 0; }
.cs-pm-main:hover, .cs-pm-toggle:hover { background: var(--cs-grey-wash); }
/* Line icons (Lucide) are stroked; brand marks keep their own fills - the Claude spark stays orange. */
.cs-pm-line { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cs-pm-brand { width: 16px; height: 16px; flex: none; }
.cs-pm-icon .cs-pm-brand, .cs-pm-icon .cs-pm-line { width: 17px; height: 17px; }
.cs-pm-icon { color: var(--cs-black); }
.cs-pm-toggle svg { transition: transform .15s; }
.cs-pm.is-open .cs-pm-toggle svg { transform: rotate(180deg); }
.cs-pm-main:focus-visible, .cs-pm-toggle:focus-visible, .cs-pm-item:focus-visible { outline: 2px solid var(--cs-purple); outline-offset: 1px; }

.cs-pm-menu {
  position: absolute; right: 0; top: calc(100% + 6px); width: 300px; padding: 6px;
  background: var(--cs-white); border: 1px solid var(--cs-grey-light); border-radius: var(--cs-r-md);
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .22);
}
.cs-pm-item {
  appearance: none; border: 0; background: none; cursor: pointer; width: 100%; text-align: left;
  display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--cs-r-sm);
}
.cs-pm-item:hover, .cs-pm-item:focus-visible { background: var(--cs-purple-wash); }
.cs-pm-icon {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--cs-grey-light); border-radius: var(--cs-r-sm); background: var(--cs-white);
}
.cs-pm-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-pm-title { display: inline-flex; align-items: center; gap: 4px; font: 500 14px/1.3 var(--cs-font-body); color: var(--cs-black); }
.cs-pm-out { width: 12px; height: 12px; color: var(--cs-label); }
.cs-pm-sub { font: 400 12.5px/1.35 var(--cs-font-body); color: var(--cs-label); }

@media (max-width: 47.99em) {
  #spectaql .operation .operation-heading { padding-right: 0; }
  .cs-pm { position: relative; top: auto; right: auto; display: inline-block; margin: 10px 0 4px; }
  .cs-pm-menu { right: auto; left: 0; width: min(300px, 86vw); }
}