
/* ==== Round 10 · a guest from the link, and the recovery-code reminder (additions) ====
   Tokens first; aliases on :root and every [data-theme] so they re-resolve in dark.
   Hard rule: no dashboards. "Guest" is a word by the name, never a count. Money is said in sentences.
   Builds on Round 9: .wadot9, .talk9/.bub9/.sys9/.say9/.quick9, .here9, .hw9 and the .was9 schematic are reused. */
:root,[data-theme]{
--wa-fill:var(--paper-raised);
--pair-fill:var(--paper-raised);--pair-edge:var(--line-strong);--pair-on:var(--kopi);--pair-on-fill:var(--kopi-soft);
--guest-ink:var(--ink-2);--guest-edge:var(--line-strong);
--keep-fill:var(--paper-sunk);--ready-fill:var(--kopi-soft);
--nudge-fill:color-mix(in srgb,var(--paper-raised) 92%,var(--mark-cup));--nudge-edge:var(--in);
--rc-tile:var(--paper-sunk);--rm-fill:var(--danger-soft);--rm-ink:var(--danger);
}
/* the link page: one welcome. The circle, then the WhatsApp question, then the sitting, on one scroll */
.wel10{display:flex;flex-direction:column;gap:14px}
.wel10 .cv{margin:0 16px;border-radius:var(--r-card);overflow:hidden}
.wel10 h1{font:500 40px/1.05 var(--font-display);letter-spacing:-.015em;color:var(--ink)}
.wa10{margin:0 16px;background:var(--wa-fill);border:1px solid var(--wa-edge);border-radius:var(--r-card);padding:16px;display:flex;flex-direction:column;gap:12px}
.wa10 .h{display:flex;align-items:center;gap:8px;width:100%;font:600 15px var(--font-body);color:var(--ink)}.wa10 .h span:last-child{flex:1;min-width:0;white-space:normal}
.wa10 .q{font:500 22px/1.25 var(--font-display);color:var(--ink)}
.wa10.done{flex-direction:row;align-items:center;gap:10px;padding:4px 6px 4px 16px;min-height:56px}
.wa10.done .t{flex:1;min-width:0;font-size:var(--t-sub);line-height:1.35;color:var(--ink)}
.wa10.done .btn{height:44px}
/* join, or come as a guest: two equal choices, each saying what it asks for */
.join10{padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.join10 .q{font:500 22px/1.25 var(--font-display);color:var(--ink);text-wrap:pretty}
.pair10{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.pair10 button{min-height:68px;border-radius:var(--r-field);border:1.5px solid var(--pair-edge);background:var(--pair-fill);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 10px;color:var(--ink);text-align:center}
.pair10 .n{font:600 17px/1.2 var(--font-body)}
.pair10 .d{font-size:13px;line-height:1.3;color:var(--ink-2)}
.pair10 button.on{border-color:var(--pair-on);background:var(--pair-on-fill)}
.next10{background:var(--paper-sunk);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.next10 p{font:500 18px/1.35 var(--font-display);color:var(--ink);text-wrap:pretty}
/* who you are on this phone */
.who10{display:flex;align-items:center;gap:10px;font-size:var(--t-sub);line-height:1.35;color:var(--ink)}
.who10 .av{width:28px;height:28px;font-size:11px}
.who10 .g,.g10t{font-weight:400;color:var(--guest-ink)}
.keepl10{display:inline-flex;align-items:center;gap:2px;min-height:44px;font:600 15px var(--font-body);color:var(--kopi);align-self:flex-start}
.tag.guest{background:transparent;border:1px solid var(--guest-edge);color:var(--guest-ink)}
.g10{width:32px;height:32px;border-radius:16px;background:var(--pair-on-fill);color:var(--kopi);display:grid;place-items:center;flex:none}
/* the host's check: one line under the guest, and Send it */
.send10{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding:4px 4px 4px 12px;min-height:48px;border-radius:12px;background:var(--paper-sunk);font:600 14px/1.3 var(--font-body);color:var(--ink)}
.send10>span{display:inline-flex;align-items:center;gap:6px}
.btn.rm10{background:var(--rm-fill);color:var(--rm-ink)}
/* more of WhatsApp's own screens (on the round-9 .was9 schematic): the chat picker, and Join group */
.was9 .pk{display:flex;align-items:center;gap:12px;padding:10px 16px;min-height:60px;font:500 16px var(--font-body);color:var(--ink)}
.was9 .pk.on{background:var(--wa-schem-in)}
.was9 .jg{margin:auto 20px;background:var(--wa-schem-in);border-radius:16px;padding:24px 20px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.was9 .jg .ph9{width:72px;height:72px;border-radius:36px}
.was9 .jg b{font:600 20px var(--font-body);color:var(--ink)}
.was9 .jg .sbtn{height:44px;width:100%;border-radius:10px;border:1.5px solid var(--ink);display:grid;place-items:center;font:600 15px var(--font-body);color:var(--ink);margin-top:8px}
/* warm cards: your share is ready, you paid the stall */
.ready10{background:var(--ready-fill);border-radius:var(--r-card);padding:16px;display:flex;flex-direction:column;gap:10px}
.ready10 p{font:500 20px/1.3 var(--font-display);color:var(--ink);text-wrap:pretty}
/* Keep my things: offered once, quiet */
.keep10{margin:0 16px;background:var(--keep-fill);border-radius:var(--r-card);padding:16px;display:flex;flex-direction:column;gap:10px}
.keep10 b{font:600 17px/1.3 var(--font-body);color:var(--ink)}
.keep10 p{font-size:var(--t-sub);line-height:1.45;color:var(--ink);text-wrap:pretty}
/* R · the one Home card, and the code shown once */
.nudge10{margin:0 16px 16px;background:var(--nudge-fill);border:1.5px solid var(--nudge-edge);border-radius:var(--r-card);padding:16px;display:flex;flex-direction:column;gap:10px}
.nudge10 .e{font:700 11px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--kopi)}
.nudge10 p{font:500 19px/1.35 var(--font-display);color:var(--ink);text-wrap:pretty}
.rc10{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;background:var(--rc-tile);border-radius:16px;padding:12px}
.rc10 span{font:500 20px/1 var(--font-mono);letter-spacing:.1em;text-align:center;padding:12px 0;color:var(--ink);background:var(--paper-raised);border-radius:10px}
.tick10{display:flex;align-items:center;gap:12px;min-height:48px;font:600 16px var(--font-body);color:var(--ink);text-align:left;width:100%}
.box10{width:24px;height:24px;border-radius:7px;border:2px solid var(--line-strong);display:grid;place-items:center;flex:none;color:transparent}
.box10.on{background:var(--in);border-color:var(--in);color:var(--paper-raised)}
