Rewrite list and list-item without Tailwind

Plan step 36 (containment group, last of its four components): moves
into resources/css/components/list.css (the container: display, the
2px segmented gap) and list-item.css (everything else — anatomy,
states, the segmented item's own background/corner, and the row
interaction pattern list.css used to carry). One commit for both:
list-item.css keys heavily on list's own data-md-list="segmented"
attribute and the two files are designed together.

Kept, now on data-md-* hooks: selectable/selection listbox semantics
(role="listbox"/"option", aria-selected, a trailing check as the
second cue, C-03), a disabled item's link dropped entirely rather than
left focusable (C-02), the segmented row's own state layer no longer
racing its background through an unlayered escape hatch (C-08 doesn't
recur — nothing here is unlayered), leading video/icon/avatar slots,
three-line top alignment and 12px vertical padding (C-15), 16px
leading/trailing gap (C-14), dividers inset 16px (C-16), the segmented
list's surface fill (C-21) and its hover/focus/pressed/selected corner
morph (C-22). The segmented icon size (20px) is now the `size` prop
`<x-icon>` already takes from the parent's @aware(['segmented']),
replacing the CSS override C-26's fix suggested.

data-md-lines="1|2|3" replaces the old line-count classes; data-md-list-item-*
hooks replace every other class list.

Hooks renamed data-list -> data-md-list, data-list-item -> data-md-list-item,
data-dividers -> data-md-dividers, data-selected -> data-md-selected, the
generic data-list-row/-open row pattern's last consumer (list-item)
moved, so list-rows.js drops the transitional dual-hook fallback the
card commit added. table.css now @imports list-item.css, completing
what its own comment already claimed (a row answers a pointer as a
list row does) under the new per-component-import architecture.

Imported from the Containment block of components.css; leaves
tailwind.css, which now carries only dialog.css for this group.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/css/components/table.css

@@ -8,7 +8,8 @@
  * outline-variant rule, body cells in body-medium between outline-variant rules — the role itself,
  * never a fraction of it, since M3 reserves opacity for state layers and disabled. A selected row
  * (`aria-selected="true"`) is secondary-container. A row that opens something is `data-md-list-row`
- * and answers a pointer as a list row does (components/list.css).
+ * and answers a pointer as a list row does (components/list-item.css, shared with `<x-card>` and
+ * `<x-list-item>`).
  *
  * A row is 52px: 16px above and below a body-medium line, 12px beside each cell. Density is never
  * applied by itself — "don't apply density by default; offer an explicit density opt-in instead,
@@ -21,6 +22,8 @@
 
 @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
 
+@import './list-item.css';
+
 @layer material.components {
     /* `position: relative` makes the table the containing block for anything absolute inside it —
        a visually hidden header label, a tooltip. Without it they escape the scroll box and widen a