@atelic-action/ui 0.17.2 → 1.1.0

package/src/styles/components.css

@@ -4,11 +4,10 @@
    classes (.page-hero, .eyebrow, .lead, .btn) arrive unlayered and win, so
    these only fill in where a site does not style them.
 
-   Every rule answers to either of two scopes. `.mkt` is a site's canvas,
-   which base.css also resets headings, links, and buttons under.
-   `.atelic-ui` is the same scope with no resets behind it, for an app that
-   has its own base (Tailwind, shadcn) and wants only the components. The
-   two weigh the same, so nothing a site already overrides changes.
+   Every rule answers to `.atelic-ui`, the one root class a consumer wears.
+   A site also imports base.css, which resets headings, links, and buttons
+   under the same class; an app with its own base (Tailwind, shadcn) imports
+   this sheet alone and gets the components with no resets behind them.
 
    Two tokens are read through names of the package's own first:
    `--ui-primary` and `--ui-card`, each falling back to `--primary` and
@@ -16,27 +15,27 @@
    `--primary` and `--card` hold something else (shadcn keeps bare HSL
    channels there) sets the `--ui-` names and leaves its own alone. */
 @layer atelic-ui {
-	:is(.mkt, .atelic-ui) .not-found-hero {
+	.atelic-ui .not-found-hero {
 		padding-top: calc(var(--nav-height, 72px) + clamp(40px, 7vw, 86px));
 		padding-bottom: clamp(28px, 5vw, 60px);
 	}
-	:is(.mkt, .atelic-ui) .not-found-hero h1 {
+	.atelic-ui .not-found-hero h1 {
 		margin: 16px 0 0;
 	}
-	:is(.mkt, .atelic-ui) .not-found-hero .lead {
+	.atelic-ui .not-found-hero .lead {
 		margin-top: 22px;
 		max-width: 56ch;
 	}
-	:is(.mkt, .atelic-ui) .not-found-links .cta-row,
-	:is(.mkt, .atelic-ui) .not-found-closing .cta-row {
+	.atelic-ui .not-found-links .cta-row,
+	.atelic-ui .not-found-closing .cta-row {
 		margin-top: 22px;
 	}
 
 	/* ---- Tones: the one palette this package carries, because good, a
 	   warning, and broken read green, amber, and red whatever the brand is.
-	   A site's theme may restate any of these on .mkt. A component sets
+	   A site's theme may restate any of these on .atelic-ui. A component sets
 	   data-tone, and --tone, --tone-fill, and --tone-bg follow. ---- */
-	:is(.mkt, .atelic-ui) {
+	.atelic-ui {
 		--tone-good: #1b7f3b;
 		--tone-good-fill: #37a35c;
 		--tone-good-bg: #eaf6ee;
@@ -47,27 +46,27 @@
 		--tone-bad-fill: #d9483f;
 		--tone-bad-bg: #fdecea;
 	}
-	:is(.mkt, .atelic-ui) [data-tone="good"] {
+	.atelic-ui [data-tone="good"] {
 		--tone: var(--tone-good);
 		--tone-fill: var(--tone-good-fill);
 		--tone-bg: var(--tone-good-bg);
 	}
-	:is(.mkt, .atelic-ui) [data-tone="warn"] {
+	.atelic-ui [data-tone="warn"] {
 		--tone: var(--tone-warn);
 		--tone-fill: var(--tone-warn-fill);
 		--tone-bg: var(--tone-warn-bg);
 	}
-	:is(.mkt, .atelic-ui) [data-tone="bad"] {
+	.atelic-ui [data-tone="bad"] {
 		--tone: var(--tone-bad);
 		--tone-fill: var(--tone-bad-fill);
 		--tone-bg: var(--tone-bad-bg);
 	}
-	:is(.mkt, .atelic-ui) [data-tone="info"] {
+	.atelic-ui [data-tone="info"] {
 		--tone: var(--ui-primary, var(--primary));
 		--tone-fill: var(--primary-bright);
 		--tone-bg: var(--primary-tint);
 	}
-	:is(.mkt, .atelic-ui) [data-tone="muted"] {
+	.atelic-ui [data-tone="muted"] {
 		--tone: var(--neutral-500);
 		--tone-fill: var(--neutral-200);
 		--tone-bg: var(--surface-alt);
@@ -75,20 +74,20 @@
 
 	/* ---- StatRow: large figures, each over what it counts, its period,
 	   and its comparisons ---- */
-	:is(.mkt, .atelic-ui) .stat-row {
+	.atelic-ui .stat-row {
 		display: grid;
 		gap: 24px;
 		grid-template-columns: repeat(2, minmax(0, 1fr));
 	}
 	@media (min-width: 760px) {
-		:is(.mkt, .atelic-ui) .stat-row {
+		.atelic-ui .stat-row {
 			grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
 		}
 	}
-	:is(.mkt, .atelic-ui) .stat-row.is-center .stat {
+	.atelic-ui .stat-row.is-center .stat {
 		text-align: center;
 	}
-	:is(.mkt, .atelic-ui) .stat .num {
+	.atelic-ui .stat .num {
 		display: flex;
 		align-items: center;
 		gap: 0.12em;
@@ -99,26 +98,26 @@
 		line-height: 1;
 		font-variant-numeric: tabular-nums;
 	}
-	:is(.mkt, .atelic-ui) .stat-row.is-center .stat .num {
+	.atelic-ui .stat-row.is-center .stat .num {
 		justify-content: center;
 	}
-	:is(.mkt, .atelic-ui) .stat-trend {
+	.atelic-ui .stat-trend {
 		width: 0.8em;
 		height: 0.8em;
 		flex: none;
 	}
-	:is(.mkt, .atelic-ui) .stat .lbl {
+	.atelic-ui .stat .lbl {
 		font-size: 0.95rem;
 		font-weight: 650;
 		color: var(--ink);
 		margin-top: 8px;
 	}
-	:is(.mkt, .atelic-ui) .stat-period {
+	.atelic-ui .stat-period {
 		margin-left: 0.5em;
 		font-weight: 400;
 		color: var(--neutral-500);
 	}
-	:is(.mkt, .atelic-ui) .stat-delta {
+	.atelic-ui .stat-delta {
 		display: flex;
 		flex-wrap: wrap;
 		align-items: baseline;
@@ -129,26 +128,26 @@
 		color: var(--neutral-500);
 		font-variant-numeric: tabular-nums;
 	}
-	:is(.mkt, .atelic-ui) .stat-delta-change {
+	.atelic-ui .stat-delta-change {
 		display: inline-flex;
 		align-items: center;
 		gap: 2px;
 		font-weight: 700;
 		color: var(--tone);
 	}
-	:is(.mkt, .atelic-ui) .stat-delta-change svg {
+	.atelic-ui .stat-delta-change svg {
 		align-self: center;
 	}
-	:is(.mkt, .atelic-ui) .stat-delta-basis {
+	.atelic-ui .stat-delta-basis {
 		text-decoration: none;
 	}
-	:is(.mkt, .atelic-ui) .stat .note {
+	.atelic-ui .stat .note {
 		font-size: 0.8rem;
 		color: var(--neutral-500);
 		margin-top: 4px;
 	}
 
-	:is(.mkt, .atelic-ui) .stat-unit {
+	.atelic-ui .stat-unit {
 		margin-left: 0.2em;
 		font-size: 0.4em;
 		font-weight: 500;
@@ -159,20 +158,20 @@
 	/* ---- StatRow, quiet: a glance row for a working page. A light figure in
 	   the text color over a small capitalized label, the stats divided by a
 	   hairline. `--stat-size` sets the figure. ---- */
-	:is(.mkt, .atelic-ui) .stat-row.is-quiet {
+	.atelic-ui .stat-row.is-quiet {
 		display: flex;
 		gap: 0;
 	}
-	:is(.mkt, .atelic-ui) .stat-row.is-quiet .stat {
+	.atelic-ui .stat-row.is-quiet .stat {
 		flex: 1;
 		min-width: 64px;
 		padding-right: 16px;
 	}
-	:is(.mkt, .atelic-ui) .stat-row.is-quiet .stat + .stat {
+	.atelic-ui .stat-row.is-quiet .stat + .stat {
 		padding-left: 16px;
 		border-left: 1px solid var(--neutral-200);
 	}
-	:is(.mkt, .atelic-ui) .stat-row.is-quiet .stat .num {
+	.atelic-ui .stat-row.is-quiet .stat .num {
 		align-items: baseline;
 		gap: 4px;
 		font: 300 var(--stat-size, 28px) / 1 var(--font-sans);
@@ -181,11 +180,11 @@
 		letter-spacing: -0.02em;
 		color: var(--tone, var(--ink));
 	}
-	:is(.mkt, .atelic-ui) .stat-row.is-quiet .stat-unit {
+	.atelic-ui .stat-row.is-quiet .stat-unit {
 		margin-left: 0;
 		font: 500 12px / 1 var(--font-mono);
 	}
-	:is(.mkt, .atelic-ui) .stat-row.is-quiet .stat .lbl {
+	.atelic-ui .stat-row.is-quiet .stat .lbl {
 		margin-top: 7px;
 		font: 500 10px / 1.2 var(--font-sans);
 		letter-spacing: 0.1em;
@@ -193,29 +192,30 @@
 		color: var(--neutral-500);
 	}
 
-	/* ---- Disclosure: a section the page opens and closes. The toggle's
+	/* ---- Disclosure, controlled: an app's card, a section the page opens
+	   and closes. The toggle's
 	   ::after covers the whole header row, so the meta and the chevron fold
 	   it too while staying out of its name. ---- */
-	:is(.mkt, .atelic-ui) .disclosure {
+	.atelic-ui .disclosure {
 		border: 1px solid var(--neutral-200);
 		border-radius: 16px;
 		background: var(--ui-card, var(--card));
 		overflow: hidden;
 	}
-	:is(.mkt, .atelic-ui) .disclosure-head {
+	.atelic-ui .disclosure-head {
 		position: relative;
 		display: flex;
 		align-items: center;
 		gap: 10px;
 		padding: 14px 18px;
 	}
-	:is(.mkt, .atelic-ui) .disclosure-title {
+	.atelic-ui .disclosure-title {
 		display: flex;
 		min-width: 0;
 		margin: 0;
 		font: inherit;
 	}
-	:is(.mkt, .atelic-ui) .disclosure-toggle {
+	.atelic-ui .disclosure-toggle {
 		border: none;
 		background: transparent;
 		padding: 0;
@@ -225,117 +225,127 @@
 		color: var(--ink);
 		cursor: pointer;
 	}
-	:is(.mkt, .atelic-ui) .disclosure-toggle::after {
+	.atelic-ui .disclosure-toggle::after {
 		content: "";
 		position: absolute;
 		inset: 0;
 	}
-	:is(.mkt, .atelic-ui) .disclosure-toggle:focus-visible {
+	.atelic-ui .disclosure-toggle:focus-visible {
 		outline: none;
 	}
-	:is(.mkt, .atelic-ui) .disclosure-toggle:focus-visible::after {
+	.atelic-ui .disclosure-toggle:focus-visible::after {
 		outline: 2px solid var(--disclosure-focus, var(--ink));
 		outline-offset: -2px;
 		border-radius: 15px;
 	}
-	:is(.mkt, .atelic-ui) .disclosure-meta {
+	.atelic-ui .disclosure-meta {
 		display: inline-flex;
 		align-items: center;
 		color: var(--neutral-500);
 	}
-	:is(.mkt, .atelic-ui) .disclosure-chevron {
+	.atelic-ui .disclosure-chevron {
 		margin-left: auto;
 		flex-shrink: 0;
 		color: var(--neutral-500);
 		transition: transform 200ms ease;
 	}
-	:is(.mkt, .atelic-ui) .disclosure.is-open .disclosure-chevron {
+	.atelic-ui .disclosure.is-open > .disclosure-head > .disclosure-chevron {
 		transform: rotate(180deg);
 	}
-	:is(.mkt, .atelic-ui) .disclosure-body {
+	.atelic-ui .disclosure-body {
 		border-top: 1px solid var(--neutral-200);
 	}
 
-	/* ---- Collapsible: a labeled line that opens to the detail behind it ---- */
-	:is(.mkt, .atelic-ui) .collapsible > summary {
-		display: flex;
-		align-items: center;
+	/* ---- Disclosure, native: a document's fold, a labeled line over its
+	   summary that opens to the detail behind it. Left uncontrolled, the
+	   component is a details element wearing .is-native, and these undo the
+	   card above: no border, no ground, no padding, the body under the line.
+	   Kept at the card's weight or one class over, so a document's own sheet
+	   (artifact.css) can size the parts with a rule of the same weight. ---- */
+	.atelic-ui .disclosure.is-native {
+		border: 0;
+		border-radius: 0;
+		background: none;
+		overflow: visible;
+	}
+	.atelic-ui .is-native > .disclosure-head {
 		justify-content: space-between;
 		gap: 14px;
+		padding: 0;
 		cursor: pointer;
 		list-style: none;
 	}
-	:is(.mkt, .atelic-ui) .collapsible > summary::-webkit-details-marker {
+	.atelic-ui .is-native > .disclosure-head::-webkit-details-marker {
 		display: none;
 	}
-	:is(.mkt, .atelic-ui) .collapsible-text {
+	.atelic-ui .disclosure-text {
 		display: flex;
 		flex-direction: column;
 		gap: 2px;
 		min-width: 0;
 	}
-	:is(.mkt, .atelic-ui) .collapsible-label {
+	.atelic-ui .disclosure-label {
 		font-weight: 650;
 		color: var(--ink);
 	}
-	:is(.mkt, .atelic-ui) .collapsible-summary {
+	.atelic-ui .disclosure-summary {
 		color: var(--ink-soft);
 		text-wrap: pretty;
 	}
-	:is(.mkt, .atelic-ui) .collapsible > summary:hover .collapsible-label {
+	.atelic-ui .is-native > .disclosure-head:hover .disclosure-label {
 		color: var(--ui-primary, var(--primary));
 	}
-	:is(.mkt, .atelic-ui) .collapsible-chevron {
-		flex: none;
-		color: var(--neutral-500);
+	.atelic-ui .is-native > .disclosure-head .disclosure-chevron {
 		transition: transform 0.15s;
 	}
-	:is(.mkt, .atelic-ui) .collapsible[open] > summary .collapsible-chevron {
+	.atelic-ui .is-native[open] > .disclosure-head .disclosure-chevron {
 		transform: rotate(180deg);
 	}
-	:is(.mkt, .atelic-ui) .collapsible-body {
+	.atelic-ui .is-native > .disclosure-body {
+		border-top: 0;
 		margin-top: 12px;
 	}
 	@media (prefers-reduced-motion: reduce) {
-		:is(.mkt, .atelic-ui) .collapsible-chevron {
+		.atelic-ui .disclosure-chevron,
+		.atelic-ui .is-native > .disclosure-head .disclosure-chevron {
 			transition: none;
 		}
 	}
-	/* Paper cannot be clicked, so a printed collapsible is open. */
+	/* Paper cannot be clicked, so a printed native disclosure is open. */
 	@media print {
-		:is(.mkt, .atelic-ui) .collapsible::details-content {
+		.atelic-ui .disclosure.is-native::details-content {
 			content-visibility: visible;
 			display: block;
 		}
-		:is(.mkt, .atelic-ui) .collapsible-chevron {
+		.atelic-ui .is-native > .disclosure-head > .disclosure-chevron {
 			display: none;
 		}
 	}
 
 	/* ---- Callout: an icon in its tone beside the title, the explainer
 	   under it; boxed, it sits apart on a tinted ground ---- */
-	:is(.mkt, .atelic-ui) .callout {
+	.atelic-ui .callout {
 		display: grid;
 		grid-template-columns: auto minmax(0, 1fr);
 		gap: 10px;
 		align-items: start;
 	}
-	:is(.mkt, .atelic-ui) .callout-icon {
+	.atelic-ui .callout-icon {
 		margin-top: 0.15em;
 		color: var(--tone);
 		flex: none;
 	}
-	:is(.mkt, .atelic-ui) .callout-title {
+	.atelic-ui .callout-title {
 		font-weight: 650;
 		color: var(--ink);
 		text-wrap: pretty;
 	}
-	:is(.mkt, .atelic-ui) .callout-body {
+	.atelic-ui .callout-body {
 		margin-top: 2px;
 		color: var(--ink-soft);
 		text-wrap: pretty;
 	}
-	:is(.mkt, .atelic-ui) .callout.is-box {
+	.atelic-ui .callout.is-box {
 		padding: 14px 16px;
 		border-radius: var(--radius-sm);
 		background: var(--tone-bg);
@@ -343,7 +353,7 @@
 	}
 
 	/* ---- Checklist: checks passed or failed, two columns when there is room ---- */
-	:is(.mkt, .atelic-ui) .checklist {
+	.atelic-ui .checklist {
 		list-style: none;
 		margin: 0;
 		padding: 0;
@@ -352,36 +362,36 @@
 		gap: 12px 28px;
 	}
 	@media print, (min-width: 721px) {
-		:is(.mkt, .atelic-ui) .checklist {
+		.atelic-ui .checklist {
 			grid-template-columns: repeat(2, minmax(0, 1fr));
 		}
 	}
-	:is(.mkt, .atelic-ui) .checklist li {
+	.atelic-ui .checklist li {
 		display: grid;
 		grid-template-columns: auto minmax(0, 1fr);
 		gap: 10px;
 		align-items: start;
 		line-height: 1.4;
 	}
-	:is(.mkt, .atelic-ui) .checklist li > svg {
+	.atelic-ui .checklist li > svg {
 		margin-top: 0.1em;
 		color: var(--tone);
 	}
-	:is(.mkt, .atelic-ui) .checklist-label {
+	.atelic-ui .checklist-label {
 		display: block;
 		font-weight: 600;
 		color: var(--ink);
 	}
-	:is(.mkt, .atelic-ui) .checklist li[data-tone="bad"] .checklist-label {
+	.atelic-ui .checklist li[data-tone="bad"] .checklist-label {
 		color: var(--tone);
 	}
-	:is(.mkt, .atelic-ui) .checklist-detail {
+	.atelic-ui .checklist-detail {
 		display: block;
 		color: var(--ink-soft);
 	}
 
 	/* ---- The charts' shared key: a swatch, a figure, a label ---- */
-	:is(.mkt, .atelic-ui) .chart-key {
+	.atelic-ui .chart-key {
 		list-style: none;
 		margin: 10px 0 0;
 		padding: 0;
@@ -391,17 +401,17 @@
 		font-size: 0.82rem;
 		color: var(--ink-soft);
 	}
-	:is(.mkt, .atelic-ui) .chart-key li {
+	.atelic-ui .chart-key li {
 		display: inline-flex;
 		align-items: baseline;
 		gap: 7px;
 	}
-	:is(.mkt, .atelic-ui) .chart-key b {
+	.atelic-ui .chart-key b {
 		font-weight: 650;
 		color: var(--ink);
 		font-variant-numeric: tabular-nums;
 	}
-	:is(.mkt, .atelic-ui) .chart-swatch {
+	.atelic-ui .chart-swatch {
 		width: 10px;
 		height: 10px;
 		border-radius: 3px;
@@ -411,35 +421,35 @@
 	}
 
 	/* ---- StackedBar: one bar, the parts of a whole ---- */
-	:is(.mkt, .atelic-ui) .stacked-bar-track {
+	.atelic-ui .stacked-bar-track {
 		display: flex;
 		gap: 2px;
 		height: 16px;
 		border-radius: 999px;
 		overflow: hidden;
 	}
-	:is(.mkt, .atelic-ui) .stacked-bar-track span {
+	.atelic-ui .stacked-bar-track span {
 		background: var(--tone-fill);
 		min-width: 4px;
 	}
 
 	/* ---- ColumnChart: a bar a period, the periods in labeled groups ---- */
-	:is(.mkt, .atelic-ui) .column-chart-plot {
+	.atelic-ui .column-chart-plot {
 		display: flex;
 		align-items: flex-end;
 		gap: 12px;
 		min-width: 0;
 	}
-	:is(.mkt, .atelic-ui) .column-chart-group {
+	.atelic-ui .column-chart-group {
 		flex: 1 1 0;
 		min-width: 0;
 	}
-	:is(.mkt, .atelic-ui) .column-chart-bars {
+	.atelic-ui .column-chart-bars {
 		display: flex;
 		align-items: flex-end;
 		gap: 3px;
 	}
-	:is(.mkt, .atelic-ui) .column-chart-col {
+	.atelic-ui .column-chart-col {
 		flex: 1 1 0;
 		min-width: 0;
 		display: flex;
@@ -447,24 +457,24 @@
 		align-items: center;
 		gap: 3px;
 	}
-	:is(.mkt, .atelic-ui) .column-chart-value {
+	.atelic-ui .column-chart-value {
 		font-size: 0.64rem;
 		font-variant-numeric: tabular-nums;
 		color: var(--ink-soft);
 		white-space: nowrap;
 	}
-	:is(.mkt, .atelic-ui) .column-chart-bar {
+	.atelic-ui .column-chart-bar {
 		width: 100%;
 		max-width: 48px;
 		border-radius: 4px 4px 0 0;
 		background: var(--tone-fill);
 	}
-	:is(.mkt, .atelic-ui) .column-chart-label {
+	.atelic-ui .column-chart-label {
 		font-size: 0.66rem;
 		color: var(--ink-soft);
 		white-space: nowrap;
 	}
-	:is(.mkt, .atelic-ui) .column-chart-group-label {
+	.atelic-ui .column-chart-group-label {
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: center;
@@ -478,7 +488,7 @@
 		color: var(--neutral-500);
 		white-space: nowrap;
 	}
-	:is(.mkt, .atelic-ui) .column-chart-group-label b {
+	.atelic-ui .column-chart-group-label b {
 		font-family: var(--font-sans);
 		font-size: 0.8rem;
 		letter-spacing: 0;
@@ -488,37 +498,37 @@
 	}
 
 	/* ---- ThresholdScale: zones, and a pin a reading ---- */
-	:is(.mkt, .atelic-ui) .threshold-scale {
+	.atelic-ui .threshold-scale {
 		display: flex;
 		flex-direction: column;
 		gap: 10px;
 	}
-	:is(.mkt, .atelic-ui) .threshold-scale-row {
+	.atelic-ui .threshold-scale-row {
 		display: grid;
 		grid-template-columns: 4.4em minmax(0, 1fr) 3.4em;
 		gap: 10px;
 		align-items: center;
 	}
-	:is(.mkt, .atelic-ui) .threshold-scale-label {
+	.atelic-ui .threshold-scale-label {
 		color: var(--ink-soft);
 	}
-	:is(.mkt, .atelic-ui) .threshold-scale-track {
+	.atelic-ui .threshold-scale-track {
 		position: relative;
 		display: flex;
 		gap: 2px;
 		height: 12px;
 	}
-	:is(.mkt, .atelic-ui) .threshold-scale-zone {
+	.atelic-ui .threshold-scale-zone {
 		background: var(--tone-fill);
 		opacity: 0.32;
 	}
-	:is(.mkt, .atelic-ui) .threshold-scale-zone:first-child {
+	.atelic-ui .threshold-scale-zone:first-child {
 		border-radius: 999px 0 0 999px;
 	}
-	:is(.mkt, .atelic-ui) .threshold-scale-zone:nth-last-child(2) {
+	.atelic-ui .threshold-scale-zone:nth-last-child(2) {
 		border-radius: 0 999px 999px 0;
 	}
-	:is(.mkt, .atelic-ui) .threshold-scale-pin {
+	.atelic-ui .threshold-scale-pin {
 		position: absolute;
 		top: 50%;
 		width: 18px;
@@ -529,27 +539,27 @@
 		border: 3px solid var(--ui-card, var(--card));
 		box-shadow: 0 0 0 1.5px var(--tone-fill);
 	}
-	:is(.mkt, .atelic-ui) .threshold-scale-value {
+	.atelic-ui .threshold-scale-value {
 		font-weight: 700;
 		font-variant-numeric: tabular-nums;
 		color: var(--tone);
 		text-align: right;
 	}
-	:is(.mkt, .atelic-ui) .threshold-scale-axis {
+	.atelic-ui .threshold-scale-axis {
 		position: relative;
 		display: flex;
 		gap: 2px;
 		height: 2.3em;
 		font-size: 0.8rem;
 	}
-	:is(.mkt, .atelic-ui) .threshold-scale-axis > span {
+	.atelic-ui .threshold-scale-axis > span {
 		color: var(--tone);
 		font-weight: 600;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
-	:is(.mkt, .atelic-ui) .threshold-scale-axis > i {
+	.atelic-ui .threshold-scale-axis > i {
 		position: absolute;
 		top: 1.25em;
 		transform: translateX(-50%);
@@ -563,12 +573,12 @@
 	/* ---- DataTable: on a phone each row stacks, its facts wearing their
 	   column's label, and a dropdown sorts; wide, it is a table whose
 	   headings sort ---- */
-	:is(.mkt, .atelic-ui) .data-table table,
-	:is(.mkt, .atelic-ui) .data-table tbody {
+	.atelic-ui .data-table table,
+	.atelic-ui .data-table tbody {
 		display: block;
 		width: 100%;
 	}
-	:is(.mkt, .atelic-ui) .data-table thead {
+	.atelic-ui .data-table thead {
 		position: absolute;
 		width: 1px;
 		height: 1px;
@@ -576,7 +586,7 @@
 		clip: rect(0, 0, 0, 0);
 		white-space: nowrap;
 	}
-	:is(.mkt, .atelic-ui) .data-table-sort {
+	.atelic-ui .data-table-sort {
 		display: flex;
 		align-items: center;
 		gap: 8px;
@@ -584,7 +594,7 @@
 		font-size: 0.85rem;
 		color: var(--ink-soft);
 	}
-	:is(.mkt, .atelic-ui) .data-table-sort select {
+	.atelic-ui .data-table-sort select {
 		font: inherit;
 		color: var(--ink);
 		background: var(--ui-card, var(--card));
@@ -593,7 +603,7 @@
 		padding: 5px 8px;
 		max-width: 100%;
 	}
-	:is(.mkt, .atelic-ui) .data-table tbody tr {
+	.atelic-ui .data-table tbody tr {
 		display: flex;
 		flex-wrap: wrap;
 		align-items: center;
@@ -602,25 +612,25 @@
 		border-bottom: 1px solid var(--neutral-100);
 		line-height: 1.35;
 	}
-	:is(.mkt, .atelic-ui) .data-table tbody tr:first-child {
+	.atelic-ui .data-table tbody tr:first-child {
 		border-top: 1.5px solid var(--ink);
 	}
-	:is(.mkt, .atelic-ui) .data-table tbody tr:last-child {
+	.atelic-ui .data-table tbody tr:last-child {
 		border-bottom: 0;
 		padding-bottom: 0;
 	}
-	:is(.mkt, .atelic-ui) .data-table tbody th {
+	.atelic-ui .data-table tbody th {
 		width: 100%;
 		text-align: left;
 		font-weight: 400;
 	}
-	:is(.mkt, .atelic-ui) .data-table td {
+	.atelic-ui .data-table td {
 		display: inline-flex;
 		align-items: center;
 		gap: 6px;
 		font-variant-numeric: tabular-nums;
 	}
-	:is(.mkt, .atelic-ui) .data-table td::before {
+	.atelic-ui .data-table td::before {
 		content: attr(data-label);
 		font-family: var(--font-mono);
 		font-size: 0.7rem;
@@ -629,33 +639,33 @@
 		color: var(--neutral-500);
 	}
 	@media print, (min-width: 721px) {
-		:is(.mkt, .atelic-ui) .data-table-sort {
+		.atelic-ui .data-table-sort {
 			display: none;
 		}
-		:is(.mkt, .atelic-ui) .data-table table {
+		.atelic-ui .data-table table {
 			display: table;
 			border-collapse: collapse;
 		}
-		:is(.mkt, .atelic-ui) .data-table tbody {
+		.atelic-ui .data-table tbody {
 			display: table-row-group;
 		}
-		:is(.mkt, .atelic-ui) .data-table thead {
+		.atelic-ui .data-table thead {
 			position: static;
 			width: auto;
 			height: auto;
 			overflow: visible;
 			clip: auto;
 		}
-		:is(.mkt, .atelic-ui) .data-table tbody tr {
+		.atelic-ui .data-table tbody tr {
 			display: table-row;
 			padding: 0;
 			border: 0;
 		}
-		:is(.mkt, .atelic-ui) .data-table tbody tr:first-child {
+		.atelic-ui .data-table tbody tr:first-child {
 			border-top: 0;
 		}
-		:is(.mkt, .atelic-ui) .data-table th,
-		:is(.mkt, .atelic-ui) .data-table td {
+		.atelic-ui .data-table th,
+		.atelic-ui .data-table td {
 			display: table-cell;
 			padding: 7px 14px 7px 0;
 			border-bottom: 1px solid var(--neutral-100);
@@ -663,23 +673,23 @@
 			vertical-align: middle;
 			font-weight: 400;
 		}
-		:is(.mkt, .atelic-ui) .data-table tbody th {
+		.atelic-ui .data-table tbody th {
 			width: auto;
 		}
-		:is(.mkt, .atelic-ui) .data-table td::before {
+		.atelic-ui .data-table td::before {
 			content: none;
 		}
-		:is(.mkt, .atelic-ui) .data-table th:last-child,
-		:is(.mkt, .atelic-ui) .data-table td:last-child {
+		.atelic-ui .data-table th:last-child,
+		.atelic-ui .data-table td:last-child {
 			padding-right: 0;
 		}
-		:is(.mkt, .atelic-ui) .data-table [data-align="center"] {
+		.atelic-ui .data-table [data-align="center"] {
 			text-align: center;
 		}
-		:is(.mkt, .atelic-ui) .data-table [data-align="right"] {
+		.atelic-ui .data-table [data-align="right"] {
 			text-align: right;
 		}
-		:is(.mkt, .atelic-ui) .data-table thead th {
+		.atelic-ui .data-table thead th {
 			padding-top: 0;
 			padding-bottom: 8px;
 			border-bottom: 1.5px solid var(--ink);
@@ -691,7 +701,7 @@
 			white-space: nowrap;
 			vertical-align: bottom;
 		}
-		:is(.mkt, .atelic-ui) .data-table thead th button {
+		.atelic-ui .data-table thead th button {
 			display: inline-flex;
 			align-items: center;
 			gap: 4px;
@@ -704,23 +714,23 @@
 			color: inherit;
 			cursor: pointer;
 		}
-		:is(.mkt, .atelic-ui) .data-table thead th button:hover,
-		:is(.mkt, .atelic-ui) .data-table thead th button[data-active] {
+		.atelic-ui .data-table thead th button:hover,
+		.atelic-ui .data-table thead th button[data-active] {
 			color: var(--ui-primary, var(--primary));
 		}
-		:is(.mkt, .atelic-ui) .data-table thead th button svg {
+		.atelic-ui .data-table thead th button svg {
 			opacity: 0.55;
 		}
-		:is(.mkt, .atelic-ui) .data-table thead th button[data-active] svg {
+		.atelic-ui .data-table thead th button[data-active] svg {
 			opacity: 1;
 		}
-		:is(.mkt, .atelic-ui) .data-table tbody tr:last-child th,
-		:is(.mkt, .atelic-ui) .data-table tbody tr:last-child td {
+		.atelic-ui .data-table tbody tr:last-child th,
+		.atelic-ui .data-table tbody tr:last-child td {
 			border-bottom: 0;
 		}
 	}
 	@media print {
-		:is(.mkt, .atelic-ui) .data-table thead th button svg {
+		.atelic-ui .data-table thead th button svg {
 			display: none;
 		}
 	}