@nanocollective/roster 0.1.0-alpha.4 → 0.1.0-alpha.40

package/templates/portal/css/graph.css

@@ -1,26 +1,31 @@
 /* The link graph: canvas, its controls, and the sheet a selected fact opens. */
 
-.graphwrap{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:9px;overflow:hidden}
+.graphwrap{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
+  background:var(--panel);
+  box-shadow:var(--shadow-sm)}
 #graph{display:block;width:100%;height:72vh;cursor:grab;touch-action:none}
 #graph.grabbing{cursor:grabbing}
 #graph.onnode{cursor:pointer}
 
 .legend{position:absolute;left:12px;bottom:12px;font:11px var(--mono);color:var(--ink-dim);
-        background:color-mix(in srgb,var(--panel) 92%,transparent);padding:8px 11px;border-radius:7px;
+        background:var(--bg-elev);
+        padding:9px 12px;border-radius:var(--r);box-shadow:var(--shadow);
         border:1px solid var(--line);max-height:44%;overflow:auto}
 .legend div{white-space:nowrap;line-height:1.75;cursor:pointer;opacity:.55}
 .legend div.on{opacity:1}
 .legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px}
 
 .gtools{position:absolute;right:12px;top:12px;display:flex;gap:7px;align-items:center}
-.gtools button{background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--line);
-        color:var(--ink-dim);border-radius:7px;padding:5px 10px;font:11.5px var(--mono);cursor:pointer}
-.gtools button:hover{color:var(--ink);border-color:var(--accent-dim)}
+.gtools button{background:var(--surface-2);
+        border:1px solid transparent;
+        color:var(--ink-dim);border-radius:8px;padding:5px 10px;font:11.5px var(--mono);cursor:pointer}
+.gtools button:hover{color:var(--ink);background:color-mix(in srgb,var(--surface-2) 88%,var(--ink) 12%)}
 .gtools input[type=search]{width:170px;padding:5px 10px;font:11.5px var(--mono)}
 
 .sheet{position:absolute;right:0;top:0;bottom:0;width:370px;max-width:100%;
-       background:var(--panel);border-left:1px solid var(--line);padding:20px 22px;
-       overflow:auto;box-shadow:-14px 0 34px rgba(0,0,0,.16)}
+       background:var(--bg-elev);border-left:1px solid var(--border-strong);padding:22px 24px;
+       overflow:auto;box-shadow:var(--shadow-lg);animation:sheetin .2s var(--ease)}
+@keyframes sheetin{from{transform:translateX(12px);opacity:0}}
 .sheet .x{position:absolute;right:12px;top:12px;background:none;border:0;color:var(--ink-faint);
        cursor:pointer;display:inline-flex;padding:4px;border-radius:6px;--ic:16px}
 .sheet .x:hover{color:var(--ink);background:var(--panel-2)}

package/templates/portal/css/health.css

@@ -1,10 +1,12 @@
 /* The health screen's fact strip and lint cards. */
 
-.kv{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:12px 14px}
-.kv .k{font:10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
-.kv .v{margin-top:5px;font:14px var(--sans);color:var(--ink);line-height:1.45}
+.kv{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;
+    box-shadow:var(--shadow-sm)}
+.kv .k{font:600 10.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
+.kv .v{margin-top:6px;font:500 15px var(--sans);color:var(--ink);line-height:1.4;letter-spacing:-.01em;
+    font-variant-numeric:tabular-nums}
 .kv .v small{display:block;color:var(--ink-faint);font-size:11.5px;margin-top:2px}
-.kv.bad{border-color:color-mix(in srgb,var(--err) 45%,transparent)}
+.kv.bad{border-color:color-mix(in srgb,var(--err) 35%,transparent)}
 .kv.bad .v{color:var(--err)}
 .card .fix{margin-top:10px}
 .card .fixed{color:var(--accent);font:11.5px var(--mono)}
@@ -15,8 +17,8 @@
    shape now. A heading carries its own count, so the page can be read by scanning the left
    edge, and each section's own actions sit at its end rather than above its findings. */
 .hsect{display:flex;align-items:baseline;gap:10px;
-      font:600 10.5px var(--sans);letter-spacing:.09em;text-transform:uppercase;
-      color:var(--ink-faint);margin:28px 0 0;padding-bottom:8px;
+      font:600 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;
+      color:var(--ink-faint);margin:32px 0 0;padding-bottom:9px;
       border-bottom:1px solid var(--line)}
 .hsect i{margin-left:auto;font:11.5px var(--mono);font-style:normal;letter-spacing:0;
       text-transform:none;color:var(--ink-faint)}
@@ -35,10 +37,10 @@
 
 /* A plan, before anything happens. The two halves are deliberately equal in weight: "this is
    what it keeps" is what somebody needs to believe before retiring anybody. */
-.plan{border:1px solid var(--line);border-radius:9px;padding:14px 16px;margin-top:14px;
-      background:var(--panel)}
-.plan h3{margin:0 0 10px;font:600 15px var(--sans)}
-.planhead{font:600 10.5px var(--sans);letter-spacing:.09em;text-transform:uppercase;
+.plan{border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;margin-top:14px;
+      background:var(--panel);box-shadow:var(--shadow-sm)}
+.plan h3{margin:0 0 10px;font:600 15px var(--sans);letter-spacing:-.015em}
+.planhead{font:600 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;
       color:var(--ink-faint);margin:14px 0 7px}
 .planhead:first-of-type{margin-top:0}
 .planhead.keep{color:var(--accent)}
@@ -52,7 +54,7 @@
 .planline.todo .ic{color:var(--warn)}
 .planline.warn{color:var(--ink-faint)}
 .planline.warn .ic{color:var(--warn)}
-.planout{margin-top:14px;max-height:320px;overflow:auto;font-size:11.5px}
+.planout{margin-top:14px;font-size:11.5px}
 
 .ffield{margin-bottom:10px}
 .ffield label{display:block;font:600 11px var(--sans);letter-spacing:.05em;

package/templates/portal/css/inbox.css

@@ -5,15 +5,16 @@
    the inbox hard to scan. The line is dropped either side of the selected row, whose own
    background is already doing the separating. */
 .irow{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
-      padding:11px 10px;border-radius:7px;color:var(--ink-dim);
-      border-top:1px solid transparent}
+      padding:11px 12px;border-radius:var(--r);color:var(--ink-dim);
+      border-top:1px solid transparent;transition:background .12s var(--ease)}
 .irow + .irow{border-top-color:var(--line)}
 .irow[aria-current="true"],.irow[aria-current="true"] + .irow{border-top-color:transparent}
-.irow:hover{background:var(--panel-2)}
+.irow:hover{background:var(--hover)}
+.irow:hover + .irow,.irow:hover{border-top-color:transparent}
 .irow:focus{outline:none}
-.irow:focus-visible{outline:2px solid var(--accent-dim);outline-offset:-2px}
-.irow[aria-current="true"]{background:var(--panel-2);box-shadow:inset 2px 0 0 var(--accent)}
-.ititle{font:13.5px/1.4 var(--sans);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;
+.irow:focus-visible{box-shadow:inset 0 0 0 1px var(--accent-dim)}
+.irow[aria-current="true"]{background:var(--accent-soft)}
+.ititle{font:500 13.5px/1.4 var(--sans);letter-spacing:-.005em;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;
         -webkit-box-orient:vertical;overflow:hidden}
 .irow[aria-current="true"] .ititle{color:var(--accent)}
 /* The rest of the row follows the title. The project label kept the flat grey it has when
@@ -25,7 +26,7 @@
 .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--warn);
      margin-right:6px;vertical-align:2px}
 .imeta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:5px}
-.imeta .repo{font:10px var(--sans);letter-spacing:.03em;text-transform:uppercase;
+.imeta .repo{font:600 10px var(--sans);letter-spacing:.06em;text-transform:uppercase;
       color:var(--ink-faint);border-right:1px solid var(--line);padding-right:7px}
 .imeta .num{font:10.5px var(--mono);color:var(--ink-faint)}
 .imeta .when{font:10.5px var(--sans);color:var(--ink-faint);margin-left:auto}
@@ -40,20 +41,41 @@
 .ist{display:inline-flex;--ic:12px}
 .ist.closed{color:var(--derived)} .ist.merged{color:var(--derived)}
 .ck.passing{color:var(--accent)} .ck.failing{color:var(--err)} .ck.pending{color:var(--warn)}
+/* Filled rather than outlined like the label chips beside it. A branch that no longer applies
+   to its base is the one state where a row can show green checks and still not be mergeable,
+   so it has to win the row it is in. */
+.chip.conflict{color:var(--err);border-color:color-mix(in srgb,var(--err) 50%,transparent);
+      background:color-mix(in srgb,var(--err) 14%,transparent)}
 
 /* ---------- thread ---------- */
 .thead{border-bottom:1px solid var(--line);padding-bottom:16px}
-.thead h3{margin:8px 0 0;font:600 17px/1.35 var(--sans);letter-spacing:-.012em;color:var(--ink)}
-.tlabels{margin-top:10px}
-.cmt{border-top:1px solid var(--line);padding:16px 0}
-.cmt.first{border-top:0}
+.thead h3{margin:8px 0 0;font:600 19px/1.3 var(--sans);letter-spacing:-.02em;color:var(--ink)}
+/* The same fact as the chip, said in full, once, at the top of the thread it applies to.
+   Tight to the title and a clear gap above the buttons: it is a statement about this pull
+   request, not a caption on the controls. At an even 10/16 it read as the latter. */
+.tconflict{margin:4px 0 0;font:12.5px/1.5 var(--sans);color:var(--err)}
+/* A bottom margin here would collapse against the row's own 16px and change nothing, so the
+   extra room is put on the row. General sibling, not adjacent: labels can sit between them. */
+.tconflict ~ .tacts{margin-top:24px}
+.tmetalabels{display:inline-flex;gap:6px;margin-left:10px;vertical-align:middle;font-family:var(--sans)}
+/* A comment is a card with a header strip, so each message has a clear start and end. */
+.cmt{border:1px solid var(--line);border-radius:var(--r-lg);margin:14px 0;background:var(--panel);overflow:hidden}
+.cmt.human{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
+.chead{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--panel-2);
+       border-bottom:1px solid var(--line);font:13px var(--sans);color:var(--ink-dim)}
+.cmt.human .chead{background:color-mix(in srgb,var(--accent) 8%,var(--panel-2))}
+.chead .ic{--ic:14px;color:var(--ink-faint)}
+.chead b{color:var(--ink);font-weight:600}
+.chead .clogin{font:11.5px var(--mono);color:var(--ink-faint)}
+.chead .cwhen{margin-left:auto;font-size:12px;color:var(--ink-faint);white-space:nowrap}
+.cbodywrap{padding:12px 16px 14px}
 /* The header already draws a line under itself. Whatever the reversed thread puts first must
    not draw a second one right under it. */
 .lead{border-top:0}
 /* Reactions. Small, under the comment they belong to, the way GitHub puts them — an agent's
    👀 is an acknowledgement and it should be readable at a glance rather than counted. */
 .reacts{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
-.react{font:11px var(--sans);border:1px solid var(--line);border-radius:20px;padding:2px 9px;
+.react{font:11px var(--sans);border:1px solid var(--line);border-radius:999px;padding:2px 9px;
        color:var(--ink-dim);background:var(--panel-2);cursor:default}
 /* Reply, close and merge, beside the title rather than under the last comment. A thread is
    read newest-first and answered from the top, so nothing here is worth scrolling to. */
@@ -67,10 +89,11 @@
    rather than three places to navigate to. */
 .tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:2px 0 0}
 .tab{background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;
-     font:12.5px var(--sans);color:var(--ink-faint);padding:9px 12px;margin-bottom:-1px}
+     font:500 12.5px var(--sans);color:var(--ink-faint);padding:9px 12px;margin-bottom:-1px;
+     transition:color .15s var(--ease),border-color .15s var(--ease)}
 .tab:hover{color:var(--ink)}
 .tab[aria-current="true"]{color:var(--ink);border-bottom-color:var(--accent)}
-.tab:focus-visible{outline:2px solid var(--accent-dim);outline-offset:-2px}
+.tab:focus-visible{box-shadow:inset 0 0 0 1px var(--accent-dim);border-radius:6px 6px 0 0}
 
 .prcommit{display:flex;gap:10px;align-items:baseline;padding:8px 0;
           border-top:1px solid var(--line);font-size:12.5px}
@@ -89,9 +112,9 @@
 .labelpick .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
 .chip.pick{background:none;cursor:pointer;padding:3px 9px;font-size:11px;color:var(--ink-dim)}
 .chip.pick:hover{border-color:var(--ink-faint);color:var(--ink)}
-.chip.pick:focus-visible{outline:2px solid var(--accent-dim);outline-offset:1px}
-.chip.pick[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 16%,transparent);
-      border-color:var(--accent-dim);color:var(--ink)}
+.chip.pick:focus-visible{box-shadow:0 0 0 3px var(--accent-soft);border-color:var(--accent)}
+.chip.pick[aria-pressed="true"]{background:var(--accent-soft);
+      border-color:var(--accent-dim);color:var(--accent)}
 
 /* ---------- the @ list ----------
    A mention is the mechanism: a staff member's workflow gates on their handle, so a misspelled
@@ -101,12 +124,12 @@
    The height is capped well under a dialog's, because it is placed inside one and a dialog
    scrolls its own box: anything taller is not long, it is cut off. */
 .mentions{position:absolute;z-index:30;min-width:280px;max-width:min(420px,90%);max-height:196px;
-      overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:8px;
-      padding:4px;box-shadow:0 14px 34px rgba(0,0,0,.28)}
+      overflow-y:auto;background:var(--bg-elev);border:1px solid var(--border-strong);border-radius:var(--r);
+      padding:4px;box-shadow:var(--shadow-lg)}
 .mrow{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;width:100%;text-align:left;
       background:none;border:0;border-radius:6px;padding:6px 8px;cursor:pointer;font:inherit}
-.mrow:hover{background:var(--panel-2)}
-.mrow[aria-selected="true"]{background:var(--panel-2);box-shadow:inset 2px 0 0 var(--accent)}
+.mrow:hover{background:var(--hover)}
+.mrow[aria-selected="true"]{background:var(--accent-soft)}
 .mrow .mat{font:12px var(--mono);color:var(--accent)}
 .mrow .mname{font:12.5px var(--sans);color:var(--ink);overflow:hidden;text-overflow:ellipsis;
       white-space:nowrap}
@@ -124,7 +147,8 @@ textarea.dropping{border-color:var(--accent);background:color-mix(in srgb,var(--
 /* ---------- timeline events ----------
    Not comments, so not comment-shaped: a marker, a line of prose, and whatever it points at.
    These carry the half of a thread that is agents referring to each other's work. */
-.tev{display:flex;gap:10px;align-items:flex-start;padding:9px 0 9px 2px;
+.tev{display:flex;gap:10px;align-items:flex-start;padding:6px 0 6px 12px;margin-left:18px;
+     border-left:2px solid var(--line);
      font:12.5px/1.5 var(--sans);color:var(--ink-dim)}
 .tev .tico{flex:none;display:inline-flex;align-items:center;justify-content:center;
      width:16px;height:19px;color:var(--ink-faint);--ic:14px}
@@ -144,9 +168,10 @@ textarea.dropping{border-color:var(--accent);background:color-mix(in srgb,var(--
 /* An item this thread points at, as a row you can open here rather than a link that throws
    you out to GitHub. Open and closed read at a glance, which is the whole reason to show it. */
 .xref{display:flex;gap:8px;align-items:baseline;width:100%;text-align:left;background:none;
-      border:1px solid var(--line);border-radius:7px;padding:6px 10px;margin-top:5px;
-      cursor:pointer;color:var(--ink-dim);font:12.5px var(--sans)}
-.xref:hover{border-color:var(--accent-dim);background:var(--panel-2);color:var(--ink)}
+      border:1px solid var(--line);border-radius:var(--r);padding:7px 11px;margin-top:6px;
+      cursor:pointer;color:var(--ink-dim);font:12.5px var(--sans);background:var(--bg-elev);
+      transition:border-color .15s var(--ease),background .15s var(--ease),color .15s var(--ease)}
+.xref:hover{border-color:var(--border-strong);background:var(--surface-2);color:var(--ink)}
 .xref .st{flex:none;display:inline-flex;--ic:14px;position:relative;top:2px}
 .xref .st.open{color:var(--accent)} .xref .st.closed{color:var(--derived)}
 .xref .st.merged{color:var(--derived)} .xref .st.draft{color:var(--ink-faint)}
@@ -165,3 +190,10 @@ textarea.dropping{border-color:var(--accent);background:color-mix(in srgb,var(--
 .tevmore[aria-expanded="true"] .caret{transform:none}
 .tevquiet{border-left:1px solid var(--line);margin-left:9px;padding-left:14px}
 .tevquiet .tev{padding:5px 0;font-size:12px}
+
+/* Unread, from GitHub's notifications: a bar on the left and a heavier title. Cleared on open. */
+.irow.unread{box-shadow:inset 3px 0 0 var(--blue);background:color-mix(in srgb,var(--blue) 6%,transparent)}
+.irow.unread .ititle{font-weight:700;color:var(--ink)}
+
+/* A little room between rows, so unread cards and the selected row do not run together. */
+.irow{margin:3px 0}

package/templates/portal/css/layout.css

@@ -1,75 +1,104 @@
 /* The page frame: sidebar, main column, and the tree-beside-viewer split every screen uses. */
 
-.app{display:grid;grid-template-columns:246px 1fr;min-height:100vh}
+.app{display:grid;grid-template-columns:252px 1fr;min-height:100vh}
 /* ---------- sidebar ---------- */
-.side{background:var(--panel);border-right:1px solid var(--line);padding:20px 0 14px;
-      position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column}
-.brand{padding:0 20px 18px;font:600 15px var(--sans);letter-spacing:-.01em}
+.side{background:var(--side);border-right:1px solid var(--line);padding:16px 10px 12px;
+      position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;
+      gap:1px}
+.brand{padding:4px 10px 16px;font:600 15px/1.2 var(--sans);letter-spacing:-.02em;
+       display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
 /* The tab icon, in the corner it belongs in. Drawn rather than fetched so it takes the
    theme's accent and costs no request. */
-.brand .mark{display:inline-block;width:9px;height:9px;border-radius:50%;
-             background:var(--accent);margin-right:7px;vertical-align:1px}
+.brand .mark{grid-row:1/3;display:inline-block;width:24px;height:24px;border-radius:7px;
+             background:var(--accent-fill)}
 .brand small{display:block;color:var(--ink-faint);font-weight:400;font-size:11.5px;
-             letter-spacing:.02em;margin-top:2px;margin-left:16px}
-.refreshall{display:flex;align-items:center;gap:8px;width:calc(100% - 24px);margin:0 12px 4px;
-      background:var(--panel-2);border:1px solid var(--line);color:var(--ink-faint);
-      border-radius:7px;padding:7px 10px;cursor:pointer;font:11px var(--sans);text-align:left}
-.refreshall:hover{color:var(--ink);border-color:var(--accent-dim)}
+             letter-spacing:0;margin-top:2px;overflow:hidden;text-overflow:ellipsis;
+             white-space:nowrap}
+.refreshall{display:flex;align-items:center;gap:8px;width:100%;margin:0 0 12px;
+      background:var(--hover);border:1px solid transparent;color:var(--ink-dim);
+      border-radius:8px;padding:6px 10px;cursor:pointer;font:11.5px var(--sans);text-align:left;
+      transition:color .15s var(--ease),background .15s var(--ease)}
+.refreshall:hover{color:var(--ink);background:var(--active)}
 .refreshall .sync{display:inline-flex;--ic:13px;flex:none}
 .refreshall.spin .sync{animation:spin .9s linear infinite}
 
-.sect{padding:14px 20px 6px;font:600 10.5px var(--sans);letter-spacing:.09em;
+.sect{padding:16px 10px 6px;font:600 11px var(--sans);letter-spacing:.08em;
       text-transform:uppercase;color:var(--ink-faint)}
+/* The Staff heading is also the fold for the list under it, so it is a button — and has to
+   go on reading as a heading rather than as a control. The caret and the left padding
+   are the staff rows' own, so the two carets line up in one column. */
+.sectfold{display:flex;align-items:center;gap:7px;width:100%;background:none;border:0;
+      border-radius:6px;cursor:pointer;text-align:left;font:600 11px var(--sans);letter-spacing:.08em;
+      text-transform:uppercase;color:var(--ink-faint);margin-top:12px;
+      transition:color .15s var(--ease)}
+.sectfold:hover{color:var(--ink-dim)}
+.sectfold .caret{display:inline-flex;--ic:12px;flex:none;transition:transform .15s var(--ease)}
+.sectfold[aria-expanded="false"] .caret{transform:rotate(-90deg)}
+/* The count is a number, not a heading: mono, and none of the heading's letterspacing. */
+.sectfold .n{font:10.5px var(--mono);letter-spacing:0;text-transform:none;color:var(--ink-faint);
+      font-variant-numeric:tabular-nums}
 /* Flex, not block with a float. The icons are block-level SVGs and the trailing count has to
    sit hard right; `float` does neither of those inside a flex row, and did neither of them
    outside one once the icons arrived. */
-.nav{display:flex;align-items:center;width:100%;text-align:left;background:none;border:0;
-     color:var(--ink-dim);font:14px var(--sans);padding:7px 20px;cursor:pointer;
-     border-left:2px solid transparent}
-.nav:hover{color:var(--ink);background:var(--panel-2)}
-.nav[aria-current="true"]{color:var(--ink);border-left-color:var(--accent);background:var(--panel-2)}
-.nav .ic{color:var(--ink-faint);margin-right:9px;--ic:15px;flex:none}
-.nav .n{margin-left:auto;padding-left:10px;color:var(--ink-faint);font:11px var(--mono)}
-.nav.top{margin-bottom:2px}
+.nav{position:relative;display:flex;align-items:center;width:100%;text-align:left;background:none;
+     border:0;border-radius:7px;color:var(--ink-dim);font:500 13.5px var(--sans);padding:6px 10px;
+     cursor:pointer;min-height:32px;
+     transition:background .15s var(--ease),color .15s var(--ease)}
+.nav:hover{color:var(--ink);background:var(--hover)}
+.nav:focus-visible{box-shadow:0 0 0 2px var(--accent-soft),inset 0 0 0 1px var(--accent-dim)}
+.nav[aria-current="true"]{color:var(--ink);background:var(--sel)}
+.nav .ic{color:var(--ink-faint);margin-right:10px;--ic:15px;flex:none;
+     transition:color .15s var(--ease)}
+.nav:hover .ic{color:var(--ink-dim)}
+.nav[aria-current="true"] .ic{color:var(--accent)}
+.nav .n{margin-left:auto;padding-left:10px;color:var(--ink-faint);font:500 10.5px var(--mono);
+     font-variant-numeric:tabular-nums}
+.nav .n:not(:empty):not(.wait){padding:1px 7px;border-radius:999px;margin-left:auto;
+     background:var(--sel);color:var(--ink-dim);min-width:20px;
+     text-align:center}
+.nav .n.wait{margin-left:auto}
+.nav.top{margin-bottom:0}
 
 /* Staff are rows that unfold into their own views, rather than a dropdown plus a list you
    have to connect for yourself. The nesting is the hierarchy, said out loud. */
-.staffrow{display:flex;align-items:center;gap:7px;font:13.5px var(--sans);color:var(--ink);
-      padding-right:14px}
-.staffrow .caret{color:var(--ink-faint);--ic:12px;flex:none;transition:transform .12s ease}
+.staffrow{display:flex;align-items:center;gap:7px;font:500 13px var(--sans);color:var(--ink);
+      padding-right:10px}
+.staffrow .caret{color:var(--ink-faint);--ic:12px;flex:none;transition:transform .15s var(--ease)}
 .staffrow[aria-expanded="false"] .caret{transform:rotate(-90deg)}
 .staffrow .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .staffrow .hh{font:10.5px var(--mono);color:var(--ink-faint);flex:none}
 .staffrow[aria-selected="true"]{color:var(--ink)}
-.staffviews{padding-bottom:4px}
-/* `subnav`, not `sub`: `.sub` is the page subtitle and carries a 24px bottom margin, which
+.staffviews{position:relative;padding:2px 0 6px;margin-left:12px}
+/* `subnav`, not `sub`: `.sub` is the page subtitle and carries a bottom margin, which
    these rows inherited as a gap you could park a car in. */
-.nav.subnav{padding:5px 20px 5px 40px;font-size:13px}
+.nav.subnav{padding:4px 10px 4px 16px;font-size:12.5px;min-height:28px}
 .nav.subnav .n{font-size:10px}
-.sidefoot{margin-top:auto;padding-top:14px}
+.sidefoot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
 .sidefoot .nav{font-size:12.5px;color:var(--ink-faint)}
 .sidefoot .nav:hover{color:var(--ink-dim)}
 
 /* ---------- main ---------- */
-main{padding:28px 34px 80px;max-width:1180px;overflow-x:hidden}
+/* clip, not hidden: hidden makes main a scroll container, and nothing inside it can be sticky. */
+main{padding:36px 44px 96px;max-width:1220px;overflow-x:clip}
 
 /* ---------- tree beside viewer ---------- */
 .split{display:grid;grid-template-columns:314px 1fr;gap:16px;align-items:start}
 @media (max-width:900px){.split{grid-template-columns:1fr}}
-.tree{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:9px;
-      max-height:74vh;overflow:auto}
-.tdir{font:600 11px var(--mono);color:var(--ink-faint);padding:8px 8px 4px;letter-spacing:.04em}
-.tdir.first{padding-top:2px}
+/* The list beside a viewer stays in view while a long file or thread scrolls. */
+.tree{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:6px;
+      max-height:calc(100vh - 40px);overflow:auto;box-shadow:var(--shadow-sm);position:sticky;top:20px}
+.tdir{font:600 11px var(--mono);color:var(--ink-faint);padding:9px 8px 4px;letter-spacing:.02em}
+.tdir.first{padding-top:3px}
 .tfile{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;background:none;
-       border:0;color:var(--ink-dim);font:12.5px var(--mono);padding:4px 8px;border-radius:5px;
-       cursor:pointer}
-.tfile:hover{background:var(--panel-2);color:var(--ink)}
-.tfile[aria-current="true"]{background:var(--panel-2);color:var(--accent)}
+       border:0;color:var(--ink-dim);font:12.5px var(--mono);padding:5px 8px;border-radius:6px;
+       cursor:pointer;transition:background .12s var(--ease),color .12s var(--ease)}
+.tfile:hover{background:var(--hover);color:var(--ink)}
+.tfile[aria-current="true"]{background:var(--accent-soft);color:var(--accent)}
 .tfile span.t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .tfile i{color:var(--ink-faint);font-style:normal;font-size:10.5px;flex:none;
       font-variant-numeric:tabular-nums}
 .tfile:focus{outline:none}
-.tfile:focus-visible{outline:2px solid var(--accent-dim);outline-offset:-2px}
+.tfile:focus-visible{box-shadow:inset 0 0 0 1px var(--accent-dim)}
 
 /* A search result: the page, and the lines the words were actually found in. Without the lines
    this is a filter on titles, which is the thing that was not good enough. */
@@ -82,8 +111,9 @@ main{padding:28px 34px 80px;max-width:1180px;overflow-x:hidden}
 .thit .hitline em{font-style:normal;color:var(--ink);background:color-mix(in srgb,var(--accent) 22%,transparent);
       border-radius:3px;padding:0 2px}
 
-.viewer{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:20px 22px;
-        min-height:340px;max-height:74vh;overflow:auto}
+/* No height cap: a file grows the page, so there is one scrollbar, not one inside another. */
+.viewer{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 26px;
+        min-height:340px;min-width:0;box-shadow:var(--shadow-sm)}
 .viewer pre{margin:0;white-space:pre-wrap;word-break:break-word;font:12.5px/1.65 var(--mono);color:var(--ink-dim)}
 /* Source keeps its own line breaks and scrolls, rather than wrapping into soup. */
 .viewer pre.code{white-space:pre;word-break:normal;overflow-x:auto}
@@ -94,12 +124,14 @@ main{padding:28px 34px 80px;max-width:1180px;overflow-x:hidden}
 .viewer audio.player{background:none}
 .viewer table{border-collapse:collapse;font:12px var(--mono);width:100%}
 .viewer td,.viewer th{border:1px solid var(--line);padding:4px 8px;text-align:left;white-space:nowrap}
-.viewer th{position:sticky;top:0;background:var(--panel-2);color:var(--ink)}
+.viewer th{position:sticky;top:0;background:var(--panel-2);color:var(--ink);font-weight:600}
 
 .gallery{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
 .gallery figure{margin:0;position:relative}
 .gallery img,.gallery video{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--panel-2);
-             border-radius:6px;border:1px solid var(--line);cursor:pointer;display:block}
+             border-radius:var(--r);border:1px solid var(--line);cursor:pointer;display:block;
+             transition:border-color .15s var(--ease),transform .15s var(--ease)}
+.gallery img:hover,.gallery video:hover{border-color:var(--border-strong)}
 /* A still frame and a photograph look identical in a grid, so the video says which it is. */
 .playmark{position:absolute;top:8px;right:8px;display:inline-flex;padding:4px;border-radius:50%;
           background:color-mix(in srgb,#000 55%,transparent);color:#fff;--ic:12px;pointer-events:none}
@@ -118,3 +150,26 @@ main{padding:28px 34px 80px;max-width:1180px;overflow-x:hidden}
   .side{position:static;height:auto;border-right:none;border-bottom:1px solid var(--line)}
   .sidefoot{margin-top:0}
 }
+
+/* A staff member who cannot run yet (readiness.js). */
+.readydot{width:7px;height:7px;border-radius:50%;background:var(--warn);flex:none;margin-left:4px}
+.staffcard.notready{border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
+.hirecard{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:120px;
+      border:1.5px dashed var(--border-strong);border-radius:var(--r-lg);background:none;color:var(--ink-dim);
+      font:600 14px var(--sans);cursor:pointer}
+.hirecard:hover{color:var(--ink);border-color:var(--accent)}
+.hirecard::before{content:"+";font-size:22px;line-height:1}
+
+/* The inbox toolbar: one height, one line. */
+.inboxbar{align-items:center}
+.inboxbar > *{height:34px;box-sizing:border-box}
+.inboxbar .modes{margin:0;padding:3px;align-items:stretch}
+.inboxbar .mode{display:flex;align-items:center}
+.inboxbar .iconbtn{width:34px;display:grid;place-items:center}
+.inboxbar .ghbtn{display:flex;align-items:center}
+/* Staff and issue icons in the sidebar. */
+.nav.inboxlink{display:flex;align-items:center;gap:8px}
+.nav.inboxlink .ic,.staffrow .ic{--ic:14px;color:var(--ink-faint);flex:none}
+.nav.inboxlink[aria-current="true"] .ic{color:var(--accent)}
+/* The unread count matches the unread rows. Empty, it stays grey like every other badge. */
+#unreadcount:not(:empty):not(.wait){background:var(--blue);color:#fff}

package/templates/portal/css/markdown.css

@@ -1,34 +1,37 @@
 /* One renderer, two sizes: .cbody is a comment in a thread, .doc is a file being read.
    Everything shared lives on .md so a fix reaches both. */
 
-.md{line-height:1.65}
+.md{line-height:1.7}
 .md>:first-child{margin-top:0}
 .md p{margin:0 0 10px}
 .md h1,.md h2,.md h3,.md h4,.md h5,.md h6{color:var(--ink);font-weight:600;line-height:1.3;
-      margin:22px 0 8px;letter-spacing:-.012em}
-.md h1{font-size:20px} .md h2{font-size:17px} .md h3{font-size:15px}
+      margin:26px 0 10px;letter-spacing:-.02em}
+.md h1{font-size:22px} .md h2{font-size:17.5px} .md h3{font-size:15px}
 .md h4,.md h5,.md h6{font-size:13.5px;color:var(--ink-dim)}
-.md h1,.md h2{padding-bottom:6px;border-bottom:1px solid var(--line)}
+.md h1,.md h2{padding-bottom:8px;border-bottom:1px solid var(--line)}
 .md ul,.md ol{margin:0 0 10px;padding-left:20px}
 .md li{margin:3px 0}
 .md li>ul,.md li>ol{margin:4px 0 0}
 .md ul.tasks{list-style:none;padding-left:1px}
 .md .box{color:var(--ink-faint);margin-right:6px;display:inline-flex;--ic:14px;
       vertical-align:-3px}
-.md code{font:12px var(--mono);color:var(--accent);background:var(--panel-2);
-      padding:1px 4px;border-radius:4px;word-break:break-word}
-.md pre{background:var(--panel-2);border:1px solid var(--line);border-radius:7px;
-      padding:11px 13px;font:12px/1.62 var(--mono);margin:10px 0;color:var(--ink-dim);
+.md code{font:12px var(--mono);color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent);
+      padding:1px 5px;border-radius:5px;word-break:break-word}
+.md pre{background:var(--surface-2);border:0;border-radius:var(--r);
+      padding:13px 15px;font:12px/1.62 var(--mono);margin:10px 0;color:var(--ink-dim);
       overflow-x:auto;white-space:pre}
-.md pre code{background:none;padding:0;color:inherit;font-size:inherit}
-.md a{color:var(--ruled)}
-.md blockquote{margin:10px 0;padding:2px 0 2px 12px;border-left:2px solid var(--line);color:var(--ink-dim)}
+.md pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}
+.md a{color:var(--accent);text-decoration:underline;text-decoration-color:var(--accent-dim);
+      text-underline-offset:3px;text-decoration-thickness:1px}
+.md a:hover{text-decoration-color:var(--accent)}
+.md blockquote{margin:12px 0;padding:2px 0 2px 14px;border-left:3px solid var(--line);color:var(--ink-dim)}
 .md hr{border:0;border-top:1px solid var(--line);margin:16px 0}
 .md img{max-width:100%;border-radius:6px;background:var(--panel-2)}
 .md .ctable{overflow-x:auto;margin:10px 0;max-width:100%}
 .md table{border-collapse:collapse;font-size:12.5px;width:100%}
-.md th,.md td{border:1px solid var(--line);padding:6px 9px;text-align:left;vertical-align:top}
-.md th{background:var(--panel-2);color:var(--ink);font-weight:600;white-space:nowrap}
+.md th,.md td{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
+.md th{background:var(--panel-2);color:var(--ink);font-weight:600;white-space:nowrap;
+      font-size:11.5px;letter-spacing:.02em}
 .md td{color:var(--ink-dim)}
 .md td b,.md td strong{color:var(--ink)}
 .cbody{margin-top:8px;font-size:13.5px;max-width:74ch}
@@ -70,5 +73,24 @@ pre.yaml{color:var(--ink)}
    Bordered and inset so it reads as a figure rather than the page bleeding into another one:
    these are pictures of this same UI, and without a frame the two run together. */
 .md img{display:block;max-width:100%;height:auto;margin:14px 0;
-        border:1px solid var(--line);border-radius:8px}
+        border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
 .md img+em,.md p>img+em{display:block}
+
+/* ---------- highlighted editors (mdedit.js) ---------- */
+
+.hled{position:relative}
+.hled .hlback{position:absolute;inset:0;margin:0;pointer-events:none;overflow:hidden;
+      white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;color:var(--ink);
+      border-color:transparent !important;background:transparent !important}
+.hled .hlfront{position:relative;color:transparent;background:transparent;caret-color:var(--ink);
+      -webkit-text-fill-color:transparent}
+.hled .hlfront::selection{background:var(--accent-soft)}
+.mdh{color:var(--ruled);font-weight:700}
+.mdb{font-weight:700}
+.mdi{font-style:italic}
+.mdc,.mdcode,.mdfence{color:var(--derived)}
+.mdq{color:var(--ink-dim);font-style:italic}
+.mdl{color:var(--accent)}
+.mdk{color:var(--accent)}
+.mdu{color:var(--ink-faint)}
+.mdt{color:var(--ruled)}

package/templates/portal/css/runs.css

@@ -0,0 +1,13 @@
+/* The Runs screen: a spend strip, then one table per staff member. */
+
+.runsum{margin-bottom:6px}
+.hsect i.warn{color:var(--warn)}
+.runtable{border-collapse:collapse;width:100%;margin-top:8px;font:12px var(--mono);
+      font-variant-numeric:tabular-nums}
+.runtable th{text-align:left;font:600 10.5px var(--sans);letter-spacing:.06em;text-transform:uppercase;
+      color:var(--ink-faint);padding:6px 10px 6px 0;border-bottom:1px solid var(--line)}
+.runtable td{padding:7px 10px 7px 0;border-bottom:1px solid var(--line);color:var(--ink-dim);
+      white-space:nowrap}
+.runtable td:last-child,.runtable th:last-child{text-align:right;padding-right:0}
+/* The table is wider than a phone; it scrolls inside its section, never the page. */
+.hbody.runs{overflow-x:auto}