create-pmos 0.6.4 → 0.7.0

package/workspace/public/index.html

@@ -16,18 +16,43 @@
     <span class="branch" id="branchChip" hidden title="current branch"></span>
     <div class="right">
       <button class="ibtn" id="scratchBtn" title="Scratchpad — stage text before the terminal (⌘J)" aria-pressed="false">scratch</button>
-      <button class="ibtn" id="railBtn" title="Hide/show the library rail" aria-pressed="false">rail</button>
+      <!-- The layout control: names the arrangement you are in, and opens the list. Adjusting a
+           layout is kept against THAT layout automatically — there is no save, no dirty state and
+           no discard (R4). `restore` on a stock entry is the escape hatch that replaces them. -->
+      <button class="ibtn lay-chip" id="layBtn" aria-expanded="false" aria-controls="layMenu"
+        title="Layout — pick one, then adjust it freely (⌃1–⌃4)"><i aria-hidden="true">▤</i><span id="layName">review</span></button>
       <button class="ibtn" id="themeBtn" title="Toggle theme">theme</button>
     </div>
+
+    <div class="lay-menu" id="layMenu" hidden role="dialog" aria-label="Layouts">
+      <div class="lay-cap">layouts</div>
+      <div id="layList"></div>
+      <form class="lay-new miniform" id="layNewForm" hidden>
+        <label class="lbl" for="layNewName">name this layout</label>
+        <input id="layNewName" type="text" placeholder="e.g. two agents + prd" autocomplete="off" spellcheck="false" maxlength="40" />
+        <div class="row"><button type="submit" class="go">create</button>
+          <button type="button" class="quiet" id="layNewCancel">cancel</button></div>
+      </form>
+      <button class="lay-add" id="layNewBtn">＋ new layout from this arrangement</button>
+      <p class="lay-foot">Layouts belong to <b id="layScope">this repo</b>. Drag a pane by its ⠿ grip,
+        or an edge to resize — whatever you change is kept.</p>
+    </div>
   </header>
 
-  <!-- Three columns: the workspace (repos over running agents) · the terminal · the library rail
-       (library over the document reader). Each rail pane folds away; the rail itself hides. -->
+  <!-- The arrangement is COMPUTED from the current layout (lib/layout.js), not hard-coded here:
+       the sidebar, the terminal and the reader are grid areas whose columns/rows/areas are written
+       by applyLayout(). Each pane carries a ⠿ grip (move) and, where it has an outer edge, a
+       resize handle. DOM order is fixed; only the grid decides where a pane lands. -->
   <div class="body" id="bodyGrid">
 
-    <nav class="side" aria-label="Workspaces and running agents">
+    <nav class="side" id="side" aria-label="Workspaces and running agents">
+      <div class="edge" id="sideEdge" data-edge="side" role="separator" aria-label="Resize the sidebar" tabindex="0"></div>
       <section class="pane" id="paneWs">
-        <div class="cap">workspaces <button class="mini" id="addWsBtn" aria-expanded="false" title="Add a repository">＋</button></div>
+        <div class="cap">
+          <span class="grip" id="sideGrip" data-pane="side" role="button" tabindex="0"
+            aria-label="Move the sidebar" title="Move this column">⠿</span>
+          <button class="fold" id="wsFold" data-fold="ws" aria-expanded="true" title="Hide the workspaces"><span class="chev" aria-hidden="true">▾</span>workspaces</button>
+          <button class="mini" id="addWsBtn" aria-expanded="false" title="Add a repository">＋</button></div>
         <div class="pane-body">
           <div id="workspaces"></div>
           <form class="miniform" id="addWsForm" hidden>
@@ -44,7 +69,9 @@
       </section>
 
       <section class="pane" id="paneSess">
-        <div class="cap">running agents · <span id="sessCount"></span> <span class="ct" id="needCount"></span></div>
+        <div class="cap">
+          <button class="fold" id="sessFold" data-fold="sess" aria-expanded="true" title="Hide the running agents"><span class="chev" aria-hidden="true">▾</span>running agents</button>
+          · <span id="sessCount"></span> <span class="ct" id="needCount"></span></div>
         <div class="pane-body">
           <button class="newsess" id="newBtn" aria-expanded="false"><i>＋</i> new session — run an agent here</button>
           <form class="miniform" id="newForm" hidden>
@@ -72,25 +99,46 @@
     </nav>
 
     <main class="term-col" aria-label="Sessions and terminal">
-      <div class="stabs" role="tablist" aria-label="Open sessions" id="stabs"></div>
-      <div class="termhost" id="termhost">
-        <!-- INSIDE termhost (position:relative): the overlay covers only the terminal area,
-             never the sidebar/tabs/needs — those must stay usable while a session is exited. -->
-        <div class="exited-overlay" id="exited">
-          <div class="card">
-            <p id="exitedMsg">This session has exited.</p>
-            <div class="row">
-              <button id="respawnBtn">↻ respawn</button>
-              <button id="removeBtn" class="quiet">✕ remove session</button>
+      <!-- Terminal GROUPS (R6). One group is the shipped behaviour; `split` shows a second beside
+           it, each with its own tab strip and its own visible session. The #needs strip is NOT
+           duplicated — it belongs to the column, not to a group. -->
+      <div class="groups" id="groups" data-split="off">
+        <section class="group" id="group0" data-g="0">
+          <div class="stabs" role="tablist" aria-label="Open sessions" id="stabs"></div>
+          <div class="termhost" id="termhost">
+            <!-- INSIDE termhost (position:relative): the overlay covers only the terminal area,
+                 never the sidebar/tabs/needs — those must stay usable while a session is exited. -->
+            <div class="exited-overlay" id="exited">
+              <div class="card">
+                <p id="exitedMsg">This session has exited.</p>
+                <div class="row">
+                  <button id="respawnBtn">↻ respawn</button>
+                  <button id="removeBtn" class="quiet">✕ remove session</button>
+                </div>
+              </div>
+            </div>
+            <div class="empty-overlay" id="noSess">
+              <div class="card">
+                <p>No sessions in <b id="noSessWs">this workspace</b> yet.</p>
+                <p class="reason">＋ new session runs an agent here — it starts in this repo's root.</p>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="empty-overlay" id="noSess">
-          <div class="card">
-            <p>No sessions in <b id="noSessWs">this workspace</b> yet.</p>
-            <p class="reason">＋ new session runs an agent here — it starts in this repo's root.</p>
+        </section>
+        <section class="group" id="group1" data-g="1" hidden>
+          <div class="stabs" role="tablist" aria-label="Open sessions, second group" id="stabs1"></div>
+          <div class="termhost" id="termhost1">
+            <!-- a split with nothing to put in it offers the next step, never an empty black box -->
+            <div class="empty-overlay" id="noSess1">
+              <div class="card">
+                <p>Nothing else to show here yet.</p>
+                <p class="reason">Start a second session and it appears in this group.</p>
+                <div class="row"><button id="newHere1">＋ new session</button>
+                  <button id="unsplitBtn" class="quiet">✕ close this group</button></div>
+              </div>
+            </div>
           </div>
-        </div>
+        </section>
       </div>
       <div class="needs" id="needs" role="status" style="display:none"></div>
 
@@ -113,9 +161,11 @@
     </main>
 
     <aside class="rail" id="rail" aria-label="Library and document">
-      <div class="railgrip" id="railGrip" role="separator" aria-label="Resize the rail" tabindex="0"></div>
+      <div class="railgrip edge" id="railGrip" data-edge="read" role="separator" aria-label="Resize the reader" tabindex="0"></div>
       <section class="pane lib-pane" id="paneLib">
         <div class="cap">
+          <span class="grip" id="readGrip" data-pane="reader" role="button" tabindex="0"
+            aria-label="Move the reader" title="Move this pane">⠿</span>
           <button class="fold" id="libFold" aria-expanded="true" title="Hide the library"><span class="chev" aria-hidden="true">▾</span>library</button>
           <span class="lens" role="tablist" aria-label="Library view">
             <button role="tab" data-lens="initiatives" aria-selected="true">initiatives</button>
@@ -142,6 +192,16 @@
         <div class="pane-body doc-body" id="docBody" tabindex="0"></div>
       </section>
     </aside>
+
+    <!-- Drop targets, shown only while a ⠿ grip is being dragged. They are an ACCELERATOR: every
+         position they offer is also reachable from the layout menu, so the drag is never the only
+         path to an arrangement (R12). -->
+    <div class="drop" id="drop" aria-hidden="true">
+      <div class="dz" data-z="left">left</div>
+      <div class="dz" data-z="right">right</div>
+      <div class="dz" data-z="bottom">bottom</div>
+      <div class="dz" data-z="off">hide</div>
+    </div>
   </div>
 
   <!-- ⌘K jump palette (client-side; no backend) -->
@@ -195,6 +255,11 @@
 <script src="/vendor/addon-fit.js"></script>
 <script src="/vendor/addon-web-links.js"></script>
 <script src="/lib/preview-kind.js"></script>
+<script src="/lib/layout.js"></script>
+<!-- Both sides of the review must agree about what is applyable and what a change produces, so the
+     browser loads the SAME modules the server requires — the client never re-derives either. -->
+<script src="/lib/finding-contract.js"></script>
+<script src="/lib/apply-change.js"></script>
 <script src="/app.js"></script>
 </body>
 </html>

package/workspace/public/styles.css

@@ -52,7 +52,10 @@ button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
 .app{display:grid; grid-template-rows:44px minmax(0,1fr) 28px; height:100vh; height:100dvh}
 
 /* ── top bar ── */
-.bar{display:flex; align-items:center; gap:10px; padding:0 12px; min-width:0;
+/* position+z-index so the header's own popover (the layout menu) paints ABOVE the body: the two
+   are grid siblings, and without this the later-in-DOM body wins the paint order and swallows
+   every click aimed at the menu. */
+.bar{display:flex; align-items:center; gap:10px; padding:0 12px; min-width:0; position:relative; z-index:50;
   border-bottom:1px solid var(--border-3); background:var(--glass); backdrop-filter:blur(8px)}
 .mark{width:23px;height:23px;display:grid;place-items:center;border:1px solid var(--border-strong);
   border-radius:7px;background:var(--pill);font-family:var(--mono);font-size:11px;font-weight:700}
@@ -70,16 +73,33 @@ button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
 .ibtn:hover{border-color:var(--border-strong);color:var(--text-2)}
 .ibtn[aria-pressed="true"]{border-color:var(--accent);color:var(--accent-text)}
 
-/* ── three columns: workspace · terminal · library rail ── */
+/* ── the arrangement (workspace-layout-system) ──────────────────────────────────────────────
+   The template is COMPUTED from the current layout by applyLayout() and written into these three
+   custom properties — never as a direct grid declaration. That is deliberate: an inline
+   `grid-template-columns` would outrank the ≤760px media query below and take the phone's
+   single-column switcher with it. Custom properties lose to a later direct declaration, so the
+   two responsive systems stay in charge of their own widths (R9). */
 .body{display:grid; position:relative;
-  grid-template-columns:262px minmax(0,1fr) minmax(0,var(--rail-w));
-  grid-template-rows:minmax(0,1fr); min-height:0}
-.body.rail-off{grid-template-columns:262px minmax(0,1fr)}
-.body.rail-off .rail{display:none}
-
-/* ── left column: the workspace — repos on top, running agents below, equal halves ── */
+  grid-template-columns:var(--lay-cols, 262px minmax(0,1fr) minmax(0,var(--rail-w)));
+  grid-template-rows:var(--lay-rows, minmax(0,1fr));
+  grid-template-areas:var(--lay-areas, "side term read");
+  min-height:0}
+.side{grid-area:side} .term-col{grid-area:term} .rail{grid-area:read}
+.body[data-side="off"]>.side{display:none}
+.body[data-reader="off"]>.rail{display:none}
+/* docked bottom, the reader is a wide short pane under the terminal, not a column beside it */
+.body[data-reader="bottom"]>.rail{border-left:0;border-top:1px solid var(--border-3)}
+.body[data-reader="bottom"] .railgrip{display:none}
+.body[data-side="right"]>.side{border-right:0;border-left:1px solid var(--border-3)}
+.body[data-reader="left"]>.rail{border-left:0;border-right:1px solid var(--border-3)}
+.body[data-reader="left"] .railgrip{left:auto;right:-3px}
+
+/* ── left column: the workspace — repos over running agents. Both panes fold and the column
+   resizes, which is the parity the rail always had and this one never did (R11). ── */
 .side{border-right:1px solid var(--border-3);background:var(--panel);min-height:0;
-  display:grid;grid-template-rows:1fr 1fr}
+  display:flex;flex-direction:column;position:relative}
+.side>.pane{flex:1 1 0}
+.side>.pane[data-fold="off"]{flex:0 0 auto}
 .side>.pane+.pane{border-top:1px solid var(--border-3)}
 .pane{display:flex;flex-direction:column;min-height:0;min-width:0}
 .pane-body{overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0;padding-bottom:10px}
@@ -100,6 +120,69 @@ button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
 .cap .fold .chev{font-size:9px;transition:transform .12s}
 .pane[data-fold="off"] .cap .fold .chev{transform:rotate(-90deg)}
 @media (prefers-reduced-motion:reduce){.cap .fold .chev{transition:none}}
+/* the move affordance every relocatable pane carries. Keyboard reaches every position it
+   offers through the layout menu, so this is an accelerator and never the only path (R12). */
+.cap .grip{width:22px;min-height:26px;display:grid;place-items:center;border-radius:6px;flex:none;
+  color:var(--text-dim);cursor:grab;letter-spacing:-2px;margin-left:-4px;touch-action:none}
+.cap .grip:hover{background:var(--card-hover);color:var(--accent-text)}
+.cap .grip:active{cursor:grabbing}
+
+/* a column's outer edge, dragged to resize. The rail's original .railgrip is one of these. */
+.edge{position:absolute;top:0;bottom:0;width:7px;z-index:20;cursor:col-resize;touch-action:none}
+.edge:hover,.edge.on{background:linear-gradient(90deg,transparent,var(--glow),transparent)}
+.side>.edge{right:-3px}
+.body[data-side="right"]>.side>.edge{right:auto;left:-3px}
+
+/* drop targets — visible only while a grip is being dragged */
+.drop{position:absolute;inset:0;z-index:40;display:none;grid-area:1/1/-1/-1}
+.body.dragging>.drop{display:block}
+.dz{position:absolute;border:1px dashed var(--border-strong);border-radius:12px;
+  background:var(--accent-wash);display:grid;place-items:center;font-family:var(--mono);
+  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
+.dz.hot{border-style:solid;border-color:var(--accent);color:var(--accent-text);
+  background:var(--pill);box-shadow:0 0 0 1px var(--glow)}
+.dz[data-z="left"]{left:8px;top:8px;bottom:8px;width:22%}
+.dz[data-z="right"]{right:8px;top:8px;bottom:8px;width:22%}
+.dz[data-z="bottom"]{left:26%;right:26%;bottom:8px;height:30%}
+.dz[data-z="off"]{left:26%;right:26%;top:8px;height:20%}
+.dz.no{display:none}
+.laghost{position:fixed;z-index:70;pointer-events:none;padding:5px 10px;border-radius:8px;
+  background:var(--pill);border:1px solid var(--accent);color:var(--accent-text);
+  font-family:var(--mono);font-size:10px}
+
+/* ── the layout control ── */
+.ibtn.lay-chip{gap:7px;display:inline-flex;align-items:center;padding:0 11px}
+.ibtn.lay-chip i{font-style:normal;color:var(--text-dim);font-size:11px}
+.ibtn.lay-chip[aria-expanded="true"]{border-color:var(--accent);color:var(--accent-text);background:var(--pill)}
+.lay-menu{position:absolute;top:40px;right:12px;z-index:60;width:272px;background:var(--panel);
+  border:1px solid var(--border-strong);border-radius:12px;padding:8px;
+  box-shadow:0 22px 60px -26px var(--shadow)}
+.lay-cap{font-family:var(--mono);font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;
+  color:var(--text-dim);margin:2px 5px 6px}
+.lay-row{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border-radius:9px;
+  font-family:var(--mono);font-size:11px;color:var(--text-3);text-align:left;min-height:38px}
+.lay-row:hover{background:var(--card-hover);color:var(--text-2)}
+.lay-row[aria-current="true"]{background:var(--pill);color:var(--accent-text);
+  box-shadow:inset 0 0 0 1px var(--accent)}
+.lay-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.lay-row .kbd{font-size:8.5px;color:var(--text-dim);border:1px solid var(--border);
+  border-radius:4px;padding:0 3px;flex:none}
+/* a wireframe of the arrangement — the name alone does not say what you get */
+.lay-mini{width:28px;height:18px;border:1px solid var(--border-strong);border-radius:3px;
+  display:flex;gap:1px;padding:1px;flex:none;background:var(--bg)}
+.lay-mini span{background:var(--border-strong);border-radius:1px}
+.lay-row[aria-current="true"] .lay-mini span{background:var(--accent)}
+.lay-act{display:flex;align-items:center;justify-content:center;min-width:26px;min-height:26px;
+  border-radius:6px;color:var(--text-dim);font-size:11px;flex:none}
+.lay-act:hover{background:var(--chip);color:var(--accent-text)}
+.lay-act.del:hover{color:var(--bad)}
+.lay-add{display:block;width:100%;margin-top:4px;padding:9px;border:1px dashed var(--border-strong);
+  border-radius:10px;font-family:var(--mono);font-size:10.5px;color:var(--text-muted)}
+.lay-add:hover{color:var(--text-2);border-color:var(--accent)}
+.lay-new{padding:6px 5px 2px}
+.lay-foot{font-family:var(--mono);font-size:9.5px;color:var(--text-dim);line-height:1.55;
+  margin:9px 5px 2px;padding-top:8px;border-top:1px solid var(--border-3)}
+.lay-foot b{color:var(--text-muted);font-weight:400}
 
 /* workspaces — one server, many repos; the row carries the switch + a forget affordance */
 .wsrow{display:flex;align-items:stretch}
@@ -213,6 +296,14 @@ details.hz .kv .src{font-family:var(--mono);font-size:8.5px;color:var(--text-dim
 
 /* ── terminal column ── */
 .term-col{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--term-bg)}
+/* Terminal GROUPS (R6): one by default, two side by side when the layout says split. Each group
+   owns a tab strip and a host; the #needs strip and the scratchpad stay with the column. */
+.groups{flex:1;min-height:0;min-width:0;display:flex;flex-direction:row}
+.group{flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--term-bg)}
+.group[hidden]{display:none}
+.group+.group{border-left:1px solid var(--border-3)}
+.group[data-focus="true"] .stabs{box-shadow:inset 0 2px 0 var(--accent)}
+.groups[data-split="off"] .group[data-focus="true"] .stabs{box-shadow:none}
 .stabs{display:flex;gap:2px;padding:6px 8px 0;background:var(--panel-head);flex:none;
   border-bottom:1px solid var(--border-3);overflow-x:auto;min-height:44px;align-items:flex-end}
 /* tab = wrap of two SIBLING buttons (select + close) — valid interactive structure */
@@ -631,10 +722,20 @@ details.tree>summary:hover{color:var(--text-2)}
 
 /* Narrow: the rail floats over the terminal instead of squeezing it below a usable width. */
 @media (max-width:1100px){
-  .body{grid-template-columns:222px minmax(0,1fr)}
-  .rail{position:absolute;top:0;right:0;bottom:0;width:min(420px,86vw);z-index:30;
-    box-shadow:-18px 0 50px -30px var(--shadow)}
+  /* applyLayout() drops the reader's track from the template at this width and sets data-float,
+     so the grid here is sidebar + terminal and the reader floats over the terminal rather than
+     squeezing it below a usable width. Docked BOTTOM it keeps its row and does not float. */
+  .body[data-float="on"]>.rail{position:absolute;top:0;right:0;bottom:0;left:auto;
+    width:min(420px,86vw);z-index:30;box-shadow:-18px 0 50px -30px var(--shadow)}
+  .body[data-float="on"][data-reader="left"]>.rail{right:auto;left:0;
+    box-shadow:18px 0 50px -30px var(--shadow)}
+  /* Split is forced OFF below this width by applyLayout() — two terminal groups inside what is
+     left of a narrow window is two unusable terminals. The layout menu says so rather than
+     silently ignoring the choice (R9). */
+  .lay-narrow{display:block}
 }
+.lay-narrow{display:none;font-family:var(--mono);font-size:9.5px;color:var(--warn-text);
+  line-height:1.5;margin:6px 5px 0}
 
 /* history lens — episodic recall over this workspace's own session scrollback */
 .hi-hint{padding:14px;color:var(--text-dim);font-size:11px;line-height:1.6}
@@ -672,17 +773,27 @@ details.tree>summary:hover{color:var(--text-2)}
 @media (max-width:760px){
   /* an extra row above the status strip carries the control bar + switcher */
   .app{grid-template-rows:44px minmax(0,1fr) auto 28px}
-  /* collapse to a single column; the switcher decides which pane is shown */
-  .body{grid-template-columns:1fr;position:relative}
+  /* collapse to a single column; the switcher decides which pane is shown. These are DIRECT
+     declarations and the layout writes custom properties, so the phone's arrangement wins here
+     whatever layout the desktop is on — the two systems never fight (R9). */
+  .body{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr);grid-template-areas:none;position:relative}
+  /* the named areas are gone here, so the panes must stop asking for them — a stale `grid-area`
+     places them on implicit tracks and the pane spills over the switcher it is covering */
+  .body>.side,.body>.term-col,.body>.rail,.body>.drop{grid-area:auto}
   .body>.side,.body>.term-col,.body>.rail{display:none}
-  .body[data-mview="sessions"]>.side{display:grid}
+  .body[data-mview="sessions"]>.side{display:flex}
   .body[data-mview="terminal"]>.term-col{display:flex}
   .body[data-mview="library"]>.rail,
-  .body.rail-off[data-mview="library"]>.rail{display:flex}
+  .body[data-reader="off"][data-mview="library"]>.rail{display:flex}
   /* the rail is a full-width pane here, not the floating overlay the ≤1100 rule makes it */
-  .rail{position:static;width:auto;box-shadow:none;z-index:auto;border-left:0}
-  .railgrip,.railsplit{display:none}      /* edge-drag is a pointer affordance; the switcher owns layout on touch */
-  .side{grid-template-rows:1fr 1fr}
+  .body[data-float="on"]>.rail,.rail{position:static;width:auto;box-shadow:none;z-index:auto;
+    border-left:0;border-top:0}
+  .railgrip,.railsplit,.side>.edge{display:none}  /* edge-drag is a pointer affordance; the switcher owns layout on touch */
+  .cap .grip,.lay-chip{display:none}              /* and so is the whole layout control (R9) */
+  .side>.pane{flex:1 1 0}
+  /* one group on a phone, always — the split is a desktop arrangement */
+  .groups{flex-direction:column}
+  .group+.group{display:none}
 
   /* the mobile menu: a terminal control bar (terminal view only) over the pane switcher */
   /* min-width:0 lets this grid item shrink below its content min-size, so the control bar's
@@ -810,3 +921,68 @@ details.tree>summary:hover{color:var(--text-2)}
   border:0;padding:10px 12px;background:var(--term-bg);color:var(--text-2);
   font-family:var(--mono);font-size:12px;line-height:1.5;outline:none}
 .scratch[data-open="true"] .scratch-text{display:block}
+
+/* ── the summoned review (workspace-review-and-edit) ──────────────────────────────────────────
+   Deliberately the quietest surface in the app. The PM's disposition on the prototype was "too much
+   guardrails and ceremony — guardrails is ok, just make it less obvious", so every guard here is
+   structural and none of them announces itself: no cards, no severity hues, no taxonomy headers.
+   A withheld finding is marked only by a hollow dot and the ABSENCE of an Apply button. */
+/* The rail is the surface's real home (~400-520px), not the full-width page the prototype was
+   judged on — so the rhythm is tuned for the column it actually lives in, and the max-width only
+   bites once the PM drags the rail wide. */
+.rv{max-width:660px;padding:16px 18px 36px}
+.rv-lede{font-size:15px;line-height:1.45;letter-spacing:-.01em;color:var(--text);margin-bottom:5px}
+.rv-sub{font-size:11.5px;line-height:1.55;color:var(--text-muted);margin-bottom:18px;
+  word-break:break-word;overflow-wrap:anywhere}
+.rv-sub .mono{font-size:10.5px}
+.rv-empty{padding:24px 22px;max-width:560px}
+.rv-empty p{font-size:14px;line-height:1.6;color:var(--text-2);margin-bottom:8px}
+.rv-empty .rv-dim{font-size:12.5px;color:var(--text-muted)}
+.rv-errs{margin:10px 0 0 18px;font-family:var(--mono);font-size:11px;color:var(--text-3);line-height:1.7}
+
+.rv-f{position:relative;padding:14px 0 14px 18px;border-top:1px solid var(--border-3);cursor:pointer}
+.rv-f:first-of-type{border-top:0}
+.rv-f::before{content:"";position:absolute;left:0;top:20px;width:5px;height:5px;border-radius:50%;
+  background:var(--text-dim)}
+.rv-f.on::before{background:var(--accent)}
+/* hollow = nothing to apply. The shape carries it, so meaning is never in hue alone. */
+.rv-f.rv-quiet::before{background:transparent;box-shadow:inset 0 0 0 1px var(--text-dim)}
+.rv-f.rv-done{opacity:.55}
+.rv-f.rv-done .rv-h{text-decoration:line-through;text-decoration-color:var(--text-dim)}
+.rv-h{font-size:13.5px;line-height:1.5;color:var(--text-2);letter-spacing:-.005em}
+.rv-f:hover .rv-h,.rv-f.on .rv-h{color:var(--text)}
+.rv-src{margin-top:4px;font-family:var(--mono);font-size:10.5px;color:var(--text-dim)}
+.rv-d{display:none;padding-top:11px}
+.rv-f.on .rv-d,.rv-f[data-editing="1"] .rv-d{display:block}
+.rv-d p{font-size:12.5px;line-height:1.7;color:var(--text-3);margin-bottom:10px}
+.rv-why{padding-left:11px;box-shadow:inset 2px 0 0 var(--border-strong);color:var(--text-muted)}
+.rv-acts{display:flex;gap:15px;align-items:center;flex-wrap:wrap;margin-top:12px}
+.rv-acts button{font-size:12.5px;color:var(--accent-text);padding:3px 0;min-height:30px}
+.rv-acts button:hover{text-decoration:underline}
+.rv-acts button.q{color:var(--text-dim)}
+.rv-only{font-size:12px;color:var(--text-dim)}
+.rv-tail{margin-top:30px;padding-top:14px;border-top:1px solid var(--border-3);
+  font-size:11.5px;line-height:1.7;color:var(--text-dim)}
+.rv-tail b{color:var(--text-muted);font-weight:500}
+.rv-say{margin-bottom:14px;padding:9px 12px;border-radius:9px;border:1px solid var(--bad);
+  background:rgba(242,101,95,.08);font-size:12px;line-height:1.55;color:var(--text-2)}
+
+/* the in-place editor — opens under the finding, never a modal or a mode switch */
+.rv-ed:empty{display:none}
+.rv-ed{padding-top:12px}
+.rv-edfile{display:flex;align-items:baseline;gap:10px;font-size:10.5px;color:var(--text-dim);margin-bottom:8px}
+.rv-n{margin-left:auto;font-family:var(--mono)}
+.rv-n b{color:var(--ok-text);font-weight:600}
+.rv-n i{color:var(--bad);font-style:normal;font-weight:600}
+.rv-code{font-family:var(--mono);font-size:11.5px;line-height:1.8;
+  border-top:1px solid var(--border-3);border-bottom:1px solid var(--border-3);padding:6px 0}
+.rv-l{display:grid;grid-template-columns:3px 1fr;align-items:start}
+.rv-l .g{align-self:stretch;border-radius:2px;background:transparent}
+.rv-l .t{padding:0 4px 0 11px;white-space:pre-wrap;word-break:break-word;color:var(--text-3)}
+.rv-l.was .g{background:rgba(242,101,95,.5)}
+.rv-l.was .t{color:var(--text-dim);text-decoration:line-through;text-decoration-color:rgba(242,101,95,.55)}
+.rv-ta{width:100%;box-sizing:border-box;margin-top:8px;resize:vertical;
+  border:1px solid var(--border);border-left:3px solid var(--ok);border-radius:0 7px 7px 0;
+  padding:8px 11px;background:rgba(72,213,151,.06);color:var(--text-2);
+  font-family:var(--mono);font-size:11.5px;line-height:1.8;outline:none}
+.rv-ta:focus{border-color:var(--accent);border-left-color:var(--ok)}