@adia-ai/web-modules 0.0.4

package/shell/admin-shell/css/admin-shell.main.css

@@ -0,0 +1,182 @@
+/* ═══════════════════════════════════════════════════════════════
+   App Shell — Main column (topbar + scroll + footer)
+
+   Authoring shapes (both styled identically):
+     - Legacy: <main><header>…</header><section>…</section><footer>…</footer></main>
+     - Slot vocabulary: <main><header-ui>…</header-ui><section-ui>…</section-ui><footer-ui>…</footer-ui></main>
+
+   <main> stays as the main column container in both shapes. Slot
+   primitives (header-ui / section-ui / footer-ui) are accepted as
+   the chrome children alongside their raw-HTML counterparts.
+   ═══════════════════════════════════════════════════════════════ */
+
+/* ── Main column ── */
+admin-shell > main {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  border-inline: var(--page-main-border);
+}
+
+/* ── Edge breathing room when adjacent chrome is absent ──
+   When the shell has no visible chrome on a given edge of the content
+   surface, `> main > :is(section, section-ui)` owns a small inset
+   against that edge so the rounded/elevated surface doesn't sit flush
+   with the viewport. The `:has(... :not([hidden]))` probe catches
+   both "element missing from the DOM" AND "element present but
+   [hidden]" — toggling [hidden] flips the inset live with no JS
+   coordination. Scope is the section, not main, so the topbar /
+   statusbar inside main keep spanning full-width even when the
+   section gets its inset.
+
+   Block-edge probes accept either an app-level chrome bar
+   (`admin-shell > :is(header, header-ui)` / `> :is(footer, footer-ui)`)
+   OR a main-level chrome bar (`> main > :is(header, header-ui)` etc.).
+   Either qualifies as "chrome present" and suppresses the
+   corresponding margin. */
+admin-shell:not(:has(> :is(aside[data-sidebar="trailing"], aside-ui[slot="trailing"]):not([hidden]))) > main > :is(section, section-ui) {
+  margin-inline-end: var(--a-space-2);
+}
+admin-shell:not(:has(> :is(header, header-ui):not([hidden]), > main > :is(header, header-ui):not([hidden]))) > main > :is(section, section-ui) {
+  margin-block-start: var(--a-space-2);
+}
+admin-shell:not(:has(> :is(footer, footer-ui):not([hidden]), > main > :is(footer, footer-ui):not([hidden]))) > main > :is(section, section-ui) {
+  margin-block-end: var(--a-space-2);
+}
+
+/* ── Main > header (topbar) ──
+   Contains: sidebar toggle, breadcrumb, spacer, action buttons.
+
+   Slot contract (shared with > main > footer and [data-sidebar] >
+   header/footer) — identical to card-ui / drawer-ui / editor-shell:
+     [slot="icon"]        leading glyph
+     [slot="heading"]     primary label; strong weight + strong fg
+     [slot="description"] secondary metadata; muted fg + --a-ui-sm
+     [slot="action"]      trailing cluster; first pushes to end
+   The legacy data-sidebar-toggle / breadcrumb-ui / <span data-spacer>
+   / <div data-actions> hooks (see app-shell.helpers.css) remain
+   fully supported — slots are additive, not a replacement. Use slots
+   for simpler chrome surfaces; keep breadcrumb + data-actions for
+   docs-style shells where those conventions carry semantic weight. */
+admin-shell > main > :is(header, header-ui) {
+  display: flex;
+  align-items: center;
+  gap: var(--page-header-gap);
+  min-height: var(--page-header-height);
+  padding: 0 var(--page-header-px);
+  border-bottom: var(--page-border);
+  font-size: var(--page-header-font);
+  flex-shrink: 0;
+}
+
+admin-shell > main > :is(header, header-ui) > [slot="icon"] {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--page-header-fg-muted);
+}
+admin-shell > main > :is(header, header-ui) > [slot="heading"] {
+  font-weight: var(--a-weight-medium);
+  color: var(--a-fg);
+}
+admin-shell > main > :is(header, header-ui) > [slot="description"] {
+  color: var(--page-header-fg-muted);
+  font-size: var(--a-ui-sm);
+}
+admin-shell > main > :is(header, header-ui) > [slot="action"] {
+  display: flex;
+  align-items: center;
+  gap: var(--page-actions-gap);
+  flex-shrink: 0;
+  margin-inline-start: auto;
+}
+admin-shell > main > :is(header, header-ui) > [slot="action"] ~ [slot="action"] {
+  margin-inline-start: 0;
+}
+/* Dual-cluster: leading group on inline-start, trailing cluster on inline-end. */
+admin-shell > main > :is(header, header-ui) > [slot="action-leading"] {
+  display: flex;
+  align-items: center;
+  gap: var(--page-actions-gap);
+  flex-shrink: 0;
+  margin-inline-end: auto;
+}
+
+/* ── Main > section (scroll container) ──
+   Wraps [data-content-root]. Scrolls vertically, hides scrollbar.
+   Soft elevation via --page-content-shadow (defaults to --a-shadow-md)
+   so the content surface lifts off the chrome canvas regardless of
+   mode — pairs with --page-content-radius under "rounded" and stays
+   visible under "borderless". */
+admin-shell > main > :is(section, section-ui) {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+  background: var(--page-content-bg);
+  box-shadow: var(--page-content-shadow);
+}
+
+admin-shell > main > :is(section, section-ui)::-webkit-scrollbar { display: none; }
+
+/* ── Main > footer (status bar) ──
+   Legacy pattern: last-child auto-pushed to trailing edge via
+   margin-inline-start: auto (works when authors use a simple
+   <span>…</span><span>version</span> shape).
+   Slot pattern: same icon / heading / description / action vocabulary
+   as > main > header (see comment block above). */
+admin-shell > main > :is(footer, footer-ui) {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  margin-top: auto;
+  gap: var(--page-header-gap);
+  min-height: var(--page-header-height);
+  padding: 0 var(--page-header-px);
+  border-top: var(--page-border);
+  font-size: var(--page-header-font);
+  color: var(--page-header-fg-muted);
+}
+
+/* Legacy: bare <span>…</span><span>version</span> shapes. Only kicks
+   in when NO slot="action" is present, so it doesn't fight the slot
+   rule below. */
+admin-shell > main > :is(footer, footer-ui):not(:has(> [slot="action"])) > :last-child {
+  margin-inline-start: auto;
+}
+
+admin-shell > main > :is(footer, footer-ui) > [slot="icon"] {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--page-header-fg-muted);
+}
+admin-shell > main > :is(footer, footer-ui) > [slot="heading"] {
+  font-weight: var(--a-weight-medium);
+  color: var(--a-fg);
+}
+admin-shell > main > :is(footer, footer-ui) > [slot="description"] {
+  color: var(--page-header-fg-muted);
+  font-size: var(--a-ui-sm);
+}
+admin-shell > main > :is(footer, footer-ui) > [slot="action"] {
+  display: flex;
+  align-items: center;
+  gap: var(--page-actions-gap);
+  flex-shrink: 0;
+  margin-inline-start: auto;
+}
+admin-shell > main > :is(footer, footer-ui) > [slot="action"] ~ [slot="action"] {
+  margin-inline-start: 0;
+}
+/* Dual-cluster: leading group on inline-start, trailing cluster on inline-end. */
+admin-shell > main > :is(footer, footer-ui) > [slot="action-leading"] {
+  display: flex;
+  align-items: center;
+  gap: var(--page-actions-gap);
+  flex-shrink: 0;
+  margin-inline-end: auto;
+}

package/shell/admin-shell/css/admin-shell.shell.css

@@ -0,0 +1,48 @@
+/* ═══════════════════════════════════════════════════════════════
+   App Shell — Root layout + modes
+
+   Structure (legacy raw-HTML form; slot-vocabulary equivalents in parens):
+     admin-shell                                                       — root shell (flex row, fixed viewport)
+       aside[data-sidebar="leading"]   (or aside-ui[slot="leading"])    — nav sidebar (resizable, collapsible)
+       main                                                             — center column (topbar + scroll + footer)
+         header                        (or header-ui)                   — topbar
+         section                       (or section-ui)                  — scroll container
+           article[data-content-root]                                   — page wrapper (sticky bands + centered body)
+             div[data-content-header] > header                          — sticky page title + tabs
+             div[data-content-body] > section                           — centered reading column
+         footer                        (or footer-ui)                   — status bar
+       aside[data-sidebar="trailing"]  (or aside-ui[slot="trailing"])   — inspector sidebar
+       dialog[data-command]                                             — command palette
+
+   Both authoring shapes are valid simultaneously. The CSS uses
+   :is(legacy, slot-ui) lifts so raw-HTML and slot-primitive
+   composers render identically.
+
+   Modes (space-separated on mode attribute):
+     "rounded"    — border-radius on scroll section
+     "borderless" — removes chrome borders (content borders persist)
+   ═══════════════════════════════════════════════════════════════ */
+
+/* ── Page modes ── */
+admin-shell[mode~="rounded"] > main > :is(section, section-ui) {
+  border-radius: var(--page-content-radius);
+}
+
+admin-shell[mode~="borderless"] {
+  --page-main-border: none;
+  --page-border: none;
+  /* Note: --page-content-border is NOT reset — content dividers persist */
+}
+
+/* ── Page shell ── */
+admin-shell {
+  display: flex;
+  height: 100dvh;
+  overflow: hidden;
+  background: var(--page-bg);
+  position: fixed;
+  inset: 0;
+  overscroll-behavior: none;
+  font-family: var(--page-font-family);
+  font-size: var(--page-body-size);
+}

package/shell/admin-shell/css/admin-shell.sidebar.css

@@ -0,0 +1,165 @@
+/* ═══════════════════════════════════════════════════════════════
+   admin-shell — Sidebar
+
+   Resizable side panels with header/section/footer structure.
+   Acts as a CSS container query provider (container-name: sidebar)
+   so children can adapt to collapsed width via @container.
+
+   Authoring shapes (both styled identically):
+     - Legacy: <aside data-sidebar="leading|trailing">
+     - Slot vocabulary: <aside-ui slot="leading|trailing">
+   ═══════════════════════════════════════════════════════════════ */
+
+:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  min-width: var(--page-sidebar-min-width);
+  max-width: var(--page-sidebar-max-width);
+  min-height: 0;
+  font-size: var(--page-sidebar-font);
+  position: relative;
+  container-type: inline-size;
+  container-name: sidebar;
+  transition: width var(--page-duration) var(--page-easing);
+}
+
+/* ── Resize handle ──
+   6px invisible hit area straddling the sidebar edge.
+   Accent color on hover/drag. */
+:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > [data-resize] {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 6px;
+  cursor: col-resize;
+  background: transparent;
+  transition: background var(--page-duration-fast) var(--page-easing);
+  z-index: 2;
+}
+
+:is([data-sidebar="leading"], aside-ui[slot="leading"]) > [data-resize] { right: -3px; }
+:is([data-sidebar="trailing"], aside-ui[slot="trailing"]) > [data-resize] { left: -3px; }
+
+:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > [data-resize]:hover {
+  background: var(--page-sidebar-resize-accent);
+}
+
+:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"])[data-resizing] > [data-resize] {
+  background: var(--page-sidebar-resize-accent);
+}
+
+/* During drag: disable transition + text selection */
+:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"])[data-resizing] {
+  user-select: none;
+  transition: none;
+}
+
+/* ── Sidebar widths ── */
+:is([data-sidebar="leading"], aside-ui[slot="leading"]) {
+  width: var(--page-sidebar-width-leading);
+}
+
+:is([data-sidebar="trailing"], aside-ui[slot="trailing"]) {
+  width: var(--page-sidebar-width-trailing);
+}
+
+/* ── Sidebar header / footer ──
+   Share the same slot contract as > main > header/footer (see
+   app-shell.main.css top-of-file comment): icon / heading /
+   description / action. Sidebar chromes are typically single-child
+   (a workspace-select or user-select) so the slot rules rarely come
+   into play — but they stay consistent for authors that compose
+   richer sidebar chromes. */
+:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(header, header-ui),
+:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(footer, footer-ui) {
+  display: flex;
+  align-items: center;
+  gap: var(--page-sidebar-gap);
+  padding: var(--page-sidebar-px);
+  flex-shrink: 0;
+  overflow: hidden;
+  min-width: 0;
+}
+
+:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(header, header-ui) {
+  min-height: var(--page-header-height);
+  border-bottom: var(--page-border);
+}
+
+:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(footer, footer-ui) {
+  min-height: var(--page-header-height);
+  margin-top: auto;
+  border-top: var(--page-border);
+}
+
+:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(header, header-ui) > [slot="icon"],
+:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(footer, footer-ui) > [slot="icon"] {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--page-header-fg-muted);
+}
+:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(header, header-ui) > [slot="heading"],
+:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(footer, footer-ui) > [slot="heading"] {
+  font-weight: var(--a-weight-medium);
+  color: var(--a-fg);
+}
+:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(header, header-ui) > [slot="description"],
+:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(footer, footer-ui) > [slot="description"] {
+  color: var(--page-header-fg-muted);
+  font-size: var(--a-ui-sm);
+}
+:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(header, header-ui) > [slot="action"],
+:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(footer, footer-ui) > [slot="action"] {
+  display: flex;
+  align-items: center;
+  gap: var(--page-actions-gap);
+  flex-shrink: 0;
+  margin-inline-start: auto;
+}
+:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(header, header-ui) > [slot="action"] ~ [slot="action"],
+:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(footer, footer-ui) > [slot="action"] ~ [slot="action"] {
+  margin-inline-start: 0;
+}
+/* Dual-cluster: leading group on inline-start, trailing cluster on inline-end. */
+:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(header, header-ui) > [slot="action-leading"],
+:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(footer, footer-ui) > [slot="action-leading"] {
+  display: flex;
+  align-items: center;
+  gap: var(--page-actions-gap);
+  flex-shrink: 0;
+  margin-inline-end: auto;
+}
+
+/* ── Sidebar section (scrollable body) ── */
+:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(section, section-ui) {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--page-sidebar-px);
+  min-height: 0;
+  scrollbar-width: none;
+}
+
+:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(section, section-ui)::-webkit-scrollbar { display: none; }
+
+/* span[slot="pad"] — opt-in padding wrapper for sidebar content
+   that needs inset (e.g. trailing sidebar inspector fields) */
+:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) span[slot="pad"] {
+  display: block;
+  padding: var(--page-sidebar-px);
+}
+
+/* Reset nav-ui border/padding inside sidebars */
+:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) nav-ui {
+  border: none;
+  padding: 0;
+}
+
+/* Sidebar-level divider (outside nav-ui scope) */
+:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(section, section-ui) > hr[data-nav-divider] {
+  border: none;
+  height: 1px;
+  background: var(--page-sidebar-divider-bg);
+  margin: var(--page-sidebar-gap) var(--page-sidebar-px);
+}

package/shell/admin-shell/css/admin-shell.templates.css

@@ -0,0 +1,215 @@
+/* ═══════════════════════════════════════════════════════════════
+   admin-shell — Page templates (headers, body layouts, form sections)
+
+   Structure:
+     <article data-content-root>
+       [data-content-header]   — sticky top band, border-bottom
+         <header>...</header>  — centered column (padding + max-width)
+       [data-content-body]     — scrollable flex column (size only)
+         <section>...</section> — centered column (padding + max-width + gap)
+       [data-content-footer]   — sticky bottom band, border-top
+         <footer>...</footer>  — centered column (padding + max-width)
+
+   The outer `[data-*]` wrapper owns full-width concerns (sticky
+   position, border, background, scroll sizing). The inner semantic
+   element (<header>/<section>/<footer>) owns the centered reading
+   column (max-width, gutter, rhythm). Full-bleed content (iframes,
+   split panes) can skip <section> and sit directly in
+   [data-content-body] to opt out of the column.
+   ═══════════════════════════════════════════════════════════════ */
+
+/* ── Content root ── */
+[data-content-root] {
+  position: relative;
+  isolation: isolate;
+  min-block-size: 100%;
+}
+
+/* Fill-mode: when the body contains only an iframe (or explicit opt-in),
+   make the root a flex column that stretches to the scroll section's
+   visible height, so [data-content-body] flex: 1 resolves against a real
+   size and the iframe's block-size: 100% can fill. Prose pages (natural
+   root height + section scroll) are unaffected. */
+[data-content-root]:has(> [data-content-body] > iframe:only-child),
+[data-content-root][data-fill] {
+  display: flex;
+  flex-direction: column;
+  block-size: 100%;
+  min-block-size: 0;
+}
+
+/* ── Scaffold content columns ─────────────────────────────────────
+   Max-width + centering + horizontal inset are properties of the
+   NAMED inner semantic elements, not the [data-*] wrappers.
+
+   Who owns what:
+     • [data-content-header] / [data-content-footer]
+         — own sticky position, border, background (full-width band).
+     • [data-content-body]
+         — owns flex sizing + scroll; no padding, no max-width.
+     • Inner <header> / <section> / <footer>
+         — own max-width, margin-inline: auto, padding (centered column).
+     • Cards / modals / drawers
+         — own margin/padding via their own CSS; never inherit this.
+   ─────────────────────────────────────────────────────────────── */
+[data-content-header] > :is(header, header-ui),
+[data-content-body] > :is(section, section-ui),
+[data-content-footer] > :is(footer, footer-ui) {
+  max-width: var(--page-content-max-width);
+  margin-inline: auto;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+[data-content-header] > :is(header, header-ui),
+[data-content-footer] > :is(footer, footer-ui) {
+  padding-inline: var(--page-content-inset);
+}
+
+/* Full-width escape hatch — stretch the centered column to 100%. */
+[data-content-full] [data-content-header] > :is(header, header-ui),
+[data-content-full] [data-content-body] > :is(section, section-ui),
+[data-content-full] [data-content-footer] > :is(footer, footer-ui),
+[data-content-header][data-content-full] > :is(header, header-ui),
+[data-content-body][data-content-full] > :is(section, section-ui),
+[data-content-footer][data-content-full] > :is(footer, footer-ui),
+[data-content-header] > :is(header, header-ui)[data-content-full],
+[data-content-body] > :is(section, section-ui)[data-content-full],
+[data-content-footer] > :is(footer, footer-ui)[data-content-full] {
+  max-width: 100%;
+}
+
+/* ── Content header — sticky top, border-bottom ── */
+[data-content-header] {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  border-bottom: var(--page-content-border);
+  background: var(--page-content-bg);
+}
+
+[data-content-header] > :is(header, header-ui) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--page-header-gap);
+  padding-block: var(--page-content-inset) var(--page-header-gap);
+}
+
+/* When tabs are present, remove bottom padding so tabs sit flush against border */
+[data-content-header] > :is(header, header-ui):has(tabs-ui) {
+  padding-bottom: 0;
+}
+
+/* Variant: non-sticky, no border, transparent bg */
+[data-content-header]:has(> :is(header, header-ui)[data-flush]) {
+  position: static;
+  border-bottom: none;
+  background: none;
+}
+
+/* Variant: compact padding (for dense headers) */
+[data-content-header] > :is(header, header-ui)[data-compact] {
+  padding-block: var(--page-header-px);
+}
+
+/* Title row: h1 left, actions right */
+[data-content-header] > :is(header, header-ui) > div:first-child {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--page-header-gap);
+}
+
+/* h1 + description — typography handled by [variant] attribute */
+[data-content-header] h1 { margin: 0; }
+[data-content-header] > :is(header, header-ui) > p { margin: 0; }
+
+/* ── Content body ──
+   Wrapper: flex column that fills the scroll section. No padding,
+   no max-width — those live on the inner <section>. Non-section
+   children (iframes, split panes) go full-bleed. */
+[data-content-body] {
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Inner <section> (or <section-ui>) — the centered reading column.
+   Owns gutter and section-to-section rhythm. Stacks with flex gap
+   so direct children (<card-ui>, <grid-ui>, nested <section>, …)
+   have zero wrapper margin. */
+[data-content-body] > :is(section, section-ui) {
+  padding: var(--page-content-inset);
+  display: flex;
+  flex-direction: column;
+  gap: var(--page-section-gap, var(--a-space-8));
+}
+
+/* iframe-as-page-content: fill the body.
+   display: block kills the 4-5px inline-descender gap. */
+[data-content-body] > iframe {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  border: 0;
+  flex: 1;
+}
+
+/* ── Content footer — sticky bottom, border-top ── */
+[data-content-footer] {
+  position: sticky;
+  bottom: 0;
+  z-index: 1;
+  border-top: var(--page-content-border);
+  background: var(--page-content-bg);
+}
+
+[data-content-footer] > footer {
+  padding: var(--page-content-inset);
+}
+
+/* ── Tab content ──
+   Marker for the active tab's form sections. Gutter/padding is
+   owned by the <article> wrapper. */
+
+/* ── Form sections ──
+   Each section: kicker-styled h2 label, then [data-section] grid. */
+[data-tab-content] > section {
+  margin-bottom: var(--page-section-gap);
+}
+
+/* h2 — kicker role (small, uppercase, muted, letter-spaced) */
+[data-tab-content] > section > h2 {
+  font-size: var(--page-section-size);
+  font-weight: var(--page-section-weight);
+  line-height: var(--page-section-leading);
+  letter-spacing: var(--page-section-tracking);
+  text-transform: var(--page-section-case);
+  color: var(--page-section-color);
+  margin: 0 0 var(--page-section-mb);
+  padding-bottom: var(--page-section-pb);
+  border-bottom: var(--page-content-border);
+}
+
+/* Two-column settings layout: description left, controls right */
+[data-tab-content] > section > [data-section] {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  gap: var(--page-section-gap) var(--page-header-gap);
+}
+
+/* h3 — subsection role */
+[data-tab-content] > section > [data-section] > aside > h3 {
+  font-size: var(--page-subsection-size);
+  font-weight: var(--page-subsection-weight);
+  color: var(--page-subsection-color);
+  margin: 0 0 var(--page-section-pb);
+}
+
+/* Aside description */
+[data-tab-content] > section > [data-section] > aside > p {
+  margin: 0;
+}