create-walle 0.10.1 → 0.10.3

package/template/coding-task-manager/public/m/app.css

@@ -880,6 +880,14 @@ h3 {
   background: rgba(116, 215, 199, 0.10);
   color: #74d7c7;
 }
+
+/* WP-3b: the landing-queue chip (`⇡#2/3 · 23m`) — the phone counterpart of the desktop
+   `.wt-landing` part. */
+.session-diff-chip.landing {
+  border-color: rgba(122, 162, 247, 0.34);
+  background: rgba(122, 162, 247, 0.12);
+  color: #7aa2f7;
+}
 /* Commits exist but merging changes nothing (integrated/superseded) — dim so it reads as
    low-priority/safe-to-clean vs genuine unmerged work. */
 .session-diff-chip.commits.commits-noop {
@@ -3129,7 +3137,15 @@ html[data-theme="light"] .nav-item.active {
   z-index: 42;
   flex-shrink: 0;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 52px;
+  /* field | dictation mic | Send — the mic sits in the composer's CONTROL ROW
+     beside the send button, exactly as the desktop chat row places it
+     (`.walle-chat-input-row`: textarea, mic, Send). It is a grid item of
+     `.composer`, never of `.composer-field`: that field is a single-column grid
+     with a 5px gap, so a mic placed inside it took a row of its own and pushed
+     the whole composer down (143px at 390px wide before, 94px after) — B8/AC-8b.
+     `auto`, not `44px`, so the column collapses to nothing in a browser where
+     `dictation.js` cannot attach a mic. */
+  grid-template-columns: minmax(0, 1fr) auto 52px;
   align-items: start;
   gap: 8px;
   padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
@@ -3151,8 +3167,11 @@ html[data-theme="light"] .nav-item.active {
   opacity: 0.65;
 }
 
+/* Legacy: the model control now lives in the send menu (`#send-model-option`),
+   so `app.js` only ever REMOVES this class; the extra column keeps the model
+   column where it always was, with the mic's column added for the row above. */
 .composer.has-model-picker {
-  grid-template-columns: minmax(0, 1fr) 58px 52px;
+  grid-template-columns: minmax(0, 1fr) auto 58px 52px;
 }
 
 .composer-field {
@@ -3163,6 +3182,22 @@ html[data-theme="light"] .nav-item.active {
   min-width: 0;
 }
 
+/* The mic button itself is built by public/js/walle/dictation.js and sized
+   `28px x 28px` by the shared `.walle-dictation-mic` rule in `/css/walle.css`
+   (a dense pointer target in the desktop chat row). The phone floors every
+   control at 44px (`button { min-height: 44px }` above), so a 28px mic came out
+   28 x 44 — under the 44px width floor AC-8b measures. On the phone the mic is a
+   touch target in the composer's control row, so it takes the phone's real
+   target size on both axes. */
+.composer .walle-dictation-mic {
+  width: 44px;
+  height: 44px;
+}
+
+.composer .walle-dictation-mic-slot {
+  align-self: center;
+}
+
 .composer-attachments {
   display: grid;
   gap: 6px;
@@ -3634,11 +3669,19 @@ html[data-theme="light"] .nav-item.active {
   font-weight: 950;
 }
 
+/* The menu belongs to the composer it opens from (`#detail-composer` is
+   `position: relative`), so it is anchored to that box: `bottom: calc(100% + 8px)`
+   puts it one small gap above the composer's top edge and it tracks the composer
+   for free — a wrapped mic row, the prompt-history strip, attachments, and the
+   on-screen keyboard inset (`.detail-view` already shrinks by
+   `--mobile-keyboard-offset`). A viewport-relative offset cannot do that: the
+   composer is content-sized, so any fixed pixel offset is wrong the moment the
+   composer grows, and the menu then covers the input it exists to serve. */
 .send-menu {
-  position: fixed;
+  position: absolute;
   left: max(12px, env(safe-area-inset-left));
   right: max(12px, env(safe-area-inset-right));
-  bottom: calc(var(--mobile-keyboard-offset, 0px) + env(safe-area-inset-bottom) + 96px);
+  bottom: calc(100% + 8px);
   z-index: 52;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -6026,7 +6069,9 @@ a.mobile-health-row-action {
   }
 
   .composer {
-    grid-template-columns: minmax(0, 1fr) 68px;
+    /* field | mic | Send, as in the phone rule: the mic keeps the control row it
+       shares with the send button when the pane widens. */
+    grid-template-columns: minmax(0, 1fr) auto 68px;
     align-items: center;
     gap: 12px;
     padding: 16px clamp(20px, 3vw, 36px) calc(18px + env(safe-area-inset-bottom));
@@ -6040,7 +6085,7 @@ a.mobile-health-row-action {
   }
 
   .composer.has-model-picker {
-    grid-template-columns: minmax(0, 1fr) 92px 68px;
+    grid-template-columns: minmax(0, 1fr) auto 92px 68px;
   }
 
   .composer-editor {
@@ -6107,10 +6152,13 @@ a.mobile-health-row-action {
     right: 8px;
   }
 
+  /* Anchored to the composer (see the base .send-menu rule), so the offsets are
+     composer-relative: `--tablet-list-w` is the pane offset already carried by
+     `.detail-view`, and adding it here would double it. */
   .send-menu {
-    left: calc(var(--tablet-list-w) + clamp(20px, 3vw, 36px));
+    left: clamp(20px, 3vw, 36px);
     right: clamp(20px, 3vw, 36px);
-    bottom: calc(var(--mobile-keyboard-offset, 0px) + env(safe-area-inset-bottom) + 104px);
+    bottom: calc(100% + 10px);
     max-width: 680px;
   }
 
@@ -7101,6 +7149,14 @@ button.walle-model-effort-note.ctm-route-back {
   line-height: 18px;
 }
 
+/* WP-3b phone parity: the landing-queue mark on the SESSION ROW (`⇡#1/1`), same colors as
+   `.session-diff-chip.landing`. */
+.row-diff-mark.landing {
+  border-color: rgba(122, 162, 247, 0.34);
+  background: rgba(122, 162, 247, 0.12);
+  color: #7aa2f7;
+}
+
 .session-row.home-row .row-actions {
   display: flex;
   flex-direction: row;
@@ -7328,3 +7384,305 @@ html[data-theme="light"] #view-walle {
    scroll inside their own box instead. */
 #walle-content .walle-body :where(pre, table, img, video, canvas, svg) { max-width: 100%; }
 #walle-content .walle-body :where(pre, table) { overflow-x: auto; }
+
+/* ── WP-5 machine surfaces (docs/remote-machine-hub-sessions-2026-10-22.html §6.6, D-11, S-16) ──
+   The phone twin of the desktop chip/card styles: same facts, same states, phone-sized targets.
+   A local session renders no chip at all, so local rows are unchanged. */
+.machine-chip {
+  flex: 0 0 auto;
+  max-width: 44%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 1px 8px;
+  border-radius: 999px;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--purple, #bb9af7);
+  background: color-mix(in srgb, var(--purple, #bb9af7) 18%, transparent);
+}
+
+/* Unreachable is a STATE of the same chip, not a different badge. */
+.machine-chip.unreachable {
+  color: var(--yellow, #e0af68);
+  background: color-mix(in srgb, var(--yellow, #e0af68) 18%, transparent);
+  border: 1px dashed color-mix(in srgb, var(--yellow, #e0af68) 45%, transparent);
+}
+
+/* The same-repo / browse hint under the new-session machine choice (desktop .ns-machine-hint). */
+.machine-hint { display: block; margin-top: 4px; color: var(--fg-dim); font-size: 12px; font-weight: 400; }
+.machine-hint.warn { color: var(--yellow, #e0af68); }
+
+/* ── WP-6: the phone Machines page (public/m/machines.js) ──────────────────────────────────────
+   The phone twin of the desktop machines page (public/js/app/machines-page.js): This Mac card, then
+   one card per registry member, then the toolbar. Same facts, same actions, same badges — a card the
+   phone and the desktop can never disagree about. Font sizes stay at or above the 12 px floor and
+   every tappable control is at least 44 px (bin/mobile-css-floor-lint.js). */
+#phone-machines-card .mp-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 10px 0 4px;
+}
+#phone-machines-card .mp-btn {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+  padding: 0 12px;
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
+  border-radius: 10px;
+  background: var(--bg-light, #24283b);
+  color: var(--fg);
+  font-size: 14px;
+  font-weight: 500;
+}
+#phone-machines-card .mp-btn:active { opacity: 0.82; }
+#phone-machines-card .mp-btn.mp-primary { border-color: var(--accent, #7aa2f7); color: var(--accent, #7aa2f7); }
+#phone-machines-card .mp-btn.mp-danger { border-color: var(--red, #f7768e); color: var(--red, #f7768e); }
+/* hub bridge (R-13 / AC-2g): the same Access block and approval banner as the desktop card. */
+.mp-access { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border, rgba(255, 255, 255, 0.12)); font-size: 14px; }
+.mp-access-head { display: flex; align-items: center; gap: 8px; }
+.mp-access-trust { display: flex; align-items: center; gap: 8px; color: var(--fg-dim, #a9b1d6); }
+.mp-access-trust select { min-height: 44px; padding: 0 10px; border: 1px solid var(--border, rgba(255, 255, 255, 0.12)); border-radius: 10px; background: var(--bg-light, #24283b); color: var(--fg); font-size: 14px; }
+.mp-access-trust-all { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--fg-dim, #a9b1d6); }
+.mp-access-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
+.mp-access-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.mp-access-pending { color: var(--yellow, #e0af68); }
+.mp-access-audit { color: var(--fg-dim, #a9b1d6); font-size: 13px; }
+.mp-access-text { overflow-wrap: anywhere; }
+.mp-access .mp-btn, .mp-approval-banner .mp-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--border, rgba(255, 255, 255, 0.12)); border-radius: 10px; background: var(--bg-light, #24283b); color: var(--fg); font-size: 14px; }
+.mp-access .mp-btn.mp-danger, .mp-approval-banner .mp-btn.mp-danger { border-color: var(--red, #f7768e); color: var(--red, #f7768e); }
+.mp-approval-banner { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
+/* The approval prompt's own classes (docs/hub-bridge-approval-scopes-2026-11-01.html §6.5). The
+   structural classes are `hbb-*` on both surfaces; this is the phone's dressing: 44 px targets, no
+   type below 12 px (bin/mobile-css-floor-lint.js), one column, and pairs that share the full width.
+   Colours use the PHONE's tokens (--bg-soft, --line-strong, --blue, --ink, --amber): the desktop's
+   --bg-light / --accent / --border are not defined here and would fall back to dark in light mode. */
+.mp-approval-banner .hbb-head, .mp-access .hbb-head { display: flex; gap: 10px; align-items: flex-start; }
+.mp-approval-banner .hbb-icon, .mp-access .hbb-icon {
+  flex: 0 0 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
+  background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber);
+}
+.mp-approval-banner .hub-bridge-banner-text, .mp-access .hub-bridge-banner-text {
+  flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; font-size: 14px;
+}
+.mp-approval-banner .hub-bridge-banner-text b, .mp-access .hub-bridge-banner-text b { font-weight: 600; }
+.mp-approval-banner .hbb-tier, .mp-access .hbb-tier {
+  flex: 0 0 auto; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
+  color: var(--amber); background: color-mix(in srgb, var(--amber) 16%, transparent);
+  border-radius: 999px; padding: 4px 10px;
+}
+.mp-approval-banner .hbb-detail, .mp-access .hbb-detail {
+  padding: 6px 8px; border-radius: 8px; background: var(--bg-soft);
+  color: var(--fg-muted); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere;
+}
+.mp-approval-banner .hbb-grants, .mp-access .hbb-grants {
+  display: grid; grid-template-columns: 1fr; gap: 6px 10px; align-items: center; margin-left: 0;
+}
+.mp-approval-banner .hbb-label, .mp-access .hbb-label { font-size: 12px; color: var(--fg-muted); }
+.mp-approval-banner .hbb-seg, .mp-access .hbb-seg { display: flex; width: 100%; }
+.mp-approval-banner .hbb-btn, .mp-access .hbb-btn {
+  display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0;
+  min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong);
+  border-radius: 10px; background: var(--bg-soft); color: var(--fg); font-size: 14px;
+}
+.mp-approval-banner .hbb-seg .hbb-btn:first-child, .mp-access .hbb-seg .hbb-btn:first-child { border-radius: 10px 0 0 10px; }
+.mp-approval-banner .hbb-seg .hbb-btn + .hbb-btn, .mp-access .hbb-seg .hbb-btn + .hbb-btn { border-left: 0; border-radius: 0 10px 10px 0; }
+.mp-approval-banner .hbb-btn.hbb-primary, .mp-access .hbb-btn.hbb-primary {
+  background: var(--blue); border-color: var(--blue);
+  color: var(--ink); font-weight: 600;
+}
+.mp-approval-banner .hbb-foot, .mp-access .hbb-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
+.mp-approval-banner .hbb-note, .mp-access .hbb-note { font-size: 12px; color: var(--fg-dim); }
+.mp-approval-banner .hbb-deny, .mp-access .hbb-deny {
+  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px;
+  border: 1px solid transparent; border-radius: 10px; background: transparent;
+  color: var(--fg-muted); font-size: 14px;
+}
+#phone-machines-card .mp-card {
+  margin-top: 10px;
+  padding: 10px 12px;
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.09));
+  border-radius: 12px;
+  background: var(--bg-light, #24283b);
+}
+#phone-machines-card .mp-card.mp-self { border-color: var(--accent, #7aa2f7); }
+#phone-machines-card .mp-head { display: flex; align-items: center; gap: 8px; }
+#phone-machines-card .mp-dot {
+  width: 8px;
+  height: 8px;
+  flex: 0 0 auto;
+  border-radius: 50%;
+  background: var(--fg-dim, #7d8590);
+}
+#phone-machines-card .mp-dot[data-health="reachable"] { background: var(--green, #9ece6a); }
+#phone-machines-card .mp-dot[data-health="unhealthy"] { background: var(--red, #f7768e); }
+#phone-machines-card .mp-dot[data-health="unknown"] { background: var(--yellow, #e0af68); }
+#phone-machines-card .mp-name {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 44px;
+  padding: 0 6px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--fg);
+  font-size: 15px;
+  font-weight: 600;
+}
+#phone-machines-card .mp-name:focus { border-color: var(--accent, #7aa2f7); outline: none; }
+#phone-machines-card .mp-cred {
+  flex: 0 0 auto;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: var(--bg, #1a1b26);
+  color: var(--fg-dim, #7d8590);
+  font-size: 12px;
+  white-space: nowrap;
+}
+#phone-machines-card .mp-meta { margin-top: 2px; color: var(--fg-dim); font-size: 12px; overflow-wrap: anywhere; }
+/* WP-3: the phone twin of the desktop card's .mpc-fleet — same line, same size as .mp-meta, tone
+   from this page's own theme variables. Dark mode rides the variables like every other row. */
+#phone-machines-card .mp-fleet { margin-top: 2px; color: var(--fg-dim); font-size: 12px; overflow-wrap: anywhere; }
+#phone-machines-card .mp-fleet[data-fleet-tone="ok"] { color: var(--green, #9ece6a); }
+#phone-machines-card .mp-fleet[data-fleet-tone="pending"] { color: var(--yellow, #e0af68); }
+#phone-machines-card .mp-fleet[data-fleet-tone="warn"] { color: var(--red, #f7768e); }
+#phone-machines-card .mp-fleet[data-fleet-tone="muted"] { color: var(--fg-dim, #7d8590); }
+#phone-machines-card .mp-stale { color: var(--yellow, #e0af68); }
+#phone-machines-card .mp-error { color: var(--red, #f7768e); font-size: 13px; }
+#phone-machines-card .mp-sparks { display: flex; gap: 12px; margin-top: 8px; }
+#phone-machines-card .mp-spark { display: flex; align-items: center; gap: 6px; min-width: 0; }
+#phone-machines-card .mp-spark-label { color: var(--fg-dim); font-size: 12px; letter-spacing: 0.04em; }
+#phone-machines-card .mp-spark-val { color: var(--fg); font-size: 12px; }
+#phone-machines-card .mp-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
+#phone-machines-card .mp-fact { display: flex; gap: 6px; min-width: 0; }
+#phone-machines-card .mp-fact-label { color: var(--fg-dim); font-size: 12px; }
+#phone-machines-card .mp-fact-value { color: var(--fg); font-size: 12px; overflow-wrap: anywhere; }
+#phone-machines-card .mp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
+#phone-machines-card .mp-fav[aria-pressed="true"] { border-color: var(--yellow, #e0af68); color: var(--yellow, #e0af68); }
+/* P-7 "Sign in to <member> too": the row that takes this phone to a member's own origin, because a
+   passkey is pinned to its hostname. It is the phone twin of .mpc-signin-row on the desktop page. */
+#phone-machines-card .mp-signin-row { flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 8px; width: 100%; }
+#phone-machines-card .mp-signin-hint { color: var(--fg-dim); font-size: 12px; font-weight: 400; overflow-wrap: anywhere; }
+#phone-machines-card .mp-status:not(:empty) { margin-top: 8px; color: var(--fg-dim); font-size: 12px; }
+
+/* The Add-machine / Show-a-code dialogs reuse the model-sheet chrome, so only the fields are new. */
+.mp-modal .mp-modal-label { display: block; margin: 10px 0 4px; color: var(--fg-dim); font-size: 12px; }
+.mp-modal .mp-modal-input {
+  display: block;
+  width: 100%;
+  min-height: 44px;
+  margin-bottom: 8px;
+  padding: 8px 10px;
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
+  border-radius: 10px;
+  background: var(--bg-light, #24283b);
+  color: var(--fg);
+  font-size: 16px;
+}
+.mp-modal .mp-modal-or,
+.mp-modal .mp-modal-sub { margin: 6px 0; color: var(--fg-dim); font-size: 12px; }
+.mp-modal .mp-modal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
+.mp-modal .mp-modal-error:not(:empty) { margin: 6px 0 0; color: var(--red, #f7768e); font-size: 12px; }
+.mp-modal .mp-pair-preview { min-height: 20px; color: var(--fg-dim); font-size: 12px; overflow-wrap: anywhere; }
+.mp-modal .mp-code-value {
+  margin: 8px 0;
+  color: var(--accent, #7aa2f7);
+  font-size: 22px;
+  letter-spacing: 0.14em;
+  text-align: center;
+}
+.mp-modal .mp-modal-legacy { margin-top: 12px; color: var(--fg-dim); font-size: 12px; }
+
+/* The new-session machine row (D-1: N > MACHINE_PICKER_CARD_LIMIT opens the search sheet). */
+.machine-picker-row { display: block; width: 100%; text-align: left; }
+
+/* ── the machine search sheet (public/m/machines.js, D-2/D-3) ─────────────────────────────────── */
+.machine-sheet-group { margin-bottom: 10px; }
+.machine-sheet-group-label {
+  margin: 6px 0 4px;
+  color: var(--fg-dim);
+  font-size: 12px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.machine-sheet-row { flex-direction: column; align-items: flex-start; gap: 2px; }
+.machine-sheet-row-name { color: var(--fg); font-weight: 600; overflow-wrap: anywhere; }
+.machine-sheet-row-meta { color: var(--fg-dim); font-size: 12px; overflow-wrap: anywhere; }
+.machine-sheet-row[disabled] { opacity: 0.6; }
+.machine-sheet-empty { color: var(--fg-dim); font-size: 13px; }
+
+/* P-7: the pool failover roster / hand-over banner. */
+.pool-from-banner-host:empty { display: none; }
+.pool-from-banner {
+  margin: 8px 12px;
+  padding: 8px 10px;
+  border: 1px solid var(--yellow, #e0af68);
+  border-radius: 10px;
+  color: var(--fg);
+  font-size: 13px;
+}
+.pool-failover-list { padding: 0 12px; }
+.pool-failover-copy { color: var(--fg-dim); font-size: 13px; }
+.pool-origin-rows { list-style: none; margin: 0; padding: 0; }
+.pool-origin-row { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.09)); }
+.pool-origin-name { color: var(--fg); font-weight: 600; }
+.pool-origin-state,
+.pool-origin-address { color: var(--fg-dim); font-size: 12px; overflow-wrap: anywhere; }
+
+/* ── WP-9 (§9 S-9): the row's one Skills line and its Review sheet ────────────────────────────────
+   PHONE = DESKTOP PARITY: the same line, the same three sections, the same actions and wording the
+   desktop page renders in public/js/app/machines-page.js. The fonts stay at or above the phone floor
+   (lint/mobile-css-floor.config.json), and the buttons keep the 44 px tap target. */
+#phone-machines-card .mp-skills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
+#phone-machines-card .mp-skills-line { color: var(--fg-dim); font-size: 12px; overflow-wrap: anywhere; }
+#phone-machines-card .mp-skills-review { flex: 0 0 auto; }
+/* WP-3 (§8 WP-3): the phone twin of the row's Models line, its /delegate warnings and its Review
+   button. Fonts stay at or above the phone floor (lint/mobile-css-floor.config.json). */
+#phone-machines-card .mp-models { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
+#phone-machines-card .mp-models-line { color: var(--fg-dim); font-size: 12px; overflow-wrap: anywhere; }
+#phone-machines-card .mp-models-sep { color: var(--fg-dim); font-size: 12px; }
+#phone-machines-card .mp-models-review { flex: 0 0 auto; }
+#phone-machines-card .mp-models-warn { flex-basis: 100%; color: var(--red, #f7768e); font-size: 12px; overflow-wrap: anywhere; }
+.mp-review-sheet { max-height: 88vh; overflow-y: auto; }
+.mp-review-section { margin-top: 14px; border-top: 1px solid var(--border, rgba(255, 255, 255, 0.12)); padding-top: 10px; }
+.mp-review-section h4 { margin: 0 0 6px; color: var(--fg); font-size: 13px; }
+.mp-review-section ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
+.mp-review-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
+.mp-review-name { color: var(--fg); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
+.mp-review-meta, .mp-review-where, .mp-review-note { color: var(--fg-dim); font-size: 12px; overflow-wrap: anywhere; }
+.mp-review-note { margin: 6px 0 0; }
+.mp-review-note.bad { color: var(--red, #f7768e); }
+.mp-review-empty { color: var(--fg-dim); font-size: 12px; }
+.mp-review-actions { display: flex; flex-wrap: wrap; gap: 8px; }
+/* WP-4 (§8 WP-4): the unreachable rows' one control — a 22px tick (the D-19 phone floor), then the
+   44px button under the list. */
+.mp-review-pick { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--fg); font-size: 13px; }
+.mp-review-pick input[type="checkbox"] { width: 22px; height: 22px; flex: 0 0 auto; }
+.mp-review-models-remove { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
+.mp-review-models-remove .mp-btn { font-size: 13px; min-height: 44px; }
+/* WP-5 (§8 WP-5): "From this hub" — a heading level under the Models one, one 44px button per row. */
+.mp-review-from-hub { margin-top: 10px; }
+.mp-review-from-hub h5 { margin: 0 0 6px; color: var(--fg-dim); font-size: 12px; font-weight: 600; }
+.mp-review-from-hub .mp-review-actions .mp-btn { font-size: 13px; min-height: 44px; }
+.mp-review-plugins { display: flex; flex-direction: column; gap: 6px; }
+.mp-review-plugin { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--fg); font-size: 13px; }
+.mp-review-plugin input[type="checkbox"] { width: 22px; height: 22px; flex: 0 0 auto; }
+.mp-review-diff {
+  flex: 1 1 100%;
+  max-height: 46vh;
+  overflow: auto;
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
+  border-radius: 8px;
+  padding: 8px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.mp-diff { display: flex; flex-direction: column; }
+.mp-diff span { white-space: pre-wrap; overflow-wrap: anywhere; }
+.mp-diff-file { margin: 8px 0 2px; color: var(--fg); font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
+.mp-diff-binary { margin: 0 0 4px; color: var(--fg-dim); font-size: 12px; }
+.mp-diff-add { color: var(--green, #9ece6a); }
+.mp-diff-del { color: var(--red, #f7768e); }
+.mp-diff-eq { color: var(--fg-dim); }