/* Scoped UI for the hub; no globals */
.yg3-hub { --yg3-bg: #fff; --yg3-text:#111; --yg3-muted:#666; --yg3-pill:#eef2f6; --yg3-border:#e5e7eb; --yg3-overlay: rgba(0,0,0,.5); }
@media (prefers-color-scheme: dark){
  .yg3-hub { --yg3-bg:#0f1115; --yg3-text:#f3f4f6; --yg3-muted:#9ca3af; --yg3-pill:#1f2430; --yg3-border:#2a2f3a; --yg3-overlay: rgba(0,0,0,.6); }
}

.yg3-hub { background: transparent; color: var(--yg3-text); }
.yg3-hub__notice { padding: 12px 14px; border:1px solid var(--yg3-border); border-radius:10px; background: var(--yg3-bg); }

/* Tabs */
.yg3-tabs { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.yg3-tab { border:1px solid var(--yg3-border); background: var(--yg3-pill); padding:8px 12px; border-radius:999px; cursor:pointer; }
.yg3-tab.is-active { outline:2px solid var(--yg3-border); }

/* Cards */
.yg3-panes { }
.yg3-cards { display:grid; gap:14px; }
.yg3-cards--list { display:block; }
.yg3-cards--empty { padding:8px; color: var(--yg3-muted); }

/* Force N columns on desktop via data-cols (1..6) */
@media (min-width: 1024px){
  .yg3-cards[data-cols="1"]{ grid-template-columns: repeat(1, 1fr); }
  .yg3-cards[data-cols="2"]{ grid-template-columns: repeat(2, 1fr); }
  .yg3-cards[data-cols="3"]{ grid-template-columns: repeat(3, 1fr); }
  .yg3-cards[data-cols="4"]{ grid-template-columns: repeat(4, 1fr); }
  .yg3-cards[data-cols="5"]{ grid-template-columns: repeat(5, 1fr); }
  .yg3-cards[data-cols="6"]{ grid-template-columns: repeat(6, 1fr); }
}
/* Tablet: max 2 columns */
@media (min-width: 640px) and (max-width: 1023.98px){
  .yg3-cards{ grid-template-columns: repeat(2, 1fr); }
}
/* Mobile: 1 column */
@media (max-width: 639.98px){
  .yg3-cards{ grid-template-columns: 1fr; }
}

.yg3-card { border:1px solid var(--yg3-border); border-radius:14px; background: var(--yg3-bg); overflow:hidden; display:flex; flex-direction:column; }
.yg3-card__media { aspect-ratio: 16/9; background: #0b0b0b; display:flex; align-items:center; justify-content:center; }
.yg3-card__media--empty { background: #00000014; }
.yg3-card__cover { width:100%; height:100%; object-fit:cover; display:block; }
.yg3-card__body { padding:12px; }
.yg3-card__pill { display:inline-block; background: var(--yg3-pill); padding:4px 8px; border-radius:999px; font-size:12px; color: var(--yg3-muted); margin-bottom:6px; }
.yg3-card__title { margin:0 0 10px; font-size:16px; line-height:1.3; }
.yg3-card__actions { display:flex; gap:8px; flex-wrap:wrap; }
.yg3-btn { border:1px solid var(--yg3-border); background: transparent; border-radius:10px; padding:6px 10px; cursor:pointer; color: var(--yg3-text); }
.yg3-btn:hover { background: var(--yg3-pill); }

/* Modal */
.yg3-modal { position:fixed; inset:0; z-index: 99999; }
.yg3-modal__backdrop { position:absolute; inset:0; background: var(--yg3-overlay); }

/* Tighter dialog sizing: use ~80vw and cap to viewport to reduce bars */
.yg3-modal__dialog {
  position:relative;
  width: clamp(720px, 80vw, 1200px);
  max-height: 92vh;
  margin: clamp(24px, 4vh, 48px) auto;
  background: var(--yg3-bg);
  border:1px solid var(--yg3-border);
  border-radius:16px;
  overflow:hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.yg3-modal__close {
  position:absolute;
  top:8px;
  right:8px;
  background: var(--yg3-pill);
  border:1px solid var(--yg3-border);
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;
  z-index: 3;
}
.yg3-modal__content {
  padding: 0;
  color: var(--yg3-text);
  background: var(--yg3-bg);
}

/* --- MEDIA INSIDE MODAL --- */

/* Provider embeds (YouTube/Vimeo): size to the dialog width with true 16:9,
   and cap by viewport height to avoid excess letterboxing. */
.yg3-embed {
  width: 100%;
  /* pick the smaller of (80vw * 9/16) or (viewport height - chrome) */
  height: min( 82vh, calc(80vw * 9 / 16) );
  background:#000;
  position: relative;
}
.yg3-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* PDF/other iframes that are direct children of content */
.yg3-modal__content > .yg3-pdf,
.yg3-modal__content > iframe {
  display:block;
  width:100%;
  height: min( 82vh, calc(80vw * 9 / 16) );
  border:0;
  background:#000;
  position:relative;
  z-index:1;
}

/* Video file player */
.yg3-modal__content video {
  display:block;
  width:100%;
  height: min( 82vh, calc(80vw * 9 / 16) );
  background:#000;
  position:relative;
  z-index:1;
}

/* Images */
.yg3-img-wrap {
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  min-height: min( 82vh, calc(80vw * 9 / 16) );
}
.yg3-img-wrap img {
  display:block;
  max-width:100%;
  max-height: min( 82vh, calc(80vw * 9 / 16) );
  height:auto;
}

/* Footer (reserved) */
.yg3-modal__footer { padding:12px; border-top:1px solid var(--yg3-border); }

/* Utilities */
.yg3-tip { margin-top:8px; font-size:12px; color: var(--yg3-muted); }
.yg3-actions { display:flex; gap:8px; padding:12px; border-top: 1px solid var(--yg3-border); }

/* Small screens */
@media (max-width: 600px){
  .yg3-modal__dialog { width: 96vw; margin: 4vh auto; border-radius: 14px; }
  .yg3-embed,
  .yg3-modal__content > .yg3-pdf,
  .yg3-modal__content > iframe,
  .yg3-modal__content video,
  .yg3-img-wrap { height: min( 78vh, calc(96vw * 9 / 16) ); }
}

/* === YG3 — Tabs UX overrides (Phase 1) ==============================
   Active tab = black bg + white text
   Inactive tabs = light grey bg + dark text
   Hover = black bg + white text
   Border radius = 10px
   ------------------------------------------------------------------ */

.yg3-hub .yg3-tab {
  border-radius: 10px !important;
  background: #f3f4f6 !important;   /* light grey for inactive */
  color: #111 !important;            /* dark text for inactive */
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.yg3-hub .yg3-tab:hover {
  background: #071e3b !important;
  color: #fff !important;
  border-color: #071e3b !important;
}

.yg3-hub .yg3-tab.is-active {
  background: #071e3b !important;       /* active = black */
  color: #fff !important;            /* active = white text */
  border-color: #071e3b !important;
  outline: none !important;
}

/* === YG3 — Cards UX + Slider (Phase 1) ==============================
   Goals:
   - Reduce card height by making the cover shallower
   - Keep the image centered in the cover area
   - Make card action buttons smaller/tighter
   - Add a horizontal slider (scroll) for all card rows, incl. mobile
   - Do NOT affect favourites overlays/icons
   Scope: only inside .yg3-hub and standard .yg3-card structure
   ------------------------------------------------------------------ */

/* ---- Card cover: make it shallower, keep image centered ----------- */
.yg3-hub .yg3-card .yg3-card__cover {
  /* Prefer aspect-ratio for consistent height; fallback to fixed height */
  aspect-ratio: 16 / 7;                 /* shallower than typical 16/9 */
  height: auto;                          /* aspect-ratio takes precedence */
  overflow: hidden;
  position: relative;
}

@supports not (aspect-ratio: 1 / 1) {
  .yg3-hub .yg3-card .yg3-card__cover {
    height: 140px;                       /* fallback height */
  }
}

.yg3-hub .yg3-card .yg3-card__cover img,
.yg3-hub .yg3-card .yg3-card__cover picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;                      /* crop to fit */
  object-position: center center;         /* keep center in focus */
  display: block;
}

/* If some covers are background images on the cover element itself */
.yg3-hub .yg3-card .yg3-card__cover {
  background-position: center center;
  background-size: cover;
}

/* ---- Card actions: smaller buttons without touching favourites ----- */
.yg3-hub .yg3-card .yg3-card__actions .yg3-btn,
.yg3-hub .yg3-card .yg3-card__actions a[role="button"],
.yg3-hub .yg3-card .yg3-card__actions .button {
  padding: 6px 10px;                      /* tighter */
  font-size: 0.875rem;                    /* ~14px */
  line-height: 1.2;
  min-height: 32px;
  border-radius: 8px;
}

/* Explicitly avoid favourites overlays (common class patterns) */
.yg3-hub .yg3-card .yg3-card__fav,
.yg3-hub .yg3-card [class*="yg3-fav"],
.yg3-hub .yg3-card [data-role="fav"],
.yg3-hub .yg3-card .fav,
.yg3-hub .yg3-card .favourite,
.yg3-hub .yg3-card .favorites {
  /* no-op: this block exists to document that we are NOT styling these */
}

/* ---- Slider: enable horizontal scroll for all card rows ------------- */
/* Apply via .is-slider (added by small JS below). This preserves existing
   grid styles when the class is absent, and switches to a flex-based
   horizontal scroller when present. */

.yg3-hub .yg3-cards.is-slider {
  display: flex !important;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: var(--yg3-card-gap, 16px);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;                    /* room for scrollbar on some OSes */
}

.yg3-hub .yg3-cards.is-slider .yg3-card {
  /* width based on shortcode cols, with sane min/max for all breakpoints */
  flex: 0 0 clamp(220px, var(--slider-card-basis, 22%), 360px);
  scroll-snap-align: start;
}

/* Cosmetic scrollbar (where supported) */
.yg3-hub .yg3-cards.is-slider::-webkit-scrollbar {
  height: 8px;
}
.yg3-hub .yg3-cards.is-slider::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.08);
}
.yg3-hub .yg3-cards.is-slider::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.25);
  border-radius: 8px;
}

/* Optional: slightly tighter vertical rhythm in card body */
.yg3-hub .yg3-card .yg3-card__body {
  padding-top: 10px;
  padding-bottom: 12px;
}

/* === YG3 — Cards UX overrides (cover fix: no letterbox) =============
   Force a shallower cover *container* and make media fill it.
   Does not touch favourites/overlays.
   ------------------------------------------------------------------ */

.yg3-hub .yg3-card .yg3-card__cover {
  position: relative;
  height: var(--yg3-cover-h, 140px) !important; /* make container shallower */
  max-height: var(--yg3-cover-h, 140px) !important;
  min-height: var(--yg3-cover-h, 140px) !important;
  padding: 0 !important;                  /* kill ratio padding tricks */
  overflow: hidden !important;
  background: none !important;            /* avoid black bar backgrounds */
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* Some themes add an aspect-ratio spacer via ::before — neutralize it */
.yg3-hub .yg3-card .yg3-card__cover::before {
  content: none !important;
  display: none !important;
  padding: 0 !important;
}

/* Make <img> or <picture> media fill the new height */
.yg3-hub .yg3-card .yg3-card__cover img,
.yg3-hub .yg3-card .yg3-card__cover picture img {
  position: absolute !important;
  inset: 0 !important;                    /* top/right/bottom/left: 0 */
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;           /* fill & crop */
  object-position: center center !important; /* keep center in focus */
  display: block !important;
}

/* If a link wraps the image inside the cover, keep it as a simple block
   but don’t interfere with favourites overlays (which are separately positioned) */
.yg3-hub .yg3-card .yg3-card__cover > a {
  display: block !important;
  position: static !important;
}

/* Preserve overlays like favourites (assumed absolute-positioned elsewhere) */
.yg3-hub .yg3-card .yg3-card__cover [class*="fav"],
.yg3-hub .yg3-card .yg3-card__cover [data-role="fav"] {
  position: absolute; /* respect whatever positioning they already have */
}

/* === YG3 — Cards cover anti-letterbox (hard fix) ====================
   Remove residual top/bottom bars by killing baseline gaps, default margins,
   and stray borders. Works across all widths.
   ------------------------------------------------------------------ */

.yg3-hub .yg3-card .yg3-card__cover,
.yg3-hub .yg3-card .yg3-card__cover figure,
.yg3-hub .yg3-card .yg3-card__cover picture {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;           /* kill baseline gap */
  border: 0 !important;                 /* kill theme borders */
  background: transparent !important;   /* avoid dark backgrounds peeking */
  height: var(--yg3-cover-h, 140px) !important;
  min-height: var(--yg3-cover-h, 140px) !important;
  max-height: var(--yg3-cover-h, 140px) !important;
  overflow: hidden !important;
}

/* Some themes inject ratio spacers on media wrappers */
.yg3-hub .yg3-card .yg3-card__cover::before,
.yg3-hub .yg3-card .yg3-card__cover::after,
.yg3-hub .yg3-card .yg3-card__cover picture::before,
.yg3-hub .yg3-card .yg3-card__cover picture::after,
.yg3-hub .yg3-card .yg3-card__cover figure::before,
.yg3-hub .yg3-card .yg3-card__cover figure::after {
  content: none !important;
  display: none !important;
  padding: 0 !important;
}

/* Ensure the media fills edge-to-edge */
.yg3-hub .yg3-card .yg3-card__cover img,
.yg3-hub .yg3-card .yg3-card__cover picture img,
.yg3-hub .yg3-card .yg3-card__cover figure img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;            /* removes inline gap */
  object-fit: cover !important;
  object-position: center center !important;
  border: 0 !important;
  background: transparent !important;
}

/* If the cover uses a background image on the cover element itself */
.yg3-hub .yg3-card .yg3-card__cover {
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* Preserve favourites overlays (no visual change) */
.yg3-hub .yg3-card .yg3-card__cover [class*="fav"],
.yg3-hub .yg3-card .yg3-card__cover [data-role="fav"] {
  position: absolute; /* respect existing positions */
}

/* === YG3 — Card Cover (img variant) anti-letterbox ==================
   Markup handled:
     <div class="yg3-card__media">
       <img class="yg3-card__cover wp-post-image" ...>
     </div>
   Goal: fixed, shallower cover with image filling edge-to-edge (no bars).
   ------------------------------------------------------------------ */

.yg3-hub .yg3-card .yg3-card__media {
  position: relative !important;
  height: var(--yg3-cover-h, 140px) !important;  /* adjust as you like */
  min-height: var(--yg3-cover-h, 140px) !important;
  max-height: var(--yg3-cover-h, 140px) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;           /* avoid dark bg peeking */
  line-height: 0 !important;                    /* kill baseline gaps */
  font-size: 0 !important;                      /* belt & braces */
  border: 0 !important;
}

/* Make the IMG fill the container completely */
.yg3-hub .yg3-card .yg3-card__media > img.yg3-card__cover {
  position: absolute !important;
  inset: 0 !important;                           /* top/right/bottom/left */
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;                  /* fill & crop */
  object-position: center center !important;     /* keep center focus */
  display: block !important;                     /* removes inline gap */
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* If any wrapper elements exist inside .yg3-card__media, neutralize them */
.yg3-hub .yg3-card .yg3-card__media > figure,
.yg3-hub .yg3-card .yg3-card__media > picture {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.yg3-hub .yg3-card .yg3-card__media::before,
.yg3-hub .yg3-card .yg3-card__media::after,
.yg3-hub .yg3-card .yg3-card__media > figure::before,
.yg3-hub .yg3-card .yg3-card__media > figure::after,
.yg3-hub .yg3-card .yg3-card__media > picture::before,
.yg3-hub .yg3-card .yg3-card__media > picture::after {
  content: none !important;
  display: none !important;
  padding: 0 !important;
}

/* Keep favourites overlays untouched (positioned absolutely elsewhere) */
.yg3-hub .yg3-card .yg3-card__media [class*="fav"],
.yg3-hub .yg3-card .yg3-card__media [data-role="fav"] {
  position: absolute; /* respect existing positions */
}

/* === YG3 — Equal-Width Tabs (match widest) ==========================
   Desktop/tablet: all tabs share the width of the widest tab.
   Mobile accordion (stacked) is unaffected.
   ------------------------------------------------------------------ */

/* Apply only on tablet/desktop; mobile uses stacked accordions */
@media (min-width: 768px) {
  .yg3-hub .yg3-tabs {
    /* allow wrapping if the total width exceeds container */
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* keep your existing gap if different */
  }

  .yg3-hub .yg3-tab {
    /* width driven by JS via --yg3-tab-w; fallback auto */
    min-width: var(--yg3-tab-w, auto);
    /* keep your existing padding, radius (we set 10px earlier), colors, etc. */
    white-space: nowrap;   /* prevent label from breaking to 2 lines */
  }
}

/* If tabs ever overflow horizontally, prevent squish before wrap */
@media (min-width: 768px) {
  .yg3-hub .yg3-tabs { align-items: stretch; }
  .yg3-hub .yg3-tab  { flex: 0 0 auto; }
}

/* === YG3 — Notes UI restrictions (Phase 1) ==========================
   Scope: ONLY inside Hub inline Notes render (.yg3-inline-resource)
   Effect: Hide per-note Favourite/Heart controls (any icon/label)
           Do NOT affect global favourites elsewhere
   ------------------------------------------------------------------ */

.yg3-hub .yg3-inline-resource a[class*="fav"],
.yg3-hub .yg3-inline-resource button[class*="fav"],
.yg3-hub .yg3-inline-resource [class*=" fav "],
.yg3-hub .yg3-inline-resource [data-action*="fav"],
.yg3-hub .yg3-inline-resource [aria-label*="fav"],
.yg3-hub .yg3-inline-resource [aria-label*="heart"],
.yg3-hub .yg3-inline-resource [title*="fav"],
.yg3-hub .yg3-inline-resource [title*="heart"] {
  display: none !important;
}

/* === YG3 — Notes UI restrictions (Phase 1, stronger) ================
   Scope: ONLY inside Hub inline Notes render (.yg3-inline-resource)
   Effect:
     - Hide any Favourite/Heart controls
     - Hide any per-note Print control (various implementations)
     - Keep global "Print Course Notes" outside this wrapper unaffected
   ------------------------------------------------------------------ */

/* Hearts / favourites */
.yg3-hub .yg3-inline-resource a[class*="fav"],
.yg3-hub .yg3-inline-resource button[class*="fav"],
.yg3-hub .yg3-inline-resource [class*=" fav "],
.yg3-hub .yg3-inline-resource [data-action*="fav"],
.yg3-hub .yg3-inline-resource [aria-label*="fav" i],
.yg3-hub .yg3-inline-resource [aria-label*="heart" i],
.yg3-hub .yg3-inline-resource [title*="fav" i],
.yg3-hub .yg3-inline-resource [title*="heart" i] {
  display: none !important;
}

/* Per-note print (broad targeting) */
.yg3-hub .yg3-inline-resource a[class*="print" i],
.yg3-hub .yg3-inline-resource button[class*="print" i],
.yg3-hub .yg3-inline-resource [data-action*="print" i],
.yg3-hub .yg3-inline-resource [href*="print" i],
.yg3-hub .yg3-inline-resource [onclick*="print" i],
.yg3-hub .yg3-inline-resource [aria-label*="print" i],
.yg3-hub .yg3-inline-resource [title*="print" i],
.yg3-hub .yg3-inline-resource .icon-print,
.yg3-hub .yg3-inline-resource [class*="icon-print" i],
.yg3-hub .yg3-inline-resource svg[aria-label*="print" i],
.yg3-hub .yg3-inline-resource svg[title*="print" i] {
  display: none !important;
}

/* === YG3 — Notes UI restrictions (scoped to note items only) ========
   Scope: ONLY inside per-note containers inside the Hub's inline Notes.
   Keeps global toolbar (Search + "Print Course Notes") intact.
   ------------------------------------------------------------------ */

/* Per-note container patterns (add more if needed) */
.yg3-hub .yg3-inline-resource [data-note-id],
.yg3-hub .yg3-inline-resource .yg3-note,
.yg3-hub .yg3-inline-resource .yg365-note,
.yg3-hub .yg3-inline-resource .note-item,
.yg3-hub .yg3-inline-resource .note-card,
.yg3-hub .yg3-inline-resource .note-row,
.yg3-hub .yg3-inline-resource article.note,
.yg3-hub .yg3-inline-resource li[class*="note"] {}

/* Hide FAV/HEART *inside each note item only* */
.yg3-hub .yg3-inline-resource [data-note-id] a[class*="fav" i],
.yg3-hub .yg3-inline-resource [data-note-id] button[class*="fav" i],
.yg3-hub .yg3-inline-resource [data-note-id] [data-action*="fav" i],
.yg3-hub .yg3-inline-resource [data-note-id] [aria-label*="heart" i],
.yg3-hub .yg3-inline-resource [data-note-id] [title*="heart" i],
.yg3-hub .yg3-inline-resource [data-note-id] [aria-label*="fav" i],
.yg3-hub .yg3-inline-resource [data-note-id] [title*="fav" i],
.yg3-hub .yg3-inline-resource .note-item a[class*="fav" i],
.yg3-hub .yg3-inline-resource .note-item button[class*="fav" i] {
  display: none !important;
}

/* Hide per-note PRINT *inside each note item only* (leave global print alone) */
.yg3-hub .yg3-inline-resource [data-note-id] a[class*="print" i],
.yg3-hub .yg3-inline-resource [data-note-id] button[class*="print" i],
.yg3-hub .yg3-inline-resource [data-note-id] [data-action*="print" i],
.yg3-hub .yg3-inline-resource [data-note-id] [href*="print" i],
.yg3-hub .yg3-inline-resource [data-note-id] [onclick*="print" i],
.yg3-hub .yg3-inline-resource [data-note-id] [aria-label*="print" i],
.yg3-hub .yg3-inline-resource [data-note-id] [title*="print" i],
.yg3-hub .yg3-inline-resource [data-note-id] .icon-print,
.yg3-hub .yg3-inline-resource [data-note-id] [class*="icon-print" i],
.yg3-hub .yg3-inline-resource .note-item a[class*="print" i],
.yg3-hub .yg3-inline-resource .note-item button[class*="print" i] {
  display: none !important;
}

/* === YG3 Hub – Desktop CSS (updated for right-side counts) === */

/* keep your existing styles ... this file is a full replacement merging in count UI basics */
.yg3-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 10px;
}

.yg3-tab {
  display: flex;
  align-items: center;
  justify-content: space-between; /* label left, right UI on far right */
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: #111827;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

/* Right-side UI: count + chevron (chevron hidden on desktop) */
.yg3-tab__right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
}
.yg3-tab__count {
  display: inline-block;
  min-width: 1.5em;
  padding: 0 8px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 9999px;
  background: #eef2ff;
  color: #1f2937;
  font-size: 12px;
  font-weight: 700;
}
.yg3-tab__chev {
  display: none; /* desktop hides chevron */
}

/* Hide right-side count for favourites (its label already has (n)) */
.yg3-tab.is-fav .yg3-tab__count {
  display: none;
}

/* active/hover tweaks */
.yg3-tab.is-active,
.yg3-tab.is-open {
  background: #eff6ff;
  border-color: #93c5fd;
}

/* panes remain your existing styles ... */
.yg3-panes { /* existing container */ }
.yg3-pane  { /* existing pane styles */ }

/* ============================================================
   YG3 — WATCH MODAL FIX (ADD-ONLY, SAFE TO APPEND)
   - Centers video in modal
   - Strict 16:9 sizing
   - Uses 100dvh on mobile to avoid huge bars
   - Keeps Close button visible and overlay above footer
   - Scoped to .yg3-hub to avoid collateral styles
   ============================================================ */

:root { --yg3-modal-chrome: 80px; }
@media (max-width: 640px){ :root { --yg3-modal-chrome: 56px; } }

/* Ensure the modal overlay sits above sticky footers etc. */
.yg3-hub .yg3-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
}

/* Center content inside the dialog without changing dialog layout elsewhere */
.yg3-hub .yg3-modal__content {
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  overflow: visible; /* prevents extra black area */
}

/* Keep Close button visible above the video */
.yg3-hub .yg3-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 100002;
}

/* Strict 16:9 wrapper used by CHUNK 4/4 PHP for videos (Watch) */
.yg3-hub .yg3-embed--video {
  width: min(92vw, 1400px, calc((100dvh - var(--yg3-modal-chrome)) * 16 / 9));
  max-width: 100%;
  aspect-ratio: 16 / 9;
  max-height: calc(100dvh - var(--yg3-modal-chrome));
  background: #000;
  position: relative;
}

/* Fill the wrapper exactly */
.yg3-hub .yg3-embed--video > iframe,
.yg3-hub .yg3-embed--video > video {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  display: block;
}

/* If Vimeo injects side panels inside the modal, hide them there only */
.yg3-hub .yg3-modal__content #right-content-area,
.yg3-hub .yg3-modal__content [data-sidedock="true"] {
  display: none !important;
}

/* Optional: small-screen tweak so dialog margins don’t create bars */
@media (max-width: 600px){
  .yg3-hub .yg3-modal__dialog { margin: 4vh auto; }
}