/* Egna stilar för Utredande text – att väga argument och källor. Den
   gemensamma layouten ligger i ../presentation.css.

   Bildspråket: en utredande text är en våg. Frågeställningen står på foten,
   skäl och källor är vikter i två vågskålar (för till vänster i temats
   första kategorifärg, emot till höger i den andra), och en vikt är tyngre
   ju mer trovärdig källan är. Slutsatsen är det man läser av på visaren när
   allt ligger på vågen. Den som skriver argumenterande lägger bara vikter i
   den ena skålen, och värdeladdade ord är en tumme på vågen. Bara temats
   variabler används, så allt följer ljust och mörkt läge. */

:root {
  --ut-gang: cubic-bezier(0.45, 0, 0.55, 1);
}

/* ---------- Stegen i diagrammen ----------
   Ett steg med klassen ut-utlos-N (N = 1–4) styr andra delar i samma takt:
   ut-pa-N tonar in, ut-av-N tonar ut och ut-svag-N tonas ned. --d fördröjer.
   Linjer (d-draw) och delar (d-pop) i en del som tonar in ritas fram.
   ut-start tonar in när takten kommer i bild. */

.ut-pa-1, .ut-pa-2, .ut-pa-3, .ut-pa-4 {
  opacity: 0;
}
.ut-pa-1, .ut-pa-2, .ut-pa-3, .ut-pa-4,
.ut-av-1, .ut-av-2, .ut-av-3,
.ut-svag-1, .ut-svag-2, .ut-svag-3 {
  transition: opacity 0.6s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--d, 0s);
}
.beat:has(.ut-utlos-1.is-shown) .ut-pa-1,
.beat:has(.ut-utlos-2.is-shown) .ut-pa-2,
.beat:has(.ut-utlos-3.is-shown) .ut-pa-3,
.beat:has(.ut-utlos-4.is-shown) .ut-pa-4 {
  opacity: 1;
}
.beat:has(.ut-utlos-1.is-shown) .ut-av-1,
.beat:has(.ut-utlos-2.is-shown) .ut-av-2,
.beat:has(.ut-utlos-3.is-shown) .ut-av-3 {
  opacity: 0;
}
.beat:has(.ut-utlos-1.is-shown) .ut-svag-1,
.beat:has(.ut-utlos-2.is-shown) .ut-svag-2,
.beat:has(.ut-utlos-3.is-shown) .ut-svag-3 {
  opacity: 0.3;
}
.beat:has(.ut-utlos-1.is-shown) .ut-pa-1 .d-draw,
.beat:has(.ut-utlos-2.is-shown) .ut-pa-2 .d-draw,
.beat:has(.ut-utlos-3.is-shown) .ut-pa-3 .d-draw,
.beat:has(.ut-utlos-4.is-shown) .ut-pa-4 .d-draw {
  stroke-dashoffset: 0;
}
.beat:has(.ut-utlos-1.is-shown) .ut-pa-1 .d-pop,
.beat:has(.ut-utlos-2.is-shown) .ut-pa-2 .d-pop,
.beat:has(.ut-utlos-3.is-shown) .ut-pa-3 .d-pop,
.beat:has(.ut-utlos-4.is-shown) .ut-pa-4 .d-pop {
  opacity: 1;
  transform: none;
}
.ut-start {
  opacity: 0;
  transition: opacity 0.8s var(--ease);
  transition-delay: var(--d, 0s);
}
.beat.is-visible .ut-start {
  opacity: 1;
}
.beat.is-visible .ut-start .d-draw,
.beat.is-visible .d-draw.ut-start {
  stroke-dashoffset: 0;
}

/* ---------- Vågen ----------
   .ut-vag har vridpunkten (--px, --py), armens halva längd (--L) och
   lutningen i varje läge: --t0 när takten kommer i bild och --t1–--t4 när
   steget ut-utlos-N visas. Positiv vinkel: högra skålen (emot) går ned.
   Skålarna följer armens ändar och står upprätt. */

.ut-vag {
  --v: 0deg;
}
.beat.is-visible .ut-vag {
  --v: var(--t0, 0deg);
}
.beat:has(.ut-utlos-1.is-shown) .ut-vag {
  --v: var(--t1, var(--t0, 0deg));
}
.beat:has(.ut-utlos-2.is-shown) .ut-vag {
  --v: var(--t2, var(--t1, var(--t0, 0deg)));
}
.beat:has(.ut-utlos-3.is-shown) .ut-vag {
  --v: var(--t3, var(--t2, var(--t1, var(--t0, 0deg))));
}
.beat:has(.ut-utlos-4.is-shown) .ut-vag {
  --v: var(--t4, var(--t3, var(--t2, var(--t1, var(--t0, 0deg)))));
}
.ut-bom {
  transform-box: view-box;
  transform-origin: var(--px) var(--py);
  transform: rotate(var(--v));
  transition: transform 1.8s var(--ut-gang) 0.3s;
}
.ut-skal {
  transition: transform 1.8s var(--ut-gang) 0.3s;
}
.ut-skal--v {
  transform: translate(calc(var(--L) * (1 - cos(var(--v)))), calc(var(--L) * -1 * sin(var(--v))));
}
.ut-skal--h {
  transform: translate(calc(var(--L) * (cos(var(--v)) - 1)), calc(var(--L) * sin(var(--v))));
}
.ut-bom__linje {
  fill: none;
  stroke: var(--ink);
  stroke-width: 9;
  stroke-linecap: round;
}
.ut-nal {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
}
.ut-nav {
  fill: var(--ink);
}
.ut-skiva {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 3;
}
.ut-fot {
  fill: var(--ink-2);
}
.ut-bas,
.ut-stolpe {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 6;
  stroke-linecap: round;
}
.ut-platta {
  fill: var(--paper-2);
  stroke: var(--ink-2);
  stroke-width: 3;
  stroke-linejoin: round;
}
.diagram__svg .ut-sida {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.diagram__svg .ut-sida--for {
  fill: var(--c1);
}
.diagram__svg .ut-sida--emot {
  fill: var(--c2);
}
.diagram__svg .ut-avlas {
  fill: var(--accent);
  font-family: var(--f-display);
  font-style: italic;
  font-size: 30px;
  font-weight: 700;
}
.ut-tom {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 2.5;
  stroke-dasharray: 8 6;
}

/* ---------- Vikterna ----------
   En vikt är tyngre ju mer trovärdig källan är: XS (nästan ingen vikt),
   S, M och L. För är blå, emot brun, och Noors egna skäl utan källa grå. */

.ut-lod rect {
  stroke-width: 3;
}
.ut-lod--for rect {
  fill: var(--c1);
  stroke: var(--c1);
}
.ut-lod--emot rect {
  fill: var(--c2);
  stroke: var(--c2);
}
.ut-lod--egen rect {
  fill: var(--paper-2);
  stroke: var(--ink-3);
}
.ut-lod--okand rect {
  fill: none;
  stroke: var(--ink-3);
  stroke-dasharray: 8 6;
}
.ut-lod--fjader rect {
  fill: var(--card);
  stroke-dasharray: 5 4;
}
.ut-lod--fjader.ut-lod--for rect {
  stroke: var(--c1);
}
.diagram__svg .ut-lod text {
  fill: var(--paper);
  font-size: 20px;
  font-weight: 700;
}
.diagram__svg .ut-lod .ut-lod__liten {
  font-size: 17px;
  font-weight: 500;
}
.diagram__svg .ut-lod--egen text,
.diagram__svg .ut-lod--okand text {
  fill: var(--ink-2);
}
.diagram__svg .ut-lod--fjader text {
  fill: var(--c1);
  font-size: 15px;
}
.diagram__svg .ut-lod--okand .ut-fragetecken {
  fill: var(--ink-3);
  font-family: var(--f-display);
  font-size: 44px;
}
.ut-krymp {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 1.2s var(--ut-gang);
  transition-delay: var(--d, 0s);
}
.beat:has(.ut-utlos-3.is-shown) .ut-krymp {
  transform: scale(0.5);
}
.ut-handtag {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 6;
  stroke-linecap: round;
}
.ut-snore {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 2.5;
}

/* ---------- Tummen på vågen ---------- */

.ut-tumme {
  transition: opacity 0.8s var(--ease), transform 1.2s var(--ut-gang);
}
.beat:has(.ut-utlos-1.is-shown) .ut-tumme {
  transform: translateY(-60px);
}
.ut-tumme__finger {
  fill: var(--card);
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linejoin: round;
}
.ut-tumme__nagel {
  fill: var(--accent-soft);
  stroke: var(--ink-2);
  stroke-width: 2.5;
}
.ut-tumme__led {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.diagram__svg .ut-tummeord {
  fill: var(--accent);
  font-family: var(--f-display);
  font-style: italic;
  font-size: 30px;
  font-weight: 700;
}

/* ---------- Kort, rutor och text i diagrammen ---------- */

.ut-kort {
  fill: var(--card);
  stroke: var(--ink-3);
  stroke-width: 2.5;
}
.ut-kort--accent {
  stroke: var(--accent);
  stroke-width: 4;
}
.ut-kort--for {
  stroke: var(--c1);
  stroke-width: 3.5;
}
.ut-kort--emot {
  stroke: var(--c2);
  stroke-width: 3.5;
}
.ut-kort--fylld {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 3;
}
.ut-kort--streck {
  fill: none;
  stroke-dasharray: 8 6;
}
.diagram__svg .ut-etikett {
  fill: var(--ink-3);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.diagram__svg .ut-etikett--accent {
  fill: var(--accent);
}
.diagram__svg .ut-etikett--for {
  fill: var(--c1);
}
.diagram__svg .ut-etikett--emot {
  fill: var(--c2);
}
.diagram__svg .ut-text {
  font-size: 23px;
  font-weight: 600;
}
.diagram__svg .ut-text--stor {
  font-size: 27px;
  font-weight: 700;
}
.diagram__svg .ut-text--liten {
  font-size: 19px;
  font-weight: 500;
}
.diagram__svg .ut-text--accent {
  fill: var(--accent);
}
.diagram__svg .ut-text--for {
  fill: var(--c1);
}
.diagram__svg .ut-text--emot {
  fill: var(--c2);
}
.diagram__svg .ut-mening {
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
  font-size: 27px;
}
.diagram__svg .ut-bokstav {
  fill: var(--accent);
  font-family: var(--f-display);
  font-size: 34px;
  font-weight: 700;
}
.diagram__svg .ut-fet {
  font-weight: 800;
}
.ut-pil {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ut-pil--accent {
  stroke: var(--accent);
  stroke-width: 4;
}
.ut-spets {
  fill: var(--ink-3);
}
.ut-spets--accent {
  fill: var(--accent);
}
.ut-ram {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-dasharray: 8 5;
}
.ut-rad {
  fill: none;
  stroke: var(--rule);
  stroke-width: 9;
  stroke-linecap: round;
}
.ut-sida-papper {
  fill: var(--card);
  stroke: var(--ink-2);
  stroke-width: 2.5;
}
.ut-markering {
  fill: var(--accent-soft);
}
.ut-linje {
  fill: none;
  stroke: var(--rule);
  stroke-width: 2;
}

/* Tratten för frågeställningen. */
.ut-tratt {
  fill: var(--paper-2);
  stroke: var(--ink-3);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.ut-tratt--smal {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 3.5;
}

/* Perspektivhjulet. */
.ut-nod {
  fill: var(--card);
  stroke: var(--ink-2);
  stroke-width: 3;
}
.ut-nod--mitt {
  fill: var(--accent);
  stroke: var(--accent);
}
.diagram__svg .ut-nod-mitt-text {
  fill: var(--paper);
  font-size: 25px;
  font-weight: 800;
}

/* Checklistan. */
.ut-ruta {
  fill: var(--card);
  stroke: var(--ink-2);
  stroke-width: 3;
}
.ut-bock {
  fill: none;
  stroke: var(--accent);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Text och kort i HTML ---------- */

.claim.ut-claim--liten {
  font-size: clamp(1.7rem, 1rem + 2.1vw, 3.1rem);
}
.section-title.ut-titel--liten {
  font-size: clamp(1.6rem, 0.9rem + 2vw, 2.8rem);
}
.ut-tat .kicker {
  margin-bottom: 0.8rem;
}
.ut-tat .section-title {
  margin-bottom: clamp(0.6rem, 2vh, 1.4rem);
}
.ut-tat .vote,
.ut-tat .answer {
  margin-top: clamp(0.7rem, 2.2vh, 1.5rem);
}
.ut-tat .answer {
  padding: 0.8rem 1.4rem;
}
.ut-fig--lag .diagram__svg {
  max-height: 38vh;
}
.ut-fig--mellan .diagram__svg {
  max-height: 52vh;
}

/* Uppgiften och Noors frågeställning. */
.ut-uppgift {
  max-width: 50rem;
  padding: 1.1rem 1.6rem 1.3rem;
  border-left: 6px solid var(--accent);
  background: var(--card);
  box-shadow: var(--shadow);
}
.ut-uppgift__etikett {
  margin: 0 0 0.4rem;
  font-family: var(--f-ui);
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ut-uppgift__text {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(1.35rem, 0.8rem + 1.5vw, 2.3rem);
  line-height: 1.25;
  text-wrap: pretty;
}
.ut-uppgift__kallor {
  margin: 0.8rem 0 0;
  font-family: var(--f-ui);
  font-size: clamp(0.95rem, 0.7rem + 0.6vw, 1.25rem);
  color: var(--ink-2);
}

/* Noors utkast och texterna före och efter. */
.ut-delad {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1rem, 2.5vw, 2.2rem);
  align-items: center;
}
.ut-utkast {
  padding: 0.9rem 1.5rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow);
  font-family: var(--f-body);
  font-size: clamp(1rem, 0.55rem + 0.95vw, 1.5rem);
  line-height: 1.4;
}
.ut-utkast__rubrik {
  margin: 0 0 0.4rem;
  font-family: var(--f-display);
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.15;
}
.ut-utkast__etikett {
  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;
  color: var(--ink-3);
}
.ut-utkast__etikett--efter {
  color: var(--good);
}
.ut-utkast p {
  margin: 0 0 0.45em;
  text-wrap: pretty;
}
.ut-utkast p:last-child {
  margin-bottom: 0;
}
.ut-utkast--liten {
  font-size: clamp(0.9rem, 0.5rem + 0.8vw, 1.3rem);
}
/* Åsiktsorden markeras när steget visas, och i före-texten från början. */
.ut-asikt {
  border-radius: 0.2em;
  transition: background-color 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.beat:has(.ut-utlos-1.is-shown) .ut-asikt,
.ut-asikt--alltid {
  background: var(--accent-soft);
  box-shadow: 0 0 0 2px var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}
.ut-kalla {
  font-weight: 700;
  color: var(--c1);
}
.ut-vagning {
  font-weight: 700;
  color: var(--good);
}

/* Meningar som rättas: osakligt och sakligt. */
.ut-rader {
  display: grid;
  gap: 0.5rem;
  margin-top: clamp(0.6rem, 2vh, 1.2rem);
  max-width: 62rem;
}
.ut-rad-text {
  margin: 0;
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
  font-size: clamp(1.2rem, 0.75rem + 1.2vw, 2rem);
  line-height: 1.25;
  text-wrap: pretty;
}
.ut-markor {
  flex: none;
  min-width: 6.2em;
  font-family: var(--f-ui);
  font-style: normal;
  font-size: 0.55em;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ut-markor--fel {
  color: var(--accent);
}
.ut-markor--ratt {
  color: var(--good);
}
.ut-rad-text--fel .ut-rad-text__mening {
  text-decoration: line-through;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  color: var(--ink-2);
}

/* Slutsatserna att välja mellan. */
.ut-alt {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.8rem;
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 0.7rem + 1.15vw, 1.9rem);
  line-height: 1.25;
}
.ut-alt li {
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
  text-wrap: pretty;
}
.ut-alt__n {
  flex: none;
  width: 1.1em;
  font-weight: 700;
  color: var(--accent);
}

/* Jämförelsen mellan textsorterna. */
.ut-jamfor .diff__table td {
  font-family: var(--f-display);
}
.ut-jamfor .diff__table thead th:last-child {
  color: var(--accent);
}

@media (max-width: 760px) {
  .ut-delad {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ut-start,
  .ut-bom,
  .ut-skal,
  .ut-krymp,
  .ut-tumme,
  .ut-asikt,
  .ut-pa-1, .ut-pa-2, .ut-pa-3, .ut-pa-4,
  .ut-av-1, .ut-av-2, .ut-av-3,
  .ut-svag-1, .ut-svag-2, .ut-svag-3 {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* Undertiteln i startbilden. */
.ut-hero-under {
  display: block;
  margin-top: 0.3em;
  font-size: 0.42em;
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--accent);
}

/* Stegtexterna under ett diagram på en rad. */
.ut-stegrad {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2rem;
  margin-top: clamp(0.4rem, 1.5vh, 1rem);
}
.ut-stegrad .aside.ut-steg {
  margin-top: 0;
}
.ut-fig--minst .diagram__svg {
  max-height: 26vh;
}
.ut-jamfor {
  min-width: 0;
}
@media (max-width: 760px) {
  .ut-jamfor .diff__table th,
  .ut-jamfor .diff__table td {
    padding: 0.5em 0.4em;
    overflow-wrap: anywhere;
  }
}
/* Långa ord som Frågeställningen ryms på smala skärmar. */
@media (max-width: 760px) {
  .chapter__title {
    font-size: clamp(1.9rem, 8.5vw, 4.5rem);
    overflow-wrap: break-word;
  }
}
.ut-fig--tratt .diagram__svg {
  max-height: 31vh;
}
.ut-fig--perspektiv .diagram__svg {
  max-height: 46vh;
}