/* Shortcodex — Scroll Table. A modern scroll frame around the standard Table
   block: horizontal scroll on phones, optional sticky header and first column,
   zebra rows, rounded corners. Inherits the theme's fonts and text size. */

.scx-table {
	--scx-accent: var(--accent, #4b5563);
	--scx-accent-ink: var(--accent-ink, #374151);
	--scx-on-accent: #ffffff;
	--scx-surface: var(--surface, #ffffff);
	--scx-ink: var(--ink, #1b1a17);
	--scx-muted: color-mix(in srgb, var(--scx-ink) 55%, transparent);
	--scx-line: var(--line, #e6e3dc);
	--scx-radius: var(--radius, 14px);
	--scx-zebra: color-mix(in srgb, var(--scx-ink) 3%, var(--scx-surface));
	--scx-hover: color-mix(in srgb, var(--scx-accent) 9%, var(--scx-surface));
	--scx-head: color-mix(in srgb, var(--scx-accent) 8%, var(--scx-surface));
	--scx-shadow: 0 1px 2px rgba(17, 17, 20, .05), 0 14px 30px -18px rgba(17, 17, 20, .28);

	--scx-cell-py: .6em;
	--scx-cell-px: .8em;
	--scx-cell-min: 7rem;
	--scx-cap: 460px;

	box-sizing: border-box;
	margin: 1.6em 0;
	border: 1px solid var(--scx-line);
	background: var(--scx-surface);
	box-shadow: var(--scx-shadow);
	overflow: hidden;
	color: var(--scx-ink);
}
.scx-table *,
.scx-table *::before,
.scx-table *::after { box-sizing: border-box; }

.scx-table.is-rounded { border-radius: var(--scx-radius); }

/* ---- Accent schemes (header + hover only; the grid stays neutral) ---- */
.scx-table.is-blue    { --scx-accent: #2563eb; --scx-accent-ink: #1d4ed8; }
.scx-table.is-emerald { --scx-accent: #059669; --scx-accent-ink: #047857; }
.scx-table.is-violet  { --scx-accent: #7c3aed; --scx-accent-ink: #6d28d9; }
.scx-table.is-slate   { --scx-accent: #334155; --scx-accent-ink: #0f172a; }

.scx-table--compact { --scx-cell-py: .42em; --scx-cell-px: .6em; --scx-cell-min: 5.25rem; }

.scx-table.h-short  { --scx-cap: 320px; }
.scx-table.h-medium { --scx-cap: 460px; }
.scx-table.h-tall   { --scx-cap: 640px; }

/* ---- Scroll frame ---- */
.scx-table__scroll {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--scx-ink) 28%, transparent) transparent;
}

/* Touch devices paint overlay scrollbars on top of the content, so the rail
   is hidden there and the edge shades carry the scroll affordance instead.
   The rail only hides when shades can actually render — the shades toggle is
   on AND the browser supports scroll-driven animations — so there is always
   at least one scroll cue. Dragging the content remains the scroll gesture. */
@supports (animation-timeline: scroll()) {
	@media (hover: none) and (pointer: coarse) {
		.scx-table.is-shaded .scx-table__scroll { scrollbar-width: none; }
		.scx-table.is-shaded .scx-table__scroll::-webkit-scrollbar { display: none; }
	}
}
/* The vertical scroller engages only on genuinely long tables — 16 or more
   body rows. Shorter tables render full height so the page scrolls past them
   naturally and the horizontal axis stays the priority. Browsers without
   :has() never cap, which degrades to exactly that behavior. */
.scx-table.sticky-head:has(.scx-table__scroll tbody tr:nth-child(16)) .scx-table__scroll { max-height: var(--scx-cap); }

.scx-table__scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.scx-table__scroll::-webkit-scrollbar-track { background: transparent; }
.scx-table__scroll::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--scx-ink) 24%, transparent);
	border-radius: 6px;
	border: 2px solid transparent;
	background-clip: padding-box;
}
.scx-table__scroll::-webkit-scrollbar-thumb:hover {
	background: color-mix(in srgb, var(--scx-ink) 38%, transparent);
	background-clip: padding-box;
}

/* ---- The table itself: reset the core wrapper, keep semantic markup ---- */
.scx-table .scx-table__scroll .wp-block-table { margin: 0; border: 0; }
.scx-table .scx-table__scroll table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: auto;
	color: var(--scx-ink);
	/* One consistent size from the surrounding text; stops a theme from
	   sizing the header and body cells differently. */
	font-size: inherit;
	line-height: 1.5;
}
.scx-table .scx-table__scroll th,
.scx-table .scx-table__scroll td {
	font-size: 1em;
	/* Paint-only fade so the row hover glides instead of snapping; the
	   reduced-motion rule below disables it for users who ask for that. */
	transition: background-color .22s ease;
	/* The column floor adapts to the screen: short-word charts fit a phone
	   without a sideways scroller; the scroller returns only when columns
	   genuinely cannot fit. */
	min-width: min(var(--scx-cell-min), 22vw);
	padding: var(--scx-cell-py) var(--scx-cell-px);
	border: 0;
	border-bottom: 1px solid var(--scx-line);
	text-align: start;
	vertical-align: top;
	background: var(--scx-surface);
}
.scx-table .scx-table__scroll tbody tr:last-child td,
.scx-table .scx-table__scroll tbody tr:last-child th { border-bottom: 0; }

/* ---- Header ---- */
.scx-table .scx-table__scroll thead th {
	font-size: .95em;
	font-weight: 700;
	color: var(--scx-ink);
	background: var(--scx-head);
	border-bottom: 2px solid color-mix(in srgb, var(--scx-accent) 30%, var(--scx-line));
	white-space: nowrap;
}
.scx-table.head-filled .scx-table .scx-table__scroll thead th {
	color: var(--scx-on-accent);
	background: var(--scx-accent);
	border-bottom-color: color-mix(in srgb, #000 12%, var(--scx-accent));
}

/* ---- Meaningless headers, detected automatically ----
   An all-empty header row disappears; a header whose every cell repeats the
   same label renders as an ordinary row. Neither is pinned. */
.scx-table.head-empty .scx-table__scroll thead,
.scx-table.head-plain .scx-table__scroll thead { display: none; }

/* ---- Column separators (hairlines) ----
   Off by default; suits headerless chart-style tables where columns have no
   labels to anchor them. A soft hairline between columns, never at the edges. */
.scx-table.is-collines .scx-table__scroll th + th,
.scx-table.is-collines .scx-table__scroll td + td {
	border-inline-start: 1px solid color-mix(in srgb, var(--scx-ink) 5%, transparent);
}
/* High-density screens draw a true half-pixel hairline. */
@media (min-resolution: 1.5dppx) {
	.scx-table.is-collines .scx-table__scroll th + th,
	.scx-table.is-collines .scx-table__scroll td + td {
		border-inline-start-width: .5px;
	}
}

/* ---- Zebra + hover ---- */
.scx-table.is-zebra .scx-table__scroll tbody tr:nth-child(even) td,
.scx-table.is-zebra .scx-table__scroll tbody tr:nth-child(even) th { background: var(--scx-zebra); }
.scx-table.is-hover .scx-table__scroll tbody tr:hover td,
.scx-table.is-hover .scx-table__scroll tbody tr:hover th { background: var(--scx-hover); }

/* ---- Sticky header row ---- */
.scx-table.sticky-head .scx-table .scx-table__scroll thead th {
	position: sticky;
	top: 0;
	z-index: 2;
}

/* ---- Sticky first column ---- */
.scx-table.sticky-col .scx-table__scroll tbody tr > :first-child,
.scx-table.sticky-col .scx-table__scroll thead tr > :first-child {
	position: sticky;
	inset-inline-start: 0;
	background: var(--scx-surface);
	box-shadow: 6px 0 8px -8px rgba(17, 17, 20, .4);
}
[dir="rtl"] .scx-table.sticky-col .scx-table__scroll tbody tr > :first-child,
[dir="rtl"] .scx-table.sticky-col .scx-table__scroll thead tr > :first-child {
	box-shadow: -6px 0 8px -8px rgba(17, 17, 20, .4);
}
.scx-table.sticky-col .scx-table__scroll tbody tr > :first-child { z-index: 1; }
.scx-table.sticky-col .scx-table__scroll thead tr > :first-child { z-index: 3; background: var(--scx-head); }
.scx-table.sticky-col.head-filled .scx-table__scroll thead tr > :first-child { background: var(--scx-accent); }
.scx-table.sticky-col.is-zebra .scx-table__scroll tbody tr:nth-child(even) > :first-child { background: var(--scx-zebra); }
.scx-table.sticky-col.is-hover .scx-table__scroll tbody tr:hover > :first-child { background: var(--scx-hover); }

/* ---- Floating first column (col-float, with sticky-col) ----
   The column overlays while the reader scrolls, then fades out after a pause
   so the data beneath is unobstructed. The is-scrolling / is-stuck classes
   come from the block's small view script; without JavaScript the column
   simply behaves as always-sticky. Keyboard focus always reveals it. */
.scx-table.col-float .scx-table__scroll tbody tr > :first-child,
.scx-table.col-float .scx-table__scroll thead tr > :first-child {
	transition: opacity .35s ease;
}
.scx-table.col-float.is-stuck:not(.is-scrolling):not(:focus-within) .scx-table__scroll tbody tr > :first-child,
.scx-table.col-float.is-stuck:not(.is-scrolling):not(:focus-within) .scx-table__scroll thead tr > :first-child {
	opacity: 0;
	pointer-events: none;
}

/* ---- Caption (from the core table) ---- */
.scx-table .scx-table__scroll .wp-block-table figcaption,
.scx-table .scx-table__scroll table caption {
	padding: .6em var(--scx-cell-px);
	font-size: .85em;
	color: var(--scx-muted);
	text-align: start;
	background: var(--scx-surface);
}

/* ---- Ad & foreign-element isolation ---- */
.scx-table ins.adsbygoogle,
.scx-table [id*="google_ads"],
.scx-table [class*="ad-inserter"],
.scx-table [class*="adinserter"],
.scx-table [data-ad] { display: none !important; }

/* ---- Dark mode — used when Color mode is Theme and the site is dark. ---- */
:where( [data-theme="dark"], [data-color-scheme="dark"], [data-mode="dark"], html.dark, .dark-mode, .is-dark, .is-dark-theme, .wp-dark-mode-active, body.dark, .theme-dark, .darkmode--activated ) .scx-table {
	--scx-surface: #1e1c18;
	--scx-ink: #f0ece4;
	--scx-line: #38332e;
	--scx-zebra: color-mix(in srgb, #ffffff 4%, #1e1c18);
	--scx-hover: color-mix(in srgb, var(--scx-accent) 22%, #1e1c18);
	--scx-head: color-mix(in srgb, var(--scx-accent) 20%, #1e1c18);
	--scx-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 34px -20px rgba(0, 0, 0, .7);
}
@media (prefers-color-scheme: dark) {
	.scx-table {
		--scx-surface: #1e1c18;
		--scx-ink: #f0ece4;
		--scx-line: #38332e;
		--scx-zebra: color-mix(in srgb, #ffffff 4%, #1e1c18);
		--scx-hover: color-mix(in srgb, var(--scx-accent) 22%, #1e1c18);
		--scx-head: color-mix(in srgb, var(--scx-accent) 20%, #1e1c18);
		--scx-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 34px -20px rgba(0, 0, 0, .7);
	}
}

/* ---- Per-block color mode override (default Light) ---- */
.scx-table[data-scx-mode="dark"] {
	--scx-surface: #1e1c18;
	--scx-ink: #f0ece4;
	--scx-line: #38332e;
	--scx-zebra: color-mix(in srgb, #ffffff 4%, #1e1c18);
	--scx-hover: color-mix(in srgb, var(--scx-accent) 22%, #1e1c18);
	--scx-head: color-mix(in srgb, var(--scx-accent) 20%, #1e1c18);
	--scx-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 34px -20px rgba(0, 0, 0, .7);
}
.scx-table[data-scx-mode="light"] {
	--scx-surface: #ffffff;
	--scx-ink: #1b1a17;
	--scx-line: #e6e3dc;
	--scx-zebra: color-mix(in srgb, var(--scx-ink) 3%, #ffffff);
	--scx-hover: color-mix(in srgb, var(--scx-accent) 9%, #ffffff);
	--scx-head: color-mix(in srgb, var(--scx-accent) 8%, #ffffff);
	--scx-shadow: 0 1px 2px rgba(17, 17, 20, .05), 0 14px 30px -18px rgba(17, 17, 20, .28);
}
@media (prefers-color-scheme: dark) {
	.scx-table[data-scx-mode="light"] {
		--scx-surface: #ffffff;
		--scx-ink: #1b1a17;
		--scx-line: #e6e3dc;
		--scx-zebra: color-mix(in srgb, var(--scx-ink) 3%, #ffffff);
		--scx-hover: color-mix(in srgb, var(--scx-accent) 9%, #ffffff);
		--scx-head: color-mix(in srgb, var(--scx-accent) 8%, #ffffff);
	}
}
[data-theme="dark"] .scx-table[data-scx-mode="light"] {
	--scx-surface: #ffffff;
	--scx-ink: #1b1a17;
	--scx-line: #e6e3dc;
	--scx-zebra: color-mix(in srgb, var(--scx-ink) 3%, #ffffff);
	--scx-hover: color-mix(in srgb, var(--scx-accent) 9%, #ffffff);
	--scx-head: color-mix(in srgb, var(--scx-accent) 8%, #ffffff);
}

/* ---- Phones: hug the content ---- */
@media (max-width: 640px) {
	.scx-table { margin: 1.2em 0; --scx-cell-py: .5em; --scx-cell-px: .55em; }
	.scx-table--compact { --scx-cell-py: .4em; --scx-cell-px: .45em; }
}

/* ---- Reduced motion / print ---- */
@media (prefers-reduced-motion: reduce) {
	.scx-table, .scx-table * { transition: none !important; scroll-behavior: auto !important; }
}
@media print {
	.scx-table { box-shadow: none; break-inside: avoid; }
	.scx-table__scroll { overflow: visible; max-height: none; }
	.scx-table.sticky-head .scx-table__scroll thead th,
	.scx-table.sticky-col .scx-table__scroll tr > :first-child { position: static; }
}

/* ---- Scroll edge shades (zero-JS scroll affordance) ----
   A soft shade sits on whichever side still has content to scroll, driven by
   CSS scroll-driven animations: it fades out as that end is reached, and never
   appears when the table doesn't overflow. Browsers without support simply
   show no shades. */
.scx-table { position: relative; --scx-shade: rgba(15, 15, 18, .16); }
[dir="rtl"] .scx-table { --scx-shade-dir-end: left; --scx-shade-dir-start: right; }
[data-theme="dark"] .scx-table,
.scx-table[data-scx-mode="dark"] { --scx-shade: rgba(0, 0, 0, .5); }
@media (prefers-color-scheme: dark) {
	.scx-table:not([data-scx-mode="light"]) { --scx-shade: rgba(0, 0, 0, .5); }
}

@supports (animation-timeline: scroll()) {
	.scx-table.is-shaded { timeline-scope: --scx-x; }
	.scx-table.is-shaded .scx-table__scroll { scroll-timeline: --scx-x inline; }

	.scx-table.is-shaded::before,
	.scx-table.is-shaded::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		width: 26px;
		pointer-events: none;
		z-index: 4;
		opacity: 0;
	}
	.scx-table.is-shaded::before {
		inset-inline-start: 0;
		background: linear-gradient(to var(--scx-shade-dir-end, right), var(--scx-shade), transparent);
		animation: scx-shade-start auto linear both;
		animation-timeline: --scx-x;
	}
	.scx-table.is-shaded::after {
		inset-inline-end: 0;
		background: linear-gradient(to var(--scx-shade-dir-start, left), var(--scx-shade), transparent);
		animation: scx-shade-end auto linear both;
		animation-timeline: --scx-x;
	}
}

@keyframes scx-shade-start {
	from { opacity: 0; }
	8%, to { opacity: 1; }
}
@keyframes scx-shade-end {
	from, 92% { opacity: 1; }
	to { opacity: 0; }
}

@media print {
	.scx-table.is-shaded::before,
	.scx-table.is-shaded::after { display: none; }
}