/* "download all meme templates in HD" dialog (hdpack.js). Builds on style.css: .dlg, .btn (+ colours), .icon-btn, the theme variables. */
dialog.dlg.hd-dlg { width: min(600px, calc(100vw - 20px)); }
.hd-dlg [hidden] { display: none !important; }
.hd-run p, .hd-every p { margin: 0; }
.hd-meta { font-weight: 700; font-size: 17px; margin: 0; }
.hd-cute { font-family: var(--hand); font-size: 25px; line-height: 1.1; margin: 2px 0 14px; color: var(--ink-soft); }
.hd-note { margin: 0 0 12px; font-size: 16px; line-height: 1.35; }

.hd-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
@media (min-width: 540px) { .hd-parts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 330px) { .hd-parts { grid-template-columns: minmax(0, 1fr); } }
.hd-dlg .hd-part { display: grid; justify-items: center; align-content: center; gap: 1px; min-width: 0; padding: 9px 6px 10px; text-align: center; line-height: 1.15; font-size: 16px; }
.hd-part-n { font-family: var(--display); font-weight: 400; font-size: 17px; letter-spacing: .01em; }
.hd-range { font-family: var(--hand); font-size: 27px; font-weight: 700; line-height: 1; overflow-wrap: anywhere; }
.hd-part small { font-size: 13px; font-weight: 700; opacity: .8; }
.hd-part[data-done] { box-shadow: 4px 4px 0 var(--hot); }
.hd-tick { font-family: var(--body); }

.hd-every { display: grid; gap: 8px; justify-items: stretch; padding: 12px; border: 2.5px dashed var(--line); border-radius: 14px; margin: 0 0 14px; }
.hd-dlg .hd-all-btn { width: 100%; flex-wrap: wrap; text-align: center; }
.hd-warn { font-size: 14.5px; line-height: 1.35; color: var(--ink-soft); }

.hd-run { display: grid; gap: 10px; margin: 6px 0 14px; text-align: center; }
.hd-run-title { font-family: var(--hand); font-size: 30px; font-weight: 700; line-height: 1.05; overflow-wrap: anywhere; }
.hd-bar { height: 28px; border: 3px solid var(--line); border-radius: 999px; background: var(--card); overflow: hidden; }
.hd-bar i {
  display: block; height: 100%; width: 0; transition: width .2s;
  background: repeating-linear-gradient(-45deg, var(--hot) 0 14px, var(--pink) 14px 28px); background-size: 40px 40px;
}
@media (prefers-reduced-motion: no-preference) { .hd-bar i { animation: hd-stripes 1s linear infinite; } }
@keyframes hd-stripes { to { background-position: 40px 0; } }
@media (prefers-reduced-motion: reduce) { .hd-bar i { transition: none; animation: none; } }
:root[data-calm] .hd-bar i { transition: none; animation: none; }
.hd-run-count { font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.hd-run-now { font-size: 14px; color: var(--ink-soft); min-height: 1.3em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-dlg .hd-run .btn { justify-self: center; }

.hd-status { min-height: 1.4em; font-weight: 700; font-size: 16px; line-height: 1.35; margin: 0 0 10px; overflow-wrap: anywhere; }
.hd-status.ok { color: var(--ink); }
.hd-status.bad { color: var(--hot); }
.hd-status:empty { min-height: 0; margin: 0; }
.hd-save { margin: 0 0 12px; }
.hd-fine { font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); border-top: 2px dashed var(--line); padding-top: 10px; margin: 4px 0 0; }