@octane-xplat/ui 0.4.0 → 0.6.0

package/src/theme/tokens.css

@@ -3,10 +3,22 @@
 
 :root,
 .ns-root {
-	--color-primary: #4f46e5;
-	--color-on-primary: #ffffff;
+	--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-text: #111827;
+	--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
@@ -20,8 +32,62 @@
 
 .ns-dark,
 .dark {
-	--color-surface: #0f172a;
-	--color-text: #f8fafc;
+	--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;
+}
+
+/* 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
+   normalize the deltas once instead of patching individual rules:
+   - border-box keeps padding/borders inside declared sizes (a 40dip box
+     is 40px, not 40px + padding + border).
+   - border-width 0 + border-style solid makes the DOM behave like native:
+     any shared border-*-width declaration paints on both targets — the
+     DOM's initial border-width is `medium`, so style alone would draw
+     phantom ~3px edges wherever a rule sets only one side's width.
+   - <img> is a leaf, not inline text (no baseline descender gap).
+   - .vx-app columns are flex like their native screen containers. */
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+* {
+	border-width: 0;
+	border-style: solid;
+}
+img {
+	display: block;
+}
+.vx-app {
+	display: flex;
+	flex-direction: column;
+}
+/* Native has no scroll chaining — a ScrollView just bounces inside
+   itself because the parent is never a scroller. contain is the DOM
+   equivalent: scroll stays in the leaf it started in. */
+.vx-scroll {
+	overscroll-behavior: contain;
+}
+/* xplat-web-only:end */
+
+/* Shared normalization — NS FlexboxLayout defaults flex children to
+   shrink:1 with NO min-content floor (its shrink pass clamps at
+   effectiveMinWidth/Height = the explicit min-* prop, default 0), so an
+   overflowing column crushes intrinsic children toward zero where the
+   web stops at min-content. RN's Yoga defaults flexShrink:0 for the same
+   reason — do the same on both engines. `*` is zero-specificity: flex-1
+   (the shorthand sets shrink:1) and .shrink still opt back in, and
+   truncation patterns pair them with min-w-0/min-h-0. */
+* {
+	flex-shrink: 0;
 }
 
 /* vocabulary base styles */
@@ -54,8 +120,17 @@
 	display: flex;
 	flex-direction: column;
 }
-/* xplat-web-only:start — the native Drawer leaf is the ui-drawer widget;
-   these rules style the web DOM drawer overlay */
+/* 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 {
 	display: flex;
 	flex-direction: row;
@@ -70,7 +145,6 @@
 .vx-drawer-backdrop {
 	position: absolute;
 	inset: 0;
-	background: rgba(15, 23, 42, 0.35);
 }
 .vx-drawer-panel {
 	position: absolute;
@@ -78,9 +152,7 @@
 	top: 0;
 	bottom: 0;
 	left: 0;
-	width: 280px;
 	overflow: auto;
-	background: var(--color-surface);
 	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
 }
 /* xplat-web-only:end */
@@ -123,9 +195,6 @@
 .vx-pressable:active {
 	opacity: 0.85;
 }
-.vx-pressable-no-feedback:active {
-	opacity: 1;
-}
 /* native press feedback (NS pseudo — dead rule on web, and vice versa) */
 .vx-pressable:pressed {
 	opacity: 0.85;
@@ -140,7 +209,7 @@
 .vx-overlay-shade {
 	position: absolute;
 	inset: 0;
-	background-color: rgba(0, 0, 0, 0.45);
+	background-color: rgba(0, 0, 0, 0.4);
 }
 
 .vx-overlay-content {
@@ -156,6 +225,18 @@
 	background-color: transparent;
 }
 
+.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 {
 	position: fixed;
 	z-index: 1002;
@@ -178,6 +259,39 @@
 }
 /* xplat-web-only:end */
 
+/* Normalized OS-widget reset — TextInput/TextArea are real
+   <input>/<textarea>/TextField/TextView; the leaves emit vx-input/
+   vx-textarea unconditionally so the platform chrome is stripped before
+   app styles apply. On Android the transparent background replaces the
+   default EditText drawable (kills the Material underline); zero padding
+   removes native insets. Legitimate semantics — IME, secure entry,
+   selection, autofill, caret, focus — stay platform-native by design. */
+.vx-input,
+.vx-textarea {
+	padding: 0;
+	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);
+}
+/* xplat-web-only:start — DOM-only reset: element UA chrome and the
+   focus outline (normalized to the same thin ring on both). */
+.vx-input,
+.vx-textarea {
+	appearance: none;
+	-webkit-appearance: none;
+	outline: none;
+}
+.vx-input:focus,
+.vx-textarea:focus {
+	outline: 1px solid var(--color-primary);
+	outline-offset: -1px;
+}
+/* xplat-web-only:end */
+
 /* auto-grow owns height — the manual resize handle has no native analog */
 /* xplat-web-only:start */
 .vx-textarea {
@@ -185,51 +299,93 @@
 }
 /* xplat-web-only:end */
 
-/* Modal is a real top-layer dialog on web. Presentation variants keep their
-   sizing and anchoring in tokens so both the component and openModal share it. */
+/* WebView chrome reset — the web leaf is a real <iframe>: strip the UA's
+   inset border and the inline-element baseline gap. WKWebView and
+   android.webkit.WebView ship chrome-free, so there is no native reset. */
 /* xplat-web-only:start */
-.vx-modal {
-	width: 480px;
-	max-width: 90%;
-	max-height: 90%;
-	padding: 24px;
-	border: 0;
-	border-radius: var(--radius-xl);
-	corner-shape: squircle;
-	color: var(--color-text);
-	background-color: var(--color-surface);
+.vx-webview {
+	display: block;
+	border-width: 0;
 }
+/* xplat-web-only:end */
 
-.vx-modal::backdrop {
-	background: rgba(15, 23, 42, 0.45);
+/* 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-modal--dialog {
-	width: 480px;
-	max-width: 90%;
+.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;
 }
 
-.vx-modal--sheet {
+.vx-video-btn {
+	padding: 4px;
+}
+
+/* Full-frame tap layer — hit target only, never paints. */
+.vx-video-tap {
+	background-color: transparent;
+}
+
+.vx-video-time {
+	color: #fff;
+	font-size: 11px;
+	min-width: 34px;
+	text-align: center;
+}
+
+/* xplat-web-only:start — the <video> element is inline and overlays would
+   otherwise swallow pointer events; native layers are hit-transparent by
+   default, so none of this exists on NS. */
+.vx-video-surface {
+	display: block;
 	width: 100%;
-	max-width: none;
-	max-height: 85%;
-	position: fixed;
-	inset: auto 0 0;
-	margin: 0;
-	border-top-left-radius: var(--radius-xl);
-	border-top-right-radius: var(--radius-xl);
-	corner-shape: squircle;
+	height: 100%;
+}
+
+.vx-video-poster,
+.vx-video-barwrap {
+	pointer-events: none;
+}
+
+.vx-video-barwrap > * {
+	pointer-events: auto;
+}
+
+.vx-video-poster {
+	object-fit: cover;
+}
+
+/* xplat-web-only:end */
+
+/* CameraView — surface-hosted: the preview fills the frame; web shows it
+   through an object-fit:cover <video>. */
+.vx-cameraview {
+	background-color: #000;
 }
 
-.vx-modal--fullscreen {
+/* xplat-web-only:start */
+.vx-cameraview-surface {
+	display: block;
 	width: 100%;
-	max-width: none;
 	height: 100%;
-	max-height: none;
-	margin: 0;
-	border-radius: 0;
+	object-fit: cover;
 }
+/* xplat-web-only:end */
 
+/* xplat-web-only:start */
 /* Modal ROUTES (pushRoute presentation:'modal') — the URL stays underneath,
    so the overlay is a fixed layer over the shell rather than a dialog. */
 .vx-modalroute {
@@ -246,7 +402,7 @@
 	inset: 0;
 	border: 0;
 	padding: 0;
-	background: rgba(15, 23, 42, 0.45);
+	background: rgba(0, 0, 0, 0.4);
 	cursor: default;
 }
 
@@ -260,22 +416,70 @@
 }
 /* xplat-web-only:end */
 
-/* xplat-web-only:start — placeholder pseudos are DOM-only */
+/* 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, currentColor);
+	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
+   DOM (UA stylesheet wins); without this they render in the UA face. */
+input,
+textarea,
+select,
+button {
+	font-family: inherit;
 }
 /* xplat-web-only:end */
 
-/* xplat-web-only:start — native ActivityIndicator is the NS widget */
+/* Self-drawn spinner — the border ring is shared (native rotates the
+   view via `animate`; DOM spins via the keyframes below). */
 .vx-spinner {
-	display: inline-block;
-	width: 1em;
-	height: 1em;
-	box-sizing: border-box;
-	border: 2px solid currentColor;
+	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
+   translates it in/out — reveal math lives in refresh.*.ts. */
+.vx-refresh {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	height: 64px;
+}
+/* xplat-web-only:start — the DOM leaf needs explicit clipping plus the
+   absolute overlay; native clips via the wrapper grid
+   (clipsToBounds/ViewGroup) and stacks children in one cell. */
+.vx-refresh-wrap {
+	position: relative;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+}
+.vx-refresh-wrap > .vx-scroll {
+	flex: 1;
+	min-height: 0;
+}
+.vx-refresh {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+}
+/* xplat-web-only:end */
+/* xplat-web-only:start — DOM needs an inline-block box + CSS animation;
+   the native leaf drives view.animate instead */
+.vx-spinner {
+	display: inline-block;
+	box-sizing: border-box;
 	animation: vx-spinner-turn 0.8s linear infinite;
 }
 
@@ -286,188 +490,1345 @@ textarea::placeholder {
 }
 /* xplat-web-only:end */
 
-.vx-h1 {
-	font-size: 2em;
-	font-weight: bold;
+/* Self-drawn switch — flex track + thumb. `--on` flips justify-content,
+   which slides the thumb; identical geometry on web and native. */
+.vx-switch {
+	width: 48px;
+	height: 28px;
+	padding-left: 3px;
+	padding-right: 3px;
+	border-radius: 14px;
+	background-color: var(--color-border);
+	justify-content: flex-start;
+	align-items: center;
 }
-.vx-h2 {
-	font-size: 1.5em;
-	font-weight: bold;
+.vx-switch--on {
+	background-color: var(--color-primary);
+	justify-content: flex-end;
 }
-.vx-h3 {
-	font-size: 1.17em;
-	font-weight: bold;
+.vx-switch-thumb {
+	width: 22px;
+	height: 22px;
+	border-radius: 50%;
+	background-color: var(--color-surface);
 }
-.vx-h4 {
-	font-size: 1em;
-	font-weight: bold;
+/* xplat-web-only:start — the DOM host is a div; flex + cursor live here */
+.vx-switch {
+	display: flex;
+	cursor: pointer;
 }
-.vx-h5 {
-	font-size: 0.83em;
-	font-weight: bold;
+/* xplat-web-only:end */
+
+/* Self-drawn slider — host is a grid (native) / relative div (web);
+   track + fill + thumb overlay the same box. */
+.vx-slider {
+	height: 28px;
+}
+.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-h6 {
-	font-size: 0.67em;
-	font-weight: bold;
+.vx-slider-thumb {
+	width: 20px;
+	height: 20px;
+	border-radius: 50%;
+	background-color: var(--color-primary);
+	vertical-align: middle;
 }
-
-/* xplat-web-only:start — glass material is real on iOS 26+; web approximates
-   with backdrop-filter. The class also lands on native elements (inert) so
-   apps can style their own fallback — but these rules are DOM-only. */
-.vx-glass {
-	background-color: color-mix(in srgb, var(--color-surface) 30%, transparent);
-	border: 1px solid rgba(255, 255, 255, 0.25);
+/* xplat-web-only:start — absolute positioning is DOM-only; native grid
+   children center via vertical-align and pin via margin-left. */
+.vx-slider {
+	position: relative;
 }
-
-@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
-	.vx-glass {
-		background-color: color-mix(in srgb, var(--color-surface) 20%, transparent);
-		-webkit-backdrop-filter: blur(20px) saturate(1.6);
-		backdrop-filter: blur(20px) saturate(1.6);
-	}
+.vx-slider-track,
+.vx-slider-fill {
+	position: absolute;
+	top: 50%;
+	left: 0;
+	right: 0;
+	transform: translateY(-50%);
 }
-
-.vx-glass--clear {
-	background-color: color-mix(in srgb, var(--color-surface) 12%, transparent);
-	border-color: rgba(255, 255, 255, 0.15);
+.vx-slider-thumb {
+	position: absolute;
+	top: 50%;
+	transform: translate(-50%, -50%);
 }
+/* xplat-web-only:end */
 
-@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
-	.vx-glass--clear {
-		-webkit-backdrop-filter: blur(8px) saturate(1.3);
-		backdrop-filter: blur(8px) saturate(1.3);
-	}
+/* xplat-web-only:start — Pager's web leaf is a mandatory scroll-snap row:
+   one page per item at 100% host width so scrollLeft / clientWidth is a
+   clean page index. Native pages are sized by the widget itself, so the
+   whole block is DOM-only. Scrollbar hidden (native has none); contain
+   keeps the swipe from chaining to a parent scroller, matching .vx-scroll. */
+.vx-pager {
+	display: flex;
+	flex-direction: row;
+	overflow-x: auto;
+	overflow-y: hidden;
+	scroll-snap-type: x mandatory;
+	overscroll-behavior-x: contain;
+	scrollbar-width: none;
+	touch-action: pan-x;
+}
+.vx-pager::-webkit-scrollbar {
+	display: none;
+}
+.vx-pager-page {
+	flex: 0 0 100%;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	scroll-snap-align: start;
 }
 /* xplat-web-only:end */
 
-/* utilities (hand-written subset for the harness; Tailwind later) */
+/* Phase-1 self-drawn components — functional geometry + token chrome only;
+   visual design is the app's job. */
 
-.flex-1 {
-	flex-grow: 1;
-}
-/* Flex divergence guards — NS FlexboxLayout diverges from web flexbox on
- * shrinkability: grow children never shrink below intrinsic width, fixed
- * children get crushed, and auto-height rows re-measure grow children at
- * zero height. min-w-0/min-h-0 let a grow child shrink; shrink-0 protects
- * a fixed-size child. All three are plain CSS on web. */
-.min-w-0 {
-	min-width: 0;
-}
-.min-h-0 {
-	min-height: 0;
-}
-.shrink-0 {
-	flex-shrink: 0;
+/* Button — row-direction pressable (vx-pressable already supplies display
+   and press feedback). */
+.vx-button {
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
 }
-.grow {
-	flex-grow: 1;
+
+/* Collapsible/Accordion — column stacks. */
+.vx-collapsible,
+.vx-collapsible-content,
+.vx-accordion,
+.vx-accordion-item {
+	flex-direction: column;
 }
-.items-center {
+
+/* Checkbox — 20px box + check glyph; --on fills with primary. */
+.vx-checkbox-row {
+	flex-direction: row;
 	align-items: center;
 }
-.justify-center {
+.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;
 }
-.gap-4 {
-	gap: 16px;
+.vx-checkbox--on .vx-checkbox {
+	background-color: var(--color-primary);
+	border-color: var(--color-primary);
 }
-
-.text-xl {
-	font-size: 20px;
+.vx-checkbox-check {
+	font-size: 14px;
+	line-height: 20px;
+	color: var(--color-onprimary);
 }
-.font-bold {
-	font-weight: bold;
+.vx-checkbox-label {
+	margin-left: 8px;
+}
+.vx-checkbox--disabled {
+	opacity: 0.5;
 }
 
-/* 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;
+/* Radio group — column/row of dot options. */
+.vx-radio-group {
+	flex-direction: column;
 }
-.rounded-md {
-	border-radius: var(--radius-md);
-	corner-shape: squircle;
+.vx-radio-group--row {
+	flex-direction: row;
 }
-.rounded-lg {
-	border-radius: var(--radius-lg);
-	corner-shape: squircle;
+.vx-radio-row {
+	flex-direction: row;
+	align-items: center;
 }
-.rounded-xl {
-	border-radius: var(--radius-xl);
-	corner-shape: squircle;
+.vx-radio {
+	width: 18px;
+	height: 18px;
+	border-width: 1px;
+	border-color: var(--color-border);
+	border-radius: 50%;
+	align-items: center;
+	justify-content: center;
 }
-.rounded-full {
-	border-radius: 9999px;
+.vx-radio--on .vx-radio {
+	border-color: var(--color-primary);
 }
-
-.bg-primary {
+.vx-radio-dot {
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
 	background-color: var(--color-primary);
 }
-.text-onprimary {
-	color: var(--color-on-primary);
-}
-.bg-danger {
-	background-color: #dc2626;
+.vx-radio-label {
+	margin-left: 8px;
 }
-/* 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);
+.vx-radio--disabled {
+	opacity: 0.5;
 }
-/* xplat-web-only:end */
 
-.btn {
-	padding-top: 12px;
-	padding-right: 20px;
-	padding-bottom: 12px;
-	padding-left: 20px;
+/* SegmentedControl — equal-width segments in a rounded track; `--on`
+   raises the selected one. flex-basis is dead on NS (the shorthand parser
+   drops it and the standalone property isn't registered), so width:0 +
+   flex-grow:1 is what distributes segments equally on both engines. */
+.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);
 }
-
-/* harness experiment styles */
-
-.vx-app {
-	padding: 24px;
+.vx-segment {
+	flex-grow: 1;
+	width: 0;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	padding-top: 6px;
+	padding-bottom: 6px;
+	padding-left: 10px;
+	padding-right: 10px;
+	border-radius: var(--radius-sm);
+}
+.vx-segment--on {
 	background-color: var(--color-surface);
-	color: var(--color-text);
 }
-
-.vx-app .text-xl,
-.vx-app Text,
-.vx-app label {
+.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 {
+	display: flex;
+}
+.vx-segment {
+	display: flex;
+	cursor: pointer;
+	user-select: none;
+}
+.vx-segment:focus {
+	outline: 1px solid var(--color-primary);
+	outline-offset: -1px;
+}
+.vx-segment--disabled {
+	cursor: default;
+}
+/* xplat-web-only:end */
+
+/* SearchInput — chrome-reset field: bordered shell, leading glyph, the
+   field owns the remaining width, self-drawn clear. The web leaf hides the
+   engine's own search-cancel button so native's (hand-drawn) matches. */
+.vx-search {
+	flex-direction: row;
+	align-items: center;
+	padding-top: 6px;
+	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. */
+.vx-search {
+	display: flex;
+}
+.vx-search-icon {
+	display: inline-flex;
+	flex: none;
+}
+.vx-search-field {
+	min-width: 0;
+	border: 0;
+	background: none;
+	outline: none;
+	appearance: none;
+	-webkit-appearance: none;
+}
+input.vx-search-field::-webkit-search-cancel-button {
+	display: none;
+}
+.vx-search-clear {
+	display: inline-flex;
+	border: 0;
+	padding: 0;
+	cursor: pointer;
+}
+/* xplat-web-only:end */
+
+/* Anchored menus — panel + item rows (the Popover leaf positions it). */
+.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;
+}
+.vx-menu-item {
+	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 {
+	display: inline-flex;
+}
+/* xplat-web-only:end */
+
+/* Separator — 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;
+	align-items: center;
+}
+/* xplat-web-only:start — display:flex for the div-based flex classes */
+.vx-collapsible,
+.vx-collapsible-content,
+.vx-accordion,
+.vx-accordion-item,
+.vx-checkbox-row,
+.vx-checkbox,
+.vx-radio-group,
+.vx-radio-row,
+.vx-radio,
+.vx-menu-list,
+.vx-menu-item,
+.vx-contextmenu,
+.vx-avatar,
+.vx-avatar-group,
+.vx-avatar-group-item {
+	display: flex;
+}
+.vx-checkbox-row,
+.vx-radio-row {
+	cursor: pointer;
+}
+.vx-checkbox-check {
+	display: block;
+}
+/* xplat-web-only:end */
+
+/* Phase-2 form field layer. */
+
+/* FormField — label / control / message column. */
+.vx-field {
+	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-msg {
+	font-size: 12px;
+	line-height: 16px;
+	margin-top: 4px;
+	color: var(--color-text-secondary);
+}
+.vx-field-msg--error {
+	color: var(--color-danger);
+}
+.vx-fieldgroup {
+	flex-direction: column;
+}
+.vx-fieldgroup-label {
+	font-size: 13px;
+	line-height: 20px;
+	font-weight: 600;
+	margin-bottom: 8px;
+}
+
+/* InputNumber — steppers flanking a centered field. */
+.vx-inputnumber {
+	flex-direction: row;
+	align-items: center;
+}
+.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;
+}
+.vx-inputnumber-field {
+	width: 64px;
+	margin-left: 8px;
+	margin-right: 8px;
+	text-align: center;
+}
+.vx-inputnumber--disabled {
+	opacity: 0.5;
+}
+
+/* PinInput — row of single cells. */
+.vx-pininput {
+	flex-direction: row;
+}
+.vx-pininput-cell {
+	width: 40px;
+	margin-right: 8px;
+	text-align: center;
+}
+.vx-pininput--disabled {
+	opacity: 0.5;
+}
+
+/* Select — trigger row + check column inside the anchored listbox. */
+.vx-select-trigger {
+	flex-direction: row;
+	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;
+}
+.vx-select-check {
+	width: 16px;
+}
+.vx-select-search {
+	margin-bottom: 4px;
+}
+
+/* InputTags — wrapped chip row + trailing field. */
+.vx-inputtags {
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+}
+.vx-inputtags-tag {
+	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;
+}
+.vx-inputtags-field {
+	flex: 1;
+	min-width: 80px;
+}
+.vx-inputtags--disabled {
+	opacity: 0.5;
+}
+
+/* InputRating — glyph row; --on lights the cell. */
+.vx-rating {
+	flex-direction: row;
+}
+.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 {
+	flex-direction: column;
+}
+.vx-checkbox-group--row {
+	flex-direction: row;
+}
+/* xplat-web-only:start — display:flex for the div/span flex classes */
+.vx-field,
+.vx-fieldgroup,
+.vx-inputnumber,
+.vx-inputnumber-step,
+.vx-select-trigger,
+.vx-select-list,
+.vx-inputtags,
+.vx-inputtags-tag,
+.vx-rating,
+.vx-rating-cell,
+.vx-checkbox-group {
+	display: flex;
+}
+.vx-rating-cell {
+	cursor: pointer;
+}
+/* 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;
+	color: var(--color-text-secondary);
+}
+.vx-breadcrumb-link {
+	color: var(--color-primary);
+}
+
+/* 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;
+	border-width: 1px;
+	border-color: var(--color-border);
+	border-radius: var(--radius-sm);
+	align-items: center;
+	justify-content: center;
+}
+.vx-page-btn--on {
+	background-color: var(--color-primary);
+	border-color: var(--color-primary);
+	color: var(--color-onprimary);
+}
+.vx-page-ellipsis {
+	margin-right: 4px;
+	color: var(--color-text-secondary);
+}
+.vx-pagination--disabled {
+	opacity: 0.5;
+}
+
+/* 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;
+	background-color: var(--color-border);
+}
+.vx-stepper-line--done {
+	background-color: var(--color-primary);
+}
+.vx-step {
+	flex-direction: row;
+	align-items: center;
+}
+.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);
+}
+.vx-step--on .vx-step-dot {
+	border-color: var(--color-primary);
+	color: var(--color-primary);
+}
+.vx-step--done .vx-step-dot {
+	background-color: var(--color-primary);
+	border-color: var(--color-primary);
+	color: var(--color-onprimary);
+}
+.vx-step-label {
+	margin-left: 6px;
+}
+.vx-step--disabled {
+	opacity: 0.5;
+}
+
+/* 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;
+	border-radius: var(--radius-sm);
+}
+.vx-navmenu-item--on {
+	background-color: var(--color-border);
+}
+.vx-navmenu-item--disabled {
+	opacity: 0.5;
+}
+.vx-navmenu-label {
+	margin-left: 4px;
+}
+
+/* CommandPalette — panel centered by the overlay layer. */
+.vx-commandpalette {
+	width: 360px;
+	max-width: 90%;
+	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);
+}
+.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,
+.vx-step,
+.vx-navmenu-item {
+	cursor: pointer;
+}
+/* xplat-web-only:end */
+
+/* Phase-4 data display. */
+
+/* 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;
+}
+
+/* Timeline — dot + connector rail beside content. */
+.vx-timeline {
+	flex-direction: column;
+}
+.vx-timeline-item {
+	flex-direction: row;
+}
+.vx-timeline-rail {
+	flex-direction: column;
+	align-items: center;
+	width: 20px;
+}
+.vx-timeline-dot {
+	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 {
+	flex-direction: column;
+}
+.vx-tree-node {
+	flex-direction: column;
+}
+.vx-tree-row {
+	flex-direction: row;
+	align-items: center;
+	padding: 4px 0;
+}
+.vx-tree-row--disabled {
+	opacity: 0.5;
+}
+.vx-tree-caret {
+	width: 14px;
+	margin-left: 4px;
+}
+
+/* Alert — icon + body callout; tone picks border/text colors. */
+.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;
+	flex-direction: column;
+}
+.vx-card-footer {
+	padding: 12px;
+	border-top-width: 1px;
+	border-top-color: var(--color-border);
+}
+
+/* Chip — pressable pill with selected + remove states. */
+.vx-chip {
+	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;
+}
+
+/* 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. */
+.vx-empty {
+	flex-direction: column;
+	align-items: center;
+	padding: 24px;
+}
+.vx-empty-title {
+	font-weight: 600;
+	margin-top: 8px;
+}
+.vx-empty-desc {
+	color: var(--color-text-secondary);
+	margin-top: 2px;
+}
+
+/* Banner — notice strip. */
+.vx-banner {
+	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;
+	flex: 1;
+	margin-left: 8px;
+}
+.vx-banner-dismiss {
+	margin-left: 8px;
+}
+
+/* User — avatar + text column. */
+.vx-user {
+	flex-direction: row;
+	align-items: center;
+}
+.vx-user-body {
+	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 {
+	flex-direction: column;
+}
+.vx-progressgroup-row {
+	flex-direction: row;
+	align-items: center;
+}
+.vx-progressgroup-label {
+	margin-left: 8px;
+}
+/* xplat-web-only:start — display:flex for the div-based flex classes */
+.vx-table,
+.vx-table-head,
+.vx-table-row,
+.vx-timeline,
+.vx-timeline-item,
+.vx-timeline-rail,
+.vx-timeline-body,
+.vx-tree,
+.vx-tree-node,
+.vx-tree-row,
+.vx-alert,
+.vx-alert-body,
+.vx-card,
+.vx-card-body,
+.vx-banner,
+.vx-banner-body,
+.vx-user,
+.vx-user-body,
+.vx-progressgroup,
+.vx-progressgroup-row {
+	display: flex;
+}
+.vx-table-row--pressable,
+.vx-tree-row,
+.vx-user--pressable,
+.vx-banner-dismiss,
+.vx-chip-remove {
+	cursor: pointer;
+}
+/* xplat-web-only:end */
+
+.vx-h1 {
+	font-size: 2em;
+	font-weight: bold;
+}
+.vx-h2 {
+	font-size: 1.5em;
+	font-weight: bold;
+}
+.vx-h3 {
+	font-size: 1.17em;
+	font-weight: bold;
+}
+.vx-h4 {
+	font-size: 1em;
+	font-weight: bold;
+}
+.vx-h5 {
+	font-size: 0.83em;
+	font-weight: bold;
+}
+.vx-h6 {
+	font-size: 0.67em;
+	font-weight: bold;
+}
+
+/* utilities (hand-written subset — do NOT adopt Tailwind until
+   NativeScript/tailwind#226 is resolved; the plugin strips core-supported
+   props incl. gap, drops all @media, and rewrites invisible→collapse) */
+
+/* flex-1 keeps Tailwind v4's exact emission (`flex: 1 1 0%`) — web gets
+   identical semantics, NS parses grow/shrink out of the shorthand and
+   ignores the basis token it can't model. */
+.flex-1 {
+	flex: 1 1 0%;
+}
+/* Flex divergence guards — NS FlexboxLayout diverges from web flexbox on
+ * shrinkability: grow children never shrink below intrinsic width, fixed
+ * children get crushed, and auto-height rows re-measure grow children at
+ * zero height. The shared `* { flex-shrink: 0 }` default (RN semantics)
+ * makes .shrink the opt-in for a shrinkable child; min-w-0/min-h-0 lower
+ * the min-content floor so it can actually shrink, and shrink-0 remains
+ * for local overrides. All four are plain CSS on web. */
+.min-w-0 {
+	min-width: 0;
+}
+.min-h-0 {
+	min-height: 0;
+}
+.shrink {
+	flex-shrink: 1;
+}
+.shrink-0 {
+	flex-shrink: 0;
+}
+.grow {
+	flex-grow: 1;
+}
+.items-center {
+	align-items: center;
+}
+.items-baseline {
+	align-items: baseline;
+}
+.items-start {
+	align-items: flex-start;
+}
+.justify-center {
+	justify-content: center;
+}
+.justify-between {
+	justify-content: space-between;
+}
+.flex-wrap {
+	flex-wrap: wrap;
+}
+.gap-4 {
+	gap: 16px;
+}
+.gap-3 {
+	gap: 12px;
+}
+.gap-6 {
+	gap: 24px;
+}
+
+/* line-height is REQUIRED on native: without it a Label's measured height
+   misses the font's line metrics, and Android clips the descenders/bottom
+   of the glyphs (observed: section-labels 21–29px bounds for 12sp text at
+   3.25x). Tailwind pairs every text-* size with a leading, same here. */
+.text-2xl {
+	font-size: 28px;
+	line-height: 36px;
+}
+.text-xl {
+	font-size: 20px;
+	line-height: 28px;
+}
+.text-lg {
+	font-size: 18px;
+	line-height: 28px;
+}
+.text-sm {
+	font-size: 13px;
+	line-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 {
+	padding-top: 10px;
+	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
+   web and don't hit these rules. */
+a.btn {
+	display: inline-flex;
+}
+a.chip {
+	display: inline-flex;
+	align-items: center;
+}
+/* xplat-web-only:end */
+
+/* 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;
+	padding-top: 10px;
+	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;
+}
+
+/* xplat-web-only:start — DOM defaults are display:block (div) and
+   inline-block (button); every flex-bearing vx- class needs an explicit
+   display or flex-direction/align-items/justify-content are inert. */
+.vx-tabs {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+}
+.vx-tabbar {
+	display: flex;
+	flex-direction: row;
+}
+.vx-tabpane {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+}
+button.vx-tab {
+	display: flex;
+	background: none;
+	cursor: pointer;
+}
+/* xplat-web-only:end */
+
+/* harness experiment styles */
+
+.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: 10px;
+	padding-top: 10px;
+	padding-right: 12px;
+	padding-bottom: 10px;
+	padding-left: 12px;
 	border-width: 1px;
-	border-color: #94a3b8;
-	border-radius: var(--radius-sm);
+	border-color: var(--color-border);
+	border-radius: var(--radius-md);
 	corner-shape: squircle;
-	font-size: 16px;
+	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-primary);
-	color: var(--color-on-primary);
-	padding: 4px 10px;
-	border-radius: var(--radius-lg);
+	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: #e2e8f0;
-}
-
-.vx-list {
-	flex-grow: 1;
+	border-bottom-color: var(--color-border);
 }
 
 .gap-2 {
@@ -477,31 +1838,75 @@ textarea::placeholder {
 /* In-window sheet — bottom-anchored panel (matches the native RootLayout
    sheet). Layer is pointer-events:none; backdrop + panel re-enable. */
 .vx-sheet-layer {
-	position: fixed;
-	inset: 0;
 	z-index: 1100;
-	pointer-events: none;
 }
 
 .vx-sheet-backdrop {
-	position: absolute;
-	inset: 0;
-	background: rgba(15, 23, 42, 0.45);
-	pointer-events: auto;
+	background: rgba(0, 0, 0, 0.4);
 }
 
 .vx-sheet {
-	position: absolute;
-	left: 0;
-	right: 0;
-	bottom: 0;
 	max-height: 85%;
 	padding: 24px;
-	overflow: auto;
+	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.
+   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;
+	border-radius: 999px;
+	background-color: var(--color-text-secondary);
+	opacity: 0.4;
+}
+
+/* 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 */