@bongos/core 1.24.11 → 1.24.13

package/modules/hall-ui/public/market-watch-item.states.json

@@ -0,0 +1,143 @@
+{
+  "_": "MARKET WATCH ITEM, the dossier (task 1004939; design of record docs/design/mocks/market-watch/item.html, option B). One read, GET /market-watch/items/:id. Against the kit's own stub it 404s with no item code, which the page reads as the module being off. The populated card and case file need the hall-preview harness with the module reported on; its market-watch__items__4.json (GitHub Copilot coding agent) and market-watch__items__37.json (NLnet Foundation) fixtures were built from the committed 2026-10-28 seed through the real shapes:\n\n  node scripts/hall-preview/server.js --port 4639 --fixture-me --modules-on market-watch\n  node modules/ui-design/kit/render.js --states modules/hall-ui/public/market-watch-item.states.json --base-in http://localhost:4639 --base-out http://localhost:4639",
+  "page": "/builders/market-watch-item?id=4",
+  "surface": "hall-ui",
+  "stub": {
+    "prefix": "/builders/"
+  },
+  "modeQuery": false,
+  "ignoreRequests": [
+    "/api/(gds|bongos)/"
+  ],
+  "ignoreConsole": [
+    "/api/(gds|bongos)/",
+    "\\b401\\b",
+    "\\b403\\b",
+    "\\b404\\b",
+    "\\b501\\b",
+    "Unauthorized",
+    "Forbidden",
+    "Not Found",
+    "Not Implemented",
+    "load failed"
+  ],
+  "states": {
+    "dossier": {
+      "auth": true,
+      "actions": [
+        [
+          "wait",
+          900
+        ],
+        [
+          "clickIfVisible",
+          "[data-craft-close]"
+        ],
+        [
+          "wait",
+          200
+        ]
+      ],
+      "expect": {
+        "visible": [
+          "#mw-wrap",
+          "#mw-card .mw-ring"
+        ]
+      }
+    },
+    "out": {
+      "auth": false,
+      "actions": [
+        [
+          "wait",
+          600
+        ],
+        [
+          "clickIfVisible",
+          "[data-craft-close]"
+        ]
+      ]
+    },
+    "propose": {
+      "auth": true,
+      "_": "Propose a change open: the four kinds, the score picker for a re-score, and the one-line reason.",
+      "actions": [
+        [
+          "wait",
+          900
+        ],
+        [
+          "clickIfVisible",
+          "[data-craft-close]"
+        ],
+        [
+          "wait",
+          200
+        ],
+        [
+          "click",
+          "[data-act=\"propose\"]"
+        ],
+        [
+          "wait",
+          300
+        ]
+      ],
+      "expect": {
+        "visible": [
+          "#mw-propose form"
+        ]
+      }
+    },
+    "filtered": {
+      "auth": true,
+      "_": "The case file filtered to one type through the kit filter bar (insight): one row on the seeded Copilot item.",
+      "actions": [
+        [
+          "wait",
+          900
+        ],
+        [
+          "clickIfVisible",
+          "[data-craft-close]"
+        ],
+        [
+          "wait",
+          200
+        ],
+        [
+          "select",
+          "#type",
+          "insight"
+        ],
+        [
+          "wait",
+          300
+        ]
+      ],
+      "expect": {
+        "visible": [
+          "#mw-filter select",
+          "#mw-log tr"
+        ]
+      }
+    }
+  },
+  "reducedMotion": {
+    "auth": true,
+    "actions": [
+      [
+        "wait",
+        900
+      ],
+      [
+        "clickIfVisible",
+        "[data-craft-close]"
+      ],
+      [
+        "wait",
+        200
+      ]
+    ]
+  }
+}

package/modules/hall-ui/public/market-watch-lib.js

@@ -0,0 +1,243 @@
+// market-watch-lib.js — the drawing shared by the Market Watch home and item pages
+// (task 1004939): the landscape scope, sparklines, confidence bars, type pills, the
+// next-sweep countdown and the propose-a-change dialog. Pure markup builders, so
+// tests/market_watch_pages.mjs runs them on the seed-built fixtures. Every string that
+// came from a member or the research goes through the hall's one escaper
+// (dom-utils.js, window.OTB.escapeHtml) where it becomes markup.
+(function (root) {
+  'use strict';
+
+  var esc = function (s) { return root.OTB.escapeHtml(s); };
+  // Only an http(s) link becomes an href; anything else renders as a dead link.
+  function safeHref(u) { return /^https?:\/\//i.test(String(u || '')) ? esc(u) : '#'; }
+  function itemHref(id) { return '/market-watch-item?id=' + encodeURIComponent(String(id)); }
+
+  var KIND_ICON = { competitor: '◎', partner: '✦', topic: '#' };
+  var KIND_PLURAL = { competitor: 'competitors', partner: 'partners', topic: 'topics' };
+  var CONF = ['', 'low', 'medium', 'high'];
+
+  function confDots(c) {
+    c = Number(c) || 0;
+    var bars = '';
+    for (var i = 1; i <= 3; i += 1) bars += '<i class="' + (i <= c ? 'on' : '') + '"></i>';
+    return '<span class="mw-conf' + (c === 1 ? ' mw-conf--low' : '') + '" title="confidence: ' + CONF[c] + '" aria-label="confidence ' + CONF[c] + '">' + bars + '</span>';
+  }
+  function typePill(t) { return '<span class="mw-pill mw-pill--' + esc(t) + '">' + esc(t) + '</span>'; }
+  function initials(name) {
+    var w = String(name || '').replace(/\(.*?\)/g, '').trim().split(/\s+/).filter(Boolean);
+    return ((w[0] || '?').charAt(0) + (w[1] ? w[1].charAt(0) : (w[0] || '').charAt(1))).toUpperCase();
+  }
+  function fmtDay(iso, long) {
+    var d = new Date(String(iso).slice(0, 10) + 'T12:00:00Z');
+    if (isNaN(d)) return '';
+    return d.toLocaleDateString('en-GB', long ? { day: 'numeric', month: 'short', year: 'numeric', timeZone: 'UTC' } : { day: 'numeric', month: 'short', timeZone: 'UTC' });
+  }
+
+  // spark(values, w, h, label) — the kit's sparkline (OTBKit.sparklineHtml), sized for a
+  // card row. A null point is a run that did not score the dimension: it is dropped rather
+  // than drawn as zero, which the kit would otherwise do.
+  function spark(vals, w, h, label) {
+    var pts = (vals || []).filter(function (v) { return v != null; });
+    return '<span class="mw-spark" style="width:' + Number(w) + 'px;height:' + Number(h) + 'px">'
+      + root.OTBKit.sparklineHtml(pts, { width: Number(w), height: Number(h), ariaLabel: label }) + '</span>';
+  }
+
+  // jitter — a fixed nudge per dot so two items on the same score do not hide each other.
+  function jit(i, k) { return ((i * 37 + k * 17) % 11 - 5) / 22; }
+
+  // scopeSvg(home, xKey, yKey) — the landscape: every competitor as a dot on the two
+  // dimensions the viewer picked; this week's reported items glow; "us" holds the far
+  // corner, as in the mockup.
+  function scopeSvg(home, xKey, yKey) {
+    var S = 600, p = 40;
+    var sx = function (v) { return p + (v / 10) * (S - 2 * p); };
+    var sy = function (v) { return S - p - (v / 10) * (S - 2 * p); };
+    var hot = {};
+    (home.hot || []).forEach(function (id) { hot[String(id)] = true; });
+    var label = function (k) { var a = (home.axes || []).filter(function (x) { return x.key === k; })[0]; return a ? a.label : k; };
+    var g = '<svg viewBox="0 0 ' + S + ' ' + S + '" role="img" aria-label="The landscape: ' + esc(label(xKey)) + ' across, ' + esc(label(yKey)) + ' up">';
+    g += '<defs><linearGradient id="mw-sg" x1="0" x2="1"><stop offset="0" stop-color="var(--accent)" stop-opacity="0"/><stop offset="1" stop-color="var(--accent)" stop-opacity=".22"/></linearGradient></defs>';
+    [1, 2, 3, 4].forEach(function (k) { g += '<circle cx="' + sx(10) + '" cy="' + sy(10) + '" r="' + (k * 130) + '" fill="none" stroke="var(--rule-soft)" stroke-dasharray="3 5"/>'; });
+    g += '<line x1="' + sx(5) + '" x2="' + sx(5) + '" y1="' + sy(0) + '" y2="' + sy(10) + '" stroke="var(--rule)"/><line y1="' + sy(5) + '" y2="' + sy(5) + '" x1="' + sx(0) + '" x2="' + sx(10) + '" stroke="var(--rule)"/>';
+    var cx0 = sx(10), cy0 = sy(10);
+    g += '<g class="mw-sweep" style="transform-origin:' + cx0 + 'px ' + cy0 + 'px"><path d="M' + cx0 + ' ' + cy0 + ' L' + (cx0 - 560) + ' ' + cy0 + ' A560 560 0 0 1 ' + (cx0 - 560 * Math.cos(0.5)).toFixed(1) + ' ' + (cy0 + 560 * Math.sin(0.5)).toFixed(1) + 'Z" fill="url(#mw-sg)" transform="rotate(180 ' + cx0 + ' ' + cy0 + ')"/></g>';
+    var plotted = 0;
+    (home.dots || []).forEach(function (d, i) {
+      var vx = xKey === 'overall' ? d.overall : d.scores[xKey];
+      var vy = yKey === 'overall' ? d.overall : d.scores[yKey];
+      if (vx == null || vy == null) return;
+      plotted += 1;
+      var cx = sx(Math.min(10, Math.max(0, Number(vx) + jit(i, 1)))).toFixed(1);
+      var cy = sy(Math.min(10, Math.max(0, Number(vy) + jit(i, 2)))).toFixed(1);
+      var h = !!hot[String(d.id)];
+      var r = (3 + (Number(d.overall) || 0) * 0.7).toFixed(1);
+      g += '<g class="mw-blip" data-id="' + esc(d.id) + '">';
+      if (h) g += '<circle class="mw-ping" cx="' + cx + '" cy="' + cy + '" r="6" fill="none" stroke="var(--accent)" stroke-width="2"/>';
+      g += '<circle cx="' + cx + '" cy="' + cy + '" r="' + r + '" fill="' + (h ? 'var(--accent)' : 'var(--ink-soft)') + '" fill-opacity="' + (h ? 1 : 0.4) + '"><title>' + esc(d.name) + ' · ' + esc(d.overall) + '/10 like us</title></circle>';
+      if (h || Number(d.overall) >= 6) g += '<text x="' + (Number(cx) + 9) + '" y="' + (Number(cy) + 4) + '" font-size="12" fill="var(--ink-soft)" font-family="var(--font-body)">' + esc(String(d.name).split(' ')[0]) + '</text>';
+      g += '</g>';
+    });
+    g += '<rect x="' + (cx0 - 9) + '" y="' + (cy0 - 9) + '" width="18" height="18" rx="4" fill="var(--ink)"/><text x="' + (cx0 - 14) + '" y="' + (cy0 + 24) + '" text-anchor="end" font-size="12" font-weight="700" fill="var(--ink)">us</text>';
+    g += '<text x="' + (S - p) + '" y="' + (S - 12) + '" text-anchor="end" font-size="12" fill="var(--ink-faint)">' + esc(label(xKey)) + ' →</text><text x="12" y="' + (p - 14) + '" font-size="12" fill="var(--ink-faint)">↑ ' + esc(label(yKey)) + '</text>';
+    if (!plotted) g += '<text x="' + (S / 2) + '" y="' + (S / 2) + '" text-anchor="middle" font-size="14" fill="var(--ink-faint)">No competitor is scored on these two yet.</text>';
+    return g + '</svg>';
+  }
+
+  // nextSweep(home, now) → { big, small } for the countdown panel.
+  function nextSweep(home, now) {
+    var ns = home.next_sweep || {};
+    if (!ns.enabled) return { big: 'paused', small: 'the watch is switched off' };
+    if (!ns.due) return { big: 'due now', small: 'starts on the next hourly check' };
+    var due = new Date(ns.due);
+    var ms = due - (now || new Date());
+    if (!(ms > 0)) return { big: 'due now', small: 'starts on the next hourly check' };
+    var d = Math.floor(ms / 864e5), h = Math.floor((ms % 864e5) / 36e5), m = Math.floor((ms % 36e5) / 6e4);
+    var big = d > 0 ? d + 'd ' + h + 'h' : h > 0 ? h + 'h ' + m + 'm' : m + 'm';
+    var small = due.toLocaleDateString('en-GB', { weekday: 'short', day: 'numeric', month: 'short' }) + ' · ' + due.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });
+    return { big: big, small: small };
+  }
+
+  function money(v) { return '$' + (Number(v) || 0).toFixed(2); }
+
+  // The facts an item carries, in words. Research keys get their label; anything else
+  // is shown under its own key with underscores as spaces.
+  var FACT_LABEL = { pricing: 'Pricing', funding: 'Funding', open_source_self_host: 'Self-host', partner_candidate: 'Also a partner?', rank: 'Partner rank', quote: 'In their words', unverified: 'Unverified', watch_sources: 'Sources to watch' };
+  function factRows(facts) {
+    var out = [];
+    Object.keys(facts || {}).forEach(function (k) {
+      if (k === 'quote_url') return;
+      var v = facts[k];
+      if (v == null || v === '' || (Array.isArray(v) && !v.length)) return;
+      if (typeof v === 'boolean') v = v ? 'yes' : 'no';
+      else if (Array.isArray(v)) v = v.join('; ');
+      else if (typeof v === 'object') return;
+      out.push([FACT_LABEL[k] || k.replace(/_/g, ' '), String(v)]);
+    });
+    return out;
+  }
+
+  // ---- per-viewer conveniences (never the record) --------------------------------
+  function store(key, fallback) {
+    try { var v = JSON.parse(root.localStorage.getItem(key)); return v == null ? fallback : v; } catch (e) { return fallback; }
+  }
+  function save(key, v) { try { root.localStorage.setItem(key, JSON.stringify(v)); } catch (e) { /* private mode */ } }
+  var pins = {
+    all: function () { var v = store('mw-pins', []); return Array.isArray(v) ? v : []; },
+    has: function (id) { return pins.all().some(function (p) { return String(p.id) === String(id); }); },
+    toggle: function (item) {
+      var list = pins.all().filter(function (p) { return String(p.id) !== String(item.id); });
+      var on = list.length === pins.all().length;
+      if (on) list.unshift({ id: item.id, name: item.name, kind: item.kind });
+      save('mw-pins', list.slice(0, 12));
+      return on;
+    },
+  };
+  var reads = {
+    get: function () { var v = store('mw-read', []); return Array.isArray(v) ? v.map(String) : []; },
+    add: function (id) { var v = reads.get(); if (v.indexOf(String(id)) < 0) v.push(String(id)); save('mw-read', v.slice(-200)); },
+  };
+
+  // ---- the propose dialog ------------------------------------------------------
+  // One <dialog> for every proposal either page files. `mode` is 'change' (the item
+  // page's four kinds), 'stop' (stop tracking) or 'scout' (a new item). It posts to
+  // POST /market-watch/proposals and resolves with the server's answer.
+  var CHANGE_KINDS = [
+    ['rescore', 'Re-score a dimension'],
+    ['move_kind', 'Move to partner / competitor'],
+    ['add_source', 'Add a source to watch'],
+    ['correct_entry', 'Correct an entry'],
+  ];
+  function dialogHtml(mode, ctx) {
+    ctx = ctx || {};
+    var it = ctx.item || {};
+    var h = '<form method="dialog" novalidate>';
+    if (mode === 'scout') {
+      h += '<span class="mw-label">send a new scout</span>';
+      h += '<label>What should we watch?<select name="scout"><option value="competitor">A competitor</option><option value="partner">A partner</option><option value="topic">A topic</option></select></label>';
+      h += '<label>Its name<input name="name" maxlength="120" autocomplete="off" required></label>';
+      h += '<label>A link, if it has one<input name="url" type="url" maxlength="500" placeholder="https://" autocomplete="off"></label>';
+    } else if (mode === 'stop') {
+      h += '<span class="mw-label">stop tracking</span>';
+      h += '<p class="mw-quiet" style="margin:0 0 12px">Asks the government to take ' + esc(it.name) + ' off the watch. Its case file stays readable.</p>';
+    } else {
+      h += '<span class="mw-label">propose a change</span>';
+      h += '<label>What should change?<select name="kind">';
+      CHANGE_KINDS.forEach(function (k) {
+        if (k[0] === 'move_kind' && it.kind === 'topic') return;
+        var lbl = k[0] === 'move_kind' ? (it.kind === 'partner' ? 'Move to competitor' : 'Move to partner') : k[1];
+        h += '<option value="' + k[0] + '">' + esc(lbl) + '</option>';
+      });
+      h += '</select></label>';
+      h += '<div data-for="rescore"><div class="mw-row2"><label>Which score<select name="dimension">';
+      (ctx.dimensions || []).forEach(function (d) { h += '<option value="' + esc(d.key) + '">' + esc(d.label) + (d.latest != null ? ' (now ' + esc(d.latest) + ')' : '') + '</option>'; });
+      h += '<option value="overall">Overall' + (it.overall != null ? ' (now ' + esc(it.overall) + ')' : '') + '</option>';
+      h += '</select></label><label>New score<input name="value" type="number" min="0" max="10" step="0.5" inputmode="decimal"></label></div></div>';
+      h += '<div data-for="add_source" hidden><label>The source<input name="url" type="url" maxlength="500" placeholder="https://" autocomplete="off"></label></div>';
+      h += '<div data-for="correct_entry" hidden><label>Which entry<select name="log_entry_id">';
+      (ctx.entries || []).forEach(function (e) { h += '<option value="' + esc(e.id) + '">' + esc(fmtDay(e.found_on)) + ' · ' + esc(String(e.takeaway).slice(0, 70)) + '</option>'; });
+      h += '</select></label></div>';
+    }
+    h += '<label>Why, in one line<input name="reason" maxlength="280" autocomplete="off" required placeholder="' + (mode === 'scout' ? 'e.g. they launched an agent marketplace this week' : mode === 'stop' ? 'e.g. they shut down in September' : 'e.g. they now pay maintainers, so economy should be 4') + '"></label>';
+    h += '<p class="mw-dialog__err" role="alert"></p>';
+    h += '<div class="mw-dialog__acts"><button class="btn btn--ghost" value="cancel" type="button" data-cancel>cancel</button><button class="btn" type="submit">send to the government</button></div>';
+    return h + '</form>';
+  }
+
+  // bodyFor(mode, form, item) — what the dialog posts.
+  function bodyFor(mode, f, item) {
+    var v = function (n) { var el = f.elements[n]; return el ? String(el.value || '').trim() : ''; };
+    if (mode === 'scout') return { kind: 'add_item', scout: v('scout'), name: v('name'), url: v('url'), reason: v('reason') };
+    if (mode === 'stop') return { kind: 'remove_item', item_id: item.id, reason: v('reason') };
+    var kind = v('kind');
+    var b = { kind: kind, item_id: item.id, reason: v('reason') };
+    if (kind === 'rescore') { b.dimension = v('dimension'); b.value = v('value'); }
+    if (kind === 'add_source') b.url = v('url');
+    if (kind === 'correct_entry') b.log_entry_id = v('log_entry_id');
+    return b;
+  }
+
+  function openPropose(mode, ctx, onDone) {
+    var doc = root.document;
+    var dlg = doc.getElementById('mw-propose');
+    dlg.innerHTML = dialogHtml(mode, ctx);
+    var f = dlg.querySelector('form');
+    var err = dlg.querySelector('.mw-dialog__err');
+    var sync = function () {
+      var k = f.elements.kind ? f.elements.kind.value : '';
+      Array.prototype.forEach.call(dlg.querySelectorAll('[data-for]'), function (el) { el.hidden = el.getAttribute('data-for') !== k; });
+    };
+    if (f.elements.kind) f.elements.kind.addEventListener('change', sync);
+    sync();
+    dlg.querySelector('[data-cancel]').addEventListener('click', function () { dlg.close(); });
+    f.addEventListener('submit', function (ev) {
+      ev.preventDefault();
+      var body = bodyFor(mode, f, ctx.item || {});
+      if (!body.reason) { err.textContent = 'Say why, in one line.'; return; }
+      var btn = f.querySelector('[type=submit]');
+      btn.disabled = true;
+      err.textContent = '';
+      root.fetch('/api/bongos/market-watch/proposals', {
+        method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body),
+      }).then(function (r) {
+        return r.json().catch(function () { return {}; }).then(function (j) { return { status: r.status, ok: r.ok, data: j }; });
+      }).then(function (res) {
+        btn.disabled = false;
+        if (res.ok) { dlg.close(); onDone(res.data); return; }
+        var e = (res.data && res.data.error) || {};
+        err.textContent = res.status === 401 ? 'Sign in again to send this.' : (e.message && e.message !== e.code ? e.message : 'That did not send. Try again in a moment.');
+      }).catch(function () { btn.disabled = false; err.textContent = 'Could not reach the server.'; });
+    });
+    dlg.showModal();
+    var first = f.querySelector('select, input');
+    if (first) first.focus();
+  }
+
+  var api = {
+    esc: esc, safeHref: safeHref, itemHref: itemHref, confDots: confDots, typePill: typePill, initials: initials,
+    fmtDay: fmtDay, spark: spark, scopeSvg: scopeSvg, nextSweep: nextSweep, money: money, factRows: factRows,
+    pins: pins, reads: reads, dialogHtml: dialogHtml, bodyFor: bodyFor, openPropose: openPropose,
+    KIND_ICON: KIND_ICON, KIND_PLURAL: KIND_PLURAL,
+  };
+  root.OTBMarketWatch = api;
+  if (typeof module !== 'undefined' && module.exports) module.exports = api;
+})(typeof window !== 'undefined' ? window : globalThis);

package/modules/hall-ui/public/market-watch-rules.html

@@ -43,7 +43,7 @@
 <script src="/builders/dom-utils.js?v=2026-10-25-escape"></script>
 <script src="/builders/shell-trail.js?v=2026-10-08-city-tab"></script>
 <script src="/builders/craft-mode.js?v=2026-10-30-market-watch"></script>
-<script src="/builders/shell.js?v=2026-10-30-market-watch"></script>
+<script src="/builders/shell.js?v=2026-10-30-market-watch-pages"></script>
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>
 <script src="/builders/hall-kit.js"></script>

package/modules/hall-ui/public/market-watch-settings.html

@@ -105,7 +105,7 @@
 <script src="/builders/dom-utils.js?v=2026-10-25-escape"></script>
 <script src="/builders/shell-trail.js?v=2026-10-08-city-tab"></script>
 <script src="/builders/craft-mode.js?v=2026-10-30-market-watch"></script>
-<script src="/builders/shell.js?v=2026-10-30-market-watch"></script>
+<script src="/builders/shell.js?v=2026-10-30-market-watch-pages"></script>
 <script src="/builders/palette.js" defer></script>
 <script src="/builders/hall-kit.js"></script>
 <script src="/builders/market-watch-settings.js"></script>

package/modules/hall-ui/public/market-watch.css

@@ -0,0 +1,169 @@
+/* market-watch.css — the Market Watch home (the watchtower desk, option D) and the
+   tracked-item page (the dossier, option B). Task 1004939; the designs of record are
+   docs/design/mocks/market-watch/home.html and item.html. Every colour is a hall token
+   from the branding pack, never the mock's literal hex: the mocks drew with the same
+   fifteen, so the look carries over and a host's palette still wins. */
+
+.mw-label {
+  display: block;
+  margin: 0 0 8px;
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--ink-faint);
+  font-weight: 500;
+}
+.mw-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+.mw-one { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.mw-panel { background: var(--bg-card); border-radius: var(--radius); padding: 12px; }
+.mw-quiet { color: var(--ink-faint); font-size: 12.5px; }
+.mw-off { max-width: var(--measure); }
+.mw-off p { margin: 0 0 6px; color: var(--ink-soft); }
+
+/* ---- the watchtower desk ---------------------------------------------------- */
+.mw-desk { display: grid; grid-template-columns: 260px minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
+@media (max-width: 1180px) { .mw-desk { grid-template-columns: 1fr 1fr; } .mw-scope-wrap { grid-column: 1 / -1; order: -1; } }
+@media (max-width: 680px) { .mw-desk { grid-template-columns: minmax(0, 1fr); } }
+.mw-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
+
+.mw-watched { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 12.5px; color: var(--ink-soft); }
+.mw-watched b { color: var(--ink); font-weight: 600; }
+.mw-scout { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--glass); margin-bottom: 8px; white-space: nowrap; }
+.mw-scout__ic { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--bg-card); font-size: 15px; color: var(--ink-soft); }
+.mw-scout__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
+.mw-scout__lv { font-size: 11.5px; color: var(--ink-faint); }
+.mw-badge { min-width: 24px; height: 24px; border-radius: 12px; background: var(--accent); color: var(--accent-on); font-size: 12px; font-weight: 700; display: grid; place-items: center; padding: 0 7px; }
+.mw-badge--none { background: var(--glass-strong); color: var(--ink-faint); }
+.mw-send { width: 100%; margin-top: 4px; }
+.mw-streak { display: flex; gap: 4px; margin-top: 6px; }
+.mw-streak i { flex: 1; max-width: 40px; height: 18px; border-radius: 5px; background: var(--accent); opacity: .85; }
+.mw-streak i.no { background: var(--glass-strong); opacity: 1; }
+.mw-pins { margin-top: 14px; }
+.mw-pin-row { display: flex; align-items: center; gap: 8px; min-height: 32px; border-top: 1px solid var(--rule-soft); font-size: 13px; }
+.mw-pin-row:first-of-type { border-top: 0; }
+.mw-pin-row a { color: var(--ink); text-decoration: none; padding: 4px 0; }
+.mw-pin-row a:hover { text-decoration: underline; }
+
+.mw-scope-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-faint); margin-bottom: 8px; }
+.mw-scope-tools select { font: inherit; color: var(--ink); background: var(--bg-card); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 4px 8px; min-height: 28px; max-width: 46%; }
+.mw-scope-tools .mw-sp { flex: 1; }
+.mw-key { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
+.mw-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
+.mw-scope { position: relative; aspect-ratio: 1 / 1; max-height: 560px; margin: 0 auto; border-radius: 18px; background: var(--bg-frame); overflow: hidden; }
+.mw-scope svg { position: absolute; inset: 0; width: 100%; height: 100%; }
+.mw-scope .mw-blip { cursor: pointer; }
+.mw-open { margin: 10px 0 0; }
+.mw-open select { flex: 1 1 200px; min-width: 0; max-width: 360px; }
+.mw-sweep { animation: mw-sweep 6s linear infinite; }
+@keyframes mw-sweep { to { transform: rotate(360deg); } }
+.mw-ping { animation: mw-ping 1.8s ease-out infinite; }
+@keyframes mw-ping { 0% { r: 4; opacity: .9; } 100% { r: 16; opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .mw-sweep, .mw-ping { animation: none; } }
+
+.mw-fuel { display: flex; gap: 10px; align-items: flex-end; margin-top: 4px; }
+.mw-count { font-size: 34px; font-weight: 300; letter-spacing: -.03em; line-height: 1.1; font-family: var(--font-display); }
+.mw-when { color: var(--ink-faint); font-size: 12px; }
+.mw-tank { width: 44px; height: 90px; border-radius: 10px; border: 2px solid var(--rule); position: relative; overflow: hidden; margin: 0 auto; }
+.mw-tank i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--accent); }
+.mw-left { font-size: 11px; color: var(--ink-faint); margin-top: 4px; text-align: center; white-space: nowrap; }
+
+.mw-xp { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; color: var(--ink-faint); }
+.mw-xp__b { flex: 1; height: 8px; border-radius: 8px; background: var(--glass-strong); overflow: hidden; }
+.mw-xp__b i { display: block; height: 100%; background: var(--accent); transition: width .3s; }
+.mw-rep { display: flex; align-items: center; gap: 8px; min-height: 40px; border-top: 1px solid var(--rule-soft); white-space: nowrap; }
+.mw-rep:first-child { border-top: 0; }
+.mw-rep__ic { width: 16px; flex: none; text-align: center; color: var(--ink-faint); }
+.mw-rep__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: var(--ink-soft); text-decoration: none; padding: 6px 0; }
+.mw-rep__t b { color: var(--ink); font-weight: 600; }
+.mw-rep__t:hover { color: var(--ink); }
+.mw-rep.done { opacity: .45; }
+.mw-rep button { flex: none; min-width: 44px; min-height: 26px; border: 1px solid var(--rule-soft); background: transparent; color: var(--ink-soft); border-radius: var(--radius-pill); padding: 0 10px; cursor: pointer; font: inherit; font-size: 12px; }
+.mw-rep button:hover { border-color: var(--ink-faint); color: var(--ink); }
+
+/* ---- the dossier ------------------------------------------------------------- */
+.mw-back { display: inline-flex; align-items: center; min-height: 28px; margin: 0 0 10px; font-size: 13px; color: var(--ink-faint); text-decoration: none; }
+.mw-back:hover { color: var(--ink); }
+.mw-wrap { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; align-items: start; }
+@media (max-width: 1000px) { .mw-wrap { grid-template-columns: minmax(0, 1fr); } .mw-card { position: static; max-width: 440px; width: 100%; } }
+.mw-card { border-radius: 20px; overflow: hidden; background: var(--bg-card); position: sticky; top: calc(var(--topbar-h) + 16px); box-shadow: var(--shadow-pop); }
+.mw-holo { position: relative; height: 150px; display: flex; align-items: flex-end; padding: 14px 16px; color: var(--void-ink);
+  background:
+    radial-gradient(120% 90% at 20% 10%, color-mix(in srgb, var(--sea) 55%, transparent) 0, transparent 50%),
+    radial-gradient(90% 90% at 85% 30%, color-mix(in srgb, var(--accent) 60%, transparent) 0, transparent 55%),
+    radial-gradient(90% 90% at 50% 110%, color-mix(in srgb, var(--sea) 35%, transparent) 0, transparent 60%),
+    var(--void); }
+.mw-holo__ini { position: absolute; right: 14px; top: 12px; font: 300 54px/1 var(--font-display); letter-spacing: -.04em; opacity: .85; }
+.mw-holo__kind { position: absolute; left: 14px; top: 14px; font: 500 11px/1 var(--font-mono); padding: 5px 8px; border-radius: 999px; background: color-mix(in srgb, var(--void) 55%, transparent); color: var(--void-ink); }
+.mw-holo__nm { font-weight: 600; font-size: 17px; text-shadow: 0 1px 6px var(--void); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
+.mw-lvl { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--rule-soft); }
+.mw-ring { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; flex: none; background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--glass-strong) 0); }
+.mw-ring b { width: 48px; height: 48px; border-radius: 50%; background: var(--bg-card); display: grid; place-items: center; font: 600 18px var(--font-body); }
+.mw-vtag { font-weight: 600; color: var(--accent-ink); }
+.mw-stats { padding: 8px 16px 4px; }
+.mw-st { display: grid; grid-template-columns: minmax(0, 1fr) 70px; gap: 10px; align-items: center; padding: 4px 0; font-size: 12.5px; }
+.mw-st .kit-bars { --kit-bars-label-w: 128px; margin: 0; }
+.mw-spark { display: block; flex: none; }
+.mw-spark .kit-spark { width: 100%; height: 100%; }
+.mw-badges { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 16px 14px; }
+.mw-bdg { font: 500 11px var(--font-mono); padding: 5px 8px; border-radius: 8px; background: var(--glass); }
+.mw-bdg--hot { background: var(--accent-tint); color: var(--accent-ink); }
+.mw-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 16px 16px; }
+.mw-acts .btn, .mw-acts .btn--ghost { width: 100%; min-width: 0; }
+.mw-acts .mw-wide { grid-column: 1 / -1; }
+.mw-acts [aria-pressed="true"] { background: var(--accent-tint); color: var(--accent-ink); border-color: transparent; }
+
+.mw-sec { margin-bottom: 22px; }
+.mw-why { padding: 14px 16px; font-size: 14.5px; line-height: 1.5; }
+.mw-why small { display: block; color: var(--ink-faint); font-size: 12px; margin-top: 6px; }
+.mw-facts { padding: 0; }
+.mw-f { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 9px 16px; border-top: 1px solid var(--rule-soft); font-size: 13px; }
+.mw-f:first-child { border-top: 0; }
+.mw-f > span:first-child { color: var(--ink-faint); }
+
+.mw-src { color: var(--ink-faint); text-decoration: none; border-bottom: 1px dotted var(--rule); font-size: 12.5px; white-space: nowrap; display: inline-block; padding: 4px 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
+.mw-src:hover { color: var(--ink); }
+.mw-pill { display: inline-flex; align-items: center; font: 500 11px/1 var(--font-mono); padding: 4px 8px; border-radius: 999px; white-space: nowrap; color: var(--ink-soft); background: var(--glass-strong); }
+.mw-pill--insight { color: var(--accent-ink); background: var(--accent-tint); }
+.mw-pill--news { color: var(--sea); background: color-mix(in srgb, var(--sea) 16%, var(--bg-card)); }
+.mw-conf { display: inline-flex; gap: 2px; align-items: center; }
+.mw-conf i { width: 5px; height: 11px; border-radius: 2px; background: var(--rule); }
+.mw-conf i.on { background: var(--ink-soft); }
+.mw-conf--low i.on { background: var(--terracotta); }
+
+.mw-log { overflow: hidden; padding: 0; }
+.mw-log table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.mw-log th { text-align: left; padding: 0; border-bottom: 1px solid var(--rule-soft); white-space: nowrap; }
+.mw-log th button, .mw-log th span { display: flex; align-items: center; width: 100%; min-height: 34px; padding: 0 10px; background: none; border: 0; text-align: left; font: 500 10.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
+.mw-log th button { cursor: pointer; }
+.mw-log th button:hover { color: var(--ink); }
+.mw-log th[aria-sort] button { color: var(--ink); }
+.mw-log th[aria-sort="descending"] button::after { content: " \2193"; }
+.mw-log th[aria-sort="ascending"] button::after { content: " \2191"; }
+.mw-log td { padding: 9px 10px; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
+.mw-log tr:last-child td { border-bottom: 0; }
+.mw-log tr.pin td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
+.mw-log td.mw-tk { max-width: 0; width: 100%; }
+.mw-date, .mw-run { font: 400 12px var(--font-mono); color: var(--ink-faint); white-space: nowrap; }
+@media (max-width: 760px) {
+  .mw-log thead { display: none; }
+  .mw-log tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 12px; border-bottom: 1px solid var(--rule-soft); }
+  .mw-log tr:last-child { border-bottom: 0; }
+  .mw-log td { padding: 0; border: 0; }
+  .mw-log td.mw-tk { grid-column: 1 / -1; grid-row: 2; max-width: none; }
+  .mw-log td.mw-c-run, .mw-log td.mw-c-conf { display: none; }
+  .mw-log tr.pin { box-shadow: inset 3px 0 0 var(--accent); }
+  .mw-log tr.pin td:first-child { box-shadow: none; }
+  .mw-f { grid-template-columns: 96px minmax(0, 1fr); }
+}
+
+/* ---- the propose dialog (both pages) ---------------------------------------- */
+.mw-dialog { border: 0; border-radius: var(--radius); background: var(--bg-card); color: var(--ink); padding: 20px; width: min(440px, calc(100vw - 32px)); box-shadow: var(--shadow-pop); }
+.mw-dialog::backdrop { background: var(--scrim); }
+.mw-dialog label { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 12px; }
+.mw-dialog input, .mw-dialog select { display: block; width: 100%; margin-top: 6px; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 8px 9px; min-height: 36px; }
+.mw-dialog .mw-row2 { display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 8px; }
+.mw-dialog__acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
+.mw-dialog__err { color: var(--danger); font-size: 12.5px; margin: 0 0 8px; min-height: 1em; }
+.mw-filter { margin: 0 0 8px; }
+.mw-rules-link { display: inline-flex; align-items: center; min-height: 28px; margin-top: 12px; font-size: 12.5px; color: var(--ink-soft); }