/**
 * Calculator-specific extras.
 *
 * The core calculator widget styles live in style.css; this file holds
 * supplementary tweaks and print rules for the engineering aesthetic.
 */

/* Smooth number transitions on result figures. */
.rk-figure,
.rk-stat__v { transition: color .2s ease; }

/* Focus-visible ring consistency for keyboard users. */
.rk-calc :focus-visible {
	outline: 2px solid var(--cat, var(--rk-accent));
	outline-offset: 1px;
}

/* Print: hide the form, show results cleanly. */
@media print {
	.site-header, .site-footer, .hero__search, .nav-toggle { display: none !important; }
	.rk-calc { box-shadow: none; border-color: #444; }
	.rk-calc__grid { grid-template-columns: 1fr; }
	.rk-calc__form { display: none; }
	body { background: #fff; }
}

/* Segmented control: stacked / full-width variant for 3+ options. */
.rk-seg--stack { display: flex; width: 100%; }
.rk-seg--full { display: flex; width: 100%; }

/* BMI-style category scale. */
.rk-scale { position: relative; margin: 1.2rem 0 .4rem; }
.rk-scale__track { display: flex; height: 12px; border: 1px solid var(--rk-line-strong); border-radius: 0; overflow: hidden; }
.rk-scale__track span { display: block; height: 100%; }
.rk-scale__marker {
	position: absolute; top: -6px; width: 3px; height: 24px;
	background: var(--rk-ink); border-radius: 0; transform: translateX(-50%);
	transition: left .35s ease; box-shadow: 0 0 0 2px var(--rk-surface);
}
.rk-scale__labels {
	display: flex; justify-content: space-between; margin-top: .4rem;
	font-family: var(--rk-font-mono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--rk-muted);
}

/* Category tag shown with a result. */
.rk-tag {
	display: inline-block; padding: .22rem .65rem; border-radius: var(--rk-radius-sm);
	font-family: var(--rk-font-mono); font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-top: .4rem;
}

/* Converter alternates list. */
.rk-alts { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--rk-line); }
.rk-alts li {
	display: flex; justify-content: space-between; gap: 1rem; padding: .55rem .2rem;
	border-bottom: 1px solid var(--rk-line); font-family: var(--rk-font-mono); font-variant-numeric: tabular-nums; font-size: .9rem;
}
.rk-alts li span:first-child { color: var(--rk-muted); text-transform: uppercase; letter-spacing: .03em; font-size: .8rem; }

/* Repeating input rows (e.g. GPA courses). */
.rk-rows { display: grid; gap: .55rem; margin-bottom: .8rem; }
.rk-row { display: grid; grid-template-columns: minmax(0, 1fr) 116px 84px 38px; gap: .5rem; align-items: center; }
.rk-row select, .rk-row input { margin: 0; }
.rk-row__remove {
	width: 38px; height: 38px; border-radius: var(--rk-radius-sm);
	border: 1px solid var(--rk-line-strong); background: var(--rk-surface);
	color: var(--rk-muted); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.rk-row__remove:hover { color: var(--rk-accent); border-color: var(--rk-accent); }
.rk-rows__head { font-family: var(--rk-font-mono); font-size: .7rem; color: var(--rk-muted); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 520px) {
	.rk-row { grid-template-columns: minmax(0, 1fr) 84px 38px; }
	.rk-row .rk-row__name { grid-column: 1 / -1; }
}

/* Worked-example annotation. */
.rk-example {
	max-width: 70ch; margin: 1.6rem 0; padding: 1rem 1.2rem;
	background: var(--rk-surface); border: 1px solid var(--rk-line);
	border-left: 3px solid var(--cat, var(--rk-primary)); border-radius: 0;
}
.rk-example__label {
	font-family: var(--rk-font-mono); font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
	color: var(--cat, var(--rk-primary)); margin-bottom: .4rem;
}
.rk-example p { margin: 0; color: var(--rk-ink); }

/* FAQ accordion. */
.calc-faq { max-width: 70ch; margin-top: 2.4rem; }
.calc-faq > h2 { font-family: var(--rk-font-mono); font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; }
.rk-faq { display: grid; gap: 0; margin-top: 1rem; border-top: 1px solid var(--rk-line); }
.rk-faq__item { border-bottom: 1px solid var(--rk-line); background: transparent; }
.rk-faq__item summary {
	cursor: pointer; padding: .95rem .2rem; font-weight: 600; color: var(--rk-ink);
	list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.rk-faq__item summary::-webkit-details-marker { display: none; }
.rk-faq__item summary::after { content: "+"; font-family: var(--rk-font-mono); color: var(--cat, var(--rk-primary)); font-weight: 600; font-size: 1.1rem; flex: 0 0 auto; }
.rk-faq__item[open] summary::after { content: "\2212"; }
.rk-faq__a { padding: 0 .2rem 1rem; color: var(--rk-ink-soft); }

/* Insights / "good to know" block. */
.calc-insights { margin-top: 2.2rem; padding-top: 1.8rem; border-top: 1px solid var(--rk-line-strong); }
.calc-insights h2 { font-size: 1.4rem; }
.calc-insights h3 { font-size: 1.1rem; margin-top: 1.4rem; }
.calc-insights ul { padding-left: 1.1rem; }
.calc-insights li { margin-bottom: .4rem; }

/* Inline checkbox row (e.g. date difference). */
.rk-check { display: flex; align-items: center; gap: .55rem; font-size: .92rem; color: var(--rk-ink-soft); cursor: pointer; }
.rk-check input { width: auto; }

/* Stacked numerator / bar / denominator for the fraction calculator. */
.rk-fraction { display: inline-flex; flex-direction: column; align-items: stretch; width: 120px; gap: .35rem; }
.rk-fraction input { text-align: center; }
.rk-fraction__bar { height: 2px; background: var(--rk-ink); border-radius: 1px; }
