@nanocollective/roster 0.1.0-alpha.2 → 0.1.0-alpha.20

package/templates/portal/css/inbox.css

@@ -1,22 +1,39 @@
 /* The inbox list, and the thread beside it. */
 
+/* One row per item, with a hairline between them. Without it a list of two-line titles is a
+   wall of sentences and you have to work out where one item ends — which is most of what made
+   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:9px 10px;border-radius:7px;color:var(--ink-dim)}
-.irow:hover{background:var(--panel-2)}
+      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(--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
+   nothing is selected, which read as a piece of the row that had not got the message. */
+.irow[aria-current="true"] .repo{color:color-mix(in srgb,var(--accent) 72%,var(--ink-dim));
+      border-right-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
+.irow[aria-current="true"] .num,.irow[aria-current="true"] .when{
+      color:color-mix(in srgb,var(--accent) 45%,var(--ink-faint))}
 .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}
 .ck{display:inline-flex;--ic:13px}
+.cc{display:inline-flex;align-items:center;gap:3px;--ic:12px;font:10.5px var(--mono);
+    color:var(--ink-faint)}
+.irow[aria-current="true"] .cc{color:color-mix(in srgb,var(--accent) 45%,var(--ink-faint))}
 /* Closed work reads as finished at a glance, so it can share a list with open work without
    competing with it. */
 .irow.shut .ititle{color:var(--ink-dim)}
@@ -24,14 +41,99 @@
 .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:14px;margin-bottom:4px}
-.trow{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
-.thead h3{margin:8px 0 0;font:600 17px/1.35 var(--sans);letter-spacing:-.012em;color:var(--ink)}
+.thead{border-bottom:1px solid var(--line);padding-bottom:16px}
+.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}
-.reply{border-top:1px solid var(--line);margin-top:16px;padding-top: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: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. */
+.tacts{margin-top:16px;gap:8px}
+.tacts select{min-height:28px;padding:4px 8px;font-size:12px}
+/* The way out of the screen, not one of the things you do on it. */
+.tacts .out{margin-left:auto}
+
+/* ---------- pull requests ----------
+   Conversation, commits, files. Three views of one thing, so they are tabs on the thread
+   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: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{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}
+.prcommit:first-of-type{border-top:0}
+.prcommit .sha{font:11.5px var(--mono);color:var(--ink-faint);flex:none;text-decoration:none}
+.prcommit .sha:hover{color:var(--accent)}
+.prcommit .subj{color:var(--ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
+                white-space:nowrap}
+.prcommit .meta{flex:none}
+
+/* ---------- writing: labels and attachments ----------
+   The label set is small and knowable, so it is a row of toggles rather than a text box that
+   quietly accepts a typo as a new label. Pressed state carries the same tones the inbox rows
+   use, so a `decision` chip is the same colour wherever you meet it. */
+.labelpick{margin-top:12px}
+.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{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
+   one is a message nobody is woken by. The roster is small and already on the page, so typing
+   `@` offers it — only the entries a mention actually reaches, and each says what it does.
+
+   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(--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(--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}
+.mrow .mnote{grid-column:1/-1;font:10.5px var(--sans);color:var(--ink-faint)}
+.mrow.human .mat{color:var(--ruled)}
+/* The measuring copy of a textarea, for finding the caret. Never seen. */
+.mmirror{position:absolute;visibility:hidden;white-space:pre-wrap;word-wrap:break-word;
+      pointer-events:none;top:0;left:0}
+
+.attach{display:flex;align-items:center;gap:10px;margin-top:9px;flex-wrap:wrap}
+.attach .ghbtn{display:inline-flex;align-items:center;gap:6px;--ic:13px}
+/* The whole textarea is the drop target, because that is where a person aims. */
+textarea.dropping{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
 
 /* ---------- timeline events ----------
    Not comments, so not comment-shaped: a marker, a line of prose, and whatever it points at.
@@ -51,14 +153,15 @@
 .tev .twhen{color:var(--ink-faint);font-size:11px;white-space:nowrap}
 .tev.closed .tico{color:var(--err)}
 .tev.reopened .tico,.tev.merged .tico{color:var(--accent)}
-.tev.cross-referenced .tico{color:var(--will)}
+.tev.cross-referenced .tico{color:var(--ruled)}
 
 /* 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,86 +1,138 @@
 /* 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{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}
-.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. */
+.tfile.thit{align-items:flex-start;padding:8px}
+.tfile.thit .t{white-space:normal;overflow:visible}
+.thit .hitname{display:block;font:13px var(--sans);color:var(--ink)}
+.thit[aria-current="true"] .hitname{color:var(--accent)}
+.thit .hitline{display:block;font:11.5px/1.5 var(--sans);color:var(--ink-faint);margin-top:3px;
+      overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+.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}
 .viewer img{max-width:100%;border-radius:6px;background:#fff}
+/* A recording in a brain gets the same room a screenshot does. Black rather than white
+   behind it: letterboxing should read as the video's own edges, not as a broken image. */
+.viewer video.player,.viewer audio.player{max-width:100%;width:100%;border-radius:6px;background:#000}
+.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}
-.gallery img{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--panel-2);border-radius:6px;
-             border:1px solid var(--line);cursor:pointer}
+.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: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}
 .gallery figcaption{font:10.5px var(--mono);color:var(--ink-faint);margin-top:4px;
                     overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 

package/templates/portal/css/markdown.css

@@ -1,46 +1,62 @@
 /* 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(--will)}
-.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}
 .cbody h1{font-size:17px} .cbody h2{font-size:15.5px} .cbody h3{font-size:14px}
 .doc{font-size:14px;max-width:80ch}
 
+/* ---------- YAML ----------
+   org.yaml and staff.yaml are the two files here anybody reads closely, and flat grey made
+   finding a key in one a matter of reading every line. Structure is what YAML has that prose
+   does not; these five colours are it, and nothing else is coloured. Tokens from the theme,
+   so light and dark both work without a second palette. */
+.yk{color:var(--ruled)}          /* keys */
+.ys{color:var(--accent)}        /* quoted strings */
+.yn{color:var(--derived)}       /* numbers */
+.yb{color:var(--derived)}       /* true, false, null */
+.yc{color:var(--ink-faint);font-style:italic}  /* comments */
+.yp,.yd{color:var(--ink-faint)} /* colons, brackets, list dashes */
+pre.yaml{color:var(--ink)}
+
 /* A reference to another issue or PR, as a chip rather than a raw link: half of a status
    issue is #113, and a wall of blue URLs is the thing that makes them unreadable. */
-.ref{display:inline-block;font:11.5px var(--mono);color:var(--will);background:var(--panel-2);
+.ref{display:inline-block;font:11.5px var(--mono);color:var(--ruled);background:var(--panel-2);
      border:1px solid var(--line);border-radius:20px;padding:0 7px;text-decoration:none;
      white-space:nowrap;line-height:1.65}
-.ref:hover{border-color:var(--will);background:color-mix(in srgb,var(--will) 14%,transparent)}
+.ref:hover{border-color:var(--ruled);background:color-mix(in srgb,var(--ruled) 14%,transparent)}
 .ref.pr{color:var(--measured)}
 .ref.pr:hover{border-color:var(--measured);background:color-mix(in srgb,var(--measured) 14%,transparent)}
 
@@ -52,3 +68,29 @@
 .at:hover{color:var(--ink);border-color:var(--ink-faint)}
 .at.you{color:var(--derived);border-color:color-mix(in srgb,var(--derived) 40%,transparent)}
 .at.you:hover{background:color-mix(in srgb,var(--derived) 14%,transparent);border-color:var(--derived)}
+
+/* A screenshot on a doc page.
+   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: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}