/*
  Sæga — blind A/B demo, stilar som följer med widgeten.

  Lyfta ur styles.css så att jämförelsesidorna, som har sin egen inbäddade CSS
  och inte länkar styles.css, får demot att se likadant ut utan att duplicera
  reglerna. Varje variabel har ett fallback-värde av exakt det skälet: en sida
  med ett mindre :root ska inte rendera osynlig text.
*/

.ab {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e5e3dd);
  border-radius: var(--radius, 16px);
  padding: clamp(20px, 4vw, 36px);
  box-shadow: var(--shadow, 0 1px 2px rgba(0, 0, 0, 0.05));
}
.ab-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
/*
  Uppspelningsknappen bär `btn btn-primary`, klasser som bara finns i styles.css —
  alltså på startsidan, inte på jämförelsesidorna. `:where()` ger noll specificitet,
  så startsidans egen .btn-primary vinner där den finns och det här är enbart ett
  utseende för sidor som saknar den.
*/
:where(.ab-play) {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans, system-ui, sans-serif); font-weight: 600; font-size: 0.95rem;
  color: #fff; background: var(--accent-nordic, #5b7b94);
  border: none; border-radius: 10px; padding: 11px 22px; cursor: pointer;
}
:where(.ab-play):hover { filter: brightness(1.06); }
.ab-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ab-col {
  background: var(--bg-subtle, #f5f3ee);
  border: 1px solid var(--border, #e5e3dd);
  border-radius: 12px;
  padding: 18px;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.ab-col-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.ab-tag { font-family: var(--mono, ui-monospace, monospace); font-size: 0.8rem; color: var(--text-dim, #9a958c); }
.ab-reveal-label { font-family: var(--mono, ui-monospace, monospace); font-size: 0.74rem; opacity: 0; transition: opacity 0.4s ease; }
.ab-col.revealed .ab-reveal-label { opacity: 1; }
.ab-col.is-good.revealed { border-color: var(--accent-moss, #6b7d5c); }
.ab-col.is-good.revealed .ab-reveal-label { color: var(--accent-moss, #6b7d5c); }
.ab-col.is-bad.revealed { border-color: var(--red, #c0392b); }
.ab-col.is-bad.revealed .ab-reveal-label { color: var(--red, #c0392b); }
.ab-transcript { font-size: 1.02rem; line-height: 1.7; min-height: 3em; }
.ab-transcript .err {
  color: var(--red, #c0392b);
  text-decoration: underline wavy var(--red, #c0392b);
  text-underline-offset: 3px;
}
.ab-transcript .ok { color: var(--accent-moss, #6b7d5c); }
.ab-transcript.typing::after {
  content: '▍';
  color: var(--accent-nordic, #5b7b94);
  animation: ab-blink 1s step-end infinite;
}
@keyframes ab-blink { 50% { opacity: 0; } }
.ab-guess { margin-top: 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 0.98rem; }
.ab-guess-btns { display: flex; gap: 8px; }
.ab-guess-btns button {
  border: 1px solid var(--border, #e5e3dd);
  background: var(--bg, #faf9f6);
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
  font-family: var(--sans, system-ui, sans-serif);
  color: var(--text, #14171a);
}
.ab-guess-btns button:hover { border-color: var(--accent-nordic, #5b7b94); }
.ab-footnote { margin-top: 20px; color: var(--text-muted, #6e7885); font-size: 0.86rem; }
.ab-placeholder { margin-top: 14px; color: var(--accent-rust, #a65d45); font-size: 0.78rem; opacity: 0.85; }

@media (max-width: 720px) {
  .ab-cols { grid-template-columns: 1fr; }
}