Yashas
3dd482f180
An AI employee here has no escalate tool — the platform withholds it from autonomous employees on purpose — so "a person should take this" has to be an activity in the workflow. It now is: Flag for Review, which lands the lead in a new stage, Needs a Person. The console side of that: the stage joins the nav under Needs you, its two actions are Send back to the workflow / Send to underwriting, the flag fields lead the lead-file groups, and a flagged lead opens on an amber banner quoting the AI's own sentence about what stopped it, with the blocker turned into something an operator can act on. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
400 lines
29 KiB
CSS
400 lines
29 KiB
CSS
/* ═══════════════════════════════════════════════════════════════════════════
|
|
Lead Desk screens. Flat white cards on the grey canvas, one colour rule:
|
|
blue = the AI holds it, amber = a person, teal = the customer, red = risk.
|
|
═══════════════════════════════════════════════════════════════════════════ */
|
|
|
|
/* ── Page head ──────────────────────────────────────────────────────────── */
|
|
.page__head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
|
|
.page__lead { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
|
|
.page__title { margin: 0; font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; color: var(--zk-ink); }
|
|
.page__sub { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--zk-muted); }
|
|
.page__stage { color: var(--zk-grey); }
|
|
.page__stage::before { content: ' · '; }
|
|
.page__sub .idline, .idline { font-size: var(--fs-sm); color: var(--zk-grey); margin-top: 2px; }
|
|
.page__right { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: var(--fs-xs); color: var(--zk-grey); }
|
|
.stamp { font-size: var(--fs-xs); color: var(--zk-grey); white-space: nowrap; }
|
|
|
|
/* ── Buttons, pills, dots ───────────────────────────────────────────────── */
|
|
.btn, .newlead {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
padding: 9px 16px; border-radius: var(--r-sm);
|
|
font: inherit; font-weight: 600; font-size: var(--fs-sm);
|
|
cursor: pointer; border: 1px solid transparent; text-decoration: none;
|
|
transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
|
|
}
|
|
.btn svg, .newlead svg { width: 14px; height: 14px; }
|
|
.newlead, .btn--primary { background: var(--zk-blue); color: #fff; }
|
|
.newlead:hover, .btn--primary:hover { background: var(--zk-navy-2); }
|
|
.btn--navy { background: var(--zk-navy); color: #fff; }
|
|
.btn--navy:hover { background: var(--zk-navy-2); }
|
|
.btn--ghost { border-color: var(--zk-line); background: #fff; color: var(--zk-ink); }
|
|
.btn--ghost:hover { background: var(--zk-tint); border-color: var(--zk-grey); }
|
|
.btn--small { padding: 5px 12px; font-size: var(--fs-xs); }
|
|
.btn:focus-visible, .newlead:focus-visible { outline: none; box-shadow: var(--ring); }
|
|
.btn:disabled { opacity: .55; cursor: default; }
|
|
|
|
.pill {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
padding: 2px 10px; border-radius: var(--r-pill);
|
|
font-size: var(--fs-2xs); font-weight: 600; line-height: 1.5; white-space: nowrap;
|
|
}
|
|
.pill--red { background: var(--zk-danger-tint); color: var(--zk-danger); }
|
|
.pill--amber { background: var(--zk-amber-tint); color: var(--zk-amber); }
|
|
.pill--teal { background: var(--zk-teal-tint); color: var(--zk-teal); }
|
|
.pill--blue { background: var(--zk-tint-blue); color: var(--zk-blue); }
|
|
.pill--grey { background: var(--zk-line-soft); color: var(--zk-muted); }
|
|
|
|
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
|
|
.dot--blue { background: var(--zk-blue); }
|
|
.dot--amber { background: var(--zk-amber); }
|
|
.dot--teal { background: var(--zk-teal); }
|
|
.dot--red { background: var(--zk-danger); }
|
|
.dot--grey { background: var(--zk-grey); }
|
|
|
|
.who { display: inline-flex; align-items: center; gap: 7px; color: var(--zk-muted); white-space: nowrap; }
|
|
.muted { color: var(--zk-grey); }
|
|
.link { color: var(--zk-blue); font-weight: 600; }
|
|
|
|
/* ── Cards ──────────────────────────────────────────────────────────────── */
|
|
.card { background: var(--zk-card); border: 1px solid var(--zk-line); border-radius: var(--r-md); }
|
|
.card__hd { display: flex; align-items: baseline; gap: 12px; padding: 16px 20px 12px; }
|
|
.card__hd h3 { margin: 0; font-size: var(--fs-lg); font-weight: 600; color: var(--zk-ink); }
|
|
.card__hd p { margin: 0; font-size: var(--fs-xs); color: var(--zk-grey); }
|
|
.card__hd .card__right { margin-left: auto; font-size: var(--fs-xs); color: var(--zk-muted); }
|
|
|
|
/* ── States: notice, empty, skeleton ────────────────────────────────────── */
|
|
.notice {
|
|
background: #fff; border: 1px solid var(--zk-line); border-left: 3px solid var(--zk-blue);
|
|
border-radius: var(--r-xs) var(--r-md) var(--r-md) var(--r-xs); padding: 18px 22px; max-width: 64ch;
|
|
}
|
|
.notice strong { display: block; font-weight: 600; margin-bottom: 7px; }
|
|
.notice p { margin: 0 0 6px; font-size: var(--fs-xs); color: var(--zk-muted); line-height: 1.55; }
|
|
.notice__detail { font-size: var(--fs-2xs) !important; color: var(--zk-grey) !important; }
|
|
.empty {
|
|
margin: 0; color: var(--zk-muted); font-size: var(--fs-xs); text-align: center;
|
|
padding: 44px 24px; border-radius: var(--r-md); border: 1px dashed var(--zk-line); background: #fff;
|
|
}
|
|
.skel { display: flex; flex-direction: column; gap: 10px; }
|
|
.skel__row {
|
|
height: 52px; border-radius: var(--r-md); border: 1px solid var(--zk-line-soft);
|
|
background: linear-gradient(90deg, #fff 0, var(--zk-tint) 40%, #fff 80%);
|
|
background-size: 840px 100%; animation: zk-shimmer 1.4s linear infinite;
|
|
}
|
|
|
|
/* ── Overview: who holds the work ───────────────────────────────────────── */
|
|
.hero { display: grid; grid-template-columns: 1fr 380px; gap: 18px; margin-bottom: 22px; }
|
|
.holders { padding: 20px 24px 22px; }
|
|
.holders__top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
|
|
.holders__top b { font-size: 30px; font-weight: 700; letter-spacing: -.01em; }
|
|
.holders__top span { font-size: var(--fs-md); color: var(--zk-muted); }
|
|
.bar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; gap: 3px; margin-bottom: 16px; background: var(--zk-line-soft); }
|
|
.bar div { height: 100%; transition: width var(--t); }
|
|
.bar__blue { background: var(--zk-blue); } .bar__amber { background: var(--zk-amber-bar); } .bar__teal { background: var(--zk-teal); }
|
|
.legend { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
|
|
.legend__item { border-left: 3px solid; padding-left: 14px; }
|
|
.legend__item--blue { border-color: var(--zk-blue); } .legend__item--amber { border-color: var(--zk-amber-bar); } .legend__item--teal { border-color: var(--zk-teal); }
|
|
.legend__item b { display: block; font-size: 26px; font-weight: 700; line-height: 1.1; }
|
|
.legend__item strong { display: block; font-size: var(--fs-sm); font-weight: 600; margin-top: 3px; }
|
|
.legend__item span { display: block; font-size: var(--fs-xs); color: var(--zk-muted); margin-top: 2px; }
|
|
.risk { background: var(--zk-danger-tint); border-color: var(--zk-danger-line); padding: 20px 22px; display: flex; flex-direction: column; }
|
|
.risk b { font-size: var(--fs-3xl); font-weight: 700; color: var(--zk-danger); line-height: 1; letter-spacing: -.02em; }
|
|
.risk strong { display: block; font-size: var(--fs-lg); font-weight: 600; margin-top: 6px; }
|
|
.risk__rows { margin-top: auto; padding-top: 14px; display: grid; gap: 6px; font-size: var(--fs-sm); }
|
|
.risk__rows div { display: flex; justify-content: space-between; }
|
|
.risk__rows em { font-style: normal; font-weight: 700; color: var(--zk-danger); }
|
|
.risk.is-quiet b { color: var(--zk-teal); } .risk.is-quiet { background: var(--zk-teal-tint); border-color: var(--zk-teal-line); }
|
|
.risk.is-quiet .risk__rows em { color: var(--zk-teal); }
|
|
|
|
/* ── KPI strip ──────────────────────────────────────────────────────────── */
|
|
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); padding: 18px 0; margin-bottom: 22px; }
|
|
.kpi { padding: 0 24px; border-left: 1px solid var(--zk-line-soft); }
|
|
.kpi:first-child { border-left: 0; }
|
|
.kpi__l { display: block; font-size: var(--fs-xs); color: var(--zk-muted); font-weight: 500; }
|
|
.kpi__v { display: block; font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; margin: 4px 0 2px; color: var(--zk-ink); }
|
|
.kpi__s { font-size: var(--fs-xs); color: var(--zk-grey); }
|
|
|
|
/* ── Sign-off band (the role that confirms premium) ─────────────────────── */
|
|
.appr {
|
|
display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
|
|
padding: 16px 22px; margin-bottom: 22px; text-decoration: none; color: inherit;
|
|
border-radius: var(--r-md); border: 1px solid var(--zk-amber-line); background: var(--zk-amber-tint);
|
|
}
|
|
.appr__n { font-size: 30px; font-weight: 700; color: var(--zk-amber); min-width: 40px; text-align: center; }
|
|
.appr__t { font-size: var(--fs-md); font-weight: 600; display: flex; flex-direction: column; gap: 3px; }
|
|
.appr__t em { font-style: normal; font-size: var(--fs-xs); font-weight: 400; color: var(--zk-muted); }
|
|
.appr__go { font-size: var(--fs-xs); font-weight: 600; color: var(--zk-amber); }
|
|
.appr:not(.is-live) { background: #fff; border-color: var(--zk-line); }
|
|
.appr:not(.is-live) .appr__n, .appr:not(.is-live) .appr__go { color: var(--zk-grey); }
|
|
|
|
/* ── Two columns: queue + distribution ──────────────────────────────────── */
|
|
.cols { display: grid; grid-template-columns: 1fr 380px; gap: 18px; margin-bottom: 22px; align-items: stretch; }
|
|
/* The two cards share a height; the queue's rows spread to fill it so the
|
|
shorter card never ends in a block of empty canvas. */
|
|
.cols > .card { display: flex; flex-direction: column; }
|
|
.queue { flex: 1; display: flex; flex-direction: column; }
|
|
.queue__row { flex: 1; }
|
|
.queue { padding: 0 0 6px; }
|
|
.queue__row {
|
|
display: grid; grid-template-columns: 52px 1fr auto auto; gap: 14px; align-items: center;
|
|
padding: 14px 20px; border-top: 1px solid var(--zk-line-soft); text-decoration: none; color: inherit;
|
|
transition: background var(--t-fast);
|
|
}
|
|
.queue__row:first-child { border-top: 0; }
|
|
.queue__row:hover { background: var(--zk-tint); }
|
|
.queue__n { font-size: 26px; font-weight: 700; text-align: center; color: var(--zk-ink); }
|
|
.queue__row.is-clear .queue__n { color: var(--zk-grey); }
|
|
.queue__t { font-size: var(--fs-md); font-weight: 600; }
|
|
.queue__who { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--zk-muted); margin-top: 2px; }
|
|
.queue__age { font-size: var(--fs-xs); color: var(--zk-grey); text-align: right; line-height: 1.35; }
|
|
.queue__age em { display: block; font-style: normal; color: var(--zk-blue); font-weight: 600; }
|
|
.queue__ro { font-size: var(--fs-3xs); color: var(--zk-grey); border: 1px solid var(--zk-line); border-radius: var(--r-pill); padding: 1px 8px; }
|
|
|
|
.dist { padding: 6px 20px 14px; }
|
|
.dist__r {
|
|
display: grid; grid-template-columns: 1fr 120px 34px; gap: 12px; align-items: center;
|
|
padding: 8px 0; font-size: var(--fs-sm); text-decoration: none; color: var(--zk-ink);
|
|
}
|
|
.dist__r:hover .dist__l { color: var(--zk-blue); }
|
|
.dist__r.is-zero, .dist__r.is-dim { color: var(--zk-grey); }
|
|
.dist__bar { height: 8px; background: var(--zk-line-soft); border-radius: 4px; overflow: hidden; }
|
|
.dist__f { display: block; height: 100%; border-radius: 4px; background: var(--zk-navy); transition: width var(--t); }
|
|
.dist__f--blue { background: var(--zk-blue); } .dist__f--amber { background: var(--zk-amber-bar); }
|
|
.dist__f--teal { background: var(--zk-teal); } .dist__f--grey { background: #AEB7C6; }
|
|
.dist__n { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
|
|
.dist__sec { padding: 12px 0 4px; font-size: var(--fs-2xs); color: var(--zk-grey); font-weight: 600; border-top: 1px solid var(--zk-line-soft); margin-top: 6px; }
|
|
|
|
/* ── Renewal exposure ───────────────────────────────────────────────────── */
|
|
.exp__tabs { display: flex; align-items: center; gap: 10px; padding: 0 20px 14px; flex-wrap: wrap; }
|
|
.tab {
|
|
display: flex; align-items: baseline; gap: 8px; padding: 8px 14px;
|
|
border: 1px solid var(--zk-line); border-radius: var(--r-sm); font-size: var(--fs-sm); background: #fff;
|
|
}
|
|
.tab b { font-size: var(--fs-xl); font-weight: 700; }
|
|
.tab--red { border-color: var(--zk-danger-line); background: var(--zk-danger-tint); } .tab--red b { color: var(--zk-danger); }
|
|
.tab--amber { border-color: var(--zk-amber-line); background: var(--zk-amber-tint); } .tab--amber b { color: var(--zk-amber); }
|
|
.exp__filters { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
|
|
.xfd__f select {
|
|
font: inherit; font-size: var(--fs-xs); color: var(--zk-muted);
|
|
padding: 8px 30px 8px 12px; border: 1px solid var(--zk-line); border-radius: var(--r-sm);
|
|
background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%237A8699' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 10px center;
|
|
-webkit-appearance: none; appearance: none; cursor: pointer;
|
|
}
|
|
.xfd__f select:hover { border-color: var(--zk-grey); }
|
|
.xfd__f select:focus-visible { outline: none; border-color: var(--zk-blue); box-shadow: var(--ring); }
|
|
.xfd__clear { font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--zk-blue); background: none; border: 0; cursor: pointer; padding: 8px 6px; }
|
|
.xfd__clear:hover { text-decoration: underline; }
|
|
|
|
/* ── Tables ─────────────────────────────────────────────────────────────── */
|
|
.gridwrap { overflow-x: auto; }
|
|
.grid { width: 100%; border-collapse: collapse; }
|
|
.grid th {
|
|
font-size: var(--fs-3xs); font-weight: 600; color: var(--zk-grey); text-align: left;
|
|
padding: 10px 20px; border-top: 1px solid var(--zk-line-soft); border-bottom: 1px solid var(--zk-line-soft); background: #FAFBFD; white-space: nowrap;
|
|
}
|
|
.grid td { padding: 12px 20px; border-bottom: 1px solid var(--zk-line-soft); font-size: var(--fs-sm); vertical-align: middle; }
|
|
.grid tr:last-child td { border-bottom: 0; }
|
|
.grid th.num, .grid td.num { text-align: right; }
|
|
.grid td.num { font-weight: 600; font-variant-numeric: tabular-nums; }
|
|
.grid__row { cursor: pointer; transition: background var(--t-fast); }
|
|
.grid__row:hover td { background: var(--zk-tint); }
|
|
.grid__row:focus-visible { outline: none; } .grid__row:focus-visible td { background: var(--zk-tint-blue); }
|
|
.grid__name { display: block; font-size: var(--fs-md); font-weight: 600; color: var(--zk-ink); }
|
|
.grid__sub { font-size: var(--fs-2xs); color: var(--zk-grey); margin-top: 2px; }
|
|
.grid tr.is-done td { color: var(--zk-grey); }
|
|
.grid tr.is-done .grid__name { font-weight: 500; color: var(--zk-muted); }
|
|
.grid tr.is-stalled td:first-child { box-shadow: inset 3px 0 0 var(--zk-danger); }
|
|
|
|
.due { display: flex; flex-direction: column; gap: 2px; }
|
|
.due b { font-weight: 600; }
|
|
.due--amber b { color: var(--zk-amber); } .due--red b { color: var(--zk-danger); }
|
|
.due small { font-size: var(--fs-2xs); color: var(--zk-grey); }
|
|
.stall { display: inline-flex; align-items: center; gap: 7px; color: var(--zk-danger); font-weight: 600; font-size: var(--fs-xs); }
|
|
.stall::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--zk-danger); }
|
|
.grp-row td { background: #FAFBFD; padding: 10px 20px; font-size: var(--fs-xs); font-weight: 600; color: var(--zk-muted); border-top: 1px solid var(--zk-line-soft); }
|
|
.grp-row td span { font-weight: 400; color: var(--zk-grey); margin-left: 8px; }
|
|
.grp-row td .dot { margin-right: 8px; vertical-align: 1px; }
|
|
.need { display: flex; gap: 6px; flex-wrap: wrap; }
|
|
.need span { font-size: var(--fs-2xs); padding: 2px 9px; border-radius: 6px; background: var(--zk-amber-tint); color: var(--zk-amber); font-weight: 600; }
|
|
.need span.need__ok { background: var(--zk-teal-tint); color: var(--zk-teal); }
|
|
.pager { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--zk-line-soft); font-size: var(--fs-xs); color: var(--zk-grey); }
|
|
.pager__pg { margin-left: auto; display: flex; gap: 4px; }
|
|
.pager__pg button {
|
|
font: inherit; font-size: var(--fs-xs); padding: 4px 10px; border-radius: 6px; cursor: pointer;
|
|
border: 1px solid var(--zk-line); background: #fff; color: var(--zk-muted);
|
|
}
|
|
.pager__pg button.is-on { background: var(--zk-navy); color: #fff; border-color: var(--zk-navy); }
|
|
.pager__pg button:disabled { opacity: .45; cursor: default; }
|
|
|
|
/* ── List tools ─────────────────────────────────────────────────────────── */
|
|
.tools { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--zk-line-soft); flex-wrap: wrap; }
|
|
.search {
|
|
display: flex; align-items: center; gap: 8px; padding: 8px 12px; min-width: 260px;
|
|
border: 1px solid var(--zk-line); border-radius: var(--r-sm); background: #fff; color: var(--zk-grey);
|
|
}
|
|
.search svg { width: 14px; height: 14px; flex: none; }
|
|
.search input { border: 0; outline: 0; background: none; font: inherit; font-size: var(--fs-xs); color: var(--zk-ink); flex: 1; min-width: 0; }
|
|
.search:focus-within { border-color: var(--zk-blue); box-shadow: var(--ring); }
|
|
.fchip {
|
|
font: inherit; font-size: var(--fs-xs); color: var(--zk-muted); background: #fff;
|
|
padding: 7px 30px 7px 12px; border: 1px solid var(--zk-line); border-radius: var(--r-pill); cursor: pointer;
|
|
-webkit-appearance: none; appearance: none;
|
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%237A8699' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
|
|
background-repeat: no-repeat; background-position: right 10px center;
|
|
}
|
|
.fchip.is-on { border-color: var(--zk-navy); color: var(--zk-navy); font-weight: 600; background-color: var(--zk-tint-blue); }
|
|
.fchip:focus-visible { outline: none; box-shadow: var(--ring); }
|
|
.tools__count { margin-left: auto; font-size: var(--fs-xs); color: var(--zk-grey); }
|
|
.tools__toggle { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--zk-muted); cursor: pointer; user-select: none; }
|
|
.tools__toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
|
|
.tools__toggle i { width: 34px; height: 20px; border-radius: 10px; background: var(--zk-line); position: relative; display: inline-block; transition: background var(--t-fast); }
|
|
.tools__toggle i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left var(--t-fast); }
|
|
.tools__toggle.is-on i { background: var(--zk-blue); } .tools__toggle.is-on i::after { left: 16px; }
|
|
.tools__toggle:focus-within i { box-shadow: var(--ring); }
|
|
|
|
/* ── Lead detail ────────────────────────────────────────────────────────── */
|
|
.back {
|
|
width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--zk-line); background: #fff;
|
|
display: grid; place-items: center; color: var(--zk-muted); margin-top: 4px; cursor: pointer; flex: none;
|
|
transition: background var(--t-fast), border-color var(--t-fast);
|
|
}
|
|
.back svg { width: 16px; height: 16px; }
|
|
.back:hover { background: var(--zk-tint); border-color: var(--zk-grey); color: var(--zk-ink); }
|
|
.state { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--zk-muted); }
|
|
.state .pill { font-size: var(--fs-xs); }
|
|
|
|
.attn {
|
|
display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
|
|
padding: 18px 22px; margin-bottom: 18px; border-radius: var(--r-md);
|
|
border: 1px solid var(--zk-amber-line); background: var(--zk-amber-tint);
|
|
}
|
|
.attn--red { border-color: var(--zk-danger-line); background: var(--zk-danger-tint); }
|
|
.attn--blue { border-color: var(--zk-blue-light); background: var(--zk-tint-blue); }
|
|
.attn h3 { margin: 0; font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
|
|
.attn h3 .dot { width: 10px; height: 10px; }
|
|
.attn p { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--zk-muted); max-width: 78ch; line-height: 1.5; }
|
|
.attn__acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
|
|
.attn__q { font: inherit; font-size: var(--fs-xs); color: var(--zk-muted); font-weight: 600; padding: 0 6px; background: none; border: 0; cursor: pointer; }
|
|
.attn__q:hover { color: var(--zk-navy); text-decoration: underline; }
|
|
|
|
.facts { display: grid; grid-template-columns: repeat(4, 1fr); padding: 18px 0; margin-bottom: 18px; }
|
|
.fact { padding: 0 24px; border-left: 1px solid var(--zk-line-soft); min-width: 0; }
|
|
.fact:first-child { border-left: 0; }
|
|
.fact__l { display: block; font-size: var(--fs-xs); color: var(--zk-muted); font-weight: 500; }
|
|
.fact__v { display: block; font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; margin: 4px 0 2px; color: var(--zk-ink); }
|
|
.fact__v.is-none { color: var(--zk-grey); font-weight: 500; font-size: 22px; }
|
|
.fact__v.due--red { color: var(--zk-danger); } .fact__v.due--amber { color: var(--zk-amber); }
|
|
.fact__s { font-size: var(--fs-xs); color: var(--zk-grey); }
|
|
.fact__conf { display: flex; align-items: center; gap: 10px; }
|
|
.fact__conf .tr { flex: 1; height: 6px; background: var(--zk-line-soft); border-radius: 3px; overflow: hidden; }
|
|
.fact__conf .tr i { display: block; height: 100%; background: var(--zk-teal); border-radius: 3px; }
|
|
.fact__conf span { font-size: var(--fs-xs); color: var(--zk-grey); }
|
|
|
|
.detail { display: grid; grid-template-columns: 1fr 400px; gap: 18px; align-items: start; }
|
|
.detail__main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
|
|
.detail__side { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
|
|
|
|
/* The panels on the lead page are cards. */
|
|
.panel { background: var(--zk-card); border: 1px solid var(--zk-line); border-radius: var(--r-md); padding: 0 24px 20px; }
|
|
.panel__head { display: flex; align-items: baseline; gap: 12px; padding: 18px 0 6px; flex-wrap: wrap; }
|
|
.panel__title { margin: 0; font-size: 19px; font-weight: 700; color: var(--zk-ink); }
|
|
.panel__sub { margin: 0; font-size: var(--fs-2xs); color: var(--zk-grey); }
|
|
.panel__act {
|
|
margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
|
|
font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--zk-ink);
|
|
padding: 5px 12px; border: 1px solid var(--zk-line); border-radius: var(--r-sm); background: #fff; cursor: pointer;
|
|
}
|
|
.panel__act svg { width: 14px; height: 14px; }
|
|
.panel__act b { font-weight: 600; color: var(--zk-muted); }
|
|
.panel__act:hover { background: var(--zk-tint); }
|
|
|
|
/* Next step */
|
|
.step { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
|
|
.step__btn { justify-content: center;
|
|
display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
|
|
font: inherit; text-align: left; cursor: pointer;
|
|
padding: 12px 18px; border-radius: var(--r-sm); border: 1px solid var(--zk-navy); background: var(--zk-navy); color: #fff;
|
|
transition: background var(--t-fast);
|
|
}
|
|
.step__btn strong { font-size: var(--fs-sm); font-weight: 700; }
|
|
.step__btn span { font-size: var(--fs-2xs); opacity: .8; }
|
|
.step__btn:hover, .step__btn.is-open { background: var(--zk-navy-2); }
|
|
.step__btn--no { background: #fff; color: var(--zk-danger); border-color: var(--zk-danger-line); }
|
|
.step__btn--no:hover, .step__btn--no.is-open { background: var(--zk-danger-tint); }
|
|
.alt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
|
|
.alt__note { font-size: var(--fs-3xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--zk-grey); margin-right: 4px; }
|
|
.alt__btn {
|
|
font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
padding: 7px 12px; border-radius: var(--r-sm); border: 1px solid var(--zk-line); background: #fff; color: var(--zk-ink);
|
|
}
|
|
.alt__btn em { font-style: normal; font-weight: 400; font-size: var(--fs-2xs); color: var(--zk-grey); }
|
|
.alt__btn:hover, .alt__btn.is-open { border-color: var(--zk-navy); background: var(--zk-tint-blue); color: var(--zk-navy); }
|
|
.alt__btn--exit { color: var(--zk-danger); } .alt__btn--exit:hover { border-color: var(--zk-danger-line); background: var(--zk-danger-tint); color: var(--zk-danger); }
|
|
.stuck { margin-top: 14px; border-top: 1px solid var(--zk-line-soft); padding-top: 10px; }
|
|
.stuck > summary { cursor: pointer; font-size: var(--fs-xs); font-weight: 600; color: var(--zk-muted); list-style: none; }
|
|
.stuck > summary::-webkit-details-marker { display: none; }
|
|
.stuck > summary::before { content: '▸ '; color: var(--zk-grey); }
|
|
.stuck[open] > summary::before { content: '▾ '; }
|
|
.stuck__why { margin: 10px 0 0; font-size: var(--fs-2xs); color: var(--zk-grey); max-width: 64ch; }
|
|
.acts__form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--zk-line-soft); }
|
|
.said {
|
|
display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px;
|
|
border-radius: var(--r-md); border: 1px solid var(--zk-teal-line); background: var(--zk-teal-tint); color: var(--zk-teal-ink);
|
|
}
|
|
.said p { margin: 0; font-size: var(--fs-sm); flex: 1; }
|
|
.said button { font: inherit; font-size: 18px; line-height: 1; background: none; border: 0; cursor: pointer; color: inherit; opacity: .7; }
|
|
|
|
/* Side cards: worked by, and the facts */
|
|
.panel--crew { padding: 16px 20px 18px; }
|
|
.crew__l { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--zk-grey); margin-bottom: 10px; }
|
|
.crew { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
.glance { display: flex; flex-direction: column; }
|
|
.fgroup { padding-top: 14px; border-top: 1px solid var(--zk-line-soft); }
|
|
.fgroup:first-child { border-top: 0; padding-top: 6px; }
|
|
.fgroup h3 { margin: 0 0 4px; font-size: var(--fs-2xs); font-weight: 600; color: var(--zk-grey); display: flex; justify-content: space-between; }
|
|
.fgroup h3 span { font-weight: 500; }
|
|
.props { margin: 0; }
|
|
.prop { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 7px 0; font-size: var(--fs-sm); }
|
|
.prop dt { color: var(--zk-muted); }
|
|
.prop dd { margin: 0; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
|
|
.prop__num { font-variant-numeric: tabular-nums; }
|
|
.prop__files { display: flex; flex-direction: column; gap: 4px; }
|
|
.prop__file { color: var(--zk-blue); font-weight: 600; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; overflow-wrap: anywhere; }
|
|
.prop__file::before { content: ''; width: 12px; height: 14px; flex: none; border: 1.4px solid currentColor; border-radius: 2px; opacity: .7; }
|
|
.prop__file:hover { text-decoration: underline; }
|
|
.pending { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 0 4px; }
|
|
.pending span { font-size: var(--fs-2xs); padding: 3px 10px; border-radius: 6px; background: var(--zk-line-soft); color: var(--zk-muted); }
|
|
.glance__act {
|
|
display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
|
|
padding: 5px 10px 5px 8px; border: 1px solid var(--zk-line); border-radius: var(--r-sm); background: #fff;
|
|
cursor: pointer; font: inherit; font-size: var(--fs-2xs); font-weight: 600; color: var(--zk-blue);
|
|
}
|
|
.glance__act svg { width: 13px; height: 13px; }
|
|
.glance__act:hover { background: var(--zk-tint-blue); border-color: var(--zk-blue-light); }
|
|
.glance__rec { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
|
|
.glance__rec-l { font-size: var(--fs-3xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--zk-grey); }
|
|
.glance__rec audio { width: 100%; height: 36px; }
|
|
.glance__all {
|
|
display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 14px; padding: 10px 0 0;
|
|
border: 0; border-top: 1px solid var(--zk-line-soft); background: none; cursor: pointer;
|
|
font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--zk-blue); text-align: left;
|
|
}
|
|
.glance__all svg { width: 14px; height: 14px; }
|
|
.glance__all b { margin-left: auto; font-weight: 500; color: var(--zk-grey); }
|
|
.glance__all:hover { text-decoration: underline; }
|
|
|
|
@media (max-width: 1100px) {
|
|
.hero, .cols, .detail { grid-template-columns: 1fr; }
|
|
.kpis { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
|
|
.facts { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
|
|
}
|
|
|
|
/* The AI's own words, when it flagged a lead. Quoted, because deciding what
|
|
to do next is a judgement made on the sentence it wrote. */
|
|
.attn__said {
|
|
margin: 8px 0 0 !important; padding: 8px 14px;
|
|
border-left: 2px solid var(--zk-amber-bar); background: #fff;
|
|
border-radius: 0 var(--r-sm) var(--r-sm) 0;
|
|
font-size: var(--fs-md) !important; color: var(--zk-ink) !important; max-width: 78ch;
|
|
}
|