/* offboard.css · Offboarding orchestrator — demo-specific layout.
   Tokens, cards, badges, buttons and bars come from lab-kit.css. */
.ob-stage { display: flex; flex-direction: column; gap: 18px; }

/* ============================== Leaver header ============================== */
.ob-leaver {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) auto minmax(240px, 1.6fr);
  align-items: center;
  gap: 22px;
}
.ob-leaver__id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ob-leaver__avatar {
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -.01em;
  background: linear-gradient(135deg, var(--ink), #2b3a33);
}
.ob-leaver__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ob-leaver__meta b { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.ob-leaver__meta span { font-size: 12.5px; color: var(--text-dim); }
.ob-leaver__last { font-family: var(--font-mono); font-size: 11.5px !important; color: var(--text-soft) !important; }
.ob-leaver__last time { color: var(--text-2); font-weight: 600; }

/* countdown + ring */
.ob-leaver__count {
  display: flex; align-items: center; gap: 16px;
  padding: 0 22px; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}
.ob-count { display: flex; flex-direction: column; line-height: 1; text-align: right; }
.ob-count b { font-family: var(--font-display); font-weight: 800; font-size: 40px; letter-spacing: -.02em; color: var(--ink); }
.ob-count span { font-size: 11px; color: var(--text-soft); margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; }
.ob-ring { position: relative; width: 84px; height: 84px; flex-shrink: 0; display: grid; place-items: center; }
.ob-ring svg { transform: rotate(-90deg); }
.ob-ring__bg { fill: none; stroke: var(--soft); stroke-width: 8; }
.ob-ring__fg {
  fill: none; stroke: var(--mint); stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 226.19; stroke-dashoffset: 226.19;
  transition: stroke-dashoffset .7s cubic-bezier(.2,.7,.2,1);
}
.ob-ring b {
  position: absolute; font-family: var(--font-mono); font-weight: 600; font-size: 14px; color: var(--mint-ink);
}

/* overall bar + run controls */
.ob-leaver__bar { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ob-leaver__barhead { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--text-2); }
.ob-leaver__barhead b { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--text-1); }
.ob-leaver__bar .bar-fill { background: linear-gradient(90deg, var(--mint-700), var(--mint)); }
.ob-srdone { font-family: var(--font-mono); font-size: 11px; color: var(--text-soft); margin-top: 1px; }
.ob-actions { display: flex; gap: 9px; margin-top: 6px; }
.ob-actions .lab-btn { padding: 9px 16px; font-size: 13px; }
.ob-leaver.is-running .lab-btn--primary { opacity: .6; pointer-events: none; }

/* ============================== Workstreams ============================== */
.ob-stream { display: flex; flex-direction: column; }
.ob-stream__head-r { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; }
.ob-stream__count { font-family: var(--font-mono); font-size: 12px; color: var(--text-soft); }
.ob-stream.is-done { border-color: var(--mint); box-shadow: 0 4px 14px rgba(4,190,140,.12); }

.ob-checks { display: flex; flex-direction: column; gap: 2px; }
.ob-check {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 9px 8px; border-radius: var(--r-sm);
  cursor: pointer; transition: background .15s;
}
.ob-check:hover { background: var(--mint-tint-2); }
.ob-check:focus-within { background: var(--mint-tint-2); box-shadow: inset 0 0 0 1px var(--mint); }
.ob-check input {
  appearance: none; -webkit-appearance: none; flex-shrink: 0;
  width: 18px; height: 18px; margin-top: 1px; border-radius: 6px;
  border: 1.8px solid var(--line); background: var(--surface);
  cursor: pointer; transition: background .15s, border-color .15s, transform .15s;
  position: relative;
}
.ob-check input:hover { border-color: var(--mint); }
.ob-check input:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.ob-check input:checked { background: var(--mint); border-color: var(--mint); }
.ob-check input:checked::after {
  content: ''; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2.2px 2.2px 0; transform: rotate(42deg);
}
.ob-check__body { flex: 1; min-width: 0; }
.ob-check__t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ob-check__t b { font-size: 13px; font-weight: 600; color: var(--text-1); transition: color .15s; }
.ob-check__by { font-size: 11px; color: var(--text-soft); display: block; margin-top: 2px; }
.ob-check.is-done .ob-check__t b { color: var(--text-soft); text-decoration: line-through; text-decoration-color: var(--mint); }
.ob-tag {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .05em;
  padding: 2px 6px; border-radius: 5px; text-transform: uppercase; white-space: nowrap;
}
.ob-tag.agent { color: var(--mint-ink); background: var(--mint-tint); }
.ob-tag.human { color: var(--info); background: var(--info-soft); }
/* row flash when an agent ticks it */
@keyframes ob-flash { 0% { background: var(--mint-tint); } 100% { background: transparent; } }
.ob-check.just-done { animation: ob-flash .9s ease-out; }

/* ============================== Audit trail ============================== */
.ob-log { display: flex; flex-direction: column; }
.ob-log .lab-empty { padding: 26px 20px; }
.ob-log-row {
  display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: baseline;
  padding: 9px 4px; border-top: 1px solid var(--line-soft);
  animation: lab-up .35s cubic-bezier(.2,.7,.2,1) backwards;
}
.ob-log-row:first-child { border-top: 0; }
.ob-log-row time { font-family: var(--font-mono); font-size: 11px; color: var(--text-soft); }
.ob-log-row .ob-log-msg { font-size: 12.5px; line-height: 1.5; color: var(--text-1); }
.ob-log-row .ob-log-msg b { color: var(--mint-ink); font-weight: 600; }
.ob-log-row .ob-log-actor { color: var(--text-dim); }

/* ============================== Responsive ============================== */
@media (max-width: 860px) {
  .ob-leaver { grid-template-columns: 1fr; gap: 16px; }
  .ob-leaver__count {
    padding: 14px 0; justify-content: space-between;
    border-left: 0; border-right: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
}
@media (max-width: 600px) {
  .ob-count b { font-size: 32px; }
  .ob-log-row { grid-template-columns: 60px 1fr; gap: 8px; }
}