impact-nova 2.6.2 → 3.0.0-alpha.0

package/dist/impact-nova-components.css

@@ -471,12 +471,29 @@
   flex-direction: row;
 }
 
-/* Wizard — layout via data slots; avoids hidden/lg:flex cascade conflicts in consumer apps. */
+/* Wizard — layout via data slots; avoids hidden/lg:flex cascade conflicts in consumer apps.
+   Parts are optional: compose sidebar (horizontal) or intro/main/nav (vertical) as needed. */
 [data-component=wizard][data-slot=layout] {
   display: flex;
+  width: 100%;
+  max-width: 100%;
+}
+
+@media (min-width: 768px) {
+  [data-component=wizard][data-slot=layout]:not([data-orientation=vertical]) {
+    width: 83%;
+  }
+}
+[data-component=wizard][data-slot=layout][data-orientation=horizontal],
+[data-component=wizard][data-slot=layout]:not([data-orientation]) {
   flex-direction: row;
 }
 
+[data-component=wizard][data-slot=layout][data-orientation=vertical] {
+  flex-direction: column;
+  width: 100%;
+}
+
 [data-component=wizard] [data-slot=sidebar] {
   display: none;
   flex-direction: column;
@@ -488,6 +505,105 @@
     display: flex;
   }
 }
+[data-component=wizard] [data-slot=main] {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+}
+
+@media (min-width: 768px) {
+  [data-component=wizard] [data-slot=main] {
+    flex-direction: row;
+  }
+}
+[data-component=wizard] [data-slot=nav] {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  align-self: stretch;
+  position: relative;
+  width: 100%;
+  height: auto;
+}
+
+@media (min-width: 768px) {
+  [data-component=wizard] [data-slot=nav] {
+    width: 240px;
+    height: 100%;
+  }
+}
+@media (min-width: 1024px) {
+  [data-component=wizard] [data-slot=nav] {
+    width: 280px;
+  }
+}
+/* Inset divider — stacked: hairline under nav; md+: vertical with top/bottom gaps. */
+[data-component=wizard] [data-slot=nav][data-bordered=true]::after {
+  content: "";
+  position: absolute;
+  top: auto;
+  right: 1.25rem;
+  bottom: 0;
+  left: 1.25rem;
+  width: auto;
+  height: 1px;
+  background-color: var(--color-border-hairline);
+  pointer-events: none;
+}
+
+@media (min-width: 768px) {
+  [data-component=wizard] [data-slot=nav][data-bordered=true]::after {
+    top: 1.25rem;
+    right: 0;
+    bottom: 1.25rem;
+    left: auto;
+    width: 1px;
+    height: auto;
+  }
+}
+[data-component=wizard] [data-slot=footer] {
+  width: 100%;
+}
+
+[data-component=wizard] [data-slot=footer-inner] {
+  flex-wrap: wrap;
+}
+
+/* Intro — Title/Description keep sidebar inset classes; zero them inside intro. */
+[data-component=wizard] [data-slot=intro] [data-slot=title],
+[data-component=wizard] [data-slot=intro] [data-slot=description] {
+  padding-inline: 0;
+}
+
+[data-component=wizard] [data-slot=intro] [data-slot=title] {
+  margin-bottom: 0;
+}
+
+@media (max-width: 767px) {
+  [data-component=wizard] [data-slot=decoration] {
+    display: none;
+  }
+}
+/* Vertical pack — keep footer rule + button padding aligned (inset, not edge-to-edge). */
+[data-component=wizard][data-orientation=vertical] [data-slot=main] [data-slot=footer-rule] {
+  margin-inline: 1.5rem;
+}
+
+[data-component=wizard][data-orientation=vertical] [data-slot=main] [data-slot=footer-inner] {
+  padding-inline: 1.5rem;
+}
+
+@media (min-width: 640px) {
+  [data-component=wizard][data-orientation=vertical] [data-slot=main] [data-slot=footer-rule] {
+    margin-inline: 2rem;
+  }
+  [data-component=wizard][data-orientation=vertical] [data-slot=main] [data-slot=footer-inner] {
+    padding-inline: 2rem;
+  }
+}
 /* Choice card group — flex layout via data-layout, not Tailwind flex-* utilities. */
 [data-component=choice-card-group] {
   display: flex;
@@ -508,7 +624,7 @@
   flex-wrap: wrap;
 }
 
-/* Header bot button — animated multi-stop gradient (tokens in impact-nova-tokens.scss) */
+/* Header bot button (Ask Alan) — animated multi-stop fill (tokens in impact-nova-tokens.scss) */
 .header-bot-button-gradient {
   background-size: 400% 400%;
   background-image: linear-gradient(-45deg, var(--color-header-bot-gradient-teal), var(--color-header-bot-gradient-indigo), var(--color-header-bot-gradient-orange), var(--color-header-bot-gradient-purple), var(--color-header-bot-gradient-navy));
@@ -518,11 +634,395 @@
   background-image: linear-gradient(-45deg, var(--color-header-bot-gradient-teal-hover), var(--color-header-bot-gradient-indigo-hover), var(--color-header-bot-gradient-orange-hover));
 }
 
+/* Header Iris button — navy fill + edge wash (IA DS ChatbotButtons default → default 4) */
+@property --header-bot-angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 302deg;
+}
+@property --header-bot-glow {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: transparent;
+}
+@property --header-bot-stop-from {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --header-bot-stop-to {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --header-bot-hover-nudge {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+@keyframes header-bot-edge-wash {
+  0% {
+    --header-bot-angle: 302deg;
+    --header-bot-glow: var(--color-header-bot-gradient-navy);
+    --header-bot-stop-from: 56.12%;
+    --header-bot-stop-to: 111.41%;
+  }
+  20% {
+    --header-bot-angle: 302deg;
+    --header-bot-glow: var(--color-header-bot-gradient-teal-hover);
+    --header-bot-stop-from: 56.12%;
+    --header-bot-stop-to: 111.41%;
+  }
+  40% {
+    --header-bot-angle: 402deg;
+    --header-bot-glow: var(--color-header-bot-gradient-indigo);
+    --header-bot-stop-from: 48.84%;
+    --header-bot-stop-to: 105.61%;
+  }
+  60% {
+    --header-bot-angle: 496deg;
+    --header-bot-glow: var(--color-header-bot-gradient-orange);
+    --header-bot-stop-from: 37.18%;
+    --header-bot-stop-to: 125.01%;
+  }
+  80% {
+    --header-bot-angle: 589deg;
+    --header-bot-glow: var(--color-header-bot-gradient-purple);
+    --header-bot-stop-from: 52.62%;
+    --header-bot-stop-to: 91.71%;
+  }
+  100% {
+    --header-bot-angle: 662deg;
+    --header-bot-glow: var(--color-header-bot-gradient-navy);
+    --header-bot-stop-from: 56.12%;
+    --header-bot-stop-to: 111.41%;
+  }
+}
+.header-iris-button-gradient {
+  --header-bot-angle: 302deg;
+  --header-bot-glow: var(--color-header-bot-gradient-navy);
+  --header-bot-stop-from: 56.12%;
+  --header-bot-stop-to: 111.41%;
+  border: 1.2px solid transparent;
+  --header-bot-hover-nudge: 0%;
+  background-image: linear-gradient(var(--header-bot-angle), var(--color-header-bot-gradient-navy) var(--header-bot-stop-from), var(--header-bot-glow) calc(var(--header-bot-stop-to) + var(--header-bot-hover-nudge))), linear-gradient(90deg, var(--color-header-bot-gradient-teal-hover), var(--color-header-bot-gradient-indigo-hover), var(--color-header-bot-gradient-orange-hover));
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
+  animation: header-bot-edge-wash 8s linear infinite;
+  transition: --header-bot-hover-nudge 200ms ease;
+}
+
+.header-iris-button-gradient:hover {
+  --header-bot-hover-nudge: -14%;
+}
+
+/* Iris — white fill; conic gradient border (Figma Chatbot buttons variant frames) */
+@property --iris-border-angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 0deg;
+}
+@keyframes iris-border-spin {
+  to {
+    --iris-border-angle: 360deg;
+  }
+}
+.iris-edge-wash-button {
+  --iris-border-duration: 2.5s;
+  --iris-border-angle: 0deg;
+  display: inline-flex;
+  vertical-align: middle;
+  border: 1.2px solid transparent;
+  background-image: linear-gradient(var(--color-surface-elevated), var(--color-surface-elevated)), conic-gradient(from var(--iris-border-angle), var(--color-header-bot-gradient-teal-hover), var(--color-header-bot-gradient-indigo-hover), var(--color-header-bot-gradient-purple), var(--color-header-bot-gradient-orange-hover), var(--color-header-bot-gradient-teal-hover));
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
+  animation: iris-border-spin var(--iris-border-duration, 2.5s) linear infinite;
+  transition: animation-duration 160ms ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .iris-edge-wash-button {
+    animation: none;
+  }
+}
+.iris-edge-wash-button:hover, .iris-edge-wash-button:has(:hover), .iris-edge-wash-button:has(:focus-visible) {
+  animation-duration: 1.15s;
+}
+.iris-edge-wash-button:active, .iris-edge-wash-button:has(:active) {
+  animation-duration: 0.5s;
+}
+.iris-edge-wash-button > [data-component=iris-button],
+.iris-edge-wash-button > [data-component=iris-icon-button] {
+  border-radius: inherit;
+  background-color: transparent;
+}
+.iris-edge-wash-button > [data-component=iris-button]:hover,
+.iris-edge-wash-button > [data-component=iris-icon-button]:hover {
+  background-color: transparent;
+}
+
+/* Menu / status / wrap — static fill; conic ring on ::before only (Figma Menu 2852-95992). */
+.iris-edge-wash-shell--menu {
+  --iris-border-angle: 0deg;
+  position: relative;
+  isolation: isolate;
+  display: inline-flex;
+  vertical-align: middle;
+}
+.iris-edge-wash-shell--menu.iris-edge-wash-shell--fluid {
+  display: flex;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+}
+.iris-edge-wash-shell--menu {
+  background: linear-gradient(90deg, var(--color-iris-menu-surface-from) 0%, var(--color-iris-menu-surface-to) 100%);
+  backdrop-filter: blur(3px);
+  box-shadow: var(--shadow-iris-menu);
+}
+.iris-edge-wash-shell--menu::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border-radius: inherit;
+  padding: 1.2px;
+  background: conic-gradient(from var(--iris-border-angle), var(--color-header-bot-gradient-teal-hover), var(--color-header-bot-gradient-indigo-hover), var(--color-header-bot-gradient-purple), var(--color-header-bot-gradient-orange-hover), var(--color-header-bot-gradient-teal-hover));
+  animation: iris-border-spin var(--iris-border-duration, 2.5s) linear infinite;
+  pointer-events: none;
+  -webkit-mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
+  mask-composite: exclude;
+}
+@media (prefers-reduced-motion: reduce) {
+  .iris-edge-wash-shell--menu::before {
+    animation: none;
+  }
+}
+.iris-edge-wash-shell--menu > [data-component=iris-menu] {
+  position: relative;
+  z-index: 0;
+  border-radius: inherit;
+  background: transparent;
+  box-shadow: none;
+}
+.iris-edge-wash-shell--menu {
+  /* Status chip — fill only. Animated ring is loading (Gathering insights...). */
+}
+.iris-edge-wash-shell--menu.iris-edge-wash-shell--menu-plain::before {
+  content: none;
+  animation: none;
+}
+
+.iris-alan-gradient-icon {
+  display: block;
+}
+
+.iris-menu-surface {
+  background: linear-gradient(90deg, var(--color-iris-menu-surface-from) 0%, var(--color-iris-menu-surface-to) 100%);
+  box-shadow: var(--shadow-iris-menu);
+}
+
+.iris-menu-surface-card {
+  background-image: linear-gradient(to right, var(--color-iris-menu-card-surface-from), var(--color-iris-menu-card-surface-to));
+  box-shadow: var(--shadow-iris-menu-card);
+}
+
+.iris-menu-surface-wrap {
+  border-color: var(--color-iris-border-violet);
+}
+
+/* Status overflow tooltip — menu wrap chrome (gradient fill + animated ring + arrow). */
+.iris-menu-overflow-tooltip {
+  --iris-border-angle: 0deg;
+  position: relative;
+  isolation: isolate;
+  overflow: visible !important;
+  max-width: 274px;
+  border: 0 !important;
+  border-radius: 12px !important;
+  padding: 8px 12px !important;
+  background: linear-gradient(90deg, var(--color-iris-menu-surface-from) 0%, var(--color-iris-menu-surface-to) 100%) !important;
+  color: var(--color-foreground-title) !important;
+  box-shadow: var(--shadow-iris-menu), inset 0 0 0 1px var(--color-iris-border-violet);
+  backdrop-filter: blur(3px);
+  font-weight: 500;
+  text-transform: none;
+}
+.iris-menu-overflow-tooltip::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  border-radius: inherit;
+  padding: 1.2px;
+  background: conic-gradient(from var(--iris-border-angle), var(--color-header-bot-gradient-teal-hover), var(--color-header-bot-gradient-indigo-hover), var(--color-header-bot-gradient-purple), var(--color-header-bot-gradient-orange-hover), var(--color-header-bot-gradient-teal-hover));
+  animation: iris-border-spin var(--iris-border-duration, 2.5s) linear infinite;
+  pointer-events: none;
+  -webkit-mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
+  mask-composite: exclude;
+}
+@media (prefers-reduced-motion: reduce) {
+  .iris-menu-overflow-tooltip::before {
+    animation: none;
+  }
+}
+.iris-menu-overflow-tooltip > svg {
+  fill: var(--color-iris-menu-surface-to) !important;
+  stroke: var(--color-iris-border-violet);
+  stroke-width: 1px;
+}
+
+/* Iris agent control — stroke ring (field) + agentic halo (section); Figma STROKE GLOW / Glow */
+html.iris-agent-session {
+  cursor: none !important;
+}
+
+html.iris-agent-session *:not(.iris-agent-cursor):not(.iris-agent-cursor *):not([data-component=iris-agent-cursor]) {
+  cursor: none !important;
+}
+
+.iris-control-region {
+  position: relative;
+  isolation: isolate;
+  overflow: visible;
+}
+
+.iris-control-region[data-variant=section][data-locked=true] {
+  overflow: clip;
+}
+
+.iris-control-region--locked .iris-control-region__content {
+  pointer-events: none;
+  user-select: none;
+}
+
+/* Chrome is out-of-flow — does not change region width/height (Figma STROKE GLOW / Glow). */
+.iris-control-region__chrome {
+  position: absolute;
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.iris-control-region__chrome--stroke {
+  --iris-border-angle: 0deg;
+  inset: -2px;
+  padding: 2px;
+  background: conic-gradient(from var(--iris-border-angle), var(--color-header-bot-gradient-teal-hover), var(--color-header-bot-gradient-indigo-hover), var(--color-header-bot-gradient-purple), var(--color-header-bot-gradient-orange-hover), var(--color-header-bot-gradient-teal-hover));
+  animation: iris-border-spin var(--iris-border-duration, 2.5s) linear infinite;
+  -webkit-mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
+  mask-composite: exclude;
+}
+@media (prefers-reduced-motion: reduce) {
+  .iris-control-region__chrome--stroke {
+    animation: none;
+  }
+}
+
+/* ponytail: mask luminance must be literal white — CSS vars break ring (corner-only arcs). */
+.iris-control-region__content--section-locked {
+  isolation: isolate;
+}
+
+/* Agentic-flows Glow 14:71497 / 14:71469 — 11px stroke, then 12.5px layer blur, clip outer bleed. */
+.iris-control-region__chrome--section {
+  inset: 0;
+  z-index: 15;
+  overflow: clip;
+}
+
+.iris-control-region__section-halo {
+  position: absolute;
+  inset: -8px -10px -10px -8px;
+  pointer-events: none;
+  filter: blur(12.5px);
+}
+.iris-control-region__section-halo::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  border-radius: inherit;
+  padding: 11px;
+  --header-bot-angle: 0deg;
+  background: conic-gradient(from var(--header-bot-angle), var(--color-iris-control-glow-cyan), var(--color-header-bot-gradient-purple), var(--color-iris-control-glow-orange), var(--color-header-bot-gradient-indigo-hover), var(--color-iris-control-glow-cyan));
+  -webkit-mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
+  mask-composite: exclude;
+  animation: iris-control-section-edge-wash 5s linear infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .iris-control-region__section-halo::before {
+    animation: none;
+    --header-bot-angle: 302deg;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .iris-control-region__section-halo {
+    filter: none;
+  }
+}
+
+/* Linear motion — rotate multi-stop halo (cyan / violet / orange together). */
+@keyframes iris-control-section-edge-wash {
+  to {
+    --header-bot-angle: 360deg;
+  }
+}
+.iris-control-region__shield {
+  cursor: none;
+  background: transparent;
+}
+
+/* Figma 7717 — vector pointer + comment bubble (16px / 24px type, primary fill). */
+.iris-agent-cursor {
+  position: relative;
+  display: block;
+  width: max-content;
+  height: max-content;
+  will-change: transform;
+}
+
+.iris-agent-cursor__pointer {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.iris-agent-cursor__bubble {
+  position: absolute;
+  left: 14px;
+  top: 10px;
+  margin: 0;
+  max-width: min(100vw - 2rem, 20rem);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border: 2px solid var(--color-primary-strong);
+  border-radius: 2px 24px 24px 24px;
+  background-color: var(--color-primary);
+  padding: 8px 20px 8px 16px;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+  color: var(--color-primary-foreground);
+  box-shadow: 4px 4px 5px color-mix(in srgb, var(--color-primary) 16%, transparent);
+}
+
 /* Header title badge — violet → primary (Figma Violet/500 → Primary) */
 .header-badge-gradient {
   background-image: linear-gradient(270deg, var(--color-header-badge-gradient-from) 0%, var(--color-header-badge-gradient-to) 100%);
 }
 
+[data-component=iris-chat-message][data-role=user] [data-slot=bubble] {
+  background-image: var(--gradient-chat-mine);
+}
+
 [data-component=file-upload-dropzone][data-state=drag-over] {
   background-image: var(--gradient-file-upload-drag);
   box-shadow: var(--shadow-file-upload-drag);
@@ -537,6 +1037,181 @@
 .saved-view-bar-gradient {
   background-image: linear-gradient(83.74deg, var(--color-saved-view-surface-start) 72.68%, var(--color-saved-view-surface-end) 108.88%);
 }
+
+/* Soft tabs — Figma / UAT diagonal wash (111.56deg, surface → white) */
+[data-tabs=trigger].tabs-soft-trigger {
+  background-image: linear-gradient(111.56deg, var(--tab-gradient-from, var(--color-surface-muted)) 2.2961%, var(--color-background) 95.969%);
+}
+
+/* Iris thinking loaders — nzbin dot-typing / dot-falling / dot-bricks @ 4px */
+.iris-dot-loader-wrap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 16px;
+  flex-shrink: 0;
+  overflow: visible;
+}
+
+.iris-dot-loader {
+  --iris-dot-size: 4px;
+  position: relative;
+  width: var(--iris-dot-size);
+  height: var(--iris-dot-size);
+  border-radius: calc(var(--iris-dot-size) / 2);
+  background-color: currentColor;
+  color: currentColor;
+  flex-shrink: 0;
+}
+
+.iris-dot-typing {
+  left: -10000px;
+  box-shadow: 9993px 0 0 0 currentColor, 10000px 0 0 0 currentColor, 10007px 0 0 0 currentColor;
+  animation: iris-dot-typing 2s infinite linear;
+}
+
+@keyframes iris-dot-typing {
+  0% {
+    box-shadow: 9993px 0 0 0 currentColor, 10000px 0 0 0 currentColor, 10007px 0 0 0 currentColor;
+  }
+  16.667% {
+    box-shadow: 9993px -4px 0 0 currentColor, 10000px 0 0 0 currentColor, 10007px 0 0 0 currentColor;
+  }
+  33.333% {
+    box-shadow: 9993px 0 0 0 currentColor, 10000px 0 0 0 currentColor, 10007px 0 0 0 currentColor;
+  }
+  50% {
+    box-shadow: 9993px 0 0 0 currentColor, 10000px -4px 0 0 currentColor, 10007px 0 0 0 currentColor;
+  }
+  66.667% {
+    box-shadow: 9993px 0 0 0 currentColor, 10000px 0 0 0 currentColor, 10007px 0 0 0 currentColor;
+  }
+  83.333% {
+    box-shadow: 9993px 0 0 0 currentColor, 10000px 0 0 0 currentColor, 10007px -4px 0 0 currentColor;
+  }
+  100% {
+    box-shadow: 9993px 0 0 0 currentColor, 10000px 0 0 0 currentColor, 10007px 0 0 0 currentColor;
+  }
+}
+.iris-dot-falling {
+  left: -10000px;
+  box-shadow: 10000px 0 0 0 currentColor;
+  animation: iris-dot-falling 1.6s infinite linear;
+  animation-delay: 0.1s;
+}
+
+.iris-dot-falling::before,
+.iris-dot-falling::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  width: var(--iris-dot-size);
+  height: var(--iris-dot-size);
+  border-radius: calc(var(--iris-dot-size) / 2);
+  background-color: currentColor;
+  color: currentColor;
+}
+
+.iris-dot-falling::before {
+  animation: iris-dot-falling-before 1.6s infinite linear;
+}
+
+.iris-dot-falling::after {
+  animation: iris-dot-falling-after 1.6s infinite linear;
+  animation-delay: 0.2s;
+}
+
+@keyframes iris-dot-falling {
+  0% {
+    box-shadow: 10000px -6px 0 0 transparent;
+  }
+  25%, 50%, 75% {
+    box-shadow: 10000px 0 0 0 currentColor;
+  }
+  100% {
+    box-shadow: 10000px 6px 0 0 transparent;
+  }
+}
+@keyframes iris-dot-falling-before {
+  0% {
+    box-shadow: 9993px -6px 0 0 transparent;
+  }
+  25%, 50%, 75% {
+    box-shadow: 9993px 0 0 0 currentColor;
+  }
+  100% {
+    box-shadow: 9993px 6px 0 0 transparent;
+  }
+}
+@keyframes iris-dot-falling-after {
+  0% {
+    box-shadow: 10007px -6px 0 0 transparent;
+  }
+  25%, 50%, 75% {
+    box-shadow: 10007px 0 0 0 currentColor;
+  }
+  100% {
+    box-shadow: 10007px 6px 0 0 transparent;
+  }
+}
+.iris-dot-bricks {
+  top: 3px;
+  left: -10000px;
+  box-shadow: 9993px -6px 0 0 currentColor, 9993px 0 0 0 currentColor, 10007px 0 0 0 currentColor;
+  animation: iris-dot-bricks 2.5s infinite ease;
+}
+
+@keyframes iris-dot-bricks {
+  0% {
+    box-shadow: 9993px -6px 0 0 currentColor, 9993px 0 0 0 currentColor, 10007px 0 0 0 currentColor;
+  }
+  8.333% {
+    box-shadow: 10007px -6px 0 0 currentColor, 9993px 0 0 0 currentColor, 10007px 0 0 0 currentColor;
+  }
+  16.667% {
+    box-shadow: 10007px -6px 0 0 currentColor, 9993px -6px 0 0 currentColor, 10007px 0 0 0 currentColor;
+  }
+  25% {
+    box-shadow: 10007px -6px 0 0 currentColor, 9993px -6px 0 0 currentColor, 9993px 0 0 0 currentColor;
+  }
+  33.333% {
+    box-shadow: 10007px 0 0 0 currentColor, 9993px -6px 0 0 currentColor, 9993px 0 0 0 currentColor;
+  }
+  41.667% {
+    box-shadow: 10007px 0 0 0 currentColor, 10007px -6px 0 0 currentColor, 9993px 0 0 0 currentColor;
+  }
+  50% {
+    box-shadow: 10007px 0 0 0 currentColor, 10007px -6px 0 0 currentColor, 9993px -6px 0 0 currentColor;
+  }
+  58.333% {
+    box-shadow: 9993px 0 0 0 currentColor, 10007px -6px 0 0 currentColor, 9993px -6px 0 0 currentColor;
+  }
+  66.666% {
+    box-shadow: 9993px 0 0 0 currentColor, 10007px 0 0 0 currentColor, 9993px -6px 0 0 currentColor;
+  }
+  75% {
+    box-shadow: 9993px 0 0 0 currentColor, 10007px 0 0 0 currentColor, 10007px -6px 0 0 currentColor;
+  }
+  83.333% {
+    box-shadow: 9993px -6px 0 0 currentColor, 10007px 0 0 0 currentColor, 10007px -6px 0 0 currentColor;
+  }
+  91.667% {
+    box-shadow: 9993px -6px 0 0 currentColor, 9993px 0 0 0 currentColor, 10007px -6px 0 0 currentColor;
+  }
+  100% {
+    box-shadow: 9993px -6px 0 0 currentColor, 9993px 0 0 0 currentColor, 10007px 0 0 0 currentColor;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .iris-dot-typing,
+  .iris-dot-falling,
+  .iris-dot-falling::before,
+  .iris-dot-falling::after,
+  .iris-dot-bricks {
+    animation: none;
+  }
+}
 /* Custom AG Grid Styles — plain CSS (no SCSS nesting). */
 
 /* ponytail: Quartz theme sets transition:all on header cells. Column virtualization updates
@@ -1068,3 +1743,298 @@
     transition: none;
   }
 }
+
+/* List variant — same AG Grid row model, card chrome. Gap lives inside rowHeight /
+   headerHeight so absolute virtualization stays correct. */
+[data-component="ag-grid-react"][data-variant="list"] {
+  --in-ag-list-gap: 12px;
+  --in-ag-list-radius: var(--radius);
+  --in-ag-list-header-height: 40px;
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-root-wrapper,
+[data-component="ag-grid-react"][data-variant="list"] .ag-root-wrapper-body {
+  background-color: transparent;
+  border: none;
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-header {
+  background-color: transparent;
+  border: none;
+  height: var(--in-ag-list-header-height);
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-grid-pinned-top-rows {
+  height: var(--in-ag-list-header-height);
+  margin-bottom: var(--in-ag-list-gap);
+  background-color: transparent;
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-header-row {
+  height: var(--in-ag-list-header-height);
+  background-color: var(--color-surface-muted);
+  border-radius: var(--in-ag-list-radius);
+  overflow: hidden;
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-header-cell,
+[data-component="ag-grid-react"][data-variant="list"] .ag-header-group-cell {
+  height: var(--in-ag-list-header-height);
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-pinned-left-header,
+[data-component="ag-grid-react"][data-variant="list"] .ag-header-viewport,
+[data-component="ag-grid-react"][data-variant="list"] .ag-pinned-right-header {
+  height: var(--in-ag-list-header-height);
+  max-height: var(--in-ag-list-header-height);
+  background-color: var(--color-surface-muted);
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-header-viewport {
+  border-radius: var(--in-ag-list-radius);
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-pinned-left-header:has(.ag-header-cell) {
+  border-radius: var(--in-ag-list-radius) 0 0 var(--in-ag-list-radius);
+}
+
+[data-component="ag-grid-react"][data-variant="list"]:has(.ag-pinned-left-header .ag-header-cell) .ag-header-viewport,
+[data-component="ag-grid-react"][data-variant="list"]:has(.ag-pinned-left-header .ag-header-cell) .ag-header-row {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-pinned-right-header:has(.ag-header-cell) {
+  border-radius: 0 var(--in-ag-list-radius) var(--in-ag-list-radius) 0;
+}
+
+[data-component="ag-grid-react"][data-variant="list"]:has(.ag-pinned-right-header .ag-header-cell) .ag-header-viewport,
+[data-component="ag-grid-react"][data-variant="list"]:has(.ag-pinned-right-header .ag-header-cell) .ag-header-row {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-header-cell,
+[data-component="ag-grid-react"][data-variant="list"] .ag-header-group-cell,
+[data-component="ag-grid-react"][data-variant="list"] .ag-header-cell.ag-header-span-height,
+[data-component="ag-grid-react"][data-variant="list"] .ag-pinned-left-header .ag-header-cell,
+[data-component="ag-grid-react"][data-variant="list"] .ag-pinned-right-header .ag-header-cell {
+  background-color: transparent;
+  border: none;
+  color: var(--color-neutral-charcoal);
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-grid-header-label-text {
+  color: var(--color-neutral-charcoal);
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 21px;
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-header-cell {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-header-cell[aria-colindex="1"] {
+  padding-left: 20px;
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-header-cell:last-child {
+  padding-right: 20px;
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-header-cell:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: 0;
+  width: 1px;
+  height: 24px;
+  transform: translateY(-50%);
+  background-color: var(--color-border-tertiary);
+  pointer-events: none;
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-body,
+[data-component="ag-grid-react"][data-variant="list"] .ag-body-viewport,
+[data-component="ag-grid-react"][data-variant="list"] .ag-center-cols-viewport,
+[data-component="ag-grid-react"][data-variant="list"] .ag-center-cols-container,
+[data-component="ag-grid-react"][data-variant="list"] .ag-pinned-left-cols-container,
+[data-component="ag-grid-react"][data-variant="list"] .ag-pinned-right-cols-container {
+  background-color: transparent;
+}
+
+/* Card chrome on ::before so rowHeight stays full slot (gap = bottom inset). */
+[data-component="ag-grid-react"][data-variant="list"] .ag-row {
+  /* Do not override position — AG Grid rows are absolutely positioned for virtualization. */
+  box-sizing: border-box;
+  background-color: transparent;
+  border: none;
+  isolation: isolate;
+  /* Hit target = card cells only; skip the 12px inter-row gutter in this row slot. */
+  pointer-events: none;
+}
+
+/* AG Grid row hover/selection overlays span the full rowHeight slot (inset: 0).
+   List cards are shorter — disable theme overlays; use .ag-row::before below. */
+[data-component="ag-grid-react"][data-variant="list"] .ag-row.ag-row-hover:not(.ag-full-width-row) .ag-grid-scrolling-cells::before,
+[data-component="ag-grid-react"][data-variant="list"] .ag-row.ag-row-hover:not(.ag-full-width-row) .ag-grid-pinned-left-cells::before,
+[data-component="ag-grid-react"][data-variant="list"] .ag-row.ag-row-hover:not(.ag-full-width-row) .ag-grid-pinned-right-cells::before,
+[data-component="ag-grid-react"][data-variant="list"] .ag-row.ag-row-selected:not(.ag-full-width-row) .ag-grid-scrolling-cells::before,
+[data-component="ag-grid-react"][data-variant="list"] .ag-row.ag-row-selected:not(.ag-full-width-row) .ag-grid-pinned-left-cells::before,
+[data-component="ag-grid-react"][data-variant="list"] .ag-row.ag-row-selected:not(.ag-full-width-row) .ag-grid-pinned-right-cells::before {
+  display: none;
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-row::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: var(--in-ag-list-gap);
+  z-index: 0;
+  pointer-events: none;
+  background-color: var(--color-background);
+  border: 1px solid var(--color-border);
+  border-radius: var(--in-ag-list-radius);
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-pinned-left-cols-container .ag-row::before,
+[data-component="ag-grid-react"][data-variant="list"] .ag-grid-pinned-left-cells .ag-row::before {
+  border-right: none;
+  border-radius: var(--in-ag-list-radius) 0 0 var(--in-ag-list-radius);
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-pinned-right-cols-container .ag-row::before,
+[data-component="ag-grid-react"][data-variant="list"] .ag-grid-pinned-right-cells .ag-row::before {
+  border-left: none;
+  border-radius: 0 var(--in-ag-list-radius) var(--in-ag-list-radius) 0;
+}
+
+[data-component="ag-grid-react"][data-variant="list"]:has(.ag-pinned-left-cols-container .ag-row) .ag-center-cols-container .ag-row::before,
+[data-component="ag-grid-react"][data-variant="list"]:has(.ag-grid-pinned-left-cells .ag-row) .ag-center-cols-container .ag-row::before {
+  border-left: none;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+[data-component="ag-grid-react"][data-variant="list"]:has(.ag-pinned-right-cols-container .ag-row) .ag-center-cols-container .ag-row::before,
+[data-component="ag-grid-react"][data-variant="list"]:has(.ag-grid-pinned-right-cells .ag-row) .ag-center-cols-container .ag-row::before {
+  border-right: none;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-row.ag-row-hover::before {
+  background-color: var(--color-surface-muted);
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-row.ag-row-selected::before {
+  background-color: var(--color-primary-soft);
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-cell {
+  z-index: 1;
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: calc(var(--ag-row-height, 60px) - var(--in-ag-list-gap));
+  max-height: calc(var(--ag-row-height, 60px) - var(--in-ag-list-gap));
+  background-color: transparent;
+  /* Reserve 1px so cell/range focus borders match the table grid without shifting content. */
+  border: 1px solid transparent;
+  color: var(--color-foreground);
+  font-weight: 500;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-cell.ag-cell-range-selected,
+[data-component="ag-grid-react"][data-variant="list"] .ag-cell.ag-cell-range-single-cell,
+[data-component="ag-grid-react"][data-variant="list"] .ag-cell.ag-cell-focus:not(.ag-cell-inline-editing) {
+  border-width: 1px;
+  border-style: var(--ag-range-selection-border-style, solid);
+  border-color: var(--ag-range-selection-border-color);
+  background-color: var(--ag-range-selection-background-color);
+  outline: none;
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-cell-inner-padding {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-cell[aria-colindex="1"] {
+  padding-left: 20px;
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-row .ag-cell:last-child {
+  padding-right: 20px;
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-paging-panel {
+  border-top: none;
+  background-color: transparent;
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .in-ag-editable-cell-highlight {
+  background-color: transparent;
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-header-cell:has(.ag-header-cell-search-active) {
+  padding: 4px 8px;
+  outline: none;
+  box-shadow: none;
+  background-color: transparent;
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-header-cell:has(.ag-header-cell-search-active):focus,
+[data-component="ag-grid-react"][data-variant="list"] .ag-header-cell:has(.ag-header-cell-search-active):focus-within,
+[data-component="ag-grid-react"][data-variant="list"] .ag-header-cell:has(.ag-header-cell-search-active).ag-header-cell-moving {
+  outline: none;
+  box-shadow: none;
+  background-color: transparent;
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-header-cell:has(.ag-header-cell-search-active)::after {
+  display: none;
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-header-cell:has(.ag-header-cell-search-active) .ag-header-cell-comp-wrapper {
+  width: 100%;
+  min-width: 0;
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-header-cell-search-active {
+  background-color: transparent;
+  padding: 0;
+  gap: 6px;
+  width: 100%;
+  min-width: 0;
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-header-cell-search-active > :first-child {
+  flex: 1 1 0%;
+  min-width: 0;
+  width: 100%;
+  max-width: none;
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-header-cell-search-active [data-component="input"],
+[data-component="ag-grid-react"][data-variant="list"] .ag-header-cell-search-active [data-component="select"] {
+  width: 100%;
+  min-width: 0;
+}
+
+[data-component="ag-grid-react"][data-variant="list"] .ag-header-cell-search-active [data-component="input-border"],
+[data-component="ag-grid-react"][data-variant="list"] .ag-header-cell-search-active [data-component="select-trigger"] {
+  height: 32px;
+  min-height: 32px;
+  width: 100%;
+  max-width: none;
+  box-shadow: none;
+  background-color: var(--color-background);
+}