@nanocollective/roster 0.1.0-alpha.3 → 0.1.0-alpha.30

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;
-  --will:#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;
-    --will:#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;
-    --will:#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,42 +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],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,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)}
-
-.ghbtn{display:inline-block;padding:5px 11px;border:1px solid var(--line);border-radius:7px;
-       font:12px 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)}
+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;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}
@@ -82,29 +149,143 @@ 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(--will);border-color:color-mix(in srgb,var(--will) 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)}
-
-.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}
+.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
+   there was one line of grey text in an otherwise empty panel beside a second empty panel,
+   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: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: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. */
+.sk-row:nth-child(2n) .skbar.t{width:68%}
+.sk-row:nth-child(3n) .skbar.t{width:92%}
+.sk-row:nth-child(3n) .skbar.m{width:52%}
+.sk-head{height:19px;width:56%;margin:6px 0 18px}
+.sk-line{height:10px;width:100%;margin:9px 0}
+.sk-line:nth-child(2n){width:88%}
+.sk-line:nth-child(3n){width:94%}
+.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}
+/* 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}
+@keyframes pulse{0%,100%{opacity:.35}50%{opacity:.85}}
+@media (prefers-reduced-motion:reduce){
+  .sk,.sk-row .skbar,.nav .n.wait{animation:none}
+}
+
+.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}
-dialog.ask .askrow{margin-top:12px;justify-content:flex-end}
+/* The attach control, when the dialog is a reply rather than a question. */
+dialog.ask .attach{margin-top:9px}
+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.
+ *
+ * Not a <dialog>, so the stacking and the backdrop are declared here rather than inherited
+ * 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)}
+/* 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,
+   and the border on it, are the only things that say which you are looking at.
+
+   Fit and centring are arithmetic in the module rather than layout: the transform has to be
+   the single source of truth, or zooming fights the flexbox. The module measures this box, so
+   changing the inset here is all it takes to change what "fitted" means. */
+.lightbox .lbstage{position:absolute;inset:46px 56px 52px;overflow:hidden}
+.lightbox img{position:absolute;top:0;left:0;transform-origin:0 0;
+              max-width:none;max-height:none;border-radius:8px;
+              border:1px solid rgba(255,255,255,.14);
+              box-shadow:0 18px 50px rgba(0,0,0,.5);
+              cursor:zoom-in;user-select:none;-webkit-user-drag:none}
+/* Zoomed past fitted it is being read, not looked at, so the frame comes off: a border and a
+   drop shadow in the middle of a diff you are inspecting is furniture in the way. */
+.lightbox[data-zoomed="true"] img{border-radius:0;border-color:transparent;box-shadow:none}
+.lightbox[data-zoomed="true"] img{cursor:grab}
+.lightbox[data-zoomed="true"] img:active{cursor:grabbing}
+
+.lightbox .lbx,.lightbox .lbctl{--ic:17px;
+               display:inline-flex;align-items:center;justify-content:center;
+               width:34px;height:34px;padding:0;border-radius:9px;
+               border:1px solid var(--line);background:var(--panel);color:var(--ink-dim);
+               cursor:pointer}
+.lightbox .lbx{position:absolute;top:14px;right:16px;--ic:18px}
+.lightbox .lbx:hover,.lightbox .lbctl:not(:disabled):hover{color:var(--ink);
+               border-color:var(--ink-faint)}
+/* At a stop the button stays where it is and stops responding. Removing it would move the two
+   beside it, which reads as the control having changed rather than as a limit being reached. */
+.lightbox .lbctl:disabled{opacity:.35;cursor:default}
+
+/* Bottom right, which is the one corner nothing else uses: close is top right, the hint is top
+   centre and the caption is bottom centre. */
+.lightbox .lbzoom{position:absolute;bottom:12px;right:16px;display:flex;gap:6px;align-items:center}
+/* Wide enough for "1600%" so the group does not resize as the number grows, and tabular so the
+   digits do not shuffle while you hold the button down. */
+.lightbox .lblevel{width:auto;min-width:60px;padding:0 9px;
+                   font:12px var(--mono);font-variant-numeric:tabular-nums;
+                   color:var(--ink-dim)}
+
+/* Both of these are over the picture, so they are quiet and they do not take the pointer:
+   a click that lands on the caption still means "fit", not "nothing happened". */
+.lightbox .lbhint,.lightbox .lbcap{position:absolute;left:0;right:0;margin:0;
+                                   pointer-events:none;text-align:center;
+                                   font:11.5px var(--sans);color:var(--ink-faint)}
+.lightbox .lbhint{top:16px;padding:0 60px}
+.lightbox .lbcap{bottom:19px;padding:0 200px;color:var(--ink-dim);font-size:12.5px;
+                 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+
+/* The page behind must not scroll under an overlay. A wheel event that misses the image
+   would otherwise scroll the document instead of doing nothing. */
+body[data-lightbox] {overflow:hidden}
+
+/* And the affordance on the document side: an image you can open should say so. */
+.md img,img.zoomable{cursor:zoom-in}
+
+/* ---------- a dialog for a whole task (sheet() in dialog.js) ---------- */
+dialog.sheet{border:1px solid var(--border-strong);border-radius:var(--r-lg);background:var(--bg);
+      color:var(--ink);padding:0;width:min(860px,calc(100vw - 32px));max-height:calc(100vh - 48px);
+      box-shadow:var(--shadow-lg)}
+dialog.sheet[open]{animation:dlgin .18s var(--ease)}
+dialog.sheet::backdrop{background:rgba(0,0,0,.35);backdrop-filter:blur(8px)}
+.sheetbody{padding:22px 24px 26px;overflow:auto;max-height:calc(100vh - 50px)}
+.sheettitle{margin:0 0 14px;font:600 18px var(--sans);letter-spacing:-.02em}
+.sheetloading{display:grid;place-items:center;min-height:260px}
+.spinner{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);
+      animation:spin .7s linear infinite}
+@keyframes spin{to{transform:rotate(360deg)}}

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.will{color:var(--will);border-color:var(--will)}
-.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}
@@ -89,9 +91,17 @@
 .editor{font:12.5px/1.7 var(--mono);min-height:340px;overflow:hidden;resize:none}
 .editnote{margin:8px 0 0;font:11.5px var(--sans);color:var(--ink-faint)}
 
+/* The path, then the controls, pushed to the far end. Editing these files is the whole point
+   of the Org screen, and the way in used to be a grey word in a row of grey words — which is
+   why "there is no easy way to edit the org docs" was fair about a screen that could. */
+.filehead{margin-bottom:6px;gap:8px;align-items:center}
+.filehead .meta{margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.editbtn{gap:6px;--ic:13px}
+
 /* 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)}
@@ -103,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,27 +1,32 @@
 /* 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(--will) 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(--will);font-size:11.5px}
+.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)}
+/* Pushed to the far end and kept faint: the diff is what this row is for, and a button that
+   competes with the filename for attention is one you stop reading past. */
+.askfile{margin-left:auto;padding:1px 8px;font-size:11px;opacity:.55}
+.dblock:hover .askfile,.askfile:focus-visible{opacity:1}
 .dempty{padding:20px;color:var(--ink-faint);font-size:12.5px}
 
 /* The learned/forgotten marker on a "what changed" row. */

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,25 +1,46 @@
 /* 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)}
-.hsect{font:600 10.5px var(--sans);letter-spacing:.09em;text-transform:uppercase;
-      color:var(--ink-faint);margin:24px 0 10px}
+
+/* ---------- sections ----------
+   Doctor, the prompt audit and lint ask the same kind of question, and used to answer it in
+   three different shapes: hairline rows, bordered boxes, and cards with two buttons each. One
+   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 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)}
+.hbody{padding-top:2px}
+/* What the section is, in one line, before any of its findings. */
+.hnote{margin:10px 0 0;font:12.5px/1.55 var(--sans);color:var(--ink-faint)}
+.hacts{margin-top:12px}
+.hacts:empty{margin-top:0}
+/* Per-finding actions, in the text column rather than under the marker. */
+.facts{margin-top:9px}
+/* Two tags in a row read as one word without this: `too-longINDEX.md:49`. */
+.hbody .check .meta + .meta{margin-left:8px}
 
 /* ---------- the staff screen ---------- */
 .staffcard .v small{margin-top:4px}
 
 /* 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)}
@@ -33,7 +54,7 @@
 .planline.todo .ic{color:var(--warn)}
 .planline.warn{color:var(--ink-faint)}
 .planline.warn .ic{color:var(--warn)}
-.planout{margin-top:14px;max-height:320px;overflow:auto;font-size:11.5px}
+.planout{margin-top:14px;font-size:11.5px}
 
 .ffield{margin-bottom:10px}
 .ffield label{display:block;font:600 11px var(--sans);letter-spacing:.05em;