/* No global table rules or fixed palette: inherit the active theme.
   Every rule is scoped to a class or variable this plugin sets, so a table
   without our settings is left exactly as WordPress and the theme style it. */

/* Scroll sideways: always, or only on narrow screens. */
.wp-block-table.siteframe-tools-table-scroll,
.wp-block-table.siteframe-tools-table-scroll-sp { max-width:100%; overflow-x:auto; overscroll-behavior-inline:contain; }
.wp-block-table.siteframe-tools-table-scroll > table { min-width:var(--siteframe-table-width,36rem); }
.wp-block-table.siteframe-tools-table-scroll.siteframe-tools-table-wide > table { min-width:var(--siteframe-table-width,48rem); }
.wp-block-table.siteframe-tools-table-scroll:focus-visible,
.wp-block-table.siteframe-tools-table-scroll-sp:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
@media (max-width:600px) {
 .wp-block-table.siteframe-tools-table-scroll-sp > table { min-width:var(--siteframe-table-width,36rem); }
 .wp-block-table.siteframe-tools-table-scroll-sp.siteframe-tools-table-wide > table { min-width:var(--siteframe-table-width,48rem); }
 /* The hint text comes from PHP so it is translated; CSS only decides when to show it. */
 .wp-block-table[data-siteframe-hint]::before { content:attr(data-siteframe-hint); display:block; font-size:.75em; opacity:.7; text-align:end; margin-block-end:.25em; }
}

/* First column: emphasis and width. */
.wp-block-table.siteframe-tools-table-key > table > :is(thead,tbody,tfoot) > tr > :first-child { font-weight:700; }
.wp-block-table[style*="--siteframe-table-first-width"] > table > :is(thead,tbody,tfoot) > tr > :first-child { width:var(--siteframe-table-first-width); min-width:var(--siteframe-table-first-width); }

/* Colours, each applied only when its variable is present. The header row is
   declared after the first column so the top-left cell takes the header colour. */
.wp-block-table[style*="--siteframe-table-first-bg"] > table > :is(thead,tbody,tfoot) > tr > :first-child { background-color:var(--siteframe-table-first-bg); }
.wp-block-table[style*="--siteframe-table-first-text"] > table > :is(thead,tbody,tfoot) > tr > :first-child { color:var(--siteframe-table-first-text); }
.wp-block-table[style*="--siteframe-table-head-bg"] > table > thead > tr > * { background-color:var(--siteframe-table-head-bg); }
.wp-block-table[style*="--siteframe-table-head-text"] > table > thead > tr > * { color:var(--siteframe-table-head-text); }
/* Header cells (th) in the body and footer, coloured by what they are rather than where
   they sit. :nth-child(n) matches every cell and only lifts the weight to that of the
   first-column rules, so a header cell in the first column takes this colour. */
.wp-block-table[style*="--siteframe-table-body-th-bg"] > table > :is(tbody,tfoot) > tr > th:nth-child(n) { background-color:var(--siteframe-table-body-th-bg); }
.wp-block-table[style*="--siteframe-table-body-th-text"] > table > :is(tbody,tfoot) > tr > th:nth-child(n) { color:var(--siteframe-table-body-th-text); }

/* Keep the first column in view while the rest scrolls. Sticky cells need
   separate borders, so the cells draw top and left and the table draws the
   other two edges, which keeps every line single. */
.wp-block-table.siteframe-tools-table-sticky-first > table,
.wp-block-table.siteframe-tools-table-head-sticky > table,
.wp-block-table.siteframe-tools-table-head-sticky-sp > table { border-collapse:separate; border-spacing:0; border-inline-end:1px solid; border-block-end:1px solid; }
.wp-block-table.siteframe-tools-table-sticky-first > table :is(th,td),
.wp-block-table.siteframe-tools-table-head-sticky > table :is(th,td),
.wp-block-table.siteframe-tools-table-head-sticky-sp > table :is(th,td) { border-width:1px 0 0 1px; }
.wp-block-table.siteframe-tools-table-sticky-first > table > :is(thead,tbody,tfoot) > tr > :first-child { position:sticky; inset-inline-start:0; z-index:1; background-color:var(--siteframe-table-first-bg,var(--wp--preset--color--base,#fff)); }
/* A kept-in-view header cell of the body keeps its own colour. */
.wp-block-table.siteframe-tools-table-sticky-first[style*="--siteframe-table-body-th-bg"] > table > :is(tbody,tfoot) > tr > th:first-child { background-color:var(--siteframe-table-body-th-bg); }
/* The sticky top-left cell belongs to the header row when that row has a colour. */
.wp-block-table.siteframe-tools-table-sticky-first[style*="--siteframe-table-head-bg"] > table > thead > tr > :first-child { background-color:var(--siteframe-table-head-bg); }

/* Keep the header row in view, with position:sticky and no script.
   A sticky cell sticks to its nearest scroll container. Core gives every table
   figure overflow-x:auto, which would make the figure that container and the
   header would never stick, so a figure that does not scroll sideways at that
   width lets its content overflow instead. A figure that does scroll sideways
   stays the scroll container: it gets a height limit, a long table scrolls
   inside it, and the header row sticks to the top of that box. Short tables
   never reach the limit and look the same as before.
   The page offset follows the admin bar, which is only fixed above 600px;
   a theme with a fixed header sets --siteframe-table-head-top to its height. */
.wp-block-table.siteframe-tools-table-head-sticky:where(:not(.siteframe-tools-table-scroll):not(.siteframe-tools-table-scroll-sp)) { overflow:visible; }
.wp-block-table.siteframe-tools-table-head-sticky.siteframe-tools-table-scroll > table > thead > tr > * { top:0; }
.wp-block-table.siteframe-tools-table-head-sticky.siteframe-tools-table-scroll { max-height:var(--siteframe-table-max-height,75vh); max-height:var(--siteframe-table-max-height,75svh); overflow:auto; }
.wp-block-table.siteframe-tools-table-head-sticky > table > thead > tr > * { position:sticky; top:var(--siteframe-table-head-top,var(--wp-admin--admin-bar--height,0px)); z-index:2; background-color:var(--siteframe-table-head-bg,var(--wp--preset--color--base,#fff)); }
@media (min-width:601px) {
 .wp-block-table.siteframe-tools-table-head-sticky.siteframe-tools-table-scroll-sp { overflow:visible; }
}
@media (max-width:600px) {
 .wp-block-table.siteframe-tools-table-head-sticky-sp:where(:not(.siteframe-tools-table-scroll):not(.siteframe-tools-table-scroll-sp)) { overflow:visible; }
 .wp-block-table.siteframe-tools-table-head-sticky-sp > table > thead > tr > * { position:sticky; top:var(--siteframe-table-head-top,0px); z-index:2; background-color:var(--siteframe-table-head-bg,var(--wp--preset--color--base,#fff)); }
 .wp-block-table.siteframe-tools-table-head-sticky > table > thead > tr > * { top:var(--siteframe-table-head-top,0px); }
 .wp-block-table:is(.siteframe-tools-table-head-sticky,.siteframe-tools-table-head-sticky-sp):is(.siteframe-tools-table-scroll,.siteframe-tools-table-scroll-sp) { max-height:var(--siteframe-table-max-height,75vh); max-height:var(--siteframe-table-max-height,75svh); overflow:auto; }
 .wp-block-table:is(.siteframe-tools-table-head-sticky,.siteframe-tools-table-head-sticky-sp):is(.siteframe-tools-table-scroll,.siteframe-tools-table-scroll-sp) > table > thead > tr > * { top:0; }
}
/* The KUMITATE parent theme always has a sticky site header. Its height
   changes with the screen and the child theme and CSS cannot measure it, so
   the header row of a table stops 6rem lower, which is the parent theme's own
   header height on phones and on wide screens. A theme that knows its exact
   header height sets --siteframe-table-head-top. Inside a scroll box the
   header row sticks to the top of the box instead, as set further up. */
.siteframe-base-sticky-header .wp-block-table.siteframe-tools-table-head-sticky > table > thead > tr > * { top:var(--siteframe-table-head-top,calc(var(--wp-admin--admin-bar--height,0px) + 6rem)); }
.siteframe-base-sticky-header .wp-block-table.siteframe-tools-table-head-sticky.siteframe-tools-table-scroll > table > thead > tr > * { top:0; }
@media (max-width:600px) {
 /* The admin bar scrolls away on phones, and so does its offset. */
 .siteframe-base-sticky-header .wp-block-table:is(.siteframe-tools-table-head-sticky,.siteframe-tools-table-head-sticky-sp) > table > thead > tr > * { top:var(--siteframe-table-head-top,6rem); }
 .siteframe-base-sticky-header .wp-block-table:is(.siteframe-tools-table-head-sticky,.siteframe-tools-table-head-sticky-sp):is(.siteframe-tools-table-scroll,.siteframe-tools-table-scroll-sp) > table > thead > tr > * { top:0; }
}
/* A table with its own background keeps it behind the stuck header row. */
.wp-block-table:is(.siteframe-tools-table-head-sticky,.siteframe-tools-table-head-sticky-sp) > table.has-background > thead,
.wp-block-table:is(.siteframe-tools-table-head-sticky,.siteframe-tools-table-head-sticky-sp) > table.has-background > thead > tr { background-color:inherit; }
.wp-block-table:is(.siteframe-tools-table-head-sticky,.siteframe-tools-table-head-sticky-sp) > table.has-background > thead > tr > * { background-color:var(--siteframe-table-head-bg,inherit); }
/* Where the header row and the first column are both kept in view, the corner stays on top. */
.wp-block-table.siteframe-tools-table-sticky-first:is(.siteframe-tools-table-head-sticky,.siteframe-tools-table-head-sticky-sp) > table > thead > tr > :first-child { z-index:3; }

/* Center every cell; a cell with its own alignment keeps it. Or only across, or only down. */
.wp-block-table.siteframe-tools-table-center > table :is(th,td):not([class*="has-text-align"]):not([data-align]) { text-align:center; vertical-align:middle; }
.wp-block-table.siteframe-tools-table-center-x > table :is(th,td):not([class*="has-text-align"]):not([data-align]) { text-align:center; }
.wp-block-table.siteframe-tools-table-center-y > table :is(th,td) { vertical-align:middle; }
/* Center the header row text only. */
.wp-block-table.siteframe-tools-table-head-center > table > thead > tr > :not([class*="has-text-align"]):not([data-align]) { text-align:center; }

/* A minimum width for every column, as a share of the visible table width.
   A percentage min-width on a table cell is ignored by browsers, so the figure
   becomes a size container and the cells use container units, which are a
   real minimum: a column with more text still takes the rest. With core's
   "Fixed width table cells" the browser ignores min-width too and shares the
   width out by the cells' width, so there the cells get a width instead; the
   columns stay equal and the table scrolls when they no longer fit.
   Tables aligned left, right or centre size to their content and cannot be
   containers, so they are left alone; so are browsers without container
   queries. :where() keeps these rules weaker than the first column width. */
.wp-block-table:is(.siteframe-tools-table-col-min-10,.siteframe-tools-table-col-min-20,.siteframe-tools-table-col-min-30):where(:not(.alignleft):not(.alignright):not(.aligncenter)) { container-type:inline-size; }
.wp-block-table.siteframe-tools-table-col-min-10:where(:not(.alignleft):not(.alignright):not(.aligncenter)) > table > * > tr > * { min-width:10cqi; }
.wp-block-table.siteframe-tools-table-col-min-20:where(:not(.alignleft):not(.alignright):not(.aligncenter)) > table > * > tr > * { min-width:20cqi; }
.wp-block-table.siteframe-tools-table-col-min-30:where(:not(.alignleft):not(.alignright):not(.aligncenter)) > table > * > tr > * { min-width:30cqi; }
.wp-block-table.siteframe-tools-table-col-min-10:where(:not(.alignleft):not(.alignright):not(.aligncenter)) > table:where(.has-fixed-layout) > * > tr > * { width:10cqi; }
.wp-block-table.siteframe-tools-table-col-min-20:where(:not(.alignleft):not(.alignright):not(.aligncenter)) > table:where(.has-fixed-layout) > * > tr > * { width:20cqi; }
.wp-block-table.siteframe-tools-table-col-min-30:where(:not(.alignleft):not(.alignright):not(.aligncenter)) > table:where(.has-fixed-layout) > * > tr > * { width:30cqi; }

/* Block style "Simple lines": horizontal rules only, a heavier one under the header. */
.wp-block-table.is-style-siteframe-simple > table { border-block-start:1px solid; }
.wp-block-table.is-style-siteframe-simple > table :is(th,td) { border-inline-width:0; border-block-start-width:0; }
.wp-block-table.is-style-siteframe-simple > table > thead > tr > * { border-block-end-width:2px; }

/* Cell marks for comparison tables. The span at the start of a cell holds a
   symbol and the background colour (a core palette class or an inline colour);
   its ::before spreads that colour over the whole cell. The spread needs the
   cell itself to be positioned, which needs :has(), so without :has() only the
   symbol is coloured and nothing else on the page is touched. */
.siteframe-tools-cell { display:inline-block; font-weight:700; line-height:1; }
.siteframe-tools-cell[data-mark] { font-size:1.5em; margin-inline-end:.25em; vertical-align:middle; }
.siteframe-tools-cell[data-size="large"] { font-size:2.25em; }
.siteframe-tools-cell:only-child { margin-inline-end:0; }
/* Descendant, not child, selectors: in the editor the span sits inside the
   cell's editable element, and the preview should match the page. */
@supports selector(:has(a)) {
 .wp-block-table :is(td,th):has(.siteframe-tools-cell) { position:relative; z-index:0; }
 .wp-block-table :is(td,th):has(.siteframe-tools-cell) .siteframe-tools-cell { position:static; }
 .wp-block-table :is(td,th):has(.siteframe-tools-cell) .siteframe-tools-cell::before { content:""; position:absolute; inset:0; background-color:inherit; z-index:-1; pointer-events:none; }
 /* White text chosen for the mark applies to the rest of the cell as well. */
 .wp-block-table :is(td,th):has(.siteframe-tools-cell[style*="color:#fff"]) { color:#fff; }
 .wp-block-table :is(td,th):has(.siteframe-tools-cell[data-mark]:only-child):not([class*="has-text-align"]):not([data-align]) { text-align:center; vertical-align:middle; }
}

/* Stack cells on phones instead of scrolling. Cells keep their own borders
   except the top one, so stacked cells do not double up. */
@media (max-width:600px) {
 .wp-block-table.siteframe-tools-table-stack > table,
 .wp-block-table.siteframe-tools-table-stack > table > *,
 .wp-block-table.siteframe-tools-table-stack > table > * > tr,
 .wp-block-table.siteframe-tools-table-stack > table > * > tr > * { display:block; width:100%; min-width:0; box-sizing:border-box; }
 .wp-block-table.siteframe-tools-table-stack > table { border-block-start:1px solid; }
 .wp-block-table.siteframe-tools-table-stack > table > * > tr > * { border-block-start-width:0; }
 /* Stacked cells are not kept in view: a stuck header over stacked cells would hide them. */
 .wp-block-table.siteframe-tools-table-stack > table > thead > tr > * { position:static; }
}