table.picospa-chart.column {
  /* 
   * Layout the <caption>, <tbody>, <tfoot>
   * so the <table> becomes a horizontal bar chart
   *
   *     <caption>
   *  <tfoot>  <tbody>
   *
   * Where <caption> spans across the width at the top row, 
   * <tfoot> occupies only its width, <tbody> the rest.
   */
  display: grid;
  grid-template-columns: auto 1fr;   /* left = auto (tfoot), right = remaining (tbody) */
  grid-template-rows: auto 1fr;      /* caption + remaining height */
  grid-auto-columns: min-content;     /* each tbody column fits content without extra space */
  height: fit-content;
  width: fit-content;
  gap: 0;

  caption {
    grid-column: 1 / -1;               /* span both columns */
    grid-row: 1;
  }
  
  tfoot {
    grid-column: 1;                     /* left */
    grid-row: 2;
    overflow: auto;                     /* optional scrolling */
  }
  
  tbody {
    grid-row: 2;
  }
  
  thead {
    /* Do not show it (for now) */
    display: none;
  }

  
  
  tbody {
    position: relative;
    display: flex;
  }

  tbody {
    tr {
      display: flex;
    }

    th {
      /* Positioning */
      position: absolute;
      height: 100%;
      padding: 0;
      
      /* Text layout and style */
      writing-mode: vertical-lr;
      text-align: end;
      text-shadow: 0 0 2px var(--picochart-label-background-color, black);
      white-space: nowrap;
      
      /* Coloring */
      background: transparent;
      color: var(--picochart-label-color, white);
    }

    td {
      background: linear-gradient(to top, var(--picochart-color, black) var(--percent), transparent var(--percent));
      color: transparent;
      width: 1em;
    }
  }

  tfoot {
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;

    tr {
      display: flex;
    }

    th {
      display: none;
    }

    td {
      flex: 1;
      border: none;
      padding: 0;
      text-align: right;
    }
  }
}