/* Prose styling for the documentation pages: the public import guide
   (/docs/import) and the gated partner spec (/partners/<id>/docs).

   Both render markdown into one <article class="docpage">, so the rules
   live here rather than twice inline. Page-specific furniture (the partner
   page's live "Run" widget) stays in that page's own <style>. */

.docpage {
  max-width: 760px;
  margin: var(--space-8) auto var(--space-10);
  padding: 0 var(--space-4);
  line-height: 1.6;
}

.docpage .kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2);
}

.docpage h1 {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-6);
}

.docpage h2 {
  font-size: 20px;
  font-weight: 500;
  margin: var(--space-8) 0 var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}

.docpage h3 {
  font-size: 16px;
  font-weight: 600;
  margin: var(--space-5) 0 var(--space-2);
}

.docpage p,
.docpage ul,
.docpage ol { margin: 0 0 var(--space-3); }

.docpage li { margin-bottom: 4px; }

/* Markdown links. base.css gives a bare `a` inherited colour and no
   underline, which leaves a link in a paragraph invisible until someone
   happens to hover it. Underline it so it reads as a link; the amber
   hover from base.css is the site's own and stays. */
.docpage a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.docpage code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: color-mix(in srgb, var(--color-wood) 10%, transparent);
  padding: 1px 5px;
  border-radius: 3px;
}

.docpage pre {
  background: #1f1b17;
  color: #f1ebe0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 var(--space-4);
}

.docpage pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* Tables scroll on their own rather than pushing the page sideways. */
.docpage table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  margin: 0 0 var(--space-4);
  display: block;
  overflow-x: auto;
}

.docpage th,
.docpage td {
  text-align: left;
  padding: 6px 12px 6px 0;
  border-bottom: 1px solid var(--color-divider);
  vertical-align: top;
}

.docpage th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  font-weight: 500;
}

/* The markdown toc extension emits one; neither page shows it. */
.docpage .toc { display: none; }

/* Anchor links (#the-answer, #dart) land under the sticky site header
   without this. */
.docpage h2,
.docpage h3,
.doc-tabs { scroll-margin-top: 72px; }

/* ─── Language switcher ───────────────────────────────────────────
   One panel for the examples with a row of tabs over it, built by the
   page's own script out of the h3 headings it finds. Without JavaScript
   nothing here applies and the reader still gets every example, stacked
   and labelled, which is the same page minus the convenience. */

.doc-tabs { margin: 0 0 var(--space-5); }

.doc-tabs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}

/* Scoped a level deeper than the bare-element rules in base.html, which
   hand every button a card background, a border and a radius. `button:hover`
   is (0,1,1) and would repaint the tab into a pill mid-hover; the strip in
   the selector settles that without reaching for !important. */
.doc-tabs-bar .doc-tab {
  font: inherit;
  font-size: 14px;
  color: var(--color-text-secondary);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  padding: 6px 2px;
  cursor: pointer;
  transition: color var(--dur-short) var(--ease-out);
}

.doc-tabs-bar .doc-tab:hover {
  background: none;
  color: var(--color-text);
}

.doc-tabs-bar .doc-tab[aria-selected="true"] {
  color: var(--color-text);
  border-bottom-color: var(--color-wood);
  font-weight: 500;
}

.doc-tabs-bar .doc-tab:focus-visible {
  outline: 2px solid var(--color-wood);
  outline-offset: 2px;
  border-radius: 2px;
}


/* Panels are toggled with the hidden attribute. Nothing here may set
   `display` on .doc-tabpanel itself: an author display rule outranks
   [hidden] by cascade origin and every panel would show at once. This
   guard goes in alongside, not later. */
.doc-tabpanel[hidden] { display: none; }

/* The first block inside a panel sits right under the tab strip. */
.doc-tabpanel > :first-child { margin-top: 0; }