/* Round 21 · group buy. From design/round-21/return/r21.css, as drawn; board-only classes are harmless and kept. */
/* Next Kopi · round 21 · group buy (additions, after patterns.css's Round 17)
   Tokens first; aliases on :root and every [data-theme] so they re-resolve in dark. No new hex values, no new faces.
   The counter is words (owner's ask: "23 of 30 packs · 2 days left"), never a bar or a ring. Money is sentences. */
:root,[data-theme]{
--gb21-card:var(--paper-raised);--gb21-edge:var(--line);--gb21-private:var(--paper-sunk);--gb21-private-ink:var(--ink-2);
--gb21-on:var(--in);--gb21-on-soft:var(--in-soft);--gb21-short:var(--maybe);--gb21-short-soft:var(--maybe-soft);
--gb21-says:var(--st-says);--gb21-paid:var(--st-paid);--gb21-og:var(--paper-raised);--gb21-og-dom:var(--ink-3);
}
/* 1 · ✦'s draft */
.ln15 .dl21{border:1px solid var(--gb21-edge);border-radius:var(--r-card);background:var(--gb21-card);padding:12px;display:flex;flex-direction:column;gap:6px;margin-top:4px}
.it21{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center}
.it21 b{font:600 16px/1.3 var(--font-body);color:var(--ink)}.it21 span{font-size:15px;line-height:1.35;color:var(--ink)}
.ln15 .ad21{border-top:1px solid var(--gb21-edge);padding-top:4px}
.fx21{display:flex;flex-direction:column}.ln15 .fx21 p{display:block;padding:9px 0;border-bottom:1px solid var(--run15-rule)}.ln15 .fx21 p .pk15{margin-left:4px;white-space:nowrap}
.cs21{display:flex;flex-direction:column;gap:6px;padding:10px 12px 12px;border-radius:14px;background:var(--gb21-private)}
.cs21 .fld label{display:flex;align-items:center;gap:6px;color:var(--gb21-private-ink)}.cs21 .fld label .ic{width:14px;height:14px}
.ln15 .mg21{font:500 17px/1.35 var(--font-display);color:var(--ink)}
.ln15 .fd21 .pk15{color:var(--ink-2);text-decoration-color:var(--line-strong)}
.ln15 .bd>.btn{margin-top:4px}
/* 2 · the share sheet's line, and what the link does */
.sh21{font:500 22px/1.25 var(--font-display);color:var(--ink)}
.sl21{font-size:16px;line-height:1.45;color:var(--ink);background:var(--paper-sunk);border-radius:14px;padding:12px 14px;text-wrap:pretty}.sl21 a{color:var(--kopi);font-weight:600;white-space:nowrap}
.jn21{font-size:15px;line-height:1.45;color:var(--ink-2);text-wrap:pretty}
/* 2 · in WhatsApp: the link preview card on top of the message (WhatsApp's own layout, drawn as a schematic) */
.was9 .top.t21{flex-direction:row;justify-content:flex-start;align-items:center;text-align:left;gap:10px;padding:0 12px}.was9 .top.t21>span:last-child{display:flex;flex-direction:column;line-height:1.2;white-space:nowrap}
.was9 .in.w21{width:fit-content;min-width:52%;max-width:78%;text-wrap:wrap}
.s15>.pbw15,.s15>.ex15,.s15>.ck15{flex-shrink:0}
.was9 .wb21{max-width:86%;padding:4px 4px 6px;display:flex;flex-direction:column;gap:6px}
.was9 .in.wb21>b{padding:4px 8px 0}
.og21{display:flex;flex-direction:column;border-radius:10px;overflow:hidden;background:var(--gb21-og)}
.ogt21{display:flex;flex-direction:column;gap:2px;padding:8px 10px 10px}.ogt21 b{font:600 14px/1.3 var(--font-body);color:var(--ink)}.ogt21 span{font-size:13px;line-height:1.35;color:var(--ink-2)}.ogt21 i{font-style:normal;font-size:12px;color:var(--gb21-og-dom)}
.wt21{padding:0 8px;font-size:15px;line-height:1.4}.wt21 u{color:var(--kopi);text-decoration-color:var(--pick15-rule);word-break:break-all}
.tm21{align-self:flex-end;padding:0 8px;font-size:11px;color:var(--ink-3)}
/* 3 · the deal page */
.wr21{white-space:normal!important}
.pc21{font:600 17px var(--font-body);color:var(--ink)}
.ct21{font:500 21px/1.3 var(--font-display);color:var(--ink);padding:4px 0 2px;text-wrap:pretty}
.gd21 .pks15 .pk15{white-space:nowrap!important}
.hq21{font:600 15px var(--font-body);color:var(--ink)}
.tot21{font:500 20px/1.3 var(--font-display);color:var(--ink)}
.ok21{display:flex;gap:10px;align-items:flex-start;background:var(--gb21-on-soft);border-radius:14px;padding:12px 14px}.ok21 .ic{color:var(--gb21-on);flex:none;margin-top:3px}.ok21 p{font-size:16px;line-height:1.45;color:var(--ink);text-wrap:pretty}
/* host's head: the item, small */
.ht21{display:flex;gap:12px;align-items:center}.ht21 b{font:600 16px/1.3 var(--font-body)}.ht21 span{font-size:14px;line-height:1.35;color:var(--ink-2)}
/* 4 · orders from the list */
.od21{display:flex;flex-direction:column;padding-top:2px}
.or21{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start;padding:8px 0;border-top:1px solid var(--run15-rule)}
.or21 b{font:600 16px var(--font-body);color:var(--ink)}.or21 .col>span{display:flex;flex-wrap:wrap;gap:0 6px;align-items:center;font-size:14px;line-height:1.4;color:var(--ink-2)}.or21 .pk15{min-height:32px}
/* 5 · cut-off */
.st21{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:16px;background:var(--paper-sunk)}
.st21.on{background:var(--gb21-on-soft)}.st21.short{background:var(--gb21-short-soft)}
.st21 h2{font:500 26px/1.2 var(--font-display);color:var(--ink)}.st21 p{font-size:16px;line-height:1.45;color:var(--ink);text-wrap:pretty}
.rf21{display:flex;flex-direction:column}
.rr21{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:8px 0;border-top:1px solid var(--run15-rule)}
.rk21{display:flex;align-items:center;gap:8px}.rk21 em{font-style:normal;font-size:13px;color:var(--ink-2)}
.nm21{display:flex;align-items:center;gap:8px;min-width:0}.nm21 .av{margin:0;flex:none}.nm21 b{font:600 15px/1.3 var(--font-body);color:var(--ink);overflow-wrap:anywhere}
/* 6 · packing list: name · packs · paid · collected */
.pl21{display:grid;grid-template-columns:minmax(0,1fr) 44px 92px 26px;gap:8px;align-items:center;padding:7px 0;border-top:1px solid var(--run15-rule)}
.pl21.hd21{border-top:0;padding:10px 0 4px;font:600 12px/1.2 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--run15-head)}
.pl21.hd21 span:last-child{justify-self:end;white-space:nowrap}
.n21{font:500 16px var(--font-body);font-variant-numeric:tabular-nums;text-align:center}
.pd21{display:inline-flex;align-items:center;gap:3px;font-size:14px;color:var(--gb21-paid)}.pd21 .ic{width:14px;height:14px}.pd21.says{color:var(--gb21-says);font-weight:600}
.pl21.got .nm21 b{color:var(--ink-2)}
.lo21{border-top:1px solid var(--run15-rule);padding-top:10px;font:500 17px/1.4 var(--font-display);color:var(--ink)}
.nc21{margin:12px 20px 4px;padding:10px 14px 4px;border-radius:14px;background:var(--gb21-short-soft)}.nc21 p{font-size:16px;line-height:1.45;color:var(--ink)}
.s15 .now15{margin-bottom:10px}
/* 7 · the summary */
.sm21h{font:500 24px/1.25 var(--font-display);color:var(--ink);padding-bottom:6px}
.sm21{display:flex;flex-direction:column}.sm21>div{display:flex;flex-direction:column;gap:3px;padding:12px 0;border-top:1px solid var(--run15-rule)}
.sm21 dt{font:600 13px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--run15-head);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.sm21 dd{font:400 19px/1.4 var(--font-display);color:var(--ink);text-wrap:pretty}
.sm21>.mine{background:var(--gb21-private);border-radius:14px;padding:12px 14px;border-top:0;margin-top:4px}
.pv21{display:inline-flex;align-items:center;gap:4px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--gb21-private-ink)}.pv21 .ic{width:13px;height:13px}
/* 8 · the buyer's card on Home */
.ps21{font-size:14px;line-height:1.4;color:var(--gb21-says);font-weight:600;display:inline-flex;align-items:center;gap:4px}.ps21.ok{color:var(--gb21-paid)}.ps21 .ic{width:14px;height:14px}
.hc21 .rb15 .pk15{font-size:15px}
/* Burmese and Filipino: column words drop the caps; the packing list's paid column widens */
:lang(my) :is(.pl21.hd21,.sm21 dt){letter-spacing:0;text-transform:none;font-size:13px}
:lang(my) :is(.st21 p,.ok21 p,.jn21,.sl21,.or21 .col>span,.nc21 p){line-height:1.8}
:lang(my) :is(.ct21,.tot21,.sm21 dd,.mg21,.lo21){font-size:18px;line-height:1.6}
:lang(my) .pl21,:lang(fil) .pl21,:lang(vi) .pl21{grid-template-columns:minmax(0,1fr) 40px 104px 26px}
:lang(zh) :is(.pl21.hd21,.sm21 dt){letter-spacing:.02em}