@gotcos/glasses-server 6.98.1 → 6.99.12

package/server/web-control/panes/settings.js

@@ -0,0 +1,292 @@
+/* COS Control Web: Settings in Control's hub categories (SettingsHubCatalog.swift 25-146 and its
+   groups). Rows the server owns work here: Decision models, Live cues, Fireflies import status,
+   Morning brief, Task folders, Paused threads and Server status. Everything Control keeps on the
+   Mac (preferences, the pet, dictation, keys, pairing, permissions) is named under its category
+   as "On your Mac", so nothing looks missing and nothing security-related is offered here.
+   "This browser" is the web's own group: appearance and browser sign-in.
+   Keeps the ids and data attributes app.js already handles: data-theme-choice, #device-code-btn,
+   #device-code-panel, #copy-link, #tailnet-url, #sign-out, data-action="revoke-all", #settings-status. */
+(function () {
+  'use strict';
+  var W = window.COSWeb;
+  var $ = W.$, esc = W.esc, api = W.api;
+  var pane = $('pane-settings');
+  var S = { data: null, state: 'idle' };
+
+  var CATEGORIES = [
+    { id: 'general', title: 'General', summary: 'How COS Control opens, its shortcut, Today and the setup guide.', mac: ['App', 'Activity home', 'Setup guide'] },
+    { id: 'ai', title: 'AI and accounts', summary: 'The AI apps COS works through, your keys and the models behind Work.', mac: ['Your AI apps', 'Local model', 'Your own key', 'Search'] },
+    { id: 'glasses', title: 'Glasses and iPhone', summary: 'Pair your glasses and phone, and how videos reach this Mac.', mac: ['Devices', 'Video uploads'] },
+    { id: 'meetings', title: 'Meetings', summary: 'Recording, the meeting assistant, live cues and your meeting library.', mac: ['Recording', 'Meeting assistant', 'Library and sync'] },
+    { id: 'dictation', title: 'Dictation', summary: 'Type by voice into any Mac app: shortcuts, sounds, text and AI polish.', mac: ['Dictation', 'Microphone', 'Shortcuts', 'Sounds and audio', 'Text', 'AI polish', 'History'] },
+    { id: 'voice', title: 'Transcription and voice', summary: 'The engines and models that turn speech into text on this Mac.', mac: ['Voice setup', 'Models', 'Performance'] },
+    { id: 'work', title: 'Work and agents', summary: 'Sessions, Work chat, background jobs, folders and the morning brief.', mac: ['Sessions', 'Work chat', 'Background', 'Folders and notes'] },
+    // 6.99.11 (Drop it P2): shown only when the server has the P2 settings and Drop it is on.
+    { id: 'reach', title: 'COS reaching out', summary: 'What COS tells you about on its own, when it may interrupt, and your reminders.', mac: [], p2: true },
+    { id: 'privacy', title: 'Privacy and permissions', summary: 'What COS can use on this Mac. Each permission turns on one feature.', mac: ['Permissions'] },
+    { id: 'pet', title: 'Pet', summary: 'The session pet: its character, size and motion.', mac: ['Session pet', 'Characters'] },
+    { id: 'system', title: 'System and updates', summary: 'The COS server on this Mac, app updates, and checks when something is off.', mac: ['App updates', 'Troubleshooting'] }
+  ];
+  var DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+  function soft(p) { return p.then(function (d) { return d; }, function () { return null; }); }
+  function load(force) {
+    if (S.state === 'loading' || (S.data && !force)) return;
+    S.state = 'loading';
+    Promise.all([
+      soft(api('/api/decision-provider')), soft(api('/api/live-cues/v2/settings')), soft(api('/api/morning-brief')),
+      soft(api('/api/domains')), soft(api('/api/agent-sessions/fences')), soft(api('/api/meeting-import/fireflies/status')),
+      soft(api('/api/health')), soft(api('/api/drops/settings/p2'))
+    ]).then(function (r) {
+      S.data = { dp: r[0], cues: r[1], mb: r[2], domains: r[3], fences: r[4], ff: r[5], health: r[6], p2: r[7] };
+      S.state = 'ready';
+      render();
+    });
+  }
+
+  function row(name, desc, control) {
+    return '<div class="cx-set-row"><div class="cx-set-text"><span class="cx-set-name">' + esc(name) + '</span>' +
+      (desc ? '<span class="cx-set-desc">' + esc(desc) + '</span>' : '') + '</div>' + (control || '') + '</div>';
+  }
+  function value(text) { return '<span class="cx-set-value">' + esc(text) + '</span>'; }
+  function toggle(on, attr, label) { return '<button type="button" class="switch" role="switch" aria-checked="' + !!on + '" aria-label="' + esc(label) + '" ' + attr + '></button>'; }
+  function group(title, blurb, rows) {
+    return '<div class="cx-set-group"><h3 class="cx-set-title">' + esc(title) + '</h3>' + (blurb ? '<p class="cx-set-blurb">' + esc(blurb) + '</p>' : '') +
+      '<div class="cx-list">' + rows + '</div></div>';
+  }
+  function onMac(names) {
+    return '<p class="cx-set-mac">On your Mac: ' + esc(names.join(', ')) + '. Change these in COS Control.</p>';
+  }
+
+  function browserGroup() {
+    var choice = window.CosTheme ? window.CosTheme.choice() : 'system';
+    var themeBtn = function (id, label) {
+      var on = choice === id;
+      return '<button type="button" class="cx-set-row cx-set-choice" data-theme-choice="' + id + '" aria-pressed="' + on + '"><span class="cx-set-name">' + esc(label) + '</span><span class="value">' + (on ? '<span class="check">✓</span>' : '') + '</span></button>';
+    };
+    return '<section class="cx-set-cat"><h2 class="cx-col-title">This browser</h2>' +
+      group('Appearance', '', themeBtn('system', 'Match this device') + themeBtn('light', 'Light') + themeBtn('dark', 'Dark')) +
+      group('Sign-in', '',
+        '<button type="button" class="cx-set-row" id="device-code-btn"><span class="cx-set-text"><span class="cx-set-name">Sign in another device</span><span class="cx-set-desc">Shows a QR for the phone camera, and a code to type.</span></span><span class="chev"></span></button>' +
+        '<div id="device-code-panel" class="device-code hidden" aria-live="polite"></div>' +
+        '<button type="button" class="cx-set-row" id="copy-link"><span class="cx-set-text"><span class="cx-set-name">Copy link for your phone</span><span class="cx-set-desc" id="tailnet-url">' + esc(W.state.tailnetUrl || 'Checking Tailscale') + '</span></span></button>' +
+        '<button type="button" class="cx-set-row" id="sign-out"><span class="cx-set-text"><span class="cx-set-name">Sign out of this browser</span></span></button>' +
+        '<button type="button" class="cx-set-row" data-action="revoke-all"><span class="cx-set-text"><span class="grow cx-set-name">Sign out every browser</span><span class="cx-set-desc">Ends every signed-in browser, copies included. Glasses and the phone app stay paired.</span></span></button>') +
+      '</section>';
+  }
+
+  // ── COS reaching out (6.99.11) ──────────────────────────
+  function p2On() {
+    var d = S.data || {}, cap = d.health && d.health.capabilities && d.health.capabilities.dropIt;
+    return !!(cap && cap.enabled && cap.p2Settings && d.p2 && d.p2.settings);
+  }
+  function p2Get(path) { return path.split('.').reduce(function (o, k) { return o == null ? undefined : o[k]; }, S.data.p2.settings); }
+  function p2Switch(path, label) { return toggle(p2Get(path), 'data-set="p2" data-p2="' + path + '"', label); }
+  function p2Num(path, min, max, label) {
+    return '<input type="number" class="field cx-set-num" inputmode="numeric" data-p2="' + path + '" min="' + min + '" max="' + max + '" value="' + esc(String(p2Get(path))) + '" aria-label="' + esc(label) + '">';
+  }
+  function p2Time(path, label) { return '<input type="time" class="field cx-set-time" data-p2="' + path + '" value="' + esc(String(p2Get(path))) + '" aria-label="' + esc(label) + '">'; }
+  function p2Text(path, label, hint) {
+    return '<textarea class="field cx-set-steer" rows="2" maxlength="300" data-p2="' + path + '" aria-label="' + esc(label) + '" placeholder="' + esc(hint) + '">' + esc(String(p2Get(path) || '')) + '</textarea>';
+  }
+  var FULL_DAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+  function reachBody() {
+    var day = p2Get('checkin.weekday');
+    return group('Pings', 'COS posts these in the COS chat. They interrupt you only within these limits.',
+        row('Pings', 'Turn off to keep COS from posting on its own. Reminders and follow-ups on your drops still come.', p2Switch('pings.on', 'Pings')) +
+        row('Interruptions a day', 'On a weekday. Reminders do not count.', p2Num('pings.dailyCap', 0, 20, 'Interruptions a day')) +
+        row('From one kind a day', '', p2Num('pings.perSource', 1, 10, 'Interruptions from one kind a day')) +
+        row('Minutes between', 'The shortest gap between two interruptions.', p2Num('pings.gapMinutes', 0, 240, 'Minutes between interruptions')) +
+        row('Quiet from', 'No interruption and no new work ping from this time.', p2Time('pings.quietStart', 'Quiet from')) +
+        row('Quiet until', 'What waited posts as one item after this.', p2Time('pings.quietEnd', 'Quiet until')) +
+        row('Weekends are quiet', '', p2Switch('pings.weekendsQuiet', 'Weekends are quiet')) +
+        row('First interruption', 'The earliest a weekday interruption comes.', p2Time('pings.firstBanner', 'First interruption'))) +
+      group('What COS pings about', 'Each lands in the COS chat.',
+        row('Meeting prep', '15 minutes before your next meeting.', p2Switch('pings.sources.prep', 'Meeting prep')) +
+        row('Agents finishing', 'When a session you sent work to ends its turn.', p2Switch('pings.sources.agent', 'Agents finishing')) +
+        row('Follow-ups ready', 'When a meeting leaves follow-ups to review.', p2Switch('pings.sources.followups', 'Follow-ups ready')) +
+        row('Threads gone quiet', 'At most once a week for each thread.', p2Switch('pings.sources.stale', 'Threads gone quiet')) +
+        row('Red signals', 'A signal the system marks red.', p2Switch('pings.sources.signals', 'Red signals'))) +
+      group('Steer', 'Words, matched whole. COS reads no more than this into them.',
+        row('Ping me about', 'A ping that mentions one of these may interrupt you, even when its kind stays in the chat.', p2Text('steer.about', 'Ping me about', 'JCK, Rain, pricing')) +
+        row('Leave alone', 'A ping that mentions one of these is not posted. Your reminders and follow-ups always are.', p2Text('steer.leaveAlone', 'Leave alone', 'HubDB, standup'))) +
+      group('Follow-ups on your drops', 'One line under the drop when what it became resolves.',
+        row('Follow-ups', '', p2Switch('followUps.on', 'Follow-ups')) +
+        row('Work cards', 'At QA, complete or archived.', p2Switch('followUps.kinds.card', 'Work cards')) +
+        row('Handoffs', 'Finished, failed or refused.', p2Switch('followUps.kinds.handoff', 'Handoffs')) +
+        row('Sessions', 'Replied or stopped.', p2Switch('followUps.kinds.session', 'Sessions')) +
+        row('Threads', 'Resolved or gone quiet.', p2Switch('followUps.kinds.thread', 'Threads'))) +
+      group('Weekly check-in', 'COS asks what you do not want to forget this week. Your reply becomes a reminder.',
+        row('Check-in', '', p2Switch('checkin.on', 'Weekly check-in')) +
+        row('Day', '', '<select class="field cx-set-day" data-p2="checkin.weekday" aria-label="Check-in day">' + FULL_DAYS.map(function (n, i) {
+          return '<option value="' + i + '"' + (i === day ? ' selected' : '') + '>' + n + '</option>';
+        }).join('') + '</select>') +
+        row('Time', '', p2Time('checkin.time', 'Check-in time'))) +
+      group('Reminders', 'The ones you set by saying remind me.',
+        row('Default time', 'What a day alone means, and the time for Tomorrow and Monday.', p2Time('reminders.defaultTime', 'Default reminder time')) +
+        row('Snooze for', 'Minutes.', p2Num('reminders.snoozeMinutes', 5, 1440, 'Snooze minutes')) +
+        row('Notify me', 'A reminder notifies you at any hour.', p2Switch('reminders.banners', 'Reminder notifications')) +
+        row('Show on the glasses', 'For the glasses build that shows COS on the lens.', p2Switch('reminders.lensPush', 'Show reminders on the glasses'))) +
+      group('Which may interrupt', 'The rest land in the COS chat without a notification.',
+        row('Follow-ups on your drops', '', p2Switch('banners.resolution', 'Follow-ups on your drops may interrupt')) +
+        row('Meeting prep', '', p2Switch('banners.prep', 'Meeting prep may interrupt')) +
+        row('Agents finishing', '', p2Switch('banners.agent', 'Agents finishing may interrupt')) +
+        row('Follow-ups ready', '', p2Switch('banners.followups', 'Follow-ups ready may interrupt')) +
+        row('Threads and signals', '', p2Switch('banners.stale', 'Threads and signals may interrupt')) +
+        row('Weekly check-in', '', p2Switch('banners.checkin', 'Weekly check-in may interrupt')));
+  }
+  /** One field as the partial PUT the server merges: "pings.sources.prep" becomes { pings: { sources: { prep: v } } }. */
+  function p2Patch(path, v) {
+    var keys = path.split('.'), out = {}, at = out;
+    for (var i = 0; i < keys.length - 1; i++) { at[keys[i]] = {}; at = at[keys[i]]; }
+    at[keys[keys.length - 1]] = v;
+    return out;
+  }
+  function p2Save(path, v, undo) {
+    return api('/api/drops/settings/p2', { method: 'PUT', body: p2Patch(path, v) }).then(function (ans) {
+      if (ans && ans.settings) S.data.p2.settings = ans.settings;
+      W.toast('Saved');
+      return ans;
+    }, function (err) { if (undo) undo(); say((err && err.message) || 'That did not save.', true); });
+  }
+
+  function categoryBody(cat) {
+    var d = S.data || {};
+    var out = '';
+    if (cat.id === 'reach') return reachBody();
+    if (cat.id === 'ai' && d.dp) {
+      var p = d.dp.provider || '';
+      var name = function (x) { return x === 'subq' ? 'SubQ' : x === 'jev' ? 'Jev' : x || 'Not set'; };
+      var eff = d.dp.effective || {};
+      out += group('Decision models', 'Jev or SubQ, for Work suggestions, done checks, Work search and ⌘K.',
+        ['jev', 'subq'].map(function (x) {
+          var on = p === x;
+          return '<button type="button" class="cx-set-row cx-set-choice" data-set="provider" data-provider="' + x + '" aria-pressed="' + on + '"><span class="cx-set-text"><span class="cx-set-name">Use ' + name(x) + '</span><span class="cx-set-desc">' +
+            (x === 'jev' ? 'Fast and cheap.' : 'Asks a yes or no question per match.') + '</span></span><span class="value">' + (on ? '<span class="check">✓</span>' : '') + '</span></button>';
+        }).join('') +
+        row('In use', 'Work suggestions, done checks and search.', value(['session', 'completion', 'search'].map(function (k) { return name(eff[k]); }).filter(function (v, i, a) { return a.indexOf(v) === i; }).join(', '))));
+    }
+    if (cat.id === 'meetings') {
+      if (d.cues) {
+        var cap = d.cues.capability || {};
+        out += group('Live cues', 'Short prompts on the glasses during a meeting, and their limits.',
+          row('Live cues', d.cues.source === 'env' ? 'Set on the Mac by the server environment.' : 'Quiet suggestions on your glasses during meetings.', toggle(d.cues.enabled, 'data-set="cues"' + (d.cues.source === 'env' ? ' disabled' : ''), 'Live cues')) +
+          (cap.model ? row('Model', '', value(String(cap.model))) : ''));
+      }
+      if (d.ff) {
+        var imported = d.ff.counts && typeof d.ff.counts.imported === 'number' ? d.ff.counts.imported : null;
+        out += group('Fireflies import', 'Bring Fireflies meetings into your library.',
+          row('Keep importing', d.ff.keyConfigured ? 'New Fireflies meetings come in on their own.' : 'Add a Fireflies key on the Mac to import.', value(d.ff.keepImporting ? 'On' : 'Off')) +
+          (imported != null ? row('Imported', 'Last ' + (d.ff.windowDays || 30) + ' days.', value(String(imported))) : ''));
+      }
+    }
+    if (cat.id === 'dictation') {
+      out += group('Dictionary', 'One dictionary for G2 meetings, Mac recordings and dictation.',
+        '<button type="button" class="cx-set-row" data-go="dictation/dictionary"><span class="cx-set-text"><span class="cx-set-name">Open the dictionary</span><span class="cx-set-desc">Words and corrections, shared with the Mac.</span></span><span class="chev"></span></button>');
+    }
+    if (cat.id === 'work') {
+      if (d.mb && d.mb.config) {
+        var c = d.mb.config, st = d.mb.status || {};
+        var days = (c.days || []).map(function (x) { return DAYS[x] || ''; }).filter(Boolean).join(' ');
+        var next = st.nextRunAt ? new Date(st.nextRunAt) : null;
+        var last = st.lastRun && st.lastRun.firedAt ? new Date(st.lastRun.firedAt) : null;
+        out += group('Morning brief', 'A daily brief in your inbox.',
+          row('Morning brief', 'Runs at ' + (c.time || '07:00') + (days ? ' on ' + days : '') + (c.timezone ? ', ' + c.timezone : '') + '.', toggle(c.enabled !== false, 'data-set="brief"', 'Morning brief')) +
+          (next && !isNaN(next) ? row('Next run', '', value(next.toLocaleString(undefined, { weekday: 'short', hour: 'numeric', minute: '2-digit' }))) : '') +
+          (last && !isNaN(last) ? row('Last run', st.lastRun.status ? st.lastRun.status : '', value(last.toLocaleString(undefined, { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' }))) : ''));
+      }
+      if (d.domains && d.domains.domains) {
+        out += group('Task folders', 'The areas your tasks are grouped by.', d.domains.domains.map(function (x) { return row(x.label || x.name, x.name, value(x.abbr || '')); }).join(''));
+      }
+      if (d.fences && d.fences.fences && d.fences.fences.length) {
+        out += group('Paused threads', 'Threads COS stopped writing to. Shows only when one exists.', d.fences.fences.map(function (f) {
+          return row(f.title || f.target || 'Thread', [f.provider, f.adapterReason].filter(Boolean).join(' · '), '<button type="button" class="cx-btn quiet" data-set="release" data-target="' + esc(f.target || '') + '">Release</button>');
+        }).join(''));
+      }
+    }
+    if (cat.id === 'system' && d.health) {
+      var h = d.health, up = Number(h.uptime_seconds) || 0;
+      out += group('Server', 'Status, restart and updates for the COS server.',
+        row('Status', '', value(h.status === 'ok' ? 'Running' : String(h.status || 'Unknown'))) +
+        row('Version', '', value(h.server_version || '')) +
+        (up ? row('Up for', '', value(up >= 86400 ? Math.floor(up / 86400) + ' d ' + Math.floor((up % 86400) / 3600) + ' h' : Math.floor(up / 3600) + ' h ' + Math.floor((up % 3600) / 60) + ' min')) : '') +
+        (h.claude ? row('Claude Code', '', value(String(h.claude).replace(/\s*\(.*\)$/, ''))) : '') +
+        (h.codex ? row('Codex', '', value(String(h.codex))) : ''));
+    }
+    return out + (cat.mac.length ? onMac(cat.mac) : '');
+  }
+
+  function render() {
+    if (W.parseRoute().pane !== 'settings') return;
+    var host = String(W.state.serverName || 'your Mac').replace(/-/g, ' ');
+    pane.innerHTML = '<div class="cx">' +
+      '<header class="cx-hero"><span class="cx-glyph"><svg class="icon"><use href="#i-settings"/></svg></span>' +
+      '<div class="cx-hero-text"><h1 class="cx-title">Settings</h1><p class="cx-detail-line">COS on ' + esc(host) + '. Keys, permissions and glasses pairing change only on the Mac.</p></div>' +
+      '<div class="cx-actions"><button type="button" class="cx-btn quiet" data-set="refresh"><svg class="icon"><use href="#i-refresh"/></svg>Refresh</button></div></header>' +
+      browserGroup() +
+      (S.state !== 'ready' ? '<div class="cx-list" style="margin-top:18px">' + W.skeletonRows(4) + '</div>' :
+        CATEGORIES.filter(function (cat) { return !cat.p2 || p2On(); }).map(function (cat) {
+          return '<section class="cx-set-cat"><h2 class="cx-col-title">' + esc(cat.title) + '</h2><p class="cx-set-blurb">' + esc(cat.summary) + '</p>' + categoryBody(cat) + '</section>';
+        }).join('')) +
+      '<p class="status-line" id="settings-status"></p></div>';
+  }
+
+  function say(text, isError) { var el = $('settings-status'); if (el) { el.textContent = text; el.classList.toggle('error', !!isError); } }
+
+  pane.addEventListener('click', function (e) {
+    var go = e.target.closest('[data-go]');
+    if (go) { var parts = go.getAttribute('data-go').split('/'); return W.go(parts[0], parts.slice(1)); }
+    var t = e.target.closest('[data-set]');
+    if (!t || t.disabled) return;
+    var act = t.getAttribute('data-set');
+    if (act === 'refresh') { S.data = null; S.state = 'idle'; load(true); return render(); }
+    if (act === 'provider') {
+      api('/api/decision-provider', { method: 'PATCH', body: { provider: t.getAttribute('data-provider') } })
+        .then(function () { W.toast('Saved'); S.data = null; S.state = 'idle'; load(true); }, function (err) { say(err.message, true); });
+      return;
+    }
+    if (act === 'cues') {
+      var on = t.getAttribute('aria-checked') === 'true';
+      t.setAttribute('aria-checked', String(!on));
+      api('/api/live-cues/v2/settings', { method: 'POST', body: { enabled: !on } })
+        .then(function () { W.toast(!on ? 'Live cues on' : 'Live cues off'); }, function (err) { t.setAttribute('aria-checked', String(on)); say(err.message, true); });
+      return;
+    }
+    if (act === 'brief') {
+      var bon = t.getAttribute('aria-checked') === 'true';
+      t.setAttribute('aria-checked', String(!bon));
+      api('/api/morning-brief', { method: 'PUT', body: { enabled: !bon } })
+        .then(function () { W.toast(!bon ? 'Morning brief on' : 'Morning brief paused'); }, function (err) { t.setAttribute('aria-checked', String(bon)); say(err.message, true); });
+      return;
+    }
+    if (act === 'p2') {
+      var path = t.getAttribute('data-p2'), was = t.getAttribute('aria-checked') === 'true';
+      t.setAttribute('aria-checked', String(!was));
+      p2Save(path, !was, function () { t.setAttribute('aria-checked', String(was)); });
+      return;
+    }
+    if (act === 'release') {
+      if (t.getAttribute('data-armed') !== '1') { t.setAttribute('data-armed', '1'); t.textContent = 'Tap again to release'; return; }
+      // The server fails closed without confirm; the second tap is the confirmation.
+      api('/api/agent-sessions/fences/release', { method: 'POST', body: { target: t.getAttribute('data-target'), confirm: true } })
+        .then(function () { W.toast('Released'); S.data = null; S.state = 'idle'; load(true); }, function (err) { say(err.message, true); });
+    }
+  });
+
+  // Number, time, day and steer fields save when they change (a number is clamped by the server, then shown as saved).
+  pane.addEventListener('change', function (e) {
+    var f = e.target && e.target.closest ? e.target.closest('[data-p2]') : null;
+    if (!f || f.getAttribute('data-set') === 'p2' || !S.data || !S.data.p2) return;
+    var path = f.getAttribute('data-p2'), raw = f.value;
+    var v = f.type === 'number' || f.tagName === 'SELECT' ? Number(raw) : raw;
+    if (typeof v === 'number' && !isFinite(v)) return;
+    p2Save(path, v).then(function (ans) {
+      var saved = ans && ans.settings ? p2Get(path) : undefined;
+      if (saved !== undefined && String(saved) !== String(f.value)) f.value = String(saved);
+    });
+  });
+
+  W.registerPane('settings', {
+    load: function () { load(false); render(); }
+  });
+})();

package/server/web-control/panes/speakers.css

@@ -0,0 +1,269 @@
+/* COS Control Web: speakers pane styles, on top of control.css. Phone first (closed Duo, about 382 wide), then the
+   open Duo (about 890) and the desktop from 1100. No fixed or bottom layers: cards sit under the row they concern. */
+
+#pane-speakers { --sp-line: color-mix(in srgb, var(--ink) 13%, transparent); --sp-danger: var(--rec); }
+#pane-speakers .sp-grow { flex: 1 1 auto; }
+#pane-speakers .sp-muted { color: var(--sub); }
+#pane-speakers .sp-tert { color: var(--tertiary); font-size: 12.5px; line-height: 1.4; margin: 4px 0 0; }
+#pane-speakers .sp-small { font-size: 12.5px; line-height: 1.4; }
+#pane-speakers .sp-strong { font-weight: 600; }
+#pane-speakers .sp-accent { color: var(--accent); font-size: 12.5px; }
+#pane-speakers .sp-ink { color: var(--ink); font-weight: 600; }
+#pane-speakers .sp-err { color: var(--rec); font-size: 13px; margin: 6px 0 0; }
+#pane-speakers .sp-mono { font: 400 11.5px/1.45 var(--mono); color: var(--sub); margin: 3px 0 0; overflow-wrap: anywhere; }
+#pane-speakers .sp-mono-s { font: 400 10.5px/1.4 var(--mono); color: var(--sub); font-variant-numeric: tabular-nums; }
+#pane-speakers .sp-caps { font: 600 9.5px/1.3 var(--mono); letter-spacing: 0.07em; color: var(--tertiary); }
+#pane-speakers .sp-orange { color: #c26b1e; }
+#pane-speakers .sp-green { color: var(--green); }
+#pane-speakers .sp-amber-t { color: var(--amber); }
+#pane-speakers .sp-one { -webkit-line-clamp: 1; }
+#pane-speakers .sp-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+#pane-speakers p { margin: 6px 0 0; }
+
+/* Text buttons and the destructive pair. */
+#pane-speakers .sp-text { min-height: 32px; padding: 0 4px; color: var(--accent); font: 600 13.5px/1 var(--body); background: none; border: 0; }
+#pane-speakers .sp-text:disabled { opacity: 0.45; }
+#pane-speakers .sp-danger-text { color: var(--sp-danger); }
+#pane-speakers .cx-btn.sp-danger { color: var(--sp-danger); border-color: color-mix(in srgb, var(--sp-danger) 45%, transparent); }
+#pane-speakers .cx-btn .icon { flex: none; }
+
+/* A quiet working ring; still under reduced motion. */
+.sp-spin { display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--sp-line); border-top-color: var(--accent); animation: sp-turn 0.8s linear infinite; vertical-align: -2px; margin-right: 6px; flex: none; }
+@keyframes sp-turn { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .sp-spin { animation: none; border-top-color: var(--sp-line); border-right-color: var(--accent); } }
+#pane-speakers .sp-loading { display: flex; align-items: center; justify-content: center; padding: 28px 0; font-size: 13.5px; color: var(--sub); }
+
+/* ── toolbar ─────────────────────────────────────────── */
+#pane-speakers .sp-controls { justify-content: flex-start; min-height: 36px; gap: 10px 22px; }
+#pane-speakers .sp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; flex: 1 1 360px; }
+#pane-speakers .sp-check { margin-left: 0; }
+.sp-select { position: relative; display: inline-flex; align-items: center; }
+.sp-select select.field { min-height: 32px; width: auto; padding: 0 30px 0 11px; font-size: 13px; border-radius: 8px; background-position: calc(100% - 16px) 13px, calc(100% - 11px) 13px; }
+#pane-speakers .sp-search { flex: 1 1 200px; max-width: 280px; }
+#pane-speakers .sp-search .field { min-height: 32px; font-size: 13.5px; }
+
+/* ── Meetings to review ──────────────────────────────── */
+#pane-speakers .sp-mrow { grid-template-columns: 32px minmax(0, 1fr) auto 12px; align-items: center; }
+#pane-speakers .sp-mrow .chev { margin-top: 0; }
+#pane-speakers .sp-counts { display: block; margin-top: 2px; font-size: 12px; color: var(--tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+#pane-speakers .sp-mrow .sp-mono { display: block; margin-top: 3px; font-size: 11px; }
+.sp-pills { display: inline-flex; flex-wrap: wrap; gap: 5px; }
+.sp-pills-in { margin-top: 6px; }
+.sp-pills-side:empty { display: none; }
+.sp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 34px 16px; color: var(--sub); font-size: 14px; line-height: 1.45; }
+.sp-empty p { max-width: 400px; margin: 0; }
+.sp-empty .cx-glyph { color: var(--tint, var(--accent)); }
+
+/* ── Samples to review ───────────────────────────────── */
+.sp-card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px; padding: 14px 16px; max-width: 980px; }
+.sp-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
+.sp-add-glyph { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--gold-bg); color: var(--accent); flex: none; }
+.sp-add-glyph .icon { width: 17px; height: 17px; }
+.sp-card-title { font: 500 18px/1.2 var(--display); margin: 0; color: var(--ink); }
+.sp-notice { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; background: var(--qopen); font-size: 13px; color: var(--ink); margin: 8px 0; }
+.sp-i { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent); display: grid; place-items: center; font: 700 10px/1 var(--body); margin-top: 1px; }
+.sp-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 8px 0; }
+.sp-lead { font-size: 13.5px; color: var(--sub); line-height: 1.45; }
+.sp-held-list { margin-top: 8px; }
+.sp-held-row { display: grid; grid-template-columns: 136px minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--sp-line); }
+.sp-held-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
+.sp-held-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
+.sp-sug { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sp-sug b { color: var(--accent); font-weight: 600; }
+.sp-held-acts { justify-content: flex-end; }
+.sp-held-name { display: flex; flex-direction: column; gap: 6px; }
+.sp-hint { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--sub); }
+.sp-hint:empty { display: none; }
+.sp-chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.sp-chip { height: 28px; font-size: 12.5px; }
+#pane-speakers .sp-field { min-height: 34px; padding: 0 10px; font-size: 14px; border-radius: 8px; width: 210px; max-width: 100%; }
+.sp-more { margin: 12px auto 2px; display: flex; }
+.sp-listen { display: flex; align-items: center; gap: 6px; }
+.sp-play { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--ink); display: grid; place-items: center; flex: none; }
+.sp-play.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
+.sp-step { width: 22px; height: 22px; border-radius: 6px; color: var(--sub); font: 600 17px/1 var(--body); display: grid; place-items: center; }
+.sp-step:disabled { opacity: 0.35; }
+.sp-pos { font: 400 10.5px/1 var(--mono); color: var(--sub); white-space: nowrap; font-variant-numeric: tabular-nums; }
+.sp-play-glyph { width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 2px; }
+.sp-stop-glyph { width: 8px; height: 8px; background: currentColor; border-radius: 1.5px; }
+.sp-confirm { border: 1px solid var(--panel-border); border-radius: 10px; padding: 12px; margin: 8px 0; background: var(--qopen); }
+.sp-sheet { border-top: 1px solid var(--sp-line); margin-top: 6px; padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
+.sp-sheet p { margin: 0; }
+.sp-sheet-title { font: 500 22px/1.2 var(--display); margin: 2px 0 2px; color: var(--ink); }
+.sp-sheet-foot { border-top: 1px solid var(--sp-line); padding-top: 10px; margin-top: 4px; }
+.sp-toggle { margin: 0; font-size: 13.5px; align-items: flex-start; }
+.sp-toggle input { margin-top: 1px; flex: none; }
+.sp-nm, .sp-batch { border: 1px solid var(--panel-border); border-radius: 9px; padding: 11px 13px; display: flex; flex-direction: column; gap: 5px; background: var(--panel); }
+.sp-batch { background: var(--qopen); }
+.sp-nm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; }
+.sp-fold summary { cursor: pointer; font-size: 13px; font-weight: 600; padding: 6px 0; }
+.sp-fold[open] summary { margin-bottom: 4px; }
+.sp-outcome { padding: 6px 0; border-top: 1px solid var(--sp-line); }
+
+/* ── Voices (the directory) ──────────────────────────── */
+.sp-dnotice { padding: 9px 12px; border-radius: 9px; font-size: 13px; color: var(--sub); background: color-mix(in srgb, var(--accent) 7%, transparent); margin: 0 0 8px; }
+.sp-dnotice.stale { background: var(--amber-bg); }
+.sp-dir { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 14px; overflow: hidden; }
+.sp-dhead, .sp-vrow { display: grid; grid-template-columns: 38px minmax(0, 1fr) 64px 86px 70px 70px 88px 12px; gap: 12px; align-items: center; padding: 0 14px; }
+.sp-dhead { padding-top: 10px; padding-bottom: 10px; font: 600 9px/1 var(--mono); letter-spacing: 0.06em; color: var(--tertiary); border-bottom: 1px solid var(--sp-line); }
+.sp-dhead .sp-vname { grid-column: 1 / 3; }
+.sp-dhead > span:not(.sp-vname) { text-align: right; }
+.sp-vrow { width: 100%; padding-top: 12px; padding-bottom: 12px; text-align: left; color: inherit; border-top: 1px solid var(--sp-line); }
+.sp-dhead + .sp-vrow { border-top: 0; }
+.sp-vrow:hover { background: var(--qopen); }
+.sp-vglyph { width: 38px; height: 38px; }
+.sp-vname { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
+.sp-vtitle { display: flex; align-items: center; gap: 6px; min-width: 0; }
+.sp-vtitle b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sp-vsrc { font-size: 12px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sp-vstack { display: none; font: 400 11px/1.4 var(--mono); color: var(--sub); }
+.sp-metric { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; }
+.sp-metric b { font: 600 12px/1.2 var(--mono); color: var(--ink); white-space: nowrap; }
+.sp-metric small { font-size: 10px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
+.sp-nomatch { padding: 24px 16px; text-align: center; color: var(--sub); font-size: 13.5px; }
+.sp-voice { max-width: 980px; }
+.sp-vhead { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0 6px; }
+.sp-vhead .cx-glyph { width: 46px; height: 46px; }
+.sp-vh-title { font: 600 22px/1.2 var(--body); margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; overflow-wrap: anywhere; }
+.sp-mcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0 12px; }
+.sp-mcard { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px; padding: 13px; min-height: 76px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
+.sp-mcard b { font: 600 19px/1.1 var(--body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.sp-mcard small { font-size: 11px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.sp-icards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
+.sp-icard { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 13px; padding: 15px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--sub); min-height: 94px; }
+.sp-icard b { font-size: 14px; color: var(--ink); font-weight: 600; }
+.sp-warnline { color: var(--ink); font-size: 12px; margin-top: 2px; }
+.sp-hist-label { display: block; margin: 0 0 8px; letter-spacing: 0.11em; color: var(--sub); }
+#pane-speakers .sp-arow { grid-template-columns: 32px minmax(0, 1fr) auto 12px; align-items: center; }
+#pane-speakers .sp-arow .chev { margin-top: 0; }
+#pane-speakers .sp-arow .sp-mono { display: block; font-size: 11px; }
+.sp-amber { color: var(--amber); background: var(--amber-bg); }
+.sp-match { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
+.sp-match b { font: 600 12px/1 var(--mono); }
+.sp-match small { font-size: 10.5px; color: var(--sub); }
+
+/* ── the review ──────────────────────────────────────── */
+.sp-review { max-width: 980px; }
+.sp-rhead { align-items: flex-start; }
+.sp-rtitle { min-width: 0; flex: 1 1 320px; }
+.sp-display { font: 500 22px/1.2 var(--display) !important; overflow-wrap: anywhere; }
+.sp-racts { justify-content: flex-end; }
+.sp-policy { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px; padding: 10px 14px 12px; margin-bottom: 12px; }
+.sp-policy .field { min-height: 32px; width: auto; font-size: 13px; padding: 0 30px 0 10px; border-radius: 8px; background-position: calc(100% - 16px) 13px, calc(100% - 11px) 13px; }
+.sp-tl { padding: 4px 0 14px; }
+.sp-tl-label { display: block; letter-spacing: 0.14em; margin-bottom: 6px; }
+.sp-bar { display: flex; height: 34px; border-radius: 3px; overflow: hidden; touch-action: pan-y; cursor: crosshair; }
+.sp-bar span { flex: 1 1 0; min-width: 0; }
+.sp-bar span.dim { opacity: 0.4; }
+.sp-tl-read { min-height: 20px; margin-top: 5px; font-size: 13px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
+.sp-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 3px 8px; margin-top: 4px; }
+.sp-leg { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--sub); text-align: left; min-height: 24px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.sp-leg.dim { color: var(--tertiary); }
+.sp-leg i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
+.sp-pad { padding: 0 0 12px; }
+.sp-sbar { border-top: 1px solid var(--sp-line); padding: 10px 0; }
+.sp-voices { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 14px; overflow: hidden; margin-bottom: 14px; }
+.sp-voice-row { padding: 10px 16px; display: flex; flex-direction: column; gap: 6px; }
+.sp-voices > .sp-voice-row + .sp-voice-row, .sp-voices > .sp-zone + .sp-voice-row, .sp-voices > .sp-fold { border-top: 1px solid var(--sp-line); }
+.sp-vr-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
+.sp-vr-head b { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
+.sp-dimname { color: var(--sub); }
+.sp-you { font: 400 10px/1 var(--mono); padding: 2px 6px; border-radius: 8px; background: var(--green-bg); color: var(--green); }
+.sp-ramp { display: inline-flex; align-items: center; gap: 5px; }
+.sp-ramp-bars { display: inline-flex; gap: 1.5px; }
+.sp-ramp-bars i { width: 6px; height: 7px; border-radius: 1px; background: var(--sp-line); }
+.sp-ramp-bars i.lit { background: var(--amber); }
+.sp-phrases { display: flex; flex-direction: column; gap: 4px; padding-left: 9px; border-left: 2px solid var(--sp-line); }
+.sp-phrases.loose { border-left-style: dashed; }
+.sp-phrase { display: flex; align-items: center; gap: 8px; }
+.sp-ptext { flex: 1 1 auto; font-size: 13.5px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
+.sp-pplay { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: var(--sub); flex: none; }
+.sp-pplay .sp-play-glyph { border-left-width: 7px; border-top-width: 4.5px; border-bottom-width: 4.5px; }
+.sp-pplay.on { color: var(--accent); }
+.sp-pplay-space { width: 24px; flex: none; }
+.sp-closest { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--sub); }
+.sp-closest .sp-tert { margin: 0; font-size: 12px; }
+.sp-naming { display: flex; flex-direction: column; gap: 6px; }
+.sp-naming .sp-field { width: 100%; max-width: 360px; }
+.sp-scope { gap: 16px; }
+.sp-opts { display: flex; flex-direction: column; gap: 4px; max-width: 360px; }
+.sp-opts:empty { display: none; }
+.sp-opt { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 30px; padding: 3px 8px; border-radius: 6px; background: var(--qopen); border: 1px solid var(--panel-border); font-size: 13.5px; color: var(--ink); text-align: left; }
+.sp-opt:disabled { opacity: 0.55; }
+.sp-vacts .cx-btn { height: 30px; font-size: 13px; }
+.sp-clip { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
+.sp-suggest { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: 13px; }
+.sp-suggest .sp-strong { flex: 1 1 160px; }
+.sp-merged .sp-mhead { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; color: inherit; min-height: 28px; }
+.sp-merged .sp-mhead b { font-size: 14.5px; font-weight: 600; }
+.sp-disc { width: 0; height: 0; border-left: 6px solid var(--sub); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.15s; flex: none; }
+.sp-disc.open { transform: rotate(90deg); }
+.sp-members { margin-left: 4px; border-left: 1px solid var(--sp-line); }
+.sp-members .sp-voice-row { padding-left: 12px; padding-right: 0; }
+.sp-members .sp-voice-row + .sp-voice-row { border-top: 1px solid var(--sp-line); }
+.sp-short { padding: 6px 16px; }
+.sp-short .sp-voice-row { padding-left: 0; padding-right: 0; border-top: 1px solid var(--sp-line); }
+.sp-zone { padding: 0 16px 12px; display: flex; flex-direction: column; gap: 8px; }
+.sp-review > .sp-zone { padding: 0 0 12px; }
+.sp-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 9px 11px; border-radius: 9px; background: var(--amber-bg); font-size: 13px; color: var(--ink); }
+.sp-progress { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sub); }
+.sp-ccard { border: 1px solid var(--panel-border); border-radius: 11px; padding: 12px 14px; background: var(--qopen); display: flex; flex-direction: column; gap: 4px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 14%, transparent); }
+.sp-ccard > b { font-size: 14px; }
+.sp-ccard p { margin: 2px 0; }
+.sp-ccard .sp-inline { margin-top: 6px; }
+.sp-writeup { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px 20px; }
+.sp-sec-body { white-space: pre-wrap; font-size: 13.5px; line-height: 1.5; color: var(--ink); margin-top: 3px; overflow-wrap: anywhere; }
+.sp-writeup-note { font-size: 13px; padding: 4px 2px 18px; }
+
+/* ── phone (closed Duo) ──────────────────────────────── */
+@media (max-width: 599px) {
+  .sp-pills-side { display: none !important; }
+  #pane-speakers .sp-mrow { grid-template-columns: 32px minmax(0, 1fr) 12px; }
+  #pane-speakers .sp-tools { width: 100%; }
+  #pane-speakers .sp-search { max-width: none; flex-basis: 100%; }
+  #pane-speakers .sp-search .field { min-height: 40px; font-size: 16px; }
+  .sp-select select.field { min-height: 38px; font-size: 14px; background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px; }
+  #pane-speakers .sp-text { min-height: 36px; font-size: 14.5px; }
+  #pane-speakers .sp-field { min-height: 40px; font-size: 16px; width: 100%; }
+  #pane-speakers .cx-switch { gap: 12px; flex-wrap: wrap; }
+  .sp-card { padding: 12px; border-radius: 12px; }
+  .sp-held-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
+  .sp-held-acts { justify-content: flex-start; }
+  .sp-play { width: 36px; height: 36px; }
+  .sp-step { width: 36px; height: 36px; font-size: 20px; }
+  .sp-dhead { display: none; }
+  .sp-vrow { grid-template-columns: 38px minmax(0, 1fr) 12px; }
+  .sp-vrow .sp-metric { display: none; }
+  .sp-vstack { display: block; }
+  .sp-mcards { grid-template-columns: 1fr 1fr; }
+  .sp-icards { grid-template-columns: 1fr; }
+  .sp-voice-row { padding: 10px 12px; }
+  .sp-zone { padding: 0 12px 12px; }
+  .sp-pplay { width: 36px; height: 36px; }
+  .sp-pplay-space { width: 36px; }
+  .sp-opt { min-height: 40px; font-size: 15px; }
+  .sp-vacts .cx-btn { height: 36px; font-size: 14px; }
+  .sp-leg { min-height: 30px; }
+  .sp-racts { justify-content: flex-start; }
+  .sp-rhead .cx-btn { height: 36px; }
+  .sp-policy .field { min-height: 38px; font-size: 14px; background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px; }
+}
+@media (min-width: 600px) {
+  .sp-pills-in { display: none !important; }
+}
+/* The open Duo has room for the table, but not for every metric column at full width. */
+@media (min-width: 600px) and (max-width: 899px) {
+  .sp-dhead, .sp-vrow { grid-template-columns: 34px minmax(0, 1fr) 54px 78px 58px 62px 78px 10px; gap: 8px; padding-left: 10px; padding-right: 10px; }
+  .sp-dhead .c-count, .sp-dhead .c-samples, .sp-dhead .c-conf, .sp-dhead .c-seen { font-size: 8.5px; }
+}
+.sp-voice-row > .cx-btn, .sp-voice-row > .sp-text, .sp-naming > .sp-text { align-self: flex-start; }
+@media (max-width: 599px) {
+  #pane-speakers .sp-controls > .cx-switch { flex-wrap: nowrap; gap: 12px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
+  #pane-speakers .sp-controls > .cx-switch::-webkit-scrollbar { display: none; }
+  #pane-speakers .sp-controls > .cx-switch .cx-switch-label { display: none; }
+  #pane-speakers .sp-controls > .cx-switch button { font-size: 14px; white-space: nowrap; flex: none; }
+  .sp-rtitle { flex-basis: 100%; }
+  #pane-speakers .sp-rtitle .sp-mono { font-size: 10.5px; }
+}
+.sp-ccard > p, .sp-pad p, .sp-sheet > p, .sp-confirm p { font-size: 13px; line-height: 1.45; }
+.sp-parts { margin: 0 0 12px; }