/* ==== Round 8 · treating some of it, here now, near me (additions) ====================
   Tokens first; aliases on :root and every [data-theme] so they re-resolve in dark.
   Hard rule: no dashboards. The treat badge is words with a leaf or cup cue. Money is said in sentences. */
:root,[data-theme]{
--ts-fill:var(--hp-treat);--ts-ink:var(--hp-treat-ink);--r-ts:var(--r-pill);
--cov-mark:var(--in);--unc-mark:var(--ink-2);--unsure:var(--ln-open);--unsure-ink:var(--ln-open-ink);
--knows:var(--in);
--near-edge:var(--line);--dist:var(--ink-2);--osm:var(--ink-2);--join-edge:var(--kopi);
--r-code:12px;
}
/* the treat badge: round 7's warm "treats" fill, but a full pill, and it always names what. It may wrap; it never shortens */
.hp.some{background:var(--ts-fill);color:var(--ts-ink);border-radius:var(--r-ts);height:auto;min-height:26px;padding:4px 12px 4px 8px;white-space:normal;line-height:1.25;text-align:left;flex:0 1 auto}
.hp.some.lg{min-height:34px;padding:6px 14px 6px 10px}
/* the composer: what are you treating */
.tsbox8{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:12px;margin:0 12px 12px}
.tsbox8 .chip{height:44px;border-radius:22px}
.cap8{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--t-body);color:var(--ink)}
.cap8>span{white-space:nowrap}.cap8 .inp{min-height:44px;width:86px;padding:0 12px;font-weight:600;font-variant-numeric:tabular-nums}
.sees8{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.sees8 q{font-size:var(--t-sub);line-height:1.4;color:var(--ink);text-wrap:pretty}
/* the one-time acknowledgement: one sentence, large, then one line */
.ack8{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:start}
.ack8 .g{width:48px;height:48px;border-radius:24px;background:var(--ts-fill);color:var(--ts-ink);display:grid;place-items:center}
.ack8 .s{font:500 23px/1.3 var(--font-display);color:var(--ink);text-wrap:pretty}
.knows8{display:inline-flex;align-items:center;gap:4px;font:600 13px var(--font-body);color:var(--knows);white-space:nowrap}
.knows8 .ic{width:14px;height:14px}
/* at the table: Ordering? */
.ord8{margin:0 16px;background:var(--ts-fill);border-radius:var(--r-card);padding:16px;display:flex;flex-direction:column;gap:12px}
.ord8 p{font:500 20px/1.35 var(--font-display);color:var(--ink);text-wrap:pretty}
.ord8 .btn{background:var(--paper-raised);color:var(--ink)}
/* the bill: lines on the host, and lines on whoever had them. Mark shape, not colour: filled tick · open ring · dashed ring */
.tlh8{display:block;padding:14px 16px 6px;font:700 11px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.tls8{padding:0 16px 12px;font-size:var(--t-sub);line-height:1.4;color:var(--ink);text-wrap:pretty}
.tl8{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:11px 16px;border-top:1px solid var(--line);width:100%;text-align:left;color:var(--ink);min-height:48px}
.tl8 .n{font:600 16px/1.3 var(--font-body);display:flex;gap:6px;align-items:center;min-width:0}
.tl8 .p{font:500 15px var(--font-body);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.mk8{width:22px;height:22px;border-radius:11px;display:grid;place-items:center;border:1.5px solid var(--unc-mark);color:transparent;flex:none}
.mk8 .ic{width:14px;height:14px}
.tl8.on .mk8{background:var(--cov-mark);border-color:var(--cov-mark);color:var(--paper-raised)}
.tl8.q{background:var(--unsure)}
.tl8.q .mk8{border-style:dashed;border-color:var(--unsure-ink);color:var(--unsure-ink);font:700 12px/1 var(--font-body)}
.tl8 .why{grid-column:2/-1;display:flex;gap:6px;align-items:flex-start;font-size:13px;line-height:1.35;color:var(--ink);text-wrap:pretty}
.tl8 .pick2{grid-column:2/-1}
.tl8 .who{grid-column:2/-1;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);min-height:24px}
.tl8 .who.sug .stk .av{outline:1.5px dashed var(--sug);outline-offset:1px}
/* near me: a card that says only enough to recognise the table */
.near8{margin:0;background:var(--paper-raised);border:1px solid var(--near-edge);border-radius:var(--r-card);padding:16px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.near8 .h{font:600 18px/1.25 var(--font-body);color:var(--ink)}
.near8 .m{font-size:var(--t-sub);line-height:1.35;color:var(--ink-2)}
.near8 .btn{margin-top:6px}
.dist8{font:600 14px var(--font-body);color:var(--dist);white-space:nowrap;font-variant-numeric:tabular-nums}
.nearb8{height:44px;padding:0 16px 0 12px;border-radius:22px;border:1px solid var(--line-strong);display:inline-flex;align-items:center;gap:6px;font:600 15px var(--font-body);color:var(--ink);background:var(--paper-raised)}
.nearb8 .ic{color:var(--kopi)}
.osm8{font-size:12px;line-height:1.4;color:var(--osm);text-align:center}
.grp8{font:700 11px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding-top:4px}
/* the host's join request */
.join8{margin:0 16px;background:var(--paper-raised);border:1.5px solid var(--join-edge);border-radius:var(--r-card);padding:14px 16px;display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 12px;align-items:start}
.join8 .a{font:600 16px/1.35 var(--font-body);color:var(--ink);text-wrap:pretty}.join8 .b{font-size:13px;line-height:1.4;color:var(--ink-2)}
.join8 .acts{grid-column:2/-1;display:flex;gap:8px;padding-top:8px}
/* sign in: the line, the code */
.hello8{font:500 34px/1.15 var(--font-display);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.or8{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink-2)}
.or8:before,.or8:after{content:"";flex:1;height:1px;background:var(--line)}
.code8{display:flex;gap:8px;justify-content:center}
.code8 span{width:44px;height:56px;border-radius:var(--r-code);background:var(--paper-sunk);border:1.5px solid transparent;display:grid;place-items:center;font:500 24px var(--font-mono);color:var(--ink)}
.code8 span.cur{border-color:var(--kopi);background:var(--paper-raised)}
/* the phone's own location prompt, drawn as a schematic (an OS surface: same in both themes) */
.perm8{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:280px;background:var(--os-note);color:var(--os-note-ink);border-radius:16px;z-index:60;text-align:center;overflow:hidden;font-family:-apple-system,system-ui,sans-serif;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.perm8 .t{padding:18px 16px 14px;font:600 16px/1.3 -apple-system,system-ui,sans-serif}
.perm8 .t small{display:block;font:400 13px/1.35 -apple-system,system-ui,sans-serif;color:var(--os-note-2);margin-top:6px}
.perm8 button{display:block;width:100%;height:46px;border-top:1px solid rgba(27,33,28,.14);font:500 16px -apple-system,system-ui,sans-serif;color:#2A5DB0}
.perm8 .cp{display:block;padding:6px;font:500 9px var(--font-mono);color:var(--os-note-2);border-top:1px solid rgba(27,33,28,.14)}