/* Round 16 · the helper on our account, the planner's answers, a circle grows, private/public, a priced seat, the focus group.
   From design/round-16/return/patterns.css (the Round 16 block), as drawn; board-only classes are harmless and kept
   so a later phase need not re-copy. */
/* ==== Round 16 · the helper on our account; the planner's answers; covers from the pouch; calendars; confirmed; a circle grows; private/public; a priced seat; the focus group (additions) ====
   Tokens first; aliases on :root and every [data-theme] so they re-resolve in dark. No new hex values.
   Base: round 15's Home (C2). Hard rule: no dashboards. Sentences and faces, one subject a screen. Taps only (a PWA). */
:root,[data-theme]{
--draft16-ink:var(--ink);--asm16-rule:var(--guess15);--dot16:var(--kopi);
--cost16-ink:var(--ink);--cost16-fill:var(--paper-sunk);
--pouch16-tile:var(--paper-sunk);--pouch16-on:var(--kopi);
--cal16-wait:var(--ink-3);--cal16-on:var(--in);
--vis16-on:var(--kopi-soft);--vis16-edge:var(--line);--vis16-off:var(--ink-3);
--mark16-a:var(--kopi);--mark16-b:var(--av-3);--mark16-c:var(--av-5);--mark16-ink:var(--on-kopi);
--file16-fill:var(--paper-raised);--file16-wait:var(--maybe-soft);
--page16-num:var(--ink-3);--page16-edge:var(--line);
--first16-fill:var(--paper-sunk);
}
:root{--cover16-lead:88px;--r-mark16:22%;--pt16:minmax(0,1fr)}
/* FG1 · the one line under Yours that reaches the rest; it sits on the first screen */
.ft16{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;padding-top:6px;border-top:1px solid var(--run15-rule)}
.ft16 i{font-style:normal;color:var(--pick15-sep)}.ft16 .pk15{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:0;white-space:nowrap}
.sd15{position:relative}.dt16{position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:5px;background:var(--dot16);box-shadow:0 0 0 2px var(--paper)}
/* P1 · the draft in one line (serif), then each default with the guess rule and change; change opens its question in place */
.dl16{font:500 19px/1.35 var(--font-display);color:var(--draft16-ink)}
.opn16{padding:2px 0 0 0}
.ln15 .ok16{display:inline-block;width:16px;height:16px;color:var(--in);vertical-align:-2px;margin-right:6px}
/* H · the helper page and the admin's cost sentence */
.li16{width:40px;height:40px;display:grid;place-items:center;color:var(--ink)}
.hp16{padding-top:4px}.hl16{font:400 19px/1.45 var(--font-display);color:var(--ink);text-wrap:pretty}
.hs16{font:600 17px/1.4 var(--font-body);color:var(--ink);padding:12px 14px;border-radius:14px;background:var(--sp12-fill)}
.hs16.none{background:var(--paper-sunk)}
.adm16{padding:16px;display:flex;flex-direction:column;gap:14px}
.cost16{font:400 18px/1.5 var(--font-display);color:var(--cost16-ink);text-wrap:pretty;padding-top:14px;border-top:1px solid var(--line)}
.dsk16{width:880px;margin:0 auto;padding:24px 0;display:flex;flex-direction:column;gap:18px}
/* a sitting's page: the eyebrow carries Drafted by ✦ and the circle as a link */
.sit16{overflow:hidden}
.eb16{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font:600 13px var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--kopi)}
.eb16 .pk15{font-size:13px;letter-spacing:.06em;padding:12px 0;margin:-12px 0}
.dr16{display:inline-flex;align-items:center;gap:4px;padding:3px 8px 2px;border-radius:8px;border:1px solid var(--line-strong);color:var(--ink-2)}
.ib16{width:44px;height:44px;border-radius:22px;display:grid;place-items:center;background:var(--paper-raised);border:1px solid var(--line);color:var(--ink)}
.top16{padding:0 20px 14px}
.s16{color:var(--ink-2)}
.prc16{font:600 16px/1.4 var(--font-body);color:var(--ink)}.prc16.big{font:500 22px/1.3 var(--font-display)}
.kg16{padding-top:14px}.kgb16{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:22px;border:1.5px solid var(--line-strong);font:600 16px var(--font-body);color:var(--ink)}
.kgb16 .ic{color:var(--kopi)}
/* blocks on a step or settings page */
.fb16{display:flex;flex-direction:column;gap:10px}
.fb16 h3,.fl16 h3{font:600 13px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--run15-head)}
.aw16{height:150px;border-radius:var(--r-cover);border:1.5px dashed var(--line-strong);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center;font-size:15px;line-height:1.45;color:var(--ink-2);text-wrap:pretty}
/* C · the pouch inside ✦'s line: pictures only, three across */
.pg16{display:grid;grid-template-columns:repeat(3,var(--pt16));gap:6px;padding-top:4px}
.pt16{aspect-ratio:1;border-radius:10px;background:repeating-linear-gradient(135deg,var(--pouch16-tile) 0 9px,var(--paper) 9px 18px);position:relative;min-height:44px}
.pt16.on{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--pouch16-on)}
.pt16 i{position:absolute;right:6px;bottom:6px;width:24px;height:24px;border-radius:12px;background:var(--pouch16-on);color:var(--on-kopi);display:grid;place-items:center}
.pt16 i .ic{width:14px;height:14px}
.ptm16{display:inline-block;width:36px;height:36px;border-radius:8px;vertical-align:middle;margin-right:8px;background:repeating-linear-gradient(135deg,var(--pouch16-tile) 0 6px,var(--paper) 6px 12px);box-shadow:0 0 0 1px var(--line)}
.mde16{padding:4px 0}
/* T · the two calendars and their states */
.mt15>p.rd16{font:500 17px/1.45 var(--font-body);color:var(--ink)}
.crs16{display:flex;flex-direction:column}
.cr16{display:flex;align-items:center;gap:10px;min-height:56px;border-top:1px solid var(--run15-rule)}.cr16:last-child{border-bottom:1px solid var(--run15-rule)}
.cr16>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.cr16 b{font:600 16px var(--font-body)}.cr16 span{font-size:14px;line-height:1.4;color:var(--ink-2)}
.cr16.on>.ic{color:var(--cal16-on)}.cr16.wait b,.cr16.wait>.ic{color:var(--cal16-wait)}
/* T2 · /privacy and /terms in the landing's type */
.lg16{max-width:640px;margin:0 auto;padding:28px 0 40px;display:flex;flex-direction:column;gap:22px;color:var(--ink)}
.lg16 h1{font:500 44px/1.1 var(--font-display);letter-spacing:-.015em}
.lg16 .lede{font:400 21px/1.5 var(--font-body);color:var(--ink-2);text-wrap:pretty}
.lg16 section{display:flex;flex-direction:column;gap:6px;padding-top:18px;border-top:1px solid var(--line)}
.lg16 h2{font:500 22px/1.25 var(--font-display)}.lg16 section p{font-size:17px;line-height:1.6;text-wrap:pretty}
.lg16 .upd{font-size:14px;color:var(--ink-3)}
.lg16.ph16{padding:0 0 40px;gap:16px}.lg16.ph16 h1{font-size:32px}.lg16.ph16 .lede{font-size:18px}.lg16.ph16 section{padding-top:12px}.lg16.ph16 section p{font-size:16px;line-height:1.5}
.pk15.sm.on{color:var(--ink);text-decoration:none}
/* P7 · the link for a name with no email */
.lk16{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;padding:10px 12px;border-radius:12px;background:var(--paper-sunk)}
.lk16 .u{font:500 14px var(--font-mono);color:var(--ink);flex:1 1 160px;min-width:0;overflow-wrap:anywhere}
/* V · the one line as two choices */
.vz16{display:flex;flex-direction:column;gap:8px}
.vo16{display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:16px;border:1px solid var(--vis16-edge);text-align:left;font:400 17px/1.45 var(--font-display);color:var(--ink);text-wrap:pretty}
.vo16 .radio{margin-top:2px}.vo16.on{background:var(--vis16-on);border-color:transparent}
.vo16.off{color:var(--vis16-off)}.vo16.off .radio{opacity:.5}
.vn16,.nb16,.sn16{font-size:16px;line-height:1.45;color:var(--ink);text-wrap:pretty}
.cs16{padding-top:4px}
.swr16{display:flex;align-items:center;gap:12px;min-height:56px;font-size:16px;line-height:1.4;color:var(--ink)}.swr16>span:first-of-type{flex:1;min-width:0}
.swr16.me{border-top:1px solid var(--run15-rule);margin-top:4px}.swr16 .av{margin:0}.swr16>span.av:first-of-type{flex:none}.swr16>.av+span{flex:1;min-width:0}  /* CO 2026-10-13: your face beside Add me to the circle's WhatsApp group stretched into an oval; the words take the room */
.ln15 .swr16{min-height:52px}
/* FG5 · the circle's mark: square, rounded at 22% */
.mk16{display:inline-grid;place-items:center;flex:none;border-radius:var(--r-mark16);background:var(--mark16-a);color:var(--mark16-ink);position:relative;overflow:hidden}
.mk16.made:after{content:"";position:absolute;width:46%;height:46%;border-radius:50%;border:3px solid var(--paper);opacity:.9}
.mk16.made.b{background:var(--mark16-b)}.mk16.made.b:after{border-radius:20%}
.mk16.made.c{background:var(--mark16-c)}.mk16.made.c:after{width:60%;height:24%;border-radius:12px}
.mk16.up{background:repeating-linear-gradient(135deg,var(--paper-sunk) 0 6px,var(--line) 6px 12px);box-shadow:inset 0 0 0 1px var(--line-strong)}
.mk16.none{background:transparent;border:1.5px dashed var(--line-strong);color:var(--kopi)}
.mk16 img{width:100%;height:100%;object-fit:cover;display:block}.mk16.s{width:40px;height:40px}.mk16.m{width:48px;height:48px}.mk16.l{width:72px;height:72px}
.mks16{display:flex;gap:12px;padding:4px 0}
.ms16 .ivc16{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--paper-raised);border:1px solid var(--line);font-size:14px;color:var(--ink-2)}.ms16 .ivc16 b{color:var(--ink);text-align:left;font-size:15px}
.ms16 .shp16{position:relative;display:block;width:120px;height:84px}.ms16 .shp16 .mk16{position:absolute;left:8px;bottom:0;box-shadow:0 0 0 3px var(--paper)}
/* FG1 · You, and a circle's page */
.you16{gap:6px}
.cro16{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:8px 0;border-top:1px solid var(--run15-rule);text-align:left;color:var(--ink)}
.cro16>.col{flex:1;min-width:0}.cro16 b{font:600 16px var(--font-body)}.cro16 .col>span{font-size:14px;color:var(--ink-2)}.cro16>.ic{color:var(--ink-3);flex:none}
.cro16.ln{min-height:52px;font:600 17px var(--font-body);justify-content:space-between}
.yl16{padding-top:18px}
.ch16{display:flex;align-items:center;gap:14px}.ch16 .stk{flex:none}
.tbs16{display:flex;gap:18px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.tb16{min-height:44px;font:600 16px var(--font-body);color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tb16.on{color:var(--ink);border-color:var(--kopi)}
/* FG2 · the first-run note, once */
.fr16{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:var(--first16-fill)}
.fr16 p{font:400 16px/1.45 var(--font-body);color:var(--ink);text-wrap:pretty}.fr16 .mk15{flex:none;width:24px;height:24px;display:grid;place-items:center}
/* FG4 · Files */
.fl16{display:flex;flex-direction:column;gap:6px;padding-top:16px}
.fr16f{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 12px;border-radius:14px;background:var(--file16-fill);border:1px solid var(--line)}
.fr16f>.col{flex:1;min-width:0}.fr16f b{font:600 15px var(--font-body);overflow-wrap:anywhere}.fr16f span{font-size:13px;line-height:1.4;color:var(--ink-2)}
.fr16f>.ic{color:var(--ink-3);flex:none}.fr16f>.ic:first-child{color:var(--ink-2)}
.fr16f.wait{background:var(--file16-wait);border-color:transparent}
/* FG6 · a page as its parts in order */
.pgs16{font-size:15px;line-height:1.45;color:var(--ink-2)}.pgs16.pub{color:var(--ink)}.pgs16 .u{font:500 13px var(--font-mono)}
.pp16{list-style:none;display:flex;flex-direction:column;counter-reset:pp}
.pp16 li{counter-increment:pp;display:grid;grid-template-columns:28px minmax(0,1fr);gap:2px 8px;padding:10px 0;border-top:1px solid var(--page16-edge)}
.pp16 li:before{content:counter(pp);grid-row:1/span 3;font:500 15px/22px var(--font-mono);color:var(--page16-num)}
.pp16 .k{font:600 12px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.pp16 p{font:400 17px/1.4 var(--font-display);color:var(--ink);text-wrap:pretty}
.pa16{display:flex;align-items:center;gap:4px}.pa16 .pk15{margin-right:10px}.pa16 button{width:40px;height:40px;display:grid;place-items:center;color:var(--ink-2)}
.pp16 li.ed .fld{margin:2px 0}
/* FG7 · a product */
.ph16r{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pt16.big{border-radius:14px}.pt16.co{background:radial-gradient(circle at 50% 55%,var(--paper-sunk) 0 34%,var(--paper-raised) 35%);box-shadow:inset 0 0 0 1px var(--line)}
.pt16.add{background:none;border:1.5px dashed var(--line-strong);display:grid;place-items:center;color:var(--kopi)}
.pdl16{display:flex;align-items:center;gap:12px;padding:6px 0}.pdl16 .pt16{width:56px;flex:none}.pdl16 b{font:600 16px var(--font-body)}.pdl16 span{font-size:14px;color:var(--ink-2)}
:lang(zh) :is(.eb16,.fb16 h3,.fl16 h3,.pp16 .k){letter-spacing:.02em}
:lang(zh) :is(.hl16,.cost16,.vo16,.pp16 p,.dl16){line-height:1.6}
.cro16 b,.tb16,.dr16{white-space:nowrap}
/* Q11 · the circle's words are links; the + floats alone, no capsule */
a.tb16{display:inline-flex;align-items:center;text-decoration:none}
.tbs16.px{margin:0 16px 16px;padding:0}
.nav.fab16{pointer-events:none}.nav.fab16 .fab{pointer-events:auto}
.ko16{display:flex;align-items:center;gap:10px;min-height:52px;margin:8px 16px 0;padding:8px 0;border-top:1px solid var(--line);color:var(--ink);font:600 16px var(--font-body)}.ko16 .ic:first-child{color:var(--kopi)}.ko16 span{flex:1}.ko16 .ic:last-child{color:var(--ink-3)}
.hd .lead16{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 auto}.hd .bar:has(.lead16){height:auto;min-height:44px}.hd .lead16 .lt{font-size:var(--t-title);white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-width:0;overflow:hidden;text-wrap:balance}.hd .lead16 .lt .ic{display:inline;vertical-align:-2px}