` would too). Two elements can't share one active view-transition-name; if a second `header` on the page picked this up, the whole transition would abort. */ body > header { view-transition-name: app-header; } #proto-controls { view-transition-name: app-controls; } /* Directional root slide (upgrade from the default crossfade) — old page fades fast + drifts left; new page fades in + settles from the right. */ ::view-transition-old(root){ animation: 90ms cubic-bezier(.4,0,1,1) both vt-fade-out, 300ms var(--ease-out-quart, cubic-bezier(.23,1,.32,1)) both vt-slide-out; } ::view-transition-new(root){ animation: 210ms cubic-bezier(0,0,.2,1) 90ms both vt-fade-in, 300ms var(--ease-out-quart, cubic-bezier(.23,1,.32,1)) both vt-slide-in; } @keyframes vt-fade-out{ to{opacity:0} } @keyframes vt-fade-in{ from{opacity:0} } @keyframes vt-slide-out{ to{transform:translateX(-2%)} } @keyframes vt-slide-in{ from{transform:translateX(2%)} } /* Same-document swaps (ui.js UI.withViewTransition — tab/filter/persona swaps) must crossfade, not inherit the directional page-nav slide above: both produce the same ::view-transition-*(root) pseudos, so without this override a same-doc swap would slide sideways like a page navigation, which reads wrong for an in-place UI update. Scoped with a root class — not view-transition `types` — because cross-browser support for `types` is too uneven to rely on yet; ui.js adds `.vt-same-doc` to only for the lifetime of the transition, then removes it. */ :root.vt-same-doc::view-transition-old(root){ animation:150ms var(--ease-out-quart) both vt-fade-out; } :root.vt-same-doc::view-transition-new(root){ animation:150ms var(--ease-out-quart) both vt-fade-in; } :root.vt-same-doc::view-transition-image-pair(root){ border-radius:0; } /* list→detail hero morph — inert until the builder adds the data-attrs (data-vt-item / data-vt-detail + data-vt-hero) AND vt.js names the clicked hero `hero-` on nav (only the clicked one). The `*` matches every named group incl. root/header/controls; those three get a `border-radius:0` exclusion below (a rounded corner briefly clipping the header/control-bar chrome into a "notch" every navigation reads as a bug, not a morph) — the rounding here is meant for actual hero- morphs only. */ ::view-transition-group(*){ animation-duration:.35s; animation-timing-function:cubic-bezier(.2,0,0,1); } ::view-transition-image-pair(*){ border-radius:var(--radius,12px); overflow:clip; } ::view-transition-old(*), ::view-transition-new(*){ object-fit:cover; } /* kills the aspect-ratio "taffy" stretch on the morphing image */ ::view-transition-image-pair(root), ::view-transition-image-pair(app-header), ::view-transition-image-pair(app-controls){ border-radius:0; } /* ---- Motion tiers — html[data-motion="calm|standard|expressive"] (default standard) ---- Gate motion INTENSITY by context: a dense dashboard with cinematic morphs is friction; a landing page with only a crossfade under-delivers. The skill DECIDES the tier from register + tone + screen types and records it in DESIGN.md (reference/discovery.md → "Motion tier"); js/motion.js applies it on (set pre-paint by the anti-FOUC script so the incoming page's transition CSS resolves correctly) and the control bar demos it. `standard` is the default and adds NOTHING here — it's every VT / .enter / .reveal rule above, unmodified. `calm` strips motion down to feedback-only; `expressive` dials entrances up a touch. The global prefers-reduced-motion block higher up wins over ALL tiers (including expressive): its !important VT + `.reveal, .enter` overrides beat these non-important rules, and expressive's scroll-driven reveal is gated behind `prefers-reduced-motion: no-preference` so it never applies under reduced motion at all. */ /* calm — dense tools/dashboards. Root nav transition = a fast crossfade ONLY: drop the directional vt-slide-* (keep a short ~130ms fade). vt.js also early-returns the list→detail hero morph under calm, so only the root crossfade remains. Higher specificity than the bare `::view-transition-*(root)` defaults, so it wins; still non-!important, so reduced motion wins. */ html[data-motion="calm"]::view-transition-old(root){ animation: 130ms linear both vt-fade-out; } html[data-motion="calm"]::view-transition-new(root){ animation: 130ms linear both vt-fade-in; } /* calm — .enter and .reveal render at their visible end-state instantly: no entrance animation, no scroll-driven effect (app.js also short-circuits the reveal observer under calm). The :active press, hover, and focus micro-interactions are deliberately NOT touched — those are feedback, not friction. (Loading/Speed is a SEPARATE control; untouched here.) */ /* calm — .enter: neutralize only the ENTRANCE, not the whole transition. A blanket `transition: none` here would also kill any LATER state change that reuses .enter's own opacity/transform transition (e.g. a hover/press effect on an element that also carries .enter) — that element would snap instead of ease, eroding the "micro-interactions kept" promise above. So `transition` itself is left alone (still the base .enter rule's var(--dur-base) var(--ease-out-quart)); only `transition-delay` is zeroed (disarms the stagger) and this @starting-style pins the "before mount" values to the SAME as the end-state (opacity:1, transform:none) instead of the global @starting-style's opacity:0 / translateY(8px). Start === end means there's nothing for the transition to interpolate at mount, so the element still renders at its end-state instantly — but the transition stays armed for whatever comes after. */ html[data-motion="calm"] .enter { transition-delay: 0s; } @starting-style { html[data-motion="calm"] .enter { opacity: 1; transform: none; } } /* calm — .reveal: this blanket `transition: none` stays (unlike .enter above). .reveal has no hover/press use, and killing its transition is load-bearing against a pre-JS fade — it must snap to its visible end-state the instant `.visible` is added (by app.js, or the reduced-motion/no-IO fallback), with no lingering transition to fight. */ html[data-motion="calm"] .reveal { transition: none; animation: none; opacity: 1; transform: none; } /* expressive — marketing/landing/pitch. Everything standard does, PLUS a --spring easing and a slightly richer distance/duration on .enter (the key mount entrance). The @starting-style override outranks the base one by specificity. Reduced motion still neutralizes it (the global block clamps transition-duration + forces the end state, so the spring curve never runs). */ html[data-motion="expressive"] .enter { transition: opacity var(--dur-slow) var(--spring), transform var(--dur-slow) var(--spring); /* the shorthand above resets transition-delay to 0 — re-declare it after, or the staggered entrance (style="--i:0|1|2…") collapses and every sibling mounts simultaneously. */ transition-delay: calc(min(var(--i, 0), 8) * 40ms); } @starting-style { html[data-motion="expressive"] .enter { opacity: 0; transform: translateY(14px); } } /* expressive — .reveal upgraded to scroll-driven where supported. Gated on BOTH prefers-reduced-motion: no-preference (reduced motion never gets it — the global block forces .reveal visible) AND @supports (animation-timeline: view()); everywhere else .reveal keeps its plain IntersectionObserver-driven transition (rules above). No `opacity: 0` declared here — that's deliberate, not an oversight. When the ViewTimeline is ACTIVE, the `reveal-scroll` animation's `both` fill mode already owns the hidden pre-entry state (the `from` keyframe holds opacity 0 until the entry range is reached), so redeclaring it would be redundant. But the timeline can be INACTIVE — no scrollable overflow on the page, or an `overflow: hidden` ancestor breaks it — in which case the animation never actually applies. If `opacity: 0` were set directly on this higher-specificity selector, it would beat the base `.reveal.visible { opacity: 1 }` rule forever and the content would be stuck invisible. Without it, an inactive timeline falls through to the plain cascade: base `.reveal { opacity: 0 }` + `.reveal.visible { opacity: 1 }`, with app.js's IntersectionObserver (still running under expressive) as the working safety net that flips `.visible`. `transition: none` here means that fallback reveal snaps instead of easing — an acceptable trade for never getting stuck invisible. */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { html[data-motion="expressive"] .reveal { transform: none; /* the keyframes own transform now */ transition: none; /* the scroll timeline drives it, not the transition */ animation: reveal-scroll linear both; /* the shorthand above resets animation-delay to 0 — re-declare it after, same --i stagger as the transition-delay fallback, so siblings entering on the same scroll range (a grid row) still stagger under the scroll-driven path. */ animation-delay: calc(min(var(--i, 0), 8) * 40ms); animation-timeline: view(); animation-range: entry 5% cover 30%; } } } @keyframes reveal-scroll { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* Toast (state.js + ui.js use this) */ .proto-toast { position: fixed; bottom: 5rem; left: 50%; transform: translate(-50%, 8px); z-index: var(--z-toast); padding: .55rem 1rem; border-radius: 999px; background: rgb(var(--ink)); color: rgb(var(--surface)); border: 1px solid rgb(var(--ink)); font-size: .8rem; opacity: 0; transition: opacity .2s var(--ease-out-quart), transform .2s var(--ease-out-quart); pointer-events: none; white-space: nowrap; max-width: 90vw; overflow: hidden; text-overflow: ellipsis; } .proto-toast.visible { opacity: 1; transform: translate(-50%, 0); } .proto-toast.is-error { background: rgb(190 60 60); border-color: rgb(190 60 60); color: rgb(255 248 245); } .proto-toast.is-success { background: rgb(40 120 80); border-color: rgb(40 120 80); color: rgb(245 255 250); } /* Undo-toast variant (ui.js's UI.undoToast) — the base rule above truncates the *whole* toast with a single-line ellipsis, which would clip the trailing Undo button off a long message. Here the container becomes a flex row instead: the message (.proto-toast-msg) truncates on its own and the button never shrinks. Gated on :has(.proto-toast-undo), not just the .has-undo class, so this layout only ever applies while a real Undo button is actually present — state.js has its own `.proto-toast`-reusing toast() that ui.js can't reach to keep in sync, and this keeps a stale `.has-undo` class from mis-laying-out its plain toasts. */ .proto-toast.has-undo:has(.proto-toast-undo) { display: inline-flex; align-items: baseline; gap: .75em; white-space: normal; /* the message span below owns truncation now, not this container */ } .proto-toast-msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; /* let the flex item shrink below its content size so ellipsis can apply */ } .proto-toast-undo { flex-shrink: 0; margin: 0; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; text-decoration: underline; color: inherit; cursor: pointer; /* .proto-toast itself stays pointer-events:none (click-through at rest) — this control opts back in so it alone can be clicked. */ pointer-events: auto; } /* Loading button (ui.js toggles .is-loading) */ .is-loading { opacity: .75; cursor: wait; } .is-loading::after { content: ""; display: inline-block; width: .7em; height: .7em; margin-left: .4em; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 999px; vertical-align: -.1em; animation: proto-spin .6s linear infinite; } @keyframes proto-spin { to { transform: rotate(360deg); } } /* Persona show/hide — beats Tailwind display utilities like `.flex` */ .proto-hidden { display: none !important; } /* Skeleton loaders — placeholder silhouettes during fake loads */ .skeleton { background: linear-gradient( 90deg, rgb(var(--muted) / .18) 25%, rgb(var(--muted) / .32) 50%, rgb(var(--muted) / .18) 75% ); background-size: 200% 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite; border-radius: var(--radius); color: transparent; user-select: none; display: block; } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton.is-text { height: .8em; margin: .35em 0; border-radius: 3px; } .skeleton.is-text-lg { height: 1.2em; margin: .35em 0; border-radius: 3px; } .skeleton.is-block { aspect-ratio: 5 / 4; width: 100%; } .skeleton.is-circle { border-radius: 999px; aspect-ratio: 1 / 1; } .skeleton-item { pointer-events: none; } /* Empty state wrapper */ .empty-state { padding: 3rem 1.5rem; text-align: center; border: 1px dashed rgb(var(--muted) / .4); border-radius: var(--radius); color: rgb(var(--ink2)); } .empty-state h3 { color: rgb(var(--ink)); font-family: inherit; /* inherits body; add class="font-heading" in markup for the display face */ font-weight: 500; font-size: 1.25rem; margin-bottom: .5rem; } .empty-state p { margin: 0 auto; max-width: 32rem; } .empty-state .actions { margin-top: 1.25rem; display: inline-flex; gap: .5rem; } /* Screen-reader-only — visually hidden but read aloud. Powers the shared polite live region (`.proto-status`, created lazily by ui.js's UI.announce) that every loader speaks "Loading…" / "Loaded." through. Also usable on any visually-implicit label a build needs announced. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* State matrix component — the non-happy-path states a data region needs, as one token-driven block (icon slot + title + body + one action). `.state--empty` is the empty/first-run/no-results/cleared face (same spirit as `.empty-state`, which stays as-is for existing builds); `.state--error` is the scoped, plain-language failure face with a `[data-retry]` action. `min-height` reserves space so a region swapping default → loading → empty/error doesn't shift the layout around it. Document the full per-region matrix in reference/build.md → "Interaction states". */ .state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); min-height: 12rem; /* reserve space — appearing must not shift layout */ padding: 2.5rem 1.5rem; text-align: center; border: 1px dashed rgb(var(--muted) / .4); border-radius: var(--radius); color: rgb(var(--ink2)); } .state .state-icon { display: inline-flex; width: 2.25rem; height: 2.25rem; color: rgb(var(--ink3)); } .state .state-icon > svg { width: 100%; height: 100%; } .state .state-title { color: rgb(var(--ink)); font-family: inherit; /* add class="font-heading" in markup for the display face */ font-weight: 500; font-size: 1.25rem; } .state .state-body { margin: 0 auto; max-width: 32rem; } .state .state-actions { margin-top: .25rem; display: inline-flex; flex-wrap: wrap; gap: .5rem; justify-content: center; } /* Error face — tint the border + icon with the same --status-error token .proto-toast and .form-field already use, so a theme swap carries it. Keep the copy plain-language and scoped to the region; the [data-retry] button re-runs the failed call (a build wires it to re-fetch and preserve any user input — see reference/build.md). */ .state--error { border-color: rgb(var(--status-error) / .45); } .state--error .state-icon { color: rgb(var(--status-error)); } /* Visible control bar — all options shown inline, no click-to-reveal. Positioned bottom-center so it's discoverable and doesn't fight sidebars. */ #proto-controls { position: fixed; bottom: .9rem; left: 50%; transform: translateX(-50%); z-index: var(--z-sticky); display: flex; flex-direction: column; align-items: center; gap: .25rem; pointer-events: none; } /* Reserve space so the fixed control bar never occludes the last row of content. App-shell layouts that scroll an inner

(instead of the page) should mirror this padding-bottom on that scroll container. */ body { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); } #proto-controls > .proto-bar { display: flex; flex-wrap: nowrap; /* never wrap — graceful scroll instead */ align-items: center; gap: .5rem; padding: .35rem .5rem; border-radius: 999px; background: rgb(var(--elevated) / .95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgb(var(--muted) / .3); box-shadow: var(--shadow-lg); font-size: .72rem; color: rgb(var(--ink2)); pointer-events: auto; max-width: calc(100vw - 2rem); overflow-x: auto; scrollbar-width: none; } #proto-controls > .proto-bar::-webkit-scrollbar { display: none; } #proto-controls .proto-bar-section { display: flex; align-items: center; gap: .4rem; padding: 0 .25rem; flex-shrink: 0; } #proto-controls .proto-bar-section + .proto-bar-section { border-left: 1px solid rgb(var(--muted) / .3); padding-left: .6rem; } #proto-controls .proto-bar-label { color: rgb(var(--ink2)); white-space: nowrap; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; } /* Hide uppercase section labels on medium-width screens to keep single-line. */ @media (max-width: 960px) { #proto-controls .proto-bar-label { display: none; } } #proto-controls .proto-hint { font-size: .65rem; color: rgb(var(--ink2)); opacity: .7; text-align: center; pointer-events: none; padding: .15rem .6rem; border-radius: 999px; background: rgb(var(--elevated) / .85); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } @media (max-width: 960px) { #proto-controls .proto-hint { display: none; } } /* Segmented control: group + options */ .proto-seg-group { display: inline-flex; background: rgb(var(--muted) / .2); border-radius: 999px; padding: 2px; gap: 1px; } .proto-seg { padding: .3rem .7rem; border-radius: 999px; font-size: .7rem; color: rgb(var(--ink2)); border: 0; background: transparent; cursor: pointer; transition: background .15s var(--ease-out-quart), color .15s var(--ease-out-quart); font: inherit; white-space: nowrap; line-height: 1; } .proto-seg:hover { color: rgb(var(--ink)); background: rgb(var(--muted) / .15); } .proto-seg[aria-pressed="true"] { background: rgb(var(--ink)); color: rgb(var(--surface)); font-weight: 500; } /* Wide content (data tables especially) scrolls inside this wrapper instead of pushing the whole page wider than the viewport. Wrap every