/* Universal Pipeline Export extends the shared product-page layout. */
.pipeline-document, .pipeline-document body { overflow-x: clip; }
.pipeline-page { max-width: 1180px; }
.pipeline-head { grid-template-columns: minmax(0, 1fr) minmax(350px, 440px); column-gap: 2rem; align-items: center; }
.pipeline-head > div { min-width: 0; }
.pipeline-head > div > p:not(.product-kind, .product-summary) { max-width: 65ch; margin: 0 0 1.25rem; }
.pipeline-video { grid-column: 2; grid-row: 1; width: 100%; margin: 0; }
.pipeline-video video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border: 1px solid var(--hf-border-subtle); border-radius: var(--hf-radius-lg); }
.pipeline-section > p { max-width: 76ch; }
#routes { scroll-margin-top: 5.5rem; }
.pipeline-legend { max-width: 95ch; margin-bottom: 0.35rem; font-size: 0.84rem; line-height: 1.4; }
.pipeline-read-guide { color: var(--hf-text-dim); font-size: 0.75rem; }
.pipeline-read-guide summary { width: fit-content; cursor: pointer; }
.pipeline-read-guide p { max-width: 90ch; margin: 0.35rem 0 0.55rem; color: var(--hf-text-normal); }
.pipeline-matrix-key { display: flex; flex-wrap: wrap; gap: 0.25rem 0.8rem; margin: 0.55rem 0 0.3rem; color: var(--hf-text-normal); font-size: 0.72rem; }
.pipeline-matrix-key > span { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.pipeline-table-scroll { max-width: 100%; max-height: min(78vh, 850px); overflow: auto; overscroll-behavior-inline: contain; margin: 0.55rem 0 1.5rem; border: 1px solid var(--hf-border-subtle); border-radius: var(--hf-radius); background: var(--hf-bg-base); }
.pipeline-table-scroll:focus-visible { outline: 2px solid var(--hf-accent); outline-offset: 2px; }
.pipeline-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.76rem; line-height: 1.2; }
.pipeline-table thead { position: sticky; top: 0; z-index: 3; }
.pipeline-table th, .pipeline-table td { padding: 0.3rem 0.42rem; border-bottom: 1px solid var(--hf-border-subtle); text-align: left; vertical-align: top; }
.pipeline-table thead th { color: var(--hf-text-bright); font-weight: 700; background: var(--hf-bg-muted); white-space: nowrap; }
.pipeline-table thead th { vertical-align: middle; }
.pipeline-table thead th { border-bottom-color: var(--hf-border); }
.pipeline-table tbody tr:last-child > * { border-bottom: 0; }
.pipeline-table tbody tr:hover > * { background: var(--hf-bg-muted); }
.pipeline-table tbody th { min-width: 175px; max-width: 195px; font-weight: 700; }
.pipeline-table tbody th a { display: block; }
.pipeline-table tbody th a.pipeline-companion-link { margin-top: 0.2rem; color: var(--hf-text-dim); font-size: 0.74rem; font-weight: 500; }
.pipeline-table tbody th a.pipeline-demo-link { margin-top: 0.2rem; font-size: 0.74rem; font-weight: 650; }
.pipeline-table .pipeline-kind-cell { min-width: 110px; color: var(--hf-text-bright); font-weight: 650; }
.pipeline-table .pipeline-kit-cell { min-width: 94px; }
.pipeline-table .pipeline-compat-cell { width: 500px; min-width: 500px; max-width: 500px; }
.pipeline-compat-matrix { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.pipeline-compat-tile { box-sizing: border-box; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 2.45rem; padding: 2px 3px; border: 1px solid var(--hf-border); border-radius: 1px; text-align: center; color: var(--hf-text-bright); background: var(--hf-bg-muted); }
.pipeline-compat-tile strong { font-size: 0.58rem; line-height: 1.03; font-weight: 650; overflow-wrap: anywhere; }
.pipeline-compat-tile-measured { border-color: var(--hf-accent); color: #101607; background: var(--hf-accent); }
.pipeline-compat-tile-target { border-color: var(--hf-accent); color: #e3f5c7; background: color-mix(in srgb, var(--hf-accent) 24%, #151912); }
.pipeline-compat-tile-unknown { border-color: #555; color: #d0d0d0; background: #292929; }
.pipeline-compat-tile-no { position: relative; border-color: #555; color: #b3b3b3; background: #222; }
.pipeline-compat-tile-no::after { content: ''; position: absolute; inset: 0; background: linear-gradient(140deg, transparent 48%, #777 49%, #777 51%, transparent 52%); pointer-events: none; }
.pipeline-compat-tile-failed { border-color: #ef8c8c; color: #fff; background: #8e3039; }
.pipeline-compat-notes { margin-top: 0.2rem; color: var(--hf-text-dim); }
.pipeline-compat-notes summary, .pipeline-feature-detail summary { width: fit-content; cursor: pointer; }
.pipeline-compat-notes summary { font-size: 0.67rem; }
.pipeline-compat-notes ul { margin: 0.4rem 0 0; padding-left: 1.1rem; color: var(--hf-text-normal); }
.pipeline-compat-notes li + li { margin-top: 0.22rem; }
.pipeline-table .pipeline-category-cell { min-width: 115px; max-width: 125px; color: var(--hf-text-dim); }
.pipeline-table .pipeline-host-cell { min-width: 135px; max-width: 165px; }
.pipeline-table .pipeline-language-cell { min-width: 110px; max-width: 145px; }
.pipeline-table .pipeline-output-cell { min-width: 160px; max-width: 190px; }
.pipeline-table .pipeline-feature-cell { min-width: 62px; text-align: center; }
.pipeline-table .pipeline-feature-detail { min-width: 92px; max-width: 115px; text-align: left; }
.pipeline-feature-detail summary { display: inline-flex; align-items: center; gap: 0.35rem; list-style: none; color: var(--hf-text-normal); font-size: 0.73rem; }
.pipeline-feature-detail summary::-webkit-details-marker { display: none; }
.pipeline-feature-detail summary::after { content: '⌄'; color: var(--hf-text-dim); }
.pipeline-feature-detail details[open] summary::after { content: '⌃'; }
.pipeline-feature-expanded { display: block; margin-top: 0.4rem; color: var(--hf-text-normal); text-align: left; }
.pipeline-table .pipeline-evidence-cell { min-width: 245px; max-width: 285px; }
.pipeline-matrix-mark { position: relative; display: inline-block; flex: none; width: 1rem; height: 1rem; border: 1.5px solid var(--hf-text-dim); border-radius: 2px; vertical-align: -0.08rem; }
.pipeline-matrix-key .pipeline-matrix-mark { width: 0.72rem; height: 0.72rem; }
.pipeline-matrix-mark-measured, .pipeline-matrix-mark-yes { border-color: var(--hf-accent); background: var(--hf-accent); }
.pipeline-matrix-mark-partial { border-color: var(--hf-accent); background: linear-gradient(135deg, var(--hf-accent) 50%, transparent 50%); }
.pipeline-matrix-mark-target { border-color: var(--hf-accent); box-shadow: inset 0 0 0 2px var(--hf-bg-base); }
.pipeline-matrix-mark-no::after { content: ''; position: absolute; width: 140%; height: 1.5px; top: 50%; left: -20%; transform: rotate(-45deg); background: var(--hf-text-dim); }
.pipeline-matrix-mark-failed { border-color: #f47c7c; background: #f47c7c; }
.pipeline-matrix-mark-failed::before, .pipeline-matrix-mark-failed::after { content: ''; position: absolute; top: 50%; left: 50%; width: 70%; height: 1.5px; background: #161616; transform: translate(-50%, -50%) rotate(45deg); }
.pipeline-matrix-mark-failed::after { transform: translate(-50%, -50%) rotate(-45deg); }
.pipeline-table .pipeline-sticky { position: sticky; left: 0; z-index: 1; background: var(--hf-bg-base); box-shadow: 1px 0 var(--hf-border-subtle); }
.pipeline-table thead .pipeline-sticky { z-index: 4; background: var(--hf-bg-muted); }
.pipeline-table tbody tr:hover .pipeline-sticky { background: var(--hf-bg-muted); }
.pipeline-badge { display: inline-block; padding: 0.08rem 0.38rem; border: 1px solid var(--hf-border); border-radius: var(--hf-radius-pill); white-space: nowrap; color: var(--hf-text-normal); font-size: 0.7rem; font-weight: 650; }
.pipeline-badge-registered-kit, .pipeline-badge-yes { border-color: var(--hf-accent); color: var(--hf-accent); }
.pipeline-badge-partial { color: var(--hf-text-bright); }
.pipeline-badge-unknown { color: var(--hf-text-dim); }
.pipeline-badge-unlisted-registry-entry { color: var(--hf-text-bright); }
.pipeline-badge-no-kit-yet, .pipeline-badge-demo, .pipeline-badge-under-construction { color: var(--hf-text-dim); }
.pipeline-table-note { color: var(--hf-text-dim); font-size: 0.9rem; }
@media (max-width: 1020px) {
  .pipeline-head { grid-template-columns: minmax(0, 1fr); }
  .pipeline-video { grid-column: 1; grid-row: 2; max-width: 600px; margin-top: 1.5rem; }
}
@media (max-width: 620px) {
  .pipeline-page { padding-inline: 1rem; }
  .pipeline-head h1 { font-size: 2.05rem; }
  .pipeline-video { grid-column: 1; grid-row: auto; }
  .pipeline-table tbody th { min-width: 180px; max-width: 180px; }
}