/* Pipeline case study. Shared rails come from project.css. */
.pl-case .proj-row > *, .pl-case .proj-summary { min-width: 0; }
.pl-case { --pl-hover: #1D4ED8; }
[data-theme="dark"] .pl-case { --pl-hover: #8fa8ff; }
.pl-case .proj-string-row:hover .proj-sec-label,
.pl-case .proj-string-row:hover .proj-id,
.pl-case .proj-next-title:hover,
.pl-case .proj-back:hover { color: var(--pl-hover); }
.pl-case .proj-next .label { font-size: 11px; }
.pl-case .chord-instr { text-transform: none; letter-spacing: normal; }

/* Draft markers: easy to spot, easy to strip. */
.pl-tag { display: inline-block; padding: 1px 6px; border-radius: 4px; background: #ffeeb0; color: #5f4700; font-size: 11px; font-weight: 500; line-height: 1.5; white-space: normal; vertical-align: 1px; }
.pl-draftnote { grid-column: 1 / -1; margin-top: 8px; padding: 12px 14px; border: 1px dashed color-mix(in srgb, var(--mid-500) 55%, transparent); font-size: 12px; line-height: 1.7; color: var(--mid-500); }
.pl-draftnote strong { color: var(--black); font-weight: 500; }

/* The hero slot fills the lead frame, so it holds the real image's 16:9. */
.pl-lead.proj-ph { background: none; }
.pl-lead.proj-lead-img { height: auto; aspect-ratio: 16 / 9; }
.pl-lead .proj-ph-box { box-sizing: border-box; height: 100%; border-radius: inherit; }

/* Placeholders hold the shape of the media they stand in for. */
.pl-case .proj-ph-box { box-sizing: border-box; min-height: 0; aspect-ratio: 16 / 10; }
.pl-case .pl-ph--169 .proj-ph-box { aspect-ratio: 16 / 9; }
.pl-ph-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(24px, 3vw, 36px); }
.pl-case .pl-ph-pair .proj-ph { margin-top: 0; }
.pl-case .proj-row-media > .pl-ph-pair:first-child { margin-top: 0; }

/* The decisions read as a list, with the shared divider lines removed. */
.pl-case .proj-prose > .proj-list { margin-top: 0; border-top: 0; }
.pl-case .proj-list li { padding: 0; border-bottom: 0; }
.pl-case .proj-list li + li { margin-top: 18px; }

/* The process flowchart: lanes on a shared three-column grid, in the page's own tokens. */
.pl-flow { --pl-edge: color-mix(in srgb, var(--mid-500) 40%, transparent); --pl-ink: var(--mid-500); margin: 0; padding: clamp(16px, 2vw, 24px); background: color-mix(in srgb, var(--mid-500) 7%, transparent); border-radius: var(--media-radius); }
.pl-flow-main { position: relative; padding-right: 40px; }
.pl-flow-data { margin-top: 40px; padding-top: 28px; padding-right: 40px; border-top: 1px dashed var(--pl-edge); }
.pl-lane, .pl-link { display: grid; grid-template-columns: 64px repeat(3, minmax(0, 1fr)); column-gap: 10px; }
.pl-lane { align-items: stretch; }
.pl-case .pl-lane-label { margin: 0; padding-top: 14px; font-size: 10px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mid-500); }
.pl-card, .pl-bar-card { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 13px 14px; border-radius: 12px; font-size: 12px; line-height: 1.4; color: var(--pl-ink); }
.pl-card { background: var(--white); border: 1px solid var(--pl-edge); }
.pl-card strong, .pl-bar-card strong { font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--black); }
.pl-bar-card { grid-column: 2 / -1; background: color-mix(in srgb, var(--mid-500) 22%, transparent); }
.pl-lane--data .pl-card { position: relative; border-style: dashed; }
/* the data steps run left to right */
.pl-lane--data .pl-card + .pl-card::before { content: ""; position: absolute; top: 50%; left: -11px; width: 10px; height: 1px; background: var(--mid-500); }
.pl-lane--data .pl-card + .pl-card::after { content: ""; position: absolute; top: calc(50% - 3px); left: -5px; border-block: 3.5px solid transparent; border-left: 5px solid var(--mid-500); }
/* the arrows between lanes sit under the first columns */
.pl-link { min-height: 34px; align-items: stretch; }
.pl-link-cell { position: relative; display: flex; align-items: center; justify-content: flex-start; padding-left: calc(50% + 12px); font-size: 11px; line-height: 1.2; color: var(--mid-500); white-space: nowrap; }
.pl-link-cell:first-child { grid-column: 2; }
.pl-arrow { position: absolute; top: 5px; bottom: 5px; left: 50%; width: 1px; background: var(--mid-500); }
.pl-arrow::after { content: ""; position: absolute; left: -3px; bottom: 0; border-inline: 3.5px solid transparent; border-top: 5px solid var(--mid-500); }
.pl-arrow--up { background: none; border-left: 1px dashed var(--mid-500); width: 0; }
.pl-arrow--up::after { bottom: auto; top: 0; left: -4px; border-top: 0; border-bottom: 5px solid var(--mid-500); }
/* feedback runs up the right side, from Learn back into the product spec */
.pl-flow-loop { position: absolute; top: 38px; bottom: 40px; right: 16px; width: 14px; border: 1px dashed var(--mid-500); border-left: 0; }
.pl-flow-loop::before { content: ""; position: absolute; top: -4px; left: -1px; border-block: 3.5px solid transparent; border-right: 5px solid var(--mid-500); }
.pl-flow-loop span { position: absolute; top: 50%; left: 100%; margin-left: 3px; font-size: 11px; line-height: 1; white-space: nowrap; color: var(--mid-500); writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); }
.pl-flow-dot { position: absolute; right: -3px; width: 5px; height: 5px; border-radius: 50%; background: var(--black); animation: pl-feedback 7s linear infinite; }
@keyframes pl-feedback { from { top: 100%; } to { top: 0; } }
@media (prefers-reduced-motion: reduce) { .pl-flow-dot { display: none; } }
.pl-flow-note { display: none; }
.pl-case .pl-flow figcaption { margin-top: 18px; letter-spacing: normal; text-transform: none; }

@media (max-width: 760px) {
  .pl-flow-main, .pl-flow-data { padding-right: 0; }
  .pl-flow-loop { display: none; }
  .pl-lane, .pl-link { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .pl-case .pl-lane-label { padding-top: 0; }
  .pl-lane > span.pl-lane-label { display: none; }
  .pl-bar-card, .pl-link-cell:first-child { grid-column: 1; }
  .pl-link-cell { justify-content: flex-start; min-height: 30px; padding-left: 24px; }
  .pl-arrow { left: 10px; }
  .pl-lane--data .pl-card + .pl-card::before, .pl-lane--data .pl-card + .pl-card::after { display: none; }
  .pl-case .pl-flow-note { display: block; margin: 14px 0 0; font-size: 11px; color: var(--mid-500); }
}

@media (max-width: 599px) {
  .pl-ph-pair { grid-template-columns: minmax(0, 1fr); }
  /* On phones the flow keeps its shape and step names; the card details drop away. */
  .pl-lane { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .pl-lane-label, .pl-bar-card { grid-column: 1 / -1; }
  .pl-card > span { display: none; }
  .pl-card, .pl-bar-card { padding: 9px 11px; border-radius: 9px; }
  .pl-card strong, .pl-bar-card strong { font-size: 13px; }
  .pl-link { min-height: 0; }
  .pl-link-cell { min-height: 24px; }
  .pl-flow-data { margin-top: 24px; padding-top: 18px; }
}

/* A slot leading a row lines up with the copy beside it. */
.pl-case .proj-row-media > .proj-ph:first-child { margin-top: 0; }