/****** FILE: themes/gamry/css/pages/PotentiostatsLandingPage.css *****/
/* ===================================================================
   PotentiostatsLandingPage — v2 blue design (tabbed by product line)
   Reuses shared tokens + .rd-eyebrow / .rd-btn* / .rd-textlink / .rd-grid.
   =================================================================== */

/* Canvas set explicitly: .rd-pot and .rd-cat were the only two redesigned templates without a
   background, so the LEGACY `body { background:#e7f3fb }` (layout.css:2 — the same line still
   setting the pre-redesign Alegreya Sans font) showed through as a pale blue here while every
   other redesigned page was --gm-bg off-white. */
.rd-pot { font-family: 'IBM Plex Sans', sans-serif; color: var(--gm-ink); background: var(--gm-bg, #fbfbfa); }

/* header */
.rd-pot-head { border-bottom: 1px solid var(--gm-border); background: #fff; padding: 26px 40px 0; }
.rd-pot-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 30px; }
.rd-pot-head-main { max-width: 44em; }
.rd-pot-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(34px, 3.4vw, 46px); font-weight: 700; letter-spacing: -0.028em; line-height: 1.05; color: var(--gm-ink); margin: 0 0 14px; }
.rd-pot-intro { font-size: 17px; line-height: 1.6; color: var(--gm-body); margin: 0; }
.rd-pot-total { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gm-muted); padding-bottom: 6px; white-space: nowrap; }

/* tabs */
.rd-pot-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
/* Tab fills, corrected 2026-08-04. Three surfaces are in play: .rd-pot-head is #fff and the
   tab strip sits on it; the content below is the .rd-pot canvas (--gm-bg #fbfbfa). So:
     inactive = --gm-panel grey  -> recessed, distinct from the white header behind it
     active   = --gm-bg          -> merges into the content area below, the standard tab idiom
   The original bug was the active tab using pure #fff, which matched neither the header nor the
   content and so read as detached. Inactive must NOT be #fff or it disappears into the header. */
.rd-pot-tab { background: var(--gm-panel); border: 1px solid var(--gm-border); border-bottom: none; border-radius: 11px 11px 0 0; padding: 13px 22px 15px; margin-bottom: -1px; cursor: pointer; display: flex; align-items: baseline; gap: 9px; font-family: 'IBM Plex Sans', sans-serif; }
.rd-pot-tab-label { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 16.5px; color: var(--gm-muted); }
.rd-pot-tab-count { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--gm-faint); }
/* The active tab matches the page canvas so it reads as continuous with the panel beneath it —
   the standard tab idiom, which only works because .rd-pot now sets that canvas explicitly
   (see below). Inactive tabs stay #fff and sit visually "in front". */
.rd-pot-tab.is-active { background: var(--gm-bg, #fbfbfa); }
.rd-pot-tab.is-active .rd-pot-tab-label { color: var(--gm-ink); }
.rd-pot-tab:hover .rd-pot-tab-label { color: var(--gm-navy); }

/* panel + line head */
.rd-pot-panel { padding: 34px 40px 10px; }
.rd-pot-panel[hidden] { display: none; }
.rd-pot-line-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 26px; }
.rd-pot-line-main { max-width: 46em; }
.rd-pot-line-title { font-family: 'Space Grotesk', sans-serif; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--gm-ink); margin: 0 0 10px; line-height: 1.1; }
.rd-pot-line-intro { font-size: 16px; line-height: 1.62; color: var(--gm-body); margin: 0; }
.rd-pot-forbox { background: #fff; border: 1px solid var(--gm-border); border-radius: 14px; padding: 16px 20px; min-width: 230px; }
.rd-pot-forbox-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gm-muted); margin-bottom: 8px; }
.rd-pot-forbox-item { display: block; font-size: 14px; color: var(--gm-ink); padding: 3px 0; }

/* model cards */
.rd-pot-models { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 22px; }
.rd-pot-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gm-border); border-radius: 18px; overflow: hidden; }
/* Deliberately kept and deliberately unused. ModelBadge used to set this, and since almost every
   model carries a badge the border marked everything and therefore nothing. Left here so a future
   explicit promotion flag has a style waiting rather than having to reinvent one. */
.rd-pot-card.is-featured { border-color: var(--gm-navy); }
.rd-pot-card-img { position: relative; aspect-ratio: 16/10; background: #e7edf0 center/cover no-repeat; }
.rd-pot-card-img.rd-card-img--ph { background: linear-gradient(135deg, #1a3a52, #0f2231); }
.rd-pot-badge { position: absolute; top: 14px; left: 14px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; background: var(--gm-navy); color: #fff; padding: 6px 10px; border-radius: 6px; }
.rd-pot-card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.rd-pot-card-name { font-family: 'Space Grotesk', sans-serif; font-size: 23px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 5px; line-height: 1.15; }
.rd-pot-card-name a { color: var(--gm-ink); }
.rd-pot-card-name a:hover { color: var(--gm-navy); text-decoration: none; }
.rd-pot-card-type { font-size: 13.5px; color: var(--gm-body); margin-bottom: 18px; }
.rd-pot-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 18px 0; border-top: 1px solid #eef1f2; border-bottom: 1px solid #eef1f2; margin-bottom: 18px; }
.rd-pot-stat-v { font-family: 'IBM Plex Mono', monospace; font-size: 24px; font-weight: 500; letter-spacing: -0.02em; color: var(--gm-ink); line-height: 1.05; }
.rd-pot-stat-k { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gm-muted); margin-top: 6px; }
.rd-pot-points { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 9px; }
.rd-pot-points li { position: relative; padding-left: 15px; font-size: 14.5px; line-height: 1.5; color: #485258; }
.rd-pot-points li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--gm-navy); }
.rd-pot-card-cta { margin-top: auto; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* per-line spec comparison table */
.rd-pot-spectable-wrap { margin-top: 34px; background: #fff; border: 1px solid var(--gm-border); border-radius: 16px; overflow: hidden; }
.rd-pot-spectable-head { padding: 18px 22px; border-bottom: 1px solid #eef1f2; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rd-pot-spectable-title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 17px; color: var(--gm-ink); }
.rd-pot-spectable-link { font-size: 13.5px; font-weight: 600; color: var(--gm-navy); }
.rd-pot-spectable-scroll { overflow-x: auto; }
.rd-pot-spectable { width: 100%; border-collapse: collapse; min-width: 620px; }
.rd-pot-spectable th, .rd-pot-spectable td { padding: 12px 20px; text-align: left; border-left: 1px solid #eef1f2; }
.rd-pot-spectable thead th { background: #f7fafc; border-bottom: 1px solid #eef1f2; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 15px; color: var(--gm-ink); }
.rd-pot-spectable thead th.rd-pot-spec-label, .rd-pot-spectable td.rd-pot-spec-label { border-left: none; width: 210px; }
.rd-pot-spectable thead th.rd-pot-spec-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gm-muted); font-weight: 500; }
.rd-pot-spectable td { font-family: 'IBM Plex Mono', monospace; font-size: 13.5px; color: var(--gm-ink); border-top: 1px solid #f4f6f7; }
.rd-pot-spectable td.rd-pot-spec-label { font-family: 'IBM Plex Sans', sans-serif; font-size: 13.5px; color: var(--gm-body); }
.rd-pot-spectable tr.odd td { background: #fbfcfc; }

/* selector call-out (dark band) */
.rd-pot-selector-wrap { padding: 34px 40px 60px; }
.rd-pot-selector { position: relative; overflow: hidden; border-radius: 20px; background: var(--gm-ink); padding: 44px; }
.rd-pot-selector-glow { position: absolute; top: -44%; right: 2%; width: 520px; height: 520px; background: radial-gradient(circle, rgba(0,90,140,0.45), transparent 62%); pointer-events: none; }
.rd-pot-selector-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 34px; flex-wrap: wrap; }
.rd-pot-selector-main { max-width: 38em; }
.rd-pot-selector-title { font-family: 'Space Grotesk', sans-serif; font-size: 32px; font-weight: 700; letter-spacing: -0.02em; color: #fff; margin: 0 0 12px; line-height: 1.1; }
.rd-pot-selector-text { font-size: 16.5px; line-height: 1.6; color: var(--gm-on-dark-muted); margin: 0; }

@media (max-width: 700px) {
	.rd-pot-head { padding: 22px 24px 0; }
	.rd-pot-panel { padding: 28px 24px 10px; }
	.rd-pot-selector-wrap { padding: 28px 24px 48px; }
	.rd-pot-selector { padding: 32px 24px; }
	.rd-pot-line-title { font-size: 25px; }
}

/* Link from a line's panel into its standalone line page (fixes those pages being
   orphaned — the nav mega renders line names as plain spans by design). */
.rd-pot-line-all { display: inline-block; margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--gm-navy, #003e69); text-decoration: none; }
.rd-pot-line-all:hover { color: var(--gm-navy-hover, #00567f); }

/* Whole-photo click target for the model cards (see PotentiostatsLandingPage.ss).
   The badge is raised above it so it keeps painting over the image; the link stays
   transparent, so clicking the badge area still follows it. */
.rd-pot-card-img { cursor: pointer; }
.rd-pot-card-imglink { position: absolute; inset: 0; display: block; }
.rd-pot-badge { z-index: 1; }
.rd-pot-card-img:hover { filter: brightness(0.97); }
@media (prefers-reduced-motion: reduce) { .rd-pot-card-img:hover { filter: none; } }

/* "to" prefix on the EIS figure — set smaller so "to 300 kHz" stays on one line in
   the 3-column stat grid. Not a separate colour: it is part of the figure, just
   subordinate to the number. nowrap on the value keeps them together. */
/* No `nowrap` here: a long value (MegaEIS "to 100 kHz (per channel)", the
   PTC-10100EW's "+10 / −2 V") could not wrap and forced the whole card wider than
   its grid track. min-width:0 lets the 1fr track shrink instead of being pushed out
   by its content, and the smaller prefix is what keeps "to 300 kHz" on one line. */
.rd-pot-stat { min-width: 0; }
.rd-pot-stat-pre { font-size: 0.58em; font-weight: 400; letter-spacing: 0; }
.rd-pot-stat-suf { font-size: 0.5em; font-weight: 400; letter-spacing: 0; white-space: nowrap; }
/* 22px rather than 24px: buys the ~10% the longest figures needed to stay on one line. */
.rd-pot-stat-v { font-size: 22px; }

/* The three stat columns were equal thirds (repeat(3, 1fr)), which gave "to 100 kHz"
   the same 105px as "±1 A" and forced it onto two lines. Sizing the tracks to their
   content lets the EIS figure take the room it needs from the narrow current column. */
.rd-pot-stats { grid-template-columns: auto auto auto; justify-content: space-between; }

/* Cards whose three figures are ALL long — see ProductListing::StatsRunLong(). The row has
   ~339px; the EIS Box needs ~386px at 22px because, shipping in two variants, both its current
   and its compliance carry two numbers and no short figure is left in the row to yield space.
   18px brings it to ~316px with real margin (19px would fit on paper at ~333px, but 6px of slack
   is inside the variance of font loading and sub-pixel rounding, and it would silently wrap
   again the first time a figure grew by a character). Applies only where the flag fires, so the
   other sixteen cards keep the full 22px. */
.rd-pot-stats--tight .rd-pot-stat-v { font-size: 18px; }