/* Docs inside an app: sidebar + article, on the js_ui kit's tokens so the
   pages follow the app's theme (light and dark) without a design of their own. */
.docs-body { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2rem; align-items: start; }
.docs-body.docs-standalone { grid-template-columns: minmax(0, 1fr); }
.docs-nav { position: sticky; top: 4.5rem; max-height: calc(100vh - 5.5rem); overflow: auto; font-size: .9rem; }
.docs-search input { width: 100%; box-sizing: border-box; padding: .45rem .6rem; border-radius: 8px;
  border: 1px solid var(--border, #d7d7dc); background: var(--surface, transparent); color: inherit; font: inherit; }
.docs-sec { margin-top: .6rem; }
.docs-sec > summary { display: flex; align-items: center; gap: .4rem; padding: .3rem .55rem; border-radius: 7px;
  cursor: pointer; list-style: none; }
.docs-sec > summary::-webkit-details-marker { display: none; }
.docs-sec > summary::before { content: "\25B8"; color: var(--accent, #2f6fdf); font-size: .8rem; transition: transform .15s; }
.docs-sec[open] > summary::before { transform: rotate(90deg); }
.docs-sec > summary:hover { background: var(--surface-2, rgba(0,0,0,.05)); }
/* Section headers stand out from the pages under them (H2YO feedback EJ8KN):
   the theme's accent, bold, a little bigger than before. */
.docs-sec h4 { margin: 0; font-size: .88rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent, #2f6fdf); font-weight: 700; }
.docs-sec ul { list-style: none; margin: .2rem 0 0; padding: 0; }
.docs-sec a { display: block; padding: .3rem .55rem; border-radius: 7px; text-decoration: none; color: inherit; }
.docs-sec a:hover { background: var(--surface-2, rgba(0,0,0,.05)); }
.docs-sec a.is-active { background: var(--accent-soft, rgba(47,111,223,.12)); color: var(--accent, #2f6fdf); font-weight: 600; }
.docs-main { min-width: 0; }
.docs-article { max-width: 48rem; line-height: 1.6; }
.docs-crumb { margin: 0; font-size: .8rem; color: var(--muted, #777); }
.docs-article h1 { margin: .1rem 0 .4rem; }
.docs-lede { font-size: 1.05rem; color: var(--muted, #555); margin-top: 0; }
.docs-content h2 { margin-top: 1.8rem; }
.docs-content h3 { margin-top: 1.3rem; }
.docs-content code { font-size: .88em; background: var(--surface-2, rgba(0,0,0,.05)); border-radius: 5px; padding: .08rem .3rem; }
.docs-content pre { background: var(--surface-2, rgba(0,0,0,.05)); border-radius: 8px; padding: .8rem 1rem; overflow-x: auto; }
.docs-content pre code { background: none; padding: 0; }
.docs-content table { border-collapse: collapse; margin: 1rem 0; font-size: .92rem; }
.docs-content th, .docs-content td { border-bottom: 1px solid var(--border, #d7d7dc); padding: .4rem .7rem; text-align: left; vertical-align: top; }
.docs-callout { border-left: 4px solid var(--accent, #2f6fdf); background: var(--accent-soft, rgba(47,111,223,.08));
  border-radius: 8px; padding: .2rem 1rem; margin: 1rem 0; }
.docs-callout.tip { border-color: var(--ok, #1f8a3b); background: color-mix(in srgb, var(--ok, #1f8a3b) 10%, transparent); }
.docs-callout.warn { border-color: var(--warn, #b25e00); background: color-mix(in srgb, var(--warn, #b25e00) 10%, transparent); }
.docs-callout.limit { border-color: var(--danger, #c62828); background: color-mix(in srgb, var(--danger, #c62828) 8%, transparent); }
.docs-callout-title { font-weight: 600; margin: .6rem 0 .2rem; }
.docs-demo { margin: .4rem 0 1rem; }
.docs-pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1rem;
  border-top: 1px solid var(--border, #d7d7dc); font-size: .92rem; }
.docs-muted { color: var(--muted, #777); font-size: .88rem; }
.docs-results li { margin-bottom: 1rem; }
.docs-results p { margin: .2rem 0 0; font-size: .9rem; color: var(--muted, #555); }
.docs-navbox { position: sticky; top: 4.5rem; }
.docs-navbox > .docs-nav { position: static; }
.docs-navtoggle { display: none; }
@media (max-width: 820px) {
  .docs-body { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .docs-navbox { position: static; border: 1px solid var(--border, #d7d7dc); border-radius: 10px; }
  .docs-nav { max-height: none; padding: 0 .8rem .8rem; }
  .docs-navtoggle { display: flex; align-items: baseline; gap: .6rem; padding: .6rem .8rem; cursor: pointer;
    list-style: none; font-size: .95rem; }
  .docs-navtoggle::-webkit-details-marker { display: none; }
  .docs-navtoggle span { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #777); }
  .docs-navtoggle b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .docs-navtoggle::after { content: "\25BE"; color: var(--muted, #777); }
  .docs-navbox[open] > .docs-navtoggle::after { content: "\25B4"; }
}

/* In-app editing and comments (editing.py, docs-edit.js). Shown only to the
   roles the app allows; everything stacks under the article so it reads the
   same on a phone as on a desktop. */
.docs-edittools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .5rem 0 .2rem; }
.docs-editmeta { flex-basis: 100%; margin: .2rem 0 0; font-size: .85rem; color: var(--fg-muted, #666); }
.docs-flag { display: block; color: var(--warn, #b25e00); }
.docs-editor { display: grid; gap: .6rem; margin-top: .6rem; }
.docs-tabs { display: flex; gap: .3rem; }
.docs-tabs [aria-pressed="true"] { background: var(--accent-soft, rgba(47,111,223,.12)); color: var(--accent, #2f6fdf); }
.docs-source { width: 100%; box-sizing: border-box; min-height: 60vh; resize: vertical; padding: .7rem .8rem;
  font: .88rem/1.5 var(--font-mono, ui-monospace, monospace); tab-size: 2;
  border: 1px solid var(--border, #d7d7dc); border-radius: 8px; background: var(--surface, transparent); color: inherit; }
.docs-preview { border: 1px dashed var(--border-strong, #bbb); border-radius: 8px; padding: .4rem 1rem 1rem; min-width: 0; }
.docs-note, .docs-compose textarea, .docs-thread textarea, .docs-about select {
  width: 100%; box-sizing: border-box; padding: .5rem .6rem; border-radius: 8px; font: inherit; color: inherit;
  border: 1px solid var(--border, #d7d7dc); background: var(--surface, transparent); }
.docs-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.docs-status { margin: 0; font-size: .88rem; color: var(--fg-muted, #666); min-height: 1em; }
.docs-status.bad { color: var(--danger, #c62828); }
.docs-history { margin: 1rem 0; padding: .2rem 1rem 1rem; border: 1px solid var(--border, #d7d7dc); border-radius: 10px;
  background: var(--bg-subtle, transparent); }
.docs-history h2, .docs-comments h2 { font-size: 1.15rem; }
.docs-revs { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.docs-revs li { border-bottom: 1px solid var(--border, #d7d7dc); padding-bottom: .6rem; }
.docs-revhead { font-size: .92rem; overflow-wrap: anywhere; }
.docs-revs p { margin: .2rem 0; }
.docs-revsource { max-height: 22rem; overflow: auto; white-space: pre-wrap; font-size: .8rem;
  background: var(--surface-2, rgba(0,0,0,.05)); border-radius: 8px; padding: .6rem .8rem; }
.docs-pill { display: inline-block; margin-left: .4rem; padding: 0 .45rem; border-radius: 99px; font-size: .75rem;
  background: var(--surface-2, rgba(0,0,0,.06)); color: var(--fg-muted, #666); }
.docs-comments { margin-top: 2.5rem; padding-top: .5rem; border-top: 1px solid var(--border, #d7d7dc); }
.docs-compose { display: grid; gap: .5rem; margin-bottom: 1rem; }
.docs-about { display: grid; gap: .2rem; font-size: .85rem; color: var(--fg-muted, #666); }
.docs-quote { display: flex; gap: .5rem; align-items: start; }
.docs-quote blockquote, .docs-quoted { flex: 1; min-width: 0; margin: 0; padding: .3rem .7rem; font-size: .9rem;
  border-left: 3px solid var(--accent, #2f6fdf); background: var(--accent-soft, rgba(47,111,223,.08));
  border-radius: 0 6px 6px 0; overflow-wrap: anywhere; }
.docs-threads { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.docs-thread { display: grid; gap: .45rem; padding: .7rem .9rem; border: 1px solid var(--border, #d7d7dc); border-radius: 10px;
  background: var(--surface, transparent); min-width: 0; }
.docs-thread.is-resolved { opacity: .75; }
.docs-where { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; font-size: .85rem; overflow-wrap: anywhere; }
.docs-msghead { font-size: .85rem; color: var(--fg-muted, #666); overflow-wrap: anywhere; }
.docs-msghead b { color: var(--fg, inherit); }
.docs-msgbody { margin: .15rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.docs-replies { display: grid; gap: .5rem; margin-left: .8rem; padding-left: .8rem; border-left: 2px solid var(--border, #d7d7dc); }
.docs-resolved { margin-top: 1rem; }
.docs-resolved > summary { cursor: pointer; color: var(--fg-muted, #666); margin-bottom: .6rem; }
.docs-selpop { position: absolute; z-index: 50; box-shadow: var(--shadow, 0 2px 8px rgba(0,0,0,.2)); }
.docs-flash { animation: docs-flash 1.6s ease-out; }
@keyframes docs-flash { from { background: var(--accent-soft, rgba(47,111,223,.25)); } to { background: transparent; } }
/* The script hides parts with the hidden attribute; a display rule above
   would otherwise win over it. */
.docs-article [hidden], .docs-selpop[hidden] { display: none !important; }

/* Document review (review.py, docs-review.js): heading buttons, inline
   panels, thread states, suggested edits, diffs and the dashboards. Every
   wide thing (tables, diffs, Markdown in a suggestion) wraps or scrolls
   inside its own box so a phone never scrolls sideways. */
.docs-reviewbar { margin: .3rem 0; font-size: .85rem; color: var(--fg-muted, #666); }
.docs-changed-banner { margin: .5rem 0; padding: .5rem .8rem; border-radius: 8px; font-size: .9rem;
  border-left: 4px solid var(--warn, #b25e00); background: color-mix(in srgb, var(--warn, #b25e00) 10%, transparent);
  overflow-wrap: anywhere; }
.docs-content .docs-changed { box-shadow: inset 4px 0 0 var(--warn, #b25e00); padding-left: .6rem; }
.docs-pill-changed { background: color-mix(in srgb, var(--warn, #b25e00) 18%, transparent); color: var(--warn, #b25e00); }
.docs-panel { display: grid; gap: .6rem; margin: .4rem 0 1rem; padding: .7rem; border-radius: 10px;
  border: 1px solid var(--border, #d7d7dc); background: var(--bg-subtle, rgba(0,0,0,.02)); font-size: .95rem;
  line-height: 1.5; min-width: 0; }
.docs-panel textarea, .docs-replace, .docs-thread input.docs-note { width: 100%; box-sizing: border-box;
  padding: .5rem .6rem; border-radius: 8px; font: inherit; color: inherit;
  border: 1px solid var(--border, #d7d7dc); background: var(--surface, transparent); }
.docs-replace { font: .88rem/1.5 var(--font-mono, ui-monospace, monospace); }
.docs-ref { font-size: .8rem; }
.docs-state { display: inline-block; padding: 0 .5rem; border-radius: 99px; font-size: .75rem; font-weight: 600;
  background: var(--surface-2, rgba(0,0,0,.06)); color: var(--fg-muted, #666); }
.docs-state.s-open { background: var(--accent-soft, rgba(47,111,223,.12)); color: var(--accent, #2f6fdf); }
.docs-state.s-discussion { background: color-mix(in srgb, var(--warn, #b25e00) 14%, transparent); color: var(--warn, #b25e00); }
.docs-state.s-accepted, .docs-state.s-addressed { background: color-mix(in srgb, var(--ok, #1f8a3b) 14%, transparent);
  color: var(--ok, #1f8a3b); }
.docs-thread.state-addressed, .docs-thread.state-declined { opacity: .8; }
.docs-flag-inline { color: var(--warn, #b25e00); font-weight: 600; }
.docs-msg.is-event .docs-msgbody { font-style: italic; color: var(--fg-muted, #666); }
.docs-suggest, .docs-suggest-edit { display: grid; gap: .3rem; min-width: 0; }
.docs-suggest-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-muted, #666); }
.docs-suggest del, .docs-suggest ins, .docs-suggest-edit del { display: block; padding: .3rem .6rem; border-radius: 6px;
  white-space: pre-wrap; overflow-wrap: anywhere; font: .85rem/1.5 var(--font-mono, ui-monospace, monospace); }
.docs-suggest del, .docs-suggest-edit del { background: color-mix(in srgb, var(--danger, #c62828) 10%, transparent); }
.docs-suggest ins { text-decoration: none; background: color-mix(in srgb, var(--ok, #1f8a3b) 12%, transparent); }
.docs-selpop { display: flex; gap: .3rem; }
.docs-tablewrap { max-width: 100%; overflow-x: auto; }
.docs-revhistory { margin-top: 2rem; }
.docs-revhistory h2 { font-size: 1.15rem; }
.docs-revhistory table, .docs-rtable { border-collapse: collapse; font-size: .9rem; width: 100%; }
.docs-revhistory th, .docs-revhistory td, .docs-rtable th, .docs-rtable td { border-bottom: 1px solid var(--border, #d7d7dc);
  padding: .35rem .6rem; text-align: left; vertical-align: top; }
.docs-review { max-width: 56rem; line-height: 1.55; overflow-wrap: anywhere; }
.docs-rlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.docs-ritem { padding: .55rem .8rem; border: 1px solid var(--border, #d7d7dc); border-radius: 10px; display: grid; gap: .2rem; }
.docs-rexcerpt { font-size: .9rem; }
.docs-recordbox { margin: .8rem 0; padding: .5rem .8rem; border: 1px solid var(--border, #d7d7dc); border-radius: 10px; }
.docs-recordbox > summary { cursor: pointer; font-weight: 600; }
.docs-recordbox form { display: grid; gap: .5rem; margin-top: .5rem; }
.docs-checks { display: grid; gap: .25rem; font-size: .9rem; }
.docs-check { display: flex; gap: .4rem; align-items: baseline; }
.docs-activity { padding-left: 1.1rem; font-size: .9rem; }
.docs-diff { white-space: pre-wrap; overflow-wrap: anywhere; font: .82rem/1.5 var(--font-mono, ui-monospace, monospace);
  background: var(--surface-2, rgba(0,0,0,.04)); border-radius: 8px; padding: .6rem .8rem; }
.docs-diff span { display: block; }
.docs-diff .add { background: color-mix(in srgb, var(--ok, #1f8a3b) 14%, transparent); }
.docs-diff .del { background: color-mix(in srgb, var(--danger, #c62828) 12%, transparent); }
.docs-diff .hunk { color: var(--fg-muted, #666); margin-top: .6rem; }
.docs-panel [hidden], .docs-selpop[hidden], .docs-review [hidden] { display: none !important; }
/* Table cells wrap at word boundaries; a narrow table scrolls in its own box
   rather than splitting "Open" into "Op en". */
.docs-review td, .docs-review th, .docs-revhistory td, .docs-revhistory th { overflow-wrap: normal; word-break: normal; }
.docs-review th, .docs-revhistory th { white-space: nowrap; }

/* Per-section comment icons (docs-review.js): at the end of each section an
   "add" icon and one icon per thread in its author's color; a popup shows
   the thread. Quiet until there is something to see. */
.docs-introanchor { display: block; height: 0; }
.docs-srow { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; margin: .1rem 0 .7rem; min-height: 1.5rem; }
.docs-stitle { font-size: .7rem; color: var(--muted, #888); margin-right: .2rem; }
.docs-sadd, .docs-sdot { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem;
  padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; }
/* The add icon in the accent color on a tinted chip, always at full
   strength: at a third of the muted gray nobody saw it (feedback 9QNBA). */
.docs-sadd { color: var(--accent, #2f6fdf); background: var(--accent-soft, rgba(47,111,223,.12));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #2f6fdf) 35%, transparent); }
.docs-sadd:hover, .docs-sadd:focus-visible { background: color-mix(in srgb, var(--accent, #2f6fdf) 22%, transparent); }
.docs-sdot:hover, .docs-sdot:focus-visible { background: var(--surface-2, rgba(0,0,0,.06)); }
.docs-sdot.is-closed { opacity: .4; }
.docs-sother { font-size: .72rem; color: var(--muted, #888); margin-left: .2rem; }
.docs-tip { position: absolute; z-index: 60; width: min(26rem, calc(100vw - 16px)); max-height: min(70vh, 32rem); overflow: auto;
  padding: .6rem; border-radius: 10px; border: 1px solid var(--border, #d7d7dc); border-top: 4px solid var(--who, #888);
  background: var(--surface, #fff); color: inherit; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.docs-tip[hidden] { display: none !important; }
.docs-tip .docs-threads { margin: 0; }
.docs-panelhead { font-size: .8rem; color: var(--muted, #777); }

/* Inline surveys (survey.py, docs-survey.js): a question, its options, and
   who answered it last. One shared answer per question. */
.docs-survey { margin: 1rem 0; padding: .7rem .9rem; border: 1px solid var(--border, #d7d7dc); border-left: 4px solid var(--accent, #2f6fdf);
  border-radius: 10px; background: var(--surface, transparent); }
.docs-survey.is-answered { border-left-color: var(--ok, #1f8a3b); }
.docs-sdefault { font-size: .78rem; border: 1px solid var(--border, #d7d7dc); border-radius: 99px; padding: 0 .5rem; }
.docs-sprompt > :first-child { margin-top: 0; }
.docs-sprompt > :last-child { margin-bottom: .4rem; }
.docs-sopts { display: grid; gap: .3rem; }
.docs-sopt { display: flex; align-items: baseline; gap: .45rem; line-height: 1.4; cursor: pointer; }
.docs-sopt input[type=radio], .docs-sopt input[type=checkbox] { flex: none; transform: translateY(.1em); }
.docs-srec { font-style: normal; font-size: .72rem; color: var(--muted, #777); border: 1px solid var(--border, #d7d7dc);
  border-radius: 99px; padding: 0 .4rem; white-space: nowrap; }
.docs-sother { flex-wrap: wrap; }
.docs-sothertext { flex: 1 1 12rem; min-width: 0; font: inherit; padding: .2rem .45rem; border: 1px solid var(--border, #d7d7dc);
  border-radius: 6px; background: var(--surface, transparent); color: inherit; }
.docs-stext { width: 100%; box-sizing: border-box; font: inherit; padding: .45rem .55rem; border: 1px solid var(--border, #d7d7dc);
  border-radius: 8px; background: var(--surface, transparent); color: inherit; }
.docs-sactions { margin-top: .4rem; }
.docs-snote { margin-top: .5rem; font-size: .92rem; color: var(--muted, #555); }
.docs-snote > :first-child { margin-top: 0; } .docs-snote > :last-child { margin-bottom: 0; }
.docs-smeta { margin: .5rem 0 0; font-size: .78rem; color: var(--muted, #777); display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.docs-smeta.bad { color: var(--danger, #c62828); }
.docs-collab-more { margin: .25rem 0 .5rem; flex-basis: 100%; }
.docs-collab-more input[type=search] { margin: .35rem 0; width: 100%; max-width: 22rem; }
.docs-collab-more ul { list-style: none; margin: 0; padding: 0; max-height: 14rem; overflow: auto; }
.docs-collab-more li { margin: .15rem 0; }
.docs-collab-form .docs-collab-more label { display: flex; gap: .4rem; align-items: center; font-size: .85rem; color: inherit; }
.docs-collab-more summary { cursor: pointer; font-size: .85rem; }
.docs-slint { margin: 1rem 0 .5rem; padding: .5rem .75rem; border-left: 3px solid var(--warn, #b25e00); background: color-mix(in srgb, var(--warn, #b25e00) 10%, transparent); font-size: .88rem; }
.docs-slint p { margin: 0 0 .25rem; font-weight: 600; } .docs-slint ul { margin: 0; padding-left: 1.2rem; }
.docs-shistbtn { border: 0; background: none; padding: 0; font: inherit; color: var(--accent, #2f6fdf); cursor: pointer; text-decoration: underline; }
.docs-shisthead { font-size: .8rem; color: var(--muted, #777); margin-bottom: .4rem; }
.docs-shistlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: .9rem; }
.docs-shistlist del { color: var(--muted, #888); }
.docs-shistlist ins { text-decoration: none; font-weight: 600; }
.docs-sprev { color: var(--warn, #b25e00); }
.docs-srow { width: 100%; }               /* each section's row on its own line */
.docs-stitle { max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-srow:not(.has-threads) .docs-stitle { opacity: .55; }
.docs-delete { color: var(--danger, #c62828); }
.docs-actions .btn.danger { background: var(--danger, #c62828); color: #fff; border-color: transparent; }

/* Backlinks from a section to the open questions that link to it (docs-survey.js). */
.docs-sback { display: flex; flex-wrap: wrap; gap: .35rem; margin: .2rem 0 .1rem; }
.docs-schip { border: 1px solid var(--border, #d7d7dc); border-left: 3px solid var(--accent, #2f6fdf); border-radius: 99px;
  background: var(--surface, transparent); color: var(--muted, #666); font: inherit; font-size: .74rem; padding: .1rem .6rem;
  cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-schip.is-answered { border-left-color: var(--ok, #1f8a3b); }
.docs-schip:hover, .docs-schip:focus-visible { color: inherit; background: var(--surface-2, rgba(0,0,0,.05)); }
/* The innermost section's row at the end of its last line of text. */
.docs-srow.is-inline { display: inline-flex; width: auto; margin: 0 0 0 .3rem; min-height: 0; vertical-align: middle; flex-wrap: nowrap; }
.docs-srow.is-inline .docs-sadd, .docs-srow.is-inline .docs-sdot { width: 1.4rem; height: 1.4rem; }
/* The choices popup on an "Open question" chip. */
.docs-qpeekhead { font-size: .85rem; font-weight: 600; margin-bottom: .45rem; }
.docs-qpeeklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .88rem; }
.docs-qpeeklist li { padding: .2rem .4rem; border-radius: 6px; color: var(--muted, #666); }
.docs-qpeeklist li.is-rec { background: var(--accent-soft, rgba(47,111,223,.12)); color: inherit; }
.docs-qpeeklist li.is-picked { background: color-mix(in srgb, var(--ok, #1f8a3b) 14%, transparent); color: inherit; font-weight: 600; }
.docs-qpeeklist .docs-srec, .docs-qpeeklist .docs-spicked { margin-left: .4rem; }
.docs-spicked { font-style: normal; font-size: .72rem; color: var(--ok, #1f8a3b); border: 1px solid currentColor; border-radius: 99px; padding: 0 .4rem; }
.docs-qmark { color: var(--muted, #888); }
.docs-qpeekfoot { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; margin-top: .6rem; font-size: .8rem; }
/* An inline row never pushes past the line: a long section name is shortened. */
.docs-srow.is-inline { max-width: 100%; }
.docs-srow.is-inline .docs-stitle { max-width: min(12rem, 45vw); }
.docs-tip { box-sizing: border-box; }
/* A wide table scrolls inside itself on a narrow screen instead of widening the page. */
.docs-content table { display: block; max-width: 100%; overflow-x: auto; }

/* Images from a source's media/ folder (content.place_media); click opens full size. */
.docs-content img { max-width: 100%; height: auto; border-radius: 6px; }
.docs-figure { margin: 1rem 0; }
.docs-figure img { display: block; border: 1px solid var(--border, #d7d7dc); }
.docs-figure figcaption { margin-top: .35rem; font-size: .85rem; color: var(--muted, #666); }
.docs-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: .8rem; margin: 1rem 0; }
.docs-gallery .docs-figure { margin: 0; }
.docs-gallery > p { margin: 0; }
/* Inline code (a long file path has no break points) may wrap rather than widen
   the page; code blocks keep their lines and scroll inside their box. */
.docs-content :not(pre) > code { overflow-wrap: anywhere; }
/* Answering in the open-question popup. */
.docs-qopt { display: flex; align-items: baseline; gap: .4rem; cursor: pointer; flex-wrap: wrap; }
.docs-qopt input[type=radio], .docs-qopt input[type=checkbox] { flex: none; }
.docs-qother .docs-sothertext { flex: 1 1 10rem; }
.docs-qpeeklist.is-live li { color: inherit; }

/* Tutorial pages (front matter walkthrough: and panes:): the text beside the
   embedded screen it drives; stacked, screen first, on narrow windows. */
.docs-tutorial { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1.5rem; align-items: start; }
.docs-tutorial .docs-article { max-width: none; }
.docs-panes { position: sticky; top: calc(var(--nav-height, 3.5rem) + 1rem); display: flex; flex-direction: column; gap: 1rem; }
.docs-pane-frame { width: 100%; border-radius: 10px; overflow: hidden; background: #000;
  border: 1px solid var(--border, #d7d7dc); }
.docs-pane-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.docs-pane-lock { margin-bottom: .5rem; }
.docs-walkthrough { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: .4rem 0 1rem;
  padding: .6rem .8rem; border-radius: 10px; border: 1px solid var(--border, #d7d7dc); }
.docs-walkthrough:empty { display: none; }
.docs-walkthrough-lead { flex: 1; min-width: 12rem; }
.docs-walkthrough-note { width: 100%; color: var(--muted, #555); font-size: .9rem; }
.docs-walkthrough-note:empty { display: none; }
@media (max-width: 1100px) {
  .docs-tutorial { grid-template-columns: minmax(0, 1fr); }
  .docs-panes { position: static; order: -1; }
}
/* Collaborators (review bar "N collaborators (invite)"): who can read and comment on a page. */
.docs-collab { border: 1px solid var(--border, #d7d7dc); border-radius: 10px; padding: .6rem .8rem; margin: .2rem 0 1rem;
  font-size: .9rem; }
.docs-collab ul { margin: .2rem 0 .5rem; padding-left: 1.1rem; }
.docs-collab li { margin: .15rem 0; }
.docs-collab-form { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: end; }
.docs-collab-form label { display: grid; gap: .15rem; font-size: .8rem; color: var(--fg-muted, #666); }
.docs-collab-form input { font: inherit; padding: .3rem .45rem; border: 1px solid var(--border, #d7d7dc); border-radius: 7px;
  background: var(--surface, transparent); color: inherit; min-width: 12rem; }
.docs-collab-note { margin: .4rem 0 0; color: var(--fg-muted, #666); }

/* Collaborators (H2YO feedback 9DSE8): each person is a pull-down of their
   activity on the page, with two small marks before Remove: whether they have
   opened it (the latest revision or an older one) and how many comments. */
.docs-collab-person { list-style: none; margin: .15rem 0; }
.docs-collab-person > details > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.docs-collab-person > details > summary { list-style: none; }
.docs-collab-person > details > summary::-webkit-details-marker { display: none; }
.docs-collab-person > details > summary::before { content: "\25B8"; color: var(--fg-muted, #888); font-size: .75rem; width: .8rem; }
.docs-collab-person > details[open] > summary::before { content: "\25BE"; }
.docs-collab-signs { margin-left: auto; display: inline-flex; gap: .3rem; }
.docs-collab-sign { font-size: .72rem; line-height: 1.2; padding: 0 .35rem; border-radius: 99px;
  border: 1px solid var(--border, #ddd); color: var(--fg-muted, #777); white-space: nowrap; }
.docs-collab-sign.is-on { color: var(--ok, #1a7f5a); border-color: currentColor; }
.docs-collab-sign.is-old { color: var(--warn, #a86b00); border-color: currentColor; }
.docs-collab-sign.is-off { opacity: .75; }
.docs-collab-activity { margin: .25rem 0 .5rem 1.6rem; padding: 0; font-size: .85rem; list-style: disc; }
.docs-collab-activity li { margin: .1rem 0; }

/* The one-line "you can comment" banner above a page's title (docs-review.js),
   with the icons as they appear in the page. One row: a narrow screen cuts
   the end rather than wrapping. */
.docs-commenthint { display: block; margin: 0 0 .6rem; line-height: 1.6rem; padding: .35rem .7rem;
  border-radius: 8px; border-left: 4px solid var(--accent, #2f6fdf); background: var(--accent-soft, rgba(47,111,223,.12));
  font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docs-commenthint b { color: var(--accent, #2f6fdf); }
.docs-hinticon { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 1.5rem; height: 1.5rem; border-radius: 6px; }
.docs-hinticon.is-add { color: var(--accent, #2f6fdf); background: var(--surface, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #2f6fdf) 35%, transparent); }
.docs-hinticon.is-dot { color: #d1495b; }
@media (max-width: 480px) { .docs-commenthint { font-size: .84rem; padding: .3rem .55rem; } }
/* A major section's comment icons at its heading (docs-review.js), smaller
   than the heading's text and on its baseline. */
.docs-shead { display: inline-flex; align-items: center; gap: .15rem; margin-left: .4rem; vertical-align: middle;
  font-size: 1rem; font-weight: 400; }
.docs-shead .docs-sadd, .docs-shead .docs-sdot { width: 1.5rem; height: 1.5rem; }
/* The live count under a comment or reply box near its limit (docs-review.js). */
.docs-count { margin: .2rem 0 0; font-size: .8rem; color: var(--muted, #777); }
.docs-count.bad { color: var(--danger, #c62828); font-weight: 600; }

/* Status pipelines (:::pipeline and {{Stage}}): a hue from red (first stage)
   to green (last), mixed over the page's own background so it reads in light
   and dark themes alike. */
.docs-stage { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .85em; font-weight: 600;
  white-space: nowrap; border: 1px solid hsl(var(--stage-hue) 65% 42%);
  background: color-mix(in srgb, hsl(var(--stage-hue) 80% 45%) 32%, transparent); }
td.docs-stage-cell { background: color-mix(in srgb, hsl(var(--stage-hue) 80% 45%) 34%, transparent); }
td.docs-stage-cell .docs-stage { border-color: transparent; background: none; padding: 0; }
.docs-pipeline { list-style: none; padding: 0; margin: .6rem 0 1rem; display: flex; flex-wrap: wrap; gap: .35rem .9rem; }
.docs-pipeline li { display: flex; align-items: baseline; gap: .35rem; }
.docs-stage-what { font-size: .85em; opacity: .8; }

/* Inline diagrams (svg_inline.py): their boxes are links. Scaled to the
   column; the drawing keeps its own white background in either theme. */
.docs-figure-svg svg.docs-svg { display: block; max-width: 100%; height: auto; background: #fff; border-radius: 6px; }
.docs-figure-svg svg.docs-svg a:hover :is(path, polygon), .docs-figure-svg svg.docs-svg a:focus :is(path, polygon) { stroke-width: 2.5; }

/* The invite form's email suggestions (review_routes.py, people_directory). */
.docs-collab-email { position: relative; }
.docs-collab-suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin: 2px 0 0; padding: 4px 0;
  list-style: none; max-height: 260px; overflow: auto; background: var(--surface, #fff); color: inherit;
  border: 1px solid var(--border, #d7dbe3); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.docs-collab-suggest[hidden] { display: none; }
.docs-collab-suggest li { padding: 5px 10px; cursor: pointer; font-weight: normal; }
.docs-collab-suggest li span { opacity: .7; font-size: .9em; }
.docs-collab-suggest li:hover, .docs-collab-suggest li[aria-selected="true"] { background: var(--surface-2, #eef0f6); }