/* Caveman Circus Dad Joke: the sidebar card (1.3). A sibling of the theme's champion card: white, a 2px
   black border and a 4px offset shadow, square corners. Rok leans on the top edge; a yellow tag names it. */
.ccdj.ccdj-card {
	container: ccdjcard / inline-size; /* not "ccdj", so the banner's wide-screen rules never apply */
	position: relative;
	max-width: 420px;
	margin: 64px 0 0; /* room for Rok above the card */
	padding: 30px 16px 16px;
	background: var(--cc-white, #fff);
	border: 2px solid var(--ccdj-ink);
	box-shadow: 4px 4px 0 var(--ccdj-ink);
	color: var(--ccdj-ink);
	text-align: left;
}
/* Rok peeks up from behind the card, toward the right, so the tag has the left. */
.ccdj-card .ccdj-card__rok {
	position: absolute;
	right: 10px;
	bottom: 100%;
	width: 112px;
	height: auto;
	margin-bottom: 2px; /* his cut-off bottom sits right on top of the 2px border, so he looks tucked behind it */
	border: 0;
	box-shadow: none;
	pointer-events: none;
	z-index: 1;
}
/* The tag: the champion ribbon's yellow box, sitting on the top edge. */
.ccdj-card .ccdj-card__tag {
	position: absolute;
	top: -15px;
	left: 14px;
	margin: 0;
	padding: 0;
	border: 0;
	z-index: 2;
}
.ccdj-card .ccdj-card__tag span {
	display: block;
	padding: 7px 10px 6px;
	background: var(--cc-yellow, #F5E04A);
	border: 2px solid var(--ccdj-ink);
	font-size: 13px;
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}
.ccdj-card .ccdj-card__q {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.25;
	text-wrap: balance;
}
.ccdj-card .ccdj-card__a {
	margin: 0;
	font-size: 17px;
	font-style: italic;
	line-height: 1.35;
	color: #3A352D;
	text-wrap: balance;
}
.ccdj-card .ccdj-card__ask {
	margin: 14px 0 8px;
	padding-top: 12px;
	border-top: 2px solid var(--ccdj-ink);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cc-muted, #5C554B);
}
.ccdj-card .ccdj-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	font-size: 13.5px;
}
.ccdj-card .ccdj-b {
	flex: 0 0 auto;
	gap: 6px;
	min-height: 34px;
	padding: 3px 12px 3px 10px;
	background: #fff;
	border: 2px solid var(--ccdj-ink);
	border-radius: 0;
	box-shadow: 3px 3px 0 var(--ccdj-ink);
	color: var(--ccdj-ink);
	font-weight: 800;
	white-space: nowrap;
	text-shadow: none;
	transition: transform .08s, box-shadow .08s, background-color .12s;
}
.ccdj-card .ccdj-g,
.ccdj-card .ccdj-h { background: #fff; }
.ccdj-card .ccdj-b:hover { background: #FFF7C2; transform: none; box-shadow: 3px 3px 0 var(--ccdj-ink); }
.ccdj-card .ccdj-b:active { background: var(--cc-yellow, #F5E04A); transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ccdj-ink); }
.ccdj-card .ccdj-b:focus-visible { outline: 3px solid var(--cc-blue, #1F5BE0); outline-offset: 3px; }
.ccdj-card .ccdj-b img { display: block; width: 17px; height: 17px; flex: none; border: 0; box-shadow: none; }

/* After a vote: the groans in the site's yellow, the rest white. */
.ccdj-card .ccdj-res { margin-top: 0; font-size: 14px; }
.ccdj-card .ccdj-bar { height: 2.2em; border-width: 2px; border-radius: 0; box-shadow: 3px 3px 0 var(--ccdj-ink); background: #fff; color: var(--ccdj-ink); text-shadow: none; }
.ccdj-card .ccdj-bg { background: var(--cc-yellow, #F5E04A); border-right: 2px solid var(--ccdj-ink); }
.ccdj-card .ccdj-bg:empty { border-right: 0; }
.ccdj-card .ccdj-bar span { min-width: 0; padding: 0 .5em; overflow: hidden; text-overflow: clip; font-size: 12.5px; }
.ccdj-card .ccdj-bh { justify-content: flex-start; } /* overflow goes right, where the fit check sees it */
.ccdj-card .ccdj-note { margin-top: .7em; }

@media (prefers-reduced-motion: reduce) {
	.ccdj-card .ccdj-b { transition: none; }
}