/* downloads.css — the Downloads screen, the download sheets and the download buttons and marks. */

/* ======================= the screen ======================= */
.dl-body { display: flex; flex-direction: column; gap: 14px; }
.dl-banner { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 0.6px solid var(--separator); }
.dl-banner > .mi { color: var(--warning); flex: none; }
.dl-banner.ok > .mi { color: var(--success); }
.dl-storage { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 0.6px solid var(--separator); }
.dl-storage-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.dl-storage-n { font: 600 22px/28px var(--font); letter-spacing: -0.3px; }
.dl-waitpill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 14px; background: var(--surface-high); color: var(--text-2); font: 500 12px var(--font); flex: none; }
.dl-waitpill.ok { color: var(--success); }
.dl-tabs { display: flex; }

.dl-list { display: flex; flex-direction: column; gap: 8px; }
.dl-row { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 8px; border-radius: 14px; background: var(--surface); border: 0.6px solid var(--separator); }
.dl-main { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; text-align: left; border-radius: 10px; }
.dl-art { position: relative; flex: none; border-radius: 9px; overflow: hidden; background: var(--surface-high); }
.dl-art.poster { width: 54px; height: 81px; }
.dl-art.still { width: 112px; height: 63px; }
.dl-art .rimg { width: 100%; height: 100%; }
.dl-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.28); color: #fff; opacity: 0.9; }
.dl-play .mi { filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)); }
.dl-lock { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.dl-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dl-title { font: 600 15px/20px var(--font); letter-spacing: -0.1px; }
.dl-status { margin-top: 1px; }
.dl-bar { margin-top: 6px; width: 100%; max-width: 360px; border-radius: 2px; }
.dl-acts { display: flex; align-items: center; gap: 6px; flex: none; padding-right: 4px; }
.dl-acts > .mi { margin-right: 6px; }
.dl-row.st-done .dl-acts .ibtn { background: transparent; color: var(--text-2); }

.dl-season { display: flex; flex-direction: column; gap: 10px; }
.dl-season + .dl-season { margin-top: 10px; }
.dl-season-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 4px; }

/* ======================= the sheets ======================= */
.dls-sheet .sh-body { padding-bottom: 6px; }
.dls-one { display: flex; flex-direction: column; gap: 16px; padding-bottom: 4px; }
.dls-item { display: flex; align-items: center; gap: 14px; }
.dls-art { width: 56px; height: 84px; border-radius: 9px; overflow: hidden; background: var(--surface-high); flex: none; }
.dls-art .rimg { width: 100%; height: 100%; }
.dls-status { display: flex; flex-direction: column; gap: 10px; min-height: 44px; }
.dls-checking { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.dls-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 14px; border-radius: 12px; background: var(--surface-high); font: 400 14px/19px var(--font); }
.dls-kv-v { font-weight: 600; text-align: right; }
.dls-note { margin: 0; font: 400 12px/17px var(--font); color: var(--text-2); }
.dls-problem { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255,159,10,0.12); }
.dls-problem > .mi { color: var(--warning); flex: none; margin-top: 1px; }
.dls-problem.bad { background: rgba(255,69,58,0.12); }
.dls-problem.bad > .mi { color: var(--danger); }
.dls-btns { display: flex; justify-content: flex-end; gap: 10px; }
.dls-loading { display: flex; justify-content: center; padding: 40px 0; }

.dls-picker .sheet { max-height: 92%; }
.dls-seasons { display: flex; gap: 8px; padding: 2px 0 10px; }
.dls-tools { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 8px; }
.dls-eps { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; }
.dls-ep { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 8px 10px; border-radius: 12px; text-align: left; transition: background-color 120ms; }
.dls-ep .dls-tick { color: var(--text-3); flex: none; }
.dls-ep.sel .dls-tick { color: var(--accent); }
.dls-ep.got .dls-tick { color: var(--success); }
.dls-ep.bad .dls-tick { color: var(--danger); }
.dls-ep.got, .dls-ep.bad { opacity: 0.7; }
.dls-ep.hot { background: var(--surface-high); }
.dls-ep-title { font: 500 15px/20px var(--font); }
.dls-foot { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 12px calc(20px + var(--safe-right)) 4px calc(20px + var(--safe-left)); border-top: 0.6px solid var(--separator); }
.dls-sum { display: flex; align-items: center; gap: 14px; }
:root.lw-700:not(.lh-short) .dls-foot { padding-left: 20px; padding-right: 20px; }

/* ======================= buttons and marks elsewhere ======================= */
.dl-slot { display: inline-flex; }
.btn.dl-going { color: var(--accent); }
.dl-mark { display: inline-flex; align-items: center; margin-left: 6px; flex: none; }
.dl-pct { display: inline-flex; align-items: center; gap: 3px; font: 600 11px var(--font); color: var(--accent); }
.ibtn .dot.ok { background: var(--success); }
.dl-tip { padding: 0 6px; margin-top: -4px; }
/* Browse movies / Browse series under an empty list */
.dl-browse { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }