anentrypoint-design 0.0.291 → 0.0.293

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/247420.css CHANGED
@@ -92,7 +92,11 @@
92
92
  --accent-fg: var(--ink);
93
93
  --accent-ink: var(--acid-deep);
94
94
  --accent-bright: var(--acid); /* base value so var(--accent-bright) never falls back empty; ink + [data-accent] retune it */
95
- --accent-tint: color-mix(in oklab, var(--accent) 30%, var(--bg));
95
+ /* Blends --accent-ink (the readable/darker ink variant), not the raw
96
+ --accent fill, so light-theme active states clear contrast against --bg;
97
+ dark/ink and auto-dark restate the prior --accent-based value explicitly
98
+ below so this change does not leak into them via inheritance. */
99
+ --accent-tint: color-mix(in oklab, var(--accent-ink) 22%, var(--bg));
96
100
 
97
101
  /* On-color foregrounds — text/icons that sit ON a saturated fill (accent,
98
102
  danger, category chips). Theme-driven so white-on-color never hard-codes
@@ -329,6 +333,9 @@
329
333
  --accent-fg: var(--ink);
330
334
  --accent-ink: var(--acid); /* on ink, the lime itself reads as bright text */
331
335
  --accent-bright: var(--acid);
336
+ /* Preserves the prior --accent-based blend for dark; the :root light-theme
337
+ value above was retuned to blend --accent-ink instead. */
338
+ --accent-tint: color-mix(in oklab, var(--accent) 30%, var(--bg));
332
339
  --danger: oklch(0.68 0.19 25);
333
340
  --flame: #FF5A1F;
334
341
  --amber: #D9A93A;
@@ -343,6 +350,14 @@
343
350
  --code-num: var(--sun);
344
351
  }
345
352
 
353
+ /* Restores the pre-existing (weaker) dark-theme selection tint after the
354
+ light-theme-only bump in app-shell.css's base ::selection rule. */
355
+ .ds-247420[data-theme="ink"] ::selection,
356
+ .ds-247420[data-theme="dark"] ::selection {
357
+ background: color-mix(in oklab, var(--accent) 24%, var(--bg-2));
358
+ color: var(--fg);
359
+ }
360
+
346
361
  /* NOTE: the [data-theme="auto"] block below mirrors the
347
362
  [data-theme="ink"/"dark"] block above token-for-token. 'auto + OS-dark' and
348
363
  'explicit dark' are the same visual context and resolve every token —
@@ -370,6 +385,7 @@
370
385
  --accent-fg: var(--ink);
371
386
  --accent-ink: var(--acid);
372
387
  --accent-bright: var(--acid);
388
+ --accent-tint: color-mix(in oklab, var(--accent) 30%, var(--bg));
373
389
  --danger: oklch(0.68 0.19 25);
374
390
  --flame: #FF5A1F;
375
391
  --amber: #D9A93A;
@@ -381,6 +397,10 @@
381
397
  --code-str-alt: var(--mascot);
382
398
  --code-num: var(--sun);
383
399
  }
400
+ .ds-247420[data-theme="auto"] ::selection {
401
+ background: color-mix(in oklab, var(--accent) 24%, var(--bg-2));
402
+ color: var(--fg);
403
+ }
384
404
  }
385
405
 
386
406
  /* Nested-scope safety: if .ds-247420 appears under another .ds-247420 (e.g.
@@ -440,6 +460,7 @@
440
460
  --bg: var(--paper); --bg-2: var(--paper-2); --bg-3: var(--paper-3);
441
461
  --fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3);
442
462
  --accent: var(--acid); --accent-fg: var(--ink); --accent-ink: var(--acid-deep);
463
+ --accent-tint: color-mix(in oklab, var(--accent-ink) 22%, var(--bg));
443
464
  /* A paper island under a dark ancestor must not inherit the dark signal pair. */
444
465
  --flame: #C53E00; --amber: #7C570F; --warn: #E0241A; --sky: #3A6EFF;
445
466
  }
@@ -546,8 +567,8 @@
546
567
  }
547
568
  .ds-247420 .skip-link:focus {
548
569
  top: 10px;
549
- outline: 2px solid var(--accent-ink);
550
- outline-offset: 2px;
570
+ outline: var(--focus-w) solid var(--focus-color);
571
+ outline-offset: var(--focus-offset);
551
572
  }
552
573
  .ds-247420 body {
553
574
  background: var(--bg);
@@ -558,7 +579,12 @@
558
579
  -webkit-font-smoothing: antialiased;
559
580
  text-rendering: optimizeLegibility;
560
581
  }
561
- .ds-247420 ::selection { background: color-mix(in oklab, var(--accent) 24%, var(--bg-2)); color: var(--fg); }
582
+ /* Light (paper, the default theme) needs a stronger accent share than dark to
583
+ clear a visible selection tint against --bg-2 -- the dark-theme value (24%)
584
+ read too weak on paper. Dark/ink keeps its existing 24% mix, restored below
585
+ in the ink/dark + auto-dark blocks (mirrors the --danger/--flame pattern of
586
+ scoping a value per theme rather than sharing one across both). */
587
+ .ds-247420 ::selection { background: color-mix(in oklab, var(--accent) 46%, var(--bg-2)); color: var(--fg); }
562
588
 
563
589
  /* Every root has a CQ container so fluid type can resolve to a meaningful inline-size. */
564
590
  .ds-247420 .app, .ds-247420 .ds-stage {
@@ -763,8 +789,8 @@
763
789
  }
764
790
  .ds-247420 .app-topbar nav a:hover { background: var(--bg-2); color: var(--fg); }
765
791
  .ds-247420 .app-topbar nav a:focus-visible {
766
- outline: 2px solid var(--accent-ink);
767
- outline-offset: 2px;
792
+ outline: var(--focus-w) solid var(--focus-color);
793
+ outline-offset: var(--focus-offset);
768
794
  }
769
795
  /* Active tab reads as a subtle tinted pill with an accent underline rather than
770
796
  an oversized filled oval that sits taller than its inactive siblings and reads
@@ -799,8 +825,8 @@
799
825
  width: 100%;
800
826
  }
801
827
  .ds-247420 .app-search:focus-within {
802
- outline: 2px solid var(--accent-ink);
803
- outline-offset: 2px;
828
+ outline: var(--focus-w) solid var(--focus-color);
829
+ outline-offset: var(--focus-offset);
804
830
  }
805
831
 
806
832
  .ds-247420 .app-crumb {
@@ -841,8 +867,8 @@
841
867
  }
842
868
  .ds-247420 .app-side a:hover { background: var(--bg-2); color: var(--fg); }
843
869
  .ds-247420 .app-side a:focus-visible {
844
- outline: 2px solid var(--accent-ink);
845
- outline-offset: 2px;
870
+ outline: var(--focus-w) solid var(--focus-color);
871
+ outline-offset: var(--focus-offset);
846
872
  }
847
873
  .ds-247420 .app-side a.active {
848
874
  color: var(--accent-fg);
@@ -1101,7 +1127,7 @@
1101
1127
  background: var(--panel-1, var(--bg-2));
1102
1128
  border: var(--bw-hair) solid var(--rule);
1103
1129
  border-radius: var(--r-2);
1104
- margin: 0 0 var(--space-5);
1130
+ margin: 0 0 var(--space-4);
1105
1131
  padding: var(--space-3);
1106
1132
  position: relative;
1107
1133
  /* Crisp, restrained elevation — a hairline border does the edge definition;
@@ -1249,6 +1275,9 @@
1249
1275
  .ds-247420[data-typescale="app"] .row { padding: 12px 16px; }
1250
1276
  .ds-247420[data-typescale="app"] .row .title { font-size: var(--fs-sm); font-weight: 500; }
1251
1277
  .ds-247420 .row .sub { font-family: var(--ff-body); font-weight: 400; font-size: var(--fs-sm); color: var(--fg-3); }
1278
+ /* Context-pane cwd fact reads as a path (like .ds-dash-cwd/.ds-session-agent/
1279
+ .ds-dash-model) -- scoped to that one row so no other Row .sub is affected. */
1280
+ .ds-247420 .ds-context-cwd-row .row .sub { font-family: var(--ff-mono); }
1252
1281
  .ds-247420 .row .meta { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; align-self: center; }
1253
1282
  /* WorksList meta pairs a label with a disclosure chevron, inline-aligned. */
1254
1283
  .ds-247420 .ds-works-meta { display: inline-flex; align-items: center; gap: .4em; }
@@ -1517,7 +1546,7 @@
1517
1546
  .ds-247420 table tr.clickable { cursor: pointer; }
1518
1547
  .ds-247420 table tr.clickable:hover td { background: var(--bg-2); }
1519
1548
  .ds-247420 table tr.clickable:focus-visible {
1520
- outline: 2px solid var(--accent-ink);
1549
+ outline: var(--focus-w) solid var(--focus-color);
1521
1550
  outline-offset: -2px;
1522
1551
  }
1523
1552
  .ds-247420 table tr.clickable:focus-visible td { background: var(--bg-2); }
@@ -1958,7 +1987,7 @@
1958
1987
  flex-direction: column;
1959
1988
  gap: 4px;
1960
1989
  }
1961
- .ds-247420 .ds-file-grid:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: var(--r-2); }
1990
+ .ds-247420 .ds-file-grid:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); border-radius: var(--r-2); }
1962
1991
 
1963
1992
  /* Listing wrapper holds the optional filter + sort header above the grid. */
1964
1993
  .ds-247420 .ds-file-listing { display: flex; flex-direction: column; gap: var(--space-2); min-height: 0; }
@@ -1980,7 +2009,7 @@
1980
2009
  }
1981
2010
  .ds-247420 .ds-file-sort-btn:hover { color: var(--fg-2); background: var(--bg-2); }
1982
2011
  .ds-247420 .ds-file-sort-btn.active { color: var(--accent-ink); }
1983
- .ds-247420 .ds-file-sort-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
2012
+ .ds-247420 .ds-file-sort-btn:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
1984
2013
 
1985
2014
  /* Skeleton shimmer rows shown while a directory loads. */
1986
2015
  .ds-247420 .ds-file-row-skeleton { cursor: default; pointer-events: none; }
@@ -2028,7 +2057,7 @@
2028
2057
  color: inherit; font: inherit; text-align: left; cursor: pointer;
2029
2058
  }
2030
2059
  .ds-247420 .ds-file-open[disabled] { cursor: default; }
2031
- .ds-247420 .ds-file-open:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: var(--r-1); }
2060
+ .ds-247420 .ds-file-open:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); border-radius: var(--r-1); }
2032
2061
  .ds-247420 .ds-file-row:hover {
2033
2062
  background: var(--bg-2);
2034
2063
  border-color: var(--rule);
@@ -2132,7 +2161,7 @@
2132
2161
  }
2133
2162
  .ds-247420 .ds-file-check:hover { background: var(--bg-3); color: var(--fg); }
2134
2163
  .ds-247420 .ds-file-check.is-marked { color: var(--accent-ink); }
2135
- .ds-247420 .ds-file-check:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
2164
+ .ds-247420 .ds-file-check:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
2136
2165
  .ds-247420 .ds-file-check[disabled] { opacity: 0.4; cursor: default; }
2137
2166
  .ds-247420 .ds-file-row.is-marked { background: var(--accent-tint); border-color: var(--accent); }
2138
2167
  .ds-247420 .ds-file-selectall {
@@ -2142,7 +2171,7 @@
2142
2171
  padding: var(--space-1); border-radius: var(--r-1);
2143
2172
  }
2144
2173
  .ds-247420 .ds-file-selectall:hover { background: var(--bg-2); color: var(--fg); }
2145
- .ds-247420 .ds-file-selectall:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
2174
+ .ds-247420 .ds-file-selectall:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
2146
2175
  .ds-247420 .ds-file-controls { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2) var(--space-1); flex-wrap: wrap; }
2147
2176
  .ds-247420 .ds-file-controls .spread { flex: 1 1 auto; }
2148
2177
  .ds-247420 .ds-file-controls .ds-file-sort { padding: 0; }
@@ -2180,7 +2209,7 @@
2180
2209
  }
2181
2210
  .ds-247420 .ds-density-btn:hover { color: var(--fg); }
2182
2211
  .ds-247420 .ds-density-btn.active { background: var(--accent-tint); color: var(--fg); }
2183
- .ds-247420 .ds-density-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
2212
+ .ds-247420 .ds-density-btn:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
2184
2213
 
2185
2214
  /* Compact density — tighter rows for long listings. */
2186
2215
  .ds-247420 .ds-file-grid[data-density="compact"] { gap: 2px; }
@@ -2218,7 +2247,7 @@
2218
2247
  background: none; border: none; cursor: pointer; color: var(--fg);
2219
2248
  }
2220
2249
  .ds-247420 .ds-file-cell-open[disabled] { cursor: default; }
2221
- .ds-247420 .ds-file-cell-open:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; border-radius: var(--r-2); }
2250
+ .ds-247420 .ds-file-cell-open:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: -2px; border-radius: var(--r-2); }
2222
2251
  .ds-247420 .ds-file-cell-media {
2223
2252
  display: flex; align-items: center; justify-content: center;
2224
2253
  width: 100%; aspect-ratio: 4 / 3;
@@ -2458,7 +2487,7 @@
2458
2487
  color: var(--fg-2); font-family: var(--ff-body); font-size: var(--fs-micro);
2459
2488
  }
2460
2489
  .ds-247420 .ds-upload-act:hover { background: var(--bg-3); color: var(--fg); }
2461
- .ds-247420 .ds-upload-act:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
2490
+ .ds-247420 .ds-upload-act:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
2462
2491
  @media (hover: none), (pointer: coarse) {
2463
2492
  .ds-247420 .ds-upload-act { min-height: 44px; min-width: 44px; }
2464
2493
  /* 44px floor for file controls on ANY touch device, not only narrow ones
@@ -2529,7 +2558,7 @@
2529
2558
  border-radius: var(--r-2); color: var(--fg);
2530
2559
  font-family: inherit; font-size: var(--fs-sm);
2531
2560
  }
2532
- .ds-247420 .ds-modal-input:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
2561
+ .ds-247420 .ds-modal-input:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
2533
2562
  /* iOS auto-zooms inputs under 16px on focus, breaking the modal layout. */
2534
2563
  @media (hover: none), (pointer: coarse) {
2535
2564
  .ds-247420 .ds-modal-input { font-size: 16px; min-height: 44px; }
@@ -2716,7 +2745,7 @@
2716
2745
  transition: color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
2717
2746
  }
2718
2747
  .ds-247420 .ds-segmented .ds-seg-btn:hover { color: var(--fg); }
2719
- .ds-247420 .ds-segmented .ds-seg-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
2748
+ .ds-247420 .ds-segmented .ds-seg-btn:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
2720
2749
  .ds-247420 .ds-segmented .ds-seg-btn.is-on {
2721
2750
  background: var(--bg); color: var(--fg);
2722
2751
  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule);
@@ -3162,12 +3191,12 @@
3162
3191
  transition: background var(--dur-snap, .15s) var(--ease, ease), color var(--dur-snap, .15s) var(--ease, ease);
3163
3192
  }
3164
3193
  .ds-247420 .composer-btn:hover { background: color-mix(in oklab, var(--fg) 8%, transparent); color: var(--fg); }
3165
- .ds-247420 .chat-composer .send:hover { filter: brightness(1.08); }
3194
+ .ds-247420 .chat-composer .send:hover { filter: brightness(0.92); }
3166
3195
  .ds-247420 .chat-composer .send:active { filter: brightness(0.94); }
3167
3196
  .ds-247420 .chat-composer .send:focus-visible,
3168
3197
  .ds-247420 .composer-btn:focus-visible {
3169
- outline: 2px solid var(--accent-ink);
3170
- outline-offset: 2px;
3198
+ outline: var(--focus-w) solid var(--focus-color);
3199
+ outline-offset: var(--focus-offset);
3171
3200
  }
3172
3201
  .ds-247420 .chat-composer .send:disabled {
3173
3202
  background: var(--bg-3); color: var(--fg-3); cursor: not-allowed; transform: none;
@@ -3700,8 +3729,8 @@
3700
3729
 
3701
3730
  /* Base focus-visible: 2px ring + 2px offset clears dark bg-3 surfaces (WCAG 1.4.11) */
3702
3731
  .ds-247420 :focus-visible {
3703
- outline: 2px solid var(--accent-ink);
3704
- outline-offset: 2px;
3732
+ outline: var(--focus-w) solid var(--focus-color);
3733
+ outline-offset: var(--focus-offset);
3705
3734
  }
3706
3735
 
3707
3736
  /* Enhanced focus-visible for all interactive elements */
@@ -3710,8 +3739,8 @@
3710
3739
  .ds-247420[role="tab"]:focus-visible,
3711
3740
  .ds-247420 .row:focus-visible,
3712
3741
  .ds-247420 .row[tabindex]:focus-visible {
3713
- outline: 2px solid var(--accent-ink);
3714
- outline-offset: 2px;
3742
+ outline: var(--focus-w) solid var(--focus-color);
3743
+ outline-offset: var(--focus-offset);
3715
3744
  }
3716
3745
 
3717
3746
  /* Skip to main content link */
@@ -4100,7 +4129,7 @@
4100
4129
  border-radius: var(--r-1, 6px);
4101
4130
  cursor: pointer;
4102
4131
  }
4103
- .ds-247420 .app-side-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
4132
+ .ds-247420 .app-side-toggle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
4104
4133
  @container (max-width: 900px) {
4105
4134
  .ds-247420 .app-side-toggle { display: inline-flex; }
4106
4135
  .ds-247420 .app-topbar .brand { margin-left: 44px; }
@@ -4194,7 +4223,7 @@
4194
4223
  .ds-247420 .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; }
4195
4224
  .ds-247420 .ws-resizer::after { content: ""; display: block; width: 2px; height: 100%; margin: 0 auto; background: transparent; transition: background var(--dur-snap) var(--ease); }
4196
4225
  .ds-247420 .ws-resizer:hover::after, .ds-247420 .ws-resizer:focus-visible::after { background: var(--accent); }
4197
- .ds-247420 .ws-resizer:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
4226
+ .ds-247420 .ws-resizer:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: -2px; }
4198
4227
  .ds-247420 .ws-resizer.ws-resizer-rail { grid-column: 1; }
4199
4228
  .ds-247420 .ws-resizer.ws-resizer-sessions { grid-column: 2; }
4200
4229
  .ds-247420 .ws-resizer.ws-resizer-pane { grid-column: 3; justify-self: end; }
@@ -4246,7 +4275,7 @@
4246
4275
  border-radius: var(--r-1); cursor: pointer;
4247
4276
  }
4248
4277
  .ds-247420 .ws-rail-toggle:hover { background: var(--bg-3); color: var(--fg); }
4249
- .ds-247420 .ws-rail-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
4278
+ .ds-247420 .ws-rail-toggle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
4250
4279
  .ds-247420 .ws-rail-inner { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: var(--space-3) var(--space-2); gap: var(--space-2); }
4251
4280
  .ds-247420 .ws-rail-head { display: flex; align-items: center; min-height: 36px; padding: 0 var(--space-2); }
4252
4281
  .ds-247420 .ws-rail-brand { font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-body); color: var(--fg); white-space: nowrap; overflow: hidden; }
@@ -4258,8 +4287,8 @@
4258
4287
  font-family: var(--ff-body); font-size: var(--fs-sm); font-weight: 600;
4259
4288
  min-height: 40px; white-space: nowrap; overflow: hidden;
4260
4289
  }
4261
- .ds-247420 .ws-rail-action:hover { filter: brightness(1.08); }
4262
- .ds-247420 .ws-rail-action:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
4290
+ .ds-247420 .ws-rail-action:hover { filter: brightness(0.92); }
4291
+ .ds-247420 .ws-rail-action:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
4263
4292
  .ds-247420 .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; }
4264
4293
  .ds-247420 .ws-rail-item {
4265
4294
  display: flex; align-items: center; gap: var(--space-2);
@@ -4269,7 +4298,7 @@
4269
4298
  font-family: var(--ff-body); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden;
4270
4299
  }
4271
4300
  .ds-247420 .ws-rail-item:hover { background: var(--bg-3); color: var(--fg); }
4272
- .ds-247420 .ws-rail-item:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
4301
+ .ds-247420 .ws-rail-item:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: -2px; }
4273
4302
  .ds-247420 .ws-rail-item.active { background: var(--accent-tint); color: var(--fg); box-shadow: inset 2px 0 0 var(--accent); }
4274
4303
  .ds-247420 .ws-rail-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
4275
4304
  .ds-247420 .ws-rail-item-count { font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3); }
@@ -4342,7 +4371,7 @@
4342
4371
  /* Desktop-only chrome toggle (sessions collapse): inverse of the mobile drawer-toggle. */
4343
4372
  .ds-247420 .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); }
4344
4373
  .ds-247420 .ws-desktop-toggle:hover { background: var(--bg-2); color: var(--fg); }
4345
- .ds-247420 .ws-desktop-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
4374
+ .ds-247420 .ws-desktop-toggle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
4346
4375
  @media (max-width: 900px) { .ds-247420 .ws-desktop-toggle { display: none; } }
4347
4376
  /* The pane collapse toggle is meaningless once the pane TRACK is dropped (the
4348
4377
  pane becomes a mobile overlay drawer at <=1480px, reached via its own
@@ -4466,7 +4495,7 @@
4466
4495
  .ds-247420 .ws-crumb .app-crumb .crumb-right { margin-left: 0; flex-wrap: wrap; min-width: 0; display: inline-flex; }
4467
4496
  }
4468
4497
  .ds-247420 .ws-drawer-toggle:hover { background: var(--bg-2); color: var(--fg); }
4469
- .ds-247420 .ws-drawer-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
4498
+ .ds-247420 .ws-drawer-toggle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
4470
4499
 
4471
4500
  @media (prefers-reduced-motion: reduce) {
4472
4501
  .ds-247420 .ws-shell, .ds-247420 .ws-rail, .ds-247420 .ws-pane, .ds-247420 .ws-sessions, .ds-247420 .ws-scrim { transition: none; }
@@ -4491,7 +4520,7 @@
4491
4520
  transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
4492
4521
  }
4493
4522
  .ds-247420 .row-act:hover { background: var(--bg-3); color: var(--fg); }
4494
- .ds-247420 .row-act:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
4523
+ .ds-247420 .row-act:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
4495
4524
 
4496
4525
  /* FilterPills - a group of pill toggle buttons (aria-pressed). */
4497
4526
  .ds-247420 .ds-filter-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
@@ -4504,7 +4533,7 @@
4504
4533
  }
4505
4534
  .ds-247420 .ds-filter-pill:hover { background: var(--bg-3); color: var(--fg); }
4506
4535
  .ds-247420 .ds-filter-pill.active { background: var(--accent-tint); color: var(--fg); border-color: var(--accent); }
4507
- .ds-247420 .ds-filter-pill:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
4536
+ .ds-247420 .ds-filter-pill:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
4508
4537
 
4509
4538
  /* Touch floor for the new small controls. */
4510
4539
  @media (pointer: coarse) {
@@ -4514,7 +4543,7 @@
4514
4543
  /* Disabled file actions (read-only row / in-flight mutation) stay visible but inert. */
4515
4544
  .ds-247420 .ds-file-act:disabled { opacity: .45; cursor: default; }
4516
4545
  .ds-247420 .ds-file-act:disabled:hover { background: transparent; color: var(--fg-3); }
4517
- .ds-247420 .ds-file-act:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
4546
+ .ds-247420 .ds-file-act:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
4518
4547
 
4519
4548
  /* ============================================================
4520
4549
  Print — linearize WorkspaceShell so main content prints in full.
@@ -4838,7 +4867,7 @@
4838
4867
  .ds-feature above), so the hover affordance is a lift, matching the same
4839
4868
  translateY + shadow idiom .chat-msg:hover .chat-bubble already uses. */
4840
4869
  .ds-247420 .ds-gallery-tile:hover { transform: translateY(-2px); box-shadow: 0 2px 8px color-mix(in oklab, var(--fg) 10%, transparent); }
4841
- .ds-247420 .ds-gallery-tile:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
4870
+ .ds-247420 .ds-gallery-tile:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
4842
4871
  .ds-247420 .ds-gallery-tile--tight { min-height: clamp(96px, 14vw, 120px); }
4843
4872
  .ds-247420 .ds-lightbox {
4844
4873
  position: fixed; inset: 0; background: var(--scrim);
@@ -5197,7 +5226,7 @@
5197
5226
  height: 48px;
5198
5227
  border-radius: var(--r-3);
5199
5228
  background: var(--bg-2);
5200
- color: var(--green-2);
5229
+ color: var(--green);
5201
5230
  display: flex;
5202
5231
  align-items: center;
5203
5232
  justify-content: center;
@@ -8405,11 +8434,11 @@
8405
8434
  .ds-247420 .ds-ep-dialog-btn.kind-primary {
8406
8435
  background: var(--accent); color: var(--accent-fg); border-color: var(--accent);
8407
8436
  }
8408
- .ds-247420 .ds-ep-dialog-btn.kind-primary:hover { filter: brightness(1.08); }
8437
+ .ds-247420 .ds-ep-dialog-btn.kind-primary:hover { filter: brightness(0.92); }
8409
8438
  .ds-247420 .ds-ep-dialog-btn.kind-danger {
8410
8439
  background: var(--danger); color: var(--on-accent); border-color: var(--danger);
8411
8440
  }
8412
- .ds-247420 .ds-ep-dialog-btn.kind-danger:hover { filter: brightness(1.1); }
8441
+ .ds-247420 .ds-ep-dialog-btn.kind-danger:hover { filter: brightness(0.92); }
8413
8442
 
8414
8443
  /* ---------------------------------------------------------------
8415
8444
  Toast