@profpowell/vb-project-planning 0.1.0

package/src/web-components/user-journey/logic.js

@@ -0,0 +1,368 @@
+/**
+ * <user-journey> — User journey map web component
+ *
+ * Visualises a multi-phase user journey with an SVG emotion curve
+ * and a structured phase-breakdown grid table.
+ *
+ * Data sources:
+ *   1. `src` attribute — URL to a JSON file containing phase data
+ *   2. `.phases` property — set programmatically
+ *
+ * JSON schema:
+ *   {
+ *     "title": "...",
+ *     "persona": "...",
+ *     "personaId": "...",
+ *     "summary": "...",
+ *     "phases": [
+ *       {
+ *         "name": "Awareness",
+ *         "emotion": "curious",
+ *         "storyIds": ["PROJ-142"],
+ *         "actions":       ["Searches for solutions"],
+ *         "thoughts":      ["There must be a better way"],
+ *         "touchpoints":   ["Google", "Hacker News"],
+ *         "painPoints":    ["Too many options to compare"],
+ *         "opportunities": ["Clear landing page"]
+ *       }
+ *     ]
+ *   }
+ */
+
+import { styles } from './styles.js';
+import { registerComponent } from '../../lib/bundle-registry.js';
+import { viewTransitionSwap } from '../../lib/vb-view-transition.js';
+import { esc, EMOTION_META, lucideSvg, UX_ICONS } from '../_ux-base.js';
+
+const ROWS = [
+  { key: 'actions',       label: 'Actions'       },
+  { key: 'thoughts',      label: 'Thoughts'      },
+  { key: 'touchpoints',   label: 'Touchpoints'   },
+  { key: 'painPoints',    label: 'Pain Points'   },
+  { key: 'opportunities', label: 'Opportunities' },
+];
+
+class UserJourney extends HTMLElement {
+  static get observedAttributes() {
+    return ['src', 'persona', 'persona-id', 'story-ids', 'compact'];
+  }
+
+  #slotCache = new Map();
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.__phases = null;
+  }
+
+  /** @returns {Array|null} */
+  get phases() { return this.__phases; }
+
+  /**
+   * Replace the phase list. Idempotent (skip on same array reference).
+   * Emits user-journey:phases-changed { phases, source: 'property' }.
+   * @param {Array|null} data
+   */
+  set phases(data) {
+    if (this.__phases === data) return;
+    this.__phases = data;
+    if (this.isConnected) this._render();
+    this.dispatchEvent(new CustomEvent('user-journey:phases-changed', {
+      detail: { phases: data, source: 'property' },
+      bubbles: true, composed: true,
+    }));
+  }
+
+  /**
+   * Read the journey as a plain data object combining state, slotted
+   * content, and the phase array. Mirrors what a consumer would assign
+   * to .data.
+   */
+  get data() {
+    return {
+      persona: this.getAttribute('persona') || undefined,
+      personaId: this.getAttribute('persona-id') || undefined,
+      title: this.querySelector('[slot="title"]')?.textContent?.trim() || undefined,
+      summary: this.querySelector('[slot="summary"]')?.textContent?.trim() || undefined,
+      phases: this.__phases || undefined,
+    };
+  }
+
+  /**
+   * Set state attributes, slotted content, and phases in one assignment.
+   * Emits user-journey:data-changed { data, source: 'property' }.
+   */
+  set data(value) {
+    if (!value || typeof value !== 'object') return;
+    if (value.persona)   this.setAttribute('persona',    String(value.persona));
+    if (value.personaId) this.setAttribute('persona-id', String(value.personaId));
+    if (value.title && !this.querySelector('[slot="title"]')) {
+      const el = document.createElement('h2');
+      el.slot = 'title';
+      el.textContent = value.title;
+      this.appendChild(el);
+    }
+    if (value.summary && !this.querySelector('[slot="summary"]')) {
+      const el = document.createElement('p');
+      el.slot = 'summary';
+      el.textContent = value.summary;
+      this.appendChild(el);
+    }
+    if (value.phases != null) this.__phases = value.phases;
+    if (this.isConnected) this._render();
+    this.dispatchEvent(new CustomEvent('user-journey:data-changed', {
+      detail: { data: this.data, source: 'property' },
+      bubbles: true, composed: true,
+    }));
+  }
+
+  /* ── Slot caching ──────────────────────────── */
+
+  #cacheSlotValues() {
+    for (const child of this.children) {
+      const slot = child.getAttribute('slot');
+      if (slot) this.#slotCache.set(slot, child.textContent.trim());
+    }
+  }
+
+  _resolve(attr) {
+    return this.getAttribute(attr) || this.#slotCache.get(attr) || '';
+  }
+
+  /* ── Lifecycle ─────────────────────────────── */
+
+  connectedCallback() {
+    this.#cacheSlotValues();
+    this.setAttribute('data-upgraded', '');
+    if (this.hasAttribute('src')) {
+      this._loadSrc(this.getAttribute('src'));
+    } else {
+      this._render();
+    }
+  }
+
+  disconnectedCallback() {
+    this.removeAttribute('data-upgraded');
+  }
+
+  attributeChangedCallback(name) {
+    if (!this.isConnected) return;
+    if (name === 'src') {
+      this._loadSrc(this.getAttribute('src'));
+    } else {
+      this._render();
+    }
+  }
+
+  /* ── JSON loading ──────────────────────────── */
+
+  async _loadSrc(src) {
+    if (!src) return;
+    const root = /** @type {ShadowRoot} */ (this.shadowRoot);
+    root.innerHTML = `<style>${styles}</style>` +
+      `<div class="state-msg">Loading\u2026</div>`;
+    try {
+      const res = await fetch(src);
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const data = await res.json();
+      if (data.persona)   this.setAttribute('persona',    data.persona);
+      if (data.personaId) this.setAttribute('persona-id', data.personaId);
+      if (data.title && !this.querySelector('[slot="title"]')) {
+        const el = document.createElement('h2');
+        el.slot = 'title';
+        el.textContent = data.title;
+        this.appendChild(el);
+      }
+      if (data.summary && !this.querySelector('[slot="summary"]')) {
+        const el = document.createElement('p');
+        el.slot = 'summary';
+        el.textContent = data.summary;
+        this.appendChild(el);
+      }
+      this.__phases = data.phases || [];
+      this._render();
+    } catch (err) {
+      root.innerHTML = `<style>${styles}</style>` +
+        `<div class="state-msg state-msg--error">Could not load journey: ${esc(/** @type {Error} */ (err).message)}</div>`;
+    }
+  }
+
+  /* ── Render ────────────────────────────────── */
+
+  _render() {
+    const persona   = this._resolve('persona')    || '';
+    const personaId = this._resolve('persona-id') || '';
+    const storyIds  = (this.getAttribute('story-ids') || '')
+      .split(',').map(s => s.trim()).filter(Boolean);
+    const compact   = this.hasAttribute('compact');
+    const phases    = this.__phases;
+    const hasSummary = !!this.querySelector('[slot="summary"]') || this.#slotCache.has('summary');
+    const title     = this.querySelector('[slot="title"]')?.textContent?.trim()
+      || this.#slotCache.get('title') || '';
+
+    const html = `<style>${styles}</style>
+      <article class="journey${compact ? ' journey--compact' : ''}">
+
+        <header class="journey__header">
+          <div class="journey__header-top">
+            <div class="journey__chips">
+              <span class="chip chip--type">Journey Map</span>
+              ${storyIds.map(id =>
+                `<a class="chip chip--story" href="#${id}">${this._label(id)}</a>`
+              ).join('')}
+            </div>
+            ${persona ? `
+              <div class="journey__persona">
+                ${personaId
+                  ? `<a class="persona-ref" href="#${personaId}">${lucideSvg(UX_ICONS.user)} ${esc(persona)}</a>`
+                  : `<span class="persona-ref">${lucideSvg(UX_ICONS.user)} ${esc(persona)}</span>`}
+              </div>` : ''}
+          </div>
+          <div class="journey__title-wrap">
+            <slot name="title"><h2 class="journey__title">User Journey</h2></slot>
+          </div>
+          ${hasSummary ? `<div class="journey__summary-wrap"><slot name="summary"></slot></div>` : ''}
+        </header>
+
+        ${phases && phases.length
+          ? this._curve(phases) + this._grid(phases)
+          : `<div class="journey__placeholder">
+               <p>Add phase data via <code>src</code> (JSON) or set <code>.phases</code> programmatically.</p>
+             </div>`
+        }
+
+      </article>`;
+
+    /* Pin view-transition-name on the host so the browser crossfades the
+       light-DOM snapshot (which includes the shadow paint) when the
+       shadowRoot innerHTML swap replaces all content. Skip on the first
+       render — there's nothing to fade from. */
+    const root = /** @type {ShadowRoot} */ (this.shadowRoot);
+    const swap = () => { root.innerHTML = html; };
+    if (root.querySelector('article')) {
+      viewTransitionSwap(this, swap, 'uj-vt');
+    } else {
+      swap();
+    }
+
+    /* Dispatch ready event */
+    this.dispatchEvent(new CustomEvent('journey-ready', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        title,
+        persona,
+        phaseCount: phases ? phases.length : 0,
+      },
+    }));
+  }
+
+  /* ── SVG curve ─────────────────────────────── */
+
+  _curve(phases) {
+    const W = 1000, H = 100, PX = 28, PY = 14;
+    const uw = W - PX * 2, uh = H - PY * 2;
+    const n  = phases.length;
+
+    const toX = i  => PX + (n < 2 ? uw / 2 : (i / (n - 1)) * uw);
+    const toY = ph => {
+      const m = EMOTION_META[ph.emotion] || EMOTION_META.neutral;
+      return PY + (1 - m.score) * uh;
+    };
+
+    const pts = phases.map((ph, i) => ({ x: toX(i), y: toY(ph), ph }));
+
+    let d = `M ${pts[0].x},${pts[0].y}`;
+    for (let i = 1; i < pts.length; i++) {
+      const a = pts[i - 1], b = pts[i], cx = (a.x + b.x) / 2;
+      d += ` C ${cx},${a.y} ${cx},${b.y} ${b.x},${b.y}`;
+    }
+
+    const uid = `uj-${Math.random().toString(36).slice(2, 8)}`;
+    const last = pts.at(-1);
+
+    return `
+      <div class="journey__curve" aria-hidden="true">
+        <svg viewBox="0 0 ${W} ${H}" preserveAspectRatio="none" class="curve-svg">
+          <defs>
+            <linearGradient id="${uid}" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%"   stop-color="#6366f1" stop-opacity="0.22"/>
+              <stop offset="100%" stop-color="#6366f1" stop-opacity="0"/>
+            </linearGradient>
+          </defs>
+          <rect x="0"             y="0"          width="${W}" height="${H * 0.4}"  class="zone zone--pos"/>
+          <rect x="0"             y="${H * 0.4}" width="${W}" height="${H * 0.2}"  class="zone zone--neu"/>
+          <rect x="0"             y="${H * 0.6}" width="${W}" height="${H * 0.4}"  class="zone zone--neg"/>
+          ${pts.map(({x}) => `<line x1="${x}" y1="0" x2="${x}" y2="${H}" class="vline"/>`).join('')}
+          <path d="${d} L ${last.x},${H} L ${pts[0].x},${H} Z" fill="url(#${uid})"/>
+          <path d="${d}" fill="none" class="curve-line"/>
+          ${pts.map(({x, y, ph}) => {
+            const m = EMOTION_META[ph.emotion] || EMOTION_META.neutral;
+            return `<circle cx="${x}" cy="${y}" r="5" class="dot" style="fill:${m.color}"/>`;
+          }).join('')}
+        </svg>
+      </div>`;
+  }
+
+  /* ── Phase grid ────────────────────────────── */
+
+  _grid(phases) {
+    const headCells = phases.map((ph, i) => {
+      const m       = EMOTION_META[ph.emotion] || EMOTION_META.neutral;
+      const stories = ph.storyIds || [];
+      return `
+        <th class="phase-head" data-emotion="${ph.emotion || 'neutral'}"
+            style="--ec:${m.color}">
+          <span class="ph-num">${i + 1}</span>
+          <span class="ph-name">${esc(ph.name || '')}</span>
+          <span class="ph-emoji" title="${ph.emotion || 'neutral'}"><span role="img" aria-label="${esc(ph.emotion || 'neutral')}">${m.emoji}</span></span>
+          ${stories.length
+            ? `<div class="ph-stories">${stories.map(id =>
+                `<a class="chip chip--story" href="#${id}">${this._label(id)}</a>`
+              ).join('')}</div>`
+            : ''}
+        </th>`;
+    }).join('');
+
+    const bodyRows = ROWS.map(({ key, label }) => {
+      const cells = phases.map(ph => {
+        const items = ph[key] || [];
+        if (!items.length) return `<td class="data-cell data-cell--empty">\u2014</td>`;
+        return `<td class="data-cell data-cell--${key.toLowerCase()}">
+          ${items.map(t => `<p>${esc(t)}</p>`).join('')}
+        </td>`;
+      }).join('');
+      return `
+        <tr class="grid-row grid-row--${key.toLowerCase()}">
+          <th class="row-label">${label}</th>
+          ${cells}
+        </tr>`;
+    }).join('');
+
+    return `
+      <div class="journey__grid-wrap">
+        <table class="journey__grid"
+               aria-label="${esc(this.getAttribute('title') || 'User Journey')} \u2014 phase breakdown">
+          <thead>
+            <tr>
+              <th class="corner">Stage</th>
+              ${headCells}
+            </tr>
+          </thead>
+          <tbody>${bodyRows}</tbody>
+        </table>
+      </div>`;
+  }
+
+  /* ── Helpers ───────────────────────────────── */
+
+  _label(id) {
+    return id.replace(/^(activity|persona|journey|story|user)-/, '')
+             .replace(/-/g, ' ')
+             .replace(/\b\w/g, c => c.toUpperCase());
+  }
+}
+
+registerComponent('user-journey', UserJourney);
+
+export { UserJourney };

package/src/web-components/user-journey/static.html

@@ -0,0 +1,14 @@
+<!--
+  user-journey — static (zero-JS) form
+  Without JS, shows the journey metadata. Full visualization requires JS.
+-->
+<user-journey
+  title="API Platform Evaluation"
+  persona="Sarah Chen"
+  persona-id="persona-sarah-chen"
+  summary="How a developer discovers, evaluates, and adopts our platform"
+  story-ids="PROJ-142,PROJ-156">
+  <noscript>
+    <p>This journey map requires JavaScript to render the emotion curve and phase grid.</p>
+  </noscript>
+</user-journey>

package/src/web-components/user-journey/styles.js

@@ -0,0 +1,317 @@
+/**
+ * Shadow DOM styles for <user-journey>
+ *
+ * Theme integration:
+ *   --user-journey-*  (per-instance author override)
+ *   --color-*         (VB theme token — adapts to data-theme and color mode)
+ *   #fallback         (last-resort hex for component used outside VB)
+ *
+ * VB tokens already swap on color-scheme change and across themes, so we
+ * deliberately DO NOT define our own @media (prefers-color-scheme: dark)
+ * overrides — those would override the user's chosen VB theme. Semantic
+ * tints (positive/neutral/negative emotion zones, painpoint/opportunity
+ * row tints) are derived via color-mix from the corresponding theme
+ * tokens (--color-success/--color-warning/--color-error) so they shift
+ * automatically with the active theme.
+ */
+const styles = `
+  :host {
+    display: block;
+    font-family: var(--_font-sans);
+    line-height: 1.6;
+    color: var(--_text);
+    container-type: inline-size;
+
+    --_bg:        var(--user-journey-bg, var(--color-surface-raised, #f8f9fa));
+    --_card:      var(--user-journey-card, var(--color-surface, #ffffff));
+    --_border:    var(--user-journey-border, var(--color-border, #e0e0e0));
+    --_muted:     var(--user-journey-muted, var(--color-text-muted, #666666));
+    --_text:      var(--user-journey-text, var(--color-text, #1a1a1a));
+    --_inverted:  var(--user-journey-text-inverted, var(--color-text-inverted, #ffffff));
+    --_primary:   var(--user-journey-primary, var(--color-primary, var(--color-interactive, #6366f1)));
+    --_accent:    var(--user-journey-accent, var(--color-accent, #8b5cf6));
+    --_link:      var(--user-journey-link, var(--color-interactive, var(--color-primary, #6366f1)));
+    --_curve-stroke: var(--user-journey-curve-stroke, var(--_primary));
+    --_radius:    var(--user-journey-radius, var(--radius-l, 0.75rem));
+
+    --_font-sans: var(--user-journey-font, var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));
+    --_font-mono: var(--user-journey-font-mono, var(--font-mono, ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace));
+    --_font-xs:   var(--user-journey-font-xs, var(--font-size-xs, 0.75rem));
+    --_font-sm:   var(--user-journey-font-sm, var(--font-size-sm, 0.875rem));
+    --_font-md:   var(--user-journey-font-md, var(--font-size-md, 1rem));
+    --_font-xl:   var(--user-journey-font-xl, var(--font-size-xl, 1.25rem));
+    --_space-2xs: var(--user-journey-space-2xs, var(--size-2xs, 0.25rem));
+    --_space-xs:  var(--user-journey-space-xs, var(--size-xs, 0.5rem));
+    --_space-s:   var(--user-journey-space-s, var(--size-s, 0.75rem));
+    --_space-m:   var(--user-journey-space-m, var(--size-m, 1rem));
+    --_space-l:   var(--user-journey-space-l, var(--size-l, 1.5rem));
+
+    /* Semantic tints derived from theme tokens via color-mix.
+       Subtle backgrounds (10–14%) for body cells, header at 22%. */
+    --_tint-pos:  color-mix(in oklch, var(--color-success, #22c55e) 14%, var(--_card));
+    --_tint-neu:  color-mix(in oklch, var(--color-warning, #f59e0b) 12%, var(--_card));
+    --_tint-neg:  color-mix(in oklch, var(--color-error,   #ef4444) 12%, var(--_card));
+    --_tint-row-pain: color-mix(in oklch, var(--color-error,   #ef4444) 8%,  var(--_card));
+    --_tint-row-opp:  color-mix(in oklch, var(--color-success, #22c55e) 8%,  var(--_card));
+    --_chip-type-bg:  color-mix(in oklch, var(--_accent)  18%, var(--_card));
+    --_chip-type-fg:  var(--color-accent-text, var(--_accent));
+    --_chip-story-bg: color-mix(in oklch, var(--_link)    18%, var(--_card));
+    --_chip-story-bg-hover: color-mix(in oklch, var(--_link) 28%, var(--_card));
+    --_chip-story-fg: var(--_link);
+    --_grid-head-bg:  color-mix(in oklch, var(--_primary) 85%, var(--color-text, #000));
+  }
+
+  *, *::before, *::after { box-sizing: border-box; margin: 0; }
+
+  /* Card */
+  .journey {
+    background: var(--_card);
+    border: 1px solid var(--_border);
+    border-radius: var(--_radius);
+    overflow: hidden;
+  }
+
+  /* Header */
+  .journey__header {
+    padding: 20px 24px 16px 28px;
+    border-block-end: 1px solid var(--_border);
+    position: relative;
+  }
+
+  /* Left accent bar */
+  .journey__header::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: 4px;
+    background: linear-gradient(135deg, var(--_primary), var(--_accent));
+  }
+
+  .journey__header-top {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--_space-s);
+    flex-wrap: wrap;
+    margin-block-end: var(--_space-xs);
+  }
+
+  .journey__chips {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+  }
+
+  /* Chips */
+  .chip {
+    display: inline-block;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    padding: 2px 9px;
+    border-radius: 99px;
+    text-decoration: none;
+    line-height: 1.6;
+  }
+
+  .chip--type {
+    color: var(--_chip-type-fg);
+    background: var(--_chip-type-bg);
+  }
+
+  .chip--story {
+    color: var(--_chip-story-fg);
+    background: var(--_chip-story-bg);
+  }
+
+  .chip--story:hover { background: var(--_chip-story-bg-hover); }
+
+  /* Persona ref */
+  .persona-ref {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--_muted);
+    text-decoration: none;
+    white-space: nowrap;
+  }
+  .persona-ref svg { width: 14px; height: 14px; flex-shrink: 0; }
+  a.persona-ref:hover { color: var(--_link); text-decoration: underline; }
+
+  /* Title & summary (slotted content) */
+  .journey__title-wrap {
+    margin-block-end: var(--_space-2xs);
+  }
+
+  .journey__title {
+    font-size: var(--_font-xl);
+    font-weight: 700;
+    color: var(--_text);
+    margin: 0;
+  }
+
+  ::slotted([slot="title"]) {
+    font-size: var(--_font-xl) !important;
+    font-weight: 700 !important;
+    color: var(--_text) !important;
+    margin: 0 !important;
+  }
+
+  .journey--compact .journey__title,
+  .journey--compact ::slotted([slot="title"]) { font-size: var(--_font-md) !important; }
+
+  .journey__summary-wrap {
+    max-width: 72ch;
+  }
+
+  ::slotted([slot="summary"]) {
+    font-size: var(--_font-sm) !important;
+    color: var(--_muted) !important;
+    margin: 0 !important;
+  }
+
+  /* Emotion curve */
+  .journey__curve {
+    background: var(--_bg);
+    border-block-end: 1px solid var(--_border);
+    overflow: hidden;
+  }
+
+  .curve-svg {
+    display: block;
+    width: 100%;
+    height: 80px;
+  }
+
+  .journey--compact .curve-svg { height: 54px; }
+
+  .zone { opacity: 0.55; }
+  .zone--pos { fill: var(--_tint-pos); }
+  .zone--neu { fill: var(--_tint-neu); }
+  .zone--neg { fill: var(--_tint-neg); }
+
+  .vline      { stroke: var(--_border); stroke-width: 1; stroke-dasharray: 3 4; }
+  .curve-line { stroke: var(--_curve-stroke); stroke-width: 2.5; stroke-linecap: round; }
+  .dot        { stroke: var(--_card); stroke-width: 2.5; }
+
+  /* Grid */
+  .journey__grid-wrap { overflow-x: auto; }
+
+  .journey__grid {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+  }
+
+  /* Head row */
+  .journey__grid thead tr {
+    background: var(--_grid-head-bg);
+    color: var(--_inverted);
+  }
+
+  .corner {
+    padding: 10px 12px;
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    opacity: 0.55;
+    text-align: left;
+    white-space: nowrap;
+    min-width: 100px;
+    position: sticky;
+    left: 0;
+    background: var(--_grid-head-bg);
+    z-index: 2;
+  }
+
+  .phase-head {
+    padding: 10px 14px;
+    text-align: left;
+    vertical-align: top;
+    border-inline-start: 1px solid color-mix(in oklch, var(--_inverted) 12%, transparent);
+    min-width: 160px;
+    position: relative;
+  }
+
+  /* Emotion-coloured top accent per phase */
+  .phase-head::before {
+    content: '';
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline: 0;
+    height: 3px;
+    background: var(--ec, var(--_primary));
+  }
+
+  .ph-num   { display: block; font-size: 10px; opacity: 0.5; margin-block-end: 2px; }
+  .ph-name  { display: block; font-size: var(--_font-sm); font-weight: 700; line-height: 1.2; }
+  .ph-emoji { display: block; font-size: var(--_font-xl); line-height: 1; margin-block: 4px 2px; }
+
+  .ph-stories { display: flex; flex-wrap: wrap; gap: var(--_space-2xs); margin-block-start: var(--_space-2xs); }
+
+  /* Body rows */
+  .grid-row th,
+  .grid-row td {
+    padding: 10px 12px;
+    border-block-end: 1px solid var(--_border);
+    border-inline-start: 1px solid var(--_border);
+    vertical-align: top;
+  }
+
+  .grid-row th:first-child { border-inline-start: none; }
+
+  .row-label {
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.07em;
+    color: var(--_muted);
+    white-space: nowrap;
+    background: var(--_bg);
+    text-align: left;
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  .data-cell          { font-size: 13px; line-height: 1.45; }
+  .data-cell p        { margin-block: 0 4px; }
+  .data-cell p:last-child { margin-block-end: 0; }
+  .data-cell--empty   { color: var(--_muted); opacity: 0.35; }
+
+  /* Semantic row tints */
+  .grid-row--painpoints    .data-cell { background: var(--_tint-row-pain); }
+  .grid-row--opportunities .data-cell { background: var(--_tint-row-opp); }
+
+  /* Compact */
+  .journey--compact .phase-head { min-width: 120px; padding: 8px 10px; }
+  .journey--compact .data-cell  { font-size: 12px; padding: 7px 10px; }
+  .journey--compact .corner     { min-width: 80px; }
+
+  /* Utility */
+  .state-msg           { padding: var(--_space-l); font-size: var(--_font-sm); color: var(--_muted); font-style: italic; }
+  .state-msg--error    { color: var(--color-error-text, var(--color-error, #dc2626)); }
+  .journey__placeholder { padding: 20px 24px; font-size: var(--_font-sm); color: var(--_muted); }
+  code { font-family: var(--_font-mono); font-size: 0.88em; }
+
+  /* Responsive */
+  @container (max-width: 500px) {
+    .journey__header   { padding: 14px 16px 12px 20px; }
+    .journey__title    { font-size: 17px; }
+    .corner, .row-label { min-width: 72px; font-size: 9px; }
+    .phase-head        { min-width: 110px; padding: 8px 10px; }
+    .data-cell         { font-size: 12px; padding: 8px 10px; }
+  }
+
+  @media print {
+    .journey__grid-wrap { overflow: visible; }
+    .row-label, .corner { position: relative; }
+  }
+`;
+
+export { styles };