/* Marchenholm — components.css : buttons, text-links, chips, dismiss. */

/* Primary button — cobalt, for Compare / Send / Manage cookies. Never affiliate. */
.mh-btn {
  display: inline-block;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: var(--f-body-s);
  line-height: 1;
  letter-spacing: 0.04em;
  padding: 12px 28px;
  border-radius: var(--r-md);
  background: var(--c-accent);
  color: var(--c-paper);
  border: none;
  cursor: pointer;
  transition: background-color 0.15s;
  text-decoration: none;
}
.mh-btn:hover,
.mh-btn:focus-visible { background: var(--c-accent-dp); }

.mh-btn--outlined {
  background: transparent;
  color: var(--c-ink);
  border: 1px solid var(--c-ink);
}
.mh-btn--outlined:hover,
.mh-btn--outlined:focus-visible {
  background: var(--c-ink);
  color: var(--c-paper);
}

/* Text link — generic internal links, `See the full index →`, etc. */
.mh-link {
  color: var(--c-accent);
  font-weight: 500;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color 0.15s;
}
.mh-link:hover,
.mh-link:focus-visible { border-bottom-color: var(--c-accent); }

/* `→ Visit [operator]` affiliate text link */
.mh-visit {
  display: inline-block;
  color: var(--c-accent);
  font-weight: 500;
  font-size: var(--f-body);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color 0.15s;
}
.mh-visit:hover,
.mh-visit:focus-visible { border-bottom-color: var(--c-accent); }

/* Dismiss ✕ — 16px glyph, but padded to 44x44 tap target */
.mh-dismiss {
  background: none;
  border: 0;
  width: 44px;
  height: 44px;
  color: var(--c-stone);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  transition: color 0.15s;
}
.mh-dismiss:hover,
.mh-dismiss:focus-visible { color: var(--c-ink); }

/* Select dropdown (used in compare, audit selector) */
.mh-select {
  font-family: var(--f-body);
  font-size: var(--f-body);
  font-weight: 500;
  color: var(--c-ink);
  background: var(--c-paper);
  border: 1px solid var(--c-ink);
  border-radius: var(--r-sm);
  padding: 10px 32px 10px 14px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%231A1D22' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.mh-select:focus-visible {
  border-color: var(--c-accent);
}

/* Kicker tile mono (used in pillar tiles, best-for tiles) */
.mh-tile-kicker {
  font-family: var(--f-mono);
  font-size: var(--f-label);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-accent);
  display: block;
  margin-bottom: 12px;
}

/* Offer footnote (amber, mono) — next to every affiliate link / offer box */
.mh-offer-footnote {
  font-family: var(--f-mono);
  font-size: var(--f-label);
  font-weight: 500;
  color: var(--c-secondary);
  letter-spacing: 0.02em;
  display: block;
  margin-top: 8px;
}

/* Delta arrows */
.mh-delta { font-family: var(--f-mono); }
.mh-delta--down { color: var(--c-score-hi); }  /* improvement in time/crash metrics = good */
.mh-delta--up   { color: var(--c-score-lo); }
.mh-delta--flat { color: var(--c-stone); }

/* Amber compliance box — "Bonuses change frequently…" */
.mh-amber-box {
  border: 1px solid var(--c-secondary);
  background: var(--c-paper);
  padding: 20px 24px;
  border-radius: var(--r-md);
}
.mh-amber-box p {
  font-family: var(--f-mono);
  font-size: var(--f-caption);
  color: var(--c-ink-muted);
}

/* Cobalt-stroked RG box */
.mh-rg-box {
  border: 1px solid var(--c-accent);
  background: var(--c-paper);
  padding: 24px 28px;
  border-radius: var(--r-md);
  max-width: 720px;
  margin: 0 auto;
}
.mh-rg-box strong { color: var(--c-ink); }
.mh-rg-box a { color: var(--c-accent); }

/* "UKGC licence" line (mono, stone) */
.mh-licence-line {
  font-family: var(--f-mono);
  font-size: var(--f-label);
  font-weight: 500;
  color: var(--c-stone);
  letter-spacing: 0.02em;
  margin-top: 4px;
}

/* Lab-note in-row (used beside pillar scores) */
.mh-lab-note {
  font-family: var(--f-body);
  font-size: var(--f-body-s);
  color: var(--c-ink);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}