@octane-xplat/ui 0.9.0 → 0.10.0

package/src/theme/tokens.css

@@ -1,52 +1,7 @@
-/* Design tokens — NS reads :root/.ns-root; web reads :root/.dark.
-   Numbers are dip (native) = px (web) by leaf convention. */
-
-@layer xplat.reset, xplat.base, xplat.tokens, xplat.components, xplat.recipes, xplat.utilities;
-
-@layer xplat.tokens {
-	:root,
-	.ns-root {
-		--color-primary: #171717;
-		/* Token names double as the future Tailwind theme keys: text-onprimary
-	   resolves --color-onprimary, bg-danger resolves --color-danger. Keep
-	   class-name segments and var-name segments identical. */
-		--color-onprimary: #fafafa;
-		--color-surface: #ffffff;
-		--color-surface-secondary: #fafafa;
-		--color-text: #0a0a0a;
-		--color-text-secondary: #666666;
-		--color-border: #eaeaea;
-		--color-border-strong: #d4d4d4;
-		--color-danger: #dc2626;
-		/* Family lists are deliberately generic. Apps override these with their
-	   web @font-face family and the platform's registered native name. */
-		--font-sans: system-ui, sans-serif;
-		--font-mono: ui-monospace, monospace;
-		--space-4: 16px;
-		/* Corner scale — rounded-rectangle radii. Smooth (squircle) corners are
-	   the default corner treatment: every class that consumes a token also
-	   declares `corner-shape: squircle`. Full-radius circles opt out —
-	   `corner-shape` would reshape them into squircle disks on iOS/Chromium. */
-		--radius-sm: 6px;
-		--radius-md: 8px;
-		--radius-lg: 12px;
-		--radius-xl: 16px;
-	}
-
-	.ns-dark,
-	.dark {
-		--color-primary: #ededed;
-		--color-onprimary: #171717;
-		--color-surface: #0a0a0a;
-		--color-surface-secondary: #141414;
-		--color-text: #ededed;
-		--color-text-secondary: #a1a1a1;
-		--color-border: #2e2e2e;
-		--color-border-strong: #4a4a4a;
-	}
-}
+/* Required shared structure and web normalization. Import in every app before user CSS. */
+@layer xplat-structure, xplat-chrome;
 
-@layer xplat.components {
+@layer xplat-structure {
 	/* xplat-web-only:start — DOM normalization. NativeScript is the reference
    box model: dip sizes are outer boxes, and a border paints from
    width+color alone. The DOM's UA stylesheet diverges on both counts, so
@@ -66,11 +21,15 @@
 	}
 	* {
 		border-width: 0;
-		border-style: solid;
 	}
 	img {
 		display: block;
 	}
+	/* Shared border declarations paint only after this DOM reset, matching the
+   NativeScript rule where width + color are sufficient. */
+	* {
+		border-style: solid;
+	}
 	.vx-app {
 		display: flex;
 		flex-direction: column;
@@ -128,12 +87,8 @@
 	/* Self-drawn drawer — shared geometry. Native grid children overlay the
    cell (panel pins left via horizontalAlignment in the leaf); DOM
    positioning extras are web-only below. */
-	.vx-drawer-backdrop {
-		background-color: rgba(0, 0, 0, 0.4);
-	}
 	.vx-drawer-panel {
 		width: 280px;
-		background-color: var(--color-surface);
 	}
 	/* xplat-web-only:start */
 	.vx-drawer {
@@ -158,7 +113,6 @@
 		bottom: 0;
 		left: 0;
 		overflow: auto;
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
 	}
 	/* xplat-web-only:end */
 
@@ -166,12 +120,20 @@
 		flex-direction: row;
 	}
 
-	.vx-grid,
 	.vx-stack {
+		display: flex;
+	}
+
+	.vx-grid,
+	.vx-layers {
 		display: grid;
 	}
 
-	.vx-stack > * {
+	/* Internal same-cell overlay — every child lands in grid cell 1,1
+   (left/top aligned). Used by leaf chrome (video transport, camera
+   overlay) that stacks layers directly on a gridlayout. The public `Stack`
+   component is a flow container; app-level overlap is `Absolute`. */
+	.vx-layers > * {
 		grid-area: 1 / 1;
 		horizontal-align: left;
 		vertical-align: top;
@@ -199,13 +161,7 @@
 	}
 
 	/* web press feedback */
-	.vx-pressable:active {
-		opacity: 0.85;
-	}
 	/* native press feedback (NS pseudo — dead rule on web, and vice versa) */
-	.vx-pressable:pressed {
-		opacity: 0.85;
-	}
 
 	/* xplat-web-only:start — overlays/toasts/popovers render through RootLayout
    or showModal on native; these portal/positioning rules are web-only */
@@ -216,7 +172,6 @@
 	.vx-overlay-shade {
 		position: absolute;
 		inset: 0;
-		background-color: rgba(0, 0, 0, 0.4);
 	}
 
 	.vx-overlay-content {
@@ -234,14 +189,6 @@
 
 	.vx-tooltip {
 		padding: 4px 8px;
-		border-width: 1px;
-		border-color: var(--color-border);
-		border-radius: var(--radius-sm);
-		corner-shape: squircle;
-		background-color: var(--color-surface);
-		color: var(--color-text);
-		font-size: 12px;
-		line-height: 16px;
 	}
 
 	.vx-toast-host {
@@ -279,10 +226,21 @@
 		margin: 0;
 		border-width: 0;
 		background-color: transparent;
-		color: var(--color-text);
-		font-size: 14px;
 		/* NS placeholder color; web uses the ::placeholder pseudo below. */
-		placeholder-color: var(--color-text-secondary);
+	}
+	.vx-input-shell {
+		flex-direction: row;
+		align-items: center;
+	}
+	.vx-input {
+		flex-grow: 1;
+		min-width: 0;
+	}
+	.vx-input-clear {
+		min-width: 24px;
+		min-height: 24px;
+		justify-content: center;
+		align-items: center;
 	}
 	/* xplat-web-only:start — DOM-only reset: element UA chrome and the
    focus outline (normalized to the same thin ring on both). */
@@ -290,12 +248,18 @@
 	.vx-textarea {
 		appearance: none;
 		-webkit-appearance: none;
-		outline: none;
 	}
-	.vx-input:focus,
-	.vx-textarea:focus {
-		outline: 1px solid var(--color-primary);
-		outline-offset: -1px;
+	.vx-input-shell {
+		display: flex;
+		align-items: center;
+		min-width: 0;
+	}
+	.vx-input {
+		min-width: 0;
+	}
+	.vx-input-clear {
+		display: flex;
+		flex: 0 0 auto;
 	}
 	/* xplat-web-only:end */
 
@@ -318,10 +282,7 @@
 
 	/* Video — surface-hosted leaf: the engine surface fills the frame and the
    self-drawn transport layers stack on top in the same grid cell
-   (vx-stack). NS-side rules only — DOM resets sit in the web block. */
-	.vx-video {
-		background-color: #000;
-	}
+   (vx-layers). NS-side rules only — DOM resets sit in the web block. */
 
 	.vx-video > * {
 		horizontal-align: stretch;
@@ -331,14 +292,11 @@
 	.vx-video-centerbtn {
 		width: 56px;
 		height: 56px;
-		border-radius: 28px;
-		background-color: rgba(0, 0, 0, 0.55);
 		align-items: center;
 		justify-content: center;
 	}
 
 	.vx-video-bar {
-		background-color: rgba(0, 0, 0, 0.45);
 		padding: 4px 8px;
 	}
 
@@ -352,8 +310,6 @@
 	}
 
 	.vx-video-time {
-		color: #fff;
-		font-size: 11px;
 		min-width: 34px;
 		text-align: center;
 	}
@@ -399,7 +355,6 @@
 		inset: 0;
 		border: 0;
 		padding: 0;
-		background: rgba(0, 0, 0, 0.4);
 		cursor: default;
 	}
 
@@ -408,18 +363,12 @@
 		flex: 1;
 		min-width: 0;
 		overflow: auto;
-		color: var(--color-text);
-		background-color: var(--color-surface);
 	}
 	/* xplat-web-only:end */
 
 	/* xplat-web-only:start — placeholder pseudos are DOM-only. Muted like
    real placeholder text, not currentColor (a full-opacity hint reads as
    a typed value); --placeholder-color is the per-field prop escape. */
-	input::placeholder,
-	textarea::placeholder {
-		color: var(--placeholder-color, var(--color-text-secondary));
-	}
 	/* xplat-web-only:end */
 
 	/* xplat-web-only:start — form controls don't inherit the body font in the
@@ -437,10 +386,6 @@
 	.vx-spinner {
 		width: 24px;
 		height: 24px;
-		border-width: 2px;
-		border-color: var(--color-text-secondary);
-		border-right-color: transparent;
-		border-radius: 50%;
 	}
 	/* Pull-to-refresh — the overlay strip hosting the spinner. Its height is
    the default `refreshThreshold` (64px web / 64dip native); the leaf
@@ -494,20 +439,15 @@
 		height: 28px;
 		padding-left: 3px;
 		padding-right: 3px;
-		border-radius: 14px;
-		background-color: var(--color-border);
 		justify-content: flex-start;
 		align-items: center;
 	}
 	.vx-switch--on {
-		background-color: var(--color-primary);
 		justify-content: flex-end;
 	}
 	.vx-switch-thumb {
 		width: 22px;
 		height: 22px;
-		border-radius: 50%;
-		background-color: var(--color-surface);
 	}
 	/* xplat-web-only:start — the DOM host is a div; flex + cursor live here */
 	.vx-switch {
@@ -523,21 +463,15 @@
 	}
 	.vx-slider-track {
 		height: 4px;
-		border-radius: 2px;
-		background-color: var(--color-border);
 		vertical-align: middle;
 	}
 	.vx-slider-fill {
 		height: 4px;
-		border-radius: 2px;
-		background-color: var(--color-primary);
 		vertical-align: middle;
 	}
 	.vx-slider-thumb {
 		width: 20px;
 		height: 20px;
-		border-radius: 50%;
-		background-color: var(--color-primary);
 		vertical-align: middle;
 	}
 	/* xplat-web-only:start — absolute positioning is DOM-only; native grid
@@ -614,30 +548,12 @@
 	.vx-checkbox {
 		width: 20px;
 		height: 20px;
-		border-width: 1px;
-		border-color: var(--color-border);
-		border-radius: var(--radius-sm);
 		align-items: center;
 		justify-content: center;
 	}
-	.vx-checkbox--on .vx-checkbox {
-		background-color: var(--color-primary);
-		border-color: var(--color-primary);
-	}
-	.vx-checkbox-check {
-		font-size: 14px;
-		line-height: 20px;
-		color: var(--color-onprimary);
-	}
-	.vx-checkbox--on .vx-checkbox-check {
-		color: var(--color-onprimary);
-	}
 	.vx-checkbox-label {
 		margin-left: 8px;
 	}
-	.vx-checkbox--disabled {
-		opacity: 0.5;
-	}
 
 	/* Radio group — column/row of dot options. */
 	.vx-radio-group {
@@ -653,27 +569,16 @@
 	.vx-radio {
 		width: 18px;
 		height: 18px;
-		border-width: 1px;
-		border-color: var(--color-border);
-		border-radius: 50%;
 		align-items: center;
 		justify-content: center;
 	}
-	.vx-radio--on .vx-radio {
-		border-color: var(--color-primary);
-	}
 	.vx-radio-dot {
 		width: 8px;
 		height: 8px;
-		border-radius: 50%;
-		background-color: var(--color-primary);
 	}
 	.vx-radio-label {
 		margin-left: 8px;
 	}
-	.vx-radio--disabled {
-		opacity: 0.5;
-	}
 
 	/* SegmentedControl — equal-width segments in a rounded track; `--on`
    raises the selected one. flex-basis is dead on NS (the shorthand parser
@@ -682,12 +587,6 @@
 	.vx-segmented {
 		flex-direction: row;
 		padding: 3px;
-		border-width: 1px;
-		border-color: var(--color-border);
-		border-radius: var(--radius-md);
-		corner-shape: squircle;
-		background-color: var(--color-surface-secondary);
-		color: var(--color-text);
 	}
 	.vx-segment {
 		flex-grow: 1;
@@ -699,22 +598,6 @@
 		padding-bottom: 6px;
 		padding-left: 10px;
 		padding-right: 10px;
-		border-radius: var(--radius-sm);
-	}
-	.vx-segment--on {
-		background-color: var(--color-surface);
-	}
-	.vx-segment-label {
-		font-size: 13px;
-		color: var(--color-text-secondary);
-	}
-	.vx-segment--on .vx-segment-label {
-		color: var(--color-text);
-		font-weight: 600;
-	}
-	.vx-segmented--disabled,
-	.vx-segment--disabled {
-		opacity: 0.5;
 	}
 	/* xplat-web-only:start — the DOM hosts are divs; flex + cursor live here */
 	.vx-segmented {
@@ -725,10 +608,6 @@
 		cursor: pointer;
 		user-select: none;
 	}
-	.vx-segment:focus {
-		outline: 1px solid var(--color-primary);
-		outline-offset: -1px;
-	}
 	.vx-segment--disabled {
 		cursor: default;
 	}
@@ -744,34 +623,17 @@
 		padding-bottom: 6px;
 		padding-left: 10px;
 		padding-right: 6px;
-		border-width: 1px;
-		border-color: var(--color-border);
-		border-radius: var(--radius-md);
-		corner-shape: squircle;
-		background-color: var(--color-surface);
-		color: var(--color-text);
-	}
-	.vx-search-icon {
-		color: var(--color-text-secondary);
 	}
 	.vx-search-field {
 		flex-grow: 1;
 		padding-left: 8px;
 		padding-right: 8px;
-		font-size: 14px;
-		color: var(--color-text);
 	}
 	.vx-search-clear {
 		width: 24px;
 		height: 24px;
-		border-radius: 9999px;
 		align-items: center;
 		justify-content: center;
-		background-color: var(--color-surface-secondary);
-		color: var(--color-text-secondary);
-	}
-	.vx-search--disabled {
-		opacity: 0.5;
 	}
 	/* xplat-web-only:start — the DOM host/field/buttons need display + the UA
    reset; native's flexbox children carry these from the class already. */
@@ -786,7 +648,6 @@
 		min-width: 0;
 		border: 0;
 		background: none;
-		outline: none;
 		appearance: none;
 		-webkit-appearance: none;
 	}
@@ -805,12 +666,6 @@
 	.vx-menu {
 		min-width: 140px;
 		padding: 4px;
-		border-width: 1px;
-		border-color: var(--color-border);
-		border-radius: var(--radius-md);
-		corner-shape: squircle;
-		background-color: var(--color-surface);
-		color: var(--color-text);
 	}
 	.vx-menu-list {
 		flex-direction: column;
@@ -819,28 +674,18 @@
 		flex-direction: row;
 		align-items: center;
 		padding: 6px 10px;
-		border-radius: var(--radius-sm);
-	}
-	.vx-menu-item--disabled {
-		opacity: 0.5;
 	}
 	/* xplat-web-only:start — hover affordance and cursor are DOM-only */
 	.vx-menu-item {
 		cursor: pointer;
 	}
-	.vx-menu-item:hover {
-		background-color: var(--color-border);
-	}
 	/* xplat-web-only:end */
 
 	/* Badge — inline chip row. */
 	.vx-badge {
 		flex-direction: row;
 		align-items: center;
-		border-radius: var(--radius-sm);
 		padding: 1px 6px;
-		font-size: 12px;
-		line-height: 16px;
 	}
 	/* xplat-web-only:start — span is inline by default; needs inline-flex */
 	.vx-badge {
@@ -848,29 +693,21 @@
 	}
 	/* xplat-web-only:end */
 
-	/* Separator — hairline rule; --h spans width, --v spans height. */
+	/* Divider — hairline rule; --h spans width, --v spans height. */
 	.vx-separator--h {
 		height: 1px;
-		background-color: var(--color-border);
 	}
 	.vx-separator--v {
 		width: 1px;
 		align-self: stretch;
-		background-color: var(--color-border);
 	}
 
 	/* Skeleton — placeholder block. */
-	.vx-skeleton {
-		background-color: var(--color-border);
-		border-radius: var(--radius-md);
-		corner-shape: squircle;
-	}
 
 	/* Avatar — centered fallback inside the circle. */
 	.vx-avatar {
 		align-items: center;
 		justify-content: center;
-		background-color: var(--color-border);
 	}
 	.vx-avatar-group {
 		flex-direction: row;
@@ -910,58 +747,51 @@
 		flex-direction: column;
 	}
 	.vx-field-label {
-		font-size: 13px;
-		line-height: 20px;
-		font-weight: 500;
 		margin-bottom: 4px;
 	}
-	.vx-field-required {
-		color: var(--color-danger);
+	.vx-field-description {
+		margin-top: 4px;
+		margin-bottom: 4px;
 	}
-	.vx-field-msg {
-		font-size: 12px;
-		line-height: 16px;
+	.vx-field-status {
 		margin-top: 4px;
-		color: var(--color-text-secondary);
 	}
-	.vx-field-msg--error {
-		color: var(--color-danger);
+	.vx-field-label-row {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: 4px;
+	}
+	.vx-field-status--detached {
+		margin-top: 8px;
+		padding-top: 8px;
+		border-top-width: 1px;
 	}
 	.vx-fieldgroup {
 		flex-direction: column;
 	}
 	.vx-fieldgroup-label {
-		font-size: 13px;
-		line-height: 20px;
-		font-weight: 600;
 		margin-bottom: 8px;
 	}
 
-	/* ListItem — a reusable shared row; callers own the surrounding list chrome. */
-	.vx-listitem {
+	/* Item — a reusable shared row (settings/navigation); callers own the
+   surrounding chrome. Content List's ListItem is a separate vocabulary. */
+	.vx-item {
 		flex-direction: row;
 		align-items: center;
 		width: 100%;
 		padding: 10px 12px;
 		gap: 12px;
 	}
-	.vx-listitem-leading,
-	.vx-listitem-trailing {
+	.vx-item-leading,
+	.vx-item-trailing {
 		flex-shrink: 0;
 		align-items: center;
 	}
-	.vx-listitem-content {
+	.vx-item-content {
 		flex-direction: column;
 		flex-grow: 1;
 	}
-	.vx-listitem-title {
-		font-weight: 500;
-	}
-	.vx-listitem-supporting {
-		font-size: 12px;
-		line-height: 16px;
-		color: var(--color-text-secondary);
-	}
 
 	/* InputNumber — steppers flanking a centered field. */
 	.vx-inputnumber {
@@ -970,9 +800,6 @@
 	}
 	.vx-inputnumber-step {
 		padding: 4px 10px;
-		border-width: 1px;
-		border-color: var(--color-border);
-		border-radius: var(--radius-sm);
 		align-items: center;
 		justify-content: center;
 	}
@@ -982,9 +809,6 @@
 		margin-right: 8px;
 		text-align: center;
 	}
-	.vx-inputnumber--disabled {
-		opacity: 0.5;
-	}
 
 	/* PinInput — row of single cells. */
 	.vx-pininput {
@@ -995,9 +819,6 @@
 		margin-right: 8px;
 		text-align: center;
 	}
-	.vx-pininput--disabled {
-		opacity: 0.5;
-	}
 
 	/* Select — trigger row + check column inside the anchored listbox. */
 	.vx-select-trigger {
@@ -1005,15 +826,6 @@
 		align-items: center;
 		justify-content: space-between;
 		padding: 6px 10px;
-		border-width: 1px;
-		border-color: var(--color-border);
-		border-radius: var(--radius-sm);
-	}
-	.vx-select--disabled {
-		opacity: 0.5;
-	}
-	.vx-select-placeholder {
-		color: var(--color-text-secondary);
 	}
 	.vx-select-caret {
 		margin-left: 8px;
@@ -1025,31 +837,36 @@
 		margin-bottom: 4px;
 	}
 
-	/* InputTags — wrapped chip row + trailing field. */
-	.vx-inputtags {
-		flex-direction: row;
-		flex-wrap: wrap;
+	/* Token and Typeahead selection anatomy. */
+	/* xplat-web-only:start — web leaves use div/span; native leaves select flexboxlayout/gridlayout tags. */
+	.vx-token,
+	.vx-typeahead,
+	.vx-tokenizer,
+	.vx-complex-selector-trigger {
+		display: flex;
 		align-items: center;
 	}
-	.vx-inputtags-tag {
+	.vx-tokenizer {
 		flex-direction: row;
-		align-items: center;
-		padding: 1px 6px;
-		margin-right: 4px;
-		margin-bottom: 4px;
-		border-radius: var(--radius-sm);
-		background-color: var(--color-border);
-	}
-	.vx-inputtags-remove {
-		margin-left: 4px;
+		flex-wrap: wrap;
 	}
-	.vx-inputtags-field {
+	.vx-tokenizer-content,
+	.vx-typeahead-content {
+		min-width: 0;
 		flex: 1;
-		min-width: 80px;
 	}
-	.vx-inputtags--disabled {
-		opacity: 0.5;
+	.vx-tokenizer-token {
+		display: flex;
+	}
+	.vx-tokenizer--truncated {
+		flex-wrap: nowrap;
+		overflow: hidden;
+	}
+	.vx-complex-selector {
+		display: flex;
+		flex-direction: row;
 	}
+	/* xplat-web-only:end */
 
 	/* InputRating — glyph row; --on lights the cell. */
 	.vx-rating {
@@ -1058,17 +875,6 @@
 	.vx-rating-cell {
 		padding: 2px;
 	}
-	.vx-rating-glyph {
-		font-size: 20px;
-		line-height: 24px;
-		color: var(--color-border);
-	}
-	.vx-rating-cell--on .vx-rating-glyph {
-		color: var(--color-primary);
-	}
-	.vx-rating--disabled {
-		opacity: 0.5;
-	}
 
 	/* CheckboxGroup — column/row of checkboxes. */
 	.vx-checkbox-group {
@@ -1080,16 +886,20 @@
 	/* xplat-web-only:start — display:flex for the div/span flex classes */
 	.vx-field,
 	.vx-fieldgroup,
-	.vx-listitem,
-	.vx-listitem-leading,
-	.vx-listitem-content,
-	.vx-listitem-trailing,
+	.vx-item,
+	.vx-item-leading,
+	.vx-item-content,
+	.vx-item-trailing,
 	.vx-inputnumber,
 	.vx-inputnumber-step,
 	.vx-select-trigger,
 	.vx-select-list,
-	.vx-inputtags,
-	.vx-inputtags-tag,
+	.vx-token,
+	.vx-typeahead,
+	.vx-tokenizer,
+	.vx-tokenizer-token,
+	.vx-complex-selector,
+	.vx-complex-selector-trigger,
 	.vx-rating,
 	.vx-rating-cell,
 	.vx-checkbox-group {
@@ -1098,170 +908,437 @@
 	.vx-rating-cell {
 		cursor: pointer;
 	}
+	.vx-field-label--hidden,
+	.vx-field-description--hidden {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
 	/* xplat-web-only:end */
 
-	/* Phase-3 navigation & wayfinding. */
+	/* Date & file entry layer — Calendar, DateInput, TimeInput, DateTimeInput,
+   DateRangeInput, FileInput. */
 
-	/* Breadcrumb — inline trail. */
-	.vx-breadcrumb {
-		flex-direction: row;
-		align-items: center;
-		flex-wrap: wrap;
+	/* FormField status variants. `detached` separates the message from the
+   control with extra spacing; `tooltip` hides the inline span (the
+   message rides a tooltip on the field glyph). */
+	.vx-field-status--detached {
+		margin-top: 8px;
 	}
-	.vx-breadcrumb-item {
+	.vx-field-label-row {
 		flex-direction: row;
 		align-items: center;
+		margin-bottom: 4px;
 	}
-	.vx-breadcrumb-sep {
-		margin-left: 6px;
-		margin-right: 6px;
-		color: var(--color-text-secondary);
+	.vx-field-label-row .vx-field-label {
+		margin-bottom: 0;
 	}
-	.vx-breadcrumb-link {
-		color: var(--color-primary);
+	.vx-field-label-info {
+		margin-left: 4px;
 	}
 
-	/* Pagination — windowed page buttons. */
-	.vx-pagination {
+	/* Calendar — header + weekday row + day grid, self-drawn everywhere. */
+	.vx-calendar {
+		flex-direction: column;
+	}
+	.vx-calendar-header {
 		flex-direction: row;
 		align-items: center;
 	}
-	.vx-page-btn {
-		min-width: 28px;
-		height: 28px;
-		padding: 0 6px;
-		margin-right: 4px;
-		border-width: 1px;
-		border-color: var(--color-border);
-		border-radius: var(--radius-sm);
-		align-items: center;
-		justify-content: center;
+	.vx-calendar-title {
+		flex-grow: 1;
+		text-align: center;
 	}
-	.vx-page-btn--on {
-		background-color: var(--color-primary);
-		border-color: var(--color-primary);
-		color: var(--color-onprimary);
+	.vx-calendar-months {
+		flex-direction: row;
 	}
-	.vx-page-ellipsis {
+	.vx-calendar--two-months .vx-calendar-months {
+		gap: 24px;
+	}
+	.vx-calendar-month {
+		flex-direction: column;
+	}
+	.vx-calendar-weeknames,
+	.vx-calendar-week {
+		flex-direction: row;
+	}
+	.vx-calendar-weekname,
+	.vx-calendar-weeknumber {
+		width: 36px;
+		height: 32px;
+		flex-shrink: 0;
+	}
+	.vx-calendar-day {
+		width: 36px;
+		height: 32px;
+		text-align: center;
+	}
+	.vx-calendar-weeknumber {
 		margin-right: 4px;
-		color: var(--color-text-secondary);
 	}
-	.vx-pagination--disabled {
-		opacity: 0.5;
+	.vx-calendar-live {
+		height: 0;
+		font-size: 0;
 	}
 
-	/* Stepper — dot + label cells joined by a hairline. */
-	.vx-stepper {
+	/* Date/Time inputs — icon toggle + input + affordances. */
+	.vx-dateinput,
+	.vx-timeinput,
+	.vx-datetimeinput,
+	.vx-daterangeinput {
 		flex-direction: row;
 		align-items: center;
 	}
-	.vx-stepper-cell {
+	.vx-dateinput-input,
+	.vx-timeinput-input,
+	.vx-datetimeinput-input {
+		flex-grow: 1;
+	}
+	.vx-datetimeinput-segment {
 		flex-direction: row;
 		align-items: center;
 	}
-	.vx-stepper-line {
-		width: 24px;
-		height: 1px;
-		background-color: var(--color-border);
+	.vx-datetimeinput-datesegment {
+		flex-grow: 1;
 	}
-	.vx-stepper-line--done {
-		background-color: var(--color-primary);
+	.vx-daterangeinput-trigger {
+		flex-grow: 1;
 	}
-	.vx-step {
+	.vx-daterangeinput-dialog {
+		flex-direction: row;
+	}
+	.vx-daterangeinput-presets {
+		flex-direction: column;
+	}
+	.vx-daterangeinput-preset {
 		flex-direction: row;
 		align-items: center;
+		padding: 6px 10px;
 	}
-	.vx-step-dot {
-		width: 24px;
-		height: 24px;
-		border-width: 1px;
-		border-color: var(--color-border);
-		border-radius: 50%;
-		text-align: center;
-		font-size: 12px;
-		line-height: 22px;
-		color: var(--color-text-secondary);
+
+	/* Time wheel — scrollable option columns in the bottom sheet. */
+	.vx-timewheel {
+		flex-direction: column;
 	}
-	.vx-step--on .vx-step-dot {
-		border-color: var(--color-primary);
-		color: var(--color-primary);
+	.vx-timewheel-columns {
+		flex-direction: row;
 	}
-	.vx-step--done .vx-step-dot {
-		background-color: var(--color-primary);
-		border-color: var(--color-primary);
-		color: var(--color-onprimary);
+	.vx-timewheel-column {
+		flex-grow: 1;
+		height: 180px;
 	}
-	.vx-step-label {
-		margin-left: 6px;
+	.vx-timewheel-option {
+		padding: 6px 0;
+		text-align: center;
 	}
-	.vx-step--disabled {
-		opacity: 0.5;
+	.vx-timewheel-actions {
+		flex-direction: row;
+		justify-content: flex-end;
+	}
+	.vx-timewheel-cancel,
+	.vx-timewheel-done {
+		padding: 8px 16px;
 	}
 
-	/* NavigationMenu — row/column of nav items. */
-	.vx-navmenu,
-	.vx-navmenu--row {
-		flex-direction: row;
-		align-items: center;
+	/* FileInput — trigger + list of picked refs. */
+	.vx-fileinput {
+		flex-direction: column;
 	}
-	.vx-navmenu--col {
+	.vx-fileinput-list {
 		flex-direction: column;
-		align-items: flex-start;
 	}
-	.vx-navmenu-item {
+	.vx-fileinput-item {
 		flex-direction: row;
 		align-items: center;
-		padding: 6px 10px;
-		border-radius: var(--radius-sm);
 	}
-	.vx-navmenu-item--on {
-		background-color: var(--color-border);
+	.vx-fileinput-itemname {
+		flex-grow: 1;
 	}
-	.vx-navmenu-item--disabled {
-		opacity: 0.5;
+	.vx-fileinput-trigger {
+		flex-direction: row;
+		align-items: center;
 	}
-	.vx-navmenu-label {
-		margin-left: 4px;
+	.vx-fileinput-dropzone-hint {
+		flex-direction: column;
+		align-items: center;
+		padding: 16px;
 	}
 
-	/* CommandPalette — panel centered by the overlay layer. */
-	.vx-commandpalette {
-		width: 360px;
-		padding: 8px;
-		border-width: 1px;
-		border-color: var(--color-border);
-		border-radius: var(--radius-md);
-		corner-shape: squircle;
-		background-color: var(--color-surface);
-		color: var(--color-text);
+	/* xplat-web-only:start — DOM mechanics: flex display, overlay painting,
+   hidden file input, sr-only live region. */
+	.vx-calendar,
+	.vx-calendar-header,
+	.vx-calendar-months,
+	.vx-calendar-month,
+	.vx-calendar-weeknames,
+	.vx-calendar-week,
+	.vx-dateinput,
+	.vx-timeinput,
+	.vx-datetimeinput,
+	.vx-datetimeinput-segment,
+	.vx-daterangeinput,
+	.vx-daterangeinput-dialog,
+	.vx-daterangeinput-presets,
+	.vx-timewheel,
+	.vx-timewheel-columns,
+	.vx-timewheel-actions,
+	.vx-fileinput,
+	.vx-fileinput-list,
+	.vx-fileinput-item,
+	.vx-fileinput-trigger,
+	.vx-fileinput-dropzone-hint,
+	.vx-field-label-row {
+		display: flex;
 	}
-	/* xplat-web-only:start — native uses Screen.mainScreen.widthDIPs */
-	.vx-commandpalette {
-		/* The overlay-content wrapper shrink-wraps the palette, so % would resolve
-	 * against the palette itself instead of the available viewport. */
-		max-width: 90vw;
+	.vx-calendar-cell {
+		width: 36px;
+		height: 32px;
+		flex-shrink: 0;
 	}
-	/* xplat-web-only:end */
-	.vx-cmdk-search {
-		margin-bottom: 4px;
+	.vx-calendar-day {
+		padding: 0;
+		border: 0;
+		background: none;
+		font: inherit;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
 	}
-	/* xplat-web-only:start — display, centering, and cursor are DOM-only */
-	.vx-breadcrumb,
-	.vx-breadcrumb-item,
-	.vx-pagination,
-	.vx-page-btn,
-	.vx-stepper,
-	.vx-stepper-cell,
-	.vx-step,
-	.vx-navmenu,
-	.vx-navmenu-item {
+	.vx-calendar-day--disabled {
+		cursor: default;
+	}
+	.vx-calendar-day--outside {
 		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
-	.vx-cmdk-layer .vx-overlay-content {
-		position: absolute;
-		top: 15%;
-		left: 50%;
-		transform: translateX(-50%);
+	.vx-calendar-day--empty {
+		visibility: hidden;
+	}
+	.vx-calendar-nav {
+		border: 0;
+		background: none;
+		padding: 4px;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+	}
+	.vx-dateinput-toggle,
+	.vx-timeinput-toggle,
+	.vx-datetimeinput-calendartoggle,
+	.vx-datetimeinput-timestoggle,
+	.vx-dateinput-clear,
+	.vx-timeinput-clear,
+	.vx-datetimeinput-clear,
+	.vx-daterangeinput-clear,
+	.vx-fileinput-clear,
+	.vx-fileinput-itemremove {
+		border: 0;
+		background: none;
+		padding: 2px 4px;
+		cursor: pointer;
+	}
+	.vx-dateinput,
+	.vx-timeinput,
+	.vx-datetimeinput,
+	.vx-daterangeinput {
+		position: relative;
+		gap: 4px;
+	}
+	.vx-dateinput-input,
+	.vx-timeinput-input,
+	.vx-datetimeinput-input,
+	.vx-daterangeinput-trigger {
+		border: 0;
+		background: none;
+		padding: 6px 4px;
+		font: inherit;
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		text-align: left;
+	}
+	.vx-dateinput-nativeslot,
+	.vx-timeinput-nativeslot,
+	.vx-datetimeinput-nativeslot {
+		position: relative;
+		display: flex;
+		flex-grow: 1;
+	}
+	.vx-dateinput-nativeinput,
+	.vx-timeinput-nativeinput,
+	.vx-datetimeinput-nativeinput {
+		position: relative;
+		z-index: 1;
+		width: 100%;
+	}
+	.vx-dateinput-overlay,
+	.vx-timeinput-overlay,
+	.vx-datetimeinput-overlay {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		pointer-events: none;
+		padding: 6px 4px;
+	}
+	.vx-datetimeinput-timelist {
+		display: flex;
+		flex-direction: column;
+		max-height: 220px;
+		overflow-y: auto;
+	}
+	.vx-datetimeinput-timeoption {
+		border: 0;
+		background: none;
+		padding: 6px 12px;
+		text-align: left;
+		cursor: pointer;
+	}
+	.vx-daterangeinput-trigger {
+		border: 0;
+		background: none;
+		padding: 6px 4px;
+		cursor: pointer;
+	}
+	.vx-fileinput-nativeinput {
+		display: none;
+	}
+	.vx-fileinput--dropzone {
+		padding: 16px;
+		align-items: center;
+	}
+	.vx-sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+	/* xplat-web-only:end */
+
+	/* Phase-3 navigation & wayfinding. */
+
+	/* Breadcrumb — inline trail. */
+	.vx-breadcrumb {
+		flex-direction: row;
+		align-items: center;
+		flex-wrap: wrap;
+	}
+	.vx-breadcrumb-item {
+		flex-direction: row;
+		align-items: center;
+	}
+	.vx-breadcrumb-sep {
+		margin-left: 6px;
+		margin-right: 6px;
+	}
+
+	/* Pagination — windowed page buttons. */
+	.vx-pagination {
+		flex-direction: row;
+		align-items: center;
+	}
+	.vx-page-btn {
+		min-width: 28px;
+		height: 28px;
+		padding: 0 6px;
+		margin-right: 4px;
+		align-items: center;
+		justify-content: center;
+	}
+	.vx-page-ellipsis {
+		margin-right: 4px;
+	}
+
+	/* Stepper — dot + label cells joined by a hairline. */
+	.vx-stepper {
+		flex-direction: row;
+		align-items: center;
+	}
+	.vx-stepper-cell {
+		flex-direction: row;
+		align-items: center;
+	}
+	.vx-stepper-line {
+		width: 24px;
+		height: 1px;
+	}
+	.vx-step {
+		flex-direction: row;
+		align-items: center;
+	}
+	.vx-step-dot {
+		width: 24px;
+		height: 24px;
+		text-align: center;
+	}
+	.vx-step-label {
+		margin-left: 6px;
+	}
+
+	/* NavigationMenu — row/column of nav items. */
+	.vx-navmenu,
+	.vx-navmenu--row {
+		flex-direction: row;
+		align-items: center;
+	}
+	.vx-navmenu--col {
+		flex-direction: column;
+		align-items: flex-start;
+	}
+	.vx-navmenu-item {
+		flex-direction: row;
+		align-items: center;
+		padding: 6px 10px;
+	}
+	.vx-navmenu-label {
+		margin-left: 4px;
+	}
+
+	/* CommandPalette — panel centered by the overlay layer. */
+	.vx-commandpalette {
+		width: 360px;
+		padding: 8px;
+	}
+	/* xplat-web-only:start — native uses Screen.mainScreen.widthDIPs */
+	.vx-commandpalette {
+		/* The overlay-content wrapper shrink-wraps the palette, so % would resolve
+	 * against the palette itself instead of the available viewport. */
+		max-width: 90vw;
+	}
+	/* xplat-web-only:end */
+	.vx-cmdk-search {
+		margin-bottom: 4px;
+	}
+	/* xplat-web-only:start — display, centering, and cursor are DOM-only */
+	.vx-breadcrumb,
+	.vx-breadcrumb-item,
+	.vx-pagination,
+	.vx-page-btn,
+	.vx-stepper,
+	.vx-stepper-cell,
+	.vx-step,
+	.vx-navmenu,
+	.vx-navmenu-item {
+		display: flex;
+	}
+	.vx-cmdk-layer .vx-overlay-content {
+		position: absolute;
+		top: 15%;
+		left: 50%;
+		transform: translateX(-50%);
 	}
 	.vx-page-btn,
 	.vx-breadcrumb-link,
@@ -1276,28 +1353,21 @@
 	/* Table — header + bounded rows (unvirtualized by design). */
 	.vx-table {
 		flex-direction: column;
-		border-width: 1px;
-		border-color: var(--color-border);
-		border-radius: var(--radius-md);
 	}
 	.vx-table-head,
 	.vx-table-row {
 		flex-direction: row;
 	}
-	.vx-table-th {
-		font-weight: 600;
-	}
 	.vx-table-cell {
 		padding: 8px 12px;
 	}
-	.vx-table-head {
-		border-bottom-width: 1px;
-		border-bottom-color: var(--color-border);
-	}
 	.vx-table-empty {
 		padding: 16px;
 		align-items: center;
 	}
+	.vx-table-row--selected {
+		background-color: var(--color-surface-secondary);
+	}
 
 	/* Timeline — dot + connector rail beside content. */
 	.vx-timeline {
@@ -1315,32 +1385,18 @@
 		width: 10px;
 		height: 10px;
 		margin-top: 5px;
-		border-radius: 50%;
-		background-color: var(--color-primary);
 		align-items: center;
 		justify-content: center;
 	}
 	.vx-timeline-line {
 		width: 1px;
 		flex: 1;
-		background-color: var(--color-border);
 	}
 	.vx-timeline-body {
 		flex-direction: column;
 		padding-left: 10px;
 		padding-bottom: 16px;
 	}
-	.vx-timeline-time {
-		font-size: 12px;
-		line-height: 16px;
-		color: var(--color-text-secondary);
-	}
-	.vx-timeline-title {
-		font-weight: 600;
-	}
-	.vx-timeline-desc {
-		color: var(--color-text-secondary);
-	}
 
 	/* Tree — indented collapsible rows. */
 	.vx-tree {
@@ -1354,9 +1410,6 @@
 		align-items: center;
 		padding: 4px 0;
 	}
-	.vx-tree-row--disabled {
-		opacity: 0.5;
-	}
 	.vx-tree-caret {
 		width: 14px;
 		margin-left: 4px;
@@ -1366,45 +1419,19 @@
 	.vx-alert {
 		flex-direction: row;
 		padding: 10px 12px;
-		border-width: 1px;
-		border-radius: var(--radius-md);
-		corner-shape: squircle;
-		border-color: var(--color-border);
 	}
 	.vx-alert-body {
 		flex-direction: column;
 		flex: 1;
 		margin-left: 8px;
 	}
-	.vx-alert-title {
-		font-weight: 600;
-	}
-	.vx-alert--error {
-		border-color: var(--color-danger);
-	}
-	.vx-alert--warning {
-		border-color: var(--color-warning, #d9a400);
-	}
-	.vx-alert--success {
-		border-color: var(--color-success, #2e9e5b);
-	}
-	.vx-alert--info {
-		border-color: var(--color-primary);
-	}
 
 	/* Card — sectioned container. */
 	.vx-card {
 		flex-direction: column;
-		border-width: 1px;
-		border-color: var(--color-border);
-		border-radius: var(--radius-md);
-		corner-shape: squircle;
-		background-color: var(--color-surface);
 	}
 	.vx-card-header {
 		padding: 12px;
-		border-bottom-width: 1px;
-		border-bottom-color: var(--color-border);
 	}
 	.vx-card-body {
 		padding: 12px;
@@ -1412,8 +1439,6 @@
 	}
 	.vx-card-footer {
 		padding: 12px;
-		border-top-width: 1px;
-		border-top-color: var(--color-border);
 	}
 
 	/* Chip — pressable pill with selected + remove states. */
@@ -1421,19 +1446,6 @@
 		flex-direction: row;
 		align-items: center;
 		padding: 3px 10px;
-		border-width: 1px;
-		border-color: var(--color-border);
-		border-radius: var(--radius-md);
-		corner-shape: squircle;
-		font-size: 13px;
-	}
-	.vx-chip--on {
-		background-color: var(--color-primary);
-		border-color: var(--color-primary);
-		color: var(--color-onprimary);
-	}
-	.vx-chip--disabled {
-		opacity: 0.5;
 	}
 	.vx-chip-remove {
 		margin-left: 6px;
@@ -1442,11 +1454,6 @@
 	/* Kbd — keycap glyph. */
 	.vx-kbd {
 		padding: 1px 5px;
-		border-width: 1px;
-		border-color: var(--color-border);
-		border-bottom-width: 2px;
-		border-radius: var(--radius-sm);
-		font-size: 12px;
 	}
 
 	/* Empty — centered placeholder. */
@@ -1456,11 +1463,9 @@
 		padding: 24px;
 	}
 	.vx-empty-title {
-		font-weight: 600;
 		margin-top: 8px;
 	}
 	.vx-empty-desc {
-		color: var(--color-text-secondary);
 		margin-top: 2px;
 	}
 
@@ -1469,10 +1474,6 @@
 		flex-direction: row;
 		align-items: center;
 		padding: 8px 12px;
-		border-width: 1px;
-		border-color: var(--color-border);
-		border-radius: var(--radius-md);
-		background-color: var(--color-surface);
 	}
 	.vx-banner-body {
 		flex-direction: column;
@@ -1492,14 +1493,6 @@
 		flex-direction: column;
 		margin-left: 10px;
 	}
-	.vx-user-name {
-		font-weight: 600;
-	}
-	.vx-user-desc {
-		font-size: 12px;
-		line-height: 16px;
-		color: var(--color-text-secondary);
-	}
 
 	/* ProgressGroup — stacked labeled meters. */
 	.vx-progressgroup {
@@ -1536,6 +1529,7 @@
 		display: flex;
 	}
 	.vx-table-row--pressable,
+	.vx-table-th--sortable,
 	.vx-tree-row,
 	.vx-user--pressable,
 	.vx-banner-dismiss,
@@ -1548,30 +1542,6 @@
 		margin: 0;
 	}
 	/* NativeScript reads the numeric prefix of font-size; keep this scale in px. */
-	.vx-h1 {
-		font-size: 32px;
-		font-weight: bold;
-	}
-	.vx-h2 {
-		font-size: 24px;
-		font-weight: bold;
-	}
-	.vx-h3 {
-		font-size: 18.72px;
-		font-weight: bold;
-	}
-	.vx-h4 {
-		font-size: 16px;
-		font-weight: bold;
-	}
-	.vx-h5 {
-		font-size: 13.28px;
-		font-weight: bold;
-	}
-	.vx-h6 {
-		font-size: 10.72px;
-		font-weight: bold;
-	}
 
 	/* utilities (hand-written subset — do NOT adopt Tailwind until
    NativeScript/tailwind#226 is resolved; the plugin strips core-supported
@@ -1637,73 +1607,24 @@
    min-height aligns utilities whose natural metrics fall below their leading.
    Tailwind pairs every text-* size with a leading, same here. */
 	.text-2xl {
-		font-size: 28px;
-		line-height: 36px;
 		min-height: 36px;
 	}
 	.text-xl {
-		font-size: 20px;
-		line-height: 28px;
 		min-height: 28px;
 	}
 	.text-lg {
-		font-size: 18px;
-		line-height: 28px;
 		min-height: 28px;
 	}
 	.text-sm {
-		font-size: 13px;
-		line-height: 20px;
 		min-height: 20px;
 	}
-	.font-bold {
-		font-weight: bold;
-	}
-	.font-semibold {
-		font-weight: 600;
-	}
-	.text-muted {
-		color: var(--color-text-secondary);
-	}
 
 	/* Corner utilities — consume the --radius-* scale and carry the smooth
    (squircle) corner treatment. Circles stay circular: .rounded-full omits
    corner-shape deliberately (squircle at full radius = a squircle disk,
    not a circle). Opt out per element with `corner-shape: round`. */
-	.rounded-sm {
-		border-radius: var(--radius-sm);
-		corner-shape: squircle;
-	}
-	.rounded-md {
-		border-radius: var(--radius-md);
-		corner-shape: squircle;
-	}
-	.rounded-lg {
-		border-radius: var(--radius-lg);
-		corner-shape: squircle;
-	}
-	.rounded-xl {
-		border-radius: var(--radius-xl);
-		corner-shape: squircle;
-	}
-	.rounded-full {
-		border-radius: 9999px;
-	}
-
-	.bg-primary {
-		background-color: var(--color-primary);
-	}
-	.text-onprimary {
-		color: var(--color-onprimary);
-	}
-	.bg-danger {
-		background-color: var(--color-danger);
-	}
 	/* xplat-web-only:start — box-shadow is inert on native (elevation is
    Android-only; no shared mapping yet) */
-	.shadow-2 {
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
-	}
 	/* xplat-web-only:end */
 
 	.btn {
@@ -1711,25 +1632,13 @@
 		padding-right: 16px;
 		padding-bottom: 10px;
 		padding-left: 16px;
-		border-radius: var(--radius-md);
-		corner-shape: squircle;
-		font-size: 14px;
-		font-weight: 500;
 		align-items: center;
 		justify-content: center;
-		text-decoration: none;
-		color: var(--color-text);
 	}
 
 	/* Secondary = the same control reading quiet: hairline border, surface
    fill, body-text label. Reserve .bg-primary for the one decisive action
    in a group. */
-	.btn-secondary {
-		background-color: var(--color-surface);
-		border-width: 1px;
-		border-color: var(--color-border);
-		color: var(--color-text);
-	}
 
 	/* xplat-web-only:start — controls that render as real <a>/<button> need
    inline layout and UA resets; the pressable/nav-link leaves are divs on
@@ -1745,11 +1654,6 @@
 
 	/* Tab shell — web divs/buttons + the Android SwapTabs fallback (iOS draws
    its own UITabBar and never sees these). */
-	.vx-tabbar {
-		border-bottom-width: 1px;
-		border-bottom-color: var(--color-border);
-		background-color: var(--color-surface);
-	}
 	.vx-tab {
 		align-items: center;
 		justify-content: center;
@@ -1757,11 +1661,6 @@
 		padding-right: 16px;
 		padding-bottom: 10px;
 		padding-left: 16px;
-		font-size: 14px;
-		color: var(--color-text-secondary);
-	}
-	.vx-tab.active {
-		color: var(--color-text);
 	}
 	.vx-tabicon {
 		margin-right: 6px;
@@ -1797,81 +1696,32 @@
 
 	.vx-app {
 		padding: 24px;
-		background-color: var(--color-surface);
-		color: var(--color-text);
-	}
-
-	.vx-app .text-xl,
-	.vx-app Text,
-	.vx-app label {
-		color: var(--color-text);
 	}
 
 	/* `.vx-app label` above (descendant + type) outranks single-class text
    colors inside the app root — roles that must win escalate here. */
-	.vx-app .text-onprimary {
-		color: var(--color-onprimary);
-	}
-	.vx-app .text-muted {
-		color: var(--color-text-secondary);
-	}
-	.vx-app .vx-tab label {
-		color: var(--color-text-secondary);
-	}
-	.vx-app .vx-tab.active label {
-		color: var(--color-text);
-	}
-	.vx-app .chip-on label {
-		color: var(--color-onprimary);
-	}
 	/* Danger surfaces keep white text in both themes (on-primary flips). */
-	.bg-danger .text-onprimary {
-		color: #ffffff;
-	}
 
 	.input {
 		padding-top: 10px;
 		padding-right: 12px;
 		padding-bottom: 10px;
 		padding-left: 12px;
-		border-width: 1px;
-		border-color: var(--color-border);
-		border-radius: var(--radius-md);
-		corner-shape: squircle;
-		font-size: 14px;
-		background-color: var(--color-surface);
-		color: var(--color-text);
 		/* NS TextField/TextView placeholder color (ignored on web — the
 	   ::placeholder pseudo above covers it there). */
-		placeholder-color: var(--color-text-secondary);
 	}
 
 	.chip {
-		background-color: var(--color-surface);
-		color: var(--color-text);
 		padding-top: 5px;
 		padding-right: 12px;
 		padding-bottom: 5px;
 		padding-left: 12px;
-		border-width: 1px;
-		border-color: var(--color-border);
-		border-radius: var(--radius-md);
-		corner-shape: squircle;
-		font-size: 13px;
-		text-decoration: none;
 	}
 
 	/* Selected chip — the one filled element in a group of bordered peers. */
-	.chip-on {
-		background-color: var(--color-primary);
-		border-color: var(--color-primary);
-		color: var(--color-onprimary);
-	}
 
 	.cell {
 		padding: 12px;
-		border-bottom-width: 1px;
-		border-bottom-color: var(--color-border);
 	}
 
 	.gap-2 {
@@ -1884,20 +1734,9 @@
 		z-index: 1100;
 	}
 
-	.vx-sheet-backdrop {
-		background: rgba(0, 0, 0, 0.4);
-	}
-
 	.vx-sheet {
 		max-height: 85%;
 		padding: 24px;
-		border-width: 1px;
-		border-color: var(--color-border);
-		border-top-left-radius: var(--radius-xl);
-		border-top-right-radius: var(--radius-xl);
-		corner-shape: squircle;
-		background-color: var(--color-surface);
-		color: var(--color-text);
 	}
 
 	/* xplat-web-only:start — DOM positioning + hit-testing for the sheet.
@@ -1932,9 +1771,6 @@
 	.vx-sheet-grip {
 		width: 36px;
 		height: 4px;
-		border-radius: 999px;
-		background-color: var(--color-text-secondary);
-		opacity: 0.4;
 	}
 
 	/* xplat-web-only:start — detents size the panel to the largest fraction
@@ -1953,4 +1789,2338 @@
 		touch-action: none;
 	}
 	/* xplat-web-only:end */
+
+	/* Shared Chat anatomy — structural defaults used with or without chrome.css. */
+	.vx-chatlayout,
+	.vx-chatlayout-scroll,
+	.vx-chatlayout-messages,
+	.vx-chatlist,
+	.vx-chatlist-inner,
+	.vx-chatmsg,
+	.vx-chatmsg-content,
+	.vx-chatcomposer,
+	.vx-chatcomposer-body,
+	.vx-chatcomposer-inputarea,
+	.vx-chatcomposer-footer,
+	.vx-chatcomposer-header,
+	.vx-chattools-list {
+		display: flex;
+		flex-direction: column;
+	}
+	.vx-chatlayout {
+		flex: 1;
+		min-height: 0;
+	}
+	.vx-chatlayout-scroll {
+		flex: 1;
+		min-height: 0;
+	}
+	.vx-chatlayout-messages {
+		flex: 1;
+		min-height: 0;
+	}
+	.vx-chatlayout-dock,
+	.vx-chatlayout-dockinner,
+	.vx-chatlist-inner {
+		width: 100%;
+	}
+	.vx-chatlist {
+		flex: 1;
+		min-height: 0;
+	}
+	.vx-chatlist-spacer {
+		flex: 1;
+	}
+	.vx-chatmsg {
+		width: 100%;
+		flex-direction: row;
+		align-items: flex-start;
+	}
+	.vx-chatmsg--user {
+		flex-direction: row-reverse;
+	}
+	.vx-chatmsg-content {
+		min-width: 0;
+		max-width: 100%;
+	}
+	.vx-chatbubble {
+		max-width: 100%;
+	}
+	.vx-chatmeta,
+	.vx-chatcomposer-header,
+	.vx-chatcomposer-footer,
+	.vx-chatcomposer-footerright,
+	.vx-chatcomposer-footerleft,
+	.vx-chatcomposer-headerright,
+	.vx-chatcomposer-headerleft,
+	.vx-chattools-header,
+	.vx-chattools-row,
+	.vx-chattools-stats,
+	.vx-chatcomposer-tokenwrap,
+	.vx-chatinput-tokens,
+	.vx-chatsys,
+	.vx-chatscroll-wrap,
+	.vx-chatdict-btn,
+	.vx-chatcomposer-status,
+	.vx-chatdict-bars,
+	.vx-chat-token {
+		display: flex;
+		align-items: center;
+	}
+	.vx-chatcomposer-header,
+	.vx-chatcomposer-footer {
+		flex-direction: row;
+		justify-content: space-between;
+	}
+	.vx-chatcomposer-inputarea {
+		min-width: 0;
+	}
+	.vx-chatinput-editable {
+		min-height: 24px;
+		width: 100%;
+	}
+	.vx-chattools-row,
+	.vx-chatcomposer-status,
+	.vx-chatsys,
+	.vx-chatdict-bars {
+		flex-direction: row;
+	}
+	.vx-chattools-row--toggle {
+		width: 100%;
+	}
+	.vx-chatsys {
+		justify-content: center;
+	}
+	.vx-chatsys-content {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+	}
+	.vx-chatdrawer-inner {
+		width: 100%;
+	}
+	.vx-chatscroll-wrap {
+		justify-content: center;
+	}
+	.vx-chatcomposer--disabled,
+	.vx-chatinput--disabled {
+		opacity: 0.55;
+	}
+
+	/* xplat-web-only:start — DOM positioning and clipping for browser overlays. */
+	.vx-chatlayout {
+		position: relative;
+		overflow: hidden;
+	}
+	.vx-chatpaste-preview {
+		overflow: hidden;
+	}
+	/* ---------- dialog / alert dialog ---------- */
+
+	/* The panel: column flex on both renderers; web uses a real <dialog> in
+   the top layer (margin:auto centers it), fullscreen drops the radius and
+   fills the viewport. */
+	.vx-dialog {
+		display: flex;
+		flex-direction: column;
+	}
+
+	/* xplat-web-only:start — the layer is the fixed portal wrapper; the
+   <dialog> element supplies backdrop, focus trap and centering. Anchored
+   dialogs switch to explicit position + zero UA margin. */
+	.vx-dialog-layer {
+		position: fixed;
+		inset: 0;
+		z-index: 1100;
+		pointer-events: none;
+	}
+
+	.vx-dialog-layer .vx-dialog {
+		pointer-events: auto;
+		overflow: auto;
+	}
+
+	dialog.vx-dialog {
+		margin: auto;
+		border-width: 0;
+		outline: none;
+	}
+
+	.vx-dialog--fullscreen {
+		width: 100%;
+		height: 100%;
+		max-width: none;
+		max-height: none;
+		border-radius: 0;
+	}
+	/* xplat-web-only:end */
+
+	.vx-dialog-header {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.vx-dialog-header-text {
+		flex: 1;
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.vx-dialog-header-end {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.vx-dialog-divider {
+		height: 1px;
+	}
+
+	.vx-alertdialog-title {
+		margin-bottom: 4px;
+	}
+
+	.vx-alertdialog-desc {
+		margin-bottom: 16px;
+	}
+
+	.vx-alertdialog-actions {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-end;
+		gap: 8px;
+	}
+
+	/* ---------- hover card ---------- */
+
+	/* xplat-web-only:start — the dashed-underline affordance applies only to
+   text-only triggers, which the web leaf renders as a <span>. */
+	.vx-hovercard-indication {
+		text-decoration: underline dashed;
+		text-underline-offset: 3px;
+	}
+	/* xplat-web-only:end */
+
+	.vx-hovercard-content {
+		display: flex;
+		flex-direction: column;
+	}
+
+	/* ---------- toast stack ---------- */
+
+	/* xplat-web-only:start — the viewport is a fixed, click-through top-layer
+   frame; corner buckets hold the per-position stacks. popover="manual"
+   resets: the UA forces inset/width/margin on popovers. */
+	.vx-toast-viewport {
+		position: fixed;
+		inset: 0;
+		z-index: 1200;
+		pointer-events: none;
+		width: auto;
+		margin: 0;
+		border-width: 0;
+		background: transparent;
+		overflow: visible;
+		padding-block: max(16px, env(safe-area-inset-top, 0px))
+			max(16px, env(safe-area-inset-bottom, 0px));
+		padding-inline: max(16px, env(safe-area-inset-left, 0px))
+			max(16px, env(safe-area-inset-right, 0px));
+	}
+
+	.vx-toast-stack {
+		position: absolute;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-end;
+		gap: 8px;
+		width: min(400px, 100%);
+	}
+
+	.vx-toast-stack--top {
+		top: max(16px, env(safe-area-inset-top, 0px));
+		flex-direction: column-reverse;
+	}
+
+	.vx-toast-stack--bottom {
+		bottom: max(16px, env(safe-area-inset-bottom, 0px));
+	}
+
+	.vx-toast-stack--start {
+		inset-inline-start: max(16px, env(safe-area-inset-left, 0px));
+		align-items: flex-start;
+	}
+
+	.vx-toast-stack--end {
+		inset-inline-end: max(16px, env(safe-area-inset-right, 0px));
+		align-items: flex-end;
+	}
+
+	.vx-toast-row {
+		pointer-events: auto;
+		width: 100%;
+		max-width: 400px;
+		display: grid;
+		grid-template-rows: 1fr;
+		transition-property: grid-template-rows, opacity, transform;
+		transition-duration: 200ms;
+	}
+
+	/* Entry: rows fold open from collapsed (supported engines only — others
+   mount open, which is correct anyway). */
+	@starting-style {
+		.vx-toast-row {
+			grid-template-rows: 0fr;
+			opacity: 0;
+		}
+	}
+
+	.vx-toast-row--exiting {
+		grid-template-rows: 0fr;
+		opacity: 0;
+	}
+
+	.vx-toast-row > * {
+		min-height: 0;
+		overflow: hidden;
+	}
+
+	/* The card re-enables pointer events and stays swipeable horizontally
+   (vertical drags belong to the dismiss gesture). */
+	.vx-toast {
+		pointer-events: auto;
+		touch-action: pan-x;
+		width: 100%;
+	}
+
+	.vx-toast-content {
+		flex: 1;
+		min-width: 0;
+		overflow-wrap: anywhere;
+	}
+
+	/* Persistent live-region pair — screen readers announce mutations to
+   these, unlike the born-with-content per-toast roles. */
+	.vx-toast-live {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+	}
+	/* xplat-web-only:end */
+
+	.vx-toast-inner {
+		display: flex;
+		flex-direction: row;
+		align-items: flex-start;
+		flex-wrap: nowrap;
+		gap: 12px;
+		width: 100%;
+	}
+
+	.vx-toast-end {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		flex-shrink: 0;
+		gap: 8px;
+	}
+
+	/* ---------- scrollable area ---------- */
+
+	/* xplat-web-only:start — the content box carries padding; overflow +
+   overscroll/keyboard semantics are set inline by useScrollableArea. */
+	.vx-scrollable-content {
+		display: flex;
+		flex-direction: column;
+		min-height: 100%;
+		min-width: 100%;
+	}
+	/* xplat-web-only:end */
+
+	/* ---------- carousel ---------- */
+
+	.vx-carousel {
+		width: 100%;
+	}
+
+	.vx-carousel-track {
+		display: flex;
+		flex-direction: row;
+	}
+
+	.vx-carousel-slide {
+		flex: 0 0 auto;
+		min-width: 0;
+	}
+
+	.vx-carousel-slide--prop {
+		flex: 1 0 100%;
+	}
+
+	/* xplat-web-only:start — overlay controls; native aligns them inside the
+   grid host instead. */
+	.vx-carousel {
+		position: relative;
+	}
+
+	.vx-carousel-viewport {
+		position: relative;
+	}
+
+	.vx-carousel-btn {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		z-index: 2;
+	}
+
+	.vx-carousel-prev {
+		left: 8px;
+	}
+
+	.vx-carousel-next {
+		right: 8px;
+	}
+	/* xplat-web-only:end */
+
+	/* ---------- lightbox ---------- */
+
+	/* xplat-web-only:start — full-viewport layer + centered stage; native
+   docks the same chrome on the RootLayout host. */
+	.vx-lightbox-layer {
+		position: fixed;
+		inset: 0;
+		z-index: 1150;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.vx-lightbox-stage {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		outline: none;
+	}
+
+	.vx-lightbox-media {
+		max-width: 100%;
+		max-height: 100%;
+		object-fit: contain;
+		user-select: none;
+		touch-action: none;
+	}
+
+	.vx-lightbox-nav {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		z-index: 2;
+	}
+
+	.vx-lightbox-prev {
+		left: 16px;
+	}
+
+	.vx-lightbox-next {
+		right: 16px;
+	}
+
+	.vx-lightbox-close {
+		position: absolute;
+		top: 16px;
+		right: 16px;
+		z-index: 2;
+	}
+
+	.vx-lightbox-counter {
+		position: absolute;
+		top: 16px;
+		left: 16px;
+		z-index: 2;
+	}
+
+	.vx-lightbox-caption {
+		position: absolute;
+		bottom: 24px;
+		left: 0;
+		right: 0;
+		text-align: center;
+		z-index: 2;
+	}
+	/* xplat-web-only:end */
+
+	/* ---- content display (Astryx parity) — structure only; chrome.css owns
+	   the skin. Web-only rules sit inside xplat-web-only blocks; the rest must
+	   stay in the NS-safe vocabulary. ---- */
+
+	.vx-blockquote {
+		flex-direction: column;
+	}
+
+	.vx-statusdot {
+		width: 8px;
+		height: 8px;
+		border-radius: 4px;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.vx-progressbar-track {
+		height: 8px;
+		border-radius: 4px;
+	}
+
+	.vx-progressbar-fill {
+		border-radius: 4px;
+	}
+
+	/* Full-height 2px tick centered on its track position. */
+	.vx-progressbar-mark {
+		width: 2px;
+		height: 8px;
+	}
+
+	.vx-metadatalist {
+		flex-direction: column;
+	}
+
+	.vx-metadatalist-label {
+		margin-bottom: 8px;
+	}
+
+	.vx-metadatalist-value {
+		margin-bottom: 8px;
+	}
+
+	.vx-metadatalist-item .vx-metadatalist-value {
+		margin-top: 4px;
+	}
+
+	.vx-thumbnail {
+		width: 40px;
+		height: 40px;
+		border-radius: 8px;
+	}
+
+	.vx-thumbnail-remove {
+		width: 16px;
+		height: 16px;
+		border-radius: 8px;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.vx-citation {
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.vx-outline {
+		flex-direction: column;
+	}
+
+	.vx-outline-item {
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.vx-codeblock {
+		flex-direction: column;
+	}
+
+	.vx-codeblock-header {
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.vx-codeblock-line {
+		flex-direction: row;
+	}
+
+	.vx-codeblock-gutter {
+		width: 32px;
+		text-align: right;
+		padding-right: 8px;
+	}
+
+	/* xplat-web-only:start — the DOM needs display/position rules where native
+	   layout classes already carry the equivalent behavior. */
+	.vx-blockquote {
+		margin: 0;
+		padding: 0;
+	}
+
+	.vx-blockquote-cite {
+		display: block;
+		font-style: normal;
+	}
+
+	.vx-visually-hidden {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0 0 0 0);
+		white-space: nowrap;
+		border: 0;
+	}
+
+	.vx-statusdot {
+		display: inline-flex;
+		position: relative;
+	}
+
+	.vx-statusdot-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.vx-progressbar {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+		min-width: 120px;
+	}
+
+	.vx-progressbar-head {
+		display: flex;
+		justify-content: space-between;
+		align-items: baseline;
+		gap: 8px;
+	}
+
+	.vx-progressbar-trackwrap {
+		position: relative;
+	}
+
+	.vx-progressbar-track {
+		position: relative;
+		overflow: hidden;
+	}
+
+	.vx-progressbar-fill {
+		height: 100%;
+		transition: width 160ms ease-out;
+	}
+
+	.vx-progressbar-fill--indeterminate {
+		width: 40%;
+		animation: vx-progressbar-slide 1.2s linear infinite;
+	}
+
+	.vx-progressbar-markwrap {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		display: flex;
+		align-items: center;
+	}
+
+	.vx-progressbar-mark {
+		display: block;
+		height: 100%;
+		transform: translateX(-50%);
+	}
+
+	.vx-progressbar-mark[data-placement='start'] {
+		transform: none;
+	}
+
+	.vx-progressbar-mark[data-placement='end'] {
+		transform: translateX(-100%);
+	}
+
+	@keyframes vx-progressbar-slide {
+		from {
+			transform: translateX(-100%);
+		}
+		to {
+			transform: translateX(250%);
+		}
+	}
+
+	@keyframes vx-statusdot-pulse {
+		0%,
+		100% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0.4;
+		}
+	}
+
+	.vx-statusdot--pulse {
+		animation: vx-statusdot-pulse 1.5s ease-in-out infinite;
+	}
+
+	/* Streaming Markdown — spans that arrived after the last boundary wrap
+	   newly surfaced text. The class is inert on native (no keyframe
+	   animation); web fades it in via the keyframes below. */
+	.vx-md-fade {
+	}
+
+	/* xplat-web-only:start — DOM fades each new span; the native leaf renders
+	   the class inert (no opacity animation driver for text spans). */
+	.vx-md-fade {
+		animation: vx-md-fade-in 0.2s ease-out;
+	}
+
+	@keyframes vx-md-fade-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.vx-md-fade {
+			animation: none;
+		}
+	}
+	/* xplat-web-only:end */
+
+	.vx-metadatalist-list {
+		margin: 0;
+		padding: 0;
+	}
+
+	.vx-metadatalist--single {
+		display: grid;
+		column-gap: 16px;
+		row-gap: 8px;
+		align-items: baseline;
+	}
+
+	.vx-metadatalist--multi,
+	.vx-metadatalist--stacked-multi {
+		display: grid;
+		gap: 16px;
+	}
+
+	.vx-metadatalist--stacked-single {
+		display: grid;
+		row-gap: 12px;
+	}
+	/* xplat-web-only:start — track templates have no native analog; the
+   native leaf sizes columns through the Grid columns attribute. */
+	.vx-metadatalist--single {
+		grid-template-columns: auto minmax(0, 1fr);
+	}
+	.vx-metadatalist--multi,
+	.vx-metadatalist--stacked-multi {
+		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+	}
+	.vx-metadatalist--stacked-single {
+		grid-template-columns: 1fr;
+	}
+	/* xplat-web-only:end */
+
+	.vx-metadatalist--horizontal {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		gap: 16px;
+	}
+
+	.vx-metadatalist-label {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		margin-bottom: 0;
+	}
+
+	.vx-metadatalist-item .vx-metadatalist-label {
+		margin-bottom: 4px;
+	}
+
+	.vx-metadatalist-item .vx-metadatalist-value,
+	.vx-metadatalist--single .vx-metadatalist-value {
+		margin-bottom: 0;
+	}
+
+	.vx-metadatalist-icon {
+		display: inline-flex;
+		align-items: center;
+	}
+
+	.vx-metadatalist-value {
+		margin: 0;
+		min-width: 0;
+	}
+
+	.vx-metadatalist-toggle {
+		align-self: flex-start;
+		background: transparent;
+		padding: 8px 0;
+		font: inherit;
+	}
+	/* xplat-web-only:start — DOM button reset + cursor */
+	.vx-metadatalist-toggle {
+		appearance: none;
+		border: 0;
+		cursor: pointer;
+	}
+	/* xplat-web-only:end */
+
+	.vx-thumbnail {
+		display: inline-flex;
+		flex: none;
+	}
+
+	.vx-thumbnail-image {
+		width: 100%;
+		height: 100%;
+		display: block;
+	}
+
+	.vx-thumbnail-placeholder {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.vx-thumbnail-overlay {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.vx-thumbnail-remove {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0;
+	}
+
+	.vx-thumbnail-remove:not(.vx-thumbnail-remove--always) {
+		opacity: 0;
+	}
+	/* xplat-web-only:start — DOM-only positioning, clipping, and hover
+   reveal; the native leaf overlays via its grid cell. */
+	.vx-thumbnail {
+		position: relative;
+		overflow: hidden;
+	}
+	.vx-thumbnail-image {
+		object-fit: cover;
+	}
+	.vx-thumbnail-placeholder,
+	.vx-thumbnail-overlay {
+		position: absolute;
+		inset: 0;
+	}
+	.vx-thumbnail-remove {
+		position: absolute;
+		top: 2px;
+		right: 2px;
+		border: 0;
+		cursor: pointer;
+	}
+	.vx-thumbnail-remove:not(.vx-thumbnail-remove--always) {
+		transition: opacity 120ms ease-out;
+	}
+	/* xplat-web-only:end */
+
+	.vx-thumbnail:hover .vx-thumbnail-remove,
+	.vx-thumbnail:focus-within .vx-thumbnail-remove {
+		opacity: 1;
+	}
+
+	.vx-citation {
+		display: inline-flex;
+		gap: 4px;
+		vertical-align: baseline;
+		text-decoration: none;
+	}
+
+	.vx-citation-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 16px;
+		height: 16px;
+		border-radius: 8px;
+		flex: none;
+	}
+
+	.vx-citation-icon-img {
+		width: 100%;
+		height: 100%;
+		display: block;
+	}
+	/* xplat-web-only:start — DOM-only clipping and image fitting */
+	.vx-citation-icon {
+		overflow: hidden;
+	}
+	.vx-citation-icon-img {
+		object-fit: cover;
+	}
+	/* xplat-web-only:end */
+
+	.vx-outline-track {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.vx-outline-indicator {
+		width: 2px;
+	}
+
+	.vx-outline-item {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		background: transparent;
+		padding: 8px 12px 8px 0;
+		font: inherit;
+		text-align: left;
+	}
+	/* xplat-web-only:start — DOM-only positioning, transitions, and the
+   button reset; the native leaf positions the indicator in its grid. */
+	.vx-outline,
+	.vx-outline-track {
+		position: relative;
+	}
+	.vx-outline-indicator {
+		position: absolute;
+		left: 0;
+		top: 0;
+		transition:
+			transform 140ms ease-out,
+			height 140ms ease-out;
+		pointer-events: none;
+	}
+	.vx-outline-item {
+		border: 0;
+		cursor: pointer;
+	}
+	/* xplat-web-only:end */
+
+	.vx-outline--compact .vx-outline-item {
+		padding-top: 4px;
+		padding-bottom: 4px;
+	}
+
+	.vx-codeblock {
+		max-width: 100%;
+	}
+	/* xplat-web-only:start — DOM-only clipping */
+	.vx-codeblock {
+		overflow: hidden;
+	}
+	/* xplat-web-only:end */
+
+	.vx-codeblock-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 8px;
+		padding: 6px 12px;
+	}
+
+	.vx-codeblock-header-text {
+		display: flex;
+		align-items: baseline;
+		gap: 8px;
+		min-width: 0;
+	}
+
+	.vx-codeblock-header-actions {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+	}
+
+	.vx-codeblock-copy,
+	.vx-codeblock-collapse {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		background: transparent;
+		padding: 4px;
+		border-radius: 4px;
+	}
+	/* xplat-web-only:start — DOM button reset + scroll clipping */
+	.vx-codeblock-copy,
+	.vx-codeblock-collapse {
+		appearance: none;
+		border: 0;
+		cursor: pointer;
+	}
+	.vx-codeblock-body {
+		overflow: auto;
+	}
+	/* xplat-web-only:end */
+
+	.vx-codeblock-pre {
+		margin: 0;
+		padding: 8px 12px;
+	}
+
+	.vx-codeblock-code {
+		display: block;
+	}
+
+	.vx-codeblock-row {
+		display: flex;
+		min-width: max-content;
+	}
+
+	.vx-codeblock-line {
+		display: block;
+		min-width: max-content;
+		white-space: pre;
+	}
+
+	.vx-codeblock-row .vx-codeblock-line {
+		flex: 1;
+	}
+
+	.vx-codeblock-gutter {
+		flex: none;
+		width: 2.5em;
+		padding-right: 1em;
+		text-align: right;
+		user-select: none;
+	}
+
+	.vx-codeblock--wrap .vx-codeblock-line {
+		white-space: pre-wrap;
+	}
+	/* xplat-web-only:start — DOM-only breaking inside wrapped code */
+	.vx-codeblock--wrap .vx-codeblock-line {
+		word-break: break-word;
+	}
+	/* xplat-web-only:end */
+
+	.vx-codeblock--wrap .vx-codeblock-row,
+	.vx-codeblock--wrap .vx-codeblock-line {
+		min-width: 0;
+	}
+
+	.vx-timestamp-card-grid {
+		display: grid;
+		row-gap: 4px;
+		column-gap: 12px;
+	}
+
+	.vx-timestamp-card-row {
+		display: contents;
+	}
+
+	.vx-timestamp-card-action {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+	}
+
+	.vx-timestamp-copy {
+		background: transparent;
+		padding: 2px;
+		display: inline-flex;
+	}
+	/* xplat-web-only:start — DOM button reset + cursor */
+	.vx-timestamp-copy {
+		appearance: none;
+		border: 0;
+		cursor: pointer;
+	}
+	/* xplat-web-only:end */
+
+	@media (prefers-reduced-motion: reduce) {
+		.vx-statusdot--pulse,
+		.vx-progressbar-fill--indeterminate {
+			animation: none;
+		}
+	}
+	/* xplat-web-only:end */
+	/* Native containers need these rules too; DOM-only clipping stays above.
+   Opacity preserves the accessibility subtree while suppressing paint. */
+	.vx-visually-hidden {
+		width: 1px;
+		height: 1px;
+		opacity: 0;
+	}
+
+	/* ----- Astryx navigation family (task 05) ----- */
+
+	/* NavIcon — circular accent container. */
+	.vx-navicon {
+		width: 32;
+		height: 32;
+		border-radius: 16;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+	}
+	/* xplat-web-only:start — flex display on the DOM span. */
+	.vx-navicon {
+		display: inline-flex;
+		width: 32px;
+		height: 32px;
+		border-radius: 9999px;
+	}
+	/* xplat-web-only:end */
+
+	/* Toolbar — outer chrome + slot row. */
+	.vx-toolbar-slot {
+		flex-direction: row;
+		align-items: center;
+		flex-shrink: 0;
+	}
+	.vx-toolbar-slot--fill {
+		flex-grow: 1;
+	}
+	/* xplat-web-only:start — display/grid placement and pointer affordances. */
+	.vx-toolbar-inner {
+		display: flex;
+		align-items: center;
+		padding: 4px 8px;
+	}
+	.vx-toolbar-inner--flex {
+		justify-content: space-between;
+	}
+	.vx-toolbar-inner--grid {
+		display: grid;
+		grid-template-columns: 1fr auto 1fr;
+		align-items: center;
+	}
+	.vx-toolbar-inner--vertical {
+		flex-direction: column;
+		align-items: stretch;
+	}
+	.vx-toolbar-slot {
+		display: flex;
+		align-items: center;
+	}
+	.vx-toolbar-slot--center {
+		justify-content: center;
+		min-width: 0;
+		overflow: hidden;
+	}
+	.vx-toolbar-slot--end {
+		justify-content: flex-end;
+	}
+	.vx-toolbar-slot--push {
+		margin-inline-start: auto;
+	}
+	/* xplat-web-only:end */
+
+	/* TabList — strip + tabs. Native uses the flex row; web layers scroll
+ * overflow + fades + arrow affordances. */
+	.vx-tablist {
+		flex-direction: row;
+		align-items: stretch;
+		flex-shrink: 0;
+	}
+	.vx-tabstrip {
+		flex-direction: row;
+		align-items: flex-end;
+		flex-shrink: 0;
+	}
+	.vx-tabstrip-scroll {
+		flex-direction: row;
+	}
+	.vx-tab {
+		flex-direction: column;
+		align-items: center;
+		justify-content: flex-end;
+		padding-left: 8;
+		padding-right: 8;
+		flex-shrink: 0;
+	}
+	.vx-tab-content {
+		flex-direction: column;
+		justify-content: flex-end;
+		align-items: center;
+		height: 100%;
+	}
+	.vx-tab-indicator {
+		height: 2;
+		width: 100%;
+		border-radius: 1;
+	}
+	.vx-tablist--fill .vx-tab {
+		flex-grow: 1;
+	}
+	/* xplat-web-only:start — DOM layout, scroll overflow, fades, arrows. */
+	.vx-tablist {
+		display: flex;
+		position: relative;
+	}
+	.vx-tabstrip {
+		display: flex;
+		flex-wrap: nowrap;
+		min-width: 0;
+	}
+	.vx-tabstrip--scroll {
+		overflow-x: auto;
+		overflow-y: hidden;
+		scrollbar-width: none;
+		-ms-overflow-style: none;
+	}
+	.vx-tabstrip--scroll::-webkit-scrollbar {
+		display: none;
+	}
+	.vx-tab {
+		display: inline-flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: flex-end;
+		position: relative;
+		border: 0;
+		background: none;
+		padding: 0 8px;
+		font: inherit;
+		color: inherit;
+		cursor: pointer;
+		text-decoration: none;
+		user-select: none;
+		white-space: nowrap;
+	}
+	.vx-tab-hover {
+		position: absolute;
+		inset: 0 0 2px 0;
+		border-radius: 6px;
+	}
+	.vx-tab:hover .vx-tab-hover {
+		background-color: var(--vx-tab-hover-bg, rgba(0, 0, 0, 0.04));
+	}
+	.ns-dark .vx-tab:hover .vx-tab-hover,
+	.dark .vx-tab:hover .vx-tab-hover {
+		background-color: var(--vx-tab-hover-bg, rgba(255, 255, 255, 0.08));
+	}
+	.vx-tab-icon {
+		display: inline-flex;
+		margin-right: 4px;
+	}
+	.vx-tab-labelwrap {
+		position: relative;
+		display: inline-flex;
+		flex-direction: column;
+		overflow: hidden;
+		padding-bottom: 7px;
+	}
+	.vx-tab-label {
+		white-space: nowrap;
+	}
+	.vx-tab-labelsizer {
+		/* Selected tabs bold; the invisible semibold duplicate keeps the stop's
+	   width stable so selection doesn't shift neighbours. */
+		display: block;
+		height: 0;
+		visibility: hidden;
+		font-weight: 600;
+		pointer-events: none;
+		white-space: nowrap;
+	}
+	.vx-tab--selected .vx-tab-label {
+		font-weight: 600;
+	}
+	.vx-tab-end {
+		display: inline-flex;
+		margin-left: 4px;
+	}
+	.vx-tab-indicator {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 2px;
+		border-radius: 1px;
+	}
+	.vx-tablist--fill .vx-tab {
+		flex: 1 1 0;
+		min-width: 0;
+	}
+	.vx-tabmenu-chevron {
+		display: inline-flex;
+		margin-left: 4px;
+		transition: transform 120ms ease;
+	}
+	.vx-tabmenu-chevron--open {
+		transform: rotate(180deg);
+	}
+	.vx-tabscroll {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 24px;
+		border: 0;
+		background-color: var(--color-surface, #fff);
+		cursor: pointer;
+		padding: 0;
+	}
+	.vx-tabscroll--start {
+		left: 0;
+	}
+	.vx-tabscroll--end {
+		right: 0;
+	}
+	.vx-tabstrip--fade-start {
+		-webkit-mask-image: linear-gradient(to right, transparent 0, black 20px);
+		mask-image: linear-gradient(to right, transparent 0, black 20px);
+	}
+	.vx-tabstrip--fade-end {
+		-webkit-mask-image: linear-gradient(to left, transparent 0, black 20px);
+		mask-image: linear-gradient(to left, transparent 0, black 20px);
+	}
+	.vx-tabstrip--fade-both {
+		-webkit-mask-image: linear-gradient(
+			to right,
+			transparent 0,
+			black 20px,
+			black calc(100% - 20px),
+			transparent 100%
+		);
+		mask-image: linear-gradient(
+			to right,
+			transparent 0,
+			black 20px,
+			black calc(100% - 20px),
+			transparent 100%
+		);
+	}
+	.vx-tabmenu {
+		display: flex;
+		flex-direction: column;
+		min-width: 150px;
+		max-height: 300px;
+		overflow-y: auto;
+	}
+	.vx-tabmenu-heading {
+		padding: 6px 10px;
+	}
+	.vx-tabmenu-item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 6px 10px;
+		cursor: pointer;
+	}
+	.vx-tabmenu-itemcontent {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+	}
+	.vx-tabmenu-item:hover {
+		background-color: rgba(0, 0, 0, 0.05);
+	}
+	.ns-dark .vx-tabmenu-item:hover,
+	.dark .vx-tabmenu-item:hover {
+		background-color: rgba(255, 255, 255, 0.08);
+	}
+	.vx-tabmenu-item:focus-visible {
+		outline: 1.5px solid var(--color-text);
+		outline-offset: -1.5px;
+	}
+	/* Full-bleed: pull the strip out to the host's content edges when the
+   host publishes --container-padding-inline-* vars (Layout seam). */
+	.vx-tablist--bleed {
+		margin-inline-start: calc(-1 * var(--container-padding-inline-start, 0px));
+		margin-inline-end: calc(-1 * var(--container-padding-inline-end, 0px));
+	}
+	/* xplat-web-only:end */
+
+	/* OverflowList — hidden measure copy + visible row. */
+	.vx-overflowlist {
+		flex-direction: row;
+		align-items: flex-start;
+		flex-shrink: 0;
+	}
+	/* xplat-web-only:start — DOM layout + the off-screen measurement row. */
+	.vx-overflowlist {
+		display: flex;
+		min-width: 0;
+		max-width: 100%;
+	}
+	.vx-overflowlist--multirow {
+		flex-wrap: wrap;
+		overflow: hidden;
+	}
+	.vx-overflowlist--fill-parent {
+		width: 100%;
+	}
+	.vx-overflowlist-measure {
+		display: flex;
+		position: absolute;
+		visibility: hidden;
+		pointer-events: none;
+		flex-wrap: nowrap;
+		height: 0;
+		overflow: hidden;
+		z-index: -1;
+	}
+	.vx-overflowlist-measure-indicator {
+		display: flex;
+		flex-shrink: 0;
+	}
+	/* xplat-web-only:end */
+
+	/* NavHeadingMenu — menu column + item rows. */
+	.vx-navmenu {
+		flex-direction: column;
+	}
+	.vx-navmenu-item {
+		flex-direction: row;
+		align-items: center;
+		flex-shrink: 0;
+	}
+	.vx-navmenu--sm .vx-navmenu-item,
+	.vx-navmenu-item--sm {
+		padding: 4 8;
+	}
+	.vx-navmenu--md .vx-navmenu-item,
+	.vx-navmenu-item--md {
+		padding: 8;
+	}
+	.vx-navmenu--lg .vx-navmenu-item,
+	.vx-navmenu-item--lg {
+		padding: 12;
+	}
+	.vx-navmenu-item--disabled {
+		opacity: 0.5;
+	}
+	/* xplat-web-only:start */
+	.vx-navmenu {
+		display: flex;
+		min-width: 200px;
+	}
+	.vx-navmenu--sm {
+		min-width: 168px;
+	}
+	.vx-navmenu--lg {
+		min-width: 240px;
+	}
+	.vx-navmenu-item {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		width: 100%;
+		border: 0;
+		background: none;
+		text-decoration: none;
+		color: inherit;
+		cursor: pointer;
+		text-align: start;
+		outline: none;
+		border-radius: 6px;
+		font: inherit;
+	}
+	@media (hover: hover) {
+		.vx-navmenu-item:hover:not([aria-disabled='true']) {
+			background-color: rgba(0, 0, 0, 0.05);
+		}
+		.ns-dark .vx-navmenu-item:hover:not([aria-disabled='true']),
+		.dark .vx-navmenu-item:hover:not([aria-disabled='true']) {
+			background-color: rgba(255, 255, 255, 0.08);
+		}
+	}
+	.vx-navmenu-item:focus-visible,
+	.vx-navmenu-item:focus {
+		background-color: rgba(0, 0, 0, 0.05);
+	}
+	.ns-dark .vx-navmenu-item:focus-visible,
+	.dark .vx-navmenu-item:focus-visible,
+	.ns-dark .vx-navmenu-item:focus,
+	.dark .vx-navmenu-item:focus {
+		background-color: rgba(255, 255, 255, 0.08);
+	}
+	.vx-navmenu-item--disabled {
+		cursor: default;
+	}
+	.vx-navmenu-item-icon {
+		display: inline-flex;
+		flex-shrink: 0;
+	}
+	.vx-navmenu-item-content {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-width: 0;
+	}
+	.vx-navmenu-item-desc {
+		font-size: 12px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	/* xplat-web-only:end */
+
+	/* MobileNav — overlay drawer. */
+	.vx-mobilenav-backdrop {
+		background-color: rgba(0, 0, 0, 0.4);
+	}
+	.vx-mobilenav-drawer {
+		flex-direction: column;
+	}
+	.vx-mobilenav-header {
+		flex-direction: row;
+		align-items: center;
+	}
+	.vx-mobilenav-content {
+		flex-direction: column;
+	}
+	.vx-mobilenav-toggle {
+		align-items: center;
+		justify-content: center;
+	}
+	/* xplat-web-only:start — <dialog> positioning, transition, scroll lock. */
+	.vx-mobilenav {
+		position: fixed;
+		inset: 0;
+		max-width: none;
+		max-height: none;
+		width: 100%;
+		height: 100%;
+		border: 0;
+		padding: 0;
+		margin: 0;
+		background: transparent;
+		overscroll-behavior: contain;
+		touch-action: none;
+		--_mobilenav-close-ms: 220;
+	}
+	.vx-mobilenav::backdrop {
+		background-color: rgba(0, 0, 0, 0);
+		transition: background-color 200ms ease;
+	}
+	.vx-mobilenav--open::backdrop {
+		background-color: rgba(0, 0, 0, 0.4);
+	}
+	.vx-mobilenav-drawer {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		display: flex;
+		flex-direction: column;
+		background-color: var(--color-surface, #fff);
+		overflow-y: auto;
+		overscroll-behavior: contain;
+		transition: transform 220ms ease;
+	}
+	.vx-mobilenav--start .vx-mobilenav-drawer {
+		left: 0;
+		border-right: 1px solid var(--color-border, #eaeaea);
+		transform: translateX(-100%);
+	}
+	.vx-mobilenav--end .vx-mobilenav-drawer {
+		right: 0;
+		border-left: 1px solid var(--color-border, #eaeaea);
+		transform: translateX(100%);
+	}
+	.vx-mobilenav--open .vx-mobilenav-drawer {
+		transform: translateX(0);
+	}
+	.vx-mobilenav-header {
+		display: flex;
+		align-items: center;
+		padding: 8px 12px;
+		border-bottom: 1px solid var(--color-border, #eaeaea);
+	}
+	.vx-mobilenav-content {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		padding: 8px;
+	}
+	.vx-mobilenav-toggle {
+		display: inline-flex;
+	}
+	/* xplat-web-only:end */
+
+	/* AppShell — shell grid + landmark areas. */
+	.vx-appshell {
+		flex-direction: column;
+	}
+	.vx-appshell-body {
+		flex-direction: column;
+	}
+	.vx-appshell-middle {
+		flex-direction: row;
+		flex-grow: 1;
+	}
+	.vx-appshell-sidenav {
+		flex-direction: column;
+		flex-shrink: 0;
+	}
+	.vx-appshell-content {
+		flex-direction: column;
+		flex-grow: 1;
+	}
+	.vx-appshell-header {
+		flex-direction: column;
+		flex-shrink: 0;
+	}
+	.vx-appshell-banner {
+		flex-direction: column;
+	}
+	.vx-appshell-mobilebar {
+		flex-direction: row;
+		align-items: center;
+	}
+	.vx-appshell-drawerhost {
+		/* grid overlay — drawer paints over the shell on native */
+	}
+	.vx-sidenav-section-title-group {
+		flex-direction: column;
+	}
+
+	/* TopNav — bar + slots. */
+	.vx-topnav {
+		flex-direction: row;
+		align-items: center;
+		flex-shrink: 0;
+	}
+	.vx-topnav-start {
+		flex-direction: row;
+		align-items: center;
+		flex-grow: 1;
+		flex-shrink: 1;
+	}
+	.vx-topnav-center {
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+	}
+	.vx-topnav-end {
+		flex-direction: row;
+		align-items: center;
+		justify-content: flex-end;
+	}
+	.vx-topnav--mobilebar {
+		flex-direction: row;
+		align-items: center;
+	}
+	.vx-topnav-mobilebar-end {
+		flex-direction: row;
+		align-items: center;
+		flex-grow: 1;
+		justify-content: flex-end;
+	}
+	.vx-topnav-heading {
+		flex-direction: row;
+		align-items: center;
+	}
+	.vx-topnav-heading-text {
+		flex-direction: column;
+	}
+	.vx-topnav-item {
+		flex-direction: row;
+		align-items: center;
+		flex-shrink: 0;
+	}
+	.vx-topnav-item--icon {
+		justify-content: center;
+	}
+	.vx-topnav-item--drawer {
+		align-items: stretch;
+	}
+	.vx-topnavmenu-item,
+	.vx-topnavmegamenu-item {
+		flex-direction: row;
+		align-items: center;
+	}
+	.vx-topnavmenu-item-title,
+	.vx-topnavmegamenu-item-title {
+		flex-grow: 1;
+	}
+	.vx-topnavmegamenu {
+		flex-direction: row;
+	}
+	.vx-topnavmegamenu-items {
+		flex-direction: column;
+	}
+	.vx-topnavmegamenu-featured {
+		flex-direction: column;
+	}
+	.vx-topnavmegamenu-card {
+		flex-direction: column;
+	}
+	.vx-topnavmegamenu-card-body {
+		flex-direction: column;
+	}
+
+	/* NavigationMenu — items strip. */
+	.vx-navmenu-strip {
+		flex-direction: row;
+		align-items: center;
+	}
+	.vx-navmenu-strip--vertical {
+		flex-direction: column;
+		align-items: stretch;
+	}
+	.vx-navmenu-strip-item {
+		flex-direction: row;
+		align-items: center;
+		flex-shrink: 0;
+	}
+
+	/* ResizeHandle — hit zone + pill. */
+	.vx-resize-handle--h {
+		flex-direction: row;
+		align-items: stretch;
+		width: 8;
+	}
+	.vx-resize-handle--v {
+		flex-direction: column;
+		align-items: stretch;
+		height: 8;
+	}
+	.vx-resize-handle-pill {
+		border-radius: 3;
+	}
+
+	/* xplat-web-only:start — DOM layout details for the nav family. */
+	.vx-appshell {
+		display: flex;
+		min-height: 0;
+	}
+	.vx-appshell--fill {
+		height: 100dvh;
+		overflow: hidden;
+	}
+	.vx-appshell-body {
+		display: flex;
+		min-height: 0;
+		flex: 1;
+	}
+	.vx-appshell-body--fill {
+		overflow: hidden;
+	}
+	.vx-appshell-middle {
+		display: flex;
+		flex: 1;
+		min-height: 0;
+		min-width: 0;
+	}
+	.vx-appshell-sidenav {
+		display: flex;
+		min-height: 0;
+	}
+	.vx-appshell--fill .vx-appshell-sidenav {
+		overflow-y: auto;
+	}
+	.vx-appshell-content {
+		display: flex;
+		min-width: 0;
+		min-height: 0;
+	}
+	.vx-appshell--fill .vx-appshell-content {
+		overflow-y: auto;
+	}
+	.vx-appshell-header {
+		display: flex;
+	}
+	.vx-appshell-header--sticky {
+		position: sticky;
+		top: 0;
+		z-index: 10;
+	}
+	.vx-appshell-banner {
+		display: flex;
+	}
+	.vx-appshell-mobilebar {
+		display: flex;
+		gap: 4px;
+		padding: 4px 8px;
+	}
+	.vx-appshell-skiplink {
+		position: absolute;
+		left: -10000px;
+		top: 8px;
+		padding: 6px 10px;
+		background-color: var(--color-surface, #fff);
+		border: 1px solid var(--color-border, #eaeaea);
+		border-radius: 6px;
+		z-index: 100;
+	}
+	.vx-appshell-skiplink:focus {
+		left: 8px;
+	}
+	.vx-appshell-content:focus {
+		outline: none;
+	}
+	.vx-topnav {
+		display: flex;
+		min-height: 44px;
+		padding: 4px 8px;
+		gap: 4px;
+	}
+	.vx-topnav--grid {
+		display: grid;
+		grid-template-columns: 1fr auto 1fr;
+		align-items: center;
+	}
+	.vx-topnav-start,
+	.vx-topnav-center,
+	.vx-topnav-end {
+		display: flex;
+		gap: 4px;
+		min-width: 0;
+	}
+	.vx-topnav-heading {
+		display: flex;
+		gap: 8px;
+		padding: 0 4px;
+	}
+	.vx-topnav-heading-trigger {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		border: 0;
+		background: none;
+		font: inherit;
+		padding: 0;
+		cursor: pointer;
+	}
+	.vx-topnav-heading-menubtn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 24px;
+		height: 24px;
+		border: 0;
+		border-radius: 6px;
+		background: none;
+		cursor: pointer;
+		padding: 0;
+	}
+	.vx-topnav-heading-text {
+		display: flex;
+	}
+	.vx-topnav-heading-title,
+	.vx-topnav-heading-super,
+	.vx-topnav-heading-sub {
+		text-decoration: none;
+		color: inherit;
+	}
+	.vx-topnav-item {
+		display: inline-flex;
+		gap: 6px;
+		border: 0;
+		background: none;
+		font: inherit;
+		text-decoration: none;
+		color: inherit;
+		cursor: pointer;
+		padding: 0 8px;
+		min-height: 32px;
+		border-radius: 6px;
+		text-align: start;
+	}
+	.vx-topnav-item--sm {
+		min-height: 28px;
+	}
+	.vx-topnav-item--lg {
+		min-height: 36px;
+	}
+	.vx-topnav-item--icon {
+		width: 32px;
+		padding: 0;
+		justify-content: center;
+	}
+	.vx-topnav-item--drawer {
+		width: 100%;
+		border-radius: 0;
+		padding: 0 12px;
+		min-height: 40px;
+	}
+	.vx-topnav-item--disabled {
+		opacity: 0.5;
+		cursor: default;
+	}
+	.vx-topnav-item:hover:not([aria-disabled='true']),
+	a.vx-topnav-item:hover:not([aria-disabled='true']) {
+		background-color: rgba(0, 0, 0, 0.05);
+	}
+	.ns-dark .vx-topnav-item:hover:not([aria-disabled='true']),
+	.dark .vx-topnav-item:hover:not([aria-disabled='true']),
+	.ns-dark a.vx-topnav-item:hover:not([aria-disabled='true']),
+	.dark a.vx-topnav-item:hover:not([aria-disabled='true']) {
+		background-color: rgba(255, 255, 255, 0.08);
+	}
+	.vx-topnav-item-icon {
+		display: inline-flex;
+	}
+	.vx-topnavmenu {
+		display: flex;
+		flex-direction: column;
+		min-width: 220px;
+	}
+	.vx-topnavmenu-item {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		padding: 8px 10px;
+		text-decoration: none;
+		color: inherit;
+		cursor: pointer;
+		border-radius: 6px;
+	}
+	.vx-topnavmenu-item:hover {
+		background-color: rgba(0, 0, 0, 0.05);
+	}
+	.ns-dark .vx-topnavmenu-item:hover,
+	.dark .vx-topnavmenu-item:hover {
+		background-color: rgba(255, 255, 255, 0.08);
+	}
+	.vx-topnavmenu-item-text {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-width: 0;
+	}
+	.vx-topnavmegamenu {
+		display: flex;
+		gap: 16px;
+		max-width: min(720px, 90vw);
+	}
+	.vx-topnavmegamenu-items {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+		gap: 4px;
+		min-width: 0;
+		flex: 1;
+	}
+	.vx-topnavmegamenu-featured {
+		display: flex;
+		min-width: 200px;
+	}
+	.vx-topnavmegamenu-item {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		padding: 8px;
+		border: 0;
+		background: none;
+		font: inherit;
+		text-decoration: none;
+		color: inherit;
+		cursor: pointer;
+		border-radius: 6px;
+		text-align: start;
+	}
+	.vx-topnavmegamenu-item:hover {
+		background-color: rgba(0, 0, 0, 0.05);
+	}
+	.ns-dark .vx-topnavmegamenu-item:hover,
+	.dark .vx-topnavmegamenu-item:hover {
+		background-color: rgba(255, 255, 255, 0.08);
+	}
+	.vx-topnavmegamenu-item-text {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-width: 0;
+	}
+	.vx-topnavmegamenu-card {
+		display: flex;
+		border-radius: 8px;
+		overflow: hidden;
+	}
+	.vx-topnavmegamenu-card-image {
+		display: block;
+		width: 100%;
+		aspect-ratio: 16/9;
+		object-fit: cover;
+	}
+	.vx-topnavmegamenu-card-body {
+		display: flex;
+		padding: 10px;
+		gap: 4px;
+	}
+	.vx-topnavmegamenu-card-link {
+		font-size: 13px;
+	}
+	.vx-navmenu-strip {
+		display: flex;
+		gap: 4px;
+	}
+	.vx-navmenu-strip-item {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		padding: 4px 10px;
+		border: 0;
+		border-radius: 6px;
+		background: none;
+		font: inherit;
+		text-decoration: none;
+		color: inherit;
+		cursor: pointer;
+	}
+	.vx-navmenu-strip-item:hover:not([disabled]) {
+		background-color: rgba(0, 0, 0, 0.05);
+	}
+	.ns-dark .vx-navmenu-strip-item:hover:not([disabled]),
+	.dark .vx-navmenu-strip-item:hover:not([disabled]) {
+		background-color: rgba(255, 255, 255, 0.08);
+	}
+	/* ResizeHandle — hit zone sits on the boundary; a 2px pill indicates the
+   grip (auto placement: panel side when expanded, center when collapsed). */
+	.vx-resize-handle {
+		position: relative;
+		border: 0;
+		background: none;
+		padding: 0;
+		cursor: col-resize;
+	}
+	.vx-resize-handle--h {
+		cursor: col-resize;
+		width: 8px;
+	}
+	.vx-resize-handle--v {
+		cursor: row-resize;
+		height: 8px;
+	}
+	.vx-resize-handle--overlay {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		right: -4px;
+		width: 8px;
+	}
+	.vx-resize-handle--v.vx-resize-handle--overlay {
+		top: auto;
+		left: 0;
+		right: 0;
+		bottom: -4px;
+		height: 8px;
+		width: auto;
+	}
+	.vx-resize-handle--divider.vx-resize-handle--h {
+		border-right: 1px solid var(--color-border, #eaeaea);
+	}
+	.vx-resize-handle--divider.vx-resize-handle--v {
+		border-bottom: 1px solid var(--color-border, #eaeaea);
+	}
+	.vx-resize-handle-pill {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		width: 4px;
+		height: 32px;
+		border-radius: 2px;
+		background-color: var(--color-border-strong, #d4d4d4);
+		opacity: 0;
+		transition: opacity 120ms ease;
+	}
+	.vx-resize-handle--v .vx-resize-handle-pill {
+		top: auto;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 32px;
+		height: 4px;
+	}
+	.vx-resize-handle--pill-start .vx-resize-handle-pill {
+		left: 0;
+	}
+	.vx-resize-handle--pill-end .vx-resize-handle-pill {
+		right: 0;
+	}
+	.vx-resize-handle--pill-center .vx-resize-handle-pill {
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+	.vx-resize-handle:hover .vx-resize-handle-pill,
+	.vx-resize-handle:focus-visible .vx-resize-handle-pill,
+	.vx-resize-handle--always .vx-resize-handle-pill {
+		opacity: 1;
+	}
+	.vx-resize-handle:focus-visible {
+		outline: 1.5px solid var(--color-text, #0a0a0a);
+		outline-offset: -1.5px;
+	}
+	.vx-resize-handle--disabled {
+		cursor: default;
+	}
+	/* xplat-web-only:end */
+
+	/* harness experiment styles */
+
+	.vx-app {
+		padding: 24px;
+	}
+
+	/* `.vx-app label` above (descendant + type) outranks single-class text
+   colors inside the app root — roles that must win escalate here. */
+	/* Danger surfaces keep white text in both themes (on-primary flips). */
+
+	.input {
+		padding-top: 10px;
+		padding-right: 12px;
+		padding-bottom: 10px;
+		padding-left: 12px;
+		/* NS TextField/TextView placeholder color (ignored on web — the
+	   ::placeholder pseudo above covers it there). */
+	}
+
+	.chip {
+		padding-top: 5px;
+		padding-right: 12px;
+		padding-bottom: 5px;
+		padding-left: 12px;
+	}
+
+	/* Selected chip — the one filled element in a group of bordered peers. */
+
+	.cell {
+		padding: 12px;
+	}
+
+	.gap-2 {
+		gap: 8px;
+	}
+
+	/* In-window sheet — bottom-anchored panel (matches the native RootLayout
+   sheet). Layer is pointer-events:none; backdrop + panel re-enable. */
+	.vx-sheet-layer {
+		z-index: 1100;
+	}
+
+	.vx-sheet {
+		max-height: 85%;
+		padding: 24px;
+	}
+
+	/* xplat-web-only:start — DOM positioning + hit-testing for the sheet.
+   The native leaf renders on RootLayout with its own geometry. */
+	.vx-sheet-layer {
+		position: fixed;
+		inset: 0;
+		pointer-events: none;
+	}
+
+	.vx-sheet-backdrop,
+	.vx-sheet {
+		position: absolute;
+		inset: 0;
+		pointer-events: auto;
+	}
+
+	.vx-sheet {
+		top: auto;
+		bottom: 0;
+		overflow: auto;
+	}
+	/* xplat-web-only:end */
+
+	.vx-sheet-grabber {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 28px;
+	}
+
+	.vx-sheet-grip {
+		width: 36px;
+		height: 4px;
+	}
+
+	/* xplat-web-only:start — detents size the panel to the largest fraction
+   (overriding the 85% cap) and overlay the grabber; native stacks it as a
+   top-aligned grid child. touch-action keeps drags off native scroll. */
+	.vx-sheet-detents {
+		max-height: none;
+	}
+	.vx-sheet-detents > .vx-sheet-grabber {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 2;
+		cursor: grab;
+		touch-action: none;
+	}
+	/* xplat-web-only:end */
+}
+
+@layer xplat-structure {
+	/* Astryx action controls and structured PowerSearch geometry. */
+	.vx-button-group,
+	.vx-toggle-button-group {
+		flex-direction: row;
+		align-items: stretch;
+	}
+	.vx-button-group--vertical {
+		flex-direction: column;
+	}
+	.vx-clickable-card,
+	.vx-selectable-card {
+		justify-content: center;
+	}
+	.vx-power-search,
+	.vx-power-search-editor {
+		flex-direction: column;
+	}
+	.vx-power-search-row,
+	.vx-power-search-token-row,
+	.vx-power-search-editor-actions {
+		flex-direction: row;
+		align-items: center;
+	}
+	.vx-power-search-row {
+		flex-wrap: wrap;
+	}
+	.vx-power-search-input {
+		flex-grow: 1;
+	}
+	.vx-power-search-result-list {
+		flex-direction: column;
+	}
+	.vx-power-search-results,
+	.vx-power-search-edit {
+		flex-direction: column;
+	}
+	.vx-power-search-result {
+		padding: 6px 10px;
+	}
+	.vx-power-search-empty,
+	.vx-power-search-count,
+	.vx-power-search-status {
+		flex-direction: row;
+	}
+	.vx-more-menu-sheet-list {
+		flex-direction: column;
+	}
+}
+
+/* Select family: bounded finite lists and search feedback. */
+.vx-select-search-row,
+.vx-select-all {
+	flex-direction: row;
+	align-items: center;
+}
+.vx-select-search-row {
+	padding: 4px;
+}
+.vx-select-search {
+	flex-grow: 1;
+}
+.vx-select-group,
+.vx-select-empty,
+.vx-select-feedback {
+	padding: 6px 10px;
+}
+.vx-select-description {
+	font-size: 12px;
+}
+/* xplat-web-only:start */
+.vx-select-list {
+	overflow-y: auto;
+}
+.vx-select-search-row,
+.vx-select-all {
+	display: flex;
+}
+.vx-select-description {
+	display: block;
+}
+/* xplat-web-only:end */
+/* DataGrid controls share their layout across platform leaves. */
+.vx-datagrid-controls,
+.vx-datagrid-handles {
+	flex-direction: row;
+	align-items: center;
+	flex-wrap: wrap;
+}
+.vx-datagrid-action,
+.vx-datagrid-handle {
+	padding: 6px 8px;
+}
+.vx-datagrid-settings {
+	padding: 8px;
+}
+.vx-datagrid-selection {
+	width: 44px;
+	flex-grow: 0;
+	flex-shrink: 0;
+	align-items: center;
+	justify-content: center;
+}
+.vx-datagrid-row-action {
+	flex-direction: row;
+	flex-grow: 1;
+}
+.vx-datagrid-body {
+	min-height: 0;
+}
+
+/* Command search content shared by the panel and mobile search sheet. */
+.vx-cmdk-input-row {
+	flex-direction: row;
+	align-items: center;
+}
+.vx-cmdk-search {
+	flex-grow: 1;
+}
+.vx-cmdk-heading {
+	padding: 8px;
+	font-size: 12px;
+	opacity: 0.7;
+}
+.vx-cmdk-status {
+	font-size: 12px;
+	padding: 4px;
+}
+.vx-cmdk-highlighted {
+	background-color: #e4e4e7;
+}
+.ns-dark .vx-cmdk-highlighted,
+.dark .vx-cmdk-highlighted {
+	background-color: #333333;
+}
+.vx-cmdk-item-content {
+	flex-grow: 1;
+}
+.vx-cmdk-description {
+	font-size: 12px;
+	opacity: 0.7;
+}
+.vx-cmdk-shortcut {
+	font-size: 12px;
+	margin-left: 8px;
+}
+.vx-cmdk-footer {
+	padding: 8px;
+	font-size: 12px;
+}
+.vx-cmdk-cancel {
+	padding: 4px 8px;
+}
+/* xplat-web-only:start */
+.vx-cmdk-input-row {
+	display: flex;
+	gap: 4px;
+}
+.vx-cmdk-list {
+	overflow-y: auto;
+}
+.vx-cmdk-item-content {
+	display: flex;
+	flex-direction: column;
+}
+.vx-cmdk-footer {
+	display: flex;
+	align-items: center;
+	gap: 4px;
 }
+/* xplat-web-only:end */