anentrypoint-design 0.0.296 → 0.0.297

package/app-shell.css

@@ -590,7 +590,7 @@ body.canvas-host { background: transparent !important; }
 .glyph {
   display: inline-flex; align-items: center; justify-content: center;
   width: 18px; height: 18px;
-  font-family: var(--ff-mono); font-size: 13px;
+  font-family: var(--ff-mono); font-size: var(--fs-tiny);
   opacity: 0.8;
 }
 
@@ -685,7 +685,7 @@ a.row:hover, button.row:hover, .row[role="button"]:hover {
   font-family: var(--ff-mono);
   font-size: var(--fs-sm);
   line-height: var(--lh-snug);
-  margin-top: 8px;
+  margin-top: var(--space-2);
   padding: 10px 12px;
   background: var(--bg);
   border-radius: var(--r-1);
@@ -1159,7 +1159,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 
 /* Field char counter (TextField maxLength) */
 .ds-field-count {
-  font-size: var(--fs-tiny, 12px);
+  font-size: var(--fs-tiny, 13px);
   color: var(--fg-3, var(--fg-2));
   text-align: right;
 }
@@ -1607,7 +1607,11 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
    Shared by FileRow/FileCell (.is-marked) and the file/session select-all +
    SessionCard select (aria-checked true/mixed) since the bundle concatenates
    all CSS. Replaces the old [x]/[ ] bracket text - no glyphs, AT keeps the
-   role=checkbox/aria-checked name+state. */
+   role=checkbox/aria-checked name+state.
+   See also .ds-check in editor-primitives.css — a separate native-input
+   checkbox family for form/settings contexts; intentionally distinct
+   rendering (native vs CSS-drawn), do not let one drift toward the other
+   by accident. */
 .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: var(--r-0);
@@ -2711,6 +2715,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 .ds-select {
     width: 100%;
     min-width: 0;
+    min-height: 32px; /* shared control floor with .btn/.btn-primary/.btn-ghost */
     padding: 10px 30px 10px 14px; /* right gap clears the chevron */
     background: var(--bg-2);
     border: 0;

package/chat.css

@@ -151,7 +151,7 @@
 }
 .agentchat-jump.show { display: inline-flex; }
 .agentchat-jump:hover { background: var(--bg-3); }
-.agentchat-jump:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.agentchat-jump:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 
 /* Streaming caret: a thin blinking bar at the live edge of an assistant turn. */
 .chat-stream-caret {
@@ -173,7 +173,7 @@
 }
 .chat-msg-action-label { font-size: var(--fs-tiny); }
 .chat-msg-action:hover { background: var(--bg-2); color: var(--fg); }
-.chat-msg-action:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; opacity: 1; }
+.chat-msg-action:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; opacity: 1; }
 
 /* Empty state: a fresh thread is an invitation, not a void. */
 .agentchat-empty {
@@ -207,7 +207,7 @@
   color: var(--fg-2, var(--fg));
 }
 .agentchat-empty-suggestion:hover, .chat-empty-suggestion:hover { background: color-mix(in srgb, var(--accent, var(--fg)) 12%, transparent); }
-.agentchat-empty-suggestion:focus-visible, .chat-empty-suggestion:focus-visible { outline: 2px solid var(--accent, var(--fg)); outline-offset: 2px; }
+.agentchat-empty-suggestion:focus-visible, .chat-empty-suggestion:focus-visible { outline: 2px solid var(--accent, var(--fg)); outline-offset: var(--focus-offset); }
 
 /* Guided install path in the empty state: copy line + monospaced command rows
    (each with its own copy button) + a recheck button. No animation. */
@@ -240,7 +240,7 @@
   font-family: var(--ff-body); font-size: var(--fs-tiny);
 }
 .agentchat-install-copy:hover { background: var(--bg-3); color: var(--fg); }
-.agentchat-install-copy:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.agentchat-install-copy:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
 .agentchat-install-actions { display: flex; justify-content: flex-start; }
 
 /* Host-supplied transcript export actions riding the controls row. */
@@ -251,7 +251,7 @@
   font-family: var(--ff-body); font-size: var(--fs-tiny);
 }
 .agentchat-export-act:hover { background: var(--bg-2); color: var(--fg); }
-.agentchat-export-act:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.agentchat-export-act:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
 
 /* "working" tail: a long silent tool call shouldn't read as frozen. */
 .agentchat-working {
@@ -382,7 +382,7 @@
 /* Rail filter uses the shared .ds-search-input primitive (provides bg/border/
    radius/focus-ring); only the rail layout + touch floor live here. */
 .ds-session-head .ds-search-input { order: 1; flex: 1 1 auto; min-width: 0; min-height: 36px; padding: 0 10px; }
-.ds-session-new:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.ds-session-new:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 /* Touch floor (must FOLLOW the base rules - same specificity, order decides). */
 @media (pointer: coarse) {
   .ds-session-new { width: 44px; min-height: 44px; }
@@ -401,7 +401,7 @@
   cursor: pointer; text-align: left; color: var(--fg);
 }
 .ds-session-row:hover { background: var(--bg-2); }
-.ds-session-row:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
+.ds-session-row:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: calc(var(--focus-offset) * -1); }
 .ds-session-row.active { background: var(--accent-tint); box-shadow: inset 2px 0 0 var(--accent); }
 .ds-session-row.rail-green::before, .ds-session-row.rail-purple::before, .ds-session-row.rail-flame::before {
   content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: var(--r-hair);
@@ -495,7 +495,7 @@
 }
 .chat-code-block:hover .chat-code-copy, .chat-code-block:focus-within .chat-code-copy { opacity: 1; }
 .chat-code-copy.is-copied { color: var(--accent-ink); border-color: var(--accent); }
-.chat-code-copy:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; opacity: 1; }
+.chat-code-copy:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; opacity: 1; }
 /* Head-placed copy (structured CodeNode + FilePreviewCode) is always visible. */
 .chat-code-head .spread { flex: 1; }
 .chat-code-copy-head { position: static; opacity: 1; }
@@ -590,7 +590,7 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
   cursor: pointer; font-family: var(--ff-body); font-size: var(--fs-tiny);
 }
 .ds-dash-errors-toggle.active { background: var(--accent-tint); color: var(--fg); border-color: var(--accent); }
-.ds-dash-errors-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-dash-errors-toggle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
 
 /* --- C3: per-card select checkbox. --- */
 .ds-dash-select {
@@ -600,7 +600,7 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
   font-family: var(--ff-mono); font-size: var(--fs-sm);
 }
 .ds-dash-select[aria-checked="true"] { color: var(--accent-ink); }
-.ds-dash-select:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-dash-select:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
 
 /* --- C5: active dashboard card (current conversation). --- */
 .ds-dash-card.is-active { box-shadow: inset 2px 0 0 var(--accent); }
@@ -622,7 +622,7 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
 
 /* --- E1: inline file preview pane (split view, non-modal). --- */
 .ds-preview-pane { display: flex; flex-direction: column; min-height: 0; height: 100%; overflow: hidden; }
-.ds-preview-pane:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
+.ds-preview-pane:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: calc(var(--focus-offset) * -1); }
 .ds-preview-pane .ds-preview-body { flex: 1; min-height: 0; overflow: auto; }
 .ds-preview-pane-empty { align-items: center; justify-content: center; color: var(--fg-3); font-size: var(--fs-sm); }
 .ds-preview-code-wrap { display: flex; flex-direction: column; min-height: 0; }
@@ -639,7 +639,7 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
   border-radius: var(--r-1); background: var(--bg-2); color: var(--fg-2); cursor: pointer;
   font-family: var(--ff-body); font-size: var(--fs-tiny);
 }
-.ds-file-more-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-file-more-btn:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
 /* --- D3: locked/no-access file row. --- */
 .ds-file-row.is-locked { opacity: .6; }
 
@@ -652,7 +652,7 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
 }
 .ds-roots-tab:hover { background: var(--bg-2); color: var(--fg); }
 .ds-roots-tab.active { background: var(--bg); color: var(--fg); }
-.ds-roots-tab:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-roots-tab:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
 
 /* --- H4: touch targets. On a coarse pointer / narrow screen the hover-revealed
    action rows are made permanently visible and small controls floor to 44px so
@@ -660,6 +660,7 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
 @media (pointer: coarse), (max-width: 640px) {
   .chat-msg-actions { opacity: 1; }
   .chat-code-copy { opacity: 1; }
+  .chat-tool-copy { opacity: 1; min-width: 44px; min-height: 44px; }
   .chat-msg-action { min-width: 44px; height: 44px; }
   .ds-dash-select { min-width: 44px; min-height: 44px; }
   .ds-file-more-btn, .ds-roots-tab, .ds-dash-errors-toggle { min-height: 44px; }
@@ -684,7 +685,7 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
   color: var(--fg-3); font-family: var(--ff-body); font-size: var(--fs-micro);
 }
 .ds-session-meta-copy:hover { background: var(--bg-3); color: var(--fg); }
-.ds-session-meta-copy:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-session-meta-copy:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
 @media (pointer: coarse), (max-width: 640px) {
   .ds-session-meta-copy { min-height: 44px; min-width: 44px; }
 }
@@ -712,7 +713,7 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
 }
 
 /* Drag-over ring: token accent, never a hex. */
-.chat-composer.dragover { outline: 2px solid var(--accent-ink); outline-offset: -2px; border-radius: var(--r-2); }
+.chat-composer.dragover { outline: var(--focus-w) solid var(--focus-color); outline-offset: calc(var(--focus-offset) * -1); border-radius: var(--r-2); }
 
 /* Per-bit composer context: only the bit that owns a control is a button. */
 .chat-composer-context-bit {
@@ -753,7 +754,7 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
   font-family: var(--ff-body); font-size: var(--fs-tiny);
 }
 .agentchat-earlier-btn:hover { background: var(--bg-2); color: var(--fg); }
-.agentchat-earlier-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.agentchat-earlier-btn:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
 @media (pointer: coarse) {
   .agentchat-earlier-btn { min-height: 44px; }
 }
@@ -861,7 +862,7 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
 }
 .chat-msg .chat-tool .chat-tool-head::-webkit-details-marker { display: none; }
 .chat-msg .chat-tool .chat-tool-head:hover { background: var(--bg-2); }
-.chat-msg .chat-tool .chat-tool-head:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
+.chat-msg .chat-tool .chat-tool-head:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: calc(var(--focus-offset) * -1); }
 .chat-tool-icon { display: inline-flex; color: var(--fg-3); }
 .chat-tool-name { font-family: var(--ff-mono); font-weight: 600; color: var(--fg); }
 .chat-tool-label { color: var(--fg-3); font-size: var(--fs-tiny); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@@ -888,7 +889,7 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
 .chat-tool-section-label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--fs-tiny); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--fg-3); }
 .chat-tool-copy { position: static; opacity: 0; }
 .chat-tool-section:hover .chat-tool-copy, .chat-tool-section:focus-within .chat-tool-copy { opacity: 1; }
-.chat-tool-copy:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; opacity: 1; }
+.chat-tool-copy:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; opacity: 1; }
 .chat-tool-pre { margin: 0; padding: var(--space-2); background: var(--bg-2); border-radius: var(--r-1); font-family: var(--ff-mono); font-size: var(--fs-tiny); line-height: 1.45; overflow-x: auto; max-height: 320px; overflow-y: auto; }
 .chat-tool-pre.is-error { color: var(--flame); }
 .chat-tool-pre.chat-tool-empty { color: var(--fg-3); }
@@ -952,10 +953,10 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
 .ds-dash-stream-disc { display: inline-flex; align-items: center; gap: var(--space-1); }
 .ds-dash-selectall { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-tiny); color: var(--fg-2); cursor: pointer; background: none; border: none; padding: var(--space-1); }
 .ds-dash-selectall:hover { color: var(--fg); }
-.ds-dash-selectall:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-dash-selectall:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
 .ds-dash-clear { background: none; border: none; color: var(--fg-3); cursor: pointer; font-size: var(--fs-tiny); text-decoration: underline dotted; padding: var(--space-1); }
 .ds-dash-clear:hover { color: var(--fg); }
-.ds-dash-clear:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; border-radius: var(--r-1); }
+.ds-dash-clear:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; border-radius: var(--r-1); }
 
 /* Conversation-rail loading skeleton (cold ccsniff walk). */
 .ds-session-row-skeleton { display: flex; flex-direction: column; gap: 6px; padding: var(--space-2) var(--space-3); }

package/dist/247420.css

@@ -1127,7 +1127,7 @@
 .ds-247420 .glyph {
   display: inline-flex; align-items: center; justify-content: center;
   width: 18px; height: 18px;
-  font-family: var(--ff-mono); font-size: 13px;
+  font-family: var(--ff-mono); font-size: var(--fs-tiny);
   opacity: 0.8;
 }
 
@@ -1222,7 +1222,7 @@
   font-family: var(--ff-mono);
   font-size: var(--fs-sm);
   line-height: var(--lh-snug);
-  margin-top: 8px;
+  margin-top: var(--space-2);
   padding: 10px 12px;
   background: var(--bg);
   border-radius: var(--r-1);
@@ -1696,7 +1696,7 @@
 
 /* Field char counter (TextField maxLength) */
 .ds-247420 .ds-field-count {
-  font-size: var(--fs-tiny, 12px);
+  font-size: var(--fs-tiny, 13px);
   color: var(--fg-3, var(--fg-2));
   text-align: right;
 }
@@ -2144,7 +2144,11 @@
    Shared by FileRow/FileCell (.is-marked) and the file/session select-all +
    SessionCard select (aria-checked true/mixed) since the bundle concatenates
    all CSS. Replaces the old [x]/[ ] bracket text - no glyphs, AT keeps the
-   role=checkbox/aria-checked name+state. */
+   role=checkbox/aria-checked name+state.
+   See also .ds-check in editor-primitives.css — a separate native-input
+   checkbox family for form/settings contexts; intentionally distinct
+   rendering (native vs CSS-drawn), do not let one drift toward the other
+   by accident. */
 .ds-247420 .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: var(--r-0);
@@ -3248,6 +3252,7 @@
 .ds-247420 .ds-select {
     width: 100%;
     min-width: 0;
+    min-height: 32px; /* shared control floor with .btn/.btn-primary/.btn-ghost */
     padding: 10px 30px 10px 14px; /* right gap clears the chevron */
     background: var(--bg-2);
     border: 0;
@@ -6905,7 +6910,7 @@
 }
 .ds-247420 .agentchat-jump.show { display: inline-flex; }
 .ds-247420 .agentchat-jump:hover { background: var(--bg-3); }
-.ds-247420 .agentchat-jump:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.ds-247420 .agentchat-jump:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 
 /* Streaming caret: a thin blinking bar at the live edge of an assistant turn. */
 .ds-247420 .chat-stream-caret {
@@ -6927,7 +6932,7 @@
 }
 .ds-247420 .chat-msg-action-label { font-size: var(--fs-tiny); }
 .ds-247420 .chat-msg-action:hover { background: var(--bg-2); color: var(--fg); }
-.ds-247420 .chat-msg-action:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; opacity: 1; }
+.ds-247420 .chat-msg-action:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; opacity: 1; }
 
 /* Empty state: a fresh thread is an invitation, not a void. */
 .ds-247420 .agentchat-empty {
@@ -6961,7 +6966,7 @@
   color: var(--fg-2, var(--fg));
 }
 .ds-247420 .agentchat-empty-suggestion:hover, .ds-247420 .chat-empty-suggestion:hover { background: color-mix(in srgb, var(--accent, var(--fg)) 12%, transparent); }
-.ds-247420 .agentchat-empty-suggestion:focus-visible, .ds-247420 .chat-empty-suggestion:focus-visible { outline: 2px solid var(--accent, var(--fg)); outline-offset: 2px; }
+.ds-247420 .agentchat-empty-suggestion:focus-visible, .ds-247420 .chat-empty-suggestion:focus-visible { outline: 2px solid var(--accent, var(--fg)); outline-offset: var(--focus-offset); }
 
 /* Guided install path in the empty state: copy line + monospaced command rows
    (each with its own copy button) + a recheck button. No animation. */
@@ -6994,7 +6999,7 @@
   font-family: var(--ff-body); font-size: var(--fs-tiny);
 }
 .ds-247420 .agentchat-install-copy:hover { background: var(--bg-3); color: var(--fg); }
-.ds-247420 .agentchat-install-copy:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-247420 .agentchat-install-copy:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
 .ds-247420 .agentchat-install-actions { display: flex; justify-content: flex-start; }
 
 /* Host-supplied transcript export actions riding the controls row. */
@@ -7005,7 +7010,7 @@
   font-family: var(--ff-body); font-size: var(--fs-tiny);
 }
 .ds-247420 .agentchat-export-act:hover { background: var(--bg-2); color: var(--fg); }
-.ds-247420 .agentchat-export-act:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-247420 .agentchat-export-act:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
 
 /* "working" tail: a long silent tool call shouldn't read as frozen. */
 .ds-247420 .agentchat-working {
@@ -7135,7 +7140,7 @@
 /* Rail filter uses the shared .ds-search-input primitive (provides bg/border/
    radius/focus-ring); only the rail layout + touch floor live here. */
 .ds-247420 .ds-session-head .ds-search-input { order: 1; flex: 1 1 auto; min-width: 0; min-height: 36px; padding: 0 10px; }
-.ds-247420 .ds-session-new:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.ds-247420 .ds-session-new:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 /* Touch floor (must FOLLOW the base rules - same specificity, order decides). */
 @media (pointer: coarse) {
   .ds-247420 .ds-session-new { width: 44px; min-height: 44px; }
@@ -7154,7 +7159,7 @@
   cursor: pointer; text-align: left; color: var(--fg);
 }
 .ds-247420 .ds-session-row:hover { background: var(--bg-2); }
-.ds-247420 .ds-session-row:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
+.ds-247420 .ds-session-row:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: calc(var(--focus-offset) * -1); }
 .ds-247420 .ds-session-row.active { background: var(--accent-tint); box-shadow: inset 2px 0 0 var(--accent); }
 .ds-247420 .ds-session-row.rail-green::before, .ds-247420 .ds-session-row.rail-purple::before, .ds-247420 .ds-session-row.rail-flame::before {
   content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: var(--r-hair);
@@ -7248,7 +7253,7 @@
 }
 .ds-247420 .chat-code-block:hover .chat-code-copy, .ds-247420 .chat-code-block:focus-within .chat-code-copy { opacity: 1; }
 .ds-247420 .chat-code-copy.is-copied { color: var(--accent-ink); border-color: var(--accent); }
-.ds-247420 .chat-code-copy:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; opacity: 1; }
+.ds-247420 .chat-code-copy:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; opacity: 1; }
 /* Head-placed copy (structured CodeNode + FilePreviewCode) is always visible. */
 .ds-247420 .chat-code-head .spread { flex: 1; }
 .ds-247420 .chat-code-copy-head { position: static; opacity: 1; }
@@ -7343,7 +7348,7 @@
   cursor: pointer; font-family: var(--ff-body); font-size: var(--fs-tiny);
 }
 .ds-247420 .ds-dash-errors-toggle.active { background: var(--accent-tint); color: var(--fg); border-color: var(--accent); }
-.ds-247420 .ds-dash-errors-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-247420 .ds-dash-errors-toggle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
 
 /* --- C3: per-card select checkbox. --- */
 .ds-247420 .ds-dash-select {
@@ -7353,7 +7358,7 @@
   font-family: var(--ff-mono); font-size: var(--fs-sm);
 }
 .ds-247420 .ds-dash-select[aria-checked="true"] { color: var(--accent-ink); }
-.ds-247420 .ds-dash-select:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-247420 .ds-dash-select:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
 
 /* --- C5: active dashboard card (current conversation). --- */
 .ds-247420 .ds-dash-card.is-active { box-shadow: inset 2px 0 0 var(--accent); }
@@ -7375,7 +7380,7 @@
 
 /* --- E1: inline file preview pane (split view, non-modal). --- */
 .ds-247420 .ds-preview-pane { display: flex; flex-direction: column; min-height: 0; height: 100%; overflow: hidden; }
-.ds-247420 .ds-preview-pane:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
+.ds-247420 .ds-preview-pane:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: calc(var(--focus-offset) * -1); }
 .ds-247420 .ds-preview-pane .ds-preview-body { flex: 1; min-height: 0; overflow: auto; }
 .ds-247420 .ds-preview-pane-empty { align-items: center; justify-content: center; color: var(--fg-3); font-size: var(--fs-sm); }
 .ds-247420 .ds-preview-code-wrap { display: flex; flex-direction: column; min-height: 0; }
@@ -7392,7 +7397,7 @@
   border-radius: var(--r-1); background: var(--bg-2); color: var(--fg-2); cursor: pointer;
   font-family: var(--ff-body); font-size: var(--fs-tiny);
 }
-.ds-247420 .ds-file-more-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-247420 .ds-file-more-btn:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
 /* --- D3: locked/no-access file row. --- */
 .ds-247420 .ds-file-row.is-locked { opacity: .6; }
 
@@ -7405,7 +7410,7 @@
 }
 .ds-247420 .ds-roots-tab:hover { background: var(--bg-2); color: var(--fg); }
 .ds-247420 .ds-roots-tab.active { background: var(--bg); color: var(--fg); }
-.ds-247420 .ds-roots-tab:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-247420 .ds-roots-tab:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
 
 /* --- H4: touch targets. On a coarse pointer / narrow screen the hover-revealed
    action rows are made permanently visible and small controls floor to 44px so
@@ -7413,6 +7418,7 @@
 @media (pointer: coarse), (max-width: 640px) {
   .ds-247420 .chat-msg-actions { opacity: 1; }
   .ds-247420 .chat-code-copy { opacity: 1; }
+  .ds-247420 .chat-tool-copy { opacity: 1; min-width: 44px; min-height: 44px; }
   .ds-247420 .chat-msg-action { min-width: 44px; height: 44px; }
   .ds-247420 .ds-dash-select { min-width: 44px; min-height: 44px; }
   .ds-247420 .ds-file-more-btn, .ds-247420 .ds-roots-tab, .ds-247420 .ds-dash-errors-toggle { min-height: 44px; }
@@ -7437,7 +7443,7 @@
   color: var(--fg-3); font-family: var(--ff-body); font-size: var(--fs-micro);
 }
 .ds-247420 .ds-session-meta-copy:hover { background: var(--bg-3); color: var(--fg); }
-.ds-247420 .ds-session-meta-copy:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-247420 .ds-session-meta-copy:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
 @media (pointer: coarse), (max-width: 640px) {
   .ds-247420 .ds-session-meta-copy { min-height: 44px; min-width: 44px; }
 }
@@ -7465,7 +7471,7 @@
 }
 
 /* Drag-over ring: token accent, never a hex. */
-.ds-247420 .chat-composer.dragover { outline: 2px solid var(--accent-ink); outline-offset: -2px; border-radius: var(--r-2); }
+.ds-247420 .chat-composer.dragover { outline: var(--focus-w) solid var(--focus-color); outline-offset: calc(var(--focus-offset) * -1); border-radius: var(--r-2); }
 
 /* Per-bit composer context: only the bit that owns a control is a button. */
 .ds-247420 .chat-composer-context-bit {
@@ -7506,7 +7512,7 @@
   font-family: var(--ff-body); font-size: var(--fs-tiny);
 }
 .ds-247420 .agentchat-earlier-btn:hover { background: var(--bg-2); color: var(--fg); }
-.ds-247420 .agentchat-earlier-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-247420 .agentchat-earlier-btn:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
 @media (pointer: coarse) {
   .ds-247420 .agentchat-earlier-btn { min-height: 44px; }
 }
@@ -7614,7 +7620,7 @@
 }
 .ds-247420 .chat-msg .chat-tool .chat-tool-head::-webkit-details-marker { display: none; }
 .ds-247420 .chat-msg .chat-tool .chat-tool-head:hover { background: var(--bg-2); }
-.ds-247420 .chat-msg .chat-tool .chat-tool-head:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
+.ds-247420 .chat-msg .chat-tool .chat-tool-head:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: calc(var(--focus-offset) * -1); }
 .ds-247420 .chat-tool-icon { display: inline-flex; color: var(--fg-3); }
 .ds-247420 .chat-tool-name { font-family: var(--ff-mono); font-weight: 600; color: var(--fg); }
 .ds-247420 .chat-tool-label { color: var(--fg-3); font-size: var(--fs-tiny); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@@ -7641,7 +7647,7 @@
 .ds-247420 .chat-tool-section-label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--fs-tiny); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--fg-3); }
 .ds-247420 .chat-tool-copy { position: static; opacity: 0; }
 .ds-247420 .chat-tool-section:hover .chat-tool-copy, .ds-247420 .chat-tool-section:focus-within .chat-tool-copy { opacity: 1; }
-.ds-247420 .chat-tool-copy:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; opacity: 1; }
+.ds-247420 .chat-tool-copy:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; opacity: 1; }
 .ds-247420 .chat-tool-pre { margin: 0; padding: var(--space-2); background: var(--bg-2); border-radius: var(--r-1); font-family: var(--ff-mono); font-size: var(--fs-tiny); line-height: 1.45; overflow-x: auto; max-height: 320px; overflow-y: auto; }
 .ds-247420 .chat-tool-pre.is-error { color: var(--flame); }
 .ds-247420 .chat-tool-pre.chat-tool-empty { color: var(--fg-3); }
@@ -7705,10 +7711,10 @@
 .ds-247420 .ds-dash-stream-disc { display: inline-flex; align-items: center; gap: var(--space-1); }
 .ds-247420 .ds-dash-selectall { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-tiny); color: var(--fg-2); cursor: pointer; background: none; border: none; padding: var(--space-1); }
 .ds-247420 .ds-dash-selectall:hover { color: var(--fg); }
-.ds-247420 .ds-dash-selectall:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-247420 .ds-dash-selectall:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
 .ds-247420 .ds-dash-clear { background: none; border: none; color: var(--fg-3); cursor: pointer; font-size: var(--fs-tiny); text-decoration: underline dotted; padding: var(--space-1); }
 .ds-247420 .ds-dash-clear:hover { color: var(--fg); }
-.ds-247420 .ds-dash-clear:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; border-radius: var(--r-1); }
+.ds-247420 .ds-dash-clear:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; border-radius: var(--r-1); }
 
 /* Conversation-rail loading skeleton (cold ccsniff walk). */
 .ds-247420 .ds-session-row-skeleton { display: flex; flex-direction: column; gap: 6px; padding: var(--space-2) var(--space-3); }
@@ -7821,7 +7827,7 @@
     margin: 0; border-radius: 0; box-shadow: none;
     background: var(--panel-1);
     color: var(--panel-text);
-    font: var(--fs-tiny, 12px)/var(--lh-base, 1.4) var(--ff-mono, monospace);
+    font: var(--fs-tiny, 12px)/var(--lh-base, 1.55) var(--ff-mono, monospace);
     overflow: hidden;
 }
 .ds-247420 .ds-ep-panel-head {
@@ -7881,7 +7887,7 @@
     background: var(--panel-1);
     color: var(--panel-text);
     border-bottom: 1px solid var(--rule);
-    font: var(--fs-tiny, 12px)/var(--lh-base, 1.4) var(--ff-mono, monospace);
+    font: var(--fs-tiny, 12px)/var(--lh-base, 1.55) var(--ff-mono, monospace);
 }
 .ds-247420 .ds-ep-toolbar.dense { padding: 2px 4px; gap: 2px; }
 .ds-247420 .ds-ep-toolbar-leading,
@@ -7957,11 +7963,11 @@
 .ds-247420 .ds-ep-tree {
     display: flex; flex-direction: column;
     color: var(--panel-text);
-    font: var(--fs-tiny, 12px)/var(--lh-base, 1.4) var(--ff-mono, monospace);
+    font: var(--fs-tiny, 12px)/var(--lh-base, 1.55) var(--ff-mono, monospace);
     overflow: auto;
 }
 .ds-247420 .ds-ep-tree-item { display: flex; flex-direction: column; }
-.ds-247420 .ds-ep-tree-item:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.ds-247420 .ds-ep-tree-item:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 .ds-247420 .ds-ep-tree-row {
     display: flex; align-items: center; gap: 6px;
     padding: 4px 8px 4px 0;
@@ -7997,7 +8003,7 @@
     display: flex; flex-direction: column; gap: 6px;
     padding: 8px;
     color: var(--panel-text);
-    font: var(--fs-tiny, 12px)/var(--lh-base, 1.4) var(--ff-mono, monospace);
+    font: var(--fs-tiny, 12px)/var(--lh-base, 1.55) var(--ff-mono, monospace);
 }
 .ds-247420 .ds-ep-propfield {
     display: grid;
@@ -8225,8 +8231,8 @@
 .ds-247420 .ds-ep-json-node[open] > .ds-ep-json-sum::before { content: '-'; }
 .ds-247420 .ds-ep-json-sum:hover { background: color-mix(in oklab, var(--accent) 8%, transparent); }
 .ds-247420 .ds-ep-json-sum:focus-visible {
-    outline: 2px solid var(--accent-ink);
-    outline-offset: -2px;
+    outline: var(--focus-w) solid var(--focus-color);
+    outline-offset: calc(var(--focus-offset) * -1);
 }
 .ds-247420 .ds-ep-json-tag {
     margin-left: var(--space-1, 4px);
@@ -8250,8 +8256,8 @@
 .ds-247420 .ds-ep-json-copy:hover { opacity: 1; border-color: var(--accent); }
 .ds-247420 .ds-ep-json-copy.copied { color: var(--green-2, var(--green)); border-color: var(--green-2, var(--green)); opacity: 1; }
 .ds-247420 .ds-ep-json-copy:focus-visible {
-    outline: 2px solid var(--accent-ink);
-    outline-offset: 2px;
+    outline: var(--focus-w) solid var(--focus-color);
+    outline-offset: var(--focus-offset);
     opacity: 1;
 }
 
@@ -8506,8 +8512,8 @@
 .ds-247420 .ds-ep-resize:focus-visible,
 .ds-247420 .ds-ep-dialog-btn:focus-visible,
 .ds-247420 .ds-ep-pager-btn:focus-visible {
-    outline: 2px solid var(--accent-ink);
-    outline-offset: 2px;
+    outline: var(--focus-w) solid var(--focus-color);
+    outline-offset: var(--focus-offset);
 }
 
 /* ---------------------------------------------------------------
@@ -8558,13 +8564,17 @@
 .ds-247420 .ds-ep-iconbtn:focus-visible,
 .ds-247420 .ds-ep-iconbtn-group button:focus-visible,
 .ds-247420 .ds-ep-resize:focus-visible {
-    outline: 2px solid var(--accent-ink);
-    outline-offset: 2px;
+    outline: var(--focus-w) solid var(--focus-color);
+    outline-offset: var(--focus-offset);
     border-radius: var(--r-1);
 }
 
 /* ---------------------------------------------------------------
    Form primitives — Checkbox, Radio, RadioGroup, Toggle, Field
+   See also .ds-check-box in app-shell.css — a separate CSS-drawn
+   multi-select checkbox family for FileRow/FileCell/SessionCard
+   row selection; intentionally distinct rendering (CSS-drawn vs
+   native), do not let one drift toward the other by accident.
    --------------------------------------------------------------- */
 .ds-247420 .ds-check-row,
 .ds-247420 .ds-radio-row,
@@ -8587,8 +8597,8 @@
     cursor: inherit;
 }
 .ds-247420 .ds-check:focus-visible, .ds-247420 .ds-radio:focus-visible {
-    outline: 2px solid var(--accent-ink);
-    outline-offset: 2px;
+    outline: var(--focus-w) solid var(--focus-color);
+    outline-offset: var(--focus-offset);
 }
 
 .ds-247420 .ds-check-label, .ds-247420 .ds-radio-label, .ds-247420 .ds-toggle-label {
@@ -8632,8 +8642,8 @@
     transform: translateX(20px);
 }
 .ds-247420 .ds-toggle:focus-visible {
-    outline: 2px solid var(--accent-ink);
-    outline-offset: 2px;
+    outline: var(--focus-w) solid var(--focus-color);
+    outline-offset: var(--focus-offset);
 }
 .ds-247420 .ds-toggle:disabled { cursor: not-allowed; }
 
@@ -8747,8 +8757,8 @@
     outline: none;
 }
 .ds-247420 .ds-dropdown-item:focus-visible {
-    outline: 2px solid var(--accent-ink);
-    outline-offset: -2px;
+    outline: var(--focus-w) solid var(--focus-color);
+    outline-offset: calc(var(--focus-offset) * -1);
 }
 .ds-247420 .ds-dropdown-item[aria-disabled="true"] {
     opacity: 0.5;
@@ -8791,11 +8801,11 @@
     cursor: grab; font: 14px/1 var(--ff-mono, monospace); letter-spacing: -2px;
     touch-action: none; user-select: none;
 }
-.ds-247420 .ds-reorder-handle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.ds-247420 .ds-reorder-handle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 .ds-247420 .ds-reorder-handle:active { cursor: grabbing; }
 .ds-247420[data-dragging="true"] { opacity: 0.6; cursor: grabbing; transform: scale(0.98); }
 .ds-247420[data-drop-target-active="true"] {
-    outline: 2px dashed var(--focus-ring, var(--accent)); outline-offset: 2px;
+    outline: 2px dashed var(--focus-ring, var(--accent)); outline-offset: var(--focus-offset);
     background: color-mix(in srgb, var(--accent) 8%, var(--panel-1));
 }
 .ds-247420 .ds-reorder-insertion-line {
@@ -9001,7 +9011,7 @@
     border: 1px solid var(--rule); border-radius: var(--r-1, 10px);
     padding: var(--space-1, 4px) var(--space-2, 8px); font: inherit;
 }
-.ds-247420 .ov-set-control:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; border-color: var(--accent-ink); }
+.ds-247420 .ov-set-control:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; border-color: var(--accent-ink); }
 .ds-247420 input.ov-set-control[type="range"] { padding: 0; accent-color: var(--accent); }
 .ds-247420 .ov-set-toggle { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
 .ds-247420 .ov-set-btn {
@@ -9026,7 +9036,7 @@
     overflow: hidden;
 }
 .ds-247420 .ov-auth-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3); border-bottom: 1px solid var(--rule); }
-.ds-247420 .ov-auth-title { margin: 0; font-size: var(--fs-2, 16px); font-weight: 700; }
+.ds-247420 .ov-auth-title { margin: 0; font-size: var(--fs-lg); font-weight: 700; }
 .ds-247420 .ov-auth-x { border: none; background: transparent; color: var(--fg-2, var(--fg)); font-size: 22px; line-height: 1; cursor: pointer; }
 .ds-247420 .ov-auth-x:hover { color: var(--fg); }
 .ds-247420 .ov-auth-tabs { display: flex; gap: var(--space-1); padding: var(--space-2) var(--space-3) 0; }
@@ -9034,11 +9044,11 @@
 .ds-247420 .ov-auth-tab:hover { color: var(--fg); }
 .ds-247420 .ov-auth-tab.is-active { background: var(--bg-2); color: var(--fg); font-weight: 700; }
 .ds-247420 .ov-auth-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); }
-.ds-247420 .ov-auth-hint { margin: 0; font-size: var(--fs-0, 12px); color: var(--fg-2, var(--fg)); }
+.ds-247420 .ov-auth-hint { margin: 0; font-size: var(--fs-tiny); color: var(--fg-2, var(--fg)); }
 .ds-247420 .ov-auth-input { padding: var(--space-2); border: 1px solid var(--rule-strong); border-radius: var(--r-1); background: var(--bg-3); color: var(--fg); }
 .ds-247420 .ov-auth-primary { padding: var(--space-2); border: none; border-radius: var(--r-1); background: var(--accent); color: var(--on-accent); font-weight: 700; cursor: pointer; }
 .ds-247420 .ov-auth-primary:disabled { opacity: .6; cursor: progress; }
-.ds-247420 .ov-auth-error { margin: 0 var(--space-3) var(--space-3); padding: var(--space-2); border-radius: var(--r-1); background: color-mix(in oklab, var(--danger) 15%, transparent); color: var(--danger); font-size: var(--fs-0, 12px); }
+.ds-247420 .ov-auth-error { margin: 0 var(--space-3) var(--space-3); padding: var(--space-2); border-radius: var(--r-1); background: color-mix(in oklab, var(--danger) 15%, transparent); color: var(--danger); font-size: var(--fs-tiny); }
 
 /* VideoLightbox — ov-lightbox-* */
 .ds-247420 .ov-lightbox-backdrop {
@@ -9050,7 +9060,7 @@
 .ds-247420 .ov-lightbox-x:hover { background: color-mix(in oklab, var(--on-color) 24%, transparent); }
 .ds-247420 .ov-lightbox-stage { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); max-width: 92vw; max-height: 90vh; }
 .ds-247420 .ov-lightbox-video { max-width: 92vw; max-height: 82vh; border-radius: var(--r-1); background: #000; /* true black media letterbox, intentional */ }
-.ds-247420 .ov-lightbox-label { color: var(--on-color); font-size: var(--fs-0, 12px); opacity: .85; }
+.ds-247420 .ov-lightbox-label { color: var(--on-color); font-size: var(--fs-tiny); opacity: .85; }
 
 /* ---------------------------------------------------------------
    Editor-primitive scrollbars — thin, dark, themed so docked panels
@@ -9098,7 +9108,7 @@
 }
 .ds-247420 .ds-input-color::-webkit-color-swatch-wrapper { padding: 2px; }
 .ds-247420 .ds-input-color::-webkit-color-swatch { border: none; border-radius: var(--r-hair); }
-.ds-247420 .ds-input-color:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.ds-247420 .ds-input-color:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 .ds-247420 .ds-input-check {
     appearance: none; -webkit-appearance: none;
     width: 16px; height: 16px; flex-shrink: 0;
@@ -9111,7 +9121,7 @@
     width: 4px; height: 8px; border: solid var(--accent-fg);
     border-width: 0 2px 2px 0; transform: rotate(45deg);
 }
-.ds-247420 .ds-input-check:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.ds-247420 .ds-input-check:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 
 /* ---------------------------------------------------------------
    Tree drag-reparent affordance — clear drop target + dragging row.