Yashas
e90e4204ec
Visual and information-architecture pass across every screen. No API call, payload, poll, permission rule or workflow mirror changes; forms still render from the live schema and the timeline's merge/grouping is unchanged (only the display order is reversible). Design language - Ground + white cards with one hairline and one radius; sentence-case headings; shared primitives in index.css (.card .pill .btn .avatar .live). - One inline icon set (components/Icon.jsx); no more filled navy/red tiles. - Read-side labels in api/display.js: roles and enum tokens humanized, customer initials/tones, money and date formatters. Nothing sent changes. Shell - 56px header with brand, global lead search (portfolio rows, "/" to focus) and identity chip with a human role label. - Sidebar rows carry icons and a clear active bar; AI roster at the foot, each opening its remit card. Login - Operator copy instead of retail copy; centred sign-in card with show/hide password; demo persona picker that fills the EMAIL only. Overview - "Who holds the work" as four quiet cards that warm only when owed. - Pipeline flow bar with every stage named beneath it; KPI strip in a card. - Action rows with chevron / view-only eye; expiry bands filter the table. Queues - Filter bar (search, product, channel, expiry band, stalled, hide closed) and sortable columns, all client-side on the fetched page. - Avatars, product/channel chips, stage chips for closed leads, tinted stalled rows, count inline with the title. Lead - Avatar + chips in the header; metrics card with the stage rail inside, and a branch node for Referred / Parked / Lost / Declined. - Timeline newest-first by default (toggle), the worker's face as the node, one footer row per entry, AI markdown rendered as bold. - "AI team on this lead" panel with per-agent step counts; PDF tags on docs. Forms & dialogs - Required marked with an asterisk + legend; "Select…" placeholder; dd Mon yyyy hint under date inputs; open activity form in a titled panel; one-line dialog footnotes. Fixes: horizontal overflow at 1024px, boxed "in N days" figure, raw tokens (sme_underwriter, verbal_call, Rsa), findings cut at "1.". Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
1083 lines
41 KiB
CSS
1083 lines
41 KiB
CSS
/* ═══════════════════════════════════════════════════════════════════════════
|
|
Screens — overview, queues, lead.
|
|
|
|
One language: the page sits on the ground colour, every bounded region is
|
|
a .card (index.css), headings are sentence-case at real sizes, labels are
|
|
quiet, and colour is spent on state — who holds a lead, how urgent a
|
|
renewal is — never on decoration.
|
|
═══════════════════════════════════════════════════════════════════════════ */
|
|
|
|
/* ── Page header ─────────────────────────────────────────────────────────── */
|
|
.page__head {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: var(--sp-6);
|
|
margin-bottom: var(--sp-5);
|
|
}
|
|
|
|
.page__title {
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: var(--fs-2xl);
|
|
font-weight: var(--fw-semi);
|
|
letter-spacing: -0.025em;
|
|
line-height: 1.15;
|
|
color: var(--zk-ink);
|
|
}
|
|
|
|
/* The count, inline with the title: "Document collection 9". */
|
|
.page__n {
|
|
font-size: var(--fs-md);
|
|
font-weight: var(--fw-semi);
|
|
letter-spacing: 0;
|
|
line-height: 1;
|
|
padding: 4px 10px;
|
|
border-radius: var(--r-pill);
|
|
color: var(--zk-blue-dark);
|
|
background: var(--zk-tint-blue);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.page__sub {
|
|
margin: 5px 0 0;
|
|
max-width: 72ch;
|
|
font-size: var(--fs-xs);
|
|
line-height: 1.5;
|
|
color: var(--zk-muted);
|
|
}
|
|
.page__stage { color: var(--zk-grey); }
|
|
|
|
.page__lead {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--sp-4);
|
|
min-width: 0;
|
|
}
|
|
.page__idblock { min-width: 0; }
|
|
.page__sub--chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
|
|
.page__ref { font-variant-numeric: tabular-nums; color: var(--zk-muted); }
|
|
.page__entity { color: var(--zk-muted); }
|
|
.page__entity::before { content: '·'; margin-right: 8px; color: var(--zk-grey); }
|
|
|
|
/* The queue's kind, as a tinted disc beside its title. */
|
|
.page__kind {
|
|
display: grid;
|
|
place-items: center;
|
|
flex: none;
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 12px;
|
|
color: var(--zk-blue-dark);
|
|
background: var(--zk-tint-blue);
|
|
}
|
|
.page__kind--needs { color: var(--zk-amber-ink); background: var(--zk-amber-tint); }
|
|
.page__kind--customer { color: var(--zk-teal-ink); background: var(--zk-teal-tint); }
|
|
.page__kind--waiting,
|
|
.page__kind--end,
|
|
.page__kind--all { color: var(--zk-muted); background: var(--zk-line-soft); }
|
|
|
|
.page__right { display: flex; align-items: center; gap: var(--sp-4); flex: none; margin-top: 4px; }
|
|
|
|
/* ── Back ────────────────────────────────────────────────────────────────── */
|
|
.backbtn {
|
|
flex: none;
|
|
width: 36px;
|
|
height: 36px;
|
|
display: grid;
|
|
place-items: center;
|
|
cursor: pointer;
|
|
border-radius: var(--r-sm);
|
|
border: 1px solid var(--zk-card-line);
|
|
background: var(--zk-card);
|
|
color: var(--zk-muted);
|
|
transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
|
|
}
|
|
.backbtn:hover { border-color: var(--zk-blue-light); background: var(--zk-tint-blue); color: var(--zk-blue-dark); }
|
|
.backbtn:focus-visible { outline: none; border-color: var(--zk-blue); box-shadow: var(--ring); }
|
|
|
|
/* ── Generic states ──────────────────────────────────────────────────────── */
|
|
.empty {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
margin: 0;
|
|
color: var(--zk-muted);
|
|
font-size: var(--fs-xs);
|
|
text-align: center;
|
|
padding: 44px 24px;
|
|
border-radius: var(--r-card);
|
|
border: 1px dashed var(--zk-line);
|
|
background: var(--zk-card);
|
|
}
|
|
.empty svg { color: var(--zk-grey); }
|
|
.empty--flush { border: 0; border-top: 1px dashed var(--zk-line); border-radius: 0; padding: 28px 0 8px; }
|
|
|
|
.notice {
|
|
background: var(--zk-card);
|
|
border: 1px solid var(--zk-card-line);
|
|
border-left: 3px solid var(--zk-blue);
|
|
border-radius: var(--r-xs) var(--r-card) var(--r-card) var(--r-xs);
|
|
box-shadow: var(--sh-card);
|
|
padding: 18px 22px;
|
|
max-width: 64ch;
|
|
}
|
|
.notice strong { display: block; font-weight: var(--fw-medium); 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; }
|
|
.notice code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8em;
|
|
background: var(--zk-hover);
|
|
border: 1px solid var(--zk-line-soft);
|
|
border-radius: var(--r-xs);
|
|
padding: 1px 5px;
|
|
}
|
|
|
|
/* Skeletons */
|
|
.skel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
padding: 14px 0;
|
|
background: var(--zk-card);
|
|
border: 1px solid var(--zk-card-line);
|
|
border-radius: var(--r-card);
|
|
overflow: hidden;
|
|
}
|
|
.skel__row,
|
|
.skel__line,
|
|
.skel__disc,
|
|
.skel--tiles > div {
|
|
border-radius: var(--r-sm);
|
|
background: linear-gradient(90deg, var(--zk-line-soft) 0%, var(--zk-ground) 40%, var(--zk-line-soft) 80%);
|
|
background-size: 420px 100%;
|
|
animation: zk-shimmer 1.25s linear infinite;
|
|
}
|
|
.skel__row { height: 18px; margin: 9px 16px; }
|
|
.skel__row:nth-child(odd) { width: calc(100% - 32px); }
|
|
.skel__row:nth-child(3n) { width: 72%; }
|
|
.skel__row:nth-child(3n + 2) { width: 88%; }
|
|
.skel--tiles {
|
|
flex-direction: row;
|
|
gap: 12px;
|
|
padding: 0;
|
|
margin-bottom: 14px;
|
|
background: transparent;
|
|
border: 0;
|
|
}
|
|
.skel--tiles > div { flex: 1; height: 118px; border-radius: var(--r-card); }
|
|
.skel__disc { width: 44px; height: 44px; border-radius: 50%; }
|
|
.skel__line { height: 12px; width: 140px; margin-top: 6px; }
|
|
.skel__line--title { height: 22px; width: 220px; margin-top: 0; }
|
|
|
|
/* ── Sections (cards with a heading) ─────────────────────────────────────── */
|
|
.sect { padding: var(--sp-5) var(--sp-6) var(--sp-6); margin-bottom: var(--sp-5); }
|
|
.sect--tight { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
|
|
.sect__head {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: var(--sp-4);
|
|
margin-bottom: var(--sp-4);
|
|
}
|
|
.sect--tight .sect__head { margin-bottom: var(--sp-3); }
|
|
.sect--tight .h-sec { font-size: var(--fs-md); }
|
|
.sect__tools { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
|
|
|
|
.btn__n {
|
|
font-size: 11px;
|
|
font-weight: var(--fw-semi);
|
|
font-variant-numeric: tabular-nums;
|
|
padding: 1px 6px;
|
|
border-radius: var(--r-pill);
|
|
background: var(--zk-green-tint);
|
|
color: var(--zk-green-ink);
|
|
}
|
|
|
|
/* Segmented control */
|
|
.seg {
|
|
display: inline-flex;
|
|
padding: 2px;
|
|
border-radius: var(--r-sm);
|
|
background: var(--zk-line-soft);
|
|
}
|
|
.seg__b {
|
|
font: inherit;
|
|
font-size: var(--fs-2xs);
|
|
font-weight: var(--fw-medium);
|
|
padding: 4px 10px;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--zk-muted);
|
|
cursor: pointer;
|
|
transition: background var(--t-fast), color var(--t-fast);
|
|
}
|
|
.seg__b:hover { color: var(--zk-ink); }
|
|
.seg__b.is-on { background: var(--zk-card); color: var(--zk-ink); box-shadow: var(--sh-xs); }
|
|
|
|
/* ── Tables ──────────────────────────────────────────────────────────────── */
|
|
.gridwrap {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
overflow-x: auto;
|
|
}
|
|
.gridwrap--flush { margin: 0 calc(var(--sp-6) * -1) calc(var(--sp-6) * -1); border-top: 1px solid var(--zk-line-soft); }
|
|
|
|
.grid {
|
|
width: 100%;
|
|
min-width: 720px;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
font-size: var(--fs-sm);
|
|
}
|
|
|
|
.grid th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
text-align: left;
|
|
font-size: var(--fs-2xs);
|
|
font-weight: var(--fw-medium);
|
|
color: var(--zk-muted);
|
|
padding: 10px 16px;
|
|
background: var(--zk-card);
|
|
border-bottom: 1px solid var(--zk-card-line);
|
|
white-space: nowrap;
|
|
}
|
|
.grid th.num { text-align: right; }
|
|
|
|
.grid__sort {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font: inherit;
|
|
font-size: inherit;
|
|
font-weight: inherit;
|
|
color: inherit;
|
|
padding: 0;
|
|
border: 0;
|
|
background: none;
|
|
cursor: pointer;
|
|
}
|
|
.grid__sort svg { opacity: 0; transition: opacity var(--t-fast); color: var(--zk-grey); }
|
|
.grid__sort:hover svg, .grid__sort.is-on svg { opacity: 1; }
|
|
.grid__sort.is-on { color: var(--zk-ink); }
|
|
.grid__sort.is-on svg { color: var(--zk-blue); }
|
|
|
|
.grid td {
|
|
padding: 11px 16px;
|
|
border-bottom: 1px solid var(--zk-line-soft);
|
|
vertical-align: middle;
|
|
}
|
|
.grid tbody tr:last-child td { border-bottom: none; }
|
|
.grid .num { text-align: right; font-variant-numeric: tabular-nums; }
|
|
|
|
.grid__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
|
|
.grid__id { min-width: 0; }
|
|
.grid__name { font-weight: var(--fw-medium); color: var(--zk-ink); }
|
|
.grid__sub {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 4px 8px;
|
|
font-size: var(--fs-2xs);
|
|
color: var(--zk-muted);
|
|
margin-top: 3px;
|
|
}
|
|
td > .grid__sub { display: block; }
|
|
.grid__ref { font-variant-numeric: tabular-nums; white-space: nowrap; }
|
|
.grid--tight th, .grid--tight td { padding-top: 8px; padding-bottom: 8px; }
|
|
.grid--tight { min-width: 0; }
|
|
|
|
/* The row IS the control. */
|
|
.grid__row { cursor: pointer; transition: background .11s; }
|
|
.grid__row:hover { background: var(--zk-hover); }
|
|
.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-hover); }
|
|
|
|
/* A left edge that says who holds the lead. Stalled rows are tinted too —
|
|
a lead three hours into a two-minute step is what this console is for. */
|
|
.grid__row.is-stalled td { background: rgba(211, 47, 47, 0.035); }
|
|
.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); }
|
|
.grid__row.is-stalled:hover td { background: rgba(211, 47, 47, 0.06); }
|
|
|
|
/* A finished lead, dimmed rather than removed. */
|
|
.grid__row.is-done { color: var(--zk-grey); }
|
|
.grid__row.is-done .grid__name { color: var(--zk-muted); font-weight: var(--fw-normal); }
|
|
.grid__row.is-done .avatar { opacity: .55; }
|
|
.grid__row.is-done:hover { color: var(--zk-ink); }
|
|
.grid__row.is-done:hover .grid__name { color: var(--zk-blue-dark); }
|
|
|
|
.grid__more {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
padding: 12px;
|
|
font-size: var(--fs-2xs);
|
|
font-weight: var(--fw-medium);
|
|
color: var(--zk-blue-dark);
|
|
text-decoration: none;
|
|
border-top: 1px solid var(--zk-line-soft);
|
|
}
|
|
.grid__more:hover { background: var(--zk-hover); }
|
|
|
|
/* Agent status in a row */
|
|
.run { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-2xs); 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: var(--fw-medium); }
|
|
.run--stalled .run__dot, .run__dot--stalled { 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); }
|
|
}
|
|
|
|
/* Renewal countdown */
|
|
.due {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-size: var(--fs-2xs);
|
|
font-weight: var(--fw-medium);
|
|
padding: 2px 9px;
|
|
border-radius: var(--r-pill);
|
|
white-space: nowrap;
|
|
}
|
|
.due--lapsed { background: var(--zk-danger-tint); color: var(--zk-danger-ink); }
|
|
.due--urgent { background: var(--zk-amber-tint); color: var(--zk-amber-ink); }
|
|
.due--soon { background: var(--zk-tint-blue); color: var(--zk-blue-dark); }
|
|
.due--later { background: var(--zk-line-soft); color: var(--zk-muted); }
|
|
|
|
/* ── Filter bar ──────────────────────────────────────────────────────────── */
|
|
.filters {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 12px;
|
|
margin-bottom: var(--sp-4);
|
|
}
|
|
.filters__q {
|
|
flex: 1 1 260px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
height: 34px;
|
|
padding: 0 12px;
|
|
border-radius: var(--r-sm);
|
|
border: 1px solid var(--zk-card-line);
|
|
background: var(--zk-ground);
|
|
color: var(--zk-grey);
|
|
}
|
|
.filters__q:focus-within { border-color: var(--zk-blue); background: var(--zk-card); box-shadow: var(--ring); color: var(--zk-blue); }
|
|
.filters__q input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: var(--fs-xs); color: var(--zk-ink); }
|
|
.filters__q input::placeholder { color: var(--zk-grey); }
|
|
|
|
.filters__sel {
|
|
height: 34px;
|
|
padding: 0 30px 0 12px;
|
|
border-radius: var(--r-sm);
|
|
border: 1px solid var(--zk-card-line);
|
|
background: var(--zk-card);
|
|
font: inherit;
|
|
font-size: var(--fs-2xs);
|
|
font-weight: var(--fw-medium);
|
|
color: var(--zk-ink);
|
|
appearance: none;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%235d6162' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 10px center;
|
|
background-size: 11px;
|
|
cursor: pointer;
|
|
}
|
|
.filters__sel:hover { border-color: var(--zk-grey); }
|
|
.filters__sel:focus-visible { outline: none; border-color: var(--zk-blue); box-shadow: var(--ring); }
|
|
|
|
.filters__tog {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
height: 34px;
|
|
padding: 0 12px;
|
|
border-radius: var(--r-sm);
|
|
border: 1px solid var(--zk-card-line);
|
|
background: var(--zk-card);
|
|
font: inherit;
|
|
font-size: var(--fs-2xs);
|
|
font-weight: var(--fw-medium);
|
|
color: var(--zk-muted);
|
|
cursor: pointer;
|
|
transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
|
|
}
|
|
.filters__tog:hover { border-color: var(--zk-grey); color: var(--zk-ink); }
|
|
.filters__tog.is-on { background: var(--zk-tint-blue); border-color: var(--zk-blue-light); color: var(--zk-blue-dark); }
|
|
.filters__count {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-left: auto;
|
|
font-size: var(--fs-2xs);
|
|
color: var(--zk-muted);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* ── Doors (new-lead chooser) ────────────────────────────────────────────── */
|
|
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 16px; }
|
|
.door {
|
|
position: relative;
|
|
font: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
background: var(--zk-card);
|
|
border: 1px solid var(--zk-card-line);
|
|
border-radius: var(--r-card);
|
|
padding: 20px 20px 18px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
transition: box-shadow var(--t), border-color var(--t-fast);
|
|
}
|
|
.door:hover { border-color: var(--zk-blue-light); box-shadow: var(--sh-card-hover); }
|
|
.door:focus-visible { border-color: var(--zk-blue); box-shadow: var(--ring); outline: none; }
|
|
.door strong { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--zk-ink); }
|
|
.door p { margin: 0; font-size: var(--fs-2xs); color: var(--zk-muted); line-height: 1.55; }
|
|
.chip {
|
|
display: inline-flex; align-items: center; align-self: flex-start;
|
|
font-size: var(--fs-2xs); font-weight: var(--fw-medium);
|
|
padding: 2px 9px; border-radius: var(--r-pill);
|
|
background: var(--zk-tint-blue); color: var(--zk-blue-dark);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════════
|
|
OVERVIEW
|
|
═══════════════════════════════════════════════════════════════════════════ */
|
|
|
|
/* Who holds the work — four quiet cards; the ones actually owed warm up. */
|
|
.now {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: var(--sp-3);
|
|
margin-bottom: var(--sp-3);
|
|
}
|
|
.now__cell {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
grid-template-areas: 'ico label' 'ico value' 'ico sub';
|
|
column-gap: 14px;
|
|
row-gap: 2px;
|
|
padding: var(--sp-4) var(--sp-5);
|
|
transition: box-shadow var(--t);
|
|
}
|
|
.now__ico {
|
|
grid-area: ico;
|
|
display: grid;
|
|
place-items: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 11px;
|
|
color: var(--zk-blue-dark);
|
|
background: var(--zk-tint-blue);
|
|
}
|
|
.now__l { grid-area: label; font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: var(--zk-muted); }
|
|
.now__v {
|
|
grid-area: value;
|
|
font-size: var(--fs-2xl);
|
|
font-weight: var(--fw-semi);
|
|
line-height: 1.1;
|
|
letter-spacing: -0.03em;
|
|
color: var(--zk-ink);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.now__s { grid-area: sub; font-size: var(--fs-2xs); line-height: 1.4; color: var(--zk-grey); }
|
|
|
|
.now__cell--person .now__ico { color: var(--zk-amber-ink); background: var(--zk-amber-tint); }
|
|
.now__cell--cust .now__ico { color: var(--zk-teal-ink); background: var(--zk-teal-tint); }
|
|
.now__cell--risk .now__ico { color: var(--zk-danger-ink); background: var(--zk-danger-tint); }
|
|
|
|
.now__cell--person.is-live { border-color: var(--zk-amber-line); background: linear-gradient(180deg, #fff 0%, var(--zk-amber-tint) 100%); }
|
|
.now__cell--person.is-live .now__v { color: var(--zk-amber-ink); }
|
|
.now__cell--risk.is-live { border-color: var(--zk-danger-line); background: linear-gradient(180deg, #fff 0%, var(--zk-danger-tint) 100%); }
|
|
.now__cell--risk.is-live .now__v { color: var(--zk-danger-ink); }
|
|
|
|
/* The pipeline, as one bar */
|
|
.flow { padding: var(--sp-5) var(--sp-6) var(--sp-5); margin-bottom: var(--sp-3); }
|
|
.flow__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }
|
|
.flow__legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-2xs); color: var(--zk-muted); }
|
|
.flow__legend span { display: inline-flex; align-items: center; gap: 6px; }
|
|
.flow__sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
|
|
.flow__sw--blue { background: var(--zk-blue); }
|
|
.flow__sw--amber { background: var(--zk-amber); }
|
|
.flow__sw--teal { background: var(--zk-teal); }
|
|
.flow__sw--grey { background: var(--zk-grey); }
|
|
|
|
.flow__bar {
|
|
display: flex;
|
|
gap: 3px;
|
|
height: 34px;
|
|
border-radius: 9px;
|
|
overflow: hidden;
|
|
}
|
|
.flow__seg {
|
|
flex: 1 1 0;
|
|
min-width: 34px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 5px;
|
|
color: #fff;
|
|
font-size: var(--fs-2xs);
|
|
font-weight: var(--fw-semi);
|
|
font-variant-numeric: tabular-nums;
|
|
text-decoration: none;
|
|
transition: filter var(--t-fast), transform var(--t-fast);
|
|
}
|
|
.flow__seg:hover { filter: brightness(1.08); }
|
|
.flow__seg--blue { background: var(--zk-blue); }
|
|
.flow__seg--amber { background: var(--zk-amber); }
|
|
.flow__seg--teal { background: var(--zk-teal); }
|
|
.flow__seg--grey { background: var(--zk-grey); }
|
|
.flow__seg--line { background: var(--zk-line-soft); }
|
|
|
|
.flow__stages {
|
|
list-style: none;
|
|
margin: var(--sp-4) 0 0;
|
|
padding: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: 4px 8px;
|
|
}
|
|
.flow__stage {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 8px;
|
|
border-radius: var(--r-xs);
|
|
text-decoration: none;
|
|
color: var(--zk-ink);
|
|
font-size: var(--fs-2xs);
|
|
transition: background var(--t-fast);
|
|
}
|
|
.flow__stage:hover { background: var(--zk-hover); }
|
|
.flow__stage b { margin-left: auto; font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
|
|
.flow__stage.is-zero { color: var(--zk-grey); }
|
|
.flow__stage.is-zero b { font-weight: var(--fw-normal); }
|
|
.flow__stage.is-end .flow__sname { color: var(--zk-muted); }
|
|
.flow__sname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.flow__ki { flex: none; }
|
|
.flow__ki--blue { color: var(--zk-blue); }
|
|
.flow__ki--amber { color: var(--zk-amber); }
|
|
.flow__ki--teal { color: var(--zk-teal); }
|
|
.flow__ki--grey { color: var(--zk-grey); }
|
|
.flow__ki--line { color: var(--zk-grey); }
|
|
|
|
/* KPI strip */
|
|
.kpis {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
gap: var(--sp-4) var(--sp-6);
|
|
padding: var(--sp-4) var(--sp-6);
|
|
margin-bottom: var(--sp-5);
|
|
}
|
|
.kpi { min-width: 0; padding-left: var(--sp-4); border-left: 1px solid var(--zk-line-soft); }
|
|
.kpi:first-child { padding-left: 0; border-left: 0; }
|
|
.kpi__l { display: block; margin-bottom: 4px; font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: var(--zk-muted); }
|
|
.kpi__v {
|
|
display: block;
|
|
margin-bottom: 2px;
|
|
font-size: var(--fs-xl);
|
|
font-weight: var(--fw-semi);
|
|
line-height: var(--lh-tight);
|
|
color: var(--zk-navy);
|
|
font-variant-numeric: tabular-nums;
|
|
letter-spacing: -.025em;
|
|
}
|
|
.kpi__s { display: block; font-size: var(--fs-2xs); line-height: 1.4; color: var(--zk-grey); }
|
|
|
|
/* A sign-off, not a task */
|
|
.appr {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
margin-bottom: var(--sp-5);
|
|
padding: 14px 20px;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: border-color var(--t-fast), box-shadow var(--t-fast);
|
|
}
|
|
.appr:hover { box-shadow: var(--sh-card-hover); }
|
|
.appr:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: 2px; }
|
|
.appr__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; color: var(--zk-muted); background: var(--zk-line-soft); flex: none; }
|
|
.appr.is-live { border-color: var(--zk-amber-line); background: linear-gradient(90deg, var(--zk-amber-tint) 0%, #fff 60%); }
|
|
.appr.is-live .appr__ico { color: var(--zk-amber-ink); background: #fff; }
|
|
.appr__n { flex: none; min-width: 34px; font-size: var(--fs-2xl); font-weight: var(--fw-semi); 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: 2px; min-width: 0; flex: 1; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--zk-ink); }
|
|
.appr__t em { font-style: normal; font-size: var(--fs-2xs); font-weight: var(--fw-normal); line-height: 1.45; color: var(--zk-muted); }
|
|
.appr__go { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2xs); color: var(--zk-muted); white-space: nowrap; }
|
|
|
|
/* Two columns: what needs a person / what is about to lapse. */
|
|
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--sp-5); align-items: start; }
|
|
|
|
/* Work queues */
|
|
.qlist { display: flex; flex-direction: column; gap: 6px; }
|
|
.q {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr) auto auto auto;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 10px 12px 10px 10px;
|
|
border: 1px solid var(--zk-line-soft);
|
|
border-radius: var(--r-md);
|
|
background: var(--zk-card);
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: border-color .12s, background .12s;
|
|
}
|
|
.q:hover { border-color: var(--zk-blue-light); background: var(--zk-hover); }
|
|
.q__ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--zk-muted); background: var(--zk-line-soft); }
|
|
.q__ico--needs { color: var(--zk-amber-ink); background: var(--zk-amber-tint); }
|
|
.q__ico--customer { color: var(--zk-teal-ink); background: var(--zk-teal-tint); }
|
|
.q__t { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--zk-ink); min-width: 0; }
|
|
.q__t em { display: block; font-style: normal; font-weight: var(--fw-normal); font-size: var(--fs-2xs); color: var(--zk-muted); margin-top: 1px; }
|
|
.q__age { font-size: var(--fs-2xs); color: var(--zk-grey); font-variant-numeric: tabular-nums; white-space: nowrap; }
|
|
.q__n { min-width: 28px; text-align: right; font-size: var(--fs-lg); font-weight: var(--fw-semi); color: var(--zk-grey); font-variant-numeric: tabular-nums; }
|
|
.q.is-live .q__n { color: var(--zk-ink); }
|
|
.q__go { display: grid; place-items: center; width: 22px; height: 22px; color: var(--zk-grey); }
|
|
.q:hover .q__go { color: var(--zk-blue); }
|
|
.q__go--ro { color: var(--zk-grey); }
|
|
|
|
/* Expiry bands as filters */
|
|
.buckets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: var(--sp-4); }
|
|
.bucket {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 1px;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--zk-card-line);
|
|
border-radius: var(--r-md);
|
|
background: var(--zk-card);
|
|
font: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
|
|
}
|
|
.bucket:hover { border-color: var(--zk-grey); }
|
|
.bucket strong { font-size: var(--fs-lg); font-weight: var(--fw-semi); line-height: 1.1; font-variant-numeric: tabular-nums; }
|
|
.bucket span { font-size: var(--fs-2xs); color: var(--zk-muted); }
|
|
.bucket--lapsed strong { color: var(--zk-danger-ink); }
|
|
.bucket--week strong { color: var(--zk-amber-ink); }
|
|
.bucket--month strong { color: var(--zk-blue-dark); }
|
|
.bucket--lapsed.is-on { background: var(--zk-danger-tint); border-color: var(--zk-danger-line); }
|
|
.bucket--week.is-on { background: var(--zk-amber-tint); border-color: var(--zk-amber-line); }
|
|
.bucket--month.is-on { background: var(--zk-tint-blue); border-color: var(--zk-blue-light); }
|
|
.bucket:focus-visible { outline: none; border-color: var(--zk-blue); box-shadow: var(--ring); }
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════════
|
|
LEAD
|
|
═══════════════════════════════════════════════════════════════════════════ */
|
|
|
|
/* Whose move it is — a pill in the header */
|
|
.holds {
|
|
flex: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 6px 14px 6px 6px;
|
|
border-radius: var(--r-pill);
|
|
border: 1px solid var(--zk-card-line);
|
|
background: var(--zk-card);
|
|
}
|
|
.holds__puck { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--zk-muted); background: var(--zk-line-soft); }
|
|
.holds__txt { display: flex; flex-direction: column; line-height: 1.2; }
|
|
.holds__txt small { font-size: 11px; font-weight: var(--fw-medium); color: var(--zk-grey); }
|
|
.holds__txt b { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--zk-ink); }
|
|
.holds--ai .holds__puck { color: var(--zk-blue-dark); background: var(--zk-tint-blue); }
|
|
.holds--person .holds__puck { color: var(--zk-amber-ink); background: var(--zk-amber-tint); }
|
|
.holds--cust .holds__puck { color: var(--zk-teal-ink); background: var(--zk-teal-tint); }
|
|
|
|
/* Your move */
|
|
.cta {
|
|
flex: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 8px 14px 8px 16px;
|
|
border: 0;
|
|
border-radius: var(--r-md);
|
|
background: var(--zk-amber);
|
|
color: #fff;
|
|
cursor: pointer;
|
|
box-shadow: 0 6px 16px -8px rgba(181, 118, 31, .6);
|
|
transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
|
|
}
|
|
.cta:hover { background: var(--zk-amber-ink); transform: translateY(-1px); }
|
|
.cta:focus-visible { outline: 2px solid var(--zk-amber-ink); outline-offset: 2px; }
|
|
.cta__txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
|
|
.cta__txt small { font-size: 11px; font-weight: var(--fw-medium); opacity: .85; }
|
|
.cta__txt b { font-size: var(--fs-sm); font-weight: var(--fw-semi); }
|
|
|
|
/* The numbers that matter, plus the journey */
|
|
.lmetrics {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: var(--sp-4) var(--sp-6);
|
|
padding: var(--sp-4) var(--sp-6) 0;
|
|
margin-bottom: var(--sp-5);
|
|
}
|
|
.lm { min-width: 0; padding-bottom: var(--sp-4); }
|
|
.lm__l { display: block; margin-bottom: 4px; font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: var(--zk-muted); }
|
|
.lm__v {
|
|
display: block;
|
|
margin-bottom: 2px;
|
|
font-size: var(--fs-xl);
|
|
font-weight: var(--fw-semi);
|
|
line-height: var(--lh-tight);
|
|
color: var(--zk-navy);
|
|
font-variant-numeric: tabular-nums;
|
|
letter-spacing: -.02em;
|
|
}
|
|
.lm--hero .lm__v { font-size: var(--fs-2xl); }
|
|
.lm__s { display: block; font-size: var(--fs-2xs); line-height: 1.4; color: var(--zk-grey); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
/* The countdown carries its tone as COLOUR only — no pill box on a figure. */
|
|
.lm__v--lapsed { color: var(--zk-danger-ink); }
|
|
.lm__v--urgent { color: var(--zk-amber-ink); }
|
|
.lm__v--soon { color: var(--zk-blue-dark); }
|
|
.lm--rail { grid-column: 1 / -1; padding: var(--sp-3) 0 var(--sp-2); border-top: 1px solid var(--zk-line-soft); }
|
|
|
|
/* Two columns: the story, and the reference rail */
|
|
.lead {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 340px;
|
|
gap: var(--sp-5);
|
|
align-items: start;
|
|
}
|
|
.lead__main { min-width: 0; }
|
|
.lead__side {
|
|
position: sticky;
|
|
top: 72px;
|
|
min-width: 0;
|
|
max-height: calc(100vh - 88px);
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
.lead__side .sect { margin-bottom: var(--sp-4); }
|
|
|
|
/* What the workflow said */
|
|
.said {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: var(--sp-4);
|
|
padding: 12px 12px 12px 16px;
|
|
border-radius: var(--r-md);
|
|
border: 1px solid var(--zk-green-line);
|
|
background: var(--zk-green-tint);
|
|
animation: zk-rise 0.24s var(--ease) both;
|
|
}
|
|
.said__ico { flex: none; color: var(--zk-green-ink); }
|
|
.said p { flex: 1; margin: 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--zk-green-ink); }
|
|
.said button { flex: none; display: grid; place-items: center; width: 26px; height: 26px; cursor: pointer; border: 0; border-radius: 6px; background: none; color: var(--zk-green-ink); }
|
|
.said button:hover { background: rgba(255,255,255,.6); }
|
|
|
|
/* What the machine is doing */
|
|
.doing {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 14px;
|
|
margin-bottom: var(--sp-4);
|
|
padding: 14px 18px;
|
|
border-radius: var(--r-card);
|
|
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: var(--fs-sm); font-weight: var(--fw-semi); color: var(--zk-blue-dark); }
|
|
.doing span { font-size: var(--fs-2xs); line-height: 1.5; color: var(--zk-muted); }
|
|
.doing__ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--zk-blue-dark); background: #fff; }
|
|
.doing__ico--pulse { box-shadow: 0 0 0 0 rgba(33, 103, 174, 0.4); 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); }
|
|
}
|
|
.doing--blocked, .doing--stalled { border-color: var(--zk-amber-line); background: var(--zk-amber-tint); }
|
|
.doing--blocked strong, .doing--stalled strong { color: var(--zk-amber-ink); }
|
|
.doing--blocked .doing__ico, .doing--stalled .doing__ico { color: var(--zk-amber-ink); }
|
|
.doing--waiting { border-color: var(--zk-teal-line); background: var(--zk-teal-tint); }
|
|
.doing--waiting strong { color: var(--zk-teal-ink); }
|
|
.doing--waiting .doing__ico { color: var(--zk-teal-ink); }
|
|
.doing__fix {
|
|
align-self: flex-start;
|
|
margin-top: 8px;
|
|
font: inherit;
|
|
font-size: var(--fs-2xs);
|
|
font-weight: var(--fw-medium);
|
|
cursor: pointer;
|
|
padding: 6px 13px;
|
|
border-radius: var(--r-sm);
|
|
color: var(--zk-amber-ink);
|
|
background: #fff;
|
|
border: 1px solid var(--zk-amber-line);
|
|
transition: background var(--t-fast), border-color var(--t-fast);
|
|
}
|
|
.doing__fix:hover { border-color: var(--zk-amber); }
|
|
|
|
/* Next step */
|
|
.step { display: flex; flex-wrap: wrap; gap: 10px; }
|
|
.step__btn {
|
|
flex: 1 1 220px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px 16px;
|
|
border: 1px solid var(--zk-blue);
|
|
border-radius: var(--r-md);
|
|
background: var(--zk-blue);
|
|
color: #fff;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
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 6px 16px -8px rgba(33,103,174,.6); }
|
|
.step__btn.is-open { background: var(--zk-blue-deep); border-color: var(--zk-blue-deep); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
|
|
.step__ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.18); flex: none; }
|
|
.step__t { display: flex; flex-direction: column; min-width: 0; }
|
|
.step__t strong { font-size: var(--fs-sm); font-weight: var(--fw-semi); }
|
|
.step__t span { font-size: var(--fs-2xs); opacity: .85; margin-top: 1px; }
|
|
.step__btn--no { background: #fff; color: var(--zk-danger-ink); border-color: var(--zk-danger-line); }
|
|
.step__btn--no .step__ico { background: var(--zk-danger-tint); }
|
|
.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); box-shadow: none; }
|
|
|
|
.alt { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
|
|
.alt__btn {
|
|
padding: 7px 12px;
|
|
border: 1px solid var(--zk-card-line);
|
|
border-radius: var(--r-sm);
|
|
background: var(--zk-card);
|
|
color: var(--zk-ink);
|
|
font: inherit;
|
|
font-size: var(--fs-2xs);
|
|
font-weight: var(--fw-medium);
|
|
cursor: pointer;
|
|
transition: border-color .12s, background .12s;
|
|
}
|
|
.alt__btn:hover { border-color: var(--zk-blue-light); background: var(--zk-hover); }
|
|
.alt__btn.is-open { border-color: var(--zk-blue); background: var(--zk-tint-blue); color: var(--zk-blue-dark); }
|
|
.alt__btn em { font-style: normal; margin-left: 7px; font-weight: var(--fw-normal); 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); }
|
|
|
|
/* The form, in a bounded panel with the action's own name on it */
|
|
.acts__form {
|
|
margin-top: var(--sp-4);
|
|
padding: var(--sp-4) var(--sp-5) var(--sp-5);
|
|
border: 1px solid var(--zk-card-line);
|
|
border-radius: var(--r-md);
|
|
background: var(--zk-ground);
|
|
animation: zk-rise 0.24s var(--ease) both;
|
|
}
|
|
.acts__formhead {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: var(--sp-4);
|
|
padding-bottom: var(--sp-3);
|
|
border-bottom: 1px solid var(--zk-line-soft);
|
|
}
|
|
.acts__formhead h3 { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--zk-ink); }
|
|
.acts__formhead p { margin: 2px 0 0; font-size: var(--fs-2xs); color: var(--zk-muted); }
|
|
|
|
/* Recovery, folded */
|
|
.stuck { margin-top: 16px; border-top: 1px solid var(--zk-line-soft); padding-top: 12px; }
|
|
.stuck > summary {
|
|
cursor: pointer;
|
|
font-size: var(--fs-2xs);
|
|
font-weight: var(--fw-medium);
|
|
color: var(--zk-muted);
|
|
list-style: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.stuck > summary::-webkit-details-marker { display: none; }
|
|
.stuck__caret { transition: transform var(--t-fast); }
|
|
.stuck[open] .stuck__caret { transform: rotate(90deg); }
|
|
.stuck > summary:hover { color: var(--zk-blue-dark); }
|
|
.stuck__why { margin: 10px 0 0; font-size: var(--fs-2xs); color: var(--zk-muted); max-width: 64ch; }
|
|
|
|
/* The AI team on this lead */
|
|
.crew { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
|
|
.crew__row {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 8px 0;
|
|
border-top: 1px solid var(--zk-line-soft);
|
|
}
|
|
.crew__row:first-child { border-top: 0; padding-top: 0; }
|
|
.crew__t { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
|
|
.crew__name {
|
|
font: inherit;
|
|
font-size: var(--fs-xs);
|
|
font-weight: var(--fw-medium);
|
|
color: var(--zk-ink);
|
|
padding: 0;
|
|
border: 0;
|
|
background: none;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
.crew__name:hover { color: var(--zk-blue-dark); text-decoration: underline; }
|
|
.crew__t span { font-size: 11.5px; color: var(--zk-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.crew__n {
|
|
font-size: var(--fs-2xs);
|
|
font-weight: var(--fw-semi);
|
|
font-variant-numeric: tabular-nums;
|
|
padding: 2px 8px;
|
|
border-radius: var(--r-pill);
|
|
color: var(--zk-blue-dark);
|
|
background: var(--zk-tint-blue);
|
|
}
|
|
|
|
/* At a glance / lead file groups */
|
|
.glance { display: grid; grid-template-columns: 1fr; }
|
|
.fgroup { padding: var(--sp-3) 0; border-top: 1px solid var(--zk-line-soft); }
|
|
.glance .fgroup:first-child { border-top: 0; padding-top: 0; }
|
|
.fgroup h3 {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
margin: 0 0 6px;
|
|
font-size: var(--fs-2xs);
|
|
font-weight: var(--fw-semi);
|
|
color: var(--zk-ink);
|
|
}
|
|
.fgroup h3 svg { color: var(--zk-blue); }
|
|
.fgroup h3 span { margin-left: auto; font-size: 11px; font-weight: var(--fw-medium); color: var(--zk-grey); font-variant-numeric: tabular-nums; }
|
|
|
|
.props { margin: 0; display: block; padding: 0; }
|
|
.prop {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
|
|
gap: var(--sp-3);
|
|
align-items: baseline;
|
|
margin: 0;
|
|
padding: 5px 0;
|
|
}
|
|
.prop dt { font-size: var(--fs-2xs); line-height: 1.5; color: var(--zk-grey); margin: 0; }
|
|
.prop dd { margin: 0; font-size: var(--fs-2xs); line-height: 1.5; color: var(--zk-ink); overflow-wrap: anywhere; }
|
|
.prop__num { font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); }
|
|
.prop__files { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
|
|
/* A document chip: type tag + name */
|
|
.doc,
|
|
.prop__file {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
max-width: 100%;
|
|
padding: 3px 9px 3px 4px;
|
|
border-radius: var(--r-sm);
|
|
border: 1px solid var(--zk-card-line);
|
|
background: var(--zk-card);
|
|
color: var(--zk-blue-dark);
|
|
font-size: var(--fs-2xs);
|
|
text-decoration: none;
|
|
transition: border-color var(--t-fast), background var(--t-fast);
|
|
}
|
|
.doc:hover, .prop__file:hover { border-color: var(--zk-blue-light); background: var(--zk-tint-blue); }
|
|
.doc__ext {
|
|
flex: none;
|
|
font-size: 9.5px;
|
|
font-weight: var(--fw-semi);
|
|
letter-spacing: .04em;
|
|
padding: 2px 5px;
|
|
border-radius: 4px;
|
|
color: #fff;
|
|
background: var(--zk-danger);
|
|
}
|
|
.doc__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
.glance .clamp__lead, .glance .clamp__text,
|
|
.file360 .clamp__lead, .file360 .clamp__text {
|
|
font-size: var(--fs-2xs);
|
|
font-weight: var(--fw-normal);
|
|
line-height: 1.5;
|
|
color: var(--zk-muted);
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
.glance .clamp__more, .file360 .clamp__more { margin-top: 2px; font-size: var(--fs-2xs); }
|
|
|
|
.glance__act { margin-top: 8px; }
|
|
|
|
.glance__all {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
width: calc(100% + var(--sp-5) * 2);
|
|
margin: var(--sp-3) calc(var(--sp-5) * -1) calc(var(--sp-5) * -1);
|
|
padding: 12px var(--sp-5);
|
|
border: 0;
|
|
border-top: 1px solid var(--zk-line-soft);
|
|
border-radius: 0 0 var(--r-card) var(--r-card);
|
|
background: var(--zk-ground);
|
|
cursor: pointer;
|
|
font: inherit;
|
|
font-size: var(--fs-2xs);
|
|
font-weight: var(--fw-medium);
|
|
color: var(--zk-blue-dark);
|
|
transition: background var(--t-fast);
|
|
}
|
|
.glance__all:hover { background: var(--zk-tint-blue); }
|
|
.glance__all:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: -2px; }
|
|
.glance__all b { margin-left: auto; font-weight: var(--fw-normal); color: var(--zk-grey); font-variant-numeric: tabular-nums; }
|
|
|
|
/* The full file, in its dialog */
|
|
.file360 {
|
|
padding: 4px 22px 22px;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: 6px 28px;
|
|
align-items: start;
|
|
}
|
|
.file360 .fgroup { border-top: 0; padding: var(--sp-4) 0; }
|
|
.file360 .fgroup h3 { padding-bottom: 8px; border-bottom: 1px solid var(--zk-line-soft); margin-bottom: 8px; }
|
|
.fnotes { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--zk-line); display: grid; gap: 10px; }
|
|
.fnote__l { display: block; margin-bottom: 2px; font-size: 11px; font-weight: var(--fw-medium); color: var(--zk-grey); }
|
|
|
|
/* ── Responsive ──────────────────────────────────────────────────────────── */
|
|
@media (max-width: 1180px) {
|
|
.now { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.kpi { border-left: 0; padding-left: 0; }
|
|
.split { grid-template-columns: minmax(0, 1fr); }
|
|
.lead { grid-template-columns: minmax(0, 1fr); }
|
|
.lead__side { position: static; max-height: none; overflow: visible; }
|
|
}
|
|
@media (max-width: 720px) {
|
|
.now, .kpis { grid-template-columns: minmax(0, 1fr); }
|
|
.buckets { grid-template-columns: 1fr; }
|
|
.page__head { flex-direction: column; }
|
|
.page__right { margin-top: 0; }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.run--working .run__dot, .doing__ico--pulse { animation: none; }
|
|
}
|