/* Content tables — styled to match the code-block palette (--code-bg), with a
   slightly darker header. Code-highlight tables are excluded via :not(). */

/* The :not() guard keeps these rules off syntax-highlight line-number tables. */
.post-content table:not(.highlighttable, .highlight table, .gist .highlight) {
    /* reset.css forces `display: block` (to allow overflow-x scrolling), which
       leaves the cell grid at content-width inside a full-width block — making
       narrow tables look cut off. Restore table layout so cells fill the box. */
    display: table;
    border-collapse: separate;
    border-spacing: 0;
    width: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: var(--content-gap);
}

/* Roomier horizontal padding so columns get clear separation. */
.post-content table:not(.highlighttable, .highlight table, .gist .highlight) th,
.post-content table:not(.highlighttable, .highlight table, .gist .highlight) td {
    padding-left: 16px;
    padding-right: 16px;
}

/* Header: a touch darker than the body so it reads as a header. */
.post-content table:not(.highlighttable, .highlight table, .gist .highlight) thead th {
    background: color-mix(in srgb, var(--code-bg), var(--secondary) 22%);
    color: var(--primary);
    font-weight: 600;
    border-bottom: 1px solid color-mix(in srgb, var(--border), var(--secondary) 25%);
}

/* Body cells share the code-block background, with subtle row separators. */
.post-content table:not(.highlighttable, .highlight table, .gist .highlight) tbody td {
    background: var(--code-bg);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, var(--code-bg));
}

/* Zebra striping: even rows lean slightly toward the page background — kept
   subtle so the contrast between rows is gentle. */
.post-content table:not(.highlighttable, .highlight table, .gist .highlight) tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--code-bg), var(--theme) 20%);
}

/* In light mode --code-bg and --theme are both near-white, so mixing toward
   --theme barely shifts the stripe. Darken toward --secondary instead for a
   visible alternation. Scoped to light mode so dark mode (already good) is untouched. */
body:not(.dark) .post-content table:not(.highlighttable, .highlight table, .gist .highlight) tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--code-bg), var(--secondary) 8%);
}

/* Row hover highlight. */
.post-content table:not(.highlighttable, .highlight table, .gist .highlight) tbody tr:hover td {
    background: color-mix(in srgb, var(--code-bg), var(--secondary) 5%);
}

/* In light mode the even-row stripe is darkened toward --secondary, so the
   default hover would be lighter than it. Push hover darker than both stripes
   so it stays perceptible on every row. */
body:not(.dark) .post-content table:not(.highlighttable, .highlight table, .gist .highlight) tbody tr:hover td {
    background: color-mix(in srgb, var(--code-bg), var(--secondary) 12%);
}

/* Drop the separator on the final row so it doesn't double up with the outer border. */
.post-content table:not(.highlighttable, .highlight table, .gist .highlight) tbody tr:last-child td {
    border-bottom: none;
}