.nf-knapp {
  all: unset; box-sizing: border-box; cursor: pointer; flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line-strong, #6E7686);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.nf-knapp:focus-visible { outline: 3px solid var(--focus, #14161D); outline-offset: 2px; }

.nf-velar {
  position: fixed; z-index: 1000; box-sizing: border-box;
  width: 280px; padding: 14px; display: grid; gap: 12px;
  background: #1D202A; color: #EDEFF4;
  border: 1px solid #2F3440; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 24px 64px -16px rgba(0, 0, 0, .7);
  font: 500 15px/1.3 var(--font-text, "Segoe UI Variable Text", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif);
}
.nf-velar[hidden] { display: none; }
.nf-tittel { margin: 0; font-weight: 600; color: #C3C8D2; }
.nf-skjult { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.nf-flate {
  position: relative; height: 168px; border-radius: 10px; cursor: crosshair; touch-action: none;
  background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}
.nf-prikk {
  position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; pointer-events: none;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .4);
}
.nf-hue {
  position: relative; height: 22px; border-radius: 999px; cursor: pointer; touch-action: none;
  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.nf-hue-prikk {
  position: absolute; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; pointer-events: none;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .4);
}
.nf-flate:focus-visible, .nf-hue:focus-visible { outline: 2px solid #EDEFF4; outline-offset: 3px; }

.nf-rad { display: flex; align-items: center; gap: 10px; }
.nf-prov { flex: none; width: 36px; height: 36px; border-radius: 10px; border: 1px solid #6E7686; }
.nf-hex-l { flex: 1; min-width: 0; }
.nf-hex {
  box-sizing: border-box; width: 100%; height: 40px; padding: 0 10px; border-radius: 10px;
  border: 1px solid #6E7686; background: #14161D; color: #EDEFF4;
  font: 600 16px/1 var(--font-mono, ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace); letter-spacing: .02em;
}
.nf-hex:focus { outline: 2px solid #EDEFF4; outline-offset: 1px; }
.nf-ferdig {
  all: unset; box-sizing: border-box; cursor: pointer; flex: none;
  height: 40px; padding: 0 16px; border-radius: 999px; background: #EDEFF4; color: #14161D; font-weight: 600;
}
.nf-ferdig:focus-visible { outline: 2px solid #EDEFF4; outline-offset: 2px; }

.nf-forslag { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.nf-f {
  all: unset; box-sizing: border-box; cursor: pointer; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
}
.nf-f[aria-pressed="true"] { box-shadow: 0 0 0 2px #1D202A, 0 0 0 4px #EDEFF4; }
.nf-f:focus-visible { outline: 2px solid #EDEFF4; outline-offset: 2px; }


.nf-velar.nf-ark {
  left: 0; right: 0; bottom: 0; top: auto; width: auto;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  border-radius: 20px 20px 0 0; border-bottom: 0;
}
.nf-velar.nf-ark .nf-flate { height: 200px; }
.nf-velar.nf-ark .nf-hue { height: 30px; }
.nf-velar.nf-ark .nf-hex, .nf-velar.nf-ark .nf-ferdig { height: 48px; }
.nf-velar.nf-ark .nf-forslag { gap: 12px; }