/* Pipeline rebuild, 2026-09-23. A new numbered port file (not port-w1.css,
   which an earlier lane's spec already names as its own) so this screen's
   CSS lives on its own without touching app.css or any file another lane
   might be mid-edit. Tokens only from app.css/themes.css, same discipline as
   every port-w*.css file.

   Zach, 2026-09-23 17:26 CT, on a screenshot of this exact screen: "very
   clear old build" — filled cards, a big "Move to…" dropdown on every row,
   and an ALL-CAPS AI headline. Same standing note from earlier that day
   (tradescom-ui-okay-not-great, 12:19 CT): "I don't like these little text
   box looking things" — no filled grey or blue boxes, plain rows. This file
   rebuilds the Jobs board to that look: a plain divided row (name, one line
   of the work in plain words, the facts in grey, a small stage-word pill —
   never a coloured background) and a quiet "…" menu for the move, inside
   collapsible sections that always show their own count. `pipeline.js`'s
   `softenDisplay()` handles the ALL-CAPS/em-dash half of this at render time;
   the CSS below is the other half. */

/* --- the sections: collapsible, no card fill ----------------------------- */

.pl-cols {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.pl-coldet {
  border: 0;
}
.pl-coldet > summary {
  list-style: none;
  cursor: pointer;
}
.pl-coldet > summary::-webkit-details-marker {
  display: none;
}
.pl-colsum {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}
.pl-colsum .pl-col-title {
  flex: 1 1 auto;
  margin: 0;
}
.pl-colsum-chev {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: var(--text-body);
  transition: transform var(--dur-fast) var(--ease-out);
}
.pl-coldet[open] > .pl-colsum .pl-colsum-chev {
  transform: rotate(90deg);
}

/* --- the rows: a hairline under each one, never a filled box ------------- */

.pl-rows {
  display: flex;
  flex-direction: column;
}
.pl-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.pl-rows > .pl-row:last-child {
  border-bottom: 0;
}
.pl-row-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  text-align: left;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.pl-row-main:active {
  opacity: 0.7;
}
.pl-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  width: 100%;
}
/* The facts line: the stage pill, then the plain-grey facts beside it. Wraps
   under the pill on a narrow phone rather than truncating "PO 1888 · Austin
   · Ben" down to nothing useful. */
.pl-row-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.pl-row-stage {
  flex: 0 0 auto;
}
.pl-row-facts {
  color: var(--muted);
  font-size: var(--text-caption);
  line-height: var(--lh-snug);
}
.pl-row-side {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
}
.pl-row-nomove {
  padding: 0 var(--space-2);
  white-space: nowrap;
}
/* The quiet "…" menu (`nu.js`'s own classes: `.nu-menu`, `.nu-menu-btn`,
   `.nu-menu-body`, `.nu-menu-item`) — a small icon-sized touch target, not a
   control sized to fill the row. */
.pl-row-menu {
  min-width: var(--tap-min);
  min-height: var(--tap-min);
}