/*
 * Migrando Einbürgerungstest – Widget-Styles (v1.1)
 *
 * Scope: every selector starts with :is(.mig-ebt,.mig-ebt-layer,#mig-ebt) (= :is(.mig-ebt,#mig-ebt)). The id inside :is() never
 * matches, but lifts specificity to id level, so theme / Elementor-kit rules for button, h2, p …
 * can never override the widget, while the widget stays fully self-contained.
 *
 * Design system
 *   Color   ink #00305D · ink-2 #4A6585 · brand #DC2853 (one primary action per screen)
 *           accent #0A55D1 (selected / focus / progress) · canvas #F2F6FF · line #DCE5F5
 *   Type    Poppins 400/600/700. Tokens --fs-xl/lg/md/sm/xs = 28/20/16/14/13 (phones: 22/18/16/14/13).
 *           xl: widget + result headline · lg: screen title, question, feature title, key numbers
 *           md: body, answers, buttons, card titles · sm: descriptions, meta, labels · xs: captions only
 *   Space   4 · 8 · 12 · 16 · 24 · 32 (spacing only via parent gap, never element margins)
 *   Radius  widget 24 · tile 14 · control 12 · inner 8
 */

:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) {
	--ink: #00305d;
	--ink-2: #4a6585;
	--brand: #dc2853;
	--brand-hover: #c21f47;
	--accent: #0a55d1;
	--accent-bg: #eaf1fd;
	--canvas: #f2f6ff;
	--line: #dce5f5;
	--line-strong: #c3d2ec;
	--white: #ffffff;
	--ok: #06935a;
	--ok-bg: #e8f7ef;
	--bad: #c8203f;
	--bad-bg: #fdecef;
	--flag: #a86a00;
	--flag-bg: #fff4db;

	/* type scale: xl display · lg title/question · md body/answers/buttons · sm secondary · xs captions */
	--fs-xl: 28px; --fs-lg: 20px; --fs-md: 16px; --fs-sm: 14px; --fs-xs: 13px;
	--lh-tight: 1.25; --lh-title: 1.35; --lh-body: 1.5;

	--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
	--pad: 32px;
	--r-lg: 24px; --r-md: 14px; --r-sm: 12px; --r-xs: 8px;
	--shadow: 0 8px 32px rgba(0, 48, 93, 0.08);
	--shadow-float: 0 20px 48px rgba(0, 48, 93, 0.18);
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	color: var(--ink);
	font-family: var(--font);
	font-size: var(--fs-md);
	font-weight: 400;
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
}

:is(.mig-ebt,#mig-ebt) {
	container: migebt / inline-size;
	position: relative;
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 850px;
	margin: 0 auto;
	padding: 0;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow);
	color: var(--ink);
	font-family: var(--font);
	font-size: var(--fs-md);
	font-weight: 400;
	line-height: var(--lh-body);
	text-align: left;
	overflow: hidden;
	overflow: clip;
	-webkit-font-smoothing: antialiased;
}

/*
 * container-type: inline-size gives the widget zero intrinsic width. Inside flex containers that
 * size their items from content (Elementor column containers with wrap), the wrapper was measured
 * at that tiny width and kept a huge height below the widget. An explicit width avoids that.
 */
.elementor-widget-migrando_ebtest,
.elementor-widget:has(> .elementor-widget-container > .mig-ebt),
.elementor-widget:has(> .mig-ebt) { width: 100%; max-width: 100%; }

/* ---------------------------------------------------------------- reset */
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) *, :is(.mig-ebt,.mig-ebt-layer,#mig-ebt) *::before, :is(.mig-ebt,.mig-ebt-layer,#mig-ebt) *::after { box-sizing: border-box; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) h2, :is(.mig-ebt,.mig-ebt-layer,#mig-ebt) h3, :is(.mig-ebt,.mig-ebt-layer,#mig-ebt) p, :is(.mig-ebt,.mig-ebt-layer,#mig-ebt) ul, :is(.mig-ebt,.mig-ebt-layer,#mig-ebt) ol, :is(.mig-ebt,.mig-ebt-layer,#mig-ebt) dl, :is(.mig-ebt,.mig-ebt-layer,#mig-ebt) dd, :is(.mig-ebt,.mig-ebt-layer,#mig-ebt) dt, :is(.mig-ebt,.mig-ebt-layer,#mig-ebt) figure, :is(.mig-ebt,.mig-ebt-layer,#mig-ebt) figcaption {
	margin: 0; padding: 0; border: 0; font-family: var(--font); color: inherit; letter-spacing: normal; text-transform: none; background: none;
}
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) ul, :is(.mig-ebt,.mig-ebt-layer,#mig-ebt) ol { list-style: none; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) button, :is(.mig-ebt,.mig-ebt-layer,#mig-ebt) button:where(:hover, :focus, :active) {
	margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
	color: inherit; font: inherit; line-height: inherit; letter-spacing: normal; text-transform: none; text-decoration: none; text-align: inherit;
	min-height: 0; width: auto; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) button:disabled { cursor: not-allowed; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) :focus { outline: none; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) svg { display: block; width: 20px; height: 20px; flex: none; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) strong { font-weight: 600; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) img { max-width: 100%; height: auto; border: 0; box-shadow: none; }

/* ---------------------------------------------------------------- type */
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__display { font-size: var(--fs-xl); line-height: var(--lh-tight); font-weight: 700; color: var(--ink); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__title { font-size: var(--fs-lg); line-height: var(--lh-title); font-weight: 600; color: var(--ink); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__h3 { font-size: var(--fs-md); line-height: var(--lh-title); font-weight: 600; color: var(--ink); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__lead { font-size: var(--fs-md); line-height: var(--lh-body); color: var(--ink-2); max-width: 60ch; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__text { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--ink-2); max-width: 64ch; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__meta { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--ink-2); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__hint { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--ink-2); }

/* -------------------------------------------------------------- shell */
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__screen { display: flex; flex-direction: column; animation: mig-ebt-fade 0.16s ease-out both; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__screen.is-static { animation: none; }
html.mig-ebt-locked, html.mig-ebt-locked body { overflow: hidden; }
@keyframes mig-ebt-fade { from { opacity: 0; } to { opacity: 1; } }

:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__topbar {
	display: flex; align-items: center; gap: var(--s3);
	min-height: 72px; padding: var(--s3) var(--pad);
	border-bottom: 1px solid var(--line);
	background: var(--white);
}
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__topbar-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__topbar .mig-ebt__title { font-variant-numeric: tabular-nums; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__screen--quiz .mig-ebt__topbar .mig-ebt__title { font-size: var(--fs-md); }

:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__body { display: flex; flex-direction: column; gap: var(--s5); padding: var(--pad); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__section { display: flex; flex-direction: column; gap: var(--s3); }

:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__actionbar {
	display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
	padding: var(--s4) var(--pad);
	border-top: 1px solid var(--line);
	background: var(--white);
}
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__actionbar-start, :is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__actionbar-end { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__actionbar-end { margin-left: auto; }

/* ------------------------------------------------------------ buttons */
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
	min-height: 48px; padding: 0 var(--s5);
	border: 1.5px solid transparent; border-radius: var(--r-sm);
	font-size: var(--fs-md); font-weight: 600; line-height: 1.2; white-space: nowrap;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__btn:active:not(:disabled) { transform: scale(0.98); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__btn svg { width: 18px; height: 18px; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__btn--primary { background: var(--brand); border-color: var(--brand); color: var(--white); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__btn--primary:hover:not(:disabled), :is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__feature:hover .mig-ebt__btn--primary { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--white); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__btn--primary:disabled { background: var(--canvas); border-color: var(--line); color: #8fa3bd; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__btn--secondary { background: var(--white); border-color: var(--line-strong); color: var(--ink); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__btn--secondary:hover:not(:disabled) { background: var(--canvas); border-color: var(--ink); color: var(--ink); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__btn--secondary:disabled { color: #9fb0c6; border-color: var(--line); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__btn--text { padding: 0 var(--s3); color: var(--ink-2); font-variant-numeric: tabular-nums; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__btn--text:hover { background: var(--canvas); color: var(--ink); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__btn--danger { background: var(--bad); border-color: var(--bad); color: var(--white); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__btn--danger:hover { background: #a91a35; border-color: #a91a35; color: var(--white); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__btn--icon-start { padding-left: var(--s4); }

:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__iconbtn {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 44px; height: 44px; border: 1.5px solid var(--line); border-radius: var(--r-sm);
	background: var(--white); color: var(--ink); transition: background-color 0.15s, border-color 0.15s;
}
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__iconbtn:hover { background: var(--canvas); border-color: var(--line-strong); color: var(--ink); }

:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__link { padding: var(--s1) 0; color: var(--ink-2); font-size: var(--fs-xs); text-decoration: underline; text-underline-offset: 3px; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__link:hover { color: var(--ink); text-decoration: underline; background: none; }

/* ---------------------------------------------------------------- home */
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__intro { display: flex; flex-direction: column; gap: var(--s2); }

:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__feature {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s5);
	padding: var(--s6); border-radius: var(--r-md);
	background: var(--ink); color: var(--white); text-align: left;
	transition: background-color 0.2s;
}
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__feature:hover { background: #063b6f; color: var(--white); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__feature-text { display: flex; flex-direction: column; gap: var(--s3); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__feature-title { font-size: var(--fs-lg); line-height: var(--lh-title); font-weight: 600; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__feature-desc { font-size: var(--fs-sm); line-height: var(--lh-body); color: rgba(255, 255, 255, 0.78); max-width: 46ch; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; padding-top: var(--s1); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__facts > span { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--s5); border-left: 1px solid rgba(255, 255, 255, 0.24); font-size: var(--fs-xs); line-height: 1.3; color: rgba(255, 255, 255, 0.78); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__facts > span:first-child { padding-left: 0; border-left: 0; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__facts strong { font-size: var(--fs-lg); line-height: 1.2; color: var(--white); font-variant-numeric: tabular-nums; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__feature-best { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.78); }

:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__tile {
	display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4);
	padding: var(--s5); border: 1.5px solid var(--line); border-radius: var(--r-md);
	background: var(--white); text-align: left; transition: border-color 0.15s, background-color 0.15s;
}
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__tile:hover { border-color: var(--accent); background: var(--white); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__tile-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--canvas); color: var(--ink); transition: background-color 0.15s, color 0.15s; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__tile-icon svg { width: 22px; height: 22px; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__tile:hover .mig-ebt__tile-icon { background: var(--accent-bg); color: var(--accent); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__tile-text { display: flex; flex-direction: column; gap: var(--s1); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__tile-title { font-size: var(--fs-md); line-height: var(--lh-title); font-weight: 600; color: var(--ink); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__tile-desc { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--ink-2); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__tile-extra { padding-top: var(--s1); font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); }

:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-2); }

/* ------------------------------------------------------------- choices */
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__states { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
@container migebt (max-width: 719px) {
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__states { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__choice {
	display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
	min-height: 48px; padding: var(--s2) var(--s4);
	border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--white);
	font-size: var(--fs-md); line-height: var(--lh-title); color: var(--ink); text-align: left;
	hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal;
	transition: border-color 0.15s, background-color 0.15s;
}
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__choice:hover { border-color: var(--accent); background: var(--white); color: var(--ink); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__choice.is-on, :is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__choice.is-on:hover { border-color: var(--accent); background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 600; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__choice svg { width: 18px; height: 18px; color: var(--accent); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__choice-label { flex: 1; min-width: 0; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__coa { flex: none; width: 24px; height: 28px; object-fit: contain; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__states .mig-ebt__choice { justify-content: flex-start; gap: var(--s3); padding: var(--s2) var(--s3); font-size: var(--fs-sm); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__choice--num { justify-content: center; min-height: 56px; font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- lists */
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__list { display: flex; flex-direction: column; border: 1.5px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__list > * + * { border-top: 1px solid var(--line); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__row {
	display: flex; align-items: center; gap: var(--s4); width: 100%;
	min-height: 72px; padding: var(--s3) var(--s5);
	background: var(--white); text-align: left; transition: background-color 0.15s;
}
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__row:hover { background: var(--canvas); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__row-lead {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 36px; height: 36px; border-radius: 50%; background: var(--canvas);
	font-size: var(--fs-sm); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums;
}
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__row.is-active .mig-ebt__row-lead { background: var(--accent-bg); color: var(--accent); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__row.is-done .mig-ebt__row-lead { background: var(--ok-bg); color: var(--ok); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__row-lead svg { width: 18px; height: 18px; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__row-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__row-title { font-size: var(--fs-md); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__row-meta { font-size: var(--fs-sm); color: var(--ink-2); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__row.is-done .mig-ebt__row-meta { color: var(--ok); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__row-chev { color: var(--ink-2); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__bar { flex: none; width: 120px; height: 6px; border-radius: 999px; background: var(--canvas); overflow: hidden; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__row.is-done .mig-ebt__bar-fill { background: var(--ok); }

/* ----------------------------------------------------------------- quiz */
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__timer {
	display: inline-flex; align-items: center; gap: var(--s2); flex: none;
	height: 44px; padding: 0 var(--s4); border-radius: var(--r-sm);
	background: var(--canvas); color: var(--ink);
	font-size: var(--fs-md); font-weight: 600; font-variant-numeric: tabular-nums;
	transition: background-color 0.3s, color 0.3s;
}
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__timer svg { width: 18px; height: 18px; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__timer.is-warning { background: var(--flag-bg); color: var(--flag); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__timer.is-danger { background: var(--bad-bg); color: var(--bad); }

:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__progress { height: 4px; background: var(--canvas); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__progress-fill { display: block; height: 100%; background: var(--accent); transition: width 0.4s var(--ease); }

:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__stage { position: relative; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__q { display: flex; flex-direction: column; gap: var(--s5); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__q.is-enter-next { animation: mig-ebt-in-next 0.2s var(--ease) both; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__q.is-enter-prev { animation: mig-ebt-in-prev 0.2s var(--ease) both; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__q.is-leaving { position: absolute; inset: 0 0 auto; pointer-events: none; animation: mig-ebt-out 0.14s ease-in both; }
@keyframes mig-ebt-in-next { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes mig-ebt-in-prev { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes mig-ebt-out { to { opacity: 0; } }

:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__q-head { display: flex; flex-direction: column; gap: var(--s4); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__q-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 32px; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__question { font-size: var(--fs-lg); line-height: var(--lh-title); font-weight: 600; color: var(--ink); max-width: 60ch; }

:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__flag {
	display: inline-flex; align-items: center; gap: 6px;
	height: 32px; padding: 0 var(--s3); border: 1.5px solid var(--line); border-radius: var(--r-xs);
	background: var(--white); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 600;
	transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__flag svg { width: 16px; height: 16px; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__flag:hover { border-color: var(--flag); color: var(--flag); background: var(--white); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__flag.is-on, :is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__flag.is-on:hover { border-color: var(--flag); background: var(--flag-bg); color: var(--flag); }

:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__figure { position: relative; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--white); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__figure img { display: block; width: auto; max-width: 100%; max-height: 440px; margin: 0 auto; object-fit: contain; transition: opacity 0.2s; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__figure.is-loading { min-height: 160px; background: var(--canvas); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__figure.is-loading img { opacity: 0; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__figure.is-failed { display: none; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__figure figcaption { font-size: var(--fs-xs); color: var(--ink-2); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__figure-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__figure-zoom {
	display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
	height: 32px; padding: 0 var(--s2); border-radius: var(--r-xs);
	font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2);
}
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__figure-zoom svg { width: 16px; height: 16px; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__figure-zoom:hover { background: var(--canvas); color: var(--ink); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__figure img { cursor: zoom-in; }

:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answers { display: flex; flex-direction: column; gap: var(--s3); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answers--num { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answer {
	position: relative; display: flex; align-items: center; gap: var(--s4); width: 100%;
	min-height: 60px; padding: var(--s3) var(--s4);
	border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--white);
	font-size: var(--fs-md); line-height: var(--lh-body); color: var(--ink); text-align: left;
	transition: border-color 0.15s, background-color 0.15s;
}
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answer:hover:not(.is-locked) { border-color: var(--accent); background: var(--white); color: var(--ink); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answer:active:not(.is-locked) { transform: scale(0.99); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answer-key {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 32px; height: 32px; border-radius: var(--r-xs); background: var(--canvas);
	font-size: var(--fs-sm); font-weight: 600; color: var(--ink); transition: background-color 0.15s, color 0.15s;
}
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answer-text { flex: 1; min-width: 0; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answer-mark { display: none; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 50%; color: var(--white); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answer-mark svg { display: none; width: 16px; height: 16px; }

:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answer.is-selected, :is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answer.is-selected:hover:not(.is-locked) { border-color: var(--accent); background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answer.is-selected .mig-ebt__answer-key { background: var(--accent); color: var(--white); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answer.is-locked { cursor: default; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answer.is-locked:not(.is-correct):not(.is-wrong) { opacity: 0.55; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answer.is-correct { border-color: var(--ok); background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answer.is-correct .mig-ebt__answer-key { background: var(--ok); color: var(--white); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answer.is-correct .mig-ebt__answer-mark { display: inline-flex; background: var(--ok); animation: mig-ebt-mark 0.3s var(--ease) both; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answer.is-correct .mig-ebt__answer-mark svg:first-child { display: block; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answer.is-wrong { border-color: var(--bad); background: var(--bad-bg); box-shadow: inset 0 0 0 1px var(--bad); animation: mig-ebt-shake 0.36s var(--ease); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answer.is-wrong .mig-ebt__answer-key { background: var(--bad); color: var(--white); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answer.is-wrong .mig-ebt__answer-mark { display: inline-flex; background: var(--bad); animation: mig-ebt-mark 0.3s var(--ease) both; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answer.is-wrong .mig-ebt__answer-mark svg:last-child { display: block; }
@keyframes mig-ebt-mark { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mig-ebt-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }

/* numbered answers (Bild 1–4, Karte 1–4) */
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answer--num { justify-content: center; min-height: 64px; padding: var(--s2); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answer--num .mig-ebt__answer-key { width: auto; height: auto; background: none; font-size: var(--fs-lg); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answer--num.is-selected .mig-ebt__answer-key { background: none; color: var(--accent); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answer--num.is-correct .mig-ebt__answer-key { background: none; color: var(--ok); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answer--num.is-wrong .mig-ebt__answer-key { background: none; color: var(--bad); }
/* numbered answers: colour + feedback line carry the result, no badge over the digit */
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answer--num .mig-ebt__answer-mark { display: none !important; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answer--num .mig-ebt__answer-mark svg { width: 13px; height: 13px; }

:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__feedback:empty { display: none; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__fb { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-sm); font-size: var(--fs-md); line-height: var(--lh-body); animation: mig-ebt-fade 0.2s ease-out both; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__fb svg { margin-top: 1px; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__fb.is-good { background: var(--ok-bg); color: #057049; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__fb.is-bad { background: var(--bad-bg); color: #a3182f; }

/* ------------------------------------------------------ navigator sheet */
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__sheet { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; background: var(--white); overflow: auto; animation: mig-ebt-fade 0.16s ease-out both; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__sheet .mig-ebt__body { flex: 1; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__legend { display: flex; flex-wrap: wrap; gap: var(--s4); font-size: var(--fs-xs); color: var(--ink-2); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__legend span { display: inline-flex; align-items: center; gap: var(--s2); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__legend i { width: 14px; height: 14px; border: 1.5px solid var(--line-strong); border-radius: 4px; background: var(--white); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__legend i.is-answered { background: var(--accent); border-color: var(--accent); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__legend i.is-flagged { background: var(--flag-bg); border-color: var(--flag); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: var(--s2); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__cell {
	display: inline-flex; align-items: center; justify-content: center; height: 48px;
	border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--white);
	font-size: var(--fs-sm); font-weight: 600; color: var(--ink); text-align: center; font-variant-numeric: tabular-nums;
}
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__cell:hover { border-color: var(--accent); background: var(--white); color: var(--ink); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__cell.is-answered, :is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__cell.is-answered:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__cell.is-flagged, :is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__cell.is-flagged:hover { border-color: var(--flag); box-shadow: inset 0 0 0 2px var(--flag); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__cell.is-current { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ------------------------------------------------------ lightbox + modal */
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__lightbox { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: var(--s5); background: rgba(0, 24, 48, 0.86); cursor: zoom-out; animation: mig-ebt-fade 0.16s ease-out both; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__lightbox img { max-width: min(96vw, 1100px); max-height: 88vh; padding: var(--s4); border-radius: var(--r-md); background: var(--white); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__lightbox-close { position: absolute; top: var(--s4); right: var(--s4); }

:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__modal { position: fixed; inset: 0; z-index: 99998; display: flex; align-items: center; justify-content: center; padding: var(--s5); background: rgba(0, 30, 60, 0.4); animation: mig-ebt-fade 0.16s ease-out both; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__modal-box { display: flex; flex-direction: column; gap: var(--s3); width: 100%; max-width: 440px; padding: var(--s5); border-radius: var(--r-md); background: var(--white); box-shadow: var(--shadow-float); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--s2); padding-top: var(--s3); }

/* --------------------------------------------------------------- result */
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__result { display: flex; flex-direction: column; align-items: center; gap: var(--s5); text-align: center; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__result-text { display: flex; flex-direction: column; align-items: center; gap: var(--s2); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__result .mig-ebt__lead { max-width: 48ch; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__ring { position: relative; width: 168px; height: 168px; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__ring-bg { fill: none; stroke: var(--canvas); stroke-width: 10; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__ring-fg { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--ease); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__ring.is-done .mig-ebt__ring-fg { stroke-dashoffset: var(--target); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__ring--pass .mig-ebt__ring-fg { stroke: var(--ok); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__ring--fail .mig-ebt__ring-fg { stroke: var(--bad); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__ring-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__ring-text strong { font-size: var(--fs-lg); line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__ring-text > span { font-size: var(--fs-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__result--pass .mig-ebt__display { color: var(--ok); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__result--fail .mig-ebt__display { color: var(--bad); }

:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__figures { display: flex; justify-content: center; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__figures > div { display: flex; flex-direction: column-reverse; gap: 2px; padding: 0 var(--s5); border-left: 1px solid var(--line); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__figures > div:first-child { border-left: 0; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__figures dt { font-size: var(--fs-xs); color: var(--ink-2); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__figures dd { font-size: var(--fs-lg); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__figures .is-good dd { color: var(--ok); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__figures .is-bad dd { color: var(--bad); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); }

:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__review { display: flex; flex-direction: column; gap: var(--s3); padding-top: var(--s5); border-top: 1px solid var(--line); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__review-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__toggle { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--canvas); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__toggle button { height: 34px; padding: 0 var(--s4); border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__toggle button:hover { color: var(--ink); background: none; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__toggle button.is-on, :is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__toggle button.is-on:hover { background: var(--white); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 48, 93, 0.12); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__list > .mig-ebt__text { padding: var(--s4) var(--s5); }

:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__rev summary { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s4) var(--s5); cursor: pointer; list-style: none; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__rev summary::-webkit-details-marker { display: none; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__rev summary::marker { content: ""; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__rev summary:hover { background: var(--canvas); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__rev-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; color: var(--white); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__rev-mark svg { width: 14px; height: 14px; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__rev.is-good .mig-ebt__rev-mark { background: var(--ok); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__rev.is-bad .mig-ebt__rev-mark { background: var(--bad); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__rev-q { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__rev-title { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--ink); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__rev-chev { color: var(--ink-2); transition: transform 0.15s; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__rev[open] .mig-ebt__rev-chev { transform: rotate(90deg); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__rev-body { display: flex; flex-direction: column; gap: var(--s3); padding: 0 var(--s5) var(--s4) 60px; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__rev-img img { display: block; max-height: 240px; width: auto; border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: var(--s2); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__rev-answers { display: flex; flex-direction: column; gap: var(--s2); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__rev-answers li { display: flex; align-items: flex-start; gap: var(--s3); font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--ink-2); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__rev-answers li > span:last-child { display: flex; flex-wrap: wrap; column-gap: var(--s2); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__rev-key { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 6px; background: var(--canvas); font-size: var(--fs-xs); font-weight: 600; color: var(--ink); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__rev-answers em { font-style: normal; font-size: var(--fs-xs); font-weight: 600; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__rev-answers li.is-correct { color: var(--ink); font-weight: 600; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__rev-answers li.is-correct .mig-ebt__rev-key { background: var(--ok); color: var(--white); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__rev-answers li.is-correct em { color: var(--ok); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__rev-answers li.is-wrong { color: var(--bad); }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__rev-answers li.is-wrong .mig-ebt__rev-key { background: var(--bad); color: var(--white); }

/* --------------------------------------------------------- boot / error */
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__boot { display: flex; flex-direction: column; align-items: center; gap: var(--s3); padding: var(--s6) var(--pad); color: var(--ink-2); text-align: center; }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__boot-spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: mig-ebt-spin 0.9s linear infinite; }
@keyframes mig-ebt-spin { to { transform: rotate(360deg); } }
:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__error { margin: var(--pad); padding: var(--s4) var(--s5); border-radius: var(--r-sm); background: var(--bad-bg); color: #a3182f; }

/* ------------------------------------------- compact (widget < 600px) */
@container migebt (max-width: 599px) {
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__topbar { min-height: 64px; padding: var(--s3) 20px; }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__body { padding: var(--s5) 20px; }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__actionbar { padding: var(--s3) 20px; }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__screen { --fs-xl: 22px; --fs-lg: 18px; }

	/* secondary information steps back on small widths */
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__topbar { min-height: 60px; gap: var(--s3); }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__topbar .mig-ebt__iconbtn { width: 40px; height: 40px; }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__topbar .mig-ebt__iconbtn svg { width: 18px; height: 18px; }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__meta { font-size: var(--fs-xs); }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__topbar .mig-ebt__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__timer { height: 32px; padding: 0 var(--s2); gap: 6px; border-radius: var(--r-xs); font-size: var(--fs-sm); }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__timer svg { width: 14px; height: 14px; }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__q-meta { min-height: 28px; }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__flag { height: 28px; padding: 0 var(--s2); gap: 4px; font-size: var(--fs-xs); }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__flag svg { width: 14px; height: 14px; }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__btn--text { padding: 0 var(--s2); font-size: var(--fs-sm); font-weight: 400; gap: 6px; }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__btn--text svg { width: 16px; height: 16px; }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__btn--icon-start { border-color: var(--line); }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__btn--icon-start svg { width: 16px; height: 16px; }

	/* answers: one notch smaller than body text */
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answer { min-height: 52px; gap: var(--s3); padding: 10px var(--s3); font-size: 15px; }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answer-key { width: 28px; height: 28px; font-size: var(--fs-xs); }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answer--num { min-height: 56px; }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__answer--num .mig-ebt__answer-key { font-size: var(--fs-lg); }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__fb { gap: var(--s2); padding: 10px var(--s3); font-size: var(--fs-sm); }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__fb svg { width: 18px; height: 18px; }

	/* result: the ring supports the score, it should not fill the screen */
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__result { gap: var(--s4); }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__ring { width: 128px; height: 128px; }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__result .mig-ebt__lead { font-size: var(--fs-sm); }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__feature { grid-template-columns: 1fr; align-items: stretch; padding: var(--s5); }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__feature .mig-ebt__btn { width: 100%; }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__facts > span { padding: 0 var(--s4); white-space: nowrap; }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__facts > span:first-child { padding-left: 0; }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__states .mig-ebt__choice { gap: var(--s2); padding: var(--s2) 10px; }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__coa { width: 20px; height: 24px; }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__tiles { grid-template-columns: 1fr; gap: var(--s2); }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__tile { flex-direction: row; align-items: center; padding: var(--s4); }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__states { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__row { padding: var(--s3) var(--s4); gap: var(--s3); }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__bar { display: none; }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__figures > div { padding: 0 var(--s4); }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__result-actions { flex-direction: column; align-self: stretch; }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__result-actions .mig-ebt__btn { width: 100%; }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__rev summary { padding: var(--s3) var(--s4); }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__rev-body { padding: 0 var(--s4) var(--s4) 52px; }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__btn--icon-start span { display: none; }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__btn--icon-start { padding: 0 var(--s3); }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__actionbar-end { flex: 1; justify-content: flex-end; }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__actionbar-end .mig-ebt__btn { flex: 1; }
}

/* --------------------------------------------- phone: full-bleed app feel */
/* ------------------------------------------------------------- phone */
@media (max-width: 767px) {
	/* stays inside the page column with a visible frame, so the end of the tool is clear */
	:is(.mig-ebt,#mig-ebt) { border-color: var(--line-strong); border-radius: 20px; box-shadow: 0 4px 16px rgba(0, 48, 93, 0.06); }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__actionbar { position: sticky; bottom: 0; z-index: 5; padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom)); box-shadow: 0 -6px 16px rgba(0, 48, 93, 0.06); }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__btn { min-height: 52px; }
	.mig-ebt-layer { --fs-xl: 22px; --fs-lg: 18px; }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__modal { align-items: flex-end; padding: var(--s3); }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__modal-box { max-width: none; }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__modal-actions { flex-direction: column-reverse; }
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__modal-actions .mig-ebt__btn { width: 100%; }
}

@media (max-width: 380px) {
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) .mig-ebt__states { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
	:is(.mig-ebt,.mig-ebt-layer,#mig-ebt) *, :is(.mig-ebt,.mig-ebt-layer,#mig-ebt) *::before, :is(.mig-ebt,.mig-ebt-layer,#mig-ebt) *::after { animation: none !important; transition: none !important; }
}