/* Blueprint — komponenter (DESIGN §6). Mjuka former, få färger, en sak i fokus.
   Skriver över motorns gamla klasser (.knapp, .falt, .ruta …) med samma eller högre specificitet. */
body{ font:var(--f-liten); font-size:16px; background:var(--bg); color:var(--text); }
.vp-dold{ display:none !important; }
.ik{ width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
::selection{ background:var(--accent-ljus); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Knappar */
.knapp, .vp-knapp{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--tryck); padding:10px 16px;
  border-radius:12px; border:0; background:var(--yta2); color:var(--text); font:600 16px/20px var(--typsnitt); white-space:nowrap;
  transition:transform 120ms var(--e-mjuk), background var(--t-snabb) var(--e-mjuk), opacity var(--t-snabb); }
.knapp:active, .vp-knapp:active{ transform:scale(.97); background:var(--yta3); }
.knapp .ik{ width:20px; height:20px; }
.knapp.bla, .vp-knapp--primar{ background:var(--accent); color:var(--pa-accent); }
.knapp.bla:active{ background:var(--accent); opacity:.88; }
.knapp.violett, .vp-knapp--ai{ background:transparent; color:var(--violett-text); box-shadow:inset 0 0 0 1.5px var(--violett-kant); }
.knapp.violett:active, .vp-knapp--ai:active{ background:var(--violett-ljus); }
.knapp.pa{ background:var(--text); color:var(--bg); }
.knapp.rod{ background:var(--rod-ljus); color:var(--rod); }
.knapp.liten{ min-height:var(--tryck); padding:6px 12px; font-size:15px; }
.knapp[disabled], .vp-knapp[disabled]{ opacity:.4; cursor:default; transform:none; }
.vp-knapp--tyst{ background:transparent; color:var(--accent); padding:8px 12px; }
.vp-ikonknapp{ display:inline-grid; place-items:center; width:var(--tryck); height:var(--tryck); flex:none; border:0; border-radius:var(--r-rund);
  background:transparent; color:var(--text); padding:0; transition:background var(--t-snabb), transform 120ms var(--e-mjuk); }
.vp-ikonknapp:active{ background:var(--yta2); transform:scale(.94); }
.vp-ikonknapp.pa{ background:var(--text); color:var(--bg); }
.vp-rundknapp{ display:inline-grid; place-items:center; width:var(--tryck); height:var(--tryck); border-radius:var(--r-rund); border:0;
  background:var(--yta-glas); color:var(--text); box-shadow:var(--skugga-1); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.vp-bred-knapp{ width:100%; min-height:52px; font-size:17px; }

/* Fält */
.falt{ display:block; margin:0 0 var(--a4); font:var(--f-fot); color:var(--mjuk); }
.falt input, .falt select, .falt textarea{ display:block; width:100%; margin-top:6px; min-height:var(--tryck); border-radius:12px; border:1px solid var(--linje);
  padding:10px 12px; font:var(--f-brod); color:var(--text); background:var(--yta); transition:border-color var(--t-snabb), box-shadow var(--t-snabb); }
.falt textarea{ min-height:96px; resize:vertical; }
.falt input:focus, .falt select:focus, .falt textarea:focus{ outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ljus); }
select{ -webkit-appearance:none; appearance:none; }
.falt select{ background-image:none; }
input[type=checkbox]{ accent-color:var(--accent); width:22px; height:22px; }
.mjuk{ color:var(--mjuk); font:var(--f-liten); }
.lank{ border:0; background:none; color:var(--accent); text-decoration:none; padding:6px 2px; min-height:32px; font:500 15px/20px var(--typsnitt); cursor:pointer; text-align:left; }
.lank:active{ opacity:.6; }
hr{ border:0; border-top:1px solid var(--linje); margin:6px 4px; }

/* Taggar och chips */
.tagg{ display:inline-flex; align-items:center; gap:4px; border-radius:var(--r-rund); padding:3px 10px; font:var(--f-fot); }
.tagg .ik{ width:14px; height:14px; }
.tagg.forslag{ background:var(--violett-ljus); color:var(--violett-text); border:0; }
.tagg.beslutat{ background:var(--gron-ljus); color:var(--gron); }
.tagg.vilande{ background:var(--yta2); color:var(--mjuk); }
.tagg.uträknad{ background:var(--varm-ljus); color:var(--varm-text); border:0; }
.chip{ border:0; background:var(--yta2); border-radius:var(--r-rund); padding:8px 14px; min-height:36px; font:500 14px/18px var(--typsnitt); color:var(--text); }
.chips{ gap:6px; }

/* Listor och block */
.radlista{ border:0; background:var(--yta); border-radius:var(--r-m); padding:var(--a3); margin-bottom:var(--a2); box-shadow:var(--skugga-1); }
.radlista .rubrikrad input{ border-radius:10px; border:1px solid var(--linje); background:var(--yta); font:var(--f-under); min-height:var(--tryck); }
.vp-knapprad{ display:flex; flex-wrap:wrap; gap:var(--a2); margin-top:var(--a5); }
.vp-detaljer{ margin-top:var(--a4); }
.vp-detaljer summary{ cursor:pointer; min-height:var(--tryck); display:flex; align-items:center; color:var(--accent); font:500 15px/20px var(--typsnitt); list-style:none; }
.vp-detaljer summary::-webkit-details-marker{ display:none; }
.vp-detaljer ul{ margin:4px 0 0; padding-left:20px; }

/* Rutor (motorns modaler) som mjuka ark */
.ruta-bak, .vp-arkbak{ position:fixed; inset:0; background:var(--scrim); display:none; align-items:center; justify-content:center; z-index:50; padding:16px; }
.ruta-bak.syns, .vp-arkbak.syns{ display:flex; animation:vp-tona var(--t-normal) var(--e-mjuk); }
.ruta, .vp-ark{ background:var(--yta); color:var(--text); border-radius:var(--r-ark); padding:var(--a5); max-width:520px; width:100%; max-height:88vh; overflow-y:auto;
  box-shadow:var(--skugga-2); animation:vp-upp var(--t-ark) var(--e-ark); }
.ruta h2, .vp-ark h2{ font:var(--f-rubrik); margin:0 0 var(--a3); display:flex; align-items:center; gap:8px; }
.ruta .knappar, .vp-arkknappar{ display:flex; flex-direction:column; gap:var(--a2); margin-top:var(--a5); }
.ruta .knappar .knapp, .vp-arkknappar .knapp{ width:100%; min-height:50px; font-size:17px; }
#verbval .knappar{ flex-direction:row; flex-wrap:wrap; }
#verbval .knappar .knapp{ flex:1 1 45%; }
#fellista{ color:var(--rod); }
.vp-ark-ai h2 .ik{ color:var(--violett); }
#aiBild{ border:0; border-radius:var(--r-m); background:#fff; box-shadow:var(--skugga-1); }
#aiSkissval{ flex-direction:row; flex-wrap:wrap; margin:0 0 var(--a4); }
#aiSkissval .knapp{ flex:1 1 40%; width:auto; min-height:var(--tryck); font-size:15px; }
#aiStatus{ font:var(--f-liten); color:var(--mjuk); }
#aiStatus.fel{ color:var(--rod); }
/* AI tänker: en tunn violett linje som andas i arkets topp (DESIGN §3.6) */
#airuta .ruta{ position:relative; overflow-x:hidden; }
#airuta.tanker .ruta::before{ content:""; position:absolute; left:24px; right:24px; top:0; height:3px; border-radius:3px; background:var(--violett);
  animation:vp-andas var(--t-andas) ease-in-out infinite; }
.vp-beroenden{ list-style:none; padding:0; margin:0 0 var(--a3); }
.vp-beroenden li{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--linje); font:var(--f-liten); }
.vp-beroenden li .ik{ color:var(--mjuk); width:18px; height:18px; }

/* Notisen (toast) */
#notis{ position:fixed; left:50%; top:calc(var(--sat) + var(--topp-h) + 12px); bottom:auto; transform:translateX(-50%); background:var(--text); color:var(--bg); padding:10px 10px 10px 18px;
  border-radius:var(--r-rund); font:500 15px/20px var(--typsnitt); z-index:60; display:none; align-items:center; gap:10px; max-width:min(560px, calc(100vw - 32px));
  box-shadow:var(--skugga-2); }
#notis.syns{ display:flex; animation:vp-upp var(--t-normal) var(--e-mjuk); }
#notis:not(:has(#notisKnapp:not([hidden]))){ padding-right:18px; }
#notisKnapp{ border:0; border-radius:var(--r-rund); background:transparent; color:var(--accent-ljus); font:600 15px/20px var(--typsnitt); min-height:36px; padding:0 12px; }

/* Menyn (⋯) */
#meny{ background:var(--yta); border:0; border-radius:var(--r-l); padding:var(--a2); box-shadow:var(--skugga-2); width:min(290px, calc(100vw - 24px)); gap:2px; }
#meny .knapp{ background:transparent; justify-content:flex-start; font-weight:500; border-radius:12px; padding:10px 12px; }
#meny .knapp:active{ background:var(--yta2); }
#meny .knapp .ik{ color:var(--mjuk); }
#meny label.flode{ font:500 16px/20px var(--typsnitt); padding:0 12px; gap:12px; }

@keyframes vp-tona{ from{ opacity:0 } to{ opacity:1 } }
@keyframes vp-upp{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
#notis.syns{ animation-name:vp-tona; }
@keyframes vp-andas{ 0%,100%{ opacity:.25; transform:scaleX(.35) } 50%{ opacity:1; transform:scaleX(1) } }
@keyframes vp-glid{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce){
  .knapp:active, .vp-knapp:active, .vp-ikonknapp:active{ transform:none; }
  #airuta.tanker .ruta::before{ animation:none; opacity:.6; transform:none; }
}