/* A single recurring replay needs no empty toolbar above the player. */
.milestone-dialog .replay-toolbar:not(:has(.dialog-clip-choices)){position:relative;margin:0;height:0}
.milestone-dialog .replay-toolbar:not(:has(.dialog-clip-choices)) .replay-loading{position:absolute;top:20px;left:12px;z-index:1}

.clip-title-loading{display:inline-flex;align-items:center;gap:8px;font-weight:400}
.clip-title-loading .replay-loading{width:12px;height:12px}

/* Goal titles belong above the modal divider in every goal view. */
#milestone-dialog .milestone-dialog-toolbar{justify-content:space-between;align-items:flex-start;gap:16px;padding:24px 36px 20px}
#milestone-dialog-heading{min-width:0}
#milestone-dialog-heading h2{margin:8px 0 0;font-size:38px;line-height:1.08;overflow-wrap:anywhere}
#milestone-dialog .milestone-dialog-toolbar .dialog-close{flex:none;margin:-6px -16px 0 0}
@media(max-width:700px){
 #milestone-dialog .milestone-dialog-toolbar{padding:20px 16px 16px;gap:10px}
 #milestone-dialog-heading h2{font-size:30px}
 #milestone-dialog .milestone-dialog-toolbar .dialog-close{margin:-6px -6px 0 0}}

#milestone-dialog[data-recurring] .dialog-unlock-summary{flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px;padding-top:18px}
#milestone-dialog[data-recurring] .dialog-unlock-summary>strong{font:600 15px/1.4 var(--body)}
#milestone-dialog[data-recurring] .dialog-unlock-summary>span{font:400 13px/1.4 var(--body);text-align:right}

/* Phone layouts give the goal browser its own screen and keep replays proportional. */
@media(max-width:700px){
 #milestone-dialog .dialog-video{min-height:0;aspect-ratio:16/9}
 #milestone-dialog .dialog-video iframe{min-height:0;height:100%}}
#milestone-dialog[data-recurring] .dialog-unlock-summary>span{color:#f0808b}

/* One full-width status footer; omit the body when there is no content. */
#milestone-dialog-footer{flex:none;border-top:1px solid var(--border);padding:18px 36px 22px;background:#1c1c1e}
#milestone-dialog #milestone-dialog-footer>.dialog-status,
#milestone-dialog #milestone-dialog-footer>.dialog-unlock-summary{margin:0;padding:0;border:0}
#milestone-dialog #milestone-dialog-footer>.dialog-unlock-summary+.dialog-status{margin-top:14px}
#milestone-dialog.has-empty-body .milestone-dialog-toolbar{border-bottom:0}
#milestone-dialog-body[hidden]{display:none}
#milestone-dialog-body>.dialog-description:last-child{margin-bottom:0}
#milestone-dialog-body>.dialog-section:first-child{margin-top:0;padding-top:0;border-top:0}
@media(max-width:700px){#milestone-dialog-footer{padding:16px}}

#milestone-dialog-heading .dialog-description{margin:10px 0 0;font:400 15px/1.5 var(--body);color:#b8b8b8}
#milestone-dialog-body>.replay-toolbar:first-child{margin-top:0}
/* The goal dialog is mounted outside page-specific layout containers. */
@media(max-width:700px){
 #milestone-dialog .dialog-close{width:44px;height:44px}
 #milestone-dialog-body{padding:18px 16px 24px}
 #milestone-dialog .dialog-clip-choice{min-height:44px}
 #milestone-dialog .dialog-status{flex-wrap:wrap}
}
#milestone-dialog .dialog-threshold{font-weight:700;text-shadow:0 1px 1px #000,0 0 1px #ffb3b34d}

.dialog-game-link{margin-bottom:20px}
.dialog-section+.dialog-game-link{margin-top:20px}
.dialog-game-link a{color:var(--red-text)}
.dialog-game-link a:hover{text-decoration:underline}