/* Energipilen - skaerm 11. Moerkt tema, jf. referencebillede 11/19. */
.erp{background:var(--er-accent-svag); border-radius:10px; padding:12px 16px; color:#e6edf6}
.erp{border-color:var(--er-kant)}
.erp-hoved{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px}
.erp-hoved h2{margin:0; font-size:14px; font-weight:680; color:var(--er-tekst)}
.erp-kilde{font-size:11px; color:var(--er-tekst-2); text-align:right; max-width:48%}

.erp-skala{position:relative; margin:0 0 24px; padding-bottom:2px}
.erp-baand{display:flex; gap:2px; border-radius:10px; overflow:hidden}
/* Bogstavet stod i accentblaa oven paa A-G-skalaens egne lyse farver -
   maalt 3,94:1 paa den roede og 4,42:1 paa den groenne, altsaa under kravet.
   Det staar nu i den moerke brodtekstfarve, som er maalt 9-12:1 mod hele
   skalaen. */
.erp-felt{flex:1 1 0; text-align:center; font-size:10.5px; font-weight:700; color:var(--er-tekst);
          padding:8px 0; letter-spacing:.02em}
.erp-haandtag{
  position:absolute; top:-6px; width:20px; height:34px; margin-left:-10px;
  border-radius:10px; border:2px solid #fff; background:var(--er-accent-svag); cursor:grab;
  box-shadow:0 3px 10px rgba(0,0,0,.45); padding:0; touch-action:none;
}
.erp-haandtag:active{cursor:grabbing}
.erp-haandtag:focus-visible{outline:2px solid #7fb2ff; outline-offset:2px}
.erp-haandtag::after{
  content:"⇔"; position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; color:var(--er-tekst); font-size:11px;
}

.erp-fra-til{margin:0 0 12px; font-size:14px; color:var(--er-tekst-2)}
.erp-fra-til b{color:var(--er-tekst); font-size:16px}
.erp-pil{color:var(--er-tekst-2); margin:0 4px}
.erp-trinnavn{display:block; font-size:12px; color:var(--er-tekst-2); margin-top:2px}

.erp-tabel{display:grid; gap:1px; background:var(--er-flade-2); border:1px solid var(--er-kant); border-radius:10px; overflow:hidden}
.erp-raekke{display:flex; justify-content:space-between; gap:12px; padding:8px 12px; background:var(--er-flade); font-size:12.5px}
.erp-navn{color:#9fb3ca}
.erp-vaerdi{color:var(--er-tekst); font-weight:650; text-align:right; font-variant-numeric:tabular-nums}
.erp-mangler{color:var(--er-vent); font-size:11.5px; text-align:right; font-style:italic; max-width:60%}

.erp-tiltag{margin-top:12px}
.erp-tiltag h3{margin:0 0 8px; font-size:12.5px; font-weight:650; color:var(--er-tekst-2)}
.erp-tiltag ul{margin:0; padding-left:16px; display:grid; gap:4px}
.erp-tiltag li{font-size:12.5px; color:var(--er-tekst-2)}
.erp-tiltag li span{color:var(--er-tekst-2)}
.erp-note{font-size:12px; color:var(--er-tekst-2); background:var(--er-flade); border:1px dashed var(--er-kant);
          border-radius:10px; padding:8px 12px}

.erp-detalje{
  display:inline-block; margin-top:12px; padding:8px 16px; border:0; border-radius:10px;
  background:var(--er-ok-svag); color:var(--er-tekst); font:inherit; font-size:13.5px; font-weight:650; cursor:pointer;
}
.erp-detalje:hover{background:var(--er-ok-svag)}

@media (max-width:640px){
  .erp-felt{font-size:9px}
  .erp-kilde{display:none}
  .erp-raekke{flex-direction:column; gap:2px}
  .erp-vaerdi,.erp-mangler{text-align:left; max-width:none}
}

@media (max-width:520px){ .erp-detalje{display:block; width:100%} }

/* =====================================================================
   PREMIUM-SKALAEN
   =====================================================================
   Kuloererne er maettede nu, ikke lysnede, saa naboklasser kan skelnes.
   Derfor staar bogstavet i hvid med en let skygge - maalt over 4,5:1 paa
   alle ni felter, hvor den moerke brodtekstfarve tidligere var noedvendig
   paa de lyse felter.

   Den aktive klasse er ejendommens egen. Den loeftes med fuld styrke, en
   hvid ramme og lidt hoejde, mens de oevrige daempes - saa oejet finder
   ejendommens plads paa skalaen foer det laeser bogstaverne.
   ===================================================================== */
.erp-baand{ gap:4px; align-items:flex-end; }
.erp-felt{
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  padding:8px 0;
  opacity:.52;
  border-radius:6px;
  transition:opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}
.erp-felt.erp-aktiv{
  opacity:1;
  padding:12px 0;
  font-size:13px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.92), 0 6px 18px rgba(0,0,0,.45);
  position:relative; z-index:2;
}
/* Maalet, naar haandtaget staar et andet sted end ejendommen goer i dag. */
.erp-felt.erp-maal{
  opacity:.94;
  padding:12px 0;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);
}
@media (prefers-reduced-motion: reduce){
  .erp-felt{ transition:none; }
}

/* =====================================================================
   AFSTANDEN TIL NAESTE KLASSE
   =====================================================================
   Den skal kunne laeses paa et sekund, saa den staar over tabellen og
   ikke i en raekke nede i den. Bjaelken viser hvor taet ejendommen er
   paa graensen.
   ===================================================================== */
.erp-maal-linje{ margin:0 0 12px; }
.erp-maal-hoved{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.erp-maal-klasse{ font-size:15px; font-weight:700; color:var(--er-tekst, #eaf2fb); }
.erp-maal-pil{ color:#7fd8c6; font-size:15px; }
.erp-maal-naeste{
  font-size:15px; font-weight:700; color:#0b1f18;
  background:#7fd8c6; padding:1px 8px; border-radius:10px;
}
.erp-maal-bar{
  height:8px; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.14);
}
.erp-maal-bar span{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, #b07b09, #7f8c18 55%, #4b8639);
}
.erp-maal-tekst{
  margin-top:8px; font-size:12.5px; line-height:1.45;
  color:var(--er-tekst-2, #9fb3ca);
}
.erp-maal-tekst b{ color:var(--er-tekst, #eaf2fb); font-size:13.5px; }