/* SchoolCMS – Content tables
   Base styling for WYSIWYG content (js/utilities/table.js wraps bare
   tables in Bootstrap's .table-responsive), plus the header variants
   applied from the editor's Formats dropdown (inc/wysiwyg.php
   + js/admin/wysiwyg-table-styles.js).

   Burlington House School – styled from `text-table` 10001:1011 in the
   inner template: a grey-200 header bar (1296 × 51) carrying purple h5
   column titles, then body rows of 18/30 grey-800 copy on a 50px pitch
   with no rules, borders or zebra striping – the header bar is the only
   surface. Text is ranged left in every cell.

   DEPARTURE – the header and the rows (Charlie, 2026-11-04, on every
   site): the header is solid purple with white titles – the colour of
   the site's download links and FAQs – where the file draws the grey-200
   bar with purple titles, and the body rows alternate with a stripe of
   the header's colour, the first row under the header plain, where the
   file draws no zebra. The drawn grey bar was a Formats choice, Grey
   Table, until Charlie had the pale tables taken out the same evening:
   a stripe of a pale grey cannot show. (Someone had set the plain table
   to that grey bar on the server at 16:36; it went back to purple with
   them.)

   Header row: TinyMCE's Table button builds every row out of <td>, so a
   table the client made by hand has no <th> at all; where there is no
   header cell anywhere, the first row stands in for one. And 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 – use
   the thead when there is one, the first tbody otherwise. (Both lessons
   inherited from the Cathedral build.)

   No frame round the table either. 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 (Pupil Performance against the
   Sample Page, 2026-10-14). The cells' half of the attribute is already
   cancelled by their own `border: 0`; this cancels the table's half, so
   every table reads the same however it was made. The editor's column
   lines are css/admin/editor-canvas.css. */
table {
    --table-accent:      var(--color-purple);
    --table-accent-text: var(--color-white);
    --table-stripe:      14%;

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

    th,
    td {
        font: var(--text-18kl);
        color: var(--color-grey-800);
        padding: var(--space-sm) 12px;
        text-align: left;
        /* rows are as tall as their longest cell; every cell starts at the
           top rather than floating against wrapped neighbours */
        vertical-align: top;
        border: 0;

        @media (min-width: 768px) {
            padding: 10px var(--space-md);
        }
    }

    /* the header bar – real header cells, or the first row standing in */
    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 {
        font: var(--text-20kl);
        color: var(--table-accent-text);
        background: var(--table-accent);
        vertical-align: middle;
    }

    /* Alternate body rows: a stripe of the header's colour, the first row
       under the header plain. Which rows those are depends on what the
       header is – a thead's row, so the tbody's even rows; or the table's
       own first row, so its 3rd, 5th, 7th… Keyed to --table-accent, so each
       colour variant stripes in its own colour, at the strength
       --table-stripe sets beside the colour: the share of it that stands
       the stripe ΔE 10 off the page, so every colour's rows are as easy
       to tell apart (Charlie, 2026-11-04 – a flat 8% left a light
       colour's stripes all but invisible). A dark header takes about 13%, a
       light one far more – .claude/scripts/stripe-mix.py works it out
       from the page's colour and the header's. */
    &:has(thead) > tbody > tr:nth-child(even) > td,
    &:not(:has(thead)) > tbody:first-of-type > tr:nth-child(2n+3) > td {
        background: color-mix(in srgb, var(--table-accent) var(--table-stripe), transparent);
    }
}

/* ── Header variants (Formats dropdown) ──────────────────────
   Header-row colourways: the bar takes the brand colour with white
   titles, and the rows stripe in it (above).

   Purple restates the DEFAULT rather than overriding it. It earns its
   place in the dropdown because an unclassed table has no entry to pick:
   once an editor applies a colour, the only way back is toggling that
   same colour off, which means remembering which one is on. Picking
   Purple clears the others (wysiwyg-table-styles.js) and lands on the
   default header. */
.table-plum {
    --table-accent:      var(--color-plum);
    --table-accent-text: var(--color-white);
    --table-stripe:      15%;
}

.table-purple {
    --table-accent:      var(--color-purple);
    --table-accent-text: var(--color-white);
    --table-stripe:      14%;
}

.table-teal {
    --table-accent:      var(--color-teal);
    /* the brand teal is strong – white text on it */
    --table-accent-text: var(--color-white);
    --table-stripe:      15%;
}

/* 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, 16 under
   the table (half its 32 margin). Drag the thumb or click the track.
   The ink is the table's own header colour, which table.js hands the
   bar and the wrapper as --table-scroll-ink, so a table in a colour
   variant gets a bar in that colour (Charlie, 2026-11-04, found here:
   four variants, one bar colour – the Teal table's bar was purple); a
   pale header – Grey – gives its titles' colour instead, which stays
   visible. The purple is the fallback for a bar the script has not
   reached.
   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. */
.table-responsive.has-scroll-bar {
    scrollbar-width: none;

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

    &:focus-visible {
        outline:        2px solid var(--table-scroll-ink, var(--color-purple));
        outline-offset: 2px;
    }
}

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

    &[hidden] {
        display: none;
    }

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

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

    .tableScrollThumb {
        left:       0;
        background: var(--table-scroll-ink, var(--color-purple));
        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;
    }
}