/* The theme sets table borders to var(--color-border), which is #eee in
   light mode and a near-invisible rgba(148,197,255,0.18) in dark mode.
   Reuse --color-text-secondary instead - already tuned for legibility
   against the background in both themes, so it reads clearly as a border. */
.table th,
.table td {
  border: 1px solid var(--color-text-secondary) !important;
}

/* Bootstrap's base stylesheet resets `th { text-align: left }`, overriding
   the browser default of centered table headers (bootstrap.css:2962). */
.table th {
  text-align: center;
}

/* Bootstrap hardcodes `.table td, .table th { background-color: #fff
   !important }`. In dark mode that leaves a white cell under text that has
   switched to a pale variable — the A1 lesson tables came out near-white
   panels with light grey text on them.

   The theme does try to fix this, but its rule (theme-variables.css) is
   scoped to `.markdown-body table tr` and misses on two counts: blog posts
   here are not inside a .markdown-body, and it targets `tr`, which cannot
   override an `!important` set on `td`/`th`. So the override has to live
   here, on the cells, and carry `!important` to beat Bootstrap.

   Both dark-mode forms are covered, matching how theme-toggle.js works:
   an explicit [data-theme="dark"], and the system preference when the
   reader has not chosen a theme (:root:not([data-theme])). */
[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
  background-color: var(--color-bg) !important;
  color: var(--color-text-main);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .table td,
  :root:not([data-theme]) .table th {
    background-color: var(--color-bg) !important;
    color: var(--color-text-main);
  }
}

/* The border rule at the top of this file uses --color-text-secondary, which
   is a text color. Against the now-dark cell that is 9.2:1 — a grid drawn as
   loudly as the words inside it. Softened here to 3.01:1, which still clears
   the 3:1 WCAG asks of a meaningful boundary but lets the text lead.

   Not reusing --color-border-dark: at rgba(148,197,255,0.25) it composites to
   1.71:1 on this background, which is the near-invisible border that
   table-borders-fix.css exists to correct in the first place. */
[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
  border-color: rgba(148, 197, 255, 0.45) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .table td,
  :root:not([data-theme]) .table th {
    border-color: rgba(148, 197, 255, 0.45) !important;
  }
}