/* =============================================================================
   RKC FINSERVE — calculator add-ons
   -----------------------------------------------------------------------------
   Loaded after rkc.css, for EVERY visitor (the locked state needs it as much
   as the live one). Covers the three things rkc.css does not:

     1. .rkc-calcnav      the jump nav (never had styles — it fell back to a
                          bare bullet list)
     2. .rkc-calc--locked the inert, anchored placeholders that keep
                          #sip … #cover resolvable for signed-out and
                          not-yet-approved visitors
     3. .rkc-chart__ph    the server-rendered chart skeleton, replaced by
                          rkc-calc.js on load

   Tokens only — every colour comes from RKC_Core::inline_tokens().
   ========================================================================== */


/* --- deep-link landing ---------------------------------------------------
   The header is sticky; without this an anchored calculator lands underneath
   it. Applies to the live cards and the locked ones alike. */

.rkc-calc,
.rkc-calcs__gate {
	scroll-margin-top: 112px;
}

@media (max-width: 782px) {
	.rkc-calc,
	.rkc-calcs__gate {
		scroll-margin-top: 84px;
	}
}


/* --- jump nav ------------------------------------------------------------- */

.rkc-calcnav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.rkc-calcnav li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rkc-calcnav a {
	display: inline-block;
	padding: 7px 15px;
	border: 1px solid var(--rkc-line);
	border-radius: 999px;
	background: var(--rkc-white);
	color: var(--rkc-slate);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	transition: border-color var(--rkc-t), color var(--rkc-t),
	            background-color var(--rkc-t);
}

.rkc-calcnav a:hover,
.rkc-calcnav a:focus-visible {
	border-color: var(--rkc-brass);
	background: var(--rkc-brass-08);
	color: var(--rkc-brass-deep);
}

.rkc-calcnav a:focus-visible {
	outline: none;
	box-shadow: var(--rkc-ring);
}


/* --- gated page: gate panel above the placeholders ------------------------ */

.rkc-calcs--locked .rkc-calcs__gate {
	margin: 0 0 28px;
}


/* --- locked placeholder cards ---------------------------------------------
   Deliberately thin: kicker, title, blurb, lock CTA. No controls exist here
   to style, because none are rendered. */

.rkc-calcgrid--locked {
	display: grid;
	gap: 16px;
	align-items: stretch;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 256px), 1fr));
}

.rkc-calc--locked {
	display: flex;
	flex-direction: column;
	padding: 18px;
	background: var(--rkc-white);
	border: 1px solid var(--rkc-line);
	border-radius: var(--rkc-r-lg);
}

.rkc-calc--locked .rkc-calc__head {
	margin: 0 0 14px;
	padding: 0;
	border-bottom: 0;
}

.rkc-calc--locked .rkc-calc__title {
	font-size: 16px;
	margin: 5px 0 0;
}

.rkc-calc--locked .rkc-calc__blurb {
	font-size: 13px;
	margin: 6px 0 0;
}

.rkc-calclock {
	display: flex;
	margin: auto 0 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--rkc-line);
}

.rkc-calclock__cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--rkc-brass-deep);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.3;
	text-decoration: none;
	border-radius: 6px;
	transition: color var(--rkc-t);
}

.rkc-calclock__cta:hover {
	color: var(--rkc-brass);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rkc-calclock__cta:focus-visible {
	outline: none;
	box-shadow: var(--rkc-ring);
}

.rkc-calclock__icon {
	flex: 0 0 auto;
	opacity: .85;
}


/* --- server-rendered chart skeleton ---------------------------------------
   Same 720x320 viewBox as rkc-calc.js draws into, inside the same fixed-height
   .rkc-chart box, so the swap on load moves nothing. */

.rkc-chart__ph {
	color: var(--rkc-deep);
}

.rkc-chart__ph text {
	fill: var(--rkc-slate);
}

/* Only ever visible with scripting off — .rkc-chart is fixed height, so this
   note sits below it rather than inside. */
.rkc-note--nojs {
	margin: 0 0 16px;
	padding: 10px 12px;
	border-left: 2px solid var(--rkc-brass);
	background: var(--rkc-paper);
	border-radius: 0 var(--rkc-r) var(--rkc-r) 0;
}


@media (max-width: 520px) {
	.rkc-calcgrid--locked {
		grid-template-columns: 1fr;
	}
}