/*
 * The site quiz panel.
 *
 * Built to "MyMagicTrip Site Quiz" (19 frames). Every colour and radius below
 * is lifted from that file rather than approximated.
 *
 * The one rule the whole layout serves: the panel must never cover what it just
 * sent someone to read. So it is bottom right and narrow on desktop, and on a
 * phone it drops to a bar the moment a link is followed.
 */

.mtq {
	--mtq-blue:   #1565C0;
	--mtq-blue-d: #0F4C96;
	--mtq-blue-t: #EAF2FD;
	--mtq-blue-b: #DCE9FA;
	--mtq-ink:    #16243E;
	--mtq-ink-2:  #1B2B4B;
	--mtq-ink-6:  #41506B;
	--mtq-ink-5:  #5C6779;
	--mtq-mute:   #8894A8;
	--mtq-bd:     #E2E8F2;
	--mtq-bd-2:   #E5EBF4;
	--mtq-surf:   #F8FAFD;
	--mtq-surf-2: #EEF2F8;
	--mtq-ok:     #1F7A3D;
	--mtq-ok-d:   #15532A;
	--mtq-ok-sq:  #8FE3A8;
	--mtq-ok-bg:  #DCF0E4;
	--mtq-ok-bd:  #BEDECB;
	--mtq-no:     #A62A28;
	--mtq-no-m:   #C2413A;
	--mtq-no-sq:  #F5A39C;
	--mtq-no-bg:  #FBEAE8;
	--mtq-no-bd:  #E0857C;

	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9000;
	/*
	 * The SHELL hugs whatever is in it; the open card sets its own width below.
	 * Putting the width here made the closed launcher and the minimised pill
	 * 420px wide too, so a two-word button spanned a third of the screen.
	 */
	width: max-content;
	max-width: calc(100vw - 32px);
	font-size: 14px;
	line-height: 1.45;
	color: var(--mtq-ink);
	-webkit-font-smoothing: antialiased;
}

.mtq, .mtq * { box-sizing: border-box; }
/*
 * font-FAMILY, never the `font` shorthand.
 *
 * `font: inherit` resets weight, size, style and line-height in one go, and
 * `.mtq button` is specificity 0,1,1 against `.mtq__btn`'s 0,1,0, so it beat
 * every weight and size the button classes set. Every button in the panel
 * rendered at weight 400 and 14px: Check, Next question, Start the quiz, New
 * quiz, Share, Copy message. The shorthand looked like a reset and was an
 * override.
 *
 * Each button class now states its own size and weight, so nothing here has to
 * win a specificity argument to be read.
 */
.mtq button { font-family: inherit; cursor: pointer; }
/* Text inside a button is never underlined on this site. */
.mtq button, .mtq button:hover { text-decoration: none; }

/* ── the closed launcher ─────────────────────────────────────────────── */

/*
 * A pill, not a bare icon. "Quiz" is not an icon anyone recognises, and a
 * floating question mark reads as help rather than as a game.
 *
 * The halo is the design's, not a flourish: a 6px ring of 14% brand blue, which
 * separates the pill from whatever it happens to be sitting over without
 * needing a border on the pill itself.
 */
.mtq__launch {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 54px;
	padding: 0 20px 0 16px;
	border: 0;
	border-radius: 999px;
	background: var(--mtq-blue);
	color: #fff;
	text-align: left;
	box-shadow: 0 0 0 6px rgba(21, 101, 192, .14), 0 14px 30px rgba(21, 101, 192, .34);
	transition: background .15s;
}
.mtq__launch:hover { background: var(--mtq-blue-d); }
.mtq__launch-t { display: block; font-size: 15px; font-weight: 800; line-height: 1.15; }
.mtq__launch-s { display: block; font-size: 11.5px; color: var(--mtq-blue-b); }
/* A white disc, so the mark reads as a badge rather than as an outline on blue. */
.mtq__launch-i {
	flex: none;
	width: 30px; height: 30px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: #fff;
	color: var(--mtq-blue);
}

/* ── the card ────────────────────────────────────────────────────────── */

.mtq__card {
	/* The design draws 380. Matt asked for a touch wider on 14 Oct. */
	width: 420px;
	max-width: calc(100vw - 32px);
	background: #fff;
	border: 1px solid #D8E4F5;
	border-radius: 18px;
	/* Three layers, as drawn: a hairline, a near shadow and a far one. A single
	   large blur reads as a drop shadow; this reads as a card lifted off a page. */
	box-shadow: 0 1px 2px rgba(6, 28, 58, .06), 0 12px 28px rgba(6, 28, 58, .14),
	            0 32px 64px rgba(6, 28, 58, .12);
	overflow: hidden;
}

/*
 * The header is brand blue and carries the progress strip with it.
 *
 * It was white, which made the panel read as a notification rather than as part
 * of the site. On blue the strip switches to its light palette, and the
 * unanswered segments become 30% white instead of a grey that would disappear.
 */
.mtq__head {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 13px 16px 12px;
	background: var(--mtq-blue);
}
.mtq__head-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.mtq__step { font-size: 14.5px; font-weight: 800; color: #fff; }
/*
 * A WHITE pill with dark blue text, which is the on-blue variant. The green
 * one (#DCF0E4 on #15532A) is the guide block's, where the background is light;
 * using it here put a pale green chip on brand blue.
 */
.mtq__right {
	flex: none;
	font-size: 12.5px;
	font-weight: 800;
	color: var(--mtq-blue-d);
	background: #fff;
	border-radius: 999px;
	padding: 3px 9px;
}
.mtq__x {
	flex: none;
	padding: 0;
	width: 30px; height: 30px;
	display: grid; place-items: center;
	border: 0; border-radius: 8px;
	background: rgba(0, 0, 0, .18); color: #fff;
	line-height: 1;
}
.mtq__x:hover { background: rgba(0, 0, 0, .30); }

/*
 * The progress strip. Right in green, wrong in red, so the score is readable
 * without the number next to it, and so the finished pattern is the thing that
 * makes a share card comparable at a glance.
 */
.mtq__strip { display: flex; gap: 4px; }
.mtq__sq { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.30); }
.mtq__sq--ok  { background: var(--mtq-ok-sq); }
.mtq__sq--no  { background: var(--mtq-no-sq); }
.mtq__sq--now { background: #fff; }

.mtq__body { padding: 12px 14px 14px; }

/* The section hint, above the question because it is read first. */
.mtq__hint {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--mtq-blue-d);
	background: var(--mtq-blue-t);
	border-radius: 999px;
	padding: 3px 10px;
	margin: 0 0 8px;
}
.mtq__q {
	margin: 0 0 12px;
	font-size: 18px; font-weight: 800;
	letter-spacing: -.014em; line-height: 1.3;
	text-wrap: pretty;
}

/* ── options ─────────────────────────────────────────────────────────── */

.mtq__opts { display: grid; gap: 7px; }
/* Grid, not flex, so a long answer wraps against the letter rather than under
   it, and min-height holds the row open when the answer is one short word. */
.mtq__opt {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	gap: 11px;
	align-items: center;
	width: 100%;
	/* The design draws 48 and 9px. Matt asked for more room on 14 Oct, so the
	   row is 54 with the padding to match: a single-line answer is centred by
	   min-height, so the padding only shows once it is raised with it. */
	min-height: 54px;
	padding: 12px 14px;
	text-align: left;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.3;
	background: #fff;
	border: 1px solid var(--mtq-bd);
	border-radius: 13px;
	color: var(--mtq-ink-2);
	transition: border-color .12s, background .12s;
}
.mtq__opt:hover:not(:disabled) { border-color: #C9D6E9; background: var(--mtq-surf); }
.mtq__opt[aria-checked="true"] { border-color: var(--mtq-blue); background: var(--mtq-blue-t); }
.mtq__opt:disabled { cursor: default; }
.mtq__ltr {
	flex: none;
	width: 26px; height: 26px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 8px;
	background: #F4F8FD;
	border: 1px solid var(--mtq-bd);
	color: var(--mtq-ink-5);
	font-size: 12.5px; font-weight: 800;
}
.mtq__opt[aria-checked="true"] .mtq__ltr { background: var(--mtq-blue); color: #fff; border-color: transparent; }

/* After checking: green on the right one, red on the pick that was wrong. */
.mtq__opt--ok  { border: 1.5px solid var(--mtq-ok-bd); background: var(--mtq-ok-bg); color: var(--mtq-ok-d); font-weight: 800; }
.mtq__opt--ok  .mtq__ltr { background: var(--mtq-ok); color: #fff; border-color: transparent; }
.mtq__opt--no  { border-color: var(--mtq-no-bd); background: var(--mtq-no-bg); color: var(--mtq-no); }
.mtq__opt--no  .mtq__ltr { background: var(--mtq-no-m); color: #fff; }

/* ── typed answer ────────────────────────────────────────────────────── */

.mtq__lab { display: block; font-size: 12.5px; font-weight: 700; color: var(--mtq-ink-6); margin: 0 0 5px; }
.mtq__in {
	width: 100%;
	padding: 11px 12px;
	font: inherit;
	color: var(--mtq-ink);
	background: var(--mtq-surf);
	border: 1px solid var(--mtq-bd);
	border-radius: 11px;
}
.mtq__in:focus { outline: 2px solid var(--mtq-blue); outline-offset: 1px; background: #fff; }
.mtq__aside { margin: 6px 0 0; font-size: 12.5px; color: var(--mtq-ink-5); }
.mtq__kbd {
	font: inherit; font-size: 11.5px; font-weight: 700;
	padding: 1px 6px; border-radius: 6px;
	background: var(--mtq-surf-2); border: 1px solid var(--mtq-bd);
}

/* ── foot ────────────────────────────────────────────────────────────── */

.mtq__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px;
	border-top: 1px solid var(--mtq-bd);
	background: var(--mtq-surf);
}
.mtq__note { font-size: 12.5px; color: var(--mtq-ink-5); }
.mtq__btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	font-size: 14.5px;
	border: 0;
	border-radius: 11px;
	background: var(--mtq-blue);
	color: #fff;
	font-weight: 700;
	transition: background .15s;
}
.mtq__btn:hover:not(:disabled) { background: var(--mtq-blue-d); }
.mtq__btn:disabled { background: #C9D6E9; color: #F4F8FD; cursor: not-allowed; }
/* Share and New quiz share the row equally, as drawn. */
.mtq__foot--half { gap: 8px; }
.mtq__btn--half {
	flex: 1 1 0;
	justify-content: center;
	height: 42px;
	padding: 0 14px;
}
.mtq__btn--ghost {
	background: #fff;
	color: var(--mtq-blue-d);
	border: 1px solid var(--mtq-bd);
}
.mtq__btn--ghost:hover:not(:disabled) { background: var(--mtq-blue-t); }

/* ── the checked states ──────────────────────────────────────────────── */

/*
 * The verdict is a tinted box, not two loose lines.
 *
 * Green or red carries the result before a word is read, which is the thing a
 * reader wants to know in the quarter second after they tap Check.
 */
.mtq__vbox {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px 13px;
	border-radius: 13px;
	margin: 0 0 12px;
}
.mtq__vbox--ok { background: var(--mtq-ok-bg); border: 1px solid var(--mtq-ok-bd); }
.mtq__vbox--no { background: #FDECEA; border: 1px solid #F3CFCB; }
.mtq__vbadge {
	flex: none;
	width: 34px; height: 34px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
}
.mtq__vbox--ok .mtq__vbadge { background: var(--mtq-ok); }
.mtq__vbox--no .mtq__vbadge { background: var(--mtq-no-m); }
.mtq__verdict { display: block; font-size: 16px; font-weight: 800; line-height: 1.25; }
.mtq__verdict--ok { color: var(--mtq-ok-d); }
.mtq__verdict--no { color: var(--mtq-no); }
.mtq__vsub { display: block; margin: 2px 0 0; font-size: 13px; line-height: 1.4; }
.mtq__vbox--ok .mtq__vsub { color: #2C6B42; }
.mtq__vbox--no .mtq__vsub { color: #8A3A36; }
.mtq__sub { margin: 0 0 10px; font-size: 13px; color: var(--mtq-ink-5); }

/* The excerpt that proves the answer was on the page. */
.mtq__from {
	margin: 10px 0 0;
	padding: 10px 12px;
	background: var(--mtq-surf);
	border: 1px solid var(--mtq-bd);
	border-radius: 11px;
}
.mtq__from-k { font-size: 11.5px; font-weight: 700; color: var(--mtq-mute); text-transform: uppercase; letter-spacing: .04em; }
.mtq__from-v { margin: 3px 0 0; font-size: 13px; color: var(--mtq-ink-6); }
.mtq__link {
	display: inline-block;
	margin: 10px 0 0;
	font-size: 13px; font-weight: 700;
	color: var(--mtq-blue-d);
}

/* ── the intro ───────────────────────────────────────────────────────── */

/*
 * The intro's title and standfirst live IN the blue header, not in the body.
 *
 * It had a generic "The Orlando quiz" label on the header and the real heading
 * underneath in white space, which made the first screen look like a card with
 * a caption. The design puts the question itself on the blue.
 */
.mtq__intro-head { display: flex; align-items: flex-start; gap: 12px; }
.mtq__intro-i {
	flex: none;
	width: 44px; height: 44px;
	display: grid; place-items: center;
	border-radius: 13px;
	background: #fff;
	color: var(--mtq-blue);
}
.mtq__intro-t { font-size: 21px; font-weight: 800; color: #fff; line-height: 1.2; }
.mtq__intro-s { margin: 4px 0 0; font-size: 14px; color: var(--mtq-blue-b); line-height: 1.45; }

.mtq__steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.mtq__steps li { display: flex; gap: 11px; align-items: center; font-size: 14.5px; color: var(--mtq-ink-2); }
.mtq__num {
	flex: none;
	width: 26px; height: 26px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--mtq-blue-t);
	border: 1px solid #D8E4F5;
	color: var(--mtq-blue-d);
	font-size: 12px; font-weight: 800;
}

/* The start button is full width with the note beneath it, not beside it. */
.mtq__foot--stack {
	display: block;
	padding: 4px 16px 16px;
	border-top: 0;
	background: transparent;
}
.mtq__btn--wide {
	display: flex; align-items: center; justify-content: center; gap: 7px;
	width: 100%;
	height: 44px;
	padding: 0 16px;
	font-size: 15px;
	font-weight: 800;
}
.mtq__foot--stack .mtq__note { display: block; margin: 8px 0 0; font-size: 12px; text-align: center; }

/* ── results ─────────────────────────────────────────────────────────── */

/* The ring. The SVG is rotated so the arc starts at twelve o'clock. */
.mtq__ringwrap {
	position: relative;
	width: 112px; height: 112px;
	margin: 2px auto 0;
}
.mtq__ringmid {
	position: absolute;
	inset: 0;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: 2px;
}
.mtq__ringn { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--mtq-ink); }
.mtq__ringof { font-size: 12px; font-weight: 700; color: var(--mtq-ink-5); }
.mtq__title { margin: 12px 0 0; font-size: 20px; font-weight: 800; letter-spacing: -.016em; text-align: center; }
.mtq__summary { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--mtq-ink-6); text-align: center; text-wrap: balance; }

/*
 * The share card shows the pattern, never the questions, which is what makes it
 * postable without spoiling the quiz for whoever reads it.
 */
.mtq__share {
	margin: 12px 0 0;
	padding: 12px;
	border-radius: 11px;
	background: linear-gradient(135deg, var(--mtq-blue) 0%, var(--mtq-blue-d) 100%);
	color: #fff;
}
/* Colour stated outright on each child, never inherited. The theme sets a
   colour on bare `p`, which beat the inherited white and left the headline of
   the share card unreadable against its own gradient. */
.mtq__share-k { font-size: 11.5px; font-weight: 700; color: #fff; opacity: .8; text-transform: uppercase; letter-spacing: .04em; }
.mtq__share-v { margin: 2px 0 8px; font-size: 17px; font-weight: 800; color: #fff; }
.mtq__share-sq { display: flex; gap: 4px; }
.mtq__share-sq span { flex: 1; height: 8px; border-radius: 3px; background: rgba(255,255,255,.3); }
.mtq__share-sq span.ok { background: var(--mtq-ok-sq); }
.mtq__copied { font-size: 12.5px; font-weight: 700; color: var(--mtq-ok); }

/* The share dialog. Three actions on one row, wrapping before they squash. */
.mtq__msg { font-size: 13px; line-height: 1.45; resize: none; }
.mtq__share-acts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
}
.mtq__share-acts .mtq__btn { flex: 1 1 auto; text-align: center; }
/* The Image action is an <a download>, so it needs the button's own box. */
a.mtq__btn { display: inline-block; padding: 9px 16px; text-decoration: none; }

/* ── minimised ───────────────────────────────────────────────────────── */

/*
 * A pill while browsing. The hint stays on it, because that is the thing the
 * person is actually scanning the page for.
 */
.mtq__min {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 420px;
	padding: 10px 12px 10px 14px;
	background: #fff;
	border: 1px solid var(--mtq-bd);
	border-radius: 999px;
	box-shadow: 0 8px 26px rgba(22, 36, 62, .16);
	text-align: left;
	color: var(--mtq-ink);
}
.mtq__min:hover { border-color: #C9D6E9; }
.mtq__min-m { min-width: 0; flex: 1; }
.mtq__min-t { font-size: 12px; font-weight: 600; color: var(--mtq-ink-5); }
.mtq__min-h { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtq__min-b {
	flex: none; padding: 6px 13px; border-radius: 999px;
	background: var(--mtq-blue); color: #fff; font-size: 13px; font-weight: 700;
}

/* The answer is on THIS page, so say so and make the pill the obvious next tap. */
.mtq__min--here { border-color: var(--mtq-ok-bd); background: var(--mtq-ok-bg); }
.mtq__min--here .mtq__min-t { color: var(--mtq-ok-d); }
.mtq__min--here .mtq__min-b { background: var(--mtq-ok); }

/* ── phone: a sheet, and a bar ───────────────────────────────────────── */

.mtq__scrim { display: none; }

@media (max-width: 640px) {
	.mtq {
		right: 0; left: 0; bottom: 0;
		width: auto; max-width: none;
		padding: 0 10px env(safe-area-inset-bottom, 10px);
	}

	/* The page stays visible behind the sheet, dimmed, so it reads as the quiz
	   sitting on top of the site rather than a new page. */
	.mtq--opening.mtq--sheet .mtq__card { animation: mtq-up .22s ease-out; }
	.mtq--sheet .mtq__scrim {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(22, 36, 62, .38);
		border: 0;
		z-index: -1;
	}
	.mtq__card {
		width: auto;
		/*
		 * RESET THE BASE max-width, or the sheet sits 12px off centre.
		 *
		 * The base card carries max-width: calc(100vw - 32px) for the desktop
		 * corner. On a phone the shell is already full width with 10px of
		 * padding each side, so the content box is 100vw - 20. The inherited cap
		 * is 12px tighter than that, and a block narrower than its container
		 * sits at the START of it, so the whole sheet was pushed left: measured
		 * at 390px, gapL=10 and gapR=22.
		 *
		 * That is also why this survived the first check. In an iframe Chrome
		 * reserves a 15px classic scrollbar, which shrinks the container to 355
		 * while `vw` keeps counting the full 390, so the cap lands just below the
		 * container and never bites. It bites on every real phone, where there is
		 * no such scrollbar. Measure this one with --hide-scrollbars.
		 */
		max-width: none;
		border-radius: 16px 16px 0 0;
		border-bottom: 0;
		/* A sheet slides up from the edge; it does not grow out of a corner. */
		animation: none;
		transform-origin: bottom center;
	}
	/*
	 * PICK A SIDE AND STICK TO IT: the right one.
	 *
	 * On a phone .mtq spans both edges, and both of these are <button>, so they
	 * are shrink-to-fit rather than filling it. Without an auto margin a button
	 * therefore sits at the LEFT of a full-width shell, and the launcher had the
	 * margin while the minimised pill did not. Measured at 390px: the launcher
	 * sat at right=475 and the pill at left=10, so the control jumped from one
	 * side of the screen to the other the moment a quiz was in progress.
	 *
	 * Both now hug the right, which is the side the panel has always used and
	 * the side the desktop corner is on. The open sheet still spans the full
	 * width, because a question with four options needs it on a phone, but its
	 * RIGHT edge is the same 475: it grows leftward out of the control that was
	 * tapped instead of changing sides.
	 */
	.mtq__launch,
	.mtq__min { width: auto; margin-left: auto; }
	.mtq__min { border-radius: 14px; }
	.mtq__body { max-height: 58vh; overflow-y: auto; }

	@keyframes mtq-up { from { transform: translateY(14px); } to { transform: none; } }
}

/*
 * A short rise from the corner it opens out of.
 *
 * The panel is rebuilt rather than toggled, so this is an entry animation, not a
 * transition between two sizes: 160ms and a 2% scale, which reads as the thing
 * arriving rather than as an effect. transform-origin is the bottom right
 * because that is where the launcher sits, so it grows out of the control that
 * was tapped.
 */
@keyframes mtq-in {
	from { opacity: 0; transform: translateY(8px) scale(.98); }
	to   { opacity: 1; transform: none; }
}
/*
 * NO fill-mode. `both` holds the from-state until the animation runs, which
 * means opacity 0, and anything that delays the start leaves the panel
 * invisible rather than merely un-animated. A headless render froze it in
 * exactly that state and showed a ghost panel. Without a fill the element sits
 * at its natural, visible state and the animation only applies while playing,
 * so the worst case is no animation rather than no panel.
 */
/*
 * Only when the panel ARRIVES, never when it changes screen.
 *
 * The card is rebuilt on every render, so without the --opening gate Check and
 * Next question replayed this and the whole panel looked like it shut and
 * reopened on every step.
 */
.mtq--opening .mtq__card,
.mtq--opening .mtq__min,
.mtq--opening .mtq__launch {
	animation: mtq-in .16s cubic-bezier(.2, .8, .2, 1);
	transform-origin: bottom right;
}

@media (prefers-reduced-motion: reduce) {
	.mtq--opening .mtq__card, .mtq--opening .mtq__min, .mtq--opening .mtq__launch { animation: none; }
	.mtq *, .mtq *::before { transition: none !important; }
}

/* ── the block inside a guide ────────────────────────────────────────── */

/*
 * A SOFT blue card, deliberately not a solid one. The solid blue is the panel
 * itself, so this reads as the way in rather than as the quiz.
 */
.mtq-blk {
	margin: 28px 0;
	padding: 18px 20px;
	background: var(--mtq-blk-bg, #EAF2FD);
	border: 1px solid #DCE9FA;
	border-radius: 14px;
}
.mtq-blk__k { font-size: 11.5px; font-weight: 800; color: #0F4C96; text-transform: uppercase; letter-spacing: .05em; }
.mtq-blk__h { margin: 4px 0 6px; font-size: 19px; font-weight: 800; color: #16243E; }
.mtq-blk__p { margin: 0 0 14px; font-size: 14px; color: #41506B; }
.mtq-blk__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mtq-blk__btn {
	padding: 10px 18px;
	border: 0; border-radius: 11px;
	background: #1565C0; color: #fff;
	font-weight: 700; font-size: 14px;
	cursor: pointer;
}
.mtq-blk__btn:hover { background: #0F4C96; }
.mtq-blk__meta { font-size: 12.5px; color: #5C6779; }
.mtq-blk--here { background: #DCF0E4; border-color: #BEDECB; }
.mtq-blk--here .mtq-blk__k { color: #15532A; }
.mtq-blk--here .mtq-blk__btn { background: #1F7A3D; }
.mtq-blk--here .mtq-blk__btn:hover { background: #15532A; }
.mtq-blk__score { font-size: 28px; font-weight: 800; color: #1565C0; line-height: 1; }

/* "Carry on" carries the same forward arrow as the panel's own buttons. */
.mtq-blk__btn--arrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}