/* ══════════════════════════════════════════
Attune Design System Tokens
Do not edit values here.
══════════════════════════════════════════ */
:root {
/* ─── Font families ─── */
--font-sans: 'General Sans Variable', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'SF Mono', 'IBM Plex Mono', 'Menlo', monospace;
/* ─── Palette: Purple ─── */
--palette-purple-50: #f5f3ff;
--palette-purple-100: #ece8fb;
--palette-purple-200: #c4b5fc;
--palette-purple-300: #a78bfa;
--palette-purple-400: #967fee;
--palette-purple-500: #6d3ce8;
--palette-purple-600: #4c02e8;
--palette-purple-700: #3b01b8;
--palette-purple-800: #2a0182;
--palette-purple-900: #1a0054;
/* ─── Palette: Emerald ─── */
--palette-emerald-50: #effdf5;
--palette-emerald-100: #d1fae5;
--palette-emerald-200: #6ee7b7;
--palette-emerald-300: #6dd3a8;
--palette-emerald-400: #34d399;
--palette-emerald-500: #10b981;
--palette-emerald-600: #059669;
--palette-emerald-700: #047857;
--palette-emerald-800: #065f46;
--palette-emerald-900: #064e3b;
/* ─── Palette: Neutrals ─── */
--palette-neutrals-white: #ffffff;
--palette-neutrals-50: #fafafa;
--palette-neutrals-100: #f3f4f6;
--palette-neutrals-200: #e5e7eb;
--palette-neutrals-300: #d1d5db;
--palette-neutrals-400: #9da3ae;
--palette-neutrals-500: #6c727f;
--palette-neutrals-700: #394150;
--palette-neutrals-800: #212936;
--palette-neutrals-900: #121826;
/* ─── Semantic: Brand ─── */
--brand-primary: #4c02e8;
--brand-hover: #3b01b8;
--brand-pressed: #2a0182;
--brand-subtle: #f5f3ff;
--brand-secondary: #059669;
/* ─── Semantic: Text ─── */
--text-primary: #121826;
--text-secondary: #394150;
--text-muted: #9da3ae;
--text-link: #4c02e8;
--text-on-primary: #ffffff;
--text-on-accent: #065f46;
--text-on-brand: #2a0182;
/* ─── Semantic: Background ─── */
--bg-page: #f8f7f4;
--bg-surface: #ffffff;
--bg-elevated: #fafafa;
--bg-subtle: #f5f3ff;
--bg-tint: rgba(18, 24, 38, 0.15);
/* ─── Semantic: Border ─── */
--border-primary: #e5e7eb;
--border-secondary: #9da3ae;
--border-focus: #967fee;
/* ─── Semantic: Status ─── */
--status-warning-default: #fcf3cc;
--status-warning-subtle: #e9a23b;
--status-error-default: #f9e3e2;
--status-error-subtle: #dd524c;
--status-error-hover: #c24741;
--status-error-text: #c12b25;
--status-info-default: #dee9fc;
--status-info-subtle: #4e80ee;
--status-success-default: #effdf5;
--status-success-subtle: #059669;
--status-badge-confirmation: #d1fae5;
/* ─── Semantic: Journey nodes ─── */
--node-message: #4c02e8;
--node-check-in: #059669;
--node-branch: #e9a23b;
--node-handoff: #dd524c;
/* ─── Radii ─── */
--radius-default: 14px;
--radius-small: 12px;
/* ─── Shadows ─── */
--shadow-container-elevated-bg: 0 3px 6px -2px rgba(0, 0, 0, 0.04), 0 1px 1px 0 rgba(0, 0, 0, 0.07);
--shadow-elevated-sm: 0 1px 0.5px 0 rgba(0, 0, 0, 0.07), 0 3px 3px 0 rgba(0, 0, 0, 0.04);
/* ─── Typography: Display ─── */
--text-display-large-font-family: var(--font-sans);
--text-display-large-font-weight: 700;
--text-display-large-font-size: 48px;
--text-display-large-line-height: 56px;
--text-display-large-letter-spacing: -0.01em;
--text-display-small-font-family: var(--font-sans);
--text-display-small-font-weight: 700;
--text-display-small-font-size: 36px;
--text-display-small-line-height: 44px;
--text-display-small-letter-spacing: -0.01em;
/* ─── Typography: Heading ─── */
--text-h1-font-family: var(--font-sans);
--text-h1-font-weight: 600;
--text-h1-font-size: 24px;
--text-h1-line-height: 32px;
--text-h1-letter-spacing: -0.01em;
--text-h2-font-family: var(--font-sans);
--text-h2-font-weight: 600;
--text-h2-font-size: 20px;
--text-h2-line-height: 28px;
--text-h2-letter-spacing: -0.005em;
--text-h3-font-family: var(--font-sans);
--text-h3-font-weight: 500;
--text-h3-font-size: 16px;
--text-h3-line-height: 24px;
--text-h3-letter-spacing: 0;
--text-h4-font-family: var(--font-sans);
--text-h4-font-weight: 500;
--text-h4-font-size: 14px;
--text-h4-line-height: 20px;
--text-h4-letter-spacing: 0;
/* ─── Typography: Body ─── */
--text-body-large-font-family: var(--font-sans);
--text-body-large-font-weight: 400;
--text-body-large-font-size: 15px;
--text-body-large-line-height: 24px;
--text-body-large-letter-spacing: 0;
--text-body-font-family: var(--font-sans);
--text-body-font-weight: 400;
--text-body-font-size: 14px;
--text-body-line-height: 22px;
--text-body-letter-spacing: 0;
--text-body-bold-font-family: var(--font-sans);
--text-body-bold-font-weight: 600;
--text-body-bold-font-size: 14px;
--text-body-bold-line-height: 22px;
--text-body-bold-letter-spacing: 0;
--text-body-small-font-family: var(--font-sans);
--text-body-small-font-weight: 400;
--text-body-small-font-size: 13px;
--text-body-small-line-height: 20px;
--text-body-small-letter-spacing: 0;
/* ─── Typography: Caption ─── */
--text-caption-font-family: var(--font-sans);
--text-caption-font-weight: 400;
--text-caption-font-size: 12px;
--text-caption-line-height: 18px;
--text-caption-letter-spacing: 0.01em;
--text-caption-bold-font-family: var(--font-sans);
--text-caption-bold-font-weight: 600;
--text-caption-bold-font-size: 12px;
--text-caption-bold-line-height: 18px;
--text-caption-bold-letter-spacing: 0;
/* ─── Typography: Data (mono) ─── */
--text-data-font-family: var(--font-mono);
--text-data-font-weight: 500;
--text-data-font-size: 13px;
--text-data-line-height: 18px;
--text-data-letter-spacing: 0;
--text-data-small-font-family: var(--font-mono);
--text-data-small-font-weight: 500;
--text-data-small-font-size: 12px;
--text-data-small-line-height: 16px;
--text-data-small-letter-spacing: 0;
/* ─── Typography: UI ─── */
--text-ui-nav-font-family: var(--font-sans);
--text-ui-nav-font-weight: 500;
--text-ui-nav-font-size: 13px;
--text-ui-nav-line-height: 18px;
--text-ui-nav-letter-spacing: 0;
--text-ui-nav-550-font-family: var(--font-sans);
--text-ui-nav-550-font-weight: 550;
--text-ui-nav-550-font-size: 13px;
--text-ui-nav-550-line-height: 18px;
--text-ui-nav-550-letter-spacing: 0;
--text-ui-label-font-family: var(--font-sans);
--text-ui-label-font-weight: 500;
--text-ui-label-font-size: 12px;
--text-ui-label-line-height: 16px;
--text-ui-label-letter-spacing: 0.005em;
--text-ui-label-small-font-family: var(--font-sans);
--text-ui-label-small-font-weight: 500;
--text-ui-label-small-font-size: 10px;
--text-ui-label-small-line-height: 12px;
--text-ui-label-small-letter-spacing: 0;
--text-ui-badge-font-family: var(--font-sans);
--text-ui-badge-font-weight: 500;
--text-ui-badge-font-size: 11px;
--text-ui-badge-line-height: 16px;
--text-ui-badge-letter-spacing: 0.005em;
--text-ui-badge-small-font-family: var(--font-sans);
--text-ui-badge-small-font-weight: 700;
--text-ui-badge-small-font-size: 9px;
--text-ui-badge-small-line-height: 14px;
--text-ui-badge-small-letter-spacing: 0;
--text-btn-font-family: var(--font-sans);
--text-btn-font-weight: 500;
--text-btn-font-size: 14px;
--text-btn-line-height: 20px;
--text-btn-letter-spacing: 0;
--text-btn-small-font-family: var(--font-sans);
--text-btn-small-font-weight: 500;
--text-btn-small-font-size: 12px;
--text-btn-small-line-height: 18px;
--text-btn-small-letter-spacing: 0;
/* ─── Backwards-compat aliases ───
Old names used by existing rules below; map to new tokens so existing CSS
keeps rendering without modification. Remove once callers migrate. */
--bg: var(--bg-page);
--surface: var(--bg-surface);
--surface-soft: #FFFBF6;
--border: var(--border-primary);
--border-dark: var(--border-secondary);
--text: var(--text-primary);
--text-2: var(--text-secondary);
--purple: var(--brand-primary);
--purple-dim: var(--palette-purple-50);
--cyan: var(--brand-secondary);
--cyan-dim: var(--palette-emerald-50);
--pink: #E9B1D3;
--pink-dim: var(--status-error-default);
--font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
--mono: var(--font-mono);
}
/* ─── Text utility classes ─── */
.text-display-large {
font-family: var(--text-display-large-font-family);
font-weight: var(--text-display-large-font-weight);
font-size: var(--text-display-large-font-size);
line-height: var(--text-display-large-line-height);
letter-spacing: var(--text-display-large-letter-spacing);
}
.text-display-small {
font-family: var(--text-display-small-font-family);
font-weight: var(--text-display-small-font-weight);
font-size: var(--text-display-small-font-size);
line-height: var(--text-display-small-line-height);
letter-spacing: var(--text-display-small-letter-spacing);
}
.text-h1 {
font-family: var(--text-h1-font-family);
font-weight: var(--text-h1-font-weight);
font-size: var(--text-h1-font-size);
line-height: var(--text-h1-line-height);
letter-spacing: var(--text-h1-letter-spacing);
}
.text-h2 {
font-family: var(--text-h2-font-family);
font-weight: var(--text-h2-font-weight);
font-size: var(--text-h2-font-size);
line-height: var(--text-h2-line-height);
letter-spacing: var(--text-h2-letter-spacing);
}
.text-h3 {
font-family: var(--text-h3-font-family);
font-weight: var(--text-h3-font-weight);
font-size: var(--text-h3-font-size);
line-height: var(--text-h3-line-height);
letter-spacing: var(--text-h3-letter-spacing);
}
.text-h4 {
font-family: var(--text-h4-font-family);
font-weight: var(--text-h4-font-weight);
font-size: var(--text-h4-font-size);
line-height: var(--text-h4-line-height);
letter-spacing: var(--text-h4-letter-spacing);
}
.text-body-large {
font-family: var(--text-body-large-font-family);
font-weight: var(--text-body-large-font-weight);
font-size: var(--text-body-large-font-size);
line-height: var(--text-body-large-line-height);
letter-spacing: var(--text-body-large-letter-spacing);
}
.text-body {
font-family: var(--text-body-font-family);
font-weight: var(--text-body-font-weight);
font-size: var(--text-body-font-size);
line-height: var(--text-body-line-height);
letter-spacing: var(--text-body-letter-spacing);
}
.text-body-bold {
font-family: var(--text-body-bold-font-family);
font-weight: var(--text-body-bold-font-weight);
font-size: var(--text-body-bold-font-size);
line-height: var(--text-body-bold-line-height);
letter-spacing: var(--text-body-bold-letter-spacing);
}
.text-body-small {
font-family: var(--text-body-small-font-family);
font-weight: var(--text-body-small-font-weight);
font-size: var(--text-body-small-font-size);
line-height: var(--text-body-small-line-height);
letter-spacing: var(--text-body-small-letter-spacing);
}
.text-caption {
font-family: var(--text-caption-font-family);
font-weight: var(--text-caption-font-weight);
font-size: var(--text-caption-font-size);
line-height: var(--text-caption-line-height);
letter-spacing: var(--text-caption-letter-spacing);
}
.text-caption-bold {
font-family: var(--text-caption-bold-font-family);
font-weight: var(--text-caption-bold-font-weight);
font-size: var(--text-caption-bold-font-size);
line-height: var(--text-caption-bold-line-height);
letter-spacing: var(--text-caption-bold-letter-spacing);
text-transform: uppercase;
}
.text-data {
font-family: var(--text-data-font-family);
font-weight: var(--text-data-font-weight);
font-size: var(--text-data-font-size);
line-height: var(--text-data-line-height);
letter-spacing: var(--text-data-letter-spacing);
}
.text-data-small {
font-family: var(--text-data-small-font-family);
font-weight: var(--text-data-small-font-weight);
font-size: var(--text-data-small-font-size);
line-height: var(--text-data-small-line-height);
letter-spacing: var(--text-data-small-letter-spacing);
}
.text-ui-nav {
font-family: var(--text-ui-nav-font-family);
font-weight: var(--text-ui-nav-font-weight);
font-size: var(--text-ui-nav-font-size);
line-height: var(--text-ui-nav-line-height);
letter-spacing: var(--text-ui-nav-letter-spacing);
}
.text-ui-nav-550 {
font-family: var(--text-ui-nav-550-font-family);
font-weight: var(--text-ui-nav-550-font-weight);
font-size: var(--text-ui-nav-550-font-size);
line-height: var(--text-ui-nav-550-line-height);
letter-spacing: var(--text-ui-nav-550-letter-spacing);
}
.text-ui-label {
font-family: var(--text-ui-label-font-family);
font-weight: var(--text-ui-label-font-weight);
font-size: var(--text-ui-label-font-size);
line-height: var(--text-ui-label-line-height);
letter-spacing: var(--text-ui-label-letter-spacing);
}
.text-ui-badge {
font-family: var(--text-ui-badge-font-family);
font-weight: var(--text-ui-badge-font-weight);
font-size: var(--text-ui-badge-font-size);
line-height: var(--text-ui-badge-line-height);
letter-spacing: var(--text-ui-badge-letter-spacing);
}
.text-btn {
font-family: var(--text-btn-font-family);
font-weight: var(--text-btn-font-weight);
font-size: var(--text-btn-font-size);
line-height: var(--text-btn-line-height);
letter-spacing: var(--text-btn-letter-spacing);
}
.text-btn-small {
font-family: var(--text-btn-small-font-family);
font-weight: var(--text-btn-small-font-weight);
font-size: var(--text-btn-small-font-size);
line-height: var(--text-btn-small-line-height);
letter-spacing: var(--text-btn-small-letter-spacing);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; }
/* ══════════════════════════════════════════
Product Show Page
══════════════════════════════════════════ */
/* Nav */
.pd-nav {
display: flex; align-items: center; justify-content: space-between;
padding: 0 28px; height: 56px;
background: var(--surface); border-bottom: 1.5px solid var(--border);
position: sticky; top: 0; z-index: 100;
gap: 16px;
}
.pd-nav-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pd-back { font-size: 0.82rem; color: var(--text-muted); text-decoration: none; flex-shrink: 0; }
.pd-back:hover { color: var(--text); }
.pd-sep { color: var(--border-dark); flex-shrink: 0; }
.pd-title { font-size: 0.9rem; font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-nav-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Buttons */
.btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 16px; border-radius: 7px;
font-size: 0.84rem; font-weight: 600; font-family: var(--font);
cursor: pointer; border: 1.5px solid transparent;
text-decoration: none; transition: all 0.15s; white-space: nowrap;
line-height: 1;
}
.btn-ghost { background: transparent; color: var(--text-muted); border-color: var(--border); }
.btn-ghost:hover { background: var(--bg); color: var(--text); border-color: var(--border-dark); }
.btn-outline { background: var(--surface); color: var(--text-2); border-color: var(--border); }
.btn-outline:hover { border-color: var(--border-dark); background: var(--bg); }
.btn-primary { background: var(--purple); color: #fff; border-color: var(--purple); }
.btn-primary:hover { background: #3a01b0; border-color: #3a01b0; }
.btn-primary:disabled { opacity: 0.38; cursor: not-allowed; }
.btn-cyan { background: var(--cyan); color: var(--text-2); border-color: var(--cyan); }
.btn-cyan:hover { background: #28e8b8; }
.btn-success { background: #16a34a; color: #fff; border-color: #16a34a; }
.btn-success:hover { background: #15803d; }
.btn-sm { padding: 6px 12px; font-size: 0.78rem; }
.btn-xs { padding: 4px 9px; font-size: 0.72rem; }
/* Pills */
.pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 9px; border-radius: 100px;
font-size: 0.7rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.05em;
}
.pill-dot { width: 5px; height: 5px; border-radius: 50%; }
.pill-ready { background: var(--cyan-dim); color: #0a6b52; }
.pill-ready .pill-dot { background: var(--cyan); }
.pill-ingested { background: var(--cyan-dim); color: #0a6b52; }
.pill-ingested .pill-dot { background: var(--cyan); }
.pill-ingesting { background: #FEF9C3; color: #854D0E; }
.pill-ingesting .pill-dot { background: #EAB308; }
.pill-draft { background: var(--border); color: var(--text-muted); }
.pill-draft .pill-dot { background: #bbb; }
.pill-failed { background: var(--pink-dim); color: #9F1239; }
.pill-failed .pill-dot { background: var(--pink); }
.pill-published { background: var(--cyan-dim); color: #0a6b52; }
.pill-published .pill-dot { background: var(--cyan); }
.pill-archived { background: var(--border); color: var(--text-muted); }
.pill-archived .pill-dot { background: #bbb; }
/* Shell */
.pd-shell { display: flex; min-height: calc(100vh - 56px); }
/* Left Rail */
.pd-rail {
width: 264px; flex-shrink: 0;
background: var(--surface-soft);
border-right: 1.5px solid var(--border);
padding: 20px 16px;
display: flex; flex-direction: column; gap: 20px;
position: sticky; top: 56px;
height: calc(100vh - 56px);
overflow-y: auto;
}
.rail-section { display: flex; flex-direction: column; gap: 8px; }
.rail-label {
font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.08em; color: var(--text-muted);
}
.rail-divider { border: none; border-top: 1.5px solid var(--border); }
/* Product card */
.product-card {
background: var(--surface); border: 1.5px solid var(--border);
border-radius: 10px; padding: 14px;
}
.product-card-name { font-size: 0.92rem; font-weight: 700; color: var(--text-2); line-height: 1.3; margin-bottom: 3px; }
.product-card-cat { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 10px; }
.product-card-url {
font-size: 0.72rem; color: var(--purple); text-decoration: none;
font-family: var(--mono); display: block; word-break: break-all;
}
.product-card-url:hover { text-decoration: underline; }
/* Setup checklist */
.checklist { display: flex; flex-direction: column; gap: 2px; }
.checklist-step {
display: flex; align-items: flex-start; gap: 9px;
padding: 7px 8px; border-radius: 7px;
cursor: pointer; transition: background 0.12s;
border: none; background: transparent; font-family: var(--font);
text-align: left; width: 100%;
text-decoration: none; color: inherit;
}
.checklist-step:hover { background: var(--bg); }
.checklist-step.active { background: var(--purple-dim); }
.step-icon {
width: 18px; height: 18px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 0.6rem; font-weight: 800; flex-shrink: 0; margin-top: 1px;
border: 2px solid var(--border-dark);
color: var(--text-muted); background: var(--surface);
}
.step-icon.done { background: var(--cyan); border-color: var(--cyan); color: var(--text-2); }
.step-icon.active { border-color: var(--purple); color: var(--purple); }
.step-icon.pending { opacity: 0.5; }
.step-body { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.step-label { font-size: 0.8rem; font-weight: 600; color: var(--text-2); }
.step-label.muted { color: var(--text-muted); font-weight: 500; }
.step-sub { font-size: 0.7rem; color: var(--text-muted); }
/* Attention badge */
.attention-badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 17px; height: 17px; border-radius: 100px;
background: var(--purple); color: #fff;
font-size: 0.62rem; font-weight: 800;
padding: 0 4px; margin-left: auto; flex-shrink: 0;
}
/* Main */
.pd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* Tab panels */
.tab-panel { padding: 28px; overflow-y: auto; }
/* ATT-77: Sources tab opts out of the legacy 28px inner padding AND the
legacy inner-scroll. The new .ps-content shell already provides the
outer 32px padding AND is the page's scroll container; .tab-panel's
overflow-y: auto created a nested scroll context that surfaced as a
double scrollbar in Safari once the source list got long enough. */
/* padding-bottom lives on the (scrollable) tab content, not on .ps-content:
.ps-content is the overflow-y:auto scroll container and its bottom padding is
clipped at scroll-end, so a long tab's last item would butt the bottom edge.
32px matches .ps-content's inset → consistent bottom spacing across all
tabs whether or not they scroll. Top/left/right stay flush. */
.tab-panel--flush { padding: 0 0 32px; overflow-y: visible; }
/* Live Status wrapper is always rendered as a Turbo Stream target, but is
empty when no JobRun exists. As an empty flex child of .ps-tab-content
it still claims the parent's 14px gap, leaving phantom space above the
tab content. Hide the wrapper when it contains no element children. */
[id^="product_"][id$="_live_status"]:not(:has(*)) { display: none; }
/* Section header */
.section-hdr {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px; padding-bottom: 10px;
border-bottom: 1.5px solid var(--border);
}
.section-title {
font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.08em; color: var(--text-muted);
}
.section-count { font-family: var(--mono); font-size: 0.72rem; color: var(--text-muted); }
/* ATT-77 Chunk 3 — sub-section header variant used by the Sources tab's
DISCOVERED SOURCES / SOURCES blocks. Drops the divider line below the
header (Figma 1:1211 / 1:1587 do not include one) and lightens the
bottom spacing so the intro paragraph / list sits close. */
.section-hdr--flush {
border-bottom: 0;
margin-bottom: 8px;
padding-bottom: 0;
}
/* Caption/Bold treatment for sub-section captions ("DISCOVERED SOURCES",
"SOURCES"). Figma 67:11673 style = Caption/Bold (Semibold 600, 12/18,
letter-spacing 0), uppercase, text-muted. Distinct from .section-title
(legacy Bold 700 + 0.08em letter-spacing) which the Brief tab still
uses. */
.section-caption {
font-family: var(--text-caption-bold-font-family);
font-weight: var(--text-caption-bold-font-weight);
font-size: var(--text-caption-bold-font-size);
line-height: var(--text-caption-bold-line-height);
letter-spacing: var(--text-caption-bold-letter-spacing);
text-transform: uppercase;
color: var(--text-muted);
}
/* Right-side cluster of count + action buttons inside a sub-section header. */
.section-actions {
display: flex;
align-items: center;
gap: 12px;
}
/* Inline form wrapper used so button_to / form_with don't insert a block
break between adjacent sub-header action buttons. */
.kb-action-form,
.disco-action-form {
display: inline-flex;
margin: 0;
}
/* Explanatory paragraph that sits between a sub-header and its list
(currently only the "Sources found during discovery." line). */
.section-intro {
font-family: var(--text-caption-font-family);
font-weight: var(--text-caption-font-weight);
font-size: var(--text-caption-font-size);
line-height: var(--text-caption-line-height);
letter-spacing: var(--text-caption-letter-spacing);
color: var(--text-muted);
margin-bottom: 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
width: 14px; height: 14px; border: 2px solid #EAB308;
border-top-color: transparent; border-radius: 50%;
animation: spin 0.8s linear infinite; flex-shrink: 0;
}
/* Empty state */
.empty { text-align: center; padding: 56px 32px; }
.empty-icon { font-size: 2rem; margin-bottom: 12px; }
.empty-title { font-size: 0.95rem; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.empty-body { font-size: 0.84rem; color: var(--text-muted); line-height: 1.6; max-width: 320px; margin: 0 auto 20px; }
/* ── SOURCES TAB ── */
.sources-split { display: flex; flex-direction: column; gap: 32px; }
/* ========================================================================
ATT-77 Chunk 2 — cell-based source row (.src-*) and discovered-source
card (.disco-*). Coexists with the legacy .ks-table / .disc-* during the
transition; Chunk 3 swaps the partial usages and Chunk 7 removes the
legacy CSS. New classes only — do not touch the legacy block above.
Figma: 1:1929 / 1:1587 (rows), 5:899 (cards).
====================================================================== */
/* ─── Source row ─── */
.src-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 8px 12px;
background: var(--bg-surface);
border: 1px solid var(--border-primary);
border-radius: var(--radius-small);
box-shadow: var(--shadow-elevated-sm);
transition: border-color 0.12s, box-shadow 0.12s;
}
.src-row:hover {
border-color: var(--brand-primary);
}
.src-row-left {
display: flex;
align-items: center;
gap: 24px;
min-width: 0;
/* Grow to fill the row's main axis so the title cell (which uses
flex: 1 1 0 below) has space to absorb. The kebab is pushed to the
right edge by .src-row's justify-content: space-between. */
flex: 1 1 auto;
}
/* Column cells — fixed slot widths per Figma 1:1929 anatomy for the pill
columns so they align across rows regardless of pill content length.
The title column uses flex: 1 1 0 so every row's title slot is the
SAME width (whatever the row has left over after the fixed cells), and
pills sit immediately to the right of the title with the consistent
24px gap. */
.src-row-cell {
display: flex;
align-items: center;
min-width: 0;
}
.src-row-cell--title { flex: 1 1 0; min-width: 0; }
.src-row-cell--kind { flex: 0 0 50px; }
.src-row-cell--provenance { flex: 0 0 92px; }
.src-row-cell--status { flex: 0 0 78px; }
.src-row-cell--date { flex: 0 0 96px; }
.src-row-title {
font-family: var(--text-body-bold-font-family);
font-weight: var(--text-body-bold-font-weight);
font-size: var(--text-body-bold-font-size);
line-height: var(--text-body-bold-line-height);
letter-spacing: var(--text-body-bold-letter-spacing);
color: var(--text-primary);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.src-row-date {
font-family: var(--font-mono);
font-size: var(--text-caption-font-size);
line-height: var(--text-caption-line-height);
color: var(--text-muted);
}
.src-row-kebab {
flex-shrink: 0;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
border-radius: 9999px;
color: var(--text-muted);
cursor: pointer;
padding: 0;
}
.src-row-kebab:hover {
background: var(--palette-neutrals-100);
color: var(--text-secondary);
}
.src-row-kebab-icon {
width: 20px;
height: 20px;
}
/* ─── Discovered-source card ─── */
.disco-card {
display: flex;
align-items: stretch;
gap: 20px;
padding: 16px 20px;
background: var(--bg-surface);
border: 1px solid var(--border-primary);
border-radius: var(--radius-small);
transition: border-color 0.12s;
}
.disco-card:hover {
border-color: var(--brand-primary);
}
.disco-score {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
align-self: center;
}
/* Score number: Figma "Data/Default" — bind to the --text-data-* token
group (SF Mono Medium 13/18, letter-spacing 0). */
.disco-score-num {
font-family: var(--text-data-font-family);
font-weight: var(--text-data-font-weight);
font-size: var(--text-data-font-size);
line-height: var(--text-data-line-height);
letter-spacing: var(--text-data-letter-spacing);
}
/* "Score" label: Figma "UI/Label Small" — bind to the --text-ui-label-small-*
token group (General Sans Variable Medium 10/12, letter-spacing 0). */
.disco-score-label {
font-family: var(--text-ui-label-small-font-family);
font-weight: var(--text-ui-label-small-font-weight);
font-size: var(--text-ui-label-small-font-size);
line-height: var(--text-ui-label-small-line-height);
letter-spacing: var(--text-ui-label-small-letter-spacing);
}
/* High tier uses --status-badge-confirmation (NOT --status-success-default —
that's the pale mint used for the kb-summary banner). Text token is
--palette-emerald-800 per Figma 91:15053. */
.disco-score-success {
background: var(--status-badge-confirmation);
color: var(--palette-emerald-800);
}
.disco-score-warning {
background: var(--status-warning-default);
color: var(--status-warning-subtle);
}
.disco-score-error {
background: var(--status-error-default);
color: var(--status-error-text);
}
.disco-body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
justify-content: center;
}
.disco-title {
font-family: var(--text-body-bold-font-family);
font-weight: var(--text-body-bold-font-weight);
font-size: var(--text-body-bold-font-size);
line-height: var(--text-body-bold-line-height);
letter-spacing: var(--text-body-bold-letter-spacing);
color: var(--text-primary);
}
.disco-rationale {
font-family: var(--text-caption-font-family);
font-weight: var(--text-caption-font-weight);
font-size: var(--text-caption-font-size);
line-height: var(--text-caption-line-height);
letter-spacing: var(--text-caption-letter-spacing);
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.disco-meta {
display: flex;
align-items: center;
gap: 20px;
margin-top: 2px;
}
.disco-type {
flex-shrink: 0;
}
.disco-url {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 12px;
line-height: 16px;
color: var(--brand-primary);
text-decoration: none;
}
.disco-url:hover { text-decoration: underline; }
.disco-url-icon {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.disco-actions {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 8px;
align-self: center;
}
/* Sources tab — workflow-state-aware CTA card (ATT-77, Figma 67:11603).
Shown only when next_workflow_step is :analyze or :discover. Sits above
the Knowledge Base section as a workflow prompt, not an empty-list
placeholder — the source list still renders below when sources exist. */
.kb-cta-card {
max-width: 584px;
margin: 0 auto 24px;
border: 1px solid var(--status-info-default);
border-radius: var(--radius-small);
padding: 16px 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.kb-cta-text {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
}
.kb-cta-title {
font-family: var(--text-h4-font-family);
font-weight: var(--text-h4-font-weight);
font-size: var(--text-h4-font-size);
line-height: var(--text-h4-line-height);
letter-spacing: var(--text-h4-letter-spacing);
color: var(--text-secondary);
}
.kb-cta-sub {
font-family: var(--text-caption-font-family);
font-weight: var(--text-caption-font-weight);
font-size: var(--text-caption-font-size);
line-height: var(--text-caption-line-height);
letter-spacing: var(--text-caption-letter-spacing);
color: var(--text-muted);
}
.kb-cta-form {
margin: 0;
}
/* ATT-77 Chunk 3 — sub-section wrapper + list stack for the Sources tab.
Two sub-sections share the same .kb-sub container (DISCOVERED SOURCES,
SOURCES). The list is a vertical stack of Chunk 2 row/card components. */
.kb-sub {
display: flex;
flex-direction: column;
margin-bottom: 24px;
}
.kb-sub:last-child {
margin-bottom: 0;
}
.kb-list {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Summary banner shown when every discovered source has been accepted or
dismissed (the DISCOVERED SOURCES sub-section would otherwise be empty).
Replaces the old inline-styled cyan-dim banner. */
.kb-summary-banner {
background: var(--status-success-default);
color: var(--status-success-subtle);
border: 1px solid var(--status-success-subtle);
border-radius: var(--radius-small);
padding: 10px 14px;
margin-bottom: 24px;
font-family: var(--text-body-small-font-family);
font-weight: 500;
font-size: var(--text-body-small-font-size);
line-height: var(--text-body-small-line-height);
letter-spacing: var(--text-body-small-letter-spacing);
}
/* ATT-77 Chunk 5 — "+" popover wrapper. Anchors the absolute-positioned
.ps-menu-dropdown to the "+" trigger so the right-anchor rule from
.ps-menu-dropdown--grouped (left:auto; right:0) keeps the popover
on-screen. Mirrors the .src-row-kebab-wrap pattern. */
.add-link-popover-wrap {
position: relative;
flex-shrink: 0;
}
/* Open-state visual on the "+" trigger (mirrors .src-row-kebab[aria-expanded]
and .btn-icon-elevated:hover token usage). */
.btn-icon-elevated[aria-expanded="true"] {
border-color: var(--brand-hover);
color: var(--brand-hover);
}
/* Inline Add-link form (Figma 70:12311). Hidden by default; revealed by
the .add-link-form--visible modifier when "+" → "Add link" fires.
Plain display toggle — no max-height transition (a fixed max-height
would clip the form whenever its actual height drifts).
──
Two-row column: the input + button row sits on top, and an inline
error message (when present) spans the full width below. Putting the
error outside the input row keeps the buttons center-aligned with the
input in both states (matches Figma's default-state alignment); the
error has full row width to render without crowding the buttons. */
.add-link-form {
display: none;
flex-direction: column;
gap: 4px;
width: 100%;
margin: 0;
}
/* ATT-77 Chunk 6c — hidden upload form. No visible UI per Figma 70:13716
(native OS picker only, no drop zone). The Stimulus add_files controller
programmatically clicks the inner and requestSubmits
this form when files are picked. */
.add-files-form {
display: none;
}
.add-link-form--visible {
display: flex;
margin-bottom: 8px;
}
.add-link-form-row {
display: flex;
align-items: center;
gap: 24px;
width: 100%;
}
/* Layout wrapper around the input — flex-grow only. The red field
treatment in the error case comes from adding .form-field-error to
this same element (existing descendant selector targets .form-input). */
.add-link-form-field {
flex: 1 1 auto;
min-width: 0;
}
/* Override .form-input height (36→42) and background (--bg-elevated→
--bg-surface) to match the Figma input spec (h-42, white). Inherits
border, padding, font, focus styling from .form-input. */
.add-link-form-input {
height: 42px;
background: var(--bg-surface);
}
/* Inline validation error rendered under the input when the server
re-renders the partial with add_link_error. Caption tokens + status
error color; the matching red field treatment comes from the existing
.form-field-error rule applied to the wrapper. */
.add-link-form-error {
font-family: var(--text-caption-font-family);
font-weight: var(--text-caption-font-weight);
font-size: var(--text-caption-font-size);
line-height: var(--text-caption-line-height);
letter-spacing: var(--text-caption-letter-spacing);
color: var(--status-error-text);
}
.add-link-form-actions {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 10px;
}
/* ========================================================================
Form fields (shared component — ATT-85, Figma node 303:1122)
------------------------------------------------------------------------
App-wide unprefixed form-field component. Default state: grey-fill
input, neutral 1px border, label above. Error state: add
.form-field-error to the .form-field wrapper — the label and the
input/select/textarea inside render red. Used by every form in the app;
do NOT nest under a surface prefix (.ps-*, .pi-*, etc.).
====================================================================== */
.form-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-label {
font-family: var(--font-sans);
font-weight: 500;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.5px;
color: var(--text-secondary);
}
.form-input,
.form-textarea,
.form-select {
display: block;
width: 100%;
padding: 0 12px;
border: 1px solid var(--border-primary);
border-radius: var(--radius-small);
background: var(--bg-elevated);
font-family: var(--font-sans);
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: var(--text-primary);
margin: 0;
}
.form-input,
.form-select {
height: 36px;
}
.form-textarea {
padding: 9px 12px;
resize: vertical;
min-height: 72px;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
outline: none;
border-color: var(--border-focus);
background: var(--bg-surface);
box-shadow: 0 0 0 3px var(--brand-subtle);
}
/* ATT-246 — the ENABLED placeholder. It had no rule at all, so every input and
textarea in the app fell back to Chrome's UA default (#757575), which is not a
palette colour: it sits between neutrals-400 (#9da3ae) and neutrals-500
(#6c727f) and is DARKER than the .form-hint sitting directly under the field.
A placeholder reading heavier than the hint below it reads as entered text,
which is exactly how it was spotted.
--text-muted, matching the approved styleguide (form_components, "TEXT INPUT").
That page rendered its own two placeholder examples in two different colours:
the mono-prefix variant had .input-prefix input::placeholder and looked right,
the leading-icon one had nothing and did not. The comment on that prefix rule
claims it exists "to match the muted treatment of the base inputs" — a premise
that was never true until this rule. It stays anyway: its input carries no
.form-input class, so it is not covered here.
`opacity: 1` because Firefox applies a default placeholder opacity that would
lighten the token further. */
.form-input::placeholder,
.form-textarea::placeholder {
color: var(--text-muted);
opacity: 1;
}
/* Disabled — greyer fill, dark-but-muted text (ATT-122). -webkit-text-fill-color
is needed because WebKit otherwise overrides `color` on disabled inputs. */
.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
background: var(--palette-neutrals-100);
color: var(--palette-neutrals-700);
-webkit-text-fill-color: var(--palette-neutrals-700);
cursor: not-allowed;
}
/* Disabled placeholder = neutrals-400 (lighter than the neutrals-700 disabled
entered-text — a placeholder always reads as secondary). The
-webkit-text-fill-color override is required: the input's own disabled
-webkit-text-fill-color would otherwise paint the placeholder neutrals-700 too
(ATT-162 — first disabled input whose placeholder is the visible text). */
.form-input:disabled::placeholder,
.form-textarea:disabled::placeholder {
color: var(--palette-neutrals-400);
-webkit-text-fill-color: var(--palette-neutrals-400);
opacity: 1;
}
.form-select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
padding-right: 32px;
}
.form-hint {
font-family: var(--font-sans);
font-weight: 400;
font-size: 13px;
line-height: 20px;
color: var(--text-muted);
margin: 0;
}
/* Error variant — apply .form-field-error to the .form-field wrapper.
Only the input/select/textarea/dropdown border and the hint render in
--status-error-subtle. The LABEL stays --text-secondary (per the
form-components styleguide error example + Figma 413:3244, where the
field label is text-secondary in the error state — it does NOT go red). */
.form-field-error .form-input,
.form-field-error .form-textarea,
.form-field-error .form-select {
border-color: var(--status-error-subtle);
}
/* ATT-266 — .input-prefix OWNS ITS BORDER, so the rule above cannot reach it.
The component draws the stroke on the WRAPPER (the mono prefix and the input
share one box), and the input inside carries no .form-input class at all — so
a .form-field-error field built from this variant reddened nothing and a
merchant saw a message with no field attached to it.
NEVER WORKED, rather than regressed: `git log -S "form-field-error
.input-prefix"` finds nothing. It stayed invisible because the form-components
styleguide documents this variant (Filled, Empty) and documents the error state
(on a plain .form-input) and never crosses the two — the DS page has the same
gap the CSS did.
Same shape and same fix as .form-field-error .ctl-trigger (:7753) and
.form-field-error .ob-otp-box (:6856): a component whose border is not on an
element the canonical rule lists needs naming. AFTER :focus-within, so a
focused field in error keeps the red stroke, which is how the canonical rule
behaves too. */
.form-field-error .input-prefix { border-color: var(--status-error-subtle); }
/* Inline error hint — the .form-hint slot rendered in red + medium weight
(ATT-138). Applies automatically to a hint inside a .form-field-error
wrapper, and standalone via .form-hint-error for form-level errors that
aren't tied to a single field (e.g. the product-selection errors). */
.form-field-error .form-hint,
.form-hint-error {
color: var(--status-error-text);
font-weight: 500;
}
/* ------------------------------------------------------------------------
Form error banner — sits at the top of a form (typically inside
.ps-modal-body) when validation fails. Pair with .form-field-error on
the affected field wrappers. See Figma 107:2825. The wiring of when
to render this banner is the consuming form's job — this rule is only
the visual shell. Built ATT-85; wired in the next prompt.
---------------------------------------------------------------------- */
.form-error-banner {
display: flex;
align-items: center;
gap: 6px;
padding: 12px 14px;
border: 1px solid var(--status-error-subtle);
border-radius: var(--radius-small);
background: var(--status-error-default);
color: var(--status-error-text);
font-family: var(--font-sans);
font-weight: 400;
font-size: 14px;
line-height: 20px;
}
.form-error-banner strong {
font-weight: 600;
}
/* ── BRIEF TAB ── */
/* ATT-79 — Brief tab empty state ("No Product Brief generated yet").
Figma "Info Dialog" (9GqHh6I460fmgxRzgYEjom nodes 5:956 / 170:2814). The
card is identical across the disabled (:analyze / :discover) and enabled
(:review / :brief) states — only the body copy and the CTA button variant
change, both handled in _brief.html.erb. Same centered 584px Info Dialog
card as the Sources .kb-cta-card; the only difference is .kb-cta-card
carries a list-stack margin-bottom (it sits above the source list), while
this is a standalone card (margin: 0 auto). Tokens only — no hardcoded hex. */
.brief-empty-card {
max-width: 500px;
margin: 0 auto;
border: 1px solid var(--status-info-default);
border-radius: var(--radius-small);
padding: 16px 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.brief-empty-card form { margin: 0; }
/* ATT-246 — display:flex above BEATS the hidden attribute's UA display:none, so
`element.hidden = true` on this card does nothing at all. Four other classes in
this sheet carry the same guard (.opt, .jc-tab-panel, .jc-rail-empty,
.jc-suggestion) for the same reason; this is the fifth, added when Settings →
Brand voice hid the "no voice yet" card on starting a run and it stayed on
screen underneath the progress strip. */
.brief-empty-card[hidden] { display: none; }
/* Icon variant for .brief-empty-card. ATT-134. Used today only on the
Collections Index (Figma 342:13545); future index empty states with icons
can adopt the same class. The SVG comes from a `shared/_icon_*` partial via
a `class:` local. Color = palette/neutrals/300 per Figma 342:13545
(the prompt's text-secondary was an eyeball error — Arash confirmed Figma). */
.brief-empty-card-icon {
width: 37px;
height: 40px;
color: var(--palette-neutrals-300);
flex-shrink: 0;
}
.brief-empty-text {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
width: 100%;
}
.brief-empty-title {
font-family: var(--text-h4-font-family);
font-weight: var(--text-h4-font-weight);
font-size: var(--text-h4-font-size);
line-height: var(--text-h4-line-height);
letter-spacing: var(--text-h4-letter-spacing);
color: var(--text-secondary);
text-align: center;
}
.brief-empty-body {
font-family: var(--text-caption-font-family);
font-weight: var(--text-caption-font-weight);
font-size: var(--text-caption-font-size);
line-height: var(--text-caption-line-height);
letter-spacing: var(--text-caption-letter-spacing);
color: var(--text-muted);
text-align: center;
margin: 0;
}
/* ATT-161 — the Audiences Journeys tab empty state (Figma 675:3913) is the
BORDERLESS variant of the info-dialog: no card border, and the title is
text-muted (not text-secondary). Spacing/structure/body otherwise reuse
.brief-empty-card / .brief-empty-text / .brief-empty-body. Scoped so the
bordered .brief-empty-card on every other surface is unaffected. */
.brief-empty-card.brief-empty-borderless { border: none; }
.brief-empty-borderless .brief-empty-title { color: var(--text-muted); }
/* ATT-79 — populated brief view. Figma Application Spec
(9GqHh6I460fmgxRzgYEjom) nodes 9:1888 (full tab) / 28:3706 (toolbar) /
9:1981 (claim card) / 9:1990 (evidence). Tokens only — no hardcoded hex.
Reuses the .pill-label and .btn-elevated-xs DS components; the classes
below are brief-specific layout + typography. Mono "Data" text uses a
literal 13px because the type system has no mono type-scale token (the old
.brief-meta/.evidence-src used literal rem sizes for the same reason). */
/* Toolbar (node 28:3706) — Version/Generated data left, actions right. */
.brief-toolbar {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; margin-bottom: 24px;
}
.brief-toolbar-data { display: flex; align-items: center; gap: 20px; font-family: var(--mono); font-size: 13px; }
.brief-data-label { color: var(--text-muted); }
.brief-data-value { font-weight: 700; color: var(--text-secondary); }
.brief-toolbar-actions { display: flex; align-items: center; gap: 8px; }
.brief-toolbar-actions form { margin: 0; }
/* Section block (node 9:1976) */
.brief-section { margin-bottom: 28px; }
.brief-section-hdr { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.brief-section-title {
font-family: var(--text-caption-bold-font-family);
font-weight: var(--text-caption-bold-font-weight);
font-size: var(--text-caption-bold-font-size);
line-height: var(--text-caption-bold-line-height);
letter-spacing: var(--text-caption-bold-letter-spacing);
text-transform: uppercase; color: var(--text-muted);
}
.brief-section-count { font-family: var(--mono); font-size: 13px; color: var(--text-muted); }
.brief-section-count-num { font-weight: 700; color: var(--text-secondary); }
.brief-section-empty {
font-family: var(--text-caption-font-family);
font-weight: var(--text-caption-font-weight);
font-size: var(--text-caption-font-size);
line-height: var(--text-caption-line-height);
letter-spacing: var(--text-caption-letter-spacing);
color: var(--text-muted); margin: 0;
}
/* ATT-147 — group brief per-product header. The product name is H4 (text
primary, weight 550) with the priority pill set immediately beside it (a
left-aligned flex row, NOT the section header's space-between), so the
product reads as a tier above its sub-section captions. */
.gb-product-header {
display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.gb-product-name {
font-family: var(--text-h4-font-family);
font-weight: 550;
font-size: var(--text-h4-font-size);
line-height: var(--text-h4-line-height);
letter-spacing: var(--text-h4-letter-spacing);
color: var(--text-primary);
}
/* Claim card (node 9:1981) — white surface; full 1px + 6px LEFT border, both
in the confidence color (set by the .claim-card-* modifier). */
.claim-card {
background: var(--bg-surface);
border: 1px solid; border-left-width: 6px;
border-radius: var(--radius-small); padding: 16px; margin-bottom: 16px;
}
.claim-card-high { border-color: var(--palette-emerald-100); }
.claim-card-medium { border-color: var(--status-warning-default); }
.claim-card-low { border-color: var(--status-error-default); }
/* ATT-147 — group brief "Product differences" reuse the claim-card chrome with
a saturated warning border (Figma 493:3149 reuses the "brief item row/inner"
claim-card component). Stronger than -medium's pale --status-warning-default
so a contradiction reads as more than a medium-confidence claim. */
.claim-card-warning { border-color: var(--status-warning-subtle); }
.claim-text {
font-family: var(--text-body-bold-font-family);
font-weight: var(--text-body-bold-font-weight);
font-size: var(--text-body-bold-font-size);
line-height: var(--text-body-bold-line-height);
letter-spacing: var(--text-body-bold-letter-spacing);
color: var(--text-primary); margin: 0 0 12px;
}
.claim-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
/* Evidence quote block (node 9:1990) — muted surface, 4px left border,
excerpt left + right-aligned "Source: ". */
.evidence-quote {
display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
background: var(--palette-neutrals-50);
border-left: 4px solid var(--palette-neutrals-400);
padding: 6px 12px; margin-bottom: 6px;
}
.evidence-quote:last-child { margin-bottom: 0; }
.evidence-excerpt {
flex: 1;
font-family: var(--text-caption-font-family);
font-weight: var(--text-caption-font-weight);
font-size: var(--text-caption-font-size);
line-height: var(--text-caption-line-height);
letter-spacing: var(--text-caption-letter-spacing);
color: var(--text-secondary); margin: 0;
}
.evidence-src { flex-shrink: 0; font-family: var(--mono); font-size: 12px; text-align: right; white-space: nowrap; }
.evidence-src-label { color: var(--text-muted); }
/* Linked source (URL present) — brand, genuinely clickable. Fallback
(no URL) is plain muted text, not a link. */
.evidence-src-link { color: var(--text-link); text-decoration: none; }
.evidence-src-link:hover { text-decoration: underline; }
.evidence-src-value-muted { color: var(--text-muted); }
/* Group brief "Product differences" body (ATT-147, Figma 493:3149). The card
itself is .claim-card.claim-card-warning (chrome reused); the title is
.claim-text. These are the two text rows beneath it: "Affects: "
(Body Small, neutrals-500, label in Medium) + the details line (Body
Default, secondary). Gap mirrors the Figma source-info (6px between rows). */
.gb-difference-affects {
font-family: var(--text-body-small-font-family);
font-weight: var(--text-body-small-font-weight);
font-size: var(--text-body-small-font-size);
line-height: var(--text-body-small-line-height);
letter-spacing: var(--text-body-small-letter-spacing);
color: var(--palette-neutrals-500); margin: 0 0 6px;
}
.gb-difference-affects-label { font-weight: 500; }
.gb-difference-details {
font-family: var(--text-body-font-family);
font-weight: var(--text-body-font-weight);
font-size: var(--text-body-font-size);
line-height: var(--text-body-line-height);
letter-spacing: var(--text-body-letter-spacing);
color: var(--text-secondary); margin: 0;
}
/* Product Summary modal body (read-only prose) — Body Default. */
.product-summary-text {
font-family: var(--text-body-font-family);
font-weight: var(--text-body-font-weight);
font-size: var(--text-body-font-size);
line-height: var(--text-body-line-height);
letter-spacing: var(--text-body-letter-spacing);
color: var(--text-primary); margin: 0;
}
.product-summary-text-empty { color: var(--text-muted); }
/* Product Brief Version History overlay rows (Figma 28:4356 / 28:4387). One
row per generated brief: Version (left) / Generated (right), mono Data/Small
(12px). Reuses .brief-data-label (muted) / .brief-data-value (bold) for the
label/value treatment — only the 12px mono size + row layout are row-specific
(the toolbar's .brief-toolbar-data is 13px Data/Default). Tokens only. */
.version-history-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding: 16px 0;
border-bottom: 1px solid var(--palette-neutrals-100);
font-family: var(--mono);
font-size: 12px;
}
/* ── INSIGHTS TAB ── */
/* ATT-79 Chunk 3a — populated view (Figma 189:2916): single-column stack of
four full-width section cards, DS pills, purple header divider. Replaces the
legacy .intel-grid / .intel-card / .itag rules. The .tooltip-* rules below
are retained as-is (Chunk 3b restyles the source tooltip). Tokens only. */
.intel-stack { display: flex; flex-direction: column; gap: 16px; }
.intel-section {
display: flex;
flex-direction: column;
gap: 16px;
border: 1px solid var(--status-info-default);
border-radius: var(--radius-small);
padding: 16px 20px;
}
.intel-section-hdr {
display: flex;
flex-direction: column;
gap: 2px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-focus);
}
.intel-section-hdr-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.intel-section-title {
font-family: var(--text-caption-bold-font-family);
font-weight: var(--text-caption-bold-font-weight);
font-size: var(--text-caption-bold-font-size);
line-height: var(--text-caption-bold-line-height);
letter-spacing: var(--text-caption-bold-letter-spacing);
text-transform: uppercase;
color: var(--text-muted);
}
.intel-section-count { font-family: var(--mono); font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.intel-section-count-num { font-weight: 700; color: var(--text-secondary); }
.intel-section-desc {
font-family: var(--text-caption-font-family);
font-weight: var(--text-caption-font-weight);
font-size: var(--text-caption-font-size);
line-height: var(--text-caption-line-height);
letter-spacing: var(--text-caption-letter-spacing);
color: var(--text-muted);
margin: 0;
}
.intel-items { display: flex; flex-direction: column; }
.intel-item {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px 0;
border-bottom: 1px solid var(--border-primary);
}
.intel-item:first-child { padding-top: 0; }
.intel-item:last-child { padding-bottom: 0; border-bottom: 0; }
.intel-item-detail {
font-family: var(--text-body-font-family);
font-weight: var(--text-body-font-weight);
font-size: var(--text-body-font-size);
line-height: var(--text-body-line-height);
letter-spacing: var(--text-body-letter-spacing);
color: var(--text-secondary);
margin: 0;
}
.intel-item-tags { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.intel-item-tags-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.intel-item-timing {
font-family: var(--text-ui-nav-font-family);
font-weight: var(--text-ui-nav-font-weight);
font-size: var(--text-ui-nav-font-size);
line-height: var(--text-ui-nav-line-height);
letter-spacing: var(--text-ui-nav-letter-spacing);
color: var(--palette-neutrals-500);
}
.intel-corr { font-family: var(--mono); font-weight: 500; font-size: 13px; color: var(--text-muted); }
.intel-corr-icon { display: inline-flex; align-items: center; margin-left: 6px; color: var(--text-muted); cursor: pointer; }
.intel-corr-icon svg { width: 18px; height: 18px; }
/* Tooltip — ATT-79 Chunk 3b. The source popover reuses the menu-dropdown
surface (.ps-menu-dropdown): white surface, 0.5px border, elevated shadow,
14px padding. Source rows are styled like .ps-menu-item with an external-link
icon and a brand-primary link color. Show + position are driven by
source_tooltip_controller (position: fixed on hover so it escapes
.ps-content's overflow clip, placed above the trigger and flipped/clamped to
stay on-screen) — no CSS :hover reveal, and pointer-events are toggled by the
controller so the hidden box never blocks clicks. */
.tooltip-wrap { position: relative; display: inline-flex; align-items: center; }
.tooltip-box {
position: absolute;
bottom: calc(100% + 6px);
right: 0;
left: auto;
min-width: 200px;
max-width: 280px;
background: var(--bg-surface);
border: 0.5px solid var(--border-primary);
border-radius: var(--radius-small);
box-shadow: var(--shadow-container-elevated-bg);
padding: 14px;
display: flex;
flex-direction: column;
gap: 2px;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
z-index: 50;
}
.tooltip-box-label {
padding: 8px 10px 4px;
font-family: var(--font-sans);
font-weight: 500;
font-size: 12px;
line-height: 18px;
color: var(--text-muted);
}
.tooltip-source-link {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 8px;
font-family: var(--font-sans);
font-weight: 500;
font-size: 12px;
line-height: 18px;
color: var(--brand-primary);
text-decoration: none;
word-break: break-all;
}
.tooltip-source-link:visited { color: var(--brand-primary); }
.tooltip-source-link:hover { background: var(--bg-elevated); color: var(--brand-primary); }
.tooltip-source-icon { width: 14px; height: 14px; flex-shrink: 0; color: currentColor; }
/* ── JOURNEYS TAB ── */
.journey-list { display: flex; flex-direction: column; gap: 8px; }
.journey-row {
display: flex; align-items: center; justify-content: space-between;
background: var(--surface); border: 1.5px solid var(--border);
border-radius: 10px; padding: 14px 18px;
text-decoration: none; transition: border-color 0.15s;
}
.journey-row:hover { border-color: var(--border-dark); }
.journey-row-name { font-size: 0.92rem; font-weight: 600; color: var(--text-2); margin-bottom: 3px; }
.journey-row-meta { font-size: 0.78rem; color: var(--text-muted); font-family: var(--mono); }
.journey-row-right { display: flex; align-items: center; gap: 8px; }
.journey-row-wrapper {
display: grid;
grid-template-columns: 1fr 60px;
border-bottom: 1px solid var(--border);
}
.journey-row-wrapper:last-child { border-bottom: none; }
.journey-row-wrapper .journey-row { border-bottom: none; }
.journey-delete-btn {
background: none; border: none; border-left: 1px solid var(--border);
font-size: 0.76rem; color: var(--text-muted); cursor: pointer;
font-family: var(--font); font-weight: 500; width: 100%;
transition: color 0.12s, background 0.12s;
}
.journey-delete-btn:hover { color: #9F1239; background: #fff1f2; }
/* ATT-79 Journeys Chunk 3 — per-tab toolbar + list wrappers (Figma 28:3716).
The row/cell CSS was promoted to the shared .jli-* component, and the delete
link to .btn-link-destructive, in ATT-120; only these two wrappers remain,
still used by products/tabs/_journeys_content.html.erb. */
.jt-toolbar { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.jt-list { display: flex; flex-direction: column; gap: 8px; }
/* ── Sidebar inline category editor ── */
.product-card-cat-row {
display: flex; align-items: center; gap: 4px;
margin: 2px 0 4px;
}
.product-card-cat {
font-size: 0.76rem; color: var(--text-muted);
line-height: 1.3;
}
.cat-edit-btn {
background: none; border: none; padding: 0 2px;
cursor: pointer; color: var(--text-muted);
line-height: 1; display: flex; align-items: center;
opacity: 0; transition: opacity 0.12s;
flex-shrink: 0;
}
.product-card:hover .cat-edit-btn { opacity: 1; }
.cat-edit-btn:hover { color: var(--purple); }
/* Inline edit form hidden by default, toggled open via JS */
.cat-edit-form { display: none; margin-top: 6px; }
.cat-edit-form.open {
display: flex; flex-direction: column; gap: 6px;
}
.cat-edit-select {
width: 100%; font-size: 0.76rem; font-family: var(--font);
background: var(--bg); color: var(--text-2);
border: 1.5px solid var(--border); border-radius: 6px;
padding: 5px 24px 5px 8px;
appearance: none; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 7px center;
}
.cat-edit-select:focus {
outline: none; border-color: var(--purple);
box-shadow: 0 0 0 3px var(--purple-dim);
}
.cat-edit-actions {
display: flex; align-items: center; gap: 6px;
}
.cat-save-btn {
font-size: 0.72rem; font-weight: 600; font-family: var(--font);
background: var(--purple); color: #fff;
border: none; border-radius: 6px;
padding: 5px 12px; cursor: pointer; white-space: nowrap;
transition: opacity 0.12s;
}
.cat-save-btn:hover { opacity: 0.85; }
.cat-cancel-btn {
font-size: 0.76rem; font-weight: 500; font-family: var(--font);
background: none; color: var(--text-muted);
border: none; cursor: pointer; padding: 4px;
line-height: 1;
}
.cat-cancel-btn:hover { color: var(--text); }
/* Job progress panel */
.jp-panel {
background: #fff;
border: 1.5px solid var(--border);
border-radius: 12px;
padding: 20px 24px;
margin-bottom: 24px;
display: flex;
flex-direction: column;
gap: 10px;
}
.jp-step {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.84rem;
color: var(--text-muted);
}
.jp-active { color: #131313; font-weight: 500; }
.jp-past { color: #a0a0a0; }
.jp-done { color: #16a34a; font-weight: 500; }
.jp-error { color: #9F1239; font-weight: 500; }
.jp-icon { width: 18px; text-align: center; font-size: 0.78rem; flex-shrink: 0; }
.jp-msg { line-height: 1.4; }
@keyframes jp-spin { to { transform: rotate(360deg); } }
.jp-spinner {
display: inline-block;
width: 12px; height: 12px;
border: 2px solid #e5e5e5;
border-top-color: #4C02E8;
border-radius: 50%;
animation: jp-spin 0.7s linear infinite;
}
/* ─────────────────────────────────────────────────────────
Live Status Strip (ATT-78)
Sits above the tab content Turbo Frame, persists across
tab navigation. State-specific colors are scoped via the
.ls-strip--in_progress / --completed / --failed modifier.
───────────────────────────────────────────────────────── */
.ls-strip {
display: flex;
flex-direction: column;
margin-bottom: 16px;
border: 1px solid var(--border-primary);
border-radius: 12px;
background: var(--bg-elevated);
font-size: 0.875rem;
transition: opacity 250ms ease-out;
}
/* The strip's top row — fixed 42px, horizontal flex. When the history list
is hidden the strip collapses to just this row; when shown, the strip
grows below. */
.ls-strip-row {
display: flex;
align-items: center;
gap: 12px;
height: 42px;
padding: 0 14px;
}
/* Auto-hide state for the Live Status strip after a `done` broadcast.
The Stimulus controller adds this class after the 5s delay, waits for
the opacity transition to finish, then removes the strip from the DOM.
pointer-events: none prevents the fading strip from intercepting clicks. */
.ls-strip--hiding {
opacity: 0;
pointer-events: none;
}
/* Per Figma node 1:1852, all three states share the same neutral background
and border. State is communicated via the logo color (handled in ATT-84)
and, for failed, the red text color applied to .ls-phase / .ls-current-step
below. The completed state has no special chrome — just the logo color. */
.ls-strip--in_progress,
.ls-strip--completed,
.ls-strip--failed {
/* no per-state background/border overrides */
}
.ls-logo {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
flex-shrink: 0;
}
/* ── Live Status — Animated Logo (ATT-84) ─────────────────────────────
Pure-CSS animation, opacity only. Three pairs of equalizer-style waves
pulse on a staggered 3s cycle while in_progress; a soft glow pulses
behind the central star. Completed/failed states freeze in a quiet
pose. The star itself is always solid brand purple.
Note on blur: the Figma Make source animated `filter: blur()` from 0
to 15px. Animating blur is the one expensive property here and
behaves inconsistently in Safari. Instead we set a fixed 15px blur on
.ls-glow and animate only its opacity — a blurred shape fading in/out
reads visually the same as one whose blur ramps with opacity.
*/
.ls-logo-mark {
display: block;
width: 28px;
height: 28px;
flex-shrink: 0;
}
.ls-wave,
.ls-glow,
.ls-star {
fill: var(--brand-primary);
}
/* Completed state shifts the mark to brand secondary (green) per Figma
node 14:1113. Failed stays brand primary (purple) — only success gets
the color change, since failed already communicates state via the
red text. */
.ls-strip--completed .ls-wave,
.ls-strip--completed .ls-glow,
.ls-strip--completed .ls-star {
fill: var(--brand-secondary);
}
.ls-wave {
opacity: 0.1;
}
.ls-glow {
opacity: 0;
filter: blur(15px);
}
/* In-progress: pulsing waves (staggered) + pulsing glow. */
.ls-strip--in_progress .ls-wave {
animation: ls-wave-pulse 3s ease-in-out infinite;
}
.ls-strip--in_progress .ls-wave--outer { animation-delay: 0s; }
.ls-strip--in_progress .ls-wave--middle { animation-delay: 0.5s; }
.ls-strip--in_progress .ls-wave--inner { animation-delay: 1s; }
.ls-strip--in_progress .ls-glow {
animation: ls-glow-pulse 3s ease-in-out infinite;
animation-delay: 1.5s;
}
/* Terminal states: freeze the mark at full opacity, no glow. Color comes
from the fill rules — completed shifts to brand secondary (green),
failed stays brand primary (purple). */
.ls-strip--completed .ls-wave,
.ls-strip--failed .ls-wave {
opacity: 1;
}
.ls-strip--completed .ls-glow,
.ls-strip--failed .ls-glow {
opacity: 0;
}
@keyframes ls-wave-pulse {
0%, 100% { opacity: 0.1; }
50% { opacity: 0.8; }
}
@keyframes ls-glow-pulse {
0%, 100% { opacity: 0; }
50% { opacity: 0.4; }
}
.ls-content {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 4px;
}
/* Bold phase prefix on the lead line. Rendered in all states:
"Analyzing sources:" / "Analysis completed:" / "Analysis failed:".
Solid (no shimmer) — only the detail text shimmers in in-progress.
flex-shrink: 0 so the prefix stays whole and the detail span absorbs
all ellipsis truncation. */
.ls-phase {
flex-shrink: 0;
font-weight: 600;
color: var(--text-primary);
}
/* Failed state colors both prefix and detail in error red, per Figma. */
.ls-strip--failed .ls-phase,
.ls-strip--failed .ls-current-step {
color: var(--status-error-text);
}
.ls-current-step {
min-width: 0;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Shimmer animation on the in_progress step text. Communicates "something
is happening" passively during long-running steps. Targets only the text
span (.ls-current-step), only when the strip is in the in_progress state.
Completed and failed states set their own color on .ls-strip and have no
shimmer. Entirely opt-in via prefers-reduced-motion — users with reduced
motion enabled see static text with no gradient applied.
Note: Safari may render bold text with slightly reduced fidelity when
clipped via background-clip: text. Known browser quirk, no clean workaround. */
@media (prefers-reduced-motion: no-preference) {
.ls-strip--in_progress .ls-current-step {
background-image: linear-gradient(
90deg,
var(--text-primary) 0%,
var(--text-primary) 45%,
var(--text-muted) 50%,
var(--text-primary) 55%,
var(--text-primary) 100%
);
background-size: 200% 100%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: ls-shimmer 2s linear infinite;
}
}
@keyframes ls-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.ls-actions {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
cursor: pointer;
color: var(--text-muted);
font-size: 0.8125rem;
background: transparent;
border: 0;
padding: 0;
font-family: inherit;
}
.ls-details-label {
font-weight: 500;
}
.ls-chevron {
width: 18px;
height: 18px;
stroke-width: 1.5;
}
/* SVG-namespaced elements don't reliably honor the HTML `hidden` attribute
via the UA stylesheet (per the HTML spec, `hidden` is defined for HTML
elements, not SVG). Use an explicit class to toggle chevron visibility
from the Stimulus controller. */
.ls-chevron.is-hidden {
display: none;
}
/* History timeline — full step list, rendered inside the strip and toggled
via the Details button. Scrolls internally past 200px so the strip never
pushes the tab content arbitrarily far down on long runs. No separator
border — Figma node 1:1852 shows the expanded panel as one continuous
neutral surface. Left padding aligns the history items with the content
column (logo gutter 14 + 28 + gap 12 = 54). */
.ls-history {
padding: 0 14px 12px 54px;
max-height: 200px;
overflow-y: auto;
color: var(--text-muted);
}
.ls-history-item {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0;
font-size: 0.8125rem;
}
.ls-history-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
stroke-width: 1.5;
color: var(--text-muted);
}
/* ── Setup / Dashboard mode ── */
.setup-complete-badge {
display: flex; align-items: center; gap: 8px;
padding: 10px 12px;
background: var(--cyan-dim); border: 1px solid var(--cyan);
border-radius: 8px;
font-size: 0.8rem; font-weight: 600; color: #0a6b52;
}
.setup-complete-icon {
width: 18px; height: 18px; border-radius: 50%;
background: var(--cyan); color: var(--text-2);
display: flex; align-items: center; justify-content: center;
font-size: 0.6rem; font-weight: 800; flex-shrink: 0;
}
.setup-complete-text {
font-size: 0.78rem; font-weight: 600;
}
/* In setup mode, make the checklist more prominent */
.setup-mode .checklist {
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 10px;
padding: 8px;
}
/* ── Modal ── */
.modal-backdrop {
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.4);
display: flex; align-items: center; justify-content: center;
z-index: 200;
}
.modal-card {
background: var(--surface); border-radius: 12px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
width: 100%; max-width: 440px;
}
.modal-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
}
.modal-title {
font-size: 0.92rem; font-weight: 700; color: var(--text-2);
}
.modal-close {
background: none; border: none; font-size: 0.92rem;
color: var(--text-muted); cursor: pointer; padding: 4px;
line-height: 1; text-decoration: none;
}
.modal-close:hover { color: var(--text); }
.modal-body {
padding: 20px;
}
.modal-radio-option {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px; border: 1.5px solid var(--border);
border-radius: 8px; margin-bottom: 6px; cursor: pointer;
font-size: 0.84rem; color: var(--text-2);
}
.modal-radio-option:hover { border-color: var(--border-dark); }
.modal-radio-meta {
margin-left: auto; font-size: 0.72rem; color: var(--text-muted);
font-family: var(--mono);
}
/* ══════════════════════════════════════════
Shell Layout (Primary Nav + Content Rail)
ATT-66
══════════════════════════════════════════ */
.shell-body {
background: var(--bg-page);
font-family: var(--font-sans);
color: var(--text-primary);
height: 100vh;
overflow: hidden;
}
.shell {
display: flex;
gap: 10px;
padding: 12px 12px 28px 16px;
height: 100vh;
}
.shell-nav {
width: 200px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 20px;
padding: 16px 12px;
height: 100%;
}
.shell-content {
flex: 1;
min-width: 0;
height: 100%;
background: var(--bg-surface);
border: 0.5px solid var(--palette-neutrals-100);
border-radius: 12px;
box-shadow: var(--shadow-container-elevated-bg);
overflow-y: auto;
overflow-x: hidden;
}
/* ─── Nav: merchant switcher ─── */
.nav-merchant-wrap {
position: relative;
width: 100%;
}
.nav-merchant {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
width: 100%;
padding: 6px;
background: transparent;
border: 0;
border-radius: var(--radius-small);
cursor: pointer;
text-align: left;
color: var(--text-secondary);
font-family: var(--font-sans);
transition: background 0.12s;
}
.nav-merchant:hover { background: var(--bg-elevated); }
.nav-merchant-wrap-open .nav-merchant { background: var(--brand-subtle); }
.nav-merchant-wrap-open .nav-merchant-text { color: var(--brand-pressed); }
.nav-merchant-name {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.nav-avatar {
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--palette-purple-200);
color: var(--text-on-brand);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 11px;
line-height: 1;
letter-spacing: 0.005em;
}
/* ATT-256 chunk 2 — the same circle, now holding a photo instead of initials.
The element is already round and already 26px; an image inside it needs to
fill it and be cropped rather than sit letterboxed, which is the one thing
the text version never needed. overflow lives on the parent, which has the
radius. */
.nav-avatar { overflow: hidden; }
.nav-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.nav-merchant-text {
font-weight: 500;
font-size: 14px;
line-height: 22px;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nav-chevron {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--text-secondary);
}
/* ─── Nav: merchant dropdown menu ─── */
/* ─── Shared: popover transition ───
Reusable show/hide for dropdowns, menus, and popovers. Pair with the
`menu` Stimulus controller (or any class toggle) — combine with a
component class that owns position/size/background. */
.popover {
opacity: 0;
/* visibility, not just opacity: an opacity-0 element is still FOCUSABLE, so a
closed menu kept every one of its items in the tab ring — tabbing past a
category select walked through 20+ invisible options before reaching the
next field. pointer-events fixed the mouse but not the keyboard.
visibility:hidden removes them; it is transitioned alongside opacity so the
fade is unchanged (it flips instantly on open, and at the END of the fade on
close). Applies to every popover: select, multiselect, nav menu, kebabs. */
visibility: hidden;
transform: translateY(-4px);
pointer-events: none;
transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}
.popover-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.nav-menu {
position: absolute;
top: calc(100% + 4px);
left: 0;
width: 188px;
background: var(--bg-surface);
border: 0.5px solid var(--border-primary);
border-radius: var(--radius-small);
box-shadow: var(--shadow-container-elevated-bg);
/* 6px / 2px, matching .ps-menu-dropdown. This was 12px / 10px, which suited
flat unpadded rows; the items are padded now, so the container gives back
the space the item took on. */
padding: 6px;
display: flex;
flex-direction: column;
gap: 2px;
z-index: 50;
}
.nav-menu-section {
display: flex;
flex-direction: column;
gap: 2px;
padding-bottom: 6px;
border-bottom: 0.5px solid var(--border-primary);
width: 100%;
}
.nav-menu-section-last {
padding-bottom: 0;
border-bottom: 0;
}
/* Same padded row as .ps-menu-item: 8px 10px in an 8px-radius box, 8px between
icon and label. It was a bare text row, which is why this menu read as a
different component from every kebab in the app. Type, weight and colour were
already identical. */
.nav-menu-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 8px;
width: 100%;
font-weight: 500;
font-size: 12px;
line-height: 18px;
color: var(--text-secondary);
text-decoration: none;
transition: color 0.12s;
}
/* Hover → --text-link, active → --brand-pressed: the same shift the source-row
menu uses, which is the Figma-derived one (nodes 1:1666 / 1:1686 — see
.ps-menu-dropdown--grouped). This read as having NO hover at all, because
--text-secondary → --text-primary is a barely-visible darkening on a menu that
is already dark text on white. */
.nav-menu-item:hover { color: var(--text-link); }
.nav-menu-item:active { color: var(--brand-pressed); }
.nav-menu-icon { width: 14px; height: 14px; flex-shrink: 0; color: currentColor; }
/* ─── Nav: items list ─── */
.nav-items-wrap {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
min-height: 0;
}
.nav-items {
display: flex;
flex-direction: column;
gap: 8px;
list-style: none;
padding: 0;
margin: 0;
}
/* ATT-256 — a group boundary inside one nav list. The settings nav puts Profile
(personal) above Brand / Brand voice / Manage members / Billing (the brand and
its administration), separated by space rather than by a heading: a section
header over a single item is worse than none, and there is only one personal
item until a second arrives.
ON THE ITEM THAT ENDS THE GROUP, not the one that starts the next, because
what starts the next differs by role — an Admin's is Brand, a Member's is
Manage members. Hanging it off the always-present first item makes the gap
role-independent.
16px ON TOP OF .nav-items' own 8px gap = 24px, which is the separation the
approved mock drew.
NOT admin/_nav's shape: that nav groups with two
s and an .adm-navsection
heading between them (.nav-items + .adm-navsection carries its spacing). Two
lists cannot work here — .nav-items-wrap is justify-content: space-between, so
a second
would be pushed to the bottom of the rail rather than sitting
under the first. */
.nav-group-end { margin-bottom: 16px; }
.nav-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
height: 30px;
padding: 4px 12px;
border-radius: 8px;
border: 0.5px solid transparent;
font-family: var(--text-ui-nav-550-font-family);
font-weight: var(--text-ui-nav-550-font-weight);
font-size: var(--text-ui-nav-550-font-size);
line-height: var(--text-ui-nav-550-line-height);
letter-spacing: var(--text-ui-nav-550-letter-spacing);
color: var(--text-secondary);
text-decoration: none;
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.nav-item:hover { background: var(--bg-elevated); }
.nav-item-active {
background: var(--brand-subtle);
border-color: var(--palette-purple-200);
color: var(--brand-primary);
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.03), 0 3px 6px -2px rgba(0, 0, 0, 0.05);
}
.nav-item-active:hover { background: var(--brand-subtle); }
.nav-icon {
width: 13px;
height: 13px;
flex-shrink: 0;
color: currentColor;
}
/* ─── Nav: admin console ─── */
.nav-admin {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
border-radius: var(--radius-small);
background: var(--palette-neutrals-50);
color: var(--brand-primary);
text-decoration: none;
font-family: var(--text-ui-nav-550-font-family);
font-weight: var(--text-ui-nav-550-font-weight);
font-size: var(--text-ui-nav-550-font-size);
line-height: var(--text-ui-nav-550-line-height);
letter-spacing: var(--text-ui-nav-550-letter-spacing);
transition: background 0.12s;
}
.nav-admin:hover { background: var(--palette-neutrals-100); }
.nav-admin-icon { width: 16px; height: 16px; flex-shrink: 0; color: currentColor; }
/* ─── Nav: wordmark ─── */
.nav-wordmark {
display: flex;
justify-content: center;
color: var(--brand-primary);
padding: 24px 0;
}
.nav-wordmark svg {
width: 136px;
height: auto;
display: block;
}
/* ─── Flash banner ─── */
.banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
min-height: 48px;
padding: 6px 14px;
border-bottom: 1px solid transparent;
font-family: var(--font-sans);
transition: opacity 0.3s ease;
}
.banner-text {
display: flex;
align-items: center;
gap: 4px;
font-weight: 400;
font-size: 14px;
line-height: 22px;
}
.banner-title { font-weight: 600; }
.banner-description { font-weight: 400; }
.banner-error {
background: var(--status-error-default);
color: var(--status-error-text);
border-bottom-color: var(--status-error-subtle);
}
.banner-warning {
background: var(--status-warning-default);
color: var(--status-warning-subtle);
border-bottom-color: var(--status-warning-subtle);
}
.banner-info {
background: var(--status-info-default);
color: var(--status-info-subtle);
border-bottom-color: var(--status-info-subtle);
}
.banner-success {
background: var(--status-success-default);
color: var(--status-success-subtle);
border-bottom-color: var(--status-success-subtle);
}
.banner-fading { opacity: 0; }
.banner-action {
flex-shrink: 0;
height: 32px;
padding: 8px 18px;
background: var(--palette-neutrals-white);
border: 1px solid var(--palette-neutrals-200);
border-radius: 14px;
font-family: var(--font-sans);
font-weight: 500;
font-size: 12px;
line-height: 18px;
color: var(--text-secondary);
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
.banner-action-wrap { display: flex; align-items: center; flex-shrink: 0; }
.banner-action-wrap form { margin: 0; }
/* ATT-105 — page-level error banner (products/_product_error_banner). The slot
is always in the DOM so job errors can broadcast in/out; display: contents
means the empty slot adds no box (no layout gap), and when populated the
.banner is the direct flex child of .ps-content. Full-bleed: negative margins
cancel .ps-content's 32px padding at top/left/right so the banner is flush to
the panel edges (the panel's border-radius + overflow round its top corners);
.ps-content's 20px flex gap spaces it from the header below. */
.ps-error-banner-slot { display: contents; }
/* width: auto (not the base .banner's width: 100%) so the flex item stretches
and the negative margins extend it to BOTH panel edges; with width: 100% the
box stays content-box-width and only shifts left, leaving a right-side gap. */
.ps-error-banner-slot .banner { width: auto; margin: -32px -32px 0; }
/* Fade-in on appearance (ATT-105), disabled under reduced-motion. */
@keyframes banner-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.banner { animation: banner-in 0.2s ease-out; }
@media (prefers-reduced-motion: reduce) {
.banner { animation: none; }
}
/* ══════════════════════════════════════════
Design System Components — Shared
Source: Figma Design System (MZJ1sKIdafvU8UD1Wc08Xz)
These map to Figma components:
- Button - Label, Elevated (node 162:166) → .btn-elevated
- Pill - Label (node 164:472) → .pill-label
- Pill - Label w/ count (node 234:1134) → .pill-label + .pill-count-badge
══════════════════════════════════════════ */
/* ─── Button: Elevated ─── */
.btn-elevated {
display: inline-flex;
align-items: center;
justify-content: center;
height: 36px;
padding: 0 20px;
border-radius: 14px;
border: 0;
font-family: var(--text-btn-font-family);
font-weight: var(--text-btn-font-weight);
font-size: var(--text-btn-font-size);
line-height: var(--text-btn-line-height);
letter-spacing: var(--text-btn-letter-spacing);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
box-shadow: var(--shadow-elevated-sm);
transition: background 0.12s, border-color 0.12s, color 0.12s;
}
/* Sizes */
.btn-elevated-sm {
height: 32px;
padding: 0 20px;
font-size: 12px;
line-height: 18px;
}
.btn-elevated-xs {
height: 24px;
padding: 0 12px;
border-radius: 10px;
font-size: 11px;
line-height: 16px;
letter-spacing: 0.005em;
}
/* Label PLUS icon. ATT-242 — the filter trigger needed one and found the DS had
no rule for it: .btn-icon-elevated is icon-ONLY, so a lucide dropped into a
24px button rendered at its natural 24px and swallowed the label.
Three surfaces had already each solved it locally and identically — the
audiences pagination, the settings-billing pagination (byte-identical rules)
and the OAuth stub. This is that rule, once, where a fourth caller will find
it. The two pagination duplicates were deleted when it landed; their measured
geometry is unchanged (14px icon, 8px to the label, same button width).
CHILD COMBINATOR, DELIBERATELY. .ob-oauth's Google mark is a GRANDCHILD inside
.ob-gmark and is sized 16px by its own rule; `>` leaves it alone. A descendant
selector would have resized a third-party logo as a side effect of styling a
filter button.
Margins rather than a gap on the button, so the 300-odd label-only callers are
untouched: a `gap` would have applied to any button that happens to have two
element children, and the icon-bearing ones are the only ones this is for. */
.btn-elevated > svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-elevated > svg:first-child { margin-right: 8px; }
.btn-elevated > svg:last-child { margin-left: 8px; }
/* Scaled to the label beside it. Equal specificity to the base rule, so these
must stay BELOW it. */
.btn-elevated-sm > svg { width: 14px; height: 14px; }
.btn-elevated-xs > svg { width: 12px; height: 12px; }
.btn-elevated-xs > svg:first-child { margin-right: 4px; }
.btn-elevated-xs > svg:last-child { margin-left: 4px; }
/* Destructive text link — button styled as a plain text link in the
status-error color. Used by journey-row Delete (ATT-120) and any
future inline destructive action. */
/* ── ATT-257: the generic text link ────────────────────────────────────────
A LINK-LOOKING CONTROL, for an OR a