/* HooWoo personnel pages: expansions, form groups, the live check and the bracket editor. Colours and spacing come from app.css. */
.pe-counts { display: flex; flex-wrap: wrap; gap: 8px; }
.table tr.pe-sub > td { background: var(--surface-2); padding: 12px 14px; }
.pe-sub .table-wrap, .pe-drill .table-wrap { border: 0; max-height: none; background: transparent; }
.table th.pe-grp-head { text-align: center; border-bottom: 1px solid var(--line); }
.pe-report td:first-child, .pe-report th:first-child { white-space: nowrap; }
.pe-report td:first-child .chip { margin-left: 6px; }
.pe-drill { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pe-err { margin: 0; font-size: 13px; color: var(--bad-ink); }
.pe-err:empty { display: none; }
.pe-live { margin: 0; font-size: 13.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pe-live.ok { color: var(--ok-ink); }
.pe-live.bad { color: var(--bad-ink); }
.pe-grp { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pe-grp-title { margin: 0; font-size: 13px; font-weight: 500; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.pe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.pe-brk-list { display: flex; flex-direction: column; gap: 8px; }
.pe-brk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.pe-plan { align-self: flex-start; }
.pe-src { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.pe-pick { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.pe-pick-item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; text-align: left; font: inherit; color: var(--text);
  padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.pe-pick-item:hover { background: var(--surface-2); }
.pe-pick-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pe-pick-name { font-weight: 500; }
@media (max-width: 700px) {
  .pe-brk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pe-brk > .icon-btn { justify-self: end; }
}