/* 496: stronger landing CTA and more breathing room. */
@media(min-width:761px){
  body.single-player-ui .works{
    bottom:clamp(20px,2.7vh,30px)!important;
  }
  body.single-player-ui .player-bar.is-idle{
    gap:16px!important;
  }
  body.single-player-ui .player-bar.is-idle .player-state{
    flex:0 0 86px!important;
    width:86px!important;
    min-width:86px!important;
    height:72px!important;
    min-height:72px!important;
  }
  body.single-player-ui .player-bar.is-idle .player-state::after{
    inset:0!important;
    background:radial-gradient(circle,rgba(250,249,244,.23) 0%,rgba(250,249,244,.08) 44%,transparent 74%)!important;
  }
  body.single-player-ui .player-bar.is-idle .player-state::before{
    margin-left:7px!important;
    border-top-width:20px!important;
    border-bottom-width:20px!important;
    border-left-width:32px!important;
    filter:drop-shadow(0 0 9px rgba(250,249,244,.55))!important;
  }
}
/* Expanded header may be wider than narrow/vertical artwork. */
@media(min-width:761px){
  body.single-player-ui .player-video-panel{
    gap:8px!important;
  }
  body.single-player-ui .player-video-dragzone{
    width:min(max(var(--player-w,280px),620px),calc(100vw - 48px))!important;
    justify-self:center!important;
    display:grid!important;
    grid-template-columns:minmax(240px,1fr) auto auto auto auto!important;
    grid-template-rows:auto!important;
    column-gap:8px!important;
    row-gap:0!important;
    height:auto!important;
    min-height:42px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
  }
  body.single-player-ui .player-heading{
    grid-column:1!important;
    grid-row:1!important;
    min-width:240px!important;
    align-self:center!important;
  }
  body.single-player-ui #video-title{
    display:block!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    text-wrap:balance;
    -webkit-line-clamp:unset!important;
    max-height:none!important;
    font-size:18px!important;
    line-height:1.2!important;
  }
  body.single-player-ui .player-head-actions{
    display:contents!important;
  }
  body.single-player-ui #player-expanded-browse{
    grid-column:2!important;
    grid-row:1!important;
  }
  body.single-player-ui .player-story-settings{
    grid-column:3!important;
    grid-row:1!important;
    align-self:center!important;
    flex-wrap:nowrap!important;
  }
  body.single-player-ui .player-video-dragzone .panel-source-link{
    grid-column:4!important;
    grid-row:1!important;
  }
  body.single-player-ui #player-close{
    grid-column:5!important;
    grid-row:1!important;
    min-width:36px!important;
    width:36px!important;
    height:40px!important;
    min-height:40px!important;
    padding:0!important;
  }
  body.single-player-ui .player-minimize-icon{
    width:18px!important;
    height:18px!important;
    stroke-width:1.55!important;
  }
}
/* Mobile keeps the existing scale, with a modest bottom breathing gap. */
@media(max-width:760px){
  body.single-player-ui .works{
    bottom:max(10px,env(safe-area-inset-bottom))!important;
  }
  body.single-player-ui .player-video-panel{
    gap:6px!important;
  }
  body.single-player-ui #video-title{
    overflow-wrap:normal!important;
    word-break:normal!important;
    text-wrap:balance;
  }
}
/* Landing stack: state above rail, transport below rail. */
body.single-player-ui .works{
  display:grid!important;
  grid-template-columns:minmax(16px,1fr) auto auto minmax(16px,1fr)!important;
  grid-template-rows:auto auto auto!important;
  column-gap:14px!important;
  row-gap:4px!important;
  align-items:center!important;
}
body.single-player-ui .player-bar{
  display:contents!important;
}
body.single-player-ui .player-bar .player-state{
  grid-column:2!important;
  grid-row:1!important;
  justify-self:end!important;
  text-align:left!important;
}
body.single-player-ui .player-bar .player-collection{
  grid-column:3!important;
  grid-row:1!important;
  justify-self:start!important;
}
body.single-player-ui .rail-viewport{
  grid-column:1/-1!important;
  grid-row:2!important;
}
body.single-player-ui #player-controls-dock{
  grid-column:2/4!important;
  grid-row:3!important;
  justify-self:center!important;
  width:min(860px,calc(100vw - 64px))!important;
}
body.single-player-ui .player-bar.is-idle #player-controls-dock{
  display:none!important;
}
body.single-player-ui .player-bar .video-toggle,
body.single-player-ui .player-bar .main-insight-settings{
  display:none!important;
}
body.single-player-ui .player-bar:not(.is-idle) .player-state{
  width:auto!important;
  max-width:min(40vw,430px)!important;
  min-width:120px!important;
  overflow:hidden!important;
}
body.single-player-ui .player-bar:not(.is-idle) .player-title{
  text-align:left!important;
}
body.single-player-ui #player-controls-dock .player-video-controls{
  width:100%!important;
  margin:0 auto!important;
}
/* Skip Story is a transport action shared by expanded and compact modes. */
body.single-player-ui .panel-skip-story{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 8px;
  margin-left:4px;
  border:0;
  background:transparent;
  color:rgba(250,249,244,.82);
  font:inherit;
  font-size:13px;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
}
body.single-player-ui .panel-skip-story:hover,
body.single-player-ui .panel-skip-story:focus-visible{
  color:#fff;
  outline:none;
  text-decoration:underline;
  text-underline-offset:3px;
}
body.single-player-ui .panel-skip-story[hidden]{
  display:none!important;
}
@media(min-width:761px){
  body.single-player-ui .works{
    bottom:clamp(14px,2vh,20px)!important;
  }
}
@media(max-width:760px){
  body.single-player-ui .works{
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    column-gap:8px!important;
    row-gap:2px!important;
  }
  body.single-player-ui .player-bar:not(.is-idle) .player-state{
    max-width:46vw!important;
    min-width:90px!important;
  }
  body.single-player-ui #player-controls-dock{
    width:calc(100vw - 32px)!important;
  }
  body.single-player-ui .panel-skip-story{
    min-height:44px;
    font-size:13px;
    padding:0 6px;
  }
}
body.single-player-ui .player-bar,
body.single-player-ui .player-bar.is-idle,
body.single-player-ui .player-bar:not(.is-idle){
  display:contents!important;
}
body.single-player-ui .player-bar .player-state,
body.single-player-ui .player-bar .player-collection,
body.single-player-ui #player-controls-dock,
body.single-player-ui .player-bar .video-toggle{
  grid-area:auto!important;
}
body.single-player-ui .player-bar .player-state{
  grid-column:2!important;
  grid-row:1!important;
}
body.single-player-ui .player-bar .player-collection{
  grid-column:3!important;
  grid-row:1!important;
}
body.single-player-ui #player-controls-dock{
  grid-column:2/4!important;
  grid-row:3!important;
}
body.single-player-ui .player-bar:not(.is-idle) .player-state{
  grid-area:auto!important;
  grid-column:2!important;
  grid-row:1!important;
}
body.single-player-ui .player-bar:not(.is-idle) .player-collection{
  grid-area:auto!important;
  grid-column:3!important;
  grid-row:1!important;
}
body.single-player-ui .player-bar:not(.is-idle) #player-controls-dock{
  grid-area:auto!important;
  grid-column:2/4!important;
  grid-row:3!important;
}
