/* Metamodell-canvas på /oversikt — statisk diagram med STORE klikkbare bokser
   (navigasjon) koblet med linjer. Farge per entitetstype via inline --type. */

.metakart {
  position: relative;
  /* Plasser i øvre-midtre: en moderat topp-luft (ikke limt til toppen, ikke
     sentrert i en høy side). Capet så det ikke blir for langt ned. */
  padding: clamp(40px, 9vh, 120px) 0 var(--avstand-6, 32px);
  overflow-x: auto;               /* smale skjermer: scroll i stedet for pan/zoom */
  display: flex;
  justify-content: center;
}

.metakart__scene { position: relative; flex: none; }

.metakart__linjer { position: absolute; top: 0; left: 0; pointer-events: none; }
.metakart__linje { fill: none; stroke: var(--farge-kant-sterk, #c8ced8); stroke-width: 2.5; }
.metakart__pil-form { fill: var(--farge-kant-sterk, #c8ced8); }

.metakart__boks {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  padding: 12px 16px;
  background: var(--flate-1, #fff);
  border: 1px solid var(--farge-kant, #e1e5eb);
  border-left: 4px solid var(--type, var(--farge-kant-sterk, #c8ced8));
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  text-decoration: none;
  color: var(--farge-tekst, #0f172a);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
}
.metakart__boks:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}
.metakart__boks--hub {
  border-left-width: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.metakart__boks-navn {
  font-size: 12px;
  font-weight: 600;
  color: var(--farge-tekst-dempet, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.metakart__boks-verdi { font-size: 26px; font-weight: 700; line-height: 1; color: var(--farge-tekst, #0f172a); }
.metakart__boks--hub .metakart__boks-verdi { color: var(--type); }
.metakart__boks-tekst { font-size: 12.5px; color: var(--farge-tekst-dempet, #64748b); }