/* ###########################################################################
   SPREADSHEET : a spreadsheet-style grid that sits inside one table cell
   (usually a <td colspan="2">) without making a new table.

   Load this stylesheet AFTER the table stylesheet.
   The text takes the cell's color, so it follows the table colors.

   HTML layout:
     <div class="spreadsheet cols-5">              grid, 5 columns
       <div class="title">...</div>                title across all columns
       <div class="row header"> <div>..</div> x5 </div>   heading row
       <div class="row"> <div>..</div> x5 </div>          data row
       <div class="row tot"> <div>..</div> x5 </div>    total row
     </div>
   Every row needs one <div> per column, even when empty: <div></div>
   ########################################################################### */


/* ===========================================================================
   1. GRID  (the box that holds the spreadsheet)
   =========================================================================== */

.spreadsheet {
  display: grid;
  border: 2px solid rgba(4,9,133, var(--tabl-opaq));    /* outer border */
  margin: 0.5rem 0;                                     /* space above + below */
}

/* ===========================================================================
   2. COLUMN COUNT  (add one of these to the spreadsheet div)
      auto = each column is as wide as its contents, like Excel AutoFit.
      For custom widths, put this on the spreadsheet div instead; it overrides:
        style="grid-template-columns: 2fr 1fr 1fr 1fr 1fr;"   (1st column 2x wide)
   =========================================================================== */

.spreadsheet.cols-2 { grid-template-columns: repeat(2, auto); }
.spreadsheet.cols-3 { grid-template-columns: repeat(3, auto); }
.spreadsheet.cols-4 { grid-template-columns: repeat(4, auto); }
.spreadsheet.cols-5 { grid-template-columns: repeat(5, auto); }
.spreadsheet.cols-6 { grid-template-columns: repeat(6, auto); }
.spreadsheet.cols-7 { grid-template-columns: repeat(7, auto); }
.spreadsheet.cols-8 { grid-template-columns: repeat(8, auto); }

/* custom widths: As weight standards sheet (6 columns, notes column widest) */
.spreadsheet.as-standards { grid-template-columns: 1.1fr 1.1fr 1.2fr 1.3fr 1.3fr 2.6fr; }


/* ===========================================================================
   3. ROWS + CELLS
   =========================================================================== */

/* a row wrapper keeps the HTML readable; it does not change the layout */
.spreadsheet > .row {
  display: contents;
}

/* every cell; the right + bottom borders are the grid lines */
.spreadsheet .row > div {
  padding: 0.3rem 0.6rem;
  background-color: rgba(255,255,255, var(--tabl-opaq));
  border-right: 1px solid rgba(110,110,110, var(--tabl-opaq));    /* grid line color */
  border-bottom: 1px solid rgba(110,110,110, var(--tabl-opaq));
  text-align: left;
}
/* no grid line next to the outer border */
.spreadsheet .row > div:last-child { border-right: none; }
.spreadsheet > .row:last-child > div { border-bottom: none; }

/* stops the site-wide enlarged first letter from enlarging the 1st character of every cell */
.spreadsheet div::first-letter {
  font-size: 1em;
}


/* ===========================================================================
   4. TITLE ROW  (one cell across all columns)
   =========================================================================== */

.spreadsheet > .title {
  grid-column: 1 / -1;                      /* from the first column line to the last */
  padding: 0.4rem 0.6rem;
  background-color: rgba(255,255,255, var(--tabl-opaq));
  border-bottom: 1px solid rgba(110,110,110, var(--tabl-opaq));
  font-weight: bold;
  font-size: 1.2rem;
  text-align: center;
}


/* ===========================================================================
   5. HEADER ROW  (column headings: bold + shaded)
   =========================================================================== */

.spreadsheet .header > div {
  font-weight: bold;
  background-color: rgba(180,180,180, var(--tabl-opaq));
}


/* ===========================================================================
   6. STRIPED ROWS  (every 2nd data row lighter)
   =========================================================================== */

.spreadsheet .row:nth-child(even):not(.header):not(.tot) > div {
  background-color: rgba(225,232,242, var(--tabl-opaq));    /* pale blue-grey */
}


/* ===========================================================================
   7. NUMBERS  (right-aligned, like Excel)   use: <div class="num">
   =========================================================================== */

.spreadsheet .row > .num {
  text-align: right;
}


/* ===========================================================================
   8. TOTAL ROW  (bold, with a heavier line above)   use: <div class="row tot">
   =========================================================================== */

.spreadsheet .tot > div {
  font-weight: bold;
  border-top: 2px solid rgba(0,0,0, 0.6);
}