/* /public/assets/styles/outlier_finder.css
   Outlier Finder – professional NF-like typography
   Isolated .of-* selectors

   NOTE:
   - Only de-duplicated + re-ordered.
   - No features removed.
*/

/* Optional: if you wrap hero with .of-hero */
.of-hero .hero__inner{ padding-bottom: 28px; }
.of-search{ margin-bottom: 12px; }

/* =========================================================
   RESULTS HEADER
   ========================================================= */

.of-results{ margin-top: 22px; }

.of-results__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin: 10px 0 12px;
}

/* Shared pill surface (keeps visuals identical) */
.of-count,
.of-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 14px 16px;
  border-radius: 8px;
  background: rgba(15,19,32,.06);
  color: var(--muted-2);
  font-weight: 600;
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
  border:0;
}

/* Actions container */
.of-results__actions{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
}

/* Pill base */
.of-pill{ line-height:1; }

.of-pill--btn{
  cursor:pointer;
  user-select:none;
}
.of-pill--btn:hover{ background:rgba(15,19,32,.075); }
.of-pill--btn:focus{
  outline:none;
  box-shadow: var(--focus);
}

.of-pill__label{ opacity:.85; }
.of-pill__value{ color:var(--text); font-weight:650; }
.of-pill__chev{ opacity:.6; margin-left:2px; }

/* Sort dropdown */
.of-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:220px;
  background:#fff;
  border:1px solid rgba(15,19,32,.10);
  border-radius:12px;
  box-shadow:0 18px 50px rgba(12,24,60,.14);
  padding:8px;
  z-index:20;
}

.of-menu__item{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  border-radius:10px;
  border:0;
  background:transparent;
  cursor:pointer;
  font: inherit;
  color:var(--text);
}
.of-menu__item:hover{ background:rgba(15,19,32,.06); }

/* =========================================================
   VIDEO GRID (3 per row)
   ========================================================= */

.of-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items:start;
}

@media (max-width: 1100px){
  .of-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .of-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   VIDEO CARD
   ========================================================= */

.of-v{
  display:block;
  text-decoration:none;
  color: inherit;
}

/* Thumb link */
.of-v__thumbLink{
  display:block;
  text-decoration:none;
  color:inherit;
}

/* Wrap clips EVERYTHING (shadow, overlay, lift) */
.of-v__thumbWrap{
  position: relative;
  border-radius: 12px;
  overflow: hidden; /* critical: prevents bottom edge bleed */
}

/* Thumbnail base */
.of-v__thumb{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow:hidden;
  transition: transform .18s ease;
}

.of-v__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  image-rendering: auto;
}

/* Lift only (same behavior as before) */
.of-v__thumbWrap:hover .of-v__thumb{ transform: translateY(-1px); }

/* INNER shadow via pseudo-element (never bleeds outside) */
.of-v__thumb::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 -28px 36px rgba(0,0,0,.22),
    inset 0 8px 14px rgba(255,255,255,.04);
  opacity: 0;
  transition: opacity .18s ease;
}

/* Activate inner shadow on hover/focus */
.of-v__thumbWrap:hover .of-v__thumb::after,
.of-v__thumbWrap:focus-within .of-v__thumb::after{
  opacity: 1;
}

/* Duration badge */
.of-v__duration{
  position:absolute;
  left:10px;
  bottom:10px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1;
  color:#fff;
  background: rgba(0,0,0,.85);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* Score badge */
.of-v__score{
  position:absolute;
  top:10px;
  right:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1;
  color:#fff;

  /* default tier (C) */
  background: var(--of-score-c);
  font-variant-numeric: tabular-nums;
}

/* Tier colors */
.of-v__score--c{ background: var(--of-score-c); }
.of-v__score--b{ background: var(--of-score-b); }
.of-v__score--a{ background: var(--of-score-a); }
.of-v__score--s{ background: var(--of-score-s); }
.of-v__score--sp{
  background: var(--of-score-sp);
  box-shadow: var(--of-score-glow);
}

/* Badges stay above overlay */
.of-v__duration,
.of-v__score{
  position: absolute;
  z-index: 4;
}


/* =========================================================
   THUMB HOVER ACTIONS (Download + Open)
   ========================================================= */

/* Overlay (buttons layer) */
.of-v__thumbOverlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 10px;
  gap: 10px;

  background: linear-gradient(
    to top,
    rgba(0,0,0,.55),
    rgba(0,0,0,0) 62%
  );

  opacity: 0;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none;

  border-radius: inherit;
  z-index: 3;
}

.of-v__thumbWrap:hover .of-v__thumbOverlay,
.of-v__thumbWrap:focus-within .of-v__thumbOverlay{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Buttons */
.of-thumbBtns{
  width: 100%;
  display: flex;
  gap: 10px;
}

.of-thumbBtn{
  flex: 1 1 0;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.22);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  font: inherit;
  font-size: .88rem;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;

  cursor: pointer;
  user-select: none;
  text-decoration: none;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.of-thumbBtn--red{
  background: var(--yt-red);
  color: #fff;
  border-color: rgba(0,0,0,.10);
}

.of-thumbBtn--light{
  background: rgba(255,255,255,.92);
  color: var(--text);
  border-color: rgba(15,19,32,.10);
}

.of-thumbBtn:hover{ filter: brightness(0.98); }

.of-thumbBtn:focus{
  outline: none;
  box-shadow: var(--focus);
}

/* Disabled state (guest / non-pro / locked) */
.of-thumbBtn.is-disabled{
  opacity: .55;
  cursor: not-allowed;
  pointer-events: auto; /* allow click → CTA logic */
}

/* Busy (download in progress) */
.of-thumbBtn.is-busy{
  opacity: .7;
  cursor: progress;
}

.of-thumbBtn__icon{
  width: 16px;
  height: 16px;
  display: block;
  flex: 0 0 auto;
  opacity: .9;
  pointer-events: none;
}

.of-thumbBtn__iconPh{
  width: 16px;
  height: 16px;
  display: block;
  flex: 0 0 auto;
  border-radius: 4px;
  background: rgba(15,19,32,.12);
  opacity: .7;
}


/* =========================================================
   META (avatar + text)
   ========================================================= */

.of-v__meta{
  display:flex;
  gap: 12px;
  margin-top: 10px;
  min-width:0;
  align-items:flex-start;
}

/* Channel avatar */
.of-v__chimg{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  overflow:hidden;
  flex: 0 0 auto;
  display:grid;
  place-items:center;
  text-decoration:none;
  color:inherit;
}

.of-v__chimg img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.of-v__chph{
  font-weight:800;
  font-size:.95rem;
  color:#fff;
}

/* Text block */
.of-v__text{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap: 8px;
  padding: 0 2px;
  text-align:left;
}

.of-v__title{
  margin:0;
  text-decoration:none;
  color: var(--text);
  font-size:1.0rem;
  font-weight:520;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.of-v__title:hover{ text-decoration:underline; }

.of-v__line{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-size:.9rem;
  color:var(--muted-2);
  line-height:1.35;
  font-weight:420;
  font-variant-numeric: tabular-nums;
}

.of-v__dot{ opacity:.6; }

/* =========================================================
   LOAD MORE + CTA
   ========================================================= */

.of-moreRow{
  display:flex;
  justify-content:center;
  margin: 18px 0 10px;
}

/* CTA under grid */
.of-cta{
  margin: 18px 0 0;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(15,19,32,.10);
  background: rgba(15,19,32,.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.of-cta__hint{
  color: var(--muted-2);
  font-size: .92rem;
  font-weight: 500;
}

@media (max-width: 720px){
  .of-cta{
    flex-direction:column;
    align-items:stretch;
    text-align:center;
  }
}

/* =========================================================
   LOCKED BLUR (NF-like)
   - ONLY blur the 3 locked cards (.of-v.is-blurred)
   - blur everything except score badge
   ========================================================= */

.of-v.is-blurred .of-v__thumb img,
.of-v.is-blurred .of-v__duration,
.of-v.is-blurred .of-v__chimg img,
.of-v.is-blurred .of-v__chph,
.of-v.is-blurred .of-v__title,
.of-v.is-blurred .of-v__line{
  filter: blur(4px);
  transform: translateZ(0);
  transition: filter .22s ease;
  will-change: filter;
}

.of-v.is-blurred .of-v__score{ filter: none !important; }

/* Optional: slightly clearer on hover (still locked) */
.of-v.is-blurred:hover .of-v__thumb img,
.of-v.is-blurred:hover .of-v__title,
.of-v.is-blurred:hover .of-v__line{
  filter: blur(3px);
}

/* Disable selection/drag on blurred cards */
.of-v.is-blurred .of-v__title,
.of-v.is-blurred .of-v__line{
  user-select: none;
}

.of-v.is-blurred img{
  -webkit-user-drag: none;
  user-drag: none;
}

/* =========================================================
   INPUT STATES
   ========================================================= */

/* Disabled filter inputs (UI-only) */
.of-input:disabled{
  opacity: .55;
  cursor: not-allowed;
  background: rgba(255,255,255,.65);
}

.of-reset-inline[disabled]{
  opacity:.6;
  cursor:not-allowed;
}

/* =========================================================
   FILTERS (free layout) + DUAL RANGE (clean, professional)
   - floating min/max labels ABOVE thumbs (inside .of-range)
   - no duplicate UI rows
   ========================================================= */

.of-filters{
  margin: 12px 0 18px;
  backdrop-filter: none;

  --of-filters-h: 0px;                 /* set by JS */
  overflow: clip;                      /* modern, prevents scrollbars during anim */
  transform-origin: top;
  transition:
    max-height 420ms cubic-bezier(.2,.9,.2,1),
    opacity    220ms ease,
    transform  420ms cubic-bezier(.2,.9,.2,1);
  will-change: max-height, opacity, transform;
}

/* OPEN state (default if not collapsed) */
.of-filters:not(.is-collapsed){
  max-height: var(--of-filters-h);
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* CLOSED state */
.of-filters.is-collapsed{
  max-height: 0px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}


/* Grid */
.of-filterGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 980px){
  .of-filterGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .of-filterGrid{ grid-template-columns: 1fr; }
}

/* Card */
.of-filterCard{
  border-radius: 8px;
  padding: 30px 30px 20px;
  background: var(--surface);
}

/* Top row: title left, reset right */
.of-filterCard__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.of-filterCard__title{
 
  font-weight: 700;
  color: var(--text);
  font-size: .95rem;
  line-height: 1.1;
  text-align:left;
}

.of-filterCard__sub{ display:none; }

.of-filterCard__reset{
  border: 0;
  background: transparent;
  color: var(--muted-2);
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 10px;
  border-radius: 6px;
  margin-right: -10px;
  margin-top: -10px;
}
.of-filterCard__reset:hover{ background: rgba(15,19,32,.06); }
.of-filterCard__reset:focus{
  outline: none;
  box-shadow: var(--focus);
}

.of-filterCard__hint{ display:none; }

/* ===== Dual range core ===== */
.of-range{
  position: relative;
  height: 50px;                /* includes room for thumbs */
  display:flex;
  align-items:center;
  padding-top: 18px;           /* reserved space for floating labels */
}

/* track + fill */
.of-range__track{
  position:absolute;
  left:0; right:0;
  top: calc(50% + 9px);        /* push track down because of padding-top */
  transform: translateY(-50%);
  background: rgba(15,19,32,.14);
  height: 6px;
  border-radius: 999px;
  z-index: 1;
}

.of-range__fill{
  
  position:absolute;
  left:0%;
  top: calc(50% + 9px);
  transform: translateY(-50%);
  height: 6px;
  border-radius: 999px;
  background: var(--yt-red);
  width: 100%;
  z-index: 1;
}

/* Two range inputs stacked */
.of-range input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  position:absolute;
  left:0; right:0;
  width:100%;
  height: 34px;               /* matches .of-range height */
  margin:0;
  background: transparent;
  pointer-events: none;        /* enable only thumbs */
  z-index: 2;
}

/* Thumb styling */
.of-range input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid rgba(15,19,32,.20);
  pointer-events: auto;
  cursor: pointer;
}

.of-range input[type="range"]::-moz-range-thumb{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid rgba(15,19,32,.20);
  pointer-events: auto;
  cursor: pointer;
}


/* Floating label pill */
.of-rangeVal--float{
  position:absolute;
  top: 0;
  transform: translateX(-50%);
  pointer-events: auto;

  padding: 0px 8px 0px 8px;
  border-radius: 6px;
  background: transparent;

  border: 0;

  color: var(--muted-2);
  font-size: .86rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: center;

  width: 70px;
  min-width: 0;
}

/* Keep min/max semantics (JS sets left:xx%) */
.of-rangeVal--min{ text-align:center; }
.of-rangeVal--max{ text-align:center; }

.of-rangeVal--float:focus{
  outline:none;
  box-shadow: var(--focus);
}

/* When handles get very close, nudge labels apart */
.of-range.is-tight .of-rangeVal--min{ transform: translateX(-62%); }
.of-range.is-tight .of-rangeVal--max{ transform: translateX(-38%); }

/* Locked state (guest/nonpro) */
.of-filters.is-locked{ opacity: .75; }
.of-filters.is-locked .of-filterCard__reset,
.of-filters.is-locked input[type="range"]::-webkit-slider-thumb,
.of-filters.is-locked input[type="range"]::-moz-range-thumb{
  cursor: not-allowed;
}

/* Disabled filter inputs (UI-only) */
.of-input:disabled{
  opacity: .55;
  cursor: not-allowed;
  background: rgba(255,255,255,.65);
}

.of-reset-inline[disabled]{
  opacity:.6;
  cursor:not-allowed;
}


/* Optional: subtle stagger feel on open (cards) */
.of-filters:not(.is-collapsed) .of-filterCard{
  animation: ofFilterCardIn 360ms cubic-bezier(.2,.9,.2,1) both;
}
@keyframes ofFilterCardIn{
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .of-filters{
    transition: none;
    transform: none;
    opacity: 1;
    max-height: none;
  }
  .of-filters.is-collapsed{
    max-height: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .of-filters .of-filterCard{
    animation: none;
  }
}


/* =========================================================
   Topics Marquee (copied from niche_finder.css)
   - REQUIRED for Outlier Finder because markup uses .nf-topics
   ========================================================= */

.nf-topics{
  width:auto;
  margin:12px auto 2px;
  position:relative;
}

.nf-topics__viewport{
  overflow:hidden;
  border-radius:14px;
}

.nf-topics__track{
  display:flex;
  align-items:center;
  gap:12px;
  width:max-content;
  padding:6px 0;
  will-change: transform;
  transform: translateX(var(--nf-topics-offset, 0px));
  animation: nfTopicsMarquee 90s linear infinite;
}

.nf-topic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:8px;
  background:#fff;
  border:1px solid rgba(15,19,32,.08);
  font-size:.92rem;
  font-weight:600;
  color:var(--text);
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
}

.nf-topics__fade{
  position:absolute;
  top:0;
  bottom:0;
  width:56px;
  pointer-events:none;
  z-index:2;
}

@keyframes nfTopicsMarquee{
  from { transform: translateX(var(--nf-topics-offset, 0px)); }
  to   { transform: translateX(calc(var(--nf-topics-offset, 0px) - 50%)); }
}

.nf-topics:hover .nf-topics__track{ animation-play-state: paused; }

@media (prefers-reduced-motion: reduce){
  .nf-topics__track{ animation:none; }
}

/* =========================================================
   GRID ENTER ANIMATION (fast + smooth, bottom-in, left->right)
   Usage:
   - add .of-grid--anim on #of-grid to enable
   - each .of-v gets animation-delay via inline style (--of-i) or nth-child fallback
   ========================================================= */

.of-grid--anim .of-v{
  opacity: 0;
  transform: translateY(14px);
  animation: ofCardIn .34s cubic-bezier(.2,.9,.2,1) forwards;
  will-change: transform, opacity;
  animation-delay: calc(var(--of-i, 0) * 18ms); /* preferred stagger */
}

/* Keyframes */
@keyframes ofCardIn{
  to { opacity: 1; transform: translateY(0); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .of-grid--anim .of-v{
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* Optional: slightly snappier when loading more (append) */
.of-grid--anim.is-append .of-v{ animation-duration: .28s; }

/* Fallback stagger if you don't set --of-i in JS. (Covers first 30 items) */
.of-grid--anim:not([data-stagger="var"]) .of-v:nth-child(1)  { animation-delay: 0ms; }
.of-grid--anim:not([data-stagger="var"]) .of-v:nth-child(2)  { animation-delay: 18ms; }
.of-grid--anim:not([data-stagger="var"]) .of-v:nth-child(3)  { animation-delay: 36ms; }
.of-grid--anim:not([data-stagger="var"]) .of-v:nth-child(4)  { animation-delay: 54ms; }
.of-grid--anim:not([data-stagger="var"]) .of-v:nth-child(5)  { animation-delay: 72ms; }
.of-grid--anim:not([data-stagger="var"]) .of-v:nth-child(6)  { animation-delay: 90ms; }
.of-grid--anim:not([data-stagger="var"]) .of-v:nth-child(7)  { animation-delay: 108ms; }
.of-grid--anim:not([data-stagger="var"]) .of-v:nth-child(8)  { animation-delay: 126ms; }
.of-grid--anim:not([data-stagger="var"]) .of-v:nth-child(9)  { animation-delay: 144ms; }
.of-grid--anim:not([data-stagger="var"]) .of-v:nth-child(10) { animation-delay: 162ms; }
.of-grid--anim:not([data-stagger="var"]) .of-v:nth-child(11) { animation-delay: 180ms; }
.of-grid--anim:not([data-stagger="var"]) .of-v:nth-child(12) { animation-delay: 198ms; }
.of-grid--anim:not([data-stagger="var"]) .of-v:nth-child(13) { animation-delay: 216ms; }
.of-grid--anim:not([data-stagger="var"]) .of-v:nth-child(14) { animation-delay: 234ms; }
.of-grid--anim:not([data-stagger="var"]) .of-v:nth-child(15) { animation-delay: 252ms; }
.of-grid--anim:not([data-stagger="var"]) .of-v:nth-child(16) { animation-delay: 270ms; }
.of-grid--anim:not([data-stagger="var"]) .of-v:nth-child(17) { animation-delay: 288ms; }
.of-grid--anim:not([data-stagger="var"]) .of-v:nth-child(18) { animation-delay: 306ms; }
.of-grid--anim:not([data-stagger="var"]) .of-v:nth-child(19) { animation-delay: 324ms; }
.of-grid--anim:not([data-stagger="var"]) .of-v:nth-child(20) { animation-delay: 342ms; }
.of-grid--anim:not([data-stagger="var"]) .of-v:nth-child(21) { animation-delay: 360ms; }
.of-grid--anim:not([data-stagger="var"]) .of-v:nth-child(22) { animation-delay: 378ms; }
.of-grid--anim:not([data-stagger="var"]) .of-v:nth-child(23) { animation-delay: 396ms; }
.of-grid--anim:not([data-stagger="var"]) .of-v:nth-child(24) { animation-delay: 414ms; }
.of-grid--anim:not([data-stagger="var"]) .of-v:nth-child(25) { animation-delay: 432ms; }
.of-grid--anim:not([data-stagger="var"]) .of-v:nth-child(26) { animation-delay: 450ms; }
.of-grid--anim:not([data-stagger="var"]) .of-v:nth-child(27) { animation-delay: 468ms; }
.of-grid--anim:not([data-stagger="var"]) .of-v:nth-child(28) { animation-delay: 486ms; }
.of-grid--anim:not([data-stagger="var"]) .of-v:nth-child(29) { animation-delay: 504ms; }
.of-grid--anim:not([data-stagger="var"]) .of-v:nth-child(30) { animation-delay: 522ms; }

/* =========================================================
   SKELETON (reserves space, prevents flicker)
   ========================================================= */

.of-v--skeleton{ pointer-events:none; }
.of-v--skeleton .of-v__thumbWrap:hover .of-v__thumb{ transform:none; } /* no hover lift */
.of-v--skeleton .of-v__thumb::after{ opacity:0 !important; }          /* no inner shadow pop */
.of-v--skeleton .of-v__thumbOverlay{ opacity:1; transform:none; }     /* keep overlay space stable */
.of-v--skeleton .of-thumbBtn{ opacity:.45; }                          /* looks disabled */

/* neutral skeleton blocks */
.of-sk{
  border-radius: 10px;
  background: rgba(15,19,32,.10);
  position: relative;
  overflow: hidden;
}

/* subtle sheen (not too aggressive) */
.of-sk::after{
  content:"";
  position:absolute;
  inset:0;
  transform: translateX(-40%);
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,0) 100%
  );
  animation: ofSk 1.15s ease-in-out infinite;
  opacity:.75;
}

@keyframes ofSk{
  to { transform: translateX(140%); }
}

.of-sk--thumb{
  width:100%;
  height:100%;
  border-radius: 0; /* thumb already clipped by container */
}

.of-sk--avatar{
  width:44px;
  height:44px;
  border-radius:999px;
}

.of-sk--title{
  height: 14px;
  width: 92%;
  border-radius: 8px;
}

.of-sk--line{
  height: 12px;
  width: 70%;
  border-radius: 8px;
  opacity: .85;
}

.of-sk--line2{
  width: 52%;
  opacity: .75;
}

@media (prefers-reduced-motion: reduce){
  .of-sk::after{ animation:none; }
}
/* =========================================================
   IDEA PANEL (fixed head + fixed foot, only middle scrolls)
========================================================= */

.of-idea{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: min(420px, calc(100vw - 28px));
  height: min(72vh, 720px);

  background: #fff;
  border: 1px solid rgba(15,19,32,.10);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 60px rgba(12,24,60,.16);
  z-index: 999;

  /* ✅ key: panel itself not scrollable */
  overflow: hidden;

  display: grid;
  grid-template-rows: auto 1fr auto; /* head / scroll / foot */
}

.of-idea.is-hidden{ display:none; }

.of-idea__head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding: 14px 14px 10px;
 
}

.of-idea__title{
  font-weight: 700;
  color: var(--text);
  font-size: 1.0rem;
  line-height: 1.35;
}

.of-idea__sub{
  margin-top: 4px;
  color: var(--muted-2);
  font-size: .88rem;
  font-weight: 500;
}

.of-idea__x{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 0;
  background: rgba(15,19,32,.06);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  color: var(--text);
}
.of-idea__x:hover{ background: rgba(15,19,32,.09); }
.of-idea__x:focus{ outline:none; box-shadow: var(--focus); }

/* ✅ ONLY this scrolls */
.of-idea__scroll{
  overflow: auto;
  padding: 12px 14px 14px;
}

/* Views */
.of-idea__view.is-hidden{ display:none; }

/* Fixed footer */
.of-idea__foot{
  border-top: 1px solid rgba(15,19,32,.08);
  padding: 12px 14px 14px;
  background: #fff;
}

/* Stack list styles */
.of-idea__stack{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.of-ideaItem{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;

  padding: 10px 10px;
  border-radius: 12px;
  background: rgba(15,19,32,.05);
}

.of-ideaItem__main{ min-width:0; }
.of-ideaItem__t{
  font-weight: 600;
  color: var(--text);
  font-size: .92rem;
  line-height: 1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.of-ideaItem__m{
  margin-top: 8px;
  color: var(--muted-2);
  font-size: .85rem;
  font-weight: 500;
}

.of-ideaItem__rm{
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--muted-2);
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 8px;
  border-radius: 8px;
}
.of-ideaItem__rm:hover{ background: rgba(15,19,32,.07); }
.of-ideaItem__rm:focus{ outline:none; box-shadow: var(--focus); }

/* Ensure the remove (X) icon is always visible and sized correctly */
.of-ideaItem__rm{
  display:grid;
  place-items:center;
  color: rgba(15,19,32,.72); /* higher contrast than muted-2 on light surfaces */
}

.of-ideaItem__rm svg{
  width:18px;
  height:18px;
  display:block;
}


/* Empty state */
.of-ideaEmpty{
  border-radius: 12px;
  border: 1px dashed rgba(15,19,32,.14);
  padding: 14px 12px;
  background: rgba(15,19,32,.03);
}
.of-ideaEmpty__t{ font-weight: 750; color: var(--text); margin-bottom: 6px; }
.of-ideaEmpty__s{ color: var(--muted-2); font-weight: 520; font-size: .92rem; }

/* Twist in footer */
.of-idea__label{
  display:block;
  font-size: .88rem;
  font-weight: 500;
  color: var(--muted-2);
  margin-bottom: 8px;
}

.of-idea__input{
  width: 100%;
  border-radius: var(--r-sm);
  border: 0px solid rgba(15,19,32,.12);
  background: var(--surface-2);
  padding: 12px 12px;
  font: inherit;
  font-size: .92rem;
}
.of-idea__input:focus{ outline:none; box-shadow: var(--focus); }

.of-idea__actions{
  margin-top: 10px;
  display:flex;
  gap: 10px;
}

.of-idea__btn{
  height: 50px;
  border-radius: var(--r-sm);
  border: 0px solid rgba(15,19,32,.12);
  background: rgba(15,19,32,.04);
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  cursor:pointer;
  flex: 1 1 0;
}
.of-idea__btn:hover{ background: rgba(15,19,32,.06); }
.of-idea__btn:focus{ outline:none; box-shadow: var(--focus); }
.of-idea__btn:disabled{ opacity:.6; cursor:not-allowed; }

.of-idea__btn--primary{
  background: var(--yt-red);
  color: #fff;
  border-color: rgba(0,0,0,.08);
}

.of-idea__btn--primary:hover{
  background: var(--yt-red);
  transform:translateY(-1px);
  filter:brightness(1.03)}
.of-idea__btn--primary:focus{transform:translateY(0);filter:brightness(.98);box-shadow: none}
/* Back button hidden helper */
.of-idea__actions .is-hidden{ display:none; }

/* Ideas formatting (same “middle area” as stack) */
.of-ideaRes__head{
  font-weight: 750;
  color: var(--text);
  margin-bottom: 10px;
}

.of-ideaRes__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.of-ideaCard{
  padding: 10px 10px;
  border-radius: 12px;
  background: rgba(15,19,32,.05);
  transition: background .16s ease;
}

.of-ideaCard:hover{
  background: rgba(15,19,32,.10);
}

.of-ideaCard__theme{
  font-weight: 600;
  color: var(--text);
  font-size: .92rem;
  line-height: 1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.of-ideaCard__desc{
  margin-top: 4px;
  color: var(--muted-2);
  font-size: .85rem;
  font-weight: 500;
}

/* =========================================================
   IDEA PANEL ANIMATIONS (pro)
========================================================= */

/* panel pulse when adding item */
.of-idea.is-pulse{
  animation: oiPulse .24s ease-out;
}
@keyframes oiPulse{
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(-2px) scale(1.008); }
  100% { transform: translateY(0) scale(1); }
}

/* subtle fade between views */
.of-idea.is-viewFade .of-idea__scroll{
  animation: oiFade .22s ease-out;
}
@keyframes oiFade{
  from { opacity:.7; transform: translateY(2px); }
  to   { opacity:1;  transform: translateY(0); }
}

/* switching state (generate pressed) */
.of-idea.is-switching .of-idea__scroll{
  animation: oiSwitchOut .26s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes oiSwitchOut{
  from { opacity:1; transform: translateY(0); }
  to   { opacity:.78; transform: translateY(6px); }
}

/* items stagger in */
.of-ideaItem{
  animation: oiItemIn .26s cubic-bezier(.2,.9,.2,1) both;
  animation-delay: calc(var(--oi-i, 0) * 18ms);
}
@keyframes oiItemIn{
  from { opacity:0; transform: translateY(8px); }
  to   { opacity:1; transform: translateY(0); }
}

/* just added pop */
.of-ideaItem.is-justAdded{
  animation: oiJustAdded .34s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes oiJustAdded{
  0%   { transform: translateY(0) scale(1); box-shadow:none; }
  35%  { transform: translateY(-2px) scale(1.02); box-shadow:0 16px 34px rgba(12,24,60,.12); }
  100% { transform: translateY(0) scale(1); box-shadow:none; }
}

/* Loading UI */
.of-ideaLoading__bar{
  height: 6px;
  border-radius: 999px;
  background: rgba(15,19,32,.10);
  overflow:hidden;
  position: relative;
}
.of-ideaLoading__bar::after{
  content:"";
  position:absolute;
  left:-40%;
  top:0;
  height:100%;
  width:40%;
  border-radius:999px;
  background: var(--yt-red);
  animation: oiBar 1.05s ease-in-out infinite;
}
@keyframes oiBar{
  0%   { transform: translateX(0); }
  50%  { transform: translateX(170%); }
  100% { transform: translateX(340%); }
}
.of-ideaLoading__text{
  margin-top: 10px;
  color: var(--muted-2);
  font-weight: 650;
  font-size: .92rem;
}

/* skeleton cards */
.of-ideaCard--skel{
  border-color: rgba(15,19,32,.08);
  background: rgba(15,19,32,.03);
  overflow:hidden;
  position:relative;
  animation: oiCardIn .24s cubic-bezier(.2,.9,.2,1) both;
  animation-delay: calc(var(--oi-i, 0) * 22ms);
}
@keyframes oiCardIn{
  from { opacity:0; transform: translateY(10px); }
  to   { opacity:1; transform: translateY(0); }
}
.of-ideaCard--skel::after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.28), rgba(255,255,255,0));
  transform: translateX(-30%);
  animation: oiSheen 1.25s ease-in-out infinite;
  opacity:.75;
}
@keyframes oiSheen{
  to { transform: translateX(60%); }
}
.of-ideaSkel__t{
  height: 14px;
  width: 72%;
  border-radius: 10px;
  background: rgba(15,19,32,.10);
  margin-bottom: 10px;
}
.of-ideaSkel__l{
  height: 12px;
  width: 92%;
  border-radius: 10px;
  background: rgba(15,19,32,.10);
  opacity:.85;
}
.of-ideaSkel__l2{
  width: 78%;
  margin-top: 8px;
  opacity:.7;
}

/* reveal ideas results */
.of-idea.is-reveal .of-ideaCard{
  animation: oiReveal .34s cubic-bezier(.2,.9,.2,1) both;
  animation-delay: calc(var(--oi-i, 0) * 22ms);
}
@keyframes oiReveal{
  from { opacity:0; transform: translateY(10px); }
  to   { opacity:1; transform: translateY(0); }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .of-idea.is-pulse,
  .of-idea.is-viewFade .of-idea__scroll,
  .of-idea.is-switching .of-idea__scroll,
  .of-ideaItem,
  .of-ideaItem.is-justAdded,
  .of-ideaLoading__bar::after,
  .of-ideaCard--skel,
  .of-ideaCard--skel::after,
  .of-idea.is-reveal .of-ideaCard{
    animation: none !important;
  }
}

.of-idea__scroll{
  scrollbar-width: thin;
  scrollbar-color: rgba(15,19,32,.18) transparent;
}

.of-idea__scroll::-webkit-scrollbar{
  width:6px;
}
.of-idea__scroll::-webkit-scrollbar-thumb{
  background: rgba(15,19,32,.16);
  border-radius:999px;
}
.of-idea__scroll::-webkit-scrollbar-thumb:hover{
  background: rgba(15,19,32,.28);
}
/* Bookmark button (icon-only state change; no button color change) */
.of-ideaCard{ position: relative; } /* required for absolute bookmark button */

.of-ideaBm{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;

  background:rgba(255,255,255,.92);
  border:0px solid rgba(15,19,32,.10);

  cursor:pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}

.of-ideaBm__icon{
  width:32px;
  height:32px;
  display:block;
}

.of-ideaBm:hover .of-ideaBm__icon{ opacity: 1; }

/* =========================================================
   Outlier Finder: In-grid "Scanning YouTube..." skeleton title
========================================================= */

/* Optional: hide old loader row completely (since we no longer use it) */
#of-loading{ display:none !important; }

/* Title line inside scan skeletons */
.of-scanTitle{
  font-size: 1.0rem;
  font-weight: 520;
  line-height: 1.35;
  color: var(--muted-2);
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}

/* Synced dots */
.of-scanDots{
  display: inline-block;
  width: 1.2em;          /* keeps layout stable while dots change */
  text-align: left;
  margin-left: 2px;
  color: var(--muted-2);
}

/* Ensure scan skeletons behave like other skeletons (no interactions) */
.of-v--scanSkel{ pointer-events:none; }

/* =========================================================
   LOCK OVERLAY — centered exactly over locked cards (ABS)
   ========================================================= */

#of-grid{
  position: relative; /* anchor for absolute overlay */
}

/* The overlay container is absolutely positioned by JS via inline style */
.of-lockOverlayAbs{
  position: absolute;
  left: 0;
  width: 100%;
  /* top + height set by JS */
  top: 0;
  height: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 18px;
  z-index: 50;

  pointer-events: none; /* only panel clickable */
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(0,0,0,.10),
    rgba(0,0,0,0) 62%
  );
}

.of-lockOverlayAbs.is-hidden{ display:none; }

.of-lockOverlayAbs__panel{
  pointer-events: auto;
  width: min(440px, 100%);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 20px 60px rgba(0,0,0,.14);
  border: 1px solid rgba(0,0,0,.05);

  padding: 34px 30px 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.of-lockOverlayAbs__title{
  font-weight: 800;
  font-size: 1.55rem;
  color: var(--text);
  letter-spacing: .01em;
}
.of-lockOverlayAbs__desc{
  margin-top: 10px;
  font-size: .95rem;
  color: var(--muted-2);
  max-width: 360px;
  line-height: 1.45;
}
.of-google-cta.btn-google{
  width: 100%;
  justify-content: center;
  padding: 16px 16px;
  border-radius: var(--r-md);
  font-size: 1rem;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  margin-top: 18px;
}
.of-google-cta.btn-google:hover{ transform: translateY(-1px); }

.of-lockOverlayAbs__micro{
  margin-top: 14px;
  font-size: .86rem;
  color: var(--muted-2);
  opacity: .85;
}

/* =========================================================
   Blur locked cards driven by data-locked="1"
   (remove inline filter styles afterwards)
   ========================================================= */

.of-v[data-locked="1"] .of-v__thumb img,
.of-v[data-locked="1"] .of-v__duration,
.of-v[data-locked="1"] .of-v__chimg img,
.of-v[data-locked="1"] .of-v__title,
.of-v[data-locked="1"] .of-v__line{
  filter: blur(4px);
  opacity: .78;
  transform: translateZ(0);
  will-change: filter;
}
.of-v[data-locked="1"] .of-v__score{
  filter: none !important;
  opacity: 1 !important;
}

/* Prevent interaction on locked preview */
.of-v[data-locked="1"] .of-v__thumbLink,
.of-v[data-locked="1"] .of-v__chimg,
.of-v[data-locked="1"] .of-v__title{
  pointer-events: none;
}

/* Optional authed switch */
html.is-authed .of-lockOverlayAbs{ display:none; }
html.is-authed .of-v[data-locked="1"] .of-v__thumb img,
html.is-authed .of-v[data-locked="1"] .of-v__duration,
html.is-authed .of-v[data-locked="1"] .of-v__chimg img,
html.is-authed .of-v[data-locked="1"] .of-v__title,
html.is-authed .of-v[data-locked="1"] .of-v__line{
  filter:none; opacity:1;
}