/* AJ CD Rates: layout only. Colors, type, and the phone card layout come from aj-theme's .aj-rate-table rules. */

.aj-cd-table caption {
	caption-side: top;
	text-align: left;
	padding: 0 0 .6rem;
	font-size: .875rem;
	line-height: 1.5;
	color: #4b5563;
}

.aj-cd-caption-title {
	display: block;
	font-size: 1.05rem;
	font-weight: 600;
	color: #1a2332;
}

.aj-cd-scroll + .aj-cd-scroll {
	margin-top: 1.75rem;
}

.aj-cd-apy {
	white-space: nowrap;
}

.aj-cd-detail {
	display: block;
	font-size: .8rem;
	color: #6b7280;
	white-space: normal;
}

.aj-cd-penalty {
	margin: .25rem 0 .5rem;
	font-size: .875rem;
	font-weight: 600;
	color: #374151;
}

.aj-cd-product {
	display: block;
}

/* aj-theme's the_content filter wraps every table in .table-scroll, whose "table { min-width: 480px }"
   pushes the phone cards off-screen (the theme's own MYGA tables have the same bug). */
.table-scroll > .aj-cd-table {
	margin: 0;
}

/* aj-theme turns .aj-rate-table into stacked cards at 640px; keep captions full width and let long cells wrap. */
@media (max-width: 640px) {
	.table-scroll > .aj-cd-table {
		min-width: 0;
	}

	.table-scroll:has(> .aj-cd-table) {
		overflow-x: visible;
		margin: 0;
	}

	.aj-cd-table caption {
		display: block;
		width: auto;
	}

	.aj-cd-table td {
		gap: 12px;
	}

	.aj-cd-product {
		min-width: 0;
		text-align: right;
	}
}

/* Hub page: each bank's H2 already gets the theme's standard top divider (.aj-article__content h2);
   the eyebrow just labels the account type and lives inside that same H2 box so it sits above the
   heading text without adding a second rule line. No wrapper card -- kept the tables at full native
   width (.aj-rate-table already has its own white bg/border), which also gives more room on phones. */
.aj-cd-bank-eyebrow {
	display: block;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #1A73E8;
}

/* wpautop wraps the standalone eyebrow span in its own <p>; move the theme's standard
   h2 top-divider (border-top/padding-top/margin-top) onto that <p> so there's one line,
   with the eyebrow sitting right above the heading instead of a rule between them. */
p:has(> .aj-cd-bank-eyebrow:only-child) {
	margin: 40px 0 0;
	padding-top: 24px;
	border-top: 2px solid #f3f4f6;
}

p:has(> .aj-cd-bank-eyebrow:only-child) + h2 {
	margin-top: .35rem;
	padding-top: 0;
	border-top: none;
}

/* Best-by-term table (0.3.6 added a National avg. column): keep terms, rates and dates on one
   line on desktop so "12-month" and "Sep 11, 2026" don't break; the bank name wraps instead. */
@media (min-width: 641px) {
	.aj-cd-best-wrap td[data-label="Term"],
	.aj-cd-best-wrap td[data-label="Top APY"],
	.aj-cd-best-wrap td[data-label="National avg."],
	.aj-cd-best-wrap td[data-label="As of"] {
		white-space: nowrap;
	}
}

/* Sep 18 2026 spacing (Jason: "some spacing is definitely off").
   Stacked product tables: the theme's .table-scroll (25.5px top+bottom) plus .aj-cd-scroll's own
   margins added up to ~75px between tables of one bank, so they read as unrelated blocks.
   One 2rem gap between tables, nothing extra inside. */
.aj-cd .table-scroll {
	margin: 0;
}

.aj-cd .aj-cd-scroll {
	margin-bottom: 0;
}

.aj-cd .aj-cd-scroll + .aj-cd-scroll {
	margin-top: 2rem;
}

.aj-cd .aj-cd-scroll + .aj-cd-penalty {
	margin-top: 1rem;
}

/* The generated FAQ is usually followed by hand-written .aj-faq-item blocks in the page body; drop
   the theme's .aj-faq block margins so the two read as one list under the heading. */
.aj-cd.aj-cd-faq {
	margin-top: 0;
	margin-bottom: 0;
}

/* Fine print under tables was #888 at 12px (~3.5:1, too pale; Jason flagged it). Gray-600 at 13px
   passes WCAG AA and still reads as secondary. */
.aj-cd .aj-cd-notes {
	color: #4b5563;
	font-size: .8125rem;
	line-height: 1.55;
}

/* [aj_cd_glance] key facts box (Sep 18 2026). One light border, no background fill, so it doesn't
   stack boxes on the white article card. Two columns of label/value pairs on desktop, one on phones. */
.aj-cd-glance {
	margin: 1.5rem 0 2rem;
	padding: 20px 24px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
}

.aj-cd-glance__title {
	margin: 0 0 .75rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #1A73E8;
}

.aj-cd-glance__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 28px;
	margin: 0;
}

.aj-cd-glance__item dt {
	margin: 0 0 2px;
	font-size: .8rem;
	font-weight: 600;
	color: #6b7280;
}

.aj-cd-glance__item dd {
	margin: 0;
	font-size: .95rem;
	line-height: 1.45;
	color: #1a2332;
}

.aj-cd-glance__foot {
	margin: 1rem 0 0;
	padding-top: .75rem;
	border-top: 1px solid #f3f4f6;
	font-size: .8125rem;
	color: #4b5563;
}

@media (max-width: 640px) {
	.aj-cd-glance {
		padding: 16px 18px;
	}

	.aj-cd-glance__list {
		grid-template-columns: 1fr;
	}
}

/* [aj_cd_history_chart] (Sep 18 2026). Recessive grid/axes, 2px lines, 8px markers with a 2px
   surface ring, text in text colors (never the series color). Bank = AJ blue; FDIC average = dashed
   neutral reference line. */
.aj-cd-chart {
	margin: 1.5rem 0 2rem;
}

.aj-cd-chart__title {
	display: block;
	font-size: 1.05rem;
	font-weight: 600;
	color: #1a2332;
}

.aj-cd-chart__change {
	margin: .15rem 0 .5rem;
	font-size: .875rem;
	color: #4b5563;
}

.aj-cd-chart__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.aj-cd-chart__grid {
	stroke: #eef0f3;
	stroke-width: 1;
}

.aj-cd-chart__axis {
	fill: #6b7280;
}

.aj-cd-chart__line {
	fill: none;
	stroke: #1A73E8;
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.aj-cd-chart__line--ref {
	stroke: #6b7280;
	stroke-dasharray: 5 4;
}

.aj-cd-chart__dot {
	fill: #1A73E8;
	stroke: #fff;
	stroke-width: 2;
}

.aj-cd-chart__dot--ref {
	fill: #6b7280;
}

.aj-cd-chart__value {
	fill: #1a2332;
	font-weight: 600;
}

.aj-cd-chart__value--ref {
	fill: #4b5563;
	font-weight: 500;
}

.aj-cd-chart__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: .5rem 0 0;
	padding: 0;
	list-style: none;
	font-size: .8125rem;
	color: #4b5563;
}

.aj-cd-chart__legend li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.aj-cd-chart__key {
	display: inline-block;
	width: 20px;
	border-top: 2px solid #1A73E8;
}

.aj-cd-chart__key--ref {
	border-top: 2px dashed #6b7280;
}

.aj-cd-chart__data {
	margin-top: .75rem;
	font-size: .875rem;
}

.aj-cd-chart__data summary {
	cursor: pointer;
	color: #1A73E8;
	font-weight: 500;
}

.aj-cd-chart__data table {
	margin-top: .5rem;
}