/**
 * MF Suite — Article Feedback, design variant 01 "Kompaktkarte".
 *
 * Two presentations of one component, and the spec means that literally: the
 * markup is identical, only the box changes. Wide screens get the pinned card
 * from the design file; narrow ones get the same card full width in the flow,
 * because a 250px card pinned into a corner is wrong on a phone.
 */

/* Zero-height and out of the way: it only exists to give the pinned card a
   positioned ancestor at the end of the article. */
.mffb-anchor {
	position: relative;
}

.mffb {
	--mffb-line: #e3e7f0;
	--mffb-ink: #1a1a2e;
	--mffb-blue: #1d4f99;
	--mffb-orange: #e8722b;

	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin: 24px 0 0;
	padding: 16px 16px 12px;
	background: #fff;
	border: 1px solid var(--mffb-line);
	border-radius: 16px;
	box-shadow: 0 14px 30px rgb(29 79 153 / 16%);

	/* The arrival is painted by the script from the scroll position, one frame at
	   a time, exactly as the Reading Rail fades — so there is deliberately NO
	   transition here. A transition would play at its own speed regardless of how
	   the reader scrolls, which is what made this pop. */
	opacity: 0%;
	transform: translateY(6px);
}

.mffb[hidden] {
	display: none;
}

.mffb__close {
	position: absolute;
	top: 8px;
	right: 10px;
	border: none;
	background: none;
	font-size: 16px;
	line-height: 1;
	color: #9aa1bb;
	cursor: pointer;
}

.mffb__q {
	margin: 0 0 10px;
	padding-right: 14px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--mffb-ink);
}

.mffb__thumbs {
	display: flex;
	gap: 8px;
}

.mffb__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--mffb-line);
	border-radius: 10px;
	background: #f7f9fc;
	color: #5b6180;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.mffb__thumb:hover {
	border-color: var(--mffb-blue);
}

.mffb__thumb.is-selected[data-thumb="up"] {
	background: var(--mffb-blue);
	border-color: var(--mffb-blue);
	color: #fff;
}

.mffb__thumb.is-selected[data-thumb="down"] {
	background: var(--mffb-orange);
	border-color: var(--mffb-orange);
	color: #fff;
}

.mffb__panel {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
}

.mffb__panel[hidden] {
	display: none;
}

.mffb__area {
	min-height: 56px;
	padding: 8px 10px;
	border: 1px solid var(--mffb-line);
	border-radius: 10px;
	font: inherit;
	font-size: 12.5px;
	color: var(--mffb-ink);
	resize: none;
}

/* Kept from the design file, and not negotiable: a text field a keyboard user
   cannot see themselves in is a broken field. */
.mffb__area:focus {
	outline: 2px solid var(--mffb-blue);
	outline-offset: 1px;
}

/* The honeypot. Off-screen rather than display:none — some bots skip fields
   that are not rendered at all. */
.mffb__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0%;
}

.mffb__submit {
	align-self: flex-end;
	padding: 7px 14px;
	border: none;
	border-radius: 999px;
	background: var(--mffb-blue);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
}

.mffb__done {
	margin: 12px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--mffb-blue);
}

.mffb__done[hidden] {
	display: none;
}

.mffb__fine {
	margin: 10px 0 0;
	font-size: 10px;
	letter-spacing: 0.01em;
	color: #8a90ac;
}

/**
 * The pill — design variant 02, and what an article shows by default.
 *
 * One line, dark, nothing but the question and two thumbs. It keeps the shared
 * `.mffb` behaviour (the fade, the placement) and replaces only the box.
 */
.mffb--pill {
	display: flex;
	align-items: center;
	gap: 10px;
	width: auto;
	padding: 8px 10px 8px 16px;
	background: var(--mffb-ink);
	border: none;
	border-radius: 999px;
	box-shadow: 0 12px 26px rgb(26 26 46 / 28%);
	white-space: nowrap;
}

.mffb--pill .mffb__thumbs {
	display: flex;
	gap: 8px;
}

.mffb--pill .mffb__q {
	margin: 0;
	padding: 0;
	font-size: 12.5px;
	font-weight: 500;
	color: #fff;
}

.mffb--pill .mffb__thumb {
	width: 30px;
	height: 30px;
	border: none;
	border-radius: 999px;

	/* Opaque, not white at 10%: a translucent layer leaves the real contrast to
	   whatever is underneath, which neither a checker nor a reader can rely on. */
	background: #33334f;
	color: #fff;
}

/* Up and down keep the colours they have in the card: which one you pressed is
   readable at a glance, not just that you pressed something. */
.mffb--pill .mffb__thumb.is-selected[data-thumb="up"] {
	background: var(--mffb-blue);
}

.mffb--pill .mffb__thumb.is-selected[data-thumb="down"] {
	background: var(--mffb-orange);
}

/**
 * The close sits on the pill's corner like a notification badge, about a third
 * of it overhanging — the proportion the CSS-icon badge arrived at in 2.4.0. Two
 * thirds outside reads as fallen off, because the rounded corner is cut away
 * underneath it.
 *
 * Light on a dark pill: a dark badge on a dark pill is a hole, not a control.
 */
.mffb--pill .mffb__close {
	position: absolute;
	top: -8px;
	inset-inline-end: -8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--mffb-line);
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 2px 6px rgb(26 26 46 / 24%);
	font-size: 14px;
	line-height: 1;
	color: #5b6180;
}

.mffb--pill .mffb__done {
	margin: 0;
	font-size: 12.5px;
	color: #fff;
}

/* In the flow the pill centres itself; in the margin it starts where the margin
   does, so it lines up with the text's edge rather than floating. */
.mffb--pill:not(.mffb--aside) {
	margin-inline: auto;
}

/* In the margin the pill keeps the 250px budget the placement was measured
   against — so it wraps rather than being clipped, which is what `nowrap` turns
   an over-wide pill into. The budget is a promise to the text column: exceeding
   it silently is how a companion ends up on the article. */
.mffb--pill.mffb--aside {
	flex-wrap: wrap;
	row-gap: 8px;
	white-space: normal;
	border-radius: 18px;
	padding: 12px 14px;
}

/* In the margin the question takes its own line and the two thumbs sit under
   it — they are one group, so a wrap must never fall between them. */
.mffb--pill.mffb--aside .mffb__q {
	flex: 1 1 100%;
}

/**
 * Beside the article, when there is genuinely room for it.
 *
 * The class is set by the script from the shared column measurement, not by a
 * media query: the viewport width says nothing about how wide the text column
 * is, and a card placed on that guess lands on the text. The rail takes the
 * inline-start margin, so this takes the other one.
 */
.mffb--aside {
	position: absolute;
	inset-inline-end: -278px; /* 250 card + 28 gap */
	bottom: 0;
	width: 250px;
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {

	.mffb__thumb {
		transition: none;
	}

	/* The opacity ramp stays — it is not motion — but the card does not travel. */
	.mffb {
		transform: none !important;
	}
}