:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  /* Motion (Admin → Motion overrides these from base.html.twig; the values here are the Snappy profile).
     hover = hover/active feedback in lists, panel = menus, dialogs, tooltips and small state changes,
     drawer = large sliding surfaces, page = cross-document fade. */
  --motion-hover: 0ms;
  --motion-panel: 100ms;
  --motion-drawer: 200ms;
  --motion-page: 80ms;
  --header-h: 3.5rem;

  --bg: #ffffff;
  --bg-subtle: #f7f7f8;
  --border: #e5e5e5;
  --text: #171717;
  --text-muted: #737373;
  --accent: #2563eb;
  --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
  /* Text in the accent (links, the current link in the mega menu, secondary buttons). base.html.twig prints it
     when link_color or the accent differs from the theme's; dark mode has a lighter one, readable (AA) on --bg. */
  --accent-text: var(--accent);

  --content-w: 52rem;
  --content-max: calc(52rem + 4rem);
  --content-gutter: 2rem;
  --content-justify: center;
  --sidebar-w: 16rem;

  --bg-header: color-mix(in srgb, var(--bg) 80%, transparent);
  --bg-sidebar: var(--bg);
  --bg-main: var(--bg);
  --bg-footer: var(--bg);
  --text-header: var(--text);
  --text-sidebar: var(--text);

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: var(--font-body);
  --heading-weight: 600;
  --body-size: 1rem;
  --body-lh: 1.65;
  --h1-size: 1.85714rem;
  --h2-size: 1.35714rem;
  --h3-size: 1.10714rem;
  --h4-size: 1rem;
  --h5-size: 0.92857rem;
  --h6-size: 0.85714rem;
  --sidebar-size: 0.92857rem;
  --toc-size: 0.92857rem;
  --toc-title-size: var(--toc-size);
  --prevnext-size: 1rem;
  --prevnext-label-size: 0.78571rem;
  --footer-size: 0.85714rem;
  --search-size: 1.07143rem;
  --header-pad: 0.75rem;
  --brand-size: 1rem;
  --table-size: 0.96429rem;
  --header-icon: 1.14286rem;
  --header-link-size: 0.92857rem;
  --breadcrumb-size: 0.85714rem;
  --breadcrumb-sep-size: var(--breadcrumb-size);
  --code-font: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --code-size: .893em;
  --callout-size: 0.96429rem;
  --callout-title-size: 0.92857rem;
  --code-bg: var(--bg-subtle);
  --code-border: var(--border);
  --code-text: var(--text);
  --inline-code-bg: var(--bg-subtle);
  --inline-code-text: var(--text);
  --inline-code-border: var(--border);
  /* --inline-code-font / --inline-code-size are only set from Admin; unset = follow the code blocks */

  --callout-note: var(--accent);
  --callout-tip: #16a34a;
  --callout-important: #7c3aed;
  --callout-warning: #d97706;
  --callout-caution: #dc2626;
}

.dark {
  --bg: #0b0b0c;
  --bg-subtle: #161617;
  --border: #27272a;
  --text: #f5f5f5;
  --text-muted: #a1a1aa;
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-text: #3b82f6;

  --bg-header: color-mix(in srgb, var(--bg) 80%, transparent);
  --bg-sidebar: var(--bg);
  --bg-main: var(--bg);
  --bg-footer: var(--bg);
  --text-header: var(--text);
  --text-sidebar: var(--text);
}

body { background: var(--bg-main); }
[x-cloak] { display: none !important; }

/* x-tooltip (see site.js): one shared bubble, positioned via transform */
.docs-tooltip {
  position: fixed; top: 0; left: 0; z-index: 60;
  padding: .3rem .55rem; border-radius: .375rem;
  font-size: .75rem; line-height: 1.2; white-space: nowrap;
  background: var(--text); color: var(--bg);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  opacity: 0; pointer-events: none;
  transition: opacity var(--motion-panel) ease-out;
}
.docs-tooltip.is-visible { opacity: 1; }
@media print { .docs-tooltip { display: none !important; } }
main { background: var(--bg-main); }

/* rem base for every rem value in the theme; set from General → Fonts (root_font_size). The template
   prints --root-size only when it differs from the theme default. Paper keeps 14px at the default:
   the screen is larger than paper (15px, about 107 % of 14px), and a printout keeps its own size. */
html { font-size: var(--root-size, 15px); }
@media print { html { font-size: var(--root-size, 14px); } }
/* No elastic overscroll on the page itself: the rubber band drags the fixed header and the
   sticky footer along with the document, which reads as the top and bottom bars jumping. */
@media screen { html { overscroll-behavior-y: none; } }
body {
  font-family: var(--font-body);
  /* UI chrome (header, sidebar, ToC) uses a fixed 1.5; --body-lh is for running text and is applied on .prose */
  line-height: 1.5;
  letter-spacing: 0;
  background: var(--bg);
  color: var(--text);
}

/* -------------------- Focus -------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* -------------------- Pressable feedback -------------------- */
button, a.btn, .pressable {
  transition: transform var(--motion-panel) ease-out;
}
.text-size-menu { font-size: 0.8125rem; }
@media screen and (hover: hover) {
  .text-size-menu button:hover { background: var(--bg-subtle); }
}
button:active, a.btn:active, .pressable:active {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
  button:active, a.btn:active, .pressable:active { transform: none; }
}

/* -------------------- Content column gutter -------------------- */
/* Matches Tailwind's `lg` breakpoint (1024px) used elsewhere in the templates. */
.content-col { padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 1024px) {
  .content-col { padding-left: var(--content-gutter); padding-right: var(--content-gutter); }
}

/* -------------------- Header offset -------------------- */
/* The header is fixed and its rendered height (padding-driven) is measured
   by inline JS into --header-h. The page body, sidebar and ToC all read
   that variable so they never overlap the header, however tall it is. */
.header-offset { padding-top: var(--header-h); }
@media print {
  .header-offset { padding-top: 0; }
}

/* -------------------- Prose / content -------------------- */
.prose { color: var(--text); font-size: var(--body-size); line-height: var(--body-lh); max-width: var(--content-w); }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { font-family: var(--font-heading); font-weight: var(--heading-weight); }
.prose h1 { font-size: var(--h1-size); letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 .75rem; }
.prose h2 { font-size: var(--h2-size); letter-spacing: -0.01em; line-height: 1.25; margin: 2.5rem 0 .75rem; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.prose h3 { font-size: var(--h3-size); margin: 1.75rem 0 .5rem; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.prose h4 { font-size: var(--h4-size); margin: 1.25rem 0 .5rem; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.prose h5 { font-size: var(--h5-size); margin: 1rem 0 .4rem; }
.prose h6 { font-size: var(--h6-size); margin: 1rem 0 .4rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.prose p { margin: .85rem 0; }
.prose ul, .prose ol { margin: .85rem 0; padding-left: 1.5rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin: .3rem 0; }

.prose a {
  color: var(--accent-text);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--motion-hover) ease;
}
@media screen and (hover: hover) {
  .prose a:hover { text-decoration: underline; }
}

.prose code {
  font-family: var(--inline-code-font, var(--code-font));
  font-size: var(--inline-code-size, var(--code-size));
  background: var(--inline-code-bg);
  color: var(--inline-code-text);
  border: 1px solid var(--inline-code-border);
  border-radius: var(--box-radius-sm, 4px);
  padding: .1em .35em;
}

.prose pre {
  position: relative;
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--box-radius, 8px);
  padding: .85rem 1rem;
  overflow-x: auto;
  margin: 1.25rem 0;
}
.prose pre code {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--code-font);
  font-size: var(--code-size);
  color: var(--code-text);
}

.prose table { border-collapse: collapse; width: 100%; margin: 1.25rem 0; font-size: var(--table-size); }
.prose th, .prose td { border-bottom: 1px solid var(--border); padding: .5rem .75rem; text-align: left; }
.prose th { background: var(--bg-subtle); font-weight: 600; }

.prose blockquote {
  border-left: 2px solid var(--border);
  margin: 1rem 0;
  padding: .1rem 1rem;
  color: var(--text-muted);
}

/* No line around a picture by default; docs-border gives one ("Image widths" below) */
.prose img { max-width: 100%; }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }

/* -------------------- Callouts (github-markdown-alerts) -------------------- */
.md-alert {
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--box-radius-md, 6px);
  padding: .65rem 1rem;
  margin: 1.25rem 0;
  font-size: var(--callout-size);
  background: var(--bg);
}
.md-alert-title { display: flex; align-items: center; gap: .4rem; font-size: var(--callout-title-size); font-weight: 600; margin: 0 0 .3rem; }
/* Plugin CSS is disabled, so the octicon would fall back to black fill */
.md-alert-title > svg { fill: currentColor; flex-shrink: 0; }
.md-alert-body > :first-child { margin-top: 0; }
.md-alert-body > :last-child { margin-bottom: 0; }

/* Default (tinted): left border + tinted background */
.md-alert--note      { border-left-color: var(--callout-note); background: color-mix(in srgb, var(--callout-note) 6%, var(--bg)); }
.md-alert--tip        { border-left-color: var(--callout-tip); background: color-mix(in srgb, var(--callout-tip) 6%, var(--bg)); }
.md-alert--important  { border-left-color: var(--callout-important); background: color-mix(in srgb, var(--callout-important) 6%, var(--bg)); }
.md-alert--warning    { border-left-color: var(--callout-warning); background: color-mix(in srgb, var(--callout-warning) 6%, var(--bg)); }
.md-alert--caution    { border-left-color: var(--callout-caution); background: color-mix(in srgb, var(--callout-caution) 6%, var(--bg)); }

/* Outlined: 1px border in type color, no tint */
body.callout-outlined .md-alert { border-width: 1px; background: var(--bg); }
body.callout-outlined .md-alert--note      { border-color: var(--callout-note); background: var(--bg); }
body.callout-outlined .md-alert--tip        { border-color: var(--callout-tip); background: var(--bg); }
body.callout-outlined .md-alert--important  { border-color: var(--callout-important); background: var(--bg); }
body.callout-outlined .md-alert--warning    { border-color: var(--callout-warning); background: var(--bg); }
body.callout-outlined .md-alert--caution    { border-color: var(--callout-caution); background: var(--bg); }

/* Plain: left border only, no tint, no outer border */
body.callout-plain .md-alert {
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-radius: var(--box-radius-md, 6px);
  background: transparent;
}

/* -------------------- Code block chrome -------------------- */
.copy-btn {
  position: absolute;
  top: .5rem;
  right: .5rem;
  font-size: .75rem;
  padding: .2rem .5rem;
  border-radius: 6px;
  border: 1px solid var(--code-border);
  background: var(--code-bg);
  color: color-mix(in srgb, var(--code-text) 65%, transparent);
  opacity: 0;
  transition: opacity var(--motion-panel) ease, transform var(--motion-panel) ease-out;
}
.prose pre:hover .copy-btn,
.prose pre:focus-within .copy-btn { opacity: 1; }
@media (hover: none) {
  .copy-btn { opacity: 1; }
}
.copy-btn:active { transform: scale(0.97); }

.code-lang {
  position: absolute;
  top: .55rem;
  left: 1rem;
  font-size: .714rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: color-mix(in srgb, var(--code-text) 65%, transparent);
}
.prose pre.has-lang { padding-top: 2rem; }

/* -------------------- Sidebar -------------------- */
.sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .375rem .5rem;
  /* Sidebar → Shape (sidebar_active_shape): Square sets --sidebar-link-radius:0 */
  border-radius: var(--sidebar-link-radius, var(--box-radius-md, 6px));
  font-size: var(--sidebar-size);
  color: var(--text-muted);
  transition: background-color var(--motion-hover) ease, color var(--motion-hover) ease;
}
@media screen and (hover: hover) {
  .sidebar-link:hover { background: var(--sidebar-hover-bg, var(--bg-subtle)); color: var(--text-sidebar); }
}
/* Sidebar → Links — active link: --sidebar-active-bg / --sidebar-hover-bg / --sidebar-active-bar, so a colored sidebar
   is not stuck with the page's subtle background. */
.sidebar-link.is-active {
  background: var(--sidebar-active-bg, var(--bg-subtle));
  color: var(--text-sidebar);
  font-weight: 500;
}
.sidebar-link.is-active::before {
  content: "";
  position: absolute;
  left: -.5rem;
  top: .25rem;
  bottom: .25rem;
  width: 2px;
  border-radius: 1px;
  background: var(--sidebar-active-bar, var(--accent));
}
/* Lucide icons from header.menu_icon (sidebar + home cards). Sized in em so
   they follow the text-size settings; stroke a touch lighter than Lucide's 2. */
.docs-icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  stroke-width: 1.75;
}
/* Nudge left so the icon's centre lines up with the child list's border-left
   (ml-3 = .75rem from the link's left padding of .5rem); the text keeps its x. */
.sidebar-link .docs-icon { margin-left: -.22rem; margin-right: .345rem; }
/* An unpublished page in an editor's tree (drafts on, Drafts::menuChildren()) */
/* The lock on a protected page (partials/page-lock.html.twig): only whoever may edit the site sees it */
.docs-page-lock { display: inline-block; flex-shrink: 0; color: var(--text-muted); cursor: default; }
.docs-page-lock--title { width: .5em; height: .5em; min-width: 1rem; min-height: 1rem; margin-left: .35em; vertical-align: .08em; }
.docs-page-lock--nav { width: .8rem; height: .8rem; }
.docs-page-lock.is-inherited { opacity: .45; }
.docs-hero .docs-page-lock { color: inherit; opacity: .75; }
.docs-hero .docs-page-lock.is-inherited { opacity: .45; }
/* A hidden page in the menus of whoever may edit the site (partials/page-hidden.html.twig, NavTree::children()):
   dimmed, with an eye. Readers never get these pages. The current page keeps more of its contrast. */
.docs-page-hidden { display: inline-block; flex-shrink: 0; color: var(--text-muted); cursor: default; }
.docs-page-hidden .docs-icon { margin: 0; }
.docs-page-hidden--nav { width: .8rem; height: .8rem; }
.docs-page-hidden--mega { width: .8em; height: .8em; margin-left: .35em; vertical-align: -.05em; }
.sidebar-link.is-hidden-page, .sidebar-group-label.is-hidden-page, .mega-nav .is-hidden-page { opacity: .6; }
:is(.sidebar-link, .mega-nav *).is-hidden-page.is-active { opacity: .85; }
@media screen and (hover: hover) {
  :is(.sidebar-link, .mega-nav *).is-hidden-page:hover { opacity: 1; }
}
.sidebar-draft { font-size: .75em; line-height: 1.5; background: color-mix(in srgb, #d97706 15%, transparent); color: #b45309; }
.sidebar-group-label .docs-icon { width: 1.2em; height: 1.2em; margin-left: -.16rem; margin-right: .16rem; }

.sidebar-group-label {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: .786rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.sidebar-chevron { transition: transform var(--motion-panel) ease-out; }
.sidebar-chevron.is-open { transform: rotate(90deg); }

/* -------------------- Header bar (Header — layout) -------------------- */
/* Side padding and a max width for the content (header_padding_x, header_max_width: --header-pad-x, --header-max); the
   background spans the window. The bottom edge (header_edge) is --header-border on the header's own style, or a shadow */
.site-header { box-shadow: var(--header-shadow, none); }
.site-header-bar { padding-inline: var(--header-pad-x, 1rem); max-width: var(--header-max, none); margin-inline: auto; }
/* The header's rows (Header — layout → Top row, Menu row; partials/header.html.twig): only on large screens. Each row's
   content lines up with the header bar's; the background spans the window and is the header's unless the row has its
   own (--header-top-bg, --header-menu-bg). The header is still one fixed box, so --header-h measures every row */
.site-header-top, .site-header-menu { display: none; }
@media (min-width: 1024px) {
  .site-header-top, .site-header-menu { display: block; }
}
.site-header-top { background: var(--header-top-bg, transparent); }
.site-header-top-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: var(--header-top-justify, flex-end); gap: .25rem 1.25rem;
  padding: var(--header-top-pad, .375rem) var(--header-pad-x, 1rem); max-width: var(--header-max, none); margin-inline: auto;
  font-size: var(--header-top-size, .857rem); line-height: 1.4;
}
.header-top-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-muted); white-space: nowrap; }
.header-top-link .docs-icon { width: 1.1em; height: 1.1em; flex-shrink: 0; }
@media screen and (hover: hover) { .header-top-link:hover { text-decoration: underline; text-underline-offset: 3px; } }
.site-header-menu { background: var(--header-menu-bg, transparent); }
.site-header-menu-bar { padding: var(--header-menu-pad, .5rem) var(--header-pad-x, 1rem); max-width: var(--header-max, none); margin-inline: auto; }
/* The first item's text under the site name (the item's own padding, .mega-trigger) */
.mega-row-start { margin-inline-start: -.55rem; }
/* The bar under the current item lies on the header's bottom edge here too: the menu takes the menu row's full height */
.site-header-menu-bar .mega-active-bar { margin-block: calc(-1 * var(--header-menu-pad, .5rem)); }
/* The top row's links in the drawer (below lg) */
.sidebar-top-links { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--border); }
@media (min-width: 1024px) { .sidebar-top-links { display: none; } }

/* The logo for dark mode (logo_dark, partials/header.html.twig): one of the two shows. Paper is light (base.html.twig) */
.brand-logo-dark, .dark .brand-logo-light { display: none; }
.dark .brand-logo-dark { display: block; }

/* -------------------- Header links -------------------- */
.header-link { color: var(--text-muted); }

/* -------------------- Mega menu (topnav layouts) -------------------- */
.mega-trigger {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .3rem .55rem; border-radius: 6px; white-space: nowrap;
  transition: opacity var(--motion-hover) ease, background-color var(--motion-hover) ease;
}
/* Space between the items (mega_gap: --mega-gap) */
.mega-nav { gap: var(--mega-gap, .25rem); }
/* Follows the header text color (which Admin can change), dimmed until active/open/hovered */
.mega-trigger { color: var(--text-header); opacity: .72; font-size: var(--header-link-size); }
/* The current page (mega_active_mark): full strength and 500, unless None. Its own color, --mega-active, is a rule in base.html.twig */
.mega-nav:not(.mega-active-none) .mega-trigger.is-active { opacity: 1; font-weight: 500; }
.mega-trigger[aria-expanded="true"] { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
@media screen and (hover: hover) { .mega-trigger:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); } }
/* Bar: the menu takes the header's full height, so the bar lies on its bottom edge, over the border line */
.mega-active-bar { align-self: stretch; align-items: stretch; margin-block: calc(-1 * var(--header-pad)); }
.mega-active-bar > div { display: flex; }
.mega-active-bar .mega-trigger { position: relative; border-radius: 0; }
.mega-active-bar .mega-trigger.is-active::after {
  content: ""; position: absolute; left: .55rem; right: .55rem; bottom: calc(-1 * var(--header-border-w, 1px));
  height: var(--mega-bar-w, 3px); background: var(--mega-bar, var(--accent));
}
/* Same mark on hover (mega_active_hover): the mark instead of the tinted background */
.mega-hover-mark .mega-trigger[aria-expanded="true"] { background: transparent; }
.mega-hover-mark.mega-active-bar .mega-trigger[aria-expanded="true"]::after {
  content: ""; position: absolute; left: .55rem; right: .55rem; bottom: calc(-1 * var(--header-border-w, 1px));
  height: var(--mega-bar-w, 3px); background: var(--mega-bar, var(--accent));
}
@media screen and (hover: hover) {
  .mega-hover-mark .mega-trigger:hover { background: transparent; }
  .mega-hover-mark.mega-active-bar .mega-trigger:hover::after {
    content: ""; position: absolute; left: .55rem; right: .55rem; bottom: calc(-1 * var(--header-border-w, 1px));
    height: var(--mega-bar-w, 3px); background: var(--mega-bar, var(--accent));
  }
}
/* A header link shown as a button (nav_links: variant). Shape and colours from the tab Buttons, like the
   buttons in the text; low enough not to make the header taller */
/* Hidden on small screens like the text links (hidden sm:inline); here, since theme.css beats Tailwind */
.header-button {
  display: none; align-items: center; padding: .25rem .75rem; border: 1.5px solid transparent;
  border-radius: var(--button-radius, 8px); font-size: var(--header-link-size); font-weight: 500; line-height: 1.25;
  white-space: nowrap; text-decoration: none; transition: transform var(--motion-hover) ease, opacity var(--motion-hover) ease;
}
.header-button--primary { background: var(--button-bg, var(--accent)); border-color: var(--button-bg, var(--accent)); color: var(--button-text, #fff); }
.header-button--secondary { background: transparent; border-color: var(--button-outline, var(--accent)); color: var(--button-outline-text, var(--accent-text)); }
@media (min-width: 40rem) { .header-button { display: inline-flex; } }
.header-button:active { transform: scale(0.97); }
@media screen and (hover: hover) { .header-button:hover { opacity: .88; } }
.mega-chevron { transition: transform var(--motion-panel) ease-out; }
.mega-chevron.is-open { transform: rotate(180deg); }
/* Positioned box. trigger = under its menu item, center = centered under the header, full = header width */
.mega-pop { padding-top: .5rem; z-index: 40; }
.mega-pop-trigger { left: 0; }
.mega-pop-center { left: 50%; transform: translateX(-50%); }
.mega-pop-full { left: 0; right: 0; padding-top: 0; }
.mega-panel {
  background: var(--mega-bg, var(--bg)); color: var(--text);
  border: 1px solid var(--mega-border, var(--border));
  border-radius: var(--mega-radius, 12px);
  font-size: var(--mega-size, var(--sidebar-size));
}
.mega-pop-full .mega-panel { border-radius: 0; border-left: 0; border-right: 0; }
.mega-pop-full .mega-inner { max-width: 72rem; margin: 0 auto; }
.mega-shadow { box-shadow: 0 12px 28px -12px rgba(0,0,0,.22); }
.mega-inner { padding: .5rem; }
/* Each grid cell is a subgrid of two rows (card, link list) so every card in a row gets the height of the tallest */
.mega-cell { display: grid; grid-template-rows: subgrid; grid-row: span 2; }
.mega-card {
  display: block; padding: .5rem .625rem; border-radius: calc(var(--mega-radius, 12px) * .6);
  transition: background-color var(--motion-hover) ease;
}
.mega-card.is-active { background: var(--mega-hover, var(--bg-subtle)); }
@media screen and (hover: hover) { .mega-card:hover { background: var(--mega-hover, var(--bg-subtle)); } }
.mega-overview { margin-bottom: .25rem; }
.mega-overview .mega-title { font-weight: 600; }
.mega-title { display: flex; align-items: center; gap: .5rem; font-weight: 500; color: var(--text); }
.mega-card.is-active .mega-title { color: var(--accent-text); }
.mega-desc { display: block; margin-top: .125rem; font-size: .92em; line-height: 1.45; color: var(--text-muted); }
.mega-links { margin: 0 0 .5rem; padding: 0 .625rem; }
.mega-link { display: block; padding: .2rem 0; color: var(--text-muted); }
.mega-link.is-active { color: var(--accent-text); }
@media screen and (hover: hover) { .mega-link:hover { color: var(--accent-text); } }

/* Default footer color. :where() keeps the specificity at zero so Footer text style → Color
   (printed as a plain `footer{}` rule in base.html.twig) wins; an inline color would beat it. */
/* -------------------- Sidebar reader controls (sidebar_collapsible, sidebar_resizable) --------------------
   Everything hangs on .is-collapsible / .is-resizable, which partials/sidebar.html.twig only prints with the setting on.
   The state is on <html> (class sidebar-collapsed, --sidebar-w-user), set by the head script before the first paint.
   Desktop only: below lg the sidebar is the drawer, with the whole tree and the theme's width. */
.sidebar-tools, .sidebar-initial, .sidebar-splitter-track { display: none; }
@media screen and (min-width: 1024px) {
  .sidebar-tools { display: flex; justify-content: flex-end; margin: -.5rem 0 .25rem; }
  .sidebar-collapse-btn {
    display: flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 6px; color: var(--text-muted);
    font-size: var(--sidebar-size);
    transition: background-color var(--motion-hover) ease, color var(--motion-hover) ease;
  }
  .sidebar-collapse-btn .docs-icon { width: 1.25em; height: 1.25em; }
  @media (hover: hover) {
    .sidebar-collapse-btn:hover { background: var(--sidebar-hover-bg, var(--bg-subtle)); color: var(--text-sidebar); }
  }
  .sidebar-collapse-icon-open, .sidebar-collapsed .sidebar-collapse-icon-close { display: none; }
  .sidebar-collapsed .sidebar-collapse-icon-open { display: block; }

  /* The reader's width. The drawer's own width is an inline style, hence !important */
  .is-resizable .sidebar-drawer { width: var(--sidebar-w-user, var(--sidebar-w)) !important; }
  .is-resizable { position: relative; }
  /* A strip over the sidebar's right border: wide enough to grab, a thin line when pointed at, focused or dragged */
  .sidebar-splitter-track { display: block; position: absolute; top: 0; bottom: 0; right: -4px; width: 9px; z-index: 21; pointer-events: none; }
  .sidebar-splitter {
    position: sticky; top: var(--header-h, 3.5rem); height: calc(100vh - var(--header-h, 3.5rem) - var(--footer-h, 0px)); max-height: 100%;
    pointer-events: auto; cursor: col-resize; touch-action: none; outline: none;
  }
  .sidebar-splitter::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 3px;
    background: var(--accent); opacity: 0; transition: opacity var(--motion-hover) ease;
  }
  .sidebar-splitter:hover::after, .sidebar-splitter:focus-visible::after, .sidebar-splitter.is-dragging::after { opacity: 1; }
  .sidebar-splitter:focus-visible { outline: none; box-shadow: none; }
  .sidebar-resizing, .sidebar-resizing * { cursor: col-resize !important; user-select: none !important; -webkit-user-select: none !important; }
  .sidebar-collapsed .is-collapsible .sidebar-splitter-track { display: none; }

  /* The rail: the top level of the tree as icons (or initials), nothing below it */
  .sidebar-collapsed .is-collapsible .sidebar-drawer { width: 3.5rem !important; padding-left: .5rem; padding-right: .5rem; overflow-x: hidden; }
  .sidebar-collapsed .is-collapsible .sidebar-tools { justify-content: center; }
  .sidebar-collapsed .is-collapsible .sidebar-link { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; min-height: 2rem; }
  .sidebar-collapsed .is-collapsible .sidebar-link .docs-icon:not(.docs-page-lock) { margin: 0; width: 1.25em; height: 1.25em; }
  .sidebar-collapsed .is-collapsible .sidebar-initial { display: block; font-weight: 600; line-height: 1; }
  /* The name stays for screen readers and for a browser without JS (the link also gets an aria-label) */
  .sidebar-collapsed .is-collapsible .sidebar-link > span.flex-1 {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .sidebar-collapsed .is-collapsible .sidebar-link > :is(.sidebar-chevron, .sidebar-draft, .docs-page-lock, .docs-page-hidden) { display: none; }
  .sidebar-collapsed .is-collapsible .sidebar-link.is-active::before { left: -.25rem; }
  /* The page being read lies under a link of the rail: that link stands for it */
  .sidebar-collapsed .is-collapsible .sidebar-link:has(~ div .is-active) { background: var(--sidebar-active-bg, var(--bg-subtle)); color: var(--text-sidebar); }
  /* Pages under a link are not shown. What lies in a nav group is: the group is a heading, here a line */
  .sidebar-collapsed .is-collapsible .sidebar-link ~ div { display: none !important; }
  .sidebar-collapsed .is-collapsible .sidebar-group-label ~ div { margin-left: 0; padding-left: 0; border-left: 0 !important; }
  .sidebar-collapsed .is-collapsible .sidebar-group-label {
    height: 1px; margin: .5rem .25rem; padding: 0; overflow: hidden; font-size: 0; background: var(--border);
  }
  .sidebar-collapsed .is-collapsible li:first-child > .sidebar-group-label { display: none; }
}

:where(.site-footer) { color: var(--text-muted); }

/* -------------------- Full-width footer (every layout except "sidebar") --------------------
   The body is a column and the content row grows, so the footer sits at the bottom of the
   viewport on short pages and below the content on long ones, never inside the content column. */
@media screen {
  .layout-full-footer { min-height: 100vh; display: flex; flex-direction: column; }
  .layout-full-footer > .site-row { flex: 1 0 auto; }
  /* The sticky sidebar is normally a full viewport tall, which alone would push the footer below the
     fold. Here it is only as tall as its content; the wrapper stretches with the row and carries the
     border, so the column still reaches the footer. The background sits on a sticky ::before that is
     one window tall: painted on the wrapper itself, a gradient would span the whole document and
     slide past the (stationary) nav while the content scrolls. The wrapper is a one-cell grid so the
     ::before and the drawer share the cell: height 100% is then the wrapper's own height, which on a
     short page (footer in view, not sticky) ends the background exactly at the footer instead of behind it. */
  @media (min-width: 1024px) {
    .layout-full-footer .site-sidebar:not(.no-desktop) {
      flex-shrink: 0; border-right: var(--sidebar-border, 1px solid var(--border));
      display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    }
    .layout-full-footer .site-sidebar:not(.no-desktop)::before {
      content: ""; grid-area: 1 / 1; align-self: start; position: sticky; top: var(--header-h, 3.5rem);
      height: 100%; max-height: calc(100vh - var(--header-h, 3.5rem) - var(--footer-h, 0px));
      background: var(--bg-sidebar);
    }
    .layout-full-footer .sidebar-drawer {
      grid-area: 1 / 1; align-self: start;
      height: auto !important; max-height: calc(100vh - var(--header-h, 3.5rem));
      border-right: 0 !important; background: transparent !important;
    }
  }
  /* Footer → Always visible (body.footer-sticky): the footer stays at the bottom of the window while the content scrolls behind it.
     --footer-h is measured in base.html.twig so the sticky sidebar ends where the footer begins. */
  .footer-sticky .site-footer-full { position: sticky; bottom: 0; z-index: 10; }
  @media (min-width: 1024px) {
    .footer-sticky .sidebar-drawer { max-height: calc(100vh - var(--header-h, 3.5rem) - var(--footer-h, 0px)); }
  }
  /* Footer → Background / Alignment / Vertical padding (--bg-footer, --footer-align, --footer-pad-y) */
  .site-footer { text-align: var(--footer-align, left); }
  .site-footer-full {
    flex-shrink: 0; text-align: var(--footer-align, center); background: var(--bg-footer);
    padding-block: var(--footer-pad-y, 1.5rem); padding-inline: var(--footer-pad-x, 1rem); position: relative;
  }
}

/* -------------------- ToC -------------------- */
.toc-item {
  /* Content — table of cont. → Line (toc_border): --toc-border, transparent when off */
  border-left: 1px solid var(--toc-border, var(--border));
  color: var(--text-muted);
  transition: color var(--motion-hover) ease, border-color var(--motion-hover) ease;
}
.toc-item a { color: inherit; }
.toc-item.is-active {
  border-left: 1px solid var(--accent);
  color: var(--text);
  font-weight: 500;
}

/* -------------------- Sidebar drawer motion (mobile) -------------------- */
/* Tailwind 4's translate-x-* utilities set the `translate` property, not `transform` */
.sidebar-drawer {
  transition: translate var(--motion-drawer) cubic-bezier(0.32, 0.72, 0, 1);
  /* Sidebar → Padding (sidebar_padding) */
  padding: var(--sidebar-pad, 1.25rem .75rem);
}
/* Sidebar → Space between links (sidebar_link_gap) */
.sidebar-list > :not(:last-child) { margin-block-end: var(--sidebar-gap, .125rem); }
.sidebar-overlay {
  transition: opacity var(--motion-drawer) ease;
}

/* -------------------- Page changes (cross-document view transitions) --------------------
   Every page is still a full server-rendered document (works with curl, no-JS and crawlers); the
   browser only cross-fades between the old and the new document instead of flashing. The header,
   sidebar and footer get their own names so they stay put while the content fades. Browsers
   without support just navigate as before.
   The opt-in itself (`@view-transition { navigation: auto }`) is printed by base.html.twig, only
   when Admin → Motion has a page transition; an at-rule cannot hang on a variable or a selector. */
@media screen and (prefers-reduced-motion: no-preference) {
  .site-header { view-transition-name: site-header; }
  .site-footer-full { view-transition-name: site-footer; }
  @media (min-width: 1024px) {
    .sidebar-drawer { view-transition-name: site-sidebar; }
  }
  /* The ::view-transition tree hangs off <html>, so it inherits --motion-page from :root */
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--motion-page); animation-timing-function: ease-out; }
  ::view-transition-group(site-header), ::view-transition-group(site-sidebar), ::view-transition-group(site-footer) { animation-duration: var(--motion-page); }
}

/* -------------------- Alpine enter/leave classes --------------------
   Used as x-transition:enter="motion-pop-enter" etc. instead of Alpine's inline
   `.duration.150ms` helpers, so the duration follows --motion-panel / --motion-drawer.
   Leaving takes half the time, like Alpine's own default. */
.motion-pop-enter { transition: opacity var(--motion-panel) var(--ease-out), transform var(--motion-panel) var(--ease-out); }
.motion-pop-leave { transition: opacity calc(var(--motion-panel) / 2) ease-in, transform calc(var(--motion-panel) / 2) ease-in; }
.motion-pop-from { opacity: 0; transform: scale(0.95); }
.motion-pop-to { opacity: 1; transform: scale(1); }
.motion-fade-enter { transition: opacity var(--motion-panel) ease-out; }
.motion-fade-leave { transition: opacity calc(var(--motion-panel) / 2) ease-in; }
.motion-fade-from { opacity: 0; }
.motion-fade-to { opacity: 1; }
/* Content inside an x-show wrapper (dialogs, side panels, toasts, the search modal): x-transition only
   works on the x-show element itself, so these play a keyframe animation every time the wrapper goes
   from display:none to visible. Enter only; closing is immediate. */
.motion-pop-in { animation: motion-pop-in var(--motion-panel) var(--ease-out); }
.motion-slide-in { animation: motion-slide-in var(--motion-drawer) cubic-bezier(0.32, 0.72, 0, 1); }
@keyframes motion-pop-in { from { opacity: 0; transform: scale(0.97); } }
@keyframes motion-slide-in { from { translate: 100% 0; } }
/* Switching between two open mega panels is a swap, not a fade: only the first one opening animates */
.mega-swap .motion-fade-enter, .mega-swap .motion-fade-leave { transition: none; }

/* -------------------- Search modal -------------------- */
/* The panel gets .motion-pop-in only when opened with the pointer (docsSearch.show()); ⌘K opens it instantly. */

/* Hover feedback is screen-only: every hover rule in this file sits in `@media screen and (hover: hover)`
   (and Tailwind's hover: variant is redefined the same way in tailwind.src.css), so a card under the pointer
   prints like the others. */
/* The search dialog's corners follow the site's rounding (box_radius); without it Tailwind's rounded-xl stands */
.search-panel { border-radius: var(--box-radius-lg, .75rem); }
/* -------------------- Section cards (> [!SECTIONS], classes/Sections.php) -------------------- */
.docs-sections { margin: 2rem 0; }
.prose .docs-sections-title { margin: 0 0 .6rem; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.prose .docs-sections-card, .prose .docs-sections-card:hover { color: inherit; text-decoration: none; }
.docs-sections-card {
  line-height: 1.5; /* the cards keep the page's line height, not the prose's */
  border: 1px solid var(--border);
  border-radius: var(--box-radius-lg, 10px);
  transition: border-color var(--motion-hover) ease;
}
@media screen and (hover: hover) {
  .docs-sections-card:hover { border-color: var(--text-muted); }
}

/* -------------------- Prev/next cards -------------------- */
/* Page info: created / updated (partials/page-meta.html.twig). Variables come from base.html.twig. */
.page-meta {
  font-family: var(--page-meta-font, inherit);
  font-size: var(--page-meta-size, calc(0.85714rem * var(--text-scale, 1)));
  color: var(--text-muted);
  background: var(--page-meta-bg, transparent);
  padding: var(--page-meta-pad, 0);
  border-radius: var(--page-meta-radius, 6px);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.page-meta-top { margin-bottom: 1.5rem; }
/* The description above already ends with its own 1.5rem */
p + .page-meta-top { margin-top: -0.75rem; }
.page-meta-bottom { margin-top: 2.5rem; }
/* Colours here, not in the template: base.html.twig's text styles (prevnext_color, breadcrumb_color) must win */
.prevnext-title { font-size: var(--prevnext-size); color: var(--text); }
.prevnext-label { font-size: var(--prevnext-label-size); line-height: 1.25rem; }
.pn-card {
  border: 1px solid var(--border);
  border-radius: var(--box-radius, 8px);
  transition: border-color var(--motion-hover) ease;
}
@media screen and (hover: hover) {
  .pn-card:hover { border-color: var(--text-muted); }
}

/* Keep code, callout and table backgrounds (header row, stripes) when printing */
.prose pre, .prose code, .md-alert, .prose th, .prose td {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.breadcrumbs { color: var(--text-muted); }
/* The current page stands out in the text colour; breadcrumb_color is the trail's */
.breadcrumb-current { color: var(--text); }
/* Breadcrumbs: the first crumb is a house icon, sized with the breadcrumb text */
.breadcrumb-home-icon { width: 1.15em; height: 1.15em; }

/* Page actions ("…" menu above the ToC) */
.page-actions-btn .docs-icon { width: 1.1em; height: 1.1em; }
/* The floating spot (below xl, base.html.twig) is one breadcrumb line tall with the button centred in it,
   so the two sit on the same axis. The breadcrumbs' line-height is the body's 1.5. */
.page-actions-float { height: calc(var(--breadcrumb-size) * 1.5); margin-bottom: .75rem; }
.page-actions-float .page-actions { height: 100%; align-items: center; margin: 0; }
.page-actions-menu .docs-icon { width: 1em; height: 1em; color: var(--text-muted); }
.page-actions-menu [role="menuitem"]:hover { background: var(--bg-subtle); }

/* Print */
.print-header { display: none; }
@media print {
  .site-header, .site-sidebar, .site-toc, .site-search, .prevnext, .copy-btn, footer { display: none !important; }
  .print-header { display: block; margin: 0 0 1.5rem; padding-bottom: .75rem; border-bottom: 1px solid #999; }
  .print-header-name { font-weight: 600; font-size: 1rem; }
  .print-header-logo { display: block; width: auto; max-width: 50%; margin: 0 0 .35rem; object-fit: contain; object-position: left; }
  .print-header-meta { font-size: 0.78571rem; color: #555; }
  :root { color-scheme: light; }
  body { background: #fff !important; color: #000 !important; }
  .content-col { max-width: none !important; padding: 0 !important; }
  .prose a { color: inherit; text-decoration: none; }
  .prose pre, .prose pre code { white-space: pre-wrap; overflow: visible; }
  .prose pre, .prose table, .md-alert, .prose img { break-inside: avoid; }
  /* Printing from edit mode prints the saved article, never the editor (x-show hides it inline) */
  .docs-article-view { display: block !important; }
}

/* Version switcher (partials/version-switcher.html.twig) and banner (version-banner.html.twig) */
.version-button {
  font-size: 0.75rem;
  line-height: 1;
  padding: 0.3rem 0.4rem 0.3rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--header-icon-color, var(--text-muted));
}
.version-chevron { width: 0.8rem; height: 0.8rem; }
.version-check { width: 0.9em; height: 0.9em; flex-shrink: 0; }
.version-menu { font-size: 0.8125rem; }
/* Site switcher (partials/site-switcher.html.twig) */
.site-menu { font-size: 0.8125rem; }
.site-menu-item { transition: background-color var(--motion-hover) ease; }
.site-menu-item:hover, .site-menu-item:focus-visible { background: var(--bg-subtle); outline: none; }
/* Grouped by common tag (Sites::groups()): the tag's name above its sites */
.site-menu-group-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text-muted); }
.site-menu-group + .site-menu-group { border-top: 1px solid var(--border); margin-top: 0.25rem; }
.site-filter-icon { width: 0.9rem; height: 0.9rem; flex-shrink: 0; color: var(--text-muted); }
.site-filter-input { outline: none !important; box-shadow: none !important; border: 0; padding: 0; color: var(--text); font-size: inherit; }
.site-filter-input::placeholder { color: var(--text-muted); opacity: .8; }
.version-tag {
  font-size: 0.6875rem;
  line-height: 1;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
}
@media screen and (hover: hover) {
  .version-button:hover { background: var(--bg-subtle); }
  .version-menu a:hover { background: var(--bg-subtle); }
}
.version-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: var(--callout-size);
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--box-radius, 0.5rem);
  background: var(--bg-subtle);
  color: var(--text-muted);
}
.version-notice a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.version-notice-icon { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.1rem; }
/* A version's status (version_status): its tag and banner in the callout colours, so a preset styles them too.
   The text is mixed towards --text, so that it reads on the tinted ground in light and dark mode. */
.version-tag--beta { --version-status: var(--callout-important); }
.version-tag--deprecated { --version-status: var(--callout-warning); }
.version-tag--beta, .version-tag--deprecated {
  background: color-mix(in srgb, var(--version-status) 14%, var(--bg));
  color: color-mix(in srgb, var(--version-status) 75%, var(--text));
}
.version-notice--beta { --version-status: var(--callout-important); }
.version-notice--deprecated { --version-status: var(--callout-warning); }
.version-notice--beta, .version-notice--deprecated {
  border-color: color-mix(in srgb, var(--version-status) 45%, var(--border));
  background: color-mix(in srgb, var(--version-status) 7%, var(--bg));
  color: var(--text);
}
.version-notice--beta .version-notice-icon, .version-notice--deprecated .version-notice-icon { color: var(--version-status); }

/* Preset preview strip, at the top of the header (partials/preset-preview.html.twig). Solid, since the
   header itself may be translucent; the page's own text colours, so it reads in light and dark mode. */
.docs-preset-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.5rem;
  padding: 0.3rem 1rem;
  font-size: var(--breadcrumb-size);
  line-height: 1.4;
  background: var(--bg-subtle);
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.docs-preset-preview strong { font-weight: 600; }
.docs-preset-preview-icon { width: 0.95rem; height: 0.95rem; flex-shrink: 0; color: var(--accent); }
.docs-preset-preview-end { color: var(--text); text-decoration: underline; text-underline-offset: 2px; border-radius: 2px; }
.docs-preset-preview-end:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media screen and (hover: hover) { .docs-preset-preview-end:hover { color: var(--accent); } }
@media print { .docs-preset-preview { display: none !important; } }

/* Section export print view (templates/section-print.html.twig) */
.export-toc { margin: 0 0 2.5rem; }
.export-toc-title { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--h1-size); letter-spacing: -0.02em; margin-bottom: .75rem; }
.export-toc ol { list-style: none; margin: 0; padding: 0; }
.export-toc li { padding-top: .2rem; padding-bottom: .2rem; }
.export-toc a { color: var(--text); }
@media screen and (hover: hover) { .export-toc a:hover { text-decoration: underline; } }
.export-notice { margin: 0 0 .75rem; color: var(--text-muted); }
.export-page { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.export-title { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--h1-size); letter-spacing: -0.02em; line-height: 1.2; color: var(--text); margin: 0; }
.export-url { font-size: 0.78571rem; color: var(--text-muted); margin: .15rem 0 1rem; word-break: break-all; }
.export-description { color: var(--text-muted); margin: 0 0 1.25rem; }
@media print {
  .export-page { break-before: page; margin-top: 0; padding-top: 0; border-top: 0; }
  .export-toc a { color: inherit; text-decoration: none; }
}

/* Search modal */
.search-input { outline: none !important; box-shadow: none !important; color: var(--text); }
.search-input::placeholder { color: var(--text-muted); opacity: .8; }
.search-label { font-size: 0.75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.search-clear { font-size: 0.78571rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-muted); border-radius: 4px; padding: 0 .25rem; }
.search-clear:hover { color: var(--text); }
.search-scope { font-size: 0.82143rem; color: var(--text-muted); background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: .15rem .4rem; max-width: 9rem; }
.search-scope:hover, .search-scope:focus { color: var(--text); }
/* Search across sites: This site / My sites, and the site's name above its hits */
.search-sites { display: inline-flex; flex-shrink: 0; border: 1px solid var(--border); border-radius: 999px; padding: 1px; }
.search-sites button { font-size: 0.82143rem; line-height: 1.4; color: var(--text-muted); border-radius: 999px; padding: .1rem .5rem; transition: color var(--motion-hover) ease, background-color var(--motion-hover) ease; }
.search-sites button:hover, .search-sites button:focus-visible { color: var(--text); outline: none; }
.search-sites button[aria-pressed="true"] { color: var(--text); background: var(--bg-subtle); }
.search-site { color: var(--text); }
.search-recent { color: var(--text); font-size: calc(var(--search-size) - 0.07143rem); transition: background-color var(--motion-hover) ease; }
.search-recent:hover, .search-recent:focus-visible { background: var(--bg-subtle); outline: none; }
.search-result { transition: background-color var(--motion-hover) ease; }
.search-foot { font-size: 0.78571rem; }
/* Tags (classes/Tags.php): under the page title, in the search box as filters, on results and as the list
   when the box is empty. Common and own tags look the same. */
.docs-page-tags { display: flex; flex-wrap: wrap; gap: .375rem; list-style: none; padding: 0; margin: -.25rem 0 1.5rem; }
.docs-tag { display: inline-flex; align-items: center; gap: .3em; font-size: 0.85714rem; line-height: 1.5; padding: .05rem .55rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-subtle); color: var(--text-muted); transition: color var(--motion-hover) ease, border-color var(--motion-hover) ease; }
button.docs-tag:hover, button.docs-tag:focus-visible { color: var(--text); border-color: var(--text-muted); outline: none; }
.docs-tag-count { opacity: .7; font-variant-numeric: tabular-nums; }
.docs-hero + .docs-page-tags { margin-top: 0; }
.search-chips { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; margin: 0; padding: 0; max-width: 55%; }
.search-chips .docs-tag { color: var(--text); }
.search-tags { display: flex; flex-wrap: wrap; gap: .375rem; padding: .25rem 1rem .5rem; }
.search-result-tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .2rem; }
.search-result-tags .docs-tag { font-size: 0.75rem; padding: 0 .45rem; }
@media print { .docs-page-tags { display: none; } }
.search-foot kbd { display: inline-block; min-width: 1.25rem; padding: 0 .3rem; margin-right: .2rem; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; background: var(--bg); font-family: inherit; font-size: 0.71429rem; line-height: 1.5; text-align: center; color: var(--text-muted); }

/* Frontend editing: header log in/out icon follows the other header icons */
.docs-icon.header-icon { width: var(--header-icon); height: var(--header-icon); }
/* Color scheme button: one icon per mode, chosen from <html data-theme-mode> (set before first paint
   in base.html.twig). Not x-show: until Alpine started, all three icons showed and the header was 83px tall. */
.mode-icon { display: none; }
[data-theme-mode="light"] .mode-icon-light,
[data-theme-mode="dark"] .mode-icon-dark,
[data-theme-mode="auto"] .mode-icon-auto { display: block; }

/* ---- Login plugin forms (login, forgot, reset, magic link) ----
   The plugin's own login.css loads after theme.css, so every rule is
   prefixed with `body` to win on specificity instead of load order. */
body #grav-login {
  max-width: 24rem;
  margin: 4rem auto;
  padding: 2rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--box-radius-lg, .75rem);
  box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 8px 24px rgb(0 0 0 / .06);
  text-align: left;
  color: var(--text);
}
body #grav-login h1,
body #grav-login h2,
body #grav-login h4 {
  margin: 0 0 1.25rem;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: var(--heading-weight);
  letter-spacing: -0.01em;
}
body #grav-login p {
  margin: 0 0 1rem;
  font-size: .93em;
  text-align: left;
  color: var(--text-muted);
}
body #grav-login hr { margin: 1rem 0; border-color: var(--border); }
body #grav-login .form-field { margin-bottom: 1rem; }
body #grav-login .form-label label {
  display: block;
  margin-bottom: .375rem;
  font-size: .93em;
  font-weight: 500;
}
body #grav-login input[type="text"],
body #grav-login input[type="email"],
body #grav-login input[type="password"] {
  display: block;
  width: 100%;
  padding: .5rem .75rem;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--box-radius, .5rem);
  transition: border-color var(--motion-panel) var(--ease-out), box-shadow var(--motion-panel) var(--ease-out);
}
body #grav-login input::placeholder { color: var(--text-muted); opacity: .7; }
body #grav-login input[type="text"]:focus,
body #grav-login input[type="email"]:focus,
body #grav-login input[type="password"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
body #grav-login .form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 1.25rem;
  text-align: left;
}
body #grav-login .rememberme {
  float: none;
  padding: 0;
  font-size: .93em;
  color: var(--text-muted);
}
body #grav-login .rememberme .form-input-wrapper { display: flex; align-items: center; gap: .5rem; }
body #grav-login .rememberme input { accent-color: var(--accent); }
body #grav-login .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5rem 1rem;
  font-size: .93em;
  font-weight: 500;
  border-radius: var(--button-radius, .5rem);
  text-decoration: none;
  cursor: pointer;
}
/* The plugin's icons assume Font Awesome, which the theme does not load. */
body #grav-login .button .fa { display: none; }
body #grav-login .button.primary {
  order: 3;
  flex: 1 0 100%;
  color: var(--button-text, #fff);
  background: var(--button-bg, var(--accent));
  border: 1px solid var(--button-bg, var(--accent));
}
body #grav-login .button.primary:hover { filter: brightness(1.08); }
body #grav-login .button.secondary {
  padding: 0;
  color: var(--accent-text);
  background: none;
  border: 0;
}
body #grav-login .button.secondary:hover { text-decoration: underline; }
/* Under the magic link's card: the way to the password form (partials/login-password-link.html.twig). */
body .login-alt {
  max-width: 24rem;
  margin: -2.75rem auto 4rem;
  text-align: center;
  font-size: .86em;
  color: var(--text-muted);
}
body .login-alt a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
body .login-alt a:hover { color: var(--text); }

/* Register + profile reuse the card via the theme's own register/profile templates. */
body #grav-login.grav-login-wide { max-width: 32rem; }
body #grav-login .required { color: #dc2626; }
body #grav-login input[readonly],
body #grav-login input[disabled] { background: var(--bg-subtle); color: var(--text-muted); }
body #grav-login .form-description,
body #grav-login .form-extra-wrapper { margin-top: .25rem; font-size: .86em; color: var(--text-muted); }
body #grav-login h3 { margin: 1.5rem 0 .75rem; font-size: 1rem; font-weight: var(--heading-weight); }
body #grav-login .form-errors,
body #grav-login .form-error { margin-top: .25rem; font-size: .86em; color: #dc2626; }
body #grav-login .buttons {
  display: flex;
  flex-direction: row-reverse;
  gap: .75rem;
  margin-top: 1.5rem;
}
body #grav-login .buttons .button {
  flex: 1;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
}
body #grav-login .buttons .button:hover { background: var(--bg-subtle); }
body #grav-login .buttons .button[type="submit"] {
  color: var(--button-text, #fff);
  background: var(--button-bg, var(--accent));
  border-color: var(--button-bg, var(--accent));
}
body #grav-login .buttons .button[type="submit"]:hover { background: var(--button-bg, var(--accent)); filter: brightness(1.08); }
body #grav-login .form-wrapper { margin-top: 1rem; }
/* The login frame (partials/login-frame.html.twig): the plugin's messages (#messages, Grav's own
   partial) sit above the card, as wide as the card. */
.login-main #messages { max-width: 24rem; margin: 4rem auto -2.5rem; }
.login-main #messages .notices {
  margin: 0 0 .5rem;
  padding: .625rem .875rem;
  font-size: .93em;
  border: 1px solid var(--border);
  border-radius: .5rem;
  background: var(--bg-subtle);
  color: var(--text);
}
.login-main #messages .notices p { margin: 0; }
.login-main #messages .notices.error { border-color: color-mix(in srgb, #dc2626 50%, transparent); color: #dc2626; }

/* -------------------- Block editor (Editor.js, frontend editing) -------------------- */
/* Editor.js injects its own styles from script; these sit on top and tie it to the theme's tokens. */
.docs-edit-modes { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; font-size: .75rem; }
.docs-edit-modes button { padding: .25rem .7rem; color: var(--text-muted); background: transparent; }
.docs-edit-modes button + button { border-left: 1px solid var(--border); }
.docs-edit-modes button[aria-pressed="true"] { background: var(--bg-subtle); color: var(--text); font-weight: 600; }

/* While editing, the ToC column is hidden (it lists the saved page's headings, not the draft's).
   The text keeps the width it has when read, so lines and tables break the same way; the block
   handles get a gutter to the left of it. The page actions move to their floating spot. */
.docs-is-editing .site-toc { display: none; }
.docs-is-editing .page-actions-float { display: block !important; }
/* The draft banner speaks of the page as readers see it; the editor shows the draft itself (partials/editing/draft-banner.html.twig) */
.docs-is-editing .docs-draft-banner { display: none; }
/* !important: the column's max-width is an inline style (base.html.twig) */
.docs-is-editing .content-col { max-width: calc(var(--content-max) + 3.75rem) !important; }

/* Focus handed back to the "⋮" button after a dialog or edit mode closes (docsFocusPageActions) */
.page-actions-btn.docs-quiet-focus:focus-visible { outline: none; box-shadow: none; }

/* Notion-like: no box around the text. Title, description and text share one left edge, and the
   "+" and drag handle hang in a gutter to the left of it (Editor.js shows them at the hovered block). */
.docs-edit { --docs-gutter: 3.75rem; clear: both; }
.docs-edit-main { padding-left: var(--docs-gutter); }
.docs-blocks { max-width: none; min-height: 320px; margin-left: calc(-1 * var(--docs-gutter)); padding: 0 0 0 var(--docs-gutter); }
@media (max-width: 650px) { .docs-edit { --docs-gutter: 0px; } }

.docs-edit-titletools { display: flex; justify-content: flex-end; align-items: center; gap: .5rem 1rem; margin-bottom: .5rem; }
/* The header in edit mode: plain, or the hero it will be (header.hero). Controls under it while it has focus. */
.docs-edit-header { outline: 0; margin-bottom: 1.1rem; }
.docs-edit-header--hero { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-subtle); }
.docs-edit-header--hero .docs-hero { margin: -1px -1px 0; }
.docs-edit-header--hero .docs-hero-body { max-width: none; }
.docs-edit-header .docs-hero .docs-edit-ghost { color: inherit; }
.docs-edit-header .docs-hero .docs-edit-ghost::placeholder { color: inherit; }
.docs-edit-header .docs-hero .docs-edit-ghost:focus { background: rgba(127,127,127,.15); border-color: currentColor; }
.docs-edit-header .docs-hero .docs-edit-desc { opacity: .92; margin-bottom: 0; }
.docs-edit-header .docs-hero .docs-edit-title { margin-bottom: .15rem; }
.docs-edit-header--plain .docs-edit-desc { margin-bottom: 0; }
.docs-edit-header:not(:focus-within) .docs-edit-hero-tools { display: none; }
.docs-edit-header--plain .docs-edit-hero-tools { margin-top: .35rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-subtle); }
.docs-edit-history { display: inline-flex; gap: .1rem; }
.docs-edit-history button { padding: .3rem; border-radius: 6px; color: var(--text-muted); }
.docs-edit-history button:hover:not(:disabled) { background: var(--bg-subtle); color: var(--text); }
.docs-edit-history button:disabled { opacity: .35; cursor: default; }
.docs-edit-preview { min-height: 320px; }

/* Title and description: set like the rendered page, outlined only on hover and focus */
.docs-edit-ghost { display: block; width: calc(100% + 1rem); margin-left: -.5rem; padding: .2rem .5rem; border: 1px solid transparent; border-radius: 6px; background: transparent; outline: 0; resize: none; overflow: hidden; }
.docs-edit-ghost:hover { border-color: var(--border); }
.docs-edit-ghost:focus { border-color: var(--accent); background: var(--bg-subtle); }
/* Its own border and background mark focus, as on the description; not the global input ring on top */
.docs-edit-ghost:focus-visible { outline: none; }
.docs-edit-ghost::placeholder { color: var(--text-muted); opacity: .6; }
.docs-edit-title { color: var(--text); font-family: var(--font-heading); font-size: var(--h1-size); font-weight: var(--heading-weight); letter-spacing: -0.02em; line-height: 1.2; margin-bottom: .15rem; }
.docs-edit-desc { color: var(--text-muted); font-size: calc(1.07143rem * var(--text-scale, 1)); line-height: 1.5; min-height: 1.9em; margin-bottom: 1.1rem; }

/* ---- Editing bar, views and column -------------------------------------------------------------
   The bar (.docs-edit-bar: Save/Publish/Cancel, what is unsaved, the views) sticks under the header at
   every width. Text and Settings take turns in .docs-edit-main. From 1400px (.docs-docked, set by
   docsEditPage().setDocked with the same media query) the Text view has a sticky column to its right,
   where the ToC is when reading: the page's files and the settings in short. Below 1400px there is no
   column and Attachments opens as a slide-over. */
.docs-edit-side { display: none; }
.docs-edit-bar { position: sticky; top: var(--header-h, 3.5rem); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin-bottom: 1rem; padding: .55rem 0 0 var(--docs-gutter); background: var(--bg); border-bottom: 1px solid var(--border); }
.docs-edit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; flex: 1 1 auto; padding-bottom: .55rem; }
.docs-edit-draft { flex-basis: 100%; order: 3; padding-bottom: .45rem; }
.docs-edit-tabs { display: flex; align-items: flex-end; align-self: flex-end; gap: 0; order: 2; max-width: 100%; }
.docs-edit-notices { order: 4; flex-basis: 100%; display: grid; gap: .5rem; padding-bottom: .55rem; }
.docs-edit-tool { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .65rem; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: .8125rem; color: var(--text-muted); white-space: nowrap; }
.docs-edit-tool[aria-pressed="true"] { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
@media screen and (hover: hover) { .docs-edit-tool:hover { color: var(--text); } }
/* Changed and not saved: on the bar, the Settings button, and a card's name */
.docs-dirty-dot { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 999px; background: #d97706; }
@media (max-width: 480px) {
  .docs-edit-tabs { flex-basis: 100%; order: 3; }
  .docs-edit-draft { order: 2; }
  .docs-edit-tool { padding-left: .5rem; padding-right: .5rem; }
  .docs-edit-tool:first-child { padding-left: 0; }
}

/* Settings view: a local menu and one card per group. The page scrolls; nothing scrolls inside. */
.docs-set { font-size: .875rem; color: var(--text); }
.docs-set-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.docs-set-nav a { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .65rem; border: 1px solid var(--border); border-radius: 999px; font-size: .75rem; color: var(--text-muted); white-space: nowrap; }
@media screen and (hover: hover) { .docs-set-nav a:hover { color: var(--text); border-color: var(--text-muted); } }
.docs-set-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.docs-set-card { display: flex; flex-direction: column; gap: .8rem; min-width: 0; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); scroll-margin-top: calc(var(--header-h, 3.5rem) + var(--docs-edit-bar-h, 3rem) + 1rem); }
.docs-set-card:focus { outline: none; }
.docs-set-card:focus-visible { border-color: var(--accent); }
.docs-set-card > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .75rem; }
.docs-set-card .docs-settings-heading { display: inline-flex; align-items: center; gap: .45rem; }
.docs-set-help { margin-top: -.45rem; font-size: .75rem; line-height: 1.45; color: var(--text-muted); }
.docs-set-own { padding: 0 .4rem; border-radius: 4px; background: var(--bg-subtle); font-size: .6875rem; color: var(--text-muted); white-space: nowrap; }
.docs-set-checks { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.docs-set-foot { margin-top: 1rem; font-size: .75rem; color: var(--text-muted); }
@media (max-width: 640px) {
  .docs-set-nav { display: none; }
  .docs-set-cards { grid-template-columns: minmax(0, 1fr); }
}
/* The settings in short, under the files in the column beside the text */
.docs-edit-summary { flex: none; margin-top: 1rem; padding: .8rem .9rem; border-radius: 8px; background: var(--bg-subtle); font-size: .8125rem; }
.docs-edit-summary dl { margin: .45rem 0 .5rem; display: grid; gap: .2rem; }
.docs-edit-summary dl > div { display: flex; gap: .4rem; min-width: 0; }
.docs-edit-summary dt { flex: none; color: var(--text-muted); }
.docs-edit-summary dt::after { content: ":"; }
.docs-edit-summary dd { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-edit-summary-link { display: inline-flex; align-items: center; gap: .3rem; color: var(--accent); font-weight: 500; }
@media screen and (hover: hover) { .docs-edit-summary-link:hover { text-decoration: underline; } }
.docs-settings-heading { font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
/* One line per setting: label left, field right */
.docs-settings-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 11rem); align-items: center; gap: .75rem; }
.docs-icon-search:focus-visible, .docs-icon-field input:focus-visible { outline: none; }
.docs-icon-field:focus-within { border-color: var(--accent) !important; }
.docs-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr)); gap: .25rem; }
.docs-icon-cell { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 6px; color: var(--text); }
.docs-icon-cell:hover { background: var(--bg-subtle); }
.docs-icon-cell.is-current { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }

@media (min-width: 1400px) {
  .docs-is-editing .content-col { max-width: calc(var(--content-max) + 3.75rem + 2.5rem + 20rem) !important; }
  .docs-docked { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; column-gap: 2.5rem; align-items: start; }
  .docs-docked .docs-edit-bar { grid-column: 1 / -1; grid-row: 1; }
  .docs-docked .docs-edit-main { grid-column: 1; grid-row: 2; min-width: 0; }
  .docs-docked.docs-view-settings .docs-edit-main { grid-column: 1 / -1; }
  .docs-docked .docs-edit-side { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; min-width: 0; position: sticky; top: calc(var(--header-h, 3.5rem) + var(--docs-edit-bar-h, 3rem) + 1rem); max-height: calc(100vh - var(--header-h, 3.5rem) - var(--docs-edit-bar-h, 3rem) - var(--footer-h, 0px) - 2rem); }
  .docs-docked .docs-edit-files { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  /* The local menu to the left of the cards */
  .docs-docked .docs-set { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); column-gap: 2rem; align-items: start; }
  .docs-docked .docs-set-nav { position: sticky; top: calc(var(--header-h, 3.5rem) + var(--docs-edit-bar-h, 3rem) + 1rem); flex-direction: column; flex-wrap: nowrap; gap: .1rem; margin: 0; }
  .docs-docked .docs-set-nav a { justify-content: space-between; padding: .3rem .6rem; border: 0; border-left: 2px solid var(--border); border-radius: 0; font-size: .8125rem; }
  .docs-docked .docs-set-foot { grid-column: 2; }
  /* The attachments slide-over, laid flat inside the column: no backdrop, no close button, no footer */
  .docs-docked .docs-panel { position: static; z-index: auto; }
  .docs-docked .docs-panel-backdrop, .docs-docked .docs-panel-close, .docs-docked .docs-panel > aside > footer { display: none; }
  .docs-docked .docs-panel > aside { position: static; width: auto; max-width: none; height: auto; box-shadow: none; border: 0 !important; background: transparent !important; animation: none; font-size: .8125rem !important; }
  .docs-docked .docs-panel > aside > header { padding: 0 0 .25rem; border: 0 !important; }
  .docs-docked .docs-panel > aside > div { overflow: visible; }
  .docs-docked .docs-panel .px-5 { padding-left: 0; padding-right: 0; }
  .docs-docked .docs-panel .mx-5 { margin-left: 0; margin-right: 0; }
}
@media screen and (hover: hover) and (min-width: 1400px) { .docs-docked .docs-set-nav a:hover { border-left-color: var(--text-muted); } }

.docs-blocks .ce-block__content, .docs-blocks .ce-toolbar__content { max-width: none; }
.docs-blocks .ce-paragraph { line-height: var(--body-lh); padding: .3em 0; }
/* Editor.js places the toolbar from the first line's position, padding and margin, and counts the
   margin twice. Used on purpose: the toolbar sits a little high on a bold heading, and 2px moved
   from padding to margin lowers it while the text stays. flow-root keeps that margin from
   collapsing out of the block. The space above an h2 is padding for the same reason. */
.docs-blocks .ce-block__content:has(> .ce-header) { display: flow-root; }
.docs-blocks .ce-header { padding: calc(.3em - 2px) 0 .3em; margin: 2px 0 0; }
.docs-blocks h2.ce-header { padding-top: calc(.3em + .75rem - 2px); }
.docs-blocks .ce-block a { color: var(--accent); text-decoration: underline; }
.docs-blocks .inline-code { background: var(--bg-subtle); color: inherit; border: 1px solid var(--border); border-radius: 4px; padding: .1em .3em; font-family: var(--font-code, ui-monospace, monospace); font-size: .875em; }
.docs-blocks .ce-block--selected .ce-block__content { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.docs-blocks ::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); }
.docs-blocks .cdx-block { padding: .3em 0; }
.docs-blocks .cdx-list { margin: 0; padding-left: 0; list-style: none; }
/* .prose gives every ul/ol a block margin; the list tool's nested lists must not get it */
.docs-blocks .cdx-list__item-children { margin: 0; list-style: none; }
.docs-blocks .cdx-list__item { margin: 0; }
.docs-blocks .tc-table { font-size: var(--table-size); }
/* The table's options (docsTableTool) as the page draws them: stripes on the body's even rows, plain with
   faint dashed lines (a table without lines would be hard to edit), the first column's share */
.docs-blocks .docs-ej-table--striped .tc-row:nth-child(odd):not(:first-child) { background: var(--bg-subtle); }
.docs-blocks .docs-ej-table--plain .tc-row, .docs-blocks .docs-ej-table--plain .tc-cell { border-style: dashed; border-color: color-mix(in srgb, var(--border) 60%, transparent); }
.docs-blocks .docs-ej-table--first .tc-row { grid-template-columns: var(--docs-ej-first) repeat(auto-fit, minmax(10px, 1fr)); }
.docs-blocks .tc-wrap { --color-border: var(--border); --color-background: var(--bg-subtle); --color-text-secondary: var(--text-muted); }
.docs-blocks .tc-cell { border-bottom: 0; text-align: left; }
/* The row/column menu opens over the blocks below the table. Those come later in the page and would
   paint on top of it (the table's toolbox only has z-index 1 inside its own block), so the block
   with an open menu is lifted as a whole. Same for a hovered toolbox handle. */
.docs-blocks .ce-block:has(.tc-popover--opened), .docs-blocks .ce-block:has(.tc-toolbox--showed) { position: relative; z-index: 6; }
.docs-blocks .tc-popover { z-index: 7; }
/* ...which must not lift a table over the editor's own menus (block list, block settings): they hang
   from the toolbar, which has no z-index, and a table the pointer passes over showed through them. */
.docs-blocks .ce-toolbar:has(.ce-popover--opened) { z-index: 8; }
/* ...nor over the inline toolbar (link, bold, image): selecting text in a cell puts the pointer over the
   table, its toolbox handle shows, and the lifted table covered the link field, so a click in it landed
   in the cell below and closed the toolbar. */
.docs-blocks .ce-inline-toolbar { z-index: 9; }
.docs-blocks .tc-row:first-child .tc-cell { font-weight: 600; }
.docs-blocks .cdx-input, .docs-blocks .cdx-quote__text, .docs-blocks .cdx-quote__caption { background: transparent; border-color: var(--border); box-shadow: none; color: var(--text); }
.docs-blocks .cdx-quote__text { min-height: 0; border: 0; border-left: 3px solid var(--border); border-radius: 0; padding: .25rem 0 .25rem 1rem; color: var(--text-muted); }
.docs-blocks .cdx-quote__caption { font-size: .8125rem; padding: .3rem .6rem; }
.docs-blocks .ce-delimiter { line-height: 1; height: 1.5rem; }
.docs-blocks .ce-delimiter::before { content: ''; display: block; border-top: 1px solid var(--border); position: relative; top: .75rem; }
.docs-blocks .image-tool__image { border-radius: 0; background: var(--bg-subtle); }
/* Border (docs-border) as on the page: the line and the box corners */
.docs-blocks .docs-ej-image--border .image-tool__image { border-radius: var(--box-radius, 8px); }
.docs-blocks .docs-ej-image--border .image-tool__image-picture { border: 1px solid var(--border); border-radius: var(--box-radius, 8px); }
.docs-blocks .docs-ej-image--shadow .image-tool__image-picture { box-shadow: 0 1px 4px rgb(0 0 0 / .16); }
.dark .docs-blocks .docs-ej-image--shadow .image-tool__image-picture { box-shadow: 0 1px 4px rgb(0 0 0 / .6); }

/* Dragging a block by its handle (docsBlockDrag in js/editing.js) */
.docs-blocks .ce-toolbar__settings-btn { cursor: grab; }
.docs-blocks .ce-toolbar__settings-btn:active { cursor: grabbing; }
.docs-blocks .ce-block.docs-dragging { opacity: .4; }
.docs-blocks .ce-block.docs-drop-before { box-shadow: 0 -2px 0 0 var(--accent); }
.docs-blocks .ce-block.docs-drop-after { box-shadow: 0 2px 0 0 var(--accent); }

/* Own tools (js/editor-tools.js) */
.docs-ej-raw, .docs-ej-code { position: relative; margin: .4rem 0; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-subtle); }
.docs-ej-raw { border-style: dashed; }
.docs-ej-label { position: absolute; top: .3rem; right: .6rem; font-size: .6875rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); pointer-events: none; }
.docs-ej-textarea { display: block; width: 100%; min-height: 2.5rem; resize: none; overflow: hidden; border: 0; outline: 0; background: transparent; color: var(--text); padding: .65rem .85rem; font-family: var(--font-code, ui-monospace, monospace); font-size: .8125rem; line-height: 1.55; tab-size: 2; white-space: pre; overflow-x: auto; }
.docs-ej-raw .docs-ej-textarea { white-space: pre-wrap; padding-right: 5.5rem; }
.docs-ej-lang { position: absolute; top: .3rem; right: .5rem; width: 7rem; text-align: right; border: 0; border-bottom: 1px solid transparent; border-radius: 0; outline: 0; background: transparent; color: var(--text-muted); font-family: var(--font-code, ui-monospace, monospace); font-size: .6875rem; }
.docs-ej-lang:focus, .docs-ej-lang:focus-visible { color: var(--text); outline: none; box-shadow: none; border-bottom-color: var(--accent); }
.docs-ej-code .docs-ej-textarea { padding-top: 1.5rem; }
.docs-ej-embed { position: relative; margin: .4rem 0; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-subtle); }
.docs-ej-embed .docs-ej-textarea { white-space: pre-wrap; word-break: break-all; padding-right: 4.5rem; }
.docs-ej-embed-fields { display: flex; border-top: 1px solid var(--border); }
.docs-ej-embed-fields[hidden], .docs-ej-embed-height[hidden] { display: none; }
.docs-ej-embed-height { width: 6.5rem; border: 0; border-left: 1px solid var(--border); border-radius: 0; outline: 0; background: transparent; color: var(--text); padding: .45rem .6rem; font-size: .8125rem; }
.docs-ej-embed-height:focus, .docs-ej-embed-height:focus-visible { outline: none; box-shadow: none; }
.docs-ej-embed-width, .docs-ej-embed-align { border: 0; border-left: 1px solid var(--border); border-radius: 0; outline: 0; background: transparent; color: var(--text-muted); padding: .45rem .6rem; font-size: .8125rem; cursor: pointer; }
.docs-ej-embed-align[hidden] { display: none; }
.docs-ej-embed-view iframe.is-site { aspect-ratio: auto; height: var(--embed-host-height, 600px); background: #fff; }
.docs-ej-embed-caption { display: block; flex: 1; min-width: 0; border: 0; border-radius: 0; outline: 0; background: transparent; color: var(--text); padding: .45rem .85rem; font-size: .8125rem; }
.docs-ej-embed-caption:focus, .docs-ej-embed-caption:focus-visible { outline: none; box-shadow: none; }
.docs-ej-embed-caption[hidden], .docs-ej-embed-files[hidden] { display: none; }
.docs-ej-embed-view:not(:empty) { padding: .75rem; border-top: 1px solid var(--border); }
.docs-ej-embed-view iframe, .docs-ej-embed-view video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 6px; background: #000; }
.docs-ej-embed-view video { aspect-ratio: auto; }
.docs-ej-embed-view audio { display: block; width: min(30rem, 100%); }
/* An Office file's still (the viewer itself is left to Preview and the page) */
.docs-ej-embed-still { display: block; width: min(100%, 22rem); height: auto; margin-inline: auto; border: 1px solid var(--border); border-radius: 6px; }
.docs-ej-embed-view p, .docs-ej-embed-files p { margin: 0; color: var(--text-muted); font-size: .8125rem; }
.docs-ej-embed-files:not(:empty) { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .6rem .85rem; border-top: 1px solid var(--border); }
.docs-ej-embed-files p { flex-basis: 100%; }
.docs-ej-subpages .docs-ej-label, .docs-ej-sites .docs-ej-label { position: static; padding: .45rem .85rem 0; }
.docs-ej-subpages .docs-ej-embed-fields, .docs-ej-sites .docs-ej-embed-fields { border-top: 0; }
.docs-ej-embed-view .docs-subpages { margin: 0; }
.docs-ej-include .docs-ej-label { position: static; padding: .45rem .85rem 0; }
.docs-ej-include .docs-ej-embed-fields { border-top: 0; align-items: center; }
.docs-ej-include-open { flex: none; padding: .45rem .85rem; font-size: .8125rem; color: var(--accent-text, var(--accent)); text-decoration: underline; }
.docs-ej-include-open[hidden] { display: none; }
.docs-ej-include-view .docs-ej-include-why { margin-bottom: .5rem; }
.docs-ej-include-view .docs-ej-include-why:last-child { margin-bottom: 0; }
.docs-ej-include-text { max-width: none; max-height: 24rem; overflow: auto; padding: .25rem .5rem; border-radius: 4px; background: var(--bg); font-size: .875rem; }
.docs-ej-include-text a { cursor: default; }
.docs-ej-include-text > .docs-include > :first-child { margin-top: 0; }
.docs-ej-include-text > .docs-include > :last-child { margin-bottom: 0; }
/* Picture with points (DocsHotspotsTool): the picture with its numbers as on the page; a click adds a point, a number
   is dragged. A row per point under it: number, title, the way it opens, remove, and the text. */
.docs-ej-hotspots .docs-ej-label { position: static; padding: .45rem .85rem 0; }
.docs-ej-hotspots .docs-ej-embed-fields { border-top: 0; align-items: center; }
.docs-ej-hotspots-fields .docs-ej-box-pick { flex: none; }
.docs-ej-hotspots-stage { padding: .75rem .85rem 0; }
.docs-ej-hotspots-stage[hidden] { display: none; }
.docs-blocks .docs-ej-hotspots-stage .docs-hotspots-frame > img { display: block; max-width: 100%; margin: 0; border: 1px solid var(--border); border-radius: 4px; cursor: crosshair; user-select: none; }
.docs-blocks .docs-ej-hotspot { cursor: grab; touch-action: none; }
.docs-blocks .docs-ej-hotspot:active { cursor: grabbing; }
.docs-blocks .docs-ej-hotspot.is-selected { z-index: 2; box-shadow: 0 0 0 1px rgb(0 0 0 / .65), 0 0 0 4px var(--accent); }
.docs-blocks .docs-ej-hotspots-hint { margin: .4rem .85rem .5rem; color: var(--text-muted); font-size: .8125rem; }
.docs-ej-hotspots-hint:empty { display: none; }
.docs-blocks .docs-ej-hotspots-rows { list-style: none; margin: 0; padding: 0; }
.docs-blocks .docs-ej-hotspots-row { display: grid; margin: 0; padding: 0; grid-template-columns: 2.25rem 1fr; border-top: 1px solid var(--border); }
.docs-ej-hotspots-row.is-selected { background: var(--bg); }
.docs-ej-hotspots-num { grid-row: span 2; display: flex; justify-content: center; padding-top: .55rem; color: var(--text-muted); font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; border-right: 1px solid var(--border); }
.docs-ej-hotspots-fields-row { display: flex; align-items: center; min-width: 0; }
.docs-ej-hotspots-title { font-weight: 600; }
textarea.docs-ej-hotspots-text { grid-column: 2; width: 100%; resize: none; overflow: hidden; border-top: 1px dashed var(--border); line-height: 1.45; }
.docs-ej-embed-view .docs-subpages a { cursor: default; text-decoration: none; }
.docs-ej-embed-view .docs-sites { margin: 0; }
.docs-ej-embed-view .docs-sites a { cursor: default; text-decoration: none; }
.docs-ej-embed-view .docs-sections { margin: 0; }
.docs-ej-embed-view .docs-sections a { cursor: default; text-decoration: none; }
.docs-ej-embed-files button { padding: .2rem .55rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: .8125rem; cursor: pointer; }
/* Buttons block (DocsButtonsTool): a row per button, the group's words under them, the server's buttons below */
.docs-ej-buttons .docs-ej-label { position: static; padding: .45rem .85rem 0; }
.docs-ej-buttons-row { display: flex; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--border); }
.docs-ej-buttons-text { flex: 1 1 9rem; }
.docs-ej-buttons-link { position: relative; flex: 2 1 12rem; min-width: 0; border-left: 1px solid var(--border); }
.docs-ej-buttons-link .docs-ej-embed-caption { width: 100%; }
.docs-ej-link-list--float { position: absolute; z-index: 6; left: 0; right: 0; top: 100%; margin: 0; padding: .25rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }
.docs-ej-buttons-remove { border: 0; border-left: 1px solid var(--border); background: transparent; color: var(--text-muted); padding: .3rem .7rem; font-size: 1rem; line-height: 1; cursor: pointer; }
.docs-ej-buttons-remove[hidden], .docs-ej-buttons-add[hidden] { display: none; }
.docs-ej-buttons-add { flex: 1; border: 0; background: transparent; color: var(--accent); padding: .45rem .85rem; font-size: .8125rem; font-weight: 500; text-align: left; cursor: pointer; }
.docs-ej-embed-view .docs-buttons { margin: 0; }
.docs-blocks .ce-block .docs-buttons a { cursor: default; color: var(--button-text, #fff); text-decoration: none; }
.docs-blocks .ce-block .docs-buttons a.docs-button--secondary { color: var(--button-outline-text, var(--accent)); }
/* Icon field (docsIconField): the icon, its name, and the matching icons while typing */
.docs-ej-icon { position: relative; }
.docs-ej-buttons-row .docs-ej-icon { flex: 1 1 10rem; border-left: 1px solid var(--border); }
.docs-ej-icon-row { display: flex; align-items: center; gap: .4rem; padding: 0 .6rem; }
.docs-ej-icon-preview { flex: none; width: 1rem; height: 1rem; color: var(--text); }
.docs-ej-icon-preview.is-empty { border: 1px dashed var(--border); border-radius: 3px; }
.docs-ej-icon-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); padding: .45rem 0; font-size: .8125rem; }
.docs-ej-icon-input:focus, .docs-ej-icon-input:focus-visible { outline: none; box-shadow: none; }
.docs-ej-icon-only { display: flex; align-items: center; gap: .3rem; font-size: .75rem; color: var(--text-muted); white-space: nowrap; cursor: pointer; }
.docs-ej-icon-only[hidden] { display: none; }
.docs-ej-icon-list { position: absolute; z-index: 6; left: 0; top: 100%; width: 16rem; max-width: 80vw; max-height: 11rem; overflow-y: auto; padding: .3rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }
.docs-ej-icon-list[hidden] { display: none; }
.docs-ej-icon-cell { display: block; width: 1.1rem; height: 1.1rem; }
/* In the link popover the field is a row under the address, its list in the flow of the popover */
.docs-ej-link .docs-ej-icon { margin-top: .35rem; border: 1px solid var(--border); border-radius: 6px; }
.docs-ej-link .docs-ej-icon-list { position: static; width: auto; max-width: none; border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none; }
/* An icon link shows its icon (docsIconLinkMarks sets --docs-icon); "icon only" is dotted, the text stays editable */
.docs-blocks a[data-icon][style]::before { content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; margin-right: .3em; background: currentColor; -webkit-mask: var(--docs-icon) center / contain no-repeat; mask: var(--docs-icon) center / contain no-repeat; }
.docs-blocks a[data-icon-only] { text-decoration: underline dotted; }
.docs-ej-embed-files button:hover { border-color: var(--accent); }
/* Band block (DocsBandTool): the background's swatches, the band in the column, its buttons under it */
.docs-ej-band .docs-ej-label { position: static; flex: 1; padding: .45rem .85rem; }
.docs-ej-band .docs-ej-band-fields { border-top: 0; }
.docs-ej-band-swatches { border-top: 1px solid var(--border); }
.docs-ej-band-swatches button.docs-band--light { background: var(--bg-subtle); }
.docs-ej-band-swatches button.docs-band--dark { background: #111316; }
.docs-ej-band-box { margin: 0; padding: 1.75rem 1.25rem; }
.docs-ej-band-heading { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--h2-size); line-height: 1.25; margin-bottom: .5rem; outline: 0; min-height: 1.25em; }
.docs-ej-band-text { outline: 0; min-height: 1.5em; }
.docs-ej-band [contenteditable][data-placeholder]:empty::before { content: attr(data-placeholder); color: inherit; opacity: .6; }
.docs-ej-band .docs-ej-band-buttons { margin: 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; }
/* Block in block (DocsNestedTool): an inner editor in the block. Its handles stand on the right inside the
   frame (Editor.js's narrow layout); the outer editor's are hidden while the pointer is in an inner one,
   where they would stand at whatever block the outer editor last had. */
.docs-blocks .codex-editor:has(> .codex-editor__redactor .docs-ej-nest-body:hover) > .ce-toolbar { visibility: hidden; }
.docs-ej-nest-body { min-height: 1.5em; }
.docs-ej-nest-editor > .codex-editor__redactor { padding-bottom: 0 !important; }
.docs-ej-nest-editor .ce-block:first-child .ce-paragraph, .docs-ej-nest-editor .ce-block:first-child .cdx-block { padding-top: 0; }
.docs-ej-nest-editor .ce-block:last-child .ce-paragraph, .docs-ej-nest-editor .ce-block:last-child .cdx-block { padding-bottom: 0; }
.docs-ej-nest-failed { margin: 0; white-space: pre-wrap; font-size: .8125rem; }
/* Box block (DocsBoxTool): the icon or picture over the box, the box as the page draws it */
.docs-ej-box { background: var(--bg); }
.docs-ej-box .docs-ej-label { position: static; flex: 1; padding: .45rem .85rem; }
.docs-ej-box .docs-ej-box-fields { border-top: 0; flex-wrap: wrap; }
.docs-ej-box-fields .docs-ej-icon { flex: 0 1 14rem; border-left: 1px solid var(--border); }
.docs-ej-box-pick { border: 0; border-left: 1px solid var(--border); background: transparent; color: var(--accent); padding: .45rem .85rem; font-size: .8125rem; font-weight: 500; cursor: pointer; white-space: nowrap; }
.docs-ej-box-pick:disabled { color: var(--text-muted); cursor: default; }
.docs-ej-box .docs-ej-box-images { display: block; margin: 0; padding: .6rem .85rem; border-top: 1px solid var(--border); }
.docs-ej-box .docs-ej-box-images[hidden] { display: none; }
.docs-ej-box-images p { margin: 0 0 .4rem; color: var(--text-muted); font-size: .8125rem; }
.docs-blocks .docs-ej-box-frame { margin: 0; border: 0; border-top: 1px solid var(--border); border-radius: 0 0 6px 6px; }
.docs-blocks .docs-box-mark[hidden] { display: none; }
.docs-ej-box-icon { display: block; width: 1.35rem; height: 1.35rem; }
.docs-blocks .docs-box-img { display: block; width: auto; max-width: 3rem; max-height: 3rem; margin: 0; border: 0; border-radius: 0; }
/* Internal note block (DocsInternalTool): the note as the page draws it for an editor, the content in the inner editor */
.docs-ej-internal.docs-ej-embed { border: 0; background: transparent; }
.docs-blocks .docs-ej-internal-frame { margin: 0; }
/* Step and collapsible section blocks (DocsStepTool, DocsDetailsTool): the fields over the frame, the frame as the
   page draws it, its title in one line and the content in the inner editor. A section is always open here. */
.docs-ej-nested { background: var(--bg); }
.docs-ej-nested .docs-ej-label { position: static; flex: 1; padding: .45rem .85rem; }
.docs-ej-nested .docs-ej-nested-fields { border-top: 0; flex-wrap: wrap; }
.docs-ej-step-start { width: 4.5rem; }
.docs-ej-step-start[aria-invalid="true"] { box-shadow: inset 0 -2px 0 var(--callout-caution, #dc2626); }
.docs-ej-details-open { display: flex; align-items: center; gap: .35rem; padding: .45rem .6rem; border-left: 1px solid var(--border); color: var(--text-muted); font-size: .8125rem; cursor: pointer; }
.docs-blocks .docs-ej-step-frame, .docs-blocks .docs-ej-details-frame { margin: 0; border: 0; border-top: 1px solid var(--border); border-radius: 0 0 6px 6px; }
.docs-blocks .docs-ej-step-frame .docs-step-label[hidden] { display: none; }
.docs-blocks .docs-ej-step-frame .docs-step-body > .docs-ej-nest-title { display: block; min-height: 0; padding-top: .2rem; margin: 0 0 .5rem; }
.docs-ej-nest-title { outline: 0; min-height: 1.5em; font-weight: 600; }
.docs-ej-nest-title[data-level="2"] { font-size: 1.35em; }
.docs-ej-nest-title[data-level="3"] { font-size: 1.15em; }
.docs-ej-nest-title:empty::before { content: attr(data-placeholder); color: var(--text-muted); font-weight: 400; }
.docs-blocks .docs-ej-details-frame > .docs-details-summary { cursor: text; }
.docs-blocks .docs-ej-details-frame > .docs-details-summary:hover { background: transparent; }
.docs-blocks .docs-ej-details-frame > .docs-details-summary::before { transform: rotate(45deg) translate(-.1rem, -.1rem); }
.docs-blocks .docs-ej-details-frame .docs-details-title { flex: 1; min-width: 0; }
/* Cards block (DocsCardsTool): the words over the cards, each card edited as it looks */
.docs-ej-cards .docs-ej-label { position: static; flex: 1; padding: .45rem .85rem; }
.docs-ej-cards .docs-ej-cards-fields { border-top: 0; border-bottom: 1px solid var(--border); }
.docs-ej-cards .docs-ej-buttons-add { flex: none; }
.docs-ej-cards-view.docs-cards { margin: 0; padding: .85rem; }
.docs-ej-card { gap: .1rem; }
.docs-ej-card-tools { display: flex; align-self: stretch; align-items: center; margin: -.6rem -.6rem .5rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-subtle); }
.docs-ej-card-tools .docs-ej-icon { flex: 1; min-width: 0; }
.docs-ej-card-glyph { display: block; width: 1.35rem; height: 1.35rem; }
.docs-ej-card-title, .docs-ej-card-text { align-self: stretch; outline: 0; min-height: 1.4em; }
.docs-ej-card-text { margin-top: .4rem; }
.docs-ej-card-link { align-self: stretch; margin-top: .75rem; border: 1px solid var(--border); border-radius: 6px; }
.docs-ej-card-link .docs-ej-buttons-link { border-left: 0; border-top: 1px solid var(--border); }
.docs-ej-cards [contenteditable][data-placeholder]:empty::before { content: attr(data-placeholder); color: var(--text-muted); }
/* Centred text block (DocsCenterTool): the size over the text, the text as the page centres it */
.docs-ej-center .docs-ej-label { position: static; flex: 1; padding: .45rem .85rem; }
.docs-ej-center .docs-ej-center-fields { border-top: 0; border-bottom: 1px solid var(--border); }
.docs-ej-center-box { margin: 0 auto; padding: 1rem .85rem; }
.docs-ej-center-heading { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--h2-size); line-height: 1.25; margin-bottom: .5rem; outline: 0; }
.docs-ej-center-text { outline: 0; min-height: 1.5em; }
.docs-ej-center [contenteditable][data-placeholder]:empty::before { content: attr(data-placeholder); color: var(--text-muted); }
.docs-ej-hero { margin: .4rem 0; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-subtle); }
.docs-ej-hero .docs-hero { margin: -1px -1px 0; }
.docs-ej-hero, .docs-ej-hero [contenteditable] { outline: 0; }
.docs-ej-hero [contenteditable] { color: var(--hero-fg); }
.docs-ej-hero [contenteditable]:empty::before { content: attr(data-placeholder); color: inherit; opacity: .6; }
.docs-ej-hero .docs-hero-action[hidden], .docs-ej-hero .docs-hero-bg[hidden], .docs-ej-hero-fields [hidden] { display: none; }
.docs-ej-hero .docs-hero-action a, .docs-edit-header .docs-hero-action a { cursor: default; }
/* The controls belong to the hero being worked on: a page of them is a page of toolbars otherwise */
.docs-ej-hero:not(:focus-within) .docs-ej-hero-swatches, .docs-ej-hero:not(:focus-within) .docs-ej-hero-fields { display: none; }
.docs-ej-hero-swatches { display: flex; flex-wrap: wrap; gap: .35rem; padding: .6rem .75rem; }
.docs-ej-hero-swatches button { width: 1.75rem; height: 1.75rem; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--hero-bg); cursor: pointer; transition: transform var(--motion-hover) ease; }
.docs-ej-hero-swatches button:active { transform: scale(0.94); }
.docs-ej-hero-swatches button[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The same swatches in Page settings, plus "no hero" */
.docs-hero-swatches-panel { padding: 0; }
.docs-hero-swatch-none { background: linear-gradient(to top right, transparent 46%, var(--text-muted) 47%, var(--text-muted) 53%, transparent 54%), var(--bg-subtle) !important; }
.docs-ej-hero-fields { display: flex; flex-wrap: wrap; border-top: 1px solid var(--border); }
.docs-ej-hero-fields select, .docs-ej-hero-fields input, .docs-ej-hero-upload { border: 0; border-right: 1px solid var(--border); border-radius: 0; outline: 0; background: transparent; color: var(--text-muted); padding: .45rem .7rem; font-size: .8125rem; }
.docs-ej-hero-fields select, .docs-ej-hero-upload { cursor: pointer; }
.docs-ej-hero-fields select { max-width: 12rem; }
.docs-ej-hero-fields input { flex: 1; min-width: 10rem; color: var(--text); }
.docs-ej-hero-fields input:last-child { border-right: 0; }
.docs-ej-hero-fields :focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; box-shadow: none; }
.docs-ej-hero-upload:disabled { opacity: .5; cursor: progress; }
.docs-ej-alert { margin: .4rem 0; }
.docs-ej-alert-type { appearance: none; -webkit-appearance: none; border: 0; outline: 0; background: transparent; padding: 0; cursor: pointer; }
.docs-ej-alert-type:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.docs-ej-alert-body { outline: 0; }
.docs-ej-alert-body:empty::before { content: attr(data-placeholder); color: var(--text-muted); }

/* Editor.js menus: its custom properties, pointed at the theme (covers dark mode). */
.docs-blocks .ce-popover, .docs-blocks .ce-inline-toolbar, .docs-blocks .ce-conversion-toolbar, .docs-blocks .tc-popover {
  --color-background: var(--bg); --color-border: var(--border); --color-shadow: rgb(0 0 0 / .18);
  --color-text-primary: var(--text); --color-text-secondary: var(--text-muted);
  --color-background-item-hover: var(--bg-subtle); --color-background-item-focus: color-mix(in srgb, var(--accent) 12%, transparent);
  --color-background-icon: var(--bg-subtle); --color-border-icon: var(--border);
  --color-background-item-confirm: #dc2626; --color-background-item-confirm-hover: #b91c1c;
  --color-background-icon-active: color-mix(in srgb, var(--accent) 15%, transparent); --color-text-icon-active: var(--accent);
  --color-line: var(--border);
  color: var(--text);
}
.docs-blocks .ce-toolbar__plus, .docs-blocks .ce-toolbar__settings-btn { color: var(--text-muted); }
.docs-blocks .ce-toolbar__plus:hover, .docs-blocks .ce-toolbar__settings-btn:hover { background: var(--bg-subtle); color: var(--text); }
.docs-blocks .cdx-search-field { background: var(--bg-subtle); border-color: var(--border); }
.docs-blocks .cdx-search-field__input { color: var(--text); }
/* The field is focused on open: a thin accent border on the wrapper instead of the global focus ring */
.docs-blocks .cdx-search-field__input:focus-visible { outline: none; }
.docs-blocks .cdx-search-field:focus-within { border-color: var(--accent); }
.docs-blocks .ce-inline-tool, .docs-blocks .ce-inline-toolbar__dropdown { color: var(--text); }
.docs-blocks .ce-inline-tool:hover, .docs-blocks .ce-inline-toolbar__dropdown:hover { background: var(--bg-subtle); }
.docs-blocks .ce-inline-tool-input { background: var(--bg-subtle); color: var(--text); border-color: var(--border); }
/* Link tool: the field with suggestions under it (js/editor-tools.js, DocsLinkTool) */
.docs-ej-link { width: 100%; }
.docs-blocks .ce-popover__container:has(.docs-ej-link) { width: 20rem; max-width: 80vw; }
.docs-ej-link .ce-inline-tool-input { width: 100%; box-sizing: border-box; }
.docs-ej-link .ce-inline-tool-input:focus-visible { outline: none; border-color: var(--accent); }
.docs-ej-link-list { max-height: 15rem; overflow-y: auto; margin-top: .25rem; }
.docs-ej-link-list:empty { display: none; }
.docs-ej-link-item { display: block; width: 100%; text-align: left; padding: .3rem .5rem; border: 0; border-radius: 6px; background: transparent; color: var(--text); font-size: .8125rem; line-height: 1.35; cursor: pointer; }
.docs-ej-link-item.is-active { background: var(--bg-subtle); }
.docs-ej-link-label, .docs-ej-link-detail { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-ej-link-detail { color: var(--text-muted); font-size: .75rem; }
/* Image tool in the inline toolbar (DocsInlineImageTool): the page's images to put in place of the
   selected text. An image in running text is drawn as on the page: docsInlineImageMarks() (js/editing.js)
   sets docs-inline-img on one with text on its line, and the rules under "Image widths" apply. */
.docs-ej-inline-image { width: 100%; padding: .25rem .25rem .35rem; }
.docs-blocks .ce-popover__container:has(.docs-ej-inline-image:not([hidden])) { width: 20rem; max-width: 80vw; }
.docs-ej-inline-image p { margin: 0 0 .4rem; color: var(--text-muted); font-size: .8125rem; line-height: 1.35; }
.docs-ej-inline-image .docs-ej-existing-grid button { width: 3.75rem; height: 3rem; }
.docs-ej-inline-image .docs-ej-existing-grid img { object-fit: contain; }

/* The menu of an image in running text (docsInlineImageMenu): opened by a click on the image, under it,
   with a ring around the image. Lives on <body>, over the editor's own menus. */
.docs-ej-img-ring { position: absolute; z-index: 40; pointer-events: none; border: 2px solid var(--accent); border-radius: 6px; }
.docs-ej-img-menu { position: absolute; z-index: 41; width: 20rem; max-width: calc(100vw - 16px); box-sizing: border-box; padding: .6rem; display: flex; flex-direction: column; gap: .5rem; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); font-size: .8125rem; line-height: 1.35; }
.docs-ej-img-menu-row { display: flex; flex-direction: column; gap: .25rem; }
.docs-ej-img-menu-row > span { color: var(--text-muted); font-size: .75rem; }
.docs-ej-img-menu input[type="text"] { width: 100%; box-sizing: border-box; padding: .35rem .5rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; }
.docs-ej-img-menu input[type="text"]:focus-visible { outline: none; border-color: var(--accent); }
.docs-ej-img-menu-sizes { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.docs-ej-img-menu-sizes button { flex: 1 1 auto; padding: .3rem .45rem; border: 0; border-left: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; cursor: pointer; }
.docs-ej-img-menu-sizes button:first-child { border-left: 0; }
.docs-ej-img-menu-sizes button:hover { background: var(--bg-subtle); }
.docs-ej-img-menu-sizes button.is-active { background: color-mix(in srgb, var(--accent) 14%, var(--bg)); color: var(--accent-text); font-weight: 600; }
.docs-ej-img-menu-check { display: flex; align-items: center; gap: .4rem; cursor: pointer; }
.docs-ej-img-menu-checks { display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; }
.docs-ej-img-menu-note { margin: 0; color: var(--text-muted); }
.docs-ej-img-menu-actions { display: flex; gap: .4rem; }
.docs-ej-img-menu-btn { padding: .3rem .6rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; cursor: pointer; }
.docs-ej-img-menu-btn:hover { background: var(--bg-subtle); }
.docs-ej-img-menu-remove { margin-left: auto; }
.docs-ej-img-menu-picker { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.docs-ej-img-menu-picker p { margin: 0; color: var(--text-muted); }
.docs-ej-img-menu-picker .docs-ej-existing-grid { max-height: 9rem; width: 100%; box-sizing: border-box; }
.docs-ej-img-menu-picker .docs-ej-existing-grid button { width: 3.75rem; height: 3rem; }
.docs-ej-img-menu-picker .docs-ej-existing-grid img { width: 100%; height: 100%; object-fit: contain; border: 0; border-radius: 0; }
.docs-blocks img[data-md] { cursor: pointer; }

/* Image block, while empty: the page's own images under the button (docsImageTool) */
/* Button and images are one panel, set apart from the text: a control, not page content */
.docs-blocks .image-tool--empty:has(.docs-ej-existing-grid) { margin: .5rem 0; padding: .75rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-subtle); box-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 6px 16px -6px rgb(0 0 0 / .12); }
.docs-blocks .image-tool--empty:has(.docs-ej-existing-grid) .cdx-button { background: var(--bg); }
.docs-ej-existing { display: none; margin-top: .75rem; }
.image-tool--empty .docs-ej-existing { display: block; }
.docs-ej-existing p { margin: 0 0 .4rem; color: var(--text-muted); font-size: .8125rem; }
.docs-ej-existing-grid { display: flex; flex-wrap: wrap; gap: .5rem; max-height: 11rem; overflow-y: auto; padding: 2px; }
.docs-ej-existing-grid button { width: 5rem; height: 3.75rem; padding: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--bg); cursor: pointer; }
.docs-ej-existing-grid button:hover { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.docs-ej-existing-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* -------------------- File preview (js/site.js) -------------------- */
.docs-file-preview { margin: auto; padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--text); width: min(64rem, 94vw); max-height: 92vh; box-shadow: 0 20px 50px -12px rgb(0 0 0 / .35); overflow: hidden; }
.docs-file-preview[open] { display: flex; flex-direction: column; }
/* The page behind stays put while the preview is open: a modal dialog does not stop the page from
   scrolling, and a document scrolled to its end would hand the rest of the wheel on to it. The
   gutter keeps the page from shifting when its scrollbar goes. */
html:has(.docs-file-preview[open]) { overflow: hidden; scrollbar-gutter: stable; }
.docs-file-preview, .docs-file-preview * { overscroll-behavior: contain; }
.docs-file-preview:focus-visible { outline: none; }
.docs-file-preview-bar [hidden] { display: none; }
/* Overlay and the surface behind the file: Admin → Content — links → File preview (printed by base.html.twig) */
.docs-file-preview::backdrop { background: rgb(15 23 42 / .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.docs-file-preview-bar { display: flex; align-items: center; gap: 1rem; padding: .6rem .9rem; border-bottom: 1px solid var(--border); font-size: .8125rem; }
.docs-file-preview-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.docs-file-preview-bar a { color: var(--accent-text); white-space: nowrap; }
.docs-file-preview-bar a:hover { text-decoration: underline; }
.docs-file-preview-close { border: 0; background: transparent; color: var(--text-muted); font-size: 1.25rem; line-height: 1; padding: .1rem .4rem; border-radius: 6px; cursor: pointer; }
.docs-file-preview-close:hover { background: var(--bg-subtle); color: var(--text); }
.docs-file-preview-count { flex: 1; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.docs-file-preview-count[hidden] { display: block; visibility: hidden; } /* still pushes Download to the right */
/* The stage carries the surface (file_preview_bg): what is shown in the middle, an arrow in a rail on either side */
.docs-file-preview-stage { flex: 1; min-height: 0; display: flex; align-items: stretch; background: #ced4da; }
.dark .docs-file-preview-stage { background: #2b3035; }
.docs-file-preview-body { flex: 1; min-width: 0; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; }
.docs-file-preview-prev, .docs-file-preview-next { flex: none; width: 2.75rem; border: 0; background: transparent; color: rgb(0 0 0 / .55); font-size: 2rem; line-height: 1; cursor: pointer; transition: background var(--motion-panel), color var(--motion-panel); }
.dark .docs-file-preview-prev, .dark .docs-file-preview-next { color: rgb(255 255 255 / .6); }
.docs-file-preview-prev:hover, .docs-file-preview-next:hover { background: rgb(0 0 0 / .08); color: #000; }
.dark .docs-file-preview-prev:hover, .dark .docs-file-preview-next:hover { background: rgb(255 255 255 / .1); color: #fff; }
.docs-file-preview-prev[hidden], .docs-file-preview-next[hidden] { display: none; }
@media (max-width: 640px) { .docs-file-preview-prev, .docs-file-preview-next { width: 2rem; font-size: 1.5rem; } }
.docs-file-preview-body img, .docs-file-preview-body video { max-width: calc(100% - 3rem); max-height: calc(92vh - 6rem); margin: 1.5rem; display: block; border-radius: 8px; box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 12px 32px -10px rgb(0 0 0 / .25); }
.docs-file-preview-body img { background: #fff; cursor: zoom-out; }
.docs-file-preview-body img.docs-file-preview-page { cursor: progress; opacity: .6; margin: 0; }
.docs-file-preview-body audio { margin: 2rem; width: min(30rem, 90%); }
/* A PDF is drawn by the browser's own viewer, which fills the frame and paints its own background
   (white around the pages in Safari, dark in Chromium): it cannot be styled from here */
.docs-file-preview-body iframe { width: 100%; height: calc(92vh - 3rem); border: 0; background: #fff; }
.docs-file-preview-note { margin: 3rem 1.5rem; color: var(--text-muted); font-size: .875rem; }
@media print { .docs-file-preview { display: none !important; } }
.docs-file-preview-body { position: relative; }
/* An Office file (js/site.js, docsOfficeViewer) and a listed host's page fill the dialog. The viewer
   is made in place, hidden under the note (first page, "Loading…") until it has drawn. */
.docs-file-preview-office { align-self: stretch; flex: 1; min-width: 0; height: calc(92vh - 3rem); display: flex; flex-direction: column; }
.docs-file-preview-office.is-loading { visibility: hidden; position: absolute; inset: 0; }
.docs-file-preview-office .docs-office { flex: 1; min-height: 0; height: auto; border: 0; border-radius: 0; }
/* A slide sits on the dialog's own surface (file_preview_bg), like an image */
.docs-file-preview-office .docs-office--pptx { justify-content: center; background: transparent; }
.docs-file-preview-body iframe.docs-file-preview-site { width: 100%; height: calc(92vh - 3rem); }
.docs-file-preview-body iframe.docs-file-preview-player { width: min(100% - 3rem, calc((92vh - 6rem) * 16 / 9)); height: auto; aspect-ratio: 16 / 9; margin: 1.5rem; border-radius: 8px; background: #000; }

/* Embeds (classes/Embeds.php; embed code is a plain <div class="docs-embed"> written by the editor).
   The link under a player is for print, and for a PDF where no frame was put in (narrow screen). */
.docs-embed { position: relative; margin: 1.5rem auto; max-width: 100%; width: var(--embed-w, 100%); }
.docs-embed--left { margin-inline: 0 auto; }
.docs-embed--right { margin-inline: auto 0; }
/* A video does not need the whole column: 90 % unless it gives a width of its own */
.docs-embed--player, .docs-embed--video { width: var(--embed-w, 90%); }
/* What stands for a PDF where it is not framed follows the embed's side */
.docs-embed-page { margin-inline: auto; }
.docs-embed--left .docs-embed-page { margin-inline: 0 auto; }
.docs-embed--right .docs-embed-page { margin-inline: auto 0; }
.docs-embed--pdf:not(.is-framed) .docs-embed-link, .docs-embed--office:not(.is-framed) .docs-embed-link { text-align: center; }
.docs-embed--pdf.docs-embed--left:not(.is-framed) .docs-embed-link, .docs-embed--office.docs-embed--left:not(.is-framed) .docs-embed-link { text-align: left; }
.docs-embed--pdf.docs-embed--right:not(.is-framed) .docs-embed-link, .docs-embed--office.docs-embed--right:not(.is-framed) .docs-embed-link { text-align: right; }
.docs-embed iframe, .docs-embed video { display: block; max-width: 100%; border: 0; border-radius: var(--box-radius, 8px); }
.docs-embed--frame iframe, .docs-embed--video video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.docs-embed--video video { aspect-ratio: auto; }
/* The preview image of a YouTube or Vimeo video, until someone presses play (js/site.js) */
.docs-embed-play { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: var(--box-radius, 8px); overflow: hidden; background: #000; cursor: pointer; }
.docs-embed-play img { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; }
.docs-embed-play-icon { position: absolute; inset: 0; margin: auto; width: 4.25rem; height: 3rem; border-radius: .8rem; background: rgb(0 0 0 / .62); transition: background var(--motion-panel); }
.docs-embed-play-icon::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: .6rem 0 .6rem 1rem; border-color: transparent transparent transparent #fff; transform: translateX(.1rem); }
.docs-embed-play:focus-visible .docs-embed-play-icon { background: var(--accent); }
@media screen and (hover: hover) { .docs-embed-play:hover .docs-embed-play-icon { background: var(--accent); } }
.docs-embed--audio audio { display: block; width: min(30rem, 100%); }
.docs-embed--site iframe { aspect-ratio: auto; height: var(--embed-host-height, 600px); border: 1px solid var(--border); background: #fff; }
.docs-embed--pdf iframe { width: 100%; height: var(--embed-pdf-height, min(85vh, 60rem)); border: 1px solid var(--border); background: #fff; }
.docs-embed-link { display: none; font-size: .8125rem; }
.docs-embed-still { display: none; }
/* The first page of an embedded PDF, where it is not framed: a narrow screen (a tap opens the file
   preview) and print. On a wide screen js/site.js puts the frame in, and the page is not shown. */
.docs-embed-page { position: relative; display: none; width: min(100%, 22rem); margin-bottom: .4rem; }
.docs-embed-page img, .prose .docs-embed-page img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--box-radius-md, 6px); box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 8px 20px -10px rgb(0 0 0 / .25); }
.docs-embed-badge { position: absolute; top: .5rem; left: .5rem; padding: .1rem .4rem; border: 1px solid var(--border); border-radius: 4px; background: #fff; color: #b42318; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; line-height: 1.4; }
/* The badge says what the file is; an Office file's in the colour its program is known by */
.docs-embed-badge--docx { color: #185abd; }
.docs-embed-badge--pptx { color: #c43e1c; }
.docs-embed-badge--xlsx { color: #107c41; }
@media (max-width: 767.98px) { .docs-embed--pdf:not(.is-framed) .docs-embed-page, .docs-embed--office:not(.is-framed) .docs-embed-page { display: block; } }
/* Until an Office file is drawn on a wide screen (js/site.js), its first page stands for it there too */
@media (min-width: 768px) { .docs-embed--office:not(.is-framed) .docs-embed-page { display: block; } }
.docs-embed--pdf .docs-embed-link, .docs-embed--office .docs-embed-link { display: block; }
.docs-embed--pdf.is-framed .docs-embed-link, .docs-embed--office.is-framed .docs-embed-link { margin-top: .4rem; color: var(--text-muted); }
/* Calibri, Calibri Light and Cambria for Office files, where the reader does not have them: Carlito
   and Caladea (fonts/office/, SIL OFL 1.1), drawn the same widths, so lines break where Office breaks
   them. Under the Office names because the Word renderer asks for nothing else (the Excel and
   PowerPoint ones would take Carlito and Caladea by name too). local() first: the originals where
   installed. Nothing is fetched unless something asks for these names: js/site.js loads them
   (docsOfficeFonts) before a viewer draws, since a canvas does not draw again when a font arrives. */
@font-face { font-family: "Calibri"; font-style: normal; font-weight: 400; font-display: block; src: local("Calibri"), url(../fonts/office/carlito-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Calibri"; font-style: normal; font-weight: 400; font-display: block; src: local("Calibri"), url(../fonts/office/carlito-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Calibri"; font-style: italic; font-weight: 400; font-display: block; src: local("Calibri Italic"), local("Calibri-Italic"), url(../fonts/office/carlito-400i-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Calibri"; font-style: italic; font-weight: 400; font-display: block; src: local("Calibri Italic"), local("Calibri-Italic"), url(../fonts/office/carlito-400i-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Calibri"; font-style: normal; font-weight: 700; font-display: block; src: local("Calibri Bold"), local("Calibri-Bold"), url(../fonts/office/carlito-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Calibri"; font-style: normal; font-weight: 700; font-display: block; src: local("Calibri Bold"), local("Calibri-Bold"), url(../fonts/office/carlito-700-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Calibri"; font-style: italic; font-weight: 700; font-display: block; src: local("Calibri Bold Italic"), local("Calibri-BoldItalic"), url(../fonts/office/carlito-700i-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Calibri"; font-style: italic; font-weight: 700; font-display: block; src: local("Calibri Bold Italic"), local("Calibri-BoldItalic"), url(../fonts/office/carlito-700i-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Calibri Light"; font-style: normal; font-weight: 400; font-display: block; src: local("Calibri Light"), local("Calibri-Light"), url(../fonts/office/carlito-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Calibri Light"; font-style: normal; font-weight: 400; font-display: block; src: local("Calibri Light"), local("Calibri-Light"), url(../fonts/office/carlito-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Calibri Light"; font-style: italic; font-weight: 400; font-display: block; src: local("Calibri Light Italic"), local("Calibri-LightItalic"), url(../fonts/office/carlito-400i-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Calibri Light"; font-style: italic; font-weight: 400; font-display: block; src: local("Calibri Light Italic"), local("Calibri-LightItalic"), url(../fonts/office/carlito-400i-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cambria"; font-style: normal; font-weight: 400; font-display: block; src: local("Cambria"), url(../fonts/office/caladea-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cambria"; font-style: normal; font-weight: 400; font-display: block; src: local("Cambria"), url(../fonts/office/caladea-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cambria"; font-style: italic; font-weight: 400; font-display: block; src: local("Cambria Italic"), local("Cambria-Italic"), url(../fonts/office/caladea-400i-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cambria"; font-style: italic; font-weight: 400; font-display: block; src: local("Cambria Italic"), local("Cambria-Italic"), url(../fonts/office/caladea-400i-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cambria"; font-style: normal; font-weight: 700; font-display: block; src: local("Cambria Bold"), local("Cambria-Bold"), url(../fonts/office/caladea-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cambria"; font-style: normal; font-weight: 700; font-display: block; src: local("Cambria Bold"), local("Cambria-Bold"), url(../fonts/office/caladea-700-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cambria"; font-style: italic; font-weight: 700; font-display: block; src: local("Cambria Bold Italic"), local("Cambria-BoldItalic"), url(../fonts/office/caladea-700i-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cambria"; font-style: italic; font-weight: 700; font-display: block; src: local("Cambria Bold Italic"), local("Cambria-BoldItalic"), url(../fonts/office/caladea-700i-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Office files drawn in the page (js/site.js, docsOfficeViewer). Word and Excel are a frame that
   scrolls, Admin's embed_office_height high (a height on the embed wins); PowerPoint is a slide as
   wide as the embed, with arrows under it. A document is paper: light in dark mode too, as a PDF. */
.docs-embed-office.is-loading { min-height: 14rem; border: 1px solid var(--border); border-radius: var(--box-radius, 8px); background: var(--bg-subtle); }
.docs-embed-office.is-loading .docs-office { visibility: hidden; }
.docs-office { position: relative; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--box-radius, 8px); overflow: hidden; background: #fff; color: #212529; color-scheme: light; }
.docs-embed-office { margin-inline: auto; }
.docs-embed--left .docs-embed-office { margin-inline: 0 auto; }
.docs-embed--right .docs-embed-office { margin-inline: auto 0; }
.docs-embed-office:not([style*="height"]) .docs-office--docx, .docs-embed-office:not([style*="height"]) .docs-office--xlsx { height: var(--embed-office-height, min(85vh, 60rem)); }
.docs-embed-office[style*="height"] .docs-office { height: 100%; }
.docs-office--docx { background: #e9ecef; }
.docs-office-slide { position: relative; width: 100%; margin-inline: auto; line-height: 0; }
.docs-office-slide canvas { display: block; max-width: 100%; }
.docs-office-nav { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: .3rem; border-top: 1px solid #dee2e6; background: #f8f9fa; font-size: .8125rem; line-height: 1.4; color: #495057; font-variant-numeric: tabular-nums; }
.docs-office-nav button { border: 0; background: transparent; color: inherit; font-size: 1.25rem; line-height: 1; padding: .1rem .6rem; border-radius: 6px; cursor: pointer; }
.docs-office-nav button:hover { background: #e9ecef; color: #000; }
.docs-file-preview-office .docs-office-nav { flex: none; }
/* Embed mode's button that opens the page (partials/embed.html.twig): the site's button shape (tab Buttons) */
.docs-embed-open-page { border-radius: var(--button-radius, .375rem); }
/* The button that opens an embed in the file preview (js/site.js). On a screen with a mouse it shows
   while the pointer or the focus is on the embed; on a touch screen always. */
.docs-embed-open { position: absolute; top: .5rem; right: .5rem; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid rgb(0 0 0 / .12); border-radius: 6px; background: rgb(255 255 255 / .92); color: #343a40; box-shadow: 0 1px 3px rgb(0 0 0 / .15); cursor: pointer; transition: opacity var(--motion-panel), background var(--motion-panel); }
.docs-embed-open .docs-icon { width: 1rem; height: 1rem; }
.docs-embed-open:hover { background: #fff; color: #000; }
@media screen and (hover: hover) {
  .docs-embed-open { opacity: 0; }
  .docs-embed:hover > .docs-embed-open, .docs-embed:focus-within > .docs-embed-open, .docs-embed-open:focus-visible { opacity: 1; }
}
/* An audio player is one line: the button sits beside it, not over its controls */
.docs-embed--audio { padding-right: 2.75rem; }
.docs-embed--audio .docs-embed-open { top: 50%; transform: translateY(-50%); right: 0; }
/* A chosen width is for a screen with room for it */
@media (max-width: 640px) { .docs-embed { width: 100%; } }

/* Image widths, written as ![alt](image.png?classes=docs-w-50,docs-right): Grav turns the parameter
   into classes, no image transform involved. Fixed steps; the editor's image block sets them. An
   image with a width is centred unless it says docs-left or docs-right; one without a width stays
   where it always was (left) unless it says docs-center or docs-right. */
/* Image heights. A picture of its own in the page's text (not an icon in running text, a size step, a
   box's icon, a hero or an embed's still) is never taller than the preset's Highest image height
   (image_max_height: --docs-img-max, a share of the window's height; 65 is the theme's default), its
   width following. A height step, written as ?classes=docs-h-medium (the image block's Height), is a
   fixed highest height, the same on every page; the lower of the step and the preset's limit applies.
   In print the limit is the same share of an A4 page's text height (about 24 cm). */
:root { --docs-img-cap: calc(var(--docs-img-max, 65) * 1vh); }
@supports (height: 1svh) { :root { --docs-img-cap: calc(var(--docs-img-max, 65) * 1svh); } }
@media print { :root { --docs-img-cap: calc(var(--docs-img-max, 65) * .24cm); } }
.prose img:not(.docs-inline-img, [class*="docs-size-"], .docs-box-img, .docs-hero-figure, .docs-hero-bg, .docs-embed img) {
  max-height: min(var(--docs-img-h, var(--docs-img-cap)), var(--docs-img-cap));
}
.prose img.docs-h-small { --docs-img-h: 12rem; }
.prose img.docs-h-medium { --docs-img-h: 20rem; }
.prose img.docs-h-large { --docs-img-h: 30rem; }
/* A width is a share of the column. The height limits above still apply, with the proportions kept:
   the theme writes the picture's proportions (--docs-ar: width/height, classes/ImageSizes.php) and the
   width is the share or what the height limit allows, whichever is less. Without them (an image on
   another server) the share is a highest width: the picture is never drawn larger than its file. */
.prose img.docs-w-25 { --docs-img-w: 25%; }
.prose img.docs-w-33 { --docs-img-w: 33.333%; }
.prose img.docs-w-50 { --docs-img-w: 50%; }
.prose img.docs-w-66 { --docs-img-w: 66.666%; }
.prose img.docs-w-75 { --docs-img-w: 75%; }
.prose img.docs-w-100 { --docs-img-w: 100%; }
.prose img[class*="docs-w-"] { width: auto; max-width: min(100%, var(--docs-img-w, 100%)); }
@media not (max-width: 640px) {
  .prose img[class*="docs-w-"][style*="--docs-ar"] {
    /* --docs-img-edge: the picture's line on both sides (docs-border, border-box), which does not follow its proportions */
    width: min(var(--docs-img-w, 100%), calc((min(var(--docs-img-h, var(--docs-img-cap)), var(--docs-img-cap)) - var(--docs-img-edge, 0px)) * var(--docs-ar) + var(--docs-img-edge, 0px)));
    max-width: 100%;
  }
}
.prose img[class*="docs-w-"], .prose img.docs-center { display: block; margin-inline: auto; }
.prose img.docs-left { display: block; margin-inline: 0 auto; }
.prose img.docs-right { display: block; margin-inline: auto 0; }
/* A click opens the image in the file preview (js/site.js sets the class while file_preview is on) */
.docs-file-preview-on .prose img:not(a img):not(.docs-blocks img):not(.docs-inline-img):not(.docs-box-img) { cursor: zoom-in; }
@media (max-width: 640px) { .prose img[class*="docs-w-"] { width: auto; max-width: 100%; } }
/* A shadow, written as ?classes=shadow (the image block's Shadow). Kept in print. */
.prose img.shadow { box-shadow: 0 1px 4px rgb(0 0 0 / .16); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.dark .prose img.shadow { box-shadow: 0 1px 4px rgb(0 0 0 / .6); }
/* A line around the picture, written as ?classes=docs-border (Border in the image block's menu and in the
   inline image menu): the preset's line colour and the box corners. None without it. An icon in running text
   (docs-inline-img, below) has none; the size step Icon takes it. */
.prose img.docs-border { border: 1px solid var(--border); border-radius: var(--box-radius, 8px); --docs-img-edge: 2px; }
/* Image sizes, written as ![alt](logo.png?classes=docs-size-small): fixed steps for a picture alone on
   its line, typically in a table cell (the inline image menu in the editor). Icon is as high as a line
   of text, the others a fixed width with the height following; never wider than the column. Classes
   only, no transform. An icon on a line with text keeps the line's height (below). */
.prose img.docs-size-icon { width: auto; height: 1.6em; height: 1lh; }
.prose img.docs-size-small { width: 3rem; height: auto; }
.prose img.docs-size-medium { width: 6rem; height: auto; }
.prose img.docs-size-large { width: 12rem; height: auto; }
/* An icon in running text: an image on a line with text (classes/InlineImages.php) is as high as the
   line, without border, corners or shadow, and the file preview leaves it alone. Width, side and
   shadow do not apply to it. 1lh where the browser has it, else about one line of body text. */
.prose img.docs-inline-img, .prose img.docs-inline-img[class*="docs-w-"], .prose img.docs-inline-img[class*="docs-size-"] {
  display: inline; width: auto; max-width: none; height: 1.6em; height: 1lh; margin: 0;
  border: 0; border-radius: 0; box-shadow: none; vertical-align: top;
}

/* Table options (classes/Tables.php): > [!TABLE striped middle full plain first-25] around a table.
   Stripes are on the even rows, so the first row under the tinted header stays white. The preset's
   Striped tables (table_striped, a class on <body>) stripes every table but a plain one. */
.prose .docs-table { margin: 1.25rem 0; }
.prose .docs-table > table { margin: 0; }
.prose .docs-table--striped > table > tbody > tr:nth-child(even) > *,
.tables-striped .prose table:not(.docs-table--plain > table) > tbody > tr:nth-child(even) > * { background: var(--bg-subtle); }
.prose .docs-table--middle > table :is(th, td) { vertical-align: middle; }
.prose .docs-table--full > table { width: 100%; }
.prose .docs-table--plain > table :is(th, td) { border: 0; }
.prose .docs-table--plain > table th { background: transparent; }
.prose .docs-table--first-15 > table :is(th, td):first-child { width: 15%; }
.prose .docs-table--first-20 > table :is(th, td):first-child { width: 20%; }
.prose .docs-table--first-25 > table :is(th, td):first-child { width: 25%; }
.prose .docs-table--first-33 > table :is(th, td):first-child { width: 33.333%; }
.prose .docs-table--first-40 > table :is(th, td):first-child { width: 40%; }
.prose .docs-table--first-50 > table :is(th, td):first-child { width: 50%; }

@media print {
  /* Paper cannot play: a video is its still (the preview image, or the poster) with its link under it,
     at the width it has on screen; what has no still is the link alone */
  .docs-embed { break-inside: avoid; }
  /* On paper a video is 85 % of the column whatever it is on screen (a third would be a
     stamp, the full width most of a page), on the side it has there. A PDF keeps the width of its
     frame for the link and shows its first page at 45 %. */
  .docs-embed--player, .docs-embed--video { width: 85% !important; }
  .docs-embed--pdf, .docs-embed--office { width: 100% !important; }
  .docs-embed--pdf .docs-embed-link, .docs-embed--office .docs-embed-link { text-align: center; }
  .docs-embed--pdf.docs-embed--left .docs-embed-link, .docs-embed--office.docs-embed--left .docs-embed-link { text-align: left; }
  .docs-embed--pdf.docs-embed--right .docs-embed-link, .docs-embed--office.docs-embed--right .docs-embed-link { text-align: right; }
  .docs-embed-office, .docs-embed-open { display: none !important; }
  .docs-embed iframe, .docs-embed video, .docs-embed audio { display: none !important; }
  .docs-embed-play { cursor: default; background: none; border: 1px solid #ccc; }
  .docs-embed-still { display: block !important; position: relative; border: 1px solid #ccc; border-radius: 8px; overflow: hidden; }
  .docs-embed-still img { display: block; width: 100%; height: auto; border: 0; border-radius: 0; }
  /* The play badge says "this is a video" on paper too. Browsers leave backgrounds out of a print
     unless told otherwise, so the badge is drawn with borders, which always print. */
  .docs-embed-play-icon { width: 0; height: 0; background: none; border-style: solid; border-color: rgb(0 0 0 / .7); border-width: 1.5rem 2.125rem; border-radius: .8rem; }
  .docs-embed-play-icon::after { inset: auto; left: 0; top: 0; margin: 0; transform: translate(-40%, -50%); }
  .docs-embed-page { display: block !important; width: 45%; }
  .docs-embed-page img { box-shadow: none; border-color: #999; }
  .docs-embed-link { display: block !important; margin-top: .3rem; }
}

/* -------------------- Heroes (classes/Hero.php) -------------------- */
/* header.hero above the title (partials/hero.html.twig) and `> [!HERO …]` in the text: one component.
   Colours are Open Color 1.9.1 (MIT, yeun.github.io/open-color); every background gives its text
   4.5:1 or better. The same in light and dark mode: a hero is a picture, not a surface.
   The editor's background picker shows these classes as they are. */
.docs-hero {
  --hero-bg: #1971c2;
  --hero-fg: #fff;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 11rem;
  margin: 1.5rem 0;
  padding: 2rem 2.25rem;
  border-radius: var(--box-radius-lg, 12px);
  background: var(--hero-bg);
  color: var(--hero-fg);
  break-inside: avoid;
  /* Printed as on screen: without this a browser drops backgrounds and the light text is left on white */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
/* Below the floating page actions (base.html.twig), not beside them: overflow:hidden would narrow it to the space left */
.docs-hero--top { margin: 0 0 1.5rem; clear: right; }
.docs-hero--compact { min-height: 0; padding: 1.25rem 1.5rem; }
.docs-hero--tall { min-height: 18rem; }
.docs-hero-body { position: relative; z-index: 2; width: 100%; max-width: 40rem; }
.docs-hero--center { text-align: center; }
.docs-hero--center .docs-hero-body { margin-inline: auto; }
.docs-hero h1, .docs-hero h2, .prose .docs-hero h2, .docs-hero-heading {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: var(--h1-size);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: inherit;
  margin: 0;
}
.docs-hero--compact h1, .docs-hero--compact h2, .prose .docs-hero--compact h2, .docs-hero--compact .docs-hero-heading { font-size: var(--h2-size); }
.docs-hero p, .prose .docs-hero p, .docs-hero-text { margin: .5rem 0 0; font-size: calc(1.07143rem * var(--text-scale, 1)); color: inherit; opacity: .92; }
.docs-hero .docs-hero-action, .prose .docs-hero .docs-hero-action { margin-top: 1.1rem; opacity: 1; }
.prose .docs-hero a { color: inherit; text-decoration: underline; }
.prose .docs-hero .docs-hero-action a, .docs-hero--top .docs-hero-action a, .docs-ej-hero .docs-hero-action a, .docs-hero-panel .docs-hero-action a {
  display: inline-block;
  padding: .45rem .95rem;
  border-radius: var(--button-radius, 8px);
  background: var(--hero-fg);
  color: var(--hero-btn, #212529);
  font-weight: 600;
  font-size: .875rem;
  text-decoration: none;
  transition: transform var(--motion-hover) ease, opacity var(--motion-hover) ease;
}
.prose .docs-hero .docs-hero-action a:active, .docs-hero--top .docs-hero-action a:active, .docs-hero-panel .docs-hero-action a:active { transform: scale(0.97); }
@media screen and (hover: hover) { .prose .docs-hero .docs-hero-action a:hover, .docs-hero--top .docs-hero-action a:hover, .docs-hero-panel .docs-hero-action a:hover { opacity: .9; } }

/* An image of the page's own as background, under a tone that keeps the text readable. The image is
   painted as a CSS background (--hero-image, set inline): Safari leaves an absolutely placed <img> out
   of a printed PDF but prints a background. The <img> is only there for the Word export. */
.docs-hero .docs-hero-bg, .prose .docs-hero .docs-hero-bg { display: none; }
.docs-hero--image { background: var(--hero-image) center / cover no-repeat, var(--hero-bg); }
.docs-hero--image::before { content: ""; position: absolute; inset: 0; z-index: 1; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.docs-hero--overlay-dark { --hero-fg: #fff; --hero-btn: #212529; }
.docs-hero--overlay-dark::before { background: linear-gradient(90deg, rgba(0,0,0,.68), rgba(0,0,0,.4)); }
.docs-hero--overlay-dark.docs-hero--center::before { background: rgba(0,0,0,.55); }
.docs-hero--overlay-light.docs-hero--image { --hero-fg: #212529; --hero-btn: #fff; }
.docs-hero--overlay-light::before { background: rgba(255,255,255,.72); }

/* Plain colours */
.docs-hero--gray { --hero-bg: #f1f3f5; --hero-fg: #212529; --hero-btn: #fff; }
.docs-hero--blue { --hero-bg: #d0ebff; --hero-fg: #212529; --hero-btn: #fff; }
.docs-hero--teal { --hero-bg: #c3fae8; --hero-fg: #212529; --hero-btn: #fff; }
.docs-hero--yellow { --hero-bg: #fff3bf; --hero-fg: #212529; --hero-btn: #fff; }
.docs-hero--pink { --hero-bg: #ffdeeb; --hero-fg: #212529; --hero-btn: #fff; }
.docs-hero--ink { --hero-bg: #212529; }
.docs-hero--indigo { --hero-bg: #3b5bdb; }
/* Gradients, light text */
.docs-hero--ocean { --hero-bg: linear-gradient(135deg, #1971c2, #0b7285); }
.docs-hero--twilight { --hero-bg: linear-gradient(135deg, #3b5bdb, #862e9c); }
.docs-hero--berry { --hero-bg: linear-gradient(135deg, #c2255c, #5f3dc4); }
.docs-hero--ember { --hero-bg: linear-gradient(135deg, #e03131, #a61e4d); }
.docs-hero--forest { --hero-bg: linear-gradient(135deg, #087f5b, #0b7285); }
.docs-hero--night { --hero-bg: linear-gradient(135deg, #212529, #364fc7); }
/* Gradients, dark text */
.docs-hero--dawn { --hero-bg: linear-gradient(135deg, #fff3bf, #fcc2d7); --hero-fg: #212529; --hero-btn: #fff; }
.docs-hero--mist { --hero-bg: linear-gradient(135deg, #d0ebff, #f3d9fa); --hero-fg: #212529; --hero-btn: #fff; }
.docs-hero--mint { --hero-bg: linear-gradient(135deg, #c3fae8, #e9fac8); --hero-fg: #212529; --hero-btn: #fff; }
/* An image's tone decides the text colour, whatever the style underneath says */
.docs-hero--image.docs-hero--overlay-dark { --hero-fg: #fff; --hero-btn: #212529; }
.docs-hero--image.docs-hero--overlay-none { --hero-fg: #fff; --hero-btn: #212529; }
/* A colour of one's own (--hero-bg inline); the text after its lightness */
.docs-hero--on-light { --hero-fg: #212529; --hero-btn: #fff; }
.docs-hero--on-dark { --hero-fg: #fff; --hero-btn: #212529; }
.docs-ej-hero-color { width: 1.75rem; height: 1.75rem; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: transparent; cursor: pointer; }
.docs-ej-hero-color::-webkit-color-swatch-wrapper { padding: 2px; }
.docs-ej-hero-color::-webkit-color-swatch { border: 0; border-radius: 4px; }
.docs-ej-hero-swatches .docs-ej-hero-color[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The button: light on a dark hero and the reverse unless a colour is chosen */
.docs-hero--button-light .docs-hero-action a { --hero-fg: #fff; --hero-btn: #212529; }
.docs-hero--button-dark .docs-hero-action a { --hero-fg: #212529; --hero-btn: #fff; }
.prose .docs-hero--button-accent .docs-hero-action a, .docs-hero--top.docs-hero--button-accent .docs-hero-action a, .docs-ej-hero .docs-hero--button-accent .docs-hero-action a, .docs-hero-panel.docs-hero--button-accent .docs-hero-action a { background: var(--button-bg, var(--accent)); color: var(--button-text, #fff); }
.prose .docs-hero--button-outline .docs-hero-action a, .docs-hero--top.docs-hero--button-outline .docs-hero-action a, .docs-ej-hero .docs-hero--button-outline .docs-hero-action a, .docs-hero-panel.docs-hero--button-outline .docs-hero-action a { background: transparent; color: var(--hero-fg); border: 1.5px solid currentColor; }
.prose .docs-hero--button-large .docs-hero-action a, .docs-hero--top.docs-hero--button-large .docs-hero-action a, .docs-ej-hero .docs-hero--button-large .docs-hero-action a, .docs-hero-panel.docs-hero--button-large .docs-hero-action a { padding: .7rem 1.4rem; font-size: 1rem; border-radius: calc(var(--button-radius, 8px) * 1.25); }
/* The top hero's second button (header.hero.button2, partials/hero-actions.html.twig): an outline in the hero's
   own text colour beside the first, whatever colour the first has. --hero-line is that colour taken on the
   paragraph, before a button colour above changes --hero-fg on the links. Two buttons share a row that wraps.
   Its contrast is the hero text's. */
.docs-hero-action { --hero-line: var(--hero-fg); }
.docs-hero-action--two { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.docs-hero--center .docs-hero-action--two { justify-content: center; }
.docs-hero.docs-hero--top .docs-hero-action a.docs-hero-second, .docs-edit-header .docs-hero .docs-hero-action a.docs-hero-second, .docs-hero-panelled .docs-hero-panel .docs-hero-action a.docs-hero-second {
  background: transparent;
  color: var(--hero-line);
  /* A line inside the box rather than a border: the same size as the first button */
  box-shadow: inset 0 0 0 1.5px currentColor;
}
/* The top hero with its image under the text (header.hero.layout: image-below): text and buttons above, the
   image below on the hero's background, as large as the hero allows. No tone: the text is on the background. */
.docs-hero--image-below { flex-direction: column; align-items: stretch; }
.docs-hero-figure { position: relative; z-index: 2; display: block; width: auto; max-width: 100%; height: auto; max-height: 36rem; margin-top: 2rem; border-radius: var(--box-radius, 8px); }
.docs-hero--center .docs-hero-figure { margin-inline: auto; }
.docs-hero--full .docs-hero-figure { max-height: 42rem; }
.docs-hero--compact .docs-hero-figure { max-height: 22rem; margin-top: 1.25rem; }
.docs-edit-header .docs-hero-figure { max-height: 16rem; }
/* A chosen text colour beats what the background or the tone says */
.docs-hero.docs-hero--light-text { --hero-fg: #fff; --hero-btn: #212529; }
.docs-hero.docs-hero--dark-text { --hero-fg: #212529; --hero-btn: #fff; }
@media (max-width: 640px) { .docs-hero { padding: 1.5rem 1.25rem; min-height: 9rem; } .docs-hero--tall { min-height: 13rem; } }
/* A top hero over the window's width (header.hero.width: full; base.html.twig, block hero_full): edge to edge
   right under the header, above the sidebar and the content, which start below it. The wrapper takes the
   header's room from the row. While editing, the header is edited in the column (edit-panel.html.twig). */
.docs-hero-full-wrap { padding-top: var(--header-h); }
.docs-hero-full-wrap + .site-row { padding-top: 0; }
.docs-hero--full { margin: 0; border-radius: 0; min-height: 20rem; padding: 3rem clamp(1.25rem, 6vw, 5rem); }
.docs-hero--full.docs-hero--compact { min-height: 0; padding-block: 2rem; }
.docs-hero--full.docs-hero--tall { min-height: 30rem; }
.docs-hero--full .docs-hero-body { max-width: 46rem; }
.docs-is-editing .docs-hero-full-wrap > .docs-hero, .docs-is-editing .docs-hero-full-wrap > .docs-hero-panelled { display: none; }
@media (max-width: 640px) {
  .docs-hero--full { min-height: 15rem; padding: 2rem 1.25rem; }
  .docs-hero--full.docs-hero--tall { min-height: 22rem; }
}
/* The top hero with its text in a panel over the picture (header.hero.layout: panel; partials/hero.html.twig): the
   hero is only the picture, without a tone, and the panel is a surface in the page's own background (--bg-main) with
   the page's text colours, so its contrast is the page's, in light and dark mode. It reaches up over the picture's
   bottom edge and holds the breadcrumbs, title, description and buttons, centred. The first button by default in
   the text colour, the second an outline in it. */
.docs-hero-panelled { margin: 0 0 1.5rem; clear: right; }
.docs-hero-panelled > .docs-hero { margin: 0; min-height: 16rem; }
.docs-hero-panelled > .docs-hero--compact { min-height: 10rem; }
.docs-hero-panelled > .docs-hero--tall { min-height: 24rem; }
.docs-hero-panelled > .docs-hero::before { content: none; }
.docs-hero-panel {
  --hero-fg: var(--text);
  --hero-btn: var(--bg-main);
  position: relative;
  z-index: 1;
  width: calc(100% - 3rem);
  max-width: 52rem;
  margin: -4rem auto 0;
  padding: 1.5rem 2rem 1.75rem;
  border-radius: var(--box-radius-lg, 12px);
  background: var(--bg-main);
  color: var(--text);
  text-align: center;
}
.docs-hero-panel .breadcrumbs { justify-content: center; margin-bottom: .75rem; }
.docs-hero-panel h1 { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--h1-size); letter-spacing: -0.02em; line-height: 1.2; color: var(--text); margin: 0; }
.docs-hero-panel p { margin: .5rem 0 0; font-size: calc(1.07143rem * var(--text-scale, 1)); color: var(--text-muted); }
.docs-hero-panel .docs-hero-action { margin-top: 1.1rem; }
.docs-hero-panel .docs-hero-action--two { justify-content: center; }
.docs-hero-panel .docs-page-lock { color: inherit; opacity: .75; }
.docs-hero-panel .docs-page-lock.is-inherited { opacity: .45; }
.docs-hero-panelled--full { margin: 0; }
.docs-hero-panelled--full > .docs-hero { min-height: 22rem; }
.docs-hero-panelled--full > .docs-hero--compact { min-height: 14rem; }
.docs-hero-panelled--full > .docs-hero--tall { min-height: 32rem; }
.docs-hero-panelled--full .docs-hero-panel { width: calc(100% - 2 * clamp(1.25rem, 6vw, 5rem)); max-width: 56rem; margin-top: -6rem; padding: 2rem 2.5rem 2.25rem; }
@media (max-width: 640px) {
  .docs-hero-panelled > .docs-hero, .docs-hero-panelled--full > .docs-hero { min-height: 11rem; }
  .docs-hero-panelled > .docs-hero--compact, .docs-hero-panelled--full > .docs-hero--compact { min-height: 7rem; }
  .docs-hero-panelled > .docs-hero--tall, .docs-hero-panelled--full > .docs-hero--tall { min-height: 15rem; }
  .docs-hero-panel, .docs-hero-panelled--full .docs-hero-panel { width: calc(100% - 2rem); margin-top: -2.5rem; padding: 1.25rem 1.25rem 1.5rem; }
}
/* While editing, the header is edited in the column (edit-panel.html.twig): the panel as a surface at the bottom of the hero */
.docs-edit-header .docs-hero--panel-edit { flex-direction: column; justify-content: flex-end; min-height: 14rem; padding-bottom: 0; }
.docs-edit-header .docs-hero--panel-edit::before { content: none; }
.docs-edit-header--hero .docs-hero--panel-edit .docs-hero-body { --hero-fg: var(--text); --hero-btn: var(--bg-main); max-width: calc(100% - 3rem); margin: 5rem auto 0; padding: 1.25rem 1.5rem; border-radius: var(--box-radius-lg, 12px) var(--box-radius-lg, 12px) 0 0; background: var(--bg-main); color: var(--text); text-align: center; }
.docs-edit-header .docs-hero--panel-edit .docs-edit-desc { color: var(--text-muted); }
.docs-edit-header .docs-hero--panel-edit .docs-edit-ghost { text-align: center; }
.docs-edit-header .docs-hero--panel-edit .docs-hero-action--two { justify-content: center; }
@media print {
  .docs-hero { min-height: 0; padding: 1.25rem 1.5rem; }
  .docs-hero-panelled > .docs-hero, .docs-hero-panelled--full > .docs-hero { min-height: 9rem; }
  .docs-hero-panel, .docs-hero-panelled--full .docs-hero-panel { margin-top: -2rem; padding: 1rem 1.25rem; }
  .docs-hero-panelled--full { margin-bottom: 1rem; }
  .docs-hero-full-wrap { padding-top: 0; }
  .docs-hero--full, .docs-hero--full.docs-hero--compact { min-height: 0; padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
  .docs-hero--full.docs-hero--tall { min-height: 9rem; }
  .docs-hero--tall { min-height: 9rem; }
  /* Safari prints a gradient with alpha as opaque, which would hide the image: a flat tone instead */
  .docs-hero--overlay-dark::before { background: rgba(0,0,0,.5); }
  .docs-hero-figure, .docs-hero--full .docs-hero-figure { max-height: 9cm; margin-top: 1rem; }
}

/* -------------------- Subpages (> [!SUBPAGES], classes/Subpages.php) -------------------- */
.docs-subpages { margin: 1.25rem 0; padding: .85rem 1.1rem; border: 1px solid var(--border); border-radius: var(--box-radius, 8px); }
.prose .docs-subpages-title { margin: 0 0 .45rem; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.prose .docs-subpages ul { list-style: none; margin: 0; padding: 0; }
.prose .docs-subpages ul ul { margin: .15rem 0 .3rem .3rem; padding-left: .85rem; border-left: 1px solid var(--border); }
.prose .docs-subpages li { margin: .2rem 0; }
.docs-subpages > ul > li > a, .docs-subpages > ul > li > .docs-subpages-group { font-weight: 500; }
.docs-subpages-group { color: var(--text); }
.prose .docs-subpages-desc { margin: 0 0 .3rem; font-size: .92em; line-height: 1.5; color: var(--text-muted); }
@media print { .docs-subpages { padding: 0; border: 0; } }

/* -------------------- Sites (> [!SITES], classes/SiteList.php) -------------------- */
/* The installation's documentations as cards, grouped by common tag like the site switcher */
.docs-sites { margin: 1.25rem 0; }
.prose .docs-sites-title { margin: 0 0 .6rem; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.prose .docs-sites-group { margin: 1rem 0 .45rem; font-size: .8125rem; font-weight: 600; color: var(--text); }
.prose .docs-sites-title + .docs-sites-group { margin-top: .2rem; }
.prose .docs-sites ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.prose .docs-sites li { position: relative; margin: 0; padding: .75rem .95rem; border: 1px solid var(--border); border-radius: var(--box-radius, 8px); transition: border-color var(--motion-hover) ease; }
/* The whole card is clickable (the link is stretched over it) and shows it like the home cards; the current site has only the badge */
.docs-sites li > a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
@media screen and (hover: hover) {
  .prose .docs-sites li:has(> a):hover { border-color: var(--text-muted); }
}
.docs-sites li > a, .docs-sites-here { font-weight: 500; }
.docs-sites-here { color: var(--text); }
.docs-sites-badge { margin-left: .3rem; padding: .05rem .4rem; border-radius: 9999px; font-size: .7rem; font-weight: 500; vertical-align: .1em; background: var(--accent-soft); color: var(--text); }
.prose .docs-sites-desc { margin: .25rem 0 0; font-size: .92em; line-height: 1.5; color: var(--text-muted); }
.prose .docs-sites-editors { margin: .35rem 0 0; font-size: .8125rem; color: var(--text-muted); }
@media print { .prose .docs-sites ul { display: block; } .prose .docs-sites li { padding: 0; border: 0; margin: .3rem 0; } }

/* -------------------- Buttons and icon links (> [!BUTTONS …], classes/Buttons.php) -------------------- */
/* The same expression as the hero's button: primary is the accent with white text, secondary an outline.
   Shape and colours from the tab Buttons (base.html.twig prints --button-*, only what differs from the theme) */
.docs-buttons { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.5rem 0; break-inside: avoid; }
.docs-buttons--center { justify-content: center; }
.prose .docs-button, .prose .docs-button:hover {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .95rem;
  border: 1.5px solid var(--button-bg, var(--accent));
  border-radius: var(--button-radius, 8px);
  background: var(--button-bg, var(--accent));
  color: var(--button-text, #fff);
  font-weight: 600;
  font-size: .875rem;
  line-height: 1.4;
  text-decoration: none;
  transition: transform var(--motion-hover) ease, opacity var(--motion-hover) ease;
}
.prose .docs-button--secondary, .prose .docs-button--secondary:hover { background: transparent; border-color: var(--button-outline, var(--accent)); color: var(--button-outline-text, var(--accent-text)); }
.prose .docs-buttons--large .docs-button { padding: .7rem 1.4rem; font-size: 1rem; border-radius: calc(var(--button-radius, 8px) * 1.25); }
.docs-button-icon { width: 1.15em; height: 1.15em; flex: none; }
.prose .docs-button:active { transform: scale(0.97); }
@media screen and (hover: hover) { .prose .docs-button:hover { opacity: .88; } }
/* An icon link stays an inline link; the icon sits on the text's baseline before it */
.docs-icon-link-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; margin-right: .3em; }
.docs-icon-link--only .docs-icon-link-icon { margin-right: 0; vertical-align: -.2em; }
.docs-icon-link--only .docs-icon-link-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media print {
  /* Buttons print as outlines, whatever the variant; the icon is inline SVG and prints with the text */
  .prose .docs-button, .prose .docs-button--secondary { background: transparent !important; color: #000 !important; border-color: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* -------------------- Bands (> [!BAND], classes/Band.php) -------------------- */
/* A section with a background of its own. The backgrounds are the heroes' (.docs-hero--<style>, a site hero's
   --hero-bg inline, its image and tone), which give the text 4.5:1 or better and look the same in light and
   dark mode, and two tones of the band's own: light, the page's subdued surface with the page's text (it
   follows the mode), and dark. The colours are read from the hero variables; the hero's own box is not used.
   On screen the band reaches out over the content area (partials/band-bleed.html.twig sets --band-l and
   --band-r and the class docs-band--bleed) and its content keeps to the text column. */
.docs-band {
  position: relative;
  isolation: isolate;
  margin: 2.5rem 0;
  padding: 2.5rem 1.5rem;
  background: var(--hero-bg, var(--bg-subtle));
  color: var(--hero-fg, #fff);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.docs-band.docs-hero--image { background: var(--hero-image) center / cover no-repeat, var(--hero-bg); }
.docs-band--light { --hero-bg: var(--bg-subtle); --hero-fg: var(--text); }
.docs-band--dark { --hero-bg: #111316; --hero-fg: #fff; }
/* On a dark page the dark band is a step lighter than the page, white text still far above 4.5:1 */
.dark .docs-band--dark { --hero-bg: #1f2125; }
.docs-band--bleed { margin-left: calc(-1 * var(--band-l, 0px)); margin-right: calc(-1 * var(--band-r, 0px)); padding-left: var(--band-l, 0px); padding-right: var(--band-r, 0px); }
main:has(.docs-band--bleed) { overflow-x: clip; }
.docs-band-body { position: relative; z-index: 2; }
.docs-band-body > :first-child { margin-top: 0; }
.docs-band-body > :last-child { margin-bottom: 0; }
.docs-band--center { text-align: center; }
.docs-band--center .docs-buttons { justify-content: center; }
.prose .docs-band :is(h1, h2, h3, h4, h5, h6, p, li, strong, em, blockquote) { color: inherit; }
.prose .docs-band-body > p a:not(.docs-button), .prose .docs-band-body > ul a, .prose .docs-band-body > ol a, .prose .docs-band .docs-center a:not(.docs-button), .prose .docs-band .docs-cards--plain a { color: inherit; text-decoration: underline; }
/* An outline button takes the band's text colour (its own colours are made for the page), as a hero's outline does */
.prose .docs-band:not(.docs-band--light) .docs-button--secondary, .prose .docs-band:not(.docs-band--light) .docs-button--secondary:hover { color: inherit; border-color: currentColor; }
/* Plain cards on a coloured band: the plate in the band's text colour */
.docs-band:not(.docs-band--light) .docs-cards--plain .docs-card-icon { background: color-mix(in srgb, currentColor 16%, transparent); color: inherit; }
.docs-band .docs-cards { margin: 1.5rem 0; }
@media (max-width: 640px) { .docs-band { padding-top: 2rem; padding-bottom: 2rem; } }
@media print {
  .docs-band, .docs-band--bleed { margin: 1.25rem 0; padding: 1.25rem 1.5rem; }
  .docs-hero--overlay-dark.docs-band::before { background: rgba(0,0,0,.5); }
}

/* -------------------- Cards (> [!CARDS], classes/Cards.php) -------------------- */
/* A row of cards: two to four across, one on a narrow column. The columns follow the width the cards
   have (a container query), not the window: the text column is narrower with the sidebar shown.
   A card has the page's surface and text, so it reads as the page does in light and dark mode, in a
   band too. `plain` drops the border and the surface and takes the colours around it. */
.docs-cards { container-type: inline-size; margin: 2rem 0; }
.docs-cards-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 32rem) {
  .docs-cards--cols-2 > .docs-cards-grid, .docs-cards--cols-3 > .docs-cards-grid, .docs-cards--cols-4 > .docs-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 40rem) { .docs-cards--cols-3 > .docs-cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 48rem) { .docs-cards--cols-4 > .docs-cards-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.docs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--box-radius-lg, 12px);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  transition: border-color var(--motion-hover) ease;
  break-inside: avoid;
}
.prose .docs-card p { margin: .4rem 0 0; }
.prose .docs-card-title, .docs-card-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: var(--h3-size);
  line-height: 1.3;
  color: inherit;
}
.docs-card-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.75rem; height: 2.75rem; margin-bottom: .85rem;
  border-radius: 9999px;
  background: var(--accent-soft);
  color: var(--accent-text);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.docs-card-icon[hidden] { display: none; }
.docs-card-icon > svg { width: 1.35rem; height: 1.35rem; }
.prose .docs-card .docs-card-link { margin: auto 0 0; padding-top: .85rem; font-weight: 500; }
/* A card with a link is clickable as a whole (the link is stretched over it); other links in it stay on top */
.docs-card--linked .docs-card-link a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.docs-card a:not(.docs-card-link a) { position: relative; z-index: 1; }
@media screen and (hover: hover) { .docs-card--linked:hover { border-color: var(--text-muted); } }
.docs-cards--center .docs-card { align-items: center; text-align: center; }
.docs-cards--plain .docs-card, .docs-cards--plain .docs-card--linked:hover { border-color: transparent; background: transparent; color: inherit; }
.docs-cards--plain .docs-card { padding: .25rem; }
@media print { .docs-cards { margin: 1.25rem 0; } .prose .docs-card .docs-card-link a::after { content: none; } }

/* -------------------- Centred text (> [!CENTER], classes/Center.php) -------------------- */
/* A paragraph or a group of them, centred in a narrower measure; `large` is an intro text. The text keeps
   the page's colours, so it reads as well as the rest of the page in light and dark mode. */
.docs-center { max-width: 40rem; margin: 2rem auto; text-align: center; }
.docs-center > :first-child { margin-top: 0; }
.docs-center > :last-child { margin-bottom: 0; }
.docs-center--large { font-size: 1.25em; line-height: 1.55; }
.docs-center .docs-buttons { justify-content: center; }
@media print { .docs-center { margin: 1.25rem auto; } }

/* -------------------- Boxes (> [!BOX], classes/Box.php) -------------------- */
/* Free content in a neutral frame: the page's subdued surface with the body text on it (a pair the preset's
   contrast check always tries), an icon or a picture beside it. No colour of its own, unlike the callouts. */
.docs-box {
  display: flex; align-items: flex-start; gap: .85rem;
  margin: 1.25rem 0; padding: .75rem 1rem;
  border: 1px solid var(--border); border-radius: var(--box-radius-md, 6px);
  background: var(--bg-subtle); color: var(--text);
  font-size: var(--callout-size);
  break-inside: avoid;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.docs-box-body { flex: 1 1 auto; min-width: 0; }
.docs-box-body > :first-child { margin-top: 0; }
.docs-box-body > :last-child { margin-bottom: 0; }
.docs-box-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; padding-top: .1rem; }
.docs-box-icon > svg { width: 1.35rem; height: 1.35rem; }
.prose .docs-box-img { display: block; width: auto; max-width: 3rem; max-height: 3rem; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.prose .docs-box .docs-box { background: var(--bg); }
@media print { .docs-box { margin: 1rem 0; } }

/* -------------------- Steps (> [!STEP], classes/Step.php) -------------------- */
/* Free content in a frame on the page's own surface, a letter or a number beside it. The label is the theme's
   button pair (button_bg with button_text), which the preset's contrast check always tries: AA in both modes.
   The title (bold text or a heading) stands level with the label. A long step may break over pages in print;
   its title stays with what follows. */
.docs-step {
  --step-label: 1.875rem;
  display: flex; align-items: flex-start; gap: .9rem;
  margin: 1.25rem 0; padding: .85rem 1rem;
  border: 1px solid var(--border); border-radius: var(--box-radius-md, 6px);
  background: var(--bg); color: var(--text);
}
.docs-step-label {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--step-label); height: var(--step-label); padding: 0 .5rem; border-radius: 999px;
  background: var(--button-bg, var(--accent)); color: var(--button-text, #fff);
  font-weight: 700; font-size: .9375rem; line-height: 1; font-variant-numeric: tabular-nums;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.docs-step-body { flex: 1 1 auto; min-width: 0; }
.docs-step-body > :first-child { margin-top: 0; }
.docs-step-body > :last-child { margin-bottom: 0; }
/* Level with the label: the title's first line is centred on it */
.docs-step:not(.docs-step--plain) .docs-step-body > .docs-step-title { min-height: var(--step-label); display: flex; align-items: center; }
.docs-step:not(.docs-step--plain) .docs-step-body > .docs-step-title:only-child { margin-bottom: 0; }
.prose .docs-step .docs-step { background: var(--bg-subtle); }
.prose .docs-box .docs-step { background: var(--bg); }
@media print {
  .docs-step { margin: 1rem 0; break-inside: auto; }
  .docs-step-title { break-after: avoid; }
}

/* -------------------- Collapsible sections (> [!DETAILS], classes/Details.php) -------------------- */
/* <details> in a frame on the page's surface, the title as the summary with a chevron. Sections right after one
   another stand together as an accordion: shared borders, rounded only at the ends. Print always shows the
   content (::details-content where the browser has it, and js/site.js opens them before printing). */
.docs-details {
  margin: 1.25rem 0;
  border: 1px solid var(--border); border-radius: var(--box-radius-md, 6px);
  background: var(--bg); color: var(--text);
}
.docs-details + .docs-details { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; }
.docs-details:has(+ .docs-details) { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.docs-details-summary {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem 1rem; cursor: pointer; list-style: none;
  font-weight: 600; border-radius: inherit;
}
.docs-details-summary::-webkit-details-marker { display: none; }
.docs-details-summary::before {
  content: ''; flex: none; width: .45rem; height: .45rem; margin: 0 .1rem 0 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s ease;
}
.docs-details[open] > .docs-details-summary::before { transform: rotate(45deg) translate(-.1rem, -.1rem); }
.docs-details-summary:hover { background: var(--bg-subtle); }
.docs-details[open] > .docs-details-summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.docs-details-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.prose .docs-details-summary > :is(h2, h3, h4) { margin: 0; }
.docs-details-body { padding: .25rem 1rem .85rem 2.3rem; }
.docs-details-body > :first-child { margin-top: 0; }
.docs-details-body > :last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .docs-details-summary::before { transition: none; } }
@media print {
  .docs-details { margin: 1rem 0; }
  .docs-details::details-content { content-visibility: visible; display: block; }
  .docs-details-summary::before { display: none; }
  .docs-details-body { padding-left: 1rem; }
}

/* -------------------- Pictures with numbered points (> [!HOTSPOTS], classes/Hotspots.php) -------------------- */
/* The picture in a frame the points are placed in, in per cent, so they follow it at every width. The frame takes
   the picture's width and side (docs-hotspots-w-50, -left, -center, -right: as "Image widths"); the picture keeps its
   shadow. A point is a number in the theme's button pair (AA in the preset's contrast check) in a white ring with a
   dark edge, so it stands out from a light picture and a dark one; its sharp corner is at the place, its body the way
   the word says (se without one). The explanation (js/site.js) is a panel on the page's surface. The list is for
   screen readers on the screen, and shown in print under the picture, which keeps its numbers. */
.docs-hotspots { margin: 1.25rem 0; }
.docs-hotspots-frame { position: relative; width: fit-content; max-width: 100%; }
.prose .docs-hotspots-frame > img { display: block; max-width: 100%; margin: 0; }
.docs-hotspots-frame[class*="docs-hotspots-w-"] > img { width: 100%; }
/* A frame with a width fills it with the picture: the height limit (Image heights) would squeeze it, and the points are placed in the frame */
.prose .docs-hotspots-frame[class*="docs-hotspots-w-"] > img { max-height: none; }
.docs-hotspots-w-25 { width: 25%; }
.docs-hotspots-w-33 { width: 33.333%; }
.docs-hotspots-w-50 { width: 50%; }
.docs-hotspots-w-66 { width: 66.666%; }
.docs-hotspots-w-75 { width: 75%; }
.docs-hotspots-w-100 { width: 100%; }
.docs-hotspots-frame[class*="docs-hotspots-w-"], .docs-hotspots-center { margin-inline: auto; }
.docs-hotspots-frame.docs-hotspots-left { margin-inline: 0 auto; }
.docs-hotspots-frame.docs-hotspots-right { margin-inline: auto 0; }
@media (max-width: 640px) { .docs-hotspots-frame[class*="docs-hotspots-w-"] { width: fit-content; } }
.docs-hotspot {
  position: absolute; z-index: 1;
  --hotspot: 1.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--hotspot); height: var(--hotspot); padding: 0;
  border: 2px solid #fff; border-radius: 50%;
  background: var(--button-bg, var(--accent)); color: var(--button-text, #fff);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .65), 0 2px 6px rgb(0 0 0 / .35);
  font-size: .8125rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  cursor: pointer; transition: box-shadow .15s ease;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.docs-hotspot--se { border-top-left-radius: 3px; }
.docs-hotspot--sw { border-top-right-radius: 3px; margin-left: calc(-1 * var(--hotspot)); }
.docs-hotspot--ne { border-bottom-left-radius: 3px; margin-top: calc(-1 * var(--hotspot)); }
.docs-hotspot--nw { border-bottom-right-radius: 3px; margin: calc(-1 * var(--hotspot)) 0 0 calc(-1 * var(--hotspot)); }
/* A narrow picture has less room between the points; 24 px is still a target a finger hits (WCAG 2.5.8) */
@media (max-width: 640px) { .docs-hotspot { --hotspot: 1.5rem; font-size: .75rem; } }
.docs-hotspot[aria-expanded="true"] { z-index: 2; box-shadow: 0 0 0 1px rgb(0 0 0 / .65), 0 0 0 5px rgb(255 255 255 / .55), 0 2px 8px rgb(0 0 0 / .45); }
@media screen and (hover: hover) { .docs-hotspot:hover { z-index: 2; box-shadow: 0 0 0 1px rgb(0 0 0 / .65), 0 0 0 5px rgb(255 255 255 / .55), 0 2px 8px rgb(0 0 0 / .45); } }
/* Seen on any picture: dark, white, dark */
.docs-hotspot:focus-visible { z-index: 2; outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / .65), 0 0 0 6px #111; }
.docs-hotspot-tip {
  position: absolute; z-index: 30; box-sizing: border-box;
  width: max-content; max-width: min(20rem, calc(100vw - 2rem));
  padding: .55rem .8rem; border: 1px solid var(--border); border-radius: var(--box-radius-md, 6px);
  background: var(--bg); color: var(--text); box-shadow: 0 12px 32px -8px rgb(0 0 0 / .35);
  font-size: var(--callout-size, .875rem); line-height: 1.5; text-align: left;
}
.docs-hotspot-tip[hidden] { display: none; }
.docs-hotspot-tip-title { display: block; font-weight: 600; }
.docs-hotspot-tip-title + .docs-hotspot-tip-text { display: block; margin-top: .15rem; }
.prose .docs-hotspot-tip img.docs-inline-img { vertical-align: middle; }
.docs-hotspots-list, .prose .docs-hotspots-list {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .docs-hotspot { transition: none; } }
@media print {
  .docs-hotspots { break-inside: avoid; }
  .docs-hotspot-tip { display: none !important; }
  .docs-hotspot { box-shadow: 0 0 0 1px #000; }
  .prose .docs-hotspots-list { position: static; width: auto; height: auto; margin: .6rem 0 0; padding-left: 1.5rem; overflow: visible; clip-path: none; white-space: normal; }
}

/* -------------------- Internal notes (> [!INTERNAL], classes/Internal.php) -------------------- */
/* Only whoever may edit the page ever gets one in the HTML (Internal::view()). Set apart from the text by a dashed
   frame and a label in the body text's colours turned round (text on bg: AA whenever the page is), no colour of
   its own. Never printed: an export leaves notes out, and so does print, also for an editor. */
.docs-internal {
  margin: 1.25rem 0; padding: .6rem 1rem .75rem;
  border: 1.5px dashed var(--text-muted); border-radius: var(--box-radius-md, 6px);
  background: var(--bg-subtle); color: var(--text);
  font-size: var(--callout-size);
}
.docs-internal-label, .prose .docs-internal-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin: 0 0 .4rem; font-size: .75rem; line-height: 1.3; }
.docs-internal-tag { padding: .05rem .45rem; border-radius: 999px; background: var(--text); color: var(--bg); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.docs-internal-who { color: var(--text-muted); }
.docs-internal-body > :first-child { margin-top: 0; }
.docs-internal-body > :last-child { margin-bottom: 0; }
.prose .docs-box .docs-internal, .prose .docs-internal .docs-internal { background: var(--bg); }
@media print { .docs-internal { display: none !important; } }

/* -------------------- Shared text (> [!INCLUDE /path], classes/Includes.php) -------------------- */
/* The text reads as the page's own: the wrapper draws nothing and its text's margins pass through it. Whoever may edit the page sees a note where a text is
   not shown, or not shown to every reader, in the internal notes' manner (dashed frame, the body text's colours turned
   round: AA whenever the page is). Never printed, and never in an export (the notes are drawn in the view only). */
.docs-include-note {
  margin: 1rem 0 .5rem; padding: .45rem .8rem;
  border: 1.5px dashed var(--text-muted); border-radius: var(--box-radius-md, 6px);
  background: var(--bg-subtle); color: var(--text);
}
.docs-include-label, .prose .docs-include-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin: 0; font-size: .75rem; line-height: 1.35; }
.docs-include-tag { padding: .05rem .45rem; border-radius: 999px; background: var(--text); color: var(--bg); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.docs-include-why { color: var(--text-muted); }
.docs-include-why a { color: inherit; text-decoration: underline; }
/* First or last in its frame (a collapsible section, a box, a step): as the frame's own first or last block */
.docs-include:first-child > :first-child { margin-top: 0; }
.docs-include:last-child > :last-child { margin-bottom: 0; }
@media print { .docs-include-note { display: none !important; } }

/* -------------------- Page history (frontend editing) -------------------- */
.docs-history-item:hover { background: var(--bg-subtle); }
.docs-history-item.is-selected { background: var(--bg-subtle); box-shadow: inset 3px 0 0 var(--accent); }
/* Members panel (partials/editing/members-panel.html.twig): a group or Editor as a toggle */
.docs-chip { font-size: 0.75rem; line-height: 1.1rem; padding: 0.125rem 0.5rem; border-radius: 9999px; border: 1px solid var(--border); color: var(--text-muted); background: transparent; }
.docs-chip:hover { background: var(--bg-subtle); }
.docs-chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
/* The site's administration (templates/site-admin.html.twig): the menu of sections, the shown one marked */
.docs-admin-link { color: var(--text-muted); }
.docs-admin-link:hover { background: var(--bg-subtle); color: var(--text); }
.docs-admin-link[aria-current="page"] { background: var(--accent-soft); color: var(--text); font-weight: 500; }
.docs-admin-menu { scrollbar-width: thin; }
/* On or off in the settings form (partials/editing/settings-form.html.twig): a button with role="switch". */
.docs-switch { position: relative; flex: none; width: 2.25rem; height: 1.25rem; border-radius: 9999px; border: 1px solid var(--border); background: var(--bg-subtle); cursor: pointer; transition: background-color var(--motion-panel) ease; }
.docs-switch::after { content: ""; position: absolute; top: 1px; left: 1px; width: 1rem; height: 1rem; border-radius: 9999px; background: var(--bg); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform var(--motion-panel) ease; }
.docs-switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.docs-switch[aria-checked="true"]::after { transform: translateX(1rem); }
.docs-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.docs-settings-note a { text-decoration: underline; }
.docs-chip:disabled { opacity: 0.5; }
.docs-chip-editor[aria-pressed="true"] { font-weight: 600; }
.docs-diff { font-family: var(--font-code, ui-monospace, monospace); font-size: 0.8125rem; line-height: 1.55; padding: 0.5rem 0; }
.docs-diff > div { white-space: pre-wrap; overflow-wrap: anywhere; padding: 0 1.25rem 0 2.25rem; position: relative; min-height: 1.55em; }
.docs-diff-sign { position: absolute; left: 1rem; color: var(--text-muted); user-select: none; }
.docs-diff-del { background: rgba(239, 68, 68, .1); }
.docs-diff-ins { background: rgba(34, 197, 94, .12); }
.docs-diff-del mark { background: rgba(239, 68, 68, .3); color: inherit; border-radius: 2px; }
.docs-diff-ins mark { background: rgba(34, 197, 94, .35); color: inherit; border-radius: 2px; }
.docs-diff > .docs-diff-skip { color: var(--text-muted); font-family: var(--font-body, inherit); font-size: 0.75rem; padding-top: .25rem; padding-bottom: .25rem; background: var(--bg-subtle); }
.docs-diff-same { color: var(--text-muted); font-family: var(--font-body, inherit); padding: 1.5rem 1.25rem; }