/* Egna stilar för Profilmallen för listdragning. Den gemensamma layouten ligger i
   ../presentation.css.

   Ritningarna är handritade SVG i stil med tekniska ritningar: väggen och
   taket skrafferade i grått, listen i gips ljus med fin skraffering, trä i
   kategorifärg 2, plåten i grått, zink där mallen glider i accentfärgen och
   referenslinjer (lod och våg) i kategorifärg 1. Bara temats variabler, så
   allt följer ljust och mörkt läge.

   Stegen styr andra delar i samma takt: ett steg med klassen kl-uN
   (N = 1–5) tonar in kl-pa-N, tonar ut kl-av-N och flyttar kl-vid-N med
   --dx och --dy. I dragningen glider
   mallen (kl-glid-N) en gång längs styrbrädan medan listen växer fram bakom den
   (kl-vaxer-N). */

:root {
  --kl-gang: cubic-bezier(0.45, 0, 0.55, 1);
  --kl-drag: 5s;
}

.kl-diagram .diagram__svg {
  max-height: 60vh;
}
.diagram__svg .kl-liten {
  font-size: 16px;
}

/* ---------- Gissa först med en ritning bredvid ---------- */

.kl-gissa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.kl-gissa .claim {
  font-size: clamp(1.8rem, 1rem + 2.2vw, 3.4rem);
}
.kl-gissa .diagram__svg {
  max-height: 56vh;
}
@media (max-width: 900px) {
  .kl-gissa {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Material ---------- */

.kl-mur {
  fill: color-mix(in srgb, var(--ink-3) 22%, var(--card));
}
.kl-hatch,
.kl-hatch-fin {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1.4;
}
.kl-hatch-fin {
  stroke-width: 1;
  opacity: 0.55;
}
.kl-mur-streck,
.kl-gips-streck {
  stroke: none;
}
.kl-murkant {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 2.5;
}
.kl-vagg {
  fill: var(--card);
}
.kl-gips {
  fill: var(--paper-2);
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linejoin: round;
}
.kl-gips--mork {
  fill: color-mix(in srgb, var(--ink-3) 30%, var(--card));
}
.kl-karna {
  fill: color-mix(in srgb, var(--ink-3) 45%, var(--card));
}
.kl-underlag {
  fill: color-mix(in srgb, var(--ink-3) 16%, var(--card));
  stroke: var(--ink-3);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}
.kl-skada {
  fill: color-mix(in srgb, var(--warn) 18%, var(--card));
  stroke: var(--ink-3);
  stroke-width: 1.5;
}
.kl-spricka {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.kl-fukt {
  fill: color-mix(in srgb, var(--warn) 22%, transparent);
}

/* Listen sedd framifrån: en rand per led. Hålkälarna ligger i skugga. */
.kl-led-pl {
  fill: var(--card);
}
.kl-led-hk {
  fill: color-mix(in srgb, var(--ink-3) 30%, var(--card));
}
.kl-led-rs {
  fill: color-mix(in srgb, var(--ink-3) 10%, var(--card));
}
.kl-ledlinje {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1.2;
}
.kl-handyta {
  fill: var(--accent-soft);
  opacity: 0.75;
}

/* Trä, plåt och zink */
.kl-tra {
  fill: color-mix(in srgb, var(--c2) 26%, var(--card));
  stroke: var(--c2);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.kl-tra-ljus {
  fill: color-mix(in srgb, var(--c2) 14%, var(--card));
  stroke: var(--c2);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.kl-tra-mork {
  fill: color-mix(in srgb, var(--c2) 42%, var(--card));
  stroke: var(--c2);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.kl-arsring {
  fill: none;
  stroke: var(--c2);
  stroke-width: 1.4;
  opacity: 0.7;
}
.kl-brott {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.6;
}
.kl-plat {
  fill: color-mix(in srgb, var(--ink-3) 38%, var(--card));
  stroke: var(--ink);
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.kl-platyta {
  fill: color-mix(in srgb, var(--ink-3) 28%, var(--card));
  stroke: var(--ink-3);
  stroke-width: 1.5;
}
.kl-platkant {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.kl-filkant {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kl-prov {
  stroke: var(--ink-2);
  stroke-width: 1.5;
}
.kl-prov--zink {
  fill: color-mix(in srgb, var(--ink-3) 22%, var(--card));
}
.kl-prov--jarn {
  fill: color-mix(in srgb, var(--ink-2) 55%, var(--card));
}
.kl-stift {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
}
.kl-sko {
  fill: color-mix(in srgb, var(--ink-3) 40%, var(--card));
  stroke: var(--ink);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.kl-sko--bakom {
  stroke-dasharray: 4 3;
}
.kl-zink {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kl-strava {
  fill: none;
  stroke: var(--c2);
  stroke-width: 15;
  stroke-linecap: round;
}
.kl-strava-in {
  fill: none;
  stroke: color-mix(in srgb, var(--c2) 26%, var(--card));
  stroke-width: 11;
  stroke-linecap: round;
}
.kl-ribba {
  fill: color-mix(in srgb, var(--c2) 16%, var(--card));
  stroke: var(--c2);
  stroke-width: 1.6;
}
.kl-bord {
  fill: color-mix(in srgb, var(--c2) 34%, var(--card));
  stroke: var(--c2);
  stroke-width: 1.6;
}
.kl-lack {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
}
.kl-vav {
  fill: none;
  stroke: var(--c1);
  stroke-width: 2.5;
  stroke-dasharray: 10 6;
}
.kl-sagsnitt {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
}
.kl-kartong {
  fill: var(--warn-soft);
  stroke: var(--warn);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.kl-papper {
  fill: var(--card);
  stroke: var(--rule);
  stroke-width: 2;
}
.kl-hog {
  stroke-width: 1.5;
}
.kl-klump {
  fill: var(--paper-2);
  stroke: var(--accent);
  stroke-width: 2.5;
}
/* Efterlagningen i hörnet: grovbruk med överskott och golvlisten av metall. */
.kl-grovbruk {
  fill: color-mix(in srgb, var(--ink-3) 45%, var(--card));
  stroke: var(--ink-2);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.kl-golvlist {
  fill: color-mix(in srgb, var(--ink-3) 55%, var(--card));
  stroke: var(--ink);
  stroke-width: 1.8;
}

/* Linjer, mått och etiketter */
.kl-ledare {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1.5;
}
.kl-ledarpunkt {
  fill: var(--ink-2);
}
.kl-profillinje {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linejoin: round;
}
.kl-ritlinje {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linejoin: round;
}
.kl-ritlinje--tunn {
  stroke-width: 1.2;
  stroke: var(--ink-3);
}
.kl-ritlinje--streck {
  stroke-dasharray: 7 6;
}
.kl-ritlinje--streck.d-draw {
  stroke-dasharray: 1;
}
.kl-fel-linje {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.5;
  stroke-linejoin: round;
}
.kl-mal {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 2;
  stroke-dasharray: 6 5;
}
.kl-mal--accent {
  stroke: var(--accent);
  stroke-width: 3;
}
.kl-farg {
  fill: none;
  stroke: var(--warn);
  stroke-width: 9;
  stroke-linejoin: round;
  opacity: 0.7;
}
.kl-ref {
  fill: none;
  stroke: var(--c1);
  stroke-width: 2.5;
  stroke-dasharray: 1;
}
.kl-lod {
  fill: var(--c1);
}
.kl-mattlinje {
  fill: none;
  stroke: var(--c1);
  stroke-width: 1.5;
}
.kl-punkt {
  fill: var(--accent);
}
.kl-hjalplinje {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1.2;
  stroke-dasharray: 4 4;
}
.kl-matt {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.8;
}
.kl-matt--accent {
  stroke: var(--accent);
  stroke-width: 2.5;
}
.kl-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
}
.kl-ritram {
  fill: var(--card);
  stroke: var(--ink-2);
  stroke-width: 1.5;
}
.kl-klammer {
  fill: none;
  stroke: var(--good);
  stroke-width: 3;
}
.kl-markering {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-dasharray: 9 6;
}
.kl-fas {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
}
.kl-tryck {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
}
.kl-vinkel {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
}
.kl-takkant {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 3;
}
.kl-riefen {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
}
.kl-osynlig {
  fill: none;
  stroke: none;
}

/* Mallen som lutar och den räta mallen som streckad skugga. */
.kl-kalke--spoke * {
  fill: none !important;
  stroke: var(--ink-3) !important;
  stroke-width: 1.5 !important;
  stroke-dasharray: 5 4;
}
.kl-kalke--lutar .kl-tra,
.kl-kalke--lutar .kl-plat {
  stroke: var(--accent);
}

/* ---------- Stegen styr andra delar ---------- */

.kl-pa-1, .kl-pa-2, .kl-pa-3, .kl-pa-4, .kl-pa-5 {
  opacity: 0;
}
.kl-pa-1, .kl-pa-2, .kl-pa-3, .kl-pa-4, .kl-pa-5,
.kl-av-1, .kl-av-2, .kl-av-3, .kl-av-4,
.kl-halv-2 {
  transition: opacity 0.6s var(--ease);
}
.kl-vid-2, .kl-vid-3 {
  transition: transform 1.4s var(--kl-gang);
}
.beat:has(.kl-u1.is-shown) .kl-pa-1,
.beat:has(.kl-u2.is-shown) .kl-pa-2,
.beat:has(.kl-u3.is-shown) .kl-pa-3,
.beat:has(.kl-u4.is-shown) .kl-pa-4,
.beat:has(.kl-u5.is-shown) .kl-pa-5 {
  opacity: 1;
}
.beat:has(.kl-u1.is-shown) .kl-av-1,
.beat:has(.kl-u2.is-shown) .kl-av-2,
.beat:has(.kl-u3.is-shown) .kl-av-3,
.beat:has(.kl-u4.is-shown) .kl-av-4 {
  opacity: 0;
}
.beat:has(.kl-u2.is-shown) .kl-halv-2 {
  opacity: 0.3;
}
.beat:has(.kl-u2.is-shown) .kl-vid-2,
.beat:has(.kl-u3.is-shown) .kl-vid-3 {
  transform: translate(var(--dx, 0px), var(--dy, 0px));
}

/* Dragningen: mallen glider en gång längs styrbrädan, och listen växer fram
   bakom den lika fort. */
.kl-glid {
  transition: transform var(--kl-drag) linear 0.4s;
}
.beat:has(.kl-u1.is-shown) .kl-glid-1,
.beat:has(.kl-u2.is-shown) .kl-glid-2 {
  transform: translateX(520px);
}
.kl-vaxer {
  transform: scaleX(0);
  transform-box: fill-box;
  transform-origin: left center;
  transition: transform var(--kl-drag) linear 0.4s;
}
.beat:has(.kl-u1.is-shown) .kl-vaxer-1,
.beat:has(.kl-u2.is-shown) .kl-vaxer-2 {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .kl-pa-1, .kl-pa-2, .kl-pa-3, .kl-pa-4, .kl-pa-5,
  .kl-av-1, .kl-av-2, .kl-av-3, .kl-av-4,
  .kl-halv-2, .kl-vid-2, .kl-vid-3, .kl-glid, .kl-vaxer {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* Nummer i ritningarna, med förklaring bredvid */
.kl-nr {
  fill: var(--card);
  stroke: var(--ink);
  stroke-width: 2;
}
.diagram__svg .kl-nr-text {
  font-size: 18px;
  font-weight: 700;
  fill: var(--ink);
}

/* Ritningen bredvid gissningen blir mindre på skärmen; texten görs större. */
.kl-lut text {
  font-size: 30px;
}
.kl-lut .d-muted {
  font-size: 25px;
}