@gotcos/glasses-server 6.99.20 → 6.99.25

package/server/web-control/control.css

@@ -309,7 +309,7 @@ button.cx-set-row:hover { background: var(--qopen); }
 @media (min-width: 1100px) { .cx-set-name { font-size: 14px; } }
 @media (min-width: 1100px) { .rail-settings[aria-current='page'] { background: var(--rail-active); border: 1px solid var(--panel-border); } }
 
-/* Sign in another device: the QR the phone camera scans. */
+/* Use COS on another phone or browser: the QR the phone camera scans. */
 .device-code .qr { display: block; width: 200px; height: 200px; margin: 4px 0 8px; border-radius: 8px; border: 1px solid var(--panel-border); background: #fff; }
 .device-code .qr-hint { font-weight: 600; color: var(--ink); }
 

package/server/web-control/index.html

@@ -19,6 +19,8 @@
   <link rel="stylesheet" href="/control/panes/sessions.css">
   <link rel="stylesheet" href="/control/panes/cos-chat.css">
   <link rel="stylesheet" href="/control/panes/questions.css">
+  <link rel="stylesheet" href="/control/panes/memories.css">
+  <link rel="stylesheet" href="/control/panes/today-actions.css">
   <script src="/control/theme.js"></script>
 </head>
 <body>
@@ -57,7 +59,7 @@
         <div id="auth-code-block">
           <label for="auth-code">Sign-in code</label>
           <input id="auth-code" class="field code-field" type="text" inputmode="text" autocomplete="one-time-code" autocapitalize="characters" spellcheck="false" maxlength="9" placeholder="K7P3-QX9M">
-          <p class="auth-foot" style="margin-top:8px">Scan the QR with your phone's camera. A browser that is already signed in shows one under Settings, Sign in another device. COS Control on your Mac shows one under Open COS on your phone. Or type the code shown with the QR.</p>
+          <p class="auth-foot" style="margin-top:8px">Scan the QR with your phone's camera. A browser that is already signed in shows one under Settings, Use COS on another phone or browser. COS Control on your Mac shows one under Open COS on your phone. Or type the code shown with the QR.</p>
           <p class="auth-foot">The glasses pairing code does not work here.</p>
         </div>
         <div id="auth-token-block" class="hidden">
@@ -126,6 +128,7 @@
               <kbd class="kbd">⌘K</kbd>
             </button>
           </div>
+          <div id="today-pet" class="today-pet hidden"></div>
           <div id="today-rec"></div>
           <div class="today-cols">
           <div class="today-main">
@@ -148,13 +151,14 @@
           <section class="card hidden" id="intake-card" aria-labelledby="intake-title">
             <div class="panel-head">
               <h2 id="intake-title" class="panel-title">From today's meetings<span id="intake-count" class="count"></span></h2>
-              <button type="button" class="link-btn" data-goto="work/sort">Review</button>
+              <button type="button" class="link-btn" data-today="intake" data-goto="work/sort">Review</button>
             </div>
             <div id="intake-body" class="intake-body"></div>
           </section>
           <section class="card hidden" id="next-card" aria-labelledby="next-title">
-            <div class="panel-head"><h2 id="next-title" class="panel-title">Up next</h2></div>
+            <div class="panel-head"><h2 id="next-title" class="panel-title">Next up</h2></div>
             <div id="next-body" class="next-up"></div>
+            <div id="next-actions" class="next-actions"></div>
           </section>
           </div>
           </div>
@@ -207,9 +211,7 @@
         <section id="pane-dictation" class="pane hidden" data-title="Dictation"></section>
 
         <!-- MEMORIES -->
-        <section id="pane-memories" class="pane flush hidden" data-title="Memories">
-          <iframe id="memories-frame" class="memories-frame" title="Memories" src="about:blank"></iframe>
-        </section>
+        <section id="pane-memories" class="pane hidden" data-title="Memories"><!-- rendered by panes/memories.js --></section>
 
         <!-- SPEAKERS -->
         <section id="pane-speakers" class="pane wide hidden" data-title="Speakers"><!-- rendered by panes/speakers.js --></section>
@@ -263,13 +265,25 @@
   <script src="/control/app.js"></script>
   <script src="/control/shell.js"></script>
   <script src="/control/panes/cos-chat.js"></script>
-  <script src="/control/panes/messages.js"></script>
-  <script src="/control/panes/threads.js"></script>
-  <script src="/control/panes/speakers.js"></script>
-  <script src="/control/panes/meetings.js"></script>
-  <script src="/control/panes/work.js"></script>
-  <script src="/control/panes/dictation.js"></script>
-  <script src="/control/panes/settings.js"></script>
   <script src="/control/panes/questions.js"></script>
+  <!-- Loaded when first opened, then in the background once the page is idle (app.js ensurePane). -->
+  <script type="application/json" id="lazy-panes">{
+    "messages": "/control/panes/messages.js",
+    "threads": "/control/panes/threads.js",
+    "speakers": "/control/panes/speakers.js",
+    "meetings": "/control/panes/meetings.js",
+    "work": "/control/panes/work.js",
+    "dictation": "/control/panes/dictation.js",
+    "settings": "/control/panes/settings.js",
+    "memories": "/control/panes/memories.js",
+    "todayActions": "/control/panes/today-actions.js"
+  }</script>
+  <!-- The Knowledge graph explorer, loaded by panes/memories.js when the graph first opens. -->
+  <script type="application/json" id="memories-graph-assets">{
+    "css": "/control/memories/graph-explorer.css",
+    "d3": "/control/memories/d3.min.js",
+    "explorer": "/control/memories/graph-explorer.js",
+    "workspace": "/control/memories/memory-workspace.js"
+  }</script>
 </body>
 </html>

package/server/web-control/memories/memory-workspace.js

@@ -17,7 +17,7 @@
     var el=document.createElement('section');el.className='memory-investigation';
     var state={id:id(),revision:0,title:'Untitled investigation',nodes:[],links:[],anchors:[],waypoints:[],filters:{hops:3,direction:'undirected',avoid:[]},generation:null,paths:[]};
     var queuedFocus=null,editEpoch=0,lastFocus=null,selected=null,offsets={},history=[],controller=null,started=false,busy=false,requestSerial=0,saveIntents={},assertionIntent=null,separationIntent=null;
-    el.innerHTML='<div data-role="canvas" class="cgx-host"></div><p data-role="overview-status" class="muted" role="status"></p><details class="investigation-tools" data-role="advanced"><summary>Advanced investigation</summary><div class="graph-search row"><input type="search" id="graphQuery" aria-label="Find an entity" placeholder="Find a person or idea…"><button onclick="cosApp.graphSearch()">Find points</button><span id="graphSearchStatus" class="muted"></span></div><div class="source-card"><div class="row"><input data-role="title" aria-label="Investigation title" placeholder="Investigation title"><button data-action="save">Save investigation</button><button data-action="open">Open saved</button><button data-action="new">New</button></div>'+
+    el.innerHTML='<div data-role="canvas" class="cgx-host"></div><p data-role="overview-status" class="muted" role="status"></p><details class="investigation-tools" data-role="advanced"><summary>Advanced investigation</summary><div class="graph-search row"><input type="search" id="graphQuery" aria-label="Find an entity" placeholder="Find a person or idea…"><button type="button" data-role="find-points">Find points</button><span id="graphSearchStatus" class="muted"></span></div><div class="source-card"><div class="row"><input data-role="title" aria-label="Investigation title" placeholder="Investigation title"><button data-action="save">Save investigation</button><button data-action="open">Open saved</button><button data-action="new">New</button></div>'+
       '<p data-role="receipt" class="muted">Draft · saved separately from standing knowledge.</p><div data-role="matches" class="row"></div>'+
       '<div class="row"><b data-role="selected">Select a point</b><button data-action="start">Set start</button><button data-action="target">Set target</button><button data-action="waypoint">Add waypoint</button><button data-action="expand">Expand point</button><button data-action="avoid">Avoid point</button><button data-action="hide">Hide point</button><button data-action="undo">Undo canvas edit</button></div>'+
       '<p data-role="anchors"></p><div data-role="waypoints" class="row"></div><div class="row"><label>Total hops <select data-role="hops" aria-label="Total hop limit"><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option></select></label><label>Traversal <select data-role="direction" aria-label="Relationship direction"><option value="undirected">Undirected discovery</option><option value="directed">Known direction only</option></select></label><label>Known valid on <input data-role="valid" aria-label="Known valid on" type="date"></label><button data-action="paths">Find connections</button><button data-action="refresh">Review generation changes</button><button data-action="separate">Keep anchors separate</button></div>'+

package/server/web-control/panes/cos-chat.css

@@ -189,6 +189,10 @@
 .cc-prep-add { position: relative; cursor: pointer; }
 .cc-prep-add:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
 .cc-prep-acts .cx-btn { height: 40px; }
+@media (max-width: 480px) {
+  .cc-prep-acts .cx-btn { height: 44px; min-width: 44px; }
+  .cc-prep-head-acts button { min-height: 44px; }
+}
 .cc-prep-note { margin: 0; font-size: 13px; }
 .cc-prep-note[hidden] { display: none; }
 .cc-prep.dragging .cc-prep-panel { outline: 2px dashed var(--accent); outline-offset: 4px; }

package/server/web-control/panes/cos-chat.js

@@ -874,11 +874,11 @@
         throw err;
       });
     };
-    var prepare = a.threaded ? threadPlan().then(function (plan) {
+    var prepare = (a.threaded ? threadPlan().then(function (plan) {
       if (plan.sessionId) body.sessionId = plan.sessionId;
       else if (plan.digest) body.reference = { query: THREAD_REF, response: plan.digest };
       a.carried = plan.sessionId ? '' : plan.digest ? 'summary' : 'plain';
-    }) : Promise.resolve();
+    }) : Promise.resolve()).then(function () { withContext(body, opts.context); });
     prepare.then(function () { return admit(true); }).then(function (d) {
       var job = d && d.job; if (!job) throw new Error('The Mac did not take the question.');
       take(a, job);
@@ -897,6 +897,15 @@
     });
     return a;
   }
+  // An Ask from Today carries what Today shows (app.js askCos, panes/today-actions.js summary) as the quoted reference,
+  // after a carried thread summary when there is one. Bounded, and only on the Ask it was given to.
+  var TODAY_REF = 'What Today in COS Control shows right now', CONTEXT_MAX = 6000;
+  function withContext(body, context) {
+    var text = typeof context === 'string' ? context.trim().slice(0, CONTEXT_MAX) : '';
+    if (!text) return;
+    if (body.reference) body.reference = { query: body.reference.query + ', then ' + TODAY_REF.charAt(0).toLowerCase() + TODAY_REF.slice(1), response: body.reference.response + '\n\n' + text };
+    else body.reference = { query: TODAY_REF, response: text };
+  }
   function take(a, job) {
     a.jobId = job.jobId; a.status = job.status || a.status;
     if (job.globalMsgNum) a.no = job.globalMsgNum;
@@ -932,11 +941,12 @@
     api('/api/inbox/feed?limit=100').then(function (d) { C.items = (d && d.items) || []; paintFeed(false); markReadIfShown(); }, function () {});
   }
   // The Ask sheet (app.js askCos) hands its words here, so the answer streams in the chat instead of vanishing.
-  function askFromSheet(text) {
+  function askFromSheet(text, extra) {
     return ensureCaps().then(function (caps) {
       if (!caps || !caps.jobs) { var off = new Error('Ask needs the durable query jobs switch on your Mac.'); off.code = 'durable_query_jobs_disabled'; throw off; }
       return new Promise(function (resolve, reject) {
-        submitAsk(String(text || '').trim(), null, function (ok) { if (ok) resolve(['cos']); else reject(new Error('Not sent. The question is in Ask COS; try again there.')); });
+        submitAsk(String(text || '').trim(), null, function (ok) { if (ok) resolve(['cos']); else reject(new Error('Not sent. The question is in Ask COS; try again there.')); },
+          extra && extra.context ? { context: extra.context } : undefined);
       });
     });
   }
@@ -1722,6 +1732,18 @@
     classify: classify, uploadMedia: uploadMedia, uploadErrorText: uploadErrorText, uuid: uuid,
     // 6.99.19: Prep. meetings.js reads the capability from here (one /api/health read for the page).
     prepCaps: prepCaps,
+    // Today's Next up (app.js prepNext): Prep me for that meeting, as the chat's own Prep me does. With Prep on the Mac
+    // the Prep composer opens (it paints when the chat mounts; the same meeting reopens the same draft); without it,
+    // the plain Ask. Resolves to 'prep', 'ask' or '' (neither is on).
+    prepFor: function (title, startsAt) {
+      return ensureCaps().then(function () {
+        var t = String(title || '').trim() || 'my next meeting';
+        var item = { id: 'today-next:' + (startsAt || '') + ':' + t, title: t, prep: { title: t, startsAt: startsAt || null } };
+        if (prepOn()) { openPrep(item); return 'prep'; }
+        if (C.caps && C.caps.jobs) { submitAsk('Prep me for ' + t, ''); return 'ask'; }
+        return '';
+      });
+    },
     // The Prep server id to name on a write: the newest from capabilities.prep or any Prep answer (meetings.js reports its own).
     prepInstance: function () { return PREP_INST; }, notePrepInstance: function (id) { if (typeof id === 'string' && id) PREP_INST = id; },
     _prep: function () { return P; }, _openPrep: openPrep, _prepHtml: function () { return P ? prepPanelHtml(P) : ''; }, _addPrepFiles: addPrepFiles,

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

@@ -264,7 +264,7 @@
 .mt-lempty { color: var(--sub); text-align: center; font-size: 14px; padding: 26px 8px; margin: 0; }
 .mt-jump { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); box-shadow: var(--shadow); background: var(--panel); }
 .mt-jump[hidden] { display: none; }
-/* The recording bar (Control's LiveRecordingBar): one row, 50 px, never wraps. Under 560 px of bar Add file is the
+/* The recording bar (Control's LiveRecordingBar): one row, 50 px (56 on phones), never wraps. Under 560 px of bar Add file is the
    paperclip alone; under 340 px the still glyph takes the strip's place. */
 .mt-lbarslot { container-type: inline-size; min-height: 50px; margin-top: 8px; }
 .mt-lbar { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 8px 0 14px; border: 1px solid var(--panel-border);
@@ -287,7 +287,13 @@
 .mt-addfile .icon { width: 14px; height: 14px; }
 .mt-lbar .mt-side-note { flex: none; }
 @container (max-width: 559px) { .mt-addlabel { display: none; } .mt-addfile { padding-left: 10px; padding-right: 10px; } }
-@container (max-width: 339px) { .mt-meter { visibility: hidden; } .mt-glyph { visibility: visible; } .mt-meterwrap { flex: 0 0 40px; } }
+@container (max-width: 339px) {
+  .mt-lbar { gap: 4px; padding-left: 8px; }
+  .mt-meter { visibility: hidden; }
+  .mt-glyph { visibility: visible; }
+  .mt-meterwrap { flex: 0 0 10px; min-width: 10px; }
+  .mt-lbar .mt-side-note { flex: 1; min-width: 0; }
+}
 .mt-lbarslot > .mt-stopline { margin: 8px 4px 0; }
 .mt-lbarslot > .mt-confirm { margin-top: 8px; }
 /* A file dragged over the pane: the column is outlined. Drawn only, so it moves nothing. */
@@ -327,6 +333,13 @@
 .mt-preplist li:last-child { border-bottom: 0; }
 .mt-preplist .mt-prepline-text { -webkit-line-clamp: 2; color: var(--ink); line-height: 1.3; }
 .mt-preplist .cx-btn { flex: none; white-space: nowrap; height: 34px; }
+@media (max-width: 480px) {
+  .mt-lbar { height: 56px; }
+  .mt-lbar .cx-btn { min-height: 44px; min-width: 44px; }
+  .mt-prepslot { height: 112px; }
+  .mt-prepline .cx-btn { height: 44px; }
+  .mt-preplist li { padding-block: 4px; }
+}
 /* The saved meeting's Prep: what it focused on and its files. */
 #mt-dprep:empty { display: none; }
 .mt-prep { margin: 12px 0; display: grid; gap: 10px; }

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

@@ -0,0 +1,291 @@
+/* COS Control Web: Memories pane styles, on top of control.css. Control's Memories page in the app's own tokens: a
+   list of learning beside a reader from 760px (the split in app.css), a pushed reader below it, a text switch with a
+   gold rule for the views, and the timeline Control draws down the left of a lesson. Nothing here is fixed to the
+   bottom of the screen, and nothing is wider than the screen. */
+
+#pane-memories { max-width: 1240px; }
+.mm { min-width: 0; }
+.mm-controls { margin: 12px 0 6px; }
+.mm-tabs { display: flex; flex-wrap: wrap; gap: 2px 18px; }
+.mm-counts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 4px 2px 12px; font-size: 13px; line-height: 1.5; color: var(--sub); }
+.mm-counts b { color: var(--ink); font-weight: 600; }
+.mm-dot { color: var(--tertiary); }
+.mm-foot { margin: 18px 2px 0; font-size: 12px; color: var(--tertiary); overflow-wrap: anywhere; }
+.mm-icon-btn { width: 36px; justify-content: center; padding: 0; }
+/* On a phone the top bar already says Memories, and the counts line carries Memory settings and Refresh, so the
+   hero steps aside and the list starts higher on the closed Duo (Control's page did the same for web phones). */
+.mm-phone-only { display: none; }
+@media (max-width: 599px) {
+  .mm-hero { display: none; }
+  .mm-phone-only { display: inline; }
+  .mm-controls { margin-top: 2px; }
+}
+.mm-link { display: inline; padding: 0; font: inherit; font-weight: 600; color: var(--accent); text-align: left; }
+.mm-link:disabled { opacity: 0.45; }
+.mm-muted { color: var(--sub); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
+.mm-bad { color: var(--hot); font-size: 13.5px; overflow-wrap: anywhere; }
+.mm-ok { color: var(--green); }
+.mm-warn { color: var(--amber); font-size: 13px; }
+.mm-split { margin-top: 2px; }
+.mm-split, .mm-list, .mm-reader { min-width: 0; }
+
+/* A reader on a narrow screen is a pushed page: the header, views and counts step aside. */
+@media (max-width: 759px) {
+  #pane-memories.reading .mm-hero, #pane-memories.reading .mm-controls, #pane-memories.reading .mm-counts { display: none; }
+}
+
+/* ── list ─────────────────────────────────────────────── */
+.mm-group { margin: 14px 4px 8px; align-items: baseline; }
+.mm-group:first-child { margin-top: 4px; }
+.mm-group span:last-child { font-weight: 500; font-size: 13px; }
+.mm-group .mm-link { font-size: 13px; }
+.mm-group-note { margin: -2px 4px 8px; font-size: 12.5px; line-height: 1.45; color: var(--sub); }
+.mm-row { display: grid; grid-template-columns: minmax(0, 1fr) 12px; gap: 10px; align-items: center; width: 100%; padding: 12px 14px; text-align: left; color: inherit; position: relative; }
+.mm-row + .mm-row::before { content: ''; position: absolute; top: 0; left: 14px; right: 0; height: 1px; background: var(--hairline); }
+.mm-row:hover { background: var(--qopen); }
+.mm-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.mm-row[aria-selected='true'] { background: var(--qopen); box-shadow: inset 3px 0 0 var(--gold); }
+.mm-row-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+.mm-row-title { font: 600 15px/1.35 var(--body); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
+.mm-row-what { font-size: 12.5px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mm-facts { font-size: 12px; line-height: 1.35; color: var(--tertiary); overflow-wrap: anywhere; }
+.mm-kind { color: var(--tint); font-weight: 600; }
+.mm-status { font-size: 12.5px; line-height: 1.4; color: var(--sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
+.mm-status.ok { color: var(--green); }
+.mm-status.warn { color: var(--amber); }
+.mm-status.bad { color: var(--hot); }
+.mm-state { display: flex; flex-direction: column; gap: 4px; padding: 18px 16px; font-size: 14px; line-height: 1.45; color: var(--sub); }
+.mm-state strong { color: var(--ink); font-size: 15px; }
+.mm-state-act { margin-top: 8px; }
+.mm-list .skel-row:first-of-type { border-top: 1px solid var(--row-border); }
+.mm-more { margin: 10px 0 4px; }
+.mm-more-top { margin: 0 0 8px; }
+.mm-search { max-width: none; margin: 4px 0 8px; }
+.mm-search .field { width: 100%; }
+.mm-aside-note { margin: 14px 4px 0; font-size: 13px; color: var(--sub); line-height: 1.45; }
+.mm-aside-note h3 { margin: 0 0 4px; font: 600 14px/1.3 var(--body); color: var(--ink); overflow-wrap: anywhere; }
+.mm-aside-note p { margin: 0 0 6px; }
+@media (min-width: 760px) {
+  .mm-row-title { font-size: 13.5px; }
+  .mm-row { padding: 10px 12px; }
+  .mm-list .mm-group:first-child { margin-top: 0; }
+}
+
+/* ── reader ───────────────────────────────────────────── */
+.mm-reader-head { padding: 4px 0 12px; border-bottom: 1px solid var(--hairline); margin-bottom: 14px; }
+.mm-title { font: 500 23px/1.22 var(--display); letter-spacing: -0.005em; margin: 0; color: var(--ink); overflow-wrap: anywhere; }
+.mm-sub { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--sub); overflow-wrap: anywhere; }
+.mm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
+.mm-actions:first-child { margin-top: 0; }
+.mm-reader-state { display: flex; flex-direction: column; gap: 4px; padding: 26px 4px; color: var(--sub); font-size: 14.5px; }
+.mm-reader-state strong { color: var(--ink); font-size: 16px; }
+.mm-reader .cx-notice { margin: 0 0 12px; overflow-wrap: anywhere; }
+.mm-timeline { position: relative; padding-left: 22px; }
+.mm-timeline::before { content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; border-radius: 1px; background: var(--hairline); }
+.mm-step { position: relative; padding: 0 0 18px; min-width: 0; }
+.mm-step::before { content: ''; position: absolute; left: -21px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--panel); border: 2px solid var(--tint); }
+.mm-step.last { padding-bottom: 4px; }
+.mm-step-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin-bottom: 6px; }
+.mm-step-head h3 { margin: 0; font: 600 15px/1.3 var(--body); color: var(--ink); }
+.mm-step-meta { font-size: 12px; color: var(--tertiary); overflow-wrap: anywhere; }
+.mm-step-body { font-size: 14.5px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
+.mm-step-body p { margin: 0 0 8px; }
+.mm-step-body p:last-child { margin-bottom: 0; }
+.mm-quote { margin: 0 0 8px; padding: 10px 12px; border-left: 3px solid var(--tint); border-radius: 0 10px 10px 0; background: var(--qopen); font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
+.mm-label { display: block; font: 600 12px/1.3 var(--body); color: var(--sub); margin-bottom: 3px; }
+.mm-change { display: grid; gap: 8px; margin-bottom: 8px; }
+.mm-change > div { padding: 10px 12px; border-radius: 10px; background: var(--qopen); white-space: pre-wrap; }
+.mm-change .after { background: var(--green-bg); }
+.mm-effect { margin-top: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--panel-border); }
+.mm-effect ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13.5px; }
+.mm-effect li b { display: block; font: 600 12px/1.3 var(--body); color: var(--sub); }
+.mm-check { font-weight: 600; color: var(--green); }
+@media (max-width: 599px) { .mm-title { font-size: 21px; line-height: 1.25; } }
+@media (min-width: 1100px) { .mm-title { font-size: 26px; } }
+
+/* ── Knowledge ────────────────────────────────────────── */
+.mm-card { margin: 0 0 12px; }
+.mm-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin-bottom: 6px; }
+.mm-card-title { margin: 0; font: 600 15.5px/1.3 var(--body); color: var(--ink); overflow-wrap: anywhere; }
+.mm-card p { margin: 6px 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
+.mm-card h4 { margin: 0 0 4px; font: 600 14px/1.35 var(--body); overflow-wrap: anywhere; }
+.mm-sub-title { margin: 16px 0 6px; font: 600 14px/1.3 var(--body); color: var(--ink); }
+.mm-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
+.mm-inline > .field { flex: 1 1 200px; min-width: 0; min-height: 40px; padding: 0 12px; font-size: 16px; border-radius: 9px; }
+.mm-inline > .cx-btn { min-height: 40px; height: 40px; }
+.mm-wrap { align-items: flex-end; }
+.mm-pick { display: inline-flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--sub); min-width: 0; }
+.mm-pick > span { white-space: nowrap; }
+.mm-block > span { white-space: normal; }
+.mm-pick > .field { min-height: 40px; padding: 0 12px; font-size: 16px; border-radius: 9px; color: var(--ink); }
+.mm-pick > select.field { padding-right: 34px; background-position: calc(100% - 18px) 17px, calc(100% - 13px) 17px; }
+.mm-pick > textarea.field { padding: 10px 12px; min-height: 80px; }
+.mm-block { display: flex; margin: 8px 0; }
+.mm-num { width: 120px; }
+.mm-progress { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: var(--qopen); border: 1px solid var(--panel-border); font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; }
+.mm-progress ul { margin: 6px 0; padding-left: 18px; font-size: 12.5px; }
+.mm-progress pre, .mm-pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 400 11.5px/1.45 var(--mono); background: var(--qopen); padding: 10px; border-radius: 8px; max-height: 240px; overflow: auto; }
+.mm-try { margin: 8px 0 2px; }
+.mm-tries { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
+.mm-tries .mm-link { font-size: 13.5px; overflow-wrap: anywhere; }
+.mm-answer { margin: 12px 0 8px; padding: 12px 14px; border-radius: 10px; background: var(--qopen); font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; max-height: 60vh; overflow-y: auto; }
+.mm-answer h4 { margin: 10px 0 4px; font: 600 14.5px/1.3 var(--body); }
+.mm-answer p { margin: 0 0 8px; }
+.mm-answer ul { margin: 0 0 8px; padding-left: 1.2em; }
+.mm-answer code { font: 400 13px/1.4 var(--mono); background: var(--panel); padding: 0 3px; border-radius: 4px; }
+.mm-table { overflow-x: auto; max-width: 100%; }
+.mm-answer table { border-collapse: collapse; font-size: 13px; }
+.mm-answer th, .mm-answer td { border: 1px solid var(--panel-border); padding: 4px 8px; text-align: left; vertical-align: top; }
+.mm-refs ol { margin: 0; padding-left: 1.4em; font-size: 13px; line-height: 1.45; }
+.mm-refs li { margin-bottom: 4px; overflow-wrap: anywhere; }
+.mm-ref { color: var(--accent); font-variant-numeric: tabular-nums; }
+.mm-entity { margin-top: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--panel-border); }
+.mm-rels { margin: 6px 0; padding-left: 1.1em; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
+.mm-health { margin: 14px 0 0; }
+.mm-health > summary { cursor: pointer; padding: 12px 2px; font: 600 14px/1.3 var(--body); color: var(--ink); }
+.mm-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 8px 0; font-size: 13.5px; }
+.mm-grid dt { color: var(--sub); }
+.mm-grid dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }
+.mm-ingest { margin-top: 8px; }
+.mm-ingest .mm-pick { flex-direction: row; align-items: center; gap: 8px; flex: none; }
+.mm-ingest select.field { width: auto; min-width: 96px; }
+.mm-dup { padding: 10px 0; border-top: 1px solid var(--hairline); }
+.mm-dup-member { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 6px 0; font-size: 13.5px; overflow-wrap: anywhere; }
+.mm-dup-member > span { min-width: 0; flex: 1 1 200px; }
+@media (max-width: 599px) {
+  .mm-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
+  .mm-grid dt { margin-top: 8px; font-size: 12.5px; }
+}
+
+/* Set up Knowledge */
+.mm-setup { list-style: none; margin: 12px 0 8px; padding: 0; display: grid; gap: 14px; }
+.mm-setup-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
+.mm-setup-mark { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 var(--body); color: var(--sub); border: 1.5px solid var(--panel-border); background: var(--panel); }
+.mm-setup-step.done .mm-setup-mark { color: var(--green); border-color: var(--green); background: var(--green-bg); }
+.mm-setup-step.blocked .mm-setup-mark { color: var(--amber); border-color: var(--amber); }
+.mm-setup-body { min-width: 0; }
+.mm-setup-body h4 { margin: 3px 0 4px; font: 600 14.5px/1.3 var(--body); }
+.mm-setup-body p { margin: 4px 0; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
+.mm-checks, .mm-sources { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
+.mm-checks li { overflow-wrap: anywhere; }
+.mm-checks li.ok { color: var(--ink); }
+.mm-checks li.ok span { color: var(--green); }
+.mm-sources li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
+.mm-sources code { font: 400 12px/1.3 var(--mono); overflow-wrap: anywhere; min-width: 0; }
+.mm-picks { display: grid; gap: 8px; margin: 8px 0; }
+@media (min-width: 900px) { .mm-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+.mm-pick-card { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--panel-border); background: var(--panel); cursor: pointer; font-size: 13px; line-height: 1.4; }
+.mm-pick-card > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
+.mm-pick-card.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
+.mm-pick-card.off { opacity: 0.6; cursor: default; }
+.mm-pick-card input { margin-top: 2px; accent-color: var(--gold); }
+.mm-pick-card .cx-btn { align-self: flex-start; margin-top: 4px; }
+.mm-ask-strip { gap: 6px 16px; font-size: 13.5px; }
+
+/* ── the graph explorer, inside the reader and full screen ── */
+.mm-graph { margin: 14px 0 0; min-width: 0; }
+.mm-graph-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 12px; margin-bottom: 8px; }
+.mm-graph-text { min-width: 0; flex: 1 1 220px; }
+.mm-graph-text p { margin: 2px 0 0; }
+.mm-graph-host { min-width: 0; }
+.mm-graph-wait { padding: 30px 4px; }
+.mm-graph.full { position: fixed; inset: 0; z-index: 45; margin: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--page);
+  padding: calc(var(--safe-top) + 10px) calc(var(--gutter) + var(--safe-right)) calc(var(--safe-bottom) + 16px) calc(var(--gutter) + var(--safe-left)); }
+body.mm-graph-open { overflow: hidden; }
+/* The explorer's own palette (graph-explorer.css reads these), in the app's light and dark. */
+.mm-graph { --card: #ffffff; --raised: #eee8dd; --fg: #30312e; --muted: #74726d; --line: #ded6c8; --accent: #89662d; --green: #2f7952; --red: #a54732; --graph-bg: #faf8f3; }
+:root[data-theme='dark'] .mm-graph { --card: #261d16; --raised: #30271f; --fg: #f5f0e6; --muted: #bbae9a; --line: #473a2c; --accent: #c9a86e; --green: #92c6a1; --red: #e8a494; --graph-bg: #14100c; }
+/* The explorer sets its own stage height (and a smaller one when narrow); the pane decides it here instead. */
+.mm-graph { --mm-graph-h: min(64dvh, 560px); }
+.mm-graph.full { --mm-graph-h: max(320px, calc(100dvh - var(--safe-top) - var(--safe-bottom) - 230px)); }
+.mm-graph .cgx .cgx-stage { height: var(--mm-graph-h); min-height: 320px; isolation: isolate; }
+:root:not([data-theme='dark']) .mm-graph .cgx-panel { box-shadow: 0 4px 14px rgba(31, 23, 18, 0.08); }
+:root:not([data-theme='dark']) .mm-graph .cgx-result { border-bottom-color: var(--line); }
+/* The explorer and its investigation tools were drawn for Control's page, whose plain buttons, rows and fields had a
+   look of their own. The same base, at the lowest weight, so every explorer class still wins. */
+:where(.mm-graph) button { border: 1px solid var(--line); background: var(--card); color: var(--fg); border-radius: 7px; padding: 7px 12px; font: 500 13px/1.2 var(--body); }
+:where(.mm-graph) button:disabled { opacity: 0.45; }
+:where(.mm-graph) input, :where(.mm-graph) select { color: var(--fg); background: var(--card); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; font: 400 14px/1.3 var(--body); max-width: 100%; }
+.mm-graph .memory-investigation .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: auto; min-height: 0; padding: 0; margin: 8px 0; border: 0; grid-template-columns: none; }
+.mm-graph .memory-investigation .row:active { background: none; }
+.mm-graph .memory-investigation .row input { flex: 1 1 160px; min-width: 0; }
+.mm-graph .memory-investigation .muted { color: var(--muted); font-size: 12.5px; }
+.mm-graph .memory-investigation .source-card { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
+.mm-graph .memory-investigation > [data-role='overview-status'] { margin: 8px 2px; font-size: 12.5px; color: var(--sub); }
+.mm-graph .investigation-tools { border-top: 1px solid var(--hairline); margin-top: 10px; }
+.mm-graph .investigation-tools > summary { cursor: pointer; padding: 12px 2px; font: 600 13.5px/1.3 var(--body); color: var(--ink); }
+.mm-graph .investigation-tools details summary { cursor: pointer; font-size: 13px; overflow-wrap: anywhere; }
+.mm-graph .investigation-tools p { font-size: 12.5px; overflow-wrap: anywhere; }
+body.mm-modal-open .cgx-rail, body.mm-modal-open .cgx-railtoggle, body.mm-modal-open .cgx-pinned, body.mm-modal-open .cgx-dp, body.mm-modal-open .cgx-tip, body.mm-modal-open .cgx-hint { visibility: hidden; pointer-events: none; }
+
+/* ── sheets ───────────────────────────────────────────── */
+body.mm-modal-open { overflow: hidden; }
+.mm-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(23, 18, 14, 0.5); display: flex; align-items: stretch; justify-content: center; }
+.mm-backdrop.mm-enter { animation: fade 160ms ease; }
+.mm-modal { position: relative; width: 100%; display: flex; flex-direction: column; background: var(--page); color: var(--ink); min-height: 0; }
+.mm-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(var(--safe-top) + 10px) calc(var(--gutter) + var(--safe-right)) 10px calc(var(--gutter) + var(--safe-left)); border-bottom: 1px solid var(--hairline); flex: none; }
+.mm-modal-head h2 { margin: 0; font: 500 21px/1.2 var(--display); min-width: 0; overflow-wrap: anywhere; }
+.mm-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px calc(var(--gutter) + var(--safe-right)) calc(var(--safe-bottom) + 24px) calc(var(--gutter) + var(--safe-left)); font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
+.mm-modal-body > p { margin: 0 0 10px; }
+.mm-set { margin: 0 0 18px; }
+.mm-set .cx-list { margin: 8px 0; }
+.mm-set .cx-set-row .switch { grid-row: auto; grid-column: auto; flex: none; }
+.mm-set .switch:disabled { opacity: 0.5; }
+.mm-checkrow { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 10px; }
+.mm-checkrow .cx-check { margin: 0; font-size: 14px; }
+.mm-preview { min-height: 220px; font: 400 13px/1.5 var(--mono); padding: 12px; white-space: pre-wrap; }
+.mm-log { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 0; }
+.mm-log li { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--hairline); font-size: 13.5px; overflow-wrap: anywhere; }
+.mm-log li:first-child { border-top: 0; }
+.mm-merge { display: grid; gap: 10px; margin: 10px 0; }
+@media (min-width: 600px) { .mm-merge { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
+.mm-merge-col { border: 1px solid var(--panel-border); border-radius: 10px; padding: 10px 12px; min-width: 0; font-size: 13.5px; }
+.mm-merge-col.keep { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-bg); }
+.mm-merge-col h4 { margin: 0 0 2px; }
+.mm-merge-col p { margin: 6px 0; }
+.mm-merge-steps { margin: 8px 0; padding-left: 20px; font-size: 13.5px; }
+.mm-merge-steps li { opacity: 0.55; margin: 2px 0; }
+.mm-merge-steps li.done { opacity: 0.8; text-decoration: line-through; }
+.mm-merge-steps li.now { opacity: 1; font-weight: 600; }
+@media (min-width: 600px) {
+  .mm-backdrop { align-items: center; padding: 24px; }
+  .mm-modal { max-width: 680px; max-height: 86dvh; border-radius: 16px; border: 1px solid var(--panel-border); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); overflow: hidden; }
+  .mm-modal-head { padding: 14px 20px 12px; }
+  .mm-modal-body { padding: 16px 20px 22px; }
+}
+@media (prefers-reduced-motion: reduce) { .mm-backdrop.mm-enter { animation: none; } }
+
+/* ── Cues to rate and Rated cues (Control's cue review: one card at a time, then the rated list) ── */
+.split.mm-split.solo { display: block; }
+.split.mm-split.solo .split-list { position: static; max-height: none; overflow: visible; max-width: 820px; }
+.split.mm-split.solo .reader { display: none; }
+.mm-cue-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 6px 2px 12px; }
+.mm-cue-head p { margin: 3px 0 0; }
+.mm-cue-title { margin: 0; font: 500 24px/1.15 var(--display); color: var(--ink); letter-spacing: -0.01em; }
+.mm-cue { padding: 16px 18px; outline: none; }
+.mm-cue:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
+.mm-cue-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 10px; font-size: 12.5px; color: var(--sub); overflow-wrap: anywhere; }
+.mm-cue-meta b { color: var(--ink); font-weight: 600; }
+.mm-cue-left { margin-left: auto; }
+.mm-mono { font: 400 11.5px/1.3 var(--mono); }
+.mm-cue-text { margin: 0 0 10px; font-size: 17px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
+.mm-cue-text.small { font-size: 14.5px; }
+.mm-cue-sources { margin: 0 0 8px; font-size: 13px; }
+.mm-cue-sources ul { margin: 2px 0 0; padding-left: 1.1em; }
+.mm-cue-sources li { margin: 2px 0; overflow-wrap: anywhere; }
+.mm-cue-before { margin: 8px 0; padding: 10px 14px; border-radius: 9px; background: var(--qopen); font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
+.mm-cue-before p { margin: 4px 0 0; color: var(--ink); }
+.mm-verdicts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
+.mm-verdicts .cx-btn { min-width: 0; }
+.mm-key { font: 400 10.5px/1 var(--mono); opacity: 0.7; margin-right: 6px; }
+.mm-cue .mm-block { margin-top: 12px; }
+.mm-cue-next { margin: 10px 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.mm-cue-row { margin: 0 0 10px; padding: 12px 14px; }
+.mm-cue-row .mm-verdicts { margin: 0; }
+.mm-cue-rated { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; color: var(--accent); overflow-wrap: anywhere; }
+@media (max-width: 599px) {
+  .mm-keys-hint, .mm-key { display: none; }
+  .mm-cue { padding: 14px; }
+  .mm-cue-text { font-size: 16px; }
+  .mm-cue-title { font-size: 21px; }
+}