/*
  Generated from spdd/prompt/GGQPA-XXX-202609201325-[Feat]-site-xataworks-developer-section.md
  — do not hand-edit; change the Canvas and run /spdd-generate.

  ADDITIVE ONLY. This sheet is loaded after ../styles.css and must never
  redefine a selector that sheet defines. An override here works until the site
  Canvas regenerates styles.css, at which point these pages change appearance
  for reasons visible in neither diff. Checked by the Canvas's §7.12.

  Every colour below is a token from ../styles.css, or one of the alpha
  overlays the site Canvas's Structure → Theme layer §2a permits. No new token
  is declared here.
*/

/* ── The article column ───────────────────────────────────────────────── */

.doc-main { padding-block: clamp(40px, 6vw, 72px) clamp(64px, 9vw, 110px); }

.doc-col {
  width: 100%;
  max-width: 740px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── Breadcrumb ───────────────────────────────────────────────────────── */

/* Aligns with the content column at both layouts: the article measure below
   1040px, the full two-column width above it. */
.doc-crumbs {
  width: 100%;
  max-width: 740px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  font-size: .9rem;
  color: var(--ink-soft);
  margin-bottom: clamp(18px, 2.4vw, 28px);
}
.doc-crumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.doc-crumbs li { display: flex; align-items: center; gap: 8px; }
.doc-crumbs li + li::before {
  content: "/";
  color: var(--ink-faint);
}
.doc-crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ── The section index ────────────────────────────────────────────────────
   Two layouts, one breakpoint. Below 1040px it is a wrapping row of short
   labels above the article; at and above, a sticky column beside it. It is
   never display:none — a navigation aid that only exists on a desktop has
   not solved navigation. Canvas: Approach §8, checked by §7.4 and §7.15. */

.doc-nav { margin-bottom: clamp(26px, 3.4vw, 38px); }
.doc-nav h2 {
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .85em;
  font-weight: 650;
}
.doc-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.doc-nav li { display: block; }
.doc-nav a,
.doc-nav span {
  display: block;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: .89rem;
  line-height: 1.3;
  text-decoration: none;
  color: var(--ink-soft);
}
.doc-nav a:hover { border-color: var(--accent); color: var(--accent); }
.doc-nav [aria-current="page"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  font-weight: 600;
}

@media (min-width: 1040px) {
  .doc-crumbs { max-width: 1100px; }
  .doc-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 740px);
    gap: clamp(32px, 4vw, 64px);
    justify-content: center;
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .doc-layout > .doc-col { padding-inline: 0; margin-inline: 0; }
  .doc-nav {
    position: sticky;
    top: 78px;
    align-self: start;
    margin-bottom: 0;
  }
  .doc-nav ul { display: block; }
  .doc-nav li + li { margin-top: 2px; }
  .doc-nav a,
  .doc-nav span {
    border: 0;
    border-radius: 0;
    padding: 7px 0 7px 12px;
    border-left: 2px solid var(--line);
  }
  .doc-nav a:hover { border-left-color: var(--accent); background: none; }
  .doc-nav [aria-current="page"] {
    background: none;
    color: var(--ink);
    border-left-color: var(--accent);
  }
}

.doc-head { margin-bottom: clamp(30px, 4vw, 44px); }

/* The shared h1 step is sized for a marketing hero and swamps an article.
   A different selector, not an override of `h1` — see the Canvas's §7.12. */
.doc-head h1 {
  font-size: clamp(1.85rem, 3.6vw, 2.5rem);
  line-height: 1.12;
  margin-bottom: .34em;
}

.doc-standfirst {
  font-size: clamp(1.06rem, 1.6vw, 1.22rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
}

.doc-body > * + * { margin-top: 1.15em; }
.doc-body h2 {
  font-size: clamp(1.32rem, 2.2vw, 1.64rem);
  letter-spacing: -.02em;
  margin-top: 2.1em;
  padding-top: 1.1em;
  border-top: 1px solid var(--line-soft);
}
.doc-body h3 {
  font-size: 1.08rem;
  letter-spacing: -.015em;
  margin-top: 1.9em;
}
.doc-body p,
.doc-body li { color: var(--ink-soft); }
.doc-body strong { color: var(--ink); font-weight: 650; }
.doc-body ul,
.doc-body ol { padding-left: 1.3em; }
.doc-body li + li { margin-top: .5em; }

.doc-note {
  margin-top: 1.5em;
  padding: 18px 20px;
  border-left: 3px solid var(--accent);
  background: var(--tint);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.doc-note > * + * { margin-top: .7em; }

/* ── Code samples ─────────────────────────────────────────────────────── */

/*
  No highlighting. Every mechanism for it either runs a script at load — which
  the one permitted inline script may not do — or needs a build step, which the
  site Canvas's Safeguards §8 forbids. See the Canvas's Approach §6.

  overflow-x is on the block, never on the page: a long line scrolls inside its
  own box. Horizontal page overflow at any width from 320px up is a defect.
*/
.doc-body pre {
  margin-top: 1.4em;
  margin-bottom: 1.4em;
  padding: 18px 20px;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: .88rem;
  line-height: 1.6;
  tab-size: 2;
}
.doc-body pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  color: var(--ink);
  white-space: pre;
}

/* --ink-soft, not --ink-faint: the faint token reaches only 3.29:1 on --paper
   and this is body text. Computed, not chosen — the Canvas's §7.13. */
.doc-caption {
  margin-top: -.9em;
  font-size: .92rem;
  color: var(--ink-soft);
}

/* The deferral block is gone (Canvas 2026-09-20): articles are self-contained
   and no longer hand the reader to the generated manual. Its rules are
   deleted rather than left unused — a stylesheet every visitor downloads
   should not carry selectors nothing matches. */

/* ── The diagram ──────────────────────────────────────────────────────────
   Article 1's component diagram: nested boxes for what lives inside what,
   directed arrows for the interactions. The panel reuses .diagram and
   .diagram-title from ../styles.css — they exist, they are live on the home
   page, and using them is not overriding them.

   Depth is carried by nesting and by a lighter fill at each level, never by
   hue: every component names itself in words, so the drawing survives being
   read without colour and needs no legend.

   The width cap is what decides whether the diagram is worth having. The
   viewBox is kept narrow (460) and the cap modest (500), so the rendered
   range is roughly 280-500px rather than 280-660 and the labels stay
   legible at both ends. */

.doc-diagram {
  max-width: 500px;
  margin-inline: auto;
  margin-block: clamp(28px, 3.4vw, 40px);
}
.doc-diagram figcaption {
  margin-top: 14px;
  font-size: .92rem;
  color: var(--ink-soft);
}

/* Nesting levels: the outer shell, then each box one step lighter than the
   ground it sits on, so depth reads without a single coloured fill. */
.dgx-outer { fill: var(--tint); stroke: var(--line); stroke-width: 1.6; }
.dgx-box { fill: var(--paper); stroke: var(--line); stroke-width: 1.3; }
.dgx-inner { fill: var(--tint); stroke: var(--line); stroke-width: 1.3; }
.dgx-outside { fill: var(--paper); stroke: var(--ink-soft); stroke-width: 1.6; }

.dgx-shell { fill: var(--ink); font: 700 15px var(--font); letter-spacing: 1px; }
.dgx-actor { fill: var(--ink); font: 700 13px var(--font); letter-spacing: .8px; }
.dgx-holds { fill: var(--ink-soft); font: 400 12.5px var(--font); }
.dgx-tool { fill: var(--ink); font: 400 13px var(--mono); }

.dgx-flow { stroke: var(--accent); stroke-width: 1.8; fill: none; }
.dgx-head { fill: var(--accent); }
.dgx-msg { fill: var(--ink); font: 400 12.5px var(--font); }

/* ── The article footer ───────────────────────────────────────────────── */

.doc-foot {
  margin-top: clamp(40px, 5vw, 58px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: .96rem;
}

/* ── The hub's article index ──────────────────────────────────────────── */

.doc-index { list-style: none; margin: 0; padding: 0; }
.doc-index > li {
  padding-block: 22px;
  border-top: 1px solid var(--line);
}
.doc-index > li:last-child { border-bottom: 1px solid var(--line); }
.doc-index h3 { font-size: 1.1rem; letter-spacing: -.015em; margin-bottom: .35em; }
.doc-index p { color: var(--ink-soft); font-size: .98rem; margin: 0; }
.doc-index .doc-start {
  display: inline-block;
  margin-left: 10px;
  font-size: .78rem;
  font-weight: 650;
  color: var(--accent);
  vertical-align: middle;
}

/* ── Captured figures and recordings ──────────────────────────────────── */
/* A figure here is a frame of the running application, so it is framed like
   evidence rather than bled to the edge: a hairline border says where the
   application's own window ends and the page begins, which matters when the
   capture is itself a screenshot of a window on a light background. */

.doc-shot,
.doc-cast {
  margin-block: clamp(26px, 3.2vw, 38px);
  margin-inline: 0;
}

.doc-shot picture,
.doc-cast video {
  display: block;
}

.doc-shot img,
.doc-cast video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--tint);
}

/* Same treatment and same token as a code sample's caption: --ink-soft, never
   --ink-faint, which reaches only 3.29:1 on --paper. */
.doc-shot figcaption,
.doc-cast figcaption {
  margin-top: 10px;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.doc-shot figcaption code,
.doc-cast figcaption code {
  font-size: .95em;
}

/* ── Print ────────────────────────────────────────────────────────────── */

@media print {
  .doc-body pre {
    background: #fff;
    border-color: #000;
  }
  .doc-body pre code { color: #000; }
  .doc-note { background: #fff; }
  .doc-nav, .doc-crumbs { display: none; }
  .doc-diagram { break-inside: avoid; }
  .doc-shot { break-inside: avoid; }
  /* A video prints as its poster at best and as a black rectangle at worst.
     The procedure it shows is written out beside it, which is the copy that
     survives paper. */
  .doc-cast { display: none; }
}

/* ── Added for the WebMCP section (Canvas GGQPA-XXX-202610031400, O5) ───── */

/* A figure photographed as its own element — a permission card, a dialog — is
   shown at its natural size rather than stretched to the column, so its text
   stays the size it was on screen. */
.doc-shot.is-element img {
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}

/* "Try it": an example's address, to paste into XataWorks. A URL is one long
   unbreakable run, so it is allowed to break anywhere rather than widen the
   page at 320px. */
.doc-try {
  margin-top: 1.5em;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--tint);
}
.doc-try > * + * { margin-top: .6em; }
.doc-try code { overflow-wrap: anywhere; word-break: break-all; }

/* Answer label → what it does. Two columns where there is room, stacked on a
   phone. */
.doc-answers {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 10px 22px;
  margin-top: 1.2em;
}
.doc-answers dt { font-weight: 650; }
.doc-answers dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 640px) {
  .doc-answers { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .doc-answers dd { margin-bottom: 10px; }
}

/* Side-by-side comparison tables. */
.doc-table-wrap { overflow-x: auto; margin-top: 1.2em; }
.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .94rem;
}
.doc-table th,
.doc-table td {
  text-align: left;
  vertical-align: top;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}
.doc-table thead th { font-size: .82rem; color: var(--ink-soft); }

/* The bus diagram. Boxes and arrows only — never anything that resembles the
   application's interface. */
.bus-figure {
  max-width: 620px;
  margin-inline: auto;
  margin-block: clamp(28px, 3.4vw, 40px);
}
.bus-figure svg { display: block; width: 100%; height: auto; }
.bus-figure figcaption { margin-top: 14px; font-size: .92rem; color: var(--ink-soft); }
.bus-bar { fill: var(--accent); }
.bus-bar-label { fill: var(--paper); font: 700 15px var(--font); letter-spacing: 1px; }
.bus-device { fill: var(--paper); stroke: var(--line); stroke-width: 1.4; }
.bus-agent { fill: var(--tint); stroke: var(--ink-soft); stroke-width: 1.6; }
.bus-name { fill: var(--ink); font: 700 13px var(--font); }
.bus-note { fill: var(--ink-soft); font: 12px var(--font); }
.bus-wire { stroke: var(--ink-soft); stroke-width: 1.6; fill: none; }
.bus-wire-label { fill: var(--ink-soft); font: 600 11px var(--mono); }

/* The section index has five groups now; a group's heading needs air above it
   to read as the start of the next group rather than the end of the last. */
.doc-nav ul + h2 { margin-top: 18px; }

/* The blog. */
.doc-post-meta { margin-top: 10px; font-size: .9rem; color: var(--ink-soft); }
.doc-posts { list-style: none; margin: 1.4em 0 0; padding: 0; }
.doc-posts > li { padding: 18px 0; border-top: 1px solid var(--line); }
.doc-posts > li:last-child { border-bottom: 1px solid var(--line); }
.doc-posts time { display: block; font-size: .85rem; color: var(--ink-soft); }
.doc-posts h2 { margin: 4px 0 6px; font-size: 1.15rem; }
.doc-posts p { margin: 0; color: var(--ink-soft); }

@media print {
  .doc-try { background: #fff; border-color: #000; }
  .bus-figure { break-inside: avoid; }
  .bus-bar { fill: #000; }
  .bus-bar-label { fill: #fff; }
}