/* ────────────────────────────────────────────────────────────────
   Manualen. Samma fil i mockupen och på sajten (bygg.py --webb).

   ⚠️ EGET TEMA, INTE SAJTENS (Erik, 2026-10-01): "De ska inte följa
      PoleMates tema, dessa skall vara ljusa, enkla att se och läsa."
      Ljus bakgrund, stor text, en accentfärg per produkt.

   ⛔ Inga typsnitt eller skript utifrån. www.polemate.se har en CSP
      med default-src 'self', och allt utifrån blockeras tyst. Systemets
      typsnitt räcker, och ikonerna är inline-SVG.
   ──────────────────────────────────────────────────────────────── */

:root{
  --bg:        #ffffff;
  --bg-soft:   #f5f7fa;
  --bg-sunk:   #eef2f6;
  --ink:       #17202b;
  --ink-2:     #354152;
  --muted:     #5c6777;
  --line:      #e1e6ed;
  --line-2:    #cdd5df;
  --focus:     #2563eb;

  /* Accent per produkt. Sätts av data-produkt på <html>. Alla klarar
     4,5:1 mot vitt, så att länkar i accentfärg går att läsa. */
  --acc:       #0369a1;
  --acc-tint:  #e6f3fb;
  --acc-line:  #b9dcf0;

  --tips:      #15803d;  --tips-bg: #edf8f0;
  --obs:       #1d4ed8;  --obs-bg:  #eef3fe;
  --varn:      #b45309;  --varn-bg: #fdf4e3;

  --top-h:     3.75rem;
  --radie:     10px;
  --skugga:    0 1px 2px rgba(23,32,43,.06), 0 4px 14px rgba(23,32,43,.06);
}

[data-produkt="poledesign"]{         --acc:#b45309; --acc-tint:#fdf3e1; --acc-line:#f1d29a; }
[data-produkt="constructiondesign"]{ --acc:#0f766e; --acc-tint:#e3f5f2; --acc-line:#a8ddd5; }
[data-produkt="cabledesign"]{        --acc:#6d28d9; --acc-tint:#f1ebfd; --acc-line:#d3c2f7; }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--top-h) + 1.5rem)}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 17px/1.65 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--acc);text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{line-height:1.25;letter-spacing:-.015em;color:var(--ink)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;
     background:var(--bg-sunk);padding:.1em .35em;border-radius:5px}
kbd{font-family:inherit;font-size:.82em;font-weight:600;color:var(--ink-2);
    background:#fff;border:1px solid var(--line-2);border-bottom-width:2px;
    border-radius:6px;padding:.05em .45em;white-space:nowrap}

/* ── Mockup-bandet ─────────────────────────────────────────────── */
.mockband{
  background:#fff6c7;color:#5b4a00;border-bottom:1px solid #f0dc7a;
  font-size:.82rem;text-align:center;padding:.35rem 1rem;
}
.mockband b{font-weight:700}

/* ── Topbaren ──────────────────────────────────────────────────── */
.mtopp{
  position:sticky;top:0;z-index:20;height:var(--top-h);
  display:flex;align-items:center;gap:1rem;
  padding:0 clamp(1rem,3vw,2rem);
  background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line);
}
/* Ikonen och PoleMate leder till sajten, etiketten Manual till manualens start (Erik, 2026-10-01). */
.marke{display:flex;align-items:center;gap:.55rem;flex:0 0 auto}
.marke-hem{display:flex;align-items:center;gap:.55rem;color:var(--ink);text-decoration:none;font-weight:700}
.marke-hem svg{width:28px;height:28px}
.marke .pill{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
             color:var(--muted);background:var(--bg-sunk);border-radius:999px;padding:.15rem .55rem}
.marke .pill:hover{background:var(--acc-tint);color:var(--acc)}
.prodnav{display:flex;gap:.25rem;margin-left:.5rem;overflow-x:auto;scrollbar-width:none}
.prodnav a{
  display:flex;align-items:center;gap:.45rem;white-space:nowrap;
  color:var(--ink-2);text-decoration:none;font-size:.92rem;font-weight:550;
  padding:.4rem .7rem;border-radius:8px;
}
.prodnav a:hover{background:var(--bg-soft)}
.prodnav a[aria-current="page"]{background:var(--acc-tint);color:var(--acc)}
.prodnav .prick{width:.55rem;height:.55rem;border-radius:50%;flex:0 0 auto}
.prick--polemate{background:#0369a1}
.prick--poledesign{background:#b45309}
.prick--constructiondesign{background:#0f766e}
.prick--cabledesign{background:#6d28d9}

.sok{position:relative;margin-left:auto;flex:0 1 19rem}
.sok input{
  width:100%;font:inherit;font-size:.95rem;color:var(--ink);
  background:var(--bg-soft);border:1px solid var(--line);border-radius:9px;
  padding:.5rem .75rem .5rem 2.2rem;
}
.sok input:focus{background:#fff;border-color:var(--focus);outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.18)}
.sok > svg{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;color:var(--muted);pointer-events:none}
.sok .tangent{position:absolute;right:.6rem;top:50%;transform:translateY(-50%);pointer-events:none}
.sokresultat{
  position:absolute;top:calc(100% + .4rem);left:0;right:0;z-index:30;
  background:#fff;border:1px solid var(--line);border-radius:var(--radie);box-shadow:var(--skugga);
  list-style:none;margin:0;padding:.35rem;max-height:22rem;overflow:auto;
}
.sokresultat[hidden]{display:none}
.sokresultat a{display:block;padding:.5rem .65rem;border-radius:7px;text-decoration:none;color:var(--ink)}
.sokresultat a small{display:block;color:var(--muted);font-size:.8rem}
.sokresultat a.vald,.sokresultat a:hover{background:var(--bg-soft)}
.sokresultat .tomt{padding:.6rem .7rem;color:var(--muted);font-size:.9rem}
.sokresultat mark{background:#fff1a8;color:inherit;border-radius:3px}

/* ── Layouten ──────────────────────────────────────────────────── */
.ram{
  display:grid;gap:clamp(1.5rem,3vw,3rem);
  grid-template-columns:16.5rem minmax(0,46rem) 13rem;
  justify-content:center;
  padding:0 clamp(1rem,3vw,2rem);
}
.ram--bred{grid-template-columns:minmax(0,72rem)}

/* Ämneslistan till vänster */
.snav{
  position:sticky;top:var(--top-h);align-self:start;
  max-height:calc(100vh - var(--top-h));overflow:auto;
  padding:1.6rem .25rem 2rem 0;font-size:.93rem;
}
.snav-prod{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.05rem;
           color:var(--ink);text-decoration:none;margin-bottom:1rem}
.snav-prod .ikon{width:2rem;height:2rem}
.snav-filter{width:100%;font:inherit;font-size:.88rem;padding:.4rem .6rem;border:1px solid var(--line);
             border-radius:8px;background:var(--bg-soft);margin-bottom:1rem}
.snav-filter:focus{outline:none;border-color:var(--focus);background:#fff}
.snav h4{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
         margin:1.2rem 0 .35rem;font-weight:700}
.snav ul{list-style:none;margin:0;padding:0}
.snav li a{display:block;color:var(--ink-2);text-decoration:none;padding:.3rem .65rem;border-radius:7px;
           border-left:3px solid transparent;line-height:1.4}
.snav li a:hover{background:var(--bg-soft);color:var(--ink)}
.snav li a[aria-current="page"]{background:var(--acc-tint);color:var(--acc);font-weight:650;border-left-color:var(--acc)}
.snav .ingen{color:var(--muted);font-size:.85rem;padding:.3rem .65rem;display:none}
.snav-knapp{display:none}

/* "På den här sidan" till höger */
.toc{position:sticky;top:var(--top-h);align-self:start;padding:1.9rem 0 2rem;font-size:.86rem}
.toc h4{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 .5rem}
.toc ul{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.toc a{display:block;color:var(--muted);text-decoration:none;padding:.25rem 0 .25rem .8rem;margin-left:-2px;
       border-left:2px solid transparent;line-height:1.35}
.toc a:hover{color:var(--ink)}
.toc a.aktiv{color:var(--acc);border-left-color:var(--acc);font-weight:600}

/* ── Artikeln ──────────────────────────────────────────────────── */
.artikel{padding:1.6rem 0 4rem;min-width:0}
.smula{display:flex;flex-wrap:wrap;gap:.35rem;font-size:.86rem;color:var(--muted);margin:0 0 1rem;padding:0;list-style:none}
.smula li+li::before{content:"›";margin-right:.35rem;color:var(--line-2)}
.smula a{color:var(--muted);text-decoration:none}
.smula a:hover{color:var(--acc);text-decoration:underline}
.artikel h1{font-size:clamp(1.9rem,4vw,2.5rem);margin:0 0 .6rem;letter-spacing:-.025em}
.ingress{font-size:1.18rem;color:var(--ink-2);margin:0 0 1rem;line-height:1.6}
.meta{display:flex;flex-wrap:wrap;gap:.4rem 1rem;font-size:.84rem;color:var(--muted);margin-bottom:2rem}
.meta span{display:inline-flex;align-items:center;gap:.35rem}
.artikel h2{font-size:1.5rem;margin:2.6rem 0 .8rem;padding-top:.4rem;position:relative}
.artikel h3{font-size:1.15rem;margin:1.8rem 0 .5rem}
.artikel p,.artikel li{color:var(--ink-2)}
.artikel ul.lista{padding-left:1.25rem}
.artikel ul.lista li{margin-bottom:.35rem}
.ankare{position:absolute;left:-1.3rem;top:.45rem;opacity:0;text-decoration:none;color:var(--line-2);font-weight:400}
h2:hover .ankare,.ankare:focus{opacity:1}

/* Snabbt svar överst */
.snabbt{background:var(--acc-tint);border:1px solid var(--acc-line);border-radius:var(--radie);padding:1rem 1.2rem;margin:0 0 1.5rem}
.snabbt > b{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--acc);margin-bottom:.25rem}
.snabbt p{margin:0;color:var(--ink)}

/* Menyväg: Arkiv › Exportera… */
.meny{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.2rem 0;vertical-align:baseline}
.meny span{position:relative;background:#fff;border:1px solid var(--line-2);border-radius:6px;padding:0 .45rem;
           font-size:.9em;font-weight:600;color:var(--ink);white-space:nowrap}
/* Pilen ligger UTANFÖR rutan: absolut, i marginalen före nästa steg. */
.meny span+span{margin-left:1.15rem}
.meny span+span::before{content:"›";position:absolute;left:-.85rem;top:50%;transform:translateY(-54%);
                        color:var(--muted);font-size:1.15em;font-weight:700}

/* Rutor: tips, obs, varning */
.ruta{display:grid;grid-template-columns:1.6rem 1fr;gap:.7rem;padding:.9rem 1.1rem;margin:1.4rem 0;
      border-radius:var(--radie);border:1px solid;border-left-width:4px}
.ruta svg{width:1.35rem;height:1.35rem;margin-top:.15rem}
.ruta p{margin:0;color:var(--ink)}
.ruta b{display:block}
.ruta--tips{background:var(--tips-bg);border-color:#bfe3c9;border-left-color:var(--tips);color:var(--tips)}
.ruta--obs{background:var(--obs-bg);border-color:#c9d8fb;border-left-color:var(--obs);color:var(--obs)}
.ruta--varn{background:var(--varn-bg);border-color:#f2d9a8;border-left-color:var(--varn);color:var(--varn)}

/* Steg för steg */
.steg{list-style:none;counter-reset:steg;margin:1.2rem 0;padding:0}
.steg > li{counter-increment:steg;position:relative;padding:0 0 1.4rem 3.4rem;margin:0}
.steg > li::before{
  content:counter(steg);position:absolute;left:0;top:0;width:2.2rem;height:2.2rem;border-radius:50%;
  display:grid;place-items:center;font-weight:700;font-size:1rem;
  background:var(--acc);color:#fff;
}
.steg > li:not(:last-child)::after{content:"";position:absolute;left:1.05rem;top:2.5rem;bottom:.3rem;width:2px;background:var(--line)}
.steg > li.klar::before{content:"✓";background:var(--tips)}
.steg h3{margin:.25rem 0 .3rem;font-size:1.08rem}
.steg p{margin:0 0 .6rem}
.stegknapp{font:inherit;font-size:.8rem;color:var(--muted);background:none;border:1px solid var(--line-2);
           border-radius:999px;padding:.1rem .7rem;cursor:pointer}
.stegknapp:hover{color:var(--ink);border-color:var(--ink-2)}
li.klar .stegknapp{color:var(--tips);border-color:var(--tips)}

/* Skärmbilder */
.skarm{margin:1.2rem 0 1.6rem}
.skarm .bildram{border:1px solid var(--line);border-radius:var(--radie);overflow:hidden;box-shadow:var(--skugga);
                background:var(--bg-soft);cursor:zoom-in;position:relative}
.skarm figcaption{font-size:.86rem;color:var(--muted);margin-top:.55rem}
.platshallare{aspect-ratio:16/9;display:grid;place-items:center;color:var(--muted);font-size:.9rem;text-align:center;
              background:repeating-linear-gradient(135deg,var(--bg-soft) 0 14px,var(--bg-sunk) 14px 28px);cursor:default}
.platshallare b{display:block;font-size:1.6rem;color:var(--acc);letter-spacing:.1em}
.steg .platshallare{aspect-ratio:16/7}

/* Skärmbild med klickbara punkter */
.punktbild{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
.punktbild .bildram{cursor:default}
.punkt{
  position:absolute;transform:translate(-50%,-50%);width:1.9rem;height:1.9rem;border-radius:50%;
  border:2px solid #fff;background:var(--acc);color:#fff;font:700 .85rem/1 inherit;cursor:pointer;
  box-shadow:0 0 0 4px rgba(3,105,161,.25),0 2px 6px rgba(0,0,0,.3);
  display:grid;place-items:center;transition:transform .15s ease;
}
.punkt:hover,.punkt[aria-pressed="true"]{transform:translate(-50%,-50%) scale(1.18)}
.punkt[aria-pressed="true"]{background:#f59e0b;box-shadow:0 0 0 6px rgba(245,158,11,.3),0 2px 6px rgba(0,0,0,.3)}
.punktlista{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.punktlista button{
  width:100%;text-align:left;font:inherit;font-size:.92rem;color:var(--ink-2);cursor:pointer;
  display:grid;grid-template-columns:1.6rem 1fr;gap:.55rem;align-items:start;
  background:#fff;border:1px solid var(--line);border-radius:9px;padding:.55rem .7rem;
}
.punktlista button:hover{border-color:var(--line-2)}
.punktlista button[aria-pressed="true"]{border-color:#f59e0b;background:#fffaf0}
.punktlista .nr{width:1.6rem;height:1.6rem;border-radius:50%;background:var(--acc);color:#fff;
                display:grid;place-items:center;font-weight:700;font-size:.8rem}
.punktlista button[aria-pressed="true"] .nr{background:#f59e0b}
.punktlista b{display:block;color:var(--ink)}

/* Flikar: Windows / macOS / Linux */
.flikar{border:1px solid var(--line);border-radius:var(--radie);margin:1.2rem 0;overflow:hidden}
.flikrad{display:flex;background:var(--bg-soft);border-bottom:1px solid var(--line)}
.flikrad button{font:inherit;font-size:.9rem;font-weight:600;color:var(--muted);background:none;border:0;
                padding:.6rem 1rem;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.flikrad button[aria-selected="true"]{color:var(--acc);border-bottom-color:var(--acc);background:#fff}
.flikpanel{padding:.9rem 1.1rem}
.flikpanel p{margin:0}

/* Tabell */
.tabell{width:100%;border-collapse:collapse;font-size:.93rem;margin:1rem 0}
.tabell th{text-align:left;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
           border-bottom:2px solid var(--line);padding:.5rem .7rem}
.tabell td{border-bottom:1px solid var(--line);padding:.55rem .7rem;color:var(--ink-2);vertical-align:top}
.tabell td:first-child{font-weight:600;color:var(--ink)}
.tabellsvep{overflow-x:auto}

/* "Visa mer": det tekniska ligger infällt, så att sidan förblir enkel */
details.mer{border:1px solid var(--line);border-radius:var(--radie);margin:1rem 0;background:#fff}
details.mer summary{cursor:pointer;padding:.65rem 1rem;font-weight:600;color:var(--ink-2);list-style:none;
                    display:flex;align-items:center;gap:.5rem}
details.mer summary::-webkit-details-marker{display:none}
details.mer summary::before{content:"▸";color:var(--acc);transition:transform .15s ease}
details.mer[open] summary::before{transform:rotate(90deg)}
details.mer summary small{color:var(--muted);font-weight:400}
details.mer > div{padding:0 1rem .8rem}

/* Väljaren: "vilket format?" */
.valjare{border:1px solid var(--line);border-radius:var(--radie);padding:1rem 1.1rem;margin:1.2rem 0;background:var(--bg-soft)}
.valjare > b{display:block;margin-bottom:.6rem}
.valrad{display:flex;flex-wrap:wrap;gap:.45rem}
.valrad button{font:inherit;font-size:.92rem;cursor:pointer;background:#fff;color:var(--ink);
               border:1px solid var(--line-2);border-radius:999px;padding:.35rem .9rem}
.valrad button[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:#fff}
.valsvar{margin:.8rem 0 0;padding:.8rem 1rem;background:#fff;border-radius:8px;border:1px solid var(--line)}
.valsvar[hidden]{display:none}

/* Föregående / nästa */
.bladnav{display:grid;gap:1rem;grid-template-columns:1fr 1fr;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.bladnav a{display:block;border:1px solid var(--line);border-radius:var(--radie);padding:.8rem 1rem;text-decoration:none}
.bladnav a:hover{border-color:var(--acc)}
.bladnav small{display:block;color:var(--muted);font-size:.8rem}
.bladnav b{color:var(--acc)}
.bladnav .nasta{text-align:right;grid-column:2}

/* Var det till hjälp? */
.hjalpte{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:2rem;color:var(--muted);font-size:.92rem}
.hjalpte button{font:inherit;font-size:.9rem;cursor:pointer;background:#fff;border:1px solid var(--line-2);border-radius:8px;padding:.25rem .8rem}
.hjalpte button:hover{border-color:var(--ink-2)}

/* ── Startsidor: produkt och manual ────────────────────────────── */
.hjalte{padding:2.6rem 0 1.4rem}
.hjalte h1{font-size:clamp(2.1rem,5vw,3rem);margin:0 0 .5rem;letter-spacing:-.03em}
.hjalte .ingress{max-width:44rem}
.storsok{position:relative;max-width:36rem;margin:1.5rem 0 0;flex:none}
.storsok input{font-size:1.05rem;padding:.85rem 1rem .85rem 2.8rem;border-radius:12px;background:#fff;box-shadow:var(--skugga)}
.storsok > svg{left:1rem;width:1.15rem;height:1.15rem}

.prodgrid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));margin:1.8rem 0 2.5rem}
.prodkort{
  --acc:#0369a1;--acc-tint:#e6f3fb;
  display:flex;flex-direction:column;gap:.5rem;text-decoration:none;color:var(--ink);
  border:1px solid var(--line);border-top:4px solid var(--acc);border-radius:var(--radie);
  padding:1.2rem 1.25rem 1.1rem;background:#fff;transition:box-shadow .15s ease,transform .15s ease;
}
.prodkort:hover{box-shadow:var(--skugga);transform:translateY(-2px)}
.prodkort[data-produkt="poledesign"]{--acc:#b45309;--acc-tint:#fdf3e1}
.prodkort[data-produkt="constructiondesign"]{--acc:#0f766e;--acc-tint:#e3f5f2}
.prodkort[data-produkt="cabledesign"]{--acc:#6d28d9;--acc-tint:#f1ebfd}
.prodkort .ikon{width:2.6rem;height:2.6rem}
.prodkort h2{margin:.2rem 0 0;font-size:1.25rem}
.prodkort p{margin:0;color:var(--muted);font-size:.93rem;flex:1}
.prodkort .oppna{color:var(--acc);font-weight:650;font-size:.92rem}
.lage{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:650;border-radius:999px;
      padding:.1rem .55rem;width:fit-content;background:var(--bg-sunk);color:var(--muted)}
.lage--demo{background:#e8f6ec;color:var(--tips)}
.lage--slappt{background:var(--acc-tint);color:var(--acc)}

/* Ikonrutan i produktens färg */
.ikon{display:grid;place-items:center;border-radius:10px;background:var(--acc-tint);color:var(--acc);flex:0 0 auto}
.ikon svg{width:62%;height:62%}

.prodtopp{display:flex;align-items:center;gap:1rem;margin-bottom:.6rem}
.prodtopp .ikon{width:3.4rem;height:3.4rem;border-radius:14px}
.prodtopp h1{margin:0}

/* Ämnen på produktens startsida */
.amnesgrupp{margin:2.2rem 0 0}
.amnesgrupp h2{font-size:1.2rem;margin:0 0 .8rem}
.amnesgrid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(14.5rem,1fr))}
.amne{display:block;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);
      border-radius:var(--radie);padding:.85rem 1rem}
.amne:hover{border-color:var(--acc);box-shadow:var(--skugga)}
.amne b{display:block;color:var(--ink);margin-bottom:.15rem}
.amne span{display:block;color:var(--muted);font-size:.87rem;line-height:1.5}
.amne--stor{background:var(--acc-tint);border-color:var(--acc-line)}
.amne--stor b{color:var(--acc)}

.borjahar{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));margin:1.6rem 0 .5rem}
.borjahar .amne{padding:1rem 1.1rem}
.borjahar .nr{display:inline-grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;
              background:var(--acc);color:#fff;font-weight:700;font-size:.85rem;margin-bottom:.45rem}

.populart{columns:2 16rem;gap:2rem;padding:0;list-style:none;margin:.8rem 0 0}
.populart li{break-inside:avoid;margin:0 0 .45rem}
.populart small{color:var(--muted)}

/* ── Arbetsflödet: vad som sker i vilket program ──────────────── */
.flode{display:flex;flex-wrap:wrap;align-items:stretch;gap:.5rem;margin:1rem 0 .6rem;padding:0;list-style:none}
.flode li{display:flex;align-items:center;gap:.5rem}
.flode li:not(:last-child)::after{content:"→";color:var(--line-2);font-size:1.2rem;font-weight:700}
.flode .fsteg{border:1px solid var(--line);border-top:3px solid var(--fp,#0369a1);border-radius:9px;background:#fff;
              padding:.5rem .75rem;font-size:.92rem;font-weight:600;color:var(--ink);min-width:7.5rem}
.flode .fsteg small{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--fp,#0369a1)}
.flode [data-p="polemate"]{--fp:#0369a1}
.flode [data-p="poledesign"]{--fp:#b45309}
.flode [data-p="constructiondesign"]{--fp:#0f766e}
.flode [data-p="cabledesign"]{--fp:#6d28d9}
.flode [data-p="leverans"]{--fp:#475569}
.flodenot{font-size:.86rem;color:var(--muted);margin:0}

/* ── Parameterdemon (ConstructionDesign) ───────────────────────── */
.parameterdemo{display:grid;gap:1.2rem;grid-template-columns:minmax(0,15rem) minmax(0,1fr);align-items:center;
               border:1px solid var(--line);border-radius:var(--radie);padding:1.1rem 1.3rem;margin:1.2rem 0;background:var(--bg-soft)}
.parameterdemo svg{width:100%;height:auto;background:#fff;border-radius:8px;border:1px solid var(--line)}
.parameterdemo label{display:block;font-weight:650;margin-bottom:.35rem}
.parameterdemo input[type=range]{width:100%;accent-color:var(--acc)}
.parameterdemo .varden{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin-top:.9rem}
.parameterdemo .varde{background:#fff;border:1px solid var(--line);border-radius:8px;padding:.5rem .7rem}
.parameterdemo .varde small{display:block;color:var(--muted);font-size:.78rem}
.parameterdemo .varde b{font-size:1.35rem;color:var(--acc);font-variant-numeric:tabular-nums}
@media (max-width:620px){.parameterdemo{grid-template-columns:1fr}}

/* Två skärmbilder bredvid varandra */
.bildpar{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.bildpar .skarm{margin:0}

/* ── Modulens funktioner (Erik, 2026-10-01) ──────────────────────
   Bilderna är tagna med modulerna installerade, och det får synas. Det
   som hör till en modul märks med modulens namn, "kräver modulen", och
   en länk till modulens egen hjälp. */
.modul{display:inline-flex;align-items:center;font-size:.76em;font-weight:700;letter-spacing:.02em;
       border-radius:999px;padding:.02em .55em;vertical-align:.1em;white-space:nowrap;
       background:#fdf3e1;color:#a14a07;border:1px solid #f1d29a}
.modul[data-p="constructiondesign"]{background:#e3f5f2;color:#0f766e;border-color:#a8ddd5}
.modul[data-p="cabledesign"]{background:#f1ebfd;color:#6d28d9;border-color:#d3c2f7}
.ruta--modul{background:#fdf6ea;border-color:#f1d29a;border-left-color:#b45309;color:#a14a07}
.ruta--modul[data-p="constructiondesign"]{background:#eef8f6;border-color:#a8ddd5;border-left-color:#0f766e;color:#0f766e}
.punkt--modul{background:#b45309;box-shadow:0 0 0 4px rgba(180,83,9,.25),0 2px 6px rgba(0,0,0,.3)}
.punktlista .nr--modul{background:#b45309}

/* Bilderna behåller sin egen storlek; en liten dialog dras inte ut över hela bredden. */
.skarm .bildram{width:fit-content;max-width:100%}
.skarm .bildram.platshallare{width:100%}
.skarm figcaption{max-width:44rem}
/* En liten bild bredvid texten på breda skärmar. */
@media (min-width:900px){
  .skarm--hoger{float:right;clear:right;margin:.3rem 0 1rem 1.6rem;max-width:46%}
  .artikel h2,.bladnav,.hjalpte{clear:both}
}
.amne--saknas{opacity:.55}
.snav li a[data-saknas]{color:var(--muted)}

/* ── Sidfoten ──────────────────────────────────────────────────── */
.mfot{border-top:1px solid var(--line);background:var(--bg-soft);color:var(--muted);font-size:.86rem;
      padding:1.4rem clamp(1rem,3vw,2rem);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between}
.mfot a{color:var(--muted)}

/* ── Förstoringen ──────────────────────────────────────────────── */
dialog.forstora{border:0;padding:0;background:transparent;max-width:min(96vw,1500px);max-height:94vh}
dialog.forstora::backdrop{background:rgba(15,20,28,.82)}
dialog.forstora img{max-height:90vh;width:auto;border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.4)}
dialog.forstora button{position:fixed;top:1rem;right:1rem;font:inherit;font-size:1.4rem;line-height:1;width:2.6rem;height:2.6rem;
                       border-radius:50%;border:0;background:#fff;color:var(--ink);cursor:pointer}

/* Ämnen som inte är skrivna än */
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);z-index:50;
       background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:9px;font-size:.9rem;box-shadow:var(--skugga)}
.toast[hidden]{display:none}

/* ── Smala skärmar ─────────────────────────────────────────────── */
@media (max-width:1180px){
  .ram{grid-template-columns:15rem minmax(0,46rem)}
  .toc{display:none}
}
@media (max-width:860px){
  .ram{grid-template-columns:minmax(0,1fr)}
  .prodnav{display:none}
  .sok{flex:1 1 auto}
  .sok .tangent{display:none}
  .snav{position:static;max-height:none;padding:1rem 0 0}
  .snav-knapp{display:flex;align-items:center;gap:.5rem;font:inherit;font-weight:600;width:100%;
              background:var(--bg-soft);border:1px solid var(--line);border-radius:9px;padding:.6rem .9rem;cursor:pointer;color:var(--ink)}
  .snav-innehall{display:none;margin-top:.8rem}
  .snav.oppen .snav-innehall{display:block}
  .snav-prod{display:none}
  .bladnav{grid-template-columns:1fr}
  .bladnav .nasta{grid-column:1}
  .ankare{display:none}
}
@media (max-width:520px){
  body{font-size:16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}