/*
 * Examples player in #wiecej (player.js + scenarios.js). Desktop: the list on the left, the scene on
 * the right in two columns (what came in + what the assistant does | the result card). Narrow: the list
 * scrolls sideways above the scene, one column, and the steps fold away when the result arrives.
 * Yellow only on the decision bar.
 */
.pl { position: relative; display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 32px; margin-top: 52px; align-items: start; }

/* ---------- the list ---------- */
.pl__list { border-top: 1px solid var(--ink); }
.pl__tab {
  position: relative; display: flex; align-items: center; width: 100%; min-height: 76px; padding: 14px 18px;
  border: 0; border-bottom: 1px solid var(--pale-line); border-radius: 0; background: transparent; text-align: left;
  font-size: 16px; font-weight: 500; line-height: 1.42; letter-spacing: -0.01em; color: var(--ink-2);
  transition: background-color 160ms, color 160ms;
}
.pl__tab b { font-weight: 800; color: var(--ink); transition: color 160ms; }
.pl__tab:hover { background: #ffffff8c; color: var(--ink); }
.pl__tab[aria-selected="true"] { background: var(--white); color: var(--ink); }
.pl__tab[aria-selected="true"] b { color: var(--blue); }
.pl__tab:focus-visible { outline-offset: -3px; }
/* progress of the scene that is playing: a thin line along the bottom */
.pl__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; }
.pl__tab[aria-selected="true"] .pl__bar { opacity: 1; }
.no-motion .pl__bar { display: none; }

/* ---------- the scene ---------- */
.pl__main { position: relative; min-width: 0; }
.pl__stage { position: relative; padding: 20px 24px 24px; border-radius: var(--r-panel); background: var(--white); box-shadow: var(--shadow-card); transition: min-height 0.5s var(--ease); }
.pl__stage--probe { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; z-index: -1; }
.pl__stage--probe, .pl__stage--probe * { transition: none !important; animation: none !important; }
.pl__top { min-height: 34px; padding-right: 130px; margin-bottom: 12px; }
.pl__niche { padding-top: 6px; font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--muted); }
.pl__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.pl__cols, .pl__top { transition: opacity 0.35s ease; }
.pl__stage.is-leaving .pl__cols, .pl__stage.is-leaving .pl__top { opacity: 0; }

.pl__pause {
  position: absolute; right: 16px; top: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 6px 12px 6px 10px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--white);
  font-size: 13px; font-weight: 600; color: var(--muted); transition: color 160ms, border-color 160ms;
}
.pl__pause:hover { color: var(--blue); border-color: var(--blue-line); }
.pl__pause i { width: 10px; height: 11px; border-inline: 3px solid currentColor; }
.pl__pause[aria-pressed="true"] i { width: 0; height: 0; border-inline: 0; border-block: 6px solid transparent; border-left: 10px solid currentColor; margin-left: 1px; }

/* what came in: a message (customer left, yours right) or a note from a program */
.js .pl__in, .js .pl__pic, .js .pl__file, .js .pl__trigger, .js .pl__think, .js .pl__steps li {
  opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.55s var(--ease);
}
.js .pl__pic { transform: scale(0.97); }
.pl__in.is-in, .pl__pic.is-in, .pl__file.is-in, .pl__trigger.is-in, .pl__think.is-in, .pl__steps li.is-in { opacity: 1; transform: none; }
.pl__in { padding: 10px 14px 12px; border-radius: 7px 7px 7px 0; background: var(--pale); }
.pl__in--in { margin-right: 28px; }
.pl__in--out { margin-left: 28px; background: var(--pale-2); border-radius: 7px 7px 0 7px; }
.pl__in--note { border-radius: 7px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.pl__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--muted); }
.pl__meta b { font-weight: 700; color: var(--ink); }
.pl__meta time { margin-left: auto; font-weight: 500; }
.pl__pic { position: relative; margin: 8px 0 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 9px; background: var(--pale-2); box-shadow: inset 0 0 0 1px rgba(23, 44, 66, 0.08); }
.pl__pic img { width: 100%; height: 100%; object-fit: cover; }
.pl__ph { display: none; }
/* until the photo exists: a calm placeholder with what it shows */
.pl__pic.is-missing img { display: none; }
.pl__pic.is-missing .pl__ph {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center;
  background: repeating-linear-gradient(135deg, var(--pale-2) 0 12px, #d3def5 12px 24px); font-size: 13px; font-weight: 600; color: var(--muted);
}
.pl__text { position: relative; margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.pl__ghost { color: transparent; } /* keeps the space (and the text for screen readers) while it types */
.pl__ink { position: absolute; inset: 0; }
.pl__ink.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -0.17em; background: var(--blue); animation: plCaret 0.9s steps(1) infinite; }
.pl__file { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 11px 6px 9px; border-radius: var(--r-btn); background: var(--white); font-size: 13px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); }
.pl__file i { width: 13px; height: 16px; flex: none; border-radius: 2px 5px 2px 2px; background: #b8587e; }
.pl__trigger { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--blue); }
.pl__trigger::before, .pl__trigger::after { content: ""; flex: 1 1 16px; height: 1px; background: var(--blue-line); }
.pl__trigger span { flex: 0 1 auto; text-align: center; }

/* the assistant at work */
.pl__think { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 12px; font-size: 14px; font-weight: 700; line-height: 1.35; }
.pl__eyes { display: block; flex: none; width: 40px; }
.pl__eyes .glasses { width: 100%; height: auto; }
.pl__eyes .pupil { transition: transform 260ms ease-out; }
.pl__stage[data-phase="think"] .pl__eyes .pupil { animation: scan 0.9s ease-in-out infinite; }
.pl__status { display: grid; }
.pl__status > span { grid-area: 1 / 1; transition: opacity 0.3s; }
.pl__ready { opacity: 0; display: inline-flex; align-items: center; gap: 8px; }
.pl__ready::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--decision); box-shadow: 0 0 0 1px #d9c341; }
.pl__stage[data-phase="out"] .pl__busy, .pl__stage[data-phase="decide"] .pl__busy { opacity: 0; }
.pl__stage[data-phase="out"] .pl__ready, .pl__stage[data-phase="decide"] .pl__ready { opacity: 1; }

.pl__fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.5s var(--ease); }
.pl__foldin { min-height: 0; overflow: hidden; }
.pl__steps { display: flex; flex-direction: column; gap: 9px; padding: 4px 0 2px; }
.pl__steps li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.pl__dot { width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--blue-soft); border-top-color: var(--blue); animation: plSpin 0.8s linear infinite; }
.pl__steps li.is-done .pl__dot {
  animation: none; border-color: var(--blue); background: var(--blue) center / 11px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.pl__step { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.45; }
.pl__src { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
/* a tiny page with lines: „this is where it comes from” */
.pl__src::before {
  content: ""; display: inline-block; width: 10px; height: 12px; margin-right: 6px; vertical-align: -1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12' fill='none' stroke='%23526478' stroke-width='1.1' stroke-linejoin='round'%3E%3Cpath d='M1.5.6h4.7L8.6 3v8.4H1.5z'/%3E%3Cpath d='M6.1.6v2.6h2.5M3.2 6.2h3.6M3.2 8.5h3.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* the fold toggle exists only on narrow screens */
.pl__more { display: none; }

/* the result card: a skeleton while the assistant works, then it fills in */
.pl__cardwrap { display: grid; grid-template-rows: 1fr; }
.pl__cardin { min-height: 0; }
.pl__card {
  overflow: hidden; border-radius: var(--r-card); background: var(--white); box-shadow: 0 0 0 1px var(--line), var(--shadow-card);
  opacity: 0; transform: translateY(10px); transition: opacity 0.45s ease, transform 0.6s var(--ease);
}
.pl__stage[data-phase="think"] .pl__card, .pl__stage[data-phase="out"] .pl__card, .pl__stage[data-phase="decide"] .pl__card { opacity: 1; transform: none; }
.pl__head { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.pl__head h3 { display: grid; font-size: 15px; font-weight: 700; line-height: 1.35; letter-spacing: -0.015em; }
.pl__head h3 > span { grid-area: 1 / 1; transition: opacity 0.3s; }
.pl__h-wait { color: var(--muted); }
.pl__h-done { opacity: 0; }
.pl__stage[data-phase="out"] .pl__h-wait, .pl__stage[data-phase="decide"] .pl__h-wait { opacity: 0; }
.pl__stage[data-phase="out"] .pl__h-done, .pl__stage[data-phase="decide"] .pl__h-done { opacity: 1; }
.pl__ring { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--blue-soft); border-top-color: var(--blue); animation: plSpin 0.8s linear infinite; }
.pl__stage[data-phase="decide"] .pl__ring { width: 9px; height: 9px; margin-inline: 4px 5px; border: 0; background: var(--decision); box-shadow: 0 0 0 1px #d9c341; animation: none; }
.pl__rows { padding: 2px 16px; }
.pl__row { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.45; }
.pl__row:last-child { border-bottom: 0; }
.pl__row dt { font-weight: 600; color: var(--muted); }
.pl__row dd { margin: 0; font-weight: 600; }
.pl__flag {
  display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 6px; border-radius: 50%; vertical-align: -2px;
  background: var(--badge, #e5484d); color: #fff; font-size: 11px; font-style: normal; font-weight: 800; line-height: 1;
  opacity: 0; transform: scale(0.4); transition: opacity 0.3s, transform 0.45s var(--pop);
}
.pl__row.is-flag .sk.is-on { color: var(--ink); }
.pl__stage[data-phase="decide"] .pl__flag { opacity: 1; transform: none; }
.pl__label { margin-bottom: 4px; font-size: 12.5px; font-weight: 700; line-height: 1.4; color: var(--muted); }
.pl__drafts { margin: 0 16px; padding: 9px 0 8px; border-top: 1px solid var(--line); }
.pl__drafts li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-block: 3px; font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.pl__drafts small { flex: none; padding: 1px 7px; border-radius: 4px; background: var(--pale); font-size: 11.5px; font-weight: 700; color: var(--muted); opacity: 0; transition: opacity 0.3s; }
.pl__drafts .sk.is-on + small { opacity: 1; }
.pl__draft { margin: 0 16px; padding: 9px 0 14px; border-top: 1px solid var(--line); }
.pl__dtext { font-size: 14px; line-height: 1.55; text-wrap: pretty; }
/* placeholder bars: the text is there (so the card keeps its size), but hidden until it fills in */
.sk { border-radius: 3px; color: transparent; background-color: var(--pale); -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: color 0.35s ease, background-color 0.35s ease; }
.sk.is-on { color: inherit; background-color: transparent; }
.pl__decision { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 9px 12px 9px 16px; background: var(--blue-soft); transition: background-color 0.4s ease; }
.pl__dnote { font-size: 13.5px; font-weight: 700; line-height: 1.35; color: var(--muted); transition: color 0.3s; }
.pl__ok {
  display: inline-grid; place-items: center; flex: none; min-width: 72px; min-height: 38px; padding: 0 16px; border-radius: var(--r-btn);
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap;
  opacity: 0; transform: scale(0.8); transition: opacity 0.3s, transform 0.5s var(--pop);
}
.pl__stage[data-phase="decide"] .pl__decision { background: var(--decision); }
.pl__stage[data-phase="decide"] .pl__dnote { color: var(--ink); }
.pl__stage[data-phase="decide"] .pl__ok { opacity: 1; transform: none; }

.pl__note { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 16px; margin-top: 26px; font-size: 14px; color: var(--muted); text-align: center; }
.pl__note .text-link { color: var(--blue); font-size: 14px; }

@keyframes plSpin { to { transform: rotate(360deg); } }
@keyframes plCaret { 50% { opacity: 0; } }

/* ---------- responsive ---------- */
@media (max-width: 1300px) {
  .pl { grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: 28px; }
  .pl__tab { font-size: 15px; min-height: 72px; padding-inline: 14px; }
  .pl__stage { padding-inline: 20px; }
  .pl__cols { gap: 22px; }
}
/* the list goes on top and scrolls sideways */
@media (max-width: 1180px) {
  .pl { --gut: 32px; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 40px; }
  .pl__list {
    display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gut)); padding: 2px var(--gut) 6px; scroll-padding-inline: var(--gut); border-top: 0;
  }
  .pl__list::-webkit-scrollbar { display: none; }
  .pl__list li { flex: 0 0 min(250px, 70%); scroll-snap-align: start; }
  .pl__tab { height: 100%; min-height: 70px; padding: 12px 14px; border: 1px solid var(--pale-line); border-radius: var(--r-card); background: #ffffff80; overflow: hidden; font-size: 14.5px; }
  .pl__tab[aria-selected="true"] { border-color: var(--white); box-shadow: var(--shadow-card); }
  .pl__bar { bottom: 0; }
}
@media (max-width: 960px) {
  .pl { --gut: 24px; }
}
/* one column: the result comes in under the steps, and the steps fold away */
@media (max-width: 760px) {
  .pl__cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pl__cardwrap { grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease); }
  .pl__cardin { overflow: hidden; padding: 12px 2px 2px; margin-inline: -2px; }
  .pl__stage[data-phase="out"] .pl__cardwrap, .pl__stage[data-phase="decide"] .pl__cardwrap { grid-template-rows: 1fr; }
  .pl__stage[data-phase="think"] .pl__card { opacity: 0; }
  .pl__stage[data-phase="out"]:not(.show-steps) .pl__fold, .pl__stage[data-phase="decide"]:not(.show-steps) .pl__fold { grid-template-rows: 0fr; }
  .pl__more {
    display: none; align-items: center; gap: 8px; min-height: 40px; margin-top: 2px; padding: 0; border: 0; background: none;
    font-size: 13.5px; font-weight: 700; color: var(--blue);
  }
  .pl__more i { width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.25s; }
  .pl__more[aria-expanded="true"] i { margin-top: 3px; transform: rotate(-135deg); }
  .pl__stage[data-phase="out"] .pl__more, .pl__stage[data-phase="decide"] .pl__more { display: inline-flex; }
}
@media (max-width: 600px) {
  .pl { --gut: 20px; margin-top: 32px; }
  .pl__stage { margin-inline: -20px; padding: 16px 16px 20px; border-radius: 0; box-shadow: none; }
  .pl__pause { right: -4px; top: 12px; }
  .pl__top { margin-bottom: 10px; padding-right: 116px; }
  .pl__in--in { margin-right: 18px; }
  .pl__in--out { margin-left: 18px; }
  .pl__text { font-size: 14.5px; }
  .pl__pic { aspect-ratio: 2 / 1; }
  .pl__pic img { object-position: 50% 35%; }
  .pl__step { font-size: 14px; }
  .pl__row { grid-template-columns: 76px minmax(0, 1fr); font-size: 13px; }
  .pl__decision { padding-left: 14px; }
  .pl__note { margin-top: 22px; }
}