/* StartaBygget – kommer snart · riktning A "Ritningen" */

@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-variabel.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/ibm-plex-mono-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --papper: #F5F4EF;
  --papper-ljus: #FBFAF6;
  --black: #1E2A35;
  --blakopia: #2D5D8A;
  --tumstock: #F2B12E;
  --text-2: #3A4753;
  --grafit: #5B6B79;
  --linje: #C9D2DA;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--papper);
  background-image:
    linear-gradient(rgba(45, 93, 138, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 93, 138, .10) 1px, transparent 1px),
    linear-gradient(rgba(45, 93, 138, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 93, 138, .045) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
  color: var(--black);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--black); }
a:hover { color: #000; }
:focus-visible { outline: 2px solid var(--blakopia); outline-offset: 3px; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 40px; }
main { flex: 1; }

/* Sidhuvud */
.topp {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 32px; padding: 22px 0; border-bottom: 1px solid var(--linje);
}
.ordbild {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 21px; letter-spacing: .05em; font-stretch: 118%;
  white-space: nowrap; text-decoration: none; color: var(--black);
}
.ordbild .symbol { width: 44px; height: 44px; flex: none; display: block; }
.ordbild .ord span { font-weight: 400; }
.ordbild .ord b { font-weight: 800; }

.status {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 14px; border: 1.5px solid var(--black); background: var(--papper-ljus);
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .16em;
}
.status i {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--tumstock); border: 1px solid var(--black);
  animation: puls 2.4s ease-in-out infinite;
}

/* Hjälte */
.hjalte {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 40px 56px; padding: 64px 0 52px;
}
.hjalte .text { flex: 1 1 420px; min-width: 0; }
.kicker {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .16em; color: var(--blakopia); line-height: 1.7;
}
h1 {
  margin: 18px 0 0;
  font-size: clamp(40px, 4.4vw, 58px); line-height: 1.02;
  font-weight: 800; letter-spacing: -.012em; font-stretch: 104%;
}
h1 span { display: block; font-weight: 400; }
h1, h1 span { text-wrap: balance; }
.nobr { white-space: nowrap; }
.ingress {
  margin: 22px 0 0; max-width: 32em;
  font-size: 18px; line-height: 1.6; color: var(--text-2);
}
.knappar { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.knapp {
  min-height: 52px; padding: 0 26px;
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 16px; font-weight: 700; text-decoration: none; letter-spacing: .01em;
}
.knapp.fylld { background: var(--black); color: var(--papper); }
.knapp.fylld:hover { background: #000; color: var(--papper); }
.knapp.kant { border: 1.5px solid var(--black); color: var(--black); font-weight: 600; }
.knapp.kant:hover { background: var(--papper-ljus); }
.knapp svg { flex: none; }
.adress {
  margin: 18px 0 0; font-size: 15px; line-height: 1.6; color: var(--text-2);
}
.adress a { font-weight: 600; text-underline-offset: 3px; }
.avsandare {
  margin-top: 26px; font-family: var(--mono); font-size: 12px;
  letter-spacing: .12em; color: var(--grafit);
}

/* Fasadritningen: fasad B på gäststugan, genereras av fasad_v2.py */
.fasad {
  flex: 1.6 1 560px; min-width: 0; max-width: 760px; margin: 0;
  /* Kulörpaket (detalj 8): fasad, snickerier, dörr, tak, plåt */
  --k-fasad: #8C2E22; --k-snick: #F3F3F0; --k-dorr: #F3F3F0; --k-tak: #2F3032; --k-plat: #2B2C2E;
  --k-glas: #3B4A55; --k-trall: #A29C7E; --k-betong: #C9C6BD; --k-lampa: #FFE3A0;
}
.fasad[data-kulor="grafit"] { --k-fasad: #484C50; --k-snick: #484C50; --k-dorr: #2B2B2B; }
.fasad[data-kulor="skargard"] { --k-fasad: #BEBCB3; --k-dorr: #2E4A68; --k-plat: #F2F2EF; }
.fasad[data-kulor="nvit"] { --k-fasad: #F3F3F0; --k-dorr: #2B2B2B; --k-plat: #F2F2EF; }
.fasad[data-kulor="ockra"] { --k-fasad: #CFA04B; --k-dorr: #2F4A3A; --k-tak: #8B4532; --k-plat: #F2F2EF; }
.fasad[data-kulor="mossa"] { --k-fasad: #5D6550; --k-snick: #ECE8DD; --k-dorr: #5D6550; }
.fasad svg { display: block; width: 100%; height: auto; overflow: visible; }
.rit {
  fill: none; stroke: var(--black); stroke-width: 1.15;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: rita var(--t, 1.1s) var(--d, 0s) cubic-bezier(.45, .05, .25, 1) forwards;
}
.rit.tjock { stroke-width: 1.9; }
.rit.tunn { stroke-width: .75; stroke: var(--grafit); }
.rit.fin { stroke-width: .5; stroke: var(--black); stroke-opacity: .55; }
.rit.ror-in { stroke: var(--papper); stroke-linecap: butt; }
.fram { opacity: 0; animation: fram .7s var(--d, 2.4s) ease forwards; }
.fyll { fill: var(--papper); opacity: 0; animation: fram .5s var(--d, 0s) ease forwards; }
.fyll.ton { fill: #E6E3DA; }
/* Kulören läggs på när ritningen är klar och tonar över när man byter paket */
.kul { opacity: 0; animation: fram 1.4s var(--d, 4s) ease forwards; transition: fill .7s ease, stroke .7s ease; }
.kf { fill: var(--k-fasad); }
.ks { fill: var(--k-snick); }
.kd { fill: var(--k-dorr); }
.kt { fill: var(--k-tak); }
.kp { fill: var(--k-plat); }
.kg { fill: var(--k-glas); }
.kw { fill: var(--k-trall); }
.kb { fill: var(--k-betong); }
.kl { fill: var(--k-lampa); }
.kp-s { fill: none; stroke: var(--k-plat); stroke-linejoin: round; }
.kul.skugga { fill: #000; fill-opacity: .14; }
.kul.lsk { fill: none; stroke: #000; stroke-opacity: .2; stroke-width: .8; }
.kul.blank { fill: #fff; fill-opacity: .16; }
.beslag rect { fill: var(--black); }
.sken { opacity: 0; animation: tand 1.8s var(--d, 5s) ease-out forwards; }
/* Med JS: ritningen börjar rita först när den syns */
.js .fasad:not(.spela) :is(.rit, .fram, .fyll, .kul, .sken),
.js .fasad:not(.spela) .kulorval { animation-play-state: paused; }
.mtext { font-family: var(--mono); font-size: 11px; font-weight: 500; fill: var(--black); }
.mtext.axel { font-weight: 600; fill: var(--blakopia); }
.mtext.liten { font-size: 9px; font-weight: 400; letter-spacing: .02em; fill: var(--grafit); }
.mtext.bla { fill: var(--blakopia); }
.mtext.rubrik { font-size: 10px; font-weight: 600; letter-spacing: .02em; }

.kulorval { display: none; }
.js .kulorval {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--grafit);
  opacity: 0; animation: fram .6s 5.4s ease forwards;
}
.kulorval button {
  width: 26px; height: 26px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1.5px solid var(--black);
  background: linear-gradient(135deg, var(--a) 0 56%, var(--b) 56% 100%);
}
.kulorval button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--papper), 0 0 0 3.5px var(--black); }
.kulorval-namn { margin-left: 4px; color: var(--black); font-weight: 500; }

.ritningshuvud {
  /* Flex med 1 px glipa: linjerna mellan rutorna följer med när de radbryts */
  display: flex; flex-wrap: wrap; gap: 1px;
  margin-top: 8px; border: 1px solid var(--black); background: var(--linje);
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
}
.ritningshuvud > span {
  flex: 1 1 auto; padding: 10px 14px; background: var(--papper-ljus); white-space: nowrap;
}
.ritningshuvud b { font-weight: 600; }
.ritningshuvud .pagar { display: inline-flex; align-items: center; gap: 8px; }
.ritningshuvud .pagar i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--tumstock); border: 1px solid var(--black);
}

/* Så kommer det att fungera */
.steg { padding: 36px 0 64px; border-top: 1px dashed rgba(30, 42, 53, .35); }
.steg h2.rubrik {
  margin: 0 0 26px; font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .16em; color: var(--blakopia);
}
.steg ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 28px 40px;
}
.steg li { flex: 1 1 280px; min-width: 0; display: flex; gap: 16px; }
.nr {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--black);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 14px; font-weight: 600;
}
.nr.gul { background: var(--tumstock); border-color: var(--tumstock); }
.steg h3 { margin: 4px 0 6px; font-size: 19px; font-weight: 700; }
.steg p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); }

/* >>> Avsnittet med bilder, genereras av lagg_in_avsnitt.py */
/* ------------------------------------------------------------------------------------------------
   Avsnittet "Så kommer det att fungera" med bilder: ett steg per rad, texten till vänster och bilden
   till höger. Steg 1 står kvar som text. På smal skärm ligger bilden under texten.
   ------------------------------------------------------------------------------------------------ */
.steg .stegrader { display: block; }
.steg .stegrad { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2.3fr); gap: 22px 56px; align-items: start;
  padding: 34px 0 40px; border-top: 1px solid var(--linje); }
.steg .stegrad:first-child { padding-top: 0; border-top: 0; }
.steg .stegrad > .text { display: flex; gap: 16px; }
.steg .stegrad > .bild { min-width: 0; max-width: 760px; }

/* ------------------------------------------------------------------------------------------------
   Ritningar i urval (steg 2): utsnitt ur tre blad i en solfjäder, bara det översta helt synligt, och en
   lapp ur materialförteckningen A-901. Genereras av ritningar_axplock.py.
   Allt nedan till "Steg 3" flyttas till stil.css om förslaget godkänns.
   Bladen har A3:s format och ram (20 mm vänster, 10 mm övriga). Utsnitten fyller ritytan innanför ramen.
   ------------------------------------------------------------------------------------------------ */
.axplock { margin: 0; min-width: 0; }
.ark { display: grid; container-type: inline-size; }
.ark > * { grid-area: 1 / 1; min-width: 0; }
.solfjader { position: relative; align-self: center; aspect-ratio: 100 / 52; }
.blad {
  position: absolute; left: 0; top: 0; width: 56cqw; aspect-ratio: 420 / 297; container-type: inline-size;
  background: var(--papper-ljus); border: 1px solid #8F99A2;
  box-shadow: 0 1px 2px rgba(30, 42, 53, .10), 0 18px 26px -20px rgba(30, 42, 53, .55);
  transform-origin: 0 0; transition: transform 1.1s cubic-bezier(.2, .7, .25, 1);
}
.blad img { position: absolute; left: 4.76%; top: 3.37%; width: 92.86%; height: 93.27%; display: block; }
.blad::after { content: ''; position: absolute; left: 4.76%; top: 3.37%; right: 2.38%; bottom: 3.37%; border: 1px solid var(--black); pointer-events: none; }
.bladhuvud {
  position: absolute; right: 2.38%; bottom: 3.37%; width: 36%; z-index: 1;
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  border-left: 1px solid var(--black); border-top: 1px solid var(--black); background: var(--papper-ljus);
  font-family: var(--mono); line-height: 1.2; color: var(--black);
}
.bladhuvud .t { grid-column: 1 / -1; padding: 1.1cqw 1.5cqw .9cqw; border-bottom: 1px solid var(--linje);
  font-size: max(1.75cqw, 6px); font-weight: 500; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.bladhuvud b { padding: .6cqw 1.5cqw .9cqw; font-size: 3.7cqw; font-weight: 600; letter-spacing: .02em; }
.bladhuvud .s { padding: 0 1.5cqw .9cqw; font-size: max(1.75cqw, 6px); color: var(--grafit); }
/* Solfjädern: bladen vrids kring sitt övre vänstra hörn, så att de undre bladens ritningshuvuden sticker fram */
.b1 { transform: rotate(3.5deg) translate(1.2cqw, 2.1cqw); transition-delay: .12s; }
.b2 { transform: rotate(7deg) translate(2.4cqw, 4.2cqw); transition-delay: .24s; }

.lapp-yta {
  justify-self: end; align-self: start; width: 43cqw; margin-top: 1cqw; transform: rotate(-1.4deg);
  filter: drop-shadow(1px 0 0 #8F99A2) drop-shadow(-1px 0 0 #8F99A2) drop-shadow(0 1px 0 #8F99A2) drop-shadow(0 -1px 0 #8F99A2)
          drop-shadow(0 14px 12px rgba(30, 42, 53, .16));
  transition: transform .9s .4s cubic-bezier(.2, .7, .25, 1), opacity .6s .4s ease;
}
/* Lappen är avriven nertill: listan fortsätter */
.lapp {
  --z: 6px; padding: 14px 16px calc(12px + var(--z)); background: var(--papper-ljus);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--z)) 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--z)) 100%;
}
.lapp-huvud { display: flex; align-items: baseline; gap: 10px; margin: 0; padding-bottom: 7px; border-bottom: 1.5px solid var(--black); font-family: var(--mono); }
.lapp-huvud b { font-size: 15px; font-weight: 600; letter-spacing: .03em; }
.lapp-huvud span { font-size: 11px; font-weight: 500; letter-spacing: .14em; }
.steg .lapp-not { margin: 6px 0 9px; font-size: 12.5px; line-height: 1.4; color: var(--grafit); }
.lapp table { width: 100%; border-collapse: collapse; }
.lapp th { padding: 0 0 4px; border-bottom: 1px solid var(--black); text-align: left;
  font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .14em; color: var(--blakopia); }
.lapp td { padding: 6px 0; border-bottom: 1px solid var(--linje); vertical-align: top; }
.lapp .pos { width: 2.6em; padding-top: 7px; font-family: var(--mono); font-size: 11px; color: var(--grafit); }
.lapp th.pos { padding-top: 0; font-size: 9.5px; color: var(--blakopia); }
.lapp .mat { padding-right: 8px; font-size: 14px; line-height: 1.25; font-stretch: 84%; }
.lapp .anm { display: block; margin-top: 2px; font-family: var(--mono); font-size: 10px; line-height: 1.35; font-stretch: 100%; color: var(--grafit); }
.lapp .mangd { text-align: right; white-space: nowrap; font-family: var(--mono); font-size: 12.5px; font-weight: 600; padding-top: 6px; }
.lapp .mangd span { display: inline-block; width: 1.9em; margin-left: .3em; text-align: left; font-weight: 400; color: var(--text-2); }
.lapp th.mangd { padding-top: 0; font-size: 9.5px; font-weight: 500; }
.lapp tr.hopp td { border-top: 1px dashed var(--grafit); }
.lapp .fler td { padding: 9px 0 0; border-bottom: 0; font-family: var(--mono); font-size: 10.5px; line-height: 1.45; letter-spacing: .03em; color: var(--blakopia); }

/* Med JS: bladen ligger i en hög och lappen är undanskjuten tills figuren syns */
.js .axplock:not(.syns) .blad { transform: none; }
.js .axplock:not(.syns) .lapp-yta { opacity: 0; transform: translate(5cqw, 1.5cqw) rotate(1deg); }
.axplock.om * { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .blad, .lapp-yta { transition: none; }
}
/* Smal figur (mobil, platta och smal dator): solfjädern över hela bredden och lappen under den */
@container (max-width: 660px) {
  .solfjader { aspect-ratio: 100 / 77; }
  .blad { width: 87cqw; }
  .lapp-yta { grid-area: 2 / 1; width: 94cqw; margin-top: 0; }
  .lapp { padding: 12px 13px calc(10px + var(--z)); }
  .lapp td { padding: 5px 0; }
  .lapp .mat { font-size: 13.5px; }
}

/* -------------------------------------------------- Steg 3: Bygget växer fram (ur ../bygget-vaxer-fram) */
/* ------------------------------------------------------------------------------------------------
   Bygget växer fram: gäststugan byggs upp i guidens ordning, genereras av bygget_vaxer_fram.py.
   Allt nedan till "Prototypens egna" flyttas till stil.css om förslaget godkänns.
   Tiderna (--d, --t, --dm) räknas från --t0, så att tumstocken kan hoppa i bygget.
   ------------------------------------------------------------------------------------------------ */
.bygge { margin: 0; min-width: 0; --t0: 0s; }
.bygge > svg { display: block; width: 100%; height: auto; overflow: visible; }
.bygge .del { animation: landa .5s calc(var(--d) - var(--t0)) cubic-bezier(.2, .7, .25, 1) both; }
.bygge .del > path {
  stroke: var(--black); stroke-width: .7px; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  animation-duration: 1.35s; animation-delay: calc(var(--d) - var(--t0)); animation-fill-mode: backwards; animation-timing-function: ease-in;
}
.bygge .del > .mal {
  animation-duration: 1.35s, .8s; animation-delay: calc(var(--d) - var(--t0)), calc(var(--dm) - var(--t0));
  animation-fill-mode: backwards, forwards; animation-timing-function: ease-in, ease;
}
.bygge .rit {
  fill: none; stroke: var(--black); stroke-width: .9; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: rita var(--t, 1.1s) calc(var(--d) - var(--t0)) cubic-bezier(.45, .05, .25, 1) forwards;
}
.bygge .rit.tunn { stroke-width: .6; stroke: var(--grafit); }
.bygge .rit.snore { stroke: var(--blakopia); stroke-width: .8; stroke-opacity: .7; }
.bygge .bubbla { fill: var(--papper); stroke: var(--blakopia); stroke-width: .9; }
.bygge .fram { opacity: 0; animation: fram .6s calc(var(--d) - var(--t0)) ease forwards; }
.bygge .mtext { font-family: var(--mono); font-size: 10.5px; font-weight: 500; fill: var(--black); }
.bygge .mtext.axel { font-size: 10px; font-weight: 600; fill: var(--blakopia); }

/* Stegetiketten ovanför ritningen: alla etiketter ligger i samma ruta och tonar in i tur och ordning */
.stegtext { display: grid; margin-bottom: 6px; }
.stegtext p { grid-area: 1 / 1; margin: 0; opacity: 0; animation: etikett var(--t) calc(var(--d) - var(--t0)) ease both; }
.stegtext p.sist { animation: fram .6s calc(var(--d) - var(--t0)) ease forwards; }
.stegtext .kap { display: block; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; color: var(--blakopia); }
.stegtext .rad { display: block; margin-top: 8px; font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: .1em; line-height: 1.5; }
.stegtext .rad b { font-weight: 600; background: var(--tumstock); padding: 2px 7px; margin-right: 6px; white-space: nowrap; }
.stegtext .sub { display: block; margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--text-2); }

/* Tumstocken visar hur långt bygget har kommit. Klick hoppar dit. */
.styr { display: flex; gap: 10px; margin-top: 10px; }
.tum { position: relative; flex: 1; min-width: 0; height: 32px; border: 1.5px solid var(--black); background: var(--papper-ljus); overflow: hidden; cursor: pointer; }
.tum-fyll { position: absolute; inset: 0; background: var(--tumstock); transform-origin: 0 50%; transform: scaleX(0);
  animation: fyll var(--T) calc(0s - var(--t0)) linear forwards; }
.tum::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(30, 42, 53, .6) 0 1px, transparent 1px 6px) 0 0 / 100% 5px no-repeat; }
.tum button {
  position: absolute; top: 0; bottom: 0; left: var(--x); width: var(--w); margin: 0; padding: 9px 0 0 6px;
  border: 0; border-left: 1.5px solid var(--black); background: none; text-align: left; cursor: pointer;
  font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--black);
}
.tum button:first-of-type { border-left: 0; }
.spela-knapp {
  flex: none; display: none; align-items: center; justify-content: center; gap: 9px; min-width: 128px; padding: 0 14px;
  border: 1.5px solid var(--black); background: var(--papper-ljus); color: var(--black); cursor: pointer;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em;
}
.js .spela-knapp { display: inline-flex; }
.spela-knapp:hover { background: #fff; }
.spela-knapp svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.spela-knapp .i-spela { fill: currentColor; stroke: none; }
.spela-knapp path { display: none; }
.spela-knapp[data-lage="spelar"] .i-paus, .spela-knapp[data-lage="paus"] .i-spela, .spela-knapp[data-lage="slut"] .i-igen { display: inline; }

/* Med JS: bygget börjar först när det syns, kan pausas och startas om */
.js .bygge:not(.spela) *, .bygge.paus * { animation-play-state: paused !important; }
.bygge.om * { animation: none !important; }

@keyframes landa { from { opacity: 0; transform: translateY(-22px); } 45% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes rita { to { stroke-dashoffset: 0; } }
@keyframes fram { to { opacity: 1; } }
@keyframes etikett { 0% { opacity: 0; transform: translateY(4px); } 8%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes fyll { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .bygge .del, .bygge .del > path, .bygge .rit, .bygge .fram, .stegtext p, .tum-fyll { animation: none !important; }
  .bygge .rit { stroke-dashoffset: 0; }
  .bygge .fram, .stegtext p.sist { opacity: 1; }
  .tum-fyll { transform: none; }
  .js .spela-knapp { display: none; }
  .tum { pointer-events: none; }
}

@media (min-width: 1001px) {
  .steg .stegrad > .text { position: sticky; top: 28px; }
}
@media (max-width: 1000px) {
  .steg .stegrad { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .steg .stegrad { padding: 28px 0 32px; }
  .stegtext .rad { font-size: 12.5px; letter-spacing: .08em; }
  .stegtext .sub { font-size: 14px; }
  .spela-knapp { min-width: 0; padding: 0 12px; }
  .bygge > svg { overflow: hidden; }
  .bygge .kedja-b { display: none; }
  .tum button { padding-left: 3px; font-size: 10px; }
  .spela-knapp span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
/* <<< Avsnittet med bilder */

/* >>> Väntelistan, förslag 17 okt 2026 */
/* ------------------------------------------------------------------------------------------------
   Väntelistan i hjälten: e-post och knapp på en rad, byggnaderna som kryssrutor, en ruta om
   personuppgifter och ett kvitto när anmälan har gått fram. Gult bara på kryssen och kvittots punkt.
   ------------------------------------------------------------------------------------------------ */
.vantelista { margin-top: 30px; max-width: 34em; }
.vantelista [hidden] { display: none !important; }
.vl-rubrik {
  display: block; margin-bottom: 10px; font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .16em; color: var(--blakopia); text-transform: uppercase;
}
.vl-rad { display: flex; }
.vl-rad input {
  flex: 1 1 auto; min-width: 0; height: 52px; margin: 0; padding: 0 16px;
  border: 1.5px solid var(--black); border-right: 0; border-radius: 0; background: var(--papper-ljus);
  font: 17px/1.2 'Archivo', system-ui, sans-serif; color: var(--black);
  -webkit-appearance: none; appearance: none;
}
.vl-rad input::placeholder { color: #8A96A1; }
.vl-rad input:focus-visible { outline-offset: 0; }
.vl-rad input[aria-invalid="true"] { border-color: #8C2E22; }
.vl-rad .knapp { flex: none; border: 0; border-radius: 0; font-family: inherit; cursor: pointer; }
.vl-rad .knapp:disabled { cursor: progress; opacity: .75; }
.vl-fel { margin: 8px 0 0; font-size: 14px; line-height: 1.5; font-weight: 600; color: #8C2E22; }

.vl-byggnad { margin: 18px 0 0; padding: 0; border: 0; min-width: 0; }
.vl-byggnad legend {
  padding: 0; margin-bottom: 9px; font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; color: var(--grafit); text-transform: uppercase;
}
.vl-byggnad legend span { margin-left: 6px; color: #8A96A1; }
.vl-val { display: flex; flex-wrap: wrap; gap: 8px; }
.vl-val label { position: relative; display: block; }
.vl-val input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.vl-val span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 10px;
  border: 1px solid #8F99A2; background: var(--papper-ljus); cursor: pointer; user-select: none;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
.vl-val span::before {
  content: ''; flex: none; width: 10px; height: 10px; border: 1px solid var(--black); background: var(--papper);
}
.vl-val label:hover span { border-color: var(--black); }
.vl-val input:checked + span { border-color: var(--black); box-shadow: inset 0 0 0 .5px var(--black); }
.vl-val input:checked + span::before { background: var(--tumstock); }
.vl-val input:focus-visible + span { outline: 2px solid var(--blakopia); outline-offset: 2px; }

/* Fältet som bara robotar fyller i */
.vl-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.vl-om { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }

/* Kvittot ersätter fälten när anmälan har gått fram */
.vl-kvitto { border: 1.5px solid var(--black); background: var(--papper-ljus); }
.vl-kvitto:focus { outline: none; }
.vl-kvitto:focus-visible { outline: 2px solid var(--blakopia); outline-offset: 3px; }
.vl-kvitto-huvud {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 0; padding: 11px 14px;
  border-bottom: 1px solid var(--linje); font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
}
.vl-kvitto-huvud > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.vl-kvitto-huvud i { width: 10px; height: 10px; border-radius: 50%; background: var(--tumstock); border: 1px solid var(--black); }
.vl-datum { color: var(--grafit); }
.vl-kvitto-text { margin: 0; padding: 12px 14px 14px; font-size: 16px; line-height: 1.55; color: var(--text-2); }
.vl-kvitto-text b { color: var(--black); font-weight: 600; overflow-wrap: anywhere; }
.vl-kvitto-text a { font-weight: 600; text-underline-offset: 3px; }

/* Om personuppgifter: en hopfälld ruta med samma linjer som ritningshuvudet */
.vl-gdpr { margin-top: 10px; }
.vl-kvitto:not([hidden]) + .vl-gdpr { margin-top: 14px; }
.vl-gdpr summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  font-size: 14px; font-weight: 600;
}
.vl-gdpr summary span { text-decoration: underline; text-underline-offset: 3px; }
.vl-gdpr summary::-webkit-details-marker { display: none; }
.vl-gdpr summary::before {
  content: '+'; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border: 1px solid var(--black); font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1;
}
.vl-gdpr[open] summary::before { content: '–'; }
.vl-gdpr dl {
  display: grid; gap: 1px; margin: 10px 0 0; border: 1px solid var(--black); background: var(--linje);
}
.vl-gdpr dl > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); background: var(--papper-ljus); }
.vl-gdpr dt {
  padding: 10px 12px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em;
  line-height: 1.6; color: var(--blakopia);
}
.vl-gdpr dd { margin: 0; padding: 8px 12px 9px 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.vl-gdpr dd a { font-weight: 600; text-underline-offset: 3px; }

@media (max-width: 720px) {
  .vl-rad { flex-wrap: wrap; }
  .vl-rad input { flex: 1 1 100%; border-right: 1.5px solid var(--black); }
  .vl-rad .knapp { flex: 1 1 100%; justify-content: center; }
  .vl-gdpr dl > div { grid-template-columns: minmax(0, 1fr); }
  .vl-gdpr dt { padding: 9px 12px 0; }
  .vl-gdpr dd { padding: 2px 12px 10px; }
}
/* <<< Väntelistan */

/* Sidfot */
.fot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 32px; padding: 24px 0 36px; border-top: 1px solid var(--linje);
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--grafit);
}
.fot a { color: var(--black); text-decoration: none; }
.fot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fot nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.fot nav a { display: inline-block; padding: 4px 0; }
.fot .rad { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* 404 */
.fel { padding: 88px 0 96px; max-width: 40em; }
.fel .nr-stor {
  font-family: var(--mono); font-size: 14px; font-weight: 500;
  letter-spacing: .16em; color: var(--blakopia);
}

@keyframes rita { to { stroke-dashoffset: 0; } }
@keyframes fram { to { opacity: 1; } }
@keyframes puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes tand { 0% { opacity: 0; } 25% { opacity: .9; } 35% { opacity: .25; } 50%, 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .rit { animation: none; stroke-dashoffset: 0; }
  .fram, .fyll, .kul, .sken, .js .kulorval { animation: none; opacity: 1; }
  .kul { transition: none; }
  .status i { animation: none; }
}

@media (max-width: 720px) {
  .wrap { padding: 0 20px; }
  .topp { flex-wrap: nowrap; gap: 12px; padding: 18px 0; }
  .ordbild { font-size: 15px; gap: 8px; }
  .ordbild .symbol { width: 32px; height: 32px; }
  .status { padding: 6px 9px; gap: 7px; font-size: 10px; letter-spacing: .12em; white-space: nowrap; }
  .status i { width: 8px; height: 8px; }
  .hjalte { padding: 40px 0 36px; gap: 36px; }
  .ingress { font-size: 17px; }
  .knapp { flex: 1 1 100%; justify-content: center; }
  .ritningshuvud > span { padding: 9px 11px; }
  .fasad .hanv { display: none; }
  .kulorval button { width: 30px; height: 30px; }
  .fot { flex-direction: column; align-items: flex-start; }
}

@media print {
  body { background: #fff; }
  .rit { animation: none; stroke-dashoffset: 0; }
  .fram, .fyll, .kul, .sken { animation: none; opacity: 1; }
  .kulorval { display: none !important; }
}