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