:root {
	--bg: #eef2f7;
	--surface: #ffffff;
	--border: #c8d6e8;
	--text: #1a2540;
	--muted: #3a527a;
	--accent: #2563eb;
	--accent-dim: #bfcfef;
	--mono: ui-monospace, 'Cascadia Code', 'Menlo', 'Consolas', monospace;
	--serif: 'Iowan Old Style', 'Palatino Linotype', 'Georgia', serif;
	--radius: 4px;
	--trans: 200ms ease;
}

a {
	color: var(--accent);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
	color: var(--accent-muted);
}

input:invalid {
  border: none;
  outline: 2px solid #2563eb;
  border-radius: 5px;
}
textarea:invalid {
  border: none;
  outline: 2px solid #2563eb;
  border-radius: 5px;
}

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html, body {
	min-height: 100%;
	background: var(--bg);
	color: var(--text);
	font-family: var(--serif);
	font-size: 17px;
	line-height: 1.65;
}

/* ── Layout shell ── */
#app {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2rem 1rem;
}

.card {
	hyphens: auto;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	width: 100%;
	max-width: 640px;
	padding: 2.5rem 3rem;
	box-shadow: 0 2px 16px rgba(37, 99, 235, .08);
}

ul {
	background: #f5f5f5;
	padding: 1em 0em 1em 3em;
	border-radius: var(--radius)
}

/* ── Typography ── */
.label {
	font-family: var(--mono);
	font-size: .7rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: .75rem;
}

h1 {
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: .5rem;
}

h2 {
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 1rem;
}

p {
	margin-bottom: .9rem;
	color: #1e3050;
}

p:last-child {
	margin-bottom: 0;
}

/* ── Progress bar ── */
.progress-wrap {
	width: 100%;
	max-width: 640px;
	margin-bottom: .75rem;
}

.progress-meta {
	display: flex;
	justify-content: space-between;
	font-family: var(--mono);
	font-size: .68rem;
	color: var(--muted);
	margin-bottom: .3rem;
}

.progress-track {
	height: 3px;
	background: var(--border);
	border-radius: 2px;
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	background: var(--accent);
	border-radius: 2px;
	transition: width .4s ease;
}

/* ── Privacy scroll box ── */
.scroll-box {
	height: 280px;
	overflow-y: auto;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1.2rem 1.4rem;
	margin: 1.25rem 0;
	font-size: .95rem;
	line-height: 1.7;
	background: #f4f8ff;
	scroll-behavior: smooth;
}

.scroll-box::-webkit-scrollbar {
	width: 5px;
}

.scroll-box::-webkit-scrollbar-track {
	background: transparent;
}

.scroll-box::-webkit-scrollbar-thumb {
	background: var(--border);
	border-radius: 3px;
}

.scroll-notice {
	font-family: var(--mono);
	font-size: .72rem;
	color: var(--accent);
	margin-top: .4rem;
	transition: opacity var(--trans);
}

.scroll-notice.hidden {
	opacity: 0;
	pointer-events: none;
}

/* ── Checkbox row ── */
.check-row {
	display: flex;
	gap: .75rem;
	align-items: flex-start;
	margin-top: 1.25rem;
}

.check-row input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-top: .22rem;
	accent-color: var(--accent);
	flex-shrink: 0;
	cursor: pointer;
}

.check-row label {
	font-size: .93rem;
	color: var(--muted);
	cursor: pointer;
	line-height: 1.5;
}

textarea:read-only {
	background: color-mix(in srgb, var(--surface2) 60%, var(--surface));
	color: var(--text);
	opacity: 0.75;
	cursor: default;
}

/* ── Buttons ── */
.btn {
	font-family: var(--mono);
	font-size: .8rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .65rem 1.8rem;
	border: 1px solid var(--text);
	background: var(--text);
	color: var(--surface);
	border-radius: var(--radius);
	cursor: pointer;
	transition: background var(--trans), color var(--trans), opacity
		var(--trans);
	margin-top: 1.5rem;
}

.btn:hover:not(:disabled) {
	background: var(--accent);
	border-color: var(--accent);
}

.btn:disabled {
	opacity: .35;
	cursor: not-allowed;
}

.btn.outline {
	background: transparent;
	color: var(--text);
}

.btn.outline:hover:not(:disabled) {
	background: var(--text);
	color: var(--surface);
}

/* ── Intro text ── */
.intro-text {
	font-size: 1rem;
	line-height: 1.75;
	color: var(--text);
	white-space: pre-line;
}

.intro-counter {
	font-family: var(--mono);
	font-size: .7rem;
	color: var(--muted);
	margin-bottom: 1.25rem;
}

/* ── Rating screen ── */
.question-wrap {
	margin: 1.5rem 0 2rem;
	text-align: center;
}

.question-text {
	font-size: 1.25rem;
	font-weight: normal;
	line-height: 1.6;
	color: var(--text);
}

.question-word {
	font-style: normal;
	font-weight: 600;
	color: var(--accent);
	font-size: 1.4rem;
	display: inline-block;
	transition: opacity .18s ease;
}

/* ── Vertical scale ── */
.scale-wrap {
	margin-top: 1.75rem;
}

.scale-options {
	display: flex;
	flex-direction: column;
}

.scale-option {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .45rem .6rem;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background var(--trans);
	user-select: none;
}

.scale-option:hover {
	background: #e8f0fb;
}

.scale-option:hover .scale-radio {
	border-color: var(--accent);
}

.scale-radio {
	width: 17px;
	height: 17px;
	border-radius: 50%;
	border: 1.5px solid var(--border);
	background: var(--surface);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color var(--trans);
}

.scale-radio::after {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent);
	opacity: 0;
	transition: opacity .12s ease;
}

.scale-option.selected .scale-radio {
	border-color: var(--accent);
}

.scale-option.selected .scale-radio::after {
	opacity: 1;
}

.scale-label {
	font-size: .98rem;
	color: var(--text);
}

.scale-divider {
	border: none;
	border-top: 1px solid var(--border);
	margin: .5rem .6rem;
}

.scale-option.extra .scale-label {
	color: var(--muted);
	font-style: italic;
}

/* ── Spinner / loader ── */
.spinner-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}

.spinner {
	width: 36px;
	height: 36px;
	border: 2.5px solid var(--border);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: spin .8s linear infinite;
}

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

}
.spinner-text {
	font-family: var(--mono);
	font-size: .75rem;
	color: var(--muted);
	letter-spacing: .08em;
}

/* ── Done screen ── */
.done-icon {
	font-size: 2.5rem;
	margin-bottom: 1rem;
	display: block;
	text-align: center;
}

.done-code {
	font-family: var(--mono);
	font-size: .85rem;
	background: #eef4ff;
	border-radius: var(--radius);
	padding: .5rem 1rem;
	display: inline-block;
	color: var(--accent);
	letter-spacing: .05em;
	margin-top: .5rem;
}

/* ── Error ── */
.error-box {
	background: #eef4ff;
	border: 1px solid var(--accent-dim);
	border-radius: var(--radius);
	padding: 1rem 1.25rem;
	font-size: .92rem;
	color: var(--accent);
	margin-top: 1rem;
}

/* ── Fade transition ── */
.fade {
	animation: fadeIn .3s ease both;
}

@keyframes fadeIn {from { opacity:0;
	transform: translateY(6px);
}

to {
	opacity: 1;
	transform: none;
}

}

/* ── Responsive ── */
@media ( max-width : 520px) {
	.card {
		padding: 1.75rem 1.4rem;
	}
	.scale-label {
		font-size: .92rem;
	}
}

/* Two-column input layout */
.text-fields-wrap {
	display: flex;
	gap: 1.25rem;
	margin: 1.5rem 0 0;
}

.text-field-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.text-field-label {
	font-size: .85rem;
	font-weight: 600;
	color: var(--muted, #666);
	line-height: 1.3;
}

.text-field-input {
	width: 100%;
	box-sizing: border-box;
	padding: .6rem .75rem;
	border: 1.5px solid var(--border, #d0d0d0);
	border-radius: 6px;
	font-size: 1rem;
	font-family: inherit;
	background: var(--surface, #fff);
	color: var(--text, #111);
	transition: border-color .15s, box-shadow .15s;
	resize: vertical;
	min-height: 2.6rem;
}

.text-field-input:focus {
	outline: none;
	border-color: var(--accent, #4a6fa5);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #4a6fa5) 18%,
		transparent);
}

.text-field-input:disabled {
	background: var(--surface-muted, #f3f3f3);
	color: var(--muted, #888);
	cursor: not-allowed;
}

/* Divider between fields and the "unknown" option */
.text-unknown-divider {
	border: none;
	border-top: 1px solid var(--border, #d8d8d8);
	margin: 1.25rem 0 1rem;
}

/* Radio row for "unknown" */
.text-unknown-row {
	display: flex;
	align-items: center;
	gap: .65rem;
	cursor: pointer;
	user-select: none;
}

.text-unknown-row input[type="checkbox"] {
	accent-color: var(--accent, #4a6fa5);
	width: 1.05rem;
	height: 1.05rem;
	flex-shrink: 0;
	cursor: pointer;
}

.text-unknown-row span {
	font-size: .9rem;
	color: var(--muted, #666);
}

/* Submit button – reuses existing .btn but scoped here for margin */
.text-submit-btn {
	margin-top: 1.5rem;
	width: 100%;
}

.scale-option.selected .scale-radio {
	background: var(--accent);
	border-color: var(--accent);
}

.error-box {
	background: #2a1a1a;
	color: #f87171;
	border: 1px solid #f87171;
}

.done-icon {
	color: var(--accent);
}

.done-code {
	background: var(--surface2);
	border: 1px solid var(--border);
}

textarea.text-field-input {
	background: var(--surface2);
	border: 1px solid var(--border);
	color: var(--text);
}

textarea.text-field-input:focus {
	border-color: var(--accent);
	outline: none;
}

a {
	color: var(--accent);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
	color: var(--accent-h);
}
/* Example explanation box */
.example-explanation {
	margin-top: 1.25rem;
	background: var(--surface2);
	border-left: 3px solid var(--accent);
	border-radius: 6px;
	padding: .85rem 1rem;
	font-size: .9rem;
	color: var(--muted);
}

.example-explanation-title {
	display: block;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: .4rem;
}

.example-explanation p {
	margin: 0;
	line-height: 1.6;
}

/* ── Demographics form ── */
.demo-section {
	border-top: 1px solid var(--accent);
	padding: 1.25rem 0 .5rem;
	margin-bottom: .25rem;
}

.demo-section:first-of-type {
	border-top: none;
}

.demo-question {
	font-weight: 600;
	color: var(--text);
	margin-bottom: .75rem;
	line-height: 1.5;
}

.demo-sub-question {
	font-size: .9rem;
	color: var(--muted);
	margin-bottom: .5rem;
	margin-top: .25rem;
	line-height: 1.5;
}

.demo-radio-row {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .35rem .5rem;
	border-radius: 6px;
	cursor: pointer;
	font-size: .92rem;
	color: var(--text);
	transition: background .15s;
	margin-bottom: .1rem;
}

.demo-radio-row:hover {
	background: var(--surface2);
}

.demo-radio-row input[type="radio"] {
	accent-color: var(--accent);
	flex-shrink: 0;
}

.demo-check-row {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .3rem .5rem;
	font-size: .85rem;
	color: var(--muted);
	cursor: pointer;
	margin-top: .4rem;
}

.demo-check-row input[type="checkbox"] {
	accent-color: var(--accent);
	flex-shrink: 0;
}

.demo-inline-text {
	background: var(--surface2);
	border: 1px solid var(--border);
	border-radius: 5px;
	color: var(--text);
	padding: .25rem .5rem;
	font-size: .88rem;
	width: 12rem;
	transition: border-color .15s;
}

.demo-inline-text:focus {
	border-color: var(--accent);
	outline: none;
}

.demo-inline-text:disabled {
	opacity: .35;
	cursor: not-allowed;
}

.demo-number {
	background: var(--surface2);
	border: 1px solid var(--border);
	border-radius: 6px;
	color: var(--text);
	padding: .4rem .7rem;
	font-size: 1rem;
	width: 6rem;
}

.demo-number:focus {
	border-color: var(--accent);
	outline: none;
}

.demo-number:disabled {
	opacity: .35;
}
/* Frequency scale */
.demo-freq-scale {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: .5rem;
}

.demo-freq-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .3rem;
	background: var(--surface2);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: .5rem .6rem;
	cursor: pointer;
	flex: 1;
	min-width: 80px;
	text-align: center;
	transition: border-color .15s, background .15s;
}

.demo-freq-option:hover {
	border-color: var(--accent);
}

.demo-freq-option input[type="radio"] {
	display: none;
}

.demo-freq-option:has(input:checked) {
	border-color: var(--accent);
	background: color-mix(in srgb, var(--accent) 15%, var(--surface2));
}

.demo-freq-num {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--accent);
}

.demo-freq-lbl {
	font-size: .72rem;
	color: var(--muted);
	line-height: 1.3;
}
/* Per-language frequency rows */
.demo-lang-freq-row {
	margin-bottom: 1rem;
}

.demo-lang-name {
	display: inline-block;
	font-weight: 600;
	color: var(--accent);
	margin-bottom: .3rem;
	font-size: .9rem;
}