/* process.css - Processes: the list, a custom process board and its setup.
   Linked from index.html. Every colour is a token; nothing here names a hue.

   THE BOARD SCROLLS SIDEWAYS AND THE PAGE DOES NOT. A board with five stages
   is wider than a laptop, and a page that grows horizontally takes its
   heading and its navigation with it. So the columns are a scroll container
   of their own with a fixed column width, which is also what keeps a column
   readable when a team writes long titles. */

.pb-board {
  display: flex;
  gap: var(--s-5);
  overflow-x: auto;
  padding-bottom: var(--s-4);
  align-items: flex-start;
}

.pb-col {
  flex: 0 0 18rem;
  min-width: 0;
  background: var(--c-surface-2);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* A finished or dropped column is quieter than a live one: the eye should
   land on the work in progress. */
.pb-col[data-kind="done"],
.pb-col[data-kind="dropped"] { background: var(--c-surface); }
.pb-col[data-archived="1"] { border-style: dashed; }

.pb-col-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.pb-col-title {
  font-size: var(--t-sm);
  font-weight: 600;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.pb-col-count {
  font-variant-numeric: tabular-nums;
  color: var(--c-text-2);
  font-size: var(--t-xs);
}

.pb-col-empty {
  margin: 0;
  color: var(--c-text-3);
  font-size: var(--t-xs);
  padding: var(--s-3) 0;
}

.pb-cards { display: flex; flex-direction: column; gap: var(--s-3); }

.pb-card {
  background: var(--c-surface);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* A closed card is dimmed rather than hidden: it is the record of what the
   team finished, and a board that drops it looks like work that never was. */
.pb-card[data-closed="1"] { opacity: 0.72; }

.pb-card-title {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Full-strength text, not the secondary tone. At 11px the secondary colour
   is 3.88:1 against the card, and scripts/audit-geometry.mjs fails the build
   under 4.5:1 for body text. The hierarchy on a card comes from weight and
   from the chips, not from a colour nobody with low vision can read. */
.pb-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  font-size: var(--t-xs);
  color: var(--c-text);
}

.pb-card-age { font-variant-numeric: tabular-nums; }

.pb-card-actions { display: flex; gap: var(--s-2); }

/* Inside a view a board is a reading, so its columns are narrower and its
   cards are one line each. */
.pb-board-section .pb-col { flex-basis: 14rem; }

.pb-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }

.pb-mini-item {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  font-size: var(--t-xs);
  padding: var(--s-2);
  background: var(--c-surface);
  border-radius: var(--r-sm);
}

.pb-mini-title { overflow-wrap: anywhere; }
.pb-mini-owner { color: var(--c-text-3); white-space: nowrap; }

/* ------------------------------------------------------------ the list */

/* 24px is the link floor scripts/audit-geometry.mjs enforces, and a 16px
   line of text in a table row is under it however wide the row is. */
.pr-name {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-weight: var(--t-semibold);
  margin-right: var(--s-2);
}

/* A key/value block for the process's own name, code and domain. */

.ps-kv { display: grid; gap: var(--s-4); }
.ps-kv-row { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--s-4); }
.ps-kv-row dt { color: var(--c-text-2); font-size: var(--t-sm); }
.ps-kv-row dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.pb-more { margin-top: var(--s-5); }

/* ------------------------------------------------------------ the setup */

.ps-identity-actions { display: flex; gap: var(--s-3); margin-top: var(--s-4); flex-wrap: wrap; }

/* The code beside a stage name is the thing that never changes; it reads as
   machinery, not as a second name. */
.ps-code {
  margin-left: var(--s-2);
  font-size: var(--t-xs);
  color: var(--c-text-3);
}

.ps-row-actions { display: inline-flex; gap: var(--s-2); justify-content: flex-end; flex-wrap: wrap; }

.ps-stages tr[data-archived="1"] td { color: var(--c-text-3); }