/* ═══════════════════════════════════════════════════════════════════════════
   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; }
}