/* A download says what it is doing (store.js, downloadSheet; 16 October 2026). The notice is With the cover, picked on the
   Downloads comparison the same day: a white card under the header (at the right on a laptop) with the sheet's small cover,
   two lines and a bar while the file comes. It keeps the shop's notice classes (.ts-host, .ts-toast) and its own place
   (#dlHost). The pressed button turns into a spinning ring. Only the shop's colours. */
.dl-host{pointer-events:none}
.dl-toast{align-items:center}
.dl-copy{display:grid;gap:1px;flex:1;min-width:0}
.dl-copy b{font-weight:600;overflow-wrap:anywhere}
.dl-copy small{font-size:14px;font-weight:400;line-height:1.35;color:var(--muted);font-variant-numeric:tabular-nums}
.dl-toast[data-tone="failed"] .ts-icon{color:var(--forest)}
.dl-bar{position:relative;display:block;height:4px;margin-top:6px;border-radius:2px;background:var(--mint-deep);overflow:hidden}
.dl-bar>i{position:absolute;inset:0 auto 0 0;width:0;border-radius:2px;background:var(--green);transition:width .15s linear}
.dl-bar.is-waiting>i{width:35%;animation:dl-slide 1.1s ease-in-out infinite}
@keyframes dl-slide{from{transform:translateX(-100%)}to{transform:translateX(290%)}}
.dl-toast .ts-icon .icon{width:20px;height:20px}
.dl-close{flex:none;display:grid;place-items:center;width:44px;height:44px;margin-right:-8px;border:0;border-radius:50%;color:var(--forest);background:none;cursor:pointer}
.dl-close .icon{width:18px;height:18px}
.dl-close:focus-visible,.dl-toast .ts-act:focus-visible{outline:2px solid var(--green);outline-offset:2px}
/* The pressed button: its arrow becomes a ring that turns, and it cannot be pressed twice. */
.is-downloading{pointer-events:none}
.dl-spin{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:34 60;animation:dl-turn .8s linear infinite;transform-origin:center}
@keyframes dl-turn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.dl-spin{animation-duration:2.4s}.dl-bar.is-waiting>i{animation:none;width:100%;opacity:.45}}
/* Over the sheet reader, under its bar, when a download starts from it. */
html.sv-open #dlHost{top:70px!important;z-index:2100!important}
/* With the cover: a white card under the header, the sheet's small cover on the left; at the right on a laptop. */
#dlHost{top:calc(var(--ts-top,0px) + 10px)!important;bottom:auto!important;left:12px;right:12px;display:flex;justify-content:center;overflow:visible}
#dlHost .dl-toast{width:100%;max-width:440px;min-height:0;padding:10px 6px 10px 10px;gap:12px;border:1px solid var(--line-strong);border-radius:14px;background:#fff;color:var(--ink);font-weight:400;box-shadow:0 8px 24px #003a1c24;animation-name:ts-up}
#dlHost .dl-cover{display:block;flex:none;width:40px;overflow:hidden;border:1px solid var(--line-strong);border-radius:3px;background:#fff}
#dlHost .dl-cover .pg-cover{font-size:4px}
#dlHost .dl-cover .pg-foot span{visibility:hidden}
#dlHost .ts-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--mint);color:var(--green-hover)}
#dlHost .dl-bar{background:var(--line)}
#dlHost .dl-copy{flex:1;min-width:0;padding:0}
#dlHost .ts-act{padding:0 10px;color:var(--green-hover);text-decoration:underline;text-decoration-color:#8cba9f;text-underline-offset:4px}
@media(min-width:601px){#dlHost{left:auto;right:24px;width:400px}}
