Yashas
93baba3fa1
The lead page told an operator an automated step "typically completes within two minutes; this view refreshes automatically" — and went on saying it indefinitely. Today a lead sat forty minutes under that sentence while the model provider returned 502s. Agents stall, and for reasons this app does not control: the provider slows from 6s a call to 90s or drops the request, a thinking budget runs out mid-sentence, a late webhook wakes the wrong employee. From the console every one of those looks identical — a lead that stops — so the screen now reports the only thing it can honestly know (nothing has happened for N minutes), says the work so far is safe, and offers the way out. THE WAY OUT IS NOT A RETRY BUTTON, because the platform has none and no agent can be woken directly. But every agent is woken BY AN ACTIVITY, so performing that activity again wakes it again. nudgeFor() holds that mapping, and inside Document Pending it picks by how far the chain actually got — three agents work that state in sequence and the one to restart is the one that did not finish. That matters most for the Advisor. It is the only AI step nobody may perform by hand — permitted to ai_advisor alone — so re-performing the activity that wakes it is the ONLY route back, and it is the step that failed twice today. Without this table an operator's only option was to wait or to call me. Five minutes before it says anything: an employee wake plus a slow model is legitimately three or four minutes, and a console that cries stall on a working lead is one nobody reads. The clock lives in state, ticking every 20s, rather than Date.now() in the render body — reading the wall clock while rendering is impure, and the counter would otherwise only move when something else happened to re-render the page. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
1372 lines
36 KiB
CSS
1372 lines
36 KiB
CSS
/* ---- page header ---- */
|
|
.page__head {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 24px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.page__title {
|
|
margin: 0;
|
|
font-size: 1.7rem;
|
|
font-weight: 500;
|
|
letter-spacing: -0.022em;
|
|
line-height: 1.2;
|
|
color: var(--zk-ink);
|
|
}
|
|
|
|
.page__sub {
|
|
margin: 6px 0 0;
|
|
max-width: 72ch;
|
|
font-size: 0.855rem;
|
|
line-height: 1.5;
|
|
color: var(--zk-muted);
|
|
}
|
|
|
|
/* The queue depth, as a stat tile rather than a loose number. */
|
|
.page__count {
|
|
flex: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1px;
|
|
min-width: 84px;
|
|
padding: 10px 18px;
|
|
border-radius: var(--r-lg);
|
|
background: var(--zk-white);
|
|
border: 1px solid var(--zk-line);
|
|
box-shadow: var(--sh-sm);
|
|
}
|
|
|
|
.page__count strong {
|
|
font-size: 1.6rem;
|
|
font-weight: 500;
|
|
line-height: 1.1;
|
|
color: var(--zk-blue);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.page__count span {
|
|
font-size: 0.6rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--zk-grey);
|
|
}
|
|
|
|
.empty {
|
|
margin: 0;
|
|
color: var(--zk-muted);
|
|
font-size: 0.88rem;
|
|
text-align: center;
|
|
padding: 44px 24px;
|
|
border-radius: var(--r-lg);
|
|
border: 1px dashed var(--zk-line);
|
|
background: linear-gradient(180deg, var(--zk-white) 0%, var(--zk-tint) 100%);
|
|
}
|
|
|
|
.notice {
|
|
background: var(--zk-white);
|
|
border: 1px solid var(--zk-line);
|
|
border-left: 3px solid var(--zk-blue);
|
|
border-radius: var(--r-xs) var(--r-lg) var(--r-lg) var(--r-xs);
|
|
box-shadow: var(--sh-sm);
|
|
padding: 18px 22px;
|
|
max-width: 64ch;
|
|
}
|
|
|
|
.notice strong {
|
|
display: block;
|
|
font-weight: 500;
|
|
margin-bottom: 7px;
|
|
}
|
|
|
|
.notice p {
|
|
margin: 0 0 6px;
|
|
font-size: 0.86rem;
|
|
color: var(--zk-muted);
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.notice__detail {
|
|
font-size: 0.76rem !important;
|
|
color: var(--zk-grey) !important;
|
|
}
|
|
|
|
.notice code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8em;
|
|
background: var(--zk-tint);
|
|
border: 1px solid var(--zk-line-soft);
|
|
border-radius: var(--r-xs);
|
|
padding: 1px 5px;
|
|
}
|
|
|
|
/* ---- queue table ---- */
|
|
.gridwrap {
|
|
background: var(--zk-white);
|
|
border: 1px solid var(--zk-line);
|
|
border-radius: var(--r-lg);
|
|
box-shadow: var(--sh-sm);
|
|
overflow: hidden;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.grid {
|
|
width: 100%;
|
|
/* Eight columns of operational data do not compress: below this the card
|
|
scrolls sideways rather than squeezing every cell into two words a line. */
|
|
min-width: 1000px;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
font-size: 0.86rem;
|
|
}
|
|
|
|
.grid th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
text-align: left;
|
|
font-size: 0.65rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--zk-muted);
|
|
padding: 12px 16px;
|
|
background: var(--zk-tint);
|
|
border-bottom: 1px solid var(--zk-line);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.grid td {
|
|
padding: 13px 16px;
|
|
border-bottom: 1px solid var(--zk-line-soft);
|
|
vertical-align: top;
|
|
}
|
|
|
|
.grid tbody tr {
|
|
transition: background var(--t-fast);
|
|
}
|
|
|
|
.grid tbody tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.grid tbody tr:hover {
|
|
background: var(--zk-tint);
|
|
}
|
|
|
|
/* An accent that arrives on hover, drawn inside the cell so it never disturbs
|
|
the table's own borders. */
|
|
.grid tbody tr:hover td:first-child {
|
|
box-shadow: inset 3px 0 0 var(--zk-blue);
|
|
}
|
|
|
|
.grid .num {
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* The lead reference is the thing an operator quotes on a call. */
|
|
.grid__ref {
|
|
font-variant-numeric: tabular-nums;
|
|
white-space: nowrap;
|
|
color: var(--zk-muted);
|
|
}
|
|
|
|
.grid__sub {
|
|
font-size: 0.76rem;
|
|
color: var(--zk-muted);
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.grid__link {
|
|
color: var(--zk-blue);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
border-bottom: 1px solid transparent;
|
|
transition: border-color var(--t-fast);
|
|
}
|
|
|
|
.grid__link:hover {
|
|
border-bottom-color: currentColor;
|
|
}
|
|
|
|
/* ---- loading skeleton ---- */
|
|
.skel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
padding: 14px 0;
|
|
background: var(--zk-white);
|
|
border: 1px solid var(--zk-line);
|
|
border-radius: var(--r-lg);
|
|
box-shadow: var(--sh-sm);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.skel__row {
|
|
height: 18px;
|
|
margin: 9px 16px;
|
|
border-radius: var(--r-sm);
|
|
background: linear-gradient(90deg, var(--zk-line-soft) 0%, var(--zk-tint) 40%, var(--zk-line-soft) 80%);
|
|
background-size: 420px 100%;
|
|
animation: zk-shimmer 1.25s linear infinite;
|
|
}
|
|
|
|
.skel__row:nth-child(odd) { width: calc(100% - 32px); }
|
|
.skel__row:nth-child(3n) { width: 72%; }
|
|
.skel__row:nth-child(3n + 2) { width: 88%; }
|
|
|
|
/* ---- chips ---- */
|
|
.chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-size: 0.72rem;
|
|
font-weight: 500;
|
|
padding: 3px 10px;
|
|
border-radius: var(--r-pill);
|
|
background: var(--zk-tint-blue);
|
|
color: var(--zk-blue-dark);
|
|
border: 1px solid var(--zk-blue-light);
|
|
}
|
|
|
|
.chip--warn {
|
|
background: var(--zk-amber-tint);
|
|
color: var(--zk-amber-ink);
|
|
border-color: var(--zk-amber-line);
|
|
}
|
|
|
|
/* ---- doors ---- */
|
|
.doors {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
|
|
gap: 18px;
|
|
}
|
|
|
|
.door {
|
|
position: relative;
|
|
font: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
background: var(--zk-white);
|
|
border: 1px solid var(--zk-line);
|
|
border-radius: var(--r-lg);
|
|
box-shadow: var(--sh-sm);
|
|
padding: 22px 22px 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
overflow: hidden;
|
|
transition: box-shadow var(--t), transform var(--t-fast), border-color var(--t-fast);
|
|
}
|
|
|
|
/* The accent bar is the door's handle: 3px at rest, the full brand gradient
|
|
once the pointer is on it. */
|
|
.door::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0 0 auto;
|
|
height: 3px;
|
|
background: var(--grad-blue);
|
|
transform-origin: left;
|
|
transition: height var(--t);
|
|
}
|
|
|
|
.door:hover {
|
|
border-color: var(--zk-blue-light);
|
|
box-shadow: var(--sh-md);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.door:hover::before {
|
|
height: 5px;
|
|
}
|
|
|
|
.door:focus-visible {
|
|
border-color: var(--zk-blue);
|
|
box-shadow: var(--ring);
|
|
}
|
|
|
|
.door strong {
|
|
font-size: 1.02rem;
|
|
font-weight: 500;
|
|
letter-spacing: -0.01em;
|
|
color: var(--zk-ink);
|
|
}
|
|
|
|
.door p {
|
|
margin: 0;
|
|
font-size: 0.82rem;
|
|
color: var(--zk-muted);
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.door .chip {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
/* ---- panel ---- */
|
|
.panel {
|
|
background: var(--zk-white);
|
|
border: 1px solid var(--zk-line);
|
|
border-radius: var(--r-lg);
|
|
box-shadow: var(--sh-sm);
|
|
padding: 24px 26px;
|
|
margin-bottom: 22px;
|
|
}
|
|
|
|
.panel__head {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.panel__title {
|
|
margin: 0;
|
|
font-size: 1.06rem;
|
|
font-weight: 500;
|
|
letter-spacing: -0.012em;
|
|
}
|
|
|
|
.panel__sub {
|
|
margin: 5px 0 0;
|
|
font-size: 0.82rem;
|
|
color: var(--zk-muted);
|
|
max-width: 62ch;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
/* ---- actions ---- */
|
|
.acts {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
|
|
.act {
|
|
font: inherit;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
background: var(--zk-white);
|
|
border: 1px solid var(--zk-line);
|
|
border-radius: var(--r-md);
|
|
padding: 11px 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
min-width: 196px;
|
|
transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
|
|
}
|
|
|
|
.act:hover {
|
|
border-color: var(--zk-blue-light);
|
|
background: var(--zk-tint);
|
|
box-shadow: var(--sh-sm);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.act.is-open {
|
|
border-color: var(--zk-blue);
|
|
background: var(--zk-tint-blue);
|
|
box-shadow: var(--ring);
|
|
transform: none;
|
|
}
|
|
|
|
.act strong {
|
|
font-size: 0.885rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.act__by {
|
|
font-size: 0.72rem;
|
|
color: var(--zk-muted);
|
|
}
|
|
|
|
.acts__form {
|
|
margin-top: 22px;
|
|
padding-top: 22px;
|
|
border-top: 1px solid var(--zk-line-soft);
|
|
animation: zk-rise 0.24s var(--ease) both;
|
|
}
|
|
|
|
/* ---- what the machine is doing ----
|
|
Shown where an empty action bar used to be. Most stages are carried by an AI
|
|
employee that takes a minute or two, and a screen that says nothing for two
|
|
minutes reads as broken. */
|
|
.doing {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 14px;
|
|
margin-bottom: 22px;
|
|
padding: 16px 20px;
|
|
border-radius: var(--r-lg);
|
|
border: 1px solid var(--zk-blue-light);
|
|
background: var(--zk-tint-blue);
|
|
}
|
|
|
|
.doing div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.doing strong {
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
color: var(--zk-blue-dark);
|
|
}
|
|
|
|
.doing span {
|
|
font-size: 0.82rem;
|
|
line-height: 1.5;
|
|
color: var(--zk-muted);
|
|
}
|
|
|
|
.doing__pulse {
|
|
flex: none;
|
|
margin-top: 5px;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: var(--zk-blue);
|
|
box-shadow: 0 0 0 0 rgba(33, 103, 174, 0.5);
|
|
animation: zk-pulse 1.9s var(--ease) infinite;
|
|
}
|
|
|
|
@keyframes zk-pulse {
|
|
70% { box-shadow: 0 0 0 9px rgba(33, 103, 174, 0); }
|
|
100% { box-shadow: 0 0 0 0 rgba(33, 103, 174, 0); }
|
|
}
|
|
|
|
/* ---- and when it has stopped ----
|
|
Same strip, amber, and NOT pulsing: the animation is what says "something is
|
|
happening", so it is the first thing that has to go when nothing is. The
|
|
agents refuse rather than invent — the rating engine will not price without
|
|
an IDV — and that refusal used to be visible only as a lead that never moved
|
|
again. */
|
|
.doing--blocked {
|
|
border-color: var(--zk-amber-line);
|
|
background: var(--zk-amber-tint);
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.doing--blocked strong { color: var(--zk-amber-ink); }
|
|
|
|
.doing__stop {
|
|
flex: none;
|
|
margin-top: 5px;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 2px;
|
|
background: var(--zk-amber);
|
|
}
|
|
|
|
.doing__fix {
|
|
align-self: flex-start;
|
|
margin-top: 9px;
|
|
font: inherit;
|
|
font-size: 0.82rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
padding: 7px 15px;
|
|
border-radius: var(--r-pill);
|
|
color: var(--zk-amber-ink);
|
|
background: var(--zk-white);
|
|
border: 1px solid var(--zk-amber-line);
|
|
transition: background var(--t-fast), border-color var(--t-fast);
|
|
}
|
|
.doing__fix:hover { background: #fff8f1; border-color: var(--zk-amber); }
|
|
.doing__fix:focus-visible { outline: 2px solid var(--zk-amber); outline-offset: 1px; }
|
|
|
|
/* ---- what the workflow said ----
|
|
The message the API returns per activity, shown verbatim: it is the workflow
|
|
telling the operator what it just set in motion. */
|
|
.said {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 14px;
|
|
margin-bottom: 22px;
|
|
padding: 14px 16px 14px 20px;
|
|
border-radius: var(--r-lg);
|
|
border: 1px solid var(--zk-line);
|
|
border-left: 3px solid var(--zk-blue);
|
|
background: var(--zk-white);
|
|
box-shadow: var(--sh-sm);
|
|
animation: zk-rise 0.24s var(--ease) both;
|
|
}
|
|
|
|
.said p {
|
|
flex: 1;
|
|
margin: 0;
|
|
font-size: 0.88rem;
|
|
line-height: 1.5;
|
|
color: var(--zk-ink);
|
|
}
|
|
|
|
.said button {
|
|
flex: none;
|
|
font: inherit;
|
|
font-size: 1.1rem;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
padding: 2px 6px;
|
|
border: 0;
|
|
border-radius: var(--r-sm);
|
|
background: none;
|
|
color: var(--zk-grey);
|
|
transition: background var(--t-fast), color var(--t-fast);
|
|
}
|
|
|
|
.said button:hover {
|
|
background: var(--zk-tint);
|
|
color: var(--zk-ink);
|
|
}
|
|
|
|
/* The stage a queue named by need actually maps to. */
|
|
.page__stage {
|
|
display: block;
|
|
margin-top: 4px;
|
|
font-size: 0.72rem;
|
|
color: var(--zk-grey);
|
|
}
|
|
|
|
/* ---- back ----
|
|
An icon, not a sentence: the way out of a record is a known shape and does not
|
|
need naming twice on the page. It carries a title and an aria-label, so the
|
|
name is still there for a pointer that hovers and for a screen reader. */
|
|
.backbtn {
|
|
flex: none;
|
|
margin-top: 4px;
|
|
width: 34px;
|
|
height: 34px;
|
|
display: grid;
|
|
place-items: center;
|
|
cursor: pointer;
|
|
border-radius: var(--r-md);
|
|
border: 1px solid var(--zk-line);
|
|
background: var(--zk-white);
|
|
color: var(--zk-muted);
|
|
box-shadow: var(--sh-xs);
|
|
transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
|
|
}
|
|
|
|
.backbtn svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
transition: transform var(--t-fast);
|
|
}
|
|
|
|
.backbtn:hover {
|
|
border-color: var(--zk-blue-light);
|
|
background: var(--zk-tint-blue);
|
|
color: var(--zk-blue-dark);
|
|
box-shadow: var(--sh-sm);
|
|
}
|
|
|
|
.backbtn:hover svg {
|
|
transform: translateX(-2px);
|
|
}
|
|
|
|
.backbtn:focus-visible {
|
|
outline: none;
|
|
border-color: var(--zk-blue);
|
|
box-shadow: var(--ring);
|
|
}
|
|
|
|
.page__lead {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 14px;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* ---- lead: the file beside the story ---- */
|
|
.lead {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 384px;
|
|
gap: 20px;
|
|
align-items: start;
|
|
}
|
|
|
|
.lead__main {
|
|
min-width: 0;
|
|
}
|
|
|
|
/* The trail stays in view while the file is read against it. */
|
|
.lead__side {
|
|
position: sticky;
|
|
top: 90px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.panel--rail {
|
|
padding: 0;
|
|
margin-bottom: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.panel--rail .panel__head {
|
|
padding: 20px 22px 0;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.lead__feed {
|
|
max-height: calc(100vh - 210px);
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
padding: 0 22px 20px;
|
|
}
|
|
|
|
/* One column below the width where a 384px rail stops paying for itself. */
|
|
@media (max-width: 1180px) {
|
|
.lead {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.lead__side {
|
|
position: static;
|
|
}
|
|
|
|
.lead__feed {
|
|
max-height: 560px;
|
|
}
|
|
}
|
|
|
|
/* ---- tabs ----
|
|
Underline rather than pills: these swap the whole panel below them, which is
|
|
what a tab is for; a pill segment reads as a filter on shared content. The
|
|
2px rule lives on the button, so a strip that wraps to two rows still marks
|
|
the active one correctly. */
|
|
.tabs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 2px;
|
|
margin-bottom: 20px;
|
|
border-bottom: 1px solid var(--zk-line);
|
|
}
|
|
|
|
.tab {
|
|
font: inherit;
|
|
font-size: 0.82rem;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 9px 13px;
|
|
background: none;
|
|
border: 0;
|
|
border-bottom: 2px solid transparent;
|
|
border-radius: var(--r-sm) var(--r-sm) 0 0;
|
|
color: var(--zk-muted);
|
|
transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
|
|
}
|
|
|
|
.tab:hover {
|
|
background: var(--zk-tint);
|
|
color: var(--zk-ink);
|
|
}
|
|
|
|
.tab.is-on {
|
|
color: var(--zk-blue-dark);
|
|
font-weight: 500;
|
|
border-bottom-color: var(--zk-blue);
|
|
}
|
|
|
|
.tab__n {
|
|
font-size: 0.66rem;
|
|
font-variant-numeric: tabular-nums;
|
|
min-width: 18px;
|
|
padding: 1px 6px;
|
|
border-radius: var(--r-pill);
|
|
background: var(--zk-line-soft);
|
|
color: var(--zk-muted);
|
|
text-align: center;
|
|
}
|
|
|
|
.tab.is-on .tab__n {
|
|
background: var(--zk-tint-blue);
|
|
color: var(--zk-blue);
|
|
}
|
|
|
|
/* ---- property rows ----
|
|
Facts read as label/value pairs on hairlines rather than as a wall of filled
|
|
boxes: the tint was carrying no information and made every field shout as
|
|
loudly as every other. */
|
|
.props {
|
|
margin: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
|
|
gap: 0 36px;
|
|
}
|
|
|
|
.prop {
|
|
display: grid;
|
|
grid-template-columns: minmax(96px, 33%) minmax(0, 1fr);
|
|
gap: 16px;
|
|
align-items: baseline;
|
|
padding: 11px 10px;
|
|
margin: 0 -10px;
|
|
border-radius: var(--r-md);
|
|
border-bottom: 1px solid var(--zk-line-soft);
|
|
transition: background var(--t-fast);
|
|
}
|
|
|
|
.prop:hover {
|
|
background: var(--zk-tint);
|
|
}
|
|
|
|
.prop dt {
|
|
font-size: 0.78rem;
|
|
color: var(--zk-muted);
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.prop dd {
|
|
margin: 0;
|
|
font-size: 0.875rem;
|
|
color: var(--zk-ink);
|
|
line-height: 1.45;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.prop__num {
|
|
font-variant-numeric: tabular-nums;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Prose is not a property. It takes the full width, is labelled above rather
|
|
than beside, and is folded by ClampText. */
|
|
.prop--note {
|
|
grid-column: 1 / -1;
|
|
display: block;
|
|
margin: 10px -10px;
|
|
padding: 14px 16px;
|
|
border-bottom: 0;
|
|
border: 1px solid var(--zk-line-soft);
|
|
border-left: 3px solid var(--zk-blue-light);
|
|
border-radius: 0 var(--r-md) var(--r-md) 0;
|
|
background: var(--zk-tint);
|
|
}
|
|
|
|
.prop--note:hover {
|
|
background: var(--zk-tint);
|
|
border-color: var(--zk-blue-light);
|
|
}
|
|
|
|
.prop--note dt {
|
|
margin-bottom: 7px;
|
|
font-size: 0.66rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.09em;
|
|
text-transform: uppercase;
|
|
color: var(--zk-blue-dark);
|
|
}
|
|
|
|
.prop--note dd {
|
|
margin: 0;
|
|
}
|
|
|
|
/* ---- lead file ---- */
|
|
.lead__stage {
|
|
flex: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: 5px;
|
|
text-align: right;
|
|
}
|
|
|
|
.lead__stagelabel {
|
|
display: block;
|
|
font-size: 0.6rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--zk-grey);
|
|
}
|
|
|
|
.lead__closed {
|
|
font-size: 0.7rem;
|
|
color: var(--zk-grey);
|
|
}
|
|
|
|
.lead__stage strong {
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
color: var(--zk-blue-dark);
|
|
padding: 6px 14px;
|
|
border-radius: var(--r-pill);
|
|
background: var(--zk-tint-blue);
|
|
border: 1px solid var(--zk-blue-light);
|
|
}
|
|
|
|
/* A closed lead is not a live stage; it should not wear the live stage's blue. */
|
|
.lead__stage strong.is-closed {
|
|
color: var(--zk-muted);
|
|
background: var(--zk-tint);
|
|
border-color: var(--zk-line);
|
|
}
|
|
|
|
/* ---- renewal countdown ---- */
|
|
.due {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
padding: 3px 10px;
|
|
border-radius: var(--r-pill);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.due--lapsed {
|
|
background: var(--zk-danger-tint);
|
|
color: var(--zk-danger-ink);
|
|
border: 1px solid var(--zk-danger-line);
|
|
}
|
|
|
|
.due--urgent {
|
|
background: var(--zk-amber-tint);
|
|
color: var(--zk-amber-ink);
|
|
border: 1px solid var(--zk-amber-line);
|
|
}
|
|
|
|
.due--soon {
|
|
background: var(--zk-tint-blue);
|
|
color: var(--zk-blue-dark);
|
|
border: 1px solid var(--zk-blue-light);
|
|
}
|
|
|
|
.due--later {
|
|
background: var(--zk-tint);
|
|
color: var(--zk-muted);
|
|
border: 1px solid var(--zk-line);
|
|
}
|
|
|
|
/* ---- lead header meta ---- */
|
|
.lead__meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
margin: 0 0 22px;
|
|
}
|
|
|
|
.lead__meta div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
padding: 9px 16px;
|
|
border-radius: var(--r-md);
|
|
background: var(--zk-white);
|
|
border: 1px solid var(--zk-line);
|
|
box-shadow: var(--sh-xs);
|
|
}
|
|
|
|
.lead__meta dt {
|
|
font-size: 0.6rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--zk-grey);
|
|
}
|
|
|
|
.lead__meta dd {
|
|
margin: 0;
|
|
font-size: 0.85rem;
|
|
color: var(--zk-ink);
|
|
}
|
|
|
|
.lead__meta--money {
|
|
border-color: var(--zk-blue-light) !important;
|
|
background: var(--zk-tint-blue) !important;
|
|
}
|
|
|
|
.lead__meta--money dd {
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
color: var(--zk-blue-dark);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* ── Portfolio overview ──────────────────────────────────────────────────
|
|
An operations dashboard: numbers first, prose nowhere. Every measure on
|
|
this page is derived from the lead list in the browser, so nothing here is
|
|
a figure the reader cannot get back to by opening a queue. */
|
|
|
|
.stamp {
|
|
flex: none;
|
|
align-self: center;
|
|
font-size: 11.5px;
|
|
letter-spacing: .04em;
|
|
text-transform: uppercase;
|
|
color: var(--zk-grey);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* KPI strip. Tabular figures so the row does not jitter as it refreshes. */
|
|
.kpis {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
|
|
gap: 1px;
|
|
background: var(--zk-line);
|
|
border: 1px solid var(--zk-line);
|
|
border-radius: var(--r-md);
|
|
overflow: hidden;
|
|
margin-bottom: 26px;
|
|
}
|
|
.kpi { background: var(--zk-white); padding: 16px 18px 14px; }
|
|
.kpi__l {
|
|
display: block;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
letter-spacing: .07em;
|
|
text-transform: uppercase;
|
|
color: var(--zk-grey);
|
|
}
|
|
.kpi__v {
|
|
display: block;
|
|
margin: 7px 0 3px;
|
|
font-size: 26px;
|
|
font-weight: 400;
|
|
line-height: 1.05;
|
|
color: var(--zk-navy);
|
|
font-variant-numeric: tabular-nums;
|
|
letter-spacing: -.02em;
|
|
}
|
|
.kpi__s { display: block; font-size: 12px; color: var(--zk-muted); }
|
|
|
|
/* Two columns on a desk, one on anything narrower. The distribution is the
|
|
half that survives being pushed below the fold. */
|
|
.split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 30px; align-items: start; }
|
|
|
|
.sec {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
margin: 0 0 12px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
letter-spacing: .07em;
|
|
text-transform: uppercase;
|
|
color: var(--zk-muted);
|
|
}
|
|
.split > div > .sec:not(:first-child) { margin-top: 30px; }
|
|
.sec__hint { font-size: 11.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--zk-grey); }
|
|
|
|
/* Work queues. A row rather than a card: five of them as cards is a wall. */
|
|
.qlist { display: flex; flex-direction: column; gap: 6px; }
|
|
.q {
|
|
display: grid;
|
|
grid-template-columns: 44px 1fr auto auto;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 11px 14px;
|
|
border: 1px solid var(--zk-line-soft);
|
|
border-radius: var(--r-sm);
|
|
background: var(--zk-white);
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: border-color .12s, background .12s;
|
|
}
|
|
.q:hover { border-color: var(--zk-blue-light); background: var(--zk-tint); }
|
|
.q__n { font-size: 20px; font-weight: 500; color: var(--zk-grey); font-variant-numeric: tabular-nums; text-align: right; }
|
|
.q__t { font-size: 14px; color: var(--zk-ink); }
|
|
.q__t em { display: block; font-style: normal; font-size: 12px; color: var(--zk-muted); margin-top: 1px; }
|
|
.q__age { font-size: 12px; color: var(--zk-grey); font-variant-numeric: tabular-nums; }
|
|
.q__ro {
|
|
font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
|
|
color: var(--zk-grey); border: 1px solid var(--zk-line); border-radius: 3px; padding: 1px 5px;
|
|
}
|
|
/* Only a queue with work in it earns weight. The eye should land on the
|
|
number that needs clearing, not read five identical rows. */
|
|
.q.is-live { border-color: var(--zk-line); }
|
|
.q.is-live .q__n { color: var(--zk-navy); }
|
|
|
|
.buckets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
|
|
.bucket {
|
|
padding: 13px 15px;
|
|
border: 1px solid var(--zk-line);
|
|
border-left-width: 3px;
|
|
border-radius: var(--r-sm);
|
|
background: var(--zk-white);
|
|
}
|
|
.bucket strong { display: block; font-size: 21px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
|
|
.bucket span { display: block; margin-top: 2px; font-size: 12px; color: var(--zk-muted); }
|
|
.bucket--lapsed { border-left-color: var(--zk-danger); }
|
|
.bucket--lapsed strong { color: var(--zk-danger-ink); }
|
|
.bucket--urgent { border-left-color: var(--zk-amber); }
|
|
.bucket--urgent strong { color: var(--zk-amber-ink); }
|
|
.bucket--soon { border-left-color: var(--zk-blue-mid); }
|
|
.bucket--soon strong { color: var(--zk-blue-dark); }
|
|
|
|
/* Stage distribution. A bar per stage, scaled to the largest — enough to see
|
|
where the book is banked without pulling in a charting library. */
|
|
.dist { display: flex; flex-direction: column; gap: 3px; }
|
|
.dist__r {
|
|
display: grid;
|
|
grid-template-columns: 1fr 74px 26px;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 5px 8px;
|
|
border-radius: var(--r-xs);
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
.dist__r:hover { background: var(--zk-tint); }
|
|
.dist__l { font-size: 12.5px; color: var(--zk-ink); }
|
|
.dist__bar { height: 6px; border-radius: 3px; background: var(--zk-line-soft); overflow: hidden; }
|
|
.dist__f { display: block; height: 100%; border-radius: 3px; background: var(--zk-blue-mid); min-width: 0; }
|
|
.dist__f--needs { background: var(--zk-amber); }
|
|
.dist__f--customer { background: var(--zk-blue); }
|
|
.dist__f--auto { background: var(--zk-blue-light); }
|
|
.dist__f--waiting { background: var(--zk-grey); }
|
|
.dist__f--end { background: var(--zk-line); }
|
|
.dist__n { font-size: 12.5px; text-align: right; color: var(--zk-muted); font-variant-numeric: tabular-nums; }
|
|
.dist__r.is-zero .dist__l, .dist__r.is-zero .dist__n { color: var(--zk-grey); }
|
|
|
|
.grid--tight th, .grid--tight td { padding-top: 8px; padding-bottom: 8px; }
|
|
|
|
@media (max-width: 1080px) {
|
|
.split { grid-template-columns: 1fr; gap: 26px; }
|
|
}
|
|
@media (max-width: 640px) {
|
|
.buckets { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* ── Lead measures ───────────────────────────────────────────────────────
|
|
The same strip as the portfolio KPIs, at lead scale. Age and dwell time are
|
|
computed rather than stored, and they are the two figures that answer "is
|
|
this moving?" — a question the record itself cannot answer. */
|
|
.lmetrics {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 1px;
|
|
background: var(--zk-line);
|
|
border: 1px solid var(--zk-line);
|
|
border-radius: var(--r-md);
|
|
overflow: hidden;
|
|
margin-bottom: 22px;
|
|
}
|
|
.lm { background: var(--zk-white); padding: 13px 15px 12px; }
|
|
.lm__l {
|
|
display: block;
|
|
font-size: 10.5px; font-weight: 500; letter-spacing: .07em;
|
|
text-transform: uppercase; color: var(--zk-grey);
|
|
}
|
|
.lm__v {
|
|
display: block; margin: 6px 0 2px;
|
|
font-size: 19px; font-weight: 400; line-height: 1.1;
|
|
color: var(--zk-navy); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
|
|
}
|
|
.lm__v--sm { font-size: 16px; }
|
|
.lm__s {
|
|
display: block; font-size: 11.5px; color: var(--zk-muted);
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
/* The countdown carries its own tone here, the same one the queues use, so a
|
|
lapsed renewal reads the same wherever it appears. */
|
|
.lm__v.due--lapsed { color: var(--zk-danger-ink); }
|
|
.lm__v.due--urgent { color: var(--zk-amber-ink); }
|
|
|
|
/* ── Next step ───────────────────────────────────────────────────────────
|
|
One decision, sized like one. The stage's own step is the only thing at
|
|
full weight; loops sit under it, and an AI's own work is folded away
|
|
entirely — it is recovery, not an outstanding task. */
|
|
|
|
.step { display: flex; flex-wrap: wrap; gap: 10px; }
|
|
.step__btn {
|
|
flex: 1 1 220px;
|
|
display: block;
|
|
padding: 14px 18px;
|
|
border: 1px solid var(--zk-blue);
|
|
border-radius: var(--r-md);
|
|
background: var(--zk-blue);
|
|
color: var(--zk-white);
|
|
text-align: left;
|
|
cursor: pointer;
|
|
transition: background .12s, border-color .12s, box-shadow .12s;
|
|
}
|
|
.step__btn:hover { background: var(--zk-blue-dark); border-color: var(--zk-blue-dark); box-shadow: 0 2px 10px rgba(33,103,174,.25); }
|
|
.step__btn strong { display: block; font-size: 15px; font-weight: 500; }
|
|
.step__btn span { display: block; margin-top: 2px; font-size: 12px; opacity: .85; }
|
|
.step__btn.is-open { background: var(--zk-blue-deep); border-color: var(--zk-blue-deep); }
|
|
|
|
/* Decline sits beside Clear as an equal — an underwriter is choosing between
|
|
two decisions, not deciding whether to act. It is outlined rather than
|
|
filled so the pair does not read as two identical recommendations. */
|
|
.step__btn--no {
|
|
background: var(--zk-white);
|
|
color: var(--zk-danger-ink);
|
|
border-color: var(--zk-danger-line);
|
|
}
|
|
.step__btn--no:hover { background: var(--zk-danger-tint); border-color: var(--zk-danger); box-shadow: none; }
|
|
.step__btn--no.is-open { background: var(--zk-danger-tint); border-color: var(--zk-danger); }
|
|
|
|
/* Loops. Real, bounded, and never the answer to "what now". */
|
|
.alt { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
|
|
.alt__btn {
|
|
padding: 8px 13px;
|
|
border: 1px solid var(--zk-line);
|
|
border-radius: var(--r-sm);
|
|
background: var(--zk-white);
|
|
color: var(--zk-ink);
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
transition: border-color .12s, background .12s;
|
|
}
|
|
.alt__btn:hover { border-color: var(--zk-blue-light); background: var(--zk-tint); }
|
|
.alt__btn.is-open { border-color: var(--zk-blue); background: var(--zk-tint-blue); }
|
|
.alt__btn em { font-style: normal; margin-left: 7px; font-size: 11.5px; color: var(--zk-grey); }
|
|
.alt__btn--exit { color: var(--zk-danger-ink); }
|
|
.alt__btn--exit:hover { border-color: var(--zk-danger-line); background: var(--zk-danger-tint); }
|
|
|
|
/* Recovery, folded. Needed on the day an agent stalls and never otherwise. */
|
|
.stuck { margin-top: 18px; border-top: 1px solid var(--zk-line-soft); padding-top: 14px; }
|
|
.stuck > summary {
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
color: var(--zk-muted);
|
|
list-style: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.stuck > summary::-webkit-details-marker { display: none; }
|
|
.stuck > summary::before { content: '▸'; font-size: 10px; color: var(--zk-grey); }
|
|
.stuck[open] > summary::before { content: '▾'; }
|
|
.stuck > summary:hover { color: var(--zk-blue-dark); }
|
|
.stuck__why { margin: 10px 0 0; font-size: 12.5px; color: var(--zk-muted); max-width: 64ch; }
|
|
|
|
/* ── The row IS the control ───────────────────────────────────────────────
|
|
An "Open" button was a ~90px target inside a 1000px row that already reads
|
|
as one object, and it put a second tab stop on every line. The row carries
|
|
the click, the keyboard and the affordance; the button is gone.
|
|
|
|
role="link" + tabIndex on a <tr> rather than wrapping cells in <a>: an
|
|
anchor cannot span table cells without breaking the table layout, and
|
|
display:block on a <td> collapses the column alignment the queue depends on. */
|
|
.grid__row { cursor: pointer; transition: background .11s, box-shadow .11s; }
|
|
.grid__row:hover { background: var(--zk-tint); }
|
|
.grid__row:hover .grid__name { color: var(--zk-blue-dark); }
|
|
.grid__row:focus-visible {
|
|
outline: 2px solid var(--zk-blue);
|
|
outline-offset: -2px;
|
|
background: var(--zk-tint);
|
|
}
|
|
.grid__name { font-weight: 500; color: var(--zk-ink); }
|
|
|
|
/* A left edge that says who holds the lead, readable before any text is.
|
|
Only the states worth acting on are marked — colouring every row would
|
|
make the marking mean nothing. */
|
|
.grid__row.is-stalled td:first-child { box-shadow: inset 3px 0 0 var(--zk-danger); }
|
|
.grid__row.is-working td:first-child { box-shadow: inset 3px 0 0 var(--zk-blue-mid); }
|
|
|
|
/* ── What the agent is doing ──────────────────────────────────────────────
|
|
Agent-status disclosure: an automated stage is either moving or stuck, and
|
|
after an hour those look identical without this. `working` pulses because
|
|
something is happening right now; `waiting` is steady because it is normal;
|
|
`stalled` is red because a lead three hours into a two-minute step is the
|
|
thing this console exists to catch. */
|
|
.run { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; line-height: 1.3; }
|
|
.run__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
|
|
|
|
.run--working { color: var(--zk-blue-dark); }
|
|
.run--working .run__dot { background: var(--zk-blue); animation: runPulse 1.6s ease-in-out infinite; }
|
|
|
|
.run--waiting { color: var(--zk-muted); }
|
|
.run--waiting .run__dot { background: var(--zk-blue-light); }
|
|
|
|
.run--stalled { color: var(--zk-danger-ink); font-weight: 500; }
|
|
.run--stalled .run__dot { background: var(--zk-danger); }
|
|
|
|
@keyframes runPulse {
|
|
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(33,103,174,.45); }
|
|
50% { opacity: .55; box-shadow: 0 0 0 5px rgba(33,103,174,0); }
|
|
}
|
|
/* Respect a reader who has asked the interface to stop moving. */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.run--working .run__dot { animation: none; }
|
|
}
|
|
|
|
/* ── An attached document is a thing to open ──────────────────────────────
|
|
The record printed a filename as text, so the only way to see what an
|
|
agent had actually uploaded was to perform the activity again. */
|
|
.prop__files { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
|
|
.prop__file {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
max-width: 100%;
|
|
font-size: 0.8rem;
|
|
text-decoration: none;
|
|
padding: 3px 10px;
|
|
border-radius: var(--r-pill, 999px);
|
|
background: var(--zk-tint-blue);
|
|
border: 1px solid transparent;
|
|
color: var(--zk-blue-dark);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.prop__file:hover { border-color: var(--zk-blue-light); }
|
|
.prop__file:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: 1px; }
|
|
|
|
/* The part of a queue that is not anyone's task. Reported rather than hidden:
|
|
the leads are in that state, they are just being carried by an agent, and an
|
|
operator who counts the queue by hand should find the same total. */
|
|
.q__auto {
|
|
display: block;
|
|
font-weight: 400;
|
|
font-size: 0.72rem;
|
|
color: var(--zk-muted);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* ---- waiting on someone outside the business ----
|
|
Neither an agent working nor a task of yours. Grey rather than blue, and
|
|
no pulse: nothing is happening, and that is the correct state. */
|
|
.doing--waiting {
|
|
border-color: var(--zk-line);
|
|
background: var(--zk-tint);
|
|
}
|
|
.doing--waiting strong { color: var(--zk-ink); }
|
|
|
|
.doing__wait {
|
|
flex: none;
|
|
margin-top: 5px;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
border: 2px solid var(--zk-grey);
|
|
background: transparent;
|
|
}
|
|
|
|
/* ---- panel action ----
|
|
A secondary control on a panel heading. Quiet: it opens a view, it does not
|
|
change anything. */
|
|
.panel__act {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
flex: none;
|
|
font: inherit;
|
|
font-size: 0.78rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
padding: 6px 12px;
|
|
border-radius: var(--r-pill);
|
|
color: var(--zk-blue-dark);
|
|
background: var(--zk-white);
|
|
border: 1px solid var(--zk-line);
|
|
transition: background var(--t-fast), border-color var(--t-fast);
|
|
}
|
|
.panel__act svg { width: 13px; height: 13px; opacity: .75; }
|
|
.panel__act b {
|
|
font-size: 0.68rem;
|
|
font-weight: 600;
|
|
font-variant-numeric: tabular-nums;
|
|
padding: 1px 6px;
|
|
border-radius: var(--r-pill);
|
|
background: var(--zk-tint-blue);
|
|
}
|
|
.panel__act:hover { background: var(--zk-tint); border-color: var(--zk-blue-light); }
|
|
.panel__act:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: 1px; }
|
|
|
|
/* ---- who worked this lead ----
|
|
Five agents carry a lead and their names appeared only inside individual
|
|
entries. The team is a fact about the lead, so it sits above the trail. */
|
|
.crew {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 18px 12px;
|
|
border-bottom: 1px solid var(--zk-line-soft);
|
|
}
|
|
.crew__l {
|
|
font-size: 0.64rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--zk-grey);
|
|
}
|
|
|
|
/* ---- a sign-off, not a task ----
|
|
Confirming a premium is the only step in this workflow that is a person's
|
|
approval rather than a piece of work, and the only one locked to one role.
|
|
It sat fourth in a list of six queues, which is the wrong weight for the
|
|
decision that starts somebody's cover. Shown only to the role that owns it. */
|
|
.appr {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 18px;
|
|
margin-bottom: 22px;
|
|
padding: 16px 22px;
|
|
border-radius: var(--r-lg);
|
|
text-decoration: none;
|
|
border: 1px solid var(--zk-line);
|
|
background: var(--zk-white);
|
|
transition: border-color var(--t-fast), box-shadow var(--t-fast);
|
|
}
|
|
|
|
/* Amber only when something is actually waiting. A permanent alert colour on
|
|
an empty queue teaches people to stop seeing it. */
|
|
.appr.is-live {
|
|
border-color: var(--zk-amber-line);
|
|
background: var(--zk-amber-tint);
|
|
}
|
|
.appr:hover { box-shadow: var(--sh-sm); border-color: var(--zk-blue-light); }
|
|
.appr:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: 2px; }
|
|
|
|
.appr__n {
|
|
flex: none;
|
|
min-width: 46px;
|
|
font-size: 1.9rem;
|
|
font-weight: 300;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em;
|
|
color: var(--zk-grey);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.appr.is-live .appr__n { color: var(--zk-amber-ink); }
|
|
|
|
.appr__t {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
min-width: 0;
|
|
flex: 1;
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
color: var(--zk-ink);
|
|
}
|
|
.appr__t em {
|
|
font-style: normal;
|
|
font-size: 0.78rem;
|
|
font-weight: 400;
|
|
line-height: 1.45;
|
|
color: var(--zk-muted);
|
|
}
|
|
|
|
.appr__go {
|
|
flex: none;
|
|
font-size: 0.76rem;
|
|
color: var(--zk-muted);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ---- an agent that has not come back ----
|
|
Amber like `blocked`, because both need a person — but worded and coloured
|
|
apart from it: blocked means the workflow refused for a stated reason and
|
|
the fix is known; stalled means nobody knows, and the honest offer is to try
|
|
again. No pulse either way. */
|
|
.doing--stalled {
|
|
border-color: var(--zk-amber-line);
|
|
background: var(--zk-amber-tint);
|
|
}
|
|
.doing--stalled strong { color: var(--zk-amber-ink); }
|