/* Troubleshooting Walkthrough — the eleven step pages under
   /support-2/technical-support/troubleshooting/troubleshooting-walkthrough/

   Loaded by <% require %> from Includes/TroubleshootingStep.ss, so it costs nothing on the
   other 54 Page records. The Page template chain has no <% cached %> block, which is what
   makes that safe: a <% require %> inside a cached block ships its assets to whichever
   visitor happens to miss the cache and to nobody else — the bug that broke the Bioz widget.

   THE !important RULES BELOW ARE NOW VESTIGIAL, AND ARE KEPT DELIBERATELY. Until 2026-08-30
   these steps rendered inside the legacy shell's <div id="page_type" class="internal
   typography">, where typography.css carries

       .typography a, .typography a * { color: #0a65a2 !important; }

   forcing the anchor AND every descendant of it. No selector beats !important, so the answer
   rows and the spans inside them each needed their own to hold a colour; scoping to
   `.rd-tw .rd-tw-choice` was tried first and lost.

   GamryWalkthrough.ss no longer emits that wrapper, so nothing is competing any more and these
   could come out. They are left in because they cost nothing, they are the only defence if this
   markup is ever included from a template that IS inside .typography, and removing them would be
   a change with no visible benefit and a real chance of quietly restoring #0a65a2 links. If you
   are here because you are wondering why a rule that appears unnecessary is marked important:
   that is why. */

/* The page shell. Previously the legacy layout supplied the page background and the centred,
   padded column; on its own template this file has to. */
.rd-tw-page {
	background: var(--gm-bg, #fbfbfa);
	font-family: var(--gm-font-body, 'IBM Plex Sans', sans-serif);
}
/* 808 rather than 760 so that after the 24px gutters the measure is still the 760 the step was
   designed at. */
.rd-tw-inner { max-width: 808px; margin: 0 auto; padding: 30px 24px 0; }

.rd-tw {
	max-width: 760px;
	padding: 8px 0 64px;
	font-family: var(--gm-font-body, 'IBM Plex Sans', sans-serif);
	color: var(--gm-ink, #16232b);
}

/* ---------------------------------------------------------------- the question */

.rd-tw-crumbs {
	font-family: var(--gm-font-mono, 'IBM Plex Mono', monospace);
	font-size: 11.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 18px;
}
.rd-tw-crumbs a { color: var(--gm-muted, #5f6b72); }
.rd-tw-crumbs a::before { content: '// '; color: var(--gm-faint, #98a5ac); }

.rd-tw .rd-tw-q {
	font-family: var(--gm-font-display, 'Space Grotesk', sans-serif);
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.15;
	font-weight: 700;
	margin: 0 0 22px;
	color: var(--gm-ink, #16232b);
}

.rd-tw-body { font-size: 16.5px; line-height: 1.65; color: var(--gm-body, #3d4a52); }
.rd-tw-body > *:first-child { margin-top: 0; }
.rd-tw-body > *:last-child { margin-bottom: 0; }
/* These steps carry photographs — the calibration half of the UDC4, the Calibration
   Shield — at whatever width they were uploaded. */
.rd-tw-body img { max-width: 100%; height: auto; border-radius: 10px; }
/* An h2 here is the question restated, not a section heading: it is the last thing read
   before the answers, so it sits closer to them than a default heading margin allows. */
.rd-tw-body h2 {
	font-family: var(--gm-font-display, 'Space Grotesk', sans-serif);
	font-size: 21px;
	line-height: 1.3;
	margin: 30px 0 0;
	color: var(--gm-ink, #16232b);
}

/* ---------------------------------------------------------------- the answers */

.rd-tw-choices {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
/* typography.css sets `.typography li` spacing and markers for editorial lists. These are
   controls, not prose. */
.rd-tw-choices > li { margin: 0; padding: 0; list-style: none; }
.rd-tw-choices > li::before { content: none; }

.rd-tw .rd-tw-choice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	box-sizing: border-box;
	min-height: 60px;
	padding: 16px 20px;
	border: 1px solid var(--gm-border, #e6eaec);
	border-left: 3px solid var(--gm-navy, #003e69);
	border-radius: 10px;
	background: #fff;
	color: var(--gm-ink, #16232b);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
	transition: border-color .15s ease, background .15s ease, transform .15s ease;
	/* See the header note: `.typography a *` forces #0a65a2 on this and on the spans below. */
	color: var(--gm-ink, #16232b) !important;
}
.rd-tw .rd-tw-choice .rd-tw-choice-text { color: var(--gm-ink, #16232b) !important; }
.rd-tw .rd-tw-choice .rd-tw-choice-mark { color: var(--gm-navy, #003e69) !important; }
.rd-tw .rd-tw-choice:hover,
.rd-tw .rd-tw-choice:focus-visible {
	background: #f7fafc;
	border-color: var(--gm-navy, #003e69);
	transform: translateX(2px);
	color: var(--gm-navy, #003e69) !important;
	text-decoration: none !important;
}
.rd-tw .rd-tw-choice:hover .rd-tw-choice-text,
.rd-tw .rd-tw-choice:focus-visible .rd-tw-choice-text { color: var(--gm-navy, #003e69) !important; }
.rd-tw .rd-tw-choice:focus-visible { outline: 2px solid var(--gm-navy, #003e69); outline-offset: 2px; }

.rd-tw-choice-text { flex: 1 1 auto; min-width: 0; }
.rd-tw-choice-mark {
	flex: 0 0 auto;
	font-size: 18px;
	line-height: 1;
	color: var(--gm-navy, #003e69);
}

/* An answer that leaves the walkthrough — "Yes, and passed successfully." goes to Support,
   not to another question. Muted rail and a diagonal arrow, so a reader can see before
   clicking that this one ends the sequence rather than advancing it. */
.rd-tw .rd-tw-choice--exit { border-left-color: var(--gm-faint, #98a5ac); }
.rd-tw .rd-tw-choice--exit .rd-tw-choice-mark { color: var(--gm-muted, #5f6b72) !important; }
.rd-tw-choice--exit:hover,
.rd-tw-choice--exit:focus-visible { border-color: var(--gm-faint, #98a5ac); }

/* An answer pointing at a deleted page. Kept visible so the decision tree still reads
   correctly, but plainly not clickable. */
.rd-tw .rd-tw-choice--dead {
	border-left-color: var(--gm-border, #e6eaec);
	background: #fbfcfd;
	cursor: default;
}
/* Beats the generic .rd-tw-choice-text rule above, which is itself !important because of
   typography.css. A dead answer is a <span>, not an <a>, so it is only this file competing
   with itself here — but the generic rule still wins without the extra class. */
.rd-tw .rd-tw-choice--dead .rd-tw-choice-text {
	color: var(--gm-faint, #98a5ac) !important;
	text-decoration: line-through;
}

.rd-tw-choice-note {
	flex: 0 0 auto;
	font-family: var(--gm-font-mono, 'IBM Plex Mono', monospace);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gm-faint, #98a5ac);
}

/* ---------------------------------------------------------------- footer */

.rd-tw-foot {
	margin-top: 34px;
	padding-top: 20px;
	border-top: 1px solid var(--gm-border, #e6eaec);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px 28px;
	font-size: 15px;
}
.rd-tw .rd-tw-restart { font-weight: 600; color: var(--gm-navy, #003e69); }

.rd-tw-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.rd-tw-links > li { margin: 0; padding: 0; }
.rd-tw-links > li::before { content: none; }
.rd-tw-links a { color: var(--gm-muted, #5f6b72); }
.rd-tw-ext { margin-left: 4px; font-size: 12px; }

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

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

   320px is the floor this project holds (WCAG 2.1 SC 1.4.10). The choice rows are the risk:
   a long answer plus a fixed arrow in a 20px-padded box is what pushes a line over. */
@media (max-width: 520px) {
	.rd-tw { padding-bottom: 40px; }
	.rd-tw-choice { padding: 14px 16px; font-size: 16px; gap: 12px; }
	.rd-tw-foot { gap: 10px 18px; }
}

/* ---------------------------------------------------------------- legacy caption images

   Four of the eleven steps illustrate the instruction with a photo, authored years ago as

       <div class="captionImage center" style="width: 600px;">
         <img class="center" width="600" height="243" ...>
         <p class="caption">...</p>
       </div>

   The width is an INLINE STYLE, so no attribute selector reaches it and `max-width: 100%` on the
   image resolves against a parent that is itself 600px wide — the image obeys the rule and still
   overflows. Measured: 9 of 33 viewport/page combinations scrolled sideways at 320/375/425 the
   moment these pages left the legacy shell, which had been constraining the wrapper for them.

   `width: auto !important` is the only thing that beats an inline style. This is the same fix
   already carried by .rd-pd-prose on the product pages for the same authored markup; it is
   repeated here rather than promoted into .rd-cp-prose because that class is shared with 26 other
   pages this change has not re-verified. Worth checking whether any of them carry a captionImage
   and have the same latent overflow. */
.rd-tw-body .captionImage {
	width: auto !important;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}
.rd-tw-body .captionImage img,
.rd-tw-body img.center {
	max-width: 100%;
	height: auto;
}
.rd-tw-body p.caption {
	max-width: 100%;
	font-size: 14px;
	line-height: 1.5;
	color: var(--gm-muted, #5f6b72);
}

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

@media (max-width: 620px) {
	.rd-tw-inner { padding: 22px 16px 0; }
}