/* Info & guide (info.js): introduktion, kapitel, demoscen med pekare och bildtext, användarinformation. */
.info-intro h3{font-size:18px;margin:0 0 8px}
.info-intro p{margin:0;max-width:880px;line-height:1.55}
.info-flode{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.info-flode span{display:inline-flex;gap:8px;align-items:center;padding:6px 12px;border-radius:99px;background:color-mix(in srgb,var(--fc) 18%,var(--surface));font-weight:600;font-size:13px}
.info-flode span b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--fc);color:#fff;font-size:11px}
.info-flode i{color:var(--faint);font-style:normal}
.info-flode .f1{--fc:var(--sky)} .info-flode .f2{--fc:var(--energi)} .info-flode .f3{--fc:var(--kraft)} .info-flode .f4{--fc:var(--volt)}
.info-kap{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.info-kap button{display:flex;gap:10px;align-items:center;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--fg);font-size:13px;font-weight:600;cursor:pointer}
.info-kap button small{display:block;font-size:11px;color:var(--faint);font-weight:600}
.info-kap button[aria-pressed="true"]{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);background:var(--surface-2)}
.info-grid{display:flex;flex-direction:column;gap:14px}
#info-om{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:22px}
.info-kt{margin:0 0 6px;font-size:16px;color:var(--heading)}
.info-om .eyebrow{margin:4px 0 6px}
.info-syfte{margin:0 0 14px;line-height:1.55;font-size:13.5px}
#info-steg{margin:0 0 14px;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:13.5px}
#info-steg li{padding:4px 8px;border-radius:6px;transition:background .25s}
#info-steg li.nu{background:var(--warn-bg);color:var(--warn-fg);font-weight:600}
.info-tips{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.demo-ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.info-h2{font-size:18px;margin:26px 0 10px;color:var(--heading)}
.info-kort{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.info-text ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:13.5px;line-height:1.5}
.info-text p{margin:0;font-size:13.5px;line-height:1.5}
.info-roll{width:100%;font-size:13px} .info-roll td{padding:5px 6px;vertical-align:top;border-bottom:1px solid var(--line)}
kbd{font:600 11px var(--font);padding:1px 5px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px;background:var(--surface-2)}

/* ---------- demoscenen: ritas i 1000 × 560 och skalas till bredden ---------- */
.demo-stage{position:relative;width:100%;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--bg);box-shadow:var(--shadow)}
.demo-scale{position:absolute;top:0;left:0;width:1000px;height:560px;transform-origin:0 0}
.demo-app{position:absolute;inset:0;display:flex;background:var(--bg);font-size:13px;overflow:hidden}
.demo-cursor{position:absolute;left:480px;top:300px;width:22px;height:22px;z-index:30;pointer-events:none;transition:left .7s cubic-bezier(.4,.1,.2,1),top .7s cubic-bezier(.4,.1,.2,1);
  background:no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11-6.5 1.2L16 21l-3 1.4-3.4-6.9L4 20z' fill='%23111' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.demo-cursor::after{content:"";position:absolute;left:-14px;top:-14px;width:30px;height:30px;border-radius:50%;background:var(--sky);opacity:0;transform:scale(.3)}
.demo-cursor.klick::after{animation:demo-klick .45s ease-out}
@keyframes demo-klick{0%{opacity:.55;transform:scale(.3)}100%{opacity:0;transform:scale(1.5)}}
.demo-cap{position:absolute;left:50%;bottom:16px;transform:translate(-50%,10px);max-width:820px;padding:12px 18px;border-radius:10px;background:rgba(0,30,70,.92);color:#fff;font-size:19px;font-weight:600;line-height:1.4;text-align:center;opacity:0;transition:opacity .3s,transform .3s;z-index:29}
.demo-cap.vis{opacity:1;transform:translate(-50%,0)}
.d-side{width:170px;flex:none;background:var(--side,#002F6C);color:#fff;padding:16px 10px;display:flex;flex-direction:column;gap:4px}
.d-logo{font-size:15px;margin:0 6px 14px;font-weight:600} .d-logo b{font-weight:800}
.d-nav{padding:7px 10px;border-radius:7px;color:rgba(255,255,255,.75);font-weight:600;display:flex;align-items:center;gap:6px}
.d-nav.on{background:rgba(255,255,255,.14);color:#fff}
.d-cnt{margin-left:auto;font-size:11px;background:rgba(255,255,255,.2);border-radius:99px;padding:0 7px;transition:transform .3s}
.d-cnt.puls,.d-mx .puls{animation:demo-puls .7s ease-out 2}
@keyframes demo-puls{50%{transform:scale(1.35)}}
.d-main{flex:1;min-width:0;padding:18px 22px;position:relative;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.d-h{font-size:22px;margin:0;color:var(--heading)} .d-crumb{font-size:11.5px;color:var(--faint)}
.d-tabs{display:flex;gap:16px;border-bottom:1px solid var(--line);font-weight:600;color:var(--muted)} .d-tabs span{padding:6px 0} .d-tabs .on{color:var(--heading);border-bottom:2px solid var(--navy)}
.d-board{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.d-col{background:var(--surface-2);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:240px}
.d-col>b{font-size:12px;color:var(--muted)} .d-col.f1{--fc:var(--sky)} .d-col.f2{--fc:var(--energi)} .d-col.f3{--fc:var(--kraft)} .d-col.f4{--fc:var(--volt)}
.d-kol{display:flex;flex-direction:column;gap:8px}
.d-card{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--fc);border-radius:8px;padding:10px;font-weight:600;transition:transform .5s,opacity .5s}
.d-card.flytt{transform:translateX(60px);opacity:.3}
.d-bar{height:5px;background:var(--surface-3);border-radius:3px;margin-top:8px;overflow:hidden} .d-bar i{display:block;height:100%;background:var(--fc,var(--navy))}
.d-proj,.d-drawer,.d-modal,.d-scrim,.d-pc,.d-papper,.d-toast{opacity:0;pointer-events:none;transition:opacity .35s,transform .35s}
.d-proj{position:absolute;inset:0;background:var(--bg);padding:18px 22px;display:flex;flex-direction:column;gap:12px;transform:translateY(12px)}
.d-proj.vis{opacity:1;transform:none}
.d-stepper{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.d-stepper>div{padding:10px} .d-stepper .cur{background:color-mix(in srgb,var(--fc) 14%,var(--surface))}
.d-stepper .f1{--fc:var(--sky)} .d-stepper .f2{--fc:var(--energi)} .d-stepper .f3{--fc:var(--kraft)} .d-stepper .f4{--fc:var(--volt)}
.d-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.d-list{display:flex;flex-direction:column;gap:8px}
.d-row{display:flex;justify-content:space-between;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.d-row.gate{border-left:4px solid var(--sky)}
.d-drawer{position:absolute;top:0;right:0;bottom:0;width:400px;background:var(--surface);box-shadow:-10px 0 30px rgba(0,20,50,.2);padding:20px;display:flex;flex-direction:column;gap:10px;transform:translateX(40px);z-index:5}
.d-drawer.vis{opacity:1;transform:none} .d-drawer h3{margin:0;font-size:18px} .d-drawer h4,.d-pc h4,.d-card2 h4{margin:8px 0 0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.d-chk{display:flex;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:8px}
.d-chk i{width:16px;height:16px;border:2px solid var(--line-2);border-radius:4px;flex:none;transition:background .2s}
.d-chk.on i{background:var(--ok);border-color:var(--ok)} .d-chk.on{color:var(--muted);text-decoration:line-through}
.d-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.d-scrim{position:absolute;inset:0;background:rgba(0,20,50,.35);z-index:8} .d-scrim.vis{opacity:1}
.d-modal{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%);width:430px;background:var(--surface);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:10px;z-index:9;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.d-modal.vis{opacity:1;transform:translate(-50%,-50%)} .d-modal h3{margin:0 0 4px;font-size:16px}
.d-f{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--muted)}
.d-in{min-height:34px;padding:7px 10px;border:1px solid var(--line-2);border-radius:7px;background:var(--surface);color:var(--fg);font-weight:500;font-size:13.5px}
.d-in:empty::before{content:attr(data-ph);color:var(--faint)} .d-in.fokus{border-color:var(--navy);box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 18%,transparent)}
.d-in.fokus::after{content:"|";animation:demo-blink .8s steps(1) infinite;color:var(--navy)}
@keyframes demo-blink{50%{opacity:0}}
.fs.borta{opacity:0;transform:translateX(40px);transition:opacity .5s,transform .5s}
.d-gantt{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.d-gm{display:grid;grid-template-columns:repeat(6,1fr);margin-left:150px;font-size:11px;color:var(--faint);border-bottom:1px solid var(--line);padding-bottom:4px}
.d-gr{display:grid;grid-template-columns:150px 1fr;align-items:center;height:32px;font-size:12.5px}
.d-gt{position:relative;height:100%;background:repeating-linear-gradient(90deg,transparent 0 calc(100%/6 - 1px),var(--line) calc(100%/6 - 1px) calc(100%/6))}
.d-gt i{position:absolute;top:9px;height:14px;border-radius:4px;background:var(--fc);transition:left .9s cubic-bezier(.4,.1,.2,1)}
.d-gt i.rub{height:7px;top:12px} .d-gt i.drag{box-shadow:0 0 0 2px var(--navy)}
.d-gt em{position:absolute;top:10px;width:12px;height:12px;background:var(--fc);transform:translateX(-6px) rotate(45deg);transition:left .9s cubic-bezier(.4,.1,.2,1)}
.d-gt .f2{--fc:var(--energi)} .d-gt .f3{--fc:var(--kraft)}
.d-tab{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.d-tab th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:9px 12px;background:var(--surface-2)}
.d-tab td{padding:10px 12px;border-top:1px solid var(--line)}
.d-doc{padding:8px 10px;border:1px solid var(--line);border-radius:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px;font-size:12.5px}
.d-cr{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.d-sel{min-width:60px;text-align:center;padding:4px 8px;border:1px solid var(--line-2);border-radius:6px} .ok-t{color:var(--ok-fg)}
.d-phone{position:absolute;left:60px;top:20px;width:270px;height:520px;border:10px solid #111;border-radius:34px;background:var(--bg);overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.25)}
.d-ph-top{background:var(--navy);color:#fff;font-weight:700;padding:14px 14px 10px;font-size:14px}
.d-ph-b{padding:12px;display:flex;flex-direction:column;gap:10px;position:relative;height:100%}
.d-kat{display:grid;grid-template-columns:1fr 1fr;gap:6px} .d-kat span{border:1px solid var(--line);border-radius:8px;padding:9px 4px;text-align:center;font-weight:600;font-size:11.5px;background:var(--surface)}
.d-kat span.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.d-cam{height:70px;border:2px dashed var(--line-2);border-radius:8px;display:grid;place-items:center;color:var(--muted);font-weight:600}
.d-cam.tagen{border-style:solid;background:linear-gradient(135deg,#8a7a5c,#5a6b4a 60%,#3d4a5a);color:transparent}
.d-reg{justify-content:center}
.d-toast{position:absolute;left:12px;right:12px;bottom:70px;background:var(--navy);color:#fff;padding:9px;border-radius:8px;text-align:center;font-weight:600} .d-toast.vis{opacity:1}
.d-pc{position:absolute;left:390px;top:40px;width:540px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:8px;transform:translateX(30px);box-shadow:var(--shadow)}
.d-pc.vis{opacity:1;transform:none} .d-pc h3{margin:0}
.d-two{display:grid;grid-template-columns:230px 1fr;gap:18px;align-items:start}
.d-mx{display:grid;grid-template-columns:repeat(5,40px);gap:4px} .d-mx span{height:40px;border-radius:6px;display:grid;place-items:center;font-weight:700}
.d-ax{font-size:11px;color:var(--muted);margin-top:6px;font-weight:600}
.d-two .btn{margin-bottom:10px}
.d-card2{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:4px} .d-card2 h3{margin:0 0 6px}
.d-side.ext{width:170px}
.d-papper{position:absolute;right:40px;top:110px;width:250px;height:340px;background:#fff;color:#111;border-radius:4px;box-shadow:0 14px 40px rgba(0,0,0,.3);padding:20px;display:flex;flex-direction:column;gap:10px;transform:translateY(20px) rotate(2deg)}
.d-papper.vis{opacity:1;transform:rotate(1deg)} .d-papper i{display:block;height:8px;background:#e3e7ee;border-radius:3px}
@media (prefers-reduced-motion:reduce){.demo-cursor,.d-gt i,.d-gt em,.d-card,.d-proj,.d-drawer,.d-modal,.demo-cap{transition:none}}
@media (max-width:1100px){#info-om{grid-template-columns:1fr}}
@media (max-width:860px){.demo-cap{font-size:26px;max-width:940px}}