/* =====================================================================
   StatuteIQ — quiz styles
   Mobile-first. All colours/spacing/typography flow from the design
   tokens below, extracted from the uploaded design mockup (deep green
   brand panel, bright green CTAs, gold accents, cream surfaces).
   ===================================================================== */

#statuteiq-app {
	/* ---- Design tokens (single source of truth) ---- */
	--siq-green-950: #072e1d;
	--siq-green-900: #0b4a2f;   /* brand panel / header bar */
	--siq-green-800: #0e5c3a;
	--siq-green-600: #1b8a46;   /* progress fill, rings */
	--siq-green-500: #21a24f;   /* primary CTA */
	--siq-green-100: #e6f4ec;   /* selected option fill, soft banners */
	--siq-green-200: #cbe8d7;
	--siq-gold-500:  #d9a62b;   /* accents, trophy, tip bulb */
	--siq-gold-100:  #fdf4dd;
	--siq-blue-500:  #2f6fdb;   /* 'Good' tier */
	--siq-blue-100:  #e8f0fd;
	--siq-amber-500: #e9a23b;   /* 'Average' tier */
	--siq-amber-100: #fdf1de;
	--siq-red-500:   #d93636;   /* 'Needs Improvement', incorrect */
	--siq-red-100:   #fdeaea;
	--siq-ink-900:   #14201a;   /* headings */
	--siq-ink-700:   #33413a;   /* body */
	--siq-ink-500:   #6b7a72;   /* muted */
	--siq-surface:   #ffffff;
	--siq-bg:        #f4f7f5;
	--siq-border:    #e2e9e4;

	--siq-radius-sm: 8px;
	--siq-radius-md: 12px;
	--siq-radius-lg: 18px;
	--siq-shadow-card: 0 4px 18px rgba(11, 74, 47, 0.08);
	--siq-shadow-lift: 0 8px 28px rgba(11, 74, 47, 0.14);

	--siq-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--siq-fs-xs:   clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
	--siq-fs-sm:   clamp(0.84rem, 0.8rem + 0.25vw, 0.94rem);
	--siq-fs-base: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);
	--siq-fs-lg:   clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
	--siq-fs-xl:   clamp(1.35rem, 1.15rem + 1vw, 1.8rem);
	--siq-fs-hero: clamp(1.6rem, 1.3rem + 1.8vw, 2.5rem);

	--siq-space-1: 6px;
	--siq-space-2: 10px;
	--siq-space-3: 16px;
	--siq-space-4: 24px;
	--siq-space-5: 36px;
	--siq-tap: 44px; /* minimum touch target */
	--siq-max-w: 1100px;

	font-family: var(--siq-font);
	color: var(--siq-ink-700);
	line-height: 1.55;
	max-width: var(--siq-max-w);
	margin: 0 auto;
	padding: var(--siq-space-3);
	box-sizing: border-box;
}
#statuteiq-app *,
#statuteiq-app *::before,
#statuteiq-app *::after { box-sizing: border-box; }
#statuteiq-app img { max-width: 100%; }

/* ---------- Shared primitives ---------- */
.siq-card {
	background: var(--siq-surface);
	border: 1px solid var(--siq-border);
	border-radius: var(--siq-radius-lg);
	box-shadow: var(--siq-shadow-card);
	overflow: hidden;
}
.siq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--siq-tap);
	padding: 10px 22px;
	border-radius: var(--siq-radius-sm);
	border: 1px solid transparent;
	font: 600 var(--siq-fs-base) var(--siq-font);
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.siq-btn:focus-visible,
#statuteiq-app a:focus-visible,
#statuteiq-app input:focus-visible,
#statuteiq-app select:focus-visible {
	outline: 3px solid var(--siq-gold-500);
	outline-offset: 2px;
}
.siq-btn:active { transform: translateY(1px); }
.siq-btn--primary { background: var(--siq-green-500); color: #fff; }
.siq-btn--primary:hover { background: var(--siq-green-600); color: #fff; }
.siq-btn--dark { background: var(--siq-green-900); color: #fff; }
.siq-btn--dark:hover { background: var(--siq-green-800); color: #fff; }
.siq-btn--ghost {
	background: var(--siq-surface);
	color: var(--siq-green-800);
	border-color: var(--siq-border);
}
.siq-btn--ghost:hover { border-color: var(--siq-green-600); color: var(--siq-green-600); }
.siq-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.siq-arrow { font-weight: 700; }

.siq-badge {
	display: inline-block;
	font-size: var(--siq-fs-xs);
	font-weight: 700;
	padding: 2px 10px;
	border-radius: 999px;
	letter-spacing: 0.02em;
}
.siq-badge--easy     { background: var(--siq-green-100); color: var(--siq-green-800); }
.siq-badge--moderate { background: var(--siq-amber-100); color: #9a6a17; }
.siq-badge--advanced { background: var(--siq-red-100);   color: var(--siq-red-500); }

/* ---------- Screen 1: Hero / start ---------- */
.siq-hero {
	background: linear-gradient(150deg, var(--siq-green-900) 0%, var(--siq-green-950) 100%);
	color: #fff;
	padding: var(--siq-space-5) var(--siq-space-4);
	border-radius: var(--siq-radius-lg);
	position: relative;
}
.siq-hero__shield {
	width: 58px;
	height: 58px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.1);
	border: 2px solid var(--siq-gold-500);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	margin-bottom: var(--siq-space-3);
}
.siq-hero h1 {
	margin: 0 0 var(--siq-space-2);
	font-size: var(--siq-fs-hero);
	line-height: 1.15;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}
.siq-hero h1 span { color: #9fe3bb; display: block; }
.siq-hero__tag { font-size: var(--siq-fs-lg); font-weight: 700; color: #dff3e7; margin: 0 0 var(--siq-space-1); }
.siq-hero__sub { color: #c7dfd0; max-width: 46ch; margin: 0 0 var(--siq-space-4); font-size: var(--siq-fs-base); }
.siq-hero__points { list-style: none; margin: 0 0 var(--siq-space-4); padding: 0; display: grid; gap: var(--siq-space-2); }
.siq-hero__points li { display: flex; gap: 10px; align-items: flex-start; color: #e6f4ec; font-size: var(--siq-fs-sm); }
.siq-hero__points .siq-ic {
	flex: 0 0 26px; height: 26px; border-radius: 7px;
	background: rgba(255, 255, 255, 0.12);
	display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}
.siq-hero__meta {
	display: flex; flex-wrap: wrap; gap: var(--siq-space-2) var(--siq-space-4);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	margin-top: var(--siq-space-4); padding-top: var(--siq-space-3);
	color: #cfe8da; font-size: var(--siq-fs-xs); font-weight: 600;
}
.siq-hero__motto { text-align: center; margin-top: var(--siq-space-3); color: var(--siq-gold-500); font-weight: 700; font-size: var(--siq-fs-sm); }

/* ---------- Screen 2: Details form ---------- */
.siq-gate { display: grid; gap: 0; }
.siq-gate__brand {
	background: linear-gradient(160deg, var(--siq-green-900), var(--siq-green-950));
	color: #fff; padding: var(--siq-space-5) var(--siq-space-4); text-align: center;
}
.siq-gate__brand h2 { color: #fff; margin: var(--siq-space-3) 0 var(--siq-space-1); font-size: var(--siq-fs-xl); text-transform: uppercase; line-height: 1.2; }
.siq-gate__brand h2 span { color: #8fdcae; }
.siq-gate__brand p { color: #c7dfd0; font-size: var(--siq-fs-sm); max-width: 40ch; margin: 0 auto; }
.siq-gate__pills { display: flex; justify-content: center; gap: var(--siq-space-2); margin-top: var(--siq-space-4); flex-wrap: wrap; }
.siq-gate__pills span {
	border: 1px solid rgba(255,255,255,0.25); border-radius: 10px;
	padding: 8px 14px; font-size: var(--siq-fs-xs); font-weight: 700; color: #e6f4ec;
}
.siq-gate__form { padding: var(--siq-space-4); }
.siq-gate__form h3 { margin: 0 0 4px; color: var(--siq-ink-900); font-size: var(--siq-fs-xl); }
.siq-gate__form h3::after { content: ""; display: block; width: 44px; height: 3px; background: var(--siq-green-500); border-radius: 2px; margin-top: 6px; }
.siq-gate__form > p { color: var(--siq-ink-500); font-size: var(--siq-fs-sm); margin: var(--siq-space-2) 0 var(--siq-space-3); }
.siq-field { margin-bottom: var(--siq-space-3); }
.siq-field label { display: block; font-size: var(--siq-fs-xs); font-weight: 700; color: var(--siq-ink-700); margin-bottom: 4px; }
.siq-field input,
.siq-field select {
	width: 100%; min-height: var(--siq-tap);
	border: 1px solid var(--siq-border); border-radius: var(--siq-radius-sm);
	padding: 10px 14px; font: 400 var(--siq-fs-base) var(--siq-font);
	color: var(--siq-ink-900); background: var(--siq-surface);
}
.siq-field input:focus, .siq-field select:focus { border-color: var(--siq-green-500); }
.siq-field .siq-err { color: var(--siq-red-500); font-size: var(--siq-fs-xs); margin-top: 3px; display: none; }
.siq-field.is-invalid input, .siq-field.is-invalid select { border-color: var(--siq-red-500); }
.siq-field.is-invalid .siq-err { display: block; }
.siq-gate__privacy { display: flex; gap: 8px; align-items: flex-start; color: var(--siq-ink-500); font-size: var(--siq-fs-xs); margin-top: var(--siq-space-3); }

/* ---------- Screen 3: Question ---------- */
.siq-topbar {
	background: var(--siq-green-900); color: #fff;
	border-radius: var(--siq-radius-md);
	padding: var(--siq-space-2) var(--siq-space-3);
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--siq-space-2) var(--siq-space-3);
	margin-bottom: var(--siq-space-3);
}
.siq-topbar__title { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: var(--siq-fs-sm); text-transform: uppercase; letter-spacing: 0.02em; flex: 1 1 240px; }
.siq-topbar__title .siq-mini-shield { width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid var(--siq-gold-500); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex: 0 0 30px; }
.siq-topbar__progress { display: flex; align-items: center; gap: 10px; font-size: var(--siq-fs-xs); font-weight: 700; flex: 1 1 220px; min-width: 200px; }
.siq-pbar { flex: 1; height: 10px; background: rgba(255, 255, 255, 0.9); border-radius: 999px; overflow: hidden; }
.siq-pbar > span { display: block; height: 100%; width: 0; background: var(--siq-green-500); border-radius: 999px; transition: width 0.25s ease; }

.siq-quiz-layout { display: grid; gap: var(--siq-space-3); grid-template-columns: 1fr; }
.siq-qcard { padding: var(--siq-space-4); }
.siq-qcard__meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--siq-space-2); }
.siq-qcard__topic { font-size: var(--siq-fs-xs); color: var(--siq-ink-500); font-weight: 600; align-self: center; }
.siq-qcard h2 { margin: 0 0 var(--siq-space-3); font-size: var(--siq-fs-lg); color: var(--siq-ink-900); line-height: 1.4; white-space: pre-line; }
.siq-qcard__hint { font-size: var(--siq-fs-xs); color: var(--siq-ink-500); margin: -8px 0 var(--siq-space-3); }

.siq-opts { display: grid; gap: var(--siq-space-2); margin: 0; padding: 0; list-style: none; }
.siq-opt { position: relative; }
.siq-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.siq-opt label {
	display: flex; align-items: center; gap: 12px;
	min-height: var(--siq-tap);
	border: 1.5px solid var(--siq-border); border-radius: var(--siq-radius-md);
	padding: 12px 16px; cursor: pointer;
	font-size: var(--siq-fs-base); color: var(--siq-ink-700);
	background: var(--siq-surface);
	transition: border-color 0.15s ease, background 0.15s ease;
}
.siq-opt label:hover { border-color: var(--siq-green-500); }
.siq-opt input:focus-visible + label { outline: 3px solid var(--siq-gold-500); outline-offset: 2px; }
.siq-opt .siq-opt__ctl {
	flex: 0 0 20px; width: 20px; height: 20px;
	border: 2px solid #b6c4bc; border-radius: 50%;
	position: relative; transition: border-color 0.15s ease;
}
.siq-opt--multi .siq-opt__ctl { border-radius: 5px; }
.siq-opt input:checked + label { border-color: var(--siq-green-500); background: var(--siq-green-100); }
.siq-opt input:checked + label .siq-opt__ctl { border-color: var(--siq-green-500); }
.siq-opt input:checked + label .siq-opt__ctl::after {
	content: ""; position: absolute; inset: 3px;
	background: var(--siq-green-500); border-radius: inherit;
}
.siq-opt__key { font-weight: 700; color: var(--siq-green-800); }

.siq-qnav { display: flex; justify-content: space-between; gap: var(--siq-space-2); margin-top: var(--siq-space-4); flex-wrap: wrap; }

.siq-side { display: grid; gap: var(--siq-space-3); align-content: start; }
.siq-side__card { padding: var(--siq-space-3) var(--siq-space-4); }
.siq-side__card h3 { margin: 0 0 var(--siq-space-2); font-size: var(--siq-fs-base); color: var(--siq-ink-900); }
.siq-donut-wrap { display: flex; justify-content: center; padding: var(--siq-space-2) 0; }
.siq-donut { width: 120px; height: 120px; }
.siq-donut circle { fill: none; stroke-width: 10; }
.siq-donut .siq-donut__track { stroke: #e7efe9; }
.siq-donut .siq-donut__fill {
	stroke: var(--siq-green-600); stroke-linecap: round;
	transform: rotate(-90deg); transform-origin: 50% 50%;
	transition: stroke-dashoffset 0.4s ease;
}
.siq-donut text { font: 700 15px var(--siq-font); fill: var(--siq-ink-900); }
.siq-donut .siq-donut__sub { font-size: 8px; font-weight: 600; fill: var(--siq-ink-500); }
.siq-stats { list-style: none; margin: 0; padding: 0; }
.siq-stats li {
	display: flex; justify-content: space-between; align-items: center;
	padding: 9px 0; border-top: 1px solid var(--siq-border);
	font-size: var(--siq-fs-sm);
}
.siq-stats li strong { color: var(--siq-ink-900); }
.siq-tip { background: var(--siq-surface); }
.siq-tip h3 { display: flex; align-items: center; gap: 8px; }
.siq-tip h3::before { content: "💡"; }
.siq-tip p { margin: 0; font-size: var(--siq-fs-sm); color: var(--siq-ink-500); }

/* ---------- Screen 4: Results ---------- */
.siq-results__head {
	position: relative;
	background:
		radial-gradient(circle at 12% 20%, rgba(217,166,43,.45) 0 4px, transparent 5px),
		radial-gradient(circle at 30% 60%, rgba(47,111,219,.45) 0 4px, transparent 5px),
		radial-gradient(circle at 55% 25%, rgba(33,162,79,.5) 0 4px, transparent 5px),
		radial-gradient(circle at 75% 55%, rgba(217,54,54,.4) 0 4px, transparent 5px),
		radial-gradient(circle at 90% 30%, rgba(217,166,43,.5) 0 4px, transparent 5px),
		var(--siq-green-900);
	height: 86px; border-radius: var(--siq-radius-lg) var(--siq-radius-lg) 0 0;
}
.siq-results__trophy {
	width: 72px; height: 72px; border-radius: 50%;
	background: #fff; box-shadow: var(--siq-shadow-lift);
	display: flex; align-items: center; justify-content: center;
	font-size: 34px; margin: -36px auto 0; position: relative;
}
.siq-results__body { padding: var(--siq-space-3) var(--siq-space-4) var(--siq-space-4); text-align: center; }
.siq-results__body > h2 { color: var(--siq-green-800); font-size: var(--siq-fs-xl); margin: var(--siq-space-2) 0 4px; }
.siq-results__body > .siq-results__sub { color: var(--siq-ink-500); font-size: var(--siq-fs-sm); margin: 0 0 var(--siq-space-4); }

.siq-results__grid { display: grid; gap: var(--siq-space-3); grid-template-columns: 1fr; text-align: left; }
.siq-scorecard { padding: var(--siq-space-4); display: grid; gap: var(--siq-space-3); }
.siq-scorecard__top { display: flex; gap: var(--siq-space-4); align-items: center; flex-wrap: wrap; }
.siq-scorecard__msg h3 { margin: 0 0 6px; font-size: var(--siq-fs-lg); color: var(--siq-green-800); }
.siq-scorecard__msg p { margin: 0; font-size: var(--siq-fs-sm); color: var(--siq-ink-500); max-width: 42ch; }
.siq-scorecard__msg.tier-good h3 { color: var(--siq-blue-500); }
.siq-scorecard__msg.tier-average h3 { color: var(--siq-amber-500); }
.siq-scorecard__msg.tier-poor h3 { color: var(--siq-red-500); }
.siq-numbers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--siq-border); border: 1px solid var(--siq-border); border-radius: var(--siq-radius-md); overflow: hidden; }
.siq-numbers div { background: var(--siq-surface); padding: var(--siq-space-2) var(--siq-space-3); text-align: center; }
.siq-numbers small { display: block; color: var(--siq-ink-500); font-size: var(--siq-fs-xs); font-weight: 600; }
.siq-numbers strong { font-size: var(--siq-fs-lg); color: var(--siq-ink-900); }
.siq-numbers .is-bad strong { color: var(--siq-red-500); }

.siq-tiers { padding: var(--siq-space-3) var(--siq-space-4); }
.siq-tiers h3 { margin: 0 0 var(--siq-space-2); font-size: var(--siq-fs-base); color: var(--siq-ink-900); }
.siq-tiers ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.siq-tiers li { display: flex; gap: 10px; align-items: center; border-radius: var(--siq-radius-sm); padding: 10px 12px; font-size: var(--siq-fs-sm); font-weight: 600; }
.siq-tiers li small { font-weight: 500; color: inherit; opacity: 0.8; margin-left: auto; }
.siq-tier--excellent { background: var(--siq-green-100); color: var(--siq-green-800); }
.siq-tier--good      { background: var(--siq-blue-100);  color: var(--siq-blue-500); }
.siq-tier--average   { background: var(--siq-amber-100); color: #9a6a17; }
.siq-tier--poor      { background: var(--siq-red-100);   color: var(--siq-red-500); }
.siq-tiers li.is-current { outline: 2px solid currentColor; }

.siq-grow {
	display: flex; gap: 12px; align-items: flex-start; text-align: left;
	background: var(--siq-green-100); border-radius: var(--siq-radius-md);
	padding: var(--siq-space-3) var(--siq-space-4); margin-top: var(--siq-space-3);
	font-size: var(--siq-fs-sm); color: var(--siq-green-800);
}
.siq-grow strong { display: block; }

.siq-results__actions { display: flex; gap: var(--siq-space-2); flex-wrap: wrap; justify-content: center; margin-top: var(--siq-space-4); }

/* Topic breakdown */
.siq-topics { padding: var(--siq-space-3) var(--siq-space-4); text-align: left; }
.siq-topics h3 { margin: 0 0 var(--siq-space-2); font-size: var(--siq-fs-base); color: var(--siq-ink-900); }
.siq-topic-row { margin-bottom: var(--siq-space-2); }
.siq-topic-row__label { display: flex; justify-content: space-between; gap: 10px; font-size: var(--siq-fs-xs); font-weight: 600; color: var(--siq-ink-700); margin-bottom: 4px; }
.siq-topic-row .siq-pbar { height: 8px; background: #e7efe9; }

/* ---------- Screen 5: Review ---------- */
.siq-review { display: grid; gap: var(--siq-space-3); }
.siq-review__item { padding: var(--siq-space-4); border-left: 5px solid var(--siq-green-500); }
.siq-review__item.is-wrong { border-left-color: var(--siq-red-500); }
.siq-review__meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: var(--siq-space-2); font-size: var(--siq-fs-xs); color: var(--siq-ink-500); font-weight: 600; }
.siq-review__status { font-weight: 800; }
.siq-review__item .siq-review__status { color: var(--siq-green-600); }
.siq-review__item.is-wrong .siq-review__status { color: var(--siq-red-500); }
.siq-review__item h3 { margin: 0 0 var(--siq-space-2); font-size: var(--siq-fs-base); color: var(--siq-ink-900); line-height: 1.45; white-space: pre-line; }
.siq-review__opts { list-style: none; margin: 0 0 var(--siq-space-3); padding: 0; display: grid; gap: 6px; }
.siq-review__opts li {
	border: 1.5px solid var(--siq-border); border-radius: var(--siq-radius-sm);
	padding: 9px 12px; font-size: var(--siq-fs-sm); display: flex; gap: 8px; align-items: baseline;
}
.siq-review__opts li.is-correct { border-color: var(--siq-green-500); background: var(--siq-green-100); }
.siq-review__opts li.is-chosen-wrong { border-color: var(--siq-red-500); background: var(--siq-red-100); }
.siq-review__opts .siq-flag { margin-left: auto; font-size: var(--siq-fs-xs); font-weight: 700; white-space: nowrap; }
.siq-review__expl {
	background: var(--siq-gold-100); border-left: 4px solid var(--siq-gold-500);
	border-radius: 0 var(--siq-radius-sm) var(--siq-radius-sm) 0;
	padding: var(--siq-space-2) var(--siq-space-3);
	font-size: var(--siq-fs-sm); color: var(--siq-ink-700);
}
.siq-review__expl strong:first-child { color: #8a6614; }

/* ---------- Loading / error states (extension of design language) ---------- */
.siq-loading, .siq-error { text-align: center; padding: var(--siq-space-5) var(--siq-space-4); }
.siq-spinner {
	width: 40px; height: 40px; margin: 0 auto var(--siq-space-3);
	border: 4px solid var(--siq-green-100); border-top-color: var(--siq-green-500);
	border-radius: 50%; animation: siq-spin 0.8s linear infinite;
}
@keyframes siq-spin { to { transform: rotate(360deg); } }
.siq-error { color: var(--siq-red-500); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
	#statuteiq-app * { animation: none !important; transition: none !important; }
}

/* ---------- Breakpoints ---------- */
/* Tablet ≥ 481px */
@media (min-width: 481px) {
	.siq-numbers { grid-template-columns: repeat(4, 1fr); }
	.siq-gate { grid-template-columns: 1fr 1fr; }
	.siq-gate__brand { display: flex; flex-direction: column; justify-content: center; }
}
/* Desktop ≥ 1025px */
@media (min-width: 1025px) {
	.siq-quiz-layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
	.siq-results__grid { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
	.siq-hero { padding: var(--siq-space-5); }
}