@octane-xplat/ui 0.3.0 → 0.5.0

package/src/theme/tokens.css

@@ -3,274 +3,730 @@
 
 :root,
 .ns-root {
-  --color-primary: #4f46e5;
-  --color-on-primary: #ffffff;
-  --color-surface: #ffffff;
-  --color-text: #111827;
-  --space-4: 16px;
+	--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-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/ListView 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,
+.vx-list {
+	overscroll-behavior: contain;
+}
+/* xplat-web-only:end */
 
 /* vocabulary base styles */
 
 .vx-view,
 .vx-row {
-  display: flex;
+	display: flex;
 }
 
 .vx-view {
-  flex-direction: column;
+	flex-direction: column;
 }
 
 /* Safe-area values are zero when the viewport has no display cutout. */
 .vx-safe-area {
-  padding-top: constant(safe-area-inset-top);
-  padding-right: constant(safe-area-inset-right);
-  padding-bottom: constant(safe-area-inset-bottom);
-  padding-left: constant(safe-area-inset-left);
+	padding-top: constant(safe-area-inset-top);
+	padding-right: constant(safe-area-inset-right);
+	padding-bottom: constant(safe-area-inset-bottom);
+	padding-left: constant(safe-area-inset-left);
 }
 
 .vx-safe-area {
-  padding-top: env(safe-area-inset-top);
-  padding-right: env(safe-area-inset-right);
-  padding-bottom: env(safe-area-inset-bottom);
-  padding-left: env(safe-area-inset-left);
+	padding-top: env(safe-area-inset-top);
+	padding-right: env(safe-area-inset-right);
+	padding-bottom: env(safe-area-inset-bottom);
+	padding-left: env(safe-area-inset-left);
+}
+
+.vx-keyboard-avoiding {
+	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 */
+.vx-drawer {
+	display: flex;
+	flex-direction: row;
+	position: relative;
+	overflow: hidden;
+}
+.vx-drawer-main {
+	display: flex;
+	flex: 1;
+	min-width: 0;
+}
+.vx-drawer-backdrop {
+	position: absolute;
+	inset: 0;
+	background: rgba(0, 0, 0, 0.4);
 }
-
-.vx-keyboard-avoiding { display: flex; flex-direction: column; }
-.vx-drawer { display: flex; flex-direction: row; position: relative; overflow: hidden; }
-.vx-drawer-main { display: flex; flex: 1; min-width: 0; }
-.vx-drawer-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.35); }
 .vx-drawer-panel {
-  position: absolute;
-  z-index: 1;
-  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);
-}
+	position: absolute;
+	z-index: 1;
+	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 */
 
 .vx-row {
-  flex-direction: row;
+	flex-direction: row;
 }
 
 .vx-grid,
 .vx-stack {
-  display: grid;
+	display: grid;
 }
 
 .vx-stack > * {
-  grid-area: 1 / 1;
+	grid-area: 1 / 1;
 }
 
+/* xplat-web-only:start — Absolute's native leaf is absolutelayout; CSS
+   positioning is web-only (children position via left/top props) */
 .vx-absolute {
-  position: relative;
+	position: relative;
 }
 
 .vx-absolute > * {
-  position: absolute;
+	position: absolute;
 }
+/* xplat-web-only:end */
 
 .vx-spacer {
-  flex-grow: 1;
+	flex-grow: 1;
 }
 
 .vx-pressable {
-  display: flex;
-  flex-direction: column;
-  user-select: none;
+	display: flex;
+	flex-direction: column;
+	user-select: none;
 }
 
 /* web press feedback */
 .vx-pressable:active {
-  opacity: 0.85;
+	opacity: 0.85;
 }
 .vx-pressable-no-feedback:active {
-  opacity: 1;
+	opacity: 1;
 }
 /* native press feedback (NS pseudo — dead rule on web, and vice versa) */
 .vx-pressable:pressed {
-  opacity: 0.85;
+	opacity: 0.85;
 }
 
+/* xplat-web-only:start — overlays/toasts/popovers render through RootLayout
+   or showModal on native; these portal/positioning rules are web-only */
 .vx-overlay {
-  z-index: 1000;
+	z-index: 1000;
 }
 
 .vx-overlay-shade {
-  position: absolute;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0.45);
+	position: absolute;
+	inset: 0;
+	background-color: rgba(0, 0, 0, 0.4);
 }
 
 .vx-overlay-content {
-  position: relative;
-  z-index: 1;
+	position: relative;
+	z-index: 1;
 }
 
 .vx-popover {
-  z-index: 1001;
+	z-index: 1001;
+}
+
+.vx-popover-backdrop {
+	background-color: transparent;
 }
 
 .vx-toast-host {
-  position: fixed;
-  z-index: 1002;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
-  pointer-events: none;
+	position: fixed;
+	z-index: 1002;
+	left: 0;
+	right: 0;
+	display: flex;
+	justify-content: center;
+	pointer-events: none;
 }
 
-.vx-toast-top { top: 24px; }
-.vx-toast-bottom { bottom: 24px; }
+.vx-toast-top {
+	top: 24px;
+}
+.vx-toast-bottom {
+	bottom: 24px;
+}
 
 .vx-toast {
-  pointer-events: auto;
+	pointer-events: auto;
 }
+/* xplat-web-only:end */
 
 /* auto-grow owns height — the manual resize handle has no native analog */
+/* xplat-web-only:start */
 .vx-textarea {
-  resize: none;
+	resize: none;
 }
+/* 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. */
+/* xplat-web-only:start */
 .vx-modal {
-  width: 480px;
-  max-width: 90%;
-  max-height: 90%;
-  padding: 24px;
-  border: 0;
-  border-radius: 16px;
-  color: var(--color-text);
-  background-color: var(--color-surface);
+	width: 480px;
+	max-width: 90%;
+	max-height: 90%;
+	padding: 24px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--radius-xl);
+	corner-shape: squircle;
+	color: var(--color-text);
+	background-color: var(--color-surface);
 }
 
 .vx-modal::backdrop {
-  background: rgba(15, 23, 42, 0.45);
+	background: rgba(0, 0, 0, 0.4);
 }
 
 .vx-modal--dialog {
-  width: 480px;
-  max-width: 90%;
+	width: 480px;
+	max-width: 90%;
 }
 
 .vx-modal--sheet {
-  width: 100%;
-  max-width: none;
-  max-height: 85%;
-  position: fixed;
-  inset: auto 0 0;
-  margin: 0;
-  border-radius: 16px 16px 0 0;
+	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;
 }
 
 .vx-modal--fullscreen {
-  width: 100%;
-  max-width: none;
-  height: 100%;
-  max-height: none;
-  margin: 0;
-  border-radius: 0;
-}
-
+	width: 100%;
+	max-width: none;
+	height: 100%;
+	max-height: none;
+	margin: 0;
+	border-radius: 0;
+}
+
+/* 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 {
+	position: fixed;
+	inset: 0;
+	z-index: 1000;
+	display: flex;
+	align-items: stretch;
+	justify-content: stretch;
+}
+
+.vx-modalroute-shade {
+	position: absolute;
+	inset: 0;
+	border: 0;
+	padding: 0;
+	background: rgba(0, 0, 0, 0.4);
+	cursor: default;
+}
+
+.vx-modalroute-body {
+	position: relative;
+	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, 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 */
 .vx-spinner {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  box-sizing: border-box;
-  border: 2px solid currentColor;
-  border-right-color: transparent;
-  border-radius: 50%;
-  animation: vx-spinner-turn 0.8s linear infinite;
+	display: inline-block;
+	width: 1em;
+	height: 1em;
+	box-sizing: border-box;
+	border: 2px solid currentColor;
+	border-right-color: transparent;
+	border-radius: 50%;
+	animation: vx-spinner-turn 0.8s linear infinite;
 }
 
 @keyframes vx-spinner-turn {
-  to { transform: rotate(360deg); }
+	to {
+		transform: rotate(360deg);
+	}
+}
+/* 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;
 }
 
-.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; }
+/* 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);
+}
 
-/* utilities (hand-written subset for the harness; Tailwind later) */
+@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);
+	}
+}
 
-.flex-1 { flex-grow: 1; }
-.items-center { align-items: center; }
-.justify-center { justify-content: center; }
-.gap-4 { gap: 16px; }
+.vx-glass--clear {
+	background-color: color-mix(in srgb, var(--color-surface) 12%, transparent);
+	border-color: rgba(255, 255, 255, 0.15);
+}
 
-.text-xl { font-size: 20px; }
-.font-bold { font-weight: bold; }
+@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:end */
 
-.bg-primary { background-color: var(--color-primary); }
-.text-onprimary { color: var(--color-on-primary); }
-.bg-danger { background-color: #dc2626; }
-.shadow-2 { box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
+/* 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) */
 
-.btn {
-  padding-top: 12px;
-  padding-right: 20px;
-  padding-bottom: 12px;
-  padding-left: 20px;
-  border-radius: 8px;
+/* 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. 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;
+}
+.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;
+}
+
+.text-2xl {
+	font-size: 28px;
+}
+.text-xl {
+	font-size: 20px;
+}
+.text-lg {
+	font-size: 18px;
+}
+.text-sm {
+	font-size: 13px;
+}
+.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);
+}
+
+/* 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);
+	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);
+	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;
-  border-width: 1px;
-  border-color: #94a3b8;
-  border-radius: 6px;
-  font-size: 16px;
+	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-primary);
-  color: var(--color-on-primary);
-  padding: 4px 10px;
-  border-radius: 12px;
-  font-size: 13px;
+	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;
+	padding: 12px;
+	border-bottom-width: 1px;
+	border-bottom-color: var(--color-border);
 }
 
 .vx-list {
-  flex-grow: 1;
+	flex-grow: 1;
+}
+
+.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 {
+	position: fixed;
+	inset: 0;
+	z-index: 1100;
+	pointer-events: none;
+}
+
+.vx-sheet-backdrop {
+	position: absolute;
+	inset: 0;
+	background: rgba(0, 0, 0, 0.4);
+	pointer-events: auto;
+}
+
+.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);
+	pointer-events: auto;
 }
-
-.gap-2 { gap: 8px; }