/*
Theme Name: BSides Delaware
Theme URI: https://bsidesdelaware.com/
Author: Security BSides Delaware
Author URI: https://bsidesdelaware.com/
Description: Dark, terminal-flavoured child theme of Twenty Twenty-Two. Palette sampled from the BSidesDE robot key art. Colour, type and layout live in theme.json; this file holds only what theme.json cannot express.
Template: twentytwentytwo
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.7
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bsidesde-child
*/

/* ============================================================
   theme.json already sets palette, type, links, buttons, tables,
   quotes, code and captions. Everything below is the stuff the
   spec has no field for: the // section bar, table striping,
   the sponsor logo card, and the print stylesheet.
   ============================================================ */

:root {
	--bsde-bg:     var(--wp--preset--color--bg,        #0A0A0A);
	--bsde-panel:  var(--wp--preset--color--panel,     #121212);
	--bsde-panel2: var(--wp--preset--color--panel-alt, #181818);
	--bsde-deep:   var(--wp--preset--color--deep,      #11201B);
	--bsde-line:   var(--wp--preset--color--line,      #2C2C2C);
	--bsde-lime:   var(--wp--preset--color--lime,      #CBDB2A);
	--bsde-orange: var(--wp--preset--color--orange,    #F05023);
	--bsde-teal:   var(--wp--preset--color--teal,      #49AD8D);
	--bsde-text:   var(--wp--preset--color--text,      #D8DDD9);
	--bsde-muted:  var(--wp--preset--color--muted,     #8B9490);
	--bsde-mono:   var(--wp--preset--font-family--bsides-mono, ui-monospace, monospace);
}

/* Kill the flash of white before styles resolve. */
html { background: var(--bsde-bg); }

/* Selection in brand colours rather than the browser's blue. */
::selection { background: var(--bsde-lime); color: #000; }

/* Visible focus ring. The dark palette makes the default one nearly invisible,
   which is a real accessibility regression, not a cosmetic one. */
:where(a, button, input, select, textarea, .wp-block-button__link):focus-visible {
	outline: 3px solid var(--bsde-orange);
	outline-offset: 2px;
}

/* ---------- Section bar: the signature component ----------
   Apply with the "Section bar" block style on any heading.
   The // prefix is generated, so it never has to be typed. */
.is-style-bsde-section-bar {
	background: var(--bsde-deep);
	border-left: 6px solid var(--bsde-lime);
	border-top: 1px solid #1E3229;
	border-bottom: 1px solid #1E3229;
	padding: 0.6em 0.8em;
	margin-block: 2.5rem 1.25rem;
	letter-spacing: 0.06em;
}
.is-style-bsde-section-bar::before {
	content: "// ";
	color: var(--bsde-orange);
}

/* ---------- Callout card ----------
   Apply the "Callout" block style to a Group. */
.is-style-bsde-callout {
	background: var(--bsde-panel);
	border: 1px solid var(--bsde-line);
	border-left: 5px solid var(--bsde-lime);
	padding: 1.4rem 1.6rem;
}
.is-style-bsde-callout > :first-child { margin-top: 0; }
.is-style-bsde-callout > :last-child  { margin-bottom: 0; }
.is-style-bsde-callout.has-teal-color,
.is-style-bsde-callout.has-teal-border-color   { border-left-color: var(--bsde-teal); }
.is-style-bsde-callout.has-orange-color,
.is-style-bsde-callout.has-orange-border-color { border-left-color: var(--bsde-orange); }

/* ---------- Sponsor logo card ----------
   A light panel, on purpose. Sponsor logos are supplied as black artwork and
   must reproduce exactly as given; recolouring someone else's mark to fit our
   palette is not ours to do. Apply "Sponsor card" to a Group or Gallery. */
.is-style-bsde-sponsor-card {
	background: var(--wp--preset--color--paper, #F4F4F1);
	border: 2px solid var(--bsde-lime);
	padding: 2.25rem 1.5rem;
}
.is-style-bsde-sponsor-card img {
	max-height: 72px;
	width: auto;
	object-fit: contain;
}
.is-style-bsde-sponsor-card figcaption { color: #444; }

/* ---------- Tables: striped, mono figures ---------- */
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table th {
	background: var(--bsde-deep);
	color: var(--bsde-lime);
	font-family: var(--bsde-mono);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8rem;
	text-align: left;
}
.wp-block-table th,
.wp-block-table td {
	border: 1px solid var(--bsde-line);
	padding: 0.7rem 0.9rem;
}
.wp-block-table tbody tr:nth-child(odd)  td { background: var(--bsde-panel); }
.wp-block-table tbody tr:nth-child(even) td { background: var(--bsde-panel2); }
/* Numbers, prices and dates are always monospace. */
.wp-block-table td:has(> strong:only-child) { font-family: var(--bsde-mono); }

/* ---------- Lists: the house triangle, never a round dot ---------- */
.entry-content ul:not(.wp-block-navigation):not([class*="wp-block-"]) { list-style: none; padding-left: 1.2em; }
.entry-content ul:not(.wp-block-navigation):not([class*="wp-block-"]) > li { position: relative; }
.entry-content ul:not(.wp-block-navigation):not([class*="wp-block-"]) > li::before {
	content: "\25B8";                 /* ▸ */
	color: var(--bsde-lime);
	position: absolute;
	left: -1.2em;
}

/* ---------- Inline code ---------- */
:not(pre) > code {
	font-family: var(--bsde-mono);
	background: var(--bsde-panel);
	border: 1px solid var(--bsde-line);
	color: var(--bsde-lime);
	padding: 0.1em 0.4em;
	font-size: 0.9em;
}

/* ---------- Images sit on black with room around them ---------- */
.wp-block-image img { display: block; }

/* ---------- Print ----------
   The site is black. Paper is not. Without this, printing a page burns a
   toner cartridge and still comes out muddy, so the whole thing inverts. */
@media print {
	html, body,
	.wp-block-table th,
	.wp-block-table td,
	.wp-block-table tbody tr:nth-child(odd) td,
	.wp-block-table tbody tr:nth-child(even) td,
	.is-style-bsde-callout,
	.is-style-bsde-section-bar {
		background: #fff !important;
		color: #111 !important;
	}
	h1, h2, h3, h4, h5, h6,
	.is-style-bsde-section-bar { color: #111 !important; }
	.is-style-bsde-section-bar { border-left: 6px solid #CBDB2A !important; }
	a { color: #111 !important; text-decoration: underline; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
	.wp-block-table th { background: #eee !important; color: #111 !important; }
	nav, .wp-block-navigation, footer .wp-block-social-links { display: none !important; }
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   LIGHT MODE  [data-theme="light"]
   ------------------------------------------------------------
   NOT an invert filter. Inverting would be worse than doing
   nothing: measured against light paper (#F4F4F1), lime lands at
   1.39:1, teal 2.49:1 and orange 3.24:1 — all three fail WCAG AA
   badly, and lime becomes effectively invisible. So light mode
   gets its own palette with darkened accents that clear 4.5:1,
   while the *identity* survives by inverting the components
   instead of the colours: the table header goes near-black with
   lime type, and the buttons keep their lime fill (black on lime
   is 13.7:1, which is the one thing that works in both modes).
   ============================================================ */
:root[data-theme="light"],
html[data-theme="light"] {
	--wp--preset--color--bg:        #F4F4F1;
	--wp--preset--color--panel:     #FFFFFF;
	--wp--preset--color--panel-alt: #F0F0EC;
	--wp--preset--color--deep:      #14181A;  /* header rows stay dark, lime type pops */
	--wp--preset--color--line:      #D5D5CF;
	--wp--preset--color--text:      #1A1E1C;  /* 15.3:1 */
	--wp--preset--color--muted:     #556059;  /*  5.9:1 */
	--wp--preset--color--paper:     #FFFFFF;

	/* accents, darkened until they pass on paper */
	--bsde-link:      #186A52;  /* 5.9:1  (teal, deepened) */
	--bsde-accent:    #B23513;  /* 5.6:1  (orange, deepened) */
	--bsde-heading:   #1A1E1C;  /* 15.3:1 */
	--bsde-purple-tx: #6B3470;  /* 8.1:1 */

	--bsde-bg:var(--wp--preset--color--bg);
	--bsde-panel:var(--wp--preset--color--panel);
	--bsde-panel2:var(--wp--preset--color--panel-alt);
	--bsde-deep:var(--wp--preset--color--deep);
	--bsde-line:var(--wp--preset--color--line);
	--bsde-text:var(--wp--preset--color--text);
	--bsde-muted:var(--wp--preset--color--muted);
	color-scheme: light;
}
[data-theme="light"] body { background: var(--bsde-bg); color: var(--bsde-text); }
[data-theme="light"] h1,
[data-theme="light"] h2 { color: var(--bsde-heading); }
[data-theme="light"] h3,
[data-theme="light"] h4 { color: var(--bsde-link); }
[data-theme="light"] a  { color: var(--bsde-link); }
[data-theme="light"] a:hover,
[data-theme="light"] a:focus { color: var(--bsde-accent); }

/* Section bar keeps its shape: panel fill, lime rule, dark type. */
[data-theme="light"] .is-style-bsde-section-bar {
	background: #EAEAE6;
	border-top-color: #DCDCD6;
	border-bottom-color: #DCDCD6;
	color: var(--bsde-heading);
}
[data-theme="light"] .is-style-bsde-section-bar::before { color: var(--bsde-accent); }

[data-theme="light"] .is-style-bsde-callout {
	background: #FFFFFF;
	border-color: var(--bsde-line);
}
[data-theme="light"] .is-style-bsde-callout h4 { color: var(--bsde-link); }

/* Table header stays dark with lime type. This is what carries the brand
   across the flip, and lime on near-black is 12.9:1. */
[data-theme="light"] .wp-block-table th { background: #14181A; color: var(--bsde-lime); }
[data-theme="light"] .wp-block-table td { color: var(--bsde-text); }
[data-theme="light"] :not(pre) > code {
	background: #EEF0E6; color: #3F4A12; border-color: #D5D5CF;
}
/* The lime triangle survives on paper as a marker, but it is decoration,
   never text, so its contrast is not load-bearing. */
[data-theme="light"] .entry-content ul > li::before { color: #8A9612; }
[data-theme="light"] ::selection { background: var(--bsde-lime); color: #000; }

/* ---------- The toggle itself ---------- */
.bsde-theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-family: var(--bsde-mono);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bsde-text);
	background: transparent;
	border: 1px solid var(--bsde-line);
	border-radius: 0;
	padding: .5rem .8rem;
	cursor: pointer;
	line-height: 1;
}
.bsde-theme-toggle:hover {
	color: var(--bsde-lime);
	border-color: var(--bsde-lime);
}
[data-theme="light"] .bsde-theme-toggle:hover {
	color: var(--bsde-link);
	border-color: var(--bsde-link);
}
.bsde-theme-toggle:focus-visible {
	outline: 3px solid var(--bsde-orange);
	outline-offset: 2px;
}
@media print { .bsde-theme-toggle { display: none !important; } }

/* ============================================================
   MOBILE
   ------------------------------------------------------------
   Tested with a real browser at 320/360/390/414/768. The two
   things that actually broke:

   1. TABLES. A four-column tier table cannot fit a 320px screen,
      and a table that will not fit pushes the whole PAGE sideways.
      That is the classic mobile killer: every section on the site
      then scrolls horizontally because of one table. The fix is to
      let the table scroll inside its own box rather than dragging
      the document with it.
   2. LONG UNBROKEN STRINGS. Monospace email addresses and URLs do
      not wrap at a hyphen, so they punch out of their container.
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }

/* Nothing gets to be wider than the screen. */
img, svg, video, iframe, pre { max-width: 100%; height: auto; }

/* sponsor@bsidesdelaware.com is 26 monospace characters and will not
   break on its own. Let it. */
body { overflow-wrap: break-word; }
a[href^="mailto:"], a[href^="http"], code { overflow-wrap: anywhere; }

/* --- Tables scroll inside themselves, not across the page --- */
.wp-block-table {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	/* NO max-width here. WordPress constrains blocks with
	     :where(.is-layout-constrained) > :where(...) { max-width: <contentSize> }
	   which has ZERO specificity by design, so themes can override it. Setting
	   max-width:100% (0,1,0) beat it and every table broke out of the content
	   column to the full width of the viewport. display:block + overflow-x is
	   all that is needed; the figure then sits inside the column and the table
	   scrolls within it. */
}
.wp-block-table > table { min-width: 34rem; }   /* below this it is unreadable anyway; scroll instead */

@media (max-width: 600px) {
	.wp-block-table th,
	.wp-block-table td { padding: .55rem .65rem; font-size: .9rem; }
	/* A visible edge, so it is obvious the table scrolls rather than being cut off. */
	.wp-block-table { border-right: 1px dashed var(--bsde-line); }
}

/* --- Touch targets. WCAG 2.5.8 wants 24px; Apple's HIG wants 44px.
       Inline links inside a sentence are exempt and are left alone. --- */
@media (pointer: coarse) {
	.wp-block-navigation a,
	.wp-block-button__link,
	.bsde-theme-toggle {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

/* --- The toggle must survive the mobile nav collapse ---
   Twenty Twenty-Two folds its navigation into a hamburger overlay on small
   screens. The toggle is injected as a sibling of that container, not inside
   it, so it stays on the bar where a thumb can reach it instead of being
   buried behind a menu tap. */
.bsde-theme-toggle { flex: 0 0 auto; }
@media (max-width: 600px) {
	.bsde-theme-toggle { padding: .5rem .6rem; font-size: .72rem; }
}

/* Buttons go full width on a phone rather than sitting as two orphaned
   half-width taps. */
@media (max-width: 480px) {
	.wp-block-buttons { flex-direction: column; align-items: stretch; }
	.wp-block-button__link { width: 100%; justify-content: center; text-align: center; }
}

/* Sponsor logos stack rather than shrinking to illegibility. */
@media (max-width: 600px) {
	.is-style-bsde-sponsor-card { gap: 1.75rem; padding: 1.75rem 1rem; }
	.is-style-bsde-sponsor-card img { max-height: 48px; }
}

/* Section bars keep their shape but stop eating the screen. */
@media (max-width: 600px) {
	.is-style-bsde-section-bar { padding: .55em .65em; margin-block: 2rem 1rem; }
	.is-style-bsde-callout { padding: 1.1rem 1.15rem; }
}

/* The UA stylesheet gives <figure> a 40px side margin. On a 320px phone that is
   80px of the screen gone, which is a quarter of it. WordPress core resets this
   for most blocks, but not reliably once the figure is display:block, so pin it. */
.wp-block-table,
.wp-block-image { margin-left: 0; margin-right: 0; }

/* ---------- Site logo ----------
   The logo file already on the site is the WHITE lockup, which was doing
   nothing useful on a light header. On black it is exactly right. */
.wp-block-site-logo img { max-height: 46px; width: auto; }
@media (max-width: 600px) { .wp-block-site-logo img { max-height: 36px; } }

/* In light mode a white logo would vanish, so drop it onto a dark chip
   rather than shipping a second logo file. */
[data-theme="light"] .wp-block-site-logo {
	background: #0A0A0A;
	padding: .45rem .7rem;
	display: inline-block;
	line-height: 0;
}

/* ============================================================
   NAVIGATION
   ------------------------------------------------------------
   Two states, two meanings:
     lime box    = the page you are on (.current-menu-item,
                   which WordPress moves for you)
     orange      = the thing under your cursor
   Sponsorship gets no special treatment. A permanent box on one
   link reads as a stuck active-state, which is what it was.
   ============================================================ */

.wp-block-navigation .wp-block-navigation-item__content {
	font-family: var(--bsde-mono);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: .82rem;
	font-weight: 600;
	padding: .5rem .75rem;
	border: 1px solid transparent;   /* reserved, so nothing shifts on hover */
	text-decoration: none;
	transition: border-color .12s ease, color .12s ease;
}

/* You are here. Filled, not outlined. Black on lime is 13.7:1 and is the one
   pairing that holds in both light and dark mode, so it needs no second rule. */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current_page_item > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	background: var(--bsde-lime);
	border-color: var(--bsde-lime);
	color: #000 !important;
}
/* Hovering the page you are already on: orange fill, so it still answers. */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation .current_page_item > .wp-block-navigation-item__content:hover,
.wp-block-navigation .current_page_item > .wp-block-navigation-item__content:focus-visible {
	background: var(--bsde-orange);
	border-color: var(--bsde-orange);
	color: #000 !important;
}

/* Hover and keyboard focus on any other item. Orange, matching every link on the site. */
.wp-block-navigation li:not(.current-menu-item):not(.current_page_item) > .wp-block-navigation-item__content:hover,
.wp-block-navigation li:not(.current-menu-item):not(.current_page_item) > .wp-block-navigation-item__content:focus-visible {
	color: var(--bsde-orange) !important;
	border-color: var(--bsde-orange);
}

/* Light mode: orange at 3.2:1 and lime at 1.4:1 both fail on paper,
   so both borrow their deepened variants. */
:root[data-theme="light"] .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
:root[data-theme="light"] .wp-block-navigation .current_page_item > .wp-block-navigation-item__content {
	background: var(--bsde-lime);
	border-color: var(--bsde-lime);
	color: #000 !important;
}
:root[data-theme="light"] .wp-block-navigation .wp-block-navigation-item__content:hover,
:root[data-theme="light"] .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	color: var(--bsde-accent) !important;
	border-color: var(--bsde-accent);
}

.wp-block-navigation__container { align-items: center; row-gap: .5rem; }

@media (max-width: 900px) {
	.wp-block-navigation .wp-block-navigation-item__content {
		font-size: .76rem;
		padding: .45rem .6rem;
	}
}

/* ---------- Logo plate ----------
   A sponsor logo supplied as black-on-transparent is invisible on a black page.
   JPMorganChase's official file is exactly that. Apply this style to the image
   and it gets its own light plate. Same principle as the sponsor card, for when
   grouping the logos is not worth the trouble. */
.wp-block-image.is-style-bsde-logo-plate {
	background: var(--wp--preset--color--paper, #F4F4F1);
	border: 2px solid var(--bsde-lime);
	padding: 1.5rem 2rem;
	display: inline-block;
	line-height: 0;
}
.wp-block-image.is-style-bsde-logo-plate img { max-height: 72px; width: auto; }

/* ---------- Typography, belt and braces ----------
   theme.json carries all of this, but styles.elements.heading needs WP 6.1+ and
   the block-level site-title style needs 6.0+. Neither degrades loudly — they
   just silently fall back to the parent theme's serif, which is what happened.
   These rules do not care what version WordPress is. */
h1, h2, h3, h4, h5, h6,
.wp-block-post-title,
.wp-block-site-title a {
	font-family: var(--bsde-mono);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.18;
}
.wp-block-site-title a {
	font-style: normal;            /* the parent theme sets the site title in italic serif */
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 1.05rem;
	color: var(--bsde-lime);
	text-decoration: none;
}
h1, h2, .wp-block-post-title { color: var(--bsde-lime); text-transform: uppercase; }
h3, h4 { color: var(--bsde-teal); }
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] .wp-block-post-title { color: var(--bsde-heading); }
[data-theme="light"] h3,
[data-theme="light"] h4 { color: var(--bsde-link); }

/* ============================================================
   MOBILE NAV OVERLAY
   ------------------------------------------------------------
   The hamburger overlay is a separate component from the nav bar
   and carries its own background and text colours from the parent
   theme, so it stays light while everything around it went dark.
   The Navigation block exposes overlayBackgroundColor /
   overlayTextColor as attributes, but those are set per-instance
   in the editor and are lost the moment anyone rebuilds the menu.
   Doing it in CSS means it cannot drift.
   ============================================================ */

/* The hamburger itself. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--bsde-lime) !important;
	background: transparent;
	border: 1px solid var(--bsde-line);
	padding: .5rem .6rem;
	min-height: 44px;
	min-width: 44px;
}
.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-close:hover {
	color: var(--bsde-orange) !important;
	border-color: var(--bsde-orange);
}
.wp-block-navigation__responsive-container-close {
	position: absolute;
	top: 1.2rem;
	right: 1.2rem;
}

/* The open overlay. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--bsde-bg) !important;
	color: var(--bsde-text) !important;
	padding: 5rem 1.5rem 3rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 1rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: .4rem;
	align-items: stretch;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	font-size: 1rem;
	padding: .85rem 1rem;
	color: var(--bsde-text) !important;
	border: 1px solid transparent;
	border-bottom-color: var(--bsde-line);
	min-height: 44px;
}
/* You are here, inside the overlay too. */
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .current_page_item > .wp-block-navigation-item__content {
	background: var(--bsde-lime);
	border-color: var(--bsde-lime);
	color: #000 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	color: var(--bsde-orange) !important;
	border-color: var(--bsde-orange);
}

/* Light mode. */
:root[data-theme="light"] .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--bsde-bg) !important;
	color: var(--bsde-text) !important;
}
:root[data-theme="light"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--bsde-text) !important;
}
:root[data-theme="light"] .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	background: var(--bsde-lime);
	border-color: var(--bsde-lime);
	color: #000 !important;
}
:root[data-theme="light"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--bsde-accent) !important;
	border-color: var(--bsde-accent);
}
:root[data-theme="light"] .wp-block-navigation__responsive-container-open,
:root[data-theme="light"] .wp-block-navigation__responsive-container-close {
	color: var(--bsde-link) !important;
}

/* ---------- Wide tables: make the scroll discoverable ----------
   The tier matrix is five columns and the naming-rights table is six. Neither
   fits a phone, and both already scroll inside their own box. A scrollbar you
   cannot see is a table that looks truncated, so fade the right edge to say
   "there is more this way". */
.wp-block-table {
	background:
		linear-gradient(to right, var(--bsde-bg) 30%, rgba(10,10,10,0)),
		linear-gradient(to right, rgba(10,10,10,0), var(--bsde-bg) 70%) 100% 0,
		radial-gradient(farthest-side at 0 50%, rgba(203,219,42,.25), rgba(0,0,0,0)),
		radial-gradient(farthest-side at 100% 50%, rgba(203,219,42,.25), rgba(0,0,0,0)) 100% 0;
	background-repeat: no-repeat;
	background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
	background-attachment: local, local, scroll, scroll;
}
:root[data-theme="light"] .wp-block-table {
	background:
		linear-gradient(to right, var(--bsde-bg) 30%, rgba(244,244,241,0)),
		linear-gradient(to right, rgba(244,244,241,0), var(--bsde-bg) 70%) 100% 0,
		radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.14), rgba(0,0,0,0)),
		radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.14), rgba(0,0,0,0)) 100% 0;
	background-repeat: no-repeat;
	background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
	background-attachment: local, local, scroll, scroll;
}

/* The checkmark column in the tier matrix reads better centred and in the
   accent colour than as a stray glyph in body grey. */
.wp-block-table td:not(:first-child) { text-align: center; }
.wp-block-table tfoot td { background: var(--bsde-deep) !important; color: var(--bsde-lime); }
.wp-block-table tfoot td:first-child { text-align: right; }