/* DNEG AI Roadmap: css/views/pipeline.css
   The By pipeline step lens (.lens-pipeline): the strip with a heat dot per step (inside the open "The pipeline" fold), the legend, the
   table of every step (a folded block) and the pager of one step (in the head's tools row). Builds on the ported .steps / .step /
   .legend components in site.css. The brief and the folds are the shared kit styles. Tokens only. */

.lens-pipeline .pl-stripbox { margin-top: 1.4rem; padding: 18px 18px 14px; }
.lens-pipeline .lk-mbody > .pl-stripbox { margin-top: 0; }
.lens-pipeline .pl-scroll { overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.lens-pipeline .pl-strip { min-width: 1120px; }

/* phase labels above the dots, one grid cell per step so they line up */
.lens-pipeline .pl-phases { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 4px; margin-bottom: .75rem; }
.lens-pipeline .pl-phase { padding: 0 2px .35rem; text-align: center; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 45%, var(--line)); line-height: 1.25; }

/* the strip itself: --n columns, the dot row is 42px high so the connecting line runs through every dot centre */
.lens-pipeline .pl-steps { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin: 0; row-gap: 0; }
.lens-pipeline .pl-steps::before { display: block; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: 20px; }
.lens-pipeline .pl-step { display: block; padding: 0 2px 8px; border-radius: 10px; color: inherit; text-decoration: none; }
.lens-pipeline .pl-step .dot { position: relative; width: var(--s, 32px); height: var(--s, 32px); margin: calc((42px - var(--s, 32px)) / 2) auto;
  font-size: .78rem; font-weight: 500; color: var(--fg); }
/* heat: --hp is the share of accent colour in the dot, and --s its size; the selected step keeps the ported .now look */
.lens-pipeline .pl-step:not(.now) .dot { background: color-mix(in srgb, var(--accent) var(--hp, 0%), var(--bg2)); border-color: color-mix(in srgb, var(--accent2) var(--hp, 0%), var(--line)); }
.lens-pipeline .pl-step.gap .dot { border-style: dashed; color: var(--muted); }
.lens-pipeline .pl-step .lbl { display: block; margin: .05rem -6px 0; font-size: .72rem; line-height: 1.25; overflow-wrap: anywhere; }
.lens-pipeline .pl-step:hover .lbl, .lens-pipeline .pl-step.now .lbl { color: var(--fg); }
.lens-pipeline .pl-step.now .lbl { font-weight: 600; }
.lens-pipeline .pl-step:hover .dot { border-color: var(--accent2); }
.lens-pipeline .pl-step:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }

.lens-pipeline .pl-legend { margin-top: .8rem; gap: 6px 18px; align-items: center; }
.lens-pipeline .pl-legend i { margin-right: 6px; vertical-align: middle; }
.lens-pipeline .pl-legend .lg0 { width: 11px; height: 11px; background: var(--bg2); border: 1px dashed var(--line); }
.lens-pipeline .pl-legend .lg1 { width: 14px; height: 14px; background: color-mix(in srgb, var(--accent) 40%, var(--bg2)); border: 1px solid color-mix(in srgb, var(--accent2) 40%, var(--line)); }
.lens-pipeline .pl-legend .lg2 { width: 18px; height: 18px; background: color-mix(in srgb, var(--accent) 90%, var(--bg2)); border: 1px solid var(--accent2); }
.lens-pipeline .pl-legend .pl-keys { margin-left: auto; }

/* the head's tools row: the pager of one step (the steps before and after, all steps), then the shared Filter and Show everything buttons */
.lens-pipeline .pl-pager { display: contents; }
/* breathing room between the note under the brief and the first fold */
.lens-pipeline .lk-note, .lens-pipeline > .note { margin-bottom: 1.2rem; }
.lens-pipeline .btn.small.off { opacity: .4; cursor: default; }
.lens-pipeline .btn.small.off:hover { border-color: var(--line); }

/* the table of every step */
.lens-pipeline .pl-tablecard { margin-top: 1rem; padding: 0; overflow: hidden; }
.lens-pipeline .pl-tablescroll { overflow-x: auto; }
.lens-pipeline .pl-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .9rem; }
.lens-pipeline .pl-table th, .lens-pipeline .pl-table td { padding: 9px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.lens-pipeline .pl-table tbody tr:last-child th, .lens-pipeline .pl-table tbody tr:last-child td { border-bottom: 0; }
.lens-pipeline .pl-table thead th { background: var(--panel2); color: var(--muted); font-size: .68rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.lens-pipeline .pl-table .num { text-align: right; }
.lens-pipeline .pl-grp th { padding: 6px 14px; background: color-mix(in srgb, var(--panel2) 65%, transparent); color: var(--accent2); font-size: .66rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.lens-pipeline .pl-row th { font-weight: 500; white-space: nowrap; }
.lens-pipeline .pl-row th a { color: var(--fg); text-decoration: none; }
.lens-pipeline .pl-row th a:hover { color: var(--accent2); text-decoration: underline; }
.lens-pipeline .pl-row:hover { background: color-mix(in srgb, var(--panel2) 50%, transparent); }
.lens-pipeline .pl-row.quiet th a, .lens-pipeline .pl-row.quiet td { color: var(--muted); }
.lens-pipeline .pl-cov { white-space: nowrap; width: 1%; }
.lens-pipeline .pl-cov .num { display: inline-block; min-width: 2ch; text-align: right; }
.lens-pipeline .pl-meter { display: inline-block; width: 96px; height: 8px; margin-right: 10px; border-radius: 4px; background: var(--panel2); overflow: hidden; vertical-align: middle; }
.lens-pipeline .pl-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.lens-pipeline .pl-top ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.lens-pipeline .pl-top li:not(:last-child)::after { content: "\00b7"; margin: 0 .55em; color: var(--muted); }
.lens-pipeline .pl-top a { color: var(--fg); text-decoration: none; }
.lens-pipeline .pl-top a:hover { color: var(--accent2); text-decoration: underline; }
.lens-pipeline .pl-more { font-size: .82rem; }

@media (max-width: 700px) {
  .lens-pipeline .pl-legend .pl-keys { display: none; }
  .lens-pipeline .pl-stripbox { padding: 14px 12px 10px; }
}
@media print {
  .lens-pipeline .pl-step .lbl { margin-left: 0; margin-right: 0; font-size: .62rem; }
  .lens-pipeline .pl-scroll { overflow: visible; }
  .lens-pipeline .pl-strip { min-width: 0; }
  .lens-pipeline .pl-legend .pl-keys, .lens-pipeline .pl-pager { display: none; }
  .lens-pipeline .pl-tablescroll { overflow: visible; }
  .lens-pipeline .pl-row { break-inside: avoid; }
}