@leftoff/cli 0.9.7 → 0.9.8-beta.10

package/docs/SECURITY.md

@@ -96,6 +96,16 @@ When your hosted board is open on a Mac that runs Leftoff, the page sends the sa
 
 Since 0.9.7 the page also tries `https://leftoff.localhost/v1/relay/direct` (Leftoff's own Caddy from `leftoff setup`, bound to loopback; it rewrites Host, drops X-Forwarded-*, and passes the page's Origin through), since Safari won't let an https page call plain `http://127.0.0.1`. A request that came in through this door came from a browser on this Mac, from your own board's origin, sealed with a paired key, so it may also do the one thing only this Mac's own browser may do: **Restore** (`POST /v1/restore`, which opens Ghostty tabs here). The daemon marks such requests with a second in-memory secret that only the door sets; a sealed request can't carry it, and every other endpoint treats a direct request exactly like the relay (a paired remote device). Through the relay, from a phone or another Mac, Restore stays off.
 
+### Live link (0.9.8 beta)
+
+Live link is opt-in, per session: only sessions started with `leftoff live` have a channel. It adds:
+
+- **The channel** is a stdio MCP server that Claude Code starts. It opens no port. It talks to the daemon on 127.0.0.1 with the board's token, and the daemon accepts its calls (hello, next message, ack, reply, permission) from loopback only. A channel is tied to the session whose process started it, so the daemon only writes into sessions on its own Mac. Other Macs go through the peer link.
+- **Prompts from the board or a phone** reach Claude exactly like typed input, so they follow the same rule as answering a permission: a phone needs *Trust my paired devices*, and they're rate-limited and written to the session's audit trail. Anyone who can send prompts can make Claude act, so treat trusting your paired devices as giving them your keyboard.
+- **Permission relay** never allows anything on its own. A prompt waits for Allow once or Deny. With no answer the terminal dialog stays and decides, and an answer in the terminal wins. Live link answers one call at a time and never adds session-wide rules. **Always allow here** (0.9.8) is a click that writes the exact rule its ⓘ tooltip and label show into that project's `.claude/settings.local.json` (the file Claude Code's own option writes), only for shapes an exact rule can pin down. A broken settings file is never overwritten.
+- **Outside events** need this Mac's event key (`~/.config/checkpoints/secrets/live-events`, mode 600, made by `leftoff live key`, replaced with `--new`). Locally that's a Bearer key. Through the relay only an HMAC signature is accepted (5-minute window, replays refused), so the relay can pass an event along but can't read the key, forge an event or change one. Both the relay and the Mac rate-limit, and bodies are capped at 16 KB. Claude's instructions call an event information, not a command, but it is still text Claude reads: anyone with the key can put words in front of your session. Keep the key in your CI's secrets.
+- **Remote Restore** opens Ghostty tabs, so a phone or another Mac can only ask. The Mac shows a notification and a card, and only that Mac's own browser can confirm. Requests expire after 5 minutes, at most 3 wait at once, and they're rate-limited.
+
 ### Logging
 
 The Worker never logs request or response bodies (it can't read them anyway) and stores only what's listed above, in your Durable Object. `wrangler.toml` turns Workers observability (request logs) off. Cloudflare's edge keeps its usual metadata for any site (IP, hostname, path such as `/_relay/api`, status), under its own policies.

package/docs/peer-protocol.md

@@ -111,6 +111,8 @@ Only Macs registered for that user can connect: the first with `leftoff relay re
 
 Every few seconds (`peers.pollMs`, default 4 s) each daemon asks every machine that accepts for `needs.list`, so another Mac's permission prompts and questions show on this board with a ⌂ machine chip. Answer, reply and Go on another machine's session go out as envelopes. When that isn't possible, the button is grey and says why: not allowed on that machine, unreachable, key changed, no key yet (that Mac needs 0.5.2), or no route. Answering from a phone keeps its own rules (Settings → Privacy & security), and Go stays a local-browser action.
 
+Phone notifications (0.9.8) ride the same envelopes: `push.sync` carries the Web Push subscriptions a browser turned on (endpoint, keys, a device label) with the VAPID keys they were made with, plus 30-day removal tombstones; each side merges (newer word per endpoint wins) and answers with its own, so every Mac can push for its own sessions and only those. It is answered even when a Mac doesn't allow incoming commands, because it runs nothing there. Kept on each Mac in `~/.config/checkpoints/push/` (0600), never in the synced folder. Shared when a device subscribes or unsubscribes, at start, and every 20 minutes.
+
 ## Pairing through Syncthing (0.5.3)
 
 Before two Macs share a folder they have no channel to each other, so pairing rides on Syncthing itself. Leftoff never opens a port for it.

package/mod/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "leftoff",
-  "version": "0.9.7",
+  "version": "0.9.8-beta.10",
   "description": "Leftoff (formerly Checkpoints): WTF was I working on? Tracks every Claude Code session on this machine, writes a 3-line checkpoint when one goes quiet, and adds /cp (checkpoint now), /cp-name and a /leftoff pane. Talks to the local Leftoff daemon on 127.0.0.1:7429 and falls back to writing markdown in ~/checkpoints.",
   "author": {
     "name": "Joel"

package/mod/hooks/core.js

@@ -299,9 +299,19 @@ export function resumeCommand(session) {
   const id = session.id || session.sessionId
   const cwd = resumeDir(session)
   const wt = resumeWorktreeName(session)
-  return (cwd ? 'cd ' + shArg(cwd) + ' && ' : '') + (isCodex(session) ? codexInvocation(id) : claudeInvocation(session, [...(wt ? ['--worktree', wt] : []), '--resume', id]))
+  const args = [...(wt ? ['--worktree', wt] : []), '--resume', id]
+  return (cwd ? 'cd ' + shArg(cwd) + ' && ' : '') + (isCodex(session) ? codexInvocation(id) : wasLiveSession(session) ? liveInvocation(args) : claudeInvocation(session, args))
 }
 
+// 0.9.8: a session started with `leftoff live` (it had Leftoff's Live channel)
+// resumes as one, `leftoff live -- --resume <id>`, so it shows up Live again.
+// Codex and Ollama sessions resume their own way (Live is Claude Code only).
+export function wasLiveSession(session) {
+  if (!session || isCodex(session) || (session.backend && session.backend.kind === 'ollama')) return false
+  return !!(session.wasLive || (session.liveLink && session.liveLink.on))
+}
+export function liveInvocation(args = []) { return 'leftoff live --' + (args.length ? ' ' + args.map(shArg).join(' ') : '') }
+
 // 0.8.0: a Codex session (its rollout under ~/.codex/sessions) resumes with `codex resume <id>`.
 export function isCodex(session) { return !!session && session.codingAgent === 'codex' }
 export function codexInvocation(id) { return 'codex resume ' + shArg(id) }
@@ -547,7 +557,7 @@ const SESSION_ORDER = ['id', 'title', 'title_source', 'machine', 'cwd', 'repo',
 export const SESSION_EXTRA = ['inTurn', 'needsInput', 'backgroundTasks', 'turnsSinceCheckpoint', 'dormantStretch',
   'finalCheckpointDone', 'firstPrompt', 'lastPreview', 'lastNotification', 'lastEventAt', 'statusChanges', 'folder',
   'pid', 'tty', 'pidStartedAt', 'pidSource', 'term', 'closedAt', 'answers', 'lastNotificationMessage', 'needsInputAt', 'question', 'questionAt',
-  'startSource', 'historyTurns', 'healedAt', 'healedVia', 'archivedReason', 'backend', 'prLinks', 'prUnlinked', 'todos', 'files', 'startRepo', 'editedRepos', 'parked', 'nonInteractive', 'transcriptCwd', 'doubtedCheckpoints']
+  'startSource', 'historyTurns', 'healedAt', 'healedVia', 'archivedReason', 'backend', 'prLinks', 'prUnlinked', 'todos', 'files', 'startRepo', 'editedRepos', 'parked', 'nonInteractive', 'transcriptCwd', 'doubtedCheckpoints', 'liveLink', 'transcriptTurns', 'wasLive']
 
 export const SESSION_FIELDS = ['id', 'title', 'titleSource', 'machine', 'cwd', 'repo', 'transcriptPath', 'model', 'surface', 'capture',
   'status', 'startedAt', 'lastActivityAt', 'lastHeartbeatAt', 'endedAt', 'endReason', 'turns', 'lastCheckpointId',
@@ -800,7 +810,7 @@ export function checkpointDue(s, now, cfg = DEFAULT_CONFIG) {
 export function isEmptySession(s, checkpointCount = 0) {
   if (!s) return true
   // 0.7.1: a prompt counts. A long first turn (a worktree bug fix) has no completed turn yet.
-  return !(Number(s.turns) > 0) && !s.title && !s.firstPrompt && !(Number(checkpointCount) > 0) && !s.lastCheckpointId &&
+  return !(Number(s.turns) > 0) && !(Number(s.transcriptTurns) > 0) && !s.title && !s.firstPrompt && !(Number(checkpointCount) > 0) && !s.lastCheckpointId &&
     !(Number(s.historyTurns) > 0) && s.startSource !== 'resume'
 }
 
@@ -876,7 +886,7 @@ export function applyEvent(s, ev) {
         s.needsInput = false
         s.question = null
         s.lastNotification = null
-        if (d.prompt && !s.firstPrompt) s.firstPrompt = clip(d.prompt, 300)
+        if (d.prompt && (!s.firstPrompt || /^\s*<channel\b/.test(s.firstPrompt))) s.firstPrompt = clip(String(d.prompt).replace(/^\s*<channel\b[^>]*>/, '').replace(/<\/channel>\s*$/, '').trim(), 300) || s.firstPrompt || null // 0.9.8: a Live link message, without its wrapper (even one the 300-character clip cut short)
         if (d.countTurn === true) s.turns = (s.turns || 0) + 1 // 0.8.1: Codex counts a turn at its prompt when no task_started came first
         if (s.capture === 'hooks') { s.inTurn = true; s.activeSince = s.activeSince || at }
       }

package/mod/hooks/register.js

@@ -28,7 +28,7 @@ const END_TIMEOUT_MS = 1000
 const MODEL_TIMEOUT_MS = 20000
 
 // Module state. $.state is not used: the pane redraws with $.ui.invalidate.
-const MOD_VERSION = '0.9.7' // keep in step with .claude-plugin/plugin.json
+const MOD_VERSION = '0.9.8-beta.10' // keep in step with .claude-plugin/plugin.json
 
 const st = {
   internal: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leftoff/cli",
-  "version": "0.9.7",
+  "version": "0.9.8-beta.10",
   "description": "Leftoff: WTF was I working on? Tracks every Claude Code session, writes a 3-line checkpoint when one goes quiet, and gives you a daily digest and a board, on your Mac and (optionally) your phone.",
   "keywords": [
     "claude",

package/ui/app.css

@@ -120,7 +120,7 @@ h2 .count { color: var(--faint); font-weight: 500; }
 .card:hover { border-color: var(--line-strong); }
 .card.needs_input { border-color: color-mix(in srgb, var(--red) 45%, transparent); box-shadow: 0 0 0 1px var(--tint-red) inset, var(--card-shadow); }
 .card .row1 { display: flex; align-items: flex-start; gap: 10px; }
-.card .title { font-size: 15px; font-weight: 600; line-height: 1.35; flex: 1; }
+.card .title { font-size: 15px; font-weight: 600; line-height: 1.35; flex: 1; min-width: 0; overflow-wrap: break-word; } /* breaks at the <wbr> after a "/" and at spaces first; inside a word only when one word is wider than the card */
 .card .title a:hover { text-decoration: underline; text-decoration-color: var(--faint); }
 .s-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
 .s-title h1 { min-width: 0; }
@@ -507,6 +507,22 @@ h2 .count { color: var(--faint); font-weight: 500; }
 .btn.allow:hover { filter: brightness(1.08); }
 .btn.deny { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, var(--line)); }
 .btn.deny:hover { background: var(--tint-red); }
+/* Always allow here (0.9.8): one line like the rest, green outline, an ⓘ inside it with the rule in a tooltip */
+.always-wrap { position: relative; display: inline-flex; max-width: 100%; }
+.btn.always { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, var(--btn-line)); font-weight: 600; white-space: nowrap; padding-right: 34px; }
+.btn.always:hover { background: var(--tint-green, color-mix(in srgb, var(--green) 10%, transparent)); color: var(--green); }
+.tip-btn { position: absolute; top: 0; right: 0; bottom: 0; width: 32px; display: grid; place-items: center; padding: 0; margin: 0; border: 0; background: none; color: color-mix(in srgb, var(--green) 75%, var(--muted)); cursor: help; border-radius: 0 8px 8px 0; }
+.tip-btn .ic { width: 15px; height: 15px; }
+.tip-btn:hover, .tip-btn[aria-expanded="true"] { color: var(--green); background: var(--tint-green, color-mix(in srgb, var(--green) 10%, transparent)); }
+.tip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.btn.always:disabled + .tip-btn { color: var(--muted); }
+@media (pointer: coarse) { .btn.always { padding-right: 46px; } .tip-btn { width: 44px; } } /* the ⓘ is its own 44px target on touch */
+.tip { position: fixed; z-index: 70; max-width: 320px; padding: 9px 11px; border-radius: 10px; background: var(--card2); border: 1px solid var(--line-strong); box-shadow: var(--toast-shadow); color: var(--text2); font-size: 12.5px; line-height: 1.45; font-weight: 400; text-align: left; white-space: normal; overflow-wrap: anywhere; }
+.tip[hidden] { display: none; }
+.tip code { font: 11.5px/1.4 var(--mono); color: var(--text); background: var(--bg2); border: 1px solid var(--line); border-radius: 5px; padding: 0 4px; }
+.tip b { color: var(--text); font-weight: 600; }
+.need-actions .btn { white-space: nowrap; }
+.need.k-permission .need-actions .btn, .need.k-permission .deny-form .btn { min-height: 44px; }
 .deny-form { display: flex; gap: 6px; flex-wrap: wrap; }
 .deny-form[hidden] { display: none; }
 .deny-form input, .need .qother, .reply-text { flex: 1 1 220px; min-width: 0; background: var(--field); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 7px 9px; font: inherit; font-size: 13px; }
@@ -541,6 +557,10 @@ h2 .count { color: var(--faint); font-weight: 500; }
 @media (max-width: 640px) {
   .needs-strip { padding: 10px; margin-left: -4px; margin-right: -4px; }
   .need-actions .btn, .deny-form .btn { flex: 1 1 auto; justify-content: center; }
+  .need.k-permission .need-actions { flex-direction: column; align-items: stretch; } /* Allow / Always / Deny stack on a phone */
+  .need.k-permission .need-actions .btn { width: 100%; }
+  .need.k-permission .need-actions .always-wrap { width: 100%; }
+  .need.k-permission .need-actions .btn.always { padding-left: 46px; padding-right: 46px; } /* the label stays centred beside the ⓘ */
   .need-wait { margin-left: 0; }
   .answered .where, .recent .where { margin-left: 0; width: 100%; }
 }
@@ -2015,3 +2035,407 @@ mark.tx, .co-snip mark, .tx-snip mark, .tx-msg-text mark { background: var(--tx-
   .wz-cmd { width: 100%; }
   .wz-nav .btn { padding: 8px 16px; }
 }
+
+/* 0.9.8 Live link: the Live badge, and the session page's message box with its delivery states */
+.pill.live-pill { color: var(--green); background: var(--tint-green); font-weight: 600; } /* not .live: that class is the open/closed dot */
+/* Its dot pulses while Claude is running a turn (a soft ring growing out of it); idle, it stays still. The text doesn't blink. */
+.pill.live-pill.working::before { animation: live-pulse 1.6s ease-in-out infinite; }
+@keyframes live-pulse {
+  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); }
+  80%, 100% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 0%, transparent); }
+}
+@media (prefers-reduced-motion: reduce) { .pill.live-pill.working::before, .s-active::before { animation: none; } }
+.live-box { margin: 16px 0 18px; border: 1px solid color-mix(in srgb, var(--green) 35%, var(--line)); background: linear-gradient(180deg, var(--tint-green), transparent 70%), var(--card); border-radius: var(--radius); padding: 12px 14px 14px; }
+.live-box.off { border-color: var(--line); background: var(--card); }
+.live-box.off p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; }
+.live-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
+.live-head h2 { margin: 0; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
+.live-head .faint { font-size: 12.5px; }
+/* 0.9.8 polish: a plain block list (a flex column squeezed its bubbles and clipped long ones), scrolling inside */
+.live-thread { position: relative; }
+.live-log { list-style: none; margin: 8px 0 10px; padding: 0 2px 0 0; display: block; max-height: min(62vh, 560px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scroll-padding-bottom: 8px; }
+.live-log:empty { display: none; }
+.lv { display: block; border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; background: var(--card); margin: 0 0 8px; min-width: 0; }
+.lv:last-child { margin-bottom: 0; }
+.lv-you, .lv-event { width: fit-content; max-width: 88%; margin-left: auto; }
+.lv-you { background: var(--tint-accent); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
+.lv-event { background: var(--tint-yellow); border-color: color-mix(in srgb, var(--yellow) 35%, var(--line)); }
+.lv-claude { width: auto; max-width: 100%; }
+.lv-who { font-size: 11.5px; color: var(--muted); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
+.lv-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.5; color: var(--text); margin-top: 2px; }
+.lv-text.lv-md { white-space: normal; }
+.lv-md > :first-child { margin-top: 0; }
+.lv-md > :last-child { margin-bottom: 0; }
+.lv-md p { margin: 0 0 8px; }
+.lv-md ul, .lv-md ol { margin: 4px 0 8px; padding-left: 22px; }
+.lv-md li { margin: 2px 0; }
+.lv-md h2, .lv-md h3, .lv-md h4, .lv-md h5, .lv-md h6 { font-size: 14px; font-weight: 700; margin: 10px 0 4px; color: var(--text); text-transform: none; letter-spacing: normal; border: 0; padding: 0; }
+.lv-md b, .lv-md strong { font-weight: 650; color: var(--text); }
+.lv-md code { font-family: var(--mono); font-size: .88em; background: var(--card2); border: 1px solid var(--line); border-radius: 5px; padding: 0 4px; }
+.lv-md pre { background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 6px 0 8px; overflow-x: auto; white-space: pre; font-size: 12.5px; }
+.lv-md pre code { background: none; border: 0; padding: 0; }
+.lv-md a { color: var(--accent); text-decoration: underline; }
+.lv-md blockquote { margin: 6px 0; padding-left: 10px; border-left: 3px solid var(--line); color: var(--muted); }
+.lv-note { margin-top: 6px; font-size: 12px; color: var(--muted); }
+/* the status line under a message: Sent → Received → Working → Replied, with a spinner and the time */
+.lv-status { margin-top: 6px; font-size: 12px; color: var(--muted); }
+.lvs-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
+.lvs-step { color: var(--faint); }
+.lvs-step.done { color: var(--green); }
+.lvs-step.now { color: var(--text); font-weight: 650; }
+.lvs-step.bad { color: var(--red); font-weight: 650; }
+.lvs-arrow { color: var(--faint); }
+.lvs-line { display: flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--text2); }
+.lv-status.warn .lvs-line { color: var(--yellow); }
+.lv-status.bad .lvs-line { color: var(--red); }
+.lv-status.good .lvs-line { color: var(--green); }
+.lvs-steps .lvs-time { padding-left: 8px; }
+.lvs-time { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); }
+.lv-spin { width: 12px; height: 12px; flex: none; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); animation: spin .8s linear infinite; }
+@media (prefers-reduced-motion: reduce) { .lv-spin { animation: none; border-top-color: color-mix(in srgb, var(--accent) 25%, transparent); background: var(--accent); transform: scale(.6); } }
+.lv-earlier { list-style: none; display: flex; justify-content: center; margin: 2px 0 10px; }
+.live-earlier { min-height: 44px; font-size: 13px; }
+.lv-terminal { width: fit-content; max-width: 88%; margin-left: auto; background: color-mix(in srgb, var(--tint-accent) 50%, var(--card)); border-color: color-mix(in srgb, var(--accent) 18%, var(--line)); }
+.lv-tick { margin-top: 4px; font-size: 11.5px; color: var(--muted); text-align: right; }
+.lv-tick.got span { color: var(--accent); letter-spacing: -2px; padding-right: 2px; }
+.lv-tick.bad { color: var(--red); text-align: left; }
+.lv-working .lvs-line { margin-top: 0; }
+.lv-pending .lv-working { margin-top: 4px; }
+.lvs-sep { color: var(--faint); }
+.lv-working .lvs-time { margin-left: 0; }
+.lv-tool { font-size: 12px; line-height: 1.45; color: var(--text2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
+.lv-tool.done { color: var(--faint); }
+.lv-tool.now { color: var(--text); }
+.lv-tools { margin-top: 6px; font-size: 12px; color: var(--muted); }
+.lv-tools > summary { cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; gap: 4px; list-style: none; }
+.lv-tools > summary::-webkit-details-marker { display: none; }
+.lv-tools > summary::before { content: '▸'; font-size: 10px; color: var(--faint); transition: transform .15s; }
+.lv-tools[open] > summary::before { transform: rotate(90deg); }
+@media (prefers-reduced-motion: reduce) { .lv-tools > summary::before { transition: none; } }
+.lv-tools > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
+.lv-tools[open] > summary { margin-bottom: 2px; }
+.lv-none { color: var(--muted); font-style: italic; }
+.lv-pending { width: fit-content; min-width: min(260px, 100%); }
+.live-jump { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--btn-line); background: var(--card); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; box-shadow: 0 4px 14px rgba(0,0,0,.18); cursor: pointer; z-index: 2; }
+.live-jump:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.live-jump-n { font-weight: 500; color: var(--muted); }
+.live-empty { margin: 6px 0 10px; font-size: 13px; }
+.live-err { color: var(--red); font-size: 13px; }
+/* 0.9.8: another Mac's session whose Mac is offline */
+.owner-off { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--text); font-size: 14px; line-height: 1.45; }
+.owner-off .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--muted); }
+.live-row .live-text { min-height: 44px; }
+/* Chat on a live card: straight to the Live box */
+.btn.chat-btn { position: relative; color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, var(--btn-line)); font-weight: 600; }
+.chat-btn .unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); position: absolute; top: -3px; right: -3px; box-shadow: 0 0 0 2px var(--card); }
+.restore-ask .rs-m { color: var(--muted); font-size: 12.5px; }
+.rs-note.rs-ask.ok { color: var(--green); }
+.rs-note.rs-ask.warn { color: var(--red); }
+@media (pointer: coarse), (max-width: 600px) {
+  .live-row .btn, .restore-ask .btn, .btn.chat-btn { min-height: 44px; min-width: 44px; }
+  .need-actions .btn, .deny-form .btn { min-height: 44px; } /* Allow / Deny from the phone */
+  .lv-tools > summary { min-height: 44px; }
+  .live-box { padding: 10px; margin-left: -4px; margin-right: -4px; }
+  .lv-you, .lv-event, .lv-terminal { max-width: 92%; }
+  .live-log { max-height: 60vh; max-height: 60dvh; }
+}
+
+/* ------------------------------------------------------------ the sidebar rail (0.9.8)
+   From 700px up (0.9.8 tabs: was 820): a narrow rail on the left. The Leftoff mark at the top, then
+   the sections as an icon over a small label, the current one in a soft pill,
+   a red count on Needs you; search, What's new, Settings and this Mac's status
+   (the Mac switcher) at the bottom; 700–1099px it shows icons only. Under 700px: the mark, search and status in
+   a slim top row, and a bottom tab bar (Board, Needs you, Lists, PRs, More). */
+:root { --rail-w: 84px; --rail-on: color-mix(in srgb, var(--accent) 13%, transparent); --bar-h: 58px; }
+.tab-more { display: none; }
+.moredot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--header-bg); }
+.moredot.warn { background: var(--yellow); }
+.moredot[hidden] { display: none; }
+.iconbtn .lbl { display: none; }
+.tabs a, .tab-more { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
+@media (min-width: 700px) {
+  body { padding-left: calc(var(--rail-w) + env(safe-area-inset-left)); }
+  .top { position: fixed !important; top: 0; bottom: 0; left: 0; width: calc(var(--rail-w) + env(safe-area-inset-left)); z-index: 20; /* !important: the rail never joins the page flow */
+    flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 6px; min-height: 0;
+    padding: max(14px, env(safe-area-inset-top)) 8px max(12px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
+    border-bottom: 0; border-right: 1px solid var(--line); overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
+  .brand { order: 0; justify-content: center; padding: 2px 0 10px; border-radius: 12px; }
+  .brand .logo { width: 30px; height: 30px; }
+  .brand span { display: none; }
+  .tabs { order: 0; flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 0; }
+  .tabs a, .topright .searchbtn, .topright .iconbtn, .topright .health {
+    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
+    width: auto; min-width: 0; height: auto; min-height: 54px; margin: 0; padding: 7px 2px 6px; border: 0; border-radius: 12px; background: none;
+    color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.15; text-align: center; white-space: nowrap; box-shadow: none; }
+  .tabs a .ic, .topright .ic { width: 20px; height: 20px; opacity: 1; }
+  .tabs a .lbl, .topright .lbl, .topright .sb-lbl, .topright .health .label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; flex: none; text-align: center; }
+  .tabs .lbl-short, .topright .sb-kbd { display: none; }
+  .tabs a:hover, .topright .searchbtn:hover, .topright .iconbtn:hover, .topright .health:hover, .topright .health[aria-expanded="true"] { color: var(--text); background: var(--bg2); }
+  .tabs a.on, .topright .iconbtn.on { color: var(--text); background: var(--rail-on); box-shadow: none; }
+  .tabs a.on .ic, .topright .iconbtn.on .ic { color: var(--accent); }
+  .tabs a#needsTab.has-needs .ic { color: var(--red); }
+  .navcount { position: absolute; top: 3px; left: calc(50% + 3px); min-width: 18px; height: 18px; line-height: 18px; font-size: 10.5px; padding: 0 5px; box-shadow: 0 0 0 2px var(--bg); }
+  .topright { order: 0; margin: auto 0 0; padding-top: 8px; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
+  .topright .health { order: 9; max-width: none; gap: 6px; }
+  .topright .health .dot { width: 9px; height: 9px; margin: 5px 0 1px; }
+  .newdot, .topdot { top: 8px; right: calc(50% - 15px); box-shadow: 0 0 0 2px var(--bg); }
+  .set-nav { top: 24px; }
+}
+@media (min-width: 700px) and (max-height: 640px) {
+  .tabs a, .topright .searchbtn, .topright .iconbtn, .topright .health { min-height: 46px; padding: 4px 2px; gap: 2px; }
+  .brand { padding-bottom: 4px; }
+}
+@media (max-width: 699.98px) {
+  .top { flex-wrap: nowrap; gap: 8px; min-height: 52px; padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 6px; background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
+  .brand { order: 1; }
+  .topright { order: 2; margin-left: auto; gap: 2px; }
+  .topright #wnTab, .topright #setTab { display: none; }
+  .searchbtn { width: 44px; height: 44px; }
+  .health { height: 44px; }
+  .tabs { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; order: 3; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px;
+    padding: 4px max(6px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
+    background: var(--header-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
+  .tabs .tab-extra { display: none; }
+  .tabs a, .tab-more { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: auto; min-height: 50px; padding: 5px 2px 4px;
+    border: 0; border-radius: 12px; background: none; color: var(--muted); font: inherit; font-size: 11px; font-weight: 500; line-height: 1.1; text-align: center; white-space: nowrap; box-shadow: none; cursor: pointer; }
+  .tabs a .ic, .tab-more .ic { width: 22px; height: 22px; opacity: 1; }
+  .tabs #needsTab .lbl { display: block; }
+  .tabs #needsTab .lbl-short { display: none; }
+  .tabs a.on, .tab-more.on { color: var(--text); background: none; box-shadow: none; }
+  .tabs a:hover, .tab-more:hover { background: none; color: var(--text); }
+  .tabs a.on .ic, .tab-more.on .ic { color: var(--accent); }
+  .tabs a.on::before, .tab-more.on::before { content: ''; position: absolute; top: 4px; left: 50%; width: 46px; height: 28px; transform: translateX(-50%); border-radius: 14px; background: var(--rail-on); z-index: -1; }
+  .tabs a, .tab-more { isolation: isolate; }
+  .tab-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  .navcount { position: absolute; top: 2px; left: calc(50% + 4px); right: auto; min-width: 17px; height: 17px; line-height: 17px; font-size: 10.5px; padding: 0 4px; box-shadow: 0 0 0 2px var(--bg); }
+  .moredot { top: 6px; left: calc(50% + 8px); }
+  main { padding-bottom: calc(var(--bar-h) + 40px + env(safe-area-inset-bottom)); }
+  .toast { bottom: calc(var(--bar-h) + 14px + env(safe-area-inset-bottom)); }
+}
+/* Hide the nav on scroll (phones, 0.9.8): body.nav-hidden slides the top row up
+   (its strip under the status bar stays, so nothing scrolls beneath the clock) and
+   the bottom bar down. The top row keeps its place in the flow and main keeps the
+   bar's padding, so nothing reflows. The top row is moved with `top`, not a
+   transform: a transform would become the fixed bar's containing block. */
+@media (max-width: 699.98px) {
+  .top { transition: top .2s ease; }
+  .top .tabs { transition: transform .2s ease, visibility 0s linear 0s; }
+  body.nav-hidden .top { top: calc(env(safe-area-inset-top) - var(--top-h, 60px)); }
+  body.nav-hidden .top .tabs { transform: translateY(calc(100% + 2px)); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
+}
+@media (max-width: 699.98px) and (prefers-reduced-motion: reduce) {
+  .top, .top .tabs, body.nav-hidden .top .tabs { transition: none; }
+}
+/* More (phones): the rest of the sections, above the bar */
+.moremenu { position: fixed; z-index: 45; right: max(8px, env(safe-area-inset-right)); bottom: calc(var(--bar-h) + 8px + env(safe-area-inset-bottom)); width: 230px; max-width: calc(100vw - 16px);
+  display: flex; flex-direction: column; padding: 6px; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(15, 20, 35, .18), 0 2px 6px rgba(15, 20, 35, .08); animation: lo-in .12s ease-out; }
+[data-theme="dark"] .moremenu { background: var(--card2); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
+.moremenu[hidden] { display: none; }
+.moremenu a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 15px; }
+.moremenu a .ic { width: 20px; height: 20px; color: var(--muted); flex: none; }
+.moremenu a:hover, .moremenu a:focus-visible { background: var(--bg2); outline: none; }
+.moremenu a:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
+.moremenu a.on { background: var(--rail-on); }
+.moremenu a.on .ic { color: var(--accent); }
+.moremenu .newdot, .moremenu .topdot { position: static; margin-left: auto; box-shadow: none; }
+@media (min-width: 700px) { .moremenu { display: none !important; } }
+/* Quick look on Needs you (0.9.8) */
+.quicklook { position: fixed; z-index: 45; width: 360px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain;
+  background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(15, 20, 35, .18), 0 2px 6px rgba(15, 20, 35, .08); padding: 12px 12px 8px; font-size: 13.5px; animation: lo-in .12s ease-out; }
+[data-theme="dark"] .quicklook { background: var(--card2); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
+.quicklook[hidden] { display: none; }
+.ql-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 10px; border-bottom: 1px solid var(--line); }
+.ql-head h2 { margin: 0; font-size: 15px; font-weight: 650; text-transform: none; letter-spacing: 0; color: var(--text); }
+.ql-list { list-style: none; margin: 0; padding: 0; }
+.ql-item { display: flex; align-items: center; gap: 8px; padding: 9px 4px; border-bottom: 1px solid var(--line); min-width: 0; }
+.ql-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--text); text-decoration: none; border-radius: 8px; }
+.ql-main:hover .ql-t { color: var(--accent); }
+.ql-main:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.ql-t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ql-what { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ql-meta { color: var(--faint); font: 11.5px/1.3 var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ql-item.blocking .ql-t::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin: 0 6px 1px 0; vertical-align: middle; }
+.ql-actions { display: flex; gap: 6px; flex: none; }
+.ql-actions .btn { min-height: 44px; padding: 0 11px; font-size: 13px; justify-content: center; }
+.ql-item.has-always { flex-wrap: wrap; } /* three buttons: their own row under the item */
+.ql-item.has-always .ql-main { flex: 1 1 100%; }
+.ql-item.has-always .ql-actions { flex: 1 1 100%; }
+.ql-item.has-always .ql-actions .btn, .ql-item.has-always .ql-actions .always-wrap { flex: 1 1 0; min-width: 0; }
+.ql-actions .always-wrap .btn.always { width: 100%; padding-right: 34px; }
+@media (pointer: coarse) { .ql-actions .always-wrap .btn.always { padding-right: 46px; } }
+.ql-empty, .ql-more { color: var(--muted); margin: 0; padding: 12px 4px; font-size: 13px; }
+.ql-more { padding: 8px 4px 0; }
+.ql-foot { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 44px; padding: 0 6px; margin-top: 2px; color: var(--accent); font-weight: 600; text-decoration: none; border-radius: 8px; }
+.ql-foot:hover { text-decoration: underline; }
+.ql-foot:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+@media (pointer: coarse), (max-width: 699.98px) { .ql-actions .btn { min-height: 44px; min-width: 64px; } .ql-main { min-height: 44px; justify-content: center; } }
+@media (max-width: 699.98px) { .quicklook { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); width: auto; max-width: none; bottom: calc(var(--bar-h) + 8px + env(safe-area-inset-bottom)); max-height: calc(100vh - var(--bar-h) - 80px); } }
+@media (prefers-reduced-motion: reduce) { .quicklook, .moremenu { animation: none; } }
+
+/* Pull to refresh (phones, 0.9.8): the spinner comes down from under the top row */
+.ptr { position: fixed; z-index: 19; left: 50%; top: calc(env(safe-area-inset-top) + 8px); width: 38px; height: 38px; margin-top: -8px; transform: translate(-50%, 0); display: grid; place-items: center;
+  border-radius: 50%; background: var(--card); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(15, 20, 35, .16); color: var(--muted); pointer-events: none; }
+[data-theme="dark"] .ptr { background: var(--card2); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
+.ptr[hidden] { display: none; }
+.ptr-ring { display: grid; place-items: center; transform: rotate(var(--ptr-turn, 0deg)); }
+.ptr-ring svg { width: 19px; height: 19px; }
+.ptr.armed { color: var(--accent); }
+.ptr.busy .ptr-ring { animation: spin .8s linear infinite; }
+@media (pointer: coarse) and (max-width: 699.98px) { html, body { overscroll-behavior-y: contain; } }
+@media (prefers-reduced-motion: reduce) { .ptr-ring { transform: none; } .ptr.busy .ptr-ring { animation: lo-pulse 1.2s ease-in-out infinite; } }
+@keyframes lo-pulse { 50% { opacity: .35; } }
+
+/* 0.9.8: the session page's header. The title takes the room that's left and
+   breaks at " · " and after "/" (titleHtml's <wbr>), never mid-word unless one
+   word is wider than the page; the buttons are one group that drops under the
+   title as a whole when it doesn't fit beside it. Every button: one line, 44px,
+   an icon and a short label; the primary ones (Checkpoint, Resume) are tinted,
+   not filled, so they don't shout over the rest. */
+.pagehead.s-head { flex-wrap: wrap; align-items: flex-start; column-gap: 20px; row-gap: 12px; }
+.pagehead.s-head > .s-head-main { flex: 1 1 28rem; min-width: 0; } /* under ~28rem beside the buttons, the buttons move down instead */
+.s-head h1 { overflow-wrap: break-word; line-height: 1.3; }
+.pagehead.s-head > .s-actions { margin-left: 0; flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 100%; }
+.s-actions .btn { height: 44px; min-height: 44px; padding: 0 14px; gap: 7px; font-size: 13.5px; line-height: 1; white-space: nowrap; flex: none; justify-content: center; }
+.s-actions .btn .ic { width: 16px; height: 16px; flex: none; margin: 0; }
+.s-actions .btn.icon-btn { width: 44px; padding: 0; }
+.s-actions .more-wrap { display: inline-flex; }
+.s-actions .btn.primary { background: var(--tint-accent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--btn-line)); }
+.s-actions .btn.primary:hover { filter: none; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); border-color: var(--accent); }
+.s-actions .btn.primary:active { filter: none; background: color-mix(in srgb, var(--accent) 22%, transparent); }
+.s-actions .split { flex: none; display: inline-flex; align-items: stretch; height: 44px; }
+.s-actions .split .btn { height: 44px; }
+.s-actions .split .btn.split-more { width: 38px; min-width: 38px; padding: 0; margin-left: 0; border-left: 1px solid color-mix(in srgb, var(--accent) 30%, var(--btn-line)); }
+.s-actions .split .btn.split-main { border-right-width: 0; }
+.s-actions .split.is-writing .btn:disabled { opacity: .85; border-style: solid; background: var(--tint-accent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--btn-line)); }
+.s-actions .split.is-writing .spin { border-color: color-mix(in srgb, var(--accent) 30%, transparent); border-top-color: var(--accent); }
+@media (max-width: 640px) {
+  /* a phone: the buttons are a row under the title that wraps, each part of a row sharing its width */
+  .pagehead.s-head > .s-actions { flex: 1 1 100%; }
+  .s-actions > .btn, .s-actions > .split { flex: 1 1 auto; }
+  .s-actions .split .split-main { flex: 1 1 auto; }
+  .s-actions > .more-wrap { flex: none; }
+}
+
+/* 0.9.8: a card's row (Go, Chat, copy, ⋯) and Catch me up's row: one line each,
+   all the same height (44px on touch). */
+.card > .actions-row > .btn, .card > .actions-row > .go-off > .btn, .cu-s .actions-row > .btn { white-space: nowrap; height: 30px; min-height: 30px; padding-top: 0; padding-bottom: 0; line-height: 28px; }
+.card > .actions-row > .btn.icon-btn { width: 32px; line-height: 1; }
+.card > .actions-row > .btn.chat-btn { min-width: 0; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding-top: 0; padding-bottom: 0; overflow: visible; }
+.cu-s .actions-row > .btn { display: inline-flex; align-items: center; }
+@media (pointer: coarse), (max-width: 600px) {
+  .card > .actions-row > .btn, .card > .actions-row > .go-off > .btn, .cu-s .actions-row > .btn { height: 44px; min-height: 44px; line-height: 42px; }
+  .card > .actions-row > .btn.icon-btn { width: 44px; }
+  .card > .actions-row > .btn:not(.icon-btn) { min-width: 44px; }
+}
+
+/* Phone notifications (0.9.8): the one per-device button, in More and Settings → General */
+.push-slot[hidden] { display: none; }
+.push-box { display: flex; gap: 10px; align-items: flex-start; }
+.push-box > .ic { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--muted); }
+.push-main { min-width: 0; flex: 1; }
+.push-line { margin: 0; font-size: 14px; line-height: 1.4; color: var(--text2); }
+.push-line strong { color: var(--text); font-weight: 600; }
+.push-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
+.push-acts .btn { min-height: 44px; padding: 0 14px; font-size: 14px; white-space: nowrap; justify-content: center; }
+.push-note { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
+.push-note.bad { color: var(--red, #c0392b); }
+.moremenu .push-slot { border-top: 1px solid var(--line); margin-top: 6px; padding: 12px 8px 6px; }
+.moremenu:has(.push-slot:not([hidden])) { width: 270px; }
+.form .push-slot { grid-column: 1 / -1; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card2, transparent); margin-top: 4px; }
+
+/* ------------------------------------------------------------ tabs for sessions (0.9.8)
+   By width, never by device. Under 700px: no strip; an Open row on the board
+   and "‹ 2 of 4 ›" on a session page (swipe works too). 700–1099px: the strip,
+   the rail as icons. From 1100px: the full rail and the strip. */
+.tabstrip, .openrow, .tabpager { display: none; }
+.tabstrip[hidden], .openrow[hidden], .tabpager[hidden] { display: none !important; }
+.tab-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.preview .tab-t, .tab-s.preview .tab-t, .ochip.preview .tab-t { font-style: italic; }
+.tab-live, .tab-need { flex: none; width: 8px; height: 8px; border-radius: 50%; position: relative; }
+.tab-live { background: var(--green); animation: live-pulse 1.6s ease-in-out infinite; }
+.tab-need { background: var(--red); }
+@media (prefers-reduced-motion: reduce) { .tab-live { animation: none; } }
+@media (min-width: 700px) {
+  .tabstrip { display: flex; position: sticky; top: 0; z-index: 15; align-items: stretch; height: 44px; background: var(--bg); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
+  .tabstrip-in { flex: 1; min-width: 0; display: flex; align-items: stretch; }
+  .tab-scroll { flex: 1; min-width: 0; display: flex; align-items: stretch; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
+  .tab-scroll::-webkit-scrollbar { display: none; }
+  .tab { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 12px; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 500; white-space: nowrap; }
+  .tab .ic { width: 16px; height: 16px; flex: none; }
+  .tab:hover { color: var(--text); }
+  .tab:focus-visible, .tab-x:focus-visible, .tab-all:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+  .tab-board { flex: none; border-right: 1px solid var(--line); }
+  .tab-cell { position: relative; flex: 0 1 200px; min-width: 120px; display: flex; align-items: stretch; border-right: 1px solid var(--line); }
+  .tab-s { flex: 1; min-width: 0; padding-right: 0; }
+  .tab.on, .tab-cell.on { color: var(--text); background: var(--card); }
+  .tab-board.on, .tab-cell.on { box-shadow: inset 0 -2px 0 var(--accent); }
+  .tab-x { flex: none; width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0; border-radius: 8px; }
+  .tab-x .ic { width: 14px; height: 14px; }
+  .tab-x { position: relative; }
+  .tab-x::before { content: ''; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: transparent; transition: background .12s; }
+  .tab-x .ic { position: relative; }
+  .tab-x:hover { color: var(--text); background: none; }
+  .tab-x:hover::before { background: color-mix(in srgb, var(--text) 9%, transparent); }
+  .tab-keep .ic { width: 12px; height: 12px; }
+  .tab-keep { opacity: 0; }
+  .tab-cell:hover .tab-keep, .tab-keep:focus-visible, .tab-cell.on .tab-keep { opacity: 1; }
+  .tab-cell.dragging { opacity: .5; }
+  .tab-cell.drop-before { box-shadow: inset 2px 0 0 var(--accent); }
+  .tab-all { flex: none; width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-left: 1px solid var(--line); background: var(--bg); color: var(--muted); cursor: pointer; }
+  .tab-all .ic { width: 18px; height: 18px; }
+  .tab-all:hover, .tab-all[aria-expanded="true"] { color: var(--text); background: var(--bg2); }
+  .tab-all[hidden] { display: none; }
+}
+@media (min-width: 700px) and (pointer: coarse) { .tab-keep { opacity: 1; } }
+/* the rail as icons (700–1099px): the labels stay for screen readers */
+@media (min-width: 700px) and (max-width: 1099.98px) {
+  :root { --rail-w: 64px; }
+  .tabs a .lbl, .topright .lbl, .topright .sb-lbl, .topright .health .label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
+  .tabs a, .topright .searchbtn, .topright .iconbtn, .topright .health { min-height: 48px; padding: 6px 2px; }
+  .navcount { left: calc(50% + 2px); }
+}
+/* phones (under 700px): the Open row on the board, ‹ N of M › on a session page */
+@media (max-width: 699.98px) {
+  body[data-route="board"] .openrow { display: block; }
+  body[data-route="s"] .tabpager { display: block; }
+  .openrow { padding: 8px 0 0; }
+  .openrow-h { display: flex; gap: 8px; align-items: baseline; padding: 0 max(16px, env(safe-area-inset-left)); font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
+  .openrow-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 8px max(16px, env(safe-area-inset-left)) 6px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
+  .openrow-chips::-webkit-scrollbar { display: none; }
+  .ochip-cell { flex: none; display: flex; align-items: stretch; max-width: 62vw; border: 1px solid var(--line); border-radius: 22px; background: var(--card); scroll-snap-align: start; }
+  .ochip-cell.preview { border-style: dashed; }
+  .ochip { display: flex; align-items: center; gap: 7px; min-height: 44px; min-width: 44px; padding: 0 14px; color: var(--text); text-decoration: none; font-size: 15px; max-width: 100%; min-width: 0; }
+  .ochip-cell:not(.preview) .ochip { padding-right: 2px; }
+  .ochip-x { flex: none; width: 44px; min-height: 44px; border: 0; background: none; color: var(--muted); display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 22px; }
+  .ochip-x .ic { width: 15px; height: 15px; }
+  .tabpager { padding: 4px max(8px, env(safe-area-inset-left)) 0; }
+  .pager-in { display: flex; align-items: center; gap: 6px; }
+  .pager-b { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 22px; color: var(--text); text-decoration: none; }
+  .pager-b .ic { width: 22px; height: 22px; }
+  .pager-b.off { opacity: .25; }
+  .pager-b:not(.off):active { background: var(--bg2); }
+  .pager-n { flex: 1; text-align: center; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
+  .pager-keep { flex: none; min-height: 44px; }
+  .swipe-next main { animation: lo-page-fwd .18s ease-out; }
+  .swipe-prev main { animation: lo-page-back .18s ease-out; }
+}
+@media (prefers-reduced-motion: reduce) { .swipe-next main, .swipe-prev main { animation: none !important; } }
+
+/* 0.9.8: a tapped card shows it's opening at once; the session page's shell
+   (title from the card) stands in while its data loads. */
+.card[data-href]:active { transform: scale(.985); }
+.card.opening { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent) inset, var(--card-shadow); transform: scale(.985); }
+.card.opening::after { content: ''; position: absolute; top: 12px; right: 12px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); animation: spin .8s linear infinite; }
+.s-skel { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
+.s-skel-note { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
+.skel-line, .skel-block { border-radius: 8px; background: linear-gradient(90deg, var(--line) 0%, color-mix(in srgb, var(--line) 40%, transparent) 50%, var(--line) 100%); background-size: 200% 100%; animation: skel 1.2s ease-in-out infinite; }
+.skel-line { height: 14px; width: 100%; }
+.skel-line.short { width: 60%; }
+.skel-block { height: 160px; }
+.skel-title { height: 26px; width: 70%; margin: 4px 0; }
+@keyframes skel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
+@media (prefers-reduced-motion: reduce) { .skel-line, .skel-block, .card.opening::after { animation: none; } .card.opening, .card[data-href]:active { transform: none; } }
+/* 0.9.8: a running bubble whose data is stale says so instead of counting. */
+.lvs-hint { color: var(--muted); font-style: italic; }
+.lv-reconnecting .lvs-time, .lv-reconnecting .lvs-sep, .lv-reconnecting .lvs-label { display: none; }
+.lv-reconnecting .lv-spin { animation-duration: 2.4s; opacity: .5; }