/*
  Generated from spdd/prompt/GGQPA-XXX-202609211100-[Feat]-site-xataworks-user-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.14.

  It deliberately does not reuse ../developers/docs.css, although that sheet
  carries most of these rules. Two sections that share a stylesheet share a
  fate, and that file belongs to another Canvas — so a change made for an
  article about tool declarations would silently change an article about
  approving one, invisibly in this section's diff. See the Canvas's Approach §6
  for the threshold at which the common part gets extracted instead.

  Every colour below is a token from ../styles.css. 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 §5, checked by §7.4 and §7.16. */

/* The row layout is deliberately tight. Twelve entries in four groups is a lot
   of vertical space on a phone, and every pixel of it sits between the reader
   and the first sentence of the article they came for. The index is never
   hidden — a navigation aid that only exists on a desktop has not solved
   navigation — so the lever is size, not visibility. */
.doc-nav { margin-bottom: clamp(22px, 3vw, 34px); }
.doc-nav h2 {
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .5em;
  font-weight: 650;
}
.doc-nav h2 + ul { margin-bottom: 1em; }
.doc-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.doc-nav li { display: block; }
.doc-nav a,
.doc-nav span {
  display: block;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: .84rem;
  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: 1140px; }
  .doc-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 740px);
    gap: clamp(32px, 4vw, 64px);
    justify-content: center;
    width: 100%;
    max-width: 1140px;
    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;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
  }
  .doc-nav h2 { font-size: .78rem; margin-bottom: .85em; }
  .doc-nav h2 + ul { margin-bottom: 1.5em; }
  .doc-nav ul { display: block; }
  .doc-nav li + li { margin-top: 2px; }
  .doc-nav a,
  .doc-nav span {
    border: 0;
    border-radius: 0;
    padding: 6px 0 6px 12px;
    font-size: .89rem;
    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);
  }
}

/* ── The article header ───────────────────────────────────────────────── */

.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.14. */
.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;
}

/* ── The article body ─────────────────────────────────────────────────── */

.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; }

/* A control named as the application names it. Quiet, not loud: the reader is
   matching words against a screen, so the word has to be findable without
   shouting over the sentence around it. */
/* Deliberately NOT white-space: nowrap. Keeping a two-word label on one line
   looks tidier and costs a horizontal scrollbar the first time a long one
   appears — "Ask me before anything that needs approval" is 358px wide, which
   is wider than a phone. A label that wraps is readable; a page that scrolls
   sideways is a defect (Safeguards §7). */
.doc-body .ui {
  font-weight: 650;
  color: var(--ink);
}

.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; }

/* ── Tables ───────────────────────────────────────────────────────────────
   The three sources, the three classes and the precedence ladder are tables,
   and the shared sheet has none. A table scrolls inside its own box; the page
   never widens (Safeguards §7). */

.doc-table {
  margin-block: clamp(22px, 2.8vw, 32px);
  overflow-x: auto;
}
.doc-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: .94rem;
  min-width: 30rem;
}
.doc-table th,
.doc-table td {
  text-align: left;
  vertical-align: top;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}
.doc-table thead th {
  background: var(--tint);
  color: var(--ink);
  font-weight: 650;
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.doc-table tbody th {
  color: var(--ink);
  font-weight: 650;
  white-space: nowrap;
}

/* ── 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. */

.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);
}

/* --ink-soft, not --ink-faint: the faint token reaches only 3.29:1 on --paper
   and a caption is body text. Computed, not chosen — the Canvas's §7.15. */
.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; }

/* ── The diagrams ─────────────────────────────────────────────────────────
   Four of them, and each is about relationships between parts rather than
   facts about one part — which is what prose is worst at. Every box, label and
   arrow maps to a §6 register row (checked by §7.22), and none of them is
   drawn to resemble the application's interface: a drawing that did that would
   be a mockup.

   Inline SVG, never a file, so the shapes stay bound to the stylesheet's
   tokens, follow the theme, and add no request.

   The width cap is what decides whether a diagram is worth having: the
   rendered range stays roughly 280–560px, so labels are legible at both ends
   of it. */

.doc-diagram {
  max-width: 560px;
  margin-inline: auto;
  margin-block: clamp(28px, 3.4vw, 40px);
}
.doc-diagram svg { display: block; width: 100%; height: auto; }
.doc-diagram figcaption {
  margin-top: 14px;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Depth is carried by nesting and by a lighter fill at each level, never by
   hue: every box names itself in words, so the drawing survives being read
   without colour and needs no legend. */
.dgu-outer { fill: var(--tint); stroke: var(--line); stroke-width: 1.6; }
.dgu-box { fill: var(--paper); stroke: var(--line); stroke-width: 1.3; }
.dgu-inner { fill: var(--tint); stroke: var(--line); stroke-width: 1.3; }
.dgu-outside { fill: var(--paper); stroke: var(--ink-soft); stroke-width: 1.6; }

.dgu-shell { fill: var(--ink); font: 700 14px var(--font); letter-spacing: .8px; }
.dgu-actor { fill: var(--ink); font: 700 12.5px var(--font); letter-spacing: .6px; }
.dgu-holds { fill: var(--ink-soft); font: 400 12px var(--font); }
.dgu-tool { fill: var(--ink); font: 400 12px var(--mono); }
.dgu-msg { fill: var(--ink); font: 400 12px var(--font); }

.dgu-flow { stroke: var(--accent); stroke-width: 1.8; fill: none; }
.dgu-head { fill: var(--accent); }
.dgu-rule { stroke: var(--line); stroke-width: 1.2; }

/* ── 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; }

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

@media print {
  .doc-note { background: #fff; }
  .doc-nav, .doc-crumbs { display: none; }
  .doc-diagram { break-inside: avoid; }
  .doc-shot { break-inside: avoid; }
  .doc-table table { min-width: 0; }
  /* 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 (Canvas §7.18). */
  .doc-cast { display: none; }
}