/*
  ADDITIVE ONLY. This sheet is loaded after ../styles.css and must never
  redefine a selector that sheet defines. An override here works until someone next
  changes styles.css, at which point these pages change appearance for reasons
  visible in neither diff. Checked by verify_site.py (the verify-site skill).

  It is a deliberate copy of ../users/docs.css, not a link to it: two sections
  that share a stylesheet share a fate, and a change made for a user-guide
  article would silently change a recipe, invisibly in this section's diff.
  This makes the third consumer of these rules (after the developer section
  and the user guide), which is the threshold the site-section skill (§5) sets
  for extracting the common part — that extraction is its own change.

  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, and one piece of markup: a "Contents"
   disclosure holding one disclosure per group, with only the reader's own
   group open. Below 1040px the outer disclosure is a closed bar that names
   where the reader is; at and above, its content is forced visible and it is
   a sticky column. It is never display:none — a closed disclosure is a
   control the reader can see, not navigation taken away from them.
   Canvas: Approach §5, checked by §7.4 and §7.16.

   The phone layout used to be a wrapping row of pills. Twenty-two of them is
   a scatter of buttons between the reader and the first sentence they came
   for, and it says nothing about where they are. A closed bar costs one line
   and answers that question before it is opened. */

.doc-nav {
  width: 100%;
  max-width: 740px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  margin-bottom: clamp(22px, 3vw, 34px);
}

/* The Contents bar. */
.doc-toc {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.doc-toc > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 44px 10px 14px;
  position: relative;
  color: var(--ink);
}
.doc-toc > summary::-webkit-details-marker { display: none; }
.doc-toc-icon { flex: none; width: 20px; height: 20px; }
.doc-toc-label { font-weight: 650; flex: none; }
/* The location wraps rather than truncates: an ellipsis would hide the
   very words the bar exists to show, and the page must not widen. */
.doc-toc-here {
  min-width: 0;
  font-size: .88rem;
  color: var(--ink-soft);
  padding-left: 10px;
  border-left: 1px solid var(--line);
}
.doc-toc > summary::after,
.doc-group > summary::after {
  content: "";
  position: absolute; right: 18px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.doc-toc[open] > summary::after,
.doc-group[open] > summary::after { transform: translateY(-20%) rotate(-135deg); }
.doc-toc[open] > summary { border-bottom: 1px solid var(--line); }

.doc-toc-groups { padding: 6px 6px 10px; }

/* A group: its name is the control that opens it. */
.doc-group > summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 40px 6px 8px;
  border-radius: 6px;
}
.doc-group > summary::-webkit-details-marker { display: none; }
.doc-group > summary:hover h2 { color: var(--ink); }
.doc-nav h2 {
  font-size: .74rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 650;
  line-height: 1.35;
  margin: 0;
}
.doc-group[open] > summary h2 { color: var(--ink-soft); }

.doc-nav ul {
  list-style: none;
  margin: 2px 0 8px;
  padding: 0;
}
.doc-nav li { display: block; }
.doc-nav li + li { margin-top: 2px; }
.doc-nav a,
.doc-nav li > span {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 12px 6px 14px;
  margin-left: 8px;
  border-left: 2px solid var(--line);
  font-size: .95rem;
  line-height: 1.3;
  text-decoration: none;
  color: var(--ink-soft);
}
.doc-nav a:hover { border-left-color: var(--accent); color: var(--accent); }
/* Weight, colour and the bar together: never colour alone. */
.doc-nav [aria-current="page"] {
  color: var(--ink);
  font-weight: 650;
  border-left-color: var(--accent);
  background: var(--tint);
}

@media (prefers-reduced-motion: reduce) {
  .doc-toc > summary::after,
  .doc-group > summary::after { transition: none; }
}

@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;
    padding-inline: 0;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
  }
  .doc-nav a,
  .doc-nav li > span {
    min-height: 0;
    padding: 6px 0 6px 12px;
    margin-left: 0;
    font-size: .89rem;
  }
  .doc-nav [aria-current="page"] { background: none; }
  .doc-group > summary { min-height: 0; padding: 8px 32px 8px 0; }
  .doc-group > summary::after { right: 10px; }
  .doc-toc-groups { padding: 0; }
}

/* Where the browser lets the closed disclosure's content be shown, the wide
   layout is a plain column: the Contents bar disappears and the groups sit
   beside the article as they always have. Elsewhere the bar stays at every
   width — one tap further away, never hidden. */
@supports selector(::details-content) {
  @media (min-width: 1040px) {
    .doc-toc { border: 0; border-radius: 0; background: none; }
    .doc-toc::details-content { content-visibility: visible; display: block; }
    .doc-toc > summary { display: none; }
  }
}

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

/* A phone's screens, side by side at about a phone's own width: at the column's
   full width a 390px page would read as a poster, not as something in a hand. */
.doc-shot.phones .pair {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 3vw, 28px);
}
.doc-shot.phones picture { flex: 0 1 260px; min-width: 0; }
.doc-shot.phones img { border-radius: 14px; }

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

/* ── What to type ─────────────────────────────────────────────────────────
   A recipe quotes the request it suggests. Set apart, so a reader can see
   where the words to type begin and end. */
.doc-body blockquote {
  margin-inline: 0;
  padding: 14px 18px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--tint);
}
.doc-body blockquote p { color: var(--ink); }


/* ── Tags, browsing and the filter ─────────────────────────────────────────
   A recipe is filed under apps and topics; each tag is a link to the page
   listing every recipe that carries it. */

.recipe-tags {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
  align-items: baseline;
  margin: 22px 0 0;
  font-size: .92rem;
}
.recipe-tags dt { color: var(--ink-faint); font-weight: 650; }
.recipe-tags dd { margin: 0; }
.recipe-tags ul,
.recipe-chips {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.recipe-tags a,
.recipe-chips a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}
.recipe-tags a:hover,
.recipe-chips a:hover { border-color: var(--accent); }
.recipe-chips a { min-height: 40px; padding: 6px 14px; }
.recipe-n { color: var(--ink-faint); font-size: .85em; }
.recipe-browse-head {
  font-size: .95rem;
  color: var(--ink-soft);
  margin: 26px 0 12px;
}

/* A browse page lists recipes under its h1, so their titles are h2s there; they
   look like the hub's h3s. */
.doc-index h2 { font-size: 1.1rem; letter-spacing: -.015em; margin-bottom: .35em; }

/* A recipe page has no side index, so its breadcrumb keeps to the article's
   measure at every width rather than spanning the two-column layout. */
@media (min-width: 1040px) {
  .recipe-solo .doc-crumbs { max-width: 740px; }
}

.doc-index .recipe-apps {
  margin-top: .35em;
  font-size: .86rem;
  color: var(--ink-faint);
}

.recipe-more { margin-top: clamp(40px, 6vw, 64px); }
.recipe-more h2 { font-size: 1.3rem; margin-bottom: .6em; }

/* The filter box exists only once the hub's script has run: without a script
   there is nothing to filter with, and the whole list is simply shown. */
.recipe-find { display: none; margin-bottom: 18px; }
.recipe-find.is-ready { display: block; }
.recipe-find label {
  display: block;
  font-weight: 650;
  margin-bottom: 8px;
}
.recipe-find input {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.recipe-find input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.recipe-count { margin: 10px 0 0; min-height: 1.5em; color: var(--ink-soft); font-size: .92rem; }
.recipe-list > li.is-filtered { display: none; }

@media print {
  .doc-note { background: #fff; }
  .doc-body blockquote { 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; }
}