/* ==========================================================================
   Partner sidebar: the offer card and table of contents shared by the partner
   discount and review templates (hook classes roc-psb-*). Page stylesheets keep
   the colors and everything below 1100px. From 1100px the sticky sidebar fits
   the window, the card is compact and the contents list takes the rest of the
   column; js/partner-sidebar.js condenses the card while reading and keeps the
   active contents link in view.

   Every rule starts at .roc-psb-layout .roc-psb so it outranks the page rules
   (at most two classes and an element) and the .roc-kit heading and button
   rules in css/base.css without !important. The one exception beats the global
   [hidden] { display: none !important } rule.
   ========================================================================== */

/* All widths: card and contents h2s inherit the .roc-kit 56.25px line box, which
   splits a wrapped 20px heading with a 36px gap. Phones keep style.css's
   !important h2 rule. */
.roc-psb-layout .roc-psb h2.roc-psb-title,
.roc-psb-layout .roc-psb h2.roc-psb-toc-title {
	line-height: 1.3;
}

/* All widths: the .roc-kit button fill, glow and black :hover/:focus state must
   not repaint copy-code buttons (they hid PROMO1XY on its own blue fill). */
.roc-psb-layout .roc-psb button.roc-psb-code {
	background-color: #fff;
	box-shadow: none;
}

.roc-psb-layout .roc-psb button.roc-psb-code:is(:hover, :focus) {
	background-color: #eef4ff;
	border-color: #1e40af;
	color: #333;
}

/* The ChartMill promo button inherits .promo-cta-button:hover's white !important text;
   the code keeps its own blue on the pale fill. */
.roc-psb-layout .roc-psb button.roc-psb-code .coupon-code-display {
	color: #2563eb;
}

@media screen and (min-width: 1100px) {
	body .roc-psb-layout {
		flex-wrap: nowrap;
	}

	body .roc-psb-layout > :not(.roc-psb) {
		min-width: 0;
	}

	/* Never taller than the window: the card keeps its height, the contents
	   list takes the rest. When even the card and the shortest list cannot fit
	   (a very short window, larger default or zoomed text), the whole sidebar
	   scrolls instead of running off the window. --roc-psb-on tells the script
	   the layout is active. */
	body .roc-psb-layout .roc-psb {
		--roc-psb-on: 1;
		position: sticky;
		top: calc(var(--roc-sticky-top, 0px) + 20px);
		align-self: flex-start;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		height: auto;
		max-height: calc(100vh - var(--roc-sticky-top, 0px) - 40px);
		max-height: calc(100dvh - var(--roc-sticky-top, 0px) - 40px);
		overflow-x: hidden;
		overflow-y: auto;
	}

	/* A box under the contents list (MarketXLS, Stock Analysis) stays put: the
	   sidebar takes the window's height, so the list's late fill or a card swap
	   only resizes the list. */
	body .roc-psb-layout .roc-psb.roc-psb--fill {
		height: calc(100vh - var(--roc-sticky-top, 0px) - 40px);
		height: calc(100dvh - var(--roc-sticky-top, 0px) - 40px);
	}

	.roc-psb-layout .roc-psb.roc-psb--fill .roc-psb-toc {
		flex-basis: 0;
	}

	.roc-psb-layout .roc-psb .roc-psb-card {
		--roc-psb-gap: 0.5rem;
		position: relative;
		flex: none;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: var(--roc-psb-gap) 0.75rem;
		margin: 0;
		padding: 1rem;
		text-align: left;
	}

	.roc-psb-layout .roc-psb .roc-psb-card > * {
		grid-column: 1 / -1;
		margin: 0;
	}

	/* The services box and fine print sit under the button, so condensing only
	   takes away the bottom of the card and nothing visible moves. */
	.roc-psb-layout .roc-psb .roc-psb-card > :is(.roc-psb-services, .roc-psb-fine) {
		order: 1;
	}

	/* A fixed tile, so a logo that loads late (most have no width/height) moves nothing. */
	.roc-psb-layout .roc-psb .roc-psb-card .roc-psb-logo {
		grid-column: 1;
		display: block;
		width: 3.25rem;
		max-width: none;
		height: 3.25rem;
		margin: 0;
		object-fit: contain;
		border-radius: 8px;
	}

	.roc-psb-layout .roc-psb .roc-psb-card .roc-psb-logo + .roc-psb-title {
		grid-column: 2;
	}

	.roc-psb-layout .roc-psb .roc-psb-card .roc-psb-title {
		padding: 0;
		border: 0;
		font-size: 1.0625rem;
		line-height: 1.3;
	}

	.roc-psb-layout .roc-psb .roc-psb-card .roc-psb-logo-text {
		font-size: 1rem;
		line-height: 1.3;
	}

	.roc-psb-layout .roc-psb .roc-psb-card .roc-psb-basis {
		font-size: 0.875rem;
		line-height: 1.45;
	}

	.roc-psb-layout .roc-psb .roc-psb-card .roc-psb-services {
		padding: 0.5rem 0.75rem;
		font-size: 0.8125rem;
		line-height: 1.4;
	}

	.roc-psb-layout .roc-psb .roc-psb-card .roc-psb-services > :first-child {
		margin: 0 0 0.25rem;
		font-size: 0.75rem;
		line-height: 1.3;
	}

	.roc-psb-layout .roc-psb .roc-psb-card .roc-psb-services > p {
		margin: 0;
		font-size: inherit;
		line-height: inherit;
	}

	.roc-psb-layout .roc-psb .roc-psb-card :is(.roc-psb-note, .roc-psb-note small) {
		font-size: 0.8125rem;
		line-height: 1.45;
	}

	.roc-psb-layout .roc-psb .roc-psb-card :is(.roc-psb-fine, .roc-psb-fine small) {
		font-size: 0.75rem;
		line-height: 1.4;
	}

	.roc-psb-layout .roc-psb .roc-psb-card .roc-psb-details {
		padding-top: 0.5rem;
	}

	.roc-psb-layout .roc-psb .roc-psb-card .roc-psb-cta {
		width: 100%;
		padding: 0.625rem 0.875rem;
		font-size: 0.9375rem;
		line-height: 1.3;
	}

	.roc-psb-layout .roc-psb .roc-psb-card .roc-psb-status {
		min-height: 0;
		font-size: 0.8125rem;
		line-height: 1.4;
	}

	/* An empty live region keeps its place in the accessibility tree; it only
	   gives back its row gap. */
	.roc-psb-layout .roc-psb .roc-psb-card .roc-psb-status:empty {
		margin-top: calc(-1 * var(--roc-psb-gap));
	}

	/* Code box: label on its own line, then the code and its copy hint. */
	.roc-psb-layout .roc-psb .roc-psb-card .roc-psb-code {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 0.25rem 0.5rem;
		width: 100%;
		padding: 0.5rem 0.75rem;
		line-height: 1.3;
		text-align: left;
		transform: none;
	}

	/* A copy button the page reveals with JavaScript keeps its place meanwhile,
	   so the reveal moves nothing below it. */
	.roc-psb-layout .roc-psb .roc-psb-card .roc-psb-code[hidden] {
		display: grid !important;
		visibility: hidden;
	}

	.roc-psb-layout .roc-psb .roc-psb-card .roc-psb-code .code-label {
		grid-column: 1 / -1;
		margin: 0;
		font-size: 0.75rem;
	}

	.roc-psb-layout .roc-psb .roc-psb-card .roc-psb-code :is(.promo-code, .coupon-code-display) {
		justify-self: start;
		padding: 0.25rem 0.625rem;
		font-size: 1rem;
	}

	.roc-psb-layout .roc-psb .roc-psb-card .roc-psb-code :is(.copy-hint, .copied-message, .copy-indicator) {
		margin: 0;
		font-size: 0.8125rem;
	}

	/* The contents list fills the rest of the column and scrolls on its own. */
	.roc-psb-layout .roc-psb .roc-psb-toc {
		flex: 1 1 auto;
		min-height: 9rem;
		max-height: none;
		margin: 0;
		padding: 1rem 1.125rem;
		overflow-y: auto;
		scroll-padding-block: 1rem;
		scrollbar-width: thin;
	}

	.roc-psb-layout .roc-psb .roc-psb-toc .roc-psb-toc-title {
		margin: 0 0 0.75rem;
		padding-bottom: 0.5rem;
	}

	.roc-psb-layout .roc-psb .roc-psb-toc li {
		margin-bottom: 0.5rem;
	}

	/* Focus scrolling keeps the 3px focus ring inside the window. */
	.roc-psb-layout .roc-psb :is(a, button) {
		scroll-margin-block: 0.5rem;
	}

	/* Older review stylesheets give the active link no visible state. */
	.roc-psb-layout .roc-psb .roc-psb-toc:not(.discount-toc) a.active {
		color: #1e40af;
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.roc-psb-layout .roc-psb .roc-psb-extra {
		flex: none;
		margin: 0;
	}

	/* Hidden visually but kept for screen readers: the subtitle always (it repeats
	   the page's lead or the code on the button), the services box and fine print
	   once the card condenses while reading (js/partner-sidebar.js). */
	.roc-psb-layout .roc-psb .roc-psb-card .roc-psb-sub,
	.roc-psb-layout .roc-psb.is-condensed .roc-psb-card :is(.roc-psb-services, .roc-psb-fine) {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* ACF text can hold links: a hidden block shows again while focus is inside it. */
	.roc-psb-layout .roc-psb .roc-psb-card .roc-psb-sub:focus-within,
	.roc-psb-layout .roc-psb.is-condensed .roc-psb-card :is(.roc-psb-services, .roc-psb-fine):focus-within {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
		white-space: normal;
	}
}

/* Windows up to 820px tall: the card starts condensed and tighter, so card and
   contents list fit with no swap (nothing here changes while scrolling), and the
   related-reviews box (also at the end of the article) steps aside. */
@media screen and (min-width: 1100px) and (max-height: 820px) {
	.roc-psb-layout .roc-psb .roc-psb-card {
		--roc-psb-gap: 0.375rem;
		column-gap: 0.625rem;
		padding: 0.75rem;
	}

	.roc-psb-layout .roc-psb .roc-psb-card .roc-psb-logo {
		width: 2.5rem;
		height: 2.5rem;
	}

	.roc-psb-layout .roc-psb .roc-psb-card .roc-psb-title {
		font-size: 1rem;
	}

	.roc-psb-layout .roc-psb .roc-psb-card :is(.roc-psb-services, .roc-psb-fine, .roc-psb-code .code-label) {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.roc-psb-layout .roc-psb .roc-psb-card :is(.roc-psb-services, .roc-psb-fine):focus-within {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
		white-space: normal;
	}

	.roc-psb-layout .roc-psb .roc-psb-extra {
		display: none;
	}
}