A table is a component, and scroll wrappers need a min-width to engage

authoring/structure/components.md

@@ -38,8 +38,33 @@ scrolls it instead of squashing it.
 `data-tdoc-artifact` makes the whole block one comment anchor rather than
 leaving the reader to comment on fragments of its text.
 
-**Table scroll** — the same idea for tables: `<div class="tdoc-table-scroll">`
-around any table wide enough to overflow.
+**Table** — one bordered card, ruled inside, with nothing filled. A hairline
+under each row does the work of separating them; a header sits in the muted ink
+rather than a tinted band, and numbers are tabular so a column lines up.
+
+```html
+<div class="tdoc-table-scroll">
+  <table> … </table>
+</div>
+```
+
+The shape matters more than it looks. Filling every cell and spacing them apart
+turns a table into a pile of blocks: the gutters cut the columns, so the eye has
+no continuous edge to scan down, and rounded corners multiply with every row.
+Fills are also the worst case for this reader — dark mode is a whole-page
+invert, so a filled cell becomes a slab where a hairline only changes colour.
+
+Rounding a table needs `border-collapse: separate` with `border-spacing: 0` and
+`overflow: hidden` to clip; `collapse` will not round. Clear the cell fill
+explicitly — the reader supplies one, and a rule that sets only borders and
+padding leaves it in place, so the card comes out filled anyway.
+
+**Scroll wrappers** — `tdoc-table-scroll` for a table, `diagram-box` for a
+figure. Both are `overflow-x: auto`, and both need the child to have a
+`min-width` or the wrapper never engages: an `svg` at `width: 100%` shrinks to
+the column instead of overflowing it, and its labels land at a few pixels on a
+phone. Give a wide figure a `min-width` that keeps its smallest type around
+9px, and let it scroll.
 
 **Stat tile row** — a few numbers that carry an argument on their own. Three or
 four; a fifth is a table.

authoring/style/default.md

@@ -87,6 +87,7 @@ white with one pastel accent, and it draws any figure the content asks for.
 | Accent fill | Pink `fill:#f7d7d1 stroke:#e0a99e`, text `#b3503c`; or blue `fill:#dde7f9 stroke:#a9c0ee`, text `#26407a` |
 | Textured variant | Dot over the pink for a live state; diagonal hatch over the blue for a transformed one |
 | Stacked bar | Blue shades `#c4d4f5` / `#d4e0f8` / `#e8eefb` with `#a9c0ee` strokes and mono labels; a hatched segment marks a transformed part, a dashed baseline marks a limit |
+| Table | `rule` hairline border, `rx:12` card; row rules in `rule`; header in `muted`, normal case, no fill |
 
 Solid pastel is the base and the texture is the *variant*, not the fill. Put
 the colour inside the pattern tile so the texture reads on top of it rather
@@ -115,4 +116,4 @@ thing looks in this register.
 ## Style is visual only
 
 Governs how the page looks — never section numbering, language, tone, or
-structure. Tables inherit the overlay default. Link generously.
+structure. Tables take the treatment above. Link generously.

authoring/style/editorial.md

@@ -91,6 +91,7 @@ is a pointer, not a decoration, and it lands on one element.
 | Accent fill | `fill:#eef1fb stroke:#3a55f4`, text `#2200ff` |
 | Textured variant | Hatch in `#3a55f4` over the same fill; the green `#4ba181` is reserved for a positive outcome and never used as a second accent |
 | Stacked bar | Blues `#eef1fb` / `#dbe3fa` / `#c3d0f6` with `#b3bdc9` strokes |
+| Table | `rule` hairline border, `rx:10` card; row rules in `rule`; header serif in `muted`, no fill |
 
 The underline that marks a term in prose has no figure equivalent. Inside a
 drawing, emphasis is the accent fill.
@@ -110,5 +111,5 @@ requires, forbids, or limits any kind of visual.
 ## Style is visual only
 
 Governs how the page looks — never section numbering, language, tone, or
-structure. Tables inherit the overlay's rounded-cell default. Link generously
+structure. Tables take the treatment above. Link generously
 (the blue is this style's main accent).

authoring/style/paper.md

@@ -92,6 +92,7 @@ only saturated thing on the page and it stays rationed.
 | Accent fill | `fill:#f4e3dc stroke:#e3c4b6`, text `#c15f3c` |
 | Textured variant | Sparse dot in `#e3c4b6` over the same fill |
 | Stacked bar | Paper tints `#f4efe7` / `#ece5d8` / `#dcd3c4` with `#c9bfae` strokes |
+| Table | `rule` hairline border, `rx:6` card; row rules in `rule`; header small-caps in `muted`, no fill |
 
 Figure labels are the body sans, not the display serif — the serif is for
 headings, and inside a drawing it turns decorative.
@@ -109,4 +110,4 @@ serif labels.
 ## Style is visual only
 
 Governs how the page looks — never section numbering, language, tone, or
-structure. Tables inherit the overlay default. Link generously.
+structure. Tables take the treatment above. Link generously.

authoring/style/technical.md

@@ -131,6 +131,7 @@ the single thing the figure is about.
 | Accent fill | `fill:#fff5f3 stroke:#ff4b2e`, text `#ff4b2e` — **one node per figure** |
 | Textured variant | Diagonal hatch in `#ff4b2e` at 35% over the same fill |
 | Stacked bar | Greys `#f0f0f0` / `#e5e5e5` / `#d4d4d4` with `#a3a3a3` strokes; the segment under discussion takes the accent |
+| Table | `rule` hairline border, square corners; row rules in `rule`; header mono in `muted`; figures tabular |
 
 Metric labels are mono here, including inside figures — a number set in the
 body sans reads as prose and gets skimmed.

test/authoring.test.js

@@ -52,7 +52,8 @@ t('every style gives the same components a treatment', () => {
   // The swap is only real if each style answers for the same parts. A style
   // that skips one leaves that component undefined the moment it is selected.
   const parts = ['Container frame', 'Label chip', 'Numbered group', 'Description box',
-                 'Primary arrow', 'Secondary arrow', 'Accent fill', 'Textured variant', 'Stacked bar'];
+                 'Primary arrow', 'Secondary arrow', 'Accent fill', 'Textured variant', 'Stacked bar',
+                 'Table'];
   for (const entry of ['default', 'technical', 'paper', 'editorial']) {
     const text = read(`authoring/style/${entry}.md`);
     const missing = parts.filter(part => !text.includes(part));