@akhil-saxena/design-system 1.2.0 → 1.4.2

package/dist/primitives.css

@@ -7,8 +7,33 @@
    Pseudo-class states that inline style={{}} cannot express (D-103).
    Variant-specific hover states keyed off data-variant attribute.
    Source: original handoff `.ds-btn` rules transcribed verbatim. */
+
+/* Base transition so the :active scale animates rather than snaps. Without
+   a transition declared here, the scale-down and scale-back-up both snap
+   instantly — on a Mac trackpad tap-to-click (~30ms mousedown duration)
+   the browser coalesces paints and the user never sees the press feedback.
+   The asymmetric durations below give a quick snap-down + a longer spring-
+   back so the click registers even on the fastest taps. */
+.ds-atom-btn {
+	transition:
+		transform 140ms cubic-bezier(0.34, 1.56, 0.64, 1),
+		background-color 120ms ease,
+		border-color 120ms ease,
+		color 120ms ease,
+		box-shadow 120ms ease,
+		filter 120ms ease;
+	will-change: transform;
+}
 .ds-atom-btn:active {
-	transform: scale(0.97);
+	transform: scale(0.96);
+	transition-duration: 60ms, 120ms, 120ms, 120ms, 120ms, 120ms;
+}
+@media (prefers-reduced-motion: reduce) {
+	.ds-atom-btn,
+	.ds-atom-btn:active {
+		transition: none;
+		transform: none;
+	}
 }
 .ds-atom-btn:disabled {
 	opacity: 0.4;
@@ -725,14 +750,26 @@
 .ds-atom-popover {
 	position: fixed;
 	z-index: 100;
-	background: var(--cream-2);
-	border: 1px solid var(--rule);
+	/* Pure white floor + faint rule + layered shadow so the menu reads as a
+	   clean floating sheet above the cream page tone. Previous --cream bg sat
+	   at the page tone and the --rule border added a visible grey rim — both
+	   bled into the page and made the menu feel "dull". */
+	background: #ffffff;
+	border: 1px solid rgba(31, 27, 23, 0.04);
 	border-radius: var(--radius-md);
-	box-shadow: var(--shadow-3);
+	box-shadow: 0 1px 2px rgba(31, 27, 23, 0.04), 0 12px 32px rgba(31, 27, 23, 0.12), 0 0 0 0.5px
+		rgba(31, 27, 23, 0.04);
 	padding: 0;
 	min-width: 0;
 	animation: ds-atom-popover-in 0.1s ease-out;
 }
+.dark .ds-atom-popover {
+	/* Dark-mode: lifted surface above the page bg, with a slightly stronger
+	   shadow to compensate for the lower contrast pop. */
+	background: #211d18;
+	border-color: rgba(255, 255, 255, 0.06);
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.55);
+}
 @keyframes ds-atom-popover-in {
 	from {
 		opacity: 0;
@@ -776,7 +813,12 @@
 	transition: background 0.1s;
 }
 .ds-atom-popover-item:hover:not(:disabled) {
-	background: var(--cream-3);
+	/* Warm ink-wash hover — cream-3 was too grey against the white panel.
+	   The 4% ink tint keeps it subtle but reads warmer + cleaner. */
+	background: rgba(31, 27, 23, 0.04);
+}
+.dark .ds-atom-popover-item:hover:not(:disabled) {
+	background: rgba(255, 255, 255, 0.06);
 }
 .ds-atom-popover-item:focus-visible {
 	outline: 2px solid var(--amber);
@@ -1316,6 +1358,9 @@
 	color: var(--ink);
 	line-height: 1.3;
 }
+.ds-atom-banner[data-bold-title="false"] .ds-atom-banner-title {
+	font-weight: var(--weight-regular, 400);
+}
 .ds-atom-banner-desc {
 	font-family: var(--font);
 	font-weight: 400;
@@ -1549,6 +1594,121 @@
 .ds-atom-toast[data-tone="info"] .ds-atom-toast-icon {
 	color: var(--blue);
 }
+
+/* ─── DS atom: Snackbar ──────────────────────────────────────────────────
+   Bottom-center action surface. Solid ink fill (no translucency) so the
+   message stays readable on top-heavy apps where the Toast's frosted
+   surface can clash with the page chrome. Companion to Toast — Snackbar
+   pairs with an action (UNDO / RETRY), Toast is passive. */
+.ds-atom-snackbar-region {
+	position: fixed;
+	left: 0;
+	right: 0;
+	bottom: var(--space-5);
+	z-index: 1100;
+	display: flex;
+	justify-content: center;
+	pointer-events: none;
+}
+.ds-atom-snackbar {
+	pointer-events: auto;
+	display: inline-flex;
+	align-items: center;
+	gap: 14px;
+	min-width: 280px;
+	max-width: 520px;
+	padding: 10px 12px 10px 16px;
+	border-radius: var(--radius-md);
+	background: var(--ink);
+	color: var(--cream);
+	box-shadow: var(--shadow-3);
+	font-family: var(--font);
+	font-size: 13px;
+	line-height: 1.45;
+	animation: ds-atom-snackbar-slidein 0.2s ease-out;
+}
+.ds-atom-snackbar[data-dismissing="true"] {
+	animation: ds-atom-snackbar-slideout 0.2s ease-out forwards;
+}
+.ds-atom-snackbar[data-tone="success"] {
+	border-left: 3px solid var(--green, #1f8a5b);
+}
+.ds-atom-snackbar[data-tone="error"] {
+	border-left: 3px solid var(--red, #9b2c2c);
+}
+.ds-atom-snackbar-msg {
+	flex: 1 1 auto;
+	min-width: 0;
+	color: var(--cream);
+}
+.ds-atom-snackbar-action {
+	flex: 0 0 auto;
+	background: transparent;
+	border: 0;
+	padding: 4px 8px;
+	border-radius: 6px;
+	font-family: var(--mono);
+	font-size: 11px;
+	font-weight: 700;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+	color: var(--amber);
+	cursor: pointer;
+	transition: background-color 0.12s, color 0.12s;
+}
+.ds-atom-snackbar-action:hover {
+	background: rgba(255, 255, 255, 0.08);
+	color: var(--amber);
+}
+.ds-atom-snackbar-action:focus-visible {
+	outline: 2px solid var(--amber);
+	outline-offset: 2px;
+}
+.ds-atom-snackbar-close {
+	flex: 0 0 auto;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 22px;
+	height: 22px;
+	background: transparent;
+	border: 0;
+	color: rgba(250, 250, 247, 0.7);
+	cursor: pointer;
+	border-radius: 4px;
+	padding: 0;
+	transition: background-color 0.12s, color 0.12s;
+}
+.ds-atom-snackbar-close:hover {
+	background: rgba(255, 255, 255, 0.08);
+	color: var(--cream);
+}
+.ds-atom-snackbar-close:focus-visible {
+	outline: 2px solid var(--amber);
+	outline-offset: 2px;
+}
+@keyframes ds-atom-snackbar-slidein {
+	from {
+		opacity: 0;
+		transform: translateY(12px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+@keyframes ds-atom-snackbar-slideout {
+	to {
+		opacity: 0;
+		transform: translateY(8px);
+	}
+}
+@media (prefers-reduced-motion: reduce) {
+	.ds-atom-snackbar,
+	.ds-atom-snackbar[data-dismissing="true"] {
+		animation: none;
+	}
+}
 /* Dark mode: lift saturation 0.10 → 0.16 so tone bgs read on cream-2 surfaces. */
 .dark .ds-atom-toast[data-tone="success"] {
 	background: rgba(74, 222, 128, 0.16);
@@ -1828,39 +1988,44 @@
 	background: var(--amber-l);
 	border-radius: 0;
 }
-/* v0.5.3 - half-cell light-amber bg behind start/end pills extends the
-   in-range bg under the rounded selected pill, eliminating the notch
-   artifact at range endpoints. Applies only on real ranges (start !== end);
-   1-day ranges render as standalone selected. */
+/* v0.6 — range endpoints: amber-l half-strip on the connected side + amber pill.
+   The cell itself carries the amber-l strip via a CSS gradient; the amber pill is
+   a ::before pseudo-element at z-index:0 painted on top of it. The old z:-1 ::before
+   approach was wrong: a z:-1 pseudo-element goes into the PARENT stacking context,
+   below the cell at z-auto. The cell's solid amber background (from is-selected)
+   painted over it entirely — only tiny corner-notch leaks from border-radius,
+   not the full half-strip the design requires. The new approach:
+     1. Cell background = gradient (transparent | amber-l split at 50%)
+     2. ::before at z:0 = full-inset amber pill with border-radius
+     3. .ds-atom-datepicker-cell-num at z:1 lifts the date number above the pill */
 .ds-atom-datepicker-cell.is-range-start,
 .ds-atom-datepicker-cell.is-range-end {
 	position: relative;
 }
-.ds-atom-datepicker-cell.is-range-start::before {
-	content: "";
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	right: 0;
-	width: 50%;
-	background: var(--amber-l);
-	z-index: -1;
+.ds-atom-datepicker-cell.is-selected.is-range-start {
+	background: linear-gradient(to right, transparent 50%, var(--amber-l) 50%);
+	border-radius: 0;
+}
+.ds-atom-datepicker-cell.is-selected.is-range-end {
+	background: linear-gradient(to right, var(--amber-l) 50%, transparent 50%);
+	border-radius: 0;
 }
-.ds-atom-datepicker-cell.is-range-end::before {
+.ds-atom-datepicker-cell.is-selected.is-range-start::before,
+.ds-atom-datepicker-cell.is-selected.is-range-end::before {
 	content: "";
 	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	width: 50%;
-	background: var(--amber-l);
-	z-index: -1;
+	inset: 0;
+	background: var(--amber);
+	border-radius: 6px;
+	z-index: 0;
 }
-/* v0.5.5 - hover state preservation for cells with state modifiers.
-   Without these explicit overrides, the generic .ds-atom-datepicker-cell:hover
-   rule wins on source order (equal specificity) and destroys the amber pill,
-   in-range bg, and v0.5.3 half-cell pseudo-elements. Each rule preserves the
-   state visual + adds a subtle hover feedback (filter brightness). */
+/* Lift the date number above the amber ::before pill. Applied unconditionally
+   so the number is always above any ::before on the cell. */
+.ds-atom-datepicker-cell-num {
+	position: relative;
+	z-index: 1;
+}
+/* Hover state preservation. */
 .ds-atom-datepicker-cell.is-selected:hover:not(:disabled) {
 	background: var(--amber);
 	filter: brightness(0.92);
@@ -1869,11 +2034,18 @@
 	background: var(--amber-l);
 	filter: brightness(0.97);
 }
-/* No filter here - filter creates a stacking context that makes z-index:-1
-   ::before render above the cell background, causing a half-cell split.
-   Use explicit slightly-darker amber instead. */
-.ds-atom-datepicker-cell.is-range-start:hover:not(:disabled),
-.ds-atom-datepicker-cell.is-range-end:hover:not(:disabled) {
+/* Range endpoints on hover: keep the gradient strip, cancel filter (would create
+   a stacking context), darken the pill via ::before. */
+.ds-atom-datepicker-cell.is-selected.is-range-start:hover:not(:disabled) {
+	background: linear-gradient(to right, transparent 50%, var(--amber-l) 50%);
+	filter: none;
+}
+.ds-atom-datepicker-cell.is-selected.is-range-end:hover:not(:disabled) {
+	background: linear-gradient(to right, var(--amber-l) 50%, transparent 50%);
+	filter: none;
+}
+.ds-atom-datepicker-cell.is-selected.is-range-start:hover:not(:disabled)::before,
+.ds-atom-datepicker-cell.is-selected.is-range-end:hover:not(:disabled)::before {
 	background: #d97706;
 }
 /* Today cell hover (only when not also selected/in-range/endpoint) - preserve
@@ -1896,6 +2068,7 @@
 	height: 3px;
 	border-radius: 50%;
 	background: var(--ink-3);
+	z-index: 1;
 }
 .ds-atom-datepicker-cell.is-selected .ds-atom-datepicker-event-dot {
 	background: var(--ink);
@@ -1968,9 +2141,23 @@
 	background: rgba(245, 158, 11, 0.18);
 	filter: brightness(1.08);
 }
-.dark .ds-atom-datepicker-cell.is-range-start:hover:not(:disabled),
-.dark .ds-atom-datepicker-cell.is-range-end:hover:not(:disabled) {
-	/* Same fix: no filter to avoid stacking-context ::before bleed. */
+/* Dark mode range endpoints: translucent amber strip (matches is-in-range dark bg). */
+.dark .ds-atom-datepicker-cell.is-selected.is-range-start {
+	background: linear-gradient(to right, transparent 50%, rgba(245, 158, 11, 0.18) 50%);
+}
+.dark .ds-atom-datepicker-cell.is-selected.is-range-end {
+	background: linear-gradient(to right, rgba(245, 158, 11, 0.18) 50%, transparent 50%);
+}
+.dark .ds-atom-datepicker-cell.is-selected.is-range-start:hover:not(:disabled) {
+	background: linear-gradient(to right, transparent 50%, rgba(245, 158, 11, 0.18) 50%);
+	filter: none;
+}
+.dark .ds-atom-datepicker-cell.is-selected.is-range-end:hover:not(:disabled) {
+	background: linear-gradient(to right, rgba(245, 158, 11, 0.18) 50%, transparent 50%);
+	filter: none;
+}
+.dark .ds-atom-datepicker-cell.is-selected.is-range-start:hover:not(:disabled)::before,
+.dark .ds-atom-datepicker-cell.is-selected.is-range-end:hover:not(:disabled)::before {
 	background: #fbbf24;
 }
 .dark
@@ -1998,6 +2185,99 @@
 	color: var(--ink);
 }
 
+/* ─── DS atom: DatePicker · popover variant (v0.6.0) ──────────────────
+   Trigger pill + anchored Popover wrapper. Pill is a compact mono-font
+   button that flips to a paper-warm / amber-border highlight while the
+   popover is open (matches add-round handoff §02 State B). The popover
+   container itself is .ds-atom-popover (from the Popover primitive); the
+   datepicker inside uses .is-popover to drop the outer border/padding
+   since the popover chrome already provides them. */
+.ds-atom-datepicker-trigger {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 7px 11px;
+	border: 1px solid var(--rule);
+	border-radius: 7px;
+	background: var(--panel, #ffffff);
+	color: var(--ink);
+	font-family: var(--mono);
+	font-size: 11.5px;
+	font-weight: 600;
+	letter-spacing: 0.01em;
+	line-height: 1;
+	cursor: pointer;
+	transition: background 0.08s ease, border-color 0.08s ease;
+}
+.ds-atom-datepicker-trigger:hover {
+	border-color: var(--ink-3);
+}
+.ds-atom-datepicker-trigger:focus-visible {
+	outline: 2px solid var(--amber);
+	outline-offset: 2px;
+}
+.ds-atom-datepicker-trigger.is-open {
+	background: var(--paper-warm, #f8f3e5);
+	border-color: #e8d9ac;
+	color: var(--amber-ink, var(--ink));
+}
+.ds-atom-datepicker-trigger-label.is-placeholder {
+	color: var(--ink-4);
+	font-style: italic;
+	font-family: var(--serif, "Newsreader", Georgia, serif);
+	font-weight: 500;
+	font-size: 12px;
+	letter-spacing: 0;
+}
+.ds-atom-datepicker-trigger-caret {
+	color: var(--ink-3);
+	font-size: 10px;
+	line-height: 1;
+	transform: translateY(-0.5px);
+}
+.ds-atom-datepicker-trigger.is-open .ds-atom-datepicker-trigger-caret {
+	color: var(--amber-ink, var(--ink));
+}
+/* Popover wrapper: clamp width on narrow viewports so it never overflows. */
+.ds-atom-popover.ds-atom-datepicker-popover {
+	padding: 0;
+	max-width: calc(100vw - 24px);
+}
+/* Inside-popover calendar: shed the outer chrome (border/bg/padding) so the
+   popover panel itself frames the calendar; the actions row below adds its
+   own divider. */
+.ds-atom-datepicker.is-popover {
+	display: block;
+	background: transparent;
+	border: 0;
+	border-radius: 0;
+	padding: 10px 10px 0;
+}
+.ds-atom-datepicker-popover-actions {
+	display: flex;
+	justify-content: flex-end;
+	gap: 6px;
+	padding: 8px 10px;
+	margin-top: 4px;
+	border-top: 1px solid var(--rule);
+}
+.dark .ds-atom-datepicker-trigger {
+	background: rgba(255, 255, 255, 0.04);
+	border-color: rgba(255, 255, 255, 0.12);
+	color: var(--ink);
+}
+.dark .ds-atom-datepicker-trigger:hover {
+	border-color: rgba(255, 255, 255, 0.22);
+}
+.dark .ds-atom-datepicker-trigger.is-open {
+	background: rgba(245, 158, 11, 0.12);
+	border-color: rgba(245, 158, 11, 0.45);
+	color: var(--amber);
+}
+.dark .ds-atom-datepicker-popover-actions {
+	border-top-color: rgba(255, 255, 255, 0.12);
+}
+
 /* ─── DS atom: SplitButton ────────────────────────────────────────────
    Primary face + chevron divider + Popover menu (DS-56, D-530). Mirrors
    Button variant + size styling via data-variant + data-size selectors.
@@ -2304,6 +2584,37 @@
 	opacity: 0.5;
 	cursor: not-allowed;
 }
+/* Size scale — `sm` shrinks height + padding + text. Mirror of the
+   matching MultiSelect rule. */
+.ds-atom-select[data-size="sm"] {
+	height: 28px;
+	min-width: 0;
+	padding: 0 8px;
+	font-size: 12px;
+	border-radius: var(--radius-sm);
+	gap: 6px;
+}
+/* Solid tone — ink-fill trigger with cream text. Mirror of the matching
+   MultiSelect rule so filter rows mixing both stay visually consistent. */
+.ds-atom-select[data-tone="solid"] {
+	background: var(--ink);
+	color: var(--cream);
+	border-color: transparent;
+}
+.ds-atom-select[data-tone="solid"] .ds-atom-select-placeholder,
+.ds-atom-select[data-tone="solid"] .ds-atom-select-value,
+.ds-atom-select[data-tone="solid"] .ds-atom-select-chevron {
+	color: var(--cream);
+}
+.ds-atom-select[data-tone="solid"] .ds-atom-select-chevron {
+	opacity: 0.7;
+}
+.ds-atom-select[data-tone="solid"]:hover:not(:disabled) {
+	background: var(--ink-2);
+}
+.ds-atom-select[data-tone="solid"][data-state="open"] {
+	border-color: var(--amber);
+}
 .ds-atom-select-value {
 	display: inline-flex;
 	align-items: center;
@@ -2441,6 +2752,59 @@
 	outline: 2px solid var(--amber);
 	outline-offset: 2px;
 }
+/* Compact mode (single-row count summary): the trigger no longer needs to host
+   chips, so drop the 220px floor and collapse the multi-line max-height down
+   to a single 36px row. Consumer wraps still control the outer width. */
+.ds-atom-multiselect-compact {
+	min-width: 0;
+	min-height: 36px;
+	max-height: 36px;
+	height: 36px;
+	align-items: center;
+}
+
+/* Size scale — `sm` shrinks height + padding + text. The compact mode
+   already kills the chip-wrap; this lets a filter row sit at chip rhythm
+   rather than form-input rhythm. */
+.ds-atom-multiselect[data-size="sm"] {
+	min-height: 28px;
+	max-height: 28px;
+	height: 28px;
+	padding: 0 10px;
+	font-size: 12px;
+	border-radius: var(--radius-sm);
+}
+.ds-atom-multiselect[data-size="sm"] .ds-atom-multiselect-chips {
+	gap: 4px;
+}
+.ds-atom-multiselect[data-size="sm"].ds-atom-multiselect-compact {
+	min-height: 28px;
+	max-height: 28px;
+	height: 28px;
+}
+
+/* Solid tone — ink-fill trigger with cream text. The confident "filter
+   applied" affordance, designed to pair with `compact` for a count-summary
+   chip. Border collapses since the ink fill carries its own edge.
+   Mirrors .ds-atom-select[data-tone="solid"] below. */
+.ds-atom-multiselect[data-tone="solid"] {
+	background: var(--ink);
+	color: var(--cream);
+	border-color: transparent;
+}
+.ds-atom-multiselect[data-tone="solid"] .ds-atom-multiselect-placeholder {
+	color: var(--cream);
+}
+.ds-atom-multiselect[data-tone="solid"] .ds-atom-multiselect-chevron {
+	color: var(--cream);
+	opacity: 0.7;
+}
+.ds-atom-multiselect[data-tone="solid"]:hover:not(:disabled) {
+	background: var(--ink-2);
+}
+.ds-atom-multiselect[data-tone="solid"][data-state="open"] {
+	border-color: var(--amber);
+}
 .ds-atom-multiselect:disabled {
 	opacity: 0.5;
 	cursor: not-allowed;
@@ -2495,6 +2859,13 @@
 .ds-atom-multiselect-chevron.is-open {
 	transform: rotate(180deg);
 }
+/* Compact + sm: the trigger is align-items:center (single-row count summary)
+   so the multi-row chip alignment offset on the chevron has to be cleared,
+   otherwise it sits below center. */
+.ds-atom-multiselect-compact .ds-atom-multiselect-chevron,
+.ds-atom-multiselect[data-size="sm"] .ds-atom-multiselect-chevron {
+	margin-top: 0;
+}
 .ds-atom-multiselect-list {
 	list-style: none;
 	margin: 0;
@@ -2531,6 +2902,10 @@
 .ds-atom-multiselect-checkbox.is-checked {
 	background: var(--amber);
 	border-color: var(--amber);
+	/* Pinned dark on amber regardless of theme. var(--ink) flips to warm-cream
+	   in dark mode, which gave us light-on-bright-amber — illegible. The amber
+	   fill is constant across themes, so its glyph color is constant too. */
+	color: #1f1b17;
 }
 .ds-atom-multiselect-option-label {
 	flex: 1;
@@ -3938,8 +4313,8 @@
 	display: inline-block;
 }
 .ds-atom-richtext-toolbar [data-active] {
-	background: color-mix(in srgb, var(--amber) 12%, transparent);
-	color: var(--amber);
+	background: color-mix(in srgb, var(--amber) 12%, transparent) !important;
+	color: var(--amber) !important;
 }
 
 /* ── Heading dropdown menu ────────────────────────────────────────────────── */
@@ -4003,6 +4378,13 @@
 	margin: 14px 0 6px 0;
 	line-height: 1.4;
 }
+/* Highlight mark */
+.ds-atom-richtext-surface .ProseMirror mark {
+	background: #fef08a;
+	color: inherit;
+	border-radius: 2px;
+	padding: 0 1px;
+}
 /* Inline code */
 .ds-atom-richtext-surface .ProseMirror code {
 	background: var(--cream-3);
@@ -4773,3 +5155,778 @@
 .dark .ds-atom-sortable-item {
 	/* tokens flip automatically - no override needed */
 }
+/* ─── DS atom: Kbd ───────────────────────────────────────────────────
+   Keyboard key label. Mono font, bordered chip. Token-driven dark mode. */
+.ds-atom-kbd {
+	font-family: var(--mono);
+	font-size: 11px;
+	line-height: 1;
+	padding: 2px 6px;
+	border-radius: 4px;
+	border: 1px solid var(--rule);
+	background: var(--cream-2);
+	color: var(--ink-2);
+	display: inline-flex;
+	align-items: center;
+	white-space: nowrap;
+	box-shadow: 0 1px 0 var(--rule);
+	flex-shrink: 0;
+}
+.dark .ds-atom-kbd {
+	background: rgba(255, 255, 255, 0.08);
+	border-color: rgba(255, 255, 255, 0.18);
+	color: var(--ink);
+}
+/* ─── DS atom: RelativeTime ─────────────────────────────────────────
+   Inline relative timestamp. Mono font, cursor-default. Token-driven. */
+.ds-atom-relative-time {
+	font-family: var(--mono);
+	font-size: 11px;
+	font-weight: 700;
+	color: var(--ink-2);
+	cursor: default;
+}
+/* ─── DS atom: Pagination ────────────────────────────────────────────
+   Page navigation: prev/next icon buttons + numbered page buttons + ellipsis. */
+.ds-atom-pagination {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+.ds-atom-pagination-list {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+.ds-atom-pagination-icbtn {
+	width: 28px;
+	height: 28px;
+	border-radius: 7px;
+	border: 1px solid var(--rule);
+	background: var(--g-bg);
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--ink-2);
+	cursor: pointer;
+	transition: all 0.15s;
+	outline: none;
+}
+.ds-atom-pagination-icbtn:hover:not(:disabled) {
+	background: var(--cream-2);
+	border-color: rgba(0, 0, 0, 0.12);
+}
+.ds-atom-pagination-icbtn:disabled {
+	opacity: 0.4;
+	cursor: not-allowed;
+}
+.ds-atom-pagination-icbtn:focus-visible {
+	outline: none;
+	box-shadow: var(--focus-ring);
+	border-color: var(--focus);
+}
+.dark .ds-atom-pagination-icbtn:hover:not(:disabled) {
+	background: rgba(255, 255, 255, 0.08);
+	border-color: var(--ink-4);
+}
+.ds-atom-pagination-btn {
+	width: 28px;
+	height: 28px;
+	border-radius: 7px;
+	border: 1px solid transparent;
+	background: transparent;
+	font-size: 12px;
+	font-weight: 400;
+	cursor: pointer;
+	color: var(--ink-2);
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	transition: all 0.12s;
+	font-family: var(--font);
+}
+.ds-atom-pagination-btn:hover:not([aria-current="page"]):not(:disabled) {
+	background: var(--cream-2);
+}
+.ds-atom-pagination-btn[aria-current="page"] {
+	background: var(--ink);
+	color: var(--cream);
+	font-weight: 700;
+	cursor: default;
+}
+.ds-atom-pagination-btn:focus-visible {
+	outline: none;
+	box-shadow: var(--focus-ring);
+	border-color: var(--focus);
+}
+.ds-atom-pagination-ellipsis {
+	width: 28px;
+	height: 28px;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 12px;
+	color: var(--ink-4);
+	pointer-events: none;
+	user-select: none;
+}
+.ds-atom-pagination-label {
+	font-family: var(--mono);
+	font-size: 10px;
+	color: var(--ink-4);
+	margin-left: 6px;
+}
+.ds-atom-pagination-count {
+	font-family: var(--mono);
+	font-size: 11px;
+	font-weight: 700;
+}
+
+/* ─── DS atom: CommandPalette ────────────────────────────────────────────────
+   DSPortal-mounted search panel. Backdrop reuses .ds-atom-modal-backdrop.
+   Panel positioned at 15vh from top via backdrop inline style override
+   (alignItems:flex-start, paddingTop:15vh) set in the component.
+   Focus-trapped via useFocusTrap(panel, open). Document-level keyboard:
+   Escape → onClose+clearQuery, ArrowDown/Up → clamp activeIndex,
+   Enter → onSelect+onClose+clearQuery. Namespace: ds-atom-cmd-*. */
+
+.ds-atom-cmd-panel {
+	background: rgba(255, 255, 255, 0.97); /* always-light — NOT cream token; matches ConfirmDialog CONSTRAINT-010 */
+	-webkit-backdrop-filter: blur(14px);
+	backdrop-filter: blur(14px);
+	border: 1px solid var(--rule);
+	border-radius: var(--radius-lg);
+	box-shadow: var(--shadow-3);
+	width: 560px;
+	max-width: calc(100% - var(--space-4));
+	max-height: 420px;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	font-family: var(--font);
+	color: var(--ink);
+	animation: ds-atom-cmd-in 0.18s ease-out;
+}
+.dark .ds-atom-cmd-panel {
+	background: var(--cream-2);
+	border-color: var(--rule);
+}
+
+/* search input row */
+.ds-atom-cmd-search {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 12px 14px;
+	border-bottom: 1px solid var(--rule);
+	flex-shrink: 0;
+}
+.ds-atom-cmd-input {
+	flex: 1;
+	border: none;
+	outline: none;
+	background: transparent;
+	font-family: var(--font);
+	font-size: 15px;
+	color: var(--ink);
+	min-width: 0;
+}
+.ds-atom-cmd-input::placeholder {
+	color: var(--ink-4);
+}
+
+/* scrollable results list */
+.ds-atom-cmd-list {
+	overflow-y: auto;
+	flex: 1;
+	padding: 6px 0;
+}
+
+/* group header */
+.ds-atom-cmd-group {
+	font-family: var(--mono);
+	font-size: 9px;
+	font-weight: 700;
+	text-transform: uppercase;
+	letter-spacing: 0.08em;
+	color: var(--ink-4);
+	padding: 8px 14px 4px;
+}
+
+/* result item */
+.ds-atom-cmd-item {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 8px 14px;
+	cursor: pointer;
+	border-radius: 8px;
+	margin: 0 6px;
+	font-size: 13.5px;
+	color: var(--ink);
+	transition: background 0.1s;
+}
+.ds-atom-cmd-item:hover,
+.ds-atom-cmd-item[aria-selected="true"] {
+	background: var(--cream-2);
+}
+.dark .ds-atom-cmd-item:hover,
+.dark .ds-atom-cmd-item[aria-selected="true"] {
+	background: var(--cream-3);
+}
+
+/* item sub-elements */
+.ds-atom-cmd-item-icon {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 18px;
+	height: 18px;
+	color: var(--ink-3);
+	flex-shrink: 0;
+}
+.ds-atom-cmd-item-label {
+	flex: 1;
+	min-width: 0;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.ds-atom-cmd-item-shortcut {
+	margin-left: auto;
+	flex-shrink: 0;
+}
+
+/* no-results empty state */
+.ds-atom-cmd-empty {
+	padding: 24px 14px;
+	text-align: center;
+	font-size: 13px;
+	color: var(--ink-4);
+	font-family: var(--font);
+}
+
+@keyframes ds-atom-cmd-in {
+	from {
+		opacity: 0;
+		transform: scale(0.96) translateY(-8px);
+	}
+	to {
+		opacity: 1;
+		transform: none;
+	}
+}
+
+/* ─── DS atom: ColorPicker ──────────────────────────────────────────────
+   Most ColorPicker styles are inline (consistent with DatePicker / StatCard).
+   This block covers only what cannot be expressed inline:
+   pointer-events passthrough on thumbs, focus rings on keyboard-draggable
+   areas, and button-reset on swatch/strip cells. */
+
+/* Thumbs must not intercept pointer events — the parent track div owns drag. */
+.ds-atom-colorpicker-thumb {
+	pointer-events: none;
+	position: absolute;
+	transform: translate(-50%, -50%);
+}
+
+/* Focus ring on keyboard-draggable areas (role="slider"). */
+.ds-atom-colorpicker-canvas:focus-visible,
+.ds-atom-colorpicker-huebar:focus-visible,
+.ds-atom-colorpicker-opacitybar:focus-visible {
+	outline: none;
+	box-shadow: var(--focus-ring);
+	border-radius: 6px;
+}
+
+/* Preset swatch buttons and tonal strip cell buttons. */
+.ds-atom-colorpicker-swatch,
+.ds-atom-colorpicker-cell {
+	appearance: none;
+	border: none;
+	padding: 0;
+	cursor: pointer;
+	transition: transform 0.12s ease;
+}
+
+.ds-atom-colorpicker-swatch:focus-visible,
+.ds-atom-colorpicker-cell:focus-visible {
+	outline: none;
+	box-shadow: var(--focus-ring);
+}
+
+/* ─── DS atom: DataGrid (DS-62) ─────────────────────────────────────────────
+   Composed wrapper: bulk-action bar + scroll + footer around Table.
+   Inner table chrome uses existing ds-atom-table-* classes. */
+
+/* Outer glass container */
+.ds-atom-datagrid {
+	border-radius: 14px;
+	overflow: hidden;
+}
+
+/* Scroll container — enables horizontal scroll when columns exceed viewport */
+.ds-atom-datagrid-scroll {
+	overflow-x: auto;
+}
+
+/* Bulk-action bar — amber tint, shown when rows are selected */
+.ds-atom-datagrid-bulkbar {
+	padding: 8px 16px;
+	background: rgba(245, 158, 11, 0.05);
+	border-bottom: 1px solid var(--rule);
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	font-size: 12px;
+}
+.ds-atom-datagrid-bulkbar-count {
+	font-weight: 600;
+	font-family: var(--mono);
+	font-size: 11px;
+}
+.dark .ds-atom-datagrid-bulkbar {
+	background: rgba(245, 158, 11, 0.07);
+}
+
+/* Footer — row count (left) + Pagination (right) */
+.ds-atom-datagrid-footer {
+	padding: 10px 16px;
+	border-top: 1px solid var(--rule);
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+.ds-atom-datagrid-footer-count {
+	font-family: var(--mono);
+	font-size: 10px;
+	color: var(--ink-4);
+}
+
+/* ─── DS atom: OAuthButton ─────────────────────────────────────────────
+   Geometry baseline (height/radius/font/padding) lives here so the theme
+   layer can override; prop-derived bits (dark-mode bg/color/border) ride
+   inline styles in the component.
+   Inherits the same interaction conventions as DS Button — :active scale,
+   :focus-visible amber ring, :disabled opacity — so OAuth and email-form
+   buttons feel identical to the user. */
+.ds-atom-oauthbtn {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 10px;
+	height: 44px;
+	width: 100%;
+	padding: 0 18px;
+	border-radius: 9px;
+	font-family: var(--font);
+	font-size: 13px;
+	font-weight: 600;
+	cursor: pointer;
+	transition: background-color 0.15s, border-color 0.15s, transform 0.08s;
+	user-select: none;
+	-webkit-tap-highlight-color: transparent;
+}
+.ds-atom-oauthbtn:active:not(:disabled) {
+	transform: scale(0.97);
+}
+.ds-atom-oauthbtn:disabled {
+	opacity: 0.4;
+	cursor: not-allowed;
+	pointer-events: none;
+}
+.ds-atom-oauthbtn:focus-visible {
+	outline: none;
+	box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
+}
+.ds-atom-oauthbtn:hover:not(:disabled) {
+	background: var(--cream-2);
+	border-color: rgba(0, 0, 0, 0.12);
+}
+.ds-atom-oauthbtn[data-dark="true"]:hover:not(:disabled) {
+	background: rgba(255, 255, 255, 0.08);
+	border-color: rgba(255, 255, 255, 0.18);
+}
+
+/* ─── DS atom: Link ─────────────────────────────────────────────────────
+   Three variants (inline / footer / action). Hover deepens the underline
+   from 25% → 100% opacity (light) / 40% → 100% (dark) per the design's
+   "full-opacity underline on hover" convention. No :active transform —
+   links aren't buttons; the underline change is the press affordance. */
+.ds-atom-link {
+	text-decoration: underline;
+	text-underline-offset: 2px;
+	cursor: pointer;
+	transition: color 0.15s, text-decoration-color 0.15s;
+}
+.ds-atom-link:hover {
+	text-decoration-color: currentColor;
+}
+.ds-atom-link:focus-visible {
+	outline: none;
+	box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
+	border-radius: 2px;
+}
+.dark .ds-atom-link[data-variant="footer"],
+.dark .ds-atom-link[data-variant="action"] {
+	color: var(--ink);
+	text-decoration-color: rgba(255, 255, 255, 0.4);
+}
+
+/* ─── DS atom: Heading / Text / Eyebrow ────────────────────────────────
+   Non-interactive primitives — colors flow via tokens.css :root.dark
+   automatically. No hover/focus rules needed. */
+
+/* ─── DS atom: Divider ─────────────────────────────────────────────────
+   Hairline rules use var(--rule) which flips in dark mode via tokens.css.
+   The labeled-variant <span> children inherit the labelStyle inline. */
+
+/* ─── DS atom: DotGrid ─────────────────────────────────────────────────
+   Geometry baseline; the radial-gradient image + opacity ride inline
+   styles (prop-derived). pointer-events: none so the overlay never
+   blocks pointer interaction with the content beneath. */
+.ds-atom-dotgrid {
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+}
+
+/* ─── DS layout: SplitHero ─────────────────────────────────────────────
+   All sizing/responsive concerns are emitted by the component (inline
+   <style> with component-scoped class). No global rules needed here. */
+
+/* ─── DS atom: StatusPill ──────────────────────────────────────────────
+   Per-stage pipeline chip. Six locked stages map to subtle tints. Used in
+   both kanban cards and DataGrid status columns from the same atom so the
+   visual contract stays single-sourced.
+   Ported from design/cairn_ds_additions/Cairn DS Additions.html §01. */
+.ds-atom-statuspill {
+	display: inline-flex;
+	align-items: center;
+	gap: 5px;
+	font-size: 11px;
+	font-weight: 600;
+	padding: 3px 9px;
+	border-radius: 999px;
+	font-family: var(--font);
+	border: 1px solid transparent;
+	white-space: nowrap;
+	cursor: pointer;
+	transition: filter 0.12s, border-color 0.12s;
+	background: transparent;
+}
+.ds-atom-statuspill[data-interactive="false"] {
+	cursor: default;
+}
+.ds-atom-statuspill:hover {
+	filter: brightness(0.97);
+}
+.dark .ds-atom-statuspill:hover {
+	filter: brightness(1.08);
+}
+.ds-atom-statuspill-chev {
+	font-size: 10px;
+	opacity: 0.65;
+	margin-left: 1px;
+}
+.ds-atom-statuspill[data-stage="wishlist"] {
+	background: var(--cream-2);
+	color: var(--ink-3);
+	border-color: var(--rule);
+}
+.ds-atom-statuspill[data-stage="applied"] {
+	background: transparent;
+	color: var(--ink-2);
+	border-color: var(--ink-5);
+}
+.ds-atom-statuspill[data-stage="screening"] {
+	background: rgba(245, 158, 11, 0.1);
+	color: var(--amber-d);
+}
+.ds-atom-statuspill[data-stage="interviewing"] {
+	background: rgba(245, 158, 11, 0.18);
+	color: var(--amber-d);
+	font-weight: 700;
+}
+.ds-atom-statuspill[data-stage="offer"] {
+	background: rgba(34, 197, 94, 0.14);
+	color: var(--green);
+}
+.ds-atom-statuspill[data-stage="closed"] {
+	background: var(--cream-3);
+	color: var(--ink-3);
+}
+.dark .ds-atom-statuspill[data-stage="offer"] {
+	background: rgba(34, 197, 94, 0.18);
+	color: var(--green-vivid);
+}
+.ds-atom-statuspill:focus-visible {
+	outline: none;
+	box-shadow: var(--focus-ring);
+}
+
+/* ─── DS atom: Heading (data-attr extensions) ─────────────────────────
+   The TS Heading component already drives sizing via inline styles when
+   `size` is numeric. These rules add a data-attr-driven path so calls
+   like <Heading size="2xl" weight="black" tone="amber"> work declaratively
+   (CSS does the work, no inline style allocation). Bundle: §02. */
+/* Body-size tokens read better at --lh-snug (1.08) — small headings stack
+   in dense UI; display sizes use --lh-tight (0.94) so multiline heroes hug
+   tightly. Letter-spacing follows the same break. */
+.ds-atom-heading[data-size="2xs"] {
+	font-size: var(--text-2xs);
+	line-height: var(--lh-snug);
+}
+.ds-atom-heading[data-size="xs"] {
+	font-size: var(--text-xs);
+	line-height: var(--lh-snug);
+}
+.ds-atom-heading[data-size="sm"] {
+	font-size: var(--text-sm);
+	line-height: var(--lh-snug);
+}
+.ds-atom-heading[data-size="base"] {
+	font-size: var(--text-base);
+	line-height: var(--lh-snug);
+}
+.ds-atom-heading[data-size="md"] {
+	font-size: var(--text-md);
+	line-height: var(--lh-snug);
+}
+.ds-atom-heading[data-size="lg"] {
+	font-size: var(--text-lg);
+	line-height: var(--lh-snug);
+}
+.ds-atom-heading[data-size="xl"] {
+	font-size: var(--text-xl);
+	line-height: var(--lh-snug);
+}
+.ds-atom-heading[data-size="2xl"] {
+	font-size: var(--text-2xl);
+	line-height: var(--lh-snug);
+}
+.ds-atom-heading[data-size="3xl"] {
+	font-size: var(--text-3xl);
+	line-height: var(--lh-tight);
+	letter-spacing: var(--ls-tighter);
+}
+.ds-atom-heading[data-size="4xl"] {
+	font-size: var(--text-4xl);
+	line-height: var(--lh-tight);
+	letter-spacing: var(--ls-tighter);
+}
+.ds-atom-heading[data-weight="regular"] {
+	font-weight: 500;
+}
+.ds-atom-heading[data-weight="medium"] {
+	font-weight: 600;
+}
+.ds-atom-heading[data-weight="bold"] {
+	font-weight: 700;
+}
+.ds-atom-heading[data-weight="black"] {
+	font-weight: 900;
+}
+.ds-atom-heading[data-tone="ink-2"] {
+	color: var(--ink-2);
+}
+.ds-atom-heading[data-tone="ink-3"] {
+	color: var(--ink-3);
+}
+.ds-atom-heading[data-tone="amber"] {
+	color: var(--amber-d);
+}
+
+/* ─── DS atom: Text (data-attr extensions) ────────────────────────────
+   Adds a declarative path next to the existing `variant`-driven one.
+   Variants ('body'|'small'|'caption'|'legal') still work via the TS
+   inline-style path; size/weight/tone/mono/leading are the new data-
+   attr-driven path. Bundle: §03. */
+.ds-atom-text[data-size="2xs"] {
+	font-size: var(--text-2xs);
+}
+.ds-atom-text[data-size="xs"] {
+	font-size: var(--text-xs);
+}
+.ds-atom-text[data-size="sm"] {
+	font-size: var(--text-sm);
+}
+.ds-atom-text[data-size="base"] {
+	font-size: var(--text-base);
+}
+.ds-atom-text[data-size="md"] {
+	font-size: var(--text-md);
+}
+.ds-atom-text[data-size="lg"] {
+	font-size: var(--text-lg);
+}
+.ds-atom-text[data-weight="regular"] {
+	font-weight: 400;
+}
+.ds-atom-text[data-weight="medium"] {
+	font-weight: 500;
+}
+.ds-atom-text[data-weight="bold"] {
+	font-weight: 600;
+}
+.ds-atom-text[data-weight="black"] {
+	font-weight: 700;
+}
+.ds-atom-text[data-tone="ink"] {
+	color: var(--ink);
+}
+.ds-atom-text[data-tone="ink-3"] {
+	color: var(--ink-3);
+}
+.ds-atom-text[data-tone="ink-4"] {
+	color: var(--ink-4);
+}
+.ds-atom-text[data-tone="amber"] {
+	color: var(--amber-d);
+}
+.ds-atom-text[data-tone="red"] {
+	color: var(--red);
+}
+.ds-atom-text[data-tone="green"] {
+	color: var(--green);
+}
+.ds-atom-text[data-mono="true"] {
+	font-family: var(--mono);
+	letter-spacing: 0.02em;
+}
+.ds-atom-text[data-leading="tight"] {
+	line-height: var(--lh-tight);
+}
+.ds-atom-text[data-leading="snug"] {
+	line-height: var(--lh-snug);
+}
+.ds-atom-text[data-leading="relaxed"] {
+	line-height: var(--lh-relaxed);
+}
+
+/* ─── DS atom: Eyebrow (tone data-attr extension) ─────────────────────
+   Existing `size` + `color` props still work via inline style; new `tone`
+   prop is data-attr-driven. Bundle: §04. */
+.ds-atom-eyebrow[data-tone="amber"] {
+	color: var(--amber-d);
+}
+.ds-atom-eyebrow[data-tone="ink-4"] {
+	color: var(--ink-4);
+}
+
+/* ─── DS atom: Card (data-attr extensions) ────────────────────────────
+   The TS Card has `variant` ('glass'|'amber'|'dark'|'kanban'). New
+   data-attrs (padding/radius/hover/tone) are independent and additive:
+   they layer on top of the variant. Bundle: §05. */
+.ds-atom-card[data-padding="none"] {
+	padding: 0;
+}
+.ds-atom-card[data-padding="sm"] {
+	padding: var(--space-3);
+}
+.ds-atom-card[data-padding="md"] {
+	padding: var(--space-4);
+}
+.ds-atom-card[data-padding="lg"] {
+	padding: var(--space-6);
+}
+.ds-atom-card[data-padding="xl"] {
+	padding: var(--space-8);
+}
+.ds-atom-card[data-radius="sm"] {
+	border-radius: var(--radius-sm);
+}
+.ds-atom-card[data-radius="md"] {
+	border-radius: var(--radius-md);
+}
+.ds-atom-card[data-radius="lg"] {
+	border-radius: var(--radius-lg);
+}
+.ds-atom-card[data-radius="xl"] {
+	border-radius: var(--radius-xl);
+}
+.ds-atom-card[data-hover="elevate"] {
+	cursor: pointer;
+	transition: box-shadow 0.15s, border-color 0.15s;
+}
+.ds-atom-card[data-hover="elevate"]:hover {
+	box-shadow: var(--shadow-2);
+	border-color: rgba(0, 0, 0, 0.12);
+}
+.dark .ds-atom-card[data-hover="elevate"]:hover {
+	border-color: var(--ink-4);
+}
+.ds-atom-card[data-tone="amber"] {
+	background: var(--amber-l);
+	border-color: rgba(245, 158, 11, 0.3);
+}
+.ds-atom-card[data-tone="cream-2"] {
+	background: var(--cream-2);
+}
+.ds-atom-card[data-tone="flat"] {
+	background: transparent;
+	border: 1px dashed var(--rule);
+}
+
+/* ─── DS atom: Link (quiet + default variants) ────────────────────────
+   The TS Link already supports inline / footer / action. Bundle adds
+   `default` (neutral underline that turns amber on hover) and `quiet`
+   (no underline until hover). Bundle: §06. */
+.ds-atom-link[data-variant="default"] {
+	color: var(--ink-2);
+	text-decoration: underline;
+	text-decoration-thickness: 1px;
+	text-underline-offset: 2px;
+}
+.ds-atom-link[data-variant="default"]:hover {
+	color: var(--ink);
+	text-decoration-color: var(--amber);
+}
+.ds-atom-link[data-variant="quiet"] {
+	color: var(--ink-3);
+	text-decoration: none;
+}
+.ds-atom-link[data-variant="quiet"]:hover {
+	color: var(--ink);
+	text-decoration: underline;
+}
+
+/* ─── DS atom: Divider (spacing + style extensions) ───────────────────
+   The TS Divider already supports horizontal/vertical + optional label.
+   New data-attrs add spacing presets + dashed/amber-accent styles.
+   Bundle: §07. */
+.ds-atom-divider[data-spacing="none"] {
+	margin: 0;
+}
+.ds-atom-divider[data-spacing="sm"][data-orient="horizontal"] {
+	margin: var(--space-2) 0;
+}
+.ds-atom-divider[data-spacing="md"][data-orient="horizontal"] {
+	margin: var(--space-4) 0;
+}
+.ds-atom-divider[data-spacing="lg"][data-orient="horizontal"] {
+	margin: var(--space-6) 0;
+}
+.ds-atom-divider[data-spacing="xl"][data-orient="horizontal"] {
+	margin: var(--space-8) 0;
+}
+.ds-atom-divider[data-spacing="sm"][data-orient="vertical"] {
+	margin: 0 var(--space-2);
+}
+.ds-atom-divider[data-spacing="md"][data-orient="vertical"] {
+	margin: 0 var(--space-3);
+}
+.ds-atom-divider[data-spacing="lg"][data-orient="vertical"] {
+	margin: 0 var(--space-4);
+}
+.ds-atom-divider[data-style="dashed"] {
+	background: transparent;
+	border-top: 1px dashed var(--rule);
+}
+.ds-atom-divider[data-style="amber"] {
+	background: rgba(245, 158, 11, 0.3);
+	height: 2px;
+}