/* =========================================================================
   inchorus documentation system — screen design
   -------------------------------------------------------------------------
   The design language is defined by the brand template
   (inchorus-dokusystem-vorlage.html): squared-off shapes, Century Gothic, the
   inchorus purple/mauve palette, hairline rules instead of boxes.

   Everything below is expressed in the token block that opens this file, so
   rebranding the system for daccord or G+H is a token swap — palette and (if
   the brand asks for it) the accent roles — with structure, spacing and type
   untouched.
   ========================================================================= */

:root {
	/* ---- inchorus brand palette (source: KB / Marketing & Kommunikation) ---- */
	--ink:         #3A3A3A;   /* inchorus dark grey    – body text            */
	--brand:       #520032;   /* inchorus dark purple  – primary              */
	--brand-2:     #74224D;   /* inchorus purple       – secondary/accent     */
	--mauve:       #D28EAE;   /* inchorus mauve        – discreet accent      */
	--mauve-light: #E7B8D3;   /* inchorus light mauve  – hover/tint           */
	--surface:     #FFFFFF;   /* white                 – page background      */
	--surface-2:   #F0F0F0;   /* inchorus light grey   – panels, code, tints  */

	/* ---- Derived, palette-true values ---- */
	--hairline:    #F0F0F0;   /* neutral rule (light grey)                    */
	--hairline-2:  #D28EAE;   /* accent rule (mauve)                          */
	--muted:       #8a8288;   /* secondary text on white                      */
	--muted-2:     #9a8f95;   /* tertiary text: meta, placeholder, empty      */

	/* ---- Type: Century Gothic (all three brands) ----
	   The live website's stack: Century Gothic where it is installed, else its
	   bundled webfont Muli (Mulish, loaded below), so the rendering no longer
	   depends on a local installation. */
	--font: "Century Gothic", CenturyGothic, "Muli", AppleGothic, sans-serif;
	--mono: "SFMono-Regular", "Consolas", "Liberation Mono", Menlo, monospace;

	/* ---- Type scale (documentation-grade reading sizes) ---- */
	--fs-body:  16px;
	--fs-small: 13.5px;
	--fs-h1:    34px;
	--fs-h2:    23px;
	--fs-h3:    18px;
	--fs-nav:   15px;
	--lh-body:  1.65;

	/* ---- Layout ---- */
	--sidebar-width: 300px;
	--content-max:   900px;  /* the reading column                           */
	--page-max:      1240px; /* the band page, tiles and site footer sit in  */
	--topbar-height: 66px;
	--crumbs-height: 50px;   /* the sticky breadcrumb row (28px tools + padding) */

	/* ---- Site footer ---- */
	--footer-background: #3A3A3A;  /* inchorus dark grey                     */
}

/* The live website's webfont, served from the gadget itself (inc/fonts, SIL Open
   Font License): the same files and family name as www.inchorus.de, so the
   documentation falls back to exactly the face the website does. */
@font-face {
	font-family: "Muli";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/mulish-v12-latin-regular.woff2") format("woff2");
}

@font-face {
	font-family: "Muli";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/mulish-v12-latin-700.woff2") format("woff2");
}

/* Drop the default body margin so the viewport-tall maximized gadget fits the
   window exactly without a residual page scrollbar. */
body {
	margin: 0;
}

/* Form controls take the surrounding type instead of the user agent's (13px,
   line-height normal). The webcomponents theme used to reset this globally; the
   split theme no longer does. Scoped to the gadget and kept at element weight
   (:where) so every docs rule that sizes a control still wins. */
:where(inchorus-gadget) :where(button, input, optgroup, select, textarea) {
	font: inherit;
}

inchorus-gadget[version="1.0.1"] {
	color: var(--ink);
	font-family: var(--font);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	width: inherit;
	height: auto;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

inchorus-gadget[version="1.0.1"][displaymode="default"]
{
	background-color: var(--surface);
	border: 1px solid var(--hairline);
	border-radius: 0;
	margin-bottom: 20px;
	overflow: hidden;
	padding: 10px 20px;
	width: 348px;
}

inchorus-gadget[version="1.0.1"][displaymode="maximized"]
{
	/* The maximized gadget IS the page and scrolls with it: the topbar and the
	   tree stay put (position:sticky, below), the viewer grows with its page and
	   the site footer comes last - seen only once the reader scrolls to the very
	   bottom. At least viewport-tall, so a short page does not float the footer
	   up into view. */
	min-height: 100vh;
	padding-bottom: 0;
	/* Span the full viewport width (override the framework's max-width:1000px and
	   the base rule's margin:0 auto centering) so the TOC sits flush against the
	   left edge. The reading column is capped on its own below, not the shell. */
	max-width: none;
	margin: 0;
}

/* A frame (displaymode=frame) is one page in an <iframe> on another site: no topbar,
   no navigation pane, no site footer. It scrolls the frame's window like the
   maximized gadget (the rules below name both), with nothing above the page. */
inchorus-gadget[version="1.0.1"][displaymode="frame"]
{
	--topbar-height: 0px;
	min-height: 100vh;
	padding-bottom: 0;
	max-width: none;
	margin: 0;
}

.docs-browser[frame]:not(.docs-toc-open) .docs-toc-reopen {
	display: none;
}

/* The header bar is a flex item of the column; pin it to its own height so the
   flexbox cannot squeeze it (its auto min-height would resolve to 0 and clip the
   controls). */
inchorus-gadget[version="1.0.1"][displaymode="maximized"] > div {
	flex-shrink: 0;
}

/* --- Page scrolling (maximized and frame) ---
   The embedded gadget keeps its fixed-height wrapper and scrolls inside its panes;
   the maximized one scrolls the page, so what must stay in view is made sticky. */
inchorus-gadget[displaymode="maximized"] .docs-topbar {
	position: sticky;
	top: 0;
	z-index: 40;
}

inchorus-gadget:is([displaymode="maximized"], [displaymode="frame"]) .docs-browser {
	flex: 0 0 auto;
	align-items: flex-start;
}

inchorus-gadget[displaymode="maximized"] .docs-toc {
	position: sticky;
	top: var(--topbar-height);
	height: calc(100vh - var(--topbar-height));
	box-sizing: border-box;
}

inchorus-gadget[displaymode="maximized"] .docs-toc-reopen {
	position: sticky;
	top: calc(var(--topbar-height) + 16px);
}

/* No scroll container of its own; its height is the page's, but never less than
   the window below the topbar (see the gadget's min-height above). */
inchorus-gadget:is([displaymode="maximized"], [displaymode="frame"]) .docs-viewer {
	overflow-y: visible;
	min-height: calc(100vh - var(--topbar-height));
}

/* Sticky offsets measure from the window now, so they clear the sticky topbar. */
inchorus-gadget:is([displaymode="maximized"], [displaymode="frame"]) .docs-section-index {
	top: calc(var(--topbar-height) + 30px);
}

inchorus-gadget[displaymode="maximized"] .docs-doc-content :is(h1, h2, h3, h4, h5, h6) {
	scroll-margin-top: calc(var(--topbar-height) + var(--crumbs-height) + 16px);
}

/* The component hides elements with the [hidden] attribute (the home button, the
   search panel, the empty-state line under the notes). Every one of them is also
   given a display by a class rule, which outranks the user agent's bare [hidden]
   rule — so the hidden state is spelled out once here, at a weight that wins. */
.docs-topbar [hidden],
.docs-browser [hidden] {
	display: none;
}

/* A visible focus ring everywhere (accessibility). */
.docs-topbar :focus-visible,
.docs-browser :focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

/* =========================================================================
   Topbar (rendered by the XSL shells above <docs-browser>)
   -------------------------------------------------------------------------
   Brand on the left, the search box centred in what is left, the language
   selector and the identity on the right.
   ========================================================================= */
.docs-topbar {
	height: var(--topbar-height);
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 0 26px;
	font-family: var(--font);
	background: var(--surface);
	border-bottom: 1px solid var(--hairline);
}

/* --- Brand: logo + caption, and the way home --- */
.docs-brand {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
}

.docs-brand:hover {
	text-decoration: none;
}

.docs-brand-logo {
	height: 30px;
	width: auto;
	display: block;
}

/* Reads as a second line of the mark, so it is set against a hairline rather
   than beside the logo. The component writes the site's name here, whatever
   the menu is scoped to (see syncNavigationHeader). Shown as written (no
   uppercasing), so a caption such as "Knowledge Hub" keeps its own case. */
.docs-brand-title {
	display: inline-flex;
	align-items: center;
	height: 30px;
	line-height: 1;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--brand-2);
	white-space: nowrap;
	padding-left: 14px;
	border-left: 1px solid var(--hairline);
}

/* --- Search --- */
.docs-topsearch {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	justify-content: center;
}

.docs-search-box {
	position: relative;
	width: 100%;
	max-width: 460px;
}

.docs-search-input {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 14px;
	font-family: var(--font);
	font-size: var(--fs-small);
	color: var(--ink);
	background: var(--surface-2);
	border: 1px solid var(--hairline);
	border-radius: 0;
}

.docs-search-input::placeholder {
	color: var(--muted-2);
}

.docs-search-input:focus {
	outline: none;
	border-color: var(--mauve);
}

/* The typeahead panel hangs below the box and over the page. It is anchored to
   the box rather than to the component, because the box lives in the XSL topbar. */
.docs-search-results {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 50;
	background: var(--surface);
	border: 1px solid var(--hairline);
	box-shadow: 0 10px 28px rgba(58, 58, 58, 0.14);
	max-height: 380px;
	overflow-y: auto;
}

.docs-search-results[hidden] {
	display: none;
}

.docs-search-status {
	padding: 14px 16px;
	font-size: var(--fs-small);
	font-style: italic;
	color: var(--muted-2);
}

.docs-search-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.docs-search-hit {
	padding: 10px 16px;
	cursor: pointer;
	border-bottom: 1px solid var(--hairline);
}

.docs-search-hit:last-child {
	border-bottom: 0;
}

/* Hover and keyboard selection are the same state: the reader moves through the
   list with either and must see one marked row, never two. */
.docs-search-hit:hover,
.docs-search-hit.active {
	background: var(--surface-2);
}

.docs-search-hit-title {
	font-weight: 700;
	font-size: 14px;
	color: var(--brand-2);
	display: flex;
	align-items: center;
	gap: 6px;
}

/* The matches in a hit's title and snippet. */
.docs-search-hit-title mark,
.docs-search-hit-snippet mark {
	background: var(--mauve-light);
	color: inherit;
	padding: 0 1px;
}

.docs-search-hit-path {
	font-size: 12px;
	color: var(--muted);
	margin-top: 2px;
}

.docs-search-hit-snippet {
	font-size: 12.5px;
	color: var(--ink);
	margin-top: 4px;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- Right-hand controls --- */
.docs-topbar-right {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 14px;
}

/* --- Selects (language in the topbar, version in a document header) ---
   The framework theme styles every <select> inside <inchorus-gadget> - full width, its
   own chevron, Verdana, grey text - at a specificity a bare class cannot beat, so the
   docs selects are declared against that same weight. Without it the language selector
   eats the whole topbar. The plain-class selectors keep the look outside the framework
   shell (a standalone page, a test harness). */
.docs-language-select,
.docs-version-select,
inchorus-gadget[version="1.0.1"] .docs-language-select,
inchorus-gadget[version="1.0.1"] .docs-version-select {
	flex: 0 0 auto;
	width: auto;
	height: auto;
	margin: 0;
	padding: 8px 12px;
	font-family: var(--font);
	font-size: var(--fs-small);
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--hairline);
	border-radius: 0;
	cursor: pointer;
	-webkit-appearance: menulist;
	-moz-appearance: menulist;
	appearance: menulist;
}

.docs-language-select:hover,
.docs-version-select:hover {
	border-color: var(--mauve);
}

/* The primary action of the topbar (Login): square, uppercase, letterspaced,
   brand-filled - and inverting into the light mauve on hover, as on the website. */
.docs-topbar-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font);
	font-size: var(--fs-small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	background: var(--brand);
	border: 0;
	border-radius: 0;
	padding: 11px 20px;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.docs-topbar-button .docs-chevron {
	font-size: 15px;
	line-height: 1;
}

.docs-topbar-button:hover {
	background: var(--mauve-light);
	color: var(--brand);
}

/* --- Signed-in identity ---
   The avatar disc, the user name and a dropdown holding the logout action. The
   component opens and closes it; .docs-user-open is the open state. */
.docs-user {
	position: relative;
	display: inline-flex;
}

.docs-user-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 4px 6px;
	font-family: var(--font);
	background: transparent;
	border: 0;
	cursor: pointer;
}

.docs-avatar {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--brand);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.docs-user-name {
	font-size: var(--fs-small);
	font-weight: 700;
	color: var(--ink);
	max-width: 180px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.docs-user-caret {
	font-size: 12px;
	color: var(--brand-2);
}

.docs-user-menu {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 180px;
	z-index: 60;
	background: var(--surface);
	border: 1px solid var(--hairline);
	box-shadow: 0 10px 28px rgba(58, 58, 58, 0.14);
}

.docs-user.docs-user-open .docs-user-menu {
	display: block;
}

.docs-user-menu-item {
	display: block;
	width: 100%;
	text-align: left;
	padding: 10px 16px;
	font-family: var(--font);
	font-size: var(--fs-small);
	color: var(--ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--hairline);
	cursor: pointer;
}

.docs-user-menu-item:last-child {
	border-bottom: 0;
}

.docs-user-menu-item:hover {
	background: var(--surface-2);
	color: var(--brand);
}

/* =========================================================================
   Shell: sidebar + viewer
   ========================================================================= */
.docs-browser {
	display: flex;
	align-items: stretch;
	/* Fill the remaining height of the column parent (the viewport-tall gadget
	   in maximized mode, or the fixed-height wrapper when embedded), sitting
	   below the topbar. min-height:0 lets this flex item shrink below its
	   content so the panes' own overflow-y scrolls instead of growing the page. */
	flex: 1 1 auto;
	min-height: 0;
	font-family: var(--font);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--ink);
	background: var(--surface);
	/* Anchor the overlay drawer + backdrop (position:absolute on narrow screens). */
	position: relative;
}

/* --- TOC drawer ---
   The TOC is a drawer, closed by the collapse button in its own top row and
   reopened by the handle beside the viewer. On wide screens it pushes: when closed
   the pane is removed from flow and the viewer reflows to full width. On narrow
   screens (the @media block below) it overlays the viewer instead. */
.docs-browser:not(.docs-toc-open) .docs-toc {
	display: none;
}

/* Dim backdrop behind the overlay drawer. Hidden on wide screens (push mode); the
   @media block below reveals it when the drawer is open on narrow screens. */
.docs-toc-backdrop {
	display: none;
}

.docs-toc {
	flex: 0 0 var(--sidebar-width);
	max-width: var(--sidebar-width);
	background: var(--surface);
	border-right: 1px solid var(--hairline);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	padding-bottom: 40px;
}

/* The slim row that opens the pane, holding the collapse control on the right
   and, while the menu is scoped to a navigation root, that topic's name on the
   left. The site's caption lives in the topbar's brand block, and the way out of
   a scoped menu is the breadcrumb's house. */
.docs-toc-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 14px 6px;
	flex-shrink: 0;
}

/* Set in capitals like the brand caption, so it reads as the menu's heading
   rather than one of its rows; a long name is cut off rather than pushing the
   collapse button out of the row. */
.docs-toc-title {
	min-width: 0;
	padding-left: 8px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brand-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.docs-toc-title[hidden] {
	display: none;
}

/* The collapse button keeps its place at the right through its own
   margin-left:auto (space-between alone would put a lone item at the left). */
.docs-toc-collapse-button {
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-family: inherit;
	font-size: 18px;
	line-height: 1;
	color: var(--brand-2);
	background: transparent;
	border: 0;
	cursor: pointer;
	margin-left: auto;
}

.docs-toc-collapse-button:hover {
	background: var(--surface-2);
	color: var(--brand);
}

/* The handle that brings the pane back: a tab against the viewer's left edge,
   its label set vertically, shown only while the pane is closed. On narrow
   screens it is also what opens the overlay drawer. */
.docs-toc-reopen {
	display: none;
	align-self: flex-start;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	padding: 10px 8px;
	font-family: var(--font);
	font-size: 16px;
	color: var(--brand-2);
	background: var(--surface);
	border: 1px solid var(--hairline);
	border-left: 0;
	cursor: pointer;
	writing-mode: vertical-rl;
}

.docs-browser:not(.docs-toc-open) .docs-toc-reopen {
	display: inline-flex;
}

.docs-toc-reopen:hover {
	background: var(--surface-2);
	color: var(--brand);
}

.docs-toc-reopen-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.docs-tree {
	padding: 4px 0 0;
	overflow-y: auto;
}

/* --- Navigation tree ---
   One row per entry: a 3px transparent left border that the active row turns into
   the brand marker, a neutral grey highlight, and indentation by level. */
.docs-topic-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.docs-topic-name,
.docs-resource {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--fs-nav);
	color: var(--ink);
	padding: 7px 20px 7px 22px;
	border-left: 3px solid transparent;
	transition: background-color .12s ease, color .12s ease;
}

.docs-topic-name:hover,
.docs-resource:hover {
	background: var(--surface-2);
}

/* Top-level topics read as the sections of the library. */
.docs-tree > .docs-topic-list > .docs-topic > .docs-topic-name {
	font-weight: 700;
	padding-left: 20px;
}

/* Every nested level steps in. */
.docs-topic-list .docs-topic-list .docs-topic-name {
	padding-left: 40px;
}

.docs-topic-list .docs-topic-list .docs-topic-list .docs-topic-name {
	padding-left: 58px;
}

.docs-resource-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* A document sits one step inside its topic: its title starts where that topic's
   subtopic names start (the parent's name + 20px), never level with the parent's own
   name, so it reads as the topic's child, not its sibling. The menu root's own
   documents start with the top-level topic names (20px padding + chevron slot + gap). */
.docs-tree > .docs-resource-list > .docs-resource {
	padding-left: 40px;
}

.docs-topic-list .docs-resource {
	padding-left: 60px;
}

.docs-topic-list .docs-topic-list .docs-resource {
	padding-left: 78px;
}

.docs-topic-list .docs-topic-list .docs-topic-list .docs-resource {
	padding-left: 96px;
}

.docs-resource {
	cursor: pointer;
}

/* The open document and the open topic are marked the same way: a neutral grey
   highlight (identical across all three brands) plus a narrow brand bar on the
   left for orientation (which recolours per brand). Only the open topic turns bold:
   bold marks topics, so an open document must not look like a top-level topic. */
.docs-resource.selected,
.docs-topic-name.selected-topic {
	color: var(--brand);
	background: var(--surface-2);
	border-left-color: var(--brand);
}

.docs-topic-name.selected-topic {
	font-weight: 700;
}

/* Expand/collapse chevron: a borderless › that rotates to point down when the
   topic is open. */
.docs-topic-toggle {
	flex: 0 0 12px;
	width: 12px;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: var(--fs-nav);
	line-height: 1;
	color: var(--brand-2);
	background: transparent;
	border: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform .15s ease;
}

/* A topic with nothing to expand (or a navigation root, which leads into its own menu)
   has no chevron, only its empty slot, so its name lines up with its siblings'. */
.docs-topic-toggle-spacer {
	flex: 0 0 12px;
	width: 12px;
}

.docs-topic:not(.docs-collapsed) > .docs-topic-name > .docs-topic-toggle {
	transform: rotate(90deg);
}

/* Collapsed: hide the topic's own resources and subtopics (they stay in the DOM). */
.docs-topic.docs-collapsed > .docs-resource-list,
.docs-topic.docs-collapsed > .docs-topic-list {
	display: none;
}

/* --- Topic name: clickable navigation to the topic landing page --- */
.docs-topic-name-text {
	flex: 1 1 auto;
	cursor: pointer;
}

.docs-topic-name-text:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.docs-section-pdf-button {
	flex: 0 0 auto;
	cursor: pointer;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 3px 8px;
	color: var(--brand);
	background: transparent;
	border: 1px solid var(--hairline-2);
	border-radius: 0;
}

.docs-section-pdf-button:hover {
	color: #fff;
	background: var(--brand);
	border-color: var(--brand);
}

.docs-state-badge {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 1px 6px;
	background: var(--surface-2);
	color: var(--muted);
}

.docs-resource.selected .docs-state-badge {
	background: var(--mauve-light);
	color: var(--brand);
}

.docs-state-FOR_REVIEW {
	background: var(--mauve-light);
	color: var(--brand);
}

.docs-state-NOT_FOR_REVIEW_YET {
	background: var(--surface-2);
	color: var(--muted);
}

.docs-empty {
	padding: 12px 24px;
	color: var(--muted-2);
	font-style: italic;
}

/* =========================================================================
   Viewer
   -------------------------------------------------------------------------
   The viewer is the scroll container. Inside it every page is laid out as
   .docs-page (a row) holding the reading column and — on a document — the
   sticky section index on the right.
   ========================================================================= */
.docs-viewer {
	flex: 1 1 auto;
	min-width: 0;
	overflow-y: auto;
	/* A column, so a page shorter than the scrollport can grow into the free space
	   instead of leaving white underneath it. */
	display: flex;
	flex-direction: column;
	/* The page carries its own padding (below). */
	padding: 0;
}

.docs-page {
	box-sizing: border-box;
	display: flex;
	/* Takes whatever height the page does not fill; see the viewer above. */
	flex: 1 0 auto;
	gap: 44px;
	/* The auto margins centre the band, but on a flex item they also cancel the
	   cross-axis stretch — without the explicit width the page would shrink to its
	   content and the reading column would never reach its measure. */
	width: 100%;
	max-width: var(--page-max);
	margin: 0 auto;
	padding: 30px 40px 56px;
}

.docs-column {
	flex: 1 1 auto;
	min-width: 0;
	max-width: var(--content-max);
}

/* The landing page has no section index and carries a tile grid, so it may use
   the full band; its prose and lists stay narrow on their own (--content-max).
   A landing document carrying the tile grid needs the same: two tiles (2 x 440px
   + gap) do not fit the 900px reading column, so they would stack. */
.docs-page-landing .docs-column,
.docs-column:has(> .docs-landing-section-wide) {
	max-width: none;
}

.docs-viewer-empty {
	color: var(--muted-2);
	font-style: italic;
	font-size: var(--fs-h3);
	padding: 60px 0;
	text-align: center;
}

.docs-viewer-error {
	color: var(--brand);
	padding: 24px 0;
}

/* --- Breadcrumb row ---
   The first thing on every page: where the reader is on the left, what they can do
   with the page (copy its link, take it as a PDF) on the right. It sticks to the top
   of the scrollport, so the way back stays in reach while the page scrolls under it;
   the opaque background and the vertical padding (offset by the negative top margin,
   so the resting layout is unchanged) keep the scrolled text from showing through. */
.docs-crumbs-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	position: sticky;
	top: 0;
	/* Above the page's content, below the narrow-screen drawer and its backdrop. */
	z-index: 5;
	background: var(--surface);
	padding: 10px 0;
	margin: -10px 0 10px;
}

/* The maximized gadget scrolls the window, so the row clears the sticky topbar. */
inchorus-gadget[displaymode="maximized"] .docs-crumbs-row {
	top: var(--topbar-height);
}

/* The start page has no trail; a row left with no tools either takes no space. */
.docs-crumbs-row:has(> .docs-crumb-tools:only-child:empty) {
	display: none;
}

.docs-breadcrumb {
	min-width: 0;
}

/* The page's own tools. They read as quiet labelled icons rather than buttons —
   the page is what matters, not its toolbar. Pinned right, with or without a trail. */
.docs-crumb-tools {
	flex: 0 0 auto;
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 16px;
}

.docs-breadcrumb-list {
	list-style: none;
	margin: 0;
	padding: 0;
	/* Wrap rather than overflow, so a deep trail in a narrowed viewer gains a line
	   instead of being clipped. Below 700px this flips to a one-line horizontal
	   scroll strip (see the @media block). */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 8px;
	font-size: var(--fs-small);
	color: var(--muted);
}

/* "›" between crumbs, drawn by CSS so the trail carries no separator elements. */
.docs-breadcrumb-item + .docs-breadcrumb-item::before {
	content: "\203A";
	margin-right: 8px;
	/* Match the crumbs, so the separator's line box does not make its item taller
	   than the (separator-less) first one and knock the baselines apart. */
	line-height: 1.4;
	color: var(--mauve);
}

.docs-breadcrumb-item {
	display: flex;
	align-items: center;
	min-width: 0;
}

/* The root crumb is the house icon the template opens every trail with; it carries
   no text, so it must not be capped or ellipsised like a named crumb. It takes the
   crumbs' colour, like the named crumbs after it. */
.docs-crumb-home {
	max-width: none;
	display: inline-flex;
	align-items: center;
}

.docs-crumb-home svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* Ancestor crumbs navigate (buttons, not links — routing owns the URL); the trailing
   crumb is the current position and inert. */
.docs-crumb {
	max-width: 260px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: inherit;
	font-size: inherit;
	line-height: 1.4;
	padding: 0;
	color: var(--brand-2);
	background: transparent;
	border: 0;
	cursor: pointer;
}

.docs-crumb:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.docs-crumb-current {
	color: var(--muted);
	cursor: default;
}

.docs-crumb-current:hover {
	text-decoration: none;
}

/* --- Page head --- */
.docs-doc-header {
	/* Title + actions share the top row. The title (order 1) takes the space the
	   actions (order 2) leave and wraps inside it, so a long title is shown in full
	   and never runs under the version select. Whether the actions stand beside the
	   title or below it depends on the column's width alone, never on the title's
	   length: see the title's flex basis below. The actions are appended to the
	   header after it renders; order positions them regardless of DOM order. The
	   hairline closes the head off against the body. */
	display: flex;
	flex-wrap: wrap;
	/* Baselines, not centres: a title wrapped onto several lines keeps the actions
	   level with its first line instead of floating them to the middle of the block. */
	align-items: baseline;
	gap: 12px 20px;
	padding-bottom: 18px;
	margin-bottom: 26px;
	border-bottom: 1px solid var(--hairline);
}

.docs-doc-header h1 {
	order: 1;
	/* A zero basis keeps the title's length out of the line break: the actions only
	   drop to a line of their own when the column cannot hold them beside the title's
	   minimum width - a matter of the viewport, the same for every page. The title then
	   wraps in whatever width the actions leave; overflow-wrap breaks a single
	   overlong word (a path, an identifier) rather than letting it run out. min() keeps a header
	   narrower than that minimum (a small embedded box) from pushing the title past
	   its right edge. */
	flex: 1 1 0;
	min-width: min(240px, 100%);
	overflow-wrap: anywhere;
	margin: 0;
	font-size: var(--fs-h1);
	line-height: 1.15;
	font-weight: 400;
	color: var(--brand);
}

.docs-doc-actions {
	order: 2;
	flex: 0 0 auto;
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.docs-pdf-button,
.docs-copy-link-button {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 0;
	cursor: pointer;
	font-family: var(--font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brand);
	background: transparent;
	border: 0;
	border-radius: 0;
}

.docs-pdf-button svg,
.docs-copy-link-button svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

.docs-pdf-button:hover,
.docs-copy-link-button:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* PDFs are generated on the server, so the button waits for the download. */
.docs-pdf-button[disabled],
.docs-section-pdf-button[disabled] {
	cursor: progress;
	opacity: 0.6;
}

.docs-version-selector {
	display: inline-flex;
	/* Caption and select share a baseline, which the head aligns with the title's. */
	align-items: baseline;
	gap: 6px;
	font-size: var(--fs-small);
	color: var(--brand-2);
}

.docs-version-label {
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 12px;
}

/* --- Document body --- */
.docs-doc-content {
	max-width: var(--content-max);
}

.docs-doc-content h1 { font-size: 28px; font-weight: 400; color: var(--brand); margin: 40px 0 12px; }
.docs-doc-content h2 { font-size: var(--fs-h2); font-weight: 700; color: var(--brand-2); margin: 40px 0 12px; }
.docs-doc-content h3 { font-size: var(--fs-h3); font-weight: 700; color: var(--ink); margin: 26px 0 8px; }
.docs-doc-content h4,
.docs-doc-content h5,
.docs-doc-content h6 { font-size: var(--fs-body); font-weight: 700; color: var(--ink); margin: 20px 0 6px; }

/* Headings are linkable: a hover-revealed "#" permalink sits to their right, and
   scroll-margin leaves a scrolled-to heading breathing room below the sticky
   breadcrumb row instead of hiding it underneath. */
.docs-doc-content :is(h1, h2, h3, h4, h5, h6) {
	scroll-margin-top: calc(var(--crumbs-height) + 16px);
}

.docs-heading-anchor {
	margin-left: 8px;
	color: var(--mauve);
	text-decoration: none;
	font-weight: 400;
	opacity: 0;
	transition: opacity 0.1s ease-in-out;
}

.docs-doc-content :is(h1, h2, h3, h4, h5, h6):hover .docs-heading-anchor,
.docs-heading-anchor:focus {
	opacity: 1;
}

.docs-heading-anchor:hover {
	color: var(--brand);
}

.docs-doc-content p { margin: 0 0 16px; }

/* The framework theme strips list markers (its menus are lists); a document's lists
   are prose and need theirs back. It sets them on the items too (`ul > li`), which
   outranks inheritance from the list — so both have to be named here. */
.docs-doc-content ul,
.docs-doc-content ul > li {
	list-style: disc outside;
}

.docs-doc-content ol,
.docs-doc-content ol > li {
	list-style: decimal outside;
}

.docs-doc-content ul,
.docs-doc-content ol {
	margin: 0 0 16px;
	padding-left: 22px;
}

.docs-doc-content li {
	margin: 6px 0;
}

.docs-doc-content li::marker {
	color: var(--mauve);
}

/* Nested lists: no extra gap before the sublist */
.docs-doc-content li > ul,
.docs-doc-content li > ol {
	margin-bottom: 0;
}

.docs-doc-content a {
	color: var(--brand);
	text-decoration: none;
}

.docs-doc-content a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Cross-reference to another document. The server removes the href and stamps
   data-doc-ref; the viewer navigates on click (handleContentLinkClick), so it
   needs an explicit pointer cursor. The small leading mark distinguishes an
   in-app document link from an ordinary external link. */
.docs-doc-content a.docs-ref {
	cursor: pointer;
	text-decoration: none;
	border-bottom: 1px solid var(--mauve);
}

.docs-doc-content a.docs-ref::before {
	content: "\00A7\00A0"; /* § + non-breaking space */
	opacity: 0.6;
}

.docs-doc-content a.docs-ref:hover {
	color: var(--brand-2);
	border-bottom-color: var(--brand-2);
}

/* A cross-reference whose target is missing or not readable by the caller:
   non-navigable, visually muted, with the reason in the title (shown as a toast
   on click). */
.docs-doc-content .docs-ref-broken {
	color: var(--muted-2);
	text-decoration: line-through;
	cursor: help;
}

.docs-doc-content code {
	font-family: var(--mono);
	font-size: 0.9em;
	background: var(--surface-2);
	border-radius: 0;
	padding: 1px 5px;
}

.docs-doc-content pre {
	background: var(--surface-2);
	border: 0;
	border-left: 3px solid var(--brand);
	border-radius: 0;
	padding: 16px 18px;
	overflow-x: auto;
	margin: 0 0 20px;
}

.docs-doc-content pre code {
	background: transparent;
	padding: 0;
	font-size: 13.5px;
	line-height: 1.6;
}

/* Mermaid diagrams: <pre><code class="language-mermaid"> is replaced at runtime
   by <div class="mermaid"> holding the rendered SVG (see inchorus.docs.js). */
.docs-doc-content .mermaid {
	margin: 0 0 20px;
	text-align: center;
	overflow-x: auto;
}

.docs-doc-content .mermaid svg {
	max-width: 100%;
	height: auto;
}

/* --- OpenAPI specs ---
   <div class="docs-openapi"> holds the server's static reference (also what the PDF
   prints), styled here in the viewer's own idiom. inchorus.docs.js replaces it with
   Swagger UI inside a shadow root, so neither stylesheet reaches the other; Swagger
   UI's brand theme is inchorus.docs.openapi.css, loaded into that shadow root. */
.docs-doc-content .docs-openapi {
	margin: 0 0 28px;
}

.docs-doc-content .docs-openapi-info .docs-openapi-version,
.docs-doc-content .docs-openapi-method {
	display: inline-block;
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--surface);
	background: var(--muted);
	padding: 2px 8px;
	vertical-align: middle;
}

.docs-doc-content .docs-openapi-info .docs-openapi-version {
	background: var(--brand-2);
}

.docs-doc-content .docs-openapi-method-get     { background: #3b6ea8; }
.docs-doc-content .docs-openapi-method-post    { background: #3d8b5a; }
.docs-doc-content .docs-openapi-method-put     { background: #b87a1f; }
.docs-doc-content .docs-openapi-method-patch   { background: #2f8f86; }
.docs-doc-content .docs-openapi-method-delete  { background: #b23a3a; }

.docs-doc-content .docs-openapi-operation code {
	background: transparent;
	padding: 0;
	font-size: 0.95em;
}

.docs-doc-content .docs-openapi-deprecated code {
	text-decoration: line-through;
	color: var(--muted);
}

.docs-doc-content .docs-openapi-operation-id,
.docs-doc-content .docs-openapi-example-caption {
	color: var(--muted);
	font-size: var(--fs-small);
	margin-bottom: 6px;
}

.docs-doc-content .docs-openapi-error {
	margin: 0 0 20px;
	padding: 14px 18px;
	background: var(--surface-2);
	border-left: 4px solid #b23a3a;
}

.docs-doc-content .docs-openapi-error p {
	margin: 0;
}

/* Blockquotes are the documentation's note/warning device — the template's
   callout: a tinted panel behind an accent rule. */
.docs-doc-content blockquote {
	margin: 0 0 20px;
	padding: 14px 18px;
	background: var(--surface-2);
	border-left: 4px solid var(--brand-2);
	color: var(--ink);
}

.docs-doc-content blockquote p:last-child {
	margin-bottom: 0;
}

.docs-doc-content hr {
	border: none;
	border-top: 1px solid var(--hairline);
	margin: 28px 0;
}

.docs-doc-content img {
	max-width: 100%;
	height: auto;
}

.docs-doc-content del {
	color: var(--muted-2);
}

/* An embedded gadget is a block of its own: the page it loads often floats its
   controls (inchorus-button), which must not let the prose after it wrap beside them.
   It sits in the prose like any other block - the webcomponents theme's gadget
   frame (Verdana, grey text, a fixed-width card; unscoped since the split theme)
   is taken off, so the gadget takes the document's type and column. */
.docs-doc-content inchorus-gadget {
	display: flow-root;
	color: inherit;
	font: inherit;
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
	width: auto;
	overflow: visible;
}

/* GFM tables: rows separated by hairlines rather than boxed in, head in the
   accent colour over a mauve rule. */
.docs-doc-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 22px;
	font-size: 14.5px;
}

.docs-doc-content th,
.docs-doc-content td {
	border: 0;
	border-bottom: 1px solid var(--hairline);
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
}

.docs-doc-content thead th {
	color: var(--brand-2);
	font-weight: 700;
	border-bottom: 2px solid var(--mauve);
}

.docs-doc-content td code {
	font-size: 13px;
}

/* --- Page footer --- */
.docs-doc-foot {
	margin-top: 48px;
	padding-top: 18px;
	border-top: 1px solid var(--hairline);
	font-size: var(--fs-small);
	color: var(--muted-2);
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

/* --- Section index ("On this page") ---
   Sticky beside the reading column; hidden on narrow screens (@media below). The
   client caps its height to the visible viewer (fitSectionIndex), so a long index
   scrolls its list on its own instead of running below the fold until the page
   footer pushes it up. */
.docs-section-index {
	flex: 0 0 210px;
	align-self: flex-start;
	position: sticky;
	top: 30px;
	font-size: var(--fs-small);
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

.docs-section-index-head {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brand-2);
	margin-bottom: 10px;
}

.docs-section-index ul {
	list-style: none;
	margin: 0;
	padding: 0;
	/* The caption stays; only the entries scroll, and scrolling past their end does
	   not carry on into the page. */
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.docs-section-index li {
	margin: 0;
}

.docs-section-index a {
	display: block;
	padding: 5px 0 5px 12px;
	color: var(--ink);
	text-decoration: none;
	border-left: 2px solid var(--hairline);
}

/* A sub-section (h3) sits one step inside its section. */
.docs-section-index a.docs-section-index-sub {
	padding-left: 24px;
}

.docs-section-index a:hover {
	color: var(--brand);
	border-left-color: var(--mauve);
	text-decoration: none;
}

.docs-section-index a.active {
	color: var(--brand);
	border-left-color: var(--brand);
	font-weight: 700;
}

/* =========================================================================
   Topic landing view
   ========================================================================= */
.docs-topic-landing-description {
	margin: 0 0 24px;
	max-width: var(--content-max);
	color: var(--ink);
	white-space: pre-wrap;
}

.docs-landing-section {
	max-width: var(--content-max);
	margin: 0 0 32px;
}

/* The tile grid is the exception: it is the page's entry surface rather than prose, so
   it uses the landing page's full width — and its rubric spans with it. */
.docs-landing-section-wide {
	max-width: none;
}

/* On a landing document the section follows the prose it belongs to, so it needs the
   distance a new part of the page asks for — the rubric alone reads as a subheading. */
.docs-doc-content + .docs-landing-section {
	margin-top: 56px;
}

/* Section caption as the brand's rubric rule: an uppercase caption between two
   mauve hairlines. */
.docs-rubric {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 8px 0 22px;
	font-size: var(--fs-small);
	font-weight: 700;
}

.docs-rubric::before,
.docs-rubric::after {
	content: "";
	height: 1px;
	background: var(--hairline-2);
	flex: 1;
}

.docs-rubric span {
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brand-2);
	white-space: nowrap;
}

.docs-landing-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: var(--content-max);
}

.docs-landing-resource,
.docs-landing-subtopic {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-bottom: 1px solid var(--hairline);
	cursor: pointer;
	color: var(--ink);
}

.docs-landing-resource:hover,
.docs-landing-subtopic:hover {
	background: var(--surface-2);
	color: var(--brand);
}

.docs-landing-subtopic::before {
	content: "\203A";
	color: var(--mauve);
}

/* --- Subtopic tiles (Topic.subtopicLayout = TILES) ---
   The website's "image left / text right" block: a palette-true gradient panel
   carrying the short caption, and the full name, description and call to action
   beside it. auto-fit + minmax gives two columns where there is room and one
   where there is not, without a media query. */
.docs-landing-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
	gap: 22px;
}

.docs-landing-tile {
	display: grid;
	grid-template-columns: 260px 1fr;
	align-items: stretch;
	background: var(--surface);
	border: 1px solid var(--hairline);
	border-radius: 0;
	overflow: hidden;
	cursor: pointer;
}

.docs-landing-tile-media {
	min-height: 156px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px;
	text-align: center;
}

/* The three palette-true tile variants, rotating by position. */
.docs-tile-grey .docs-landing-tile-media {
	background: radial-gradient(circle at 50% 42%, #ffffff 0%, #F0F0F0 72%, #e3e3e3 100%);
	color: var(--brand);
}

.docs-tile-purple .docs-landing-tile-media {
	background: radial-gradient(circle at 50% 42%, #74224D 0%, #520032 72%, #3d0025 100%);
	color: #fff;
}

.docs-tile-pink .docs-landing-tile-media {
	background: radial-gradient(circle at 50% 42%, #E7B8D3 0%, #D28EAE 100%);
	color: var(--brand);
}

.docs-landing-tile-media-title {
	font-weight: 700;
	font-size: var(--fs-h3);
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: currentColor;
}

.docs-landing-tile-tick {
	width: 22px;
	height: 2px;
	background: currentColor;
	opacity: .55;
}

.docs-landing-tile-body {
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.docs-landing-tile-name {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brand);
	margin: 0;
}

.docs-landing-tile-description {
	font-size: var(--fs-small);
	color: var(--ink);
	margin: 0;
	flex: 1 1 auto;
	/* Clamp to three lines so long descriptions cannot make the grid rows ragged. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.docs-landing-tile-action {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
	background: var(--brand);
	padding: 9px 16px;
	transition: background-color .15s ease, color .15s ease;
}

.docs-landing-tile:hover .docs-landing-tile-action,
.docs-landing-tile:focus .docs-landing-tile-action {
	background: var(--mauve-light);
	color: var(--brand);
}

.docs-landing-tile:focus {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

/* =========================================================================
   Feedback on a document
   -------------------------------------------------------------------------
   The internal comment thread below a document: notes for whoever writes its
   next version. Only a signed-in reader sees it — the server answers an
   anonymous caller with nothing to render.
   ========================================================================= */
.docs-feedback {
	max-width: var(--content-max);
	margin-top: 44px;
	padding: 22px 24px;
	background: var(--surface-2);
	border-left: 4px solid var(--brand-2);
}

.docs-feedback-head {
	margin-bottom: 16px;
}

.docs-feedback-title {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: var(--brand-2);
}

.docs-feedback-hint {
	display: block;
	margin-top: 2px;
	font-size: var(--fs-small);
	color: var(--muted);
}

.docs-feedback-list {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

.docs-feedback-item {
	display: flex;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--hairline);
}

.docs-feedback-item:first-child {
	padding-top: 0;
}

.docs-feedback-item:last-child {
	border-bottom: 0;
}

.docs-feedback-avatar {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--brand);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.docs-feedback-body {
	flex: 1 1 auto;
	min-width: 0;
}

.docs-feedback-meta {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 2px;
}

.docs-feedback-author {
	font-size: var(--fs-small);
	font-weight: 700;
	color: var(--ink);
}

.docs-feedback-date {
	font-size: 12px;
	color: var(--muted);
}

.docs-feedback-text {
	margin: 0;
	font-size: var(--fs-small);
	color: var(--ink);
	white-space: pre-wrap;
}

.docs-feedback-input {
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 12px;
	padding: 10px 12px;
	font-family: var(--font);
	font-size: var(--fs-small);
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--hairline);
	border-radius: 0;
	resize: vertical;
}

.docs-feedback-input:focus {
	outline: none;
	border-color: var(--mauve);
}

/* Saving is a round trip; the button says so and refuses a second click. */
.docs-feedback-submit[disabled] {
	cursor: progress;
	opacity: 0.6;
}

/* =========================================================================
   Site footer
   -------------------------------------------------------------------------
   Rendered by the XSL from <docs><footer> as a sibling below <docs-browser>,
   so it closes the whole page — full width under the tree and the viewer.
   ========================================================================= */
.docs-site-footer {
	flex: 0 0 auto;
	background: var(--footer-background);
	color: #fff;
}

.docs-site-footer-inner {
	max-width: var(--page-max);
	margin: 0 auto;
	padding: 40px 40px 46px;
	display: flex;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}

.docs-site-footer-heading {
	margin-bottom: 8px;
	font-size: var(--fs-small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.docs-site-footer a,
inchorus-gadget[version="1.0.1"] .docs-site-footer a {
	color: #fff;
	text-decoration: none;
}

.docs-site-footer-contact a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.docs-site-footer-links {
	display: flex;
	align-items: flex-start;
	gap: 28px;
	flex-wrap: wrap;
}

.docs-site-footer-links a {
	font-size: var(--fs-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.docs-site-footer-links a:hover,
inchorus-gadget[version="1.0.1"] .docs-site-footer-links a:hover {
	color: var(--mauve-light);
	text-decoration: none;
}

/* =========================================================================
   Toast
   ========================================================================= */
/* Transient "Link copied" confirmation; floats over the viewport. */
.docs-toast {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 1000;
	padding: 11px 20px;
	background: var(--brand);
	color: #fff;
	font-size: var(--fs-small);
	border-radius: 0;
	box-shadow: 0 8px 24px rgba(82, 0, 50, 0.24);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
	pointer-events: none;
}

.docs-toast-visible {
	opacity: 1;
	transform: translateY(0);
}

/* =========================================================================
   Responsive
   ========================================================================= */
/* The section index is the first thing to go: below this width the reading
   column needs the room more than the index helps. The brand caption goes with
   it, so the search box keeps its width. */
@media (max-width: 1000px) {
	.docs-section-index {
		display: none;
	}

	.docs-brand-title {
		display: none;
	}
}

/* Below this the topbar cannot hold a search box as well; searching moves out of
   reach rather than squeezing the identity off the bar. */
@media (max-width: 760px) {
	.docs-topsearch {
		display: none;
	}

	.docs-page {
		padding: 22px 18px 44px;
	}

	.docs-landing-tiles {
		grid-template-columns: 1fr;
	}

	.docs-site-footer-inner {
		flex-direction: column;
		gap: 24px;
		padding: 30px 18px 34px;
	}
}

/* Narrow screens: the drawer overlays the viewer (rather than pushing it). The
   pane is always rendered and slid off-canvas; .docs-toc-open slides it in over a
   dim backdrop. The viewer keeps the full width underneath. */
@media (max-width: 700px) {
	/* Clip the off-canvas (translateX(-100%)) drawer so it never adds horizontal
	   scroll; the panes keep their own vertical overflow. */
	.docs-browser {
		overflow: hidden;
	}
	/* Override the wide push rule so the closed drawer can slide rather than vanish. */
	.docs-browser:not(.docs-toc-open) .docs-toc {
		display: flex;
	}
	.docs-toc {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		max-width: 80%;
		z-index: 20;
		box-shadow: 0 8px 24px rgba(82, 0, 50, 0.12);
		transform: translateX(-100%);
		transition: transform 0.2s ease;
	}
	.docs-browser.docs-toc-open .docs-toc {
		transform: translateX(0);
	}
	/* A page-tall browser would make an absolute drawer page-tall too: pin the
	   drawer and its backdrop to the window below the topbar instead. clip rather
	   than hidden, so the browser does not become a scroll container and the
	   sticky reopen handle keeps sticking. */
	inchorus-gadget[displaymode="maximized"] .docs-browser {
		overflow: visible;
		overflow-x: clip;
	}
	inchorus-gadget[displaymode="maximized"] .docs-toc,
	inchorus-gadget[displaymode="maximized"] .docs-browser.docs-toc-open .docs-toc-backdrop {
		position: fixed;
		top: var(--topbar-height);
		bottom: 0;
		height: auto;
	}
	.docs-browser.docs-toc-open .docs-toc-backdrop {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 10;
		background-color: rgba(58, 58, 58, 0.35);
	}

	.docs-topbar {
		padding: 0 16px;
		gap: 12px;
	}

	/* The avatar alone identifies the reader here; the name would crowd out the
	   language selector. */
	.docs-user-name {
		display: none;
	}

	.docs-doc-header h1 {
		font-size: 26px;
	}

	/* The row is sticky, so it must stay one line: the trail takes what the tools
	   leave and scrolls (below), and the tools shrink to their icons (the button's
	   title and text still name them). */
	.docs-crumbs-row {
		flex-wrap: nowrap;
	}

	.docs-breadcrumb {
		flex: 1 1 0;
	}

	.docs-crumb-tools {
		gap: 4px;
	}

	.docs-crumb-tools > button {
		font-size: 0;
		gap: 0;
		padding: 6px;
	}

	.docs-crumb-tools > button svg {
		width: 18px;
		height: 18px;
	}

	/* A deep trail would otherwise wrap to one crumb per row and eat a chunk of a
	   phone screen (a 5-crumb trail measures ~89px tall at 390px wide). Keep it one
	   line and scroll it horizontally instead. The ancestors — the navigable part —
	   stay at the start, and the current position is repeated in the <h1> directly
	   below. */
	.docs-breadcrumb-list {
		flex-wrap: nowrap;
		overflow-x: auto;
		/* No scrollbar chrome, so the bar stays exactly one line tall; the crumb
		   clipped at the right edge is the affordance (and touch scrollbars overlay
		   rather than take space anyway). */
		scrollbar-width: none;
	}

	.docs-breadcrumb-list::-webkit-scrollbar {
		display: none;
	}

	/* Crumbs must keep their natural width in the scroll strip rather than being
	   squeezed by the flex line. */
	.docs-breadcrumb-item {
		flex: 0 0 auto;
	}
}

@media (max-width: 480px) {
	.docs-landing-tile {
		grid-template-columns: 120px 1fr;
	}

	.docs-landing-tile-media-title {
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.docs-browser *,
	.docs-topbar * {
		transition: none !important;
	}
}