/* dl.css: owner lane NAV. The Download dialog #dl-dlg (NAV-B4, DR-71). Ported from nav/frames/nav.css sections 8 and 9; .alert is alert.css's, .us-date usage.css's.
   Fallbacks inside :where() (zero specificity) for DS-1 parts A-core has not landed (.x-btn, .pbar, .badge): A-core's rules override them. */
#dl-dlg{width:min(var(--dlg-w-lg,720px),calc(100vw - 32px))}
#dl-dlg .m-head{display:flex}
#dl-dlg .m-titles{flex:1;min-width:0}#dl-dlg .m-titles p{margin:2px 0 0;color:var(--text-2);font:400 var(--fs-2)/18px var(--font)}
#dl-dlg .dlg-foot{align-items:center;flex-wrap:nowrap}
#dl-dlg .dl-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-6);align-items:start}
#dl-dlg .dlg-sec{display:grid;gap:var(--s-2)}
#dl-dlg .dlg-sec + .dlg-sec{margin-top:var(--s-5)}
#dl-dlg .dlg-sec > header{display:flex;align-items:center;gap:var(--s-2);min-height:24px}
#dl-dlg .dlg-sec > header h3{margin:0;font:600 var(--fs-2)/18px var(--font);color:var(--text)}
#dl-dlg .dlg-sec > header .r{margin-left:auto;color:var(--text-3);font:500 var(--fs-1)/16px var(--mono)}
#dl-dlg .dlg-sec > header .icon-btn.xs{width:24px;height:var(--ctl-xs);color:var(--text-3)}
#dl-dlg .dlg-sec > header .icon-btn.xs .i{width:14px;height:14px}
#dl-dlg .dlg-sec .hint{margin:0;color:var(--text-3);font:400 var(--fs-1)/16px var(--font)}
#dl-dlg .opt-list{display:grid;gap:6px}
#dl-dlg .opt-list.cue{max-height:308px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line-hover) transparent;padding-right:2px}
/* option row (CF-DS 3.12 .opt-row): rest inset 1 --line; hover wash; checked wash + ring --line-strong; disabled --text-3 */
#dl-dlg .opt-row{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;column-gap:var(--s-3);min-height:44px;padding:0 var(--s-3);border-radius:var(--r-2);box-shadow:var(--edge);cursor:pointer;transition:background-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),scale var(--dur-1) var(--ease)}
#dl-dlg .opt-row:not(.off):active,#dl-dlg .opt-row.prs{scale:var(--m-press)}   /* FIX-R1 minor 4: the row answers the press like .ah-row (atomhist.css:14) */
#dl-dlg .opt-row.two{min-height:56px}
#dl-dlg .opt-row.tile{grid-template-columns:18px 24px minmax(0,1fr) auto}
#dl-dlg .opt-row:hover,#dl-dlg .opt-row.hov{background:var(--hover-wash)}
#dl-dlg .opt-row:has(input:checked){background:var(--hover-wash);box-shadow:var(--edge-strong)}
#dl-dlg .opt-row input{margin:0;justify-self:center}
#dl-dlg .opt-row .bt{--s:24px}
#dl-dlg .opt-row .t{display:grid;min-width:0}
#dl-dlg .opt-row .t b{font:500 var(--fs-3)/20px var(--font);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dl-dlg .opt-row .t small{display:flex;align-items:center;gap:var(--s-1);color:var(--text-3);font:400 var(--fs-1)/16px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dl-dlg .opt-row .t small .i{width:12px;height:12px;flex:none}
#dl-dlg .opt-row .t small.warn{color:var(--amber)}
#dl-dlg .opt-row .m{justify-self:end;text-align:right;color:var(--text-3);font:500 var(--fs-1)/16px var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
#dl-dlg .opt-row .m b{display:block;color:var(--text);font:500 var(--fs-2)/18px var(--mono)}
#dl-dlg .opt-row .m.zero b{color:var(--text-3)}
#dl-dlg .opt-row.off{cursor:not-allowed;box-shadow:var(--edge)}
#dl-dlg .opt-row.off:hover{background:none}
#dl-dlg .opt-row.off .bt{filter:saturate(.3);opacity:.65}
#dl-dlg .opt-row.off .t b{color:var(--text-3)}
#dl-dlg .opt-row.all{box-shadow:none;min-height:36px;padding:0 var(--s-3)}
#dl-dlg .opt-row.all:has(input:checked),#dl-dlg .opt-row.all:hover{background:none;box-shadow:none}
#dl-dlg .opt-row.all .t b{font:500 var(--fs-2)/18px var(--font);color:var(--text-2)}
#dl-dlg .date-in{display:flex;align-items:center;gap:var(--s-2);height:32px;margin-top:var(--s-2);padding:0 var(--s-3);border-radius:var(--r-2);background:var(--bg);box-shadow:var(--edge-strong);color:var(--text);font:500 var(--fs-2)/18px var(--mono);width:max-content}
#dl-dlg .date-in .i{width:16px;height:16px;color:var(--text-3)}
/* inline progress inside a format row (today's .p2-dmbar, CF-DS 3.15 #dl-dlg .pbar sm) */
#dl-dlg .opt-row #dl-dlg .pbar{grid-column:2 / -1;margin:2px 0 10px}
/* footer summary (CF-DS 3.12 .dlg-foot .grow) */
#dl-dlg .dl-sum{display:grid;gap:2px;min-width:0}
#dl-dlg .dl-sum b{font:500 var(--fs-2)/18px var(--mono);color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
#dl-dlg .dl-sum b span{color:var(--text-2);font-family:var(--font);font-weight:400}
#dl-dlg .dl-sum small{display:flex;align-items:center;gap:6px;min-width:0;color:var(--text-3);font:400 var(--fs-1)/16px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dl-dlg .dl-sum small .i{width:14px;height:14px;flex:none}
#dl-dlg .dl-sum small .zn{display:inline-flex;min-width:0;overflow:hidden;white-space:nowrap}#dl-dlg .dl-sum small .zh{min-width:0;overflow:hidden;text-overflow:ellipsis}#dl-dlg .dl-sum small .zt{flex:none}   /* FIX-R1: cut in the middle, «_2026-11-06.zip» always shows */
#dl-dlg .dl-sum.muted b{color:var(--text-3)}
#dl-dlg .btn.primary[aria-disabled=true]{opacity:.4;box-shadow:none;cursor:not-allowed}
/* progress (CF-DS 3.15 #dl-dlg .pbar: hatched remainder, accent fill; md 10, sm 6) */
#dl-dlg .pbar{position:relative;height:10px;border-radius:var(--r-xs);background:var(--hatch),rgb(var(--p-mist) / .05);box-shadow:var(--edge);overflow:hidden}
#dl-dlg .pbar > i{position:absolute;left:0;top:0;bottom:0;width:var(--p);min-width:4px;border-radius:inherit;background:linear-gradient(90deg,#8f9fff,var(--accent))}
#dl-dlg .pbar.sm{height:6px;border-radius:var(--r-xs)}
#dl-dlg .pbar.red > i{background:var(--red)}
#dl-dlg .dl-prog{display:grid;gap:var(--s-2)}
#dl-dlg .dl-prog .top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3)}
#dl-dlg .dl-prog .top b{font:600 var(--fs-3)/20px var(--font)}
#dl-dlg .dl-prog .top span{font:500 var(--fs-2)/18px var(--mono);color:var(--text-2);font-variant-numeric:tabular-nums}
#dl-dlg .dl-steps{display:grid;gap:6px;margin-top:var(--s-5)}
#dl-dlg .dl-step{display:grid;grid-template-columns:24px minmax(0,1fr) 140px max-content;align-items:center;column-gap:var(--s-3);min-height:44px;padding:0 var(--s-3);border-radius:var(--r-2);box-shadow:var(--edge)}
#dl-dlg .dl-step .bt{--s:24px}
#dl-dlg .dl-step .nm{font:500 var(--fs-3)/20px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dl-dlg .dl-step .st{justify-self:end;white-space:nowrap;display:flex;align-items:center;gap:var(--s-1);font:500 var(--fs-1)/16px var(--mono);color:var(--text-3)}
#dl-dlg .dl-step .st .i{width:14px;height:14px}
#dl-dlg .dl-step .st.ok{color:var(--green)}
#dl-dlg .dl-step .st.warn{color:var(--amber)}
#dl-dlg .dl-step .st.err{color:var(--red)}
#dl-dlg .dl-done{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:center;margin-bottom:var(--s-5)}
#dl-dlg .dl-done .ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--green-soft);color:var(--green)}
#dl-dlg .dl-done .ic.amber{background:var(--amber-soft);color:var(--amber)}
#dl-dlg .dl-done .ic.red{background:var(--red-soft);color:var(--red)}
#dl-dlg .dl-done .ic .i{width:20px;height:20px}
#dl-dlg .dl-done b{display:block;font:600 var(--fs-3)/20px var(--font)}
#dl-dlg .dl-done small{display:block;margin-top:2px;color:var(--text-2);font:400 var(--fs-2)/18px var(--font);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* NF-A1 (Continue your download, Downloading in another tab): the alert 16 below the steps; the step list capped at 5 rows with the .opt-list.cue scroll look; the info tone circle */
#dl-dlg .dl-steps + .alert{margin-top:var(--s-4)}
#dl-dlg .dl-cols + .alert{margin-top:var(--s-5)}   /* DR1-6: the info alert under the option columns keeps the dialog's 20 between sections */
#dl-dlg .dl-steps.cap{max-height:244px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-hover) transparent;padding-right:2px}
#dl-dlg .dl-done .ic.info{background:var(--accent-soft);color:var(--accent)}
#dl-dlg .dl-done.res small{white-space:normal}   /* the cause line (why · part · files · size · choices kept) wraps to a second line instead of cutting the last words */
#dl-dlg .dl-sum.away small,#dl-dlg .dl-sum small .zm{font-family:var(--font)}


/* M3 (DR-60): the DS-1 close .x-btn (ds/page), one component for every dialog, drawer, panel and toast. sm 28 in window headers (DS-1 usage), hit area 32 via ::after,
   raised fill + --line-strong ring; centred on the header line by .m-head's align-items:center, right inset 16 (.dlg .m-head padding, app.css:1140) */
#dl-dlg .x-btn{--x:var(--x-sm);position:relative;display:inline-grid;place-items:center;flex:none;width:var(--x);height:var(--x);padding:0;border-radius:50%;border:1px solid var(--line-strong);background:var(--raised);color:var(--text-2);cursor:pointer;
  transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),transform var(--dur-1) var(--ease)}
#dl-dlg .x-btn::after{content:"";position:absolute;inset:min(0px,calc((var(--x) - var(--hit-min)) / 2))}
#dl-dlg .x-btn .i{width:16px;height:16px}
#dl-dlg .x-btn.md{--x:var(--ctl-m)}.x-btn.md .i{width:18px;height:18px}
#dl-dlg .x-btn.xs{--x:var(--ctl-xs)}.x-btn.xs .i{width:14px;height:14px}
#dl-dlg .x-btn:hover,.x-btn.is-h{background:var(--hover);border-color:var(--line-hover);color:var(--text)}
#dl-dlg .x-btn:active,.x-btn.is-a{background:var(--active);transform:scale(.94)}
#dl-dlg .x-btn:focus-visible,.x-btn.is-f{outline:2px solid var(--accent);outline-offset:2px}
/* M7 (a): archived brands stay downloadable, as today (brand.js:33 GATED_LOCK locks setup and approve only): a closed fold under the list */
#dl-dlg .opt-fold{display:flex;align-items:center;gap:10px;width:100%;height:36px;margin-top:6px;padding:0 var(--s-3);border-radius:var(--r-2);color:var(--text-2);font:500 var(--fs-2)/18px var(--font);cursor:pointer;transition:background-color var(--dur-2) var(--ease)}
#dl-dlg .opt-fold:hover,#dl-dlg .opt-fold.hov{background:var(--hover-wash);color:var(--text)}
#dl-dlg .opt-fold .i{width:16px;height:16px;flex:none}
#dl-dlg .opt-fold .badge{margin-left:auto}
#dl-dlg .opt-fold .chev{width:14px;height:14px;color:var(--text-3);transition:rotate var(--dur-2) var(--ease)}
#dl-dlg .opt-fold[aria-expanded=true] .chev{rotate:180deg}
#dl-dlg .opt-row.arch .t b{color:var(--text-2)}
/* MINOR 1: a cut brand name shows the full name in the tooltip */
#dl-dlg .opt-row .t b[data-tip]{cursor:inherit}
/* count loading: the app skeleton (app.css:334 .sk) in the meta column, 32 x 16; nothing jumps when the numbers land */
#dl-dlg .opt-row .m .sk{display:block;width:32px;height:16px;margin-left:auto}
#dl-dlg .opt-row .m .sk + .sk{width:40px;height:12px;margin-top:var(--s-1)}
#dl-dlg .dl-sum .sk{display:inline-block;width:220px;height:14px;vertical-align:middle}
/* M5: the date field is the app's one date control (usage.css:367 .us-date, native type=date; DR-51), placed under the row title */
#dl-dlg .opt-row .us-date{justify-self:start;width:148px;margin:6px 0 var(--s-1)}
#dl-dlg .opt-row.date{min-height:auto;padding-top:10px;padding-bottom:10px;align-items:start}
#dl-dlg .opt-row.date > input[type=radio]{margin-top:2px}
#dl-dlg .opt-row.date .m{padding-top:1px}
#dl-dlg .us-date.kf{border-color:var(--accent);box-shadow:var(--ring-field)}
#dl-dlg .badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-sm);background:var(--count-bg,rgb(var(--p-mist) / .12));box-shadow:inset 0 0 0 1px var(--count-line,rgb(var(--p-mist) / .22));color:var(--text);font:600 var(--fs-0)/20px var(--font)}
#dl-dlg .opt-row.date .t{min-width:0}
#dl-dlg .dl-hint{margin:var(--s-3) 0 0}
@media (max-width:760px){#dl-dlg .dl-cols{grid-template-columns:minmax(0,1fr)}}