/* Egna stilar för Språklig variation och makt. Den gemensamma layouten ligger
   i ../presentation.css.

   Bildspråket är ett mixerbord. Varje sätt att tala är ett läge på fyra
   reglage: dialekt, ungdomsspråk, andra språk och formellt. Reglagen skjuts
   upp och ned när Noor byter situation, och inget läge är fel – bara mer
   eller mindre passande. Ord på familjens språk ritas som grå streck
   (.sp-annat), så att ingen behöver läsa ett språk hen inte kan, och de
   svenska orden i samma mening står i accentfärgen (.sp-svord). Det som inte
   passar mottagaren markeras med --warn och orden ”passar en kompis”, det som
   passar med --good. Bara temats variabler används, så allt följer ljust och
   mörkt läge. */

:root {
  --sp-gang: cubic-bezier(0.45, 0, 0.55, 1);
  --sp-tid: 1.4s;
}

/* ---------- Stegen i diagrammen ----------
   Ett steg med klassen sp-utlos-N (N = 1–6) styr andra delar i samma takt:
   sp-pa-N tonar in och sp-av-N tonar ut. sp-bara-N syns bara så länge steg N
   är det senaste (sp-bara-0 före första steget). Reglagens knoppar
   (.sp-knopp) flyttas till --yN när steg N visas. */

.sp-pa-1, .sp-pa-2, .sp-pa-3, .sp-pa-4, .sp-pa-5, .sp-pa-6,
.sp-bara-1, .sp-bara-2, .sp-bara-3, .sp-bara-4, .sp-bara-5, .sp-bara-6 {
  opacity: 0;
}
.sp-pa-1, .sp-pa-2, .sp-pa-3, .sp-pa-4, .sp-pa-5, .sp-pa-6,
.sp-av-1, .sp-av-2, .sp-av-3, .sp-av-4, .sp-av-5, .sp-av-6,
.sp-bara-0, .sp-bara-1, .sp-bara-2, .sp-bara-3, .sp-bara-4, .sp-bara-5, .sp-bara-6 {
  transition: opacity 0.8s var(--ease);
  transition-delay: var(--d, 0s);
}
.beat:has(.sp-utlos-1.is-shown) .sp-pa-1,
.beat:has(.sp-utlos-2.is-shown) .sp-pa-2,
.beat:has(.sp-utlos-3.is-shown) .sp-pa-3,
.beat:has(.sp-utlos-4.is-shown) .sp-pa-4,
.beat:has(.sp-utlos-5.is-shown) .sp-pa-5,
.beat:has(.sp-utlos-6.is-shown) .sp-pa-6,
.beat:has(.sp-utlos-1.is-shown) .sp-bara-1,
.beat:has(.sp-utlos-2.is-shown) .sp-bara-2,
.beat:has(.sp-utlos-3.is-shown) .sp-bara-3,
.beat:has(.sp-utlos-4.is-shown) .sp-bara-4,
.beat:has(.sp-utlos-5.is-shown) .sp-bara-5,
.beat:has(.sp-utlos-6.is-shown) .sp-bara-6 {
  opacity: 1;
}
.beat:has(.sp-utlos-1.is-shown) .sp-av-1,
.beat:has(.sp-utlos-2.is-shown) .sp-av-2,
.beat:has(.sp-utlos-3.is-shown) .sp-av-3,
.beat:has(.sp-utlos-4.is-shown) .sp-av-4,
.beat:has(.sp-utlos-5.is-shown) .sp-av-5,
.beat:has(.sp-utlos-6.is-shown) .sp-av-6,
.beat:has(.sp-utlos-1.is-shown) .sp-bara-0,
.beat:has(.sp-utlos-2.is-shown) .sp-bara-1,
.beat:has(.sp-utlos-3.is-shown) .sp-bara-2,
.beat:has(.sp-utlos-4.is-shown) .sp-bara-3,
.beat:has(.sp-utlos-5.is-shown) .sp-bara-4,
.beat:has(.sp-utlos-6.is-shown) .sp-bara-5 {
  opacity: 0;
}

/* Reglagens knoppar. Reglerna står i stegens ordning, så det senaste steget
   bestämmer läget. */
.sp-knopp {
  transform: translateY(var(--y0, 0px));
  transition: transform var(--sp-tid) var(--sp-gang);
}
.beat:has(.sp-utlos-1.is-shown) .sp-knopp { transform: translateY(var(--y1, var(--y0, 0px))); }
.beat:has(.sp-utlos-2.is-shown) .sp-knopp { transform: translateY(var(--y2, var(--y1, 0px))); }
.beat:has(.sp-utlos-3.is-shown) .sp-knopp { transform: translateY(var(--y3, var(--y2, 0px))); }
.beat:has(.sp-utlos-4.is-shown) .sp-knopp { transform: translateY(var(--y4, var(--y3, 0px))); }
.beat:has(.sp-utlos-5.is-shown) .sp-knopp { transform: translateY(var(--y5, var(--y4, 0px))); }

/* ---------- Mixerbordet ---------- */

.sp-panel {
  fill: var(--card);
  stroke: var(--rule);
  stroke-width: 2.5;
}
.sp-spar {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 6;
  stroke-linecap: round;
}
.sp-streck {
  fill: none;
  stroke: var(--rule);
  stroke-width: 2;
}
.sp-knopp rect {
  fill: var(--accent);
  stroke: var(--ink);
  stroke-width: 2;
}
.sp-knopp path {
  fill: none;
  stroke: var(--card);
  stroke-width: 3;
  stroke-linecap: round;
}
.sp-skarm {
  fill: var(--paper-2);
  stroke: var(--rule);
  stroke-width: 2;
}
.diagram__svg .sp-reglage {
  font-size: 19px;
  font-weight: 600;
  fill: var(--ink-2);
}
.diagram__svg .sp-reglage--liten {
  font-size: 15px;
}
.diagram__svg .sp-lage {
  font-size: 30px;
  font-weight: 700;
}
.diagram__svg .sp-lage-not {
  font-size: 21px;
  fill: var(--ink-2);
}

/* ---------- Kort, repliker och föremål ---------- */

.sp-kort {
  fill: var(--card);
  stroke: var(--rule);
  stroke-width: 2;
}
.sp-kort--accent {
  stroke: var(--accent);
  stroke-width: 3;
}
.sp-ram--varn {
  fill: none;
  stroke: var(--warn);
  stroke-width: 4;
}
.sp-ram--bra {
  fill: none;
  stroke: var(--good);
  stroke-width: 4;
}
.diagram__svg .sp-replik {
  font-family: var(--f-body);
  font-size: 21px;
}
.diagram__svg .sp-replik--stor {
  font-size: 25px;
}
/* Ord på familjens språk: grå streck i stället för text. */
.sp-annat {
  fill: var(--ink-3);
  opacity: 0.45;
}
.diagram__svg .sp-svord {
  fill: var(--accent);
  font-weight: 700;
}
.diagram__svg .sp-tid {
  font-size: 18px;
  font-weight: 700;
  fill: var(--ink-3);
}
.diagram__svg .sp-varn {
  fill: var(--warn);
  font-weight: 700;
}
.diagram__svg .sp-bra {
  fill: var(--good);
  font-weight: 700;
}
.diagram__svg .sp-stor {
  font-size: 27px;
}
.diagram__svg .sp-ord {
  font-size: 30px;
  font-weight: 700;
  fill: var(--accent);
}
.diagram__svg .sp-skaltext {
  font-size: 20px;
  font-weight: 500;
}
.diagram__svg .sp-etikett {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  fill: var(--ink-3);
}
.sp-punkt {
  fill: var(--accent);
}
.sp-punkt--tom {
  fill: var(--card);
  stroke: var(--accent);
  stroke-width: 3;
}
.sp-ikon {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sp-ikon--accent {
  stroke: var(--accent);
}
.sp-yta {
  fill: var(--paper-2);
}

/* Människor: huvud och axlar, och pratbubblor eller tankebubblor. */
.sp-huvud {
  fill: var(--paper-2);
  stroke: var(--ink-2);
  stroke-width: 3;
}
.sp-kropp {
  fill: var(--paper-2);
  stroke: var(--ink-2);
  stroke-width: 3;
}
.sp-huvud--noor,
.sp-kropp--noor {
  stroke: var(--accent);
}
.sp-bubbla {
  fill: var(--card);
  stroke: var(--ink-2);
  stroke-width: 2.5;
}
.sp-tanke {
  fill: var(--paper-2);
  stroke: var(--ink-3);
  stroke-width: 2.5;
  stroke-dasharray: 7 6;
}
.sp-rost {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
}

/* Kartan */
.sp-land {
  fill: var(--paper-2);
  stroke: var(--ink-3);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.sp-land--granne {
  fill: var(--card);
}
.sp-nal {
  fill: var(--accent);
  stroke: var(--card);
  stroke-width: 3;
}
.sp-ledare {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 3 5;
}

/* Diken och väg, våg och spår */
.sp-dike {
  fill: var(--warn-soft);
  stroke: var(--warn);
  stroke-width: 2.5;
}
.sp-vag {
  fill: var(--good-soft);
  stroke: var(--good);
  stroke-width: 2.5;
}
.sp-vagmitt {
  fill: none;
  stroke: var(--good);
  stroke-width: 3;
  stroke-dasharray: 18 14;
}
.sp-spar-rals {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 4;
  stroke-linecap: round;
}
.sp-spar-rals--vaxel {
  stroke: var(--accent);
}

/* ---------- Storlekar ---------- */

.sp-fig .diagram__svg {
  max-height: 54vh;
}
.sp-fig--mellan .diagram__svg {
  max-height: 46vh;
}
.sp-fig--lag .diagram__svg {
  max-height: 30vh;
}
.sp-fig--liten .diagram__svg {
  max-height: 22vh;
}
@media (max-height: 760px) {
  .sp-fig .diagram__svg {
    max-height: 44vh;
  }
  .sp-fig--mellan .diagram__svg {
    max-height: 38vh;
  }
  .sp-fig--lag .diagram__svg {
    max-height: 26vh;
  }
  .sp-fig--liten .diagram__svg {
    max-height: 18vh;
  }
}
.answer .diagram {
  margin-top: 0.8rem;
}

/* ---------- Text i sidan ---------- */

.sp-claim {
  font-size: clamp(1.8rem, 1rem + 2.6vw, 3.6rem);
}
.sp-markera-fel,
.sp-markera-ratt {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.16em;
  transition: text-decoration-color 0.6s var(--ease);
}
.beat:has(.answer.is-shown) .sp-markera-fel {
  text-decoration-style: wavy;
  text-decoration-color: var(--warn);
}
.beat:has(.answer.is-shown) .sp-markera-ratt {
  text-decoration-color: var(--good);
}
.sp-slutsats {
  font-weight: 650;
  color: var(--accent);
}

/* ---------- Fallet: Noors mejl ---------- */

.sp-mejl {
  max-width: 50rem;
  padding: 0.9rem 1.5rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow);
  font-family: var(--f-body);
  font-size: clamp(1.15rem, 0.75rem + 1.1vw, 1.85rem);
  line-height: 1.45;
}
.sp-mejl__huvud {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.1rem 0.8rem;
  margin: 0 0 0.7rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-ui);
  font-size: 0.66em;
  color: var(--ink-2);
}
.sp-mejl__huvud dt {
  font-weight: 700;
}
.sp-mejl__huvud dd {
  margin: 0;
}
.sp-mejl__text p {
  margin: 0 0 0.45em;
}
.sp-mejl__text p:last-child {
  margin-bottom: 0;
}
.sp-mejl__rubrik {
  margin: 0 0 0.5rem;
  font-family: var(--f-ui);
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sp-mejl__rubrik--varn {
  color: var(--warn);
}
.sp-mejl__rubrik--bra {
  color: var(--good);
}
.sp-s {
  border-radius: 0.2em;
  transition:
    background-color 0.6s var(--ease),
    box-shadow 0.6s var(--ease);
}
.beat:has(.sp-utlos-1.is-shown) .sp-s--kompis,
.sp-mejl--fore .sp-s--kompis {
  background: color-mix(in srgb, var(--warn) 28%, transparent);
  box-shadow: 0 0 0 2px var(--warn);
}
.sp-fix {
  text-decoration: underline;
  text-decoration-color: var(--good);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.18em;
}
/* Mejlet skrivs om steg för steg: sp-gammal-N byts mot sp-ny-N. */
.sp-ny {
  display: none;
}
.beat:has(.sp-utlos-1.is-shown) .sp-gammal-1,
.beat:has(.sp-utlos-2.is-shown) .sp-gammal-2,
.beat:has(.sp-utlos-3.is-shown) .sp-gammal-3,
.beat:has(.sp-utlos-4.is-shown) .sp-gammal-4 {
  display: none;
}
.beat:has(.sp-utlos-1.is-shown) .sp-ny-1,
.beat:has(.sp-utlos-2.is-shown) .sp-ny-2,
.beat:has(.sp-utlos-3.is-shown) .sp-ny-3,
.beat:has(.sp-utlos-4.is-shown) .sp-ny-4 {
  display: inline;
  animation: sp-in 0.8s var(--ease);
}
@keyframes sp-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.sp-gammal {
  text-decoration: underline wavy var(--warn);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.18em;
}
.sp-fore-efter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.8rem, 2vw, 1.6rem);
}
.sp-fore-efter .sp-mejl {
  font-size: clamp(1rem, 0.6rem + 1vw, 1.6rem);
}
.sp-mejl--fore {
  opacity: 0.88;
}
.sp-forklaring {
  margin: clamp(0.6rem, 1.6vh, 1.1rem) 0 0;
  font-family: var(--f-ui);
  font-size: var(--t-kicker);
  color: var(--ink-2);
}
.sp-forklaring span {
  margin-right: 1.2rem;
}
.sp-forklaring .sp-gammal,
.sp-forklaring .sp-fix {
  font-weight: 700;
}

/* Mejlet bredvid det lilla mixerbordet */
.sp-mejl-rad {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.4rem);
  align-items: center;
}
@media (max-width: 760px) {
  .sp-fore-efter,
  .sp-mejl-rad {
    grid-template-columns: 1fr;
  }
}

/* Strategins tre frågor */
.sp-fragor {
  margin: clamp(0.8rem, 2vh, 1.4rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
}
.sp-fragor li {
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 0.8rem + 1.4vw, 2.3rem);
  line-height: 1.15;
}
.sp-fragor__n {
  flex: none;
  width: 1.1em;
  color: var(--accent);
  font-weight: 300;
}

/* Uppgiften i verkstaden */
.sp-text {
  margin: 0 0 clamp(1rem, 2.6vh, 1.8rem);
  padding: 1.1rem 1.5rem;
  border-left: 6px solid var(--accent);
  background: var(--card);
  box-shadow: var(--shadow);
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 0.9rem + 1.2vw, 2.1rem);
  line-height: 1.3;
  text-wrap: pretty;
}
.sp-text__etikett {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--f-ui);
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.sp-sprakval .vote__btn {
  min-width: 7em;
}
.sp-sprakval + .talk__q {
  margin-top: clamp(1.4rem, 4vh, 2.6rem);
}

@media (prefers-reduced-motion: reduce) {
  .sp-s,
  .sp-markera-fel,
  .sp-markera-ratt,
  .sp-knopp,
  .sp-pa-1, .sp-pa-2, .sp-pa-3, .sp-pa-4, .sp-pa-5, .sp-pa-6,
  .sp-av-1, .sp-av-2, .sp-av-3, .sp-av-4, .sp-av-5, .sp-av-6,
  .sp-bara-0, .sp-bara-1, .sp-bara-2, .sp-bara-3, .sp-bara-4, .sp-bara-5, .sp-bara-6 {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .sp-ny {
    animation: none !important;
  }
}

/* Mejlet får den bredare spalten bredvid scenbilden. */
.beat .sp-layout-mejl {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  max-width: 84rem;
}