/* ══════════════════════════════════════════
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;
/* ATT-273 — the Live Status failed fill. --status-error-default (luminance
0.8057) is far heavier than --status-success-default (0.9519), so a failed
strip shouted while a completed one whispered. This is --status-error-subtle
at 8% over white (0.8996), which closes the gap to 0.052. */
--status-error-faint: #fcf1f1;
--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: Theme (ATT-314) ───
One color per GOAL, so a theme reads the same on a journey step, a brief
section and an insight category. Values from /styleguide/theme-colors,
which is the source of truth for design (decided 2026-09-18); each text
color measured on its own tint, not trusted:
education 4.69:1 troubleshooting 5.94:1
return 5.43:1 upsell 5.34:1
all above the 4.5:1 AA threshold for normal text, none above 7:1 (AAA).
THEME IS NOT STATUS. These never mark an error, a warning or success —
that is what the --status-* tokens above are for, and the goal pills that
borrowed them are what this replaces. The hues are chosen to be
unmistakable for those: no red, no amber, no green at status saturation.
No dark-mode values: the design system has no dark status tokens yet, and
theme follows status rather than inventing its own dark scale.
Replaced --node-message / --node-check-in / --node-branch / --node-handoff,
which colored a step by its TYPE. The type is an icon now (ATT-309), and
nothing had referenced those four since. */
--theme-education-text: #0e7490;
--theme-education-tint: #e2f3f7;
--theme-troubleshooting-text: #3b5a8c;
--theme-troubleshooting-tint: #e8eef6;
--theme-return-text: #a21caf;
--theme-return-tint: #f8e9fb;
--theme-upsell-text: #436f0c;
--theme-upsell-tint: #eef5e1;
/* ATT-379 — the closing rating step and its replies (/styleguide/rating-step,
approved 2026-10-14). An amber BROWN, darker and less saturated than the
warning pill's yellow, so it does not read as a status. 6.0:1. */
--theme-review-text: #8a4b08;
--theme-review-tint: #fbf0e1;
/* ─── 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;
}
/* ─── ATT-410: Reddit threads on the discovered card (.disco-quote*) ───
A Reddit thread is an ordinary .disco-card plus its kept owner quotes,
which open under the row through the shared `disclosure` controller
(is-collapsed on the card). The quote block is shared with Source Details
and the Insights popover: the commenter's words, linked to the thread,
which OpenAI's web search terms require wherever a result is shown.
Approved mock: /styleguide/reddit-sources. */
.disco-card--quotes { flex-wrap: wrap; }
.disco-sub {
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);
color: var(--text-muted);
}
.disco-quotes-toggle {
display: inline-flex;
align-items: center;
padding: 0;
border: 0;
background: none;
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);
color: var(--brand-primary);
cursor: pointer;
}
.disco-quotes-show,
.disco-quotes-hide { display: inline-flex; align-items: center; gap: 4px; }
.disco-quotes-toggle svg { width: 14px; height: 14px; }
.disco-card--quotes.is-collapsed .disco-quotes-hide,
.disco-card--quotes:not(.is-collapsed) .disco-quotes-show,
.disco-card--quotes.is-collapsed .disco-quotes { display: none; }
/* Full width under the row, aligned with the title: the score box (44px) plus
the card's 20px gap. */
.disco-quotes {
flex: 0 0 calc(100% - 64px);
margin-left: 64px;
padding-top: 12px;
border-top: 1px solid var(--border-primary);
display: flex;
flex-direction: column;
gap: 12px;
}
.disco-quote-list { display: flex; flex-direction: column; gap: 12px; }
.disco-quote {
margin: 0;
padding-left: 12px;
border-left: 2px solid var(--border-primary);
}
.disco-quote p {
margin: 0 0 4px;
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(--text-secondary);
}
.disco-quote a {
display: inline-flex;
align-items: center;
gap: 4px;
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);
color: var(--brand-primary);
text-decoration: none;
}
.disco-quote a:hover,
.disco-post a:hover { text-decoration: underline; }
/* The thread's original post: a filled block rather than a rule, so it reads
as the opening the replies answer, not as another reply. */
.disco-post {
margin: 0;
padding: 12px 14px;
border-radius: var(--radius-small);
background: var(--bg-elevated);
}
.disco-post p {
margin: 0 0 6px;
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(--text-primary);
}
.disco-post a {
display: inline-flex;
align-items: center;
gap: 4px;
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);
color: var(--brand-primary);
text-decoration: none;
}
.disco-post a svg { width: 12px; height: 12px; }
/* Names each part of an opened thread: "Original post", "Owner reports in
the replies". */
.disco-part {
margin: 0;
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);
color: var(--text-muted);
}
.disco-quote a svg { width: 12px; height: 12px; }
.disco-left-out {
margin: 0;
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);
}
/* 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.
(The DS dropdown, .ctl-trigger, is reddened by its own rule beside the
component, after its open state.)
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 (beside
.ctl-trigger) and .form-field-error .ob-otp-box: 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); }
/* ATT-307 — the number stepper owns its border the same way. */
.form-field-error .input-stepper { border-color: var(--status-error-subtle); }
/* ATT-337 — and the radio listbox, first used for a required choice by the
journey start's "Which moment is this?". Until then no listbox could be in
error, so the gap was never visible. */
.form-field-error .listbox { border-color: var(--status-error-subtle); }
/* ATT-304 — and the DS checkbox, first required by the Terms checkbox at
signup. Its border is on the painted circle, not the (hidden) input. */
.form-field-error .pcf-check-visual { 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;
}
/* ATT-287 — the same banner as a warning, for a form reporting something the
person can wait out or fix elsewhere (the test-send modal). Same shape as the
error banner; only the three colours change, taken from the tokens
.banner-warning already uses. */
.form-error-banner.form-banner-warning {
border-color: var(--status-warning-subtle);
background: var(--status-warning-default);
color: var(--status-warning-subtle);
}
.form-error-banner a { color: inherit; font-weight: 500; text-decoration: underline; }
/* ── 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 carried the same guard (.opt, .jc-tab-panel, .jc-rail-empty,
.jc-suggestion; the last three went with the ATT-309 rail, whose
.jc-rail-suggestion carries it now) 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; }
/* ATT-314 — the caption and its theme pill travel together on the left,
leaving the claim count on the right where it was. */
.brief-section-hdr-left { display: inline-flex; align-items: center; gap: 8px; }
.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.
ATT-406: a brief finding is now .brief-finding (below); this chrome is kept
for the group brief's Product differences, the one card still drawn with
it, through .claim-card-warning. The confidence modifiers went with the old
finding card. */
.claim-card {
background: var(--bg-surface);
border: 1px solid; border-left-width: 6px;
border-radius: var(--radius-small); padding: 16px; margin-bottom: 16px;
}
/* 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;
}
/* 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); }
/* ─── ATT-406: the Brief tab's timing map, finding cards and contents
(.brief-*). /styleguide/product-brief, approved 2026-10-21; the mock's
.sgpb-* rules promoted. A brand reads "finding"; the code says "claim". ─── */
/* The contents travel down the whole brief: sticky inside .brief-body, at
zero height, with the ticks hung in .ps-content's left padding. */
.brief-body { position: relative; }
.brief-toc { position: sticky; top: 8px; z-index: 3; height: 0; }
.brief-toc-ticks { position: absolute; left: -30px; top: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 8px 4px; }
.brief-toc-tick { display: block; width: 12px; height: 2px; border-radius: 1px; background: var(--palette-neutrals-200); transition: width 140ms ease-out, background-color 140ms ease-out; }
.brief-toc-tick.is-current { width: 16px; background: var(--text-secondary); }
.brief-toc-panel {
position: absolute; left: -30px; top: -8px; width: 240px;
padding: 8px; border-radius: var(--radius-small); background: var(--bg-surface);
box-shadow: 0 0 0 1px var(--border-primary), var(--shadow-container-elevated-bg);
opacity: 0; visibility: hidden; transform: translateX(-4px);
transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}
.brief-toc:hover .brief-toc-panel, .brief-toc:focus-within .brief-toc-panel { opacity: 1; visibility: visible; transform: translateX(0); }
.brief-toc-item {
display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px;
font-family: var(--text-body-small-font-family); font-size: var(--text-body-small-font-size); line-height: var(--text-body-small-line-height);
color: var(--text-secondary); text-decoration: none;
}
.brief-toc-item:hover { background: var(--palette-neutrals-50); color: var(--text-primary); }
.brief-toc-item.is-current { color: var(--text-primary); font-weight: 500; }
.brief-toc-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brief-toc-count { font-family: var(--mono); font-size: 12px; color: var(--text-muted); }
.brief-section, .brief-timing { scroll-margin-top: 16px; }
/* The timing map, after attune.to's How it works friction map: a row per
timed finding, a bar across the days it matters in its section's theme
color. The label column and the first week's share of the track
(BriefsHelper: 7 of the first 30 days' 76%) set the band and the axis. */
.brief-timing { --brief-timing-label: 260px; --brief-timing-gap: 16px; margin: 0 0 32px; padding: 20px 20px 12px; border: 1px solid var(--border-primary); border-radius: var(--radius-default); }
.brief-timing-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.brief-timing-title { margin: 0; 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); color: var(--text-primary); }
.brief-timing-sub { margin: 0; font-family: var(--text-caption-font-family); font-size: var(--text-caption-font-size); line-height: var(--text-caption-line-height); color: var(--text-muted); }
.brief-timing-legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-family: var(--text-caption-font-family); font-size: var(--text-caption-font-size); line-height: var(--text-caption-line-height); color: var(--text-muted); }
.brief-timing-legend li { display: inline-flex; align-items: center; gap: 6px; }
.brief-timing-key { width: 14px; height: 4px; border-radius: 2px; }
.brief-timing-key-education { background: var(--theme-education-text); }
.brief-timing-key-troubleshooting { background: var(--theme-troubleshooting-text); }
.brief-timing-key-return { background: var(--theme-return-text); }
.brief-timing-key-upsell { background: var(--theme-upsell-text); }
.brief-timing-rows { position: relative; }
.brief-timing-band {
position: absolute; top: 0; bottom: 0; z-index: 0;
left: calc(var(--brief-timing-label) + var(--brief-timing-gap));
width: calc((100% - var(--brief-timing-label) - var(--brief-timing-gap)) * 0.1773);
background: var(--palette-neutrals-50); border-radius: 6px;
}
.brief-timing-row {
position: relative; z-index: 1;
display: grid; grid-template-columns: var(--brief-timing-label) minmax(0, 1fr); gap: var(--brief-timing-gap); align-items: center;
padding: 6px 8px; margin: 0 -8px; border-radius: 8px; color: inherit; text-decoration: none;
}
.brief-timing-row:hover { background: color-mix(in srgb, var(--palette-neutrals-100) 60%, transparent); }
.brief-timing-label { display: flex; flex-direction: column; min-width: 0; }
.brief-timing-finding { 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); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brief-timing-meta { display: flex; gap: 10px; font-family: var(--text-caption-font-family); font-size: var(--text-caption-font-size); line-height: var(--text-caption-line-height); color: var(--text-muted); }
.brief-timing-track { width: 100%; height: 10px; overflow: visible; }
.brief-timing-base { stroke: var(--palette-neutrals-100); stroke-width: 1; }
.brief-timing-bar { stroke-width: 4; stroke-linecap: round; }
.brief-timing-bar-education { stroke: var(--theme-education-text); }
.brief-timing-bar-troubleshooting { stroke: var(--theme-troubleshooting-text); }
.brief-timing-bar-return { stroke: var(--theme-return-text); }
.brief-timing-bar-upsell { stroke: var(--theme-upsell-text); }
/* Recurring keeps mattering, so it runs on lighter; an event has no day, so
it is dashed across the whole track. */
.brief-timing-bar-open { stroke-opacity: 0.45; }
.brief-timing-bar-event { stroke-width: 2; stroke-dasharray: 2 5; stroke-opacity: 0.7; }
.brief-timing-axis {
display: grid; grid-template-columns: 17.73% 17.73% 17.73% 22.8% 24.04%;
margin: 6px 0 0 calc(var(--brief-timing-label) + var(--brief-timing-gap));
font-family: var(--text-caption-font-family); font-size: var(--text-caption-font-size); line-height: var(--text-caption-line-height); color: var(--text-muted);
}
.brief-timing-axis span { white-space: nowrap; }
.brief-timing-axis-last { display: flex; justify-content: space-between; }
/* "Show N more" opens the folded rows and "Show less" closes them, both
animated: the wrapper's single grid row eases between 0fr and 1fr (a
height transition with no measuring), and the rows fade with it. Closed,
visibility drops at the END of the fold so the rows leave the tab order
without vanishing mid-animation. reveal_controller flips .is-open and keeps
the button on screen while the rows fold up into it. */
.brief-timing-extra {
display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
transition: grid-template-rows 320ms cubic-bezier(0.2, 0, 0, 1), opacity 200ms ease, visibility 0s linear 320ms;
}
.brief-timing-more.is-open .brief-timing-extra {
grid-template-rows: 1fr; opacity: 1; visibility: visible;
transition: grid-template-rows 320ms cubic-bezier(0.2, 0, 0, 1), opacity 240ms ease 60ms, visibility 0s;
}
/* min-height: 0 lets the row shrink below its content. The side padding
gives the rows' hover fill (which bleeds 8px past them) room inside the
clip. */
.brief-timing-extra-inner { min-height: 0; overflow: hidden; margin: 0 -8px; padding: 0 8px; }
.brief-timing-toggle {
display: inline-flex; align-items: center; gap: 4px; margin: 4px 0 0; padding: 0; border: 0; background: none; cursor: pointer;
font-family: var(--text-caption-font-family); font-size: var(--text-caption-font-size); line-height: var(--text-caption-line-height); font-weight: 500; color: var(--brand-primary);
}
.brief-timing-toggle-icon { width: 14px; height: 14px; transition: transform 320ms cubic-bezier(0.2, 0, 0, 1); }
.brief-timing-more.is-open .brief-timing-toggle-icon { transform: rotate(180deg); }
.brief-timing-more:not(.is-open) .brief-timing-toggle-less,
.brief-timing-more.is-open .brief-timing-toggle-more { display: none; }
@media (prefers-reduced-motion: reduce) {
.brief-timing-extra, .brief-timing-more.is-open .brief-timing-extra, .brief-timing-toggle-icon { transition: none; }
}
.brief-timing-note {
display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--border-primary);
font-family: var(--text-body-small-font-family); font-size: var(--text-body-small-font-size); line-height: var(--text-body-small-line-height); color: var(--text-secondary);
}
.brief-timing-note svg { width: 16px; height: 16px; margin-top: 2px; flex: 0 0 auto; color: var(--text-muted); }
/* The finding card: the journey step card's frame (.jc-step), full width and
stacked. Who says it top left, when top right, the finding, then one line
of evidence that opens. */
.brief-findings { display: flex; flex-direction: column; gap: 12px; }
.brief-finding {
display: flex; flex-direction: column; gap: 6px; padding: 12px 14px;
background: var(--bg-surface); border: 1px solid var(--border-primary); border-radius: var(--radius-small);
box-shadow: 0 0 0 0 transparent, var(--shadow-container-elevated-bg);
transition: border-color 140ms ease-out, box-shadow 140ms ease-out;
scroll-margin-top: 24px;
}
.brief-finding:target { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--brand-subtle), var(--shadow-container-elevated-bg); }
.brief-finding-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.brief-finding-kind { font-family: var(--text-caption-font-family); font-size: var(--text-caption-font-size); line-height: var(--text-caption-line-height); color: var(--text-muted); }
.brief-finding-when { 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); color: var(--text-primary); white-space: nowrap; }
.brief-finding-text { margin: 0; font-family: var(--text-body-font-family); font-weight: 500; font-size: var(--text-body-font-size); line-height: var(--text-body-line-height); color: var(--text-primary); }
.brief-finding-evidence { margin-top: 4px; }
.brief-finding-foot {
list-style: none; cursor: pointer;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding-top: 8px; border-top: 1px solid var(--border-primary);
font-family: var(--text-caption-font-family); font-size: var(--text-caption-font-size); line-height: var(--text-caption-line-height); color: var(--text-muted);
}
.brief-finding-foot::-webkit-details-marker { display: none; }
.brief-finding-src { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brief-finding-src .evidence-src-link { font-family: inherit; }
.brief-finding-chevron { width: 14px; height: 14px; flex: 0 0 auto; margin-right: auto; margin-left: -6px; color: var(--text-muted); transition: transform 140ms ease-out; }
.brief-finding-evidence[open] .brief-finding-chevron { transform: rotate(180deg); }
/* Confidence in words and neutral: how much the finding rests on, not an
alarm. */
.brief-finding-confidence { flex: 0 0 auto; white-space: nowrap; }
.brief-finding-quotes { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
.brief-finding-quotes .evidence-quote { margin: 0; }
.brief-finding-cite { white-space: nowrap; }
/* 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; }
/* ATT-348 — the development-only "Download as Markdown" row above the
insights, right-aligned like the Brief tab's toolbar actions. */
.intel-dev-actions { display: flex; justify-content: flex-end; margin-bottom: 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; }
/* ATT-314 — as on the brief: caption + theme pill left, count right. */
.intel-section-hdr-left { display: inline-flex; align-items: center; gap: 8px; }
.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; }
/* ATT-410 — a popover citing Reddit quotes needs a reading measure, and
says when one owner is the only source. */
.tooltip-box:has(.disco-quote) { max-width: 360px; width: 360px; gap: 8px; }
.tooltip-box .disco-quote { margin: 0 10px; }
.tooltip-box-note {
padding: 0 10px;
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);
}
/* ── 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;
}
/* ATT-273 — STATE LIVES IN THE GROUND (/styleguide/live-status, "The three
states"). This replaces the Figma node 1:1852 ruling, where all three states
shared one neutral surface and the mark's colour plus red failure text said
which state it was. On a floating pill the mark is too small to be the only
signal, and dark mode has no red text token, so the fill carries it instead:
the .cr-banner recipe, a pale state fill with the saturated value of the same
family as the border. In progress stays neutral, because "working" is not a
state worth colouring. The mark and the text are held constant below. */
.ls-strip--completed {
background: var(--status-success-default);
border-color: var(--status-success-subtle);
}
.ls-strip--failed {
background: var(--status-error-faint);
border-color: var(--status-error-subtle);
}
/* Dark (the wizard's .ob-root scope). The recessed --bg-subtle ground, and the
edge lifted to neutrals-300 because the light border measures 1.13:1 on dark
and a shadow cannot separate dark on dark. The state tints are layered OVER
--bg-subtle, since a bare rgba would composite over whatever is behind the
strip rather than over its own ground. */
.ob-root[data-theme="dark"] .ls-strip {
background: var(--bg-subtle);
border-color: var(--palette-neutrals-300);
}
.ob-root[data-theme="dark"] .ls-strip--completed {
background: linear-gradient(rgba(16, 185, 129, 0.18), rgba(16, 185, 129, 0.18)), var(--bg-subtle);
border-color: rgba(16, 185, 129, 0.45);
}
.ob-root[data-theme="dark"] .ls-strip--failed {
background: linear-gradient(rgba(221, 82, 76, 0.18), rgba(221, 82, 76, 0.18)), var(--bg-subtle);
border-color: rgba(221, 82, 76, 0.45);
}
/* ── Floating (ATT-273) ──
Product Show and Collection Show only. The inline strip above stays in the
page where the progress IS the content (brand voice, product import).
THE DOCK IS STICKY, NOT ABSOLUTE, which is a departure from the mock and the
reason for it is the panel: .ps-content scrolls internally, so a box anchored
absolutely to it scrolls away with the tab content. The dock is the strip's
always-rendered mount (#product__live_status / #collection__live_status),
moved to the END of .ps-tab-content by `order` and held 16px above the
panel's bottom edge while the content scrolls under it. It still takes its
own height at the end of the content, so nothing is ever covered for good,
and appearing there moves nothing above it.
16px FROM THE PANEL'S EDGE IS bottom: -16px, NOT 16px. Chrome measures a
sticky offset from inside the scroll container's padding, and .ps-content
has 32px of it: `bottom: 16px` measured 49px from the edge in a screenshot.
margin-bottom: -16px does the same for a short page whose pill rests at the
end of the content rather than sticking. The dock is full width and ignores
the pointer; only the pill takes clicks. */
.ls-dock {
order: 99;
position: sticky;
bottom: -16px;
z-index: 5;
margin-top: auto;
margin-bottom: -16px;
display: flex;
justify-content: center;
pointer-events: none;
}
/* No job: the mount stays in the DOM for Turbo Streams to target, but takes no
flex gap. */
.ls-dock:not(:has(.ls-strip)) { display: none; }
/* The modal frames (compile-journey-modal, product_edit_modal, ...) sit in
.ps-content AFTER the tab content, and an empty frame is still a flex item,
so each one added a 20px gap under the page: four of them lifted a short
page's resting pill 80px off the panel's edge (screenshotted on Collection
Show). Hidden only while EMPTY: a modal loading into one makes it non-empty
and it displays as before, and its backdrop is position: fixed anyway. */
.ps-content > turbo-frame:empty { display: none; }
/* The pill. ONE FIXED WIDTH (Arash, 2026-10-06): the mock's max-content with
a 520px floor still widened for every longer step message, so the pill
changed size between broadcasts. 600px, or the panel's width if narrower;
a longer message truncates with .ls-current-step's ellipsis. 20px each
side, not the strip's 14: a stadium radius eats its own corners. */
.ls-strip--floating {
pointer-events: auto;
margin-bottom: 0;
width: min(600px, 100%);
border-radius: 9999px;
box-shadow: var(--shadow-container-elevated-bg);
/* BACKWARDS, NOT BOTH. `both` held the last keyframe's opacity: 1 after the
entrance ended, and a held animation value beats a normal rule, so
.ls-strip--hiding's opacity: 0 never applied, no transitionend fired, and
the completed strip never left (live_status#hideStrip waits for that
event). With no delay, `backwards` draws the entrance the same. */
animation: ls-rise 280ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
/* Taller than the inline strip's 42px (Arash: it read too thin floating):
10px above and below the 28px mark makes a 48px pill. */
.ls-strip--floating .ls-strip-row { height: auto; min-height: 48px; padding: 10px 20px; gap: 10px; }
/* Opened, it is no longer a pill: a stadium radius on a tall box reads as a
lozenge, so it drops to the card radius while the history shows. */
.ls-strip--floating:has(.ls-history:not([hidden])) { border-radius: var(--radius-small); }
.ls-strip--floating .ls-history { padding: 0 20px 12px 60px; }
/* The entrance. The mock's 140ms and 8px (the popover timing) went unnoticed
in the app, where the pill usually arrives with a page load or a broadcast:
280ms, a 16px rise and a slight scale-up on an ease-out curve. It replays
when the strip is re-rendered (a page load mid-run, or one job handing off
to the next), which this length tolerates. */
@keyframes ls-rise {
from { opacity: 0; transform: translateY(16px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.ls-strip--floating { animation: none; }
}
.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);
}
/* ATT-273 — THE MARK STAYS THE BRAND IN EVERY STATE. It used to shift to
brand secondary (green) on completion per Figma node 14:1113; the ground now
says what happened, and a mark that also says it states the state twice (a
purple mark on a red fill read as an oversight). Per MODE, not per hex: dark
keeps the near-white mark from the .ob-root rule further down. */
.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. Its colour is
the brand in every state (ATT-273); the strip's ground carries the state. */
.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);
}
/* ATT-273 — no red failure text any more: the failed ground says it, and the
message stays at body colour in every state (the DS has no dark-mode red,
so red text could not be stated honestly in the wizard anyway). */
.ls-current-step {
color: var(--text-secondary);
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; }
}
/* ── The Details control (ATT-273) ──
Label-free, on Lucide's `timeline` (vendored as shared/_icon_timeline:
lucide-rails 0.7.4 does not ship it). Rendered ONLY from
shared/_live_status_details, at every site, so no strip can drift from the
ruling. chevron-down was rejected because it means "a menu opens" in this
app; `route` because it means journey. The 24px target is the glyph plus
3px; the small left margin keeps a full-width message off it. */
.ls-details {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px;
margin-left: 6px;
margin-right: -3px;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--text-muted);
cursor: pointer;
}
.ls-details:hover { background: var(--palette-neutrals-100); }
.ob-root[data-theme="dark"] .ls-details:hover { background: var(--palette-neutrals-300); }
.ls-details svg { width: 18px; height: 18px; }
/* ── Tooltip (ATT-273) ──
The app's first, promoted from the mock's .sgl-tip. CSS only: it labels a
static trigger and never has to flip, so it always opens above. A dark
bubble, so it reads as the system speaking rather than as part of the
surface it explains (#f3f4f6 on neutrals-900 is 16.1:1). Shown on hover AND
:focus-within, so the keyboard reaches it. The bubble is aria-hidden: the
trigger's aria-label already names it, and without that a screen reader
announces the control twice. */
.tooltip { position: relative; display: inline-flex; }
.tooltip-bubble {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translate(-50%, 4px);
padding: 5px 9px;
border-radius: 8px;
white-space: nowrap;
background: var(--palette-neutrals-900);
color: #f3f4f6;
font-size: var(--text-caption-font-size);
line-height: 16px;
font-weight: 500;
opacity: 0;
pointer-events: none;
z-index: 10;
transition: opacity 140ms ease-out, transform 140ms ease-out;
box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.35);
}
/* The arrow, a rotated square so it inherits the bubble's background. */
.tooltip-bubble::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
width: 7px;
height: 7px;
margin: -4px 0 0 -3.5px;
background: inherit;
transform: rotate(45deg);
border-radius: 1px;
}
.tooltip:hover .tooltip-bubble,
.tooltip:focus-within .tooltip-bubble,
.tooltip.is-shown .tooltip-bubble { opacity: 1; transform: translate(-50%, 0); }
/* ATT-404: a sentence rather than a label (a failed source's reason), so it
wraps at a fixed measure instead of running one line across the row. */
.tooltip-bubble--wrap { white-space: normal; width: 280px; }
@media (prefers-reduced-motion: reduce) {
.tooltip-bubble { transition: none; }
}
/* Inline strips that collapse their history without a controller of their own
(brand voice, product import): the `disclosure` controller holds
is-collapsed on this wrapper, so a Turbo Stream replacing the strip inside
keeps the reader's choice. Inline history opens by default. */
.ls-disclosure.is-collapsed .ls-history { display: none; }
/* History timeline — full step list, rendered inside the strip and toggled
via the Details button. Scrolls internally past 132px (ATT-273: one cap for
the floating pill and the inline strip) 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: 132px;
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;
}
/* ─── ATT-421: the Insights tab as the evidence layer (.ins-*) ───────────────
Built to /styleguide/insights (option B, 2a quick filters), whose .sgin-*
rules these are. The card itself is the brief's .brief-finding; .ins-*
adds the summary line, Worth a look, the quick filters, and the card's
last row (where the brief uses it, and the brand's reaction). The brief and
thin-evidence lines are the shared .callout (ATT-420). */
.ins-summary {
display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px;
margin: 0 0 28px; padding-bottom: 16px; border-bottom: 1px solid var(--border-primary);
}
.ins-summary-text { margin: 0; font-family: var(--text-body-small-font-family); font-size: var(--text-body-small-font-size); line-height: var(--text-body-small-line-height); color: var(--text-secondary); }
.ins-summary-text strong { font-weight: 600; color: var(--text-primary); }
.ins-summary-meta { font-family: var(--text-caption-font-family); font-size: var(--text-caption-font-size); line-height: var(--text-caption-line-height); color: var(--text-muted); white-space: nowrap; }
/* The brief's line and the thin-evidence line, stacked above the summary. */
.ins-notes { display: flex; flex-direction: column; gap: 8px; margin: 0 0 20px; }
/* The same updates line on the Brief tab, under its toolbar. */
.brief-updates { margin: 0 0 20px; }
.ins-section-desc { margin: -6px 0 12px; font-family: var(--text-caption-font-family); font-size: var(--text-caption-font-size); line-height: var(--text-caption-line-height); color: var(--text-muted); }
/* The card: the brief's finding card plus one row. */
.ins-card { scroll-margin-top: 24px; }
/* Discovery's timing is free text, often a sentence, where the brief's is a
short label: the frequency keeps its line and the timing wraps instead. */
.ins-card .brief-finding-kind { flex: 0 0 auto; white-space: nowrap; }
.ins-card .brief-finding-when { min-width: 0; white-space: normal; text-align: right; }
/* More room under that line than the brief's 6px, so a long timing does not
crowd the insight below it. */
.ins-card .brief-finding-top { margin-bottom: 6px; }
.ins-owners { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.ins-single { margin: 0; font-family: var(--text-caption-font-family); font-size: var(--text-caption-font-size); line-height: var(--text-caption-line-height); color: var(--text-muted); }
.ins-card-actions {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
padding-top: 8px; border-top: 1px solid var(--border-primary);
font-family: var(--text-caption-font-family); font-size: var(--text-caption-font-size); line-height: var(--text-caption-line-height); color: var(--text-muted);
}
.ins-used { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.ins-used svg { width: 14px; height: 14px; flex: 0 0 auto; }
.ins-used .evidence-src-link { font-family: inherit; }
.ins-used-none { color: var(--text-muted); }
/* New since the brief: a dot and words in the brand color, where "Used in"
sits once the brief has seen it. */
.ins-fresh { color: var(--brand-primary); font-weight: 500; }
.ins-fresh-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-primary); }
/* The reaction: three quiet text buttons, the same weight as the evidence
line, so a list of cards does not read as a list of forms. */
.ins-react { display: inline-flex; gap: 2px; margin-left: auto; }
.ins-react-form { display: inline; margin: 0; }
.ins-react-btn {
border: 0; background: none; cursor: pointer; padding: 2px 8px; border-radius: 6px;
font: inherit; color: var(--text-secondary);
transition: background-color 140ms ease-out, color 140ms ease-out;
}
.ins-react-btn:hover { background: var(--palette-neutrals-50); color: var(--text-primary); }
.ins-react-btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }
.ins-react-done { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--text-secondary); }
.ins-react-done svg { width: 14px; height: 14px; }
.ins-react-undo { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: var(--brand-primary); }
.ins-react-undo:hover { text-decoration: underline; }
/* Marked not accurate: kept on the page, so the brand can see what it ruled
out, but quiet. */
.ins-card-wrong { background: var(--palette-neutrals-50); box-shadow: none; }
.ins-card-wrong .brief-finding-text { color: var(--text-muted); }
.ins-card-note { margin: 0; font-family: var(--text-caption-font-family); font-size: var(--text-caption-font-size); line-height: var(--text-caption-line-height); color: var(--text-secondary); }
/* Worth a look: a short list chosen by rules, each row saying why it is there,
answered in place. */
.ins-wal { margin: 0 0 28px; padding: 16px 20px 8px; border: 1px solid var(--border-primary); border-radius: var(--radius-default); }
.ins-wal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 4px; flex-wrap: wrap; }
.ins-wal-title { margin: 0; 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); }
.ins-wal-sub { margin: 0; font-family: var(--text-caption-font-family); font-size: var(--text-caption-font-size); line-height: var(--text-caption-line-height); color: var(--text-muted); }
.ins-wal-list { margin: 0; padding: 0; list-style: none; }
.ins-wal-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "why why" "text react"; gap: 4px 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border-primary); }
.ins-wal-row:first-child { border-top: 0; }
.ins-wal-why { grid-area: why; display: inline-flex; align-items: center; gap: 6px; font-family: var(--text-caption-font-family); font-size: var(--text-caption-font-size); line-height: var(--text-caption-line-height); color: var(--text-secondary); }
.ins-wal-why svg { width: 14px; height: 14px; color: var(--text-muted); }
.ins-wal-text { grid-area: text; margin: 0; 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); color: var(--text-primary); }
.ins-wal-text a { margin-left: 6px; font-weight: 400; font-family: var(--text-caption-font-family); font-size: var(--text-caption-font-size); color: var(--brand-primary); text-decoration: none; }
.ins-wal-text a:hover { text-decoration: underline; }
.ins-wal-row .ins-react, .ins-wal-row .ins-react-done { grid-area: react; font-family: var(--text-caption-font-family); font-size: var(--text-caption-font-size); line-height: var(--text-caption-line-height); }
.ins-wal-foot { margin: 0; padding: 8px 0 4px; border-top: 1px solid var(--border-primary); font-family: var(--text-caption-font-family); font-size: var(--text-caption-font-size); line-height: var(--text-caption-line-height); color: var(--text-muted); }
/* Quick filters (2a): toggles with counts; pressed takes the filter bar's
chip colors. */
.ins-qf { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; }
.ins-qf-btn {
display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
border: 1px solid var(--border-primary); border-radius: 8px; background: var(--bg-surface);
font-family: var(--text-caption-font-family); font-size: var(--text-caption-font-size); line-height: var(--text-caption-line-height); font-weight: 500;
color: var(--text-secondary); cursor: pointer;
transition: border-color 140ms ease-out, background-color 140ms ease-out, color 140ms ease-out;
}
.ins-qf-btn:hover { border-color: var(--palette-neutrals-300); color: var(--text-primary); }
.ins-qf-btn:disabled { cursor: default; opacity: 0.5; }
.ins-qf-btn:disabled:hover { border-color: var(--border-primary); color: var(--text-secondary); }
.ins-qf-n { font-family: var(--mono); font-size: 12px; color: var(--text-muted); }
.ins-qf-btn.is-on { background: var(--brand-subtle); border-color: transparent; color: var(--brand-primary); }
.ins-qf-btn.is-on .ins-qf-n { color: var(--brand-primary); }
/* The index filter bar's Clear all (.fb-linkbtn): muted text, pinned right,
shown only while a filter is on. */
.ins-qf-clear {
margin-left: auto; align-self: center; border: 0; background: none; padding: 0; cursor: pointer;
font-family: var(--font-sans); font-size: var(--text-caption-font-size); color: var(--text-muted);
}
.ins-qf-clear:hover { color: var(--text-primary); }
/* The filters hide with the hidden attribute; these classes set display. */
.ins-qf-empty { margin: 0 0 20px; font-family: var(--text-body-small-font-family); font-size: var(--text-body-small-font-size); line-height: var(--text-body-small-line-height); color: var(--text-muted); }
.ins-qf-clear[hidden], .ins-qf-empty[hidden], .ins-card[hidden], .ins-section[hidden] { display: none; }
/* ─── 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 ─── */
/* ATT-287 — the focused layout's streamable flash slot. Adds no box. */
.flash-slot { display: contents; }
.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. */
/* SPACING IS A GAP, ON ICON BUTTONS ONLY (2026-10-15). It was margins keyed on
:first-child / :last-child, which see ELEMENTS only: a label written as plain
text is not one, so a lone icon was both first AND last child and took both
margins, 8px of dead space between the button's edge and the icon (28px
instead of 20px; Arash: "it elongates the button"). A flex gap spaces the
icon from the label on whichever side it sits, text node or , and
:has(> svg) keeps it off the label-only buttons. */
.btn-elevated:has(> svg) { gap: 8px; }
.btn-elevated > svg { width: 16px; height: 16px; flex-shrink: 0; }
/* 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; }
/* ATT-341 — a menu button: a trailing chevron sits closer to the edge than a
label does, so the right padding, the chevron and its gap all shrink. First
used by "Import products" (/styleguide/product-import, section 1). */
.btn-elevated.btn-elevated-menu { padding-right: 14px; gap: 6px; }
.btn-elevated.btn-elevated-menu > svg:last-child { width: 14px; height: 14px; }
.btn-elevated-sm.btn-elevated-menu { padding-right: 12px; gap: 4px; }
.btn-elevated-sm.btn-elevated-menu > svg:last-child { width: 12px; height: 12px; }
.btn-elevated-xs:has(> svg) { gap: 4px; }
.btn-elevated-xs > svg { width: 12px; height: 12px; }
/* 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