/* Docs-only additions on top of base.css */

/* ── Contents toggle (phones only) ─────────────────── */
.docs-toggle { display: none; }
html:not(.js) #copyMdBtn, html:not(.js) #tryItContainer, html:not(.js) [data-copy-ai] { display: none; }

@media (max-width: 960px) {
  .js .docs-toggle {
    display: flex; justify-content: space-between; width: 100%;
    padding-bottom: 10px; border-bottom: 1px solid var(--ink);
  }
  .docs-toggle::after { content: "+"; color: var(--mute); }
  .docs-toggle[aria-expanded="true"]::after { content: "−"; }
  .js .page--docs #docsSidebar:not(.open) { display: none; }

  /* Content right after the contents toggle; secondary links move below it */
  .page--docs { gap: 28px; }
  .page--docs .side { display: contents; }
  .page--docs .side > * { order: 3; }
  .page--docs .side > .brand, .page--docs .docs-toggle, .page--docs #docsSidebar { order: 1; }
  .page--docs .work { order: 2; margin-bottom: 20px; }
}

/* ── Try-it panel ──────────────────────────────────── */
.try-it { background: var(--tile); }
.try-it summary {
  list-style: none; cursor: pointer; padding: 12px 16px;
  display: flex; justify-content: space-between; gap: 12px;
}
.try-it summary::-webkit-details-marker { display: none; }
.try-it summary::after { content: "+"; color: var(--mute); }
.try-it[open] summary::after { content: "−"; }
.try-it-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.try-it-url-row { display: flex; gap: 12px; align-items: baseline; border-bottom: 1px solid var(--ink); padding-bottom: 8px; }
.try-it-url { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 0; font: 12px var(--mono); }
.try-it-send { flex: none; color: var(--accent); }
.try-it-send:hover { color: var(--ink); }
.try-it-send:disabled { color: var(--mute); cursor: default; }
.try-it-output {
  background: var(--bg); border: 1px solid var(--line); padding: 14px 16px;
  font: 11.5px/1.6 var(--mono); color: #555; white-space: pre; overflow: auto; max-height: 420px; min-height: 60px;
}

/* ── Code blocks ───────────────────────────────────── */
.md-copy-btn {
  position: absolute; top: 10px; right: 12px;
  font: 11px var(--sans); color: var(--mute); opacity: 0;
}
.prose pre:hover .md-copy-btn, .md-copy-btn:focus-visible { opacity: 1; }
.md-copy-btn:hover { color: var(--ink); }
@media (hover: none) {
  .md-copy-btn { opacity: 1; top: 8px; }
  .prose pre { padding-top: 34px; }
}

/* Light Prism theme: ink keys, blue strings, muted punctuation and comments */
.prose pre[class*="language-"], .prose code[class*="language-"] { color: var(--ink); text-shadow: none; }
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: var(--mute); }
.token.punctuation, .token.operator { color: #777; }
.token.property, .token.tag, .token.attr-name, .token.keyword, .token.function { color: var(--ink); }
.token.string, .token.attr-value, .token.url, .token.char { color: var(--accent); }
.token.number, .token.boolean, .token.null, .token.constant { color: #7a5b1e; }
.token.variable, .token.parameter { color: var(--ink); }