anentrypoint-design 0.0.240 → 0.0.242

package/app-shell.css

@@ -1,9 +1,8 @@
 /* ============================================================
    247420 design system — component sheet
-   "Acid Editorial": Bricolage Grotesque display + Hanken Grotesk body +
-   JetBrains code. Confident hierarchy, asymmetric grid tension, print
-   texture over glow, one electric lead accent. Indicator rails over
-   hairlines.
+   "Acid Editorial": system-font display + body + mono, no custom web fonts.
+   Confident hierarchy, asymmetric grid tension, print texture over glow,
+   one electric lead accent. Indicator rails over hairlines.
    ============================================================ */
 
 /* ============================================================
@@ -31,7 +30,7 @@ button, input, select, textarea { font: inherit; }
 }
 .skip-link:focus {
   top: 10px;
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
 }
 body {
@@ -248,7 +247,7 @@ body.canvas-host { background: transparent !important; }
 }
 .app-topbar nav a:hover { background: var(--bg-2); color: var(--fg); }
 .app-topbar nav a:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
 }
 /* Active tab reads as a subtle tinted pill with an accent underline rather than
@@ -284,7 +283,7 @@ body.canvas-host { background: transparent !important; }
   width: 100%;
 }
 .app-search:focus-within {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
 }
 
@@ -326,7 +325,7 @@ body.canvas-host { background: transparent !important; }
 }
 .app-side a:hover { background: var(--bg-2); color: var(--fg); }
 .app-side a:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
 }
 .app-side a.active {
@@ -449,7 +448,7 @@ body.canvas-host { background: transparent !important; }
 .btn-ghost:hover { background: var(--fg); color: var(--bg); }
 .btn:active, .btn-primary:active, .btn-ghost:active { transform: translateY(2px); }
 .btn:focus-visible, .btn-primary:focus-visible, .btn-ghost:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
 }
 
@@ -476,7 +475,7 @@ body.canvas-host { background: transparent !important; }
 .ds-icon-btn-danger { background: var(--warn); color: var(--on-color); }
 .ds-icon-btn-danger:hover { filter: brightness(1.1); }
 .ds-icon-btn:active { transform: translateY(1px); }
-.ds-icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.ds-icon-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 .ds-icon-btn:disabled, .ds-icon-btn.is-disabled {
   opacity: 0.5; cursor: not-allowed; pointer-events: none;
 }
@@ -488,7 +487,7 @@ body.canvas-host { background: transparent !important; }
   display: inline-flex; align-items: center; justify-content: center;
   min-width: 18px; height: 18px; padding: 0 6px;
   font-size: var(--fs-micro); font-weight: 600; line-height: 1;
-  border-radius: 999px;
+  border-radius: var(--r-pill);
   background: var(--bg-3); color: var(--fg-2);
 }
 .ds-badge.tone-green   { background: var(--green-tint);  color: var(--green-deep); }
@@ -700,16 +699,13 @@ a.row { text-decoration: none; }
   padding: var(--space-9) 0 var(--space-8);
   display: grid; gap: var(--space-5) var(--space-6);
   grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
-  grid-template-areas: 'title title' 'body actions' 'badge badge';
+  grid-template-areas: 'title title' 'body actions';
   align-items: end;
   max-width: var(--measure-wide);
 }
 .ds-hero-head { grid-area: title; display: grid; gap: var(--space-3); }
 .ds-hero-body  { grid-area: body; }
 .ds-hero-actions { grid-area: actions; }
-/* Badge gets its own row — sharing 'actions' overlapped it onto the CTAs
-   whenever a caller passes both actions and badge. */
-.ds-hero-badge { grid-area: badge; }
 .ds-hero-title {
   font-family: var(--ff-display); font-weight: 700;
   font-size: clamp(40px, 9cqi, 116px);
@@ -730,7 +726,7 @@ a.row { text-decoration: none; }
 @container (max-width: 900px) {
   .ds-hero {
     grid-template-columns: minmax(0, 1fr);
-    grid-template-areas: 'title' 'body' 'actions' 'badge';
+    grid-template-areas: 'title' 'body' 'actions';
     align-items: start;
     padding: var(--space-7) 0 var(--space-6);
   }
@@ -904,7 +900,7 @@ table td { padding: 14px 16px; border-top: 1px solid var(--rule); }
 table tr.clickable { cursor: pointer; }
 table tr.clickable:hover td { background: var(--bg-2); }
 table tr.clickable:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: -2px;
 }
 table tr.clickable:focus-visible td { background: var(--bg-2); }
@@ -1302,7 +1298,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   flex-direction: column;
   gap: 4px;
 }
-.ds-file-grid:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-2); }
+.ds-file-grid:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: var(--r-2); }
 
 /* Listing wrapper holds the optional filter + sort header above the grid. */
 .ds-file-listing { display: flex; flex-direction: column; gap: var(--space-2); min-height: 0; }
@@ -1324,7 +1320,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 }
 .ds-file-sort-btn:hover { color: var(--fg-2); background: var(--bg-2); }
 .ds-file-sort-btn.active { color: var(--accent-ink); }
-.ds-file-sort-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-file-sort-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 
 /* Skeleton shimmer rows shown while a directory loads. */
 .ds-file-row-skeleton { cursor: default; pointer-events: none; }
@@ -1372,7 +1368,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   color: inherit; font: inherit; text-align: left; cursor: pointer;
 }
 .ds-file-open[disabled] { cursor: default; }
-.ds-file-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-1); }
+.ds-file-open:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: var(--r-1); }
 .ds-file-row:hover {
   background: var(--bg-2);
   border-color: var(--rule);
@@ -1445,7 +1441,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
    role=checkbox/aria-checked name+state. */
 .ds-check-box {
   width: 15px; height: 15px; box-sizing: border-box; flex: 0 0 auto; position: relative;
-  border: 1.5px solid var(--fg-3); border-radius: 4px;
+  border: 1.5px solid var(--fg-3); border-radius: var(--r-0);
   transition: background var(--dur-snap) var(--ease), border-color var(--dur-snap) var(--ease);
 }
 .is-marked > .ds-check-box,
@@ -1457,7 +1453,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 }
 [aria-checked="mixed"] > .ds-check-box { background: var(--accent); border-color: var(--accent); }
 [aria-checked="mixed"] > .ds-check-box::after {
-  content: ""; position: absolute; left: 3px; right: 3px; top: 6px; height: 2px; background: var(--bg); border-radius: 1px;
+  content: ""; position: absolute; left: 3px; right: 3px; top: 6px; height: 2px; background: var(--bg); border-radius: var(--r-hair);
 }
 
 .ds-file-check {
@@ -1470,7 +1466,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 }
 .ds-file-check:hover { background: var(--bg-3); color: var(--fg); }
 .ds-file-check.is-marked { color: var(--accent-ink); }
-.ds-file-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-file-check:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 .ds-file-check[disabled] { opacity: 0.4; cursor: default; }
 .ds-file-row.is-marked { background: var(--accent-tint); border-color: var(--accent); }
 .ds-file-selectall {
@@ -1480,7 +1476,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   padding: var(--space-1); border-radius: var(--r-1);
 }
 .ds-file-selectall:hover { background: var(--bg-2); color: var(--fg); }
-.ds-file-selectall:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-file-selectall:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 .ds-file-controls { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2) var(--space-1); flex-wrap: wrap; }
 .ds-file-controls .spread { flex: 1 1 auto; }
 .ds-file-controls .ds-file-sort { padding: 0; }
@@ -1518,7 +1514,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 }
 .ds-density-btn:hover { color: var(--fg); }
 .ds-density-btn.active { background: var(--accent-tint); color: var(--fg); }
-.ds-density-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-density-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 
 /* Compact density — tighter rows for long listings. */
 .ds-file-grid[data-density="compact"] { gap: 2px; }
@@ -1552,7 +1548,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   background: none; border: none; cursor: pointer; color: var(--fg);
 }
 .ds-file-cell-open[disabled] { cursor: default; }
-.ds-file-cell-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-2); }
+.ds-file-cell-open:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; border-radius: var(--r-2); }
 .ds-file-cell-media {
   display: flex; align-items: center; justify-content: center;
   width: 100%; aspect-ratio: 4 / 3;
@@ -1770,7 +1766,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   color: var(--fg-2); font-family: var(--ff-body); font-size: var(--fs-micro);
 }
 .ds-upload-act:hover { background: var(--bg-3); color: var(--fg); }
-.ds-upload-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-upload-act:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 @media (hover: none), (pointer: coarse) {
   .ds-upload-act { min-height: 44px; min-width: 44px; }
   /* 44px floor for file controls on ANY touch device, not only narrow ones
@@ -1841,7 +1837,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   border-radius: var(--r-2); color: var(--fg);
   font-family: inherit; font-size: var(--fs-sm);
 }
-.ds-modal-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.ds-modal-input:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 /* iOS auto-zooms inputs under 16px on focus, breaking the modal layout. */
 @media (hover: none), (pointer: coarse) {
   .ds-modal-input { font-size: 16px; min-height: 44px; }
@@ -2005,7 +2001,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 .ds-kbd-sep { color: var(--fg-3); font-size: var(--fs-micro); padding: 0 2px; }
 .ds-kbd {
   display: inline-block; min-width: 0;
-  padding: 2px 7px; border-radius: 6px;
+  padding: 2px 7px; border-radius: var(--r-0);
   background: var(--bg); border: var(--bw-hair) solid var(--rule);
   border-bottom-width: 2px;
   font-family: var(--ff-mono); font-size: var(--fs-micro); color: var(--fg-2);
@@ -2027,7 +2023,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   transition: color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
 }
 .ds-segmented .ds-seg-btn:hover { color: var(--fg); }
-.ds-segmented .ds-seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-segmented .ds-seg-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 .ds-segmented .ds-seg-btn.is-on {
   background: var(--bg); color: var(--fg);
   box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule);
@@ -2081,7 +2077,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   .chat-thread { scroll-behavior: smooth; }
 }
 .chat-thread::-webkit-scrollbar { width: 8px; }
-.chat-thread::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 4px; }
+.chat-thread::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: var(--r-0); }
 .chat-empty {
   margin: auto;
   text-align: center;
@@ -2095,7 +2091,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 .chat-msg { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; position: relative; min-width: 0; }
 .chat-msg.you { flex-direction: row-reverse; }
 .chat-msg.you .chat-stack { align-items: flex-end; }
-.chat-msg:hover { background: color-mix(in oklab, var(--fg) 4%, transparent); padding: 6px 0; margin: 0; border-radius: 8px; transition: background var(--dur-base) var(--ease); }
+.chat-msg:hover { background: color-mix(in oklab, var(--fg) 4%, transparent); padding: 6px 0; margin: 0; border-radius: var(--r-0); transition: background var(--dur-base) var(--ease); }
 
 .chat-avatar {
   width: 36px; height: 36px; flex-shrink: 0;
@@ -2141,7 +2137,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 .chat-bubble code {
   font-family: var(--ff-mono); font-size: 0.92em;
   background: color-mix(in oklab, var(--fg) 10%, transparent);
-  padding: 1px 6px; border-radius: 4px;
+  padding: 1px 6px; border-radius: var(--r-0);
 }
 .chat-msg.you .chat-bubble code { background: color-mix(in oklab, var(--fg) 10%, transparent); }
 .chat-bubble a {
@@ -2252,7 +2248,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 .chat-msg.you .chat-image,
 .chat-msg .chat-image,
 .chat-image {
-  display: inline-block; border-radius: 12px; overflow: hidden;
+  display: inline-block; border-radius: var(--r-1); overflow: hidden;
   max-width: min(100%, 480px); background: var(--bg-2);
   text-decoration: none; color: var(--fg);
   border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
@@ -2271,7 +2267,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 .chat-file {
   display: flex; align-items: center; gap: 12px; padding: 12px 14px;
   background: var(--bg-2); border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
-  border-radius: 12px; text-decoration: none; color: var(--fg);
+  border-radius: var(--r-1); text-decoration: none; color: var(--fg);
   max-width: min(100%, 360px);
   transition: background var(--dur-snap, .15s) var(--ease, ease), border-color var(--dur-snap, .15s) var(--ease, ease);
 }
@@ -2280,7 +2276,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   font-size: 22px; width: 36px; height: 36px;
   display: inline-flex; align-items: center; justify-content: center;
   background: color-mix(in oklab, var(--accent) 18%, transparent);
-  color: var(--accent-ink); border-radius: 8px; flex-shrink: 0; font-family: var(--ff-mono);
+  color: var(--accent-ink); border-radius: var(--r-0); flex-shrink: 0; font-family: var(--ff-mono);
 }
 .chat-file > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
 .chat-file .name {
@@ -2298,7 +2294,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   background: var(--bg-2);
   color: var(--fg);
   border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
-  border-radius: 12px; overflow: hidden; max-width: min(100%, 480px);
+  border-radius: var(--r-1); overflow: hidden; max-width: min(100%, 480px);
   transition: box-shadow 0.12s ease, border-color 0.12s ease;
 }
 .chat-msg:hover .chat-pdf { border-color: color-mix(in oklab, var(--accent) 30%, transparent); }
@@ -2321,7 +2317,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   display: grid; grid-template-columns: 80px 1fr; gap: 12px; padding: 10px;
   background: var(--bg-2);
   border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
-  border-radius: 12px; text-decoration: none; color: var(--fg);
+  border-radius: var(--r-1); text-decoration: none; color: var(--fg);
   max-width: min(100%, 480px);
   transition: background var(--dur-snap, .15s) var(--ease, ease), border-color var(--dur-snap, .15s) var(--ease, ease), box-shadow 0.15s ease;
 }
@@ -2332,7 +2328,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 }
 .chat-link:not(:has(.thumb)):not(:has(img)) { grid-template-columns: 1fr; }
 .chat-link .thumb,
-.chat-link img.thumb { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; background: var(--bg-3) center/cover no-repeat; }
+.chat-link img.thumb { width: 80px; height: 80px; border-radius: var(--r-0); object-fit: cover; background: var(--bg-3) center/cover no-repeat; }
 .chat-link .meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
 .chat-link .host { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); text-transform: lowercase; }
 .chat-link .title { font-weight: 600; font-size: var(--fs-sm); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@@ -2356,7 +2352,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   display: inline-flex; align-items: center; gap: 4px;
   padding: 2px 8px; background: var(--bg-2);
   border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
-  border-radius: 999px; font-size: var(--fs-xs);
+  border-radius: var(--r-pill); font-size: var(--fs-xs);
   cursor: pointer; user-select: none;
   transition: background var(--dur-snap, .12s) var(--ease, ease), border-color var(--dur-snap, .12s) var(--ease, ease), transform 0.12s ease;
   position: relative;
@@ -2477,7 +2473,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 .chat-composer .send:active { filter: brightness(0.94); }
 .chat-composer .send:focus-visible,
 .composer-btn:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
 }
 .chat-composer .send:disabled {
@@ -2589,8 +2585,13 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
    Component States — Disabled, Loading, Error, Success
    -------------------------------------------------------------- */
 
-/* Disabled state for all interactive elements */
+/* Disabled state for all interactive elements. The `.is-disabled` class
+   variants cover Btn()'s anchor-rendered case (shell.js) — an <a> has no
+   :disabled pseudo-class, so a disabled link-styled button relies entirely
+   on this class selector for its visual treatment (aria-disabled + tabindex
+   are set in JS; this is the paired CSS half). */
 .btn:disabled, .btn-primary:disabled, .btn-ghost:disabled,
+.btn.is-disabled, .btn-primary.is-disabled, .btn-ghost.is-disabled,
 button:disabled, [disabled] {
   opacity: 0.6;
   cursor: not-allowed;
@@ -2927,7 +2928,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 
 /* Base focus-visible: 2px ring + 2px offset clears dark bg-3 surfaces (WCAG 1.4.11) */
 :focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
 }
 
@@ -2937,7 +2938,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 [role="tab"]:focus-visible,
 .row:focus-visible,
 .row[tabindex]:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
 }
 
@@ -3327,7 +3328,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
   border-radius: var(--r-1, 6px);
   cursor: pointer;
 }
-.app-side-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.app-side-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 @container (max-width: 900px) {
   .app-side-toggle { display: inline-flex; }
   .app-topbar .brand { margin-left: 44px; }
@@ -3417,7 +3418,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 .ws-resizer { grid-row: 1 / -1; align-self: stretch; justify-self: end; width: 8px; margin-right: -4px; z-index: 5; cursor: col-resize; background: transparent; border: none; padding: 0; touch-action: none; }
 .ws-resizer::after { content: ""; display: block; width: 2px; height: 100%; margin: 0 auto; background: transparent; transition: background var(--dur-snap) var(--ease); }
 .ws-resizer:hover::after, .ws-resizer:focus-visible::after { background: var(--accent); }
-.ws-resizer:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.ws-resizer:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
 .ws-resizer.ws-resizer-rail { grid-column: 1; }
 .ws-resizer.ws-resizer-sessions { grid-column: 2; }
 .ws-resizer.ws-resizer-pane { grid-column: 3; justify-self: end; }
@@ -3469,7 +3470,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
   border-radius: var(--r-1); cursor: pointer;
 }
 .ws-rail-toggle:hover { background: var(--bg-3); color: var(--fg); }
-.ws-rail-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.ws-rail-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 .ws-rail-inner { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: var(--space-3) var(--space-2); gap: var(--space-2); }
 .ws-rail-head { display: flex; align-items: center; min-height: 36px; padding: 0 var(--space-2); }
 .ws-rail-brand { font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-body); color: var(--fg); white-space: nowrap; overflow: hidden; }
@@ -3482,7 +3483,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
   min-height: 40px; white-space: nowrap; overflow: hidden;
 }
 .ws-rail-action:hover { filter: brightness(1.08); }
-.ws-rail-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.ws-rail-action:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 .ws-rail-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
 .ws-rail-item {
   display: flex; align-items: center; gap: var(--space-2);
@@ -3492,7 +3493,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
   font-family: var(--ff-body); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden;
 }
 .ws-rail-item:hover { background: var(--bg-3); color: var(--fg); }
-.ws-rail-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.ws-rail-item:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
 .ws-rail-item.active { background: var(--accent-tint); color: var(--fg); box-shadow: inset 2px 0 0 var(--accent); }
 .ws-rail-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
 .ws-rail-item-count { font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3); }
@@ -3565,7 +3566,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 /* Desktop-only chrome toggle (sessions collapse): inverse of the mobile drawer-toggle. */
 .ws-desktop-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: none; color: var(--fg-2); cursor: pointer; border-radius: var(--r-1); }
 .ws-desktop-toggle:hover { background: var(--bg-2); color: var(--fg); }
-.ws-desktop-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.ws-desktop-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 @media (max-width: 900px) { .ws-desktop-toggle { display: none; } }
 /* The pane collapse toggle is meaningless once the pane TRACK is dropped (the
    pane becomes a mobile overlay drawer at <=1480px, reached via its own
@@ -3689,7 +3690,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
   .ws-crumb .app-crumb .crumb-right { margin-left: 0; flex-wrap: wrap; min-width: 0; display: inline-flex; }
 }
 .ws-drawer-toggle:hover { background: var(--bg-2); color: var(--fg); }
-.ws-drawer-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.ws-drawer-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 
 @media (prefers-reduced-motion: reduce) {
   .ws-shell, .ws-rail, .ws-pane, .ws-sessions, .ws-scrim { transition: none; }
@@ -3701,7 +3702,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
    ============================================================ */
 
 /* Highlighted match inside a Row title (Row `highlight` prop). */
-.ds-hl { background: color-mix(in oklab, var(--accent) 25%, transparent); color: inherit; border-radius: 2px; }
+.ds-hl { background: color-mix(in oklab, var(--accent) 25%, transparent); color: inherit; border-radius: var(--r-hair); }
 
 /* Action strip rendered inside an EXPANDED Row (Row `actions` prop). The
    buttons stop propagation so they never fire the row onClick. */
@@ -3714,20 +3715,20 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
   transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
 }
 .row-act:hover { background: var(--bg-3); color: var(--fg); }
-.row-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.row-act:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 
 /* FilterPills - a group of pill toggle buttons (aria-pressed). */
 .ds-filter-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
 .ds-filter-pill {
   display: inline-flex; align-items: center; justify-content: center;
   padding: 4px 12px; min-height: 28px;
-  background: var(--bg-2); border: var(--bw-hair) solid var(--bg-3); border-radius: 999px;
+  background: var(--bg-2); border: var(--bw-hair) solid var(--bg-3); border-radius: var(--r-pill);
   color: var(--fg-2); font-family: var(--ff-body); font-size: var(--fs-tiny); cursor: pointer;
   transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
 }
 .ds-filter-pill:hover { background: var(--bg-3); color: var(--fg); }
 .ds-filter-pill.active { background: var(--accent-tint); color: var(--fg); border-color: var(--accent); }
-.ds-filter-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-filter-pill:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 
 /* Touch floor for the new small controls. */
 @media (pointer: coarse) {
@@ -3737,7 +3738,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 /* Disabled file actions (read-only row / in-flight mutation) stay visible but inert. */
 .ds-file-act:disabled { opacity: .45; cursor: default; }
 .ds-file-act:disabled:hover { background: transparent; color: var(--fg-3); }
-.ds-file-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-file-act:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 
 /* ============================================================
    Print — linearize WorkspaceShell so main content prints in full.
@@ -3788,7 +3789,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 /* PhaseWalk */
 .ds-phasewalk { display: inline-flex; gap: 2px; vertical-align: middle; }
 .ds-phasewalk-seg {
-  width: 18px; height: 10px; border-radius: 2px;
+  width: 18px; height: 10px; border-radius: var(--r-hair);
   background: var(--bg-3); position: relative;
 }
 .ds-phasewalk-seg.is-reached { background: var(--success); }
@@ -3827,8 +3828,8 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 /* BarRow */
 .ds-bar-row { display: flex; align-items: center; gap: 8px; margin: 3px 0; font-size: var(--fs-tiny); }
 .ds-bar-row-label { width: 100px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ds-bar-bg { flex: 1; min-width: 60px; background: var(--bg-3); border-radius: 2px; height: 6px; overflow: hidden; }
-.ds-bar-fill { background: var(--accent); height: 100%; border-radius: 2px; }
+.ds-bar-bg { flex: 1; min-width: 60px; background: var(--bg-3); border-radius: var(--r-hair); height: 6px; overflow: hidden; }
+.ds-bar-fill { background: var(--accent); height: 100%; border-radius: var(--r-hair); }
 .ds-bar-row-value { flex-shrink: 0; color: var(--fg-2); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 @media (max-width: 400px) {
   .ds-bar-row-label { width: 72px; }
@@ -3843,7 +3844,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
   .ds-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); }
 }
 .ds-stats-grid-empty { padding: var(--space-3); color: var(--fg-3); font-size: var(--fs-tiny); }
-.ds-stat { min-width: 0; background: var(--bg-3); border-radius: 4px; padding: 10px 12px; }
+.ds-stat { min-width: 0; background: var(--bg-3); border-radius: var(--r-0); padding: 10px 12px; }
 .ds-stat-val { font-size: clamp(18px, 5cqi, 22px); font-weight: 700; color: var(--accent-ink); overflow-wrap: anywhere; }
 .ds-stat-val.rate-big { font-size: clamp(24px, 7cqi, 32px); color: var(--success); }
 .ds-stat-val.err-rate { font-size: clamp(24px, 7cqi, 32px); color: var(--warn); }
@@ -3854,7 +3855,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 .ds-sub-grid-empty { padding: var(--space-3); color: var(--fg-3); font-size: var(--fs-tiny); }
 .ds-sub-btn {
   padding: 6px 10px; background: var(--bg-3); border: var(--bw-hair) solid var(--bg-3);
-  border-radius: 4px; font-size: var(--fs-tiny); cursor: pointer; color: var(--fg);
+  border-radius: var(--r-0); font-size: var(--fs-tiny); cursor: pointer; color: var(--fg);
   text-align: left; font-family: var(--ff-body);
 }
 .ds-sub-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
@@ -3885,7 +3886,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 /* DevRow */
 .ds-dev-row {
   background: var(--danger-surface); border-left: var(--bw-chunk) solid var(--warn);
-  padding: 8px 12px; margin: 4px 0; border-radius: 3px; font-size: var(--fs-tiny);
+  padding: 8px 12px; margin: 4px 0; border-radius: var(--r-hair); font-size: var(--fs-tiny);
 }
 .ds-dev-row strong { color: var(--warn); }
 
@@ -3905,7 +3906,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 .ds-live-log-entry { padding: 2px 8px; border-bottom: var(--bw-hair) solid var(--bg-3); overflow-wrap: anywhere; }
 .ds-live-log-entry:hover { background: var(--bg-3); }
 .ds-live-log-ts { margin-right: 6px; color: var(--fg-3); }
-.ds-live-log-subtag { margin-right: 6px; padding: 0 5px; border-radius: 2px; font-size: var(--fs-micro); }
+.ds-live-log-subtag { margin-right: 6px; padding: 0 5px; border-radius: var(--r-hair); font-size: var(--fs-micro); }
 .ds-live-log-preview { margin-left: 6px; color: var(--fg-3); word-break: break-word; }
 
 /* Touch floors for the dense controls (not covered by the mobile width blocks). */
@@ -3941,6 +3942,13 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 @media (max-width: 760px) {
   .ds-panel-duo { grid-template-columns: 1fr; }
 }
+/* Wide-viewport density: auto-fit grid so panel COUNT tracks actual children
+   instead of a hardcoded column number — 2 children sit 2-up, 5 wrap to a
+   third row, never an arbitrary 3-card reflex (same auto-fit/minmax pattern
+   as .ds-tile-grid). Panels floor at 280px before wrapping, so ultra-wide
+   screens still get more columns than a fixed repeat(3, ...) ever allowed. */
+.ds-panel-trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--space-2); margin: var(--space-2) 0; }
+.ds-panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-2); margin: var(--space-2) 0; }
 /* wide dense rows/tables scroll inside their panel, never the page */
 .ds-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
 
@@ -3951,7 +3959,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
   max-width: min(1100px, 100%);
   margin: var(--space-3) auto;
   background: var(--bg-2);
-  border-radius: 18px;
+  border-radius: var(--r-2);
   padding: clamp(16px, 5vw, 64px);
   box-sizing: border-box;
   display: flex;
@@ -4013,7 +4021,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
   .ds-slide-split { grid-template-columns: 1fr; }
 }
 .ds-slide-split-cell {
-  padding: 18px; background: var(--bg-2); border-radius: 14px;
+  padding: 18px; background: var(--bg-2); border-radius: var(--r-2);
   color: var(--fg-2); font-size: var(--fs-lg); line-height: var(--lh-base); min-width: 0;
 }
 .ds-slide-split-cell--accent { border-left: 3px solid var(--slide-accent, var(--accent)); }
@@ -4030,7 +4038,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 .ds-err-path {
   display: inline-flex; gap: 6px; align-items: baseline; flex-wrap: wrap; max-width: 100%;
   font-family: var(--ff-mono); font-size: 13px; color: var(--panel-text-2);
-  background: var(--panel-1); padding: 6px 12px; border-radius: 8px;
+  background: var(--panel-1); padding: 6px 12px; border-radius: var(--r-0);
   overflow-wrap: anywhere; word-break: break-all;
 }
 
@@ -4046,10 +4054,15 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 }
 .ds-gallery-tile {
   cursor: pointer; display: flex; flex-direction: column; gap: 6px;
-  padding: 12px; border-radius: 10px; min-height: clamp(120px, 18vw, 160px);
+  padding: 12px; border-radius: var(--r-1); min-height: clamp(120px, 18vw, 160px);
   border: 0; text-align: left; font: inherit; color: inherit;
   background: var(--tile-tone, var(--panel-1));
+  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
 }
+/* Flat tonal fill only (house style: no bespoke tile chrome, no borders — see
+   .ds-feature above), so the hover affordance is a lift, matching the same
+   translateY + shadow idiom .chat-msg:hover .chat-bubble already uses. */
+.ds-gallery-tile:hover { transform: translateY(-2px); box-shadow: 0 2px 8px color-mix(in oklab, var(--fg) 10%, transparent); }
 .ds-gallery-tile:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 .ds-gallery-tile--tight { min-height: clamp(96px, 14vw, 120px); }
 .ds-lightbox {
@@ -4060,7 +4073,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
   z-index: 50;
 }
 .ds-lightbox-card {
-  background: var(--panel-0); border-radius: 14px; padding: clamp(16px, 4vw, 28px);
+  background: var(--panel-0); border-radius: var(--r-2); padding: clamp(16px, 4vw, 28px);
   width: min(520px, 100%); min-width: 0;
   max-height: calc(100vh - 24px);
   max-height: calc(100dvh - 24px);
@@ -4068,7 +4081,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
   display: flex; flex-direction: column; gap: 14px;
 }
 .ds-lightbox-preview {
-  padding: clamp(16px, 6vw, 36px); border-radius: 10px; text-align: center;
+  padding: clamp(16px, 6vw, 36px); border-radius: var(--r-1); text-align: center;
   font-family: var(--ff-mono); white-space: pre-line; font-size: clamp(16px, 5vw, 24px);
   background: var(--tile-tone, var(--panel-1));
 }
@@ -4090,7 +4103,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 }
 .ds-swatch-grid-lg { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
 .ds-swatch-col { display: flex; flex-direction: column; gap: 6px; }
-.ds-swatch-chip { height: 48px; border-radius: 10px; border: 1px solid var(--rule); background: var(--swatch, var(--panel-1)); }
+.ds-swatch-chip { height: 48px; border-radius: var(--r-1); border: 1px solid var(--rule); background: var(--swatch, var(--panel-1)); }
 .ds-swatch-chip--big { height: 64px; }
 .ds-swatch-name { font-family: var(--ff-mono); font-size: 11px; color: var(--fg-3); }
 .ds-type-panel { padding: clamp(10px, 2.5vw, 14px) clamp(10px, 3vw, 18px); display: flex; flex-direction: column; gap: 14px; }
@@ -4152,14 +4165,14 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 .ds-savebar {
   position: sticky; bottom: 8px; display: flex; align-items: center;
   justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding: 10px;
-  background: var(--panel-2); border-radius: 10px; margin: 8px 0;
+  background: var(--panel-2); border-radius: var(--r-1); margin: 8px 0;
 }
 .ds-savebar-note { flex: 1 1 160px; min-width: 0; color: var(--panel-text-2); }
 .ds-settings-modal { min-width: min(320px, calc(100vw - 32px)); max-width: 480px; }
 .ds-modal-body-form { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
 .ds-modal-note { margin: 0 0 8px; color: var(--panel-text-2); font-size: 14px; }
 .ds-draft-preview {
-  background: var(--panel-1); padding: 12px; border-radius: 6px;
+  background: var(--panel-1); padding: 12px; border-radius: var(--r-0);
   font-size: 13px; color: var(--panel-text-2); max-height: 120px;
   overflow-y: auto; font-family: var(--ff-mono); overflow-wrap: anywhere;
 }
@@ -4180,7 +4193,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 .ds-auth-remember { display: flex; align-items: center; gap: 6px; cursor: pointer; }
 .ds-auth-remember-text { color: var(--panel-text-2); font-size: 13px; }
 .ds-auth-forgot { font-size: 13px; }
-.ds-auth-error { padding: 8px 10px; background: var(--panel-1); border-radius: 8px; color: var(--danger); font-size: 13px; overflow-wrap: anywhere; }
+.ds-auth-error { padding: 8px 10px; background: var(--panel-1); border-radius: var(--r-0); color: var(--danger); font-size: 13px; overflow-wrap: anywhere; }
 .ds-auth-divider { display: flex; align-items: center; gap: 10px; margin: 6px 0; color: var(--panel-text-3); font-size: 12px; }
 .ds-auth-divider-line { flex: 1; height: 1px; background: var(--panel-2); }
 .ds-auth-providers { display: flex; gap: 8px; flex-wrap: wrap; }
@@ -4204,7 +4217,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 .ds-tile-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; flex-wrap: wrap; min-width: 0; }
 .ds-tile-glyph { font-family: var(--ff-mono); color: var(--panel-text-3); }
 .ds-tile-label { color: var(--panel-text); overflow-wrap: anywhere; }
-.ds-gal-swatch { height: 64px; border-radius: 8px; background: var(--swatch, var(--panel-1)); }
+.ds-gal-swatch { height: 64px; border-radius: var(--r-0); background: var(--swatch, var(--panel-1)); }
 .ds-gal-swatch-meta { display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; font-family: var(--ff-mono); font-size: 11px; min-width: 0; }
 .ds-gal-swatch-name { color: var(--panel-text); }
 .ds-gal-swatch-hint { color: var(--panel-text-3); overflow-wrap: anywhere; }
@@ -4225,7 +4238,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 .ds-cli-warn .prompt, .ds-cli-warn .cmd { color: var(--mascot); }
 .ds-cli-log .prompt { color: var(--fg-3); }
 .ds-cli-log .cmd { color: var(--fg-2); font-family: var(--ff-mono); }
-.ds-term-body { padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; background: var(--bg-2); border-radius: 10px; }
+.ds-term-body { padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; background: var(--bg-2); border-radius: var(--r-1); }
 .ds-term-body--tall { min-height: 280px; }
 .ds-term-input-row { margin-top: 6px; }
 .ds-term-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; font-family: var(--ff-mono); font-size: 13px; color: var(--fg); }