/* ---------------------------------------------------------------
   技术负责人 dense workbench — contract-centric
   --------------------------------------------------------------- */
:root { --pad-cell: 6px 8px; }

.shell { max-width: 1680px; margin: 0 auto; padding: 14px 20px 60px; }

/* ---- Page head ---- */
.phead {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 2px 2px 14px;
  gap: 16px;
}
.phead .ttl { display: flex; align-items: baseline; gap: 10px; }
.phead h1 {
  margin: 0; font-size: 16px; font-weight: 600;
  letter-spacing: -0.01em;
}
.phead .crumb { font-size: 11.5px; color: var(--ink-3); }
.phead .crumb b { color: var(--ink-2); font-weight: 500; }
.phead .right { display: flex; align-items: center; gap: 10px; }
.phead .as-of { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }
.phead .actions { display: flex; gap: 6px; }
.phead .actions .btn { padding: 4px 10px; font-size: 12px; }

/* ---- KPI strip ---- */
.kpi {
  display: grid; grid-template-columns: repeat(6, 1fr);
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden;
}
.kpi-cell {
  padding: 12px 14px;
  border-right: 1px solid var(--line);
  cursor: pointer; transition: background .12s;
}
.kpi-cell:last-child { border-right: 0; }
.kpi-cell:hover { background: var(--surface-2); }
.kpi-cell .lbl {
  font-size: 11px; color: var(--ink-3); font-weight: 500;
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.kpi-cell .lbl::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-4);
}
.kpi-cell.red   .lbl::before { background: var(--st-overdue); }
.kpi-cell.amber .lbl::before { background: var(--st-due); }
.kpi-cell.blue  .lbl::before { background: var(--st-active); }
.kpi-cell .num {
  font-family: var(--font-mono); font-feature-settings: "tnum";
  font-size: 26px; font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.1; color: var(--ink-1);
}
.kpi-cell .num.unit { font-size: 12px; color: var(--ink-4); font-weight: 500; margin-left: 2px; }
.kpi-cell.red   .num { color: var(--st-overdue); }
.kpi-cell.amber .num { color: var(--st-due); }
.kpi-cell .sub {
  font-size: 11px; color: var(--ink-3);
  margin-top: 5px; font-family: var(--font-mono);
}

/* ---- Main grid ---- */
.main {
  --main-panel-height: clamp(660px, calc(100vh - 250px), 760px);
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(360px, .95fr);
  gap: 14px;
  margin-top: 14px;
  align-items: stretch;
}
.main > .panel {
  min-height: 0;
}
.contract-panel {
  display: flex;
  flex-direction: column;
  height: var(--main-panel-height);
}
.col-r {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  height: var(--main-panel-height);
  min-height: 0;
}
.col-r > .panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ---- Panel ---- */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  min-height: 40px;
}
.panel-head h2 { margin: 0; font-size: 13px; font-weight: 600; }
.panel-head .count {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-3); background: var(--surface-3);
  padding: 1px 6px; border-radius: 4px;
}
.panel-head .spacer { flex: 1; }
.panel-head .meta { font-size: 11px; color: var(--ink-3); }
.panel-head .sortby {
  display: inline-flex; gap: 2px;
  background: var(--surface-3); padding: 2px; border-radius: 6px;
  font-family: var(--font-mono);
}
.panel-head .sortby button {
  padding: 2px 8px; font-size: 11px;
  color: var(--ink-3); border-radius: 4px; font-weight: 500;
}
.panel-head .sortby button.active {
  background: var(--surface); color: var(--ink-1);
  box-shadow: var(--shadow-sm); font-weight: 600;
}
.panel-head .filter-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 10.5px;
  background: var(--surface-3);
  padding: 2px 6px; border-radius: 4px; color: var(--ink-3);
}
.panel-head .filter-chip.active { background: var(--ink-1); color: white; }

/* ---- Personnel summary cell ---- */
.personnel-cell {
  font-size: 11px;
  line-height: 1.4;
  white-space: normal;
  word-break: break-all;
}
.personnel-summary {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1px 0;
  line-height: 1.5;
}
.ps-sep {
  color: var(--ink-5);
  margin: 0 1px;
}

/* ---- Generic dense table ---- */
.t {
  width: 100%; border-collapse: collapse; font-size: 12.5px;
}
.t thead th {
  position: sticky; top: 0; background: var(--surface);
  padding: 7px 10px; border-bottom: 1px solid var(--line);
  font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-4); text-align: left; white-space: nowrap;
  z-index: 2;
}
.t thead th.num { text-align: right; }
.t tbody td {
  padding: var(--pad-cell);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
  line-height: 1.25;
}
.t tbody tr { cursor: pointer; }
.t tbody tr:hover td { background: var(--surface-2); }
.t tbody tr:last-child td { border-bottom: 0; }
.t .num { text-align: right; font-family: var(--font-mono); font-feature-settings: "tnum"; }
.t .num.red    { color: var(--st-overdue); font-weight: 600; }
.t .num.amber  { color: var(--st-due); font-weight: 600; }
.t .num.dim    { color: var(--ink-4); }
.t .mono-cell  { font-family: var(--font-mono); white-space: nowrap; }
.t .ellipsis   { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.table-scroll { overflow: auto; }
.contract-scroll {
  flex: 1;
  min-height: 0;
}
.contract-table {
  table-layout: fixed;
  min-width: 820px;
}
.contract-table .c-health { width: 88px; }
.contract-table .c-contract { width: 116px; }
.contract-table .c-customer { width: auto; }
.contract-table .c-status { width: 86px; }
.contract-table .c-date { width: 90px; }
.contract-table .c-num { width: 44px; }
.contract-table .c-num-wide { width: 58px; }
.contract-table .c-personnel { width: 200px; }
.contract-table .c-blocker { width: 158px; }
.contract-table th,
.contract-table td {
  overflow: hidden;
}
.contract-table .status-cell,
.contract-table .due-cell {
  white-space: nowrap;
}
.contract-table .ellipsis {
  max-width: 100%;
}
.contract-table .hbar {
  min-width: 72px;
  gap: 5px;
}
.contract-table .hbar .track {
  width: 42px;
}
.contract-table .hbar .v {
  min-width: 22px;
}
.workorder-table {
  min-width: 1080px;
}
.workorder-table td:nth-child(6),
.workorder-table td:nth-child(7),
.workorder-table td:nth-child(8),
.workorder-table td:nth-child(9) {
  white-space: nowrap;
}

/* ---- Contract row decoration ---- */
.t tbody tr.lvl-block td:first-child { box-shadow: inset 2px 0 0 var(--st-overdue); }
.t tbody tr.lvl-risk  td:first-child { box-shadow: inset 2px 0 0 var(--st-overdue); }
.t tbody tr.lvl-note  td:first-child { box-shadow: inset 2px 0 0 var(--st-due); }
.t tbody tr.lvl-ok    td:first-child { box-shadow: inset 2px 0 0 var(--st-ok); }

/* Health gauge */
.hbar { display: inline-flex; align-items: center; gap: 8px; min-width: 92px; }
.hbar .track {
  width: 56px; height: 6px; background: var(--surface-3);
  border-radius: 2px; overflow: hidden; flex-shrink: 0;
}
.hbar .track i { display: block; height: 100%; background: var(--st-ok); border-radius: 2px; }
.hbar.zero .track i { min-width: 3px; }
.hbar.lvl-block .track i { background: var(--st-overdue); }
.hbar.lvl-risk  .track i { background: var(--st-overdue); }
.hbar.lvl-note  .track i { background: var(--st-due); }
.hbar.lvl-ok    .track i { background: var(--st-ok); }
.hbar .v {
  font-family: var(--font-mono); font-size: 12px;
  font-weight: 600; min-width: 26px; text-align: right;
}
.hbar.lvl-block .v { color: var(--st-overdue); }
.hbar.lvl-risk  .v { color: var(--st-overdue); }
.hbar.lvl-note  .v { color: var(--st-due); }

/* Level pill */
.lpill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--surface-3);
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.lpill.block { background: var(--st-overdue-soft); color: var(--st-overdue); font-weight: 600; }
.lpill.risk  { background: var(--st-overdue-soft); color: var(--st-overdue); }
.lpill.note  { background: var(--st-due-soft); color: var(--st-due); }
.lpill.ok    { background: var(--st-ok-soft); color: var(--st-ok); }

/* Status tag */
.stg {
  display: inline-block;
  font-family: var(--font-mono); font-size: 10.5px;
  padding: 1px 6px; border-radius: 3px;
  background: var(--surface-3); color: var(--ink-2);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.stg.overdue { background: var(--st-overdue-soft); color: var(--st-overdue); font-weight: 600; }
.stg.running { background: var(--st-active-soft); color: var(--st-active); }
.stg.queued  { background: var(--surface-3); color: var(--ink-3); }
.stg.pending { background: var(--st-pending-soft); color: var(--st-pending); }
.stg.await   { background: var(--st-due-soft); color: var(--st-due); }
.stg.done    { background: var(--st-ok-soft); color: var(--st-ok); }
.stg.paused  { background: var(--st-paused-soft); color: var(--st-paused); }

/* Blocker text in table cell */
.bcell {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--ink-3);
  max-width: 100%;
  min-width: 0;
}
.bcell .dot {
  width: 6px; height: 6px; border-radius: 50%;
  flex-shrink: 0;
}
.bcell.red   { color: var(--st-overdue); font-weight: 500; }
.bcell.red   .dot { background: var(--st-overdue); }
.bcell.amber { color: var(--st-due); font-weight: 500; }
.bcell.amber .dot { background: var(--st-due); }
.bcell.dim   .dot { background: var(--ink-5); }
.bcell .label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Compact list (top blockers, staff) ---- */
.list { padding: 0; }
.col-r .list {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
#staffList {
  overflow: auto;
}
.list-head {
  display: grid; gap: 10px; align-items: center;
  padding: 7px 14px 6px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
  color: var(--ink-4);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
}
.litem {
  display: grid; gap: 10px; align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background .12s;
}
.litem:hover { background: var(--surface-2); }
.litem:last-child { border-bottom: 0; }

/* Blocker top10 */
.blocker-item {
  grid-template-columns: 26px 1fr 70px 70px;
}
.blocker-head { grid-template-columns: 26px 1fr 70px 70px; }
.blocker-head span:nth-child(3),
.blocker-head span:nth-child(4) { text-align: right; }
.blocker-item .rank {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-4); font-weight: 600;
}
.blocker-item .body .l1 {
  font-size: 12.5px; font-weight: 500;
  display: flex; align-items: center; gap: 6px;
}
.blocker-item .body .l1 .dot {
  width: 6px; height: 6px; border-radius: 50%;
}
.blocker-item.red    .body .l1 .dot { background: var(--st-overdue); }
.blocker-item.amber  .body .l1 .dot { background: var(--st-due); }
.blocker-item .body .l2 {
  font-size: 10.5px; color: var(--ink-4);
  font-family: var(--font-mono); margin-top: 2px;
}
.blocker-item .n {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
}
.blocker-item.red .n.wo { color: var(--st-overdue); }
.blocker-item.amber .n.wo { color: var(--st-due); }
.blocker-item .n .u {
  font-size: 10px; color: var(--ink-4);
  font-weight: 500; display: block;
}

/* Staff row */
.staff-item { grid-template-columns: 28px minmax(80px, 1fr) 126px 88px; }
.staff-head { grid-template-columns: 28px minmax(80px, 1fr) 126px 88px; }
.staff-head span:nth-child(3),
.staff-head span:nth-child(4) { text-align: right; }
.staff-item .av {
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, #cbd5e1, #94a3b8);
  color: white; font-size: 10.5px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.staff-item .nm {
  font-size: 12.5px; font-weight: 500;
}
.staff-item .nm .role {
  font-size: 10.5px; color: var(--ink-4);
  margin-top: 1px;
  font-family: var(--font-mono);
}
.staff-item .stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-3);
}
.staff-item .stats span {
  display: flex; justify-content: flex-end; gap: 2px;
}
.staff-item .stats span em {
  font-style: normal;
  color: var(--ink-4);
}
.staff-item .stats span b { font-weight: 600; color: var(--ink-1); }
.staff-item .stats span.red b { color: var(--st-overdue); }
.staff-item .stats span.amber b { color: var(--st-due); }
.staff-item .h-cell { display: flex; justify-content: flex-end; }
.staff-item .h-cell .hbar { min-width: 78px; gap: 5px; }
.staff-item .h-cell .hbar .track { width: 42px; }

/* ---- Lower tabs ---- */
.lower {
  margin-top: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.tabbar {
  display: flex; align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 0 6px;
  min-height: 42px;
}
.tabbar .tab {
  padding: 11px 14px;
  font-size: 12.5px; font-weight: 500;
  color: var(--ink-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabbar .tab.active { color: var(--ink-1); font-weight: 600; border-bottom-color: var(--primary); }
.tabbar .tab .n {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-4); margin-left: 4px;
}
.tabbar .spacer { flex: 1; }
.tabbar .filters {
  display: flex; gap: 4px; align-items: center;
  padding: 0 10px;
  font-family: var(--font-mono); font-size: 11px;
}
.tabbar .filters .chip {
  padding: 2px 8px; border-radius: 4px;
  background: var(--surface-3); color: var(--ink-3);
  cursor: pointer;
}
.tabbar .filters .chip:hover { color: var(--ink-1); }
.tabbar .filters .chip.active { background: var(--ink-1); color: white; }
[data-theme="dark"] .tabbar .filters .chip.active { background: var(--primary); }

.tabbody { max-height: 540px; overflow: auto; }

/* ---- Data integrity grid ---- */
.audit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.audit .a {
  padding: 14px 16px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.audit .a:nth-child(3n) { border-right: 0; }
.audit .a:nth-last-child(-n+3) { border-bottom: 0; }
.audit .a .lbl {
  font-size: 11.5px; color: var(--ink-3);
  margin-bottom: 6px;
}
.audit .a .v {
  font-family: var(--font-mono);
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.01em;
}
.audit .a .v .pct { font-size: 13px; color: var(--ink-4); margin-left: 4px; font-weight: 500; }
.audit .a .note {
  font-size: 11px; color: var(--ink-3);
  margin-top: 6px;
  font-family: var(--font-mono);
}
.audit .a.red   .v { color: var(--st-overdue); }
.audit .a.amber .v { color: var(--st-due); }

/* ---- Drawer body extensions ---- */
html.drawer-open,
body.drawer-open {
  height: 100vh;
  overflow: hidden;
}
html.drawer-open .shell {
  max-height: calc(100vh - 48px);
  overflow: hidden;
}

.drawer { width: 820px; min-width: 820px; max-width: 820px; }
@media (max-width: 1300px) { .drawer { width: 720px; min-width: 720px; } }

.drw-summary {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
.drw-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
}
.drw-card h3 {
  margin: 0 0 8px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3);
}
.drw-card.full { grid-column: 1 / -1; }

.metric-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  background: var(--line-soft);
  border-radius: 6px;
  overflow: hidden;
}
.metric {
  background: var(--surface);
  padding: 10px 12px;
}
.metric .lbl {
  font-size: 10.5px; color: var(--ink-3);
  margin-bottom: 4px;
}
.metric .v {
  font-family: var(--font-mono);
  font-size: 18px; font-weight: 600;
  line-height: 1.1;
}
.metric.red .v { color: var(--st-overdue); }
.metric.amber .v { color: var(--st-due); }
.metric.ok .v   { color: var(--st-ok); }
.metric.dim .v  { color: var(--ink-4); }

/* Health visual in drawer */
.health-big {
  display: flex; align-items: baseline; gap: 8px;
}
.health-big .v {
  font-family: var(--font-mono);
  font-size: 36px; font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.health-big.lvl-block .v, .health-big.lvl-risk .v { color: var(--st-overdue); }
.health-big.lvl-note  .v { color: var(--st-due); }
.health-big.lvl-ok    .v { color: var(--st-ok); }
.health-big .u { font-size: 13px; color: var(--ink-4); font-family: var(--font-mono); }
.health-big .lvl-name {
  margin-left: auto;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}
.health-big.lvl-block .lvl-name { background: var(--st-overdue-soft); color: var(--st-overdue); }
.health-big.lvl-risk  .lvl-name { background: var(--st-overdue-soft); color: var(--st-overdue); }
.health-big.lvl-note  .lvl-name { background: var(--st-due-soft); color: var(--st-due); }
.health-big.lvl-ok    .lvl-name { background: var(--st-ok-soft); color: var(--st-ok); }

/* Chain (delivery) */
.chain {
  display: flex;
  background: var(--surface);
  border-radius: 6px;
  border: 1px solid var(--line);
  overflow-x: auto;
  overflow-y: hidden;
}
.chain .node {
  flex: 1;
  min-width: 112px;
  padding: 12px 12px;
  border-right: 1px solid var(--line);
  position: relative;
  cursor: pointer;
  transition: background .12s;
}
.chain .node:last-child { border-right: 0; }
.chain .node:hover { background: var(--surface-2); }
.chain .node .label {
  font-size: 10.5px; color: var(--ink-3);
  font-weight: 500;
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.chain .node .label .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-5); }
.chain .node.red   .label .dot { background: var(--st-overdue); }
.chain .node.amber .label .dot { background: var(--st-due); }
.chain .node.ok    .label .dot { background: var(--st-ok); }
.chain .node .n {
  font-family: var(--font-mono);
  font-size: 20px; font-weight: 600;
  line-height: 1; letter-spacing: -0.02em;
}
.chain .node.red .n   { color: var(--st-overdue); }
.chain .node.amber .n { color: var(--st-due); }
.chain .node .sub {
  font-size: 10.5px; color: var(--ink-3);
  margin-top: 5px; font-family: var(--font-mono);
}
.chain .node::after {
  content: "→";
  position: absolute;
  right: -8px; top: 50%; transform: translateY(-50%);
  color: var(--ink-4);
  font-size: 11px;
  background: var(--surface);
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}
.chain .node:last-child::after { display: none; }

/* People-and-tasks list */
.role-group { margin-bottom: 16px; }
.role-group h4 {
  margin: 0 0 8px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 8px;
}
.role-group h4 .n {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-4); background: var(--surface-3);
  padding: 1px 5px; border-radius: 3px;
}
.person-block {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 8px;
  overflow: hidden;
}
.person-block .ph {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.person-block .ph:hover { background: var(--surface-3); }
.person-block .ph.static { cursor: default; }
.person-block .ph.static:hover { background: transparent; }
.person-block .ph .av {
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white; font-size: 10.5px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.person-block .ph .nm { font-size: 12.5px; font-weight: 500; flex: 1; }
.person-block .ph .nm small { color: var(--ink-3); font-weight: 400; margin-left: 6px; }
.person-block .ph .summary {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-3);
}
.person-block .ph .summary b { color: var(--ink-1); }
.person-block .ph .summary b.r { color: var(--st-overdue); }
.person-block .wo-mini { padding: 4px 0; }
.person-block .wo-mini .w {
  display: grid;
  grid-template-columns: 116px minmax(120px, 1fr) 82px 82px minmax(130px, 1fr);
  gap: 10px;
  padding: 6px 12px;
  font-size: 11.5px;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid var(--line-soft);
}
.person-block .wo-mini .w:last-child { border-bottom: 0; }
.person-block .wo-mini .w:hover { background: var(--surface-3); }
.person-block .wo-mini .w .id { font-family: var(--font-mono); color: var(--ink-2); font-size: 11px; }
.person-block .wo-mini .w .blkr {
  font-size: 10.5px; color: var(--ink-4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.person-block .wo-mini .w .blkr.red { color: var(--st-overdue); }
.person-block .wo-mini .w .blkr.amber { color: var(--st-due); }
.person-block.missing { border-left: 3px solid var(--st-due); }
.person-block.missing .ph .av {
  background: var(--st-due);
}
.empty-note {
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.flow-mini { padding: 4px 0; }
.flow-row {
  display: grid;
  grid-template-columns: 138px minmax(120px, 1fr) 88px 92px;
  gap: 10px;
  padding: 6px 12px;
  font-size: 11.5px;
  align-items: center;
  border-bottom: 1px solid var(--line-soft);
}
.flow-row:last-child { border-bottom: 0; }
.flow-row .id {
  font-family: var(--font-mono);
  color: var(--ink-2);
  font-size: 11px;
}

/* Sample group */
.sg { margin-bottom: 14px; }
.sg-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}
.sg-head .nm { font-size: 12.5px; font-weight: 600; }
.sg-head .nm small { color: var(--ink-3); font-weight: 400; margin-left: 6px; font-family: var(--font-mono); }
.sg-head .meta { font-size: 11px; color: var(--ink-3); margin-left: auto; }
.sg .wo-list {
  border: 1px solid var(--line);
  border-radius: 0 0 6px 6px;
  overflow: hidden;
}

/* Blockers tab */
.bset {
  display: flex; flex-direction: column; gap: 8px;
}
.bset .b {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
}
.bset .b.red   { border-left: 3px solid var(--st-overdue); }
.bset .b.amber { border-left: 3px solid var(--st-due); }
.bset .b .head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.bset .b .head .lbl { font-size: 12.5px; font-weight: 600; flex: 1; }
.bset .b .head .lbl.red   { color: var(--st-overdue); }
.bset .b .head .lbl.amber { color: var(--st-due); }
.bset .b .head .count {
  font-family: var(--font-mono); font-size: 11px;
  background: var(--surface-3); padding: 1px 6px; border-radius: 3px;
  color: var(--ink-3);
}
.bset .b .ev {
  font-size: 11.5px; color: var(--ink-3);
  font-family: var(--font-mono);
}
.bset .b .wos {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 8px;
}
.bset .b .wos a {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
  padding: 2px 7px; border-radius: 3px;
  cursor: pointer;
}
.bset .b .wos a:hover { border-color: var(--ink-4); color: var(--ink-1); }

/* WO chain steps */
.steps {
  display: flex; flex-direction: column;
  gap: 0;
}
.step {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px;
  align-items: center;
}
.step:last-child { border-bottom: 0; }
.step .pin {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface-3); color: var(--ink-4);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
}
.step.done .pin { background: var(--st-ok); color: white; border-color: var(--st-ok); }
.step.active .pin { background: var(--primary); color: white; border-color: var(--primary); }
.step.attn .pin { background: var(--st-due); color: white; border-color: var(--st-due); }
.step.block .pin { background: var(--st-overdue); color: white; border-color: var(--st-overdue); }
.step .lbl b { font-weight: 500; }
.step .lbl .sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.step .lbl .sub.red   { color: var(--st-overdue); }
.step .lbl .sub.amber { color: var(--st-due); }
.step .when { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }

/* Drawer-internal table */
.drw-table {
  width: 100%; border-collapse: collapse;
  font-size: 12px;
  min-width: 920px;
}
.drw-table th {
  background: var(--surface-2);
  padding: 6px 10px;
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-4); text-align: left;
  border-bottom: 1px solid var(--line);
}
.drw-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.drw-table th,
.drw-table td {
  white-space: nowrap;
}
.drw-table th:nth-child(2),
.drw-table td:nth-child(2),
.drw-table th:nth-child(3),
.drw-table td:nth-child(3),
.drw-table th:nth-child(8),
.drw-table td:nth-child(8) {
  white-space: normal;
}
.drw-table tr:hover td { background: var(--surface-2); cursor: pointer; }
.drw-table .id { font-family: var(--font-mono); color: var(--ink-2); }

/* Pill row in drawer */
.role-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.role-tag {
  font-family: var(--font-mono); font-size: 10.5px;
  background: var(--surface-3); color: var(--ink-3);
  padding: 1px 6px; border-radius: 3px;
}
.role-tag.tester { background: var(--st-active-soft); color: var(--st-active); }
.role-tag.author { background: var(--st-paused-soft); color: var(--st-paused); }
.role-tag.signer { background: var(--st-due-soft); color: var(--st-due); }