@cloudhal/cli 0.0.0-stage → 0.1.0

package/dist/assets/starters/blog/src/styles/features/motion.css

@@ -0,0 +1,254 @@
+/*
+ * Motion (RFC-0024): presets the renderer writes as data-ch-* attributes; the tokens come from
+ * themeVariables, one set per level, picked by data-ch-motion on <html>. Content is complete
+ * without this layer; nothing animates layout; nothing moves at "none" or under reduced motion.
+ * Reveals use opacity, translate, scale, filter and clip-path; hover effects use transform and
+ * box-shadow, so one element can have both without their transitions overriding each other.
+ */
+[data-ch-reveal] {
+  --ch-from-tr: none;
+  --ch-from-sc: none;
+  --ch-from-f: none;
+  --ch-from-c: none;
+  --ch-rv-dur: var(--ch-dur-normal, 0ms);
+}
+[data-ch-reveal="rise"] {
+  --ch-from-tr: 0 var(--ch-move-m, 0);
+}
+[data-ch-reveal="sink"] {
+  --ch-from-tr: 0 calc(var(--ch-move-m, 0) * -1);
+}
+[data-ch-reveal="slide-start"] {
+  --ch-from-tr: calc(var(--ch-move-l, 0) * -1) 0;
+}
+[data-ch-reveal="slide-end"] {
+  --ch-from-tr: var(--ch-move-l, 0) 0;
+}
+[dir="rtl"] [data-ch-reveal="slide-start"] {
+  --ch-from-tr: var(--ch-move-l, 0) 0;
+}
+[dir="rtl"] [data-ch-reveal="slide-end"] {
+  --ch-from-tr: calc(var(--ch-move-l, 0) * -1) 0;
+}
+[data-ch-reveal="scale-in"] {
+  --ch-from-sc: 0.94;
+}
+[data-ch-reveal="blur-in"] {
+  --ch-from-f: blur(10px);
+}
+[data-ch-reveal="wipe-up"] {
+  --ch-from-c: inset(100% 0 0 0);
+}
+[data-ch-reveal="wipe-start"] {
+  --ch-from-c: inset(0 100% 0 0);
+}
+[data-ch-reveal="mask-rise"] {
+  --ch-from-c: inset(0 0 100% 0);
+  --ch-from-tr: 0 var(--ch-move-s, 0);
+}
+[data-ch-speed="fast"] {
+  --ch-rv-dur: var(--ch-dur-fast, 0ms);
+}
+[data-ch-speed="slow"] {
+  --ch-rv-dur: var(--ch-dur-slow, 0ms);
+}
+[data-ch-d="1"] {
+  --ch-d: 1;
+}
+[data-ch-d="2"] {
+  --ch-d: 2;
+}
+[data-ch-d="3"] {
+  --ch-d: 3;
+}
+[data-ch-d="4"] {
+  --ch-d: 4;
+}
+[data-ch-d="5"] {
+  --ch-d: 5;
+}
+[data-ch-d="6"] {
+  --ch-d: 6;
+}
+[data-ch-d="7"] {
+  --ch-d: 7;
+}
+[data-ch-d="8"] {
+  --ch-d: 8;
+}
+[data-ch-d="9"] {
+  --ch-d: 9;
+}
+[data-ch-d="10"] {
+  --ch-d: 10;
+}
+[data-ch-d="11"] {
+  --ch-d: 11;
+}
+[data-ch-d="12"] {
+  --ch-d: 12;
+}
+[data-ch-d="13"] {
+  --ch-d: 13;
+}
+[data-ch-d="14"] {
+  --ch-d: 14;
+}
+[data-ch-d="15"] {
+  --ch-d: 15;
+}
+[data-ch-d="16"] {
+  --ch-d: 16;
+}
+/* At "subtle" every reveal is a short fade. */
+:root[data-ch-motion="subtle"] [data-ch-reveal] {
+  --ch-from-tr: none;
+  --ch-from-sc: none;
+  --ch-from-f: none;
+  --ch-from-c: none;
+}
+@media (prefers-reduced-motion: no-preference) {
+  :root:is([data-ch-motion="subtle"], [data-ch-motion="standard"], [data-ch-motion="expressive"])
+    [data-ch-reveal] {
+    --ch-tr-r:
+      opacity var(--ch-rv-dur) var(--ch-ease-standard) calc(var(--ch-stagger) * var(--ch-d, 0)),
+      translate var(--ch-rv-dur) var(--ch-ease-standard) calc(var(--ch-stagger) * var(--ch-d, 0)),
+      scale var(--ch-rv-dur) var(--ch-ease-standard) calc(var(--ch-stagger) * var(--ch-d, 0)),
+      filter var(--ch-rv-dur) var(--ch-ease-standard) calc(var(--ch-stagger) * var(--ch-d, 0)),
+      clip-path var(--ch-rv-dur) var(--ch-ease-standard) calc(var(--ch-stagger) * var(--ch-d, 0));
+  }
+  /* Below the first screen: the motion module adds .ch-pre while off screen, removes it on entry. */
+  :root:is([data-ch-motion="subtle"], [data-ch-motion="standard"], [data-ch-motion="expressive"])
+  [data-ch-reveal].ch-pre {
+    opacity: 0;
+    translate: var(--ch-from-tr);
+    scale: var(--ch-from-sc);
+    filter: var(--ch-from-f);
+    clip-path: var(--ch-from-c);
+  }
+  /* On the first screen: the entrance plays from the first frame, with no script. */
+  @starting-style {
+    :root:is([data-ch-motion="subtle"], [data-ch-motion="standard"], [data-ch-motion="expressive"])
+      [data-ch-reveal] {
+      opacity: 0;
+      translate: var(--ch-from-tr);
+      scale: var(--ch-from-sc);
+      filter: var(--ch-from-f);
+      clip-path: var(--ch-from-c);
+    }
+  }
+}
+:root:not([data-ch-motion="none"]) [data-ch-hover] {
+  --ch-tr-h:
+    transform var(--ch-dur-fast, 0ms) var(--ch-ease-standard),
+    box-shadow var(--ch-dur-fast, 0ms) var(--ch-ease-standard),
+    background-size var(--ch-dur-normal, 0ms) var(--ch-ease-standard);
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-ch-hover] {
+    --ch-tr-h: outline-color 0s;
+  }
+}
+:is([data-ch-reveal], [data-ch-hover]) {
+  transition: var(--ch-tr-r, outline-offset 0s), var(--ch-tr-h, outline-color 0s);
+}
+/* A hover effect starts at once, whatever its element's reveal delay. */
+[data-ch-hover]:is(:hover, :focus-visible, :focus-within) {
+  transition-delay: 0s;
+}
+/* Effects that do not move anything: every level but "none". */
+:root:not([data-ch-motion="none"])
+[data-ch-hover="glow"]:is(:hover, :focus-visible, :focus-within) {
+  box-shadow:
+    0 0 0 1px color-mix(in oklch, var(--ch-color-brand) 45%, transparent),
+    0 10px 30px -10px color-mix(in oklch, var(--ch-color-brand) 55%, transparent);
+}
+:root:not([data-ch-motion="none"])
+  :is(
+    [data-ch-hover="underline"]:not(.ch-card),
+    [data-ch-hover="underline"].ch-card :is(h2, h3, h4)
+  ) {
+  text-decoration: none;
+  background-image: linear-gradient(currentColor, currentColor);
+  background-repeat: no-repeat;
+  background-position: 0 100%;
+  background-size: 0% 1px;
+}
+:root:not([data-ch-motion="none"])
+  :is(
+    [data-ch-hover="underline"]:not(.ch-card):is(:hover, :focus-visible),
+    [data-ch-hover="underline"].ch-card:is(:hover, :focus-within) :is(h2, h3, h4)
+  ) {
+  background-size: 100% 1px;
+}
+:root:not([data-ch-motion="none"]) [data-ch-hover="spotlight"] {
+  position: relative;
+  isolation: isolate;
+}
+:root:not([data-ch-motion="none"]) [data-ch-hover="spotlight"]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  pointer-events: none;
+  opacity: 0;
+  background: radial-gradient(
+    280px circle at calc(var(--ch-mx, 0.5) * 100%) calc(var(--ch-my, 0.5) * 100%),
+    color-mix(in oklch, var(--ch-color-brand) 18%, transparent),
+    transparent 70%
+  );
+  transition: opacity var(--ch-dur-fast, 0ms) var(--ch-ease-standard);
+}
+:root:not([data-ch-motion="none"]) [data-ch-hover="spotlight"]:hover::after {
+  opacity: 1;
+}
+/* Effects that move: "standard" and "expressive", for readers who have not asked for less. */
+@media (prefers-reduced-motion: no-preference) {
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+    [data-ch-hover="lift"]:is(:hover, :focus-visible, :focus-within) {
+    transform: translateY(calc(var(--ch-move-s) * -0.5));
+    box-shadow: 0 16px 36px -16px rgb(0 0 0 / 0.3);
+  }
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+    [data-ch-hover="scale"]:is(:hover, :focus-visible, :focus-within) {
+    transform: scale(1.03);
+  }
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+    [data-ch-hover="zoom-media"] {
+    overflow: clip;
+  }
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+    [data-ch-hover="zoom-media"]
+    img {
+    transition: transform var(--ch-dur-slow) var(--ch-ease-standard);
+  }
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+    [data-ch-hover="zoom-media"]:is(:hover, :focus-within)
+    img {
+    transform: scale(1.06);
+  }
+}
+@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+    [data-ch-hover="tilt"]:hover {
+    transform: perspective(900px) rotateX(calc((0.5 - var(--ch-my, 0.5)) * 7deg))
+      rotateY(calc((var(--ch-mx, 0.5) - 0.5) * 7deg));
+  }
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+    [data-ch-hover="magnetic"]:hover {
+    transform: translate(
+      calc((var(--ch-mx, 0.5) - 0.5) * 12px),
+      calc((var(--ch-my, 0.5) - 0.5) * 12px)
+    );
+  }
+}
+/* The reader's pause control (RFC-0024 §1) stops every loop on the page, ambient layers included. */
+:root[data-ch-motion-paused] *,
+:root[data-ch-motion-paused] *::before,
+:root[data-ch-motion-paused] *::after {
+  animation-play-state: paused !important;
+}
+.ch-motion {
+  display: block;
+}

package/dist/assets/starters/blog/src/styles/features/overlays.css

@@ -0,0 +1,324 @@
+/*
+ * RFC-0025 §3: overlays (Dialog, Drawer, Popover, Tooltip, Lightbox). Native top-layer elements,
+ * painted from the color roles; the page behind a modal does not scroll.
+ */
+html:has(dialog:modal) {
+  overflow: hidden;
+  scrollbar-gutter: stable;
+}
+.ch-dialog {
+  margin: auto;
+  padding: 0;
+  border: 0;
+  width: 100%;
+  max-width: min(36rem, calc(100vw - 2rem));
+  max-height: min(85dvh, 48rem);
+  overflow: auto;
+  overscroll-behavior: contain;
+  border-radius: var(--ch-radius-l, 0.75rem);
+  background: var(--ch-color-surface);
+  color: var(--ch-color-text);
+  box-shadow: 0 24px 60px -16px rgb(0 0 0 / 0.4);
+}
+.ch-dialog[data-size="s"] {
+  max-width: min(24rem, calc(100vw - 2rem));
+}
+.ch-dialog[data-size="l"] {
+  max-width: min(52rem, calc(100vw - 2rem));
+}
+.ch-dialog::backdrop {
+  background: rgb(0 0 0 / 0.5);
+}
+.ch-dialog__head {
+  @apply sticky top-0 z-10 flex items-center justify-between gap-4 px-5 py-4;
+  background: inherit;
+  border-bottom: 1px solid var(--ch-color-border);
+}
+.ch-dialog__title {
+  @apply text-lg font-semibold;
+}
+.ch-dialog__close {
+  @apply inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full;
+}
+.ch-dialog__close:hover,
+.ch-lightbox__nav button:hover {
+  background: color-mix(in oklab, currentColor 12%, transparent);
+}
+.ch-dialog__body {
+  @apply grid gap-4 px-5 py-5;
+}
+/* Drawers: the full height of an edge, or the bottom (a sheet on phones). */
+.ch-drawer {
+  margin: 0;
+  height: 100dvh;
+  max-height: none;
+  width: min(26rem, calc(100vw - 3rem));
+  border-radius: 0;
+}
+.ch-drawer[data-size="s"] {
+  width: min(20rem, calc(100vw - 3rem));
+}
+.ch-drawer[data-size="l"] {
+  width: min(36rem, calc(100vw - 3rem));
+}
+.ch-drawer[data-placement="end"] {
+  margin-inline-start: auto;
+}
+.ch-drawer[data-placement="bottom"] {
+  margin-block-start: auto;
+  width: 100%;
+  max-width: none;
+  height: auto;
+  max-height: 85dvh;
+  border-radius: var(--ch-radius-l, 0.75rem) var(--ch-radius-l, 0.75rem) 0 0;
+}
+/* Popovers and tooltips sit next to their trigger (anchor positioning; the module elsewhere). */
+.ch-popover {
+  margin: 0;
+  inset: auto;
+  position-area: bottom span-right;
+  position-try-fallbacks: flip-block, flip-inline;
+  margin-block-start: 8px;
+  width: 18rem;
+  max-width: calc(100vw - 2rem);
+  padding: 1rem;
+  border: 1px solid var(--ch-color-border);
+  border-radius: var(--ch-radius-m, 0.5rem);
+  background: var(--ch-color-surface);
+  color: var(--ch-color-text);
+  box-shadow: 0 12px 32px -12px rgb(0 0 0 / 0.3);
+}
+.ch-popover[data-width="s"] {
+  width: 12rem;
+}
+.ch-popover[data-width="l"] {
+  width: 26rem;
+}
+.ch-popover[data-placement="top"] {
+  position-area: top span-right;
+  margin-block: 0 8px;
+}
+.ch-popover[data-placement="start"] {
+  position-area: left span-bottom;
+  margin: 0 8px 0 0;
+}
+.ch-popover[data-placement="end"] {
+  position-area: right span-bottom;
+  margin: 0 0 0 8px;
+}
+.ch-popover > * + * {
+  margin-block-start: 0.75rem;
+}
+.ch-tooltip {
+  margin: 0;
+  inset: auto;
+  position-area: top;
+  position-try-fallbacks: flip-block;
+  margin-block-end: 6px;
+  max-width: 16rem;
+  padding: 0.375rem 0.625rem;
+  border: 0;
+  border-radius: var(--ch-radius-s, 0.25rem);
+  background: var(--ch-color-surface-inverse);
+  color: var(--ch-color-text-inverse);
+  font-size: 0.8125rem;
+  line-height: 1.35;
+}
+/* Lightbox: thumbnails, then the images large on a dark stage. */
+.ch-lightbox__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+  gap: 0.5rem;
+}
+.ch-lightbox__thumb {
+  display: block;
+  overflow: hidden;
+  border-radius: var(--ch-radius-s, 0.25rem);
+}
+.ch-lightbox__thumb img {
+  aspect-ratio: 1;
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+}
+.ch-lightbox__dialog {
+  max-width: min(72rem, calc(100vw - 2rem));
+  background: #0b0b0c;
+  color: #f4f4f5;
+}
+.ch-lightbox__dialog .ch-dialog__head {
+  border-bottom-color: rgb(255 255 255 / 0.12);
+}
+.ch-lightbox__count {
+  @apply text-sm tabular-nums;
+}
+.ch-lightbox__stage {
+  @apply px-5 py-4;
+}
+/* RFC-0028: one stage size for every picture; each shows whole, its sides filled by itself blurred
+   (the image's own placeholder layer), so moving between portrait and landscape never jumps. */
+.ch-lightbox__item img {
+  display: block;
+  width: 100%;
+  height: min(70dvh, 56rem);
+  object-fit: contain;
+  border-radius: var(--ch-radius-m, 0.5rem);
+}
+.ch-lightbox__item figcaption {
+  @apply mt-3 text-center text-sm;
+  color: #d4d4d8;
+}
+.ch-lightbox__nav {
+  @apply flex justify-center gap-4 pb-5;
+}
+.ch-lightbox__nav button {
+  @apply inline-flex size-11 cursor-pointer items-center justify-center rounded-full text-2xl;
+}
+/* Entrances and exits at the site's motion level (RFC-0024); none under reduced motion. */
+:root:not([data-ch-motion="none"]) :is(.ch-dialog, .ch-popover, .ch-tooltip) {
+  transition:
+    opacity var(--ch-dur-2, 0.2s) ease-out,
+    translate var(--ch-dur-2, 0.2s) var(--ch-ease-out, ease-out),
+    display var(--ch-dur-2, 0.2s) allow-discrete,
+    overlay var(--ch-dur-2, 0.2s) allow-discrete;
+}
+:root:not([data-ch-motion="none"])
+  :is(.ch-dialog:not([open]), .ch-popover:not(:popover-open), .ch-tooltip:not(:popover-open)) {
+  opacity: 0;
+}
+@starting-style {
+  .ch-dialog[open] {
+    opacity: 0;
+    translate: 0 0.5rem;
+  }
+  .ch-drawer[data-placement="end"][open] {
+    translate: 100% 0;
+  }
+  .ch-drawer[data-placement="start"][open] {
+    translate: -100% 0;
+  }
+  .ch-drawer[data-placement="bottom"][open] {
+    translate: 0 100%;
+  }
+  .ch-popover:popover-open {
+    opacity: 0;
+    translate: 0 -0.25rem;
+  }
+  .ch-tooltip:popover-open {
+    opacity: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :is(.ch-dialog, .ch-popover, .ch-tooltip) {
+    transition: none !important;
+  }
+}
+
+/*
+ * RFC-0025 25d: the announcement and consent bars, toasts, mega panels and the footer's region.
+ * A closed bar is hidden by the root marks `prefs.1.js` sets before the page paints.
+ */
+.ch-announcement {
+  @apply relative flex items-center justify-center gap-3 px-10 py-2 text-center text-sm;
+  background: var(--ch-color-surface-inverse);
+  color: var(--ch-color-text-inverse);
+}
+.ch-announcement[data-tone="brand"] {
+  background: var(--ch-color-brand);
+  color: var(--ch-color-on-brand);
+}
+.ch-announcement[data-tone="warning"] {
+  background: #fef3c7;
+  color: #78350f;
+}
+.ch-announcement__text a {
+  @apply ml-2 font-medium underline underline-offset-2;
+  color: inherit;
+}
+.ch-announcement__close {
+  @apply absolute end-2 top-1/2 inline-flex size-8 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full;
+}
+.ch-announcement__close:hover {
+  background: color-mix(in oklab, currentColor 15%, transparent);
+}
+:root[data-ch-announcement-dismissed] .ch-announcement {
+  display: none;
+}
+/* The consent bar: at the bottom, never over what has focus (the page keeps room for it). */
+.ch-consent {
+  @apply fixed inset-x-3 bottom-3 z-50 mx-auto flex max-w-3xl flex-wrap items-center justify-between gap-3 rounded-lg px-4 py-3 text-sm;
+  background: var(--ch-color-surface-raised, var(--ch-color-surface));
+  color: var(--ch-color-text);
+  border: 1px solid var(--ch-color-border);
+  box-shadow: 0 12px 32px -12px rgb(0 0 0 / 0.3);
+}
+.ch-consent__text a {
+  @apply ml-1 underline underline-offset-2;
+}
+.ch-consent__actions {
+  @apply flex gap-2;
+}
+.ch-consent__actions .ch-button {
+  @apply px-3 py-1.5 text-sm;
+}
+:root[data-ch-consent] .ch-consent {
+  display: none;
+}
+:root:not([data-ch-consent]):has(.ch-consent) {
+  scroll-padding-bottom: calc(var(--ch-consent-h, 5rem) + 1rem);
+}
+:root:not([data-ch-consent]):has(.ch-consent) body {
+  padding-bottom: calc(var(--ch-consent-h, 5rem) + 1rem);
+}
+/* Toasts: short news in a live region; the newest at the bottom. */
+.ch-toasts {
+  @apply pointer-events-none fixed inset-x-0 bottom-4 z-50 flex flex-col items-center gap-2;
+}
+.ch-toast {
+  @apply rounded-full px-4 py-2 text-sm shadow-lg;
+  background: var(--ch-color-surface-inverse);
+  color: var(--ch-color-text-inverse);
+}
+:root:not([data-ch-motion="none"]) .ch-toast {
+  transition:
+    opacity var(--ch-dur-2, 0.2s) ease-out,
+    translate var(--ch-dur-2, 0.2s) ease-out;
+}
+@starting-style {
+  .ch-toast {
+    opacity: 0;
+    translate: 0 0.5rem;
+  }
+}
+/* A mega panel: under the header, as wide as it, its groups in columns. */
+.ch-nav-menu__pop--mega {
+  position-area: none;
+  inset: var(--ch-header-h, 4.75rem) 1rem auto 1rem;
+  margin: 0 auto;
+  width: auto;
+  max-width: 72rem;
+  padding: 1.5rem;
+}
+.ch-mega {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+  gap: 1.5rem;
+}
+.ch-mega__heading {
+  @apply mb-2 text-xs font-semibold text-zinc-500 uppercase;
+}
+.ch-mega__col ul,
+ul.ch-mega__col {
+  @apply grid gap-0.5;
+}
+/* The footer's surface region sits above the columns, in the footer's width. */
+.ch-footer__region {
+  @apply mb-10 text-base;
+  color: var(--ch-color-text);
+}
+.ch-footer[data-surface="inverse"] .ch-footer__region {
+  color: inherit;
+}
+.ch-footer__region .ch-surface {
+  padding: 0;
+}

package/dist/assets/starters/blog/src/styles/features/prose.css

@@ -0,0 +1,140 @@
+/* Section defaults; a theme overrides these or swaps components. */
+.ch-hero {
+  @apply py-12;
+}
+.ch-hero h1 {
+  @apply text-4xl font-bold tracking-tight;
+}
+.ch-hero__sub {
+  @apply mt-3 text-lg text-zinc-600;
+}
+.ch-hero__cta {
+  @apply mt-6 inline-block rounded px-4 py-2 text-(--ch-color-on-brand);
+  background: var(--ch-color-brand);
+}
+.ch-article-header {
+  @apply space-y-2 border-b border-zinc-200 pt-8 pb-6;
+}
+.ch-article-header h1 {
+  @apply text-4xl font-bold tracking-tight;
+}
+.ch-summary {
+  @apply text-lg text-zinc-600;
+}
+.ch-article-header time {
+  @apply text-sm text-zinc-500;
+}
+.ch-richtext {
+  @apply space-y-4 py-6 leading-relaxed;
+}
+.ch-richtext h1 {
+  @apply text-3xl font-bold;
+}
+.ch-richtext h2 {
+  @apply text-2xl font-semibold;
+}
+.ch-richtext h3 {
+  @apply pt-2 text-xl font-semibold;
+}
+.ch-richtext h2 {
+  @apply pt-4;
+}
+/* The body's own markdown (no class: surface components inside a body keep their styles). The
+   reset clears lists, tables, quotes and code; these bring them back in the theme's roles. */
+.ch-richtext :is(ul, ol):not([class]) {
+  padding-inline-start: 1.5em;
+}
+.ch-richtext ul:not([class]) {
+  list-style: disc;
+}
+.ch-richtext ol:not([class]) {
+  list-style: decimal;
+}
+.ch-richtext :is(ul, ol):not([class]) :is(ul, ol):not([class]) {
+  margin-block-start: 0.35em;
+}
+.ch-richtext ul:not([class]) ul:not([class]) {
+  list-style: circle;
+}
+.ch-richtext li:not([class]) + li:not([class]) {
+  margin-block-start: 0.35em;
+}
+.ch-richtext li::marker {
+  color: var(--ch-color-text-muted);
+}
+/* Task lists: the checkbox is the marker. */
+.ch-richtext ul:not([class]):has(> li > input[type="checkbox"]) {
+  list-style: none;
+  padding-inline-start: 0.25em;
+}
+.ch-richtext li > input[type="checkbox"] {
+  inline-size: 1em;
+  block-size: 1em;
+  margin-inline-end: 0.5em;
+  vertical-align: -0.125em;
+  accent-color: var(--ch-color-brand);
+}
+.ch-richtext blockquote:not([class]) {
+  border-inline-start: 3px solid var(--ch-color-border-strong);
+  padding-inline-start: 1em;
+  color: var(--ch-color-text-muted);
+  font-style: italic;
+}
+.ch-richtext :not(pre) > code {
+  @apply rounded px-1.5 py-0.5;
+  font-size: 0.9em;
+  background: var(--ch-color-surface-muted);
+}
+.ch-richtext pre:not([class]) {
+  @apply overflow-x-auto rounded-lg px-4 py-3 text-sm leading-relaxed;
+  background: var(--ch-color-surface-muted);
+  border: 1px solid var(--ch-color-border);
+}
+.ch-richtext hr:not([class]) {
+  border: 0;
+  border-block-start: 1px solid var(--ch-color-border);
+  margin-block: 2rem;
+}
+/* Tables: ruled rows, a header, the column alignment markdown asked for; wide ones scroll on
+   their own (the page never scrolls sideways). */
+.ch-richtext table:not([class]) {
+  display: block;
+  inline-size: max-content;
+  max-inline-size: 100%;
+  overflow-x: auto;
+  border-collapse: collapse;
+  font-size: 0.95em;
+  font-variant-numeric: tabular-nums;
+}
+.ch-richtext table:not([class]) :is(th, td) {
+  padding: 0.45em 0.8em;
+  border-block-end: 1px solid var(--ch-color-border);
+  text-align: start;
+  vertical-align: top;
+}
+.ch-richtext table:not([class]) th {
+  font-weight: 600;
+  border-block-end-color: var(--ch-color-border-strong);
+}
+.ch-richtext table:not([class]) :is(th, td)[align="center"] {
+  text-align: center;
+}
+.ch-richtext table:not([class]) :is(th, td)[align="right"] {
+  text-align: end;
+}
+/* Footnotes: small raised numbers, the notes listed at the end under a rule. */
+.ch-fnref a {
+  @apply px-0.5 text-xs no-underline;
+  color: var(--ch-color-link);
+}
+.ch-footnotes {
+  @apply mt-10 pt-4 text-sm;
+  border-block-start: 1px solid var(--ch-color-border);
+  color: var(--ch-color-text-muted);
+}
+.ch-footnotes ol {
+  @apply list-decimal space-y-1 ps-5;
+}
+.ch-fnback {
+  @apply no-underline;
+}