rastack 0.0.55 → 0.0.57

package/admin/ui/motion.tsx

@@ -0,0 +1,292 @@
+/**
+ * The admin's motion toolkit — "the secret is in the motion." A tiny,
+ * dependency-free set of animation primitives that make the console feel alive:
+ * numbers that count up, bars that grow, and cards/rows that stagger into view.
+ *
+ * Every primitive honours `prefers-reduced-motion` (it snaps straight to the
+ * final value), so the motion is a delight for those who want it and invisible
+ * for those who don't. Nothing here fabricates data — the values are the real
+ * record counts the dashboard derives from the manifest; motion only animates
+ * how they *arrive*.
+ */
+import React, { useEffect, useRef, useState } from "react";
+
+/** True when the user has asked the OS to minimise animation. */
+function prefersReducedMotion(): boolean {
+  return (
+    typeof window !== "undefined" &&
+    typeof window.matchMedia === "function" &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  );
+}
+
+/**
+ * Ease-out exponential — the number spins rapidly at first and decelerates
+ * smoothly onto its final value. The house curve for count-up typography.
+ */
+const easeOutExpo = (t: number): number => (t >= 1 ? 1 : 1 - Math.pow(2, -10 * t));
+
+/**
+ * Animate a number from 0 up to `target` over `duration` ms with an ease-out
+ * exponential curve, driven by `requestAnimationFrame`. Re-runs whenever
+ * `target` changes, always animating from the previously-shown value so live
+ * updates glide rather than jump. Snaps instantly under reduced-motion.
+ */
+export function useCountUp(
+  target: number,
+  opts: { duration?: number; delay?: number } = {},
+): number {
+  const { duration = 1200, delay = 0 } = opts;
+  const [value, setValue] = useState(() => (prefersReducedMotion() ? target : 0));
+  const fromRef = useRef(0);
+  const rafRef = useRef<number | null>(null);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (prefersReducedMotion()) {
+      setValue(target);
+      return;
+    }
+    const from = fromRef.current;
+    let start = 0;
+    const step = (ts: number) => {
+      if (!start) start = ts;
+      const t = Math.min(1, (ts - start) / duration);
+      const current = from + (target - from) * easeOutExpo(t);
+      setValue(current);
+      fromRef.current = current;
+      if (t < 1) rafRef.current = requestAnimationFrame(step);
+      else fromRef.current = target;
+    };
+    timerRef.current = setTimeout(() => {
+      rafRef.current = requestAnimationFrame(step);
+    }, delay);
+    return () => {
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [target, duration, delay]);
+
+  return value;
+}
+
+/** Format a number for a stat readout: thousands-separated, optional decimals. */
+export function formatStat(value: number, decimals = 0): string {
+  return value.toLocaleString(undefined, {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  });
+}
+
+/** A number that counts up to `value` on mount. */
+export function CountUp(props: {
+  value: number;
+  decimals?: number;
+  duration?: number;
+  delay?: number;
+  suffix?: string;
+  prefix?: string;
+}): React.JSX.Element {
+  const shown = useCountUp(props.value, {
+    duration: props.duration,
+    delay: props.delay,
+  });
+  return (
+    <>
+      {props.prefix}
+      {formatStat(shown, props.decimals ?? 0)}
+      {props.suffix}
+    </>
+  );
+}
+
+/**
+ * A staggered fade-up wrapper. Children rise a few pixels into place; `index`
+ * (or an explicit `delay`) offsets the start so a grid/list cascades in. Pure
+ * CSS animation (see `.ras-reveal` in the stylesheet) — no JS on the hot path.
+ */
+export function Reveal(props: {
+  children: React.ReactNode;
+  index?: number;
+  delay?: number;
+  step?: number;
+  className?: string;
+  style?: React.CSSProperties;
+  as?: keyof React.JSX.IntrinsicElements;
+}): React.JSX.Element {
+  const { as = "div", index = 0, step = 55, delay } = props;
+  const ms = delay ?? index * step;
+  return React.createElement(
+    as,
+    {
+      className: "ras-reveal" + (props.className ? " " + props.className : ""),
+      style: { ["--ras-delay" as string]: `${ms}ms`, ...props.style },
+    },
+    props.children,
+  );
+}
+
+/** A signed change indicator — up (accent/green) or down (muted/red) arrow + text. */
+export function Delta(props: {
+  children: React.ReactNode;
+  direction?: "up" | "down" | "flat";
+}): React.JSX.Element {
+  const dir = props.direction ?? "flat";
+  return (
+    <span className={"ras-delta is-" + dir}>
+      {dir !== "flat" ? (
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+          <path
+            d={dir === "up" ? "M12 19V5M6 11l6-6 6 6" : "M12 5v14M6 13l6 6 6-6"}
+            stroke="currentColor"
+            strokeWidth="2.4"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      ) : null}
+      {props.children}
+    </span>
+  );
+}
+
+/** One column in the {@link BarChart}. */
+export interface BarDatum {
+  label: string;
+  value: number;
+}
+
+/**
+ * The "Performance trend" analogue: a row of bars that grow from the baseline on
+ * mount, each offset a touch so the chart sweeps in left-to-right. Hovering a
+ * bar reveals its exact value. Heights are real (record counts); only the
+ * *reveal* is animated.
+ */
+export function BarChart(props: {
+  data: BarDatum[];
+  height?: number;
+  gridLines?: number;
+  formatValue?: (v: number) => string;
+}): React.JSX.Element {
+  const { data, height = 200, gridLines = 4 } = props;
+  const max = Math.max(1, ...data.map((d) => d.value));
+  const fmt = props.formatValue ?? ((v: number) => formatStat(v));
+  const lines = Array.from({ length: gridLines + 1 }, (_, i) => i);
+
+  return (
+    <div className="ras-chart" style={{ height }}>
+      <div className="ras-chart-grid" aria-hidden="true">
+        {lines.map((i) => (
+          <div className="ras-chart-line" key={i}>
+            <span className="ras-chart-tick">
+              {fmt(Math.round((max * (gridLines - i)) / gridLines))}
+            </span>
+          </div>
+        ))}
+      </div>
+      <div className="ras-chart-bars" style={{ ["--ras-bar-n" as string]: data.length }}>
+        {data.map((d, i) => {
+          const pct = Math.max(2, (d.value / max) * 100);
+          return (
+            <div className="ras-chart-col" key={d.label + i} title={`${d.label}: ${fmt(d.value)}`}>
+              <div className="ras-chart-track">
+                <div
+                  className="ras-chart-bar"
+                  style={{
+                    height: `${pct}%`,
+                    ["--ras-delay" as string]: `${i * 45}ms`,
+                  }}
+                >
+                  <span className="ras-chart-value">{fmt(d.value)}</span>
+                </div>
+              </div>
+              <div className="ras-chart-xlabel">{d.label}</div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+/** One coloured slice of a {@link SegmentBar}. */
+export interface Segment {
+  label: string;
+  value: number;
+  color: string;
+}
+
+/**
+ * A single horizontal bar split into coloured proportional segments (the
+ * "Workflow breakdown" analogue). Each segment eases open from zero width on
+ * mount; the whole bar reads as one composed share.
+ */
+export function SegmentBar(props: { segments: Segment[]; height?: number }): React.JSX.Element {
+  const total = Math.max(1, props.segments.reduce((s, x) => s + x.value, 0));
+  return (
+    <div className="ras-segbar" style={{ height: props.height ?? 12 }}>
+      {props.segments.map((seg, i) => (
+        <div
+          key={seg.label + i}
+          className="ras-segbar-seg"
+          title={`${seg.label}: ${formatStat(seg.value)}`}
+          style={{
+            width: `${(seg.value / total) * 100}%`,
+            background: seg.color,
+            ["--ras-delay" as string]: `${i * 90}ms`,
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+
+/**
+ * A labelled horizontal meter that fills to `value / max` on mount — used for
+ * the "largest tables" ranking. Filling from zero is the whole effect.
+ */
+export function MeterRow(props: {
+  label: string;
+  value: number;
+  max: number;
+  color?: string;
+  index?: number;
+}): React.JSX.Element {
+  const pct = Math.max(2, (props.value / Math.max(1, props.max)) * 100);
+  return (
+    <div className="ras-meter">
+      <div className="ras-meter-head">
+        <span className="ras-meter-label">{props.label}</span>
+        <span className="ras-meter-value">
+          <CountUp value={props.value} delay={(props.index ?? 0) * 60} />
+        </span>
+      </div>
+      <div className="ras-meter-track">
+        <div
+          className="ras-meter-fill"
+          style={{
+            width: `${pct}%`,
+            background: props.color ?? "var(--color-accent)",
+            ["--ras-delay" as string]: `${(props.index ?? 0) * 70}ms`,
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+/** A stable, pleasant colour for the Nth categorical series (accent-derived). */
+export function seriesColor(i: number): string {
+  const hues = [
+    "var(--color-accent)",
+    "var(--color-success)",
+    "var(--color-warning)",
+    "var(--color-danger)",
+    "color-mix(in srgb, var(--color-accent) 55%, var(--color-success))",
+    "color-mix(in srgb, var(--color-accent) 45%, white)",
+    "color-mix(in srgb, var(--color-warning) 60%, var(--color-danger))",
+    "color-mix(in srgb, var(--color-accent) 65%, var(--color-warning))",
+  ];
+  return hues[i % hues.length];
+}

package/admin/ui/styles.ts

@@ -58,9 +58,30 @@ a { color: inherit; text-decoration: none; }
   display: grid;
   grid-template-columns: var(--ras-sidebar-w) minmax(0, 1fr);
   min-height: 100vh;
+  transition: grid-template-columns 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
 }
+.ras-root.is-collapsed { --ras-sidebar-w: 68px; }
 .ras-main { min-width: 0; display: flex; flex-direction: column; }
 
+/* ---- sidebar collapse ---------------------------------------------------- */
+.ras-brand-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.ras-collapse-btn { width: 30px; height: 30px; flex-shrink: 0; }
+.ras-collapse-btn svg { transition: transform 300ms var(--ras-ease); }
+.ras-brand-text, .ras-nav-text { transition: opacity 0.16s var(--ras-ease); white-space: nowrap; }
+.is-collapsed .ras-sidebar { padding-left: 12px; padding-right: 12px; align-items: stretch; }
+.is-collapsed .ras-brand { padding-right: 0; gap: 0; }
+.is-collapsed .ras-brand-row { justify-content: center; }
+.is-collapsed .ras-brand-text,
+.is-collapsed .ras-nav-text,
+.is-collapsed .ras-nav-label,
+.is-collapsed .ras-foot-meta { opacity: 0; width: 0; overflow: hidden; pointer-events: none; }
+.is-collapsed .ras-nav-label { height: 0; padding: 0; margin: 0; }
+.is-collapsed .ras-brand-row { flex-direction: column; gap: 12px; padding-bottom: 12px; }
+.is-collapsed .ras-collapse-btn svg { transform: scaleX(-1); }
+.is-collapsed .ras-nav-link { justify-content: center; padding-left: 0; padding-right: 0; }
+.is-collapsed .ras-nav-link.is-active::before { left: -12px; }
+.is-collapsed .ras-sidebar-foot { justify-content: center; }
+
 /* ---- sidebar ------------------------------------------------------------- */
 .ras-sidebar {
   position: sticky;
@@ -366,6 +387,258 @@ a { color: inherit; text-decoration: none; }
 .ras-modelcard .ras-mc-name { font-weight: 600; font-size: 15px; }
 .ras-modelcard .ras-mc-go { color: var(--color-accent); display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 500; }
 .ras-mc-icon { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius: var(--radius-md); background: var(--color-surface-alt); color: var(--color-accent); }
+.ras-modelcard .ras-mc-count {
+  font-family: var(--font-family-mono, ui-monospace, monospace);
+  font-size: 13px; font-weight: 600; color: var(--color-text-muted);
+  padding: 2px 9px; border-radius: var(--radius-pill); background: var(--color-surface-alt);
+}
+.ras-modelcard .ras-mc-meta { font-size: 11.5px; color: var(--color-text-muted); letter-spacing: 0.03em; text-transform: uppercase; margin-top: -4px; }
+.ras-modelcard .ras-mc-go { margin-top: auto; }
+
+/* ==== MOTION ================================================================
+   "The secret is in the motion." Entrance + fill animations, all opt-out under
+   prefers-reduced-motion. --ras-delay staggers each element's start. */
+@keyframes ras-fade-up {
+  from { opacity: 0; transform: translateY(10px); }
+  to   { opacity: 1; transform: none; }
+}
+@keyframes ras-grow-up { from { transform: scaleY(0); } to { transform: scaleY(1); } }
+@keyframes ras-grow-right { from { transform: scaleX(0); } to { transform: scaleX(1); } }
+@keyframes ras-shimmer { from { background-position: -320px 0; } to { background-position: 320px 0; } }
+@keyframes ras-fade-in { from { opacity: 0; } to { opacity: 1; } }
+
+.ras-reveal {
+  opacity: 0;
+  animation: ras-fade-up 0.62s var(--ras-ease) forwards;
+  animation-delay: var(--ras-delay, 0ms);
+  will-change: transform, opacity;
+}
+
+/* the whole content pane drifts in on route change */
+.ras-content { animation: ras-fade-in 0.3s var(--ras-ease) both; }
+
+/* changelist rows cascade in */
+.ras-tablecard tbody tr {
+  animation: ras-fade-up 0.44s var(--ras-ease) both;
+}
+.ras-tablecard tbody tr:nth-child(1) { animation-delay: 20ms; }
+.ras-tablecard tbody tr:nth-child(2) { animation-delay: 46ms; }
+.ras-tablecard tbody tr:nth-child(3) { animation-delay: 72ms; }
+.ras-tablecard tbody tr:nth-child(4) { animation-delay: 98ms; }
+.ras-tablecard tbody tr:nth-child(5) { animation-delay: 124ms; }
+.ras-tablecard tbody tr:nth-child(6) { animation-delay: 150ms; }
+.ras-tablecard tbody tr:nth-child(7) { animation-delay: 176ms; }
+.ras-tablecard tbody tr:nth-child(8) { animation-delay: 202ms; }
+.ras-tablecard tbody tr:nth-child(n+9) { animation-delay: 224ms; }
+
+/* sidebar nav links glide in on first paint */
+.ras-nav-link { animation: ras-fade-up 0.5s var(--ras-ease) both; }
+.ras-nav-section:nth-child(1) .ras-nav-link { animation-delay: 40ms; }
+.ras-nav-section:nth-child(2) .ras-nav-link { animation-delay: 90ms; }
+.ras-nav-section:nth-child(3) .ras-nav-link { animation-delay: 140ms; }
+
+.ras-delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
+.ras-delta.is-up { color: var(--color-success); }
+.ras-delta.is-down { color: var(--color-danger); }
+.ras-delta.is-flat { color: var(--color-text-muted); }
+
+/* ---- KPI strip ----------------------------------------------------------- */
+.ras-statgrid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 14px;
+  margin-bottom: 18px;
+}
+.ras-stat {
+  padding: 16px 18px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface);
+  box-shadow: var(--ras-shadow-sm);
+  transition: box-shadow 0.16s var(--ras-ease), transform 0.16s var(--ras-ease), border-color 0.16s;
+}
+.ras-stat:hover { box-shadow: var(--ras-shadow-md); transform: translateY(-2px); border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border)); }
+.ras-stat-top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
+.ras-stat-ico {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 30px; height: 30px; border-radius: var(--radius-md);
+  background: color-mix(in srgb, currentColor 12%, transparent);
+  color: var(--color-accent);
+}
+.ras-stat-label { font-size: 12.5px; font-weight: 500; color: var(--color-text-muted); }
+.ras-stat-value {
+  font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1;
+  font-variant-numeric: tabular-nums; color: var(--color-text);
+}
+.ras-stat-sub { font-size: 12px; color: var(--color-text-muted); margin-top: 7px; }
+
+/* ---- panels (chart + breakdown cards) ------------------------------------ */
+.ras-panel { padding: 18px 20px 20px; margin-bottom: 16px; }
+.ras-panel-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
+.ras-panel-row .ras-reveal { min-width: 0; }
+.ras-panel-row .ras-panel { margin-bottom: 0; height: 100%; }
+.ras-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
+.ras-panel-title { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14.5px; color: var(--color-text); }
+.ras-panel-title svg { color: var(--color-accent); }
+.ras-panel-sub { font-size: 12px; color: var(--color-text-muted); margin-top: 3px; }
+.ras-pill {
+  font-size: 11.5px; font-weight: 600; color: var(--color-text-muted);
+  padding: 3px 10px; border-radius: var(--radius-pill);
+  background: var(--color-surface-alt); border: 1px solid var(--color-border);
+}
+.ras-panel-empty { padding: 34px 10px; text-align: center; color: var(--color-text-muted); font-size: 13px; }
+.ras-details-btn {
+  flex-shrink: 0; font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
+  padding: 5px 12px; border-radius: var(--radius-md);
+  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted);
+  transition: background 0.14s, color 0.14s, border-color 0.14s;
+}
+.ras-details-btn:hover { color: var(--color-text); border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border)); background: var(--ras-hover); }
+
+/* ---- backdrop-blur Details modal (§4) ------------------------------------ */
+.ras-modal-overlay {
+  position: fixed; inset: 0; z-index: 100;
+  display: flex; align-items: center; justify-content: center; padding: 24px;
+  background: color-mix(in srgb, var(--color-bg) 40%, transparent);
+  backdrop-filter: blur(16px) saturate(140%);
+  -webkit-backdrop-filter: blur(16px) saturate(140%);
+  will-change: backdrop-filter;
+  animation: ras-fade-in 0.4s ease-out both;
+}
+.ras-modal {
+  width: 100%; max-width: 520px; max-height: 82vh; overflow-y: auto;
+  padding: 22px 24px 20px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--ras-shadow-pop);
+  animation: ras-modal-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+@keyframes ras-modal-in {
+  from { opacity: 0; transform: scale(0.95) translate3d(0, 10px, 0); }
+  to   { opacity: 1; transform: none; }
+}
+.ras-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
+.ras-modal-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--color-text); }
+.ras-modal-sub { font-size: 12.5px; color: var(--color-text-muted); margin-top: 3px; }
+.ras-modal-x {
+  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
+  width: 30px; height: 30px; border-radius: var(--radius-md);
+  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); cursor: pointer;
+  transition: background 0.14s, color 0.14s;
+}
+.ras-modal-x:hover { color: var(--color-text); background: var(--ras-hover); }
+.ras-modal-rows { display: flex; flex-direction: column; gap: 15px; }
+.ras-modal-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
+.ras-modal-row-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--color-text); min-width: 0; }
+.ras-modal-row-meta { font-size: 11.5px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
+.ras-modal-row-val { display: inline-flex; align-items: baseline; gap: 8px; font-weight: 600; font-variant-numeric: tabular-nums; }
+.ras-modal-row-pct { font-size: 11.5px; font-weight: 600; color: var(--color-text-muted); min-width: 34px; text-align: right; }
+.ras-modal-track { height: 8px; border-radius: var(--radius-pill); background: var(--color-surface-alt); overflow: hidden; }
+.ras-modal-fill {
+  height: 100%; border-radius: var(--radius-pill); width: 0%;
+  transition: width 800ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.ras-modal-foot {
+  display: flex; align-items: center; justify-content: space-between;
+  margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--color-border);
+  font-size: 12.5px; color: var(--color-text-muted);
+}
+.ras-modal-total { font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }
+.ras-chart-skel {
+  height: 200px; border-radius: var(--radius-md);
+  background: linear-gradient(100deg, var(--color-surface-alt) 30%, color-mix(in srgb, var(--color-text) 6%, var(--color-surface-alt)) 50%, var(--color-surface-alt) 70%);
+  background-size: 640px 100%;
+  animation: ras-shimmer 1.3s linear infinite;
+}
+
+/* ---- bar chart (data distribution) --------------------------------------- */
+.ras-chart { position: relative; width: 100%; --ras-chart-gutter: 46px; }
+.ras-chart-grid { position: absolute; inset: 0 0 26px var(--ras-chart-gutter); display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
+.ras-chart-line { position: relative; border-top: 1px dashed color-mix(in srgb, var(--color-text) 9%, transparent); }
+.ras-chart-tick { position: absolute; top: -7px; right: calc(100% + 10px); font-size: 10.5px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.ras-chart-bars { position: absolute; inset: 0 0 0 var(--ras-chart-gutter); display: flex; align-items: flex-end; gap: clamp(3px, 2%, 14px); padding-bottom: 26px; }
+.ras-chart-col { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; height: 100%; }
+/* full-height hover guide band that snaps behind the hovered column */
+.ras-chart-col::before {
+  content: ""; position: absolute; inset: 0 -4px 26px -4px; z-index: 0;
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
+  opacity: 0; transition: opacity 0.16s var(--ras-ease); pointer-events: none;
+}
+.ras-chart-col:hover::before { opacity: 1; }
+.ras-chart-track { position: relative; z-index: 1; flex: 1; display: flex; align-items: flex-end; }
+.ras-chart-bar {
+  position: relative; width: 100%; min-height: 3px;
+  border-radius: var(--radius-sm) var(--radius-sm) 2px 2px;
+  background: linear-gradient(180deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 78%, var(--color-bg)));
+  transform-origin: bottom;
+  /* overshoot entrance — the bars pop up past target and settle */
+  animation: ras-grow-up 0.72s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+  animation-delay: var(--ras-delay, 0ms);
+  transition: filter 0.14s, background 0.14s;
+  cursor: default;
+}
+.ras-chart-col:hover .ras-chart-bar { filter: brightness(1.08) saturate(1.1); }
+.ras-chart-value {
+  position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%);
+  font-size: 11px; font-weight: 600; color: var(--color-text); white-space: nowrap;
+  background: var(--color-surface); border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm); padding: 2px 7px; box-shadow: var(--ras-shadow-sm);
+  opacity: 0; transition: opacity 0.14s; pointer-events: none; font-variant-numeric: tabular-nums;
+}
+.ras-chart-col:hover .ras-chart-value { opacity: 1; }
+.ras-chart-xlabel {
+  height: 26px; display: flex; align-items: center; justify-content: center;
+  font-size: 11px; color: var(--color-text-muted); padding-top: 6px;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
+}
+
+/* ---- segmented bar + legend ---------------------------------------------- */
+.ras-segbar { display: flex; width: 100%; border-radius: var(--radius-pill); overflow: hidden; background: var(--color-surface-alt); }
+.ras-segbar-seg {
+  height: 100%; transform-origin: left; animation: ras-grow-right 0.75s var(--ras-ease) both;
+  animation-delay: var(--ras-delay, 0ms);
+}
+.ras-legend { margin-top: 16px; display: flex; flex-direction: column; gap: 2px; }
+.ras-legend-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-radius: var(--radius-sm); font-size: 13px; }
+.ras-legend-row:hover { background: var(--ras-hover); }
+.ras-legend-key { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--color-text); flex: 1; min-width: 0; }
+.ras-legend-key { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ras-legend-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
+.ras-legend-meta { font-size: 12px; color: var(--color-text-muted); }
+.ras-legend-val { display: inline-flex; align-items: baseline; gap: 8px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 74px; justify-content: flex-end; }
+.ras-legend-pct { font-size: 11.5px; font-weight: 600; color: var(--color-text-muted); min-width: 34px; text-align: right; }
+
+/* ---- meter rows (largest tables) ----------------------------------------- */
+.ras-meters { display: flex; flex-direction: column; gap: 15px; }
+.ras-meter-link { display: block; }
+.ras-meter-link:hover .ras-meter-label { color: var(--color-accent-strong); }
+.ras-meter-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; }
+.ras-meter-label { font-size: 13px; font-weight: 500; color: var(--color-text); transition: color 0.14s; }
+.ras-meter-value { font-size: 13px; font-weight: 600; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
+.ras-meter-track { height: 8px; border-radius: var(--radius-pill); background: var(--color-surface-alt); overflow: hidden; }
+.ras-meter-fill {
+  height: 100%; border-radius: var(--radius-pill); transform-origin: left;
+  animation: ras-grow-right 0.8s var(--ras-ease) both; animation-delay: var(--ras-delay, 0ms);
+}
+
+.ras-section-label {
+  font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
+  color: var(--color-text-muted); margin: 8px 2px 14px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ras-reveal, .ras-content, .ras-tablecard tbody tr, .ras-nav-link,
+  .ras-chart-bar, .ras-segbar-seg, .ras-meter-fill, .ras-chart-skel,
+  .ras-modal-overlay, .ras-modal {
+    animation: none !important;
+    opacity: 1 !important;
+    transform: none !important;
+  }
+  .ras-root { transition: none !important; }
+  .ras-modal-fill { transition: none !important; }
+}
 
 /* ---- scrollbars ---------------------------------------------------------- */
 * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--color-text) 20%, transparent) transparent; }
@@ -374,6 +647,10 @@ a { color: inherit; text-decoration: none; }
 *::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--color-text) 30%, transparent); background-clip: content-box; }
 
 /* ---- responsive ---------------------------------------------------------- */
+@media (max-width: 1080px) {
+  .ras-statgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .ras-panel-row { grid-template-columns: 1fr; }
+}
 @media (max-width: 860px) {
   .ras-root { grid-template-columns: 1fr; }
   .ras-sidebar {