/* Karim J. Jazzar · Brand System v4
Three colors. Two surfaces. One accent.
White canvas, ink text, indigo accent. Editorial restraint. */
:root {
/* The whole system */
--paper: #FFFFFF;
--mist: #F5F5F7;
--ink: #111114;
--slate: #6B7280;
--slate-soft: #9CA3AF;
--indigo: #4F46E5;
--indigo-deep: #3730A3;
--indigo-mist: #EEF0FF;
/* Borders */
--border: #E5E5EB;
--border-strong: #D1D5DB;
/* Status only (kept ultra-restrained for badges) */
--red: #B0413E;
--red-bg: #FDECEC;
--green: #1F5C2E;
--green-bg: #E3F0E6;
--amber: #6A4810;
--amber-bg: #FBEFD9;
/* Typography */
--font-serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
--radius: 8px;
--radius-lg: 14px;
--radius-sm: 4px;
--radius-pill: 999px;
--container: 1180px;
}
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Inter:wght@400;500;600;700&display=swap");
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
font-family: var(--font-sans);
font-weight: 400;
font-size: 16px;
line-height: 1.5;
color: var(--ink);
background: var(--paper);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 {
color: var(--ink);
font-weight: 500;
letter-spacing: -0.015em;
margin: 0 0 0.6em 0;
line-height: 1.1;
}
h1 { font-size: 56px; letter-spacing: -0.025em; }
h2 { font-size: 36px; letter-spacing: -0.02em; }
h3 { font-size: 22px; }
h4 { font-size: 16px; font-weight: 600; letter-spacing: -0.005em; }
p { margin: 0 0 1em 0; color: var(--slate); }
strong { color: var(--ink); font-weight: 600; }
a { color: var(--indigo); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--indigo-deep); }
/* ===== Eyebrow ===== */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--indigo);
margin-bottom: 14px;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--indigo); }
/* ===== Layout ===== */
.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.container-tight { max-width: 760px; margin: 0 auto; padding: 0 32px; }
section { padding: 80px 0; }
@media (max-width: 900px) {
h1 { font-size: 38px; }
h2 { font-size: 28px; }
section { padding: 56px 0; }
.container { padding: 0 20px; }
}
/* ===== Topbar ===== */
.topbar {
position: sticky; top: 0; z-index: 50;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--border);
}
.topbar-inner {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 32px;
max-width: var(--container); margin: 0 auto;
}
.brand {
font-size: 16px; font-weight: 600; color: var(--ink);
letter-spacing: -0.01em; text-decoration: none;
}
.brand .dot { color: var(--indigo); margin: 0 2px; }
.nav { display: flex; gap: 28px; align-items: center; }
.nav a { color: var(--slate); font-size: 14px; font-weight: 500; text-decoration: none; }
.nav a:hover { color: var(--ink); }
/* Button overrides inside nav (otherwise .nav a wins on specificity) */
.nav a.btn-primary { color: #FFFFFF; }
.nav a.btn-primary:hover { color: #FFFFFF; }
.nav a.btn-ghost { color: var(--ink); }
@media (max-width: 720px) {
.nav a:not(.btn) { display: none; }
}
/* ===== Buttons ===== */
.btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 22px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
border-radius: var(--radius-pill);
border: 1px solid transparent;
cursor: pointer;
transition: all 0.15s ease;
text-decoration: none;
line-height: 1;
white-space: nowrap;
}
.btn-primary { background: var(--indigo); color: #FFFFFF; }
.btn-primary:hover { background: var(--indigo-deep); color: #FFFFFF; }
.btn-primary * { color: #FFFFFF; }
.btn-ghost { background: var(--paper); color: var(--ink); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn-ghost-dark { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,0.3); }
.btn-ghost-dark:hover { background: rgba(255,255,255,0.08); color: #FFFFFF; border-color: #FFFFFF; }
.btn-sm { padding: 9px 16px; font-size: 13px; }
.btn-lg { padding: 16px 28px; font-size: 15px; }
/* ===== Cards ===== */
.card {
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 24px;
transition: border-color 0.15s ease;
}
.card:hover { border-color: var(--border-strong); }
.card-mist { background: var(--mist); border-radius: var(--radius-lg); padding: 24px; }
.card-dark { background: var(--ink); color: #FFFFFF; border-radius: var(--radius-lg); padding: 24px; }
.card-dark h4 { color: #FFFFFF; }
.card-dark p { color: rgba(255,255,255,0.7); }
.card-flush { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-lg); }
/* ===== Grid ===== */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
/* ===== Badges ===== */
.badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
border-radius: var(--radius-pill);
background: var(--mist);
color: var(--ink);
}
.badge-indigo { background: var(--indigo-mist); color: var(--indigo-deep); }
.badge-red { background: var(--red-bg); color: #7A1E1C; }
.badge-amber { background: var(--amber-bg); color: var(--amber); }
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* ===== Forms ===== */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.label { font-size: 13px; font-weight: 500; color: var(--ink); }
.label-hint { font-size: 12px; color: var(--slate); }
.input, .textarea, .select {
font-family: var(--font-sans);
font-size: 14px;
padding: 11px 14px;
background: var(--paper);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
color: var(--ink);
outline: none;
transition: border-color 0.15s ease;
width: 100%;
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--indigo); }
.textarea { min-height: 100px; resize: vertical; line-height: 1.5; }
/* ===== Likert / pickers ===== */
/* Legacy boxed picker. Kept for any non-assessment use. */
.pick {
flex: 1; min-width: 0;
padding: 10px 8px;
background: var(--paper);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
cursor: pointer;
text-align: center;
transition: all 0.12s ease;
color: var(--ink);
font-family: var(--font-sans);
font-size: 13px;
}
.pick:hover { border-color: var(--indigo); background: var(--indigo-mist); }
.pick.active { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.pick .n { display: block; font-size: 16px; font-weight: 600; }
.pick .lbl { display: block; font-size: 10px; margin-top: 2px; color: var(--slate); }
.pick.active .lbl { color: rgba(255,255,255,0.7); }
/* ===== Score ring / heatmap ===== */
.score-ring {
display: inline-flex; align-items: center; justify-content: center;
width: 120px; height: 120px; border-radius: 50%;
background: var(--mist); border: 2px solid var(--ink);
flex-direction: column;
}
.score-ring .v { font-family: var(--font-serif); font-size: 42px; color: var(--ink); font-weight: 500; line-height: 1; }
.score-ring .lbl { font-size: 10px; color: var(--slate); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 4px; }
.heatcell { padding: 14px; border-radius: var(--radius-sm); text-align: center; font-size: 12px; font-weight: 500; }
.heatcell.red { background: var(--red-bg); color: #7A1E1C; }
.heatcell.amber { background: var(--amber-bg); color: var(--amber); }
.heatcell.green { background: var(--green-bg); color: var(--green); }
.heatcell .v { font-family: var(--font-serif); font-size: 24px; font-weight: 600; display: block; margin-bottom: 4px; color: inherit; }
/* ===== Progress ===== */
.progress { width: 100%; height: 4px; background: var(--mist); border-radius: 2px; overflow: hidden; }
.progress-bar { height: 100%; background: var(--indigo); transition: width 0.3s ease; }
/* ===== Stepper ===== */
.stepper { display: flex; gap: 0; margin-bottom: 24px; }
.step { flex: 1; padding: 10px 0; border-bottom: 2px solid var(--border); color: var(--slate); font-size: 12px; font-weight: 500; }
.step.active { border-color: var(--ink); color: var(--ink); }
.step.done { border-color: var(--indigo); color: var(--indigo); }
/* ===== Tables ===== */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 600; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); padding: 12px 16px; border-bottom: 1px solid var(--border); }
td { padding: 16px; border-bottom: 1px solid var(--border); color: var(--ink); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--mist); }
/* ===== Hero ===== */
.hero {
border-bottom: 1px solid var(--border);
}
/* ===== Hero portrait, editorial framing =====
Karim v1 feedback wanted the portrait "more embedded, more beautiful".
The previous version pushed it into a full-bleed grey panel that
floated awkwardly at the page edge.
This treatment instead:
1. Drops the full-bleed mist column so the right side stays the
same paper background as the page.
2. Sizes the portrait as a proper editorial card (4:5 aspect ratio,
capped width) sitting inside the grid column with breathing
room.
3. Adds a thin indigo accent block offset down-right behind the
portrait, so the photo feels anchored by a brand element rather
than alone on the page.
4. Adds a layered soft shadow for depth: a wide ambient shadow plus
a subtle indigo-tinted shadow that picks up the brand color, plus
a hairline outline so the edges read crisp against light
backgrounds.
5. Hairline corner radius keeps the portrait disciplined, not
playful. */
.hero-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
align-items: center;
gap: 64px;
min-height: 0;
padding: 64px 0;
}
.hero-copy { padding: 0; display: flex; flex-direction: column; justify-content: center; }
.hero-img {
position: relative;
width: 100%;
max-width: 380px;
aspect-ratio: 4 / 5;
margin-left: auto;
background: transparent;
border-left: none;
overflow: visible;
/* perspective lets the inner card tilt in 3D when JS sets --rx / --ry */
perspective: 1200px;
}
/* Indigo accent block behind the portrait, offset down-right. Gives the
photo something to sit against, in brand color, instead of floating
alone. Animates to a deeper offset on hover so the whole composition
reacts as one piece. */
.hero-img::before {
content: "";
position: absolute;
inset: 18px -18px -18px 18px;
background: var(--indigo-mist, #EEF2FF);
border-radius: 14px;
z-index: 0;
transition: inset 0.5s cubic-bezier(0.22, 1, 0.36, 1),
background 0.4s ease;
}
.hero-img:hover::before {
inset: 24px -24px -24px 24px;
background: rgba(79, 70, 229, 0.16);
}
.hero-img-inner {
position: absolute;
inset: 0;
z-index: 1;
/* Path is relative to this CSS file (which lives inside /assets/), so it points
to /assets/karim.jpg correctly. */
background-image: url("./karim.jpg");
background-size: cover;
background-position: center 30%;
background-color: var(--mist);
border-radius: 14px;
box-shadow:
0 24px 48px -20px rgba(17, 17, 20, 0.20),
0 12px 28px -12px rgba(79, 70, 229, 0.18),
0 0 0 1px rgba(17, 17, 20, 0.06);
/* CSS variables driven by the mousemove handler in index.html. They
default to 0deg so without JS / on touch the portrait stays flat. */
transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
transform-style: preserve-3d;
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
background-position 0.35s ease-out;
will-change: transform, box-shadow;
}
.hero-img:hover .hero-img-inner {
box-shadow:
0 36px 72px -28px rgba(17, 17, 20, 0.28),
0 18px 40px -16px rgba(79, 70, 229, 0.28),
0 0 0 1px rgba(17, 17, 20, 0.08);
}
@media (max-width: 900px) {
.hero-img { max-width: 320px; margin-left: 0; margin-right: auto; perspective: none; }
}
@media (prefers-reduced-motion: reduce) {
.hero-img-inner { transition: none; transform: none; }
.hero-img::before { transition: none; }
}
/* Dark-canvas variant for the portrait card. Used on book.html's closing
"ready to realign" band where the background is var(--ink). The indigo
accent block reads as a soft glow rather than a light pastel block, and
the inner card gets a slightly stronger indigo-tinted shadow so it
pops against the dark ink. */
.hero-img--dark::before {
background: rgba(79, 70, 229, 0.16);
}
.hero-img--dark:hover::before {
background: rgba(79, 70, 229, 0.28);
}
.hero-img--dark .hero-img-inner {
box-shadow:
0 30px 60px -22px rgba(0, 0, 0, 0.55),
0 16px 36px -14px rgba(79, 70, 229, 0.45),
0 0 0 1px rgba(255, 255, 255, 0.08);
}
.hero-img--dark:hover .hero-img-inner {
box-shadow:
0 40px 80px -26px rgba(0, 0, 0, 0.6),
0 22px 48px -18px rgba(79, 70, 229, 0.6),
0 0 0 1px rgba(255, 255, 255, 0.12);
}
.hero h1 .accent {
color: var(--indigo);
position: relative;
white-space: nowrap;
}
.hero h1 .accent::after {
content: "";
position: absolute; left: 0; right: 0; bottom: -4px;
height: 3px; background: var(--indigo); border-radius: 2px;
}
.hero .lede { font-size: 17px; color: var(--slate); max-width: 44ch; margin: 18px 0 28px; line-height: 1.55; }
@media (max-width: 900px) {
.hero-grid { grid-template-columns: 1fr; min-height: 0; }
.hero-copy { padding: 48px 0; }
.hero-img { min-height: 360px; border-left: none; border-top: 1px solid var(--border); }
}
/* ===== Fact strip ===== */
.factstrip { border-top: 1px solid var(--border); padding-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fact .v { font-family: var(--font-serif); font-size: 28px; color: var(--ink); margin: 0; font-weight: 500; line-height: 1; }
.fact .lbl { font-size: 11px; color: var(--slate); margin: 6px 0 0; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
/* ===== Trust band ===== */
.trustband {
background: var(--mist);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 32px 0;
}
.trust-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; max-width: var(--container); margin: 0 auto; padding: 0 32px; align-items: center; }
.trust-label { font-size: 11px; color: var(--slate); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; margin: 0; }
.trust-item { font-size: 13px; color: var(--ink); font-weight: 500; margin: 0; }
.logo-mark { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.logo-mark .logo-img { display: block; max-width: 160px; max-height: 48px; width: auto; height: auto; object-fit: contain; }
.logo-mark .logo-text { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; margin: 0; line-height: 1.2; }
.logo-mark .logo-ctx { font-size: 11px; color: var(--slate); margin: 0; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
@media (max-width: 720px) {
.trust-inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.logo-mark .logo-img { max-width: 120px; max-height: 36px; }
}
/* ===== Service grid (4 cards) ===== */
.service { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--paper); display: flex; flex-direction: column; min-height: 240px; }
.service .ic {
width: 36px; height: 36px; border-radius: 8px;
background: var(--indigo-mist); color: var(--indigo);
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 14px;
margin-bottom: 16px;
}
.service h3 { font-size: 17px; margin: 0 0 6px; color: var(--ink); }
.service p { font-size: 13px; color: var(--slate); margin: 0 0 16px; flex: 1; line-height: 1.5; }
.service .meta { font-size: 12px; color: var(--ink); font-weight: 600; margin-top: auto; }
.service.featured { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.service.featured h3 { color: #FFFFFF; }
.service.featured p { color: rgba(255,255,255,0.65); }
.service.featured .ic { background: rgba(255,255,255,0.1); color: #FFFFFF; }
.service.featured .meta { color: #FFFFFF; }
/* ===== Footer ===== */
.footer {
background: var(--ink); color: #FFFFFF;
padding: 56px 0 28px;
}
.footer h4 { color: #FFFFFF; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; font-weight: 600; }
.footer p, .footer a { color: rgba(255,255,255,0.7); font-size: 14px; line-height: 1.7; }
.footer a:hover { color: #FFFFFF; }
.footer .small { font-size: 12px; color: rgba(255,255,255,0.5); }
.footer hr { border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 32px 0 16px; }
/* ===== Sidebar (portal & admin) ===== */
.app-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar { background: var(--ink); color: rgba(255,255,255,0.8); padding: 22px 0; }
.sidebar .brand-block { padding: 0 20px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.sidebar .brand-block .brand { color: #FFFFFF; }
.sidebar .nav-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 20px;
color: rgba(255,255,255,0.7);
font-size: 13px;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: all 0.12s ease;
}
.sidebar .nav-item:hover { background: rgba(255,255,255,0.04); color: #FFFFFF; }
.sidebar .nav-item.active { background: rgba(255,255,255,0.06); color: #FFFFFF; border-left: 3px solid var(--indigo); padding-left: 17px; }
.sidebar .group-label { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.4); padding: 22px 20px 6px; font-weight: 600; }
/* Secondary nav group for settings / account: notifications, integrations,
sign out. Visually distinct from the work nav so it reads as parameters,
not workspaces. Hair-thin top rule, slightly smaller text, muted color. */
.sidebar .nav-sub-group {
border-top: 1px solid rgba(255,255,255,0.08);
padding-top: 6px;
margin-top: 4px;
}
.sidebar .nav-item-sub {
font-size: 12px;
color: rgba(255,255,255,0.55);
font-weight: 400;
padding-top: 8px;
padding-bottom: 8px;
}
.sidebar .nav-item-sub:hover { color: rgba(255,255,255,0.9); }
.sidebar .nav-item-sub.active {
background: transparent;
color: #FFFFFF;
border-left-width: 3px;
font-weight: 500;
}
.sidebar-avatar { display: flex; align-items: center; gap: 10px; padding: 0 20px 18px; }
.sidebar-avatar img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--mist); }
.main { background: var(--paper); padding: 32px 40px; overflow-y: auto; }
.main-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; gap: 16px; flex-wrap: wrap; }
@media (max-width: 900px) {
.app-shell { grid-template-columns: 1fr; }
.sidebar { display: none; }
.main { padding: 24px; }
}
/* ===== Kanban (admin pipeline) ===== */
.kanban {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(200px, 1fr);
gap: 12px;
overflow-x: auto;
padding-bottom: 8px;
}
.kanban::-webkit-scrollbar { height: 8px; }
.kanban::-webkit-scrollbar-track { background: #F4F4F5; border-radius: 4px; }
.kanban::-webkit-scrollbar-thumb { background: #D4D4D8; border-radius: 4px; }
.kanban::-webkit-scrollbar-thumb:hover { background: #A1A1AA; }
.kanban-col { background: var(--mist); border-radius: var(--radius); padding: 12px; min-height: 380px; }
.kanban-col h4 { margin: 0 0 10px 0; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.kanban-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 8px; cursor: pointer; transition: all 0.12s ease; }
.kanban-card:hover { border-color: var(--ink); }
.kanban-card .ttl { font-weight: 500; color: var(--ink); margin-bottom: 2px; font-size: 13px; }
.kanban-card .sub { font-size: 11px; color: var(--slate); margin: 0; }
.kanban-col-count { background: var(--paper); padding: 1px 7px; border-radius: var(--radius-pill); font-size: 10px; color: var(--slate); margin-left: 4px; }
/* ===== Utility ===== */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; } .mt-12 { margin-top: 48px; }
.mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; }
.text-sm { font-size: 13px; } .text-xs { font-size: 12px; } .text-lg { font-size: 17px; }
.text-center { text-align: center; }
.w-full { width: 100%; }
.muted { color: var(--slate); }
.serif { font-family: var(--font-serif); }
.divider { height: 1px; background: var(--border); border: none; margin: 0; }
/* ===== CRM components ===== */
.crm-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.crm-tab {
background: transparent; border: none; padding: 12px 18px;
font-family: var(--font-sans); font-size: 14px; font-weight: 500;
color: var(--slate); cursor: pointer;
border-bottom: 2px solid transparent; margin-bottom: -1px;
transition: all 0.12s ease;
display: inline-flex; align-items: center; gap: 8px;
}
.crm-tab:hover { color: var(--ink); }
.crm-tab.active { color: var(--ink); border-bottom-color: var(--indigo); }
.crm-tab .count {
background: var(--mist); color: var(--slate);
font-size: 11px; padding: 1px 7px; border-radius: var(--radius-pill);
font-weight: 600;
}
.crm-tab.active .count { background: var(--indigo-mist); color: var(--indigo-deep); }
.crm-toolbar {
display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
flex-wrap: wrap;
}
.crm-search {
flex: 1; min-width: 220px; max-width: 360px;
display: flex; align-items: center; gap: 8px;
padding: 8px 12px;
background: var(--paper);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
}
.crm-search input {
flex: 1; border: none; outline: none; background: transparent;
font-family: var(--font-sans); font-size: 13px; color: var(--ink);
}
.crm-search input::placeholder { color: var(--slate-soft); }
.crm-search .ico { color: var(--slate); font-size: 13px; }
.filter-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 6px 11px;
background: var(--paper);
border: 1px solid var(--border-strong);
border-radius: var(--radius-pill);
font-family: var(--font-sans);
font-size: 12px; font-weight: 500;
color: var(--ink);
cursor: pointer;
transition: all 0.12s ease;
}
.filter-chip:hover { border-color: var(--ink); }
.filter-chip.active { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.filter-chip .arrow { font-size: 10px; color: var(--slate); margin-left: 2px; }
.filter-chip.active .arrow { color: rgba(255,255,255,0.6); }
.view-toggle {
display: inline-flex; gap: 0; background: var(--mist); border-radius: var(--radius-sm); padding: 3px;
}
.view-toggle button {
background: transparent; border: none; padding: 6px 12px;
font-family: var(--font-sans); font-size: 12px; font-weight: 500;
color: var(--slate); cursor: pointer; border-radius: 4px;
transition: all 0.12s ease;
}
.view-toggle button.active { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(17,17,20,0.05); }
.view-toggle button:hover:not(.active) { color: var(--ink); }
/* Impeccable-style CRM table: horizontal scroll, tighter density,
* nowrap on chip-style content, ellipsis on long text, sticky name. */
.crm-table {
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow-x: auto; /* horizontal scroll when columns exceed the viewport */
overflow-y: hidden;
position: relative;
}
.crm-table table {
border-collapse: separate;
border-spacing: 0;
min-width: 100%;
table-layout: auto;
}
.crm-table th {
position: sticky; top: 0; z-index: 2;
background: var(--mist); border-bottom: 1px solid var(--border);
padding: 9px 12px;
font-size: 10.5px;
letter-spacing: 0.04em;
white-space: nowrap;
}
.crm-table td {
padding: 9px 12px; /* tighter rows so more columns fit on a typical viewport */
font-size: 12.5px;
vertical-align: middle;
line-height: 1.35;
}
/* Sticky first column (Name) so it stays visible while horizontally scrolling. */
.crm-table th:first-child,
.crm-table td:first-child {
position: sticky;
left: 0;
background: var(--paper);
z-index: 1;
box-shadow: 2px 0 0 0 var(--border);
}
.crm-table tr:hover td:first-child { background: var(--mist); }
.crm-table th:first-child { background: var(--mist); z-index: 3; }
/* Don't wrap badges, chip-style content, count pills, agent buttons or
* compact links - these should always stay on one line. */
.crm-table td .badge,
.crm-table td .kj-rel-badge,
.crm-table td .kj-rollup-count,
.crm-table td .kj-li-find,
.crm-table td .kj-agent-run,
.crm-table td .kj-row-actions-cell,
.crm-table td .kj-row-x {
white-space: nowrap;
}
.crm-table td.kj-row-actions-cell { white-space: nowrap; }
/* Long-text content columns: cap width with ellipsis so they don't
* push the table into runaway widths. The cell still shows a title
* on hover for the full string. */
.crm-table td .row-sub,
.crm-table td .row-name {
display: inline-block;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
}
.crm-table td .avatar + .row-name { max-width: 160px; }
.crm-table tr { cursor: pointer; transition: background 0.1s ease; }
.crm-table tr:hover td { background: var(--mist); }
.crm-table .row-name { font-weight: 500; color: var(--ink); }
.crm-table .row-sub { font-size: 11px; color: var(--slate); }
.crm-table .avatar {
width: 28px; height: 28px; border-radius: 50%; background: var(--indigo-mist);
color: var(--indigo-deep); font-size: 11px; font-weight: 600;
display: inline-flex; align-items: center; justify-content: center;
margin-right: 10px; vertical-align: middle;
}
/* Side drawer for record detail */
.drawer-overlay {
position: fixed; inset: 0; background: rgba(17,17,20,0.4);
z-index: 90; opacity: 0; pointer-events: none;
transition: opacity 0.2s ease;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }
.drawer {
position: fixed; top: 0; right: 0; bottom: 0;
width: 440px; max-width: calc(100vw - 40px);
background: var(--paper); border-left: 1px solid var(--border);
z-index: 100; transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
display: flex; flex-direction: column;
box-shadow: -8px 0 24px rgba(17,17,20,0.08);
}
.drawer.open { transform: translateX(0); }
.drawer-header {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 22px; border-bottom: 1px solid var(--border);
}
.drawer-header .close {
background: transparent; border: none; cursor: pointer; padding: 4px;
color: var(--slate); font-size: 18px;
}
.drawer-header .close:hover { color: var(--ink); }
.drawer-body { padding: 22px; overflow-y: auto; flex: 1; }
.drawer-section { margin-bottom: 24px; }
.drawer-section h4 {
font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--slate); margin: 0 0 10px; font-weight: 600;
}
.drawer-field { display: flex; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.drawer-field:last-child { border-bottom: none; }
.drawer-field .k { width: 120px; color: var(--slate); flex-shrink: 0; }
.drawer-field .v { color: var(--ink); font-weight: 500; flex: 1; }
.drawer-activity { padding: 10px 0; border-bottom: 1px solid var(--border); }
.drawer-activity:last-child { border-bottom: none; }
.drawer-activity .meta { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.drawer-activity .meta .when { font-size: 11px; color: var(--slate); }
/* ===== Multi-select dropdown ===== */
.ms-dropdown { position: relative; display: inline-block; }
.ms-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px 6px 12px;
font-size: 12px;
font-weight: 500;
background: #FFFFFF;
border: 1px solid var(--border);
border-radius: 999px;
color: var(--ink);
cursor: pointer;
transition: all 120ms;
font-family: var(--font-sans);
white-space: nowrap;
}
.ms-trigger:hover { border-color: var(--ink); }
.ms-trigger.active {
background: var(--ink);
color: #FFFFFF;
border-color: var(--ink);
}
.ms-trigger .caret {
width: 0; height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid currentColor;
margin-left: 2px;
opacity: 0.7;
}
.ms-trigger .count-bubble {
background: var(--indigo);
color: #FFFFFF;
font-size: 10px;
padding: 1px 6px;
border-radius: 999px;
font-weight: 600;
}
.ms-panel {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 100;
min-width: 220px;
max-height: 360px;
background: #FFFFFF;
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
display: none;
flex-direction: column;
overflow: hidden;
}
.ms-panel.open { display: flex; }
.ms-panel-head {
display: flex;
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid var(--border);
background: var(--mist);
}
.ms-panel-head .lbl {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--slate);
font-weight: 600;
}
.ms-panel-head button {
font-size: 11px;
color: var(--indigo);
background: none;
border: none;
cursor: pointer;
padding: 0;
font-weight: 500;
font-family: var(--font-sans);
}
.ms-panel-body {
overflow-y: auto;
padding: 4px 0;
flex: 1;
}
.ms-option {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
cursor: pointer;
font-size: 13px;
color: var(--ink);
}
.ms-option:hover { background: var(--mist); }
.ms-option input[type="checkbox"] {
width: 14px;
height: 14px;
accent-color: var(--indigo);
cursor: pointer;
}
.ms-option .opt-meta {
margin-left: auto;
font-size: 11px;
color: var(--slate);
font-variant-numeric: tabular-nums;
}
/* ===== Searchable combobox (typeahead) ===== */
.combo-wrap { position: relative; }
.combo-input {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--border-strong);
border-radius: var(--radius);
font-family: var(--font-sans);
font-size: 13px;
color: var(--ink);
background: #FFFFFF;
}
.combo-input:focus { outline: none; border-color: var(--indigo); }
.combo-options {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: #FFFFFF;
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
max-height: 240px;
overflow-y: auto;
z-index: 200;
display: none;
}
.combo-options.open { display: block; }
.combo-option {
padding: 8px 12px;
font-size: 13px;
color: var(--ink);
cursor: pointer;
border-bottom: 1px solid var(--border);
}
.combo-option:last-child { border-bottom: none; }
.combo-option:hover, .combo-option.highlighted { background: var(--indigo-mist); }
.combo-option .sub { display: block; font-size: 11px; color: var(--slate); margin-top: 2px; }
.combo-empty {
padding: 14px 12px;
font-size: 12px;
color: var(--slate);
text-align: center;
}
/* ===== Modal (Add record) ===== */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(17, 17, 20, 0.5);
z-index: 300;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
}
.modal-overlay.open { display: flex; }
.modal {
background: #FFFFFF;
border-radius: var(--radius-lg);
width: 100%;
max-width: 480px;
max-height: 88vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 24px 48px rgba(0,0,0,0.2);
}
.modal-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 24px;
border-bottom: 1px solid var(--border);
}
.modal-head h3 {
margin: 0;
font-size: 18px;
font-family: var(--font-serif);
font-weight: 600;
color: var(--ink);
}
.modal-head .close {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: var(--slate);
padding: 0;
width: 28px;
height: 28px;
line-height: 1;
}
.modal-body {
padding: 20px 24px;
overflow-y: auto;
flex: 1;
}
.modal-foot {
padding: 16px 24px;
border-top: 1px solid var(--border);
display: flex;
justify-content: flex-end;
gap: 8px;
}
.form-field { margin-bottom: 16px; }
.form-field label {
display: block;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--slate);
font-weight: 600;
margin-bottom: 6px;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--border-strong);
border-radius: var(--radius);
font-family: var(--font-sans);
font-size: 13px;
color: var(--ink);
background: #FFFFFF;
}
.form-field textarea { resize: vertical; min-height: 70px; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
outline: none;
border-color: var(--indigo);
}
.form-select-row {
display: flex;
gap: 6px;
}
.form-select-row select { flex: 1; }
.form-select-row .add-new-btn {
padding: 0 12px;
border: 1px dashed var(--indigo);
background: #FFFFFF;
color: var(--indigo);
border-radius: var(--radius);
font-size: 12px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
}
.form-select-row .add-new-btn:hover {
background: var(--indigo-mist);
}
/* ===== View toolbar (Airtable-style) ===== */
.view-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: var(--mist);
border: 1px solid var(--border);
border-bottom: none;
border-top-left-radius: var(--radius);
border-top-right-radius: var(--radius);
flex-wrap: wrap;
}
.view-picker {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.view-pill {
padding: 4px 12px;
border: 1px solid var(--border-strong);
background: #FFFFFF;
border-radius: 999px;
font-size: 12px;
font-family: var(--font-sans);
color: var(--ink);
cursor: pointer;
transition: all 120ms;
display: inline-flex;
align-items: center;
gap: 6px;
}
.view-pill:hover { border-color: var(--ink); }
.view-pill.active {
background: var(--ink);
color: #FFFFFF;
border-color: var(--ink);
}
.view-pill .badge-builtin {
font-size: 9px;
background: var(--indigo-mist);
color: var(--indigo);
padding: 1px 5px;
border-radius: 999px;
font-weight: 600;
}
.view-pill.active .badge-builtin {
background: rgba(255,255,255,0.2);
color: #FFFFFF;
}
.view-bar .divider {
width: 1px;
height: 16px;
background: var(--border);
margin: 0 4px;
}
.view-action {
padding: 4px 10px;
background: #FFFFFF;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
font-size: 11px;
color: var(--ink);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-sans);
}
.view-action:hover { border-color: var(--ink); }
.view-action.has-value {
background: var(--indigo-mist);
border-color: var(--indigo);
color: var(--indigo-deep);
}
/* Column header sort affordance */
.crm-table th.sortable { cursor: pointer; user-select: none; position: relative; }
.crm-table th.sortable:hover { color: var(--indigo); }
.crm-table th .sort-ind {
display: inline-block;
margin-left: 4px;
font-size: 10px;
color: var(--indigo);
opacity: 0;
}
.crm-table th.sorted .sort-ind { opacity: 1; }
.crm-table th .sort-num {
font-size: 8px;
vertical-align: top;
color: var(--slate);
}
/* Group header rows */
.crm-table tr.group-row {
background: var(--mist);
cursor: pointer;
font-weight: 600;
}
.crm-table tr.group-row td {
padding: 10px 14px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink);
border-top: 2px solid var(--border);
}
.crm-table tr.group-row .toggle {
display: inline-block;
margin-right: 8px;
font-size: 10px;
transition: transform 150ms;
}
.crm-table tr.group-row.collapsed .toggle { transform: rotate(-90deg); }
.crm-table tr.group-row .group-count {
font-weight: 500;
color: var(--slate);
margin-left: 8px;
text-transform: none;
letter-spacing: 0;
}
/* View options popover panel */
.view-popover {
position: absolute;
top: 100%;
margin-top: 6px;
background: #FFFFFF;
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
padding: 12px;
min-width: 240px;
z-index: 100;
display: none;
}
.view-popover.open { display: block; }
.view-popover .vp-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
font-size: 12px;
color: var(--ink);
}
.view-popover .vp-row label { flex: 1; cursor: pointer; }
.view-popover .vp-row input[type="checkbox"] { accent-color: var(--indigo); }
.view-popover h6 {
margin: 0 0 8px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--slate);
font-weight: 600;
}
/* ===== Drag-and-drop kanban ===== */
.kanban-card[draggable="true"] { cursor: grab; }
.kanban-card.dragging { opacity: 0.4; cursor: grabbing; }
.kanban-col.drag-over {
background: var(--indigo-mist);
border-radius: var(--radius);
outline: 2px dashed var(--indigo);
outline-offset: -4px;
}
/* ===== Assessment queue kanban ===== */
.aq-kanban {
display: grid;
grid-template-columns: repeat(4, minmax(260px, 1fr));
gap: 14px;
align-items: start;
}
.aq-col {
background: var(--mist);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px;
min-height: 200px;
display: flex;
flex-direction: column;
gap: 10px;
}
.aq-col-head {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 2px 4px 8px;
border-bottom: 1px solid var(--border);
margin-bottom: 4px;
}
.aq-col-head h4 {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink);
margin: 0;
}
.aq-col-head .count {
font-size: 11px;
background: #FFFFFF;
border: 1px solid var(--border);
padding: 1px 8px;
border-radius: 999px;
color: var(--slate);
font-weight: 600;
}
.aq-col-head .accent { color: var(--indigo); border-color: var(--indigo); background: var(--indigo-mist); }
.aq-card {
background: #FFFFFF;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px;
cursor: pointer;
transition: all 120ms;
display: flex;
flex-direction: column;
gap: 8px;
}
.aq-card:hover { border-color: var(--ink); }
.aq-card.urgent { border-left: 3px solid var(--indigo); }
.aq-card .who { display: flex; flex-direction: column; }
.aq-card .who .name { font-weight: 600; font-size: 13px; color: var(--ink); line-height: 1.3; }
.aq-card .who .co { font-size: 11px; color: var(--slate); margin-top: 2px; }
.aq-card .meta {
font-size: 11px;
color: var(--slate);
line-height: 1.5;
}
.aq-card .meta strong { color: var(--ink); font-weight: 600; }
.aq-card .progress-thin {
height: 4px;
background: var(--mist);
border-radius: 999px;
overflow: hidden;
}
.aq-card .progress-thin .fill {
height: 100%;
background: var(--indigo);
border-radius: 999px;
transition: width 200ms;
}
.aq-card .progress-thin .fill.amber { background: var(--amber); }
.aq-card .progress-thin .fill.green { background: var(--green); }
.aq-card .dim-row {
display: flex;
gap: 3px;
align-items: center;
}
.aq-card .dim-pill {
flex: 1;
height: 4px;
border-radius: 999px;
background: var(--mist);
}
.aq-card .dim-pill.done { background: var(--indigo); }
.aq-card .dim-pill.red { background: var(--red); }
.aq-card .dim-pill.amber { background: var(--amber); }
.aq-card .dim-pill.green { background: var(--green); }
.aq-card .actions {
display: flex;
gap: 6px;
margin-top: 2px;
}
.aq-card .actions .btn { flex: 1; padding: 5px 8px; font-size: 11px; }
.aq-card .sla-line {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.aq-card .sla-line .lbl { color: var(--indigo); font-weight: 600; }
.aq-card .sla-line .rem { color: var(--slate); }
.aq-empty {
font-size: 12px;
color: var(--slate);
text-align: center;
padding: 20px 8px;
font-style: italic;
}
/* ===== Audit report (BCG-grade) ===== */
.audit-nav {
position: sticky;
top: 0;
z-index: 50;
background: #FFFFFF;
border-bottom: 1px solid var(--border);
display: flex;
gap: 0;
margin: 0 -32px 32px;
padding: 0 32px;
overflow-x: auto;
}
.audit-nav button {
background: none;
border: none;
padding: 16px 4px;
margin-right: 28px;
font-family: var(--font-sans);
font-size: 12px;
color: var(--slate);
cursor: pointer;
position: relative;
white-space: nowrap;
letter-spacing: 0.02em;
font-weight: 500;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.audit-nav button:hover { color: var(--ink); }
.audit-nav button.active {
color: var(--ink);
border-bottom-color: var(--ink);
font-weight: 600;
}
.audit-nav button .num {
font-family: var(--font-serif);
font-size: 11px;
color: var(--indigo);
margin-right: 6px;
font-weight: 600;
}
.audit-section {
scroll-margin-top: 72px;
padding: 0 0 56px;
border-bottom: 1px solid var(--border);
margin-bottom: 56px;
}
.audit-section:last-of-type {
border-bottom: none;
margin-bottom: 0;
}
.audit-section .question {
font-family: var(--font-serif);
font-size: 13px;
color: var(--slate);
letter-spacing: 0.02em;
margin: 0 0 6px;
font-style: italic;
}
.audit-section .answer {
font-family: var(--font-serif);
font-size: 36px;
font-weight: 500;
color: var(--ink);
line-height: 1.2;
margin: 0 0 24px;
max-width: 28ch;
}
.audit-section .answer .accent { color: var(--indigo); }
/* Hero KPI strip */
.audit-kpi-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
margin: 0 0 32px;
}
.audit-kpi {
padding: 22px 24px;
border-right: 1px solid var(--border);
}
.audit-kpi:last-child { border-right: none; }
.audit-kpi .lbl {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--slate);
margin: 0 0 8px;
font-weight: 600;
}
.audit-kpi .val {
font-family: var(--font-serif);
font-size: 40px;
font-weight: 500;
color: var(--ink);
line-height: 1;
margin: 0;
}
.audit-kpi .val .unit { font-size: 18px; color: var(--slate); margin-left: 4px; }
.audit-kpi .val.accent { color: var(--indigo); }
.audit-kpi .sub {
font-size: 12px;
color: var(--slate);
margin: 6px 0 0;
}
/* Maturity bar chart (one row per dimension) */
.maturity-chart {
display: grid;
grid-template-columns: 140px 1fr 60px;
gap: 16px;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--border);
}
.maturity-chart:last-child { border-bottom: none; }
.maturity-chart .label {
font-size: 13px;
font-weight: 500;
color: var(--ink);
}
.maturity-chart .label .sub {
display: block;
font-size: 11px;
color: var(--slate);
margin-top: 2px;
font-weight: 400;
}
.maturity-track {
height: 26px;
background: var(--mist);
border-radius: 2px;
position: relative;
overflow: hidden;
}
.maturity-track .axis {
position: absolute;
top: 0; bottom: 0;
width: 1px;
background: rgba(0,0,0,0.06);
}
.maturity-track .fill {
position: absolute;
left: 0; top: 0; bottom: 0;
border-radius: 2px 0 0 2px;
}
.maturity-track .fill.red { background: var(--red); }
.maturity-track .fill.amber { background: var(--amber); }
.maturity-track .fill.green { background: var(--green); }
.maturity-track .benchmark {
position: absolute;
top: -4px; bottom: -4px;
width: 2px;
background: var(--ink);
z-index: 2;
}
.maturity-track .benchmark::after {
content: "";
position: absolute;
top: -3px; left: -3px;
width: 8px; height: 8px;
background: var(--ink);
border-radius: 999px;
}
.maturity-chart .score {
text-align: right;
font-variant-numeric: tabular-nums;
font-family: var(--font-serif);
font-size: 18px;
font-weight: 600;
color: var(--ink);
}
.maturity-chart .score .vs {
display: block;
font-size: 10px;
font-weight: 500;
font-family: var(--font-sans);
color: var(--slate);
margin-top: 2px;
}
.maturity-axis-scale {
display: grid;
grid-template-columns: 140px 1fr 60px;
gap: 16px;
padding-top: 8px;
font-size: 10px;
color: var(--slate);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.maturity-axis-scale .scale {
display: flex;
justify-content: space-between;
}
/* Risk cards */
.risk-card {
display: grid;
grid-template-columns: 60px 1fr auto;
gap: 24px;
padding: 24px 0;
border-top: 1px solid var(--border);
align-items: start;
}
.risk-card:last-of-type { border-bottom: 1px solid var(--border); }
.risk-card .rank {
font-family: var(--font-serif);
font-size: 42px;
font-weight: 500;
color: var(--indigo);
line-height: 1;
}
.risk-card h3 {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 500;
margin: 0 0 4px;
color: var(--ink);
line-height: 1.2;
}
.risk-card .dim-meta {
font-size: 12px;
color: var(--slate);
margin: 0 0 14px;
}
.risk-card .what {
font-size: 15px;
color: var(--ink);
line-height: 1.55;
margin: 0 0 12px;
max-width: 60ch;
}
.risk-card .why-block {
display: grid;
grid-template-columns: 100px 1fr;
gap: 12px;
padding: 8px 0;
border-top: 1px solid var(--border);
font-size: 13px;
}
.risk-card .why-block .lbl {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--slate);
font-weight: 600;
padding-top: 2px;
}
.risk-card .why-block .val {
color: var(--ink);
line-height: 1.55;
}
.risk-card .quote {
font-family: var(--font-serif);
font-style: italic;
color: var(--slate);
border-left: 2px solid var(--indigo);
padding: 4px 0 4px 12px;
margin: 8px 0 0;
font-size: 14px;
}
.risk-card .score-bubble {
font-family: var(--font-serif);
font-size: 32px;
font-weight: 500;
color: var(--ink);
text-align: right;
}
.risk-card .score-bubble .unit { font-size: 14px; color: var(--slate); }
/* Recommendation block */
.recommend-block {
border: 1px solid var(--ink);
border-radius: var(--radius-lg);
padding: 32px;
}
.recommend-block .title {
font-family: var(--font-serif);
font-size: 28px;
font-weight: 500;
color: var(--ink);
line-height: 1.25;
margin: 0 0 8px;
max-width: 32ch;
}
.recommend-block .subtitle {
font-size: 14px;
color: var(--slate);
margin: 0 0 24px;
max-width: 56ch;
line-height: 1.55;
}
.recommend-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 24px;
border-top: 1px solid var(--border);
padding-top: 24px;
}
.recommend-grid h5 {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--slate);
margin: 0 0 12px;
font-weight: 600;
}
.recommend-grid ul {
padding-left: 0;
list-style: none;
margin: 0;
}
.recommend-grid li {
font-size: 13px;
color: var(--ink);
padding: 6px 0 6px 18px;
position: relative;
line-height: 1.5;
}
.recommend-grid li::before {
content: "";
position: absolute;
left: 0; top: 13px;
width: 6px; height: 1px;
background: var(--indigo);
}
.timeline-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin: 12px 0 0;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
}
.timeline-strip .week {
padding: 10px 8px;
border-right: 1px solid var(--border);
background: var(--mist);
}
.timeline-strip .week:last-child { border-right: none; }
.timeline-strip .week .label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--slate);
font-weight: 600;
}
.timeline-strip .week .name {
font-size: 12px;
color: var(--ink);
margin-top: 4px;
font-weight: 500;
line-height: 1.3;
}
/* Sub-dimension detail table */
.detail-table {
width: 100%;
border-collapse: collapse;
}
.detail-table th {
text-align: left;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--slate);
font-weight: 600;
padding: 12px 8px;
border-bottom: 1px solid var(--border-strong);
}
.detail-table td {
padding: 12px 8px;
font-size: 13px;
color: var(--ink);
border-bottom: 1px solid var(--border);
vertical-align: top;
}
.detail-table tr.group-row td {
background: var(--mist);
font-family: var(--font-serif);
font-size: 14px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
}
.detail-table .score-cell {
font-variant-numeric: tabular-nums;
font-weight: 600;
white-space: nowrap;
}
/* Strength / weakness chip lists */
.shape-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
margin-top: 24px;
}
.shape-row h5 {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--slate);
margin: 0 0 12px;
font-weight: 600;
}
.shape-row .dim-line {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid var(--border);
font-size: 14px;
}
.shape-row .dim-line:last-child { border-bottom: none; }
.shape-row .dim-line .name {
color: var(--ink);
font-weight: 500;
}
.shape-row .dim-line .val {
color: var(--slate);
font-variant-numeric: tabular-nums;
}
/* ===== Notification group header (used in full-page notifications view) ===== */
.notif-group-header {
padding: 12px 0 6px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--slate);
font-weight: 600;
}
/* ===== Nav notification badge ===== */
.nav-item { position: relative; }
.nav-badge {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
background: var(--indigo);
color: #FFFFFF;
font-size: 10px;
font-weight: 600;
padding: 2px 7px;
border-radius: 999px;
letter-spacing: 0.02em;
}
/* ===== Assessment Bank table ===== */
.bank-toolbar {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
padding: 14px 18px;
background: var(--mist);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 18px;
}
.bank-toolbar .label {
font-size: 11px;
color: var(--slate);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-right: 4px;
}
.bank-row { cursor: pointer; transition: background 120ms; }
.bank-row:hover { background: var(--indigo-mist); }
.score-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.score-pill.red { background: var(--red-bg); color: var(--red); }
.score-pill.amber { background: var(--amber-bg); color: var(--amber); }
.score-pill.green { background: var(--green-bg); color: var(--green); }
.score-pill .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.mini-radar {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 4px;
width: 110px;
}
.mini-radar .bar {
height: 24px;
background: var(--indigo-mist);
border-radius: 2px;
position: relative;
overflow: hidden;
}
.mini-radar .bar::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
background: var(--indigo);
height: var(--fill, 50%);
}
/* ===== Benchmark engine ===== */
.bench-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.bench-card {
background: #FFFFFF;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px;
}
.bench-card h4 {
margin: 0 0 16px;
font-family: var(--font-serif);
font-size: 16px;
font-weight: 600;
color: var(--ink);
}
.bench-bar-row {
display: grid;
grid-template-columns: 110px 1fr 50px;
gap: 10px;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid var(--border);
font-size: 12px;
}
.bench-bar-row:last-child { border-bottom: none; }
.bench-bar-row .lbl { color: var(--ink); font-weight: 500; }
.bench-bar-row .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.bench-bar-track {
height: 8px;
background: var(--mist);
border-radius: 999px;
position: relative;
overflow: hidden;
}
.bench-bar-fill {
position: absolute;
left: 0; top: 0; bottom: 0;
background: var(--indigo);
border-radius: 999px;
transition: width 200ms;
}
.bench-marker {
position: absolute;
top: -3px; bottom: -3px;
width: 2px;
background: var(--ink);
border-radius: 1px;
}
/* ===== Notifications feed ===== */
.notif-row {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 12px;
align-items: start;
padding: 14px 0;
border-bottom: 1px solid var(--border);
cursor: pointer;
transition: background 120ms;
}
.notif-row:hover { background: var(--mist); padding-left: 8px; padding-right: 8px; margin: 0 -8px; }
.notif-row.unread { position: relative; }
.notif-row.unread::before {
content: "";
position: absolute;
left: -10px;
top: 22px;
width: 6px;
height: 6px;
background: var(--indigo);
border-radius: 999px;
}
.notif-icon {
width: 32px; height: 32px;
background: var(--indigo-mist);
color: var(--indigo);
border-radius: 999px;
display: flex; align-items: center; justify-content: center;
font-size: 13px;
font-weight: 700;
}
.notif-body p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink); }
.notif-body .sub { font-size: 11px; color: var(--slate); margin-top: 2px; }
.notif-row .when { font-size: 11px; color: var(--slate); white-space: nowrap; }
/* ===== Comments thread (audit report) ===== */
.comment-thread {
margin-top: 14px;
padding: 14px;
background: var(--mist);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.comment-thread h5 {
margin: 0 0 12px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--slate);
font-weight: 600;
}
.comment {
display: grid;
grid-template-columns: 28px 1fr;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid var(--border);
}
.comment:last-of-type { border-bottom: none; }
.comment .ava {
width: 28px; height: 28px;
border-radius: 999px;
background: var(--indigo);
color: #FFFFFF;
display: flex; align-items: center; justify-content: center;
font-size: 11px;
font-weight: 600;
}
.comment .ava.client { background: var(--ink); }
.comment .name { font-size: 12px; font-weight: 600; color: var(--ink); }
.comment .name .when { font-weight: 400; color: var(--slate); margin-left: 6px; font-size: 11px; }
.comment .text { font-size: 13px; color: var(--ink); margin: 4px 0 0; line-height: 1.5; }
.comment-input {
display: flex;
gap: 8px;
margin-top: 12px;
}
.comment-input input {
flex: 1;
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
font-family: var(--font-sans);
font-size: 13px;
background: #FFFFFF;
}
.comment-input input:focus { outline: none; border-color: var(--indigo); }
/* ============================================================
CONTRACT MANAGEMENT
Editor (3-pane), template manager, clause library, signature canvas
============================================================ */
/* ----- Status pills ----- */
.ct-status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: uppercase;
white-space: nowrap;
}
.ct-status .dot-status {
width: 6px; height: 6px; border-radius: 50%;
}
.ct-status.draft { background: #F4F4F5; color: #52525B; }
.ct-status.draft .dot-status { background: #A1A1AA; }
.ct-status.sent { background: #EEF2FF; color: #4338CA; }
.ct-status.sent .dot-status { background: var(--indigo); }
.ct-status.viewed { background: #FEF3C7; color: #92400E; }
.ct-status.viewed .dot-status { background: #D97706; }
.ct-status.partial { background: #DBEAFE; color: #1E40AF; }
.ct-status.partial .dot-status { background: #2563EB; }
.ct-status.executed { background: #DCFCE7; color: #166534; }
.ct-status.executed .dot-status { background: #16A34A; }
.ct-status.declined { background: #FEE2E2; color: #991B1B; }
.ct-status.declined .dot-status { background: #DC2626; }
/* ----- Editor 3-pane layout ----- */
.ct-editor {
display: grid;
grid-template-columns: 300px 1fr 320px;
gap: 0;
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
min-height: calc(100vh - 220px);
}
.ct-pane {
border-right: 1px solid var(--border);
overflow-y: auto;
background: var(--paper);
}
.ct-pane:last-child { border-right: none; }
.ct-pane-header {
position: sticky;
top: 0;
background: var(--paper);
border-bottom: 1px solid var(--border);
padding: 14px 16px 10px;
z-index: 2;
}
.ct-pane-header p { margin: 0; }
.ct-pane-body { padding: 12px 16px 24px; }
/* Variables panel */
.ct-var-field {
margin-bottom: 12px;
}
.ct-var-field label {
display: block;
font-size: 11px;
font-weight: 500;
color: var(--slate);
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 4px;
}
.ct-var-field input,
.ct-var-field textarea {
width: 100%;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: 6px;
font-family: var(--font-sans);
font-size: 13px;
color: var(--ink);
background: #FFFFFF;
transition: border-color 0.12s ease;
}
.ct-var-field textarea { min-height: 60px; resize: vertical; }
.ct-var-field input:focus,
.ct-var-field textarea:focus { outline: none; border-color: var(--indigo); }
.ct-var-field.filled-by-proposal input,
.ct-var-field.filled-by-proposal textarea {
background: #F5F7FF;
border-color: #C7D2FE;
}
.ct-var-field .prefill-tag {
display: inline-block;
font-size: 10px;
font-weight: 500;
color: var(--indigo);
margin-left: 6px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* Document preview pane */
.ct-doc {
max-width: 720px;
margin: 24px auto 60px;
background: #FFFFFF;
border: 1px solid var(--border);
border-radius: 4px;
padding: 56px 64px;
box-shadow: 0 2px 14px rgba(15, 23, 42, 0.04);
}
.ct-doc h1 {
font-family: var(--font-serif);
font-size: 26px;
font-weight: 500;
color: var(--ink);
margin: 0 0 6px;
letter-spacing: -0.01em;
}
.ct-doc .ct-doc-sub {
font-size: 12px;
color: var(--slate);
margin: 0 0 32px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.ct-doc .ct-doc-parties {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
padding: 16px 0 24px;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
margin-bottom: 28px;
}
.ct-doc .ct-doc-party p { margin: 2px 0; font-size: 13px; color: var(--ink); }
.ct-doc .ct-doc-party .role { font-size: 10px; color: var(--slate); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }
.ct-clause-block {
margin: 0 0 20px;
padding: 14px 16px 14px 18px;
border-left: 2px solid transparent;
border-radius: 0 6px 6px 0;
position: relative;
}
.ct-clause-block:hover {
background: #FAFAFA;
border-left-color: var(--indigo);
}
.ct-clause-block h4 {
font-size: 11px;
font-weight: 600;
color: var(--ink);
letter-spacing: 0.06em;
text-transform: uppercase;
margin: 0 0 8px;
}
.ct-clause-block p {
font-size: 13px;
line-height: 1.7;
color: var(--ink);
margin: 0;
white-space: pre-wrap;
}
.ct-clause-block .ct-clause-actions {
position: absolute;
top: 10px;
right: 10px;
display: none;
gap: 4px;
}
.ct-clause-block:hover .ct-clause-actions { display: flex; }
.ct-clause-actions button {
background: var(--paper);
border: 1px solid var(--border);
border-radius: 4px;
padding: 3px 8px;
font-size: 11px;
color: var(--ink);
cursor: pointer;
}
.ct-clause-actions button:hover { border-color: var(--indigo); color: var(--indigo); }
.ct-var-token {
display: inline-block;
padding: 1px 6px;
background: #EEF2FF;
color: var(--indigo);
border-radius: 3px;
font-size: 12px;
font-weight: 500;
}
.ct-var-token.missing {
background: #FEE2E2;
color: #991B1B;
}
/* Clause library panel */
.ct-clause-search {
width: 100%;
padding: 7px 10px;
border: 1px solid var(--border);
border-radius: 6px;
font-family: var(--font-sans);
font-size: 12px;
margin-bottom: 12px;
}
.ct-clause-cat {
font-size: 10px;
font-weight: 600;
color: var(--slate);
letter-spacing: 0.06em;
text-transform: uppercase;
margin: 14px 0 6px;
}
.ct-clause-card {
background: var(--paper);
border: 1px solid var(--border);
border-radius: 6px;
padding: 10px 12px;
margin-bottom: 6px;
cursor: grab;
transition: all 0.12s ease;
}
.ct-clause-card:hover {
border-color: var(--indigo);
transform: translateX(-2px);
}
.ct-clause-card.in-contract {
background: #F0FDF4;
border-color: #BBF7D0;
}
.ct-clause-card .ct-clause-title {
font-size: 12px;
font-weight: 500;
color: var(--ink);
margin: 0;
}
.ct-clause-card .ct-clause-snippet {
font-size: 11px;
color: var(--slate);
margin: 4px 0 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ct-clause-card .ct-clause-add {
font-size: 10px;
color: var(--indigo);
font-weight: 500;
margin-top: 6px;
display: inline-block;
}
/* Signature blocks in document */
.ct-sig-grid {
margin-top: 36px;
padding-top: 24px;
border-top: 1px solid var(--border);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
}
.ct-sig-block {
padding-bottom: 8px;
border-bottom: 1px solid var(--ink);
min-height: 90px;
position: relative;
display: flex;
align-items: flex-end;
}
.ct-sig-block.signed {
border-bottom-color: var(--indigo);
}
.ct-sig-block .ct-sig-rendered {
width: 100%;
height: 70px;
display: flex;
align-items: center;
justify-content: flex-start;
}
.ct-sig-block .ct-sig-typed {
font-family: var(--font-serif);
font-size: 28px;
color: var(--ink);
font-style: italic;
line-height: 1;
}
.ct-sig-block .ct-sig-drawn svg,
.ct-sig-block .ct-sig-drawn img {
max-height: 60px;
max-width: 100%;
}
.ct-sig-block .ct-sig-empty {
font-size: 11px;
color: var(--slate);
font-style: italic;
}
.ct-sig-meta {
margin-top: 6px;
font-size: 11px;
color: var(--slate);
}
.ct-sig-meta strong { color: var(--ink); font-weight: 500; }
/* Signature capture modal */
.ct-sigcap-overlay {
position: fixed; inset: 0;
background: rgba(15, 23, 42, 0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 100;
padding: 20px;
}
.ct-sigcap-overlay.open { display: flex; }
.ct-sigcap {
background: var(--paper);
border-radius: var(--radius-lg);
width: 100%;
max-width: 520px;
padding: 24px 28px 22px;
box-shadow: 0 30px 60px rgba(15, 23, 42, 0.3);
}
.ct-sigcap h3 { margin: 0 0 4px; font-size: 18px; }
.ct-sigcap p.muted { margin: 0 0 16px; font-size: 13px; color: var(--slate); }
.ct-sigcap-tabs {
display: flex;
gap: 4px;
background: #F4F4F5;
padding: 4px;
border-radius: 8px;
margin-bottom: 14px;
}
.ct-sigcap-tab {
flex: 1;
padding: 7px 12px;
background: transparent;
border: none;
border-radius: 6px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
color: var(--slate);
cursor: pointer;
transition: all 0.12s ease;
}
.ct-sigcap-tab.active {
background: var(--paper);
color: var(--ink);
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.ct-sigcanvas-wrap {
position: relative;
background: #FFFFFF;
border: 2px dashed var(--border);
border-radius: 8px;
height: 180px;
margin-bottom: 12px;
overflow: hidden;
}
.ct-sigcanvas {
width: 100%;
height: 100%;
cursor: crosshair;
display: block;
touch-action: none;
}
.ct-sigcanvas-hint {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: var(--slate);
pointer-events: none;
}
.ct-sigcanvas-hint.gone { display: none; }
.ct-sigtype-input {
width: 100%;
padding: 24px 16px;
border: 2px dashed var(--border);
border-radius: 8px;
font-family: var(--font-serif);
font-style: italic;
font-size: 32px;
color: var(--ink);
text-align: center;
margin-bottom: 12px;
background: #FFFFFF;
}
.ct-sigtype-input:focus { outline: none; border-color: var(--indigo); }
.ct-sigcap-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.ct-sigcap-legal {
font-size: 11px;
color: var(--slate);
margin: 12px 0 0;
line-height: 1.5;
}
/* Audit trail */
.ct-audit {
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px 22px;
}
.ct-audit-item {
display: grid;
grid-template-columns: 130px 24px 1fr;
gap: 10px;
padding: 8px 0;
border-top: 1px solid var(--border);
align-items: start;
}
.ct-audit-item:first-of-type { border-top: none; }
.ct-audit-item .ct-audit-ts { font-size: 11px; color: var(--slate); font-variant-numeric: tabular-nums; }
.ct-audit-item .ct-audit-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--indigo); margin-top: 6px;
}
.ct-audit-item .ct-audit-actor { font-size: 12px; color: var(--ink); font-weight: 500; }
.ct-audit-item .ct-audit-action { font-size: 12px; color: var(--slate); margin-top: 1px; }
/* Editor top bar */
.ct-edit-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 20px;
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 12px;
flex-wrap: wrap;
gap: 12px;
}
.ct-edit-bar .ct-edit-title { font-size: 14px; font-weight: 500; color: var(--ink); margin: 0; }
.ct-edit-bar .ct-edit-sub { font-size: 11px; color: var(--slate); margin: 2px 0 0; letter-spacing: 0.04em; text-transform: uppercase; }
/* Template / clause cards in management views */
.ct-tpl-card {
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px 20px;
transition: all 0.12s ease;
}
.ct-tpl-card:hover { border-color: var(--indigo); }
.ct-tpl-card h3 { margin: 0 0 4px; font-size: 16px; }
.ct-tpl-card .ct-tpl-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--slate); margin: 6px 0 10px; }
.ct-tpl-card .ct-tpl-meta span { display: inline-flex; align-items: center; gap: 4px; }
/* AI suggestion panel */
.ct-ai-bar {
background: linear-gradient(135deg, #EEF2FF 0%, #F5F3FF 100%);
border: 1px solid #C7D2FE;
border-radius: 8px;
padding: 10px 14px;
margin: 0 0 10px;
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
}
.ct-ai-bar .ct-ai-icon {
width: 22px; height: 22px;
background: var(--indigo); color: #FFFFFF;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 600;
flex-shrink: 0;
}
.ct-ai-bar .ct-ai-actions { margin-left: auto; display: flex; gap: 6px; }
.ct-ai-bar button {
background: var(--paper);
border: 1px solid #C7D2FE;
border-radius: 4px;
padding: 3px 9px;
font-size: 11px;
color: var(--indigo);
cursor: pointer;
font-weight: 500;
}
.ct-ai-bar button:hover { background: var(--indigo); color: #FFFFFF; }
/* Variable substitution highlight in preview */
.ct-doc p .ct-var-token { vertical-align: baseline; }
/* Print-clean version of the contract */
@media print {
.ct-pane:first-child, .ct-pane:last-child, .ct-edit-bar { display: none !important; }
.ct-editor { grid-template-columns: 1fr; border: none; min-height: 0; }
.ct-doc { margin: 0; padding: 24mm; border: none; box-shadow: none; max-width: 100%; }
.ct-clause-block:hover { background: transparent; border-left-color: transparent; }
.ct-clause-block .ct-clause-actions { display: none !important; }
}
/* ============================================================
TRANSCRIPT VIEWER (Granola-style)
Full-screen overlay with Note / Summary / Transcript tabs.
Light-on-dark for readability across long content.
============================================================ */
/* v3.1: Granola-style transcript viewer. Full-screen centered dark
canvas with a serif title, attendee pills, light-grey section headers,
bullet lists, and a footer "Ask anything" bar that calls the AI.
The old slide-in side panel + 3 tabs is replaced by this clean reader. */
.tx-overlay {
position: fixed; inset: 0;
background: rgba(8, 8, 12, 0.72);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: none;
align-items: center;
justify-content: center;
z-index: 8500;
padding: 32px 16px;
}
.tx-overlay.open { display: flex; }
.tx-doc {
width: min(900px, 100%);
max-height: calc(100vh - 64px);
background: #1B1B22;
border-radius: 16px;
display: flex;
flex-direction: column;
box-shadow: 0 32px 96px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.06);
color: #E5E7EB;
overflow: hidden;
}
.tx-doc-head {
padding: 28px 36px 18px;
position: relative;
}
.tx-doc-head .tx-close {
position: absolute;
top: 16px;
right: 18px;
background: transparent;
border: none;
color: #9CA3AF;
font-size: 22px;
cursor: pointer;
padding: 4px 10px;
border-radius: 8px;
line-height: 1;
}
.tx-doc-head .tx-close:hover { background: rgba(255,255,255,0.06); color: #FFFFFF; }
.tx-doc-title {
margin: 0;
font-family: "Source Serif Pro", Georgia, serif;
font-size: 32px;
font-weight: 500;
color: #F3F4F6;
letter-spacing: -0.01em;
line-height: 1.2;
padding-right: 40px;
}
.tx-doc-pills {
margin-top: 14px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.tx-doc-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 11px;
background: rgba(255,255,255,0.06);
color: #D1D5DB;
border-radius: 999px;
font-size: 12px;
border: 1px solid rgba(255,255,255,0.05);
}
.tx-doc-pill-ico { font-size: 11px; opacity: 0.8; }
.tx-doc-body {
flex: 1;
overflow-y: auto;
padding: 18px 36px 24px;
font-size: 14.5px;
line-height: 1.65;
}
.tx-doc-lede {
font-size: 16px;
color: #D1D5DB;
margin: 6px 0 22px;
line-height: 1.5;
}
.tx-doc-section { margin: 22px 0; }
.tx-doc-h {
margin: 0 0 8px;
font-size: 14px;
font-weight: 600;
color: #9CA3AF;
letter-spacing: 0.01em;
}
.tx-doc-list {
margin: 0;
padding-left: 18px;
color: #D1D5DB;
}
.tx-doc-list li {
margin: 4px 0;
line-height: 1.55;
}
.tx-doc-list li::marker { color: #6B7280; }
.tx-doc-list li strong { color: #F3F4F6; font-weight: 500; }
.tx-doc-quote {
margin: 10px 0;
padding: 12px 16px;
background: rgba(255,255,255,0.04);
border-left: 2px solid #6B7280;
border-radius: 0 8px 8px 0;
color: #E5E7EB;
font-style: italic;
}
.tx-doc-quote cite {
display: block;
margin-top: 6px;
font-size: 11px;
color: #9CA3AF;
font-style: normal;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.tx-doc-note {
padding: 12px 14px;
background: rgba(255,255,255,0.04);
border-radius: 8px;
color: #D1D5DB;
white-space: pre-wrap;
}
.tx-doc-raw {
margin-top: 24px;
padding-top: 16px;
border-top: 1px solid rgba(255,255,255,0.06);
}
.tx-doc-raw summary {
cursor: pointer;
color: #9CA3AF;
font-size: 12.5px;
letter-spacing: 0.02em;
padding: 4px 0;
}
.tx-doc-raw summary:hover { color: #E5E7EB; }
.tx-doc-raw-body { padding-top: 12px; }
.tx-doc-raw-line {
display: grid;
grid-template-columns: 110px 60px 1fr;
gap: 12px;
margin: 6px 0;
font-size: 13px;
color: #D1D5DB;
}
.tx-doc-raw-who { color: #818CF8; font-weight: 500; }
.tx-doc-raw-time { color: #6B7280; font-variant-numeric: tabular-nums; }
.tx-doc-raw-text { color: #E5E7EB; line-height: 1.5; }
.tx-doc-foot {
padding: 14px 24px 20px;
border-top: 1px solid rgba(255,255,255,0.06);
background: rgba(0,0,0,0.18);
display: flex;
align-items: center;
gap: 10px;
}
.tx-foot-shortcut {
background: transparent;
border: 1px solid rgba(255,255,255,0.08);
color: #D1D5DB;
padding: 9px 14px;
border-radius: 999px;
cursor: pointer;
font-size: 12.5px;
white-space: nowrap;
transition: border-color 0.12s ease, background-color 0.12s ease;
}
.tx-foot-shortcut:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); }
.tx-ask {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px 6px 16px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 999px;
transition: border-color 0.12s ease;
}
.tx-ask:focus-within { border-color: rgba(129, 140, 248, 0.6); }
.tx-ask-input {
flex: 1;
background: transparent;
border: none;
outline: none;
color: #F3F4F6;
font-size: 13.5px;
}
.tx-ask-input::placeholder { color: #9CA3AF; }
.tx-ask-send {
width: 32px;
height: 32px;
border-radius: 999px;
background: #818CF8;
border: none;
color: #0F0F14;
cursor: pointer;
font-size: 14px;
font-weight: 600;
}
.tx-ask-send:hover { background: #6366F1; }
.tx-ask-answer {
display: none;
margin: 12px 0 0;
padding: 14px 16px;
background: rgba(129, 140, 248, 0.08);
border: 1px solid rgba(129, 140, 248, 0.18);
border-radius: 10px;
}
.tx-ask-answer.open { display: block; }
.tx-ask-question {
font-size: 12px;
color: #818CF8;
margin-bottom: 6px;
font-weight: 500;
}
.tx-ask-pending { font-size: 13px; color: #9CA3AF; font-style: italic; }
.tx-ask-out { font-size: 14px; color: #E5E7EB; line-height: 1.55; white-space: pre-wrap; }
.tx-ask-err { color: #FCA5A5; }
.tx-empty {
padding: 40px;
font-size: 14px;
color: #9CA3AF;
text-align: center;
}
/* Legacy panel container kept transparent; real panel is .tx-doc. */
.tx-panel {
width: auto;
height: auto;
background: transparent;
display: contents;
}
.tx-panel {
width: 100%;
max-width: 820px;
background: #0E1116;
color: #E5E7EB;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: -8px 0 30px rgba(0,0,0,0.3);
}
.tx-header {
padding: 18px 24px 14px;
border-bottom: 1px solid #1F2937;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
flex-wrap: wrap;
}
.tx-header h2 {
margin: 0;
font-family: var(--font-serif);
font-size: 22px;
font-weight: 500;
color: #F9FAFB;
letter-spacing: -0.01em;
}
.tx-header .tx-meta {
margin: 4px 0 0;
font-size: 11px;
color: #9CA3AF;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.tx-header .tx-close {
background: transparent;
border: 1px solid #374151;
color: #E5E7EB;
width: 32px; height: 32px;
border-radius: 6px;
font-size: 18px;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.tx-header .tx-close:hover { background: #1F2937; }
.tx-context {
padding: 10px 24px;
background: #111827;
border-bottom: 1px solid #1F2937;
font-size: 11px;
color: #9CA3AF;
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.tx-context strong { color: #E5E7EB; font-weight: 500; }
.tx-tabs {
padding: 14px 24px 0;
display: flex;
gap: 4px;
}
.tx-tab {
padding: 7px 14px;
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
font-family: var(--font-sans);
font-size: 12px;
color: #9CA3AF;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.12s ease;
}
.tx-tab:hover { color: #E5E7EB; }
.tx-tab.active {
background: #1F2937;
color: #F9FAFB;
border-color: #374151;
}
.tx-tab .tx-tab-icon { font-size: 13px; opacity: 0.8; }
.tx-body {
flex: 1;
overflow-y: auto;
padding: 24px 32px 60px;
line-height: 1.65;
}
.tx-body h3 {
font-family: var(--font-sans);
font-size: 18px;
font-weight: 600;
color: #F9FAFB;
margin: 0 0 14px;
letter-spacing: -0.01em;
}
.tx-body h4 {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
color: #F9FAFB;
margin: 28px 0 10px;
letter-spacing: -0.005em;
}
.tx-body h5 {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
color: #F9FAFB;
margin: 18px 0 8px;
}
.tx-body p {
font-size: 14px;
color: #D1D5DB;
margin: 0 0 10px;
}
.tx-body ul {
margin: 0 0 14px;
padding-left: 22px;
}
.tx-body ul li {
font-size: 14px;
color: #D1D5DB;
margin-bottom: 8px;
line-height: 1.65;
}
.tx-body ul li::marker { color: #6B7280; }
.tx-body-note {
font-size: 14px;
color: #D1D5DB;
background: #111827;
border: 1px solid #1F2937;
border-radius: 8px;
padding: 18px 22px;
white-space: pre-wrap;
line-height: 1.7;
}
.tx-quote {
border-left: 2px solid #4F46E5;
padding: 8px 14px;
margin: 12px 0;
background: rgba(79, 70, 229, 0.06);
border-radius: 0 6px 6px 0;
}
.tx-quote p { margin: 0; font-size: 14px; color: #E5E7EB; font-style: italic; line-height: 1.6; }
.tx-quote .tx-quote-who { font-size: 11px; color: #9CA3AF; margin-top: 4px; font-style: normal; letter-spacing: 0.04em; text-transform: uppercase; }
.tx-action {
display: grid;
grid-template-columns: 110px 1fr;
gap: 10px;
padding: 8px 12px;
background: #111827;
border: 1px solid #1F2937;
border-radius: 6px;
margin-bottom: 6px;
align-items: start;
}
.tx-action .tx-action-who { font-size: 11px; font-weight: 500; color: #818CF8; letter-spacing: 0.04em; text-transform: uppercase; }
.tx-action .tx-action-what { font-size: 13px; color: #E5E7EB; }
.tx-transcript-line {
display: grid;
grid-template-columns: 96px 70px 1fr;
gap: 14px;
padding: 12px 0;
border-top: 1px solid #1F2937;
}
.tx-transcript-line:first-of-type { border-top: none; }
.tx-transcript-who {
font-size: 13px;
font-weight: 600;
color: #F9FAFB;
}
.tx-transcript-time {
font-size: 11px;
color: #6B7280;
font-variant-numeric: tabular-nums;
}
.tx-transcript-text {
font-size: 14px;
color: #D1D5DB;
line-height: 1.65;
}
/* Transcript chip on interaction rows */
.tx-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
background: #EEF2FF;
color: var(--indigo);
border-radius: 999px;
font-size: 11px;
font-weight: 500;
border: none;
cursor: pointer;
font-family: var(--font-sans);
}
.tx-chip:hover { background: var(--indigo); color: #FFFFFF; }
.tx-chip-icon { font-size: 10px; }
/* ============================================================
ASSESSMENT REVIEW (Karim reviews a client's submission)
Two-pane layout: foldable dimension structure + transcript bank
Click-anywhere commenting via .ar-target overlay handles
============================================================ */
.ar-shell {
display: block;
}
.ar-shell.bank-collapsed { display: block; }
/* Picker bar */
.ar-picker {
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 18px;
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.ar-picker label {
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--slate);
font-weight: 500;
}
.ar-picker select {
padding: 7px 12px;
border: 1px solid var(--border);
border-radius: 6px;
font-family: var(--font-sans);
font-size: 13px;
color: var(--ink);
background: #FFFFFF;
min-width: 280px;
}
.ar-picker select:focus { outline: none; border-color: var(--indigo); }
/* ============================================================
BCG-GRADE ASSESSMENT VISUALS (heatmap, radar, waterfall, quadrant)
5-band maturity color scale (Fragmented/Reactive/Defined/Integrated/Scalable)
============================================================ */
/* 5-band maturity color tokens */
:root {
--mat-fragmented: #B91C1C; /* deep red */
--mat-fragmented-bg: #FEE2E2;
--mat-fragmented-border: #FECACA;
--mat-reactive: #DC2626; /* red */
--mat-reactive-bg: #FEF2F2;
--mat-reactive-border: #FECACA;
--mat-defined: #D97706; /* amber */
--mat-defined-bg: #FEF3C7;
--mat-defined-border: #FDE68A;
--mat-integrated: #16A34A; /* green */
--mat-integrated-bg: #DCFCE7;
--mat-integrated-border: #BBF7D0;
--mat-scalable: #065F46; /* deep green */
--mat-scalable-bg: #D1FAE5;
--mat-scalable-border: #A7F3D0;
}
/* Executive summary panel (top of assessment) */
.bcg-exec {
background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
color: #F1F5F9;
border-radius: var(--radius);
padding: 26px 30px;
margin-bottom: 16px;
position: relative;
overflow: hidden;
}
.bcg-exec::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 4px; height: 100%;
background: var(--indigo);
}
.bcg-exec-eyebrow {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #818CF8;
margin: 0 0 8px;
}
.bcg-exec-headline {
font-family: var(--font-serif);
font-size: 28px;
font-weight: 500;
color: #F9FAFB;
margin: 0 0 14px;
line-height: 1.25;
letter-spacing: -0.01em;
}
.bcg-exec-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 18px;
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid rgba(255,255,255,0.1);
}
.bcg-exec-stat .label { font-size: 9px; color: #94A3B8; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; margin: 0 0 4px; }
.bcg-exec-stat .value { font-family: var(--font-serif); font-size: 22px; color: #F9FAFB; line-height: 1; margin: 0; }
.bcg-exec-stat .sub { font-size: 11px; color: #CBD5E1; margin: 4px 0 0; }
.bcg-exec-pill {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.bcg-exec-pill.fragmented { background: var(--mat-fragmented); color: #FFFFFF; }
.bcg-exec-pill.reactive { background: var(--mat-reactive); color: #FFFFFF; }
.bcg-exec-pill.defined { background: var(--mat-defined); color: #FFFFFF; }
.bcg-exec-pill.integrated { background: var(--mat-integrated); color: #FFFFFF; }
.bcg-exec-pill.scalable { background: var(--mat-scalable); color: #FFFFFF; }
/* Two-up viz grid */
.bcg-viz-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 14px;
}
.bcg-viz-card {
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px 20px;
}
.bcg-viz-card h3 {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--slate);
margin: 0 0 4px;
}
.bcg-viz-card .bcg-viz-sub {
font-size: 11px;
color: var(--slate);
margin: 0 0 14px;
line-height: 1.5;
}
/* Heatmap */
.bcg-heatmap {
width: 100%;
border-collapse: separate;
border-spacing: 3px;
font-size: 11px;
}
.bcg-heatmap th {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--slate);
padding: 4px 6px;
text-align: center;
font-weight: 500;
}
.bcg-heatmap th.dim-col { text-align: left; padding-left: 0; }
.bcg-heatmap td {
padding: 0;
vertical-align: middle;
}
.bcg-heatmap .dim-name {
font-size: 11px;
font-weight: 500;
color: var(--ink);
padding: 6px 0;
white-space: nowrap;
}
.bcg-heat-cell {
height: 38px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-serif);
font-size: 14px;
font-weight: 500;
cursor: pointer;
border: 1px solid transparent;
transition: transform 0.12s ease, border-color 0.12s ease;
position: relative;
}
.bcg-heat-cell:hover { transform: scale(1.05); border-color: var(--ink); z-index: 1; }
.bcg-heat-cell.empty { background: #F4F4F5; color: #A1A1AA; font-size: 11px; }
.bcg-heat-cell.fragmented { background: var(--mat-fragmented); color: #FFFFFF; }
.bcg-heat-cell.reactive { background: var(--mat-reactive); color: #FFFFFF; }
.bcg-heat-cell.defined { background: var(--mat-defined); color: #FFFFFF; }
.bcg-heat-cell.integrated { background: var(--mat-integrated); color: #FFFFFF; }
.bcg-heat-cell.scalable { background: var(--mat-scalable); color: #FFFFFF; }
.bcg-heatmap-legend {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 12px;
font-size: 10px;
color: var(--slate);
}
.bcg-heatmap-legend .swatch {
display: inline-flex;
align-items: center;
gap: 4px;
}
.bcg-heatmap-legend .dot {
width: 10px; height: 10px;
border-radius: 2px;
}
/* Radar / spider */
.bcg-radar {
width: 100%;
max-width: 340px;
margin: 0 auto;
display: block;
}
.bcg-radar-legend {
display: flex;
gap: 16px;
justify-content: center;
margin-top: 8px;
font-size: 10px;
color: var(--slate);
}
.bcg-radar-legend .swatch {
display: inline-flex;
align-items: center;
gap: 5px;
}
.bcg-radar-legend .line {
width: 14px; height: 2px;
}
/* Waterfall (top gaps) */
.bcg-waterfall-row {
display: grid;
grid-template-columns: 220px 1fr 60px;
gap: 10px;
align-items: center;
padding: 8px 0;
border-top: 1px solid var(--border);
font-size: 12px;
}
.bcg-waterfall-row:first-of-type { border-top: none; }
.bcg-waterfall-row .lbl strong { display: block; color: var(--ink); font-weight: 500; }
.bcg-waterfall-row .lbl .sub { font-size: 10px; color: var(--slate); }
.bcg-waterfall-row .bar-track {
background: #F4F4F5;
height: 8px;
border-radius: 4px;
position: relative;
overflow: hidden;
}
.bcg-waterfall-row .bar-fill {
height: 100%;
border-radius: 4px;
}
.bcg-waterfall-row .num {
font-family: var(--font-serif);
font-size: 15px;
color: var(--ink);
text-align: right;
}
/* Prioritization quadrant */
.bcg-quadrant-wrap {
position: relative;
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px 30px;
margin-bottom: 14px;
}
.bcg-quadrant {
position: relative;
width: 100%;
aspect-ratio: 1.5 / 1;
background: #FAFAFA;
border: 1px solid var(--border);
border-radius: 8px;
}
.bcg-quadrant-divider-h {
position: absolute;
top: 50%; left: 0; right: 0;
border-top: 1px dashed #CBD5E1;
}
.bcg-quadrant-divider-v {
position: absolute;
left: 50%; top: 0; bottom: 0;
border-left: 1px dashed #CBD5E1;
}
.bcg-quadrant-label {
position: absolute;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slate);
padding: 4px 8px;
background: rgba(255,255,255,0.7);
border-radius: 4px;
}
.bcg-quadrant-label.tl { top: 8px; left: 12px; }
.bcg-quadrant-label.tr { top: 8px; right: 12px; color: var(--indigo); }
.bcg-quadrant-label.bl { bottom: 8px; left: 12px; }
.bcg-quadrant-label.br { bottom: 8px; right: 12px; }
.bcg-quadrant-dot {
position: absolute;
width: 24px; height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 600;
color: #FFFFFF;
font-family: var(--font-serif);
cursor: pointer;
transition: transform 0.12s ease;
transform: translate(-50%, -50%);
}
.bcg-quadrant-dot:hover {
transform: translate(-50%, -50%) scale(1.3);
z-index: 2;
}
.bcg-quadrant-dot.fragmented { background: var(--mat-fragmented); }
.bcg-quadrant-dot.reactive { background: var(--mat-reactive); }
.bcg-quadrant-dot.defined { background: var(--mat-defined); }
.bcg-quadrant-dot.integrated { background: var(--mat-integrated); }
.bcg-quadrant-dot.scalable { background: var(--mat-scalable); }
.bcg-quadrant-axis-y {
position: absolute;
left: -8px;
top: 50%;
transform: translate(-100%, -50%) rotate(-90deg);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slate);
font-weight: 500;
white-space: nowrap;
}
.bcg-quadrant-axis-x {
text-align: center;
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slate);
font-weight: 500;
margin-top: 8px;
}
/* Fit ranking card (collapsible: row head + optional rationale body) */
.bcg-fit-card {
background: var(--paper);
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
transition: border-color 0.12s ease;
}
.bcg-fit-card:hover { border-color: var(--indigo); }
.bcg-fit-card.open { border-color: var(--indigo); }
.bcg-fit-row {
display: grid;
grid-template-columns: 26px 1fr 140px 48px 78px 30px;
gap: 12px;
align-items: center;
padding: 12px 14px;
cursor: pointer;
background: var(--paper);
transition: background 0.12s ease;
}
.bcg-fit-row:hover { background: #F4F4F5; }
.bcg-fit-row:hover .bcg-fit-chev { background: var(--indigo); color: #FFFFFF; }
.bcg-fit-rank {
font-family: var(--font-serif);
font-size: 14px;
color: var(--slate);
text-align: center;
font-weight: 500;
}
.bcg-fit-service {
margin: 0;
font-size: 13px;
font-weight: 500;
color: var(--ink);
line-height: 1.2;
}
.bcg-fit-dim {
margin: 2px 0 0;
font-size: 10px;
color: var(--slate);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.bcg-fit-chev {
width: 28px; height: 28px;
border-radius: 50%;
background: #E5E7EB;
color: var(--ink);
display: inline-flex; align-items: center; justify-content: center;
font-size: 16px;
font-weight: 600;
line-height: 1;
transition: all 0.12s ease;
border: 1px solid #D4D4D8;
}
.bcg-fit-card.open .bcg-fit-chev {
background: var(--indigo);
color: #FFFFFF;
border-color: var(--indigo);
}
.bcg-fit-rationale {
border-top: 1px solid var(--border);
background: #FAFAFA;
padding: 12px 16px;
}
.bcg-fit-rationale-label {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slate);
margin: 0 0 6px;
}
.bcg-fit-rationale-body {
margin: 0;
font-size: 12px;
color: var(--ink);
line-height: 1.55;
}
/* Evidence breakdown inside the rationale panel */
.fit-evidence {
display: grid;
gap: 6px;
}
.fit-ev-row {
display: grid;
grid-template-columns: 180px 1fr;
gap: 14px;
align-items: start;
padding: 6px 0;
border-top: 1px solid var(--border);
}
.fit-ev-row:first-child { border-top: none; padding-top: 0; }
.fit-ev-label {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--slate);
}
.fit-ev-value {
font-size: 12px;
color: var(--ink);
line-height: 1.5;
}
.fit-ev-value strong { font-weight: 500; color: var(--ink); }
.fit-ev-quote {
background: var(--paper);
border-left: 2px solid var(--indigo);
padding: 8px 12px;
border-radius: 0 4px 4px 0;
display: block;
}
.fit-ev-stress {
display: block;
margin-top: 4px;
font-size: 10px;
color: #92400E;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* Simplified Rationale block. Used by Top mandate match expansion.
Two sections (Assessment / Transcripts) + a small Commercial fit footer. */
.fit-rationale-simple {
padding: 0;
}
.fit-rationale-section {
margin-bottom: 14px;
}
.fit-rationale-section:last-of-type { margin-bottom: 10px; }
.fit-rationale-simple .fit-rationale-label {
margin: 0 0 8px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--indigo);
}
/* Prose summary paragraph used by Top mandate match. Replaces the old
bullet list so Karim reads one synthesized paragraph per section
instead of scanning a list. */
.fit-rationale-prose {
margin: 0;
font-size: 13px;
color: var(--ink);
line-height: 1.6;
}
.fit-rationale-prose strong { font-weight: 500; color: var(--ink); }
.fit-rationale-prose em { color: var(--slate); }
.fit-rationale-empty {
margin: 0;
font-size: 12px;
color: var(--slate);
font-style: italic;
}
.fit-rationale-fit {
display: flex;
align-items: baseline;
gap: 10px;
padding: 8px 12px;
background: #FAFAF7;
border: 1px solid var(--border-soft, #E5E1D8);
border-radius: 6px;
flex-wrap: wrap;
}
.fit-rationale-fit-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slate);
}
.fit-rationale-fit-value {
font-size: 12px;
color: var(--ink);
}
.fit-rationale-fit-value strong { font-weight: 500; color: var(--ink); }
.bcg-fit-meta {
margin: 2px 0 0;
font-size: 11px;
color: var(--slate);
line-height: 1.4;
}
.bcg-fit-bar-wrap {
width: 100%;
}
.bcg-fit-bar-track {
background: #F4F4F5;
height: 8px;
border-radius: 4px;
overflow: hidden;
}
.bcg-fit-bar-fill {
height: 100%;
border-radius: 4px;
transition: width 0.3s ease;
}
.bcg-fit-bar-fill.fragmented { background: var(--mat-fragmented); }
.bcg-fit-bar-fill.reactive { background: var(--mat-reactive); }
.bcg-fit-bar-fill.defined { background: var(--mat-defined); }
.bcg-fit-bar-fill.integrated { background: var(--mat-integrated); }
.bcg-fit-bar-fill.scalable { background: var(--mat-scalable); }
.bcg-fit-bar-fill.empty { background: #E5E7EB; }
.bcg-fit-pct {
font-family: var(--font-serif);
font-size: 18px;
color: var(--ink);
text-align: right;
line-height: 1;
}
.bcg-fit-label {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 999px;
text-align: center;
white-space: nowrap;
}
.bcg-fit-label.fit-strong { background: var(--mat-fragmented); color: #FFFFFF; }
.bcg-fit-label.fit-good { background: var(--mat-reactive); color: #FFFFFF; }
.bcg-fit-label.fit-mod { background: var(--mat-defined); color: #FFFFFF; }
.bcg-fit-label.fit-watch { background: #F4F4F5; color: var(--slate); }
.bcg-fit-label.fit-maintain { background: var(--mat-integrated); color: #FFFFFF; }
/* Compact per-dimension card (single row, expandable) */
.bcg-dim-row-head {
display: grid;
grid-template-columns: 4px 1fr auto auto 22px;
gap: 12px;
align-items: center;
padding: 12px 16px;
cursor: pointer;
user-select: none;
background: var(--paper);
border-radius: var(--radius);
transition: background 0.12s ease;
}
.bcg-dim-row-head:hover { background: #FAFAFA; }
.bcg-dim-row-bar {
width: 4px; height: 32px;
border-radius: 2px;
}
.bcg-dim-row-bar.fragmented { background: var(--mat-fragmented); }
.bcg-dim-row-bar.reactive { background: var(--mat-reactive); }
.bcg-dim-row-bar.defined { background: var(--mat-defined); }
.bcg-dim-row-bar.integrated { background: var(--mat-integrated); }
.bcg-dim-row-bar.scalable { background: var(--mat-scalable); }
.bcg-dim-row-bar.empty { background: #E5E7EB; }
.bcg-dim-row-name .title {
margin: 0;
font-size: 13px;
font-weight: 500;
color: var(--ink);
}
.bcg-dim-row-name .weakest {
margin: 2px 0 0;
font-size: 11px;
color: var(--slate);
line-height: 1.4;
}
.bcg-dim-row-name .weakest strong { color: var(--ink); font-weight: 500; }
.bcg-dim-row-score {
font-family: var(--font-serif);
font-size: 20px;
color: var(--ink);
line-height: 1;
min-width: 40px;
text-align: right;
}
.bcg-dim-row-chev {
width: 22px; height: 22px;
border-radius: 50%;
background: #F4F4F5;
color: var(--slate);
display: inline-flex; align-items: center; justify-content: center;
font-size: 13px;
font-weight: 600;
}
.bcg-dim-card.open .bcg-dim-row-chev { background: var(--indigo); color: #FFFFFF; }
.bcg-dim-row-body {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr;
border-top: 1px solid var(--border);
}
.bcg-dim-row-body .bcg-dim-card-section {
padding: 12px 16px;
border-right: 1px solid var(--border);
}
.bcg-dim-row-body .bcg-dim-card-section:last-child { border-right: none; }
/* Strategic per-dimension panel (legacy compact card) */
.bcg-dim-card {
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 0;
margin-bottom: 6px;
overflow: hidden;
}
.bcg-dim-card-head {
display: grid;
grid-template-columns: 6px 1fr auto;
gap: 16px;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
}
.bcg-dim-card-bar {
width: 6px;
align-self: stretch;
}
.bcg-dim-card-bar.fragmented { background: var(--mat-fragmented); }
.bcg-dim-card-bar.reactive { background: var(--mat-reactive); }
.bcg-dim-card-bar.defined { background: var(--mat-defined); }
.bcg-dim-card-bar.integrated { background: var(--mat-integrated); }
.bcg-dim-card-bar.scalable { background: var(--mat-scalable); }
.bcg-dim-card-bar.empty { background: #E5E7EB; }
.bcg-dim-card-title h3 { margin: 0; font-size: 16px; font-weight: 500; color: var(--ink); }
.bcg-dim-card-title .sub { font-size: 11px; color: var(--slate); margin: 2px 0 0; }
.bcg-dim-card-score {
text-align: right;
display: flex;
align-items: center;
gap: 12px;
}
.bcg-dim-card-score .v { font-family: var(--font-serif); font-size: 28px; line-height: 1; color: var(--ink); }
.bcg-dim-card-body {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr;
gap: 0;
}
.bcg-dim-card-section {
padding: 14px 18px;
border-right: 1px solid var(--border);
}
.bcg-dim-card-section:last-child { border-right: none; }
.bcg-dim-card-section .label {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slate);
margin: 0 0 8px;
}
.bcg-dim-card-section .risk-signal {
font-size: 13px;
color: var(--ink);
font-weight: 500;
line-height: 1.45;
margin: 0 0 6px;
}
.bcg-dim-card-section .interpretation {
font-size: 12px;
color: var(--slate);
line-height: 1.5;
margin: 0;
}
.bcg-dim-card-section .deliverable {
font-size: 13px;
font-weight: 500;
color: var(--ink);
margin: 0 0 4px;
}
.bcg-dim-card-section .meta {
font-size: 11px;
color: var(--slate);
margin: 4px 0 0;
}
.bcg-dim-card-section .ai-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 999px;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
background: #EEF2FF;
color: var(--indigo);
margin: 0 0 6px;
}
.bcg-dim-card-section .ai-chip.high { background: #4F46E5; color: #FFFFFF; }
.bcg-dim-card-section .ai-chip.medium { background: #818CF8; color: #FFFFFF; }
.bcg-dim-card-section .ai-chip.low { background: #F4F4F5; color: var(--slate); }
.bcg-dim-card-section .ai-text { font-size: 12px; color: var(--ink); line-height: 1.45; margin: 0; }
/* Toggle bar for layers */
.bcg-toggles {
display: flex;
gap: 6px;
flex-wrap: wrap;
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 10px 14px;
margin-bottom: 12px;
align-items: center;
}
.bcg-toggles .label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slate);
margin-right: 6px;
}
.bcg-toggle {
background: var(--paper);
border: 1px solid var(--border);
color: var(--ink);
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 5px;
}
.bcg-toggle:hover { border-color: var(--indigo); color: var(--indigo); }
.bcg-toggle.active {
background: var(--indigo);
border-color: var(--indigo);
color: #FFFFFF;
}
.bcg-toggle .check { font-size: 11px; }
.bcg-divider {
display: inline-block;
width: 1px;
height: 16px;
background: var(--border);
margin: 0 2px;
}
.bcg-link {
font-size: 11px;
color: var(--indigo);
text-decoration: none;
padding: 4px 8px;
border-radius: 999px;
transition: background 0.12s ease;
}
.bcg-link:hover {
background: rgba(67, 56, 202, 0.08);
text-decoration: none;
}
/* Drill-down modal: full context for one sub-dim or dimension */
.bcg-drill-overlay {
position: fixed; inset: 0;
background: rgba(15, 23, 42, 0.55);
display: none;
align-items: center; justify-content: center;
z-index: 90;
padding: 24px;
}
.bcg-drill-overlay.open { display: flex; }
.bcg-drill {
background: var(--paper);
border-radius: var(--radius-lg);
width: 100%;
max-width: 720px;
max-height: 88vh;
overflow: hidden;
display: flex; flex-direction: column;
box-shadow: 0 40px 70px rgba(15, 23, 42, 0.4);
}
.bcg-drill-head {
padding: 18px 24px 14px;
border-bottom: 1px solid var(--border);
position: relative;
}
.bcg-drill-head .pill-row {
display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px;
}
.bcg-drill-head h3 {
font-family: var(--font-serif);
font-size: 20px; font-weight: 500;
color: var(--ink); margin: 0;
line-height: 1.25;
}
.bcg-drill-head .sub { font-size: 11px; color: var(--slate); margin: 4px 0 0; letter-spacing: 0.04em; text-transform: uppercase; }
.bcg-drill-close {
position: absolute; top: 14px; right: 16px;
background: transparent; border: none;
font-size: 20px; color: var(--slate);
cursor: pointer; padding: 4px 8px;
border-radius: 4px;
}
.bcg-drill-close:hover { background: #F4F4F5; color: var(--ink); }
.bcg-drill-body { padding: 18px 24px 24px; overflow-y: auto; }
.bcg-drill-section { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.bcg-drill-section:last-child { border-bottom: none; padding-bottom: 0; }
.bcg-drill-section h4 {
font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
font-weight: 600; color: var(--slate);
margin: 0 0 8px;
}
.bcg-drill-row {
display: grid; grid-template-columns: 1fr 60px; gap: 12px;
align-items: center; padding: 8px 12px;
background: #FAFAFA; border-radius: 6px;
margin-bottom: 4px;
}
.bcg-drill-row .q { font-size: 12px; color: var(--ink); line-height: 1.5; }
.bcg-drill-row .a {
font-family: var(--font-serif); font-size: 16px;
text-align: center;
padding: 4px 0;
border-radius: 4px;
}
.bcg-drill-row .a.score-1 { background: #FEE2E2; color: #991B1B; }
.bcg-drill-row .a.score-2 { background: #FED7AA; color: #9A3412; }
.bcg-drill-row .a.score-3 { background: #FEF3C7; color: #92400E; }
.bcg-drill-row .a.score-4 { background: #D9F99D; color: #3F6212; }
.bcg-drill-row .a.score-5 { background: #BBF7D0; color: #14532D; }
.bcg-drill-row .a.empty { color: var(--slate); font-size: 11px; font-style: italic; font-family: var(--font-sans); }
.bcg-drill-callout {
background: #F5F7FF;
border-left: 3px solid var(--indigo);
border-radius: 0 6px 6px 0;
padding: 10px 14px;
font-size: 13px;
color: var(--ink);
line-height: 1.55;
}
.bcg-drill-callout.warning {
background: #FEF3C7;
border-left-color: #D97706;
}
.bcg-drill-callout .lbl {
font-size: 9px; color: var(--indigo);
letter-spacing: 0.06em; text-transform: uppercase;
font-weight: 600; margin: 0 0 4px;
}
.bcg-drill-callout.warning .lbl { color: #92400E; }
.bcg-drill-callout p { margin: 0; }
.bcg-drill-quote {
background: var(--paper);
border: 1px solid var(--border);
border-radius: 6px;
padding: 10px 14px;
font-size: 13px;
font-style: italic;
color: var(--ink);
line-height: 1.6;
}
/* "How to read this" mini icon next to viz titles */
.bcg-howto {
display: inline-flex;
align-items: center; justify-content: center;
width: 16px; height: 16px;
background: #F4F4F5;
color: var(--slate);
border-radius: 50%;
font-size: 9px;
font-weight: 700;
cursor: help;
margin-left: 6px;
font-style: normal;
}
.bcg-howto:hover { background: var(--indigo); color: #FFFFFF; }
/* Self-explanatory legend strip */
.bcg-legend-strip {
display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
margin-top: 12px; padding-top: 10px;
border-top: 1px solid var(--border);
font-size: 10px; color: var(--slate);
}
.bcg-legend-strip strong { color: var(--ink); font-weight: 500; }
/* Quadrant: dot labels (text label below each dot) */
.bcg-quadrant-dot-label {
position: absolute;
font-size: 9px;
font-weight: 500;
color: var(--ink);
background: rgba(255,255,255,0.92);
padding: 1px 5px;
border-radius: 3px;
white-space: nowrap;
pointer-events: none;
transform: translate(-50%, 6px);
max-width: 90px;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
}
/* Heatmap: sub-dim header rotated for full names */
.bcg-heatmap thead th.sub-name {
font-size: 9px;
font-weight: 500;
color: var(--slate);
padding: 0;
vertical-align: bottom;
height: 90px;
text-align: center;
position: relative;
}
.bcg-heatmap thead th.sub-name span {
display: inline-block;
transform: rotate(-45deg);
transform-origin: center;
position: absolute;
bottom: 8px;
left: 50%;
margin-left: -45px;
width: 90px;
text-align: center;
font-family: var(--font-sans);
line-height: 1.2;
}
/* Tooltip overlay */
.bcg-tip {
position: absolute;
z-index: 50;
background: var(--ink);
color: #F9FAFB;
padding: 8px 12px;
border-radius: 6px;
font-size: 11px;
line-height: 1.5;
max-width: 240px;
pointer-events: none;
opacity: 0;
transition: opacity 0.12s ease;
}
.bcg-tip.show { opacity: 1; }
.bcg-tip strong { color: #FFFFFF; }
.bcg-tip .tip-band {
display: inline-block;
padding: 1px 6px;
border-radius: 3px;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 4px;
}
/* Overview strip with scores */
.ar-overview {
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px 22px;
margin-bottom: 14px;
}
.ar-overview-grid {
display: grid;
grid-template-columns: 110px 1fr;
gap: 22px;
align-items: center;
}
.ar-overall-ring {
width: 100px; height: 100px;
border-radius: 50%;
border: 4px solid var(--indigo);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
background: #FFFFFF;
}
.ar-overall-ring .v { font-family: var(--font-serif); font-size: 32px; color: var(--ink); line-height: 1; }
.ar-overall-ring .lbl { font-size: 9px; color: var(--slate); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; }
.ar-dim-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.ar-dim-cell {
padding: 10px 8px;
border-radius: 6px;
text-align: center;
border: 1px solid var(--border);
background: var(--paper);
cursor: pointer;
transition: all 0.12s ease;
}
.ar-dim-cell:hover { border-color: var(--indigo); }
.ar-dim-cell .v { font-family: var(--font-serif); font-size: 20px; color: var(--ink); display: block; line-height: 1; }
.ar-dim-cell .lbl { font-size: 9px; color: var(--slate); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; display: block; }
.ar-dim-cell.green { border-color: #BBF7D0; background: #F0FDF4; }
.ar-dim-cell.amber { border-color: #FDE68A; background: #FEFCE8; }
.ar-dim-cell.red { border-color: #FECACA; background: #FEF2F2; }
.ar-dim-cell.empty { opacity: 0.5; }
/* Foldable dimension panes */
.ar-dim {
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 12px;
overflow: hidden;
position: relative;
}
.ar-dim-head {
padding: 14px 18px;
display: grid;
grid-template-columns: 32px 1fr auto auto;
gap: 14px;
align-items: center;
cursor: pointer;
user-select: none;
background: var(--paper);
border-bottom: 1px solid transparent;
transition: background 0.12s ease;
position: relative;
}
.ar-dim-head:hover { background: #FAFAFA; }
.ar-dim.open .ar-dim-head { border-bottom-color: var(--border); }
.ar-dim-chevron {
width: 24px; height: 24px;
display: flex; align-items: center; justify-content: center;
font-size: 11px;
color: var(--slate);
background: #F4F4F5;
border-radius: 4px;
transition: transform 0.16s ease;
}
.ar-dim.open .ar-dim-chevron { transform: rotate(90deg); }
.ar-dim-head h3 {
margin: 0;
font-size: 16px;
font-weight: 500;
color: var(--ink);
}
.ar-dim-head .ar-dim-blurb {
font-size: 11px;
color: var(--slate);
margin: 2px 0 0;
line-height: 1.4;
}
.ar-dim-score {
text-align: right;
padding: 4px 12px;
border-radius: 6px;
background: #F4F4F5;
min-width: 78px;
}
.ar-dim-score .v { font-family: var(--font-serif); font-size: 20px; color: var(--ink); display: block; line-height: 1; }
.ar-dim-score .lbl { font-size: 9px; color: var(--slate); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; display: block; }
.ar-dim-score.green { background: #F0FDF4; }
.ar-dim-score.amber { background: #FEFCE8; }
.ar-dim-score.red { background: #FEF2F2; }
.ar-dim-body {
display: none;
padding: 14px 18px 18px;
background: var(--paper);
}
.ar-dim.open .ar-dim-body { display: block; }
/* Sub-dimension cards */
.ar-sub {
border: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 10px;
background: var(--paper);
overflow: hidden;
}
.ar-sub-head {
padding: 10px 14px;
display: grid;
grid-template-columns: 20px 1fr auto;
gap: 12px;
align-items: center;
cursor: pointer;
user-select: none;
background: #FAFAFA;
border-bottom: 1px solid transparent;
transition: background 0.12s ease;
}
.ar-sub-head:hover { background: #F4F4F5; }
.ar-sub.open .ar-sub-head { border-bottom-color: var(--border); background: var(--paper); }
.ar-sub-chevron {
font-size: 10px;
color: var(--slate);
transition: transform 0.16s ease;
}
.ar-sub.open .ar-sub-chevron { transform: rotate(90deg); }
.ar-sub-head h4 { margin: 0; font-size: 13px; font-weight: 500; color: var(--ink); }
.ar-sub-score {
font-family: var(--font-serif);
font-size: 14px;
color: var(--ink);
padding: 2px 10px;
background: #FFFFFF;
border: 1px solid var(--border);
border-radius: 999px;
min-width: 36px;
text-align: center;
}
.ar-sub-body {
display: none;
padding: 12px 14px 14px;
}
.ar-sub.open .ar-sub-body { display: block; }
/* Question rows */
.ar-q {
padding: 10px 12px;
border-radius: 6px;
margin-bottom: 6px;
border: 1px solid transparent;
cursor: pointer;
position: relative;
transition: all 0.12s ease;
display: grid;
grid-template-columns: 1fr 64px;
gap: 12px;
align-items: center;
}
.ar-q:hover { background: #FAFAFA; border-color: var(--border); }
.ar-q.has-comment { background: #FEF3C7; border-color: #FDE68A; }
.ar-q.has-comment:hover { background: #FDE68A; }
.ar-q-text { font-size: 13px; color: var(--ink); line-height: 1.5; }
.ar-q-answer {
display: flex; justify-content: flex-end; align-items: center; gap: 6px;
}
.ar-q-empty { color: var(--slate); font-size: 11px; font-style: italic; }
/* Qualitative answer block */
.ar-qual {
background: #F5F7FF;
border: 1px solid #C7D2FE;
border-left: 3px solid var(--indigo);
border-radius: 0 8px 8px 0;
padding: 12px 14px;
margin-top: 12px;
cursor: pointer;
position: relative;
}
.ar-qual:hover { background: #E0E7FF; }
.ar-qual.has-comment { background: #FEF3C7; border-color: #FDE68A; border-left-color: #D97706; }
.ar-qual-label {
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--indigo);
font-weight: 500;
margin-bottom: 6px;
}
.ar-qual.has-comment .ar-qual-label { color: #92400E; }
.ar-qual p {
margin: 0;
font-size: 13px;
color: var(--ink);
line-height: 1.6;
font-style: italic;
}
/* Comment marker bubble (small badge on commented zones) */
.ar-comment-marker {
position: absolute;
top: 6px; right: 6px;
display: inline-flex;
align-items: center;
gap: 4px;
background: #D97706;
color: #FFFFFF;
font-size: 10px;
font-weight: 600;
padding: 1px 6px;
border-radius: 999px;
z-index: 2;
}
/* Click-to-comment hint on hover */
.ar-target { position: relative; }
.ar-target::after {
content: "+ Comment";
position: absolute;
top: 6px; right: 6px;
font-size: 10px;
font-weight: 500;
color: var(--indigo);
background: var(--paper);
border: 1px solid #C7D2FE;
padding: 2px 8px;
border-radius: 999px;
opacity: 0;
transition: opacity 0.12s ease;
pointer-events: none;
}
.ar-target:hover::after { opacity: 1; }
.ar-target.has-comment::after { display: none; }
/* Overall comment input */
.ar-overall-comment {
background: #FFFBEB;
border: 1px solid #FDE68A;
border-radius: 8px;
padding: 12px 14px;
margin-bottom: 14px;
}
.ar-overall-comment p { margin: 0 0 6px; font-size: 11px; color: #92400E; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; }
/* Comment thread inside a zone */
.ar-comment {
background: #FFFFFF;
border: 1px solid #FDE68A;
border-radius: 6px;
padding: 8px 12px;
margin-top: 8px;
font-size: 12px;
}
.ar-comment .ar-comment-head {
font-size: 10px;
color: #92400E;
margin-bottom: 4px;
letter-spacing: 0.04em;
font-weight: 500;
}
.ar-comment p { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.55; }
.ar-comment .ar-comment-del {
float: right;
background: transparent;
border: none;
color: var(--slate);
cursor: pointer;
font-size: 11px;
padding: 0;
}
.ar-comment .ar-comment-del:hover { color: #DC2626; }
/* Comment compose modal */
.ar-cm-overlay {
position: fixed; inset: 0;
background: rgba(15, 23, 42, 0.55);
display: none;
align-items: center;
justify-content: center;
z-index: 90;
padding: 20px;
}
.ar-cm-overlay.open { display: flex; }
.ar-cm {
background: var(--paper);
border-radius: var(--radius-lg);
width: 100%;
max-width: 520px;
padding: 24px 28px 22px;
box-shadow: 0 30px 60px rgba(15, 23, 42, 0.3);
}
.ar-cm h3 { margin: 0 0 4px; font-size: 17px; }
.ar-cm .ar-cm-context {
background: #F5F7FF;
border: 1px solid #C7D2FE;
border-left: 3px solid var(--indigo);
padding: 10px 12px;
border-radius: 0 6px 6px 0;
margin: 12px 0 14px;
font-size: 12px;
color: var(--ink);
line-height: 1.5;
}
.ar-cm-context .ar-cm-context-label { font-size: 10px; color: var(--indigo); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; margin-bottom: 4px; }
.ar-cm textarea {
width: 100%;
min-height: 110px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 6px;
font-family: var(--font-sans);
font-size: 13px;
color: var(--ink);
line-height: 1.55;
resize: vertical;
}
.ar-cm textarea:focus { outline: none; border-color: var(--indigo); }
.ar-cm-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 12px;
gap: 8px;
}
/* Transcript bank side panel */
/* Floating copilot: bottom-right bubble that follows Karim as he scrolls.
When expanded, becomes a 380px panel with a Transcripts / Emails source
toggle. When collapsed, becomes a 56px circular AI button. */
.ar-bank {
background: var(--paper);
border: 1px solid var(--border);
border-radius: 16px;
position: fixed;
right: 24px;
bottom: 24px;
width: 400px;
max-width: calc(100vw - 48px);
max-height: calc(100vh - 48px);
overflow: hidden;
display: flex;
flex-direction: column;
z-index: 90;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
}
.ar-bank.collapsed {
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--indigo);
border-color: var(--indigo);
align-items: center;
justify-content: center;
padding: 0;
}
.ar-bank-head {
padding: 14px 16px;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
}
.ar-bank-head h3 { margin: 0; font-size: 13px; font-weight: 500; color: var(--ink); }
.ar-bank-toggle {
background: var(--paper);
border: 1px solid var(--border);
border-radius: 4px;
width: 26px; height: 26px;
cursor: pointer;
font-size: 12px;
color: var(--slate);
display: inline-flex; align-items: center; justify-content: center;
}
.ar-bank-toggle:hover { border-color: var(--indigo); color: var(--indigo); }
.ar-bank-body {
flex: 1;
overflow-y: auto;
padding: 14px 16px 24px;
}
/* Collapsed bank (circular floating Ask button with a question mark icon) */
.ar-bank.collapsed { overflow: visible; cursor: pointer; }
.ar-bank.collapsed .ar-bank-body, .ar-bank.collapsed .ar-bank-head h3 { display: none; }
.ar-bank.collapsed .ar-bank-head {
border-bottom: none;
padding: 0;
width: 52px;
height: 52px;
justify-content: center;
background: transparent;
}
.ar-bank.collapsed .ar-bank-toggle {
background: transparent;
border: none;
width: 52px;
height: 52px;
padding: 0;
color: #FFFFFF;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.ar-bank.collapsed .ar-bank-toggle svg { width: 22px; height: 22px; flex-shrink: 0; }
.ar-bank.collapsed .ar-bank-toggle:hover { border-color: transparent; color: #FFFFFF; }
.ar-bank.collapsed:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18); transition: all 0.15s ease; }
/* Copilot multi-source toggle. Two independent chips, both can be active. */
.ar-bank-source-toggle {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
margin-bottom: 12px;
}
.ar-bank-source-label {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--slate);
margin-right: 2px;
}
.ar-bank-source-chip {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--paper);
border: 1px solid var(--border);
border-radius: 999px;
padding: 4px 10px 4px 8px;
font-size: 11px;
font-weight: 500;
color: var(--slate);
cursor: pointer;
transition: all 0.12s ease;
}
.ar-bank-source-chip:hover { border-color: var(--indigo); color: var(--indigo); }
.ar-bank-source-chip.active {
background: var(--indigo);
border-color: var(--indigo);
color: #FFFFFF;
}
.ar-bank-source-tick {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
line-height: 1;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
}
.ar-bank-source-chip:not(.active) .ar-bank-source-tick { background: #F4F4F5; color: var(--slate); }
/* Back-compat: keep the old class name styled in case anything still uses it. */
.ar-bank-source-btn {
display: inline-flex; align-items: center;
background: transparent;
border: 1px solid var(--border);
border-radius: 999px;
padding: 6px 10px;
font-size: 11px;
font-weight: 500;
color: var(--slate);
cursor: pointer;
transition: all 0.12s ease;
}
.ar-bank-source-btn.active {
background: var(--indigo);
border-color: var(--indigo);
color: #FFFFFF;
}
/* Stacked source section heading (Transcripts / Emails blocks) */
.ar-bank-section { margin-top: 14px; }
.ar-bank-section:first-of-type { margin-top: 10px; }
.ar-bank-section-head {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 0 8px;
padding-bottom: 6px;
border-bottom: 1px solid var(--border);
}
.ar-bank-section-title {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--indigo);
}
.ar-bank-section-count {
font-size: 10px;
color: var(--slate);
background: #F4F4F5;
border-radius: 999px;
padding: 1px 7px;
font-weight: 500;
}
.ar-bank-email-row {
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
margin-bottom: 8px;
cursor: pointer;
background: var(--paper);
transition: border-color 0.12s ease;
}
.ar-bank-email-row:hover { border-color: var(--indigo); }
.ar-bank-email-row .from {
font-size: 11px;
color: var(--indigo);
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 600;
}
.ar-bank-email-row .subj {
margin: 4px 0 2px;
font-size: 13px;
font-weight: 500;
color: var(--ink);
}
.ar-bank-email-row .when {
margin: 0;
font-size: 11px;
color: var(--slate);
}
.ar-bank-tx {
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
margin-bottom: 8px;
cursor: pointer;
background: var(--paper);
transition: all 0.12s ease;
}
.ar-bank-tx:hover { border-color: var(--indigo); transform: translateX(-2px); }
.ar-bank-tx .ar-bank-tx-type { font-size: 10px; color: var(--indigo); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; }
.ar-bank-tx h5 { margin: 4px 0 2px; font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.ar-bank-tx p { margin: 2px 0 0; font-size: 11px; color: var(--slate); }
/* Ask the transcript panel */
.ar-ask {
background: linear-gradient(135deg, #EEF2FF 0%, #F5F3FF 100%);
border: 1px solid #C7D2FE;
border-radius: 8px;
padding: 12px 14px;
margin-top: 14px;
}
.ar-ask h4 {
margin: 0 0 4px;
font-size: 12px;
font-weight: 600;
color: var(--ink);
display: flex; align-items: center; gap: 6px;
}
.ar-ask .ar-ask-icon {
width: 18px; height: 18px;
background: var(--indigo); color: #FFFFFF;
border-radius: 4px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 9px; font-weight: 700;
}
.ar-ask p.ar-ask-sub { margin: 0 0 8px; font-size: 11px; color: var(--slate); line-height: 1.4; }
.ar-ask-input {
display: flex;
gap: 6px;
}
.ar-ask-input input {
flex: 1;
padding: 7px 10px;
border: 1px solid #C7D2FE;
border-radius: 6px;
font-family: var(--font-sans);
font-size: 12px;
background: var(--paper);
color: var(--ink);
}
.ar-ask-input input:focus { outline: none; border-color: var(--indigo); }
.ar-ask-input button {
background: var(--indigo);
color: #FFFFFF;
border: none;
border-radius: 6px;
padding: 7px 12px;
font-size: 11px;
font-weight: 500;
cursor: pointer;
}
.ar-ask-input button:hover { background: #4338CA; }
.ar-ask-suggested {
display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px;
}
.ar-ask-suggested button {
background: var(--paper);
border: 1px solid #C7D2FE;
color: var(--indigo);
border-radius: 999px;
padding: 2px 8px;
font-size: 10px;
cursor: pointer;
}
.ar-ask-suggested button:hover { background: var(--indigo); color: #FFFFFF; }
.ar-ask-answer {
background: var(--paper);
border: 1px solid var(--border);
border-radius: 6px;
padding: 10px 12px;
margin-top: 8px;
}
.ar-ask-answer .ar-ask-q { font-size: 11px; color: var(--slate); font-style: italic; margin: 0 0 6px; }
.ar-ask-answer .ar-ask-a { font-size: 12px; color: var(--ink); margin: 0 0 6px; line-height: 1.55; }
.ar-ask-answer .ar-ask-cite {
background: #F4F4F5;
border-left: 2px solid var(--indigo);
border-radius: 0 4px 4px 0;
padding: 6px 10px;
font-size: 11px;
color: var(--slate);
margin-bottom: 4px;
}
.ar-ask-answer .ar-ask-cite strong { color: var(--ink); }
.ar-ask-answer .ar-ask-cite-src {
display: inline-block;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--indigo);
background: rgba(67, 56, 202, 0.10);
border-radius: 4px;
padding: 1px 5px;
margin-right: 6px;
vertical-align: 1px;
}
/* ============== Priority action modal (Add/Edit) ============== */
.pa-modal { overflow: hidden; border-radius: 14px; }
.pa-modal-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 20px 22px 14px;
border-bottom: 1px solid var(--border);
background: var(--paper);
}
.pa-modal-head h3 {
margin: 4px 0 0;
font-size: 18px;
font-weight: 500;
color: var(--ink);
letter-spacing: -0.005em;
}
.pa-modal-close {
background: transparent;
border: 1px solid var(--border);
border-radius: 6px;
width: 28px; height: 28px;
font-size: 16px;
line-height: 1;
color: var(--slate);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: all 0.12s ease;
}
.pa-modal-close:hover { border-color: var(--indigo); color: var(--indigo); }
.pa-modal-body { padding: 18px 22px 6px; }
.pa-modal-foot {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 14px 22px 18px;
border-top: 1px solid var(--border);
background: #FAFAF7;
}
.pa-field { margin-bottom: 14px; }
.pa-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.pa-field-row .pa-field { margin-bottom: 0; }
.pa-label {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--slate);
margin: 0 0 6px;
}
.pa-label-hint {
font-size: 10px;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: var(--slate);
}
.pa-input {
width: 100%;
padding: 8px 12px;
font-family: var(--font-sans);
font-size: 13px;
color: var(--ink);
background: var(--paper);
border: 1px solid var(--border);
border-radius: 8px;
box-sizing: border-box;
transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.pa-input:hover { border-color: var(--indigo); }
.pa-input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.18); }
select.pa-input { cursor: pointer; }
.pa-seg {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 4px;
background: #F4F4F5;
padding: 3px;
border-radius: 8px;
}
.pa-seg-btn {
background: transparent;
border: none;
border-radius: 6px;
padding: 7px 6px;
font-size: 12px;
font-weight: 500;
color: var(--slate);
cursor: pointer;
transition: all 0.12s ease;
}
.pa-seg-btn:hover { color: var(--indigo); }
.pa-seg-btn.is-active {
background: var(--paper);
color: var(--indigo);
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.pa-priority-preview {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin: 0 0 14px;
padding: 10px 14px;
background: linear-gradient(135deg, rgba(67, 56, 202, 0.05), rgba(201, 169, 97, 0.04));
border: 1px solid rgba(67, 56, 202, 0.16);
border-radius: 8px;
}
.pa-priority-sub { margin: 2px 0 0; font-size: 11px; color: var(--slate); font-weight: 400; letter-spacing: 0; text-transform: none; }
.pa-priority-chip {
display: inline-flex;
align-items: baseline;
gap: 6px;
padding: 6px 12px;
background: var(--paper);
border: 1px solid var(--border);
border-radius: 999px;
font-family: var(--font-serif, var(--font-sans));
font-size: 18px;
font-weight: 500;
color: var(--ink);
}
.pa-priority-chip.kj-rag-red { background: rgba(220, 38, 38, 0.08); border-color: rgba(220, 38, 38, 0.32); color: #B91C1C; }
.pa-priority-chip.kj-rag-amber { background: rgba(217, 119, 6, 0.10); border-color: rgba(217, 119, 6, 0.32); color: #92400E; }
.pa-priority-lbl {
font-family: var(--font-sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.pa-path-suggest {
margin-top: 6px;
background: transparent;
border: none;
padding: 0;
font-size: 11px;
color: var(--indigo);
text-decoration: underline;
cursor: pointer;
}
.pa-path-suggest:hover { color: #4338CA; }
/* ============== Confirm modal (audit approve, proposal handoff, generic) ============== */
.confirm-modal { overflow: hidden; border-radius: 14px; max-width: 460px; padding: 0; }
.confirm-modal-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 20px 22px 12px;
background: var(--paper);
}
.confirm-modal-head .confirm-modal-icon {
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(67, 56, 202, 0.10);
color: var(--indigo);
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.confirm-modal-head h3 {
margin: 0;
font-size: 17px;
font-weight: 500;
color: var(--ink);
}
.confirm-modal-head p { margin: 6px 0 0; font-size: 13px; color: var(--slate); line-height: 1.5; }
.confirm-modal-body { padding: 0 22px 14px; }
.confirm-modal-meta {
display: grid;
gap: 6px;
padding: 10px 14px;
background: #FAFAF7;
border: 1px solid var(--border-soft, #E5E1D8);
border-radius: 8px;
font-size: 12px;
color: var(--ink);
}
.confirm-modal-meta-row {
display: grid;
grid-template-columns: 110px 1fr;
gap: 12px;
}
.confirm-modal-meta-key {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--slate);
}
.confirm-modal-foot {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 14px 22px 18px;
border-top: 1px solid var(--border);
background: #FAFAF7;
}
/* ============== New proposal modal (harmonized layout) ============== */
.pr-new-modal {
overflow: hidden;
border-radius: 14px;
}
.pr-new-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 20px 22px 14px;
border-bottom: 1px solid var(--border);
background: var(--paper);
}
.pr-new-head h3 {
margin: 4px 0 0;
font-size: 18px;
font-weight: 500;
color: var(--ink);
letter-spacing: -0.005em;
}
.pr-new-close {
background: transparent;
border: 1px solid var(--border);
border-radius: 6px;
width: 28px;
height: 28px;
font-size: 16px;
line-height: 1;
color: var(--slate);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.12s ease;
}
.pr-new-close:hover { border-color: var(--indigo); color: var(--indigo); }
.pr-new-body { padding: 18px 22px 6px; }
.pr-new-sub {
margin: 0 0 16px;
font-size: 12px;
color: var(--slate);
line-height: 1.5;
}
.pr-new-modes {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 16px;
}
.pr-new-mode {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
background: var(--paper);
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 12px;
text-align: left;
cursor: pointer;
transition: all 0.12s ease;
}
.pr-new-mode:hover { border-color: var(--indigo); }
.pr-new-mode.is-active {
border-color: var(--indigo);
background: rgba(67, 56, 202, 0.06);
box-shadow: inset 0 0 0 1px var(--indigo);
}
.pr-new-mode-label {
font-size: 13px;
font-weight: 500;
color: var(--ink);
}
.pr-new-mode.is-active .pr-new-mode-label { color: var(--indigo); }
.pr-new-mode-hint {
font-size: 11px;
color: var(--slate);
}
.pr-new-pane { margin-bottom: 8px; }
.pr-new-label {
display: block;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--slate);
margin: 0 0 6px;
}
.pr-new-foot {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 14px 22px 18px;
border-top: 1px solid var(--border);
background: #FAFAF7;
}
/* ============================================================
PROPOSAL EDITOR
Three-pane: section nav left, editor center, context (data sources) right
Section cards collapsible, voice-of-client + findings have structured forms
============================================================ */
.pr-status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: uppercase;
white-space: nowrap;
}
.pr-status .dot-status { width: 6px; height: 6px; border-radius: 50%; }
.pr-status.draft { background: #F4F4F5; color: #52525B; }
.pr-status.draft .dot-status { background: #A1A1AA; }
.pr-status.sent { background: #EEF2FF; color: #4338CA; }
.pr-status.sent .dot-status { background: var(--indigo); }
.pr-status.accepted { background: #DCFCE7; color: #166534; }
.pr-status.accepted .dot-status { background: #16A34A; }
.pr-status.declined { background: #FEE2E2; color: #991B1B; }
.pr-status.declined .dot-status { background: #DC2626; }
.pr-status.archived { background: #F4F4F5; color: #71717A; }
.pr-status.archived .dot-status { background: #A1A1AA; }
/* Editor layout */
.pr-editor {
display: grid;
grid-template-columns: 240px 1fr 300px;
gap: 0;
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
min-height: calc(100vh - 220px);
}
.pr-pane { border-right: 1px solid var(--border); overflow-y: auto; }
.pr-pane:last-child { border-right: none; }
.pr-pane-header {
position: sticky; top: 0; z-index: 2;
background: var(--paper);
border-bottom: 1px solid var(--border);
padding: 14px 16px 10px;
}
.pr-pane-body { padding: 14px 16px 24px; }
/* Section nav */
.pr-section-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: 6px;
cursor: pointer;
margin-bottom: 2px;
font-size: 13px;
color: var(--ink);
border: 1px solid transparent;
transition: all 0.12s ease;
}
.pr-section-item:hover { background: #FAFAFA; }
.pr-section-item.active {
background: var(--paper);
border-color: #C7D2FE;
color: var(--indigo);
font-weight: 500;
}
.pr-section-item .pr-section-num {
width: 22px; height: 22px;
border-radius: 50%;
background: #F4F4F5;
color: var(--slate);
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 600;
}
.pr-section-item.active .pr-section-num { background: var(--indigo); color: #FFFFFF; }
.pr-section-item .pr-section-status {
margin-left: auto;
font-size: 9px;
color: var(--slate);
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* Section editor center pane */
.pr-section-editor {
max-width: 720px;
margin: 0 auto;
padding: 8px 0 60px;
}
.pr-section-editor .pr-section-eyebrow {
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--indigo);
font-weight: 500;
margin: 0 0 4px;
}
.pr-section-editor h2 {
font-family: var(--font-serif);
font-weight: 500;
font-size: 24px;
color: var(--ink);
margin: 0 0 6px;
letter-spacing: -0.01em;
}
.pr-section-editor .pr-section-hint {
font-size: 12px;
color: var(--slate);
margin: 0 0 16px;
line-height: 1.55;
}
.pr-section-editor label {
display: block;
font-size: 11px;
font-weight: 500;
color: var(--slate);
letter-spacing: 0.04em;
text-transform: uppercase;
margin: 12px 0 4px;
}
.pr-section-editor input,
.pr-section-editor textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 6px;
font-family: var(--font-sans);
font-size: 14px;
color: var(--ink);
background: #FFFFFF;
line-height: 1.55;
transition: border-color 0.12s ease;
}
.pr-section-editor textarea { min-height: 140px; resize: vertical; }
.pr-section-editor input:focus,
.pr-section-editor textarea:focus { outline: none; border-color: var(--indigo); }
/* Quote row (voice of client) */
.pr-quote-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: start;
margin-bottom: 8px;
padding: 10px;
background: #F5F7FF;
border-left: 2px solid var(--indigo);
border-radius: 0 6px 6px 0;
}
.pr-quote-row .pr-quote-input { display: flex; flex-direction: column; gap: 4px; }
.pr-quote-row input[type="text"]:first-child { font-size: 12px; font-weight: 500; padding: 6px 10px; }
.pr-quote-row textarea { min-height: 60px; font-style: italic; font-size: 13px; padding: 6px 10px; background: var(--paper); }
.pr-quote-row .pr-quote-del {
background: transparent;
border: none;
color: var(--slate);
cursor: pointer;
font-size: 16px;
padding: 2px 8px;
}
.pr-quote-row .pr-quote-del:hover { color: #DC2626; }
/* Timeline row */
.pr-timeline-row {
display: grid;
grid-template-columns: 110px 1fr auto;
gap: 8px;
margin-bottom: 6px;
align-items: center;
}
.pr-timeline-row input { padding: 7px 10px; font-size: 13px; }
.pr-timeline-row input:first-child { font-weight: 500; color: var(--ink); }
.pr-timeline-row .pr-timeline-del {
background: transparent;
border: none;
color: var(--slate);
cursor: pointer;
font-size: 16px;
padding: 2px 8px;
}
.pr-timeline-row .pr-timeline-del:hover { color: #DC2626; }
/* Deliverable row */
.pr-deliverable-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
margin-bottom: 6px;
align-items: center;
}
.pr-deliverable-row input { padding: 7px 10px; font-size: 13px; }
.pr-add-btn {
background: var(--paper);
border: 1px dashed var(--border);
color: var(--slate);
padding: 6px 12px;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
margin-top: 4px;
}
.pr-add-btn:hover { border-color: var(--indigo); color: var(--indigo); }
/* Findings dimension scores */
.pr-findings-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-top: 6px;
}
.pr-findings-cell {
display: grid;
grid-template-columns: 1fr 60px;
gap: 6px;
align-items: center;
padding: 8px 10px;
background: var(--paper);
border: 1px solid var(--border);
border-radius: 6px;
}
.pr-findings-cell label { margin: 0; font-size: 11px; }
.pr-findings-cell input { padding: 4px 6px; font-size: 12px; text-align: center; font-family: var(--font-serif); font-weight: 500; }
/* Context pane (right) - data sources */
.pr-context-section {
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border);
}
.pr-context-section:last-child { border-bottom: none; }
.pr-context-section h4 {
margin: 0 0 8px;
font-size: 11px;
font-weight: 600;
color: var(--slate);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.pr-context-section p { font-size: 12px; color: var(--ink); margin: 0 0 4px; line-height: 1.5; }
.pr-context-source {
background: #F5F7FF;
border-left: 2px solid var(--indigo);
border-radius: 0 4px 4px 0;
padding: 8px 10px;
margin: 4px 0;
font-size: 11px;
color: var(--ink);
line-height: 1.5;
}
.pr-context-source strong { color: var(--ink); font-weight: 500; }
.pr-context-source-tag {
font-size: 9px;
color: var(--indigo);
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 500;
margin-bottom: 3px;
display: block;
}
/* Editor top bar */
.pr-edit-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 20px;
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 12px;
flex-wrap: wrap;
gap: 12px;
}
.pr-edit-bar .pr-edit-title { font-size: 14px; font-weight: 500; color: var(--ink); margin: 0; }
.pr-edit-bar .pr-edit-sub { font-size: 11px; color: var(--slate); margin: 2px 0 0; letter-spacing: 0.04em; text-transform: uppercase; }
/* Proposal cards on list view */
.pr-card {
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px 20px;
cursor: pointer;
transition: all 0.12s ease;
}
.pr-card:hover { border-color: var(--indigo); transform: translateY(-1px); }
.pr-card h3 { margin: 0 0 4px; font-size: 16px; color: var(--ink); }
.pr-card .pr-card-client { font-size: 12px; color: var(--slate); margin: 0 0 8px; }
.pr-card .pr-card-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--slate); margin: 6px 0 8px; }
.pr-card .pr-card-meta strong { color: var(--ink); font-weight: 500; }
/* Pick rows used in the generator (transcripts, services) */
.pr-pick-row {
display: grid;
grid-template-columns: 24px 1fr auto;
gap: 10px;
align-items: center;
padding: 10px 12px;
background: var(--paper);
border: 1px solid var(--border);
border-radius: 8px;
cursor: pointer;
transition: all 0.12s ease;
}
.pr-pick-row:hover { border-color: var(--indigo); }
.pr-pick-row.on { background: #F5F7FF; border-color: #C7D2FE; }
.pr-pick-row input[type="checkbox"] {
width: 16px; height: 16px;
cursor: pointer;
accent-color: var(--indigo);
}
.pr-pick-row .pr-pick-title { font-size: 13px; font-weight: 500; color: var(--ink); }
.pr-pick-row .pr-pick-sub { font-size: 11px; color: var(--slate); margin-top: 2px; }
/* Revisions history */
.pr-revision {
display: grid;
grid-template-columns: 140px 1fr;
gap: 10px;
padding: 8px 0;
border-top: 1px solid var(--border);
align-items: start;
font-size: 12px;
}
.pr-revision:first-of-type { border-top: none; }
.pr-revision .pr-revision-ts { color: var(--slate); font-variant-numeric: tabular-nums; }
.pr-revision .pr-revision-action {
display: inline-block;
padding: 1px 7px;
border-radius: 999px;
font-size: 9px;
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 500;
margin-bottom: 4px;
}
.pr-revision .pr-revision-action.generated { background: #EEF2FF; color: var(--indigo); }
.pr-revision .pr-revision-action.exported { background: #FEF3C7; color: #92400E; }
.pr-revision .pr-revision-action.uploaded { background: #DBEAFE; color: #1E40AF; }
.pr-revision .pr-revision-action.sent { background: #DCFCE7; color: #166534; }
.pr-revision .pr-revision-action.edited { background: #F4F4F5; color: #52525B; }
.pr-revision .pr-revision-file { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--ink); }
.pr-revision .pr-revision-note { color: var(--slate); margin-top: 2px; font-size: 11px; }
/* ============================================================
PORTAL AUDIT (client-facing, compact, click-anywhere comments)
============================================================ */
.pa-shell {
max-width: 1280px;
margin: 0 auto;
}
.pa-method {
background: var(--cream, #F8F5F0);
border: 1px solid var(--border-soft, #E5E1D8);
border-radius: 8px;
padding: 14px 18px;
margin-bottom: 14px;
}
.pa-method-body {
margin: 0;
font-size: 13px;
line-height: 1.6;
color: var(--ink);
}
.pa-method-body strong { font-weight: 500; color: var(--ink); }
/* Heatmap cell: clickable affordance */
.bcg-heat-cell.is-clickable {
cursor: pointer;
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.bcg-heat-cell.is-clickable:hover {
transform: scale(1.05);
box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.dim-name.is-clickable {
cursor: pointer;
}
.dim-name.is-clickable:hover {
color: var(--indigo);
}
/* Executive read: single-stat mode (when benchmark + time-to-act are stripped) */
.bcg-exec-grid.bcg-exec-grid-single {
grid-template-columns: 1fr;
max-width: 360px;
}
/* Dim card: comment badge and stronger CTA */
.bcg-dim-comment-badge {
font-size: 9px;
letter-spacing: 0.08em;
text-transform: uppercase;
background: rgba(79, 70, 229, 0.1);
color: var(--indigo);
padding: 3px 8px;
border-radius: 999px;
font-weight: 500;
align-self: center;
}
.bcg-dim-comment-cta {
cursor: pointer;
transition: background 0.12s ease;
}
.bcg-dim-comment-cta:hover {
background: rgba(79, 70, 229, 0.03);
}
.pa-head {
display: flex; justify-content: space-between; align-items: baseline;
gap: 12px; flex-wrap: wrap;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
margin-bottom: 18px;
}
.pa-head .eyebrow {
font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--slate); margin: 0 0 4px;
}
.pa-head h1 {
font-family: var(--font-serif); font-size: 22px; font-weight: 500;
margin: 0; color: var(--ink); line-height: 1.2;
}
/* Compact nav (sticky, denser than before) */
.pa-nav {
position: sticky; top: 0; z-index: 10;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--border);
padding: 8px 0;
margin: 0 0 16px;
display: flex; gap: 4px; flex-wrap: wrap;
}
.pa-nav button {
background: transparent; border: none;
padding: 5px 10px; border-radius: 6px;
font-size: 11px; color: var(--slate); cursor: pointer;
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--font-sans);
}
.pa-nav button:hover { color: var(--ink); background: #F4F4F5; }
.pa-nav button.active { color: var(--indigo); font-weight: 500; background: #EEF2FF; }
.pa-nav .num { font-family: var(--font-serif); font-size: 10px; color: var(--indigo); }
/* Collapsible section (default open) */
.pa-section {
background: var(--paper);
border: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 10px;
overflow: hidden;
}
.pa-section-head {
display: grid;
grid-template-columns: 22px auto 1fr auto;
gap: 12px;
align-items: center;
padding: 14px 18px;
cursor: pointer;
user-select: none;
}
.pa-section-head:hover { background: #FAFAFA; }
.pa-section-num {
font-family: var(--font-serif);
font-size: 13px;
color: var(--indigo);
font-weight: 500;
}
.pa-section-head h2 {
margin: 0;
font-size: 14px;
font-weight: 500;
color: var(--ink);
}
.pa-section-head .meta {
font-size: 11px;
color: var(--slate);
justify-self: end;
display: inline-flex; align-items: center; gap: 8px;
}
.pa-section-head .meta .chev {
font-size: 11px;
color: var(--slate);
transition: transform 0.16s ease;
}
.pa-section.open .pa-section-head .meta .chev { transform: rotate(90deg); }
.pa-section-body { display: none; padding: 0 20px 18px; }
.pa-section.open .pa-section-body { display: block; }
/* Click-anywhere target zone (mirrors admin ar-target pattern) */
.pa-target {
position: relative;
padding: 10px 14px;
border-radius: 6px;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.12s ease;
}
.pa-target:hover { background: #FAFAFA; border-color: var(--border); }
.pa-target.has-comment { background: #FEF3C7; border-color: #FDE68A; }
.pa-target.has-comment:hover { background: #FDE68A; }
.pa-target::after {
content: "+ Comment";
position: absolute;
top: 6px; right: 6px;
font-size: 9px;
font-weight: 500;
color: var(--indigo);
background: var(--paper);
border: 1px solid #C7D2FE;
padding: 1px 7px;
border-radius: 999px;
opacity: 0;
transition: opacity 0.12s ease;
pointer-events: none;
}
.pa-target:hover::after { opacity: 1; }
.pa-target.has-comment::after { display: none; }
.pa-comment-badge {
position: absolute;
top: 6px; right: 6px;
background: #D97706;
color: #FFFFFF;
font-size: 9px;
font-weight: 600;
padding: 1px 7px;
border-radius: 999px;
}
/* Inline rendered comments inside zones */
.pa-comment-inline {
background: #FFFFFF;
border: 1px solid #FDE68A;
border-radius: 6px;
padding: 8px 12px;
margin-top: 8px;
font-size: 12px;
}
.pa-comment-inline .head {
display: flex; justify-content: space-between; align-items: center;
font-size: 10px;
color: #92400E;
letter-spacing: 0.04em;
font-weight: 500;
margin-bottom: 4px;
}
.pa-comment-inline .head .del {
background: transparent; border: none;
color: var(--slate); cursor: pointer; font-size: 12px;
padding: 0 4px;
}
.pa-comment-inline .head .del:hover { color: #DC2626; }
.pa-comment-inline p { margin: 0; font-size: 13px; color: var(--ink); line-height: 1.5; }
/* KPI strip, denser */
.pa-kpis {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin: 14px 0 4px;
}
.pa-kpi {
background: var(--paper);
border: 1px solid var(--border);
border-radius: 6px;
padding: 12px 14px;
}
.pa-kpi .lbl {
font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--slate); font-weight: 500; margin: 0 0 4px;
}
.pa-kpi .val {
font-family: var(--font-serif); font-size: 20px; line-height: 1;
color: var(--ink); margin: 0;
}
.pa-kpi .val .unit { font-size: 11px; color: var(--slate); margin-left: 4px; font-family: var(--font-sans); }
.pa-kpi .sub { font-size: 10px; color: var(--slate); margin: 4px 0 0; }
.pa-kpi.accent .val { color: var(--indigo); }
/* Dimension row (compact) */
.pa-dim-row {
display: grid;
grid-template-columns: 1.4fr 60px 1fr 60px;
gap: 10px;
align-items: center;
padding: 8px 0;
border-top: 1px solid var(--border);
font-size: 12px;
}
.pa-dim-row:first-of-type { border-top: none; }
.pa-dim-row .name { font-weight: 500; color: var(--ink); }
.pa-dim-row .name .sub { display: block; font-size: 10px; color: var(--slate); font-weight: 400; margin-top: 1px; }
.pa-dim-row .score { font-family: var(--font-serif); font-size: 15px; color: var(--ink); text-align: center; }
.pa-dim-row .score.red { color: var(--mat-reactive); }
.pa-dim-row .score.amber { color: var(--mat-defined); }
.pa-dim-row .score.green { color: var(--mat-integrated); }
.pa-dim-row .bar-track {
background: #F4F4F5; height: 6px; border-radius: 3px;
position: relative; overflow: visible;
}
.pa-dim-row .bar-fill { height: 100%; border-radius: 3px; }
.pa-dim-row .bar-fill.red { background: var(--mat-reactive); }
.pa-dim-row .bar-fill.amber { background: var(--mat-defined); }
.pa-dim-row .bar-fill.green { background: var(--mat-integrated); }
.pa-dim-row .bench {
position: absolute; top: -3px; width: 2px; height: 12px;
background: var(--ink);
}
.pa-dim-row .gap { font-size: 10px; color: var(--slate); text-align: right; }
/* Risk card (compact) */
.pa-risk {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 12px;
align-items: start;
padding: 12px 14px;
background: var(--paper);
border: 1px solid var(--border);
border-radius: 6px;
margin-bottom: 8px;
}
.pa-risk .rank {
font-family: var(--font-serif);
font-size: 16px;
color: var(--indigo);
font-weight: 500;
}
.pa-risk h4 { margin: 0; font-size: 13px; font-weight: 500; color: var(--ink); }
.pa-risk .sub { font-size: 10px; color: var(--slate); margin: 2px 0 6px; }
.pa-risk .quote {
margin: 6px 0 0;
padding: 6px 10px;
background: #F5F7FF;
border-left: 2px solid var(--indigo);
font-size: 11px;
font-style: italic;
color: var(--slate);
border-radius: 0 4px 4px 0;
line-height: 1.4;
}
.pa-risk .score-bubble {
font-family: var(--font-serif);
font-size: 18px;
color: var(--ink);
}
/* Comment composer modal */
.pa-cm-overlay {
position: fixed; inset: 0;
background: rgba(15, 23, 42, 0.5);
display: none;
align-items: center;
justify-content: center;
z-index: 90;
padding: 20px;
}
.pa-cm-overlay.open { display: flex; }
.pa-cm {
background: var(--paper);
border-radius: var(--radius-lg);
width: 100%;
max-width: 480px;
padding: 22px 24px;
box-shadow: 0 30px 60px rgba(15, 23, 42, 0.3);
}
.pa-cm h3 { margin: 0 0 4px; font-size: 16px; }
.pa-cm .context {
background: #F5F7FF;
border-left: 3px solid var(--indigo);
padding: 10px 12px;
border-radius: 0 6px 6px 0;
margin: 12px 0 14px;
font-size: 12px;
color: var(--ink);
line-height: 1.5;
}
.pa-cm .context-lbl {
font-size: 9px; color: var(--indigo);
letter-spacing: 0.08em; text-transform: uppercase;
font-weight: 600; margin-bottom: 4px;
}
.pa-cm textarea {
width: 100%; min-height: 100px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 6px;
font-family: var(--font-sans);
font-size: 13px; color: var(--ink); line-height: 1.5;
resize: vertical;
}
.pa-cm textarea:focus { outline: none; border-color: var(--indigo); }
.pa-cm .footer {
display: flex; justify-content: space-between; align-items: center;
margin-top: 12px; gap: 8px;
}
/* Compact recommendation block */
.pa-rec {
background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
color: #F1F5F9;
border-radius: 8px;
padding: 18px 22px;
}
.pa-rec .lbl { font-size: 9px; color: #818CF8; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; margin: 0 0 4px; }
.pa-rec h3 { font-family: var(--font-serif); font-size: 20px; color: #F9FAFB; margin: 0 0 8px; font-weight: 500; }
.pa-rec p { font-size: 12px; color: #CBD5E1; margin: 0 0 12px; line-height: 1.5; }
.pa-rec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 12px 0 0; }
.pa-rec-grid h5 { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: #94A3B8; margin: 0 0 6px; }
.pa-rec-grid ul, .pa-rec-grid p { font-size: 11px; color: #E2E8F0; margin: 0; line-height: 1.5; }
.pa-rec-grid ul { padding-left: 14px; }
.pa-rec-grid ul li { margin-bottom: 3px; }
.pa-rec-grid .fee {
font-family: var(--font-serif);
font-size: 22px;
color: #FFFFFF;
}
.pa-rec-timeline {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
margin-top: 14px; padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.1);
}
.pa-rec-timeline .week {
background: rgba(255,255,255,0.05);
border-radius: 4px;
padding: 8px 10px;
}
.pa-rec-timeline .lbl { font-size: 9px; color: #818CF8; }
.pa-rec-timeline .nm { font-size: 11px; color: #F1F5F9; margin: 2px 0 0; }
/* ===== Audit page engagement timeline (3 steps: Assessment, Proposal &
Contracting, Project kickoff). Read-only status view. ===== */
.pa-timeline {
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
padding: 12px 8px 4px;
}
.pa-timeline-line {
position: absolute;
top: 34px;
left: 16.67%;
right: 16.67%;
height: 2px;
background: #E2E8F0;
z-index: 0;
}
.pa-timeline-fill {
position: absolute;
top: 34px;
left: 16.67%;
height: 2px;
background: var(--indigo);
z-index: 0;
transition: width 0.4s ease;
max-width: 66.67%;
}
.pa-timeline-step {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
z-index: 1;
}
.pa-timeline-circle {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-serif);
font-size: 18px;
font-weight: 500;
border: 2px solid #E2E8F0;
background: #FFFFFF;
color: var(--slate);
margin-bottom: 12px;
transition: all 0.2s ease;
}
.pa-timeline-step.step-active .pa-timeline-circle {
background: var(--indigo);
border-color: var(--indigo);
color: #FFFFFF;
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
}
.pa-timeline-step.step-done .pa-timeline-circle {
background: var(--indigo);
border-color: var(--indigo);
color: #FFFFFF;
}
.pa-timeline-step.step-pending .pa-timeline-circle {
background: #F8F5F0;
border-color: #E2E8F0;
color: #94A3B8;
}
.pa-timeline-step-label {
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--slate);
margin: 0;
font-weight: 500;
}
.pa-timeline-title {
font-family: var(--font-serif);
font-size: 16px;
color: var(--ink);
margin: 4px 0 6px;
font-weight: 500;
}
.pa-timeline-detail {
font-size: 12px;
color: var(--ink);
margin: 0 0 4px;
line-height: 1.45;
max-width: 200px;
}
.pa-timeline-line-text {
font-size: 11px;
color: var(--slate);
margin: 0;
line-height: 1.45;
}
.pa-timeline-date {
font-size: 10px;
color: var(--slate);
margin: 6px 0 0;
letter-spacing: 0.04em;
}
.pa-timeline-step.step-pending .pa-timeline-title,
.pa-timeline-step.step-pending .pa-timeline-detail {
opacity: 0.7;
}
/* ===== Documents Hub: Engagement Timeline ===== */
.doc-timeline {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
padding: 12px 8px 4px;
}
.doc-timeline-line {
position: absolute;
top: 34px;
left: 12.5%;
right: 12.5%;
height: 2px;
background: #E2E8F0;
z-index: 0;
}
.doc-timeline-line-fill {
position: absolute;
top: 34px;
left: 12.5%;
height: 2px;
background: var(--indigo);
z-index: 0;
transition: width 0.4s ease;
max-width: 75%;
}
.doc-timeline-step {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
z-index: 1;
}
.doc-timeline-circle {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-serif);
font-size: 18px;
font-weight: 500;
border: 2px solid #E2E8F0;
background: #FFFFFF;
color: var(--slate);
margin-bottom: 12px;
transition: all 0.2s ease;
}
.doc-timeline-card {
background: var(--cream, #F8F5F0);
border: 1px solid var(--border-soft, #E5E1D8);
border-radius: 6px;
padding: 10px 12px;
width: 100%;
box-sizing: border-box;
}
.doc-timeline-step-label {
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--slate);
margin: 0;
font-weight: 500;
}
.doc-timeline-title {
font-family: var(--font-serif);
font-size: 14px;
color: var(--ink);
margin: 2px 0 4px;
font-weight: 500;
}
.doc-timeline-detail {
font-size: 11px;
color: var(--ink);
margin: 0 0 4px;
line-height: 1.4;
}
.doc-timeline-line-text {
font-size: 10px;
color: var(--slate);
margin: 0;
line-height: 1.4;
}
.doc-timeline-date {
font-size: 9px;
color: var(--slate);
margin: 4px 0 0;
letter-spacing: 0.04em;
}
/* Timeline status states */
.doc-timeline-step.step-done .doc-timeline-circle {
background: var(--indigo);
border-color: var(--indigo);
color: #FFFFFF;
}
.doc-timeline-step.step-active .doc-timeline-circle {
background: #FFFFFF;
border-color: var(--indigo);
color: var(--indigo);
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
}
.doc-timeline-step.step-action .doc-timeline-circle {
background: var(--gold, #C9A961);
border-color: var(--gold, #C9A961);
color: #FFFFFF;
animation: doc-pulse 2s ease-in-out infinite;
}
.doc-timeline-step.step-declined .doc-timeline-circle {
background: #FEE2E2;
border-color: #DC2626;
color: #DC2626;
}
.doc-timeline-step.step-pending .doc-timeline-circle {
background: #F8F5F0;
border-color: #E2E8F0;
color: #94A3B8;
}
.doc-timeline-step.step-pending .doc-timeline-card {
opacity: 0.65;
}
@keyframes doc-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(201, 169, 97, 0.4); }
50% { box-shadow: 0 0 0 6px rgba(201, 169, 97, 0); }
}
/* ===== Documents Hub: Drag-and-drop zone ===== */
.doc-drop-zone {
border: 2px dashed #CBD5E1;
border-radius: 6px;
padding: 18px 16px;
text-align: center;
background: #FAFAF7;
transition: all 0.15s ease;
cursor: default;
}
.doc-drop-zone:hover {
border-color: var(--indigo);
background: #FFFFFF;
}
.doc-drop-zone.drop-active {
border-color: var(--indigo);
border-style: solid;
background: rgba(79, 70, 229, 0.04);
transform: scale(1.005);
}
/* ===== Documents Hub: Document rows ===== */
.doc-row {
display: grid;
grid-template-columns: 28px 1fr auto;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: #FFFFFF;
border: 1px solid var(--border-soft, #E5E1D8);
border-radius: 5px;
transition: border-color 0.15s ease, background 0.15s ease;
}
.doc-row:hover {
border-color: var(--indigo);
background: #FAFAF7;
}
.doc-row.pending {
background: #FFFBEB;
border-color: #FCD34D;
}
.doc-row.pending:hover {
background: #FEF3C7;
}
.doc-row-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(79, 70, 229, 0.1);
color: var(--indigo);
font-size: 14px;
font-weight: 500;
}
.doc-row.pending .doc-row-icon {
background: rgba(217, 119, 6, 0.12);
color: #B45309;
}
.doc-row-name {
font-size: 13px;
color: var(--ink);
margin: 0;
font-weight: 500;
}
.doc-row-meta {
font-size: 10px;
color: var(--slate);
margin: 2px 0 0;
letter-spacing: 0.02em;
}
/* ===== Executive summary insights (top of admin review) ===== */
.kj-exec-score-row {
display: grid;
grid-template-columns: 1fr 1.4fr 1.4fr;
gap: 24px;
padding: 18px 0;
margin-top: 16px;
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.kj-exec-score-label {
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #94A3B8;
margin: 0 0 4px;
font-weight: 500;
}
.kj-exec-score-value {
font-family: var(--font-serif);
font-size: 36px;
color: #F1F5F9;
margin: 0;
font-weight: 500;
line-height: 1.05;
}
.kj-exec-score-value-text {
font-family: var(--font-serif);
font-size: 18px;
color: #F1F5F9;
margin: 0;
font-weight: 500;
line-height: 1.3;
}
.kj-exec-score-sub {
font-size: 12px;
color: #94A3B8;
margin: 4px 0 0;
}
.kj-exec-bullets {
margin-top: 16px;
}
.kj-exec-bullet-label {
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #94A3B8;
margin: 0 0 8px;
font-weight: 500;
}
.kj-exec-bullet-list {
margin: 0;
padding-left: 20px;
font-size: 13px;
line-height: 1.65;
color: #E2E8F0;
}
.kj-exec-bullet-list li { margin-bottom: 6px; }
.kj-exec-bullet-list strong { color: #F1F5F9; font-weight: 500; }
.kj-exec-bullet-list em { color: #C9A961; font-style: normal; }
/* ===== Karim's Debrief Playbook (narrative head for the review) =====
Clean light card. Strong ink-on-paper contrast. Gold "for your eyes only"
pill marks it as Karim-only without going full dark theme. */
.kj-card-section.kj-playbook,
.kj-playbook {
background: var(--paper);
border: 1px solid var(--border);
border-left: 4px solid var(--gold, #C9A961);
color: var(--ink);
padding: 24px 28px;
border-radius: 8px;
}
.kj-playbook-head {
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border-soft, #E5E1D8);
}
.kj-playbook-eyebrow {
display: inline-block;
background: rgba(201, 169, 97, 0.16);
color: #8A6E2E;
padding: 4px 10px;
border-radius: 999px;
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
}
.kj-playbook-head .trust-label { color: var(--slate); }
.kj-playbook-title {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 500;
margin: 8px 0 0;
color: var(--ink);
line-height: 1.3;
}
.kj-playbook-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 24px;
}
.kj-playbook-block-wide { grid-column: 1 / -1; }
.kj-playbook-block-offer {
grid-column: 1 / -1;
background: rgba(79, 70, 229, 0.06);
border: 1px solid rgba(79, 70, 229, 0.25);
border-radius: 6px;
padding: 14px 18px;
}
.kj-playbook-label {
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slate);
margin: 0 0 8px;
font-weight: 600;
}
.kj-playbook-body {
font-size: 14px;
line-height: 1.65;
color: var(--ink);
margin: 0;
}
.kj-playbook-offer {
font-size: 14px;
color: var(--ink);
font-weight: 500;
}
.kj-playbook-block-offer .kj-playbook-label {
color: var(--indigo);
}
.kj-playbook-list {
margin: 0;
padding-left: 20px;
font-size: 14px;
line-height: 1.7;
color: var(--ink);
}
.kj-playbook-list li { margin-bottom: 6px; }
/* ===== Offer Sharpener (inside Debrief Playbook) ===== */
.kj-sharpener {
margin-top: 24px;
padding-top: 22px;
border-top: 1px solid var(--border-soft, #E5E1D8);
}
.kj-sharpener-head {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 16px;
}
.kj-sharpener-icon {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--indigo);
color: #FFFFFF;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-serif);
font-size: 16px;
font-weight: 500;
flex-shrink: 0;
line-height: 1;
}
.kj-sharpener-eyebrow {
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--indigo);
margin: 0;
font-weight: 600;
}
.kj-sharpener-title {
font-family: var(--font-serif);
font-size: 18px;
font-weight: 500;
margin: 4px 0 0;
color: var(--ink);
line-height: 1.35;
}
.kj-sharpener-grid {
display: flex;
flex-direction: column;
gap: 12px;
}
.kj-sharpener-row {
display: grid;
grid-template-columns: 32px 1fr;
gap: 14px;
padding: 12px 14px;
background: var(--paper);
border: 1px solid var(--border-soft, #E5E1D8);
border-radius: 6px;
}
.kj-sharpener-step {
width: 28px;
height: 28px;
border-radius: 50%;
background: #F4F4F5;
color: var(--slate);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
}
.kj-sharpener-label {
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slate);
margin: 0 0 4px;
font-weight: 600;
}
.kj-sharpener-body {
font-size: 13px;
line-height: 1.6;
color: var(--ink);
margin: 0;
}
/* Compact Offer Sharpener: one block, three bits of advice stacked. */
.kj-sharpener-compact {
background: linear-gradient(135deg, rgba(79, 70, 229, 0.05), rgba(201, 169, 97, 0.05));
border: 1px solid rgba(79, 70, 229, 0.18);
border-left: 3px solid var(--indigo);
border-radius: 8px;
padding: 16px 18px;
margin-top: 14px;
}
.kj-sharpener-compact .kj-sharpener-eyebrow {
margin: 0 0 8px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--indigo);
}
.kj-sharpener-pitch {
margin: 0 0 10px;
font-size: 14px;
line-height: 1.55;
color: var(--ink);
}
.kj-sharpener-quote {
margin: 0 0 10px;
padding: 8px 12px;
font-size: 14px;
font-style: italic;
color: var(--ink);
background: var(--paper);
border-left: 2px solid var(--gold, #C9A961);
border-radius: 0 4px 4px 0;
}
.kj-sharpener-gap {
margin: 0;
font-size: 12px;
color: var(--slate);
line-height: 1.55;
}
.kj-sharpener-gap span {
display: inline-block;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #B91C1C;
margin-right: 6px;
}
.kj-sharpener-line {
margin: 0 0 10px;
font-size: 13px;
color: var(--ink);
line-height: 1.55;
}
.kj-sharpener-line:last-of-type { margin-bottom: 10px; }
.kj-sharpener-line-label {
display: inline-block;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--indigo);
margin-right: 6px;
}
.kj-sharpener-line-label-warn { color: #92400E; }
.kj-playbook-grid-twocol {
grid-template-columns: 1fr 1fr;
}
@media (max-width: 720px) {
.kj-playbook-grid-twocol { grid-template-columns: 1fr; }
}
.kj-sharpener-row.kj-sharpener-gap {
background: rgba(220, 38, 38, 0.04);
border-color: rgba(220, 38, 38, 0.2);
}
.kj-sharpener-row.kj-sharpener-gap .kj-sharpener-step {
background: rgba(220, 38, 38, 0.12);
color: #B91C1C;
}
.kj-sharpener-row.kj-sharpener-gap .kj-sharpener-label {
color: #B91C1C;
}
.kj-sharpener-row.kj-sharpener-sharpened {
background: rgba(79, 70, 229, 0.04);
border-color: rgba(79, 70, 229, 0.2);
}
.kj-sharpener-row.kj-sharpener-sharpened .kj-sharpener-step {
background: var(--indigo);
color: #FFFFFF;
}
.kj-sharpener-row.kj-sharpener-sharpened .kj-sharpener-label {
color: var(--indigo);
}
.kj-sharpener-row.kj-sharpener-oneline {
background: rgba(201, 169, 97, 0.08);
border-color: rgba(201, 169, 97, 0.3);
}
.kj-sharpener-row.kj-sharpener-oneline .kj-sharpener-step {
background: var(--gold, #C9A961);
color: #FFFFFF;
}
.kj-sharpener-row.kj-sharpener-oneline .kj-sharpener-label {
color: #8A6E2E;
}
.kj-sharpener-oneline-text {
font-family: var(--font-serif);
font-size: 16px;
font-style: italic;
color: var(--ink);
line-height: 1.5;
}
/* ===== Commercial Plan (inside Debrief Playbook, after Offer Sharpener) ===== */
.kj-bridge {
margin-top: 24px;
padding-top: 22px;
border-top: 1px solid var(--border-soft, #E5E1D8);
}
.kj-bridge-head {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 16px;
}
.kj-bridge-icon {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--gold, #C9A961);
color: #FFFFFF;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-serif);
font-size: 16px;
font-weight: 500;
flex-shrink: 0;
line-height: 1;
}
.kj-bridge-eyebrow {
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #8A6E2E;
margin: 0;
font-weight: 600;
}
.kj-bridge-title {
font-family: var(--font-serif);
font-size: 18px;
font-weight: 500;
margin: 4px 0 0;
color: var(--ink);
line-height: 1.35;
}
.kj-bridge-grid {
display: flex;
flex-direction: column;
gap: 10px;
}
.kj-bridge-row {
display: grid;
grid-template-columns: 32px 1fr;
gap: 14px;
padding: 12px 14px;
background: var(--paper);
border: 1px solid var(--border-soft, #E5E1D8);
border-radius: 6px;
}
.kj-bridge-row.kj-bridge-entry {
background: rgba(79, 70, 229, 0.04);
border-color: rgba(79, 70, 229, 0.2);
}
.kj-bridge-row.kj-bridge-entry .kj-bridge-step {
background: var(--indigo);
color: #FFFFFF;
}
.kj-bridge-row.kj-bridge-retainer {
background: rgba(201, 169, 97, 0.08);
border-color: rgba(201, 169, 97, 0.3);
}
.kj-bridge-row.kj-bridge-retainer .kj-bridge-step {
background: var(--gold, #C9A961);
color: #FFFFFF;
}
.kj-bridge-step {
width: 28px;
height: 28px;
border-radius: 50%;
background: #F4F4F5;
color: var(--slate);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
}
.kj-bridge-label {
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slate);
margin: 0 0 4px;
font-weight: 600;
}
.kj-bridge-body {
font-size: 13px;
line-height: 1.6;
color: var(--ink);
margin: 0;
}
/* ===== Karim's summary tables (admin assessment review) ===== */
.kj-card-section {
background: var(--paper);
border: 1px solid var(--border);
border-radius: 8px;
padding: 18px 22px;
}
.kj-summary-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.kj-summary-table thead th {
background: #EFF3F8;
color: var(--ink);
font-weight: 600;
font-size: 12px;
text-align: center;
padding: 10px 14px;
border: 1px solid var(--border-soft, #E5E1D8);
letter-spacing: 0.01em;
}
.kj-summary-table tbody th {
background: #F4F6F9;
color: var(--ink);
font-weight: 600;
font-size: 13px;
text-align: center;
padding: 14px 18px;
border: 1px solid var(--border-soft, #E5E1D8);
width: 38%;
}
.kj-summary-table tbody td {
background: #FFFFFF;
color: var(--ink);
padding: 14px 18px;
border: 1px solid var(--border-soft, #E5E1D8);
text-align: center;
vertical-align: middle;
}
.kj-summary-table-grid tbody td {
text-align: center;
}
.kj-summary-table-grid tbody td:first-child,
.kj-summary-table-grid tbody td:last-child {
text-align: center;
}
/* Emphatic numeric cell (Overall Score, dim scores, priority scores) */
.kj-cell-emphatic {
font-weight: 600;
font-size: 15px;
}
/* RAG indicators stay monochrome (brand palette). We mark status with a thin
left-border accent in indigo for RED, gold for AMBER, ink for GREEN. */
.kj-rag-red,
.kj-rag-amber,
.kj-rag-green {
background: #FFFFFF !important;
color: var(--ink);
}
.kj-cell-rag {
font-weight: 600;
letter-spacing: 0.04em;
font-size: 11px;
}
.kj-cell-rag.kj-rag-red { color: var(--indigo); }
.kj-cell-rag.kj-rag-amber { color: var(--gold, #C9A961); }
.kj-cell-rag.kj-rag-green { color: var(--slate); }
.kj-cell-emphatic { font-weight: 600; font-size: 15px; }
.kj-cell-emphatic.kj-rag-red { color: var(--indigo); }
.kj-cell-emphatic.kj-rag-amber { color: var(--gold, #C9A961); }
.kj-cell-emphatic.kj-rag-green { color: var(--ink); }
/* ===== Home dashboard ===== */
.kj-home-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
margin-bottom: 24px;
}
.kj-home-card {
display: block;
background: var(--paper);
border: 1px solid var(--border);
border-radius: 8px;
padding: 18px 20px;
text-decoration: none;
color: var(--ink);
transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.kj-home-card:hover {
border-color: var(--indigo);
box-shadow: 0 2px 8px rgba(79, 70, 229, 0.08);
}
.kj-home-card-primary {
background: var(--ink);
border-color: var(--ink);
color: #F1F5F9;
}
.kj-home-card-primary:hover {
background: #1F1F23;
}
.kj-home-card-eyebrow {
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slate);
margin: 0;
font-weight: 600;
}
.kj-home-card-primary .kj-home-card-eyebrow { color: rgba(255,255,255,0.5); }
.kj-home-card-value {
font-family: var(--font-serif);
font-size: 44px;
color: var(--ink);
margin: 8px 0 4px;
font-weight: 500;
line-height: 1;
}
.kj-home-card-primary .kj-home-card-value { color: #FFFFFF; }
.kj-home-card-sub {
font-size: 12px;
color: var(--slate);
margin: 0;
}
.kj-home-card-primary .kj-home-card-sub { color: rgba(255,255,255,0.7); }
.kj-home-lead-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
background: var(--paper);
border: 1px solid var(--border-soft, #E5E1D8);
border-radius: 5px;
}
.kj-home-lead-name {
margin: 0;
font-size: 13px;
font-weight: 500;
color: var(--ink);
}
.kj-home-lead-meta {
margin: 2px 0 0;
font-size: 11px;
color: var(--slate);
}
/* ===== Home meetings / calendar ===== */
.kj-mtg-group {
margin-bottom: 14px;
}
.kj-mtg-group:last-child { margin-bottom: 0; }
.kj-mtg-group-label {
margin: 0 0 8px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slate);
}
.kj-mtg-group.is-today .kj-mtg-group-label { color: var(--indigo); }
.kj-mtg-list {
display: grid;
gap: 6px;
}
.kj-mtg-subgroup {
margin-bottom: 10px;
}
.kj-mtg-subgroup:last-child { margin-bottom: 0; }
.kj-mtg-subgroup .kj-mtg-row { margin-top: 6px; }
.kj-mtg-subgroup .kj-mtg-row:first-of-type { margin-top: 0; }
.kj-mtg-subgroup-label {
margin: 0 0 6px;
font-size: 11px;
font-weight: 500;
color: var(--ink);
letter-spacing: 0.02em;
}
.kj-mtg-row {
display: grid;
grid-template-columns: 88px 1fr;
gap: 14px;
align-items: center;
padding: 10px 14px;
background: var(--paper);
border: 1px solid var(--border-soft, #E5E1D8);
border-radius: 6px;
transition: border-color 0.12s ease, transform 0.12s ease;
}
.kj-mtg-row:hover { border-color: var(--indigo); }
.kj-mtg-group.is-today .kj-mtg-row {
border-left: 3px solid var(--indigo);
padding-left: 12px;
}
.kj-mtg-time {
display: flex;
flex-direction: column;
align-items: flex-start;
border-right: 1px solid var(--border-soft, #E5E1D8);
padding-right: 12px;
}
.kj-mtg-time-hour {
font-family: var(--font-serif, var(--font-sans));
font-size: 16px;
font-weight: 500;
color: var(--ink);
line-height: 1.1;
}
.kj-mtg-time-dur {
font-size: 10px;
color: var(--slate);
margin-top: 2px;
letter-spacing: 0.02em;
}
.kj-mtg-body { min-width: 0; }
.kj-mtg-title-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.kj-mtg-title {
font-size: 13px;
font-weight: 500;
color: var(--ink);
}
.kj-mtg-type {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
border-radius: 4px;
padding: 1px 6px;
background: #F4F4F5;
color: var(--slate);
border: 1px solid var(--border);
}
.kj-mtg-type.kj-mtg-discovery { color: var(--indigo); border-color: rgba(67, 56, 202, 0.30); background: rgba(67, 56, 202, 0.06); }
.kj-mtg-type.kj-mtg-debrief { color: #92400E; border-color: rgba(146, 64, 14, 0.30); background: rgba(146, 64, 14, 0.06); }
.kj-mtg-type.kj-mtg-work { color: #065F46; border-color: rgba(6, 95, 70, 0.28); background: rgba(6, 95, 70, 0.06); }
.kj-mtg-type.kj-mtg-internal { color: var(--slate); }
.kj-mtg-type.kj-mtg-kickoff { color: #4338CA; border-color: rgba(67, 56, 202, 0.30); background: rgba(67, 56, 202, 0.08); }
.kj-mtg-meta {
margin: 3px 0 0;
font-size: 11px;
color: var(--slate);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ===== Leads module ===== */
.kj-leads-tabs {
display: flex;
gap: 4px;
margin-bottom: 14px;
border-bottom: 1px solid var(--border-soft, #E5E1D8);
}
.kj-leads-tab {
background: transparent;
border: none;
border-bottom: 2px solid transparent;
padding: 10px 16px;
font-size: 13px;
font-weight: 500;
color: var(--slate);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: color 0.12s ease, border-color 0.12s ease;
}
.kj-leads-tab:hover {
color: var(--ink);
}
.kj-leads-tab.active {
color: var(--indigo);
border-bottom-color: var(--indigo);
}
.kj-leads-tab-count {
background: #F4F4F5;
color: var(--slate);
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
}
.kj-leads-tab.active .kj-leads-tab-count {
background: rgba(79, 70, 229, 0.1);
color: var(--indigo);
}
.kj-leads-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.kj-leads-table thead th {
background: var(--cream, #F8F5F0);
color: var(--slate);
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 600;
text-align: left;
padding: 12px 16px;
border-bottom: 1px solid var(--border-soft, #E5E1D8);
}
.kj-leads-table tbody td {
padding: 14px 16px;
border-bottom: 1px solid var(--border-soft, #E5E1D8);
vertical-align: top;
}
.kj-leads-table tbody tr:hover {
background: #FAFAF7;
}
.kj-leads-name {
margin: 0;
font-size: 13px;
font-weight: 500;
color: var(--ink);
}
.kj-leads-meta {
margin: 2px 0 0;
font-size: 11px;
color: var(--slate);
font-family: ui-monospace, Menlo, Consolas, monospace;
}
.kj-leads-role {
margin: 0;
font-size: 12px;
color: var(--ink);
}
.kj-leads-company {
margin: 2px 0 0;
font-size: 12px;
color: var(--slate);
}
.kj-leads-country {
font-size: 12px;
color: var(--ink);
}
.kj-leads-reason {
margin: 0;
font-size: 12px;
color: var(--ink);
line-height: 1.5;
}
.kj-leads-actions {
display: flex;
gap: 6px;
align-items: center;
}
.kj-leads-outcome {
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
background: #F4F4F5;
color: var(--slate);
}
.kj-outcome-discovery_booked { background: rgba(14, 165, 233, 0.1); color: #0369A1; }
.kj-outcome-audit_sent { background: rgba(79, 70, 229, 0.1); color: var(--indigo); }
.kj-outcome-audit_reviewed { background: rgba(79, 70, 229, 0.15); color: var(--indigo); }
.kj-outcome-proposal_sent { background: rgba(201, 169, 97, 0.18); color: #8A6E2E; }
.kj-outcome-won { background: rgba(34, 197, 94, 0.12); color: #15803D; }
.kj-outcome-lost { background: #E5E7EB; color: var(--slate); }
.kj-source-badge.kj-source-plumb {
background: rgba(79, 70, 229, 0.12);
color: var(--indigo);
}
.kj-source-badge.kj-source-linkedin {
background: rgba(10, 102, 194, 0.12);
color: #0A66C2;
}
.kj-leads-provenance {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
}
.kj-leads-prov-label {
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slate);
margin: 0 0 4px;
font-weight: 600;
}
.kj-leads-prov-value {
font-family: var(--font-serif);
font-size: 28px;
color: var(--ink);
margin: 0;
font-weight: 500;
line-height: 1;
}
/* Source badge + row action buttons used by Priority Actions / Interview Evidence */
.kj-source-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
padding: 3px 8px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
border-radius: 999px;
background: #F4F4F5;
color: var(--slate);
}
.kj-source-badge.kj-source-transcript {
background: rgba(14, 165, 233, 0.12);
color: #0369A1;
}
.kj-source-badge.kj-source-assessment {
background: rgba(79, 70, 229, 0.10);
color: var(--indigo);
}
.kj-source-badge.kj-source-karim {
background: rgba(201, 169, 97, 0.18);
color: #8A6E2E;
}
/* ===== Leads: empty state ===== */
.kj-leads-empty {
background: #FFFFFF;
border: 1px solid var(--border-soft, #E5E1D8);
border-radius: 14px;
padding: 56px 32px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
max-width: 640px;
margin: 32px auto 0;
}
.kj-leads-empty-dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: #C9A961;
box-shadow: 0 0 0 6px rgba(201, 169, 97, 0.18);
margin-bottom: 6px;
}
.kj-leads-empty-title {
font-family: var(--font-serif, Georgia, serif);
font-size: 24px;
font-weight: 500;
color: var(--ink, #14141A);
margin: 0;
letter-spacing: -0.005em;
}
.kj-leads-empty-sub {
font-size: 14px;
line-height: 1.55;
color: var(--slate, #6B7280);
margin: 0 0 8px;
max-width: 460px;
}
.kj-leads-empty-tiny {
font-size: 11px;
color: var(--slate, #9CA3AF);
margin: 8px 0 0;
letter-spacing: 0.02em;
}
/* ===== Leads: active campaign strip ===== */
.kj-campaign-strip {
background: #FFFFFF;
border: 1px solid var(--border-soft, #E5E1D8);
border-radius: 12px;
padding: 12px 14px 10px;
margin-bottom: 14px;
}
.kj-campaign-strip-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.kj-campaign-strip-left {
display: flex;
align-items: flex-start;
gap: 12px;
flex: 1 1 320px;
min-width: 220px;
}
.kj-campaign-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.kj-campaign-item {
display: grid;
grid-template-columns: 1fr auto;
gap: 14px;
align-items: center;
padding: 8px 10px;
border: 1px solid #F1EFE7;
border-radius: 8px;
background: #FBFBFA;
}
.kj-campaign-item-main { min-width: 0; }
.kj-campaign-item-facts {
display: flex;
gap: 18px;
flex-wrap: wrap;
justify-content: flex-end;
}
@media (max-width: 880px) {
.kj-campaign-item { grid-template-columns: 1fr; }
.kj-campaign-item-facts { justify-content: flex-start; }
}
.kj-campaign-pill {
background: rgba(201, 169, 97, 0.18);
color: #8A6E2E;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 999px;
margin-top: 2px;
flex-shrink: 0;
}
.kj-campaign-name {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--ink, #14141A);
line-height: 1.3;
}
.kj-campaign-goal {
margin: 4px 0 0;
font-size: 12px;
color: var(--slate, #6B7280);
line-height: 1.45;
max-width: 380px;
}
.kj-campaign-strip-facts {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.kj-campaign-fact {
min-width: 100px;
}
.kj-campaign-fact-label {
margin: 0;
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--slate, #9CA3AF);
}
.kj-campaign-fact-value {
margin: 2px 0 0;
font-size: 12.5px;
color: var(--ink, #14141A);
font-weight: 500;
}
.kj-campaign-strip-actions {
margin-left: auto;
display: flex;
gap: 8px;
}
.kj-campaign-link {
background: transparent;
border: 1px solid var(--border-soft, #E5E1D8);
color: var(--indigo, #4F46E5);
font-size: 12px;
font-weight: 500;
padding: 6px 12px;
border-radius: 6px;
cursor: pointer;
transition: background 0.12s ease, border-color 0.12s ease;
}
.kj-campaign-link:hover {
background: rgba(79, 70, 229, 0.06);
border-color: rgba(79, 70, 229, 0.4);
}
/* ===== ICP campaign wizard ===== */
#kj-wizard-root {
position: fixed;
inset: 0;
z-index: 9000;
}
.kj-wizard-backdrop {
position: absolute;
inset: 0;
background: rgba(20, 20, 26, 0.42);
backdrop-filter: blur(2px);
}
.kj-wizard-card {
position: relative;
background: #FFFFFF;
border-radius: 16px;
width: min(720px, calc(100vw - 32px));
max-height: calc(100vh - 48px);
margin: 24px auto;
display: flex;
flex-direction: column;
box-shadow: 0 24px 60px rgba(20, 20, 26, 0.22), 0 2px 6px rgba(20, 20, 26, 0.08);
overflow: hidden;
animation: kjWizardIn 0.18s ease-out;
}
@keyframes kjWizardIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.kj-wizard-top {
padding: 0;
border-bottom: 1px solid var(--border-soft, #E5E1D8);
}
.kj-wizard-progress-wrap {
height: 3px;
background: #F3F1EB;
width: 100%;
}
.kj-wizard-progress-bar {
height: 100%;
background: var(--indigo, #4F46E5);
transition: width 0.25s ease;
}
.kj-wizard-top-row {
padding: 12px 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.kj-wizard-step-counter {
margin: 0;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slate, #9CA3AF);
}
.kj-wizard-close {
background: transparent;
border: none;
font-size: 22px;
color: var(--slate, #6B7280);
cursor: pointer;
line-height: 1;
padding: 4px 8px;
border-radius: 6px;
transition: background 0.12s ease;
}
.kj-wizard-close:hover { background: #F4F4F5; }
.kj-wizard-body {
padding: 28px 32px 24px;
overflow-y: auto;
flex: 1;
}
.kj-wizard-eyebrow {
margin: 0;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slate, #9CA3AF);
}
.kj-wizard-title {
margin: 6px 0 6px;
font-family: var(--font-serif, Georgia, serif);
font-size: 22px;
font-weight: 500;
color: var(--ink, #14141A);
letter-spacing: -0.005em;
line-height: 1.25;
}
.kj-wizard-sub {
margin: 0 0 20px;
font-size: 13.5px;
color: var(--slate, #6B7280);
line-height: 1.55;
}
.kj-wizard-label {
display: block;
margin: 0 0 6px;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--slate, #6B7280);
font-weight: 600;
}
.kj-wizard-input,
.kj-wizard-textarea {
width: 100%;
font-size: 14px;
color: var(--ink, #14141A);
padding: 10px 12px;
border: 1px solid var(--border-soft, #E5E1D8);
border-radius: 8px;
background: #FFFFFF;
font-family: inherit;
box-sizing: border-box;
transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.kj-wizard-input:focus,
.kj-wizard-textarea:focus {
border-color: var(--indigo, #4F46E5);
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
outline: none;
}
.kj-wizard-textarea {
resize: vertical;
min-height: 76px;
line-height: 1.5;
}
.kj-wizard-hint {
margin: 6px 0 0;
font-size: 12px;
color: var(--slate, #9CA3AF);
line-height: 1.45;
}
.kj-wizard-rows {
display: flex;
flex-direction: column;
gap: 8px;
margin: 4px 0 8px;
}
.kj-wizard-row {
display: flex;
gap: 8px;
align-items: center;
}
.kj-wizard-row-x {
background: transparent;
border: 1px solid var(--border-soft, #E5E1D8);
color: var(--slate, #6B7280);
width: 32px;
height: 32px;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
flex-shrink: 0;
transition: color 0.12s ease, border-color 0.12s ease;
}
.kj-wizard-row-x:hover {
color: #B23A3A;
border-color: rgba(178, 58, 58, 0.4);
}
.kj-wizard-add {
background: transparent;
border: 1px dashed var(--border-soft, #E5E1D8);
color: var(--indigo, #4F46E5);
font-size: 12.5px;
font-weight: 500;
padding: 8px 12px;
border-radius: 8px;
cursor: pointer;
margin-top: 4px;
transition: background 0.12s ease, border-color 0.12s ease;
}
.kj-wizard-add:hover {
background: rgba(79, 70, 229, 0.04);
border-color: rgba(79, 70, 229, 0.4);
}
.kj-wizard-details {
margin-top: 18px;
padding: 10px 0 0;
border-top: 1px dashed var(--border-soft, #E5E1D8);
}
.kj-wizard-details summary {
font-size: 12.5px;
color: var(--indigo, #4F46E5);
cursor: pointer;
font-weight: 500;
padding: 4px 0;
}
.kj-wizard-chip-block {
margin-bottom: 22px;
}
.kj-wizard-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 8px;
}
.kj-wizard-chip {
background: #FFFFFF;
border: 1px solid var(--border-soft, #E5E1D8);
color: var(--ink, #14141A);
padding: 6px 12px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
display: inline-flex;
align-items: center;
gap: 4px;
}
.kj-wizard-chip:hover {
border-color: rgba(79, 70, 229, 0.4);
}
.kj-wizard-chip.on {
background: rgba(79, 70, 229, 0.10);
border-color: var(--indigo, #4F46E5);
color: var(--indigo, #4F46E5);
}
.kj-wizard-chip.danger.on {
background: rgba(178, 58, 58, 0.10);
border-color: #B23A3A;
color: #B23A3A;
}
.kj-wizard-chip-tick {
font-size: 10px;
font-weight: 700;
}
.kj-wizard-chip-add {
display: flex;
gap: 6px;
align-items: center;
}
.kj-wizard-chip-add .kj-wizard-input {
flex: 1;
font-size: 12.5px;
padding: 7px 10px;
}
.kj-wizard-cap {
display: flex;
gap: 14px;
align-items: center;
margin-top: 8px;
}
.kj-wizard-cap input[type="range"] {
flex: 1;
accent-color: var(--indigo, #4F46E5);
}
.kj-wizard-cap-value {
font-size: 13px;
font-weight: 500;
color: var(--ink, #14141A);
min-width: 120px;
}
/* v3.15: Plays (ranked cards) */
.kj-play-list {
display: flex;
flex-direction: column;
gap: 12px;
margin: 12px 0;
}
.kj-play-card {
border: 1px solid var(--border-soft, #E5E1D8);
border-radius: 10px;
background: #FFFFFF;
padding: 14px 16px 16px;
}
.kj-play-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.kj-play-rank-wrap {
display: inline-flex;
align-items: center;
gap: 10px;
}
.kj-play-rank {
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
background: #F2F0E8;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
color: #4F46E5;
text-transform: uppercase;
}
.kj-play-movers {
display: inline-flex;
gap: 4px;
}
.kj-play-mover {
width: 26px;
height: 26px;
border-radius: 6px;
border: 1px solid var(--border-soft, #E5E1D8);
background: #FFFFFF;
color: #111;
font-size: 13px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.kj-play-mover:hover:not([disabled]) { background: #FBFBFA; }
.kj-play-mover[disabled] { opacity: 0.35; cursor: not-allowed; }
.kj-play-remove {
background: transparent;
border: none;
color: #8C2A2A;
font-size: 12px;
cursor: pointer;
padding: 4px 8px;
}
.kj-play-remove:hover { text-decoration: underline; }
.kj-play-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 14px;
}
.kj-play-cell { display: flex; flex-direction: column; gap: 4px; }
.kj-play-cell-wide { grid-column: 1 / -1; }
.kj-play-label {
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.02em;
color: #111111;
}
.kj-play-hint {
font-size: 11px;
color: #787774;
margin-bottom: 2px;
}
@media (max-width: 720px) {
.kj-play-grid { grid-template-columns: 1fr; }
}
/* Lookalike URL + label rows */
.kj-lookalike-row {
display: grid;
grid-template-columns: 1.4fr 1fr auto;
gap: 8px;
align-items: center;
margin-bottom: 8px;
}
@media (max-width: 720px) {
.kj-lookalike-row { grid-template-columns: 1fr; }
}
/* Goal block + exclusion toggles */
.kj-goal-block,
.kj-exclude-block {
margin-top: 18px;
padding: 14px 16px;
border: 1px solid var(--border-soft, #E5E1D8);
border-radius: 10px;
background: #FBFBFA;
}
.kj-goal-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 10px;
}
.kj-goal-cell { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 720px) {
.kj-goal-grid { grid-template-columns: 1fr; }
}
.kj-toggle-row {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 10px;
}
.kj-toggle {
padding: 6px 14px;
border-radius: 999px;
border: 1px solid var(--border-soft, #E5E1D8);
background: #FFFFFF;
color: #111111;
font-size: 12.5px;
cursor: pointer;
}
.kj-toggle:hover { background: #FBFBFA; }
.kj-toggle.on {
background: #4F46E5;
border-color: #4F46E5;
color: #FFFFFF;
}
/* v3.16: Effort vs Impact home blocks */
.kj-effort-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border: 1px solid #EAEAEA;
border-radius: 10px;
background: #FFFFFF;
overflow: hidden;
}
.kj-effort-cell {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 16px;
border-right: 1px solid #EAEAEA;
text-decoration: none;
color: inherit;
transition: background-color 0.15s ease;
}
.kj-effort-cell:last-child { border-right: none; }
a.kj-effort-cell:hover { background: #FBFBFA; }
.kj-effort-num {
font-family: "Source Serif Pro", Georgia, serif;
font-size: 28px;
font-weight: 500;
letter-spacing: -0.018em;
line-height: 1;
color: #111111;
}
.kj-effort-num-good { color: #2D5F2D; }
.kj-effort-num-warn { color: #8C2A2A; }
.kj-effort-label {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #787774;
margin-top: 4px;
}
.kj-effort-sub {
font-size: 11px;
color: #9C9C97;
line-height: 1.35;
}
@media (max-width: 880px) {
.kj-effort-grid { grid-template-columns: 1fr 1fr; }
.kj-effort-cell:nth-child(2) { border-right: none; }
.kj-effort-cell:nth-child(odd) { border-right: 1px solid #EAEAEA; }
}
/* Mini foldout (top rejection reasons, answer rate per campaign) */
.kj-mini-foldout {
margin-top: 10px;
border: 1px solid #EAEAEA;
border-radius: 10px;
background: #FFFFFF;
}
.kj-mini-foldout summary {
cursor: pointer;
padding: 10px 14px;
font-size: 12px;
font-weight: 600;
color: #111111;
letter-spacing: 0.02em;
list-style: none;
outline: none;
}
.kj-mini-foldout summary::-webkit-details-marker { display: none; }
.kj-mini-foldout summary::before {
content: "\25B8";
display: inline-block;
margin-right: 8px;
font-size: 10px;
color: #787774;
transition: transform 0.15s ease;
}
.kj-mini-foldout[open] summary::before { transform: rotate(90deg); }
.kj-mini-list { list-style: none; margin: 0; padding: 4px 8px 10px; }
.kj-mini-list-bare { padding: 0; }
.kj-mini-row {
display: grid;
grid-template-columns: 1fr 110px 28px;
gap: 10px;
align-items: center;
padding: 5px 0;
font-size: 12px;
color: #111111;
}
.kj-mini-label { color: #111111; }
.kj-mini-bar {
height: 4px;
background: #F1EFE7;
border-radius: 999px;
overflow: hidden;
}
.kj-mini-bar-fill {
display: block;
height: 100%;
background: #4F46E5;
border-radius: 999px;
}
.kj-mini-bar-warn { background: #8C2A2A; }
.kj-mini-bar-lost { background: #B45309; }
/* Side-by-side loss panels (lead rejections + opp losses) */
.kj-loss-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
@media (max-width: 880px) {
.kj-loss-pair { grid-template-columns: 1fr; }
}
.kj-loss-block {
border: 1px solid #EAEAEA;
border-radius: 10px;
background: #FFFFFF;
padding: 12px 14px;
}
.kj-loss-block-eyebrow {
margin: 0 0 6px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #787774;
}
.kj-loss-note {
margin: 0 0 6px;
font-size: 11px;
color: #9C9C97;
font-style: italic;
}
/* v3.18: trend chart (inline SVG multi-line) */
.kj-trend-chart {
border: 1px solid #EAEAEA;
border-radius: 10px;
background: #FFFFFF;
padding: 12px 14px;
}
.kj-trend-svg {
width: 100%;
height: auto;
display: block;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.kj-trend-grid {
stroke: #F1EFE7;
stroke-width: 1;
stroke-dasharray: 2 4;
}
.kj-trend-line {
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
transition: opacity 0.15s ease, stroke-width 0.15s ease;
}
.kj-trend-dot { transition: r 0.12s ease, opacity 0.15s ease; }
.kj-trend-axis {
font-size: 10px;
fill: #9C9C97;
}
.kj-trend-axis-y { font-variant-numeric: tabular-nums; }
.kj-trend-legend {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 6px;
padding-top: 8px;
border-top: 1px solid #F4F2EB;
}
.kj-trend-legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
cursor: pointer;
user-select: none;
}
.kj-trend-swatch {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 2px;
}
.kj-trend-legend-label { color: #111111; font-weight: 500; }
.kj-trend-legend-total {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 10.5px;
color: #787774;
font-variant-numeric: tabular-nums;
}
/* Legend hover dims other lines (CSS-only via :has, harmless fallback otherwise) */
.kj-trend-chart:has(.kj-trend-legend-item:hover) .kj-trend-line,
.kj-trend-chart:has(.kj-trend-legend-item:hover) .kj-trend-dot { opacity: 0.18; }
.kj-trend-legend-item:hover ~ * .kj-trend-line[data-key],
.kj-trend-legend-item:hover ~ * .kj-trend-dot[data-key] { opacity: 0.18; }
/* v3.19: Trends button next to the period nav */
.kj-dash-trend-btn {
border: 1px solid #EAEAEA;
border-radius: 999px;
padding: 4px 12px;
margin-left: 6px;
color: #4F46E5;
font-weight: 600;
}
.kj-dash-trend-btn:hover {
background: #EEF2FF;
color: #4F46E5;
border-color: #C8C5BD;
border-bottom-color: #C8C5BD;
}
/* v3.19: Trends modal */
.kj-trend-panel {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(1100px, 96vw);
max-height: 90vh;
background: #FFFFFF;
border: 1px solid #EAEAEA;
border-radius: 12px;
box-shadow: 0 24px 56px rgba(15, 23, 42, 0.18);
display: flex;
flex-direction: column;
overflow: hidden;
z-index: 2;
}
.kj-trend-period-bar {
display: flex;
gap: 14px;
padding: 8px 18px 0;
flex-wrap: wrap;
}
.kj-trend-modal-body {
flex: 1;
overflow-y: auto;
padding: 12px 18px 18px;
}
.kj-mini-count {
text-align: right;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11.5px;
font-weight: 600;
}
/* Campaign answer-rate table */
.kj-camp-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
margin: 0 0 8px;
}
.kj-camp-table th {
text-align: left;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #787774;
padding: 8px 14px;
border-bottom: 1px solid #EAEAEA;
}
.kj-camp-table td {
padding: 8px 14px;
border-bottom: 1px solid #F4F2EB;
vertical-align: middle;
}
.kj-camp-table tr:last-child td { border-bottom: none; }
.kj-camp-name {
font-weight: 500;
color: #111111;
}
.kj-camp-status {
display: inline-block;
margin-left: 8px;
padding: 1px 8px;
border-radius: 999px;
background: #F2F0E8;
color: #787774;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.kj-camp-status.is-active {
background: #EEF2FF;
color: #4F46E5;
}
.kj-camp-num {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-variant-numeric: tabular-nums;
font-weight: 600;
text-align: right;
width: 80px;
}
.kj-camp-rate {
display: flex;
gap: 10px;
align-items: center;
min-width: 160px;
}
.kj-camp-bar {
flex: 1;
height: 6px;
background: #F1EFE7;
border-radius: 999px;
overflow: hidden;
}
.kj-camp-bar-fill {
display: block;
height: 100%;
background: linear-gradient(90deg, #4F46E5 0%, #2D5F2D 100%);
border-radius: 999px;
}
.kj-camp-pct {
width: 56px;
text-align: right;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11.5px;
font-weight: 600;
color: #111111;
}
/* Open + Closed pipeline cards */
.kj-pipe-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border: 1px solid #EAEAEA;
border-radius: 10px;
background: #FFFFFF;
overflow: hidden;
}
.kj-pipe-grid-4 { grid-template-columns: repeat(4, 1fr); }
.kj-pipe-cell {
display: flex;
flex-direction: column;
gap: 3px;
padding: 12px 16px;
border-right: 1px solid #EAEAEA;
text-decoration: none;
color: inherit;
transition: background-color 0.15s ease;
}
.kj-pipe-cell:last-child { border-right: none; }
.kj-pipe-cell:hover { background: #FBFBFA; }
.kj-pipe-eyebrow {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #787774;
}
.kj-pipe-num {
font-family: "Source Serif Pro", Georgia, serif;
font-size: 24px;
font-weight: 500;
letter-spacing: -0.018em;
line-height: 1;
color: #111111;
}
.kj-pipe-value {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px;
font-weight: 600;
color: #4F46E5;
}
@media (max-width: 880px) {
.kj-pipe-grid-4 { grid-template-columns: 1fr 1fr; }
.kj-pipe-grid-4 .kj-pipe-cell:nth-child(2) { border-right: none; }
}
.kj-pipe-won .kj-pipe-num { color: #2D5F2D; }
.kj-pipe-won .kj-pipe-value { color: #2D5F2D; }
.kj-pipe-lost .kj-pipe-num { color: #8C2A2A; }
.kj-pipe-lost .kj-pipe-value { color: #8C2A2A; }
/* v3.16: bulk select on lead cards. The checkbox is taken OUT of the
card's 3-column grid by absolute positioning, so it overlays the
top-left corner without disturbing the photo / main / side columns. */
.kj-leads-card { position: relative; }
.kj-leads-card.is-selected {
outline: 2px solid #4F46E5;
outline-offset: -1px;
background: #FAFAFD;
}
.kj-leads-card > .kj-leads-check {
position: absolute;
top: 8px;
left: 8px;
z-index: 2;
}
.kj-leads-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
flex-shrink: 0;
cursor: pointer;
/* No layout impact when used as a child of .kj-leads-card. The bar
above the list still uses it inline. */
}
.kj-leads-check input { position: absolute; opacity: 0; pointer-events: none; }
.kj-leads-check-box {
width: 18px;
height: 18px;
border-radius: 5px;
border: 1.5px solid #C9C9C2;
background: #FFFFFF;
position: relative;
transition: all 120ms ease;
}
.kj-leads-card > .kj-leads-check .kj-leads-check-box {
/* Soften so it blends with the white card */
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(2px);
border-color: #D6D5CD;
}
.kj-leads-check input:checked + .kj-leads-check-box {
background: #4F46E5;
border-color: #4F46E5;
}
.kj-leads-check input:checked + .kj-leads-check-box::after,
.kj-leads-check-box.is-checked::after {
content: "";
position: absolute;
left: 5px; top: 1px;
width: 5px; height: 10px;
border: solid #FFFFFF;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.kj-leads-check-box.is-checked {
background: #4F46E5;
border-color: #4F46E5;
}
/* Carve room for the absolutely-positioned checkbox out of the card's
left padding, instead of nudging the avatar. The original grid
(40px photo / 1fr main / 160px actions) stays intact whether the
avatar is an ![]()
or an empty . */
.kj-leads-card { padding-left: 36px; }
.kj-leads-selectbar {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
margin-bottom: 8px;
border: 1px solid #EAEAEA;
border-radius: 8px;
background: #FBFBFA;
}
.kj-leads-check-all { margin-right: 2px; }
.kj-leads-selectbar-meta {
font-size: 12px;
font-weight: 600;
color: #111111;
}
.kj-leads-selectbar-hint {
margin-left: auto;
font-size: 11px;
color: #787774;
}
/* Floating bulk action bar */
#kj-leads-bulkbar {
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
z-index: 2147483600;
pointer-events: none;
}
.kj-bulkbar {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 10px 14px 10px 16px;
background: #111111;
color: #FFFFFF;
border-radius: 999px;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
pointer-events: auto;
animation: kjBulkIn 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes kjBulkIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.kj-bulkbar-count {
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.02em;
}
.kj-bulkbar-actions { display: inline-flex; gap: 8px; }
.kj-bulkbar .kj-btn-approve,
.kj-bulkbar .kj-btn-reject,
.kj-bulkbar .kj-btn-ghost-ed {
font-size: 12px;
padding: 6px 12px;
border-radius: 999px;
}
.kj-bulkbar .kj-btn-ghost-ed {
background: transparent;
color: rgba(255, 255, 255, 0.7);
border-color: rgba(255, 255, 255, 0.2);
}
.kj-bulkbar .kj-btn-ghost-ed:hover { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.5); }
/* v3.15: campaign chip on each lead card */
.kj-leads-card-campaign {
display: inline-block;
padding: 1px 8px;
border-radius: 999px;
background: #EEF2FF;
color: #4F46E5;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.02em;
vertical-align: 1px;
}
/* v3.19: Exclusions modal panel (reuses .kj-icp-overlay backdrop) */
.kj-excl-panel {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(1080px, 96vw);
max-height: 88vh;
background: #FFFFFF;
border: 1px solid #EAEAEA;
border-radius: 12px;
box-shadow: 0 24px 56px rgba(15, 23, 42, 0.18);
display: flex;
flex-direction: column;
overflow: hidden;
z-index: 2;
}
.kj-excl-tabs {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 18px 0;
}
.kj-excl-body {
flex: 1;
overflow-y: auto;
padding: 12px 18px 18px;
}
.kj-excl-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.kj-excl-row {
display: grid;
grid-template-columns: 26px 1.2fr 1.5fr 1.2fr 1.3fr 56px 24px;
gap: 8px;
align-items: center;
padding: 6px 8px;
border: 1px solid transparent;
border-radius: 8px;
transition: background 0.12s ease, border-color 0.12s ease;
}
.kj-excl-row:hover { background: #FBFBFA; border-color: #F1EFE7; }
.kj-excl-row.is-allowed { opacity: 0.55; }
.kj-excl-row.is-allowed:hover { opacity: 1; }
.kj-excl-source {
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #4F46E5;
background: #EEF2FF;
padding: 2px 6px;
border-radius: 999px;
text-align: center;
}
.kj-excl-source-manual {
color: #787774;
background: #F2F0E8;
}
@media (max-width: 880px) {
.kj-excl-row { grid-template-columns: 26px 1fr 56px 24px; }
.kj-excl-row > *:nth-child(3),
.kj-excl-row > *:nth-child(4),
.kj-excl-row > *:nth-child(5) { grid-column: 2 / 4; }
}
.kj-wizard-bottom {
border-top: 1px solid var(--border-soft, #E5E1D8);
padding: 14px 20px;
display: flex;
align-items: center;
justify-content: space-between;
background: #FAFAF7;
}
.kj-wizard-bottom-right {
display: flex;
gap: 8px;
}
.kj-wizard-link {
background: transparent;
border: none;
color: var(--slate, #6B7280);
font-size: 12.5px;
cursor: pointer;
padding: 6px 8px;
border-radius: 6px;
transition: color 0.12s ease, background 0.12s ease;
}
.kj-wizard-link:hover {
color: var(--ink, #14141A);
background: #F4F4F5;
}
/* ===== Bulk import via Excel template ===== */
.kj-bulk-step {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 16px 0;
border-top: 1px solid var(--border-soft, #E5E1D8);
}
.kj-bulk-step:first-of-type { border-top: none; padding-top: 4px; }
.kj-bulk-step-num {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--indigo, #4F46E5);
color: #FFFFFF;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
margin-top: 2px;
}
.kj-bulk-step-body { flex: 1; min-width: 0; }
.kj-bulk-step-title {
margin: 0 0 4px;
font-size: 14px;
font-weight: 600;
color: var(--ink, #14141A);
}
.kj-bulk-step-sub {
margin: 0 0 10px;
font-size: 13px;
color: var(--slate, #6B7280);
line-height: 1.55;
}
.kj-bulk-drop {
display: block;
border: 2px dashed var(--border-soft, #E5E1D8);
background: #FAFAF7;
border-radius: 10px;
padding: 22px;
text-align: center;
cursor: pointer;
transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.kj-bulk-drop:hover,
.kj-bulk-drop.over {
border-color: var(--indigo, #4F46E5);
background: rgba(79, 70, 229, 0.04);
}
.kj-bulk-drop-inner { pointer-events: none; }
.kj-bulk-drop-title {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--ink, #14141A);
}
.kj-bulk-drop-sub {
margin: 4px 0 0;
font-size: 12.5px;
color: var(--slate, #6B7280);
}
.kj-bulk-alert {
border-radius: 8px;
padding: 12px 14px;
margin-top: 16px;
font-size: 13px;
line-height: 1.5;
}
.kj-bulk-alert-ok {
background: rgba(70, 145, 90, 0.10);
border: 1px solid rgba(70, 145, 90, 0.30);
color: #2E6B43;
}
.kj-bulk-alert-error {
background: rgba(178, 58, 58, 0.10);
border: 1px solid rgba(178, 58, 58, 0.30);
color: #883333;
}
.kj-bulk-table-wrap {
margin-top: 12px;
border: 1px solid var(--border-soft, #E5E1D8);
border-radius: 8px;
overflow: hidden;
background: #FFFFFF;
}
.kj-bulk-table {
width: 100%;
border-collapse: collapse;
font-size: 12.5px;
}
.kj-bulk-table thead th {
background: var(--cream, #F8F5F0);
text-align: left;
padding: 8px 12px;
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--slate, #6B7280);
font-weight: 600;
border-bottom: 1px solid var(--border-soft, #E5E1D8);
}
.kj-bulk-table tbody td {
padding: 8px 12px;
border-top: 1px solid var(--border-soft, #E5E1D8);
color: var(--ink, #14141A);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
.kj-bulk-table tbody tr:first-child td { border-top: none; }
.kj-bulk-table-more {
margin: 8px 12px 10px;
font-size: 12px;
color: var(--slate, #9CA3AF);
font-style: italic;
}
/* ===== LinkedIn enrichment result list ===== */
.kj-li-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.kj-li-row {
background: #FFFFFF;
border: 1px solid var(--border-soft, #E5E1D8);
border-radius: 10px;
padding: 12px 14px;
}
.kj-li-row-miss {
background: #FAFAF7;
border-style: dashed;
}
.kj-li-row-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.kj-li-check {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
flex: 1;
min-width: 0;
}
.kj-li-check input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--indigo, #4F46E5);
flex-shrink: 0;
}
.kj-li-url-strong {
font-size: 13.5px;
font-weight: 600;
color: var(--ink, #14141A);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kj-li-url {
margin: 0;
font-size: 12.5px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
color: var(--slate, #6B7280);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
.kj-li-badge {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 999px;
flex-shrink: 0;
}
.kj-li-badge-kanbox {
background: rgba(70, 145, 90, 0.15);
color: #2E6B43;
}
.kj-li-badge-apify {
background: rgba(79, 70, 229, 0.10);
color: var(--indigo, #4F46E5);
}
.kj-li-badge-mock {
background: rgba(201, 169, 97, 0.20);
color: #8A6E2E;
}
.kj-li-badge-miss {
background: rgba(178, 58, 58, 0.10);
color: #883333;
}
.kj-li-meta {
margin: 6px 0 0;
padding-left: 24px;
font-size: 12.5px;
color: var(--slate, #6B7280);
line-height: 1.45;
}
.kj-li-url-link {
display: inline-block;
margin: 6px 0 0 24px;
font-size: 11px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
color: var(--indigo, #4F46E5);
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.kj-li-url-link:hover { text-decoration: underline; }
.kj-li-miss-msg {
margin: 8px 0 0;
font-size: 12.5px;
color: var(--slate, #6B7280);
}
/* ===== v2 CRM badges + inline action buttons ===== */
.kj-rel-badge {
display: inline-block;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 999px;
background: #F4F4F5;
color: var(--slate, #6B7280);
border: 1px solid var(--border-soft, #E5E1D8);
}
.kj-rel-badge.kj-rel-client,
.kj-rel-badge.kj-rel-active {
background: rgba(70, 145, 90, 0.12);
color: #2E6B43;
border-color: rgba(70, 145, 90, 0.30);
}
.kj-rel-badge.kj-rel-lead-in-conversion {
background: rgba(79, 70, 229, 0.10);
color: var(--indigo, #4F46E5);
border-color: rgba(79, 70, 229, 0.30);
}
.kj-rel-badge.kj-rel-warm-lead {
background: rgba(201, 169, 97, 0.18);
color: #8A6E2E;
border-color: rgba(201, 169, 97, 0.35);
}
.kj-rel-badge.kj-rel-cold-lead,
.kj-rel-badge.kj-rel-not-active {
background: #F4F4F5;
color: var(--slate, #6B7280);
}
.kj-rel-badge.kj-rel-review {
background: rgba(201, 169, 97, 0.18);
color: #8A6E2E;
}
.kj-rel-badge.kj-rel-partner,
.kj-rel-badge.kj-rel-partner-contractual-,
.kj-rel-badge.kj-rel-partner-gentleman-agreement- {
background: rgba(120, 80, 200, 0.10);
color: #5B3FA8;
border-color: rgba(120, 80, 200, 0.30);
}
.kj-li-find {
background: transparent;
border: 1px dashed var(--border-soft, #E5E1D8);
color: var(--indigo, #4F46E5);
font-size: 10px;
font-weight: 500;
padding: 3px 8px;
border-radius: 6px;
cursor: pointer;
transition: background 0.12s ease, border-color 0.12s ease;
}
.kj-li-find:hover {
background: rgba(79, 70, 229, 0.04);
border-color: rgba(79, 70, 229, 0.4);
}
.kj-agent-run {
background: transparent;
border: 1px solid var(--border-soft, #E5E1D8);
color: var(--indigo, #4F46E5);
width: 22px;
height: 22px;
border-radius: 50%;
font-size: 12px;
line-height: 1;
cursor: pointer;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.12s ease, transform 0.4s ease;
}
.kj-agent-run:hover {
background: rgba(79, 70, 229, 0.08);
}
.kj-agent-run:active {
transform: rotate(180deg);
}
.kj-row-check {
width: 14px;
height: 14px;
accent-color: var(--indigo, #4F46E5);
cursor: pointer;
}
.kj-rollup-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 999px;
background: rgba(79, 70, 229, 0.10);
color: var(--indigo, #4F46E5);
font-size: 11px;
font-weight: 600;
border: none;
}
.kj-rollup-count.is-link {
cursor: pointer;
transition: background 0.12s ease, transform 0.12s ease;
}
.kj-rollup-count.is-link:hover {
background: rgba(79, 70, 229, 0.18);
transform: scale(1.04);
}
/* Foreign-key link cells: same visual weight as the surrounding text
* but indigo on hover so they read as clickable without screaming. */
.kj-link-cell {
color: var(--ink, #14141A);
cursor: pointer;
text-decoration: none;
border-bottom: 1px dashed transparent;
transition: color 0.12s ease, border-color 0.12s ease;
}
.kj-link-cell:hover {
color: var(--indigo, #4F46E5);
border-bottom-color: rgba(79, 70, 229, 0.4);
}
/* AI segment badge: neutral grey square-soft, sits next to Title. */
.kj-ai-badge {
display: inline-block;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.02em;
padding: 3px 8px;
border-radius: 6px;
background: #F4F4F5;
color: var(--slate, #6B7280);
border: 1px solid var(--border-soft, #E5E1D8);
white-space: nowrap;
}
/* Segmentation taxonomy editor (rows of input + remove). */
.kj-seg-list { display: flex; flex-direction: column; gap: 6px; }
.kj-seg-row {
display: flex;
align-items: center;
gap: 6px;
}
.kj-seg-row .kj-inline-edit { flex: 1; }
.kj-seg-row .kj-row-x { opacity: 1; flex-shrink: 0; }
/* ===== v2.7 Participant chips (Interactions table) ===== */
.kj-pp-chips {
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
}
.kj-pp-chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: #FFFFFF;
border: 1px solid var(--border-soft, #E5E1D8);
color: var(--ink, #14141A);
font-size: 11.5px;
padding: 2px 8px 2px 3px;
border-radius: 999px;
cursor: pointer;
white-space: nowrap;
transition: background 0.12s ease, border-color 0.12s ease;
font-family: var(--font-sans);
}
.kj-pp-chip:hover {
background: rgba(79, 70, 229, 0.05);
border-color: rgba(79, 70, 229, 0.4);
}
.kj-pp-init {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--indigo-mist, #EEF0FF);
color: var(--indigo-deep, #3730A3);
font-size: 9px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.kj-pp-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 120px;
}
/* ===== v2.7 Interaction group headers (readability refont) =====
* Bigger, more contrast on the month/week group label; section divider
* line above each header so the eye finds them at a glance. */
.crm-table .kj-group-header td,
.crm-table .group-header td,
.crm-table tr.group-header > td {
background: var(--mist) !important;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink, #14141A);
padding: 12px 12px;
border-top: 2px solid var(--border, #E5E1D8);
}
/* ===== v2.8 Loss reason analysis (button-triggered popover) ===== */
.kj-loss-bars {
display: flex;
flex-direction: column;
gap: 10px;
}
.kj-loss-row {
display: flex;
flex-direction: column;
gap: 4px;
}
.kj-loss-row-head {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 12.5px;
}
.kj-loss-row-label {
color: var(--ink, #14141A);
font-weight: 500;
}
.kj-loss-row-count {
color: var(--slate, #6B7280);
font-variant-numeric: tabular-nums;
}
.kj-loss-row-bar {
width: 100%;
height: 6px;
border-radius: 999px;
background: var(--mist);
overflow: hidden;
}
.kj-loss-row-fill {
height: 100%;
background: var(--indigo, #4F46E5);
opacity: 0.7;
border-radius: 999px;
transition: width 0.3s ease;
}
/* ===== Impeccable drawer (Company, Contact, Opportunity v2) =====
* Single-column flow. Neutral typography, no nested cards, quiet
* borders. Each section is a header + list of clickable rows. */
.kj-dr {
display: flex;
flex-direction: column;
gap: 22px;
font-family: var(--font-sans);
color: var(--ink, #14141A);
}
.kj-dr-meta {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-top: -4px;
}
.kj-dr-meta-text {
font-size: 12.5px;
color: var(--slate, #6B7280);
}
.kj-dr-links {
display: flex;
gap: 16px;
font-size: 12.5px;
}
.kj-dr-link {
color: var(--indigo, #4F46E5);
text-decoration: none;
}
.kj-dr-link:hover { text-decoration: underline; }
.kj-dr-facts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 24px;
padding: 12px 0;
border-top: 1px solid var(--border-soft, #E5E1D8);
border-bottom: 1px solid var(--border-soft, #E5E1D8);
}
.kj-dr-fact {
display: flex;
flex-direction: column;
gap: 2px;
}
.kj-dr-fact-label {
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--slate, #9CA3AF);
}
.kj-dr-fact-value {
font-size: 13px;
font-weight: 600;
color: var(--ink, #14141A);
}
.kj-dr-note {
margin: 0;
font-size: 13.5px;
color: var(--ink, #14141A);
line-height: 1.6;
padding-left: 12px;
border-left: 2px solid var(--border-soft, #E5E1D8);
}
.kj-dr-section { display: flex; flex-direction: column; gap: 8px; }
.kj-dr-head {
display: flex;
align-items: baseline;
gap: 8px;
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slate, #9CA3AF);
}
.kj-dr-count {
font-size: 10.5px;
font-weight: 600;
color: var(--slate, #6B7280);
}
.kj-dr-section-sub {
margin: -2px 0 4px;
font-size: 12px;
color: var(--slate, #6B7280);
}
.kj-dr-list { display: flex; flex-direction: column; }
.kj-dr-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
background: transparent;
border: none;
border-top: 1px solid var(--border-soft, #E5E1D8);
width: 100%;
text-align: left;
font-family: inherit;
color: var(--ink, #14141A);
cursor: pointer;
transition: background 0.12s ease, padding 0.12s ease;
}
.kj-dr-row:first-child { border-top: none; }
.kj-dr-row:hover {
background: rgba(79, 70, 229, 0.04);
padding-left: 6px;
padding-right: 6px;
}
.kj-dr-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kj-dr-row-name {
font-size: 13.5px;
font-weight: 500;
color: var(--ink, #14141A);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kj-dr-row-sub {
font-size: 11.5px;
color: var(--slate, #6B7280);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kj-dr-row-arrow {
color: var(--slate, #9CA3AF);
font-size: 16px;
opacity: 0;
transition: opacity 0.12s ease, transform 0.12s ease;
}
.kj-dr-row:hover .kj-dr-row-arrow { opacity: 1; transform: translateX(2px); }
.kj-dr-row-stack { flex-direction: column; align-items: flex-start; gap: 4px; }
.kj-dr-row-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
width: 100%;
}
.kj-dr-row-summary {
display: block;
font-size: 13px;
color: var(--ink, #14141A);
line-height: 1.5;
}
.kj-dr-row-flag {
margin-left: auto;
font-size: 10.5px;
color: var(--indigo, #4F46E5);
background: rgba(79, 70, 229, 0.08);
padding: 2px 6px;
border-radius: 6px;
}
.kj-dr-foot {
display: flex;
align-items: center;
gap: 12px;
margin-top: 8px;
padding-top: 16px;
border-top: 1px solid var(--border-soft, #E5E1D8);
}
.kj-dr-foot-delete {
margin-left: auto;
background: transparent;
border: none;
color: var(--slate, #9CA3AF);
font-size: 12px;
cursor: pointer;
padding: 6px 8px;
border-radius: 6px;
transition: color 0.12s ease, background 0.12s ease;
}
.kj-dr-foot-delete:hover {
color: #B23A3A;
background: rgba(178, 58, 58, 0.06);
}
/* v2.9 contact drawer additions: clickable company anchor in the meta
strip, compact stage select + suggested-next-step link, journey
spacing inside the drawer, activity row layout, and stage badge. */
.kj-dr-meta-link {
font-size: 12px;
color: var(--indigo, #4F46E5);
background: transparent;
border: none;
cursor: pointer;
padding: 0;
text-decoration: none;
line-height: 1.4;
}
.kj-dr-meta-link:hover { text-decoration: underline; }
.kj-dr-journey {
margin: 4px 0 0;
padding: 4px 0 0;
}
.kj-dr-stage-row {
display: flex;
align-items: stretch;
gap: 10px;
flex-wrap: wrap;
}
.kj-dr-stage-select {
flex: 1;
min-width: 220px;
height: 36px;
padding: 0 32px 0 12px;
font: inherit;
font-size: 13px;
color: var(--ink, #1F2128);
background: #FAFAF7 url("data:image/svg+xml;utf8,") no-repeat right 12px center;
border: 1px solid var(--border-soft, #E5E1D8);
border-radius: 6px;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
transition: border-color 0.12s ease, background-color 0.12s ease;
}
.kj-dr-stage-select:hover { border-color: var(--slate, #9CA3AF); }
.kj-dr-stage-select:focus { outline: none; border-color: var(--indigo, #4F46E5); }
.kj-dr-next {
display: inline-flex;
flex-direction: column;
justify-content: center;
gap: 1px;
padding: 5px 14px;
background: transparent;
border: 1px solid var(--border-soft, #E5E1D8);
border-radius: 6px;
text-decoration: none;
cursor: pointer;
font-family: inherit;
transition: border-color 0.12s ease, background-color 0.12s ease;
text-align: left;
}
.kj-dr-next:hover {
border-color: var(--indigo, #4F46E5);
background: rgba(79, 70, 229, 0.04);
}
.kj-dr-next-label {
font-size: 9.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slate, #9CA3AF);
font-weight: 600;
}
.kj-dr-next-text {
font-size: 12.5px;
color: var(--indigo, #4F46E5);
font-weight: 500;
}
.kj-dr-head-x {
margin-left: auto;
background: transparent;
border: none;
color: var(--slate, #9CA3AF);
font-size: 11px;
cursor: pointer;
padding: 2px 6px;
}
.kj-dr-head-x:hover { color: var(--ink, #1F2128); }
.kj-dr-empty {
font-size: 12.5px;
color: var(--slate, #9CA3AF);
margin: 4px 0 0;
}
.kj-dr-row-key {
flex: 0 0 auto;
min-width: 88px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11.5px;
color: var(--slate, #9CA3AF);
}
.kj-dr-row-date {
flex: 0 0 auto;
min-width: 84px;
font-size: 11.5px;
color: var(--slate, #9CA3AF);
font-variant-numeric: tabular-nums;
}
.kj-dr-row-activity { align-items: flex-start; padding: 12px 0; }
.kj-dr-row-activity .kj-dr-row-main {
font-size: 12.5px;
color: var(--ink, #1F2128);
line-height: 1.5;
}
.kj-dr-row-activity .kj-dr-row-meta { color: var(--indigo, #4F46E5); cursor: pointer; }
/* Stage badge in the contact drawer meta strip. Neutral by default; subtle
variants for the most common states. Keeps the same soft-square shape
as the other kj-rel-badge / kj-ai-badge family. */
.kj-rel-badge.kj-rel-stage {
background: #F1EFE7;
color: #5B5648;
border: 1px solid #E5E1D8;
}
.kj-rel-badge.kj-rel-stage[data-stage="Engagement live"] {
background: rgba(79, 70, 229, 0.08);
color: var(--indigo-deep, #312E81);
border-color: rgba(79, 70, 229, 0.2);
}
.kj-rel-badge.kj-rel-stage[data-stage="Audit shared"],
.kj-rel-badge.kj-rel-stage[data-stage="Audit reviewed"] {
background: rgba(34, 139, 34, 0.06);
color: #2D5F2D;
border-color: rgba(34, 139, 34, 0.18);
}
.kj-rel-badge.kj-rel-stage[data-stage="Proposal sent"] {
background: rgba(202, 138, 4, 0.08);
color: #7C5A07;
border-color: rgba(202, 138, 4, 0.22);
}
.kj-rel-badge.kj-rel-stage[data-stage="Lost"] {
background: rgba(178, 58, 58, 0.06);
color: #8C2A2A;
border-color: rgba(178, 58, 58, 0.2);
}
/* v3.5: editorial Leads inbox.
Tabs and group toggle are minimal text-only controls. The body is a
vertical list of cards - each card is one row, no horizontal scroll,
with the Lead Score and Approve/Reject always visible on the right.
A 3px coloured left border encodes the score band (green/amber/red). */
.kj-leads-bar {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #EAEAEA;
padding: 10px 0 12px;
margin: 18px 0 22px;
}
.kj-leads-tabs-ed { display: flex; gap: 32px; }
.kj-leads-tab-ed {
background: transparent;
border: none;
padding: 6px 2px;
font: inherit;
font-size: 13.5px;
letter-spacing: -0.005em;
color: #787774;
cursor: pointer;
position: relative;
transition: color 0.12s ease;
}
.kj-leads-tab-ed:hover { color: #111111; }
.kj-leads-tab-ed.is-active {
color: #111111;
font-weight: 600;
}
.kj-leads-tab-ed.is-active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -13px;
height: 2px;
background: var(--indigo, #4F46E5);
border-radius: 2px;
}
.kj-leads-tab-ed-count {
display: inline-block;
margin-left: 6px;
padding: 1px 7px;
background: rgba(15, 14, 18, 0.05);
border-radius: 999px;
font-size: 11px;
color: #787774;
font-weight: 600;
}
.kj-leads-tab-ed.is-active .kj-leads-tab-ed-count {
background: rgba(79, 70, 229, 0.12);
color: var(--indigo, #4F46E5);
}
.kj-leads-group-toggle { display: flex; align-items: center; gap: 10px; }
.kj-leads-group-label {
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #9CA3AF;
font-weight: 600;
}
.kj-leads-group-btn {
background: transparent;
border: none;
padding: 4px 2px;
font: inherit;
font-size: 12.5px;
color: #787774;
cursor: pointer;
border-bottom: 1px solid transparent;
transition: color 0.12s ease, border-color 0.12s ease;
}
.kj-leads-group-btn:hover { color: #111111; }
.kj-leads-group-btn.is-active {
color: #111111;
font-weight: 600;
border-bottom-color: #111111;
}
/* v3.6: filter toolbar. One quiet row: search, sort, sector, country,
size, score. Editorial - no filled chips. The search box has a small
glyph at the start; selects use a native chevron we hide. */
.kj-leads-toolbar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding: 10px 0 16px;
border-bottom: 1px solid #EAEAEA;
margin-bottom: 12px;
}
.kj-leads-search {
flex: 1;
min-width: 220px;
display: flex;
align-items: center;
gap: 6px;
padding: 0 10px;
height: 32px;
background: #FFFFFF;
border: 1px solid #EAEAEA;
border-radius: 6px;
transition: border-color 0.12s ease;
}
.kj-leads-search:focus-within { border-color: var(--indigo, #4F46E5); }
.kj-leads-search-ico { color: #9CA3AF; font-size: 13px; }
.kj-leads-search input {
flex: 1;
border: none;
outline: none;
background: transparent;
font: inherit;
font-size: 12.5px;
color: #111111;
}
.kj-leads-search input::placeholder { color: #9CA3AF; }
.kj-leads-sort,
.kj-leads-facet {
display: inline-flex;
align-items: center;
gap: 6px;
}
.kj-leads-sort label,
.kj-leads-facet label {
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #9CA3AF;
font-weight: 600;
}
/* v3.9: multi-select facet button + popover. Replaces the native