@nanocollective/roster 0.1.0-alpha.5 → 0.1.0-alpha.7

package/templates/portal/css/base.css

@@ -1,30 +1,64 @@
 /* Tokens, reset, and the primitives every screen uses: buttons, inputs, chips, meta text. */
 
 :root{
-  --bg:#0e1013; --panel:#15181d; --panel-2:#1b1f26; --line:#252a33;
-  --ink:#e6e9ef; --ink-dim:#9aa3b2; --ink-faint:#6b7484;
-  --accent:#7cc7a4; --accent-dim:#3d6b56;
-  --warn:#d8a657; --err:#e07b7b;
-  --ruled:#7aa2f7; --measured:#7cc7a4; --derived:#c99bd6;
-  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
-  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
+  /* iOS system colours, shared with the website, so the portal and the page that introduces
+     it are one product. The older names below are aliases, kept so every screen's stylesheet
+     reads the same tokens it always has. `--accent` is for text and lines; `--accent-fill`
+     is for solid fills, which on a light background want the brighter green. */
+  --bg:#000000; --bg-elev:#1c1c1e; --surface:#1c1c1e; --surface-2:#2c2c2e;
+  --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.16);
+  --text:#f5f5f7; --text-muted:#98989d; --text-faint:#636366;
+  --accent:#30d158; --accent-fill:#30d158; --accent-strong:#30d158;
+  --accent-soft:rgba(48,209,88,.15); --accent-ink:#000000; --accent-dim:rgba(48,209,88,.45);
+  --blue:#0a84ff; --amber:#ff9f0a; --red:#ff453a; --violet:#bf5af2;
+  --side:#161618; --sel:rgba(255,255,255,.10);
+  --hover:rgba(255,255,255,.05); --active:rgba(255,255,255,.10);
+  --shadow-sm:none; --shadow:none;
+  --shadow-lg:0 20px 48px rgba(0,0,0,.6);
+  --ease:cubic-bezier(.2,.8,.2,1);
+  --r-sm:6px; --r:10px; --r-lg:14px;
+  --scroll:rgba(255,255,255,.18); --scroll-hover:rgba(255,255,255,.3);
+  --mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,monospace;
+  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
+
+  --panel:var(--surface); --panel-2:var(--surface-2); --line:var(--border);
+  --ink:var(--text); --ink-dim:var(--text-muted); --ink-faint:var(--text-faint);
+  --warn:var(--amber); --err:var(--red);
+  --ruled:var(--blue); --measured:var(--accent); --derived:var(--violet);
+  color-scheme:dark;
 }
 /* System preference wins unless the toggle has stamped data-theme on the root. */
 @media (prefers-color-scheme:light){
   :root:not([data-theme="dark"]){
-    --bg:#fbfbfa; --panel:#fff; --panel-2:#f4f5f7; --line:#e3e5ea;
-    --ink:#1b1f26; --ink-dim:#5b6472; --ink-faint:#8b95a5;
-    --accent:#2f7d5b; --accent-dim:#a8d5bf;
-    --warn:#a5701d; --err:#b34a4a;
-    --ruled:#3b5fa8; --measured:#2f7d5b; --derived:#8a52a8;
+    --bg:#f5f5f7; --bg-elev:#ffffff; --surface:#ffffff; --surface-2:#f2f2f7;
+    --border:rgba(0,0,0,.08); --border-strong:rgba(0,0,0,.14);
+    --text:#1d1d1f; --text-muted:#6e6e73; --text-faint:#aeaeb2;
+    --accent:#248a3d; --accent-fill:#34c759; --accent-strong:#248a3d;
+    --accent-soft:rgba(52,199,89,.12); --accent-ink:#ffffff; --accent-dim:rgba(52,199,89,.45);
+    --blue:#007aff; --amber:#c77700; --red:#ff3b30; --violet:#af52de;
+    --side:#ebebf0; --sel:rgba(0,0,0,.07);
+    --hover:rgba(0,0,0,.04); --active:rgba(0,0,0,.07);
+    --shadow-sm:0 1px 2px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.04);
+    --shadow:0 1px 2px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.05);
+    --shadow-lg:0 4px 12px rgba(0,0,0,.06),0 20px 48px rgba(0,0,0,.12);
+    --scroll:rgba(0,0,0,.18); --scroll-hover:rgba(0,0,0,.3);
+    color-scheme:light;
   }
 }
 :root[data-theme="light"]{
-    --bg:#fbfbfa; --panel:#fff; --panel-2:#f4f5f7; --line:#e3e5ea;
-    --ink:#1b1f26; --ink-dim:#5b6472; --ink-faint:#8b95a5;
-    --accent:#2f7d5b; --accent-dim:#a8d5bf;
-    --warn:#a5701d; --err:#b34a4a;
-    --ruled:#3b5fa8; --measured:#2f7d5b; --derived:#8a52a8;
+    --bg:#f5f5f7; --bg-elev:#ffffff; --surface:#ffffff; --surface-2:#f2f2f7;
+    --border:rgba(0,0,0,.08); --border-strong:rgba(0,0,0,.14);
+    --text:#1d1d1f; --text-muted:#6e6e73; --text-faint:#aeaeb2;
+    --accent:#248a3d; --accent-fill:#34c759; --accent-strong:#248a3d;
+    --accent-soft:rgba(52,199,89,.12); --accent-ink:#ffffff; --accent-dim:rgba(52,199,89,.45);
+    --blue:#007aff; --amber:#c77700; --red:#ff3b30; --violet:#af52de;
+    --side:#ebebf0; --sel:rgba(0,0,0,.07);
+    --hover:rgba(0,0,0,.04); --active:rgba(0,0,0,.07);
+    --shadow-sm:0 1px 2px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.04);
+    --shadow:0 1px 2px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.05);
+    --shadow-lg:0 4px 12px rgba(0,0,0,.06),0 20px 48px rgba(0,0,0,.12);
+    --scroll:rgba(0,0,0,.18); --scroll-hover:rgba(0,0,0,.3);
+    color-scheme:light;
 }
 
 *{box-sizing:border-box}
@@ -34,47 +68,75 @@
    just stayed on screen. Said once, here. */
 [hidden]{display:none!important}
 
+html{background:var(--bg)}
 body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.55 var(--sans);
-     -webkit-font-smoothing:antialiased}
+     font-feature-settings:"cv11","ss01","ss03";-webkit-font-smoothing:antialiased;
+     -moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
 a{color:inherit}
+::selection{background:color-mix(in srgb,var(--accent) 28%,transparent)}
+:focus-visible{outline:none}
+
+/* Scrollbars that belong to the page rather than to the operating system of 2009. */
+*{scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
+::-webkit-scrollbar{width:10px;height:10px}
+::-webkit-scrollbar-track{background:transparent}
+::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:10px;
+      border:3px solid transparent;background-clip:padding-box}
+::-webkit-scrollbar-thumb:hover{background:var(--scroll-hover);background-clip:padding-box;
+      border:3px solid transparent}
+::-webkit-scrollbar-corner{background:transparent}
 
-h1{font:600 21px var(--sans);margin:0 0 4px;letter-spacing:-.015em}
-.sub{color:var(--ink-dim);margin:0 0 24px;font-size:13px}
+h1{font:600 22px/1.25 var(--sans);margin:0 0 6px;letter-spacing:-.022em;color:var(--ink)}
+.sub{color:var(--ink-dim);margin:0 0 26px;font-size:13.5px}
 .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
-.meta{color:var(--ink-faint);font:11.5px var(--mono)}
-.empty{color:var(--ink-faint);padding:26px 0;text-align:center;font-size:13px}
+.meta{color:var(--ink-faint);font:11.5px var(--mono);font-variant-numeric:tabular-nums}
+.empty{color:var(--ink-faint);padding:32px 0;text-align:center;font-size:13px}
 .err{color:var(--err)} .warn{color:var(--warn)} .ok{color:var(--accent)}
 
-.card{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:15px 17px;margin-bottom:11px}
-.card h3{margin:0 0 3px;font:600 14px var(--sans)}
-.grid{display:grid;gap:11px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
+.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
+      padding:16px 18px;margin-bottom:12px;box-shadow:var(--shadow-sm);
+      transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
+.card h3{margin:0 0 4px;font:600 14px var(--sans);letter-spacing:-.01em}
+.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
 
 /* ---------- controls ---------- */
-input[type=search],input[type=time],select{background:var(--panel-2);
-  border:1px solid var(--line);color:var(--ink);
-  border-radius:7px;padding:7px 11px;font:13px var(--sans);outline:none}
+input[type=search],input[type=time],input[type=text],select{background:var(--bg-elev);
+  border:1px solid var(--border-strong);color:var(--ink);
+  border-radius:var(--r);padding:7px 11px;font:13px var(--sans);outline:none;
+  transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
 input[type=search]{width:280px}
-input[type=search]:focus,input[type=time]:focus,select:focus{border-color:var(--accent-dim)}
-textarea{width:100%;background:var(--panel-2);border:1px solid var(--line);color:var(--ink);
-      border-radius:8px;padding:10px 12px;font:13px/1.55 var(--sans);outline:none;resize:vertical}
-textarea:focus{border-color:var(--accent-dim)}
+input::placeholder,textarea::placeholder{color:var(--ink-faint)}
+input[type=search]:hover,input[type=time]:hover,input[type=text]:hover,select:hover,
+textarea:hover{border-color:color-mix(in srgb,var(--ink) 20%,transparent)}
+input[type=search]:focus,input[type=time]:focus,input[type=text]:focus,select:focus{
+  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
+textarea{width:100%;background:var(--bg-elev);border:1px solid var(--border-strong);color:var(--ink);
+      border-radius:var(--r);padding:10px 12px;font:13px/1.6 var(--sans);outline:none;resize:vertical;
+      transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
+textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
 
 /* One size, whether it is a button or a link. They sit in rows together, and `a` taking its
    line-height from the font shorthand while `button` set its own made every such row a set of
    controls at two different heights. */
-.ghbtn{display:inline-flex;align-items:center;justify-content:center;min-height:28px;
-       padding:5px 11px;border:1px solid var(--line);border-radius:7px;
-       font:12px/1.4 var(--sans);color:var(--ink-dim);text-decoration:none;white-space:nowrap}
-.ghbtn:hover{color:var(--ink);border-color:var(--accent-dim);background:var(--panel-2)}
-button.ghbtn{cursor:pointer;font-family:var(--sans);background:transparent;
-      -webkit-appearance:none;appearance:none;font-size:12px;line-height:1.4}
-button.ghbtn:hover{background:var(--panel-2)}
-.ghbtn.primary{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:600}
-.ghbtn.primary:hover{filter:brightness(1.08);background:var(--accent)}
-.ghbtn:disabled{opacity:.5;cursor:default}
-.iconbtn{background:var(--panel-2);border:1px solid var(--line);color:var(--ink-dim);
-       border-radius:7px;width:34px;height:34px;cursor:pointer;font-size:15px;line-height:1}
-.iconbtn:hover{color:var(--ink);border-color:var(--accent-dim)}
+.ghbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:30px;
+       padding:5px 12px;border:1px solid transparent;border-radius:8px;
+       background:var(--surface-2);
+       font:500 12.5px/1.4 var(--sans);color:var(--ink);text-decoration:none;white-space:nowrap;
+       transition:background .15s var(--ease),color .15s var(--ease),opacity .15s var(--ease)}
+.ghbtn:hover{color:var(--ink);background:color-mix(in srgb,var(--surface-2) 88%,var(--ink) 12%)}
+.ghbtn:active{opacity:.8}
+.ghbtn:focus-visible,.btn:focus-visible,.iconbtn:focus-visible{
+       border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
+button.ghbtn{cursor:pointer;font-family:var(--sans);
+      -webkit-appearance:none;appearance:none;font-size:12.5px;line-height:1.4}
+button.ghbtn:hover{background:color-mix(in srgb,var(--surface-2) 88%,var(--ink) 12%)}
+.ghbtn.primary{background:var(--accent);border-color:transparent;color:var(--accent-ink);font-weight:600}
+.ghbtn.primary:hover{background:var(--accent);color:var(--accent-ink);opacity:.88}
+.ghbtn:disabled{opacity:.45;cursor:default}
+.iconbtn{background:var(--surface-2);border:1px solid transparent;color:var(--ink-dim);
+       border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:15px;line-height:1;
+       transition:background .15s var(--ease),color .15s var(--ease)}
+.iconbtn:hover{color:var(--ink);background:color-mix(in srgb,var(--surface-2) 88%,var(--ink) 12%)}
 .iconbtn{display:inline-flex;align-items:center;justify-content:center}
 .iconbtn .sync{display:inline-flex;--ic:15px}
 .iconbtn.spin .sync{animation:spin .9s linear infinite}
@@ -87,15 +149,17 @@ svg.ic{width:var(--ic,15px);height:var(--ic,15px);display:block;flex:none}
 /* A slot that holds one, centred, wherever a text glyph used to sit on a baseline. */
 .icslot{display:inline-flex;align-items:center;justify-content:center;flex:none}
 
-.chip{font:10px var(--sans);letter-spacing:.02em;padding:1.5px 7px;border-radius:20px;
-      border:1px solid var(--line);color:var(--ink-faint);white-space:nowrap}
-.chip.hot{color:var(--err);border-color:color-mix(in srgb,var(--err) 45%,transparent)}
-.chip.warm{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
-.chip.cool{color:var(--ruled);border-color:color-mix(in srgb,var(--ruled) 40%,transparent)}
-.pill{font:11px var(--mono);color:var(--ink-faint);border:1px solid var(--line);
-      border-radius:20px;padding:2px 9px}
-kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;
-    padding:1px 5px;color:var(--ink-dim)}
+.chip{display:inline-flex;align-items:center;font:500 10.5px/1.5 var(--sans);letter-spacing:.01em;
+      padding:1px 8px;border-radius:999px;border:1px solid transparent;color:var(--ink-dim);
+      background:color-mix(in srgb,var(--ink) 7%,transparent);white-space:nowrap}
+.chip.hot{color:var(--err);background:color-mix(in srgb,var(--err) 12%,transparent)}
+.chip.warm{color:var(--warn);background:color-mix(in srgb,var(--warn) 13%,transparent)}
+.chip.cool{color:var(--ruled);background:color-mix(in srgb,var(--ruled) 12%,transparent)}
+.pill{font:11px var(--mono);color:var(--ink-dim);border:1px solid transparent;
+      background:color-mix(in srgb,var(--ink) 4%,transparent);
+      border-radius:999px;padding:2px 9px;font-variant-numeric:tabular-nums}
+kbd{font:500 10.5px var(--mono);border:1px solid var(--border-strong);
+    border-radius:5px;padding:1px 5px;color:var(--ink-dim);background:var(--surface-2)}
 
 /* ---------- waiting ----------
    The inbox reads every repo in the org, which is seconds on a cold cache. What used to stand
@@ -103,15 +167,11 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
    which reads as a page that has failed rather than one that is working. These are the shape
    of what is coming: rows in the list, a title and paragraphs in the viewer. */
 .sk{--skbg:color-mix(in srgb,var(--ink) 7%,transparent);border-radius:6px;
-    background:linear-gradient(90deg,var(--skbg) 25%,
-      color-mix(in srgb,var(--ink) 12%,transparent) 37%,var(--skbg) 63%);
-    background-size:400% 100%;animation:shimmer 1.4s ease-in-out infinite}
+    background:var(--skbg);animation:pulse 1.4s ease-in-out infinite}
 .sk-row{background:none;animation:none;padding:11px 10px;border-top:1px solid var(--line)}
 .sk-row:first-of-type{border-top:0}
-.sk-row .skbar{height:11px;border-radius:6px;background:inherit;
-    background:linear-gradient(90deg,var(--skbg) 25%,
-      color-mix(in srgb,var(--ink) 12%,transparent) 37%,var(--skbg) 63%);
-    background-size:400% 100%;animation:shimmer 1.4s ease-in-out infinite}
+.sk-row .skbar{height:11px;border-radius:6px;
+    background:var(--skbg);animation:pulse 1.4s ease-in-out infinite}
 .sk-row .skbar.t{width:84%}
 .sk-row .skbar.m{width:38%;height:8px;margin-top:8px}
 /* Staggered, so the list reads as several things loading rather than one block flashing. */
@@ -125,7 +185,6 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
 .sk-line:last-child{width:42%}
 /* The word beside them. It is the only part a screen reader gets, so it stays real text. */
 .skhead{color:var(--ink-faint);font-size:12.5px;padding:4px 10px 8px}
-@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
 /* A count that is still being fetched is not zero, and an empty badge reads as zero. */
 .nav .n.wait{display:inline-block;width:15px;height:8px;border-radius:5px;
     background:color-mix(in srgb,var(--ink) 10%,transparent);animation:pulse 1.3s ease-in-out infinite}
@@ -134,23 +193,24 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
   .sk,.sk-row .skbar,.nav .n.wait{animation:none}
 }
 
-.notice{background:color-mix(in srgb,var(--warn) 12%,transparent);border:1px solid
-      color-mix(in srgb,var(--warn) 40%,transparent);color:var(--ink-dim);border-radius:8px;
-      padding:10px 13px;margin-bottom:16px;font-size:12.5px;line-height:1.6}
+.notice{background:color-mix(in srgb,var(--warn) 10%,transparent);border:1px solid transparent;color:var(--ink-dim);border-radius:var(--r);
+      padding:11px 14px;margin-bottom:16px;font-size:12.5px;line-height:1.6}
 .notice b{color:var(--ink)}
 
 /* ---------- a dialog that asks for more than a line ----------
    Native <dialog>, so the backdrop, the focus trap and Escape are the browser's job. */
-dialog.ask{border:1px solid var(--line);border-radius:11px;background:var(--panel);
-      color:var(--ink);padding:20px 22px;width:min(560px,92vw);
-      box-shadow:0 24px 60px rgba(0,0,0,.34)}
-dialog.ask::backdrop{background:rgba(0,0,0,.45);backdrop-filter:blur(2px)}
-dialog.ask h3{margin:0;font:600 15.5px var(--sans);letter-spacing:-.012em}
-dialog.ask .askhint{margin:6px 0 12px;font:12.5px/1.55 var(--sans);color:var(--ink-faint)}
+dialog.ask{border:1px solid var(--border-strong);border-radius:var(--r-lg);background:var(--bg-elev);
+      color:var(--ink);padding:22px 24px;width:min(560px,92vw);
+      box-shadow:var(--shadow-lg)}
+dialog.ask[open]{animation:dlgin .18s var(--ease)}
+@keyframes dlgin{from{opacity:0;transform:translateY(6px) scale(.985)}}
+dialog.ask::backdrop{background:rgba(0,0,0,.35);backdrop-filter:blur(8px)}
+dialog.ask h3{margin:0;font:600 16px var(--sans);letter-spacing:-.018em}
+dialog.ask .askhint{margin:6px 0 14px;font:12.5px/1.55 var(--sans);color:var(--ink-dim)}
 dialog.ask textarea{font:13.5px/1.6 var(--sans);min-height:96px;max-height:44vh}
 /* The attach control, when the dialog is a reply rather than a question. */
 dialog.ask .attach{margin-top:9px}
-dialog.ask .askrow{margin-top:12px;justify-content:flex-end}
+dialog.ask .askrow{margin-top:14px;justify-content:flex-end}
 dialog.ask .askrow .meta{margin-right:auto}
 
 /* The lightbox: an image, over the page, that zooms.
@@ -159,7 +219,7 @@ dialog.ask .askrow .meta{margin-right:auto}
  * from ::backdrop. 60 puts it over the `@` mention list (30) and over the dialog, which is
  * correct: a picture opened from inside a reply box should still open. */
 .lightbox{position:fixed;inset:0;z-index:60;display:flex;
-          background:rgba(0,0,0,.82);backdrop-filter:blur(3px)}
+          background:rgba(0,0,0,.82)}
 /* The stage is inset rather than the whole window, and that is not decoration.
    Most images here are screenshots *of this interface*, and one fitted edge to edge reads as
    the app having navigated rather than as a picture of it. The margin of backdrop around it,

package/templates/portal/css/brain.css

@@ -3,10 +3,11 @@
 /* ---------- navigator ----------
    Memory and Files are two kinds of thing, so they are two boxes rather than one flat list
    where a parsed section and a markdown file are told apart only by their typeface. */
-.navgroup{border:1px solid var(--line);border-radius:7px;margin-bottom:8px;padding:4px 3px 5px}
+.navgroup{border:0;border-radius:var(--r);margin-bottom:6px;padding:2px 2px 4px}
+.navgroup + .navgroup{border-top:1px solid var(--line);border-radius:0;padding-top:6px}
 .navgroup:last-child{margin-bottom:0}
 .ghead{display:flex;align-items:baseline;gap:8px;padding:6px 8px 6px;
-       font:600 10.5px var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)}
+       font:600 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
 .ghead i{font-style:normal;font:10.5px var(--mono);letter-spacing:0;text-transform:none;
        margin-left:auto;color:var(--ink-faint)}
 
@@ -20,12 +21,12 @@
 /* The section a focused fact belongs to stays lit, so opening one fact never loses your
    place in the list. */
 .tfile[data-within="true"] span.t{color:var(--ink)}
-.tfile[data-within="true"]{background:color-mix(in srgb,var(--panel-2) 60%,transparent)}
+.tfile[data-within="true"]{background:var(--hover)}
 
 .tsurface{display:flex;align-items:center;gap:7px;width:100%;text-align:left;background:none;
-      border:0;color:var(--ink-dim);font:11.5px var(--mono);padding:5px 8px;border-radius:5px;
-      cursor:pointer}
-.tsurface:hover{background:var(--panel-2);color:var(--ink)}
+      border:0;color:var(--ink-dim);font:11.5px var(--mono);padding:5px 8px;border-radius:6px;
+      cursor:pointer;transition:background .12s var(--ease),color .12s var(--ease)}
+.tsurface:hover{background:var(--hover);color:var(--ink)}
 .tsurface .caret{color:var(--ink-faint);--ic:12px;flex:none;transition:transform .12s ease}
 .tsurface[aria-expanded="false"] .caret{transform:rotate(-90deg)}
 .tsurface .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@@ -35,21 +36,22 @@
 .tsfiles .tfile{font-size:12px}
 
 /* ---------- memory cards ---------- */
-.fact{border-bottom:1px solid var(--line);padding:13px 2px;scroll-margin-top:12px}
+.fact{border-bottom:1px solid var(--line);padding:15px 2px;scroll-margin-top:12px}
 .fact:last-child{border-bottom:0}
-.fact.lit{background:color-mix(in srgb,var(--warn) 10%,transparent);
-     box-shadow:inset 3px 0 0 var(--warn);border-radius:0 6px 6px 0;padding-left:11px}
-.slug{font:12px var(--mono);color:var(--accent);cursor:pointer}
+.fact.lit{background:color-mix(in srgb,var(--warn) 9%,transparent);
+     border-radius:8px;padding-left:12px}
+.slug{font:500 12px var(--mono);color:var(--accent);cursor:pointer}
 .slug:hover{text-decoration:underline}
-.stmt{margin:3px 0 0}
+.stmt{margin:4px 0 0;font-size:14px;color:var(--ink);letter-spacing:-.003em}
 .so{margin:4px 0 0;color:var(--ink-dim);font-size:13.2px}
 .so b{color:var(--ink);font-weight:600}
 .factsub{color:var(--ink-faint);font-size:12.5px;margin:0 0 14px}
-.tag{display:inline-block;font:10.5px var(--mono);padding:1px 6px;border-radius:20px;
-     border:1px solid var(--line);color:var(--ink-faint);margin-left:6px;vertical-align:1px}
-.tag.ruled{color:var(--ruled);border-color:var(--ruled)}
-.tag.measured{color:var(--measured);border-color:var(--measured)}
-.tag.derived{color:var(--derived);border-color:var(--derived)}
+.tag{display:inline-block;font:500 10px/1.6 var(--sans);padding:0 7px;border-radius:999px;
+     border:0;color:var(--ink-dim);margin-left:6px;vertical-align:1px;
+     background:color-mix(in srgb,var(--ink) 7%,transparent)}
+.tag.ruled{color:var(--ruled);background:color-mix(in srgb,var(--ruled) 12%,transparent)}
+.tag.measured{color:var(--measured);background:color-mix(in srgb,var(--accent-fill) 14%,transparent)}
+.tag.derived{color:var(--derived);background:color-mix(in srgb,var(--derived) 12%,transparent)}
 .notelink{font:11.5px var(--mono);color:var(--ink-faint);cursor:pointer;margin-left:6px}
 .notelink:hover{color:var(--accent)}
 
@@ -57,8 +59,8 @@
    a way out, that read as the page breaking. */
 .focusbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px;
       background:color-mix(in srgb,var(--warn) 10%,transparent);
-      border:1px solid color-mix(in srgb,var(--warn) 34%,transparent);
-      border-radius:7px;padding:7px 8px 7px 11px;font:12px var(--sans);color:var(--ink-dim)}
+      border:1px solid transparent;
+      border-radius:var(--r);padding:7px 8px 7px 11px;font:12px var(--sans);color:var(--ink-dim)}
 .focusbar .crumb{background:none;border:0;color:var(--ink-dim);cursor:pointer;
       font:12px var(--sans);padding:0;text-align:left}
 .focusbar .crumb:hover{color:var(--ink);text-decoration:underline}
@@ -98,7 +100,8 @@
 
 /* A prompt audit finding. Not a tree row: it carries an explanation and two buttons, and
    squeezing that into the navigator's row shape is how it would get ignored. */
-.prob{border:1px solid var(--line);border-radius:7px;padding:9px 10px;margin:0 3px 6px}
+.prob{border:1px solid var(--line);border-radius:var(--r);padding:10px 11px;margin:0 3px 6px;
+      background:var(--bg-elev)}
 .prob .ptitle{font:600 12.5px var(--sans);color:var(--ink)}
 .prob .pdetail{margin-top:3px;font:11.5px/1.5 var(--sans);color:var(--ink-faint)}
 .prob.error{border-color:color-mix(in srgb,var(--err) 45%,transparent)}
@@ -110,4 +113,4 @@
 /* What an edit did to the composed prompt, which is the question you were actually asking. */
 .effect{border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
       background:color-mix(in srgb,var(--accent) 7%,transparent);
-      border-radius:8px;padding:10px 12px;margin-bottom:14px}
+      border-radius:var(--r);padding:11px 13px;margin-bottom:14px}

package/templates/portal/css/diff.css

@@ -1,24 +1,25 @@
 /* A unified diff, on the "what changed" screen. */
 
-.dblock{border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:14px}
+.dblock{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:14px;
+      box-shadow:var(--shadow-sm)}
 .dblock:last-child{margin-bottom:0}
-.diff{margin:0;font:12px/1.6 var(--mono);background:var(--panel-2);overflow-x:auto}
+.diff{margin:0;font:12px/1.65 var(--mono);background:var(--bg);overflow-x:auto}
 .dline{display:grid;grid-template-columns:42px 42px 1fr;white-space:pre;min-width:max-content}
 .dline .ln{color:var(--ink-faint);text-align:right;padding:0 7px 0 5px;font-size:11px;
-      user-select:none;background:color-mix(in srgb,var(--line) 34%,transparent)}
+      user-select:none;background:color-mix(in srgb,var(--ink) 3%,transparent)}
 .dline .tx{padding:0 14px 0 9px}
-.dadd{background:color-mix(in srgb,var(--accent) 15%,transparent)}
+.dadd{background:color-mix(in srgb,var(--accent) 11%,transparent)}
 .dadd .tx{color:var(--ink)}
-.dadd .ln{background:color-mix(in srgb,var(--accent) 24%,transparent);color:var(--accent)}
-.ddel{background:color-mix(in srgb,var(--err) 13%,transparent)}
+.dadd .ln{background:color-mix(in srgb,var(--accent) 17%,transparent);color:var(--accent)}
+.ddel{background:color-mix(in srgb,var(--err) 10%,transparent)}
 .ddel .tx{color:var(--ink-dim)}
-.ddel .ln{background:color-mix(in srgb,var(--err) 22%,transparent);color:var(--err)}
-.dhunk{background:color-mix(in srgb,var(--ruled) 13%,transparent);
+.ddel .ln{background:color-mix(in srgb,var(--err) 16%,transparent);color:var(--err)}
+.dhunk{background:color-mix(in srgb,var(--ruled) 8%,transparent);
       border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
 .dhunk .tx{color:var(--ruled);font-size:11.5px}
 .dmeta .tx{color:var(--ink-faint);font-size:11.5px}
 .dfocus{box-shadow:inset 3px 0 0 var(--warn)}
-.dfile{font:11.5px var(--mono);color:var(--ink-dim);background:var(--panel);padding:8px 12px;
+.dfile{font:11.5px var(--mono);color:var(--ink-dim);background:var(--panel);padding:9px 13px;
       border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:baseline}
 .dfile b{color:var(--ink);font-weight:600}
 .dfile .p{color:var(--accent)} .dfile .m{color:var(--err)}

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)}

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}
@@ -48,7 +49,7 @@
 
 /* ---------- 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. */
@@ -65,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. */
@@ -79,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}
@@ -101,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
@@ -113,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}
@@ -156,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)}