/* ============================================================
   farge-kontroll.css — vår egen fargevelger (farge-kontroll.js).
   DELT: brukes av admin (Skjemabygger m.fl.) og public (Farge-felt).
   Nøytrale farger med vilje — panelet skal fungere oppå både
   admin-tokens og public-tokens uten å arve noe.
   ============================================================ */

.fk-panel {
  position: fixed; z-index: 4000; width: 264px;
  background: #fff; color: #1a1a1a;
  border: 1px solid #d5d9df; border-radius: 10px;
  box-shadow: 0 12px 32px rgba(14, 17, 22, .18);
  padding: 15px;
}

.fk-flate { position: relative; width: 232px; height: 140px; cursor: crosshair; }
.fk-flate canvas { display: block; border-radius: 6px; }
.fk-merke {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .55); pointer-events: none;
}

.fk-nyanse {
  width: 100%; margin: 12px 0 10px; height: 14px; appearance: none;
  border-radius: 7px; outline-offset: 3px;
  background: linear-gradient(to right,
    hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%),
    hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%), hsl(360,100%,50%));
}
.fk-nyanse::-webkit-slider-thumb {
  appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--fk-n, #f00); border: 2.5px solid #fff;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .45); cursor: pointer;
}

.fk-rad { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fk-prove {
  width: 34px; height: 34px; flex: 0 0 auto;
  border: 1px solid #d5d9df; border-radius: 6px;
}
.fk-hex {
  flex: 1 1 auto; min-width: 0; font: inherit; font-variant-numeric: tabular-nums;
  padding: .45em .6em; border: 1.5px solid #d5d9df; border-radius: 6px;
}
.fk-knapp {
  font: inherit; font-size: .88rem; padding: .45em .7em; cursor: pointer;
  border: 1.5px solid #d5d9df; border-radius: 6px; background: #f6f7f9; color: #1a1a1a;
}
.fk-knapp:hover { border-color: #1a1a1a; }

.fk-bilde { position: relative; margin-top: 4px; }
.fk-bilde__flate { display: block; max-width: 100%; border-radius: 6px; cursor: crosshair; }
.fk-lupe {
  position: absolute; border: 2px solid #fff; border-radius: 8px;
  box-shadow: 0 4px 14px rgba(14, 17, 22, .35); pointer-events: none;
}
.fk-lupe__hex {
  position: absolute; pointer-events: none;
  font-size: .78rem; font-variant-numeric: tabular-nums;
  background: #1a1a1a; color: #fff; padding: 2px 7px; border-radius: 5px;
}

/* Selve verdifeltet (input type=color) beholder utseendet sitt — men markøren
   viser at det åpner NOE (vårt panel), og den native dialogen kommer aldri */
.fk-verdi { cursor: pointer; }

/* Pipetteknapp ved fargefeltene (sidepipetten — plukk fra siden) */
.fk-pipette {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 6px;
  border: 1.5px solid #d5d9df; background: #f6f7f9; color: #1a1a1a;
  cursor: pointer; display: inline-grid; place-items: center;
}
.fk-pipette:hover { border-color: #1a1a1a; }
.fk-pipette svg { width: 18px; height: 18px; }

/* Plukk-modus: usynlig overlegg over den LEVENDE siden; lupen viser fotografiet */
.fk-overlegg { position: fixed; inset: 0; z-index: 5000; cursor: crosshair; }
.fk-overlegg .fk-lupe, .fk-overlegg .fk-lupe__hex { position: fixed; }