/* 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) {
  /* Russian verdicts run longer: the conversation column takes 32px more (the gap gives 16 of them), so each card keeps
     its two-line note and the column ends on screen at the natural stop (787 of 800 at 1180x800) */
  .pk-main { grid-template-columns: minmax(0, 1fr) 392px; column-gap: var(--s5); }
  .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; }
  /* Keep the three Russian counts on one row down to 360px. */
  .pk-count { gap: 4px 14px; }
  .pk-count li { gap: 4px; }
  .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; }
  /* The hooks on the three big shorts (111px wide at 390x844): «Договор мне» needs 99px, so a hair less side padding
     and tracking keeps it on one line instead of leaving «мне» alone on the middle one */
  .pk-hook { padding-left: 6px; padding-right: 6px; letter-spacing: -0.02em; }
}
/* 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 (max-width: 369px) { .pk-count b { font-size: 22px; } }
@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); }
/* The four readers' finds: two by two (the Russian names – «цепляющих начал», «спорных мыслей» – don't fit one row) */
.pkx-lanes { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: 0 var(--s4); 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' row stays on the laptop: on a phone a quarter of the width (77px at 390) can't hold «цепляющих»,
     and two rows would make the sheet scroll; the first line under the chart names the four hunters and their 65 */
  .pkx-lanes { 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; } }