/* Creator Highlights.
   Loaded by /profile/ and by the app shell, so it declares its own variables
   with fallbacks to the ones each page already sets rather than depending on
   either stylesheet. Nothing here restyles anything outside .chl-*. */

.chl {
  --chl-line: var(--app-line, rgba(0, 0, 0, .12));
  --chl-dim: var(--app-dim, #606069);
  --chl-fg: var(--app-fg, #0f0f10);
  --chl-bg: var(--app-bg, #fff);
  --chl-hover: var(--app-hover, rgba(0, 0, 0, .06));
  --chl-tile: var(--app-tile, #e8e8ec);
  --chl-accent: var(--app-accent, #22d37a);
  --chl-size: 62px;

  margin: 18px 0;
  padding: 16px 0;
  border-top: 1px solid var(--chl-line);
  border-bottom: 1px solid var(--chl-line);
}

/* Inside the watch page's meta bar, beside the Subscribe button, rather than as
   a band of its own. It carries none of the section chrome above: no rule, no
   margin, no heading — the bar around it is already the row about this creator.
   Smaller circles too, so they sit with the 46px creator avatar instead of
   towering over it. */
.chl.chl--inline {
  --chl-size: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.chl--inline .chl-row { margin: 0; padding: 0 2px 2px; gap: 14px; }
/* One line here, not two: this row shares a horizontal band with the creator,
   the Subscribe button and the like count, and a second line of title would
   push all of them apart. */
.chl--inline .chl-item__title { -webkit-line-clamp: 1; line-clamp: 1; font-size: 11px; }
.chl--inline .chl-item { width: calc(var(--chl-size) + 14px); gap: 5px; }

/* ---- heading -------------------------------------------------------------- */
.chl-head { display: flex; align-items: center; gap: 12px; }
.chl-head__title { margin: 0; font-size: 15px; font-weight: 700; color: var(--chl-fg); }
.chl-head__manage {
  margin-left: auto;
  border: 1px solid var(--chl-line);
  border-radius: 999px;
  background: transparent;
  padding: 5px 12px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--chl-dim);
  cursor: pointer;
}
.chl-head__manage:hover { background: var(--chl-hover); color: var(--chl-fg); }

.chl-pitch { margin: 6px 0 0; font-size: 13.5px; font-weight: 600; color: var(--chl-fg); }
.chl-blurb { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--chl-dim); max-width: 62ch; }

.chl-cta {
  margin-top: 10px;
  border: 1px solid var(--chl-line);
  border-radius: 999px;
  background: transparent;
  padding: 7px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--chl-fg);
  cursor: pointer;
}
.chl-cta:hover { background: var(--chl-hover); }
/* The owner prompt in the meta bar. Pill-height so it lines up with Subscribe
   and the like button either side of it rather than floating between them. */
.chl-cta--inline { margin-top: 0; height: 38px; padding: 0 16px; font-size: 12.5px; }

/* ---- the row -------------------------------------------------------------- */
/* Horizontal, and it scrolls on a narrow screen rather than shrinking the
   circles into something nobody can hit. -8px/8px so a focus ring on the first
   circle is not clipped by the scroll container. */
.chl-row {
  display: flex;
  gap: 18px;
  margin: 12px -8px 0;
  padding: 0 8px 2px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.chl-item {
  flex: 0 0 auto;
  width: calc(var(--chl-size) + 18px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.chl-item__cover {
  width: var(--chl-size);
  height: var(--chl-size);
  border-radius: 50%;
  overflow: hidden;
  background: var(--chl-tile);
  border: 1px solid var(--chl-line);
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--chl-dim);
  transition: transform .12s ease;
}
.chl-item__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chl-item:hover .chl-item__cover { transform: scale(1.05); }
.chl-item:focus-visible { outline: none; }
.chl-item:focus-visible .chl-item__cover { outline: 2px solid var(--chl-accent); outline-offset: 2px; }

.chl-item__cover--add {
  background: transparent;
  border: 1px dashed var(--chl-line);
  font-size: 24px;
  font-weight: 400;
}

/* Two lines, then an ellipsis. A long title must never widen its column and
   push the rest of the row sideways. */
.chl-item__title {
  width: 100%;
  font-size: 11.5px;
  line-height: 1.3;
  font-weight: 600;
  text-align: center;
  color: var(--chl-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .chl { --chl-size: 56px; }
  .chl-row { gap: 14px; }
}

/* ---- the vertical player -------------------------------------------------- */
/* A <dialog> in the top layer, which is what puts it above the floating
   #videoLayer player without a z-index fight. */
/* The dialog is the whole viewport and is only a positioning context — the card
   inside it is placed absolutely against the circle that opened it. inset/margin
   are stated rather than inherited from the UA's modal styles, which centre. */
.chl-player {
  position: fixed;
  inset: 0;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.chl-player::backdrop { background: rgba(0, 0, 0, .72); }

/* A small card ANCHORED to the circle that opened it, with a tail pointing back
   at it — so the window reads as an answer to that click rather than something
   that appeared in the middle of the screen. The player sets left/top and the
   picture's size in px; these are the values used before metadata arrives. */
.chl-player__frame {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 16px;
  background: #131316;
  color: #fff;
  /* Lifted off the page rather than outlined. A coloured border around a video
     fights whatever is in the video. */
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6), 0 2px 10px rgba(0, 0, 0, .45);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* A solid bar above the picture, not a gradient over it: the clip keeps its
   whole frame and the name never fights the first shot. */
.chl-player__head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 2px 2px 0;
}

/* The pointer back at the circle. A rotated square rather than a border trick,
   so it can carry the card's own background and disappear into it seamlessly. */
.chl-player__tail {
  position: absolute;
  bottom: -6px;
  width: 14px; height: 14px;
  margin-left: -7px;
  background: #131316;
  transform: rotate(45deg);
  border-radius: 3px;
}
/* Flipped to the top edge when the card had to open below the circle. */
.chl-player__tail.is-below { bottom: auto; top: -6px; }
.chl-player__tail[hidden] { display: none; }
.chl-player__heading { min-width: 0; }
.chl-player__heading { min-width: 0; flex: 1 1 auto; }
/* The creator leads; the Highlight names itself underneath in grey. */
.chl-player__name {
  display: block;
  font-size: 13.5px; font-weight: 700; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chl-player__title {
  margin: 1px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: #a1a1aa;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chl-player__avatar {
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 50%; overflow: hidden;
  background: rgba(255, 255, 255, .14);
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700; color: #fff;
}
.chl-player__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chl-player__close {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: #a1a1aa;
  font: inherit; font-size: 14px; line-height: 1;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.chl-player__close:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* Rounded and clipped, so the picture sits INSIDE the card rather than being
   the card. The px size is set by the player from the clip's real dimensions. */
.chl-player__stage {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}
/* contain, not cover: a Highlight that is not 9:16 is letterboxed rather than
   cropped, so nothing the creator framed is cut off. */
.chl-player__video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.chl-player__fallback {
  position: absolute; inset: 0;
  margin: 0;
  display: grid; place-items: center;
  padding: 24px;
  text-align: center;
  color: rgba(255, 255, 255, .78);
  font-size: 14px; font-weight: 600;
}

.chl-player__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 34px; height: 34px;
  border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .38);
  backdrop-filter: blur(4px);
  color: #fff;
  font: inherit; font-size: 20px; line-height: 1;
  cursor: pointer;
  opacity: .75;
  transition: opacity .12s ease, background .12s ease;
}
/* :not(:disabled) matters — without it this rule out-specifies the disabled
   rule below and hovering the window brings the dead end-arrow back. */
.chl-player__frame:hover .chl-player__nav:not(:disabled) { opacity: 1; }
.chl-player__nav:hover:not(:disabled) { background: rgba(0, 0, 0, .72); }
/* Hidden rather than greyed at the ends: a permanently dead arrow on a small
   window is clutter, and the dots already say where you are. */
.chl-player__nav:disabled { opacity: 0; pointer-events: none; }
.chl-player__nav--prev { left: 8px; }
.chl-player__nav--next { right: 8px; }

/* Segments across the TOP, story-style: they say how many Highlights there are
   and which one you are on. They used to sit at the bottom, where the video's
   own control bar draws straight over them. */
/* Their own row between the bar and the picture. */
.chl-player__dots {
  display: flex;
  gap: 4px;
  padding: 0 2px;
  pointer-events: none;
}
.chl-player__dot {
  flex: 1 1 0;
  height: 3px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, .18);
}
/* Driven from timeupdate, so a viewer can see the clip running out before the
   player moves itself on. No CSS transition: the value already arrives every
   frame, and easing it would make the bar lag the picture. */
.chl-player__dot-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 2px;
  background: #fff;
}

/* Still a small window on a phone, not a takeover — the point is that the page
   underneath stays visible and you are clearly on top of it. */
@media (max-width: 520px) {
  .chl-player__frame { border-radius: 14px; }
  .chl-player__nav { width: 30px; height: 30px; font-size: 18px; }
  .chl-player__nav--prev { left: 4px; }
  .chl-player__nav--next { right: 4px; }
}

/* ---- the manager ---------------------------------------------------------- */
/* Dark, like the player it configures. This is a window over a video page, not
   a document — a white sheet here is the one surface that broke that.
   Deliberately self-contained: it does NOT read the --app-* variables the rest
   of this file does, because those describe the white page underneath. */
.chl-mg {
  --mg-bg: #131316;
  --mg-line: rgba(255, 255, 255, .13);
  --mg-fg: #f4f4f5;
  --mg-dim: #a1a1aa;
  --mg-raise: rgba(255, 255, 255, .06);

  border: 0;
  padding: 0;
  width: min(620px, calc(100% - 28px));
  max-height: 88vh;
  border-radius: 18px;
  background: transparent;
  color: var(--mg-fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.chl-mg::backdrop { background: rgba(0, 0, 0, .72); }

.chl-mg__inner {
  border-radius: 18px;
  background: var(--mg-bg);
  padding: 20px 22px 22px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
}
.chl-mg__inner.is-busy { opacity: .72; }

.chl-mg__head { display: flex; align-items: center; gap: 12px; }
.chl-mg__title { margin: 0; font-size: 18px; font-weight: 800; color: #fff; }
.chl-mg__close {
  margin-left: auto;
  width: 32px; height: 32px;
  border: 1px solid var(--mg-line); border-radius: 50%;
  background: transparent;
  color: #fff;
  font: inherit; font-size: 14px;
  cursor: pointer;
}
.chl-mg__close:hover { background: var(--mg-raise); }

.chl-mg__status { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--mg-dim); }
/* Lifted off the dark surface: the print reds and greens go muddy on #131316. */
.chl-mg__status.is-error { color: #fca5a5; }
.chl-mg__status.is-ok { color: #86efac; }

.chl-mg__pitch { margin: 12px 0 0; font-size: 14px; font-weight: 700; color: #fff; }
.chl-mg__blurb { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--mg-dim); }
.chl-mg__hint { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--mg-dim); }
.chl-mg__note { margin: 6px 0 0; font-size: 13px; color: var(--mg-dim); }

.chl-mg__list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; counter-reset: chl; }
.chl-mg__row {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--mg-line);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--mg-raise);
}
.chl-mg__row--empty { border-style: dashed; padding: 6px; background: transparent; }

.chl-mg__thumb {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, .1);
  display: grid; place-items: center;
  font-size: 16px; font-weight: 700;
  color: var(--mg-dim);
}
.chl-mg__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.chl-mg__text { min-width: 0; flex: 1 1 auto; }
.chl-mg__name {
  display: block;
  font-size: 14px; font-weight: 700; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chl-mg__actions { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; }
.chl-mg__link {
  border: 0; background: transparent; padding: 0;
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--mg-dim);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.chl-mg__link:hover { color: #fff; }
.chl-mg__link--danger { color: #fca5a5; }
.chl-mg__link--danger:hover { color: #fecaca; }

.chl-mg__move { display: flex; flex-direction: column; gap: 3px; }
.chl-mg__move-btn {
  width: 26px; height: 22px;
  border: 1px solid var(--mg-line); border-radius: 6px;
  background: transparent;
  color: var(--mg-fg);
  font: inherit; font-size: 12px; line-height: 1;
  cursor: pointer;
}
.chl-mg__move-btn:hover:not(:disabled) { background: var(--mg-raise); }
.chl-mg__move-btn:disabled { opacity: .3; cursor: default; }

.chl-mg__add {
  width: 100%;
  border: 0; border-radius: 8px;
  background: transparent;
  padding: 12px;
  font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--mg-dim);
  cursor: pointer;
}
.chl-mg__add:hover { background: var(--mg-raise); color: #fff; }

/* ---- the editor ----------------------------------------------------------- */
.chl-mg__form { margin-top: 16px; display: grid; gap: 18px; }
.chl-mg__field { display: block; }
.chl-mg__label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mg-dim); }
.chl-mg__input {
  width: 100%;
  margin-top: 6px;
  border: 1px solid var(--mg-line);
  border-radius: 10px;
  padding: 9px 11px;
  background: rgba(0, 0, 0, .3);
  color: var(--mg-fg);
  font: inherit; font-size: 14px;
  box-sizing: border-box;
}
.chl-mg__input::placeholder { color: rgba(255, 255, 255, .35); }
.chl-mg__input:focus { outline: 2px solid var(--app-accent, #22d37a); outline-offset: -1px; border-color: transparent; }
.chl-mg__count { display: block; margin-top: 4px; font-size: 11.5px; color: var(--mg-dim); }

.chl-mg__choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chl-mg__cover-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.chl-mg__cover-row .chl-mg__choices { margin-top: 0; }

.chl-mg__btn {
  border: 1px solid var(--mg-line);
  border-radius: 999px;
  background: transparent;
  padding: 8px 14px;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--mg-fg);
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.chl-mg__btn:hover { background: var(--mg-raise); }
.chl-mg__btn--quiet { color: var(--mg-dim); }
.chl-mg__btn--go { border-color: transparent; background: var(--app-accent, #22d37a); color: #06210f; }
.chl-mg__btn--go:hover { filter: brightness(.96); background: var(--app-accent, #22d37a); }
.chl-mg__btn:disabled { opacity: .5; cursor: default; }

.chl-mg__form-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* ---- the picker ----------------------------------------------------------- */
.chl-mg__grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.chl-pick {
  border: 1px solid var(--mg-line);
  border-radius: 10px;
  background: var(--mg-raise);
  padding: 8px;
  font: inherit;
  color: var(--mg-fg);
  text-align: left;
  cursor: pointer;
}
.chl-pick:hover:not(:disabled) { background: rgba(255, 255, 255, .11); }
.chl-pick.is-on { border-color: var(--app-accent, #22d37a); box-shadow: 0 0 0 1px var(--app-accent, #22d37a); }

/* Over the two-minute limit. Shown but unusable — a creator hunting for a video
   they know they published needs to be told why it cannot be picked, not left
   wondering where it went. */
/* A long video is no longer refused — the note says what will happen instead. */
.chl-pick__note {
  display: block;
  margin-top: 4px;
  font-size: 11px; font-weight: 700;
  color: #a1a1aa;
}

/* Which two minutes of a long video the Highlight plays. */

/* The preview. Sound on, controls on: choosing the right two minutes of a long
   video by dragging a naked slider is guesswork. */
.chl-mg__preview {
  width: 100%;
  max-height: 190px;
  margin: 10px 0 4px;
  border-radius: 10px;
  background: #000;
  display: block;
}

/* Two thumbs on one track. Both inputs are stacked over the same rail with
   their own backgrounds removed; pointer events are switched OFF on the input
   and back ON for the thumb, which is what lets the lower one still be grabbed
   where the two overlap. */
.chl-mg__dual {
  position: relative;
  height: 26px;
  margin-top: 6px;
}
.chl-mg__dual::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 11px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .18);
}
/* The chosen span, between the handles. */
.chl-mg__dual-fill {
  position: absolute;
  top: 11px;
  height: 4px;
  border-radius: 4px;
  background: var(--app-accent, #22d37a);
}
.chl-mg__dual-input {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 26px;
  margin: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
}
.chl-mg__dual-input::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid #131316;
  background: #fff;
  cursor: grab;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.chl-mg__dual-input::-moz-range-thumb {
  pointer-events: auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid #131316;
  background: #fff;
  cursor: grab;
}
.chl-mg__dual-input::-moz-range-track { background: none; }

.chl-pick__shot {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, .08);
}
.chl-pick__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chl-pick__time {
  position: absolute; right: 4px; bottom: 4px;
  border-radius: 4px;
  padding: 1px 4px;
  background: rgba(0, 0, 0, .74);
  color: #fff;
  font-size: 11px; font-weight: 700;
}
.chl-pick__title {
  display: block;
  margin-top: 6px;
  font-size: 12.5px; font-weight: 600; line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 520px) {
  .chl-mg__inner { padding: 16px; }
  .chl-mg__row { flex-wrap: wrap; }
  .chl-mg__form-actions { flex-direction: column-reverse; }
  .chl-mg__form-actions .chl-mg__btn { width: 100%; justify-content: center; }
}