/* ────────────────────────────────────────────────────────────────
     PoleMate — startsida.

     Syskonsajt till poledesign.se. Topbar, typografi, footer och
     instegsanimation är AVSIKTLIGT identiska mellan de två sajterna;
     det som skiljer är bakgrundsmotivet, accentfärgen och texten i
     mitten.

     Bakgrunden här är en KARTA i planvy — fastighetsgränser,
     höjdkurvor, vattendrag, väg, luftledning med stolpar, markkabel
     och ett punktmolnsband. PoleMate är ett kartprogram, och motivet
     ska säga just det. Samma karta ligger som bakgrund på
     poledesign.se — modulernas egna motiv hör hemma i rutorna där,
     inte i bakgrunden.

     Sajterna delar medvetet ingen fil: polemate.se och poledesign.se
     hålls åtskilda. Ändras topbaren här måste den ändras där också.
     ──────────────────────────────────────────────────────────────── */

  :root{
    --bg:        #05070c;
    --ink:       #e9eff8;
    --muted:     #79879c;
    --line:      #16202f;
    --arc:       #58c8ff;   /* PoleMate = cyan. PoleDesign = bärnsten. */
    --arc-2:     #a78bfa;   /* gemensam för båda — binder ihop dem */
    /* Kartans egen färg. Står separat från --arc med flit: kartan är
       PoleMates, och den ligger som bakgrund på BÅDA sajterna. Den ska
       därför se likadan ut oavsett vilken sajts accentfärg som gäller. */
    --map-line:  #58c8ff;
    --topbar-h:  3.5rem;
    /* ⚠️ Sidfoten är position:fixed. Varje sida som rullar måste lämna
       plats för den i sin padding-bottom, annars hamnar sista raden
       under den. */
    --footer-h:  3.1rem;
  }

  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0;
    min-height:100vh;
    min-height:100dvh;          /* följer mobilens adressfält utan hopp */
    background:var(--bg);
    color:var(--ink);
    font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  /* ── Topbar ─────────────────────────────────────────────────────
     Identisk på båda sajterna. Bara .is-current flyttar. */

  .topbar{
    position:fixed;top:0;left:0;right:0;z-index:10;
    height:var(--topbar-h);
    display:flex;align-items:center;justify-content:space-between;
    gap:.75rem;
    padding:0 clamp(.85rem,4vw,2.6rem);
    /* Håller innehållet klart av iPhones hörn i liggande läge */
    padding-left:max(clamp(.85rem,4vw,2.6rem),env(safe-area-inset-left,0px));
    padding-right:max(clamp(.85rem,4vw,2.6rem),env(safe-area-inset-right,0px));
    background:rgba(5,7,12,.72);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }

  .mark{
    display:flex;align-items:center;
    color:var(--arc);
    flex:0 0 auto;
  }
  .mark svg{display:block;width:1.55rem;height:1.55rem}

  .nav{display:flex;align-items:center;gap:.15rem}

  .nav a{
    display:block;
    padding:.42rem clamp(.5rem,2.2vw,.85rem);
    border-radius:999px;
    font-size:clamp(.72rem,2.4vw,.8rem);
    letter-spacing:.06em;
    text-decoration:none;
    color:var(--muted);
    white-space:nowrap;
    transition:color .18s ease, background-color .18s ease;
  }
  .nav a:hover,
  .nav a:focus-visible{
    color:var(--ink);
    background:rgba(255,255,255,.055);
  }
  .nav a.is-current{
    color:var(--ink);
    background:rgba(255,255,255,.07);
    box-shadow:inset 0 0 0 1px var(--line);
  }
  /* Liten accentprick framför den sajt man står på */
  .nav a.is-current::before{
    content:"";
    display:inline-block;
    width:5px;height:5px;border-radius:50%;
    margin-right:.45rem;vertical-align:middle;
    background:var(--arc);
  }

  :focus-visible{outline:2px solid var(--arc);outline-offset:2px}

  /* ── Kartan ─────────────────────────────────────────────────────
     Kvadratisk viewBox (1200×1200) med "slice". Valt med flit: en
     bred viewBox hade på en smal telefon zoomat in på en tunn remsa
     i mitten. Med kvadraten blir bortklippningen måttlig åt båda
     hållen — ~56 % av höjden syns på en bred skärm, ~46 % av bredden
     på en telefon — och motivet är jämnt fördelat så att ingen
     beskärning lämnar en tom yta. */

  .stage{position:fixed;inset:0;overflow:hidden;z-index:0}

  .map{
    position:absolute;
    /* Något större än ytan, så att parallaxförskjutningen aldrig
       blottar en kant. */
    left:-3%;top:-3%;width:106%;height:106%;
    display:block;
    will-change:transform;
  }

  /* Dämpar kartan i mitten så texten går att läsa mot vilken
     bakgrundsdetalj som helst. */
  .veil{
    position:absolute;inset:0;
    background:radial-gradient(ellipse 68% 54% at 50% 46%,
      rgba(5,7,12,.90) 0%,
      rgba(5,7,12,.62) 42%,
      rgba(5,7,12,.20) 72%,
      rgba(5,7,12,0)  100%);
  }
  /* Mörkare mot över- och underkant, så topbar och footer får fäste */
  .veil--edges{
    background:linear-gradient(to bottom,
      rgba(5,7,12,.85) 0%, rgba(5,7,12,0) 18%,
      rgba(5,7,12,0) 82%, rgba(5,7,12,.88) 100%);
  }

  /* Kartlager */
  .parcel   {fill:none;stroke:#22344c;stroke-width:1.1;stroke-dasharray:9 6;stroke-linecap:round}
  .contour  {fill:none;stroke:#152232;stroke-width:1.2}
  .water    {fill:none;stroke:#14364d;stroke-width:7;stroke-linecap:round}
  .water-hi {fill:none;stroke:#1d4f6e;stroke-width:2.2;stroke-linecap:round;opacity:.7}
  .road     {fill:none;stroke:#2b3d56;stroke-width:3.4;stroke-linecap:round}
  .road-hi  {fill:none;stroke:#35496880;stroke-width:1;stroke-dasharray:14 12}
  .cable    {fill:none;stroke:var(--arc-2);stroke-width:1.8;stroke-dasharray:11 8;
             stroke-linecap:round;opacity:.62}
  .line     {fill:none;stroke:var(--map-line);stroke-width:2.1;stroke-linejoin:round;
             stroke-linecap:round;opacity:.9}
  .pole     {fill:#05070c;stroke:var(--map-line);stroke-width:1.6}
  .pole-x   {stroke:var(--map-line);stroke-width:1.1;stroke-linecap:round;opacity:.8}
  .cloud    {opacity:.5}

  /* Ljuspuls längs luftledningen */
  .pulse{
    fill:none;stroke:url(#spark);stroke-width:2.6;stroke-linecap:round;
    stroke-dasharray:60 2600;stroke-dashoffset:2660;
    filter:url(#soften);
  }
  .pulse--1{animation:run 8s cubic-bezier(.5,0,.5,1) infinite}
  .pulse--2{animation:run 8s cubic-bezier(.5,0,.5,1) 3.6s infinite}
  @keyframes run{to{stroke-dashoffset:-60}}

  /* Två långsamt drivande ljusfält, som på syskonsajten */
  .glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.42;will-change:transform}
  .glow--a{
    width:54vmax;height:54vmax;left:-16vmax;top:-20vmax;
    background:radial-gradient(circle, rgba(88,200,255,.26), transparent 66%);
    animation:drift-a 26s ease-in-out infinite alternate;
  }
  .glow--b{
    width:46vmax;height:46vmax;right:-18vmax;bottom:-18vmax;
    background:radial-gradient(circle, rgba(167,139,250,.22), transparent 66%);
    animation:drift-b 32s ease-in-out infinite alternate;
  }
  @keyframes drift-a{from{transform:translate3d(0,0,0) scale(1)}   to{transform:translate3d(6vw,4vh,0) scale(1.12)}}
  @keyframes drift-b{from{transform:translate3d(0,0,0) scale(1.06)}to{transform:translate3d(-5vw,-4vh,0) scale(1)}}

  /* ── Kartografiska detaljer ─────────────────────────────────────
     Ligger som HTML i hörnen, inte inne i SVG:n. Skälet: med "slice"
     hamnar SVG:ns hörn utanför synfältet, så en skala ritad där hade
     försvunnit på vissa skärmar. */

  .cartouche{
    position:absolute;z-index:1;
    color:#3f4d61;
    font-size:.62rem;
    letter-spacing:.14em;text-transform:uppercase;
    pointer-events:none;
  }
  .compass{
    top:calc(var(--topbar-h) + .9rem);
    right:clamp(.85rem,4vw,2.6rem);
    display:flex;flex-direction:column;align-items:center;gap:.3rem;
  }
  .compass svg{display:block;width:.85rem;height:1.15rem}
  .scalebar{
    left:clamp(.85rem,4vw,2.6rem);
    bottom:4.4rem;
    display:flex;flex-direction:column;gap:.32rem;
  }
  .scalebar-rule{
    width:5.5rem;height:6px;
    border:1px solid #2b3a4e;
    border-top:0;
    /* Två fält, som på en riktig kartskala */
    background:linear-gradient(to right,#2b3a4e 0 50%, transparent 50% 100%);
  }

  /* ── Innehåll ───────────────────────────────────────────────────
     Identiskt uppbyggt på båda sajterna. */

  main{
    position:relative;z-index:2;
    min-height:100vh;
    min-height:100dvh;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    padding:calc(var(--topbar-h) + max(5vh,2.5rem)) 1.25rem
            calc(var(--footer-h) + max(4vh,2rem));
    text-align:center;
  }

  /* ── Programmet i bakgrunden ─────────────────────────────────────
     Övre vänstra hörnet, snedställt i 3D. Rullar bort med sidan.

     ⚠️ Måtten är i vw så att lutningen ser likadan ut på en 13-tums
        skärm som på en 32-tums — en fast pixelbredd hade blivit en
        frimärke på den ena och en tapet på den andra.
     ⚠️ Tonar ut nedåt och åt höger med mask-image, så att den möter
        kartan i stället för att sluta i en kant mitt i bilden. */
  .skarm-bak{
    position:absolute;
    top:calc(var(--topbar-h) - 2vh);
    /* ⚠️ 20 % mindre än ursprunget (80vw/72rem → 64vw/58rem gjordes redan;
       det här steget tar 64→51 och 58→46). Storleken sitter i BREDDEN, inte
       i scale() — scale skalar även kanten och skuggan, och en hårlinje som
       krymper med bilden slutar synas. */
    width:min(51vw,46rem);
    height:auto;
    z-index:-1;
    pointer-events:none;
    border-radius:12px;
    border:1px solid rgba(88,200,255,.10);
    box-shadow:0 40px 90px -40px #000;
    opacity:.34;
  }

  /* Vänster: Linux, lutad in mot mitten. */
  .skarm-bak--v{
    left:-3vw;
    transform-origin:0 0;
    transform:perspective(1500px) rotateY(19deg) rotateX(7deg) rotateZ(-5deg) scale(.96);
    -webkit-mask-image:linear-gradient(to bottom right,
      #000 0%, rgba(0,0,0,.85) 38%, rgba(0,0,0,.25) 72%, transparent 100%);
    mask-image:linear-gradient(to bottom right,
      #000 0%, rgba(0,0,0,.85) 38%, rgba(0,0,0,.25) 72%, transparent 100%);
  }

  /* Höger: Windows 11, spegelvänd lutning.
     ⚠️ Speglad genom att TECKNEN vänds på rotationerna, inte med scaleX(-1) —
        det senare hade spegelvänt själva skärmbilden, så att menyraden hamnat
        till höger och texten blivit bakvänd. Det är lutningen som ska
        speglas, inte programmet. */
  .skarm-bak--h{
    right:-3vw;
    transform-origin:100% 0;
    transform:perspective(1500px) rotateY(-19deg) rotateX(7deg) rotateZ(5deg) scale(.96);
    -webkit-mask-image:linear-gradient(to bottom left,
      #000 0%, rgba(0,0,0,.85) 38%, rgba(0,0,0,.25) 72%, transparent 100%);
    mask-image:linear-gradient(to bottom left,
      #000 0%, rgba(0,0,0,.85) 38%, rgba(0,0,0,.25) 72%, transparent 100%);
  }

  /* Mitten: macOS, mellan de två andra.
     ⚠️ Nästan rakt framifrån — den ligger mitt emellan, och en kraftig
        sidled-rotation här hade brutit bågen de tre bildar tillsammans.
     ⚠️ Mindre och blekare än de andra två: den ligger bakom rubriken, och
        rubriken är det som ska läsas. */
  .skarm-bak--m{
    left:50%;
    /* Högre upp än sidobilderna: den ligger bakom rubriken, och ju mer av
       den som kommer ovanför texten desto mindre stör den läsningen. */
    top:calc(var(--topbar-h) - 6vh);
    /* ⚠️ SMALARE I PIXLAR, LIKA STOR I UPPLEVELSE.
       macOS-bilden är 1500×1127 — bildförhållande 1,33 mot sidobildernas
       1,5. Samma bredd hade gjort den synbart HÖGRE än de andra två.
       Bredden är därför satt så att HÖJDEN matchar: sidobilderna är
       51vw / 1,5 ≈ 34vw höga, och 46vw / 1,33 ≈ 34vw. Samma scale som de
       andra, så inget krymper den i efterhand. */
    width:min(46vw,41rem);
    transform-origin:50% 0;
    transform:translateX(-50%) perspective(1500px) rotateX(11deg) rotateZ(.5deg) scale(.96);
    opacity:.20;
    -webkit-mask-image:linear-gradient(to bottom,
      #000 0%, rgba(0,0,0,.7) 42%, transparent 88%);
    mask-image:linear-gradient(to bottom,
      #000 0%, rgba(0,0,0,.7) 42%, transparent 88%);
  }

  /* ⛔ Bort på smala skärmar. Där tar hjältetexten hela ytan, och en
     snedställd bild bakom den blir bara grus. */
  @media (max-width:780px){
    .skarm-bak{display:none}
  }
  /* Mittenbilden ryker redan vid 1100 px — under det ligger den rakt bakom
     rubriken utan att sidobilderna hunnit ge den plats. */
  @media (max-width:1100px){
    .skarm-bak--m{display:none}
  }

  .chip{
    display:inline-flex;align-items:center;gap:.6rem;
    padding:.42rem .95rem .42rem .78rem;
    border:1px solid var(--line);
    border-radius:999px;
    background:rgba(10,15,26,.55);
    backdrop-filter:blur(6px);
    font-size:.7rem;letter-spacing:.19em;text-transform:uppercase;
    color:var(--muted);
  }
  .dot{
    width:6px;height:6px;border-radius:50%;
    background:var(--arc);box-shadow:0 0 0 0 rgba(88,200,255,.6);
    animation:blip 2.6s ease-out infinite;
  }
  @keyframes blip{
    0%  {box-shadow:0 0 0 0 rgba(88,200,255,.55)}
    70% {box-shadow:0 0 0 9px rgba(88,200,255,0)}
    100%{box-shadow:0 0 0 0 rgba(88,200,255,0)}
  }

  h1{
    margin:1.6rem 0 0;
    font-size:clamp(2.75rem,14vw,8.5rem);
    line-height:.94;
    font-weight:680;
    letter-spacing:-.035em;
    background:linear-gradient(100deg,#cfe3ff 0%,#7fd8ff 26%,#a78bfa 44%,#dce9ff 66%,#cfe3ff 100%);
    background-size:220% 100%;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    animation:sweep 9s linear infinite;
  }
  @keyframes sweep{to{background-position:220% 0}}

  .rule{
    width:min(78vw,560px);height:1px;margin:2.1rem auto 0;
    background:linear-gradient(to right,transparent,var(--line) 18%,#2d4463 50%,var(--line) 82%,transparent);
    transform-origin:center;
  }

  /* Andra linjen, mellan ingressen och knapparna. Smalare än den under
     rubriken — den avdelar text från handling, inte rubrik från text, och en
     lika bred linje två gånger läser sig som en upprepning. */
  .rule--2{width:min(56vw,380px);margin-top:2.4rem}
  .rule--2 + .hamta{margin-top:1.6rem}

  .tagline{
    margin:1.8rem 0 0;
    font-size:clamp(1.02rem,1.4vw + .7rem,1.3rem);
    color:#9fb0c6;
    font-weight:400;
    max-width:26ch;
    text-wrap:balance;
  }

  .note{margin:.85rem 0 0;font-size:.85rem;color:var(--muted)}

  /* ── Hämtningsknappen i hjälten ──────────────────────────────────
     En knapp, inte en lista. Startsidan är en presentation; den som vill
     välja version går till /hamta.php. */
  .hamta{margin:2rem 0 0;display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}
  .knapp-ned{
    display:inline-flex;align-items:center;gap:.55rem;
    background:var(--arc);color:#04070f;text-decoration:none;
    font-size:.92rem;font-weight:700;letter-spacing:.01em;
    border:0;border-radius:10px;padding:.7rem 1.3rem;cursor:pointer;
    font-family:inherit;
    box-shadow:0 6px 26px -12px var(--arc);
    transition:filter .15s ease,transform .15s ease;
  }
  .knapp-ned:hover{filter:brightness(1.1);transform:translateY(-1px)}
  .knapp-ned .sub{font-weight:500;opacity:.7;font-size:.82rem}
  .knapp-tyst{
    display:inline-flex;align-items:center;
    background:none;color:var(--ink);
    border:1px solid var(--line);border-radius:10px;
    padding:.7rem 1.2rem;font:inherit;font-size:.92rem;font-weight:600;
    cursor:pointer;text-decoration:none;
    transition:border-color .15s ease,color .15s ease;
  }
  .knapp-tyst:hover{border-color:var(--arc-2);color:#fff}
  .fallback-lank{color:var(--arc);text-decoration:none;font-weight:600}
  .fallback-lank:hover{text-decoration:underline}

  /* Pilen ned. Ren dekoration — sidan fungerar utan den. */
  .ned-pil{
    margin-top:2.5rem;color:var(--muted);opacity:.55;
    transition:opacity .2s ease,transform .2s ease;
  }
  .ned-pil:hover{opacity:1;transform:translateY(2px)}
  @media (prefers-reduced-motion:no-preference){
    .ned-pil svg{animation:vagga 2.6s ease-in-out infinite}
  }
  @keyframes vagga{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

  /* ── Avsnitten under hjälten ─────────────────────────────────────
     ⚠️ Sidan rullar numera. Footern kan därför inte vara fixed — se längre
        ned. Hjälten är fortfarande en hel skärm. */
  .skarmar,.ladda-ner{
    position:relative;z-index:2;
    padding:clamp(3.5rem,9vh,6rem) 1.25rem;
    max-width:74rem;margin:0 auto;
  }
  .sekt-topp{text-align:center;margin-bottom:clamp(1.8rem,4vh,2.8rem)}
  .sekt-topp h2{
    margin:0;font-size:clamp(1.35rem,3.4vw,1.9rem);
    font-weight:650;letter-spacing:-.02em;
  }
  .sekt-topp p{
    margin:.6rem auto 0;max-width:34rem;
    color:var(--muted);font-size:clamp(.88rem,2.2vw,.98rem);
  }
  .sekt-topp strong{color:var(--ink);font-weight:600}

  /* ⚠️ EN KOLUMN, staplade. Sida vid sida krymper en 1400 px bred skärmbild
     till hälften och menyraderna blir oläsliga. En tredje bild (Mac) ska
     kunna läggas till utan att layouten görs om. */
  .skarmstapel{
    display:flex;flex-direction:column;
    gap:clamp(2rem,5vh,3.5rem);
    max-width:62rem;margin:0 auto;
  }
  .skarmstapel figure{margin:0}
  .skarmstapel img{
    display:block;width:100%;height:auto;
    border:1px solid var(--line);border-radius:14px;
    background:#0a0f18;
    box-shadow:0 30px 70px -34px #000;
  }
  .skarmstapel figcaption{
    margin-top:.85rem;text-align:center;
    font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted);
  }
  .knapprad-mitt{margin:1.4rem 0 0;display:flex;justify-content:center}

  .ladda-ner{max-width:44rem;text-align:center}
  .hamta-stor{
    display:flex;flex-direction:column;gap:.6rem;
    max-width:30rem;margin:0 auto;
  }
  .hamta-stor .fil{
    display:flex;align-items:center;gap:1rem;justify-content:space-between;
    background:rgba(255,255,255,.03);border:1px solid var(--line);
    border-radius:12px;padding:.85rem 1rem;text-align:left;
  }
  .hamta-stor .fil .txt{min-width:0}
  .hamta-stor .fil .namn{
    font-size:.95rem;font-weight:600;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .hamta-stor .fil .sub{font-size:.78rem;color:var(--muted);margin-top:.15rem}
  .lankrad{margin:1.6rem 0 0;font-size:.85rem;color:var(--muted)}
  .lankrad a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
  .lankrad a:hover{color:var(--ink);border-bottom-color:var(--line)}
  .lankrad .avdel{opacity:.35;margin:0 .55rem}
  .lankrad button{
    background:none;border:0;padding:0;font:inherit;color:var(--muted);
    cursor:pointer;border-bottom:1px solid transparent;
  }
  .lankrad button:hover{color:var(--ink);border-bottom-color:var(--line)}

  /* ── Licensrutan ─────────────────────────────────────────────
     ⚠️ Formuläret postar till /hamta.php, samma ursprung. Det kräver
        form-action 'self' i .htaccess — med 'none' skickas ingenting, och
        felet syns bara i webbläsarkonsolen. */
  dialog.licensruta{
    background:#0b111b;color:var(--ink);
    border:1px solid var(--line);border-radius:16px;padding:0;
    max-width:29rem;width:calc(100% - 2rem);
    box-shadow:0 40px 100px -30px #000;
  }
  dialog.licensruta::backdrop{background:rgba(2,4,8,.72)}
  .licensruta .inne{padding:1.6rem;text-align:left}
  .licensruta h3{margin:0;font-size:1.15rem;letter-spacing:-.01em}
  .licensruta .ingress{margin:.4rem 0 1.3rem;color:var(--muted);font-size:.86rem}
  .licensruta label.falt{
    display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem;
    color:var(--muted);font-size:.78rem;
    letter-spacing:.1em;text-transform:uppercase;
  }
  .licensruta input[type=text]{
    background:#05090f;color:var(--ink);
    border:1px solid var(--line);border-radius:9px;
    padding:.6rem .75rem;font:inherit;font-size:.95rem;width:100%;
    letter-spacing:normal;text-transform:none;
  }
  .licensruta input[type=text]:focus{outline:2px solid var(--arc-2);outline-offset:1px}
  .licensruta .modrad{display:flex;gap:1.4rem;margin:.1rem 0 1.2rem}
  .licensruta .modrad label{
    display:inline-flex;align-items:center;gap:.5rem;
    font-size:.95rem;font-weight:600;cursor:pointer;
  }
  /* Varianterna. ⚠️ Hela raden är klickbar — en radioknapp på 13 px är ett
     dåligt mål, och valet styr både moduler och giltighetstid. */
  .licensruta .varianter{
    border:0;margin:0 0 1.2rem;padding:0;
    display:flex;flex-direction:column;gap:.5rem;
  }
  .licensruta .varianter legend{
    padding:0;margin-bottom:.5rem;
    font-size:.79rem;color:var(--muted);
  }
  .licensruta .variant{
    display:flex;align-items:flex-start;gap:.65rem;cursor:pointer;
    background:#05090f;border:1px solid var(--line);border-radius:10px;
    padding:.65rem .8rem;
    transition:border-color .15s ease,background-color .15s ease;
  }
  .licensruta .variant:hover{border-color:var(--arc-2)}
  /* ⚠️ :has() på etiketten — det är enda sättet att markera den VALDA raden
     utan JavaScript, och rutan måste fungera utan skript. */
  .licensruta .variant:has(input:checked){
    border-color:var(--arc);background:#071018;
  }
  .licensruta .variant input{margin-top:.15rem;accent-color:var(--arc);flex:none}
  .licensruta .variant-txt{display:flex;flex-direction:column;gap:.15rem}
  .licensruta .variant-txt b{font-size:.95rem;font-weight:650;color:var(--ink)}
  .licensruta .variant-meta{font-size:.78rem;color:var(--muted)}

  .licensruta .upplys{
    background:#05090f;border:1px solid var(--line);border-radius:10px;
    padding:.65rem .8rem;font-size:.79rem;color:var(--muted);margin-bottom:1.2rem;
  }
  /* ⚠️ Varningen om CSD ska läsas, inte skummas. Egen kant i bärnsten så den
     inte smälter ihop med rutan om datornamn. */
  .licensruta .upplys--pdg{border-color:rgba(245,165,36,.35)}
  .licensruta .upplys b{color:var(--ink);font-weight:600}
  /* Statusraden återgiven som den ser ut i programmet, så att den går att
     känna igen i stället för att behöva letas efter. */
  .statusrad{
    display:block;margin-top:.5rem;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:.78rem;color:var(--ink);
    background:#05090f;border:1px solid var(--line);border-radius:7px;
    padding:.4rem .6rem;
  }
  .statusrad i{color:var(--muted);font-style:normal}
  .licensruta .knapprad{display:flex;gap:.6rem;justify-content:flex-end}

  /* Ingen länk till modulerna här i mitten — navigeringen mellan sajterna
     sköts av topbaren, och PoleMate ska inte göra reklam för sina moduler. */

  /* ⚠️ INTE position:fixed längre. Den var fixed när sidan var en enda skärm;
     med skärmbilder och hämtningar under hjälten rullar sidan, och en fast
     footer hade lagt sig över innehållet hela vägen ned. */
  /* ⚠️ FAST, som topbaren och kartan. Sidfoten ska synas hela vägen genom
     rullningen — den är en del av ramen runt sajten, inte slutet på texten.

     ⛔ Följden: allt innehåll måste hålla sig ovanför den. Höjden ligger i
     --footer-h, och varje sida som rullar lägger den till sin padding-bottom.
     Ändras paddingen här måste variabeln ändras med. */
  footer{
    position:fixed;left:0;right:0;bottom:0;z-index:3;
    display:flex;justify-content:space-between;align-items:center;
    gap:.75rem;flex-wrap:wrap;
    padding:1.05rem clamp(1rem,4vw,2.6rem);
    padding-bottom:max(1.05rem,env(safe-area-inset-bottom,0px));
    /* Innehållet rullar UNDER sidfoten. ⚠️ Bakgrunden måste därför vara
       nästan täckande — .78 räckte inte, texten under lyste igenom och de
       två lästes ovanpå varandra. Och lita inte på backdrop-filter ensamt:
       den ignoreras i vissa lägen, och då står bara alfat kvar. */
    background:rgba(5,7,12,.94);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
    font-size:clamp(.66rem,1.9vw,.72rem);
    letter-spacing:.12em;text-transform:uppercase;
    color:#4d5b70;
  }
  footer span{white-space:nowrap}

  /* Instegsanimation */
  .rise{opacity:0;transform:translateY(18px);animation:rise .95s cubic-bezier(.16,.8,.3,1) forwards}
  .d1{animation-delay:.12s}
  .d2{animation-delay:.26s}
  .d3{animation-delay:.46s}
  .d4{animation-delay:.60s}
  .d5{animation-delay:.76s}
  .d6{animation-delay:.92s}
  @keyframes rise{to{opacity:1;transform:none}}
  .rule.rise{animation-name:rise-rule}
  @keyframes rise-rule{from{opacity:0;transform:scaleX(.2)}to{opacity:1;transform:none}}

  /* Telefon i stående läge */
  @media (max-width:560px){
    footer{justify-content:center}
    footer .hide-sm{display:none}
    .glow{filter:blur(60px)}
    .rule{margin-top:1.7rem}
    .tagline{margin-top:1.5rem}
    h1{letter-spacing:-.028em}
    /* Skalan hamnar för nära footern på liten skärm */
    .scalebar{display:none}
    /* Tunnare streck så kartan inte blir grötig när "slice" zoomar in */
    .parcel{stroke-width:.9;stroke-dasharray:7 5}
    .water{stroke-width:5.5}
    .road{stroke-width:2.6}
  }

  /* Låg viewport, t.ex. telefon i liggande läge */
  @media (max-height:560px) and (orientation:landscape){
    main{padding-top:calc(var(--topbar-h) + 1.2rem);padding-bottom:4.5rem}
    h1{font-size:clamp(2.4rem,9vh,4rem)}
    .rule{margin-top:1.1rem}
    .tagline{margin-top:.9rem;font-size:1rem}
    .note{margin-top:.5rem}
    .cartouche{display:none}
  }

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none!important;transition:none!important}
    .rise{opacity:1;transform:none}
    .pulse{display:none}
  }

/* ══════════════════════════════════════════════════════════════════
   Undersidorna — PoleMate, Moduler, Ladda ner.

   ⚠️ Hjälten på startsidan är fortfarande en hel skärm. De här sidorna
      är vanliga dokument som rullar, och de ligger ovanpå samma
      kartbakgrund. Panelerna behöver därför en egen bakgrund för att
      texten ska gå att läsa mot kartan.
   ══════════════════════════════════════════════════════════════════ */

/* ⚠️ display:block och text-align:left återställer det som <main> sätter för
   HJÄLTEN: flex, centrerat, mitt i skärmen. En dokumentsida ska läsas från
   vänsterkanten — centrerad brödtext är svårläst så fort den blir mer än ett
   par rader. */
.sidinnehall{
  position:relative;z-index:2;
  display:block;text-align:left;
  min-height:0;
  max-width:64rem;margin:0 auto;
  padding:calc(var(--topbar-h) + 3.5rem) 1.25rem calc(var(--footer-h) + 3rem);
}

.sidtopp{margin-bottom:clamp(2.5rem,6vh,4rem)}
.sidtopp h1{
  font-size:clamp(2rem,6vw,3rem);margin:0 0 .8rem;
  letter-spacing:-.03em;line-height:1.05;
}
.sidtopp .ingress{
  font-size:clamp(1rem,2.6vw,1.15rem);color:var(--ink);
  margin:0 0 .9rem;line-height:1.6;
}
.sidtopp .under{color:var(--muted);font-size:.95rem;margin:0}
.sidtopp strong{font-weight:650}

.sekt{margin-bottom:clamp(3rem,8vh,5rem)}
.sekt h2{
  font-size:clamp(1.3rem,3.4vw,1.7rem);margin:0 0 .5rem;
  letter-spacing:-.02em;font-weight:650;
}
.sekt-ingress{color:var(--muted);margin:0 0 1.6rem;max-width:42rem}
.sekt-ingress strong{color:var(--ink);font-weight:600}
.sekt--avslut{text-align:center;border-top:1px solid var(--line);padding-top:3rem}
.sekt--avslut .sekt-ingress{margin-left:auto;margin-right:auto}

/* Panelernas gemensamma yta. Kartan ligger bakom — utan egen bakgrund
   blir längre text svårläst över höjdkurvorna. */
.kort,.kol,.modulkort,.filrad,.upplysruta,.tabellsvep,.fakta{
  background:rgba(10,16,26,.72);
  border:1px solid var(--line);
  border-radius:12px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.kortgrid{
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
}
.kort{padding:1.1rem 1.25rem}
.kort h3{margin:0 0 .45rem;font-size:1rem;font-weight:650;color:var(--arc)}
.kort p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.6}
.kort em{color:var(--ink);font-style:normal}

.tvakol{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))}
.kol{padding:1.25rem 1.4rem}
.kol h3{margin:0 0 .6rem;font-size:1.05rem;font-weight:650}
.kol p{margin:0 0 .9rem;color:var(--muted);font-size:.93rem;line-height:1.65}
.kol strong{color:var(--ink);font-weight:600}
.punkter{margin:0;padding-left:1.1rem;color:var(--muted);font-size:.9rem;line-height:1.6}
.punkter li{margin-bottom:.45rem}
.punkter strong{color:var(--ink)}

/* ⚠️ Egen rullning i x-led. Tabellen är bred, och sidan i sig får aldrig
   rulla i sidled — det förstör layouten på telefon. */
.tabellsvep{overflow-x:auto;padding:.35rem}
table.format{width:100%;border-collapse:collapse;font-size:.92rem;min-width:34rem}
table.format th{
  text-align:left;color:var(--muted);font-weight:600;
  font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;
  padding:.7rem .85rem;border-bottom:1px solid var(--line);white-space:nowrap;
}
table.format td{padding:.55rem .85rem;border-bottom:1px solid rgba(22,32,47,.6)}
table.format tr:last-child td{border-bottom:0}
table.format td:first-child{font-weight:600}
table.format .ja{color:var(--arc);text-align:center;font-weight:700}
table.format code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.85em;color:var(--muted);
}

.faktarad{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.fakta{padding:.9rem 1.1rem}
.fakta b{display:block;font-size:.98rem;margin-bottom:.15rem}
.fakta span{color:var(--muted);font-size:.85rem}

.fotnot{color:var(--muted);font-size:.87rem;margin:1.4rem 0 0;line-height:1.6;max-width:44rem}
/* En fotnot som hör ihop med den ovanför: egen rad, men inte eget stycke
   luftmässigt. ⚠️ 1,4 rem mellan dem hade läst sig som två skilda upplysningar. */
.fotnot--tat{margin-top:.45rem}
.fotnot strong{color:var(--ink);font-weight:600}
.fotnot code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em}

/* En adress som ska läsas och skrivas av, inte klickas. ⚠️ user-select:all —
   ett klick markerar hela adressen, så den går att kopiera i ett svep trots
   att den inte är en länk. */
.epost{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.94em;color:var(--ink);
  -webkit-user-select:all;user-select:all;
}

/* ── Moduler ────────────────────────────────────────────────────── */
/* Tre paneler på rad. Pekar man på en tar den hela ytan; de andra dras ihop
   till sin egen kantlinje och ligger kvar som två svaga sidor i utkanten.

   ⛔ Kanterna får ALDRIG bli noll breda. De är vägen tillbaka — far man med
      musen ut mot sidan ska det finnas något att träffa. En panel som
      krymper till ingenting stänger dörren efter sig.

   ⚠️ flex-basis är 0 i vila, inte auto. Med auto väger innehållets bredd in
      och "ConstructionDesign" hade fått en bredare panel än "CableDesign"
      utan att någon bett om det. */
.modulgrid{
  display:flex;
  --mg:.5rem;     /* ⚠️ litet med flit — se dödzonen längst ned i blocket */
  --kant:34px;    /* den hopdragna panelens bredd */
  gap:var(--mg);
  height:clamp(19rem,50vh,25rem);
}
.modulkort{
  flex:1 1 0;min-width:0;
  position:relative;
  display:flex;flex-direction:column;
  padding:1.3rem 1.3rem 1.2rem;
  border-left:3px solid var(--arc-2);
  overflow:hidden;
  transition:flex-grow .55s cubic-bezier(.2,.8,.2,1),
             flex-basis .55s cubic-bezier(.2,.8,.2,1),
             border-color .35s ease,
             background-color .35s ease;
}

/* Alla dras ihop till kanten … */
.modulgrid:has(.modulkort:hover) .modulkort,
.modulgrid:has(.modulkort:focus-visible) .modulkort{
  flex:0 0 var(--kant);
  background:rgba(10,16,26,.5);
}
/* … utom den man pekar på, som behåller vilans flex och sväljer resten. */
.modulgrid:has(.modulkort:hover) .modulkort:hover,
.modulgrid:has(.modulkort:focus-visible) .modulkort:focus-visible{
  flex:1 1 0;
  border-left-color:var(--arc);
  background:rgba(14,22,34,.82);
}
.modulkort:focus-visible{outline:1px solid var(--arc);outline-offset:2px}

/* ⚠️ Innehållet tonas bort — det klipps inte bort. En kant på 34 px är
      smalare än kortets egen padding, så texten hade legat kvar och skrapat
      mot kanten som en grå smet. opacity är det enda som verkligen släcker
      den, och den måste vara snabbare än glidningen så att orden är borta
      innan panelen hinner bli smal. */
.modulkort-topp,.modulkort-kropp,.lage{
  transition:opacity .25s ease;
}
.modulgrid:has(.modulkort:hover) .modulkort:not(:hover) .modulkort-topp,
.modulgrid:has(.modulkort:hover) .modulkort:not(:hover) .modulkort-kropp,
.modulgrid:has(.modulkort:hover) .modulkort:not(:hover) .lage,
.modulgrid:has(.modulkort:focus-visible) .modulkort:not(:focus-visible) .modulkort-topp,
.modulgrid:has(.modulkort:focus-visible) .modulkort:not(:focus-visible) .modulkort-kropp,
.modulgrid:has(.modulkort:focus-visible) .modulkort:not(:focus-visible) .lage{
  opacity:0;
}

.modulkort-topp{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.5rem}
/* ⚠️ Ingen overflow-wrap:anywhere här. "ConstructionDesign" är ett ord, och i
      ett hopdraget kort delade den regeln det på mitten — "Construction /
      Design" — vilket läses som två moduler. Namnet krymper hellre än bryts. */
.modulkort h3{
  margin:0;font-weight:650;
  font-size:clamp(.9rem,1.05vw,1.05rem);
}
.modulkod{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.7rem;font-weight:700;letter-spacing:.08em;
  color:var(--muted);border:1px solid var(--line);
  border-radius:4px;padding:.1rem .4rem;
  flex:none;
}

/* Kroppen är en rad: orden till vänster, bilden till höger. I vila har bilden
   noll bredd och orden hela kortet. */
.modulkort-kropp{display:flex;flex:1;min-height:0;margin-bottom:1rem}
/* ⚠️ overflow:hidden och min-height:0 sitter här, inte bara på kortet. Utan
   dem har elementet ingen egen höjd att svämma över, och då kan JavaScript
   inte mäta om texten får plats. */
.modulkort-ord{flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}

/* Ryms inte texten tonar den bort nedåt i stället för att kapas rakt av.
   Klassen sätts av sida.js — se mätningen där.

   ⚠️ mask-image, INTE en toning ovanpå. Panelen är genomskinlig mot kartan;
      en solid gradient hade lagt en grå plätt över bakgrunden i stället för
      att låta texten försvinna in i den.

   ⚠️ Tonar de sista 4 rem, inte de sista 40 %. En procentsats gör att en kort
      text tonas nästan från början medan en lång knappt märks — måttet ska
      följa bokstäverna, inte panelen. */
.modulkort-ord.tonar{
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 4rem),transparent 100%);
          mask-image:linear-gradient(to bottom,#000 calc(100% - 4rem),transparent 100%);
}
/* ⛔ Utfälld ryms texten, och då får ingenting vara utsuddat. Gäller både
      hovring och det frysta läget när förstoringen är öppen. */
.modulkort:hover .modulkort-ord.tonar,
.modulkort:focus-visible .modulkort-ord.tonar,
.modulgrid.frusen .modulkort.oppen .modulkort-ord.tonar{
  -webkit-mask-image:none;
          mask-image:none;
}
.modulkort-kort{margin:0 0 .6rem;color:var(--ink);font-size:.92rem;font-weight:600;line-height:1.5}
/* Stycken, inte en vägg. margin-bottom på alla utom det sista — ett efterföljande
   tomrum inuti en panel som redan har padding blir ett hål. */
.modulkort-text{margin:0 0 .7rem;color:var(--muted);font-size:.87rem;line-height:1.6}
.modulkort-text:last-child{margin-bottom:0}

/* Platshållarbilden växer fram ur kortets högerkant.
   ⚠️ Bredden ligger i flex-basis, inte i gap eller marginal. Ett gap på
      .modulkort-kropp hade lagt kvar sin lucka även när bilden är noll bredd,
      och orden hade fått en oförklarlig tom remsa i höger kant i vila.
      Luckan bor därför i bildens egen padding-left och växer med den. */
.modulbild{
  flex:0 0 0;min-width:0;
  box-sizing:border-box;
  padding-left:0;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  opacity:0;
  transform:translateX(14px) scale(.97);
  transition:flex-basis .55s cubic-bezier(.2,.8,.2,1),
             padding-left .55s cubic-bezier(.2,.8,.2,1),
             opacity .4s ease .1s,
             transform .55s cubic-bezier(.2,.8,.2,1) .1s;
}
.modulbild svg{
  width:100%;height:auto;
  max-height:100%;max-width:30rem;
}

/* Bläddringen. ⚠️ Bilderna ligger STAPLADE och absolut placerade — i flödet
   hade panelen ändrat höjd vid varje byte, eftersom skärmbilderna inte har
   samma proportioner. Svepet är måttet, bilderna skrivs in i det. */
.modulbild-svep{
  position:relative;
  flex:1;min-height:0;width:100%;
  align-self:stretch;
}
.modulbild-svep img{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  border-radius:8px;
  border:1px solid rgba(88,200,255,.14);
  box-shadow:0 24px 60px -30px #000;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
  cursor:zoom-in;
}
/* ⛔ pointer-events tillbaka bara på den synliga. Annars ligger den dolda
      bilden kvar över den syns och fångar klicket. */
.modulbild-svep img.pa{opacity:1;pointer-events:auto}

/* Pilarna. Syns när pekaren är över bilden — och när de har fokus, annars
   finns de inte för den som tabbar. */
.bildpil{
  position:absolute;top:50%;transform:translateY(-50%);
  width:2.4rem;height:2.4rem;
  display:flex;align-items:center;justify-content:center;
  background:rgba(6,10,18,.72);
  border:1px solid rgba(88,200,255,.22);
  border-radius:50%;
  color:var(--ink);cursor:pointer;
  opacity:0;transition:opacity .25s ease,background-color .2s ease;
  z-index:2;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.bildpil svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.bildpil--v{left:.6rem}
.bildpil--h{right:.6rem}
.modulbild:hover .bildpil,
.bildpil:focus-visible{opacity:1}
.bildpil:hover{background:rgba(14,24,38,.92);border-color:var(--arc)}
.bildpil:focus-visible{outline:1px solid var(--arc);outline-offset:2px}

.bildraknare{
  position:absolute;right:.7rem;bottom:.5rem;
  font-size:.72rem;letter-spacing:.06em;
  color:var(--muted);
  background:rgba(6,10,18,.72);
  border-radius:20px;padding:.1rem .5rem;
  opacity:0;transition:opacity .25s ease;
}
.modulbild:hover .bildraknare{opacity:1}
.modulkort:hover .modulbild,
.modulkort:focus-visible .modulbild{
  flex-basis:52%;padding-left:1.6rem;
  opacity:1;transform:none;
}

/* Statusraderna trycks till kortets botten som en grupp. */
.lagen{margin:auto 0 0;display:flex;flex-direction:column;gap:.35rem;align-items:flex-start}

.lage{
  margin:0;display:inline-flex;align-items:center;gap:.45rem;
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--arc-2);white-space:nowrap;
}
.lage .prick{
  width:6px;height:6px;border-radius:50%;background:var(--arc-2);
  box-shadow:0 0 0 3px rgba(167,139,250,.18);
  flex:none;
}

/* Demoraden. ⚠️ Rött mot #05070c måste ljusna för att bli läsbart — ren röd
   (#f00) blir gröt mot mörk bakgrund och klarar inte kontrastkravet i den
   här textstorleken. Färgen står här och inte i :root: den används på ETT
   ställe, och en palettvariabel inbjuder till att måla annat rött. */
.lage--demo{color:#ff8080;font-size:.72rem}
.lage--demo .prick{
  background:#ff8080;
  box-shadow:0 0 0 3px rgba(255,128,128,.18);
}

/* Demon som går att hämta. Grön, och en riktig länk — raden är det enda
   stället på sidan där något faktiskt går att göra.
   ⚠️ Samma ljusningsskäl som för den röda: mot #05070c behöver grönt lyftas
      för att bli läsbart i den här storleken. */
.lage--hamta{font-size:.72rem}
.lage--hamta .prick{
  background:#4ade80;
  box-shadow:0 0 0 3px rgba(74,222,128,.18);
}
.lage--hamta a{
  color:#4ade80;text-decoration:none;
  border-bottom:1px solid rgba(74,222,128,.35);
}
.lage--hamta a:hover{color:#86efac;border-bottom-color:#86efac}

/* ⚠️ Mellanrummet är en dödzon. :has(:hover) släpper i det ögonblick musen
      lämnar en panel, och med ett brett gap hinner alla tre fjädra tillbaka
      mot viloläget på vägen mellan två paneler. Ett halvt rem korsas för
      snabbt för att det ska hinna synas. Öka det inte utan att pröva
      förflyttningen i sidled. */

/* ⚠️ any-hover, inte hover. hover:none frågar efter den PRIMÄRA pekaren, och
      en bärbar med pekskärm svarar då nej trots att musen finns. Utan pekare
      alls finns ingen hover att bygga på — då blir det tre vanliga kort med
      bilderna framme, för det som inte går att peka på måste visa allt. */
@media (max-width:880px), (any-hover:none){
  .modulgrid{flex-direction:column;height:auto;gap:1rem}
  .modulkort,
  .modulgrid:has(.modulkort:hover) .modulkort,
  .modulgrid:has(.modulkort:focus-visible) .modulkort{flex:none}
  .modulgrid:has(.modulkort:hover) .modulkort:not(:hover) .modulkort-topp,
  .modulgrid:has(.modulkort:hover) .modulkort:not(:hover) .modulkort-kropp,
  .modulgrid:has(.modulkort:hover) .modulkort:not(:hover) .lage{opacity:1}
  .modulkort-kropp{flex-direction:column}
  .modulbild{opacity:1;transform:none;height:9rem;flex:none;padding:1rem 0 0}
}
@media (prefers-reduced-motion:reduce){
  .modulkort,.modulbild,.modulkort-topp,.modulkort-kropp,.lage{transition-duration:.01ms}
}

/* ── Förstorad modulbild ────────────────────────────────────────── */
/* Klick på skärmbilden lyfter den över allt annat; klick igen lägger den
   tillbaka där den låg.

   ⚠️ z-index 60 — topbaren ligger på 10 och sidfoten på 3. Rutan måste ligga
      över BÅDA, annars skär de fasta listerna genom den förstorade bilden. */
.bildlada{
  position:fixed;inset:0;z-index:60;
  background:rgba(4,7,14,.86);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;transition:opacity .28s ease;
  cursor:zoom-out;
}
.bildlada.pa{opacity:1}

/* ⚠️ Den flygande bilden är en KOPIA i rutan, inte originalet flyttat.
   .modulkort har overflow:hidden — en bild som växer inuti kortet klipps
   mot kortkanten och ser ut att fastna. */
.bildlada img{
  position:fixed;margin:0;
  border-radius:10px;
  border:1px solid rgba(88,200,255,.2);
  box-shadow:0 50px 120px -40px #000;
  transform-origin:top left;
  transition:transform .34s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}

.modulbild img{cursor:zoom-in}

/* ⛔ Panelen måste stå kvar utfälld medan rutan är öppen. Utfällningen hänger
   på :hover, och pekaren står över rutan — utan det här faller panelen ihop
   under bilden, och när den läggs tillbaka flyger den mot en plats som inte
   finns längre. Reglerna speglar hover-läget och står EFTER det. */
.modulgrid.frusen .modulkort{
  flex:0 0 var(--kant);
  background:rgba(10,16,26,.5);
}
.modulgrid.frusen .modulkort:not(.oppen) .modulkort-topp,
.modulgrid.frusen .modulkort:not(.oppen) .modulkort-kropp,
.modulgrid.frusen .modulkort:not(.oppen) .lage{opacity:0}
.modulgrid.frusen .modulkort.oppen{
  flex:1 1 0;
  border-left-color:var(--arc);
  background:rgba(14,22,34,.82);
}
.modulgrid.frusen .modulkort.oppen .modulkort-topp,
.modulgrid.frusen .modulkort.oppen .modulkort-kropp,
.modulgrid.frusen .modulkort.oppen .lage{opacity:1}
.modulgrid.frusen .modulkort.oppen .modulbild{
  flex-basis:52%;padding-left:1.6rem;
  opacity:1;transform:none;
}

@media (prefers-reduced-motion:reduce){
  .bildlada,.bildlada img{transition-duration:.01ms}
}

/* ── Ladda ner ──────────────────────────────────────────────────── */
.grupprubrik{
  font-size:.76rem!important;text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted);margin:2.2rem 0 .8rem!important;font-weight:600;
}
.grupprubrik:first-child{margin-top:0!important}

/* Kategorirubriken står över plattformsrubrikerna och ska läsas som en nivå
   till, inte som ännu en av dem. ⚠️ Därför gemener och accentfärg mot
   plattformarnas versala grå — skillnaden får inte bara vara storleken. */
.kategorirubrik{
  font-size:1.15rem!important;font-weight:650;
  color:var(--ink);letter-spacing:0;text-transform:none;
  margin:2.8rem 0 .2rem!important;
  padding-bottom:.5rem;
  border-bottom:1px solid var(--line);
}
.kategorirubrik:first-child{margin-top:0!important}
/* ⚠️ Plattformsrubriken direkt under en kategorirubrik får inte sin vanliga
   luft — den hör ihop med rubriken ovanför, inte med listan före. */
.kategorirubrik + .grupprubrik{margin-top:1.1rem!important}
.fillista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.filrad{
  display:flex;align-items:center;gap:1.25rem;justify-content:space-between;
  padding:1rem 1.15rem;flex-wrap:wrap;
}
.filrad-txt{flex:1;min-width:15rem}
.filrad-namn{font-size:1rem;font-weight:600;margin-bottom:.2rem}
.filrad-meta{color:var(--muted);font-size:.85rem}
/* Anteckningen får vara flerradig — den bär korta installationsanvisningar.
   ⚠️ line-height här, inte bara i .filrad: en tät radhöjd som fungerar för en
   rad blir en klump när det blir tre. */
.filrad-not{color:var(--muted);font-size:.87rem;margin-top:.45rem;line-height:1.55;max-width:52ch}
.filrad .hash{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.68rem;color:var(--muted);word-break:break-all;margin-top:.5rem;
}
.filrad .hash b{color:var(--ink);font-weight:600;font-family:inherit}
.filtyp{
  display:inline-block;background:rgba(88,200,255,.10);color:var(--arc);
  border:1px solid rgba(88,200,255,.22);border-radius:4px;
  padding:.05rem .4rem;font-size:.68rem;font-weight:700;letter-spacing:.06em;
  margin-right:.45rem;vertical-align:.08rem;
}
.upplysruta{padding:.85rem 1rem;font-size:.88rem;color:var(--muted);max-width:40rem}
.upplysruta b{color:var(--ink);font-weight:600}
.statusrad{
  display:block;margin-top:.6rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.78rem;color:var(--ink);
  background:#05090f;border:1px solid var(--line);border-radius:7px;
  padding:.45rem .65rem;
}
.statusrad i{color:var(--muted);font-style:normal}
.kommandon{color:var(--muted);font-size:.9rem;line-height:2}
.kommandon code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:#05090f;border:1px solid var(--line);border-radius:6px;
  padding:.25rem .55rem;color:var(--ink);
}
.varningsruta{
  background:#2a1f08;border:1px solid #4a3610;color:#f5a524;
  border-radius:9px;padding:.7rem 1rem;font-size:.9rem;margin-bottom:1.5rem;
}
.felruta{
  background:#2a1414;border:1px solid #4a1f1f;color:#f87171;
  border-radius:9px;padding:.7rem 1rem;font-size:.92rem;margin-bottom:1.5rem;
}
.tomt{color:var(--muted);font-style:italic}

/* ── Startsidans nya delar ──────────────────────────────────────── */
.hjalte .ingress{
  max-width:34rem;margin:.9rem auto 0;
  color:var(--muted);font-size:clamp(.9rem,2.3vw,1rem);line-height:1.65;
}
.vidare{margin:2.5rem 0 0;font-size:.88rem;color:var(--muted)}
.vidare a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.vidare a:hover{color:var(--ink);border-bottom-color:var(--line)}
.vidare .avdel{opacity:.35;margin:0 .55rem}

/* Bakgrundsbilderna ligger nu i en egen behållare som rullar med sidan. */
.bakgrundsbilder{
  position:absolute;inset:0 0 auto 0;height:100dvh;
  z-index:1;pointer-events:none;overflow:hidden;
}

/* ── Topbarens sidnavigering ────────────────────────────────────── */
.nav--sidor{flex:1;margin-left:.5rem}
.nav--sidor a{color:var(--muted)}
.nav--sidor a.pa{color:var(--ink);background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px var(--line)}
.nav--sajter{flex:0 0 auto}

@media (max-width:860px){
  .topbar{flex-wrap:wrap;height:auto;padding-top:.5rem;padding-bottom:.5rem}
  .nav--sidor{order:3;width:100%;justify-content:center;margin:.2rem 0 0}
  .sidinnehall{padding-top:calc(var(--topbar-h) + 4.5rem)}
}

/* Grupprader i formattabellen. Fjorton rader utan indelning är en vägg;
   med grupper hittar man laserdata utan att läsa hela. */
table.format tr.grupp td{
  padding:1.1rem .85rem .35rem;border-bottom:0;
  font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--arc-2);font-weight:700;
}
table.format tr.grupp:first-child td{padding-top:.35rem}


/* ══════════════════════════════════════════════════════════════════
   Bläddringsläget — html.bladdra

   Sidan bläddras som blad: varje avsnitt är exakt en skärm, och
   rullningen hakar i nästa.

   ⛔ KLASSEN LIGGER PÅ <html>, INTE <body>. scroll-snap-type måste sitta
      på scrollbehållaren, och för ett dokument är det rotelementet. Till
      skillnad från overflow propagerar den INTE uppåt från body — regeln
      gör då ingenting alls, tyst. Precis det hände 2026-08-25.

   ⛔ 'mandatory' KRÄVER att varje blad ryms i en skärm. Gör det inte det
      går avsnittet inte att läsa klart: rullningen slänger en vidare
      mitt i. Därför har varje blad en FAST höjd, och det enda innehåll
      som inte får plats — formattabellen — rullar inuti sitt eget blad.

      Det var med 'proximity' rullningen kändes trasig: den drog tillbaka
      en mitt i det långa avsnittet i stället för att låta en läsa.
   ══════════════════════════════════════════════════════════════════ */

html.bladdra{
  scroll-snap-type:y mandatory;
  /* ⚠️ Gäller tangentbord, ankarlänkar och snap-korrigeringar — inte
     hjulet, som webbläsaren styr själv. */
  scroll-behavior:smooth;
}

/* Bladets höjd, en gång. Både avsnitten och bilderna räknar på den.
   ⚠️ HELA skärmen — topbaren och sidfoten ligger OVANPÅ, inte bredvid.
   Att räkna bort dem från höjden hade gjort bladet kortare än skärmen och
   lämnat en glipa; i stället håller varje blad undan för dem med sin egen
   padding, se nedan. */
html.bladdra{--blad-h:100dvh}

html.bladdra .sidinnehall{padding-top:0;padding-bottom:0}

html.bladdra .sidtopp,
html.bladdra .sekt{
  scroll-snap-align:center;
  /* ⚠️ 'always' hindrar att ett snabbt hjulryck hoppar över ett blad.
     Det är skillnaden mellan att bläddra och att kasta. */
  scroll-snap-stop:always;

  /* ⛔ min-height, INTE height. Ett avsnitt som behöver mer plats ska få
     växa — se nästa stycke. */
  min-height:var(--blad-h);
  display:flex;flex-direction:column;justify-content:center;
  margin:0;

  /* ⛔ VARJE BLAD HÅLLER UNDAN FÖR BÅDA STAPLARNA SJÄLVT.
     Topbaren och sidfoten är position:fixed och ligger OVANPÅ sidan. Utan
     den här paddingen glider början och slutet av ett långt avsnitt in
     under dem och går inte att läsa — och det syns bara på avsnitt som är
     högre än skärmen, alltså sällan där man tittar först. */
  padding-top:calc(var(--topbar-h) + 1.5rem);
  padding-bottom:calc(var(--footer-h) + 1.5rem);
}

/* ⚠️ ETT AVSNITT SOM ÄR HÖGRE ÄN SKÄRMEN SKA RULLA NORMALT.
   Det behöver ingen egen ram, och ska inte ha någon: när snap-ytan är
   större än skärmen tillåter specen att rullningen vilar var som helst
   inuti den. Man rullar alltså vanligt genom avsnittet och fäster först
   vid nästa — precis det beteende som eftersöktes.

   ⛔ Ett första försök la tabellen i en egen rullande ram med max-height.
   Det motarbetade just den mekaniken: bladet låg still medan innehållet
   rullade inuti, och avsnittet kändes avskilt från resten av sidan.

   ⚠️ Långa avsnitt fäster i sin ÖVERKANT, inte i mitten. Med center hade
   början hamnat ovanför skärmkanten när man kom in i dem. */
html.bladdra .sekt:has(.tabellsvep){
  scroll-snap-align:start;
  justify-content:flex-start;
}

/* Skärmbildsbladen: en bild per blad, begränsad av HÖJDEN.
   ⚠️ Bredden är fri — en bild som är för hög tvingar fram rullning inuti
      bladet, och då är det inget blad längre. */
.sekt--blad{align-items:center;text-align:center}
.sekt--blad h2{margin-bottom:.3rem}
.sekt--blad .sekt-ingress{margin-bottom:1.2rem}
.storbild{margin:0;width:100%;display:flex;justify-content:center;min-height:0}
.storbild img{
  display:block;width:auto;height:auto;
  max-width:min(100%,68rem);
  max-height:calc(100dvh - var(--topbar-h) - var(--footer-h) - 11rem);
  border:1px solid var(--line);border-radius:14px;
  background:#0a0f18;
  box-shadow:0 30px 70px -34px #000;
}

/* ⛔ Bläddring bara där ett blad faktiskt ryms. På en telefon eller ett
   lågt fönster är varje avsnitt högre än skärmen ändå, och snap gör då
   mest att rullningen känns ryckig. */
@media (max-width:860px), (max-height:640px){
  html.bladdra{scroll-snap-type:none}
  html.bladdra .sekt,
  html.bladdra .sidtopp{min-height:0;display:block;margin-bottom:3rem}
  html.bladdra .sidinnehall{
    padding-top:calc(var(--topbar-h) + 3.5rem);
    padding-bottom:calc(var(--footer-h) + 3rem);
  }
}

/* ⚠️ Den som bett om mindre rörelse ska varken få sidan att hoppa eller
   glida. */
@media (prefers-reduced-motion:reduce){
  html.bladdra{scroll-snap-type:none;scroll-behavior:auto}
}

/* ── Programmet bakom ingressen på PoleMate-sidan ──────────────────
   Samma grepp som startsidans hörnbilder, men en enda och tydligare:
   här är den en illustration till texten, inte en bakgrundston.

   ⚠️ .sidtopp måste vara position:relative för att bilden ska hänga i
      bladet och inte i sidan — annars ligger den kvar när man bläddrar. */
/* ⚠️ .sidtopp är 44rem bred för textens skull — men då räknas bildens
   'right' mot DEN lådan och bilden hamnar mitt på skärmen i stället för i
   hörnet. Behållaren får därför gå ut i full bredd, och textbredden
   flyttas till styckena. */
.sidtopp{position:relative;max-width:none}
.sidtopp h1,
.sidtopp .ingress,
.sidtopp .under{max-width:44rem}

.skarm-intro{
  position:absolute;
  /* ⚠️ Centrerad mot texten, inte hängd i överkanten. Bladet centrerar sitt
     innehåll, så 50 % av bladet ÄR textens mitt. */
  top:50%;
  right:-4vw;
  width:min(38vw,34rem);
  height:auto;
  z-index:-1;
  pointer-events:none;
  border-radius:12px;
  border:1px solid rgba(88,200,255,.14);
  box-shadow:0 40px 90px -40px #000;
  transform-origin:100% 0;
  /* Speglad lutning mot startsidans vänsterbild — tecknen på rotationerna,
     inte scaleX(-1), som hade vänt själva skärmdumpen. */
  /* ⚠️ translateY FÖRST, sedan 3D-kedjan. Transformer läses från höger
     till vänster — läggs translate sist roteras förskjutningen med och
     bilden hamnar snett bredvid i stället för rakt ned. */
  transform:translateY(-50%) perspective(1500px) rotateY(-17deg) rotateX(6deg) rotateZ(4deg);
  /* Klarare än startsidans .34 — men inte så klar att den tävlar med
     rubriken om uppmärksamheten. */
  opacity:.52;
  -webkit-mask-image:linear-gradient(to bottom left,
    #000 0%, rgba(0,0,0,.9) 45%, rgba(0,0,0,.35) 78%, transparent 100%);
  mask-image:linear-gradient(to bottom left,
    #000 0%, rgba(0,0,0,.9) 45%, rgba(0,0,0,.35) 78%, transparent 100%);
}

/* ⛔ Bort på smala skärmar. Där ligger den rakt bakom brödtexten. */
@media (max-width:980px){
  .skarm-intro{display:none}
}