@cogenta/theme-docs 0.3.3 → 0.5.3

package/src/styles/base.css

@@ -1,8 +1,7 @@
 /*
- * Document, accessibility floor, page frame, chrome (header/footer/nav,
- * including the CSS-only mobile menu) and the two-column doc-page layout.
- * Everything here reads the design system from `tokens.css`; nothing here
- * reads a `--cogenta-*` token directly.
+ * Document, accessibility floor, the grid, section and page titles, the
+ * hairline frame, actions, the search field, and the utility pages the host
+ * renders (search results, forms, comments). Everything reads `tokens.css`.
  */
 
 /* --------------------------------------------------------------------------
@@ -15,969 +14,536 @@
   box-sizing: border-box;
 }
 
+html {
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  scroll-padding-block-start: calc(var(--cd-header-height) + var(--cd-s6));
+  hanging-punctuation: first allow-end last;
+}
+
 body {
   margin: 0;
-  background: var(--cg-canvas);
-  color: var(--cg-ink);
-  font-family: var(--cogenta-font-sans);
-  font-size: var(--cg-text-md);
-  line-height: var(--cg-leading-normal);
+  background: var(--cd-canvas);
+  color: var(--cd-ink);
+  font-family: var(--cd-font-sans);
+  font-size: var(--cd-text-md);
+  font-weight: var(--cd-weight-regular);
+  line-height: var(--cd-leading-text);
   font-kerning: normal;
-  font-variant-ligatures: common-ligatures;
-  text-underline-offset: 0.15em;
-  text-decoration-thickness: from-font;
-  -webkit-text-size-adjust: 100%;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
 }
 
 ::selection {
-  background: var(--cg-accent-soft);
-  color: var(--cg-accent-soft-fg);
+  background: var(--cd-accent);
+  color: var(--cd-accent-fg);
 }
 
 img,
 video,
 iframe {
-  max-width: 100%;
-  height: auto;
+  display: block;
+  max-inline-size: 100%;
+  block-size: auto;
 }
 
 img {
-  display: block;
   object-fit: cover;
 }
 
-:where(a) {
-  color: var(--cg-accent);
-  text-decoration-color: color-mix(in oklab, var(--cg-accent) 40%, transparent);
-  transition:
-    color var(--cg-duration-fast) var(--cg-ease),
-    text-decoration-color var(--cg-duration-fast) var(--cg-ease);
+:where(img, video) {
+  filter: brightness(var(--cd-image-brightness));
+}
+
+:where(h1, h2, h3, h4, h5, h6) {
+  margin: 0;
+  font-family: var(--cd-font-sans);
+  font-weight: var(--cd-weight-semibold);
+  line-height: var(--cd-leading-heading);
+  letter-spacing: var(--cd-tracking-heading);
+  text-wrap: balance;
 }
 
-:where(a:hover) {
-  color: var(--cg-accent-hover);
+:where(p, li, dd, figcaption, blockquote) {
+  text-wrap: pretty;
+}
+
+:where(a) {
+  color: var(--cd-link);
+  text-decoration-line: underline;
+  text-decoration-thickness: var(--cd-rule);
   text-decoration-color: currentColor;
+  text-underline-offset: 0.22em;
+  transition:
+    color var(--cd-duration) var(--cd-ease),
+    text-decoration-color var(--cd-duration) var(--cd-ease);
 }
 
 :where(hr) {
-  block-size: 1px;
+  block-size: var(--cd-rule);
   border: 0;
-  margin-block: var(--cg-s10);
-  background: var(--cg-line);
+  margin-block: var(--cd-s10);
+  background: var(--cd-line);
 }
 
-kbd {
-  display: inline-block;
-  padding: 0.1em 0.45em;
-  font-family: var(--cogenta-font-mono);
-  font-size: 0.85em;
-  border-radius: var(--cg-radius-sm);
-  background: var(--cg-surface-sunken);
-  box-shadow: var(--cg-ring);
-  color: var(--cg-ink-muted);
+:where(code, kbd, samp, pre) {
+  font-family: var(--cd-font-mono);
+}
+
+:where(data, time) {
+  font-variant-numeric: tabular-nums;
+}
+
+.cg-visually-hidden {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
 }
 
 /* --------------------------------------------------------------------------
-   Focus, targets, motion
+   Focus, targets, motion. Motion is a colour or an underline changing, in
+   under 150 ms; nothing moves in space, nothing fades in on scroll.
    -------------------------------------------------------------------------- */
 
-:where(a, button, summary, [tabindex]):focus-visible {
-  outline: 2px solid var(--cg-accent);
-  outline-offset: 3px;
-  border-radius: var(--cg-radius-xs);
+:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
+  outline: var(--cd-rule-strong) solid var(--cd-accent);
+  outline-offset: 2px;
 }
 
-:where(.cg-action, .cg-faq__question, .cg-panels__question, .cg-nav-toggle__button) {
+:where(.cg-action, .cg-theme-toggle, summary) {
   min-block-size: 44px;
-  min-inline-size: 44px;
-}
-
-@supports (animation-timeline: view()) {
-  @media (prefers-reduced-motion: no-preference) {
-    @keyframes cg-settle {
-      from {
-        opacity: 0;
-        transform: translateY(var(--cg-s3));
-      }
-
-      to {
-        opacity: 1;
-        transform: none;
-      }
-    }
-
-    .cg-block {
-      animation: cg-settle linear both;
-      animation-timeline: view();
-      animation-range: entry 0% cover 20%;
-    }
-  }
 }
 
+/* Every transition in this theme reads `--cd-duration`, so reduced motion is
+   one declaration rather than an `!important` sweep over every element. */
 @media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 1ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 1ms !important;
-    scroll-behavior: auto !important;
+  :root {
+    --cd-duration: 0ms;
   }
 }
 
 .cg-skip-link {
   position: absolute;
-  inset-inline-start: var(--cg-s3);
-  inset-block-start: calc(var(--cg-s3) * -8);
-  z-index: 20;
-  padding: var(--cg-s2) var(--cg-s4);
-  background: var(--cg-accent);
-  color: var(--cg-accent-fg);
-  border-radius: var(--cg-radius-md);
-  box-shadow: var(--cg-elevation-2);
-  font-weight: var(--cg-weight-semibold);
+  inset-inline-start: var(--cd-s3);
+  inset-block-start: calc(var(--cd-s16) * -1);
+  z-index: 60;
+  padding: var(--cd-s2) var(--cd-s4);
+  border-radius: var(--cd-radius-control);
+  background: var(--cd-ink);
+  color: var(--cd-canvas);
+  font-size: var(--cd-text-ui);
+  font-weight: var(--cd-weight-medium);
   text-decoration: none;
-  transition: inset-block-start var(--cg-duration) var(--cg-ease);
 }
 
 .cg-skip-link:focus-visible {
-  inset-block-start: var(--cg-s3);
+  inset-block-start: var(--cd-s3);
 }
 
 /* --------------------------------------------------------------------------
-   Page frame
+   The grid. Every block outside a documentation page is a section around a
+   twelve-column container; the section rhythm is one variable.
    -------------------------------------------------------------------------- */
 
-.cg-main {
+.cd-main {
   display: flow-root;
+  overflow-x: clip;
+  padding-block-end: calc(var(--cd-section) / 2);
 }
 
-.cg-block {
-  max-inline-size: var(--cg-page);
+.cd-container {
+  display: grid;
+  grid-template-columns: repeat(var(--cd-columns), minmax(0, 1fr));
+  column-gap: var(--cd-col-gap);
+  align-items: start;
+  inline-size: 100%;
+  max-inline-size: calc(var(--cd-page) + var(--cd-gutter) * 2);
   margin-inline: auto;
-  margin-block: var(--cg-section-y);
-  padding-inline: var(--cg-gutter);
+  padding-inline: var(--cd-gutter);
 }
 
-[data-block][data-variant-background="muted"],
-[data-block][data-variant-background="image"] {
-  padding-block: var(--cg-s10);
-  border-radius: var(--cg-radius-lg);
-}
-
-[data-block][data-variant-background="muted"] {
-  background: var(--cg-surface-sunken);
+/* Below the wide breakpoint twelve columns only make slivers: every child
+   takes the full row, and each block redistributes from there. */
+.cd-container > * {
+  grid-column: 1 / -1;
+  min-inline-size: 0;
 }
 
-[data-block][data-variant-background="image"] {
-  background: var(--cg-surface-tinted);
+.cd-section {
+  padding-block: calc(var(--cd-section) / 2);
 }
 
-[data-block][data-variant-spacing="compact"] {
-  margin-block: calc(var(--cg-section-y) / 2);
-}
+/* --- section titles ----------------------------------------------------------
+   A titled block names itself from the first column, with the same space
+   under it everywhere, and a hairline above it so a long home page reads as
+   chapters. */
 
-[data-block][data-variant-spacing="spacious"] {
-  margin-block: calc(var(--cg-section-y) * 1.6);
+.cd-head {
+  display: grid;
+  gap: var(--cd-s2);
+  margin-block-end: var(--cd-s8);
 }
 
-[data-block][data-variant-align="start"] {
-  text-align: start;
+.cd-head__title {
+  max-inline-size: 30ch;
+  font-size: var(--cd-size-section);
+  font-weight: var(--cd-weight-semibold);
+  line-height: var(--cd-leading-heading);
+  letter-spacing: var(--cd-tracking-display);
 }
 
-[data-block][data-variant-align="center"] {
-  text-align: center;
+.cd-empty {
+  margin: 0;
+  padding-block: var(--cd-s6);
+  border-block: var(--cd-rule) solid var(--cd-line);
+  color: var(--cd-ink-muted);
+  font-size: var(--cd-text-ui);
 }
 
-[data-block][data-variant-align="end"] {
-  text-align: end;
-}
+/* --- the hairline frame ------------------------------------------------------
+   Every diagram, screenshot, photograph and embedded player wears the same
+   frame: one hairline, a hair of softening on the corners, the raised grey
+   behind an image that has not loaded yet. No shadow, no tilt. */
 
-[data-block][data-variant-width="full"] {
-  max-inline-size: none;
-  padding-inline: 0;
+.cd-frame {
+  display: block;
+  overflow: hidden;
+  margin: 0;
+  border: var(--cd-rule) solid var(--cd-line);
+  border-radius: var(--cd-radius-frame);
+  background: var(--cd-raised);
 }
 
-.cg-page__title {
-  max-inline-size: var(--cg-page);
-  margin-inline: auto;
-  margin-block: var(--cg-section-y) var(--cg-s6);
-  padding-inline: var(--cg-gutter);
-  font-size: var(--cg-text-3xl);
-  line-height: var(--cg-leading-tight);
-  letter-spacing: var(--cg-tracking-tight);
-  font-weight: var(--cg-weight-bold);
-  text-wrap: balance;
+.cd-frame__image {
+  inline-size: 100%;
+  block-size: 100%;
 }
 
-/* --------------------------------------------------------------------------
-   Entry header (`renderEntryHeader`, `@cogenta/theme-kit`, `theme@1.4`)
-   -------------------------------------------------------------------------- */
-
-.cg-entry-header {
-  margin: 0 0 var(--cg-s6);
-}
+/* --- per-block variants (blocks@2.0, RFC 0002) --------------------------- */
 
-.cg-entry-header__terms {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--cg-s2);
-  margin: 0 0 var(--cg-s3);
-  padding: 0;
-  list-style: none;
-  font-size: var(--cg-text-sm);
-  font-weight: var(--cg-weight-semibold);
-  letter-spacing: var(--cg-tracking-wide);
-  text-transform: uppercase;
-  color: var(--cg-accent);
+[data-block][data-variant-background="muted"],
+[data-block][data-variant-background="image"] {
+  background: var(--cd-surface);
+  border-block: var(--cd-rule) solid var(--cd-line);
 }
 
-.cg-entry-header__terms a {
-  color: inherit;
-  text-decoration: none;
+[data-block][data-variant-spacing="compact"] {
+  padding-block: calc(var(--cd-section) / 4);
 }
 
-.cg-entry-header__terms li:not(:last-child)::after {
-  content: "·";
-  margin-inline-start: var(--cg-s2);
-  color: var(--cg-ink-muted);
+[data-block][data-variant-spacing="spacious"] {
+  padding-block: calc(var(--cd-section) * 0.8);
 }
 
-.cg-entry-header__title {
-  margin: 0 0 var(--cg-s3);
-  font-size: var(--cg-text-3xl);
-  line-height: var(--cg-leading-tight);
-  letter-spacing: var(--cg-tracking-tight);
-  font-weight: var(--cg-weight-bold);
-  text-wrap: balance;
+[data-block][data-variant-align="center"] {
+  text-align: center;
 }
 
-.cg-entry-header__excerpt {
-  margin: 0 0 var(--cg-s4);
-  font-size: var(--cg-text-lg);
-  color: var(--cg-ink-muted);
-  text-wrap: pretty;
+[data-block][data-variant-align="end"] {
+  text-align: end;
 }
 
-.cg-entry-header__meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--cg-s3);
-  margin: 0 0 var(--cg-s5);
-  font-size: var(--cg-text-sm);
-  color: var(--cg-ink-muted);
+[data-block][data-variant-width="full"] > .cd-container {
+  max-inline-size: none;
 }
 
-.cg-entry-header__meta > :not(:last-child)::after {
-  content: "·";
-  margin-inline-start: var(--cg-s3);
-  color: var(--cg-line-strong);
-}
+/* --- the title of any page outside the documentation that has no hero ---- */
 
-.cg-entry-header__cover img,
-.cg-entry-header__cover video {
-  inline-size: 100%;
-  aspect-ratio: 16 / 9;
-  border-radius: var(--cg-radius-lg);
-  object-fit: cover;
+.cd-page-head {
+  padding-block: calc(var(--cd-section) * 0.6) calc(var(--cd-section) * 0.1);
 }
 
-/* --------------------------------------------------------------------------
-   Chrome — header (sticky, brand mark, desktop nav, header action, and a
-   CSS-only mobile menu — a <details> disclosure, never a script)
-   -------------------------------------------------------------------------- */
-
-.cg-site-header {
-  position: sticky;
-  inset-block-start: 0;
-  z-index: 5;
-  block-size: var(--cg-header-height);
-  display: flex;
-  align-items: center;
-  padding-inline: var(--cg-gutter);
-  /* Flat and fully opaque, not a frosted-glass blur: a sticky header reads
-     as a solid plane sitting above the page, with a hairline marking where
-     it ends. */
-  background: var(--cg-canvas);
-  border-block-end: 1px solid var(--cg-line-soft);
+.cd-page-head__inner {
+  row-gap: var(--cd-s4);
 }
 
-.cg-site-header__inner {
-  display: flex;
-  align-items: center;
-  gap: var(--cg-gap);
-  inline-size: 100%;
-  max-inline-size: var(--cg-page);
-  margin-inline: auto;
+.cd-page-head__title {
+  max-inline-size: 26ch;
+  font-size: var(--cd-size-title);
+  line-height: var(--cd-leading-display);
+  letter-spacing: var(--cd-tracking-display);
 }
 
-.cg-site-header__home {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  color: var(--cg-ink);
-  font-weight: var(--cg-weight-bold);
-  font-size: var(--cg-text-lg);
-  letter-spacing: var(--cg-tracking-tight);
-  text-decoration: none;
-  white-space: nowrap;
-  margin-inline-end: var(--cg-s6);
+.cd-page-head__lead {
+  margin: 0;
+  max-inline-size: 60ch;
+  color: var(--cd-ink-muted);
+  font-size: var(--cd-size-lead);
+  line-height: var(--cd-leading-lead);
 }
 
-.cg-site-header__logo {
-  display: block;
-  block-size: 1.75rem;
-  inline-size: auto;
-  max-inline-size: 12rem;
-  object-fit: contain;
+.cd-page-head__meta {
+  margin: 0;
+  color: var(--cd-ink-muted);
+  font-size: var(--cd-text-label);
+  font-variant-numeric: tabular-nums;
 }
 
-.cg-site-header__nav {
-  margin-inline-end: auto;
-}
+/* --------------------------------------------------------------------------
+   Actions: a small filled teal control for the primary intent, and for the
+   rest the words underlined with an arrow after them. No lift, no shadow.
+   -------------------------------------------------------------------------- */
 
-.cg-menu {
+.cg-actions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--cg-s5);
+  gap: var(--cd-s3) var(--cd-s8);
   margin: 0;
   padding: 0;
   list-style: none;
-  font-size: var(--cg-text-sm);
-  font-weight: var(--cg-weight-medium);
 }
 
-.cg-menu a,
-.cg-menu span {
-  color: var(--cg-ink-muted);
+.cg-action {
+  font-family: var(--cd-font-sans);
+  font-size: var(--cd-text-ui);
+  font-weight: var(--cd-weight-medium);
+  line-height: 1.2;
   text-decoration: none;
+  transition:
+    background-color var(--cd-duration) var(--cd-ease),
+    color var(--cd-duration) var(--cd-ease),
+    border-color var(--cd-duration) var(--cd-ease),
+    text-decoration-color var(--cd-duration) var(--cd-ease);
 }
 
-.cg-menu a:hover {
-  color: var(--cg-ink);
-}
-
-.cg-site-header__action {
-  margin-inline-start: var(--cg-s3);
-  white-space: nowrap;
-}
-
-/* The manual light/dark/system control (`renderThemeToggle`, `@cogenta/
-   theme-kit`) — a plain icon button matching `.cg-nav-toggle__button`'s own
-   sizing and radius, not `.cg-action`'s call-to-action look, so it never
-   competes visually with the header action. Always visible, at every
-   viewport width — unlike the nav links, it needs no mobile disclosure. */
-.cg-theme-toggle {
-  display: flex;
+.cg-action[data-emphasis="primary"] {
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  block-size: 2.25rem;
-  inline-size: 2.25rem;
-  flex-shrink: 0;
-  margin-inline-start: var(--cg-s2);
-  border-radius: var(--cg-radius-md);
-  border: 1px solid var(--cg-line-soft);
-  background: transparent;
-  color: var(--cg-ink);
-  cursor: pointer;
-}
-
-.cg-theme-toggle:hover {
-  background: var(--cg-surface-sunken);
+  padding: var(--cd-s3) var(--cd-s5);
+  border: var(--cd-rule) solid var(--cd-accent);
+  border-radius: var(--cd-radius-control);
+  background: var(--cd-accent);
+  color: var(--cd-accent-fg);
+  white-space: nowrap;
 }
 
-.cg-theme-toggle__icon {
-  block-size: 1.1rem;
-  inline-size: 1.1rem;
+.cg-action[data-emphasis="primary"]:hover {
+  border-color: var(--cd-accent-hover);
+  background: var(--cd-accent-hover);
+  color: var(--cd-accent-fg);
+}
+
+/* A text link with an arrow after it. Not a flex container: in one, the words
+   and the arrow are two flex items and each gets its own underline. As inline
+   content the words carry one continuous underline, and the arrow, an
+   inline-block, inherits none (decorations do not propagate to atomic
+   inlines). The same rule draws every arrow link of the theme, so a lone
+   arrow cannot exist anywhere. */
+.cg-action[data-emphasis="secondary"],
+.cd-arrow-link {
+  display: inline-block;
+  color: var(--cd-ink);
+  font-weight: var(--cd-weight-medium);
+  text-decoration-line: underline;
+  text-decoration-thickness: var(--cd-rule);
+  text-decoration-color: var(--cd-line-strong);
+  text-decoration-skip-ink: auto;
+  text-underline-offset: 0.3em;
 }
 
-.cg-theme-toggle__icon--moon {
-  display: none;
+.cg-action[data-emphasis="secondary"] {
+  padding-block: var(--cd-s3);
 }
 
-/* Icon reflects the *current* effective appearance — sun while light, moon
-   while dark — from the same `[data-theme]`/`prefers-color-scheme` signals
-   `tokens.css` already keys the whole palette on. */
-@media (prefers-color-scheme: dark) {
-  :where(:root:not([data-theme="light"])) .cg-theme-toggle__icon--sun {
-    display: none;
-  }
-  :where(:root:not([data-theme="light"])) .cg-theme-toggle__icon--moon {
-    display: block;
-  }
+.cg-action[data-emphasis="secondary"]::after,
+.cd-arrow-link::after {
+  content: "\2192" / "";
+  display: inline-block;
+  margin-inline-start: 0.35em;
 }
 
-:where(:root[data-theme="dark"]) .cg-theme-toggle__icon--sun {
-  display: none;
+.cg-action[data-emphasis="secondary"]:hover,
+.cd-arrow-link:hover {
+  color: var(--cd-ink);
+  text-decoration-color: currentColor;
 }
 
-:where(:root[data-theme="dark"]) .cg-theme-toggle__icon--moon {
-  display: block;
-}
+/* --------------------------------------------------------------------------
+   The search field. A real form: `GET /search?q=`, answered by the host. In
+   the header it is compact; on the home page it is the first thing a reader
+   reaches for.
+   -------------------------------------------------------------------------- */
 
-/* The mobile disclosure — hidden entirely above the sidebar breakpoint, so
-   its (duplicate) links never enter the accessibility tree on a wide
-   viewport, exactly the reasoning `chrome.ts`'s own comment gives. */
-.cg-nav-toggle {
-  display: none;
+.cd-search {
   position: relative;
-  margin-inline-start: var(--cg-s2);
-}
-
-.cg-nav-toggle__button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--cg-s2);
-  border-radius: var(--cg-radius-md);
-  cursor: pointer;
-  list-style: none;
-  color: var(--cg-ink);
-}
-
-.cg-nav-toggle__button::-webkit-details-marker {
-  display: none;
-}
-
-.cg-nav-toggle__icon {
   display: block;
+  margin: 0;
 }
 
-.cg-nav-toggle__panel {
+.cd-search__icon {
   position: absolute;
-  inset-inline-end: 0;
-  inset-block-start: calc(100% + var(--cg-s2));
-  z-index: 10;
-  display: flex;
-  flex-direction: column;
-  gap: var(--cg-s4);
-  min-inline-size: 14rem;
-  padding: var(--cg-s4);
-  background: var(--cg-surface-raised);
-  border-radius: var(--cg-radius-md);
-  box-shadow: var(--cg-elevation-3);
-}
-
-.cg-nav-toggle__panel .cg-menu {
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--cg-s3);
-}
-
-.cg-nav-toggle__action {
-  align-self: flex-start;
-}
-
-@media (max-width: 56rem) {
-  .cg-site-header__nav {
-    display: none;
-  }
-
-  /* Equal-specificity `.cg-action { display: inline-flex }` (Actions,
-     below) is declared later in this file, so a bare `.cg-site-header__
-     action` selector here would lose the cascade tie despite the narrower
-     viewport matching — the desktop action stayed visible next to the
-     hamburger's own copy, cramping the site name into wrapping onto the
-     sticky header and overlapping the page content beneath it. Chaining the
-     parent class raises specificity above `.cg-action`'s, independent of
-     source order. */
-  .cg-site-header__inner .cg-site-header__action {
-    display: none;
-  }
-
-  .cg-nav-toggle {
-    display: block;
-  }
-}
-
-/* --------------------------------------------------------------------------
-   Chrome — footer, a real multi-column layout
-   -------------------------------------------------------------------------- */
-
-.cg-site-footer {
-  padding: var(--cg-s16) var(--cg-gutter) var(--cg-s8);
-  background: var(--cg-surface-sunken);
-  color: var(--cg-ink-muted);
-  border-block-start: 1px solid var(--cg-line-soft);
-  font-size: var(--cg-text-sm);
-}
-
-.cg-site-footer__grid {
-  display: grid;
-  gap: var(--cg-gap-loose);
-  grid-template-columns: 1fr;
-  max-inline-size: var(--cg-page);
-  margin-inline: auto;
-  padding-block-end: var(--cg-s10);
-  border-block-end: 1px solid var(--cg-line-soft);
-}
-
-@media (min-width: 48rem) {
-  .cg-site-footer__grid {
-    grid-template-columns: 1.2fr 1fr 1fr;
-    align-items: start;
-  }
+  inset-block-start: 50%;
+  inset-inline-start: var(--cd-s3);
+  inline-size: 1rem;
+  block-size: 1rem;
+  margin-block-start: -0.5rem;
+  color: var(--cd-ink-muted);
+  pointer-events: none;
 }
 
-.cg-site-footer__brand a {
-  color: var(--cg-ink);
-  font-weight: var(--cg-weight-bold);
-  font-size: var(--cg-text-lg);
-  letter-spacing: var(--cg-tracking-tight);
-  text-decoration: none;
-}
-
-.cg-site-footer__tagline {
-  margin: var(--cg-s2) 0 0;
-  max-inline-size: 26rem;
-}
-
-.cg-site-footer__social {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--cg-s3);
-  margin: var(--cg-s4) 0 0;
-  padding: 0;
-  list-style: none;
-}
-
-.cg-site-footer__social-item a {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 2.1rem;
-  block-size: 2.1rem;
-  border-radius: var(--cg-radius-md);
-  color: var(--cg-ink-muted);
-  background: var(--cg-surface);
-  box-shadow: var(--cg-ring);
+.cd-search__input {
+  inline-size: 100%;
+  min-block-size: 2.375rem;
+  padding: var(--cd-s2) var(--cd-s3) var(--cd-s2) calc(var(--cd-s3) + 1.5rem);
+  border: var(--cd-rule) solid var(--cd-line);
+  border-radius: var(--cd-radius-control);
+  background: var(--cd-surface);
+  color: var(--cd-ink);
+  font-family: var(--cd-font-sans);
+  font-size: var(--cd-text-ui);
+  line-height: var(--cd-leading-ui);
+  appearance: none;
   transition:
-    color var(--cg-duration-fast) var(--cg-ease),
-    background-color var(--cg-duration-fast) var(--cg-ease);
-}
-
-.cg-site-footer__social-item a:hover,
-.cg-site-footer__social-item a:focus-visible {
-  color: var(--cg-accent-fg);
-  background: var(--cg-accent);
-}
-
-.cg-social__icon {
-  inline-size: 1.05rem;
-  block-size: 1.05rem;
-}
-
-.cg-site-footer__nav-col .cg-menu {
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--cg-s3);
-}
-
-.cg-site-footer__note {
-  margin: 0 0 var(--cg-s5);
-  max-inline-size: 24rem;
+    border-color var(--cd-duration) var(--cd-ease),
+    background-color var(--cd-duration) var(--cd-ease);
 }
 
-.cg-site-footer__branding {
-  display: flex;
-  align-items: center;
-}
-
-.cg-site-footer__branding a {
-  display: flex;
-  align-items: center;
-  gap: 0.4em;
-  opacity: 0.75;
-  transition: opacity var(--cg-duration) var(--cg-ease);
-}
-
-.cg-site-footer__branding a:hover,
-.cg-site-footer__branding a:focus-visible {
+.cd-search__input::placeholder {
+  color: var(--cd-ink-muted);
   opacity: 1;
 }
 
-.cg-site-footer__brand-logo {
-  display: block;
-  block-size: 25px;
-  inline-size: auto;
+.cd-search__input:hover {
+  border-color: var(--cd-line-strong);
 }
 
-.cg-site-footer__version {
-  font-variant-numeric: tabular-nums;
-  font-size: 0.9em;
+.cd-search__input:focus-visible {
+  border-color: var(--cd-accent);
+  outline: var(--cd-rule) solid var(--cd-accent);
+  outline-offset: 0;
+  background-color: var(--cd-canvas);
 }
 
-.cg-site-footer__bottom {
-  max-inline-size: var(--cg-page);
-  margin-inline: auto;
-  padding-block-start: var(--cg-s6);
-  font-size: var(--cg-text-xs);
-  letter-spacing: var(--cg-tracking-wide);
-  text-transform: uppercase;
-  color: var(--cg-ink-subtle);
+.cd-search--large .cd-search__icon {
+  inset-inline-start: var(--cd-s4);
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+  margin-block-start: -0.625rem;
 }
 
-.cg-visually-hidden {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
+.cd-search--large .cd-search__input {
+  min-block-size: 3.25rem;
+  padding-inline: calc(var(--cd-s4) + 2rem) var(--cd-s4);
+  border-color: var(--cd-line-strong);
+  background: var(--cd-canvas);
+  font-size: var(--cd-text-md);
 }
 
 /* --------------------------------------------------------------------------
-   The doc page — two columns, CSS-only
+   Search results, forms and comments: the utility pages the host renders, in
+   the same register. The host sets them in a bare `<main class="cg-main">`.
    -------------------------------------------------------------------------- */
 
-.cg-docs {
-  display: block;
-  max-inline-size: var(--cg-page);
-  margin-inline: auto;
-  padding-inline: var(--cg-gutter);
-  padding-block: var(--cg-s8) var(--cg-section-y);
-}
-
-@media (min-width: 64rem) {
-  .cg-docs {
-    display: grid;
-    grid-template-columns: var(--cg-sidebar-width) 1fr;
-    gap: var(--cg-s10);
-    align-items: start;
-  }
-}
-
-/* The sidebar, in two copies (`render-block.ts`'s `renderSidebar`/
-   `renderSidebarMobile`) — not one `<details>` toggled by breakpoint.
-   Chrome (and every engine following the current HTML rendering rules)
-   hides a closed `<details>`'s non-summary content through its own internal
-   `::details-content` box, not through plain CSS `display: none`; a
-   stylesheet rule forcing that content's `display: block` back on does not
-   reliably win against the closed state, verified live (an earlier build
-   with a single shared `<details>` rendered an empty sidebar column at
-   1280px in a real Chrome tab). So `.cg-docs__nav-desktop` is a plain
-   `<div>` — nothing for the browser to collapse — shown only at the
-   two-column breakpoint, and `.cg-docs__nav-mobile` is a **separate**
-   `<details>` disclosure, shown only below it. Exactly one of the two is
-   ever `display: block` at a given width, so a screen reader is never
-   offered two "Documentation" navigations at once. */
-.cg-docs__nav {
-  margin: 0 0 var(--cg-s6);
-}
-
-.cg-docs__nav-desktop {
-  display: none;
-}
-
-.cg-docs__nav-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--cg-s3) var(--cg-s4);
-  border-radius: var(--cg-radius-md);
-  box-shadow: var(--cg-ring);
-  cursor: pointer;
-  font-weight: var(--cg-weight-semibold);
-  list-style: none;
-}
-
-.cg-docs__nav-toggle::-webkit-details-marker {
-  display: none;
-}
-
-.cg-docs__nav-toggle::after {
-  content: "";
-  inline-size: 0.5rem;
-  block-size: 0.5rem;
-  border-inline-end: 2px solid currentColor;
-  border-block-end: 2px solid currentColor;
-  transform: rotate(45deg);
-  transition: transform var(--cg-duration) var(--cg-ease);
-}
-
-.cg-docs__nav-mobile[open] .cg-docs__nav-toggle::after {
-  transform: rotate(225deg);
-}
-
-.cg-docs__nav-panel {
-  padding-block-start: var(--cg-s3);
-}
-
-@media (min-width: 64rem) {
-  .cg-docs__nav-mobile {
-    display: none;
-  }
-
-  .cg-docs__nav-desktop {
-    display: block;
-    position: sticky;
-    inset-block-start: calc(var(--cg-header-height) + var(--cg-s6));
-    max-block-size: calc(100vh - var(--cg-header-height) - var(--cg-s10));
-    overflow-y: auto;
-  }
-
-  .cg-docs__nav-desktop .cg-docs__nav-panel {
-    padding-block-start: 0;
-  }
-}
-
-.cg-docs__nav-group {
-  margin: 0 0 var(--cg-s6);
-}
-
-.cg-docs__nav-heading {
-  margin: 0 0 var(--cg-s2);
-  font-size: var(--cg-text-xs);
-  font-weight: var(--cg-weight-bold);
-  letter-spacing: var(--cg-tracking-wide);
-  text-transform: uppercase;
-  color: var(--cg-ink-subtle);
-}
-
-.cg-docs__nav-items {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  border-inline-start: 1px solid var(--cg-line-soft);
-}
-
-.cg-docs__nav-link {
-  display: block;
-  padding: var(--cg-s1) var(--cg-s3);
-  margin-inline-start: -1px;
-  border-inline-start: 2px solid transparent;
-  font-size: var(--cg-text-sm);
-  color: var(--cg-ink-muted);
-  text-decoration: none;
-}
-
-.cg-docs__nav-link:hover {
-  color: var(--cg-ink);
-}
-
-.cg-docs__nav-link[aria-current="page"] {
-  border-inline-start-color: var(--cg-accent);
-  color: var(--cg-accent);
-  font-weight: var(--cg-weight-semibold);
-}
-
-.cg-docs__content {
-  max-inline-size: var(--cg-measure);
-  min-inline-size: 0;
-}
-
-.cg-docs__content > .cg-block,
-.cg-docs__content > .cg-entry-header {
-  max-inline-size: none;
+/* Left-aligned on the page edge the wordmark starts from, like every other
+   page of the site, and held to a reading width. */
+:is(.cg-main, .cg-sidebar-layout__content) > .cg-page__title,
+.cg-search__form,
+.cg-search__results,
+.cg-search__empty,
+.cg-search__error,
+.cg-form,
+.cg-form__confirmation {
+  --cd-edge: max(var(--cd-gutter), calc((100% - var(--cd-page)) / 2));
+  inline-size: 100%;
   margin-inline: 0;
-  padding-inline: 0;
-}
-
-.cg-docs__content > .cg-block:first-child {
-  margin-block-start: 0;
+  padding-inline: var(--cd-edge) max(var(--cd-gutter), calc(100% - var(--cd-edge) - 52rem));
 }
 
-.cg-docs__breadcrumb {
-  margin: 0 0 var(--cg-s4);
-  font-size: var(--cg-text-sm);
-  color: var(--cg-ink-muted);
-}
-
-.cg-docs__breadcrumb ol {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--cg-s2);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.cg-docs__breadcrumb li:not(:last-child)::after {
-  content: "›";
-  margin-inline-start: var(--cg-s2);
-  color: var(--cg-line-strong);
-}
-
-.cg-docs__breadcrumb li[aria-current="page"] {
-  color: var(--cg-ink);
-  font-weight: var(--cg-weight-medium);
-}
-
-.cg-docs__title {
-  margin: 0 0 var(--cg-s6);
-  font-size: var(--cg-text-3xl);
-  line-height: var(--cg-leading-tight);
-  letter-spacing: var(--cg-tracking-tight);
-  font-weight: var(--cg-weight-bold);
-  text-wrap: balance;
+:is(.cg-main, .cg-sidebar-layout__content) > .cg-page__title {
+  padding-block: calc(var(--cd-section) * 0.5) var(--cd-s6);
+  font-size: var(--cd-size-title);
+  line-height: var(--cd-leading-display);
+  letter-spacing: var(--cd-tracking-display);
 }
 
-/* --------------------------------------------------------------------------
-   Actions — the theme's only control
-   -------------------------------------------------------------------------- */
-
-.cg-actions {
+.cg-search__form {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--cg-s3);
-  margin: var(--cg-s6) 0 0;
-  padding: 0;
-  list-style: none;
-}
-
-.cg-action {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--cg-s2);
-  padding: var(--cg-s3) var(--cg-s5);
-  border: 0;
-  border-radius: var(--cg-radius-md);
-  font-size: var(--cg-text-sm);
-  font-weight: var(--cg-weight-semibold);
-  letter-spacing: var(--cg-tracking-snug);
-  line-height: var(--cg-leading-snug);
-  text-decoration: none;
-  white-space: nowrap;
-  transition:
-    background-color var(--cg-duration) var(--cg-ease),
-    color var(--cg-duration) var(--cg-ease),
-    box-shadow var(--cg-duration) var(--cg-ease),
-    transform var(--cg-duration-fast) var(--cg-ease);
-}
-
-.cg-action[data-emphasis="primary"] {
-  background: var(--cg-accent);
-  color: var(--cg-accent-fg);
-  box-shadow: var(--cg-elevation-1);
-}
-
-.cg-action[data-emphasis="primary"]:hover {
-  background: var(--cg-accent-hover);
-  box-shadow: var(--cg-elevation-2);
-  transform: translateY(-1px);
-}
-
-.cg-action[data-emphasis="secondary"] {
-  background: var(--cg-surface);
-  color: var(--cg-ink);
-  box-shadow: var(--cg-ring);
+  align-items: end;
+  gap: var(--cd-s3);
+  margin-block: 0 var(--cd-s10);
 }
 
-.cg-action[data-emphasis="secondary"]:hover {
-  background: var(--cg-accent-soft);
-  color: var(--cg-accent-soft-fg);
-  box-shadow: var(--cg-ring-accent);
+.cg-search__form label,
+.cg-form__field label,
+.cg-comment__form label {
+  display: block;
+  margin-block-end: var(--cd-s2);
+  color: var(--cd-ink);
+  font-size: var(--cd-text-ui);
+  font-weight: var(--cd-weight-medium);
 }
 
-.cg-action:active {
-  transform: translateY(0);
-  box-shadow: var(--cg-elevation-1);
+.cg-search__form label {
+  flex-basis: 100%;
+  margin: 0;
 }
 
-/* --------------------------------------------------------------------------
-   Shared block furniture
-   -------------------------------------------------------------------------- */
-
-.cg-features__title,
-.cg-cta__title,
-.cg-faq__title,
-.cg-panels__title,
-.cg-stats__title,
-.cg-kpis__title,
-.cg-logos__title,
-.cg-list__title-heading,
-.cg-pricing__title {
-  margin: 0 0 var(--cg-s8);
-  font-size: var(--cg-text-xl);
-  line-height: var(--cg-leading-snug);
-  letter-spacing: var(--cg-tracking-tight);
-  font-weight: var(--cg-weight-bold);
-  text-wrap: balance;
+.cg-search__form input[type="search"] {
+  flex: 1 1 18rem;
 }
 
-.cg-features__items,
-.cg-logos__items,
-.cg-gallery__items,
-.cg-list__items,
-.cg-faq__items,
-.cg-panels__items,
-.cg-pricing__tiers {
-  margin: 0;
-  padding: 0;
+.cg-search__results {
+  display: grid;
+  margin-block: 0 var(--cd-section);
   list-style: none;
+  counter-reset: cd-result;
 }
 
-.cg-gallery__viewport,
-.cg-list__viewport {
-  overflow-x: auto;
-  scroll-snap-type: x mandatory;
-  scroll-behavior: smooth;
-  overscroll-behavior-inline: contain;
-  scrollbar-width: thin;
-  scrollbar-color: var(--cg-line-strong) transparent;
-  padding-block: var(--cg-s2);
-  margin-block: calc(var(--cg-s2) * -1);
+.cg-search__results > li {
+  padding-block: var(--cd-s4);
+  border-block-start: var(--cd-rule) solid var(--cd-line);
+  font-size: var(--cd-text-lg);
+  font-weight: var(--cd-weight-medium);
 }
 
-/* --------------------------------------------------------------------------
-   Search, forms, comments — public utility pages and post-content furniture
-   -------------------------------------------------------------------------- */
-
-.cg-search__form,
-.cg-search__results,
-.cg-search__empty,
-.cg-search__error,
-.cg-form,
-.cg-form__confirmation,
-.cg-comments {
-  max-inline-size: var(--cg-page);
-  margin-inline: auto;
-  padding-inline: var(--cg-gutter);
+.cg-search__results > li:last-child {
+  border-block-end: var(--cd-rule) solid var(--cd-line);
 }
 
-.cg-search__form {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: end;
-  gap: var(--cg-s3);
-  margin-block-end: var(--cg-s8);
+/* The summary under a result and the count beside the title: the host's
+   floor reads the raw skin grey, which is too faint on the dark ground, so
+   both take this theme's own muted ink. */
+.cg-search__count {
+  color: var(--cd-ink-muted);
 }
 
-.cg-search__form label {
-  display: block;
-  font-size: var(--cg-text-sm);
-  font-weight: var(--cg-weight-semibold);
-  margin-block-end: var(--cg-s2);
+.cg-search__excerpt {
+  color: var(--cd-ink-muted);
+  font-size: var(--cd-text-ui);
+  font-weight: var(--cd-weight-regular);
+  line-height: var(--cd-leading-ui);
 }
 
-.cg-search__form input[type="search"] {
-  flex: 1 1 16rem;
+.cg-search__results a {
+  text-decoration-color: var(--cd-line-strong);
 }
 
-.cg-search__results {
-  margin: 0 auto;
-  padding-inline-start: var(--cg-gutter);
-  display: grid;
-  gap: var(--cg-s4);
-  font-size: var(--cg-text-lg);
+.cg-search__results a:hover {
+  text-decoration-color: currentColor;
 }
 
 .cg-search__empty,
 .cg-comments__empty,
-.cg-comments__closed {
-  color: var(--cg-ink-muted);
+.cg-comments__closed,
+.cg-form__help {
+  color: var(--cd-ink-muted);
 }
 
 .cg-search__error,
 .cg-form__error,
 .cg-form__field-error {
-  color: var(--cg-ink);
-  font-weight: var(--cg-weight-bold);
+  color: var(--cd-ink);
+  font-weight: var(--cd-weight-semibold);
 }
 
 .cg-search__form input,
@@ -987,66 +553,79 @@ kbd {
 .cg-comment__form input,
 .cg-comment__form textarea {
   inline-size: 100%;
-  padding: var(--cg-s3) var(--cg-s4);
-  border: 1px solid var(--cg-line);
-  border-radius: var(--cg-radius-md);
-  background: var(--cg-surface);
-  color: var(--cg-ink);
-  font: inherit;
+  min-block-size: 44px;
+  padding: var(--cd-s2) var(--cd-s3);
+  border: var(--cd-rule) solid var(--cd-line-strong);
+  border-radius: var(--cd-radius-control);
+  background: var(--cd-canvas);
+  color: var(--cd-ink);
+  font-family: var(--cd-font-sans);
+  font-size: var(--cd-text-md);
+  line-height: var(--cd-leading-ui);
+  transition: border-color var(--cd-duration) var(--cd-ease);
+}
+
+.cg-form__field textarea,
+.cg-comment__form textarea {
+  resize: vertical;
+}
+
+.cg-search__form input:focus-visible,
+.cg-form__field :is(input, select, textarea):focus-visible,
+.cg-comment__form :is(input, textarea):focus-visible {
+  border-color: var(--cd-accent);
+  outline: var(--cd-rule) solid var(--cd-accent);
+  outline-offset: 0;
 }
 
 .cg-form__field input[aria-invalid="true"],
 .cg-form__field select[aria-invalid="true"],
 .cg-form__field textarea[aria-invalid="true"] {
-  border-width: 2px;
-  border-color: var(--cg-line-strong);
+  border-color: var(--cd-ink);
+  border-width: var(--cd-rule-strong);
 }
 
 .cg-search__form button,
 .cg-form button[type="submit"],
 .cg-comment__form button[type="submit"] {
-  padding: var(--cg-s3) var(--cg-s6);
-  border: 0;
-  border-radius: var(--cg-radius-md);
-  background: var(--cg-accent);
-  color: var(--cg-accent-fg);
-  font-weight: var(--cg-weight-semibold);
+  min-block-size: 44px;
+  padding: var(--cd-s3) var(--cd-s5);
+  border: var(--cd-rule) solid var(--cd-accent);
+  border-radius: var(--cd-radius-control);
+  background: var(--cd-accent);
+  color: var(--cd-accent-fg);
+  font-family: var(--cd-font-sans);
+  font-size: var(--cd-text-ui);
+  font-weight: var(--cd-weight-medium);
   cursor: pointer;
-  transition: background-color var(--cg-duration) var(--cg-ease);
+  transition:
+    background-color var(--cd-duration) var(--cd-ease),
+    border-color var(--cd-duration) var(--cd-ease);
 }
 
 .cg-search__form button:hover,
 .cg-form button[type="submit"]:hover,
 .cg-comment__form button[type="submit"]:hover {
-  background: var(--cg-accent-hover);
-}
-
-.cg-form__field,
-.cg-comment__form p {
-  display: block;
-  margin-block-end: var(--cg-s5);
+  border-color: var(--cd-accent-hover);
+  background: var(--cd-accent-hover);
 }
 
-.cg-form__field label,
-.cg-comment__form label {
+.cg-form__field {
   display: block;
-  font-size: var(--cg-text-sm);
-  font-weight: var(--cg-weight-semibold);
-  margin-block-end: var(--cg-s2);
+  margin-block-end: var(--cd-s6);
 }
 
 .cg-form__help {
-  margin: var(--cg-s2) 0 0;
-  font-size: var(--cg-text-sm);
-  color: var(--cg-ink-muted);
+  margin: var(--cd-s2) 0 0;
+  font-size: var(--cd-text-label);
 }
 
 .cg-form__choice {
   display: inline-flex;
   align-items: center;
-  gap: var(--cg-s2);
-  margin-inline-end: var(--cg-s4);
-  font-weight: normal;
+  gap: var(--cd-s2);
+  margin-inline-end: var(--cd-s4);
+  font-weight: var(--cd-weight-regular);
 }
 
 .cg-form__honeypot,
@@ -1058,11 +637,18 @@ kbd {
   inset-inline-start: -9999px;
 }
 
+/* Comments, when a site turns them on, sit on the reading column. */
 .cg-comments {
-  margin-block-start: var(--cg-section-y);
-  padding-block-start: var(--cg-s8);
-  padding-block-end: var(--cg-section-y);
-  border-block-start: 1px solid var(--cg-line-soft);
+  max-inline-size: calc(52rem + var(--cd-gutter) * 2);
+  margin: 0 auto var(--cd-section);
+  padding: 0 var(--cd-gutter);
+}
+
+.cg-comments > h2 {
+  padding-block-start: var(--cd-s5);
+  border-block-start: var(--cd-rule) solid var(--cd-line);
+  margin-block-end: var(--cd-s5);
+  font-size: var(--cd-text-xl);
 }
 
 .cg-comments__list,
@@ -1073,34 +659,48 @@ kbd {
 }
 
 .cg-comment {
-  padding-block: var(--cg-s5);
-  border-block-end: 1px solid var(--cg-line-soft);
+  padding-block: var(--cd-s5);
+  border-block-start: var(--cd-rule) solid var(--cd-line);
 }
 
 .cg-comment__replies {
-  padding-block-start: var(--cg-s5);
-}
-
-.cg-comment__replies .cg-comment {
-  padding-inline-start: var(--cg-s6);
-  border-inline-start: 2px solid var(--cg-line-soft);
-  border-block-end: 0;
+  margin-block-start: var(--cd-s4);
+  padding-inline-start: var(--cd-s6);
+  border-inline-start: var(--cd-rule) solid var(--cd-line);
 }
 
 .cg-comment__meta {
   display: flex;
-  gap: var(--cg-s3);
-  align-items: baseline;
-  font-size: var(--cg-text-sm);
-  color: var(--cg-ink-muted);
-  margin-block-end: var(--cg-s2);
+  flex-wrap: wrap;
+  gap: var(--cd-s1) var(--cd-s3);
+  margin: 0 0 var(--cd-s2);
+  font-size: var(--cd-text-label);
 }
 
 .cg-comment__author {
-  font-weight: var(--cg-weight-semibold);
-  color: var(--cg-ink);
+  color: var(--cd-ink);
+  font-weight: var(--cd-weight-semibold);
 }
 
-.cg-comment__body {
+.cg-comment__date {
+  color: var(--cd-ink-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.cg-comment__body p {
   margin: 0;
 }
+
+.cg-comment__form {
+  display: grid;
+  gap: var(--cd-s3);
+  margin-block-start: var(--cd-s6);
+}
+
+.cg-comment__form > * {
+  margin: 0;
+}
+
+.cg-comment__form button[type="submit"] {
+  justify-self: start;
+}