/*
 * Chemistry Naming Trainer.
 *
 * EVERY colour and typography rule is prefixed with `body.cnt-page`.
 *
 * That is not a namespacing preference. ruki-child styles
 * `.t33-page-main .entry-content a` and `.t33-page-main .entry-content h1..h6`
 * at specificity (0,3,1), and `.entry-content` wraps the shortcode output. A
 * bare `.cnt-something` at (0,1,0) loses, so links inside the tool render in the
 * theme's mid-teal and headings render near-black: present in the DOM, readable
 * by a crawler, invisible to a reader. The word search hit exactly this and it
 * took a visual pass to notice, because nothing was broken, just unreadable.
 *
 * Assume the next theme update introduces a third collision, and look for it.
 *
 * `!important` appears nowhere in this file. The theme is beaten on specificity
 * instead, which stays true when the theme changes; `!important` only stays true
 * until the theme also uses it.
 */

body.cnt-page {
	--cnt-bg: #0e1a24;
	--cnt-card: #15242f;
	--cnt-line: #243a49;
	--cnt-ink: #e8f1f6;
	--cnt-dim: #9fb4c2;
	--cnt-accent: #46c2b4;
	--cnt-accent-ink: #062a26;
	--cnt-good: #57c98a;
	--cnt-note: #e0b458;
	--cnt-bad: #e8796f;
	--cnt-radius: 10px;
}

/* ruki-child/page.php widens the article column only when post_content contains
 * museum-gallery, custom-browse-grid or wp:table. A shortcode matches none of
 * them, so the tool would render squeezed into the narrow single-column width.
 * Widened from here rather than by editing the theme. */
body.cnt-page .t33-page-main {
	max-width: 1040px;
}

body.cnt-page .entry-content .cnt {
	background: var(--cnt-bg);
	color: var(--cnt-ink);
	border: 1px solid var(--cnt-line);
	border-radius: var(--cnt-radius);
	padding: clamp(14px, 3vw, 26px);
	margin: 0 0 1.6em;
	font-size: 1rem;
	line-height: 1.5;
}

body.cnt-page .entry-content .cnt * {
	box-sizing: border-box;
}

/* -- mode and set bars ---------------------------------------------------- */

body.cnt-page .entry-content .cnt-modes,
body.cnt-page .entry-content .cnt-sets,
body.cnt-page .entry-content .cnt-sheets {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin: 0 0 12px;
}

body.cnt-page .entry-content .cnt-sets-label {
	color: var(--cnt-dim);
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-right: 4px;
}

body.cnt-page .entry-content .cnt-mode,
body.cnt-page .entry-content .cnt-set {
	display: inline-block;
	padding: 7px 12px;
	border: 1px solid var(--cnt-line);
	border-radius: 999px;
	background: var(--cnt-card);
	color: var(--cnt-ink);
	font-size: 0.9rem;
	line-height: 1.2;
	text-decoration: none;
	/* 44px tap target on a phone without making the desktop bar chunky. */
	min-height: 38px;
	display: inline-flex;
	align-items: center;
}

body.cnt-page .entry-content .cnt-mode:hover,
body.cnt-page .entry-content .cnt-set:hover {
	border-color: var(--cnt-accent);
	color: var(--cnt-ink);
	text-decoration: none;
}

body.cnt-page .entry-content .cnt-mode.is-on,
body.cnt-page .entry-content .cnt-set.is-on {
	background: var(--cnt-accent);
	border-color: var(--cnt-accent);
	color: var(--cnt-accent-ink);
	font-weight: 600;
}

/* -- the card ------------------------------------------------------------- */

body.cnt-page .entry-content .cnt-card {
	background: var(--cnt-card);
	border: 1px solid var(--cnt-line);
	border-radius: var(--cnt-radius);
	padding: clamp(14px, 3vw, 24px);
	/*
	 * A floor, not a fixed height. The card grows when a verdict and a
	 * derivation appear, and without a floor the whole page jumps on the first
	 * answer -- a CLS hit on the one element the page exists for. Measured
	 * against the tallest ordinary verdict, not guessed.
	 */
	min-height: 320px;
}

body.cnt-page .entry-content .cnt-label {
	margin: 0 0 6px;
	color: var(--cnt-dim);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}

body.cnt-page .entry-content .cnt-prompt {
	margin: 0 0 18px;
	font-size: clamp(1.9rem, 7vw, 2.8rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--cnt-ink);
	overflow-wrap: anywhere;
}

body.cnt-page .entry-content .cnt-prompt sub {
	font-size: 0.55em;
	vertical-align: sub;
}

body.cnt-page .entry-content .cnt-prompt sup {
	font-size: 0.5em;
	vertical-align: super;
	color: var(--cnt-accent);
}

/* -- input ---------------------------------------------------------------- */

body.cnt-page .entry-content .cnt-form {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

body.cnt-page .entry-content .cnt-input {
	flex: 1 1 220px;
	min-width: 0;
	padding: 12px 14px;
	/* 16px minimum: anything smaller makes iOS Safari zoom the viewport on
	 * focus, which on a drill means a zoom on every single question. */
	font-size: 1rem;
	border: 1px solid var(--cnt-line);
	border-radius: 8px;
	background: var(--cnt-bg);
	color: var(--cnt-ink);
}

body.cnt-page .entry-content .cnt-input:focus {
	outline: 2px solid var(--cnt-accent);
	outline-offset: 1px;
	border-color: var(--cnt-accent);
}

body.cnt-page .entry-content .cnt-check,
body.cnt-page .entry-content .cnt-next {
	padding: 12px 20px;
	font-size: 1rem;
	font-weight: 600;
	border: 0;
	border-radius: 8px;
	background: var(--cnt-accent);
	color: var(--cnt-accent-ink);
	cursor: pointer;
	min-height: 44px;
}

body.cnt-page .entry-content .cnt-next {
	background: transparent;
	color: var(--cnt-ink);
	border: 1px solid var(--cnt-line);
}

body.cnt-page .entry-content .cnt-check:hover {
	filter: brightness(1.08);
}

/* -- keypad --------------------------------------------------------------- */

/*
 * Brackets, subscript digits and a Roman numeral are three taps deep on most
 * phone keyboards, and this drill needs all of them constantly. Rendered by PHP
 * and unhidden by JS on a coarse pointer, so revealing it never reflows the
 * card.
 */
body.cnt-page .entry-content .cnt-keypad {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 10px 0 0;
}

body.cnt-page .entry-content .cnt-keypad[hidden] {
	display: none;
}

body.cnt-page .entry-content .cnt-key {
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	font-size: 1.05rem;
	border: 1px solid var(--cnt-line);
	border-radius: 8px;
	background: var(--cnt-bg);
	color: var(--cnt-ink);
	cursor: pointer;
}

body.cnt-page .entry-content .cnt-key-wide {
	min-width: 64px;
}

/* -- verdict -------------------------------------------------------------- */

body.cnt-page .entry-content .cnt-verdict:empty {
	display: none;
}

body.cnt-page .entry-content .cnt-verdict {
	margin: 16px 0 0;
	padding: 12px 14px;
	border-radius: 8px;
	border-left: 4px solid var(--cnt-line);
	background: rgba(255, 255, 255, 0.03);
}

body.cnt-page .entry-content .cnt-verdict-line {
	margin: 0;
	color: var(--cnt-ink);
}

body.cnt-page .entry-content .cnt-verdict.is-correct {
	border-left-color: var(--cnt-good);
}

body.cnt-page .entry-content .cnt-verdict.is-correct-with-note {
	border-left-color: var(--cnt-note);
}

body.cnt-page .entry-content .cnt-verdict.is-incorrect {
	border-left-color: var(--cnt-bad);
}

body.cnt-page .entry-content .cnt-verdict.is-ask {
	border-left-color: var(--cnt-note);
}

/* -- worked solution ------------------------------------------------------ */

body.cnt-page .entry-content .cnt-work {
	margin: 16px 0 0;
	border-top: 1px solid var(--cnt-line);
	padding-top: 12px;
}

body.cnt-page .entry-content .cnt-work-summary {
	cursor: pointer;
	color: var(--cnt-accent);
	font-weight: 600;
	list-style: none;
}

body.cnt-page .entry-content .cnt-work-summary::-webkit-details-marker {
	display: none;
}

body.cnt-page .entry-content .cnt-work-summary::before {
	content: "+ ";
}

body.cnt-page .entry-content .cnt-work[open] .cnt-work-summary::before {
	content: "- ";
}

body.cnt-page .entry-content .cnt-answer {
	margin: 10px 0 6px;
	color: var(--cnt-ink);
}

body.cnt-page .entry-content .cnt-steps {
	margin: 0;
	padding-left: 1.3em;
}

body.cnt-page .entry-content .cnt-step {
	margin: 0 0 8px;
	color: var(--cnt-ink);
}

body.cnt-page .entry-content .cnt-step-title {
	display: block;
	color: var(--cnt-dim);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

body.cnt-page .entry-content .cnt-step strong {
	color: var(--cnt-accent);
}

/* -- the ladder ----------------------------------------------------------- */

/*
 * The single most useful thing this tool draws: the whole -ate/-ite/per-/hypo-
 * family with the asked rung marked and the given rung marked differently, so a
 * student can see they were one step off rather than simply wrong.
 */
body.cnt-page .entry-content .cnt-ladder {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 6px 0;
}

body.cnt-page .entry-content .cnt-rung {
	padding: 5px 10px;
	border: 1px solid var(--cnt-line);
	border-radius: 999px;
	font-size: 0.88rem;
	color: var(--cnt-dim);
}

body.cnt-page .entry-content .cnt-rung em {
	font-style: normal;
	opacity: 0.7;
	font-size: 0.85em;
}

body.cnt-page .entry-content .cnt-rung.is-on {
	border-color: var(--cnt-good);
	color: var(--cnt-ink);
	font-weight: 600;
}

body.cnt-page .entry-content .cnt-rung.is-given {
	border-color: var(--cnt-bad);
	color: var(--cnt-ink);
}

/* -- controls and links --------------------------------------------------- */

body.cnt-page .entry-content .cnt-controls {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0 0;
	min-height: 44px;
}

body.cnt-page .entry-content .cnt-score {
	color: var(--cnt-dim);
	font-size: 0.9rem;
}

body.cnt-page .entry-content .cnt-harder {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 12px;
	color: var(--cnt-dim);
	font-size: 0.9rem;
}

body.cnt-page .entry-content .cnt-harder-label {
	color: var(--cnt-ink);
	cursor: pointer;
}

body.cnt-page .entry-content .cnt-poolb {
	margin: 0 0 10px;
	padding: 8px 10px;
	border-radius: 6px;
	background: rgba(224, 180, 88, 0.12);
	color: var(--cnt-note);
	font-size: 0.88rem;
}

body.cnt-page .entry-content .cnt-links {
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--cnt-line);
}

body.cnt-page .entry-content .cnt-links-label {
	margin: 0 0 6px;
	color: var(--cnt-dim);
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

body.cnt-page .entry-content .cnt-links ul {
	margin: 0;
	padding-left: 1.2em;
}

body.cnt-page .entry-content .cnt-links a {
	color: var(--cnt-accent);
}

/* -- worksheets ----------------------------------------------------------- */

body.cnt-page .entry-content .cnt-sheet {
	background: var(--cnt-card);
	border: 1px solid var(--cnt-line);
	border-radius: var(--cnt-radius);
	padding: clamp(14px, 3vw, 24px);
}

body.cnt-page .entry-content .cnt-sheet-title {
	margin: 0 0 6px;
	color: var(--cnt-ink);
	font-size: 1.25rem;
}

body.cnt-page .entry-content .cnt-sheet-sub,
body.cnt-page .entry-content .cnt-sheet-foot {
	color: var(--cnt-dim);
	font-size: 0.9rem;
}

body.cnt-page .entry-content .cnt-table {
	width: 100%;
	border-collapse: collapse;
	margin: 12px 0 22px;
}

body.cnt-page .entry-content .cnt-table th,
body.cnt-page .entry-content .cnt-table td {
	border: 1px solid var(--cnt-line);
	padding: 9px 10px;
	text-align: left;
	color: var(--cnt-ink);
}

body.cnt-page .entry-content .cnt-table th {
	color: var(--cnt-dim);
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

body.cnt-page .entry-content .cnt-cell-blank {
	min-width: 140px;
}

body.cnt-page .entry-content .cnt-sheet-actions {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 0 0 14px;
}

body.cnt-page .entry-content .cnt-keylink {
	color: var(--cnt-accent);
}

/* -- utility -------------------------------------------------------------- */

body.cnt-page .entry-content .cnt-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Hidden only once JS confirms it can drive the control. Without the
 * `.is-live` gate, a no-JS visitor sees a checkbox that does nothing. */
body.cnt-page .entry-content .cnt-noscript-hide {
	display: none;
}

body.cnt-page .entry-content .cnt.is-live .cnt-noscript-hide {
	display: flex;
}

@media (max-width: 560px) {
	body.cnt-page .entry-content .cnt-check,
	body.cnt-page .entry-content .cnt-input {
		flex: 1 1 100%;
	}

	body.cnt-page .entry-content .cnt-sheets .cnt-set {
		min-width: 44px;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.cnt-page .entry-content .cnt * {
		transition: none;
	}
}