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

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,10 +41,22 @@
 .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)}
+.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}
 .tlabels{margin-top:10px}
 .cmt{border-top:1px solid var(--line);padding:16px 0}
 .cmt.first{border-top:0}
@@ -53,7 +66,7 @@
 /* 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 +80,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 +103,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 +115,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}
@@ -144,9 +158,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)}

package/templates/portal/css/layout.css

@@ -1,75 +1,102 @@
 /* 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}
+main{padding:36px 44px 96px;max-width:1220px;overflow-x:hidden}
 
 /* ---------- 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}
+.tree{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:6px;
+      max-height:74vh;overflow:auto;box-shadow:var(--shadow-sm)}
+.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 +109,8 @@ 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}
+.viewer{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 26px;
+        min-height:340px;max-height:74vh;overflow:auto;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 +121,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}

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,5 @@ 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}

package/templates/portal/css/setup.css

@@ -1,55 +1,60 @@
 /* The setup screen, and the copy-a-prompt panel it shares with the authoring screens. */
 
-.step{background:var(--panel);border:1px solid var(--line);border-radius:10px;
-      padding:18px 20px 20px;margin-bottom:14px}
-.step.done{border-color:var(--accent-dim)}
+.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
+      padding:20px 22px 22px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
+.step.done{border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
 .stephead{display:flex;align-items:center;gap:11px;margin-bottom:10px}
-.stephead h2{margin:0;font:600 16px var(--sans);letter-spacing:-.01em}
-.stepn{flex:none;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;
-      background:var(--panel-2);border:1px solid var(--line);color:var(--ink-faint);
+.stephead h2{margin:0;font:600 16px var(--sans);letter-spacing:-.018em}
+.stepn{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
+      background:var(--surface-2);border:1px solid transparent;color:var(--ink-dim);
       font:600 11px var(--mono)}
-.step.done .stepn{background:var(--accent-dim);border-color:var(--accent-dim);color:var(--bg)}
+.step.done .stepn{background:var(--accent-fill);border-color:transparent;color:var(--accent-ink)}
 
 /* ---------- the form ---------- */
 
 .setupform{display:grid;gap:13px;margin:14px 0 18px;max-width:520px}
 .field{display:grid;gap:4px}
 .field>span{font:600 12px var(--sans);color:var(--ink-dim)}
-.field input,.field select{background:var(--panel-2);border:1px solid var(--line);color:var(--ink);
-      border-radius:7px;padding:8px 11px;font:13px var(--sans);outline:none;width:100%}
-.field input:focus,.field select:focus{border-color:var(--accent-dim)}
+.field input,.field select{background:var(--bg-elev);border:1px solid var(--border-strong);color:var(--ink);
+      border-radius:var(--r);padding:8px 11px;font:13px var(--sans);outline:none;width:100%;
+      transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
+.field input:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
 .field small{color:var(--ink-faint);font-size:11.5px;line-height:1.45}
 
 .choices{display:grid;gap:8px;margin:10px 0 4px;max-width:640px}
 .choice{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;align-items:start;
-      background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
-      padding:11px 13px;cursor:pointer}
-.choice:has(input:checked){border-color:var(--accent-dim)}
+      background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r);
+      padding:12px 14px;cursor:pointer;
+      transition:border-color .15s var(--ease),background .15s var(--ease),box-shadow .15s var(--ease)}
+.choice:hover{border-color:var(--border-strong)}
+.choice:has(input:checked){border-color:var(--accent-dim);background:var(--accent-soft)}
 .choice input{grid-row:1/3;margin-top:3px;accent-color:var(--accent)}
 .choice b{font:600 13px var(--sans)}
 .choice small{color:var(--ink-dim);font-size:12px;line-height:1.45}
 .choice code{grid-column:2;font:10.5px var(--mono);color:var(--ink-faint)}
 
 .row{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:6px}
-.btn{background:var(--panel-2);border:1px solid var(--line);color:var(--ink);border-radius:7px;
-      padding:8px 13px;font:13px var(--sans);cursor:pointer;text-decoration:none;display:inline-block}
-.btn:hover{border-color:var(--accent-dim)}
+.btn{background:var(--surface-2);border:1px solid transparent;color:var(--ink);border-radius:8px;
+      padding:7px 14px;font:500 13px var(--sans);cursor:pointer;text-decoration:none;display:inline-block;
+      transition:background .15s var(--ease),opacity .15s var(--ease)}
+.btn:hover{background:color-mix(in srgb,var(--surface-2) 88%,var(--ink) 12%)}
+.btn:active{opacity:.8}
 /* The full accent, not the dim one. Dim on the page background is pale-green-on-white with
    near-white text: the button that does the main thing on the screen read as disabled. */
-.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:600}
-.btn.primary:hover{filter:brightness(1.08);background:var(--accent);border-color:var(--accent)}
-.btn[disabled]{opacity:.5;cursor:default}
+.btn.primary{background:var(--accent-fill);border-color:transparent;color:var(--accent-ink);font-weight:600}
+.btn.primary:hover{background:var(--accent-fill);opacity:.88}
+.btn[disabled]{opacity:.45;cursor:default}
 
-.cmd{background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:10px 12px;
+.cmd{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;
       font:12px/1.6 var(--mono);color:var(--ink);overflow-x:auto;white-space:pre-wrap;
       word-break:break-word;margin:9px 0}
 
 .planout{margin-top:12px}
 .filelist{display:grid;gap:2px;margin:9px 0;max-height:240px;overflow-y:auto;
-      background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:10px 12px}
+      background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
 .filelist code{font:11px var(--mono);color:var(--ink-dim)}
 
-.manual{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
+.manual{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r);
       padding:13px 15px;margin:11px 0}
 .manual b{display:block;font:600 13px var(--sans);margin-bottom:4px}
 .manual p{margin:0 0 6px;font-size:13px}
@@ -59,22 +64,23 @@
 
 .paste{border-top:1px solid var(--line);margin-top:16px;padding-top:15px}
 .paste h3{margin:0 0 5px;font:600 14px var(--sans)}
-.briefpreview{background:var(--panel-2);border:1px solid var(--line);border-radius:7px;
+.briefpreview{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
       padding:12px 14px;font:11.5px/1.6 var(--mono);max-height:340px;overflow:auto;
       white-space:pre-wrap;word-break:break-word;margin:10px 0}
-.pastebox{width:100%;background:var(--panel-2);border:1px solid var(--line);color:var(--ink);
-      border-radius:7px;padding:10px 12px;font:12px/1.6 var(--mono);outline:none;resize:vertical;
+.pastebox{width:100%;background:var(--bg-elev);border:1px solid var(--border-strong);color:var(--ink);
+      border-radius:var(--r);padding:10px 12px;font:12px/1.6 var(--mono);outline:none;resize:vertical;
       margin:4px 0}
-.pastebox:focus{border-color:var(--accent-dim)}
+.pastebox:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
 
 .pasteresult{margin-top:12px}
 /* A model that replied in prose is the common case and not the person's mistake, so this reads
    as a next step rather than as a failure. */
-.problem{background:var(--panel-2);border:1px solid var(--warn);border-radius:8px;
+.problem{background:color-mix(in srgb,var(--warn) 9%,transparent);
+      border:1px solid transparent;border-radius:var(--r);
       padding:12px 14px;margin-bottom:10px}
 .problem b{display:block;font:600 13px var(--sans);margin-bottom:7px}
 
-.pastefile{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
+.pastefile{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r);
       padding:12px 14px;margin-bottom:10px}
 .pastefile.saved{border-color:var(--accent-dim)}
 .pastefile b{font:600 13px var(--mono)}
@@ -83,8 +89,8 @@
 
 /* ---------- the doctor checklist ---------- */
 
-.check{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:start;
-      padding:10px 0;border-top:1px solid var(--line)}
+.check{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:start;
+      padding:12px 0;border-top:1px solid var(--line)}
 .check:first-child{border-top:none}
 .checkmark{font:600 13px var(--mono);line-height:1.5}
 .check.fail .checkmark{color:var(--err)}
@@ -95,7 +101,7 @@
 /* ---------- the repo picker ---------- */
 
 .repolist{display:grid;gap:1px;max-height:280px;overflow-y:auto;
-      border:1px solid var(--line);border-radius:7px;background:var(--line)}
+      border:1px solid var(--line);border-radius:var(--r);background:var(--line)}
 /* Scoped to the picker. Bare `.repo` also matched the project label on every inbox row,
    which is where the white box and the stray padding behind MARKETING came from. */
 .repolist .repo{display:flex;align-items:center;justify-content:space-between;gap:12px;
@@ -106,6 +112,6 @@
 .repolist .repo .sub{margin:2px 0 0;font-size:11.5px}
 
 /* Which of the two things this is: a new org, or one that already runs roster. */
-.verdict{background:var(--panel-2);border:1px solid var(--line);border-radius:7px;
+.verdict{background:var(--accent-soft);border:1px solid transparent;border-radius:var(--r);
       padding:9px 12px;font-size:12.5px}
 .verdict p{margin:0}

package/templates/portal/index.html

@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>roster</title>
 <!-- Inline, so a local page with no network still has a tab icon and the console stays clean. -->
-<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%237cc7a4'/%3E%3C/svg%3E">
+<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%2334c759'/%3E%3C/svg%3E">
 <!-- Stylesheets and modules are served from /assets by `roster portal`. No build step:
      editing one of these files and reloading is the whole edit loop. -->
 <link rel="stylesheet" href="/assets/css/base.css">
@@ -46,7 +46,11 @@
       <span class="ic" data-icon="docs"></span> Docs
     </button>
 
-    <div class="sect">Staff</div>
+    <!-- The heading is the fold. Collapsed, it carries the count, because a hidden list still
+         has to say how much it is hiding. -->
+    <button class="sect sectfold" id="stafffold" aria-expanded="false" aria-controls="stafflist">
+      <span class="caret" data-icon="chevron"></span>Staff<span class="n" id="staffcount" hidden></span>
+    </button>
     <div id="stafflist"></div>
 
     <div class="sidefoot">

package/templates/portal/js/app.js

@@ -89,6 +89,7 @@ export async function boot() {
   }
   onRender(render);
   applyHash();
+  initStaffFold();
   paintSidebar();
 
   $("#inboxnav").onclick = () => { S.view = "inbox"; render(); };
@@ -180,6 +181,42 @@ function learnPeople() {
  */
 let paintedRoster = null;
 
+/**
+ * The Staff heading is a fold, and folded it carries the count.
+ *
+ * It starts folded, so the count is not decoration: a bare "STAFF" heading over nothing is how
+ * a loaded org would look if the export came back empty, and those two states have to be
+ * tellable apart at a glance. The count sits on the heading rather than beside it so there is
+ * one thing to click.
+ */
+let staffOpen = true;
+
+function paintStaffFold() {
+  const b = $("#stafffold");
+  if (b) b.setAttribute("aria-expanded", String(staffOpen));
+  const list = $("#stafflist");
+  if (list) list.hidden = !staffOpen;
+  const n = $("#staffcount");
+  if (n) {
+    n.textContent = "(" + (S.data?.staff?.length ?? 0) + ")";
+    n.hidden = staffOpen;
+  }
+}
+
+function initStaffFold() {
+  // Folded until you say otherwise: the count on the heading is enough to know the roster is
+  // there, and the four org-wide screens above it are where a session starts.
+  staffOpen = store("roster.staffopen") === "1";
+  paintStaffFold();
+  const b = $("#stafffold");
+  if (!b) return;
+  b.onclick = () => {
+    staffOpen = !staffOpen;
+    store("roster.staffopen", staffOpen ? "1" : "0");
+    paintStaffFold();
+  };
+}
+
 function paintSidebar() {
   const host = $("#stafflist");
   host.replaceChildren();
@@ -228,6 +265,9 @@ function paintSidebar() {
 
     host.append(head, views);
   }
+
+  // A refresh can hire or retire someone, and the folded heading is where that number shows.
+  paintStaffFold();
 }
 
 /** Which rows are lit, and which staff member is unfolded. */

package/templates/portal/js/state.js

@@ -36,7 +36,9 @@ export const S = {
   loadedAt: null,
 
   staffHandle: null,
-  view: "brain",
+  /* What is waiting on you, not whose brain you read last. The org-wide screens are where a
+     session starts, which is also why the Staff list below them opens folded. */
+  view: "inbox",
   /** The inbox filter box. Brain and "what changed" keep their own, below. */
   query: "",
 
@@ -73,9 +75,10 @@ export const S = {
 
 /* The sidebar badge counts open items, not everything loaded. Once the inbox could show
    closed work the two stopped being the same number, and a badge that says 135 when 34 things
-   need you is worse than no badge. */
+   need you is worse than no badge. Pull requests are excluded for the same reason: they are
+   Pending work's, and counting them here would bill you twice for the same pile. */
 export const openCount = () =>
-  (S.inbox?.items ?? []).filter((i) => i.state === "OPEN").length;
+  (S.inbox?.items ?? []).filter((i) => i.state === "OPEN" && i.kind !== "pr").length;
 
 /** The same, for the screen that is only pull requests. */
 export const openPrCount = () =>

package/templates/portal/js/views/graph.js

@@ -53,7 +53,7 @@ function drawGraph(canvas, wrap, s) {
   }
   const groups = [...members.keys()].sort((a, b) => members.get(b).length - members.get(a).length);
 
-  const PALETTE = ["#7cc7a4","#7aa2f7","#c99bd6","#d8a657","#6fc3c9","#e07b7b","#b3c46b","#e0a1c0","#9d9ff5","#8fb0d9"];
+  const PALETTE = ["#30d158","#0a84ff","#bf5af2","#ff9f0a","#64d2ff","#ff453a","#ffcc00","#ff375f","#5e5ce6","#ac8e68"];
   const colour = new Map(groups.map((g, i) => [g, PALETTE[i % PALETTE.length]]));
 
   // The ring grows with the number of groups so they never crowd, and each group keeps its