/* The Sessions board (board.js): a column per phase, a card per session. */
html { --col-queued: 148, 148, 148; --col-working: 22, 128, 243; --col-needs: 229, 162, 60; --col-review: 168, 120, 240; --col-merged: 63, 191, 135; --col-done: 120, 170, 130; --col-failed: 242, 104, 111; }

#view-page[data-page="sessions"][data-view="board"] .page-inner { max-width: none; height: 100%; display: flex; flex-direction: column; }
.board-wrap { flex: 1; min-height: 0; display: flex; }
.board { flex: 1; min-height: 0; display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 12px; scroll-snap-type: x proximity; }
.bcol { flex: 0 0 272px; min-height: 0; display: flex; flex-direction: column; border-radius: 12px; background: rgba(var(--col), .07); scroll-snap-align: start; }
.bcol[data-column="queued"] { --col: var(--col-queued); }
.bcol[data-column="working"] { --col: var(--col-working); }
.bcol[data-column="needs"] { --col: var(--col-needs); }
.bcol[data-column="review"] { --col: var(--col-review); }
.bcol[data-column="merged"] { --col: var(--col-merged); }
.bcol[data-column="done"] { --col: var(--col-done); }
.bcol[data-column="failed"] { --col: var(--col-failed); }
.bcol-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 6px; }
.bcol-name { font-size: 12px; line-height: 18px; font-weight: 600; padding: 1px 8px; border-radius: 6px; background: rgba(var(--col), .22); color: var(--text); }
.bcol-count { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.bcol-cards { flex: 1; min-height: 60px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 8px 10px; }
.bcol-empty { font-size: 12px; color: var(--text-4); padding: 10px 4px; }
.bcol-more { align-self: flex-start; }

.bcard { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-3); cursor: pointer; text-align: left; }
.bcard:hover { box-shadow: inset 0 0 0 1px var(--border-2); }
.bcard:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.bcard-title { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.bcard-line { font-size: 12px; line-height: 17px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.bcard-line.live { color: var(--text); font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 11.5px; }
.bcard-line.live::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--blue); animation: pulse 1.4s ease-in-out infinite; vertical-align: 1px; }
.bcard[data-column="failed"] .bcard-line { color: var(--danger); }
.bcard-ask { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 8px; background: rgba(var(--col-needs), .12); }
.bcard[data-column="review"] .bcard-ask { background: rgba(var(--col-review), .12); }
.bcard-ask-what { font-size: 12px; line-height: 17px; color: var(--text); overflow-wrap: anywhere; font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
.bcard[data-column="review"] .bcard-ask-what { font-family: inherit; }
.bcard-ask-what .plus { color: var(--success); }
.bcard-ask-what .minus { color: var(--danger); }
.bcard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bcard-actions .btn:disabled { cursor: default; }
/* A session's pull requests on its card: one line each. */
.bcard-pulls { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bcard-pull { display: flex; min-width: 0; }
.bcard-flag { font-size: 12px; line-height: 18px; font-weight: 500; color: var(--text-2); }
.bcard-flag[data-tone="danger"] { color: var(--danger); }
.bcard-more { font-size: 11px; color: var(--text-3); }
.bcard-todos { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.bcard-todos .progress { flex: 1; }
.bcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; line-height: 16px; color: var(--text-3); }
.bcard-harness { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.bcard-harness span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcard-harness svg { flex: none; }
.bcard-when { flex: none; }
.bcard-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.btag { font-size: 11px; line-height: 16px; padding: 0 6px; border-radius: 5px; background: var(--fill); color: var(--text-2); }
.btag.project { background: rgba(var(--col-review), .18); color: var(--text); }
.btag.warn { background: rgba(var(--col-needs), .2); color: var(--text); }

@media (max-width: 767px) {
  .board { gap: 10px; scroll-snap-type: x mandatory; }
  .bcol { flex-basis: 84vw; }
  /* On a phone a column with nothing in it is a screen of nothing: only the ones in use are shown. */
  .board[data-none="false"] .bcol[data-empty="true"] { display: none; }
  .bcard-actions .btn { min-height: 44px; flex: 1; }
  .bcard-flag { flex: none; }
  .bcol-more { min-height: 44px; }
}