Nothing below text-xs: tab counts, sidebar group label and record TTL hint at 12px

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>

src/app/Shell.module.css

@@ -259,7 +259,7 @@ colour, 11 px uppercase group headings, and a 48 px header on the page colour.
 .slist { padding: 0; gap: 1px; }
 .group { gap: 1px; }
 .group + .group { margin-top: 0; }
-.grph { padding: 10px var(--s-5) var(--s-2); font: 600 11px/1.3 var(--font-ui); letter-spacing: .05em; color: color-mix(in oklch, var(--ink) 62%, transparent); }
+.grph { padding: 10px var(--s-5) var(--s-2); font: 600 var(--t-1)/1.3 var(--font-ui); letter-spacing: .05em; color: color-mix(in oklch, var(--ink) 62%, transparent); }
 .s { gap: var(--s-5); color: var(--ink); border-radius: var(--r-3); }
 .s:hover { background: color-mix(in oklch, var(--pan2) 60%, transparent); }
 .s[data-active='true'] { background: var(--pan2); }

src/screens/zones/Zones.module.css

@@ -115,7 +115,7 @@ the table.
 /* The canvas's page tab (an underline with the count) and the panel's own bars. */
 .pageTabs { display:flex; gap:2px; border-bottom:1px solid var(--line); margin: 0 0 var(--s-10); }
 .pageTab { display:inline-flex; gap:6px; align-items:center; padding:10px 16px; border:0; border-bottom:2px solid var(--ink); margin-bottom:-1px; background:transparent; color:var(--ink); font:500 14px/1.4 var(--font-ui); cursor:default; }
-.pageTab em { font:400 10px/1 var(--font-mono); opacity:.6; font-style:normal; }
+.pageTab em { font:400 var(--t-1)/1 var(--font-mono); opacity:.6; font-style:normal; }
 .views { padding: var(--s-7) var(--s-10) 0; }
 .fltIn { padding: var(--s-8) var(--s-10); margin-bottom: 0; }
 .foot { padding: var(--s-7) var(--s-10); }

src/ui/EditableTable.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react'
+import { Table, TableBody, TableHeader } from '@/components/ui/table'
 import styles from './EditableTable.module.css'
 
 /*
@@ -24,12 +25,16 @@ export function EditableTable({
   children: ReactNode
   className?: string
 }) {
+  /* The table is ReUI's `ui/table` (its container scrolls sideways on a narrow
+     screen). Not a `data-grid`: the rows are inputs and selects edited in place,
+     which the grid's sorting, paging and selection have nothing to do with. The
+     cells stay native `th`/`td` that the callers lay out. */
   return (
-    <table className={[styles.table, className].filter(Boolean).join(' ')}>
-      <thead>
+    <Table className={[styles.table, className].filter(Boolean).join(' ')}>
+      <TableHeader>
         <tr>{header}</tr>
-      </thead>
-      <tbody>{children}</tbody>
-    </table>
+      </TableHeader>
+      <TableBody>{children}</TableBody>
+    </Table>
   )
 }

src/ui/PageTabs.module.css

@@ -2,4 +2,4 @@
 .tab { display:inline-flex; gap:6px; align-items:center; padding:10px 16px; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; background:transparent; color:var(--mute); font:500 14px/1.4 var(--font-ui); cursor:pointer; white-space:nowrap; }
 .tab:hover { color:var(--ink); }
 .tab[aria-selected='true'] { color:var(--ink); border-bottom-color:var(--ink); }
-.tab em { font:400 10px/1 var(--font-mono); opacity:.6; font-style:normal; }
+.tab em { font:400 var(--t-1)/1 var(--font-mono); opacity:.6; font-style:normal; }

src/ui/SubTabs.module.css

@@ -60,4 +60,4 @@ marked with an edge and the rest read as ordinary links.
   background: var(--acc-ink);
 }
 
-.count { margin-left: var(--s-3); font: 400 10px/1 var(--font-mono); font-style: normal; opacity: .6; }
+.count { margin-left: var(--s-3); font: 400 var(--t-1)/1 var(--font-mono); font-style: normal; opacity: .6; }

src/ui/record.module.css

@@ -14,7 +14,7 @@ they read.
   white-space: nowrap;
 }
 
-.ttl small { color: var(--faint); }
+.ttl small { font-size: var(--t-1); color: var(--faint); }
 
 /* A public key or a hex string: it breaks by characters, not by words, because
    it has none. */