/* Egna stilar för Att bygga en yttervägg. Den gemensamma layouten ligger i
   ../presentation.css, och Mermaid-diagrammen ritas av Pele via kärnan.
   Materialen i de handritade genomskärningarna tar färgerna från temat:
   trä i kategorifärg 2, isolering i varningsfärgens ljusa ton, vindskydd i
   kategorifärg 1, ångspärren i accentfärgen och betong i grått. */

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

/* Material */
.yv-tra {
  fill: color-mix(in srgb, var(--c2) 28%, var(--card));
  stroke: var(--c2);
  stroke-width: 1.5;
}
.yv-kryss {
  fill: none;
  stroke: var(--c2);
  stroke-width: 1;
}
.yv-isolering {
  fill: var(--warn-soft);
}
.yv-ull {
  fill: none;
  stroke: var(--warn);
  stroke-width: 1.4;
  stroke-linejoin: round;
  opacity: 0.75;
}
.yv-luft {
  fill: var(--card);
  stroke: var(--rule);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}
.yv-vindskydd {
  fill: color-mix(in srgb, var(--c1) 30%, var(--card));
  stroke: var(--c1);
  stroke-width: 1.5;
}
.yv-gips {
  fill: var(--paper-2);
  stroke: var(--ink-3);
  stroke-width: 1.5;
}
.yv-gips-streck {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 6 5;
}
.yv-plast {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.yv-plastyta {
  fill: var(--accent-soft);
  fill-opacity: 0.72;
  stroke: var(--accent);
  stroke-width: 2;
}
.yv-tejp {
  fill: var(--accent);
}
.yv-betong {
  fill: color-mix(in srgb, var(--ink-3) 26%, var(--card));
  stroke: var(--ink-3);
  stroke-width: 1.5;
}
.yv-cellplast {
  fill: color-mix(in srgb, var(--c1) 8%, var(--card));
  stroke: var(--ink-3);
  stroke-width: 1.5;
}
.yv-puts {
  fill: var(--ink-3);
}
.yv-gummi {
  fill: var(--ink-2);
}
.yv-mark {
  fill: color-mix(in srgb, var(--c3) 26%, var(--card));
}
.yv-makadam {
  fill: color-mix(in srgb, var(--ink-3) 14%, var(--card));
}
.yv-marklinje {
  fill: none;
  stroke: var(--c3);
  stroke-width: 3;
}
.yv-fuktig {
  fill: color-mix(in srgb, var(--c1) 45%, transparent);
}
.yv-tak {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: round;
}

/* Beslag, nät, skruvar och installationer */
.yv-plat {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linejoin: round;
}
.yv-nat {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 3;
  stroke-dasharray: 2 3;
}
.yv-skruv {
  fill: var(--ink);
}
.yv-skruvlinje {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
}
.yv-skruvhuvud {
  fill: var(--ink);
}
.yv-dosa {
  fill: var(--card);
  stroke: var(--ink);
  stroke-width: 2.5;
}
.yv-ledning {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
}
.yv-ror {
  fill: var(--ink-3);
}
.yv-manschett {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
}
.yv-hal {
  fill: var(--card);
}
.yv-halring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-dasharray: 5 4;
}
.yv-droppe,
.d-dot.yv-droppe {
  fill: var(--c1);
}

/* Linjer, mått och etiketter */
.yv-ram {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1.5;
  stroke-dasharray: 6 6;
}
.yv-ledare {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1.5;
}
.yv-ledarpunkt {
  fill: var(--ink-2);
}
.yv-matt {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.8;
}
.yv-matt--accent {
  stroke: var(--accent);
  stroke-width: 2.5;
}
.yv-hjalp {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}
.yv-osynlig {
  fill: none;
  stroke: none;
}
.yv-temp {
  fill: none;
  stroke: var(--warn);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.diagram__svg .yv-varmtext {
  fill: var(--warn);
  font-weight: 700;
}
.diagram__svg .yv-kalltext {
  fill: var(--c1);
  font-weight: 700;
}
.yv-tomt {
  fill: var(--card);
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}

/* Stommen: skivorna som täcker två fack */
.yv-skiva {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.5;
}

/* Avväxlingen: reglarna som är i vägen bleknar, de nya delarna lyfts fram. */
.yv-oppning {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 8 6;
}
.yv-bort {
  transition: opacity 0.6s var(--ease);
}
.yv-avv:has(.yv-steg-bort.is-shown) .yv-bort {
  opacity: 0.15;
}
.yv-ny {
  stroke-width: 2.5;
}

/* Hörnet: varningen försvinner när den extra regeln kommer. */
.yv-horn:has(.yv-steg-fritt ~ [data-step].is-shown) .yv-steg-fritt.is-shown {
  opacity: 0;
}

/* Diagonalerna: den skeva väggen tonar bort när den rättade visas. */
.yv-skev {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 3;
  stroke-dasharray: 8 6;
}
.yv-ratt {
  fill: color-mix(in srgb, var(--c2) 12%, var(--card));
  stroke: var(--c2);
  stroke-width: 4;
}
.yv-hornmarke {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
}
.yv-diag:has(.yv-steg-ratt.is-shown) .yv-steg-skev.is-shown {
  opacity: 0;
}