/* Blueprint — duken (DESIGN §3, §5, §6.3). Kort, förslag, vilande, lagerband, kopplingar. */
[hidden]{ display:none !important; }
#duk{ background:var(--duk-bg); }
#duk.scenario{ outline:0; box-shadow:inset 0 0 0 3px var(--accent-ljus); }

/* Lagren (fyra band). Namnen kommer ur texter.js (V17), id:n i filen rörs inte. */
.band{ border-bottom:1px solid var(--linje); }
.band .bnamn{ width:140px; flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; padding:0 14px; border-right:1px dashed var(--linje);
  color:var(--text); font:600 15px/20px var(--typsnitt); }
.band .bnamn .ik{ width:20px; height:20px; color:var(--mjuk); }
.band .bnamn span{ display:flex; flex-direction:column; }
.band .bnamn small{ font:var(--f-fot); color:var(--mjuk); }
.band.tunt{ opacity:.55; }
.band.tunt .bnamn{ width:auto; right:auto; flex-direction:row; align-items:center; border-right:0; cursor:pointer; white-space:nowrap; }
.band.tunt .bnamn span{ flex-direction:row; gap:6px; align-items:baseline; }

/* Korten */
.kort{ width:180px; height:88px; background:var(--yta); border-radius:var(--r-m); border:1px solid var(--linje); border-left:3px solid var(--typ, var(--linje));
  box-shadow:var(--skugga-1); padding:10px 12px; transition:opacity var(--t-normal) var(--e-mjuk), box-shadow var(--t-snabb), transform var(--t-snabb) var(--e-mjuk); }
.kort .kt{ display:flex; align-items:center; gap:6px; font:var(--f-fot); text-transform:none; letter-spacing:0; color:var(--mjuk); margin-bottom:2px; }
.kort .kt::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--typ, var(--svag)); flex:none; }
.kort .tt{ font:600 15px/20px var(--typsnitt); color:var(--text); }
.kort .tx{ font:400 13px/18px var(--typsnitt); color:var(--mjuk); }
.kort.valt{ box-shadow:0 0 0 2px var(--accent), var(--skugga-2); }
.kort.tona{ opacity:.25; }
.kort.drar{ opacity:1; transform:scale(1.03); box-shadow:var(--skugga-2); }
.kort.blink{ animation:vp-blink 1.2s var(--e-mjuk); }
@keyframes vp-blink{ 0%{ box-shadow:0 0 0 10px var(--accent-ljus), var(--skugga-2) } 100%{ box-shadow:0 0 0 0 transparent, var(--skugga-1) } }
/* Förslag från AI: mjuk violett ton, streckad kant, en liten ✦ */
.kort.forslag{ background:var(--violett-ljus); border:1.5px dashed var(--violett); border-left:3px dashed var(--violett); }
.kort.forslag .tt{ color:var(--violett-text); }
.kort .aimarke{ position:absolute; top:6px; right:8px; color:var(--violett); }
.kort .aimarke .ik{ width:15px; height:15px; }
/* Vilande (V20): svagt, streckat, ingen skugga, en liten måne */
.kort.vilande{ opacity:.38; border:1.5px dashed var(--svag); border-left:3px dashed var(--svag); box-shadow:none; background:var(--yta); }
.kort.vilande.valt{ opacity:.7; box-shadow:0 0 0 2px var(--accent); }
.kort .vilmarke{ position:absolute; top:6px; right:8px; color:var(--mjuk); }
.kort .vilmarke .ik{ width:15px; height:15px; }
.kort .vilprick{ position:absolute; top:8px; right:8px; width:8px; height:8px; border-radius:50%; background:var(--svag); box-shadow:0 0 0 2px var(--yta); }
/* Numren när en resa eller ett scenario är valt */
.kort .nr{ top:-10px; left:-10px; min-width:24px; height:24px; border-radius:12px; background:var(--accent); color:var(--pa-accent); font:700 12px/24px var(--typsnitt); box-shadow:var(--skugga-1); }
/* Knoppen: dra en koppling (rund, mjuk; tryckytan är 44) */
.handtag{ right:-15px; top:29px; width:30px; height:30px; border-radius:50%; background:var(--yta); color:transparent; font-size:0;
  box-shadow:0 0 0 1.5px var(--accent), var(--skugga-1); }
.handtag::after{ content:""; position:absolute; inset:10px; border-radius:50%; background:var(--accent); }
.handtag::before{ content:""; position:absolute; inset:-7px; border-radius:50%; }
.kort.vilande .handtag{ display:none; }

/* Kopplingarna */
#pilar path.p{ stroke:var(--pil); stroke-width:1.5; }
#pilar text{ font:500 12px/1 var(--typsnitt); fill:var(--mjuk); stroke:var(--duk-bg); stroke-width:5px; }
#pilar g.forslag path.p{ stroke:var(--violett); stroke-dasharray:6 5; }
#pilar g.forslag text{ fill:var(--violett-text); }
#pilar g.vald path.p{ stroke:var(--accent); stroke-width:2.5; }
#pilar g.vald text{ fill:var(--accent); }
#pilar g.tona{ opacity:.14; }
#pilar g.vilande{ opacity:.4; }
#pilar g.vilande path.p{ stroke:var(--svag); stroke-dasharray:4 4; }
#pilar g.stump path.p{ stroke:var(--svag); stroke-width:1.5; stroke-dasharray:3 3; }
#pilar g.stump circle{ fill:var(--svag); }
#pilar #tempPil{ stroke:var(--accent); stroke-width:2; stroke-dasharray:5 4; }
#pilar marker path{ fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
#pilar .sp-vanlig{ stroke:var(--pil); }
#pilar .sp-ai{ stroke:var(--violett); }
#pilar .sp-vald{ stroke:var(--accent); }

/* Dukens huvud: scenariot och perspektivet som mjuka piller */
.vp-dukhuvud{ position:absolute; left:12px; top:12px; right:12px; display:flex; flex-wrap:wrap; gap:8px; z-index:3; pointer-events:none; }
.vp-valpill{ position:relative; display:inline-flex; align-items:center; pointer-events:auto; max-width:100%; }
.vp-valpill select{ min-height:var(--tryck); max-width:min(320px, calc(100vw - 48px)); border:0; border-radius:var(--r-rund); padding:0 40px 0 16px;
  background:var(--yta-glas); color:var(--text); font:600 15px/20px var(--typsnitt); box-shadow:var(--skugga-1);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); text-overflow:ellipsis; }
.vp-valpill .ik{ position:absolute; right:14px; width:18px; height:18px; pointer-events:none; color:var(--mjuk); }
.vp-tomtext{ position:absolute; left:50%; top:45%; transform:translate(-50%,-50%); width:min(320px, calc(100% - 48px)); text-align:center;
  font:var(--f-brod); color:var(--mjuk); pointer-events:none; z-index:2; }

/* AI-raden i botten: "AI har 4 förslag · Gå igenom" */
.vp-airad{ position:absolute; left:12px; bottom:calc(var(--sab) + 16px); right:auto; max-width:calc(100% - 180px); display:flex; align-items:center; gap:4px;
  min-height:52px; padding:4px 6px 4px 14px; border-radius:var(--r-rund); background:var(--violett-ljus); color:var(--violett-text); font:600 15px/20px var(--typsnitt);
  box-shadow:var(--skugga-1); z-index:4; animation:vp-upp var(--t-normal) var(--e-mjuk); }
.vp-airad .vp-knapp{ flex:none; }
.vp-airad > span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vp-airad .ik{ color:var(--violett); }
.vp-airad .vp-knapp--tyst{ color:var(--violett-text); }

/* Passa och ＋ */
#zoom{ right:88px; bottom:calc(var(--sab) + 20px); }
.vp-fab, #bPlus{ width:60px; height:60px; right:16px; bottom:calc(var(--sab) + 12px); border-radius:var(--r-rund); background:var(--accent); color:var(--pa-accent);
  display:grid; place-items:center; font-size:0; box-shadow:var(--skugga-2); transition:transform 120ms var(--e-mjuk); }
#bPlus:active{ transform:scale(.95); }
#bPlus .ik{ width:28px; height:28px; stroke-width:2; }
body:has(#aiRad:not([hidden])) #zoom{ bottom:calc(var(--sab) + 84px); }

/* Ritpillret: flytande och runt (DESIGN §10) */
#ritrad.vp-pill{ display:none; position:fixed; z-index:35; left:50%; transform:translateX(-50%); top:calc(var(--sat) + var(--topp-h) + 12px);
  gap:6px; align-items:center; padding:6px; border-radius:var(--r-rund); background:var(--yta-glas); box-shadow:var(--skugga-2); border:0;
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); max-width:calc(100vw - 24px); }
#ritrad.vp-pill.syns{ display:flex; }
#ritrad .farg{ width:36px; height:36px; border-radius:50%; border:3px solid var(--yta); box-shadow:0 0 0 1px var(--linje); margin:4px; }
#ritrad .farg.pa{ box-shadow:0 0 0 2px var(--text); }
#ritrad .vp-ikonknapp.pa{ background:var(--text); color:var(--bg); }
#duk.ritar{ box-shadow:inset 0 0 0 3px var(--varm-ljus); }

@media (prefers-reduced-motion: reduce){
  .kort{ transition:opacity 120ms; }
  .kort.drar{ transform:none; }
}