:root {
  --bg0: #060a13;
  --bg1: #0a1120;
  --panel: rgba(16, 28, 50, 0.55);
  --panel-solid: #0d1626;
  --kant: rgba(110, 170, 255, 0.16);
  --kant-stark: rgba(110, 170, 255, 0.38);
  --accent: #2f9dff;
  --accent-ljus: #6fc4ff;
  --neon: #45b6ff;
  --text: #e8eef8;
  --muted: #8fa3bf;
  --ok: #3ddc97;
  --fara: #ff6b6b;
  --varning: #ffce6b;
  --glow: 0 0 0 1px rgba(69, 182, 255, 0.25), 0 0 26px rgba(47, 157, 255, 0.22);
  --radie: 14px;
  /* Sidhuvudets höjd. Står här och inte som en magisk siffra i varje regel:
     allt annat som ska fastna UNDER huvudet behöver samma tal, och två tal
     som ska vara lika men står på olika ställen glider isär. .topp tvingas
     till måttet med min-height, så variabeln är sanningen och inte en
     gissning om vad innehållet råkar bli. */
  --topp-hojd: 53px;
}

/* Skadeutredningar */
.skade-sida { max-width: 1420px; }
.skade-meddelande { margin-bottom: 14px; }
.skade-rubrik { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.skade-rubrik h2 { margin: 3px 0 0; }
.overline { margin: 0; color: var(--muted); font-size: 12px; letter-spacing: .09em; text-transform: uppercase; }
.skade-form, .avsnittsform { display: grid; gap: 16px; }
.f-rad { display: grid; align-content: start; gap: 6px; margin: 0; min-width: 0; font-size: 13px; font-weight: 600; }
.f-rad > input, .f-rad > select, .f-rad > textarea { width: 100%; margin: 0; }
.f-rad > small { color: var(--muted); font-weight: 400; line-height: 1.4; }
.f-enhet { color: var(--muted); font-weight: 400; }
.f-obligatorisk, .obligatorisk-forklaring > span { color: var(--fara); font-weight: 800; }
.obligatorisk-forklaring { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.f-bred { grid-column: 1 / -1; }
.f-grupprubrik { grid-column: 1 / -1; margin: 4px 0 -3px; padding-top: 12px; border-top: 1px solid var(--kant); color: var(--accent-ljus); }
.f-tvakol, .s-kort-kropp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 18px; }
.f-flerval { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 10px 12px; border: 1px solid var(--kant); border-radius: 8px; background: rgba(7, 12, 22, .35); }
.f-flerval .kryss, .f-bool .kryss { margin: 0; font-weight: 400; }
.f-arbetstyper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.arbetstyp-val { display: grid; align-content: start; gap: 7px; }
.arbetstyp-avstand { display: grid; gap: 4px; margin: 0 0 4px 24px; font-size: 11px; font-weight: 400; }
.arbetstyp-avstand input { margin-top: 0; }
.teknisk-nyckel { opacity: .78; }
.tagginmatning { display: grid; gap: 7px; }
.tagglista { display: flex; flex-wrap: wrap; gap: 5px; }
.tagg { padding: 3px 8px; border: 1px solid var(--kant-stark); border-radius: 999px; color: var(--accent-ljus); background: rgba(47, 157, 255, .08); font-size: 11px; font-weight: 500; }
.teknisk-nyckel code, .teknisk-info code { overflow-wrap: anywhere; }
.rapportval { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.valkort { position: relative; display: grid; gap: 6px; min-height: 120px; padding: 18px 18px 18px 48px; border: 1px solid var(--kant); border-radius: 12px; background: rgba(7, 12, 22, .38); cursor: pointer; }
.valkort:has(input:checked) { border-color: var(--accent); box-shadow: var(--glow); background: rgba(47, 157, 255, .1); }
.valkort input { position: absolute; left: 18px; top: 21px; width: auto; }
.valkort strong { color: var(--accent-ljus); font-size: 17px; }
.valkort span { color: var(--muted); font-weight: 400; line-height: 1.45; }
.registerval { margin: 0; }
.s-kortlista { display: grid; gap: 14px; }
.s-kort { overflow: hidden; border: 1px solid var(--kant); border-radius: var(--radie); background: var(--panel); }
.s-kort > header, .oversikt-sektion > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--kant); background: rgba(7, 12, 22, .25); }
.s-kort > header h3, .s-kort > header h4, .oversikt-sektion h3 { margin: 0; }
.s-kort-kropp { padding: 16px; }
.s-avancerat { border-top: 1px solid var(--kant); }
.s-avancerat > summary, .tabell-avancerat summary { padding: 10px 16px; color: var(--muted); cursor: pointer; font-size: 13px; }
.s-avancerat[open] > summary { border-bottom: 1px solid var(--kant); }
.prognos-kort > summary { padding: 12px 16px; cursor: pointer; background: rgba(7, 12, 22, .25); }
.prognos-kort > summary h3 { display: inline; margin: 0 0 0 7px; }
.prognos-kort[open] > summary { border-bottom: 1px solid var(--kant); }
.matpunkt-hjalp { margin: -4px 16px 16px; color: var(--muted); font-size: 12px; }
.villkorade-falt, .grannfastighet-falt, .bygg-klassfalt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 18px; }
.bygg-klassfalt, .bygg-direktfalt, .bygg-fg-falt { grid-column: 1 / -1; }
.bygg-direktfalt > .f-rad, .bygg-fg-falt > .f-rad { max-width: calc(50% - 9px); }
.en-byggnad .bygg-flerkontroller, .en-byggnad .bygg-identitet { display: none; }
.byggnader-avancerat { padding: 14px 16px; }
.byggnader-avancerat summary { margin-bottom: 10px; color: var(--muted); cursor: pointer; }
.riktvarde-val { margin-top: 2px; }
.mark-forhandsvisningar { display: grid; gap: 8px; }
.mark-forhandsvisningar .period-forhandsvisning { margin: 0; }
.korttabell { padding: 0 16px 16px; }
.korttabell h5 { margin: 14px 0 8px; color: var(--accent-ljus); }
.korttabell .s-resultattabell table { min-width: 520px; }
.berakningsfel { margin: 0 16px 16px; }
.arbetsplats-lage { margin: 0; padding: 14px; border: 1px solid var(--kant); border-radius: 8px; }
.arbetsplats-lage legend { padding: 0 6px; }
.arbetsplats-lage > small { display: block; margin-top: 9px; color: var(--muted); }
.vipnordic-import h3, .vipnordic-import p { margin-top: 0; }
.vip-resultat { margin-top: 14px; }
.oversikt-tabell, .utkast-oversikt { padding: 0 16px 16px; }
.oversikt-tabell .s-resultattabell table { min-width: 900px; }
.resultatfil { display: inline-flex; gap: 6px; }
.period-forhandsvisning { margin: 14px 0 0; padding: 12px 14px; border-left: 3px solid var(--accent); background: rgba(47, 157, 255, .08); }
.steg-hjalp { padding: 12px 14px; border-left: 3px solid var(--accent); color: var(--muted); background: rgba(47, 157, 255, .08); }
.fastighet-fakta { margin-bottom: 20px; }
.fastighet-fakta > .rad, .fastighet-fakta > .f-tvakol, .fastighet-fakta > dl { margin: 0; padding: 14px 16px; }
.s-tabell { display: grid; gap: 10px; min-width: 0; }
.tabell-scroll { overflow-x: auto; }
.s-tabell table { min-width: 860px; margin: 0; }
.lista.kompakt td, .lista.kompakt th { padding: 6px 7px; }
.s-tabell th { font-size: 11px; line-height: 1.25; }
.s-tabell .f-kompakt > span, .s-tabell .f-kompakt > small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.s-tabell .f-kompakt input, .s-tabell .f-kompakt select { min-width: 105px; margin: 0; padding: 7px; }
.tabell-avancerat > td { padding: 0 8px 8px !important; border-bottom: 1px solid var(--kant); }
.tabell-avancerat .f-tvakol { padding: 10px; }
.matningar-per-punkt { margin: 0 0 22px 18px; padding: 14px; border-left: 2px solid var(--kant-stark); }
.fotoval { margin: -1px 0 16px; border: 1px solid var(--kant); border-radius: 0 0 var(--radie) var(--radie); }
.fotoval-rutnat { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 10px; }
.fotoval-rutnat label { display: grid; gap: 7px; font-size: 12px; }
.fotoval-rutnat img { width: 100%; height: 95px; object-fit: cover; border-radius: 6px; }
.uppladdningszon { display: grid; gap: 10px; margin: 16px 0; padding: 16px; border: 1px solid var(--kant); border-radius: var(--radie); background: var(--panel); }
.dropzon { display: grid; place-items: center; min-height: 104px; padding: 14px; border: 2px dashed var(--kant-stark); border-radius: 10px; text-align: center; }
.dropzon input { width: auto; margin-top: 8px; }
.dropzon.dragover { border-color: var(--accent); background: rgba(47, 157, 255, .1); }
.bildrutnat { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 14px 0; }
.bildkort { padding: 9px; border: 1px solid var(--kant); border-radius: 8px; background: var(--panel-solid); cursor: grab; }
.bildkort.dras { opacity: .45; }
.bildkort img { display: block; width: 100%; height: 125px; object-fit: cover; border-radius: 5px; margin-bottom: 8px; }
.bildkort input { width: 100%; }
.guide-huvud { margin-bottom: 22px; }
.guide-huvud h2 { margin: 3px 0; }
.guide-huvud ol { display: flex; gap: 0; margin: 16px 0 0; padding: 0; overflow-x: auto; list-style: none; }
.guide-huvud li { position: relative; display: grid; justify-items: center; gap: 5px; flex: 1 0 112px; color: var(--muted); font-size: 11px; text-align: center; }
.guide-huvud li::before { content: ""; position: absolute; z-index: -1; top: 14px; left: -50%; width: 100%; height: 2px; background: var(--kant); }
.guide-huvud li:first-child::before { display: none; }
.guide-huvud li > span { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid var(--kant-stark); border-radius: 50%; background: var(--panel-solid); }
.guide-huvud li.aktiv, .guide-huvud li.klar { color: var(--text); }
.guide-huvud li.aktiv > span { border-color: var(--accent); box-shadow: var(--glow); }
.guide-huvud li.klar > span { border-color: var(--ok); background: rgba(61, 220, 151, .14); }
.guide-huvud li.saknas > span { border-color: var(--fara); color: var(--fara); background: rgba(255, 107, 107, .12); font-size: 24px; line-height: 1; }
.guide-huvud li.klar::before, .guide-huvud li.aktiv::before { background: var(--ok); }
.guide-footer { position: sticky; z-index: 8; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 20px; padding: 12px 14px; border: 1px solid var(--kant); border-radius: 12px; background: var(--panel-solid); box-shadow: 0 -8px 24px rgba(4, 8, 16, .45); }
.guide-footer-mitt { display: flex; gap: 16px; }
.oversikt-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
.oversikt-steg { display: grid; gap: 14px; }
.oversikt-sektion { margin: 0; padding: 0; overflow: hidden; }
.oversikt-sektion > header > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stegnummer { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; }
.dolt-steg { border-style: dashed; opacity: .82; }
.oversikt-fakta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin: 0; padding: 16px; }
.oversikt-fakta div { min-width: 0; }
.oversikt-fakta dt { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.oversikt-fakta dd { margin: 3px 0 0; overflow-wrap: anywhere; }
.oversikt-sida { position: sticky; top: calc(var(--topp-hojd) + 16px); display: grid; gap: 14px; }
.skade-status, .rapportinstallningar { margin: 0; overflow-wrap: anywhere; }
.skade-status h3, .rapportinstallningar h3 { margin-top: 0; }
.skade-status dl, .teknisk-info dl { display: grid; grid-template-columns: 1fr auto; gap: 7px 10px; }
.skade-status dt, .teknisk-info dt { color: var(--muted); }
.skade-status dd, .teknisk-info dd { margin: 0; font-weight: 600; text-align: right; }
.status-steg { display: grid; gap: 7px; padding: 0; list-style: none; }
.status-steg a { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; }
.status-steg span { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid currentColor; border-radius: 50%; font-weight: 800; }
.status-steg .klar span { color: var(--ok); }
.status-steg .saknas span { color: var(--fara); font-size: 18px; line-height: 1; }
.rapportinstallningar .skade-form { gap: 11px; }
.teknisk-info { margin-top: 14px; }
.teknisk-info summary { color: var(--muted); cursor: pointer; }
.verdict { display: inline-block; padding: 5px 9px; border-radius: 6px; font-weight: 800; }
.verdict-ready { color: var(--ok); background: rgba(61, 220, 151, .1); }
.verdict-not-ready { color: var(--fara); background: rgba(255, 107, 107, .1); }
.korning-panel { display: grid; gap: 12px; }
.korning-panel > h3 { margin: 0; }
.agentknappar { flex-wrap: wrap; margin: 4px 0; }
.korning-framsteg { display: flex; align-items: center; gap: 9px; color: var(--muted); }
.korning-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.korning-punkt.aktiv { background: var(--ok); box-shadow: 0 0 12px var(--ok); animation: skade-puls 1.5s infinite; }
@keyframes skade-puls { 50% { opacity: .35; } }
.korning-mansklig { max-height: 260px; overflow-y: auto; padding: 10px 12px; border: 1px solid var(--kant); border-radius: 8px; background: rgba(7, 12, 22, .4); }
.korning-mansklig p { margin: 4px 0; font-size: 13px; }
.korning-mansklig p.fel { color: var(--fara); }
.korning-raw pre { max-height: 330px; overflow: auto; white-space: pre-wrap; font-size: 11px; background: var(--bg0); color: var(--muted); padding: 10px; border-radius: 6px; }
.fillankar { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 10px 0 18px; }
.resultattext { max-height: 450px; overflow: auto; white-space: pre-wrap; }
.inline { display: inline; }
.inline button { display: inline; }

@media (max-width: 1050px) {
  .oversikt-layout { grid-template-columns: minmax(0, 1fr); }
  .oversikt-sida { position: static; grid-row: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .f-tvakol, .s-kort-kropp, .f-arbetstyper, .rapportval, .oversikt-fakta, .oversikt-sida, .villkorade-falt, .grannfastighet-falt, .bygg-klassfalt { grid-template-columns: minmax(0, 1fr); }
  .bygg-direktfalt > .f-rad, .bygg-fg-falt > .f-rad { max-width: none; }
  .f-bred { grid-column: auto; }
  .guide-footer { position: static; flex-wrap: wrap; }
  .guide-footer-mitt { order: 3; width: 100%; justify-content: center; }
  .skade-rubrik { align-items: start; flex-direction: column; }
  .s-kort > header { align-items: start; }
}
* { box-sizing: border-box; }
/* Sidbakgrunden ligger på <html>, INTE på <body>.
   Anledningen är målningsordningen: ett fast bakgrundslager med negativt
   z-index (auroran, vibrationsvågorna) målas efter bakgrunden på det element
   som bildar stapelkontexten — men FÖRE bakgrunden på vanliga barn, och body
   är ett vanligt barn. Låg bakgrunden kvar på body täckte den varje sådant
   lager helt. Med bakgrunden på html och genomskinlig body syns lagren. */
html {
  color-scheme: dark;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(47, 157, 255, 0.16), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(31, 72, 124, 0.35), transparent 55%),
    linear-gradient(rgba(110, 170, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 170, 255, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  background-size: auto, auto, 44px 44px, 44px 44px, auto;
  background-attachment: fixed;
}
body {
  margin: 0;
  font-family: "Segoe UI Variable", "Segoe UI", "Inter", Arial, sans-serif;
  color: var(--text);
  background: transparent;
  min-height: 100vh;
}
main { max-width: 1020px; margin: 0 auto; padding: 26px 18px 80px; }

h1 { font-size: 20px; margin: 0; letter-spacing: 0.4px; }
h1 span {
  background: linear-gradient(90deg, var(--accent), var(--accent-ljus));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 400;
}
h1 a { color: inherit; text-decoration: none; }
h2 { font-size: 17px; margin: 14px 0; text-transform: uppercase; letter-spacing: 1.6px; color: var(--accent-ljus); font-weight: 600; }

.topp {
  position: sticky; top: 0; z-index: 10; min-height: var(--topp-hojd);
  background: rgba(8, 13, 24, 0.75);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--kant);
  padding: 14px 24px;
  display: flex; justify-content: space-between; align-items: center;
}
.topp::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon), transparent);
  opacity: 0.55;
}
.topp-hoger { display: flex; gap: 14px; align-items: center; color: var(--muted); font-size: 13px; }

.rad { display: flex; gap: 12px; align-items: center; }
.mellan { justify-content: space-between; }

/* Projektformulärets Spara-knapp satt högst upp bredvid rubriken, och
   formuläret är flera skärmhöjder långt — så knappen var borta i samma stund
   man började fylla i fält. Nu följer raden med.
   Fastnar under sidhuvudet, inte i överkanten: .topp ligger redan sticky på
   top: 0 med z-index 10, så en rad som också stannade vid 0 hade glidit in
   bakom den. z-index 9 håller raden ovanför formulärinnehållet men under
   huvudet. Ogenomskinlig bakgrund kräver att fälten som passerar under inte
   läser igenom. */
#projektform > .rad.mellan {
  position: sticky;
  top: var(--topp-hojd);
  z-index: 9;
  padding: 10px 14px;
  margin: 0 -14px;
  background: var(--panel-solid);
  border: 1px solid var(--kant);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(4, 8, 16, 0.45);
}
#projektform > .rad.mellan h2 { margin: 0; }

.kort {
  background: var(--panel);
  backdrop-filter: blur(12px);
  border: 1px solid var(--kant);
  border-radius: var(--radie);
  padding: 20px;
  margin: 18px 0;
  position: relative;
}
.kort::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: var(--radie) var(--radie) 0 0;
  background: linear-gradient(90deg, transparent 5%, rgba(111, 196, 255, 0.5), transparent 95%);
  pointer-events: none;
}
fieldset.kort { border: 1px solid var(--kant); }
legend {
  font-weight: 600; color: var(--accent-ljus); padding: 2px 12px;
  text-transform: uppercase; letter-spacing: 1.6px; font-size: 12px;
  background: var(--panel-solid);
  border: 1px solid var(--kant); border-radius: 999px;
}

label { display: block; font-size: 12px; color: var(--muted); margin: 9px 0; letter-spacing: 0.3px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=search], input[type=number], select {
  display: block; width: 100%; padding: 9px 11px; margin-top: 4px;
  border: 1px solid var(--kant); border-radius: 9px; font-size: 14px;
  color: var(--text); background: rgba(7, 12, 22, 0.6);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus {
  outline: none; border-color: var(--kant-stark); box-shadow: var(--glow);
}
textarea {
  display: block; width: 100%; padding: 9px 11px; margin-top: 4px;
  border: 1px solid var(--kant); border-radius: 9px; font-size: 14px;
  color: var(--text); background: rgba(7, 12, 22, 0.6);
  font-family: inherit; line-height: 1.5; resize: vertical;
  transition: border-color 0.15s, box-shadow 0.15s;
}
textarea:focus { outline: none; border-color: var(--kant-stark); box-shadow: var(--glow); }
input[type=file] { color: var(--muted); font-size: 13px; margin-top: 6px; }
input[type=file]::file-selector-button {
  background: rgba(47, 157, 255, 0.12); color: var(--accent-ljus);
  border: 1px solid var(--kant-stark); border-radius: 7px;
  padding: 7px 12px; margin-right: 10px; cursor: pointer;
}
select option { background: var(--panel-solid); }
small { color: var(--muted); opacity: 0.85; }

.tvakol { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 22px; }
.tvakol .bred { grid-column: 1 / -1; }
.kryss { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--text); }
.kryss input { width: auto; margin: 0; accent-color: var(--accent); }

.knapp {
  display: inline-block;
  background: linear-gradient(135deg, #1272c4, var(--accent));
  color: #fff; border: 1px solid rgba(111, 196, 255, 0.5);
  padding: 10px 22px; border-radius: 9px; font-size: 13px; cursor: pointer;
  text-decoration: none; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600;
  box-shadow: 0 0 18px rgba(47, 157, 255, 0.25);
  transition: transform 0.12s, box-shadow 0.12s;
}
.knapp:hover { transform: translateY(-1px); box-shadow: 0 0 26px rgba(69, 182, 255, 0.45); }
.knapp:disabled { opacity: 0.6; cursor: wait; transform: none; }
.knapp.sekundar { background: rgba(31, 72, 124, 0.5); }
.pulserar { animation: puls 1.2s ease-in-out infinite; }
@keyframes puls { 50% { box-shadow: 0 0 34px rgba(69, 182, 255, 0.6); } }

.lank { background: none; border: 0; color: var(--accent-ljus); cursor: pointer; font-size: 13px; padding: 0; }
.lank:hover { text-decoration: underline; }
.lank.fara { color: var(--fara); }

table.lista {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--panel); backdrop-filter: blur(12px);
  border: 1px solid var(--kant); border-radius: var(--radie); overflow: hidden;
}
table.lista th, table.lista td {
  text-align: left; padding: 12px 14px; font-size: 14px;
  border-bottom: 1px solid rgba(110, 170, 255, 0.08);
}
table.lista th {
  background: rgba(13, 24, 44, 0.9); color: var(--accent-ljus);
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px;
}
table.lista tbody tr { transition: background 0.12s; }
table.lista tbody tr:hover { background: rgba(47, 157, 255, 0.07); }
table.lista a { color: var(--accent-ljus); font-weight: 600; text-decoration: none; }
table.lista a:hover { text-shadow: 0 0 12px rgba(111, 196, 255, 0.8); }
table.versioner td { font-size: 13px; color: var(--muted); }
tr.senaste td { color: var(--text); }
.filpill {
  display: inline-block; margin: 2px 6px 2px 0; padding: 4px 12px;
  border: 1px solid var(--kant-stark); border-radius: 999px;
  color: var(--accent-ljus) !important; font-size: 12px; font-weight: 600;
  background: rgba(47, 157, 255, 0.08);
}
.filpill:hover { box-shadow: var(--glow); }

.centrerad { display: flex; min-height: 100vh; align-items: center; justify-content: center; }
.inloggning { width: 360px; padding: 34px; }
.inloggning h1 { font-size: 26px; text-align: center; margin-bottom: 10px; }
.inloggning p { color: var(--muted); font-size: 13px; text-align: center; }
.inloggning button { width: 100%; margin-top: 18px; }

.fel { color: var(--fara); font-size: 14px; }
.fel-ruta {
  background: rgba(255, 107, 107, 0.08); border: 1px solid rgba(255, 107, 107, 0.4);
  border-radius: var(--radie); padding: 14px 18px; margin: 16px 0;
}
.ok-ruta {
  background: rgba(61, 220, 151, 0.07); border: 1px solid rgba(61, 220, 151, 0.35);
  border-radius: var(--radie); padding: 14px 18px; margin: 16px 0;
}
.ok-ruta a { color: var(--ok); }
.varning { color: var(--varning); font-size: 13px; }

.kategori { margin: 18px 0 6px; color: var(--accent-ljus); font-size: 11px; text-transform: uppercase; letter-spacing: 1.6px; }
.objekt {
  border: 1px solid var(--kant); border-radius: 10px; padding: 10px 14px; margin: 7px 0;
  background: rgba(10, 17, 32, 0.4); transition: border-color 0.15s, box-shadow 0.15s;
}
.objekt.vald { border-color: var(--kant-stark); box-shadow: inset 0 0 22px rgba(47, 157, 255, 0.07), 0 0 14px rgba(47, 157, 255, 0.12); }
.objekt-rad { display: flex; align-items: center; gap: 10px; }
.objekt-rad .kryss { flex: 1; margin: 0; }
/* Extraförekomster tas bort med knappen; den första kryssas ur i stället. */
.objekt-typ > .objekt:first-child .objekt-ta-bort { display: none; }
.objekt:not(.vald) .objekt-ta-bort { visibility: hidden; }
.objekt-lagg-till { display: none; margin: 0 0 10px 14px; font-size: 12px; }
.objekt-typ.har-valda .objekt-lagg-till { display: inline-block; }
.objekt-falt { display: none; padding: 6px 0 6px 28px; }
.objekt.vald .objekt-falt { display: block; }
.objekt-falt .kontakt { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.kontakt-rubrik { grid-column: 1 / -1; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }

.omslagsval { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.omslagskort {
  border: 1px solid var(--kant); border-radius: 12px; padding: 14px; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(10, 17, 32, 0.45); transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
  color: var(--text); font-size: 14px;
}
.omslagskort small { font-size: 12px; }
.omslagskort:hover { transform: translateY(-2px); }
.omslagskort.vald { border-color: var(--neon); box-shadow: var(--glow); }
.omslagskort input { display: none; }

/* Omslagsfoto ur fotobiblioteket (assets/hero) */
.delrubrik {
  font-size: 13px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--muted); margin: 22px 0 4px;
}
.fotoval { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.fotokort {
  border: 1px solid var(--kant); border-radius: 12px; padding: 8px; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(10, 17, 32, 0.45); transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
  color: var(--text); font-size: 13px;
}
.fotokort:hover { transform: translateY(-2px); }
.fotokort.vald { border-color: var(--neon); box-shadow: var(--glow); }
.fotokort input { display: none; }
.fotokort small { font-size: 11px; color: var(--muted); }
.fotoyta {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 8px; display: block; background: rgba(255, 255, 255, 0.04);
}
.fotoyta.tom {
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 12px; border: 1px dashed var(--kant);
}
/* Bocken på det valda kortet: kanten ensam är svag på en sida med tolv foton
   bredvid varandra, och valet ska gå att se utan att jämföra kort mot kort. */
.fotokort { position: relative; }
.fotokort.vald::after {
  content: "✓"; position: absolute; top: 14px; right: 14px;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #05121c;
  background: var(--neon); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  animation: fotoval-bock 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes fotoval-bock {
  from { transform: scale(0.2); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* --- Obligatoriska fält -----------------------------------------------------
   Gult så länge fältet är tomt, grönt när det är ifyllt. Markeringen finns i
   tre lager med samma färgspråk — prick vid etiketten, kant i fältet, räknare
   i sektionens legend — så att både det enskilda fältet och kortet man skummar
   förbi svarar på samma fråga: är det något kvar här? Tillstånden sätts av
   public/formular.js utifrån kravs-flaggan i lib/falt.js. */

.kravprick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; margin-left: 5px; border-radius: 50%;
  vertical-align: -2px; font-size: 0; line-height: 1;
  background: rgba(255, 206, 107, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 206, 107, 0.6);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.kravprick::before { font-size: 9px; font-weight: 800; line-height: 1; color: #071019; }
.krav-ifylld .kravprick {
  background: var(--ok);
  box-shadow: inset 0 0 0 1px var(--ok), 0 0 10px rgba(61, 220, 151, 0.35);
}
.krav-ifylld .kravprick::before { content: "✓"; }

/* :not(:focus) lämnar fokusringen ifred — den ska fortfarande äga fältet man
   står i, markeringen handlar om alla de andra. */
.krav-tom > input:not(:focus), .krav-tom > select:not(:focus), .krav-tom > textarea:not(:focus) {
  border-color: rgba(255, 206, 107, 0.2);
  box-shadow: inset 2px 0 0 rgba(255, 206, 107, 0.85);
}
.krav-ifylld > input:not(:focus), .krav-ifylld > select:not(:focus), .krav-ifylld > textarea:not(:focus) {
  border-color: rgba(61, 220, 151, 0.18);
  box-shadow: inset 2px 0 0 rgba(61, 220, 151, 0.75);
}
/* Ögonblicket då fältet blir ifyllt: ett grönt ljus sveper genom rutan en gång
   och pricken slår till. Bakgrundsbilden ligger ovanpå fältets egen färg och
   försvinner med klassen. */
.krav-fylls > input, .krav-fylls > select, .krav-fylls > textarea {
  background-image: linear-gradient(100deg, transparent 12%, rgba(61, 220, 151, 0.26) 50%, transparent 88%);
  background-repeat: no-repeat; background-size: 55% 100%;
  animation: krav-svep 0.7s ease-out forwards;
}
@keyframes krav-svep {
  from { background-position: -120% 0; }
  to   { background-position: 260% 0; }
}
.krav-fylls .kravprick { animation: krav-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes krav-pop {
  0%   { transform: scale(0.55); }
  55%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* Sektionen: en tunn stapel i vänstermarginalen och en räknare i legenden.
   Stapeln ligger i kortets padding, inte på kanten — Nova ritar kortkanten
   som en gradient och skulle svälja en färgad border. */
fieldset.kort[data-kravstatus]::after {
  content: ""; position: absolute; left: 6px; top: 26px; bottom: 22px; width: 3px;
  border-radius: 3px; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--kravfarg) 16%, var(--kravfarg) 84%, transparent);
  box-shadow: 0 0 12px var(--kravglod);
}
fieldset.kort[data-kravstatus="kvar"] { --kravfarg: #ffce6b; --kravglod: rgba(255, 206, 107, 0.35); }
fieldset.kort[data-kravstatus="klar"] { --kravfarg: rgba(61, 220, 151, 0.8); --kravglod: rgba(61, 220, 151, 0.25); }
.kravmarke {
  display: inline-block; margin-left: 9px; padding: 1px 8px;
  border: 1px solid currentColor; border-radius: 999px;
  font-size: 10px; letter-spacing: 1px;
  transition: color 0.35s ease, background 0.35s ease;
}
.kravmarke:empty { display: none; }
[data-kravstatus="kvar"] > legend { border-color: rgba(255, 206, 107, 0.42); }
[data-kravstatus="kvar"] > legend .kravmarke { color: var(--varning); background: rgba(255, 206, 107, 0.1); }
[data-kravstatus="klar"] > legend { border-color: rgba(61, 220, 151, 0.35); }
[data-kravstatus="klar"] > legend .kravmarke { color: var(--ok); background: rgba(61, 220, 151, 0.1); }
.kravmarke.krav-andrad { animation: krav-tick 0.42s ease-out; }
@keyframes krav-tick {
  0%   { transform: translateY(-5px); opacity: 0; }
  60%  { transform: translateY(1px); opacity: 1; }
  100% { transform: translateY(0); }
}
/* Sista fältet i sektionen: hela kortet kvitterar en gång. */
fieldset.kort.krav-klar { animation: krav-klar-glod 1.2s ease-out; }
@keyframes krav-klar-glod {
  0%   { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0); }
  22%  { box-shadow: 0 0 30px 2px rgba(61, 220, 151, 0.3); }
  100% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0); }
}

/* Rörelse av (se tema.js): tillstånden är kvar, rörelsen tas bort. */
html[data-rorelse="av"] .fotokort.vald::after,
html[data-rorelse="av"] .krav-fylls > input,
html[data-rorelse="av"] .krav-fylls > select,
html[data-rorelse="av"] .krav-fylls > textarea,
html[data-rorelse="av"] .krav-fylls .kravprick,
html[data-rorelse="av"] .kravmarke.krav-andrad,
html[data-rorelse="av"] fieldset.kort.krav-klar { animation: none; }

.kart-api { border-bottom: 1px solid var(--kant, #333); padding-bottom: 14px; margin-bottom: 14px; }
.kart-api .rad { margin: 8px 0; flex-wrap: wrap; }
.kart-api select { min-width: 320px; max-width: 100%; }
#kart-api-installningar { display: block; margin: 4px 0 8px; }
.filrad { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 16px; align-items: end; }
.filstatus { list-style: none; padding: 0; margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.filstatus li { margin: 5px 0; }
.inline { display: inline; }
.generera { display: flex; gap: 14px; align-items: center; }
.dold { display: none !important; }

@media (max-width: 760px) {
  .tvakol, .filrad, .objekt-falt .kontakt { grid-template-columns: 1fr; }
}

.diff-fran { color: var(--fara); opacity: 0.85; }
.diff-till { color: var(--ok); }

.arbetstyper { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }

.atfras-kvitto { color: var(--ok); font-size: 12px; font-weight: 600; margin-left: 4px; transition: opacity 0.2s; }

.dokumentvy { max-width: 860px; }
.dokument {
  background: var(--panel); backdrop-filter: blur(12px);
  border: 1px solid var(--kant); border-radius: var(--radie);
  padding: 8px 30px; margin: 18px 0;
}
.sektion { padding: 16px 0; border-bottom: 1px solid rgba(110, 170, 255, 0.08); }
.sektion:last-child { border-bottom: none; }
.sektion-rubrik { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sektion h3 { font-size: 16px; margin: 0; color: var(--text); text-transform: none; letter-spacing: 0; }
.sektion h4 { font-size: 14px; margin: 0; color: var(--muted); text-transform: none; letter-spacing: 0; }
.sektion.redigerbar .sektion-rubrik:hover .redigera-knapp { opacity: 1; }
.redigera-knapp { opacity: 0.55; white-space: nowrap; transition: opacity 0.15s; }
.sektion-lasvy p { font-size: 14px; line-height: 1.6; color: var(--text); margin: 8px 0; }
.sektion-lasvy p.punkt { margin-left: 12px; }
.figurnotis { color: var(--muted); font-style: italic; font-size: 13px; }
.minitabell { margin: 10px 0; font-size: 12px; }
.minitabell th, .minitabell td { padding: 6px 10px; }

.anpassad-badge {
  display: flex; align-items: center; gap: 8px; margin: 6px 0 10px;
  font-size: 12px; color: var(--varning);
  background: rgba(255, 206, 107, 0.08); border: 1px solid rgba(255, 206, 107, 0.3);
  border-radius: 999px; padding: 4px 12px; width: fit-content;
}
.sektion.anpassad .sektion-lasvy { border-left: 3px solid rgba(255, 206, 107, 0.5); padding-left: 12px; }

/* Uteslutna avsnitt: rapporten komponeras utan dem, men de visas ändå på sin
   plats i läsvyn — annars går det inte att se VAD som saknas, bara att något
   gör det. Dämpade, utan brödtext och utan avsnittsnummer (de har inget). */
.sektion-verktyg { display: flex; align-items: baseline; gap: 14px; white-space: nowrap; }
.sektion-rubrik:hover .uteslut-knapp { opacity: 1; }
.uteslut-knapp { opacity: 0.4; color: var(--muted); transition: opacity 0.15s, color 0.15s; }
.uteslut-knapp:hover { color: var(--fara); }
.sektion.utesluten { opacity: 0.6; }
.sektion.utesluten h4 { color: var(--muted); text-decoration: line-through; }
.sektion.utesluten p { color: var(--muted); margin: 6px 0 0; }
.uteslutna-sammanfattning { color: var(--muted); }

.sektion-redigera { margin-top: 10px; }
.sektion-redigera textarea {
  width: 100%; min-height: 160px; padding: 12px; border-radius: 9px;
  border: 1px solid var(--kant-stark); background: rgba(7, 12, 22, 0.7);
  color: var(--text); font-size: 14px; font-family: inherit; line-height: 1.6;
  resize: vertical;
}
/* Spara ska aldrig behöva letas upp. En lång text eller en tabell med många
   rader blir högre än fönstret, och då hamnade knappraden nedanför kanten —
   man skrev klart och fick scrolla för att komma åt att spara.
   Sticky och inte fixed: raden pinnas mot fönstrets nederkant bara så länge
   formuläret syns, och lägger sig tillbaka i flödet när man nått slutet. En
   fixerad rad hade legat kvar över läsvyn även när ingenting redigeras.
   Bakgrunden måste vara ogenomskinlig — annars läser texten som passerar
   under knapparna igenom dem.
   Barnkombinator, inte ättling: tabellredigeraren ger sina egna knappar
   samma klass (redigera.js), och de ska följa med i flödet som vanligt. */
.sektion-redigera > .rad {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--panel-solid);
  border: 1px solid var(--kant);
  border-radius: 9px;
  box-shadow: 0 -8px 20px rgba(4, 8, 16, 0.5);
}

.tabellredigerare {
  margin-top: 14px; padding: 12px;
  border: 1px solid var(--kant); border-radius: 9px;
  background: rgba(7, 12, 22, 0.36);
}
.tabellredigerare h5 { margin: 0; font-size: 13px; color: var(--text); }
.tabell-skapa-rad {
  display: grid; grid-template-columns: 120px 140px auto;
  gap: 10px; align-items: end; margin-top: 10px;
}
.tabell-skapa-rad label { margin: 0; font-size: 12px; }
.tabell-skapa-rad input { margin-top: 4px; }
.tabell-verktyg { gap: 12px; margin-bottom: 8px; }
.tabell-verktyg .rad { flex-wrap: wrap; justify-content: flex-end; margin: 0; }
.knapp.liten { padding: 5px 9px; font-size: 12px; }
.tabell-inmatning-ram { overflow-x: auto; }
.tabell-inmatning { min-width: 100%; margin-bottom: 0; }
.tabell-inmatning th, .tabell-inmatning td { min-width: 210px; padding: 5px; }
.tabell-cellfalt { display: grid; gap: 5px; }
.tabell-inmatning input, .tabell-inmatning select {
  width: 100%; margin: 0; padding: 7px 8px; min-height: 34px;
  color: var(--text); background: rgba(7, 12, 22, 0.64);
}
.tabell-inmatning select { font-size: 12px; }
.tabell-inmatning th { position: relative; padding-right: 31px; }
.tabell-inmatning th input { font-weight: 650; }
.tabell-inmatning .tabell-atgarder { min-width: 34px; width: 34px; padding: 4px; }
.tabell-ta-bort {
  width: 24px; height: 24px; padding: 0; border: 1px solid transparent;
  border-radius: 6px; color: var(--fara); background: transparent;
  cursor: pointer; font-size: 18px; line-height: 20px;
}
.tabell-inmatning th .tabell-ta-bort { position: absolute; right: 4px; top: 10px; }
.tabell-ta-bort:hover:not(:disabled) { border-color: var(--fara); background: rgba(255, 99, 132, 0.1); }
.tabell-ta-bort:disabled { opacity: 0.25; cursor: not-allowed; }

@media (max-width: 760px) {
  .tabell-skapa-rad { grid-template-columns: 1fr 1fr; }
  .tabell-skapa-rad .knapp { grid-column: 1 / -1; }
}

.statusrad { margin: 4px 0 10px; }
.status-badge {
  display: inline-block; padding: 5px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.4px;
  border: 1px solid var(--kant-stark);
}
.status-badge.status-skickad { color: var(--ok); border-color: rgba(61, 220, 151, 0.4); background: rgba(61, 220, 151, 0.08); }
.status-badge.status-utkast { color: var(--muted); }

.revidering-panel { border-color: rgba(255, 206, 107, 0.4); }
.revidering-panel legend { color: var(--varning); border-color: rgba(255, 206, 107, 0.4); }
.revidering-panel p { font-size: 13px; color: var(--muted); }
.andringslista { margin: 10px 0; padding-left: 20px; font-size: 13px; color: var(--text); }
.andringslista li { margin: 3px 0; }

/* Föreskriftsuppdatering: projektets kopior mot ledningsägarregistret.
   Samma varningsfärg som revideringspanelen — det är samma ärende, och
   panelerna står bredvid varandra. */
.foreskrifter-panel { border: 1px solid rgba(255, 206, 107, 0.4); }
.foreskrifter-panel p { font-size: 13px; color: var(--muted); }
.foreskrifter-panel .knapp { margin-top: 4px; }
.foreskriftstabell { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; }
.foreskriftstabell th, .foreskriftstabell td {
  padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--kant);
  vertical-align: top;
}
.foreskriftstabell th { font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); }
.foreskriftstabell td.gammalt { color: var(--muted); text-decoration: line-through; }
.foreskriftstabell td.nytt { color: var(--ok); font-weight: 600; }
.foreskriftstabell input[type="checkbox"] { margin: 0; }
p.kort.notis { font-size: 13px; color: var(--muted); }

@media (max-width: 760px) {
  .foreskriftstabell, .foreskriftstabell tbody, .foreskriftstabell tr, .foreskriftstabell td { display: block; }
  .foreskriftstabell thead { display: none; }
  .foreskriftstabell tr { border-bottom: 1px solid var(--kant); padding: 6px 0; }
  .foreskriftstabell td { border: 0; padding: 2px 0; }
}

.ny-post { margin-top: 10px; }
.ny-post summary { cursor: pointer; list-style: none; }
.ny-post summary::-webkit-details-marker { display: none; }
.ny-post-innehall {
  display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px;
  margin-top: 8px; align-items: end;
}
.ny-post-innehall input { margin: 0; }

@media (max-width: 760px) {
  .ny-post-innehall { grid-template-columns: 1fr; }
}

/* --- Temaväxlare (se public/tema.js) ----------------------------------------- */
/* Temat sätts som data-tema på <html>. Utan attribut (eller "klassisk") gäller
   :root-värdena ovan oförändrade — det tidigare utseendet är alltså standard-
   fallbacken, och Nova nedan är enbart variabel-överstyrningar + extra dekor. */

.temaval {
  display: inline-flex; padding: 3px; gap: 2px;
  border: 1px solid var(--kant); border-radius: 999px;
  background: rgba(7, 12, 22, 0.5);
}
.temaval button {
  border: 0; cursor: pointer; border-radius: 999px;
  padding: 4px 13px; font-size: 11px; letter-spacing: 0.8px;
  color: var(--muted); background: transparent;
  transition: color 0.15s, background 0.15s, box-shadow 0.15s;
}
.temaval button:hover { color: var(--text); }
.temaval button.vald {
  color: #fff; background: linear-gradient(135deg, #1272c4, var(--accent));
  box-shadow: 0 0 14px rgba(47, 157, 255, 0.35);
}
.temaval.flytande { position: fixed; right: 16px; bottom: 16px; z-index: 99; }

/* --- Tema: Nova (futuristisk aurora) ----------------------------------------- */

html[data-tema="nova"] {
  --bg0: #060411;
  --bg1: #0c0a1d;
  --panel: rgba(22, 17, 46, 0.55);
  --panel-solid: #131028;
  --kant: rgba(148, 122, 255, 0.18);
  --kant-stark: rgba(160, 132, 255, 0.45);
  --accent: #7c5cff;
  --accent-ljus: #a78bff;
  --neon: #22d3ee;
  --muted: #9d96c4;
  --glow: 0 0 0 1px rgba(124, 92, 255, 0.3), 0 0 26px rgba(34, 211, 238, 0.18);
}

html[data-tema="nova"] {
  background:
    linear-gradient(rgba(148, 122, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 122, 255, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  background-size: 44px 44px, 44px 44px, auto;
  background-attachment: fixed;
}
html[data-tema="nova"] body { background: transparent; }
/* Auroran: eget fast lager bakom allt, mjukt drivande färgmoln */
html[data-tema="nova"] body::before {
  content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 34% at 78% 12%, rgba(124, 92, 255, 0.22), transparent 70%),
    radial-gradient(36% 30% at 12% 28%, rgba(34, 211, 238, 0.14), transparent 70%),
    radial-gradient(46% 40% at 55% 88%, rgba(214, 66, 255, 0.10), transparent 70%),
    radial-gradient(30% 26% at 90% 70%, rgba(47, 157, 255, 0.12), transparent 70%);
  animation: nova-aurora 26s ease-in-out infinite alternate;
}
@keyframes nova-aurora {
  0%   { transform: translate3d(-2%, -1%, 0) rotate(-1.2deg) scale(1);    filter: hue-rotate(0deg); }
  50%  { transform: translate3d(1.5%, 2%, 0)  rotate(0.6deg)  scale(1.06); filter: hue-rotate(14deg); }
  100% { transform: translate3d(3%, -2%, 0)   rotate(1.4deg)  scale(1.02); filter: hue-rotate(-10deg); }
}

/* Holografisk kortkant: gradient i själva ramen, panelen i padding-rutan */
html[data-tema="nova"] .kort {
  border-color: transparent;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(135deg, rgba(34, 211, 238, 0.35), rgba(124, 92, 255, 0.4) 45%, rgba(214, 66, 255, 0.28)) border-box;
}
html[data-tema="nova"] .kort::before {
  background: linear-gradient(90deg, transparent 5%, rgba(34, 211, 238, 0.6), rgba(167, 139, 255, 0.6), transparent 95%);
}
html[data-tema="nova"] h1 span {
  background: linear-gradient(90deg, var(--neon), var(--accent-ljus));
  -webkit-background-clip: text; background-clip: text;
}
html[data-tema="nova"] .topp::after {
  background: linear-gradient(90deg, transparent, var(--neon), var(--accent-ljus), transparent);
}

/* Knappar: violett-cyan förlopp med glidande ljusreflex */
html[data-tema="nova"] .knapp {
  background: linear-gradient(135deg, #5b3df0, #7c5cff 55%, #2394c4);
  border-color: rgba(167, 139, 255, 0.55);
  box-shadow: 0 0 18px rgba(124, 92, 255, 0.35);
  position: relative; overflow: hidden;
}
html[data-tema="nova"] .knapp::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg); transition: left 0.45s ease;
  pointer-events: none;
}
html[data-tema="nova"] .knapp:hover { box-shadow: 0 0 30px rgba(34, 211, 238, 0.4); }
html[data-tema="nova"] .knapp:hover::after { left: 130%; }
html[data-tema="nova"] .pulserar { animation-name: nova-puls; }
@keyframes nova-puls { 50% { box-shadow: 0 0 34px rgba(34, 211, 238, 0.55); } }

html[data-tema="nova"] table.lista th { background: rgba(19, 16, 40, 0.92); }
html[data-tema="nova"] table.lista tbody tr:hover { background: rgba(124, 92, 255, 0.08); }
html[data-tema="nova"] .omslagskort.vald { border-color: var(--neon); }
html[data-tema="nova"] .objekt.vald {
  box-shadow: inset 0 0 22px rgba(124, 92, 255, 0.08), 0 0 14px rgba(34, 211, 238, 0.12);
}
html[data-tema="nova"] .temaval button.vald {
  background: linear-gradient(135deg, #5b3df0, #22a8c4);
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.35);
}
html[data-tema="nova"] ::selection { background: rgba(124, 92, 255, 0.45); }
html[data-tema="nova"] ::-webkit-scrollbar { width: 10px; }
html[data-tema="nova"] ::-webkit-scrollbar-thumb {
  background: rgba(148, 122, 255, 0.35); border-radius: 6px;
}
html[data-tema="nova"] ::-webkit-scrollbar-track { background: transparent; }

/* Rörelse av: se kommentaren vid bakgrundslagret längst ned. Attributet sätts
   av tema.js före första uppritningen, med systeminställningen som utgångsläge. */
html[data-rorelse="av"][data-tema="nova"] body::before { animation: none; }
html[data-rorelse="av"][data-tema="nova"] .knapp::after { display: none; }

/* --- Blockredigeraren ------------------------------------------------------
   Två spalter: texten till vänster, och till höger de tre frågor man faktiskt
   ställer sig medan man skriver — går det att publicera, vad kräver blocket av
   formuläret, och hur ser det ut i rapporten. Panelen ligger kvar vid skroll;
   svaren är värdelösa om man måste leta upp dem. */
.redigerare-rutnat { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.redigerare-fakta { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.redigerare-panel { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.redigerare textarea#kropp { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px; line-height: 1.55; }
.verktygsrad { margin-bottom: 8px; }
.infogameny { position: relative; }
.infogameny ul { position: absolute; z-index: 20; left: 0; top: 100%; margin: 4px 0 0; padding: 6px;
  list-style: none; min-width: 320px; background: var(--kort-bg, #131a2a);
  border: 1px solid rgba(110, 170, 255, 0.25); border-radius: 8px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); }
.infogameny li button { display: block; width: 100%; text-align: left; padding: 7px 10px; font-size: 13px;
  background: none; border: none; color: var(--text); cursor: pointer; border-radius: 6px; }
.infogameny li button:hover { background: rgba(110, 170, 255, 0.12); }
.fel-kort { border-color: rgba(255, 206, 107, 0.45); }
.fel-kort strong { color: var(--varning); }
.ok-text { color: var(--ok); font-size: 13px; }
.problemlista, .kravlista { margin: 6px 0 12px; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.problemlista li { margin-bottom: 6px; }
.problemlista li.notis { color: var(--muted); }
.forhands-hopp { text-align: center; color: var(--muted); font-size: 12px; margin: 14px 0; }
.forhands-egen { border-left: 3px solid var(--ok); padding-left: 12px; }
.forhands-granne { opacity: 0.55; }

@media (max-width: 1100px) {
  .redigerare-rutnat { grid-template-columns: minmax(0, 1fr); }
  .redigerare-panel { position: static; max-height: none; }
}

/* --- Bakgrundslager: vibrationsvågor ---------------------------------------
   Verktygets eget ämne som bakgrund — vågor som breder ut sig från en punkt,
   som figur 1 i SS 460 48 66. Bara transform/opacity animeras, så lagret
   ligger på GPU:n och kostar ingen omritning av sidan. Byggs av tema.js och
   ligger bakom allt innehåll utan att ta emot klick. */
.bakgrund { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

.bakgrund-rutnat {
  position: absolute; inset: -50%;
  background-image:
    linear-gradient(rgba(110, 170, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 170, 255, 0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(600px) rotateX(56deg) translateY(-8%);
  transform-origin: 50% 0;
  /* Rutnätet står stilla. Det är mätytan vågen går genom, inte något som
     rör sig självt — och två samtidiga rörelser i ögonvrån drar mer
     uppmärksamhet än motivet är värt. */
  mask-image: radial-gradient(60% 55% at 50% 30%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(60% 55% at 50% 30%, #000 20%, transparent 78%);
}

/* Vågkällan sitter nere till vänster — ungefär där arbetsområdet ligger på
   en karta, och ur vägen för innehållet som börjar uppe till vänster.
   Källpunkten lyser svagt och pulserar i takt med att ringarna släpps. */
.bakgrund-vagor { position: absolute; left: 14%; bottom: 18%; width: 0; height: 0; }
.bakgrund-vagor::before {
  content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px;
  border-radius: 50%; background: rgba(120, 190, 255, 0.5);
  box-shadow: 0 0 16px 4px rgba(110, 170, 255, 0.2);
  animation: kall-puls 3s ease-in-out infinite;
}
@keyframes kall-puls {
  0%, 100% { transform: scale(1);   opacity: 0.3; }
  50%      { transform: scale(1.4); opacity: 0.6; }
}

.bakgrund-vagor span {
  position: absolute; left: 0; top: 0;
  width: 240px; height: 240px; margin: -120px 0 0 -120px;
  border: 1px solid rgba(125, 185, 255, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(110, 170, 255, 0.14), inset 0 0 18px rgba(110, 170, 255, 0.07);
  opacity: 0;
  /* linear, inte ease: en våg fortplantar sig med konstant hastighet i ett
     medium. Dämpningen ligger i opaciteten, inte i farten. */
  animation: vag-utbredning 15s linear infinite;
  will-change: transform, opacity;
}
/* Amplituden avtar med avståndet — kraftigt nära källan, långsammare längre
   ut, som dämpningskurvan i standarden. Ringen syns alltså tydligt en bra
   stund innan den tonar bort, i stället för att blinka till och försvinna. */
@keyframes vag-utbredning {
  0%   { transform: scale(0.08); opacity: 0; }
  5%   { opacity: 0.42; }
  35%  { opacity: 0.2; }
  70%  { opacity: 0.08; }
  100% { transform: scale(8);    opacity: 0; }
}

html[data-tema="nova"] .bakgrund-vagor span {
  border-color: rgba(34, 211, 238, 0.45);
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.14), inset 0 0 18px rgba(124, 92, 255, 0.08);
}
html[data-tema="nova"] .bakgrund-vagor::before {
  background: rgba(34, 211, 238, 0.5);
  box-shadow: 0 0 16px 4px rgba(34, 211, 238, 0.2);
}
html[data-tema="nova"] .bakgrund-rutnat {
  background-image:
    linear-gradient(rgba(148, 122, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 122, 255, 0.07) 1px, transparent 1px);
}

/* Vid "av" byggs hela .bakgrund aldrig — se tema.js. Ingen CSS behövs för det
   läget: sidan får då bakgrunden den hade innan vågorna fanns. Ett läge som
   ritar ut ringar men låter dem stå stilla vore det sämsta av två världar,
   och var precis det som såg ut som ett fel. */

/* --- Sök och filter i riskanalyslistan ------------------------------------
   Verktygsraden är en kontrollrad, inte ett formulär: fälten står i linje och
   är lika höga, och sökrutan tar plats framför filtren eftersom den används
   oftast. Kortets glaspanel återanvänds så att raden hör ihop med tabellen
   under i stället för att sväva. */
.sokrad {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding: 14px 16px; margin: 0 0 14px;
}
.sokfalt { position: relative; flex: 1 1 340px; display: block; margin: 0; }
.sokfalt input[type=search] {
  height: 42px; margin: 0; padding: 0 46px 0 40px;
  font-size: 14.5px; border-radius: 11px;
  background: rgba(7, 12, 22, 0.72);
  /* Webkits egen kryssknapp och lupp är ljusa och följer inte temat */
  appearance: none; -webkit-appearance: none;
}
.sokfalt input[type=search]::-webkit-search-decoration,
.sokfalt input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.sokfalt input::placeholder { color: var(--muted); opacity: 0.7; }
.sokikon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 17px; line-height: 1; color: var(--muted); pointer-events: none;
  transition: color 0.15s;
}
.sokfalt input:focus ~ .sokikon { color: var(--accent-ljus); }
.sokkbd {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 11px; line-height: 1; color: var(--muted);
  font-family: inherit;
  border: 1px solid var(--kant); border-radius: 5px; padding: 3px 6px;
  pointer-events: none; transition: opacity 0.15s;
}
.sokfalt input:focus ~ .sokkbd, .sokfalt input:not(:placeholder-shown) ~ .sokkbd { opacity: 0; }
/* Selecten ärver width:100% från formulärreglerna — i en flexrad ska de i
   stället vara precis så breda som sitt innehåll behöver. */
.sokrad select {
  width: auto; min-width: 158px; height: 42px; margin: 0;
  padding: 0 12px; border-radius: 11px;
  background: rgba(7, 12, 22, 0.72);
}
.sokrad .lank { margin-left: auto; font-size: 13px; }
.rakning { font-size: 13px; color: var(--muted); font-weight: normal; }
.ingatraffar { color: var(--muted); padding: 18px 4px; }
.status-badge.status-rev { color: var(--varning); border-color: rgba(255, 206, 107, 0.4); background: rgba(255, 206, 107, 0.08); }
.projektlista td .status-badge { margin-right: 4px; }

/* --- Delning till beställaren ----------------------------------------------
   Länken visas i en ruta som lägger sig över sidan i stället för i en ny vy:
   man delar mitt i ett annat arbetsmoment och ska tillbaka till det direkt.
   Fältet är readonly men markerbart — Ctrl+C ska fungera även om
   urklippsrättigheten nekas. */
.kodruta {
  background: rgba(7, 12, 22, 0.55); border: 1px solid var(--kant);
  border-radius: 8px; padding: 10px 12px; overflow-x: auto;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px; line-height: 1.5; color: var(--text);
}
.delningsruta {
  position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: center; justify-content: center;
  background: rgba(4, 8, 16, 0.62); backdrop-filter: blur(3px);
}
.delningsruta-inner {
  width: min(620px, calc(100vw - 32px));
  background: var(--kort-bg, #131a2a); border: 1px solid var(--kant);
  border-radius: 12px; padding: 20px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}
.delningsruta-status { margin: 0 0 12px; font-size: 14px; }
.delningsruta-status.fel { color: var(--varning); }
.delningsruta input { width: 100%; font-size: 13px; }
.delningsruta-knappar { margin-top: 14px; }

/* Låst valfält: värdet hör till posten och ändras inte i formuläret. Det bärs
   av ett dolt fält bredvid, eftersom en avstängd select inte skickas med. */
.f-kontroll.f-last {
  opacity: .7;
  cursor: not-allowed;
  background: var(--ruta, #f4f4f4);
  border-style: dashed;
}