#page-outreach-dashboard { --bg:#f6f4ee; --surface:#ffffff; --text:#15172b; --accent:#6a4cf1; --sidebar-w:248px; }
/* COMM-FIXES-3 Bug B + OUTREACH-FIX-1 #1.1 fallbacks — guarantee
dark-theme CSS vars have values even if data-palette on
#od-content-root is missing, empty, or set to anything outside
warm/mono/slate. Without these the focus-todo (#dark-card-bg) and
.kpi.featured (#dark-kpi-bg) tiles render with transparent
backgrounds. Defaults match the warm palette (dashboard's design
default). */
#page-outreach-dashboard {
--dark-card-bg: linear-gradient(110deg, #15102e 0%, #221a52 60%, #2d2470 100%);
--dark-kpi-bg: linear-gradient(135deg, #2a1f6e 0%, #1e1646 100%);
}
/* ──────────────────────────────────────────────
PALETTE TOKENS — switch via [data-palette]
────────────────────────────────────────────── */
/* A · Warm — cream + purple (default, original) */
#od-content-root[data-palette="warm"] {
--bg: #f6f4ee;
--surface: #ffffff;
--surface-2: #faf9f4;
--surface-3: #f1eee5;
--border: #e8e4d8;
--border-soft: #efece2;
--border-strong: #d8d3c2;
--text: #15172b;
--text-2: #4d5168;
--text-3: #8a8fa6;
--text-4: #b3b6c4;
--accent: #6a4cf1;
--accent-2: #8b6dff;
--accent-soft: #efeaff;
--accent-deep: #4a32b8;
--accent-grad: linear-gradient(135deg, #b07aff 0%, #6a4cf1 100%);
--dark-card-bg: linear-gradient(110deg, #15102e 0%, #221a52 60%, #2d2470 100%);
--dark-kpi-bg: linear-gradient(135deg, #2a1f6e 0%, #1e1646 100%);
--dark-radial: rgba(139,109,255,0.4);
--limit-banner-bg: linear-gradient(90deg, #f1edff 0%, #faf9f4 100%);
--good: #1c8e5a;
--good-soft: #e2f3ea;
--warn: #b87410;
--warn-soft: #fbf0d9;
--danger: #c0423a;
--danger-soft: #fbe5e3;
--rose: #e85a8a;
--salmon: #f17d6e;
--plum: #b15dde;
--radius: 12px;
--radius-lg: 18px;
--radius-xl: 22px;
--sidebar-w: 248px;
}
/* B · Mono — near-white + ink + electric blue (3 colors) */
#od-content-root[data-palette="mono"] {
--bg: #fafafa;
--surface: #ffffff;
--surface-2: #f4f4f6;
--surface-3: #ebebf0;
--border: #e3e3e9;
--border-soft: #eeeef2;
--border-strong: #d2d2da;
--text: #0a0a14;
--text-2: #3a3a48;
--text-3: #777783;
--text-4: #a8a8b2;
--accent: #0066ff;
--accent-2: #2d7eff;
--accent-soft: #e5edff;
--accent-deep: #0040b3;
--accent-grad: linear-gradient(135deg, #2d7eff 0%, #0066ff 100%);
--dark-card-bg: linear-gradient(110deg, #08081a 0%, #11122a 60%, #16183a 100%);
--dark-kpi-bg: linear-gradient(135deg, #11122a 0%, #08081a 100%);
--dark-radial: rgba(0,102,255,0.45);
--limit-banner-bg: linear-gradient(90deg, #e5edff 0%, #fafafa 100%);
--good: #00875f;
--good-soft: #d8f0e7;
--warn: #b56c00;
--warn-soft: #fbecd0;
--danger: #cc2929;
--danger-soft: #ffe0e0;
--rose: #cc2929;
--salmon: #0066ff;
--plum: #0066ff;
--radius: 12px;
--radius-lg: 18px;
--radius-xl: 22px;
--sidebar-w: 248px;
}
/* C · Slate — cool gray + deep navy (2 colors) */
#od-content-root[data-palette="slate"] {
--bg: #eef1f5;
--surface: #f8fafc;
--surface-2: #e6ebf2;
--surface-3: #dde3ec;
--border: #d3dae5;
--border-soft: #e0e6ee;
--border-strong: #b8c2d1;
--text: #0d1631;
--text-2: #3a4663;
--text-3: #6c7891;
--text-4: #99a3b8;
--accent: #1e2a4a;
--accent-2: #2d3d68;
--accent-soft: #dce2ec;
--accent-deep: #0d1631;
--accent-grad: linear-gradient(135deg, #2d3d68 0%, #1e2a4a 100%);
--dark-card-bg: linear-gradient(110deg, #0a1224 0%, #16213d 60%, #243153 100%);
--dark-kpi-bg: linear-gradient(135deg, #1e2a4a 0%, #0a1224 100%);
--dark-radial: rgba(45,61,104,0.5);
--limit-banner-bg: linear-gradient(90deg, #dce2ec 0%, #eef1f5 100%);
--good: #1c5e3e;
--good-soft: #d9e9df;
--warn: #8b5a14;
--warn-soft: #f0e2c5;
--danger: #8b2e2e;
--danger-soft: #f5dada;
--rose: #1e2a4a;
--salmon: #2d3d68;
--plum: #1e2a4a;
--radius: 12px;
--radius-lg: 18px;
--radius-xl: 22px;
--sidebar-w: 248px;
}
/* ── PALETTE SWITCHER ── */
.palette-switch {
position: fixed;
bottom: 20px; right: 20px;
z-index: 200;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 999px;
padding: 5px;
display: flex; gap: 2px;
box-shadow: 0 12px 28px -10px rgba(0,0,0,0.25);
}
.palette-switch button {
border: none; background: transparent;
padding: 7px 13px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 600;
color: var(--text-3);
display: inline-flex; align-items: center; gap: 7px;
transition: background .15s, color .15s;
font-family: "JetBrains Mono", monospace;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
}
.palette-switch button:hover { color: var(--text); }
.palette-switch button.active {
background: var(--text);
color: var(--bg);
}
.palette-switch button .sw {
width: 8px; height: 8px;
border-radius: 50%;
}
#page-outreach-dashboard {
background: var(--bg);
color: var(--text);
font-family: "Inter", system-ui, -apple-system, sans-serif;
font-size: 14.5px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
--bg: var(--bg, #f6f4ee);
}
.display { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; letter-spacing: -0.015em; }
.mono { font-family: "JetBrains Mono", monospace; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
/* ============= APP SHELL ============= */
.app {
display: grid;
grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
min-height: 100vh;
overflow-x: clip;
}
min-height: 100vh;
}
/* ============= SIDEBAR ============= */
/* ════════════ SIDEBAR COLLAPSE ════════════ */
.app.sidebar-collapsed { --sidebar-w: 72px; }
.sidebar-collapsed aside.sidebar { padding: 22px 10px; }
.sidebar-collapsed .brand {
justify-content: center;
padding: 4px 0 18px;
}
.sidebar-collapsed .brand-name { display: none; }
.sidebar-collapsed .nav-label {
font-size: 0;
padding: 12px 0 0;
margin: 0;
}
.sidebar-collapsed .nav-label::after {
content: "";
display: block;
height: 1px;
background: var(--border-soft);
margin: 0 8px;
}
.sidebar-collapsed .nav-item {
font-size: 0;
padding: 10px 0;
justify-content: center;
position: relative;
gap: 0;
}
.sidebar-collapsed .nav-item .ico {
width: 20px; height: 20px;
flex: 0 0 20px;
}
.sidebar-collapsed .nav-item .pill {
position: absolute;
top: 4px;
right: 8px;
font-size: 9px;
padding: 1px 4px;
min-width: 14px;
margin: 0;
line-height: 1.3;
}
.sidebar-collapsed .user-card {
justify-content: center;
padding: 8px 0;
}
.sidebar-collapsed .user-card > div:not(.user-avatar) { display: none; }
.sidebar-collapsed main.main { max-width: none; }
/* Sidebar toggle button */
.sidebar-toggle {
position: absolute;
top: 24px;
right: -13px;
width: 26px; height: 26px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--text-2);
transition: color .12s, border-color .12s, background .12s;
z-index: 100;
box-shadow: 0 4px 10px -3px rgba(0,0,0,0.1);
}
.sidebar-toggle:hover {
color: var(--text);
border-color: var(--border-strong);
background: var(--surface-2);
}
.sidebar-toggle svg {
transition: transform .2s ease;
}
.sidebar-collapsed .sidebar-toggle svg {
transform: rotate(180deg);
}
.brand {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 8px 18px;
border-bottom: 1px solid var(--border-soft);
margin-bottom: 14px;
}
.brand-mark {
width: 30px; height: 30px;
border-radius: 9px;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
display: flex; align-items: center; justify-content: center;
color: #fff;
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 800;
font-size: 16px;
box-shadow: 0 4px 14px -4px rgba(106,76,241,0.5);
}
.brand-name {
font-family: "JetBrains Mono", monospace;
font-size: 12px;
letter-spacing: 0.2em;
font-weight: 500;
color: var(--text);
}
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-label {
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-4);
padding: 14px 10px 6px;
font-family: "JetBrains Mono", monospace;
}
.nav-item {
display: flex;
align-items: center;
gap: 11px;
padding: 9px 10px;
border-radius: 9px;
color: var(--text-2);
font-size: 14px;
font-weight: 500;
transition: background .12s, color .12s;
position: relative;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active {
background: var(--accent-soft);
color: var(--accent-deep);
font-weight: 600;
}
.nav-item .ico { width: 18px; height: 18px; flex: 0 0 18px; opacity: 0.9; }
.nav-item .pill {
margin-left: auto;
background: var(--accent);
color: #fff;
font-size: 11px;
padding: 1px 7px;
border-radius: 999px;
font-weight: 600;
}
.nav-item.active .pill { background: var(--accent-deep); }
/* ⭐ THE SIDEBAR PROFILE IS NOT DRAWN HERE — do not re-add it.
Alex, 2026-09-02: *"the profile where it says 'Alex Braganza'… when you
collapse it disappears. It needs to at least have a circle in it."*
This file used to carry its own unscoped copy of the app-shell sidebar
foot — `.sidebar-foot`, `.user-card`, `.user-avatar`, `.user-name`,
`.user-plan` — left over from when the outreach dashboard drew its own
rail. It is stylesheet #47 in app.html and app-shell.css is #4, so that
copy WON, globally, on every screen in the app.
The killer line was `.user-avatar { background: var(--accent-grad) }`.
`--accent-grad` is only ever declared on `#od-content-root[data-palette]`
(this file, :38/:81/:124) and `aside.sidebar` is a sibling of the page
root, not a descendant — so the var never resolved, the declaration was
invalid at computed-value time, and the avatar fell back to a transparent
background. White initials on nothing. Expanded you still read the name
and plan beside it so it looked fine; collapsed, the name and plan fold
away and the profile appeared to vanish entirely.
app-shell.css (:194-215, and the collapsed rail at :2788) owns this
block. The sidebar is never inside #page-outreach-dashboard, so nothing
here can legitimately style it. */
/* ============= MAIN ============= */
main.main {
padding: 28px 36px 80px;
max-width: 1280px;
min-width: 0;
}
}
/* TOP STRIP */
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 28px;
}
.crumbs {
color: var(--text-3);
font-size: 13px;
display: flex;
gap: 8px;
align-items: center;
}
.crumbs .sep { color: var(--text-4); }
.crumbs .now { color: var(--text); font-weight: 500; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.search {
display: flex;
align-items: center;
gap: 8px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 8px 12px;
width: 280px;
color: var(--text-3);
}
.search input {
border: none; outline: none; background: transparent;
font-family: inherit; font-size: 14px;
flex: 1;
color: var(--text);
}
.search kbd {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
color: var(--text-3);
background: var(--surface-3);
padding: 2px 6px;
border-radius: 4px;
}
.icon-btn {
width: 38px; height: 38px;
border-radius: 10px;
background: var(--surface);
border: 1px solid var(--border);
display: inline-flex; align-items: center; justify-content: center;
color: var(--text-2);
transition: background .12s, color .12s;
position: relative;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn .dot {
position: absolute; top: 8px; right: 9px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--rose);
border: 2px solid var(--surface);
}
/* ============= GREETING + KPIS ============= */
.greeting {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
margin-bottom: 22px;
}
h1.hello {
font-size: 34px;
margin: 0 0 4px;
}
.hello-sub { color: var(--text-2); font-size: 15px; }
.hello-sub .strong { color: var(--text); font-weight: 600; }
.greeting-meta {
color: var(--text-3);
font-family: "JetBrains Mono", monospace;
font-size: 12px;
letter-spacing: 0.04em;
text-align: right;
}
.greeting-meta .live {
display: inline-flex; align-items: center; gap: 6px;
color: var(--good);
}
.live-dot {
width: 7px; height: 7px; border-radius: 50%; background: var(--good);
box-shadow: 0 0 0 0 rgba(28,142,90,0.6);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(28,142,90,0.6); }
70% { box-shadow: 0 0 0 8px rgba(28,142,90,0); }
100% { box-shadow: 0 0 0 0 rgba(28,142,90,0); }
}
.kpi-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-bottom: 24px;
}
.kpi {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 18px 20px;
position: relative;
overflow: hidden;
}
.kpi .label {
font-size: 12.5px;
color: var(--text-3);
font-weight: 500;
}
.kpi .value {
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700;
font-size: 32px;
color: var(--text);
margin-top: 6px;
letter-spacing: -0.02em;
}
.kpi .value .unit { font-size: 16px; color: var(--text-3); font-weight: 600; margin-left: 4px; }
.kpi .delta {
margin-top: 8px;
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12.5px;
font-weight: 600;
}
.delta.up { color: var(--good); }
.delta.down { color: var(--danger); }
.delta .note { color: var(--text-3); font-weight: 500; margin-left: 4px; }
.kpi.featured {
background: var(--dark-kpi-bg);
border-color: transparent;
color: #fff;
}
.kpi.featured .label { color: rgba(255,255,255,0.7); }
.kpi.featured .value { color: #fff; }
.kpi.featured .value .unit { color: rgba(255,255,255,0.7); }
.kpi.featured .delta.up { color: #8de8b8; }
.kpi.featured .delta .note { color: rgba(255,255,255,0.55); }
.kpi.featured::before {
content: "";
position: absolute;
top: -40px; right: -40px;
width: 160px; height: 160px;
border-radius: 50%;
background: radial-gradient(circle, var(--dark-radial), transparent 65%);
}
.spark {
position: absolute;
bottom: 10px; right: 14px;
opacity: 0.6;
}
/* ============= FOCUS CARD ============= */
.focus-card {
background: var(--dark-card-bg);
color: #fff;
border-radius: var(--radius-xl);
padding: 28px 32px;
margin-bottom: 26px;
display: grid;
grid-template-columns: 1fr auto;
gap: 26px;
align-items: center;
position: relative;
overflow: hidden;
}
.focus-card::before {
content: "";
position: absolute;
right: -80px; top: -80px;
width: 320px; height: 320px;
border-radius: 50%;
background: radial-gradient(circle, var(--dark-radial), transparent 65%);
}
.focus-eyebrow {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
letter-spacing: 0.22em;
color: rgba(255,255,255,0.6);
text-transform: uppercase;
margin-bottom: 8px;
}
.focus-card h2 {
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700;
font-size: 26px;
margin: 0 0 6px;
letter-spacing: -0.02em;
max-width: 520px;
}
.focus-card p {
margin: 0;
color: rgba(255,255,255,0.72);
font-size: 14.5px;
max-width: 540px;
}
.focus-actions {
display: flex;
gap: 10px;
position: relative;
z-index: 1;
}
.focus-card .btn {
border: none;
border-radius: 10px;
padding: 12px 18px;
font-size: 14px;
font-weight: 600;
transition: transform .1s, background .12s;
display: inline-flex; align-items: center; gap: 8px;
}
.focus-card .btn-primary {
background: #fff; color: var(--text);
}
.focus-card .btn-primary:hover { transform: translateY(-1px); }
.focus-card .btn-ghost {
background: rgba(255,255,255,0.1);
color: #fff;
border: 1px solid rgba(255,255,255,0.18);
}
.focus-card .btn-ghost:hover { background: rgba(255,255,255,0.18); }
/* ============= TWO COLUMN LAYOUT ============= */
.grid-main {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
/* CARD BASE */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.card-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px;
gap: 12px;
border-bottom: 1px solid var(--border-soft);
}
.card-title {
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700;
font-size: 17px;
letter-spacing: -0.01em;
color: var(--text);
display: flex;
align-items: center;
gap: 10px;
}
.card-title .count {
background: var(--surface-3);
color: var(--text-2);
font-family: "JetBrains Mono", monospace;
font-size: 11px;
font-weight: 500;
padding: 2px 8px;
border-radius: 999px;
}
.card-meta {
color: var(--text-3);
font-size: 12.5px;
font-family: "JetBrains Mono", monospace;
}
.card-body { padding: 20px 22px; }
.card-foot {
padding: 14px 22px;
border-top: 1px solid var(--border-soft);
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
color: var(--text-3);
background: var(--surface-2);
}
.card-foot a.link { color: var(--accent); font-weight: 600; }
/* TABS */
.tabs {
display: flex;
background: var(--surface-2);
padding: 4px;
border-radius: 10px;
gap: 4px;
}
.tab {
border: none;
background: transparent;
color: var(--text-2);
font-size: 13px;
font-weight: 500;
padding: 7px 14px;
border-radius: 8px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.tab .num {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
color: var(--text-3);
}
.tab.active {
background: var(--surface);
color: var(--text);
font-weight: 600;
box-shadow: 0 1px 2px rgba(20,15,40,0.04);
}
.tab.active .num { color: var(--accent); }
/* ============= REVIEW QUEUE ============= */
.queue-list { display: flex; flex-direction: column; }
.queue-item {
display: grid;
grid-template-columns: 44px 1fr auto;
gap: 14px;
align-items: center;
padding: 14px 22px;
border-bottom: 1px solid var(--border-soft);
transition: background .12s;
}
.queue-item:last-child { border-bottom: none; }
.queue-item:hover { background: var(--surface-2); }
.avatar {
width: 44px; height: 44px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: #fff;
font-weight: 700;
font-size: 14px;
font-family: "Inter", sans-serif;
flex: 0 0 44px;
}
.avatar-pc { background: linear-gradient(135deg, #f17d6e, #e85a8a); }
.avatar-cm { background: linear-gradient(135deg, #6a4cf1, #b07aff); }
.avatar-as { background: linear-gradient(135deg, #1c8e5a, #38b878); }
.avatar-wb { background: linear-gradient(135deg, #b87410, #d99634); }
.avatar-ej { background: linear-gradient(135deg, #b15dde, #d27df0); }
.avatar-mu { background: linear-gradient(135deg, #4a32b8, #6a4cf1); }
.avatar-ba { background: linear-gradient(135deg, #c0423a, #e85a8a); }
.avatar-cg { background: linear-gradient(135deg, #38b878, #1c8e5a); }
.avatar-ab { background: linear-gradient(135deg, #6a4cf1, #4a32b8); }
.avatar-ms { background: linear-gradient(135deg, #1f5fa9, #3f8ade); }
.avatar-jo { background: linear-gradient(135deg, #e85a8a, #f17d6e); }
.avatar-mf { background: linear-gradient(135deg, #b15dde, #8b6dff); }
.avatar-cw { background: linear-gradient(135deg, #1c8e5a, #38b878); }
.avatar-sb { background: linear-gradient(135deg, #b87410, #e0a040); }
.avatar-ce { background: linear-gradient(135deg, #c0423a, #e8693a); }
.qi-info { min-width: 0; }
.qi-name {
font-weight: 600;
font-size: 14.5px;
color: var(--text);
display: flex;
align-items: center;
gap: 8px;
}
.qi-name .src {
font-family: "JetBrains Mono", monospace;
font-size: 10.5px;
color: var(--text-3);
background: var(--surface-3);
padding: 1px 6px;
border-radius: 4px;
font-weight: 500;
letter-spacing: 0.02em;
}
.qi-sub {
font-size: 13px;
color: var(--text-3);
margin-top: 1px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qi-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.approve-btn, .skip-btn {
width: 34px; height: 34px;
border-radius: 9px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text-2);
display: inline-flex; align-items: center; justify-content: center;
transition: all .12s;
}
.approve-btn:hover { background: var(--good-soft); color: var(--good); border-color: var(--good); }
.skip-btn:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
/* PERMISSION VARIANT (outreach review round 3, r1 F-D). A permission has no
avatar, so in the 44px / 1fr / auto grid its text fell into the 44px
avatar column: at 1440 the title wrapped one word per line under the
buttons and the explanation was cut to "A pe…". It is the one place a
coach decides a permission, so the text gets the full width, wraps rather
than truncating, and the buttons sit below it. */
.queue-item.permission {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.queue-item.permission .qi-name { display: block; line-height: 1.4; }
.queue-item.permission .qi-sub {
white-space: normal;
overflow: visible;
text-overflow: clip;
line-height: 1.5;
}
.queue-item.permission .qi-actions { justify-content: flex-end; flex-wrap: wrap; }
.queue-item.permission .qi-actions .btn { white-space: nowrap; }
/* COMMENT VARIANT */
.queue-item.comment {
grid-template-columns: 44px 1fr auto;
align-items: start;
}
.qi-comment {
color: var(--text-2);
font-size: 13.5px;
margin-top: 4px;
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.qi-comment .draft-tag {
display: inline-block;
background: var(--accent-soft);
color: var(--accent-deep);
font-family: "JetBrains Mono", monospace;
font-size: 10px;
font-weight: 600;
padding: 1px 6px;
border-radius: 4px;
margin-right: 6px;
letter-spacing: 0.04em;
text-transform: uppercase;
vertical-align: 2px;
}
.qi-when {
font-family: "JetBrains Mono", monospace;
font-size: 11.5px;
color: var(--text-3);
margin-left: 6px;
}
/* ============= PIPELINE ============= */
.pipeline-card .card-body { padding-bottom: 6px; }
.pipe-total {
display: flex;
align-items: baseline;
gap: 6px;
margin-bottom: 14px;
}
.pipe-total .big {
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 800;
font-size: 30px;
letter-spacing: -0.02em;
}
.pipe-total .lbl { color: var(--text-3); font-size: 13px; }
.stages { display: flex; flex-direction: column; gap: 12px; }
.stage { display: grid; grid-template-columns: 1fr; gap: 7px; }
.stage-row {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 13.5px;
}
.stage-row .name { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--text); }
.stage-row .swatch {
width: 9px; height: 9px; border-radius: 3px;
}
.stage-row .nums { color: var(--text-3); font-family: "JetBrains Mono", monospace; font-size: 12.5px; }
.stage-row .nums b { color: var(--text); font-weight: 600; margin-right: 3px; }
.stage-bar {
height: 8px;
border-radius: 4px;
background: var(--surface-3);
overflow: hidden;
}
.stage-bar .fill {
height: 100%;
border-radius: 4px;
transition: width .6s ease;
}
.fill-approved { background: linear-gradient(90deg, #f8d6c8, #f3b6a4); }
.fill-research { background: linear-gradient(90deg, #f4a08e, #f17d6e); }
.fill-engaging { background: linear-gradient(90deg, #ee6c80, #e85a8a); }
.fill-invited { background: linear-gradient(90deg, #c553a7, #b15dde); }
.fill-journey { background: linear-gradient(90deg, #8b6dff, #6a4cf1); }
.range-tabs {
display: inline-flex;
background: var(--surface-2);
border-radius: 8px;
padding: 3px;
gap: 2px;
}
.range-tabs button {
border: none;
background: transparent;
font-size: 12px;
color: var(--text-3);
padding: 5px 9px;
border-radius: 6px;
font-weight: 500;
}
.range-tabs button.active {
background: var(--surface);
color: var(--text);
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
/* ============= SCHEDULE ============= */
.day-tabs {
display: flex;
gap: 4px;
background: var(--surface-2);
padding: 4px;
border-radius: 9px;
}
.day-tabs button {
border: none; background: transparent;
font-size: 12px; padding: 5px 11px; border-radius: 7px;
color: var(--text-2); font-weight: 500;
}
.day-tabs button.active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.schedule { display: flex; flex-direction: column; }
.sched-item {
display: grid;
grid-template-columns: 56px 1fr auto;
gap: 12px;
align-items: center;
padding: 12px 22px;
border-bottom: 1px solid var(--border-soft);
font-size: 13.5px;
}
.sched-item:last-child { border-bottom: none; }
.sched-time {
font-family: "JetBrains Mono", monospace;
font-size: 12.5px;
color: var(--text-2);
font-weight: 500;
}
.sched-action {
display: flex; align-items: center; gap: 9px;
color: var(--text);
}
.sched-icon {
width: 28px; height: 28px;
border-radius: 8px;
background: var(--accent-soft);
color: var(--accent);
display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 28px;
}
.sched-icon.warm { background: var(--warn-soft); color: var(--warn); }
.sched-icon.good { background: var(--good-soft); color: var(--good); }
.sched-target { color: var(--text-3); font-size: 12.5px; margin-top: 1px; }
.sched-state {
font-size: 11.5px;
font-weight: 600;
padding: 3px 9px;
border-radius: 999px;
font-family: "Inter", sans-serif;
}
.state-ready { background: var(--good-soft); color: var(--good); }
.state-queued { background: var(--accent-soft); color: var(--accent-deep); }
.state-warn { background: var(--warn-soft); color: var(--warn); }
/* ============= GROUPS GRID ============= */
.groups-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.group-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 10px;
transition: border-color .15s, transform .15s;
}
.group-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.group-card.paused { opacity: 0.58; background: var(--surface-2); }
.group-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
/* Truncate a long group name instead of pushing the status pill past the
card edge (the head is space-between). */
.group-name { font-weight: 600; font-size: 14px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-status {
font-family: "JetBrains Mono", monospace;
font-size: 10.5px;
letter-spacing: 0.12em;
padding: 2px 8px;
border-radius: 999px;
font-weight: 500;
flex-shrink: 0;
}
.status-active { background: var(--good-soft); color: var(--good); }
.status-active .live-dot { display: inline-block; margin-right: 5px; vertical-align: 1px; width: 6px; height: 6px; }
.status-paused { background: var(--surface-3); color: var(--text-3); }
.group-meta {
color: var(--text-3);
font-size: 12px;
font-family: "JetBrains Mono", monospace;
display: flex;
gap: 10px;
align-items: center;
}
.group-meta .sep { color: var(--text-4); }
.group-foot {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid var(--border-soft);
padding-top: 10px;
margin-top: 2px;
}
.group-members {
font-size: 12.5px;
color: var(--text-2);
display: flex;
align-items: center;
gap: 6px;
}
.group-members b { color: var(--text); font-weight: 700; }
.group-action {
border: 1px solid var(--border);
background: var(--surface);
color: var(--text-2);
padding: 5px 11px;
border-radius: 7px;
font-size: 12px;
font-weight: 500;
transition: background .12s, color .12s;
}
.group-action:hover { background: var(--accent-soft); color: var(--accent-deep); border-color: var(--accent-soft); }
.group-action.play { background: var(--accent); color: #fff; border-color: var(--accent); }
.group-action.play:hover { background: var(--accent-deep); color: #fff; border-color: var(--accent-deep); }
/* Monitored-influencer cards carry several actions (Data / Run now / Pause /
Remove / View profile) in this wrapper; lay them out as a tidy right-
aligned flex row so they match the clean single-action group cards instead
of cramping together. */
.group-card-actions {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 8px;
}
.group-card-actions .group-action { flex-shrink: 0; }
.groups-section { margin-top: 28px; }
.section-head {
display: flex;
align-items: end;
justify-content: space-between;
margin-bottom: 14px;
}
.section-head h2 {
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700;
font-size: 22px;
letter-spacing: -0.01em;
margin: 0;
}
.section-head .meta { color: var(--text-3); font-size: 13px; }
.limit-banner {
background: var(--limit-banner-bg);
border: 1px solid var(--accent-soft);
border-radius: 12px;
padding: 12px 16px;
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
font-size: 13.5px;
color: var(--accent-deep);
}
.limit-banner .ico {
width: 28px; height: 28px;
border-radius: 8px;
background: var(--accent-soft);
color: var(--accent);
display: flex; align-items: center; justify-content: center;
flex: 0 0 28px;
}
.limit-banner b { color: var(--accent-deep); }
.limit-banner .upsell {
margin-left: auto;
color: var(--accent);
font-weight: 600;
}
/* ════════════ PIPELINE STRIP — segmented bar ════════════ */
.pipeline-strip {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 20px 24px;
margin-bottom: 22px;
}
.pipeline-strip .ps-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 14px; margin-bottom: 14px;
}
.ps-head .ps-title { display: flex; align-items: baseline; gap: 12px; }
.ps-head .ps-title .l {
font-family: "JetBrains Mono", monospace;
font-size: 10.5px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--text-3);
}
.ps-head .ps-title .total {
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700; font-size: 24px;
color: var(--text); letter-spacing: -0.02em; line-height: 1;
}
.ps-head .ps-title .sub {
color: var(--text-3); font-size: 13px;
}
.ps-head .conv {
font-size: 12.5px; color: var(--text-3);
display: inline-flex; align-items: baseline; gap: 8px;
}
.ps-head .conv b {
color: var(--accent-deep);
font-family: "Bricolage Grotesque", sans-serif;
font-size: 18px; font-weight: 700;
letter-spacing: -0.015em;
}
.ps-bar {
display: flex; gap: 3px;
height: 30px;
margin-bottom: 16px;
}
.ps-seg {
height: 100%;
border-radius: 4px;
display: flex; align-items: center;
padding: 0 12px;
color: #fff;
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700; font-size: 13.5px;
letter-spacing: -0.01em;
transition: opacity .15s, transform .15s;
overflow: hidden; white-space: nowrap;
cursor: pointer;
min-width: 8px;
}
.ps-seg:first-child { border-radius: 6px 4px 4px 6px; }
.ps-seg:last-child { border-radius: 4px 6px 6px 4px; }
.ps-seg:hover { opacity: 0.92; transform: scaleY(1.08); }
.ps-seg.researching { background: linear-gradient(90deg, #f4a08e, #f17d6e); }
.ps-seg.engaging { background: linear-gradient(90deg, #ee6c80, #e85a8a); }
.ps-seg.invited { background: linear-gradient(90deg, #c553a7, #b15dde); }
.ps-seg.journey { background: linear-gradient(90deg, #8b6dff, #6a4cf1); }
/* WS4/WS7 — "Active" = reached the community (outreach finish line). Success green. */
.ps-seg.active { background: linear-gradient(90deg, #38b878, #1c8e5a); }
.ps-seg.client { background: linear-gradient(90deg, #38b878, #1c8e5a); }
.ps-legend {
display: flex; flex-wrap: wrap; gap: 22px;
font-size: 13px; color: var(--text-2);
}
.ps-legend .it { display: inline-flex; align-items: center; gap: 7px; }
.ps-legend .it b { color: var(--text); font-weight: 700; }
.ps-legend .it .sw { width: 10px; height: 10px; border-radius: 3px; }
.ps-legend .it .pct { color: var(--text-3); font-family: "JetBrains Mono", monospace; font-size: 11.5px; margin-left: 2px; }
/* ════════════ HERO ROW ════════════ */
.hero-row {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
gap: 20px;
margin-bottom: 22px;
}
/* TODAY'S OUTREACH (big) */
.outreach-hero {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
}
.outreach-hero .oh-head {
padding: 22px 26px 18px;
border-bottom: 1px solid var(--border-soft);
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.outreach-hero h2 {
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700;
font-size: 22px;
letter-spacing: -0.015em;
margin: 0 0 4px;
color: var(--text);
display: flex; align-items: center; gap: 10px;
}
.outreach-hero h2 .live-pill {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--good-soft);
color: var(--good);
border-radius: 999px;
padding: 3px 10px;
font-size: 11px;
font-weight: 600;
font-family: "Inter", sans-serif;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.outreach-hero .oh-sub {
color: var(--text-3);
font-size: 13.5px;
}
.outreach-hero .oh-sub b { color: var(--text); font-weight: 600; }
.outreach-hero .oh-summary {
display: flex; align-items: center; gap: 16px;
font-size: 12.5px;
color: var(--text-2);
}
.outreach-hero .oh-summary .mini {
display: inline-flex;
align-items: baseline;
gap: 4px;
}
.outreach-hero .oh-summary .mini b {
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700;
font-size: 19px;
letter-spacing: -0.015em;
line-height: 1;
}
.outreach-hero .oh-summary .mini.done b { color: var(--good); }
.outreach-hero .oh-summary .mini.todo b { color: var(--accent); }
.outreach-hero .oh-summary .mini.need b { color: var(--warn); }
.outreach-hero .oh-progress {
height: 6px;
background: var(--surface-3);
border-radius: 3px;
overflow: hidden;
margin-top: 12px;
display: flex;
}
.outreach-hero .oh-progress .seg-done {
height: 100%;
background: linear-gradient(90deg, var(--good), #38b878);
}
.outreach-hero .oh-progress .seg-active {
height: 100%;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
opacity: 0.7;
}
.outreach-hero .day-tabs { flex-shrink: 0; }
.outreach-hero .oh-list {
overflow-y: auto;
flex: 1;
}
.oh-item {
display: grid;
grid-template-columns: 60px 32px 1fr auto;
gap: 14px;
padding: 14px 26px;
align-items: center;
border-bottom: 1px solid var(--border-soft);
transition: background .12s;
}
.oh-item:last-child { border-bottom: none; }
.oh-item:hover { background: var(--surface-2); }
.oh-item.done .oh-action { color: var(--text-3); text-decoration: line-through; }
.oh-item.done .oh-target { color: var(--text-4); }
.oh-item .oh-time {
font-family: "JetBrains Mono", monospace;
font-size: 12.5px;
color: var(--text-2);
font-weight: 600;
}
.oh-item.done .oh-time { color: var(--text-3); }
.oh-item .oh-ico {
width: 32px; height: 32px;
border-radius: 8px;
background: var(--accent-soft);
color: var(--accent);
display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 32px;
}
.oh-item .oh-ico.good { background: var(--good-soft); color: var(--good); }
.oh-item .oh-ico.warn { background: var(--warn-soft); color: var(--warn); }
.oh-item .oh-ico.done {
background: var(--good-soft);
color: var(--good);
}
.oh-item .oh-action {
font-size: 13.5px;
color: var(--text);
font-weight: 500;
}
.oh-item .oh-action b { color: var(--text); font-weight: 600; }
.oh-item .oh-target {
font-size: 12px;
color: var(--text-3);
margin-top: 2px;
}
.oh-state {
font-size: 11px;
font-weight: 600;
padding: 3px 9px;
border-radius: 999px;
font-family: "Inter", sans-serif;
letter-spacing: 0.02em;
text-transform: uppercase;
flex-shrink: 0;
white-space: nowrap;
}
.oh-state.done { background: var(--good-soft); color: var(--good); }
.oh-state.queued { background: var(--accent-soft); color: var(--accent-deep); }
.oh-state.running { background: var(--warn-soft); color: var(--warn); }
.oh-state.needs { background: #fbe5e3; color: var(--danger); animation: needs-pulse 1.8s infinite; }
.oh-state.held { background: var(--surface-2); color: var(--text-3); }
/* TRUST 2026-07-30 — auto-message chips. "Auto" marks a message the
Replicant wrote and will send without sign-off (dashed border keeps it
visually distinct from the solid "Queued" chip); "Approved by you" is the
tenant's own sign-off, so it reads good/green. */
.oh-state.auto { background: transparent; color: var(--accent-deep); border: 1px dashed var(--accent); }
.oh-state.approved { background: var(--good-soft); color: var(--good); }
@keyframes needs-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
/* Category filter tabs (All / Connections / Comments / …) on the hero */
.oh-cats {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 12px 26px;
border-bottom: 1px solid var(--border-soft);
}
.oh-cats .oh-cat {
border: 1px solid var(--border-soft);
background: var(--surface);
color: var(--text-2);
font-size: 12px;
font-weight: 500;
padding: 5px 11px;
border-radius: 999px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: background .12s, color .12s, border-color .12s;
}
.oh-cats .oh-cat:hover { background: var(--surface-2); color: var(--text); }
.oh-cats .oh-cat.active {
background: var(--accent-soft);
border-color: var(--accent);
color: var(--accent-deep);
font-weight: 600;
}
.oh-cats .oh-cat .n { font-size: 11px; font-weight: 700; color: var(--text-3); }
.oh-cats .oh-cat.active .n { color: var(--accent-deep); }
/* TRUST 2026-07-30 — with a pill per activity type the bar can outgrow a
phone screen; the BAR scrolls sideways, the page never does. */
@media (max-width: 640px) {
.oh-cats {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.oh-cats::-webkit-scrollbar { display: none; }
.oh-cats .oh-cat { flex: 0 0 auto; }
}
/* Funnel-STAGE filter row (Alex 2026-07-15) — a second, independent filter
dimension. Pill-shaped to read as distinct from the task-type tabs above. */
.oh-stages {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding: 0 26px 12px;
border-bottom: 1px solid var(--border-soft);
}
.oh-stages .oh-stage-lead {
font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
color: var(--text-3); margin-right: 4px;
}
.oh-stages .oh-stage {
border: 1px solid var(--border-soft);
background: var(--surface);
color: var(--text-2);
font-size: 12px;
font-weight: 500;
padding: 5px 12px;
border-radius: 999px;
cursor: pointer;
}
.oh-stages .oh-stage:hover { background: var(--surface-2); color: var(--text); }
.oh-stages .oh-stage.active {
background: var(--accent-soft);
border-color: var(--accent);
color: var(--accent-deep);
font-weight: 600;
}
.oh-stages .oh-stage .n { font-size: 11px; font-weight: 700; color: var(--text-3); }
.oh-stages .oh-stage.active .n { color: var(--accent-deep); }
/* Plain-English day summary line under the mini pills */
.outreach-hero .oh-catline {
margin-top: 8px;
font-size: 12.5px;
color: var(--text-2);
line-height: 1.5;
}
.outreach-hero .oh-catline b { color: var(--text); font-weight: 600; }
/* Warm-up transparency banner (WS3-safety) — signposts ramp stage,
today's permitted volume, next step-up, and upgrade advice. */
/* Full-width banner below the hero head (Alex 2026-07-15 — was cramped in the
left column). 26px horizontal inset matches .oh-cats / the list rows. */
.outreach-hero .oh-ramp {
margin: 14px 26px 2px;
padding: 13px 16px;
border: 1px solid var(--border-soft);
border-radius: 12px;
background: var(--surface-2);
font-size: 13px;
line-height: 1.5;
color: var(--text-2);
}
.outreach-hero .oh-ramp .oh-ramp-main {
display: flex;
align-items: center;
gap: 8px;
}
.outreach-hero .oh-ramp .oh-ramp-dot {
width: 9px;
height: 9px;
border-radius: 50%;
flex: 0 0 auto;
box-shadow: 0 0 0 3px rgba(0,0,0,0.03);
}
.outreach-hero .oh-ramp .oh-ramp-dot.oh-ramp-warming { background: #e0a92e; }
.outreach-hero .oh-ramp .oh-ramp-dot.oh-ramp-ramping { background: #3b82f6; }
.outreach-hero .oh-ramp .oh-ramp-dot.oh-ramp-full { background: #22a06b; }
.outreach-hero .oh-ramp .oh-ramp-head { color: var(--text); font-size: 13px; }
.outreach-hero .oh-ramp .oh-ramp-head b { font-weight: 700; }
.outreach-hero .oh-ramp .oh-ramp-sub { margin-top: 4px; color: var(--text-2); }
.outreach-hero .oh-ramp .oh-ramp-upgrade {
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed var(--border-soft);
color: var(--text-2);
font-size: 12px;
}
/* Trailing cell of a row: status badge + (optional) Cancel */
.oh-item .oh-end {
display: flex;
align-items: center;
gap: 8px;
justify-content: flex-end;
}
.oh-item.clickable { cursor: pointer; }
.oh-item .oh-cancel {
border: 1px solid var(--border-soft);
background: transparent;
color: var(--text-3);
font-size: 11px;
font-weight: 600;
padding: 3px 9px;
border-radius: 6px;
cursor: pointer;
white-space: nowrap;
transition: color .12s, border-color .12s, background .12s;
}
.oh-item .oh-cancel:hover { color: var(--danger); border-color: var(--danger); background: #fbe5e3; }
.oh-item .oh-cancel:disabled { opacity: .6; cursor: default; }
/* TRUST 2026-07-30 — Regenerate sits next to Skip on auto-message rows;
same quiet button shape as .oh-cancel, accent (not danger) on hover
because it improves the message rather than removing it. */
.oh-item .oh-regen {
border: 1px solid var(--border-soft);
background: transparent;
color: var(--text-3);
font-size: 11px;
font-weight: 600;
padding: 3px 9px;
border-radius: 6px;
cursor: pointer;
white-space: nowrap;
transition: color .12s, border-color .12s, background .12s;
}
.oh-item .oh-regen:hover { color: var(--accent-deep); border-color: var(--accent); background: var(--accent-soft); }
.oh-item .oh-regen:disabled { opacity: .6; cursor: default; }
/* "Why this message?" — a quiet text affordance in the row's content
column, under the message preview. */
.oh-item .oh-why {
background: none;
border: 0;
padding: 0;
margin-top: 4px;
color: var(--accent);
font-size: 12px;
font-weight: 600;
cursor: pointer;
display: inline-block;
}
.oh-item .oh-why:hover { text-decoration: underline; }
.outreach-hero .oh-foot {
padding: 14px 26px;
border-top: 1px solid var(--border-soft);
background: var(--surface-2);
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
color: var(--text-3);
}
.outreach-hero .oh-foot a { color: var(--accent); font-weight: 600; }
/* ════════════ TO-DO FOCUS CARD (single item, cycling) ════════════ */
.focus-todo {
background: var(--dark-card-bg);
color: #fff;
border-radius: var(--radius-lg);
padding: 26px 30px;
position: relative;
overflow: hidden;
display: flex; flex-direction: column;
min-height: 360px;
}
.focus-todo::before {
content: "";
position: absolute;
top: -140px; right: -140px;
width: 320px; height: 320px;
border-radius: 50%;
background: radial-gradient(circle, var(--dark-radial), transparent 65%);
pointer-events: none;
}
.focus-todo > * { position: relative; z-index: 1; }
.focus-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 22px;
}
.focus-head .eyebrow {
font-family: "JetBrains Mono", monospace;
font-size: 10.5px;
color: rgba(255,255,255,0.65);
letter-spacing: 0.18em;
text-transform: uppercase;
}
.focus-head .pager {
display: flex; align-items: center; gap: 8px;
font-family: "JetBrains Mono", monospace;
font-size: 11.5px;
color: rgba(255,255,255,0.7);
}
.focus-head .pager .count {
padding: 0 4px;
min-width: 36px;
text-align: center;
}
.btn-arrow {
width: 30px; height: 30px;
border-radius: 8px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.14);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background .12s, opacity .12s;
font-family: inherit;
}
.btn-arrow:hover { background: rgba(255,255,255,0.18); }
.btn-arrow:disabled { opacity: 0.35; cursor: not-allowed; }
.focus-body { flex: 1; margin-bottom: 22px; }
.focus-icon {
width: 46px; height: 46px;
border-radius: 13px;
background: var(--accent-soft);
color: var(--accent-deep);
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 16px;
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 800;
font-size: 21px;
line-height: 1;
}
.focus-icon.urgent { background: #fbe5e3; color: var(--danger); }
.focus-icon.signal { background: var(--good-soft); color: var(--good); }
.focus-title {
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700;
font-size: 25px;
letter-spacing: -0.015em;
line-height: 1.22;
margin: 0 0 12px;
color: #fff;
}
.focus-title b { color: var(--accent-soft); font-weight: 700; }
.focus-desc {
color: rgba(255,255,255,0.72);
font-size: 14.5px;
margin: 0;
line-height: 1.55;
}
.focus-desc b { color: #fff; font-weight: 600; }
.focus-actions {
display: flex; gap: 10px;
margin-top: auto;
}
.focus-actions .btn {
border: none;
padding: 12px 20px;
border-radius: 10px;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
font-family: "Inter", sans-serif;
transition: background .12s, color .12s;
}
.focus-actions .btn-primary {
background: #fff; color: var(--text);
}
.focus-actions .btn-primary:hover { background: #f1edff; }
.focus-actions .btn-ghost {
background: rgba(255,255,255,0.1);
color: #fff;
border: 1px solid rgba(255,255,255,0.16);
}
.focus-actions .btn-ghost:hover { background: rgba(255,255,255,0.18); }
.focus-dots {
display: flex; gap: 6px; justify-content: center;
padding-top: 22px;
margin-top: 18px;
border-top: 1px solid rgba(255,255,255,0.08);
}
.focus-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: rgba(255,255,255,0.22);
cursor: pointer;
transition: all .15s;
border: none;
padding: 0;
}
.focus-dot.active {
background: var(--accent-soft);
width: 24px;
border-radius: 4px;
}
/* ════════════ MONITORING ROW ════════════ */
.monitoring-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 26px;
}
.mon-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.mon-card .mc-head {
padding: 20px 22px 14px;
border-bottom: 1px solid var(--border-soft);
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 14px;
}
.mon-card h2 {
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700;
font-size: 17px;
letter-spacing: -0.01em;
margin: 0 0 4px;
color: var(--text);
display: flex; align-items: center; gap: 8px;
}
.mon-card h2 .pill-count {
background: var(--surface-3);
color: var(--text-2);
font-family: "JetBrains Mono", monospace;
font-size: 11px;
padding: 2px 8px;
border-radius: 999px;
font-weight: 500;
}
.mon-card .mc-sub {
color: var(--text-3);
font-size: 12.5px;
}
.mon-card .mc-add {
background: transparent;
border: 1px solid var(--border);
color: var(--text-2);
padding: 6px 12px;
border-radius: 7px;
font-size: 12px;
font-weight: 600;
display: inline-flex; align-items: center; gap: 5px;
flex-shrink: 0;
}
.mon-card .mc-add:hover { background: var(--surface-2); color: var(--text); }
.mon-list { padding: 4px 0; }
.mon-row {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 12px;
padding: 12px 22px;
align-items: center;
border-bottom: 1px solid var(--border-soft);
transition: background .12s;
}
.mon-row:last-child { border-bottom: none; }
.mon-row:hover { background: var(--surface-2); }
.mon-row .mr-ico {
width: 36px; height: 36px;
border-radius: 8px;
background: var(--accent-soft);
color: var(--accent);
display: flex; align-items: center; justify-content: center;
flex: 0 0 36px;
}
.mon-row .mr-ico.influ {
border-radius: 50%;
color: #fff;
font-weight: 700;
font-size: 13px;
}
.mon-row .mr-name {
font-weight: 600;
font-size: 13.5px;
color: var(--text);
display: flex; align-items: center; gap: 8px;
}
.mon-row .mr-name .filter-tag {
background: var(--accent-soft);
color: var(--accent-deep);
font-size: 9.5px;
font-weight: 700;
padding: 1px 6px;
border-radius: 4px;
letter-spacing: 0.04em;
text-transform: uppercase;
font-family: "JetBrains Mono", monospace;
}
.mon-row .mr-meta {
font-size: 11.5px;
color: var(--text-3);
margin-top: 2px;
font-family: "JetBrains Mono", monospace;
letter-spacing: 0.02em;
display: flex;
gap: 10px;
align-items: center;
}
.mon-row .mr-meta .sep {
width: 2px; height: 2px; border-radius: 50%;
background: var(--text-4);
}
.mon-row .mr-meta .new {
color: var(--good);
font-weight: 700;
}
.mon-row .mr-status {
display: flex; flex-direction: column;
align-items: flex-end;
gap: 3px;
}
.mon-row .mr-leads {
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700;
font-size: 17px;
color: var(--accent);
letter-spacing: -0.015em;
line-height: 1;
}
.mon-row .mr-leads-label {
font-size: 9.5px;
color: var(--text-3);
font-family: "JetBrains Mono", monospace;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.mon-card .mc-foot {
padding: 12px 22px;
border-top: 1px solid var(--border-soft);
background: var(--surface-2);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12.5px;
color: var(--text-3);
}
.mon-card .mc-foot a { color: var(--accent); font-weight: 600; }
/* Premium card title (replaces old h2 styles for premium variant) */
.mon-card.premium .mc-title {
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700;
font-size: 18px;
letter-spacing: -0.01em;
margin: 0;
color: var(--text);
display: flex;
align-items: center;
gap: 10px;
}
.mon-card.premium .mc-ico {
width: 30px;
height: 30px;
border-radius: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.mon-card.premium .mc-ico.voice {
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: #fff;
}
.mon-card.premium .mc-ico.group {
background: var(--good-soft);
color: var(--good);
}
.mon-card.premium .mc-tag {
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: #fff;
font-family: "JetBrains Mono", monospace;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.1em;
padding: 3px 8px;
border-radius: 4px;
}
.mon-card.premium .mc-sub {
padding: 0 24px;
margin-top: 4px;
color: var(--text-3);
font-size: 13px;
line-height: 1.5;
}
/* ════════════ PREMIUM MONITORED-ITEM CARDS ════════════ */
.mon-card.premium {
padding: 0;
}
.mon-card.premium .mc-head {
padding: 22px 24px 0;
border-bottom: none;
}
.ms-summary {
margin: 18px 24px 0;
padding: 14px 18px;
background: var(--surface-2);
border: 1px solid var(--border-soft);
border-radius: 12px;
display: flex;
gap: 22px;
align-items: center;
}
.ms-summary .ss-stat {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.ms-summary .ss-stat .v {
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700;
font-size: 22px;
color: var(--accent-deep);
line-height: 1;
letter-spacing: -0.02em;
}
.ms-summary .ss-stat .l {
font-size: 10.5px;
color: var(--text-3);
margin-top: 5px;
font-family: "JetBrains Mono", monospace;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.ms-summary .ss-sep {
width: 1px;
align-self: stretch;
background: var(--border-soft);
}
.mi-grid {
padding: 18px 24px 24px;
display: grid;
/* minmax(0,1fr): a bare 1fr is minmax(min-content,1fr), so a card whose
content has a wide min-content can't shrink below it and overflows/clips
the column on phones. minmax(0,1fr) lets the column shrink to fit. */
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.mon-card.premium .list-toggle {
width: auto;
background: transparent;
border: none;
border-top: 1px dashed var(--border-soft);
color: var(--accent);
font-size: 12.5px;
font-weight: 500;
padding: 12px 24px;
margin: 0;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
cursor: pointer;
border-radius: 0;
}
.mon-card.premium .list-toggle:hover {
color: var(--accent-deep);
background: var(--surface-2);
}
.mon-card.premium .list-toggle svg {
width: 12px;
height: 12px;
}
/* The premium item card */
.mi-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 18px;
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.mi-card:hover {
transform: translateY(-2px);
border-color: var(--accent-soft);
box-shadow: 0 14px 28px -16px rgba(106,76,241,0.22);
}
.mi-card.paused {
background: var(--surface-2);
border-color: var(--border-soft);
}
.mi-card.paused .mi-avatar,
.mi-card.paused .mi-stats,
.mi-card.paused .mi-last-post {
opacity: 0.55;
}
.mi-card.paused:hover {
box-shadow: 0 14px 28px -16px rgba(184,116,16,0.18);
border-color: var(--warn-soft);
}
.mi-head {
display: flex;
align-items: flex-start;
gap: 12px;
}
.mi-avatar {
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--accent-soft);
color: var(--accent);
flex: 0 0 44px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
transition: opacity .2s;
overflow: hidden;
}
/* Group/influencer thumbnail (metadata.group_image_url / profile_img_url).
Without these two rules the raw ![]()
renders at natural size (LinkedIn
logos are 400px+) and blows out of the 44px box, covering the panel. */
.mi-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
display: block;
}
.mi-avatar-circular {
border-radius: 50%;
}
.mi-avatar.voice {
border-radius: 50%;
font-size: 13px;
color: #fff;
}
.mi-info { flex: 1; min-width: 0; }
.mi-name {
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700;
font-size: 16px;
color: var(--text);
letter-spacing: -0.005em;
line-height: 1.25;
}
.mi-meta {
font-size: 11.5px;
color: var(--text-3);
margin-top: 3px;
font-family: "JetBrains Mono", monospace;
letter-spacing: 0.02em;
}
.mi-status {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--good);
font-family: "JetBrains Mono", monospace;
margin-top: 8px;
transition: color .25s;
}
.mi-status .dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--good);
animation: rep-pulse 1.6s infinite;
}
.mi-card.paused .mi-status { color: var(--warn); }
.mi-card.paused .mi-status .dot {
background: var(--warn);
animation: none;
box-shadow: none;
}
.mi-toggle {
width: 38px; height: 22px;
border-radius: 999px;
background: var(--good);
position: relative;
cursor: pointer;
transition: background .25s ease;
border: none;
padding: 0;
flex-shrink: 0;
margin-top: 4px;
}
.mi-toggle::after {
content: "";
width: 16px; height: 16px;
background: #fff;
border-radius: 50%;
position: absolute;
top: 3px; left: 3px;
transition: transform .25s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.mi-toggle.paused { background: #d8d3c2; }
.mi-toggle.paused::after { transform: translateX(16px); }
.mi-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 12px 0;
border-top: 1px solid var(--border-soft);
border-bottom: 1px solid var(--border-soft);
transition: opacity .2s;
}
.mi-stat { text-align: center; }
.mi-stat + .mi-stat { border-left: 1px solid var(--border-soft); }
.mi-stat .v {
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700;
font-size: 18px;
color: var(--accent-deep);
letter-spacing: -0.015em;
line-height: 1;
}
.mi-stat .v.muted { color: var(--text-3); }
.mi-stat .l {
font-size: 9.5px;
color: var(--text-3);
margin-top: 5px;
font-family: "JetBrains Mono", monospace;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.mi-last-post {
background: var(--surface-2);
border-radius: 8px;
padding: 10px 12px;
font-size: 11.5px;
color: var(--text-2);
line-height: 1.5;
font-style: italic;
transition: opacity .2s;
}
.mi-last-post .lp-label {
font-family: "JetBrains Mono", monospace;
font-size: 9px;
letter-spacing: 0.12em;
color: var(--text-3);
text-transform: uppercase;
font-style: normal;
font-weight: 600;
display: block;
margin-bottom: 5px;
}
.mi-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.mi-tags {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.mi-tag {
background: var(--accent-soft);
color: var(--accent-deep);
font-size: 10px;
font-weight: 700;
padding: 3px 9px;
border-radius: 999px;
letter-spacing: 0.06em;
font-family: "JetBrains Mono", monospace;
}
.mi-tag.warn { background: var(--warn-soft); color: var(--warn); }
.mi-tag.muted { background: var(--surface-3); color: var(--text-3); }
.mi-action {
background: transparent;
border: none;
color: var(--accent);
font-size: 12px;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 9px;
border-radius: 6px;
font-family: inherit;
transition: background .12s, color .12s;
letter-spacing: 0.02em;
}
.mi-action:hover { background: var(--accent-soft); color: var(--accent-deep); }
/* ════════════ LIST TRUNCATION + SHOW MORE ════════════ */
.oh-list { overflow: visible !important; }
.oh-list.collapsed > .oh-item:nth-child(n+6) { display: none; }
.mon-list.collapsed > .mon-row:nth-child(n+4) { display: none; }
.list-toggle {
width: 100%;
background: var(--surface-2);
border: none;
border-top: 1px dashed var(--border-soft);
padding: 13px 22px;
font-size: 13px;
font-weight: 600;
color: var(--accent);
cursor: pointer;
font-family: inherit;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
transition: background .12s, color .12s;
}
.list-toggle:hover { background: var(--accent-soft); color: var(--accent-deep); }
.list-toggle svg { transition: transform .2s ease; }
.list-toggle.expanded svg { transform: rotate(180deg); }
/* "How it works" button + mc-actions wrapper */
.mc-actions {
display: flex; gap: 8px; align-items: center;
flex-shrink: 0;
}
.mc-info {
background: transparent;
border: 1px solid var(--accent-soft);
color: var(--accent);
padding: 6px 12px;
border-radius: 7px;
font-size: 12px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
font-family: inherit;
transition: background .12s, border-color .12s;
}
.mc-info:hover {
background: var(--accent-soft);
border-color: var(--accent);
}
/* ════════════ HOW-IT-WORKS MODAL ════════════ */
.hiw-overlay {
position: fixed;
inset: 0;
background: rgba(13, 8, 25, 0.55);
backdrop-filter: blur(8px);
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
transition: opacity .2s ease;
}
.hiw-overlay.open { display: flex; opacity: 1; }
.hiw-modal {
background: var(--surface);
border-radius: var(--radius-xl);
width: 100%;
max-width: 720px;
max-height: 90vh;
overflow-y: auto;
overflow-x: hidden;
box-shadow: 0 40px 80px -20px rgba(20,15,40,0.5);
display: flex;
flex-direction: column;
transform: translateY(12px) scale(0.98);
transition: transform .25s ease;
}
.hiw-head { flex-shrink: 0; position: sticky; top: 0; background: var(--surface); z-index: 5; }
.hiw-controls { flex-shrink: 0; position: sticky; bottom: 0; background: var(--surface); z-index: 5; border-top: 1px solid var(--border-soft); }
.hiw-overlay.open .hiw-modal { transform: translateY(0) scale(1); }
.hiw-head {
padding: 24px 28px;
border-bottom: 1px solid var(--border-soft);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.hiw-head h3 {
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700;
font-size: 22px;
margin: 0 0 4px;
letter-spacing: -0.015em;
color: var(--text);
}
.hiw-head .sub {
color: var(--text-3);
font-size: 13.5px;
}
.hiw-close {
width: 36px; height: 36px;
border-radius: 10px;
background: var(--surface-2);
border: 1px solid var(--border);
color: var(--text-2);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .12s, color .12s;
flex-shrink: 0;
}
.hiw-close:hover { background: var(--surface-3); color: var(--text); }
.hiw-stage {
background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
padding: 28px;
min-height: 380px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.hiw-frame {
width: 100%;
max-width: 560px;
position: relative;
}
/* ════ PROFILE / POST MOCKUP (LinkedIn-style) ════ */
.li-profile {
background: #fff;
border: 1px solid #e3e3e9;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 6px 20px -8px rgba(0,0,0,0.10);
opacity: 0;
transform: translateY(8px);
transition: opacity .35s ease, transform .35s ease;
}
.li-profile.show { opacity: 1; transform: translateY(0); }
.li-banner {
height: 46px;
background: linear-gradient(135deg, #d8c1ff 0%, #b07aff 50%, #6a4cf1 100%);
}
.li-profile-head {
padding: 0 16px 12px;
display: flex;
align-items: flex-end;
gap: 12px;
margin-top: -22px;
}
.li-profile-av {
width: 50px; height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, #b15dde, #d27df0);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 700;
font-size: 16px;
border: 3px solid #fff;
flex-shrink: 0;
}
.li-profile-info { padding-bottom: 2px; flex: 1; min-width: 0; }
.li-profile-info .pn { font-weight: 700; font-size: 14px; color: #0a0a14; }
.li-profile-info .pt { font-size: 11px; color: #6c7891; margin-top: 1px; }
.li-profile-info .pf { font-size: 10.5px; color: #6c7891; margin-top: 3px; font-family: "JetBrains Mono", monospace; }
/* The post inside profile */
.li-post {
border-top: 1px solid #ebebf0;
padding: 12px 16px;
}
.li-post-meta {
display: flex; align-items: center; gap: 8px;
font-size: 10.5px; color: #6c7891;
margin-bottom: 6px;
}
.li-post-meta b { color: #0a0a14; font-weight: 600; }
.li-post-body {
font-size: 12px;
color: #2a2a3a;
line-height: 1.5;
margin-bottom: 10px;
}
.li-post-body i { color: #4a32b8; font-style: italic; }
.li-post-stats {
display: flex; align-items: center; gap: 8px;
padding: 6px 0;
border-top: 1px solid #ebebf0;
border-bottom: 1px solid #ebebf0;
font-size: 10.5px;
color: #6c7891;
}
.li-post-stats .react-dots { display: inline-flex; margin-right: 4px; }
.li-post-stats .rd {
width: 13px; height: 13px;
border-radius: 50%;
border: 1.5px solid #fff;
margin-left: -4px;
}
.li-post-stats .rd:first-child { margin-left: 0; background: #0a66c2; }
.li-post-stats .rd:nth-child(2) { background: #df704d; }
.li-post-stats .rd:nth-child(3) { background: #e2a64a; }
.li-post-toolbar {
display: flex; align-items: center; gap: 4px;
padding-top: 6px;
}
.li-tool {
flex: 1;
display: inline-flex; align-items: center; gap: 5px;
justify-content: center;
padding: 6px 4px;
border-radius: 6px;
font-size: 10.5px;
color: #6c7891;
font-weight: 600;
cursor: default;
}
.li-tool svg { width: 13px; height: 13px; flex-shrink: 0; }
.li-tool-rep {
flex: 0 0 auto;
padding: 6px 9px;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: #fff;
border-radius: 6px;
font-size: 10.5px;
font-weight: 700;
display: inline-flex; align-items: center; gap: 5px;
cursor: pointer;
position: relative;
border: none;
font-family: inherit;
transition: transform .15s;
}
.li-tool-rep svg { width: 11px; height: 11px; }
.li-tool-rep.pulse { animation: rep-pulse 1.6s infinite; }
.li-tool-rep.clicked { transform: scale(0.88); }
/* ════ CALENDAR STRIP ════ */
.cal-strip {
background: #fff;
border: 1px solid #e3e3e9;
border-radius: 10px;
padding: 14px 16px;
box-shadow: 0 4px 16px -6px rgba(0,0,0,0.08);
}
.cal-head {
font-family: "JetBrains Mono", monospace;
font-size: 10.5px;
color: #6c7891;
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: space-between;
}
.cal-head .live-dot {
display: inline-flex; align-items: center; gap: 8px;
color: #1c8e5a;
font-weight: 600;
flex-shrink: 0;
white-space: nowrap;
}
.cal-head .live-dot::before {
content: "";
width: 8px; height: 8px;
border-radius: 50%;
background: #1c8e5a;
flex-shrink: 0;
animation: green-pulse 1.8s infinite;
}
@keyframes green-pulse {
0% { box-shadow: 0 0 0 0 rgba(28,142,90,0.5); }
70% { box-shadow: 0 0 0 5px rgba(28,142,90,0); }
100% { box-shadow: 0 0 0 0 rgba(28,142,90,0); }
}
.cal-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
position: relative;
}
.cal-day {
aspect-ratio: 1;
border-radius: 6px;
background: #f4f4f6;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 9.5px;
color: #6c7891;
font-weight: 600;
position: relative;
transition: background .25s ease, color .25s ease, transform .25s ease;
}
.cal-day .day-num {
font-family: "Bricolage Grotesque", sans-serif;
font-size: 13px;
color: #0a0a14;
font-weight: 700;
}
.cal-day.checked {
background: #e2f3ea;
color: #1c8e5a;
}
.cal-day.checked .day-num { color: #1c8e5a; }
.cal-day.checked::after {
content: "✓";
position: absolute;
top: 2px; right: 4px;
font-size: 9px;
font-weight: 800;
color: #1c8e5a;
}
.cal-day.today {
background: linear-gradient(135deg, var(--accent-soft), #fff);
border: 1.5px solid var(--accent);
color: var(--accent-deep);
transform: scale(1.06);
}
.cal-day.today .day-num { color: var(--accent-deep); }
.cal-sweep {
position: absolute;
top: 0;
bottom: 0;
width: 32px;
background: linear-gradient(90deg, transparent, rgba(106,76,241,0.22), transparent);
pointer-events: none;
border-radius: 8px;
animation: cal-sweep-anim 2.6s ease-in-out infinite;
}
@keyframes cal-sweep-anim {
0% { transform: translateX(-40px); }
50% { transform: translateX(440px); }
100% { transform: translateX(-40px); }
}
/* ════ MATCH ANALYSIS DIAGRAM ════ */
.match-grid {
display: grid;
grid-template-columns: 1fr 80px 1fr;
gap: 10px;
align-items: stretch;
}
.match-card {
background: #fff;
border: 1px solid #e3e3e9;
border-radius: 10px;
padding: 11px;
box-shadow: 0 4px 12px -6px rgba(0,0,0,0.06);
}
.match-card .mc-label {
font-family: "JetBrains Mono", monospace;
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #6c7891;
margin-bottom: 8px;
}
.match-card .mc-row {
font-size: 10.5px;
padding: 4px 7px;
background: #f4f4f6;
border-radius: 5px;
margin-bottom: 4px;
color: #2a2a3a;
display: flex;
align-items: center;
gap: 5px;
opacity: 0;
transform: translateX(-6px);
transition: opacity .3s ease, transform .3s ease, background .3s ease, color .3s ease;
}
.match-card.right .mc-row { transform: translateX(6px); }
.match-card .mc-row.show { opacity: 1; transform: translateX(0); }
.match-card .mc-row:last-child { margin-bottom: 0; }
.match-card .mc-row.match { background: #e2f3ea; color: #1c8e5a; font-weight: 600; }
.match-card .mc-row .dot {
width: 5px; height: 5px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.match-conn {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
}
.match-conn .score-ring {
width: 56px; height: 56px;
border-radius: 50%;
background: conic-gradient(#1c8e5a 0deg, #1c8e5a calc(var(--score, 0) * 3.6deg), #ebebf0 calc(var(--score, 0) * 3.6deg));
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: background .8s ease;
}
.match-conn .score-ring::before {
content: "";
position: absolute;
inset: 5px;
background: #fff;
border-radius: 50%;
}
.match-conn .score-ring .v {
position: relative;
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700;
font-size: 14px;
color: #1c8e5a;
letter-spacing: -0.02em;
z-index: 1;
}
.match-conn .score-label {
font-family: "JetBrains Mono", monospace;
font-size: 8.5px;
letter-spacing: 0.14em;
color: #1c8e5a;
font-weight: 700;
text-transform: uppercase;
}
/* ════ POWER COMMENT ════ */
.power-comment {
margin-top: 8px;
background: linear-gradient(135deg, #efeaff, #fff);
border: 1px solid var(--accent);
border-radius: 10px;
padding: 11px 14px;
box-shadow: 0 6px 18px -8px rgba(106,76,241,0.25);
opacity: 0;
transform: translateY(6px);
transition: opacity .35s ease, transform .35s ease;
}
.power-comment.show { opacity: 1; transform: translateY(0); }
.power-comment .pc-head {
display: flex; align-items: center; gap: 8px;
margin-bottom: 6px;
font-size: 10.5px;
}
.power-comment .pc-tag {
background: var(--accent);
color: #fff;
padding: 2px 7px;
border-radius: 4px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
font-family: "JetBrains Mono", monospace;
}
.power-comment .pc-by { color: #6c7891; font-weight: 500; }
.power-comment .pc-by b { color: #0a0a14; }
.power-comment .pc-body {
font-family: "Inter", sans-serif;
font-size: 12px;
line-height: 1.5;
color: #2a2a3a;
min-height: 18px;
}
.power-comment .pc-body::after {
content: "▊";
color: var(--accent);
margin-left: 1px;
animation: pc-caret 0.7s infinite;
}
.power-comment.done .pc-body::after { display: none; }
@keyframes pc-caret {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
/* ════ EMAIL TOAST ════ */
/* pointer-events: none — same fault as .ccw-toast (§DEAD-BUTTON, 2026-08-07):
invisible at opacity:0 but still hit-testable, so it silently eats taps on
whatever sits under it. Informational only — a heading and two lines of text,
never a control. */
.email-toast {
pointer-events: none;
position: absolute;
bottom: 8px;
right: 8px;
background: #fff;
border: 1px solid var(--border);
border-radius: 10px;
padding: 11px 14px;
box-shadow: 0 18px 40px -10px rgba(0,0,0,0.20);
width: 240px;
z-index: 10;
opacity: 0;
transform: translateY(12px) scale(0.96);
transition: opacity .35s ease, transform .35s cubic-bezier(.4,0,.2,1);
}
.email-toast.show { opacity: 1; transform: translateY(0) scale(1); }
.email-toast .et-head {
display: flex; align-items: center; gap: 7px;
font-size: 10px; color: #6c7891;
margin-bottom: 4px;
font-family: "JetBrains Mono", monospace;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.email-toast .et-head .ico {
width: 18px; height: 18px;
border-radius: 5px;
background: var(--accent);
color: #fff;
display: flex; align-items: center; justify-content: center;
}
.email-toast .et-head .ico svg { width: 10px; height: 10px; }
.email-toast .et-title {
font-weight: 700;
font-size: 12.5px;
color: var(--text);
margin-bottom: 2px;
}
.email-toast .et-sub { color: var(--text-3); font-size: 11px; }
/* ════ DAY-BY-DAY ENGAGEMENT ════ */
.day-track {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.day-cell {
background: #fff;
border: 1px solid #e3e3e9;
border-radius: 8px;
padding: 10px 8px;
text-align: center;
opacity: 0;
transform: translateY(6px);
transition: opacity .35s ease, transform .35s ease;
}
.day-cell.show { opacity: 1; transform: translateY(0); }
.day-cell .dl {
font-family: "JetBrains Mono", monospace;
font-size: 9px;
color: #6c7891;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 4px;
}
.day-cell .dv {
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700;
font-size: 22px;
color: var(--accent-deep);
letter-spacing: -0.02em;
line-height: 1;
}
.day-cell .ds {
font-size: 10px;
color: #6c7891;
margin-top: 3px;
}
.funnel-row {
margin-top: 10px;
padding: 11px 14px;
background: linear-gradient(135deg, #efeaff, #fff);
border: 1px solid var(--accent);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
opacity: 0;
transform: translateY(8px);
transition: opacity .35s ease, transform .35s ease;
}
.funnel-row.show { opacity: 1; transform: translateY(0); }
.funnel-row .fr-label {
font-size: 12px;
font-weight: 600;
color: var(--accent-deep);
}
.funnel-row .fr-count {
background: var(--accent-deep);
color: #fff;
padding: 4px 11px;
border-radius: 999px;
font-family: "JetBrains Mono", monospace;
font-size: 12px;
font-weight: 700;
}
/* ════ PAUSE TOGGLE ════ */
.pause-card {
background: #fff;
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 14px;
box-shadow: 0 6px 18px -8px rgba(0,0,0,0.10);
}
.pause-card .pcc-av {
width: 36px; height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #b15dde, #d27df0);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 700;
font-size: 12px;
flex-shrink: 0;
}
.pause-card .pcc-info { flex: 1; min-width: 0; }
.pause-card .pcc-name { font-weight: 700; font-size: 13px; color: #0a0a14; }
.pause-card .pcc-state {
font-size: 10.5px;
color: #1c8e5a;
font-weight: 600;
font-family: "JetBrains Mono", monospace;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-top: 2px;
transition: color .25s ease;
}
.pause-card.paused .pcc-state { color: #b87410; }
.pause-toggle {
width: 44px; height: 24px;
border-radius: 999px;
background: #1c8e5a;
position: relative;
cursor: pointer;
transition: background .25s ease;
flex-shrink: 0;
border: none;
padding: 0;
}
.pause-toggle::after {
content: "";
width: 18px; height: 18px;
background: #fff;
border-radius: 50%;
position: absolute;
top: 3px; left: 3px;
transition: transform .25s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.pause-toggle.paused { background: #d8d3c2; }
.pause-toggle.paused::after { transform: translateX(20px); }
.pause-status {
margin-top: 10px;
text-align: center;
font-size: 11.5px;
color: var(--text-3);
opacity: 0;
transition: opacity .25s ease;
}
.pause-status.show { opacity: 1; }
.pause-status b { color: var(--warn); }
/* LinkedIn-style mini cards */
.li-card {
background: #fff;
border: 1px solid #e3e3e9;
border-radius: 10px;
padding: 14px 16px;
box-shadow: 0 4px 16px -6px rgba(0,0,0,0.08);
transition: transform .4s cubic-bezier(.4,.0,.2,1), opacity .4s ease;
opacity: 0;
transform: translateY(8px);
}
.li-card.show { opacity: 1; transform: translateY(0); }
.li-card.fade { opacity: 0.4; }
.li-row { display: flex; align-items: center; gap: 12px; }
.li-av {
width: 36px; height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #4a32b8, #6a4cf1);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 13px;
flex-shrink: 0;
}
.li-av.g1 { background: linear-gradient(135deg, #f17d6e, #e85a8a); }
.li-av.g2 { background: linear-gradient(135deg, #1c8e5a, #38b878); }
.li-av.g3 { background: linear-gradient(135deg, #b87410, #d99634); }
.li-av.g4 { background: linear-gradient(135deg, #b15dde, #d27df0); }
.li-name {
font-weight: 700;
font-size: 13.5px;
color: #0a0a14;
display: flex;
align-items: center;
gap: 6px;
}
.li-name .deg {
font-size: 10.5px;
color: #6c7891;
font-weight: 500;
}
.li-sub {
font-size: 11.5px;
color: #6c7891;
margin-top: 1px;
}
/* The Replicants icon (the pink-circled icon from the user's screenshot) */
.rep-icon {
width: 22px; height: 22px;
border-radius: 6px;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
cursor: pointer;
transition: transform .2s, box-shadow .2s;
}
.rep-icon svg { width: 13px; height: 13px; }
.rep-icon.pulse {
animation: rep-pulse 1.6s infinite;
}
@keyframes rep-pulse {
0% { box-shadow: 0 0 0 0 rgba(106,76,241,0.55); transform: scale(1); }
50% { transform: scale(1.08); }
100% { box-shadow: 0 0 0 12px rgba(106,76,241,0); transform: scale(1); }
}
.rep-icon.clicked { transform: scale(0.85); }
/* Magnifier ring (matches the screenshot) */
.magnifier {
position: absolute;
width: 80px; height: 80px;
border: 3.5px solid var(--accent);
border-radius: 50%;
pointer-events: none;
opacity: 0;
transition: opacity .35s ease, transform .35s ease;
box-shadow: 0 0 0 4px rgba(255,255,255,0.7), 0 12px 30px -8px rgba(106,76,241,0.4);
}
.magnifier::after {
content: "";
position: absolute;
width: 4px;
height: 26px;
background: var(--accent);
border-radius: 3px;
bottom: -22px;
right: -8px;
transform: rotate(40deg);
transform-origin: top;
}
.magnifier.show { opacity: 1; transform: scale(1); }
.magnifier.gone { opacity: 0; transform: scale(1.3); }
/* Arrow that connects pieces */
.hiw-arrow {
position: absolute;
color: var(--accent);
opacity: 0;
transition: opacity .3s ease;
}
.hiw-arrow.show { opacity: 1; }
/* People list (engagers) */
.li-engagers {
display: flex;
gap: -8px;
padding-left: 0;
}
.li-engager {
width: 28px; height: 28px;
border-radius: 50%;
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 10px;
font-weight: 700;
border: 2px solid #fff;
margin-left: -8px;
opacity: 0;
transform: scale(0.6);
transition: opacity .3s ease, transform .35s ease;
}
.li-engager:first-child { margin-left: 0; }
.li-engager.show { opacity: 1; transform: scale(1); }
/* Step caption block under stage */
.hiw-caption {
padding: 20px 28px 0;
text-align: center;
}
.hiw-caption .step-num {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
letter-spacing: 0.22em;
color: var(--accent-deep);
text-transform: uppercase;
font-weight: 600;
margin-bottom: 6px;
}
.hiw-caption h4 {
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700;
font-size: 19px;
margin: 0 0 6px;
letter-spacing: -0.01em;
color: var(--text);
}
.hiw-caption p {
color: var(--text-2);
font-size: 14.5px;
margin: 0;
max-width: 480px;
margin-inline: auto;
line-height: 1.55;
}
.hiw-caption p b { color: var(--text); font-weight: 600; }
/* Controls */
.hiw-controls {
padding: 22px 28px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.hiw-progress {
display: flex;
gap: 6px;
flex: 1;
}
.hiw-prog-dot {
height: 5px;
flex: 1;
background: var(--surface-3);
border-radius: 999px;
overflow: hidden;
position: relative;
}
.hiw-prog-dot::after {
content: "";
position: absolute;
inset: 0;
background: var(--accent);
border-radius: 999px;
transform: scaleX(0);
transform-origin: left;
transition: transform .35s ease;
}
.hiw-prog-dot.active::after { transform: scaleX(1); }
.hiw-prog-dot.done::after { transform: scaleX(1); }
.hiw-nav { display: flex; gap: 8px; }
.hiw-btn {
padding: 10px 18px;
border-radius: 10px;
font-size: 13.5px;
font-weight: 600;
border: none;
cursor: pointer;
font-family: inherit;
transition: background .12s, color .12s, opacity .12s;
}
.hiw-btn-ghost {
background: transparent;
color: var(--text-2);
}
.hiw-btn-ghost:hover { color: var(--text); background: var(--surface-2); }
.hiw-btn-ghost:disabled { opacity: 0.35; cursor: not-allowed; }
.hiw-btn-primary {
background: var(--accent);
color: #fff;
}
.hiw-btn-primary:hover { background: var(--accent-deep); }
@keyframes hiw-fill {
from { width: 0%; }
}
/* ════════════ MEDIA QUERIES for new components ════════════ */
@media (max-width: 1200px) {
.hero-row { grid-template-columns: 1fr; }
.monitoring-row { grid-template-columns: 1fr; }
.pipeline-strip {
grid-template-columns: 1fr;
gap: 14px;
}
.pipeline-strip .ps-label,
.pipeline-strip .ps-cta {
border: none;
padding: 0;
}
.pipeline-strip .ps-stages { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
.kpi-strip { grid-template-columns: repeat(2, 1fr); }
.grid-main { grid-template-columns: 1fr; }
.groups-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
.app { grid-template-columns: minmax(0, 1fr); }
aside.sidebar { display: none; }
main.main { padding: 20px; }
.focus-card { grid-template-columns: minmax(0, 1fr); }
.groups-grid { grid-template-columns: minmax(0, 1fr); }
.outreach-hero .oh-head { flex-wrap: wrap; }
.search { display: none; }
.palette-switch { top: auto; bottom: 14px; right: 12px; left: 12px; justify-content: center; }
.palette-switch button { padding: 6px 10px; font-size: 10.5px; }
.pipeline-strip { padding: 16px; }
.pipeline-strip .ps-head { flex-direction: column; align-items: flex-start; gap: 6px; }
.ps-bar { height: 26px; }
.ps-seg { padding: 0 8px; font-size: 12px; }
.ps-legend { gap: 12px 16px; font-size: 12px; }
.focus-todo { padding: 22px; min-height: auto; }
.focus-title { font-size: 21px; }
.focus-actions { flex-wrap: wrap; }
.focus-actions .btn { flex: 1; min-width: 0; }
/* sidebar toggle hidden when sidebar hidden */
.sidebar-toggle { display: none; }
}
/* ═══ Onboarding overlay (Community Dashboard Onboarding.html) ═══ */
.onb-overlay {
position: fixed; inset: 0; z-index: 500;
background: rgba(13, 8, 25, 0.55);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
display: flex; align-items: center; justify-content: center;
padding: 28px;
opacity: 0; pointer-events: none;
transition: opacity .55s ease;
}
.onb-overlay.peek { opacity: 0; pointer-events: none; }
.onb-overlay.shown { opacity: 1; pointer-events: auto; }
.onb-overlay.done { opacity: 0; pointer-events: none; transition: opacity .8s ease; }
.onb-peek-banner {
position: fixed; top: 24px; left: 50%;
transform: translateX(-50%) translateY(-12px);
background: var(--text); color: var(--bg);
border-radius: 999px;
padding: 10px 22px;
font-family: "JetBrains Mono", monospace;
font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
z-index: 510;
box-shadow: 0 20px 40px -10px rgba(0,0,0,0.4);
display: flex; align-items: center; gap: 10px;
opacity: 0;
transition: opacity .4s ease, transform .4s ease;
pointer-events: none;
}
.onb-peek-banner.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.onb-peek-banner.fade { opacity: 0; transform: translateX(-50%) translateY(-12px); }
.onb-peek-banner .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent-2);
animation: peek-pulse 1.4s infinite;
}
@keyframes peek-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.onb-modal {
width: 100%; max-width: 720px; max-height: 92vh;
background: var(--surface);
border-radius: 28px;
overflow: hidden;
box-shadow: 0 50px 120px -30px rgba(13,8,25,0.5), 0 30px 60px -20px rgba(106,76,241,0.25);
display: flex; flex-direction: column;
transform: translateY(20px) scale(0.97);
transition: transform .55s cubic-bezier(.16,1,.3,1);
}
.onb-overlay.shown .onb-modal { transform: translateY(0) scale(1); }
.onb-head {
padding: 22px 32px 18px;
border-bottom: 1px solid var(--border-soft);
background: var(--surface);
flex-shrink: 0;
}
.onb-head-row {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; margin-bottom: 14px;
}
.onb-brand {
display: inline-flex; align-items: center; gap: 10px;
font-family: "JetBrains Mono", monospace;
font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--text-2);
}
.onb-brand-mark {
width: 26px; height: 26px;
border-radius: 8px;
background: linear-gradient(135deg, var(--accent), var(--accent-deep));
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 800; font-size: 13px;
letter-spacing: 0;
}
.onb-step-count {
font-family: "JetBrains Mono", monospace;
font-size: 11.5px; color: var(--text-3);
letter-spacing: 0.18em; text-transform: uppercase;
}
.onb-step-count b { color: var(--text); }
.onb-stepper {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.onb-step-pip {
height: 4px; border-radius: 4px;
background: var(--surface-3);
overflow: hidden; position: relative;
}
.onb-step-pip::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
transform: scaleX(0); transform-origin: left;
transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.onb-step-pip.done::after, .onb-step-pip.active::after { transform: scaleX(1); }
.onb-step-labels {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
margin-top: 10px;
font-family: "JetBrains Mono", monospace;
font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--text-4);
}
.onb-step-labels .lbl.active { color: var(--accent-deep); font-weight: 600; }
.onb-step-labels .lbl.done { color: var(--text-3); }
.onb-body {
flex: 1; overflow-y: auto;
padding: 32px 36px; position: relative;
}
.onb-step { display: none; }
.onb-step.active {
display: block;
animation: onb-fade-in .45s cubic-bezier(.16,1,.3,1);
}
@keyframes onb-fade-in {
from { opacity: 0; transform: translateX(12px); }
to { opacity: 1; transform: translateX(0); }
}
.onb-step h2 {
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700; font-size: 26px;
letter-spacing: -0.02em;
margin: 0 0 8px;
color: var(--text); line-height: 1.2;
}
.onb-step h2 em { font-style: italic; color: var(--accent-deep); font-weight: 700; }
.onb-step .lead {
color: var(--text-2); font-size: 15px;
margin: 0 0 24px; line-height: 1.55; max-width: 540px;
}
.onb-step .lead b { color: var(--text); font-weight: 600; }
.onb-hero-block {
background: linear-gradient(160deg, var(--accent-soft) 0%, var(--surface) 100%);
border: 1px solid var(--accent-soft);
border-radius: 18px;
padding: 28px;
display: flex; align-items: center; gap: 22px;
margin-bottom: 24px;
}
.onb-hero-ico {
width: 64px; height: 64px;
border-radius: 16px; flex: 0 0 64px;
background: linear-gradient(135deg, var(--accent), var(--accent-deep));
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 14px 30px -10px var(--accent);
}
.onb-hero-block h3 {
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700; font-size: 18px;
letter-spacing: -0.01em;
margin: 0 0 4px; color: var(--text);
}
.onb-hero-block p { font-size: 13.5px; color: var(--text-2); margin: 0; line-height: 1.5; }
.onb-numbers {
list-style: none; padding: 0; margin: 0 0 24px;
display: flex; flex-direction: column; gap: 10px;
}
.onb-numbers li {
display: grid; grid-template-columns: 28px 1fr; gap: 14px;
align-items: flex-start; font-size: 14.5px; color: var(--text);
line-height: 1.5;
}
.onb-numbers li .n {
width: 26px; height: 26px;
border-radius: 50%;
background: var(--accent-soft); color: var(--accent-deep);
display: inline-flex; align-items: center; justify-content: center;
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700; font-size: 12.5px; flex-shrink: 0;
}
.onb-numbers li b { color: var(--text); font-weight: 600; }
.onb-verify {
background: var(--good-soft);
border: 1px solid color-mix(in srgb, var(--good) 50%, transparent);
border-radius: 12px;
padding: 14px 18px;
display: flex; align-items: center; gap: 12px;
color: var(--good); font-weight: 600; font-size: 14px;
opacity: 0; max-height: 0;
overflow: hidden;
padding-top: 0; padding-bottom: 0; border-width: 0;
margin-bottom: 0;
transition: max-height .4s ease, opacity .35s, padding .35s, border-width .35s, margin-bottom .35s;
}
.onb-verify.show {
opacity: 1; max-height: 80px;
padding-top: 14px; padding-bottom: 14px;
border-width: 1px;
margin-bottom: 22px;
}
.onb-verify svg { flex-shrink: 0; }
/* ── Redesigned Step 1 (Chrome extension) — 2026-05-28 ─────────────
Compact hero + inline install button + Chrome-required notice.
The bottom "Open Chrome Web Store / I've installed it" buttons
are gone; the install action lives inside the step. */
.onb-hero-block.onb-hero-compact {
padding: 18px 22px;
margin-bottom: 18px;
gap: 16px;
}
.onb-hero-block.onb-hero-compact .onb-hero-ico {
width: 44px; height: 44px; flex: 0 0 44px;
border-radius: 12px;
box-shadow: 0 8px 20px -8px var(--accent);
}
.onb-hero-block.onb-hero-compact h3 {
font-size: 17px; margin-bottom: 2px;
}
.onb-hero-block.onb-hero-compact p { font-size: 13px; }
.onb-install-action {
display: flex; flex-direction: column; align-items: stretch;
gap: 8px;
margin-bottom: 18px;
}
.onb-install-btn {
background: linear-gradient(135deg, var(--accent), var(--accent-deep));
color: #fff;
border: 0;
border-radius: 12px;
padding: 14px 20px;
font-family: "Inter", sans-serif;
font-size: 15px;
font-weight: 600;
display: inline-flex; align-items: center; justify-content: center;
gap: 10px;
cursor: pointer;
box-shadow: 0 12px 26px -10px var(--accent);
transition: transform .12s ease, box-shadow .12s ease;
}
.onb-install-btn:hover {
transform: translateY(-1px);
box-shadow: 0 16px 32px -12px var(--accent);
}
.onb-install-btn:disabled {
cursor: not-allowed; opacity: 0.5;
transform: none; box-shadow: none;
}
.onb-install-hint {
font-size: 12.5px; color: var(--text-3, #8a8fa6);
text-align: center;
}
.onb-install-status {
display: flex; align-items: center; justify-content: center;
gap: 10px;
background: var(--surface-2, #f6f4ee);
border: 1px dashed var(--border-soft, #e8e4d8);
border-radius: 12px;
padding: 12px 16px;
font-size: 13.5px; color: var(--text-2, #4d5168);
margin-bottom: 18px;
}
.onb-install-status-spinner {
width: 14px; height: 14px;
border: 2px solid var(--border, #e8e4d8);
border-top-color: var(--accent, #6a4cf1);
border-radius: 50%;
animation: cb-onb-spin 0.9s linear infinite;
}
@keyframes cb-onb-spin { to { transform: rotate(360deg); } }
.onb-need-chrome {
display: flex; align-items: flex-start; gap: 14px;
background: #fff6e9;
border: 1px solid #f1d2a0;
border-radius: 12px;
padding: 14px 16px;
margin-bottom: 18px;
}
.onb-need-chrome-icon {
width: 30px; height: 30px; flex: 0 0 30px;
border-radius: 999px;
background: #f1d2a0;
color: #7a4a10;
display: inline-flex; align-items: center; justify-content: center;
}
.onb-need-chrome-title {
font-weight: 700; font-size: 14.5px;
color: #7a4a10;
margin-bottom: 2px;
}
.onb-need-chrome-body { font-size: 13px; color: #7a4a10; line-height: 1.5; }
.onb-form { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.onb-field { display: flex; flex-direction: column; gap: 6px; }
.onb-field label {
font-size: 12px; color: var(--text-2);
font-weight: 600; letter-spacing: 0.04em;
text-transform: uppercase;
font-family: "JetBrains Mono", monospace;
}
.onb-field label .hint {
font-family: "Inter", sans-serif;
font-size: 12.5px; color: var(--text-3);
font-weight: 400; text-transform: none;
letter-spacing: 0; margin-left: 6px;
}
.onb-field .input, .onb-field .textarea {
width: 100%;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 11px 14px;
font-family: inherit; font-size: 14.5px;
color: var(--text); outline: none;
transition: border-color .12s, box-shadow .12s;
}
.onb-field .input:focus, .onb-field .textarea:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.onb-field .textarea { min-height: 80px; resize: vertical; line-height: 1.5; }
.onb-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.onb-gen { text-align: center; padding: 30px 0; }
.onb-gen-orb {
width: 88px; height: 88px;
margin: 0 auto 24px;
border-radius: 50%;
background: conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent-deep), var(--accent));
position: relative;
animation: gen-spin 2s linear infinite;
box-shadow: 0 22px 50px -10px rgba(106,76,241,0.4);
}
.onb-gen-orb::before {
content: ""; position: absolute; inset: 8px;
border-radius: 50%; background: var(--surface);
}
.onb-gen-orb::after {
content: ""; position: absolute; inset: 26px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
animation: gen-inner-pulse 1.6s ease-in-out infinite;
}
@keyframes gen-spin { to { transform: rotate(360deg); } }
@keyframes gen-inner-pulse {
0%, 100% { transform: scale(0.85); opacity: 0.8; }
50% { transform: scale(1.1); opacity: 1; }
}
.onb-gen h3 {
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700; font-size: 20px;
letter-spacing: -0.01em; margin: 0 0 8px;
color: var(--text);
}
.onb-gen p { color: var(--text-2); font-size: 14px; margin: 0; }
.onb-gen-steps {
margin: 22px auto 0; max-width: 340px;
display: flex; flex-direction: column; gap: 10px;
text-align: left;
}
.onb-gen-row {
display: flex; align-items: center; gap: 10px;
padding: 8px 14px; border-radius: 10px;
background: var(--surface-2);
font-size: 13px; color: var(--text-3); opacity: 0.5;
transition: opacity .3s, background .3s, color .3s;
}
.onb-gen-row.active {
background: var(--accent-soft); color: var(--accent-deep); opacity: 1;
}
.onb-gen-row.done {
background: var(--good-soft); color: var(--good); opacity: 1;
}
.onb-gen-row .icon {
width: 18px; height: 18px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.onb-gen-row.done .icon { background: var(--good); color: #fff; }
.onb-gen-row .icon svg { width: 11px; height: 11px; }
.onb-gen-row.active .icon { background: var(--accent); color: #fff; }
.onb-gen-row.active .icon svg { animation: gen-spin 1.2s linear infinite; }
.onb-review { display: grid; grid-template-columns: 1fr; gap: 18px; }
.onb-review-card {
background: var(--surface-2);
border: 1px solid var(--border-soft);
border-radius: 14px;
padding: 18px 20px;
}
.onb-review-card .rc-eyebrow {
font-family: "JetBrains Mono", monospace;
font-size: 10.5px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--accent-deep);
margin-bottom: 10px;
display: flex; align-items: center; gap: 8px;
}
.onb-review-card .rc-eyebrow .spark {
width: 16px; height: 16px; border-radius: 5px;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
}
.onb-review-card .rc-eyebrow .spark svg { width: 10px; height: 10px; }
.onb-name-row { display: flex; align-items: center; gap: 10px; }
.onb-name-row .input {
flex: 1;
font-family: "Bricolage Grotesque", sans-serif;
font-size: 17px; font-weight: 700;
letter-spacing: -0.015em; color: var(--text);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 11px 14px;
outline: none;
}
.onb-name-row .input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.onb-name-alts {
display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap;
}
.onb-name-alt {
background: var(--surface);
border: 1px solid var(--border);
color: var(--text-2);
padding: 6px 12px;
border-radius: 999px;
font-size: 12.5px; font-weight: 500;
cursor: pointer;
transition: background .12s, color .12s, border-color .12s;
}
.onb-name-alt:hover {
background: var(--accent-soft); color: var(--accent-deep);
border-color: var(--accent-soft);
}
.onb-name-alts .lbl {
font-family: "JetBrains Mono", monospace;
font-size: 10.5px; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--text-3);
align-self: center; margin-right: 4px;
}
.onb-logo-row {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 4px;
}
.onb-logo {
aspect-ratio: 1;
border-radius: 14px;
border: 2px solid transparent;
cursor: pointer;
overflow: hidden; position: relative;
background: var(--surface);
display: flex; align-items: center; justify-content: center;
transition: border-color .15s, transform .15s;
}
.onb-logo:hover { transform: translateY(-2px); }
.onb-logo.active {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.onb-logo.upload {
background: var(--surface-2);
border: 2px dashed var(--border-strong);
color: var(--text-3);
}
.onb-logo.upload:hover { border-color: var(--accent); color: var(--accent); }
.onb-logo .badge-active {
position: absolute; top: 6px; right: 6px;
background: var(--accent); color: #fff;
width: 20px; height: 20px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity .15s;
}
.onb-logo.active .badge-active { opacity: 1; }
.onb-logo .badge-active svg { width: 11px; height: 11px; }
.onb-summary {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px 16px;
font-size: 13.5px; line-height: 1.55;
color: var(--text-2);
max-height: 200px; overflow-y: auto;
}
.onb-summary b { color: var(--text); font-weight: 600; }
.onb-celebrate { text-align: center; padding: 30px 0 10px; }
.onb-celebrate .check {
width: 88px; height: 88px;
margin: 0 auto 22px;
border-radius: 50%;
background: linear-gradient(135deg, var(--good), #38b878);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 22px 50px -10px var(--good);
animation: cel-pop .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes cel-pop {
from { transform: scale(0.4); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.onb-celebrate h2 {
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 800; font-size: 28px;
letter-spacing: -0.02em;
margin: 0 0 10px; color: var(--text);
}
.onb-celebrate h2 em { font-style: italic; color: var(--accent-deep); font-weight: 800; }
.onb-celebrate p {
color: var(--text-2); font-size: 15px;
line-height: 1.5; margin: 0 auto 28px; max-width: 440px;
}
.onb-build-list {
margin: 0 auto; max-width: 360px;
display: flex; flex-direction: column; gap: 10px;
text-align: left;
}
.onb-foot {
padding: 18px 32px 20px;
border-top: 1px solid var(--border-soft);
display: flex; align-items: center; justify-content: space-between;
gap: 16px;
background: var(--surface-2);
flex-shrink: 0;
}
.onb-foot .left {
font-size: 12.5px; color: var(--text-3);
font-family: "JetBrains Mono", monospace;
letter-spacing: 0.04em;
}
.onb-foot .left b { color: var(--text); font-weight: 700; }
.onb-foot .actions { display: flex; gap: 10px; }
.onb-btn {
border: none;
padding: 12px 20px;
border-radius: 10px;
font-family: inherit; font-weight: 600; font-size: 14px;
cursor: pointer;
transition: background .15s, color .15s, transform .12s;
display: inline-flex; align-items: center; gap: 8px;
}
/* D4 — the same silent-words defect as .btn-ghost in app-shell.css. `.onb-btn`
sets border:none, so a ghost button here was transparent with no outline.
`.onb-btn-secondary` just below already carries 1px solid var(--border), so
this mirrors it rather than choosing a new treatment. */
.onb-btn-ghost { background: transparent; color: var(--text-2); border: 1px solid var(--border); }
.onb-btn-ghost:hover { color: var(--text); background: var(--surface); }
.onb-btn-secondary {
background: var(--surface); color: var(--text);
border: 1px solid var(--border);
}
.onb-btn-secondary:hover { background: var(--surface-3); }
.onb-btn-primary {
background: var(--accent); color: #fff;
box-shadow: 0 8px 22px -8px var(--accent);
}
.onb-btn-primary:hover { background: var(--accent-deep); transform: translateY(-1px); }
.onb-btn .arrow { transition: transform .15s; }
.onb-btn:hover .arrow { transform: translateX(2px); }
@media (max-width: 720px) {
.onb-modal { max-width: 100%; max-height: 96vh; border-radius: 22px; }
.onb-head, .onb-body, .onb-foot { padding-left: 22px; padding-right: 22px; }
.onb-step h2 { font-size: 22px; }
.onb-hero-block { padding: 22px; }
.onb-field-grid { grid-template-columns: 1fr; }
.onb-logo-row { grid-template-columns: repeat(2, 1fr); }
.onb-step-labels { display: none; }
}
.onb-field .input.invalid, .onb-field .textarea.invalid {
border-color: var(--danger);
box-shadow: 0 0 0 3px rgba(192,66,58,0.15);
}
.onb-field-error {
color: var(--danger);
font-size: 11.5px;
margin-top: 4px;
font-family: "Inter", sans-serif;
display: none;
}
.onb-field-error.show { display: block; }
/* OUTREACH-FIX-2 #2.6 — .odq-* Review Queue CSS removed.
The renderers now emit the approved-design classes
(.queue-item / .qi-info / .qi-actions / .skip-btn /
.approve-btn / .avatar-XX) which are defined above. */
/* OUTREACH-FIX-3 C.1/C.2/C.3/C.4 — Comments focus-mode design.
Lifted from docs/design/2026-05-24-sub-pages/Comments.html:40-280.
Replaces the 2-up grid with a single focus card + sidebar
(tip-card + Up Next list). wireComments injects the focus-wrap
skeleton, populates the first pending review as the big card,
and renders the remaining items as .up-next-item rows. */
.focus-wrap {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 22px;
align-items: start;
}
@media (max-width: 960px) { .focus-wrap { grid-template-columns: 1fr; } }
.review-card {
background: var(--surface, #fff);
border: 1px solid var(--border, #e8e4d8);
border-radius: 14px;
overflow: hidden;
}
.review-head {
padding: 22px 26px;
display: flex; align-items: center; gap: 14px;
border-bottom: 1px solid var(--border-soft, #f1e9d4);
}
.review-author { flex: 1; min-width: 0; }
.review-author .name {
font-family: "Bricolage Grotesque", "Inter", sans-serif;
font-weight: 700; font-size: 18px;
color: var(--text, #15172b);
letter-spacing: -0.01em;
display: flex; align-items: center; gap: 10px;
}
.review-author .meta {
color: var(--text-3, #8a8fa6);
font-size: 13px; margin-top: 2px;
display: flex; align-items: center; gap: 8px;
}
.review-author .meta a { color: var(--accent, #6a4cf1); font-weight: 500; }
.skip-actions { display: flex; gap: 6px; }
.skip-actions .btn { padding: 8px 14px; font-size: 13px; }
.post-wrap { padding: 24px 26px; }
.post-label {
font-family: "JetBrains Mono", monospace;
font-size: 11px; letter-spacing: 0.18em;
color: var(--text-3, #8a8fa6);
text-transform: uppercase;
margin-bottom: 10px;
display: flex; align-items: center; gap: 8px;
}
.post-label .line { flex: 1; height: 1px; background: var(--border-soft, #f1e9d4); }
.post-bubble {
background: linear-gradient(180deg, var(--accent-softer, #f4f0ff) 0%, #faf8ff 100%);
border: 1px solid var(--accent-soft, #ece6ff);
border-radius: 14px;
padding: 22px 24px;
color: var(--text, #15172b);
font-size: 14.5px; line-height: 1.62;
}
.post-bubble p { margin: 0 0 14px; }
.post-bubble p:last-child { margin-bottom: 0; }
.post-bubble-meta {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 12px; font-size: 12.5px; color: var(--text-3, #8a8fa6);
}
.post-bubble-meta a { color: var(--accent, #6a4cf1); font-weight: 500; }
.post-bubble-meta .when { font-family: "JetBrains Mono", monospace; }
.reply-block {
margin: 24px 26px 26px;
border: 1px solid var(--border-strong, #d8cdaf);
border-radius: 14px; padding: 22px 24px;
background: var(--surface-2, #faf9f4);
}
.reply-block.has-draft { background: var(--surface, #fff); }
.reply-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px;
}
.reply-eyebrow {
font-family: "JetBrains Mono", monospace;
font-size: 11px; letter-spacing: 0.18em;
color: var(--text-3, #8a8fa6); text-transform: uppercase;
display: inline-flex; align-items: center; gap: 8px;
}
.reply-textarea {
width: 100%; border: none; background: transparent; outline: none;
color: var(--text, #15172b);
font-family: "Inter", sans-serif;
font-size: 14.5px; line-height: 1.6;
min-height: 100px; resize: vertical;
}
.reply-foot {
display: flex; justify-content: space-between; align-items: center;
border-top: 1px solid var(--border-soft, #f1e9d4);
padding-top: 14px; margin-top: 12px;
}
.reply-meta {
font-size: 12.5px; color: var(--text-3, #8a8fa6);
display: flex; align-items: center; gap: 12px;
}
.reply-meta .ai-tag {
background: var(--accent-soft, #ece6ff); color: var(--accent-deep, #4a32b8);
font-size: 10.5px; font-weight: 600;
padding: 2px 7px; border-radius: 4px;
letter-spacing: 0.04em; text-transform: uppercase;
font-family: "JetBrains Mono", monospace;
}
.reply-actions { display: flex; gap: 8px; }
/* The draft footer (outreach review round 4, r1 N-10): "Will post as Ellen
Hartley" wrapped one or two words a line in a narrow column beside the
LinkedIn caveat. The words take the row when there is room and their own
line above the buttons when there is not; the name never breaks. */
.reply-foot { flex-wrap: wrap; gap: 12px; }
.reply-foot > .reply-meta { flex: 1 1 320px; min-width: 0; flex-wrap: wrap; gap: 4px 8px; line-height: 1.5; }
.reply-foot > .reply-meta > span:first-child { white-space: nowrap; }
.reply-foot > .reply-actions { flex: 0 0 auto; margin-left: auto; }
.tip-card {
background: linear-gradient(135deg, #2a1f6e 0%, #1e1646 100%);
color: #fff; border-radius: 14px;
padding: 22px; overflow: hidden; position: relative;
}
.tip-card .tip-eyebrow {
color: rgba(255,255,255,0.65);
font-family: "JetBrains Mono", monospace;
font-size: 10.5px; letter-spacing: 0.18em;
text-transform: uppercase; margin-bottom: 8px;
}
.tip-card h3 {
font-family: "Bricolage Grotesque", "Inter", sans-serif;
font-weight: 700; font-size: 17px;
margin: 0 0 6px; letter-spacing: -0.01em;
}
.tip-card p { color: rgba(255,255,255,0.72); font-size: 13px; margin: 0; }
.up-next {
background: var(--surface, #fff);
border: 1px solid var(--border, #e8e4d8);
border-radius: 14px; overflow: hidden;
}
.up-next .card-head {
padding: 14px 22px;
border-bottom: 1px solid var(--border-soft, #f1e9d4);
}
.up-next .card-title {
font-weight: 600; font-size: 14px; color: var(--text, #15172b);
display: flex; justify-content: space-between; align-items: center;
}
.up-next .card-title .count {
background: var(--surface-3, #ebe2cb); color: var(--text-2, #4d5168);
font-size: 11px; font-weight: 600;
padding: 2px 8px; border-radius: 999px;
}
.up-next .card-body { padding: 8px 0; }
.up-next-item {
display: grid; grid-template-columns: 36px 1fr; gap: 11px;
padding: 12px 22px; align-items: center;
border-bottom: 1px solid var(--border-soft, #f1e9d4);
transition: background .12s; cursor: pointer;
}
.up-next-item:last-child { border-bottom: none; }
.up-next-item:hover { background: var(--surface-2, #faf9f4); }
.up-next-item.active { background: var(--accent-soft, #ece6ff); }
.up-next-item .name { font-weight: 600; font-size: 13.5px; color: var(--text, #15172b); }
.up-next-item .snip {
color: var(--text-3, #8a8fa6); font-size: 12.5px; margin-top: 1px;
overflow: hidden; text-overflow: ellipsis;
display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.avatar-lg { width: 56px; height: 56px; font-size: 18px; }
.avatar-sm { width: 36px; height: 36px; font-size: 13px; }
/* ════════════ RELEVANCY CONTROLS (influencer match strength) ════════════ */
.mi-relevancy {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
margin: 2px 0 10px; padding: 8px 10px;
background: var(--surface-2, #faf9f4);
border: 1px solid var(--border-soft, #efece2);
border-radius: 10px;
font-size: 12.5px; color: var(--text-3, #8a8fa6);
}
.mi-rel-label b { color: var(--text, #15172b); font-weight: 600; }
.mi-rel-default { color: var(--text-3, #8a8fa6); font-size: 11.5px; }
.mi-rel-edit {
flex: none; border: 1px solid var(--border, #e8e4d8); background: var(--surface, #fff);
color: var(--accent, #6a4cf1); font-size: 12px; font-weight: 600;
padding: 5px 10px; border-radius: 8px; cursor: pointer; min-height: 30px;
}
.mi-rel-edit:hover { border-color: var(--accent, #6a4cf1); }
.mc-rel-default {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
margin: 14px 0 4px; padding: 12px 14px;
background: var(--surface-2, #faf9f4);
border: 1px solid var(--border, #e8e4d8);
border-radius: 12px;
}
.mc-rel-default:empty { display: none; }
.mc-rel-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mc-rel-ico { display: inline-flex; flex: none; color: var(--accent, #6a4cf1); }
.mc-rel-copy { min-width: 0; }
.mc-rel-title { font-size: 13.5px; color: var(--text, #15172b); font-weight: 500; }
.mc-rel-title b { font-weight: 700; }
.mc-rel-note { font-size: 12px; color: var(--text-3, #8a8fa6); margin-top: 2px; line-height: 1.35; }
.mc-rel-edit {
flex: none; border: 1px solid var(--accent, #6a4cf1); background: transparent;
color: var(--accent, #6a4cf1); font-size: 12.5px; font-weight: 600;
padding: 7px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap; min-height: 34px;
}
.mc-rel-edit:hover { background: rgba(106,76,241,0.08); }
@media (max-width: 480px) {
.mc-rel-default { flex-direction: column; align-items: stretch; gap: 10px; }
.mc-rel-edit { align-self: stretch; }
}
/* Slider editor modal — appended to , outside the page's token scope,
so it uses explicit colours rather than the dashboard CSS vars. */
.rel-editor-overlay {
position: fixed; inset: 0; z-index: 4000;
background: rgba(13, 8, 25, 0.5); backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center; padding: 20px;
}
/* ⚠️ THE SHEET FITS THE SCREEN, AND ONLY ITS MIDDLE SCROLLS.
🔻 Alex, 2026-08-27, on the product picker: *"it throws me out to that list
that can't scroll… I can't even get to the top or bottom of that."* Forty
products in a `choose` sheet made a box taller than the viewport with no
overflow rule anywhere, so both ends — including Cancel — were off-screen
and unreachable. The head and the foot are pinned; the body takes what is
left and scrolls, so the way out is always visible. */
.rel-editor {
background: #ffffff; color: #15172b;
width: 100%; max-width: 420px; border-radius: 16px; overflow: hidden;
box-shadow: 0 24px 60px rgba(13, 8, 25, 0.35);
font-family: inherit;
max-height: calc(100vh - 40px);
display: flex; flex-direction: column;
}
.rel-ed-head, .rel-ed-foot { flex: 0 0 auto; }
.rel-ed-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* The filter a long list gets. Sticky, so it stays put while the list moves. */
.cbs-filter {
position: sticky; top: 0; z-index: 1; background: #ffffff;
padding: 2px 0 8px;
}
.cbs-filter input {
width: 100%; padding: 9px 11px; font: inherit; font-size: 14px;
border: 1px solid var(--border, #e5e7eb); border-radius: 9px;
background: var(--surface, #fff); color: var(--text, #111827);
}
.cbs-filter input:focus {
outline: none; border-color: var(--accent, #6366f1);
box-shadow: 0 0 0 3px var(--accent-softer, rgba(99,102,241,.14));
}
.cbs-none { padding: 14px 2px; font-size: 13.5px; color: var(--text-3, #6b7280); }
/* Typed fields — `form` grew selects and numbers on 2026-08-27; they have to
look like the text inputs they sit beside. */
.cbs-f > select,
.cbs-f > textarea,
.cbs-f > input[type="number"] {
width: 100%; padding: 9px 11px; font: inherit; font-size: 14px;
border: 1px solid var(--border, #e5e7eb); border-radius: 9px;
background: var(--surface, #fff); color: var(--text, #111827);
}
.cbs-f > select:focus,
.cbs-f > textarea:focus,
.cbs-f > input[type="number"]:focus {
outline: none; border-color: var(--accent, #6366f1);
box-shadow: 0 0 0 3px var(--accent-softer, rgba(99,102,241,.14));
}
.cbs-f > textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
.cbs-f > .cbs-hint { font-size: 12px; color: var(--text-3, #6b7280); line-height: 1.4; }
.cbs-f > .cbs-err, .cbs-err { color: var(--danger, #b42318); font-size: 13px; line-height: 1.4; }
.cbs-err-all { margin: 0; padding: 0 20px 8px; }
.rel-ed-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
padding: 18px 20px 12px;
}
.rel-ed-head h3 { margin: 0; font-size: 16px; font-weight: 600; color: #15172b; }
.rel-ed-sub { margin-top: 4px; font-size: 12.5px; color: #6b7280; line-height: 1.45; }
.rel-ed-close {
flex: none; border: none; background: transparent; font-size: 22px; line-height: 1;
color: #9ca3af; cursor: pointer; padding: 0 2px;
}
.rel-ed-body { padding: 6px 20px 8px; }
.rel-ed-readout { text-align: center; margin: 4px 0 10px; }
.rel-ed-readout #rel-ed-val { font-size: 38px; font-weight: 700; color: #6a4cf1; }
.rel-ed-pct { font-size: 20px; font-weight: 600; color: #6a4cf1; margin-left: 2px; }
.rel-ed-slider {
-webkit-appearance: none; appearance: none; width: 100%; height: 8px;
border-radius: 6px; background: #ece9f7; outline: none; margin: 4px 0 6px;
}
.rel-ed-slider::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none; width: 28px; height: 28px;
border-radius: 50%; background: #6a4cf1; cursor: pointer; border: 3px solid #fff;
box-shadow: 0 2px 6px rgba(106,76,241,0.5);
}
.rel-ed-slider::-moz-range-thumb {
width: 28px; height: 28px; border-radius: 50%; background: #6a4cf1;
cursor: pointer; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(106,76,241,0.5);
}
.rel-ed-scale { display: flex; justify-content: space-between; font-size: 11px; color: #9ca3af; }
.rel-ed-hint { margin-top: 10px; font-size: 12.5px; color: #6b7280; text-align: center; min-height: 18px; }
.rel-ed-foot {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 14px 20px 18px;
}
.rel-ed-foot-right { display: flex; gap: 8px; }
.rel-ed-btn {
border-radius: 9px; font-size: 13.5px; font-weight: 600; padding: 9px 16px;
cursor: pointer; border: 1px solid transparent; min-height: 40px;
}
.rel-ed-ghost { background: #fff; border-color: #e5e7eb; color: #374151; }
.rel-ed-ghost:hover { border-color: #c9ccd3; }
.rel-ed-primary { background: #6a4cf1; color: #fff; }
.rel-ed-primary:hover { background: #5a3fd8; }
@media (max-width: 480px) {
.rel-ed-foot { flex-direction: column-reverse; align-items: stretch; }
.rel-ed-foot-right { justify-content: stretch; }
.rel-ed-foot-right .rel-ed-btn { flex: 1; }
.mi-relevancy { flex-wrap: wrap; }
}
/* ── CBSheet.form — the fields half of the platform's modal ─────────────
Added 2026-08-04 with `CBSheet.form` (js/ui-core.js). It reuses this file's
`.rel-editor` overlay, head and foot deliberately, so the ask-me-a-few-fields
modal and the are-you-sure modal cannot drift into looking like two products.
Only the body between them is new. */
/* CBSheet.choose — the list picker. Same visual language as .cbs-f, because a
sheet that picks and a sheet that types should not look like two products. */
.cbs-choose { display: grid; gap: 6px; padding-bottom: 4px; }
.cbs-c {
display: flex; align-items: flex-start; gap: 10px;
padding: 10px 12px;
border: 1px solid var(--border, #e5e7eb);
border-radius: 9px;
background: var(--surface, #fff);
cursor: pointer;
}
.cbs-c:hover { border-color: var(--accent, #6366f1); }
/* ⚠️ `display:flex` BEATS `[hidden]`, so the filter needs this or a row it
hides stays on screen. The classic hidden-attribute trap. */
.cbs-c[hidden] { display: none; }
.cbs-c > input { margin-top: 2px; flex: none; }
.cbs-c-main { display: grid; gap: 2px; font-size: 14px; color: var(--text, #111827); }
.cbs-c-note { font-size: 12.5px; color: var(--text-3, #6b7280); }
/* The checked row is the one that will happen — say so, rather than relying on
a 13px radio dot to carry it. */
.cbs-c:has(> input:checked) {
border-color: var(--accent, #6366f1);
background: var(--accent-softer, rgba(99,102,241,.08));
}
.cbs-form { display: grid; gap: 12px; padding-bottom: 4px; }
.cbs-f { display: grid; gap: 5px; }
.cbs-f > span { font-size: 12.5px; font-weight: 600; color: var(--text-2, #4b5563); }
.cbs-f > input {
width: 100%;
padding: 9px 11px;
border: 1px solid var(--border, #e5e7eb);
border-radius: 9px;
background: var(--surface, #fff);
color: var(--text, #111827);
font: inherit;
font-size: 14px;
}
.cbs-f > input:focus {
outline: none;
border-color: var(--accent, #6366f1);
box-shadow: 0 0 0 3px var(--accent-softer, rgba(99,102,241,.14));
}
/* ── §WATCHED-POSTS — a matching post being worked over 14 days ───────────────
Alex, 2026-09-21: "Obviously all this information needs to be surfaced on the
thing so it should be showing: this is the article that we're scraping, we're
going to scrape it again, we're going to monitor it for the next 14 days."
Deliberately built out of .mi-last-post's existing language (soft panel, mono
label, italic quote) rather than a new one: the influencer tile and the group
tile must keep reading as the same card. Nothing here changes .mi-card's
height at rest — the Posts-watched stat fills the third column of .mi-stats,
which has been an empty grid cell on both tiles since they shipped. */
.mi-watch {
background: var(--surface-2, #faf9f4);
border: 1px solid var(--border-soft, #efece2);
border-radius: 8px;
padding: 10px 12px;
}
.mi-watch + .mi-watch { margin-top: 8px; }
.mi-watch-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 8px; margin-bottom: 5px;
}
.mi-watch-state {
font-family: "JetBrains Mono", monospace;
font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
font-weight: 700; color: var(--text-3, #8a8fa6);
}
.mi-watch-score {
font-family: "JetBrains Mono", monospace;
font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-3, #8a8fa6); flex: none;
}
.mi-watch-text {
font-size: 11.5px; color: var(--text-2, #4d5168); line-height: 1.5;
font-style: italic;
}
.mi-watch-empty .mi-watch-text { font-style: normal; }
.mi-watch-empty .mi-watch-text b { color: var(--text, #15172b); font-weight: 600; }
.mi-watch-bar {
height: 4px; background: var(--surface-3, #f1eee5);
border-radius: 999px; margin: 9px 0 7px; overflow: hidden;
}
.mi-watch-bar i { display: block; height: 100%; border-radius: 999px; }
.mi-watch-meta {
font-family: "JetBrains Mono", monospace;
font-size: 9.5px; letter-spacing: 0.04em; color: var(--text-3, #8a8fa6);
}
.mi-watch-more {
margin-top: 7px; text-align: center;
font-family: "JetBrains Mono", monospace;
font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--text-3, #8a8fa6);
}
.mi-card.paused .mi-watch { opacity: 0.55; }
/* ═══════════════════════════════════════════════════════════════════════════
RECOMMENDED POSTS — tile + qualification drawer.
Built to the artefact agreed 2026-09-22, boards Main and Qualify. Colours and
spacing follow the influencer tile deliberately: two sources that look
different are two things a coach has to learn.
═══════════════════════════════════════════════════════════════════════════ */
.rp-bar-chip{background:var(--accent-soft,#efeaff);color:var(--accent-ink,#4a32b8);font-size:10px;font-weight:700;
padding:3px 9px;border-radius:999px;letter-spacing:.06em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;flex:none}
.rp-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.rp-row{background:var(--surface-2,#faf9f4);border:1px solid var(--border-1,#efece2);border-radius:10px;padding:12px}
.rp-row-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rp-score{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;font-weight:700;color:#1c8e5a}
.rp-days{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;letter-spacing:.1em;
text-transform:uppercase;color:var(--text-3,#8a8fa6)}
.rp-days.ending{color:#b87410}
.rp-text{font-size:12px;color:var(--text-2,#4d5168);line-height:1.55;margin-top:8px}
.rp-row-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;
padding-top:10px;border-top:1px solid var(--border-1,#efece2)}
.rp-counts{font-size:11.5px;color:var(--text-2,#4d5168)}
.rp-counts b{color:var(--text-1,#15172b)}
.rp-counts b.ok{color:#1c8e5a}
.rp-counts b.warn{color:#b87410}
.rp-see{flex:none;border:1px solid var(--border-2,#e8e4d8);background:#fff;color:var(--accent,#6a4cf1);
font-size:11.5px;font-weight:700;padding:6px 10px;border-radius:8px;cursor:pointer;min-height:32px;font-family:inherit}
.rp-see:hover{border-color:var(--accent,#6a4cf1)}
.rp-empty{background:var(--surface-2,#faf9f4);border:1px solid var(--border-1,#efece2);border-radius:10px;
padding:14px;font-size:12px;color:var(--text-2,#4d5168);line-height:1.6}
.rp-empty b{color:var(--text-1,#15172b)}
/* ── The drill-down ─────────────────────────────────────────────────────── */
.rp-drawer-overlay{position:fixed;inset:0;background:rgba(21,23,43,.45);z-index:1200;
display:flex;align-items:center;justify-content:center;padding:24px}
.rp-drawer{background:#fff;border-radius:16px;width:min(720px,100%);max-height:86vh;
display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(21,23,43,.28);overflow:hidden}
.rp-drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
padding:18px 20px;border-bottom:1px solid var(--border-1,#efece2)}
.rp-drawer-title{font-size:16px;font-weight:700;color:var(--text-1,#15172b);letter-spacing:-.01em}
.rp-drawer-sub{font-size:11.5px;color:var(--text-3,#8a8fa6);margin-top:4px;line-height:1.5}
.rp-chips{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.rp-chip{font-size:10px;font-weight:700;padding:3px 9px;border-radius:999px;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}
.rp-chip.ok{background:#e5f5ec;color:#14663f}
.rp-chip.mute{background:#f1efe6;color:#6c6f83}
.rp-chip.warn{background:#fdf0dd;color:#8a5a06}
.rp-close{flex:none;border:none;background:transparent;font-size:24px;line-height:1;color:var(--text-3,#8a8fa6);
cursor:pointer;padding:0 4px;min-height:44px;min-width:44px}
.rp-drawer-body{padding:16px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.rp-drawer-foot{padding:14px 20px;border-top:1px solid var(--border-1,#efece2);background:var(--surface-2,#faf9f4);
font-size:11.5px;color:var(--text-2,#4d5168);line-height:1.6}
.rp-drawer-foot b{color:var(--text-1,#15172b)}
.rp-person{background:var(--surface-2,#faf9f4);border:1px solid var(--border-1,#efece2);
border-left:3px solid #9a9db0;border-radius:10px;padding:12px}
.rp-person.qualified{border-left-color:#1c8e5a}
.rp-person.filtered{border-left-color:#9a9db0}
.rp-person.review{border-left-color:#d89a2b;background:#fffaf1;border-color:#f0e2c8}
.rp-person.rp-unsaved{outline:2px solid #d89a2b}
.rp-person-top{display:flex;align-items:flex-start;gap:10px}
.rp-avatar{width:36px;height:36px;border-radius:50%;background:var(--accent-soft,#efeaff);color:var(--accent-ink,#4a32b8);
flex:0 0 36px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.rp-person-main{flex-grow:1;min-width:0}
.rp-person-name{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-weight:700;font-size:13.5px}
.rp-verdict{flex:none;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;
font-weight:700;letter-spacing:.06em;color:var(--text-3,#8a8fa6)}
.rp-person.qualified .rp-verdict{color:#14663f}
/* The initials circle carries the verdict too, so a card is readable from the
left edge on a phone where the label has wrapped away. */
.rp-person.qualified .rp-avatar{background:#e5f5ec;color:#14663f}
.rp-person.filtered .rp-avatar{background:#f1efe6;color:#6c6f83}
.rp-person.review .rp-avatar{background:#fdf0dd;color:#8a5a06}
.rp-person.review .rp-verdict{color:#8a5a06}
.rp-person-head{font-size:11px;color:var(--text-3,#8a8fa6);margin-top:2px}
.rp-said{font-size:11px;color:var(--text-2,#4d5168);margin-top:7px;line-height:1.5}
.rp-said.mute{color:var(--text-3,#8a8fa6)}
/* column-gap, not the artefact's flat 5px: at the drawer's real width one
cell's value otherwise sits against the next cell's label and the four
answers read as two. */
.rp-answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
row-gap:5px;column-gap:28px;margin-top:10px;
padding-top:10px;border-top:1px solid var(--border-1,#efece2)}
.rp-answers>div{display:flex;justify-content:space-between;gap:6px;font-size:10.5px}
.rp-answers span{color:#6c6f83}
.rp-answers b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.rp-answers b.ok{color:#14663f}
.rp-answers b.warn{color:#9c2a2a}
/* The middle band is not a rejection. Painting "not sure" the same red as
"yes, a competitor" reads as a verdict the scorer did not give. */
.rp-answers b.unsure{color:#8a5a06}
.rp-why{font-size:11px;color:var(--text-2,#4d5168);margin-top:7px;line-height:1.5}
.rp-answers .mute{color:#9a9db0}
.rp-actions{display:flex;gap:8px;margin-top:10px}
.rp-approve,.rp-reject{flex:1;font-size:12px;font-weight:700;padding:8px 10px;border-radius:8px;
cursor:pointer;min-height:44px;font-family:inherit}
.rp-approve{border:none;background:#1c8e5a;color:#fff}
.rp-reject{border:1px solid var(--border-2,#e8e4d8);background:#fff;color:#6c6f83}
@media (max-width:640px){
.rp-drawer-overlay{padding:0;align-items:flex-end}
.rp-drawer{max-height:92vh;border-radius:16px 16px 0 0;width:100%}
.rp-answers{grid-template-columns:1fr}
}
/* ═══════════════════════════════════════════════════════════════════════════
DASHBOARD LAYOUT, 2026-09-23 (artefact "Outreach dashboard layout")
Needs you beside Today's outreach; Influence + Group, then Recommended posts +
People being checked, all in the monitoring-card style, each a FIXED height
that scrolls inside and folds to its header and summary strip.
═══════════════════════════════════════════════════════════════════════════ */
#page-outreach-dashboard .mon-card.fixed { display: flex; flex-direction: column; height: 620px; }
#page-outreach-dashboard .mon-card.fixed > .mi-grid,
#page-outreach-dashboard .mon-card.fixed > .mc-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#page-outreach-dashboard .mon-card.fixed > .mc-foot { margin-top: auto; }
/* The match-strength row sat flush to the card edge: premium cards have no
padding and every other child carries its own 24px side margin. */
#page-outreach-dashboard .mon-card.premium .mc-rel-default { margin: 14px 24px 4px; }
#page-outreach-dashboard .mon-card.collapsed { height: auto; }
#page-outreach-dashboard .mon-card.collapsed > :not(.mc-head):not(.mc-sub):not(.ms-summary) { display: none; }
#page-outreach-dashboard .mon-card.collapsed > .ms-summary { margin-bottom: 22px; }
#page-outreach-dashboard .mc-collapse {
width: 32px; height: 32px; border-radius: 8px; flex: none;
border: 1px solid var(--border, #e8e4d8); background: var(--surface, #fff); color: var(--text-2, #4d5168);
display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
#page-outreach-dashboard .mc-collapse:hover { border-color: var(--accent-soft); color: var(--accent-deep); }
#page-outreach-dashboard .mc-collapse svg { transition: transform .15s ease; }
#page-outreach-dashboard .mon-card.collapsed .mc-collapse svg { transform: rotate(180deg); }
#page-outreach-dashboard .mon-card.premium .mc-ico.found { background: #fce8f0; color: #b02a60; }
#page-outreach-dashboard .mon-card.premium .mc-ico.people { background: var(--accent-soft); color: var(--accent-deep); }
#page-outreach-dashboard .mc-line { margin: 12px 24px 0; font-size: 12.5px; color: var(--text-2, #4d5168); }
#page-outreach-dashboard .mc-line b { color: var(--text, #15172b); }
#page-outreach-dashboard .mc-tabs { display: flex; gap: 4px; margin: 14px 24px 0; border-bottom: 1px solid var(--border-soft, #efece2); }
#page-outreach-dashboard .mc-tab {
font: 600 13px "Inter", sans-serif; color: var(--text-3, #8a8fa6); background: none; border: 0;
border-bottom: 2px solid transparent; padding: 9px 10px 10px; margin-bottom: -1px; cursor: pointer;
}
#page-outreach-dashboard .mc-tab.on { color: var(--text, #15172b); border-bottom-color: var(--accent, #6a4cf1); }
#page-outreach-dashboard .mc-tab .n { font-family: "JetBrains Mono", monospace; font-size: 11px; margin-left: 3px; }
#page-outreach-dashboard .mc-tab.on .n { color: var(--accent, #6a4cf1); }
#page-outreach-dashboard .mc-scroll { padding: 12px 24px 10px; display: flex; flex-direction: column; gap: 8px; }
#page-outreach-dashboard .mc-bar-note { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--text-3, #8a8fa6); }
/* Recommended posts rows */
#page-outreach-dashboard .rp-row.clickable { cursor: pointer; }
#page-outreach-dashboard .rp-row.clickable:hover { border-color: var(--accent-soft); }
#page-outreach-dashboard .rp-state {
font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
font-weight: 700; color: var(--text-3, #8a8fa6);
}
#page-outreach-dashboard .rp-state.done { color: var(--good, #1c8e5a); }
#page-outreach-dashboard .rp-state.due { color: var(--accent-deep, #4a32b8); }
#page-outreach-dashboard .rp-match { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--text-3, #8a8fa6); }
#page-outreach-dashboard .rp-row .rp-text { font-style: italic; margin-top: 6px; }
#page-outreach-dashboard .rp-outcome { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--text-2, #4d5168); margin-top: 8px; line-height: 1.5; }
#page-outreach-dashboard .rp-see-link { color: var(--accent, #6a4cf1); font-weight: 700; white-space: nowrap; }
/* People being checked */
#page-outreach-dashboard .pc-day {
display: flex; justify-content: space-between; padding: 10px 0 2px;
font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
font-weight: 700; color: var(--text-3, #8a8fa6);
}
#page-outreach-dashboard .pc-person { display: flex; gap: 11px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--border-soft, #efece2); }
#page-outreach-dashboard .pc-av {
width: 32px; height: 32px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
background: var(--accent-soft, #efeaff); color: var(--accent-deep, #4a32b8); font-size: 11.5px; font-weight: 700;
}
#page-outreach-dashboard .pc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#page-outreach-dashboard .pc-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#page-outreach-dashboard .pc-name { font-size: 13.5px; font-weight: 600; color: var(--text, #15172b); }
#page-outreach-dashboard .pc-sub { font-size: 12px; color: var(--text-3, #8a8fa6); line-height: 1.45; overflow-wrap: anywhere; }
#page-outreach-dashboard .pc-post { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--text-3, #8a8fa6); }
#page-outreach-dashboard .pc-why { font-size: 12px; color: var(--text-2, #4d5168); line-height: 1.45; }
#page-outreach-dashboard .pc-when { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--text-3, #8a8fa6); white-space: nowrap; }
#page-outreach-dashboard .pc-more { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--text-3, #8a8fa6); padding: 8px 0 4px; }
#page-outreach-dashboard .pc-chip {
font-family: "JetBrains Mono", monospace; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
border-radius: 5px; padding: 2px 6px; margin-left: 6px; vertical-align: 1px;
}
#page-outreach-dashboard .pc-chip.ok { background: var(--good-soft, #e2f3ea); color: var(--good, #1c8e5a); }
#page-outreach-dashboard .pc-chip.warn { background: var(--warn-soft, #fbf0d9); color: #8a5a0c; }
#page-outreach-dashboard .pc-chip.mute { background: var(--surface-3, #f1eee5); color: var(--text-2, #4d5168); }
.od-how-step { display: flex; gap: 12px; align-items: flex-start; }
.od-how-step p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-2, #4d5168); }
.od-how-n {
flex: none; width: 24px; height: 24px; border-radius: 50%; background: #efeaff; color: #4a32b8;
font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center;
}
/* Needs you: the Review queue, beside Today's outreach, same height as its row */
#page-outreach-dashboard .needs-you {
display: flex; flex-direction: column; max-height: 720px; overflow: hidden;
border-color: var(--accent-soft, #efeaff);
}
#page-outreach-dashboard .needs-you #od-section-review { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
#page-outreach-dashboard .needs-you .queue-list { overflow-y: auto; min-height: 0; flex: 1 1 auto; }
#page-outreach-dashboard .needs-you .needs-head { flex-wrap: wrap; }
#page-outreach-dashboard .needs-you .card-title { display: flex; align-items: center; gap: 10px; }
#page-outreach-dashboard .mc-ico.needs {
width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
background: var(--warn-soft, #fbf0d9); color: #8a5a0c; flex: none;
}
/* the to-do card, drawn as a compact strip at the top of Needs you */
#page-outreach-dashboard .needs-you .focus-todo {
background: var(--warn-soft, #fbf0d9); color: var(--text, #15172b); min-height: 0;
border-radius: 0; padding: 12px 18px; border-bottom: 1px solid var(--border-soft, #efece2);
}
#page-outreach-dashboard .needs-you .focus-todo::before { display: none; }
#page-outreach-dashboard .needs-you .focus-head { margin-bottom: 6px; }
#page-outreach-dashboard .needs-you .focus-head .eyebrow,
#page-outreach-dashboard .needs-you .focus-head .pager { color: #8a5a0c; }
#page-outreach-dashboard .needs-you .btn-arrow { width: 26px; height: 26px; background: #fff; border-color: #f0dcae; color: #8a5a0c; }
#page-outreach-dashboard .needs-you .focus-body { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
#page-outreach-dashboard .needs-you .focus-icon { width: 30px; height: 30px; font-size: 15px; margin: 0; border-radius: 8px; flex: none; }
#page-outreach-dashboard .needs-you .focus-title { font-size: 15px; color: var(--text, #15172b); margin: 0 0 3px; }
#page-outreach-dashboard .needs-you .focus-title b { color: var(--accent-deep, #4a32b8); }
#page-outreach-dashboard .needs-you .focus-desc { font-size: 12.5px; color: var(--text-2, #4d5168); }
#page-outreach-dashboard .needs-you .focus-desc b { color: var(--text, #15172b); }
#page-outreach-dashboard .needs-you .focus-actions .btn { padding: 7px 12px; font-size: 12.5px; }
#page-outreach-dashboard .needs-you .focus-actions .btn-primary { background: var(--accent, #6a4cf1); color: #fff; }
#page-outreach-dashboard .needs-you .focus-actions .btn-ghost { background: #fff; color: var(--text-2, #4d5168); border: 1px solid #f0dcae; }
#page-outreach-dashboard .needs-you .focus-dots { display: none; }
/* people asking to join the community: one row, same amber strip as the to-do */
#page-outreach-dashboard .od-join-row {
display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
background: var(--warn-soft, #fbf0d9); border: 0; border-bottom: 1px solid var(--border-soft, #efece2);
padding: 12px 18px; min-height: 48px; font: inherit; color: var(--text, #15172b);
}
#page-outreach-dashboard .od-join-row:hover .od-join-cta { text-decoration: underline; }
#page-outreach-dashboard .od-join-ico {
width: 30px; height: 30px; border-radius: 8px; flex: none; display: inline-flex; align-items: center;
justify-content: center; background: #fff; color: #8a5a0c;
}
#page-outreach-dashboard .od-join-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
#page-outreach-dashboard .od-join-t { font-size: 14px; font-weight: 600; }
#page-outreach-dashboard .od-join-s { font-size: 12.5px; color: var(--text-2, #4d5168); }
#page-outreach-dashboard .od-join-cta { flex: none; font-size: 12.5px; font-weight: 600; color: var(--accent-deep, #4a32b8); }
@media (max-width: 760px) {
#page-outreach-dashboard .needs-you { order: -1; max-height: 560px; }
#page-outreach-dashboard .mon-card.fixed { height: 560px; }
#page-outreach-dashboard .mon-card.collapsed { height: auto; }
#page-outreach-dashboard .mc-tabs, #page-outreach-dashboard .mc-line { margin-left: 16px; margin-right: 16px; }
#page-outreach-dashboard .mc-scroll { padding: 10px 16px; }
#page-outreach-dashboard .mc-tab { min-height: 44px; padding: 10px 8px; }
#page-outreach-dashboard .mc-collapse { width: 44px; height: 44px; }
}
/* The four monitoring cards sit two to a row beside the app's two sidebars, so
at ordinary laptop widths each is ~440px and "How it works" plus the collapse
button pushed every title onto two lines. Below 1700px the button keeps its
icon (and its accessible name and tooltip) and drops the words. */
@media (max-width: 1700px) {
#page-outreach-dashboard .mon-card.fixed .mc-info { font-size: 0; gap: 0; width: 32px; height: 32px; padding: 0; justify-content: center; }
#page-outreach-dashboard .mon-card.fixed .mc-info svg { width: 15px; height: 15px; }
}
@media (max-width: 760px) {
#page-outreach-dashboard .mon-card.fixed .mc-info { width: 44px; height: 44px; }
}
/* Phone: the day-ahead row is a 4-column grid (time · icon · action · end),
and the end cell lays its state pill and Cancel side by side, which left the
action text ~57px wide, one word per line. Found on the 390px screenshot. On
a phone the decorative icon goes and the end cell stacks. */
@media (max-width: 760px) {
#page-outreach-dashboard .oh-item { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; padding: 12px 16px; }
#page-outreach-dashboard .oh-item > .oh-ico { display: none; }
#page-outreach-dashboard .oh-item > .oh-end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
#page-outreach-dashboard #rp-card.fixed, #page-outreach-dashboard #pc-card.fixed { height: 680px; }
#page-outreach-dashboard #rp-card.collapsed, #page-outreach-dashboard #pc-card.collapsed { height: auto; }
}
/* Who wrote a recommended post and which search phrase found it (2026-09-23). */
#page-outreach-dashboard .rp-source { font-size: 11.5px; color: var(--text-3, #8a8fa6); margin-top: 6px; }
/* ONE LINKEDIN, ONE COMMUNITY (2026-09-23) — the choice banner under the greeting. */
#od-content-root .odh-shared{display:flex;gap:12px;align-items:flex-start;margin:0 0 16px;padding:14px 16px;border-radius:12px;
background:var(--surface,#fff);border:1px solid var(--line,#dde1e8);color:var(--text,#1b2130)}
#od-content-root .odh-shared-ico{flex:none;color:var(--accent,#3b54c9);margin-top:2px}
#od-content-root .odh-shared-title{font-weight:700;margin-bottom:4px}
#od-content-root .odh-shared-body{margin:0;line-height:1.5;max-width:70ch}
#od-content-root .odh-shared-body a{color:var(--accent,#3b54c9);font-weight:600}
/* Deep link from the outreach report ("See all new connections"): the Member
column the link landed on, marked for a moment so the eye finds it. */
.ofn-column-focus,.dl-focus{box-shadow:0 0 0 3px var(--accent,#6a4cf1) !important;transition:box-shadow .6s}
/* Phone (outreach review round 1, 2026-09-28; r1 F8, r2 F7). At 390px the
Comments card was ~474px wide, so Skip forever and Approve & queue were cut
off, and the dashboard greeting went one word per line beside a status line
that ran off the right edge.
· The focus grid's single column was `1fr`, whose minimum is the card's
min-content width (a head and a foot that never wrap). minmax(0, 1fr)
lets it be the screen's width.
· The card's head and foot wrap, and their buttons share the full width.
· The greeting stacks: the status line sits under the words, not beside them. */
@media (max-width: 960px) {
.focus-wrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
.review-card { min-width: 0; }
.review-head { flex-wrap: wrap; padding: 16px; gap: 12px; }
.review-author .meta { flex-wrap: wrap; }
.skip-actions { width: 100%; }
.skip-actions .btn { flex: 1 1 0; min-width: 0; }
/* Round 5: "Never comment on " is longer than "Skip forever" was. */
.skip-actions .btn { white-space: normal; line-height: 1.25; }
.post-wrap { padding: 16px; }
.post-bubble { padding: 16px; }
.reply-block { margin: 16px; padding: 16px; }
.reply-head { flex-wrap: wrap; gap: 6px; }
.reply-foot { flex-wrap: wrap; gap: 10px; }
.reply-meta { flex-wrap: wrap; gap: 6px; }
.reply-actions { width: 100%; }
.reply-actions .btn { flex: 1 1 0; min-width: 0; }
.page-head.greeting { flex-direction: column; align-items: flex-start; gap: 8px; }
.page-head.greeting > div:first-child { width: 100%; }
h1.hello { font-size: 26px; }
.greeting-meta { flex-shrink: 1; max-width: 100%; text-align: left; }
.greeting-meta br { display: none; }
.greeting-meta .live { flex-wrap: wrap; }
}
/* Round 5 (r2 R5-7): on a phone the fixed menu button sat over the Comments
tabs. The tab row keeps clear of it; the tabs wrap under each other. */
@media (max-width: 600px) {
#page-outreach-comments .tabs-row { padding-right: 64px; flex-wrap: wrap; row-gap: 4px; }
}
/* ══ o9 (2026-09-29): THE OVERWHELM FIX ══════════════════════════════════════
Alex: "I want the outreach page fixed so that the overwhelm factor is dealt
with." Grace (round 8): "It needs 'Needs you' near the top and the
monitoring detail folded away." Top to bottom: greeting and one status
sentence, Needs you, the ladder as one line, the Mission as one line, a
compact pipeline, today, then everything else under "Show the details".
Layout and words only: every control is still here, folded.
⚠️ Scoped to #page-outreach-dashboard, not #od-content-root: the skeleton
closes that div straight after the old palette comment, so nothing on the
page is inside it. */
/* Needs you, at the top: the first three items with their buttons. */
#page-outreach-dashboard .needs-you { margin-bottom: 16px; max-height: none; }
#page-outreach-dashboard .needs-you #tab-comments-reviewqueue > .queue-item:nth-child(n+4) { display: none; }
#page-outreach-dashboard .needs-you .queue-list { max-height: 420px; }
#page-outreach-dashboard .od-needs-calm-line { display: none; margin: 0; padding: 2px 22px 18px; font-size: 15px; line-height: 1.5; color: var(--text-2, #4d5168); }
#page-outreach-dashboard .needs-you.od-needs-calm .od-needs-calm-line { display: block; }
#page-outreach-dashboard .needs-you.od-needs-calm .needs-head .tabs,
#page-outreach-dashboard .needs-you.od-needs-calm #odq-total,
#page-outreach-dashboard .needs-you.od-needs-calm .queue-list { display: none !important; }
/* The card's title comes first, then the to-do and join rows, then the lists
(the review shell's own children join the card's column for this). */
#page-outreach-dashboard .needs-you #od-section-review { display: contents; }
#page-outreach-dashboard .needs-you .needs-head { order: -2; }
#page-outreach-dashboard .needs-you .focus-todo,
#page-outreach-dashboard .needs-you #od-join-requests { order: -1; }
/* Nothing counted, but a to-do or a join request shows: those rows are the
card, and the calm line steps aside rather than say "nothing" above them. */
#page-outreach-dashboard .needs-you.od-needs-other .od-needs-calm-line { display: none; }
/* Today's outreach on its own row now that Needs you moved up. */
#page-outreach-dashboard .hero-row.od-hero-one { grid-template-columns: minmax(0, 1fr); }
/* The Mission as one line; the whole sentence on tap; Edit beside it. */
#page-outreach-dashboard .odh-mission {
display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap;
background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 12px;
padding: 9px 14px; margin: 0 0 18px; font-size: 14.5px; line-height: 1.5; color: #312e81;
}
#page-outreach-dashboard .odh-m-label { flex: none; font-weight: 600; color: #4f46e5; }
#page-outreach-dashboard .odh-m-text {
flex: 1 1 160px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
#page-outreach-dashboard .odh-mission.open .odh-m-text { white-space: normal; overflow: visible; }
#page-outreach-dashboard .odh-m-edit {
flex: none; background: none; border: 0; padding: 2px 4px; font: inherit; font-weight: 600;
color: #4f46e5; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
#page-outreach-dashboard .odh-m-from { flex-basis: 100%; font-size: 12.5px; color: #4f46e5; }
/* The pipeline, compact: its legend and definitions open with the details. */
#page-outreach-dashboard:not(.od-details-open) .pipeline-strip .ps-legend,
#page-outreach-dashboard:not(.od-details-open) .pipeline-strip .ps-defs { display: none; }
#page-outreach-dashboard .pipeline-strip { padding: 16px 20px; }
#page-outreach-dashboard:not(.od-details-open) .pipeline-strip .ps-bar { margin-bottom: 0; }
#page-outreach-dashboard .ps-head .ps-title .l { white-space: nowrap; }
@media (max-width: 600px) { #page-outreach-dashboard .ps-head .ps-title { flex-wrap: wrap; row-gap: 2px; } }
#page-outreach-dashboard:not(.od-details-open) .pipeline-strip .ps-head { margin-bottom: 10px; }
/* Show the details */
#page-outreach-dashboard .od-details-bar {
display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin: 4px 0 22px;
}
#page-outreach-dashboard .od-details-toggle {
display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
background: var(--surface, #fff); border: 1px solid var(--border, #e8e4d8); border-radius: 999px;
padding: 10px 18px; font: inherit; font-size: 15px; font-weight: 600; color: var(--accent-deep, #4a32b8);
}
#page-outreach-dashboard .od-details-toggle:hover { border-color: var(--accent, #6a4cf1); }
#page-outreach-dashboard .od-details-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
#page-outreach-dashboard .od-details-what { font-size: 14px; color: var(--text-3, #8a8fa6); }
#page-outreach-dashboard .od-details[hidden] { display: none; }
/* Labels a 56-year-old can read: sentence case, normal size, the body font.
The brand headings (the greeting, card titles, the big numbers) are unchanged. */
#page-outreach-dashboard .ps-head .ps-title .l,
#page-outreach-dashboard .focus-head .eyebrow,
#page-outreach-dashboard .ms-summary .ss-stat .l,
#page-outreach-dashboard .mi-status,
#page-outreach-dashboard .mi-stat .l,
#page-outreach-dashboard .mi-last-post .lp-label,
#page-outreach-dashboard .mi-watch-state,
#page-outreach-dashboard .mi-watch-score,
#page-outreach-dashboard .mi-watch-more,
#page-outreach-dashboard .rp-days,
#page-outreach-dashboard .rp-state,
#page-outreach-dashboard .pc-day,
#page-outreach-dashboard .pc-chip,
#page-outreach-dashboard .pc-when,
#page-outreach-dashboard .pc-more,
#page-outreach-dashboard .oh-state,
#page-outreach-dashboard .oh-stages .oh-stage-lead,
#page-outreach-dashboard .qi-comment .draft-tag,
#page-outreach-dashboard .needs-you .card-title .count,
#page-outreach-dashboard .focus-head .pager .count,
#page-outreach-dashboard .outreach-hero h2 .live-pill,
#page-outreach-dashboard .mon-card.premium .mc-tag,
#page-outreach-dashboard .mon-row .mr-name .filter-tag,
#page-outreach-dashboard .mon-row .mr-leads-label,
#page-outreach-dashboard .greeting-meta {
font-family: "Inter", system-ui, -apple-system, sans-serif; text-transform: none; letter-spacing: normal;
}
#page-outreach-dashboard .ps-head .ps-title .l,
#page-outreach-dashboard .focus-head .eyebrow,
#page-outreach-dashboard .ms-summary .ss-stat .l,
#page-outreach-dashboard .mi-stat .l,
#page-outreach-dashboard .mi-last-post .lp-label,
#page-outreach-dashboard .oh-stages .oh-stage-lead,
#page-outreach-dashboard .greeting-meta { font-size: 13px; }
#page-outreach-dashboard .mi-status, #page-outreach-dashboard .mi-watch-state, #page-outreach-dashboard .mi-watch-score, #page-outreach-dashboard .mi-watch-more,
#page-outreach-dashboard .rp-days, #page-outreach-dashboard .rp-state, #page-outreach-dashboard .pc-day, #page-outreach-dashboard .pc-chip,
#page-outreach-dashboard .pc-when, #page-outreach-dashboard .pc-more, #page-outreach-dashboard .oh-state, #page-outreach-dashboard .qi-comment .draft-tag,
#page-outreach-dashboard .needs-you .card-title .count, #page-outreach-dashboard .focus-head .pager .count {
font-size: 12px;
}
/* o9 (O16): the floating menu button tucks away while the dashboard scrolls
down on a phone, so it never sits over the words (outreach.js
_odHamburgerTuck); it comes back on the first scroll up. */
.hamburger-btn { transition: transform .2s ease; }
.hamburger-btn.od-hb-tucked { transform: translateY(-80px); }
/* o9 (O18): Pause all, beside the status sentence. */
#page-outreach-dashboard .od-status-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
#page-outreach-dashboard .od-pause-btn {
font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; border-radius: 999px; padding: 6px 14px;
background: var(--surface, #fff); color: var(--text-2, #4d5168); border: 1px solid var(--border, #e8e4d8);
}
#page-outreach-dashboard .od-pause-btn:hover { border-color: #d8d3c2; color: var(--text, #15172b); }
#page-outreach-dashboard .od-pause-btn.resume { background: #fef3c7; color: #8a5a0c; border-color: #efd9ad; }
#page-outreach-dashboard .od-pause-btn[disabled] { opacity: .7; cursor: default; }
#page-outreach-dashboard .od-pause-msg { font-size: 13.5px; color: var(--text-2, #4d5168); }