/* The shared bulk dialog (SPEC S1-S11). Three shapes: confirm 480, words plus spend 816, the result state in the same dialog at 480.
   Frames f0-parts, f2-3, f2-5, f2-6, f2-8, f3-3, f3-6, f3-7, f3-8; ported from frames/kit/feat.css, existing tokens only. */
dialog.bk{max-height:calc(100dvh - 48px)}
dialog.bk-cf{width:min(480px,calc(100vw - 32px))}
dialog.bk-cf[open]{display:flex;flex-direction:column}
dialog.bk-fx2{width:min(816px,calc(100vw - 32px));grid-template-rows:auto minmax(0,1fr) auto}
.bk .bk-slot{display:contents}
.bk .btn[aria-busy=true]{cursor:progress}
.bk .btn.primary .spin{border-color:rgb(var(--p-ink-rgb) / .25);border-top-color:var(--ink)}
.bk .icon-btn[aria-disabled=true]{color:var(--text-3);cursor:default}

/* the fan of real covers (S3) */
.bk .cf-art{position:relative;flex:none;height:184px;overflow:hidden;border-bottom:1px solid var(--line)}
.bk .cf-art img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bk .c01{position:absolute;inset:0}
.bk .c01 .glow{position:absolute;left:50%;bottom:-70px;width:340px;height:160px;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,color-mix(in oklab,var(--b,var(--amber)) 75%,transparent),transparent);filter:blur(10px);opacity:.75}
.bk .c01 .fan{position:absolute;left:50%;top:0;width:0;height:0}
.bk .c01 .fc{position:absolute;width:84px;height:112px;margin:-56px 0 0 -42px;border-radius:var(--r-2);overflow:hidden;background:#11142a;box-shadow:0 0 0 1px rgb(var(--p-white-rgb) / .16),var(--shadow-2)}
.bk .c01 .fc img{display:block;width:100%;height:100%;object-fit:cover}
.bk .c01 .fc.plusn::after{content:attr(data-more);position:absolute;inset:0;display:grid;place-items:center;background:rgb(var(--p-navy-rgb) / .64);color:var(--text);font:500 var(--fs-4b)/1 var(--mono);letter-spacing:-.02em}
.bk .cf-close{position:absolute;right:16px;top:16px;z-index:2;background:rgb(var(--p-navy-rgb) / .64)}

/* the confirm shape */
.bk .cf-body{padding:var(--s-5) var(--s-6) var(--s-1)}
.bk-cf > .cf-body{flex:0 1 auto;min-height:0;overflow-y:auto}
.bk .cf-body h2{margin:0;font-size:var(--fs-4);line-height:22px;font-weight:600}
.bk .cf-hero{display:flex;flex-wrap:nowrap;align-items:baseline;gap:var(--s-2);margin:var(--s-3) 0;white-space:nowrap}
.bk .cf-hero b{font:400 var(--fs-8)/40px var(--mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.bk .cf-hero b.bk-free{font-size:var(--fs-7)}
.bk .cf-hero b .ap{margin-right:2px;color:var(--text-2);font-size:var(--fs-6)}
.bk .cf-hero > span{color:var(--text-2);font-size:var(--fs-3)}
.bk .cf-hero.fx-two b{font-size:var(--fs-7);line-height:40px}
.bk .cf-hero .fx-plus{color:var(--text-3);font:400 var(--fs-6)/40px var(--mono)}
.bk .cf-note{margin:var(--s-3) 0 0;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.bk .cf-foot{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:var(--s-2);height:72px;box-sizing:border-box;padding:0 var(--s-6)}
.bk .cf-foot .btn,.bk .fx2-foot .btn{height:var(--ctl-m);padding:0 var(--s-5);font-size:var(--fs-3)}   /* DS-1: M 44 in a 72 footer (C2 need) */
.bk .cf-foot.bk-center{justify-content:center}
.bk .fx-sub{margin:var(--s-1) 0 0;color:var(--text-2);font-size:var(--fs-2);line-height:18px}

/* the tables and their reasons (S7) */
.bk .fx-k{margin:var(--s-4) 0 0;padding:0 0 var(--s-2);color:var(--text);font-size:var(--fs-2);line-height:18px;font-weight:600}
.bk .fx-k:first-child{margin-top:0}
.bk .cf-hero + .fx-k,.bk .fx-sub + .fx-k{margin-top:var(--s-3)}
.bk .fx-t{display:grid;margin:0;border-top:1px solid var(--line)}
.bk .cf-hero + .fx-t,.bk .fx-sub + .fx-t{margin-top:var(--s-3)}
.bk .fx2-rb .fx-t + .fx-t{margin-top:var(--s-3);border-top:0}
.bk .fx-r,.bk .fx-r3{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s-2);height:28px;border-bottom:1px solid var(--line);font-size:var(--fs-2);line-height:18px}
.bk .fx-r3{grid-template-columns:minmax(0,1fr) 32px 104px}
.bk .fx-r > :first-child,.bk .fx-r3 > :first-child{overflow:hidden;min-width:0;color:var(--text-2);white-space:nowrap;text-overflow:ellipsis}
.bk .fx-t .c{color:var(--text);font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
.bk .fx-r3 .p{text-align:right;white-space:nowrap}
.bk .fx-r3 .p.q{color:var(--text-2)}
.bk .fx-more{display:flex;align-items:center;justify-content:space-between;width:100%;height:28px;padding:0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--text-2);font:500 var(--fs-2)/18px var(--font);cursor:pointer;transition:color var(--dur-1) var(--ease)}
.bk .fx-more:hover{color:var(--text)}
.bk .fx-more.ind{padding-left:var(--s-3)}
.bk .fx-more .i{width:var(--icon-md);height:var(--icon-md)}

/* the states: nothing left, part went, nothing went */
.bk .fx-art-s{flex:none;display:grid;justify-items:center;padding:var(--s-6) var(--s-6) 0}
.bk .fx-art-s .art,.bk .fx-art-s svg{display:block;width:160px;height:auto}
.bk .fx-cen{padding-top:var(--s-3);text-align:center}
.bk .fx-cen h2{font-size:var(--fs-4);line-height:22px}
.bk .fx-cen .cf-note{margin-top:var(--s-1);font-size:var(--fs-3);line-height:20px}
.bk .bk-tb{padding-top:var(--s-3)}

/* words plus spend */
.bk .rt-head{display:flex;align-items:center;height:56px;padding:0 var(--s-3) 0 var(--s-6);border-bottom:1px solid var(--line)}
.bk .rt-head h2{flex:1;min-width:0;margin:0;font-size:var(--fs-4);line-height:22px;font-weight:600}
.bk .fx2-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;min-height:0}
.bk .fx2-l{min-width:0;min-height:0;padding:var(--s-5) var(--s-6) var(--s-6);overflow-y:auto}
.bk .fx2-r{display:flex;flex-direction:column;min-height:0;overflow:hidden;border-left:1px solid var(--line)}
.bk .fx2-r .cf-art{height:136px}
.bk .fx2-r .c01 .fan{top:-8px;scale:.84}
.bk .fx2-rb{min-height:0;padding:var(--s-3) var(--s-6) var(--s-6);overflow-y:auto}
.bk .fx2-rb .cf-hero{margin:0 0 var(--s-3)}
.bk .fx2-rb .cf-hero b{font-size:var(--fs-7);line-height:40px}
.bk .fx2-rb .fx-r.ind > :first-child{padding-left:var(--s-3)}
.bk .fx2-rb .fx-r.ind .c{color:var(--text-2);font-weight:400}
.bk .fx2-foot{display:flex;align-items:center;gap:var(--s-2);height:72px;box-sizing:border-box;padding:0 var(--s-6);border-top:1px solid var(--line)}
.bk .fx2-foot p{flex:1;display:flex;gap:var(--s-2);min-width:0;margin:0 var(--s-3) 0 0;color:var(--text);font-size:var(--fs-2);line-height:18px}
.bk .fx2-foot p .i{flex:none;width:var(--icon-md);height:var(--icon-md);margin-top:1px;color:var(--amber)}
.bk .fx2-foot p.q{color:var(--text-2)}
.bk .fx2-foot p.fx-err .i{color:var(--red)}
.bk .fx2-foot .btn{flex:none}

/* the line above the buttons (S1, S10) */
.bk .cf-line{flex:none;display:flex;gap:var(--s-2);margin:var(--s-3) var(--s-6) 0;color:var(--text);font-size:var(--fs-2);line-height:18px}
.bk .cf-line .i{flex:none;width:var(--icon-md);height:var(--icon-md);margin-top:1px;color:var(--amber)}
.bk .cf-line.fx-err .i{color:var(--red)}

/* the inline confirm of a queue row (f3-7): no plate of its own and buttons from the left, whatever row it is mounted in. The caller puts .fx-cfm on the row */
.qconfirm.bk-cfm{gap:10px;margin:0;box-shadow:none}
.qconfirm.bk-cfm .row{justify-content:flex-start}
.qconfirm.bk-cfm .btn{font-size:var(--fs-1)}
.qconfirm .bk-all .spin{flex:none;border-color:color-mix(in oklab,var(--destr-fg) 30%,transparent);border-top-color:var(--destr-fg)}
.qconfirm .bk-all[aria-busy=true]{cursor:progress}
.fx-cfm{height:auto;min-height:44px;padding-top:var(--s-1);padding-bottom:var(--s-2);row-gap:var(--s-1);border-radius:var(--r-3);background:var(--raised)}
.fx-cfm > *:not(.qconfirm){align-self:center;height:auto}
.fx-cfm .qconfirm{grid-column:1 / -1}
.fx-cfm .qconfirm .sub{color:var(--text-2)}
.qrow[aria-busy=true],.qrow[aria-busy=true] *{cursor:progress}