@actioneer/ads 0.1.0

package/styles.css

@@ -0,0 +1,653 @@
+/* @actioneer/ads — generated by scripts/build-lib-styles.mjs. Do not edit. */
+/* Must be @import'd into the SAME CSS graph as `@import "tailwindcss"` so
+   @theme/@source are processed; importing it standalone leaves tokens unset. */
+@import "tw-shimmer";
+@import "tw-animate-css";
+
+/* ---- Aribau Grotesk ---- */
+/* Aribau Grotesk — ADS 1.0 brand typeface.
+   Two weights only: Regular (400) and Bold (700).
+   The weight RANGES fold Tailwind's intermediate utilities onto these two
+   physical files: `font-normal`/`font-medium` → Regular, `font-semibold`/`font-bold` → Bold.
+   `font-synthesis-weight: none` (set in index.css) prevents faux weights. */
+@font-face {
+  font-family: "Aribau Grotesk";
+  src: url("./fonts/aribau-grotesk-400.otf") format("opentype");
+  font-weight: 100 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Aribau Grotesk";
+  src: url("./fonts/aribau-grotesk-700.otf") format("opentype");
+  font-weight: 600 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* ---- Design tokens ---- */
+/*
+ * ============================================================
+ *  ADS 1.0 — Design Tokens
+ *  Brand: BLACK · Typeface: Aribau Grotesk (Regular + Bold)
+ * ============================================================
+ */
+@theme {
+  /* ---- Typography ----
+     One typeface only. No monospace font — numeric/code contexts use
+     Aribau Grotesk with `tabular-nums` for aligned figures. */
+  --font-sans: "Aribau Grotesk", ui-sans-serif, system-ui, -apple-system,
+    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+
+  /* ---- Type scale ---- base = 13px (0.8125rem). Root stays 16px so the
+     spacing grid is unaffected; only text sizes are anchored to 13px. */
+  /* SIX sizes only — a deliberately small ladder (captions → display).
+     Don't reintroduce 2xs/3xl/4xl or in-between steps; if a size feels
+     missing, the answer is weight/color, not a new size. */
+  --text-xs: 0.6875rem;    /* 11px — captions, secondary text, table cells, keycaps */
+  --text-xs--line-height: 1rem;
+  /* text-sm is aliased to text-xs (both 11px). The scale is intentionally
+     11 · 13 · 15 · 21 · 26 with no 12px tier — but keeping the token pointed
+     at 11px stops any stray `text-sm` from falling back to Tailwind's
+     default 14px, which would land off the scale entirely. */
+  --text-sm: 0.6875rem;
+  --text-sm--line-height: 1rem;
+  --text-base: 0.8125rem;  /* 13px — BASE body */
+  --text-base--line-height: 1.25rem;
+  --text-lg: 0.9375rem;    /* 15px — emphasized body, section headings */
+  --text-lg--line-height: 1.375rem;
+  --text-xl: 1.3125rem;    /* 21px — page titles */
+  --text-xl--line-height: 1.75rem;
+  --text-2xl: 1.625rem;    /* 26px — display */
+  --text-2xl--line-height: 2rem;
+
+  /* ---- Ink scale (the black brand ramp) ---- */
+  --color-ink-50: #f6f6f7;
+  --color-ink-100: #ececed;
+  --color-ink-200: #d9d9dc;
+  --color-ink-300: #b8b8bd;
+  --color-ink-400: #8f8f96;
+  --color-ink-500: #6e6e75;
+  --color-ink-600: #55555b;
+  --color-ink-700: #3f3f44;
+  --color-ink-800: #262629;
+  --color-ink-900: #161618;
+  --color-ink-950: #0a0a0b;
+
+  /* ---- Semantic accent ramps ---- */
+  --color-success-50: #f0fdf4;
+  --color-success-100: #dcfce7;
+  --color-success-500: #22c55e;
+  --color-success-600: #16a34a;
+  --color-success-700: #15803d;
+
+  --color-warning-50: #fffaeb;
+  --color-warning-100: #fef0c7;
+  --color-warning-500: #f79009;
+  --color-warning-600: #dc6803;
+  --color-warning-700: #b54708;
+
+  --color-danger-50: #fef3f2;
+  --color-danger-100: #fee4e2;
+  --color-danger-500: #f04438;
+  --color-danger-600: #d92d20;
+  --color-danger-700: #b42318;
+
+  --color-info-50: #eff8ff;
+  --color-info-100: #d1e9ff;
+  --color-info-500: #2e90fa;
+  --color-info-600: #1570ef;
+  --color-info-700: #175cd3;
+
+  /* ---- Radii ---- */
+  --radius-xs: 0.25rem;
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.625rem;
+  --radius-xl: 0.875rem;
+  --radius-2xl: 1.25rem;
+  --radius-full: 9999px;
+  /* Status/indicator dots are SQUARE with a hair of softening — echoing the
+     growth-mark's square cells. Never render an indicator dot as a circle
+     (`rounded-full`); radio controls are the one exception (control
+     convention). */
+  --radius-dot: 2px;
+
+  /* ---- Elevation ---- ONE soft token (Claude-panel style).
+     Delineate surfaces with fill color first; add this to gently lift them. */
+  --shadow-elevation: 0 0 0 1px rgb(10 10 11 / 0.03),
+    0 1px 2px 0 rgb(10 10 11 / 0.05),
+    0 8px 24px -6px rgb(10 10 11 / 0.12);
+
+  /* ---- CTA inner glow ---- luminous inset highlight for primary buttons
+     (adapted from the "AI button" Figma): a crisp top-edge catch plus a soft
+     inner glow from the top and bottom, so a solid CTA reads as lit from within. */
+  --inner-glow-cta: inset 0 1px 0 0 rgb(255 255 255 / 0.25),
+    inset 0 10px 22px -10px rgb(255 255 255 / 0.28),
+    inset 0 -10px 22px -10px rgb(255 255 255 / 0.16);
+  /* Light-fill sibling — the same lit-from-within read for secondary/soft
+     buttons (white catch reads on gray fills at higher opacity). */
+  --inner-glow-fill: inset 0 1px 0 0 rgb(255 255 255 / 0.7),
+    inset 0 8px 16px -8px rgb(255 255 255 / 0.45);
+  /* Text fields — a whisper of inset depth so the writing surface reads
+     recessed into the page (persists through hover/focus/invalid). */
+  --inner-glow-field: inset 0 1px 2px 0 rgb(10 10 11 / 0.06);
+
+  /* ---- Motion ---- strong custom curves; the built-in CSS easings are too
+     weak. Declared here so the `ease-out` / `ease-in-out` utilities resolve
+     to these system-wide. JS mirror: src/lib/motion.ts — keep in sync. */
+  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* entrances, exits, presses */
+  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* on-screen movement / morphs */
+  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* iOS-like drawer slide */
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful overshoot (rare) */
+
+  /* Durations — every animation/transition timing flows from these.
+     UI animations stay under 300ms; exits run faster than enters. */
+  --duration-fast: 0.15s; /* menu / popover / tooltip enter */
+  --duration-normal: 0.2s; /* state transitions */
+  --duration-spin: 0.8s; /* rotation loops (spinner) */
+  --duration-pulse: 1.5s; /* breathing / shimmer loops */
+  --duration-bloom: 0.9s; /* ambient reveals (chat texture bloom, curtain wipe) */
+  --duration-brand-loader: 3.4s; /* BrandLoader flicker loop */
+
+  /* Entrance-choreography beats — staggered delays for sequenced arrivals
+     (e.g. chat welcome: mark → greeting → composer). */
+  --stagger-1: 0.2s;
+  --stagger-2: 0.3s;
+  --stagger-3: 0.42s;
+
+  /* Press feedback — every pressable element scales down on :active */
+  --scale-press: 0.97;
+
+  /* ---- Layout ---- app-frame dimensions (Sidebar / Panel) */
+  --sidebar-width: 15rem; /* 240px — primary nav rail */
+  --sidebar-width-sm: 3.5rem; /* 56px — collapsed icon rail */
+  --sidebar-header: 4rem; /* 64px — brand / header row height */
+  --sidebar-item: 2rem; /* 32px — collapsed rail hit target (square) */
+  --sidebar-logo: 1.25rem; /* 20px — brand mark, centered in a --sidebar-item square */
+  --sidebar-text-indent: 2.375rem; /* px-3 + icon size-4 + gap-2.5 — history rows align to nav-item text */
+  --panel-header-height: 2.75rem; /* 44px — Panel / toolbar header */
+  --aside-width: 20rem; /* 320px — right-hand panel column */
+
+  /* ---- Component sizing ---- */
+  --card-padding: 1.25rem; /* 20px — inner padding for cards */
+  --connector-card-max: 30rem; /* 480px — max column width for connector-card grids (cap; no min) */
+  --connector-card-min: 20rem; /* 320px — min column width for auto-fill connector-card grids (cards stretch to 1fr; column count follows the container) */
+
+  /* ---- Chat (Ask Actioneer / assistant-ui) ---- */
+  --thread-max-width: 44rem; /* chat column cap — readable prose measure, all panes */
+  --thread-max-width-wide: 64rem; /* rich-content breakout cap (tables/charts/tool cards) on wide panes; prose keeps --thread-max-width */
+  --composer-bg: color-mix(in oklab, var(--muted) 30%, var(--background));
+  --composer-radius: var(--radius-2xl);
+  --composer-padding: 0.5rem;
+  --chat-texture-opacity: 0.06; /* welcome-state halftone wash */
+}
+
+/*
+ * Chart tokens are referenced from SVG prop strings, which Tailwind cannot
+ * discover while pruning @theme variables. Keep this palette explicit so
+ * every comparison series survives production builds.
+ */
+:root {
+  --color-chart-1: var(--color-ink-950);
+  --color-chart-2: var(--color-ink-400);
+  --color-chart-3: var(--color-ink-300);
+  --color-chart-4: var(--color-info-500);
+  --color-chart-5: var(--color-warning-500);
+  --color-chart-6: var(--color-success-500);
+}
+
+/*
+ * Semantic role tokens — mapped through CSS vars.
+ * @theme inline exposes them as utilities (bg-background, text-primary, …).
+ */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  /* Text hierarchy — three accessible levels (all ≥ AA on --background) */
+  --color-primary: var(--text-primary);
+  --color-secondary: var(--text-secondary);
+  --color-tertiary: var(--text-tertiary);
+
+  --color-surface: var(--surface);
+  --color-surface-foreground: var(--surface-foreground);
+  --color-elevated: var(--elevated);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  /* Brand (black) — used for solid fills, not body text */
+  --color-brand: var(--brand);
+  --color-brand-foreground: var(--brand-foreground);
+  --color-brand-hover: var(--brand-hover);
+
+  /* Quiet fill — secondary buttons, avatars, chips */
+  --color-fill: var(--fill);
+  --color-fill-foreground: var(--fill-foreground);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-success: var(--color-success-600);
+  --color-success-foreground: #ffffff;
+  --color-warning: var(--color-warning-500);
+  --color-warning-foreground: #ffffff;
+  --color-danger: var(--color-danger-600);
+  --color-danger-foreground: #ffffff;
+  --color-info: var(--color-info-600);
+  --color-info-foreground: #ffffff;
+
+  --color-border: var(--border);
+  --color-border-strong: var(--border-strong);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-overlay: var(--overlay);
+
+  /*
+   * shadcn-compat aliases — consumed ONLY by the vendored chat components
+   * (src/components/ui, src/components/assistant-ui). ADS UI never uses
+   * these; they map shadcn's expected roles onto ADS tokens.
+   */
+  --color-primary-foreground: var(--brand-foreground);
+  --color-secondary-foreground: #ffffff;
+  --color-destructive: var(--color-danger-600);
+  --color-destructive-foreground: #ffffff;
+  --color-popover: var(--elevated);
+  --color-popover-foreground: var(--foreground);
+}
+
+/* ---- Theme (light only) ---- */
+:root {
+  --background: #ffffff;
+  --foreground: #0a0a0b;
+
+  /* Text hierarchy — accessible on #ffffff */
+  --text-primary: #0a0a0b;   /* ~20:1  AAA */
+  --text-secondary: #52525b; /* ~7.6:1 AAA */
+  --text-tertiary: #6e6e75;  /* ~5.2:1 AA  */
+
+  --surface: #f6f6f7;
+  --surface-foreground: #262629;
+  --elevated: #ffffff;
+
+  --muted: #f6f6f7;
+  --muted-foreground: #6e6e75;
+
+  --card: #ffffff;
+  --card-foreground: #0a0a0b;
+
+  /* BLACK brand */
+  --brand: #0a0a0b;
+  --brand-foreground: #ffffff;
+  --brand-hover: #262629;
+
+  /* Quiet fill */
+  --fill: #ececed;
+  --fill-foreground: #161618;
+
+  --accent: #f6f6f7;
+  --accent-foreground: #161618;
+
+  --border: #ececed;
+  --border-strong: #d9d9dc;
+  --input: #d9d9dc;
+  --ring: rgb(10 10 11 / 0.35);
+  --overlay: rgb(10 10 11 / 0.5);
+}
+/* ---- Base, keyframes & component helpers ---- */
+/* Hide scrollbars app-wide but keep scrollability. The demo UI is filled
+   and borderless by design — visible scrollbar tracks read as decorative
+   noise. Wheel/trackpad/keyboard scrolling still works because we only
+   suppress the *rendered* scrollbar, not overflow behaviour. */
+* {
+  scrollbar-width: none;               /* Firefox */
+  -ms-overflow-style: none;            /* legacy Edge / IE */
+}
+*::-webkit-scrollbar {                 /* WebKit / Blink */
+  width: 0;
+  height: 0;
+  display: none;
+}
+
+/* Ask Actioneer texture entrance: a radial bloom — the halftone reveals from
+   the centre out to the corners (clip-path circle) while gently scaling up to
+   rest. `from{}`-only keyframe, so it settles into the element's own opacity. */
+@keyframes chat-texture-reveal {
+  from {
+    clip-path: circle(10% at 50% 50%);
+    opacity: 0;
+    scale: 0.94;
+  }
+  to {
+    clip-path: circle(102% at 50% 50%);
+  }
+}
+.chat-texture-reveal {
+  animation: chat-texture-reveal var(--duration-bloom) var(--ease-out) both;
+}
+
+/* Paper's WebGL shader owns the halftone animation. The canvas is bounded to
+   this isolated layer and the component stops its render loop when hidden. */
+.pixel-blast-svg {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  contain: strict;
+  isolation: isolate;
+}
+.pixel-blast-svg canvas {
+  image-rendering: pixelated;
+}
+
+/* Voice call surface: audio changes the duration, not the color or opacity.
+   Silence keeps a slow ambient drift; speech accelerates the same neutral
+   field without introducing flashing status colors. */
+@keyframes voice-surface-drift {
+  0% {
+    transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1.02);
+  }
+  35% {
+    transform: translate3d(4%, -1%, 0) rotate(4deg) scale(1.08);
+  }
+  70% {
+    transform: translate3d(1%, 4%, 0) rotate(-3deg) scale(1.04);
+  }
+  100% {
+    transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1.02);
+  }
+}
+.voice-surface-drift {
+  animation-name: voice-surface-drift;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  will-change: transform;
+}
+.voice-surface-drift-reverse {
+  animation-direction: reverse;
+}
+@media (prefers-reduced-motion: reduce) {
+  .chat-texture-reveal {
+    animation: none;
+  }
+  .voice-surface-drift {
+    animation: none;
+  }
+}
+
+/* Ask Actioneer texture exit — cloud lift. When the conversation starts the
+   halftone dissolves from the BOTTOM upward (a soft mask band sweeps up
+   through it) while the whole layer drifts up and fades — cloud cover
+   breaking and rising, not a curtain covering it. The mask rests fully
+   opaque (element aligned with the black end of an oversized gradient), and
+   the lifted state slides the element to the transparent end. */
+.chat-texture-lift {
+  mask-image: linear-gradient(to top, transparent 0%, transparent 42%, black 58%, black 100%);
+  -webkit-mask-image: linear-gradient(to top, transparent 0%, transparent 42%, black 58%, black 100%);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: 100% 240%;
+  -webkit-mask-size: 100% 240%;
+  mask-position: 0% 0%;
+  -webkit-mask-position: 0% 0%;
+  transition:
+    mask-position 1s var(--ease-out),
+    -webkit-mask-position 1s var(--ease-out),
+    translate 1s var(--ease-out),
+    opacity 1s var(--ease-out);
+}
+.chat-texture-lifted {
+  mask-position: 0% 100%;
+  -webkit-mask-position: 0% 100%;
+  translate: 0 -3.5rem;
+}
+@media (prefers-reduced-motion: reduce) {
+  .chat-texture-lift {
+    transition: opacity var(--duration-normal) var(--ease-out);
+  }
+  .chat-texture-lifted {
+    mask-position: 0% 0%;
+    -webkit-mask-position: 0% 0%;
+    translate: none;
+  }
+}
+
+/* BrandLoader (src/components/brand-loader.tsx): each cell of the growth mark
+   flickers on like a neon tube — hard cuts (steps(1)): off → on with a
+   stutter → hold → off — on a staggered loop. fill-mode backwards keeps a
+   cell dark through its delay, so the mark builds up cell by cell. */
+@keyframes brand-flicker {
+  0% {
+    opacity: 0;
+  }
+  6% {
+    opacity: 1;
+  }
+  9% {
+    opacity: 0.15;
+  }
+  12% {
+    opacity: 1;
+  }
+  15% {
+    opacity: 0.35;
+  }
+  18%,
+  82% {
+    opacity: 1;
+  }
+  90%,
+  100% {
+    opacity: 0;
+  }
+}
+.brand-loader-cell {
+  animation: brand-flicker var(--duration-brand-loader) steps(1) infinite backwards;
+}
+@media (prefers-reduced-motion: reduce) {
+  .brand-loader-cell {
+    animation: none; /* static full-opacity mark */
+  }
+}
+
+@layer base {
+  * {
+    border-color: var(--border);
+  }
+
+  html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+
+  body {
+    margin: 0;
+    background-color: var(--background);
+    color: var(--foreground);
+    font-family: var(--font-sans);
+    font-size: var(--text-base); /* 13px base */
+    font-feature-settings: "cv01", "ss01";
+    font-synthesis-weight: none;
+  }
+
+  /* One typeface only: neutralize the browser's default monospace on
+     code/kbd/samp/pre so they render in Aribau Grotesk like everything else. */
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: inherit;
+  }
+
+  /* Consistent focus ring across the system */
+  :focus-visible {
+    outline: none;
+  }
+
+  ::selection {
+    background: color-mix(in srgb, var(--brand) 22%, transparent);
+  }
+
+  /* Custom scrollbar for showcase surfaces */
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: var(--border-strong);
+    border-radius: 9999px;
+    border: 2px solid var(--background);
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--muted-foreground);
+  }
+}
+
+/* Reusable keyframes for loops (spinner / skeleton / progress). Overlay
+   enter/exit animation lives in Motion via src/lib/motion.ts — transitions
+   over keyframes, so rapid open/close retargets instead of restarting. */
+@keyframes ads-spin {
+  to { transform: rotate(360deg); }
+}
+/* Spinner head — the arc GROWS from ~zero to cover the entire squircle
+   (100% of the perimeter), then SHRINKS back to nothing, while the parent
+   <g> keeps sweeping at a constant rate. Net effect: the head traces the
+   whole shape (so users see the full squircle drawn), then unwinds. Perimeter
+   is 60u.
+   • 0%  — hairline head (length 1) at the top.
+   • 50% — full ring (length 60, no gap): the entire shape is covered.
+   • 100%— hairline head again, but its origin has advanced a full loop.
+   The dashoffset ramps continuously so the tail chases the head at half the
+   speed of the group's rotation, giving that classic Material breathing feel.
+*/
+@keyframes ads-spin-head {
+  0%   { stroke-dasharray: 1 59;  stroke-dashoffset:   0; }
+  50%  { stroke-dasharray: 60 0;  stroke-dashoffset: -30; }
+  100% { stroke-dasharray: 1 59;  stroke-dashoffset: -60; }
+}
+@keyframes ads-shimmer {
+  100% { transform: translateX(100%); }
+}
+@keyframes ads-indeterminate {
+  0% { transform: translate3d(-100%, 0, 0); }
+  60%, 100% { transform: translate3d(250%, 0, 0); }
+}
+/*
+ * Interactive border — a reusable primitive (see src/lib/interactive.ts).
+ * Any bordered element opts in with `.ads-interactive` + a trigger class; the
+ * border snaps to a solid 100% brand-black stroke on hover and focus — no
+ * halo, no elevation, no pulse (a shadow on a form control reads as
+ * actionable-surface elevation, which controls must not claim).
+ * Behaviour stays tunable through the CSS custom properties.
+ */
+@layer components {
+  .ads-interactive {
+    /* — customizable knobs (overridden by the cva variants / inline vars) — */
+    --glow: var(--brand);
+    --glow-strength: 12%;
+    --glow-blur: 12px;
+    --glow-spread: 2px;
+    --glow-border-rest: var(--border);
+    --glow-border-hover: var(--brand);
+    --glow-border-active: var(--foreground);
+    /* Optional persistent inset (e.g. the field inner glow) — hosts opt in
+       via [--glow-inset:var(--inner-glow-field)]; carried through every
+       state below so hover/focus/invalid never strip it. */
+    --glow-inset: 0 0 #0000;
+
+    border-color: var(--glow-border-rest);
+    box-shadow: var(--glow-inset);
+    transition:
+      color var(--duration-normal) var(--ease-out),
+      border-color var(--duration-normal) var(--ease-out),
+      box-shadow var(--duration-normal) var(--ease-out);
+  }
+
+  /* Hover: the same solid brand-black stroke as focus — one consistent
+     "this is interactive" signal, no halo shadow. */
+  .ads-interactive.ads-on-hover:hover:not(:disabled):not([aria-invalid="true"]) {
+    border-color: var(--glow-border-hover);
+    box-shadow: var(--glow-inset);
+  }
+
+  /* Focus / focus-within: solid brand-black 1px stroke, no glow, no pulse.
+     Kept plain so form fields read as "this is where I'm typing" without
+     the heartbeat animation that came before. */
+  .ads-interactive.ads-on-focus:focus:not(:disabled):not([aria-invalid="true"]),
+  .ads-interactive.ads-on-focus:focus-visible:not(:disabled):not([aria-invalid="true"]),
+  .ads-interactive.ads-on-within:focus-within:not([aria-invalid="true"]) {
+    border-color: var(--brand);
+    box-shadow: var(--glow-inset);
+  }
+
+  /* .ads-animate is intentionally a no-op on focus/hover — the previous
+     ads-glow-pulse read as an unwanted heartbeat. Keep the selector matched
+     so consumers passing the class don't need code changes. */
+
+  /* Invalid state (form fields) */
+  .ads-interactive[aria-invalid="true"] {
+    border-color: var(--color-danger-600);
+    box-shadow: 0 0 0 3px var(--color-danger-100);
+  }
+}
+
+/* ads-glow-pulse removed — focus is now a plain solid stroke, no animation. */
+
+/* Respect reduced-motion */
+@media (prefers-reduced-motion: reduce) {
+  .ads-interactive {
+    animation: none !important;
+  }
+}
+
+/* Growth-mark hover blip — the brand film's cell dim/shrink loop, played
+   only while a wrapping `group/brand` link is hovered (rest = solid mark).
+   Per-cell stagger arrives via --blip-delay from BrandMark. */
+@keyframes ads-mark-blip {
+  0% { opacity: 1; transform: scale(1); }
+  22% { opacity: 0.16; transform: scale(0.78); }
+  100% { opacity: 0.16; transform: scale(0.78); }
+}
+.ads-mark-cell {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+.group\/brand:hover .ads-mark-cell {
+  animation: ads-mark-blip 1.9s linear infinite;
+  animation-delay: var(--blip-delay, 0s);
+}
+@media (prefers-reduced-motion: reduce) {
+  .group\/brand:hover .ads-mark-cell {
+    animation: none;
+  }
+}
+
+/* Row-flash — a transient brand tint on a table row when the app jumps to
+   it (e.g. clicking a flagged column in an issue card scrolls its row into
+   view and briefly highlights it so the eye can lock on). Painted on cells
+   because border-separate tables don't render <tr> backgrounds. */
+@keyframes ads-row-flash {
+  0% {
+    background-color: color-mix(in oklab, var(--brand) 14%, transparent);
+  }
+  100% {
+    background-color: transparent;
+  }
+}
+
+.ads-row-flash > td {
+  animation: ads-row-flash 1.6s var(--ease-out) forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ads-row-flash > td {
+    animation: none !important;
+  }
+}
+/* Let the consumer's Tailwind discover the classes ADS components use. */
+@source "./**/*.{js,mjs}";