:root {
    --docs-bg: #ffffff;
    --docs-surface: #f6f7f9;
    --docs-sidebar: #f1f3f5;
    --docs-text: #26313c;
    --docs-muted: #66727e;
    --docs-border: #d9dee3;
    --docs-accent: #176b72;
    --docs-accent-soft: #dceff0;
    --docs-warning: #9b4b34;
    --docs-code: #eef1f3;
    /* The same named inks as the site: an editor picks a name, each theme
       resolves it, and no hexadecimal ever reaches the content. */
    --docs-ink-red: #a83232;
    --docs-ink-green: #1f6b3c;
    --docs-ink-amber: #8a5a0b;

    --docs-sidebar-width: 18rem;
    --docs-toc-width: 14rem;
}

[data-theme="dark"] {
    --docs-bg: #171a1d;
    --docs-surface: #20252a;
    --docs-sidebar: #1d2125;
    --docs-text: #e6eaed;
    --docs-muted: #aab3ba;
    --docs-border: #394149;
    --docs-accent: #67c3c8;
    --docs-accent-soft: #233f42;
    --docs-warning: #e39378;
    --docs-code: #252b30;
    --docs-ink-red: #ef9a95;
    --docs-ink-green: #a7d8bb;
    --docs-ink-amber: #e6b566;
}

/* One page carries both readings of anything the theme changes — the mark in
   the sidebar, the glyph of the toggle — and the stylesheet shows the one that
   applies. The theme is switched by flipping the attribute on <html>
   (static/js/theme.js), so anything the server had chosen would be one click
   late. `data-theme` is always written, light or dark, so exactly one shows.

   ⚠️ `!important`, deliberately. This is a utility whose whole job is to hide,
   and the elements it hides are inside components that set `display` on them:
   `.slider .action-icons .icon-btn svg` and `.docs-brand img` are both more
   specific than a theme attribute plus a class, so without it the page showed
   the sun *and* the moon, and both logos. Any component rule added later would
   reopen the same hole, silently. */
[data-theme="light"] .theme-only-dark,
[data-theme="dark"] .theme-only-light { display: none !important; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--docs-bg); color: var(--docs-text); font-family: "IBM Plex Sans", sans-serif; font-size: 1rem; line-height: 1.65; }
a { color: var(--docs-accent); }
button, input, select, textarea { font: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.docs-skip { position: fixed; z-index: 100; top: -4rem; left: 1rem; padding: .65rem 1rem; background: var(--docs-text); color: var(--docs-bg); }
.docs-skip:focus { top: 1rem; }

.docs-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; width: var(--docs-sidebar-width); display: flex; flex-direction: column; overflow-y: auto; border-right: 1px solid var(--docs-border); background: var(--docs-sidebar); }
.docs-brand { padding: 1.6rem 1.4rem 1rem; }
.docs-brand img { display: block; width: 11rem; max-height: 5.5rem; object-fit: contain; object-position: left center; }
.docs-site-title { display: block; margin-top: 1.2rem; color: var(--docs-text); font-family: "Source Serif 4", serif; font-size: 1.45rem; font-weight: 700; text-decoration: none; }
.docs-search { padding: .5rem 1.25rem 1rem; }
.docs-search input { width: 100%; min-height: 2.6rem; padding: .55rem .75rem; border: 1px solid var(--docs-border); border-radius: 4px; background: var(--docs-bg); color: var(--docs-text); }
.docs-navigation { flex: 1; padding: 0 .75rem 1rem; }
.docs-tree { margin: 0; padding: 0; list-style: none; }
.docs-tree .docs-tree { margin-left: .7rem; padding-left: .65rem; border-left: 1px solid var(--docs-border); }
.docs-tree li { margin: .12rem 0; }
.docs-tree details > summary, .docs-tree-leaf { position: relative; display: flex; align-items: flex-start; padding-left: 1.1rem; list-style: none; }
.docs-tree details > summary { cursor: pointer; }
.docs-tree details > summary::-webkit-details-marker { display: none; }
.docs-tree details > summary::before { position: absolute; top: .42rem; left: .15rem; content: "›"; color: var(--docs-muted); font-size: 1rem; line-height: 1; transform: rotate(0deg); transition: transform .15s ease; }
.docs-tree details[open] > summary::before { transform: rotate(90deg); }
.docs-tree details > summary > a { padding-left: 0; }
.docs-tree a { display: inline-block; padding: .3rem .45rem; color: var(--docs-text); font-size: .9rem; line-height: 1.35; text-decoration: none; }
.docs-tree a:hover, .docs-tree .is-current > a { color: var(--docs-accent); }
.docs-tree .is-current > a { border-left: 3px solid var(--docs-accent); background: var(--docs-accent-soft); font-weight: 600; }
.docs-private { color: var(--docs-muted); font-size: .68rem; text-transform: uppercase; }
.docs-reorder-controls { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 1.25rem 1rem; }
.docs-reorder-controls button { min-height: 2.25rem; padding: .35rem .65rem; border: 1px solid var(--docs-border); border-radius: 3px; background: var(--docs-surface); color: var(--docs-text); cursor: pointer; }
.docs-reorder-save { border-color: var(--docs-accent) !important; background: var(--docs-accent) !important; color: var(--docs-bg) !important; }
.docs-drag-handle { display: none; width: 1.5rem; min-width: 1.5rem; height: 1.8rem; padding: 0; border: 0; background: transparent; color: var(--docs-muted); cursor: grab; touch-action: none; }
.docs-reordering .docs-drag-handle { display: inline-flex; align-items: center; justify-content: center; }
.docs-reordering .docs-tree details > summary, .docs-reordering .docs-tree-leaf { padding-left: 0; }
.docs-reordering .docs-tree details > summary::before { display: none; }
.docs-reordering .docs-navigation a { pointer-events: none; }
.docs-reordering .docs-tree { min-height: .65rem; }
.docs-reordering .docs-tree .docs-tree { margin-left: 1.25rem; min-height: 1.2rem; border: 1px dashed color-mix(in srgb, var(--docs-border) 75%, transparent); border-right: 0; }
.docs-sortable-ghost { opacity: .35; }
.docs-sortable-chosen { background: var(--docs-accent-soft); }
.docs-sidebar-footer { padding: 1rem 1.4rem; border-top: 1px solid var(--docs-border); font-size: .86rem; }

/* Deux colonnes reelles, pas un sommaire flottant par-dessus le texte : le
   texte etait centre par `margin: 0 auto` dans toute la largeur, si bien que
   la moitie de la marge restante devait degager un sommaire de 15,2rem. Elle
   n'y suffisait pas entre 1100 px et ~1425 px, et le sommaire se posait sur les
   lignes. La piste `auto` de la grille se referme d'elle-meme quand le
   sommaire est cache — vide (`[hidden]`, pose par documentation.js sur une page
   sans titre) ou sous le seuil mobile — et le texte reprend toute la place. */
.docs-workspace { min-height: 100vh; margin-left: var(--docs-sidebar-width); padding-top: 3.3rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.docs-tools { position: fixed; z-index: 10; top: 0; right: 0; left: var(--docs-sidebar-width); height: 3.3rem; display: flex; align-items: center; justify-content: flex-end; gap: 1.2rem; padding: 0 1.5rem; border-bottom: 1px solid var(--docs-border); background: color-mix(in srgb, var(--docs-bg) 94%, transparent); backdrop-filter: blur(10px); }
.docs-tools a { color: var(--docs-muted); font-size: .82rem; font-weight: 600; text-decoration: none; }
.docs-tools .docs-theme-toggle { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }
.docs-main { width: min(52rem, 100%); min-width: 0; margin: 0 auto; padding: 3.5rem 2rem 6rem; }
.docs-toc { position: sticky; top: 6.5rem; width: var(--docs-toc-width); max-height: calc(100vh - 8rem); overflow: auto; margin: 3.5rem 1.2rem 0 0; padding-left: 1rem; border-left: 1px solid var(--docs-border); overflow-wrap: anywhere; }
.docs-toc > p { margin: 0 0 .65rem; color: var(--docs-text); font-size: .78rem; font-weight: 600; text-transform: uppercase; }
.docs-toc a { display: block; margin: .4rem 0; color: var(--docs-muted); font-size: .8rem; line-height: 1.35; text-decoration: none; }
.docs-toc .toc-level-3 { padding-left: .75rem; }
.docs-mobile-header { display: none; }

.docs-breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; color: var(--docs-muted); font-size: .82rem; }
.docs-breadcrumb a { color: var(--docs-muted); text-decoration: none; }
.docs-article-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--docs-border); }
.docs-article h1 { max-width: 42rem; margin: 0; font-family: "Source Serif 4", serif; font-size: 3rem; line-height: 1.12; letter-spacing: 0; }
.docs-access-label { margin: 0 0 .5rem; color: var(--docs-accent); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.docs-action, .docs-button { display: inline-flex; min-height: 2.5rem; align-items: center; justify-content: center; padding: .45rem .9rem; border: 1px solid var(--docs-accent); border-radius: 4px; background: var(--docs-accent); color: var(--docs-bg); font-weight: 600; text-decoration: none; }
/* Justified like the rest of the site; hyphenation is what keeps a narrow
   column from tearing. Headings, code and table cells set their own alignment
   below. */
.docs-prose { margin-top: 2.2rem; text-align: justify; hyphens: auto; }
.docs-prose pre, .docs-prose code { text-align: left; hyphens: none; }
.docs-prose h2, .docs-prose h3 { scroll-margin-top: 5rem; color: var(--docs-text); font-family: "Source Serif 4", serif; letter-spacing: 0; }
.docs-prose h2 { margin: 2.6rem 0 .8rem; padding-bottom: .35rem; border-bottom: 1px solid var(--docs-border); font-size: 1.65rem; }
.docs-prose h3 { margin: 2rem 0 .6rem; font-size: 1.25rem; }
.docs-prose img { max-width: 100%; height: auto; }
.docs-prose::after { display: block; clear: both; content: ""; }
/* The same ladder as main.css and as LAYOUT_SIZES in app/services/html.py: this
   sheet scopes it to the documentation, so a width added there must be added
   here too or a documentation page would ignore it. */
.docs-prose :is(img, figure)[data-ljp-size="25"], .ql-editor :is(img, figure)[data-ljp-size="25"] { width: 25%; }
.docs-prose :is(img, figure)[data-ljp-size="33"], .ql-editor :is(img, figure)[data-ljp-size="33"] { width: 33%; }
.docs-prose :is(img, figure)[data-ljp-size="50"], .ql-editor :is(img, figure)[data-ljp-size="50"] { width: 50%; }
.docs-prose :is(img, figure)[data-ljp-size="75"], .ql-editor :is(img, figure)[data-ljp-size="75"] { width: 75%; }
.docs-prose :is(img, figure)[data-ljp-size="100"], .ql-editor :is(img, figure)[data-ljp-size="100"] { width: 100%; }
.docs-prose :is(img, figure)[data-ljp-align="left"], .ql-editor :is(img, figure)[data-ljp-align="left"] { float: left; margin: .25rem 1rem .75rem 0; }
.docs-prose :is(img, figure)[data-ljp-align="center"], .ql-editor :is(img, figure)[data-ljp-align="center"] { display: block; float: none; margin: .75rem auto; }
.docs-prose :is(img, figure)[data-ljp-align="right"], .ql-editor :is(img, figure)[data-ljp-align="right"] { float: right; margin: .25rem 0 .75rem 1rem; }
.docs-prose figure, .ql-editor figure { margin: 0; }
.docs-prose figure img, .ql-editor figure img { display: block; width: 100%; }
.docs-prose figcaption, .ql-editor figcaption { margin-top: .35rem; color: var(--docs-muted); font-size: .85rem; line-height: 1.35; }
/* Character size and colour, written as classes by the shared editor. */
.docs-prose .ql-size-small, .ql-snow .ql-editor .ql-size-small { font-size: .82em; }
.docs-prose .ql-size-large, .ql-snow .ql-editor .ql-size-large { font-size: 1.35em; }
.docs-prose .ql-size-huge, .ql-snow .ql-editor .ql-size-huge { font-size: 1.9em; }
.docs-prose .ql-color-brand, .ql-snow .ql-editor .ql-color-brand { color: var(--docs-accent); }
.docs-prose .ql-color-red, .ql-snow .ql-editor .ql-color-red { color: var(--docs-ink-red); }
.docs-prose .ql-color-green, .ql-snow .ql-editor .ql-color-green { color: var(--docs-ink-green); }
.docs-prose .ql-color-amber, .ql-snow .ql-editor .ql-color-amber { color: var(--docs-ink-amber); }
.docs-prose .ql-color-muted, .ql-snow .ql-editor .ql-color-muted { color: var(--docs-muted); }
.ql-snow .ql-color .ql-picker-item[data-value="brand"] { background-color: var(--docs-accent) !important; }
.ql-snow .ql-color .ql-picker-item[data-value="red"] { background-color: var(--docs-ink-red) !important; }
.ql-snow .ql-color .ql-picker-item[data-value="green"] { background-color: var(--docs-ink-green) !important; }
.ql-snow .ql-color .ql-picker-item[data-value="amber"] { background-color: var(--docs-ink-amber) !important; }
.ql-snow .ql-color .ql-picker-item[data-value="muted"] { background-color: var(--docs-muted) !important; }

.docs-prose pre, .docs-prose code { background: var(--docs-code); }
.docs-prose pre { overflow: auto; padding: 1rem; border: 1px solid var(--docs-border); border-radius: 4px; }
.docs-prose code { padding: .12rem .3rem; }
.docs-prose table { width: 100%; border-collapse: collapse; }
.docs-prose th, .docs-prose td { padding: .55rem; border: 1px solid var(--docs-border); text-align: left; }
/* The same table layout the site's own pages have — the editor is shared, so a
   table built here must obey the same two rulings and the same anchoring. */
.docs-prose table[data-ljp-size="25"] { width: 25%; }
.docs-prose table[data-ljp-size="33"] { width: 33%; }
.docs-prose table[data-ljp-size="50"] { width: 50%; }
.docs-prose table[data-ljp-size="75"] { width: 75%; }
.docs-prose table[data-ljp-size="100"] { width: 100%; }
.docs-prose table[data-ljp-align="left"] { float: left; margin: .25rem 1rem .75rem 0; }
.docs-prose table[data-ljp-align="center"] { float: none; margin: .75rem auto; }
.docs-prose table[data-ljp-align="right"] { float: right; margin: .25rem 0 .75rem 1rem; }
.docs-prose table[data-ljp-border="thin"] :is(th, td) { border: 1px solid var(--docs-border); }
.docs-prose table[data-ljp-border="none"] :is(th, td) { border: 0; }
.docs-broken-link { color: var(--docs-warning); text-decoration: line-through; text-decoration-thickness: 1px; cursor: not-allowed; }
.docs-children { margin-top: 3rem; }
.docs-children h2 { font-family: "Source Serif 4", serif; }
.docs-children ul { padding: 0; border-top: 1px solid var(--docs-border); list-style: none; }
.docs-children li { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--docs-border); }
.docs-children li span { color: var(--docs-muted); font-size: .75rem; text-transform: uppercase; }
.docs-admin-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--docs-border); }
.docs-admin-actions form { margin: 0; }
.docs-admin-actions button, .docs-admin-actions a { min-height: 2.35rem; padding: .35rem .65rem; border: 1px solid var(--docs-border); border-radius: 4px; background: var(--docs-surface); color: var(--docs-text); text-decoration: none; }
.docs-admin-actions .danger { color: var(--docs-warning); }
.docs-empty { padding-top: 10vh; }
.docs-search-results { margin: 2rem 0; padding: 0; border-top: 1px solid var(--docs-border); list-style: none; }
.docs-search-results li { padding: .8rem 0; border-bottom: 1px solid var(--docs-border); }

.docs-form fieldset { margin: 2rem 0; padding: 1.25rem; border: 1px solid var(--docs-border); }
.docs-form legend { padding: 0 .5rem; font-family: "Source Serif 4", serif; font-size: 1.3rem; font-weight: 700; }
.form-row { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; margin: 1rem 0; }
.form-row label { font-weight: 600; }
.form-row > div { min-width: 0; }
.form-row input, .form-row select, .form-row textarea { width: 100%; padding: .55rem .65rem; border: 1px solid var(--docs-border); border-radius: 3px; background: var(--docs-bg); color: var(--docs-text); }
.field-control.has-translation { display: grid; grid-template-columns: minmax(0, 1fr) 2.25rem; gap: .35rem; align-items: center; }
.translation-icon { width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--docs-border); border-radius: 3px; background: var(--docs-surface); color: var(--docs-text); cursor: pointer; }
.translation-icon:hover, .translation-icon:focus-visible { border-color: var(--docs-accent); color: var(--docs-accent); }
.translation-icon-rich:not(.is-ready) { display: none; }
.translation-progress { margin-top: .5rem; }
.translation-progress[hidden] { display: none; }
.translation-progress-bar { height: .35rem; overflow: hidden; border-radius: 3px; background: var(--docs-surface); }
.translation-progress-bar > span { display: block; width: 0; height: 100%; background: var(--docs-accent); transition: width .2s ease; }
.translation-progress-label { margin: .35rem 0 0; color: var(--docs-muted); font-size: .82rem; }
.rich-text-source[hidden] { display: none !important; }
.form-row-rich { grid-template-columns: 1fr; }
.rich-editor-shell { position: relative; min-width: 0; }
.rich-editor { height: 15rem; background: var(--docs-bg); color: var(--docs-text); }
.ql-toolbar.ql-snow, .ql-container.ql-snow { border-color: var(--docs-border); }
.ql-toolbar.ql-snow { background: var(--docs-surface); }
.ql-toolbar.ql-snow { position: relative; padding-right: 3.25rem; }
.ql-toolbar .translation-icon-rich { position: absolute; top: .35rem; right: .45rem; }
.ql-editor::after { display: block; clear: both; content: ""; }
.ql-editor img { max-width: 100%; height: auto; cursor: grab; }
.ql-editor img.is-selected { outline: 3px solid var(--docs-accent); outline-offset: 2px; }
.ql-editor img:active { cursor: grabbing; }
.image-format-toolbar { position: absolute; z-index: 4; display: flex; gap: .4rem; padding: .35rem; border: 1px solid var(--docs-border); border-radius: 3px; background: var(--docs-bg); box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .24); }
.image-format-toolbar[hidden] { display: none; }
.image-format-group { display: flex; }
.image-format-group + .image-format-group { padding-left: .4rem; border-left: 1px solid var(--docs-border); }
.image-format-toolbar button { min-width: 2.25rem; min-height: 2rem; padding: .25rem .4rem; border: 1px solid transparent; background: transparent; color: var(--docs-text); cursor: pointer; }
.image-format-toolbar button:hover, .image-format-toolbar button:focus-visible, .image-format-toolbar button.is-active { border-color: var(--docs-accent); background: var(--docs-surface); color: var(--docs-accent); }
[data-theme="dark"] .ql-snow .ql-stroke { stroke: var(--docs-text); }
[data-theme="dark"] .ql-snow .ql-fill { fill: var(--docs-text); }
[data-theme="dark"] .ql-snow .ql-picker { color: var(--docs-text); }
.field-error { margin: .25rem 0; color: var(--docs-warning); font-size: .85rem; }
.docs-button { border: 0; cursor: pointer; }
.docs-button.secondary { border: 1px solid var(--docs-border); background: var(--docs-surface); color: var(--docs-text); }
.docs-form-actions { display: flex; gap: .75rem; }
.flash-stack { margin-bottom: 1.5rem; }
.flash { padding: .8rem 1rem; border-left: 4px solid var(--docs-accent); background: var(--docs-surface); }
.flash-error { border-color: var(--docs-warning); }
.media-picker-dialog { width: min(64rem, calc(100% - 2rem)); max-height: 88vh; padding: 0; border: 1px solid var(--docs-border); border-radius: 4px; background: var(--docs-bg); color: var(--docs-text); }
.media-picker-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.media-picker-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--docs-border); background: var(--docs-surface); }
.media-picker-header h2, .media-picker-header p { margin: 0; }
.media-picker-header p { color: var(--docs-muted); font-size: .9rem; }
.media-picker-close { border: 0; background: transparent; color: var(--docs-text); font-size: 1.7rem; cursor: pointer; }
.media-picker-upload { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 1fr) auto; gap: .75rem; align-items: end; padding: 1rem 1.5rem; border-bottom: 1px solid var(--docs-border); }
.media-picker-upload label { display: grid; gap: .25rem; font-size: .85rem; font-weight: 600; }
.media-picker-upload input { min-width: 0; padding: .45rem; border: 1px solid var(--docs-border); background: var(--docs-bg); color: var(--docs-text); }
.media-picker-upload button { min-height: 2.5rem; padding: .45rem .8rem; border: 1px solid var(--docs-accent); background: var(--docs-accent); color: var(--docs-bg); cursor: pointer; }
.media-picker-message { grid-column: 1 / -1; margin: 0; color: var(--docs-muted); }
.media-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; min-height: 8rem; padding: 1.5rem; }
.media-picker-item { min-width: 0; border: 1px solid var(--docs-border); background: var(--docs-surface); }
.media-picker-insert { width: 100%; min-height: 10rem; display: flex; align-items: center; justify-content: center; padding: .5rem; border: 0; background: var(--docs-bg); cursor: pointer; }
.media-picker-item img { width: auto; max-width: 200px; max-height: 12rem; object-fit: contain; }
.media-picker-item-details { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .65rem; }
.media-picker-item-details span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-picker-delete { border: 0; background: transparent; color: var(--docs-warning); cursor: pointer; }

@media (max-width: 1100px) {
    .docs-toc { display: none; }
}

@media (max-width: 760px) {
    .docs-mobile-header { position: fixed; z-index: 30; inset: 0 0 auto 0; height: 3.4rem; display: flex; align-items: center; gap: 1rem; padding: 0 1rem; border-bottom: 1px solid var(--docs-border); background: var(--docs-bg); }
    .docs-mobile-header a { color: var(--docs-text); font-family: "Source Serif 4", serif; font-weight: 700; text-decoration: none; }
    .docs-menu-toggle { padding: .35rem .55rem; border: 1px solid var(--docs-border); border-radius: 3px; background: var(--docs-surface); color: var(--docs-text); }
    .docs-sidebar { width: min(21rem, 88vw); transform: translateX(-101%); transition: transform .2s ease; }
    .docs-menu-open .docs-sidebar { transform: translateX(0); }
    .docs-overlay { position: fixed; z-index: 15; inset: 0; display: block; background: rgba(0, 0, 0, .45); }
    .docs-overlay[hidden] { display: none; }
    .docs-workspace { margin-left: 0; padding-top: 6.7rem; }
    .docs-tools { top: 3.4rem; left: 0; height: 3.3rem; padding: 0 1rem; }
    .docs-main { width: 100%; padding: 2rem 1.15rem 4rem; }
    .docs-article h1 { font-size: 2.15rem; }
    .docs-article-header { align-items: flex-start; flex-direction: column; gap: 1rem; }
    .form-row { grid-template-columns: 1fr; gap: .35rem; }
    .docs-form fieldset { padding: .8rem; }
    .media-picker-upload { grid-template-columns: 1fr; }
}