@aortl/admin-css 0.16.1 → 0.16.2

package/src/components/container.css

@@ -1,8 +1,6 @@
 @layer components {
-  /* Page content region — a centered, max-width column that also owns the
-     vertical rhythm between stacked page sections. Drop it inside the bare
-     `.app-shell-main` (which has no padding of its own). Width presets just
-     set `--container-max`; override the var per-instance to deviate. */
+  /* Goes inside the bare `.app-shell-main` (no padding of its own); override
+     `--container-max` per-instance to deviate from the presets. */
   .container {
     @apply flex flex-col gap-6 w-full mx-auto px-6 py-6;
     max-width: var(--container-max, 90rem);
@@ -16,17 +14,15 @@
     --container-max: 115rem;
   }
 
-  /* Full-bleed: edge-to-edge within `main`, padding retained. */
   .container-fluid {
     --container-max: none;
   }
 
-  /* Denser vertical rhythm + tighter block padding for packed screens. */
   .container-compact {
     @apply gap-4 py-4;
   }
 
-  /* Less horizontal padding on small viewports — reuses the shell breakpoint. */
+  /* Reuses the shell breakpoint. */
   @media (max-width: 48rem) {
     .container {
       @apply px-4;

package/src/components/dialog.css

@@ -9,9 +9,8 @@
     width: calc(100% - 2rem);
     max-width: 32rem;
     max-height: calc(100dvh - 2rem);
-    /* Long titles/descriptions (filenames, IDs) break instead of pushing past
-       the fixed max-width. Inherited by title + description; `.dialog-title`
-       additionally needs `min-width: 0` below since it's a flex item. */
+    /* Long tokens (filenames, IDs) break instead of pushing past max-width;
+       inherited by title + description. */
     overflow-wrap: break-word;
     opacity: 1;
     transform: translateY(0) scale(1);
@@ -22,9 +21,8 @@
       transform 150ms ease-out;
   }
 
-  /* `display: flex` only when open — without this gate, our flex rule would
-     override the UA `dialog:not([open]) { display: none }` and the dialog
-     would render in-flow before showModal() was ever called. */
+  /* Gate on [open] — an unconditional flex would override the UA's
+     `dialog:not([open]) { display: none }` and render the dialog in-flow. */
   .dialog[open] {
     display: flex;
   }
@@ -37,7 +35,6 @@
       background 150ms ease-out;
   }
 
-  /* Entry — animate from these values up to the open state. */
   @starting-style {
     .dialog[open] {
       opacity: 0;
@@ -64,8 +61,7 @@
 
   .dialog-title {
     @apply flex-1 flex items-center gap-2 text-lg font-semibold leading-tight m-0;
-    /* `flex-1` flex item — let it shrink so a long title wraps rather than
-       blowing the header past the dialog's max-width. */
+    /* Let a long title shrink and wrap rather than widen the header. */
     min-width: 0;
   }
 
@@ -73,16 +69,14 @@
     @apply px-5 -mt-2 mb-3 text-sm text-text-muted;
   }
 
-  /* `flex-1 min-h-0` lets the body fill the remaining height and shrink below
-     its content (a flex item's default `min-height: auto` would refuse to), so
-     tall content scrolls here while the header/footer stay pinned. */
+  /* min-h-0 beats the flex default `min-height: auto` so tall content scrolls
+     here while the header/footer stay pinned. */
   .dialog-body {
     @apply flex-1 min-h-0 px-5 py-3 overflow-y-auto flex flex-col gap-3;
   }
 
-  /* When the body is wrapped in a `<form>` (the form-dialog pattern), the form
-     becomes the dialog's sole flex child — make it the flex column so the body's
-     `flex-1 min-h-0` still resolves and scrolls. */
+  /* In the form-dialog pattern the form is the sole flex child; it must carry
+     the flex column so the body's `flex-1 min-h-0` still scrolls. */
   .dialog > form {
     @apply flex flex-col min-h-0 flex-1;
   }
@@ -92,9 +86,8 @@
            px-5 py-3
            border-t border-border
            bg-surface-muted;
-    /* Inherits the dialog's bottom-corner radius so the muted background
-       doesn't square off past the parent's rounded corners — previously
-       handled by `overflow: hidden` on `.dialog`, which clipped popups. */
+    /* Keep the muted background inside the parent's rounded corners — don't
+       use `overflow: hidden` on `.dialog` for this; it clips popups. */
     border-bottom-left-radius: inherit;
     border-bottom-right-radius: inherit;
   }

package/src/components/field.css

@@ -1,14 +1,11 @@
 @layer components {
   .field {
     @apply flex flex-col gap-1.5;
-    /* Label/description/error are often operator- or validation-supplied — let
-       long tokens break instead of overflowing a narrow form column. Inherited
-       by all three. Mirrors `.alert`. */
+    /* Long operator-/validation-supplied tokens break instead of overflowing;
+       inherited by label, description, and error. */
     overflow-wrap: break-word;
   }
 
-  /* Horizontal layout — pairs a control (typically a switch) with its label
-     on one row. Use when the label belongs beside the control, not above it. */
   .field-row {
     @apply flex-row items-center gap-3;
   }
@@ -34,8 +31,7 @@
     @apply text-xs text-danger leading-relaxed;
   }
 
-  /* When the field is in an invalid state, tint the contained control.
-     Base UI applies data-invalid on the Field root once validation fails. */
+  /* Base UI sets data-invalid on the Field root when validation fails. */
   .field[data-invalid] .input,
   .field[data-invalid] .textarea,
   .field[data-invalid] .select,

package/src/components/footer.css

@@ -1,7 +1,6 @@
 @layer components {
-  /* 2px top stripe mirrors the navbar's bottom stripe — both default to
-     a neutral gray via `--color-system-accent` and brand-shift together
-     when the consuming app overrides that variable at :root. */
+  /* The top stripe mirrors the navbar's bottom stripe; both brand-shift
+     together when the app overrides `--color-system-accent` at :root. */
   .footer {
     @apply flex flex-wrap items-center justify-between gap-3 px-4 py-3
            bg-surface-muted text-text-muted

package/src/components/indicator.css

@@ -1,23 +1,13 @@
 @layer components {
-  /*
-   * Wrapper for placing a small floating element (badge, count, status dot)
-   * at a corner or edge of another element — notification badges on icon
-   * buttons, status dots on avatars, "new" markers on tiles.
-   *
-   * Composition is driven by CSS custom properties so a horizontal modifier
-   * (start/center/end) and a vertical modifier (top/middle/bottom) compose
-   * naturally without needing a 3×3 grid of explicit selectors.
-   */
+  /* Floats a small element (badge, dot) at a corner/edge of an anchor.
+     Placement is var-driven so a horizontal and a vertical modifier compose
+     without a 3×3 grid of selectors. */
   .indicator {
     @apply relative inline-flex w-max;
   }
 
-  /*
-   * Auto-offset for common rounded anchors so the indicator aligns with the
-   * visual corner instead of the geometric box corner. Roughly half the
-   * anchor's border-radius. Override per-instance by passing the `offset`
-   * prop or setting `--indicator-offset` inline.
-   */
+  /* Auto-offset (~half the anchor's border-radius) aligns with the visual
+     corner of rounded anchors; override `--indicator-offset` inline. */
   .indicator:has(> .btn),
   .indicator:has(> .input) {
     --indicator-offset: 2px;
@@ -32,14 +22,9 @@
     bottom: var(--indicator-bottom, auto);
     inset-inline-start: var(--indicator-start, auto);
     inset-inline-end: var(--indicator-end, 0);
-    /*
-     * Two composed translates: the first half-overlaps the corner; the second
-     * pulls the item back toward the anchor center by `--indicator-offset`
-     * (default 0). The pull direction is set per-modifier so it tracks the
-     * placement automatically — e.g. `top-end` pulls left-and-down. Useful
-     * for anchors with rounded corners: try `--indicator-offset: 4px` for a
-     * `rounded-md` button.
-     */
+    /* The first translate half-overlaps the corner; the second pulls back
+       toward the anchor centre by `--indicator-offset`, direction set
+       per-modifier. */
     transform: translate(var(--indicator-tx, 50%), var(--indicator-ty, -50%))
       translate(
         var(--indicator-offset-x, calc(-1 * var(--indicator-offset, 0px))),
@@ -87,11 +72,7 @@
     --indicator-offset-y: calc(-1 * var(--indicator-offset, 0px));
   }
 
-  /*
-   * Status dot — a small saturated circle for label-less presence/status.
-   * A `.badge` with no content is still a pill (fixed height, horizontal
-   * padding); a dot needs to actually be round.
-   */
+  /* Status dot — an empty `.badge` is still a pill; a dot must be round. */
   .indicator-dot {
     @apply inline-block w-2 h-2 rounded-full bg-text-muted;
   }

package/src/components/input-group.css

@@ -3,9 +3,8 @@
     @apply inline-flex w-full;
   }
 
-  /* Clear all corners, then re-apply the outer ones on the first/last
-     child. Equal-specificity rules win because input-group.css imports
-     after input.css. */
+  /* Equal-specificity override of `.input`'s radius — works only because
+     input-group.css imports after input.css. */
   .input-group > * {
     @apply rounded-none;
   }
@@ -18,13 +17,11 @@
     @apply rounded-r-lg;
   }
 
-  /* Collapse the shared edge between adjacent children. */
   .input-group > :not(:first-child) {
     margin-left: -1px;
   }
 
-  /* Float the focused element so its outline ring and accented border
-     can't be clipped by its neighbour's overlapping edge. */
+  /* Lift above the neighbour's overlapping edge so the focus ring isn't clipped. */
   .input-group > :focus,
   .input-group > :focus-within {
     @apply relative z-10;

package/src/components/input.css

@@ -18,8 +18,7 @@
     @apply border-danger hover:border-danger focus-visible:outline-danger;
   }
 
-  /* Status variants — border + focus outline only; text stays `text-text`, so
-     warning's yellow accent (which fails AA as text) is fine here. */
+  /* Status variants tint border + outline only — warning's yellow fails AA as text. */
   .input-info {
     @apply border-info hover:border-info focus-visible:outline-info;
   }
@@ -41,9 +40,7 @@
     @apply text-base px-4 py-2.5;
   }
 
-  /* Native date/time picker glyph. The browser handles dark-mode coloring
-     via the inherited `color-scheme` set on [data-theme]; we just tone the
-     glyph down at rest and brighten it on hover so it reads as interactive. */
+  /* Dark-mode glyph coloring comes free via the inherited `color-scheme`. */
   .input::-webkit-calendar-picker-indicator {
     @apply opacity-60 cursor-pointer hover:opacity-100;
   }

package/src/components/kbd.css

@@ -1,6 +1,5 @@
 @layer components {
-  /* A single keyboard chip — one modifier or key. Stack inside a `.kbd-group`
-     for multi-key chords. */
+  /* One key per chip; stack inside `.kbd-group` for chords. */
   .kbd {
     @apply inline-flex items-center justify-center
            min-w-[1.25em] h-[1.4em] px-[0.35em]
@@ -10,15 +9,12 @@
            whitespace-nowrap tabular-nums;
   }
 
-  /* Cluster of `.kbd` chips. Always emitted by the React `<Kbd>` component so
-     selectors can target the whole binding as a unit. */
+  /* Always emitted by the React `<Kbd>` so selectors can target the whole binding. */
   .kbd-group {
     @apply inline-flex items-center gap-1 align-middle;
   }
 
-  /* Inside an action surface (button, menu item), the chip derives its
-     colour from the host so it stays legible on any variant without
-     fighting the surrounding chrome. */
+  /* Derive the chip colour from the host so it stays legible on any variant. */
   .btn .kbd,
   .menu-item .kbd {
     color: currentColor;
@@ -26,20 +22,18 @@
     border-color: color-mix(in srgb, currentColor 22%, transparent);
   }
 
-  /* Subtle dimming for the leading cluster on a button so the label keeps
-     visual priority. The cluster, not each chip, so a `Ctrl S` reads as
-     a single unit. */
+  /* Dim the cluster (not each chip, so the chord reads as one unit) to keep
+     the label's visual priority. */
   .btn > .kbd-group {
     opacity: 0.85;
   }
 
-  /* Right-pin the binding inside menu items — matches native menu convention. */
+  /* Matches native menu convention. */
   .menu-item > .kbd-group {
     margin-inline-start: auto;
   }
 
-  /* Right-pin inside vertical button groups only. Standalone buttons keep the
-     inline-trailing layout (chip sits next to the label). */
+  /* Vertical groups only — standalone buttons keep the chip beside the label. */
   .btn-group-vertical > .btn > .kbd-group {
     margin-inline-start: auto;
   }

package/src/components/link.css

@@ -5,21 +5,15 @@
            rounded-sm transition-colors duration-150
            hover:text-link-hover
            focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus;
-    /* Links are often the URL itself — let the long token break across lines
-       instead of overflowing a narrow row, sidebar, or table cell. The leading
-       icon stays `flex-shrink: 0` below. */
+    /* Links are often the URL itself — break instead of overflowing a narrow cell. */
     overflow-wrap: break-word;
   }
 
-  /* Keep a leading icon from squishing when the link text wraps. The trailing
-     external arrow is already `flex: none` below. */
   .link > :is(i, svg) {
     flex-shrink: 0;
   }
 
-  /* External affordance: a trailing ↗ rendered from CSS so it ships identically
-     in both bundles — no JS, no icon-font dependency. The arrow is a masked box
-     tinted with `currentColor`, so it tracks the link's color (incl. hover). */
+  /* Trailing ↗ drawn in CSS — no JS or icon-font dependency in either bundle. */
   .link-external {
     --link-external-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 7 7 17'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E");
   }

package/src/components/menu.css

@@ -1,12 +1,10 @@
 @layer components {
-  /* Native <details> drives open state — no JS needed. The popup is a
-     position: absolute child of the relative .menu root. */
+  /* Native <details> drives open state — no JS. */
   .menu {
     @apply relative inline-block;
   }
 
-  /* Behaviour — applied always so the trigger works regardless of
-     additional visual classes (e.g. `btn btn-primary` for a split button). */
+  /* Behaviour only — visual classes (e.g. `btn btn-primary`) may stack on top. */
   .menu-trigger {
     @apply inline-flex items-center gap-1.5
            cursor-pointer select-none
@@ -19,17 +17,14 @@
     display: none;
   }
 
-  /* Default appearance — bows out when `.btn` is also on the trigger so
-     button classes (bg, hover, padding, text colour) take over cleanly. */
+  /* Default appearance — bows out when `.btn` supplies its own. */
   .menu-trigger:not(.btn) {
     @apply px-2.5 py-1.5 rounded-md text-sm leading-none
            text-text bg-transparent
            hover:bg-surface-strong;
   }
 
-  /* Chevron uses currentColor so it tracks the trigger's text colour —
-     muted text on the default trigger, content colour on a btn-primary
-     split button, etc. Sized in em so it scales with btn-sm / btn-lg. */
+  /* em-sized so the chevron scales with btn-sm / btn-lg. */
   .menu-trigger::after {
     content: "";
     width: 0.5em;
@@ -41,8 +36,7 @@
     flex-shrink: 0;
   }
 
-  /* Icon-only triggers (e.g. the dropdown half of a split button) center
-     their chevron instead of letting it sit at the start. */
+  /* A text-less trigger (split-button dropdown half) centers its chevron. */
   .menu-trigger:empty {
     @apply justify-center;
   }
@@ -59,15 +53,9 @@
            border border-border rounded-lg shadow-md;
   }
 
-  /* CSS anchor positioning makes the popup `position: fixed` so it escapes
-     ancestor `overflow: hidden`/`overflow: auto` clipping — necessary when
-     the menu lives inside a `<dialog>` (top-layer + overflow: hidden) or a
-     scroll-clipped surface like a card body. `anchor-scope` keeps each
-     menu's anchor lookups isolated so multiple menus on the page don't
-     cross-target, and `position-try-fallbacks` flips the popup above the
-     trigger when there isn't room below. Browsers without anchor
-     positioning (Firefox, as of early 2026) fall back to the absolute
-     rules above and clip as before. */
+  /* Anchor positioning makes the popup fixed so it escapes ancestor overflow
+     clipping (e.g. inside a <dialog>); browsers without it (Firefox, early
+     2026) fall back to the absolute rules above and clip as before. */
   @supports (anchor-name: --x) {
     .menu {
       anchor-scope: --menu-trigger;
@@ -100,9 +88,7 @@
            hover:bg-surface-muted
            focus-visible:bg-surface-muted focus-visible:outline-none
            disabled:opacity-50 disabled:cursor-not-allowed;
-    /* The popup has no max-width, so let a long label (entity name, file path)
-       break and shrink rather than grow the popup horizontally. Item icons stay
-       `flex-shrink: 0` below. */
+    /* The popup has no max-width — break long labels instead of growing it. */
     overflow-wrap: break-word;
     min-width: 0;
   }
@@ -111,7 +97,6 @@
     @apply opacity-50 cursor-not-allowed;
   }
 
-  /* Don't let a constrained menu width squish a leading/trailing icon. */
   .menu-trigger > :is(i, svg),
   .menu-item > :is(i, svg) {
     flex-shrink: 0;

package/src/components/navbar.css

@@ -1,7 +1,6 @@
 @layer components {
-  /* 2px bottom stripe is always rendered — defaults to a neutral gray via
-     `--color-system-accent` and brand-shifts when the consuming app overrides
-     that variable at :root (see also `.footer` and `.brand-tile`). */
+  /* The bottom stripe brand-shifts when the consuming app overrides
+     `--color-system-accent` at :root (see also `.footer` and `.brand-tile`). */
   .navbar {
     @apply flex items-center gap-3 px-4 h-12
            bg-surface-muted text-text
@@ -31,19 +30,16 @@
     @apply bg-primary-muted text-primary;
   }
 
-  /* Keep brand/item icons at their intrinsic size in a crowded bar. */
   .navbar-brand > :is(i, svg),
   .navbar-item > :is(i, svg) {
     flex-shrink: 0;
   }
 
-  /* Right-aligned slot for actions: shop selector, user menu, etc. */
   .navbar-actions {
     @apply flex items-center gap-2 ml-auto;
   }
 
-  /* Hamburger; hidden above the md breakpoint. The three lines are drawn
-     with one element + two box-shadow strokes — no SVG needed. */
+  /* Hamburger — three lines from one element + two box-shadow strokes. */
   .navbar-mobile-toggle {
     @apply inline-flex items-center justify-center size-9 -ml-2
            rounded-md text-text bg-transparent

package/src/components/pagination.css

@@ -8,7 +8,6 @@
     @apply inline-flex;
   }
 
-  /* Square button shared by number, prev/next, and ellipsis containers. */
   .page-link {
     @apply inline-flex items-center justify-center
            min-w-8 h-8 px-2
@@ -23,8 +22,7 @@
            disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none;
   }
 
-  /* Current page — same surface as a sidebar's active item so the visual
-     metaphor is consistent. */
+  /* Same surface as a sidebar's active item. */
   .page-link.active,
   .page-link[aria-current="page"] {
     @apply bg-primary-muted text-primary border-primary-muted;
@@ -34,7 +32,6 @@
     @apply opacity-50 cursor-not-allowed pointer-events-none;
   }
 
-  /* Ellipsis — non-interactive placeholder between groups of pages. */
   .page-ellipsis {
     @apply inline-flex items-center justify-center
            min-w-8 h-8 px-2

package/src/components/progress.css

@@ -1,7 +1,5 @@
 @layer components {
-  /* Native <progress> styled across engines. `appearance: none` strips the
-     platform default; the track is the element itself, the fill comes from
-     ::-webkit-progress-value / ::-moz-progress-bar. */
+  /* The track is the element itself; the fill is the engine-specific value pseudo. */
   .progress {
     appearance: none;
     -webkit-appearance: none;
@@ -32,7 +30,6 @@
     transition: inline-size 200ms ease;
   }
 
-  /* Sizes */
   .progress-sm {
     height: 0.25rem;
   }
@@ -54,9 +51,8 @@
     color: var(--color-danger);
   }
 
-  /* Indeterminate — no value attribute. WebKit hides the value pseudo, Firefox
-     draws it full-width; in both cases we paint an animated gradient on the
-     bar itself. */
+  /* When indeterminate, WebKit hides the value pseudo and Firefox draws it
+     full-width — blank both and animate a gradient on the bar itself. */
   .progress:indeterminate {
     background-image: linear-gradient(
       90deg,

package/src/components/property-list.css

@@ -1,6 +1,4 @@
 @layer components {
-  /* Outer section — owns striped, hide-if-empty modifiers. Title
-     (optional) and the items grid stack vertically. */
   .property-list {
     @apply flex flex-col text-sm text-text;
   }
@@ -9,8 +7,7 @@
     @apply text-sm font-bold text-text mb-2;
   }
 
-  /* The <dl> itself is the two-track grid; <dt> auto-flows into column 1
-     and <dd> into column 2. */
+  /* The <dl> is the grid; <dt>/<dd> auto-flow into the two tracks. */
   .property-list-items {
     display: grid;
     grid-template-columns: max-content 1fr;
@@ -25,15 +22,12 @@
     @apply text-text-muted;
   }
 
-  /* `min-w-0` lets the value's grid track shrink below its content; pair it
-     with `break-words` so long unbreakable values (IDs, hashes, emails, URLs,
-     file paths) break instead of overflowing the column. */
+  /* `min-w-0` lets the track shrink below its content so long unbreakable
+     values break instead of overflowing the column. */
   .property-list-value {
     @apply gap-2 min-w-0 break-words;
   }
 
-  /* Compact density — tighter rows for sidebar info blocks or very many
-     short attributes. */
   .property-list-compact .property-list-title {
     @apply mb-1;
   }
@@ -43,7 +37,6 @@
     @apply px-2 py-0.5 min-h-6;
   }
 
-  /* Numeric — right-align + tabular-nums on the value. */
   .property-list-value-numeric {
     justify-content: flex-end;
     @apply tabular-nums;
@@ -60,8 +53,7 @@
     display: none;
   }
 
-  /* Copy button — always emitted by the Value but kept out of layout entirely
-     unless this specific value opts in. */
+  /* Always emitted by the Value; kept out of layout unless the value opts in. */
   .property-list-copy {
     @apply inline-flex items-center justify-center
            ml-auto rounded
@@ -82,8 +74,7 @@
     pointer-events: none;
   }
 
-  /* Reveal on hover of either the label or the value of a copyable row, on
-     button focus, or while feedback is active. */
+  /* Reveal on hover of the row's label or value, on focus, or during feedback. */
   .property-list-label:has(+ .property-list-value-copyable):hover
     + .property-list-value
     .property-list-copy,

package/src/components/prose.css

@@ -1,23 +1,13 @@
 @layer components {
-  /*
-   * Long-form rendered HTML — markdown output, CMS bodies, anything you can't
-   * annotate with the system's semantic class names. The global reset strips
-   * margins, list markers, and link styling from bare elements (so admin chrome
-   * stays neutral); `.prose` re-establishes them for its descendants only, using
-   * the semantic tokens so it follows dark mode and `--color-*` overrides.
-   *
-   * Descendant rules use `:where()` to stay at specificity 0 — a consumer's own
-   * `.prose a { … }` wins without `!important`.
-   */
+  /* Styles rendered HTML (markdown, CMS bodies) that can't carry the system's
+     class names — re-establishes what the global reset strips. Descendant rules
+     use `:where()` so a consumer's own `.prose a { … }` wins without `!important`. */
   .prose {
     @apply text-sm leading-normal text-text;
-    /* Long URLs/tokens in flow text break instead of overflowing a narrow
-       column. Inherited by p/li/a/td/blockquote; the deliberately-scrolling
-       `<pre>` keeps its own `white-space: pre` + `overflow-x: auto`. */
+    /* Break long URLs/tokens; the scrolling `<pre>` keeps its own `white-space: pre`. */
     overflow-wrap: break-word;
   }
 
-  /* Vertical rhythm — space between flow blocks, none at the container edges. */
   .prose :where(p, ul, ol, blockquote, pre, table, figure) {
     @apply my-3;
   }
@@ -28,8 +18,7 @@
     margin-bottom: 0;
   }
 
-  /* Headings — base.css already sizes h1–h3; here we add h4–h6 and the
-     sectioning rhythm. The edge reset above zeroes a leading heading's margin. */
+  /* base.css already sizes h1–h3; add h4–h6 and the sectioning rhythm. */
   .prose :where(h1, h2, h3, h4, h5, h6) {
     @apply mt-6 mb-2 font-semibold leading-tight;
   }
@@ -40,7 +29,6 @@
     @apply text-xs uppercase tracking-wide text-text-muted;
   }
 
-  /* Lists — restore the markers the reset removes. */
   .prose :where(ul) {
     @apply list-disc ps-5;
   }
@@ -54,7 +42,6 @@
   .prose :where(li) :where(p) {
     @apply my-1;
   }
-  /* Nested lists hug their parent item rather than taking full block spacing. */
   .prose :where(li > ul, li > ol) {
     @apply my-1;
   }
@@ -66,15 +53,13 @@
            focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus;
   }
 
-  /* Inline code — a tinted chip. */
   .prose :where(code) {
     @apply rounded border border-border bg-code-surface px-1 py-0.5
            font-mono text-code-text;
     font-size: 0.85em;
   }
 
-  /* Code blocks — the .code-block surface; strip the inline chip off nested
-     <code> so a highlighter's own tokens show through. */
+  /* Mirrors .code-block; nested <code> sheds the chip so highlighter tokens show. */
   .prose :where(pre) {
     @apply rounded-lg bg-code-surface p-3 font-mono text-sm text-code-text;
     white-space: pre;
@@ -85,12 +70,10 @@
     font-size: inherit;
   }
 
-  /* Blockquote — a quiet inline-start rule. */
   .prose :where(blockquote) {
     @apply border-s-2 border-border-strong ps-3 text-text-muted;
   }
 
-  /* Thematic break. */
   .prose :where(hr) {
     @apply my-6 border-0 border-t border-border;
   }
@@ -106,7 +89,6 @@
     @apply font-semibold text-text-muted;
   }
 
-  /* Media + emphasis. */
   .prose :where(img) {
     @apply h-auto max-w-full rounded-md;
   }