feat(ui): email row polish + custom checkbox

- Add onOpen prop to EmailRow (calls parent handler when provided,
  falls back to opening in Gmail); keep explicit Open-in-Gmail action.
- New accessible Checkbox primitive (Radix + design tokens, focus ring),
  exported from ui barrel; replaces bare input in the select cell.
- Row polish: consistent height, vertical rhythm, single hover state,
  clearer hierarchy (prominent subject, muted sender/snippet), one-line
  ellipsis snippet.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/components/EmailDetail.jsx

@@ -1,115 +0,0 @@
-import { useEffect, useState } from 'react';
-import { EmailApi } from '../api/client.js';
-
-// ── helpers ──────────────────────────────────────────────────────────────────
-
-const fmtSize = (b) => {
-  if (!b) return '';
-  if (b < 1024) return `${b} B`;
-  if (b < 1048576) return `${(b / 1024).toFixed(0)} KB`;
-  return `${(b / 1048576).toFixed(1)} MB`;
-};
-
-/**
- * Shared reading-pane / full single-email view.
- *
- * Accepts either an `email` summary object (as emitted by the list rows) or a
- * bare `emailId`. Fetches the full detail via EmailApi.get(id) and the AI
- * summary lazily via EmailApi.summary(id). Renders subject, metadata, an AI
- * summary button, the body, and per-email actions including "Open in Gmail".
- *
- * `onClose` collapses the pane.
- */
-export default function EmailDetail({ email: summary, emailId, onClose }) {
-  const id = summary?.id ?? emailId;
-
-  const [detail, setDetail] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [aiSummary, setAiSummary] = useState(null);
-  const [aiLoading, setAiLoading] = useState(false);
-
-  useEffect(() => {
-    if (id == null) return;
-    let cancelled = false;
-    setDetail(null);
-    setLoading(true);
-    setAiSummary(null);
-    setAiLoading(false);
-    EmailApi.get(id)
-      .then((d) => { if (!cancelled) setDetail(d); })
-      .catch(() => { if (!cancelled) setDetail(null); })
-      .finally(() => { if (!cancelled) setLoading(false); });
-    return () => { cancelled = true; };
-  }, [id]);
-
-  const email = detail ?? summary ?? {};
-
-  const fetchAiSummary = () => {
-    if (id == null) return;
-    setAiLoading(true);
-    EmailApi.summary(id)
-      .then((r) => setAiSummary(r.summary))
-      .catch(() => setAiSummary(null))
-      .finally(() => setAiLoading(false));
-  };
-
-  const openInGmail = () => window.open(
-    `https://mail.google.com/mail/u/0/#all/${email.gmailMessageId}`,
-    '_blank', 'noopener,noreferrer'
-  );
-
-  return (
-    <div className="sv-detail">
-      <div className="sv-detail-topbar">
-        <button className="sv-close" onClick={onClose} aria-label="Close reading pane" title="Close">
-          ✕
-        </button>
-      </div>
-
-      <div className="sv-detail-header">
-        <div className="sv-detail-subject">{email.subject || '(no subject)'}</div>
-        <div className="sv-detail-meta">
-          <span>{email.senderDisplayName || email.senderAddress}</span>
-          {email.sentAtUtc && (
-            <>
-              <span className="sv-detail-sep">·</span>
-              <span>{new Date(email.sentAtUtc).toLocaleString()}</span>
-            </>
-          )}
-          {email.sizeEstimateBytes > 0 && (
-            <>
-              <span className="sv-detail-sep">·</span>
-              <span>{fmtSize(email.sizeEstimateBytes)}</span>
-            </>
-          )}
-        </div>
-      </div>
-
-      {!loading && (
-        <div className="sv-ai-summary">
-          {aiSummary != null ? (
-            <div className="sv-ai-summary-text">✨ {aiSummary}</div>
-          ) : (
-            <button className="btn-sm" onClick={fetchAiSummary} disabled={aiLoading}>
-              {aiLoading ? 'Summarising…' : '✨ AI summary'}
-            </button>
-          )}
-        </div>
-      )}
-
-      {loading && <div className="sv-body-loading muted">Loading message…</div>}
-
-      {!loading && detail?.bodyText && (
-        <div className="sv-body">{detail.bodyText}</div>
-      )}
-
-      {!loading && !detail?.bodyText && email.snippet && (
-        <div className="sv-snippet">{email.snippet}</div>
-      )}
-
-      <div className="sv-detail-actions">
-        <button className="btn-sm" onClick={openInGmail}>Open in Gmail ↗</button>
-      </div>
-    </div>
-  );
-}

frontend/src/components/EmailRow.jsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { EmailApi } from '../api/client.js';
+import { Checkbox } from './ui/checkbox.jsx';
 
 const fmtDate = (iso) => {
   const d = new Date(iso);
@@ -16,7 +17,7 @@ const fmtSize = (b) => {
   return `${(b / 1048576).toFixed(1)} MB`;
 };
 
-export default function EmailRow({ email: initial, onRemove, selected, onToggleSelect, focused }) {
+export default function EmailRow({ email: initial, onRemove, selected, onToggleSelect, focused, onOpen }) {
   const [email, setEmail] = useState(initial);
   const [acting, setActing] = useState(false);
 
@@ -69,12 +70,16 @@ export default function EmailRow({ email: initial, onRemove, selected, onToggleS
   return (
     <tr
       className={`email-row${email.isUnread ? ' email-row--unread' : ''}${acting ? ' email-row--acting' : ''}${focused ? ' email-row--focused' : ''}`}
-      onClick={openInGmail}
-      title="Open in Gmail"
+      onClick={() => onOpen ? onOpen(email) : openInGmail()}
+      title={onOpen ? 'Open' : 'Open in Gmail'}
     >
       {onToggleSelect && (
         <td className="el-select" onClick={(e) => e.stopPropagation()}>
-          <input type="checkbox" checked={!!selected} onChange={() => onToggleSelect(email.id)} />
+          <Checkbox
+            checked={!!selected}
+            onCheckedChange={() => onToggleSelect(email.id)}
+            aria-label={selected ? 'Deselect email' : 'Select email'}
+          />
         </td>
       )}
       <td className="el-unread">{email.isUnread && <span className="unread-dot" />}</td>
@@ -83,7 +88,7 @@ export default function EmailRow({ email: initial, onRemove, selected, onToggleS
       </td>
       <td className="el-subject">
         <span className="el-subj-text">{email.subject || '(no subject)'}</span>
-        {email.snippet && <span className="el-snippet"> — {email.snippet}</span>}
+        {email.snippet && <span className="el-snippet">{email.snippet}</span>}
       </td>
       <td className="el-meta">
         {email.hasAttachments && <span className="el-attach" title="Has attachment">📎</span>}
@@ -113,6 +118,11 @@ export default function EmailRow({ email: initial, onRemove, selected, onToggleS
             disabled={email._unsubDone}
           >{email._unsubDone ? '✓' : '✉✕'}</button>
         )}
+        <button
+          className="action-btn"
+          title="Open in Gmail"
+          onClick={(e) => { e.stopPropagation(); openInGmail(); }}
+        >↗</button>
         <button
           className="action-btn action-btn--danger"
           title="Move to trash"

frontend/src/components/ui/checkbox.jsx

@@ -0,0 +1,43 @@
+import { forwardRef } from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+
+/**
+ * Accessible, design-token styled checkbox.
+ * Wraps Radix Checkbox so it is keyboard-accessible with a visible focus ring.
+ * Accepts `checked`, `onCheckedChange` (Radix) and, for convenience, `onChange`
+ * (called with a synthetic-ish `{ target: { checked } }`) so it can drop into
+ * places that previously used a bare <input type="checkbox">.
+ */
+const Checkbox = forwardRef(function Checkbox(
+  { className, onCheckedChange, onChange, ...props },
+  ref
+) {
+  const handleCheckedChange = (checked) => {
+    onCheckedChange?.(checked);
+    onChange?.({ target: { checked } });
+  };
+
+  return (
+    <CheckboxPrimitive.Root
+      ref={ref}
+      onCheckedChange={handleCheckedChange}
+      className={cn(
+        'peer inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-[4px] border border-border bg-card transition-colors',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background',
+        'hover:border-primary/60',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        'data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
+        <Check className="h-3 w-3" strokeWidth={3} />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+});
+
+export { Checkbox };

frontend/src/components/ui/index.js

@@ -2,6 +2,7 @@
 export { Button, buttonVariants } from './button.jsx';
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './card.jsx';
 export { Badge, badgeVariants } from './badge.jsx';
+export { Checkbox } from './checkbox.jsx';
 export { Input, Textarea } from './input.jsx';
 export { Switch } from './switch.jsx';
 export { Separator } from './separator.jsx';

frontend/src/main.jsx

@@ -12,7 +12,6 @@ import Layout from './components/Layout.jsx';
 import { ToastProvider, TooltipProvider } from './components/ui';
 import './index.css';
 import './styles.css';
-import './split.css';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>

frontend/src/pages/FolderView.jsx

@@ -2,9 +2,7 @@ import { useEffect, useState, useCallback, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 import { SearchApi } from '../api/client.js';
 import EmailRow from '../components/EmailRow.jsx';
-import EmailDetail from '../components/EmailDetail.jsx';
 import BulkToolbar from '../components/BulkToolbar.jsx';
-import { Skeleton, EmptyState } from '../components/ui';
 import useSelection from '../hooks/useSelection.js';
 import useListKeyboardNav from '../hooks/useListKeyboardNav.js';
 
@@ -37,20 +35,6 @@ const FOLDER_META = {
 
 const PAGE_SIZE = 50;
 
-function ListSkeleton({ rows = 6 }) {
-  return (
-    <div className="sv-skeleton-list" aria-hidden="true">
-      {Array.from({ length: rows }).map((_, i) => (
-        <div className="sv-skeleton-row" key={i}>
-          <Skeleton className="h-3 w-3 rounded-full" />
-          <Skeleton className="h-3 flex-1" />
-          <Skeleton className="h-3 w-16" />
-        </div>
-      ))}
-    </div>
-  );
-}
-
 
 export default function FolderView() {
   const { slug } = useParams();
@@ -62,7 +46,6 @@ export default function FolderView() {
   const [hasMore, setHasMore] = useState(true);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
-  const [selectedEmail, setSelectedEmail] = useState(null);
   const { selected, toggle, clear, removeIds, selectedIds } = useSelection();
   const focusedId = useListKeyboardNav(emails, (id) => setEmails((prev) => prev.filter((x) => x.id !== id)));
 
@@ -73,7 +56,6 @@ export default function FolderView() {
     setPage(1);
     setHasMore(true);
     setError(null);
-    setSelectedEmail(null);
     clear();
   }, [slug, clear]);
 
@@ -133,57 +115,34 @@ export default function FolderView() {
         }}
       />
 
-      <div className={`sv-split${selectedEmail ? ' sv-split--open' : ''}`}>
-        <div className="sv-list-pane">
-          {loading && emails.length === 0 && !error && <ListSkeleton />}
+      {!loading && !error && emails.length === 0 && (
+        <div className="fv-empty">No emails in this folder.</div>
+      )}
 
-          {!loading && !error && emails.length === 0 && (
-            <EmptyState
-              title="No emails in this folder"
-              description="Nothing here yet — try another folder or run a sync."
-            />
-          )}
+      {emails.length > 0 && (
+        <table className="email-list">
+          <tbody>
+            {emails.map((e) => (
+              <EmailRow
+                key={e.id}
+                email={e}
+                selected={selected.has(e.id)}
+                onToggleSelect={toggle}
+                focused={focusedId === e.id}
+                onRemove={(id) => setEmails((prev) => prev.filter((x) => x.id !== id))}
+              />
+            ))}
+          </tbody>
+        </table>
+      )}
 
-          {emails.length > 0 && (
-            <table className="email-list">
-              <tbody>
-                {emails.map((e) => (
-                  <EmailRow
-                    key={e.id}
-                    email={e}
-                    selected={selected.has(e.id)}
-                    onToggleSelect={toggle}
-                    focused={focusedId === e.id}
-                    onOpen={(email) => setSelectedEmail(email)}
-                    onRemove={(id) => {
-                      setEmails((prev) => prev.filter((x) => x.id !== id));
-                      setSelectedEmail((cur) => (cur?.id === id ? null : cur));
-                    }}
-                  />
-                ))}
-              </tbody>
-            </table>
-          )}
+      {/* Sentinel — triggers next page load when scrolled into view */}
+      <div ref={sentinelRef} className="fv-sentinel" />
 
-          {/* Sentinel — triggers next page load when scrolled into view */}
-          <div ref={sentinelRef} className="fv-sentinel" />
-
-          {loading && emails.length > 0 && <div className="fv-loading-more">Loading…</div>}
-          {!hasMore && emails.length > 0 && (
-            <div className="fv-end">— {emails.length.toLocaleString()} emails —</div>
-          )}
-        </div>
-
-        {selectedEmail && (
-          <aside className="sv-reading-pane">
-            <EmailDetail
-              key={selectedEmail.id}
-              email={selectedEmail}
-              onClose={() => setSelectedEmail(null)}
-            />
-          </aside>
-        )}
-      </div>
+      {loading && <div className="fv-loading-more">Loading…</div>}
+      {!hasMore && emails.length > 0 && (
+        <div className="fv-end">— {emails.length.toLocaleString()} emails —</div>
+      )}
     </div>
   );
 }

frontend/src/pages/SearchResults.jsx

@@ -2,29 +2,13 @@ import { useEffect, useState, useCallback, useRef } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { SearchApi } from '../api/client.js';
 import EmailRow from '../components/EmailRow.jsx';
-import EmailDetail from '../components/EmailDetail.jsx';
 import BulkToolbar from '../components/BulkToolbar.jsx';
-import { Skeleton, EmptyState } from '../components/ui';
 import useSelection from '../hooks/useSelection.js';
 import useListKeyboardNav from '../hooks/useListKeyboardNav.js';
 import useSavedSearches from '../hooks/useSavedSearches.js';
 
 const PAGE_SIZE = 50;
 
-function ListSkeleton({ rows = 6 }) {
-  return (
-    <div className="sv-skeleton-list" aria-hidden="true">
-      {Array.from({ length: rows }).map((_, i) => (
-        <div className="sv-skeleton-row" key={i}>
-          <Skeleton className="h-3 w-3 rounded-full" />
-          <Skeleton className="h-3 flex-1" />
-          <Skeleton className="h-3 w-16" />
-        </div>
-      ))}
-    </div>
-  );
-}
-
 
 export default function SearchResults() {
   const [searchParams] = useSearchParams();
@@ -36,7 +20,6 @@ export default function SearchResults() {
   const [hasMore, setHasMore] = useState(true);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
-  const [selectedEmail, setSelectedEmail] = useState(null);
   const { selected, toggle, clear, removeIds, selectedIds } = useSelection();
   const focusedId = useListKeyboardNav(emails, (id) => setEmails((prev) => prev.filter((x) => x.id !== id)));
   const { searches: savedSearches, add: addSavedSearch } = useSavedSearches();
@@ -53,7 +36,6 @@ export default function SearchResults() {
     setPage(1);
     setHasMore(true);
     setError(null);
-    setSelectedEmail(null);
     clear();
   }, [q, clear]);
 
@@ -101,13 +83,11 @@ export default function SearchResults() {
         )}
       </div>
 
-      {!q.trim() && (
-        <EmptyState
-          title="Search your mail"
-          description="Enter a search query above to find emails."
-        />
-      )}
+      {!q.trim() && <div className="fv-empty">Enter a search query above.</div>}
       {error && <div className="fv-error">{error}</div>}
+      {!loading && !error && q.trim() && emails.length === 0 && !hasMore && (
+        <div className="fv-empty">No results for "{q}".</div>
+      )}
 
       <BulkToolbar
         selectedIds={selectedIds}
@@ -120,56 +100,27 @@ export default function SearchResults() {
         }}
       />
 
-      {q.trim() && (
-        <div className={`sv-split${selectedEmail ? ' sv-split--open' : ''}`}>
-          <div className="sv-list-pane">
-            {loading && emails.length === 0 && !error && <ListSkeleton />}
-
-            {!loading && !error && emails.length === 0 && !hasMore && (
-              <EmptyState
-                title={`No results for "${q}"`}
-                description="Try a different search term or filter."
+      {emails.length > 0 && (
+        <table className="email-list">
+          <tbody>
+            {emails.map((e) => (
+              <EmailRow
+                key={e.id}
+                email={e}
+                selected={selected.has(e.id)}
+                onToggleSelect={toggle}
+                focused={focusedId === e.id}
+                onRemove={(id) => setEmails((prev) => prev.filter((x) => x.id !== id))}
               />
-            )}
+            ))}
+          </tbody>
+        </table>
+      )}
 
-            {emails.length > 0 && (
-              <table className="email-list">
-                <tbody>
-                  {emails.map((e) => (
-                    <EmailRow
-                      key={e.id}
-                      email={e}
-                      selected={selected.has(e.id)}
-                      onToggleSelect={toggle}
-                      focused={focusedId === e.id}
-                      onOpen={(email) => setSelectedEmail(email)}
-                      onRemove={(id) => {
-                        setEmails((prev) => prev.filter((x) => x.id !== id));
-                        setSelectedEmail((cur) => (cur?.id === id ? null : cur));
-                      }}
-                    />
-                  ))}
-                </tbody>
-              </table>
-            )}
-
-            <div ref={sentinelRef} className="fv-sentinel" />
-            {loading && emails.length > 0 && <div className="fv-loading-more">Loading…</div>}
-            {!hasMore && emails.length > 0 && (
-              <div className="fv-end">— {emails.length.toLocaleString()} results —</div>
-            )}
-          </div>
-
-          {selectedEmail && (
-            <aside className="sv-reading-pane">
-              <EmailDetail
-                key={selectedEmail.id}
-                email={selectedEmail}
-                onClose={() => setSelectedEmail(null)}
-              />
-            </aside>
-          )}
-        </div>
+      <div ref={sentinelRef} className="fv-sentinel" />
+      {loading && <div className="fv-loading-more">Loading…</div>}
+      {!hasMore && emails.length > 0 && (
+        <div className="fv-end">— {emails.length.toLocaleString()} results —</div>
       )}
     </div>
   );

frontend/src/split.css

@@ -1,148 +0,0 @@
-/* ── Split-view reading pane ────────────────────────────────────────────────
- * Owned by Unit 1. Gmail/Outlook-style master-detail: the email list stays on
- * the left, a collapsible + horizontally resizable reading pane sits on the
- * right. Below 768px the pane overlays the list (mobile stack) instead of
- * squishing the columns side-by-side.
- *
- * These pages (.folder-view) are styled from styles.css, so we reference its
- * legacy CSS variables (--panel, --panel-2, --text, --muted, --accent) with
- * hardcoded hex fallbacks. The modern index.css tokens are stored as raw HSL
- * channel triplets and only work via hsl(var(--x)), so they are NOT used bare
- * here.
- * ------------------------------------------------------------------------- */
-
-.sv-split {
-  display: flex;
-  align-items: stretch;
-  gap: 0;
-  width: 100%;
-}
-
-/* Left column — the list. Flexes to fill remaining space and scrolls itself. */
-.sv-list-pane {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow-x: auto;
-}
-
-/* Right column — the reading pane. Resizable via the native handle; the width
- * gives it a sensible default, and the user can drag the bottom-right corner.
- * `resize: horizontal` needs `overflow` other than visible. */
-.sv-reading-pane {
-  flex: 0 0 auto;
-  width: clamp(320px, 42%, 640px);
-  min-width: 300px;
-  max-width: 80vw;
-  border-left: 1px solid var(--panel-2, #222a3d);
-  overflow: auto;
-  resize: horizontal;
-  background: var(--panel, #1a2030);
-  align-self: stretch;
-}
-
-/* ── Reading pane inner content ─────────────────────────────────────────── */
-.sv-detail { padding: 18px 20px; }
-
-.sv-detail-topbar {
-  display: flex;
-  justify-content: flex-end;
-  margin-bottom: 6px;
-}
-.sv-close {
-  background: transparent;
-  border: 1px solid var(--panel-2, #222a3d);
-  color: var(--muted, #8b93a7);
-  border-radius: 6px;
-  width: 28px;
-  height: 28px;
-  font-size: 13px;
-  line-height: 1;
-  cursor: pointer;
-}
-.sv-close:hover {
-  background: var(--panel-2, #222a3d);
-  color: var(--text, #e6e9f0);
-}
-
-.sv-detail-header { margin-bottom: 14px; }
-.sv-detail-subject {
-  font-size: 18px;
-  font-weight: 700;
-  margin-bottom: 6px;
-  color: var(--text, #e6e9f0);
-  word-break: break-word;
-}
-.sv-detail-meta {
-  font-size: 12px;
-  color: var(--muted, #8b93a7);
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  align-items: center;
-}
-.sv-detail-sep { opacity: 0.4; }
-
-.sv-ai-summary { margin-bottom: 14px; }
-.sv-ai-summary-text {
-  background: var(--panel-2, #222a3d);
-  border: 1px solid var(--panel-2, #222a3d);
-  border-radius: 8px;
-  padding: 10px 14px;
-  font-size: 13px;
-  color: var(--text, #e6e9f0);
-}
-
-.sv-body-loading { padding: 8px 0 18px; }
-.sv-body {
-  background: var(--panel, #1a2030);
-  border: 1px solid var(--panel-2, #222a3d);
-  border-radius: 8px;
-  padding: 16px 18px;
-  font-size: 13px;
-  line-height: 1.7;
-  color: var(--text, #e6e9f0);
-  white-space: pre-wrap;
-  word-break: break-word;
-  margin-bottom: 18px;
-  max-height: 60vh;
-  overflow-y: auto;
-}
-.sv-snippet {
-  font-size: 13px;
-  line-height: 1.6;
-  color: var(--muted, #8b93a7);
-  margin-bottom: 18px;
-}
-.sv-detail-actions { display: flex; gap: 10px; flex-wrap: wrap; }
-
-/* ── List loading / empty states ───────────────────────────────────────── */
-.sv-skeleton-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 12px 0;
-}
-.sv-skeleton-row {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 4px 8px;
-}
-
-/* ── Mobile: stack / overlay the reading pane ──────────────────────────── */
-@media (max-width: 767px) {
-  .sv-reading-pane {
-    position: fixed;
-    inset: 56px 0 0 0; /* below the topbar */
-    width: 100% !important;
-    max-width: 100vw;
-    min-width: 0;
-    border-left: none;
-    resize: none;
-    z-index: 40;
-  }
-  /* When the pane is open, hide the underlying list to avoid double-scroll. */
-  .sv-split.sv-split--open .sv-list-pane {
-    display: none;
-  }
-}

frontend/src/styles.css

@@ -294,32 +294,57 @@ input, select { background: var(--panel-2); border: 1px solid #2c3550; color: va
 .fv-error { color: var(--danger); font-size: 14px; padding: 12px 0; }
 
 .email-list { width: 100%; border-collapse: collapse; font-size: 13px; }
-.email-row { border-bottom: 1px solid #2c3550; cursor: pointer; }
+.email-row {
+  height: 44px;
+  border-bottom: 1px solid #2c3550;
+  cursor: pointer;
+  transition: background 0.1s ease;
+}
+.email-row > td { padding-top: 0; padding-bottom: 0; vertical-align: middle; }
+/* Single, consistent hover state for the whole row. */
 .email-row:hover { background: var(--panel); }
-.email-row--unread .el-sender,
+/* Unread: prominent subject, keep sender readable but not shouty. */
 .email-row--unread .el-subj-text { font-weight: 700; color: var(--text); }
+.email-row--unread .el-sender { font-weight: 600; color: var(--text); }
 
-.el-unread { width: 14px; padding: 10px 4px 10px 0; }
+.el-select { width: 34px; padding: 0 4px 0 10px; text-align: center; }
+.el-select > * { vertical-align: middle; }
+
+.el-unread { width: 14px; padding: 0 4px 0 0; text-align: center; }
 .unread-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
-.el-sender { width: 180px; padding: 10px 12px 10px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
-.el-subject { padding: 10px 8px; overflow: hidden; }
+
+/* Sender: secondary in the hierarchy — muted by default. */
+.el-sender {
+  width: 180px; padding: 0 12px 0 4px;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  color: var(--muted); font-size: 12.5px;
+}
+
+/* Subject + snippet share one line: subject prominent, snippet muted. */
+.el-subject { padding: 0 8px; overflow: hidden; max-width: 0; white-space: nowrap; text-overflow: ellipsis; }
 .el-subj-text { color: var(--text); }
-.el-snippet { color: var(--muted); }
-.el-meta { width: 80px; padding: 10px 8px; text-align: right; white-space: nowrap; }
+.el-snippet {
+  color: var(--muted); font-size: 12.5px;
+}
+.el-snippet::before { content: '—'; margin: 0 6px; opacity: 0.55; }
+
+.el-meta { width: 80px; padding: 0 8px; text-align: right; white-space: nowrap; }
 .el-attach { margin-right: 4px; font-size: 12px; }
 .el-size { font-size: 11px; color: var(--muted); }
-.el-date { width: 70px; padding: 10px 0 10px 8px; text-align: right; color: var(--muted); white-space: nowrap; font-size: 12px; }
+.el-date { width: 70px; padding: 0 0 0 8px; text-align: right; color: var(--muted); white-space: nowrap; font-size: 12px; }
 
-.el-actions { width: 80px; padding: 0 6px; text-align: right; white-space: nowrap; }
+.el-actions { width: 96px; padding: 0 6px; text-align: right; white-space: nowrap; }
 .action-btn {
-  background: none; border: none; padding: 3px 4px; cursor: pointer;
-  font-size: 13px; opacity: 0; transition: opacity 0.1s, color 0.1s;
+  background: none; border: none; padding: 4px 5px; cursor: pointer;
+  font-size: 13px; line-height: 1; opacity: 0;
+  transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease;
   border-radius: 4px; color: var(--muted);
 }
-.action-btn:hover { background: var(--panel-2); opacity: 1 !important; }
+.action-btn:hover { background: var(--panel-2); color: var(--text); opacity: 1 !important; }
 .action-btn--active { opacity: 1 !important; }
 .action-btn--danger:hover { color: var(--danger); }
-.email-row:hover .action-btn { opacity: 0.6; }
+.email-row:hover .action-btn { opacity: 0.65; }
+.action-btn:focus-visible { opacity: 1 !important; outline: 2px solid var(--accent); outline-offset: 1px; }
 .email-row--acting { opacity: 0.6; pointer-events: none; }
 .action-btn--unsub { font-size: 11px; }
 .action-btn--done { opacity: 1 !important; color: var(--ok); }
@@ -403,7 +428,6 @@ input, select { background: var(--panel-2); border: 1px solid #2c3550; color: va
 }
 .bulk-btn:hover { border-color: var(--accent); }
 .bulk-btn--danger:hover { border-color: var(--danger); color: var(--danger); }
-.el-select { width: 28px; text-align: center; }
 
 /* ── Keyboard shortcut help ──────────────────────────────────────────────── */
 .kbd-hint { position: fixed; bottom: 14px; right: 14px; font-size: 11px; color: var(--muted); background: var(--panel); border: 1px solid #2c3550; border-radius: 6px; padding: 4px 10px; opacity: 0.7; }