/* ==========================================================================
   Chance Contact Gate
   Locked contact chips + the CAPTCHA dialog.

   The chips reuse the résumé block's .cd-chip so the locked state has the
   exact same footprint as the real links did — the header must not reflow
   when they unlock. The dialog is portalled to <body>, outside .cd-resume,
   so every value it needs is restated here rather than inherited.
   ========================================================================== */

:root {
	--ccg-ink: #e9e5f5;
	--ccg-dim: #9a8fc0;
	--ccg-accent: #c4b5fd;
	--ccg-line: rgba(196, 181, 253, .25);
	--ccg-panel: #140b2e;
}

/* ---------- locked chips ---------- */

.ccg .ccg-chip {
	font: inherit;
	font-size: .82rem;
	font-weight: 600;
	cursor: pointer;
	position: relative;
	appearance: none;
	-webkit-appearance: none;
}

/* The mask is real text, not a blurred copy of the answer. Monospacing it
   keeps the redaction reading as a placeholder rather than as a word. */
.ccg .ccg-mask {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: .02em;
	color: #8f7fc0;
	filter: blur(2.4px);
	opacity: .85;
	user-select: none;
	transition: filter .2s ease, opacity .2s ease;
}

.ccg .ccg-chip:hover .ccg-mask,
.ccg .ccg-chip:focus-visible .ccg-mask {
	filter: blur(1.6px);
	opacity: 1;
}

.ccg .ccg-lock {
	display: inline-flex;
	color: var(--ccg-accent);
	opacity: .9;
	margin-left: .1rem;
}

.ccg .ccg-chip:focus-visible {
	outline: 2px solid var(--ccg-accent);
	outline-offset: 2px;
}

.ccg .ccg-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;
}

/* The résumé block's .cd-head is `justify-content:space-between`, so this
   group shrink-wraps and sits at the right of the header. The hint line must
   NOT be a flex sibling of the chips with `flex-basis:100%` — a percentage
   basis resolves against the group's own width, which inflates its max-content
   size, drops the whole group onto its own row, and makes the header reflow
   the moment the chips unlock. Chips get their own row box instead, so the
   locked and unlocked states occupy the same place. */
.cd-quick.ccg {
	flex-direction: column;
	align-items: flex-end;
	gap: .4rem;
}

.ccg .ccg-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: .5rem;
}

.ccg .ccg-note {
	display: flex;
	align-items: center;
	gap: .35rem;
	margin: 0;
	font-size: .72rem;
	line-height: 1.35;
	color: #8f7fc0;
	text-align: right;
}

/* Once the header stacks, fall back to the left edge the rest of the block uses. */
@media (max-width: 899px) {
	.cd-quick.ccg { align-items: flex-start; }
	.ccg .ccg-chips { justify-content: flex-start; }
	.ccg .ccg-note { text-align: left; }
}

.ccg .ccg-note svg {
	flex: none;
	opacity: .8;
}

/* Unlocked: the chips become ordinary links again. */
.ccg[data-ccg-state="open"] .ccg-note {
	display: none;
}

/* ---------- dialog ---------- */

.ccg-backdrop {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(5, 2, 14, .74);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity .18s ease;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.ccg-backdrop.is-in {
	opacity: 1;
}

.ccg-panel {
	position: relative;
	width: min(27rem, 100%);
	box-sizing: border-box;
	background: linear-gradient(160deg, #1b1042 0%, var(--ccg-panel) 62%, #0d0720 100%);
	border: 1px solid var(--ccg-line);
	border-radius: 20px;
	box-shadow: 0 30px 70px rgba(2, 1, 8, .7), inset 0 1px 0 rgba(255, 255, 255, .07);
	padding: 1.5rem 1.5rem 1.35rem;
	color: var(--ccg-ink);
	transform: translateY(10px) scale(.985);
	transition: transform .2s cubic-bezier(.2, .8, .3, 1);
	max-height: calc(100dvh - 2rem);
	overflow-y: auto;
}

.ccg-backdrop.is-in .ccg-panel {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.ccg-backdrop,
	.ccg-panel {
		transition: none;
	}
}

.ccg-eyebrow {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin: 0 0 .35rem;
	font-size: .66rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #8f7fc0;
}

.ccg-title {
	font-family: 'Sora', 'Inter', sans-serif;
	font-weight: 700;
	font-size: 1.3rem;
	line-height: 1.15;
	letter-spacing: -.01em;
	margin: 0 0 .4rem;
	color: #f7f5ff;
}

.ccg-sub {
	margin: 0 0 1.05rem;
	font-size: .84rem;
	line-height: 1.5;
	color: var(--ccg-dim);
}

.ccg-stage {
	position: relative;
	border: 1px solid var(--ccg-line);
	border-radius: 14px;
	background: rgba(8, 4, 22, .55);
	padding: .75rem;
	min-height: 6.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.ccg-stage img {
	display: block;
	width: 100%;
	max-width: 20.5rem;
	height: auto;
	border-radius: 8px;
	user-select: none;
	-webkit-user-drag: none;
}

.ccg-question {
	margin: 0;
	padding: .5rem .25rem;
	text-align: center;
	font-family: 'Sora', 'Inter', sans-serif;
	font-size: 1.15rem;
	font-weight: 600;
	color: #f7f5ff;
}

.ccg-spin {
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	border: 2px solid rgba(196, 181, 253, .25);
	border-top-color: var(--ccg-accent);
	animation: ccg-spin .7s linear infinite;
}

@keyframes ccg-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.ccg-spin { animation-duration: 2.4s; }
}

.ccg-row {
	display: flex;
	gap: .5rem;
	margin-top: .7rem;
}

/* The theme styles bare `input[type="text"]` as a white Bootstrap field —
   including on :focus, at the same specificity a plain `.ccg-input:focus`
   would have. Every rule here is scoped through .ccg-backdrop so it wins
   outright rather than by load order. */
.ccg-backdrop input.ccg-input {
	display: block;
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	box-sizing: border-box;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .18em;
	text-align: center;
	color: #f7f5ff;
	background-color: rgba(8, 4, 22, .6);
	border: 1px solid var(--ccg-line);
	border-radius: 12px;
	padding: .7rem .8rem;
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.ccg-backdrop input.ccg-input::placeholder {
	color: #6a5d92;
	font-weight: 500;
	letter-spacing: .08em;
	opacity: 1;
}

.ccg-backdrop input.ccg-input:focus {
	outline: none;
	color: #f7f5ff;
	background-color: rgba(8, 4, 22, .6);
	border-color: var(--ccg-accent);
	box-shadow: 0 0 0 3px rgba(139, 92, 246, .25);
}

.ccg-btn {
	font: inherit;
	font-weight: 700;
	font-size: .86rem;
	cursor: pointer;
	border-radius: 12px;
	padding: .7rem 1.15rem;
	border: 1px solid transparent;
	background: linear-gradient(135deg, #7c3aed, #a855f7);
	color: #fff;
	transition: filter .15s ease, transform .1s ease;
	white-space: nowrap;
}

.ccg-btn:hover { filter: brightness(1.12); }
.ccg-btn:active { transform: translateY(1px); }
.ccg-btn[disabled] { opacity: .55; cursor: default; }

.ccg-btn:focus-visible,
.ccg-ghost:focus-visible,
.ccg-close:focus-visible {
	outline: 2px solid var(--ccg-accent);
	outline-offset: 2px;
}

.ccg-ghost {
	font: inherit;
	font-size: .74rem;
	color: #9a8fc0;
	background: none;
	border: 0;
	padding: .25rem 0;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ccg-ghost:hover { color: var(--ccg-accent); }

.ccg-foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .5rem 1rem;
	margin-top: .7rem;
}

.ccg-msg {
	min-height: 1.15rem;
	margin: .6rem 0 0;
	font-size: .78rem;
	line-height: 1.4;
	color: #fca5a5;
}

.ccg-msg.is-ok { color: #86efac; }

.ccg-close {
	position: absolute;
	top: .6rem;
	right: .6rem;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--ccg-line);
	background: rgba(8, 4, 22, .5);
	color: var(--ccg-dim);
	cursor: pointer;
	line-height: 1;
	font-size: 1.05rem;
}

.ccg-close:hover { color: #fff; }

body.ccg-locked-scroll {
	overflow: hidden;
}