/* Electrochemical Techniques capability matrix. Required from
   GamryContentPageController::init() when PageMode() is 'matrix'. Layered over
   GamryContentPage.css, which supplies the page background and breadcrumb. */

.rd-tm {
	font-family: var(--gm-font-body, 'IBM Plex Sans', sans-serif);
	color: var(--gm-ink, #16232b);
	background: var(--gm-bg, #fbfbfa);
	padding-bottom: 72px;
}
.rd-tm-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.rd-tm-inner:first-of-type { padding-top: 22px; }

.rd-tm-kicker {
	font-family: var(--gm-font-mono, 'IBM Plex Mono', monospace);
	font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--gm-muted, #5f6b72);
	margin-bottom: 10px;
}
.rd-tm-title {
	font-family: var(--gm-font-display, 'Space Grotesk', sans-serif);
	font-size: clamp(28px, 4vw, 42px); line-height: 1.12; font-weight: 700;
	margin: 0 0 14px;
}
.rd-tm-intro { font-size: 16.5px; line-height: 1.65; color: var(--gm-body, #3d4a52); max-width: 72ch; }
.rd-tm-intro p { margin: 0 0 10px; }
.rd-tm-intro > *:last-child { margin-bottom: 0; }

.rd-tm-hint {
	margin: 22px 0 10px;
	font-size: 14px;
	color: var(--gm-muted, #5f6b72);
}

/* Screen-reader text. Every one of the 464 support cells carries one.

   THE CELL MUST BE THE CONTAINING BLOCK. These are position:absolute, and an absolutely
   positioned element resolves against its nearest POSITIONED ancestor — with none, that is the
   initial containing block, i.e. the document, not the scroll box they appear to sit in. The
   result: 464 one-pixel spans laid out at their static x, up to 1126px, escaping the
   horizontally-scrolling container entirely. `body.scrollWidth` stayed at 320 and
   `documentElement.scrollWidth` went to 1109 — the page scrolled sideways while every visible
   element was correctly inside the box, which is close to undebuggable by eye.

   `position: relative` on the cells re-parents them into the scroll region. */
.rd-tm-cell,
.rd-tm-model,
.rd-tm-tech { position: relative; }

.rd-tm-sr {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- the scroll region

   Eight model columns plus a technique column will not fit a phone, and shrinking the type
   until it does makes a table nobody can read. It scrolls sideways with the technique column
   pinned, which is the one thing you need to keep your place.

   tabindex="0" on the container (see the template) makes it scrollable by keyboard. Without
   it a keyboard user can tab to the links inside but cannot move the viewport to see them. */
.rd-tm-scroll {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	/* The page must never scroll horizontally itself — only this box. */
	max-width: 100%;
}
.rd-tm-scroll:focus-visible { outline: 2px solid var(--gm-navy, #003e69); outline-offset: -2px; }

.rd-tm-table {
	border-collapse: separate;      /* separate, not collapse: sticky cells lose their borders
	                                   under collapse in every engine */
	border-spacing: 0;
	margin: 0 auto;
	background: #fff;
	font-size: 14.5px;
}

.rd-tm-caption {
	caption-side: top;
	text-align: left;
	padding: 0 0 12px;
	font-size: 14px;
	color: var(--gm-muted, #5f6b72);
}
.rd-tm-caption-note { display: block; font-size: 13px; }

/* ---------------------------------------------------------------- header */

.rd-tm-corner { background: #fff; border-bottom: 1px solid var(--gm-border, #e6eaec); }
.rd-tm-corner--label {
	text-align: left;
	font-family: var(--gm-font-mono, 'IBM Plex Mono', monospace);
	font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
	font-weight: 500; color: var(--gm-muted, #5f6b72);
	padding: 8px 14px;
}

.rd-tm-fam {
	font-family: var(--gm-font-display, 'Space Grotesk', sans-serif);
	font-size: 12.5px; font-weight: 700;
	color: var(--gm-ink, #16232b);
	padding: 10px 8px 4px;
	text-align: center;
	white-space: nowrap;
	background: #fff;
}
.rd-tm-model {
	font-size: 14px; font-weight: 700;
	text-align: center;
	padding: 4px 8px 10px;
	background: #fff;
	border-bottom: 1px solid var(--gm-border, #e6eaec);
	min-width: 58px;
}
.rd-tm-model a { color: var(--gm-navy, #003e69); text-decoration: none; }
.rd-tm-model a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- band + rows */

.rd-tm-band {
	text-align: left;
	font-family: var(--gm-font-display, 'Space Grotesk', sans-serif);
	font-size: 15px; font-weight: 700;
	color: var(--gm-ink, #16232b);
	background: #eef3f7;
	padding: 11px 14px;
	scroll-margin-top: 90px;
}

.rd-tm-tech {
	text-align: left;
	font-weight: 500;
	color: var(--gm-body, #3d4a52);
	padding: 9px 14px;
	background: #fff;
	border-bottom: 1px solid var(--gm-border-soft, #eef1f2);
	/* Wide enough for the longest technique name to stay on two lines rather than five. */
	min-width: 260px;
}
.rd-tm-row:hover .rd-tm-tech,
.rd-tm-row:hover .rd-tm-cell { background: #f7fafc; }

.rd-tm-cell {
	text-align: center;
	padding: 9px 8px;
	background: #fff;
	border-bottom: 1px solid var(--gm-border-soft, #eef1f2);
	border-left: 1px solid var(--gm-border-soft, #eef1f2);
}
.rd-tm-tick { color: #1a7f4b; display: inline-block; vertical-align: -2px; }
/* The dash is deliberately faint — it is the absence of a fact, and at the same weight as the
   ticks it reads as a second kind of mark and the supported ones stop standing out. */
.rd-tm-dash { color: var(--gm-faint, #6c7981); opacity: .5; }

/* ---------------------------------------------------------------- the pinned column

   Only the technique column is sticky. Pinning the header row as well is tempting and wrong
   here: the two header rows are 60px, and on a phone in landscape that is a quarter of the
   viewport permanently occupied by column letters. */
.rd-tm-tech,
.rd-tm-corner--label {
	position: sticky;
	left: 0;
	z-index: 2;
}
/* The pinned column needs its own right edge, and a shadow so rows visibly pass underneath it
   rather than appearing to end there. */
.rd-tm-tech::after,
.rd-tm-corner--label::after {
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: -1px;
	width: 1px;
	background: var(--gm-border, #e6eaec);
	box-shadow: 3px 0 6px -3px rgba(0,0,0,.18);
}

/* ---------------------------------------------------------------- narrow */

@media (max-width: 720px) {
	.rd-tm-inner { padding-left: 16px; padding-right: 16px; }
	.rd-tm-scroll { padding-left: 16px; padding-right: 16px; }
	.rd-tm-table { font-size: 13.5px; }
	/* 190px still fits the longest technique name on three lines and leaves ~110px of the first
	   model column visible at 320px, which is what tells you the table scrolls. */
	.rd-tm-tech { min-width: 190px; padding: 8px 10px; }
	.rd-tm-model { min-width: 48px; }
}