/* mdx-follow.css — styles for window.MDXFollow (public/js/mdx-follow.js): the 🔔 follow bell + its centered
   follow dialog (a follow-variant of the MDXFilter modal). Loaded by every surface that mounts MDXFollow.
   Reuses .ex-filter-* from explore.css; only the bell + centered-dialog + intro/close deltas live here. */

/* 🔔 bell — sits right AFTER the price numbers (not pushed to the far right of the line) */
.ex-quote-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ex-quote-row .ex-quote { margin: 0; flex: 0 1 auto; }
.ex-hero-follow { display: inline-flex; }
/* .ex-lesson-btn is grouped in EVERYWHERE .ex-follow-btn is (both are ex-filter-btn twins in the hero row) →
   identical box-shadow, transition, and hover (bg .28 + .ex-filter-btn:hover colour) — they can't drift. */
.ex-follow-btn, .ex-lesson-btn {
  width: 38px; height: 38px; padding: 0; justify-content: center; align-items: center; border-radius: 999px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .34); color: #fff;
  cursor: pointer; transition: .15s; flex: none;
}
.ex-follow-btn:hover, .ex-lesson-btn:hover { background: rgba(255, 255, 255, .28); }
.ex-follow-btn span { display: none; }
.ex-lesson-btn { text-decoration: none; }   /* it's an <a>, kill the default underline */
.ex-follow-btn.on { background: #fff; border-color: #fff; color: #111; }
.ex-follow-btn.on svg path { fill: currentColor; }

/* centered follow dialog — a real modal, not a dropdown.
   NOTE: display:flex is scoped to :not([hidden]) — otherwise it overrides the `hidden` attribute and the modal
   shows on load / can't be closed (the bug). When hidden → UA `[hidden]{display:none}` wins. */
.ex-filter-pop.ex-filter-centered {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  max-width: 440px; width: calc(100vw - 40px); max-height: 86vh; z-index: 9999;
  flex-direction: column; border-radius: 20px; box-shadow: 0 24px 70px rgba(0, 0, 0, .3);
  overflow: hidden; padding: 0;
}
.ex-filter-pop.ex-filter-centered[hidden] { display: none; }
.ex-filter-pop.ex-filter-centered:not([hidden]) { display: flex; }
.ex-follow .ex-filter-backdrop:not([hidden]) {
  position: fixed; inset: 0; background: rgba(15, 18, 26, .55); z-index: 9998; display: block;
  backdrop-filter: blur(8px) saturate(.9); -webkit-backdrop-filter: blur(8px) saturate(.9);
}

/* header (intro) + close button — align to the same left edge as the sections below (scroll pads 26px) */
.ex-filter-centered .ex-follow-intro { margin: 0; padding: 22px 40px 16px 0; }
.ex-follow-intro-t { font-weight: 750; font-size: 17px; line-height: 1.32; color: #0f1117; letter-spacing: -.01em; }
.ex-follow-intro-s { font-size: 13px; color: #8a8f99; margin-top: 6px; line-height: 1.4; }
.mf-x-abs {
  position: absolute; top: 16px; right: 16px; z-index: 3; width: 30px; height: 30px; border-radius: 999px;
  border: none; background: rgba(0, 0, 0, .05); color: #6b7280; font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: .12s;
}
.mf-x-abs:hover { background: rgba(0, 0, 0, .1); color: #111; }

/* body + footer spacing for the dialog */
.ex-filter-centered .ex-filter-scroll { flex: 1; overflow: auto; padding: 4px 26px 8px; }
.ex-filter-centered .ex-filter-foot {
  padding: 16px 26px; border-top: 1px solid rgba(0, 0, 0, .07); display: flex; justify-content: space-between;
  align-items: center; gap: 12px;
}
/* footer buttons — target by class (component-internal ids are suffixed per-instance in mdx-filter.js) */
.ex-filter-centered .ex-filter-clear { background: none; border: none; color: #8a8f99; font-weight: 600; cursor: pointer; padding: 8px 4px; }
.ex-filter-centered .ex-filter-clear:hover { color: #e5484d; }
.ex-filter-centered .ex-filter-apply { background: #111; color: #fff; border: none; border-radius: 11px; padding: 11px 22px; font-weight: 700; cursor: pointer; }
.ex-filter-centered .ex-filter-apply:hover { background: #000; }

/* ── asset ♥️ save-to-playlist (mdx-follow.js kind:'asset') — heart + anchored popover ──────────── */
.fl-heart-wrap { position: relative; display: inline-flex; }
.fl-heart {
  width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: transparent; border: 1px solid var(--fg-dim, rgba(0, 0, 0, .22));
  color: var(--fg, #111); cursor: pointer; transition: .15s; flex: none;
}
.fl-heart:hover { background: rgba(0, 0, 0, .06); }
.fl-heart.on { --fl-fill: #e5484d; color: #e5484d; border-color: #e5484d; }   /* filled red = saved to ≥1 list */

/* popover — a frosted-glass dropdown card anchored under the heart */
.fl-pop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 9999; min-width: 250px; max-width: 310px;
  background: rgba(255, 255, 255, .72); color: #111; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .26); padding: 8px; animation: fl-in .12s ease;
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
}
@keyframes fl-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.fl-pop-h { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #8a8f99; padding: 6px 6px 8px 10px; }
.fl-x { width: 22px; height: 22px; flex: none; border: none; border-radius: 999px; background: rgba(0, 0, 0, .06); color: #6b7280; font-size: 11px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .12s; }
.fl-x:hover { background: rgba(0, 0, 0, .12); color: #111; }
.fl-err { padding: 6px 10px 2px; font-size: 12.5px; color: #e5484d; font-weight: 600; }
.fl-limit { padding: 12px 10px; font-size: 12.5px; color: #8a8f99; text-align: center; }
.fl-rows { display: flex; flex-direction: column; max-height: 260px; overflow: auto; }
.fl-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none; background: none;
  border-radius: 9px; cursor: pointer; text-align: left; font: inherit; color: #111; transition: background .1s;
}
.fl-row:hover { background: rgba(0, 0, 0, .05); }
.fl-chk { width: 18px; height: 18px; flex: none; border-radius: 6px; border: 1.6px solid rgba(0, 0, 0, .25); position: relative; transition: .12s; }
.fl-row.on .fl-chk { background: #111; border-color: #111; }
.fl-row.on .fl-chk::after { content: ''; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.fl-emo { font-size: 16px; flex: none; }
.fl-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.fl-empty { padding: 10px; font-size: 13px; color: #8a8f99; }
.fl-create {
  display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 6px; padding: 10px; border: none;
  border-top: 1px solid rgba(0, 0, 0, .07); background: none; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 700; color: #111;
}
.fl-create:hover { background: rgba(0, 0, 0, .05); }

/* a row saving → the check box becomes a spinner until the server confirms */
.fl-row.loading { cursor: default; }
.fl-row.loading .fl-chk { background: none; border: 2px solid rgba(0, 0, 0, .18); border-top-color: #111; border-radius: 999px; animation: fl-spin .55s linear infinite; }
.fl-row.loading .fl-chk::after { display: none; }
@keyframes fl-spin { to { transform: rotate(360deg); } }

/* ＋ create → inline name field in the popover (no separate modal) */
.fl-new { display: flex; gap: 6px; align-items: center; margin-top: 6px; padding: 8px 8px 4px; border-top: 1px solid rgba(0, 0, 0, .07); }
.fl-new-in { flex: 1; min-width: 0; padding: 8px 11px; border: 1px solid rgba(0, 0, 0, .16); border-radius: 9px; font: inherit; font-size: 14px; outline: none; transition: border-color .12s; }
.fl-new-in:focus { border-color: #111; }
.fl-new-ok { flex: none; padding: 8px 15px; border: none; border-radius: 9px; background: #111; color: #fff; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.fl-new-ok:hover { background: #000; }
.fl-new-ok[disabled] { opacity: .5; cursor: default; }

/* row icon: emoji OR a colour dot from the playlist's colour (when it has no emoji) */
.fl-emo, .fl-dot { flex: none; }
.fl-dot { width: 15px; height: 15px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }

/* create: an emoji button (opens a compact curated palette) before the name field */
.fl-new-emo { flex: none; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(0, 0, 0, .16); border-radius: 9px; background: #fff; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.fl-new-emo:hover { background: rgba(0, 0, 0, .05); }
.fl-pal { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 6px 2px; }
.fl-pal-e { width: 30px; height: 30px; padding: 0; border: none; background: none; border-radius: 8px; cursor: pointer; font-size: 17px; display: flex; align-items: center; justify-content: center; }
.fl-pal-e:hover { background: rgba(0, 0, 0, .08); }

/* ── mobile: the ♥️ anchored dropdown (.fl-pop) becomes a centered modal dialog + dim backdrop.
   Applied by mdx-follow.js (isMobile: pointer:coarse || max-width 640) via the .fl-pop-modal class. ── */
.fl-pop-backdrop { position: fixed; inset: 0; background: rgba(15, 18, 26, .5); z-index: 10000;
  backdrop-filter: blur(4px) saturate(.9); -webkit-backdrop-filter: blur(4px) saturate(.9); }
.fl-pop.fl-pop-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10001;
  width: calc(100vw - 40px); max-width: 340px; max-height: 80vh; overflow-y: auto;
  animation: fl-in-modal .12s ease; }   /* own keyframe — the base `fl-in` animates transform→none, clobbering
                                           the centering translate → the modal flashed at top-left first. */
@keyframes fl-in-modal { from { opacity: 0; transform: translate(-50%, -50%) scale(.97); } to { opacity: 1; transform: translate(-50%, -50%); } }