/* Preview-only watch grid. Loaded solely by dist/_preview/watch-grid/.
   Does not style production /. Never sets a non-none transform on .card / .grid
   except while a cell (the wrapper) is scaled. body.dd-lock clears the focused
   cell's transform so focus.js position:fixed resolves to the viewport.
   Do not edit assets/focus.js. Do not change .dock width (style.css locks 246px). */

html[data-preview="watch-grid"],html[data-preview="favorites-stream"],
html[data-preview="watch-grid"] body,html[data-preview="favorites-stream"] body{
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}
html[data-preview="watch-grid"] body,html[data-preview="favorites-stream"] body{visibility: hidden}
html[data-preview="watch-grid"] body.wg-ready,html[data-preview="favorites-stream"] body.wg-ready{visibility: visible}
html[data-preview="watch-grid"].wg-fail,html[data-preview="favorites-stream"].wg-fail,
html[data-preview="watch-grid"].wg-fail body,html[data-preview="favorites-stream"].wg-fail body{height: auto; overflow: auto}
html[data-preview="watch-grid"].wg-fail main.wg-src,html[data-preview="favorites-stream"].wg-fail main.wg-src{display: block}

#wg-vp{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  /* Quiet room: a soft pool of light behind the centre instead of a dark vignette. */
  background:
    radial-gradient(ellipse 55% 60% at 50% 48%, color-mix(in srgb, var(--card) 70%, transparent), transparent 72%),
    var(--bg);
  outline: none;
}
#wg-vp.wg-pan{cursor: grabbing}
#wg-park{display: none !important}
html[data-preview="watch-grid"] main.wg-src,html[data-preview="favorites-stream"] main.wg-src{display: none}

.wg-cell{
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  box-sizing: border-box;
  overflow: hidden;
  /* Field tiles whisper: hairline edge, no ink outline, almost no shadow. The centre tile (.wg-prime) speaks. */
  border: 1.5px solid color-mix(in srgb, var(--fg) 16%, transparent);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(22, 17, 13, .04);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
@property --wg-blur{syntax: "<length>"; inherits: false; initial-value: 0px}
@property --wg-o{syntax: "<number>"; inherits: false; initial-value: 1}
.wg-cell{opacity: var(--wg-o)}
/* Hand-off blur while a tile passes through the centre (set from JS, only within one pitch). */
.wg-cell.wg-blur{filter: blur(var(--wg-blur))}
html[data-preview="favorites-stream"] .wg-cell.wg-blur{filter: none}
@media (prefers-reduced-motion: reduce){
  .wg-cell.wg-blur{filter: none}
}
html.dd-rm .wg-cell.wg-blur{filter: none}
.wg-cell.wg-prime{
  border: 2.5px solid var(--fg);
  box-shadow: 0 2px 4px rgba(22, 17, 13, .06), 0 28px 64px -18px rgba(22, 17, 13, .32);
}
/* Outer rings become colour swatches: captions and ratings drop away. */
.wg-cell.wg-mute .wg-poster .wg-k,
.wg-cell.wg-mute .wg-poster b{visibility: hidden}

/* Tap-to-zoom: JS springs the centre tile up (shared element); CSS lets the field recede. */
/* Transitions only while zoom toggles (body.wg-zt), so panning fades stay frame-exact. */
body.wg-zt .wg-cell{transition: opacity .42s cubic-bezier(.2,.8,.2,1), filter .42s cubic-bezier(.2,.8,.2,1)}
body.wg-zoom .wg-cell:not(.wg-prime){
  --wg-o: .28 !important;
  filter: blur(7px) saturate(.35) brightness(1.03);
}
html[data-preview="favorites-stream"] body.wg-zoom .wg-cell:not(.wg-prime){
  --wg-o: .88 !important;
  filter: none;
}
body.wg-zoom .wg-cell.wg-prime{
  box-shadow: 0 2px 6px rgba(22, 17, 13, .08), 0 40px 90px -24px rgba(22, 17, 13, .42);
}
html[data-preview="watch-grid"] body.wg-zoom nav.top.wg-pin,html[data-preview="favorites-stream"] body.wg-zoom nav.top.wg-pin,
html[data-preview="watch-grid"] body.wg-zoom header.hero.wg-mast,html[data-preview="favorites-stream"] body.wg-zoom header.hero.wg-mast,
html[data-preview="watch-grid"] body.wg-zoom .wg-hud,html[data-preview="favorites-stream"] body.wg-zoom .wg-hud{
  opacity: .22;
  filter: saturate(.3);
}
html[data-preview="watch-grid"] body.wg-zoom nav.top.wg-pin:hover,html[data-preview="favorites-stream"] body.wg-zoom nav.top.wg-pin:hover,
html[data-preview="watch-grid"] body.wg-zoom header.hero.wg-mast:hover,html[data-preview="favorites-stream"] body.wg-zoom header.hero.wg-mast:hover,
html[data-preview="watch-grid"] body.wg-zoom .wg-hud:hover,html[data-preview="favorites-stream"] body.wg-zoom .wg-hud:hover,
html[data-preview="watch-grid"] body.wg-zoom nav.top.wg-pin:focus-within,html[data-preview="favorites-stream"] body.wg-zoom nav.top.wg-pin:focus-within,
html[data-preview="watch-grid"] body.wg-zoom header.hero.wg-mast:focus-within,html[data-preview="favorites-stream"] body.wg-zoom header.hero.wg-mast:focus-within,
html[data-preview="watch-grid"] body.wg-zoom .wg-hud:focus-within,html[data-preview="favorites-stream"] body.wg-zoom .wg-hud:focus-within{opacity: 1; filter: none}
/* The HUD sits where the zoomed tile lands; step it fully out of the way (hover/focus brings it back). */
html[data-preview="watch-grid"] body.wg-zoom .wg-hud:not(:hover):not(:focus-within),html[data-preview="favorites-stream"] body.wg-zoom .wg-hud:not(:hover):not(:focus-within){opacity: 0}
html[data-preview="watch-grid"] nav.top.wg-pin,html[data-preview="favorites-stream"] nav.top.wg-pin,
html[data-preview="watch-grid"] header.hero.wg-mast,html[data-preview="favorites-stream"] header.hero.wg-mast,
.wg-hud{transition: opacity .38s cubic-bezier(.2,.8,.2,1), filter .38s cubic-bezier(.2,.8,.2,1)}
/* The cell itself scales; the card inside must not add focus.js's 1.03 lift or outline (it would clip). */
html[data-preview="watch-grid"] .wg-cell > .card.dd-lit:not(.dd-focused),html[data-preview="favorites-stream"] .wg-cell > .card.dd-lit:not(.dd-focused){
  transform: none;
  outline: 0;
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce){
  body.wg-zoom .wg-cell:not(.wg-prime){filter: none}
  body.wg-zt .wg-cell,
  html[data-preview="watch-grid"] nav.top.wg-pin,html[data-preview="favorites-stream"] nav.top.wg-pin,
  html[data-preview="watch-grid"] header.hero.wg-mast,html[data-preview="favorites-stream"] header.hero.wg-mast,
  .wg-hud{transition: none}
}
html.dd-rm body.wg-zoom .wg-cell:not(.wg-prime){filter: none}
.wg-far iframe{visibility: hidden}

html[data-preview="watch-grid"] body.dd-lock #wg-vp,html[data-preview="favorites-stream"] body.dd-lock #wg-vp{z-index: 46; overflow: visible; pointer-events: none}
html[data-preview="watch-grid"] body.dd-lock .dd-focused,html[data-preview="favorites-stream"] body.dd-lock .dd-focused,
html[data-preview="watch-grid"] body.dd-lock .dd-focused *,html[data-preview="favorites-stream"] body.dd-lock .dd-focused *{pointer-events: auto}
html[data-preview="watch-grid"] body.dd-lock .wg-cell:has(.dd-focused),html[data-preview="favorites-stream"] body.dd-lock .wg-cell:has(.dd-focused){
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  overflow: visible !important;
  border: 0;
  background: transparent;
  box-shadow: none;
  z-index: 60;
}
html[data-preview="watch-grid"] .dd-focused,html[data-preview="favorites-stream"] .dd-focused{
  width: min(1240px, 96vw) !important;
  max-height: 94vh !important;
}
html[data-preview="watch-grid"] .remix.dd-focused,html[data-preview="favorites-stream"] .remix.dd-focused{width: min(1280px, 97vw) !important}
html[data-preview="watch-grid"] .dd-focused .stage,html[data-preview="favorites-stream"] .dd-focused .stage{height: min(82vh, 880px) !important}
@media (max-width: 760px){
  html[data-preview="watch-grid"] .dd-focused,html[data-preview="favorites-stream"] .dd-focused{
    width: 100vw !important;
    height: 96vh !important;
    max-height: 96vh !important;
  }
  html[data-preview="watch-grid"] .dd-focused .stage,html[data-preview="favorites-stream"] .dd-focused .stage{height: 74vh !important}
}
html[data-preview="watch-grid"] body.dd-lock .wg-cell:not(:has(.dd-focused)),html[data-preview="favorites-stream"] body.dd-lock .wg-cell:not(:has(.dd-focused)){opacity: .22}
html[data-preview="favorites-stream"] body.dd-lock .wg-cell:not(:has(.dd-focused)){opacity: .62}
html[data-preview="watch-grid"] body.dd-light:not(.wg-zoom) .wg-cell:not(:has(.dd-lit)):not(:has(.remix)),html[data-preview="favorites-stream"] body.dd-light:not(.wg-zoom) .wg-cell:not(:has(.dd-lit)):not(:has(.remix)){opacity: .45}
@media (prefers-reduced-motion: reduce){
  html[data-preview="watch-grid"] body.dd-light .wg-cell,html[data-preview="favorites-stream"] body.dd-light .wg-cell{filter: none}
}
html.dd-rm[data-preview="watch-grid"] body.dd-light .wg-cell{filter: none}

/* Every tile is the same frame: photo, kicker, title, stars. Scale on .wg-cell shrinks
   that frame; it must not change the crop. Remix chrome that is not part of the frame
   stays out of flow so a neighbor does not become a different shape. */
html[data-preview="watch-grid"] .wg-cell > .card:not(.dd-focused),html[data-preview="favorites-stream"] .wg-cell > .card:not(.dd-focused),
html[data-preview="watch-grid"] .wg-cell > .remix:not(.dd-focused),html[data-preview="favorites-stream"] .wg-cell > .remix:not(.dd-focused){
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 28px 26px 30px;
  grid-template-areas:
    "photo"
    "kicker"
    "title"
    "rate";
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 10px 10px 8px;
  box-sizing: border-box;
  animation: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}
html[data-preview="watch-grid"] .wg-cell > .card:not(.dd-focused):not(.dd-lit),html[data-preview="favorites-stream"] .wg-cell > .card:not(.dd-focused):not(.dd-lit),
html[data-preview="watch-grid"] .wg-cell > .card:not(.dd-focused):not(.dd-lit):hover,html[data-preview="favorites-stream"] .wg-cell > .card:not(.dd-focused):not(.dd-lit):hover,
html[data-preview="watch-grid"] .wg-cell > .remix:not(.dd-focused),html[data-preview="favorites-stream"] .wg-cell > .remix:not(.dd-focused),
html[data-preview="watch-grid"] .wg-cell > .remix:not(.dd-focused):hover,html[data-preview="favorites-stream"] .wg-cell > .remix:not(.dd-focused):hover{
  transform: none;
}
html[data-preview="watch-grid"] .wg-cell > .card:not(.dd-focused) .stage,html[data-preview="favorites-stream"] .wg-cell > .card:not(.dd-focused) .stage,
html[data-preview="watch-grid"] .wg-cell > .remix:not(.dd-focused) .rrow,html[data-preview="favorites-stream"] .wg-cell > .remix:not(.dd-focused) .rrow{
  grid-area: photo;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 12px;
  overflow: hidden;
}
html[data-preview="watch-grid"] .wg-cell > .card:not(.dd-focused) > header,html[data-preview="favorites-stream"] .wg-cell > .card:not(.dd-focused) > header{
  grid-area: kicker;
  height: 28px;
  margin: 0;
  padding: 6px 2px 0;
  overflow: hidden;
  align-items: center;
}
html[data-preview="watch-grid"] .wg-cell > .card:not(.dd-focused) > h2,html[data-preview="favorites-stream"] .wg-cell > .card:not(.dd-focused) > h2,
html[data-preview="watch-grid"] .wg-cell > .remix:not(.dd-focused) h2,html[data-preview="favorites-stream"] .wg-cell > .remix:not(.dd-focused) h2{
  grid-area: title;
  height: 26px;
  margin: 0;
  padding: 0 2px;
  font-size: 16px;
  line-height: 26px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-preview="watch-grid"] .wg-cell > .remix:not(.dd-focused) > .rh,html[data-preview="favorites-stream"] .wg-cell > .remix:not(.dd-focused) > .rh{
  grid-column: 1;
  grid-row: 2 / span 2;
  height: 54px;
  margin: 0;
  padding: 4px 2px 0;
  overflow: hidden;
  align-items: center;
}
html[data-preview="watch-grid"] .wg-cell > .remix:not(.dd-focused) > .rh h2,html[data-preview="favorites-stream"] .wg-cell > .remix:not(.dd-focused) > .rh h2{height: auto; padding: 0; line-height: 1.2}
/* Owner ratings. Do not display:none this row. Visitors stay hidden via
   body:not(.owner) .stars { display:none !important } in style.css — no !important here. */
html[data-preview="watch-grid"] .wg-cell > .card:not(.dd-focused) > .stars,html[data-preview="favorites-stream"] .wg-cell > .card:not(.dd-focused) > .stars,
html[data-preview="watch-grid"] .wg-cell > .remix:not(.dd-focused) > .stars,html[data-preview="favorites-stream"] .wg-cell > .remix:not(.dd-focused) > .stars{
  grid-area: rate;
  display: flex;
  align-items: center;
  height: 30px;
  margin: 0;
  padding: 0 2px;
}
html[data-preview="watch-grid"] .wg-cell > .card:not(.dd-focused) > .subt,html[data-preview="favorites-stream"] .wg-cell > .card:not(.dd-focused) > .subt,
html[data-preview="watch-grid"] .wg-cell > .card:not(.dd-focused) > details,html[data-preview="favorites-stream"] .wg-cell > .card:not(.dd-focused) > details,
html[data-preview="watch-grid"] .wg-cell > .card:not(.dd-focused) > .tags,html[data-preview="favorites-stream"] .wg-cell > .card:not(.dd-focused) > .tags,
html[data-preview="watch-grid"] .wg-cell > .card:not(.dd-focused) > .src,html[data-preview="favorites-stream"] .wg-cell > .card:not(.dd-focused) > .src,
html[data-preview="watch-grid"] .wg-cell > .card:not(.dd-focused) > .share,html[data-preview="favorites-stream"] .wg-cell > .card:not(.dd-focused) > .share,
html[data-preview="watch-grid"] .wg-cell > .card:not(.dd-focused) > .solo,html[data-preview="favorites-stream"] .wg-cell > .card:not(.dd-focused) > .solo{
  display: none;
}
html[data-preview="watch-grid"] .wg-cell > .remix:not(.dd-focused) .rrow > .rslide,html[data-preview="favorites-stream"] .wg-cell > .remix:not(.dd-focused) .rrow > .rslide,
html[data-preview="watch-grid"] .wg-cell > .remix:not(.dd-focused) .scnapp,html[data-preview="favorites-stream"] .wg-cell > .remix:not(.dd-focused) .scnapp,
html[data-preview="watch-grid"] .wg-cell > .remix:not(.dd-focused) .stage,html[data-preview="favorites-stream"] .wg-cell > .remix:not(.dd-focused) .stage{
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100%;
  flex: 0 0 100% !important;
  margin: 0;
}
html[data-preview="watch-grid"] .wg-cell > .remix:not(.dd-focused) .roles,html[data-preview="favorites-stream"] .wg-cell > .remix:not(.dd-focused) .roles,
html[data-preview="watch-grid"] .wg-cell > .remix:not(.dd-focused) .bts,html[data-preview="favorites-stream"] .wg-cell > .remix:not(.dd-focused) .bts,
html[data-preview="watch-grid"] .wg-cell > .remix:not(.dd-focused) .ddesc,html[data-preview="favorites-stream"] .wg-cell > .remix:not(.dd-focused) .ddesc,
html[data-preview="watch-grid"] .wg-cell > .remix:not(.dd-focused) .note,html[data-preview="favorites-stream"] .wg-cell > .remix:not(.dd-focused) .note{
  display: none !important;
}
html[data-preview="watch-grid"] .wg-cell > .remix:not(.dd-focused) > .rr-bar,html[data-preview="favorites-stream"] .wg-cell > .remix:not(.dd-focused) > .rr-bar,
html[data-preview="watch-grid"] .wg-cell > .remix:not(.dd-focused) > .fr-bar,html[data-preview="favorites-stream"] .wg-cell > .remix:not(.dd-focused) > .fr-bar{
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 108px;
  z-index: 4;
  margin: 0;
  width: auto;
}
html[data-preview="watch-grid"][data-ix-browse="focusrow"] .wg-cell > .remix:not(.dd-focused) .scn .rrow,html[data-preview="favorites-stream"][data-ix-browse="focusrow"] .wg-cell > .remix:not(.dd-focused) .scn .rrow,
html[data-preview="watch-grid"] .wg-cell > .remix:not(.dd-focused) .rrow,html[data-preview="favorites-stream"] .wg-cell > .remix:not(.dd-focused) .rrow{
  --rr-w: 100%;
  display: flex;
  align-items: stretch;
  gap: 0;
  touch-action: none;
}

html[data-preview="watch-grid"] input,html[data-preview="favorites-stream"] input,
html[data-preview="watch-grid"] textarea,html[data-preview="favorites-stream"] textarea,
html[data-preview="watch-grid"] pre,html[data-preview="favorites-stream"] pre,
html[data-preview="watch-grid"] code,html[data-preview="favorites-stream"] code{
  user-select: text;
  -webkit-user-select: text;
}
html[data-preview="watch-grid"] .stage iframe,html[data-preview="favorites-stream"] .stage iframe{pointer-events: none}
html[data-preview="watch-grid"] .wg-cell:not(.wg-prime) iframe,html[data-preview="favorites-stream"] .wg-cell:not(.wg-prime) iframe,
html[data-preview="watch-grid"] .rslide:not([data-fr="c"]) iframe,html[data-preview="favorites-stream"] .rslide:not([data-fr="c"]) iframe{visibility: hidden}
html[data-preview="favorites-stream"] .wg-cell iframe,
html[data-preview="favorites-stream"] .wg-cell:not(.wg-prime) iframe,
html[data-preview="favorites-stream"] .wg-far iframe{
  visibility: visible;
}
html[data-preview="watch-grid"] .wg-cell.wg-live .stage iframe,html[data-preview="favorites-stream"] .wg-cell.wg-live .stage iframe,
html[data-preview="watch-grid"] .dd-focused .stage iframe,html[data-preview="favorites-stream"] .dd-focused .stage iframe{pointer-events: auto}
html[data-preview="watch-grid"][data-arch="folio"] .card > header::before,html[data-preview="favorites-stream"][data-arch="folio"] .card > header::before{
  content: "№ " attr(data-wg-no);
}

.wg-poster{
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 28px 26px 30px;
  box-sizing: border-box;
  padding: 10px 10px 8px;
  pointer-events: none;
  background: var(--card);
}
.wg-poster .wg-ph{
  min-height: 0;
  height: 100%;
  border-radius: 12px;
  border: 0;
  background:
    radial-gradient(circle at 34% 34%, color-mix(in srgb, var(--c, var(--accent)) 26%, var(--card)), transparent 66%),
    color-mix(in srgb, var(--stage) 70%, var(--card));
}
.wg-poster .wg-k{
  margin: 0;
  padding: 6px 2px 0;
  overflow: hidden;
  font: 700 11px/28px var(--font);
  letter-spacing: .08em;
  color: color-mix(in srgb, var(--mu) 80%, transparent);
}
.wg-poster b{
  margin: 0;
  padding: 0 2px;
  font: 700 16px/26px var(--font);
  color: color-mix(in srgb, var(--fg) 62%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-preview="watch-grid"] nav.top.wg-pin,html[data-preview="favorites-stream"] nav.top.wg-pin{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 32;
  width: auto;
  max-width: none;
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius: 0;
  box-shadow: none;
  background: var(--card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
  user-select: none;
  -webkit-user-select: none;
}
html[data-preview="watch-grid"][data-vt="theme"] nav.top.wg-pin,html[data-preview="favorites-stream"][data-vt="theme"] nav.top.wg-pin{view-transition-name: dd-wg-nav}
html[data-preview="watch-grid"][data-vt="theme"] header.hero.wg-mast,html[data-preview="favorites-stream"][data-vt="theme"] header.hero.wg-mast{view-transition-name: dd-wg-mast}
html[data-preview="watch-grid"][data-vt="theme"] .wg-hud,html[data-preview="favorites-stream"][data-vt="theme"] .wg-hud{view-transition-name: dd-wg-hud}
html[data-preview="watch-grid"][data-vt="theme"]::view-transition-group(dd-wg-nav),html[data-preview="favorites-stream"][data-vt="theme"]::view-transition-group(dd-wg-nav),
html[data-preview="watch-grid"][data-vt="theme"]::view-transition-old(dd-wg-nav),html[data-preview="favorites-stream"][data-vt="theme"]::view-transition-old(dd-wg-nav),
html[data-preview="watch-grid"][data-vt="theme"]::view-transition-new(dd-wg-nav),html[data-preview="favorites-stream"][data-vt="theme"]::view-transition-new(dd-wg-nav),
html[data-preview="watch-grid"][data-vt="theme"]::view-transition-group(dd-wg-mast),html[data-preview="favorites-stream"][data-vt="theme"]::view-transition-group(dd-wg-mast),
html[data-preview="watch-grid"][data-vt="theme"]::view-transition-old(dd-wg-mast),html[data-preview="favorites-stream"][data-vt="theme"]::view-transition-old(dd-wg-mast),
html[data-preview="watch-grid"][data-vt="theme"]::view-transition-new(dd-wg-mast),html[data-preview="favorites-stream"][data-vt="theme"]::view-transition-new(dd-wg-mast),
html[data-preview="watch-grid"][data-vt="theme"]::view-transition-group(dd-wg-hud),html[data-preview="favorites-stream"][data-vt="theme"]::view-transition-group(dd-wg-hud),
html[data-preview="watch-grid"][data-vt="theme"]::view-transition-old(dd-wg-hud),html[data-preview="favorites-stream"][data-vt="theme"]::view-transition-old(dd-wg-hud),
html[data-preview="watch-grid"][data-vt="theme"]::view-transition-new(dd-wg-hud),html[data-preview="favorites-stream"][data-vt="theme"]::view-transition-new(dd-wg-hud){animation: none}

html[data-preview="watch-grid"] header.hero.wg-mast,html[data-preview="favorites-stream"] header.hero.wg-mast{
  position: fixed;
  top: var(--wg-nav, 52px);
  left: 0;
  right: 0;
  z-index: 31;
  max-width: none;
  margin: 0;
  padding: 6px 12px 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  background: var(--card);
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  user-select: none;
  -webkit-user-select: none;
}
html[data-preview="watch-grid"] header.hero.wg-mast > p,html[data-preview="favorites-stream"] header.hero.wg-mast > p,
html[data-preview="watch-grid"] header.hero.wg-mast .ical,html[data-preview="favorites-stream"] header.hero.wg-mast .ical{display: none}
html[data-preview="watch-grid"] header.hero.wg-mast .date,html[data-preview="favorites-stream"] header.hero.wg-mast .date{grid-column: 1; grid-row: 1; margin: 0}
html[data-preview="watch-grid"] header.hero.wg-mast .pn,html[data-preview="favorites-stream"] header.hero.wg-mast .pn{
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
html[data-preview="watch-grid"] header.hero.wg-mast h1,html[data-preview="favorites-stream"] header.hero.wg-mast h1{
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: none;
  -webkit-text-stroke: 0;
}
html[data-preview="watch-grid"] header.hero.wg-mast .wg-more,html[data-preview="favorites-stream"] header.hero.wg-mast .wg-more{grid-column: 2; grid-row: 2; justify-self: end; position: relative}
html[data-preview="watch-grid"] header.hero.wg-mast .wg-more > summary,html[data-preview="favorites-stream"] header.hero.wg-mast .wg-more > summary{
  cursor: pointer;
  font: 800 12px/1 var(--font);
  list-style: none;
  padding: 4px 8px;
  border: 2px solid var(--fg);
  border-radius: 999px;
  background: var(--bg);
}
html[data-preview="watch-grid"] header.hero.wg-mast .wg-more > summary::-webkit-details-marker,html[data-preview="favorites-stream"] header.hero.wg-mast .wg-more > summary::-webkit-details-marker{display: none}
html[data-preview="watch-grid"] header.hero.wg-mast .wg-more[open],html[data-preview="favorites-stream"] header.hero.wg-mast .wg-more[open]{
  position: static;
}
html[data-preview="watch-grid"] header.hero.wg-mast .wg-more .credits,html[data-preview="favorites-stream"] header.hero.wg-mast .wg-more .credits,
html[data-preview="watch-grid"] header.hero.wg-mast .wg-more footer,html[data-preview="favorites-stream"] header.hero.wg-mast .wg-more footer{
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: min(420px, 80vw);
  max-height: 46vh;
  overflow: auto;
  margin: 0;
  padding: 12px 14px;
  background: var(--card);
  border: 2px solid var(--fg);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--fg);
  z-index: 5;
}
html[data-preview="watch-grid"] header.hero.wg-mast .counts,html[data-preview="favorites-stream"] header.hero.wg-mast .counts{
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 4px 0 0;
  overflow-x: auto;
  scrollbar-width: none;
}
html[data-preview="watch-grid"] header.hero.wg-mast .counts::-webkit-scrollbar,html[data-preview="favorites-stream"] header.hero.wg-mast .counts::-webkit-scrollbar{display: none}
html[data-preview="watch-grid"] header.hero.wg-mast .counts span,html[data-preview="favorites-stream"] header.hero.wg-mast .counts span{flex: none}

.wg-hud{
  position: fixed;
  z-index: 33;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  translate: -50% 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: calc(100vw - 16px);
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 10px 30px -12px rgba(22, 17, 13, .28);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
}
.wg-cols{display: none}
.wg-panel{display: flex; align-items: center; gap: 6px}
.wg-hud .wg-flag{
  padding: 0 6px;
  font: 800 11px/1 var(--font-d);
  letter-spacing: .14em;
  color: var(--accent);
}
.wg-hud button,
.wg-hud a{
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font: 700 12px/1 var(--font);
  padding: 7px 11px;
  text-decoration: none;
  cursor: pointer;
}
.wg-hud button[aria-pressed="true"]{background: var(--accent); color: var(--on-accent)}
.wg-hud a{background: var(--fg); color: var(--bg)}
.wg-hud button:focus-visible,
.wg-hud a:focus-visible{outline: 2px solid var(--fg); outline-offset: 2px}
@media (max-width: 700px){
  html[data-preview="watch-grid"] nav.top.wg-pin,html[data-preview="favorites-stream"] nav.top.wg-pin{padding: 4px 8px}
  html[data-preview="watch-grid"] header.hero.wg-mast,html[data-preview="favorites-stream"] header.hero.wg-mast{padding: 4px 10px}
  html[data-preview="watch-grid"] header.hero.wg-mast h1,html[data-preview="favorites-stream"] header.hero.wg-mast h1,
  html[data-preview="watch-grid"] header.hero.wg-mast .wg-more,html[data-preview="favorites-stream"] header.hero.wg-mast .wg-more,
  html[data-preview="watch-grid"] header.hero.wg-mast .pn,html[data-preview="favorites-stream"] header.hero.wg-mast .pn{display: none}
  html[data-preview="watch-grid"] header.hero.wg-mast .counts,html[data-preview="favorites-stream"] header.hero.wg-mast .counts{margin: 2px 0 0}
  .wg-hud{
    left: auto;
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    translate: none;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .wg-cols{
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    border: 2px solid var(--fg);
    border-radius: 999px;
    background: var(--card);
    color: var(--fg);
    font: 800 12px/1 var(--font);
    box-shadow: 3px 3px 0 var(--fg);
    cursor: pointer;
  }
  .wg-hud:not(.open) .wg-panel{display: none}
  .wg-hud.open{flex-direction: column; align-items: flex-end; gap: 8px}
  .wg-hud.open .wg-panel{
    padding: 4px;
    border: 3px solid var(--fg);
    border-radius: 999px;
    background: var(--card);
    box-shadow: 3px 3px 0 var(--fg);
  }
  .wg-hud button,.wg-hud a{padding: 6px 8px; font-size: 11px}
  .wg-hud .wg-flag{display: none}
}
.wg-sr{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

html[data-preview="watch-grid"] .ix-keys-hint,html[data-preview="favorites-stream"] .ix-keys-hint{bottom: 72px}
html.wg-fail #wg-vp{position: static; height: auto; overflow: visible}
@media (prefers-reduced-motion: reduce){
  .wg-hud button,.wg-hud a{transition: none}
}


/* ---- favorites-stream: dense field, component body only on tiles ---- */
html[data-preview="favorites-stream"] .wg-cell > .card:not(.dd-focused){
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "photo";
  padding: 8px;
}
html[data-preview="favorites-stream"] .wg-cell > .card:not(.dd-focused) > header,
html[data-preview="favorites-stream"] .wg-cell > .card:not(.dd-focused) > h2,
html[data-preview="favorites-stream"] .wg-cell > .card:not(.dd-focused) > .stars,
html[data-preview="favorites-stream"] .wg-cell > .card:not(.dd-focused) > .subt,
html[data-preview="favorites-stream"] .wg-cell > .card:not(.dd-focused) > details,
html[data-preview="favorites-stream"] .wg-cell > .card:not(.dd-focused) > .tags,
html[data-preview="favorites-stream"] .wg-cell > .card:not(.dd-focused) > .src,
html[data-preview="favorites-stream"] .wg-cell > .card:not(.dd-focused) > .share,
html[data-preview="favorites-stream"] .wg-cell > .card:not(.dd-focused) > .solo,
html[data-preview="favorites-stream"] .wg-cell > .card:not(.dd-focused) > .rparts,
html[data-preview="favorites-stream"] .wg-cell > .card:not(.dd-focused) > .rlinks{
  display: none !important;
}
html[data-preview="favorites-stream"] .wg-cell > .card:not(.dd-focused) .stage{
  grid-area: photo;
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 14px;
}
/* Poster stand-ins also body-only (no kicker/title captions on the wall). */
html[data-preview="favorites-stream"] .wg-poster{
  grid-template-rows: minmax(0, 1fr);
  padding: 8px;
}
html[data-preview="favorites-stream"] .wg-poster .wg-k,
html[data-preview="favorites-stream"] .wg-poster b{display: none}
/* Compact mast + sticky filter dock; list mode restores classic favorites. */
html[data-preview="favorites-stream"] header.hero.fhero.wg-mast{
  position: fixed;
  top: var(--wg-nav, 48px);
  left: 0; right: 0;
  z-index: 30;
  margin: 0;
  padding: 10px 20px 8px;
  max-width: none;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
html[data-preview="favorites-stream"] header.hero.fhero.wg-mast h1{font-size: clamp(22px, 3vw, 32px); margin: 0}
html[data-preview="favorites-stream"] header.hero.fhero.wg-mast > p,
html[data-preview="favorites-stream"] header.hero.fhero.wg-mast .date{display: none}
html[data-preview="favorites-stream"] .fbar.fav-dock{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 31;
  max-width: min(920px, calc(100vw - 24px));
  width: max-content;
  margin: 0;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--fg) 16%, transparent);
  background: color-mix(in srgb, var(--card) 94%, transparent);
  box-shadow: 0 12px 40px -16px rgba(0,0,0,.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
html[data-preview="favorites-stream"] .fbar.fav-dock .calbox{display: none}
html[data-preview="favorites-stream"] .fbar.fav-dock .fside{margin: 0; gap: 10px}
html[data-preview="favorites-stream"] .fsec{display: none}
html[data-preview="favorites-stream"] .empty:not([hidden]){
  display: block;
  position: fixed;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: 28;
  max-width: min(420px, calc(100vw - 48px));
  margin: 0;
  padding: 18px 20px;
  text-align: center;
  border-radius: 16px;
  background: color-mix(in srgb, var(--card) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  box-shadow: 0 18px 50px -20px rgba(0,0,0,.4);
}
html[data-preview="favorites-stream"] body.fav-list-mode{
  height: auto !important;
  overflow: auto !important;
  visibility: visible !important;
}
html[data-preview="favorites-stream"] body.fav-list-mode #wg-vp,
html[data-preview="favorites-stream"] body.fav-list-mode .wg-hud{display: none !important}
html[data-preview="favorites-stream"] body.fav-list-mode header.hero.fhero.wg-mast{
  position: static;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  padding: inherit;
}
html[data-preview="favorites-stream"] body.fav-list-mode header.hero.fhero.wg-mast > p,
html[data-preview="favorites-stream"] body.fav-list-mode header.hero.fhero.wg-mast .date{display: revert}
html[data-preview="favorites-stream"] body.fav-list-mode .fbar.fav-dock{
  position: static;
  transform: none;
  max-width: 1180px;
  width: auto;
  margin: 0 auto;
  padding: 0 28px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  flex-direction: column;
}
html[data-preview="favorites-stream"] body.fav-list-mode .fbar.fav-dock .calbox{display: block}
html[data-preview="favorites-stream"] body.fav-list-mode .fsec{display: block}
html[data-preview="favorites-stream"] body.fav-list-mode .fsec[hidden]{display: none}
html[data-preview="favorites-stream"] body.fav-list-mode main.wg-src{display: block !important}
html[data-preview="favorites-stream"] body.fav-list-mode .empty{display: block}
html[data-preview="favorites-stream"] body.fav-list-mode .empty[hidden]{display: none}
html[data-preview="favorites-stream"] .fmodes{
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
}
html[data-preview="favorites-stream"] .fmodes button{
  border: 0;
  background: transparent;
  color: var(--mu);
  font: 600 12px/1 var(--font);
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
}
html[data-preview="favorites-stream"] .fmodes button[aria-pressed="true"]{
  background: var(--card);
  color: var(--fg);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
html[data-preview="favorites-stream"] .wg-hud .wg-flag{display: inline}
/* Keep column HUD clear of the sticky favorites dock. */
html[data-preview="favorites-stream"] .wg-hud{
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--wg-dock, 72px));
}
@media (max-width: 700px){
  html[data-preview="favorites-stream"] .wg-hud{
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + var(--wg-dock, 72px));
  }
}