/* CLIPS — the public feed and the watch page (clips-feed.js).
   A page that scrolls under the header like the Pokédex (PAGE mode 'scroll'),
   its first line where Friends' is: the header's bottom plus 16px. */
html[data-layout="stage"] .pg--scroll.ov--clips .pg__body{padding-top:calc(var(--pg-hdr,62px) + 16px)}
@media (max-width:1023px){
  html[data-layout="stage"] .pg--scroll.ov--clips .pg__body{padding:calc(var(--pg-hdr,52px) + 12px) 0 110px}
}
/* the page reserves a 12px bar gutter; a phone's bar floats over the content,
   and the reserved strip showed the sky down the right of edge-to-edge films */
@media (max-width:767px){
  html[data-layout="stage"] .pg--scroll.ov--clips .pg__body{scrollbar-gutter:auto;scrollbar-width:none}
}

.cf{--ink:#0B0F18;--ink2:#3A4354;--line:rgba(11,15,24,.12);--pink:#D8498D;
  color:var(--ink);font-family:var(--display),"Barlow Semi Condensed",system-ui,sans-serif}
:where(.cf) button{font:inherit;color:inherit;cursor:pointer}
.cf :focus-visible{outline:2px solid var(--pink);outline-offset:2px}

/* ── THE HEAD: title, then the chips (YouTube's chip bar) ─────────────── */
.cf-top{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin:0 0 18px}
.cf-h1{margin:0;font:900 30px/1 var(--display);font-style:italic;letter-spacing:.02em;text-transform:uppercase;color:var(--pink)}
.cf-chips{display:flex;gap:8px;flex-wrap:wrap}
.cf-chips button{min-height:40px;padding:0 16px;border:2px solid var(--ink);border-radius:999px;background:#fff;
  font-weight:800;font-size:15px;box-shadow:0 2px 0 var(--ink)}
.cf-chips button[aria-pressed="true"]{background:var(--ink);color:#fff}

/* ── ONE FILM ─────────────────────────────────────────────────────────
   Picture, then 10px, then the owner and the words. 36px to the next film.
   The owner's circle is the left column of the text, as on YouTube. */
.cf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:36px 18px}
.cf-card{min-width:0;display:flex;flex-direction:column;gap:10px}
.cf-thumb{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;border-radius:14px;overflow:hidden;background:#1F2432}
.cf-thumb img,.cf-player img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}
.cf-thumb:hover img{transform:scale(1.03)}
.cf-thumb img{transition:transform .2s ease-out}
.cf-dur{position:absolute;right:8px;bottom:8px;padding:2px 6px;border-radius:5px;background:rgba(11,15,24,.85);color:#fff;font:700 13px/1.25 var(--display);font-variant-numeric:tabular-nums}
.cf-tag{position:absolute;left:8px;top:8px;padding:3px 8px;border-radius:6px;border:2px solid var(--ink);background:#fff;
  font:800 12px/1 var(--display);font-style:italic;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.cf-tag--legendary{background:#F6C445}.cf-tag--epic{background:#C9A0FF}.cf-tag--rare{background:#8FD0FF}
.cf-meta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start}
.cf-avbtn{padding:0;border:0;background:none;border-radius:50%;line-height:0;min-width:44px;min-height:44px;display:grid;place-items:start center}
.cf-avbtn .soc-av{border-width:2px}
.cf-txt{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.cf-t{padding:0;border:0;background:none;text-align:left;font-weight:800;font-size:17px;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cf-by{padding:4px 0 0;border:0;background:none;text-align:left;font-weight:700;font-size:15px;color:var(--ink2)}
.cf-by:hover,.cf-t:hover{color:var(--pink)}
.cf-sub{margin:1px 0 0;font:600 14px/1.35 var(--display);color:var(--ink2)}
.cf-empty{margin:24px 0;font:700 17px/1.45 var(--display);color:var(--ink2)}

/* ── A · YOUTUBE GRID: one white page, no boxes ─────────────────────── */
.cf--a,.cf--b{background:#fff;border:3px solid var(--ink);border-radius:20px;box-shadow:0 5px 0 var(--ink);padding:20px 22px 34px}

/* ── B · HITS SHELF: the pulls stand tall, like Shorts ──────────────── */
.cf-shelf{margin:40px 0;padding:20px 0 0;border-top:2px solid var(--line)}
.cf-h2{margin:0 0 14px;font:900 20px/1.1 var(--display);font-style:italic;text-transform:uppercase;letter-spacing:.03em}
.cf-h2 span{display:block;margin-top:4px;font:600 14px/1.3 var(--display);font-style:normal;text-transform:none;letter-spacing:0;color:var(--ink2)}
.cf-shorts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,210px);gap:16px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
.cf-short{display:flex;flex-direction:column;gap:8px;scroll-snap-align:start;min-width:0}
.cf-thumb--tall{aspect-ratio:9/16}
.cf-thumb--tall img{object-position:center}
.cf-meta--short{gap:8px}
.cf-meta--short .cf-t{font-size:15px}
.cf-meta--short .cf-avbtn{min-width:32px}

/* ── C · STICKER CARDS: picture and owner inside one border ─────────── */
.cf--c .cf-top{padding:4px 2px}
.cf--c .cf-h1{color:#fff;text-shadow:0 3px 0 var(--ink),0 0 1px var(--ink)}
.cf--c .cf-grid{gap:22px 18px}
.cf--c .cf-card{background:#fff;border:3px solid var(--ink);border-radius:18px;box-shadow:0 5px 0 var(--ink);padding:10px 10px 14px}
.cf--c .cf-thumb{border-radius:11px}
.cf--c.cf--watch .cf-watch{background:#fff;border:3px solid var(--ink);border-radius:20px;box-shadow:0 5px 0 var(--ink);padding:20px 22px 30px}

/* ── THE WATCH PAGE: the film on top, Up next down the right ──────────── */
.cf-watch{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:24px;align-items:start}
.cf-watch--tall{grid-template-columns:minmax(0,1fr) minmax(300px,380px)}
.cf-back{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 14px 0 8px;margin:0 0 12px;border:2px solid var(--ink);border-radius:999px;background:#fff;font-weight:800;font-size:15px;box-shadow:0 2px 0 var(--ink)}
.cf-back svg{width:18px;height:18px}
.cf-player{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#11141C}
.cf-player--tall{aspect-ratio:9/16;height:min(calc(100dvh - 210px),760px);width:auto;max-width:100%;margin:0 auto;background:#11141C}
@media (max-width:767px){.cf-player--tall{height:min(72dvh,640px)}}
.cf-player--tall img{object-fit:contain}
.cf-play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:rgba(11,15,24,.6);color:#fff;display:grid;place-items:center}
.cf-play svg{width:34px;height:34px}
.cf-wt{margin:14px 0 10px;font:800 24px/1.25 var(--display)}
.cf-chan{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px}
.cf-chan__n{display:flex;flex-direction:column;min-width:0}
.cf-by--lg{padding:0;font-size:17px;font-weight:800;color:var(--ink)}
.cf-follow{min-height:40px;padding:0 18px;border:2px solid var(--ink);border-radius:999px;background:var(--ink);color:#fff!important;font-weight:800;font-size:15px}
.cf-follow[aria-pressed="true"]{background:#EEF0F4;color:var(--ink)!important}
.cf-acts{display:flex;gap:8px;margin-left:auto}
.cf-pill{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:2px solid var(--ink);border-radius:999px;background:#fff;font-weight:800;font-size:15px}
.cf-pill svg{width:18px;height:18px}
.cf-pill[aria-pressed="true"]{background:var(--pink);color:#fff}
.cf-pill[aria-pressed="true"] svg path{fill:currentColor}
.cf-desc{margin:14px 0 22px;padding:12px 14px;border-radius:12px;background:#EEF0F4}
.cf-desc b{font:800 15px/1.3 var(--display)}
.cf-desc p{margin:4px 0 0;font:600 16px/1.45 var(--display)}
.cf-form{display:flex;align-items:center;gap:10px;margin:0 0 18px}
.cf-form input{flex:1;min-width:0;min-height:44px;padding:0 2px;border:0;border-bottom:2px solid var(--line);background:none;font:600 16px/1.3 var(--display);color:var(--ink);outline:0}
.cf-form input:focus{border-bottom-color:var(--ink)}
.cf-send{min-height:40px;padding:0 16px;border:2px solid var(--ink);border-radius:999px;background:#fff;font-weight:800}
.cf-c{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;margin:0 0 14px}
.cf-c .cf-by{padding:0;font-size:14px;color:var(--ink)}
.cf-c p{margin:2px 0 0;font:600 15px/1.4 var(--display)}
.cf-side{display:flex;flex-direction:column;gap:12px}
.cf-rel{display:grid;grid-template-columns:168px minmax(0,1fr);gap:10px;align-items:start}
.cf-thumb--sm{border-radius:10px}
.cf-rel .cf-t{font-size:15px}
.cf-by--row{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:2px 0 0;font-size:14px}
.cf-by--row .soc-av{border-width:1.5px;font-size:9px}

/* ── MOCK SWITCHER (localhost only) ───────────────────────────────── */
.cf-mock{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px;padding:6px;border:2px dashed var(--pink);border-radius:12px;background:#FFF4F9}
.cf-mock button{min-height:36px;padding:0 12px;border:2px solid var(--ink);border-radius:8px;background:#fff;font-weight:800;font-size:14px}
.cf-mock button[aria-pressed="true"]{background:var(--pink);color:#fff}

/* ── THE PHONE ─────────────────────────────────────────────────────── */
@media (max-width:1023px){
  .cf-watch,.cf-watch--tall{grid-template-columns:1fr}
}
@media (max-width:767px){
  .cf-h1{font-size:26px}
  .cf-top{padding:0 14px;margin-bottom:14px}
  .cf-chips{flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding-bottom:3px}
  .cf-chips button{flex:0 0 auto}
  .cf-mock{margin:0 12px 12px}
  /* A and B: edge to edge pictures, the YouTube app's list. 32px between films,
     10px between a picture and its owner. */
  .cf--a,.cf--b{border:0;border-radius:0;box-shadow:none;padding:16px 0 28px}
  .cf--a .cf-grid,.cf--b .cf-grid{grid-template-columns:1fr;gap:32px}
  .cf--a .cf-thumb,.cf--b .cf-grid .cf-thumb{border-radius:0}
  .cf--a .cf-meta,.cf--b .cf-grid .cf-meta{padding:0 14px}
  .cf--b .cf-shelf{padding:20px 14px 0;margin:32px 0}
  .cf-shorts{grid-auto-columns:46%}
  /* C: one sticker per film, inset from the edge */
  .cf--c{padding:0 12px}
  .cf--c .cf-top{padding:0 2px}
  .cf--c .cf-grid{grid-template-columns:1fr;gap:18px}
  /* the watch page: the film edge to edge, the words inset */
  .cf--watch.cf--a,.cf--watch.cf--b{padding-top:6px}
  .cf--watch .cf-wmain > :not(.cf-player){margin-left:14px;margin-right:14px}
  .cf--watch .cf-player{border-radius:0}
  .cf--c.cf--watch{padding:0 10px}
  .cf--c.cf--watch .cf-watch{padding:12px 0 24px}
  .cf--c.cf--watch .cf-player{margin:0}
  .cf-side{padding:0 14px}
  .cf-wt{font-size:20px}
  .cf-acts{margin-left:0;width:100%}
  .cf-rel{grid-template-columns:150px minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.cf-thumb img{transition:none}.cf-thumb:hover img{transform:none}}

/* ── D · C'S CARDS IN B'S SECTIONS; THE WATCH PAGE IN SEPARATE BOXES ─────
   No sheet: the sky shows between sections. Each section has a sticker label.
   The film sits in the record camera's frame (record.css .recbubble__cam:
   black, 3px key border, the cartoon drop). */
.cf--d .cf-top{padding:4px 2px}
.cf--d .cf-h1{color:#fff;text-shadow:0 3px 0 var(--ink),0 0 1px var(--ink)}
.cf--d .cf-grid{gap:22px 18px}
.cf--d .cf-card,.cf--d .cf-short{background:#fff;border:3px solid var(--ink);border-radius:18px;box-shadow:0 5px 0 var(--ink);padding:10px 10px 14px}
.cf--d .cf-thumb{border-radius:11px}
.cf-sec{margin:0 0 34px}
.cf-lbl{display:inline-block;margin:0;padding:6px 14px;background:#fff;border:3px solid var(--ink);border-radius:12px;box-shadow:0 4px 0 var(--ink);
  font:900 19px/1 var(--display);font-style:italic;text-transform:uppercase;letter-spacing:.04em;color:var(--ink)}
.cf-lbl__s{margin:10px 0 14px 2px;font:700 15px/1.3 var(--display);color:#fff;text-shadow:0 1px 0 var(--ink),0 0 6px rgba(11,15,24,.55)}
.cf-lbl + .cf-grid,.cf-lbl + .cf-shorts{margin-top:14px}
.cf--d .cf-shorts{grid-auto-columns:minmax(190px,220px);padding:4px 2px 12px}
.cf-box{background:#fff;border:3px solid var(--ink);border-radius:18px;box-shadow:0 5px 0 var(--ink);padding:16px 18px 18px}
.cf--d .cf-back{box-shadow:0 3px 0 var(--ink)}
.cf--d .cf-player{border:3px solid var(--ink);border-radius:18px;box-shadow:0 5px 0 var(--ink);background:#0B0F18}
.cf--d .cf-box--info{margin-top:16px}
.cf--d .cf-box--info .cf-wt{margin-top:0}
.cf--d .cf-box--info .cf-desc{margin-bottom:0}
.cf--d .cf-comments{margin-top:16px}
.cf--d .cf-side{gap:12px}
@media (max-width:767px){
  .cf--d{padding:0 12px}
  .cf--d .cf-top{padding:0 2px}
  .cf--d .cf-grid{grid-template-columns:1fr;gap:18px}
  .cf--d .cf-shorts{grid-auto-columns:48%}
  .cf--d.cf--watch .cf-wmain > :not(.cf-player){margin-left:0;margin-right:0}
  .cf--d.cf--watch .cf-player{border-radius:16px}
  .cf--d .cf-side{padding:16px 14px 18px;margin-top:16px}
  .cf-box{padding:14px}
}
/* Up next starts level with the film, not with the Clips pill above it
   (Luke, 24 Sep): the pill's 40px plus its 12px gap */
@media (min-width:1024px){ .cf--d .cf-side{margin-top:52px} }

/* comments: a heart per comment, the refusal line, Show more / Show less */
.cf-err{margin:-8px 0 12px 50px;min-height:0;font:700 14px/1.35 var(--display);color:#B42318}
.cf-err:empty{display:none}
.cf-clike{display:inline-flex;align-items:center;gap:4px;min-height:32px;min-width:44px;margin:2px 0 0 -6px;padding:0 6px;border:0;border-radius:999px;background:none;font:700 13px/1 var(--display);color:var(--ink2)}
.cf-clike svg{width:16px;height:16px}
.cf-clike:hover{background:#EEF0F4}
.cf-clike[aria-pressed="true"]{color:var(--pink)}
.cf-clike[aria-pressed="true"] svg path{fill:currentColor}
.cf-more{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:6px}

/* LIVE: the real film in the camera frame, the comment row's Remove, the
   and the skeleton */
.cf-player--video{background:#0B0F18}
.cf-player video{display:block;width:100%;height:100%;object-fit:contain;background:#0B0F18}
.cf-crow{display:flex;align-items:center;gap:6px}
.cf-crm{min-height:32px;padding:0 8px;border:0;border-radius:999px;background:none;font:700 13px/1 var(--display);color:var(--ink2)}
.cf-crm:hover{background:#EEF0F4;color:#B42318}
/* a tall card picture must not stretch its 16:9 frame: aspect-ratio gives way
   to content, so the picture is laid over the box instead of inside the flow
   (one Magcargo slab made its hits tile 452px against 143) */
.cf-thumb img{position:absolute;inset:0}

/* THE HITS ROW (Luke, 25 Sep). The first tile sits under the HITS pill, its left wall on
   the pill's; the row keeps the same 14px gap under the pill as SESSIONS and MOST VIEWED.
   The right end always fades; the left end fades only once the row has been scrolled
   (data-scrolled, set by clips-feed.js), so nothing is faded at rest. No scroll bar: a
   trackpad, shift and the wheel, or a swipe still scroll it. */
.cf--d .cf-lbl + .cf-shorts{margin:14px -12px 0 0}
.cf--d .cf-shorts{padding:0 32px 14px 0;scroll-padding-inline:0 32px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 32px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 32px),transparent 100%)}
.cf--d .cf-shorts[data-scrolled="1"]{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%)}
.cf--d .cf-shorts::-webkit-scrollbar{display:none}
@media (max-width:767px){
  .cf--d .cf-shorts{padding-right:20px;scroll-padding-inline:0 20px;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 20px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 20px),transparent 100%)}
  .cf--d .cf-shorts[data-scrolled="1"]{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%)}
}

/* SHARE on a computer: Post to X / Copy link / Share to clan / Download under the button
   (a phone opens its own share sheet instead, with the video file in it) */
.cf-acts{position:relative}
.cf-share{position:absolute;right:0;top:calc(100% + 8px);z-index:5;min-width:200px;display:flex;flex-direction:column;gap:4px;
  padding:8px;background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:0 5px 0 var(--ink)}
.cf-share button{min-height:44px;padding:0 12px;border:0;border-radius:10px;background:none;text-align:left;font-weight:800;font-size:15px}
.cf-share button:hover,.cf-share button:focus-visible{background:#EEF0F4}
.cf-share__n{margin:2px 6px 4px;font:700 13px/1.3 var(--display);color:var(--ink2)}
.cf-share__n:empty{display:none}
@media (max-width:767px){ .cf-share{left:0;right:auto} }

/* a phone clip in a wide tile: the whole slab on dark, not a crop */
.cf-thumb--whole{background:#11141C}
.cf-thumb--whole img{object-fit:contain;object-position:center}

/* THE SKELETON is the page's own shape (Luke, 25 Sep: "just square boxes ... doesn't
   move"): a label, three session cards, a label, a row of tall hit cards. The bones are
   .skel--ink on the white cards, so they show, and pulse (page.css skelPulse). */
.cf-skel .cf-lbl.skel{width:132px;height:37px;--skel-r:12px;border:0;box-shadow:none;background:rgba(255,255,255,.72)}
.cf-skel .cf-card,.cf-skel .cf-short{pointer-events:none}
.cf-skel .cf-thumb{border:0}
.cf-skel-av{display:block;width:40px;height:40px;--skel-r:50%;flex:0 0 auto}
.cf-skel-lines{display:flex;flex-direction:column;gap:8px;padding-top:4px;min-width:0}
.cf-skel-t{display:block;height:16px;width:82%;border-radius:6px}
.cf-skel-t2{display:block;height:13px;width:46%;border-radius:6px}
.cf-skel-t3{display:block;height:13px;width:62%;border-radius:6px}
.cf-skel .cf-shorts{overflow:hidden}