/* Stream — Downloads (Premium offline playback): button states, the Downloads page, the offline player.
   Behaviour: ext/w1-offline.js. */

/* ---------- Download buttons: progress and "Downloaded" ---------- */
[data-ytw-download].is-busy,[data-ytx-offline].is-busy{
  background-image:linear-gradient(90deg,var(--yt-tonal-hover) var(--ytx-pct,0%),transparent var(--ytx-pct,0%));
  font-variant-numeric:tabular-nums}
.yt-pill[data-ytw-download].is-done>svg,.yt-pill[data-ytx-offline].is-done>svg,.yt-menu-item[data-ytw-download].is-done>svg{visibility:hidden}
.yt-pill[data-ytw-download].is-done,.yt-pill[data-ytx-offline].is-done,.yt-menu-item[data-ytw-download].is-done{position:relative}
.yt-pill[data-ytw-download].is-done::before,.yt-pill[data-ytx-offline].is-done::before,.yt-menu-item[data-ytw-download].is-done::before{
  content:"";position:absolute;width:24px;height:24px;background:currentColor;pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.6 14.6-4.2-4.2 1.4-1.4 2.8 2.8 5.9-5.9 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.6 14.6-4.2-4.2 1.4-1.4 2.8 2.8 5.9-5.9 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat}
.yt-pill[data-ytw-download].is-done::before,.yt-pill[data-ytx-offline].is-done::before{left:10px;top:6px}
.yt-menu-item[data-ytw-download].is-done::before{left:16px;top:50%;transform:translateY(-50%)}

/* ---------- The Downloads page ---------- */
.ytx-dl-page{max-width:1096px;padding-top:24px}
.ytx-dl-head{margin-bottom:16px}
.ytx-dl-h1{display:flex;align-items:center;gap:12px;font:700 36px/44px var(--yt-font);letter-spacing:-.4px;margin-bottom:8px}
.ytx-dl-h1 .yt-ic{width:36px;height:36px}
.ytx-dl-q,.ytx-dl-note,.ytx-dl-usage{color:var(--yt-text-2);font-size:14px;line-height:20px}
.ytx-dl-q{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px}
.ytx-dl-note{margin-top:4px}
.ytx-dl-usage{margin-top:4px;font-variant-numeric:tabular-nums}
.ytx-dl-offline{display:flex;align-items:center;gap:8px;margin:0 0 16px;padding:10px 14px;border-radius:12px;background:var(--yt-tonal);color:var(--yt-text);font-size:14px}
.ytx-dl-offline[hidden]{display:none}
.ytx-dl-upsell{display:flex;align-items:center;gap:16px;margin:8px 0 24px;padding:16px 20px;border-radius:12px;background:var(--yt-bg-2);border:1px solid var(--yt-border)}
.ytx-dl-upsell-ic{flex:none;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--yt-red);color:#fff}
.ytx-dl-upsell-ic .yt-ic-lg{width:28px;height:28px}
.ytx-dl-upsell-txt{flex:1;min-width:0}
.ytx-dl-upsell-txt h2{font:500 18px/26px var(--yt-font)}
.ytx-dl-upsell-txt p{color:var(--yt-text-2);margin-top:2px}

.ytx-dl-list{display:flex;flex-direction:column;gap:16px}
.ytx-dl-item{display:flex;align-items:flex-start;gap:16px;min-width:0}
.ytx-dl-thumb{position:relative;flex:none;width:246px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--yt-thumb-bg);display:block;padding:0}
.ytx-dl-thumb img{width:100%;height:100%;object-fit:cover}
.ytx-dl-dur{position:absolute;right:4px;bottom:4px;padding:1px 4px;border-radius:4px;background:rgba(0,0,0,.8);color:#fff;font:500 12px/18px var(--yt-font)}
.ytx-dl-ok{position:absolute;left:4px;bottom:4px;display:inline-flex;padding:2px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff}
.ytx-dl-ok .yt-ic{width:18px;height:18px}
.ytx-dl-main{flex:1;min-width:0;padding-top:2px}
.ytx-dl-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:left;font:400 18px/26px var(--yt-font);color:var(--yt-text);max-width:100%}
.ytx-dl-title:hover{color:var(--yt-text)}
.ytx-dl-sub,.ytx-dl-meta{color:var(--yt-text-2);font-size:12px;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ytx-dl-sub{margin-top:4px}
.ytx-dl-acts{display:flex;align-items:center;gap:4px;flex:none}
.ytx-dl-acts .yt-btn .yt-ic{width:20px;height:20px}
.ytx-dl-item.is-missing .ytx-dl-thumb img{opacity:.55;filter:grayscale(.4)}
.ytx-dl-item.is-missing .ytx-dl-meta{color:var(--yt-text-3)}
.ytx-dl-empty[hidden]{display:none}

/* ---------- Dialogs: choose a quality, play offline ---------- */
.ytx-dl-ask-p{color:var(--yt-text-2);margin-bottom:12px}
.ytx-dl-ask-opts{display:flex;flex-wrap:wrap;gap:8px}
.yt-dialog.ytx-dl-player{max-width:min(96vw,960px);background:#000;color:#fff}
.ytx-dl-player .yt-dialog-head{background:var(--yt-menu-bg);color:var(--yt-text)}
.ytx-dl-player .yt-dialog-head h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ytx-dl-player .yt-dialog-body{padding:0}
.ytx-dl-video{width:100%;aspect-ratio:16/9;max-height:76vh;background:#000;display:block}
.ytx-dl-player-sub{padding:10px 16px 14px;color:var(--yt-text-2);background:var(--yt-menu-bg);font-size:13px}

@media (max-width:791px){
  .ytx-dl-page{padding:16px 12px 32px}
  .ytx-dl-h1{font-size:24px;line-height:32px}
  .ytx-dl-h1 .yt-ic{width:28px;height:28px}
  .ytx-dl-upsell{flex-wrap:wrap;padding:14px 16px}
  .ytx-dl-upsell .yt-btn{width:100%}
  .ytx-dl-item{gap:12px}
  .ytx-dl-thumb{width:160px}
  .ytx-dl-title{font-size:14px;line-height:20px}
  .ytx-dl-item{flex-wrap:wrap}
  .ytx-dl-main{flex:1 1 calc(100% - 172px)}
  .ytx-dl-acts{margin-left:172px}
}