@refrakt-md/lumina 0.21.0 → 0.23.0

package/styles/layouts/split.css

@@ -1,193 +1,48 @@
-/* Shared media + content layout — used by card, recipe, hero, feature, step,
- * realm, faction, playlist (anything that uses the `splitLayoutAttributes`
- * preset). Same vocabulary as `bento-cell`:
- *   • `data-media-position="top"`    — media above content (default, block flow)
- *   • `data-media-position="bottom"` — media below content (flex column-reverse)
- *   • `data-media-position="start"`  — media beside content on the left  (grid)
- *   • `data-media-position="end"`    — media beside content on the right (grid)
+@layer skin {
+/* Shared media + content layout — skin.
  *
- * Body source order is always media-first (the `splitMediaBodyFooter` helper
- * splits `media --- content` zones in that order); the position dial decides
- * the visual order independently. */
+ * The layout *structure* (start/end grid, top/bottom stack, 3-section placement,
+ * the media-zone fill/clip mechanism, responsive collapse) lives in
+ * @refrakt-md/skeleton (layouts/split.css). What remains here is skin: the media
+ * radius tier, the beside-image depth shadow, and the codegroup radius alignment. */
 
-/* ─── Beside layouts (start / end): two-column grid ─────────────────── */
-
-[data-media-position="start"],
-[data-media-position="end"] {
-  display: grid;
-  grid-template-columns: var(--media-share, 50%) 1fr;
-  align-items: var(--split-valign, start);
-}
-
-/* "end" flips the grid so media lands in column 2 (right) instead of column 1.
- * Source order is media-first, so we re-place media via grid-column. */
-[data-media-position="end"] {
-  grid-template-columns: 1fr var(--media-share, 50%);
-}
-[data-media-position="end"] > [data-section="media"],
-[data-media-position="end"] > [data-name="media"] { grid-column: 2; }
-[data-media-position="end"] > [data-name="content"] { grid-column: 1; }
-
-/* `media-ratio` → media's share of the row width (shared across runes; mirrors
- * the bento-cell scale at `bento.css:50-54`). When unset, columns fall back to
- * the 50% default on `--media-share`. */
-[data-media-ratio="1/3"] { --media-share: 33.333%; }
-[data-media-ratio="2/5"] { --media-share: 40%; }
-[data-media-ratio="1/2"] { --media-share: 50%; }
-[data-media-ratio="3/5"] { --media-share: 60%; }
-[data-media-ratio="2/3"] { --media-share: 66.667%; }
-
-/* Grid so children can use justify-self/align-self (default: stretch) */
-[data-media-position="start"] > [data-name="media"],
-[data-media-position="end"] > [data-name="media"],
-[data-media-position="start"] > [data-section="media"],
-[data-media-position="end"] > [data-section="media"] {
-  display: grid;
-}
-
-/* ─── Stacked layouts (top / bottom) ────────────────────────────────── */
-
-/* "bottom" puts content on top, media at the bottom. Source order is media-
- * first, so column-reverse flips it visually without changing the DOM. */
-[data-media-position="bottom"] {
-  display: flex;
-  flex-direction: column-reverse;
-}
-
-/* ─── 3-section grid placement (header + content + media) ───────────── */
-/* Applies only when a `data-section="header"` child exists. 2-section runes
- * (e.g. hero, feature with the header rolled into content) fall through to
- * the simple 2-column flow above. */
-
-[data-media-position="start"]:has(> [data-section="header"]) > [data-section="header"] { grid-column: 1; grid-row: 1; }
-[data-media-position="start"]:has(> [data-section="header"]) > [data-name="content"]   { grid-column: 1; grid-row: 2; }
-[data-media-position="start"]:has(> [data-section="header"]) > [data-section="media"]  { grid-column: 2; grid-row: 1 / 3; }
-
-[data-media-position="end"]:has(> [data-section="header"]) > [data-section="header"] { grid-column: 2; grid-row: 1; }
-[data-media-position="end"]:has(> [data-section="header"]) > [data-name="content"]   { grid-column: 2; grid-row: 2; }
-[data-media-position="end"]:has(> [data-section="header"]) > [data-section="media"]  { grid-column: 1; grid-row: 1 / 3; }
-
-[data-media-position="start"]:has(> [data-section="header"]) > [data-section="media"],
-[data-media-position="end"]:has(> [data-section="header"]) > [data-section="media"] {
-  margin: 0;
-}
-
-/* ─── Media zone base styles ──────────────────────────────────────── */
-
-/* Media-zone guest adaptation (WORK-339 / SPEC-084). Any visual guest fills the
- * zone, and the zone clips, rounds, and becomes a container-query context — so
- * a tall guest scales/clips instead of ballooning, and intrinsically responsive
- * guests (e.g. `mockup`'s `cqi` auto-scale) resolve against the slot. Guests
- * that manage their own bleed / interactive chrome (preview, juxtapose, an
- * explicitly-bleeding showcase) self-declare an opt-out below so their
- * displacement isn't clipped. */
+/* Media guests use the smaller media radius tier so they never read as more
+ * rounded than the (larger-radius) container they sit in. */
 [data-section="media"] {
-  container-type: inline-size;
-  overflow: hidden;
-  /* Media guests use the smaller media radius tier so they never read as more
-   * rounded than the (larger-radius) container they sit in. */
-  border-radius: var(--rf-radius-media);
+	border-radius: var(--rf-radius-media);
 }
 [data-section="media"] > * {
-  display: block;
-  width: 100%;
-  max-height: 100%;
-  border-radius: inherit;
-  margin: 0;
-}
-[data-section="media"] > :is(img, video) {
-  height: 100%;
-  object-fit: cover;
-}
-[data-section="media"]:is(
-  :has(> [data-rune="preview"]),
-  :has(> [data-rune="juxtapose"]),
-  :has(> .rf-showcase[data-displace]:not(.rf-showcase--in-bento-cell))
-) {
-  overflow: visible;
-  container-type: normal;
+	border-radius: inherit;
 }
-/* `preview` (negative-margin breakout) and a displaced `showcase` (peek
- * spill) want the slot fully de-chromed so the bleed reads as edge-to-edge.
- * Juxtapose just opted out of the clip — it still wants to read as part of
- * the card surface, so it keeps the slot's rounded corners (juxtapose's
- * own `__panels` chrome is dropped instead; see surfaces.css). */
+
+/* `preview` (negative-margin breakout) and a displaced `showcase` (peek spill)
+ * want the slot fully de-chromed so the bleed reads as edge-to-edge. Juxtapose
+ * keeps the slot's rounded corners (it still reads as part of the card surface). */
 [data-section="media"]:is(
-  :has(> [data-rune="preview"]),
-  :has(> .rf-showcase[data-displace]:not(.rf-showcase--in-bento-cell))
+	:has(> [data-rune="preview"]),
+	:has(> .rf-showcase[data-displace]:not(.rf-showcase--in-bento-cell))
 ) {
-  border-radius: 0;
+	border-radius: 0;
 }
-/* …and let those self-managing guests keep their intrinsic width/sizing: the
- * generic `width: 100%` above would defeat a negative-margin breakout (e.g.
- * `preview--in-feature` bleeding to the viewport edge on mobile). */
 [data-section="media"]:is(
-  :has(> [data-rune="preview"]),
-  :has(> [data-rune="juxtapose"]),
-  :has(> .rf-showcase[data-displace]:not(.rf-showcase--in-bento-cell))
+	:has(> [data-rune="preview"]),
+	:has(> [data-rune="juxtapose"]),
+	:has(> .rf-showcase[data-displace]:not(.rf-showcase--in-bento-cell))
 ) > * {
-  width: auto;
-  max-height: none;
-  border-radius: 0;
+	border-radius: 0;
 }
 
-/* (Figure-style media bleed used to live here — a negative-margin breakout that
- * extended a top-position media banner past the container padding to leave a
- * small consistent figure margin. Every consumer (card / recipe / realm /
- * faction / playlist / bento-cell) moved to the thin-edge inset model — outer
- * padding is a thin edge, the content zone fills the remaining inset — which
- * achieves the same visual without the negative-margin hack. The rule was
- * removed once it had no remaining matches; reintroduce a positive opt-in if
- * a new rune ever wants figure bleed.) */
-
 /* A code-group dropped into a media zone uses the media radius tier so its
- * border and corners line up with the zone's clip instead of the larger
- * container radius it gets as a standalone inset surface. */
+ * border and corners line up with the zone's clip. */
 [data-section="media"] .rf-codegroup {
-  border-radius: var(--rf-radius-media);
+	border-radius: var(--rf-radius-media);
 }
 
 /* Beside-layout images get subtle depth. Block runes carry their own visual
  * weight (topbars, frames) so the shadow is image-only. */
 [data-media-position="start"] > [data-section="media"] > img,
 [data-media-position="end"] > [data-section="media"] > img {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-}
-
-/* ─── Collapse breakpoints ────────────────────────────────────────────
- * Beside (start/end) layouts drop to a single column at the chosen breakpoint;
- * the source-order (media-first) carries through, so media ends up on top of
- * content after the collapse. `top` / `bottom` are already stacked and unchanged
- * by collapse (their orientation is preserved). */
-
-@media (max-width: 640px) {
-  :is([data-media-position="start"], [data-media-position="end"])[data-collapse="sm"],
-  :is([data-media-position="start"], [data-media-position="end"]):not([data-collapse]) {
-    grid-template-columns: 1fr;
-  }
-  :is([data-media-position="start"], [data-media-position="end"])[data-collapse="sm"] > *,
-  :is([data-media-position="start"], [data-media-position="end"]):not([data-collapse]) > * {
-    grid-column: auto;
-    grid-row: auto;
-  }
-}
-
-@media (max-width: 768px) {
-  :is([data-media-position="start"], [data-media-position="end"])[data-collapse="md"] {
-    grid-template-columns: 1fr;
-  }
-  :is([data-media-position="start"], [data-media-position="end"])[data-collapse="md"] > * {
-    grid-column: auto;
-    grid-row: auto;
-  }
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
-@media (max-width: 1024px) {
-  :is([data-media-position="start"], [data-media-position="end"])[data-collapse="lg"] {
-    grid-template-columns: 1fr;
-  }
-  :is([data-media-position="start"], [data-media-position="end"])[data-collapse="lg"] > * {
-    grid-column: auto;
-    grid-row: auto;
-  }
 }

package/styles/layouts/theme-toggle.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Theme-mode toggle button (SPEC-073).
  *
  * Layout chrome — a peer of the search trigger, placed in the header/toolbar.
@@ -7,11 +8,6 @@
  * look is unchanged, with the icon selector rekeyed from a swapped class to
  * the `data-theme-pref` attribute. */
 .rf-theme-toggle {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	width: 2rem;
-	height: 2rem;
 	padding: 0;
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-md);
@@ -28,35 +24,11 @@
 	outline-offset: 2px;
 }
 
-/* In the header chrome the brand/nav and the controls are flex siblings
- * arranged by `order` (search is order 1, nav/menu order 3). Without this the
- * toggle defaults to order 0 and groups with the brand on the left; order 2
- * places it just after the right-aligned search trigger — matching the former
- * component. The plan toolbar arranges by DOM order, so it isn't included. */
-.rf-header__inner .rf-theme-toggle,
-.rf-docs-header__inner .rf-theme-toggle,
-.rf-blog-header__inner .rf-theme-toggle {
-	order: 2;
-}
-
-/* Hidden on tint-locked pages: the saved preference is preserved but ignored
- * while the lock is active (SPEC-052), so a toggle that does nothing would be
- * confusing. Pure CSS — the lock lands on <html> at SSR and on client nav. */
-html[data-tint-lock="true"] .rf-theme-toggle {
-	display: none;
-}
-
 /* Icon — a currentColor-tinted mask. Defaults to the auto glyph so the SSR'd
  * button shows an icon before the behavior sets data-theme-pref; the light and
  * dark glyphs swap in by state. */
 .rf-theme-toggle__icon {
-	display: inline-block;
-	width: 1rem;
-	height: 1rem;
 	background: currentColor;
-	mask-size: contain;
-	mask-repeat: no-repeat;
-	mask-position: center;
 	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 2a10 10 0 0 0 0 20Z' fill='currentColor'/></svg>");
 }
 .rf-theme-toggle[data-theme-pref="light"] .rf-theme-toggle__icon {
@@ -65,3 +37,5 @@ html[data-tint-lock="true"] .rf-theme-toggle {
 .rf-theme-toggle[data-theme-pref="dark"] .rf-theme-toggle__icon {
 	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/></svg>");
 }
+
+}

package/styles/layouts/version-switcher.css

@@ -1,33 +1,30 @@
+@layer skin {
 /* Version Switcher — page-level version dropdown */
 
 .rf-version-switcher {
-	display: inline-flex;
-	align-items: center;
 	gap: 0.5rem;
 	margin-bottom: 1.5rem;
-	font-size: 0.85rem;
+	font-size: var(--rf-text-sm);
 }
 
 .rf-version-switcher__label {
 	color: var(--rf-color-muted);
-	font-weight: 500;
-	font-size: 0.8rem;
+	font-weight: var(--rf-weight-medium);
+	font-size: var(--rf-text-xs);
 	text-transform: uppercase;
-	letter-spacing: 0.03em;
+	letter-spacing: var(--rf-tracking-wide);
 }
 
 .rf-version-switcher__select {
-	appearance: none;
-	-webkit-appearance: none;
 	background: var(--rf-color-surface);
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-sm, 0.25rem);
 	color: var(--rf-color-text);
-	font-size: 0.85rem;
+	font-size: var(--rf-text-sm);
 	font-family: inherit;
 	padding: 0.3rem 2rem 0.3rem 0.6rem;
 	cursor: pointer;
-	line-height: 1.4;
+	line-height: var(--rf-leading-snug);
 	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
 	background-repeat: no-repeat;
 	background-position: right 0.5rem center;
@@ -43,3 +40,5 @@
 	border-color: var(--rf-color-primary);
 	box-shadow: 0 0 0 2px var(--rf-color-primary-bg);
 }
+
+}

package/styles/runes/accordion.css

@@ -1,32 +1,32 @@
-/* Accordion */
-/* No wrapping border / radius — the only chrome is the divider between items. */
-.rf-accordion {}
+@layer skin {
+/* Accordion — skin. The eyebrow stretched-link, items passthrough, header flex +
+ * chevron box/glyph/rotate mechanism, title/count flex, and the ::details-content
+ * collapse mechanism live in @refrakt-md/skeleton (styles/runes/accordion.css).
+ * No wrapping border / radius — the only chrome is the divider between items. */
 .rf-accordion__preamble {
 	margin-bottom: 1.5rem;
 }
 .rf-accordion__eyebrow {
-	font-size: 0.8125rem;
-	font-weight: 600;
-	letter-spacing: 0.05em;
+	font-size: var(--rf-text-sm);
+	font-weight: var(--rf-weight-semibold);
+	letter-spacing: var(--rf-tracking-wider);
 	text-transform: uppercase;
 	color: var(--rf-color-primary);
 	margin: 0 0 0.5rem;
 }
 .rf-accordion__eyebrow:has(a) {
-	display: inline-block;
-	position: relative;
 	padding: 0.25rem 0.875rem;
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-full);
 	color: var(--rf-color-text);
-	font-weight: 400;
+	font-weight: var(--rf-weight-normal);
 	text-transform: none;
-	letter-spacing: 0;
+	letter-spacing: var(--rf-tracking-normal);
 	transition: border-color 150ms ease;
 }
 .rf-accordion__eyebrow:has(a):hover { border-color: var(--rf-color-muted); }
-.rf-accordion__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: 600; text-decoration: none; }
-.rf-accordion__eyebrow:has(a) a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
+.rf-accordion__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: var(--rf-weight-semibold); text-decoration: none; }
+.rf-accordion__eyebrow:has(a) a::before { border-radius: inherit; }
 .rf-accordion__headline {
 	margin-top: 0;
 }
@@ -37,9 +37,6 @@
 .rf-accordion__image {
 	margin-bottom: 1rem;
 }
-.rf-accordion__items {
-	display: contents;
-}
 .rf-accordion-item {
 	border-bottom: 1px solid var(--rf-color-border);
 }
@@ -47,84 +44,44 @@
 	border-bottom: none;
 }
 .rf-accordion-item__header {
-	display: flex;
-	align-items: center;
 	gap: 0.5rem;
 	padding: 0.875rem 0rem;
-	font-weight: 600;
-	font-size: 0.95rem;
+	font-weight: var(--rf-weight-semibold);
+	font-size: var(--rf-text);
 	cursor: pointer;
 	user-select: none;
-	list-style: none;
 }
-.rf-accordion-item__header::-webkit-details-marker { display: none; }
-.rf-accordion-item__header::marker { display: none; content: ''; }
-/* Chevron in front of the label — points right when collapsed, rotates 90°
- * to point down when expanded. SVG mask so the glyph is crisp at any size
- * and tints with the muted text color. */
+/* Chevron tint + rotate animation (the box + glyph + the open-rotate are
+ * skeleton). */
 .rf-accordion-item__header::before {
-	content: '';
-	flex-shrink: 0;
-	width: 0.75rem;
-	height: 0.75rem;
 	background: var(--rf-color-muted);
-	mask-size: contain;
-	mask-repeat: no-repeat;
-	mask-position: center;
-	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
 	transition: transform 200ms ease;
 }
-.rf-accordion-item[open] .rf-accordion-item__header::before {
-	transform: rotate(90deg);
-}
 .rf-accordion-item__title {
-	flex: 1;
-	min-width: 0;
+	/* flex sizing is skeleton */
 }
-/* Per-group count for collection/relationships group-display="accordion".
- * Inherits the header's font (weight + color) so the count reads as part
- * of the same label. The header's `gap` handles spacing — no margins needed. */
+/* Per-group count for collection/relationships group-display="accordion". */
 .rf-accordion-item__count {
-	flex-shrink: 0;
-}
-/* Animate the panel's collapse / expand. `::details-content` (the auto-generated
- * wrapper for non-summary content) + `interpolate-size: allow-keywords` lets the
- * height transition between 0 and auto. `transition-behavior: allow-discrete`
- * on `content-visibility` keeps the panel reachable during the open animation.
- * Browsers without `::details-content` support fall back to the native snap. */
-.rf-accordion-item {
-	interpolate-size: allow-keywords;
+	/* flex-shrink is skeleton */
 }
 .rf-accordion-item::details-content {
-	block-size: 0;
-	overflow: hidden;
 	transition: block-size 250ms ease, content-visibility 250ms allow-discrete;
 }
-.rf-accordion-item[open]::details-content {
-	block-size: auto;
-}
 .rf-accordion-item__body {
 	padding: 0 1.25rem 1rem;
 }
-/* Prose styles for the standalone accordion rune's bodies (paragraphs,
- * lists, etc.). Scoped to `:not(:has([data-block]))` so they don't bleed into
- * block-content children like cards inside a collection/relationships
- * `group-display="accordion"` panel, where the card's own typography
- * should govern. */
+/* Prose styles for the standalone accordion rune's bodies. */
 .rf-accordion-item__body:not(:has([data-block])) {
-	font-size: 0.925rem;
-	line-height: 1.65;
+	font-size: var(--rf-text-sm);
+	line-height: var(--rf-leading-relaxed);
 	color: var(--rf-color-muted);
 }
 .rf-accordion-item__body p:last-child {
 	margin-bottom: 0;
 }
-/* Block-content children — collection / relationships mark their body-template
- * items `data-block`. A panel housing them (group-display="accordion") switches
- * to a flex column with the small gap so cards get the same spacing they'd have
- * under a heading-grouped layout. */
+/* Block-content panels get the small gap (the flex column is skeleton). */
 .rf-accordion-item__body:has([data-block]) {
-	display: flex;
-	flex-direction: column;
 	gap: var(--rf-spacing-sm);
 }
+
+}

package/styles/runes/aggregate.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Aggregate — counts and per-group breakdowns from the registry (SPEC-076).
  *
  * Two modes share the same block class. The no-body inline form is a `<span>`
@@ -20,7 +21,7 @@
  * weight tuned to stand out modestly in prose. */
 .rf-aggregate[data-aggregate='count'] {
 	font-variant-numeric: tabular-nums;
-	font-weight: 600;
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-text);
 }
 
@@ -43,14 +44,10 @@
  * body). With groups, switch to a wrapping inline row so per-group renders
  * (badges, pills, …) flow across the page. */
 .rf-aggregate__items {
-	display: flex;
-	flex-direction: column;
 	gap: var(--rf-spacing-sm);
 	margin-top: var(--rf-spacing-sm);
 }
 .rf-aggregate__items:has(.rf-aggregate__group) {
-	flex-direction: row;
-	flex-wrap: wrap;
 	gap: var(--rf-spacing-xs) var(--rf-spacing-sm);
 }
 
@@ -59,17 +56,11 @@
  * empty. */
 .rf-aggregate__items > :first-child { margin-top: 0; }
 .rf-aggregate__items > :last-child { margin-bottom: 0; }
-
-/* Per-group block — wraps one render of the template. `data-block` is set
- * by the resolver so we trim its outer block margins (the items-row `gap`
- * governs inter-group spacing) — same pattern collection / relationships
- * use for `__item[data-block]`. */
-.rf-aggregate__group {
-	min-width: 0;
-}
 .rf-aggregate__group[data-block] > :first-child {
 	margin-top: 0;
 }
 .rf-aggregate__group[data-block] > :last-child {
 	margin-bottom: 0;
 }
+
+}

package/styles/runes/annotate.css

@@ -1,80 +1,51 @@
-/* Annotate */
-.rf-annotate__body {
-	display: contents;
-}
-/* Margin style */
+@layer skin {
+/* Annotate — skin. The body passthrough, margin float, inline/tooltip display +
+ * positioning + hover reveal, and metadata hide live in @refrakt-md/skeleton
+ * (styles/runes/annotate.css). */
 .rf-annotate--margin .rf-annotate-note {
-	float: right;
-	clear: right;
-	width: 40%;
 	margin: 0.25rem 0 0.5rem 1rem;
 	padding: 0.5rem 0 0.5rem 1rem;
-	font-size: 0.8125rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 	border-left: 2px solid var(--rf-color-border);
 }
-/* Inline style */
-.rf-annotate--inline p { display: inline; }
 .rf-annotate--inline .rf-annotate-note {
-	display: inline-block;
-	vertical-align: baseline;
 	margin: 0 0.25rem;
 	padding: 0.125rem 0 0.125rem 0.5rem;
-	font-size: 0.8125rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 	border-left: 2px solid var(--rf-color-border);
 }
-/* Tooltip style */
 .rf-annotate--tooltip .rf-annotate-note {
-	display: inline-block;
-	position: relative;
 	margin: 0 0.25rem;
 	padding: 0;
 	font-size: 0;
-	vertical-align: super;
 }
 .rf-annotate--tooltip .rf-annotate-note::before {
 	content: '?';
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	width: 1rem;
-	height: 1rem;
-	font-size: 0.625rem;
-	font-weight: 700;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-bold);
 	color: var(--rf-color-primary);
 	border: 1px solid var(--rf-color-primary);
 	border-radius: var(--rf-radius-full, 50%);
 	cursor: help;
 }
 .rf-annotate--tooltip .rf-annotate-note__body {
-	display: none;
-	position: absolute;
-	bottom: 100%;
-	left: 50%;
-	transform: translateX(-50%);
-	width: 16rem;
 	padding: 0.75rem;
-	font-size: 0.8125rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-text);
 	background: var(--rf-color-bg);
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-md);
 	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 	margin-bottom: 0.5rem;
-	z-index: 10;
-}
-.rf-annotate--tooltip .rf-annotate-note:hover .rf-annotate-note__body {
-	display: block;
 }
 .rf-annotate-note__body p:last-child { margin-bottom: 0; }
-.rf-annotate-note__body > span[property],
-.rf-annotate-note__body > meta { display: none; }
 @media (max-width: 768px) {
 	.rf-annotate--margin .rf-annotate-note {
-		float: none;
-		width: 100%;
 		margin: 0.5rem 0 1rem;
 		padding: 0.75rem 1rem;
 	}
 }
+
+}

package/styles/runes/api.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Api */
 
 /* SPEC-080: the endpoint header is a projected `eyebrow` bar (method + path
@@ -19,8 +20,10 @@
 	padding: 0.5rem 1rem;
 	margin: 0.75rem 0;
 	border-radius: 0 var(--rf-radius-sm) var(--rf-radius-sm) 0;
-	font-size: 0.9375rem;
+	font-size: var(--rf-text);
 }
 .rf-api__body blockquote::before {
 	content: none;
 }
+
+}