/* Pipeline name pills -- see pipeline_name.js. The tag is the quiet half: a reader scanning a
   list of pipelines is comparing VALUES, and needs the tag only when two values could be
   confused. So the tag is small, upper-case and grey, and the value carries the weight. */
/* SIZE IS THE HOST'S CALL. The pills carry structure and hierarchy -- quiet tag, heavy value --
   but not one fixed scale: they sit in a 20px marketing card title and in a 12px table cell, and
   a component that hardcodes one of those is wrong on the other. The host sets these two, and
   `compact` is just a preset for the common in-a-table case. */
.pipe-name {
  --pipe-val-size: 13.5px;
  --pipe-tag-size: 9.5px;
  display: inline-flex; flex-wrap: wrap; align-items: stretch; gap: 0;
}
.pipe-pair {
  display: inline-flex; flex-direction: column; gap: 1px;
  padding: 0 12px; border-left: 1px solid var(--border-light, #e3e6ec);
}
.pipe-pair:first-child { padding-left: 0; border-left: none; }
.pipe-tag {
  font-size: var(--pipe-tag-size); font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: #9AA1B4; white-space: nowrap; line-height: 1.4;
}
.pipe-val {
  font-size: var(--pipe-val-size); font-weight: 600; color: var(--dark-navy, #2B3445);
  white-space: nowrap; line-height: 1.35;
}
/* Compact: inside a card or a table cell, where the pills must not set the row height. */
.pipe-name.compact { --pipe-val-size: 12.5px; --pipe-tag-size: 8.5px; }
.pipe-name.compact .pipe-pair { padding: 0 9px; }
.pipe-name.compact .pipe-tag { letter-spacing: .3px; }
/* Narrow screens: let the pairs wrap, and drop the rule on anything starting a new line. */
@media (max-width: 640px) {
  .pipe-pair { padding: 2px 8px; }

  /* ONE PAIR PER LINE below this width. Four pairs side by side do not fit any card on a phone:
     they wrapped raggedly, and because `.pipe-val` is `nowrap`, a long value ("Strep-Tactin XT",
     "Protein Characterization") pushed the card wider than the screen instead of breaking. So
     here the pills become a vertical list and the value is allowed to wrap -- a name may take
     four lines, which is cheaper than a page that scrolls sideways.
     `.stacked` is excluded: it is the table-cell variant, whose two-column grid is deliberately
     content-sized and lives inside a `.table-scroll` that already handles the overflow. */
  .pipe-name:not(.stacked) {
    display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%;
  }
  .pipe-name:not(.stacked) .pipe-pair,
  .pipe-name:not(.stacked) .pipe-pair:first-child {
    padding: 0 0 0 8px; border-left: 2px solid var(--border-light, #e3e6ec);
  }
  /* The whole point of the breakpoint: wrap rather than overflow. */
  .pipe-name:not(.stacked) .pipe-tag,
  .pipe-name:not(.stacked) .pipe-val { white-space: normal; overflow-wrap: anywhere; }
}

/* Stacked: a two-column grid, for a narrow column where four pairs side by side would either
   wrap raggedly or force the table wider than the page.
   TWO columns rather than one: a single column put four pairs on eight lines and took a project
   row from 67px to 156px, which spends more of the page than the two columns it replaced. Two
   columns is four lines and ~90px, and it still reads top-left to bottom-right in tag order.
   Same pills and the same weights either way, so the progress header and a table cell stay one
   component. */
/* SIZED BY ITS CONTENT, not by what a column has left over. `minmax(0, 1fr)` made these the
   only two columns that gave way: the grid shrank to whatever width remained, and the tags wrapped
   -- "BINDER PURIFICATION" over two lines, "Pairs Tested" over two -- so the cell that carries the
   most information was the one squeezed hardest, and the row grew taller to pay for it. max-content
   tracks and no wrapping let the pair decide its own width. The table then exceeds its container,
   which is what .table-scroll is for: scrolling sideways costs a gesture, reading a two-line tag
   costs every glance. */
.pipe-name.stacked {
  display: grid; grid-template-columns: repeat(2, max-content);
  gap: 6px 10px; align-items: start; width: max-content;
}
.pipe-name.stacked .pipe-pair {
  padding: 0 0 0 7px; border-left: 2px solid var(--border-light, #e3e6ec);
}
/* Through the variable, not as a literal: `.pipe-code` is sized from --pipe-tag-size, so a
   hardcoded font-size here broke the relationship between them in this variant only -- the code
   came out 2px bigger here and 0.5px bigger everywhere else. */
.pipe-name.stacked { --pipe-tag-size: 8px; }
.pipe-name.stacked .pipe-tag {
  line-height: 1.2; letter-spacing: .2px; white-space: nowrap;
}
.pipe-name.stacked .pipe-val { line-height: 1.2; white-space: nowrap; }

/* ── the workflow code ────────────────────────────────────────────────────────────────────
   Above the pairs, not among them: each pair names one dimension, this names the whole thing.
   Styled as a LABEL rather than as an identifier -- it was monospaced, which made a customer-
   facing name read like debug output. Same quiet register as `.pipe-tag`, one notch darker so it
   reads as the heading of the group rather than as another tag. */
.pipe-code {
  display: block; flex-basis: 100%; width: 100%;
  /* A RATIO of the tag, not a fixed offset. +0.5px is invisible at 9px, so whether the
     code looked bigger than "EXPRESSION SYSTEM" depended on which variant you were
     looking at. 1.25x reads as deliberately larger at every scale the hosts set. */
  font-size: calc(var(--pipe-tag-size) * 1.25); font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase;
  color: var(--pink, #E5308A); opacity: .85;
  margin-bottom: 4px; white-space: nowrap; line-height: 1.3;
}
.pipe-name.compact .pipe-code { margin-bottom: 3px; }
/* In the two-column grid it spans both columns, or it would sit in the first cell. */
.pipe-name.stacked .pipe-code { grid-column: 1 / -1; margin-bottom: 2px; }