/* Evidence › Interviews: the people board (web/interview-board.js). People on the left,
   grouped by business unit; interview transcripts in the tray on the right. */

.ib-panel {
  --ib-line: rgba(132,112,184,.26);
  --ib-line-soft: rgba(132,112,184,.15);
  --ib-deep: #4b20ba;
  --ib-green: #1f6d4c;
  --ib-green-bg: #e4f3ec;
  --ib-amber: #8a5a12;
  --ib-amber-bg: #fdf3e2;
  --ib-red: #a3403a;
  overflow: visible;
  border-radius: 20px;
  color: var(--ink);
  font: 15px/1.5 var(--sans);
}
:where(.ib-panel) button,:where(.ib-panel) input { font: inherit; color: inherit; }
:where(.ib-panel) button { cursor: pointer; }
:where(.ib-panel) h2,:where(.ib-panel) h3,:where(.ib-panel) p { margin: 0; }
.ib-panel [hidden] { display: none !important; }
.ib-panel .ph { flex: none; }
.ib-panel :focus-visible { outline: 3px solid rgba(93,40,239,.34); outline-offset: 2px; }

/* Head: title, the live-interview actions and Build. */
.ib-head {
  position: sticky; top: var(--ib-top, 58px); z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 12px 18px; border-bottom: 1px solid var(--ib-line-soft);
  border-radius: 20px 20px 0 0; background: rgba(250,249,254,.97);
}
.ib-mark {
  display: grid; flex: none; width: 40px; height: 40px; place-items: center; border-radius: 999px;
  background: linear-gradient(145deg,rgba(255,255,255,.95),rgba(221,214,254,.92));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7),0 12px 26px -18px rgba(93,40,239,.8);
  color: var(--lav-600); font-size: 18px;
}
.ib-head h2 { margin-right: auto; font: 700 24px/1.2 var(--serif); letter-spacing: -.02em; }
.ib-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ib-head-actions .ec-icon-button { width: 40px; height: 40px; border-radius: 12px; }
.ib-head-actions .ec-icon-button i { font-size: 18px; }
.ib-head-actions .ec-icon-button:disabled { cursor: default; opacity: .45; transform: none; }
.ib-panel .ib-build { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 12px; font-size: 15px; white-space: nowrap; }
.ib-panel .ib-build:disabled { opacity: .65; cursor: default; animation: none; }
.ib-stat { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border-radius: 999px; font-size: 14.5px; font-weight: 700; }
.ib-stat.is-green { background: var(--ib-green-bg); color: var(--ib-green); }

.ib-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 18px 0; color: var(--mute); font-size: 14.5px; font-weight: 600; }
.ib-line > .ph { color: var(--lav-600); font-size: 18px; }
.ib-line.is-error { margin: 18px; color: var(--ib-red); }
.ib-line.is-error > .ph { color: var(--ib-red); }
.ib-spin { animation: ibSpin 1s linear infinite; }
@keyframes ibSpin { to { transform: rotate(360deg); } }
.ib-skeleton { display: grid; gap: 10px; padding: 18px; }
.ib-skeleton span { height: 52px; border-radius: 14px; background: linear-gradient(90deg,rgba(255,255,255,.5),rgba(237,233,254,.9),rgba(255,255,255,.5)); background-size: 200% 100%; animation: ibShimmer 1.4s ease-in-out infinite; }
.ib-skeleton span:first-child { width: 40%; height: 44px; }
@keyframes ibShimmer { to { background-position: -200% 0; } }
.ib-empty-start { display: grid; place-items: center; padding: 48px 18px; }
.ib-empty-start .btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; font-size: 15px; }

/* The two columns. */
.ib-board { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 18px; align-items: start; padding: 16px 18px 20px; }
.ib-col { min-width: 0; }
.ib-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ib-search { position: relative; flex: 1 1 auto; min-width: 0; }
.ib-search > .ph { position: absolute; top: 50%; left: 13px; color: var(--mute-2); font-size: 17px; transform: translateY(-50%); }
.ib-search input { box-sizing: border-box; width: 100%; height: 44px; padding: 0 14px 0 40px; border: 1px solid var(--ib-line); border-radius: 12px; background: rgba(255,255,255,.92); color: var(--ink); font-size: 15px; }
.ib-search input:focus-visible { border-color: var(--lav-500); outline: 3px solid rgba(124,58,237,.2); outline-offset: 1px; }
.ib-menu-wrap { position: relative; flex: none; }
.ib-sq { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--ib-line); border-radius: 12px; background: rgba(255,255,255,.92); color: var(--ib-deep); font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.ib-sq .ph { font-size: 19px; }
.ib-sq:hover { border-color: rgba(124,58,237,.5); background: #fff; }
.ib-sq.is-on { border-color: transparent; background: var(--lav-600); color: #fff; }
.ib-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 35;
  display: grid; gap: 2px; width: max-content; min-width: 230px; max-width: min(320px,calc(100vw - 48px));
  padding: 6px; border: 1px solid var(--ib-line); border-radius: 14px; background: #fff;
  box-shadow: 0 22px 50px -24px rgba(48,26,73,.55);
}
.ib-menu.is-left { right: auto; left: -6px; }
.ib-menu button,.ib-menu a { display: grid; grid-template-columns: 20px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font-size: 14.5px; font-weight: 600; text-align: left; text-decoration: none; }
.ib-menu button:hover,.ib-menu a:hover,.ib-menu button[aria-checked="true"] { background: var(--lav-50); }
.ib-menu button:disabled { cursor: default; opacity: .6; }
.ib-menu .ph { color: var(--lav-600); font-size: 17px; }
.ib-menu small { display: block; color: var(--mute-2); font-size: 12.5px; font-weight: 500; }
.ib-menu b { color: var(--mute-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.ib-menu-note { margin-top: 4px; padding: 8px 10px 2px; border-top: 1px solid var(--ib-line-soft); color: var(--mute-2); font-size: 12.5px; }

/* Selection: the master box with its menu, and one box per person. */
.ib-selwrap { display: flex; align-items: center; height: 44px; padding: 0 2px 0 3px; border: 1px solid var(--ib-line); border-radius: 12px; background: rgba(255,255,255,.92); }
.ib-cb { position: relative; display: grid; flex: none; width: 36px; height: 36px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; }
.ib-cb::before { content: ""; box-sizing: border-box; width: 18px; height: 18px; border: 2px solid #6b6280; border-radius: 4px; transition: background .12s ease,border-color .12s ease; }
.ib-cb:hover { background: rgba(124,58,237,.09); }
.ib-cb[aria-checked="true"]::before,.ib-cb[aria-checked="mixed"]::before { border-color: var(--lav-600); background: var(--lav-600); }
.ib-cb .ph { position: absolute; color: #fff; font-size: 13px; font-weight: 700; opacity: 0; }
.ib-cb[aria-checked="true"] .ph.on,.ib-cb[aria-checked="mixed"] .ph.mid { opacity: 1; }
.ib-cb:disabled { cursor: not-allowed; }
.ib-cb:disabled::before { border-color: #cdc7d9; background: #f4f2f8; }
.ib-cb:disabled:hover { background: transparent; }
.ib-caret { display: grid; width: 24px; height: 36px; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--mute); font-size: 15px; }
.ib-caret:hover,.ib-caret[aria-expanded="true"] { background: var(--lav-100); color: var(--ib-deep); }

/* People, grouped by business unit. */
/* Update from Excel: what the file will change, then Apply. */
.ib-sheet { display: grid; gap: 10px; margin-bottom: 14px; padding: 14px 16px; border: 1px solid var(--ib-line); border-radius: 14px; background: rgba(255,255,255,.86); }
.ib-sheet-line { display: flex; align-items: flex-start; gap: 8px; color: var(--ink-3); font-size: 14px; line-height: 1.45; }
.ib-sheet-line > .ph { flex: none; margin-top: 1px; color: var(--lav-600); font-size: 18px; }
.ib-sheet-line b { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.ib-sheet-rows summary { cursor: pointer; color: var(--mute); font-size: 13px; font-weight: 650; }
.ib-sheet-rows ul { display: grid; gap: 4px; max-height: 180px; margin: 8px 0 0; padding: 0; overflow: auto; list-style: none; }
.ib-sheet-rows li { display: flex; gap: 8px; color: var(--mute); font-size: 13px; line-height: 1.4; }
.ib-sheet-rows li b { flex: none; min-width: 56px; color: var(--ink-3); font-weight: 650; }
.ib-sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ib-sheet-actions .btn { min-height: 36px; padding: 0 16px; }
.ib-group { margin-bottom: 14px; }
.ib-group-head { display: flex; align-items: baseline; gap: 8px; margin: 0 4px 6px; }
.ib-group-head h3 { color: var(--mute); font-size: 14px; font-weight: 750; }
.ib-group-head small { color: var(--mute-3); font-size: 13px; font-weight: 650; }
.ib-group-list { display: grid; gap: 8px; }
.ib-person {
  display: grid; grid-template-columns: 36px minmax(170px,1fr) minmax(150px,.85fr) minmax(190px,1.15fr) 32px;
  grid-template-areas: "sel id role drop del"; gap: 8px 10px; align-items: center;
  padding: 8px 8px 8px 4px; border: 1px solid rgba(255,255,255,.85); border-radius: 14px;
  background: linear-gradient(145deg,rgba(255,255,255,.92),rgba(250,248,253,.76));
  box-shadow: 0 14px 32px -28px rgba(48,26,73,.5),inset 0 1px 0 rgba(255,255,255,.82);
  transition: box-shadow .16s ease,background .16s ease;
}
.ib-person.is-selected { border-color: rgba(124,58,237,.3); background: linear-gradient(145deg,rgba(245,241,255,.97),rgba(238,232,254,.85)); }
.ib-person.is-over { background: #fff; outline: 3px solid rgba(124,58,237,.5); outline-offset: 2px; box-shadow: 0 22px 44px -26px rgba(76,39,170,.7); }
.ib-psel { grid-area: sel; }
.ib-pid { grid-area: id; display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 10px; align-items: center; min-width: 0; }
.ib-avatar { position: relative; display: grid; width: 38px; height: 38px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(105,47,173,.12); color: #652aaa; font-size: 13px; font-weight: 800; }
.ib-avatar:hover { background: rgba(105,47,173,.2); }
.ib-dot { position: absolute; right: -3px; bottom: -3px; display: grid; width: 17px; height: 17px; place-items: center; border: 2px solid #fff; border-radius: 50%; background: var(--ib-green); color: #fff; font-size: 10px; }
.ib-dot.is-amber { background: #d9930d; }
.ib-dot.is-building { background: var(--lav-600); }
/* A Brief building: the Briefs glyph working, on a white chip. */
.ib-dot.is-building.has-glyph { right: -6px; bottom: -6px; width: 22px; height: 22px; border-radius: 7px; background: #fff; box-shadow: 0 2px 6px rgba(39, 22, 55, .18); }
.ib-pfields { display: grid; min-width: 0; }
.ib-edit { box-sizing: border-box; width: 100%; min-width: 0; margin-left: -6px; padding: 2px 6px; border: 1px solid transparent; border-radius: 8px; background: transparent; text-overflow: ellipsis; }
.ib-edit:hover { border-color: rgba(132,112,184,.4); background: rgba(255,255,255,.75); }
.ib-edit:focus-visible { border-color: var(--lav-500); background: #fff; outline: 3px solid rgba(124,58,237,.2); outline-offset: 0; }
.ib-edit::placeholder { color: var(--mute-3); font-weight: 500; }
.ib-panel .ib-pname { font-size: 15px; font-weight: 750; }
.ib-panel .ib-ptitle,.ib-panel .ib-punit,.ib-ptitle-text { color: var(--mute); font-size: 13.5px; }
.ib-pname-open { justify-self: start; max-width: 100%; overflow: hidden; padding: 0; border: 0; background: none; font-size: 15px; font-weight: 750; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.ib-pname-open:hover { color: var(--lav-600); }
.ib-unit-wrap { position: relative; display: none; }
.ib-person.is-editing .ib-unit-wrap,.ib-unit-wrap.is-open { display: block; }
.ib-unitbtn { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin-left: -6px; padding: 3px 6px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--mute); font-size: 13.5px; text-align: left; }
.ib-unitbtn:hover,.ib-unitbtn[aria-expanded="true"] { border-color: rgba(132,112,184,.4); background: rgba(255,255,255,.8); }
.ib-unitbtn .ph { color: var(--lav-600); font-size: 14px; }
.ib-unitbtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-prole { grid-area: role; display: flex; align-items: center; gap: 2px; min-width: 0; }
.ib-rolebtn { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-height: 36px; padding: 5px 10px; border: 1px solid var(--ib-line); border-radius: 10px; background: #fff; color: #2d2440; font-size: 13.5px; font-weight: 600; line-height: 1.3; text-align: left; }
.ib-rolebtn > span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ib-rolebtn:hover:not(.is-static) { border-color: rgba(124,58,237,.5); }
.ib-rolebtn.is-static { cursor: default; }
.ib-rolebtn > .ph { color: var(--lav-600); }
.ib-rolebtn .more { flex: none; padding: 0 6px; border-radius: 999px; background: var(--lav-100); color: var(--ib-deep); font-size: 12px; font-weight: 750; }
.ib-rolebtn.is-none { border-style: dashed; border-color: rgba(166,107,23,.55); background: var(--ib-amber-bg); color: var(--ib-amber); }
.ib-rolebtn.is-none > .ph { color: var(--ib-amber); }
.ib-pdrop { grid-area: drop; display: grid; gap: 5px; min-width: 0; padding: 3px; border: 1.5px dashed transparent; border-radius: 12px; }
.ib-pdrop.is-empty { border-color: var(--ib-line); }
.ib-pdel { grid-area: del; opacity: .5; }
.ib-person:hover .ib-pdel,.ib-pdel:focus-visible { opacity: 1; }
.ib-person > .ib-picker { grid-column: 2/-1; }
.ib-chip .ib-iconbtn { width: 26px; height: 26px; font-size: 14px; }
.ib-iconbtn.is-accept { color: var(--ib-green); }
.ib-iconbtn.is-accept:hover { background: var(--ib-green-bg); color: var(--ib-green); }
.ib-pickbtn { display: flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--mute-3); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.ib-pickbtn:hover,.ib-pickbtn[aria-expanded="true"] { background: var(--lav-50); color: var(--ib-deep); }
.ib-pickbtn.is-more { justify-self: start; min-height: 26px; padding: 0 8px 0 6px; color: var(--lav-600); font-weight: 650; }
.ib-pick.is-btn { width: 100%; border: 0; background: transparent; color: inherit; font: inherit; font-size: 13.5px; text-align: left; }
.ib-pick.is-btn > .ph { margin-top: 2px; color: var(--lav-600); }
.ib-acceptall { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border: 1px solid rgba(29,122,79,.35); border-radius: 10px; background: var(--ib-green-bg); color: var(--ib-green); font: 700 13px var(--sans); white-space: nowrap; cursor: pointer; }
.ib-acceptall:hover { border-color: rgba(29,122,79,.6); background: #fff; }
.ib-acceptall b { padding: 0 6px; border-radius: 999px; background: #fff; font-size: 12px; }
.ib-chip { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 32px; padding: 1px 2px 1px 9px; border: 1px solid rgba(124,58,237,.28); border-radius: 10px; background: #fff; color: #2d2440; font-size: 13.5px; font-weight: 600; }
.ib-chip[draggable="true"] { cursor: grab; }
.ib-chip.is-ora { border-style: dashed; background: var(--lav-50); }
.ib-chip > .ph { color: var(--lav-600); }
.ib-chip .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-chip .tiny { flex: none; color: var(--mute-2); font-size: 14px; }
.ib-chip:not([draggable]) { padding-right: 9px; }
.ib-iconbtn { display: grid; flex: none; width: 30px; height: 30px; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--mute); font-size: 15px; }
.ib-iconbtn:hover,.ib-iconbtn[aria-expanded="true"] { background: var(--lav-100); color: var(--ib-deep); }
.ib-iconbtn:disabled { cursor: default; }
.ib-iconbtn.is-del:hover { background: #fbeceb; color: var(--ib-red); }
.ib-dropempty { display: flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 8px; color: var(--mute-3); font-size: 13px; }
.ib-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid var(--ib-line); border-radius: 12px; background: rgba(255,255,255,.78); color: var(--ink-3); font-size: 13.5px; font-weight: 650; white-space: nowrap; }
.ib-btn:hover { background: #fff; }
.ib-picker { display: grid; gap: 4px; padding: 8px; border: 1px solid var(--ib-line); border-radius: 12px; background: #fff; }
.ib-picks { display: grid; gap: 2px; }
.ib-role-picker .ib-picks { grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); }
.ib-picks.is-scroll { max-height: 280px; overflow: auto; }
.ib-pick { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 8px; align-items: start; padding: 6px; border-radius: 8px; font-size: 13.5px; cursor: pointer; }
.ib-pick:hover { background: var(--lav-50); }
.ib-pick input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--lav-600); }
.ib-pick small { display: block; color: var(--mute-2); font-size: 12.5px; }
.ib-picker input[type="search"] { box-sizing: border-box; width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--ib-line); border-radius: 9px; background: #fff; color: var(--ink); font-size: 14px; }
.ib-picker-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; color: var(--mute-2); font-size: 12.5px; }
.ib-empty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 22px; border: 1px dashed var(--ib-line); border-radius: 14px; color: var(--mute); text-align: center; }
.ib-empty:empty { display: none; }
body.ib-dragging .ib-pdrop { border-color: rgba(124,58,237,.5); background: rgba(124,58,237,.07); }
body.ib-dragging .ib-tray.is-over { outline: 3px solid rgba(124,58,237,.45); outline-offset: 2px; }

/* The tray of interview transcripts. */
.ib-tray {
  position: sticky; top: calc(var(--ib-top, 58px) + var(--ib-head-h, 66px) + 12px);
  display: grid; grid-template-rows: auto minmax(0,1fr); gap: 10px;
  max-height: calc(100vh - var(--ib-top, 58px) - var(--ib-head-h, 66px) - 28px);
  padding: 12px; border: 1px solid rgba(255,255,255,.85); border-radius: 16px;
  background: rgba(255,255,255,.72); box-shadow: 0 22px 58px -46px rgba(50,27,78,.6);
}
.ib-tray .ib-tools { margin-bottom: 0; }
.ib-tlist { display: grid; align-content: start; gap: 8px; min-height: 0; margin: 0 -6px; padding: 2px 6px 6px; overflow: auto; }
.ib-tcard { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; gap: 2px 8px; align-items: start; padding: 8px 6px 10px; border: 1px solid var(--ib-line); border-radius: 12px; background: #fff; }
.ib-tcard[draggable="true"] { cursor: grab; }
.ib-tcard:hover { border-color: rgba(124,58,237,.45); box-shadow: 0 14px 30px -24px rgba(76,39,170,.7); }
.ib-tcard.is-dragging,.ib-chip.is-dragging { opacity: .45; }
.ib-grip { margin-top: 6px; color: var(--mute-3); font-size: 17px; }
.ib-tname { min-width: 0; padding-top: 5px; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.ib-tact { display: flex; }
.ib-tline { grid-column: 2/-1; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.ib-who { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 10px; border: 1px solid transparent; border-radius: 999px; background: var(--ib-green-bg); color: var(--ib-green); font-size: 13px; font-weight: 700; }
.ib-who:has(.ib-iconbtn) { padding-right: 1px; }
.ib-who.is-ora { border: 1px dashed rgba(124,58,237,.45); background: var(--lav-50); color: #5b22a6; }
.ib-who > .ph { font-size: 13px; }
.ib-who .ib-iconbtn { width: 24px; height: 24px; color: inherit; font-size: 12px; }
.ib-addwho { display: grid; flex: none; width: 28px; height: 28px; place-items: center; padding: 0; border: 1px dashed rgba(124,58,237,.5); border-radius: 999px; background: #fff; color: var(--lav-600); font-size: 15px; }
.ib-addwho:hover { border-style: solid; background: var(--lav-50); }
.ib-addwho[aria-expanded="true"] { border: 1px solid transparent; background: var(--lav-600); color: #fff; }
.ib-tstate { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; color: var(--ib-amber); font-size: 13px; font-weight: 650; }
.ib-tstate.is-grey { color: var(--mute-2); }
.ib-tinfo { grid-column: 2/-1; display: grid; gap: 5px; margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--lav-50); color: var(--ink-3); font-size: 13px; cursor: default; }
.ib-tinfo b { color: var(--ink); }
.ib-tinfo small { color: var(--mute-2); font-size: 12.5px; }
.ib-tinfo q { display: block; margin-top: 2px; color: var(--mute); font-style: italic; }
.ib-titem > .ib-picker { margin-top: 6px; }

.ib-toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom,0px)); z-index: 160;
  display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); box-sizing: border-box;
  padding: 10px 12px 10px 16px; border-radius: 12px; background: #1c1330; color: #fff;
  font: 14.5px/1.4 var(--sans); box-shadow: 0 18px 40px -18px rgba(20,10,40,.8); transform: translateX(-50%);
}
.ib-toast[hidden] { display: none; }
.ib-toast button { flex: none; min-height: 32px; padding: 0 12px; border: 1px solid rgba(255,255,255,.4); border-radius: 8px; background: transparent; color: #fff; font: 700 14px var(--sans); cursor: pointer; }

/* Viewers read the board: no selection, no drag, no edits. */
.ib-panel.is-readonly .ib-person { grid-template-columns: 0 minmax(170px,1fr) minmax(150px,.85fr) minmax(190px,1.15fr) 0; padding-left: 8px; }

@media (max-width: 1320px) {
  .ib-board { grid-template-columns: minmax(0,1fr) 340px; }
  .ib-person,.ib-panel.is-readonly .ib-person { grid-template-columns: 36px minmax(0,1fr) minmax(0,.9fr) 32px; grid-template-areas: "sel id role del" ". drop drop drop"; }
}
@media (max-width: 1040px) {
  .ib-board { grid-template-columns: minmax(0,1fr); }
  .ib-head { position: static; }
  .ib-tray { position: static; max-height: none; }
  .ib-tlist { overflow: visible; }
}
@media (max-width: 820px) {
  .ib-head,.ib-board { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 640px) {
  .ib-person,.ib-panel.is-readonly .ib-person { grid-template-columns: 36px minmax(0,1fr) 32px; grid-template-areas: "sel id del" ". role role" ". drop drop"; }
  .ib-mark { display: none; }
  .ib-head h2 { flex: 1 1 100%; font-size: 21px; }
  .ib-head-actions { width: 100%; }
  .ib-panel .ib-build { flex: 1 1 auto; justify-content: center; min-width: 0; white-space: normal; }
  .ib-role-picker .ib-picks { grid-template-columns: minmax(0,1fr); }
}
@media (pointer: coarse) {
  .ib-iconbtn { width: 36px; height: 36px; }
  .ib-who .ib-iconbtn { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .ib-person { transition: none; }
  .ib-spin,.ib-skeleton span { animation: none; }
}

/* "Could be": a person ORA thinks an interviewee may be, linked only when someone picks it. */
.ib-who.is-maybe { border: 1px dashed #cbd5e1; background: #fff; color: var(--mute, #475569); cursor: pointer; font-family: inherit; }
.ib-who.is-maybe:hover, .ib-who.is-maybe:focus-visible { color: var(--lav-600, #7c3aed); border-color: var(--lav-400, #a78bfa); }

/* Before the first read: the title waits with the board, so neither face flashes. */
.ib-title-wait { display: inline-block; width: min(320px, 50vw); height: 22px; border-radius: 8px; vertical-align: middle; background: linear-gradient(90deg,rgba(255,255,255,.5),rgba(237,233,254,.9),rgba(255,255,255,.5)); background-size: 200% 100%; animation: ibShimmer 1.4s ease-in-out infinite; }

/* ---- Interview Briefs: the people with a Brief, by business unit, with their reporting lines ---- */
.bc-sep { width: 1px; height: 26px; margin: 0 4px; background: var(--ib-line); }
.bc-hint { color: var(--mute-2); font-size: 13.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bc-validate {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1px solid rgba(124,58,237,.34); border-radius: 12px; background: linear-gradient(145deg,#fff,var(--lav-50));
  color: var(--ib-deep); font-size: 15px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 12px 26px -20px rgba(76,39,170,.8),inset 0 1px 0 #fff;
  transition: transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.bc-validate i { color: var(--lav-600); font-size: 18px; }
.bc-validate:hover { border-color: rgba(124,58,237,.6); background: #fff; transform: translateY(-1px); box-shadow: 0 16px 30px -20px rgba(76,39,170,.9),0 0 0 4px rgba(167,139,250,.14); }

/* clip, not hidden: a hidden box can still be scrolled sideways by focus or scrollIntoView, past its oversized glow. */
.bc-canvas { position: relative; overflow: hidden; overflow: clip; padding: 18px 18px 22px; border-radius: 0 0 20px 20px; }
.bc-canvas::before {
  content: ""; position: absolute; inset: -18%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(28% 32% at 18% 22%,rgba(167,139,250,.17),transparent 70%),
    radial-gradient(26% 30% at 80% 30%,rgba(129,140,248,.12),transparent 70%),
    radial-gradient(30% 30% at 52% 92%,rgba(196,181,253,.18),transparent 70%);
  filter: blur(24px); animation: meshDrift 38s ease-in-out infinite;
}
.bc-canvas > .ib-line { position: relative; z-index: 1; margin: 0 4px 14px; }
.bc-units { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px; }
.bc-unit {
  display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto 1fr; gap: 12px; flex: 1 1 auto; min-width: min(100%,300px); max-width: 100%;
  padding: 14px 16px 20px; border: 1px solid rgba(255,255,255,.88); border-radius: 20px;
  background: linear-gradient(160deg,rgba(255,255,255,.64),rgba(247,244,255,.4));
  box-shadow: 0 18px 44px -38px rgba(50,27,78,.55),inset 0 1px 0 rgba(255,255,255,.9);
}
.bc-unit-head { display: flex; align-items: baseline; gap: 9px; padding: 0 4px; }
.bc-unit-head h3 { color: var(--ink-2); font: 700 17px/1.25 var(--serif); letter-spacing: -.01em; }
.bc-unit-head small { color: var(--mute-3); font-size: 13px; font-weight: 650; white-space: nowrap; }
.bc-forest { position: relative; min-width: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 18px 22px; }
.bc-lines { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bc-lines path { fill: none; stroke: rgba(124,58,237,.34); stroke-width: 1.6; stroke-linecap: round; }
.bc-lines path.is-ghost { stroke: rgba(132,112,184,.42); stroke-dasharray: 3 5; }
.bc-lines circle { fill: #fff; stroke: rgba(124,58,237,.45); stroke-width: 1.4; }
.bc-lines circle.is-ghost { stroke: rgba(132,112,184,.5); }
.bc-node { position: relative; z-index: 1; display: flex; flex: 0 1 auto; flex-direction: column; align-items: center; min-width: 0; max-width: 100%; }
.bc-kids { display: flex; justify-content: center; align-items: flex-start; gap: 18px; min-width: 0; max-width: 100%; padding-top: 38px; }

.bc-av { position: relative; display: grid; flex: none; width: 40px; height: 40px; place-items: center; border-radius: 50%; background: rgba(105,47,173,.12); color: #652aaa; font-size: 13px; font-weight: 800; }
.bc-card {
  position: relative; display: grid; gap: 10px; width: 258px; max-width: 100%; box-sizing: border-box; padding: 12px 13px 11px;
  border: 1px solid rgba(255,255,255,.92); border-radius: 16px;
  background: linear-gradient(150deg,rgba(255,255,255,.97),rgba(250,248,254,.88));
  box-shadow: 0 16px 34px -26px rgba(48,26,73,.55),inset 0 1px 0 #fff;
  transition: transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.bc-card:focus-visible { outline: 3px solid rgba(93,40,239,.34); outline-offset: 2px; }
.bc-card.is-open:hover { transform: translateY(-2px); border-color: rgba(167,139,250,.6); box-shadow: 0 22px 40px -24px rgba(76,39,170,.55),0 0 0 4px rgba(167,139,250,.14); }
.bc-top { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 10px; align-items: center; }
.bc-id { display: grid; min-width: 0; }
.bc-name,.ib-panel .bc-open { overflow: hidden; color: var(--ink); font-size: 15px; font-weight: 750; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.ib-panel .bc-open { padding: 0; border: 0; background: none; text-align: left; }
/* The name's button covers the card, so the whole card opens the Brief; Rebuild sits above it. */
.bc-open::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 16px; }
.ib-panel .bc-open:focus-visible { outline: none; }
.bc-open:focus-visible::after { outline: 3px solid rgba(93,40,239,.34); outline-offset: 2px; }
.bc-card.is-open:hover .bc-open { color: var(--lav-600); }
.bc-title { display: -webkit-box; overflow: hidden; color: var(--mute); font-size: 13px; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bc-roles { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.bc-role { max-width: 100%; box-sizing: border-box; padding: 2px 9px; border: 1px solid var(--ib-line); border-radius: 10px; background: #fff; color: #4a3f5c; font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.bc-role.is-lead { border-color: transparent; background: var(--lav-100); color: var(--ib-deep); }
.bc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 9px; border-top: 1px solid var(--ib-line-soft); font-size: 13px; }
.bc-foot.is-stack { display: grid; gap: 7px; justify-content: stretch; }
.bc-meta { display: inline-flex; align-items: center; gap: 5px; color: var(--mute-2); font-weight: 600; white-space: nowrap; }
.bc-meta .ph { color: var(--lav-500); font-size: 14px; }
.bc-state { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; }
.bc-state .ph { font-size: 16px; }
.bc-state.is-ready { color: var(--ib-green); }
.bc-state.is-building { color: var(--lav-600); }
.bc-state.is-changed { color: var(--ib-amber); }
.bc-amber { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #d9930d; box-shadow: 0 0 0 3px rgba(217,147,13,.16); }
.ib-panel .bc-rebuild { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 34px; box-sizing: border-box; padding: 4px 10px; border: 1px solid rgba(166,107,23,.42); border-radius: 10px; background: var(--ib-amber-bg); color: var(--ib-amber); font: 700 12.5px var(--sans); text-align: left; }
.ib-panel .bc-rebuild:hover:not(:disabled) { border-color: rgba(166,107,23,.7); background: #fff; }
.ib-panel .bc-rebuild:disabled { cursor: default; opacity: .6; }
.bc-rebuild .bc-why { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: 650; }
.bc-rebuild .bc-go { display: inline-flex; flex: none; align-items: center; gap: 4px; font-weight: 750; }
.bc-rebuild .ph { font-size: 14px; }
.bc-card.is-building { border-color: rgba(167,139,250,.42); animation: bcBreath 2.8s ease-in-out infinite; }
.bc-card.is-building .bc-av { background: rgba(124,58,237,.1); }

.bc-ghost {
  position: relative; display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 9px; align-items: center; width: 226px; max-width: 100%; box-sizing: border-box;
  padding: 9px 12px; border: 1.5px dashed rgba(132,112,184,.42); border-radius: 14px; background: rgba(255,255,255,.26); cursor: default;
}
.bc-ghost .bc-av { width: 34px; height: 34px; box-sizing: border-box; border: 1px dashed rgba(132,112,184,.55); background: transparent; color: var(--mute-2); font-size: 12px; }
.bc-ghost .bc-name { color: var(--ink-3); font-size: 14px; font-weight: 700; }
.bc-ghost .bc-title { color: var(--mute-2); font-size: 12.5px; -webkit-line-clamp: 1; }
.bc-ghost::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 5;
  padding: 5px 10px; border-radius: 8px; background: #1c1330; color: #fff; font: 600 12.5px/1.3 var(--sans); white-space: nowrap;
  opacity: 0; transform: translate(-50%,4px); transition: opacity .14s ease,transform .14s ease; pointer-events: none;
}
.bc-ghost:hover::after { opacity: 1; transform: translate(-50%,0); }

/* Motion: a new Brief floats in and lands with a lavender glow; it breathes while building; it pops when ready. */
@keyframes bcFloatIn { from { opacity: 0; transform: translateY(16px) scale(.97); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes bcLand {
  0% { box-shadow: 0 16px 34px -26px rgba(48,26,73,.55),0 0 0 0 rgba(167,139,250,0); }
  35% { box-shadow: 0 16px 34px -26px rgba(48,26,73,.55),0 0 0 5px rgba(167,139,250,.22),0 0 34px 6px rgba(167,139,250,.45); }
  100% { box-shadow: 0 16px 34px -26px rgba(48,26,73,.55),0 0 0 0 rgba(167,139,250,0); }
}
@keyframes bcBreath {
  0%,100% { box-shadow: 0 16px 34px -26px rgba(48,26,73,.55),0 0 0 0 rgba(167,139,250,0); }
  50% { box-shadow: 0 16px 34px -26px rgba(48,26,73,.55),0 0 0 3px rgba(167,139,250,.16),0 0 22px 0 rgba(167,139,250,.24); }
}
@keyframes bcReady {
  0% { box-shadow: 0 16px 34px -26px rgba(48,26,73,.55),0 0 0 0 rgba(31,109,76,0); }
  30% { box-shadow: 0 16px 34px -26px rgba(48,26,73,.55),0 0 0 4px rgba(31,109,76,.12),0 0 30px 2px rgba(167,139,250,.38); }
  100% { box-shadow: 0 16px 34px -26px rgba(48,26,73,.55),0 0 0 0 rgba(31,109,76,0); }
}
@keyframes bcPop { 0% { transform: scale(.3); } 70% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes bcFade { from { opacity: 0; } }
.bc-card.is-new { animation: bcFloatIn 520ms cubic-bezier(.2,.8,.2,1) var(--d,0ms) backwards,bcLand 1100ms ease-out calc(var(--d,0ms) + 340ms) backwards; }
.bc-card.is-new.is-building { animation: bcFloatIn 520ms cubic-bezier(.2,.8,.2,1) var(--d,0ms) backwards,bcLand 1100ms ease-out calc(var(--d,0ms) + 340ms) backwards,bcBreath 2.8s ease-in-out calc(var(--d,0ms) + 1440ms) infinite; }
.bc-ghost.is-new { animation: bcFloatIn 520ms cubic-bezier(.2,.8,.2,1) var(--d,0ms) backwards; }
.bc-unit.is-new { animation: bcFade 420ms ease var(--d,0ms) backwards; }
.bc-lines .is-new { animation: bcFade 620ms ease calc(var(--d,0ms) + 220ms) backwards; }
.bc-card.just-ready { animation: bcReady 1.1s ease-out; }
.bc-card.just-ready .bc-av .ib-dot,.bc-card.just-ready .bc-state { animation: bcPop .5s cubic-bezier(.2,.8,.2,1.3); }

/* ---- Validate people: the board as a modal over the Briefs ---- */
/* Under the person's workspace (z-index 60), so a Brief opened from the board shows on top. */
.vm-wrap { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; padding: 22px; background: rgba(34,25,42,.38); backdrop-filter: blur(9px); animation: vmFade .22s ease both; }
.vm-panel {
  display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); width: min(1480px,100%); height: min(960px,calc(100dvh - 44px));
  overflow: hidden; border: 1px solid rgba(255,255,255,.8); border-radius: 24px; background: rgba(250,249,253,.97);
  box-shadow: 0 34px 100px rgba(29,18,39,.28),inset 0 1px 0 rgba(255,255,255,.88);
  animation: vmIn .32s cubic-bezier(.2,.8,.2,1) both;
}
.vm-wrap.no-anim,.vm-wrap.no-anim .vm-panel { animation: none; }
.vm-wrap.is-leaving { animation: vmFadeOut .2s ease both; }
.vm-wrap.is-leaving .vm-panel { animation: vmOut .2s ease both; }
@keyframes vmFade { from { opacity: 0; } }
@keyframes vmFadeOut { to { opacity: 0; } }
@keyframes vmIn { from { opacity: 0; transform: translateY(14px) scale(.992); } }
@keyframes vmOut { to { opacity: 0; transform: translateY(8px) scale(.994); } }
.ib-panel .vm-close { display: grid; flex: none; width: 40px; height: 40px; place-items: center; padding: 0; border: 1px solid var(--ib-line); border-radius: 12px; background: #fff; color: var(--mute); font-size: 18px; }
.ib-panel .vm-close:hover { border-color: rgba(124,58,237,.45); color: var(--lav-600); }
.vm-panel .ib-head { position: static; border-radius: 24px 24px 0 0; background: rgba(255,255,255,.66); }
.vm-body { display: flex; flex-direction: column; min-height: 0; }
.vm-body > .ib-line { flex: none; }
.vm-panel .ib-board { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0,1fr); align-items: stretch; padding: 0 18px; }
.vm-panel .ib-col { position: relative; min-height: 0; overflow: auto; padding: 0 6px 24px 2px; margin-right: -8px; }
.vm-panel .ib-col > .ib-tools { position: sticky; top: 0; z-index: 6; margin: 0; padding: 16px 0 12px; background: linear-gradient(rgba(250,249,253,.98) 82%,rgba(250,249,253,0)); }
.vm-panel .ib-tray { position: static; max-height: none; min-height: 0; margin: 16px 0 18px; }

@media (max-width: 1040px) {
  .vm-body { overflow: auto; }
  .vm-panel .ib-board { flex: none; grid-template-rows: none; grid-auto-rows: max-content; align-content: start; padding: 0 14px 18px; }
  .vm-panel .ib-col { min-height: auto; overflow: visible; margin: 0; padding: 0; }
  .vm-panel .ib-tray { min-height: auto; margin: 0; }
}
@media (max-width: 900px) {
  .bc-hint,.bc-sep { display: none; }
}
@media (max-width: 640px) {
  .bc-panel .ib-head-actions { justify-content: flex-start; }
  .bc-validate { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 620px) {
  .vm-wrap { padding: 0; }
  .vm-panel { height: 100dvh; border-radius: 0; }
  .vm-panel .ib-head { border-radius: 0; }
  .bc-canvas { padding: 12px; }
  .bc-forest { flex-direction: column; align-items: stretch; }
  .bc-node { align-items: stretch; width: 100%; }
  .bc-kids { flex-direction: column; align-items: stretch; gap: 14px; width: 100%; box-sizing: border-box; padding: 14px 0 0 28px; }
  .bc-card,.bc-ghost { width: 100%; }
  .bc-unit { padding: 12px 12px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ib-title-wait { animation: none; }
  .bc-card,.bc-card.is-new,.bc-card.is-new.is-building,.bc-card.is-building,.bc-card.just-ready,.bc-card.just-ready .bc-av .ib-dot,
  .bc-card.just-ready .bc-state,.bc-ghost.is-new,.bc-unit.is-new,.bc-lines .is-new,.vm-wrap,.vm-panel,.vm-wrap.is-leaving,.vm-wrap.is-leaving .vm-panel { animation: none !important; }
  .bc-card,.bc-validate,.bc-ghost::after { transition: none; }
  .bc-canvas::before { animation: none; }
}

/* Custom role creation stays inside the existing role picker. */
.ib-custom-start { margin-top: 10px; }
.ib-custom-role { padding: 12px; min-width: 0; }
.ib-custom-role h4 { margin: 0 0 12px; font-size: 15px; color: var(--ink); }
.ib-custom-field { display: grid; gap: 5px; margin-bottom: 12px; font-size: 12px; color: var(--ink); }
.ib-custom-field input,.ib-custom-field textarea { box-sizing: border-box; width: 100%; border: 1px solid var(--ib-line); border-radius: 9px; background: var(--paper,#fff); color: var(--ink); padding: 9px 10px; font: inherit; font-size: 13px; }
.ib-custom-field textarea { min-height: 70px; resize: vertical; }
.ib-custom-field input:focus-visible,.ib-custom-field textarea:focus-visible { outline: 2px solid #b49bdc; outline-offset: 2px; }
.ib-custom-role details { margin-bottom: 12px; }
.ib-custom-role summary { cursor: pointer; font-size: 12px; color: var(--ib-purple,#6520ab); margin-bottom: 10px; }
.ib-custom-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; justify-content: flex-end; align-items: center; padding-top: 8px; }
.ib-custom-error { color: #9d3b35; font-size: 12px; line-height: 1.45; }
.ib-role-picker:has(.ib-custom-role) { max-height: min(660px,75vh); overflow-y: auto; }

.ib-custom-note { color: var(--mute); font-size: 12px; line-height: 1.45; margin: 0 0 12px; }
.ib-custom-note:empty { display: none; }

.ib-role-picker [hidden] { display: none; }
.ib-unnamed-label { color: var(--ink); font-size: 13px; font-weight: 650; line-height: 1.4; padding: 2px 5px 4px; overflow-wrap: anywhere; }
.ib-custom-actions .btn { min-height: 36px; padding: 0 16px; }
.ib-custom-actions button:disabled { cursor: default; opacity: .65; }
.ib-custom-role h4 { overflow-wrap: anywhere; }

.ib-pick small { display: block; margin-top: 4px; font-size: 11px; line-height: 1.45; color: var(--mute); }