chore(styles): drop dead and duplicate CSS

- a.lc-stat(:hover): orphaned since the anchor cost cell was rebuilt as
  the Agent Team ledger (3dc892c); every lc-stat is now a div.
- .lc-rich-seg*: byte-identical re-declaration of the shared .lc-gran*
  segmented control; RichSwitch now wears the lc-gran tokens, and the
  browser spec scopes its queries to the detail body accordingly.
- lc-col-stats: a class token no rule, query, or script ever read.

src/client/components/overviewTokens.tsx

@@ -40,7 +40,7 @@ export function makeOverviewTokens(kit: ViewKit, Donut: (props: DonutProps) => R
       count: p.key === 'output' ? `${fmt(p.value)} · ${t('tokens.outputNote')}` : '≈' + fmt(p.value),
     }))
     return (
-      <div className="lc-card lc-col-stats lc-col-donut flex-1 min-w-[min(360px,100%)]">
+      <div className="lc-card lc-col-donut flex-1 min-w-[min(360px,100%)]">
         <div className="lc-card-title">
           <span className="lc-card-title-text">{t('tokens.title')}</span>
         </div>

src/client/components/richText.tsx

@@ -123,13 +123,13 @@ export function makeRichText(kit: ViewKit): RichKit {
     const seg = (m: RichMode, label: string, tip: string) => (
       <button
         type="button"
-        className={'lc-rich-seg-btn' + (props.mode === m ? ' lc-rich-seg-on' : '')}
+        className={'lc-gran-btn' + (props.mode === m ? ' lc-gran-on' : '')}
         title={tip}
         onClick={() => { props.onPick(m) }}
       >{label}</button>
     )
     return (
-      <span className="lc-rich-seg">
+      <span className="lc-gran">
         {seg('raw', t('rich.raw'), t('rich.toRaw'))}
         {seg('md', t('rich.md'), t('rich.toMd'))}
       </span>

src/client/components/statsContext.tsx

@@ -461,7 +461,7 @@ export function makeStatsContext(
     const topTools = props.tools.slice(0, 3)
     const moreTools = props.tools.length - topTools.length
     return (
-      <div className="lc-card lc-col-stats flex-[3] min-w-[min(360px,100%)]">
+      <div className="lc-card flex-[3] min-w-[min(360px,100%)]">
         <div className="lc-card-title">
           <span className="lc-card-title-text">{t('stats.title')}</span>
         </div>

src/client/components/statsTiming.tsx

@@ -183,7 +183,7 @@ export function makeStatsTiming(kit: ViewKit, Donut: (props: DonutProps) => Reac
       ].filter(row => !row.dim)
     }
     return (
-      <div className="lc-card lc-col-stats lc-col-donut flex-1 min-w-[min(360px,100%)]">
+      <div className="lc-card lc-col-donut flex-1 min-w-[min(360px,100%)]">
         <div className="lc-card-title">
           <span className="lc-card-title-text">{t('timing.title')}</span>
           {tps !== null && (

src/client/components/statsTokens.tsx

@@ -66,7 +66,7 @@ export function makeStatsTokens(kit: ViewKit, Donut: (props: DonutProps) => Reac
       count: p.key === 'output' ? `${fmt(p.value)} · ${t('tokens.outputNote')}` : '≈' + fmt(p.value),
     }))
     return (
-      <div className="lc-card lc-col-stats lc-col-donut flex-1 min-w-[min(360px,100%)]">
+      <div className="lc-card lc-col-donut flex-1 min-w-[min(360px,100%)]">
         <div className="lc-card-title">
           <span className="lc-card-title-text">{t('tokens.title')}</span>
           {hit !== null && (

src/client/styles/detailSections.css

@@ -48,10 +48,6 @@
 .lc-ts-arg-val { color: var(--dsw-alias-label-primary); font-family: var(--ds-font-family-code, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow-y: auto; scrollbar-width: thin; }
 .lc-ts-json { display: flex; flex-direction: column; gap: 4px; }
 .lc-ts-json-toggle { align-self: flex-start; border: 0; background: transparent; color: var(--dsw-alias-label-secondary); font: inherit; font-size: 11px; padding: 0; cursor: pointer; transition: color var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, ease-in-out); }
-.lc-rich-seg { margin-left: auto; display: flex; gap: 2px; background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l2); border-radius: 6px; padding: 1px; }
-.lc-rich-seg-btn { border: 0; background: transparent; color: var(--dsw-alias-label-secondary); font-size: 11px; line-height: 1; padding: 3px 8px; border-radius: 5px; cursor: pointer; font-family: inherit; transition: color var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, ease-in-out); }
-.lc-rich-seg-btn:hover { color: var(--dsw-alias-label-primary); }
-.lc-rich-seg-on, .lc-rich-seg-on:hover { background: var(--dsw-alias-button-primary-fill); color: var(--dsw-alias-label-primary-foreground); }
 .lc-rich-copy, .lc-find-btn { display: inline-flex; align-items: center; border: 0; background: transparent; color: var(--dsw-alias-label-secondary); padding: 2px; border-radius: 5px; cursor: pointer; transition: color var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, ease-in-out); }
 .lc-rich-copy:hover, .lc-find-btn:hover { color: var(--dsw-alias-label-primary); }
 .lc-rich-copy-on, .lc-rich-copy-on:hover { color: var(--dsw-alias-state-success-primary); }

src/client/styles/stats.css

@@ -5,11 +5,6 @@
  * — section heading, donut, slice list, plugin-info rows.
  */
 .lc-stat { background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px; padding: 6px 6px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
-/* The clickable cost cell: the same framed cell as an anchor opening the
-   models.dev listing in a new tab — reset the link chrome so it reads as the
-   card it visually is, with the pointer as the only affordance. */
-a.lc-stat { color: inherit; text-decoration: none; cursor: pointer; }
-a.lc-stat:hover { border-color: var(--dsw-alias-label-secondary); }
 .lc-stat-label { color: var(--dsw-alias-label-secondary); font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .lc-stat-value { color: var(--dsw-alias-label-primary); font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
 .lc-stat-sub { color: var(--dsw-alias-label-secondary); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

tests/client/components/browser.spec.ts

@@ -390,12 +390,14 @@ describe('ContextBrowser header epochs', () => {
     // The single system row is already expanded.
     assert.equal(queryAll(m.container, '.lc-br-content').length, 1)
     assert.ok(queryAll(m.container, '.lc-ts-desc-md').length >= 1, 'markdown view by default')
-    const rawBtn = queryAll(m.container, '.lc-rich-seg-btn')[0]
+    // Scope to the detail body: the header's own granularity toggles wear the
+    // same shared lc-gran classes.
+    const rawBtn = queryAll(body, '.lc-gran-btn')[0]
     assert.equal(text(rawBtn), 'Raw')
     await click(rawBtn)
     const lines = queryAll(m.container, '.lc-ts-line').map(line => line.textContent)
     assert.deepEqual(lines, ['SYS B', 'second line'])
-    await click(queryAll(m.container, '.lc-rich-seg-btn')[1])
+    await click(queryAll(body, '.lc-gran-btn')[1])
     assert.ok(queryAll(m.container, '.lc-ts-desc-md').length >= 1, 'markdown restored')
     await click(catRow(m, 'system'))
     assert.equal(queryAll(m.container, '.lc-br-body').length, 0)

tests/client/components/richText.spec.ts

@@ -61,14 +61,14 @@ describe('RichSwitch', () => {
   test('two segments with titles; the active mode carries the on class; clicks report the pick', async () => {
     const picks: RichMode[] = []
     const m = await mount(h(RichSwitch, { mode: 'md', onPick: m2 => picks.push(m2) }))
-    const buttons = queryAll(m.container, '.lc-rich-seg-btn')
+    const buttons = queryAll(m.container, '.lc-gran-btn')
     assert.equal(buttons.length, 2)
     assert.equal(buttons[0].textContent, 'Raw')
     assert.equal(buttons[0].getAttribute('title'), 'View Raw Text')
-    assert.ok(!buttons[0].className.includes('lc-rich-seg-on'))
+    assert.ok(!buttons[0].className.includes('lc-gran-on'))
     assert.equal(buttons[1].textContent, 'Markdown')
     assert.equal(buttons[1].getAttribute('title'), 'View as Markdown')
-    assert.ok(buttons[1].className.includes('lc-rich-seg-on'))
+    assert.ok(buttons[1].className.includes('lc-gran-on'))
     await click(buttons[0])
     await click(buttons[1])
     assert.deepEqual(picks, ['raw', 'md'])
@@ -77,9 +77,9 @@ describe('RichSwitch', () => {
 
   test('raw mode marks the raw segment active instead', async () => {
     const m = await mount(h(RichSwitch, { mode: 'raw', onPick: () => {} }))
-    const buttons = queryAll(m.container, '.lc-rich-seg-btn')
-    assert.ok(buttons[0].className.includes('lc-rich-seg-on'))
-    assert.ok(!buttons[1].className.includes('lc-rich-seg-on'))
+    const buttons = queryAll(m.container, '.lc-gran-btn')
+    assert.ok(buttons[0].className.includes('lc-gran-on'))
+    assert.ok(!buttons[1].className.includes('lc-gran-on'))
     await m.unmount()
   })
 })
@@ -88,10 +88,10 @@ describe('useRichMode', () => {
   test('defaults to markdown and flips to raw via the switch', async () => {
     const m = await mount(h(Harness, { text: SAMPLE }))
     assert.ok(query(m.container, '.lc-ts-desc-md'))
-    const buttons = queryAll(m.container, '.lc-rich-seg-btn')
+    const buttons = queryAll(m.container, '.lc-gran-btn')
     await click(buttons[0]) // Raw
     assert.equal(rawText(m.container), SAMPLE)
-    await click(queryAll(m.container, '.lc-rich-seg-btn')[1]) // back to Markdown
+    await click(queryAll(m.container, '.lc-gran-btn')[1]) // back to Markdown
     assert.equal(query(m.container, '.lc-ts-desc-md h1').textContent, 'Title')
     await m.unmount()
   })