/* 06 Shorts. Phone: headline, the request, the stage (a caption row over the wall), the two links, the judge's
   verdicts as a swipe row. Laptop: the wall on the left with the two links under it; the request, its reply, the live
   count and the verdicts on the right, like the rest of the conversation. The wall is laid out by js/06-shorts.js: before the run it is one frame of my video
   (.pk-whole); it dims and the 65 moments turn face up over it, each where its slice was, then it goes. Every tile
   sits at left/top 0 and is moved by transform only, between the wall of 65 and the end state (33 kept in a block at
   the top, best first – on a phone and a tablet the best three big at its head with their hooks; 32 thrown out in a
   loose pile at the bottom). Nothing reacts to the mouse. */
.pk { --pk-red: #ff7a63; --pk-tr: 9px; }
.pk-h2 { max-width: none; }
.pk-lead { max-width: 40em; }
.pk-main { display: grid; grid-template-columns: minmax(0, 1fr); }
.pk-ask { justify-self: end; margin-top: var(--s5); }
.pk-stage { margin-top: var(--s4); min-width: 0; }
.pk-br { display: none; }
@media (min-width: 720px) { .pk-br { display: inline; } }

/* The caption row: "My 47-minute video" until the frame breaks, then the three counters, each at its turn (no
   number is shown before it is true; the label leaves before the first counter comes, so they never overlap) */
.pk-cap { display: grid; align-items: center; min-height: 48px; margin: 0 0 var(--s2); }
.pk-cap > * { grid-area: 1 / 1; min-width: 0; }
.pk-src { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 20px; line-height: 1.2; font-weight: 600; color: var(--night-ink); transition: opacity .25s ease, transform .3s var(--ease); }
.pk-src .ico { flex: none; width: 24px; height: 24px; color: var(--yellow); }
html:not(.js) .pk-src { display: none; }
.pk.is-broken .pk-src { opacity: 0; transform: translateY(-6px); }
.pk-count { list-style: none; display: flex; flex-wrap: wrap; gap: 6px var(--s5); margin: 0; padding: 0; }
.pk-count li { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.js .pk-count li { opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .5s var(--ease); }
.js .pk-count li.on { opacity: 1; transform: none; }
.pk-count b { font-size: 40px; line-height: 1; font-weight: 700; letter-spacing: -0.035em; color: var(--night-ink); text-align: right; }
.pk-count li > span { font-size: 18px; font-weight: 500; color: var(--night-2); }
.pk-count li[data-c="1"] b { color: var(--pk-red); }
.pk-count li[data-c="2"] b { color: var(--yellow); }
.pk-short { display: none; }
/* A key: the swatch is a tiny tile in the state the number counts */
.pk-sw { flex: none; align-self: center; width: 14px; height: 25px; border-radius: 4px; background: linear-gradient(#c9c6bc, #8f8b80); }
.pk-sw.out { background: #3b3c37 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 25'%3E%3Cpath d='M4.5 10l5 5M9.5 10l-5 5' stroke='%23ff7a63' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.pk-sw.kept { box-shadow: inset 0 0 0 2px var(--yellow); }

/* The wall */
.pk-wall { position: relative; height: var(--pk-wall-h, 430px); }
/* The whole frame (placed over the wall's full rows by js; without js it fills the wall). When the search starts it
   dims and stays under the tiles while they turn face up over it, so no slot is ever empty; then it goes. */
.pk-whole { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: var(--r-thumb); background: #262723; pointer-events: none; transition: opacity .45s ease; }
.pk-whole img { position: absolute; left: 0; top: 0; max-width: none; width: 100%; height: 100%; object-fit: cover; transition: filter .4s ease; }
.pk.is-broken .pk-whole img { filter: brightness(.34) saturate(.7); }
.pk.is-found .pk-whole { opacity: 0; }
/* A tile: its own moment (one sprite of all 65; the best three get their full-size frame from js) */
.pk-tile { position: absolute; left: 0; top: 0; border-radius: var(--pk-tr); transform-origin: 50% 50%; opacity: 0; }
.pk-tile.is-in { opacity: 1; }
.pk-tile > i { position: absolute; inset: 0; border-radius: inherit; }
.pk-b { background: #262723 no-repeat; background-size: 1300% 500%; transition: filter .35s ease; }
.pk.is-near .pk-b { background-image: url("../media/v12-06b-wall.webp"); }
/* The best three's hooks, on the shorts like their titles (phone and tablet; on a laptop the notes beside carry them) */
.pk-hook { display: none; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 30px 7px 8px; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit;
  background: linear-gradient(rgba(14, 14, 12, 0), rgba(14, 14, 12, .62) 38%, rgba(14, 14, 12, .86)); color: #fff; font-size: 16px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; overflow-wrap: break-word; opacity: 0; transition: opacity .45s var(--ease); pointer-events: none; }
.pk-tile.is-pod .pk-hook { display: block; }
.pk.is-hooks .pk-hook { opacity: 1; }
.pk-tile::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 0 transparent; transition: box-shadow .25s ease; pointer-events: none; }
.pk-tile.is-look::after { box-shadow: inset 0 0 0 3px #fff; transition: none; }
.pk-tile.is-kept::after { box-shadow: inset 0 0 0 3px var(--yellow); }
.pk-tile.is-out .pk-b { filter: grayscale(1) brightness(.5); }
.pk-tile > .pk-x { left: 50%; top: 50%; right: auto; bottom: auto; z-index: 1; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(.4); border-radius: 50%; opacity: 0; transition: opacity .2s ease, transform .3s var(--ease);
  background: rgba(194, 61, 42, .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 6.5l7 7M13.5 6.5l-7 7' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.pk-tile.is-out > .pk-x { opacity: 1; transform: translate(-50%, -50%); }
.pk-tile.is-piled > .pk-x { opacity: .45; }
/* A verdict card points at its tile: a short white ring, also in the pile */
.pk-tile.is-ping { z-index: 45 !important; }
.pk-tile.is-ping::after { box-shadow: inset 0 0 0 3px #fff, 0 0 0 3px rgba(255, 255, 255, .25); transition: box-shadow .2s ease; }
.pk-tile.is-ping.is-out .pk-b { filter: grayscale(1) brightness(.85); }

/* Links under the stage: the explainer, and the replay once it has run (they share one row, nothing jumps) */
.pk-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s4); margin-top: var(--s1); }

/* The judge's verdicts */
.pk-notes { margin-top: var(--s4); min-width: 0; }
.pk-swipe { --swipe-w: 86%; --swipe-w-md: 56%; --swipe-cols: 3; --swipe-gap: 12px; }
.pk-c { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 16px 14px 14px; border-radius: var(--r-media); background: var(--night-card); border: 1px solid var(--night-line); }
.pk-c img { display: block; width: 60px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r-thumb); }
.pk-c.is-out img { filter: grayscale(1) brightness(.75); }
.pk-c-t { min-width: 0; }
.pk-v { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 4px; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--yellow); }
.pk-v .ico { width: 18px; height: 18px; stroke-width: 2.6; }
.pk-v em { font-style: normal; font-weight: 500; color: var(--night-muted); }
.pk-c.is-out .pk-v { color: var(--pk-red); }
.pk-c h3 { font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; color: var(--night-ink); }
.pk-r { margin: 6px 0 0; font-size: 16px; line-height: 1.45; color: var(--night-2); }
/* Laptop: the wall on the left with its two links under it; the conversation on the right: the request, its reply,
   the live count right under the reply (js moves .pk-count there, and the label "My 47-minute solo video" onto the
   frame), then the verdicts, which come in while the judge stops on their shorts, best first, before the gather. So
   the right column holds something true from the moment the frame breaks, never a dark hole beside a busy wall. */
@media (min-width: 1100px) {
  .pk-main { grid-template-columns: minmax(0, 1fr) 440px; grid-template-areas: "lead ask" "stage notes" "links notes"; grid-template-rows: auto auto 1fr; column-gap: var(--s7); row-gap: 0; align-items: end; }
  .pk-lead { grid-area: lead; align-self: start; }
  .pk-ask { grid-area: ask; margin-top: 0; }
  .pk-stage { grid-area: stage; margin-top: var(--s4); align-self: start; }
  .pk-notes { grid-area: notes; margin-top: var(--s4); align-self: start; }
  .pk-links { grid-area: links; align-self: start; margin-top: var(--s2); justify-content: flex-start; }
  .js .pk-cap { display: none; }
  /* The wall takes what the caption row had: links under it, the bottom where it was at the natural stop */
  .pk-wall { --pk-wall-h: clamp(360px, calc(100svh - 394px), 500px); }
  /* The label on the frame, like a video's title, until the frame breaks */
  .pk-whole > .pk-src { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 48px 20px 16px; color: #fff; background: linear-gradient(rgba(14, 14, 12, 0), rgba(14, 14, 12, .7)); }
  /* The count: three numbers over their keys, each shown at its turn */
  .pk-notes > .pk-count { display: grid; grid-template-columns: repeat(3, max-content); gap: 0 var(--s5); margin: 0 0 var(--s2); }
  .pk-notes > .pk-count li { display: grid; grid-template-columns: auto auto; grid-template-areas: "n n" "sw l"; justify-content: start; align-items: center; gap: 4px 8px; }
  .pk-notes > .pk-count b { grid-area: n; justify-self: start; text-align: left; }
  .pk-notes > .pk-count .pk-sw { grid-area: sw; width: 11px; height: 20px; border-radius: 3px; }
  .pk-notes > .pk-count li > span { grid-area: l; }
  /* From the moment the find starts the whole count stands here; "thrown out" and "kept" wait at 0, dimmed, until
     the judge starts, so the eye stays on the number that is counting */
  .js .pk-notes > .pk-count li.on.is-wait { opacity: .38; }
  .pk-swipe { --swipe-cols: 1; }
  .pk-swipe .swipe-track { gap: 8px !important; }
  .pk-c { grid-template-columns: 52px minmax(0, 1fr); padding: 8px 16px 8px 10px; }
  .pk-c img { width: 52px; }
  .js .pk-c { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .55s var(--ease); }
  .js .pk-c.is-shown { opacity: 1; transform: none; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .pk-main { grid-template-columns: minmax(0, 1fr) 360px; column-gap: var(--s6); }
  .pk-notes > .pk-count { gap: 0 var(--s4); }
  .pk-notes > .pk-count li > span { font-size: 16px; }
}
@media (min-width: 720px) and (max-width: 1099px) {
  .pk-wall { --pk-wall-h: clamp(280px, calc(100svh - 476px), 520px); }
  .pk-cap { justify-items: center; }
  .pk-count { justify-content: center; }
}
/* Phone: the request right above the stage, the reply carries the judge (the lead is hidden), the wall takes what
   is left of the screen at the natural stop (headline just under the header), so request and result share it */
@media (max-width: 719px) {
  .pk { --pk-tr: 7px; }
  .pk-lead { display: none; }
  .pk-ask { margin-top: var(--s3); }
  .pk-stage { margin-top: 10px; }
  .pk-cap { min-height: 32px; margin-bottom: var(--s1); }
  .pk-src { font-size: 18px; }
  .pk-src .ico { width: 22px; height: 22px; }
  .pk-count { gap: 4px var(--s3); }
  .pk-count li { gap: 6px; }
  .pk-count li[data-c="0"] .pk-sw { display: none; }
  .pk-count b { font-size: 24px; }
  .pk-count li > span { font-size: 16px; }
  .pk-sw { width: 11px; height: 20px; border-radius: 3px; }
  .pk-long { display: none; }
  .pk-short { display: inline; }
  .pk-wall { --pk-wall-h: clamp(280px, calc(100svh - 390px), 520px); }   /* 10px of slack under the stage at the natural stop (390x844: it ended 1px above the edge) */
  .pk-whole { border-radius: 6px; }
  .pk-tile.is-kept::after { box-shadow: inset 0 0 0 2px var(--yellow); }
  .pk-tile.is-look::after { box-shadow: inset 0 0 0 2px #fff; }
  .pk-links { margin-top: 2px; gap: 0 var(--s3); }
  .pk-notes { margin-top: var(--s2); }
  .pk-swipe { --swipe-w: 88%; }
  .pk-c { display: block; padding: 14px 16px; }
  .pk-c img { display: none; }
  .pk-c h3 { font-size: 17px; }
}
/* A 360px Android: "Keeps only the best." (326px at 36px) no longer fits a line, so the yellow sentence starts its own
   line and breaks evenly ("Keeps only / the best."), instead of "short. Keeps / only the best."; the count keeps one
   row with tighter gaps (it needs 296px plus the gaps in 320) */
@media (max-width: 719px) { .pk-h2 .h2nd { display: block; text-wrap: balance; } }
@media (max-width: 379px) { .pk-count { column-gap: 10px; } }
@media (prefers-reduced-motion: reduce) {
  .js .pk-count li, .js .pk-c, .pk-src, .pk-whole, .pk-whole img, .pk-tile, .pk-tile > i, .pk-tile::after, .pk-hook { transition: none !important; }
}

/* ---- "How the judge decides" (a light sheet; its content is cloned from #tpl-pk, so these rules apply there):
   the four readers' finds, then every one of the 65 on the judge's real score, the bar at 3.5, the 33 kept in green,
   the 9 repeats of a kept moment as rings, the rest grey; then why the grey ones fell short ---- */
.pkx { display: grid; gap: var(--s4); --dot: 14px; --dgap: 5px; --col: calc(var(--dot) + 14px); }
.pkx-lanes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pkx-lanes li { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 8px; font-size: 16px; line-height: 1.2; font-weight: 500; color: var(--ink-2); opacity: .35; transition: opacity .4s var(--ease); }
.pkx-lanes li.on { opacity: 1; }
.pkx-lanes .ico { width: 20px; height: 20px; color: var(--green-3); }
.pkx-lanes b { font-size: 18px; font-weight: 700; color: var(--ink); }
.pkx-chart { display: grid; justify-items: center; gap: 8px; }
.pkx-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; margin: 0; font-size: 16px; font-weight: 600; color: var(--ink-2); opacity: 0; transition: opacity .4s ease; }
.pkx-k { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.pkx-k i { width: 14px; height: 14px; border-radius: 50%; background: #cfc9bb; }
.pkx-k.rep i { background: transparent; box-shadow: inset 0 0 0 2px #a59f92; }
.pkx-k.in i { background: var(--ok); }
.pkx-k.in { color: var(--ink); }
.pkx-plot { position: relative; display: grid; grid-template-columns: repeat(16, var(--col)); align-items: end; height: calc(12 * (var(--dot) + var(--dgap)) + 30px); padding-top: 30px; }
.pkx-c { display: flex; flex-direction: column-reverse; align-items: center; gap: var(--dgap); }
.pkx-d { width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--ink-2); opacity: 0; transform: translateY(-40px); transition: opacity .3s ease, transform .45s cubic-bezier(.3, 1.3, .5, 1), background-color .35s ease, box-shadow .35s ease; }
.pkx-d.in { opacity: 1; transform: none; }
.pkx-d.keep { background: var(--ok); }
.pkx-d.low { background: #cfc9bb; }
.pkx-d.rep { background: transparent; box-shadow: inset 0 0 0 2px #a59f92; }
.pkx-bar { position: absolute; top: 0; bottom: 0; left: calc(9 * var(--col)); width: 2px; margin-left: -1px; background: var(--ink); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .5s var(--ease); }
.pkx-bar span { position: absolute; top: 0; left: 8px; white-space: nowrap; font-size: 16px; line-height: 1; font-weight: 700; color: var(--ink); opacity: 0; transition: opacity .3s ease .3s; }
.pkx.is-bar .pkx-bar { transform: none; }
.pkx.is-bar .pkx-bar span { opacity: 1; }
.pkx.is-done .pkx-keys { opacity: 1; }
.pkx-axis { position: relative; width: calc(16 * var(--col)); height: 22px; border-top: 1px solid var(--line-2); }
.pkx-axis span { position: absolute; top: 4px; left: calc((var(--x) + .5) * var(--col)); transform: translateX(-50%); font-size: 16px; line-height: 1; font-weight: 600; color: var(--muted); }
.pkx-cap { margin: 0; font-size: 16px; color: var(--muted); }
/* Why the grey ones are out: right above them, in the plot's empty top-left corner (left of the bar) */
.pkx-why { position: absolute; left: 0; top: 0; width: calc(9 * var(--col) - 12px); display: grid; gap: 2px; justify-items: start; font-size: 16px; line-height: 1.3; color: var(--ink-2); opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .5s var(--ease); }
.pkx.is-why .pkx-why { opacity: 1; transform: none; }
.pkx-why b { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 2px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.pkx-why span { white-space: nowrap; }
.pkx-why i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #cfc9bb; }
@media (max-width: 719px) {
  .pkx { gap: var(--s2); --dot: 12px; --dgap: 4px; --col: calc((100vw - 72px) / 16); }
  /* the four readers as one row of counts (the icons stay on the laptop) */
  .pkx-lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 4px; }
  .pkx-lanes li { display: grid; justify-items: center; gap: 2px; min-height: 0; padding: 0; text-align: center; }
  .pkx-lanes .ico { display: none; }
  .pkx-plot { padding-top: 24px; height: calc(12 * (var(--dot) + var(--dgap)) + 24px); }
  .pkx-why { width: calc(9 * var(--col) - 4px); gap: 0; line-height: 1.25; }
}
@media (max-width: 719px) and (max-height: 760px) {
  .pkx { --dot: 10px; --dgap: 3px; gap: 10px; }
  .pkx-lanes { display: none; }
  .pkx-plot { padding-top: 22px; height: calc(12 * (var(--dot) + var(--dgap)) + 22px); }
}
@media (prefers-reduced-motion: reduce) { .pkx *, .pkx-d, .pkx-why { transition: none !important; } }