/* MR Engagement Rate Calculator – uses the MR Index theme colours when available */
.mr-erc, .mr-erc-home {
	--erc-accent: var(--accent, #d6232f);
	--erc-ink: var(--ink, #14161a);
	--erc-ink-2: var(--ink-2, #4a4f57);
	--erc-bg: var(--bg, #ffffff);
	--erc-bg-2: var(--bg-2, #f4f5f7);
	--erc-line: var(--line, #e3e5e8);
}

/* Homepage section */
.mr-erc-home { max-width: var(--max, 1200px); margin: 8px auto 44px; padding: 0 20px; }
.mr-erc-home__inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 36px; align-items: center; background: var(--erc-bg-2); border: 1px solid var(--erc-line); border-radius: 14px; padding: 32px; }
.mr-erc-home__kicker { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--erc-accent); margin-bottom: 8px; }
.mr-erc-home__title { font-size: clamp(26px, 3vw, 34px); margin: 0 0 12px; color: var(--erc-ink); }
.mr-erc-home__text { color: var(--erc-ink-2); margin: 0 0 14px; font-size: 16px; }
.mr-erc-home__points { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 6px; font-size: 15px; color: var(--erc-ink); }
.mr-erc-home__points li::before { content: "\2713"; color: var(--erc-accent); font-weight: 700; margin-right: 8px; }
.mr-erc-home__link { font-weight: 600; color: var(--erc-accent); font-size: 15px; }
.mr-erc-home__tool .mr-erc { background: var(--erc-bg); }

/* Calculator */
.mr-erc { border: 1px solid var(--erc-line); border-radius: 12px; padding: 22px; background: var(--erc-bg); color: var(--erc-ink); font-size: 15px; margin: 0 0 1.5em; }
.mr-erc *, .mr-erc *::before, .mr-erc *::after { box-sizing: border-box; }
.mr-erc__platforms { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.mr-erc__chip { cursor: pointer; }
.mr-erc__chip input { position: absolute; opacity: 0; pointer-events: none; }
.mr-erc__chip span { display: inline-block; padding: 7px 14px; border: 1px solid var(--erc-line); border-radius: 99px; font-weight: 600; font-size: 14px; transition: all .15s; }
.mr-erc__chip input:checked + span { background: var(--erc-accent); border-color: var(--erc-accent); color: #fff; }
.mr-erc__chip input:focus-visible + span { outline: 2px solid var(--erc-accent); outline-offset: 2px; }

.mr-erc__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mr-erc__field--wide { grid-column: 1 / -1; }
.mr-erc__field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; color: var(--erc-ink-2); }
.mr-erc__field small { font-weight: 400; }
.mr-erc__req { color: var(--erc-accent); }
.mr-erc__field input { width: 100%; padding: 10px 12px; border: 1px solid var(--erc-line); border-radius: 8px; font: inherit; font-size: 16px; background: var(--erc-bg); color: var(--erc-ink); }
.mr-erc__field input:focus { outline: none; border-color: var(--erc-accent); box-shadow: 0 0 0 3px rgba(214, 35, 47, .15); }
.mr-erc__hint { font-size: 13px; color: var(--erc-ink-2); margin: 10px 0 14px; }

.mr-erc__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.mr-erc__btn { background: var(--erc-accent); color: #fff; border: 0; border-radius: 8px; padding: 12px 20px; font: inherit; font-weight: 700; cursor: pointer; }
.mr-erc__btn:hover { filter: brightness(1.08); }
.mr-erc__btn--ghost { background: transparent; color: var(--erc-ink-2); border: 1px solid var(--erc-line); font-weight: 600; }

.mr-erc__result { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--erc-line); }
.mr-erc__score { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.mr-erc__label { width: 100%; font-size: 13px; color: var(--erc-ink-2); text-transform: uppercase; letter-spacing: .6px; }
.mr-erc__value { font-size: 42px; font-weight: 800; line-height: 1; font-family: var(--font-head, Georgia, serif); }
.mr-erc__badge { padding: 4px 12px; border-radius: 99px; font-size: 13px; font-weight: 700; }
.mr-erc__badge--low { background: #fde8e8; color: #b42318; }
.mr-erc__badge--average { background: #fff4e0; color: #9a5b00; }
.mr-erc__badge--good { background: #e6f4ea; color: #1e7b34; }
.mr-erc__badge--excellent { background: #e3f0ff; color: #1859b5; }

.mr-erc__meter { height: 8px; background: var(--erc-bg-2); border-radius: 99px; overflow: hidden; margin: 14px 0; }
.mr-erc__meter span { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .4s ease; }
.mr-erc__bar--low { background: #e5484d; }
.mr-erc__bar--average { background: #f5a524; }
.mr-erc__bar--good { background: #30a46c; }
.mr-erc__bar--excellent { background: #3b82f6; }

.mr-erc__stats { list-style: none; padding: 0; margin: 0 0 12px; }
.mr-erc__stats li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--erc-line); font-size: 14px; }
.mr-erc__stats li[hidden] { display: none; }
.mr-erc__tip { background: var(--erc-bg-2); border-left: 3px solid var(--erc-accent); padding: 10px 14px; border-radius: 6px; font-size: 14px; margin: 0 0 12px; }
.mr-erc__copy { background: none; border: 1px solid var(--erc-line); border-radius: 8px; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 600; color: var(--erc-ink); cursor: pointer; }
.mr-erc__error { color: #b42318; font-weight: 600; margin: 12px 0 0; }

/* Compact (homepage) */
.mr-erc--compact { margin: 0; }

@media (max-width: 900px) {
	.mr-erc-home__inner { grid-template-columns: 1fr; padding: 22px; gap: 20px; }
}
@media (max-width: 560px) {
	.mr-erc { padding: 16px; }
	.mr-erc__grid { grid-template-columns: 1fr 1fr; }
	.mr-erc-home { padding: 0 12px; }
	.mr-erc-home__inner { padding: 18px; }
}