/* =====================================================================
Vatar app kit · kit.css · v0.1 · 30 Oct 2026 (step 4, WORKFLOW.md)
Mobile components for the Vatar app, built ONLY from DS v1.4.0 tokens.
Load order:
../../../shared/design-system/fonts.css
../../../shared/design-system/tokens.css
../../../shared/design-system/components/button.css (buttons: used as is)
../../../shared/design-system/components/led.css + led.js (LED numerals)
../../../shared/design-system/components/patterns.css (dot grid)
../../../shared/design-system/components/highlight-chip.css
kit.css (this file)
Rules: dark by default, light via [data-theme="light"] on (1.9) · one filled (lilac) action per view · status = icon + label
· amber = the ONE live signal per screen · lilac fill is for actions, never
for surfaces · every composite shows 2+ of: LED numerals, dot grid,
chamfer, real Lagos Life capture.
Prefix: .va-* · App knobs: --app-* (all built from DS tokens)
===================================================================== */
:root, [data-theme] { /* re-declared on every theme root so dark islands inside a light page resolve dark (1.9) */
/* device */
--app-w: 390px;
--app-h: 844px;
--app-safe-top: 47px;
--app-safe-bottom: 34px;
--app-gutter: var(--space-4); /* 16 */
--app-topbar-h: 56px;
--app-tabbar-h: 68px; /* floating pill, 22 up from the bottom edge */
--app-row-h: 72px;
--app-tap: 44px; /* minimum target */
/* app type roles (fixed at 390; DS mobile values) */
--app-display: var(--font-size-mobile-h1); /* 40 */
--app-h1: var(--font-size-mobile-h2); /* 32 */
--app-h2: var(--font-size-mobile-h3); /* 24 */
--app-h3: var(--font-size-mobile-h4); /* 20 */
--app-body: var(--font-size-mobile-body); /* 16 */
--app-sm: var(--font-size-mobile-body-sm); /* 14 */
--app-meta: var(--font-size-mobile-label); /* 12: timestamps, tags only */
--app-hud: var(--font-size-mobile-hud); /* 11 caps */
/* app colour roles */
--app-bg: var(--color-bg-canvas);
--app-surface: var(--color-bg-surface);
--app-raised: var(--color-bg-surface-raised);
--app-ink: var(--color-bg-brand); /* lilac-950: "me" bubble, brand fields */
--app-line: var(--color-border-subtle);
--app-line-2: var(--color-border-default);
--app-accent: var(--color-text-accent); /* lilac-200 */
--app-live: var(--color-live-text); /* amber-400: the one live signal */
--app-streak: var(--color-brand-peach); /* streak flame (graphic, not status) */
--app-ring-world: var(--color-lilac-200); /* friend is inside a world */
--app-ring-online: var(--color-neutral-400); /* in the app, not in a world */
--app-chamfer: var(--button-chamfer-md); /* 10: HUD frames */
--app-chamfer-lg: var(--button-chamfer-hero); /* 16: player card */
/* dot grid: the DS pattern on the app canvas. pitch = 390 / 240 × 3 = 4.9px */
--app-dot-scale: 3;
/* LED sizes */
--app-led-xl: 64px;
--app-led-lg: 44px;
--app-led-md: 28px;
--app-led-sm: 16px;
}
/* ---------- base ---------- */
.va-app, .va-app * { box-sizing: border-box; }
.va-app {
font-family: var(--font-family-body);
font-size: var(--app-body);
line-height: var(--font-line-height-body);
color: var(--color-text-primary);
background: var(--app-bg);
-webkit-font-smoothing: antialiased;
}
.va-app img { display: block; max-width: 100%; }
.va-app button:not(.btn) { font: inherit; color: inherit; } /* step 5 fix: never override DS .btn type */
.va-app :focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
.va-app :focus:not(:focus-visible) { outline: none; }
.va-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* icons */
.va-i { width: 24px; height: 24px; flex: none; display: inline-block; vertical-align: middle; }
.va-i--16 { width: 16px; height: 16px; }
.va-i--20 { width: 20px; height: 20px; }
.va-i--32 { width: 32px; height: 32px; }
/* type roles */
.va-display { font: var(--font-weight-extrabold) var(--app-display)/1 var(--font-family-display); letter-spacing: var(--type-h1-letter-spacing); text-wrap: balance; margin: 0; }
.va-h1 { font: var(--font-weight-extrabold) var(--app-h1)/1.05 var(--font-family-display); letter-spacing: var(--type-h2-letter-spacing); text-wrap: balance; margin: 0; }
.va-h2 { font: var(--font-weight-bold) var(--app-h2)/1.1 var(--font-family-display); letter-spacing: var(--type-h3-letter-spacing); text-wrap: balance; margin: 0; }
.va-h3 { font: var(--font-weight-bold) var(--app-h3)/1.2 var(--font-family-display); letter-spacing: var(--type-h4-letter-spacing); margin: 0; }
.va-body { font-size: var(--app-body); line-height: var(--font-line-height-body); margin: 0; }
.va-sm { font-size: var(--app-sm); line-height: var(--font-line-height-body-sm); margin: 0; }
.va-meta { font-size: var(--app-meta); line-height: 1.35; color: var(--color-text-tertiary); font-feature-settings: var(--font-feature-tabular); }
.va-hud { font: var(--font-weight-semibold) var(--app-hud)/1.2 var(--font-family-body); letter-spacing: var(--type-hud-letter-spacing); text-transform: uppercase; font-feature-settings: var(--font-feature-case), var(--font-feature-tabular); color: var(--color-text-secondary); }
.va-2 { color: var(--color-text-secondary); }
.va-3 { color: var(--color-text-tertiary); }
.va-acc { color: var(--app-accent); }
.va-num { font-feature-settings: var(--font-feature-tabular); }
.va-strong { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
/* LED wrapper sizes (LED itself = DS .led) */
.va-led-xl { --led-size: var(--app-led-xl); }
.va-led-lg { --led-size: var(--app-led-lg); }
.va-led-md { --led-size: var(--app-led-md); }
.va-led-sm { --led-size: var(--app-led-sm); }
/* ₦ is not in the LED glyph set (DS gap): set in Inter Display at cap height, lilac */
.va-led-cur { font: var(--font-weight-extrabold) calc(var(--led-size, 1em) * 0.82)/1 var(--font-family-display); color: var(--app-accent); margin-right: 0.12em; }
.va-led-row { display: inline-flex; align-items: center; }
/* LED thousands comma (DS gap): the bold11 comma is a 2x2 block with a 1-dot tail and reads as a
period at app sizes ("4.820"). The kit splits the number and sets a comma that drops 2 rows below
the baseline on the same dot grid. Markup:
4820 */
.va-ledn { display: inline-flex; align-items: flex-start; }
.va-ledn > .led { --led-size: inherit; }
.va-ledc { flex: none; height: calc(var(--led-size, 1em) * 13 / 11); width: calc(var(--led-size, 1em) * 4 / 11); margin-bottom: calc(var(--led-size, 1em) * -2 / 11); overflow: visible; }
.va-ledc .on { fill: var(--led-on, var(--color-text-accent)); }
.va-ledc .off { fill: var(--led-off, var(--color-border-subtle)); }
/* size set on a wrapper (₦ + LED pairs) reaches the .led inside */
.va-led-xl > .led, .va-led-lg > .led, .va-led-md > .led, .va-led-sm > .led { --led-size: inherit; }
/* dot grid overlay (DS .vp-dots, night ground, lilac-deep dots). Put inside a positioned parent. */
.va-dots {
position: absolute; inset: 0; pointer-events: none; z-index: 0;
--vp-canvas-w: var(--app-w);
--vp-scale: var(--app-dot-scale);
background-color: transparent !important; /* the parent is the ground */
}
/* ---------- device frame (presentation) ---------- */
.va-device {
position: relative; width: var(--app-w); height: var(--app-h); flex: none;
overflow: hidden; background: var(--app-bg);
border-radius: 52px;
box-shadow: 0 0 0 1px var(--color-border-strong), 0 0 0 10px var(--color-neutral-900), 0 0 0 11px var(--color-border-default), var(--elevation-dialog);
isolation: isolate;
}
.va-device::after { /* home indicator */
content: ""; position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px;
border-radius: var(--radius-pill); background: var(--color-text-primary); z-index: var(--z-toast);
}
.va-screen { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--app-bg); }
.va-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; padding-bottom: calc(var(--app-tabbar-h) + var(--app-safe-bottom) + var(--space-6)); }
.va-scroll::-webkit-scrollbar { display: none; }
.va-pad { padding-inline: var(--app-gutter); }
.va-stack > * + * { margin-top: var(--space-6); }
/* section heading inside a screen: sentence case, not an eyebrow */
.va-sec { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: 0 var(--app-gutter); margin: var(--space-8) 0 var(--space-3); }
.va-sec h2 { font: var(--font-weight-bold) var(--app-h3)/1.2 var(--font-family-display); letter-spacing: var(--type-h4-letter-spacing); margin: 0; }
.va-sec a, .va-link { color: var(--app-accent); font-size: var(--app-sm); font-weight: var(--font-weight-semibold); text-decoration: none; min-height: var(--app-tap); display: inline-flex; align-items: center; }
/* =====================================================================
1 · SYSTEM
===================================================================== */
/* status bar (iOS) */
.va-status { height: var(--app-safe-top); flex: none; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 34px; font: var(--font-weight-semibold) 16px/1 var(--font-family-body); font-feature-settings: var(--font-feature-tabular); color: var(--color-text-primary); position: relative; z-index: var(--z-sticky); }
.va-status__r { display: flex; gap: 6px; align-items: center; }
.va-status svg { display: block; fill: currentColor; }
.va-status--over { position: absolute; top: 0; left: 0; right: 0; }
/* top bar: V tile + greeting · bell + you */
.va-topbar { height: var(--app-topbar-h); flex: none; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-2) 0 var(--app-gutter); position: relative; z-index: var(--z-sticky); }
.va-topbar__title { flex: 1; min-width: 0; }
.va-topbar__title .va-hud { display: block; margin-bottom: 2px; color: var(--color-text-tertiary); }
.va-topbar__title b { display: block; font: var(--font-weight-bold) var(--app-h3)/1.15 var(--font-family-display); letter-spacing: var(--type-h4-letter-spacing); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-topbar__acts { display: flex; align-items: center; gap: var(--space-1); }
.va-topbar--over { position: absolute; top: var(--app-safe-top); left: 0; right: 0; }
/* the V tile: approved C09 file (black V) on its lilac ground */
.va-mark { position: relative; width: var(--app-tap); height: var(--app-tap); flex: none; display: grid; place-items: center; }
.va-mark::before { content: ""; position: absolute; inset: 4px; background: var(--color-brand-lilac); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.va-mark img { position: relative; width: 24px; height: auto; }
.va-mark--lg { width: 72px; height: 72px; }
.va-mark--lg::before { inset: 0; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.va-mark--lg img { width: 48px; }
.va-mark:focus-visible { outline-offset: 0; }
/* icon tap target with optional badge */
.va-iconbtn { position: relative; width: var(--app-tap); height: var(--app-tap); display: grid; place-items: center; border: 0; background: none; color: var(--color-text-primary); cursor: pointer; padding: 0; border-radius: var(--radius-sm); }
.va-iconbtn:active { background: var(--color-action-ghost-bg-pressed); }
.va-iconbtn--scrim { background: var(--color-scrim-strong); border-radius: var(--radius-pill); }
/* count badge: lilac with ink, never red (red is danger) */
.va-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--app-badge-bg, var(--color-brand-lilac)); color: var(--app-badge-fg, var(--color-brand-black)); font: var(--font-weight-bold) 11px/1 var(--font-family-body); font-feature-settings: var(--font-feature-tabular); }
.va-badge--dot { min-width: 10px; width: 10px; height: 10px; padding: 0; }
.va-iconbtn .va-badge, .va-tab .va-badge { position: absolute; top: 6px; right: 5px; box-shadow: 0 0 0 2px var(--app-bg); }
.va-iconbtn .va-badge--dot { top: 10px; right: 10px; }
/* bottom tab bar · graphite pill seated in a recessed ring (nav direction C, picked 30 Oct; explore/nav.html).
5 tabs, a label on every tab. The active tab is a pressed well that springs between places (positioned by :has, no JS).
Signals stay small and carry state:
.va-tab__live in the Live tab amber stripe under the label, breathing, while something is live (the screen's one amber)
.va-tabbar.is-entering lilac progress line on the pill's bottom edge; set --va-progress 0–1
.va-tabbar.is-offline the same line, red
Floats 16 in from the sides and 22 up, on a floor scrim (::before) so it always sits on dark. */
.va-tabbar {
position: absolute; left: var(--app-gutter); right: var(--app-gutter); bottom: 22px; z-index: var(--z-header);
height: var(--app-tabbar-h); padding: 5px; -webkit-tap-highlight-color: transparent;
}
.va-tabbar::before { /* floor scrim */
content: ""; position: absolute; z-index: -1; pointer-events: none;
left: calc(-1 * var(--app-gutter)); right: calc(-1 * var(--app-gutter)); bottom: -22px; height: 150px;
background: linear-gradient(180deg, var(--color-alpha-black-0) 0%, var(--color-alpha-black-72) 55%, var(--color-alpha-black-88) 100%);
}
.va-tabbar::after { /* the recessed ring */
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 34px; background: var(--color-neutral-1000);
box-shadow: inset 0 2px 5px var(--color-alpha-black-88), inset 0 -1px 0 var(--color-alpha-white-8), 0 0 0 1px var(--color-alpha-white-8), 0 14px 30px var(--color-alpha-black-72);
}
.va-tabbar--static { position: relative; left: auto; right: auto; bottom: auto; isolation: isolate; }
.va-tabbar--static::before { display: none; }
.va-tabbar__body {
position: relative; height: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-radius: 29px;
background: linear-gradient(180deg, var(--color-neutral-800) 0%, var(--color-neutral-900) 100%);
box-shadow: inset 0 1px 0 var(--color-alpha-white-16), inset 0 -1px 0 var(--color-alpha-black-45);
}
.va-tabbar__body::after { /* entering / offline line on the bottom edge, in the ring gap */
content: ""; position: absolute; left: 28px; right: 28px; bottom: -4px; height: 2px; pointer-events: none; opacity: 0;
background: linear-gradient(var(--color-lilac-200), var(--color-lilac-200)) 0 0 / calc(var(--va-progress, .6) * 100%) 100% no-repeat, var(--color-alpha-white-8);
transition: opacity var(--motion-duration-base) var(--motion-easing-standard);
}
.va-tabbar.is-entering .va-tabbar__body::after { opacity: 1; }
.va-tabbar.is-offline .va-tabbar__body::after { opacity: 1; background: var(--color-red-400); }
.va-tabbar__well { position: absolute; top: 0; bottom: 0; left: 0; width: 20%; transform: translateX(calc(var(--i, 0) * 100%)); transition: transform 560ms var(--motion-easing-spring), opacity var(--motion-duration-base) var(--motion-easing-standard); pointer-events: none; }
.va-tabbar__well::before { content: ""; position: absolute; inset: 4px; border-radius: 22px; background: linear-gradient(180deg, var(--color-neutral-1000) 0%, var(--color-neutral-900) 100%); box-shadow: inset 0 2px 5px var(--color-alpha-black-88), inset 0 0 0 1px var(--color-alpha-white-4), 0 1px 0 var(--color-alpha-white-8); }
.va-tabbar__body:has(> .va-tab:nth-of-type(2)[aria-current="page"]) > .va-tabbar__well { --i: 1; }
.va-tabbar__body:has(> .va-tab:nth-of-type(3)[aria-current="page"]) > .va-tabbar__well { --i: 2; }
.va-tabbar__body:has(> .va-tab:nth-of-type(4)[aria-current="page"]) > .va-tabbar__well { --i: 3; }
.va-tabbar__body:has(> .va-tab:nth-of-type(5)[aria-current="page"]) > .va-tabbar__well { --i: 4; }
.va-tabbar__body:not(:has(> .va-tab[aria-current="page"])) > .va-tabbar__well { opacity: 0; }
.va-tab { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: var(--app-tap); border-radius: 22px; color: var(--color-text-tertiary); font: var(--font-weight-semibold) 11px/1 var(--font-family-body); letter-spacing: 0.01em; cursor: pointer; text-decoration: none; transition: color var(--motion-duration-base) var(--motion-easing-standard); }
.va-tab + .va-tab::before { /* divider, hidden next to the well */
content: ""; position: absolute; left: 0; top: 19px; bottom: 19px; width: 1px; background: var(--color-alpha-white-8); transition: opacity var(--motion-duration-base) var(--motion-easing-standard);
}
.va-tab[aria-current="page"]::before, .va-tab[aria-current="page"] + .va-tab::before { opacity: 0; }
.va-tab > .va-i, .va-tab > span:not(.va-badge, .va-tab__live) { transition: transform 420ms var(--motion-easing-spring); }
.va-tab .va-i { width: 22px; height: 22px; }
.va-tab[aria-current="page"] { color: var(--app-accent); }
.va-tab[aria-current="page"] > .va-i, .va-tab[aria-current="page"] > span:not(.va-badge, .va-tab__live),
.va-tab:active > .va-i, .va-tab:active > span:not(.va-badge, .va-tab__live), .va-tab.is-down > .va-i, .va-tab.is-down > span:not(.va-badge, .va-tab__live) { transform: translateY(1px); }
.va-tab:active:not([aria-current]), .va-tab.is-down:not([aria-current]) { color: var(--color-neutral-300); }
.va-tab:focus-visible { outline-offset: -2px; }
.va-tab .va-badge { top: 7px; right: calc(50% - 23px); box-shadow: 0 0 0 2px var(--color-neutral-900); }
.va-tab .va-badge--dot { top: 10px; right: calc(50% - 16px); }
.va-tab__live { position: absolute; left: 50%; bottom: 5px; width: 14px; height: 2px; margin-left: -7px; background: var(--color-live-dot); clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%); animation: va-tab-breathe 1.8s var(--motion-easing-in-out) infinite; }
@keyframes va-tab-breathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
/* bottom sheet */
.va-sheet-wrap { position: absolute; inset: 0; z-index: var(--z-modal); display: flex; align-items: flex-end; background: var(--color-overlay-backdrop); }
.va-sheet { position: relative; width: 100%; background: var(--app-surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: var(--space-2) var(--app-gutter) calc(var(--app-safe-bottom) + var(--space-4)); box-shadow: var(--elevation-dialog); border-top: var(--border-width-hairline) solid var(--app-line-2); }
.va-sheet--inline { border-radius: var(--radius-lg); padding-bottom: var(--space-6); }
.va-sheet__grab { width: 36px; height: 5px; border-radius: var(--radius-pill); background: var(--color-neutral-600); margin: 0 auto var(--space-4); }
.va-sheet__head { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-4); }
.va-sheet__head > div { flex: 1; }
.va-sheet__head p { margin: var(--space-1) 0 0; color: var(--color-text-secondary); font-size: var(--app-sm); }
.va-sheet__acts { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
/* full-width button helper (DS .btn kept intact; face stretches) */
.va-block { display: flex; width: 100%; }
.va-block .btn__face { flex: 1; }
.va-row-btns { display: flex; gap: var(--space-3); align-items: flex-start; }
.va-row-btns > .btn { flex: 1; }
.va-row-btns > .btn .btn__face { flex: 1; }
/* destructive: DS has no danger button (gap) → secondary plate with a danger stroke + label */
.btn--secondary.va-btn--danger { --_face: var(--color-status-danger-fg); --_face-hover: var(--color-status-danger-fg); --_face-pressed: var(--color-status-danger-fg); --_label: var(--color-status-danger-fg); }
.btn--secondary.va-btn--danger:disabled { --_face: var(--button-secondary-border-disabled); --_label: var(--button-secondary-text-disabled); }
/* toast */
.va-toast { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); background: var(--app-raised); border: var(--border-width-hairline) solid var(--app-line-2); border-radius: var(--radius-md); box-shadow: var(--elevation-overlay); font-size: var(--app-sm); line-height: 1.35; }
.va-toast__ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--app-surface); color: var(--color-text-secondary); }
.va-toast__msg { flex: 1; }
.va-toast__msg b { display: block; font-weight: var(--font-weight-semibold); }
.va-toast__msg span { color: var(--color-text-secondary); }
.va-toast--success .va-toast__ico { background: var(--color-status-success-bg); color: var(--color-status-success-fg); }
.va-toast--danger .va-toast__ico { background: var(--color-status-danger-bg); color: var(--color-status-danger-fg); }
.va-toast__act { border: 0; background: none; color: var(--app-accent); font-weight: var(--font-weight-semibold); min-height: var(--app-tap); padding: 0 var(--space-3); cursor: pointer; }
.va-toast-host { position: absolute; left: var(--space-3); right: var(--space-3); top: calc(var(--app-safe-top) + var(--space-2)); z-index: var(--z-toast); }
.va-toast.is-in { animation: va-toast-in var(--motion-duration-slow) var(--motion-easing-spring) both; }
@keyframes va-toast-in { from { opacity: 0; transform: translateY(calc(var(--motion-distance-rise) * -1)); } }
/* segmented filter: text tabs + 2px lilac underline (DS nav indicator) */
.va-seg { display: flex; gap: var(--space-5); padding: 0 var(--app-gutter); border-bottom: var(--border-width-hairline) solid var(--app-line); }
.va-seg button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--app-tap); min-width: var(--app-tap); padding: 0; border: 0; background: none; color: var(--color-text-tertiary); font: var(--font-weight-semibold) var(--app-sm)/1 var(--font-family-body); cursor: pointer; }
.va-seg button[aria-selected="true"] { color: var(--color-text-primary); }
.va-seg button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--app-accent); }
.va-seg__n { font-feature-settings: var(--font-feature-tabular); color: var(--color-text-tertiary); font-weight: var(--font-weight-medium); }
.va-seg button[aria-selected="true"] .va-seg__n { color: var(--app-accent); }
/* =====================================================================
3 · INPUTS
===================================================================== */
.va-field { display: grid; gap: var(--space-2); }
.va-field > label, .va-label { font-size: var(--app-sm); font-weight: var(--font-weight-semibold); color: var(--input-label); }
.va-input { display: flex; align-items: center; gap: var(--space-2); height: var(--input-height); padding: 0 var(--space-2) 0 var(--input-padding-x); background: var(--input-bg); border: var(--border-width-hairline) solid var(--input-border); border-radius: var(--input-radius); color: var(--input-text); transition: border-color var(--motion-duration-fast) var(--motion-easing-standard), box-shadow var(--motion-duration-fast) var(--motion-easing-standard); }
.va-input:focus-within, .va-input.is-focus { border-color: var(--input-border-focus); box-shadow: inset 0 0 0 1px var(--input-border-focus); }
.va-input input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: inherit; font: var(--font-weight-medium) var(--app-body)/1 var(--font-family-body); font-feature-settings: var(--font-feature-tabular); }
.va-input input::placeholder { color: var(--input-placeholder); font-weight: var(--font-weight-regular); }
.va-input .va-i { color: var(--color-text-tertiary); }
.va-input.is-error { border-color: var(--input-border-error); box-shadow: inset 0 0 0 1px var(--input-border-error); }
.va-input.is-ok { border-color: var(--color-status-success-fg); }
.va-input__pre { color: var(--app-accent); font-weight: var(--font-weight-bold); }
.va-help { display: flex; gap: 6px; align-items: flex-start; font-size: var(--app-sm); line-height: 1.4; color: var(--input-help); margin: 0; }
.va-help .va-i { width: 18px; height: 18px; margin-top: 1px; }
.va-help--error { color: var(--color-status-danger-fg); }
.va-help--ok { color: var(--color-status-success-fg); }
/* phone: country segment */
.va-cc { display: inline-flex; align-items: center; gap: 6px; height: 100%; padding-right: var(--space-3); margin-right: var(--space-1); border: 0; border-right: var(--border-width-hairline) solid var(--app-line-2); background: none; color: var(--color-text-primary); font: var(--font-weight-semibold) var(--app-body)/1 var(--font-family-body); font-feature-settings: var(--font-feature-tabular); cursor: pointer; }
.va-cc small { font-size: var(--app-meta); color: var(--color-text-tertiary); font-weight: var(--font-weight-semibold); letter-spacing: 0.04em; }
.va-cc .va-i { width: 16px; height: 16px; }
/* search */
.va-search { height: var(--app-tap); border-color: transparent; background: var(--app-surface); }
.va-search .va-iconbtn { margin-right: calc(var(--space-2) * -1); }
.va-search input { height: var(--app-tap); margin: -1px 0; } /* fix 11: the field's full 44px is the input, across its transparent 1px border */
/* OTP: six boxes */
.va-otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-2); }
.va-otp input { width: 100%; height: 60px; text-align: center; border: var(--border-width-hairline) solid var(--input-border); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--color-text-primary); font: var(--font-weight-bold) 26px/1 var(--font-family-display); font-feature-settings: var(--font-feature-tabular); caret-color: var(--app-accent); outline: 0; padding: 0; transition: border-color var(--motion-duration-fast) var(--motion-easing-standard), background-color var(--motion-duration-fast) var(--motion-easing-standard); }
.va-otp input:focus, .va-otp input.is-focus { border-color: var(--input-border-focus); box-shadow: inset 0 0 0 1px var(--input-border-focus); }
.va-otp input.is-filled { border-color: var(--color-border-strong); background: var(--app-raised); }
.va-otp.is-wrong input { border-color: var(--input-border-error); color: var(--color-status-danger-fg); background: var(--color-status-danger-bg); }
.va-otp.is-wrong { animation: va-shake 360ms var(--motion-easing-standard); }
.va-otp.is-expired input { color: var(--color-text-disabled); border-color: var(--app-line-2); background: var(--app-bg); }
.va-otp.is-ok input { border-color: var(--color-status-success-fg); color: var(--color-status-success-fg); background: var(--color-status-success-bg); }
@keyframes va-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.va-otp-foot { display: flex; justify-content: space-between; align-items: center; min-height: var(--app-tap); font-size: var(--app-sm); }
.va-resend { border: 0; background: none; padding: 0; color: var(--color-text-tertiary); font: inherit; font-feature-settings: var(--font-feature-tabular); min-height: var(--app-tap); }
.va-resend:enabled { color: var(--app-accent); font-weight: var(--font-weight-semibold); cursor: pointer; }
/* handle check */
.va-handle-state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--app-sm); white-space: nowrap; padding-right: var(--space-2); }
.va-handle-state.is-checking { color: var(--color-text-tertiary); }
.va-handle-state.is-ok { color: var(--color-status-success-fg); }
.va-handle-state.is-taken { color: var(--color-status-danger-fg); }
.va-spin { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--radius-pill); animation: btn-spin var(--motion-duration-entrance) var(--motion-easing-linear) infinite; }
.va-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.va-chips[hidden], .va-yourein[hidden] { display: none; }
.va-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--space-3); border: var(--border-width-hairline) solid var(--color-border-strong); border-radius: var(--radius-sm); background: none; color: var(--color-text-primary); font: var(--font-weight-medium) var(--app-sm)/1 var(--font-family-body); cursor: pointer; position: relative; }
.va-chip::after { content: ""; position: absolute; inset: -4px 0; } /* 44px target */
.va-chip:hover { border-color: var(--color-border-control); }
.va-chip[aria-pressed="true"] { border-color: var(--app-accent); color: var(--app-accent); }
/* birthday picker: three scroll-snap wheels */
.va-wheel { position: relative; display: grid; grid-template-columns: 1fr 1.6fr 1.2fr; height: 220px; background: var(--app-surface); border-radius: var(--radius-md); overflow: hidden; }
.va-wheel::before { content: ""; position: absolute; left: var(--space-2); right: var(--space-2); top: 88px; height: 44px; border-radius: var(--radius-sm); background: var(--app-raised); pointer-events: none; }
.va-wheel__col { position: relative; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; padding: 88px 0; -webkit-mask: linear-gradient(transparent, var(--color-brand-black) 35%, var(--color-brand-black) 65%, transparent); mask: linear-gradient(transparent, var(--color-brand-black) 35%, var(--color-brand-black) 65%, transparent); }
.va-wheel__col::-webkit-scrollbar { display: none; }
.va-wheel__col div { height: 44px; display: grid; place-items: center; scroll-snap-align: center; font: var(--font-weight-medium) 20px/1 var(--font-family-body); font-feature-settings: var(--font-feature-tabular); color: var(--color-text-tertiary); }
.va-wheel__col div.is-sel { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
/* =====================================================================
4 · BIG NUMBER (pattern 1)
===================================================================== */
.va-big { position: relative; padding: var(--space-5) var(--space-4) var(--space-4); background: var(--app-bg); border: var(--border-width-hairline) solid var(--app-line); border-radius: var(--radius-md); overflow: hidden; }
.va-big > :not(.va-dots) { position: relative; z-index: 1; }
.va-big__label { display: flex; align-items: center; gap: 6px; }
.va-big__label .va-i { width: 16px; height: 16px; color: var(--app-accent); }
.va-big__num { display: flex; align-items: flex-end; gap: var(--space-2); margin: var(--space-3) 0 var(--space-2); }
.va-big__unit { font: var(--font-weight-bold) var(--app-h3)/1 var(--font-family-display); color: var(--color-text-secondary); padding-bottom: 4px; }
.va-big__sub { font-size: var(--app-sm); color: var(--color-text-secondary); margin: 0; }
.va-big__sub b { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.va-big__acts { display: flex; gap: var(--space-3); margin-top: var(--space-4); align-items: flex-start; }
.va-big--flush { border: 0; border-radius: 0; padding-inline: var(--app-gutter); }
.va-up { color: var(--color-status-success-fg); font-weight: var(--font-weight-semibold); }
/* XP bar: segmented, LED-like cells */
.va-xp { display: grid; grid-template-columns: repeat(20, 1fr); gap: 2px; height: 8px; }
.va-xp i { background: var(--color-border-default); }
.va-xp i.on { background: var(--app-accent); }
.va-xp-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--space-2); font-size: var(--app-meta); color: var(--color-text-tertiary); font-feature-settings: var(--font-feature-tabular); }
.va-lv { display: inline-flex; align-items: center; gap: 6px; }
/* =====================================================================
5 · ONE LIT ACTION (pattern 2)
===================================================================== */
/* Daily check-in · LED streak track (Direction A, picked 30 Oct). One LED board: streak, today's reward, 7 segments. */
.va-ledci { position: relative; }
.va-ledci__board { padding: var(--border-width-hairline); background: var(--color-alpha-white-16); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.va-ledci__in { --led-on: var(--color-brand-lilac); --led-off: var(--color-alpha-white-8); background: var(--color-brand-black); padding: var(--space-4) var(--space-4) var(--space-3); clip-path: polygon(13.6px 0, 100% 0, 100% calc(100% - 13.6px), calc(100% - 13.6px) 100%, 0 100%, 0 13.6px); }
.va-ledci__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-3); }
.va-ledci__streak { display: flex; align-items: flex-start; gap: var(--space-2); }
.va-ledci__streak > .va-i { width: 30px; height: 30px; color: var(--app-streak); margin-top: 6px; }
.va-ledci__n { --led-size: 48px; display: block; transform-origin: 0 50%; }
.va-ledci__cap { --led-size: 9px; display: block; margin-top: 6px; }
.va-ledci__today { text-align: right; }
.va-ledci__today .va-ledci__cap { margin: 0 0 8px; }
.va-ledci__plus { --led-size: 30px; display: block; }
.va-ledci__bar { display: block; width: 100%; height: auto; overflow: visible; margin-bottom: var(--space-2); }
.va-ledci__bar circle { fill: var(--led-off); }
.va-ledci__bar .on, .va-ledci__bar .t { fill: var(--led-on); }
.va-ledci__bar .is-jack .on { fill: var(--color-brand-lilac-deep); }
.va-ledci__scan { fill: var(--color-brand-white); opacity: 0; }
.va-ledci__lbl { display: grid; grid-template-columns: repeat(7, 1fr); column-gap: calc(100% * 1.4 / 43.4); }
.va-ledci__lbl > span { display: grid; justify-items: center; gap: 4px; }
.va-ledci__lbl .led { --led-size: 9px; }
.va-ledci__lbl i { font: normal var(--font-weight-semibold) 10px/1 var(--font-family-body); color: var(--color-text-tertiary); white-space: nowrap; }
.va-ledci__lbl .is-today i { color: var(--app-accent); }
.va-ledci__lbl .is-today.is-got i { color: var(--color-status-success-fg); }
.va-ledci__lbl .is-off .led { --led-on: var(--color-text-tertiary); }
.va-ledci > .btn { margin-top: var(--space-3); }
.va-ledci-fly { position: absolute; z-index: var(--z-toast); pointer-events: none; --led-size: 28px; --led-on: var(--color-brand-lilac); }
@media (prefers-reduced-motion: no-preference) {
.va-ledci__bar .t { animation: va-ledci-blink 1.2s steps(2, jump-none) infinite; animation-delay: calc(var(--c, 0) * 80ms); }
}
@keyframes va-ledci-blink { from { opacity: .2; } to { opacity: 1; } }
@keyframes va-pop { 40% { transform: scale(1.08); } }
.va-soon { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border: var(--border-width-hairline) dashed var(--app-line-2); border-radius: var(--radius-md); }
.va-soon__ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--app-surface); color: var(--color-text-tertiary); }
.va-soon__txt { flex: 1; min-width: 0; }
.va-soon__txt b { display: block; font-weight: var(--font-weight-semibold); }
.va-soon__txt span { font-size: var(--app-sm); color: var(--color-text-secondary); }
.va-soon.is-set .va-soon__ico { color: var(--color-status-success-fg); background: var(--color-status-success-bg); }
/* =====================================================================
6 · PRESENCE (pattern 3)
The person = real photo · the in-world self = Vatar avatar (badge)
===================================================================== */
.va-av { --s: 48px; position: relative; display: inline-block; vertical-align: middle; width: var(--s); height: var(--s); flex: none; }
.va-av > img:first-child { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-pill); background: var(--app-raised); }
.va-av--24 { --s: 24px; } .va-av--32 { --s: 32px; } .va-av--40 { --s: 40px; } .va-av--56 { --s: 56px; } .va-av--64 { --s: 64px; } .va-av--88 { --s: 88px; }
/* ring = presence. lilac = inside a world (joinable) · grey = in the app · none = away */
.va-av.is-world > img:first-child { box-shadow: 0 0 0 2px var(--app-bg), 0 0 0 4px var(--app-ring-world); }
.va-av.is-online > img:first-child { box-shadow: 0 0 0 2px var(--app-bg), 0 0 0 4px var(--app-ring-online); }
.va-av.is-away > img:first-child { filter: saturate(0.6); opacity: 0.85; }
/* in-world badge: the friend's Vatar (crop of their Lagos Life character) */
.va-av__self { position: absolute; right: -4px; bottom: -4px; width: calc(var(--s) * 0.46); height: calc(var(--s) * 0.46); min-width: 18px; min-height: 18px; border-radius: var(--radius-pill); background: var(--color-lilac-900); box-shadow: 0 0 0 2px var(--app-bg); overflow: hidden; }
.va-av__self img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.va-friend { display: flex; align-items: center; gap: var(--space-3); min-height: var(--app-row-h); padding: var(--space-2) var(--app-gutter); }
.va-friend__txt { flex: 1; min-width: 0; }
.va-friend__txt b { display: block; font-weight: var(--font-weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-where { display: flex; align-items: center; gap: 4px; font-size: var(--app-sm); color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-where .va-i { width: 14px; height: 14px; color: var(--app-accent); }
.va-where em { font-style: normal; color: var(--color-text-primary); }
.va-rail { display: flex; gap: var(--space-4); overflow-x: auto; padding: var(--space-1) var(--app-gutter) var(--space-2); scroll-snap-type: x proximity; scrollbar-width: none; }
.va-rail::-webkit-scrollbar { display: none; }
.va-rail > * { scroll-snap-align: start; flex: none; }
.va-railfriend { width: 68px; display: grid; justify-items: center; gap: 6px; text-align: center; text-decoration: none; color: inherit; padding-top: 4px; }
.va-railfriend b { font-size: var(--app-meta); font-weight: var(--font-weight-semibold); line-height: 1.2; color: var(--color-text-primary); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-railfriend span { font-size: 11px; line-height: 1.2; color: var(--color-text-tertiary); margin-top: -4px; white-space: nowrap; }
.va-railfriend--add .va-railadd { width: 56px; height: 56px; display: grid; place-items: center; border: var(--border-width-hairline) dashed var(--color-border-control); border-radius: var(--radius-pill); color: var(--color-text-secondary); }
.va-crew { display: flex; align-items: center; gap: var(--space-2); }
.va-crew__stack { display: flex; }
.va-crew__stack > * { margin-left: -8px; }
.va-crew__stack > :first-child { margin-left: 0; }
.va-crew__stack .va-av > img:first-child { box-shadow: 0 0 0 2px var(--_ring, var(--app-bg)); }
.va-crew__more { width: var(--s, 28px); height: var(--s, 28px); border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--app-raised); box-shadow: 0 0 0 2px var(--_ring, var(--app-bg)); font: var(--font-weight-bold) 11px/1 var(--font-family-body); font-feature-settings: var(--font-feature-tabular); margin-left: -8px; position: relative; }
.va-crew__txt { font-size: var(--app-sm); color: var(--color-text-secondary); }
.va-crew__txt b { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
/* =====================================================================
7 · PLAYER CARD (pattern 4) · HUD readout on a chamfered frame
===================================================================== */
.va-card-scene { perspective: 1200px; }
.va-pcard { position: relative; width: 100%; max-width: 358px; transform-style: preserve-3d; transition: transform 900ms var(--motion-easing-in-out); }
.va-pcard.is-back { transform: rotateY(180deg); }
.va-pcard__face, .va-pcard__back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/* the frame: 1px lilac-deep stroke around a black plate, both chamfered */
.va-pcard__face { position: relative; padding: 1px; background: var(--color-lilac-800); clip-path: polygon(var(--app-chamfer-lg) 0, 100% 0, 100% calc(100% - var(--app-chamfer-lg)), calc(100% - var(--app-chamfer-lg)) 100%, 0 100%, 0 var(--app-chamfer-lg)); }
.va-pcard__in { position: relative; overflow: hidden; background: var(--app-bg); clip-path: polygon(calc(var(--app-chamfer-lg) - 0.6px) 0, 100% 0, 100% calc(100% - var(--app-chamfer-lg) + 0.6px), calc(100% - var(--app-chamfer-lg) + 0.6px) 100%, 0 100%, 0 calc(var(--app-chamfer-lg) - 0.6px)); }
.va-pcard__in > :not(.va-dots) { position: relative; z-index: 1; }
.va-pcard__top { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) var(--space-4) 0 calc(var(--space-4) + 6px); }
.va-pcard__stage { position: relative; height: 292px; display: grid; place-items: end center; margin-top: -8px; }
.va-pcard__stage::before { /* stage floor: a flat lit disc, not a glow */ content: ""; position: absolute; bottom: 10px; left: 50%; width: 150px; height: 30px; margin-left: -75px; border-radius: 50%; background: var(--color-lilac-950); box-shadow: inset 0 0 0 1px var(--color-lilac-800); }
.va-pcard__stage img { position: relative; height: 282px; width: auto; }
.va-pcard__id { padding: var(--space-3) var(--space-4) 0; }
.va-pcard__id h3 { font: var(--font-weight-extrabold) var(--app-h2)/1.05 var(--font-family-display); letter-spacing: var(--type-h3-letter-spacing); margin: 0; }
.va-pcard__handle { color: var(--app-accent); font-weight: var(--font-weight-semibold); font-size: var(--app-sm); }
.va-pcard__lv { padding: var(--space-4) var(--space-4) 0; }
.va-pcard__lvrow { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); }
.va-pcard__stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: var(--space-4) var(--space-4) 0; border-top: var(--border-width-hairline) solid var(--app-line-2); }
.va-stat { padding: var(--space-3) 0 var(--space-1); display: grid; gap: var(--space-2); }
.va-stat + .va-stat { padding-left: var(--space-3); border-left: var(--border-width-hairline) solid var(--app-line); }
.va-pcard__since { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: var(--space-3) var(--space-4) 0; padding: var(--space-3) 0 var(--space-4); border-top: var(--border-width-hairline) solid var(--app-line); }
/* back: the brand side (V on its lilac ground, C09) */
.va-pcard__back { position: absolute; inset: 0; transform: rotateY(180deg); display: grid; place-items: center; background: var(--color-brand-lilac); clip-path: polygon(var(--app-chamfer-lg) 0, 100% 0, 100% calc(100% - var(--app-chamfer-lg)), calc(100% - var(--app-chamfer-lg)) 100%, 0 100%, 0 var(--app-chamfer-lg)); }
.va-pcard__back img { width: 50%; }
.va-pcard__back .va-dots { --vp-c1: var(--pattern-dots-on-lilac-loud); }
/* reveal: card arrives from the back, lands with a small settle */
.va-pcard.is-reveal { animation: va-flip 1100ms var(--motion-easing-in-out) both; }
@keyframes va-flip { 0% { transform: rotateY(180deg) translateY(var(--motion-distance-rise)) scale(0.92); } 70% { transform: rotateY(-6deg) scale(1.01); } 100% { transform: rotateY(0) scale(1); } }
/* compact player card (chat header / profile head) */
.va-pmini { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--app-surface); border-radius: var(--radius-md); position: relative; overflow: hidden; }
.va-pmini > :not(.va-dots) { position: relative; z-index: 1; }
.va-pmini__self { width: 56px; height: 56px; flex: none; background: var(--color-lilac-950); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); overflow: hidden; }
.va-pmini__self img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.va-pmini__txt { flex: 1; min-width: 0; }
.va-pmini__txt b { display: block; font: var(--font-weight-bold) var(--app-body)/1.2 var(--font-family-display); }
.va-pmini__txt .va-xp { margin-top: var(--space-2); height: 6px; }
/* =====================================================================
8 · WORLD (pattern 5) · real captures, type over art
===================================================================== */
.va-cap { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.va-fade { position: absolute; inset: 0; background: linear-gradient(var(--gradient-scrim-strong-fade-angle), var(--color-scrim-strong-fade)); }
.va-fade--top { position: absolute; left: 0; right: 0; top: 0; height: 140px; background: linear-gradient(180deg, var(--color-scrim-strong), var(--color-alpha-black-0)); }
.va-fade--hero { background: linear-gradient(var(--gradient-scrim-strong-fade-angle), var(--color-scrim-solid) 0%, var(--color-scrim-solid) 40%, var(--color-scrim-strong) 62%, var(--color-alpha-black-0) 88%); }
.va-fade--deep { background: linear-gradient(var(--gradient-scrim-strong-fade-angle), var(--color-scrim-solid) 0%, var(--color-scrim-strong) 45%, var(--color-alpha-black-0) 80%); }
/* live pill (DS badge.live): amber, the one live signal on a screen */
.va-live { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: var(--border-width-hairline) solid var(--badge-live-border); border-radius: var(--radius-pill); background: var(--color-scrim-strong); color: var(--badge-live-text); font: var(--font-weight-semibold) var(--app-hud)/1 var(--font-family-body); letter-spacing: var(--type-hud-letter-spacing); text-transform: uppercase; font-feature-settings: var(--font-feature-tabular); }
.va-live::before { content: ""; width: var(--badge-live-dot-size); height: var(--badge-live-dot-size); border-radius: var(--radius-pill); background: var(--badge-live-dot); animation: va-pulse 2s var(--motion-easing-standard) infinite; }
@keyframes va-pulse { 50% { opacity: 0.35; } }
/* a live count that is NOT the screen's one amber: white HUD + hollow dot */
.va-livecount { display: inline-flex; align-items: center; gap: 6px; font: var(--font-weight-semibold) var(--app-hud)/1 var(--font-family-body); letter-spacing: var(--type-hud-letter-spacing); text-transform: uppercase; font-feature-settings: var(--font-feature-tabular); color: var(--color-text-primary); }
.va-livecount::before { content: ""; width: 7px; height: 7px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1.5px currentColor; }
.va-hero { position: relative; height: 468px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--app-gutter) var(--space-5); }
.va-hero > :where(:not(.va-cap, .va-fade, .va-fade--top, .va-status--over, .va-topbar--over)) { position: relative; }
.va-hero__top { position: absolute !important; top: var(--space-3); left: var(--app-gutter); right: var(--app-gutter); display: flex; justify-content: space-between; align-items: center; }
.va-hero__kicker { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); color: var(--color-text-secondary); font-size: var(--app-sm); }
.va-hero__kicker b { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.va-hero h1 { margin-bottom: var(--space-1); }
.va-hero__now { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 var(--space-4); padding: var(--space-3) 0; border-top: var(--border-width-hairline) solid var(--color-alpha-white-16); border-bottom: var(--border-width-hairline) solid var(--color-alpha-white-16); font-size: var(--app-sm); }
.va-hero__now .va-i { color: var(--app-accent); width: 20px; height: 20px; }
.va-hero__now span { flex: 1; }
.va-hero__now em { font-style: normal; color: var(--color-text-secondary); font-feature-settings: var(--font-feature-tabular); }
.va-hero__foot { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.va-hero--inset { margin: 0 var(--space-2); border-radius: var(--radius-lg); }
.va-tile { position: relative; flex: none; width: 168px; height: 208px; border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-3); text-decoration: none; color: inherit; background: var(--app-surface); }
.va-tile > :not(.va-cap):not(.va-fade):not(.va-dots) { position: relative; z-index: 1; }
.va-tile b { font: var(--font-weight-bold) var(--app-body)/1.2 var(--font-family-display); }
.va-tile small { display: block; margin-top: 4px; }
.va-tile:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
.va-tile--soon { background: var(--app-bg); border: var(--border-width-hairline) solid var(--color-lilac-900); justify-content: space-between; }
.va-tile--soon .va-led { margin-top: auto; }
/* coming-soon world: black canvas + the count (drama, not a grey card) */
.va-next { position: relative; padding: var(--space-6) var(--space-4) var(--space-4); background: var(--app-bg); border: var(--border-width-hairline) solid var(--color-lilac-900); border-radius: var(--radius-md); overflow: hidden; }
.va-next > :not(.va-dots) { position: relative; z-index: 1; }
.va-next__title { font: var(--font-weight-extrabold) var(--app-display)/1 var(--font-family-display); letter-spacing: var(--type-h1-letter-spacing); margin: var(--space-3) 0 var(--space-5); background: linear-gradient(var(--gradient-dawn-angle, 180deg), var(--color-gradient-dawn)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (forced-colors: active) { .va-next__title { color: CanvasText; background: none; } }
.va-next__count { display: flex; align-items: flex-end; gap: var(--space-2); }
/* world page header */
.va-wp { position: relative; height: 560px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--app-gutter) var(--space-5); }
.va-wp > :where(:not(.va-cap, .va-fade, .va-fade--top)) { position: relative; }
.va-wp__bar { position: absolute !important; top: var(--app-safe-top); left: var(--space-2); right: var(--space-2); display: flex; justify-content: space-between; }
.va-wp__tags { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-3); }
.va-wp__line { margin: var(--space-2) 0 var(--space-4); color: var(--color-text-secondary); }
.va-areas { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); }
/* jump back in: progress in this world */
.va-progress { display: grid; grid-template-columns: repeat(4, 1fr); border: var(--border-width-hairline) solid var(--app-line-2); border-radius: var(--radius-md); }
.va-progress > div { padding: var(--space-3) var(--space-3); display: grid; gap: 6px; }
.va-progress > div + div { border-left: var(--border-width-hairline) solid var(--app-line); }
.va-progress b { font: var(--font-weight-bold) var(--app-body)/1 var(--font-family-display); font-feature-settings: var(--font-feature-tabular); white-space: nowrap; }
/* what you can do: verb grid with captures */
.va-verbs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.va-verb { position: relative; height: 124px; border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-3); text-decoration: none; color: inherit; }
.va-verb > :not(.va-cap):not(.va-fade) { position: relative; }
.va-verb b { font: var(--font-weight-extrabold) var(--app-h3)/1 var(--font-family-display); letter-spacing: var(--type-h4-letter-spacing); }
.va-verb small { font-size: var(--app-meta); color: var(--color-text-secondary); margin-top: 4px; }
.va-verb--wide { grid-column: span 2; height: 140px; }
/* hand-off: the V opens over a still */
.va-handoff { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--space-8); overflow: hidden; background: var(--app-bg); }
.va-handoff .va-cap { opacity: 0.55; transform: scale(1.06); transition: opacity 1.2s var(--motion-easing-standard), transform 3s var(--motion-easing-standard); }
.va-handoff.is-open .va-cap { opacity: 1; transform: scale(1); }
.va-handoff > :not(.va-cap):not(.va-fade) { position: relative; z-index: 1; }
.va-vdoor { position: relative; width: 120px; height: 120px; margin-bottom: var(--space-8); }
.va-vdoor__half { position: absolute; inset: 0; display: grid; place-items: center; background: var(--color-brand-lilac); transition: transform var(--motion-sting-beat-close, 980ms) var(--motion-easing-in-out); }
.va-vdoor__half img { width: 76px; }
.va-vdoor__half--l { clip-path: polygon(16px 0, 50% 0, 50% 100%, 0 100%, 0 16px); }
.va-vdoor__half--r { clip-path: polygon(50% 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 50% 100%); }
.va-handoff.is-open .va-vdoor__half--l { transform: translateX(-38px); }
.va-handoff.is-open .va-vdoor__half--r { transform: translateX(38px); }
.va-handoff h2 { margin-bottom: var(--space-2); }
.va-handoff p { color: var(--color-text-secondary); font-size: var(--app-sm); margin: 0; }
.va-load { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; width: 100%; height: 6px; margin: var(--space-6) 0 var(--space-3); }
.va-load i { background: var(--color-alpha-white-16); }
.va-load i.on { background: var(--app-accent); }
.va-tip { margin-top: var(--space-6) !important; padding: var(--space-3) var(--space-4); border: var(--border-width-hairline) solid var(--app-line-2); border-radius: var(--radius-md); background: var(--color-scrim-strong); text-align: left; }
.va-handoff__foot { position: absolute !important; left: 0; right: 0; bottom: calc(var(--app-safe-bottom) + var(--space-4)); display: flex; justify-content: center; }
/* =====================================================================
9 · CHAT (pattern 6)
===================================================================== */
.va-chatrow-wrap { position: relative; overflow: hidden; }
.va-swipe { position: absolute; top: 0; bottom: 0; display: flex; }
.va-swipe--l { left: 0; }
.va-swipe--r { right: 0; }
.va-swipe button { width: var(--app-row-h); border: 0; display: grid; place-content: center; justify-items: center; gap: 4px; font: var(--font-weight-semibold) var(--app-meta)/1 var(--font-family-body); cursor: pointer; }
.va-swipe__read { background: var(--app-ink); color: var(--app-accent); }
.va-swipe__mute { background: var(--app-raised); color: var(--color-text-primary); }
.va-swipe__del { background: var(--color-status-danger-bg); color: var(--color-status-danger-fg); }
.va-chatrow { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-3); min-height: 80px; padding: var(--space-3) var(--app-gutter); background: var(--app-bg); text-decoration: none; color: inherit; touch-action: pan-y; transition: transform var(--motion-duration-base) var(--motion-easing-standard); }
.va-chatrow.is-dragging { transition: none; }
.va-chatrow__txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.va-chatrow__l1 { display: flex; align-items: baseline; gap: var(--space-2); }
.va-chatrow__l1 b { flex: 1; min-width: 0; font-weight: var(--font-weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-chatrow__prev { font-size: var(--app-sm); color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-chatrow__l3 { display: flex; align-items: center; gap: var(--space-2); }
.va-chatrow__side { display: grid; justify-items: end; gap: 6px; align-self: stretch; align-content: center; }
.va-chatrow.is-unread .va-chatrow__prev { color: var(--color-text-primary); }
.va-chatrow.is-unread .va-chatrow__l1 b { font-weight: var(--font-weight-bold); }
.va-chatrow + .va-chatrow, .va-chatrow-wrap + .va-chatrow-wrap { border-top: var(--border-width-hairline) solid var(--app-line); }
/* world tag (small, square, never a pill cloud) */
.va-wtag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: 4px; background: var(--app-surface); color: var(--color-text-secondary); font: var(--font-weight-semibold) 11px/1 var(--font-family-body); white-space: nowrap; }
.va-wtag .va-i { width: 12px; height: 12px; color: var(--app-accent); }
.va-wtag--vatar .va-i { color: var(--color-text-secondary); }
/* streak */
.va-streak { display: inline-flex; align-items: center; gap: 2px; color: var(--app-streak-ink, var(--app-streak)); font: var(--font-weight-bold) var(--app-meta)/1 var(--font-family-body); font-feature-settings: var(--font-feature-tabular); }
.va-streak .va-i { width: 14px; height: 14px; color: var(--app-streak); }
.va-streak--lg { gap: 4px; font-size: var(--app-sm); }
.va-streak--lg .va-i { width: 18px; height: 18px; }
/* thread */
.va-chathead { display: flex; align-items: center; gap: var(--space-2); height: 64px; padding: 0 var(--app-gutter) 0 var(--space-1); border-bottom: var(--border-width-hairline) solid var(--app-line); flex: none; }
.va-chathead__txt { flex: 1; min-width: 0; margin-left: var(--space-1); }
.va-chathead__txt b { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--font-weight-semibold); }
.va-thread { flex: 1; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--app-gutter); }
.va-thread::-webkit-scrollbar { display: none; }
.va-thread > * { flex-shrink: 0; }
.va-day-sep { align-self: center; font-size: var(--app-meta); color: var(--color-text-tertiary); margin: var(--space-2) 0; font-feature-settings: var(--font-feature-tabular); }
/* bubbles: radius with ONE chamfered tail corner. "me" is deep lilac ink, not lilac fill */
.va-bub { max-width: 78%; padding: 10px 14px; font-size: var(--app-body); line-height: 1.4; border-radius: 18px; }
.va-bub--them { align-self: flex-start; background: var(--app-surface); clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px)); border-bottom-left-radius: 0; }
.va-bub--me { align-self: flex-end; background: var(--app-ink); color: var(--app-ink-text, var(--color-lilac-50)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); border-bottom-right-radius: 0; }
.va-bub-meta { font-size: 11px; color: var(--color-text-tertiary); font-feature-settings: var(--font-feature-tabular); }
.va-bub-meta--me { align-self: flex-end; display: inline-flex; gap: 4px; align-items: center; }
.va-bub-meta .va-i { width: 14px; height: 14px; color: var(--app-accent); }
/* rich cards */
.va-rich { width: 272px; border-radius: var(--radius-md); overflow: hidden; background: var(--app-surface); border: var(--border-width-hairline) solid var(--app-line); }
.va-rich--me { align-self: flex-end; }
.va-rich__media { position: relative; height: 128px; overflow: hidden; }
.va-rich__media .va-wtag { position: absolute; top: var(--space-2); left: var(--space-2); background: var(--color-scrim-strong); }
.va-rich__body { padding: var(--space-3); }
.va-rich__body b { display: block; font-weight: var(--font-weight-semibold); line-height: 1.3; }
.va-rich__body span { display: block; font-size: var(--app-sm); color: var(--color-text-secondary); margin-top: 2px; }
.va-rich__act { padding: 0 var(--space-3) var(--space-3); }
.va-rich__done { display: flex; align-items: center; gap: 6px; padding: var(--space-3); border-top: var(--border-width-hairline) solid var(--app-line); font-size: var(--app-sm); color: var(--color-status-success-fg); }
/* money slip: the amount is the card */
.va-slip { position: relative; width: 248px; padding: var(--space-4); border-radius: var(--radius-md); background: var(--app-bg); border: var(--border-width-hairline) solid var(--color-lilac-800); overflow: hidden; }
.va-slip > :not(.va-dots) { position: relative; z-index: 1; }
.va-slip__amt { display: flex; align-items: center; margin: var(--space-3) 0; }
.va-slip__note { font-size: var(--app-sm); color: var(--color-text-primary); margin: 0 0 var(--space-3); }
.va-slip__foot { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-3); border-top: var(--border-width-hairline) dashed var(--app-line-2); font-size: var(--app-meta); color: var(--color-text-tertiary); font-feature-settings: var(--font-feature-tabular); }
.va-slip__foot .ok { display: inline-flex; gap: 4px; align-items: center; color: var(--color-status-success-fg); font-weight: var(--font-weight-semibold); }
/* ticket: notched stub */
.va-ticket { width: 272px; display: grid; grid-template-columns: 1fr 76px; border-radius: var(--radius-md); background: var(--app-surface); -webkit-mask: radial-gradient(circle 9px at calc(100% - 76px) 0, transparent 98%, var(--color-brand-black)) top / 100% 51% no-repeat, radial-gradient(circle 9px at calc(100% - 76px) 100%, transparent 98%, var(--color-brand-black)) bottom / 100% 51% no-repeat; mask: radial-gradient(circle 9px at calc(100% - 76px) 0, transparent 98%, var(--color-brand-black)) top / 100% 51% no-repeat, radial-gradient(circle 9px at calc(100% - 76px) 100%, transparent 98%, var(--color-brand-black)) bottom / 100% 51% no-repeat; }
.va-ticket__main { padding: var(--space-3); display: grid; gap: var(--space-2); }
.va-ticket__main b { font-weight: var(--font-weight-semibold); line-height: 1.3; }
.va-ticket__stub { display: grid; place-items: center; align-content: center; gap: 4px; border-left: var(--border-width-thick) dashed var(--app-bg); padding: var(--space-2); text-align: center; }
/* map pin: a real capture as the map */
.va-mappin .va-rich__media { height: 150px; }
.va-mappin__pin { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -100%); color: var(--color-brand-black); }
.va-mappin__pin svg { width: 36px; height: 36px; fill: var(--color-brand-lilac); stroke: var(--color-brand-black); }
/* voice note */
.va-voice { display: flex; align-items: center; gap: var(--space-3); width: 248px; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2); border-radius: 18px; background: var(--app-surface); }
.va-voice__play { width: var(--app-tap); height: var(--app-tap); flex: none; display: grid; place-items: center; border: 0; border-radius: var(--radius-pill); background: var(--app-raised); color: var(--color-text-primary); cursor: pointer; }
.va-voice__play .va-i { width: 18px; height: 18px; }
.va-wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 28px; }
.va-wave i { flex: 1; background: var(--color-neutral-600); min-height: 3px; }
.va-wave i.on { background: var(--app-accent); }
/* composer */
.va-composer { flex: none; display: flex; align-items: flex-end; gap: var(--space-2); padding: var(--space-2) var(--space-2) calc(var(--app-safe-bottom) + var(--space-1)); border-top: var(--border-width-hairline) solid var(--app-line); background: var(--app-bg); }
.va-composer__field { flex: 1; display: flex; align-items: center; min-height: var(--app-tap); padding: 0 var(--space-1) 0 var(--space-4); border-radius: 22px; background: var(--app-surface); color: var(--color-text-tertiary); font-size: var(--app-body); }
.va-composer__field span { flex: 1; }
/* + action sheet grid */
.va-actgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.va-act { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-1) var(--space-3); border: 0; border-radius: var(--radius-md); background: var(--app-raised); color: var(--color-text-primary); font: var(--font-weight-semibold) var(--app-sm)/1.2 var(--font-family-body); cursor: pointer; text-align: center; }
.va-act .va-i { width: 28px; height: 28px; color: var(--app-accent); }
.va-act:active { background: var(--color-neutral-700); }
.va-act small { font-weight: var(--font-weight-regular); color: var(--color-text-tertiary); font-size: 11px; margin-top: -4px; }
/* request accept moment */
.va-req { position: relative; padding: var(--space-6) var(--space-4) var(--space-4); border-radius: var(--radius-md); background: var(--app-bg); border: var(--border-width-hairline) solid var(--app-line-2); overflow: hidden; text-align: center; }
.va-req > :not(.va-dots) { position: relative; z-index: 1; }
.va-req > .va-av { display: block; margin: 0 auto var(--space-3); }
.va-req__meet { display: flex; justify-content: center; align-items: center; margin-bottom: var(--space-4); }
.va-req__meet .va-av { margin: 0; }
.va-req__meet .va-av + .va-av { margin-left: -14px; }
.va-req__meet .va-i { position: absolute; }
.va-req p { margin: var(--space-2) 0 var(--space-5); color: var(--color-text-secondary); font-size: var(--app-sm); }
/* =====================================================================
10 · WALLET · LIVE · UPDATES
===================================================================== */
.va-bal { display: flex; align-items: center; gap: var(--space-3); min-height: var(--app-row-h); padding: var(--space-3) var(--space-4); }
.va-bal + .va-bal { border-top: var(--border-width-hairline) solid var(--app-line); }
.va-bal__ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: var(--app-ink); color: var(--app-accent); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); overflow: hidden; position: relative; }
.va-bal__ico img { width: 100%; height: 100%; object-fit: cover; }
.va-bal__txt { flex: 1; min-width: 0; }
.va-bal__txt b { display: block; font-weight: var(--font-weight-semibold); }
.va-bal__txt span { display: block; font-size: var(--app-sm); color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-bal__val { font: var(--font-weight-bold) var(--app-h3)/1 var(--font-family-display); font-feature-settings: var(--font-feature-tabular); white-space: nowrap; }
.va-bals { border: var(--border-width-hairline) solid var(--app-line-2); border-radius: var(--radius-md); }
.va-rewards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.va-reward { position: relative; display: flex; flex-direction: column; min-height: 168px; padding: var(--space-3); border-radius: var(--radius-md); background: var(--app-surface); border: 0; color: inherit; text-align: left; cursor: pointer; overflow: hidden; font: inherit; }
.va-reward > :not(.va-dots) { position: relative; z-index: 1; }
.va-reward .va-i { color: var(--app-accent); }
.va-reward b { font: var(--font-weight-bold) var(--app-h3)/1.15 var(--font-family-display); margin: var(--space-3) 0 2px; }
.va-reward > span { font-size: var(--app-meta); color: var(--color-text-tertiary); }
.va-reward__price { margin-top: auto; padding-top: var(--space-3); display: flex; align-items: center; gap: 6px; font-size: var(--app-meta); color: var(--color-text-secondary); }
.va-reward.is-soon { background: transparent; border: var(--border-width-hairline) dashed var(--app-line-2); cursor: default; }
.va-reward.is-soon .va-i, .va-reward.is-soon b { color: var(--color-text-tertiary); }
.va-reward:not(.is-soon):hover { background: var(--app-raised); }
.va-kv { display: grid; gap: 0; margin: 0; }
.va-kv > div { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: var(--border-width-hairline) solid var(--app-line); font-size: var(--app-sm); }
.va-kv dt { color: var(--color-text-secondary); }
.va-kv dd { margin: 0; font-weight: var(--font-weight-semibold); font-feature-settings: var(--font-feature-tabular); }
.va-event { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--app-surface); }
.va-event__media { position: relative; height: 300px; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-4); }
.va-event__media > :not(.va-cap):not(.va-fade) { position: relative; }
.va-event__date { position: absolute !important; top: var(--space-4); left: var(--space-4); display: grid; gap: 6px; padding: var(--space-2) var(--space-3); background: var(--color-brand-black); border: var(--border-width-hairline) solid var(--color-alpha-white-10); border-radius: var(--radius-sm); }
.va-event__body { padding: var(--space-4); display: grid; gap: var(--space-4); }
.va-event__row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.va-yourein { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--app-ink); border: var(--border-width-hairline) solid var(--color-lilac-800); }
.va-yourein__ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: var(--color-status-success-bg); color: var(--color-status-success-fg); border-radius: var(--radius-sm); }
.va-yourein b { display: block; font: var(--font-weight-extrabold) var(--app-h3)/1.1 var(--font-family-display); }
.va-yourein span { font-size: var(--app-sm); color: var(--color-text-secondary); }
.va-recap { position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--app-bg); border: var(--border-width-hairline) solid var(--app-line-2); }
.va-recap__media { position: relative; height: 112px; }
.va-recap__media .va-hud { position: absolute; left: var(--space-4); bottom: var(--space-3); color: var(--color-text-primary); }
.va-recap__nums { position: relative; display: grid; grid-template-columns: 1.3fr 1fr 1fr; padding: var(--space-4) var(--space-4) 0; }
.va-recap__nums > div { display: grid; gap: var(--space-2); align-content: start; }
.va-recap__nums > div + div { padding-left: var(--space-3); border-left: var(--border-width-hairline) solid var(--app-line); }
.va-recap__line { position: relative; margin: 0; padding: var(--space-4); font-size: var(--app-sm); color: var(--color-text-secondary); }
.va-recap__line b { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.va-recap__foot { display: flex; justify-content: space-between; align-items: center; padding: 0 var(--space-4) var(--space-2); }
/* notification pre-permission: show the real push first */
.va-ask { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--app-surface); }
.va-push { display: flex; gap: var(--space-3); padding: var(--space-3); border-radius: 18px; background: var(--color-neutral-800); margin-bottom: var(--space-4); }
.va-push .va-mark { width: 38px; height: 38px; }
.va-push .va-mark::before { inset: 0; }
.va-push .va-mark img { width: 26px; }
.va-push__txt { flex: 1; min-width: 0; font-size: var(--app-sm); line-height: 1.35; }
.va-push__txt div { display: flex; justify-content: space-between; color: var(--color-text-secondary); font-size: var(--app-meta); margin-bottom: 2px; }
.va-push__txt b { display: block; font-weight: var(--font-weight-semibold); }
.va-ask p { margin: 0 0 var(--space-4); font-size: var(--app-body); }
.va-ask .va-row-btns { gap: var(--space-2); }
.va-notes h3 { font-size: var(--app-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); margin: var(--space-5) var(--app-gutter) var(--space-1); }
.va-note { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--app-gutter); position: relative; }
.va-note__ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--app-surface); color: var(--app-accent); }
.va-note__txt { flex: 1; min-width: 0; font-size: var(--app-sm); line-height: 1.4; padding-top: 2px; }
.va-note__txt b { font-weight: var(--font-weight-semibold); }
.va-note__txt .va-meta { display: block; margin-top: 2px; }
.va-note.is-unread::after { content: ""; position: absolute; right: var(--app-gutter); top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: var(--radius-pill); background: var(--app-accent); }
.va-note.is-unread { padding-right: calc(var(--app-gutter) + 20px); }
/* =====================================================================
11 · STATES (pattern 7)
===================================================================== */
.va-state { display: grid; justify-items: center; text-align: center; padding: var(--space-10) var(--space-8); }
.va-state__obj { height: 112px; display: grid; place-items: center; margin-bottom: var(--space-5); }
.va-state__obj img { max-height: 112px; width: auto; }
.va-state h3 { margin-bottom: var(--space-2); }
.va-state p { margin: 0 0 var(--space-6); font-size: var(--app-sm); color: var(--color-text-secondary); max-width: 280px; }
.va-offline { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-2) 0 var(--app-gutter); background: var(--color-status-warning-bg); color: var(--color-status-warning-fg); font-size: var(--app-sm); }
.va-offline span { flex: 1; color: var(--color-text-primary); }
.va-offline .va-i { width: 18px; height: 18px; }
.va-offline button { border: 0; background: none; color: var(--color-status-warning-fg); font-weight: var(--font-weight-semibold); min-height: 44px; padding: 0 var(--space-2); cursor: pointer; }
/* skeletons: silhouettes of the real layout */
.va-sk { background: var(--app-surface); border-radius: var(--radius-sm); position: relative; overflow: hidden; }
.va-sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--color-alpha-white-4), transparent); animation: va-shimmer 1.4s var(--motion-easing-linear) infinite; }
@keyframes va-shimmer { to { transform: translateX(100%); } }
.va-sk--line { height: 12px; }
.va-sk--title { height: 28px; }
.va-sk--round { border-radius: var(--radius-pill); }
.va-sk--btn { height: 64px; clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); border-radius: 0; }
.va-sk-hero { height: 468px; background: var(--app-surface); display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-3); padding: 0 var(--app-gutter) var(--space-5); }
.va-sk-hero .va-sk { background: var(--app-raised); }
/* badges, tags, status */
.va-tag { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 var(--space-2); border-radius: 4px; font: var(--font-weight-semibold) var(--app-meta)/1 var(--font-family-body); white-space: nowrap; }
.va-tag .va-i { width: 14px; height: 14px; }
.va-tag--home { background: var(--color-scrim-strong); color: var(--app-accent); box-shadow: inset 0 0 0 1px var(--app-accent); }
.va-tag--visit { background: transparent; color: var(--color-text-primary); box-shadow: inset 0 0 0 1px var(--color-border-strong); }
.va-tag--soon { background: var(--app-surface); color: var(--color-text-secondary); }
.va-tag--scrim { background: var(--color-scrim-strong); color: var(--color-text-primary); }
.va-status-b { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border-radius: var(--radius-pill); font: var(--font-weight-semibold) var(--app-meta)/1 var(--font-family-body); }
.va-status-b .va-i { width: 16px; height: 16px; }
.va-status-b--success { background: var(--color-status-success-bg); color: var(--color-status-success-fg); }
.va-status-b--warning { background: var(--color-status-warning-bg); color: var(--color-status-warning-fg); }
.va-status-b--danger { background: var(--color-status-danger-bg); color: var(--color-status-danger-fg); }
.va-status-b--info { background: var(--color-status-info-bg); color: var(--color-status-info-fg); }
/* ---------- reduced motion: cross-fades only ---------- */
@media (prefers-reduced-motion: reduce) {
.va-pcard, .va-vdoor__half, .va-handoff .va-cap, .va-chatrow, .va-tab .va-i, .va-tab > span, .va-tabbar__well { transition-duration: var(--motion-duration-fast) !important; }
.va-tab__live { animation: none; }
.va-pcard.is-reveal { animation: va-fade-in var(--motion-duration-entrance) var(--motion-easing-standard) both; }
.va-otp.is-wrong, .va-toast.is-in { animation: va-fade-in var(--motion-duration-base) var(--motion-easing-standard) both; }
.va-live::before, .va-sk::after, .va-spin { animation: none; }
.va-handoff.is-open .va-vdoor__half--l, .va-handoff.is-open .va-vdoor__half--r { transform: none; opacity: 0; transition: opacity var(--motion-duration-entrance) var(--motion-easing-standard); }
}
@keyframes va-fade-in { from { opacity: 0; } }
/* =====================================================================
12 · ADDED IN STEP 5 · Look and feel (30 Oct) · logged in KIT.md
Components the Home and World screens needed that the kit didn't have.
===================================================================== */
/* 12.1 bright-top hero scrim. The step-4 hero (.va-fade--hero/--deep) sat a strong scrim over most of the
capture and the city went murky. This one keeps the top ~55% of the capture untouched and only darkens
the band behind the type. Pair with .va-fade--cap so the status bar and top bar stay legible on a bright sky. */
.va-fade--low { background: linear-gradient(0deg, var(--color-brand-black) 0%, var(--color-brand-black) 26%, var(--color-scrim-solid) 36%, var(--color-scrim-strong) 44%, var(--color-scrim-soft) 51%, var(--color-alpha-black-0) 61%); }
.va-fade--cap { position: absolute; left: 0; right: 0; top: 0; height: 172px; pointer-events: none; background: linear-gradient(180deg, var(--color-scrim-strong) 0%, var(--color-scrim-strong) 34%, var(--color-scrim-soft) 60%, var(--color-alpha-black-0) 100%); }
.va-topbar--over .va-topbar__title .va-hud { color: var(--color-text-secondary); } /* 11px over an image needs secondary, not tertiary */
/* 12.2 claimable recap rows ("While you were away", Warframe-style). Each row: thumb (capture, photo or icon),
what happened, the value in LED, one action. Claim = a lilac-ink wash and a scanline cross the row, the value
counts up, the action becomes a status (icon + label). Claim is outlined (secondary): Enter stays the one lilac. */
.va-claims { position: relative; border: var(--border-width-hairline) solid var(--app-line-2); border-radius: var(--radius-md); overflow: hidden; background: var(--app-bg); }
.va-claims__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: 44px; padding: 0 var(--space-4); border-bottom: var(--border-width-hairline) solid var(--app-line); }
.va-claims__tot { font-size: var(--app-meta); font-weight: var(--font-weight-semibold); color: var(--app-accent); font-feature-settings: var(--font-feature-tabular); }
.va-claims__tot.is-done { color: var(--color-status-success-fg); }
.va-claim { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: 80px; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); overflow: hidden; }
.va-claim + .va-claim { border-top: var(--border-width-hairline) solid var(--app-line); }
.va-claim > :not(.va-claim__wash) { position: relative; z-index: 1; }
.va-claim__wash { position: absolute; inset: 0; z-index: 0; background: var(--app-ink); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.va-claim__scan { position: absolute !important; top: 0; bottom: 0; left: 0; width: 2px; background: var(--color-brand-lilac); opacity: 0; pointer-events: none; }
.va-claim__thumb { width: 48px; height: 48px; flex: none; display: grid; place-items: center; overflow: hidden; background: var(--app-ink); color: var(--app-accent); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.va-claim__thumb img { width: 100%; height: 100%; object-fit: cover; }
.va-claim__thumb--photo { clip-path: none; border-radius: var(--radius-pill); }
.va-claim__txt { flex: 1; min-width: 0; display: grid; gap: 6px; }
.va-claim__txt > b { font-size: var(--app-sm); font-weight: var(--font-weight-semibold); line-height: 1.3; }
.va-claim__sub { font-size: var(--app-meta); color: var(--color-text-tertiary); line-height: 1.3; }
.va-claim__val { display: flex; align-items: center; gap: 6px; --led-size: 16px; min-height: 16px; }
.va-claim__val .va-led-cur { font-size: 15px; }
.va-claim__val small { font-size: var(--app-meta); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.va-claim__done { display: inline-flex; align-items: center; gap: 4px; min-height: var(--app-tap); padding: 0 var(--space-2); color: var(--color-status-success-fg); font: var(--font-weight-semibold) var(--app-sm)/1 var(--font-family-body); white-space: nowrap; }
.va-claim__done .va-i { width: 16px; height: 16px; }
.va-claims__foot { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 48px; border-top: var(--border-width-hairline) solid var(--app-line); color: var(--app-accent); font: var(--font-weight-semibold) var(--app-sm)/1 var(--font-family-body); text-decoration: none; }
.va-claims__foot .va-i { width: 16px; height: 16px; }
/* 12.3 V gate (extends 8.8 hand-off). The pressed Enter plate grows into the full lilac ground with the V,
holds a beat, then the V opens like two doors onto the world still. JS drives the grow (clip-path from the
button's rect) and the split (translateX on each half). Reduced motion: the gate cross-fades. */
.va-vgate { position: absolute; inset: 0; z-index: var(--z-modal); pointer-events: none; visibility: hidden; overflow: hidden; }
.va-vgate.is-on { visibility: visible; }
.va-vgate__half { position: absolute; inset: 0; display: grid; place-items: center; background: var(--color-brand-lilac); will-change: transform; }
.va-vgate__half > img { position: relative; z-index: 1; width: 66%; height: auto; }
.va-vgate__half .va-dots { --vp-c1: var(--pattern-dots-on-lilac-loud); }
.va-vgate__half--l { clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); }
.va-vgate__half--r { clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); }
/* 12.4 LED area board (world page areas, later: city vote list). A departures board: the area code in LED,
the area, a live count. Areas are parts of one world, never separate worlds. */
.va-board { position: relative; padding: var(--border-width-hairline); background: var(--color-alpha-white-16); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.va-board__in { position: relative; overflow: hidden; background: var(--color-brand-black); clip-path: polygon(13.6px 0, 100% 0, 100% calc(100% - 13.6px), calc(100% - 13.6px) 100%, 0 100%, 0 13.6px); --led-on: var(--color-brand-lilac); --led-off: var(--color-alpha-white-8); }
.va-board__in > :not(.va-dots) { position: relative; z-index: 1; }
.va-board__row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: 72px; padding: var(--space-3) var(--space-4); color: inherit; text-decoration: none; }
.va-board__row + .va-board__row { border-top: var(--border-width-hairline) dashed var(--app-line-2); }
.va-board__code { --led-size: 20px; }
.va-board__txt { min-width: 0; display: grid; gap: 2px; }
.va-board__txt b { font: var(--font-weight-bold) var(--app-body)/1.2 var(--font-family-display); }
.va-board__txt span { font-size: var(--app-meta); color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-board__row.is-here .va-board__txt span { color: var(--app-accent); }
.va-board__n { display: grid; justify-items: end; gap: 4px; --led-size: 16px; }
.va-board__n small { font-size: 11px; color: var(--color-text-tertiary); }
.va-board__row:focus-visible { outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) {
.va-claim__wash, .va-claim__scan { display: none; }
}
/* 12.5 · Verb grid, capture size (step 5) · one grid, Home and the World page share it.
Taller tiles, 24px verbs, a stronger floor scrim for captions over bright captures, the live tag on a scrim chip.
The live tag is always .va-livecount (white hollow dot), so it never competes with the screen's one amber. */
.va-verbs--lg .va-verb { height: 136px; }
.va-verbs--lg .va-verb--wide { height: 152px; }
.va-verbs--lg .va-verb b { font-size: 24px; }
.va-verbs--lg .va-verb .va-fade { background: linear-gradient(0deg, var(--color-scrim-solid) 0%, var(--color-scrim-strong) 40%, var(--color-alpha-black-0) 85%); }
.va-verbs--lg .va-verb .va-livecount { position: absolute; top: var(--space-3); left: var(--space-3); padding: 5px 8px; border-radius: 4px; background: var(--color-scrim-strong); }
.va-verbs--lg .va-verb small { color: var(--color-text-primary); opacity: 0.86; }
.va-verb:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
/* 12.6 · World title (step 5) · the world's name set as type, stacked one word per line, plus its sub-line.
Each line sits in its own mask so it can rise line by line. Used by the Home hero and the World page hero. */
.va-wtitle { font: var(--font-weight-extrabold) 88px/0.84 var(--font-family-display); letter-spacing: -0.05em; margin: var(--space-2) 0 var(--space-3); }
.va-wtitle__l { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.va-wtitle__l > span { display: block; will-change: transform; }
.va-wsub { margin: 0 0 var(--space-4); font-size: var(--app-body); color: var(--color-text-secondary); }
.va-wsub b { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
/* 12.7 · Stills cycle (step 5, owner 30 Oct) · curated in-game stills that swipe instead of a cutting video.
The incoming still wipes in from the right behind a lit edge and settles from 1.06; the outgoing one slides ~8% and dims.
Stories-style progress (white 35% track, white fill) and an "In game · place" label that rolls with each swipe.
Motion is VA.cycle() in screens/screens.js; reduced motion holds one still. */
.va-cyc { position: absolute; inset: 0; overflow: hidden; background: var(--color-neutral-900); touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.va-cyc__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; z-index: 0; clip-path: inset(0 0 0 100%); -webkit-user-drag: none; pointer-events: none; }
.va-cyc__img.is-on { z-index: 2; clip-path: inset(0); }
.va-cyc__edge { position: absolute; z-index: 3; top: 0; bottom: 0; left: 100%; width: 2px; margin-left: -1px; opacity: 0; pointer-events: none; background: var(--color-lilac-200); box-shadow: 0 0 14px 2px rgb(225 191 255 / 0.7); }
.va-cyc__prog { display: flex; gap: 4px; }
.va-cyc__prog i { flex: 1; height: 2px; border-radius: 1px; overflow: hidden; background: var(--color-alpha-white-35); }
.va-cyc__prog b { display: block; height: 100%; background: var(--color-text-primary); transform: scaleX(0); transform-origin: 0 50%; }
.va-cyc__place { display: flex; align-items: baseline; gap: 0.4em; margin: 0; color: var(--color-text-primary); text-shadow: 0 1px 10px rgb(0 0 0 / 0.6); }
.va-cyc__place .va-hud { color: inherit; }
.va-cyc__name { display: inline-block; overflow: hidden; vertical-align: bottom; }
.va-cyc__name > span { display: inline-block; }
/* 12.8 · World plate (owner pick, 30 Oct: tag pair C "Scoreboard plate", kit/explore/tags.html) · one plate,
two segments, like a stadium board: a solid lilac ⌂ HOME segment, then a dark segment with the amber live
dot, the count in small7 LED on a visible grid and PLAYING. Chamfered once, bottom-right (the corner the
button cuts). Replaces 11.4 Home tag + 8.2 live pill on world heroes (LO-02, Home, World page).
Approved exception to rule 2: the HOME segment is the only lilac-filled tag in the app.
Markup:
Home
Playing
kit.js fills .va-plate__n[data-n] with LED groups and the dropped small7 comma (VAPlate.count(el, text) to tick).
Variants: .is-visit (Visiting, globe, neutral segment), .is-off (offline glyph, "-", Offline), .is-soon (no dot,
reserved count), .is-tick (the dot pings on a count change). Short form "12.4K" on LO-02, full "12,480" with room. */
.va-plate {
display: inline-flex; align-items: stretch; flex: none; height: 22px; white-space: nowrap;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
font: var(--font-weight-semibold) 10px/1 var(--font-family-body);
letter-spacing: calc(var(--type-hud-letter-spacing) * 0.8); text-transform: uppercase;
font-feature-settings: var(--font-feature-case), var(--font-feature-tabular);
color: var(--color-text-primary);
}
.va-plate .va-i { width: 12px; height: 12px; }
.va-plate__home, .va-plate__live { display: inline-flex; align-items: center; gap: 5px; }
.va-plate__home { padding: 0 8px 0 7px; background: var(--color-brand-lilac); color: var(--color-text-on-accent); font-weight: var(--font-weight-bold); }
.va-plate__live { gap: 6px; padding: 0 12px 0 8px; background: var(--color-neutral-900); box-shadow: inset 0 1px 0 var(--color-alpha-white-10); }
.va-plate__lbl { color: var(--color-neutral-300); }
/* the live dot: an octagon (the icon set's round shape), amber, the screen's one live signal */
.va-plate__dot { position: relative; flex: none; width: 6px; height: 6px; background: var(--color-live-dot); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); animation: va-plate-pulse 2s var(--motion-easing-standard) infinite; }
.va-plate.is-tick .va-plate__dot { animation: va-plate-ping 0.6s var(--motion-easing-standard), va-plate-pulse 2s var(--motion-easing-standard) 0.6s infinite; }
@keyframes va-plate-pulse { 50% { opacity: 0.35; } }
@keyframes va-plate-ping { 0% { transform: scale(1.6); filter: brightness(1.35); } 100% { transform: scale(1); filter: none; } }
/* the count: DS small7 in lilac on a visible grid, with the comma dropped below the line (small7's own reads as a period) */
.va-plate__n { --led-on: var(--color-brand-lilac); --led-off: var(--color-alpha-white-10); --led-size: 13px; flex: none; display: inline-flex; align-items: flex-start; height: var(--led-size); }
.va-plate__n > .led { --led-on: inherit; --led-off: inherit; --led-size: inherit; }
.va-plate__c { flex: none; height: calc(var(--led-size) * 9 / 7); width: calc(var(--led-size) * 4 / 7); overflow: visible; }
.va-plate__c .on { fill: var(--led-on); }
.va-plate__c .off { fill: var(--led-off); }
.va-plate__offi { color: var(--color-neutral-400); }
.va-plate.is-visit .va-plate__home { background: var(--color-neutral-700); color: var(--color-text-primary); }
.va-plate.is-off .va-plate__lbl { color: var(--color-neutral-400); }
.va-plate.is-off .va-plate__n { --led-on: var(--color-neutral-400); }
.va-plate.is-soon .va-plate__lbl { color: var(--color-neutral-300); }
@media (prefers-reduced-motion: reduce) { .va-plate__dot, .va-plate.is-tick .va-plate__dot { animation: none; } }
.va-plate:not(.is-off) .va-plate__offi, .va-plate.is-off .va-plate__dot, .va-plate.is-soon .va-plate__dot { display: none; }
/* =====================================================================
12.9 · .va-track · Pager · seated track (direction C, picked by the owner 30 Oct, refined; kit/explore/pager.html)
DS tokens only. Pairs with VaTrack.create() in kit.js. Replaces dash/segment pagers (Home stills, ON-02 welcome).
Markup (VaTrack.create builds it):
×n
Size: 14 px groove; width hugs the cards (3 → 72, 5 → 101). Key 20 × 10, chamfered, with the Get started "//".
Timer: add .is-run to .va-track__fill to play the 1 px lilac line over --vt-dur; [data-paused] holds it.
Hit area: every card is a 44 px tall zone; the end cards reach 19 px past the groove (44 wide). The focus ring
goes round the whole groove (focus follows selection, so it always frames the key).
Reduced motion: the key jumps, the fill is full and never runs.
===================================================================== */
.va-track {
--vt-n: 3; --vt-i: 0; --vt-dur: 4s;
--vt-slot: 22px; --vt-pad: 3px; --vt-h: 14px; --vt-kw: 20px; --vt-kh: 10px; --vt-ch: 3px; --vt-reach: 19px;
position: relative; flex: none; display: inline-flex; align-items: center;
width: calc(var(--vt-n) * var(--vt-slot) + 2 * var(--vt-pad)); height: var(--app-tap, 44px);
-webkit-tap-highlight-color: transparent;
}
.va-track[data-n="5"], .va-track--dense { --vt-slot: 19px; }
.va-track__groove {
position: relative; display: block; width: 100%; height: var(--vt-h); border-radius: calc(var(--vt-h) / 2); pointer-events: none;
background: var(--color-neutral-1000);
box-shadow: inset 0 1px 1px var(--color-alpha-black-88), inset 0 -1px 0 var(--color-alpha-white-4), 0 0 0 1px var(--color-alpha-white-10);
}
.va-track__notches { position: absolute; top: 0; bottom: 0; left: var(--vt-pad); right: var(--vt-pad); display: flex; }
.va-track__notches > i { position: relative; flex: 1; }
.va-track__notches > i::before { content: ""; position: absolute; left: 50%; top: 5px; bottom: 5px; width: 1px; margin-left: -0.5px; background: var(--color-alpha-white-16); }
.va-track__key {
position: absolute; top: calc((var(--vt-h) - var(--vt-kh)) / 2); left: calc(var(--vt-pad) + (var(--vt-slot) - var(--vt-kw)) / 2);
width: var(--vt-kw); height: var(--vt-kh); overflow: hidden;
clip-path: polygon(var(--vt-ch) 0, 100% 0, 100% calc(100% - var(--vt-ch)), calc(100% - var(--vt-ch)) 100%, 0 100%, 0 var(--vt-ch));
background: var(--color-neutral-700);
box-shadow: inset 0 1px 0 var(--color-alpha-white-24);
transform: translateX(calc(var(--vt-i) * var(--vt-slot)));
transition: transform 240ms cubic-bezier(0.3, 1.15, 0.5, 1);
}
.va-track__key::before { /* the Get started "//": two 1 px slashes at the hero stripe angle */
content: ""; position: absolute; left: 50%; top: 2px; bottom: 2px; width: 4px; margin-left: -2px; transform: skewX(var(--button-hero-stripe-skew, -20deg));
background: linear-gradient(90deg, var(--color-neutral-1000) 0 1px, transparent 1px 3px, var(--color-neutral-1000) 3px 4px);
}
.va-track__fill { position: absolute; left: 0; right: var(--vt-ch); bottom: 0; height: 1px; background: var(--color-lilac-200); transform: scaleX(0); transform-origin: 0 50%; }
.va-track__fill.is-run { animation: va-track-fill var(--vt-dur) linear forwards; }
.va-track[data-paused] .va-track__fill.is-run { animation-play-state: paused; }
@keyframes va-track-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.va-track__hits { position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--vt-reach)); right: calc(-1 * var(--vt-reach)); display: flex; }
.va-track__hits > button { appearance: none; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; flex: 0 0 var(--vt-slot); height: 100%; }
.va-track__hits > button:first-child, .va-track__hits > button:last-child { flex-basis: calc(var(--vt-slot) + var(--vt-pad) + var(--vt-reach)); }
.va-track__hits > button:focus-visible { outline: none; }
.va-track:has(button:focus-visible) .va-track__groove { outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--color-lilac-200)); outline-offset: var(--focus-ring-offset, 3px); }
.va-track__notches > i.is-hover::before { background: var(--color-alpha-white-35); }
.va-track--over .va-track__groove { box-shadow: inset 0 1px 1px var(--color-alpha-black-88), inset 0 -1px 0 var(--color-alpha-white-4), 0 0 0 1px var(--color-alpha-white-16), 0 2px 10px var(--color-alpha-black-72); }
.va-track.is-static .va-track__key, .rm .va-track__key, .ob-rm .va-track__key { transition: none; }
.rm .va-track__fill, .ob-rm .va-track__fill, .va-track.is-static .va-track__fill { animation: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
.va-track__key { transition: none; }
.va-track__fill { animation: none !important; transform: none; }
}
/* =====================================================================
1.8b · .va-seg--seated · Seated segmented control (owner, fix 10; same family as 12.9 .va-track)
A recessed graphite groove, full width, 40px (44px hit), and a raised chamfered key that hugs the active
label and slides 240ms with a tiny settle. Lilac only as the key's 1px bottom line.
Markup: ×n
VASeg.seat(el) in kit.js adds the groove + key, arrow keys, and fires "va-seg-change" { index, prev, dir }.
===================================================================== */
.va-seg.va-seg--seated {
--sg-h: 40px; --sg-kh: 30px; --sg-ch: 5px; --k-x: 0px; --k-w: 0px;
position: relative; isolation: isolate; display: flex; align-items: center; gap: 0; padding: 0 4px; height: var(--app-tap, 44px); border: 0;
}
.va-seg__groove {
position: absolute; z-index: -1; left: 0; right: 0; top: 50%; height: var(--sg-h); margin-top: calc(var(--sg-h) / -2); border-radius: calc(var(--sg-h) / 2); pointer-events: none;
background: var(--sg-groove, var(--color-neutral-1000));
box-shadow: var(--sg-groove-sh, inset 0 1px 1px var(--color-alpha-black-88), inset 0 -1px 0 var(--color-alpha-white-4), 0 0 0 1px var(--color-alpha-white-10));
}
.va-seg__key {
position: absolute; left: 0; top: 50%; height: var(--sg-kh); margin-top: calc(var(--sg-kh) / -2); width: var(--k-w); overflow: hidden;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sg-ch)), calc(100% - var(--sg-ch)) 100%, 0 100%);
background: var(--sg-key, var(--color-neutral-700)); box-shadow: var(--sg-key-sh, inset 0 1px 0 var(--color-alpha-white-24));
transform: translateX(var(--k-x));
transition: transform 240ms cubic-bezier(0.3, 1.15, 0.5, 1), width 240ms cubic-bezier(0.3, 1.15, 0.5, 1);
}
.va-seg__key::after { content: ""; position: absolute; left: 0; right: var(--sg-ch); bottom: 0; height: var(--sg-line-h, 1px); background: var(--sg-line, var(--color-lilac-200)); }
.va-seg--seated:not(.is-seated) .va-seg__key { opacity: 0; }
.va-seg--seated.is-instant .va-seg__key { transition: none; }
.va-seg.va-seg--seated button {
flex: 1 1 0; min-width: 0; height: var(--app-tap, 44px); padding: 0 6px; color: var(--sg-txt, var(--color-neutral-400));
font: var(--font-weight-semibold) 13px/1 var(--font-family-body); letter-spacing: 0; text-transform: none; border-radius: calc(var(--sg-h) / 2);
transition: color 160ms var(--motion-easing-standard, ease); -webkit-tap-highlight-color: transparent;
}
.va-seg.va-seg--seated button[aria-selected="true"] { color: var(--color-text-primary); }
.va-seg.va-seg--seated button[aria-selected="true"]::after { content: none; }
.va-seg.va-seg--seated button:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--color-lilac-200)); outline-offset: -3px; }
@media (hover: hover) { .va-seg.va-seg--seated button:not([aria-selected="true"]):hover { color: var(--sg-txt-hover, var(--color-neutral-200)); } }
.va-seg--seated .va-seg__n { margin-left: 2px; }
@media (prefers-reduced-motion: reduce) { .va-seg__key, .va-seg.va-seg--seated button { transition: none; } }
.ob-rm .va-seg__key, .rm .va-seg__key { transition: none; }
@media (forced-colors: active) { .va-seg__key { background: Highlight; } .va-seg.va-seg--seated button[aria-selected="true"] { color: HighlightText; } }
/* =====================================================================
1.9 · Light theme (owner ask, 30 Oct) · Settings › Appearance: Dark · Light · Match system
The DS light theme ([data-theme="light"] in tokens.css) does the heavy lifting; this block only
re-points the app roles and fixes kit parts that were built dark-only. DS tokens only, no new hex.
· is set by the inline bootstrap in every screen's (localStorage vatar.theme).
· Dark islands: media and hardware stay dark in light (captures, heroes, the hand-off, the V gate,
LED boards, the world plate, the player card, the graphite tab bar). Generators add data-theme="dark"
to those elements; the [data-theme] re-declaration above makes the app roles resolve dark inside them.
· Lilac on light: actions and accent text move to lilac-700 (DS). lilac-200 never sits on white as text
or LED (1.6:1); LEDs on light surfaces take --color-text-accent (lilac-700, 7.88:1) from led.css.
· html[data-theme-lock] forces dark on screens that are all media (splash, welcome, location).
===================================================================== */
[data-theme="light"] {
--app-ink: var(--color-lilac-100); /* "me" bubble, brand fields: a lilac wash, not lilac-50 (1.06:1 on white) */
--app-ink-text: var(--color-brand-ink); /* lilac-950 on lilac-100, 15.9:1 */
--app-ring-world: var(--color-lilac-700);
--app-ring-online: var(--color-neutral-500);
--app-streak: var(--color-amber-600); /* the flame (graphic); peach is 1.6:1 on white */
--app-streak-ink: var(--color-text-primary); /* the streak number */
--app-badge-bg: var(--color-lilac-700);
--app-badge-fg: var(--color-neutral-0);
--app-chip-bg: var(--color-bg-surface); /* scrim chips (.va-tag--home/--scrim, .va-live) off-image */
/* seated segmented control: a pressed light well, a white raised key, the lilac-700 line */
--sg-groove: var(--color-bg-surface-raised);
--sg-groove-sh: inset 0 1px 2px var(--color-alpha-black-16), inset 0 0 0 1px var(--color-alpha-black-8);
--sg-key: var(--color-neutral-0);
--sg-key-sh: 0 1px 2px var(--color-alpha-black-16), 0 0 0 1px var(--color-alpha-black-8);
--sg-line: var(--color-lilac-700);
--sg-line-h: 2px;
--sg-txt: var(--color-text-secondary); /* n-700 on n-100, 8.1:1 */
--sg-txt-hover: var(--color-text-primary);
}
/* a dark island re-sets its own ink: colour is inherited as a computed value, so without this text inside an
island would keep the light page's dark ink */
[data-theme="dark"]:not(html) { color: var(--color-text-primary) !important; } /* beats the "color: inherit" on media links */
/* the screen ground behind the device follows the theme (the presentation chrome stays dark) */
[data-theme="light"] .va-device { box-shadow: 0 0 0 1px var(--color-border-strong), 0 0 0 10px var(--color-neutral-900), 0 0 0 11px var(--color-neutral-700), var(--elevation-dialog); }
/* chips that sit on a scrim over media fall back to a quiet surface when they sit on the light page */
[data-theme="light"] .va-tag--home, [data-theme="light"] .va-tag--scrim { background: var(--app-chip-bg); }
[data-theme="light"] .va-live { background: var(--color-bg-canvas); }
[data-theme="dark"] .va-tag--home, [data-theme="dark"] .va-tag--scrim, [data-theme="dark"] .va-live { background: var(--color-scrim-strong); }
/* graphite tab bar stays dark (an island): the owner-picked hardware pill reads on light too */
[data-theme="light"] .va-tabbar::before { display: none; } /* no floor: a white floor cuts a milky band across dark heroes; the pill carries its own shadow */
[data-theme="light"] .va-tabbar::after { box-shadow: inset 0 2px 5px var(--color-alpha-black-88), inset 0 -1px 0 var(--color-alpha-white-8), 0 0 0 1px var(--color-alpha-black-10), 0 10px 24px var(--color-alpha-black-16); }
/* dot grid on light: the DS paper pairing (lilac-200 dots), not the night one (lilac-700 dots read as grey grit on white) */
[data-theme="light"] .vp-dots.vp--on-ink:not([data-theme="dark"] *) { --vp-c1: var(--pattern-dots-on-paper-quiet); }
[data-theme="light"] .va-act:active { background: var(--color-action-ghost-bg-pressed); }
[data-theme="light"] .va-push { background: var(--color-bg-canvas); box-shadow: var(--elevation-raised); }
[data-theme="light"] .va-sk::after { background: linear-gradient(90deg, transparent, var(--color-alpha-white-75), transparent); }
[data-theme="light"] .va-sheet { border-top-color: var(--color-border-subtle); }
[data-theme="light"] .va-sheet-wrap { background: var(--color-scrim-soft); }
/* the theme cross-fade (Settings › Appearance). ~200ms; reduced motion switches instantly (kit.js) */
:root.va-theming::view-transition-old(root), :root.va-theming::view-transition-new(root) { animation-duration: 200ms; animation-timing-function: var(--motion-easing-standard, ease); }