/* SchoolCMS – Content tables – The Hall School
   WYSIWYG content tables (js/utilities/table.js wraps bare tables in
   Bootstrap's .table-responsive), restyled from the table the inner
   mockup draws (6007:1630), plus the colourways the editor's Formats
   dropdown applies (inc/wysiwyg.php + js/admin/wysiwyg-table-styles.js).

   The drawn table: a 51-tall header band in ice across the full width on
   the taupe ground, the column titles in H3 (30/40) in chestnut, then rows
   of Body in black – no rules, no zebra, no cell borders. The first title
   sits 17 in from the band's edge and the columns are 28 apart, so a cell
   pads 17 on the left and 11 on the right. 31 from the band's foot to the
   first row's text, then 50 a row (the 34 line and 16 between).

   DEPARTURES from the drawing:
   – the titles' capitals are centred in the band (typography.md §5): the
     drawing sets the 40px line 10 from the band's top and 1 from its foot;
     Familjen Grotesk sits its capitals high in the line, so the band's 11
     spare pixels split 3.25 above and 7.75 below, keeping the drawn 51;
   – the first column's title is drawn in black (6007:1405), the other two
     in chestnut – all three chestnut, the majority and the H3 colour;
   – the columns are equal: the Table button writes equal percentage
     widths where the drawing's text boxes are 302 / 522 / 305.

   Two markups, one look. TinyMCE's Table button builds every row out of
   <td> in one <tbody>, so a client's table has no <th>: where there is
   no header cell anywhere, the table's own first row is the header. Only
   the table's own first row, not the opening row of every section – a
   plain `tr:first-child` also matches the first row inside <tbody>, so a
   table split into <thead> + <tbody> would come out with two header rows
   – so the thead when there is one, the first tbody otherwise. (Both
   lessons inherited from the Cathedral build.) */

/* No frame round the table. The editor's Table button writes border="1"
   on every table it makes, and the browser draws that attribute as a 1px
   frame the design does not have – so a client-made table came out boxed
   where a hand-written one did not (found on Burlington, 2026-10-14).
   Bootstrap's reboot already cancels the cells' half of the attribute;
   `border: 0` here cancels the table's, so every table reads the same
   however it was made. The lines a wysiwyg adds to show the columns are
   css/admin/editor-canvas.css. */
table {
    --table-band:     var(--color-ice);
    --table-band-ink: var(--color-chestnut);

    width:           100%;
    margin-bottom:   var(--space-md);
    border:          0;
    border-collapse: collapse;

    th,
    td {
        padding:        8px 11px 8px 17px;
        font:           var(--text-20fr);
        color:          var(--color-black);
        text-align:     left;
        vertical-align: top;
        border:         0;
    }

    /* The header band: the thead's cells, any th, or – a table with no
       header cell at all – the first row of its first section. */
    th,
    &:not(:has(th)) > thead:first-of-type > tr:first-child > td,
    &:not(:has(th)):not(:has(thead)) > tbody:first-of-type > tr:first-child > td {
        padding:        3.25px 11px 7.75px 17px;
        font:           var(--text-30fr);
        color:          var(--table-band-ink);
        background:     var(--table-band);
        vertical-align: middle;
    }

    /* 31 between the band's foot and the first row's text – the row's own
       8 and 23 more: the first body row after a thead, or the second row
       of a table whose first row is the header (all <td>, or a row of
       <th> – only the first, so a table of row headers keeps its pitch). */
    > thead + tbody > tr:first-child > td,
    &:not(:has(th)):not(:has(thead)) > tbody:first-of-type > tr:nth-child(2) > td,
    &:not(:has(thead)) > tbody:first-of-type > tr:first-child:has(> th) + tr > td {
        padding-top: 31px;
    }

    /* The drawing ends the table on the last row's line. */
    tr:last-child > td {
        padding-bottom: 0;
    }
}

/* ── Colourways (Formats dropdown – Ice / Chestnut / Pink Table) ──
   The band and its ink are the whole difference. Ice is the drawn table –
   the plain table's own look, listed first so the dropdown names it;
   chestnut and pink are the two bands the mockups paint (the coloured
   callout, the text-image panel). */
.table-ice {
    --table-band:     var(--color-ice);
    --table-band-ink: var(--color-chestnut);
}

.table-chestnut {
    --table-band:     var(--color-chestnut);
    --table-band-ink: var(--color-ice);
}

.table-pink {
    --table-band:     var(--color-pink);
    --table-band-ink: var(--color-chestnut);
}

/* The bar under a table wider than the page (js/utilities/table.js draws
   it). A phone and a Mac trackpad show the native scrollbar only while
   the table is being scrolled, so nothing said the table went on past the
   edge (Charlie, 2026-10-29, found on The Hall School). This one is in
   view whenever the table overflows: a 4px track in the table's ink at
   15%, the thumb – the visible share of the table – in the ink, 8 under
   the table (half its 16 margin). Drag the thumb or click the track.
   It takes no room: .tableScroll is an empty line after the wrapper and
   draws the track up into the space under the table, which table.js
   measures into --table-scroll-room – so nothing on the page moves when
   it appears, whatever margins the table has. The native bar is hidden
   only where the script has put this one in place, so without JS the
   table still scrolls with it. The ink is Brand/black, the table's
   darkest colour. */
.table-responsive.has-scroll-bar {
    scrollbar-width: none;

    &::-webkit-scrollbar {
        display: none;
    }

    &:focus-visible {
        outline:        2px solid var(--color-black);
        outline-offset: 2px;
    }
}

.tableScroll {
    position:     relative;
    height:       0;
    cursor:       pointer;
    touch-action: none;

    &[hidden] {
        display: none;
    }

    /* the track and the thumb on one line, 8 under the table */
    &::before,
    .tableScrollThumb {
        position:      absolute;
        top:           calc(8px - var(--table-scroll-room, 0px));
        height:        4px;
        border-radius: 2px;
    }

    &::before {
        content:    '';
        left:       0;
        right:      0;
        background: color-mix(in srgb, var(--color-black) 15%, transparent);
    }

    .tableScrollThumb {
        left:       0;
        background: var(--color-black);
        cursor:     grab;

        &.is-dragging {
            cursor: grabbing;
        }
    }
}

/* The floor that makes the wrapper's sideways scroll actually happen:
   width: 100% alone lets a phone screen crush the columns to a word per
   line – the table never outgrows the wrapper, so overflow-x has nothing
   to do. Floors scale with the column count; a 2-column table fits any
   screen unaided. */
.table-responsive > table {
    &:has(tr > :nth-child(3)) {
        min-width: 640px;
    }

    &:has(tr > :nth-child(5)) {
        min-width: 900px;
    }
}