/* Colors are light-dark() pairs that follow the page's color-scheme.
   :where() keeps this default at zero specificity so a host's own
   color-scheme (e.g. set by its dark-mode toggle) wins. */
:where(:root) {
  color-scheme: light dark;
}

:root {
  --tb-hue: 240deg;
  --tb-sat: 29%;

  --tb-border-color: light-dark(hsl(var(--tb-hue) var(--tb-sat) 55%), hsl(var(--tb-hue) var(--tb-sat) 50%));
  --tb-cell-border-color: light-dark(hsl(var(--tb-hue) var(--tb-sat) 55%), hsl(var(--tb-hue) var(--tb-sat) 50%));
  --tb-line-color: light-dark(hsl(var(--tb-hue) var(--tb-sat) 80%), hsl(var(--tb-hue) var(--tb-sat) 50%));
  --tb-header-bg: light-dark(hsl(var(--tb-hue) var(--tb-sat) 60%), hsl(var(--tb-hue) var(--tb-sat) 30%));
  --tb-header-fg: #fff;
  --tb-footer-bg: var(--tb-header-bg);
  --tb-footer-fg: var(--tb-header-fg);
  --tb-caption-bg: light-dark(hsl(var(--tb-hue) var(--tb-sat) 98%), hsl(var(--tb-hue) var(--tb-sat) 23%));
  --tb-caption-line-color: hsl(var(--tb-hue) var(--tb-sat) 50%);

  --tb-shade1-bg: light-dark(oklch(0.83 0.110 55), oklch(0.490 0.20 55));
  --tb-shade2-bg: light-dark(oklch(0.83 0.120 90), oklch(0.532 0.17 90));
  --tb-shade3-bg: light-dark(oklch(0.83 0.120 125), oklch(0.525 0.19 125));
  --tb-shade4-bg: light-dark(oklch(0.83 0.120 165), oklch(0.497 0.17 165));
  --tb-shade5-bg: light-dark(oklch(0.83 0.120 210), oklch(0.504 0.15 210));
  --tb-shade6-bg: light-dark(oklch(0.83 0.086 255), oklch(0.476 0.18 255));
  --tb-shade7-bg: light-dark(oklch(0.83 0.099 300), oklch(0.469 0.21 300));
  --tb-shade8-bg: light-dark(oklch(0.83 0.119 345), oklch(0.476 0.22 345));
  --tb-shade9-bg: light-dark(oklch(0.83 0.095 15), oklch(0.455 0.22 15));
  --tb-shade-bg:  var(--tb-shade1-bg);

  --tb-shade1-fg: light-dark(oklch(0.53 0.131 55), oklch(0.70 0.20 55));
  --tb-shade2-fg: light-dark(oklch(0.53 0.108 90), oklch(0.76 0.17 90));
  --tb-shade3-fg: light-dark(oklch(0.53 0.133 125), oklch(0.75 0.19 125));
  --tb-shade4-fg: light-dark(oklch(0.53 0.111 165), oklch(0.71 0.17 165));
  --tb-shade5-fg: light-dark(oklch(0.53 0.091 210), oklch(0.72 0.15 210));
  --tb-shade6-fg: light-dark(oklch(0.53 0.174 255), oklch(0.68 0.18 255));
  --tb-shade7-fg: light-dark(oklch(0.53 0.210 300), oklch(0.67 0.21 300));
  --tb-shade8-fg: light-dark(oklch(0.53 0.220 345), oklch(0.68 0.22 345));
  --tb-shade9-fg: light-dark(oklch(0.53 0.211 15), oklch(0.67 0.22 15));
  --tb-shade-fg:  var(--tb-shade1-fg);

  --tb-line-width-thin: 0.5px;
  --tb-line-width-default: 1px;
  --tb-line-width-thick: 2px;
  --tb-line-width-xthick: 4px;
}

/*
 * Host pages/themes (Docusaurus, MkDocs, etc.) often style bare tables
 * with zebra striping, borders, and shadows. This resets only what
 * ts-tableau doesn't always explicitly set itself (background, border,
 * box-shadow) back to neutral values, using ordinary specificity -- no
 * !important -- so our own rules below naturally take over from here.
 * (text-align/vertical-align aren't reset: every cell always gets an
 * explicit halign/valign rule from us, table-level default or per-cell
 * override, so there's no gap for a host style to fill there.)
 *
 * This beats most host default table styling, but not a host theme that
 * uses !important or unusually high specificity itself -- for those, a
 * host-specific integration package is expected to add whatever
 * override its environment needs.
 */
table.tableau,
table.tableau tr,
table.tableau th,
table.tableau td {
  background: transparent;
  border: none;
  box-shadow: none;
}

table.tableau {
  /* Set here rather than on :root so a nested table doesn't inherit the
     outer table's boxed()/hlines()/vlines() styles, which arrive inline. */
  --tb-boxed-width: var(--tb-line-width-default);
  --tb-boxed-style: solid;
  --tb-boxed-color: var(--tb-border-color);
  --tb-hlines-width: var(--tb-line-width-thin);
  --tb-hlines-style: solid;
  --tb-hlines-color: var(--tb-line-color);
  --tb-vlines-width: var(--tb-line-width-thin);
  --tb-vlines-style: solid;
  --tb-vlines-color: var(--tb-line-color);

  border-collapse: collapse;
  border-spacing: 0;
  caption-side: bottom;

  & caption {
    margin-top: 0;
    padding: 0.25em 0;
    text-align: center;
    font-size: 90%;
    font-variant: all-small-caps;
    background: var(--tb-caption-bg);
    border-top: 0.5px solid var(--tb-caption-line-color);
    border-bottom: 0.5px solid var(--tb-caption-line-color);

    & p {
      margin: 0;
    }
  }

  &.boxed caption {
    border-left: 0.5px solid var(--tb-caption-line-color);
    border-right: 0.5px solid var(--tb-caption-line-color);
    padding-left: 1em;
    padding-right: 1em;
  }

  & td, & th {
    padding: 0.25rem 0.5rem;
    margin:0;
  }

  & td > p:first-child, & th > p:first-child {
    margin-top: 0;
  }

  & td > p:last-child, & th > p:last-child {
    margin-bottom: 0;
  }

  &.halign-l td{
    text-align: left;
  }

  &.halign-c td {
    text-align: center;
  }
  &.halign-r td{
    text-align: right;
  }
  &.halign-j td {
    text-align: justify;
    text-justify: auto;
  }

  &.valign-t td {
    vertical-align: top;
  }

  &.valign-m td {
    vertical-align: middle;
  }

  &.valign-b td {
    vertical-align: bottom;
  }

  &.boxed {
    border: var(--tb-boxed-width) var(--tb-boxed-style) var(--tb-boxed-color);
  }

  &.hlines tr:not(:last-child) td {
    border-bottom: var(--tb-hlines-width) var(--tb-hlines-style) var(--tb-hlines-color);
  }

  &.vlines tr td:not(:last-child) {
    border-right: var(--tb-vlines-width) var(--tb-vlines-style) var(--tb-vlines-color);
  }
}

table.tableau tr td, table.tableau tr th {
  &.halign-l {
    text-align: left;
  }

  &.halign-c {
    text-align: center;
  }
  &.halign-r {
    text-align: right;
  }
  &.halign-j {
    text-align: justify;
    text-justify: auto;
  }

  &.valign-t {
    vertical-align: top;
  }

  &.valign-m {
    vertical-align: middle;
  }

  &.valign-b {
    vertical-align: bottom;
  }

  &.tb-header {
    background: var(--tb-header-bg);
    color: var(--tb-header-fg);
    font-weight: 500;
    font-size: 90%;
  }
  &.tb-footer {
    background: var(--tb-footer-bg);
    color: var(--tb-footer-fg);
    font-weight: 500;
    font-size: 90%;
  }
  &.tb-shaded:not(.tb-header, .tb-footer) {
    color: light-dark(#000, #fff);
  }

  &.tb_l_box  { border: var(--tb-line-width-default) solid var(--tb-cell-border-color); }
  &.tb_l_1111 { border: var(--tb-line-width-default) solid var(--tb-cell-border-color); }
  /*     TRBL */
  &.tb_l_0001 { border-left: var(--tb-line-width-default) solid var(--tb-cell-border-color); }
  &.tb_l_0010 { border-bottom: var(--tb-line-width-default) solid var(--tb-cell-border-color); }
  &.tb_l_0011 { border-left: var(--tb-line-width-default) solid var(--tb-cell-border-color); border-bottom: var(--tb-line-width-default) solid var(--tb-cell-border-color); }
  &.tb_l_0100 { border-right: var(--tb-line-width-default) solid var(--tb-cell-border-color); }
  &.tb_l_0101 { border-left: var(--tb-line-width-default) solid var(--tb-cell-border-color); border-right: var(--tb-line-width-default) solid var(--tb-cell-border-color); }
  &.tb_l_0110 { border-right: var(--tb-line-width-default) solid var(--tb-cell-border-color); border-bottom: var(--tb-line-width-default) solid var(--tb-cell-border-color); }
  &.tb_l_0111 { border-right: var(--tb-line-width-default) solid var(--tb-cell-border-color); border-left: var(--tb-line-width-default) solid var(--tb-cell-border-color); border-bottom: var(--tb-line-width-default) solid var(--tb-cell-border-color); }
  &.tb_l_1000 { border-top: var(--tb-line-width-default) solid var(--tb-cell-border-color); }
  &.tb_l_1001 { border-top: var(--tb-line-width-default) solid var(--tb-cell-border-color); border-left: var(--tb-line-width-default) solid var(--tb-cell-border-color); }
  &.tb_l_1010 { border-top: var(--tb-line-width-default) solid var(--tb-cell-border-color); border-bottom: var(--tb-line-width-default) solid var(--tb-cell-border-color); }
  &.tb_l_1011 { border-top: var(--tb-line-width-default) solid var(--tb-cell-border-color); border-left: var(--tb-line-width-default) solid var(--tb-cell-border-color); border-bottom: var(--tb-line-width-default) solid var(--tb-cell-border-color); }
  &.tb_l_1100 { border-top: var(--tb-line-width-default) solid var(--tb-cell-border-color); border-right: var(--tb-line-width-default) solid var(--tb-cell-border-color); }
  &.tb_l_1101 { border-top: var(--tb-line-width-default) solid var(--tb-cell-border-color); border-right: var(--tb-line-width-default) solid var(--tb-cell-border-color); border-left: var(--tb-line-width-default) solid var(--tb-cell-border-color); }
  &.tb_l_1110 { border-top: var(--tb-line-width-default) solid var(--tb-cell-border-color); border-right: var(--tb-line-width-default) solid var(--tb-cell-border-color); border-bottom: var(--tb-line-width-default) solid var(--tb-cell-border-color); }
}