/* polish.css — förfining av läsupplevelsen för svaren, INOM paper&ink. Drop-in, länkad
   SIST (som paper-ink.css själv) → tar man bort länken är allt oförändrat. Rör inte de
   committade design-filerna. Mål: proffsigare läsning, inte en omdesign. */

/* — Läsmått: en bekväm radlängd för juridisk läsning i Garamond (~64 tecken). Den
   enskilt största läsbarhetsvinsten på breda skärmar. — */
.turn-answer {
  max-width: 64ch;
  font-size: 1.08rem;
  line-height: 1.72;
}

/* — Tur-separation: mer luft mellan turerna i tråden. — */
.thread {
  gap: 1.8rem;
}

/* — Frågan som tydlig hierarki: liten versal eyebrow (sans, som paper&ink-chrome) +
   själva frågan i serif (innehåll). Bläck-hårstreck under. — */
.turn-q {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.18rem;
  border-bottom: 1px solid var(--ink);
}

.turn-q::before {
  display: block;
  content: "Fråga";
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

.redline-turn .turn-q::before {
  content: "Förbättring";
}

/* — Citationer: en liten "Källor"-eyebrow ovanför korten (CSS-only, ingen markup).
   ::before tar en hel rad (flex-basis) så korten radbryter under den. — */
.turn-citations {
  margin-top: 1.1rem;
}

.turn-citations:not(:empty)::before {
  flex-basis: 100%;
  content: "Källor";
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.1rem;
}

/* — Metaraden som diskret data (mono). — */
.turn-meta {
  font-family: var(--mono);
  font-size: 0.76rem;
}

/* — Injektionsvarning i känslighetsgrinden (§6): tydlig men inom paper&ink. — */
.gate-injection {
  margin: 0.3rem 0;
  padding: 0.4rem 0.6rem;
  border-left: 2px solid var(--del);
  color: var(--del);
  font-size: 0.85rem;
  font-weight: 600;
}

/* — Stycken i svaret: renderAnswerWithLinks bygger riktiga <p> (delar på blankrad).
     Normal radbrytning inom stycket + luft mellan stycken = behaglig läsning. — */
.turn-answer {
  white-space: normal;
}
.turn-answer p {
  margin: 0 0 0.85em;
}
.turn-answer p:last-child {
  margin-bottom: 0;
}

/* — Följdfråge- + redline-fält direkt under svaret (fråga vidare / förbättra utkastet). — */
.turn-followup,
.turn-redline {
  display: flex;
  gap: 0.5rem;
}
.turn-followup {
  margin-top: 1.1rem;
}
.turn-redline {
  margin-top: 0.55rem;
}
.turn-followup-input,
.turn-redline-input {
  flex: 1;
}

/* — Spårningskedjan ska gå att förstå UTAN att kunna tekniken: visa bara de
     klarspråkliga stegen. Dölj de tekniska kolumnerna (agent-roll, rådata) och de interna
     övergångarna/start-klar-raderna. Datan finns kvar i DOM (granskbarhet) men syns inte. — */
.turn-trace li {
  grid-template-columns: 1fr !important;
  padding: 0.18rem 0;
}
.turn-trace .agent,
.turn-trace .detail {
  display: none;
}
.turn-trace li.muted,
.turn-trace li.transition {
  display: none;
}
.turn-trace .what {
  font-weight: 400;
}

/* — Diskret entré när en ny tur läggs i tråden (respekterar reduce-motion). — */
@media (prefers-reduced-motion: no-preference) {
  .turn {
    animation: hq-turn-in 0.28s ease both;
  }

  @keyframes hq-turn-in {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}