/* e6b.css -- Roles: één editortab, lijst links en de rolkaart rechts
   (#0000-0729 -- hetzelfde vaste-kolom/groeiende-kolom patroon als e6a.css se
   agentpaneel). Alle maten uit core.css' tokens (--row-h, --ui-fs, etc.); waar VS Code
   een duidelijke referentie geeft (een groepskop, een pil, een klik-om-te-bewerken veld)
   volgt de vorm die andere lijsten in deze client al gebruiken (.row, .row.sel,
   .row:hover uit e3a). */

.e6b-panel {
  display: flex;
  height: 100%;
  min-height: 0;
}

/* #0000-1947 (DEC-0000-0532): the width is a variable the drag handle (S.cols.pane) sets and the browser remembers; the
   list itself scrolls inside, so the grip on the right edge stays put. In a narrow list a colleague's name stands on its own
   line with the function under it (container query below). */
.e6b-listwrap {
  position: relative;
  flex: 0 0 var(--e6b-listw, 260px);
  width: var(--e6b-listw, 260px);
  min-width: 160px;
  border-right: 1px solid var(--rule);
  min-height: 0;
  container-type: inline-size;
}

.e6b-list { padding-bottom: 8px; height: 100%; overflow-y: auto; box-sizing: border-box; }

.e6b-grouphead {
  padding: 6px 12px 2px;
  font-size: calc(var(--ui-fs) * 11 / 13);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}

.e6b-row {
  gap: 8px;
}

/* ---- het detail: de groeiende kolom rechts --------------------------------------- */

.e6b-detail {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 16px;
  height: 100%;
  overflow: auto;
  font-size: var(--ui-fs);
  box-sizing: border-box;
}

.e6b-empty { color: var(--text-dim); }

.e6b-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.e6b-label {
  color: var(--text-dim);
  font-size: calc(var(--ui-fs) * 11 / 13);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}

/* the colleagues on top (#0000-1642): a round initial, the name, the function, what they do now */
.e6b-avatar { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent, #6aa7ff); color: var(--accent-tx, #fff); font-size: 11px; font-weight: 600; margin-right: 6px; flex: none; }
.e6b-colrow .e6b-colfn { margin-left: 6px; opacity: .7; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e6b-colrow .e6b-colnow { margin-left: auto; font-size: 11px; opacity: .7; }
.e6b-colrow .e6b-colnow.live { color: var(--ok); opacity: 1; }
.e6b-head .e6b-colname { font-weight: 600; font-size: 15px; }
.e6b-head .e6b-colfn { margin-left: 8px; opacity: .75; }
.e6b-coltag { margin-left: 8px; font-size: 11px; padding: 0 6px; border-radius: 8px; background: var(--rule, rgba(127,127,127,.25)); }
.e6b-coltext { white-space: pre-wrap; }
.e6b-collist { margin: 0; padding-left: 18px; }
.e6b-colturn { gap: 8px; }
.e6b-colturn.link { cursor: pointer; }
.e6b-colturn .e6b-colstate { min-width: 70px; font-size: 11px; opacity: .7; }
.e6b-colturn .e6b-colstate.running { color: var(--ok); opacity: 1; }
.e6b-colcard { opacity: .7; font-size: 12px; }

/* the base of a row, which used to come from the explorer's e3a.css (removed): without it the row is no flex box and the function
   cannot wrap under the name (#0000-3567) */
.e6b-colrow { display: flex; align-items: center; gap: 4px; padding: 0 8px; cursor: pointer; white-space: nowrap; color: var(--text); position: relative; }
.e6b-colrow:hover { background: var(--hover); }
.e6b-colrow.sel { background: var(--accent); color: var(--accent-tx); }

/* narrow list (#0000-1947): avatar + name (+ what they do now) on the first line, the function under the name, nothing cut off */
@container (max-width: 330px) {
  .e6b-colrow { height: auto; min-height: var(--row-h); flex-wrap: wrap; padding-top: 4px; padding-bottom: 4px; row-gap: 0; white-space: normal; }
  .e6b-colrow .nm { flex: 0 1 auto; min-width: 0; overflow: visible; text-overflow: clip; }
  .e6b-colrow .e6b-colnow { order: 2; }
  .e6b-colrow .e6b-colfn { order: 3; flex: 0 0 100%; margin-left: 26px; white-space: normal; overflow: visible; }
}

/* the step line of the social control in a role's row (#0000-1418): under the name, on a line of its own */
.e6b-colrow { height: auto; min-height: var(--row-h); flex-wrap: wrap; padding-top: 3px; padding-bottom: 3px; row-gap: 0; }
.e6b-colrow .e6b-colstep { order: 5; flex: 0 0 100%; margin-left: 26px; font-size: 11px; opacity: .75; white-space: normal; text-decoration: underline dotted; }
.e6b-colrow .e6b-colstep.warn { color: var(--attn); opacity: 1; }
.e6b-stephist { display: flex; gap: 8px; flex-wrap: wrap; padding: 2px 0; font-size: 12px; }
.e6b-stephist .e6b-stepat { opacity: .7; }
.e6b-stephist .e6b-stepwhy { opacity: .8; }

.e6b-raise { margin-left: auto; background: none; border: 1px solid var(--rule); border-radius: 4px; color: inherit; font: inherit; padding: 3px 10px; cursor: pointer; }
.e6b-raise:hover { background: var(--hover); }
.e6b-stephead { margin-top: 6px; font-size: 12px; font-weight: 600; opacity: .8; }
.e6b-stephist.e6b-stepcorr .e6b-stepwhy { color: var(--warn, #b45309); opacity: 1; }
.e6b-colcost { margin-left: .5em; font-size: .85em; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }