/****** FILE: themes/gamry/css/pages/TabPage.css *****/


#tab_jumplinks 								{ clear:both; display:flex; flex:1 1 0px; flex-wrap:wrap; overflow:hidden; border-radius:8px; color:#013773 !important; margin-top:30px; padding:0px; font-weight:500; font-size:19px; line-height:24px; }
#tab_jumplinks a							{ text-align:center; color:#013773 !important; flex:1; display:block; padding: 8px 15px; background-color:#fabc38; position: relative; transition:all ease 200ms; white-space:nowrap; }
#tab_jumplinks a:before						{ display: block; content: ""; top:8px; bottom:8px; left:-1px; border-right:1px solid #013773; position:absolute; transition:all ease 200ms; }
#tab_jumplinks a:after 						{ display: inline-block; content: ">>"; margin-left: 5px; }
#tab_jumplinks a:hover		 				{ background-color:#003f69; color:#fabc38 !important; text-decoration: none; }
#tab_jumplinks a:hover:before 				{ border-color:transparent; }
#tab_jumplinks a:first-child:before			{ display: none; }

#tab_jumplinks a.purchase 					{ background-color:#003f69; color:#fabc38 !important; }
#tab_jumplinks a.purchase:hover 			{ color:#ffffff !important; }
#tab_jumplinks a.purchase:before			{ border-color:#fabc38; }

#tab_container								{ position: relative; }
#tab_container > h3 						{ clear:both; border-top:solid 1px #999999; margin-top:40px; padding-top: 40px; padding-bottom: 40px; margin-bottom: 0px; color: #024383; font-size: 22pt; font-weight: 700; }

.tab_content								{ position: relative; }
.totop										{ display: block; position: -webkit-sticky; position: sticky; bottom: 10px; height: 83px; width: 52px; background: url("/themes/gamry/images/top.png") no-repeat center center; border:none; padding:0; cursor:pointer; }
@media(min-width: 801px) {
	.totop									{ margin-left: calc(100% + 60px); }
}
/*-- Video Alterations --*/
.has-video									{ padding-bottom:20px; }
.top_section .has-video .detail.lower-detail	{ clear:both; max-width:calc(100% - 420px); float:right; }
.has-video .video							{ float:left; max-width:400px; }
.has-video:after							{ content:"."; display:block; height:0; clear:both; zoom:1; visibility:hidden; }
.video a.yt-img								{ display:block; position:relative; box-shadow:0 0 3px 0 rgba(0,0,0,0.5); }
.video a.yt-img:before						{ display:block; position:absolute; content:''; top:0; right:0; bottom:0; left:0; z-index:1; background:rgba(0,0,0,0.2) url(/themes/gamry/images/play-icon.png) center center no-repeat; background-size:20% auto;
	-webkit-transition: background 200ms ease;
	-moz-transition: background 200ms ease;
	-ms-transition: background 200ms ease;
	-o-transition: background 200ms ease;
	transition: background 200ms ease; }
.video a.yt-img:hover						{ text-decoration:none; }
.video a.yt-img:hover:before 				{ background-color:rgba(0,0,0,0); }

.video .yt-content							{ display:none; }

#video_popup 								{ max-width:100%; width:800px; }
#video_popup .yt-content					{ padding:20px 20px 0; }
#video_popup h3								{ }
#video_popup .video-holder					{ position:relative; }
#video_popup .video-holder:before			{ display:block; content:''; padding-top:56.25%; }
#video_popup iframe							{ width:100% !important; height:100% !important; display:block; position:absolute; z-index:1; top:0; left:0; }


@media(max-width:1100px){
	.featured-review						{ clear:both; padding:20px 0; margin:20px 0; border-top:1px solid #ccc; border-bottom:1px solid #ccc; }
	.top_section .has-video .detail.lower-detail	{ max-width:none; float:none; }
	.has-video .video						{ float:none; margin:0 auto; }
}

@media(min-width:801px) and (max-width:1024px){
	.product-top .image						{ float:none; margin:0 auto 20px; clear:both; }
}

@media(max-width:1024px){
	.product-top .product-title				{ margin-left:0; }
	.product-top .product-title h1			{ float:none; }
}

@media(min-width:601px) and (max-width:800px){
	.product-top .image						{ width:300px; }
}

@media(max-width:600px){
	.product-top .image						{ margin:0 auto; float:none; max-width:100%; }
	.product-top .content					{ margin:15px 0; }
	.featured-review						{ display:none; }
}


/* =========================================================================
   REDESIGN — Applications topic page (.rd-ap-*), 12 TabPage pages.
   The legacy #tab_jumplinks / #tab_container / .totop rules above still serve
   OEM/Partners (1271), which stays on Layout/TabPage.ss by design.
   Content here is prose + dense link lists (161 links, 35 to products), almost
   no images and no tables — so this is a reading/routing layout: sticky section
   nav + stacked sections. Section slots are looped, never assumed contiguous.
   ========================================================================= */

.rd-ap { background: var(--gm-bg, #fbfbfa); color: var(--gm-ink, #17242b); --rd-ap-shell: 1400px; }
.rd-ap :where(a) { text-decoration: none; }

/* ---- header ---- */
.rd-ap-head { background: var(--gm-surface, #fff); border-bottom: 1px solid var(--gm-border, #e6eaec); padding: 26px 40px 34px; }
.rd-ap-headmax { max-width: var(--rd-ap-shell); margin-inline: auto; }
.rd-ap-head .rd-breadcrumb { width: 100%; margin: 0 0 26px; }
.rd-ap-kicker { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gm-navy, #003e69); margin-bottom: 12px; }
.rd-ap-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(31px, 3.3vw, 44px); font-weight: 700; letter-spacing: -0.026em; line-height: 1.07; color: var(--gm-ink, #17242b); margin: 0; text-wrap: pretty; }
.rd-ap-intro { margin-top: 18px; max-width: 56em; display: flow-root; }
.rd-ap-intro p { font-size: 18px; line-height: 1.65; color: var(--gm-body, #47535b); margin: 0 0 12px; }
.rd-ap-intro p:last-child { margin-bottom: 0; }
.rd-ap-intro p:empty { display: none; }
.rd-ap-intro a { color: var(--gm-navy, #003e69); font-weight: 500; }
.rd-ap-intro img { float: left; width: 120px; height: auto; margin: 2px 22px 10px 0; }

/* ---- body grid ---- */

/* ---------- Long unbroken tokens (2026-08-30) ----------

   Raw URLs and code identifiers pasted as visible text set the column's min-content width
   directly, and a grid track then sizes to it — a 48-character DOI link measured 404px inside a
   320px viewport. `overflow-wrap: anywhere`, NOT `break-word`: only `anywhere` affects intrinsic
   sizing, so break-word leaves the container exactly as wide. It breaks a word only when it would
   otherwise overflow, so ordinary prose is untouched.

   Found by a full 652-page sweep, not by the scan that preceded it — that scan looked for hard
   widths, so it could only ever find the causes already suspected. */
.rd-ap-body { overflow-wrap: anywhere; }

.rd-ap-body { display: grid; grid-template-columns: 1fr; gap: 34px; max-width: var(--rd-ap-shell); margin-inline: auto; padding: 40px 40px 0; box-sizing: border-box; }
.rd-ap-main { min-width: 0; }

/* ---- section nav (same pattern as the application-note TOC) ---- */
.rd-ap-nav { min-width: 0; }
.rd-ap-nav-toggle { display: none; width: 100%; text-align: left; background: var(--gm-surface, #fff); border: 1px solid var(--gm-border, #e6eaec); border-radius: 12px; padding: 13px 16px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gm-ink, #17242b); cursor: pointer; }
.rd-ap-nav-chev { float: right; transition: transform .15s ease; }
.rd-ap-nav-toggle[aria-expanded="true"] .rd-ap-nav-chev { transform: rotate(90deg); }
.rd-ap-nav-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gm-muted, #5f6b72); padding-left: 12px; margin-bottom: 14px; }
.rd-ap-nav-list { list-style: none; margin: 0; padding: 0; }
.rd-ap-nav-item { display: block; border-left: 2px solid var(--gm-border, #e6eaec); padding: 7px 0 7px 12px; font-size: 14.5px; font-weight: 500; line-height: 1.35; color: var(--gm-body, #47535b); transition: color .12s ease, border-color .12s ease; }
.rd-ap-nav-item:hover { color: var(--gm-navy, #003e69); }
.rd-ap-nav-item.active { color: var(--gm-navy, #003e69); font-weight: 600; border-left-color: var(--gm-navy, #003e69); }

/* ---- sections ---- */
.rd-ap-sect { padding-bottom: 34px; margin-bottom: 34px; border-bottom: 1px solid var(--gm-border, #e6eaec); scroll-margin-top: 90px; }
.rd-ap-sect:last-child { border-bottom: 0; margin-bottom: 0; }
.rd-ap-sect-title { font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--gm-ink, #17242b); margin: 0 0 16px; text-wrap: pretty; }

/* prose + the dense link lists these pages are really made of */
.rd-ap-prose { max-width: 62em; }
.rd-ap-prose p { font-size: 17px; line-height: 1.72; color: var(--gm-body, #47535b); margin: 0 0 16px; }
.rd-ap-prose p:last-child { margin-bottom: 0; }
.rd-ap-prose a { color: var(--gm-navy, #003e69); font-weight: 500; }
.rd-ap-prose a:hover { color: var(--gm-navy-hover, #00567f); text-decoration: underline; }
.rd-ap-prose h2, .rd-ap-prose h3 { font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 600; letter-spacing: -0.012em; color: var(--gm-ink, #17242b); margin: 26px 0 10px; }
.rd-ap-prose h4, .rd-ap-prose h5 { font-family: 'Space Grotesk', sans-serif; font-size: 16.5px; font-weight: 600; color: var(--gm-ink, #17242b); margin: 20px 0 8px; }
.rd-ap-prose ul, .rd-ap-prose ol { font-size: 17px; line-height: 1.72; color: var(--gm-body, #47535b); margin: 0 0 16px; padding-left: 1.4em; }
.rd-ap-prose li { margin: 0 0 7px; }

/* Two columns for the document lists on Documentation Downloads (.rd-doclist is written by the
   normalised markup there). These are scan-and-click reference lists, not prose, so the read-down-
   then-back-up objection that rules columns out for body copy does not apply — nobody reads a manuals
   index top to bottom.

   `:has(li:nth-child(6))` applies it only to lists of six or more. Four of the eight sections hold 1,
   2, 3 and 5 items; splitting those would leave a stub second column beside a near-empty first. The
   long ones — Potentiostat Manuals (22), Quick Start Guides (26), Accessories/QCM (12),
   Electrochemical Cells (11) — are the ones worth halving. Browsers without :has() simply keep the
   single column, which is the current behaviour.

   column-width rather than column-count so it collapses to one column on narrow screens by itself,
   and break-inside so a wrapped filename never splits across the gap. */
.rd-ap-prose .rd-doclist:has(li:nth-child(6)) { columns: 20em 2; column-gap: 44px; }
.rd-ap-prose .rd-doclist li { break-inside: avoid; }
.rd-ap-prose sub, .rd-ap-prose sup { font-size: 0.7em; line-height: 0; }
.rd-ap-prose strong { color: var(--gm-ink, #17242b); }
/* ...but NOT inside a link. Editors bold links in the CMS, which nests <strong> in <a>;
   the rule above then repaints them ink and they stop looking like links. Same defect
   found and fixed on .rd-cp-prose (see GamryContentPage.css). */
.rd-ap-prose a strong, .rd-ap-prose a b { color: inherit; }
.rd-ap-prose img { max-width: 100%; height: auto; border-radius: 12px; }
.rd-ap-prose iframe { max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 12px; }
.rd-ap-prose table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15.5px; }
.rd-ap-prose th, .rd-ap-prose td { padding: 10px 14px; border-bottom: 1px solid var(--gm-border-row, #f4f6f7); text-align: left; }
/* legacy authored widths must not force a horizontal scrollbar */
.rd-ap-prose [width] { max-width: 100%; }

/* ---- widget rail (the Dynamics lead-capture form lives here) ---- */
.rd-ap-rail { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.rd-ap-widget { background: var(--gm-surface, #fff); border: 1px solid var(--gm-border, #e6eaec); border-radius: 16px; padding: 22px; overflow: hidden; }
.rd-ap-widget h3, .rd-ap-widget h4 { font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 600; color: var(--gm-ink, #17242b); margin: 0 0 12px; }
.rd-ap-widget p { font-size: 14.5px; line-height: 1.6; color: var(--gm-body, #47535b); margin: 0 0 10px; }
.rd-ap-widget a { color: var(--gm-navy, #003e69); font-weight: 500; }
/* OVERFLOW FIX: the injected Dynamics form renders a 288px input inside a 114px
   container, which pushed the document 28px wider than the viewport. The markup comes
   from an external script, so it is constrained here. */
.rd-ap-widget, .rd-ap-widget * { max-width: 100%; box-sizing: border-box; }
.rd-ap-widget input, .rd-ap-widget select, .rd-ap-widget textarea { width: 100%; max-width: 100%; box-sizing: border-box; border: 1px solid var(--gm-border-ctl, #d5dcdf); border-radius: 9px; padding: 10px 12px; font-size: 15px; font-family: inherit; }
.rd-ap-widget input[type=submit], .rd-ap-widget button { width: 100%; background: var(--gm-navy, #003e69); color: #fff; font-weight: 600; border: 0; border-radius: 10px; padding: 12px 16px; cursor: pointer; }
.rd-ap-widget input[type=submit]:hover, .rd-ap-widget button:hover { background: var(--gm-navy-hover, #00567f); }
.rd-ap-widget input:focus, .rd-ap-widget select:focus, .rd-ap-widget textarea:focus { outline: none; border-color: #7bb8dd; box-shadow: 0 0 0 3px rgba(123,184,221,.35); }
.rd-ap-widget label { display: block; font-size: 13px; font-weight: 500; color: var(--gm-muted, #5f6b72); margin-bottom: 4px; }
.rd-ap-widget .columnContainer, .rd-ap-widget .emptyContainer { width: auto !important; max-width: 100% !important; float: none !important; }

/* ---- back link + floating back to top ---- */
.rd-ap-back { display: flex; justify-content: center; padding: 52px 40px 60px; }
.rd-ap-back a { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--gm-border-ctl, #d5dcdf); background: var(--gm-surface, #fff); color: var(--gm-navy, #003e69); font-weight: 600; font-size: 15px; padding: 13px 24px; border-radius: 999px; }
.rd-ap-back a:hover { border-color: var(--gm-navy, #003e69); background: #f4f8fa; }
.rd-ap-totop { position: fixed; right: 24px; bottom: 24px; z-index: 34; width: 46px; height: 46px; border-radius: 999px; background: var(--gm-navy, #003e69); color: #fff; display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer; box-shadow: 0 4px 16px rgba(23,36,43,.24); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.rd-ap-totop.show { opacity: 1; visibility: visible; transform: none; }
.rd-ap-totop:hover { background: var(--gm-navy-hover, #00567f); color: #fff; }
.rd-ap-totop:focus-visible { outline: 3px solid rgba(123,184,221,.55); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .rd-ap-totop { transition: none; } }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (min-width: 1000px) {
	.rd-ap-body { grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; align-items: start; }
	.rd-ap-nav { grid-column: 1 / -1; }
	.rd-ap-nav-toggle { display: block; }
	.rd-ap-nav-inner { display: none; margin-top: 12px; }
	.rd-ap-nav.open .rd-ap-nav-inner { display: block; }
	.rd-ap-main { grid-column: 1; }
	.rd-ap-rail { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 24px; }
}
@media (min-width: 1300px) {
	.rd-ap-body { grid-template-columns: 232px minmax(0, 1fr) 320px; gap: 48px; }
	.rd-ap-nav { grid-column: 1; grid-row: 1; position: sticky; top: 24px; max-height: calc(100vh - 60px); overflow-y: auto; }
	.rd-ap-nav-toggle { display: none; }
	.rd-ap-nav-inner { display: block; margin-top: 0; }
	.rd-ap-main { grid-column: 2; grid-row: 1; }
	.rd-ap-rail { grid-column: 3; grid-row: 1; }
}
@media (max-width: 999px) {
	.rd-ap-head { padding: 20px 20px 26px; }
	.rd-ap-head .rd-breadcrumb { margin-bottom: 20px; }
	.rd-ap-title { font-size: 29px; }
	.rd-ap-body { padding: 28px 20px 0; gap: 24px; }
	.rd-ap-nav { order: 1; }
	.rd-ap-main { order: 2; }
	.rd-ap-rail { order: 3; position: static; }
	.rd-ap-back { padding: 40px 20px 48px; }
	.rd-ap-intro { max-width: none; }
	.rd-ap-intro img { float: none; width: 100px; margin: 0 0 12px; }
	.rd-ap-totop { bottom: 18px; right: 18px; }
}

/* No widget rail -> drop the reserved 320px column instead of leaving a dead gap.
   Added 2026-08-04 when the Dynamics lead-capture form was removed from these rails; most
   Applications pages then had no widgets at all and the grid still held the column open. */
@media (min-width: 1000px) {
	.rd-ap-body--norail { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1300px) {
	.rd-ap-body--norail { grid-template-columns: 232px minmax(0, 1fr); }
}