/* FlipStak-Syrup 1.0.2 — auto-orientation + per-block ratio defaults */

/* Make the stack live *inside* the UNA page block */
/*.pancake-wrap {
  width: 100%;
  max-width: 480px;          /* constrain inside the block */
/*  margin: 2rem auto 3rem;    /* center it within the page block */
/*  display: block;
/*} */
/* Reserve real vertical space for the stacked cards */

/* =========================================
   3-COLUMN GRID (AUTHOR + LIBRARIES)
   KEY FIXES FOR 3/3 LAYOUT
========================================= */

.fs-syrup-library-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /*EXACTLY 3 columns */
    gap: 24px;
    margin-bottom: 16px;
    width: 100%;
    max-width: 100%; /* Ensure full width */
}

/* Grid item */
.fs-syrup-library-grid .fs-syrup-library-pancake {
    background-color: #8e54e9 !important;
    background-image: linear-gradient(135deg, #09203f 0%, #8e54e9 52%, #0ed2f7 100%) !important;
    border-radius: 6px;
    padding: 12px;
    min-width: 0;
    overflow: hidden;
}

/* Ensure pancake stack inside grid item doesn't break layout */
.fs-syrup-library-pancake .pancake-stack {
    max-width: 100%;
    width: 100%;
}

/* Title spacing */
.fs-syrup-library-pancake .bx-def-font-h4 {
    margin-bottom: 10px;
	color: #ffffff !important;
    font-weight: 400;
}

/* ======================
   Responsive Breakpoints
====================== */

/* Tablet: 2 columns */
@media (max-width: 1200px) {
    .fs-syrup-library-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: 1 column */
@media (max-width: 768px) {
    .fs-syrup-library-grid {
        grid-template-columns: 1fr;
    }
}

.pancake-stack {
  --stack-gap: 10px;
  --max-cards: 12;  
flex:wrap;         /* your current LIMIT in Db.php */
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

/* Fake-height element so the page block is as tall as the stack */
.pancake-stack::before {
  content: "";
  display: block;
  width: 100%;
  /* 177% ≈ 16/9 height for a 9/16 card, plus extra for stacked offset */
  padding-bottom: calc(177% + (var(--stack-gap) * (var(--max-cards) - 1)));
}

/* Mobile-first default from data-mobile-ratio; auto-orientation can override */
.flip-card {
  position: absolute;
  width: 100%;
  aspect-ratio: 9 / 16;
  perspective: 1000px;
  top: calc(var(--index) * var(--stack-gap));
  z-index: calc(100 - var(--index));
  transform: translateY(0);
  transition:
    top .3s ease,
    z-index .3s ease,
    transform .3s ease;
}
/* Per-video overrides via JS */
.flip-card.landscape { aspect-ratio: 16 / 9; }
.flip-card.square    { aspect-ratio: 1 / 1; }

/* Per-block defaults (Option A) */
.pancake-wrap[data-mobile-ratio="16/9"]  .flip-card { aspect-ratio: 16 / 9; }
.pancake-wrap[data-mobile-ratio="1/1"]   .flip-card { aspect-ratio: 1 / 1;  }
.pancake-wrap[data-mobile-ratio="9/16"]  .flip-card { aspect-ratio: 9 / 16; }

@media (min-width: 640px) {
  .pancake-wrap[data-desktop-ratio="16/9"] .flip-card { aspect-ratio: 16 / 9; }
  .pancake-wrap[data-desktop-ratio="1/1"]  .flip-card { aspect-ratio: 1 / 1;  }
  .pancake-wrap[data-desktop-ratio="9/16"] .flip-card { aspect-ratio: 9 / 16; }
}

/* Card internals */
.flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s;
  border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 6px 24px rgba(14,210,247,.18); }
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }

.flip-front, .flip-back { position: absolute; inset: 0; backface-visibility: hidden; }
.flip-front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flip-back { display: flex; align-items: center; justify-content: center; transform: rotateY(180deg); }
.pancake-video { width: 100%; height: 100%; max-height: 100%; display: block; object-fit: cover; }

/* Dismiss animation */
.flip-card.bounce-out { animation: bounceOutUp .5s ease forwards; }
@keyframes bounceOutUp { 0%{transform: translateY(0); opacity:1;} 40%{transform: translateY(-10px);} 100%{transform: translateY(-300px); opacity:0;} }

/* Reduced motion only if data-force-motion is absent or 0 */
@media (prefers-reduced-motion: reduce) {
  .pancake-wrap:not([data-force-motion="1"]) .flip-inner,
  .pancake-wrap:not([data-force-motion="1"]) .flip-card { transition: none !important; }
  .pancake-wrap:not([data-force-motion="1"]) .flip-card.bounce-out { animation: none !important; }
}
/* Simple visible front face so cards aren’t just black rectangles */
.pancake-front-overlay {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
  background: radial-gradient(circle at top, rgba(255,255,255,0.08), rgba(0,0,0,0.9));
  box-sizing: border-box;
}

.pancake-front-title {
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
  max-width: 90%;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* Only show the title on the top card; hide overlay text on deeper cards */
.pancake-stack .flip-card:not(:first-child) .pancake-front-overlay {
  opacity: 0;
  pointer-events: none;
}
/* Creator Library grid */
.fs-syrup-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}

.fs-syrup-library-card {
  background: rgba(255,255,255,0.6);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
}

.fs-syrup-library-thumb {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
}

.fs-syrup-library-thumb img,
.fs-syrup-library-thumb-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fs-syrup-library-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #614fb8cc;
  font-size: 13px;
  background: #fff;
}

.fs-syrup-library-pill {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.fs-syrup-library-pill-on {
  background: #22c55e;
  color: #02190a;
}

.fs-syrup-library-pill-off {
  background: #4b5563;
  color: #e5e7eb;
}

.fs-syrup-library-meta {
  padding: 8px 10px 10px;
}

.fs-syrup-library-title {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
}

.fs-syrup-library-added {
  font-size: 11px;
  color: #9ca3af;
}
.fs-syrup-library-thumb-link {
  border: 0;
  padding: 0;
  background: transparent;
  display: block;
  width: 100%;
  text-align: inherit;
  cursor: pointer;
}

.fs-syrup-library-pill {
  border: 0;
  cursor: pointer;
}
.fs-syrup-library-thumb-wrap {
  position: relative; /* THIS is the missing piece */
}
.fs-syrup-library-pill {
  z-index: 5;
}
/* --- Syrup Creator Library: ensure pill positions over EACH thumbnail --- */
.fs-syrup-library-card{
  position: relative; /* backup positioning context */
}

.fs-syrup-library-card .fs-syrup-library-thumb-wrap{
  position: relative !important; /* this should become the offsetParent */
  width: 100%;
  display: block;
}

.fs-syrup-library-card .fs-syrup-library-pill{
  position: absolute !important;
  left: 8px;
  bottom: 8px;
  z-index: 50;
  pointer-events: auto;
}

/* Keep the thumb clickable but under the pill */
.fs-syrup-library-card .fs-syrup-library-thumb-link{
  position: relative;
  z-index: 1;
}
.fs-syrup-libs, .fs-syrup-libview { width:100%; }
.fs-syrup-libs-list { margin-top: 8px; }
.fs-syrup-libview-actions .bx-btn { white-space: nowrap; 
}
/* ================================
   DESKTOP PORTRAIT PLAYBACK FIX
   Keep library thumbnails uniform;
   preserve portrait only during playback
================================ */

@media (min-width: 640px) {
  /* Keep the front preview stack controlled by desktop block default */
  .pancake-wrap[data-desktop-ratio="16/9"] .flip-card.portrait:not(.flipped) {
    aspect-ratio: 16 / 9 !important;
  }

  /* When opened/flipped, portrait videos keep 9:16 */
  .pancake-wrap .flip-card.portrait.flipped {
    aspect-ratio: 9 / 16 !important;
    width: min(360px, 32vw) !important;
    height: auto !important;
  }

  .pancake-wrap .flip-card.portrait.flipped .flip-inner,
  .pancake-wrap .flip-card.portrait.flipped .flip-front,
  .pancake-wrap .flip-card.portrait.flipped .flip-back {
    width: 100%;
    height: 100%;
  }

  .pancake-wrap .flip-card.portrait.flipped .pancake-video {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
  }
}
@media (max-width: 768px) {
  .fs-syrup-library-pancake {
    background: linear-gradient(135deg, #09203f, #8e54e9, #0ed2f7) !important;
  }
}

/* ================================
   EDIT MODE — sectioned panel + compact sortable video list
================================ */
.fs-syrup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(128,128,128,.2);
}
.fs-syrup-head-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  min-width: 0;
  overflow-wrap: anywhere;
}

.fs-syrup-edit { max-width: 720px; }

.fs-syrup-add-actions { flex-wrap: wrap; }

.fs-syrup-edit-section {
  border: 1px solid rgba(128,128,128,.25);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}
.fs-syrup-edit-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}
.fs-syrup-edit-hint {
  font-size: 12px;
  opacity: .7;
  margin-bottom: 12px;
}
.fs-syrup-edit-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

/* Details form: stacked labelled fields */
.fs-syrup-details-form .fs-syrup-field {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.fs-syrup-field-label {
  flex: 0 0 84px;
  font-size: 13px;
  opacity: .8;
}
.fs-syrup-details-form .fs-syrup-field input[type="text"],
.fs-syrup-details-form .fs-syrup-field select {
  flex: 1;
  max-width: 380px;
}

/* Compact sortable video rows */
.fs-syrup-edit-list { margin-top: 4px; }

.fs-syrup-edit-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  margin-bottom: 8px;
  border: 1px solid rgba(128,128,128,.2);
  border-radius: 8px;
  background: rgba(128,128,128,.04);
}
.fs-syrup-edit-item.ui-sortable-helper {
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
}
.fs-syrup-edit-placeholder {
  height: 64px;
  margin-bottom: 8px;
  border: 2px dashed rgba(142,84,233,.6);
  border-radius: 8px;
  background: rgba(142,84,233,.08);
}

.fs-syrup-drag-handle {
  flex: 0 0 auto;
  cursor: grab;
  user-select: none;
  font-size: 18px;
  line-height: 1;
  opacity: .55;
  padding: 4px 6px;
  touch-action: none;
}
.fs-syrup-drag-handle:active { cursor: grabbing; }

.fs-syrup-edit-thumb {
  flex: 0 0 auto;
  width: 80px;
  height: 45px;             /* 16:9 */
  border-radius: 4px;
  background-color: rgba(128,128,128,.25);
  background-size: cover;
  background-position: center;
}

.fs-syrup-edit-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fs-syrup-remove-form { flex: 0 0 auto; margin: 0; }
.fs-syrup-remove-btn {
  cursor: pointer;
  border: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  color: #fff;
  background: rgba(220,38,38,.85);
}
.fs-syrup-remove-btn:hover { background: #dc2626; }

.fs-syrup-edit-empty { font-size: 13px; opacity: .7; padding: 8px 0; }

/* Danger zone */
.fs-syrup-edit-section.fs-syrup-danger { border-color: rgba(220,38,38,.45); }
.fs-syrup-danger .fs-syrup-edit-title { color: #dc2626; }
.fs-syrup-danger .fs-syrup-edit-actions { margin-top: 8px; }
.fs-syrup-danger .fs-syrup-edit-hint { margin-bottom: 0; }

.bx-btn-danger { background: #dc2626 !important; color: #fff !important; }

@media (max-width: 480px) {
  .fs-syrup-details-form .fs-syrup-field { align-items: flex-start; flex-direction: column; gap: 4px; }
  .fs-syrup-field-label { flex: none; }
  .fs-syrup-edit-thumb { width: 64px; height: 36px; }
}

/* ======================
   Pancake heading + favorite button
   The pancake cards sit on a dark purple/blue gradient, so the stock
   bx-favorite link (themed for light backgrounds) needs to be forced white.
====================== */
.fs-syrup-pancake-head {
  display: flex;
  /* Wrap, so a narrow grid cell moves the two icons onto their own row instead
     of squeezing the name. Without this, a 3-up grid on a smaller viewport left
     the title barely 60px and broke "New UAT LIB" into three ragged lines. */
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 10px;
  row-gap: 6px;
}

/* The name is the card's primary information, so it takes the flexible space
   and keeps a floor. Below that floor the actions wrap rather than shrink it
   further. 110px is measured, not guessed: the actions are 61px wide, so the
   handover happens at ~181px of header - narrower than any card in the 3-up
   grid at desktop, wider than the cells that were breaking. */
.fs-syrup-pancake-titles {
  flex: 1 1 auto;
  min-width: 110px;
}

/* Stays hard right whether it sits beside the title or on its own row. */
.fs-syrup-pancake-head .fs-tile-actions { margin-left: auto; }

/* The wrapper owns the spacing now. */
.fs-syrup-pancake-head .bx-def-font-h4 { margin-bottom: 0; }

/* Applies to the Flipstak tiles AND to "All Videos", so the two headings in the
   same grid stay the same size. */
.fs-syrup-library-pancake .bx-def-font-h4 {
  font-size: 1.0625rem;
  line-height: 1.3;
  /* Two lines then ellipsis. Cards sit in a grid, so an unbounded title makes
     one card four lines tall and knocks every thumbnail in the row out of
     alignment. The full name is on the element's title attribute. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* A name with no spaces used to run 107px past its column, straight over the
     bookmark and the star. */
  overflow-wrap: break-word;
}

.fs-syrup-pancake-byline {
  color: rgba(255,255,255,.75) !important;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fs-syrup-pancake-head .bx-favorite { flex: none; }

.fs-syrup-pancake-head .bx-favorite a,
.fs-syrup-pancake-head .bx-favorite .sys-action-counter {
  color: #ffffff !important;
}

.fs-syrup-pancake-head .bx-favorite a:hover { opacity: .8; }

/* ================================================================
   PLAYER CHROME (FIG 4C) + CLICK-TO-ACTION (FIG 5C) + IMMERSIVE
   Appended last on purpose: the desktop portrait block above uses
   !important, so these rules need both later source order AND
   !important of their own to win where they overlap.
================================================================ */

/* ---- chrome ---------------------------------------------------
   A direct child of .flip-card, SIBLING of .flip-inner. Inside a
   face it would flip away (backface-visibility) or be mirrored and
   clipped by .flip-inner's overflow:hidden; inside .flip-inner it
   would sit in the preserve-3d subtree. Out here it must carry no
   transform of its own, or .flip-card's perspective would skew it.
   .flip-card is positioned, so z-index 2 is enough to clear
   .flip-inner - the card is already its own stacking context.
---------------------------------------------------------------- */
.fs-chrome {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease;
  contain: layout style;
  will-change: opacity;
}
.flip-card.flipped .fs-chrome { opacity: 1; visibility: visible; }
/* Mirrors the existing "only the top card shows chrome" rule, but keyed on the
   active card rather than :first-child. */
.pancake-stack .flip-card:not(.flipped) .fs-chrome { opacity: 0; pointer-events: none; }
.fs-chrome [data-fs] { pointer-events: auto; }
/* On legacy iOS the video can still escape to the OS player via the native
   controls; nothing of ours can paint over that, so hide it rather than lie. */
.pancake-wrap.fs-native-video .fs-chrome { opacity: 0 !important; visibility: hidden !important; }

/* ---- action rail: down the RIGHT edge, SKIP above SAVE ---------------- */
.fs-rail {
  position: absolute;
  right: max(10px, env(safe-area-inset-right));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.fs-ctl {
  -webkit-appearance: none; appearance: none;
  min-width: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font: 700 10px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: .06em;
  /* Legible over any frame without a heavy plate behind it. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .7));
}
.fs-ctl-i {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .42);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .9);
  transition: transform .15s ease, background .15s ease;
}
.fs-ctl:active .fs-ctl-i { transform: scale(.9); }
.fs-ctl-l { display: block; }
.fs-ctl-sub { display: block; font-size: 8px; opacity: .75; margin-top: -2px; }
.fs-ctl:focus-visible { outline: 2px solid #0ed2f7; outline-offset: 4px; border-radius: 10px; }

/* Saved state - flipped instantly on tap, then reconciled with UNA's response. */
.fs-save[aria-pressed="true"] .fs-ctl-i { background: #0ed2f7; color: #02202b; box-shadow: inset 0 0 0 1.5px #0ed2f7; }
.fs-save[aria-pressed="true"] { color: #0ed2f7; }

/* ---- sound ------------------------------------------------------------- */
.fs-vol { position: relative; display: flex; flex-direction: column; align-items: center; }
/* aria-pressed="true" on this button means MUTED. */
.fs-volbtn .fs-ico-off { display: none; }
.fs-volbtn[aria-pressed="true"] .fs-ico-on { display: none; }
.fs-volbtn[aria-pressed="true"] .fs-ico-off { display: block; }
.fs-volbtn[aria-pressed="true"] .fs-ctl-i { background: rgba(0, 0, 0, .62); }

/* The slider slides out to the LEFT of the rail, so it never overlaps the
   picture edge or the scrubber. Hidden until hover/focus to keep the frame clean. */
.fs-vol-range {
  position: absolute;
  right: calc(100% + 10px);
  top: 24px;
  transform: translateY(-50%);
  width: 104px;
  height: 22px;
  margin: 0;
  padding: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, visibility 0s linear .15s;
  pointer-events: auto;
  touch-action: none;
}
.fs-vol:hover .fs-vol-range,
.fs-vol:focus-within .fs-vol-range {
  opacity: 1; visibility: visible; transition-delay: 0s;
}
.fs-vol-range::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: rgba(255, 255, 255, .35);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
.fs-vol-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; margin-top: -5px;
  border: 0; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
.fs-vol-range::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .35); }
.fs-vol-range::-moz-range-progress { height: 4px; border-radius: 2px; background: #0ed2f7; }
.fs-vol-range::-moz-range-thumb {
  width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff;
}
/**
 * No slider on touch. iOS makes HTMLMediaElement.volume read-only - assigning to
 * it is silently ignored - so a slider there would be a control that visibly
 * does nothing. The mute button works on every platform.
 */
@media (hover: none), (pointer: coarse) {
  .fs-vol-range { display: none; }
}
/* Same rule, resolved in JS - covers touch browsers that latch a sticky :hover
   after a tap, where the media query alone would still reveal the slider. */
.pancake-wrap[data-fs-touch="1"] .fs-vol-range { display: none; }

/* ---- centre play/pause affordance ------------------------------------- */
.fs-playstate {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 76px; height: 76px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
/* Shown only while paused, so it never covers the picture during playback. */
.flip-card.fs-paused .fs-playstate { opacity: 1; }

/* ---- footer: timer above the scrubber --------------------------------- */
.fs-foot {
  position: absolute;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.fs-btn {
  min-height: 44px;            /* iOS minimum tap target */
  min-width: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  font: 600 13px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: .04em;
  color: #fff;
  cursor: pointer;
  /* Video frames are arbitrary: a dark scrim alone vanishes on dark footage and
     white text vanishes on bright footage. The outline plus the text shadow keep
     these legible over anything, and match the outlined shapes in FIG 4C. */
  background: rgba(0, 0, 0, .55);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85), 0 1px 6px rgba(0, 0, 0, .5);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
.fs-btn:focus-visible { outline: 2px solid #0ed2f7; outline-offset: 2px; }

/* ---- orientation -------------------------------------------------------
   Portrait is the design target: a tall picture with the rail down the right.
   In landscape the viewport is short, so the rail tightens and drops its text
   labels rather than overflowing off-screen. Keyed on aspect-ratio rather than
   `orientation` so it also holds in a desktop responsive pane, which is where
   this was first reported. */
@media (max-aspect-ratio: 3/4) {
  .fs-rail { gap: 22px; }
}
@media (min-aspect-ratio: 1/1) and (max-height: 620px) {
  .fs-rail { gap: 10px; top: 50%; }
  .fs-ctl-i { width: 40px; height: 40px; }
  .fs-ctl-i svg { width: 22px; height: 22px; }
  .fs-ctl-l, .fs-ctl-sub { display: none; }   /* icon-only; aria-label still names it */
  .fs-playstate { width: 60px; height: 60px; }
  .fs-nav { height: 52px; }
}

/* tabular figures + a fixed width so a per-second tick cannot reflow anything */
.fs-time {
  display: inline-block;
  min-width: 9ch;
  text-align: right;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font: 600 13px/1 system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
}

.fs-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 64px;
  border: 0;
  background: rgba(0, 0, 0, .35);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  opacity: .35;
  cursor: pointer;
}
.fs-nav-prev { left: 0; border-radius: 0 8px 8px 0; }
.fs-nav-next { right: 0; border-radius: 8px 0 0 8px; }
/**
 * Desktop only. On a touch device swiping already does this, and the "next"
 * chevron would sit underneath the action rail - so the chevrons exist purely
 * to give mouse users an affordance they otherwise lack. First
 * pointer-capability query in this file, scoped to the new chrome alone.
 */
.fs-nav { display: none; }
@media (hover: hover) and (pointer: fine) {
  .fs-nav { display: block; opacity: 0; transition: opacity .15s ease; }
  .flip-card.flipped:hover .fs-nav,
  .fs-nav:focus-visible { opacity: .9; }
}

/* ---- interstitial --------------------------------------------
   One per stack, sibling of .pancake-stack. .pancake-wrap has no
   rules of its own today (the original block is commented out), so
   position:relative here is purely additive.
---------------------------------------------------------------- */
.pancake-wrap { position: relative; }

/* .pancake-stack is position:relative with z-index:auto, so it does NOT create
   a stacking context - which means the cards' z-index 100/101 (written inline by
   reindex()) would compete directly with the panel below and paint over it.
   isolate contains that whole 0-101 range inside the stack; the panel then only
   has to beat the stack itself. Belt and braces: z-index 200 as well. */
.pancake-stack { isolation: isolate; }

.fs-cta {
  position: absolute;
  inset: 0;
  z-index: 200;
  overflow: hidden;             /* the poster respects the 12px radius at rest */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Per FIG 5C the media stays visible AROUND the dialog rather than being
     painted over, so this is a scrim, not an opaque screen. */
  background: rgba(4, 14, 30, .72);
  color: #fff;
  border-radius: 12px;
}

/**
 * UNA's bundle ships Tailwind preflight, whose [hidden] rule is wrapped in
 * :where() and so carries ZERO specificity - any plain class selector beats it.
 * This bit us twice: once on the panel itself, and once on .fs-cta-close, which
 * stayed visible next to a live CTA because its own class set `display`.
 * One rule for every hideable descendant, so it cannot happen a third time.
 */
.fs-cta[hidden],
.fs-cta [hidden] { display: none !important; }

/* The next video's poster (ITN-45 item 5) with a gradient scrim over it.
   Paint order inside the panel's stacking context: the panel's own
   background, then the image (a child), then ::after (later in tree order),
   then the box and the CTA-screen progress bar at z-index 1. With no poster
   the panel's plain background is the scrim, exactly as before. */
.fs-cta-next-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.fs-cta.fs-cta-has-poster::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(4, 14, 30, .45), rgba(4, 14, 30, .85));
}

/* The dialog box itself (FIG 5C, item 520) */
.fs-cta-box {
  position: relative;
  z-index: 1;
  width: min(88%, 420px);
  background: rgba(9, 32, 63, .97);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px;
  padding: 18px 18px 20px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
.fs-cta-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.fs-cta-title {
  flex: 1 1 auto;
  margin: 0;
  font: 700 14px/1.2 system-ui, -apple-system, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Close (ITN-45 item 1): a real button in the head, 44px hit area, pulled
   flush with the box edge by the negative margins. */
.fs-cta-x {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: -10px -12px -10px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.fs-cta-x:hover { background: rgba(255, 255, 255, .12); }
.fs-cta-x:focus-visible { outline: 2px solid #0ed2f7; outline-offset: 2px; }

/* Up next (ITN-45 item 5): kicker + the next card's title, clamped to two
   lines like .pancake-front-title. */
.fs-cta-next { margin: 0 0 14px; }
.fs-cta-next-label {
  display: block;
  margin-bottom: 4px;
  font: 600 11px/1.2 system-ui, -apple-system, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .75;
}
.fs-cta-next-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font: 400 14px/1.3 system-ui, -apple-system, sans-serif;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}

/* Auto-close countdown (ITN-45 items 1 and 4). tabular-nums so the line does
   not wobble as the digits change. */
.fs-cta-count {
  margin: 14px 0 0;
  text-align: center;
  font: 12px/1.3 system-ui, -apple-system, sans-serif;
  color: rgba(255, 255, 255, .75);
  font-variant-numeric: tabular-nums;
}

/* ACCEPT and DECLINE side by side, equal width, as drawn; DECLINE alone
   fills the row when there is no action. */
.fs-cta-actions { display: flex; align-items: stretch; gap: 12px; }
.fs-cta-slot { display: contents; }

.fs-cta-pill {
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border: 0;
  border-radius: 999px;
  font: 600 15px/1.2 system-ui, -apple-system, sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  overflow-wrap: anywhere;
}
/* ACCEPT = the primary choice; DECLINE = the quieter one. */
.fs-cta-accept { background: #0ed2f7; color: #02202b; }
.fs-cta-accept:hover { color: #02202b; opacity: .9; }
.fs-cta-decline { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
.fs-cta-decline:hover { background: rgba(255, 255, 255, .1); }
/* The link pill after its overlay has opened: still pressable, quieter. */
.fs-cta-accept-done { opacity: .55; }
/* The already-connected state (ITN-48, 1.8.1): "Following X" is a status the
   viewer is in, not a button, so it must not look like a faded primary
   button. Plain text beside the outlined "Watch next video"; nothing to
   press - taps fall through to the box, which does nothing. */
.fs-cta-accept[aria-disabled="true"] {
  background: transparent;
  color: rgba(255, 255, 255, .9);
  opacity: 1;
  cursor: default;
  pointer-events: none;
}

/* ---- Link overlay (1.7.0): the creator's link opens INSIDE Flipstak ----
   A sibling of .fs-cta inside .pancake-wrap. In immersive mode the wrap is
   fixed and full-viewport, so this fills the phone screen; in-page it fills
   the pancake box. Bar on top, scrollable body below - the iframe gets an
   explicit height from the flex body, which is what makes it scroll on iOS. */
.fs-cta-frame {
  position: absolute;
  inset: 0;
  z-index: 300;                /* above the panel's 200 */
  display: flex;
  flex-direction: column;
  background: #000;
  color: #fff;
  border-radius: 12px;
  overflow: hidden;
}
/* Same Tailwind-preflight lesson as .fs-cta[hidden]: a plain class beats
   :where([hidden]), so say it with !important once for every descendant. */
.fs-cta-frame[hidden],
.fs-cta-frame [hidden] { display: none !important; }

.fs-cta-frame-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(9, 32, 63, .97);
  font: 600 14px/1.2 system-ui, -apple-system, sans-serif;
}
.fs-cta-frame-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fs-cta-frame-open { color: #0ed2f7; text-decoration: none; white-space: nowrap; }
.fs-cta-frame-open:hover { color: #0ed2f7; text-decoration: underline; }
.fs-cta-frame-close {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: #0ed2f7;
  color: #02202b;
  font: 600 14px/1.2 system-ui, -apple-system, sans-serif;
  cursor: pointer;
}
.fs-cta-frame-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
}
.fs-cta-frame-body iframe { display: block; width: 100%; height: 100%; border: 0; }
.fs-cta-frame-blocked {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
  font: 500 15px/1.4 system-ui, -apple-system, sans-serif;
}
.fs-cta-frame-blocked p { margin: 0; }
.fs-cta-frame-blocked .fs-cta-pill { flex: 0 0 auto; min-width: 200px; }
.pancake-wrap.fs-immersive .fs-cta-frame { border-radius: 0; }

/* ---- progress bar (FIG 4C item 414/420, still shown on the CTA per 518) ----
   Immersive playback hides the native control bar, so without this there is no
   way to see position or scrub at all. */
.fs-progress {
  position: relative;
  width: 100%;
  height: 22px;
  display: flex;
  align-items: center;
  pointer-events: auto;
  touch-action: none;          /* we own the drag; don't let it scroll the page */
}
/* The panel's copy is absolutely placed, since it has no .fs-foot around it. */
.fs-cta .fs-progress {
  position: absolute;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  width: auto;
}
.fs-progress-track {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .3);
}
.fs-progress-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  border-radius: 2px;
  background: #0ed2f7;
}
.fs-progress-handle {
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
/* On the CTA the bar is informational only - the video has finished. */
.fs-progress-cta { pointer-events: none; z-index: 1; }

/* ---- immersive ------------------------------------------------
   One block for both paths: .fs-immersive is always added, whether
   the browser granted real element fullscreen or we are faking it
   with position:fixed. Under native fullscreen the wrapper already
   fills the screen, so these rules are a no-op there.

   z-index 9600 sits above UNA's nav (5000) and below its popup fog
   (9700) and modals (10000), so bx_alert() still reaches the user.

   The <video> is never re-parented - promoting the card in place
   avoids the reload/pause that moving a playing video triggers in
   several engines, and means no listener has to be rebound.
---------------------------------------------------------------- */
.pancake-wrap.fs-immersive {
  position: fixed;
  inset: 0;
  z-index: 9600;
  margin: 0;
  width: 100%;
  max-width: none;
  background: #000;
  height: 100vh;
  height: 100dvh;              /* survives the mobile URL bar collapsing */
  overscroll-behavior: contain;
}
/* Belt and braces for the wrapper itself under native fullscreen: the spec's
   UA stylesheet forces 100% x 100% on :fullscreen, but an engine that does
   not would leave the wrapper at its at-rest size. Two rules, not one
   selector list: a browser that does not know one of the pseudo-classes
   would drop the whole rule. (Not the cause of ITN-45 item 2 - that was the
   portrait rule, see the .flip-card rule below.) */
.pancake-wrap:fullscreen { width: 100% !important; height: 100% !important; }
.pancake-wrap:-webkit-full-screen { width: 100% !important; height: 100% !important; }
.pancake-wrap.fs-immersive .pancake-stack {
  max-width: none;
  width: 100%;
  height: 100% !important;
}
.pancake-wrap.fs-immersive .pancake-stack::before { display: none; }
/* The DESKTOP PORTRAIT PLAYBACK FIX block above predates immersive playback:
   at >= 640px it pins an open portrait card to min(360px, 32vw) x 9:16 with
   !important, and its selector (.pancake-wrap .flip-card.portrait.flipped,
   0,4,0) out-ranks this one (0,3,0) - so a portrait video played in a
   desktop-width window sat in a 360x640 box in the top-left corner of the
   black wrapper. That was ITN-45 item 2, in every browser, not a Safari
   quirk. Later source order cannot beat higher specificity, hence the second
   selector: same classes plus .fs-immersive, 0,5,0. */
.pancake-wrap.fs-immersive .flip-card,
.pancake-wrap.fs-immersive .flip-card.portrait.flipped {
  position: absolute;
  inset: 0;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  transform: none !important;
}
.pancake-wrap.fs-immersive .flip-card:not(.flipped) { display: none; }
.pancake-wrap.fs-immersive .flip-inner { border-radius: 0; background: #000; box-shadow: none; }
.pancake-wrap.fs-immersive .pancake-video { object-fit: contain; }
.pancake-wrap.fs-immersive .fs-cta { border-radius: 0; }
.pancake-wrap.fs-immersive .fs-fav-host { display: none; }

/**
 * THE FACES ARE TOGGLED EXPLICITLY - never by backface culling.
 *
 * .flip-inner carries overflow:hidden, and per the CSS Transforms spec any
 * overflow other than visible forces the USED transform-style to `flat`, no
 * matter what `preserve-3d` computes to. In a flat context .flip-back's own
 * rotateY(180deg) leaves it facing away, so `backface-visibility: hidden` culled
 * it outright: the <video> was NEVER painted, and viewers saw the mirrored
 * poster on the front face instead. document.elementFromPoint() over the middle
 * of the player returned .flip-inner rather than the video, which is also why
 * tapping to pause did nothing.
 *
 * Toggling visibility directly is deterministic and browser-independent. The
 * 0.3s delay lands the swap halfway through the 0.6s flip, so the change is
 * hidden by the rotation; under reduced motion it simply happens at once.
 */
.flip-front, .flip-back { backface-visibility: visible; transition: visibility 0s linear .3s; }
.flip-card .flip-back { visibility: hidden; }
.flip-card.flipped .flip-back { visibility: visible; }
.flip-card.flipped .flip-front { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .pancake-wrap:not([data-force-motion="1"]) .flip-front,
  .pancake-wrap:not([data-force-motion="1"]) .flip-back { transition: none !important; }
}

/* Deliberately NOT will-change:transform on .flip-inner - promoting it to its
   own layer is what made the backface bleed through in the first place, and the
   flip transition is smooth without it. Only the short bounce-out is promoted,
   and the class is removed straight afterwards. */
.flip-card.bounce-out { will-change: transform, opacity; }

/* Reduced motion, following the existing data-force-motion escape hatch. No
   code path waits on transitionend/animationend, so removing the transitions
   changes appearance only - never sequencing. */
@media (prefers-reduced-motion: reduce) {
  .pancake-wrap:not([data-force-motion="1"]) .fs-chrome,
  .pancake-wrap:not([data-force-motion="1"]) .fs-nav,
  .pancake-wrap:not([data-force-motion="1"]) .fs-cta { transition: none !important; }
}

/* ---- CTA editor (creator edit screen) ------------------------- */
.fs-syrup-edit-item { flex-wrap: wrap; }

.fs-syrup-cta-editor {
  flex: 1 0 100%;
  margin-top: 6px;
  border-top: 1px dashed rgba(128, 128, 128, .3);
  padding-top: 8px;
  font-size: 13px;
}
.fs-syrup-cta-editor > summary { cursor: pointer; opacity: .8; }
.fs-syrup-cta-summary { opacity: .6; font-style: italic; }
.fs-syrup-cta-form { margin-top: 8px; }
.fs-syrup-cta-form .fs-syrup-field {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.fs-syrup-cta-form .fs-syrup-field input[type="text"],
.fs-syrup-cta-form .fs-syrup-field input[type="url"],
.fs-syrup-cta-form .fs-syrup-field select { flex: 1; max-width: 380px; }
.fs-syrup-cta-fields { border: 0; margin: 0; padding: 0; }
.fs-syrup-cta-error { border-color: rgba(220, 53, 69, .5); color: #b02a37; }

/* ==========================================================================
   Featured Flipstaks (TASK-12) - the star sits in the tile header beside the
   favorite bookmark, so it is reachable from every discovery surface. Both
   icons live in .fs-tile-actions because .fs-syrup-pancake-head is
   justify-content:space-between and a third direct child would push the
   bookmark into the middle of the header.
   ========================================================================== */

/* This block styles LAYOUT ONLY. The star's fill and stroke are presentation
   attributes on the <svg> itself (see _featureStarSvg), so the mark draws
   correctly even if this file never loads or loads stale. Nothing here paints a
   background or a border-radius - there is deliberately no box that could show
   up as a coloured square when a rule goes missing. */

.fs-tile-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.fs-star-form {
  margin: 0;
  display: flex;
  flex: 0 0 auto;
}

/* Identical footprint for both states so a tile never reflows when a viewer
   with permission and one without look at the same Flipstak. */
.fs-star-btn,
.fs-star-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  line-height: 0;
  flex: 0 0 auto;
}

.fs-star-btn {
  cursor: pointer;
  transition: opacity .15s ease, transform .12s ease;
}

.fs-star-btn:hover { opacity: .8; }
.fs-star-btn:active { transform: scale(.88); }

.fs-star-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  border-radius: 4px;
}

/* In flight, while the AJAX toggle is running. */
.fs-star-btn[disabled] {
  opacity: .45;
  cursor: default;
}

.fs-star-mark {
  display: block;
  /* stroke-linejoin:round pushes the star's points fractionally outside the
     viewBox; without this they clip flat and it reads as a blob. */
  overflow: visible;
  /* Never the event target, or the delegated handler's closest() lookup would
     start from the <path> instead of the button. */
  pointer-events: none;
  /* A drop shadow, not a background: keeps the outline star legible on the
     lighter end of the tile gradient without introducing a box. */
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
}

/* ==========================================================================
   Flipstak-from-Flipstak: attribution, reuse settings, source picker
   ========================================================================== */

.pancake-front-overlay { flex-direction: column; gap: 4px; }

.pancake-front-author {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  opacity: 0.92;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.pancake-front-author:hover,
.pancake-front-author:focus { opacity: 1; text-decoration: underline; color: #fff; }

.fs-syrup-reuse-levels { border: 0; margin: 0; padding: 0; }
.fs-syrup-reuse-level { display: flex; align-items: center; gap: 8px; padding: 4px 0; }

.fs-syrup-item-reuse-form { margin: 0; flex: 0 0 auto; }
.fs-syrup-item-reuse { font-size: 12px; max-width: 190px; }

/* A borrowed video the owner may not re-license, and one whose permission the
   source creator has withdrawn. Both stay visible in the editor so the owner
   can act on them. */
.fs-syrup-edit-borrowed,
.fs-syrup-edit-private,
.fs-syrup-edit-revoked {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 10px;
  line-height: 1.6;
}
.fs-syrup-edit-borrowed { background: rgba(128,128,128,0.25); }
/* A warning, not an error: the video is the creator's own, just not visible to
   anyone else in this stack (ITN-49). Amber, between grey "borrowed" and red
   "no longer available". */
.fs-syrup-edit-private  { background: rgba(245,158,11,0.28); cursor: help; }
.fs-syrup-edit-revoked  { background: #b3261e; color: #fff; }

.fs-syrup-source-lib {
  border-top: 1px solid rgba(128,128,128,0.25);
  padding-top: 10px;
  margin-top: 10px;
}
.fs-syrup-source-lib-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.fs-syrup-source-owner { font-size: 12px; opacity: 0.7; }
.fs-syrup-source-items { display: flex; flex-direction: column; gap: 6px; }
.fs-syrup-source-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}
.fs-syrup-source-item-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- "Add from your other Flipstaks" (creator edit screen) -------------
   Rows reuse .fs-syrup-edit-thumb / .fs-syrup-edit-name / .fs-syrup-edit-borrowed,
   so the 480px thumb rule above already applies. */
.fs-syrup-import-src {
  border-top: 1px solid rgba(128,128,128,.25);
  padding-top: 10px;
  margin-top: 10px;
}
.fs-syrup-import-src > summary { cursor: pointer; }
.fs-syrup-import-src-title { font-weight: 600; }
.fs-syrup-import-src-meta { font-size: 12px; opacity: .7; margin-left: 6px; }

.fs-syrup-import-form { margin-top: 8px; }
.fs-syrup-import-all {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin: 0 0 8px;
  cursor: pointer;
}
.fs-syrup-import-items { display: flex; flex-direction: column; gap: 6px; }
.fs-syrup-import-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid rgba(128,128,128,.2);
  border-radius: 8px;
  background: rgba(128,128,128,.04);
  cursor: pointer;
}
.fs-syrup-import-item input[type="checkbox"] { flex: 0 0 auto; margin: 0; }
.fs-syrup-import-item.is-added { opacity: .55; cursor: default; }
.fs-syrup-import-added {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 10px;
  line-height: 1.6;
  background: rgba(22,163,74,.18);
}
.fs-syrup-import-notice {
  font-size: 13px;
  padding: 8px 10px;
  margin-bottom: 10px;
  border-radius: 8px;
  border: 1px solid rgba(22,163,74,.35);
  background: rgba(22,163,74,.10);
}
.fs-syrup-import-count { font-size: 12px; opacity: .7; }
.fs-syrup-import-submit[disabled] { opacity: .5; cursor: not-allowed; }
/* A source whose videos have not been loaded yet: the "Load videos" link is
   the no-JS path; syrup.js dims it while its fetch is in flight. */
.fs-syrup-import-lazy { font-size: 13px; margin: 8px 0 0; }
.fs-syrup-import-src[data-fs-loading="1"] .fs-syrup-import-load { opacity: .6; pointer-events: none; }