cursedbelt 3.0.2 → 4.1.0

package/src/react/media/index.ts

@@ -222,6 +222,20 @@ export { VideoTrimmer } from './VideoTrimmer';
 // that a server executes, which is the only shape that works on a phone master. See
 // `videoCuts.ts` for the owner's reasoning.
 export { VideoCutEditor, type VideoCutEditorProps } from './VideoCutEditor';
+// Naming points in time and KEEPING them — the other half of the same gesture, and a separate
+// model on purpose: a cut list is a request that costs a re-encode, a chapter list is metadata
+// that applies on save. `videoChapters.ts`'s header says why the model is in this package
+// rather than in `cursedbelt-core` beside `videoCuts.ts`.
+export { VideoChapterEditor, type VideoChapterEditorProps } from './VideoChapterEditor';
+export {
+  type ChapteredVideo,
+  type ChapterSpan,
+  chapterProblem,
+  chapterSpans,
+  MIN_CHAPTER_SECONDS,
+  normalizeChapters,
+  type VideoChapter,
+} from './videoChapters';
 // Re-exported from `core/media`, where the model lives so a SERVER can import it without
 // dragging React in — see the header of `videoCuts.ts`.
 export {

package/src/react/media/mediaResize.css

@@ -9,44 +9,103 @@
  * and the owner reported the feature as absent while prod was serving it. So both grips are
  * legible without hover, and both brighten further on hover/focus rather than appearing on
  * it. Do not "quieten" either back to a hover-only affordance.
+ *
+ * ── 🔴 2026-09-16: the grips live OUTSIDE the picture ──────────────────────────────────
+ * Owner, `ideas/collections-09-14.md`: *"Fix the drag to resize area to no longer overlap
+ * part of the horizontal play timeline area that shows what part of the video is playing. It
+ * should only be draggable when my mouse pointer is at the bottom right corner of the video
+ * player, just like mac windows for other apps work."*
+ *
+ * The corner grip used to be a 64×64 overlay `position: absolute; right: 0; bottom: 0` INSIDE
+ * the clipped frame, riding at `z-index: 12` over Vidstack's control layer, and the gallery
+ * reserved a matching `padding-inline-end` gutter in the player's last two control groups so
+ * the buttons would not lay out underneath it.
+ *
+ * 🔴 MEASURED before anything was changed, with that geometry restored in a real browser
+ * (`e2e/resize-grip-rail.spec.ts` has the numbers): the gutter DID keep the corner's rectangle
+ * off `.vds-time-slider`'s. It is not the thing that was broken, and widening it would have
+ * fixed nothing. Three things were, and none of them is reachable from a gutter:
+ *
+ *  1. `.cbmr-bar` — a full-width strip under the frame whose `padding: 11px 0` with
+ *     `margin-block: -11px` put 11px of drag surface back inside the picture, spanning the
+ *     whole scrub bar. Horizontal padding is BESIDE the slider; the bar is UNDER it.
+ *  2. A gutter can only shorten a control bar this package styles. A `nativeVideoStage`
+ *     gallery puts a plain `<video controls>` in that frame and its UA bar is full-width and
+ *     untouchable, so a grip in the corner lands on the native timeline with no recourse.
+ *  3. It was paid for in the thing the owner was complaining about: 64px of scrub bar,
+ *     surrendered so the grip could sit beside it.
+ *
+ * So the grips moved off the picture entirely, into `.cbmr-rail` — a strip of chrome BELOW the
+ * frame, which is where a Mac window's resize corner is: the window's outside edge, not a
+ * patch of its content. Nothing of either grip is inside the frame at any size, and that is
+ * the only shape in which "does not overlap the timeline" is a property of the layout rather
+ * than a tuning against whatever the current player happens to draw. The gutter rule in
+ * `denseGallery.css` went with it, so the time slider is full width again — which is the rest
+ * of the same sentence.
  */
 
 /*
- * 🔴 ONE number, read from two files.
+ * 🔴 ONE number: the grip's reach AND the height of the rail that holds it.
  *
- * The corner grip's size is also the width of the gutter `denseGallery.css` reserves at the
- * end of a video player's control bar, so the player's own buttons never lay out underneath
- * it. Two literals would desync on the first tweak and the symptom — a grip that covers the
- * fullscreen button, or a gutter with nothing in it — is a thing you can only see by hand.
- * Declared on `:root` because the gutter rule applies to an ANCESTOR of the grip, and a
- * custom property set on the grip itself does not reach back up the tree.
+ * 64px is the owner's 2026-08-25 *"make the corner expansion grabbable area bigger … for some
+ * reason it's hard to grab"* and it may not go down — see `.cbmr-corner`. The rail is exactly
+ * that tall because the rail exists to hold the grip; two literals would desync on the first
+ * tweak and the symptom is a grip clipped by its own strip, which only shows up by hand.
+ * Declared on `:root` because the coarse-pointer block at the bottom raises it for both.
  */
 :root {
 	--cbmr-corner-size: 64px;
 }
 
+/* ── The rail: the chrome the grips live in ──────────────────────────────────────────── */
+
+/*
+ * 🔴 A sibling of the frame, never a child of it. Every consumer renders it directly after
+ * the picture's box (`DenseGalleryShell`, `FocusViewer`), and `MediaResize.spec.tsx` fails if
+ * a player stops doing so — a grip that drifts back inside the frame is exactly the
+ * 2026-09-14 report, and it is invisible to everything except a rendered rectangle.
+ *
+ * It is the positioning context for the corner, which is what keeps the grip's 64px box
+ * bounded by this strip instead of hanging up over the picture.
+ */
+.cbmr-rail {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	inline-size: 100%;
+	block-size: var(--cbmr-corner-size, 64px);
+	/* Both consumers stack it in a flex COLUMN (`.cbgd-watch-player`, `.inspector`), where a
+	   default `flex-shrink: 1` would let a short container squeeze the strip and clip the grip
+	   out of its own bottom-right corner. The picture is what gives way, never the handle. */
+	flex: none;
+}
+
 /* ── The corner ─────────────────────────────────────────────────────────────────────── */
 
 .cbmr-corner {
 	position: absolute;
-	right: 0;
-	bottom: 0;
+	inset-inline-end: 0;
+	inset-block-end: 0;
 	/*
 	 * 🔴 ABOVE the video player's control layer, which is `z-index: 10` (Vidstack's
-	 * `[data-view-type='video'] .vds-controls`) in THIS same stacking context —
-	 * `[data-media-player]` sets `contain: style`, which opens no stacking context, so
-	 * nothing isolates the player's chrome from the frame around it. At the old `3` the
-	 * grip was painted over and, worse, click-blocked by the bottom `.vds-controls-group`
-	 * (`width: 100%`, `pointer-events: auto`) whenever the bar was visible — which is on
-	 * hover, which is precisely when a person reaches for it. That is the owner's
-	 * 2026-08-25 *"for some reason it's hard to grab"*, and it is why this number may not
-	 * go back down without also moving the grip out of the frame.
+	 * `[data-view-type='video'] .vds-controls`) — `[data-media-player]` sets `contain:
+	 * style`, which opens no stacking context, so nothing isolates the player's chrome
+	 * from the frame around it. At the old `3` the grip was painted over and, worse,
+	 * click-blocked by the bottom `.vds-controls-group` (`width: 100%`, `pointer-events:
+	 * auto`) whenever the bar was visible — which is on hover, which is precisely when a
+	 * person reaches for it. That is the owner's 2026-08-25 *"for some reason it's hard to
+	 * grab"*, and it is why this number may not go back down.
+	 *
+	 * Since 2026-09-16 the grip is in `.cbmr-rail`, outside the frame, so it no longer has
+	 * to win that fight — but a player whose control layer grows a `bottom: -Npx` overhang
+	 * would re-open it, and 12 costs nothing. Keep it.
 	 *
 	 * `12` and not more: it must stay UNDER Vidstack's menus (50) and its fullscreen
 	 * surface, so opening the settings cog still covers the grip rather than the grip
 	 * punching a hole through an open menu.
 	 *
-	 * LOCAL stacking only. This lifts the grip inside its own positioned frame and must
+	 * LOCAL stacking only. This lifts the grip inside its own positioned rail and must
 	 * never reach the app-wide bands — a `--z-` band here would raise the grip over the
 	 * sticky header and every overlay above it.
 	 * guardrails-ignore no-raw-zindex: local stacking inside a positioned media frame. */
@@ -54,35 +113,37 @@
 	display: flex;
 	align-items: flex-end;
 	justify-content: flex-end;
-	/* The target, and the gutter the control bar leaves for it — see `--cbmr-corner-size`.
-	   Well over DESIGN.md §5's 44px floor, deliberately: the owner asked for a bigger grab
-	   area in the same breath as reporting he could not hit it. The padding is the reach,
-	   the glyph is the mark. */
+	/* The target. Well over DESIGN.md §5's 44px floor, deliberately: the owner asked for a
+	   bigger grab area in the same breath as reporting he could not hit it. The padding is
+	   the reach, the glyph is the mark. It fills the rail exactly — see `--cbmr-corner-size`. */
 	inline-size: var(--cbmr-corner-size, 64px);
 	block-size: var(--cbmr-corner-size, 64px);
-	padding: 0 4px 4px 0;
+	padding: 0 6px 6px 0;
 	box-sizing: border-box;
 	cursor: nwse-resize;
 	touch-action: none;
 	border: 0;
 	background: none;
-	/* A soft scrim rather than a filled chip: the grip must be legible over a white sky and
-	   over black letterboxing, and a corner-anchored gradient does that without drawing a
-	   box on top of the picture. */
-	border-end-end-radius: inherit;
 }
 
+/*
+ * The hover plate.
+ *
+ * 🔴 A TOKEN, where this used to be a hardcoded black radial scrim. The scrim was right while
+ * the grip rode on arbitrary media — a photograph has no theme, so app colours tinted it. In
+ * the rail the grip rides on app chrome like every other control, so it takes the app's
+ * colours and the two `guardrails-ignore no-hardcoded-colors` suppressions this rule used to
+ * need are gone with it.
+ */
 .cbmr-corner::before {
 	content: '';
 	position: absolute;
-	inset: 0;
-	border-end-end-radius: inherit;
-	/* Black, not a surface token, and for the same reason `.inspector__viewport` and
-	   the gallery's action pills hardcode theirs: this scrim rides on ARBITRARY MEDIA, which has no
-	   theme. A token here would tint the grip with app chrome over somebody's photograph.
-	   guardrails-ignore no-hardcoded-colors: see above. */
-	/* guardrails-ignore no-hardcoded-colors: one line, because the excuse covers the LINE. */
-	background: radial-gradient(circle at 100% 100%, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.34) 52%, rgb(0 0 0 / 0) 80%);
+	inset-inline-end: 2px;
+	inset-block-end: 2px;
+	inline-size: 30px;
+	block-size: 30px;
+	border-radius: var(--radius-md, 0.5rem);
+	background: transparent;
 	pointer-events: none;
 	transition: background 120ms ease;
 }
@@ -93,10 +154,9 @@
 	block-size: 16px;
 	overflow: visible;
 	fill: none;
-	/* White, not a token: this rides on arbitrary media, which has no theme — the same
-	   reasoning the stage's overlay pills use.
-	   guardrails-ignore no-hardcoded-colors: see above. */
-	stroke: rgb(255 255 255 / 0.92);
+	/* Legible at rest — see the file header. `--muted-foreground`, never `--border`, which is
+	   the colour of a hairline nobody is meant to look at. */
+	stroke: var(--muted-foreground, currentColor);
 	stroke-width: 1.6;
 	stroke-linecap: round;
 	transition: stroke 120ms ease, transform 120ms ease;
@@ -104,15 +164,13 @@
 
 .cbmr-corner:hover .cbmr-corner-glyph,
 .cbmr-corner:focus-visible .cbmr-corner-glyph {
-	/* guardrails-ignore no-hardcoded-colors: the hover state of the white glyph above. */
-	stroke: rgb(255 255 255 / 1);
+	stroke: var(--foreground, var(--muted-foreground));
 	transform: scale(1.15);
 }
 
 .cbmr-corner:hover::before,
 .cbmr-corner:focus-visible::before {
-	/* guardrails-ignore no-hardcoded-colors: the hover state of the scrim above. */
-	background: radial-gradient(circle at 100% 100%, rgb(0 0 0 / 0.7) 0%, rgb(0 0 0 / 0.45) 45%, rgb(0 0 0 / 0) 75%);
+	background: var(--border);
 }
 
 .cbmr-corner:focus-visible {
@@ -122,18 +180,27 @@
 
 /* ── The bottom edge ────────────────────────────────────────────────────────────────── */
 
+/*
+ * 🔴 COARSE POINTERS ONLY, and that is a decision, not a tidy-up — see `MediaResize.tsx`'s
+ * header for the whole of it. *"It should only be draggable when my mouse pointer is at the
+ * bottom right corner"* is a verdict on this bar as much as on the corner's old position; the
+ * one reason it was ever kept beside the corner is about a THUMB, so it survives exactly where
+ * a thumb is.
+ */
 .cbmr-bar {
+	display: none;
 	inline-size: 100%;
 	block-size: 22px;
-	display: flex;
 	align-items: center;
 	justify-content: center;
 	cursor: ns-resize;
 	touch-action: none;
-	/* The generous half of the 44px target, without 44px of visible gutter. */
+	/* The generous half of the 44px target, without 44px of visible gutter. 🔴 No negative
+	   margin pulling it back out of the rail: that is how invisible padding came to hang over
+	   the picture's bottom edge and over the transport below it, which is the overlap the
+	   2026-09-14 report is about. The rail is tall enough to hold the reach. */
 	padding: 11px 0;
 	box-sizing: content-box;
-	margin-block: -11px;
 	border: 0;
 	background: none;
 }
@@ -172,15 +239,17 @@
 /*
  * ── A finger is not a mouse ──────────────────────────────────────────────────────────
  * Owner, 2026-08-25 and again 2026-09-08: *"make the corner expansion grabbable area
- * bigger … for some reason it's hard to grab"*. The z-index half of that is above; this is
- * the other half, and it is the one a desktop measurement cannot see. 64px clears
- * `DESIGN.md` §5's 44px floor for a POINTER; a fingertip's contact patch is ~9mm, which on a
- * phone is most of that box, and the grip sits in the one corner a thumb reaches across the
- * whole screen to get to.
+ * bigger … for some reason it's hard to grab"*. 64px clears `DESIGN.md` §5's 44px floor for a
+ * POINTER; a fingertip's contact patch is ~9mm, which on a phone is most of that box, and the
+ * grip sits in the one corner a thumb reaches across the whole screen to get to.
  *
  * Coarse pointers only, so the desktop look — which the owner explicitly said was good — is
- * untouched. `--cbmr-corner-size` is read by `denseGallery.css` for the gutter it reserves in
- * the player's control bar, so widening it here widens that too and the two cannot desync.
+ * untouched. Raising `--cbmr-corner-size` raises the rail with it, so the bigger grip still
+ * fits inside its strip rather than growing back up over the picture.
+ *
+ * 🔴 And this is where `.cbmr-bar` exists at all: the corner is a small target for a thumb,
+ * and on a portrait clip the picture's bottom edge is the one part of the stage whose position
+ * does not move with the file.
  */
 @media (pointer: coarse) {
 	:root {
@@ -192,9 +261,13 @@
 		inline-size: 22px;
 		block-size: 22px;
 	}
+	.cbmr-corner::before {
+		inline-size: 40px;
+		block-size: 40px;
+	}
 	/* Same reasoning for the bar: the ink stays a hairline, the reach grows. */
 	.cbmr-bar {
+		display: flex;
 		padding: 15px 0;
-		margin-block: -15px;
 	}
 }

package/src/react/media/pictureEditor.css

@@ -263,12 +263,58 @@
 	cursor: default;
 }
 
-/* A quarter-turned clip is still laid out in its ORIGINAL box, so its width is bounded by the
-   container's HEIGHT and vice versa. Container query units are the only way to say that. Set
-   only for the ODD turns — a half turn does not change the box and pays for none of this. */
-.cbpe-frame-film[data-turned='true'] video {
+/* The film, sized exactly like the `<img>` the picture editor puts in the same frame: contained,
+   centred, never overflowing the box it is previewed in. Written out here because `.cbpe-frame
+   img` cannot say it for an element that is not an image, and without it the preview is whatever
+   size the browser's default happens to make it — which for a phone clip is a postage stamp in
+   the middle of a black frame, i.e. the thing this dialog is for is invisible. */
+.cbpe-frame video {
+	max-width: 100%;
+	max-height: 100%;
+	object-fit: contain;
+	transform-origin: center;
+}
+
+/* A quarter-turned clip is still laid out in its ORIGINAL box, so its width has to be read from
+   the container's HEIGHT and vice versa. Container query units are the only way to say that.
+   Set only for the ODD turns — a half turn does not change the box and pays for none of this.
+
+   🔴 An explicit SIZE, not a `max-*` bound. The same correction, for the same reason, as
+   `.cbmg-stage-turn[data-turned='true']` in `mediaGallery.css` (which documents the measurement):
+   a bound can only shrink, so a turned clip stayed whatever size it already was and the preview
+   showed a pillar the stage was about to show full-width. The preview and the stage have to
+   agree — a preview that under-sells the turn is a preview somebody rejects a correct edit on.
+   `img` as well as `video`: a clip that will not play falls back to its poster, and the poster
+   is turned by the same transform. */
+.cbpe-frame-film[data-turned='true'] video,
+.cbpe-frame-film[data-turned='true'] img {
 	max-width: none;
 	max-height: none;
-	max-block-size: 100cqi;
-	max-inline-size: 100cqb;
+	max-block-size: none;
+	max-inline-size: none;
+	width: 100cqb;
+	height: 100cqi;
+	aspect-ratio: auto;
+	object-fit: contain;
+}
+
+/* Why there is no moving picture, said ON the frame that would otherwise be black — the owner's
+   *"I see a black screen"*, which he could only report as a black screen because the dialog said
+   nothing. Centred over the ground rather than under the frame so it is read as being about the
+   picture, and `pointer-events: none` so it never eats a press meant for the film. */
+.cbpe-frame-note {
+	position: absolute;
+	inset-inline: 1.5rem;
+	top: 50%;
+	transform: translateY(-50%);
+	margin: 0;
+	text-align: center;
+	text-wrap: balance;
+	font-size: 13px;
+	line-height: 1.5;
+	/* guardrails-ignore no-hardcoded-colors: sits ON the picture ground, which is true black in
+	   both themes — the same argument as `.cbpe-hint` above. */
+	color: rgb(255 255 255 / 0.82);
+	text-shadow: 0 1px 2px rgb(0 0 0 / 0.6);
+	pointer-events: none;
 }

package/src/react/media/videoChapterEditor.css

@@ -0,0 +1,203 @@
+/* Plain CSS, colocated with `VideoChapterEditor.tsx` and imported by it — the same
+   convention, and the same reason, as `videoCutEditor.css`: the editor is lazily imported
+   from the gallery, so these bytes ride the gallery's chunk instead of landing in whichever
+   ENTRY stylesheet happened to scan a utility class. Every colour is a theme token. */
+
+.cbch {
+	display: flex;
+	flex-direction: column;
+	gap: 0.75rem;
+	min-height: 0;
+}
+
+.cbch-video {
+	inline-size: 100%;
+	max-block-size: 44vh;
+	background: var(--surface-2, var(--background));
+	border-radius: var(--radius-md, 8px);
+}
+
+/* The one authoring row: name the section, then mark it. In that order, because the button
+   is disabled until there is a name — see the component. */
+.cbch-add {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	flex-wrap: wrap;
+}
+
+.cbch-add-field {
+	flex: 1 1 14rem;
+	min-inline-size: 0;
+}
+
+/* Tabular figures, and this is not cosmetic: the playhead readout changes ten times a second,
+   and proportional digits make the whole row shuffle sideways under the controls beside it
+   while a clip plays. */
+.cbch-playhead {
+	font-variant-numeric: tabular-nums;
+	font-size: 0.875rem;
+	color: var(--muted-foreground);
+}
+
+/* ── The strip ───────────────────────────────────────────────────────────────
+   What the scrub bar will look like once this is saved: the named sections, in place and to
+   scale. Not a scrub bar itself — the `<video>`'s own controls are that, and a second
+   draggable timeline would be two controls fighting for one gesture. */
+.cbch-strip {
+	position: relative;
+	display: flex;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	inline-size: 100%;
+	block-size: 40px;
+	border-radius: var(--radius-md, 8px);
+	background: var(--surface-3, var(--surface-2));
+	border: 1px solid var(--border);
+	overflow: hidden;
+}
+
+/* The list item carries the WIDTH — the section's duration — and the button fills it. Split
+   in two so the width lives on the flex child rather than on a control that also has padding. */
+.cbch-span-item {
+	min-inline-size: 0;
+	flex: 0 0 auto;
+	block-size: 100%;
+}
+
+/* The unnamed opening, when the first chapter is not at 0:00. Drawn, but not a control: there
+   is nothing to jump to and nothing to rename — it is the part that has no section yet. */
+.cbch-lead {
+	flex: 0 0 auto;
+	block-size: 100%;
+	border-inline-end: 1px solid var(--border);
+	background: repeating-linear-gradient(
+		135deg,
+		transparent 0 6px,
+		color-mix(in srgb, var(--muted-foreground) 14%, transparent) 6px 12px
+	);
+}
+
+.cbch-span {
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+	/* `min-inline-size: 0` and no flex-grow: the inline width set per section is the truth. */
+	inline-size: 100%;
+	block-size: 100%;
+	padding-inline: 0.375rem;
+	border: 0;
+	/* A hairline between sections, so two adjacent ones read as two rather than one. */
+	border-inline-end: 1px solid var(--border);
+	background: var(--surface-1, var(--background));
+	color: var(--foreground);
+	font-size: 0.75rem;
+	white-space: nowrap;
+	overflow: hidden;
+	cursor: pointer;
+	transition: background 120ms ease;
+}
+
+.cbch-span-item:last-of-type .cbch-span {
+	border-inline-end: 0;
+}
+
+.cbch-span:hover {
+	background: var(--surface-2);
+}
+
+.cbch-span:focus-visible {
+	outline: 2px solid var(--ring, var(--muted-foreground));
+	outline-offset: -2px;
+}
+
+.cbch-span-label {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.cbch-strip-head {
+	position: absolute;
+	inset-block: 0;
+	inline-size: 2px;
+	background: var(--foreground);
+	/* Over the sections, but it must never eat a click meant for one. */
+	pointer-events: none;
+}
+
+.cbch-summary {
+	font-size: 0.875rem;
+	color: var(--muted-foreground);
+	margin: 0;
+}
+
+.cbch-list {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+	max-block-size: 24vh;
+	/* guardrails-ignore no-raw-overflow: a Tailwind-free `.cbch-` list inside a lazily
+	   imported editor, not a ScrollArea consumer — same as `videoCutEditor.css`. */
+	overflow-y: auto;
+}
+
+.cbch-row {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	padding-inline: 0.25rem;
+	border-radius: var(--radius-sm, 6px);
+}
+
+.cbch-row:hover {
+	background: var(--surface-2);
+}
+
+.cbch-row-goto {
+	flex: 0 0 auto;
+	display: flex;
+	align-items: center;
+	gap: 0.375rem;
+	/* DESIGN.md §5's touch floor — a row you jump the playhead with is a real control. */
+	min-block-size: 44px;
+	padding-inline: 0.25rem;
+	border: 0;
+	background: none;
+	color: var(--muted-foreground);
+	font-variant-numeric: tabular-nums;
+	font-size: 0.875rem;
+	text-align: start;
+	cursor: pointer;
+}
+
+.cbch-row-goto:hover {
+	color: var(--foreground);
+}
+
+.cbch-row-goto:focus-visible {
+	outline: 2px solid var(--ring, var(--muted-foreground));
+	outline-offset: -2px;
+	border-radius: var(--radius-sm, 6px);
+}
+
+.cbch-row-title {
+	flex: 1 1 auto;
+	min-inline-size: 0;
+}
+
+.cbch-empty {
+	margin: 0;
+	padding-block: 0.75rem;
+	text-align: center;
+	font-size: 0.875rem;
+	color: var(--muted-foreground);
+}
+
+.cbch-note {
+	font-size: 0.875rem;
+	color: var(--muted-foreground);
+}