/* Async towns (async-client): S15 lobby, S16 Your towns, S17 recap, S18 offers & orders, the town sheet, status strips.
   Tokens come from app.css (§10.1). Body text >= 16 px, every tap target >= 44 px, colour is never the only signal. */

/* ---------- S15 lobby ---------- */
.tw .chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.tw-card{ position:relative; }
.tw-card .tw-code{ position:absolute; right:12px; top:10px; font:800 var(--fs-m)/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.16em; padding:6px 8px; border-radius:8px; background:rgba(0,0,0,.35); color:var(--lamp-core); }
.tw-card h2{ padding-right:112px; margin-bottom:4px; }
.tw-link{ font:600 var(--fs-s)/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; padding:10px 12px; border-radius:10px; background:rgba(0,0,0,.35); word-break:break-all; user-select:all; -webkit-user-select:all; }
.tw-seats{ display:grid; grid-template-columns:1fr; gap:10px; }
.tw-seatcard{ --seat:var(--ink); position:relative; display:flex; flex-direction:row; align-items:center; gap:12px; text-align:left; padding:14px 12px 12px; min-height:44px;
  border-radius:var(--radius); background:var(--panel); border:2px solid var(--panel-edge); box-shadow:0 4px 0 var(--bg-deep); color:var(--ink); font:inherit; }
.tw-seatcard::before{ content:''; position:absolute; left:10px; right:10px; top:0; height:4px; border-radius:0 0 4px 4px; background:var(--seat); }
button.tw-seatcard{ cursor:pointer; }
.tw-seatcard.pick.sel{ border-color:var(--lamp-core); background:linear-gradient(180deg,rgba(255,158,61,.2),var(--panel) 70%); }
.tw-seatcard.pick.sel::after{ content:'✓ Your seat'; position:absolute; right:10px; top:10px; font-size:var(--fs-xs); font-weight:700; color:var(--lamp-core); }
.tw-seatcard.you{ border-color:var(--good); }
.tw-seatcard.k-open{ border-style:dashed; }
.tw-art{ display:block; flex:0 0 auto; height:64px; width:46px; } .tw-art svg{ height:64px; width:auto; display:block; }
.tw-seat-meta{ display:flex; flex-direction:column; gap:2px; font-size:var(--fs-s); min-width:0; }
.tw-seat-meta b{ font-size:var(--fs-m); }
.tw-who{ font-weight:700; } .tw-perk{ color:var(--ink-muted); font-size:var(--fs-xs); line-height:1.3; } .tw-react{ color:var(--ink-muted); font-size:var(--fs-xs); } .tw-hint{ font-size:var(--fs-xs); color:var(--lamp-core); font-weight:600; }
.tw-join .btn[disabled]{ opacity:.55; }
.tw-push .row{ margin-top:8px; }

/* ---------- S16 Your towns ---------- */
.tw-count{ margin:-4px 2px 0; }
.tw-towns{ display:flex; flex-direction:column; gap:10px; }
.tw-row{ position:relative; border-radius:var(--radius); overflow:hidden; background:var(--bg-deep); }
.tw-row.turn .tw-slide{ border-color:var(--lamp-core); box-shadow:0 0 0 2px rgba(255,158,61,.35), 0 4px 0 var(--bg-deep); }
.tw-slide{ display:flex; align-items:stretch; background:var(--panel-solid); border:1.5px solid var(--panel-edge); border-radius:var(--radius); box-shadow:0 4px 0 var(--bg-deep); transition:transform .18s ease; touch-action:pan-y; position:relative; z-index:1; }
.tw-rowmain{ flex:1; min-width:0; display:grid; grid-template-columns:auto 1fr; grid-template-areas:'g t' 'g c'; gap:2px 10px; align-items:center; text-align:left; padding:10px 6px 10px 12px; min-height:64px; border:0; background:transparent; color:var(--ink); font:inherit; cursor:pointer; }
.tw-rowglyph{ grid-area:g; font-size:26px; line-height:1; }
.tw-rowtext{ grid-area:t; display:flex; flex-direction:column; min-width:0; } .tw-rowtext b{ font-size:var(--fs-m); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tw-rowtext .dim{ font-size:var(--fs-xs); }
.tw-chip{ grid-area:c; justify-self:start; display:inline-flex; align-items:center; gap:4px; min-height:28px; padding:2px 10px; border-radius:999px; background:rgba(0,0,0,.32); font-size:var(--fs-xs); font-weight:700; color:var(--ink-muted); }
.tw-chip.gold{ background:var(--lamp-core); color:#2A1E10; } .tw-chip.gold::before{ content:'● '; }
.tw-chip.good{ color:var(--good); } .tw-chip.good::before{ content:'✓ '; } .tw-chip.bad{ color:var(--danger); } .tw-chip.bad::before{ content:'✸ '; }
.tw-chip.info{ color:var(--ink); } .tw-chip.dim{ color:var(--ink-muted); }
.tw-more{ align-self:center; margin-right:6px; min-width:44px; }
.tw-arch{ position:absolute; right:0; top:0; bottom:0; width:96px; z-index:0; border-radius:0 var(--radius) var(--radius) 0; }
.tw-archived{ margin-top:6px; } .tw-archived summary{ min-height:44px; display:flex; align-items:center; cursor:pointer; color:var(--ink-muted); font-weight:600; }
.tw-archived .tw-towns{ margin-top:6px; opacity:.85; }

/* ---------- S17 recap ---------- */
.recap{ position:relative; width:100%; max-width:520px; margin:0 auto; min-height:100dvh; display:flex; flex-direction:column; gap:10px; padding:calc(var(--sat,0px) + 12px) 0 calc(var(--sab,0px) + 14px); }
.recap-modal{ position:fixed; inset:0; z-index:50; background:var(--bg); overflow:auto; }
.rc-head{ display:flex; align-items:center; gap:10px; padding:0 14px; } .rc-head h1{ flex:1; font-size:var(--fs-xl); }
.rc-track{ flex:1; display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 14px 10px; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.rc-track::-webkit-scrollbar{ display:none; }
.rc-card{ flex:0 0 calc(100% - 28px); max-width:440px; scroll-snap-align:center; display:flex; flex-direction:column; gap:8px; margin:0 auto; }
.rc-card header h2{ font-size:var(--fs-l); margin:0; color:var(--card-ink); }
.rc-card.night{ border-color:rgba(17,40,63,.6); }
.rc-card[style*="--seat"]{ border-top:6px solid var(--seat); }
.rc-sub{ font-size:var(--fs-xs); color:#6a5a3a; font-weight:700; }
.rc-map{ background:var(--sea); border-radius:12px; padding:6px; } .rc-map svg{ width:100%; height:auto; max-height:230px; display:block; }
.rc-lines{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:4px; font-size:var(--fs-m); } .rc-more{ font-size:var(--fs-xs); color:#6a5a3a; }
.rc-dots{ display:flex; justify-content:center; gap:8px; min-height:14px; } .rc-dots i{ width:10px; height:10px; border-radius:50%; background:rgba(246,235,208,.3); } .rc-dots i.on{ background:var(--lamp-core); transform:scale(1.25); }
.rc-actions{ padding:0 14px; } .rc-actions .btn{ width:100%; }
.tw-map{ display:block; }
.tw-map .tw-fog{ font-family:var(--font-ui); }

/* ---------- S18 offers & orders, the town sheet ---------- */
.oo section.panel, .ts section.panel{ box-shadow:none; background:rgba(0,0,0,.2); }
.oo .list li, .ts .list li{ flex-wrap:wrap; }
.oo-add{ margin-top:10px; } .oo-add h3{ margin-bottom:6px; }
.oo-sentence{ font-weight:700; padding:8px 10px; border-radius:10px; background:rgba(0,0,0,.28); }
.oo-pick{ margin-top:8px; padding:10px; border-radius:12px; background:rgba(0,0,0,.28); }
.oo .btn[aria-pressed="true"]{ outline:3px solid var(--lamp-core); outline-offset:2px; }
.ts-code b{ font:800 var(--fs-l)/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.14em; color:var(--lamp-core); }
.ts-seat{ display:flex; align-items:center; gap:10px; min-width:0; } .ts-seat .glyph{ font-style:normal; font-size:24px; width:28px; text-align:center; }
.ts-seat span{ display:flex; flex-direction:column; }

/* ---------- status line inside the board ---------- */
.tw-presence{ position:absolute; right:8px; bottom:10px; z-index:2; max-width:calc(100% - 96px); padding:6px 12px; border-radius:999px; background:rgba(14,26,43,.88); border:1.5px solid var(--panel-edge); color:var(--ink); font-size:var(--fs-s); font-weight:600; pointer-events:none; }
.tw-presence[hidden]{ display:none; }
.tw-presence.on::before{ content:'✎ '; color:var(--lamp-core); }