/* /streams blocks (AK, Oct 24): the kinds explorer (views/partials/pm-types.ejs, .pty) and who each kind fits
   (views/partials/pm-fit.ejs, .pft). Brand tokens only: gold #FFC61E, ink #110A33, violet #341D99, lavender #DDD6FF,
   mist #F6F4FF, cream #FFF4D2, slate #5B6478, white. */

/* ---------- kinds explorer ---------- */
html body .pty { --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-move: cubic-bezier(.65, 0, .35, 1); --card: #fff; padding: 56px 0; background: #F6F4FF; color: #110A33; }
html body .pty--white { background: #fff; --card: #F6F4FF; }
html body .pty .section-header { margin-bottom: 32px; }
html body .pty__list { max-width: 1120px; margin: 0 auto; }
html body .pty__tab { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 18px; border: 0; border-radius: 16px; background: transparent; color: #110A33; font: inherit; text-align: left; cursor: pointer; transition: background-color .15s, box-shadow .15s; }
html body .pty__tab b { flex: 1; font: 700 20px/1.2 "Cabinet Grotesk", Cabinetgrotesk, "Cabinet Fallback", Arial, sans-serif; }
html body .pty__chev { flex: none; opacity: 0; transition: opacity .15s, transform .2s; }
html body .pty__tab[aria-expanded="true"] { background: var(--card); box-shadow: inset 0 0 0 1px #DDD6FF; }
html body .pty__tab[aria-expanded="true"] .pty__chev { opacity: 1; }
@media (hover: hover) and (pointer: fine) { html body .pty__tab:not([aria-expanded="true"]):hover { background: var(--card); } }
html body .pty__tab:focus-visible { outline: 2px solid #341D99; outline-offset: 2px; }
html body .pty__soon { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; background: #DDD6FF; color: #110A33; font: 800 12px/16px Manrope, Arial, sans-serif; letter-spacing: .02em; white-space: nowrap; vertical-align: middle; } /* W15: 12px floor (mobile audit) */
html body .pty__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 28px; border: 1px solid #DDD6FF; border-radius: 24px; background: var(--card); }
html body .pty__panel[hidden] { display: none; }
html body .pty__txt h3 { margin: 0; font: 700 30px/1.15 "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif; color: #110A33; }
html body .pty__line { margin: 10px 0 0; font: 600 17px/1.45 Manrope, Arial, sans-serif; color: #110A33; }
html body .pty__line a, html body .pty__gets a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #DDD6FF; text-decoration-thickness: 2px; }
html body .pty__gets { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
html body .pty__gets li { display: flex; align-items: flex-start; gap: 10px; margin: 0; font: 400 15px/1.45 Manrope, Arial, sans-serif; color: #110A33; }
html body .pty__gets svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: #FFC61E; color: #110A33; }
html body .pty__via { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 20px 0 0; font: 600 13px/1 Manrope, Arial, sans-serif; color: #5B6478; }
html body .pty__via b { padding: 6px 10px; border-radius: 999px; background: #DDD6FF; color: #110A33; font-weight: 800; }
/* the live feed */
html body .pty__feed { align-self: start; padding: 16px; border-radius: 18px; background: #110A33; color: #fff; box-shadow: 0 18px 40px -20px rgba(17, 10, 51, .5); }
html body .pty__fh { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 700 14px/1 Manrope, Arial, sans-serif; color: #DDD6FF; }
html body .pty__fh span { margin-left: auto; padding: 3px 8px; border-radius: 999px; background: rgba(255, 198, 30, .16); color: #FFC61E; font-size: 11px; font-weight: 800; }
html body .pty__live { width: 8px; height: 8px; border-radius: 50%; background: #FFC61E; animation: pty-pulse 1.6s ease-in-out 3; } /* ANIM-P4 Oct 27: three pulses, then the dot rests (about 5 s) */
@keyframes pty-pulse { 50% { box-shadow: 0 0 0 6px rgba(255, 198, 30, 0); opacity: .6; } }
html body .pty__feed ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
html body .pty__feed li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(221, 214, 255, .08); border: 1px solid rgba(221, 214, 255, .16); }
html body .pty__feed li:first-child { border-color: #FFC61E; background: rgba(255, 198, 30, .1); }
html body .pty__feed b { font: 700 14px/1.3 Manrope, Arial, sans-serif; color: #fff; }
html body .pty__feed span { grid-column: 1; font: 500 14px/1.35 Manrope, Arial, sans-serif; color: #DDD6FF; }
html body .pty__feed em { grid-column: 2; grid-row: 1; font: 600 12px/1.3 Manrope, Arial, sans-serif; font-style: normal; color: #DDD6FF; opacity: .7; }
/* ANIM-P4 Oct 27: oldest first, so the "now" row lands last, on top, like a new event arriving (was top to bottom, like a list loading) */
html body .pty__panel.is-play .pty__feed li { animation: pty-in 360ms var(--ease-out) both; animation-delay: calc(60ms + (var(--n) - 1 - var(--j)) * 160ms); }
@keyframes pty-in { from { opacity: 0; transform: translateY(-8px); } }
@media (min-width: 900px) {
  html body .pty__list.is-js { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); grid-template-rows: repeat(var(--n), auto) 1fr; column-gap: 24px; }
  html body .pty__list.is-js .pty__tab, html body .pty__list.is-js .pty__more { grid-column: 1; margin-bottom: 4px; }
  html body .pty__list.is-js .pty__panel { grid-column: 2; grid-row: 1 / -1; align-self: start; }
}
html body .pty__list:not(.is-js) .pty__tab { pointer-events: none; margin-top: 16px; }
@media (max-width: 899px) {
  html body .pty__chev { opacity: .6; transform: rotate(90deg); }
  html body .pty__tab[aria-expanded="true"] { border-radius: 16px 16px 0 0; }
  html body .pty__tab[aria-expanded="true"] .pty__chev { transform: rotate(-90deg); }
  html body .pty__list.is-js .pty__tab { margin-bottom: 4px; }
  html body .pty__list.is-js .pty__tab[aria-expanded="true"] { margin-bottom: 0; }
  html body .pty__list.is-js .pty__panel { grid-template-columns: minmax(0, 1fr); margin-bottom: 8px; padding: 6px 16px 18px; border-top: 0; border-radius: 0 0 16px 16px; }
  html body .pty__list.is-js .pty__txt h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  html body .pty__line { font-size: 16px; }
}

/* ---------- streams into your stack (GTM engineering and RevOps) ---------- */
html body .pft { --card: #fff; padding: 56px 0; background: #F6F4FF; color: #110A33; }
html body .pft--white { background: #fff; --card: #F6F4FF; }
html body .pft .section-header { margin-bottom: 32px; }
html body .pft__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) 88px minmax(0, 1fr); grid-auto-rows: auto; row-gap: 10px; align-items: stretch; max-width: 1080px; margin: 0 auto; }
html body .pft__row, html body .pft__more { grid-column: 1; grid-row: calc(var(--i) + 1); }
html body .pft__wire { grid-column: 2; grid-row: calc(var(--i) + 1); position: relative; align-self: center; height: 2px; background: #DDD6FF; }
html body .pft__wire i { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #341D99; opacity: 0; }
html body .pft__wire.is-on { background: #341D99; }
html body .pft__wire.is-on i { animation: pft-flow 900ms cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes pft-flow { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(78px); opacity: 0; } } /* ANIM-P6 Oct 27: transform, not left (the wire is 88px, the bead 10px) */
html body .pft__wire--more { background: repeating-linear-gradient(90deg, #DDD6FF 0 6px, transparent 6px 12px); }
html body .pft__row { padding: 16px 18px; border: 1px solid #DDD6FF; border-radius: 18px; background: var(--card); transition: border-color .3s, box-shadow .3s, transform .3s; }
html body .pft__row.is-on, html body .is-all .pft__row { border-color: #FFC61E; box-shadow: 0 10px 24px -14px rgba(17, 10, 51, .3); transform: translateX(4px); }
html body .pft__name { display: flex; align-items: center; gap: 8px; margin: 0; }
html body .pft__name b { font: 700 19px/1.2 "Cabinet Grotesk", Cabinetgrotesk, "Cabinet Fallback", Arial, sans-serif; color: #110A33; }
html body .pft__name span { padding: 2px 8px; border-radius: 999px; background: #DDD6FF; color: #110A33; font: 800 12px/16px Manrope, Arial, sans-serif; white-space: nowrap; } /* ANIM-P4 Oct 27: the same lavender "Coming soon" chip as the explorer (was an ink chip, 11px) */
html body .pft__line { margin: 6px 0 0; font: 400 15px/1.45 Manrope, Arial, sans-serif; color: #5B6478; }
html body .pft__row.is-on .pft__line { color: #110A33; }
/* F7 Oct 28: hover, focus or tap a stream to hold it (same as the pipeline stages on /pi, /vidar and /intent) */
html body .pft__row { cursor: pointer; }
html body .pft__row:focus-visible { outline: 2px solid #341D99; outline-offset: 3px; }
html body .pft__more { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 18px; border: 1px dashed #DDD6FF; border-radius: 18px; font: 600 15px/1.3 Manrope, Arial, sans-serif; color: #5B6478; }
html body .pft__more span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #DDD6FF; color: #341D99; font-weight: 800; }
html body .pft__stack { grid-column: 3; grid-row: 1 / span var(--n); display: flex; flex-direction: column; padding: 24px; border-radius: 24px; background: #110A33; color: #fff; box-shadow: 0 18px 40px -20px rgba(17, 10, 51, .55); }
html body .pft__k { margin: 0 0 14px; font: 800 12px/16px Manrope, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #FFC61E; }
html body .pft__stack ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
html body .pft__stack li { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 12px 14px; border-radius: 14px; background: rgba(221, 214, 255, .08); border: 1px solid rgba(221, 214, 255, .16); }
html body .pft__stack li b { font: 700 17px/1.2 "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif; color: #fff; }
html body .pft__stack li span { font: 500 14px/1.35 Manrope, Arial, sans-serif; color: #DDD6FF; }
html body .pft__via { align-self: flex-start; margin: 14px 0 0; padding: 6px 12px; border-radius: 999px; background: #FFC61E; color: #110A33; font: 800 13px/1 Manrope, Arial, sans-serif; }
html body .pft__down { display: none; }
@media (max-width: 899px) {
  html body .pft__grid { grid-template-columns: minmax(0, 1fr); }
  html body .pft__row, html body .pft__more { grid-column: 1; grid-row: auto; }
  html body .pft__wire { display: none; }
  html body .pft__row.is-on { transform: none; }
  html body .pft__down { display: grid; place-items: center; justify-self: center; width: 44px; height: 44px; border-radius: 50%; background: #FFC61E; color: #110A33; }
  html body .pft__down svg { width: 22px; height: 22px; }
  html body .pft__stack { grid-column: 1; grid-row: auto; }
}
@media (max-width: 599px) {
  html body .pty, html body .pft { padding: 40px 0; }
  html body .pft__row { padding: 14px; }
  html body .pft__stack { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html body .pty__panel.is-play .pty__feed li, html body .pty__live, html body .pft__wire.is-on i { animation: none; }
  html body .pft__row { transition: none; }
}

/* the "more on the way" placeholder under the list (AK Oct 24: never a fixed count of streams) */
html body .pty__more { display: flex; align-items: center; gap: 10px; min-height: 52px; margin: 0; padding: 8px 18px; border: 1px dashed #DDD6FF; border-radius: 16px; font: 600 15px/1.3 Manrope, Arial, sans-serif; color: #5B6478; }
html body .pty__more span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #DDD6FF; color: #341D99; font-weight: 800; }
@media (max-width: 899px) { html body .pft__down { order: 98; } html body .pft__stack { order: 99; } }

/* W15 Oct 26 PM (audit S2): the retired "Streams for GTM Engineering and RevOps" section folded in. Each panel carries what a team
   builds on that stream (.pty__build), and the "Your Stack" destination card (.pty__stack) closes the explorer, once. No eyebrow:
   the card's name is a real heading. Brand tokens only; text on ink is white / lavender (>= 11:1). */
html body .pty__build { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; padding-top: 16px; border-top: 1px dashed #DDD6FF; font: 600 15px/1.45 Manrope, Arial, sans-serif; color: #110A33; text-wrap: pretty; }
html body .pty__build svg { flex: none; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: #110A33; color: #FFC61E; }
html body .pty__stack { display: grid; grid-template-columns: minmax(0, 180px) repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 12px; max-width: 1120px; margin: 24px auto 0; padding: 16px; border-radius: 24px; background: #110A33; color: #fff; box-shadow: 0 18px 40px -20px rgba(17, 10, 51, .55); }
html body .pty__sh { display: flex; align-items: center; margin: 0; padding: 0 8px; font: 700 22px/1.15 "Cabinet Grotesk", Cabinetgrotesk, "Cabinet Fallback", Arial, sans-serif; color: #fff; text-wrap: balance; }
html body .pty__stack ul { display: contents; list-style: none; margin: 0; padding: 0; }
html body .pty__stack li { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 12px 14px; border-radius: 14px; background: rgba(221, 214, 255, .08); border: 1px solid rgba(221, 214, 255, .16); }
html body .pty__stack li b { font: 700 17px/1.2 "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif; color: #fff; }
html body .pty__stack li span { font: 500 14px/1.35 Manrope, Arial, sans-serif; color: #DDD6FF; }
@media (max-width: 899px) {
  html body .pty__stack { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
  html body .pty__sh { grid-column: 1 / -1; padding: 4px 4px 0; font-size: 20px; }
}
@media (max-width: 599px) {
  html body .pty__build { font-size: 14px; }
  html body .pty__stack { gap: 8px; padding: 14px; }
  html body .pty__stack li { padding: 10px 12px; }
  html body .pty__stack li b { font-size: 16px; }
  html body .pty__stack li span { font-size: 13px; }
}
@media (max-width: 379px) {
  html body .pty__stack { grid-template-columns: minmax(0, 1fr); }
}