markdown fix

styles/styles.css

@@ -511,8 +511,9 @@ treatment it replaces, which read as the wrong category for the work.
   /* The measure goes on the prose, not on the container, so media can use the
      full column: a post page is reading material and full-viewport line
      lengths get skimmed rather than read, but a screenshot of a feature
-     support table is unreadable at text width. */
-  .post-body > :not(.post-media) { max-width: var(--measure); }
+     support table is unreadable at text width. A real table is exempt for
+     exactly the same reason a screenshot of one is. */
+  .post-body > :not(.post-media, .post-body__table) { max-width: var(--measure); }
   /* .post-media carries its own top margin for the cards, where it follows an
      excerpt; inside this grid the gap already provides it. */
   .post-body > .post-media { margin-top: 0; }
@@ -533,7 +534,20 @@ treatment it replaces, which read as the wrong category for the work.
 
   .post-body a { overflow-wrap: anywhere; }
 
+  /* Struck prose is the author retracting a line for effect. Muted as well as
+     struck, because a line through body-coloured text on a dark surface reads
+     as a rendering fault rather than as a deliberate aside. */
+  .post-body s { color: var(--text-muted); }
+
+  /* The reset drops list markers globally, and everywhere else on the site
+     that is right — the nav, the card grids and the chain list are lists for
+     semantics, not for bullets. A post body is the one place that wants them
+     back: these are the author's numbered mini-guides, and without a marker an
+     ordered list is indistinguishable from an unordered one and the `start=`
+     the parser goes out of its way to emit is invisible. */
   .post-body__list { padding-left: var(--s1); display: grid; gap: var(--s-2); }
+  ul.post-body__list { list-style: disc outside; }
+  ol.post-body__list { list-style: decimal outside; }
   .post-body__list li { padding-left: var(--s-3); }
 
   .post-body__quote {
@@ -567,6 +581,49 @@ treatment it replaces, which read as the wrong category for the work.
     border-radius: var(--radius-sm);
   }
 
+  /* Pipe tables from a post body. Bordered rather than boxed like the code
+     block: a table already has structure, and a frame around a grid of lines
+     reads as two competing ones. */
+  .post-body__table {
+    /* The wrapper is what scrolls. A <table> refuses to be narrower than its
+       content, so without a scroll container around it a nine-column price
+       comparison scrolls the whole PAGE sideways — see the code block. */
+    overflow-x: auto;
+  }
+  .post-body__table table {
+    border-collapse: collapse;
+    font-size: var(--step--1);
+    /* No width:100% on purpose — the table is sized to its content. Stretched
+       to the column, a two-column table puts a hand-span of nothing between a
+       label and its value. */
+  }
+  .post-body__table :is(th, td) {
+    /* Left in both, overriding the browser's centred <th>. The delimiter row is
+       the only thing that moves a column, and it says so with a class. */
+    text-align: left;
+    padding: var(--s-2) var(--s-1);
+    border-bottom: 1px solid var(--border);
+    /* Cells wrap rather than forcing a scroll for every table, but not below
+       the width of a short word: nine columns on a phone would otherwise
+       shred into one character per line. Past that the container scrolls,
+       which is what it is for. */
+    min-width: 6ch;
+  }
+  .post-body__table th {
+    background: var(--surface-1);
+    border-bottom: 1px solid var(--border-strong);
+    /* Vertical-align matters here and nowhere else: a wrapped two-line heading
+       next to a one-line one should share a baseline at the bottom, where the
+       data starts. */
+    vertical-align: bottom;
+  }
+  .post-body__table tbody tr:last-child :is(th, td) { border-bottom: 0; }
+  /* Scoped under the wrapper for specificity, not for scoping: `:is(th, td)`
+     contributes a type selector, so the bare class would LOSE to the
+     text-align:left above and an aligned column would silently not be one. */
+  .post-body__table .post-body__cell--center { text-align: center; }
+  .post-body__table .post-body__cell--right  { text-align: right; }
+
   /* An image inside a sentence still gets its own line — these are
      screenshots being pointed at, not icons sitting in the text. The <picture>
      is what sits in the paragraph now (the reset already makes it a block);