.shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--zk-tint);
}

/* ── Top bar ───────────────────────────────────────────────── */
.shell__top {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  height: 72px;
  padding: 0 var(--sp-7);
  background: var(--zk-white);
  border-bottom: 1px solid var(--zk-line);
}

.shell__brand {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.shell__brand img {
  height: 30px;
  width: auto;
  display: block;
}

.shell__brandtext {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.2;
  padding-left: 16px;
  border-left: 1px solid var(--zk-line);
}

.shell__brandtext strong {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  letter-spacing: -0.012em;
  color: var(--zk-ink);
}

.shell__brandtext span {
  font-size: var(--fs-3xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zk-grey);
}

/* ── Body ──────────────────────────────────────────────────── */
.shell__body {
  display: flex;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

.shell__nav {
  position: sticky;
  top: 72px;
  align-self: flex-start;
  width: 264px;
  flex: none;
  min-height: calc(100vh - 72px);
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--zk-tint);
  border-right: 1px solid var(--zk-line);
  padding: var(--sp-6) var(--sp-4) var(--sp-8);
  display: flex;
  flex-direction: column;
}

.shell__navlabel {
  margin: 0 0 var(--sp-3);
  padding: 0 var(--sp-3);
  font-size: var(--fs-3xs);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--zk-grey);
  opacity: 0.85;
}

.shell__group + .shell__group {
  margin-top: var(--sp-5);
}

/* The stage list is drawn as a rail with a node per state: the sidebar should
   look like the pipeline it represents, not like a list of links. */
.shell__stages {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}


.shell__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 9px 12px;
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--zk-muted);
  font-size: var(--fs-xs);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.shell__stage:hover {
  background: var(--zk-tint);
  color: var(--zk-ink);
}

.shell__stage.is-active {
  background: var(--zk-tint-blue);
  color: var(--zk-blue-dark);
  font-weight: 500;
}

/* Queues where the machine stops and a person decides. */
.shell__stage.is-needed .shell__stagename {
  font-weight: 500;
  color: var(--zk-ink);
}

.shell__stage.is-needed.is-active .shell__stagename {
  color: var(--zk-blue-dark);
}

/* Stage names wrap rather than truncate: "Referred to Underwriting" is the one
   queue a person has to find, and it is also the longest label. */
.shell__stagename {
  min-width: 0;
  line-height: 1.35;
}

.shell__main {
  flex: 1;
  min-width: 0;
  background: var(--zk-white);
  /* Fill the whole width beside the nav. No centring cap: a sidebar dashboard
     should use the screen, so the content spans from the rail to the right
     edge. The reading columns cap their own line length internally, so text
     stays comfortable while the layout itself uses every pixel. */
  width: 100%;
  padding: 30px 40px 76px;
}

/* ── Narrow viewports: the rail lies down and scrolls ──────── */
@media (max-width: 900px) {
  .shell__body {
    flex-direction: column;
  }

  .shell__nav {
    position: static;
    width: 100%;
    min-height: 0;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--zk-line);
    padding: 14px 16px 16px;
  }

  .shell__stages {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  /* Laid out horizontally the stages are a scrolling strip of pills, and a rail
     behind them would just be a line struck through the row. */
  .shell__stages::before {
    display: none;
  }

  .shell__stage {
    padding: 8px 14px;
    white-space: nowrap;
    background: var(--zk-white);
    border: 1px solid var(--zk-line);
  }

  .shell__stage::before {
    display: none;
  }

  .shell__main {
    padding: 22px 18px 56px;
  }
}

/* The way back to the overview. It sits above "Add a lead" because reading
   the book is the commoner act — most sessions start by looking, not filing. */
.shell__today {
  display: block;
  margin: 0 0 8px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--zk-ink);
  text-decoration: none;
  transition: background .12s, color .12s;
}
.shell__today:hover { background: var(--zk-tint); }
.shell__today.is-active { background: var(--zk-tint-blue); color: var(--zk-blue-dark); }

/* ── Queue tallies ─────────────────────────────────────────────────────────
   Three numbers, deliberately unequal in weight, because they are unequal in
   importance: what needs YOU, what an agent holds, and whether anything in
   there is about to lapse. */
.shell__tally {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

/* What is waiting on a person. The only figure with full contrast. */
.shell__n {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  text-align: center;
  font-size: var(--fs-2xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--zk-blue-dark);
  background: var(--zk-tint-blue);
}

/* Zero is shown, not hidden. "Nothing here" is an answer, and a queue that
   disappears when it empties makes the sidebar move under the cursor. */
.shell__n.is-zero {
  color: var(--zk-grey);
  background: transparent;
  font-weight: 400;
}

/* What an agent is carrying. Present, quiet, and never added to the badge —
   it is in the queue, it is not your work. */
.shell__auto {
  font-style: normal;
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--zk-grey);
}

/* A renewal inside a week sitting in this queue. */
.shell__urgent {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--zk-amber);
  flex: none;
}

.shell__stage.is-empty { color: var(--zk-grey); }
.shell__stage.is-empty.is-needed .shell__stagename { color: var(--zk-muted); font-weight: 400; }

/* The one number worth carrying on a group heading: everything this role has
   to clear, across its queues. */
.shell__navlabel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* ── Closed, folded ───────────────────────────────────────────────────────
   Three of the twelve queues, opened about once a week. */
.shell__closed { margin-top: var(--sp-4); }

/* Closed matches a queue row — same padding, hover and count — but stays a
   disclosure: a chevron marks it as foldable, closed by default because it is
   reporting, not work. */
.shell__closed > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  padding: 9px 12px;
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  color: var(--zk-muted);
  transition: background var(--t-fast), color var(--t-fast);
}
.shell__closed > summary::-webkit-details-marker { display: none; }
.shell__closed > summary:hover { background: var(--zk-tint); color: var(--zk-ink); }
.shell__closed > summary::before {
  content: '';
  flex: none;
  width: 5px; height: 5px;
  border-right: 1.5px solid var(--zk-grey);
  border-bottom: 1.5px solid var(--zk-grey);
  transform: rotate(-45deg);
  transition: transform var(--t-fast);
}
.shell__closed[open] > summary::before { transform: rotate(45deg); }
.shell__closed > summary b {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  text-align: center;
  font-size: var(--fs-2xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--zk-grey);
  background: var(--zk-tint);
}