/* Blueprint — skalet: toppraden, Steg · Duk · Data, stegen, kortarket, Datasidan, Hem och första gången (DESIGN §2, §8, §9).
   Bredder: telefon < 600 · utfälld 600–1099 · bred ≥ 1100 (samma brytpunkter som motorn). */

/* ---------- Toppraden ---------- */
.vp-topp{ flex:none; position:relative; z-index:20; display:flex; align-items:center; gap:4px; height:var(--topp-h); padding:0 8px;
  background:var(--bg); border-bottom:1px solid var(--linje); }
.vp-titel{ flex:1; min-width:0; font:var(--f-under); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-left:2px; }
#bHjalp{ min-height:44px; padding:8px 14px; border-radius:var(--r-rund); }
#bHjalp .ik{ width:20px; height:20px; }

/* Växlaren Steg · Duk · Data: segment i toppen (bred), flikrad i botten (telefon) */
.vp-vaxlare{ display:flex; gap:2px; padding:3px; border-radius:var(--r-rund); background:var(--yta2); }
.vp-vaxlare button{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; min-width:84px; padding:0 14px; border:0;
  border-radius:var(--r-rund); background:transparent; color:var(--mjuk); font:600 15px/20px var(--typsnitt);
  transition:background var(--t-snabb) var(--e-mjuk), color var(--t-snabb); }
.vp-vaxlare button .ik{ width:18px; height:18px; }
.vp-vaxlare button[aria-pressed="true"]{ background:var(--yta); color:var(--text); box-shadow:var(--skugga-1); }
@media (min-width:1100px){ .vp-vaxlare{ position:absolute; left:50%; transform:translateX(-50%); } }

/* ---------- Remsorna (scenarioläget, steg av kort som finns) ---------- */
#scenrad, #stegrad{ background:var(--accent-ljus); border-bottom:0; padding:8px 12px; gap:8px; font:500 15px/20px var(--typsnitt); }
#scenrad input, #scenrad select{ border:0; border-radius:12px; background:var(--yta); color:var(--text); font:400 16px/20px var(--typsnitt); padding:0 12px; }
#scenrad .vaningval{ gap:4px; padding:3px; border-radius:var(--r-rund); background:var(--yta); }
#scenrad .vaningval .knapp{ border-radius:var(--r-rund); background:transparent; min-height:38px; padding:0 14px; }
#scenrad .vaningval .knapp.pa{ background:var(--accent); color:var(--pa-accent); }

/* ---------- Huvudytan och platserna ---------- */
#huvud{ background:var(--bg); }
#datasida{ display:none; flex:1; min-width:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
body.plats-data #datasida{ display:block; }
body.plats-data #duk, body.plats-data #palett{ display:none; }
#palett{ background:var(--bg); border-right:1px solid var(--linje); width:132px; padding:12px 10px; gap:8px; }
#palett h3{ font:var(--f-fot); text-transform:none; letter-spacing:0; color:var(--mjuk); margin:0 0 2px; }
.pal{ border:0; border-left:3px solid var(--typ, var(--svag)); border-radius:12px; background:var(--yta); box-shadow:var(--skugga-1);
  font:600 14px/18px var(--typsnitt); padding:12px 10px; min-height:var(--tryck); }
.pal.tom{ border-left:3px dashed var(--svag); border-style:none none none dashed; }
.palhjalp{ font:var(--f-fot); color:var(--mjuk); }
#bNyTyp{ background:transparent; color:var(--accent); padding:8px 6px; }
@media (max-width:1099px){ #palett{ display:none !important; } }

/* ---------- Stegen ---------- */
#stegpanel{ background:var(--bg); border-right:1px solid var(--linje); }
#steg7{ display:flex; gap:2px; justify-content:space-between; padding:12px 10px 6px; background:transparent; border:0; overflow:visible; }
.stegknapp{ flex:none !important; width:44px; min-width:44px; max-width:none !important; height:44px; min-height:44px; padding:0; justify-content:center; border:0;
  border-radius:50%; background:transparent; box-shadow:none; }
.stegknapp .snr{ width:34px; height:34px; border-radius:50%; border:1.5px solid var(--linje); background:var(--yta); color:var(--mjuk); font:600 14px/1 var(--typsnitt);
  display:grid; place-items:center; transition:background var(--t-snabb), color var(--t-snabb), border-color var(--t-snabb); }
.stegknapp .snr .ik{ width:18px; height:18px; stroke-width:2.2; }
.stegknapp .snamn, .stegknapp .smat{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.stegknapp.gul{ background:transparent; border:0; }
.stegknapp.gul .snr{ border-color:var(--varm); color:var(--varm-text); background:linear-gradient(to top, var(--varm-ljus) 50%, var(--yta) 50%); }
.stegknapp.gron{ background:transparent; border:0; }
.stegknapp.gron .snr{ border-color:var(--gron); background:var(--gron-ljus); color:var(--gron); }
.stegknapp.aktiv{ box-shadow:none; }
.stegknapp.aktiv .snr{ border-color:var(--accent); background:var(--accent); color:var(--pa-accent); box-shadow:0 0 0 4px var(--accent-ljus); }
.prick{ width:10px; height:10px; border-radius:50%; border:2px solid var(--bg); top:2px; }
.prick.violett{ right:2px; background:var(--violett); }
.prick.rod{ right:auto; left:2px; background:var(--rod); }
.sphuvud{ border:0; padding:6px 12px 2px 20px; gap:8px; }
.sphuvud h2{ font:var(--f-rubrik); }
.sphuvud .smat{ font:var(--f-fot); color:var(--mjuk); }
#spInnehall{ padding:4px 20px 40px; }
#spInnehall h3{ font:var(--f-under); margin:var(--a5) 0 var(--a2); }
.spguide{ font:var(--f-brod); color:var(--mjuk); margin:0 0 var(--a4); max-width:64ch; }
.spknappar{ gap:var(--a2); margin:var(--a3) 0; }
ul.nej button{ border:0; background:var(--yta); box-shadow:var(--skugga-1); border-radius:12px; padding:10px 14px; font:var(--f-liten); color:var(--text); }
ul.nej li.ja{ color:var(--gron); font:var(--f-liten); padding:6px 4px; }
.delrad{ border-bottom:1px solid var(--linje); padding:8px 0; font:var(--f-liten); }
.delrad b.gul{ color:var(--varm-text); }
.vp-vilrad{ display:flex; align-items:center; gap:10px; color:var(--mjuk); }
.vp-vilrad span{ flex:1; }
.spnasta{ margin-top:var(--a5); }
@media (min-width:1100px){ :root{ --spB:340px; } }
@media (min-width:600px) and (max-width:1099px){ :root{ --spB:340px; } }

/* ---------- Kortarket (panelen) ---------- */
#panel{ background:var(--yta); border-left:1px solid var(--linje); }
#panelinnehall{ padding:0 20px 40px; }
#panelinnehall h2{ font:var(--f-rubrik); margin:0 0 var(--a3); }
#panelinnehall h3{ font:var(--f-under); margin:var(--a5) 0 var(--a2); }
.vp-arkhuvud{ display:flex; align-items:center; justify-content:flex-end; padding:6px 8px 0; min-height:var(--tryck); position:relative; }
.vp-greppet{ display:none; position:absolute; left:50%; top:8px; width:36px; height:5px; border-radius:3px; background:var(--linje); transform:translateX(-50%); }
#stangPanel{ display:inline-grid !important; }
.vp-overrad{ display:flex; align-items:center; gap:8px; font:var(--f-fot); color:var(--text); margin:0 0 var(--a3); }
.vp-overrad .ik{ width:18px; height:18px; color:var(--mjuk); }
.vp-forslagrad{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
ol.resa li button{ background:var(--yta2); border-radius:12px; }
ol.resa li button.har{ background:var(--accent-ljus); outline:0; box-shadow:inset 0 0 0 1.5px var(--accent); }
ol.resa .num, ol.steglista .num{ background:var(--accent); color:var(--pa-accent); }
ol.steglista li .titelknapp{ background:var(--yta2); border-radius:12px; }
.pilrad{ font:var(--f-liten); color:var(--mjuk); }
.fraga{ border:0; background:var(--yta2); border-radius:var(--r-m); padding:var(--a4); }
.val button{ border:0; background:var(--yta); box-shadow:var(--skugga-1); }
.val button.vald{ background:var(--accent); color:var(--pa-accent); }
.faltrad{ border:0; background:var(--yta2); border-radius:var(--r-m); }
textarea.prompt{ border:1px solid var(--linje); border-radius:12px; background:var(--yta); color:var(--text); }
.vp-vaxel{ display:flex; align-items:center; gap:12px; min-height:var(--tryck); font:var(--f-liten); }
@media (min-width:1100px){
  #panel{ display:none; width:340px; }
  #panel.oppen{ display:flex; animation:vp-tona var(--t-normal) var(--e-mjuk); }
}

/* ---------- Datasidan ---------- */
.vp-data{ padding:20px 24px 64px; }
.vp-data h2{ font:var(--f-stor); margin:4px 0 4px; }
.vp-data .vp-ingress{ font:var(--f-brod); color:var(--mjuk); margin:0 0 var(--a5); max-width:64ch; }
.vp-datagrid{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--a4); align-items:start; }
@media (min-width:1100px){ .vp-datagrid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .vp-datagrid > .vp-block:first-child{ grid-row:span 2; } }
.vp-block{ background:var(--yta); border-radius:var(--r-l); box-shadow:var(--skugga-1); padding:4px 0; min-width:0; }
.vp-block > summary{ list-style:none; display:flex; align-items:center; gap:10px; min-height:56px; padding:0 20px; cursor:pointer; font:var(--f-under); }
.vp-block > summary::-webkit-details-marker{ display:none; }
.vp-block > summary .ik{ color:var(--mjuk); }
.vp-block > summary .vp-chev{ margin-left:auto; transition:transform var(--t-snabb); }
.vp-block[open] > summary .vp-chev{ transform:rotate(180deg); }
.vp-blockinne{ padding:0 20px 16px; }
.vp-typ{ padding:12px 0 8px; border-top:1px solid var(--linje); }
.vp-typ:first-child{ border-top:0; }
.vp-typrubrik{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.vp-typrubrik .vp-prick{ width:10px; height:10px; border-radius:50%; background:var(--typ, var(--svag)); }
.vp-typrubrik b{ font:var(--f-under); }
.vp-typrubrik .mjuk{ margin-left:auto; }
.vp-tabell{ width:100%; border-collapse:collapse; font:var(--f-liten); }
.vp-tabell th{ text-align:left; font:var(--f-fot); color:var(--mjuk); padding:6px 8px 6px 0; }
.vp-tabell td{ padding:4px 8px 4px 0; border-top:1px solid var(--linje); vertical-align:middle; }
.vp-tabell input, .vp-tabell select{ width:100%; min-width:0; min-height:var(--tryck); border:0; border-radius:10px; background:transparent; color:var(--text);
  font:var(--f-liten); padding:0 8px; }
.vp-tabell input:focus, .vp-tabell select:focus{ outline:0; background:var(--yta2); }
.vp-tabell td.kravs{ text-align:center; width:56px; }
.vp-tabell .vp-sortpill{ position:relative; }
.vp-rullbar{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -20px; padding:0 20px; }
.vp-tomring{ display:inline-block; width:18px; height:18px; border-radius:50%; border:1.5px dashed var(--svag); vertical-align:middle; }
.vp-namnlank{ border:0; background:none; padding:6px 0; min-height:32px; color:var(--accent); font:500 15px/20px var(--typsnitt); text-align:left; cursor:pointer; }
.vp-namnlank.vilande{ color:var(--svag); }
.vp-namnlank.vilande::after{ content:" · vilande"; font:var(--f-fot); }
.vp-lista{ list-style:none; margin:0; padding:0; }
.vp-lista > li{ padding:10px 0; border-top:1px solid var(--linje); }
.vp-lista > li:first-child{ border-top:0; }
.vp-scenrubrik{ font:var(--f-under); margin:12px 0 4px; }
.vp-stegrad{ display:grid; grid-template-columns:28px minmax(0,1fr); gap:2px 10px; align-items:baseline; }
.vp-stegrad .vp-nr{ width:24px; height:24px; border-radius:50%; background:var(--accent-ljus); color:var(--accent); font:700 12px/24px var(--typsnitt); text-align:center; }
.vp-inut{ grid-column:2; font:var(--f-fot); color:var(--mjuk); display:flex; flex-wrap:wrap; gap:2px 12px; }
.vp-inut b{ color:var(--text); font-weight:600; }
.vp-cell{ display:flex; flex-wrap:wrap; gap:0 8px; }

/* ---------- Hem och första gången ---------- */
.vp-hem{ position:fixed; inset:0; z-index:70; background:var(--bg); display:none; flex-direction:column; overflow-y:auto;
  padding:calc(var(--sat) + 12px) calc(var(--sar) + 20px) calc(var(--sab) + 24px) calc(var(--sal) + 20px); }
.vp-hem.syns{ display:flex; animation:vp-tona var(--t-normal) var(--e-mjuk); }
.vp-hem .vp-hemtopp{ display:flex; align-items:center; gap:8px; margin-bottom:8px; min-height:var(--tryck); }
.vp-hem h1{ font:var(--f-stor); margin:8px 0 20px; }
.vp-hem .vp-planer{ display:grid; gap:12px; max-width:560px; width:100%; }
.vp-plankort{ display:block; width:100%; text-align:left; border:0; border-radius:var(--r-l); background:var(--yta); color:var(--text); box-shadow:var(--skugga-1);
  padding:16px 20px; min-height:80px; }
.vp-plankort b{ display:block; font:var(--f-under); }
.vp-plankort small{ display:flex; align-items:center; gap:10px; margin-top:6px; font:var(--f-fot); color:var(--mjuk); }
.vp-prickar{ display:inline-flex; gap:4px; }
.vp-prickar i{ width:8px; height:8px; border-radius:50%; background:var(--linje); }
.vp-prickar i.gul{ background:var(--varm); } .vp-prickar i.gron{ background:var(--gron); }
.vp-hem .vp-hemknappar{ display:grid; gap:8px; max-width:560px; width:100%; margin-top:20px; }
.vp-hem .vp-hemknappar .knapp{ justify-content:flex-start; min-height:52px; background:var(--yta); box-shadow:var(--skugga-1); font-weight:500; }
.vp-intro{ position:fixed; inset:0; z-index:80; background:var(--bg); display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:calc(var(--sat) + 24px) calc(var(--sar) + 24px) calc(var(--sab) + 24px) calc(var(--sal) + 24px); }
.vp-intro.syns{ display:flex; }
.vp-intro .vp-introinne{ max-width:420px; width:100%; display:flex; flex-direction:column; align-items:center; gap:16px; animation:vp-upp var(--t-ark) var(--e-ark); }
.vp-intro h1{ font:var(--f-stor); margin:0; }
.vp-intro p{ font:var(--f-brod); color:var(--mjuk); margin:0; }
.vp-intro .knapp{ width:100%; min-height:52px; font-size:17px; }
.vp-intro .vp-hoppa{ position:absolute; top:calc(var(--sat) + 12px); right:calc(var(--sar) + 12px); }
.vp-intro textarea{ width:100%; min-height:140px; border-radius:var(--r-l); border:1px solid var(--linje); background:var(--yta); color:var(--text); padding:16px; font:var(--f-brod); text-align:left; }
.vp-introbild{ width:220px; height:140px; position:relative; }
.vp-introbild i{ position:absolute; width:96px; height:44px; border-radius:12px; background:var(--yta); box-shadow:var(--skugga-2); border-left:3px solid var(--accent); }
.vp-introbild i:nth-child(1){ left:10px; top:16px; } .vp-introbild i:nth-child(2){ left:62px; top:48px; border-color:var(--gron); } .vp-introbild i:nth-child(3){ left:114px; top:80px; border-color:var(--varm); }
.vp-introbild.lager i{ left:20px !important; width:180px; height:26px; border:0; opacity:.9; }
.vp-introbild.lager i:nth-child(1){ top:8px; background:var(--lager-ser); } .vp-introbild.lager i:nth-child(2){ top:42px; background:var(--lager-gor); }
.vp-introbild.lager i:nth-child(3){ top:76px; background:var(--lager-sparas); } .vp-introbild.lager i:nth-child(4){ top:110px; background:var(--lager-bakom); }
.vp-introbild.ai i{ left:62px !important; top:48px !important; background:var(--violett-ljus); border:1.5px dashed var(--violett); }
.vp-sidprickar{ display:flex; gap:8px; }
.vp-sidprickar i{ width:8px; height:8px; border-radius:50%; background:var(--linje); }
.vp-sidprickar i.pa{ background:var(--text); }

/* ---------- Bred och utfälld (≥ 600) ---------- */
@media (min-width:600px){
  .vp-topp{ padding:0 12px; gap:8px; }
}

/* ---------- Telefon (< 600): en plats i taget, flikraden i botten ovanför 34 pt-zonen ---------- */
@media (max-width:599px){
  body{ padding-bottom:calc(var(--flik-h) + var(--sab)); }
  .vp-bred{ display:none; }
  #bHjalp{ width:var(--tryck); height:var(--tryck); min-height:var(--tryck); padding:0; justify-content:center; }
  .vp-vaxlare{ position:fixed; z-index:25; left:0; right:0; bottom:0; height:calc(var(--flik-h) + var(--sab)); padding:4px calc(var(--sar) + 8px) var(--sab) calc(var(--sal) + 8px);
    border-radius:0; background:var(--yta-glas); border-top:1px solid var(--linje); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); gap:0; }
  .vp-vaxlare button{ flex:1; flex-direction:column; gap:2px; min-height:50px; min-width:0; border-radius:12px; font:500 12px/14px var(--typsnitt); }
  .vp-vaxlare button .ik{ width:24px; height:24px; }
  .vp-vaxlare button[aria-pressed="true"]{ background:transparent; color:var(--accent); box-shadow:none; }
  /* En plats i taget */
  #stegpanel{ position:static !important; display:none !important; flex:1; width:auto !important; height:auto !important; border:0 !important; box-shadow:none !important;
    padding:0 !important; min-width:0; }
  body.plats-steg #stegpanel{ display:flex !important; }
  body:not(.plats-duk) #duk{ display:none; }
  #spStang{ display:none; }
  #steg7{ padding:10px 12px 4px; }
  .vp-data{ padding:16px 16px 48px; }
  .vp-data h2{ font:var(--f-rubrik); font-size:28px; line-height:34px; }
  /* Kortarket: ark nerifrån, över flikraden */
  #panel{ height:62vh !important; border-radius:var(--r-ark) var(--r-ark) 0 0; box-shadow:var(--skugga-ark) !important; z-index:40 !important; animation:vp-upp var(--t-ark) var(--e-ark); }
  .vp-greppet{ display:block; }
  .vp-airad{ right:84px; max-width:none; }
  #bGodkannAlla{ display:none; }
  #zoom{ right:24px; bottom:calc(var(--sab) + 84px); }
  body:has(#aiRad:not([hidden])) #zoom{ bottom:calc(var(--sab) + 84px); }
  #scenrad input, #scenrad select{ max-width:none; flex:1 1 40%; }
  #scenrad #scenText{ flex:1 1 100%; }
  .ruta-bak, .vp-arkbak{ align-items:flex-end; padding:0; }
  .ruta, .vp-ark{ border-radius:var(--r-ark) var(--r-ark) 0 0; max-width:none; padding-bottom:calc(var(--sab) + 24px); max-height:86vh; }
  .vp-dukhuvud{ left:10px; right:10px; top:10px; flex-wrap:nowrap; gap:6px; }
  .vp-valpill{ flex:1 1 0; min-width:0; }
  .vp-valpill select{ width:100%; max-width:none; padding:0 34px 0 14px; font-size:14px; }
  .vp-valpill .ik{ right:10px; }
  /* Datasidans tabeller blir små kort, ett per rad */
  .vp-rullbar{ overflow:visible; margin:0; padding:0; }
  .vp-tabell{ min-width:0 !important; }
  .vp-tabell thead{ display:none; }
  .vp-tabell, .vp-tabell tbody, .vp-tabell tr, .vp-tabell td{ display:block; }
  .vp-tabell tr{ border-top:1px solid var(--linje); padding:6px 0; }
  .vp-tabell td{ border:0; padding:2px 0; }
  .vp-tabell.falt tr{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 56px; gap:0 6px; align-items:center; }
  .vp-tabell.falt td:nth-child(1), .vp-tabell.falt td:nth-child(2){ grid-column:1 / -1; }
  .vp-tabell.falt td:nth-child(1) input{ font-weight:600; }
  .vp-tabell td[data-etikett]{ display:grid; grid-template-columns:118px minmax(0,1fr); gap:8px; align-items:center; }
  .vp-tabell td[data-etikett]::before{ content:attr(data-etikett); font:var(--f-fot); color:var(--mjuk); }
  .vp-tabell td.kravs{ width:auto; }
}

/* Rättningar efter skärmbilderna (v4.2) */
#spInnehall{ overflow-x:hidden; }
.spknappar .knapp, .vp-knapprad .knapp{ white-space:normal; text-align:left; }
.vp-tabell input[type=checkbox]{ width:22px; height:22px; min-height:0; padding:0; }
@media (max-width:1099px){ #bGodkannAlla{ display:none; } .vp-airad{ max-width:calc(100% - 100px); } }