/* The reels page (N40, functions/views/_reels.js). Linked on /reels only (ROUTE_CSS).
   Laid out like a video site (owner, 2026-09-28):
   - phone (< 900px): one reel per screen, swiped up and down (scroll snap); the picture on
     top, the title, creator and age in a bar under it, the ⋮ menu at the end of the bar;
   - 900–1179px: a grid of cards, the same bar under each picture;
   - from 1180px: a player area (.reel-watch) with the title, creator, age, description,
     topics and the link out under it, and beside it the list of videos as rows
     (thumbnail at the start, title and credit beside it), the one playing marked.
   The picture stays clean: only the chips (platform, editor's pick) and Play sit on it,
   over a light top gradient. Our caption is drawn on the picture only when there is no
   picture (.reel-cap on the plain poster). The player replaces the picture on a tap
   (public/assets/reels.js). */

.reels-head { display: grid; gap: var(--space-4); }
.reels-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); min-width: 0; }
/* the topics are one row that scrolls sideways, like a video site's chip bar */
.reels-bar .reel-topics { flex: 1 1 420px; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block: 2px; }
.reels-bar .reel-topics::-webkit-scrollbar { display: none; }
.reels-bar .reel-topics .chip { flex: none; }
.reels-bar .reel-sort { flex: none; }

.reels-feed { list-style: none; margin: 0; padding: 0; }
.reel { margin: 0; }
.reel-card { display: flex; flex-direction: column; height: 100%; }

/* ---- the picture */
.reel-stage { position: relative; overflow: hidden; border-radius: var(--r); background: var(--viewer); color: var(--on-photo); }
.reel-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel-poster { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3); background: linear-gradient(165deg, var(--photo-jade), var(--viewer) 70%); }
/* Over a thumbnail only the chips and Play are drawn: a light top gradient behind the chips,
   the rest of the picture untouched. */
.reel-stage.has-thumb .reel-poster { background: linear-gradient(180deg, var(--thumb-scrim-0) 0%, transparent 35%); }
.reel-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.reel-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600;
  line-height: 1.4; background: var(--photo-glass); color: var(--on-photo); }
.reel-pick { background: var(--photo-gold); }
.reel-cap { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.45; color: var(--on-photo);
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.reel-play { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; translate: -50% -50%; display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--on-photo); background: var(--photo-glass); color: var(--on-photo); cursor: pointer; }
[dir="rtl"] .reel-play { translate: 50% -50%; }
.reel-play:hover { background: var(--photo-jade); }
.reel-play:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.reel-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--viewer); }
.reel-stage.is-playing .reel-poster { display: none; }

/* ---- the words under or beside it */
.reel-meta { display: grid; gap: 4px; padding-block: var(--space-3) 0; min-width: 0; }
.reel-head { display: flex; align-items: flex-start; gap: var(--space-2); }
.reel-t { flex: 1; min-width: 0; margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reel-link { color: inherit; text-decoration: none; }
.reel-link:hover { text-decoration: underline; }
.reel-link:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; border-radius: 4px; }
.reel-by { margin: 0; font-size: 13.5px; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: baseline; }
.reel-by .reel-credit { font-weight: 600; }
.reel-by a.reel-credit { color: var(--ink); text-decoration: none; }
.reel-by a.reel-credit:hover { text-decoration: underline; }
.reel-credit + .reel-when::before { content: "\00a0·\00a0" / ""; }
.reel-extra { display: none; }
.reel-desc { margin: 0; white-space: pre-line; }
.reel-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.reel-privacy { margin: 0; }

/* ---- the ⋮ menu: the link out, the report form, the privacy line */
.reel-more { position: relative; flex: none; }
.reel-more-btn { display: grid; place-items: center; width: 36px; height: 36px; margin-block-start: -6px; margin-inline-end: -8px;
  border-radius: 50%; color: var(--ink-2); cursor: pointer; list-style: none; }
.reel-more-btn::-webkit-details-marker { display: none; }
.reel-more-btn:hover, .reel-more[open] > .reel-more-btn { background: var(--surface-2); color: var(--ink); }
.reel-more-btn:focus-visible { outline: 2px solid var(--jade); outline-offset: 1px; }
.reel-menu { position: absolute; z-index: 30; inset-block-start: calc(100% + 4px); inset-inline-end: 0; width: min(300px, calc(100vw - 32px));
  display: grid; gap: 2px; padding: var(--space-2); background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-3); }
.reel-menu-i { display: block; padding: 9px 10px; border-radius: var(--r-xs); color: var(--ink); font-size: 14.5px; font-weight: 500;
  text-decoration: none; cursor: pointer; list-style: none; }
.reel-menu-i::-webkit-details-marker { display: none; }
.reel-menu-i:hover { background: var(--surface-2); color: var(--ink); }
.reel-menu-note { padding: 6px 10px 2px; border-block-start: 1px solid var(--line); margin-block-start: 4px; }
.reel-report-form { display: grid; gap: var(--space-3); padding: var(--space-2) 10px var(--space-2); }
.reel-report-form .field { margin: 0; }
.reel-report-form .msg { margin: 0; }
.reel-report-form .msg:empty { display: none; }

.reel-forms { display: grid; gap: var(--space-5); margin-block-start: var(--space-6); }
.reel-form .msg { margin: 0; }

/* The player area and the list's heading exist from 1180px only. */
.reel-watch { display: none; }
.reels-list-h { font-size: 18px; margin: 0 0 var(--space-3); }

/* ---- phone: one reel per screen, the bar under the picture.
   The page itself is the only scroller (owner, 2026-09-28: a feed box that scrolled inside the
   scrolling page trapped the finger and would not let them back up). Each reel is one screen
   under the sticky header and the document snaps to them gently (proximity, no forced stop),
   so a swipe past the first or last reel simply carries on to the header or the forms. */
@media (max-width: 899.98px) {
  html:has(.reels-page) { scroll-snap-type: y proximity; }
  .reels-list-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
  .reels-feed { margin-block-start: var(--space-4); }
  /* the bottom padding keeps the bar clear of the site's floating chat buttons */
  .reel { height: calc(100svh - var(--nav-h)); scroll-snap-align: start; scroll-margin-block-start: var(--nav-h);
    padding: var(--space-2) var(--space-3) calc(var(--space-3) + 60px); }
  .reel-stage { flex: 1 1 auto; min-height: 0; }
  .reel-meta { padding-inline: 2px; }
  .reel-t { font-size: 16px; }
  /* the bar sits at the bottom of the screen: its menu opens upwards */
  .reel-menu { inset-block-start: auto; inset-block-end: calc(100% + 4px); }
}

/* ---- tablet and small laptop: a grid of cards */
@media (min-width: 900px) {
  .reels-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-5) var(--space-4); }
  .reels-layout { max-width: var(--wrap); margin: var(--space-5) auto 0; padding-inline: var(--gut); }
  .reel-stage { aspect-ratio: 3 / 4; }
  .reel-play { width: 56px; height: 56px; }
}

/* ---- desktop: the player beside the list of videos */
@media (min-width: 1180px) {
  .reels-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-5); align-items: start; }
  .reels-head .lede { font-size: 17px; max-width: 70ch; }
  .reels-layout { margin-block-start: var(--space-4); }
  .reel-watch { display: block; min-width: 0; }
  .reel-watch .reel-card { height: auto; }
  .reel-watch .reel-stage { aspect-ratio: 16 / 9; border-radius: var(--r-lg); }
  .reel-watch .reel-thumb { object-fit: contain; }
  .reel-watch .reel-play { width: 76px; height: 76px; }
  .reel-watch .reel-meta { gap: var(--space-2); padding-block-start: var(--space-4); }
  .reel-watch .reel-t { font-size: 21px; line-height: 1.35; -webkit-line-clamp: 3; }
  .reel-watch .reel-by { font-size: 14.5px; }
  .reel-watch .reel-extra { display: grid; gap: var(--space-3); margin-block-start: var(--space-2); }
  .reel-watch .reel-desc { padding: var(--space-3) var(--space-4); border-radius: var(--r); background: var(--surface-2); line-height: 1.6; }
  .reel-watch .reel-actions { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  /* the menu repeats neither the link out, Share nor the privacy line the area already shows */
  .reel-watch .reel-menu .reel-open, .reel-watch .reel-menu-note, .reel-watch .reel-share-menu { display: none; }

  .reel-watch { scroll-margin-block-start: calc(var(--nav-h) + var(--space-3)); }
  /* The list is its own panel: never taller than the screen under the header, it scrolls
     inside (a thin scrollbar), so a long list does not grow the page. reels.js keeps the
     reel in the player visible in it and places a ⋮ menu against the screen. */
  .reels-list { position: sticky; inset-block-start: calc(var(--nav-h) + var(--space-3)); display: flex; flex-direction: column;
    max-height: calc(100svh - var(--nav-h) - 2 * var(--space-3)); min-height: 0; }
  .reels-list .reels-list-h { flex: none; }
  .reels-feed { position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-height: 0; overflow-y: auto;
    overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; padding-inline-end: 4px; }
  .reels-feed::-webkit-scrollbar { width: 8px; }
  .reels-feed::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-pill); }
  .reels-feed::-webkit-scrollbar-track { background: transparent; }
  .reels-list .reel { cursor: pointer; }
  .reels-list .reel-card { transition: background-color .15s var(--ease); }
  .reels-list .reel-card { flex-direction: row; align-items: flex-start; gap: var(--space-3); padding: 6px; border-radius: var(--r); }
  .reels-list .reel:hover .reel-card { background: var(--surface-2); }
  .reels-list .reel.is-current .reel-card { background: var(--jade-wash); }
  .reels-list .reel-stage { flex: none; width: 168px; aspect-ratio: 16 / 9; border-radius: var(--r-sm); }
  .reels-list .reel-poster { padding: 6px; }
  .reels-list .reel-badge { padding: 1px 6px; font-size: 11px; }
  .reels-list .reel-cap { display: none; }
  /* the whole picture is the Play button; its circle shows on hover and focus only */
  .reels-list .reel-play { inset: 0; translate: none; width: auto; height: auto; border: 0; border-radius: 0; background: transparent; }
  .reels-list .reel-play svg { width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: var(--photo-glass); opacity: 0; }
  .reels-list .reel-play:hover svg, .reels-list .reel-play:focus-visible svg { opacity: 1; }
  .reels-list .reel-play:focus-visible { outline-offset: -3px; }
  .reels-list .reel.is-current .reel-play svg { opacity: 1; }
  .reels-list .reel-meta { flex: 1; padding: 0; gap: 3px; }
  .reels-list .reel-t { font-size: 14.5px; }
  .reels-list .reel-by { font-size: 12.5px; flex-direction: column; align-items: flex-start; }
  .reels-list .reel-credit + .reel-when::before { content: none; }
}

/* N60 (functions/_app/funnel.js): a Sponsored place — never jade (the colour "verified" and
   the editor's pick wear), a dashed outline so it reads as paid; the verified-creator mark
   beside the credit; the invitation to /reels/submit. Tokens only. */
.reel-spon { background: var(--photo-glass); outline: 1px dashed var(--on-photo); outline-offset: -3px; }
.reel-verified { display: inline-flex; align-items: center; gap: 3px; margin-inline-start: var(--space-2); font-size: 12px; font-weight: 600; color: var(--jade-2); }
.reel-invite .btn { margin-block-start: var(--space-1); }